/*
 * Fahrwerk Holzkirchen – eigenes CSS, nur für das mobile Off-Canvas-Menü.
 *
 * Alles andere auf der Seite nutzt weiterhin das Original-CSS. Nur hier war ein
 * Nachbau nötig: Das Original benutzt mmenu.js, das den Menü-Knoten klont und
 * seine Klassen zur Laufzeit umschreibt – ohne die Bibliothek greifen die
 * mitgelieferten Regeln nicht. Werte sind am Original abgenommen
 * (Panel 80 % breit, Hintergrund #2f2f2f, Einträge 32 px weiß).
 *
 * Die Selektoren führen bewusst .brz mit: Brizy setzt
 * `.brz ... .brz-menu__mmenu:not(.brz-mm-menu_opened){display:none}` – ohne
 * gleiche Spezifität bliebe das Menü unsichtbar.
 */

.brz nav.brz-menu__mmenu.fw-menue {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  min-width: 240px;
  max-width: 440px;
  background: #2f2f2f;
  z-index: 1080;
  /* Brizy blendet .brz-menu__mmenu per Media-Query aus - hier muss der Nachbau
     sich durchsetzen, daher !important. */
  display: block !important;
  overflow-y: auto;
  transform: translate3d(-100%, 0, 0);
  transition: transform .4s ease;
  visibility: hidden;
}

.brz nav.brz-menu__mmenu.fw-menue.fw-menue--offen {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.brz nav.brz-menu__mmenu.fw-menue .fw-menue__titel {
  display: block;
  padding: 12px 20px;
  color: rgba(255, 255, 255, .5);
  font-size: var(--fw-t-klein);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.brz nav.brz-menu__mmenu.fw-menue .brz-menu__ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brz nav.brz-menu__mmenu.fw-menue .brz-menu__item {
  display: block;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.brz nav.brz-menu__mmenu.fw-menue .brz-menu__item > a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  font-size: 32px;
  line-height: 1.4;
  text-decoration: none;
}

/* Seite hinter dem offenen Menü abdunkeln */
.fw-menue__schleier {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
  z-index: 1079;
}

body.fw-menue-offen .fw-menue__schleier {
  opacity: 1;
  visibility: visible;
}

/* ---------------------------------- Karte erst auf Klick (Datenschutz) ---- */
.fw-einwilligung {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: #3f3f3f;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.fw-einwilligung__text {
  max-width: 30em;
  padding: 24px;
}

.fw-einwilligung__text strong {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}

.fw-einwilligung__text p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}

.fw-einwilligung__knopf {
  padding: 10px 22px;
  border: 0;
  border-radius: var(--fw-rund-feld);
  background: #65b32e;
  color: #fff;
  font-size: var(--fw-t-text);
  cursor: pointer;
}

.fw-einwilligung__knopf:hover { background: #74c93a; }

/* ==========================================================================
   Feinschliff: Bewegung, Hover, Fokus
   Alles hier ist additiv - Layout, Schriften und Farben der Seite bleiben,
   ergaenzt werden nur Uebergaenge und Zustaende. Markengruen: #60c419.
   ========================================================================== */

:root {
  --fw-gruen: #60c419;
  --fw-gruen-hell: #6fd821;
  --fw-gruen-tief: #4c9c14;   /* gruener Text auf Weiss, lesbar */

  /* Formen: gemessen waren sieben Rundungen (2/3/6/8/9/10/14 px) und elf
     Schattenrezepte im Einsatz. Zwei Rundungen und drei Tiefen genuegen -
     davon lebt der ruhige Gesamteindruck. */
  --fw-rund-karte: 16px;      /* Karten, Popups, Bilder, Kacheln */
  --fw-rund-feld: 10px;       /* Eingaben, Knoepfe, Akkordeon-Zeilen */

  --fw-schatten-1: 0 2px 8px rgba(18, 30, 12, .07);
  --fw-schatten-2: 0 14px 34px rgba(18, 30, 12, .14);
  --fw-schatten-3: 0 30px 70px rgba(0, 0, 0, .34);
  --fw-schatten-gruen: 0 8px 22px rgba(96, 196, 25, .3);

  --fw-feldhoehe: 54px;
  --fw-uebergang: .25s cubic-bezier(.22, .61, .36, 1);
}

/* --- Hover-Zoom auf Kacheln und Bildern -----------------------------------
   Das Original liess diese 17 Flaechen per Brizy-JS auf scale(1.1) wachsen
   (700 ms, ease). Ohne Brizy war der Effekt weg - hier in CSS, ohne JS. */
.brz-hover-animation__container > * {
  /* Brizy setzt auf denselben Elementen bereits einen Uebergang fuer
     filter/color/background/border/box-shadow und ist dabei spezifischer.
     Deshalb die ganze Liste noch einmal - sonst faellt der Zoom weg oder
     die vorhandenen Uebergaenge gehen verloren. */
  transition: transform .7s ease, filter .5s ease, color .5s ease,
              background-color .5s ease, border-color .5s ease,
              box-shadow .5s ease !important;
}

.brz-hover-animation__container:hover > * { transform: scale(1.1); }

/* --- Einblenden beim Scrollen ---------------------------------------------
   Bisher nur Deckkraft. Ein kurzer Weg von unten macht die Bewegung ruhiger
   und zeigt deutlicher, dass ein Abschnitt neu ins Bild kommt. */
.brz-animated.fw-einblenden {
  transform: translate3d(0, 14px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.brz-animated.fw-einblenden.brz-animate-opacity { transform: none; }

/* --- Schaltflaechen --------------------------------------------------------
   Sanfter Farbwechsel und ein Hauch Anhebung; vorher sprang die Farbe hart. */
.brz-btn,
.submit-button,
.fw-einwilligung__knopf {
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.brz-btn:hover,
.submit-button:hover,
.fw-einwilligung__knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.brz-btn:active,
.submit-button:active { transform: translateY(0); }

/* --- FAQ-Zeilen ------------------------------------------------------------
   Die Zeilen wirkten wie starre Kaesten; ein leichter Rand zeigt jetzt, was
   unter dem Zeiger liegt. Das Aufklappen selbst bleibt unveraendert. */
.brz-accordion__item {
  transition: box-shadow .25s ease, border-color .25s ease;
}

.brz-accordion__item:hover { box-shadow: var(--fw-schatten-1); }

.brz-accordion__nav {
  transition: color .2s ease;
  cursor: pointer;
}

.brz-accordion-icon { transition: transform .3s ease; }

/* --- Slider-Punkte ---------------------------------------------------------
   Der aktive Punkt war kaum vom Rest zu unterscheiden. */

/* Die Punkteleiste ist so breit wie der Hero und liegt ueber ihm - am Tablet
   (768/820 px) genau auf Hoehe des Knopfes "Jetzt anmelden", der damit nicht
   mehr anklickbar war. Klicks nimmt jetzt nur noch der Punkt selbst an. */
.brz-slick-slider__dots { pointer-events: none; }
.brz-slick-slider__dots li,
.brz-slick-slider__dots li button { pointer-events: auto; }

.brz-slick-slider__dots li {
  transition: transform .25s ease, opacity .25s ease;
  opacity: .55;
  cursor: pointer;
}

.brz-slick-slider__dots li:hover { opacity: .85; }

.brz-slick-slider__dots li.slick-active {
  opacity: 1;
  transform: scale(1.25);
}

/* --- Formularfelder --------------------------------------------------------
   Beim Hineinklicken war bisher nichts zu sehen. */
.fc-form input[type="text"],
.fc-form input[type="email"],
.fc-form textarea,
.fc-form select {
  transition: box-shadow .2s ease;
}

.fc-form input[type="text"]:focus,
.fc-form input[type="email"]:focus,
.fc-form textarea:focus,
.fc-form select:focus {
  /* Nur der Schein, kein Rahmen: das Original blendet die Feldrahmen bewusst
     aus (field-border-hidden, mit !important und langer Selektorkette).
     Der gruene Schein zeigt trotzdem klar, wo man gerade tippt. */
  box-shadow: 0 0 0 3px rgba(96, 196, 25, .35) !important;
  outline: none;
}

/* --- Tastaturbedienung -----------------------------------------------------
   Wer mit der Tabulatortaste navigiert, sah bisher nicht, wo er steht. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fw-gruen);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Karte: Platzhalter in den Seitenfarben ------------------------------- */
.fw-einwilligung {
  background: linear-gradient(160deg, #454545, #303030);
}

.fw-einwilligung__knopf {
  background: var(--fw-gruen);
  font-weight: 600;
  letter-spacing: .02em;
}

.fw-einwilligung__knopf:hover { background: var(--fw-gruen-hell); }

/* --- Video: Abspielflaeche als solche erkennbar --------------------------- */
.brz-video:not(.fw-video-geladen) { cursor: pointer; }

.brz-video:not(.fw-video-geladen) .video-wrapper {
  transition: filter .3s ease;
}

.brz-video:not(.fw-video-geladen):hover .video-wrapper { filter: brightness(1.08); }

/* --- Wer Bewegung reduziert haben moechte, bekommt keine ------------------- */
@media (prefers-reduced-motion: reduce) {
  .brz-hover-animation__container > *,
  .brz-animated.fw-einblenden,
  .brz-btn,
  .submit-button,
  .brz-accordion__item,
  .brz-slick-slider__dots li,
  .fw-einwilligung__knopf {
    transition: none !important;
  }
  .brz-hover-animation__container:hover > * { transform: none; }
  .brz-animated.fw-einblenden { transform: none; }
}

/* ==========================================================================
   Popups: Auftritt und Karte
   Vorher erschienen sie hart und ohne Uebergang, der Inhalt lag direkt auf der
   Flaeche. Jetzt: abgedunkelter Hintergrund, die Karte faehrt kurz heran, und
   das Schliesskreuz ist als Knopf erkennbar.
   ========================================================================== */

.brz-popup2__preview.brz-popup2--fixed {
  /* zusaetzlich zur vorhandenen Deckkraft-Blende */
  transition: opacity .32s cubic-bezier(.25, .46, .45, .94),
              visibility .32s, transform .32s cubic-bezier(.25, .46, .45, .94) !important;
}

/* Hintergrund hinter dem Popup abdunkeln und leicht weichzeichnen */
.brz-popup2--opened > .brz-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 18, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

/* Der Inhaltsblock faehrt beim Oeffnen heran */
.brz-popup2 .brz-popup2__inner > .brz-container__wrap {
  transform: translate3d(0, 18px, 0) scale(.985);
  opacity: 0;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .32s ease;
}

.brz-popup2--opened .brz-popup2__inner > .brz-container__wrap {
  transform: none;
  opacity: 1;
}

/* Schliesskreuz als runder Knopf statt loses Symbol */
.brz-popup2__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.brz-popup2__close:hover {
  background: #fff;
  transform: rotate(90deg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

.brz-popup2__close .brz-icon-svg { font-size: 20px !important; }

/* Inhaltskarten im Popup: weiche Kanten und Tiefe statt harter Rechtecke */
.brz-popup2 .brz-row__container > .brz-row > .brz-columns > .brz-column__items {
  border-radius: var(--fw-rund-feld);
}

@media (prefers-reduced-motion: reduce) {
  .brz-popup2 .brz-popup2__inner > .brz-container__wrap {
    transform: none !important;
    transition: opacity .2s ease !important;
  }
  .brz-popup2__close:hover { transform: none; }
}

/* --- Lesbarkeit in den Popups --------------------------------------------
   Der Fliesstext lief ueber die volle Breite (bis 1190 px). Ab etwa 75
   Zeichen pro Zeile verliert man beim Zurueckspringen die Zeile. Nur auf
   Absaetze angewandt - Tabellen und Bildraster bleiben unberuehrt. */
.brz-popup2 .brz-rich-text p,
.brz-popup2 p.brz-tp-lg-paragraph,
.brz-popup2 .brz-text__editor > p {
  max-width: 68ch;
}

/* etwas mehr Luft ueber der Popup-Ueberschrift */
.brz-popup2 .brz-container__wrap { padding-block: clamp(16px, 4vh, 48px); }

/* ==========================================================================
   Bewegung: Ken Burns im Hero, Parallax, gestaffeltes Einblenden
   ========================================================================== */

/* --- Ken Burns -------------------------------------------------------------
   Das Original hatte dafuer eine Regel (.slick-slide img), die aber ins Leere
   lief: die Slides tragen Hintergrundbilder, kein <img>. Hier auf dem
   Hintergrund-Element, langsam und mit leichtem Schwenk - wie eine Fahrt. */
.brz-slick-slider .slick-slide .brz-bg-image {
  transform: scale(1.02);
  transition: none;
}

.brz-slick-slider .slick-slide.slick-active .brz-bg-image {
  /* Dauer passend zur Standzeit einer Slide (Autoplay 5 s + 0,5 s Uebergang).
     Bei 18 s brach der Slide-Wechsel die Bewegung ab, bevor man sie sah. */
  animation: fw-kenburns 6s ease-out forwards;
}

@keyframes fw-kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1%, -1.1%, 0); }
}

/* --- Parallax --------------------------------------------------------------
   fw.js verschiebt die Hintergrundbilder ueber --fw-parallax langsamer als den
   Rest. Damit dabei keine Kante frei wird, sind die Flaechen etwas hoeher. */
.fw-parallax > .brz-bg-image {
  height: 128% !important;
  top: -14% !important;
  transform: translate3d(0, var(--fw-parallax, 0px), 0);
  will-change: transform;
}

/* --- Gestaffeltes Einblenden ----------------------------------------------
   Kacheln einer Reihe erscheinen nacheinander statt alle zugleich. */
.fw-staffel-1 { transition-delay: .08s; }
.fw-staffel-2 { transition-delay: .16s; }
.fw-staffel-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .brz-slick-slider .slick-slide.slick-active .brz-bg-image { animation: none; }
  .fw-parallax > .brz-bg-image {
    height: 100% !important;
    top: 0 !important;
    transform: none;
  }
  .fw-staffel-1, .fw-staffel-2, .fw-staffel-3 { transition-delay: 0s; }
}

/* --- FAQ: Luft zwischen den Fragen ----------------------------------------
   Die Zeilen standen dicht an dicht und wirkten wie eine Liste ohne Rhythmus.
   Etwas Abstand und Innenraum macht die einzelne Frage anfassbar. */
.brz-accordion > .brz-accordion__item { margin-bottom: 10px; }

.brz-accordion > .brz-accordion__item:last-child { margin-bottom: 0; }

.brz-accordion__nav { padding-block: 4px; }

/* die aktive Frage bekommt eine gruene Kante - man sieht, was offen ist */
.brz-accordion__item--active {
  border-left: 3px solid var(--fw-gruen) !important;
}

/* --- Kacheln: Titel sicher lesbar -----------------------------------------
   Die Beschriftung lag direkt auf dem Foto; je nach Bildstelle ging sie unter.
   Ein Verlauf von unten haelt den Text lesbar, ohne das Bild zuzudecken. */
.brz-hover-animation__container { position: relative; }

.brz-hover-animation__container::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}

.brz-hover-animation__container:hover::after { opacity: 1; }

/* ==========================================================================
   Zweite Designstufe: Akkordeon, Popup-Innenleben, mehr Bewegung
   ========================================================================== */

/* --- Akkordeon: ein Pfeil, der sich dreht ---------------------------------
   Brizy tauscht zwei Symbole per display um - ein harter Sprung. Sichtbar
   bleibt nur der Pfeil nach unten, der sich beim Oeffnen umdreht. */
.brz-accordion__nav--previewIcon--active { display: none !important; }

.brz-accordion__nav--previewIcon {
  display: block !important;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.brz-accordion__item--active .brz-accordion__nav--previewIcon {
  transform: rotate(180deg);
}

/* die geoeffnete Frage hebt sich leicht ab */
.brz-accordion__item--active {
  background: #fbfffa !important;
  box-shadow: var(--fw-schatten-1);
}

/* Antwort blendet auf, statt einfach da zu sein */
.brz-accordion__content { opacity: 0; transition: opacity .3s ease .06s; }
.brz-accordion__item--active > .brz-accordion__content { opacity: 1; }

/* die Frage unter dem Zeiger rueckt einen Hauch ein */
.brz-accordion__nav-title {
  display: inline-block;
  transition: transform .25s ease;
}

.brz-accordion__item:hover .brz-accordion__nav-title { transform: translateX(3px); }

/* --- Popups: Inhalt erscheint gestaffelt -----------------------------------
   Ueberschrift zuerst, dann der Text - das Popup baut sich auf, statt
   komplett aufzuploppen. */
.brz-popup2--opened .brz-popup2__inner h1,
.brz-popup2--opened .brz-popup2__inner h2,
.brz-popup2--opened .brz-popup2__inner h3 { animation: fw-auf .5s cubic-bezier(.22,.61,.36,1) both; }

.brz-popup2--opened .brz-popup2__inner .brz-rich-text,
.brz-popup2--opened .brz-popup2__inner p { animation: fw-auf .5s cubic-bezier(.22,.61,.36,1) .09s both; }

.brz-popup2--opened .brz-popup2__inner .brz-btn,
.brz-popup2--opened .brz-popup2__inner form { animation: fw-auf .5s cubic-bezier(.22,.61,.36,1) .16s both; }

@keyframes fw-auf {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* das Bild im Popup bekommt einen langsamen Zoom */
.brz-popup2--opened .brz-popup2__inner .brz-bg-image {
  animation: fw-popupzoom 14s ease-out both;
}

@keyframes fw-popupzoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* schlanker Rollbalken im Popup statt Systembreite */
.brz-popup2__inner { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.5) transparent; }
.brz-popup2__inner::-webkit-scrollbar { width: 8px; }
.brz-popup2__inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .45);
  border-radius: 4px;
}
.brz-popup2__inner::-webkit-scrollbar-track { background: transparent; }

/* --- Mehr Bewegung: Hero-Text und Bildkacheln ----------------------------- */
.fw-textparallax { transform: translate3d(0, var(--fw-textparallax, 0px), 0); }

@media (prefers-reduced-motion: reduce) {
  .brz-accordion__item--active .brz-accordion__nav--previewIcon { transform: none; }
  .brz-accordion__item:hover .brz-accordion__nav-title { transform: none; }
  .brz-accordion__content { opacity: 1; transition: none; }
  .brz-popup2--opened .brz-popup2__inner h1,
  .brz-popup2--opened .brz-popup2__inner h2,
  .brz-popup2--opened .brz-popup2__inner h3,
  .brz-popup2--opened .brz-popup2__inner .brz-rich-text,
  .brz-popup2--opened .brz-popup2__inner p,
  .brz-popup2--opened .brz-popup2__inner .brz-btn,
  .brz-popup2--opened .brz-popup2__inner form,
  .brz-popup2--opened .brz-popup2__inner .brz-bg-image { animation: none; }
  .fw-textparallax { transform: none; }
}

/* ==========================================================================
   Einheitliche Schrift
   Auf der Seite lief fast alles in Lato, aber 22 Stellen (Formularknopf,
   einzelne Listen und Absaetze) waren auf "aktiv-grotesk" gesetzt - eine
   Adobe-Schrift, die gar nicht geladen wird. Sie fielen auf die System-
   Schrift zurueck und sahen dadurch anders aus. Jetzt ueberall Lato:
   Ueberschriften, Fliesstext, Formular und Schaltflaechen.
   Symbolschriften (Material Icons, Brizy-Icons) sind ausgenommen.
   ========================================================================== */

:root {
  --brz-buttonfontfamily: "Lato", sans-serif;
  --fw-schrift: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}

body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body a, body li, body td, body th,
body strong, body em, body label, body legend, body blockquote,
body button, body input, body select, body textarea,
.brz-btn, .brz-menu__item a, .brz-accordion__nav-title,
.fc-form, .fc-form input, .fc-form textarea, .fc-form select,
.fc-form .submit-button, .fc-form label {
  font-family: var(--fw-schrift);
}

/* Symbole behalten ihre eigene Schrift */
body i.formcraft-icon,
body .material-icons,
body [class*="brz-icon"],
body .brz-icon-svg {
  font-family: "Material Icons", "brz-icon-svg" !important;
}

/* ==========================================================================
   Popups als Karte statt Vollbild
   Bisher fuellte jedes Popup den ganzen Bildschirm - der Inhalt lief dadurch
   ueber die volle Breite und man verlor den Bezug zur Seite dahinter.
   Jetzt eine zentrierte Karte mit Rand, abgerundet und mit Tiefe.
   ========================================================================== */

.brz-popup2__inner {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vh, 56px) clamp(12px, 4vw, 48px);
  /* Bei vier Popups ist diese Huelle selbst nur 708 px breit - die Karte
     darin konnte deshalb weder wachsen noch mittig sitzen. */
  width: 100% !important;
  max-width: 100% !important;
}

.brz-popup2__inner > .brz-container__wrap {
  /* als Flex-Element nimmt die Karte sonst nur ihre Inhaltsbreite (616 px
     statt der erlaubten 1060) - deshalb die Basis ausdruecklich setzen. */
  flex: 0 1 1060px;
  width: 100%;
  max-width: 1060px;
  /* Vier Popups haben ein eigenes Innenlayout und blieben trotz
     justify-content am linken Rand haengen - das zentriert sie verlaesslich. */
  margin-inline: auto !important;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-radius: var(--fw-rund-karte);
  box-shadow: var(--fw-schatten-3);
  /* der Innenabstand sitzt jetzt an der Karte, nicht mehr am Bildschirmrand */
  padding-block: 0;
}

/* Rollbalken jetzt an der Karte, nicht mehr an der Huelle */
.brz-popup2__inner > .brz-container__wrap { scrollbar-width: thin; }
.brz-popup2__inner > .brz-container__wrap::-webkit-scrollbar { width: 8px; }
.brz-popup2__inner > .brz-container__wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .22);
  border-radius: 4px;
}

/* Schliesskreuz an die Karte heften, nicht an den Bildschirmrand */
.brz-popup2__close { top: 14px !important; right: 14px !important; }

/* auf kleinen Schirmen darf die Karte fast die ganze Flaeche nutzen */
@media (max-width: 767px) {
  .brz-popup2__inner { padding: 10px; }
  .brz-popup2__inner > .brz-container__wrap {
    max-height: 94vh;
    border-radius: var(--fw-rund-karte);
  }
}

/* Vier Popups (u. a. Impressum, Datenschutz) haben ein eigenes Innenlayout;
   dort setzt Brizy Breite und Rand spezifischer. Mit .brz und dem
   Zustandsselektor gewinnt der Nachbau. */
.brz .brz-popup2--opened .brz-popup2__inner > .brz-container__wrap,
.brz-popup2--opened .brz-popup2__inner > .brz-container__wrap {
  flex: 0 1 min(1060px, 100%) !important;
  width: min(1060px, 100%) !important;
  margin-inline: auto !important;
}

/* ==========================================================================
   Mehr Dynamik: Hover-Zustaende ueberall dort, wo geklickt werden kann
   ========================================================================== */

/* Navigation: Unterstrich laeuft von links ein */
.brz-menu__item > a {
  position: relative;
  transition: color .22s ease;
}

.brz-menu__item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.brz-menu__item > a:hover::after { transform: scaleX(1); }

/* Schaltflaechen im Fussbereich (Impressum, Datenschutz, AGB) */
.brz-btn:hover { filter: brightness(1.06); }

/* Symbole (Facebook, Instagram) heben sich und faerben sich gruen */
a .brz-icon-svg,
a svg.brz-icon-svg {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}

a:hover .brz-icon-svg { transform: translateY(-3px) scale(1.12); }

/* Textlinks bekommen eine Unterstreichung statt nur Farbwechsel */
.brz-rich-text a,
.brz-text__editor a {
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .25s ease, color .25s ease;
}

.brz-rich-text a:hover,
.brz-text__editor a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Impressionen: Bilder heben sich leicht und werden farbig */
.brz-image__wrapper,
.brz-image img {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), filter .45s ease;
}

.brz-image:hover img { transform: scale(1.04); }

/* Telefonnummer und E-Mail im Fuss */
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover { color: var(--fw-gruen); }

@media (prefers-reduced-motion: reduce) {
  .brz-menu__item > a::after { transition: none; }
  a:hover .brz-icon-svg,
  .brz-image:hover img { transform: none; }
}

/* ==========================================================================
   Popups: Bild sichtbar lassen, Text lesbar setzen
   Über der Bildspalte lag ein grüner Verlauf mit 70 % Deckkraft - vom Foto
   blieb fast nichts übrig, und die Karte wirkte flächig grün. Jetzt ein
   weicher Übergang zur Textspalte statt einer Farbdecke.
   ========================================================================== */

/* Nur die Farbdecke ueber einem Foto - erkannt in fw.js und mit
   .fw-bildoverlay markiert. Ein pauschaler Selektor traf auch die weissen
   Textspalten und machte sie durchscheinend. */
.brz-popup2 .fw-bildoverlay {
  background-image: linear-gradient(90deg,
                    rgba(0, 0, 0, 0) 25%,
                    rgba(10, 74, 4, .5) 100%) !important;
}

/* Text im Popup: vorher 13-15 px und eng gesetzt - auf Lesegröße gebracht */
.brz-popup2 .brz-popup2__inner p,
.brz-popup2 .brz-popup2__inner li,
.brz-popup2 .brz-popup2__inner .brz-rich-text {
  font-size: var(--fw-t-text) !important;
  line-height: 1.62 !important;
}

.brz-popup2 .brz-popup2__inner li { margin-bottom: 6px; }

.brz-popup2 .brz-popup2__inner ul,
.brz-popup2 .brz-popup2__inner ol { padding-inline-start: 1.15em; }

/* Überschrift bekommt Luft nach unten und wird nicht mehr überdimensioniert */
.brz-popup2 .brz-popup2__inner h1,
.brz-popup2 .brz-popup2__inner h2,
.brz-popup2 .brz-popup2__inner h3 {
  font-size: var(--fw-t-h2) !important;
  line-height: 1.18 !important;
  margin-bottom: .5em !important;
  letter-spacing: -.01em;
}

