/* BP16 setzt die Transition-Navbar oben auf "background: transparent !important" (@layer bootstrap).
   Ein !important in einem früheren Layer schlägt jedes spätere, auch site. Die Navbar fehlt im
   Design-Interface-Katalog, gemessen am 29.10.2026 gegen bootstrap_package 16.0.1. */
@layer bootstrap-override {
  .navbar-default,
  .navbar-default-transition,
  .navbar-default-transition:not(.navbar-transition),
  .navbar-inverse-transition:not(.navbar-transition) {
    background: linear-gradient(
      to right,
      rgb(68 194 139) 0%,
      rgb(76 169 76) 56%,
      rgb(40 53 131) 100%
    ) !important;
  }
}

@layer site {
  /* Port von fileadmin/templates/css/bertha_2018.css (Original v9). Regeln für news stehen in news.css. */

  @font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 300;
    src:
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-300.woff2") format("woff2"),
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-300.woff") format("woff");
  }
  @font-face {
    font-family: "Source Sans Pro";
    font-style: italic;
    font-weight: 300;
    src:
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-300italic.woff2") format("woff2"),
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-300italic.woff") format("woff");
  }
  @font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
    src:
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-regular.woff2") format("woff2"),
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-regular.woff") format("woff");
  }
  @font-face {
    font-family: "Source Sans Pro";
    font-style: italic;
    font-weight: 400;
    src:
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-italic.woff2") format("woff2"),
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-italic.woff") format("woff");
  }
  @font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 600;
    src:
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-600.woff2") format("woff2"),
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-600.woff") format("woff");
  }
  @font-face {
    font-family: "Source Sans Pro";
    font-style: italic;
    font-weight: 600;
    src:
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-600italic.woff2") format("woff2"),
      url("../Fonts/source-sans-pro-v21-latin-ext_latin-600italic.woff") format("woff");
  }

  body {
    font-family: "Source Sans Pro", sans-serif;
  }

  /* Grundtypografie wie im Original (BP 10 / Bootstrap 4). */
  :root {
    --bs-body-color: #2b2b2b;
    --bs-body-color-rgb: 43, 43, 43;
    --bertha-heading-scale: 1;
    --bertha-awesome-scale: 1;
    /* Senkrechter Frame-Abstand wie BP 10 (2 / 2.5 / 3 / 3.5 rem), ab 1200 px 2.5rem aus bertha_2018.css. */
    --frame-spacing-xs: 2rem;
    --frame-spacing-sm: 2.5rem;
    --frame-spacing-md: 3rem;
    --frame-spacing-lg: 3.5rem;
    --frame-spacing-xl: 2.5rem;
  }
  .frame-background-light {
    --frame-color: #2b2b2b;
  }
  /* Original: feste Stufen je Breakpoint statt BP16-fluid. .awesome (Carousel) hat eigene Stufen. */
  @media (min-width: 768px) {
    :root {
      --bertha-heading-scale: 1.1;
      --bertha-awesome-scale: 1.25;
    }
  }
  @media (min-width: 992px) {
    :root {
      --bertha-heading-scale: 1.2;
      --bertha-awesome-scale: 1.5;
    }
  }
  @media (min-width: 1200px) {
    :root {
      --bertha-heading-scale: 1.3;
      --bertha-awesome-scale: 1.75;
    }
  }
  .awesome {
    --bertha-heading-scale: var(--bertha-awesome-scale);
  }
  :is(h1, .h1) {
    font-size: calc(2rem * var(--bertha-heading-scale));
  }
  :is(h2, .h2) {
    font-size: calc(1.75rem * var(--bertha-heading-scale));
  }
  :is(h3, .h3) {
    font-size: calc(1.5rem * var(--bertha-heading-scale));
  }
  :is(h4, .h4) {
    font-size: calc(1.25rem * var(--bertha-heading-scale));
  }
  :is(h5, .h5) {
    font-size: calc(1rem * var(--bertha-heading-scale));
  }
  :is(h6, .h6) {
    font-size: calc(0.85rem * var(--bertha-heading-scale));
  }

  /* Links erst bei Hover unterstrichen (Bootstrap 4). Der Cookie-Link bleibt wie im Original unterstrichen. */
  a:not(.cc-link) {
    text-decoration: none;
    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  /* Bootstrap 5 hat .text-justify gestrichen, die Inhalte nutzen es noch. */
  .text-justify {
    text-align: justify;
  }

  /* Raster wie Bootstrap 4: Spalten mit 20 px Innenabstand statt BP16-gap.
     Damit ist die Hauptspalte der Unterseiten 815 statt 795 px breit. */
  .section-row {
    --section-gap-x: 0px;
    margin-left: -20px;
    margin-right: -20px;
  }
  .section-column {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Frames mit Hintergrund: seitlicher Innenabstand wie im Original statt --frame-spacing. */
  .container
    .frame:is(
      .frame-has-backgroundimage,
      .frame-background-primary,
      .frame-background-secondary,
      .frame-background-tertiary,
      .frame-background-quaternary,
      .frame-background-light,
      .frame-background-dark
    ):not(.frame-layout-embedded) {
    padding-left: 2rem;
    padding-right: 2rem;
    @media (min-width: 576px) {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
    @media (min-width: 768px) {
      padding-left: 3rem;
      padding-right: 3rem;
    }
    @media (min-width: 992px) {
      padding-left: 3.5rem;
      padding-right: 3.5rem;
    }
  }

  .carousel-text-inner {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
  }

  /* BP 10 kannte kein xxl: Container und Inhalt bleiben wie im Original bei 1140 px. */
  @media (min-width: 1400px) {
    .container,
    .frame-container-default,
    .cc-container {
      max-width: 1140px;
    }
  }

  /* Hauptnavigation: weiße Links auf dem Verlauf (siehe bootstrap-override) */
  .navbar-mainnavigation {
    --mainnavigation-link-font-size: 1.2rem;
    --mainnavigation-link-line-height: 1.5;
    --mainnavigation-link-padding-x: 0;
  }
  .navbar-default-transition .navbar-nav > .nav-item > .nav-link,
  .navbar-default-transition .navbar-nav > .nav-item > .nav-link:hover,
  .navbar-default-transition .navbar-nav > .nav-item > .nav-link:focus,
  .navbar-default-transition .navbar-toggler {
    color: #fff;
  }
  /* Original: einfache Dropdowns mit nur einer Ebene. BP16 macht daraus ein Mega-Menü,
     sobald ein Unterpunkt Kinder hat. */
  .navbar-mainnavigation .dropdown-nav[data-level="3"] {
    display: none;
  }
  .navbar-mainnavigation .navbar-nav .dropdown-menu {
    --bs-nav-link-font-size: 1rem;
    --bs-nav-link-color: #2b2b2b;
  }
  .navbar-mainnavigation .dropdown-menu-mega > .dropdown-nav {
    --mainnavigation-dropdown-column-spacing: 1px;
    > .nav-item > .nav-link {
      font-weight: inherit;
    }
  }
  @media (min-width: 992px) {
    /* Eine Menüzeile bei jeder Breite, auch mit 15 px Scrollleiste (Ticket 19): unter 1400 px 1rem,
       unter 1200 px steht das Menü unter dem Logo. Das Original lief rechts aus dem Bild. */
    .navbar-mainnavigation {
      --mainnavigation-link-font-size: 1rem;
      --mainnavigation-link-padding-x: 0.5rem;
      --mainnavigation-nav-spacing-x: 0;
      --mainnavigation-dropdown-spacer: 0;
    }
    /* Original: 130 px hoch, Logo 250x74 mittig, Menü in der unteren Hälfte. Beim Scrollen schrumpft
       BP16 die Leiste (.navbar-transition), dann gelten seine Werte wie im Original. */
    .navbar-default-transition:not(.navbar-transition) {
      padding-top: 44px;
      padding-bottom: 21px;
      .navbar-brand-image img {
        max-height: none;
        height: 74px;
      }
      .navbar-nav {
        margin-top: 23px;
      }
    }
    /* Notbremse, falls die Zeile doch nicht passt: umbrechen statt Punkte abschneiden. */
    .navbar-mainnavigation .navbar-nav {
      flex-wrap: wrap;
    }
    /* Pfeil neben statt unter dem Text. Er bleibt, weil BP16 Untermenüs nur über ihn öffnet (Touch, Tastatur). */
    .navbar-mainnavigation .navbar-nav > .nav-item {
      position: relative;
      flex-wrap: nowrap;
      /* Text–Pfeil 0.4rem, Pfeil–nächster Punkt 2 × padding-x: der Pfeil gehört sichtbar zu seinem Punkt. */
      > .nav-link-main {
        padding-right: 0.4rem;
        white-space: nowrap;
      }
      > .nav-link-toggle {
        padding-left: 0;
      }
      > .dropdown-menu {
        top: 100%;
        left: 0;
        right: auto;
        width: auto;
        max-width: none;
      }
      /* Der letzte Punkt steht am Fensterrand: sein Menü öffnet nach links. */
      &:last-child > .dropdown-menu {
        left: auto;
        right: 0;
      }
    }
  }
  /* Neben dem 250 px breiten Logo ist im 960-px-Container kein Platz für das Menü bei 1rem. */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-mainnavigation > .container {
      flex-wrap: wrap;
    }
    .navbar-mainnavigation .navbar-collapse {
      flex-basis: 100%;
    }
    .navbar-default-transition:not(.navbar-transition) .navbar-nav {
      margin-top: 8px;
    }
  }
  /* Höhenverlust beim Schrumpfen für den Flicker-Fix von jrbasics: 153 → 110, 128 → 70, 130 → 70.
     Stimmt der Wert nicht, springt der Inhalt an der Scrollschwelle und die Leiste flackert. */
  @media (min-width: 992px) {
    .navbar-mainnavigation {
      --jr-navbar-shrink: 43px;
      /* BP animiert mit "all" auch diesen Margin, langsamer als die Höhe: Die Seite rutscht kurz
         unter die Scrollschwelle (120 px) und die Leiste schaltet zurück. Margin springt deshalb sofort. */
      transition-property: padding, background, box-shadow, color;
    }
  }
  @media (min-width: 1200px) {
    .navbar-mainnavigation {
      --jr-navbar-shrink: 58px;
    }
  }
  @media (min-width: 1400px) {
    .navbar-mainnavigation {
      --mainnavigation-link-font-size: 1.1rem;
      --mainnavigation-link-padding-x: 0.6rem;
      --jr-navbar-shrink: 60px;
    }
  }
  @media (min-width: 1200px) {
    /* Wie im Original läuft das Menü rechts über den 1140-px-Container hinaus, bis an den Fensterrand. */
    .navbar-mainnavigation .navbar-collapse {
      margin-right: calc((1140px - 100vw) / 2 - 20px);
    }
  }
  /* Original öffnete Untermenüs beim Überfahren mit der Maus */
  @media (min-width: 992px) and (hover: hover) {
    .navbar-mainnavigation .navbar-nav > .nav-item:hover > .dropdown-menu {
      display: block;
    }
  }
  .navbar-fixed-top.navbar-default-transition + a + .carousel {
    margin-top: 0;
  }

  /* Cookie-Button: weiße Schrift auf Grün wie im Original (BP16 setzt Schwarz). */
  .cc-btn {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
  }

  /* Footer: Silhouette als Hintergrund, Meta-Menü links, Copyright rechts */
  footer {
    background-color: #fff;
    background-image: url("../Images/silouette-footer.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
    padding-top: 200px;
  }
  .footer-section,
  .footer-section-meta {
    background-color: transparent;
  }
  .footer-section-meta {
    text-align: left;
  }
  .footer-section-meta .footer-info-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .footer-copyright {
    text-align: right;
  }
  .footer-section-meta a:not(.btn) {
    color: #fff;
  }
  .footer-section-meta a:not(.btn):hover,
  .footer-section-meta a:not(.btn):focus {
    color: #fff;
    text-decoration: underline;
  }

  /* Carousel: Text unten auf grünem Band über die volle Breite, keine Indikatoren.
     BP 10 hieß das .valign/.vcontainer, BP16 .carousel-content-inner/.carousel-text-inner. */
  .carousel .carousel-content-inner {
    align-items: flex-end;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #fff;
  }
  .carousel-item-type-header .carousel-text-inner {
    width: 100%;
    background: rgb(76 169 76 / 0.7);
    padding: 0.5em 5%;
  }
  .carousel .carousel-indicators {
    display: none;
  }
  /* Ganzer Slide ist ein Link; das Original unterstrich ihn beim Überfahren nicht. */
  .carousel .carousel-content-link:hover {
    text-decoration: none;
  }
  /* Pfeile wie im Original: unsichtbar, beim Überfahren (oder Tastaturfokus) gleitet ein weißes
     Quadrat mit grünem Winkel vom Rand herein. Fläche 50 / 75 / 100 px breit. */
  .carousel {
    --carousel-control-width: 50px;
    @media (min-width: 576px) {
      --carousel-control-width: 75px;
    }
    @media (min-width: 768px) {
      --carousel-control-width: 100px;
    }
  }
  .carousel .carousel-control {
    opacity: 0;
    filter: none;
    transition: opacity 0.4s ease-in-out;
  }
  .carousel .carousel-control-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: none;
    padding: 1em;
    background: #fff;
    border-radius: 0;
    transition:
      left 0.4s ease-in-out,
      right 0.4s ease-in-out;
    &::before {
      content: "";
      display: block;
      width: 0.5em;
      height: 0.5em;
      border-top: 1px solid #4ca94c;
      border-right: 1px solid #4ca94c;
      transform: rotate(45deg);
    }
  }
  .carousel .carousel-control-prev .carousel-control-icon {
    left: -100%;
    &::before {
      transform: rotate(225deg);
    }
  }
  .carousel .carousel-control-next .carousel-control-icon {
    right: -100%;
  }
  .carousel:is(:hover, :has(:focus-visible)) {
    .carousel-control {
      opacity: 1;
    }
    .carousel-control-prev .carousel-control-icon {
      left: 0;
    }
    .carousel-control-next .carousel-control-icon {
      right: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .carousel :is(.carousel-control, .carousel-control-icon) {
      transition: none;
    }
  }

  .grid.frame {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Container-Tabs und -Akkordeon wie im Original (Bootstrap 4): eckig, hellere Rahmen.
     Eigenes Markup aus Templates/Container, nicht BP16s tab/accordion. */
  .frame-type-bertha_tabs .nav-tabs,
  .frame-type-bertha_tabs6 .nav-tabs {
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-border-color: #dee2e6;
    --bs-nav-tabs-link-active-color: #495057;
    --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
    --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
  }
  .frame-type-bertha_accordion .card {
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-border-color: rgba(0, 0, 0, 0.125);
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.5rem;
  }
  .frame-type-bertha_accordion .card-header .btn-link {
    text-decoration: none;
    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }
  figure .caption {
    font-size: 0.8rem;
    word-wrap: normal;
  }

  /* Schnelleinstieg und Kalender auf der Startseite */
  #c36 .frame-type-textpic {
    padding-top: 1rem;
  }
  #c525 {
    padding-top: 0;
  }
  .google-calendar {
    width: 100%;
    min-height: 600px;
    border: 0;
  }

  /* Auf Grün ist die Schrift weiß (BP16 rechnet für #4ca94c Schwarz aus). Bausteine mit eigenem
     hellen Grund im grünen Frame bleiben dunkel. Abweichung vom Original: dort war der aktive
     Reiter auf grünem Grund weiß auf weiß. */
  .frame-background-primary {
    --frame-color: #fff;
    --frame-link-color: #fff;
    --frame-link-hover-color: #fff;
    --bs-heading-color: #fff;
    --bs-table-color: #fff;
    a {
      color: #fff;
    }
    :is(.card, .shadow-box, .dropdown-menu) {
      --bs-heading-color: #2b2b2b;
      color: #2b2b2b;
      a {
        color: revert-layer;
      }
    }
    .nav-tabs .nav-link.active {
      color: #495057;
    }
  }
}

/* 04: BP 10 rendered an empty gallery (margin-bottom 1rem) above the text of text-only textpic/textmedia.
   BP 16 omits it, so these elements sat 16 px higher (170 elements on 83 pages). */
@layer site {
  .textpic-above > .textpic-text:only-child,
  .textmedia-above > .textmedia-text:only-child {
    margin-top: 1rem;
  }
  /* Secondary was #ff3f00 in the original (BP 16 default #514553); 9 elements, e.g. Sport c856. */
  .frame-background-secondary {
    --frame-background: #ff3f00;
  }
}

/* 02: Bootstrap 4 / BP 10 spacing that BP 16 changed, found on Beratung & Laufbahn, applies site-wide. */
@layer site {
  /* Gallery: 16 px between images like BP 10 (BP 16: 8 px). */
  .gallery-row {
    --gallery-gap: 1rem;
  }
  /* Image above/below text: 16 px between them like BP 10 (BP 16: gap 40 px). Column gap stays 40 px,
     BP 16 computes the left/right widths with it. */
  .textpic,
  .textmedia {
    row-gap: 1rem;
  }
  /* Text that is only a header: BP 10 kept the heading's 1rem bottom margin, BP 16 zeroes it as last child. */
  :is(.textpic-text, .textmedia-text) > .frame-header:last-child {
    margin-bottom: 1rem;
  }
  /* Collapsed neighbouring frames: BP 10 pulled them up by 3.5rem while bertha_2018 padded only 2.5rem
     from 1200 px, so they sat 16 px closer than BP 16's exact collapse (see the 04 block above). */
  @media (min-width: 1200px) {
    .frame-size-default.frame-space-after-none:not(
        .frame-option-ruler-after,
        .frame-has-backgroundimage,
        .frame-layout-embedded
      ) {
      &.frame-background-none + .frame-background-none,
      &.frame-background-primary + .frame-background-primary,
      &.frame-background-secondary + .frame-background-secondary,
      &.frame-background-light + .frame-background-light,
      &.frame-background-dark + .frame-background-dark {
        &.frame-size-default.frame-space-before-none:not(
            .frame-option-ruler-before,
            .frame-has-backgroundimage,
            .frame-layout-embedded
          ) {
          --frame-outer-spacing-before: calc(-1 * var(--frame-spacing) - 1rem);
        }
      }
    }
  }
  /* Tables: cell padding 0.75rem like Bootstrap 4 (Bootstrap 5: 0.5rem). */
  .table > :not(caption) > * > * {
    padding: 0.75rem;
  }
  /* Content lists: browser indent 40 px like Bootstrap 4 (Bootstrap 5 reboot: 2rem). */
  .frame-inner :is(ul, ol):is(.list-normal, :not([class])) {
    padding-left: 40px;
  }
}

/* 05: Footer-Meta wie im Original in einer Zeile: Menü links, Copyright rechts, 104 px hoch.
   BP16 setzt 40 px Abstand hinter die leere Footer-Navigation und 16 px über jedes weitere Kind
   der Info-Zeile; dadurch war die Leiste 160 px hoch und die Silhouette (cover) anders skaliert. */
@layer site {
  .footer-section-meta .footer-menu-section + .footer-info-section,
  .footer-section-meta .footer-info-section > * {
    margin-top: 0;
  }
  .footer-section-meta .footer-copyright {
    margin-left: auto;
  }
}

/* 03: Frame "light" und Tabellen wie BP 10 / Bootstrap 4, gefunden auf Wir über uns, gilt site-weit. */
@layer site {
  /* BP 10: #f8f9fa, BP 16: #e9e9e9 (35 Seiten mit hellem Frame). */
  .frame-background-light {
    --frame-background: #f8f9fa;
  }
  /* Bootstrap 4: Tabelle ohne eigenen Grund, Text in Frame-Farbe (auf Grün weiß), Linie über jeder Zeile.
     BS5 legt weiße Zellen mit #000 auf grüne Frames (Ansprechpartner c396). */
  .table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    --bs-table-border-color: #dee2e6;
  }
  .table > :not(caption) > * > * {
    border-top-width: var(--bs-border-width);
    border-bottom-width: 0;
  }
  /* Tabellen mit border="1" (Latein): im Original volles Gitter vom Browser, die BS5-Reboot nimmt es weg. */
  .table[border] > :not(caption) > * > * {
    border: 1px solid #808080;
    border-top-color: var(--bs-table-border-color);
  }
}

/* 03: Dateiliste (uploads) wie BP 10: Name in h4-Größe, Dateigröße daneben (Schulzeitung c101). */
@layer site {
  .frame-type-uploads .filelink-heading {
    font-size: calc(1.25rem * var(--bertha-heading-scale));
    font-weight: 300;
  }
  .frame-type-uploads .filelink-filesize {
    display: inline;
    margin-left: 0.5rem;
    font-size: 80%;
  }
}