: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}
.leiste__menue-ersatz{display:none}
html.ohne-js .leiste__menue-ersatz{display:flex;align-items:center;position:fixed;z-index:56;right:var(--rahmen-ecke);top:calc(var(--rahmen-kopf-h)/2 - 22px);min-height:44px;padding:0 14px;border-radius:22px;background:rgba(20,20,20,.72);color:var(--papier);font:700 .75rem/1 var(--rahmen-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.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-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(.9375rem,1.15vw,1.1875rem);letter-spacing:.01em;text-decoration:none;white-space:nowrap;margin-right:auto;padding:13px 0}   .leiste__name b{font-weight:800;letter-spacing:.02em}
.leiste__nav{display:flex;gap:clamp(18px,2.2vw,36px)}
.leiste__nav a{font-size:.875rem;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;padding:0;background:none;border:0;color:var(--papier);font:700 .75rem/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)}   .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)}
.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)}
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(1.75rem,min(4.6vw,6.4vh),4.5rem);font-weight:850;line-height:1.04;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 .8125rem/1 var(--rahmen-mono);color:var(--rahmen-grau);letter-spacing:.06em;transform:translateY(-1.2em)}
.menue__seite{align-self:end;font-size:1.0625rem}
.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 .75rem/1 var(--rahmen-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rahmen-grau);margin:32px 0 12px}
.menue__gross{font-size:clamp(1.625rem,2.6vw,2.375rem);font-weight:800;border:0!important}
.menue__klein{margin-top:40px;font-size:.875rem;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 .6875rem/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)}
.punkte__punkt:focus-visible{outline-offset:2px;box-shadow:0 0 0 2px var(--papier),0 0 0 6px var(--tinte)}
.rahmen-adresse{position:fixed;z-index:40;left:var(--rahmen-ecke);bottom:clamp(14px,2vw,28px);font-style:normal;font-size:.6875rem;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}
.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)}
.rahmen-kanaele a:focus-visible{opacity:1;outline-width:3px;outline-offset:-5px}

.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:.3em;text-transform:uppercase;fill:currentColor}   .plakette__kern{display:grid;text-align:center;line-height:1;font-weight:850;text-transform:uppercase;font-size:clamp(11px,.72vw,13px);letter-spacing:.02em}
.plakette .nur-sr{text-transform:none}   .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:.8125rem;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}

@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}
    .leiste.ist-weg{transform:none}
  .leiste{padding:0 84px 0 72px}
  .leiste__name{font-size:.875rem}
  .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;font-size:.875rem}       html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){.leiste__zusatz{display:none}}
@media (max-width:820px) and (max-height:400px){
  .leiste,.rahmen-marke{position:absolute}
  .rahmen-kanaele{display:none}
  .abspann{padding-bottom:0}
  html{scroll-padding-bottom:0}
}
@media (max-width:820px) and (max-height:480px){
  .menue{padding-top:calc(var(--rahmen-kopf-h) + 8px);padding-bottom:24px;overscroll-behavior:contain}
  .menue__liste a{font-size:1.375rem;padding:.12em 0}
  .menue__seite{margin-top:16px}
}
@media (pointer:coarse){.punkte__punkt{width:44px;height:28px}}

@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}
}
@media (forced-colors:active){.leiste__menue{background:Canvas;padding:0 10px;border-radius:4px}
    .punkte__punkt::after{forced-color-adjust:none;background:CanvasText;border:1px solid Canvas;box-sizing:border-box;opacity:1}
  .punkte__punkt[aria-current="true"]::after{background:Highlight}
    .plakette{border:2px solid LinkText}}

@media (prefers-reduced-motion:reduce){
    .sprung,.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,.leiste__menue-ersatz,.menue,.punkte,.rahmen-adresse,.rahmen-kanaele,.plakette,.sprung{display:none!important}
}
