/* Registerwerk · UNTERSEITEN (06.10.2026 als Vorschau /v2, seit 24.10.2026 an der Wurzel).
   Lädt NACH css/style.css (die Bausteine der heutigen Seite: Raster, Formulare, Preiskarten, Stationen, Fragen) und rahmen.css (der
   gemeinsame Rahmen der Vorschau). Diese Datei gibt den Inhalten den Auftritt der neuen Startseite — dunkler Seitenkopf mit Bild, grosse
   Versal-Überschriften, runde Knöpfe, breiterer Rand — und enthält KEINE Inhalte: die stehen in src/pages/ wie für die heutige Seite,
   eine Quelle für beide Fassungen. Seitenbild je Seitenschlüssel (body.seite--<key>, gesetzt in layout.html); «v2-seite» am body blieb beim Umzug als Klassenname. */
:root{--rand:clamp(20px,11vw,180px)}
html{scroll-padding-top:calc(var(--rahmen-kopf-h) + 16px)}
body.v2-seite{background:var(--papier)}
.v2-seite :focus-visible{outline:2px solid var(--zinnober);outline-offset:4px}

/* ---------- Seitenkopf: dunkel, Bild, Schleier; die Leiste liegt darüber ---------- */
.v2-seite .seitenkopf{position:relative;isolation:isolate;overflow:hidden;min-height:min(76vh,780px);display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--rahmen-kopf-h) + clamp(56px,9vh,120px));padding-bottom:clamp(56px,9vh,110px);background:#121211;color:var(--papier)}
.v2-seite .seitenkopf::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:1;-webkit-mask-image:none;mask-image:none;
  background:var(--v2-bild,radial-gradient(120% 90% at 78% 30%,#3a1a10 0%,#1b1512 38%,#101010 70%)) center/cover no-repeat;transform:scale(1.06);animation:v2-zoom 26s ease-out both}
.v2-seite .seitenkopf::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(14,14,13,.9) 0%,rgba(14,14,13,.7) 50%,rgba(14,14,13,.5) 100%)}
@keyframes v2-zoom{from{transform:scale(1.06)}to{transform:scale(1.01)}}
.v2-seite .seitenkopf>*{position:relative}
.v2-seite .seitenkopf .label,.v2-seite .seitenkopf .brotkrumen{font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,248,.88);display:flex;align-items:center;gap:14px;margin-bottom:22px}
.v2-seite .seitenkopf .label::before,.v2-seite .seitenkopf .brotkrumen::before{content:"";flex:none;width:34px;height:2px;background:var(--zinnober)}
.v2-seite .seitenkopf .brotkrumen a{color:inherit}
/* Silbentrennung in den grossen Überschriften nur für lange Wörter (ab 12 Zeichen, je Seite mindestens 5): sonst trennt der Browser
   kurze Wörter wie «IH-REM» (Betreiber 08.10.2026, Bild der Kontakt-Überschrift). Chromium zählt ein Satzzeichen am Wortende mit — mit
   «10 4 4» trennte es «EINSEI-TER,». Dieselben Werte trägt das Kontrollpaar in tests/v2-seiten.mjs (Prüfung «getrennt»). */
