/* Mobile Bar B11 — Stilvorlage — erzeugt von scripts/build_relaunch.py, nicht direkt bearbeiten */

/* ===== 01-tokens.css ===== */
/* ===========================================================================
   NOCTURNAL LUMINISM — Design-Tokens
   ---------------------------------------------------------------------------
   Gestalterische These: Die Seite ist der dunkle Raum, das Produkt ist das
   Licht darin. Alle Farbe kommt aus einer einzigen Quelle — der Akzentfarbe,
   die langsam durch das LED-Spektrum der Bars wandert (Cyan -> Violett ->
   Magenta). Nichts auf der Seite hat eine eigene Buntfarbe.
   =========================================================================== */

/* Registrierte Custom Property: nur so laesst sich eine Farbe animieren.
   Ohne @property waere --led ein String und der Wechsel wuerde harte
   Spruenge machen statt zu ueberblenden. */
@property --led {
    syntax: '<color>';
    inherits: true;
    initial-value: #2ad4e8;
}

@property --led-weich {
    syntax: '<color>';
    inherits: true;
    initial-value: #6ee7f5;
}

:root {
    /* --- Grundfarben: der dunkle Raum ---------------------------------- */
    --nacht-000: #06070d;   /* tiefster Grund, hinter allem */
    --nacht-100: #0a0c15;   /* Seitenhintergrund */
    --nacht-200: #11141f;   /* Karten, abgesetzte Flaechen */
    --nacht-300: #191d2b;   /* Karten im Hover, Eingabefelder */
    --nacht-400: #252a3c;   /* Linien, Rahmen */
    --nacht-500: #39405a;   /* Rahmen betont */

    /* --- Text: warmweiss, nie reines Weiss ----------------------------- */
    --text-hell: #f4f2ee;
    --text-normal: #c9c7d1;
    --text-leise: #8b8a99;
    --text-auf-licht: #06070d;

    /* --- Das LED-Spektrum ---------------------------------------------- */
    /* Die vier Farben stammen aus den Bars selbst — abgelesen an den Fotos
       von Aurora und Lumina. Bernstein war anfangs dabei, fiel aber raus:
       die Bars leuchten nie warm, und der Ton kippte ins Lachsfarbene. */
    --led-cyan: #2ad4e8;
    --led-azur: #5b8cf7;
    --led-violett: #a575f7;
    --led-magenta: #f062b4;

    /* Laufende Akzentfarbe (wird unten animiert) */
    --led: var(--led-cyan);
    --led-weich: color-mix(in oklab, var(--led) 55%, white);
    --led-dunkel: color-mix(in oklab, var(--led) 70%, var(--nacht-000));

    /* Leuchten: das Kernmotiv. Drei Staerken. */
    --schein-klein: 0 0 12px -2px color-mix(in oklab, var(--led) 45%, transparent);
    --schein-mittel: 0 0 40px -8px color-mix(in oklab, var(--led) 55%, transparent);
    --schein-gross: 0 0 120px -20px color-mix(in oklab, var(--led) 60%, transparent);

    /* --- Typografie ----------------------------------------------------- */
    --schrift-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --schrift-text: 'Manrope', 'Segoe UI', system-ui, sans-serif;

    /* Fluide Skala. Die Spanne ist bewusst gross: die Display-Groessen
       sollen auf grossen Schirmen wirklich gross werden. */
    --t-winzig: 0.75rem;
    --t-klein: 0.8125rem;
    --t-basis: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --t-gross: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --t-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --t-h3: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
    --t-h2: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
    --t-h1: clamp(2.75rem, 1.8rem + 4.4vw, 6rem);
    --t-display: clamp(2.75rem, 1.1rem + 5.6vw, 6.25rem);

    /* --- Raster und Abstand --------------------------------------------- */
    --breite-max: 82rem;      /* 1312px - bewusst breiter als der uebliche 1200er */
    --breite-text: 38rem;     /* Lesezeile, ca. 70 Zeichen */
    --rand: clamp(1.25rem, 5vw, 4.5rem);

    --a-1: 0.25rem;
    --a-2: 0.5rem;
    --a-3: 0.75rem;
    --a-4: 1rem;
    --a-5: 1.5rem;
    --a-6: 2rem;
    --a-7: 3rem;
    --a-8: 4rem;
    --a-9: 6rem;
    --a-10: clamp(3.25rem, 6.5vw, 6rem);   /* Abstand zwischen Abschnitten */

    /* --- Radien: klein und praezise, nicht rund und weich --------------- */
    --r-klein: 3px;
    --r-mittel: 6px;
    --r-gross: 10px;
    --r-rund: 999px;

    /* --- Bewegung -------------------------------------------------------- */
    --zeit-schnell: 140ms;
    --zeit-normal: 280ms;
    --zeit-ruhig: 600ms;
    --kurve: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Die Akzentfarbe wandert durch das Spektrum der Bars. 48 Sekunden pro
   Runde: schnell genug, dass man es beim Scrollen bemerkt, langsam genug,
   dass es nie flackert oder ablenkt. Das ist der Wiedererkennungsanker. */
@keyframes led-spektrum {
    0%   { --led: #2ad4e8; }
    26%  { --led: #5b8cf7; }
    52%  { --led: #a575f7; }
    76%  { --led: #f062b4; }
    100% { --led: #2ad4e8; }
}

:root {
    animation: led-spektrum 48s linear infinite;
}

/* Wer Bewegung reduziert haben will, bekommt eine feste Farbe — nicht eine
   eingefrorene Zufallsfarbe mitten im Uebergang. */
@media (prefers-reduced-motion: reduce) {
    :root {
        animation: none;
        --led: var(--led-cyan);
    }
}

/* ===== 02-basis.css ===== */
/* ===========================================================================
   Reset, Grundtypografie und Layout-Primitive
   =========================================================================== */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Ankerziele nicht unter die fixierte Kopfzeile rutschen lassen */
    scroll-padding-top: 6rem;
}

@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;
    }
}

body {
    background: var(--nacht-100);
    color: var(--text-normal);
    font-family: var(--schrift-text);
    font-size: var(--t-basis);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Bilder tragen echte width/height-Attribute; height:auto verhindert, dass
   daraus eine feste Hoehe wird, sobald CSS nur die Breite setzt. */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* <picture> ist nur eine Huelle: aus dem Layout nehmen, damit Grid- und
   Flex-Container das <img> als direktes Kind behandeln. Die <source>-
   Elemente muessen dabei ausdruecklich verschwinden, sonst werden sie
   in Grids zu eigenen Items. */
picture {
    display: contents;
}

picture source {
    display: none;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

/* fieldset bringt von Haus aus Rahmen und Innenabstand mit, legend eine
   eigene Zeilenlogik. Beides wird hier nicht gebraucht — die Gruppierung
   bleibt fuer Screenreader erhalten, die Optik macht das CSS. */
fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

/* --- Typografie --------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--schrift-display);
    color: var(--text-hell);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--t-h4); letter-spacing: -0.01em; line-height: 1.25; font-weight: 600; }

p { text-wrap: pretty; }

strong { color: var(--text-hell); font-weight: 700; }

/* HARTE REGEL: Navigation und Links nie unterstrichen. Hover wechselt
   Farbe oder Hintergrund, niemals Strich. */
a {
    color: var(--led);
    text-decoration: none;
    transition: color var(--zeit-schnell) var(--kurve);
}

a:hover {
    color: var(--led-weich);
}

/* Fliesstext-Links brauchen eine Kennzeichnung, die kein Unterstrich ist:
   ein kurzer Leuchtbalken darunter, der beim Hover aufblendet. */
.text-flaeche a:not(.knopf) {
    position: relative;
    color: var(--led);
    font-weight: 500;
}

.text-flaeche a:not(.knopf)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
    transition: opacity var(--zeit-schnell) var(--kurve);
}

.text-flaeche a:not(.knopf):hover::after {
    opacity: 1;
}

:focus-visible {
    outline: 2px solid var(--led);
    outline-offset: 3px;
    border-radius: var(--r-klein);
}

/* --- Layout-Primitive ---------------------------------------------------- */

.huelle {
    width: 100%;
    max-width: var(--breite-max);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.huelle-schmal {
    width: 100%;
    max-width: 58rem;
    margin-inline: auto;
    padding-inline: var(--rand);
}

.abschnitt {
    padding-block: var(--a-10);
    position: relative;
}

.text-flaeche > * + * {
    margin-top: var(--a-4);
}

.text-flaeche > * + h2,
.text-flaeche > * + h3 {
    margin-top: var(--a-7);
}

/* Nur fuer Screenreader */
.nur-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sprung-link {
    position: absolute;
    top: -100%;
    left: var(--rand);
    z-index: 200;
    padding: var(--a-3) var(--a-5);
    background: var(--led);
    color: var(--text-auf-licht);
    font-weight: 700;
    border-radius: 0 0 var(--r-mittel) var(--r-mittel);
}

.sprung-link:focus {
    top: 0;
    color: var(--text-auf-licht);
}

/* --- Wiederkehrende Bausteine -------------------------------------------- */

/* Kapitelnummer ueber der Ueberschrift: gibt der Seite einen Rhythmus und
   traegt die Akzentfarbe in jeden Abschnitt. */
.kapitel {
    display: flex;
    align-items: center;
    gap: var(--a-4);
    margin-bottom: var(--a-5);
    font-family: var(--schrift-text);
    font-size: var(--t-klein);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--led);
}

.kapitel::before {
    content: '';
    width: clamp(1.5rem, 4vw, 3.5rem);
    height: 1px;
    background: currentColor;
    box-shadow: var(--schein-klein);
}

.vorspann {
    font-size: var(--t-gross);
    color: var(--text-normal);
    max-width: var(--breite-text);
    line-height: 1.55;
}

/* ===== 03-bausteine.css ===== */
/* ===========================================================================
   Bausteine: Kopfzeile, Knöpfe, Karten, Fußzeile
   =========================================================================== */

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    background: color-mix(in oklab, var(--nacht-000) 72%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--zeit-normal) var(--kurve),
                background var(--zeit-normal) var(--kurve);
}

/* Beim Scrollen setzt sich die Leiste mit einer Leuchtkante ab. */
.kopf[data-gescrollt='ja'] {
    background: color-mix(in oklab, var(--nacht-000) 92%, transparent);
    border-bottom-color: color-mix(in oklab, var(--led) 28%, transparent);
}

.kopf__reihe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a-5);
    min-height: 4.75rem;
}

.kopf__marke {
    display: flex;
    align-items: center;
    gap: var(--a-3);
    flex-shrink: 0;
}

.kopf__marke img {
    height: 2.5rem;
    width: auto;
}

.kopf__nav {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 1.2vw, 1.25rem);
}