/* Innenabstand: der Text klebte an der Kartenkante */
.brz-popup2 .brz-popup2__inner .brz-columns .brz-column__items {
  padding: clamp(20px, 2.4vw, 40px);
}

/* Bildspalten bekommen keinen zusätzlichen Innenabstand */
.brz-popup2 .brz-popup2__inner .brz-columns .brz-column__items:has(> .brz-bg .brz-bg-image) {
  padding: 0;
}

/* Aufzählungspunkte in der Markenfarbe */
.brz-popup2 .brz-popup2__inner li::marker { color: var(--fw-gruen); }

/* Text, der direkt über einem Foto sitzt (z. B. "Freunde werben Freunde"),
   bekommt einen weichen Schatten - ohne ihn verschwindet er auf hellen
   Bildstellen, seit die grüne Farbdecke weg ist. */
.brz-popup2 .fw-textaufbild .brz-rich-text,
.brz-popup2 .fw-textaufbild p,
.brz-popup2 .fw-textaufbild h1,
.brz-popup2 .fw-textaufbild h2,
.brz-popup2 .fw-textaufbild h3 {
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* --- Aufklapplisten in den Popups (Klassen, Team, Fahrzeuge, Leistungen) ---
   Die Beschriftungen standen in hellem Grau auf Weiß und waren kaum zu
   lesen. Kräftigere Farbe, etwas mehr Gewicht, klarere Trennlinien. */
.brz-popup2 .brz-accordion__nav-title {
  color: #34404b !important;
  font-weight: 600 !important;
}

.brz-popup2 .brz-accordion__item {
  border-color: #e3e7ea !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.brz-popup2 .brz-accordion__item:hover {
  border-color: var(--fw-gruen) !important;
  background: #fafffa !important;
}

.brz-popup2 .brz-accordion__item--active .brz-accordion__nav-title {
  color: #1d2a16 !important;
}

/* Fließtext in den Popups mit ausreichend Kontrast */
.brz-popup2 .brz-popup2__inner p,
.brz-popup2 .brz-popup2__inner li {
  color: #3c464f;
}

/* Text auf Bildern bleibt hell - dort gilt der Schatten von oben */
.brz-popup2 .fw-textaufbild p,
.brz-popup2 .fw-textaufbild li { color: inherit; }

/* ==========================================================================
   Fusszeile
   Ersetzt die alte Brizy-Zeile (Telefonnummer, Logo, drei Knöpfe ohne
   Struktur). Aufbau wie in den anderen Projekten: Marke, Wegweiser, Kontakt,
   darunter eine schmale Leiste mit Recht und Baustempel.
   ========================================================================== */

.fw-fuss {
  background: #23282b;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fw-t-text);
  line-height: 1.65;
  padding: clamp(40px, 6vw, 72px) clamp(18px, 5vw, 56px) 0;
}

.fw-fuss__raster {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: clamp(28px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: clamp(28px, 4vw, 48px);
}

.fw-fuss__marke img { height: 52px; width: auto; margin-bottom: 18px; }

.fw-fuss__marke p { margin: 0 0 18px; max-width: 34ch; color: rgba(255, 255, 255, .68); }

.fw-fuss__sozial { display: flex; gap: 12px; }

.fw-fuss__sozial a {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  text-decoration: none;
  transition: background-color .22s ease, border-color .22s ease,
              color .22s ease, transform .22s ease;
}

.fw-fuss__sozial a:hover {
  background: var(--fw-gruen);
  border-color: var(--fw-gruen);
  color: #fff;
  transform: translateY(-2px);
}

.fw-fuss h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.fw-fuss__spalte ul { list-style: none; margin: 0; padding: 0; }

.fw-fuss__spalte li { margin-bottom: 7px; }

.fw-fuss a { color: rgba(255, 255, 255, .82); text-decoration: none; }

.fw-fuss__spalte a { position: relative; transition: color .2s ease, padding-left .2s ease; }

.fw-fuss__spalte a:hover { color: var(--fw-gruen); padding-left: 6px; }

.fw-fuss__kontakt p { margin: 0 0 10px; }

.fw-fuss__adresse, .fw-fuss__zeiten { color: rgba(255, 255, 255, .68); }

.fw-fuss__zeiten { font-size: 15px; }

.fw-fuss__knopf {
  display: inline-block;
  margin-top: 6px;
  padding: 11px 24px;
  border-radius: var(--fw-rund-feld);
  background: var(--fw-gruen);
  color: #fff !important;
  font-weight: 700;
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.fw-fuss__knopf:hover {
  background: var(--fw-gruen-hell);
  transform: translateY(-2px);
  box-shadow: var(--fw-schatten-gruen);
}

.fw-fuss__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
}

.fw-fuss__recht { display: flex; gap: 18px; }

.fw-fuss__recht a, .fw-fuss__macher a { color: rgba(255, 255, 255, .72); }

.fw-fuss__recht a:hover, .fw-fuss__macher a:hover { color: var(--fw-gruen); }

@media (max-width: 900px) {
  .fw-fuss__raster { grid-template-columns: 1fr 1fr; }
  .fw-fuss__marke { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .fw-fuss__raster { grid-template-columns: 1fr; }
  .fw-fuss__leiste { justify-content: flex-start; }
}

/* ==========================================================================
   Willkommens-Popup: eigene Handschrift
   Das erste Popup, das jeder Besucher sieht. Es bekommt eine eigene Anmutung
   statt der Standardsetzung - und ausdruecklich keinen Textschatten.
   ========================================================================== */

#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h1,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h2,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h3 {
  font-size: var(--fw-t-h1) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
  color: #1d2a16 !important;
  text-shadow: none !important;
}

#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner li,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner p,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner .brz-rich-text {
  font-size: var(--fw-t-gross) !important;
  line-height: 1.58 !important;
  color: #2f3a33 !important;
  text-shadow: none !important;
}

/* die Vorteilsliste bekommt Luft und eine ruhige Trennung */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-rich-text p {
  padding-block: 3px;
}

/* in diesem Popup grundsaetzlich kein Schatten - auch nicht ueber dem Foto */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .fw-textaufbild * {
  text-shadow: none !important;
}

/* ==========================================================================
   Neuigkeiten: die Blöcke reagieren auf den Zeiger
   ========================================================================== */

#neuigkeiten .brz-columns .brz-column__items {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              box-shadow .3s ease, filter .3s ease;
}

#neuigkeiten .brz-columns:hover .brz-column__items {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  filter: saturate(1.14) brightness(1.05);
}

/* ==========================================================================
   "Fahrlehrer/in gesucht" als Aushang
   Stand vorher als bloße Textzeile zwischen den Blöcken. Jetzt ein Zettel,
   der leicht schief hängt - wie am schwarzen Brett.
   ========================================================================== */

.fw-aushang {
  display: block;
  position: relative;
  width: fit-content;
  max-width: min(520px, 88%);
  margin: 14px auto 22px;
  padding: 22px 34px 26px;
  text-align: center;
  background: #fffdf7;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  transform: rotate(-1.6deg);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

.fw-aushang:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}

.fw-aushang * { color: #1d2a16 !important; text-shadow: none !important; }

/* Klebestreifen oben */
.fw-aushang::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 108px;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 255, 255, .55);
  border-left: 1px dashed rgba(0, 0, 0, .12);
  border-right: 1px dashed rgba(0, 0, 0, .12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* die Zeile darunter wie handschriftlich ergänzt */
.fw-aushang::after {
  content: "Bewirb dich – wir freuen uns auf dich!";
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  color: #55603f;
}

@media (prefers-reduced-motion: reduce) {
  #neuigkeiten .brz-columns:hover .brz-column__items,
  .fw-aushang:hover { transform: none; }
}

/* ==========================================================================
   Schließknopf sichtbar machen
   Der Kreis war weiß - und das Kreuz darin ebenfalls. Auf der weißen Karte
   war der Knopf dadurch praktisch unsichtbar. Jetzt dunkler Kreis mit hellem
   Kreuz: erkennbar auf Foto wie auf weißem Grund.
   ========================================================================== */

.brz-popup2__close {
  background: rgba(28, 33, 30, .82) !important;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

.brz-popup2__close .brz-icon-svg,
.brz-popup2__close svg {
  color: #fff !important;
  fill: #fff !important;
}

.brz-popup2__close:hover {
  background: var(--fw-gruen) !important;
  border-color: #fff;
}

.brz-popup2__close:hover .brz-icon-svg,
.brz-popup2__close:hover svg { color: #fff !important; fill: #fff !important; }

/* ==========================================================================
   Akkordeons überall gleich
   Vorher: im FAQ 26 px Schrift und 58 px hohe Zeilen, in den Popups 20 px und
   54 px - dazu unterschiedliche Polster. Jetzt ein Maß für beide.
   ========================================================================== */

.brz-accordion__item > .brz-accordion__nav {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 12px 20px !important;
  box-sizing: border-box;
}

.brz-accordion__nav-title,
.brz-popup2 .brz-accordion__nav-title {
  font-size: 19px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-align: left;
}

/* das Pfeilsymbol bekommt einen festen Platz, damit die Titel bündig stehen */
.brz-accordion__nav .brz-accordion-icon {
  flex: 0 0 auto;
  width: 18px;
  margin-left: auto;
}

/* gleicher Abstand zwischen den Zeilen, überall */
.brz-accordion > .brz-accordion__item { margin-bottom: 8px !important; }

.brz-accordion > .brz-accordion__item:last-child { margin-bottom: 0 !important; }

/* Antworttext einheitlich */
.brz-accordion__item-content,
.brz-popup2 .brz-accordion__item-content {
  padding: 4px 20px 16px !important;
}

.brz-accordion__item-content p,
.brz-accordion__item-content li {
  font-size: var(--fw-t-text) !important;
  line-height: 1.62 !important;
}

/* ==========================================================================
   Einheitliche Schriftstaffel
   Gemessen waren 18 verschiedene Größen im Einsatz - teils 35 px und 36 px
   direkt nebeneinander, dazu 13/14/16/17/18/20/21/22/24/26/29/30 px ohne
   System. Das wirkt unruhig, ohne dass man den Grund benennen kann.
   Sechs Stufen genügen. Die leichte Anmutung der Seite (Lato 300 im Fließtext)
   bleibt erhalten - geglättet werden die Größen, nicht der Charakter.
   ========================================================================== */

:root {
  --fw-t-klein: 15px;   /* Bildunterschriften, Fußzeile, Hinweise */
  --fw-t-text:  17px;   /* Fließtext */
  --fw-t-gross: 19px;   /* betonter Text, Akkordeon-Titel, Menü */
  --fw-t-h4:    22px;
  --fw-t-h3:    clamp(24px, 2.2vw, 30px);
  --fw-t-h2:    clamp(28px, 2.9vw, 38px);
  --fw-t-h1:    clamp(34px, 4.2vw, 58px);
}

/* --- Überschriften --------------------------------------------------------
   Vorher lagen h2 (29 px) und h3 (36 px) verkehrt herum zueinander. */
.brz h1, .brz-popup2 h1, body h1 { font-size: var(--fw-t-h1) !important; line-height: 1.08 !important; }
.brz h2, .brz-popup2 h2, body h2 { font-size: var(--fw-t-h2) !important; line-height: 1.18 !important; }
.brz h3, .brz-popup2 h3, body h3 { font-size: var(--fw-t-h3) !important; line-height: 1.24 !important; }
.brz h4, .brz-popup2 h4, body h4 { font-size: var(--fw-t-h4) !important; line-height: 1.3 !important; }

/* Gewichte: 300 für die leichten Überschriften der Seite bleibt, 800 (einmal
   vergeben) fällt auf 700 zurück. */
.brz h1, .brz h2, .brz h3, .brz h4 { font-weight: 700 !important; }

/* --- Fließtext ------------------------------------------------------------ */
.brz p, .brz li, .brz-popup2 p, .brz-popup2 li {
  font-size: var(--fw-t-text) !important;
  line-height: 1.62 !important;
}

/* Kleintext bleibt klein: Fußzeilen-Leiste, Bildunterschriften, Hinweise */
.fw-fuss__leiste, .fw-fuss__leiste *,
.fw-aushang::after,
.brz-slick-slider__dots,
figcaption, small {
  font-size: var(--fw-t-klein) !important;
}

/* --- Bedienelemente ------------------------------------------------------- */
.brz-menu__item > a { font-size: var(--fw-t-gross) !important; }

.brz-accordion__nav-title,
.brz-popup2 .brz-accordion__nav-title { font-size: var(--fw-t-gross) !important; }

.brz-btn, .submit-button, .fw-fuss__knopf, .fw-einwilligung__knopf {
  font-size: var(--fw-t-text) !important;
  font-weight: 700 !important;
}

.fc-form input, .fc-form textarea, .fc-form select {
  font-size: var(--fw-t-text) !important;
}

/* --- Ausnahmen, die groß bleiben sollen ----------------------------------- */
/* Die Hero-Zeile ist das Aushängeschild und behält ihre Wirkung. */
.brz-slick-slider .slick-slide h1,
.brz-slick-slider .slick-slide h2 {
  font-size: clamp(30px, 4.6vw, 64px) !important;
}

/* Der Aushang trägt seine eigene Größe */
.fw-aushang h1, .fw-aushang h2, .fw-aushang h3 {
  font-size: var(--fw-t-h3) !important;
}

/* Brizy verpackt jeden Textschnipsel in <span> mit eigener Größenklasse
   (brz-fs-lg-NN). Ohne diese Regel bleibt die Staffel oben wirkungslos:
   die Größe am Absatz wird vom span überschrieben. */
.brz h1 span, .brz h2 span, .brz h3 span, .brz h4 span,
.brz p span, .brz li span, .brz p strong, .brz li strong,
.brz-popup2 h1 span, .brz-popup2 h2 span, .brz-popup2 h3 span,
.brz-popup2 p span, .brz-popup2 li span,
.brz-menu__item > a span,
.brz-accordion__nav-title span,
.brz-btn span, .submit-button span {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Restliche Ausreißer auf die Staffel bringen: h5/h6 waren nicht erfasst,
   die Fußzeilen-Knöpfe lagen bei 14 px, der Karten-Platzhalter bei 20 px. */
.brz h5, .brz h6, .brz-popup2 h5, .brz-popup2 h6 {
  font-size: var(--fw-t-h4) !important;
  line-height: 1.3 !important;
}

.fw-fuss__sozial a { font-size: var(--fw-t-klein) !important; }

.fw-einwilligung__text strong { font-size: var(--fw-t-gross) !important; }

.fw-einwilligung__text p { font-size: var(--fw-t-text) !important; }

/* ==========================================================================
   Mobile Ansicht: kompakter und besser bedienbar
   Auf dem Telefon lief die Seite auf 12.648 px Höhe - die Impressionen
   einspaltig (16 Bilder untereinander) und viele Umbrüche in den Fragen.
   ========================================================================== */

@media (max-width: 767px) {
  /* Dieselbe Ordnung wie am Rechner, nur eine Spur kleiner - und mit
     klaren Abstaenden zwischen den Stufen. Gemessen waren auf dem Telefon
     elf Groessen, darunter 28 px fuer Abschnittstitel und 30 px fuer die
     Schlagzeile: der Unterschied war nicht mehr zu sehen. */
  :root {
    --fw-t-klein: 14px;
    --fw-t-text:  16px;
    --fw-t-gross: 17px;
    --fw-t-h4:    19px;
    --fw-t-h3:    22px;
    --fw-t-h2:    26px;
    --fw-t-h1:    32px;
  }

  /* Die Schlagzeile im Hero bleibt die groesste Stimme der Seite */
  .brz-slick-slider .slick-slide h1,
  .brz-slick-slider .slick-slide h2 { font-size: 34px !important; }

  /* Kleinkram, der aus der Staffel gefallen war */
  .fw-menue__titel { font-size: var(--fw-t-klein) !important; }
  .brz nav.brz-menu__mmenu.fw-menue .brz-menu__item > a {
    font-size: var(--fw-t-gross);
    padding: 14px 20px;
  }

  /* Slider-Punkte: 10 px Trefferfläche ist auf dem Telefon zu wenig.
     Die Fläche muss am <button> hängen - das <li> vergrössern reicht nicht,
     angetippt wird der Knopf darin. */
  .brz-slick-slider__dots li,
  .brz-slick-slider__dots li button {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Akkordeon-Zeilen dürfen mit zweizeiligen Fragen wachsen, ohne zu drängen */
  .brz-accordion__item > .brz-accordion__nav {
    min-height: 52px;
    padding: 11px 16px !important;
  }

  /* Das Kontaktformular lief 14 px über den rechten Rand: FormCraft setzt auf
     den inneren Blöcken feste Breiten ohne border-box. */
  .fc-form,
  .fc-form .form-page-content,
  .fc-form .form-element,
  .fc-form .form-element-html,
  .fc-form .field-cover {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .fc-form .form-page-content { width: 100% !important; }

  /* Popup-Karte nutzt fast die volle Fläche */
  .brz-popup2 .brz-popup2__inner .brz-columns .brz-column__items { padding: 18px; }

  /* Fußzeile: etwas engere Abstände, damit sie nicht auseinanderfällt */
  .fw-fuss { padding-inline: 20px; }
  .fw-fuss__raster { gap: 26px; }
}

/* ==========================================================================
   Kontakt- und Anmeldeformular
   Vorher: flache 49-px-Felder, fast weiß auf dunklem Grund, 2 px Radius,
   grauer Text und ein ebenso flacher Knopf. Funktional, aber lieblos.
   ========================================================================== */

.fc-form input[type="text"],
.fc-form input[type="email"],
.fc-form input[type="tel"],
.fc-form textarea,
.fc-form select {
  min-height: 54px !important;
  padding: 14px 18px !important;
  border: 1.5px solid #dfe4e8 !important;
  border-radius: var(--fw-rund-feld) !important;
  background: #fff !important;
  color: #2b343c !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.fc-form textarea { min-height: 130px !important; resize: vertical; }

.fc-form input::placeholder,
.fc-form textarea::placeholder { color: #8c959d !important; opacity: 1; }

/* Fokus: deutlich, in der Markenfarbe */
.fc-form input:focus,
.fc-form textarea:focus,
.fc-form select:focus {
  border-color: var(--fw-gruen) !important;
  box-shadow: 0 0 0 4px rgba(96, 196, 25, .18) !important;
  background: #fff !important;
}

/* Abstand zwischen den Feldern - vorher klebten sie aneinander */
.fc-form .form-element { margin-bottom: 14px !important; }

/* Pflichtfeld-Sternchen dezenter: es soll hinweisen, nicht schreien */
.fc-form .required-mark,
.fc-form .form-element .required,
.fc-form span[style*="color: red"],
.fc-form .asterisk {
  color: #c8ccd0 !important;
  font-size: 13px !important;
}

/* Absendeknopf: größer, klarer, mit Pfeil */
.fc-form .submit-button {
  min-height: 54px !important;
  padding: 15px 34px !important;
  border-radius: var(--fw-rund-feld) !important;
  font-size: var(--fw-t-gross) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: var(--fw-schatten-gruen) !important;
}

.fc-form .submit-button .text::after {
  content: " →";
  transition: transform .25s ease;
  display: inline-block;
}

.fc-form .submit-button:hover .text::after { transform: translateX(4px); }

/* Auswahlfelder bekommen denselben Zuschnitt wie die Eingaben */
.fc-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6b7680 50%),
                    linear-gradient(135deg, #6b7680 50%, transparent 50%) !important;
  background-position: calc(100% - 21px) 24px, calc(100% - 15px) 24px !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 42px !important;
}

/* Die Rückmeldung nach dem Absenden passt sich dem neuen Zuschnitt an */
.submit-response { border-radius: var(--fw-rund-feld) !important; }

/* ==========================================================================
   Popups: neuer Zuschnitt
   Bisher: Karte mit Bild links, Text rechts, alles bündig an den Kanten.
   Jetzt mit klarem Kopf, Akzentlinie, Luft und weichen Bildkanten.
   ========================================================================== */

/* Überschrift bekommt einen Akzent statt frei im Raum zu stehen */
.brz-popup2 .brz-popup2__inner h1,
.brz-popup2 .brz-popup2__inner h2,
.brz-popup2 .brz-popup2__inner h3 {
  position: relative;
  padding-bottom: .42em !important;
}

.brz-popup2 .brz-popup2__inner h1::after,
.brz-popup2 .brz-popup2__inner h2::after,
.brz-popup2 .brz-popup2__inner h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 3px;
  border-radius: 2px;
  background: var(--fw-gruen);
  transform-origin: left;
  animation: fw-linie .6s cubic-bezier(.22, .61, .36, 1) .18s both;
}

@keyframes fw-linie {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Überschriften auf Bildern brauchen keinen Balken - dort trägt das Foto */
.brz-popup2 .fw-textaufbild h1::after,
.brz-popup2 .fw-textaufbild h2::after,
.brz-popup2 .fw-textaufbild h3::after { display: none; }

/* Bildkante innen mitrunden, damit die Karte aus einem Guss wirkt */
.brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg {
  border-radius: 14px 0 0 14px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg {
    border-radius: 10px 10px 0 0;
  }
}

/* Der grüne Schleier über den Fotos wird zum weichen Rand statt zur Decke */
.brz-popup2 .fw-bildoverlay {
  background-image: linear-gradient(90deg,
                    rgba(0, 0, 0, 0) 55%,
                    rgba(10, 74, 4, .42) 100%) !important;
}

/* Mehr Luft im Textteil */
.brz-popup2 .brz-popup2__inner .brz-columns:last-child .brz-column__items {
  padding: clamp(24px, 3vw, 46px) !important;
}

/* Aufzählungen bekommen eigene Marken statt Standardpunkte */
.brz-popup2 .brz-popup2__inner ul { list-style: none; padding-inline-start: 0; }

.brz-popup2 .brz-popup2__inner ul li {
  position: relative;
  padding-left: 26px;
}

.brz-popup2 .brz-popup2__inner ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fw-gruen);
}

@media (prefers-reduced-motion: reduce) {
  .brz-popup2 .brz-popup2__inner h1::after,
  .brz-popup2 .brz-popup2__inner h2::after,
  .brz-popup2 .brz-popup2__inner h3::after { animation: none; }
}

/* ==========================================================================
   Mehr Bewegung auf der Seite
   ========================================================================== */

/* Die Akzentlinie gibt es nur noch in den Popups (siehe fw.js) - die Klasse
   bleibt für den Fall, dass sie gezielt gesetzt werden soll. */
.fw-titel { position: relative; padding-bottom: .34em; }

.fw-titel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 3px;
  margin-left: -32px;
  border-radius: 2px;
  background: var(--fw-gruen);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .1s;
}

.fw-titel.fw-sichtbar::after { transform: scaleX(1); }

/* Formularfelder erscheinen nacheinander statt als Block */
.fc-form.fw-sichtbar .form-element {
  animation: fw-auf .5s cubic-bezier(.22, .61, .36, 1) both;
}

.fc-form.fw-sichtbar .form-element:nth-child(1) { animation-delay: .04s; }
.fc-form.fw-sichtbar .form-element:nth-child(2) { animation-delay: .10s; }
.fc-form.fw-sichtbar .form-element:nth-child(3) { animation-delay: .16s; }
.fc-form.fw-sichtbar .form-element:nth-child(4) { animation-delay: .22s; }
.fc-form.fw-sichtbar .form-element:nth-child(5) { animation-delay: .28s; }
.fc-form.fw-sichtbar .form-element:nth-child(n+6) { animation-delay: .34s; }

/* Bilder der Galerie erscheinen versetzt */
.fw-bildauf {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.985);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.fw-bildauf.fw-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fw-titel::after { transition: none; transform: scaleX(1); }
  .fc-form.fw-sichtbar .form-element { animation: none; }
  .fw-bildauf { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Kacheln (Büro/Theorie, Klassen, Team, Fahrzeuge, Anmeldung, Leistungen)
   Die Beschriftung lag mittig auf dem Foto und ging je nach Bildstelle unter.
   Jetzt: Verlauf von unten, Text unten links verankert, Pfeil als Einladung.
   ========================================================================== */

.brz-hover-animation__container::after {
  /* der Verlauf ist jetzt dauerhaft da, nicht erst beim Überfahren -
     sonst ist die Beschriftung im Ruhezustand schlecht zu lesen */
  opacity: .85;
  height: 62%;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .62) 0%,
              rgba(0, 0, 0, .28) 45%,
              transparent 100%);
}

.brz-hover-animation__container:hover::after { opacity: 1; }

/* Ein Pfeil zeigt, dass hinter der Kachel etwas steckt */
.brz-hover-animation__container::before {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  color: #fff;
  font-size: 22px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

.brz-hover-animation__container:hover::before { opacity: 1; transform: none; }

/* ==========================================================================
   FAQ: Struktur statt Endlosliste
   Der Abschnitt ist der längste der Seite. Die Gruppentitel gingen zwischen
   den Zeilen unter, alles wirkte gleichförmig.
   ========================================================================== */

#faq .brz-rich-text h3,
#faq h3 {
  margin-top: 1.4em !important;
  padding-bottom: .3em !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Die Fragen bekommen mehr Halt auf dem grünen Grund */
#faq .brz-accordion__item {
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: var(--fw-rund-feld) !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .09);
}

#faq .brz-accordion__item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
}

#faq .brz-accordion__item--active {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

/* ==========================================================================
   Impressionen: aus dem Raster wird eine Galerie
   ========================================================================== */

.brz-image__wrapper, .brz-image img {
  border-radius: var(--fw-rund-feld);
}

.brz-image {
  overflow: hidden;
  border-radius: var(--fw-rund-feld);
  box-shadow: var(--fw-schatten-1);
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.brz-image:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
  transform: translateY(-3px);
}

/* ==========================================================================
   Hero: mehr Halt für die Schlagzeile
   Der helle Text stand ohne Abstufung auf dem Foto.
   ========================================================================== */

.brz-slick-slider .slick-slide .brz-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(0, 0, 0, .42) 0%,
              rgba(0, 0, 0, .18) 45%,
              transparent 72%);
  pointer-events: none;
}

