/* ──────────────────────────────────────────────────────────────
   start.css — öffentliche Startseite (Planschrank)
   Erbt alle Farben, Radien und Schriften aus secudraw.css.
   Eigene Klassen tragen das Präfix st-, damit nichts kollidiert.
   ────────────────────────────────────────────────────────────── */

/* secudraw.css sperrt html und body auf Vollbildhöhe ohne Überlauf – richtig für die
   App, falsch für ein Dokument. Diese Seite scrollt. */
html {
    height: auto;
    overflow: visible;
}
body.st-page {
    height: auto;
    min-height: 100%;
    overflow: visible;
    position: static;
    /* Der App-Wert #86868B liegt bei 3,6:1 – für eine öffentliche Lesefläche zu schwach.
       #6E6E73 erreicht 5,1:1 auf Weiß und ist die Farbe, die das Schriftfeld ohnehin nutzt. */
    --sd-text-sec: #6E6E73;
    background: var(--sd-bg);
    background-image: var(--sd-grid);
    background-size: var(--sd-grid-size);
    color: var(--sd-text);
    font-family: var(--sd-font);
    margin: 0;
}

/* ── Kopfleiste ─────────────────────────────────────────── */
.st-head {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px max(20px, 3vw);
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: var(--sd-toolbar-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--sd-border);
}
.st-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--sd-text);
    font-family: var(--sd-brand-font);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.st-brand img { display: block; }
.st-head-spacer { flex: 1; }
.st-head-link {
    color: var(--sd-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 980px;
}
.st-head-link:hover { background: rgba(0, 0, 0, 0.05); }

/* ── Bühne: Reiterschiene + Blattstapel ─────────────────── */
/* Die Schiene liegt fest am Fensterrand und damit außerhalb dieser Bühne –
   sie braucht keine eigene Rasterspalte mehr, nur genug Luft nach links. */
.st-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px max(16px, 2vw) 72px;
}
/* Der aktive Reiter ist 130 px breit und beginnt am Fensterrand. Mit 10 px Luft
   muss das Blatt bei 140 px beginnen – das schafft der zentrierte Rand erst ab
   1600 px Fensterbreite (1320 Bühne + zweimal 140). Darunter rückt die Bühne ein. */
@media (max-width: 1600px) {
    .st-stage { padding-left: 140px; }
}

/* Am linken Fensterrand, nicht am Rand der zentrierten Bühne. Die Rasterspalte
   bleibt trotzdem stehen: Auf schmalen Fenstern liegt die Schiene genau darin,
   auf breiten wandert sie nach außen – so überdeckt sie nie ein Blatt. */
.st-rail {
    position: fixed;
    left: 0;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    z-index: 15;
}
.st-tab {
    display: block;
    /* Blattkante, die aus dem Fensterrand ragt: links angeschnitten, rechts
       gerundet – keine freistehende Pille. */
    width: 112px;
    padding: 11px 11px 11px 8px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-left: none;
    border-radius: 0 var(--sd-radius) var(--sd-radius) 0;
    box-shadow: var(--sd-shadow);
    text-decoration: none;
    color: var(--sd-text-sec);
    transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease, background 0.18s ease;
}
.st-tab b {
    display: block;
    font-family: var(--sd-font);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.st-tab span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.25;
}
/* Alle Reiter bleiben am Fensterrand bündig – der aktive streckt sich nach rechts.
   Kein Versatz: sonst löste sich seine linke Kante vom Rand und er läse als
   schwebende Pille statt als angeschnittene Blattkante. */
.st-tab:hover { width: 120px; color: var(--sd-text); }
.st-tab:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.st-tab.is-active {
    width: 130px;
    background: var(--sd-accent);
    border-color: var(--sd-accent);
    color: #fff;
}

/* ── Das Blatt ──────────────────────────────────────────── */
/* Blätter mit Luft dazwischen – sie liegen nebeneinander im Schrank, nicht gestapelt. */
.st-sheets { display: flex; flex-direction: column; gap: 26px; min-width: 0; position: relative; z-index: 1; }

