/* =========================================================
   KÜSTENWERK custom-theme.css
   Konsolidiert aus custom-fonts.css, custom-design.css und kuestenwerk-headings_v2.css.
   Stand: 2026-05-12

   Diese Datei soll testweise folgende Einzeldateien ersetzen:
   - custom-fonts.css
   - custom-design.css
   - kuestenwerk-headings.css

   Vorgehen: erst parallel lokal testen, danach alte Einbindungen entfernen.
   ========================================================= */

@font-face {
  font-family: "Sakana";
  src:
    url("/assets/fonts/sakana/Sakana-Regular.woff2") format("woff2"),
    url("/assets/fonts/sakana/Sakana-Regular.woff") format("woff");
  /* Sakana gibt es nur im Schnitt 400. Der Bereich 100–900 sagt dem Browser:
     dieser Schnitt gilt für jede Stärke. So rechnet er bei 600/700 nichts
     künstlich fett (Regel „Sakana nie fett“, 26.10.2026). */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tt-alter-font: "Sakana", "Big Shoulders Display", sans-serif;

  /* --- Öffnungs-Ampel: EINE Wahrheit für alle drei Auftritte ---------------
     Kopfzeile Desktop (.nav-opening-status-trafficlight), Kopfzeile am Handy
     (.mobile-nav-status-card) und Kontaktseite (.opening-status-trafficlight).
     Vorher hatte die Handy-Variante eigene, hellere Farben und leuchtete über
     `currentColor` WEISS statt in der Ampelfarbe – daher wirkte sie greller.
     Farben bewusst etwas dunkler als reines Signalrot/-grün, das Leuchten
     zweistufig (weicher Hof + enger Kern), damit es nach Ampel aussieht,
     ohne zu strahlen. Änderungen bitte NUR hier. */
  --ampel-rot:   #e04347;
  --ampel-gelb:  #e6ae00;
  --ampel-gruen: #2eb572;
  --ampel-aus:   rgba(255,255,255,0.14);
  --ampel-aus-deckkraft: 0.35;
  --ampel-glow-rot:   0 0 13px rgba(224,67,71,0.62),  0 0 4px rgba(224,67,71,0.8);
  --ampel-glow-gelb:  0 0 13px rgba(230,174,0,0.62),  0 0 4px rgba(230,174,0,0.8);
  --ampel-glow-gruen: 0 0 13px rgba(46,181,114,0.62), 0 0 4px rgba(46,181,114,0.8);

  /* Rahmen um die ganze Ampel – angelehnt an .kwb--special („Jetzt buchen"):
     goldene Kante + weiches goldenes Glimmen, aber dezenter (die Ampel ist
     eine Anzeige, kein Knopf). Radius für alle drei Auftritte gleich. */
  --ampel-radius: 12px;   /* = .kwb--mittel („Jetzt buchen") – Ampel und Button gleich rund */
  --ampel-rahmen: rgba(255,195,0,0.38);
  --ampel-schein: 0 0 16px rgba(255,195,0,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Top-Level: normale Links (z.B. "Kontakt") */
.tt-main-menu .tt-main-menu-list > li:not(.tt-submenu-wrap) > a {
  font-size: 0.95rem !important;
}

/* Top-Level: Submenu-Trigger (z.B. "Fahrerlager", "Events", ...) */
.tt-main-menu .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger > a {
  font-size: 0.95rem !important;
}

/* Submenu-Links */
.tt-main-menu .tt-submenu .tt-submenu-list > li > a {
  font-size: 0.95rem !important;
}

/* optional: mobile lesbarer */
@media (max-width: 991px) {
  .tt-main-menu .tt-main-menu-list > li:not(.tt-submenu-wrap) > a,
  .tt-main-menu .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger > a {
    font-size: 1.05rem !important;
  }
  .tt-main-menu .tt-submenu .tt-submenu-list > li > a {
    font-size: 1.0rem !important;
  }
}

/* =========================
   Headline size calibration
   (only for the listed classes)
   ========================= */

/* Hero Title – normal + mask layer (h1 UND div) */
.page-header-inner .ph-caption .ph-caption-inner .ph-caption-title{
  font-size: clamp(2.1rem, 5.4vw, 5.8rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em;
}

/* Optional: falls Mask-Layer minimal anders wirken soll */
.page-header-inner.ph-mask .ph-caption .ph-caption-inner .ph-caption-title{
  font-size: clamp(2.1rem, 5.4vw, 5.8rem) !important;
}

/* XLG: Ziel-Max ~4.8rem */
.tt-heading.tt-heading-sm .tt-heading-title{
  font-size: clamp(1.9rem, calc(1.1rem + 3.4vw), 3.8rem) !important;
  line-height: 1.00 !important;
  letter-spacing: 0.01em;
}

/* XLG: Ziel-Max ~4.8rem */
.tt-heading.tt-heading-xlg .tt-heading-title{
  font-size: clamp(2.2rem, calc(1.2rem + 4.0vw), 4.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.01em;
}

/* XXLG (Mitte): Ziel-Max ~5.8rem */
.tt-heading.tt-heading-xxlg .tt-heading-title{
  font-size: clamp(2.5rem, calc(1.3rem + 4.6vw), 5.8rem) !important;
  line-height: 1.01 !important;
  letter-spacing: 0.01em;
}

/* XXXLG: Ziel-Max ~6.8rem */
.tt-heading.tt-heading-xxxlg .tt-heading-title{
  font-size: clamp(2.8rem, calc(1.4rem + 5.2vw), 6.8rem) !important;
  line-height: 1.0 !important;
  letter-spacing: 0.01em;
}

/* Optional: Subtitle in XXXLG blocks ebenfalls etwas ruhiger */
.tt-heading.tt-heading-xxxlg .tt-heading-subtitle{
  font-size: 1.0rem !important;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* Default section headings (non-XLG) */
.tt-heading .tt-heading-title{
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.05;
}

/* "Haci" Titles (z.B. Sprint) */
.tt-haci-title{
  font-size: clamp(1.4rem, 2.8vw, 2.0rem);
  line-height: 1.05;
  letter-spacing: 0.015em;
}

/* Fix: tt-text-reveal deckt Display-Fonts (Sakana) vollständig ab */
.tt-text-reveal > span{
  display: inline-block;                 /* statt inline */
  padding-right: 0.30em;                 /* bei Bedarf: 0.30em */
  -webkit-box-decoration-break: clone;   /* wichtig bei Zeilenumbrüchen */
  box-decoration-break: clone;
  background-position: left bottom;      /* konsistent */
}

/* Scroll-down circle text smaller */
.tt-scroll-down text{
  font-size: 50px !important;      /* ggf. 18–24px testen */
  letter-spacing: 8px !important;  /* ggf. 1–3px */
}

/* Crossed scrolling text: minimal smaller */
.tt-scrolling-text-crossed .tt-scrt-content{
  font-size: 0.55em !important;
}

/* Vertical centering for scrolling text */
.tt-scrolling-text-crossed .tt-scrolling-text .tt-scrt-inner{
  display: flex;
  align-items: center;
}

.tt-scrolling-text-crossed .tt-scrolling-text .tt-scrt-content{
  line-height: 1;
}

.tt-scrolling-text-crossed .tt-scrolling-text .tt-scrt-content{
  transform: translateY(4px);
}

/* Footer widget headings smaller */
#tt-footer .tt-footer-widget-heading{
  font-size: 1.15rem !important;   /* z.B. 0.95rem wenn noch zu groß */
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
}

/* Desktop: Main nav nach rechts, Mobile bleibt zentriert */
@media (min-width: 1025px) {
  #tt-header.tt-header-alter .tt-header-col-center {
    justify-content: flex-end !important;
  }
}

@media (min-width: 1025px) {

  /* Dropdown-Indikator (Dot) wirklich killen – auch wenn er als Kreis-Background gebaut ist */
  .tt-main-menu .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger::before,
  .tt-main-menu .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger::after,
  .tt-main-menu .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger > a::before,
  .tt-main-menu .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger > a::after {
    content: "" !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }
    
@media (min-width: 1025px) {
  /* Dropdown/Submenu breiter machen */
  .tt-main-menu .tt-submenu{
    min-width: 320px !important;   /* <- DAS ist der Wert */
  }
}

  /* Danach Pfeil wieder setzen (nur einer) */
  .tt-main-menu .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger > a::after {
    display: inline-block !important;
    content: "\f078" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-left: 0.45em !important;
    font-size: 0.75em !important;
    line-height: 1 !important;
    transform: translateY(-0.38em);
  }
}

.tt-clipper .tt-btn *,
.tt-clipper .btn *{
  color: #212121 !important;
  -webkit-text-fill-color: #212121 !important;
}

/* Right column: center the round pattern horizontally (desktop) */
@media (min-width: 1200px){
  .tt-col-xl-4 .tt-big-round-ptn{
    display: flex;
    justify-content: center;
  }
}
.events-box{
  border: 2px solid #ffc300;
  border-radius: 16px;
  padding: 24px;
}

/* optional: auf kleinen Screens etwas weniger padding */
@media (max-width: 768px){
  .events-box{ padding: 16px; }
}

/* Page Header H1: Splitting-Spans dürfen nicht clippen */
.page-header-inner .ph-caption-title{
  overflow: visible !important;
}

/* Word-Spans im H1 stabilisieren */
.page-header-inner .ph-caption-title .tt-cap-word{
  display: inline-block;           /* ist bei dir schon so, aber sicher */
  overflow: visible !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Rechts „Bleed“ für die schräge Schrift: Jede Wort-Hülle schneidet ab (overflow:hidden fürs Hereinfahren),
   deshalb bekommt jedes Wort rechts Luft. Bis 27.10.2026 hieß es hier „nur das letzte Wort“ (:last-child), das traf
   aber jedes Wort (einziges Kind seiner Hülle) und kompensierte nur ein Drittel: Wortabstand 50 % statt 26 % der
   Schriftgröße. Jetzt holt die Hülle die Luft mit gleich großem negativem Rand zurück → normales Leerzeichen. */
.page-header-inner .ph-caption-title .tt-cap-word{
  padding-right: 0.35em;
}
.page-header-inner .ph-caption-title .tt-cap-word-wrap{
  margin-right: -0.35em;
}

/* Fix: Reveal-Span deckt auch Diakritika (ä/ö/ü) vollständig ab */
h1 span[style*="background-size:"],
h2 span[style*="background-size:"],
h3 span[style*="background-size:"],
h4 span[style*="background-size:"],
h5 span[style*="background-size:"],
h6 span[style*="background-size:"]{
  display: inline-block;
  /* sorgt dafür, dass die Hintergrundfläche wirklich bis über die Umlautpunkte reicht */
  line-height: 1.25;              /* wichtigster Hebel */
  padding-top: 0.22em;            /* “Bleed” nach oben */
  margin-top: -0.22em;            /* optisch wieder zurückziehen */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow: visible;
}

/* Lights Out: startet erst wenn JS .is-inview setzt */
.lights-out-anim{
  display: inline-block;
  animation: lightsOutCycle 5.0s ease-in-out forwards; /* länger */
  animation-play-state: paused;                        /* wichtig */
}

/* wird per JS gesetzt, wenn sichtbar */
.lights-out-anim.is-inview{
  animation-play-state: running;
}

@keyframes lightsOutCycle{
  0%, 45%   { color: #ff2d2d; }  /* rot halten */
  46%, 80%  { color: #28d862; }  /* grün halten */
  100%      { color: #ffc300; }  /* weiß */
}

@media (prefers-reduced-motion: reduce){
  .lights-out-anim{
    animation: none;
    color: #ffffff;
  }
}

/* Buchstaben blitzen nacheinander deutlich auf */
.lights-out-anim.is-inview .lo-char{
  display: inline-block;
  animation: loSpark 0.55s ease-out both;
  animation-delay: calc(var(--i) * 0.16s);
  will-change: filter, text-shadow, color;
}

@keyframes loSpark{
  0%   { filter: none; text-shadow: none; }
  35%  { filter: drop-shadow(0 0 10px rgba(255,45,45,0.95));
         text-shadow: 0 0 18px rgba(255,45,45,0.95);
         color: #ff2d2d; }
  100% { filter: none; text-shadow: none; }
}

/* Bild im Intro-Grid nach oben ausrichten */
.intro-grid-img-col{
  align-self: flex-start; /* statt center/end */
  margin-top: 0;          /* falls irgendwo margin reindrückt */
}

/* Falls der Template-Wrapper wie ein "Rahmen" wirkt: neutralisieren (nur hier) */
.intro-grid-img-col .tt-image,
.intro-grid-img-col figure{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Bild sauber blocken, damit keine "Kanten" durch Inline-Rendering entstehen */
.intro-grid-img-col img{
  display: block;
}

/* Optional: wenn du runde Ecken willst, aber ohne Rahmen-Look */
.intro-grid-img-col .tt-image{
  overflow: hidden; /* sorgt dafür, dass das Bild sauber in der Rundung sitzt */
}

/* Bild minimal tiefer setzen */
.intro-grid-img-col{
  align-self: flex-start;
  margin-top: 12px;   /* z.B. 8–24px testen */
}

/* ==========================================================================
   Startampel (23.10.2026): Startbrücke mit 5 Lampensäulen, je Säule oben
   grün, darunter zwei rot (wie an der Rennstrecke). Ablauf: Säulen werden
   nacheinander rot, nach einer zufälligen Pause (--aus, setzt lightsout.js)
   gehen alle Rot aus und Grün an. Markup zentral in /inc/startampel.html.
   Grundmaß: 1em = eine Lampe (font-size am Gehäuse), alles skaliert mit.
   24.10.2026: Die Ampel ist ein Knopf für den Reaktionstest (lightsout.js).
   ========================================================================== */
.startlights-divider{
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Gehäuse = Brücke + Säulen (ein <button>) */
.startlights{
  --aus: 4s;
  position: relative;
  display: inline-flex;
  gap: .55em;
  margin: 0;
  padding: 1.1em .9em 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.startlights:focus-visible{
  outline: 2px solid #ffc300;
  outline-offset: 6px;
  border-radius: .3em;
}
/* Neustart: Animationen kurz entfernen, damit sie von vorn laufen */
.startlights.sl-neu .sl-lampe{ animation: none; }

/* Hinweis und Ergebnis unter der Ampel */
.sl-ergebnis{
  margin: 12px 0 0;
  min-height: 24px; /* Höhe mit Zeit-Ergebnis, damit nichts springt */
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .08em;
  text-align: center;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 10px rgba(0,0,0,.85); /* lesbar über hellem Hero-Video */
}
.sl-ergebnis b{
  font-size: 15px;
  letter-spacing: .02em;
  color: #ffc300;
}

/* Querträger mit gelber Kante und zwei Schrauben */
.startlights::before,
.startlights::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.startlights::before{
  height: .66em;
  border-top: 2px solid #ffc300;
  border-radius: .12em;
  background:
    repeating-linear-gradient(90deg, transparent 0 .5em, rgba(255,255,255,.035) .5em .56em),
    linear-gradient(180deg, #3b3b3b, #171717 55%, #0b0b0b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 .2em .5em rgba(0,0,0,.65);
}
.startlights::after{
  top: .22em;
  left: .3em;
  right: .3em;
  height: .2em;
  background:
    radial-gradient(circle, #8a8a8a 0 .05em, #3a3a3a .07em, transparent .09em) left / .2em .2em no-repeat,
    radial-gradient(circle, #8a8a8a 0 .05em, #3a3a3a .07em, transparent .09em) right / .2em .2em no-repeat;
}

/* Lampensäule */
.startlights .sl-saeule{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4em;
  padding: .44em .36em;
  border-radius: .3em;
  background: linear-gradient(90deg, #0b0b0b, #232323 48%, #0b0b0b);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 .3em .7em rgba(0,0,0,.7);
}
/* Halterung zum Querträger */
.startlights .sl-saeule::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -.46em;
  width: .5em;
  height: .46em;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #262626, #5a5a5a 50%, #262626);
}

/* Lampe (aus = dunkel getönt, mit Glasreflex) */
.startlights .sl-lampe{
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3d0c0c;
  background-image: radial-gradient(circle at 34% 30%, rgba(255,255,255,.26), transparent 44%);
  box-shadow: inset 0 .1em .25em rgba(0,0,0,.85), 0 0 0 .07em #050505;
  animation-duration: .12s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused; /* startet erst mit .is-inview */
}
.startlights .sl-gruen{ background-color: #0c3a1d; }

/* LED-Raster */
.startlights .sl-lampe::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 .05em, rgba(0,0,0,.45) .075em) center / .2em .2em;
}
/* Blende über jeder Lampe */
.startlights .sl-lampe::after{
  content: "";
  position: absolute;
  inset: -.14em;
  border-radius: 50%;
  border-top: .17em solid #2e2e2e;
}

/* Ablauf: Säule für Säule rot, bei --aus Rot aus und Grün an */
.startlights.is-inview .sl-lampe{ animation-play-state: running; }
.startlights .sl-rot{
  animation-name: sl-rot-an, sl-rot-aus;
  animation-delay: var(--an), var(--aus);
}
.startlights .sl-gruen{
  animation-name: sl-gruen-an;
  animation-delay: var(--aus);
}
.startlights .sl-saeule:nth-child(1){ --an: .6s; }
.startlights .sl-saeule:nth-child(2){ --an: 1.2s; }
.startlights .sl-saeule:nth-child(3){ --an: 1.8s; }
.startlights .sl-saeule:nth-child(4){ --an: 2.4s; }
.startlights .sl-saeule:nth-child(5){ --an: 3s; }

@keyframes sl-rot-an{
  to{
    background-color: #ff2d2d;
    box-shadow: inset 0 0 .2em rgba(255,255,255,.55), 0 0 .5em rgba(255,45,45,.95), 0 0 1.4em rgba(255,45,45,.5);
  }
}
@keyframes sl-rot-aus{
  to{
    background-color: #3d0c0c;
    box-shadow: inset 0 .1em .25em rgba(0,0,0,.85), 0 0 0 .07em #050505;
  }
}
@keyframes sl-gruen-an{
  to{
    background-color: #28d862;
    box-shadow: inset 0 0 .2em rgba(255,255,255,.55), 0 0 .5em rgba(40,216,98,.95), 0 0 1.4em rgba(40,216,98,.5);
  }
}

/* Ohne Bewegung: gleich den Endzustand zeigen (Grün an); der selbst gestartete Test läuft trotzdem */
@media (prefers-reduced-motion: reduce){
  .startlights:not(.sl-test) .sl-lampe{ animation: none !important; }
  .startlights:not(.sl-test) .sl-gruen{
    background-color: #28d862;
    box-shadow: inset 0 0 .2em rgba(255,255,255,.55), 0 0 .5em rgba(40,216,98,.95), 0 0 1.4em rgba(40,216,98,.5);
  }
}

@media (max-width: 767px){
  .startlights{ font-size: 13px; }
}

/* ==========================================================================
   H1-Dachzeile im Hero (26.10.2026, neu.html + Coming Soon): klein in Gold mit Strichen links und rechts,
   darunter groß der Spruch „Raue Küste. Pole im Blick.“ als normaler Text (keine Überschrift). Die H1 trägt
   das Suchwort wie der Seitentitel. In der gelben Hover-Maske von neu.html steht sie in Schriftfarbe.
   ========================================================================== */
.kw-dachzeile{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 26px; /* Luft zu den Umlaut-Punkten im großen Spruch (Ü in Küste) */
  padding: 0;
  /* 01.11.2026: Big Shoulders wie alle Beschriftungen (Tobi, Variante D); vorher Poppins 400 19 px ohne Sperrung.
     Grundlinie → Versalhöhe des Spruchs gemessen: nur 0,2–0,6 px anders, die Abstände unten bleiben. */
  font: 700 25px/1.2 "Big Shoulders Display", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffc300;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.kw-dachzeile::before,
.kw-dachzeile::after{
  content: "";
  flex: 0 0 40px;
  height: 2px;
  background: currentColor;
  opacity: .85;
}
.ph-mask .kw-dachzeile{ color: inherit; text-shadow: none; }
/* Abstand Dachzeile → Spruch optisch gleich dem Abstand Spruch → Slogan (Tobi, 25.10.2026), gemessen Buchstabe
   zu Buchstabe bei 375/1440/1920 px. Wächst mit der Breite, weil der Spruch mitwächst; Deckel, wo der Spruch seine
   Höchstgröße erreicht. neu.html braucht etwas mehr (Spruch-Zeilenhöhe 0,92 statt 0,95). */
#page-header .kw-dachzeile{ margin-bottom: min(calc(27px + .78vw), 42px); }
.kw-coming-soon-inner .kw-dachzeile{ margin-bottom: min(calc(27px + .63vw), 41px); }
/* Theme-Wortrahmen (.tt-cap-word-wrap, overflow:hidden fürs Hereinfahren) schnitt bei Zeilenhöhe 0,92 die
   Umlaut-Punkte ab („KUSTE“). Oben Luft geben, ohne das Layout zu verschieben. Gilt für alle Hero-Titel.
   27.10.2026: 0,2 → 0,3 em. Bei 0,2 fehlte oben an den Ü-Punkten noch eine Pixelreihe (gemessen 375/412/1440 px
   gegen ungeschnittene Darstellung); ab 0,3 em pixelgleich. */
.ph-caption-title .tt-cap-word-wrap{ padding-top: .3em; margin-top: -.3em; }
@media (max-width: 767px){ /* 01.11.2026: 14 statt 16 px (Tobi: brach am iPhone um). Die Zeile ist so breit wie der
     Spruch darunter (~266 px); bei 16 px blieben nur ~20 px Luft, Safari setzt Poppins etwas breiter. Jetzt ~50 px. */
  .kw-dachzeile{ gap: 8px; margin-bottom: 18px; font-size: 19px; }
  .kw-dachzeile::before, .kw-dachzeile::after{ flex-basis: 16px; }
  /* die größere Handy-Schrift (16 statt 12 px) rückt die Grundlinie ~1 px höher: 1 px weniger Abstand */
  #page-header .kw-dachzeile{ margin-bottom: calc(26px + .78vw); }
  .kw-coming-soon-inner .kw-dachzeile{ margin-bottom: calc(26px + .63vw); }
}

/* ==========================================================================
   Masken-Kreis im Hero von neu.html (25.10.2026): Der Übergang gilt nur noch dem Radius (--r), nicht mehr
   der Position. Vorher hing an clip-path ein Übergang, der bei jeder Mausbewegung neu startete.
   Die Position setzt theme.js je Bild (--x/--y in px). Ohne @property-Unterstützung springt nur der Radius.
   ========================================================================== */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ph-mask{
  clip-path: circle(var(--r) at var(--x, 50%) var(--y, 50%));
  transition: --r .25s ease-out;
}
body.ph-mask-active .ph-mask{
  --r: clamp(100px, 13vw, 230px);
  clip-path: circle(var(--r) at var(--x, 50%) var(--y, 50%));
}

/* ==========================================================================
   EKG unter „Mehr Puls pro Runde." (25.10.2026), Form wie die freigegebene Grafik
   medien/slogan/slogan-ekg-weiss.svg: Linie blendet links ein, R-Zacke in der Lücke zwischen PULS und PRO
   bis auf Versalhöhe, Punkt am Ende. Markup: <span class="kw-ekg"><span>Mehr Puls</span> <span>pro Runde.</span>
   <svg class="kw-ekg-glut" …><svg class="kw-ekg-zacke" …></span> (beide SVGs mit demselben Pfad) im Slogan-Element. Maße in em für Poppins bei Zeilenhöhe 1,2:
   Grundlinie 0,9425 em unter der Zeilenoberkante, Versalhöhe 0,706 em, Linie 0,3 em unter der Grundlinie.
   Zacken-SVG: 1 Einheit = 0,01 em, Linie bei y 104. Farbe über --ekg (Maske: Schriftfarbe).
   Einzeichnen wie ein Monitor-Durchlauf: alle drei Teile linear mit etwa gleicher Geschwindigkeit
   (links 0,55 s, Zacke 0,16 s, rechts 0,55 s). Startet erst mit .kw-ekg--los (setzt lightsout.js, sobald der
   Slogan wirklich zu sehen ist; auf neu.html blendet das Theme den Hero-Text erst nach ~2 s ein). Kein vector-effect an der Zacke, sonst rechnet der Browser
   die Strich-Animation in Bildschirm-px statt in Pfadlänge, und die Zacke ist viel zu früh fertig.
   ========================================================================== */
.kw-ekg{
  --ekg: #ffc300;
  position: relative;
  display: grid;
  grid-template-columns: 1fr .9em 1fr; /* Lücke immer mittig, darin die Zacke */
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: .3em;
  line-height: 1.2;
}
.ph-mask .kw-ekg{ --ekg: currentColor; }
.kw-ekg > span:first-child{ text-align: right; }
.kw-ekg > span + span{ grid-column: 3; text-align: left; }
.kw-ekg::before,
.kw-ekg::after{
  content: "";
  position: absolute;
  animation: kw-ekg-zeichnen .55s linear .3s both;
  animation-play-state: paused;
}
.kw-ekg::before{
  left: 0;
  right: calc(50% + .565em);
  top: calc(1.2425em - .8px);
  height: 1.6px;
  background: linear-gradient(90deg, transparent, var(--ekg) 55%);
}
.kw-ekg::after{
  left: calc(50% + .695em);
  right: 0;
  top: calc(1.2425em - 2.7px);
  height: 5.4px;
  background:
    radial-gradient(circle, var(--ekg) 0 2.4px, transparent 2.9px) right center / 5.4px 5.4px no-repeat,
    linear-gradient(var(--ekg), var(--ekg)) left center / calc(100% - 2.7px) 1.6px no-repeat;
  animation-delay: 1.01s;
}
.kw-ekg-zacke{
  position: absolute;
  left: calc(50% - .565em);
  top: .2025em;
  width: 1.26em;
  height: 1.3em;
  overflow: visible;
}
.kw-ekg-zacke path{
  fill: none;
  stroke: var(--ekg);
  stroke-width: 8.4; /* SVG-Einheiten = 1,6 px bei 19 px Schrift, wie die Linien */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2; /* Lücke 2, damit vor dem Start kein Rundkappen-Punkt am Pfadende steht */
  animation: kw-ekg-zacke .16s linear .85s both;
  animation-play-state: paused;
}
.kw-ekg--los::before,
.kw-ekg--los::after,
.kw-ekg--los .kw-ekg-zacke path{ animation-play-state: running; }
/* Drei Herzschläge nach dem Einzeichnen wie im Slogan-Reel (26.10.2026): der Slogan zuckt (lub +3 %,
   dub 0,26 s später +1,5 %), die Zacke leuchtet auf und klingt ab. Kurven aus der Reel-Formel erzeugt
   (Schritt 25 ms). Erster Schlag, sobald die Zacke gezeichnet ist (1,01 s nach dem Start), dann nach 0,8 s
   und 0,72 s (schneller werdend wie im Reel). Damit es flüssig bleibt, laufen nur transform und opacity:
   das Leuchten ist eine eigene, einmal vorgezeichnete Kopie der Zacke (.kw-ekg-glut), deren Deckkraft
   animiert wird. Ein animierter Filter direkt an der Zacke kostete zusammen mit dem Zucken Ruckler (gemessen). */
.kw-ekg{
  animation: kw-ekg-puls 2.2s linear 1.01s both;
  animation-play-state: paused;
}
.kw-ekg-glut{
  position: absolute;
  left: calc(50% - .565em);
  top: .2025em;
  width: 1.26em;
  height: 1.3em;
  overflow: visible;
  opacity: 0;
  will-change: opacity;
  filter: drop-shadow(0 0 2px #ffc300) drop-shadow(0 0 6px rgba(255,195,0,.8));
  /* nur forwards: das erste Keyframe ist der Gipfel des 1. Schlags (Deckkraft 1); mit both stand die
     leuchtende Zacke schon vor dem Einzeichnen da */
  animation: kw-ekg-glut 2.2s linear 1.01s forwards;
  animation-play-state: paused;
}
.kw-ekg-glut path{
  fill: none;
  stroke: #ffc300;
  stroke-width: 8.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kw-ekg--los,
.kw-ekg--los .kw-ekg-glut{ animation-play-state: running; }
.ph-mask .kw-ekg-glut{ display: none; }
@keyframes kw-ekg-puls{0%{transform:scale(1.0000)}1.14%{transform:scale(1.0247)}2.27%{transform:scale(1.0300)}3.41%{transform:scale(1.0273)}4.55%{transform:scale(1.0221)}5.68%{transform:scale(1.0167)}6.82%{transform:scale(1.0122)}7.95%{transform:scale(1.0086)}9.09%{transform:scale(1.0060)}10.23%{transform:scale(1.0041)}11.36%{transform:scale(1.0027)}12.5%{transform:scale(1.0109)}13.64%{transform:scale(1.0159)}14.77%{transform:scale(1.0152)}15.91%{transform:scale(1.0127)}17.05%{transform:scale(1.0097)}18.18%{transform:scale(1.0072)}19.32%{transform:scale(1.0051)}20.45%{transform:scale(1.0036)}21.59%{transform:scale(1.0024)}22.73%{transform:scale(1.0016)}23.86%{transform:scale(1.0011)}25%{transform:scale(1.0007)}26.14%{transform:scale(1.0005)}27.27%{transform:scale(1.0003)}28.41%{transform:scale(1.0002)}29.55%{transform:scale(1.0001)}31.82%{transform:scale(1.0001)}32.95%{transform:scale(1.0000)}36.36%{transform:scale(1.0000)}37.5%{transform:scale(1.0247)}38.64%{transform:scale(1.0300)}39.77%{transform:scale(1.0273)}40.91%{transform:scale(1.0221)}42.05%{transform:scale(1.0167)}43.18%{transform:scale(1.0122)}44.32%{transform:scale(1.0086)}45.45%{transform:scale(1.0060)}46.59%{transform:scale(1.0041)}47.73%{transform:scale(1.0027)}48.86%{transform:scale(1.0109)}50%{transform:scale(1.0159)}51.14%{transform:scale(1.0152)}52.27%{transform:scale(1.0127)}53.41%{transform:scale(1.0097)}54.55%{transform:scale(1.0072)}55.68%{transform:scale(1.0051)}56.82%{transform:scale(1.0036)}57.95%{transform:scale(1.0024)}59.09%{transform:scale(1.0016)}60.23%{transform:scale(1.0011)}61.36%{transform:scale(1.0007)}62.5%{transform:scale(1.0005)}63.64%{transform:scale(1.0003)}64.77%{transform:scale(1.0002)}65.91%{transform:scale(1.0001)}68.18%{transform:scale(1.0001)}69.05%{transform:scale(1.0000)}69.09%{transform:scale(1.0000)}69.32%{transform:scale(1.0074)}70.45%{transform:scale(1.0269)}71.59%{transform:scale(1.0299)}72.73%{transform:scale(1.0264)}73.86%{transform:scale(1.0210)}75%{transform:scale(1.0158)}76.14%{transform:scale(1.0114)}77.27%{transform:scale(1.0080)}78.41%{transform:scale(1.0055)}79.55%{transform:scale(1.0038)}80.68%{transform:scale(1.0025)}81.82%{transform:scale(1.0126)}82.95%{transform:scale(1.0160)}84.09%{transform:scale(1.0148)}85.23%{transform:scale(1.0121)}86.36%{transform:scale(1.0092)}87.5%{transform:scale(1.0067)}88.64%{transform:scale(1.0048)}89.77%{transform:scale(1.0033)}90.91%{transform:scale(1.0023)}92.05%{transform:scale(1.0015)}93.18%{transform:scale(1.0010)}94.32%{transform:scale(1.0007)}95.45%{transform:scale(1.0004)}96.59%{transform:scale(1.0003)}97.73%{transform:scale(1.0002)}98.86%{transform:scale(1.0001)}100%{transform:scale(1.0001)}}
@keyframes kw-ekg-glut{0%{opacity:1.00}1.14%{opacity:0.88}2.27%{opacity:0.78}3.41%{opacity:0.69}4.55%{opacity:0.61}5.68%{opacity:0.54}6.82%{opacity:0.47}7.95%{opacity:0.42}9.09%{opacity:0.37}10.23%{opacity:0.32}11.36%{opacity:0.29}12.5%{opacity:0.25}13.64%{opacity:0.22}14.77%{opacity:0.20}15.91%{opacity:0.17}17.05%{opacity:0.15}18.18%{opacity:0.14}19.32%{opacity:0.12}20.45%{opacity:0.11}21.59%{opacity:0.09}22.73%{opacity:0.08}23.86%{opacity:0.07}25%{opacity:0.06}26.14%{opacity:0.06}27.27%{opacity:0.05}28.41%{opacity:0.04}29.55%{opacity:0.04}30.68%{opacity:0.03}32.95%{opacity:0.03}34.09%{opacity:0.02}36.32%{opacity:0.02}36.36%{opacity:1.00}37.5%{opacity:0.88}38.64%{opacity:0.78}39.77%{opacity:0.69}40.91%{opacity:0.61}42.05%{opacity:0.54}43.18%{opacity:0.47}44.32%{opacity:0.42}45.45%{opacity:0.37}46.59%{opacity:0.32}47.73%{opacity:0.29}48.86%{opacity:0.25}50%{opacity:0.22}51.14%{opacity:0.20}52.27%{opacity:0.17}53.41%{opacity:0.15}54.55%{opacity:0.14}55.68%{opacity:0.12}56.82%{opacity:0.11}57.95%{opacity:0.09}59.09%{opacity:0.08}60.23%{opacity:0.07}61.36%{opacity:0.06}62.5%{opacity:0.06}63.64%{opacity:0.05}64.77%{opacity:0.04}65.91%{opacity:0.04}67.05%{opacity:0.03}69.05%{opacity:0.03}69.09%{opacity:1.00}69.32%{opacity:0.98}70.45%{opacity:0.86}71.59%{opacity:0.76}72.73%{opacity:0.67}73.86%{opacity:0.59}75%{opacity:0.52}76.14%{opacity:0.46}77.27%{opacity:0.41}78.41%{opacity:0.36}79.55%{opacity:0.32}80.68%{opacity:0.28}81.82%{opacity:0.25}82.95%{opacity:0.22}84.09%{opacity:0.19}85.23%{opacity:0.17}86.36%{opacity:0.15}87.5%{opacity:0.13}88.64%{opacity:0.12}89.77%{opacity:0.10}90.91%{opacity:0.09}92.05%{opacity:0.08}93.18%{opacity:0.07}94.32%{opacity:0.06}95.45%{opacity:0.06}96.59%{opacity:0.05}97.73%{opacity:0.04}98.86%{opacity:0.04}100%{opacity:0.03}}
@keyframes kw-ekg-zeichnen{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0); } }
@keyframes kw-ekg-zacke{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){
  .kw-ekg, .kw-ekg::before, .kw-ekg::after, .kw-ekg-zacke path{ animation: none; }
  .kw-ekg-glut{ display: none; }
}

/* 25.10.2026: neu.html unter den Laufbändern etwas größer (Rahmen .startlights-gross) */
.startlights-gross .startlights{ font-size: 22px; }
@media (max-width: 767px){
  .startlights-gross .startlights{ font-size: 16px; }
}

.pricing-card{
  position: relative;
  height: 100%;
  padding: 28px;
  border: 2px solid rgba(255, 195, 0, 0.35);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.pricing-card:hover{
  transform: translateY(-4px);
  border-color: #ffc300;
  background: rgba(255,255,255,0.04);
}

.pricing-card-featured{
  border-color: #ffc300;
  background: rgba(255, 195, 0, 0.06);
}

.pricing-badge{position: absolute;
  top: 16px;
  right: 16px;}

.pricing-card-top{
  margin-bottom: 18px;
}

.pricing-title{
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 0.95;
  text-transform: uppercase;
}

.pricing-duration{
  font-size: 18px;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-price{
  margin-bottom: 18px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: #ffc300;
}

.pricing-text{
  margin-bottom: 22px;
  opacity: 0.9;
}

@media (max-width: 768px){
  .pricing-card{
    padding: 22px;
  }

  .pricing-title{
    font-size: 28px;
  }

  .pricing-price{
    font-size: 36px;
  }
}

#preise{
  scroll-margin-top: 40px;
}

.made-in-rostock{
  text-align: center;
  margin-top: 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
  font-family: "Sakana";
}

.made-in-rostock i{
  display: inline-block;
  margin: 0 6px;
  color: #ffc300;
  font-size: 1.95em;
  vertical-align: middle;
  animation: kwPulse 1.8s ease-in-out infinite;
}

@keyframes kwPulse{
  0%, 100%{
    transform: scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(1.18);
    opacity: 0.75;
  }
}

.faq-section {
  padding: 100px 0 50px;
}

.faq-intro {
  max-width: 820px;
  margin: 0 auto 50px;
}

.faq-intro .tt-heading-subtitle {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffc300;
}

.faq-intro p {
  max-width: 720px;
  margin: 18px auto 0;
  color: rgba(255,255,255,0.78);
}

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border: 1px solid rgba(255,195,0,0.18);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255,195,0,0.35);
  background: rgba(255,255,255,0.05);
}

.faq-item.active {
  border-color: rgba(255,195,0,0.75);
  background: rgba(255,195,0,0.06);
  box-shadow: 0 0 0 1px rgba(255,195,0,0.12) inset;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: left;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
}

.faq-question span:first-child {
  line-height: 1.35;
}

.faq-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #ffc300;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
  border-radius: 2px;
}

.faq-icon::before {
  width: 16px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 16px;
}

.faq-item.active .faq-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-answer {
  display: none;
  padding: 0 28px 26px;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-answer p {
  margin: 0;
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  max-width: 95%;
}

@media (max-width: 768px) {
  .faq-section {
    padding: 70px 0;
  }

  .faq-question {
    padding: 20px 20px;
    font-size: 18px;
    gap: 18px;
  }

  .faq-answer {
    padding: 0 20px 22px;
  }

  .faq-answer p {
    max-width: 100%;
    line-height: 1.65;
  }
}

.event-promo-card {
  position: relative;
  padding: 42px 38px;
  border: 1px solid rgba(255, 195, 0, 0.28);
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 0 1px rgba(255, 195, 0, 0.08) inset;
  overflow: hidden;
}

.event-promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255,195,0,0.10), transparent 32%);
  pointer-events: none;
}

.event-promo-badge {display: inline-block;
  margin-bottom: 18px;}

.event-promo-text {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
}

.event-promo-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.event-promo-features span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}

.event-promo-cta-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

@media (max-width: 991px) {
  .event-promo-card {
    padding: 32px 24px;
  }

  .event-promo-cta-wrap {
    justify-content: flex-start;
    margin-top: 28px;
  }
}

@media (max-width: 767px) {
  .event-promo-card {
    padding: 26px 20px;
    border-radius: 18px;
  }

  .event-promo-text {
    line-height: 1.65;
  }

  .event-promo-features {
    gap: 10px;
  }

  .event-promo-features span {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .event-promo-cta {
    width: 100%;
    padding: 0 18px;
    text-align: center;
  }
}

.opening-hours-card {
  position: relative;
  padding: 34px 30px;
  border: 1px solid rgba(255, 195, 0, 0.24);
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 0 1px rgba(255,195,0,0.08) inset;
  overflow: hidden;
}

.opening-hours-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,195,0,0.08), transparent 34%);
  pointer-events: none;
}

/* ÖFFNUNGSZEITEN-Pille: Optik kommt aus kw-pills.css, hier nur der Abstand */
.opening-hours-card > .kwp {
  margin-bottom: 26px;
}

.opening-hours-title {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.1;
  font-family: var(--tt-alter-font);
}

.event-promo-card h2.tt-heading-title,
.event-promo-card h3.tt-heading-title,
.event-promo-card h4.tt-heading-title,
.event-promo-card .tt-heading.tt-heading-xlg .tt-heading-title,
.event-promo-card .tt-heading-title > span,
.event-promo-card .tt-heading-title > div {
  font-size: 34px !important;
  line-height: 1.04 !important;
}

@media (max-width: 767px) {
  .event-promo-card h2.tt-heading-title,
  .event-promo-card h3.tt-heading-title,
  .event-promo-card h4.tt-heading-title,
  .event-promo-card .tt-heading.tt-heading-xlg .tt-heading-title,
  .event-promo-card .tt-heading-title > span,
  .event-promo-card .tt-heading-title > div {
    font-size: 26px !important;
  }
}

/* 26.10.2026: Firmenevents-Spruch auf neu.html („Firmenevents in Rostock: / Raus aus dem Meeting. / Rein ins Grid.“)
   am Handy so groß, dass jede Zeile in eine Zeile passt: längste Zeile ~15,2 em plus kursiver Überhang, Platz = Breite − 64 px (gemessen), 5 % Reserve. */
@media (max-width: 767px) {
  .event-promo-card .tt-heading.tt-heading-xlg .tt-heading-title.kw-h3-promo,
  .event-promo-card .tt-heading.tt-heading-xlg .tt-heading-title.kw-h3-promo > span,
  .event-promo-card .tt-heading.tt-heading-xlg .tt-heading-title.kw-h3-promo > div {
    font-size: clamp(17px, calc((100vw - 64px) / 16.2), 26px) !important;
  }
}

blockquote.open-quote cite {
  font-size: 20px !important;
  line-height: 1.45 !important;
}

/* =========================================================
   ÖFFNUNGSSTATUS – große Card bei den Öffnungszeiten
   ========================================================= */

.opening-status {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: var(--ampel-radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ampel-rahmen);
  box-shadow: var(--ampel-schein);
}

.opening-status-trafficlight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
}

.opening-status-trafficlight .light {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ampel-aus);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, opacity 0.25s ease;
  opacity: var(--ampel-aus-deckkraft);
}

.opening-status-trafficlight .light.is-on {
  opacity: 1;
  transform: scale(1.08);
}

.opening-status-trafficlight .light-red.is-on {
  background: var(--ampel-rot);
  box-shadow: var(--ampel-glow-rot);
}

.opening-status-trafficlight .light-yellow.is-on {
  background: var(--ampel-gelb);
  box-shadow: var(--ampel-glow-gelb);
}

.opening-status-trafficlight .light-green.is-on {
  background: var(--ampel-gruen);
  box-shadow: var(--ampel-glow-gruen);
}

.opening-status-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opening-status-text strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
}

.opening-status-text span,
.opening-status-text small {
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .opening-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

/* =========================================================
   HEADER V2 – normaler Block über dem Hero
   ========================================================= */

#tt-header.kw-header-v2 {
  position: relative !important;
  top: auto;
  left: auto;
  width: 100%;
  z-index: 999;
  margin: 0 !important;
  padding: 0 !important;
  background: #111 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#tt-header.kw-header-v2 .tt-header-inner.kw-header-v2-inner {
  display: flex;
  flex-direction: column;
  /* 26.10.2026: Theme-Abstand (15 px) zwischen Top-Bar und Menüleiste aus. Sobald fe-nav.js die Top-Bar
     festsetzt, fiel er weg und der ganze Inhalt sprang 15 px hoch (Lighthouse CLS 0,355). */
  gap: 0;
  align-items: stretch;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: #111 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Obere dunkle Zeile */
.kw-header-v2-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 30px;
  width: 100%;
  margin: 0 !important;
  padding: 18px 34px;
  background: #111;
  border: 0 !important;
  box-shadow: none !important;
}

.kw-header-v2-logo {
  display: flex;
  align-items: center;
}

.kw-header-v2-logo a {
  display: inline-flex;
  align-items: center;
}

.kw-header-v2-logo img {
  max-height: 72px;
  width: auto;
}

.kw-header-v2-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

/* Buchungsbutton */
.kw-header-v2-booking-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 999px;
  background: #ffc300;
  color: #111 !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(255,195,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.kw-header-v2-booking-btn:hover {
  transform: translateY(-2px);
  background: #ffd347;
  box-shadow: 0 16px 34px rgba(255,195,0,0.24);
}

/* Kleine Ampel im Header */
.nav-opening-status {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 16px;
  border-radius: var(--ampel-radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ampel-rahmen);
  box-shadow: var(--ampel-schein);
}

/* Höhe zum „Jetzt buchen"-Button: NICHT hier setzen. Der Button holt sie sich in
   kw-buttons.css über `#tt-header .kwb{align-self:stretch}` von dieser Ampel –
   beide sind dadurch von selbst exakt gleich hoch (nachgemessen 13.08.2026).
   Ein zusätzlicher translateY-Ausgleich wäre falsch: der 6px-Versatz des Buttons
   wird durch align-self bereits aufgefangen. */

.nav-opening-status-trafficlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
}

.nav-opening-status-trafficlight .light {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ampel-aus);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, opacity 0.25s ease;
  opacity: var(--ampel-aus-deckkraft);
}

.nav-opening-status-trafficlight .light.is-on {
  opacity: 1;
  transform: scale(1.08);
}

.nav-opening-status-trafficlight .light-red.is-on {
  background: var(--ampel-rot);
  box-shadow: var(--ampel-glow-rot);
}

.nav-opening-status-trafficlight .light-yellow.is-on {
  background: var(--ampel-gelb);
  box-shadow: var(--ampel-glow-gelb);
}

.nav-opening-status-trafficlight .light-green.is-on {
  background: var(--ampel-gruen);
  box-shadow: var(--ampel-glow-gruen);
}

.nav-opening-status-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 150px;
}

