/* ============================================================
   KN-Office-Visualizer — Architectural Editorial
   Helles, ruhiges Manufaktur-Design. Gidole + K+N-Orange.
   Signatur-Motiv: die Winkel-Geometrie des K+N-Zeichens
   (45°-Eckschnitt). Handgeschriebenes CSS, kein Build.
   ============================================================ */

@font-face {
    font-family: 'Gidole';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Gidole-Regular.woff2') format('woff2'),
         url('fonts/Gidole-Regular.woff') format('woff');
}

/* ---------- Tokens ---------- */
:root {
    --ink:        #17150F;   /* warm near-black */
    --ink-soft:   #2A2620;
    --paper:      #F6F3EC;   /* warm gallery off-white */
    --paper-2:    #EFEBE1;   /* warm sand, section banding */
    --paper-pure: #FFFFFF;
    --line:       #E2DCCF;   /* warm hairline */
    --line-strong:#C9C1B0;
    --muted:      #6F685C;   /* warm grey */

    --accent:        #E84E03;  /* K+N orange, exact */
    --accent-hover:  #C13E02;
    --accent-soft:   rgba(232,78,3,0.09);

    /* Eckig statt gerundet (2026-07-21, Kundenwunsch K+N: „Alle Buttons eckig,
       alle Bilder eckig"). Die Radien laufen zentral über diese drei Variablen —
       Buttons, Bilder, Karten und Rahmen sind damit durchgängig kantig. Runde
       Bedienelemente (Slider-Griff, Lade-Puls, Haken, Lightbox-Schließer) haben
       eigene 50%-Werte und bleiben rund, sonst wirken sie wie Fehler. */
    --radius-sm: 0px;
    --radius:    0px;
    --radius-lg: 0px;

    --shadow-1: 0 1px 2px rgba(31,25,15,0.05);
    --shadow-2: 0 18px 50px -24px rgba(31,25,15,0.30);
    --shadow-3: 0 40px 90px -36px rgba(31,25,15,0.45);

    --max:        1400px;
    --max-narrow: 760px;
    --form-max:   880px;
    --bezier: cubic-bezier(0.22, 1, 0.36, 1);

    --sans: 'Gidole', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* 45°-Eckschnitt als Marken-Motiv */
    --notch: 26px;
    --clip-notch: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Container ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 3vw, 52px); }
.no-wrap { white-space: nowrap; }
/* Verhindert Ein-Wort-Umbrüche (Hurenkinder) in Fließtexten — progressive enhancement */
p { text-wrap: pretty; }
h1, h2, h3, .section-title { text-wrap: balance; }

/* ---------- Hero (Cybercore — aufsteigende Orange-Lichtstrahlen) ---------- */
.hero {
    position: relative;
    min-height: min(94vh, 940px);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(120% 80% at 50% 100%, rgba(232,78,3,0.18) 0%, transparent 55%),
      radial-gradient(90% 60% at 50% 0%, rgba(255,122,47,0.05) 0%, transparent 60%),
      #08040a;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__floor {
    position: absolute; left: -50%; right: -50%; bottom: 0; height: 72vh;
    background-image:
      linear-gradient(rgba(232,78,3,0.38) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232,78,3,0.38) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(420px) rotateX(72deg);
    transform-origin: bottom center;
    animation: moveGrid 7s linear infinite;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.4) 45%, transparent 78%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.4) 45%, transparent 78%);
}
.hero__floor::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center bottom, rgba(232,78,3,0.85) 0%, transparent 60%); opacity: 0.5; mix-blend-mode: screen; animation: floorGlow 5s ease-in-out infinite; }
.hero__column { position: absolute; top: -10%; bottom: 0; left: 50%; transform: translateX(-50%); width: min(620px, 70vw); background: radial-gradient(ellipse at 50% 80%, rgba(255,122,47,0.5) 0%, transparent 62%); filter: blur(26px); opacity: 0.55; animation: mainGlow 4.5s ease-in-out infinite alternate; }
/* Räume-Ebene: echte K+N-Räume bauen sich vom Boden auf + Crossfade */
.hero__rooms { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero__room { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; will-change: opacity; }
.hero__room.is-on { opacity: 1; z-index: 2; animation: heroBuild 1.7s var(--bezier) forwards; }
.hero__room img { width: 100%; height: 100%; object-fit: cover; object-position: center;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 24%);
    mask-image: linear-gradient(to top, transparent 0%, #000 24%); }
.hero__room.is-on img { animation: heroKen 9s ease-out both; }
/* Dunkel-orange Kino-Grading + Links-Scrim für Text-Lesbarkeit */
.hero__rooms::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(8,4,10,0.72) 0%, rgba(8,4,10,0.46) 42%, rgba(8,4,10,0.24) 70%, transparent 92%),
      linear-gradient(180deg, rgba(8,4,10,0.5) 0%, transparent 30%, rgba(8,4,10,0.32) 66%, rgba(8,4,10,0.88) 100%),
      radial-gradient(120% 90% at 50% 112%, rgba(232,78,3,0.30) 0%, transparent 52%); }
/* Top + Bottom abdunkeln — Header oben IMMER gut lesbar, Übergang nach unten sauber */
.hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,4,10,0.90) 0%, rgba(8,4,10,0.35) 14%, transparent 30%, transparent 64%, rgba(8,4,10,0.45) 100%); }
/* Inhalts-Spalte: trägt Zentrierung (max-width/margin via .container) + füllt die Hero-Höhe */
.hero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; min-height: min(94vh, 940px); }