/* HARTE REGEL: kein Unterstrich, keine Randlinie, kein Strich beim Hover.
   Nur Farbwechsel zur LED-Farbe. */
.kopf__link {
    position: relative;
    padding: var(--a-2) var(--a-3);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-normal);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--zeit-schnell) var(--kurve);
}

.kopf__link:hover,
.kopf__link:focus-visible {
    color: var(--led);
}

/* Die aktive Seite traegt einen Leuchtpunkt — Zustand, kein Hover-Effekt. */
.kopf__link[aria-current='page'] {
    color: var(--text-hell);
}

.kopf__link[aria-current='page']::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: var(--r-rund);
    background: var(--led);
    box-shadow: var(--schein-klein);
    transform: translate(-0.35rem, -50%);
}

.kopf__aktionen {
    display: flex;
    align-items: center;
    gap: var(--a-3);
}

.kopf__telefon {
    display: inline-flex;
    align-items: center;
    gap: var(--a-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-normal);
    white-space: nowrap;
    transition: color var(--zeit-schnell) var(--kurve);
}

.kopf__telefon:hover {
    color: var(--led);
}

/* Menüknopf für schmale Schirme */
.kopf__schalter {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-mittel);
    color: var(--text-hell);
    transition: border-color var(--zeit-schnell) var(--kurve),
                color var(--zeit-schnell) var(--kurve);
}

