@charset "UTF-8";
/*FONTS*/
/* inter-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  src: url("../Fonts/inter-v20-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 100;
  src: url("../Fonts/inter-v20-latin-100italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/inter-v20-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 200;
  src: url("../Fonts/inter-v20-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/inter-v20-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  src: url("../Fonts/inter-v20-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/inter-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../Fonts/inter-v20-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/inter-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  src: url("../Fonts/inter-v20-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/inter-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  src: url("../Fonts/inter-v20-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/inter-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../Fonts/inter-v20-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/inter-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 800;
  src: url("../Fonts/inter-v20-latin-800italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/inter-v20-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  src: url("../Fonts/inter-v20-latin-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/*
Dark-blue: #0E1D42;
blue: #206CB1;
light-blue: #DCEBF9;
*/
body {
  font-family: "Inter";
  padding-top: 0;
}

/* Lange deutsche Komposita ("Zukunftsthemen", "Werkstattbetriebe") sind in
   grossen Schriftgraden breiter als ein Handy-Display. Ohne das ragen sie aus
   ihrem Kasten und werden von overflow-x: clip abgeschnitten. */
:is(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

/* EXT:gmm_base gibt Ueberschriften auf schmalen Displays feste Groessen vor -
   h2 wird unter 576px auf 2rem gesetzt, zwischen 320 und 480px sogar auf feste
   34px. Fuer den Onepager ist das zu gross. Element-Selektoren sind schwach
   genug, dass jede eigene Regel mit Klasse (Karten, Kacheln, Buehne) weiter
   gewinnt - hier greift also nur, was sonst ungeregelt bliebe. */
@media (max-width: 767.98px) {
  body :is(h1, h2, h3) {
    font-size: clamp(20px, 5.6vw, 32px);
  }
}
/* Ueberschriften-Stufen aus dem statischen Entwurf.
   Wird von der aktuellen Ausgabe nicht mehr getroffen - die Header-Buehne
   nimmt ihre Groessen aus dem Kontext (styles/layoutfiles/_header-stage). */
.header-1 {
  color: #0E1D42;
  font-size: 40px;
  font-weight: bold;
}

.header-2 {
  color: #206CB1;
  font-size: 128px;
  text-transform: uppercase;
  font-weight: bold;
}

.header-3 {
  color: #0E1D42;
  font-size: 77px;
  text-transform: uppercase;
  font-weight: bold;
}

.blue-border {
  border-left: 10px solid #206CB1;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

/* --- RTE-Stile ---------------------------------------------------------------
   Die Klassen stammen aus dem Stil-Dropdown des Editors
   (Configuration/RTE/Default.yaml). Hier steht nur die Grundoptik -
   Groesse und Farbe je Baustein regelt der Kontext, z.B. die grossen
   Kennzahlen auf der Header-Buehne.
   -------------------------------------------------------------------------- */
/* "Marked Text": Inline-Auszeichnung einzelner Woerter */
.marked-text {
  color: #206CB1;
  font-weight: 700;
}

/* "Button light-blue" / "Button dark-blue": ein Link wird zur Schaltflaeche.
   Beides RTE-Stile aus Configuration/RTE/Default.yaml. */
a.btn-lb,
a.btn-db {
  display: inline-block;
  margin: 6px 8px 0 0;
  padding: 8px 28px;
  border-radius: 10px;
  /* ACHTUNG Kontrast: bei 18px gilt WCAG 1.4.3 mit 4.5:1, #206CB1 auf
     #DCEBF9 erreicht aber nur 4.18:1 (siehe .btn-lb unten). Entweder
     zurueck auf 24px - das zaehlt als "grosse Schrift" und braucht nur
     3:1 - oder die Schriftfarbe von .btn-lb auf #1E67A5 (4.87:1). */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
a.btn-lb:hover,
a.btn-db:hover {
  filter: brightness(0.94);
}
a.btn-lb:focus-visible,
a.btn-db:focus-visible {
  outline: 3px solid #0E1D42;
  outline-offset: 3px;
}

a.btn-lb {
  background-color: #DCEBF9;
  color: #206CB1;
}

/* Weiss auf #206CB1 sind 5.08:1 und damit auch fuer kleine Schrift sicher. */
a.btn-db {
  background-color: #206CB1;
  color: #ffffff;
}

/* Schaltflaechen aus dem statischen Entwurf. Wird von der aktuellen Ausgabe
   nicht mehr getroffen, die Buttons kommen ueber a.btn-lb / a.btn-db. */
button {
  border-radius: 10px;
  padding: 5px 25px;
  border: none;
  font-size: 24px;
}

.button-lb {
  background-color: #DCEBF9;
  color: #206CB1;
  margin-right: 15px;
}

.button-b {
  color: #DCEBF9;
  background-color: #206CB1;
}

.btn-wh {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid rgba(32, 108, 177, 0.8);
  border-radius: 999px;
  background-color: #ffffff;
  color: #DCEBF9;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  margin-top: 15px;
}

.btn-bt {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid rgba(32, 108, 177, 0.8);
  border-radius: 8px;
  background-color: #206CB1;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  margin-top: 15px;
}

.scroll-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  display: inline-grid;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background-color: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: scale(1.05);
}

.scroll-to-top:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 4px;
}

.scroll-to-top img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 480px) {
  .scroll-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-to-top {
    transition: none;
  }
}
/* ==========================================================================
   LANDINGPAGE AUTOMECHANIKA
   --------------------------------------------------------------------------
   Die einzige Einstellung im Backend ist "Hintergrund-Farbe" am Element
   "Section". Jede Farbe ist ein fertiger Bautyp - es muss keine CSS-Klasse
   getippt werden:

     keine Hintergrundfarbe [no-bg]   unveraendert, kein Sonderlayout
     Hintergrundfarbe 1 [bg-col-1]    Intro-Block: dunkelblau, zweispaltig,
                                      grosse Headline, Auto-Grafik (PNG)
     Hintergrundfarbe 2 [bg-col-2]    Karten-Block auf Blau
     Hintergrundfarbe 3 [bg-col-3]    Karten-Block auf Hellblau,
                                      Auto-Grafik (SVG) als Wasserzeichen

   Alle Farbkombinationen erfuellen WCAG 2.2 AA (Text >= 4.5:1).
   ========================================================================== */
/* Ohne Farbflaeche: gleiche Bausteine, aber der Seitenhintergrund bleibt
   sichtbar. Wird ueber das Feld "CSS-Klasse" der Section gesetzt, weil die
   Farbauswahl nur drei Werte kennt (Hintergrund-Farbe = "keine"). */