.nav-opening-label {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.nav-opening-detail {
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  line-height: 1.3;
}

/* Gelber Nav-Streifen */
.kw-header-v2-nav-bar {
  width: 100%;
  margin: 0 !important;
  padding: 0 26px;
  background: #ffc300;
  border: 0 !important;
  box-shadow: none !important;
}

.kw-header-v2-nav-bar .tt-main-menu {
  width: 100%;
}

.kw-header-v2-nav-bar .tt-main-menu-holder,
.kw-header-v2-nav-bar .tt-main-menu-inner,
.kw-header-v2-nav-bar .tt-main-menu-content {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.kw-header-v2-nav-bar .tt-main-menu-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 38px;
  min-height: 58px;
}

.kw-header-v2-nav-bar .tt-main-menu-list > li {
  margin: 0 !important;
}

.kw-header-v2-nav-bar .tt-main-menu-list > li > a,
.kw-header-v2-nav-bar .tt-submenu-trigger > a {
  color: #111 !important;
  font-weight: 700;
}

.kw-header-v2-nav-bar .tt-main-menu-list > li > a:hover,
.kw-header-v2-nav-bar .tt-submenu-trigger > a:hover {
  opacity: 0.72;
}

.kw-header-v2-nav-bar .tt-submenu {
  background: #111;
}

/* Burger */
.kw-header-v2 #tt-m-menu-toggle-btn-wrap {
  display: none;
}

