/*
Theme Name:  Claude Theme
Author:      Claude
Version:     7.0
Description: One-Pager für ONO Media – ruhige flache Flächen, Glas nur über Fotos, Beige als einzige Akzentfarbe, Karate-Welt mit Rot.
License:     GNU General Public License v2 or later
Text Domain: claude-theme
*/

/*
 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 ░  Hallo, Quellcode-Entdecker! 👁                   ░
 ░  Versuch mal den Konami-Code auf der Seite:       ░
 ░  ↑ ↑ ↓ ↓ ← → ← → B A                              ░
 ░  Oder klick 7× aufs Logo. Ich sag's nur.          ░
 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/

/* ==========================================================================
   Gestaltungsregeln (gelten für jede Änderung an dieser Datei)
   • Schrift: höchstens 65 Zeichen pro Textzeile, zwei Familien
     (Space Grotesk + Space Mono), Betonung fett — nie kursiv,
     Unterstreichung nur für Links.
   • Farbe: eine Hintergrund-Familie, eine Schriftfarbe, höchstens ein
     Akzent (Hauptseite: Beige, Karate: Rot). Kontrast mind. WCAG AA.
     Zustände nie nur über Farbe.
   • Bewegung: nur transform + opacity, alles unter 300 ms, ease-out beim
     Erscheinen. Häufige Aktionen (Hover) ohne Animation.
     „Bewegung reduzieren" wird respektiert.
     Einzige bewusste Ausnahme: das Filmstreifen-Band (Wunsch der Inhaberin).
   • Layout: ein Blickfang pro Bildschirm, Abstände im 4-px-Raster.
   • Bedienung: Druck-Feedback (scale 0.97), Klickflächen mind. 44 px,
     sichtbarer Tastatur-Fokus.
   • Glas (Milchglas) nur dort, wo ein echtes Foto dahinter liegt.
   ========================================================================== */

:root {
    /* ── Palette Hauptseite ── */
    --p-prussian:  #05284C;   /* Bühne */
    --p-cornsilk:  #FEFAE0;   /* Schrift + einziger Akzent (14:1 auf Prussian) */

    /* ── Palette Karate ── */
    --k-deep:    #003049;     /* Bühne */
    --k-papaya:  #FDF0D5;     /* Schrift (12:1) */
    --k-flag:    #C1121F;     /* einziger Akzent: Buttons, Punkte — nie Text */

    /* ── Farbkanäle für rgba(var(--rgb-x), a). Die Karate-Welt schaltet sie um. ── */
    --rgb-a:    254, 250, 224;   /* Akzent */
    --rgb-k:    193, 18, 31;     /* Karate-Rot */
    --rgb-bg:   5, 40, 76;       /* Bühne */
    --rgb-ink:  2, 20, 38;       /* tiefste Tönung der Bühne: Abdunkeln über Fotos */
    --rgb-text: 254, 250, 224;   /* Schrift */

    /* ── Rollen ── */
    --c-bg:          var(--p-prussian);
    --c-surface:     #0C375E;   /* Fläche: eine Stufe heller als die Bühne */
    --c-surface-2:   #041F3B;   /* Bildplatzhalter: eine Stufe dunkler */
    --c-text:        var(--p-cornsilk);
    --c-text-muted:  #B3BBB4;   /* = Schrift zu 70 % auf der Bühne · 7.5:1 (auf Fläche 6.2:1) */
    --c-accent:      var(--p-cornsilk);
    --c-fill:        var(--p-cornsilk);   /* Button-Fläche */
    --c-fill-hover:  #FFFDF0;
    --c-on-fill:     var(--c-bg);         /* Button-Schrift */

    /* ── Typografie: zwei Familien ── */
    --font-head:  'Space Grotesk', system-ui, sans-serif;
    --font-body:  'Space Grotesk', system-ui, sans-serif;
    --font-mono:  'Space Mono', ui-monospace, monospace;
    --measure:    65ch;

    /* ── 4-px-Raster ── */
    --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;   --s-6: 24px;   --s-8: 32px;  --s-10: 40px;
    --s-12: 48px;  --s-16: 64px;  --s-20: 80px; --s-24: 96px;
    --s-32: 128px;
    --gutter:      20px;
    --section-pad: 80px;
    --max-w:       1200px;
    --nav-h:       72px;
    --tap:         44px;

    /* ── Form ── */
    --radius:     24px;
    --radius-lg:  32px;
    --radius-sm:  12px;
    --pill:       999px;

    /* ── Bewegung ── */
    --dur:      200ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Glas: nur über Fotos ── */
    --blur: blur(24px) saturate(1.3);

    /* ── Ebenen ── */
    --z-header:  100;
    --z-overlay: 900;
    --z-toast:   1000;
}

@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 900px)  { :root { --section-pad: 128px; } }
@media (min-width: 1080px) { :root { --gutter: 48px; } }

/* ── Karate-Welt: ganze Karate-Seite (inkl. Header, Popup, Footer) + Teaser ── */
body.page-karate,
.karate-page,
.kt {
    --rgb-a:    193, 18, 31;
    --rgb-bg:   0, 48, 73;
    --rgb-ink:  0, 22, 36;
    --rgb-text: 253, 240, 213;

    --c-bg:          var(--k-deep);
    --c-surface:     #0E3F59;
    --c-surface-2:   #002437;
    --c-text:        var(--k-papaya);
    --c-text-muted:  #B1B6AB;   /* = Schrift zu 70 % auf der Bühne · 6.7:1 (auf Fläche 5.4:1) */
    --c-accent:      var(--k-flag);
    --c-fill:        var(--k-flag);
    --c-fill-hover:  #A4101B;   /* dunkler statt heller: Schrift bleibt über 4.5:1 */
    --c-on-fill:     var(--k-papaya);
}

/* Abgeleitete Tokens: in beiden Welten deklariert, damit sie mitwechseln */
:root,
body.page-karate,
.karate-page,
.kt {
    --line:        rgba(var(--rgb-text), 0.14);
    --line-strong: rgba(var(--rgb-text), 0.32);
    --tint:        rgba(var(--rgb-text), 0.05);   /* Hover-/Auswahl-Fläche */
    --glass:       rgba(var(--rgb-text), 0.06);
}

/* ==========================================================================
   Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fotos ragen bewusst über den Rand — abgeschnitten wird am <main>, nicht
   am body (dessen overflow wandert zum Fenster, Handys zoomen sonst heraus).
   „clip" statt „hidden", damit das mitlaufende Anfrage-Formular (sticky) bleibt. */
.site-main { overflow-x: clip; }
@supports not (overflow: clip) {
    .site-main { overflow-x: hidden; }
}

img    { display: block; max-width: 100%; height: auto; }
input, select, textarea { font: inherit; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Betonung = fett, nie kursiv (auch Browser-Standard von <em>, <i>, <cite>) */
em, i, cite, dfn, var, address { font-style: normal; }
em, i { font-weight: 600; }
strong, b { font-weight: 600; }

/* Fließtext-Links im Text: unterstrichen (Unterstreichung = Link, sonst nie) */
p a,
.faq-answer a,
.ws-content a,
.impressum-content a {
    color: var(--c-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--line-strong);
}
p a:hover,
.faq-answer a:hover,
.ws-content a:hover,
.impressum-content a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Typografie
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--c-text);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
}
h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.3; }