.bg-col-0 {
  --op-surface: transparent;
  --op-on-surface: #0E1D42;
  --op-on-surface-muted: #0E1D42;
  --op-accent: #206CB1;
  --op-rule: rgba(14, 29, 66, 0.18);
}

.bg-col-1 {
  --op-surface: #0E1D42; /* dunkelblau */
  --op-on-surface: #ffffff;
  --op-on-surface-muted: #C9DCF1;
  --op-accent: #6EA8DE;
  --op-rule: rgba(255, 255, 255, 0.22);
}

.bg-col-2 {
  --op-surface: #4D89C1; /* blau */
  --op-on-surface: #ffffff;
  /* auf Blau bleibt auch der Fliesstext reinweiss - ein abgetoentes Blau
     kaeme hier nur auf ~4:1 und verfehlt AA. */
  --op-on-surface-muted: #ffffff;
  --op-accent: #ffffff;
  --op-rule: rgba(255, 255, 255, 0.3);
}

.bg-col-3 {
  --op-surface: #DCEBF9; /* hellblau */
  --op-on-surface: #0E1D42;
  --op-on-surface-muted: #0E1D42;
  --op-accent: #206CB1;
  --op-rule: rgba(14, 29, 66, 0.18);
}

/* Gemeinsame Block-Optik aller drei Farben */
:is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) {
  --op-dark: #0E1D42;
  --op-blue: #206CB1;
  --op-radius: 40px;
  --op-card-radius: 16px;
  --op-gap: 20px;
  position: relative;
  overflow: hidden;
  max-width: 1440px;
  border-radius: var(--op-radius);
  padding: 46px 52px;
  background-color: var(--op-surface);
  color: var(--op-on-surface);
  /* Bootstrap-Gutter neutralisieren; Inhalt immer ueber der Deko-Grafik */
}
:is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) > .row {
  --bs-gutter-x: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
:is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) {
  /* Goldener Balken + inline-block der Ueberschriften aus EXT:bivkfz_theme
     gelten hier nicht (dieses Design nutzt eigene Ueberschriften-Optik). */
}
:is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) :is(h1, h2, h3, h4)::after {
  content: none;
}
:is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) :is(h1, h2, h3, h4) {
  display: block;
}
:is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) {
  /* Ueberschriften uebernehmen die Vordergrundfarbe der Flaeche - sonst bleibt
     die dunkle Standardfarbe aus EXT:bivkfz_theme auf dunklem Grund stehen. */
}
:is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* Links auf den dunklen Flaechen: das Standardblau kaeme dort nur auf 3:1.
   Vordergrundfarbe erben, Unterstreichung macht sie ohne Farbe erkennbar. */
:is(.bg-col-1, .bg-col-2) a {
  color: inherit;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   HINTERGRUNDFARBE 1 - Intro-Block
   Zweispaltig ueber den vorhandenen 2-Spalten-Container, grosse Headline,
   Claim mit Akzentbalken, Zitat-Spalte rechts, Auto-Grafik unten rechts.
   -------------------------------------------------------------------------- */
.bg-col-1 {
  /* Auto.png, rein dekorativ (Hintergrundbild, fuer Screenreader unsichtbar) */
}
.bg-col-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../Images/BackendLayouts/Auto.png);
  background-repeat: no-repeat;
  background-position: right -157px bottom -60px;
  background-size: clamp(400px, 51vw, 900px) auto;
  pointer-events: none;
}
.bg-col-1 .columns-two-col-wrap > .row {
  --bs-gutter-x: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 0;
}
.bg-col-1 .columns-two-col-wrap > .row > * {
  padding: 0;
}
.bg-col-1 h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}
.bg-col-1 {
  /* Claim mit Akzent-Balken - egal ob als h3 oder h4 ausgezeichnet */
}
.bg-col-1 h3 {
  margin: 34px 0 0;
  padding-left: 22px;
  border-left: 5px solid #206CB1;
  font-size: clamp(18px, 5.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  /* Fett im Claim = Akzent-Hervorhebung (im RTE einfach "fett" setzen) */
}
.bg-col-1 h3 :is(strong, b) {
  color: var(--op-accent);
  font-weight: 600;
}
.bg-col-1 p {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.7;
}

/* Abstand zwischen Claim und Fliesstext */
:is(.bg-col-1 h3, .bg-col-1 h4) + p,
.bg-col-1 p.lead {
  margin-top: 26px;
}

/* Zitat-Spalte rechts */
/* Nicht im Accordion: dort steckt der Fliesstext ebenfalls in einer
   .ce-bodytext, soll aber normaler Text bleiben und nicht zur Zitatzeile
   werden. */
.bg-col-1 .ce-bodytext p:not(:has(i)):not(.accordion-body p) {
  margin-bottom: 6px;
  color: var(--op-accent);
  font-size: 18px;
  font-weight: 700;
}
.bg-col-1 .ce-bodytext p:has(i) {
  font-size: 14px;
}
.bg-col-1 .ce-bodytext {
  /* Trennlinie vor jedem weiteren Zitat-Block */
}
.bg-col-1 .ce-bodytext p + p:not(:has(i)) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--op-rule);
}

@media (min-width: 992px) {
  .bg-col-1 .columns-two-col-wrap > .row {
    grid-template-columns: 1.25fr 1fr;
    gap: 48px;
  }
}
@media (max-width: 767.98px) {
  .bg-col-1::after {
    display: none;
  }
}
/* --------------------------------------------------------------------------
   HINTERGRUNDFARBE 2 + 3 - Karten-Bloecke
   Ueberschrift der Sektion als Kicker + Headline, darunter ein Karten-Grid.
   Die Karten koennen direkt in der Sektion liegen oder in einem
   2-/3-/4-Spalten-Container - das Ergebnis ist dasselbe.
   -------------------------------------------------------------------------- */