/* Hero / Titelbilder direkt unter dem Header starten lassen */
#tt-content-wrap,
#page-header,
#page-header .page-header-inner,
#page-header .ph-mask-inner,
#page-header .ph-caption {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile */
@media (max-width: 1024px) {
  /* Zweizeilig wie buchen.html: Logo mittig oben, darunter Buchen-Button links + Menü rechts */
  .kw-header-v2-top {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
  }

  .kw-header-v2-top .kw-header-v2-logo {
    justify-content: center;
    transform: none;
  }

  .kw-header-v2-logo img {
    max-height: 46px; /* wie .brand img auf buchen.html (Desktop 46 / Handy 40) */
  }

  .kw-header-v2-actions {
    justify-content: space-between;
  }

  .nav-opening-status {
    display: none;
  }

  .kw-header-v2-booking-btn {
    display: none;
  }

  .kw-header-v2 #tt-m-menu-toggle-btn-wrap {
    display: flex;
    justify-content: flex-end;
  }

}

@media (max-width: 767px) {
  .kw-header-v2-top {
    padding: 12px 12px;
  }

  .kw-header-v2-logo img {
    max-height: 40px;
  }
}

.kw-header-v2-logo {
  display: flex;
  align-items: center;
  transform: translateY(12px);
}

/* 26.10.2026: Am Rechner legt theme.js für den Magnet-Effekt eine Hülle um den Logo-Link (nur ab 1025 px);
   dadurch wird der Logo-Block 8 px höher (Zeilenabstand). Höhe von Anfang an reservieren, sonst springt beim
   Laden die ganze Seite (Lighthouse CLS). Optik danach unverändert. */