/* Fließtext: max. 65 Zeichen pro Zeile */
p { max-width: var(--measure); text-wrap: pretty; }

/* Einziges Mono-Etikett (Kategorie über Unterseiten-Titeln) — Information, kein Deko-Chip */
.label {
    display: block;
    margin-bottom: var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* Horizont: eine feine Haarlinie */
.horizon {
    width: 48px;
    height: 1px;
    background: var(--line-strong);
    margin: var(--s-6) 0;
}

/* Zahlen, die sich ändern können, in fester Breite */
.hero-tc,
[data-local-time],
.k-event-date,
.pricing-price,
.about-credentials dd,
.roadmap-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-pad); }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

/* Einheitlicher Abschnitts-Kopf */
.pricing-intro,
.prozess-intro,
.testimonials-intro { max-width: 56ch; margin-bottom: var(--s-12); }
.pricing-intro h2,
.prozess-intro h2 { margin-bottom: var(--s-4); }
.pricing-intro p,
.prozess-intro p { color: var(--c-text-muted); font-size: 1.125rem; }

/* Flache Fläche — der Standard für jedes Panel (Rand ODER Schatten: hier nur Rand) */
.about-text,
.pricing-grid,
.roadmap,
.cta-banner-inner,
.testimonial-card,
.kt-inner,
.faq-list,
.contact-form,
.milchglas,
.hero-inner,
.k-hero-grid,
.k-usp-inner,
.k-events,
.k-cta-inner,
.easter-egg-inner,
.booking-popup-box,
.empty-state {
    background: var(--c-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* Glas — NUR wenn ein echtes Foto dahinter liegt */
#hero.has-backdrop .hero-inner,
.cta-banner.has-bg .cta-banner-inner,
#prozess.has-bg .roadmap,
.kt.has-backdrop .kt-inner,
.k-hero.has-backdrop .k-hero-grid {
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

/* Hinweise, die nur eingeloggte Admins sehen */
.admin-hint {
    max-width: var(--measure);
    margin-bottom: var(--s-6);
    padding: var(--s-3) var(--s-4);
    font-size: 0.875rem;
    color: var(--c-text-muted);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
}
.admin-hint strong { color: var(--c-text); }

/* Leerzustand: ehrlich statt Platzhalter */
.empty-state {
    max-width: 640px;
    padding: var(--s-8);
}
.empty-state p { color: var(--c-text-muted); }
.empty-state p + p { margin-top: var(--s-2); }
.empty-state p strong { color: var(--c-text); }
.empty-state .admin-hint { margin: var(--s-4) 0 0; }
.faq-admin-hint { margin: var(--s-4) var(--s-8); }

/* ==========================================================================
   Buttons — flache Pillen. Hover ohne Animation, Druck = scale(0.97)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 var(--s-6);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--pill);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(0.97); }

.btn-primary { background: var(--c-fill); color: var(--c-on-fill); }
.btn-primary:hover { background: var(--c-fill-hover); }

.btn-outline {
    background: transparent;
    color: var(--c-text);
    border-color: var(--line-strong);
}
.btn-outline:hover { background: var(--tint); border-color: var(--c-text); }

/* Gesperrt + Lädt */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn.is-loading { opacity: 0.72; cursor: progress; }

/* ==========================================================================
   Header — keine Leiste: Navigation + schwebendes Logo
   ========================================================================== */

#site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-header);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: transform var(--dur) var(--ease-out);
}
#site-header.header-hidden { transform: translateY(-100%); }

#site-header .container.header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-6);
    max-width: 1320px;
}
.nav-fallback-wrap { display: contents; }
/* Alle in EINE Zeile — sonst schiebt die Auto-Platzierung das Logo in Zeile 2 */
.header-nav--left,
.header-nav--right,
.header-nav--full,
.site-branding,
.nav-toggle        { grid-row: 1; }
.header-nav--left  { grid-column: 1; justify-self: end; }
.site-branding     { grid-column: 2; justify-self: center; }
.header-nav--right { grid-column: 3; justify-self: start; }
.header-nav--full  { grid-column: 3; justify-self: end; }

@media (min-width: 901px) {
    /* Gescrollt: nur das Logo schwebt. Hover oder Tastatur-Fokus holt die
       Navigation zurück — sofort, ohne Animation (häufige Aktion). */
    #site-header.scrolled .header-nav--full,
    #site-header.scrolled .nav-fallback { opacity: 0; pointer-events: none; }
    #site-header.scrolled:hover .header-nav--full,
    #site-header.scrolled:focus-within .header-nav--full,
    #site-header.scrolled:hover .nav-fallback,
    #site-header.scrolled:focus-within .nav-fallback { opacity: 1; pointer-events: auto; }
    #site-header.scrolled:hover::before,
    #site-header.scrolled:focus-within::before { opacity: 1; }
    /* Fläche hinter der zurückgeholten Navigation — Text bleibt lesbar */
    #site-header::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--c-bg);
        border-bottom: 1px solid var(--line);
        opacity: 0;
    }
}

.site-branding a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-text);
}
#site-header.scrolled .site-branding { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); }
.site-wordmark { white-space: nowrap; }
.site-logo { display: block; width: auto; object-fit: contain; }
.site-logo--alt { display: none; }

.nav-fallback,
#primary-menu { display: flex; gap: var(--s-8); align-items: center; }
.nav-fallback a,
#primary-menu li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-text-muted);
}
/* Unterstreichung beim Hover — es ist ein Link, also erlaubt; ohne Animation */
.nav-fallback a::after,
#primary-menu li a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
}
.nav-fallback a:hover,
#primary-menu li a:hover,
#primary-menu li.current-menu-item a { color: var(--c-text); }
.nav-fallback a:hover::after,
#primary-menu li a:hover::after,
#primary-menu li.current-menu-item a::after { transform: scaleX(1); }
.nav-karate { color: var(--c-text) !important; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: var(--tap);
    height: var(--tap);
    background: none;
    border: none;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav-toggle:active span { transform: scale(0.97); }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Foto-Hintergrund — das Foto groß und unscharf hinter dem Glas
   (Hero, Karate-Hero, Karate-Teaser, CTA-Banner, Ablauf)
   ========================================================================== */

.has-backdrop,
.has-bg { isolation: isolate; }
.photo-backdrop {
    position: absolute;
    inset: 0 -6%;
    z-index: -1;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.1) brightness(0.6);
    /* Maske: das Foto läuft in die flache Bühne aus, statt hart abzubrechen */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.kt .photo-backdrop,
.photo-backdrop--soft,
.photo-backdrop--faint {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.photo-backdrop--soft  { filter: blur(24px) saturate(1.1) brightness(0.55); }
.photo-backdrop--faint { filter: blur(40px) saturate(1.1) brightness(0.6); opacity: 0.4; }

/* ==========================================================================
   Hero
   ========================================================================== */

#hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.hero-inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s-4);
    margin: calc(var(--nav-h) + var(--s-4)) var(--s-12) var(--s-8);
    padding: var(--s-4);
    border-radius: calc(var(--radius-lg) + 4px);
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--s-12) var(--s-12);
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}
.hero-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    flex-shrink: 0;
}
.hero-eyebrow span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.hero-title {
    font-size: clamp(2.75rem, min(5.4vw, 8.2vh), 4.75rem);
    max-width: 15ch;
    margin-bottom: var(--s-4);
}
.hero-title em { font-weight: 500; color: var(--c-text-muted); }
.hero-title.is-signal { background: var(--c-fill); color: var(--c-on-fill); }

