/* heidrich-digital.de · Richtung 3 „Werkzeugkasten“ (Freigabe Till, 24.10.2026, 11:09)
   Ebene über hd.css: Blaupause als Grund, jede inhaltliche Fläche ist ein Fenster mit Titelleiste
   und hartem Schatten in Tinte. Plex Mono trägt die Oberfläche, Outfit die Aussagen, Source Serif den Lesetext.
   Bewegung nur über transform und opacity, alles aus bei prefers-reduced-motion. */

:root{
  --raster: color-mix(in srgb, var(--kobalt) 10%, transparent);
  --fp: clamp(18px, 2.6vw, 40px);          /* Innenabstand Fenster */
  --schatten-hart: 4px 4px 0 var(--tinte);
  --kopf-h: 64px;
}

/* ---------- Grund ---------- */
body{background-color:var(--blaupause);
  background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px}
body::after{display:none}
body::before{background:var(--weiss)}
main{padding-bottom:var(--r6)}

/* ---------- Kopf ---------- */
.kopf{background:var(--weiss);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--tinte)}
.kopf .rahmen{min-height:var(--kopf-h);max-width:1400px}
.kopf .logo svg{height:24px}
.kopf .logo svg rect{animation:hd-cursor 1.15s steps(1,end) infinite}
@keyframes hd-cursor{50%{opacity:0}}
.nav{gap:2px}
.nav a{font:500 .875rem/1 var(--f-nachweis);text-transform:lowercase;padding:11px 10px;border:1px solid transparent;color:var(--tinte)}
.nav a::after{display:none}
.nav a:hover{border-color:var(--tinte);color:var(--tinte);background:var(--weiss)}
.nav a[aria-current="page"]{background:var(--tinte);color:var(--weiss)}
.nav .tel-link{background:var(--kobalt);color:var(--weiss);border-color:var(--tinte);margin-left:8px;box-shadow:2px 2px 0 var(--tinte);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.nav .tel-link:hover{background:var(--kobalt-tief);color:var(--weiss);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--tinte)}
.kopf-status{display:flex;align-items:center;gap:10px;font:400 .75rem/1 var(--f-nachweis);color:var(--graphit);white-space:nowrap;margin-right:auto;margin-left:24px}
.kopf-status .lampe{width:8px;height:8px;background:var(--kobalt);display:inline-block;animation:hd-puls 2.4s var(--ease) infinite}
@keyframes hd-puls{0%,100%{opacity:1}50%{opacity:.35}}
.fortschritt{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--kobalt);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.menue-knopf{border:1px solid var(--tinte);border-radius:0;box-shadow:2px 2px 0 var(--tinte);font-family:var(--f-nachweis);text-transform:lowercase}

/* ---------- Fenster ---------- */
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 .8125rem/1.2 var(--f-nachweis);
  color:var(--tinte);background:var(--weiss);border-bottom:1px solid var(--tinte);padding:9px 12px;min-height:38px;
  margin:0 calc(-1 * var(--fp)) var(--fp);grid-column:1 / -1}