.brz-slick-slider .slick-slide h1,
.brz-slick-slider .slick-slide h2 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  .brz-image:hover, #faq .brz-accordion__item:hover { transform: none; }
  .brz-hover-animation__container:hover::before { transform: none; }
}

/* ==========================================================================
   Formulare: Beschriftungen und Karte
   Die Felder trugen ihren Namen nur als Platzhalter - beim Tippen war er weg.
   Jetzt steht der Name über dem Feld, im Feld nur noch ein knapper Hinweis.
   ========================================================================== */

.fw-feldname {
  letter-spacing: normal !important;
  display: block;
  margin: 0 0 6px 2px;
  color: #e9eef0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Im Popup (Anmeldung) steht das Formular auf hellem Grund */
.brz-popup2 .fw-feldname { color: #46525c; }

/* Freiwillige Felder ruhiger kennzeichnen als mit rotem Stern */
.fw-feldname { font-variant-numeric: tabular-nums; }

.fc-form .form-element { margin-bottom: 18px !important; }

/* Die roten Pflichtsterne von FormCraft verstecken - die Beschriftung sagt
   jetzt, was freiwillig ist. Zwei Schreibweisen, je nach Feldtyp. */
.fc-form .form-element .form-element-html > label > span[style*="red"],
.fc-form .required-mark,
.fc-form em.required,
.fc-form .form-element sup {
  display: none !important;
}

/* Das Kontaktformular bekommt eine eigene Fläche statt direkt auf dem
   dunklen Abschnitt zu liegen. */
#kontakt .fc-form-2,
#kontakt form[data-id="2"] {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--fw-rund-karte);
  padding: clamp(20px, 2.6vw, 34px) !important;
  box-shadow: var(--fw-schatten-2);
}

/* Kopfzeile über dem Formular */
.fw-formkopf {
  /* Der umgebende Block erbt von Brizy letter-spacing: -4px - damit
     ueberlappen sich die Buchstaben. Hier zurueckstellen. */
  letter-spacing: normal !important;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.fw-formkopf strong {
  display: block;
  color: #fff;
  font-size: var(--fw-t-h4);
  font-weight: 700;
  margin-bottom: 4px;
}

.fw-formkopf span {
  color: rgba(255, 255, 255, .66);
  font-size: var(--fw-t-klein);
}

.brz-popup2 .fw-formkopf { border-bottom-color: rgba(0, 0, 0, .1); }
.brz-popup2 .fw-formkopf strong { color: #1d2a16; }
.brz-popup2 .fw-formkopf span { color: #61707c; }

@media (max-width: 767px) {
  #kontakt .fc-form-2, #kontakt form[data-id="2"] { padding: 18px !important; }
}

/* ==========================================================================
   Kopfzeile und Blick-Leiste
   Die Zeile "fair | transparent | günstig | schnell" stand in Fett (700) und
   wirkte dadurch laut. Die Leiste darunter trug drei verschiedene Größen
   (17 px kursiv / 22 px / 38 px) - jetzt beides ruhig und einheitlich.
   ========================================================================== */

.fw-schlagzeile,
.fw-schlagzeile * {
  font-weight: 300 !important;
  letter-spacing: .02em !important;
}

/* Alles in der Leiste auf ein Maß: gleiche Größe, leichter Schnitt,
   keine Kursive - "alles im Blick:" war als einziges kursiv gesetzt. */
.fw-blickleiste span,
.fw-blickleiste em,
.fw-blickleiste a,
.fw-blickleiste p {
  /* Die Leiste trug drei Groessen (17 kursiv / 22 / 38). Sie sitzt jetzt auf
     der Stufe der Zwischentitel - eine Groesse weniger im System. */
  font-size: var(--fw-t-h4) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: .01em;
}

@media (max-width: 767px) {
  .fw-blickleiste span,
  .fw-blickleiste em,
  .fw-blickleiste a,
  .fw-blickleiste p { font-size: var(--fw-t-h4) !important; }
}

/* ==========================================================================
   FAQ: gleiche Abstände über Gruppengrenzen hinweg
   Die Fragen eines Themas liegen teils in ZWEI Akkordeon-Gruppen direkt
   untereinander. Innerhalb einer Gruppe standen 8 px Abstand, zwischen zwei
   Gruppen 0 px - dort klebten die Einträge aneinander, als gehörten sie
   zusammen. Gemessen: Anmeldung & Start, Theorieunterricht, Fahrstunden und
   Sonstige Fragen waren betroffen.
   ========================================================================== */

.brz-accordion { margin-bottom: 8px; }

/* Kein zusätzlicher Abstand oben, sonst sind es zwischen zwei Gruppen 12 px
   statt der 8 px, die innerhalb gelten. */
#faq .brz-accordion { margin-top: 0 !important; }

/* Der Abstand von der Überschrift zur ersten Frage schwankte zwischen
   15 und 26 px, der zum vorigen Block zwischen 57 und 79 px. */
#faq h3, #faq h2 {
  margin-top: 34px !important;
  margin-bottom: 14px !important;
}

/* ==========================================================================
   Anmeldeformular: kompakter und gegliedert
   19 Felder auf fast 2000 px Höhe - man scrollt ohne Orientierung durch.
   Engere Maße und fünf Zwischenüberschriften machen es überschaubar.
   ========================================================================== */

/* Zwischenüberschrift */
.fw-abschnitt {
  width: 100%;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  color: var(--fw-gruen);
  font-size: var(--fw-t-klein);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  letter-spacing: .08em !important;
}

.fw-abschnitt:first-of-type { margin-top: 4px; }

/* Im Anmeldeformular alles eine Spur enger als im Kontaktformular */
form[data-id="1"]:not(.fw-a) .form-element { margin-bottom: 10px !important; }

form[data-id="1"]:not(.fw-a) .fw-feldname {
  margin-bottom: 4px;
  font-size: 13px;
}

form[data-id="1"]:not(.fw-a) input[type="text"],
form[data-id="1"]:not(.fw-a) input[type="email"],
form[data-id="1"]:not(.fw-a) textarea,
form[data-id="1"]:not(.fw-a) select {
  min-height: 46px !important;
  padding: 11px 15px !important;
  border-radius: var(--fw-rund-feld) !important;
}

form[data-id="1"]:not(.fw-a) textarea { min-height: 96px !important; }

form[data-id="1"]:not(.fw-a) .submit-button {
  min-height: 50px !important;
  margin-top: 6px;
}

/* Die roten Pflichtsterne sind ::after-Elemente auf .field-cover
   (content:'*', color:red, 26 px) - deshalb waren sie über das DOM nicht zu
   fassen. FormCraft kennt dafür den Schalter "remove-asterisk-true"; hier
   direkt abgeschaltet. Was Pflicht ist, sagt jetzt die Beschriftung. */
.fc-form .is-required-true .field-cover::after,
.fc-form .form-element.is-required-true .field-cover::after,
.fc-form .form-element.is-required-true .field-cover .main-label > span::after,
.fc-form .field-cover.oneLineText-cover::after,
.fc-form .field-cover.email-cover::after,
.fc-form .field-cover.textarea-cover::after,
.fc-form .field-cover.dropdown-cover::after,
.fc-form .field-cover.datepicker-cover::after,
.fc-form .field-cover.address-cover::after {
  content: none !important;
}

/* ==========================================================================
   Formulare: schwebende Beschriftungen
   Die Beschriftung stand als eigene Zeile über jedem Feld - bei 19 Feldern
   kostet das viel Höhe. Jetzt sitzt sie im Feld und wandert beim Tippen nach
   oben. Der Name bleibt sichtbar, die Zeile entfällt.
   ========================================================================== */

.fw-feld { position: relative; }

.fw-feld .fw-feldname {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #8c959d;
  font-size: var(--fw-t-text);
  font-weight: 400;
  pointer-events: none;
  transition: top .16s ease, font-size .16s ease, color .16s ease,
              transform .16s ease;
  z-index: 2;
}

/* beim Tippen oder wenn etwas drinsteht: nach oben, kleiner, kräftiger */
.fw-feld:focus-within .fw-feldname,
.fw-feld.fw-gefuellt .fw-feldname {
  top: 9px;
  transform: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #6c7780;
  text-transform: uppercase;
}

.fw-feld:focus-within .fw-feldname { color: var(--fw-gruen); }

/* Platz für die schwebende Beschriftung im Feld */
.fc-form .fw-feld input[type="text"],
.fc-form .fw-feld input[type="email"],
.fc-form .fw-feld select {
  padding: 22px 16px 8px !important;
  min-height: 56px !important;
}

.fc-form .fw-feld textarea {
  padding: 26px 16px 10px !important;
}

/* Die Beschriftung im Textfeld sitzt oben, nicht mittig */
.fw-feld:has(textarea) .fw-feldname { top: 16px; transform: none; }

.fw-feld:has(textarea):focus-within .fw-feldname,
.fw-feld.fw-gefuellt:has(textarea) .fw-feldname { top: 9px; }

/* Platzhalter erst zeigen, wenn die Beschriftung oben ist - sonst überlagern
   sich beide im leeren Feld. */
.fc-form .fw-feld input::placeholder,
.fc-form .fw-feld textarea::placeholder { opacity: 0; transition: opacity .16s ease; }

.fw-feld:focus-within input::placeholder,
.fw-feld:focus-within textarea::placeholder,
.fw-feld.fw-gefuellt input::placeholder { opacity: 1; }

/* Zeilen dichter: die eigene Beschriftungszeile entfällt ja */
.fc-form .form-element { margin-bottom: 10px !important; }

form[data-id="1"]:not(.fw-a) .form-element { margin-bottom: 8px !important; }

form[data-id="1"]:not(.fw-a) .fc-form .fw-feld input,
form[data-id="1"]:not(.fw-a) .fw-feld input,
form[data-id="1"]:not(.fw-a) .fw-feld select { min-height: 52px !important; }

/* Abschnittsüberschriften enger */
.fw-abschnitt { margin: 16px 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .fw-feld .fw-feldname { transition: none; }
}

/* ==========================================================================
   Kontaktbereich: Karte und Formular als Paar
   Beide standen unverbunden nebeneinander - der Kartenplatzhalter als nackte
   graue Fläche, das Formular als gestaltete Karte. Jetzt gleiche Sprache.
   ========================================================================== */

.fw-einwilligung {
  border-radius: var(--fw-rund-karte);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--fw-schatten-2);
  min-height: 100%;
}

/* Die geladene Karte behält den Zuschnitt */
#kontakt iframe[title="Karte"] {
  border-radius: var(--fw-rund-karte);
  box-shadow: var(--fw-schatten-2);
}

/* Beide Spalten auf gleiche Höhe ziehen */
#kontakt .brz-row {
  align-items: stretch !important;
}

#kontakt .brz-columns > .brz-column__items {
  display: flex;
  flex-direction: column;
}

#kontakt .brz-columns .brz-wrapper:has(.fw-einwilligung),
#kontakt .brz-columns .brz-wrapper:has(form) { flex: 1; }

/* ==========================================================================
   Tab-Leiste unter dem Hero: weichere Trennung
   Die Felder waren durch harte weiße Linien getrennt.
   ========================================================================== */

.fw-blickleiste .brz-columns + .brz-columns { position: relative; }

.fw-blickleiste .brz-columns + .brz-columns::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(to bottom,
              rgba(255, 255, 255, 0),
              rgba(255, 255, 255, .45) 30%,
              rgba(255, 255, 255, .45) 70%,
              rgba(255, 255, 255, 0));
}

/* die Felder reagieren auf den Zeiger */
.fw-blickleiste .brz-columns {
  transition: background-color .25s ease;
}

.fw-blickleiste .brz-columns:hover {
  background: rgba(255, 255, 255, .09);
}

/* ==========================================================================
   Anmeldeformular - eigener Aufbau
   Ersetzt den verschachtelten FormCraft-Baum durch ein schlankes Raster.
   Zwei Spalten, wo zwei Angaben zusammengehören (Vorname/Nachname,
   PLZ/Ort), volle Breite, wo der Inhalt es braucht.
   ========================================================================== */

.fw-a {
  display: block;
  max-width: 100%;
  color: #2b343c;
  letter-spacing: normal !important;
}

.fw-a__kopf {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.fw-a__kopf strong {
  display: block;
  font-size: var(--fw-t-h4);
  font-weight: 700;
  color: #1d2a16;
}

.fw-a__kopf span { font-size: var(--fw-t-klein); color: #6b7680; }

.fw-a__gruppe { margin-bottom: 18px; }

.fw-a__gruppe h4 {
  margin: 0 0 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--fw-gruen) !important;
}

/* Raster: zwei Spalten, einzelne Felder spannen anders */
.fw-a__raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.fw-a__feld { position: relative; grid-column: span 12; }
.fw-a__feld--halb   { grid-column: span 6; }
.fw-a__feld--breit  { grid-column: span 9; }
.fw-a__feld--schmal { grid-column: span 3; }
.fw-a__feld--voll   { grid-column: span 12; }

/* Eingaben */
.fw-a input,
.fw-a select,
.fw-a textarea {
  width: 100%;
  min-height: 54px;
  padding: 22px 15px 7px;
  border: 1.5px solid #dfe4e8;
  border-radius: var(--fw-rund-feld);
  background: #fff;
  color: #2b343c;
  font-family: var(--fw-schrift);
  font-size: var(--fw-t-text);
  line-height: 1.3;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.fw-a textarea { min-height: 104px; padding-top: 26px; resize: vertical; }

.fw-a select { appearance: none; padding-right: 38px; cursor: pointer; }

.fw-a__feld::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 26px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #6b7680;
  border-bottom: 2px solid #6b7680;
  transform: rotate(45deg);
  pointer-events: none;
  opacity: 0;
}

.fw-a__feld:has(select)::after { opacity: 1; }

.fw-a input:focus,
.fw-a select:focus,
.fw-a textarea:focus {
  outline: none;
  border-color: var(--fw-gruen);
  box-shadow: 0 0 0 4px rgba(96, 196, 25, .16);
}

/* schwebende Beschriftung */
.fw-a__name {
  position: absolute;
  left: 16px;
  top: 17px;
  color: #8c959d;
  font-size: var(--fw-t-text);
  pointer-events: none;
  transition: top .16s ease, font-size .16s ease, color .16s ease;
}

.fw-a input:focus ~ .fw-a__name,
.fw-a textarea:focus ~ .fw-a__name,
.fw-a select:focus ~ .fw-a__name,
.fw-a input:not(:placeholder-shown) ~ .fw-a__name,
.fw-a textarea:not(:placeholder-shown) ~ .fw-a__name,
.fw-a select:valid ~ .fw-a__name {
  top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6c7780;
}

.fw-a input:focus ~ .fw-a__name,
.fw-a textarea:focus ~ .fw-a__name,
.fw-a select:focus ~ .fw-a__name { color: var(--fw-gruen); }

.fw-a input::placeholder,
.fw-a textarea::placeholder { color: #b3bbc2; opacity: 0; transition: opacity .16s; }

.fw-a input:focus::placeholder,
.fw-a textarea:focus::placeholder { opacity: 1; }

/* Zustimmung */
.fw-a__zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: var(--fw-t-klein);
  line-height: 1.5;
  color: #46525c;
}

.fw-a__zustimmung input {
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 0;
  accent-color: var(--fw-gruen);
  flex: 0 0 auto;
}

.fw-a__zustimmung a { color: var(--fw-gruen); text-decoration: underline; }

.fw-a__honig { position: absolute; left: -9999px; }

/* Absenden */
.fw-a__knopf {
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--fw-rund-feld);
  background: var(--fw-gruen);
  color: #fff;
  font-family: var(--fw-schrift);
  font-size: var(--fw-t-gross);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--fw-schatten-gruen);
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.fw-a__knopf:hover {
  background: var(--fw-gruen-hell);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(96, 196, 25, .34);
}

.fw-a__knopf .text::after { content: " →"; }

@media (max-width: 640px) {
  .fw-a__feld--halb, .fw-a__feld--breit { grid-column: span 12; }
  .fw-a__feld--schmal { grid-column: span 4; }
  .fw-a__feld--schmal + .fw-a__feld--breit { grid-column: span 8; }
}

/* ==========================================================================
   Vierte Designstufe: ein System statt vieler Einzelfaelle
   Gemessen waren sieben Rundungen, elf Schattenrezepte und zwei Titelarten
   in derselben Groesse. Hier wird das zusammengezogen: zwei Rundungen, drei
   Tiefen (siehe Variablen ganz oben) und eine klare Rangfolge der Titel.
   ========================================================================== */

/* --- Rangfolge: Abschnittstitel tragen, Kacheln beschriften ---------------
   Vorher liefen beide als h3 mit 28 px. Der Abschnittstitel bekommt jetzt
   Groesse und die gruene Linie, die auch die Popups tragen - dadurch gehoeren
   Seite und Popup sichtbar zusammen. */
.brz .fw-abschnittstitel, .fw-abschnittstitel {
  position: relative;
  margin-bottom: .8em !important;
  padding-bottom: .46em !important;
  font-size: var(--fw-t-h2) !important;
  letter-spacing: -.005em !important;
}

.brz .fw-abschnittstitel::after, .fw-abschnittstitel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58px;
  height: 3px;
  margin-left: -29px;
  border-radius: 2px;
  background: var(--fw-gruen);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .1s;
}

.brz .fw-abschnittstitel.fw-sichtbar::after,
.fw-abschnittstitel.fw-sichtbar::after { transform: scaleX(1); }

/* Titel, die links stehen, bekommen die Linie auch links */
.brz .fw-abschnittstitel:not([class*="text-lg-center"]):not([class*="text-xs-center"])::after {
  left: 0;
  margin-left: 0;
}

/* Kachelbeschriftung: eine Stufe leiser als der Abschnittstitel */
.brz .fw-kacheltitel, .fw-kacheltitel {
  font-size: var(--fw-t-h4) !important;
  font-weight: 700 !important;
  letter-spacing: .012em !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

/* --- Kacheln als Karten --------------------------------------------------
   Die sechs Bildkacheln hatten harte Ecken, waehrend alles andere auf der
   Seite gerundet ist. Ausserdem lief der Hover-Zoom ueber die Kante hinaus. */
.fw-kachel {
  border-radius: var(--fw-rund-karte);
  overflow: hidden;
  box-shadow: var(--fw-schatten-1);
  transition: box-shadow var(--fw-uebergang), transform var(--fw-uebergang);
}

.fw-kachel:hover {
  box-shadow: var(--fw-schatten-2);
  transform: translateY(-3px);
}

/* --- Neuigkeiten: eine Kartenfamilie -------------------------------------
   Die vier Bloecke trugen verschiedene Rahmenfarben (weiss, hellgrau) und
   harte Ecken - nebeneinander wirkte das zusammengewuerfelt. */
#neuigkeiten .brz-row__container > .brz-bg {
  border-radius: var(--fw-rund-feld);
  border-color: rgba(255, 255, 255, .3) !important;
  overflow: hidden;
}

#neuigkeiten .brz-row__container {
  border-radius: var(--fw-rund-feld);
  transition: transform var(--fw-uebergang), box-shadow var(--fw-uebergang);
}

#neuigkeiten .brz-row__container:hover { box-shadow: var(--fw-schatten-2); }

/* --- Popup-Titel: ueberall gleich ----------------------------------------
   Elf Popups tragen h2/h3, das Team-Popup einen Absatz mit 17 px. */
.brz-popup2 .brz-popup2__inner .fw-poptitel, .brz-popup2 .fw-poptitel {
  position: relative;
  margin-bottom: .62em !important;
  padding-bottom: .42em !important;
  font-size: var(--fw-t-h2) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.005em !important;
  color: var(--fw-gruen) !important;
  text-align: left !important;
}

.brz-popup2 .brz-popup2__inner .fw-poptitel span, .brz-popup2 .fw-poptitel span { color: inherit !important; font-size: inherit !important; }

.brz-popup2 .brz-popup2__inner .fw-poptitel::after, .brz-popup2 .fw-poptitel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 3px;
  border-radius: 2px;
  background: var(--fw-gruen);
  animation: fw-linie .6s cubic-bezier(.22, .61, .36, 1) .18s both;
}

/* --- Blocksatz raus ------------------------------------------------------
   Im Willkommens- und Simulator-Popup stand der Text im Blocksatz: bei
   schmalen Spalten reisst das Loecher zwischen die Woerter. */
.brz-popup2 [class*="text-xs-justify"],
.brz-popup2 [class*="text-lg-justify"],
.brz-popup2 [class*="text-sm-justify"],
.brz-popup2 .brz-popup2__inner p,
.brz-popup2 .brz-popup2__inner h1,
.brz-popup2 .brz-popup2__inner h2,
.brz-popup2 .brz-popup2__inner h3 {
  text-align: left;
  hyphens: none;
}

/* --- Rechtstexte: Impressum und Datenschutz ------------------------------
   Beides war eine Textwand ohne Rangfolge. */
.brz-popup2 .fw-rechtstitel {
  margin: 1.8em 0 .5em !important;
  font-size: var(--fw-t-h4) !important;
  font-weight: 700 !important;
  color: #26311c !important;
}

.brz-popup2 .fw-rechtstitel span { font-size: inherit !important; font-weight: inherit !important; }

.brz-popup2 .fw-rechtszwischen {
  margin: 1.2em 0 .2em !important;
  font-weight: 700 !important;
  color: #3b4736 !important;
}

.brz-popup2 .fw-rechtszwischen span { font-weight: inherit !important; }

/* Der erste Zwischentitel soll nicht vom Titel abruecken */
.brz-popup2 .fw-poptitel + .fw-rechtstitel { margin-top: .6em !important; }

/* Auf dem gruenen FAQ-Grund waere eine gruene Linie unsichtbar */
#faq .fw-abschnittstitel::after { background: #fff; }

/* --- Popups: Schliesskreuz bleibt in Sicht -------------------------------
   Die Karte selbst rollt (max-height 90vh). Das Kreuz lag absolut in der
   Karte und war nach dem ersten Rollen weg - jetzt klebt es oben. */
.brz-popup2 .brz-popup2__inner > .brz-container__wrap > .brz-popup2__close {
  position: sticky !important;
  float: right;
  top: 14px !important;
  right: auto !important;
  margin: 14px 14px -58px auto;
  z-index: 6;
}

/* --- "Aktion": Text lag ungeschuetzt auf dem Foto ------------------------
   Hinter der ganzen Zeile liegt ein Sparschwein-Foto; darauf standen gruene
   und dunkle Schrift, dazu ein 2 px starker gruener Rahmen. Jetzt liegt ein
   heller Schleier ueber dem Foto, der Rahmen wird zur ruhigen Karte. */
.fw-zeilengrund > .brz-bg > .brz-bg-image {
  filter: saturate(.75) contrast(.92);
}

.fw-zeilengrund > .brz-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, .93) 0%,
                              rgba(255, 255, 255, .88) 55%,
                              rgba(240, 249, 235, .9) 100%);
  pointer-events: none;
}

.fw-zeilengrund .brz-columns > .brz-bg {
  border-width: 0 !important;
}

.fw-zeilengrund .brz-column__items {
  border-radius: var(--fw-rund-feld);
}

/* Der Text steht jetzt auf hellem Grund - kein Schatten noetig */
.fw-zeilengrund .brz-column__items * { text-shadow: none !important; }

/* Im "Aktion"-Popup lag der Titel bisher auf dem Foto - dort war die
   Akzentlinie abgeschaltet. Mit dem Schleier darunter gehoert sie zurueck. */
.fw-zeilengrund .fw-poptitel::after { display: block !important; }

/* Gruene Ueberschriften auf Weiss: das helle Markengruen kommt auf 2,6:1.
   Eine Spur tiefer liest sich deutlich besser und bleibt dieselbe Farbfamilie;
   Balken, Knoepfe und Flaechen behalten das helle Gruen. */
.brz-popup2 .brz-popup2__inner .fw-poptitel { color: var(--fw-gruen-tief) !important; }

/* --- Reine Textpopups schmaler ------------------------------------------
   Impressum und Datenschutz haben kein Bild: auf 1060 px Karte stand der Text
   in einer schmalen Spalte links, rechts blieb die halbe Karte leer. */
.brz .brz-popup2--opened.fw-poptext .brz-popup2__inner > .brz-container__wrap,
.brz-popup2--opened.fw-poptext .brz-popup2__inner > .brz-container__wrap {
  flex: 0 1 min(860px, 100%) !important;
  width: min(860px, 100%) !important;
}

/* ==========================================================================
   Formulare: Kontakt und Anmeldung nach einem Muster
   Beide waren einzeln gestaltet worden und liefen auseinander: Feldhoehen
   54/46 px, zwei Rundungen, verschieden grosse Beschriftungen, im
   Kontaktformular ein schwarzes Briefsymbol, das sonst nirgends vorkommt.
   ========================================================================== */

/* --- Das Fremdkoerper-Symbol im E-Mail-Feld ------------------------------- */
.fc-form .formcraft-icon { display: none !important; }

/* --- Gleiche Feldhoehe, Rundung und Rahmen -------------------------------- */
.fc-form .fw-feld input[type="text"],
.fc-form .fw-feld input[type="email"],
.fc-form .fw-feld select,
.fw-a input:not([type="checkbox"]),
.fw-a select {
  min-height: var(--fw-feldhoehe) !important;
  border-radius: var(--fw-rund-feld) !important;
}

.fc-form textarea,
.fw-a textarea { border-radius: var(--fw-rund-feld) !important; }