.hero-hand {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: var(--s-4);
}

.hero-horizon {
    width: 48px;
    height: 1px;
    background: var(--line-strong);
    margin-bottom: var(--s-6);
}

.hero-sub {
    font-size: 1.125rem;
    color: var(--c-text-muted);
    max-width: 44ch;
    margin-bottom: var(--s-8);
}

.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Status-Zeile: Verfügbarkeit + Ort mit Live-Uhrzeit — Zustand steht als Text da */
.hero-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-6);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.hero-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
}

/* Foto im Panel */
.hero-visual { position: relative; min-width: 0; }
.hero-photo {
    position: relative;
    height: 100%;
    min-height: 360px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-surface-2);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-inner { position: absolute; inset: 0; background: var(--c-surface-2); }

/* Kamera-HUD: REC + Timecode — eigene dunkle Chips, darum kein Verlauf nötig */
.hero-rec,
.hero-tc {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(var(--rgb-ink), 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--pill);
}
.hero-rec { top: var(--s-4); left: var(--s-4); font-weight: 700; }
.hero-tc  { bottom: var(--s-4); right: var(--s-4); }
.rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    flex-shrink: 0;
}

/* Easter Egg: Auslöser-Blitz (Doppelklick) — beantwortet „was ist passiert?": ein Foto */
.hero-photo.shutter::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #fff;
    pointer-events: none;
    animation: shutterFlash 200ms var(--ease-out) forwards;
}
@keyframes shutterFlash {
    0%   { opacity: 0.8; }
    100% { opacity: 0; }
}

/* Sucher-Rahmen: vier Ecken um den ersten Screen (statische Linien) */
.hero-vf {
    position: absolute;
    inset: calc(var(--nav-h) - 8px) var(--s-4) var(--s-4);
    z-index: 1;
    pointer-events: none;
    --vfc: rgba(var(--rgb-text), 0.3);
    background:
        linear-gradient(var(--vfc), var(--vfc)) left top     / 24px 1px,
        linear-gradient(var(--vfc), var(--vfc)) left top     / 1px 24px,
        linear-gradient(var(--vfc), var(--vfc)) right top    / 24px 1px,
        linear-gradient(var(--vfc), var(--vfc)) right top    / 1px 24px,
        linear-gradient(var(--vfc), var(--vfc)) left bottom  / 24px 1px,
        linear-gradient(var(--vfc), var(--vfc)) left bottom  / 1px 24px,
        linear-gradient(var(--vfc), var(--vfc)) right bottom / 24px 1px,
        linear-gradient(var(--vfc), var(--vfc)) right bottom / 1px 24px;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Über mich
   ========================================================================== */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-12);
    align-items: center;
}
.about-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--c-surface-2);
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-image-placeholder { width: 100%; height: 100%; background: var(--c-surface-2); }

.about-text { padding: var(--s-12); }
.about-text h2 { margin-bottom: var(--s-6); }
.about-text p { color: var(--c-text-muted); margin-bottom: var(--s-4); }
.about-text p:last-of-type { margin-bottom: var(--s-8); }

/* Fakten als ruhige Liste — keine Riesen-Zahlen (kein Kennzahlen-Template) */
.about-credentials {
    display: grid;
    margin-top: var(--s-8);
    border-top: 1px solid var(--line);
}
.about-credential-item {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
}
.about-credentials dd {
    order: -1;
    min-width: 5ch;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
}
.about-credentials dt {
    font-size: 1rem;
    color: var(--c-text-muted);
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Filmstreifen — läuft langsam durch (bewusste Ausnahme von der 300-ms-Regel)
   ========================================================================== */

.filmstrip {
    position: relative;
    overflow: hidden;
    padding-block: var(--s-6);
}
.filmstrip-track {
    display: flex;
    width: max-content;
    animation: filmscroll 80s linear infinite;
    will-change: transform;
}
.filmstrip:hover .filmstrip-track { animation-play-state: paused; }
.filmstrip-cell {
    flex: 0 0 auto;
    width: clamp(200px, 21vw, 300px);
    aspect-ratio: 4 / 5;
    margin: 0 var(--s-3) 0 0;   /* Abstand per margin → nahtloser Loop bei -50 % */
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-surface-2);
}
.filmstrip-cell img { width: 100%; height: 100%; object-fit: cover; }
@keyframes filmscroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Pakete — EIN Panel, drei Spalten, getrennt von Haarlinien
   ========================================================================== */

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-10);
    font-size: 1rem;
    color: var(--c-text-muted);
}
.availability-badge strong { color: var(--c-text); }
.avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    flex-shrink: 0;
}

/* Segment-Schalter Sport / Event — aktiv = gefüllt + fett (nicht nur Farbe) */
.pricing-tabs-nav {
    display: flex;
    gap: var(--s-1);
    width: fit-content;
    margin: 0 auto var(--s-8);
    padding: var(--s-1);
    border: 1px solid var(--line);
    border-radius: var(--pill);
}
.ptab {
    min-height: var(--tap);
    padding: 0 var(--s-6);
    border: none;
    border-radius: var(--pill);
    background: transparent;
    color: var(--c-text-muted);
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
}
.ptab:not(.active):hover { color: var(--c-text); background: var(--tint); }
.ptab:active { transform: scale(0.97); }
.ptab.active { background: var(--c-fill); color: var(--c-on-fill); font-weight: 600; }

.pricing-panel { display: none; }
.pricing-panel.active { display: block; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}
/* Subgrid: Name, Preis, Notiz, Liste und Button stehen in allen drei Spalten
   auf derselben Linie — egal wie lang die Notiz ist */
.pricing-card {
    position: relative;
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    min-width: 0;
    padding: var(--s-10);
    color: inherit;
    border-left: 1px solid var(--line);
}
.pricing-card:first-child { border-left: 0; }
.pricing-card:hover { background: var(--tint); }
.pricing-card.featured { background: rgba(var(--rgb-text), 0.07); }