.kopf__schalter:hover {
    border-color: var(--led);
    color: var(--led);
}

.kopf__schalter span,
.kopf__schalter span::before,
.kopf__schalter span::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--zeit-normal) var(--kurve),
                opacity var(--zeit-schnell) linear;
}

.kopf__schalter span::before { transform: translateY(-6px); }
.kopf__schalter span::after  { transform: translateY(4px); }

.kopf__schalter[aria-expanded='true'] span {
    background: transparent;
}

.kopf__schalter[aria-expanded='true'] span::before {
    transform: translateY(0) rotate(45deg);
}

.kopf__schalter[aria-expanded='true'] span::after {
    transform: translateY(-2px) rotate(-45deg);
}

@media (max-width: 62rem) {
    .kopf__schalter { display: flex; }

    .kopf__nav {
        position: fixed;
        inset: 4.75rem 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--a-4) var(--rand) var(--a-7);
        background: var(--nacht-000);
        border-bottom: 1px solid var(--nacht-400);
        transform: translateY(-120%);
        visibility: hidden;
        transition: transform var(--zeit-normal) var(--kurve),
                    visibility 0s linear var(--zeit-normal);
    }

    .kopf__nav[data-offen='ja'] {
        transform: translateY(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .kopf__link {
        padding: var(--a-4) var(--a-3);
        font-size: 1.125rem;
        border-bottom: 1px solid var(--nacht-200);
    }

    .kopf__link[aria-current='page']::before {
        transform: translate(0, -50%);
        left: calc(var(--a-3) * -0.5);
    }

    .kopf__telefon span { display: none; }
}

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--a-3);
    padding: 0.9375rem var(--a-6);
    font-family: var(--schrift-text);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: var(--r-mittel);
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--zeit-schnell) var(--kurve),
                box-shadow var(--zeit-normal) var(--kurve),
                background var(--zeit-normal) var(--kurve),
                border-color var(--zeit-normal) var(--kurve),
                color var(--zeit-schnell) var(--kurve);
}

.knopf:active {
    transform: translateY(1px);
}

.knopf--licht {
    background: var(--led);
    color: var(--text-auf-licht);
    box-shadow: var(--schein-mittel);
}

.knopf--licht:hover {
    color: var(--text-auf-licht);
    box-shadow: var(--schein-gross), var(--schein-mittel);
    transform: translateY(-2px);
}

.knopf--umriss {
    background: transparent;
    color: var(--text-hell);
    border: 1px solid var(--nacht-500);
}

.knopf--umriss:hover {
    color: var(--led);
    border-color: var(--led);
    box-shadow: var(--schein-klein);
    transform: translateY(-2px);
}

.knopf--gross {
    padding: 1.125rem var(--a-7);
    font-size: 1.0625rem;
}

.knopf__pfeil {
    transition: transform var(--zeit-normal) var(--kurve);
}

.knopf:hover .knopf__pfeil {
    transform: translateX(4px);
}

/* --- Karten -------------------------------------------------------------- */

.karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--a-3);
    padding: var(--a-6);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-gross);
    transition: border-color var(--zeit-normal) var(--kurve),
                background var(--zeit-normal) var(--kurve),
                transform var(--zeit-normal) var(--kurve);
}

.karte:hover {
    background: var(--nacht-300);
    border-color: color-mix(in oklab, var(--led) 40%, var(--nacht-400));
    transform: translateY(-3px);
}

.karte__nummer {
    font-family: var(--schrift-display);
    font-size: var(--t-klein);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--led);
}

.karte h3 {
    font-size: var(--t-h4);
}

.karte p {
    color: var(--text-normal);
    font-size: 0.96875rem;
}

.raster {
    display: grid;
    gap: var(--a-5);
}

.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* --- Bilder mit Leuchtkante ---------------------------------------------- */

/* Kernmotiv: Das Bild leuchtet aus dem Dunkeln heraus. Der Schein liegt
   nicht als Rahmen um das Bild, sondern als weiches Licht dahinter. */
.leuchtbild {
    position: relative;
    border-radius: var(--r-gross);
    overflow: hidden;
    border: 1px solid var(--nacht-400);
    isolation: isolate;
}

.leuchtbild::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 60px -30px color-mix(in oklab, var(--led) 70%, transparent);
    pointer-events: none;
}

.leuchtbild img {
    width: 100%;
    transition: transform var(--zeit-ruhig) var(--kurve);
}

.leuchtbild--zoom:hover img {
    transform: scale(1.03);
}

.leuchtrahmen {
    position: relative;
}

.leuchtrahmen::before {
    content: '';
    position: absolute;
    inset: -14%;
    background: radial-gradient(60% 55% at 50% 50%,
                color-mix(in oklab, var(--led) 26%, transparent) 0%,
                transparent 72%);
    filter: blur(28px);
    z-index: -1;
    pointer-events: none;
}