/* --- Sektions-Ueberschrift --- */
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row > .frame-type-header {
  padding-left: 22px;
  border-left: 5px solid #0E1D42;
  /* margin-bottom: 12px; */
  margin-bottom: 30px;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row > .frame-type-header h2 {
  margin: 0 0 10px;
  color: var(--op-accent);
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row > .frame-type-header h3 {
  margin: 0;
  font-size: clamp(18px, 5.5vw, 36px);
  font-weight: 700;
}

/* --- Spaltenaufteilung ---
   Die Farbflaeche mischt sich NICHT in Anzahl oder Breite der Spalten ein.
   Zustaendig bleibt allein der Spalten-Container: seine Bootstrap-Klassen aus
   den FlexForm-Reitern (XS/SM/MD/LG/XL) bestimmen die Aufteilung, z.B.
   col-3 / col-3 / col-6 oder viermal col-3. Hier wird nur der Abstand
   zwischen den Spalten gesetzt. */
:is(.bg-col-0, .bg-col-2, .bg-col-3) [class*=columns-ctype-container] > .row {
  --bs-gutter-x: var(--op-gap);
  --bs-gutter-y: var(--op-gap);
}

/* Fallback: Spalte ohne gesetzte Breiten-Klasse teilt sich ab Tablet den Platz
   gleichmaessig auf; darunter bleibt es beim Bootstrap-Standard (gestapelt).
   Jede gesetzte col-Klasse hat Vorrang. */
@media (min-width: 768px) {
  :is(.bg-col-0, .bg-col-2, .bg-col-3) [class*=columns-ctype-container] > .row > div:not([class*=col]) {
    flex: 1 0 0%;
    width: auto;
  }
}
/* Spalte als Flex-Spalte - so fuellt eine Karte die volle Spaltenhoehe und
   nebeneinanderliegende Karten werden gleich hoch. Beeinflusst die Breite
   der Spalte nicht, die kommt weiterhin aus ihrer col-Klasse. */
:is(.bg-col-0, .bg-col-2, .bg-col-3) [class*=columns-ctype-container] > .row > div {
  display: flex;
  flex-direction: column;
}

/* Query-Container fuer Bildkarten: massgeblich ist die tatsaechliche Breite
   der Spalte (bzw. der Sektion, wenn kein Container benutzt wird). Danach
   richtet sich weiter unten das Innenlayout der Bildkarte.
   Bewusst nur auf Spalten MIT Bild: "container-type" bringt Style-Containment
   mit, das CSS-Zaehler pro Spalte kapseln wuerde - die nummerierten Schritte
   wuerden dann alle bei 1 stehen. */
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row,
:is(.bg-col-0, .bg-col-2, .bg-col-3) [class*=columns-ctype-container] > .row > div:has(.ce-gallery) {
  container-type: inline-size;
}

/* --- Karte: jedes Inhaltselement ausser Ueberschrift und Container --- */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]) {
  display: flex;
  flex-direction: column;
  /* fuellt die Spalte, damit nebeneinanderliegende Karten gleich hoch sind */
  flex: 1 1 auto;
  padding: 22px 22px 60px 22px;
  border-radius: var(--op-card-radius);
  background-color: #ffffff;
  color: var(--op-dark);
  overflow: hidden;
  /* Mehrere Karten in derselben Spalte brauchen untereinander Abstand */
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]) + .frame {
  margin-top: var(--op-gap);
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 10px;
  color: var(--op-blue);
  font-size: clamp(19px, 5.2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]) p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
}

/* Ohne Farbflaeche steht die weisse Karte auf weissem Grund und waere ohne
   Kante nicht zu erkennen. Die randlosen Varianten (Nummerierter Schritt,
   Bildstrecke) sind ausgenommen, die haben gar keinen Kasten. */
.bg-col-0 .frame:not(.frame-type-header, .frame-indent, .frame-layout-20, [class*=frame-type-container]) {
  border: 1px solid rgba(14, 29, 66, 0.12);
}

/* Varianten der Karte ueber das vorhandene Feld "Layout"
   (Reiter Erscheinungsbild):
     0 = weiss
     1 = blau
     2 = dunkelblau
     3 = weiss + Auto-Grafik (SVG) im Hintergrund der Karte */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:is(.frame-layout-1, .frame-layout-10):not([class*=frame-type-container]) {
  background-color: var(--op-blue);
  color: #ffffff;
}

/* Auf der blauen Flaeche waere "Karte: Blau" dieselbe Farbe wie der Grund.
   Dort ein helleres Blau - der hellste Ton, der mit weisser Schrift noch
   4.5:1 erreicht (WCAG 1.4.3). Gilt auch fuer den runden Stoerer. */
.bg-col-2 .frame:is(.frame-layout-1, .frame-layout-10):not([class*=frame-type-container]) {
  background-color: #3579BC;
  margin-bottom: 15px;
}

:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-2:not([class*=frame-type-container]) {
  background-color: var(--op-dark);
  color: #ffffff;
}

:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:is(.frame-layout-1, .frame-layout-2):not([class*=frame-type-container]) :is(h1, h2, h3, h4, h5, h6),
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:is(.frame-layout-1, .frame-layout-2):not([class*=frame-type-container]) p {
  color: #ffffff;
}

/* Layout 3: weisse Karte mit Auto-Grafik.
   Die Karte bleibt sonst unveraendert - bei jedem anderen Layout entfaellt
   die Grafik ersatzlos. Die SVG wird als Maske genutzt und in der Flaechen-
   farbe (--op-surface) eingefaerbt: ihre eigene Fuellung (#F1F7FD) waere auf
   weissem Grund praktisch unsichtbar. */
.bg-col-3 .frame.frame-layout-3:not([class*=frame-type-container]) {
  position: relative;
  isolation: isolate;
}
.bg-col-3 .frame.frame-layout-3:not([class*=frame-type-container])::before {
  content: "";
  position: absolute;
  inset: 0;
  /* hinter dem Inhalt, aber vor dem weissen Kartenhintergrund */
  z-index: -1;
  background-color: var(--op-surface);
  -webkit-mask: url(../Images/BackendLayouts/Auto-Vector.svg) no-repeat right 0% top 100%;
          mask: url(../Images/BackendLayouts/Auto-Vector.svg) no-repeat right 0% top 100%;
  -webkit-mask-size: auto 69%;
          mask-size: auto 69%;
  pointer-events: none;
}

