/* Registerwerk · der gemeinsame RAHMEN der Website (06.10.2026 als Vorschau /v2, seit 24.10.2026 an der Wurzel): Sprungmarke, Fortschritt, Marke, Leiste, Menü, Abschnittspunkte,
   Adresse, Kanäle, Plakette, Abspann. Gilt auf der Startseite (mit style.css) und auf allen Unterseiten (mit css/style.css der heutigen
   Seite und seiten.css). Eigene Variablen mit «--rahmen-», weil css/style.css --rand, --kurve und --tinte-2 anders belegt; die Farben
   --papier, --tinte, --zinnober, --zinnober-text sind in beiden Dateien gleich. Klassen «leiste» und «abspann» statt «kopf» und «fuss»,
   weil die heutige Seite diese Namen für ihre eigene Kopf- und Fusszeile nutzt. Markup: partials/rahmen.html, partials/abspann.html, partials/punkte.html. */
:root{
  --rahmen-kopf-h:88px; --rahmen-ecke:clamp(16px,2.2vw,36px); --rahmen-rand:clamp(20px,11vw,180px);
  --rahmen-kurve:cubic-bezier(.16,1,.3,1); --rahmen-kurve-weich:cubic-bezier(.65,0,.35,1);
  --rahmen-grau:#A3A39D; --rahmen-linie:rgba(250,250,248,.18);
  --rahmen-sans:"Schibsted Grotesk","Schibsted Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --rahmen-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.sprung{position:fixed;left:16px;top:-60px;z-index:100;background:var(--zinnober-text);color:#fff;padding:10px 16px;font-weight:700;text-decoration:none;transition:top .2s}
.sprung:focus{top:16px}
html.ohne-js .leiste__menue{display:none}
/* ---------- Fortschritt oben ---------- */
.fortschritt{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.fortschritt__balken{display:block;height:100%;width:100%;background:var(--zinnober);transform:scaleX(0);transform-origin:0 50%}

/* ---------- Rahmen ---------- */
.rahmen-marke{position:fixed;z-index:50;left:var(--rahmen-ecke);top:clamp(16px,2.2vw,30px);color:var(--papier);transition:color .4s,transform .5s var(--rahmen-kurve),top .4s}
.rahmen-marke svg{width:clamp(30px,2.6vw,44px);height:auto;transition:width .4s}
.rahmen-marke__rot{fill:var(--zinnober)}
.rahmen-marke:hover{transform:translateY(-2px)}
body.kopf-fest .rahmen-marke{top:15px}
body.kopf-fest .rahmen-marke svg{width:30px}
.leiste{position:fixed;z-index:45;inset:0 0 auto;height:var(--rahmen-kopf-h);display:flex;align-items:center;gap:32px;padding:0 calc(var(--rahmen-ecke) + 150px) 0 max(var(--rahmen-rand),96px);transition:background .5s,color .5s,transform .6s var(--rahmen-kurve),height .4s}
.leiste__name{font-size:clamp(15px,1.15vw,19px);letter-spacing:.01em;text-decoration:none;white-space:nowrap;margin-right:auto;padding:13px 0}   /* Polster: Tastenziel am Telefon lag unter 24 px (tests/run.mjs, 24.10.2026) */
.leiste__name b{font-weight:800;letter-spacing:.02em}
.leiste__nav{display:flex;gap:clamp(18px,2.2vw,36px)}
.leiste__nav a{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;position:relative;padding:6px 0}
.leiste__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--zinnober);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--rahmen-kurve)}
.leiste__nav a:hover::after,.leiste__nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
.leiste.ist-fest{background:rgba(20,20,20,.72);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);height:72px}
.leiste.ist-weg{transform:translateY(-100%)}
.leiste.ist-weg:focus-within{transform:none}
.leiste__menue{position:fixed;z-index:56;right:var(--rahmen-ecke);top:calc(var(--rahmen-kopf-h)/2 - 22px);min-width:44px;height:44px;display:flex;align-items:center;justify-content:flex-end;gap:12px;background:none;border:0;color:var(--papier);font:700 12px/1 var(--rahmen-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .4s,top .4s}
body.kopf-fest .leiste__menue{top:14px}
.leiste__menue-striche{display:grid;gap:7px;width:28px}
.leiste__menue-striche span{display:block;height:0;border-top:2px solid currentColor;transition:transform .5s var(--rahmen-kurve)}   /* Rand statt Fläche: im Kontrastmodus wird jede Fläche zu Canvas, der Knopf war unsichtbar (Prüfung Nr. 92, 11.10.2026) */
.leiste__menue[aria-expanded="true"] .leiste__menue-striche span:first-child{transform:translateY(4.5px) rotate(45deg)}
.leiste__menue[aria-expanded="true"] .leiste__menue-striche span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
/* Farbe ausdrücklich: auf der Startseite erbte die Leiste Papier vom body, auf den Unterseiten (css/style.css: body Tinte) wäre sie
   dunkel auf dunklem Seitenkopf (gesehen 06.10.2026). Hell auf Fotos, Tinte erst mit «auf-hell». */
.leiste{color:var(--papier)}
body.auf-hell .leiste{color:var(--tinte)}
body.auf-hell .leiste.ist-fest{background:rgba(250,250,248,.8);color:var(--tinte)}
body.auf-hell .rahmen-marke,body.auf-hell .leiste__menue,body.auf-hell .rahmen-adresse,body.auf-hell .rahmen-kanaele,body.auf-hell .punkte{color:var(--tinte)}
body.menue-offen .leiste__menue,body.menue-offen .rahmen-marke{color:var(--papier)}
/* Seiten ohne dunklen Seitenkopf (Danke- und Fehlerseite des Kontakts, 404): Leiste, Marke und Menüknopf waren Papier auf Papier, sichtbar nur
   der rote Punkt (Prüfung Nr. 73, 11.10.2026). Ohne JS, damit es auch für Absender ohne Skript trägt; im offenen Menü wieder hell. */
body.v2-seite:not(:has(main .seitenkopf)) :is(.leiste,.rahmen-marke,.leiste__menue){color:var(--tinte)}
body.v2-seite:not(:has(main .seitenkopf)) .leiste.ist-fest{background:rgba(250,250,248,.8)}
body.v2-seite.menue-offen:not(:has(main .seitenkopf)) :is(.leiste__menue,.rahmen-marke){color:var(--papier)}

.menue{position:fixed;inset:0;z-index:55;background:var(--tinte);color:var(--papier);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--rahmen-rand);padding:calc(var(--rahmen-kopf-h) + 4vh) var(--rahmen-rand) 6vh;clip-path:circle(0 at calc(100% - 60px) 44px);transition:clip-path .8s var(--rahmen-kurve-weich);overflow:auto}
.menue[hidden]{display:grid;visibility:hidden}
.menue.ist-offen{clip-path:circle(150% at calc(100% - 60px) 44px);visibility:visible}
.menue__liste{list-style:none;margin:0;padding:0}
.menue__liste a{display:flex;align-items:baseline;gap:20px;font-size:clamp(30px,4.6vw,72px);font-weight:850;line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;padding:.08em 0;transform:translateY(40px);opacity:0;transition:transform .7s var(--rahmen-kurve),opacity .7s,color .3s}
.menue.ist-offen .menue__liste a{transform:none;opacity:1}
.menue__liste li:nth-child(2) a{transition-delay:.05s}.menue__liste li:nth-child(3) a{transition-delay:.1s}.menue__liste li:nth-child(4) a{transition-delay:.15s}.menue__liste li:nth-child(5) a{transition-delay:.2s}.menue__liste li:nth-child(6) a{transition-delay:.25s}.menue__liste li:nth-child(7) a{transition-delay:.3s}.menue__liste li:nth-child(8) a{transition-delay:.35s}.menue__liste li:nth-child(9) a{transition-delay:.4s}
.menue__liste a:hover{color:var(--zinnober)}
.menue__nr{font:400 13px/1 var(--rahmen-mono);color:var(--rahmen-grau);letter-spacing:.06em;transform:translateY(-1.2em)}
.menue__seite{align-self:end;font-size:17px}
.menue__seite a{text-decoration:none;border-bottom:1px solid var(--rahmen-linie)}
.menue__seite a:hover{border-color:var(--zinnober)}
.menue__label{font:400 12px/1 var(--rahmen-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rahmen-grau);margin:32px 0 12px}
.menue__gross{font-size:clamp(26px,2.6vw,38px);font-weight:800;border:0!important}
.menue__klein{margin-top:40px;font-size:14px;color:var(--rahmen-grau)}
body.menue-offen{overflow:hidden}

