/* ============================================================================
   K&F Tollhaus — Adapter ROOT (Impreza 8.23.1 + WPBakery)   Stand 14.08.2026
   ============================================================================

   AUFGABE
   -------
   Diese Datei erfindet nichts. Sie biegt Imprezas eigene Variablen auf die
   Tokens aus tokens.css um und dreht dort die Textfarbe, wo sie auf heller
   Fläche weiß war. Mehr passiert hier nicht — keine Layouts, keine Abstände
   von Sektionen, keine Struktur.

   DIE ENTSCHEIDENDE ERKENNTNIS BEIM BAUEN
   ---------------------------------------
   Imprezas Farbvariablen sind DOPPELT belegt. Sie färben nicht nur Text,
   sondern auch Flächen:
       --color-content-heading  → Überschriftenfarbe UND Hintergrund der
                                  Attraktions-Karten (.us_custom_699a2170)
       --color-content-link     → Linkfarbe UND Hintergrund des Info-Balkens
                                  (.l-subheader.at_top)
   Wer diese Variablen einfach auf Dunkelblau setzt, um die Kontraste zu
   heilen, färbt damit AUCH die Karten und den Info-Balken dunkelblau — der
   Auftritt verliert auf einen Schlag seine orangen Flächen und wirkt sofort
   erwachsener und leiser. Genau das soll er nicht.

   Deshalb hier konsequent:
       Die VARIABLEN bleiben die Markenfarbe (Fläche bleibt orange, nur jetzt
       im echten CI-Ton #F39200), und die TEXTFARBEN werden separat gedreht.
   Das ist mehr Arbeit als ein Variablentausch, aber es ist der einzige Weg,
   der Barrierefreiheit herstellt, ohne die Lautstärke zu senken.

   ⚠️ !important wird hier bewusst eingesetzt. Impreza schreibt seine eigenen
   Design-Optionen selbst mit !important (z. B. .us_custom_699a2170) und legt
   sie in einem <style>-Block IM KOPF ab, also nach diesem Stylesheet. Ohne
   !important gewinnt an mehreren Stellen der Bestand.
   ========================================================================== */

/* ══ 1 · Themevariablen auf die Tokens ═════════════════════════════════════
   html:root statt :root — Spezifität 0-0-2 schlägt Imprezas :root (0-0-1),
   unabhängig von der Ladereihenfolge.                                       */