/* --- Fußzeile ------------------------------------------------------------ */

.fuss {
    position: relative;
    margin-top: var(--a-10);
    padding-block: var(--a-9) var(--a-6);
    background: var(--nacht-000);
    border-top: 1px solid var(--nacht-400);
}

/* Ein einzelner Lichtstreifen an der Oberkante — die Fusszeile bekommt
   dieselbe Leuchtkante wie die Kopfzeile beim Scrollen. */
.fuss::before {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--led), transparent);
    opacity: 0.55;
}

.fuss__raster {
    display: grid;
    gap: var(--a-7);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.fuss__spalte h4 {
    font-family: var(--schrift-text);
    font-size: var(--t-klein);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-bottom: var(--a-4);
}

.fuss__liste {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--a-3);
}

/* HARTE REGEL: Fußzeilen-Links ohne Unterstrich, nur Farbwechsel. */
.fuss a {
    color: var(--text-normal);
    text-decoration: none;
    font-size: 0.96875rem;
    transition: color var(--zeit-schnell) var(--kurve);
}

.fuss a:hover {
    color: var(--led);
}

.fuss__marke img {
    height: 2.75rem;
    width: auto;
    margin-bottom: var(--a-4);
}

.fuss__unten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--a-4);
    margin-top: var(--a-8);
    padding-top: var(--a-5);
    border-top: 1px solid var(--nacht-200);
    font-size: var(--t-klein);
    color: var(--text-leise);
}

.fuss__unten nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-5);
}

/* ===== 04-hero.css ===== */
/* ===========================================================================
   Kopfbereich — der erste Eindruck
   ---------------------------------------------------------------------------
   Bewusst asymmetrisch: Text links, Bild rechts versetzt und ueber die
   Abschnittskante hinausragend. Kein zentriertes Hero mit Button-Paar.
   =========================================================================== */

.hero {
    position: relative;
    padding-block: clamp(7rem, 14vh, 11rem) var(--a-10);
    overflow: hidden;
}

/* Der Lichtkegel hinter allem: die einzige Farbquelle auf der Seite. */
.hero::before {
    content: '';
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -15%;
    width: min(75vw, 60rem);
    aspect-ratio: 1;
    background: radial-gradient(circle,
                color-mix(in oklab, var(--led) 22%, transparent) 0%,
                color-mix(in oklab, var(--led) 6%, transparent) 42%,
                transparent 68%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* Feines Raster im Grund — gibt dem dunklen Raum Tiefe, ohne zu stoeren. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, color-mix(in oklab, var(--nacht-400) 55%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in oklab, var(--nacht-400) 55%, transparent) 1px, transparent 1px);
    background-size: 5rem 5rem;
    mask-image: radial-gradient(70% 60% at 30% 40%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, black 0%, transparent 75%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.hero__raster {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
}

@media (max-width: 60rem) {
    .hero__raster {
        grid-template-columns: 1fr;
    }
}

/* Die Schlagzeile: die groesste Type auf der Seite, eng gesetzt,
   mit einem Wort in der Leuchtfarbe. */
.hero__titel {
    font-size: var(--t-display);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-wrap: nowrap;
    color: var(--text-hell);
    margin-bottom: var(--a-5);
}

.hero__titel em {
    font-style: normal;
    color: var(--led);
    /* Der Text selbst leuchtet — dezent, sonst wird es kitschig. */
    text-shadow: 0 0 60px color-mix(in oklab, var(--led) 45%, transparent);
}

.hero__vorspann {
    font-size: var(--t-gross);
    color: var(--text-normal);
    max-width: 34rem;
    margin-bottom: var(--a-6);
    line-height: 1.55;
}

.hero__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-3);
    margin-bottom: var(--a-7);
}

/* Kennzahlen unter den Knoepfen: drei harte Fakten statt Marketing. */
.hero__fakten {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-top: var(--a-6);
    border-top: 1px solid var(--nacht-400);
    list-style: none;
    margin: 0;
}

.hero__fakt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero__fakt b {
    font-family: var(--schrift-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text-hell);
    letter-spacing: -0.02em;
}

.hero__fakt span {
    font-size: var(--t-klein);
    color: var(--text-leise);
    letter-spacing: 0.04em;
}

/* Das Bild ragt bewusst aus der Spalte heraus und bricht das Raster. */
.hero__bild {
    position: relative;
}

@media (min-width: 60.0625rem) {
    .hero__bild {
        margin-inline-end: calc(var(--rand) * -1);
    }
}

.hero__bild .leuchtbild {
    border-radius: var(--r-gross);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9),
                0 0 120px -50px color-mix(in oklab, var(--led) 60%, transparent);
}

/* Kleine Bildunterschrift, die am Bild klebt */
.hero__marke-bild {
    position: absolute;
    inset-block-end: var(--a-4);
    inset-inline-start: var(--a-4);
    display: inline-flex;
    align-items: center;
    gap: var(--a-2);
    padding: var(--a-2) var(--a-4);
    background: color-mix(in oklab, var(--nacht-000) 78%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in oklab, var(--led) 35%, transparent);
    border-radius: var(--r-rund);
    font-size: var(--t-klein);
    font-weight: 600;
    color: var(--text-hell);
    letter-spacing: 0.06em;
}

.hero__marke-bild::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--r-rund);
    background: var(--led);
    box-shadow: var(--schein-klein);
}

/* --- Seitenkopf der Unterseiten ------------------------------------------ */

.seitenkopf {
    position: relative;
    padding-block: clamp(7rem, 13vh, 9.5rem) var(--a-7);
    overflow: hidden;
    border-bottom: 1px solid var(--nacht-400);
}