.st-sheet {
    position: relative;
    background: var(--sd-surface);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.10);
    scroll-margin-top: 92px;
    /* Papier hat keine runden Ecken */
    border-radius: 0;
}
.st-sheet-inner {
    border: 1.5px solid var(--sd-text);
    margin: 14px;
    padding: clamp(22px, 3.4vw, 46px);
    min-height: 0;
}
.st-sheet-no {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--sd-text-sec);
    letter-spacing: 0.06em;
}

/* ── Typografie ─────────────────────────────────────────── */
.st-title {
    font-family: var(--sd-brand-font);
    font-size: clamp(32px, 4.8vw, 62px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin: 0;
}
.st-lead {
    margin: 18px 0 0;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.55;
    color: var(--sd-text-sec);
    max-width: 46ch;
}
.st-h2 {
    font-family: var(--sd-brand-font);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: balance;
    margin: 0;
}
.st-body {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--sd-text-sec);
    max-width: 62ch;
}
.st-body strong { color: var(--sd-text); font-weight: 600; }

/* ── Handlung ───────────────────────────────────────────── */
.st-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}
.st-cta {
    padding: 13px 26px;
    font-size: 15.5px;
    font-weight: 600;
    border-radius: 980px;
    background: var(--sd-accent);
    color: #fff;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.st-cta:hover { background: var(--sd-accent-hover); transform: translateY(-1px); }
.st-cta:focus-visible { outline: 2px solid var(--sd-text); outline-offset: 3px; }
.st-note { font-size: 13.5px; color: var(--sd-text-sec); }

/* ── Blatt 01: Überschrift links, Zeichnung rechts ──────── */
.st-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    gap: clamp(24px, 3.5vw, 52px);
    align-items: center;
}
.st-figure { min-width: 0; }
.st-figure svg { display: block; width: 100%; height: auto; }
.st-caption {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--sd-text-sec);
    letter-spacing: 0.01em;
}

/* ── Der Anlass: wann jemand das braucht ────────────────── */
.st-occasions {
    list-style: none;
    margin: clamp(26px, 3vw, 40px) 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--sd-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(14px, 2vw, 30px);
}
.st-occasions li {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--sd-text-sec);
}
.st-occasions b { color: var(--sd-text); font-weight: 600; }

/* ── Der Moment: Schriftfeld hebt sich ab ───────────────── */
/* Endlosschleife: abheben, halten, zurücklegen, Pause. Hub von knapp der halben
   Blockhöhe – darunter liest es als Versatz, nicht als Abheben. */
.st-lift {
    transform-origin: 62% 76%;
    animation: st-lift 6s cubic-bezier(0.16, 1, 0.3, 1) 600ms infinite;
}
@keyframes st-lift {
    0%, 8%    { transform: translate(0, 0) rotate(0deg); }
    30%, 68%  { transform: translate(30px, -70px) rotate(-2.4deg); }
    90%, 100% { transform: translate(0, 0) rotate(0deg); }
}
.st-gap {
    opacity: 0;
    animation: st-gap 6s ease 600ms infinite;
}
@keyframes st-gap {
    0%, 10%   { opacity: 0; }
    32%, 66%  { opacity: 1; }
    88%, 100% { opacity: 0; }
}
/* Der abgehobene Block trägt einen SVG-Weichzeichner. Einmal abspielen kostete
   nichts; endlos würde er dauerhaft neu gerastert. Außerhalb des Bildes steht die
   Schleife deshalb still. */
.st-figure.is-paused .st-lift,
.st-figure.is-paused .st-gap { animation-play-state: paused; }

/* ── Blatt 02: Ebenenliste ──────────────────────────────── */
.st-split {
    display: grid;
    grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
    margin-top: 28px;
}
.st-layers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sd-border); }
.st-layer {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--sd-border);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--sd-text);
    text-align: left;
    cursor: pointer;
}
.st-layer:hover { background: rgba(0, 0, 0, 0.02); }
.st-layer:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: -2px; }
.st-switch {
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 980px;
    background: var(--sd-accent);
    position: relative;
    transition: background 0.18s ease;
}
.st-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.st-layer[aria-pressed="false"] .st-switch { background: #D2D2D7; }
.st-layer[aria-pressed="false"] .st-switch::after { left: 2px; }
.st-layer[aria-pressed="false"] .st-layer-name { color: var(--sd-text-sec); }
.st-layer-name { flex: 1; }
.st-layer-count {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--sd-text-sec);
}
.st-hint {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--sd-text-sec);
    line-height: 1.5;
}