.v2-seite .seitenkopf .h1{font-size:clamp(36px,5.8vw,92px);font-weight:850;line-height:1.04;letter-spacing:-.025em;text-transform:uppercase;max-width:18ch;color:var(--papier);hyphens:auto;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;margin-bottom:28px}
.v2-seite .seitenkopf .lead{color:rgba(250,250,248,.86);max-width:60ch}
.v2-seite .seitenkopf a{color:var(--papier)}
.v2-seite .seitenkopf .meta-leiste,.v2-seite .seitenkopf .meta-leiste dt{color:rgba(250,250,248,.75)}
.v2-seite .seitenkopf .meta-leiste dd{color:var(--papier)}
/* Seitenbilder (aus media/, KI-erzeugt am 06.10.2026); Rechtliches ohne Bild */
.seite--leistungen,.seite--partner,.seite--studio{--v2-bild:url("/media/hand.webp")}
.seite--ablauf,.seite--termin{--v2-bild:url("/media/ablauf.webp")}
.seite--preise,.seite--website-check{--v2-bild:url("/media/check.webp")}
.seite--arbeiten,.seite--grundsaetze,[class*="seite--case-"]{--v2-bild:url("/media/start.webp")}
.seite--faq,.seite--kontakt,.seite--danke,.seite--fehler{--v2-bild:url("/media/befund.webp")}
@media (max-width:600px){
  .seite--leistungen,.seite--partner,.seite--studio{--v2-bild:url("/media/hand-handy.webp")}
  .seite--ablauf,.seite--termin{--v2-bild:url("/media/ablauf-handy.webp")}
  .seite--preise,.seite--website-check{--v2-bild:url("/media/check-handy.webp")}
  .seite--arbeiten,.seite--grundsaetze,[class*="seite--case-"]{--v2-bild:url("/media/start-handy.webp")}
  .seite--faq,.seite--kontakt,.seite--danke,.seite--fehler{--v2-bild:url("/media/befund-handy.webp")}
  .v2-seite .seitenkopf{min-height:0}
  .v2-seite .seitenkopf::after{background:rgba(14,14,13,.8)}
}

/* ---------- Inhalte: Überschriften, Knöpfe, Linien ---------- */
.v2-seite main .h2,.v2-seite main h2{font-weight:850;text-transform:uppercase;letter-spacing:-.02em;line-height:1.04;font-size:clamp(28px,3.4vw,54px);max-width:20ch;hyphens:auto;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5}
.v2-seite main .h3,.v2-seite main h3{font-weight:750}
.v2-seite .abschnitt{border-top-color:rgba(20,20,20,.14)}
.v2-seite .knopf{border-radius:999px;min-height:52px;padding:0 28px;font-weight:700;letter-spacing:.02em}
.v2-seite .knopf:hover{background:var(--zinnober-text);border-color:var(--zinnober-text);color:#fff}
.v2-seite .dunkel .knopf--hell:hover{background:var(--zinnober-text);border-color:var(--zinnober-text);color:#fff}
.v2-seite .kasten{border-left-width:4px}
/* Kontakt-Block am Seitenende: wie das Schlussblatt der Startseite */
.v2-seite .kontakt-cta{padding-top:clamp(80px,12vh,150px);padding-bottom:clamp(80px,12vh,150px)}
.v2-seite .kontakt-cta .h2{max-width:16ch}

/* ---------- Rahmen auf Unterseiten ----------
   Kanäle senkrecht am rechten Rand (dort stehen auf der Startseite die Abschnittspunkte, die es hier nicht gibt): unten rechts lagen sie
   auf langen Seiten über dem Inhalt (gesehen 06.10.2026 auf /v2/preise/ über «Werk gross anfragen»). Zwischen 821 und 1100 px ist der
   Rand mindestens so breit wie die Plakette. */
@media (min-width:821px){
  .v2-seite .rahmen-kanaele{top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;padding:6px 0}
  :root{--rand:clamp(130px,11vw,180px)}
}
@media (max-width:820px){:root{--rand:20px}}

/* ---------- Plakette: nicht auf den Seiten, zu denen sie führt ---------- */
.seite--kontakt .plakette,.seite--termin .plakette,.seite--website-check .plakette,.seite--danke .plakette,.seite--fehler .plakette{display:none}

/* ---------- Schlussband mit Abspann ---------- */
.schluss{background:var(--tinte);color:var(--papier);padding:clamp(40px,6vh,72px) 0 clamp(24px,4vh,40px);border-top:1px solid rgba(250,250,248,.12)}
.schluss .abspann{padding-top:0}

@media (prefers-reduced-motion:reduce){.v2-seite .seitenkopf::before{animation:none;transform:none}}
@media print{.v2-seite .seitenkopf{min-height:0;color:#000;background:#fff}.v2-seite .seitenkopf::before,.v2-seite .seitenkopf::after{display:none}.v2-seite .seitenkopf .h1,.v2-seite .seitenkopf .lead{color:#000}.schluss{display:none}}