/* Ruhiger Rahmen, der beim Tippen deutlich anspringt */
.fc-form .fw-feld input,
.fc-form .fw-feld textarea,
.fc-form .fw-feld select,
.fw-a input:not([type="checkbox"]),
.fw-a select,
.fw-a textarea {
  border: 1.5px solid #dde3e8 !important;
  box-shadow: var(--fw-schatten-1) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

.fc-form .fw-feld input:hover,
.fc-form .fw-feld textarea:hover,
.fw-a input:hover,
.fw-a select:hover,
.fw-a textarea:hover { border-color: #c2ccd3 !important; }

.fc-form .fw-feld input:focus,
.fc-form .fw-feld textarea:focus,
.fc-form .fw-feld select:focus,
.fw-a input:focus,
.fw-a select:focus,
.fw-a textarea:focus {
  border-color: var(--fw-gruen) !important;
  box-shadow: 0 0 0 4px rgba(96, 196, 25, .18) !important;
}

/* --- Schwebende Beschriftung: ein Mass fuer beide Formulare --------------- */
.fw-feld .fw-feldname,
.fw-a__name { font-size: var(--fw-t-text); color: #8c959d; }

.fw-feld:focus-within .fw-feldname,
.fw-feld.fw-gefuellt .fw-feldname,
.fw-a input:focus ~ .fw-a__name,
.fw-a textarea:focus ~ .fw-a__name,
.fw-a select:focus ~ .fw-a__name,
.fw-a input:not(:placeholder-shown) ~ .fw-a__name,
.fw-a textarea:not(:placeholder-shown) ~ .fw-a__name,
.fw-a select:valid ~ .fw-a__name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Auswahlfelder: die Beschriftung oben und der gewaehlte Eintrag lagen
   uebereinander, weil beide in derselben Zeile sassen. */
.fw-a select {
  padding-top: 25px !important;
  padding-bottom: 6px !important;
  line-height: 1.2 !important;
}

.fw-a__feld:has(select) .fw-a__name { top: 9px; }

/* --- Gruppen im Anmeldeformular ------------------------------------------- */
.fw-a__gruppe + .fw-a__gruppe { margin-top: 22px; }

.fw-a__gruppe h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fw-gruen-tief) !important;
}

.fw-a__gruppe h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(96, 196, 25, .35), rgba(96, 196, 25, 0));
}

/* --- Zustimmung: eigenes Haekchen statt Systemkasten ---------------------- */
.fw-a__zustimmung {
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #e6ebef;
  border-radius: var(--fw-rund-feld);
  background: #fafcf8;
}

.fw-a__zustimmung input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  border: 1.5px solid #c2ccd3;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}

.fw-a__zustimmung input[type="checkbox"]:checked {
  border-color: var(--fw-gruen);
  background: var(--fw-gruen);
}

.fw-a__zustimmung input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 2px 0 0 6px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

.fw-a__zustimmung input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(96, 196, 25, .45);
  outline-offset: 2px;
}

.fw-a__zustimmung a { color: var(--fw-gruen-tief); }

/* --- Absendeknopf: in beiden Formularen derselbe -------------------------- */
.fc-form .submit-button,
.fw-a__knopf {
  min-height: var(--fw-feldhoehe) !important;
  border-radius: var(--fw-rund-feld) !important;
  box-shadow: var(--fw-schatten-gruen) !important;
}

/* --- Fehlende Pflichtfelder zeigen sich am Feld --------------------------- */
/* FormCraft blendet die Feldrahmen mit !important aus - dort traegt der
   Schatten die Markierung, nicht der Rahmen. */
.fc-form .fw-feld.fw-fehlt input,
.fc-form .fw-feld.fw-fehlt textarea {
  box-shadow: 0 0 0 2px #d4463b, 0 0 0 5px rgba(212, 70, 59, .16) !important;
}

.fw-a__feld.fw-fehlt input,
.fw-a__feld.fw-fehlt select,
.fw-a__feld.fw-fehlt textarea,
.fw-a__zustimmung.fw-fehlt input[type="checkbox"] {
  border-color: #d4463b !important;
  box-shadow: 0 0 0 4px rgba(212, 70, 59, .14) !important;
}

/* --- Rueckmeldung nach dem Absenden --------------------------------------- */
.submit-response.fw-meldung {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--fw-rund-feld);
  border-left: 4px solid;
  font-size: var(--fw-t-text);
  line-height: 1.5;
  text-align: left;
}

.submit-response.fw-meldung--ok {
  border-color: var(--fw-gruen);
  background: #eff9e7;
  color: #234511;
}

.submit-response.fw-meldung--fehler {
  border-color: #d4463b;
  background: #fdeeec;
  color: #6d211a;
}

.submit-response.fw-meldung--laeuft {
  border-color: #9aa5ad;
  background: #f2f5f7;
  color: #3f4a52;
}

/* Auf dem dunklen Kontaktabschnitt braucht die Meldung eigene Werte */
#kontakt .submit-response.fw-meldung--ok { background: rgba(96, 196, 25, .16); color: #e7f7d9; }
#kontakt .submit-response.fw-meldung--fehler { background: rgba(212, 70, 59, .18); color: #ffdedb; }
#kontakt .submit-response.fw-meldung--laeuft { background: rgba(255, 255, 255, .1); color: #e6ebef; }

/* --- Bildspalte im Anmelde-Popup bis zur Kartenkante --------------------- */
.brz-popup2 .brz-popup2__inner .brz-columns > .brz-bg { height: 100%; }

/* --- Kontaktformular: Luft aus der Zeit vor den schwebenden Labels --------
   FormCraft haelt unter jedem Feld 28,8 px fuer die alte Beschriftungszeile
   frei, dazu 8 px am Feldrahmen - zusammen 47 px Abstand zwischen zwei
   Feldern. Seit die Beschriftung im Feld sitzt, ist das nur noch Leere. */
.fc-form .form-element-html { padding-bottom: 0 !important; }
.fc-form .field-cover { margin-bottom: 0 !important; }
.fc-form .form-element { margin-bottom: 14px !important; }
.fc-form .form-element:last-of-type { margin-bottom: 0 !important; }