@media (min-width: 1025px) {
  .kw-header-v2-logo { min-height: 80px; }
}

.kw-header-v2-nav-bar .tt-submenu {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.kw-header-v2-nav-bar .tt-submenu-list {
  background: #111 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.22) !important;
  padding: 14px 0 !important;
  overflow: hidden;
}

.kw-header-v2-nav-bar .tt-submenu {
  margin-top: 14px !important;
}

.kw-header-v2-nav-bar .tt-submenu {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 10px !important;
}

.kw-header-v2-nav-bar .tt-submenu::before,
.kw-header-v2-nav-bar .tt-submenu::after {
  display: none !important;
  content: none !important;
}

.kw-header-v2-nav-bar .tt-submenu-list {
  background: rgba(17,17,17,0.96) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 38px rgba(0,0,0,0.28) !important;
  padding: 12px 0 !important;
  overflow: hidden;
  min-width: 280px;
}

.kw-header-v2-nav-bar .tt-submenu-list li {
  margin: 0 !important;
}

.kw-header-v2-nav-bar .tt-submenu-list li a {
  display: block;
  padding: 11px 20px !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}

.kw-header-v2-nav-bar .tt-submenu-list li a:hover {
  background: rgba(255,195,0,0.08);
  color: #ffc300 !important;
  padding-left: 24px !important;
}

.kw-header-v2-nav-bar .tt-submenu-list li a {
  font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  font-size: 16px;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

.kw-header-v2-booking-btn,
.nav-opening-status {
  transform: translateY(6px);
}

.kw-header-v2-booking-btn {
  overflow: hidden;
}

.kw-header-v2-booking-btn:hover {
  transform: translateY(6px) !important;
  background: #ffc300 !important;
  box-shadow: 0 12px 28px rgba(255,195,0,0.18) !important;
}

.kw-header-v2-booking-btn span {
  display: inline-block;
  color: #111;
}

#page-header.kw-subpage-header {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  height: clamp(300px, 42vw, 430px);
  width: 100%;
  overflow: hidden;
}

#page-header.kw-subpage-header .page-header-inner {
  position: relative;
  height: 100%;
  width: 100%;
}

#page-header.kw-subpage-header .ph-image,
#page-header.kw-subpage-header .ph-image-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none !important;
}

#page-header.kw-subpage-header .ph-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

#page-header.kw-subpage-header .ph-caption {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
}

#page-header.kw-subpage-header .ph-caption-inner {
  padding-top: 70px;
  padding-bottom: 50px;
}

#page-header.kw-subpage-header .ph-caption-inner {
  padding-top: 70px;
  padding-bottom: 50px;
  transform: translateY(80px);
}

/* =========================
   Header Booking Button V3
   Variante 3 – Cockpit / Motorsport
   ========================= */

.kw-header-v2-booking-btn.kw-header-v3-booking-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;

  /* Höhe / Padding bewusst NICHT anfassen */
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #111 !important;

  border: 1px solid rgba(255, 195, 0, 0.92);
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 100%),
    linear-gradient(135deg, #ffd84a 0%, #ffc300 48%, #f0a500 100%) !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    0 8px 20px rgba(255, 195, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.10);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    filter 0.25s ease;
}

/* feine technische Innenkante */
.kw-header-v2-booking-btn.kw-header-v3-booking-btn::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* kleiner Racing-Akzent links */
.kw-header-v2-booking-btn.kw-header-v3-booking-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) skewX(-18deg);
  border-radius: 3px;
  background: rgba(17, 17, 17, 0.10);
  box-shadow:
    24px 0 0 rgba(17, 17, 17, 0.06),
    48px 0 0 rgba(17, 17, 17, 0.04);
  pointer-events: none;
  opacity: 0.85;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  z-index: 1;
}

.kw-header-v2-booking-btn.kw-header-v3-booking-btn i,
.kw-header-v2-booking-btn.kw-header-v3-booking-btn span {
  position: relative;
  z-index: 2;
}

.kw-header-v2-booking-btn.kw-header-v3-booking-btn i {
  font-size: 0.95em;
  line-height: 1;
  position: relative;
  top: -1px;
  transition: transform 0.25s ease;
}

.kw-header-v2-booking-btn.kw-header-v3-booking-btn span {
  line-height: 1;
}

/* Hover */
.kw-header-v2-booking-btn.kw-header-v3-booking-btn:hover {
  transform: translateY(-2px) scale(1.02);
  color: #000 !important;
  border-color: rgba(255, 195, 0, 1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 100%),
    linear-gradient(135deg, #ffe168 0%, #ffcd1f 48%, #f5ac00 100%) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    0 12px 28px rgba(255, 195, 0, 0.28),
    0 0 0 1px rgba(255, 195, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.48),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  filter: saturate(1.05);
}

.kw-header-v2-booking-btn.kw-header-v3-booking-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) skewX(-18deg) translateX(4px);
}

.kw-header-v2-booking-btn.kw-header-v3-booking-btn:hover i {
  transform: translateX(1px);
}

.kw-header-v2-booking-btn.kw-header-v3-booking-btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.18),
    0 5px 12px rgba(255, 195, 0, 0.16),
    inset 0 2px 5px rgba(0, 0, 0, 0.08);
}

.kw-header-v2-booking-btn.kw-header-v3-booking-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 195, 0, 0.22),
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(255, 195, 0, 0.18);
}

/* =========================================
   MOBILE RESCUE – komplett neu
   ab hier unter dein Opening-Hours-CSS
   ========================================= */

@media (max-width: 991.98px) {

  /* =========================
     1) Header / Actions mobil
     ========================= */

  #tt-header.kw-header-v2 .kw-header-v2-top {
    gap: 12px;
  }

  #tt-header.kw-header-v2 .kw-header-v2-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Öffnungsstatus oben mobil ausblenden */
  #tt-header.kw-header-v2 .nav-opening-status {
    display: none !important;
  }

  /* Booking Button mobil sauber erhalten */
  #tt-header.kw-header-v2 .kw-header-v2-booking-btn.kw-header-v3-booking-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px !important;
    width: auto;
    white-space: nowrap;

    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
    color: #111 !important;

    border: 1px solid rgba(255, 195, 0, 0.92);
    border-radius: 18px;

    background:
      linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 100%),
      linear-gradient(135deg, #ffd84a 0%, #ffc300 48%, #f0a500 100%) !important;

    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.20),
      0 8px 20px rgba(255, 195, 0, 0.16),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -1px 0 rgba(0,0,0,0.08);
  }

  #tt-header.kw-header-v2 .kw-header-v2-booking-btn.kw-header-v3-booking-btn::before {
    inset: 3px;
    border-radius: 14px;
  }

  #tt-header.kw-header-v2 .kw-header-v2-booking-btn.kw-header-v3-booking-btn i,
  #tt-header.kw-header-v2 .kw-header-v2-booking-btn.kw-header-v3-booking-btn span {
    display: inline-block !important;
    position: relative;
    z-index: 2;
    line-height: 1;
  }

  /* Toggle hübscher ausrichten */
  #tt-header.kw-header-v2 #tt-m-menu-toggle-btn-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }

}

/* 26.10.2026: Abschnitt „Mobile Navigation“ gilt bis 1024 px (vorher nur bis 991 px). Das Theme schaltet schon
   ab 1024 px aufs Handy-Menü um; zwischen 992 und 1024 px (z. B. iPad quer) war die Menüleiste deshalb nicht
   eingeklappt und lag gelb über der ganzen Seite. */
@media (max-width: 1024px) {
 /* =========================
   2) Mobile Navigation
   ========================= */

#tt-header.kw-header-v2 {
  position: relative;
}

/* Nav-Bar mobil nicht killen, nur einklappen */
#tt-header.kw-header-v2 .kw-header-v2-nav-bar {
  display: block !important;
  width: 100%;
  margin-top: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    visibility 0.25s ease,
    margin-top 0.25s ease;
}

/* 26.10.2026: Eingeklappt wirklich abschneiden. Weiter unten steht für die Desktop-Dropdowns
   „overflow: visible !important“ auf der Nav-Bar; die Gegenregel in fe-nav.css lädt VOR
   custom-theme.css und verlor deshalb. Folge: Die unsichtbaren Menüpunkte lagen über der
   Hero-Mitte und fingen am Handy/Tablet Tipper ab. „html“ davor = höhere Spezifität,
   gewinnt unabhängig von der Ladereihenfolge. Das geöffnete Menü scrollt intern. */
html #tt-header.kw-header-v2 .kw-header-v2-nav-bar {
  overflow: hidden !important;
}

/* geöffneter Zustand */
html.tt-m-menu-open #tt-header.kw-header-v2 .kw-header-v2-nav-bar,
body.tt-m-menu-open #tt-header.kw-header-v2 .kw-header-v2-nav-bar,
html.tt-m-menu-active #tt-header.kw-header-v2 .kw-header-v2-nav-bar,
body.tt-m-menu-active #tt-header.kw-header-v2 .kw-header-v2-nav-bar,
#tt-header.kw-header-v2.tt-m-menu-open .kw-header-v2-nav-bar,
#tt-header.kw-header-v2.tt-m-menu-active .kw-header-v2-nav-bar,
#tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.active) .kw-header-v2-nav-bar,
#tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.is-active) .kw-header-v2-nav-bar,
#tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.tt-m-menu-open) .kw-header-v2-nav-bar {
  /* 26.10.2026: Höhe = sichtbarer Bereich unter der festen Top-Bar (--fe-top-now) minus 14 px Abstand oben und
     10 px unten. Passt das Menü nicht hinein (kleine Handys, Untermenü „Events“), scrollt es in sich; die Seite
     dahinter bleibt stehen (overscroll-behavior). Vorher 100vh − 110 px: Das Menü ragte über den unteren Rand. */
  max-height: calc(100vh - var(--fe-top-now, 110px) - 24px);
  max-height: calc(100dvh - var(--fe-top-now, 110px) - 24px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-top: 14px;
}

/* innere Wrapper */
#tt-header.kw-header-v2 .tt-main-menu,
#tt-header.kw-header-v2 .tt-main-menu-holder,
#tt-header.kw-header-v2 .tt-main-menu-inner,
#tt-header.kw-header-v2 .tt-main-menu-content {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* scrollbarer Menübereich */
#tt-header.kw-header-v2 .tt-main-menu-content {
  padding: 16px !important;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,20,20,0.98) 0%, rgba(10,10,10,0.99) 100%) !important;
  border: 1px solid rgba(255, 195, 0, 0.14);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.03);
  max-height: calc(100vh - 140px);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Hauptliste */
#tt-header.kw-header-v2 .tt-main-menu-list {
  display: grid !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#tt-header.kw-header-v2 .tt-main-menu-list > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Hauptpunkte */
#tt-header.kw-header-v2 .tt-main-menu-list > li > a,
#tt-header.kw-header-v2 .tt-main-menu-list > li > .tt-submenu-trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px !important;
  margin: 0 !important;
  border-radius: 14px;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* klickbarer Trigger */
#tt-header.kw-header-v2 .tt-submenu-trigger {
  position: relative;
  cursor: pointer;
}

#tt-header.kw-header-v2 .tt-submenu-trigger > a {
  display: block !important;
  width: 100%;
  color: #fff !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* kleines Plus / Minus */
#tt-header.kw-header-v2 .tt-submenu-trigger::after {
  content: "+";
  flex: 0 0 auto;
  margin-left: 12px;
  color: #ffc300;
  font-size: 18px;
  line-height: 1;
}

#tt-header.kw-header-v2 .tt-submenu-wrap.mobile-submenu-open > .tt-submenu-trigger::after {
  content: "–";
}

/* Submenus standardmäßig ZU */
#tt-header.kw-header-v2 .tt-submenu {
  display: none !important;
  position: static !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* nur geöffnete anzeigen */
#tt-header.kw-header-v2 .tt-submenu-wrap.mobile-submenu-open > .tt-submenu {
  display: block !important;
}

#tt-header.kw-header-v2 .tt-submenu-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#tt-header.kw-header-v2 .tt-submenu-list li {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#tt-header.kw-header-v2 .tt-submenu-list li:last-child {
  margin-bottom: 0 !important;
}

#tt-header.kw-header-v2 .tt-submenu-list a {
  display: block !important;
  padding: 10px 14px 10px 18px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.88) !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* einzelner Punkt Kontakt */
#tt-header.kw-header-v2 .tt-main-menu-list > li:not(.tt-submenu-wrap) > a {
  font-weight: 600;
}

}