html:root {

  /* ── Flächen: Ton auf CI korrigiert, Rolle unverändert ────────────────── */
  --color-header-middle-bg:       var(--kf-sky);      /* war #B9E4F8 = gleich */
  --color-header-middle-bg-grad:  var(--kf-sky);
  --color-content-bg:             var(--kf-aqua);     /* war #85C9D1 = gleich */
  --color-content-bg-grad:        var(--kf-aqua);
  --color-content-bg-alt:         var(--kf-sky);
  --color-content-bg-alt-grad:    var(--kf-sky);
  --color-content-border:         var(--kf-aqua);
  --color-content-primary:        var(--kf-aqua);
  --color-content-primary-grad:   var(--kf-aqua);
  --color-content-secondary:      var(--kf-sky);
  --color-content-secondary-grad: var(--kf-sky);

  /* ── Die zwei doppelt belegten Variablen: bleiben ORANGE ───────────────
     Ton von #E07114 auf den echten Logo-Ton #F39200. Die Flächen (Karten,
     Info-Balken, Buttons) werden dadurch einen Hauch leuchtender, nicht
     matter. Die Textfarbe darauf regelt --color-header-middle-text.        */
  --color-content-heading:        var(--kf-orange);
  --color-content-heading-grad:   var(--kf-orange);
  --color-content-link:           var(--kf-orange);
  --color-content-link-hover:     var(--kf-action-hover);

  /* ── Textfarben: das eigentliche Kontrast-Heilmittel ───────────────────
     --color-header-middle-text war #FFFFFF und trug gleich drei Stellen:
     Hauptnavigation (weiß auf Hellblau = 1,35:1), Text der Attraktions-
     Karten und Text im Info-Balken. Ein Wert, drei geheilte Befunde.       */
  --color-header-middle-text:       var(--kf-ink);   /* auf sky   9,05:1 ✓ */
  --color-header-middle-text-hover: var(--kf-ink);   /* auf aqua  6,57:1 ✓ */
  --color-content-text:             var(--kf-ink-body);

  /* ── Footer: Fläche bleibt orange, Schrift dreht auf Dunkelblau ──────── */
  --color-footer-bg:            var(--kf-orange);
  --color-footer-bg-grad:       var(--kf-orange);
  --color-footer-bg-alt:        var(--kf-action-hover);
  --color-footer-bg-alt-grad:   var(--kf-action-hover);
  --color-footer-border:        var(--kf-orange);
  --color-footer-heading:       var(--kf-ink);
  --color-footer-heading-grad:  var(--kf-ink);
  --color-footer-text:          var(--kf-ink);
  --color-footer-link:          var(--kf-ink);
  --color-footer-link-hover:    var(--kf-ink);
  --color-subfooter-bg:         var(--kf-orange);
  --color-subfooter-bg-grad:    var(--kf-orange);
  --color-subfooter-bg-alt:     var(--kf-action-hover);
  --color-subfooter-border:     var(--kf-orange);
  --color-subfooter-heading:    var(--kf-ink);
  --color-subfooter-text:       var(--kf-ink);
  --color-subfooter-link:       var(--kf-ink);
  --color-subfooter-link-hover: var(--kf-ink);

  /* ── Impreza-Demo-Reste (W3): Pink/Lila + 135°-Verlauf stillgelegt ─────
     #E95095 / #7049BA sind Theme-Demo-Farben, im Frontend nirgends sichtbar
     — aber sie stehen scharf in den Variablen und würden bei jedem neuen
     Element sofort auftauchen. Auf die Marke gezogen statt gelöscht, damit
     nichts unerwartet farblos wird.                                        */
  --color-alt-content-heading:       var(--kf-ink);
  --color-alt-content-heading-grad:  var(--kf-ink);
  --color-alt-content-text:          var(--kf-ink-body);
  --color-alt-content-link:          var(--kf-ink);
  --color-alt-content-link-hover:    var(--kf-ink);
  --color-alt-content-primary:       var(--kf-orange);
  --color-alt-content-primary-grad:  var(--kf-orange);
  --color-alt-content-secondary:     var(--kf-aqua);
  --color-alt-content-secondary-grad:var(--kf-aqua);
  --color-alt-content-overlay:       rgba(40,46,112,.75);
  --color-alt-content-overlay-grad:  rgba(40,46,112,.75);
  --color-content-faded:             var(--kf-ink-muted);
  --color-alt-content-faded:         var(--kf-ink-muted);

  /* ── Schrift ───────────────────────────────────────────────────────────
     --font-size bleibt bewusst bei 16px: es hängen Navigation, Tabellen und
     Formulare daran. Der Fließtext wird weiter unten gezielt auf 18px
     gehoben, ohne die Preistabellen zu sprengen.                           */
  --font-family:        var(--kf-font-text);
  --font-weight:        var(--kf-fw-text);
  --bold-font-weight:   var(--kf-fw-text-bold);   /* ab jetzt ein ECHTER Schnitt */

  --h1-font-family:     var(--kf-font-display);
  --h1-font-size:       var(--kf-fs-h1);          /* 48px → 56px */
  --h1-font-weight:     var(--kf-fw-display);     /* 700 → 400: der 700er
                                                     existiert bei dieser
                                                     Schrift nicht, er war
                                                     synthetisch. Das ist der
                                                     „matschige" Eindruck.   */
  --h1-bold-font-weight:var(--kf-fw-display);
  --h2-font-size:       var(--kf-fs-h2);          /* 32px → 40px */
  --h3-font-size:       var(--kf-fs-h3);          /* 22,4px → 30px  (war
                                                     KLEINER als H4)         */
  --h4-font-size:       var(--kf-fs-h4);          /* 24px */
  --h5-font-size:       var(--kf-fs-h5);          /* 22,4px → 20px */
  --h6-font-size:       var(--kf-fs-h6);          /* 20,8px → 18px */

  /* ── Schatten ─────────────────────────────────────────────────────────── */
  --box-shadow:    var(--kf-sh-md);
  --box-shadow-up: 0 -5px 15px rgba(40,46,112,.15);

  /* ── Cookie-Banner: derselbe Primärbutton wie überall ─────────────────── */
  --cmplz_button_accept_background_color: var(--kf-action);
  --cmplz_button_accept_border_color:     var(--kf-action);
  --cmplz_button_accept_text_color:       var(--kf-action-text);
  --cmplz_button_border_radius:           var(--kf-r-md);
  --cmplz_slider_inactive_color:          var(--kf-orange);
  --cmplz_slider_active_color:            var(--kf-ink);
}