.punkte{position:fixed;z-index:40;right:var(--rahmen-ecke);top:50%;transform:translateY(-50%);display:grid;gap:14px}
.punkte__punkt{display:flex;align-items:center;justify-content:flex-end;width:24px;height:16px;text-decoration:none;position:relative}
.punkte__punkt::after{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;transition:transform .4s var(--rahmen-kurve),opacity .3s,background .3s}
body.auf-hell .punkte__punkt::after{opacity:.6}
.punkte__punkt span{position:absolute;right:26px;white-space:nowrap;font:400 11px/1 var(--rahmen-mono);letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .4s var(--rahmen-kurve);pointer-events:none}
.punkte__punkt:hover span,.punkte__punkt:focus-visible span{opacity:1;transform:none}
.punkte__punkt[aria-current="true"]::after{opacity:1;background:var(--zinnober);transform:scale(1.7)}
/* Adresse nur im Einstieg (wie resign); sonst lag sie über Fussnoten und Knöpfen */
.rahmen-adresse{position:fixed;z-index:40;left:var(--rahmen-ecke);bottom:clamp(14px,2vw,28px);font-style:normal;font-size:11px;line-height:1.5;letter-spacing:.02em;opacity:.75;transition:opacity .4s,visibility .4s}
body:not(.auf-start) .rahmen-adresse{opacity:0;visibility:hidden}
.rahmen-kanaele{position:fixed;z-index:40;right:var(--rahmen-ecke);bottom:clamp(8px,1.4vw,20px);display:flex;gap:4px}
/* Farben ausdrücklich (Unterseiten erben Tinte vom body): hell auf Fotos, Tinte erst mit «auf-hell» */
.punkte,.rahmen-adresse,.rahmen-kanaele{color:var(--papier)}
.rahmen-kanaele a{display:grid;place-items:center;min-width:44px;min-height:44px;opacity:.75;transition:opacity .3s,transform .4s var(--rahmen-kurve)}
.rahmen-kanaele a:hover{opacity:1;transform:translateY(-3px);color:var(--zinnober)}