@media (max-width: 991.98px) {
  /* =========================
     3) Event Promo Cards
     ========================= */

  .event-promo-card {
    display: block;
    padding: 20px 18px;
    margin-bottom: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 195, 0, 0.18);
    background: linear-gradient(180deg, rgba(20,20,20,0.96) 0%, rgba(10,10,10,0.98) 100%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
  }

  .event-promo-badge {display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;}

  .event-promo-card .tt-heading {
    margin-bottom: 10px !important;
  }

  .event-promo-text {
    margin-bottom: 16px;
  }

  .event-promo-cta-wrap {
    margin-top: 4px;
    margin-bottom: 16px;
  }

  .event-promo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #ffc300;
    color: #111 !important;
    text-decoration: none !important;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 8px 20px rgba(255, 195, 0, 0.16);
  }

  .event-promo-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 0;
  }

  .event-promo-features span {
    display: block;
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    line-height: 1.4;
  }

  /* =========================
     4) Alte events-boxen / Stint-Karten
     ========================= */

  .events-box {
    display: block !important;
    padding: 20px 18px !important;
    margin-bottom: 18px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 195, 0, 0.16) !important;
    background: linear-gradient(180deg, rgba(20,20,20,0.96) 0%, rgba(10,10,10,0.98) 100%) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.03) !important;
    overflow: hidden;
  }

  .events-box *,
  .events-box a {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .events-box h3,
  .events-box h4,
  .events-box-title {
    margin-bottom: 10px !important;
  }

  .events-box p,
  .events-box-caption,
  .events-box-text {
    margin-bottom: 14px !important;
  }

  .events-box .tt-btn,
  .events-box a[class*="btn"],
  .events-box-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: #ffc300 !important;
    color: #111 !important;
    text-decoration: none !important;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 8px 20px rgba(255, 195, 0, 0.16);
  }

  /* =========================
     5) FAQ
     ========================= */

  .faq-section {
    padding-top: 20px;
  }

  .faq-grid {
    display: grid;
    gap: 14px;
  }

  .faq-item {
    border-radius: 18px;
    border: 1px solid rgba(255, 195, 0, 0.16);
    background: linear-gradient(180deg, rgba(20,20,20,0.96) 0%, rgba(10,10,10,0.98) 100%);
    box-shadow:
      0 10px 22px rgba(0,0,0,0.20),
      inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
  }

  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
  }

  .faq-question span:first-child {
    display: block;
    font-weight: 600;
    line-height: 1.45;
  }

  .faq-icon {
    flex: 0 0 auto;
  }

  .faq-answer {
    padding: 0 18px 18px;
  }

  .faq-answer p {
    margin: 0;
    line-height: 1.65;
    opacity: 0.92;
  }

  /* =========================
     6) Öffnungszeiten Card
     ========================= */

  .opening-hours-card {
    padding: 20px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 195, 0, 0.16);
    background: linear-gradient(180deg, rgba(20,20,20,0.96) 0%, rgba(10,10,10,0.98) 100%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
  }

  .opening-hours-card table {
    width: 100%;
    border-collapse: collapse;
  }

  .opening-hours-card td,
  .opening-hours-card th {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .opening-hours-card tr:last-child td,
  .opening-hours-card tr:last-child th {
    border-bottom: 0;
  }

  .opening-hours-card .opening-status,
  .opening-hours-card .status-badge,
  .opening-hours-card .hours-status,
  .opening-hours-card .opening-state {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-weight: 600;
    line-height: 1.2;
  }

  .opening-hours-card .status-dot,
  .opening-hours-card .open-dot,
  .opening-hours-card .traffic-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 10px;
  }
}

@media (max-width: 767.98px) {

  #tt-header.kw-header-v2 .kw-header-v2-booking-btn.kw-header-v3-booking-btn {
    min-height: 40px;
    padding: 9px 12px !important;
    gap: 7px;
    font-size: 12px;
  }

  #tt-header.kw-header-v2 .tt-main-menu-content {
    padding: 14px !important;
    border-radius: 16px;
  }

  .event-promo-card,
  .events-box,
  .faq-item,
  .opening-hours-card {
    border-radius: 18px;
  }

  .event-promo-card,
  .events-box {
    padding: 18px 16px !important;
  }

  .faq-question {
    padding: 15px 16px;
  }

  .faq-answer {
    padding: 0 16px 16px;
  }

  .opening-hours-card {
    padding: 18px 16px;
  }
}

/* =========================================
   Mobile Nav – Opening Status Card
   ========================================= */
@media (max-width: 991.98px) {

  #tt-header.kw-header-v2 .mobile-nav-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;
    padding: 12px 14px;
    /* Radius/Rahmen identisch zur Desktop-Kopfzeile (stand vorher auf 12px) */
    border-radius: var(--ampel-radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid var(--ampel-rahmen);
    box-shadow: var(--ampel-schein);
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .nav-opening-status-trafficlight {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  /* Lichter exakt wie in Kopfzeile und Kontaktseite – Werte aus :root.
     Bis 13.08.2026 hatte diese Karte eigene, hellere Farben (#ffc53d/#52c41a),
     zeigte sie auch im AUS-Zustand farbig und leuchtete per `currentColor`
     weiß statt in der Ampelfarbe – dadurch wirkte sie deutlich greller.
     Angesprochen werden beide Schaltwege: `.light.is-on` (setzt das Ampel-Skript)
     und `.is-open/.is-soon/.is-closed` am Container (setzt der Menü-Klon). */
  #tt-header.kw-header-v2 .mobile-nav-status-card .light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--ampel-aus);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    opacity: var(--ampel-aus-deckkraft);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, opacity 0.25s ease;
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .light.is-on,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-open .light-green,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-soon .light-yellow,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-closed .light-red {
    opacity: 1;
    transform: scale(1.08);
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .light-red.is-on,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-closed .light-red {
    background: var(--ampel-rot);
    box-shadow: var(--ampel-glow-rot);
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .light-yellow.is-on,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-soon .light-yellow {
    background: var(--ampel-gelb);
    box-shadow: var(--ampel-glow-gelb);
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .light-green.is-on,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-open .light-green {
    background: var(--ampel-gruen);
    box-shadow: var(--ampel-glow-gruen);
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .nav-opening-status-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .nav-opening-label {
    font-size: 14px;
    line-height: 1.25;
    color: #fff;
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .nav-opening-detail {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255,255,255,0.72);
  }
}

@media (max-width: 767.98px) {
  #tt-header.kw-header-v2 .mobile-nav-status-card {
    padding: 11px 12px;
    border-radius: var(--ampel-radius);   /* stand auf 10px – Rundung bleibt überall gleich */
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .nav-opening-label {
    font-size: 13px;
  }

  #tt-header.kw-header-v2 .mobile-nav-status-card .nav-opening-detail {
    font-size: 11px;
  }
}

@media (max-width: 991.98px) {
  #tt-header.kw-header-v2 .mobile-nav-status-card.nav-opening-status {
    display: flex !important;
  }
}

@media (max-width: 991.98px) {
  #tt-header.kw-header-v2 .tt-m-menu-toggle-btn-text {
    position: relative;
    top: 10px;
  }
}

@media (max-width: 991.98px) {
  /* Nur noch die Deckkraft: Farbe und Leuchten kommen aus dem Ampel-Block weiter
     oben (:root-Variablen). Hier stand bis 13.08.2026 `0 0 10px currentColor` –
     currentColor ist die weiße Textfarbe, das Licht leuchtete also weiß. */
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-open .light-green,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-soon .light-yellow,
  #tt-header.kw-header-v2 .mobile-nav-status-card.is-closed .light-red {
    opacity: 1;
  }
}

@media (max-width: 991.98px) {
  #tt-header.kw-header-v2 .tt-m-menu-toggle-btn-holder {
    position: relative;
    top: 8px;
  }
}

@media (max-width: 991.98px) {
  #tt-header.kw-header-v2 .kw-header-v2-logo {
    position: relative;
    top: -4px;
  }
}

.mobile-nav-status-card {
  display: none !important;
}

@media (max-width: 991.98px) {
  #tt-header.kw-header-v2 .mobile-nav-status-card.nav-opening-status {
    display: flex !important;
  }
}

/* =========================
   Opening Hours Table – Version 3.1
   Clean Card Schedule mit gelbem Punkt
   ========================= */

.opening-hours-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  table-layout: fixed;
  margin: 0;
}

.opening-hours-table th,
.opening-hours-table td {
  padding: 14px 18px;
  border: 0;
  vertical-align: middle;
  background: linear-gradient(180deg, rgba(24,24,24,0.98) 0%, rgba(12,12,12,1) 100%);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.opening-hours-table th {
  position: relative;
  width: 42%;
  text-align: left;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  border-radius: 14px 0 0 14px;
  padding-left: 34px;
  letter-spacing: 0.01em;
}

.opening-hours-table th::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc300;
  box-shadow: 0 0 10px rgba(255, 195, 0, 0.45);
  transform: translateY(-50%);
}

.opening-hours-table td {
  text-align: right;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  border-radius: 0 14px 14px 0;
  font-weight: 700;
}

.opening-hours-table td span,
.opening-hours-table td .hours-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  line-height: 1.2;
}

/* falls kein span im td steckt */
.opening-hours-table td {
  font-weight: 700;
}

/* geschlossen etwas dezenter */
.opening-hours-table tr:first-child td,
.opening-hours-table td.is-closed {
  color: rgba(255,255,255,0.58);
}

/* Hover */
.opening-hours-table tr:hover th,
.opening-hours-table tr:hover td {
  background: linear-gradient(180deg, rgba(28,28,28,0.98) 0%, rgba(14,14,14,1) 100%);
}

/* heutiger Tag optional */
.opening-hours-table tr.is-today th,
.opening-hours-table tr.is-today td {
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgba(255, 195, 0, 0.12);
}

.opening-hours-table tr.is-today th::before {
  background: #ffd84a;
  box-shadow: 0 0 12px rgba(255, 216, 74, 0.55);
}

@media (max-width: 767.98px) {
  .opening-hours-table {
    border-spacing: 0 8px;
  }

  .opening-hours-table th,
  .opening-hours-table td {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
  }

  .opening-hours-table th {
    border-radius: 12px 12px 0 0;
    padding: 12px 14px 6px 34px;
  }

  .opening-hours-table th::before {
    left: 14px;
    width: 7px;
    height: 7px;
  }

  .opening-hours-table td {
    border-radius: 0 0 12px 12px;
    padding: 0 14px 12px;
  }

  .opening-hours-table td span,
  .opening-hours-table td .hours-badge {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 14px;
  }
}

#tt-header.kw-header-v2 .kw-header-v2-nav-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* feine technische Kanten direkt auf dem Balken */
  box-shadow:
    inset 0 1px 0 rgba(17, 17, 17, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

#tt-header.kw-header-v2 .kw-header-v2-nav-bar > * {
  position: relative;
  z-index: 2;
}

/* linke Seite -> läuft nach rechts und wird blasser */
#tt-header.kw-header-v2 .kw-header-v2-nav-bar::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) skewX(-18deg);
  border-radius: 3px;
  background: rgba(17, 17, 17, 0.09);
  box-shadow:
    26px 0 0 rgba(17, 17, 17, 0.07),
    52px 0 0 rgba(17, 17, 17, 0.055),
    78px 0 0 rgba(17, 17, 17, 0.045),
    104px 0 0 rgba(17, 17, 17, 0.035),
    130px 0 0 rgba(17, 17, 17, 0.028),
    156px 0 0 rgba(17, 17, 17, 0.022),
    182px 0 0 rgba(17, 17, 17, 0.016);
  pointer-events: none;
  opacity: 0.95;
  z-index: 1;
}

/* rechte Seite -> läuft nach links und wird blasser */
#tt-header.kw-header-v2 .kw-header-v2-nav-bar::after {
  content: "";
  position: absolute;
  right: 36px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) skewX(-18deg);
  border-radius: 3px;
  background: rgba(17, 17, 17, 0.09);
  box-shadow:
    -26px 0 0 rgba(17, 17, 17, 0.07),
    -52px 0 0 rgba(17, 17, 17, 0.055),
    -78px 0 0 rgba(17, 17, 17, 0.045),
    -104px 0 0 rgba(17, 17, 17, 0.035),
    -130px 0 0 rgba(17, 17, 17, 0.028),
    -156px 0 0 rgba(17, 17, 17, 0.022),
    -182px 0 0 rgba(17, 17, 17, 0.016);
  pointer-events: none;
  opacity: 0.95;
  z-index: 1;
}

#tt-header.kw-header-v2 {
  position: relative;
  z-index: 1000;
}

#tt-header.kw-header-v2 .kw-header-v2-nav-bar {
  position: relative;
  overflow: visible !important;
  z-index: 1001;
}

/* Deko bleibt hinter dem Inhalt */
#tt-header.kw-header-v2 .kw-header-v2-nav-bar::before,
#tt-header.kw-header-v2 .kw-header-v2-nav-bar::after {
  z-index: 0;
  pointer-events: none;
}

#tt-header.kw-header-v2 .kw-header-v2-nav-bar > * {
  position: relative;
  z-index: 2;
}

/* Nur das echte Dropdown nach oben holen – nichts an der Grundstruktur ändern */
#tt-header.kw-header-v2 .tt-submenu-wrap {
  z-index: 1100 !important;
}

/* Headerbild bewusst darunter */
#page-header,
.kw-subpage-header {
  position: relative;
  z-index: 1;
}

/*
.tt-scroll-to-top {
  bottom: 65px !important;
} */