/* geschaltete Ebenen im SVG */
[data-layer] { transition: opacity 0.3s ease; }
[data-layer].is-off { opacity: 0.08; }

/* Einzelne Elemente anklicken – wie im Werkzeug: erster Klick blendet ab,
   der zweite holt zurück. Nur in der Demo auf Blatt 02, nicht im Held. */
#stDemo [data-el] { transition: opacity 0.25s ease; cursor: pointer; }
#stDemo [data-el].is-off { opacity: 0.08; }
#stDemo [data-el]:hover { opacity: 0.55; }
#stDemo [data-el].is-off:hover { opacity: 0.3; }
#stDemo [data-el]:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
#stDemo [data-layer].is-off [data-el] { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    #stDemo [data-el] { transition: none; }
}

/* ── Blatt 03: Formate ──────────────────────────────────── */
.st-formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1px;
    margin-top: 26px;
    background: var(--sd-border);
    border: 1px solid var(--sd-border);
}
.st-format { background: var(--sd-surface); padding: 16px 14px; }
.st-format b {
    display: block;
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.st-format span { display: block; margin-top: 5px; font-size: 13px; color: var(--sd-text-sec); line-height: 1.45; }

/* ── Blatt 05: Grenzen ──────────────────────────────────── */
.st-limits { list-style: none; margin: 24px 0 0; padding: 0; max-width: 64ch; }
.st-limits li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--sd-border);
    font-size: 15px;
    line-height: 1.5;
}
.st-limits svg { flex: none; margin-top: 2px; color: var(--sd-text-sec); }

/* ── Blatt 06: Preis ────────────────────────────────────── */
.st-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 22px;
    font-family: var(--sd-brand-font);
}
.st-price b { font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -0.03em; }
.st-price span { font-size: 16px; color: var(--sd-text-sec); font-family: var(--sd-font); }

/* ── Fußzeile ───────────────────────────────────────────── */
.st-foot {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 max(16px, 2vw) calc(40px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
    color: var(--sd-text-sec);
    text-align: center;
}
.st-foot a { color: var(--sd-text-sec); }

/* ── Schmale Fenster ────────────────────────────────────── */
@media (max-width: 860px) {
    .st-hero, .st-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    /* Auf dem Telefon gibt es die Schiene nicht – also auch keine Luft für sie. */
    .st-stage { padding-top: 12px; padding-left: max(16px, 2vw); }
    .st-stage > nav { display: none; }
    .st-sheet-inner { margin: 8px; padding: 20px 16px; }
    .st-sheet-no { top: 14px; right: 14px; }
    .st-cta { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .st-lift, .st-gap { animation: none; }
    .st-lift { transform: translate(30px, -70px) rotate(-2.4deg); }
    .st-gap { opacity: 1; }
    .st-tab, .st-cta, .st-switch, .st-switch::after, [data-layer] { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   floorplanedit.com — Grundrisse (frontend/start_floorplan.html)
   Gleiches Gerüst, gleiche Tokens, gleiche Klassen. Der Bewegungsmoment
   des ersten Blatts ist seit dem 18.09.2026 ein Film (floorplan_scan_expose.mp4):
   aus dem schiefen Scan wird der Firmen-Grundriss.
   Präfix st-fp-, damit die beiden Startseiten sich nicht überschreiben.
   ══════════════════════════════════════════════════════════════ */

/* Bild-/Videoblatt: ein Medium, randlos im Blatt, ohne Rahmen um den Rahmen. */
.st-shot { margin-top: 26px; background: var(--sd-bg); border: 1px solid var(--sd-border); }
.st-shot video, .st-shot img { display: block; width: 100%; height: auto; }
/* Film im Held: das Video hat weißen Grund und sitzt randlos auf dem Blatt */
/* Der Film trägt die Aussage, der Text steht daneben: Bildspalte breiter, Titel eine Stufe kleiner. */
@media (min-width: 861px) {
    .st-hero:has(.st-fp-film) { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
    .st-hero:has(.st-fp-film) .st-title { font-size: clamp(30px, 3.6vw, 48px); }
}
.st-fp-film video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: #fff; }
}