/* Plakette: ruhig — dreht nur beim Darüberfahren; nicht im Einstieg, im Check und im Kontakt (main.js); Text auf Zinnober-Text (5,7:1) */
.plakette{position:fixed;z-index:42;right:var(--rahmen-ecke);bottom:clamp(72px,11vh,120px);width:clamp(92px,7vw,112px);aspect-ratio:1;border-radius:50%;background:var(--zinnober-text);color:#fff;text-decoration:none;display:grid;place-items:center;box-shadow:0 12px 32px -14px rgba(194,44,8,.55);transition:transform .5s var(--rahmen-kurve),box-shadow .4s,opacity .5s,visibility .5s}
.plakette:hover{box-shadow:0 20px 50px -14px rgba(194,44,8,.75)}
.plakette__ring{position:absolute;inset:4%;width:92%;height:92%}
.plakette:hover .plakette__ring{animation:drehen 18s linear infinite}
.plakette__ring text{font:600 8.2px/1 var(--rahmen-mono);letter-spacing:.16em;text-transform:uppercase;fill:#fff}
.plakette__kern{display:grid;text-align:center;line-height:1;font-weight:850;text-transform:uppercase;font-size:clamp(12px,.9vw,14px);letter-spacing:.02em}
.plakette__unten{margin-top:3px}
.plakette.ist-versteckt{opacity:0;visibility:hidden;transform:scale(.6);pointer-events:none}
@keyframes drehen{to{transform:rotate(360deg)}}


.abspann{width:min(1120px,100% - 2*var(--rahmen-rand));margin:auto auto 0;padding-top:12vh;display:grid;gap:10px;font-size:13px;color:var(--rahmen-grau)}
.abspann p{margin:0}
.abspann__nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.abspann a{display:inline-block;padding:12px 0;text-decoration:none;border-bottom:1px solid var(--rahmen-linie)}
.abspann a:hover{color:var(--papier);border-color:var(--zinnober)}

.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Schmale Bildschirme ---------- */
@media (max-height:760px){.rahmen-adresse{display:none}}
@media (max-width:1100px){
  .leiste__nav{display:none}
  .leiste{padding-right:calc(var(--rahmen-ecke) + 70px)}
}
@media (max-width:820px){
  :root{--rahmen-kopf-h:72px;--rahmen-rand:20px}
  /* Telefon: die Leiste bleibt stehen — Marke und Menüknopf sitzen auf ihrem Hintergrund, statt beim Scrollen über dem Text zu
     schweben (tests/v2-seiten.mjs, 06.10.2026: 49 Stellen unter der Marke) */
  .leiste.ist-weg{transform:none}
  .leiste{padding:0 84px 0 72px}
  .leiste__name{font-size:14px}
  .leiste__menue-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .punkte,.rahmen-adresse,.plakette{display:none}
  .rahmen-kanaele{left:0;right:0;bottom:0;justify-content:center;gap:24px;padding:4px 0 calc(4px + env(safe-area-inset-bottom));background:rgba(14,14,13,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  body.auf-hell .rahmen-kanaele{color:var(--papier)}
  .menue{grid-template-columns:1fr;align-content:start}
  .abspann{padding-bottom:70px}
  /* Fokus nie unter den Kanälen (WCAG 2.4.11; Prüfung Nr. 112, 11.10.2026). Polster am html, nicht scroll-margin am Element: WebKit richtet
     Textfelder nach der Schreibmarke aus und übergeht scroll-margin. 96 = 52 Leiste + 17 Schreibmarke + 6 Ring + Luft */
  html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){.leiste__zusatz{display:none}}
@media (pointer:coarse){.punkte__punkt{width:44px;height:28px}}

/* ---------- Kanäle ab 821 px (Prüfung Nr. 40/75, Widerspruch 6, 11.10.2026) ----------
   Eine Regel für den ganzen Rahmen: ab 821 px stehen die Kanäle auf eigenem dunklem Grund und nur dort, wo der Rand frei ist. Rechts in der
   Mitte stehen auf der Startseite die Abschnittspunkte, auf Unterseiten gibt es sie nicht (seiten.css): Unterseiten senkrecht mittig und
   immer sichtbar, Startseite unten rechts und nur im Einstieg — danach übernehmen Plakette, Menü und das Kontakt-Blatt. Die Startseite hat
   kein «v2-seite» am body. Gemessen 11.10.2026: 0 Überdeckungen bei 834, 1024, 1100, 1280, 1440, 1536 und 1920 px (vorher 5 bis 37). */
@media (min-width:821px){
  .rahmen-kanaele{background:rgba(14,14,13,.85);border-radius:999px;padding:0 6px;color:var(--papier);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .4s,visibility .4s}
  body.auf-hell .rahmen-kanaele{color:var(--papier)}
  html:not(.ohne-js) body:not(.v2-seite):not(.auf-start) .rahmen-kanaele{opacity:0;visibility:hidden}
}
/* Kontrastmodus: der Menüknopf bekommt einen eigenen Grund, sonst verschwand er am Rand (Nr. 92) */
@media (forced-colors:active){.leiste__menue{background:Canvas;padding:0 10px;border-radius:4px}}

/* ---------- Bewegung reduzieren, Druck ---------- */
@media (prefers-reduced-motion:reduce){
  .fortschritt__balken,.rahmen-marke,.leiste,.leiste__menue,.leiste__menue-striche span,.menue,.menue__liste a,.punkte__punkt::after,.punkte__punkt span,.rahmen-kanaele a,.plakette,.plakette__ring{transition:none!important;animation:none!important}
}
@media print{
  .fortschritt,.rahmen-marke,.leiste,.leiste__menue,.menue,.punkte,.rahmen-adresse,.rahmen-kanaele,.plakette,.sprung{display:none!important}
}