/* Auswahlfelder: "Bitte auswählen" ist ein Platzhalter, kein Inhalt */
.fw-a select:has(option[value=""]:checked) { color: #98a1a8; }

/* Karte und Formular sollen gleich hoch bleiben - seit die Felder enger
   stehen, ist das Formular das kuerzere von beiden. */
#kontakt .brz-columns .brz-wrapper:has(form) form { height: 100%; }

/* Lange Adressen (www.erstehilfekurse.eu) stiessen auf dem Telefon an die
   Kartenkante. */
#neuigkeiten p, #neuigkeiten li, #neuigkeiten a { overflow-wrap: break-word; }

/* ==========================================================================
   Ein Fliesstext fuer die ganze Seite
   Gemessen: derselbe Absatz lief je nach Ort in 300, 400, 600 oder 700 -
   im selben Popup nebeneinander. Dazu drei Textfarben (60/70/79, 47/47/47,
   52/64/75) und Zeilen mit 87 bis 110 Zeichen (lesbar sind 60-75).
   Ergebnis: ein Gewicht, eine Farbe, ein Zeilenmass.
   ========================================================================== */

:root {
  --fw-tinte: #3c464f;        /* Fliesstext auf hellem Grund */
  --fw-tinte-kraeftig: #26311c;
  --fw-mass: min(66ch, 620px); /* Zeilenlaenge, ab der es muehsam wird */
}

.brz p, .brz li,
.brz-popup2 p, .brz-popup2 li,
.brz-accordion__content p,
.brz-accordion__content li {
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* Brizy verpackt jeden Schnipsel in <span class="brz-fw-lg-300"> - ohne das
   hier bliebe das Gewicht am Absatz wirkungslos. Fettes bleibt fett. */
.brz p span:not(strong):not(b),
.brz li span:not(strong):not(b),
.brz-popup2 p span:not(strong):not(b),
.brz-popup2 li span:not(strong):not(b),
.brz-accordion__content span:not(strong):not(b) {
  font-weight: inherit !important;
}

.brz p strong, .brz li strong,
.brz-popup2 p strong, .brz-popup2 li strong,
.brz-accordion__content strong { font-weight: 700 !important; }

/* Eine Textfarbe in allen Popups */
.brz-popup2 .brz-popup2__inner p,
.brz-popup2 .brz-popup2__inner li,
.brz-popup2 .brz-popup2__inner .brz-accordion__content,
.brz-popup2 .brz-popup2__inner .brz-accordion__content span:not(strong) {
  color: var(--fw-tinte) !important;
}

.brz-popup2 .brz-popup2__inner strong { color: var(--fw-tinte-kraeftig) !important; }

/* Zeilenlaenge begrenzen - im Datenschutz waren es 89 Zeichen */
.brz-popup2 .brz-popup2__inner p,
.brz-popup2 .brz-popup2__inner li { max-width: var(--fw-mass); }

/* --- FAQ-Antworten liefen aus der Reihe ---------------------------------
   22 px, Gewicht 300, Zeilenabstand 1,3 und 110 Zeichen pro Zeile - als
   einziger Text der Seite. Jetzt derselbe Fliesstext wie ueberall. */
#faq .brz-accordion__content p,
#faq .brz-accordion__content li,
#faq .brz-accordion__content span {
  font-size: var(--fw-t-text) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

#faq .brz-accordion__content p,
#faq .brz-accordion__content li { max-width: var(--fw-mass); }

/* Die Antworten in den Aufklapplisten stehen im Markup als <h6> - deshalb
   liefen sie mit 22 px als einziger Text aus der Reihe. Innerhalb einer
   geoeffneten Antwort ist alles Fliesstext. */
.brz-accordion__content h4,
.brz-accordion__content h5,
.brz-accordion__content h6 {
  font-size: var(--fw-t-text) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: normal !important;
  max-width: var(--fw-mass);
}

.brz-accordion__content h4 span,
.brz-accordion__content h5 span,
.brz-accordion__content h6 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* Die Textfarbe steht teils als style="color:rgb(0,0,0)" am span */
#faq .brz-accordion__content span,
.brz-popup2 .brz-accordion__content span { color: var(--fw-tinte) !important; }

#faq .brz-accordion__content strong,
.brz-popup2 .brz-accordion__content strong { color: var(--fw-tinte-kraeftig) !important; }

/* Auch die Absaetze in den Popup-Spalten bleiben im Lesemass */
.brz-popup2 .brz-popup2__inner .brz-rich-text { max-width: var(--fw-mass); }

/* Brizy vergibt Gewichte auch ueber eigene Elementklassen (.brz-css-xxx) -
   die sind spezifischer als eine Regel auf .brz-popup2 p. Deshalb hier
   ausdruecklich: im Popup gibt es nur noch 400 und 700. */
.brz-popup2 .brz-popup2__inner p,
.brz-popup2 .brz-popup2__inner li,
.brz-popup2 .brz-popup2__inner h5,
.brz-popup2 .brz-popup2__inner h6,
.brz-popup2 .brz-popup2__inner .brz-accordion__content h4 {
  font-weight: 400 !important;
}

.brz-popup2 .brz-popup2__inner p strong,
.brz-popup2 .brz-popup2__inner li strong,
.brz-popup2 .brz-popup2__inner h5 strong { font-weight: 700 !important; }

/* h5/h6 ausserhalb der Aufklapplisten liefen mit 22 px und Gewicht 300 -
   sie sind betonter Fliesstext, keine eigene Groessenstufe. */
.brz-popup2 .brz-popup2__inner h5,
.brz-popup2 .brz-popup2__inner h6 {
  font-size: var(--fw-t-gross) !important;
  line-height: 1.55 !important;
}

/* Aufklapp-Titel ueberall gleich: die meisten stehen als <span> (600), im
   Fahrzeuge-Popup dagegen als <p> - dort hat ihn die Fliesstextregel auf 400
   gezogen. Der Titel gewinnt jetzt in beiden Faellen. */
.brz-popup2 .brz-popup2__inner .brz-accordion__nav-title,
.brz-popup2 .brz-popup2__inner p.brz-accordion__nav-title,
#faq .brz-accordion__nav-title {
  font-size: var(--fw-t-gross) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #34404b !important;
  max-width: none;
}

.brz-popup2 .brz-popup2__inner .brz-accordion__nav-title span,
#faq .brz-accordion__nav-title span {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* ==========================================================================
   Auswahlfelder: eigenes Aufklappmenue statt Systemliste
   Die drei Auswahlfelder im Anmeldeformular oeffneten die graue Liste des
   Betriebssystems - am Rechner winzig, auf dem Telefon ein Rad am unteren
   Bildrand. Jetzt eine Liste im Stil der Seite: 46-px-Zeilen, Markenfarbe
   fuer das Gewaehlte, bedienbar mit Maus, Finger und Tastatur (fw.js).
   ========================================================================== */

.fw-select { position: relative; display: block; }

/* Das echte <select> bleibt stehen und traegt den Wert - nur unsichtbar */
.fw-select__quelle {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  clip-path: inset(50%);
}

.fw-select__knopf {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: var(--fw-feldhoehe);
  padding: 24px 44px 7px 15px;
  border: 1.5px solid #dde3e8;
  border-radius: var(--fw-rund-feld);
  background: #fff;
  box-shadow: var(--fw-schatten-1);
  color: var(--fw-tinte);
  font-family: var(--fw-schrift);
  font-size: var(--fw-t-text);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.fw-select__knopf:hover { border-color: #c2ccd3; }

.fw-select__knopf:focus-visible,
.fw-select--offen .fw-select__knopf {
  outline: none;
  border-color: var(--fw-gruen);
  box-shadow: 0 0 0 4px rgba(96, 196, 25, .18);
}

/* Solange nichts gewaehlt ist, steht dort ein Hinweis, kein Inhalt */
.fw-select--leer .fw-select__wert { color: #98a1a8; }

/* Der Pfeil dreht sich beim Aufklappen */
.fw-select__knopf::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid #6b7680;
  border-bottom: 2px solid #6b7680;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.fw-select--offen .fw-select__knopf::after {
  margin-top: 1px;
  transform: rotate(225deg);
  border-color: var(--fw-gruen-tief);
}

.fw-select__liste {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: var(--fw-rund-feld);
  box-shadow: var(--fw-schatten-2);
  animation: fw-liste .16s ease both;
}

.fw-select--hoch .fw-select__liste { top: auto; bottom: calc(100% + 6px); }

/* Offen steht die Liste in der OBERSTEN Ebene des Browsers (popover, siehe
   fw.js): FormCraft gibt jedem Feld z-index:101, jedes Feld ist damit ein
   eigener Stapelkontext - der Absendeknopf lag sonst ueber der Liste.
   Dort gilt Fensterkoordinate; left/top/width setzt fw.js, die Vorgaben des
   Browsers (inset:0, margin:auto) muessen weg. */
.fw-select__liste:popover-open { position: fixed; inset: auto; margin: 0; }

/* Rueckfallebene fuer Browser ohne popover: wenigstens das eigene Feld nach
   vorn holen, damit die Liste nicht unter dem naechsten Feld verschwindet. */
.fc-form .form-element:has(.fw-select--offen),
.fw-a__feld:has(.fw-select--offen) { z-index: 900; }

@keyframes fw-liste {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.fw-select__eintrag {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px 10px 38px;
  border-radius: 8px;
  color: var(--fw-tinte);
  font-size: var(--fw-t-text);
  line-height: 1.35;
  cursor: pointer;
}

.fw-select__eintrag--leer { color: #8c959d; }

.fw-select__eintrag--aktiv { background: #f1f8ea; }

.fw-select__eintrag--gewaehlt {
  color: var(--fw-gruen-tief);
  font-weight: 700;
}

/* Haken vor dem gewaehlten Eintrag */
.fw-select__eintrag--gewaehlt::before {
  content: "";
  position: absolute;
  left: 20px;
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid var(--fw-gruen);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

.fw-select__eintrag { position: relative; }

/* Die schwebende Beschriftung sitzt jetzt ueber dem Knopf */
.fw-feld--auswahl .fw-a__name,
.fw-feld--auswahl .fw-feldname {
  /* FormCraft setzt eigene Positionen auf Kinder von .field-cover - deshalb
     hier ausdruecklich, sonst rutscht die Beschriftung unter das Feld. */
  position: absolute !important;
  left: 16px !important;
  top: 9px !important;
  transform: none !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6c7780 !important;
  z-index: 2;
}

.fw-feld--auswahl:focus-within .fw-a__name,
.fw-feld--auswahl:focus-within .fw-feldname { color: var(--fw-gruen) !important; }

/* Fehlendes Pflichtfeld auch am Aufklappmenue zeigen */
.fw-a__feld.fw-fehlt .fw-select__knopf,
.fw-feld.fw-fehlt .fw-select__knopf {
  border-color: #d4463b !important;
  box-shadow: 0 0 0 4px rgba(212, 70, 59, .14) !important;
}

@media (prefers-reduced-motion: reduce) {
  .fw-select__liste { animation: none; }
  .fw-select__knopf::after { transition: none; }
}

/* Die gruenen Aufzaehlungspunkte der Popups gehoeren nicht in die Auswahlliste */
.brz-popup2 .brz-popup2__inner .fw-select__liste li::before { content: none; }
.brz-popup2 .brz-popup2__inner .fw-select__liste li { padding-left: 38px; max-width: none; }

/* Die Liste bekommt den Fokus per Skript - ohne das laege der Fokusrahmen
   der Seite um die ganze Liste. */
.fw-select__liste:focus, .fw-select__liste:focus-visible { outline: none; }

/* --- Popups mit Formular duerfen breiter sein ----------------------------
   Das Anmeldeformular hat 19 Felder; in der 497 px schmalen Textspalte
   konnte das Zwoelfspaltenraster seine Paare kaum nebeneinander stellen. */
.brz .brz-popup2--opened.fw-popup-formular .brz-popup2__inner > .brz-container__wrap,
.brz-popup2--opened.fw-popup-formular .brz-popup2__inner > .brz-container__wrap {
  flex: 0 1 min(1240px, 100%) !important;
  width: min(1240px, 100%) !important;
  max-width: min(1240px, 100%) !important;
}

@media (min-width: 992px) {
  .fw-popup-formular .brz-popup2__inner .brz-row > .brz-columns:first-child {
    flex: 0 0 32% !important;
    max-width: 32% !important;
  }
  .fw-popup-formular .brz-popup2__inner .brz-row > .brz-columns:last-child {
    flex: 1 1 68% !important;
    max-width: 68% !important;
  }
}

/* Der alte Pfeil des Auswahlfeldes stand neben dem neuen */
.fw-a__feld:has(.fw-select)::after { opacity: 0 !important; }

/* --- Kontaktbereich: dem Formular mehr Platz ----------------------------
   Karte und Formular teilten sich die Breite halbe/halbe; die Felder waren
   dadurch 527 px schmal, PLZ nur 117 px. */
@media (min-width: 992px) {
  #kontakt .brz-row > .brz-columns:first-child { flex: 1 1 45% !important; max-width: 45% !important; }
  #kontakt .brz-row > .brz-columns:last-child  { flex: 1 1 55% !important; max-width: 55% !important; }
}

/* PLZ und Wohnort als klares Paar statt 22 % zu 70 % */
#kontakt .fc-form [data-identifier="field6"] { width: 36% !important; }
#kontakt .fc-form [data-identifier="field7"] { width: 64% !important; }

/* Blocksatz sass tiefer als gedacht: die Aufzaehlungen im Simulator-Popup
   tragen ihn als eigene Klasse am <li>, die spezifischer ist als die
   allgemeine Regel weiter oben. */
.brz-popup2 .brz-popup2__inner [class*="text-lg-justify"],
.brz-popup2 .brz-popup2__inner [class*="text-md-justify"],
.brz-popup2 .brz-popup2__inner [class*="text-sm-justify"],
.brz-popup2 .brz-popup2__inner [class*="text-xs-justify"] {
  text-align: left !important;
}

/* ==========================================================================
   Schaltflaechen: ein Muster
   Gemessen waren vier Hoehen (40/50/59/63 px), zwei Rundungen (0 und 10),
   zwei Textfarben und zwei Groessen. Dazu stand Weiss auf dem hellen
   Markengruen bei 2,1:1 Kontrast - deshalb wirkte die Beschriftung stumpf.
   Jetzt ueberall: helles Gruen, dunkelgruene Schrift (5,4:1), 54 px, ein
   Pfeil, der aus derselben Feder stammt wie die Pfeile der Aufklappmenues.
   ========================================================================== */

.brz .brz-slick-slider .brz-btn,
.fc-form .submit-button,
.fw-a__knopf,
.fw-fuss__knopf,
.fw-einwilligung__knopf {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px !important;
  padding: 14px 30px !important;
  border: 0 !important;
  border-radius: var(--fw-rund-feld) !important;
  background: var(--fw-gruen) !important;
  color: #16290a !important;
  font-family: var(--fw-schrift);
  font-size: var(--fw-t-text) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  text-decoration: none;
  box-shadow: var(--fw-schatten-gruen) !important;
  cursor: pointer;
  transition: background-color var(--fw-uebergang), transform var(--fw-uebergang),
              box-shadow var(--fw-uebergang) !important;
}

.brz .brz-slick-slider .brz-btn *,
.fc-form .submit-button .text,
.fw-a__knopf .text { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }

.brz .brz-slick-slider .brz-btn:hover,
.fc-form .submit-button:hover,
.fw-a__knopf:hover,
.fw-fuss__knopf:hover,
.fw-einwilligung__knopf:hover {
  background: var(--fw-gruen-hell) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(96, 196, 25, .38) !important;
}

.brz .brz-slick-slider .brz-btn:active,
.fc-form .submit-button:active,
.fw-a__knopf:active { transform: translateY(0); }

/* Der Pfeil war ein Textzeichen (" →") - zu duenn, zu tief, in fremder
   Schrift. Jetzt aus zwei Linien gezeichnet, wie an den Aufklappmenues. */
.fc-form .submit-button .text::after { content: none !important; }
.fw-a__knopf .text::after { content: none !important; }

.fc-form .submit-button::after,
.fw-a__knopf::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}

.fc-form .submit-button:hover::after,
.fw-a__knopf:hover::after { transform: rotate(-45deg) translate(3px, 3px); }

/* Absendeknoepfe brauchen nicht die volle Breite - sie sollen ein Knopf
   bleiben, kein Balken. Auf dem Telefon dagegen ueber die ganze Breite. */
.fc-form .submit-button,
.fw-a__knopf {
  width: auto !important;
  min-width: 260px;
  margin-top: 4px;
}

@media (max-width: 767px) {
  .fc-form .submit-button,
  .fw-a__knopf { width: 100% !important; }
}

/* Der Ladeknopf der Karte lag bei 40 px und damit unter der Trefferschwelle */
.fw-einwilligung__knopf { min-height: 48px !important; padding: 12px 24px !important; }

@media (prefers-reduced-motion: reduce) {
  .fc-form .submit-button::after, .fw-a__knopf::after { transition: none; }
}

/* ==========================================================================
   Anmeldeformular: weniger Hoehe, mehr Uebersicht
   Mit den alten Spaltenbreiten (halb/voll) standen 19 Felder in zehn Zeilen -
   das Popup war 1478 px hoch und man scrollte durch. Die breitere Karte
   erlaubt Dreier- und Viererzeilen; dazu teilen sich Zustimmung und Knopf
   eine Zeile.
   ========================================================================== */

.fw-a__feld--zwei   { grid-column: span 2; }
.fw-a__feld--drei   { grid-column: span 3; }
.fw-a__feld--vier   { grid-column: span 4; }
.fw-a__feld--fuenf  { grid-column: span 5; }
.fw-a__feld--sieben { grid-column: span 7; }

/* Das Textfeld neben dem Auswahlfeld darf nicht hoeher werden als noetig */
.fw-a__feld--sieben textarea { min-height: 54px; height: 54px; }

.fw-a__kopf {
  margin-bottom: 14px;
  padding-bottom: 10px;
}

.fw-a__kopf span { color: #6b7680; font-size: var(--fw-t-klein); }

/* Zustimmung und Knopf nebeneinander */
.fw-a__abschluss {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.fw-a__abschluss .fw-a__zustimmung { flex: 1 1 300px; margin-top: 0; }

.fw-a__abschluss .fw-a__knopf { flex: 0 0 auto; margin-top: 0; }

/* Auf schmalen Schirmen bleibt alles untereinander und volle Breite */
@media (max-width: 860px) {
  .fw-a__feld--zwei, .fw-a__feld--drei, .fw-a__feld--vier,
  .fw-a__feld--fuenf, .fw-a__feld--sieben { grid-column: span 12; }
  /* Nr. und PLZ teilen sich eine Zeile, alles andere steht fuer sich */
  .fw-a__feld--zwei { grid-column: span 6; }
  .fw-a__abschluss { flex-direction: column; align-items: stretch; }
}

/* --- Kontaktformular: Telefon und E-Mail nebeneinander ------------------- */
#kontakt .fc-form [data-identifier="field2"],
#kontakt .fc-form [data-identifier="field3"] { width: 50% !important; }

/* Der Absendeknopf steht buendig zu den Feldern, nicht mittig */
#kontakt .fc-form .form-element-html { text-align: left !important; }

/* Lange Beschriftungen duerfen nicht aus dem Feld laufen */
.fw-a__name, .fw-feld .fw-feldname {
  max-width: calc(100% - 30px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Das Anmerkungsfeld steht schmal in der Zeile und waechst beim Schreiben */
.fw-a__feld--sieben textarea {
  transition: height .2s ease;
}

.fw-a__feld--sieben textarea:focus { height: 120px; }

/* ==========================================================================
   Kontaktbereich: Angaben neben dem Formular
   Links stand nur der graue Kartenplatzhalter; Anschrift, Telefon und
   Bürozeiten fand man erst in der Fusszeile. Jetzt stehen sie gleich neben
   dem Formular - beide Spalten in derselben Kartensprache.
   ========================================================================== */

.fw-kontaktkarte {
  margin-bottom: 18px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--fw-rund-karte);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--fw-schatten-2);
}

.fw-kontaktkarte__punkt {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.fw-kontaktkarte__punkt:first-child { padding-top: 0; }
.fw-kontaktkarte__punkt:last-child { padding-bottom: 0; border-bottom: 0; }

.fw-kontaktkarte__marke {
  color: var(--fw-gruen);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 4px;
}

.fw-kontaktkarte__wert {
  color: #eef2f4;
  font-size: var(--fw-t-text);
  line-height: 1.5;
  text-decoration: none;
}

a.fw-kontaktkarte__wert { transition: color .2s ease; }
a.fw-kontaktkarte__wert:hover { color: var(--fw-gruen); }

/* Die Karte darunter fuellt den Rest der Spalte */
.fw-anfahrt { display: flex; flex-direction: column; }
.fw-anfahrt > .brz-wrapper:has(.brz-map) { flex: 1; display: flex; }
.fw-anfahrt .brz-map, .fw-anfahrt .brz-ui-ed-map-content { flex: 1; display: flex; }
.fw-anfahrt .fw-einwilligung { flex: 1; min-height: 240px; }

@media (max-width: 991px) {
  .fw-kontaktkarte { margin-bottom: 14px; }
  .fw-anfahrt .fw-einwilligung { min-height: 220px; }
}

/* Die Karte hatte eine feste Hoehe (527 px) und machte die linke Spalte
   hoeher als das Formular - jetzt fuellt sie genau den Rest. */
.fw-anfahrt .brz-map { height: auto !important; min-height: 0 !important; }

/* Der Absendeknopf steht buendig unter den Feldern (FormCraft zentriert ihn) */
#kontakt .fc-form .align-center,
#kontakt .fc-form .submit-cover { text-align: left !important; }

/* Die beiden Spalten sollen gleich tief enden. Frueher stand hier ein festes
   Mass (320 px) - passend zur damaligen Formularhoehe. Seit im Formular ein
   Feld dazugekommen ist, endete die Karte 83 px zu frueh und links klaffte
   ein Loch. Jetzt fuellt der Platzhalter, was nach der Kontaktkarte uebrig
   bleibt: das stimmt auch, wenn das Formular sich wieder aendert.

   Die Karte wird dafuer aus dem Hoehenspiel genommen (position:absolute im
   Rahmen). Sonst bestimmt IHRE Eigenhoehe (527 px aus Brizy) die Zeile, die
   linke Spalte wird 835 px hoch, und das Formular haengt 125 px darueber
   statt daneben zu stehen. */
.fw-anfahrt > .brz-wrapper:has(.brz-map) {
  flex: 1 1 auto;
  position: relative;
  /* Brizy setzt auf jedem .brz-wrapper min-height:1px. Ohne !important
     faellt der Rahmen auf 1 px zusammen, sobald sein Inhalt (Platzhalter
     bzw. geladene Karte) absolut positioniert ist und keine Hoehe mehr
     beisteuert - die Karte war dann unsichtbar. */
  min-height: 260px !important;
}

.fw-anfahrt .brz-map,
.fw-anfahrt .fw-einwilligung,
.fw-anfahrt .brz-ui-ed-map-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Die geladene Karte ist ein <iframe> - ein ersetztes Element. Bei ihm
   bedeutet height:auto nicht "aus den Kanten rechnen", sondern die
   Eigenhoehe 150 px. Deshalb hier ausdruecklich 100 %. */
.fw-anfahrt iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#kontakt .brz-columns .brz-wrapper:has(form) { flex: 0 0 auto; }

@media (max-width: 991px) {
  .fw-anfahrt .fw-einwilligung,
  .fw-anfahrt .brz-map,
  .fw-anfahrt .brz-ui-ed-map-content { height: 260px !important; min-height: 260px !important; }
}

/* Auf dem Telefon steht jedes Feld fuer sich - nebeneinander waere PLZ
   87 px breit. Und ohne den Rest der alten Spaltenluecke stehen die Felder
   buendig in der Karte. */
@media (max-width: 767px) {
  #kontakt .fc-form .form-element,
  #kontakt .fc-form [data-identifier] { width: 100% !important; }
  .fc-form .form-element-html { padding-right: 0 !important; }
}

/* Notnagel fuer schmale Auswahlfelder: lieber kuerzen als ueberlappen */
.fw-select__knopf { min-width: 0; }
.fw-select__wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Neuigkeiten: aus vier Textkaesten werden vier Karten
   Bürozeiten, Theorietermine, Aktion und Erste Hilfe standen als Fliesstext
   auf Fotos - Termine als Absaetze mit "!! freie Plätze !!", Zeiten in
   wechselnder Schreibweise, alles gleich gross und schwer zu ueberfliegen.
   Jetzt: Zeilen mit Datum, Zeit und Zustand (fw.js baut sie aus demselben
   Text auf).
   ========================================================================== */

/* Die Fotos hinter den Kaesten machten den Text unruhig - sie bleiben als
   leiser Grund erhalten. */
#neuigkeiten .fw-infoblock > .brz-bg > .brz-bg-image { opacity: .14; }

#neuigkeiten .fw-infoblock > .brz-bg > .brz-bg-color { opacity: .55 !important; }

.fw-info {
  width: 100%;
  padding: clamp(18px, 2vw, 26px);
  color: #eef2f4;
}

.fw-info__marke {
  color: var(--fw-gruen);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brz .fw-info__titel {
  margin: 6px 0 14px !important;
  color: #fff !important;
  font-size: var(--fw-t-h4) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Ist heute offen? Das ist die haeufigste Frage an eine Fahrschule. */
.fw-info__stand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: var(--fw-t-klein);
  font-weight: 700;
}

.fw-info__stand::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.fw-info__stand--auf { background: rgba(96, 196, 25, .18); color: #a9e87a; }
.fw-info__stand--zu  { background: rgba(255, 255, 255, .1); color: #cfd6db; }

.fw-info__zeilen,
.fw-info__termine { margin: 0; padding: 0; list-style: none; }

.fw-info__zeile,
.fw-info__termin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fw-t-text);
  line-height: 1.4;
}

.fw-info__zeile:last-child,
.fw-info__termin:last-child { border-bottom: 0; }

.fw-info__wort { flex: 1; color: #dfe5e9; }
.fw-info__wert { font-weight: 700; white-space: nowrap; }

.fw-info__zeile--heute .fw-info__wort,
.fw-info__zeile--heute .fw-info__wert { color: #fff; }

/* Termine: Monat schmal, Zeitraum breit, Uhrzeit, Zustand */
.fw-info__monat {
  flex: 0 0 46px;
  color: var(--fw-gruen);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fw-t-klein);
}

.fw-info__spanne { flex: 1 1 auto; white-space: nowrap; }

.fw-info__zeit {
  flex: 0 0 auto;
  color: #c8d0d6;
  font-size: var(--fw-t-klein);
  white-space: nowrap;
}

.fw-chip {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.fw-chip--frei { background: rgba(96, 196, 25, .2); color: #a9e87a; }
.fw-chip--voll { background: rgba(255, 255, 255, .1); color: #b9c2c9; }

.fw-info__hinweis {
  margin: 14px 0 0 !important;
  color: #c3ccd2 !important;
  font-size: var(--fw-t-klein) !important;
  line-height: 1.5 !important;
}

.fw-info__fuss { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.fw-info__knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--fw-rund-feld);
  color: #fff !important;
  font-size: var(--fw-t-klein);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--fw-uebergang), border-color var(--fw-uebergang);
}

.fw-info__knopf:hover { background: rgba(96, 196, 25, .18); border-color: var(--fw-gruen); }

/* Die Aktion ist ein Aufruf - sie bekommt den Pfeil und reagiert als Ganzes */
.fw-info--aktion { position: relative; padding-right: 56px; }

.fw-info__pfeil {
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 2.5px solid var(--fw-gruen);
  border-bottom: 2.5px solid var(--fw-gruen);
  transform: rotate(-45deg);
  transition: transform var(--fw-uebergang);
}

#neuigkeiten .fw-infoblock:hover .fw-info__pfeil { transform: rotate(-45deg) translate(3px, 3px); }

/* Auf schmalen Karten passen Datum, Uhrzeit und Zustand nicht in eine Zeile -
   der Zustand rutschte heraus. Bis 991 px daher zwei Zeilen je Termin: auf
   dem Tablet steht der Block noch zweispaltig und ist genauso eng. */
@media (max-width: 991px) {
  .fw-info__termin {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "monat spanne spanne"
      "monat zeit   chip";
    gap: 4px 10px;
    align-items: center;
  }
  .fw-info__monat  { grid-area: monat; align-self: start; padding-top: 2px; }
  .fw-info__spanne { grid-area: spanne; }
  .fw-info__zeit   { grid-area: zeit; }
  .fw-chip         { grid-area: chip; justify-self: end; }
  .fw-info__stand  { align-items: flex-start; }
  .fw-info__stand::before { margin-top: 7px; }
}

/* Die Zahlen der Slider-Punkte liefen als einzige Bedienelemente mit 16 px */
.brz-slick-slider__dots li button { font-size: var(--fw-t-klein); }

/* Auf dem Telefon brauchen die Slider-Punkte 44 px Trefferflaeche - der
   sichtbare Punkt darf deshalb trotzdem klein bleiben. */
@media (max-width: 767px) {
  .brz .brz-slick-slider .brz-slick-slider__dots li button,
  .brz-slick-slider__dots li button {
    position: relative;
    background: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
  }

  .brz-slick-slider__dots li button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: rgba(255, 255, 255, .6);
    border: 2px solid #fff;
  }

  /* Der aktive Punkt bekommt seine Flaeche von Brizy - auch die muss weg,
     sonst bleibt er ein 43-px-Quadrat. */
  .brz .brz-slick-slider .brz-slick-slider__dots li.slick-active button,
  .brz-slick-slider__dots li.slick-active button {
    background: transparent !important;
    border-color: transparent !important;
  }

  .brz-slick-slider__dots li.slick-active button::before { background: #fff; }
}

/* ==========================================================================
   Auswahl und Markierung: nichts Fremdes mehr
   Im Aufklappmenü und in den Feldern kam die Markierung des Browsers durch
   (blauviolett) - jetzt überall das helle Markengrün mit weisser Schrift.
   ========================================================================== */

.fw-select__eintrag--aktiv,
.fw-select__eintrag--gewaehlt {
  background: var(--fw-gruen);
  color: #fff;
}

.fw-select__eintrag--gewaehlt::before { border-color: #fff; }

/* Falls doch einmal die Systemliste erscheint (alte Browser, kein JS) */
.fw-a select option:checked,
.fc-form select option:checked { background: var(--fw-gruen); color: #fff; }

/* Textmarkierung mit der Maus */
::selection { background: rgba(96, 196, 25, .85); color: #fff; }

/* Der Antippen-Blitz auf dem Telefon war blaugrau */
html { -webkit-tap-highlight-color: rgba(96, 196, 25, .25); }

/* Vom Browser ausgefüllte Felder bekamen dessen eigenen Farbton */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--fw-tinte) !important;
  caret-color: var(--fw-tinte);
}

/* ==========================================================================
   Popups: das Foto bleibt, der Text rollt
   Bisher rollte die ganze Karte - dadurch war die Bildspalte so hoch wie der
   Inhalt: bei "Klassen" (1083 px) ein langer Streifen, bei "Bürozeiten"
   (379 px) ein Briefmarkenbild. Jetzt hat die Karte eine feste Hoehe, das
   Foto steht ruhig daneben und nur der Text bewegt sich.
   ========================================================================== */

@media (min-width: 992px) {
  /* Die Karte rollt als Ganzes - dadurch wirkt das Mausrad ueberall, auch
     ueber dem Foto, und es gibt nur einen Rollbalken. Damit das Foto trotzdem
     stehen bleibt, klebt seine Spalte oben. Ihre Hoehe setzt fw.js beim
     Oeffnen auf den sichtbaren Ausschnitt der Karte.
     WICHTIG: die Karte darf kein Flex-Container sein - sonst wird aus dem
     Schliesskreuz (float) ein Flex-Element und schiebt den Inhalt zur Seite. */
  /* nowrap ist noetig: sobald die Bildspalte eine feste Hoehe bekommt
     (fuer das Kleben), bricht die Zeile sonst um und die Textspalte rutscht
     unter das Foto. */
  .brz-popup2 .brz-popup2__inner .brz-row {
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .brz-popup2 .brz-popup2__inner .brz-row > .brz-columns:first-child:has(.fw-bildoverlay):not(.fw-textaufbild) {
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 90vh;
  }

  .brz-popup2 .brz-popup2__inner .brz-row > .brz-columns:first-child:has(.fw-bildoverlay):not(.fw-textaufbild) .brz-bg,
  .brz-popup2 .brz-popup2__inner .brz-row > .brz-columns:first-child:has(.fw-bildoverlay):not(.fw-textaufbild) .brz-bg-image {
    height: 100% !important;
  }
}

/* Auf dem Telefon steht das Foto oben und bekommt ein festes Mass, statt je
   nach Textmenge zu wachsen oder zu schrumpfen. */
@media (max-width: 991px) {
  /* NICHT auf .fw-textaufbild anwenden: im Willkommens- und im Aktion-Popup
     steht der TEXT mit auf dem Bild - eine feste Hoehe von 190 px hat ihn
     dort auf 6 px zusammengedrueckt, die Zeilen lagen uebereinander.
     Achtung: die Zeile ist ein Flex-Container in Zeilenrichtung - ein
     flex-basis von 180px waere die BREITE. Hoehe getrennt setzen. */
  .brz-popup2 .brz-popup2__inner .brz-row > .brz-columns:first-child:has(.fw-bildoverlay):not(.fw-textaufbild) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
  }

  .brz-popup2 .brz-popup2__inner .brz-row > .brz-columns:first-child:has(.fw-bildoverlay):not(.fw-textaufbild) .brz-bg,
  .brz-popup2 .brz-popup2__inner .brz-row > .brz-columns:first-child:has(.fw-bildoverlay):not(.fw-textaufbild) .brz-bg-image {
    height: 100% !important;
  }

  /* Ist ein Popup offen, wuerde der Burger auf dem Schliesskreuz liegen */
  body:has(.brz-popup2--opened) .fw-burger { display: none; }
}

/* ==========================================================================
   Burger-Knopf
   Das Menuesymbol von Brizy ist 25x1 px gross und steht auf
   visibility:hidden - auf dem Telefon gab es also keinen sichtbaren Weg ins
   Menue. Der eigene Knopf liegt fest oben rechts und bleibt beim Scrollen da.
   ========================================================================== */

.fw-burger {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1085;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--fw-rund-feld);
  background: rgba(28, 33, 30, .82);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color var(--fw-uebergang), transform var(--fw-uebergang);
}

@media (max-width: 991px) { .fw-burger { display: flex; } }

.fw-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}

@media (hover: hover) {
  .fw-burger:hover { background: rgba(96, 196, 25, .9); }
}

.fw-burger:focus-visible {
  outline: 3px solid var(--fw-gruen);
  outline-offset: 2px;
}

/* offen: aus den drei Linien wird ein Kreuz */
.fw-burger--offen span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fw-burger--offen span:nth-child(2) { opacity: 0; }
.fw-burger--offen span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .fw-burger span { transition: none; }
}

/* ==========================================================================
   Mobil: Kopfzeile, Leiste und Schlagzeile ruhiger
   ========================================================================== */

/* Die Zeile "fair | transparent | günstig | schnell" ist eine Beizeile,
   keine Ueberschrift - sie stand auf der groessten Stufe. */
.brz .fw-schlagzeile,
.fw-schlagzeile,
.fw-schlagzeile * {
  /* War als einziger Text der Seite im leichten Schnitt (300) und eine Stufe
     zu gross - jetzt auf der Stufe der Zwischentitel und im Textgewicht. */
  font-size: var(--fw-t-h4) !important;
  font-weight: 400 !important;
}

@media (max-width: 767px) {
  .brz .fw-schlagzeile,
  .fw-schlagzeile,
  .fw-schlagzeile * { font-size: var(--fw-t-gross) !important; }

  /* Alle drei Felder der Leiste gleich gross - "Impressionen" ist das
     laengste Wort und stand dadurch am engsten. */
  .fw-blickleiste span,
  .fw-blickleiste em,
  .fw-blickleiste a,
  .fw-blickleiste p { font-size: var(--fw-t-gross) !important; }

  .fw-blickleiste .brz-columns { padding-inline: 6px; }

  /* Hero: kraeftige Zeile mit Luft statt gedraengter Grossbuchstaben */
  .brz-slick-slider .slick-slide h1,
  .brz-slick-slider .slick-slide h2 {
    font-size: 30px !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  }

  /* Damit der Knopf nicht an der Zeile klebt */
  .brz-slick-slider .slick-slide .brz-btn { margin-top: 6px; }
}

/* Im Popup faerbt die allgemeine Textregel auch die Listeneintraege -
   die Markierung braucht daher dieselbe Durchsetzungskraft. */
.brz-popup2 .brz-popup2__inner .fw-select__eintrag--aktiv,
.brz-popup2 .brz-popup2__inner .fw-select__eintrag--gewaehlt {
  background: var(--fw-gruen);
  color: #fff !important;
}

.brz-popup2 .brz-popup2__inner .fw-select__eintrag--gewaehlt::before { border-color: #fff; }

/* ==========================================================================
   Senkrechter Rhythmus der Startseite
   Gemessen: die Abschnitte hatten Innenabstaende von 0/0 bis 180/210 px, dazu
   423 px (Rechner) bzw. 1346 px (Telefon!) an Brizy-Platzhaltern - allein acht
   Stueck zu 167 px auf dem Telefon. Dadurch stand alles beliebig weit
   auseinander. Jetzt ein Mass fuer alle Inhaltsabschnitte.
   ========================================================================== */

:root { --fw-luft: 80px; }

@media (max-width: 767px) { :root { --fw-luft: 42px; } }

#neuigkeiten > .brz-section__content,
#faq > .brz-section__content,
#impressionen-8 > .brz-section__content,
#impressionen > .brz-section__content,
#kontakt > .brz-section__content {
  padding-top: var(--fw-luft) !important;
  padding-bottom: var(--fw-luft) !important;
}

/* Die vier Kachelzeilen sind EIN Raster - zwischen ihnen genuegt die
   Rasterluecke, die Luft davor und danach tragen die Nachbarabschnitte. */
#buerozeiten > .brz-section__content,
#team > .brz-section__content,
#anmeldung > .brz-section__content,
#simulator > .brz-section__content {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Waagerecht standen die Kacheln 3 px auseinander, senkrecht 14 - die
   Rasterluecke gehoert an die Zeile, nicht als Rand an die Kachel: mit
   margin-inline plus 50 % Breite bricht die zweite Kachel um. */
#buerozeiten .brz-row,
#team .brz-row,
#anmeldung .brz-row,
#simulator .brz-row { gap: 10px; }

.brz .fw-kachel { flex: 1 1 calc(50% - 5px) !important; }

#buerozeiten { padding-top: var(--fw-luft); }
#simulator { padding-bottom: calc(var(--fw-luft) - 5px); }

/* Die Platzhalter von Brizy: auf dem Telefon 167 px hohe Leerflaechen. */
#neuigkeiten .brz-spacer,
#buerozeiten .brz-spacer,
#team .brz-spacer,
#anmeldung .brz-spacer,
#simulator .brz-spacer,
#faq .brz-spacer,
#impressionen .brz-spacer,
#impressionen-8 .brz-spacer,
#kontakt .brz-spacer,
.fw-blickleiste .brz-spacer { height: 0 !important; min-height: 0 !important; }

/* Die Leiste "alles im Blick" traegt ihre Hoehe selbst */
.fw-blickleiste > .brz-section__content { padding-block: 0 !important; }

/* ==========================================================================
   Impressionen: auf dem Telefon zwei Spalten
   16 Bilder untereinander ergaben 4528 px - man scrollte an einer Bildersaeule
   entlang. Zwei Spalten halbieren das, ohne dass die Bilder zu klein werden.
   ========================================================================== */

@media (max-width: 767px) {
  /* Die Galerie ist ein eigener Flex-Behaelter (.brz-image__gallery-wrapper)
     mit 16 Kacheln - dort muss die Zweispaltigkeit hin, nicht an die
     Spalte darueber. */
  #impressionen-8 .brz-image__gallery-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
  }

  #impressionen-8 .brz-image__gallery-item {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    margin: 0 !important;
  }

  #impressionen-8 .brz-image,
  #impressionen-8 .brz-image__wrapper,
  #impressionen-8 .brz-image picture,
  #impressionen-8 .brz-image img {
    width: 100% !important;
    height: auto !important;
  }
}

/* FAQ: die Gruppen standen weit auseinander (31 px ueber jedem Titel plus
   14 px darunter) - auf dem Telefon summiert sich das. */
#faq .brz-accordion__item { margin-bottom: 8px !important; }

@media (max-width: 767px) {
  #faq h3, #faq h4 { margin-top: 24px !important; margin-bottom: 10px !important; }
  #faq .brz-accordion__item { margin-bottom: 6px !important; }
  #faq .brz-accordion__item > .brz-accordion__nav { padding: 10px 14px !important; }
}

/* Die Kacheln bekamen ihre Hoehe von einem Brizy-Platzhalter - der ist jetzt
   auf 0. Die Hoehe steht deshalb hier, gleich fuer alle sechs. */
.brz .fw-kachel,
.brz .fw-kachel > .brz-column__items { min-height: 150px !important; }

@media (max-width: 991px) {
  .brz .fw-kachel,
  .brz .fw-kachel > .brz-column__items { min-height: 120px !important; }
}

@media (max-width: 767px) {
  .brz .fw-kachel,
  .brz .fw-kachel > .brz-column__items { min-height: 104px !important; }
}

/* Auf dem Telefon liefen die Kacheln bis an den Bildschirmrand, waehrend alle
   anderen Bloecke 16 px Rand haben - jetzt stehen sie in derselben Flucht. */
@media (max-width: 767px) {
  .brz .fw-kachel { flex: 1 1 100% !important; }
  #buerozeiten .brz-row,
  #team .brz-row,
  #anmeldung .brz-row,
  #simulator .brz-row { padding-inline: 16px; }
}

/* ==========================================================================
   Kein Fremd-Lila mehr auf Knoepfen
   Das WordPress-Starttheme setzt fuer JEDEN Knopf
   `button:hover { background-color: #6b6baf }` - ein Blauviolett, das mit der
   Seite nichts zu tun hat. Es griff ueberall dort, wo wir zwar Rahmen und
   Schrift, aber keinen Hintergrund fuer den Zustand gesetzt hatten.
   Deshalb hier fuer alle eigenen Knoepfe alle Zustaende ausdruecklich.
   ========================================================================== */

.fw-select__knopf,
.fw-select__knopf:hover,
.fw-select__knopf:focus,
.fw-select__knopf:focus-visible,
.fw-select__knopf:active {
  background: #fff !important;
  color: var(--fw-tinte) !important;
}

.fw-select__knopf:hover { border-color: #c2ccd3 !important; }

.fw-select--offen .fw-select__knopf,
.fw-select__knopf:focus-visible { border-color: var(--fw-gruen) !important; }

.fw-burger,
.fw-burger:focus,
.fw-burger:focus-visible,
.fw-burger:active {
  background: rgba(28, 33, 30, .82) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

.fw-burger--offen,
.fw-burger--offen:focus { background: rgba(28, 33, 30, .92) !important; }

@media (hover: hover) {
  .fw-burger:hover { background: rgba(96, 196, 25, .9) !important; }
}

.fw-einwilligung__knopf,
.fw-einwilligung__knopf:focus,
.fw-einwilligung__knopf:active {
  background: var(--fw-gruen) !important;
  border-color: var(--fw-gruen) !important;
  color: #16290a !important;
}

.fw-einwilligung__knopf:hover { background: var(--fw-gruen-hell) !important; }

/* Auch die Punkte unter dem Hero sind Knoepfe */
.brz-slick-slider__dots li button,
.brz-slick-slider__dots li button:hover,
.brz-slick-slider__dots li button:focus,
.brz-slick-slider__dots li button:active {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, .85) !important;
}

.brz-slick-slider__dots li.slick-active button { background-color: #fff !important; }

@media (max-width: 767px) {
  .brz .brz-slick-slider .brz-slick-slider__dots li.slick-active button {
    background-color: transparent !important;
  }
}

/* Popups mit Reitern brauchen Platz: links die Titel, rechts der Inhalt */
.brz .brz-popup2--opened.fw-popup-reiter .brz-popup2__inner > .brz-container__wrap,
.brz-popup2--opened.fw-popup-reiter .brz-popup2__inner > .brz-container__wrap {
  flex: 0 1 min(1240px, 100%) !important;
  width: min(1240px, 100%) !important;
  max-width: min(1240px, 100%) !important;
}

@media (min-width: 992px) {
  .fw-popup-reiter .brz-popup2__inner .brz-row > .brz-columns:first-child {
    flex: 0 0 32% !important;
    max-width: 32% !important;
  }
  .fw-popup-reiter .brz-popup2__inner .brz-row > .brz-columns:last-child {
    flex: 1 1 68% !important;
    max-width: 68% !important;
  }
}

/* Der Zusatz aus der Klammer steht ueber dem Inhalt */
.brz-popup2 .brz-popup2__inner .fw-tabs__zusatz {
  margin: 0 0 14px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9edf0;
  color: var(--fw-gruen-tief) !important;
  font-size: var(--fw-t-gross) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* ==========================================================================
   Bouncy Content Tabs in den Farben dieser Seite
   Aufbau, Masse und Bewegung kommen unveraendert von Osmo
   (assets/css/bouncy-tabs.css). Hier nur, was die Vorlage nicht wissen kann:
   Markenfarben, Lato statt "Haffer" und die Einbettung ins Popup.
   ========================================================================== */

.brz-popup2 .fw-tabs { width: 100%; gap: clamp(18px, 2.2vw, 30px); align-items: stretch; }

/* Die Leiste: heller Grund, Marker in Markengruen */
.brz-popup2 .fw-tabs .bouncy-tabs__nav {
  background-color: #eef2f4;
  align-self: flex-start;
  max-width: 100%;
}

.brz-popup2 .fw-tabs .bouncy-tabs__indicator {
  background-color: var(--fw-gruen);
  box-shadow: var(--fw-schatten-gruen);
}

.brz-popup2 .fw-tabs .bouncy-tabs__ghost { background-color: rgba(96, 196, 25, .14); }

.brz-popup2 .fw-tabs .bouncy-tabs__button,
.brz-popup2 .fw-tabs .bouncy-tabs__button:hover,
.brz-popup2 .fw-tabs .bouncy-tabs__button:focus,
.brz-popup2 .fw-tabs .bouncy-tabs__button:active {
  background-color: transparent !important;
  border: 0 !important;
  color: #55636e !important;
  font-family: var(--fw-schrift);
  font-size: var(--fw-t-text);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.brz-popup2 .fw-tabs [data-bouncy-tabs-button][data-active],
.brz-popup2 .fw-tabs [data-bouncy-tabs-button][data-active]:hover {
  color: #fff !important;
}

.brz-popup2 .fw-tabs .bouncy-tabs__button:focus-visible {
  outline: 3px solid var(--fw-gruen);
  outline-offset: 2px;
}

/* Die Karte traegt schon die Popup-Flaeche - hier genuegt ein ruhiger Rahmen */
.brz-popup2 .fw-tabs .bouncy-tabs__collection {
  background-color: #fafcfd;
  border: 1px solid #e6ecef;
  border-radius: var(--fw-rund-karte);
  padding: clamp(18px, 2.2vw, 28px);
}

/* Die Vorlage stellt Text und Bild nebeneinander; unsere Inhalte bringen ihr
   eigenes Layout mit (Bilder, Listen, Absaetze) - deshalb einspaltig. */
.brz-popup2 .fw-tabs .bouncy-tabs__item {
  display: block;
  gap: 0;
}

.brz-popup2 .fw-tabs .bouncy-tabs__item .brz-accordion__item-content { padding: 0 !important; }

.brz-popup2 .fw-tabs .bouncy-tabs__item .brz-image { margin-bottom: 12px; }

@media (max-width: 767px) {
  .brz-popup2 .fw-tabs .bouncy-tabs__nav { justify-content: flex-start; }
  .brz-popup2 .fw-tabs .bouncy-tabs__collection { padding: 16px; }
}

/* Ausgebuchte Kurse: sichtbar, aber nicht waehlbar */
.fw-select__eintrag--aus {
  color: #9aa4ac !important;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(154, 164, 172, .6);
}

.fw-select__eintrag--aus.fw-select__eintrag--aktiv { background: transparent; }

/* ==========================================================================
   Bloecke auf der Startseite: sichtbar anwaehlbar
   Bisher passierte beim Ueberfahren fast nichts - man sah nicht, was ein
   Block ist und was davon klickbar ist. Jetzt hebt sich jeder Block ab, und
   die anklickbaren bekommen zusaetzlich die Markenfarbe.
   ========================================================================== */

/* Neuigkeiten-Karten */
#neuigkeiten .fw-infoblock > .brz-bg {
  transition: border-color var(--fw-uebergang), box-shadow var(--fw-uebergang);
}

#neuigkeiten .fw-infoblock:hover > .brz-bg {
  border-color: rgba(96, 196, 25, .55) !important;
}

#neuigkeiten .brz-row__container:hover { transform: translateY(-2px); }

/* Anklickbare Bloecke zeigen es auch am Zeiger */
#neuigkeiten .brz-row__container:has(> a.brz-link-container) { cursor: pointer; }

#neuigkeiten .brz-row__container:has(> a.brz-link-container):hover > .brz-bg {
  border-color: var(--fw-gruen) !important;
  box-shadow: 0 0 0 2px rgba(96, 196, 25, .35), var(--fw-schatten-2);
}

/* Kacheln: gruener Rahmen statt nur Schatten */
.brz .fw-kachel {
  cursor: pointer;
  outline: 0 solid rgba(96, 196, 25, 0);
  transition: box-shadow var(--fw-uebergang), transform var(--fw-uebergang),
              outline-color var(--fw-uebergang), outline-width var(--fw-uebergang);
}

.brz .fw-kachel:hover {
  outline: 3px solid var(--fw-gruen);
  outline-offset: -3px;
}

/* Tastaturbedienung: derselbe Zustand wie beim Ueberfahren */
.brz .fw-kachel:focus-within {
  outline: 3px solid var(--fw-gruen);
  outline-offset: -3px;
  box-shadow: var(--fw-schatten-2);
}

/* FAQ-Zeilen und Kontaktkarten */
#faq .brz-accordion__item:hover { border-color: rgba(96, 196, 25, .5) !important; }

.fw-kontaktkarte { transition: border-color var(--fw-uebergang); }
.fw-kontaktkarte:hover { border-color: rgba(96, 196, 25, .4); }

/* Galeriebilder: leichtes Anheben, damit sie als Einheit lesbar sind */
#impressionen-8 .brz-image__gallery-item {
  transition: transform var(--fw-uebergang), box-shadow var(--fw-uebergang);
}

#impressionen-8 .brz-image__gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--fw-schatten-2);
}

@media (prefers-reduced-motion: reduce) {
  #neuigkeiten .brz-row__container:hover,
  #impressionen-8 .brz-image__gallery-item:hover { transform: none; }
}

/* --- Aktion-Popup: Bild und Text als Paar ------------------------------- */
.fw-zeilengrund .brz-image { max-width: 300px; }

.fw-zeilengrund .brz-column__items { justify-content: center; }

/* ==========================================================================
   Designdurchgang 01.08.2026 (Prüfbericht)
   Zwölf gemessene Befunde, hier die umgesetzten.
   ========================================================================== */

/* --- 1. Fahrzeuge-Popup: graue Platzhalterkaesten -----------------------
   Vier der elf Reiter zeigen einen Brizy-Platzhalter (615x410 hellgrau mit
   Bildsymbol) statt eines Fotos - beim Oeffnen sieht man als Erstes ein
   leeres Kaestchen. Bis echte Fahrzeugfotos da sind: ausblenden. */
.brz-shortcode__placeholder,
.brz-popup2 .brz-shortcode__placeholder { display: none !important; }

/* --- 3. Hero-Knopf: Gruen auf Gruen (1,25:1) ---------------------------
   Auf zwei von drei Bildern liegt der Knopf auf gruenem Grund und war kaum
   zu erkennen. Dunkelgruen mit weisser Schrift steht auf jedem Bild. */
.brz .brz-slick-slider .brz-btn {
  background: #16290a !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3) !important;
}

.brz .brz-slick-slider .brz-btn:hover {
  background: #234210 !important;
  color: #fff !important;
}

/* --- 4. Weiss auf Markengruen (2,0-2,2:1) -------------------------------
   Betrifft die Beizeile, die Leiste "alles im Blick" und den ganzen
   FAQ-Bereich - zusammen rund 2900 px Seitenhoehe. Dunkelgruen darauf
   kommt auf 7:1 und bleibt in der Markenfamilie. */
.fw-schlagzeile,
.fw-schlagzeile *,
.fw-blickleiste span,
.fw-blickleiste em,
.fw-blickleiste a,
.fw-blickleiste p { color: #16290a !important; }

.fw-blickleiste .brz-columns + .brz-columns::before {
  background: linear-gradient(to bottom, rgba(22, 41, 10, 0),
              rgba(22, 41, 10, .35) 30%, rgba(22, 41, 10, .35) 70%,
              rgba(22, 41, 10, 0)) !important;
}

#faq .fw-abschnittstitel,
#faq .fw-abschnittstitel span,
#faq h3, #faq h3 span,
#faq h4, #faq h4 span { color: #16290a !important; }

#faq .fw-abschnittstitel::after { background: #16290a; }

/* --- 6. FAQ: jede dritte Luecke war 33 statt 25 px --------------------- */
#faq .brz-accordion { margin-bottom: 0 !important; }
#faq .brz-accordion__item { margin-bottom: 9px !important; }
#faq .brz-wrapper:has(.brz-accordion) { margin: 0 !important; }

/* --- 7. Kachelblock lag auf drei Hintergruenden ------------------------
   Oben 80 px Weiss, dann Hellgrau nur hinter dem Raster, unten Fast-Weiss:
   zwei sichtbare Naehte quer durch den Abschnitt. */
#buerozeiten, #team, #anmeldung, #simulator,
#buerozeiten > .brz-section__content,
#team > .brz-section__content,
#anmeldung > .brz-section__content,
#simulator > .brz-section__content { background: #eef0f2 !important; }

/* --- 8. Kachelbeschriftungen: 4,3 bis 8,1:1 ---------------------------- */
/* Brizy setzt auf dem Bild eine eigene Filterkette (saturate .65) - ohne
   gleiche Spezifitaet bleibt eine zusaetzliche Helligkeitsbremse wirkungslos.
   Multiplikativ trifft sie helle Fotos staerker: genau das gleicht die
   Kacheln an (gemessen 4,5 bis 8,4:1 -> enger). */
.brz .fw-kachel .brz-bg-image { filter: saturate(.65) brightness(.74) !important; }

/* Die Beschriftung sitzt mittig auf der Kachel - ein Verlauf von unten
   hilft ihr dort nicht. Ein gleichmaessiger Schleier bringt alle sechs auf
   dasselbe Gewicht (gemessen vorher 4,3 bis 8,1:1). */
.fw-kachel > .brz-bg > .brz-bg-color {
  background: rgba(0, 0, 0, .38) !important;
  opacity: 1 !important;
}

.fw-kachel:hover > .brz-bg > .brz-bg-color { background: rgba(0, 0, 0, .26) !important; }

/* --- 10. "alles im Blick": ein leeres fuenftes Feld --------------------- */
/* Der Trenner am rechten Rand gehoert zu einem Feld ohne Inhalt.
   ACHTUNG: nicht ueber :has(.brz-rich-text) filtern - "Fahrwerk" und
   "Simulator" sind Textlinks (a.brz-btn) und verschwaenden sonst. */
.fw-blickleiste .brz-columns:last-child::before { content: none; }

/* --- 12. Impressionen: das Video sprengt das Raster --------------------- */
#impressionen-8 .brz-image__gallery-item:last-child { margin-top: 0 !important; }

/* Die Bilder sind schwarzweiss - beim Ueberfahren kommt die Farbe zurueck */
#impressionen-8 .brz-image img,
#impressionen-8 .brz-image picture { transition: filter .35s ease; }
#impressionen-8 .brz-image__gallery-item:hover img,
#impressionen-8 .brz-image__gallery-item:hover picture { filter: none !important; }

/* --- 11. Popups: Hinweis, dass der Text weitergeht --------------------- */
.brz-popup2__inner > .brz-container__wrap::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  display: block;
  height: 44px;
  margin-top: -44px;
  background: linear-gradient(to top, #fff 15%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #impressionen-8 .brz-image img { transition: none; }
}

/* --- Rundungen: die Reiter der Vorlage sind vollrund (100em) -------------
   Alles andere auf der Seite hat 10 px (Bedienelemente) bzw. 16 px (Karten).
   Damit die Reiter dazugehoeren, bekommen sie dieselben Werte. */
.brz-popup2 .fw-tabs .bouncy-tabs__nav,
.brz-popup2 .fw-tabs .bouncy-tabs__indicator,
.brz-popup2 .fw-tabs .bouncy-tabs__ghost,
.brz-popup2 .fw-tabs .bouncy-tabs__button {
  border-radius: var(--fw-rund-feld) !important;
}

.brz-popup2 .fw-tabs .bouncy-tabs__nav { border-radius: 14px !important; }

/* Auch die Plaketten und Statuszeilen in den Neuigkeiten waren vollrund */
.fw-chip, .fw-info__stand { border-radius: 8px !important; }

.fw-fuss__sozial a { border-radius: var(--fw-rund-feld) !important; }

/* --- "freie Plätze" fuehrt direkt in die Anmeldung ---------------------- */
.fw-chip--klick {
  border: 0;
  font-family: var(--fw-schrift);
  cursor: pointer;
  transition: background-color var(--fw-uebergang), transform var(--fw-uebergang);
}

.fw-chip--klick::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.fw-chip--klick:hover,
.fw-chip--klick:focus-visible {
  background: var(--fw-gruen) !important;
  color: #16290a !important;
  transform: translateY(-1px);
}

.fw-chip--klick:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Das gesetzte Feld hebt sich kurz hervor */
.fw-a__feld--gesetzt .fw-select__knopf,
.fw-a__feld--gesetzt select {
  border-color: var(--fw-gruen) !important;
  box-shadow: 0 0 0 4px rgba(96, 196, 25, .3) !important;
}

@media (prefers-reduced-motion: reduce) {
  .fw-chip--klick { transition: none; }
}

/* ==========================================================================
   Zweiter Prüfbericht: Kopfzeile, Hero, FAQ, Rundungen, Trefferflächen
   ========================================================================== */

/* --- Mitscrollende Kopfzeile -------------------------------------------
   Sie ist im Markup vorhanden, stand aber dauerhaft auf visibility:hidden -
   91 % der Seite waren ohne Navigation. */
.fw-kopf-fest {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .24s ease, transform .24s cubic-bezier(.22, .61, .36, 1),
              visibility .24s;
  background: rgba(35, 40, 43, .96) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

.fw-kopf-fest--da {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fw-kopf-fest { transition: none; }
}

/* Auf dem Telefon fuehrt der Burger ins Menue - der feste Kopf wuerde nur
   Platz kosten und mit ihm kollidieren. */
@media (max-width: 991px) { .fw-kopf-fest { display: none !important; } }

/* --- Hero: der Knopf sprang je Slide um bis zu 919 px ------------------- */
.brz-slick-slider .slick-slide .brz-rich-text,
.brz-slick-slider .slick-slide h1,
.brz-slick-slider .slick-slide h2,
.brz-slick-slider .slick-slide p,
.brz-slick-slider .slick-slide [class*="text-lg-center"],
.brz-slick-slider .slick-slide [class*="text-lg-right"] {
  text-align: left !important;
}

.brz-slick-slider .slick-slide h1,
.brz-slick-slider .slick-slide h2 { max-width: 870px; }

.brz-slick-slider .slick-slide .brz-column__items,
.brz-slick-slider .slick-slide .brz-wrapper-clone { align-items: flex-start !important; }

/* --- FAQ: 132 px Luft zwischen den Gruppen ------------------------------ */
#faq .brz-wrapper:has(> .brz-accordion) + .brz-wrapper:has(h3),
#faq h3, #faq h4 { margin-top: 34px !important; }

#faq .brz-row__container + .brz-row__container { margin-top: 0 !important; }

/* --- Rundungen: 21 Elemente lagen auf 6 px ------------------------------ */
.brz-btn, .brz-image__wrapper, .brz-map, .brz-video,
.submit-response, .brz-accordion__item {
  border-radius: var(--fw-rund-feld) !important;
}

.brz-popup2 .fw-tabs .bouncy-tabs__nav { border-radius: var(--fw-rund-karte) !important; }

/* --- Gruener Schein unter Knoepfen auf dunklem Grund -------------------- */
#kontakt .fc-form .submit-button,
#kontakt .fw-einwilligung__knopf { box-shadow: 0 8px 22px rgba(0, 0, 0, .3) !important; }

/* --- Trefferflächen in der Fusszeile (19-24 px) ------------------------- */
.fw-fuss__spalte a,
.fw-fuss__recht a,
.fw-fuss__kontakt a {
  display: inline-block;
  padding: 11px 0;
  line-height: 1.2;
}

.fw-fuss__spalte li { margin: 0; }

/* --- Überfahren: drei verschiedene Hubwerte (1/2/3 px) ------------------ */
#faq .brz-accordion__item:hover,
#impressionen-8 .brz-image__gallery-item:hover,
.fw-blickleiste .brz-columns:hover { transform: translateY(-2px); }

/* --- Fahrzeuge-Popup: 9 Zeichen belegten 542 px ------------------------- */
.brz-popup2 .fw-tabs .bouncy-tabs__item { min-height: 0 !important; }

/* --- Auswahlfelder: nichts abschneiden ---------------------------------
   Der gewaehlte Termin ist lang ("November (09.11.2026 – 18.11.2026)
   18:00–21:00 Uhr"). Statt ihn mit ... zu kappen, darf der Knopf zwei
   Zeilen hoch werden - lieber etwas hoeher als unvollstaendig. */
.fw-select__wert {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25;
}

.fw-select__knopf {
  height: auto;
  padding-top: 26px;
  padding-bottom: 9px;
  align-items: center;
}

/* Die schwebende Beschriftung darf die ganze Breite bis zum Pfeil nutzen und
   notfalls zweizeilig werden - "VORHANDENE KLASSE (FREIWILLIG)" passt sonst
   in kein schmales Feld. Der Knopf haelt dafuer oben 34 px frei. */
.fw-feld--auswahl .fw-a__name,
.fw-feld--auswahl .fw-feldname {
  /* Der Pfeil sitzt senkrecht mittig - die Beschriftung oben kann die volle
     Breite nutzen. "FÜHRERSCHEINKLASSE" ist EIN Wort und kann nicht umbrechen. */
  max-width: calc(100% - 22px) !important;
  font-size: 12.5px !important;
  letter-spacing: .03em;
  white-space: normal !important;
  line-height: 1.2;
  overflow: visible !important;
  text-overflow: clip !important;
}

.fw-feld--auswahl .fw-select__knopf { padding-top: 34px; }

/* Auch die Eintraege in der Liste stehen vollstaendig */
.fw-select__eintrag {
  white-space: normal;
  line-height: 1.35;
}

/* Auch bei den Textfeldern soll die Beschriftung vollstaendig stehen:
   "Vorhandene Klasse (freiwillig)" passt in ein schmales Feld nur zweizeilig.
   Im Ruhezustand ist das Feld leer - die zwei Zeilen stoeren dort nicht;
   sobald getippt wird, wandert sie klein nach oben und bleibt einzeilig. */
.fw-a__name,
.fw-feld .fw-feldname {
  white-space: normal;
  line-height: 1.2;
  max-width: calc(100% - 26px);
}

.fw-a input:focus ~ .fw-a__name,
.fw-a textarea:focus ~ .fw-a__name,
.fw-a select:focus ~ .fw-a__name,
.fw-a input:not(:placeholder-shown) ~ .fw-a__name,
.fw-a textarea:not(:placeholder-shown) ~ .fw-a__name,
.fw-a select:valid ~ .fw-a__name,
.fw-feld:focus-within .fw-feldname,
.fw-feld.fw-gefuellt .fw-feldname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Plakette "freie Plätze" ist ein Knopf - sie braucht Trefferflaeche */
.fw-chip--klick { min-height: 44px; padding: 8px 14px; }

/* ==========================================================================
   Textsorten in den Popups
   Die Inhalte tragen ihre Gliederung nur als Schreibweise: "Preise:" ist
   unterstrichen statt eine Ueberschrift, technische Angaben stehen in
   VERSALIEN als normale Absaetze, Zwischentitel sind von Fliesstext nicht zu
   unterscheiden. Jede Sorte bekommt jetzt ihre Form - der Wortlaut bleibt.
   ========================================================================== */

/* --- Zwischentitel ("Preise:", "Autos mit", "Ausbildung") --------------- */
.brz-popup2 .brz-popup2__inner p.fw-zwischen {
  margin: 22px 0 8px !important;
  color: var(--fw-gruen-tief) !important;
  font-size: var(--fw-t-klein) !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35 !important;
}

.brz-popup2 .brz-popup2__inner p.fw-zwischen:first-child { margin-top: 0 !important; }

/* Das Unterstreichen war der Ersatz fuer eine Ueberschrift - jetzt ueberfluessig */
.brz-popup2 .fw-zwischen u,
.brz-popup2 .fw-zwischen__wort {
  text-decoration: none !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* --- Technische Angaben: als ruhige Datenliste -------------------------- */
.brz-popup2 .brz-popup2__inner .fw-datenblock {
  margin: 0 0 6px;
  border-left: 2px solid rgba(96, 196, 25, .35);
  padding-left: 14px;
}

.brz-popup2 .brz-popup2__inner p.fw-daten {
  margin: 0 !important;
  padding: 4px 0 !important;
  color: #55636e !important;
  font-size: var(--fw-t-klein) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: .015em;
}

.brz-popup2 .brz-popup2__inner p.fw-daten + p.fw-daten {
  border-top: 1px solid #eef1f3;
}

.brz-popup2 .brz-popup2__inner p.fw-daten span { font-size: inherit !important; color: inherit !important; }

/* --- Preiszeilen: Bezeichnung links, Betrag rechts ---------------------- */
.brz-popup2 .brz-popup2__inner p.fw-preis {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #eef1f3;
  max-width: 420px;
}

/* Die Fuehrungslinie ist ein eigenes Element - als ::after mit width:100 %
   im Textfeld brach die Zeile um und jede Preiszeile wurde 70 px hoch. */
.fw-preis__was { flex: 0 1 auto; }

.fw-preis__linie {
  flex: 1 1 auto;
  min-width: 18px;
  align-self: center;
  border-bottom: 1px dotted #d3dade;
  transform: translateY(2px);
}

.fw-preis__wert {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--fw-tinte-kraeftig);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brz-popup2 .brz-popup2__inner p.fw-preis + p.fw-preis { margin-top: 0 !important; }

@media (max-width: 767px) {
  .brz-popup2 .brz-popup2__inner p.fw-preis { max-width: none; }
}

/* Leerabsaetze, die das alte System als Abstand benutzt hat */
.brz-popup2 .brz-popup2__inner p.fw-leerzeile { display: none !important; }

/* --- Nachtrag Textformate (Prüfbericht) --------------------------------- */

/* "Preise:" stand dunkel statt grün - die Farbe kam vom alten <strong> */
.brz-popup2 .brz-popup2__inner .fw-zwischen strong,
.brz-popup2 .brz-popup2__inner .fw-zwischen b,
.brz-popup2 .brz-popup2__inner .fw-zwischen u,
.brz-popup2 .brz-popup2__inner .fw-zwischen span {
  color: var(--fw-gruen-tief) !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  letter-spacing: inherit;
  text-decoration: none !important;
}

/* Gemischtschrift statt Versalien - die Absicht festschreiben */
.brz-popup2 .brz-popup2__inner p.fw-zwischen { text-transform: none !important; }

/* Fliesstext klebte an der letzten Preis- oder Datenzeile */
.brz-popup2 .brz-popup2__inner p.fw-preis + p:not(.fw-preis):not(.fw-leerzeile),
.brz-popup2 .brz-popup2__inner .fw-datenblock + p:not(.fw-leerzeile) {
  margin-top: 16px !important;
}

/* --- Zeitzeilen: Tag links, Zeit rechts --------------------------------- */
.brz-popup2 .brz-popup2__inner p.fw-zeit {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #eef1f3;
  max-width: 420px;
}

.fw-zeit__wort { flex: 1; }

.fw-zeit__wert {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--fw-tinte-kraeftig);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Team: Name, Grussformel -------------------------------------------- */
.brz-popup2 .brz-popup2__inner p.fw-person__name {
  margin: 0 0 10px !important;
  font-size: var(--fw-t-gross) !important;
  font-weight: 700 !important;
  color: var(--fw-tinte-kraeftig) !important;
  line-height: 1.3 !important;
}

.brz-popup2 .brz-popup2__inner p.fw-gruss,
.brz-popup2 .brz-popup2__inner h5.fw-gruss {
  margin-top: 18px !important;
  color: var(--fw-gruen-tief) !important;
  font-weight: 700 !important;
}

/* --- Aktion: die Hierarchie stand auf dem Kopf -------------------------- */
.brz-popup2 .brz-popup2__inner p.fw-aktion__titel,
.brz-popup2 .brz-popup2__inner p.fw-aktion__titel strong {
  font-size: var(--fw-t-h3) !important;
  font-weight: 700 !important;
  color: var(--fw-tinte-kraeftig) !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}

.brz-popup2 .brz-popup2__inner h5.fw-aktion__text {
  font-size: var(--fw-t-text) !important;
  font-weight: 400 !important;
  color: var(--fw-tinte) !important;
}

/* --- FAQ: Gewicht 600 lag ausserhalb der Staffel ------------------------ */
#faq .brz-accordion__nav-title,
#faq .brz-accordion__nav-title span,
.brz-popup2 .brz-popup2__inner .brz-accordion__nav-title {
  font-weight: 700 !important;
  color: var(--fw-tinte-kraeftig) !important;
}

/* ==========================================================================
   Rundungen: zwei Werte, überall gleich – auch links und rechts
   Gemessen waren fünf Werte (2 / 6 / 8 / 10 / 16 px) und eine ungleiche Ecke:
   das Foto im Popup hatte links 14 px, die Karte darum aber 16 - die Kanten
   lagen sichtbar daneben. Auf dem Telefon dasselbe mit 10 zu 16 px.
   ========================================================================== */

/* Das Foto folgt der Karte: aussen wie die Karte, innen bündig zum Text.
   WICHTIG: Die Rundung sitzt auf der Huelle .brz-bg, das Bild liegt als
   eigene Ebene (.brz-bg-image) darin - ohne overflow:hidden und ohne
   dieselbe Rundung auf den Ebenen ragt die Bildecke darueber hinaus. Genau
   das war zu sehen: links oben eckig, rechts oben rund. */
.brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg,
.brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg > .brz-bg-image,
.brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg > .brz-bg-color {
  border-radius: var(--fw-rund-karte) 0 0 var(--fw-rund-karte) !important;
}

.brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg {
  overflow: hidden !important;
}

/* Die Karte selbst muss ebenfalls beschneiden, sonst hilft alles nichts */
.brz-popup2__inner > .brz-container__wrap { overflow-x: hidden; }

@media (max-width: 991px) {
  .brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg,
  .brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg > .brz-bg-image,
  .brz-popup2__inner > .brz-container__wrap .brz-columns:first-child .brz-bg > .brz-bg-color {
    border-radius: var(--fw-rund-karte) var(--fw-rund-karte) 0 0 !important;
  }
}

/* ACHTUNG: keine pauschale Rundung auf .brz-bg/.brz-column__items - das traf
   auch das Vollbild-Overlay (1440x900) und die Innenspalten. Gerundet wird
   nur, was auch eine sichtbare Flaeche hat. */
.brz-popup2 .brz-popup2__inner .bouncy-tabs__collection,
.brz-popup2 .brz-popup2__inner .fw-datenblock { border-radius: var(--fw-rund-karte); }

/* Plaketten und Statuszeilen: 8 -> 10 px */
.fw-chip, .fw-info__stand { border-radius: var(--fw-rund-feld) !important; }

/* Die Feldblöcke des Kontaktformulars lagen auf 2 px */
.fc-form .form-element,
.fc-form .form-element-html,
.fc-form .field-cover { border-radius: var(--fw-rund-feld) !important; }

/* Kacheln und Karten: Kartenrundung */
.fw-kachel, .fw-info, .fw-kontaktkarte, .fw-einwilligung,
#neuigkeiten .brz-row__container > .brz-bg,
#impressionen-8 .brz-image__gallery-item {
  border-radius: var(--fw-rund-karte);
  overflow: hidden;
}

/* Bilder: Huelle UND Bild auf denselben Wert. Vorher hatte die Huelle 10 px
   und das Bild darin 16 - dadurch schauten die Bildecken ueber die Huelle
   hinaus und es entstanden helle Kerben. */
.brz-image,
.brz-image__wrapper,
.brz-image picture,
.brz-image img {
  border-radius: var(--fw-rund-feld) !important;
}

.brz-image { overflow: hidden; }

/* Im Popup sitzen die Bilder in einer Karte - dort die kleinere Rundung */
.brz-popup2 .brz-image,
.brz-popup2 .brz-image__wrapper,
.brz-popup2 .brz-image picture,
.brz-popup2 .brz-image img { border-radius: var(--fw-rund-feld) !important; }

@media (max-width: 767px) {
  /* Auf dem Telefon dieselben Werte - nur die Kacheln stehen mit 16 px
     Rundung an einem 16-px-Rand, das wirkt sonst doppelt gerundet. */
  .brz .fw-kachel { border-radius: var(--fw-rund-karte); }
}

/* ==========================================================================
   Beschriftungen auf Grün wieder in Weiß (Wunsch)
   Die Beizeile, die Leiste "alles im Blick" und die Knöpfe tragen weisse
   Schrift. Damit sie darauf steht, sind die Flaechen eine Spur tiefer im
   Markengruen (#4c9c14 statt #60c419) - dieselbe Farbfamilie, aber Weiss
   liest sich darauf statt zu verschwimmen.
   ========================================================================== */

.fw-schlagzeile,
.fw-schlagzeile *,
.fw-blickleiste span,
.fw-blickleiste em,
.fw-blickleiste a,
.fw-blickleiste p { color: #fff !important; }

.fw-blickleiste .brz-columns + .brz-columns::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0),
              rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, .5) 70%,
              rgba(255, 255, 255, 0)) !important;
}

/* Die grünen Flächen dieser beiden Leisten eine Spur tiefer */
.fw-blickleiste > .brz-section__content > .brz-bg > .brz-bg-color,
.fw-schlagzeile { --fw-flaeche: #4c9c14; }

.fw-blickleiste .brz-bg-color { background-color: #4c9c14 !important; }

.brz .fw-schlagzeile { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }

/* Knöpfe: weisse Beschriftung auf tieferem Grün */
.brz .brz-slick-slider .brz-btn,
.fc-form .submit-button,
.fw-a__knopf,
.fw-fuss__knopf,
.fw-einwilligung__knopf,
.fw-einwilligung__knopf:focus,
.fw-einwilligung__knopf:active {
  background: #4c9c14 !important;
  color: #fff !important;
}

.brz .brz-slick-slider .brz-btn *,
.fc-form .submit-button .text,
.fw-a__knopf .text { color: #fff !important; }

.brz .brz-slick-slider .brz-btn:hover,
.fc-form .submit-button:hover,
.fw-a__knopf:hover,
.fw-fuss__knopf:hover,
.fw-einwilligung__knopf:hover {
  background: var(--fw-gruen) !important;
  color: #fff !important;
}

/* Der aktive Reiter und die Plaketten tragen ebenfalls Weiss */
.brz-popup2 .fw-tabs [data-bouncy-tabs-button][data-active],
.brz-popup2 .fw-tabs [data-bouncy-tabs-button][data-active]:hover { color: #fff !important; }

.brz-popup2 .fw-tabs .bouncy-tabs__indicator { background-color: #4c9c14 !important; }

.fw-chip--klick:hover,
.fw-chip--klick:focus-visible { background: #4c9c14 !important; color: #fff !important; }

/* --- FAQ-Überschriften: kein Schatten ----------------------------------- */
#faq h3, #faq h3 span, #faq h4, #faq h4 span,
#faq .fw-abschnittstitel, #faq .fw-abschnittstitel span {
  text-shadow: none !important;
  color: #fff !important;
}

#faq .fw-abschnittstitel::after { background: #fff; }

/* ==========================================================================
   Anfahrt & Kontakt: Textur statt einfarbiger Flaeche
   Der Abschnitt war eine glatte dunkle Flaeche. Jetzt liegt eine leichte
   Struktur darauf - Fahrbahnmarkierungen als schraege Linien, dazu zwei
   weiche Lichter in der Markenfarbe. Alles aus CSS, kein zusaetzliches Bild.
   ========================================================================== */

#kontakt > .brz-section__content { position: relative; overflow: hidden; }

#kontakt > .brz-section__content {
  /* Naechtliche Landstrasse in Schwarzweiss - passt zur Fahrschule und ist
     dunkel genug, dass weisse Schrift darauf steht. Darueber ein Schleier
     und zwei weiche Lichter in der Markenfarbe. */
  background-image: url("img/kontakt-strasse.webp");
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
}

#kontakt > .brz-section__content::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 78% at 10% 0%, rgba(96, 196, 25, .18), transparent 62%),
    radial-gradient(52% 70% at 94% 100%, rgba(96, 196, 25, .10), transparent 64%),
    linear-gradient(to bottom, rgba(20, 23, 21, .62), rgba(20, 23, 21, .78));
  pointer-events: none;
}

#kontakt .brz-container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  #kontakt > .brz-section__content::after { background: none; }
}

/* ==========================================================================
   Impressionen: Video ins Raster
   Das Video stand allein in einer eigenen Zeile und war anders gross als die
   16 Kacheln daneben. Der Rest des Rasters hat sich bewaehrt und bleibt.
   ========================================================================== */

@media (min-width: 992px) {
  #impressionen-8 .brz-row__container:last-child .brz-column__items {
    align-items: center;
  }

  #impressionen-8 .brz-video,
  #impressionen-8 .brz-video .brz-video__content {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* --- Fusszeile: destec-Logo statt Textzeile ----------------------------- */
.fw-macher {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  padding: 4px 8px;
  border-radius: var(--fw-rund-feld);
  vertical-align: middle;
  transition: background-color var(--fw-uebergang), transform var(--fw-uebergang);
}

.fw-macher img {
  display: block;
  height: 34px;
  width: auto;
  opacity: .72;
  filter: grayscale(1) brightness(1.6);
  transition: opacity var(--fw-uebergang), filter var(--fw-uebergang);
}

.fw-macher:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateY(-1px);
}

.fw-macher:hover img { opacity: 1; filter: none; }

.fw-macher:focus-visible { outline: 3px solid var(--fw-gruen); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .fw-macher { transition: none; } }

/* ==========================================================================
   Kacheln vollstaendig fuellen
   Gemessen: die Kachel ist 580 px breit, die Bildebene darin nur 575 - und
   auf dem Telefon 124 zu 104 px hoch. Brizy setzt auf den Ebenen feste Masse;
   rechts und unten blieb ein Streifen ohne Foto.
   ========================================================================== */

/* Die eigentliche Ursache: Brizy legt einen 5 px breiten TRANSPARENTEN
   Rahmen rechts auf die Flaeche (border-width: 0 5px 0 0) - er diente als
   Spaltenabstand. Das Foto fuellt nur die Innenflaeche, rechts blieb ein
   Streifen. Der Abstand kommt heute vom Raster (gap), der Rahmen kann weg. */
.brz .fw-kachel > .brz-bg { border: 0 !important; }

.brz .fw-kachel > .brz-bg,
.brz .fw-kachel > .brz-bg > .brz-bg-image,
.brz .fw-kachel > .brz-bg > .brz-bg-color {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Dasselbe fuer die Bildspalten in den Popups und die Neuigkeiten-Bloecke */
.brz-popup2 .brz-popup2__inner .brz-columns > .brz-bg { border: 0 !important; }

#neuigkeiten .brz-row__container > .brz-bg { border-width: 1px !important; }

.brz-popup2 .brz-popup2__inner .brz-columns > .brz-bg,
.brz-popup2 .brz-popup2__inner .brz-columns > .brz-bg > .brz-bg-image,
.brz-popup2 .brz-popup2__inner .brz-columns > .brz-bg > .brz-bg-color,
#neuigkeiten .brz-row__container > .brz-bg > .brz-bg-image,
#neuigkeiten .brz-row__container > .brz-bg > .brz-bg-color {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  inset: 0 !important;
}

/* Innenliegende Flaechen ohne eigenen Grund brauchen keine Rundung - sie
   erzeugten nur unsichtbare Zwischenwerte (6 und 10 px) im System. Die
   Bildhuelle behaelt ihre Rundung (weiter oben mit !important gesetzt). */
.brz-popup2 .brz-popup2__inner .brz-bg,
.brz-popup2 .brz-popup2__inner .brz-column__items,
.brz-popup2 .brz-popup2__inner .brz-row__container,
.brz-popup2 .brz-popup2__inner .brz-wrapper { border-radius: 0; }

/* ==========================================================================
   Popups: die Karte wurde groesser als ihr Inhalt
   Gemessen am Popup "Büro- / Theoriezeiten": Karte 553 px, Inhalt 362 px.
   Die Textspalte trug 43 px Innenabstand UND 42 px Aussenabstand oben wie
   unten - zusammen 170 px Luft um wenige Zeilen.
   ========================================================================== */

.brz-popup2 .brz-popup2__inner .brz-column__items {
  margin-block: 0 !important;
  padding-block: clamp(20px, 2.2vw, 32px) !important;
}

/* Der Platzhalter im Popup kommt aus der Brizy-Zeit */
.brz-popup2 .brz-spacer { height: 0 !important; min-height: 0 !important; }

/* Die Reiterkarte braucht innen weniger Rand, wenn der Inhalt kurz ist */
.brz-popup2 .fw-tabs .bouncy-tabs__collection { padding: clamp(16px, 1.8vw, 24px); }

/* ==========================================================================
   destec-Popup in der Fusszeile
   Das Logo fuehrt nicht mehr direkt nach draussen, sondern zeigt erst in zwei
   Saetzen, wer die Seite gemacht hat.
   ========================================================================== */

.fw-macher { cursor: pointer; }

.fw-destec {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  opacity: 0;
  transition: opacity .22s ease;
}

.fw-destec--da { opacity: 1; }

.fw-destec[hidden] { display: none; }

.fw-destec__schleier {
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 13, .72);
  backdrop-filter: blur(4px);
}

.fw-destec__karte {
  position: relative;
  width: min(460px, 100%);
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--fw-rund-karte);
  background: #23282b;
  color: #e9eef0;
  box-shadow: var(--fw-schatten-3);
  text-align: center;
  transform: translateY(10px) scale(.98);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.fw-destec--da .fw-destec__karte { transform: none; }

.fw-destec__logo {
  height: 44px;
  width: auto;
  margin: 0 auto 18px;
  display: block;
}

.brz .fw-destec__karte h2,
.fw-destec__karte h2 {
  margin: 0 0 12px !important;
  font-size: var(--fw-t-h4) !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.fw-destec__karte p {
  margin: 0 0 12px !important;
  font-size: var(--fw-t-text) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, .82) !important;
}

.fw-destec__karte strong { color: #fff; }

.fw-destec__leistungen {
  font-size: var(--fw-t-klein) !important;
  color: var(--fw-gruen) !important;
  letter-spacing: .02em;
}

.fw-destec__knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 8px;
  padding: 14px 26px;
  border-radius: var(--fw-rund-feld);
  background: #4c9c14;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--fw-uebergang), transform var(--fw-uebergang);
}

.fw-destec__knopf::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg);
}

.fw-destec__knopf:hover { background: var(--fw-gruen); transform: translateY(-2px); }

.fw-destec__zu {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--fw-rund-feld);
  background: rgba(255, 255, 255, .1) !important;
  cursor: pointer;
}

.fw-destec__zu::before,
.fw-destec__zu::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 19px;
  width: 18px;
  height: 2px;
  background: #fff;
}

.fw-destec__zu::before { transform: rotate(45deg); }
.fw-destec__zu::after { transform: rotate(-45deg); }
.fw-destec__zu:hover { background: rgba(96, 196, 25, .55) !important; }

@media (prefers-reduced-motion: reduce) {
  .fw-destec, .fw-destec__karte, .fw-destec__knopf { transition: none; }
}

.fw-destec__zu:focus-visible { outline: 3px solid var(--fw-gruen); outline-offset: 2px; }

/* --- Weisser Strich nach den Kacheln ------------------------------------
   Der Abschnitt #simulator ist leer, traegt aber ein 12 px hohes Band in
   #fafafa - das war der helle Strich unter "Anmeldung / Leistungen". */
#simulator .brz-bg-color { background-color: transparent !important; }
#simulator > .brz-section__content { padding-top: 0 !important; }

/* ==========================================================================
   Auftritte beim Scrollen
   Karten steigen auf, Kacheln kommen abwechselnd von links und rechts,
   Listen gestaffelt. Der Ruhezustand ist immer der fertige - faellt das
   Skript aus, steht alles da, wo es hingehoert.
   ========================================================================== */

.fw-auftritt {
  opacity: 0;
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1) var(--fw-verzug, 0ms),
              transform .68s cubic-bezier(.22, .61, .36, 1) var(--fw-verzug, 0ms);
  will-change: opacity, transform;
}

