/* =========================================================================
   OpenSourceSignage – Projektseite
   -------------------------------------------------------------------------
   Der Gedanke hinter der Gestaltung: ein dunkler Raum, in dem Bildschirme
   leuchten. Genau das verkauft dieses Programm. Alles Helle auf dieser Seite
   ist deshalb eine Fläche, die Licht abgibt – die Bildschirme in der Wand,
   die Oberflächenbilder, die hellen Karten. Der Rest tritt zurück.

   Nichts wird von einem fremden Server geholt: Die Schriften liegen unter
   assets/schriften/, die Struktur der Bildschirmwand ist HTML und CSS statt
   eines Fotos. Dieselbe Regel wie in der Verwaltung selbst.
   ========================================================================= */

@font-face {
    font-family: 'Inter var';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('schriften/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('schriften/instrument-serif-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: dark;

    --kopfhoehe:   72px;
    --breite:      1200px;
    --breite-weit: 1400px;

    /* Grundtöne: der Raum */
    --nacht:       #07080f;
    --nacht-2:     #0b0d1a;
    --nacht-3:     #101324;

    /* Akzent: das Licht */
    --ton:         #6366f1;
    --ton-hell:    #a5b4fc;
    --ton-tief:    #4338ca;
    --violett:     #a855f7;
    --cyan:        #22d3ee;
    --gruen:       #34d399;
    --bernstein:   #fbbf24;

    /* Schrift auf dunklem Grund */
    --text:        #f4f5fb;
    --text-sanft:  #a9afc8;
    --text-blass:  #767d99;

    /* Flächen */
    --glas:        rgba(255, 255, 255, .035);
    --glas-stark:  rgba(255, 255, 255, .06);
    --kante:       rgba(255, 255, 255, .09);
    --kante-stark: rgba(255, 255, 255, .16);

    --radius:      18px;
    --radius-klein: 11px;
    --radius-gross: 28px;

    --schatten:      0 2px 8px rgba(0, 0, 0, .3);
    --schatten-hoch: 0 30px 70px -20px rgba(0, 0, 0, .75);
    --leuchten:      0 0 60px -12px rgba(99, 102, 241, .55);

    --verlauf: linear-gradient(115deg, var(--ton) 0%, var(--violett) 52%, var(--cyan) 100%);

    --schrift: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
    --schrift-zier: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --schrift-fest: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                    'Liberation Mono', monospace;

    /* Feines Korn. Ohne das wirkt jeder große Verlauf nach Software; mit
       ihm nach Fläche. Als Data-URI, damit keine Datei nachgeladen wird. */
    --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopfhoehe) + 20px); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--nacht);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Das Korn liegt über allem und nimmt nichts an. */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 9999;
    pointer-events: none; opacity: .028;
    background-image: var(--korn);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ton-hell); text-decoration: none; }
a:hover { color: #fff; }

:focus-visible {
    outline: 2px solid var(--ton-hell);
    outline-offset: 3px;
    border-radius: 4px;
}

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.huelle--weit { max-width: var(--breite-weit); }

.sprung {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: var(--ton); color: #fff; padding: 12px 20px;
    border-radius: 0 0 10px 0; font-weight: 600;
}
.sprung:focus { left: 0; }

.sr-nur {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Schrift -------------------------------------------------------------
   Große Größen laufen enger und schwerer; erst dadurch sieht eine Überschrift
   gesetzt aus und nicht nur größer gestellt. */

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 640;
    letter-spacing: -.022em;
    line-height: 1.1;
    text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 4.3vw, 3.75rem); letter-spacing: -.038em; font-weight: 680;
     margin-bottom: .45em; }