.seitenkopf::before {
    content: '';
    position: absolute;
    inset-block-start: -55%;
    inset-inline-start: 50%;
    translate: -50% 0;
    width: min(95vw, 68rem);
    aspect-ratio: 2 / 1;
    background: radial-gradient(ellipse at center,
                color-mix(in oklab, var(--led) 16%, transparent) 0%,
                transparent 62%);
    filter: blur(50px);
    pointer-events: none;
}

.seitenkopf > * {
    position: relative;
    z-index: 1;
}

.seitenkopf h1 {
    max-width: 22ch;
    margin-bottom: var(--a-5);
}

/* Brotkrumen: reine Textpfade, kein Unterstrich */
.krumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a-2);
    margin-bottom: var(--a-5);
    font-size: var(--t-klein);
    color: var(--text-leise);
    list-style: none;
    padding: 0;
}

.krumen a {
    color: var(--text-leise);
}

.krumen a:hover {
    color: var(--led);
}

.krumen li + li::before {
    content: '/';
    margin-inline-end: var(--a-2);
    color: var(--nacht-500);
}

.krumen [aria-current='page'] {
    color: var(--text-normal);
}

/* ===== 05-abschnitte.css ===== */
/* ===========================================================================
   Abschnitts-Bausteine
   =========================================================================== */

/* --- Vorteilszeile: drei harte Fakten, keine Icon-Kacheln ---------------- */

.vorteile {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    background: var(--nacht-400);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-gross);
    overflow: hidden;
}

.vorteil {
    padding: var(--a-6);
    background: var(--nacht-100);
    transition: background var(--zeit-normal) var(--kurve);
}

.vorteil:hover {
    background: var(--nacht-200);
}

.vorteil h3 {
    display: flex;
    align-items: baseline;
    gap: var(--a-3);
    font-size: var(--t-h4);
    margin-bottom: var(--a-2);
}

.vorteil h3::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--r-rund);
    background: var(--led);
    box-shadow: var(--schein-klein);
}

.vorteil p {
    color: var(--text-normal);
    font-size: 0.96875rem;
}

/* --- Produktvorstellung: Bild und Text im Wechsel ------------------------ */

.produkt {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    align-items: center;
}

/* Jede zweite Vorstellung dreht die Reihenfolge um. */
.produkt--gedreht .produkt__bild {
    order: -1;
}

@media (max-width: 52rem) {
    .produkt--gedreht .produkt__bild {
        order: 0;
    }
}

/* Fliesstext nach einer Ueberschrift braucht Luft — im Produktblock steht
   die Ueberschrift ohne Zwischenelement direkt vor dem Absatz. */
.produkt__text > h2 + p,
.produkt__text > h3 + p {
    margin-top: var(--a-4);
}

.produkt__name {
    display: flex;
    align-items: baseline;
    gap: var(--a-4);
    margin-bottom: var(--a-4);
}

.produkt__name h3 {
    font-size: var(--t-h2);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.produkt__kennung {
    font-family: var(--schrift-text);
    font-size: var(--t-klein);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--led);
    white-space: nowrap;
}

.merkmale {
    list-style: none;
    padding: 0;
    margin: var(--a-5) 0;
    display: grid;
    gap: var(--a-3);
}

.merkmale li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--a-3);
    align-items: start;
    color: var(--text-normal);
}

.merkmale li::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-top: 0.42em;
    border-radius: var(--r-klein);
    border: 1px solid color-mix(in oklab, var(--led) 55%, transparent);
    background:
        linear-gradient(135deg, transparent 42%, var(--led) 42%, var(--led) 58%, transparent 58%),
        color-mix(in oklab, var(--led) 12%, transparent);
}

/* --- Preisangabe ---------------------------------------------------------- */

.preis {
    display: flex;
    align-items: baseline;
    gap: var(--a-2);
    font-family: var(--schrift-display);
    color: var(--text-hell);
}

.preis__ab {
    font-family: var(--schrift-text);
    font-size: var(--t-klein);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-leise);
}

.preis__wert {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.preis__einheit {
    font-family: var(--schrift-text);
    font-size: 0.9375rem;
    color: var(--text-leise);
}

/* --- Ablauf in Schritten -------------------------------------------------- */

.ablauf {
    display: grid;
    gap: var(--a-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    counter-reset: schritt;
    list-style: none;
    padding: 0;
}

.ablauf li {
    position: relative;
    counter-increment: schritt;
    padding-top: var(--a-6);
    border-top: 1px solid var(--nacht-400);
}

/* Die Nummer sitzt auf der Trennlinie und leuchtet. */
.ablauf li::before {
    content: counter(schritt, decimal-leading-zero);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translateY(-50%);
    padding-inline-end: var(--a-3);
    background: var(--nacht-100);
    font-family: var(--schrift-display);
    font-size: var(--t-klein);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--led);
}

.ablauf h3 {
    font-size: var(--t-h4);
    margin-bottom: var(--a-2);
}

.ablauf p {
    font-size: 0.96875rem;
}

/* --- Aufklappbare Fragen --------------------------------------------------- */

.fragen {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--nacht-400);
}

.frage {
    border-bottom: 1px solid var(--nacht-400);
}

.frage summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a-5);
    padding: var(--a-5) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--schrift-display);
    font-size: var(--t-h4);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-hell);
    transition: color var(--zeit-schnell) var(--kurve);
}

.frage summary::-webkit-details-marker {
    display: none;
}

.frage summary:hover {
    color: var(--led);
}

/* Plus-Zeichen, das sich beim Öffnen zum Minus dreht */
.frage__zeichen {
    position: relative;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.frage__zeichen::before,
.frage__zeichen::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--zeit-normal) var(--kurve);
}