.pricing-badge {
    position: absolute;
    top: var(--s-6);
    right: var(--s-6);
    padding: var(--s-1) var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-on-fill);
    background: var(--c-fill);
    border-radius: var(--pill);
}
.pricing-name {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--c-text);
    margin-bottom: var(--s-8);
    padding-right: var(--s-24);
    overflow-wrap: break-word;
}
.pricing-price {
    font-family: var(--font-head);
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--c-text);
    margin-bottom: var(--s-3);
}
.pricing-note { font-size: 0.875rem; color: var(--c-text-muted); margin-bottom: var(--s-8); }
.pricing-features {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-size: 0.9375rem;
    color: var(--c-text-muted);
}
/* Häkchen als Aufzählungszeichen — folgt der Akzentfarbe */
.pricing-features li::before,
.pd-included li::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-top: var(--s-1);
    flex-shrink: 0;
    background: var(--c-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5' stroke-width='1.3'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5' stroke-width='1.3'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Karten-Button: nur optisch (die ganze Karte ist der Link) */
.pricing-cta { width: 100%; align-self: end; }
.pricing-card:hover .btn-outline { background: var(--c-fill); color: var(--c-on-fill); border-color: transparent; }
.pricing-card:active { transform: scale(0.99); }

.pricing-contact-hint {
    max-width: none;
    padding-top: var(--s-8);
    text-align: center;
    font-size: 1rem;
    color: var(--c-text-muted);
}
.pricing-contact-hint strong { color: var(--c-text); }

/* ==========================================================================
   Ablauf — vier echte Schritte als nummerierte Zeilen (keine Icon-Karten)
   ========================================================================== */

.roadmap { overflow: hidden; }
.roadmap-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--s-6);
    align-items: baseline;
    padding: var(--s-6) var(--s-8);
    border-top: 1px solid var(--line);
}
.roadmap-step:first-child { border-top: 0; }
.roadmap-num {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}
.roadmap-title { font-size: 1.25rem; }
.roadmap-text { color: var(--c-text-muted); }

.prozess-cta { margin-top: var(--s-12); text-align: center; }

/* ==========================================================================
   CTA-Banner — eine Fläche; mit Foto dahinter wird sie zu Glas
   ========================================================================== */

.cta-banner { position: relative; padding-block: var(--s-24); }
.cta-banner-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--s-16) var(--s-12);
    text-align: center;
}
.cta-banner-head { font-size: clamp(2rem, 4.4vw, 3.25rem); margin-bottom: var(--s-4); }
.cta-banner-text {
    max-width: 48ch;
    margin: 0 auto var(--s-8);
    font-size: 1.125rem;
    color: var(--c-text-muted);
}
.cta-banner-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Stimmen — Karussell (kein automatisches Weiterblättern)
   ========================================================================== */

@media (min-width: 761px) {
    .testimonials-intro { margin-left: auto; text-align: right; }
    .testimonials-intro .horizon,
    .testimonials-intro p { margin-left: auto; }
}
.testimonials-intro h2 { margin-bottom: 0; }
.testimonials-intro .horizon { margin-block: var(--s-6); }
.testimonials-sub { color: var(--c-text-muted); font-size: 1.125rem; }

.testimonials-carousel-wrap { overflow: hidden; }
/* „Woher kommt die nächste Karte?" — kurze Verschiebung beantwortet die Richtung */
.carousel-track {
    display: flex;
    transition: transform 240ms var(--ease-out);
}
.carousel-track.no-anim { transition: none; }
.carousel-slide { flex: 0 0 100%; min-width: 0; padding: 0 var(--s-1); }
.testimonial-card {
    height: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: var(--s-12);
}
.testimonial-text {
    max-width: 48ch;
    font-family: var(--font-head);
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--c-text);
    margin-bottom: var(--s-8);
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
    min-width: 0;
}
.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-fill);
    color: var(--c-on-fill);
    font-size: 0.875rem;
    font-weight: 600;
}
.testimonial-meta { min-width: 0; }
.testimonial-meta strong,
.testimonial-meta span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.testimonial-meta strong { font-size: 1rem; color: var(--c-text); }
.testimonial-meta span { font-size: 0.875rem; color: var(--c-text-muted); }

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    margin-top: var(--s-6);
}
.carousel-controls[hidden] { display: none; }
.carousel-btn {
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--c-text);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    user-select: none;
}
.carousel-btn:hover { background: var(--tint); border-color: var(--c-text); }
.carousel-btn:active { transform: scale(0.97); }
.carousel-dots { display: flex; align-items: center; }
/* Punkt = 44-px-Klickfläche; sichtbar ist nur der Punkt. Aktiv = breiter (Form, nicht nur Farbe) */
.carousel-dot {
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: var(--pill);
}
.carousel-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--pill);
    background: var(--line-strong);
}
.carousel-dot:hover::before { background: var(--c-text-muted); }
.carousel-dot[aria-current="true"]::before { width: 24px; background: var(--c-text); }

/* ==========================================================================
   Portfolio
   ========================================================================== */

.portfolio-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-8);
    margin-bottom: var(--s-12);
}
.portfolio-header h2 { margin-bottom: var(--s-3); }
.portfolio-header p { color: var(--c-text-muted); max-width: 46ch; }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 300px;
    gap: var(--s-3);
}
.portfolio-item {
    position: relative;
    display: block;
    overflow: hidden;
    color: inherit;
    border-radius: var(--radius);
    background: var(--c-surface-2);
}
.portfolio-item:active { transform: scale(0.99); }
.portfolio-item:nth-child(5n+1) { grid-column: span 7; }
.portfolio-item:nth-child(5n+2) { grid-column: span 5; }
.portfolio-item:nth-child(5n+3),
.portfolio-item:nth-child(5n+4),
.portfolio-item:nth-child(5n+5) { grid-column: span 4; }
/* Letzte Kachel füllt ihre Reihe auf — keine Lücke bei wenigen Arbeiten */
.portfolio-item:nth-child(5n+1):last-child { grid-column: span 12; }
.portfolio-item:nth-child(5n+3):last-child { grid-column: span 12; }
.portfolio-item:nth-child(5n+4):last-child { grid-column: span 8; }

.portfolio-item .portfolio-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-item-inner { width: 100%; height: 100%; background: var(--c-surface-2); }

