/* 100 */
@font-face {
   font-family: 'MuseoSansRounded';
   src: url('/fileadmin/templates/gesund-aufwachsen2026/font/MuseoSansRounded100.otf') format('opentype');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
}

/* 300 */
@font-face {
   font-family: 'MuseoSansRounded';
   src: url('/fileadmin/templates/gesund-aufwachsen2026/font/MuseoSansRounded300.otf') format('opentype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

/* 500 */
@font-face {
   font-family: 'MuseoSansRounded';
   src: url('/fileadmin/templates/gesund-aufwachsen2026/font/MuseoSansRounded500.otf') format('opentype');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

/* 700 */
@font-face {
   font-family: 'MuseoSansRounded';
   src: url('/fileadmin/templates/gesund-aufwachsen2026/font/MuseoSansRounded700.otf') format('opentype');
   font-weight: 700;
   font-style: normal;
   font-display: swahttps://www.kreis-warendorf.de/typo3/index.php?route=%2Fmain&token=56dd55684e94f1145bd3a5fa41e99ca15a43d9b5#p;
}

/* 900 */
@font-face {
   font-family: 'MuseoSansRounded';
   src: url('/fileadmin/templates/gesund-aufwachsen2026/font/MuseoSansRounded900.otf') format('opentype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

/* 1000 */
@font-face {
   font-family: 'MuseoSansRounded';
   src: url('/fileadmin/templates/gesund-aufwachsen2026/font/MuseoSansRounded1000.otf') format('opentype');
   font-weight: 1000;
   font-style: normal;
   font-display: swap;
}
body {
   font-family: 'MuseoSansRounded', sans-serif;
}


h1 {
   font-weight: 900;
   color: #555;
}

h2 {

  font-weight: 900!important;
 text-decoration:none!important;
   color: #555;
  margin-bottom:1.5rem;
}
h3 {
   color: #555;
}

h4 {
   color: #555;
}
h5 {
   color: #555;
}
p {
   color: #555;
}
}
strong {
   font-weight: 900;
}

.light {
   font-weight: 100;
}
  /* ------------------------------------Header-------------------------------------- */
.header-title {
   display: flex;
   align-items: center;
 
   height: 80px;
}




.header-divider {
   border-bottom: 10px solid #FFC730;
  
}
  /* ------------------------------------suche-------------------------------------- */

.kesearch_searchbox input.form-control.input-sm:focus {
   border-color: #FFC730;
   box-shadow: 0 0 4px rgba(255, 199, 48, 0.5);
   outline: none;
}

.kesearch-input-wrapper input.form-control {
   border: 5px solid #FFC730;
   border-radius: 25px;
   padding: 8px 15px;
   height: 44px;
}

.search-input-icon-wrapper {
   position: relative;
}


.search-input-icon-wrapper input {
   padding-right: 40px;
   border-radius: 10px;
   border: 1px solid #FFC730;
}


.search-icon-btn {
   position: absolute;
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: #333;
   font-size: 16px;
   cursor: pointer;
}


.search-icon-btn:hover {
   color: #FFC730;
}

/* ------------------------------------------Footer --------------------------------------------------------*/
.footer ul {
   list-style: none !important;
   margin: 0 !important;
   padding: 0 !important;

   display: flex !important;
   flex-direction: row !important;
   justify-content: center;
   align-items: center;
   gap: 15px;
}

.footer ul li {
   float: none !important;
   display: inline-block !important;
}

.footer ul li a {
   display: inline-block;
   text-decoration: none;
}
.footer ul {
   list-style: none !important;
   margin: 0 !important;
   padding: 0 !important;

   display: flex !important;
   flex-direction: row !important;
   justify-content: center;
   align-items: center;
   gap: 15px;
}


.footer a {
   color: #555 !important;
   transition: color 0.2s ease;
}

.footer a:hover {
   color: #555 !important;
  font-weight:bold;
}
/* ---------------------------------------------Link----------------------------------------------------------------------------*/
a {
   color: #222 !important;
   transition: color 0.2s ease;
}
a:hover {
   color: #000 !important;
  font-weight:bold;
}

/* ----------------------------------container----------------------------------------------------------------------------------- */
.container-fluid {
  --bs-gutter-x: 0rem !important;
}

/*---------------------------------------Card Startseite------------------------------------------------------------------------- */
.custom-card {
    border: 5px solid #e5a800;
    border-radius: 30px;
    overflow: hidden;
    max-width: 320px;

    display: flex;
    flex-direction: column;

    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-header{
  background-color:white;
}

.custom-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block; 
}

.custom-card .card-body {
    padding: 30px 25px 10px 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.custom-card .card-title {
    font-weight: 700;
    font-size: 23px;
    color: #555 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.custom-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/*-----------------------------card 2---------------------------------------------------*/ 
.card-box {
    position: relative;
    height: 260px;
    padding: 30px;
    border: 6px solid #f2b632;
    border-radius: 40px;
    transition: all .25s ease;
}



.card-box .card-title {
    font-size: 23px;
    font-weight: 700;
    color: #555;
}


.card-box .card-link {
    position: absolute;
    bottom: 25px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Linktext */

.card-box .linktext {
    font-weight: 700;
    color: #555;
}

/* Font Awesome Pfeil */

.card-box .arrow i {
    color: #f2b632;
    font-size: 22px;
}

/* Hover Effekt */

.card-box:hover {
     transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.dce-box {
    border: 6px solid #f2b632;
    border-radius: 40px;
    padding: 30px;
  margin-bottom: 2rem;
    max-width: 400px;
}

.dce-box h6 {
    margin-bottom: 12px;
    font-size: 14px;
}

.dce-box strong {
    color: #555;
}
.dce-box:hover {
     transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}


/*news*/
.news-list-view .article {
    position: relative;
    border: 6px solid #f2b632;
    padding: 20px!important;
    margin-bottom: 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    overflow: hidden;
}

.news-list-view .article:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}


.card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    text-indent: -9999px;
}


.news-list-view .article .header a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}
.read-more-indicator{
  color:#FFC730;
   position: absolute;
    top: 0;
    right: 25px;
    height: 100%;
    display: flex;
    align-items: center;
}
.header h3 span {
    font-weight: bold;
}


.fa-arrow-left{
  color:#FFC730;
}

.news-sidebar-card {

  border: 6px solid #f2b632;
  border-radius: 20px;

}
.news-sidebar-card {
   position: sticky;
   top: 20px;
}

.news-sidebar-card .card-title {
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
}
.backlink{
 text-decoration: none!important;
}
/*-----------------------Breadcrumb----------------------------------- */
.breadcrumb {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.breadcrumb-item {
  color: #555;            
  font-weight: 300;
}


.breadcrumb-item.active {
  font-weight: 700;
  color:#555;
}


.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 8px;
  color: #555;
  font-weight: 300;
}
.breadcrumb a {
  text-decoration: none;
  color: inherit; 
}


.breadcrumb a:hover {
  text-decoration: none;
}

/*-----------------------Pagination----------------------------------- */

/* =========================================================
   TYPO3 News: Paginierung (Widget Markup .f3-widget-paginator)
   Flache Variante ohne Rahmen, FontAwesome Pfeile
   ========================================================= */

.f3-widget-paginator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    font-size: 1.25rem;
}

.f3-widget-paginator li {
    margin: 0;
}

/* Zahlenlinks: kein Rahmen, kein Hintergrund */
.f3-widget-paginator li > a,
.f3-widget-paginator li.current {
    display: block;
    padding: .5rem .85rem;
    line-height: 1.2;
    border: 0;
    background-color: transparent;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: color .15s ease-in-out;
}

.f3-widget-paginator li > a:hover {
    background-color: transparent;
    color: #E5A800;
}

.f3-widget-paginator li > a:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* aktive Seite: größer und in Gelb */
.f3-widget-paginator li.current {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1;
    padding: .25rem .7rem;
    color: #FFC730;
}

/* Auslassungspunkte: li ohne Link und ohne current */
.f3-widget-paginator li:not(.current):not(:has(> a)) {
    padding: .5rem .35rem;
    color: var(--bs-secondary-color);
}

/* Pfeile: nur Icon, kein Rahmen, kein Hintergrund */
.f3-widget-paginator li.previous > a,
.f3-widget-paginator li.next > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: .5rem .35rem;
    border: 0;
    background-color: transparent;
    font-size: 0;
}

.f3-widget-paginator li.previous > a:hover,
.f3-widget-paginator li.next > a:hover {
    background-color: transparent;
}

.f3-widget-paginator li.previous > a::before,
.f3-widget-paginator li.next > a::before {
    font: var(--fa-font-solid);
    font-size: 1.25rem;
    line-height: 1.2;
    display: inline-block;
    color: #FFC730;
    transition: color .15s ease-in-out;
    -webkit-font-smoothing: antialiased;
}

.f3-widget-paginator li.previous > a:hover::before,
.f3-widget-paginator li.next > a:hover::before {
    color: #E5A800;
}

.f3-widget-paginator li.previous > a::before {
    content: "\f053";
}

.f3-widget-paginator li.next > a::before {
    content: "\f054";
}

/* ---------------------------------------------------------
   Zeile "Seite 1 von 2" optisch ausblenden, aber fuer
   Screenreader erhalten.
   Nach dem Test im Inspektor die nicht zutreffenden
   Selektoren entfernen.
   --------------------------------------------------------- */
.news-list-view .page-info,
.news-list-view .pageinfo,
.news-list-view .tx-news-pagination-info,
.f3-widget-paginator li.page-info,
.f3-widget-paginator li.info,
.f3-widget-paginator + p {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* mobil etwas kompakter */
@media (max-width: 575.98px) {
    .f3-widget-paginator {
        font-size: 1.05rem;
    }

    .f3-widget-paginator li > a,
    .f3-widget-paginator li.current {
        padding: .4rem .65rem;
    }

    .f3-widget-paginator li.current {
        font-size: 1.4em;
        padding: .2rem .55rem;
    }

    .f3-widget-paginator li.previous > a,
    .f3-widget-paginator li.next > a {
        min-width: 2.15rem;
        padding: .4rem .3rem;
    }

    .f3-widget-paginator li.previous > a::before,
    .f3-widget-paginator li.next > a::before {
        font-size: 1.05rem;
    }
}