/**
 * CUSTOM STYLES CSS (not SCSS)
*/


/* style="background-color: var(--color-brand-primary);" */

 /* Unterstrich Überschriften */
 h1.bordered-left::after,  h2.bordered-left::after {
    position: absolute;
    content: "";
    bottom: -15px;
    border-bottom: 5px solid var(--color-brand-primary);
    width: 165px;
    left: 15px;}

h2.bordered-left {font-size: 1.75em;}


div.m-article__width {padding-top: 5em; min-height: 600px;}
.search-page div.m-article__width, .u-width-full.startseite div.m-article__width, .start-berufsschule-page div.m-article__width, .start-fosbos-page div.m-article__width, .start-technikerschule-page div.m-article__width {padding-top: 0;}


/* Temporär Elemente ausgeblendet */
@media screen and (min-width:1000px) {
  .m-header__trigger {display: none;}
}


/* Menü Layer1 START */

/* Menu Layer 2 START*/

@media(max-width: 1700px){
 body.start-berufsschule-page a[href="/berufsschule/nahrung-gesundheit.html"] span[itemprop="name"],
 body.start-berufsschule-page a[href="/berufsschule/migrations-integrations-klassen.html"] span[itemprop="name"],
 body.start-berufsschule-page a[href="/berufsschule/duales-studium-mechatronik.html"] span[itemprop="name"],
 body.start-berufsschule-page a[href="/schulzentrum/beratung-unterstuetzung.html"] span[itemprop="name"]
 {
  display: inline-block;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  max-width: 7rem;   
}
}

/* temporär - vereinfachung code? */
@media(max-width: 1350px){
 body.start-berufsschule-page a[href="/berufsschule/nahrung-gesundheit.html"] span[itemprop="name"],
 body.start-berufsschule-page a[href="/berufsschule/migrations-integrations-klassen.html"] span[itemprop="name"],
 body.start-berufsschule-page a[href="/berufsschule/duales-studium-mechatronik.html"] span[itemprop="name"],
 body.start-berufsschule-page a[href="/schulzentrum/beratung-unterstuetzung.html"] span[itemprop="name"]
 {max-width: 100%;}
}



@media(max-width: 1350px){
.start-berufsschule-page .m-header__meta, .start-berufsschule-page .m-header__navigation {
        display: none;
    }
.start-berufsschule-page .m-header__trigger {
        display: block !important; /* Or flex, inline-block, etc., depending on desired layout */
        visibility: visible !important;
        opacity: 1 !important;
    }
}



.m-header__trigger {margin-top: 16px; padding-right: 24px;}

.m-offcanvas__logo {display: none;}

/* Menu Layer 2 END */
.m-header__center, .is-scrolled-delta .m-header__center{
        height: 128px;
}

.is-scrolled-delta .m-header__meta {
    padding-top: .5rem;;
    max-height: 3rem;
    opacity: 1;
    pointer-events: auto;
}

.m-header__meta {width: 100%; justify-content: flex-end; padding-right: 1.5em;}

.m-header__meta {text-transform: uppercase;}

@media (min-width:576px) {.is-scrolled-delta .m-header--stickyDesktop .m-header__main {height: 8rem;}}

.m-header--flyoutMega .m-header__navigation .level-1>.inner>ul>li {
    height:80px;
    display: flex;
    align-items: center;
}

.m-header__navigation {padding-right: 1.5em;}

.m-main {min-height: 500px;} /* für Seiten ohne inhalte */



/* Menü Layer1 ENDE */


/* Header START */
.is-scrolled .m-header, .m-header {
    height: 118px !important;
    position: fixed;
}
.m-header__main {background-color: white;}
.m-header__center  {
  position: relative;
}
.m-header__center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: var(--color-brand-primary);
  z-index: -1;
}

.m-header__width {max-width: none}

.m-header__center a.active:not(.nav-layer-2 a.active), .m-header__center .trail a,
.m-header__center a:hover:not(.nav-layer-2 a:hover) {color: white !important;}

.m-header__center a.o-button-link {color: white !important}


.nav-layer-2 .active {background-color: var(--color-brand-primary) ;}
.nav-layer-2 .active a span{color:white;}

.m-header__meta .level-1, .m-header__navigation .level-1  {font-size:var(--font-size-header-xl)}

.m-header--flyoutMega .m-header__navigation .level-2 {padding-top: 0;}

/* START Umfärben Menüleiste */
div .m-header__navigation {font-size: 0.9em !important;}
/* ENDE Umfärben Menüleiste */


/* Header ENDE */





/* Content START */

.m-header+*:not(.startseite .m-header+*) /*{margin-top: 6rem !important;}*/
h1 {font-size: 2.3rem;}
h2 {font-size: 1.3rem;}

/* Content ENDE */


/*  FOOTER */

#anchor-footer.m-footer {margin: top 1em;}

div.m-footer__middle a[href^=tel]:after, div.m-footer__middle a[href^=mailto]:after {display: none;} /* Aublenden Link-Icons Footer*/
div.u-text-align-center a[target*=blank]:after {display: none;}

/* Navigation: Flexbox aktivieren */
.nav-layer-1 .level-1 ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-left: 0;
}

/* Alle Listenelemente haben standardmäßig gleiche Reihenfolge */
.nav-layer-1 .level-1 ul li {
  order: 1;
  transition: all 0.3s ease;
}