.fw-auftritt--auf   { transform: translate3d(0, 26px, 0); }
.fw-auftritt--links { transform: translate3d(-34px, 12px, 0); }
.fw-auftritt--rechts{ transform: translate3d(34px, 12px, 0); }
.fw-auftritt--zoom  { transform: scale(.94); }

.fw-auftritt--da {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Ohne JavaScript oder mit reduzierter Bewegung ist alles sofort da */
@media (prefers-reduced-motion: reduce) {
  .fw-auftritt { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Auf schmalen Schirmen keine seitlichen Auftritte: eine Kachel, die um 34 px
   nach rechts versetzt startet, ragt kurz ueber den Rand und erzeugt einen
   waagerechten Rollbalken. Dort kommen alle Bloecke von unten. */
@media (max-width: 991px) {
  .fw-auftritt--links,
  .fw-auftritt--rechts { transform: translate3d(0, 22px, 0); }
}

/* Sicherheitsnetz: waehrend der Auftritte darf nichts quer schieben */
body { overflow-x: hidden; }

/* --- Hero: Schlagzeile und Knopf stehen immer links ---------------------
   Jede Slide trug ihre eigene Ausrichtung: der Knopf sass mal bei x=135,
   mal bei 594, mal bei 1054, die Schlagzeile der zweiten Slide mittig.
   Beim Weiterblaettern sprang dadurch alles. Jetzt beginnt beides auf allen
   drei Slides an derselben Kante wie der Text daneben. */
.brz-slick-slider .slick-slide .brz-wrapper,
.brz-slick-slider .slick-slide .brz-wrapper-clone {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.brz-slick-slider .slick-slide .brz-rich-text,
.brz-slick-slider .slick-slide .brz-rich-text * {
  text-align: left !important;
}


/* --- Kontakt: beide Spalten enden auf derselben Linie -------------------
   Die Formularspalte war senkrecht zentriert (justify-content: center) und
   trug 32 px Polster unten - dadurch endete das Formular 77 px ueber dem
   Kartenplatzhalter daneben. Beide beginnen und enden jetzt gleich; die
   Karte fuellt, was uebrig bleibt (Regel weiter oben). */
@media (min-width: 992px) {
  #kontakt .brz-columns > .brz-column__items {
    justify-content: flex-start;
    padding-bottom: 0 !important;
  }
}

/* --- Abschnittstitel: gleicher Anlauf ------------------------------------
   Die FAQ-Ueberschrift trug 53 px Aussenabstand nach oben, die anderen
   Titel keinen - der Abschnitt begann dadurch mit 143 px Leere statt mit
   den ueblichen 90. Der Abstand kommt vom Abschnittspolster, nicht vom
   Titel selbst. */
.fw-abschnittstitel,
.brz .brz-rich-text .fw-abschnittstitel,
.brz-section .brz-rich-text > div > .fw-abschnittstitel { margin-top: 0 !important; }

/* --- Leere Restzeilen ausblenden -----------------------------------------
   Unter der Galerie stand eine Brizy-Zeile ohne Inhalt (11 px hoch, nur
   leere Spalten) - sichtbar als zusaetzliche Luft vor dem naechsten Block. */
.brz-row__container:not(:has(img, iframe, svg, input, textarea, select, button, a, p, h1, h2, h3, h4, h5, h6, .brz-bg-image)) {
  display: none;
}

/* ==========================================================================
   Durchsicht 03.08.2026 - Befunde aus der mobilen Prüfung
   ========================================================================== */

/* --- Kleinschriften ------------------------------------------------------
   Gemessen waren 11-12 px an fünf Stellen. Die schwebenden Beschriftungen
   der Formularfelder schrumpfen absichtlich, sobald das Feld gefüllt ist -
   das ist ein bekanntes Muster und bleibt. Aber 11,5 px ist zu wenig; 12,5
   ist die untere Grenze, bei der es noch lesbar bleibt, ohne dass die
   Beschriftung in die Eingabe rutscht.
   Was KEIN Etikett, sondern ein Bedienelement ist ("freie Plätze"), gehört
   dagegen auf volle Lesegröße. */
.fw-feld:focus-within .fw-feldname,
.fw-feld.fw-gefuellt .fw-feldname,
.fw-a input:focus ~ .fw-a__name,
.fw-a textarea:focus ~ .fw-a__name,
.fw-a select:focus ~ .fw-a__name,
.fw-a input:not(:placeholder-shown) ~ .fw-a__name,
.fw-a textarea:not(:placeholder-shown) ~ .fw-a__name,
.fw-a select.fw-gewaehlt ~ .fw-a__name {
  font-size: 12.5px !important;
}

.fw-a__gruppe h4,
.fw-info__marke,
.fw-kontaktkarte__marke {
  font-size: 13px !important;
}

.fw-chip,
.fw-chip--frei {
  font-size: 14px !important;
}

/* --- Tippflächen: überall mindestens 44 px hoch ---------------------------
   Gemessen waren 37-42 px bei den Terminknöpfen, den Fußzeilenlinks und
   dem destec-Verweis. Der Daumen braucht 44. */
.fw-chip--frei,
.fw-chip--klick {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
}

/* Auf Geräten ohne Maus braucht jeder Link seine 44 px. Am Rechner wäre
   eine 44 px hohe Fußzeilenzeile unnötig aufgeblasen. */
@media (hover: none) {
  .fw-fuss__sozial a,
  .fw-fuss__recht a,
  .fw-fuss__macher a,
  .fw-fuss__spalte a,
  .fw-kontaktkarte a,
  .fw-info__karte a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 12px;
  }

  /* "AGB" war nur 29 px breit */
  .fw-fuss__recht a { min-width: 44px; justify-content: center; }

  .fw-fuss__spalte a,
  .fw-kontaktkarte a { padding-inline: 0; }
}

/* Slider-Punkte: der optische Punkt bleibt klein, die Trefferfläche nicht.
   Bei 768 px waren sie auf 10 px geschrumpft - mit dem Finger nicht zu
   treffen. Und der aktive Punkt war größer als die anderen, dadurch
   sprang die Reihe beim Weiterschalten. */
.brz .brz-slick-slider__dots li,
.brz .brz-slick-slider__dots li button {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.brz .brz-slick-slider__dots li.slick-active { transform: none; }

.brz .brz-slick-slider__dots li button::before {
  transform: none !important;
}

/* --- Leerer Abschnitt "Simulator" ----------------------------------------
   Ein Abschnitt ganz ohne Inhalt, nur als Sprungmarke - kostete 42 px. */
#simulator {
  padding: 0 !important;
  min-height: 0 !important;
}

#simulator > .brz-section__content {
  padding: 0 !important;
  min-height: 0 !important;
}

/* --- Anmerkungsfeld im Anmeldeformular -----------------------------------
   Das Textfeld für "Wünsche, Fragen, Besonderheiten" war 54 px hoch, also
   genau so hoch wie ein einzeiliges Feld - es sah nicht wie ein Textfeld
   aus. Im Kontaktformular sind es 150 px. */
form.fw-a textarea {
  min-height: 120px !important;
  resize: vertical;
}

/* --- Galerie: das Video schloss mit zu viel Abstand an -------------------- */
#impressionen-8 .brz-video,
#impressionen-8 .brz-row__container:has(.brz-video) {
  margin-top: 8px !important;
}