.fbar .punkte{display:flex;gap:6px;flex:none}
.fbar .punkte i{width:10px;height:10px;border:1px solid var(--tinte);display:block}
.fbar .punkte i:first-child{background:var(--kobalt);border-color:var(--kobalt)}
.fbar .name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbar .meta{color:var(--graphit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}

.fenster{background:var(--weiss);color:var(--tinte);border:1px solid var(--tinte);box-shadow:var(--schatten-hart);min-width:0;position:relative}
section.rahmen.abschnitt,
.weiss-flaeche > .rahmen,.blaupause-flaeche > .rahmen,.dunkel > .rahmen,.kobalt-flaeche > .rahmen,
section.seitenkopf{
  background:var(--weiss);border:1px solid var(--tinte);box-shadow:var(--schatten-hart);
  padding:0 var(--fp) var(--fp);margin-block:28px;width:calc(100% - 2 * var(--rand));max-width:var(--rahmen)}
.weiss-flaeche,.blaupause-flaeche,.dunkel,.kobalt-flaeche{background:transparent;border:0;color:inherit}
.blaupause-flaeche > .rahmen{background:var(--blaupause)}
.blaupause-flaeche > .rahmen .fbar{background:var(--weiss)}
.dunkel > .rahmen{background:var(--tinte);color:var(--weiss)}
.dunkel > .rahmen .fbar{background:var(--tinte);color:var(--eis);border-bottom-color:var(--linie-hell)}
.dunkel > .rahmen .fbar .punkte i{border-color:var(--eis)}
.kobalt-flaeche > .rahmen{background:var(--kobalt-tief);color:var(--weiss)}
.kobalt-flaeche > .rahmen .fbar{background:var(--kobalt);color:var(--weiss);border-bottom-color:var(--tinte)}
.kobalt-flaeche > .rahmen .fbar .punkte i{border-color:var(--weiss)}
.kobalt-flaeche > .rahmen .fbar .punkte i:first-child{background:var(--weiss)}
.kobalt-flaeche > .rahmen .fbar .meta{color:var(--blaupause)}
.dunkel .fbar .meta{color:var(--weiss-78)}
section.rahmen.abschnitt > .fbar + *,.fenster-inhalt{min-width:0}
.abschnitt{padding-block:0}

/* Seitenkopf der Unterseiten als Fenster */
section.seitenkopf{padding-bottom:clamp(28px,4vw,56px)}
section.seitenkopf .krume{margin-bottom:var(--r3)}
.seitentitel{font:800 clamp(2.25rem,1.3rem + 3.4vw,4.5rem)/.98 var(--f-marke);letter-spacing:-.03em;max-width:18ch}
.seitenkopf .nachweis:first-child,.seitenkopf .stapel-gross > .nachweis{font-weight:500;color:var(--kobalt);text-transform:lowercase;letter-spacing:.04em}

/* ---------- Typo im Werkzeugkasten ---------- */
.label{font:500 .75rem/1.2 var(--f-nachweis);letter-spacing:.06em;text-transform:lowercase;color:var(--kobalt)}
.dunkel .label,.kobalt-flaeche .label{color:var(--eis)}
.h2{letter-spacing:-.025em}
.weiter{font:500 .9375rem/1.3 var(--f-nachweis);text-transform:lowercase}
.weiter svg{width:15px;height:15px}

/* ---------- Bedienung ---------- */
.knopf{border:1px solid var(--tinte);border-radius:0;box-shadow:3px 3px 0 var(--tinte);transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.knopf:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tinte)}
.knopf:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--tinte)}
.knopf.hell{border-color:var(--tinte)}
.kobalt-flaeche .knopf.hell,.dunkel .knopf.hell{box-shadow:3px 3px 0 var(--tinte)}
.feld input,.feld select,.feld textarea{border-radius:0;border-color:var(--tinte);background:var(--weiss);font-family:var(--f-marke)}
.formular{border:1px solid var(--tinte);box-shadow:var(--schatten-hart)}
.formular .knopf{min-height:52px}
.formular-meldung.ok{border-color:var(--kobalt);background:var(--blaupause)}
.formular-meldung.fehlschlag{border-color:var(--rotstift);background:var(--weiss)}
.formular .falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Bilder rahmen */
.bild img,.abzug,.projekt-gross .schirm{border:1px solid var(--tinte)}
.abzug,.projekt-gross .schirm{box-shadow:3px 3px 0 var(--tinte)}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte);border-top:1px solid var(--tinte);margin-top:var(--r6)}
.fuss .label{color:var(--eis)}
.profile{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--r2)}
.profile a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--linie-hell);font:500 .8125rem/1 var(--f-nachweis);text-transform:lowercase;color:var(--weiss);text-decoration:none;transition:background .15s var(--ease),border-color .15s var(--ease)}
.profile a:hover{background:var(--weiss);color:var(--tinte);border-color:var(--weiss);text-decoration:none}
.profile svg{width:16px;height:16px;flex:none}