h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); letter-spacing: -.03em; }
h3 { font-size: 1.28rem; letter-spacing: -.018em; }
main > .band h2:not(.band__kopf h2) { margin-bottom: .5em; }
h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-blass); font-weight: 600; }
p  { margin: 0 0 1em; color: var(--text-sanft); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Das betonte Wort. Eine kursive Serife neben einer nüchternen Grotesk –
   der Unterschied trägt die Betonung, nicht eine weitere Farbe. */
.zier {
    font-family: var(--schrift-zier);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    background: linear-gradient(100deg, var(--ton-hell), var(--violett) 45%, var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .06em;
}

.gross { font-size: 1.16rem; line-height: 1.6; }

/* Kleine Marke über einer Überschrift */
.marke-klein {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .74rem; font-weight: 620; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ton-hell);
    margin-bottom: 18px;
}
.marke-klein__punkt {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gruen); box-shadow: 0 0 0 4px rgba(52, 211, 153, .16);
    animation: puls 2.6s ease-in-out infinite;
}
@keyframes puls {
    0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .16); }
    50%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, .05); }
}

/* --- Kopfleiste ---------------------------------------------------------- */

.kopf {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--kopfhoehe);
    display: flex; align-items: center;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    border-bottom: 1px solid transparent;
}
.kopf.ist-gescrollt {
    background: rgba(7, 8, 15, .72);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: var(--kante);
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.marke img { height: 26px; width: auto; }
.marke__dunkel { display: none; }

.kopf nav { display: flex; align-items: center; gap: 4px; }
.kopf nav a {
    padding: 8px 14px; border-radius: 9px;
    font-size: .93rem; font-weight: 500; color: var(--text-sanft);
    transition: color .18s ease, background .18s ease;
}
.kopf nav a:hover { color: var(--text); background: var(--glas-stark); }

.kopf__knopf { margin-left: 6px; }

@media (max-width: 900px) {
    .kopf nav a:not(.kopf__knopf) { display: none; }
}

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

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 26px; border-radius: 999px;
    font-size: .98rem; font-weight: 600; letter-spacing: -.01em;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease,
                background .22s ease, border-color .22s ease;
    white-space: nowrap;
}
.knopf svg { width: 18px; height: 18px; flex: 0 0 auto; }
.knopf:active { transform: translateY(1px) scale(.99); }

.knopf--voll {
    color: #fff;
    background: linear-gradient(180deg, #6f72f6, var(--ton) 55%, #4f46e5);
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset,
                0 12px 34px -10px rgba(99, 102, 241, .85);
}
.knopf--voll:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,.34) inset,
                0 20px 46px -12px rgba(99, 102, 241, .95);
}

.knopf--glas {
    color: var(--text);
    background: var(--glas-stark);
    border-color: var(--kante-stark);
    backdrop-filter: blur(8px);
}
.knopf--glas:hover { color: #fff; background: rgba(255,255,255,.1); transform: translateY(-2px); }

.knopf--hell {
    color: #101324; background: #fff;
    box-shadow: 0 12px 34px -12px rgba(255, 255, 255, .5);
}
.knopf--hell:hover { color: #101324; transform: translateY(-2px); }

.knopf--klein { padding: 9px 18px; font-size: .9rem; }

/* --- Bühne (Kopfbereich) ------------------------------------------------- */

.buehne {
    position: relative;
    padding: calc(var(--kopfhoehe) + 76px) 0 64px;
    overflow: hidden;
    isolation: isolate;
}

/* Der Raum: mehrere weiche Lichtquellen statt eines Verlaufs. Ein einzelner
   Verlauf ist eine Richtung; mehrere Quellen sind ein Raum. */
.buehne__licht {
    position: absolute; inset: -20% -10% 0; z-index: -2;
    background:
        radial-gradient(60% 50% at 18% 8%,  rgba(99, 102, 241, .40), transparent 70%),
        radial-gradient(48% 44% at 82% 4%,  rgba(168, 85, 247, .30), transparent 70%),
        radial-gradient(52% 46% at 62% 52%, rgba(34, 211, 238, .16), transparent 70%),
        radial-gradient(70% 60% at 50% 100%, rgba(11, 13, 26, .9), transparent 70%);
    filter: blur(6px);
}

/* Ein Lichtfleck, der dem Zeiger folgt – von JS gesetzt, ohne JS unsichtbar. */
.buehne__folge {
    position: absolute; inset: 0; z-index: -2; opacity: 0;
    transition: opacity .6s ease;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 40%),
                rgba(165, 180, 252, .16), transparent 65%);
}
.js .buehne:hover .buehne__folge { opacity: 1; }