.frage__zeichen::after {
    transform: rotate(90deg);
}

.frage[open] .frage__zeichen::after {
    transform: rotate(0deg);
}

.frage[open] summary {
    color: var(--led);
}

.frage__text {
    padding-bottom: var(--a-5);
    max-width: var(--breite-text);
    color: var(--text-normal);
}

.frage__text > * + * {
    margin-top: var(--a-3);
}

/* --- Aufforderungsband ----------------------------------------------------- */

.band {
    position: relative;
    padding-block: var(--a-9);
    background: var(--nacht-200);
    border-block: 1px solid var(--nacht-400);
    overflow: hidden;
}

.band::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    width: min(90vw, 60rem);
    aspect-ratio: 3 / 1;
    background: radial-gradient(ellipse at center,
                color-mix(in oklab, var(--led) 15%, transparent) 0%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}

.band__inhalt {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--a-6);
}

.band h2 {
    font-size: var(--t-h2);
    max-width: 20ch;
}

.band p {
    margin-top: var(--a-3);
    max-width: 40ch;
}

/* --- Bildergalerie ---------------------------------------------------------- */

.galerie {
    display: grid;
    gap: var(--a-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.galerie__feld {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-mittel);
    overflow: hidden;
    border: 1px solid var(--nacht-400);
    background: var(--nacht-200);
    cursor: zoom-in;
    transition: border-color var(--zeit-normal) var(--kurve);
}

.galerie__feld:hover {
    border-color: color-mix(in oklab, var(--led) 55%, transparent);
}

.galerie__feld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--zeit-ruhig) var(--kurve),
                opacity var(--zeit-normal) var(--kurve);
}

.galerie__feld:hover img {
    transform: scale(1.04);
}

/* Bilder, die das Raster sprengen — bricht die Monotonie der Kachelwand. */
.galerie__feld--breit {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}

.galerie__feld--hoch {
    grid-row: span 2;
    aspect-ratio: 1 / 2;
}

@media (max-width: 40rem) {
    .galerie__feld--breit,
    .galerie__feld--hoch {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 1;
    }
}

/* --- Ortsliste --------------------------------------------------------------- */

.orte {
    display: grid;
    gap: var(--a-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    list-style: none;
    padding: 0;
}

.ort {
    display: flex;
    flex-direction: column;
    gap: var(--a-2);
    padding: var(--a-5);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-gross);
    transition: border-color var(--zeit-normal) var(--kurve),
                transform var(--zeit-normal) var(--kurve);
}

.ort:hover {
    border-color: color-mix(in oklab, var(--led) 45%, var(--nacht-400));
    transform: translateY(-2px);
}

.ort h3 {
    font-size: var(--t-h4);
}

.ort p {
    font-size: 0.9375rem;
    color: var(--text-leise);
}

.ort__mehr {
    margin-top: auto;
    padding-top: var(--a-3);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--led);
}

/* --- Umkreisliste (reine Aufzählung vieler Orte) ------------------------------ */

.umkreis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-2);
    list-style: none;
    padding: 0;
}

.umkreis li {
    padding: var(--a-2) var(--a-4);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-rund);
    font-size: 0.9375rem;
    color: var(--text-normal);
}

/* ===== 06-lichtkasten.css ===== */
/* ===========================================================================
   Lichtkasten
   =========================================================================== */

.lichtkasten {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--a-4);
    padding: clamp(1rem, 4vw, 3rem);
    background: color-mix(in oklab, var(--nacht-000) 94%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--zeit-normal) var(--kurve),
                visibility 0s linear var(--zeit-normal);
}

.lichtkasten[data-offen='ja'] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.lichtkasten__rahmen {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--a-4);
    margin: 0;
    min-width: 0;
}

.lichtkasten__rahmen img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    border-radius: var(--r-mittel);
    /* Dasselbe Leuchten wie auf der Seite — das Bild schwebt im Dunkeln. */
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95),
                0 0 140px -60px color-mix(in oklab, var(--led) 70%, transparent);
}

.lichtkasten__rahmen figcaption {
    font-size: 0.9375rem;
    color: var(--text-normal);
    text-align: center;
    max-width: 44rem;
}

.lichtkasten__zu {
    position: absolute;
    inset-block-start: clamp(1rem, 3vw, 2rem);
    inset-inline-end: clamp(1rem, 3vw, 2rem);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--nacht-500);
    border-radius: var(--r-rund);
    color: var(--text-hell);
    background: color-mix(in oklab, var(--nacht-200) 80%, transparent);
    transition: color var(--zeit-schnell) var(--kurve),
                border-color var(--zeit-schnell) var(--kurve);
}

.lichtkasten__zu:hover {
    color: var(--led);
    border-color: var(--led);
}

.lichtkasten__pfeil {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--nacht-500);
    border-radius: var(--r-rund);
    color: var(--text-hell);
    background: color-mix(in oklab, var(--nacht-200) 80%, transparent);
    transition: color var(--zeit-schnell) var(--kurve),
                border-color var(--zeit-schnell) var(--kurve),
                box-shadow var(--zeit-normal) var(--kurve);
}

.lichtkasten__pfeil:hover {
    color: var(--led);
    border-color: var(--led);
    box-shadow: var(--schein-klein);
}

.lichtkasten__pfeil--zurueck { grid-column: 1; }
.lichtkasten__pfeil--vor { grid-column: 3; }

.lichtkasten__zaehler {
    position: absolute;
    inset-block-end: clamp(1rem, 3vw, 2rem);
    inset-inline: 0;
    text-align: center;
    font-family: var(--schrift-display);
    font-size: var(--t-klein);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--text-leise);
}