/* ---------- Startseite ---------- */
.werk-start{max-width:1400px}
.werk-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;align-items:start}
.werk-raster > *{min-width:0}
.w-8{grid-column:span 8}.w-7{grid-column:span 7}.w-6{grid-column:span 6}.w-5{grid-column:span 5}.w-4{grid-column:span 4}.w-12{grid-column:1 / -1}
.fenster > .fbar{margin:0}
.fenster .fi{padding:var(--fp)}
.fenster.dunkel{background:var(--tinte);color:var(--weiss)}
.fenster.dunkel > .fbar{background:var(--tinte);color:var(--eis);border-bottom-color:var(--linie-hell)}
.fenster.dunkel > .fbar .punkte i{border-color:var(--eis)}
.fenster.kobalt{background:var(--kobalt-tief);color:var(--weiss)}
.fenster.kobalt > .fbar{background:var(--kobalt);color:var(--weiss);border-bottom-color:var(--tinte)}
.fenster.kobalt > .fbar .punkte i{border-color:var(--weiss)}
.fenster.kobalt > .fbar .punkte i:first-child{background:var(--weiss)}
.fenster.kobalt > .fbar .meta{color:var(--blaupause)}

.auftakt-w{padding-top:clamp(20px,3vw,40px)}
.kicker{font:500 .8125rem/1.3 var(--f-nachweis);letter-spacing:.05em;color:var(--kobalt);text-transform:lowercase;margin:0}
.claim-w{font:800 clamp(2.6rem,.9rem + 6.4vw,7.4rem)/.86 var(--f-marke);letter-spacing:-.035em;text-transform:uppercase;margin:18px 0 28px;color:var(--tinte)}
.claim-w .zeile{display:block;overflow:hidden;padding-bottom:.04em}
.claim-w .zeile > span{display:inline-block}
.claim-w .blau{color:var(--kobalt)}
.claim-w .cursor{display:inline-block;width:.42em;height:.09em;background:var(--kobalt);margin-left:.06em;vertical-align:baseline;animation:hd-cursor 1.15s steps(1,end) infinite}
.h1-w{font:600 clamp(1.3rem,1rem + 1vw,2rem)/1.22 var(--f-marke);letter-spacing:-.012em;max-width:32ch;text-wrap:balance;margin:0 0 16px}
.unter-w{font:400 var(--t-lese)/1.6 var(--f-lese);color:var(--graphit);max-width:58ch;margin:0 0 26px}
.handlung{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.handlung .nachweis a{color:var(--tinte)}
.koordinaten{font-variant-numeric:tabular-nums}

.portrait-w img{aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;width:100%;border-bottom:1px solid var(--tinte)}
.kv-w{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);font:400 .8125rem/1.5 var(--f-nachweis)}
.kv-w dt,.kv-w dd{padding:7px 14px;border-bottom:1px solid var(--linie);margin:0}
.kv-w dt{color:var(--graphit)}
.kv-w > :nth-last-child(-n+2){border-bottom:0}
.seite-w{display:grid;gap:22px}

.term{font:400 .9375rem/1.85 var(--f-nachweis);padding:16px 18px;margin:0}
.term .prompt{color:var(--eis);display:block;min-height:1.85em}
.term .prompt b{font-weight:400;color:var(--weiss)}
.term a{color:var(--weiss);text-decoration:none;display:flex;justify-content:space-between;gap:12px;padding-inline:4px;margin-inline:-4px}
.term a span:last-child{color:var(--weiss-78)}
.term a:hover,.term a:focus-visible{background:var(--kobalt);outline:none}
.term .zeile-t{display:block}

/* Laufband */
.band{border-block:1px solid var(--tinte);background:var(--tinte);color:var(--weiss);overflow:hidden;margin-block:34px 6px}
.band-spur{display:flex;width:max-content;animation:hd-band 42s linear infinite}
.band-spur span{font:700 clamp(1.25rem,1rem + 1vw,2rem)/1 var(--f-marke);text-transform:uppercase;letter-spacing:-.01em;padding:16px 0;white-space:nowrap}
.band-spur span::after{content:"_";color:var(--eis);margin:0 .7em}
.band:hover .band-spur{animation-play-state:paused}
@keyframes hd-band{to{transform:translateX(-50%)}}