/* Kompaktere H2 für lange Überschriften */
h2.tt-heading-title.kw-h2-compact,
.tt-heading .tt-heading-title.kw-h2-compact {
  font-size: clamp(1.8rem, 2.8vw, 2.9rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em;
}


/* =========================================================
   Zusatzkomponenten aus custom-design.css
   ========================================================= */

.kw-package-list {
  list-style: none;
  margin: 22px 0 34px;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.kw-package-list li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.kw-package-term {
  color: #ffc300;
  font-weight: 700;
  line-height: 1.35;
}

.kw-package-desc {
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

.kw-package-note {
  margin: 0 0 34px;
  padding: 18px 20px;
  border-left: 3px solid #ffc300;
  background: rgba(255,255,255,0.03);
  border-radius: 0 14px 14px 0;
}

.kw-package-note-title {
  margin: 0 0 8px;
  color: #ffc300;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kw-addon-box {
  margin: 18px 0 36px;
  padding: 24px 24px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
}

.kw-addon-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.kw-addon-col {
  padding: 4px 0;
}

.kw-addon-col--full {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.kw-addon-col h4 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #ffc300;
  font-weight: 700;
}

.kw-addon-col p {
  margin: 0 0 12px;
  color: rgba(255,255,255,0.82);
}

.kw-addon-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kw-addon-col li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  line-height: 1.55;
}

.kw-addon-col li:last-child {
  margin-bottom: 0;
}

.kw-addon-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffc300;
}

.kw-addon-col a {
  color: #ffc300;
}

@media (max-width: 991px) {
  .kw-addon-layout {
    grid-template-columns: 1fr;
  }

  .kw-addon-col--full {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
  }
}

.kw-flow-list {
  list-style: none;
  margin: 22px 0 22px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.kw-flow-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}

.kw-flow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffc300;
  color: #111;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

.kw-flow-content {
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.kw-flow-title {
  display: block;
  margin-bottom: 4px;
  color: #ffc300;
  font-weight: 700;
  line-height: 1.35;
}

.kw-flow-text {
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .kw-flow-list li {
    grid-template-columns: 38px 1fr;
    gap: 12px;
  }

  .kw-flow-step {
    width: 38px;
    height: 38px;
    font-size: 0.88rem;
  }
}

/* =========================================================
   Zentrales Heading-System
   ========================================================= */

/* --------------------------------------------------
   KÜSTENWERK Headings / Typography
   Ziel: semantische Überschriften sauber halten,
   optische Größen aber zentral über Klassen steuern.
-------------------------------------------------- */

:root {
  --kw-heading-accent: #ffc300;
}

/* H1: Hero / Seitentitel */
.ph-caption-title.kw-h1-hero {
  font-size: clamp(48px, 7.4vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

/* H2: Haupt-Einstieg auf der Startseite, z. B. Lights Out */
.tt-heading-title.kw-h2-main {
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

/* 26.10.2026: H2 „Preise & Pakete: / Wähle deinen Stint.“ kleiner und ohne negative Laufweite (Tobi: zu groß,
   Buchstaben zu dicht). Am Handy 26 px, damit „Wähle deinen Stint.“ in eine Zeile passt. */
.tt-heading-title.kw-h2-main.kw-h2-kompakt {
  font-size: clamp(26px, 3.4vw, 50px);
  letter-spacing: 0;
}

/* H3: normale große Abschnittsüberschriften, ehemals kw-h2-compact */
.tt-heading-title.kw-h3-section {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* H4: Preis-/Kartenüberschriften, Größe bleibt bewusst kompakt */
.pricing-card .kw-h4-card,
.tt-haci-title.kw-h4-card {
  margin: 0;
}

/* H4: große Promo-Headline in der Firmenevent-Karte */
.event-promo-card .kw-h4-promo {
  margin: 0;
}

/* Alte Klasse bleibt als Fallback nutzbar, falls sie auf Unterseiten noch vorkommt. */
.tt-heading-title.kw-h2-compact {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

@media (max-width: 991px) {
  .ph-caption-title.kw-h1-hero {
    font-size: clamp(44px, 10vw, 86px);
  }

  .tt-heading-title.kw-h2-main {
    font-size: clamp(36px, 8vw, 64px);
  }

  .tt-heading-title.kw-h3-section,
  .tt-heading-title.kw-h2-compact {
    font-size: clamp(28px, 6.4vw, 46px);
  }
}

@media (max-width: 640px) {
  .ph-caption-title.kw-h1-hero {
    font-size: clamp(40px, 13vw, 68px);
    line-height: 0.95;
  }

  .tt-heading-title.kw-h2-main {
    font-size: clamp(34px, 10vw, 54px);
  }

  .tt-heading-title.kw-h3-section,
  .tt-heading-title.kw-h2-compact {
    font-size: clamp(26px, 7.8vw, 40px);
  }
}

/* =========================================================
   KÜSTENWERK – Subpage Heading Overrides
   kleinere Überschriften auf Unterseiten; Startseite bleibt groß
   ========================================================= */

#page-header.kw-subpage-header .kw-h1-hero,
#page-header.kw-subpage-header .ph-caption-title.kw-h1-hero {
  font-size: clamp(2.1rem, 4.4vw, 4.4rem) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.005em;
}

#page-header.kw-subpage-header ~ #tt-page-content .kw-h2-main,
#page-header.kw-subpage-header ~ #tt-page-content h2.kw-h2-main {
  font-size: clamp(2.0rem, 3.0vw, 3.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
}

#page-header.kw-subpage-header ~ #tt-page-content .kw-h2-main > span {
  font-size: inherit !important;
  line-height: inherit !important;
}

#page-header.kw-subpage-header ~ #tt-page-content .kw-h3-section,
#page-header.kw-subpage-header ~ #tt-page-content h3.kw-h3-section {
  font-size: clamp(1.35rem, 2.35vw, 2.0rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.005em;
}

#page-header.kw-subpage-header ~ #tt-page-content .kw-h3-section > span {
  font-size: inherit !important;
  line-height: inherit !important;
}

#page-header.kw-subpage-header ~ #tt-page-content .kw-h3-promo,
#page-header.kw-subpage-header ~ #tt-page-content h3.kw-h3-promo {
  font-size: clamp(1.6rem, 2.7vw, 2.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.005em;
}

#page-header.kw-subpage-header ~ #tt-page-content .kw-h4-card,
#page-header.kw-subpage-header ~ #tt-page-content .kw-h4-section,
#page-header.kw-subpage-header ~ #tt-page-content h4.kw-h4-card,
#page-header.kw-subpage-header ~ #tt-page-content h4.kw-h4-section {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em;
}

#page-header.kw-subpage-header ~ #tt-page-content .kw-h4-promo,
#page-header.kw-subpage-header ~ #tt-page-content h4.kw-h4-promo {
  font-size: clamp(1.55rem, 2.6vw, 2.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.005em;
}

@media (max-width: 767px) {
  #page-header.kw-subpage-header .kw-h1-hero,
  #page-header.kw-subpage-header .ph-caption-title.kw-h1-hero {
    font-size: clamp(2.0rem, 10vw, 3.2rem) !important;
    line-height: 0.98 !important;
  }

  #page-header.kw-subpage-header ~ #tt-page-content .kw-h2-main,
  #page-header.kw-subpage-header ~ #tt-page-content h2.kw-h2-main {
    font-size: clamp(1.85rem, 8vw, 2.7rem) !important;
    line-height: 1.06 !important;
  }

  #page-header.kw-subpage-header ~ #tt-page-content .kw-h3-section,
  #page-header.kw-subpage-header ~ #tt-page-content h3.kw-h3-section {
    font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important;
    line-height: 1.12 !important;
  }

  #page-header.kw-subpage-header ~ #tt-page-content .kw-h3-promo,
  #page-header.kw-subpage-header ~ #tt-page-content h3.kw-h3-promo {
    font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
    line-height: 1.1 !important;
  }

  #page-header.kw-subpage-header ~ #tt-page-content .kw-h4-card,
  #page-header.kw-subpage-header ~ #tt-page-content .kw-h4-section,
  #page-header.kw-subpage-header ~ #tt-page-content h4.kw-h4-card,
  #page-header.kw-subpage-header ~ #tt-page-content h4.kw-h4-section {
    font-size: clamp(1.2rem, 5.4vw, 1.55rem) !important;
    line-height: 1.14 !important;
  }
}

/* =========================================================
   Kontaktformular – kompaktere Feld-Schrift
   ========================================================= */

#ft-contact-form .tt-form-control {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

#ft-contact-form .tt-form-control::placeholder {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  opacity: 0.72;
}

#ft-contact-form select.tt-form-control {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

#ft-contact-form textarea.tt-form-control {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

#ft-contact-form .tt-form-group > label:not(.kw-consent-toggle) {
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

/* =========================================================
   Kontaktformular – Consent Toggle Switch
   ========================================================= */

.kw-consent-toggle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
}

.kw-toggle-switch-wrap {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 32px;
  margin-top: 2px;
}

.kw-toggle-input {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 32px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.kw-toggle-switch {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.28);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.kw-toggle-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}

.kw-toggle-input:checked + .kw-toggle-switch {
  background: #ffc300;
  border-color: rgba(255,195,0,0.95);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.16),
    0 0 18px rgba(255,195,0,0.28);
}

.kw-toggle-input:checked + .kw-toggle-switch::before {
  transform: translateX(24px);
  background: #111;
}

.kw-toggle-input:focus-visible + .kw-toggle-switch {
  outline: 2px solid #ffc300;
  outline-offset: 4px;
}

.kw-consent-text {
  display: block;
  max-width: 820px;
}

.kw-consent-text .required {
  color: #ffc300;
  font-style: normal;
}

@media (max-width: 767px) {
  .kw-consent-toggle {
    gap: 12px;
    font-size: 0.9rem;
  }

  .kw-toggle-switch-wrap,
  .kw-toggle-input {
    flex-basis: 52px;
    width: 52px;
    height: 30px;
  }

  .kw-toggle-switch::before {
    width: 22px;
    height: 22px;
  }

  .kw-toggle-input:checked + .kw-toggle-switch::before {
    transform: translateX(22px);
    background: #111;
  }
}

/* =========================================================
   KÜSTENWERK – finale CTA Buttons
   Header-Button-Look, aber ohne linken Racing-Akzent
   ========================================================= */

.kw-header-v2-booking-btn.kw-header-v3-booking-btn span {
  font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  transform: translateY(1px);
}

.event-promo-cta,
#ft-contact-form .kw-form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  isolation: isolate;
  overflow: hidden;

  min-height: 58px;
  padding: 0 26px !important;
  border: 1px solid rgba(255, 195, 0, 0.92);
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 100%),
    linear-gradient(135deg, #ffd84a 0%, #ffc300 48%, #f0a500 100%) !important;

  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-decoration: none !important;
  text-align: center !important;

  font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.1 !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    0 8px 20px rgba(255, 195, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.10);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    filter 0.25s ease;
}

.event-promo-cta::before,
#ft-contact-form .kw-form-submit::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  pointer-events: none;
  z-index: 1;
}

.event-promo-cta::after,
#ft-contact-form .kw-form-submit::after,
.event-promo-cta:hover::after,
#ft-contact-form .kw-form-submit:hover::after {
  display: none !important;
  content: none !important;
  transform: none !important;
}

.event-promo-cta span,
#ft-contact-form .kw-form-submit span {
  position: relative;
  z-index: 2;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}

.event-promo-cta:hover,
#ft-contact-form .kw-form-submit:hover {
  transform: translateY(-2px) scale(1.02);
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border-color: rgba(255, 195, 0, 1);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 100%),
    linear-gradient(135deg, #ffe168 0%, #ffcd1f 48%, #f5ac00 100%) !important;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    0 12px 28px rgba(255, 195, 0, 0.28),
    0 0 0 1px rgba(255, 195, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.48),
    inset 0 -1px 0 rgba(0,0,0,0.08);

  filter: saturate(1.05);
}

#ft-contact-form .kw-form-submit {
  appearance: none;
  -webkit-appearance: none;
  border-width: 1px;
  cursor: pointer;
  margin-top: 10px;
}

.event-promo-cta:focus-visible,
#ft-contact-form .kw-form-submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 195, 0, 0.22),
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(255, 195, 0, 0.18);
}

@media (max-width: 767px) {
  .event-promo-cta,
  #ft-contact-form .kw-form-submit {
    width: 100%;
    min-height: 52px;
    padding: 0 22px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
}

/* =========================================================
   MOBILE – Sakana hart für Nav, Headlines & CTA erzwingen
   ========================================================= */

@media (max-width: 1024px) {

  /* Header / Mobile Navigation */
  #tt-header.kw-header-v2,
  #tt-header.kw-header-v2 a,
  #tt-header.kw-header-v2 span,
  #tt-header.kw-header-v2 button,
  #tt-header.kw-header-v2 .tt-main-menu,
  #tt-header.kw-header-v2 .tt-main-menu *,
  #tt-header.kw-header-v2 .tt-main-menu-list,
  #tt-header.kw-header-v2 .tt-main-menu-list *,
  #tt-header.kw-header-v2 .tt-submenu,
  #tt-header.kw-header-v2 .tt-submenu *,
  #tt-header.kw-header-v2 .tt-submenu-list,
  #tt-header.kw-header-v2 .tt-submenu-list *,
  #tt-header.kw-header-v2 .tt-submenu-trigger,
  #tt-header.kw-header-v2 .tt-submenu-trigger * {
    font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  }

  /* Hero / Headlines */
  .ph-caption-title,
  .ph-caption-title *,
  .tt-heading-title,
  .tt-heading-title *,
  .kw-h1-hero,
  .kw-h1-hero *,
  .kw-h2-main,
  .kw-h2-main *,
  .kw-h3-section,
  .kw-h3-section *,
  .kw-h3-promo,
  .kw-h3-promo *,
  .kw-h4-card,
  .kw-h4-card *,
  .kw-h4-section,
  .kw-h4-section *,
  .tt-haci-title,
  .tt-haci-title * {
    font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  }

  /* CTA Buttons */
  .event-promo-cta,
  .event-promo-cta *,
  .kw-header-v2-booking-btn,
  .kw-header-v2-booking-btn *,
  #ft-contact-form .kw-form-submit,
  #ft-contact-form .kw-form-submit *,
  .tt-btn span {
    font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  }

  /* Kleine Branding-Zeilen */
  .made-in-rostock,
  .made-in-rostock * {
    font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  }
}

/* =========================================================
   STARTSEITE – H3 wie Unterseiten
   ========================================================= */

#page-header:not(.kw-subpage-header) ~ #tt-page-content .kw-h3-section,
#page-header:not(.kw-subpage-header) ~ #tt-page-content h3.kw-h3-section {
  font-size: clamp(1.35rem, 2.35vw, 2.0rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.005em;
}

#page-header:not(.kw-subpage-header) ~ #tt-page-content .kw-h3-section > span {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* =========================================================
   FAQ – Fragen in den Kästen kleiner
   ========================================================= */

.faq-question {
  font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

@media (max-width: 767px) {
  .faq-question {
    font-size: 0.98rem !important;
    line-height: 1.4 !important;
  }
}

/* =========================================================
   MOBILE – Öffnungsstatus nicht in Sakana
   ========================================================= */

@media (max-width: 1024px) {
  #tt-header.kw-header-v2 .nav-opening-status,
  #tt-header.kw-header-v2 .nav-opening-status *,
  #tt-header.kw-header-v2 .nav-opening-label,
  #tt-header.kw-header-v2 .nav-opening-detail {
    font-family: "Poppins", Arial, sans-serif !important;
  }

  #tt-header.kw-header-v2 .nav-opening-label {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  #tt-header.kw-header-v2 .nav-opening-detail {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 1024px) {
  #tt-header.kw-header-v2 .opening-status,
  #tt-header.kw-header-v2 .opening-status *,
  #tt-header.kw-header-v2 .opening-status-text,
  #tt-header.kw-header-v2 .opening-status-text * {
    font-family: "Poppins", Arial, sans-serif !important;
    letter-spacing: 0 !important;
  }
}

/* =========================================================
   MOBILE – Öffnungsstatus: Ampel links, Text mittig
   ========================================================= */

@media (max-width: 1024px) {
  #tt-header.kw-header-v2 .nav-opening-status,
  #tt-header.kw-header-v2 .opening-status {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #tt-header.kw-header-v2 .nav-opening-status-trafficlight,
  #tt-header.kw-header-v2 .opening-status-trafficlight {
    flex: 0 0 auto !important;
  }

  /* Text linksbündig neben der Ampel – wie in der Desktop-Kopfzeile.
     Stand bis 13.08.2026 auf center; das fiel nur am Handy auf, weil dort die
     Karte breiter ist als der Text (im Desktop-Kopf füllt er sie ohnehin aus). */
  #tt-header.kw-header-v2 .nav-opening-status-text,
  #tt-header.kw-header-v2 .opening-status-text {
    flex: 1 1 auto !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  #tt-header.kw-header-v2 .nav-opening-label,
  #tt-header.kw-header-v2 .nav-opening-detail,
  #tt-header.kw-header-v2 .opening-status-text strong,
  #tt-header.kw-header-v2 .opening-status-text span,
  #tt-header.kw-header-v2 .opening-status-text small {
    width: 100%;
    text-align: left !important;
  }
}

/* =========================================================
   FAQ – Antworttexte etwas kleiner
   ========================================================= */

.faq-answer p {
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}

@media (max-width: 767px) {
  .faq-answer p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
}

/* =========================================================
   Newsletter – Button exakt wie KÜSTENWERK CTA
   ========================================================= */

#sib-form .kw-newsletter-submit.event-promo-cta,
.sib-form .kw-newsletter-submit.event-promo-cta,
.kw-newsletter-submit.event-promo-cta {
  min-height: 58px !important;
  height: 58px !important;
  width: auto !important;
  min-width: 180px !important;

  padding: 0 28px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 195, 0, 0.92) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 100%),
    linear-gradient(135deg, #ffd84a 0%, #ffc300 48%, #f0a500 100%) !important;

  color: #111 !important;
  -webkit-text-fill-color: #111 !important;

  font-family: "Sakana", "Big Shoulders Display", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-transform: none !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    0 8px 20px rgba(255, 195, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;

  cursor: pointer !important;
}

/* Brevo-Loader/Icon im Button ausblenden, damit der Text sauber sitzt */
#sib-form .kw-newsletter-submit svg,
.sib-form .kw-newsletter-submit svg,
.kw-newsletter-submit svg {
  display: none !important;
}

#sib-form .kw-newsletter-submit span,
.sib-form .kw-newsletter-submit span,
.kw-newsletter-submit span {
  position: relative;
  z-index: 2;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* =========================================================
   Newsletter – Opt-in Toggle FINAL mit Brevo Reset
   ========================================================= */

/* Brevo-Wrapper neutralisieren */
#coming-news .entry__choice {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Zeile: Schalter links, Text rechts */
#coming-news .kw-nl-optin-row {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: start !important;

  width: 100% !important;
  max-width: 760px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;

  text-align: left !important;
}

/* Linkes Label komplett von Brevo-Styles befreien */
#coming-news .kw-nl-switch-label {
  all: unset;
  box-sizing: border-box !important;

  position: relative !important;
  display: block !important;

  width: 56px !important;
  min-width: 56px !important;
  height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  cursor: pointer !important;
}

/* Unsichtbare echte Checkbox */
#coming-news .kw-nl-switch-label .kw-nl-input {
  position: absolute !important;
  inset: 0 !important;

  width: 56px !important;
  height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Track */
