/* ============================================================
   CI brand.css — Tokens + alle .ku-* Komponenten (Nav, Mega, Buttons, Cards,
   Mesh, Slider, Reveals, Hero-Sequenz …). Single Source of Truth, aus der
   abgenommenen index.html extrahiert (2026-07-08).
   Setzt die Tailwind-Farb-Tokens (tailwind-config.js) voraus.
   ============================================================ */
  :root {
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);      /* alles Eintretende / Nutzer-initiierte */
    --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Scroll-Reveals (ruhig, ease-out) */
  }
  html { scroll-behavior: smooth; }
  html, body { max-width: 100%; overflow-x: hidden; }
  body {
    background: #F4F8FA;
    font-family: 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .ku-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: 0; }
  .ku-eyebrow { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }

  /* Signature-Satzpunkt */
  .ku-dot { color: #126E97; }          /* auf Hell */
  .ku-dot-light { color: #8FBFD6; }    /* auf Ink (leuchtet) */

  /* Frische-Pass: klareres, brillanteres Foto-Grading (mehr Klarheit/Sättigung statt warmem Schleier) */
  .ku-graded { filter: saturate(1.06) contrast(1.06) brightness(1.02); }

  /* Foto-Bezel (Passepartout — erhöhte Karte um ein Foto): reinweisse Fassung + zarte Steel-Hairline */
  .ku-photo-frame { background: #FFFFFF; padding: 0.375rem; border-radius: 1.35rem;
    box-shadow: 0 40px 80px -24px rgba(15,39,51,0.22); }
  .ku-photo-frame > img { border-radius: 1rem; display: block; }

  /* ===== Frische-Pass 2026-07-06 — frische Verläufe (Flächen/Elemente, NIE Headline-Text, P02) ===== */
  /* Primär-CTA: diagonaler Steel-Verlauf brand-600 -> brand-400/500 statt flach */
  .ku-cta-grad { background-image: linear-gradient(120deg, #0E5978 0%, #126E97 42%, #2E82A8 100%); }
  /* Karten-Hairline: definierte Kante (1px steel-100/150) statt nur weichem Schatten (knackiger) */
  .ku-card-edge { border: 1px solid rgba(18,110,151,0.10); }
  .ku-card-edge-ink { border: 1px solid rgba(143,191,214,0.14); }
  /* Zarte Verlaufs-Akzentlinie (Badges/Trenner) */
  .ku-accent-line { background-image: linear-gradient(90deg, #126E97, #4C97BC); }

  /* Service-Karten (V3 Ink-Bühne): Basis-Zustände (auch bei reduced-motion / no-JS gültig) */
  .ku-service { cursor: pointer; }
  .ku-service-inner { box-shadow: 0 40px 80px -36px rgba(0,0,0,0.55);   /* Ruhe-Schatten */
    background-color: #FFFFFF;   /* heller, aber deutlicher Mesh-Gradient (Chris 2026-07-07) */
    background-image:
      radial-gradient(78% 66% at 3% 100%, rgba(18,110,151,0.17), rgba(18,110,151,0) 62%),
      radial-gradient(64% 58% at 100% 100%, rgba(76,151,188,0.14), rgba(76,151,188,0) 64%); }
  .ku-service-photo { overflow: hidden; }                                 /* Foto-Zoom-Clip */
  .ku-service-img { will-change: transform; }

  /* Grain-Overlay (fest, pointer-events-none, nur einmal) */
  .ku-grain::before {
    content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ===================== MOTION — nur bei no-preference ===================== */
  @media (prefers-reduced-motion: no-preference) {

    /* (1) DIE EINE orchestrierte Hero-Sequenz (CSS-only, LCP-sicher) */
    @keyframes ku-word    { from { transform: translateY(24px); opacity: 0.01; } to { transform: translateY(0); opacity: 1; } }
    @keyframes ku-fade    { from { transform: translateY(16px); opacity: 0; }    to { transform: translateY(0); opacity: 1; } }
    @keyframes ku-scale   { from { transform: scale(0.97); opacity: 0; }         to { transform: scale(1); opacity: 1; } }
    @keyframes ku-clip    { from { clip-path: inset(0 0 100% 0); }               to { clip-path: inset(0 0 0% 0); } }   /* LCP: opacity bleibt 1 */
    @keyframes ku-clip-up { from { clip-path: inset(100% 0 0 0); opacity: 0.01; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
    @keyframes ku-navdrop { from { transform: translateY(-14px); opacity: 0; }   to { transform: translateY(0); opacity: 1; } }

    .ku-hero .seq-nav, #main-header .seq-nav { animation: ku-navdrop 640ms var(--ease-out) both; }
    .ku-hero .seq-kick  { animation: ku-fade 620ms var(--ease-out) both; animation-delay: 60ms; }
    .ku-hero .seq-w1    { animation: ku-word 520ms var(--ease-out) both; animation-delay: 140ms; }
    .ku-hero .seq-w2    { animation: ku-word 520ms var(--ease-out) both; animation-delay: 260ms; }
    .ku-hero .seq-w3    { animation: ku-word 520ms var(--ease-out) both; animation-delay: 380ms; }
    .ku-hero .seq-sub   { animation: ku-fade 560ms var(--ease-out) both; animation-delay: 500ms; }
    .ku-hero .seq-cta   { animation: ku-scale 500ms var(--ease-out) both; animation-delay: 600ms; }
    .ku-hero .seq-img   { animation: ku-clip 760ms var(--ease-premium) both; animation-delay: 150ms; }  /* LCP-Foto: opacity 1 */
    .ku-hero .seq-img2  { animation: ku-clip-up 700ms var(--ease-premium) both; animation-delay: 520ms; }

    /* (2) Scroll-Eintritte — feine Choreografie mit Richtungs-Varianz (impeccable animate,
       erweitertes Budget Chris 2026-07-06). IntersectionObserver-gesteuert: Content ist DEFAULT
       sichtbar; nur unter .js wird der Ruhe-Zustand gesetzt (kein Blank-Render, kein LCP-Bruch).
       Kein uniformes Fade-up — Bild/Text/Foto reveals unterscheiden sich (P20-Schutz). */
    .js [data-reveal] {
      opacity: 0;
      transition: opacity 720ms var(--ease-out-quint), transform 720ms var(--ease-out-quint);
    }
    .js [data-reveal="trail"]      { transform: translateY(22px); }               /* Text: von unten */
    .js [data-reveal="lead"]       { transform: translateY(14px); }               /* Leitelement: knapp von unten */
    .js [data-reveal="from-left"]  { transform: translateX(-34px); }              /* Foto links: von links herein */
    .js [data-reveal="from-right"] { transform: translateX(34px); }               /* Foto rechts: von rechts herein */
    /* Foto-Reveal per clip-path (editoriale Wische, wie im Hero) */
    .js [data-reveal="clip"] {
      opacity: 1;                       /* clip-only, kein Opacity-Sprung (crisp) */
      clip-path: inset(0 0 14% 0);
      transition: clip-path 820ms var(--ease-premium), transform 820ms var(--ease-out-quint);
    }
    .js [data-reveal].is-in {
      opacity: 1; transform: none; clip-path: inset(0 0 0 0);
    }
    /* Stagger innerhalb einer Reihe/Liste (index-basiert, gedeckelt) */
    .js [data-reveal][style*="--i"] { transition-delay: calc(var(--i) * 90ms); }
    /* Leistungs-Karten (V3): Stagger läuft über die --i-Inline-Vars (rechte Karte je Reihe +90ms);
       die frühere nth-of-type-Staffelung entfällt mit der neuen Zwei-Reihen-Grid-Struktur. */
    /* Ablauf-Schritte: sanfter nth-child-Stagger (Reihenfolge = Lesefluss) */
    .js .ku-ablauf [data-reveal]:nth-of-type(2) { transition-delay: 90ms; }
    .js .ku-ablauf [data-reveal]:nth-of-type(3) { transition-delay: 180ms; }
    /* nach dem Reveal will-change wieder freigeben (Perf) */
    .js [data-reveal].is-in { will-change: auto; }

    /* (3) Micro-Interactions — lebendigeres Feedback (impeccable animate, erweitertes Budget) */
    .ku-btn        { transition: transform 150ms var(--ease-out), box-shadow 200ms var(--ease-out); }
    .ku-btn:hover  { transform: translateY(-2px); }
    .ku-btn:active { transform: scale(0.98); }
    .ku-btn .ku-btn-ic { transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out); }
    .ku-btn:hover .ku-btn-ic { transform: translate(3px,-2px); background-color: rgba(255,255,255,0.28); }

    /* ===== Service-Karten-Hover (V3 Ink-Bühne, neu 2026-07-06) =====
       Sauber & edel: KEIN Hover-Transform auf dem <a data-reveal> selbst — sonst kollidiert
       er mit dem [data-reveal].is-in-Reset ({transform:none}) und ruckelt/springt.
       Stattdessen liegt der Lift auf einem INNEREN Wrapper (.ku-service-inner), der nie
       reveal-Element ist. Der Reveal choreografiert die Karte herein, der Hover hebt danach
       den inneren Körper — beide Ebenen stören sich strukturell nicht (kein Specificity-Duell). */
    .ku-service-inner { transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out); }
    .ku-service-img   { transition: transform 500ms var(--ease-out); }
    .ku-service-arrow { transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out), color 250ms var(--ease-out), background-color 250ms var(--ease-out); }

    /* Tastatur-Fokus (immer, auch auf Touch): gleicher edler Zustand wie Hover */
    .ku-service:focus-visible .ku-service-inner { transform: translateY(-3px); box-shadow: 0 56px 104px -34px rgba(0,0,0,0.60); }
    .ku-service:focus-visible .ku-service-img   { transform: scale(1.03); }
    .ku-service:focus-visible .ku-service-arrow { transform: translateX(4px); border-color: rgba(18,110,151,0.35); color: #126E97; background-color: rgba(18,110,151,0.06); }

    /* Maus/Pointer-Hover NUR auf Geräten mit echtem Hover (kein „Sticky-Hover" auf Touch) */
    @media (hover: hover) {
      .ku-service:hover .ku-service-inner { transform: translateY(-3px); box-shadow: 0 56px 104px -34px rgba(0,0,0,0.60); }  /* präzise → weicher/größer */
      .ku-service:hover .ku-service-img   { transform: scale(1.03); }                                                         /* dezenter Zoom */
      .ku-service:hover .ku-service-arrow { transform: translateX(4px); border-color: rgba(18,110,151,0.35); color: #126E97; background-color: rgba(18,110,151,0.06); }  /* Steel-Pfeil reist */
    }

    /* Zitat-/Info-Karten mit Lift (nur die, die als klickbar/erhoben gedacht sind → per .ku-lift) */
    .ku-lift { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
    .js [data-reveal].ku-lift:hover, .ku-lift:hover { transform: translateY(-4px); box-shadow: 0 40px 72px -32px rgba(15,39,51,0.22); }

    /* Inline-Text-Links: Pfeil reist weiter */
    .ku-inline-arrow { transition: transform 300ms var(--ease-out); }
    .group:hover .ku-inline-arrow { transform: translateX(5px); }
  }

  /* Frische-Pass: Primär-CTA trägt Steel-Verlauf; Hover verschiebt den Verlauf (frischer, präsenter) */
  .ku-btn-primary { background-image: linear-gradient(120deg, #0E5978 0%, #126E97 42%, #2E82A8 100%); box-shadow: 0 18px 36px -18px rgba(18,110,151,0.45); }
  .ku-btn-primary:hover  { background-image: linear-gradient(120deg, #126E97 0%, #2E82A8 55%, #4C97BC 100%); box-shadow: 0 26px 54px -18px rgba(18,110,151,0.52); }
  .ku-btn:active { transform: scale(0.98); }

  /* Nav-Link Unterstreichung von links */
  .ku-navlink { position: relative; font-size: 1rem; }
  .ku-navlink::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1.5px; background: #8FBFD6; transition: width 220ms var(--ease-out); }
  .ku-navlink:hover::after, .ku-navlink[aria-current="page"]::after { width: 100%; }

  /* Fokus-Ringe — 3:1-Kontrast, überall sichtbar */
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #2E82A8; outline-offset: 3px; border-radius: 6px;
  }
  .ku-on-ink a:focus-visible, .ku-on-ink button:focus-visible, .ku-on-ink summary:focus-visible {
    outline-color: #8FBFD6;
  }

  /* FAQ-Akkordeon */
  .ku-faq details { border-bottom: 1px solid rgba(15,39,51,0.10); }
  .ku-faq summary { list-style: none; cursor: pointer; }
  .ku-faq summary::-webkit-details-marker { display: none; }
  .ku-faq summary .ku-faq-plus { transition: transform 260ms var(--ease-out); }
  .ku-faq details[open] summary .ku-faq-plus { transform: rotate(45deg); }

  /* Sticky-Bottom-Bar (mobil) */
  .ku-stickybar { box-shadow: 0 -18px 40px -24px rgba(15,39,51,0.35); }
  @media (max-width: 320px) { .ku-stickybar { position: static !important; } }

  @media (prefers-reduced-motion: reduce) {
    .ku-hero [class^="seq-"], .ku-hero [class*=" seq-"] { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
    /* JS-Reveals: bei reduced-motion sofort voll sichtbar, keine Bewegung, keine clip-path-Wische */
    .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  }

  /* Ordinale/Nummerierung in den Leistungen entfernt (Chris 2026-07-07). */

  /* ===================== FLÄCHEN-TEXTUR — subtile Mesh-Gradients (Chris 2026-07-06) =====================
     Regel (design-brief §4/§6): helle Content-Flächen sind NIE flat. 2-3 große radiale Papier/Creme-Wolken
     + max. 4-6 % Steel-Tint. Pro Section leicht andere Wolken-Position (Rhythmus, nie identisch). Ruhig,
     kaum wahrnehmbar — keine sichtbaren Gradient-Orbs (P06). Kein Bild, keine Animation. Text-Kontrast AA. */
  /* Zwei-Ton-Alternation (Chris 2026-07-06): statt vieler kaum unterscheidbarer Mesh-Nuancen
     nur ZWEI klar unterscheidbare helle Töne im Wechsel. Der Ton-Sprung muss auf einen Blick
     sichtbar sein; die Mesh-Textur bleibt subtil INNERHALB des Tons und verwischt A/B nie.
       Ton A = deutlich hell Richtung Weiß (#FCFDFE)  — u.a. „Willkommen im Kö-Center"
       Ton B = kühle getönte Creme (#E6EEF2)          — der frühere „Willkommen"-Ton, klar dunkler als A
     Alternation über die hellen Content-Sections: A → B → A(ink) → A → B → A → B …
     (benachbarte helle Sections tragen nie denselben Ton; Ink-Bühnen liegen dazwischen). */
  .ku-mesh { background-color: #FCFDFE; }   /* Fallback: Ton A */

  /* ===== TON A — deutlich hell, Richtung Weiß ===== */
  .ku-tone-a {
    background-color: #FBFDFE;
    background-image:
      radial-gradient(60% 50% at 20% 10%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
      radial-gradient(56% 50% at 86% 82%, rgba(76,151,188,0.11) 0%, rgba(76,151,188,0) 64%);
  }
  /* leichte Wolken-Varianten je Section (Rhythmus, ohne den Ton zu verschieben) */
  .ku-tone-a.v2 { background-image:
      radial-gradient(58% 48% at 82% 12%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
      radial-gradient(50% 46% at 10% 80%, rgba(76,151,188,0.05) 0%, rgba(76,151,188,0) 62%); }
  .ku-tone-a.v3 { background-image:
      radial-gradient(60% 52% at 50% 6%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
      radial-gradient(46% 44% at 88% 88%, rgba(76,151,188,0.055) 0%, rgba(76,151,188,0) 60%); }

  /* ===== TON B — kühle getönte Creme, klar dunkler als A ===== */
  .ku-tone-b {
    background-color: #e4eef4;
    background-image:
      radial-gradient(60% 50% at 84% 10%, #F1F7FA 0%, rgba(241,247,250,0) 60%),
      radial-gradient(56% 52% at 10% 74%, rgba(18,110,151,0.14) 0%, rgba(18,110,151,0) 66%);
  }
  .ku-tone-b.v2 { background-image:
      radial-gradient(58% 50% at 16% 14%, #F3F8FB 0%, rgba(243,248,251,0) 60%),
      radial-gradient(52% 50% at 88% 82%, rgba(18,110,151,0.07) 0%, rgba(18,110,151,0) 62%); }
  .ku-tone-b.v3 { background-image:
      radial-gradient(58% 54% at 88% 12%, #F3F8FB 0%, rgba(243,248,251,0) 60%),
      radial-gradient(54% 50% at 12% 84%, rgba(18,110,151,0.075) 0%, rgba(18,110,151,0) 64%); }

  /* ===================== RAFFINESSE-RUNDE 2026-07-06 =====================
     Teil 2: Floating-Header mit Scroll-Morph (dark-glass -> light), Mega-Menüs (Header-Mode-erbend),
     Mobile-Drawer. Teil 1: Scroll-Cue. Teil 3: verschärfte Playfair-line-height (≥1.1) gegen
     geclippte Descender (g/y/p/ß/Ö). Regelbasis: high-end-visual-design (Fluid-Island-Nav),
     js-modules.md (Modul 2/3/5), 07-animations-regelwerk. */

  /* ---- Teil 3: Letter-Clipping-Fix — alle Playfair-Headings brauchen Zeilenluft ----
     Didone-Descender werden bei zu enger line-height geclippt. Globale Absicherung:
     jede Playfair-Headline mind. 1.12 (H2-Klasse) bzw. 1.1 (Karten-H3). Inline-Styles der
     einzelnen Headings werden zusätzlich direkt korrigiert (Redundanz = Sicherheit). */
  .ku-display { line-height: 1.12; }
  h1.ku-display, .ku-display h1, h2 .ku-display, .ku-display.ku-h2 { line-height: 1.12; }
  /* Karten-/Sub-Headings, die enger stehen dürfen, aber nie unter 1.1 */
  h3.ku-display, .ku-service-inner h3.ku-display { line-height: 1.1; }
  /* Der Foto-Container clippt (Zoom), der Text-Block NIE — sonst Descender-Schnitt (Typo overflow sichtbar) */
  .ku-service-inner { overflow: visible; }
  .ku-service-inner > .ku-service-photo { overflow: hidden; }

  /* ---- Teil 2: Floating-Header + Scroll-Morph ----
     Initial: Dark-Glass-Pille auf dem Ink-Hero. Ab .scrolled: helle, leicht durchsichtige Bar,
     ink-Text, dunkles Logo, kompakter. EIN Zustand (.scrolled am #main-header) steuert Bar UND
     Mega-Panels (Revision 2). Übergang weich ~300ms. */
  #main-header { transition: transform 400ms var(--ease-out), padding 360ms var(--ease-premium); }
  /* Nav (Chris 2026-07-07): un-scrolled Full-Width transparent (kein Border/Shadow/Rundung);
     scrolled = schwebendes PILL (contained, rounded, frosted) + Wortmarken-Logo, leichter Shrink. */
  .ku-bar {
    background-color: transparent;
    border: 1px solid transparent;
    transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out),
                box-shadow 320ms var(--ease-out), backdrop-filter 320ms var(--ease-out),
                border-radius 360ms var(--ease-premium), max-width 360ms var(--ease-premium);
  }
  .ku-logo-img { transition: height 300ms var(--ease-out), opacity 220ms var(--ease-out); }
  .ku-logo-wrap { position: relative; display: inline-flex; align-items: center; }
  .ku-logo-word { display: none; }
  /* Scroll-Zustand: schwebendes Pill */
  #main-header.scrolled { padding: 0.7rem 1rem 0; }
  #main-header.scrolled .ku-bar {
    max-width: 1560px; margin: 0 auto;
    border-radius: 9999px;
    background-color: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border-color: rgba(15,39,51,0.08);
    box-shadow: 0 14px 34px -20px rgba(15,39,51,0.30);
  }
  /* leichter Shrink: Nav-Padding im Scroll runter, Wortmarke statt Voll-Logo */
  #main-header.scrolled nav { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  #main-header.scrolled .ku-logo-light { display: none; }
  #main-header.scrolled .ku-logo-word  { display: block; }
  /* Gescrolltes Wortmarken-Logo: Desktop-Höhe 1.15em (Chris 2026-07-07). Mobil bleibt h-6. */
  @media (min-width: 1024px) { #main-header.scrolled .ku-logo-word { height: 1.15em; } }
  #main-header.scrolled .ku-bar .ku-navlink { color: #1D4659; }
  #main-header.scrolled .ku-bar .ku-navlink:hover,
  #main-header.scrolled .ku-bar .ku-navlink[aria-expanded="true"] { color: #0F2733; }
  /* Nav-Underline im Light-Mode in steel-600 statt steel-300 (Kontrast auf Hell) */
  #main-header.scrolled .ku-bar .ku-navlink::after { background: #126E97; }
  /* Hamburger-Striche folgen dem Mode */
  #main-header .ku-burger-line { background: #FBFAF8; transition: background-color 300ms var(--ease-out), transform 320ms var(--ease-premium), opacity 200ms var(--ease-out); }
  #main-header.scrolled .ku-burger-line { background: #0F2733; }
  /* Burger morpht zu X, wenn das Mega offen ist (Chris 2026-07-08, aria-getrieben) */
  #ku-burger[aria-expanded="true"] .ku-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #ku-burger[aria-expanded="true"] .ku-burger-line:nth-child(2) { opacity: 0; }
  #ku-burger[aria-expanded="true"] .ku-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav-Kontakt-Icons + Öffnungszeiten-Dropdown (Chris 2026-07-07) */
  .ku-navicon { color: #DCEBF3; transition: color .2s var(--ease-out), background-color .2s var(--ease-out); }
  .ku-navicon:hover { background-color: rgba(255,255,255,0.10); color: #FFFFFF; }
  #main-header.scrolled .ku-navicon { color: #1D4659; }
  #main-header.scrolled .ku-navicon:hover { background-color: rgba(18,110,151,0.08); color: #0F2733; }
  .ku-hours-panel { position: absolute; right: 0; top: calc(100% + 12px); width: 240px;
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
    background-color: rgba(15,39,51,0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid rgba(251,250,248,0.10); border-radius: 1rem; box-shadow: 0 30px 70px -28px rgba(0,0,0,0.65);
    padding: 1.05rem 1.2rem; z-index: 46;
    transition: opacity .22s var(--ease-out), transform .26s var(--ease-premium), visibility .22s; }
  .ku-hours-panel.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .ku-hours-head { color: #8FBFD6; }
  .ku-hours-day { color: #DCEBF3; font-size: 0.95rem; font-weight: 600; }
  .ku-hours-time { color: #C6CDD1; font-size: 0.9rem; }
  .ku-hours-tel { color: #8FBFD6; }
  .ku-hours-tel:hover { color: #FFFFFF; }
  #main-header.scrolled .ku-hours-panel { background-color: rgba(255,255,255,0.97); border-color: rgba(15,39,51,0.08); box-shadow: 0 30px 70px -28px rgba(15,39,51,0.28); }
  #main-header.scrolled .ku-hours-head { color: #126E97; }
  #main-header.scrolled .ku-hours-day { color: #0F2733; }
  #main-header.scrolled .ku-hours-time { color: #5A6872; }
  #main-header.scrolled .ku-hours-tel { color: #126E97; }
  #main-header.scrolled .ku-hours-tel:hover { color: #0F2733; }

  /* Jameda-Wortmarke (Platzhalter bis echtes Logo-Asset) */
  .ku-jameda-mark { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; color: #33B0A6; letter-spacing: -0.01em; }

  /* ---- Mega-Menü „B-Light" — Split Service Gallery (Leistungsliste + Foto-Bühne).
     Schwebendes, abgerundetes Panel unter der Leiste; Desktop via Hover, Mobil via Hamburger.
     Foto-Bühne (nur ab lg) wechselt per Hover/Focus einer Leistung Bild + Caption. ---- */

  /* ---- Nav-Trigger fürs Vollbild-Menü (Chris 2026-07-08): sichtbare Menüpunkte „Leistungen"/
     „Ratgeber" öffnen bei Hover/Klick das Vollbild-B-Light (#ku-fullmenu). ---- */
  .ku-fm-hover { background: none; border: 0; cursor: pointer; }
  .ku-mega-caret { transition: transform 240ms var(--ease-out); }
  .ku-fm-hover[aria-expanded="true"] .ku-mega-caret { transform: rotate(180deg); }

  /* Schwebende Card: unter der Leiste (top per JS = Leisten-Unterkante + Lücke), fester Seitenrand,
     runde Ecken, Content-Höhe gedeckelt (interner Scroll bei Bedarf). */
  .ku-fm {
    --fm-inset: 1.5rem;
    position: fixed; top: var(--fm-top, 5.5rem); left: var(--fm-inset); right: var(--fm-inset); z-index: 40;
    max-height: calc(100dvh - var(--fm-top, 5.5rem) - 1.5rem); display: flex;
    background: #FFFFFF; border-radius: 1.5rem; overflow: hidden;
    box-shadow: 0 40px 90px -34px rgba(15,39,51,0.34), 0 8px 24px -16px rgba(15,39,51,0.20);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-premium), visibility 260ms;
  }
  @media (min-width: 640px) { .ku-fm { --fm-inset: 2rem; } }
  .ku-fm.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .ku-fm-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .ku-fm-grid { grid-template-columns: 42% 58%; } }

  /* Links: helles Nav-Panel mit dezentem Steel-Mesh */
  .ku-fm-panel {
    position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0;
    background-color: #FFFFFF;
    background-image:
      radial-gradient(70% 55% at 4% 100%, rgba(18,110,151,0.06), rgba(18,110,151,0) 60%),
      radial-gradient(60% 50% at 100% 0%, rgba(76,151,188,0.06), rgba(76,151,188,0) 60%);
    border-right: 1px solid rgba(15,39,51,0.06);
  }
  /* Leistungs-Zeilen: Hover/Focus schiebt ein, färbt Steel, blendet die Foto-Bühne um */
  .ku-fm-svc { display: flex; align-items: baseline; gap: .8rem; padding: .5rem 0; color: #163847;
    border-left: 2px solid transparent;
    transition: color .2s var(--ease-out), padding-left .25s var(--ease-out), border-color .2s var(--ease-out); }
  .ku-fm-svc:hover, .ku-fm-svc:focus-visible { color: #126E97; padding-left: .8rem; border-left-color: #126E97; outline: none; }
  .ku-fm-svc .ku-fm-n { font-size: .8rem; color: #B4C0C8; width: 1.6rem; flex: none; }
  .ku-fm-minor { color: #5A6872; transition: color .18s var(--ease-out); }
  .ku-fm-minor:hover { color: #0F2733; }

  /* Rechts: Foto-Bühne (Cross-Fade) */
  .ku-fm-stage { position: relative; overflow: hidden; background-color: #E9EFF2; }
  .ku-fm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .5s var(--ease-out); }
  .ku-fm-img.active { opacity: 1; }

  /* Staggered Mask-Reveal beim Öffnen */
  .ku-fm [data-r] { opacity: 0; transform: translateY(18px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  .ku-fm.open [data-r] { opacity: 1; transform: none; transition-delay: calc(var(--i,0) * 55ms); }

  @media (prefers-reduced-motion: reduce) {
    .ku-fm { transition: opacity .2s linear, visibility .2s; }
    .ku-fm [data-r], .ku-fm-img { transition: none; }
    .ku-fm.open [data-r] { transform: none; transition-delay: 0ms; }
  }

  /* ---- Bewertungs-Slider (Chris 2026-07-07) — gleich große Karten, scroll-snap, Breakout nach rechts ---- */
  .ku-rev-track {
    display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    /* Breakout right: linke Kante bleibt an der Content-Spalte, rechte Kante blutet zum Viewport-Rand */
    margin-right: calc(50% - 50vw);
    padding-right: clamp(1.25rem, 5vw, 3rem);
    scrollbar-width: none; cursor: grab;
  }
  @media (min-width: 1024px) { .ku-rev-track { gap: 2rem; } }
  .ku-rev-track::-webkit-scrollbar { display: none; }
  .ku-rev-track.is-drag { cursor: grabbing; scroll-behavior: auto; }
  .ku-rev-track.is-drag * { pointer-events: none; }
  .ku-rev-card { flex: 0 0 clamp(300px, 80vw, 360px); scroll-snap-align: start; }
  .ku-rev-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px;
    background: #FFFFFF; color: #0E5978; border: 1px solid rgba(18,110,151,0.16);
    box-shadow: 0 14px 30px -18px rgba(15,39,51,0.30);
    transition: background-color .2s var(--ease-out), transform .15s var(--ease-out), opacity .2s var(--ease-out); }
  .ku-rev-btn:hover { background: #EDF5F9; transform: translateY(-1px); }
  .ku-rev-btn:disabled { opacity: 0.35; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .ku-rev-track { scroll-behavior: auto; } }

  /* Scroll-Cue entfernt (Chris 2026-07-07) — Hero-Content vertikal zentriert. */

    /* ===== Editorial-Heading-Akzent (Merge 2026-07-07) — ein Wort je Heading in Playfair Italic ===== */
    /* Verlauf-Akzent (Chris 2026-07-07): Steel-Verlauf via background-clip:text.
       color = Solid-Fallback falls background-clip:text nicht greift (nie unsichtbar). */
    .ku-hl { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #126E97;
      padding: 0 0.14em; margin: 0 -0.08em 0 -0.14em;   /* Verlaufs-Box umschließt den Italic-Überhang (g/f) — kein Links-Clip */
      background: linear-gradient(100deg, #0E5978 0%, #2E82A8 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .ku-hl-light { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #BBD9EA;
      padding: 0 0.14em; margin: 0 -0.08em 0 -0.14em;   /* Verlaufs-Box umschließt den Italic-Überhang (g/f) — kein Links-Clip */
      background: linear-gradient(100deg, #8FBFD6 0%, #DCEBF3 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    /* Sub-Heading-Schrift = Plus Jakarta Sans (Chris-Wahl A, 2026-07-07). Playfair bleibt in großen
       Section-Headings, Pull-Quotes, Footer-Dreiklang, Stats; das Akzentwort (.ku-hl) bleibt Playfair-Italic. */
    .ku-service h3.ku-display,
    #ku-ablauf h3.ku-display,
    #ku-faq summary .ku-display,
    #ku-kosten dt.ku-display {
      font-family: 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', sans-serif;
      font-weight: 600;
      letter-spacing: 0;
    }
    /* Leistungen-Card-Akzentwort OHNE Serife (Chris 2026-07-07): kein Playfair/Italic, Steel-Verlauf bleibt. */
    .ku-service h3 .ku-hl { font-family: 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', sans-serif; font-style: normal; }

    /* Sekundär-Button „Tonal-Soft-Fill" (Chris-Wahl A, 2026-07-07) — präsenter als die alten Text-Links,
       bleibt klar sekundär zum Primär-CTA. */
    .ku-btn2 { display:inline-flex; align-self:flex-start; width:max-content; max-width:100%; align-items:center;
      gap:0.6rem; border-radius:9999px; font-weight:600;
      background:#EDF5F9; color:#0E5978; border:1px solid rgba(18,110,151,0.16);
      padding:0.6rem 0.7rem 0.6rem 1.25rem; min-height:48px; }
    .ku-btn2 .ku-btn2-chip { display:grid; place-items:center; width:32px; height:32px; border-radius:9999px;
      background:rgba(18,110,151,0.12); color:#126E97; flex:none; }
    .ku-btn2-ink { background:rgba(255,255,255,0.10); color:#DCEBF3; border-color:rgba(255,255,255,0.16); }
    .ku-btn2-ink .ku-btn2-chip { background:rgba(255,255,255,0.14); color:#DCEBF3; }
    @media (prefers-reduced-motion: no-preference) {
      .ku-btn2 { transition: background-color .2s var(--ease-out), transform .15s var(--ease-out), border-color .2s var(--ease-out); }
      .ku-btn2:hover { background:#DCEBF3; transform:translateY(-2px); }
      .ku-btn2-ink:hover { background:rgba(255,255,255,0.17); }
      .ku-btn2 .ku-btn2-chip svg { transition: transform .22s var(--ease-out); }
      .ku-btn2:hover .ku-btn2-chip svg { transform: translateX(2px); }
    }

    /* RL-Reveal-Linie (Rhenus-Motiv, Steel-adaptiert) — MUSTER an EINEM Heading (Chris 2026-07-07).
       Linie wächst links vom Heading bei Scroll-in-View (.rl-in via IntersectionObserver). */
    .ku-rl { position: relative; }
    .ku-rl::before {
      content: ''; position: absolute; top: 0.52em; right: calc(100% + 16px);
      width: 0; height: 10px; border-radius: 2px; pointer-events: none;
      background: linear-gradient(to left, #126E97 55%, rgba(18,110,151,0));
      transition: width 0.6s var(--ease-out);
    }
    .ku-on-ink .ku-rl::before { background: linear-gradient(to left, #8FBFD6 55%, rgba(143,191,214,0)); }
    .ku-rl.rl-in::before { width: clamp(2.5rem, 7vw, 7rem); }
    @media (prefers-reduced-motion: reduce) {
      .ku-rl::before { transition: none; }
      .ku-rl.rl-in::before { width: clamp(2rem, 5vw, 4rem); }
    }

    /* Descender-Clip-Fix 2026-07-07: data-reveal-Compositing (GPU) kappte die Italic-Tinte an der
       Block-Box. Echtes padding-bottom lässt die Box die Unterlänge einschließen — KEIN negativer
       Margin (der zöge die GPU-Wrapper-Box wieder zusammen und clippte weiter). */
    h2.ku-display, .ku-service h3.ku-display { padding: 0.04em 0.14em 0.34em; }


/* ============================================================
   CI-Ergänzung (2026-07-08) — konsistente Heading-Skala + Karten-Mesh für Folgeseiten.
   (Die Startseite nutzt weiter ihre Inline-Größen; diese Klassen vereinheitlichen den Fan-out.)
   ============================================================ */
.ku-h1    { font-size: clamp(2.6rem, 6vw, 4.75rem);  line-height: 1.08; letter-spacing: 0; }
.ku-h2    { font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1.14; letter-spacing: 0; }
.ku-h2-xl { font-size: clamp(2.6rem, 5.6vw, 4.9rem); line-height: 1.10; letter-spacing: 0; }
.ku-h3    { font-size: 1.375rem; line-height: 1.25; letter-spacing: 0; }
/* Karten-Mesh (dezenter Steel-Verlauf, angelehnt an die Leistungs-Cards der Startseite) */
.ku-mesh-card { background-color: #FFFFFF; background-image:
  radial-gradient(72% 60% at 3% 100%, rgba(18,110,151,0.10), rgba(18,110,151,0) 60%),
  radial-gradient(60% 55% at 100% 0%, rgba(76,151,188,0.08), rgba(76,151,188,0) 62%); }


/* ---- Ink-Section-Hintergrund mit gebackenem Steel-Glow (robust, kein Tailwind-Arbitrary-Value nötig).
   Ersetzt die fragilen Overlay-Divs; auf dunkle Sektionen zusätzlich zu bg-ink-900 legen. ---- */
.ku-tone-ink { background-color: #0F2733; background-image:
  radial-gradient(55% 62% at 76% 26%, rgba(76,151,188,0.22), rgba(76,151,188,0) 62%),
  radial-gradient(52% 58% at 14% 88%, rgba(18,110,151,0.20), rgba(18,110,151,0) 66%); }
.ku-tone-ink-center { background-color: #0F2733; background-image:
  radial-gradient(60% 85% at 50% 34%, rgba(76,151,188,0.24), rgba(76,151,188,0) 60%),
  radial-gradient(46% 55% at 82% 78%, rgba(18,110,151,0.18), rgba(18,110,151,0) 66%); }
.ku-tone-ink-deep { background-color: #0A1B24; background-image:
  radial-gradient(60% 70% at 50% 16%, rgba(76,151,188,0.16), rgba(76,151,188,0) 60%),
  radial-gradient(50% 55% at 86% 90%, rgba(18,110,151,0.15), rgba(18,110,151,0) 66%); }