/* Leistungen als Module: 4 Spalten, die ersten zwei doppelt breit, Linien aus dem Spalt */
.module-w{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--tinte);border:1px solid var(--tinte)}
.modul-w{background:var(--weiss);padding:22px 20px 24px;display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--tinte);position:relative;transition:background .2s var(--ease)}
.modul-w:nth-child(-n+2){grid-column:span 2;padding:28px 26px 30px}
.modul-w:nth-child(-n+2) h3{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.8rem)}
.modul-w .tag{font:500 .75rem/1.2 var(--f-nachweis);color:var(--kobalt);text-transform:lowercase}
.modul-w h3{font:700 clamp(1.25rem,1.05rem + .7vw,1.7rem)/1.05 var(--f-marke);letter-spacing:-.025em;margin:0}
.modul-w p{font:400 1rem/1.55 var(--f-lese);color:var(--graphit);margin:0;max-width:46ch}
.modul-w .pf{font:500 .8125rem/1 var(--f-nachweis);color:var(--kobalt);display:inline-flex;gap:6px;align-items:center;margin-top:4px}
.modul-w .pf svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.modul-w:hover{background:var(--blaupause)}
.modul-w:hover .pf svg{transform:translateX(4px)}
.modul-w:focus-visible{outline:3px solid var(--kobalt);outline-offset:-3px}

/* Haltung */
.zitat-w{font:500 clamp(1.5rem,1.05rem + 1.5vw,2.5rem)/1.16 var(--f-lese);letter-spacing:-.012em;margin:4px 0 22px;text-wrap:balance}
.lese-w{font:400 1.0625rem/1.62 var(--f-lese);max-width:62ch}
.lese-w p + p{margin-top:1em}

/* Zeitstrahl im Fenster */
.zs-fenster .zs-halter{margin-top:6px}
.zs-fenster .zs-marke .schild,.zs-fenster .zs-marke .punkt{background:var(--weiss)}
.zs-detail{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;border-top:1px solid var(--tinte);padding-top:18px;margin-top:10px;min-height:118px}
.zs-detail .dj{font:800 clamp(2.4rem,1.5rem + 2.6vw,4rem)/.9 var(--f-marke);letter-spacing:-.03em;color:var(--kobalt);grid-row:span 2}
.zs-detail h3{font:700 1.25rem/1.25 var(--f-marke);margin:0}
.zs-detail p{font:400 1rem/1.55 var(--f-lese);color:var(--graphit);margin:0;max-width:64ch}
.zs-detail .dq{font:400 .75rem/1.4 var(--f-nachweis);color:var(--graphit)}
.zs-detail a{grid-row:1;grid-column:3}
.zs-detail.wechsel > *{animation:hd-ein .35s var(--ease) both}