#coming-news .kw-nl-switch-label .kw-nl-slider {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  width: 56px !important;
  height: 32px !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.28) !important;

  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  z-index: 1 !important;
}

/* Schieber */
#coming-news .kw-nl-switch-label .kw-nl-slider::before {
  content: "" !important;
  position: absolute !important;

  top: 3px !important;
  left: 3px !important;

  width: 24px !important;
  height: 24px !important;

  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35) !important;

  transition: transform 0.25s ease, background 0.25s ease !important;
}

/* Aktiv: gelb */
#coming-news .kw-nl-switch-label .kw-nl-input:checked + .kw-nl-slider {
  background: #ffc300 !important;
  border-color: rgba(255,195,0,0.95) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.16),
    0 0 18px rgba(255,195,0,0.28) !important;
}

/* Aktiv: Schieber nach rechts */
#coming-news .kw-nl-switch-label .kw-nl-input:checked + .kw-nl-slider::before {
  transform: translateX(24px) !important;
  background: #111 !important;
}

/* Rechtes Textlabel komplett von Brevo-Styles befreien */
#coming-news .kw-nl-copy-label {
  all: unset;
  box-sizing: border-box !important;

  display: block !important;

  margin: 0 !important;
  padding: 2px 0 0 !important;

  cursor: pointer !important;

  color: rgba(255,255,255,0.82) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-style: italic !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* Mobile */
@media (max-width: 767px) {
  #coming-news .kw-nl-optin-row {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  #coming-news .kw-nl-switch-label,
  #coming-news .kw-nl-switch-label .kw-nl-input,
  #coming-news .kw-nl-switch-label .kw-nl-slider {
    width: 52px !important;
    min-width: 52px !important;
    height: 30px !important;
  }

  #coming-news .kw-nl-switch-label .kw-nl-slider::before {
    width: 22px !important;
    height: 22px !important;
  }

  #coming-news .kw-nl-switch-label .kw-nl-input:checked + .kw-nl-slider::before {
    transform: translateX(22px) !important;
  }

  #coming-news .kw-nl-copy-label {
    padding-top: 1px !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }
}

/* =========================================================
   Newsletter – Toggle Text weiter nach rechts
   ========================================================= */

#coming-news .kw-nl-optin-row {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  column-gap: 10px !important;
}

#coming-news .kw-nl-switch-label {
  grid-column: 1 !important;
}

#coming-news .kw-nl-copy-label {
  grid-column: 2 !important;
  padding-left: 0 !important;
  padding-top: 2px !important;
}

@media (max-width: 767px) {
  #coming-news .kw-nl-optin-row {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }
}

/* =========================================================
   Newsletter – Textumbruch ohne Einzug
   ========================================================= */

#coming-news .kw-nl-copy-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;

  text-align: left !important;
  white-space: normal !important;
}

#coming-news .kw-nl-copy-label::before,
#coming-news .kw-nl-copy-label::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------------------------
   iubenda Inline-Embed (no-markup) als native Rechtsseite stylen.
   iubenda injiziert ungestyltes Volltext-HTML (header/h1..h5/p/ul/li/strong,
   plus sr-only-Hilfstext + Sektion-IDs) in unseren Wrapper .kw-legaldoc.
   Spezifität #tt-page-content .kw-legaldoc … + !important schlägt die
   !important-Typo des Racing-Themes auf bare Tags. Farben/Hintergrund erbt der
   Text vom Theme (lesbar wie auf den anderen Rechtsseiten).
   --------------------------------------------------------------------------- */
#tt-page-content .kw-legaldoc { font-size: 1rem; line-height: 1.72; }
#tt-page-content .kw-legaldoc .sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
#tt-page-content .kw-legaldoc h1 { font-size: clamp(1.7rem,3vw,2.3rem) !important; line-height: 1.15 !important; margin: 0 0 1rem !important; }
#tt-page-content .kw-legaldoc h2 { font-size: clamp(1.3rem,2.2vw,1.7rem) !important; line-height: 1.2 !important; margin: 2.2rem 0 .6rem !important; }
#tt-page-content .kw-legaldoc h3 { font-size: 1.2rem !important; line-height: 1.25 !important; margin: 1.6rem 0 .5rem !important; }
#tt-page-content .kw-legaldoc h4 { font-size: 1.05rem !important; margin: 1.2rem 0 .4rem !important; }
#tt-page-content .kw-legaldoc h5 { font-size: 1rem !important; font-weight: 700 !important; margin: 1rem 0 .3rem !important; }
#tt-page-content .kw-legaldoc h6 { font-size: .95rem !important; margin: .8rem 0 .3rem !important; }
#tt-page-content .kw-legaldoc p,
#tt-page-content .kw-legaldoc li { font-size: .97rem !important; line-height: 1.72 !important; }
#tt-page-content .kw-legaldoc p { text-align: justify !important; -webkit-hyphens: auto; hyphens: auto; }
#tt-page-content .kw-legaldoc ul,
#tt-page-content .kw-legaldoc ol { margin: .4rem 0 1rem 1.3rem; }
#tt-page-content .kw-legaldoc li { margin: .2rem 0; }
#tt-page-content .kw-legaldoc a { text-decoration: underline; }
#tt-page-content .kw-legaldoc strong { font-weight: 700; }
/* Dienst-Logos (GA4, Google Fonts, Elfsight ...) sind 32x32-Favicons; das Theme
   bläst img per width:100% auf -> hier auf Icon-Größe zurückzwingen. */
#tt-page-content .kw-legaldoc img {
  width: auto !important;
  height: auto !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: inline-block;
  vertical-align: middle;
  margin: 0 .35em 0 0;
}
#tt-page-content .kw-legaldoc table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
#tt-page-content .kw-legaldoc th,
#tt-page-content .kw-legaldoc td { border: 1px solid rgba(127,127,127,.3); padding: .5rem .6rem; text-align: left; font-size: .92rem !important; }
#tt-page-content .kw-legaldoc #table-of-content-wrapper { margin: 1.5rem 0; padding: 1rem 1.2rem; border: 1px solid rgba(127,127,127,.25); border-radius: 8px; }
#tt-page-content .kw-legaldoc .iubenda-branding { display: inline-block; margin-top: 2rem; font-size: .8rem !important; opacity: .6; }

/* =========================================================
   Endlos-Animationen außerhalb des Bildes angehalten (26.10.2026)
   Die Klasse setzt theme.js per IntersectionObserver.
   ========================================================= */
.kw-ruhe,
.kw-ruhe::before,
.kw-ruhe::after { animation-play-state: paused !important; }

/* 27.10.2026: Handy-Menü ruhiger (Tobis Wunsch). Nur bis 1024 px, der Rechner bleibt wie er ist.
   - Alles linksbündig, Karten so breit wie die Status-Karte: Nummern und Texte stehen sauber untereinander.
     Vorher waren die Karten nur so breit wie der längste Punkt und mittig, der Text darin auch mittig.
   - Der Pfeil des Themes saß außerhalb der Karte und doppelte das Plus/Minus. Getippt wird auf die ganze Karte.
   - Unterpunkte in der Fließtext-Schrift (Poppins) statt Sakana; Sakana nur noch für die Hauptpunkte.
   - „Menü“/„Schließen“ kleiner. Das breite „Schließen“ drückte die Kopfzeile über den Rand, das Logo
     sprang beim Öffnen ~6 px. minmax(0, 1fr) hält die Spalte zusätzlich auf Bildschirmbreite. */
@media (max-width: 1024px) {
  #tt-header.kw-header-v2 .kw-header-v2-top {
    grid-template-columns: minmax(0, 1fr);
  }

  #tt-header.kw-header-v2 .tt-m-menu-toggle-btn-text {
    font-size: 14px;
  }

  #tt-header.kw-header-v2 .tt-main-menu-list {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  #tt-header.kw-header-v2 .tt-main-menu-list > li,
  #tt-header.kw-header-v2 .tt-main-menu-list > li > a,
  #tt-header.kw-header-v2 .tt-submenu-trigger > a,
  #tt-header.kw-header-v2 .tt-submenu-list a {
    text-align: left !important;
  }

  #tt-header.kw-header-v2 .tt-m-caret {
    display: none !important;
  }

  html #tt-header.kw-header-v2 .kw-header-v2-nav-bar .tt-submenu-list li a {
    font-family: Poppins, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
}

/* Unterpunkte stehen seit 27.10.2026 in normaler Schreibweise im Header (fürs Handy-Menü in Poppins).
   Am Rechner weiter in Großbuchstaben wie bisher. */
@media (min-width: 1025px) {
  .kw-header-v2-nav-bar .tt-submenu-list li a {
    text-transform: uppercase;
  }
}

/* =========================================================
   Handy: nichts ragt aus dem Bild (Tobi 27.10.2026)
   Lange Wörter in der Sakana und Knöpfe/Pillen mit white-space:nowrap
   drückten Karten und Raster über die Bildschirmbreite (Firmenevents
   P1–P3, Tagungen „Was euch vor Ort erwartet“, Seitentitel …).
   „body …“ = genug Gewicht gegen fe-racing.css/kw-buttons.css, die später laden.
   ========================================================= */