@media (max-width: 40rem) {
    .lichtkasten {
        grid-template-columns: 1fr;
        gap: var(--a-3);
    }

    .lichtkasten__rahmen {
        grid-column: 1;
    }

    .lichtkasten__pfeil--zurueck,
    .lichtkasten__pfeil--vor {
        position: absolute;
        inset-block-end: 4.5rem;
        grid-column: 1;
    }

    .lichtkasten__pfeil--zurueck { inset-inline-start: 25%; }
    .lichtkasten__pfeil--vor { inset-inline-end: 25%; }

    .lichtkasten__rahmen img { max-height: 62vh; }
}

/* ===== 07-konfigurator.css ===== */
/* ===========================================================================
   Bar-Konfigurator
   =========================================================================== */

.konf {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 64rem) {
    .konf {
        /* minmax(0, 1fr) statt 1fr: "1fr" ist kurz fuer minmax(auto, 1fr),
           und "auto" laesst die Spalte nicht unter die Mindestbreite ihres
           Inhalts schrumpfen — dadurch lief die Seite auf schmalen Schirmen
           ueber den Rand hinaus. */
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dieselbe Falle eine Ebene tiefer */
.konf__schritte,
.konf__schritt {
    min-width: 0;
}

/* --- Ein Schritt der Zusammenstellung ------------------------------------ */

.konf__schritt {
    padding-block: var(--a-6);
    border-top: 1px solid var(--nacht-400);
}

.konf__schritt:first-child {
    border-top: none;
    padding-top: 0;
}

.konf__frage {
    display: flex;
    align-items: baseline;
    gap: var(--a-3);
    margin-bottom: var(--a-5);
}

.konf__zahl {
    font-family: var(--schrift-display);
    font-size: var(--t-klein);
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--led);
}

/* Kein <fieldset>/<legend>: legend darf keine Ueberschrift enthalten, und
   die Umgehung ueber float hat auf schmalen Schirmen die folgenden Elemente
   verdraengt. Stattdessen div[role=group] + aria-labelledby. */
.konf__frage-text {
    font-family: var(--schrift-display);
    font-size: var(--t-h4);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text-hell);
}

/* --- Auswahlkacheln ------------------------------------------------------- */

.wahl {
    display: grid;
    gap: var(--a-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.wahl__feld {
    position: relative;
}

/* Der echte Radio-/Checkbox-Knopf bleibt bedienbar, liegt aber unsichtbar
   ueber der Kachel — so funktionieren Tastatur und Screenreader weiter. */
.wahl__feld input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.wahl__inhalt {
    display: flex;
    flex-direction: column;
    gap: var(--a-1);
    height: 100%;
    padding: var(--a-4) var(--a-5);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-mittel);
    transition: border-color var(--zeit-normal) var(--kurve),
                background var(--zeit-normal) var(--kurve),
                box-shadow var(--zeit-normal) var(--kurve);
}

.wahl__feld input:hover + .wahl__inhalt {
    border-color: var(--nacht-500);
    background: var(--nacht-300);
}

.wahl__feld input:checked + .wahl__inhalt {
    border-color: var(--led);
    background: color-mix(in oklab, var(--led) 9%, var(--nacht-200));
    box-shadow: var(--schein-klein);
}

.wahl__feld input:focus-visible + .wahl__inhalt {
    outline: 2px solid var(--led);
    outline-offset: 2px;
}

.wahl__name {
    font-family: var(--schrift-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text-hell);
    letter-spacing: -0.01em;
}

.wahl__zusatz {
    font-size: 0.875rem;
    color: var(--text-leise);
}

.wahl__preis {
    margin-top: auto;
    padding-top: var(--a-2);
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--led);
}

/* --- Zähler (Barkeeper, Servicekräfte) ------------------------------------ */

.zaehler {
    display: flex;
    align-items: center;
    gap: var(--a-4);
    padding: var(--a-4) var(--a-5);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-mittel);
}

.zaehler__text {
    flex: 1;
    min-width: 0;
}

.zaehler__name {
    display: block;
    font-family: var(--schrift-display);
    font-weight: 600;
    color: var(--text-hell);
}

.zaehler__zusatz {
    font-size: 0.875rem;
    color: var(--text-leise);
}

.zaehler input[type='number'] {
    width: 4.5rem;
    padding: var(--a-2) var(--a-3);
    text-align: center;
    background: var(--nacht-300);
    border: 1px solid var(--nacht-500);
    border-radius: var(--r-klein);
    color: var(--text-hell);
    font-family: var(--schrift-display);
    font-weight: 700;
}

.zaehler input[type='number']:focus-visible {
    border-color: var(--led);
}

/* --- Schalterzeile (Rückwand, Logistik, Pauschale) ------------------------ */

.schalter {
    display: flex;
    align-items: center;
    gap: var(--a-4);
    padding: var(--a-4) var(--a-5);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-mittel);
    cursor: pointer;
    transition: border-color var(--zeit-normal) var(--kurve);
}

.schalter:hover {
    border-color: var(--nacht-500);
}

.schalter:has(input:checked) {
    border-color: color-mix(in oklab, var(--led) 60%, transparent);
    background: color-mix(in oklab, var(--led) 7%, var(--nacht-200));
}

.schalter input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Kippschalter statt Standard-Häkchen */
.schalter__knebel {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--nacht-400);
    border-radius: var(--r-rund);
    transition: background var(--zeit-normal) var(--kurve);
}

.schalter__knebel::after {
    content: '';
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--text-leise);
    border-radius: var(--r-rund);
    transition: translate var(--zeit-normal) var(--kurve),
                background var(--zeit-normal) var(--kurve);
}