/* ══ 2 · Überschriften ═════════════════════════════════════════════════════
   Die Farbe kommt NICHT mehr aus --color-content-heading (das ist jetzt die
   Flächenfarbe), sondern explizit. Zeilenhöhe von 1,2 auf 1,15 — bei einer
   Handschrift mit unruhiger Grundlinie wirkt das ruhiger, ohne enger zu sein.
   ⛔ Die Comic-Schrift bleibt. Sie ist die Klammer zwischen Root und Shop.  */
.l-section h1, .l-section h2, .l-section h3,
.l-section h4, .l-section h5, .l-section h6,
.w-text h1, .w-text h2, .w-text h3,
h1, h2, h3, h4, h5, h6 {
  color: var(--kf-ink);
  line-height: var(--kf-lh-tight);
}
/* Auf orangen und bunten Flächen erbt die Überschrift die Flächen-Textfarbe
   (ebenfalls Dunkelblau) — deshalb ist hier nichts zurückzunehmen.         */


/* ══ 3 · Navigation ════════════════════════════════════════════════════════
   Die drei Regeln aus us-current-header-css tragen die alten Hexwerte fest
   verdrahtet (nicht über Variablen), deshalb hier namentlich überschrieben. */

/* aktiver Menüpunkt — war #FFFFFF auf #E07114 = 3,21:1 */
.ush_menu_1 .w-nav-item.level_1.current-menu-item > a:not(.w-btn),
.ush_menu_1 .w-nav-item.level_1.current-menu-ancestor > a:not(.w-btn),
.ush_menu_1 .w-nav-item.level_1.current-page-ancestor > a:not(.w-btn) {
  background: var(--kf-orange) !important;
  color: var(--kf-ink) !important;               /* 5,20:1 ✓ */
}
/* Hover/Fokus im Hauptmenü — war #E07114 auf #85C9D1 = 1,72:1 */
.ush_menu_1 .w-nav-item.level_1 > a:not(.w-btn):focus,
.no-touch .ush_menu_1 .w-nav-item.level_1.opened > a:not(.w-btn),
.no-touch .ush_menu_1 .w-nav-item.level_1:hover > a:not(.w-btn) {
  background: var(--kf-aqua) !important;
  color: var(--kf-ink) !important;               /* 6,57:1 ✓ */
}
/* Untermenü (heller Aufklapper) — war #E07114 auf Weiß = 2,86:1 */
.no-touch .ush_menu_1 .w-nav-item:not(.level_1) > a:focus,
.no-touch .ush_menu_1 .w-nav-item:not(.level_1):hover > a,
.ush_menu_1 .w-nav-item:not(.level_1).current-menu-item > a,
.ush_menu_1 .w-nav-item:not(.level_1).current-menu-ancestor > a,
.ush_menu_1 .w-nav-item:not(.level_1).current-page-ancestor > a {
  color: var(--kf-ink) !important;               /* 12,24:1 ✓ */
}


/* ══ 3b · Info-Balken für Feiertagszeiten ══════════════════════════════════
   Der Balken ist B11 aus der Design-DNA — er beantwortet die häufigste
   Elternfrage vor dem ersten Scroll und bleibt selbstverständlich.

   Zwei Reparaturen, beide nachgemessen:

   1) TEXTFARBE. Der Balken selbst erbt bereits --kf-ink, sein Textbaustein
      trägt aber eine eigene Widget-Farbe (.w-text.ush_text_2.has_text_color =
      Weiß). Weiß auf dem CI-Orange sind 2,35:1 — es wäre der einzige Wert
      geworden, der durch diesen Umbau SCHLECHTER wird (vorher 3,21:1).
      Mit --kf-ink: 5,20:1 ✓

   2) HÖHE AUF SCHMALEN GERÄTEN. Impreza gibt dem Balken unter 600px eine
      feste Höhe von 110px bei line-height 110px. Solange die Schrift gar
      nicht lud (siehe fonts.css), passte der Text zufällig in diese Höhe —
      mit der jetzt tatsächlich geladenen Open Sans braucht er 144px und die
      erste Zeile lief oben aus dem Balken heraus. Das ist eine Folge der
      Schrift-Reparatur und wird deshalb hier mitbehoben: Höhe mitwachsen
      lassen statt Text abschneiden. Kein Layout-Umbau — dieselbe Leiste,
      dieselbe Position, nur ohne feste Höhe.                                */
.l-subheader.at_top,
.l-subheader.at_top .w-text,
.l-subheader.at_top .w-text.has_text_color,
.l-subheader.at_top .w-html,
.l-subheader.at_top a {
  color: var(--kf-ink) !important;               /* 5,20:1 ✓ statt 2,35:1 */
}
@media (max-width: 900px) {
  .l-subheader.at_top,
  .l-subheader.at_top .l-subheader-h {
    height: auto !important;
    min-height: 0 !important;
    line-height: var(--kf-lh-normal) !important;
  }
  .l-subheader.at_top .l-subheader-h {
    padding-top: var(--kf-sp-3);
    padding-bottom: var(--kf-sp-3);
  }
}