/* Fotos */
.dateiraster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.dateiraster figure{margin:0;overflow:hidden}
.dateiraster .bildhalter{overflow:hidden;border:1px solid var(--tinte)}
.dateiraster img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .6s var(--ease),filter .6s var(--ease);filter:grayscale(.35)}
.dateiraster figure:hover img{transform:scale(1.05);filter:none}
.dateiraster figcaption{font:400 .75rem/1.4 var(--f-nachweis);color:var(--weiss-78);margin-top:7px}
.dateiraster figcaption b{display:block;color:var(--weiss);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Magazin-Tabelle und Diff */
.dateien{width:100%;border-collapse:collapse}
.dateien th{font:500 .75rem/1.2 var(--f-nachweis);text-align:left;color:var(--graphit);padding:8px 12px 8px 0;border-bottom:1px solid var(--tinte);white-space:nowrap}
.dateien td{padding:13px 12px 13px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.dateien td.d{font:400 .8125rem/1.6 var(--f-nachweis);white-space:nowrap;color:var(--graphit)}
.dateien td.r{font:500 .8125rem/1.6 var(--f-nachweis);color:var(--kobalt);white-space:nowrap}
.dateien td.t a{font:600 1.0625rem/1.35 var(--f-marke);text-decoration:none;color:var(--tinte)}
.dateien td.t a:hover{color:var(--kobalt);text-decoration:underline}
.dateien td.t small{display:block;font:400 .9375rem/1.5 var(--f-lese);color:var(--graphit);margin-top:4px}
.diff pre{margin:0;padding:14px 0;font:400 .875rem/1.7 var(--f-nachweis);white-space:pre-wrap}
.diff .z{display:grid;grid-template-columns:22px minmax(0,1fr);padding:3px 16px}
.diff .minus s{text-decoration-color:var(--rotstift);text-decoration-thickness:2px;color:var(--graphit)}
.diff .plus{background:var(--blaupause)}
.diff .plus b{color:var(--kobalt)}
.diff footer{border-top:1px solid var(--linie);padding:10px 16px}

/* Selbst gebaut, Branchen */
.repoliste{list-style:none;margin:0;padding:0}
.repoliste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:12px 0;border-bottom:1px solid var(--linie)}
.repoliste li:last-child{border-bottom:0}
.repoliste b{font:600 1.0625rem/1.3 var(--f-marke)}
.repoliste span{font:400 .9375rem/1.5 var(--f-lese);color:var(--graphit);grid-column:1 / 2}
.repoliste em{font:500 .6875rem/1.2 var(--f-nachweis);font-style:normal;border:1px solid var(--tinte);padding:4px 6px;grid-row:1;grid-column:2;align-self:start;white-space:nowrap;text-transform:lowercase}
.kv-b{margin:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr)}
.kv-b dt,.kv-b dd{padding:12px 0;border-bottom:1px solid var(--linie);margin:0}
.kv-b dt{font:500 .875rem/1.5 var(--f-nachweis);padding-right:22px}
.kv-b dt a{color:var(--kobalt);text-decoration:none}
.kv-b dt a:hover{text-decoration:underline}
.kv-b dd{font:400 .9375rem/1.5 var(--f-lese);color:var(--graphit)}

/* Kontakt-Fenster auf der Startseite */
.kontakt-w .fi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3vw,48px);align-items:start}
.kontakt-w h2{font:800 clamp(2.1rem,1.3rem + 2.6vw,3.8rem)/.98 var(--f-marke);letter-spacing:-.03em;margin:0 0 16px;color:var(--weiss)}
.kontakt-w .anriss{color:var(--weiss-90);margin-bottom:24px}
.kontakt-w .wege{display:grid;gap:10px;font:500 clamp(1.05rem,.95rem + .5vw,1.4rem)/1.3 var(--f-nachweis)}
.kontakt-w .wege a{color:var(--weiss);text-decoration:none;border-bottom:1px solid var(--linie-hell);padding-bottom:8px;overflow-wrap:anywhere}
.kontakt-w .wege a:hover{border-bottom-color:var(--weiss)}