/* --- Überschriften ausgewogen umbrechen ----------------------------------
   "Herzlich willkommen im / Fahrwerk!" liess ein einzelnes Wort in der
   letzten Zeile stehen. text-wrap:balance verteilt die Zeilen gleichmäßig. */
.fw-abschnittstitel,
.fw-info__titel,
.brz-slick-slider .slick-slide h1,
.brz-slick-slider .slick-slide h2 {
  text-wrap: balance;
}

/* Die Reiter in den Popups waren 41 px hoch - drei Pixel unter dem Maß,
   das ein Daumen braucht. Der Marker der Vorlage misst die Knopfgröße zur
   Laufzeit und wächst einfach mit. */
.bouncy-tabs__button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   Durchsicht 03.08.2026 - Befunde aus der Desktop-Prüfung
   ========================================================================== */

/* --- Sprungziele: die feste Kopfzeile verdeckte den Anfang ----------------
   Nach einem Klick auf "Team" lagen 85 der 187 px der Zielkachel hinter der
   92 px hohen Kopfzeile. Der Browser hält jetzt Abstand. */
section[id] { scroll-margin-top: 104px; }

@media (max-width: 991px) { section[id] { scroll-margin-top: 24px; } }

/* --- Weiß auf Grün lesbar machen -----------------------------------------
   Gemessen: FAQ-Überschriften 2,03:1, Beizeile 2,23:1, Knöpfe 3,46:1 -
   nötig sind 3:1 für große und 4,5:1 für normale Schrift. Weiß bleibt (so
   gewünscht), die Grünflächen darunter werden tiefer. Das Markengrün bleibt
   dort, wo es keine Schrift trägt. */
#faq > .brz-section__content > .brz-bg > .brz-bg-color,
#faq > .brz-section__content { background-color: #4c9c14 !important; }

.fw-schlagzeile,
.brz-section:has(> .brz-section__content .fw-schlagzeile) .brz-bg-color {
  background-color: #3f8410 !important;
}

/* .brz vorangestellt: die eigenen Knopfregeln weiter oben tragen es
   ebenfalls und waeren sonst spezifischer. */
.brz .brz-slick-slider .brz-btn,
.brz .fc-form .submit-button,
.fw-fuss__knopf,
.fw-einwilligung__knopf {
  background-color: #3d7f10 !important;
}

.brz .brz-slick-slider .brz-btn:hover,
.brz .fc-form .submit-button:hover,
.fw-fuss__knopf:hover,
.fw-einwilligung__knopf:hover {
  background-color: #4c9c14 !important;
}

/* --- Fokus: überall derselbe grüne Ring -----------------------------------
   Neun Kopfzeilen-Links, die Kachel-Links, die Galerie und zwei Knöpfe
   zeigten den Standardring des Browsers (blau bzw. schwarz). */
.brz-a:focus-visible,
a.brz-btn:focus-visible,
.brz-a.brz-container-link:focus-visible,
.fw-einwilligung__knopf:focus-visible,
.submit-button:focus-visible,
.brz-slick-slider__dots button:focus-visible,
.brz-accordion__nav:focus-visible {
  outline: 3px solid var(--fw-gruen) !important;
  outline-offset: 2px;
}

/* --- FAQ-Zeilen zeigen jetzt auch als Fläche, dass sie anklickbar sind ---- */
.brz-accordion__nav { cursor: pointer; }

