/* Neugestaltung 2026 (Branch css-experiment). Liegt über dem Port des Originals (bertha.css, news.css):
   ohne diese Datei sieht die Seite aus wie zum Go-Live (Tag go-live-2026-10-29).
   Idee: weiße Kopfleiste, farbige Frames als abgerundete "Inseln", Bertha-Grün #4ca94c bleibt die Markenfarbe.
   Farbe nach Design-Review: Grün in Helligkeitsstufen. Große Flächen hell (#dcefd6), #4ca94c nur als Akzent
   ohne Text (weiß darauf 2.96:1, dunkel darauf wirkt schlammig), Text und Knöpfe in Tiefgrün.
   Ziel etwa 60 % Weiß/Hauch, 30 % Wiese/Waldgrün, 10 % Bertha-Grün und Gelb. */

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../Fonts/lexend-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../Fonts/lexend-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@layer site {
  :root {
    --bertha-green: #4ca94c;
    /* Links und Knöpfe: auf Weiß 6.6:1, Weiß darauf 6.6:1, auf Wiese 5.4:1 */
    --bertha-green-ink: #1f6b2c;
    --bertha-forest: #183d24;
    /* Wiese: große Flächen (statt #4ca94c), Hauch: ruhige Flächen */
    --bertha-meadow: #dcefd6;
    --bertha-mint: #eef6ec;
    /* Nur für Links auf Waldgrün (8.4:1): Kontakt und Krankmeldung sollen auffallen. */
    --bertha-sun: #ffd23f;
    --bertha-ink: #1c2a21;
    --bertha-display: "Lexend", "Source Sans Pro", sans-serif;
    --bertha-gutter: clamp(0.5rem, 1.5vw, 1.25rem);
    --bertha-radius-slab: clamp(1.25rem, 2.5vw, 2rem);
    --bertha-radius-card: 1.25rem;
    --bertha-radius-tile: 0.75rem;
    --bertha-shadow: 0 1px 2px rgb(24 61 36 / 0.06), 0 12px 32px -12px rgb(24 61 36 / 0.22);

    --bs-body-color: var(--bertha-ink);
    --bs-body-color-rgb: 28, 42, 33;
    --bs-heading-color: var(--bertha-forest);
    --bs-link-color: var(--bertha-green-ink);
    --bs-link-color-rgb: 31, 107, 44;
    --bs-link-hover-color: var(--bertha-forest);
    --bs-link-hover-color-rgb: 24, 61, 36;
  }

  body {
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--bertha-display);
    font-weight: 500;
    /* Redakteure setzen ganze Absätze als h3/h4 und fetten darin mit strong: Lexend wird sonst schwer. */
    &:is(h3, h4, h5, h6, .h3, .h4, .h5, .h6) {
      font-weight: 400;
    }
    :is(strong, b) {
      font-weight: 600;
    }
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-wrap: balance;
  }
  /* Lexend läuft breiter als Source Sans: eine Stufe kleiner als im Original. */
  :is(h1, .h1) {
    font-size: calc(1.75rem * var(--bertha-heading-scale));
  }
  :is(h2, .h2) {
    font-size: calc(1.5rem * var(--bertha-heading-scale));
  }
  :is(h3, .h3) {
    font-size: calc(1.3rem * var(--bertha-heading-scale));
  }
  :is(h4, .h4) {
    font-size: calc(1.15rem * var(--bertha-heading-scale));
  }
  :is(h5, .h5) {
    font-size: calc(1rem * var(--bertha-heading-scale));
  }

  /* Blocksatz reißt Löcher in schmale Spalten, Flattersatz liest sich leichter (auch bei Legasthenie). */
  .text-justify {
    text-align: left;
  }

  /* Links im Fließtext unterstrichen: Farbe allein reicht als Hinweis nicht (WCAG 1.4.1). */
  .frame-inner :is(p, td, li:not([class])) a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  :focus-visible {
    outline: 3px solid var(--bertha-forest);
    outline-offset: 2px;
  }

  /* Kopfleiste: Verlauf aus bertha.css, als schwebende Insel mit dem Radius der Flächen. */
  .navbar-mainnavigation {
    top: var(--bertha-gutter);
    margin-inline: var(--bertha-gutter);
    border-radius: var(--bertha-radius-slab);
  }
  .navbar-mainnavigation.navbar-transition {
    box-shadow: 0 6px 24px -12px rgb(24 61 36 / 0.35);
  }
  .navbar-default-transition .navbar-nav > .nav-item > .nav-link-main {
    font-weight: 600;
  }
  .navbar-mainnavigation a.nav-link:is(:hover, :focus-visible) {
    text-decoration: none;
  }
  .navbar-default-transition .navbar-nav > .nav-item > .nav-link:is(:hover, :focus-visible) {
    text-decoration: underline;
    text-decoration-color: rgb(255 255 255 / 0.5);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.45em;
  }
  .navbar-default-transition :focus-visible {
    outline-color: #fff;
  }
  @media (min-width: 1200px) {
    /* bertha.css zieht das Menü bis an den Fensterrand, hier endet es vor der Rundung. */
    .navbar-mainnavigation .navbar-collapse {
      margin-right: calc((1140px - 100vw) / 2 - 20px + var(--bertha-gutter) + 0.75rem);
    }
  }
  @media (min-width: 992px) {
    /* Aktiver Bereich: weißer Strich unter dem Wort, ohne die Höhe der Leiste zu ändern. */
    .navbar-default-transition .navbar-nav > .nav-item.active > .nav-link-main {
      text-decoration: underline;
      text-decoration-color: #fff;
      text-decoration-thickness: 3px;
      text-underline-offset: 0.45em;
    }
    .navbar-mainnavigation .navbar-nav .dropdown-menu {
      border: 0;
      border-radius: var(--bertha-radius-card);
      box-shadow: var(--bertha-shadow);
      padding: 0.5rem;
      overflow: hidden;
    }
  }
  .navbar-mainnavigation .navbar-nav .dropdown-menu .nav-link {
    border-radius: 0.5rem;
    &:is(:hover, :focus-visible) {
      background: var(--bertha-mint);
      color: var(--bertha-forest);
    }
  }

  /* Luft: Abstand zwischen den Themenblöcken und mehr Innenraum in den Flächen. */
  :root {
    --bertha-section-gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  @media (min-width: 1200px) {
    :root {
      --frame-spacing-xl: 3.5rem;
    }
  }
  /* Oberste Ebene: zwischen zwei Blöcken immer mindestens --bertha-section-gap. Gleichfarbige farbige
     Nachbarn bleiben eine Fläche (BP-Zusammenzug), weiße Nachbarn bekommen doppelten Innenabstand. */
  :is(.body-bg, .section) > .frame + .frame {
    margin-top: max(var(--frame-outer-spacing-before, 0px), var(--bertha-section-gap));
  }
  :is(.body-bg, .section) > .frame-background-primary + .frame-background-primary,
  :is(.body-bg, .section) > .frame-background-light + .frame-background-light,
  :is(.body-bg, .section) > .frame-background-dark + .frame-background-dark {
    /* Nicht zusammenziehbare Nachbarn (Abstand nach > none) hatten eine weiße Lücke mit eckigen Kanten. */
    margin-top: min(var(--frame-outer-spacing-before, 0px), 0px);
  }
  :is(.body-bg, .section) > .frame-background-none + .frame-background-none {
    margin-top: 0;
  }

  /* Bühne: abgerundete Insel mit Abstand zur Kopfleiste, Text auf einer grünen Karte unten links */
  /* Die Kopfleiste steht selbst um --bertha-gutter tiefer. */
  .navbar-fixed-top.navbar-default-transition + a + .carousel {
    margin-top: calc(2 * var(--bertha-gutter));
  }
  .carousel {
    margin-inline: var(--bertha-gutter);
    border-radius: var(--bertha-radius-slab);
    overflow: hidden;
    isolation: isolate;
  }
  .carousel .carousel-content-inner {
    justify-content: flex-start;
    padding: 0 max(1.25rem, calc((100% - 1100px) / 2)) clamp(1.25rem, 4vw, 2.75rem);
  }
  /* Weiße Karte: steht ruhig auf jedem Foto. Breit genug für "Demokratiepädagogik" in voller Größe. */
  .carousel-item-type-header .carousel-text-inner {
    width: auto;
    max-width: min(44rem, 100%);
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
    background: #fff;
    color: var(--bertha-forest);
    border-radius: var(--bertha-radius-card);
    box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.55);
    text-shadow: none;
    transition: opacity 0.35s ease;
  }
  /* Beim Überblenden lagen die Texte zweier Folien lesbar übereinander: nur die stehende Folie zeigt Text. */
  .carousel-item:not(.active) .carousel-text-inner,
  .carousel-item.active:is(.carousel-item-start, .carousel-item-end) .carousel-text-inner {
    opacity: 0;
  }
  /* Text bleibt zentriert: .text-center ist eine Bootstrap-Utility mit !important. */
  .carousel .carousel-text-inner :is(.carousel-header, .carousel-subheader) {
    color: inherit;
    margin: 0;
  }
  .carousel .carousel-header {
    /* Lange Komposita auf schmalen Schirmen trennen statt überlaufen. */
    hyphens: auto;
    overflow-wrap: break-word;
    font-weight: 600;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
  }
  /* Unterzeile ist oft die zweite Hälfte des Mottos ("Miteinander lernen - miteinander leben"): nicht zu klein. */
  .carousel .carousel-subheader {
    margin-top: 0.3em;
    color: var(--bertha-ink);
    font-weight: 400;
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
    letter-spacing: 0;
    line-height: 1.35;
  }
  .carousel .carousel-control-icon {
    border-radius: 999px;
    padding: 1.1em;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
  }
  .carousel:is(:hover, :has(:focus-visible)) {
    .carousel-control-prev .carousel-control-icon {
      left: 1rem;
    }
    .carousel-control-next .carousel-control-icon {
      right: 1rem;
    }
  }

  /* Farbige Frames der obersten Ebene werden Inseln mit Rand zum Fenster. Gleichfarbige Nachbarn
     verschmelzen zu einer Insel (BP zieht sie ohnehin ohne Abstand zusammen). */
  /* Oberste Ebene: direkt in .body-bg (Inhalt) oder .section (Rand/Fuß, z. B. Kooperationspartner). */
  :is(.body-bg, .section)
    > .frame:is(
      .frame-background-primary,
      .frame-background-secondary,
      .frame-background-light,
      .frame-background-dark
    ) {
    margin-inline: var(--bertha-gutter);
    border-radius: var(--bertha-radius-slab);
  }
  :is(.body-bg, .section) > .frame-background-primary + .frame-background-primary,
  :is(.body-bg, .section) > .frame-background-light + .frame-background-light,
  :is(.body-bg, .section) > .frame-background-dark + .frame-background-dark {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  :is(.body-bg, .section) > .frame-background-primary:has(+ .frame-background-primary),
  :is(.body-bg, .section) > .frame-background-light:has(+ .frame-background-light),
  :is(.body-bg, .section) > .frame-background-dark:has(+ .frame-background-dark) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Farbige Kästen in Spalten (Grid-Container, Hauptspalte der Unterseiten): Karten.
     Stehen zwei direkt untereinander, bilden sie eine Karte. */
  :is(.grid, .section-column)
    .frame:is(
      .frame-background-primary,
      .frame-background-secondary,
      .frame-background-light,
      .frame-background-dark
    ) {
    border-radius: var(--bertha-radius-card);
    &:has(+ :is(.frame-background-primary, .frame-background-light, .frame-background-dark)) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    & + :is(.frame-background-primary, .frame-background-light, .frame-background-dark) {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  /* Leere Text-und-Bild-Elemente (nur Abstand) fallen weg. */
  .body-bg
    > .frame:has(> .frame-group-container .textpic):not(:has(.textpic-gallery, .textpic-text > *)) {
    display: none;
  }

  /* Links auf hellem Grund: BP rechnet sie aus #4ca94c (2.96:1 auf Weiß). */
  .frame-background-none,
  .frame-background-light {
    --frame-link-color: var(--bertha-green-ink);
    --frame-link-hover-color: var(--bertha-forest);
  }
  /* "Primary" ist jetzt die helle Wiese statt Bertha-Grün. Überschreibt die weiße Schrift aus bertha.css. */
  .frame-background-primary {
    --frame-background: var(--bertha-meadow);
    --frame-color: var(--bertha-ink);
    --frame-link-color: var(--bertha-green-ink);
    --frame-link-hover-color: var(--bertha-forest);
    --bs-heading-color: var(--bertha-forest);
    --bs-table-color: var(--bertha-ink);
    a {
      color: var(--bertha-green-ink);
    }
  }
  .frame-background-light {
    --frame-background: var(--bertha-mint);
    --frame-color: var(--bertha-ink);
  }
  .frame-background-dark {
    --frame-background: var(--bertha-forest);
    /* Kontaktkasten: Adresse war 24 px fett, das schrie. */
    h3 {
      font-size: 1.35rem;
    }
    h4 {
      font-size: 1.15rem;
    }
    --frame-color: #fff;
    --bs-heading-color: #fff;
    a {
      color: var(--bertha-sun);
      overflow-wrap: anywhere;
    }
  }

  /* Secondary war Signalorange (#ff3f00), ein Hinweis wie "Wegbeschreibung": in der Palette Sonnengelb. */
  .frame-background-secondary {
    --frame-background: var(--bertha-sun);
    --frame-color: var(--bertha-forest);
    --frame-link-color: var(--bertha-forest);
    --frame-link-hover-color: var(--bertha-forest);
    --bs-heading-color: var(--bertha-forest);
    a {
      color: var(--bertha-forest);
    }
  }

  /* Kopfzeile mit Link auf Grün (Vertretungsplan, iServ, Servicebereich): die ganze Fläche ist der Knopf. */
  .frame-type-header.frame-background-primary:has(a) {
    position: relative;
    transition: background-color 0.2s;
    .element-header {
      margin: 0;
    }
    a {
      color: var(--bertha-forest);
      text-decoration: none;
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
      }
    }
    &:has(a:hover, a:focus-visible) {
      --frame-background: var(--bertha-forest);
      a {
        color: #fff;
      }
    }
    &:has(a:focus-visible) {
      outline: 3px solid var(--bertha-forest);
      outline-offset: 3px;
    }
    a:focus-visible {
      outline: none;
    }
  }
  /* Vertretungsplan und iServ: zwei kompakte Knöpfe nebeneinander */
  #c598 {
    .row {
      justify-content: center;
      gap: 1rem;
    }
    .col:empty {
      display: none;
    }
    .col {
      flex: 0 1 18rem;
    }
    .frame-type-header {
      --frame-background: var(--bertha-green-ink);
      border-radius: 999px;
      padding: 0;
      a {
        color: #fff;
      }
    }
    .frame-inner {
      padding-block: 1.1rem;
    }
    .element-header {
      font-size: 1.2rem;
      font-weight: 600;
    }
  }

  /* "Wir denken an euch": Redakteure haben Fließtext als h3 gesetzt. Fließtext als Text, nur die Zitate
     (fett) bleiben Überschrift. */
  #c1172 .textpic-text > h3 {
    font-family: inherit;
    font-size: 1.15rem;
    line-height: 1.6;
    letter-spacing: 0;
    &:has(strong) {
      font-family: var(--bertha-display);
      font-size: 1.5rem;
      line-height: 1.3;
    }
  }

  /* Unterseiten: Abstand zur schwebenden Kopfleiste wie auf der Startseite */
  header + :is(.breadcrumb-section, main) {
    margin-top: var(--bertha-gutter);
  }

  /* Reiter: Pillen wie die Knöpfe statt Karteikarten. Aktiv Tiefgrün, sonst Mint (auf Wiese Weiß). */
  :is(.frame-type-bertha_tabs, .frame-type-bertha_tabs6) .nav-tabs {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 0;
    .nav-link {
      border: 0;
      border-radius: 999px;
      padding: 0.45em 1.1em;
      background: var(--bertha-mint);
      color: var(--bertha-forest);
      font-weight: 600;
      &:is(:hover, :focus-visible) {
        background: var(--bertha-meadow);
      }
      &.active {
        background: var(--bertha-green-ink);
        color: #fff;
      }
    }
  }
  /* Der Inhalt eines Reiters steht direkt unter den Pillen. Auf farbigem Reiter-Kasten trägt der Kasten
     den Innenabstand, nicht noch einmal jedes Kind. */
  :is(.frame-type-bertha_tabs, .frame-type-bertha_tabs6) .tab-pane > .frame {
    padding-top: 0;
  }
  :is(.frame-type-bertha_tabs, .frame-type-bertha_tabs6):not(.frame-background-none) {
    padding-block: 2.5rem;
    .tab-pane > .frame {
      padding-inline: 0;
      padding-bottom: 0;
    }
  }
  .frame-background-primary :is(.frame-type-bertha_tabs, .frame-type-bertha_tabs6) .nav-tabs,
  .frame-background-primary:is(.frame-type-bertha_tabs, .frame-type-bertha_tabs6) .nav-tabs {
    .nav-link:not(.active) {
      background: #fff;
    }
  }

  /* Akkordeon: abgerundete Karten mit Mint-Kopf und Pfeil, der den Zustand zeigt */
  .frame-type-bertha_accordion .card {
    --bs-card-border-width: 2px;
    --bs-card-border-color: var(--bertha-mint);
    --bs-card-border-radius: var(--bertha-radius-card);
    --bs-card-inner-border-radius: calc(var(--bertha-radius-card) - 2px);
    --bs-card-cap-bg: var(--bertha-mint);
    --bs-card-cap-padding-y: 0.9rem;
    overflow: hidden;
    .card-header {
      border-bottom: 0;
    }
    .card-body > .frame {
      padding-top: 0;
    }
    & + .card {
      margin-top: 0.75rem;
    }
  }
  .frame-type-bertha_accordion .card-header .btn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
    color: var(--bertha-forest);
    font-family: var(--bertha-display);
    font-weight: 500;
    font-size: 1.1rem;
    &::after {
      content: "";
      flex: none;
      width: 0.55em;
      height: 0.55em;
      margin-top: -0.25em;
      border-right: 2px solid;
      border-bottom: 2px solid;
      transform: rotate(45deg);
      transition: transform 0.2s;
    }
    &[aria-expanded="true"]::after {
      margin-top: 0.25em;
      transform: rotate(-135deg);
    }
  }

  /* Unterseiten: Brotkrumen ohne graues Band, Subnavigation als ruhige Karte */
  .breadcrumb-section {
    background-color: transparent;
    font-size: 0.95rem;
  }
  .subnav-nav {
    padding: 0.5rem;
    font-size: 0.95rem;
    background: var(--bertha-mint);
    border-radius: var(--bertha-radius-card);
    .subnav-nav {
      padding: 0 0 0 0.75rem;
      border-left: 0;
      background: none;
      &::before {
        content: none;
      }
    }
  }
  .subnav-item + .subnav-item {
    margin-top: 2px;
  }
  .subnav-link {
    border: 0;
    border-radius: 0.5rem;
    color: var(--bertha-ink);
    &:is(:hover, :focus-visible) {
      background-color: #fff;
      color: var(--bertha-forest);
    }
    .active > & {
      background-color: #fff;
      font-weight: 600;
    }
  }

  /* Bilder im Inhalt runden, Symbol-Kacheln proportional */
  .gallery-item :is(img, video, iframe) {
    border-radius: min(var(--bertha-radius-tile), 22%);
  }
  figure .caption {
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: var(--bertha-ink);
  }

  /* Kooperationspartner und Auszeichnungen: Logos auf gleich großen weißen Kacheln */
  #c507 .gallery-item figure {
    aspect-ratio: 16 / 9;
    max-width: 20rem;
    margin-inline: auto;
  }
  :is(#c285, #c507) {
    .gallery-row {
      align-items: stretch;
    }
    .gallery-item figure {
      position: relative;
      margin: 0;
      background: #fff;
      border-radius: var(--bertha-radius-tile);
      aspect-ratio: 4 / 3;
    }
    .gallery-item img {
      position: absolute;
      inset: 1.25rem 1.5rem;
      width: calc(100% - 3rem);
      height: calc(100% - 2.5rem);
      object-fit: contain;
      border-radius: 0;
    }
  }

  /* Knöpfe: Pille, Weiß auf Tiefgrün */
  .btn {
    --bs-btn-border-radius: 999px;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.4rem;
  }
  .btn-primary,
  .cc-btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bertha-green-ink);
    --bs-btn-border-color: var(--bertha-green-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bertha-forest);
    --bs-btn-hover-border-color: var(--bertha-forest);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bertha-forest);
  }
  .cc-window {
    --bs-body-bg: var(--bertha-forest);
  }

  .scroll-top {
    border-radius: 999px;
    background-color: var(--bertha-green-ink);
    box-shadow: var(--bertha-shadow);
  }

  /* Fuß: Silhouette über einem waldgrünen Band. Weiß auf dem hellen Teil der Silhouette war zu schwach. */
  footer {
    background-color: #fff;
    background-image: none;
    padding-top: 0;
  }
  .footer-section-content {
    min-height: clamp(110px, 16vw, 230px);
    /* 1 px tiefer: der untere Rand des PNG ist halbtransparent und zeigte eine weiße Linie. */
    background: url("../Images/silouette-footer.png") left calc(100% + 1px) / 100% auto no-repeat;
  }
  .footer-section-meta {
    font-size: 0.95rem;
    background-color: var(--bertha-forest);
  }

  @media (prefers-reduced-motion: reduce) {
    .frame-type-header.frame-background-primary:has(a) {
      transition: none;
    }
  }
}