/* ---------- Bewegung ---------- */
@keyframes hd-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hd-hoch{from{transform:translateY(105%)}to{transform:none}}
@keyframes hd-fenster{from{opacity:0;transform:translate(0,18px);box-shadow:0 0 0 var(--tinte)}to{opacity:1;transform:none;box-shadow:var(--schatten-hart)}}
.js .claim-w .zeile > span{animation:hd-hoch .9s var(--ease) both}
.js .claim-w .zeile:nth-child(2) > span{animation-delay:.09s}
.js .claim-w .zeile:nth-child(3) > span{animation-delay:.18s}
.js .auftakt-w .fenster{animation:hd-fenster .7s var(--ease) both}
.js .auftakt-w .seite-w > :nth-child(1){animation-delay:.12s}
.js .auftakt-w .seite-w > :nth-child(2){animation-delay:.22s}
.js .h1-w,.js .unter-w,.js .handlung{animation:hd-ein .7s var(--ease) both;animation-delay:.3s}
.js .unter-w{animation-delay:.38s}.js .handlung{animation-delay:.46s}
.js .zeigen{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .7s var(--ease)}
.js .zeigen.da{opacity:1;transform:none}
.js .term .zeile-t{opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.js .term.lauf .zeile-t{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .fenster,section.rahmen.abschnitt{transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .zeigen,.js .term .zeile-t{opacity:1!important;transform:none!important}
  .band-spur{transform:none}
}

/* ---------- Schmal ---------- */
@media (max-width: 1100px){
  .kopf-status{display:none}
}
@media (max-width: 1000px){
  .werk-raster > *{grid-column:1 / -1}
  .seite-w{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dateiraster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kontakt-w .fi{grid-template-columns:minmax(0,1fr)}
  .module-w{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 920px){
  .nav a{padding:12px 10px}
  .nav .tel-link{margin-left:0}
}
@media (max-width: 680px){
  :root{--fp:18px}
  .seite-w{grid-template-columns:minmax(0,1fr)}
  .portrait-w{max-width:320px}
  .dateiraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-w{grid-template-columns:minmax(0,1fr)}
  .modul-w:nth-child(-n+2){grid-column:auto}
  .dateien thead{display:none}
  .dateien tr{display:grid;grid-template-columns:auto auto 1fr;gap:0 10px;border-bottom:1px solid var(--linie);padding:10px 0}
  .dateien td{border:0;padding:2px 0}
  .dateien td.t{grid-column:1 / -1}
  .zs-detail{grid-template-columns:minmax(0,1fr)}
  .zs-detail .dj{grid-row:auto}
  .zs-detail a{grid-row:auto;grid-column:auto}
  section.rahmen.abschnitt,.weiss-flaeche > .rahmen,.blaupause-flaeche > .rahmen,.dunkel > .rahmen,.kobalt-flaeche > .rahmen,section.seitenkopf{margin-block:18px;box-shadow:3px 3px 0 var(--tinte)}
  .fenster{box-shadow:3px 3px 0 var(--tinte)}
  .fbar .meta{display:none}
  .band{margin-block:22px 0}
}

/* Nachschliff 1 */
.nav a{white-space:nowrap}
.term .zeile-t{display:flex}
@media (max-width: 1560px){.kopf-status{display:none}}
:root{--rahmen:1320px}
.werk-start{max-width:calc(var(--rahmen) + 32px)}
.kopf .rahmen{max-width:calc(var(--rahmen) + 32px)}
.fenster.kobalt .label,.fenster.dunkel .label{color:var(--eis)}
.zs-fenster .zs-marke:hover .schild,.zs-fenster .zs-marke[aria-current="true"] .schild{background:var(--kobalt);color:var(--weiss)}
.zs-fenster .zs-marke:hover .schild b,.zs-fenster .zs-marke[aria-current="true"] .schild b{color:var(--blaupause)}
.foto-w img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block}
.foto-w figcaption{padding:8px 14px;font:400 .75rem/1.4 var(--f-nachweis);color:var(--graphit);border-top:1px solid var(--tinte)}
@media (hover:hover) and (pointer:fine){
  .seite-w .fenster:hover,.foto-w:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinte)}
}
@media (max-width: 1000px){.werk-raster{grid-template-columns:minmax(0,1fr)}}

/* Fenster allgemein: jedes .rahmen.abschnitt (section oder div), jede schlichte section.rahmen und article.rahmen */
main .rahmen.abschnitt,main > section.rahmen:not(.werk-start),main > article.rahmen{
  background:var(--weiss);color:var(--tinte);border:1px solid var(--tinte);box-shadow:var(--schatten-hart);
  padding:0 var(--fp) var(--fp)!important;margin-block:28px;width:calc(100% - 2 * var(--rand));max-width:var(--rahmen)}
main > section:not(.rahmen){background:transparent;border:0}
main > section.dunkel > .rahmen{background:var(--tinte);color:var(--weiss)}
main > section.dunkel > .rahmen > .fbar{background:var(--tinte);color:var(--eis);border-bottom-color:var(--linie-hell)}
main > section.dunkel > .rahmen > .fbar .punkte i{border-color:var(--eis)}
main > section.kobalt-flaeche > .rahmen{background:var(--kobalt-tief);color:var(--weiss)}
main > section.blaupause-flaeche > .rahmen{background:var(--blaupause)}
main .rahmen > .fbar{margin:0 calc(-1 * var(--fp)) var(--fp)}
main > section.seitenkopf{padding-bottom:clamp(28px,4vw,56px)!important}
.kurz{margin:0}
@media (max-width: 680px){
  main .rahmen.abschnitt,main > section.rahmen:not(.werk-start),main > article.rahmen{margin-block:18px;box-shadow:3px 3px 0 var(--tinte)}
}
main{overflow-x:clip}