/* --- Ohne Kartenbox ---------------------------------------------------------
   Feld "Frame" (Reiter Erscheinungsbild):
     Ohne Kartenbox        -> FSC laesst den Frame-Wrapper ganz weg, damit
                              entfaellt die Kartenoptik von selbst
     Nummerierter Schritt  -> frame-indent, zusaetzlich Nummernkreis + Linie
   "Standard" bringt die Karte zurueck.
   Muss nach den Karten-Regeln stehen (gleiche Spezifitaet, Quellreihenfolge
   entscheidet). -------------------------------------------------------------- */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-indent {
  /* FSC gibt .frame-indent 15% Seitenrand - hier nicht erwuenscht */
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  overflow: visible;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-indent :is(h1, h2, h3, h4, h5, h6),
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-indent p {
  color: inherit;
}

/* --- Nummerierte Schritte ---------------------------------------------------
   Die Nummer kommt aus einem CSS-Zaehler, nicht aus dem Inhalt: Schritte
   hinzufuegen, loeschen oder umsortieren nummeriert sich von selbst neu.
   -------------------------------------------------------------------------- */
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row,
:is(.bg-col-0, .bg-col-2, .bg-col-3) [class*=columns-ctype-container] > .row {
  counter-reset: op-step;
}

/* .frame.frame-indent statt .frame-indent: gleiche Spezifitaet wie die
   "Ohne Kartenbox"-Regel oben, damit padding-top deren "padding: 0" schlaegt */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-indent {
  --op-step-size: 60px;
  position: relative;
  padding-top: calc(var(--op-step-size) + 22px);
  text-align: center;
}

:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame-indent {
  /* Nummernkreis */
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame-indent::before {
  counter-increment: op-step;
  content: counter(op-step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--op-step-size);
  height: var(--op-step-size);
  border-radius: 50%;
  background-color: var(--op-dark);
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame-indent {
  /* Verbindungslinie zum naechsten Schritt (reicht ueber den Spaltenabstand) */
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame-indent::after {
  content: "";
  position: absolute;
  top: calc(var(--op-step-size) / 2 - 1px);
  left: calc(50% + var(--op-step-size) / 2 + 10px);
  right: calc(-50% + var(--op-step-size) / 2 + 10px);
  height: 2px;
  background-color: var(--op-dark);
}

/* letzter Schritt bekommt keine Linie mehr */
:is(.bg-col-0, .bg-col-2, .bg-col-3) [class*=columns-ctype-container] > .row > div:last-child .frame-indent::after,
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row > .frame-indent:last-child::after {
  content: none;
}

:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame-indent :is(h1, h2, h3, h4, h5, h6) {
  font-size: 20px;
  text-transform: uppercase;
}

:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame-indent p {
  font-size: 14px;
}

/* gestapelt (eine Spalte) ergibt die Verbindungslinie keinen Sinn */
@media (max-width: 767.98px) {
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame-indent::after {
    content: none;
  }
}
/* Luft ueber jeder weiteren Sektions-Ueberschrift */
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row > .frame-type-header:not(:first-child) {
  margin-top: 30px;
}

/* Ein Element, das nur aus einem Button besteht, steht mittig */
/* "Ohne Kartenbox" liefert gar keinen Wrapper - der Absatz haengt direkt in
   der Row. Besteht er nur aus einem Button, steht er mittig. */
:is(.bg-col-0, .bg-col-2, .bg-col-3) > .row > p:has(> a:only-child) {
  text-align: center;
}

/* --- Hexagon-Muster auf der blauen Flaeche -------------------------------- */
.bg-col-2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../Images/BackendLayouts/Hexagon-Muster.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* Die Grafik bringt ihren eigenen, helleren Blauton (#4D89C1) mit - darauf
     erreicht weisse Schrift nur 3.7:1. Teiltransparent ueber dem Markenblau
     ergibt sie ~#3479BC und damit 4.59:1 (WCAG 1.4.3). Dieser Wert ist die
     Stellschraube: hoeher = Muster kraeftiger, aber Kontrast sinkt. */
  opacity: 0.45;
  pointer-events: none;
}

/* --- Badge aus dem Feld "Subheader" ------------------------------------------
   Traegt eine Karte einen Subheader, wird daraus der runde Badge oben rechts
   (z.B. "Halle 8.0"). Subheader leer = kein Badge, sonst aendert sich nichts.
   -------------------------------------------------------------------------- */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]) header :is(h2, h3, h4) + :is(h2, h3, h4) {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--op-dark);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-transform: none;
  rotate: 10deg;
}

/* auf farbigen Karten dreht sich der Badge um */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:is(.frame-layout-1, .frame-layout-2):not(.frame-type-header, [class*=frame-type-container]) header :is(h2, h3, h4) + :is(h2, h3, h4) {
  background-color: #ffffff;
  color: var(--op-dark);
}

/* Karte mit Badge braucht unten rechts Platz und einen Positionsbezug.
   Nur der letzte Absatz weicht aus - der Titel darf die volle Breite nutzen. */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]):has(header :is(h2, h3, h4) + :is(h2, h3, h4)) {
  position: relative;
  padding-bottom: 26px;
  margin-bottom: 15px;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]):has(header :is(h2, h3, h4) + :is(h2, h3, h4)) > p:last-of-type {
  padding-right: 62px;
}

/* Erster Absatz einer Karte = kleine Kategoriezeile ueber dem Titel */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-default:not([class*=frame-type-container]) > p:first-of-type {
  order: -1;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.75;
}