/* Bildunterschrift: immer sichtbar (auch am Handy), kleiner dunkler Chip */
.portfolio-caption {
    position: absolute;
    left: var(--s-3);
    bottom: var(--s-3);
    max-width: calc(100% - var(--s-6));
    padding: var(--s-3) var(--s-10) var(--s-3) var(--s-4);
    border-radius: var(--radius-sm);
    background: rgba(var(--rgb-ink), 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.portfolio-caption h3,
.portfolio-caption span:not(.caption-arrow) {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portfolio-caption h3 { font-size: 1rem; color: #fff; }
.portfolio-caption span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); }
.portfolio-caption .caption-arrow {
    position: absolute;
    right: var(--s-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: #fff;
}
.portfolio-item:hover .caption-arrow { transform: translate(4px, -50%); }

/* ==========================================================================
   Karate-Teaser — Wechsel in die zweite Welt (eigene Bühne, Rot als Akzent)
   ========================================================================== */

.kt {
    position: relative;
    padding-block: var(--s-24);
    color: var(--c-text);
    background: var(--c-bg);   /* flache Karate-Bühne statt Farbwolke */
}
.kt-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--s-12);
    padding: var(--s-4) var(--s-4) var(--s-4) var(--s-12);
    color: inherit;
}
.kt-inner:hover { border-color: var(--line-strong); }
.kt-inner:hover .kt-cta { background: var(--c-fill-hover); }
.kt-inner:hover .kt-cta svg { transform: translateX(4px); }
.kt-inner:active .kt-cta { transform: scale(0.97); }
.kt-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.kt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.kt-head { font-size: clamp(2.25rem, 4.4vw, 3.5rem); margin-bottom: var(--s-4); max-width: 14ch; }
.kt-text { color: var(--c-text-muted); max-width: 44ch; margin-bottom: var(--s-8); font-size: 1.0625rem; }
.kt-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 var(--s-6);
    font-weight: 500;
    font-size: 1rem;
    color: var(--c-on-fill);
    background: var(--c-fill);
    border-radius: var(--pill);
}
.kt-frame {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-surface-2);
}
.kt-frame img { width: 100%; height: 100%; object-fit: cover; }
.kt-frame-empty { position: absolute; inset: 0; background: var(--c-surface-2); }

/* ==========================================================================
   FAQ — eine Liste, Einträge getrennt von Haarlinien
   ========================================================================== */

.faq-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    align-items: end;
    margin-bottom: var(--s-12);
}
.faq-header p { color: var(--c-text-muted); max-width: 42ch; }

.faq-list { max-width: 920px; overflow: hidden; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; }
.faq-item[open] { background: var(--tint); }
.faq-question {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    min-height: 64px;
    padding: var(--s-4) var(--s-8);
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--c-text);
    list-style: none;
    user-select: none;
    cursor: pointer;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { background: var(--tint); }
.faq-question-text { flex: 1; min-width: 0; }
/* Plus wird zu ×: Form zeigt den Zustand, sofort (kein Dreh-Effekt) */
.faq-icon {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
}
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--c-text);
    transform: translate(-50%, -50%);
}
.faq-icon::before { width: 12px; height: 1px; }
.faq-icon::after  { width: 1px; height: 12px; }
.faq-item[open] .faq-icon { transform: rotate(45deg); border-color: var(--c-text); }
/* „Was hat sich geändert?" — die Antwort blendet kurz von oben ein */
.faq-answer {
    padding: 0 var(--s-8) var(--s-6);
    animation: faqIn var(--dur) var(--ease-out) both;
}
@keyframes faqIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.faq-answer p { font-size: 1rem; color: var(--c-text-muted); }
.faq-answer p + p { margin-top: var(--s-3); }
.faq-answer strong { color: var(--c-text); }

/* ==========================================================================
   Kontakt + Formulare
   ========================================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-16);
    align-items: start;
}
.contact-text h2 { margin-bottom: var(--s-6); }
.contact-text p { color: var(--c-text-muted); margin-bottom: var(--s-8); }
.contact-details { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.contact-detail {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.cd-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.contact-detail a,
.contact-detail span:not(.cd-label) { color: var(--c-text); font-size: 1.0625rem; overflow-wrap: anywhere; }
.contact-detail a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.contact-detail a:hover { text-decoration-color: currentColor; }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-10);
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.form-group { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.form-group label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-muted); }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    outline: none;
    appearance: none;
    resize: vertical;
}
.form-group select {
    padding-right: var(--s-10);
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3bbb4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-4) center;
}
.form-group select option { background: var(--c-surface); color: var(--c-text); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--c-text-muted); opacity: 1; }
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover { border-color: var(--c-text-muted); }
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible { border-color: var(--c-text); outline: 2px solid var(--c-text); outline-offset: 2px; }
/* Fehler erst nach Eingabe zeigen — gestrichelter Rand (Form, nicht nur Farbe) */
.form-group input:user-invalid,
.form-group textarea:user-invalid { border-style: dashed; border-color: var(--c-text); }
.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled { opacity: 0.5; cursor: not-allowed; }
.form-group input[type="date"] { color-scheme: dark; }
.form-group textarea { min-height: 128px; }
.form-submit { margin-top: var(--s-2); }
.form-submit .btn,
.pd-form .btn { width: 100%; }

/* Meldungen: Zeichen + Text zeigen den Zustand, nicht die Farbe */
.form-message,
.pd-note {
    max-width: none;
    padding: var(--s-4) var(--s-6);
    margin-bottom: var(--s-6);
    font-size: 0.9375rem;
    color: var(--c-text-muted);
    background: var(--c-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}
.form-message strong,
.pd-note strong { display: block; margin-bottom: var(--s-1); color: var(--c-text); }
.form-message--success strong::before,
.pd-note--ok strong::before { content: '✓ '; }
.form-message--error,
.pd-note--err { border-style: dashed; border-color: var(--c-text); }
.form-message--error strong::before,
.pd-note--err strong::before { content: '! '; }
p.form-message--error::before { content: '! '; font-weight: 600; color: var(--c-text); }

/* Honeypot — für Menschen unsichtbar, auch für Screenreader */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */

#site-footer {
    padding-block: var(--s-8);
    border-top: 1px solid var(--line);
}
#site-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
}
.footer-copy { font-size: 0.875rem; color: var(--c-text-muted); }
.footer-links { display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.footer-links > a,
.footer-links .menu-item a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}
.footer-links > a:hover,
.footer-links .menu-item a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; }
.footer-social { display: flex; gap: var(--s-2); align-items: center; }
.footer-social a {
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--c-text-muted);
}
.footer-social a:hover { color: var(--c-text); border-color: var(--c-text); }
.footer-social a:active { transform: scale(0.97); }

/* ==========================================================================
   Erstgespräch-Popup — „Woher kommt das?" → kurz von unten einblenden
   ========================================================================== */

#booking-popup {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    background: rgba(var(--rgb-ink), 0.8);
}
#booking-popup.open { display: flex; animation: fadeIn var(--dur) var(--ease-out) both; }

.booking-popup-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--s-12) var(--s-10) var(--s-10);
    animation: popupIn var(--dur) var(--ease-out) both;
}
.booking-popup-box.is-calendar { max-width: 760px; }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.popup-close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--c-text);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
}
.popup-close:hover { background: var(--tint); border-color: var(--c-text); }
.popup-close:active { transform: scale(0.97); }
.booking-popup-box h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--s-2); padding-right: var(--s-12); }
.booking-popup-box > p { color: var(--c-text-muted); font-size: 0.9375rem; margin-bottom: var(--s-8); }
.booking-form { display: flex; flex-direction: column; gap: var(--s-4); }