/* Aktiver Menüpunkt nach ganz links schieben */
.nav-layer-1 .level-1 ul li.active, .nav-layer-1 .level-1 ul li.trail {
  order: 0;
}

/* Optional: Aktives Element visuell hervorheben */
.nav-layer-1 .level-1 ul li.active a, .nav-layer-1 .level-1 ul li.trail a {
  font-weight: bold;
}


.m-header__row {
  display: flex !important;
  justify-content: space-between !important; /* das erzeugt Lücken */
  align-items: end !important;
  gap: 0 !important; /* nur zur Sicherheit */
}
.m-header__center{
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: end;
}
.u-root {padding:0}

/* START Suchleiste Anpassung */
@media (min-width: 576px) {
  .o-button-primary--formInline.searchbutton-footer {
    width: 48px;          /* feste Breite */
    height: 48px;         /* feste Höhe */
    min-width: 48px;      /* Mindestbreite bleibt gleich */
    flex: 0 0 48px;       /* verhindert, dass er größer/kleiner gezogen wird */
    top: 0;
    border-radius: 0 5px 5px 0;     /* keine abgerundeten Ecken → rechteckig */
    padding: 0;           /* damit Icon mittig sitzt */
    display: flex;        /* für saubere Zentrierung */
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0px 10px 0px rgba(0, 0, 0, 0.3);
  }
}

.o-button-primary .fa {
  font-size: 1em;
}

.m-search {
  padding-top: 0;
}

input[type=search] {border-radius: 5px 0 0 5px; box-shadow: -2px 0px 10px 0px rgba(0, 0, 0, 0.3);}
/* ENDE Suchleiste Anpassung */




/* START News Paginierung ausblenden */

nav.pagination.block {display: none}

/* ENDE News Paginierung ausblenden */


.m-header__meta .trail, .m-header__meta .active {display: none;}

/* Meta-Zeile: links das verschobene LI, rechts die übrigen Meta-Links */
.m-header__meta {
  display: flex !important;
  align-items: center !important;
  gap: .75rem;
}
.m-header__meta > li.nav-trail-outside {
  list-style: none;
  display: inline-flex;
  margin: 0;
  padding: 0;
  margin-right: auto;           /* schiebt die restlichen Meta-Links nach rechts */
}
/* Meta-UL sauber rechtsbündig */
.m-header__meta .level-1 > .inner > ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end !important;
  align-items: center;
  gap: .75rem;
}



/*.m-header+* {
    margin-top: 9rem !important;
}


/* =============  Event-Slider Startseite Schulzentrum (Bild links, Text rechts)  ============= */

/* Nur Bild-Spalte bzw. nur Text-Spalte zeigen */
.c-sliderSlick--images  .c-dualSlide__text  { display: none; }
.c-sliderSlick--texts   .c-dualSlide__image { display: none; }

/* --- Gleichmäßige Slide-Höhen in Slick --- */
.c-sliderSlick .slick-track { display: flex; }
.c-sliderSlick .slick-slide { height: auto; }
.c-sliderSlick .slick-slide > div { height: 100%; }

/* --- Einheitliche Bilddarstellung --- */
/* feste Ratio (modern) */
.c-dualSlide__image { aspect-ratio: 16 / 10; }
/* Fallback für ältere Browser: feste Höhe */
@supports not (aspect-ratio: 1 / 1) {
  .c-dualSlide__image { height: 520px; }
}
.c-dualSlide__image img,
.startseite-slider {              /* deine Bild-Klasse bleibt weiter nutzbar */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

/* Abstände/Typo für die Text-Seite (wie im Beispiel) */
.o-subline.u-text-decoration-lined {
  color: #f39c27;
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  padding-bottom: .25rem;
  display: inline-block;
}
.o-subline.u-text-decoration-lined::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: currentColor; opacity: .35;
}
.c-sliderSlick--texts .h2 { margin: .25rem 0 .75rem; line-height: 1.2; }
.c-sliderSlick--texts p  { margin: 0 0 1rem; }

/* Pfeile außen */
.c-sliderSlick--arrowsOutside .slick-arrow {
  width: 42px; height: 42px;
  border-radius: 999px;
  display: grid; place-items: center;
}
.c-sliderSlick--arrowsOutside .slick-arrow--prev { margin-right: .75rem; }

/* Dots innen (Theme-kompatibel) */
.c-sliderSlick--dotsInside .slick-dots { position: static; margin-top: .5rem; }

/* --- Responsive Feintuning --- */
@media (max-width: 1024px) {
  @supports not (aspect-ratio: 1 / 1) {
    .c-dualSlide__image { height: 420px; }
  }
}
@media (max-width: 768px) {
  @supports not (aspect-ratio: 1 / 1) {
    .c-dualSlide__image { height: 340px; }
  }
}


/* --- Slider Startseite Schulzentrum - Bilder Button Seitenzahl ausblenden--- */
input, button, select {
display: none;
}

/* Sandwich Menü - extra Ebene */
@media (min-width: 992px) {
    .is-offcanvas-open .m-offcanvas__section--second {
        display: none;
    }
}

.submenue.trail {
    font-weight: 700;
    background-color: var(--color-brand-primary);
}

/* Flyout Menü - Bewegunsgdauer Einblende */

.m-offcanvas__section--second {display: none;}