.schalter:has(input:checked) .schalter__knebel {
    background: color-mix(in oklab, var(--led) 35%, var(--nacht-400));
}

.schalter:has(input:checked) .schalter__knebel::after {
    translate: 1.25rem 0;
    background: var(--led);
    box-shadow: var(--schein-klein);
}

.schalter:has(input:focus-visible) .schalter__knebel {
    outline: 2px solid var(--led);
    outline-offset: 3px;
}

.schalter__text {
    flex: 1;
}

.schalter__name {
    display: block;
    font-family: var(--schrift-display);
    font-weight: 600;
    color: var(--text-hell);
}

.schalter__zusatz {
    font-size: 0.875rem;
    color: var(--text-leise);
}

.schalter__preis {
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--led);
    white-space: nowrap;
}

/* --- Gästezahl ------------------------------------------------------------ */

.gaeste {
    margin-top: var(--a-3);
    padding: var(--a-5);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-mittel);
}

.gaeste__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--a-4);
    margin-bottom: var(--a-4);
}

.gaeste__wert {
    font-family: var(--schrift-display);
    font-size: var(--t-h4);
    font-weight: 800;
    color: var(--led);
}

.gaeste input[type='range'] {
    width: 100%;
    accent-color: var(--led);
}

/* --- Die Rechnung: klebt beim Scrollen mit -------------------------------- */

.rechnung {
    position: sticky;
    top: 6rem;
    padding: var(--a-6);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-gross);
}

/* Leuchtkante oben auf der Rechnung — sie ist das Ergebnis der Seite. */
.rechnung::before {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--led), transparent);
}

.rechnung {
    position: sticky;
    isolation: isolate;
}

.rechnung__titel {
    font-family: var(--schrift-text);
    font-size: var(--t-klein);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-bottom: var(--a-5);
}

.rechnung__liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--a-4);
}

.rechnung__zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--a-4);
    padding-bottom: var(--a-4);
    border-bottom: 1px solid var(--nacht-300);
}

.rechnung__zeile:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rechnung__was {
    display: block;
    color: var(--text-hell);
    font-weight: 500;
    font-size: 0.96875rem;
}

.rechnung__hinweis {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.rechnung__betrag {
    font-family: var(--schrift-display);
    font-weight: 700;
    color: var(--text-hell);
    white-space: nowrap;
}

.rechnung__summe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--a-4);
    margin-top: var(--a-5);
    padding-top: var(--a-5);
    border-top: 1px solid var(--nacht-500);
}

.rechnung__summe dt {
    font-family: var(--schrift-display);
    font-size: var(--t-h4);
    font-weight: 600;
    color: var(--text-hell);
}

.rechnung__summe dd {
    margin: 0;
    font-family: var(--schrift-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--led);
    text-shadow: 0 0 40px color-mix(in oklab, var(--led) 40%, transparent);
}

.rechnung__fuss {
    margin-top: var(--a-3);
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.rechnung .knopf {
    width: 100%;
    margin-top: var(--a-5);
}

/* ===== 08-formular.css ===== */
/* ===========================================================================
   Formulare
   =========================================================================== */

.formular {
    display: grid;
    gap: var(--a-5);
}

.feld {
    display: flex;
    flex-direction: column;
    gap: var(--a-2);
}

.feld__paar {
    display: grid;
    gap: var(--a-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.feld label,
.feld > span:first-child {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-hell);
}

.feld__pflicht {
    color: var(--led);
}

.feld input,
.feld textarea,
.feld select {
    width: 100%;
    padding: 0.875rem var(--a-4);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-mittel);
    color: var(--text-hell);
    transition: border-color var(--zeit-schnell) var(--kurve),
                background var(--zeit-schnell) var(--kurve),
                box-shadow var(--zeit-normal) var(--kurve);
}

.feld input::placeholder,
.feld textarea::placeholder {
    color: var(--text-leise);
}

.feld input:hover,
.feld textarea:hover,
.feld select:hover {
    border-color: var(--nacht-500);
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
    outline: none;
    border-color: var(--led);
    background: var(--nacht-300);
    box-shadow: var(--schein-klein);
}

.feld textarea {
    min-height: 9rem;
    resize: vertical;
}

/* Browser-eigene Kalender- und Auswahlsymbole im dunklen Feld sichtbar halten */
.feld input[type='date'],
.feld input[type='time'] {
    color-scheme: dark;
}

.feld__hinweis {
    font-size: 0.8125rem;
    color: var(--text-leise);
}

/* Einwilligung */
.zustimmung {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--a-3);
    align-items: start;
    font-size: 0.9375rem;
    color: var(--text-normal);
    cursor: pointer;
}

.zustimmung input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.3em;
    accent-color: var(--led);
}

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots sichtbar.
   Nicht display:none — manche Bots ueberspringen versteckte Felder. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Kontaktangaben neben dem Formular ------------------------------------ */

.kontaktweg {
    display: flex;
    flex-direction: column;
    gap: var(--a-5);
    padding: var(--a-6);
    background: var(--nacht-200);
    border: 1px solid var(--nacht-400);
    border-radius: var(--r-gross);
}

.kontaktweg__zeile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--a-4);
    align-items: start;
}

.kontaktweg__symbol {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-mittel);
    border: 1px solid color-mix(in oklab, var(--led) 40%, transparent);
    background: color-mix(in oklab, var(--led) 10%, transparent);
    color: var(--led);
}

.kontaktweg__was {
    display: block;
    font-size: var(--t-klein);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-bottom: 2px;
}

.kontaktweg__wert {
    font-family: var(--schrift-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-hell);
}

a.kontaktweg__wert:hover {
    color: var(--led);
}