@keyframes heroBuild { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroKen { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes floorGlow { 0%, 100% { transform: scale(0.95); opacity: 0.45; } 50% { transform: scale(1.05); opacity: 0.8; } }
@keyframes mainGlow { from { opacity: 0.4; filter: blur(30px); } to { opacity: 0.65; filter: blur(20px); } }
@keyframes moveGrid { from { background-position: 0 0; } to { background-position: -64px -64px; } }

.hero__nav {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 28px; padding-bottom: 24px;
}
.hero__logo { display: inline-flex; color: #fff; text-decoration: none; transition: opacity 0.25s ease; }
.hero__logo svg { height: 38px; width: auto; display: block; }
@media (min-width: 720px) { .hero__logo svg { height: 52px; } }
.hero__logo:hover { opacity: 0.82; }
.hero__navcta {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; text-decoration: none; font-size: 13px; letter-spacing: 0.02em;
    text-shadow: var(--hero-text-shadow);
    padding: 11px 20px; border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius-sm);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--bezier);
    white-space: nowrap;
}
.hero__navcta:hover { background: rgba(255,255,255,0.14); border-color: #fff; transform: translateY(-1px); }
.hero__navcta svg { transition: transform 0.25s var(--bezier); }
.hero__navcta:hover .hero__navcta-arrow { transform: translateX(3px); }
.hero__navcta-icon { display: none; }
/* Handy (≤ 480 px): Logo + Beta-Badge (227 px) und der Text-Button (181 px)
   passen erst ab 464 px Bildschirmbreite nebeneinander — darunter ragte der
   Button bis zu 70 px über den Rand. Hier nur das Upload-Symbol (dasselbe wie
   im Upload-Feld), 44 × 44 px; der Text bleibt als Linkname für Screenreader. */
@media (max-width: 480px) {
    .hero__navcta { position: relative; width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; flex-shrink: 0; }
    .hero__navcta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .hero__navcta-arrow { display: none; }
    .hero__navcta-icon { display: block; }
}
/* Sehr kleine Handys (< 360 px): selbst Logo + Badge + Symbol ragten 7 px über
   den Rand → Wortmarke minimal kleiner (38 → 34 px Höhe). */
@media (max-width: 359px) { .hero__logo svg { height: 34px; } }

.hero__content { margin-top: auto; padding-bottom: clamp(88px, 13vh, 150px); max-width: 880px; }
.hero__content > * { opacity: 0; animation: rise 0.9s var(--bezier) forwards; }
.hero__content > .eyebrow        { animation-delay: 0.15s; }
.hero__content > .hero__headline { animation-delay: 0.26s; }
.hero__content > .hero__sub      { animation-delay: 0.40s; }
.hero__content > .hero__beta     { animation-delay: 0.46s; }
.hero__content > .hero__actions  { animation-delay: 0.52s; }
.hero__content > .trust          { animation-delay: 0.62s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* Text in Akzent-DUNKEL (#C13E02, 4,8:1 auf Creme) — reines Akzent-Orange
   erreicht bei 11px keinen AA-Kontrast; die ::before-Linie bleibt Orange. */
/* Zeilenumbruch (2026-07-20): Deutsche Komposita reißen sonst einzelne kurze
   Wörter in die letzte Zeile („…Raumwirkung verändert."). balance gleicht
   Überschriften aus, pretty verhindert Schusterjungen im Fließtext. Beides
   degradiert in älteren Browsern still zum normalen Umbruch. */
h1, h2, h3, .section-title, .hero__headline, .how__title, .worlds__stagecap { text-wrap: balance; }
/* Kurze Einleitungsabsätze ebenfalls ausgleichen: bei drei Zeilen blieb sonst
   ein Drittel-Rest stehen. balance greift bis ~6 Zeilen, längere Fließtexte
   bekommen pretty (verhindert nur den Schusterjungen). */
.showcase__sub, .section-sub, .hero__sub { text-wrap: balance; }
.how__text, .site-footer__beta, .hero__beta { text-wrap: pretty; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 400; color: var(--accent-hover); margin: 0 0 24px; }
.eyebrow--muted { color: var(--muted); }
.eyebrow--muted::before { background: var(--line-strong); }
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--accent); }
/* In zentrierten Abschnitten (den Funnel-Schritten) hing der Strich nur links
   und ließ die Zeile schief wirken — dort spiegeln wir ihn nach rechts. */
.eyebrow--center::after { content: ''; width: 34px; height: 1px; background: var(--accent); }
.eyebrow--center.eyebrow--muted::after { background: var(--line-strong); }
/* Hero-Typografie (2026-07-21): Die Textebenen hatten vier verschiedene
   Schatten-Behandlungen — Eyebrow doppelt und sehr hart (Halo/matschig),
   Headline nur 40px Weichzeichner (trägt kaum Kontrast), Subline, Trust-Zeile
   und Nav-CTA gar keinen. Da die Hero-Rotation zwischen sehr dunklen und sehr
   hellen Bildern wechselt (gemessen: 8 % bis 45 % helle Fläche hinter dem
   Textblock), stand weißer Text zeitweise ungeschützt auf hellem Grund.
   Jetzt EIN Schatten für alle: enger Kern für die Kantenschärfe, weiter Hof
   für den Kontrast — lesbar, ohne dass ein Halo entsteht. */
.hero { --hero-text-shadow: 0 1px 2px rgba(8,4,10,0.55), 0 2px 20px rgba(8,4,10,0.45); }
.eyebrow--light { color: #ffffff; text-shadow: var(--hero-text-shadow); font-size: 12.5px; letter-spacing: 0.14em; font-weight: 600; margin-bottom: 18px; }
.eyebrow--light::before { background: #ffa869; box-shadow: 0 1px 4px rgba(0,0,0,0.6); }

.hero__headline { font-family: var(--sans); font-weight: 400; font-size: clamp(52px, 9vw, 120px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; color: #fff; text-shadow: 0 1px 3px rgba(8,4,10,0.45), 0 3px 40px rgba(8,4,10,0.55); }
.hero__headline em { font-style: normal; color: #ff7a2f; text-shadow: 0 0 32px rgba(232,78,3,0.6), 0 0 72px rgba(255,122,47,0.35); }
.hero__sub { margin: 28px 0 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: rgba(255,255,255,0.94); max-width: 52ch; text-shadow: var(--hero-text-shadow); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.trust { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.28); display: flex; flex-wrap: wrap; gap: 14px 34px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.96); list-style: none; padding-left: 0; text-shadow: var(--hero-text-shadow); }
.trust__item { display: inline-flex; align-items: center; gap: 9px; }
.trust__check { width: 19px; height: 19px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 8px rgba(232,78,3,0.5); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.trust__check svg { width: 11px; height: 11px; }

/* ---------- Mobile-Hero: Raum als volle 16:9-Totale oben, Text darunter ---------- */
@media (max-width: 640px) {
    .hero__inner { min-height: auto; }
    /* Raumbild auf eine 16:9-Bande oben begrenzen → der GANZE Raum bleibt sichtbar (keine harte Detail-Beschneidung) */
    .hero__rooms { bottom: auto; height: 58vw; min-height: 198px; }
    /* Text sitzt jetzt UNTER dem Bild → kein Links-Scrim mehr nötig, nur sauberer Verlauf nach unten */
    .hero__rooms::after { background: linear-gradient(180deg, rgba(8,4,10,0.26) 0%, transparent 22%, transparent 60%, rgba(8,4,10,0.94) 100%); }
    .hero__room img { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%); mask-image: linear-gradient(to top, transparent 0%, #000 30%); }
    /* Inhalt unter die Bildbande schieben (Glow-Hintergrund bleibt dahinter) */
    .hero__content { margin-top: 0; padding-top: calc(58vw - 58px); padding-bottom: 52px; }
}

/* ---------- Showcase (Vorher/Nachher) ---------- */
.showcase { padding: clamp(44px, 7vh, 84px) 0 clamp(40px, 6vh, 72px); }
.showcase__head { max-width: 720px; margin: 0 0 42px; }
.showcase__sub { margin: 18px 0 0; color: var(--muted); font-size: 19px; line-height: 1.6; max-width: 56ch; }
/* Clip liegt am inneren .compare, der Schatten am Frame — clip-path am selben
   Element würde den box-shadow mit wegschneiden. */
.showcase__frame { position: relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.showcase__frame .compare { border: none; border-radius: var(--radius-lg); box-shadow: none; aspect-ratio: 16 / 10; clip-path: var(--clip-notch); }
@media (min-width: 720px) { .showcase__frame .compare { aspect-ratio: 16 / 9; } }
.showcase__frame .compare__layer { transition: opacity 0.6s ease; }
.showcase [data-compare].is-swapping .compare__layer { opacity: 0.85; }
.showcase__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.showcase__caption { font-size: 15px; color: #5a544c; letter-spacing: 0.02em; }
.showcase__dots { display: flex; gap: 10px; }
/* 4px-Striche als Optik, aber mit unsichtbarer 28px-Hitarea (WCAG 2.5.8);
   inaktiv in --muted statt --line-strong (1,6:1 war nicht erkennbar). */
.showcase__dots button { position: relative; width: 30px; height: 4px; border-radius: 2px; background: var(--muted); transition: background 0.25s ease, width 0.25s ease; cursor: pointer; }
.showcase__dots button::before { content: ''; position: absolute; inset: -12px -5px; }
.showcase__dots button.is-active { background: var(--accent); width: 46px; }

/* ---------- How it works ---------- */
.how { padding: clamp(64px, 10vh, 116px) 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.how__head { max-width: 700px; margin: 0 0 50px; }
.how__head .eyebrow { color: var(--accent); }
.how__grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .how__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.how__step { position: relative; padding-top: 28px; border-top: 2px solid var(--ink); }
.how__num { font-size: 12px; letter-spacing: 0.2em; color: var(--accent-hover); text-transform: uppercase; margin: 0 0 18px; }
/* Bild je Schritt (2026-07-20): macht den Ablauf anschaulich — derselbe Raum
   als Vorher-Foto, als Stilwelten-Triptychon und als fertiges Ergebnis. */
.how__figure { margin: 0 0 15px; }
.how__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: var(--radius-sm); background: var(--paper-2);
    border: 1px solid var(--line); }
.how__cap { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-top: 9px; }
.how__title { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 12px; }
.how__text { color: #4a443c; margin: 0; line-height: 1.65; font-size: 16.5px; }

/* ---------- Gallery marquee ---------- */
.gallery { padding: clamp(64px, 10vh, 116px) 0 clamp(40px, 6vh, 64px); overflow: hidden; }
.gallery__head { margin: 0 0 38px; }
.gallery__head .eyebrow { color: var(--accent); }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 18px; width: max-content; animation: marquee 52s linear infinite; }
.gallery:hover .marquee__track { animation-play-state: paused; }
.marquee__item { position: relative; width: clamp(260px, 30vw, 380px); aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); flex: 0 0 auto; }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }
.marquee__cap { position: absolute; left: 12px; bottom: 12px; background: rgba(23,21,15,0.72); color: var(--paper); font-size: 12px; letter-spacing: 0.04em; padding: 5px 12px; border-radius: var(--radius-sm); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gallery__note { color: var(--muted); max-width: 640px; margin: 34px auto 0; font-size: 14px; line-height: 1.6; text-align: center; }

/* ---------- Scroll reveals (nur aktiv wenn JS läuft) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--bezier), transform 0.75s var(--bezier); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
    .hero__floor, .hero__floor::after, .hero__column { animation: none !important; }
    .hero__room.is-on, .hero__room.is-on img { animation: none !important; clip-path: none !important; transform: none !important; }
    .hero__content > * { opacity: 1 !important; animation: none !important; transform: none !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Buttons (architectural, low radius) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 400;
    font-family: var(--sans);
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    min-height: 52px;
    white-space: nowrap;
    position: relative;
    transition: transform 0.25s var(--bezier), background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.btn svg { transition: transform 0.25s var(--bezier); }
.btn:hover:not(:disabled) svg { transform: translateX(3px); }

.btn--accent { background: linear-gradient(180deg, #F4581A 0%, var(--accent) 58%, #D94602 100%); color: #fff; box-shadow: 0 16px 34px -12px rgba(232,78,3,0.7), 0 0 0 1px rgba(255,255,255,0.06) inset; }
.btn--accent:hover:not(:disabled) { background: linear-gradient(180deg, #F76A2B 0%, var(--accent-hover) 100%); transform: translateY(-2px); box-shadow: 0 22px 44px -14px rgba(232,78,3,0.75); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover:not(:disabled) { background: var(--paper-pure); border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost-light:hover:not(:disabled) { background: var(--paper-pure); border-color: var(--ink); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; filter: saturate(0.6); }
.btn:disabled svg { transform: none; }
/* Upload-CTA deaktiviert: neutral-beige statt blassem Warn-Orange; aktiv = volles Akzent-Orange */
#to-step-2:disabled { background: var(--paper-2); color: var(--muted); border: 1px solid var(--line-strong); opacity: 1; filter: none; box-shadow: none; }
.btn--lg { padding: 19px 34px; font-size: 16px; min-height: 60px; }

/* ---------- Section titles ---------- */
.section-title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.03em;
    margin: 0;
}
.section-title em { font-style: normal; color: var(--accent); }

/* ---------- Funnel ---------- */
.funnel { padding: 40px 0 150px; }
@media (max-width: 720px) { .funnel { padding: 24px 0 80px; } }
/* Funnel an derselben linken Grid-Kante wie Hero/Showcase, lesbare Spaltenbreite */
.funnel .step { max-width: var(--form-max); margin: 0 auto; text-align: center; }

/* Einheitliche Sektions-Subzeile (ersetzt die frühere Mischung aus Inline-Styles,
   zweckentfremdetem .hero__sub und Ad-hoc-Größen zwischen 14 und 22px). */
.section-sub { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 56ch; margin: 18px 0 0; }
.section-sub--center { margin: 24px auto 36px; }

.step { display: none; animation: stepIn 0.55s var(--bezier); }
.step.is-active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.step__progress { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 34px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); text-align: center; }
.step__progress > span:first-child { white-space: nowrap; }
.step__progress-bar { width: 100%; max-width: 280px; height: 2px; background: var(--line); overflow: hidden; position: relative; }
.step__progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: 0; }
/* Zielbreite liegt am Zustand selbst (--progress aus index.php); die Animation
   füllt nur von 0 dorthin. So stimmt die Bar auch ohne Animation
   (prefers-reduced-motion) — vorher blieb sie dann auf 0 bzw. fiel auf 50%. */
.step.is-active .step__progress-fill { width: var(--progress, 50%); animation: progressFill 0.9s var(--bezier); }
@keyframes progressFill { from { width: 0; } }

/* ---------- Upload (Step 1) ---------- */
.upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 52px 32px;
    background: var(--paper-pure);
    border: 1px solid var(--line);
    /* drop-shadow statt box-shadow: clip-path (Notch) schneidet box-shadows
       komplett weg — drop-shadow folgt der Clip-Kontur. */
    filter: drop-shadow(0 1px 2px rgba(31,25,15,0.08));
    cursor: pointer;
    clip-path: var(--clip-notch);
    transition: background 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    overflow: hidden;
}
.upload::after {
    content: '';
    position: absolute; inset: 14px;
    border: 1.5px dashed rgba(232,78,3,0.4);
    pointer-events: none;
    transition: border-color 0.3s ease;
    clip-path: var(--clip-notch);
}
.upload:hover { background: var(--accent-soft); filter: drop-shadow(0 16px 26px rgba(31,25,15,0.16)); }
.upload:hover::after { border-color: var(--accent); }
.upload.is-dragover { background: var(--accent-soft); transform: translateY(-2px); filter: drop-shadow(0 16px 26px rgba(31,25,15,0.16)); }
.upload.is-dragover::after { border-color: var(--accent); }
.upload__icon { width: 52px; height: 52px; color: var(--accent); margin-bottom: 22px; transition: transform 0.3s var(--bezier); }
.upload:hover .upload__icon { transform: translateY(-4px); }
.upload__title { font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); max-width: 20ch; margin: 0; text-wrap: balance; }
.upload__title em { font-style: normal; color: var(--accent); }
.upload__hint { margin: 14px 0 0; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.upload__preview { max-height: 250px; width: auto; border-radius: var(--radius); margin: 0 auto; }
.upload__error { color: #B3401C; font-size: 14px; margin-top: 14px; }
.upload__inner { display: contents; }
/* Datei-Input unsichtbar; die Upload-Fläche (label) übernimmt Klick und Drop */
.upload__input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.step__hint { font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.step__note { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }
.noscript-hint { color: #B3401C; font-size: 15px; margin: 0 0 24px; }

.step__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 30px; }

/* ---------- Fields (Step 2) ---------- */
.fields { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 30px; text-align: left; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: block; position: relative; }
.field__label { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px; }
.field__input {
    display: block; width: 100%;
    background: var(--paper-pure);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 15px 18px;
    font: inherit; color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field__input::placeholder { color: rgba(111,104,92,0.78); font-style: italic; }
.field__input:hover { border-color: var(--line-strong); }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
select.field__input { cursor: pointer; appearance: none; -webkit-appearance: none;
    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='%236F685C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
.field__error { color: #B3401C; font-size: 13px; margin: 8px 0 0; text-align: left; }
/* Pflichtfeld nicht ausgefüllt: roter Rahmen wie bei der Einwilligungsbox */
.field__input[aria-invalid="true"] { border-color: #B3401C; box-shadow: 0 0 0 3px rgba(179,64,28,0.12); }
.field--full { grid-column: 1 / -1; }
.field__optional { color: var(--muted); }

/* ---------- Einwilligungen + Upload-Hinweis (2026-09-28) ----------
   Texte der K+N-Datenschutzbeauftragten. Rechtstext linksbündig (zentriert
   wäre er schwer lesbar), der Block selbst zentriert wie der Rest des Funnels.
   Eckige Checkbox im Seitendesign; nie vorausgewählt. Im Kontrastmodus
   (forced-colors) zurück auf die native Checkbox. */
.upload-notice { max-width: 640px; margin: 18px auto 0; padding: 14px 18px; text-align: left;
    font-size: 13.5px; line-height: 1.6; color: #4a443c;
    background: var(--paper-pure); border-left: 3px solid var(--accent); }
.upload-notice strong { font-weight: 600; color: var(--ink); }
.consent { display: flex; align-items: flex-start; gap: 14px; max-width: 640px; margin: 30px auto 0;
    padding: 16px 18px; text-align: left; font-size: 13.5px; line-height: 1.6; color: #4a443c; text-wrap: pretty;
    background: var(--paper-pure); border: 1px solid var(--line); cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s; }
.consent:hover { border-color: var(--line-strong); }
.consent input { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
    display: grid; place-content: center; border: 1.5px solid var(--muted); border-radius: 0; background: #fff;
    cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.consent input::before { content: ''; width: 11px; height: 11px; background: #fff; transform: scale(0); transition: transform 0.12s ease-out;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
.consent input:checked { background: var(--accent); border-color: var(--accent); }
.consent input:checked::before { transform: scale(1); }
.consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--accent-hover); }
.consent.is-invalid { border-color: #B3401C; box-shadow: 0 0 0 3px rgba(179,64,28,0.12); }
.consent.is-invalid input { border-color: #B3401C; }
.consent__error { max-width: 640px; margin: 8px auto 0; text-align: left; color: #B3401C; font-size: 13px; }
/* Köderfeld gegen Bots (2026-09-29): außerhalb des sichtbaren Bereichs, ohne
   display:none — manche Bots überspringen versteckte Felder gezielt. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (forced-colors: active) { .consent input { -webkit-appearance: auto; appearance: auto; } .consent input::before { content: none; } }

/* ---------- Loading (Step 3) ---------- */
.loading { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 60px 36px; text-align: center; position: relative; overflow: hidden; clip-path: var(--clip-notch); }
.loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); transform: translateX(-100%); animation: shimmer 2.6s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } }
.loading > * { position: relative; z-index: 1; }
.loading__pulse { margin: 0 auto 28px; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); position: relative; animation: pulse 2s ease-in-out infinite; }
.loading__pulse::before, .loading__pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ripple 2s ease-in-out infinite; }
.loading__pulse::after { animation-delay: 1s; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.86); opacity: 0.85; } }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.2); opacity: 0; } }
.loading__title { font-weight: 400; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 8px; }
.loading__step { color: var(--muted); font-size: 15px; margin: 0; min-height: 1.6em; }
.loading__hint { color: var(--muted); font-size: 12px; margin-top: 24px; opacity: 0.8; letter-spacing: 0.04em; }

/* ---------- Compare slider ---------- */
.compare {
    position: relative; width: 100%; overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--paper-2);
    aspect-ratio: 16 / 10;
    user-select: none; -webkit-user-select: none;
    cursor: ew-resize; touch-action: none;
    box-shadow: var(--shadow-2);
}
.compare > * { pointer-events: none; }
.compare__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-drag: none; }
.compare__top { position: absolute; inset: 0; overflow: hidden; }
.compare__label { position: absolute; top: 16px; padding: 7px 15px; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; border-radius: var(--radius-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.compare__label--before { left: 16px; background: rgba(23,21,15,0.72); color: var(--paper); }
.compare__label--after  { right: 16px; background: rgba(232,78,3,0.94); color: #fff; }
/* left-Defaults = 50/50-Startzustand auch ohne JavaScript */
.compare__divider { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.compare__handle { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 0 4px rgba(255,255,255,0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.compare:hover .compare__handle { box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 0 6px rgba(232,78,3,0.18); }
.compare:active .compare__handle { transform: translate(-50%, -50%) scale(0.95); }
.compare__handle svg { width: 21px; height: 21px; color: var(--ink); }

/* ---------- KI-Kennzeichnung (2026-09-28) ----------
   „KI GENERIERT" klein auf jedem KI-erzeugten Bild. Als Overlay statt
   eingebrannt: Die Bilddateien bleiben unverändert (keine Neugenerierung), und
   das Label ist auf jeder Bildschirmbreite gleich klein und lesbar. Downloads
   liefert image.php mit eingebranntem Label aus. Stil wie .compare__label,
   nur kleiner und dezenter.
   Bewusst ohne z-index: Im Vorher/Nachher-Regler steht das Label im DOM VOR
   .compare__top und wird so vom Vorher-Foto verdeckt, sobald dieses darüber
   liegt — das Label gehört nur zur Visualisierung. */
.ki-label { position: absolute; right: 12px; bottom: 12px; pointer-events: none;
    padding: 5px calc(9px - 0.16em) 5px 9px; /* rechts minus Laufweite des letzten Zeichens */
    font-size: 9px; line-height: 1; font-weight: 400; letter-spacing: 0.16em;
    text-transform: uppercase; white-space: nowrap;
    color: rgba(255,255,255,0.94); background: rgba(23,21,15,0.55);
    border-radius: var(--radius-sm);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.compare .ki-label,
.result__hi-res .ki-label { right: 16px; bottom: 16px; }
/* Galerie: unten links sitzt die Bildunterschrift → Label oben rechts */
.marquee__item .ki-label { top: 10px; right: 10px; bottom: auto; }
.how__media { position: relative; }
/* Lightbox: Rahmen schmiegt sich ans Bild, damit das Label in dessen Ecke sitzt */
.lightbox__media { position: relative; display: inline-block; line-height: 0; }
.lightbox__media img { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.lightbox__media .ki-label { line-height: 1; }
/* Hero: ein Label für alle rotierenden Räume, unten rechts im noch voll
   sichtbaren Bildbereich (darunter blendet das Bild aus). z-index 4 = über
   dem Farb-Grading (.hero__rooms::after). */
.ki-label--hero { z-index: 4; right: clamp(20px, 3vw, 52px); bottom: calc(24% + 14px); }
@media (max-width: 640px) { .ki-label--hero { right: 12px; bottom: calc(30% + 8px); } }

/* ---------- Result (Step 4) ---------- */
.result { display: flex; flex-direction: column; gap: 56px; }
.result__header { text-align: left; display: flex; flex-direction: column; gap: 26px; }
.result__header > p { margin: 0; color: var(--muted); font-size: 16px; max-width: 60ch; }
.result__count { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: rgba(232,78,3,0.07); color: var(--accent-hover); padding: 8px 16px; border-radius: 0; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.result__hi-res-block { display: flex; flex-direction: column; gap: 16px; }
.result__hi-res-block .eyebrow { margin: 0; }
.result__hi-res { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--paper-pure); filter: drop-shadow(0 10px 20px rgba(31,25,15,0.16)); cursor: zoom-in; transition: filter 0.25s; display: block; clip-path: var(--clip-notch); }
.result__hi-res img { width: 100%; transition: transform 0.5s var(--bezier); }
.result__hi-res:hover { filter: drop-shadow(0 22px 38px rgba(31,25,15,0.24)); }
.result__hi-res:hover img { transform: scale(1.015); }
.result__fullscreen-badge { position: absolute; top: 16px; right: 16px; background: var(--paper-pure); border-radius: var(--radius-sm); padding: 8px 15px; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-1); }
.result__fullscreen-badge svg { width: 14px; height: 14px; }
.result__disclaimer { display: flex; align-items: flex-start; gap: 16px; background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.result__disclaimer::before { content: ''; display: block; flex-shrink: 0; width: 3px; align-self: stretch; background: var(--accent); }
.result__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Ergebnis-Slider trägt die Marken-Signatur wie der Showcase: Clip innen, Schatten außen */
.result__frame { position: relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.result__frame .compare { border: none; border-radius: var(--radius-lg); box-shadow: none; clip-path: var(--clip-notch); }
.result__cta { margin: 0; padding: 26px 28px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.result__cta h3 { margin: 0 0 8px; font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
.result__cta p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 60ch; }

/* ---------- Error box ---------- */
.error-box { background: rgba(179,64,28,0.06); border: 1px solid rgba(179,64,28,0.2); color: #7A2E15; border-radius: var(--radius); padding: 18px 22px; margin-bottom: 20px; }
.error-box__title { font-weight: 400; margin: 0; }
.error-box__hint { margin: 4px 0 12px; color: #8A3A1C; font-size: 14px; }
.error-box__btn { background: #7A2E15; color: #fff; padding: 8px 14px; font-size: 13px; border: none; border-radius: var(--radius-sm); cursor: pointer; }
.error-box__btn:hover { background: #8A3A1C; }
.error-box__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,13,9,0.96); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Stilwelten-Sektion (Explorer) ----------
   Zeigt und erklärt die 4 Einrichtungswelten: links Tab-Liste, rechts große
   Bühne mit Notch-Bild. Der CTA übernimmt die Welt direkt in den Funnel. */
.worlds { padding: clamp(64px, 10vh, 116px) 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.worlds__explorer { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 44px; align-items: start; }
.worlds__list { display: flex; flex-direction: column; }
.worlds__item { display: flex; flex-direction: column; gap: 4px; text-align: left; background: none; border: 0; border-left: 2px solid var(--line); padding: 16px 18px; cursor: pointer; font-family: var(--sans); transition: border-color .2s var(--bezier), background-color .2s var(--bezier); }
.worlds__item:hover { background: rgba(255,255,255,0.55); }
.worlds__item.is-active { border-left-color: var(--accent); background: var(--paper-pure); }
.worlds__item-name { font-size: 19px; color: var(--ink); line-height: 1.15; letter-spacing: 0.01em; }
.worlds__item.is-active .worlds__item-name { color: var(--accent-hover); }
.worlds__item-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.worlds__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.worlds__figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--paper); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.worlds__figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }
.worlds__stage.is-swapping .worlds__figure img { opacity: 0; }
.worlds__stagebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.worlds__stagecap { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 860px) {
    .worlds__explorer { grid-template-columns: 1fr; }
    .worlds__list { flex-direction: row; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
    .worlds__list::-webkit-scrollbar { display: none; }
    .worlds__item { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 14px 12px; flex: 0 0 auto; }
    .worlds__item.is-active { border-bottom-color: var(--accent); background: none; }
    .worlds__item-desc { display: none; }
    .worlds__stagecap { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .worlds__figure img { transition: none; } }

/* ---------- Stilwelten-Auswahl (Funnel Step 1) ----------
   Bricht aus der 880px-Formularspalte aus auf bis zu 1240px, damit die
   5 Bild-Karten echte Galerie-Präsenz bekommen. Signatur: der 45°-Eckschnitt
   des K+N-Zeichens sitzt auf jedem Kartenbild; die gewählte Karte füllt
   ihn orange. */
/* Stilwelten-Auswahl: Legende + Kachelgruppe werden als EINE zusammenhängende
   Gruppe horizontal zentriert — vier gleiche Spalten, auf Tablet/Mobil 2×2. */
.styleworlds { border: 0; margin: 40px 0 0; padding: 0; text-align: center; position: relative; left: 50%; transform: translateX(-50%); width: min(1240px, calc(100vw - 40px)); min-inline-size: 0; }
.styleworld { min-width: 0; }
.styleworlds__legend { font-size: 14px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 0; margin: 0 0 18px; }
.styleworlds__legend { display: block; width: 100%; }
.styleworlds__hint { text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 14px; }
.styleworlds__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; justify-content: center; }
@media (max-width: 1040px) { .styleworlds__grid { gap: 14px; } }
@media (max-width: 720px)  { .styleworlds__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .styleworlds__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Kachel-Innentext bleibt linksbuendig, nur die Gruppe ist zentriert */
.styleworld { text-align: left; }
.styleworld { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; text-align: left; font-family: var(--sans); transition: border-color .25s var(--bezier), transform .35s var(--bezier), box-shadow .35s var(--bezier); }
.styleworld:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.styleworld__figure { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.styleworld__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--bezier); }
.styleworld:hover .styleworld__img { transform: scale(1.05); }
.styleworld__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px 14px; }
.styleworld__name { font-size: 17px; color: var(--ink); line-height: 1.1; letter-spacing: 0.01em; }
.styleworld__desc { font-size: 13px; color: var(--muted); line-height: 1.25; }
.styleworld.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
.styleworld.is-active::after { content: ''; position: absolute; top: -1px; right: -1px; width: 23px; height: 23px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.styleworld.is-active .styleworld__name { color: var(--accent-hover); }
.styleworld:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .styleworld, .styleworld__img { transition: none; }
    .styleworld:hover { transform: none; }
    .styleworld:hover .styleworld__img { transform: none; }
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); box-shadow: 0 30px 100px rgba(0,0,0,0.6); cursor: default; }
.lightbox__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: var(--paper-pure); border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-2); }
.lightbox__close:hover { background: var(--accent); color: #fff; }
.lightbox__hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(246,243,236,0.6); letter-spacing: 0.04em; }

/* ---------- Wiederkehrender Call-to-Action (2026-09-28) ----------
   Am Ende der oberen Sektionen, damit Besucher nicht erst bis zum Upload
   scrollen müssen. Zentriert als Abschluss der Sektion. */
.section-cta { display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin-top: clamp(36px, 5vw, 56px); text-align: center; }
@media (max-width: 520px) {
    /* auf dem Handy volle Breite, damit der Button bequem zu tippen ist */
    .section-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- Produkt-Kategorien (2026-09-28) ----------
   Fünf verlinkte Kacheln als durchgehendes Band wie auf koenig-neurath.com:
   Hochformat 3:4, Name unten auf dem Bild, ohne Lücken zwischen den Kacheln.
   Der Verlauf unten sichert die Lesbarkeit des Namens auf hellen Motiven. */
.kategorien { padding: clamp(56px, 8vh, 96px) 0 clamp(40px, 6vh, 72px); background: var(--paper-2); }
/* Ab 900px ragt der Kontaktkasten 80px aus dem Footer nach oben und lief sonst
   in die Kacheln (56px Überlappung). Die Sektion lässt darunter entsprechend
   Platz: Überstand + ruhiger Abstand. */
@media (min-width: 900px) { .kategorien { padding-bottom: 170px; } }
.kategorien__head { display: grid; gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) {
    .kategorien__head { grid-template-columns: minmax(280px, 0.8fr) 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
}
.kategorien__lead { margin: 0; color: #4a443c; font-size: 16.5px; line-height: 1.65; max-width: 62ch; text-wrap: pretty; }

.kategorien__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
@media (max-width: 1000px) { .kategorien__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .kategorien__grid { grid-template-columns: repeat(2, 1fr); } }

.kategorie { position: relative; display: block; overflow: hidden; text-decoration: none;
    aspect-ratio: 3 / 4; background: var(--paper); }
.kategorie__img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s var(--bezier); }
.kategorie::after { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
    background: linear-gradient(to top, rgba(12,10,7,0.78) 0%, rgba(12,10,7,0.35) 45%, transparent 100%);
    transition: opacity 0.35s ease; }
.kategorie__name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 0 18px 20px; color: #fff; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -0.01em;
    text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.kategorie:hover .kategorie__img, .kategorie:focus-visible .kategorie__img { transform: scale(1.06); }
.kategorie:hover::after { opacity: 0.88; }
.kategorie:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
    .kategorie__img { transition: none; }
    .kategorie:hover .kategorie__img, .kategorie:focus-visible .kategorie__img { transform: none; }
}
/* Sechste Kachel „Alle Produkte & Lösungen" (ohne Logo, Arthur 29.09.): nur solange das Raster 3 bzw.
   2 Spalten hat — fünf Kacheln ließen dort eine Lücke (Handy 2+2+1, Tablet
   3+2). Bei 5 Spalten füllen die Kategorien die Reihe allein. */
.kategorie--mehr { display: none; }
@media (max-width: 1000px) {
    .kategorie--mehr { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
        padding: 0 18px 20px; background: var(--accent); color: #fff; transition: background 0.25s ease; }
    .kategorie--mehr::after { content: none; }
}
.kategorie--mehr:hover { background: var(--accent-hover); }
.kategorie__mehr-titel { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.kategorie__mehr-link { display: inline-block; font-size: 13px; letter-spacing: 0.02em; }
.kategorie__mehr-link svg { margin-left: 8px; vertical-align: -2px; transition: transform 0.25s var(--bezier); }
.kategorie--mehr:hover .kategorie__mehr-link svg { transform: translateX(3px); }

/* ---------- Footer (hell, an der K+N-Website orientiert: Hairline, Adresse, ruhige Typo) ---------- */
.site-footer { background: var(--paper-2); border-top: 1px solid rgba(23,21,15,0.14); margin-top: 0; }
/* Beta-Kennzeichnung (2026-07-20): Die Seite soll ehrlich sagen, dass sie neu
   ist — Badge an beiden Wortmarken, dazu je ein Satz im Hero und im Footer. */
.beta-badge { align-self: center; margin-left: 12px; padding: 3px 9px 2px; border-radius: 0;
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    background: var(--accent); color: #fff; line-height: 1.4; white-space: nowrap; }
.beta-badge--footer { background: transparent; color: var(--accent-hover);
    border: 1px solid currentColor; padding: 2px 8px 1px; }
.hero__beta { margin: 14px 0 34px; max-width: 52ch; font-size: 14px; line-height: 1.55;
    color: rgba(255,255,255,0.84); text-shadow: var(--hero-text-shadow); }
.site-footer__beta { max-width: 62ch; margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Footer 2026-07-20: Claim entfernt (er wiederholte die Hero-Headline wörtlich),
   Wortmarke deutlich größer als Absender, darunter eine Hairline und eine ruhige
   Zeile aus Adresse | Navigation | Rechtlichem. */
.site-footer__inner { max-width: var(--max); margin: 0 auto; padding: clamp(52px, 7vh, 80px) clamp(20px, 3vw, 52px) clamp(44px, 6vh, 60px); }
.site-footer__brand { color: var(--ink); display: inline-flex; transition: color 0.2s; }
.site-footer__brand:hover { color: var(--accent-hover); }
.site-footer__brand svg, .site-footer__brand img { height: clamp(46px, 5.5vw, 62px); width: auto; }
.site-footer__bar { display: flex; flex-direction: column; gap: 18px; margin-top: clamp(32px, 4vw, 44px);
    padding-top: 22px; border-top: 1px solid rgba(23,21,15,0.12); }
/* Nebeneinander erst ab 900px — darunter brach das Copyright um („vorbehalten“ allein) */
@media (min-width: 900px) { .site-footer__bar { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 32px; } }
.site-footer__legal { font-size: 12px; color: var(--muted); letter-spacing: 0.03em; text-wrap: balance; }

/* Kontaktkasten (2026-08-13, nach dem Vorbild der K+N-Website): orangefarbenes
   Polygon mit schräger Oberkante und schräger linker Kante, weißer Text
   rechtsbündig. Das Padding links muss breiter sein als die Schräge, sonst
   läuft Text unter den Anschnitt. Auf Mobil wird die Schräge flacher und der
   Kasten volle Breite — so entsteht kein horizontaler Überlauf. */
.site-footer__main { display: grid; gap: clamp(30px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) {
    .site-footer__main { grid-template-columns: 1fr auto; }
    /* Wie im K+N-Vorbild ragt der Kasten oben aus dem Footer heraus (dort rund
       27 % seiner Höhe) und überdeckt dabei die Trennlinie. Der Platz darüber
       ist frei — rechts neben dem zentrierten Schlusstext des Funnels. */
    .fcontact { margin-top: calc(-1 * (clamp(52px, 7vh, 80px) + 80px)); position: relative; z-index: 1; }
}

.fcontact {
    background: var(--accent);
    color: #fff;
    text-align: right;
    padding: 50px 30px 28px 74px;
    width: min(360px, 100%);
    justify-self: end;
    clip-path: polygon(0 17%, 100% 0, 100% 100%, 17% 100%);
}
.fcontact__lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.95); }
.fcontact__name { margin: 4px 0 16px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.fcontact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.fcontact__list li { display: flex; align-items: flex-start; justify-content: flex-end; gap: 9px; line-height: 1.45; }
.fcontact__icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; order: -1; }
.fcontact__list a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.45); transition: border-color 0.2s; }
.fcontact__list a:hover { border-color: #fff; }
.fcontact__social { display: flex; justify-content: flex-end; gap: 16px; margin-top: 26px; }
.fcontact__social a { color: #fff; display: inline-flex; opacity: 0.92; transition: opacity 0.2s, transform 0.2s var(--bezier); }
.fcontact__social a:hover { opacity: 1; transform: translateY(-2px); }
.fcontact__social svg { width: 19px; height: 19px; display: block; }
@media (max-width: 899px) {
    /* flachere Schräge + volle Breite: der Kasten bleibt im Raster, nichts läuft über */
    .fcontact { width: 100%; justify-self: stretch; padding: 26px 24px 24px 44px;
        clip-path: polygon(0 9%, 100% 0, 100% 100%, 9% 100%); }
}
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-footer__nav a { text-decoration: none; color: var(--ink); font-size: 13px; transition: color 0.2s; }
.site-footer__nav a:hover { color: var(--accent-hover); }

/* ---------- Legal pages ---------- */
.legal-page { padding: 80px 0 100px; max-width: var(--max-narrow); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.legal-page h1 { font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 24px 0 12px;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }   /* „Datenschutzinformation“ ist breiter als ein Handy */
.legal-page h2 { font-weight: 400; font-size: 22px; margin: 36px 0 12px; letter-spacing: -0.01em; }
.legal-page h3 { font-weight: 400; font-size: 17px; margin: 26px 0 8px; color: var(--ink); }
.legal-page p, .legal-page li { line-height: 1.7; }
/* Zeilenverteilung (Wortlaut bleibt): Überschriften ausgeglichen, kein Einzelwort am Absatzende */
.legal-page h1, .legal-page h2, .legal-page h3 { text-wrap: balance; }
.legal-page p, .legal-page li { text-wrap: pretty; }
.legal-page ul, .legal-page ol { padding-left: 22px; }
.legal-page .dl-grid { display: grid; grid-template-columns: 1fr; gap: 4px 16px; margin: 16px 0 0; }
/* Label-Spalte so breit wie das längste Label — mit festen 200px brach
   „Vorsitzender des Aufsichtsrats:" um und der Wert stand neben der falschen Zeile */
@media (min-width: 640px) { .legal-page .dl-grid { grid-template-columns: max-content 1fr; column-gap: 28px; } }
.legal-page .dl-grid dt { color: var(--muted); }
.legal-page .dl-grid dd { margin: 0; }
.legal-page .back-link { font-size: 13px; color: var(--muted); text-decoration: none; letter-spacing: 0.04em; }
.legal-page .back-link:hover { color: var(--accent); }
.legal-page .muted { color: var(--muted); }
.legal-page .legal-pointer { margin: 28px 0 0; padding: 14px 18px; background: var(--paper-pure); border-left: 3px solid var(--accent); }
.legal-page .small { font-size: 13px; }
.legal-page .legal-footer { margin-top: 48px; }
/* E-Mail-Adressen nie am Bindestrich umbrechen („datenschutz@koenig-“ / „neurath.com“) */
.legal-page a[href^="mailto:"] { white-space: nowrap; }

/* ---------- Einwilligungs-Banner (assets/consent.js, 2026-09-29) ----------
   „Ablehnen" und „Alle akzeptieren" sehen absichtlich gleich aus — keine
   Lenkung zur Zustimmung. Nicht modal: die Seite bleibt bedienbar. */
.cmp { position: fixed; z-index: 150; right: 16px; bottom: 16px; left: 16px; display: flex; justify-content: flex-end; pointer-events: none; }
.cmp[hidden], .cmp [hidden] { display: none !important; }
.cmp__panel { pointer-events: auto; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain; background: var(--paper-pure); color: var(--ink);
    border-top: 3px solid var(--accent); box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
    padding: 22px 24px 16px; font-size: 14px; line-height: 1.55; animation: cmpIn 0.35s var(--bezier); }
.cmp--settings .cmp__panel { max-width: 620px; }
.cmp__title { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px; }
.cmp__title:focus { outline: none; }
.cmp__text { margin: 0 0 16px; color: var(--ink-soft); }
.cmp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* In den Einstellungen bleiben die Buttons beim Scrollen sichtbar */
.cmp--settings .cmp__actions { grid-template-columns: repeat(3, 1fr); position: sticky; bottom: 0; z-index: 1;
    background: var(--paper-pure); border-top: 1px solid var(--line); padding: 12px 0 2px; }
.cmp__btn { min-height: 46px; padding: 11px 14px; font-size: 14px; white-space: normal; line-height: 1.2;
    background: var(--ink); color: var(--paper-pure); border-color: var(--ink); }
.cmp__btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.cmp__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 14px 0 0; font-size: 13px; }
.cmp__links a, .cmp__linkbtn { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.cmp__linkbtn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.cmp__links a:hover, .cmp__linkbtn:hover { color: var(--accent-hover); }
.cmp__cats { border-top: 1px solid var(--line); margin: 0 0 14px; }
.cmp__cat { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cmp__cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cmp__cat-title { font-size: 15px; cursor: pointer; }
.cmp__cat-title span { color: var(--muted); font-size: 13px; }
.cmp__cat p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* Schalter: rund wie die übrigen Bedienelemente (Slider-Griff), nicht eckig */
.cmp__toggle { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0;
    border-radius: 12px; background: var(--line-strong); cursor: pointer; transition: background 0.2s ease; }
.cmp__toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(31,25,15,0.25); transition: transform 0.2s var(--bezier); }
.cmp__toggle:checked { background: var(--accent); }
.cmp__toggle:checked::after { transform: translateX(20px); }
.cmp__toggle:disabled { opacity: 0.5; cursor: default; }
.cmp__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp__details { margin-top: 8px; font-size: 13px; }
.cmp__details summary { cursor: pointer; color: var(--ink); }
.cmp__details dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 12px; margin: 8px 0 4px; }
.cmp__details dt { color: var(--muted); }
.cmp__details dd { margin: 0; overflow-wrap: anywhere; }
.cmp__details a { color: var(--ink); }
.cmp__note { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; }
@keyframes cmpIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .cmp { right: 0; bottom: 0; left: 0; }
    .cmp__panel { max-width: none; max-height: 85vh; max-height: 85dvh; padding: 18px 16px 12px;
        box-shadow: 0 -14px 40px -14px rgba(31,25,15,0.4), 0 0 0 1px var(--line); }
    .cmp--settings .cmp__actions { gap: 8px; }
    .cmp--settings .cmp__btn { min-height: 48px; padding: 7px 6px; font-size: 13px; }
    .cmp__details dl { grid-template-columns: 1fr; gap: 0; }
    .cmp__details dd { margin-bottom: 6px; }
}
@media (forced-colors: active) { .cmp__toggle { -webkit-appearance: auto; appearance: auto; } .cmp__toggle::after { content: none; } }

/* ---------- Utils ---------- */
.skip-link { position: absolute; top: 0; left: 0; background: var(--ink); color: var(--paper); padding: 12px 20px; text-decoration: none; border-radius: 0 0 var(--radius) 0; font-size: 14px; z-index: 200; transform: translateY(-100%); transition: transform 0.2s ease; }
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .hero__inner > * { opacity: 1; }
}