.bc-tabs {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-1);
    margin-bottom: var(--s-6);
    border: 1px solid var(--line);
    border-radius: var(--pill);
}
.bc-tab {
    flex: 1;
    min-height: var(--tap);
    padding: 0 var(--s-4);
    border: 0;
    border-radius: var(--pill);
    background: transparent;
    color: var(--c-text-muted);
    font: 500 0.875rem/1.2 var(--font-head);
}
.bc-tab:hover { color: var(--c-text); background: var(--tint); }
.bc-tab:active { transform: scale(0.97); }
.bc-tab.is-active { background: var(--c-fill); color: var(--c-on-fill); font-weight: 600; }
.bc-consent {
    display: grid;
    gap: var(--s-4);
    justify-items: start;
    padding: var(--s-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.bc-consent p { color: var(--c-text-muted); font-size: 0.9375rem; }
.bc-newtab {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-size: 0.875rem;
    color: var(--c-text-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.bc-newtab:hover { color: var(--c-text); }
.bc-frame {
    width: 100%;
    height: min(680px, 70vh);
    border: 0;
    border-radius: var(--radius-sm);
    background: #fff;
}

/* Erfolgsmeldung nach dem Absenden */
.toast {
    position: fixed;
    top: var(--s-6);
    left: 50%;
    z-index: var(--z-toast);
    max-width: calc(100% - var(--s-8));
    padding: var(--s-3) var(--s-6);
    font-weight: 600;
    color: var(--c-on-fill);
    background: var(--c-fill);
    border-radius: var(--pill);
    transform: translateX(-50%);
    animation: toastIn var(--dur) var(--ease-out) both;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translateX(-50%); }
}

/* ==========================================================================
   Easter Egg — Konami-Overlay
   ========================================================================== */

#easter-egg {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    background: rgba(var(--rgb-ink), 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility 0s var(--dur);
}
#easter-egg.active { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease-out); }
.easter-egg-inner { max-width: 520px; padding: var(--s-12) var(--s-8); text-align: center; }
.ee-glyph { display: block; font-size: 3rem; margin-bottom: var(--s-6); }
.easter-egg-inner h2 { font-size: 1.25rem; margin-bottom: var(--s-4); }
.easter-egg-inner p { margin: 0 auto var(--s-8); color: var(--c-text-muted); font-size: 0.9375rem; }
.ee-morse { display: inline-block; margin-top: var(--s-4); font-family: var(--font-mono); color: var(--c-text); }
.ee-close {
    min-height: var(--tap);
    padding: 0 var(--s-6);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
}
.ee-close:hover { background: var(--tint); }
.ee-close:active { transform: scale(0.97); }

/* ==========================================================================
   Unterseiten — gemeinsame Bausteine
   ========================================================================== */

.pd-back,
.ws-back,
.k-back,
.impressum-back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    margin-bottom: var(--s-6);
    padding: 0 var(--s-4);
    font-size: 0.875rem;
    color: var(--c-text);
    background: rgba(var(--rgb-ink), 0.4);
    border: 1px solid var(--line);
    border-radius: var(--pill);
}
.pd-back:hover,
.ws-back:hover,
.k-back:hover,
.impressum-back:hover { border-color: var(--c-text); }
.pd-back:active,
.ws-back:active,
.k-back:active,
.impressum-back:active { transform: scale(0.97); }

/* Foto-Hero der Unterseiten: Bild randlos. Der Verlauf unten ist kein Deko —
   er hält den Titel auf dem Foto lesbar. */
.pd-hero,
.ws-hero {
    position: relative;
    padding-top: var(--nav-h);
    overflow: hidden;
}
.pd-hero.has-image,
.ws-hero { min-height: 62vh; display: flex; align-items: flex-end; }
.pd-hero-media,
.ws-hero-media { position: absolute; inset: 0; z-index: 0; }
.pd-hero-media img,
.ws-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-hero-empty { background: var(--c-surface-2); }
.pd-hero-grade,
.ws-hero-grade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--c-bg) 0%, rgba(var(--rgb-bg), 0.6) 40%, rgba(var(--rgb-ink), 0.2) 100%);
}
.pd-hero-overlay,
.ws-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--s-16) 0 var(--s-10);
}
.pd-title,
.ws-title { font-size: clamp(2.25rem, 5.5vw, 4.25rem); max-width: 18ch; }
.pd-hero .horizon { margin: var(--s-6) 0 var(--s-4); }
.pd-price {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--c-text);
}

/* Video-Rahmen (Paket + Arbeit) */
.ws-video-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.ws-video-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.ws-video-embed { position: relative; }
.ws-video-embed :is(iframe, video) {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* ==========================================================================
   Paket-Detailseite
   ========================================================================== */

.paket-detail { min-height: 100vh; }
.paket-missing { min-height: 60vh; padding: calc(var(--nav-h) + var(--s-16)) 0 var(--s-20); text-align: center; }
.paket-missing h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); margin: 0 auto var(--s-4); }
.paket-missing p { margin: 0 auto var(--s-8); color: var(--c-text-muted); }

.pd-body { position: relative; padding: var(--s-16) 0 var(--s-24); }
.pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: var(--s-16);
    align-items: start;
}
.pd-mono-label {
    display: block;
    margin-bottom: var(--s-6);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.pd-lead { font-size: 1.125rem; color: var(--c-text); margin-bottom: var(--s-6); }
.pd-lead + .pd-lead { font-size: 1.0625rem; color: var(--c-text-muted); }

.pd-ideal,
.pd-promise {
    max-width: var(--measure);
    padding: var(--s-4) var(--s-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.pd-ideal { display: flex; flex-direction: column; gap: var(--s-1); margin: 0 0 var(--s-8); }
.pd-ideal-k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
.pd-ideal-v { font-size: 1.0625rem; color: var(--c-text); }
.pd-video { margin: 0 0 var(--s-10); }

.pd-included-title { font-size: 1.5rem; margin: var(--s-12) 0 var(--s-4); }
.pd-included { max-width: var(--measure); border-top: 1px solid var(--line); }
.pd-included li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) 0;
    font-size: 1rem;
    color: var(--c-text);
    border-bottom: 1px solid var(--line);
}
.pd-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-10);
}
.pd-gallery-item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); }
.pd-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.pd-promise { margin-top: var(--s-10); font-size: 1rem; color: var(--c-text-muted); }
.pd-promise strong { color: var(--c-text); }

.pd-form-wrap { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
.pd-form-box { padding: var(--s-10); }
.pd-form-tag {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-form-box h2 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); margin-bottom: var(--s-2); }
.pd-form-intro { color: var(--c-text-muted); font-size: 0.9375rem; margin-bottom: var(--s-6); }
.pd-form { display: flex; flex-direction: column; gap: var(--s-4); }
.pd-form-hint { text-align: center; margin: 0 auto; font-size: 0.875rem; color: var(--c-text-muted); }

/* ==========================================================================
   Arbeit-Detailseite (Portfolio-Eintrag)
   ========================================================================== */

.work-single { min-height: 100vh; }
.ws-meta { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-10); margin-top: var(--s-6); }
.ws-meta-item { display: flex; flex-direction: column; gap: var(--s-1); font-size: 1rem; }
.ws-meta-k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }

.ws-body { position: relative; padding: var(--s-16) 0; }
.ws-video { margin-bottom: var(--s-16); }
.ws-content { max-width: 760px; margin: 0 auto; }
.ws-content > p { color: var(--c-text-muted); margin-bottom: var(--s-6); font-size: 1.0625rem; }
.ws-content h2,
.ws-content h3 { margin: var(--s-10) 0 var(--s-4); }
.ws-content :is(.wp-block-image, figure) { margin: var(--s-8) 0; border-radius: var(--radius); overflow: hidden; }
.ws-content :is(.wp-block-image, figure) img { width: 100%; }
.ws-content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-3);
    max-width: none;
    margin: var(--s-10) 0;
}
.ws-content .wp-block-gallery figure { margin: 0; border-radius: var(--radius-sm); }

.ws-cta { padding: 0 0 var(--s-24); }
.ws-cta-inner { max-width: 700px; margin: 0 auto; padding: var(--s-12); text-align: center; }
.ws-cta-inner h2 { margin-bottom: var(--s-3); }
.ws-cta-inner p { margin: 0 auto var(--s-8); color: var(--c-text-muted); }
.ws-cta-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Karate-Seite — gleiche Sprache, Rot als einziger Akzent
   ========================================================================== */

.karate-page { color: var(--c-text); }

.k-hero {
    position: relative;
    padding-top: calc(var(--nav-h) + var(--s-4));
    padding-bottom: var(--s-12);
}
.k-hero .container { max-width: 1320px; }
.k-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: calc(var(--radius-lg) + 4px);
}
.k-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--s-12);
}
.k-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.k-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); flex-shrink: 0; }
.k-title { font-size: clamp(2.5rem, 5.4vw, 4.5rem); margin-bottom: var(--s-4); max-width: 15ch; }
.k-hand { margin-bottom: var(--s-4); font-size: 1.25rem; font-weight: 500; color: var(--c-text); }
.k-horizon { width: 48px; height: 1px; background: var(--line-strong); margin-bottom: var(--s-6); }
.k-sub { max-width: 44ch; margin-bottom: var(--s-8); font-size: 1.125rem; color: var(--c-text-muted); }
.k-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.k-hero-visual { min-width: 0; }
.k-hero-photo {
    position: relative;
    height: 100%;
    min-height: 420px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-surface-2);
}
.k-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.k-hero-empty { position: absolute; inset: 0; background: var(--c-surface-2); }

/* Pionier-Block */
.k-usp { position: relative; padding: var(--s-16) 0; }
.k-usp-inner { max-width: 820px; padding: var(--s-12); }
.k-usp-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: var(--s-6);
    padding: 0 var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-on-fill);
    background: var(--c-fill);
    border-radius: var(--pill);
}
.k-usp-head { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: var(--s-4); }
.k-usp-text { font-size: 1.125rem; color: var(--c-text-muted); margin-bottom: var(--s-8); }
.k-usp-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.k-usp-tags span {
    padding: var(--s-1) var(--s-4);
    font-size: 0.875rem;
    color: var(--c-text);
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
}

/* Was ich mache */
.k-do-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.k-do-text p { color: var(--c-text-muted); margin-bottom: var(--s-6); font-size: 1.0625rem; }
.k-do-list { border-top: 1px solid var(--line); }
.k-do-list li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) 0;
    font-weight: 500;
    color: var(--c-text);
    border-bottom: 1px solid var(--line);
}
.k-do-list li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--c-accent); }

/* Termine: Zeilen in einem Panel */
.k-upcoming-head { max-width: 52ch; margin-bottom: var(--s-10); }
.k-upcoming-head h2 { margin-bottom: var(--s-3); }
.k-upcoming-head p { color: var(--c-text-muted); }
.k-events { overflow: hidden; }
.k-event {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-8);
    border-top: 1px solid var(--line);
}
.k-event:first-child { border-top: 0; }
.k-event-date { font-family: var(--font-mono); font-size: 0.875rem; color: var(--c-text); }
.k-event-title { font-size: 1.125rem; font-weight: 500; color: var(--c-text); min-width: 0; overflow-wrap: break-word; }
.k-event-place {
    padding: var(--s-1) var(--s-3);
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    border: 1px solid var(--line);
    border-radius: var(--pill);
}

/* Galerie */
.k-gallery-head { margin-bottom: var(--s-10); }
.k-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.k-work {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-surface-2);
}
.k-work:active { transform: scale(0.99); }
.k-work img { width: 100%; height: 100%; object-fit: cover; }
.k-work-empty { position: absolute; inset: 0; background: var(--c-surface-2); }
/* Titel immer sichtbar, dunkler Chip statt Verlauf */
.k-work-cap {
    position: absolute;
    left: var(--s-3);
    bottom: var(--s-3);
    max-width: calc(100% - var(--s-6));
    padding: var(--s-2) var(--s-4);
    font-weight: 500;
    font-size: 1rem;
    color: #fff;
    background: rgba(var(--rgb-ink), 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Abschluss */
.k-cta { position: relative; padding: var(--s-20) 0; }
.k-cta-inner { max-width: 700px; margin: 0 auto; padding: var(--s-12); text-align: center; }
.k-cta-inner h2 { margin-bottom: var(--s-3); }
.k-cta-inner p { margin: 0 auto var(--s-8); color: var(--c-text-muted); }
.k-cta-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

.karate-page ::selection { background: rgba(var(--rgb-k), 0.9); color: var(--c-text); }

/* ==========================================================================
   Impressum
   ========================================================================== */

.impressum-page { position: relative; padding-top: var(--nav-h); }
.impressum-hero { padding: var(--s-16) 0 var(--s-8); }
.impressum-hero h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
.impressum-body { padding: 0 0 var(--s-24); }
.impressum-content { max-width: 720px; }
.impressum-content h2 {
    font-size: 1.25rem;
    margin: var(--s-10) 0 var(--s-3);
    padding-top: var(--s-8);
    border-top: 1px solid var(--line);
}
.impressum-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.impressum-content p { color: var(--c-text-muted); margin-bottom: var(--s-4); }
.impressum-placeholder {
    margin-bottom: var(--s-10);
    padding: var(--s-6);
    font-size: 0.9375rem;
    color: var(--c-text-muted);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
}
.impressum-placeholder strong { color: var(--c-text); }

/* ==========================================================================
   404
   ========================================================================== */

.error404-wrap {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-h) + var(--s-16)) var(--s-5) var(--s-20);
    text-align: center;
}
.error404-inner { max-width: 540px; }
.error404-code {
    margin-bottom: var(--s-4);
    font-family: var(--font-mono);
    font-size: clamp(4rem, 14vw, 8rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--c-text);
}
.error404-line { width: 48px; height: 1px; margin: 0 auto var(--s-8); background: var(--line-strong); }
.error404-inner h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--s-4); }
.error404-inner p { margin: 0 auto var(--s-8); color: var(--c-text-muted); }

/* ==========================================================================
   Feinschliff — Auswahl, Fokus, Scrollbar, Skip-Link
   ========================================================================== */

::selection { background: rgba(var(--rgb-text), 0.9); color: var(--c-bg); }