/* --- Runder Stoerer  [Layout: Runder Stoerer] ------------------------------ */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-10:not([class*=frame-type-container]) {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-width: 145px;
  margin-left: auto;
  padding: 24px;
  border-radius: 50%;
  text-align: center;
  rotate: 10deg;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-10:not([class*=frame-type-container]):hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.302);
  transform: scale(1.05);
  transition: 0.3s ease;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-10:not([class*=frame-type-container]) :is(h2, h3, h4, h5, h6),
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-10:not([class*=frame-type-container]) p {
  margin: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

/* --- Bildstrecke / Slider  [Layout: Bildstrecke] ---------------------------
   Reines CSS: horizontal wischen bzw. scrollen mit Einrasten. Klickbare
   Punkte unter den Bildern gaebe es nur mit JavaScript - bewusst weggelassen.
   -------------------------------------------------------------------------- */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-20:not([class*=frame-type-container]) {
  padding: 0;
  background-color: transparent;
  color: inherit;
  overflow: visible;
}

:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-20 .ce-gallery .ce-row {
  display: flex;
  gap: var(--op-gap);
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scroll-padding: 0;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-20 .ce-gallery .ce-column {
  flex: 0 0 clamp(240px, 32%, 420px);
  scroll-snap-align: start;
  margin: 0;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-20 .ce-gallery figure {
  margin: 0;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame.frame-layout-20 .ce-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--op-card-radius);
  -o-object-fit: cover;
     object-fit: cover;
}

.bg-col-3 p > a:only-child:hover, .bg-col-3 p > a:only-child:focus-visible {
  background-color: var(--op-blue);
  border-color: var(--op-blue);
  color: #ffffff;
}

/* Absatz mit Button nach unten schieben.
   ACHTUNG: ".bg-col-" ist unvollstaendig und trifft keine Klasse - die Regel
   ist damit wirkungslos. Unveraendert uebernommen, weil das Reparieren ein
   Verhalten aendern wuerde. Gemeint war vermutlich :is(.bg-col-2, .bg-col-3). */
.bg-col- .frame:not([class*=frame-type-container]) p:has(> a:only-child) {
  margin-top: auto;
  margin-bottom: 0;
}

/* --- Karte MIT Bild ---
   Bild unter dem Text; ab genug Kartenbreite rueckt es randlos nach rechts.
   Massgeblich ist die Breite der Karte selbst (Container-Query), nicht der
   Viewport - so passt sich die Karte an die Spalte an, in der sie steht. */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  -moz-column-gap: 24px;
       column-gap: 24px;
  /* Bild und Text zu direkten Grid-Items machen */
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-textpic {
  display: contents;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) {
  /* Text oben, Button unten */
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-bodytext {
  display: flex;
  flex-direction: column;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery {
  align-self: stretch;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery :is(.ce-row, .ce-column, figure) {
  height: 100%;
  margin: 0;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* schmale Karte: Bild unter dem Text, randlos bis zu den Kartenkanten */
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery {
  margin: 16px -24px 0;
}
:is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery:last-child {
  margin-bottom: -22px;
}

/* breite Karte: Bild rechts neben dem Text, randlos */
@container (min-width: 460px) {
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) > header,
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-bodytext {
    grid-column: 1;
  }
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery {
    grid-column: 2;
    grid-row: 1/-1;
    margin: -22px -24px -22px 0;
  }
}
/* Mobile: schmalere Innenabstaende, kleinere Rundungen */
@media (max-width: 575.98px) {
  :is(.bg-col-0, .bg-col-1, .bg-col-2, .bg-col-3) {
    --op-radius: 24px;
    padding: 28px 20px;
  }
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not(.frame-type-header, [class*=frame-type-container]) {
    padding: 69px 18px 18px 18px;
  }
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery {
    margin-left: -18px;
    margin-right: -18px;
  }
  :is(.bg-col-0, .bg-col-2, .bg-col-3) .frame:not([class*=frame-type-container]):has(.ce-gallery) .ce-gallery:last-child {
    margin-bottom: -18px;
  }
}
/* --------------------------------------------------------------------------
   AKKORDEON  [Container-Element "Accodion" aus EXT:gmm_base]
   Bootstrap 5.1 bringt eine weisse Karten-Optik mit; auf den Farbflaechen
   soll daraus eine reine Linienliste werden: kein Kasten, kein Hintergrund,
   nur duenne Trennlinien und ein Chevron rechts.

   Farben kommen aus den Custom Properties der Farbflaeche
   (siehe components/_sections.scss). Die Fallbacks greifen, wenn das
   Akkordeon ausnahmsweise ausserhalb einer Farbflaeche steht.
   -------------------------------------------------------------------------- */
.accordion {
  --op-acc-text: var(--op-on-surface, #0E1D42);
  --op-acc-line: var(--op-accent, #206CB1);
  --op-acc-icon: var(--op-accent, #206CB1);
  background-color: transparent;
}
.accordion .accordion-item {
  border: 0;
  border-top: 1px solid var(--op-acc-line);
  border-radius: 0;
  background-color: transparent;
  color: var(--op-acc-text);
  /* Bootstrap nimmt jedem Element ausser dem ersten die obere Linie -
     hier traegt jedes eine, damit die Liste durchgehend getrennt ist. */
}
.accordion .accordion-item:not(:first-of-type) {
  border-top: 1px solid var(--op-acc-line);
}
.accordion .accordion-item:last-of-type {
  border-bottom: 1px solid var(--op-acc-line);
}
.accordion {
  /* Der Tab-Titel kommt aus dem Kopffeld des Kind-Elements. Die
     Ueberschriften-Optik der Farbflaeche (gross, versal) passt hier nicht. */
}
.accordion .accordion-header {
  margin: 0;
  font-size: inherit;
  text-transform: none;
}
.accordion .accordion-button {
  padding: 1rem 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--op-acc-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
  /* aufgeklappt: gleiche Optik wie zugeklappt, nur der Pfeil dreht sich.
     Bootstrap faerbt hier sonst blau ein und setzt eine Innenlinie. */
}
.accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--op-acc-text);
  box-shadow: none;
}
.accordion .accordion-button {
  /* Bootstraps blauer Schein hat auf dunklem Grund zu wenig Kontrast. */
}
.accordion .accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}
.accordion .accordion-button:focus-visible {
  outline: 3px solid var(--op-acc-icon);
  outline-offset: -3px;
}
.accordion {
  /* Chevron: Bootstraps fertige Grafik traegt ihre Farbe im SVG und laesst
     sich nicht umfaerben. Stattdessen als Maske - so nimmt der Pfeil die
     Farbe der Flaeche an. Die Drehung beim Aufklappen kommt aus Bootstrap. */
}
.accordion .accordion-button::after,
.accordion .accordion-button:not(.collapsed)::after {
  width: 18px;
  height: 18px;
  background-image: none;
  background-color: var(--op-acc-icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1.5l7 7 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px auto;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1.5l7 7 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px auto;
}
.accordion .accordion-body {
  padding: 0.25rem 0 1.75rem;
  /* Das Kind-Element rendert seine Ueberschrift ein zweites Mal - sie steht
     schon als Tab-Titel im Button. Ausblenden vermeidet die Dopplung auch
     fuer Screenreader. */
}
.accordion .accordion-body > .frame > header {
  display: none;
}
.accordion .accordion-body .ce-gallery figure {
  margin: 0;
}
.accordion .accordion-body .ce-gallery img {
  border-radius: 12px;
}
.accordion .accordion-body > .frame > p:last-child {
  margin-bottom: 0;
}

/*NAV*/
/* Der Header faehrt auf allen Breiten mit. "sticky" statt "fixed": der Header
   behaelt seinen Platz im Fluss, es muss also keine Hoehe nachgehalten werden
   und beim Scrollen springt nichts. Voraussetzung ist, dass kein Vorfahr einen
   eigenen Scroll-Container aufmacht - deshalb arbeitet .content-wrapper mit
   overflow-x: clip statt hidden. */
:root {
  --header-height: 100px;
}

/* Auf dem Handy stehen Logo und Navigation untereinander, dafuer reicht
   weniger Hoehe - und der Header frisst nicht ein Achtel des Bildschirms.
   Der Anker-Versatz weiter unten rechnet mit derselben Variable und passt
   sich damit automatisch mit an. */
@media (max-width: 767.98px) {
  :root {
    --header-height: 104px;
  }
}
/* gmm_base setzt html, body { height: 100% }. Damit endet der umgebende Block
   des Headers am unteren Viewport-Rand - position: sticky haelt ihn dann nur
   fuer die erste Bildschirmhoehe fest, danach scrollt er weg. min-height
   erhaelt den Zweck (Footer unten halten), gibt dem Dokument aber seine echte
   Hoehe zurueck. */
html,
body {
  height: auto;
  min-height: 100%;
}

.main-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
  /* min-height statt height: auf schmalen Displays bricht die Navigation um,
     dann darf der Header mitwachsen statt die zweite Zeile abzuschneiden. */
  min-height: var(--header-height);
  background: #ffffff;
  transition: box-shadow 0.2s ease;
  /* gmm_base macht den body zum Flex-Container mit height: 100%. Ohne das
     hier gibt der Header als Flex-Item nach und schrumpft auf 42px, das Logo
     wird dabei auf wenige Pixel gequetscht. */
  flex-shrink: 0;
  /* "is-sticky" setzt main.js, sobald die Seite gescrollt ist. Am Seitenanfang
     sitzt der Header buendig auf dem Inhalt, danach trennt ihn der Schatten
     sichtbar vom durchlaufenden Inhalt. */
}
.main-header.is-sticky {
  box-shadow: 0 2px 12px rgba(14, 29, 66, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .main-header {
    transition: none;
  }
}
.header-inner {
  height: 100%;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Nebeneinander quetscht die Navigation das Logo auf wenige Pixel - unter md
     stehen sie deshalb untereinander. */
}
@media (max-width: 767.98px) {
  .header-inner {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
  }
}

/* Sprungmarken: der mitfahrende Header liegt ueber dem Inhalt und wuerde die
   Ueberschrift der angesprungenen Section verdecken. scroll-margin-top haelt
   beim Springen genau die Header-Hoehe frei, plus etwas Luft. Greift sowohl
   bei Klick im Menue als auch beim Aufruf mit Hash in der URL. */
section[id],
.section-anchor-alias {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* Logo */
/* Zwei Logos nebeneinander, jedes ein eigener Link auf sein eigenes Ziel. Der
   Abstand steht als gap am Container und nicht als Rand am Bild: mit nur einem
   gepflegten Logo entsteht so kein Ueberhang. */
.logo {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
  /* Im Flex-Header sonst das erste, was nachgibt. */
  flex-shrink: 0;
  /* Die volle Hoehe ist fuer das Zeilen-Layout gedacht. Untereinander
     gestapelt beansprucht das Logo damit den ganzen Header und schiebt die
     Navigation unter die Unterkante. */
}
@media (max-width: 767.98px) {
  .logo {
    height: auto;
    gap: 14px;
  }
}
.logo img {
  display: block;
  width: auto;
  max-height: 70px;
  padding: 12px 0;
  /* Passend zur kleineren Header-Hoehe auf dem Handy. Logo, Abstand und
     Navigation muessen zusammen unter --header-height bleiben, sonst laeuft
     die Navigation unten aus dem weissen Bereich heraus. */
}
@media (max-width: 767.98px) {
  .logo img {
    max-height: 30px;
    padding: 2px 0;
  }
}

.logo__link {
  display: flex;
  align-items: center;
  height: 100%;
  /* Ein Link, der nur ein Bild enthaelt: ohne sichtbaren Fokus waere er per
     Tastatur nicht auffindbar (WCAG 2.4.7). Der Versatz haelt den Ring vom
     Bildrand weg, sonst geht er im Logo unter. */
}
.logo__link:focus-visible {
  outline: 3px solid #206CB1;
  outline-offset: 2px;
}

/* Navigation */
.main-nav {
  height: 100%;
}
.main-nav ul {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
}
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: #0E1D42;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  /* Die Beschriftung kommt aus dem Feld "CSS-ID" der Section und ist
     dort klein geschrieben - die Versalien macht das Layout. */
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.main-nav a:hover, .main-nav a.active {
  color: #206CB1;
}
.main-nav a {
  /* Blaue Linie unter aktivem Menüpunkt */
}
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #206CB1;
}
.main-nav {
  /*
   * Mobil-Anpassungen bewusst ans Ende der Regel: die 100%-Hoehen weiter oben
   * stehen sonst spaeter im kompilierten CSS und gewinnen bei gleicher
   * Spezifitaet.
   *
   * Im Zeilen-Layout tragen sie den Unterstrich des aktiven Punktes an die
   * Header-Unterkante. Untereinander gestapelt wuerden sie den Header
   * sprengen - dort richtet sich die Navigation nach ihrem Inhalt.
   */
}
@media (max-width: 767.98px) {
  .main-nav {
    height: auto;
  }
  .main-nav ul,
  .main-nav a {
    height: auto;
  }
  .main-nav {
    /* Vier Menuepunkte passen unter 400px nicht in eine Zeile - dort wurde die
       Navigation links und rechts abgeschnitten. Umbruch plus mitwachsende
       Abstaende statt fester 38px. */
  }
  .main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px clamp(12px, 4vw, 38px);
  }
  .main-nav a {
    font-size: clamp(12px, 3.4vw, 14px);
  }
  .main-nav a.active::after {
    bottom: -3px;
  }
}

.content-wrapper {
  padding: 0 50px;
  /* Die Hexagon-Flaeche der Buehne reicht bis an den Viewport-Rand.
     "clip" statt "hidden": kappt den Ueberstand, ohne einen eigenen
     Scroll-Container zu erzeugen (sonst braeche position: sticky). */
  overflow-x: clip;
}

/* 50px Innenabstand kosten auf dem Handy ein Viertel der Breite und
   lassen schon die Buttons umbrechen. */
@media (max-width: 767.98px) {
  .content-wrapper {
    padding: 0 16px;
  }
}
/* Kopfbereich aus dem statischen Entwurf. Wird von der aktuellen Ausgabe
   nicht mehr getroffen - der Header kommt aus _header-stage.scss. */
.header-text {
  text-align: center;
  padding: 150px 0;
  background-image: url("/media/automechanika_2026/bg-image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*Info-Block*/
.bg-image {
  background-image: url("/media/automechanika_2026/bg-image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 40px;
}
.bg-image .ce-textpic {
  padding-top: 15px;
  margin-right: 15px;
}

@media (min-width: 768px) {
  .row:has(> .bg-image) {
    display: flex;
    gap: 15px;
  }
  .row:has(> .bg-image) > .bg-image {
    width: calc(33.333333% - 10px);
    flex: 0 0 calc(33.333333% - 10px);
  }
}
/*Partner*/
.partner-container {
  padding-top: 90px;
}
.partner-container .ce-gallery {
  margin: 0 !important;
}
.partner-container .frame-type-image {
  padding: 0 !important;
}
.partner-container .columns-ctype-container_4_col .col {
  margin-bottom: 20px;
}
.partner-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../Images/BackendLayouts/Auto_vonhinten.png);
  background-repeat: no-repeat;
  background-position: right -32px top 0px;
  background-size: clamp(185px, 40vw, 900px) auto;
  pointer-events: none;
}
.no-car::after {
  display: none;
}

.berufsbildung-container .frame-type-header {
  padding-left: 22px;
  border-left: 5px solid var(--op-accent);
}
.berufsbildung-container .frame-type-header h3 {
  padding: inherit;
  border: none;
  margin: 0;
  font-size: clamp(18px, 5.5vw, 36px);
  font-weight: 700;
}
.berufsbildung-container .frame-type-header h2 {
  color: #DCEBF9 !important;
  margin: 0 0 10px;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.timeline-container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #206CB1;
}
.timeline-container:after {
  display: none;
}

.impressionen-container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.impressionen-container .frame-layout-10 {
  margin-bottom: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3568627451);
}
.impressionen-container .frame-layout-10 p {
  opacity: 1 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25;
}
.impressionen-container .frame-layout-10 .marked-text {
  color: #0E1D42;
}
.impressionen-container .columns-ctype-container_2_col h2 {
  border-left: 5px solid #0E1D42;
  padding-left: 22px;
}

/* ==========================================================================
   HEADER-BUEHNE
   --------------------------------------------------------------------------
   Zwei "Section"-Elemente, im Backend nur ueber das Feld "CSS-Klasse"
   unterschieden - es muss nichts weiter konfiguriert werden:

     header-title-container    Section "schmal", Titelblock + Buttons
     header-picture-container  Section "normal", Messestand-Bild mit
                               Stoerer und Kennzahlen-Karten darueber

   Der Inhalt kommt unveraendert aus fluid_styled_content. Ausgezeichnet
   wird nur im Editor:
     - Zeile mit RTE-Stil "Marked Text" = die grosse blaue Zeile
     - "Layout: Runder Stoerer" am Text-Element = der blaue Kreis
     - die drei Kennzahlen sind Text/Bild-Elemente und muessen die drei
       letzten Elemente der Section sein (siehe :nth-last-of-type unten)
   ========================================================================== */
.header-title-container {
  /* --- Hexagon-Grund -------------------------------------------------------
     Liegt an der Titel-Section, reicht aber nach unten hinter das
     Messestand-Bild. Rein dekorativ, daher Pseudo-Element statt Markup.
     ------------------------------------------------------------------------ */
  position: relative;
  z-index: 0;
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(16px, 2vw, 28px);
}
.header-title-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: clamp(-320px, -18vw, -140px);
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background-image: url("../Images/BackendLayouts/Technisches Muster_ohneHintergrund.svg");
  background-repeat: repeat;
  background-position: top center;
  pointer-events: none;
}
.header-title-container {
  /* Inhalt liegt ueber der Deko-Flaeche */
}
.header-title-container > * {
  position: relative;
}
.header-title-container {
  /* --- Titelblock ----------------------------------------------------------
     Text-Element mit Ueberschrift: Kicker (h1), grosse Zeile, zweite Zeile.
     ------------------------------------------------------------------------ */
  /* EXT:bivkfz_theme gibt .container-narrow ab 1200px 20rem Innenabstand und
     zieht Ueberschriften mit negativen Raendern wieder heraus. Auf der Buehne
     bricht das die grosse Zeile um - die Breite steuert hier der Textblock. */
}
.header-title-container .container-narrow {
  padding: 0;
}
.header-title-container .container-narrow :is(h1, h2) {
  margin-left: 0;
  margin-right: 0;
}
.header-title-container h1 {
  display: block;
  margin: 0 0 clamp(8px, 1vw, 16px);
  color: #0E1D42;
  font-size: clamp(1.125rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  /* Der goldene Balken der Ueberschriften aus EXT:bivkfz_theme gilt hier
     nicht. */
}
.header-title-container h1::after {
  content: none;
}
.header-title-container .frame-type-text:has(> header) header {
  text-align: center;
}
.header-title-container .frame-type-text:has(> header) {
  /* Beide grossen Zeilen teilen sich denselben blauen Balken: gleiche
     Breite und gleiche Randlinie ergeben eine durchgehende Linie. Die
     Breite muss deshalb ein fester Wert sein - bei "fit-content" saessen
     die Balken je nach Textlaenge an unterschiedlichen Stellen. */
}
.header-title-container .frame-type-text:has(> header) p:nth-of-type(-n+2) {
  width: min(100%, 920px);
  margin: 0 auto;
  padding-left: clamp(14px, 2vw, 34px);
  border-left: 10px solid #206CB1;
  /* ueberschreibt die Ausrichtungsklasse aus dem Editor */
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.02;
}
.header-title-container .frame-type-text:has(> header) {
  /* Die ausgezeichnete Zeile ist die groesste - Farbe kommt aus
     .marked-text */
}
.header-title-container .frame-type-text:has(> header) p:has(.marked-text) {
  font-size: clamp(1.875rem, 9vw, 8rem);
}
.header-title-container .frame-type-text:has(> header) p:nth-of-type(2) {
  color: #0E1D42;
  font-size: clamp(1.125rem, 5.4vw, 4.8125rem);
}
.header-title-container .frame-type-text:has(> header) {
  /* Leerabsaetze aus dem Editor erzeugen sonst eine Luecke im blauen
     Balken */
}
.header-title-container .frame-type-text:has(> header) p:nth-of-type(n+3) {
  display: none;
}
.header-title-container {
  /* --- Buttons -------------------------------------------------------------
     Zweites Text-Element der Section, ohne Ueberschrift.
     ------------------------------------------------------------------------ */
}
.header-title-container .frame-type-text:not(:has(> header)) {
  margin-top: clamp(18px, 2.5vw, 34px);
  text-align: center;
}
.header-title-container .frame-type-text:not(:has(> header)) p {
  margin: 0;
}
.header-title-container a.btn-lb,
.header-title-container a.btn-db {
  margin: 6px 8px 0;
}

/* --- Bildbuehne --------------------------------------------------------------
   Alle Elemente der Section liegen in derselben Grid-Reihe und damit
   uebereinander: das Bild als Flaeche, Stoerer und Karten darauf.
   -------------------------------------------------------------------------- */
.header-picture-container {
  position: relative;
  z-index: 1;
  /* Gleiche Aussenkante wie die Farbflaechen weiter unten (max-width: 1440px).
     Bootstrap deckelt .container ab 1400px auf 1320px - das waere schmaler.
     Ohne Innenabstand, damit das Bild die Flaeche komplett fuellt. */
  max-width: 1440px;
  padding: 0;
}
.header-picture-container > .row {
  --bs-gutter-x: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -moz-column-gap: clamp(8px, 1vw, 16px);
       column-gap: clamp(8px, 1vw, 16px);
  margin: 0;
}
.header-picture-container {
  /* fluid_styled_content zentriert Galerien ueber float/right-Verschiebungen -
     auf der Buehne soll das Bild einfach die volle Breite fuellen. */
}
.header-picture-container :is(.ce-outer, .ce-inner) {
  float: none;
  right: auto;
}
.header-picture-container .frame-type-image {
  grid-column: 1/-1;
  grid-row: 1;
}
.header-picture-container .frame-type-image .image-embed-item {
  border-top: 7px solid #206CB1;
}
.header-picture-container .frame-type-image :is(.ce-gallery, .ce-row, .ce-column, figure) {
  width: 100%;
  max-width: none;
  margin: 0;
}
.header-picture-container .frame-type-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(16px, 2.5vw, 40px);
}
.header-picture-container .frame-type-textpic img {
  display: grid;
  justify-items: center;
}
.header-picture-container {
  /* --- Runder Stoerer  [Layout: Runder Stoerer] ---------------------------
     Ueberlappt die obere linke Ecke des Bildes.
     ------------------------------------------------------------------------ */
}
.header-picture-container .frame-layout-10 {
  grid-column: 1/span 4;
  grid-row: 1;
  z-index: 2;
  align-self: start;
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Der Kreis behaelt seine Form nur, solange der Text hineinpasst - sonst
     drueckt der Inhalt die Hoehe ueber die per aspect-ratio gesetzte Breite
     und der Stoerer wird zur Ellipse. Deshalb waechst er auf schmalen
     Displays mit, statt bei 132px stehen zu bleiben. */
  width: clamp(158px, 20vw, 200px);
  /* Als Rasterelement bezieht sich max-width: 100% auf die vier Spalten
     breite Rasterflaeche - das hat den Kreis auf 96px eingeschnuert. */
  max-width: none;
  aspect-ratio: 1;
  margin-top: clamp(-80px, -5vw, -40px);
  margin-left: clamp(0px, 2vw, 40px);
  padding: clamp(12px, 1.5vw, 22px);
  border-radius: 50%;
  background-color: #206CB1;
  color: #ffffff;
  rotate: -15deg;
  text-align: center;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.302);
  transition: 0.3s ease;
}
.header-picture-container .frame-layout-10:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.302);
  transform: scale(1.05);
  transition: 0.3s ease;
}
.header-picture-container .frame-layout-10 p {
  margin: 0;
  font-size: clamp(0.6875rem, 1vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.3;
  color: #0E1D42;
}
.header-picture-container .frame-layout-10 p a {
  color: #0E1D42;
  text-decoration: none;
}
.header-picture-container .frame-layout-10 {
  /* Im blauen Kreis muss die Auszeichnung die Farbe wechseln - #206CB1 auf
     #206CB1 waere unsichtbar. Weiss darauf ergibt 5.08:1. */
}
.header-picture-container .frame-layout-10 .marked-text {
  color: #ffffff;
  font-size: clamp(0.9375rem, 1.5vw, 1.375rem);
  font-weight: 800;
  text-decoration: none;
}
.header-picture-container .frame-layout-10 {
  /* Pfeil als Maske statt als Textzeichen: rein dekorativ und damit fuer
     Screenreader unsichtbar. */
}
.header-picture-container .frame-layout-10::after {
  content: "";
  width: clamp(24px, 2.4vw, 34px);
  height: 12px;
  margin: clamp(6px, 0.8vw, 12px) auto 0;
  background-color: #0E1D42;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 6h30M26 1l6 5-6 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 6h30M26 1l6 5-6 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.header-picture-container {
  /* --- Kennzahlen-Karten ---------------------------------------------------
     Die drei letzten Elemente der Section (Text/Bild), unten rechts auf dem
     Bild. Kommen weitere Elemente dazu, muessen sie vor den Karten stehen.
     ------------------------------------------------------------------------ */
}
.header-picture-container .frame-type-textpic {
  grid-row: 1;
  z-index: 2;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: clamp(110px, 13vw, 190px);
  margin-bottom: clamp(10px, 2.5vw, 40px);
  padding: clamp(8px, 1.2vw, 18px);
  border-radius: clamp(10px, 1.4vw, 20px);
  background-color: #ffffff;
  box-shadow: 0 8px 26px rgba(14, 29, 66, 0.16);
  text-align: center;
}
.header-picture-container .frame-type-textpic:nth-last-of-type(3) {
  grid-column: 7/span 2;
}
.header-picture-container .frame-type-textpic:nth-last-of-type(2) {
  grid-column: 9/span 2;
}
.header-picture-container .frame-type-textpic:nth-last-of-type(1) {
  grid-column: 11/span 2;
}
.header-picture-container .frame-type-textpic .ce-gallery {
  margin: 0 0 clamp(4px, 0.6vw, 10px);
}
.header-picture-container .frame-type-textpic figure {
  margin: 0;
}
.header-picture-container .frame-type-textpic img {
  display: block;
  width: clamp(26px, 3vw, 44px);
  height: clamp(26px, 3vw, 44px);
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.header-picture-container .frame-type-textpic .ce-bodytext p {
  margin: 0;
  color: #0E1D42;
  font-size: clamp(0.625rem, 0.95vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
}
.header-picture-container .frame-type-textpic .marked-text {
  display: block;
  font-size: clamp(1.125rem, 2.4vw, 2.375rem);
  font-weight: 800;
  line-height: 1;
}

/* --- Buehne auf schmalen Viewports -------------------------------------------
   Auf dem Bild waeren die Karten unlesbar klein - sie ruecken darunter.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .header-picture-container > .row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .header-picture-container .frame-type-image {
    flex: 0 0 100%;
  }
  .header-picture-container {
    /* Der Stoerer verdeckt sonst das halbe Bild - kleiner und nur noch
       ueber der Ecke. */
  }
  .header-picture-container .frame-layout-10 {
    position: absolute;
    top: 0;
    left: 0;
    /* Unter dieser Breite passt der Text nicht mehr in den Kreis: der Inhalt
       drueckt die Hoehe ueber die per aspect-ratio gesetzte Breite und aus
       dem Stoerer wird eine Ellipse. */
    width: clamp(132px, 34vw, 150px);
    margin: -30px 0 0;
    padding: 10px;
  }
  .header-picture-container .frame-type-textpic {
    flex: 1 1 0;
    max-width: none;
    margin-bottom: 0;
  }
}