/* Raster wie eine Deckenkonstruktion, nach unten ausgeblendet */
.buehne__raster {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}

.buehne__innen {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: 48px; align-items: center;
}
@media (max-width: 1080px) {
    .buehne__innen { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}

.buehne__text { max-width: 700px; }
.buehne h1 { margin-bottom: 24px; }
.buehne__text > .gross { max-width: 33em; margin-bottom: 34px; }

.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.buehne__hinweis {
    font-size: .9rem; color: var(--text-blass);
    display: flex; align-items: center; gap: 9px;
}
.buehne__hinweis svg { width: 16px; height: 16px; color: var(--gruen); flex: 0 0 auto; }

/* Wechselnde Orte in der Überschrift */
.wechsel {
    display: inline-grid; vertical-align: bottom; text-align: left;
}
.wechsel > span {
    grid-area: 1 / 1;
    opacity: 0; transform: translateY(.32em);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
    font-family: var(--schrift-zier); font-style: italic; font-weight: 400;
    background: linear-gradient(100deg, var(--ton-hell), var(--violett) 55%, var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    white-space: nowrap;
}
.wechsel > span.ist-da { opacity: 1; transform: none; }
/* Ohne JS steht das erste Wort einfach da. */
html:not(.js) .wechsel > span:first-child { opacity: 1; transform: none; }
html:not(.js) .wechsel > span:not(:first-child) { display: none; }

/* --- Die Bildschirmwand --------------------------------------------------
   Kein Foto, sondern gebaute Bildschirme: Sie sind gestochen scharf, sie
   bewegen sich, und der Inhalt darin ist derselbe, den das Programm auf ein
   Display bringt. Ein Stockfoto könnte das alles nicht. */

.wand {
    position: relative;
    perspective: 1700px;
    perspective-origin: 62% 42%;
    min-height: 520px;
}
@media (max-width: 1080px) { .wand { min-height: 420px; } }
@media (max-width: 620px)  { .wand { min-height: 340px; } }

.schirm {
    position: absolute;
    border-radius: 12px;
    background: #0a0c16;
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px;
    box-shadow: var(--schatten-hoch), 0 0 0 1px rgba(0,0,0,.5);
    transform-style: preserve-3d;
    animation: schweben 9s ease-in-out infinite;
}
.schirm::after {  /* Glasreflex */
    content: ''; position: absolute; inset: 0; border-radius: 12px;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(255,255,255,.13) 0%, transparent 42%);
}
.schirm__glas {
    position: relative; overflow: hidden;
    border-radius: 7px; height: 100%;
    background: #0d1020;
}

@keyframes schweben {
    0%, 100% { translate: 0 var(--versatz, 0px); }
    50%      { translate: 0 calc(var(--versatz, 0px) - 12px); }
}

/* Der große in der Mitte */
.schirm--haupt {
    left: 4%; top: 6%; width: 74%; aspect-ratio: 16 / 9;
    transform: rotateY(-11deg) rotateX(3deg);
    z-index: 3;
}
/* Das Türschild, hochkant, rechts davor */
.schirm--schild {
    right: 0; top: 38%; width: 24%; aspect-ratio: 10 / 16;
    transform: rotateY(-14deg) rotateX(2deg);
    z-index: 4;
    animation-delay: -3s;
}
/* Ein kleiner Bildschirm hinten links */
.schirm--klein {
    left: 6%; bottom: 2%; width: 44%; aspect-ratio: 16 / 10;
    transform: rotateY(-9deg) rotateX(4deg);
    z-index: 2;
    animation-delay: -5.5s;
}

/* Jeder Bildschirm wirft Licht an die Wand */
.schirm__schein {
    position: absolute; inset: 8% 6%; z-index: -1;
    border-radius: 50%; filter: blur(46px); opacity: .5;
    background: var(--verlauf);
}

@media (max-width: 620px) {
    .schirm--haupt { width: 88%; left: 0; }
    .schirm--schild { width: 30%; }
    .schirm--klein { width: 48%; }
}

/* Inhalt eines Bildschirms – die Bildsprache des Players */
.tafel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 7%;
    background: linear-gradient(160deg, #131735, #0b0e1e 70%);
    opacity: 0; transition: opacity .8s ease;
    container-type: inline-size;
}
.tafel.ist-da { opacity: 1; }
html:not(.js) .tafel:first-of-type { opacity: 1; }

.tafel__uhr {
    position: absolute; top: 6%; right: 7%;
    font-variant-numeric: tabular-nums;
    font-size: 7cqw; font-weight: 500; color: rgba(190, 200, 240, .85);
    letter-spacing: -.02em;
}
.tafel__titel {
    font-size: 12cqw; font-weight: 700; letter-spacing: -.03em;
    line-height: 1.05; color: #fff; margin: auto 0 0;
}
.tafel__satz { font-size: 6cqw; color: #9fb0e8; margin: 2cqw 0 auto; }

/* Laufband unten auf dem Bildschirm */
.tafel__band {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(99, 102, 241, .92);
    color: #fff; font-size: 4.6cqw; font-weight: 600;
    padding: 2cqw 0; overflow: hidden; white-space: nowrap;
}
.tafel__band span { display: inline-block; padding-left: 100%; animation: bandlauf 14s linear infinite; }
@keyframes bandlauf { to { transform: translateX(-100%); } }

/* Eine Liste, wie sie auf einem Speiseplan steht */
.tafel__liste { margin: auto 0 0; display: grid; gap: 3cqw; }
.tafel__zeile { display: flex; align-items: baseline; gap: 4cqw; font-size: 5.4cqw; }
.tafel__zeile b { color: #fff; font-weight: 600; }
.tafel__zeile span { color: #93a3d8; margin-left: auto; font-variant-numeric: tabular-nums; }

/* Türschild */
.schild {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 9%; container-type: inline-size;
    background: linear-gradient(165deg, #0f7a52, #0a5c3e 70%);
    transition: background .9s ease;
}
.schild.ist-belegt { background: linear-gradient(165deg, #9a2f3c, #6f1f2a 70%); }
.schild__raum { font-size: 11cqw; font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1.05; }
.schild__nr { font-size: 6cqw; color: rgba(255,255,255,.72); margin-top: 1cqw; }
.schild__lage {
    margin: auto 0 0; font-size: 13cqw; font-weight: 700; color: #fff;
    letter-spacing: -.04em; line-height: 1;
}
.schild__termin { font-size: 5.6cqw; color: rgba(255,255,255,.8); margin-top: 2cqw; }
.schild__leiste { display: flex; gap: 1.4cqw; margin-top: 5cqw; }
.schild__leiste i { flex: 1; height: 3cqw; border-radius: 99px; background: rgba(255,255,255,.26); }
.schild__leiste i.ist-voll { background: rgba(255,255,255,.9); }

/* --- Vertrauensband ------------------------------------------------------ */

.laufband {
    position: relative; overflow: hidden;
    padding: 22px 0;
    border-top: 1px solid var(--kante); border-bottom: 1px solid var(--kante);
    background: rgba(255,255,255,.015);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.laufband__spur { display: flex; width: max-content; animation: spur 46s linear infinite; }
.laufband__satz { display: flex; gap: 46px; padding-right: 46px; }
.laufband__satz span {
    font-size: .88rem; font-weight: 500; letter-spacing: .04em;
    color: var(--text-blass); white-space: nowrap;
    display: flex; align-items: center; gap: 12px;
}
.laufband__satz span::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--ton); opacity: .7;
}
@keyframes spur { to { transform: translateX(-50%); } }

/* --- Bänder (Abschnitte) ------------------------------------------------- */

.band { position: relative; padding: 96px 0; isolation: isolate; }
/* Jeder Abschnitt hat seine eigene Lichtquelle, sonst wird die Seite nach
   unten hin zu einem gleichmäßigen Schwarz. */
.band::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 44% at 78% 12%, rgba(99,102,241,.13), transparent 70%);
}
.band:nth-of-type(even)::after {
    background: radial-gradient(58% 42% at 20% 16%, rgba(168,85,247,.12), transparent 70%);
}
.band--sanft { background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.022) 18%, rgba(255,255,255,.022) 82%, transparent); }
.band--dunkel { background: linear-gradient(180deg, var(--nacht-2), var(--nacht)); }

/* Eine Lichtnaht zwischen zwei Abschnitten statt einer Linie */
.band--naht::before {
    content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(165,180,252,.4), transparent);
}

.band__kopf { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.band__kopf p { font-size: 1.1rem; margin-top: 20px; }
.band__kopf--links { margin-left: 0; text-align: left; }

/* --- Bento-Raster --------------------------------------------------------
   Gleich große Kacheln nebeneinander sind die sichere Wahl und sehen nach
   Vorlage aus. Verschieden große sagen, was wichtig ist. */

.bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
.bento > * { grid-column: span 2; }
.bento__gross { grid-column: span 4; }
.bento__halb  { grid-column: span 3; }
@media (max-width: 980px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento > * { grid-column: span 1; }
    .bento__gross, .bento__halb { grid-column: span 2; }
}
@media (max-width: 620px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento > *, .bento__gross, .bento__halb { grid-column: span 1; }
}

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

.karte {
    position: relative; overflow: hidden;
    padding: 30px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.022));
    border: 1px solid var(--kante);
    transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .3s ease;
}
/* Beim Zeigen legt sich Licht auf die Karte – dieselbe Farbe wie im Raum. */
.karte::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(70% 90% at 50% 0%, rgba(99,102,241,.20), transparent 70%);
}
.karte:hover::after { opacity: 1; }
/* Eine Lichtkante oben – als läge Licht von schräg oben darauf. */
.karte::before {
    content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.karte:hover {
    transform: translateY(-4px);
    border-color: rgba(165, 180, 252, .3);
    box-shadow: 0 24px 50px -24px rgba(0,0,0,.9);
}
.karte h3, .karte p { position: relative; z-index: 1; }
.karte h3 { margin-bottom: 12px; }
.karte p { font-size: .98rem; margin-bottom: 0; }

.karte__zeichen {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; margin-bottom: 20px;
    background: linear-gradient(160deg, rgba(99,102,241,.3), rgba(168,85,247,.14));
    border: 1px solid rgba(165,180,252,.22);
    color: var(--ton-hell);
}
.karte__zeichen svg { width: 22px; height: 22px; }

/* --- Zahlen -------------------------------------------------------------- */

.zahlen {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px; margin: 0;
}
@media (max-width: 800px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahlen > div {
    padding: 26px 24px; border-radius: var(--radius);
    background: var(--glas); border: 1px solid var(--kante);
    text-align: center;
}
.zahlen dt {
    font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 680; letter-spacing: -.04em;
    background: linear-gradient(160deg, #fff, var(--ton-hell));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
}
.zahlen dd { margin: 8px 0 0; font-size: .9rem; color: var(--text-blass); line-height: 1.45; }

/* --- Wechselreihen ------------------------------------------------------- */

.reihe {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 60px; align-items: center;
    margin-bottom: 92px;
}
.reihe:last-child { margin-bottom: 0; }
.reihe--gedreht .reihe__bild { order: -1; }
@media (max-width: 900px) {
    .reihe { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-bottom: 72px; }
    .reihe--gedreht .reihe__bild { order: 0; }
}
.reihe h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 16px; letter-spacing: -.026em; }

/* Ein Oberflächenbild ist auf dieser Seite ein leuchtender Bildschirm:
   Rahmen, Reflex, Schein an der Wand. */
.reihe__bild { position: relative; }
.reihe__bild img {
    width: 100%; border-radius: 14px;
    border: 1px solid var(--kante-stark);
    box-shadow: var(--schatten-hoch);
}
/* Ein sehr hohes Bild – etwa ein ganzes Formular – würde die Reihe sprengen
   und wäre dabei unlesbar klein. Es wird oben angeschnitten und unten weich
   ausgeblendet: Das sagt „hier geht es weiter“, statt es zu verstecken. */
.reihe__bild--hoch img {
    max-height: 520px; object-fit: cover; object-position: top center;
    mask-image: linear-gradient(180deg, #000 72%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    border-bottom: 0;
}
.reihe__bild::before {
    content: ''; position: absolute; inset: 12% 8%; z-index: -1;
    background: var(--verlauf); filter: blur(60px); opacity: .35; border-radius: 50%;
}

.punkte { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.punkte li {
    display: flex; gap: 13px; align-items: flex-start;
    font-size: .98rem; color: var(--text-sanft);
}
.punkte svg { width: 17px; height: 17px; color: var(--gruen); flex: 0 0 auto; margin-top: 4px; }

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

.fragen { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.frage {
    border-radius: var(--radius-klein);
    background: var(--glas); border: 1px solid var(--kante);
    transition: border-color .25s ease, background .25s ease;
}
.frage[open], .frage:hover { border-color: var(--kante-stark); background: var(--glas-stark); }
.frage summary {
    cursor: pointer; list-style: none;
    padding: 20px 24px; font-weight: 600; font-size: 1.03rem;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
    content: ''; flex: 0 0 auto; width: 11px; height: 11px;
    border-right: 2px solid var(--text-blass); border-bottom: 2px solid var(--text-blass);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
}
.frage[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.frage__text { padding: 0 24px 22px; }
.frage__text p { font-size: .99rem; margin: 0; }

/* --- Aufruf -------------------------------------------------------------- */

.aufruf {
    position: relative; overflow: hidden;
    text-align: center; padding: 76px 40px;
    border-radius: var(--radius-gross);
    border: 1px solid var(--kante-stark);
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(99,102,241,.35), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.aufruf::before {
    content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.aufruf p { font-size: 1.12rem; max-width: 44ch; margin: 20px auto 32px; }

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

.fuss {
    padding: 76px 0 34px;
    border-top: 1px solid var(--kante);
    background: var(--nacht-2);
}
.fuss__raster {
    display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 40px; margin-bottom: 52px;
}
@media (max-width: 820px) { .fuss__raster { grid-template-columns: 1fr 1fr; gap: 34px; } }
.fuss__marke img { height: 26px; width: auto; margin-bottom: 18px; }
.fuss__satz { font-size: .93rem; color: var(--text-blass); max-width: 32ch; }
.fuss h4 { margin-bottom: 16px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.fuss ul a { font-size: .93rem; color: var(--text-sanft); }
.fuss ul a:hover { color: #fff; }
.fuss__unten {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
    padding-top: 26px; border-top: 1px solid var(--kante);
    font-size: .85rem; color: var(--text-blass);
}

/* --- Auftauchen beim Scrollen -------------------------------------------- */

.js .auf-blick {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}
.js .auf-blick.ist-da { opacity: 1; transform: none; }

/* --- Inhaltsseiten (Installation, Impressum, Datenschutz) ---------------- */

.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: 1.5rem; margin: 44px 0 14px; }
.rechtstext h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.rechtstext p, .rechtstext li { color: var(--text-sanft); }
.rechtstext ul, .rechtstext ol { padding-left: 22px; display: grid; gap: 8px; margin: 16px 0; }
.rechtstext a { text-decoration: underline; text-underline-offset: 3px; }

.hinweis-kasten {
    padding: 22px 26px; border-radius: var(--radius-klein);
    background: rgba(99,102,241,.1); border: 1px solid rgba(165,180,252,.24);
    margin: 26px 0;
}
.hinweis-kasten p:last-child { margin-bottom: 0; }

.schritte { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 18px; }
.schritt {
    counter-increment: s; position: relative;
    padding: 26px 30px 26px 72px; border-radius: var(--radius);
    background: var(--glas); border: 1px solid var(--kante);
}
.schritt::before {
    content: counter(s);
    position: absolute; left: 26px; top: 26px;
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(160deg, rgba(99,102,241,.35), rgba(168,85,247,.18));
    border: 1px solid rgba(165,180,252,.28);
    font-size: .92rem; font-weight: 680; color: var(--ton-hell);
}
.schritt h3 { margin-bottom: 10px; }

.tabelle-huelle { overflow-x: auto; margin: 22px 0; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
.tabelle th, .tabelle td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--kante); }
.tabelle th { font-weight: 620; color: var(--text); font-size: .84rem;
              text-transform: uppercase; letter-spacing: .07em; }
.tabelle td { color: var(--text-sanft); }

code, kbd, .fest { font-family: var(--schrift-fest); font-size: .92em; }
.rechtstext code, .schritt code {
    background: rgba(255,255,255,.07); border: 1px solid var(--kante);
    padding: 2px 7px; border-radius: 6px; color: var(--ton-hell);
}
pre {
    background: #0a0c17; border: 1px solid var(--kante);
    border-radius: var(--radius-klein); padding: 20px 22px;
    overflow-x: auto; font-family: var(--schrift-fest); font-size: .88rem;
    color: var(--text-sanft); line-height: 1.6;
}

.mitte { text-align: center; }
.platzhalter { color: var(--bernstein); font-weight: 600; }

/* Seitenkopf einer Unterseite */
.seitenkopf {
    position: relative; overflow: hidden;
    padding: calc(var(--kopfhoehe) + 76px) 0 60px;
}
.seitenkopf::before {
    content: ''; position: absolute; inset: -40% 0 40%; z-index: -1;
    background: radial-gradient(50% 60% at 30% 60%, rgba(99,102,241,.3), transparent 70%);
}
.seitenkopf h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 18px; }
.seitenkopf p { font-size: 1.1rem; max-width: 62ch; }

/* --- Türschild als Schaustück -------------------------------------------
   In der Reihe zum Türschild steht kein Oberflächenbild, sondern das Schild
   selbst: Es springt von frei auf belegt, wie es das am Raum auch tut. Ein
   Standbild könnte das nur behaupten. */

.geraet {
    position: relative;
    width: 100%; max-width: 340px; margin: 0 auto;
    aspect-ratio: 10 / 16;
    border-radius: 22px; padding: 10px;
    background: linear-gradient(160deg, #23273c, #0d0f1c);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--schatten-hoch);
}
.geraet::after {
    content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
    background: linear-gradient(150deg, rgba(255,255,255,.14) 0%, transparent 40%);
}
.geraet::before {
    content: ''; position: absolute; inset: 12% 8%; z-index: -1;
    background: var(--verlauf); filter: blur(56px); opacity: .4; border-radius: 50%;
}
.geraet__glas {
    position: relative; height: 100%; overflow: hidden;
    border-radius: 14px; background: #0d1020;
}
.geraet__fuss {
    position: absolute; left: 50%; bottom: -26px; translate: -50% 0;
    width: 54%; height: 26px;
    background: linear-gradient(180deg, rgba(165,180,252,.22), transparent);
    filter: blur(8px);
}

/* Der kleine Bildschirm zeigt die Verwaltung. Ganz hineingelegt wäre sie bei
   dieser Größe nur ein Muster – deshalb ein Ausschnitt in Lesegröße statt der
   ganzen Seite in Briefmarkengröße. */
.schirm--klein .schirm__glas img {
    width: 190%; max-width: none; height: auto;
}