/* Tastatur-Fokus: immer sichtbar, in Schriftfarbe */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--c-text);
    outline-offset: 4px;
    border-radius: 4px;
}
.btn:focus-visible,
.ptab:focus-visible,
.bc-tab:focus-visible,
.carousel-btn:focus-visible,
.carousel-dot:focus-visible,
.popup-close:focus-visible,
.footer-social a:focus-visible { outline-offset: 2px; border-radius: var(--pill); }
.portfolio-item:focus-visible,
.k-work:focus-visible,
.pricing-card:focus-visible,
.kt-inner:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
.faq-question:focus-visible { outline-offset: -4px; border-radius: var(--radius-sm); }

html { scrollbar-color: rgba(var(--rgb-text), 0.25) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--rgb-text), 0.22);
    border: 4px solid transparent;
    border-radius: var(--pill);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--rgb-text), 0.4); background-clip: padding-box; }

.skip-link {
    position: fixed;
    top: var(--s-3);
    left: var(--s-3);
    z-index: var(--z-toast);
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--s-5);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-on-fill);
    background: var(--c-fill);
    border-radius: var(--pill);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--c-text); outline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .hero-inner   { margin-inline: var(--s-6); }
    .hero-content { padding: var(--s-10) var(--s-8); }
    .roadmap-step { grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
    .roadmap-text { grid-column: 2; }
}

@media (max-width: 900px) {
    /* Hero */
    .hero-inner   { grid-template-columns: minmax(0, 1fr); margin-inline: var(--s-3); }
    .hero-content { padding: var(--s-8) var(--s-4) var(--s-6); }
    /* nur Seitenverhältnis — eine Mindesthöhe würde über 4:3 eine Mindestbreite erzwingen */
    .hero-photo   { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
    /* Über mich */
    .about-grid  { grid-template-columns: minmax(0, 1fr); }
    .about-image { max-width: 460px; }
    .about-text  { padding: var(--s-8) var(--s-6); }
    /* Pakete: Spalten werden Zeilen */
    .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
    .pricing-card { border-left: 0; border-top: 1px solid var(--line); padding: var(--s-8) var(--s-6); }
    .pricing-card:first-child { border-top: 0; }
    /* Portfolio */
    .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
    /* gleich stark wie die „letzte Kachel"-Regeln oben, damit diese hier gewinnen */
    .portfolio-grid .portfolio-item:nth-child(n) { grid-column: span 1; }
    .portfolio-grid .portfolio-item:nth-child(3n+1),
    .portfolio-grid .portfolio-item:nth-child(3n+2):last-child { grid-column: span 2; }
    /* Karate-Teaser */
    .kt-inner   { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-3); }
    .kt-visual  { order: -1; }
    .kt-content { padding: var(--s-2) var(--s-3) var(--s-4); }
    /* Kontakt, FAQ */
    .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
    .contact-form { padding: var(--s-6); }
    .faq-header   { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
    /* Unterseiten */
    .pd-grid      { grid-template-columns: minmax(0, 1fr); }
    .pd-form-wrap { position: static; }
    .pd-form-box  { padding: var(--s-6); }
    /* Karate-Seite */
    .k-hero-grid    { grid-template-columns: minmax(0, 1fr); }
    .k-hero-visual  { order: -1; }
    .k-hero-photo   { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
    .k-hero-content { padding: var(--s-6) var(--s-3); }
    .k-usp-inner    { padding: var(--s-8) var(--s-6); }
    .k-do-grid      { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
    .k-event        { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-4) var(--s-6); }
    .k-event-place  { justify-self: start; }

    /* Header mobil: Logo links, Menü-Knopf rechts, Navigation als Fläche darunter */
    .nav-toggle { display: flex; grid-column: 2; justify-self: end; }
    #site-header .container.header-bar { grid-template-columns: 1fr auto; gap: var(--s-4); }
    .site-branding { grid-column: 1; justify-self: start; }
    #primary-navigation,
    .nav-fallback-wrap {
        display: none;
        grid-column: 1 / -1;
        position: absolute;
        top: calc(var(--nav-h) - 8px);
        left: var(--s-3);
        right: var(--s-3);
        padding: var(--s-4) var(--s-6);
        background: var(--c-surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    #primary-navigation.open,
    .nav-fallback-wrap.open { display: flex; flex-direction: column; animation: fadeIn var(--dur) var(--ease-out) both; }
    #primary-menu,
    .nav-fallback { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .header-nav--right { border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-2); }
    #primary-menu li a,
    .nav-fallback a { width: 100%; min-height: 48px; font-size: 1.0625rem; color: var(--c-text); }
    .nav-fallback a::after,
    #primary-menu li a::after { display: none; }

    /* Gescrollt: flache Leiste statt Verlaufs-Schleier, damit das Logo lesbar bleibt */
    #site-header::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: var(--c-bg);
        border-bottom: 1px solid var(--line);
        opacity: 0;
    }
    #site-header.scrolled::before { opacity: 1; }
    #site-header.scrolled .site-branding { filter: none; }
}

@media (max-width: 760px) {
    :root { --blur: blur(16px) saturate(1.3); }
    .k-actions .btn,
    .cta-banner-actions .btn,
    .ws-cta-actions .btn,
    .k-cta-actions .btn { width: 100%; }
    .cta-banner       { padding-block: var(--s-16); }
    .cta-banner-inner { padding: var(--s-10) var(--s-6); }
    .testimonial-card { padding: var(--s-8) var(--s-6); }
    .k-cta-inner,
    .ws-cta-inner     { padding: var(--s-10) var(--s-6); }
    .kt               { padding-block: var(--s-16); }
    .photo-backdrop   { filter: blur(32px) saturate(1.1) brightness(0.6); }
}

@media (max-width: 640px) {
    .hero-actions      { flex-direction: column; align-self: stretch; }
    .hero-actions .btn { width: 100%; }
    .roadmap-step      { padding: var(--s-5) var(--s-5); }
    /* Eine Spalte als Stapel — Spalten-Regeln greifen hier nicht mehr */
    .portfolio-grid    { display: flex; flex-direction: column; }
    .portfolio-item    { height: 240px; }
    .form-row          { grid-template-columns: minmax(0, 1fr); }
    .faq-question      { gap: var(--s-4); padding: var(--s-4) var(--s-5); font-size: 1rem; }
    .faq-answer        { padding: 0 var(--s-5) var(--s-5); }
    .pricing-tabs-nav  { width: 100%; }
    .ptab              { flex: 1; padding: 0 var(--s-3); }
    #site-footer .container { flex-direction: column; align-items: flex-start; }
    .filmstrip-cell    { width: 58vw; }
    .booking-popup-box { padding: var(--s-12) var(--s-5) var(--s-6); }
    .empty-state       { padding: var(--s-6); }
}

/* ==========================================================================
   Weniger Bewegung — auf Wunsch des Systems: gar keine
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    /* Filmstreifen steht still und lässt sich stattdessen wischen/scrollen.
       (Das Druck-Feedback scale(0.97) bleibt — es ist ein Zustand, keine Animation.) */
    .filmstrip { overflow-x: auto; }
}