@media (max-width: 767px) {
  body .kwb { white-space: normal; max-width: 100%; line-height: 1.15; text-align: center; }
  body .kwp { white-space: normal; max-width: 100%; }
  body .fe-row { grid-template-columns: 64px minmax(0, 1fr); }
  body .fe-row-main, body .fe-slot, body .fe-pitcard, body .fe-loyalty, body .event-promo-card { min-width: 0; }
  /* Überschriften trennen nur an vorgegebenen Stellen (&shy; im HTML an der Wortfuge: KINDER-GEBURTSTAG).
     01.11.2026: vorher automatisch (ab 12 Zeichen), Safari trennte dabei auch „KÜSTEN-WERK“, „REALIS-TISCH“. */
  body h1, body h2, body h3, body h4, body .fe-slot b {
    -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
  body .tt-cap-word, body .tt-cap-word-wrap { max-width: 100%; }
  /* Startnummer (02, 03 …) ist breiter als 01 und stieß an den Titel */
  body .fe-slot { padding-left: 72px; }
  /* Knöpfe untereinander mit Luft statt direkt aneinander */
  body .fe-row-cta { display: flex; flex-wrap: wrap; gap: 12px; }
}

/* =========================================================
   Silbentrennung für alle Blocksatz-Texte (Tobi, 29.10.2026)
   Ohne Trennung reißt <p align="justify"> in schmalen Spalten
   (Handy, Karten) große Wortlücken. Mindestens 3 Buchstaben vor
   und nach dem Trennstrich, Wörter ab 6 Zeichen. 01.11.2026 kurz 2/2 getestet:
   weniger Lücken, aber 93 statt 10 Zweibuchstaben-Trennungen („Fo-tos“, „da-mit“)
   auf acht Seiten (WebKit) – darum zurück auf 3/3.
   Markennamen und Fremdwörter (KÜSTENWERK, Simracing, Leaderboard, Rostock …)
   stehen im HTML in <span class="kw-nh"> und werden nie getrennt; lange
   Komposita tragen &shy; an der Wortfuge (Einverständnis&shy;erklärung).
   Englisch-deutsche Mischwörter trennt Safari falsch („Fir-me-nevents“):
   im HTML mit &shy; vorgeben („Firmen&shy;events“).
   31.10.2026: FAQ-Antworten (Seiten, Magazin-Artikel) per Klasse
   ebenfalls im Blocksatz mit Trennung (Tobi: „FAQ Blocksatz, überall“).
   ========================================================= */
[align="justify"], .faq-answer p, .kw-article-faq-item p {
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
}

/* 01.11.2026: Blocksatz für ALLE Fließtexte (Tobi: „alle Texte auf allen Seiten im Blocksatz“) – Absätze und
   Listenpunkte im Inhalt, dazu die Kleintexte der Karten (Rennprogramm, Pakete, Ablauf) und der Newsletter-Karte.
   :where() hält die Spezifität bei null, damit gezielte Ausrichtungen gewinnen (Fußzeile, Knöpfe, Zitate).
   Zentrierte Einleitungen stehen ebenfalls im Blocksatz, die letzte Zeile bleibt mittig. Überschriften, Pillen,
   Chips, Beschriftungen und Laufbänder bleiben, wie sie sind, ebenso die Fußzeile und die Autorenzeile im Magazin
   (beide erben ihre Zentrierung nur – gegen eine direkt gesetzte Regel verliert Geerbtes immer, auch bei :where). */
:where(#body-inner :is(p, li):not(#tt-footer *, .kw-article-meta, :has(> :is(.tt-cd-icon, .kwi, i[class*="fa-"]):first-child), :has(> a:only-child))),
.fe-slot small, .fe-stage small,
body .kw-nlf-subtitle, body .kw-nlf-note { /* body: der Newsletter-Baustein bringt seinen Stil später im Body mit */
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
}
.faq-intro p, .kw-faq-intro, .kw-ev-kopf p, .kw-cs-video p, .kw-coming-soon-text, .kw-coming-soon-note,
.kw-coming-soon-card p, .kw-cs-testfahrer p, .kw-coming-soon-magazin p, .kw-coming-soon-galerie p,
.kw-magazin-text, .kw-magazin-section-head p, .kw-magazin-topic-box p, .kw-article-lead, .kw-coming-soon-galerie-hinweis,
.fe-stage small /* Ablauf-Stationen sind mittig gesetzt; in der Handy-Liste (≤575 px) links, siehe unten */ {
  text-align: justify; text-align-last: center;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
}
/* Das Theme setzt auf Absätze text-wrap: pretty. Im Blocksatz schiebt das Wörter nach unten, damit die letzte Zeile
   nicht zu kurz wird; die Zeilen darüber werden leerer und der Blocksatz zieht sie zu großen Lücken auseinander.
   Gemessen 01.11.2026 bei 390 px (WebKit wie Safari): deutlich weniger Absätze mit Wortlücken über 0,9 em. */
#body-inner :is(p, li, small, [align="justify"]) { text-wrap: wrap; }
@media (max-width: 575px) { .fe-schedule--zeit .fe-stage small { text-align-last: auto; } }
/* Mail-Adressen und Links mit Adresse im Text nie automatisch trennen („boxencrew@kues-tenwerk…“ würde mit Strich
   abgetippt); sie brechen weiter am vorhandenen Bindestrich bzw. Punkt. */
a[href^="mailto:"], a[href^="tel:"], .kw-nh { -webkit-hyphens: manual; hyphens: manual; }
/* Das Theme blendet am Handy (≤480 px) jedes <br> in Absätzen aus. Anschriften und Angaben brauchen ihre Zeilen
   („St.-Georg-Straße 50“ / „18055 Rostock“ liefen sonst zu „5018055“ zusammen): Klasse kw-zeilen am Absatz. */
@media (max-width: 480px) { p.kw-zeilen br { display: inline; } }
/* Kicker über Kartentiteln (Pit-Service, Boxencrew) saßen 3 px auf der Überschrift; „Aktuelle Kombination“ klebte am H2 */
body .fe-pitcard-tag { line-height: 1.35; margin-bottom: 7px; }   /* body: fe-racing.css lädt später */
body .fe-combo-date { margin-top: 14px; }
/* Sektor-Tafeln („S1 Briefing“, „S2 Rennprogramm“ …): Etikett in Sakana statt gesperrter Poppins (Tobi 01.11.2026:
   „die Sektor-Tafeln können in Sakana, das sieht gut aus“). body: fe-racing.css lädt später. */
body .fe-board .lbl { font-family: Sakana, "Big Shoulders Display", sans-serif; font-weight: 400; letter-spacing: .03em; font-size: 16px; }
@media (max-width: 767px) { body .fe-board .lbl { font-size: 14px; } }   /* ab 360 px jedes Etikett einzeilig (320 px wie vorher teils zweizeilig) */

/* Beschriftungen in Big Shoulders (Tobi 01.11.2026, Variante D): Ablauf-Titel, Minuten, FAQ-Kicker, Kennzahl-Titel,
   Stempelkarte, Podest-Zeile, Leaderboard-Kopf, „Beitrag lesen“, P-Streifen. Vorher Poppins Bold 10–13 px, stark
   gesperrt (0,12–0,26 em) – wirkte wie eine fremde Schrift. System seitdem: Sakana = Überschriften/Knöpfe/Tafeln,
   Poppins = Fließtext, Big Shoulders = Beschriftungen (dazu Hero-Dachzeile und Menü-Nummern). body: fe-racing.css und
   Inline-Stile der Seiten laden später. */
body :is(.fe-schedule-label, .fe-stamps-label, .fe-stats-label, .tt-heading-subtitle, .fe-podium-caption, .fe-lb-head,
         .kw-cs-artikel-mehr, .fe-stage-min, .fe-pos small) {
  font-family: "Big Shoulders Display", sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
body .fe-schedule-label, body .tt-heading-subtitle, body .fe-stats-label { font-size: 19px; line-height: 1.25; text-wrap: balance; }
body .faq-intro .tt-heading-subtitle { font-size: 19px; letter-spacing: .06em; }   /* ältere Regel .faq-intro … (13 px, .18em) ist spezifischer */
body .fe-stamps-label { font-size: 15px; }
body .fe-podium-caption { font-size: 17px; }
body .fe-lb-head { font-size: 14px; }
body .kw-cs-artikel-mehr { font-size: 16px; }
body .fe-stage-min { font-size: 16px; }
body .fe-pos small { font-size: 14px; }
/* Listenpunkte, die nur aus einem Link bestehen (Inhaltsverzeichnis AGB), stehen nicht im Blocksatz (oben ausgenommen).
   Kicker über Überschriften (Treueprogramm, Boxencrew …) mit Luft und eigener Zeilenhöhe. */
body .kwp--kicker { line-height: 1.35; text-wrap: balance; }
/* 02.11.2026: Kicker („Pit-Service 01 · Extra Stint“, „Treueprogramm · ohne App, ohne Karte“) in Big Shoulders wie alle
   Beschriftungen (vorher Poppins 600, 10,5 px, Sperrung .16em aus kw-pills.css – Tobi: „wieder ein anderes Format“).
   Nur Website; das Cockpit nutzt den Kicker nicht. */
body .kwp--kicker { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .06em; }
/* 02.11.2026 (Tobi: „Für wen passt das?“, „Optionaler Feinschliff“ – „wieder andere Schrift“): Hinweiskasten-Titel,
   Dauer unter den Preiskarten-Titeln standen noch in Poppins-Versalien → Big Shoulders. („Jetzt lesen“ im Magazin ist ein
   Pillen-Knopf mit Rahmen und bleibt im Pillen-System.) */
body .kw-package-note-title { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .06em; }
body .pricing-duration { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; letter-spacing: .06em; font-size: 17px; }
body .kw-stints .pricing-duration { font-size: 17px; }
/* Startaufstellungs-Raster: Versatz der rechten Spalte als Verschiebung statt Außenabstand – so sind beide Karten
   einer Reihe gleich hoch (vorher war die rechte genau 28 px kürzer, Tobi 02.11.2026). „translate“ statt „transform“,
   damit die Einblend-Animation (.fe-reveal) nicht kollidiert. */
@media (min-width: 768px) {
  body .fe-grid .fe-slot:nth-child(even) { margin-top: 0; translate: 0 28px; }
  body .fe-grid { padding-bottom: 28px; }
}
body .kwp--kicker + :is(h2, h3, h4) { margin-top: 7px; }
/* Seitentitel der Rechtstexte und Unterüberschriften direkt unter einem §-Titel klebten am Folgeelement */
.kw-heading-wrap + p { margin-top: 18px; }
h2.tt-heading-title + h3.tt-heading-title { margin-top: 14px; }
/* Hinweis-Kasten direkt nach einem Ablauf („Für wen passt das?“) saß 10 px unter den Karten */
.fe-schedule + .kw-package-note, .fe-schedule-label + .fe-schedule + .kw-package-note { margin-top: 40px; }
/* Magazin: „Weiterlesen im Boxenfunk“ klebte an der Trennlinie */
.kw-article-weiterlesen > h2 { margin-top: 28px; }
/* Knopf nach zwei <br> im Absatz: die <br> blendet das Theme am Handy aus, der Knopf klebte am Text (Danke-Seite) */
/* (Hero-Texte zerlegt das Theme per JS in Wort-Hüllen, der Knopf steckt dann in .tt-cap-word-wrap) */
@media (max-width: 767px) { p > br + br + .kwb, .ph-caption-description > .tt-cap-word-wrap:has(.kwb) { margin-top: 18px; } }
/* Listenpunkte mit Icon vorn (Kontaktdaten) stehen nicht im Blocksatz: beim Umbruch zog er Icon und Text auseinander.
   Mail-Adressen mit Icon bleiben am Handy einzeilig (Adresse wird zentral gepflegt, darum kein <wbr> möglich). */
@media (max-width: 480px) {
  body #body-inner li:has(.tt-cd-icon .fa-envelope) { white-space: nowrap; font-size: min(1em, 4vw); }   /* #body-inner: sonst gewinnt text-wrap: wrap (setzt text-wrap-mode zurück) */
  .tt-footer-copyright { text-align: center; }
  body .kw-magazin-title { font-size: clamp(2.45rem, 12vw, 4rem) !important; }   /* „BOXENFUNK“ brach bei 14vw als „BOXENFUN / K“ */
}

/* 01.11.2026 Schriften-Prüfung: Knöpfe und Formularfelder erben die Schrift nicht von selbst. Die FAQ-Fragen
   (<button class="faq-question">) standen deshalb überall in Arial. Null Spezifität: Klassen wie .kwb behalten ihre Schrift.
   Zeichen, die in Sakana/Poppins/Big Shoulders fehlen (→ ← ✓ ⚠), stehen als SVG im HTML, sonst greift eine Systemschrift. */
:where(button, input, select, textarea) { font-family: inherit; }

/* 01.11.2026: Überschriften füllen die Zeile, bevor sie umbrechen (Tobi: „bricht schon nach ‚die‘ um, obwohl
   ‚neue‘ noch passt“). Das Theme setzt text-wrap: balance, das verteilt den Text gleichmäßig auf die Zeilen und
   bricht dadurch früh. pretty füllt die Zeilen und vermeidet nur ein einzelnes Wort in der letzten Zeile;
   wrap davor ist der Rückfall für Browser ohne pretty (iOS vor 26), sonst bliebe dort balance stehen.
   Kein Blocksatz und keine Silbentrennung in Überschriften: bei drei, vier Wörtern je Zeile reißt der Blocksatz
   große Lücken. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { text-wrap: wrap; text-wrap: pretty; }

/* =========================================================
   Handy-Durchgang (Tobi, 31.10.2026)
   ========================================================= */

/* Pillen auf der Website einheitlich in Großbuchstaben (Handy + Desktop). Das Cockpit lädt
   custom-theme.css nicht; buchen.html und gutschein.html tragen dieselbe Regel inline. */
.kwp { text-transform: uppercase; }
/* „LIVE IN DER LOUNGE“ (Hotlap-Leaderboard) wird dadurch breiter: einzeilig lassen, notfalls unter den Titel rutschen */
@media (max-width: 767.98px) { body .kwp.fe-lb-live { white-space: nowrap; } .fe-lb-bar { flex-wrap: wrap; row-gap: 8px; } }

/* Highlight-Wörter (<mark>): Variante B aus dem Vergleich vom 31.10.2026 (Tobi). Gleiches Gelb wie bisher, aber
   inline statt inline-block: bricht wie ein Textmarker Zeile für Zeile um, jedes Zeilenstück bekommt eigenen Rand
   und eigene Rundung (box-decoration-break), statt als Block Lücken in den Blocksatz zu reißen. Silbentrennung bleibt
   an (z. B. „Simu-cube“ auf neu.html): ohne sie entsteht davor eine große Blocksatz-Lücke. */
mark { display: inline; padding: 1px 4px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Knöpfe am Handy mittig: erst nur „Boxenfunk senden“ (31.10.2026), seit 01.11.2026 alle Knöpfe unter Texten, weil die
   Texte jetzt im Blocksatz stehen (Tobi: „Mittig“). Knopf-Zeilen der Karten/Abschnitte und die Preiskarten der Startseite.
   Magazin-Navigation („Zur Startseite“, „Zum Magazin“) bleibt links. */
@media (max-width: 767px) {
  .fe-radio-send, body .fe-row-cta { justify-content: center; }
  .pricing-card .kwb { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
}

/* Karten-Stapel am Handy (.kw-stapel an .fe-grid-rows, z. B. Formate/Pakete): jede Karte klebt
   versetzt oben, die nächste schiebt sich darüber, die untere wird kleiner und dunkler – wie die
   Stints auf neu.html. --s/--d setzt das Skript in inc/head-common.html. „scale“ statt „transform“,
   damit die Einblend-Animation (.fe-reveal) nicht kollidiert. */
@media (max-width: 767.98px) {
  /* overflow:hidden der Theme-Hüllen schaltet sticky ab; clip schneidet genauso, ohne Scroll-Container zu sein */
  body:has(.kw-stapel) #tt-content-wrap, body:has(.kw-stapel) #body-inner { overflow: clip; }
  .fe-grid-rows.kw-stapel { display: block; }
  /* 01.11.2026: Kartentext 16 statt 19 px. Neben dem P-Streifen bleiben ~250 px, bei 19 px nur ~20 Zeichen je Zeile;
     der Blocksatz riss dort Lücken bis 2,7 em (WebKit), bei 16 px höchstens 1,4 em. */
  .fe-grid-rows .fe-row-main p { font-size: 16px; }
  .fe-grid-rows.kw-stapel > .fe-row {
    position: sticky; top: var(--top, calc(124px + var(--i, 0) * 14px)); margin-bottom: 22px;
    background: #1c1e21; box-shadow: 0 -12px 28px rgba(0,0,0,.45);
    scale: var(--s, 1); transform-origin: 50% 0; will-change: scale;
  }
  .fe-grid-rows.kw-stapel > .fe-row:nth-child(2) { --i: 1; }
  .fe-grid-rows.kw-stapel > .fe-row:nth-child(3) { --i: 2; }
  .fe-grid-rows.kw-stapel > .fe-row:nth-child(4) { --i: 3; }
  .fe-grid-rows.kw-stapel > .fe-row::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000;
    opacity: var(--d, 0); pointer-events: none;
  }
}

/* Ablauf mit Minuten und Pausen (.fe-schedule--zeit): Business Grand Prix, After-Work Sprint,
   Special Events. Pausen sind .fe-stage--pause ohne Nummern-Kreis (der Zähler läuft nur über
   .fe-stage-num). Am Handy als kompakte Liste: Nummer | Titel + Satz | Minuten. */
.fe-stage-min {
  display: block; margin: 0 0 4px; font: 700 11px/1.3 Poppins, sans-serif;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fe-yellow, #ffc300);
}
.fe-schedule--4 .fe-stage:nth-child(4n)::after { content: none; }
.fe-stage.fe-stage--pause { background: transparent; border-style: dashed; border-color: rgba(255,255,255,.2); }
/* zwei Klassen: fe-racing.css lädt später und färbt .fe-stage > i / b sonst wieder gelb bzw. weiß */
.fe-stage.fe-stage--pause > i, .fe-stage--pause .fe-stage-min { color: rgba(255,255,255,.55); }
.fe-stage.fe-stage--pause b { color: rgba(255,255,255,.78); }
@media (max-width: 575px) {
  .fe-schedule.fe-schedule--zeit { gap: 10px; margin-top: 26px; }
  .fe-schedule--zeit .fe-stage {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center;
    column-gap: 14px; padding: 12px 16px; text-align: left;
  }
  .fe-schedule--zeit .fe-stage .fe-stage-num { position: static; transform: none; grid-column: 1; grid-row: 1 / 3; }
  .fe-schedule--zeit .fe-stage > i { display: none; }
  .fe-schedule--zeit .fe-stage--pause { padding: 8px 16px; }
  .fe-schedule--zeit .fe-stage--pause > i { display: block; grid-column: 1; grid-row: 1 / 3; margin: 0 auto; font-size: 18px; }
  .fe-schedule--zeit .fe-stage b { grid-column: 2; font-size: 17px; }
  .fe-schedule--zeit .fe-stage small { grid-column: 2; margin-top: 2px; }
  .fe-schedule--zeit .fe-stage-min { grid-column: 3; grid-row: 1 / 3; margin: 0; white-space: nowrap; }
}

/* Kontakt: Ampel-Karte zentriert, Ampel breiter, sobald die Spalten untereinander stehen */
@media (max-width: 1199px) {
  .opening-hours-card > .kwp { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
  .opening-hours-title { text-align: center; }
  .opening-hours-card .opening-status { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 16px 18px; }
  .opening-hours-card .opening-status-text { align-items: center; }
  .opening-hours-card .opening-status-trafficlight { gap: 22px; padding: 12px 34px; }
  .opening-hours-card .opening-status-trafficlight .light { width: 24px; height: 24px; }
}
/* Kontakt: großer Pfeil unter S1 nur am Desktop (wie bei „Preise & Pakete“ auf neu.html) */
@media (max-width: 1024px) { .tt-contact-info > .tt-big-arrow { display: none; } }
/* Kontaktformular am Handy kompakter in der Höhe */
@media (max-width: 767px) {
  #ft-contact-form .tt-form-group { padding: 16px 14px 8px 46px; margin-bottom: 12px; }
  #ft-contact-form .tt-form-group:not(:only-child)::before { top: 19px; left: 16px; }
  #ft-contact-form .tt-form-group > label:not(.kw-consent-toggle) { padding-bottom: 0; }
  #ft-contact-form .tt-form-control { padding-top: 6px; padding-bottom: 6px; }
  #ft-contact-form .tt-form-control:not(textarea):not([size]) { height: 42px; }
  #ft-contact-form textarea.tt-form-control { height: 104px; min-height: 0; }
}

/* Pillen auf Fotos (02.11.2026): Gold auf gelbem Auto/Flügel war kaum lesbar → dunkle Glasfläche unter der Tönung */
body :is(.kw-cs-artikel, .kw-magazin-feature) .kwp {
  background-color: rgba(12, 13, 16, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Generator-Felder (02.11.2026): unter 16 px zoomt das iPhone beim Antippen; angebot-cockpit.css setzt 15 px */
body .kwc-feld :is(input, select, textarea) {
  font-size: 16px;
}

/* Überschriften mit festen Umbrüchen (<br>) am Desktop (02.11.2026): text-wrap: pretty gleicht in Safari ALLE Zeilen
   aneinander an und brach so „Euer Rennstall für / einen Abend.“ ohne Not um. Ab Tablet-Breite; am Handy bleibt pretty (keine Einzelwörter). */
@media (min-width: 768px) {
  :is(h1, h2, h3, .h1, .h2, .h3):has(br) {
    text-wrap: wrap;
  }
}

/* Hinweis unter den Abläufen (02.11.2026, Tobi): die Racing-Zeit enthält die kurzen Pausen im Renn-Block.
   Blocksatz mit mittiger letzter Zeile wie die zentrierten Einleitungen; Abstand zum Kasten danach wie .fe-schedule + .kw-package-note */
.fe-schedule-note {
  margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .62);
  text-align: justify; text-align-last: center; -webkit-hyphens: auto; hyphens: auto;
}
.fe-schedule-note + .kw-package-note { margin-top: 40px; }