.brz-accordion__item:hover { background: #f4f8f0; }

.brz-popup2 .brz-accordion__item:hover { background: #fafffa !important; }

/* --- Hero: der Knopf sprang beim Bildwechsel um 22 px ---------------------
   Folie 1 ist ein h1 (Zeilenhöhe 69 px), Folie 2 und 3 sind h2 (75,5 px) -
   dadurch stand der Text 10 px und der Knopf 22 px tiefer. Eine Zeilenhöhe
   für alle drei. Und die Größe: der innere <span> brachte 64 px mit und
   überstimmte die Staffel (58 px). */
.brz-slick-slider .slick-slide h1,
.brz-slick-slider .slick-slide h2,
.brz-slick-slider .slick-slide h1 span,
.brz-slick-slider .slick-slide h2 span,
.brz-slick-slider .slick-slide h1 strong,
.brz-slick-slider .slick-slide h2 strong {
  font-size: clamp(30px, 4.2vw, 58px) !important;
  line-height: 1.1 !important;
}

/* --- Lila-Rahmen am Terminknopf ------------------------------------------
   Der Hintergrund war gegen das WordPress-Starttheme abgesichert, der
   Rahmen nicht: beim Überfahren wurde der Knopf 2 px breiter und bekam
   einen blauvioletten Rand. */
.fw-chip--klick:hover,
.fw-chip--klick:focus,
.fw-chip--klick:focus-visible,
.fw-chip--klick:active { border: 0 !important; }

/* --- Neuigkeiten: die erste Karte hatte eine andere Textkante -------------
   Ihre innere Zeile trug 0 statt 10 px Polster - der Text stand 10 px
   weiter links als in den drei Karten darunter. */
#neuigkeiten .brz-row--inner { padding: 10px !important; }

/* --- Kontakt: das Formular endete 32 px vor der Rasterkante --------------- */
@media (min-width: 992px) {
  /* Nur das Polster der rechten Spalte wegnehmen, damit das Formular bis an
     die Rasterkante reicht. KEIN gap auf der Zeile: die beiden Spalten sind
     je 50 % breit, mit 32 px Abstand passen sie nicht mehr nebeneinander
     und rutschen untereinander. */
  #kontakt .brz-columns:last-child > .brz-column__items {
    padding-right: 0 !important;
  }
}

/* --- Formularbeschriftungen lesbar (3,04:1 -> 4,7:1) ----------------------
   #8c959d stand an vier Stellen und war spezifischer - deshalb hier mit
   Nachdruck. Im hochgeschobenen Zustand bleibt die eigene Farbe. */
.fw-feldname,
.fw-a__name,
.fw-feld .fw-feldname,
.fc-form .fw-feldname { color: #6c7780 !important; }

.fw-feld:focus-within .fw-feldname { color: var(--fw-gruen) !important; }

/* --- Grüne Aktionskarte: zwei Textstufen waren zu blass ------------------- */
.fw-info--aktion .fw-info__marke { color: #e8fbdb !important; }
.fw-info--aktion .fw-info__hinweis { color: #f0f5f8 !important; }

/* --- Blickleiste: der Strich ganz rechts hatte kein Gegenstück links ------ */
.fw-blickleiste .brz-columns:last-child::after { display: none; }
.fw-blickleiste .brz-columns:last-child { border-right: 0 !important; }

/* --- Eingabefelder zeigen jetzt auch beim Überfahren, dass sie aktiv sind - */
.fw-feld input:hover,
.fw-feld textarea:hover,
.fc-form input:hover,
.fc-form textarea:hover { border-color: #c2ccd3 !important; }

/* Die Brizy-Typoklasse .brz-tp-lg-heading3 setzt 1,4em Aussenabstand oben
   (53 px bei 38 px Schrift) und ist spezifischer als die Klassenregel
   weiter oben - deshalb hier mit dem Abschnitt davor. */
#faq .fw-abschnittstitel,
#impressionen-8 .fw-abschnittstitel,
#kontakt .fw-abschnittstitel { margin-top: 0 !important; }

/* ==========================================================================
   Durchsicht 03.08.2026 - Befunde aus der Popup-Prüfung
   ========================================================================== */

/* --- Fahrzeuge: leere Bildfelder ausblenden -------------------------------
   Vier der elf Reiter (Cupra Formentor, Cupra Leon, Ford Kuga, Honda Hornet)
   haben kein Foto, sondern einen Brizy-Platzhalter - beim Öffnen sah man
   623x415 px Nichts, ausgerechnet im zuerst aktiven Reiter. Solange keine
   echten Fahrzeugfotos da sind, bleibt die Fläche weg. */
.brz-image:has(.brz-shortcode__placeholder),
.brz-picture:has(.brz-shortcode__placeholder) {
  display: none !important;
}

/* --- Impressum und Datenschutz: der Text steckte in einem Rollfeld --------
   Brizy hatte der inneren Zeile eine feste Höhe von 720 px verpasst. Der
   Datenschutztext ist 9772 px lang - er brach unten mitten im Satz ab, und
   das versteckte Rollfeld hatte nicht einmal einen sichtbaren Balken.
   Jetzt rollt die Karte selbst, wie bei den anderen zehn Popups. */
.brz-popup2 .brz-row--inner,
.fw-poptext .brz-row--inner,
.fw-poptext .brz-row {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* --- Willkommen: die zweite Bildspalte war auf 48 px gequetscht -----------
   Die Handy-Regel griff nur für die erste Spalte; die zweite bekam gar
   keine Höhe und blieb als sinnloser Streifen über der Überschrift stehen. */
@media (max-width: 991px) {
  .brz-popup2 .brz-columns:has(.fw-bildoverlay):not(:first-child) {
    display: none;
  }
}

/* --- Willkommen: die letzte Zeile klebte am Kartenrand -------------------- */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner > .brz-container__wrap {
  padding-bottom: 28px;
}

/* --- Grün als Textfarbe ist zu hell (3,46:1) ------------------------------
   #4c9c14 trägt gut Flächen, aber als Schrift auf Weiß reicht es nicht.
   Zwischentitel, Reiterzusätze und die grünen Zeilen in Impressum und
   Datenschutz laufen deshalb auf dem tieferen Ton. Flächen bleiben. */
.brz-popup2 .fw-zwischen,
.brz-popup2 .fw-zwischen__wort,
.brz-popup2 .fw-tabs__zusatz,
.brz-popup2 .fw-rechtstitel,
.brz-popup2 .fw-rechtszwischen {
  color: #3a6e15 !important;
}

/* Der aktive Reiter: Weiß auf der Markierung war ebenfalls 3,46:1 */
.brz-popup2 .fw-tabs .bouncy-tabs__indicator {
  background-color: #3a6e15 !important;
}

/* --- Reiterleiste auf dem Handy: schieben statt umbrechen -----------------
   Elf Reiter umgebrochen füllten 321 px - 39 % der Karte, bevor der Inhalt
   anfing. Als schiebbare Leiste bleibt es eine Zeile. */
@media (max-width: 991px) {
  .brz-popup2 .fw-tabs .bouncy-tabs__nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .brz-popup2 .fw-tabs .bouncy-tabs__nav::-webkit-scrollbar { display: none; }
  .brz-popup2 .fw-tabs .bouncy-tabs__button {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* --- Slider-Punkte: kleine Marke, große Trefferfläche --------------------
   Meine Regel für den Daumen hatte aus den Punkten 44-px-Quadrate gemacht -
   sichtbar viel zu groß. Der Knopf bleibt 44 px, ist aber unsichtbar; die
   Marke darin ist wieder klein. Quadrate, weil die Vorlage
   .brz-slick-slider__dots--square heißt. */
.brz .brz-slick-slider__dots li button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  padding: 0 !important;
  font-size: 0;
}

.brz .brz-slick-slider__dots li button::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 2px;
  background: transparent;
  transition: background-color .25s ease, transform .25s ease;
}

.brz .brz-slick-slider__dots li.slick-active button::before {
  background: #fff;
  transform: scale(1.15);
}

.brz .brz-slick-slider__dots li button:hover::before {
  background: rgba(255, 255, 255, .5);
}

/* Die Punkte liegen auf hellen wie dunklen Fotos - ein weicher Schatten
   hält sie überall sichtbar. */
.brz .brz-slick-slider__dots li button::before {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Der aktive Punkt hatte zusätzlich eine weiße Fläche am <li> - das war das
   große helle Quadrat im Bild. Die Marke sitzt am Knopf, nicht am li. */
.brz .brz-slick-slider__dots li,
.brz .brz-slick-slider__dots li.slick-active,
.brz .brz-slick-slider__dots li.slick-active button,
.brz .brz-slick-slider .brz-slick-slider__dots li.slick-active button {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --- Willkommens-Popup: ruhiger und eine Nummer kleiner -------------------
   Es ist das Erste, was jeder Besucher sieht. Die Überschrift lief mit 58 px
   über zwei Zeilen und nahm ein Drittel der Karte ein; unter jedem der zwölf
   Punkte lag zusätzlich eine Haarlinie - viel Unruhe für eine Aufzählung.
   Jetzt: kleinere, leichtere Überschrift mit mehr Luft danach, Linien weg,
   dafür etwas mehr Abstand zwischen den Punkten. */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h1,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h2,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h3,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .fw-poptitel {
  font-size: clamp(26px, 2.6vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em;
  margin-bottom: 1.1em !important;
}

/* Zwischen den zwölf Punkten stehen echte <hr> aus dem Originalinhalt -
   2 px kräftiges Grau, das gab der Liste einen Gitterrost-Eindruck. Sie
   bleiben (sie trennen die Punkte sauber), aber als feine helle Linie. */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-hr {
  border: 0 !important;
  border-top: 1px solid rgba(29, 42, 22, .1) !important;
  height: 0 !important;
  margin-block: 4px !important;
  width: 100% !important;
}

#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner p {
  padding-block: 5px !important;
  font-size: var(--fw-t-text) !important;
  line-height: 1.55 !important;
}

/* Der Haken davor darf etwas kleiner sein - er stand groesser da als der
   Text daneben. */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner p img,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner p svg {
  width: 18px !important;
  height: 18px !important;
}

/* Damit nichts mehr unten abgeschnitten wird */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner .brz-column__items {
  padding-block: clamp(24px, 3vw, 40px) !important;
}

/* ==========================================================================
   Feinschliff 03.08.2026 - aus der zweiten Designdurchsicht
   ========================================================================== */

/* --- Galerie: Bilder werden gequetscht -----------------------------------
   16 Bilder standen auf object-fit:fill in 274x205 - jedes Hochformat wurde
   auf 4:3 gestaucht. Jetzt beschneiden statt verzerren. Die Helligkeit
   streute um Faktor 1,7 (L=98 bis 170); ein Deckel zieht sie zusammen,
   ohne einzelne Bilder aufzuhellen. Und beim Überfahren kommt die Farbe
   zurück - ein billiger Griff mit teurer Wirkung. */
#impressionen-8 .brz-image__gallery-item img,
#impressionen-8 .brz-image img {
  object-fit: cover !important;
  aspect-ratio: 4 / 3;
  width: 100% !important;
  height: 100% !important;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: filter .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

#impressionen-8 .brz-image:hover img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.02);
}

#impressionen-8 .brz-image,
#impressionen-8 .brz-image__wrapper {
  border-radius: var(--fw-rund-karte);
  overflow: hidden;
}

/* --- Ein Kartenstil für die ganze Seite -----------------------------------
   Die Kontaktkarten sind die hochwertigste Stelle der Seite: heller Grund,
   feiner Rand, Tiefe. Die Neuigkeiten-Karten daneben waren nur Umrisse -
   ohne Grund, ohne Rand, ohne Schatten. Jetzt dieselbe Machart. */
#neuigkeiten .fw-info {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--fw-schatten-2);
  border-radius: var(--fw-rund-karte);
}

/* Die grüne Aktionskarte behält ihre Farbe - sie ist der Akzent der Spalte */
#neuigkeiten .fw-info--aktion { background: rgba(61, 111, 47, .9); }

/* --- Kacheln: eine Bildstimmung statt sechs ------------------------------
   Gemessen lag "Büro/Theorie" bei Helligkeit 101, "Team" bei 51 - doppelt
   so hell, dazu rosastichig. Ein gemeinsamer Deckel bringt alle sechs in
   dasselbe Band, ohne einzelne Bilder anzufassen. */
.fw-kachel .brz-bg-image {
  filter: grayscale(.35) brightness(.62) saturate(.9);
  transition: filter .3s ease;
}

.fw-kachel:hover .brz-bg-image { filter: grayscale(.15) brightness(.78) saturate(1); }

/* etwas mehr Höhe: 186 px bei 580 px Breite wirkten wie Balken */
.brz .fw-kachel { min-height: 220px; }

@media (max-width: 991px) { .brz .fw-kachel { min-height: 150px; } }

/* --- Übergänge zwischen den Abschnitten ----------------------------------
   Vier harte Schnitte, dazwischen ein Sprung von Helligkeit 47 auf 240.
   Eine feine Lichtkante oben an den dunklen Abschnitten nimmt die Härte. */
#neuigkeiten > .brz-section__content,
#kontakt > .brz-section__content {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* --- Fußzeile deutlicher vom Kontaktbereich absetzen ---------------------
   Beide waren fast gleich dunkel (Helligkeit 46 gegen 40) - 1527 px am
   Stück ohne erkennbare Grenze. */
.fw-fuss {
  background: #161a1c;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* --- FAQ: 2686 px in einem Grün, 28 gleiche Balken -----------------------
   Der Block ist ein Drittel der Seite. Bei 1138 px Breite und 58 px Höhe
   hat jede Zeile ein Verhältnis von 19,6:1 - das liest sich als Balken,
   nicht als Frage. Und der Abstand war innerhalb einer Gruppe genauso groß
   wie zwischen zwei Gruppen, deshalb gingen die sechs Zwischentitel unter.
   Schmaler, gestaffelt, mit Verlauf statt Vollton. */
#faq .brz-container { max-width: 900px; }

#faq .brz-accordion > .brz-accordion__item { margin-bottom: 8px !important; }

#faq .fw-faq-gruppe,
#faq .brz-wrapper:has(> .brz-rich-text h1),
#faq .brz-wrapper:has(> .brz-rich-text h2),
#faq .brz-wrapper:has(> .brz-rich-text h3) {
  margin-top: 40px !important;
}

/* Der erste Titel ("FAQ") braucht den Zuschlag nicht */
#faq .brz-wrapper:first-of-type { margin-top: 0 !important; }

#faq > .brz-section__content {
  background-image: linear-gradient(180deg, #4c9c14 0%, #3f8511 100%) !important;
}

/* Die Zwischentitel bekommen einen Strich, damit die Gliederung sichtbar
   wird - dasselbe Mittel wie bei den Abschnittstiteln der Seite. */
#faq h3:not(.fw-abschnittstitel),
#faq h2:not(.fw-abschnittstitel) {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--fw-t-h4) !important;
  position: relative;
  padding-bottom: 14px;
}

#faq h3:not(.fw-abschnittstitel)::after,
#faq h2:not(.fw-abschnittstitel)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .5);
}

/* Die Zeilen als Karte statt als Kapsel */
#faq .brz-accordion__item {
  border-radius: var(--fw-rund-feld) !important;
  box-shadow: var(--fw-schatten-1);
}

#faq .brz-accordion__item--active {
  box-shadow: var(--fw-schatten-2);
  border-left: 3px solid var(--fw-gruen) !important;
}

/* --- Impressum und Datenschutz: der Anfang war unerreichbar ---------------
   Nachdem die feste Höhe der inneren Zeile weg war (damit der lange
   Datenschutztext überhaupt vollständig lesbar wird), war der Inhalt in
   einem senkrecht ZENTRIERTEN Flex-Kasten. Ist der Inhalt höher als der
   Kasten, hängt er oben UND unten heraus - und was oben heraushängt,
   erreicht kein Rollbalken. Die Datenschutzerklärung begann deshalb auf
   dem Telefon mitten im Text bei "Server-Log-Dateien"; die Überschrift lag
   6884 px über dem Fenster.
   "safe center" zentriert nur, solange es passt, und richtet sonst oben
   aus. Ältere Browser bekommen über den zweiten Block flex-start. */
   ACHTUNG: nur auf den waagerechten Flex-Kästen. .brz-columns und
   .brz-column__items laufen senkrecht - dort steuert align-items die
   WAAGERECHTE, und "center" hat die Aufzählung im Willkommens-Popup
   zickzack zentriert statt linksbündig gesetzt. */
.brz-popup2 .brz-popup2__inner,
.brz-popup2 .brz-popup2__inner .brz-row {
  align-items: safe center;
}

/* Der eigentliche Übeltäter: .brz-row__container hat eine feste Höhe (716 px)
   UND align-items:center - der 1878 px hohe Rechtstext hing dadurch zur
   Hälfte oben heraus. In den Textpopups darf die Zeile mitwachsen. */
.fw-poptext .brz-row__container,
.brz-popup2 .brz-row__container:has(.fw-rechtstitel),
.brz-popup2 .brz-row__container:has(.fw-rechtszwischen) {
  align-items: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
}

@supports not (align-items: safe center) {
  .brz-popup2 .brz-popup2__inner,
  .brz-popup2 .brz-popup2__inner .brz-row {
    align-items: flex-start;
  }
}

/* --- Fahrzeuge: der leere Kasten bleibt trotzdem stehen -------------------
   Das Bild war ausgeblendet, seine Hülle nicht - beim ersten Reiter sah man
   "Automatik" und darunter 200 px weiße Fläche. */
.bouncy-tabs__item-visual:not(:has(img)),
.brz-popup2 .brz-image__wrapper:has(.brz-shortcode__placeholder),
.brz-popup2 .brz-wrapper:has(> .brz-image .brz-shortcode__placeholder) {
  display: none !important;
}

/* --- Willkommens-Popup: Aufzählung linksbündig ---------------------------
   Jeder Punkt war ein eigener, mittig gesetzter Block - die Häkchen standen
   dadurch im Zickzack statt in einer Spalte. */
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner .brz-column__items,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner .brz-columns,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner .brz-rich-text {
  align-items: flex-start !important;
}

#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner p,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner .brz-rich-text,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h1,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h2,
#mgcdihbcvpmzuvbkkvlbhbedjlxabejrjqzr .brz-popup2__inner h3 {
  text-align: left !important;
  width: 100%;
}

/* Die reinen Textpopups (Impressum, Datenschutz) sind länger als das
   Fenster - sie beginnen immer oben, nie mittig. Sonst rutscht die
   Überschrift über den Rand. */
.brz-popup2.fw-poptext .brz-popup2__inner { align-items: flex-start !important; }

/* ==========================================================================
   Popup-Ränder: ein System für alle zwölf, innen wie außen
   ==========================================================================
   Gemessen war ein Flickenteppich:
     - drei Popups hingen OBEN aus dem Bild (Deine Fahrschule -47 px,
       Impressum -243, Datenschutz -193) - die Überschrift war nicht
       erreichbar, weil senkrecht zentrierter Überlauf nach oben nicht
       scrollbar ist
     - oben und unten verschieden viel Luft (Anmeldung 25/60, Team 12/73,
       Klassen mobil 3/18, Datenschutz mobil 3/167)
     - Spaltenpolster 32/35 in der Bildspalte gegen 43 in der Textspalte
     - das Aktion-Popup hatte innen gar keine Rundung (0 statt 16)

   Die Regel dahinter:
     Karte  = 16 px Rundung, mindestens 40 px Luft zum Fensterrand
              (mobil 12), mittig solange sie passt, sonst oben beginnend
     Innen  = Textspalte clamp(22px, 2.4vw, 40px), Bildspalte 0
     Bild   = folgt der Karte: links gerundet am Rechner, oben am Telefon
   ========================================================================== */

.brz-popup2 .brz-popup2__inner {
  /* flex-start statt center: bei zu hohem Inhalt hängt sonst die Hälfte
     oben heraus, und dorthin kommt kein Rollbalken. */
  align-items: flex-start !important;
  padding: clamp(12px, 4.5vh, 44px) clamp(12px, 4vw, 48px) !important;
}

.brz-popup2 .brz-popup2__inner > .brz-container__wrap {
  /* auto oben UND unten zentriert die Karte, solange Platz ist - und
     verhält sich beim Überlauf trotzdem wie flex-start. */
  margin-block: auto !important;
  max-height: none !important;
  border-radius: var(--fw-rund-karte) !important;
  overflow: hidden;
}

/* Gerollt wird in der Karte, nicht am Fenster */
.brz-popup2 .brz-popup2__inner > .brz-container__wrap {
  max-height: calc(100vh - clamp(24px, 9vh, 88px)) !important;
  overflow-y: auto;
}

/* --- Innenabstände: ein Wert für alle Textspalten ------------------------ */
.brz-popup2 .brz-popup2__inner .brz-columns .brz-column__items {
  padding: clamp(22px, 2.4vw, 40px) !important;
}

/* Bildspalten tragen keinen Innenabstand - das Foto geht bis an die Kante */
.brz-popup2 .brz-popup2__inner .brz-columns:has(.fw-bildoverlay) > .brz-column__items,
.brz-popup2 .brz-popup2__inner .brz-columns:has(> .brz-bg > .brz-bg-image) > .brz-column__items {
  padding: 0 !important;
}

/* --- Rundung der Flächen INNEN folgt der Karte ---------------------------
   Am Rechner sitzt das Foto links, am Telefon oben. Alle Ebenen der
   Bildspalte bekommen dieselbe Rundung, sonst schaut eine Ecke heraus. */
@media (min-width: 992px) {
  .brz-popup2 .brz-columns:first-child > .brz-column__items > .brz-bg,
  .brz-popup2 .brz-columns:first-child > .brz-column__items > .brz-bg > *,
  .brz-popup2 .brz-columns:first-child > .brz-bg,
  .brz-popup2 .brz-columns:first-child > .brz-bg > * {
    border-radius: var(--fw-rund-karte) 0 0 var(--fw-rund-karte) !important;
  }
}

@media (max-width: 991px) {
  .brz-popup2 .brz-columns:first-child > .brz-column__items > .brz-bg,
  .brz-popup2 .brz-columns:first-child > .brz-column__items > .brz-bg > *,
  .brz-popup2 .brz-columns:first-child > .brz-bg,
  .brz-popup2 .brz-columns:first-child > .brz-bg > * {
    border-radius: var(--fw-rund-karte) var(--fw-rund-karte) 0 0 !important;
  }
}

/* Das Aktion-Popup legt sein Foto hinter die ganze Zeile statt in eine
   Spalte - dort saß gar keine Rundung, die Ecken standen eckig in der
   runden Karte. */
.brz-popup2 .fw-zeilengrund,
.brz-popup2 .fw-zeilengrund > .brz-bg,
.brz-popup2 .fw-zeilengrund > .brz-bg > * {
  border-radius: var(--fw-rund-karte) !important;
  overflow: hidden;
}

/* Der helle Streifen unten links: die Bildzeile endet acht Pixel über der
   Kartenkante, dazwischen blitzte das Weiß der Karte durch die Rundung.
   Die Bildfläche läuft jetzt ein Stück darüber hinaus - die Karte hat
   overflow:hidden, es steht also nichts über. */
@media (min-width: 992px) {
  .brz-popup2 .brz-columns:has(.fw-bildoverlay) > .brz-column__items > .brz-bg,
  .brz-popup2 .brz-columns:has(.fw-bildoverlay) > .brz-bg {
    bottom: -16px !important;
  }
}

/* --- "Freunde werben Freunde": an die anderen elf angleichen -------------
   Als einziges Popup hatte es sein Bild EINGERÜCKT (57 px vom Rand, 292x388
   schwebend), dasselbe Foto zusätzlich blass als Kartenhintergrund, und bei
   1060 px Kartenbreite blieben rechts 277 px (26 %) leer. Jetzt wie überall:
   Foto randlos in der linken Spalte, Text linksbündig daneben, Karte auf
   den Inhalt zugeschnitten. */
.brz-popup2:has(.fw-info__marke, .fw-aktion__titel) .brz-popup2__inner > .brz-container__wrap,
.brz-popup2.fw-popup-aktion .brz-popup2__inner > .brz-container__wrap {
  max-width: 760px !important;
  flex-basis: 760px !important;
}

/* Der Kartenhintergrund war dasselbe Foto ein zweites Mal - blass, unruhig
   und ohne Aussage. Die Karte bleibt weiß, das Foto sitzt in der Spalte. */
.brz-popup2 .fw-zeilengrund > .brz-bg > .brz-bg-image {
  display: none !important;
}

.brz-popup2 .fw-zeilengrund > .brz-bg > .brz-bg-color {
  background-color: #fff !important;
  background-image: none !important;
}

/* Die Bildspalte randlos, das Foto füllt sie ganz */
.brz-popup2 .fw-zeilengrund .brz-columns:first-child > .brz-column__items {
  padding: 0 !important;
}

.brz-popup2 .fw-zeilengrund .brz-columns:first-child .brz-image,
.brz-popup2 .fw-zeilengrund .brz-columns:first-child .brz-picture {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.brz-popup2 .fw-zeilengrund .brz-columns:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

@media (min-width: 992px) {
  .brz-popup2 .fw-zeilengrund .brz-columns:first-child > .brz-column__items {
    border-radius: var(--fw-rund-karte) 0 0 var(--fw-rund-karte);
    overflow: hidden;
  }
}

@media (max-width: 991px) {
  .brz-popup2 .fw-zeilengrund .brz-columns:first-child > .brz-column__items {
    border-radius: var(--fw-rund-karte) var(--fw-rund-karte) 0 0;
    overflow: hidden;
  }
  /* Auf dem Telefon stand der Text als einziges Popup mittig */
  .brz-popup2 .fw-zeilengrund p,
  .brz-popup2 .fw-zeilengrund h1,
  .brz-popup2 .fw-zeilengrund h2,
  .brz-popup2 .fw-zeilengrund h3,
  .brz-popup2 .fw-zeilengrund h5 {
    text-align: left !important;
  }
}

/* Die letzten Einrückungen im Aktion-Popup: die innere Zeile trägt 10 px
   Polster, der Bildrahmen 5 px Aussenabstand, und das Bild selbst noch
   10 px Eigenrundung - zusammen die 22/15 px, um die das Foto von der
   Kartenkante abstand. */
.brz-popup2 .fw-zeilengrund.brz-row--inner,
.brz-popup2 .brz-row--inner:has(> .brz-columns > .brz-column__items .brz-image) {
  padding: 0 !important;
}

.brz-popup2 .fw-zeilengrund .brz-columns:first-child .brz-wrapper {
  margin: 0 !important;
}

/* Das <picture> hielt seine Hoehe ueber ein padding-top (Brizys Trick fuer
   das Seitenverhaeltnis). Nimmt man das weg, faellt das Bild auf 0 zusammen
   - also stattdessen eine echte Hoehe geben. */
.brz-popup2 .fw-zeilengrund .brz-columns:first-child > .brz-column__items,
.brz-popup2 .fw-zeilengrund .brz-columns:first-child .brz-wrapper {
  height: 100% !important;
  align-self: stretch;
}

.brz-popup2 .fw-zeilengrund .brz-columns:first-child .brz-image,
.brz-popup2 .fw-zeilengrund .brz-columns:first-child .brz-picture {
  border-radius: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  min-height: 220px;
}

.brz-popup2 .fw-zeilengrund .brz-columns:first-child img {
  position: static !important;
  inset: auto !important;
}

/* --- Auswahlfelder: eine Zeile, eine Höhe --------------------------------
   Bei einem langen Termin brach der Wert um, das Feld wuchs von 65 auf
   85 px und stand höher als seine Nachbarn. Die Anzeige ist jetzt gerafft
   (fw.js terminKurz), und falls doch einmal etwas zu lang ist, wird es
   sauber gekürzt statt umgebrochen. */
.fw-select__wert {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.fw-select__knopf {
  min-height: var(--fw-feldhoehe) !important;
  height: var(--fw-feldhoehe);
  align-items: center;
}

/* Die Einträge in der aufgeklappten Liste dürfen umbrechen - dort ist Platz */
.fw-select__eintrag { white-space: normal; }