/* ══ 4 · Der EINE Primärbutton ═════════════════════════════════════════════
   Fläche: CI-Orange. Schrift: Logo-Dunkelblau (5,20:1 ✓ statt 3,21:1).
   Dazu der harte Versatzschatten aus dem Shop-Bestand — er war dort grau und
   einsam, jetzt ist er markenecht und System (Sticker-Optik, M14). Das ist
   bewusst LAUTER als vorher, nicht ruhiger.                                */
.w-btn.us-btn-style_1,
.us-btn-style_1,
button[type="submit"]:not(.w-btn),
input[type="submit"]:not(.w-btn) {
  background: var(--kf-action) !important;
  background-color: var(--kf-action) !important;
  color: var(--kf-action-text) !important;
  border-color: var(--kf-action) !important;
  border-radius: var(--kf-r-md) !important;
  box-shadow: var(--kf-sh-sticker) !important;
  font-family: var(--kf-font-text) !important;
  font-weight: var(--kf-fw-text-bold) !important;
  min-height: var(--kf-tap-min);
  transition: background-color var(--kf-dur-fast) var(--kf-ease-out),
              box-shadow var(--kf-dur-fast) var(--kf-ease-out);
}
.no-touch .w-btn.us-btn-style_1:hover,
.no-touch .us-btn-style_1:hover,
.no-touch button[type="submit"]:not(.w-btn):hover,
.no-touch input[type="submit"]:not(.w-btn):hover,
.w-btn.us-btn-style_1:focus-visible {
  background: var(--kf-action-hover) !important;
  background-color: var(--kf-action-hover) !important;
  color: var(--kf-action-text) !important;
  border-color: var(--kf-action-hover) !important;
}


/* ══ 5 · Links im Fließtext ════════════════════════════════════════════════
   Waren #E07114 auf #E7F4F6 = 2,86:1 — und nur an der Farbe erkennbar.
   Jetzt Dunkelblau (10,89:1) mit oranger Unterstreichung: das Orange bleibt
   sichtbar im Bild, der Link ist zusätzlich nicht mehr nur farbcodiert.    */
.l-section .w-text a:not(.w-btn):not(.button),
.l-section .wpb_text_column a:not(.w-btn):not(.button),
.l-main .w-text a:not(.w-btn):not(.button) {
  color: var(--kf-ink);
  text-decoration: underline;
  text-decoration-color: var(--kf-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.no-touch .l-section .w-text a:not(.w-btn):not(.button):hover,
.no-touch .l-section .wpb_text_column a:not(.w-btn):not(.button):hover {
  color: var(--kf-ink);
  text-decoration-thickness: 3px;
}


/* ══ 6 · Fließtext auf 18px ════════════════════════════════════════════════
   Bewusst NUR die Textblöcke, nicht global. Preistabellen, Öffnungszeiten
   und Formulare bleiben bei 16px — dort war die Lesbarkeit mit 15,48:1
   ohnehin die beste des ganzen Auftritts, und ein globaler Sprung hätte die
   Tabellen auf 390px umgebrochen.                                          */
.l-section .w-text > p,
.l-section .wpb_text_column p,
.l-main .wpb_text_column p {
  font-size: var(--kf-fs-base);
  line-height: var(--kf-lh-normal);
}
/* Tabellen ausdrücklich zurückgesetzt */
.l-section table p, table td p, table th p { font-size: var(--kf-fs-sm); }


/* ══ 7 · Sichtbarer Tastatur-Fokus ═════════════════════════════════════════
   Dunkelblau, weil es als einzige Farbe auf ALLEN unseren Flächen über 5:1
   liegt (orange 5,20 · aqua 6,57 · sky 9,05 · weiß 12,24). Rot wäre auf
   Orange praktisch unsichtbar gewesen.                                      */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--kf-focus) !important;
  outline-offset: 2px !important;
  border-radius: var(--kf-r-xs);
}


/* ══ 8 · Radien ════════════════════════════════════════════════════════════
   Runde Formen sind Teil des Charmes. Die Attraktions-Karten und die
   Volle-Breite-Balken waren komplett scharfkantig.                          */
.us_custom_699a2170,
.wpb_column.has_bg_color,
.w-grid-item-h,
.l-section .vc_column_container.has_bg_color > .vc_column-inner {
  border-radius: var(--kf-r-lg);
}