/* ══════════════════════════════════════════════════════════════
   LUX REGULIS · Lokale KI

   Schrift: Schibsted Grotesk, allein. Entworfen von Bakken & Bæck
   für die skandinavische Mediengruppe Schibsted, gemacht für
   redaktionelle Arbeit. Eine einzige Familie für die ganze Seite,
   auch für Ziffern und Kennungen. Keine zweite Schrift, keine
   Monospace-Etiketten. Das ist der stärkste Hebel gegen den
   maschinellen Eindruck: Disziplin statt Auswahl.

   Farben nach Brand Book v1.0. Ein Akzent. Scharfe Ecken.
   Dials: VARIANCE 8 · MOTION 7 · DENSITY 3

   Ausgelagert aus dem HTML-Kopf, damit die Content Security
   Policy ohne 'unsafe-inline' auskommt (Übergabe, Aufgabe C).
   Schrift self-hosted statt Google Fonts (Aufgabe A, DSGVO).
   ══════════════════════════════════════════════════════════════ */

/* Variabler Schnitt, lateinischer Zeichensatz, SIL Open Font License.
   Quelle: Fontsource (github.com/schibsted/schibsted-grotesk). */
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/assets/fonts/schibsted-grotesk.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --gold:#E5A122; --gold-txt:#96660F;
  --ink:#14120F; --white:#FFFFFF;
  --n700:#4A463D; --n500:#6E6961; --n300:#C9C4B9; --n200:#E4E0D7; --n100:#F4F2ED;
  --ok:#2E7D5B; --minor:#B8791A; --major:#C1443B; --pruef:#3E6B8C;
  --f:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --gut:clamp(20px,4.4vw,72px);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{background:var(--white);color:var(--n700);font-family:var(--f);
  font-size:17.5px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased}
/* Tabellarische Ziffern nur, wo Zahlen fluchten müssen. Global auf body
   gab Schibsted Grotesk auch Komma und Punkt Ziffernbreite, im Fließtext
   entstanden sichtbare Lücken vor jedem Satzzeichen (Defekt der Vorlage). */
table,.frist .date,.rows .idx,.meta-list{font-variant-numeric:tabular-nums}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:1.5px solid var(--gold-txt);outline-offset:4px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--white);
  padding:14px 20px;font-size:13px;text-decoration:none;z-index:99}
.skip:focus{left:12px;top:12px}
.hold{max-width:1520px;margin:0 auto;padding-inline:var(--gut)}

.display{font-size:clamp(34px,5.4vw,88px);line-height:1.0;letter-spacing:-.038em;
  font-weight:600;overflow-wrap:anywhere}
h2{font-size:clamp(25px,3.2vw,46px);line-height:1.06;letter-spacing:-.032em;font-weight:600;
  color:var(--ink);overflow-wrap:anywhere}
h3{font-size:20px;line-height:1.3;letter-spacing:-.018em;font-weight:600;color:var(--ink)}
p{max-width:58ch}
.label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--gold-txt)}

/* Ersatz für frühere style-Attribute, denn CSP ohne unsafe-inline
   verbietet auch Inline-Stile am Element. */
.mw-11{max-width:11ch}
.mw-14{max-width:14ch}
.mw-15{max-width:15ch}
.mw-17{max-width:17ch}
.mw-20{max-width:20ch}
.mt-0{margin-top:0}
.mt-10{margin-top:10px}
.intro{margin-top:22px;font-size:16.5px}
th.sp-8{width:8%}
th.sp-16{width:16%}
th.sp-30{width:30%}

/* Kopfzeile ─────────────────────────────────────────────────── */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;height:64px;display:flex;align-items:center;
  color:#fff;transition:background .45s var(--ease),color .45s var(--ease),
  border-color .45s var(--ease);border-bottom:1px solid transparent}
/* Über den Bildtafeln: eigener Verlauf, damit die Marke auf jedem Foto steht */
.bar::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,11,.72) 0%,rgba(14,13,11,.34) 55%,rgba(14,13,11,0) 100%);
  transition:opacity .45s var(--ease)}
/* Über den hellen Abschnitten: Tinte auf Weiß */
.bar.hell{color:var(--ink);background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom-color:var(--n200)}
.bar.hell::before{opacity:0}
.bar .in{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(16px,3vw,44px);width:100%;
  max-width:1520px;margin:0 auto;padding-inline:var(--gut)}
.bar a{color:inherit;text-decoration:none}
.bar .mark{display:flex;align-items:center;gap:13px;font-size:13px;letter-spacing:.2em;
  font-weight:600;white-space:nowrap}
.bar .mark svg{width:26px;height:26px;flex:none;display:block}   /* Schutzraum = halbe Höhe */
.bar nav{margin-left:auto;display:flex;gap:clamp(14px,2vw,30px);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.bar nav a{opacity:.82;transition:opacity .3s var(--ease)}
.bar nav a:hover{opacity:1}
@media (max-width:820px){ .bar nav a:not(.keep){display:none} }

/* ── DIE FAHRT ─────────────────────────────────────────────── */
.ride{position:relative;background:var(--ink)}
.strip{display:flex;height:100svh;align-items:stretch;will-change:transform}
.tafel{position:relative;flex:0 0 auto;height:100svh;overflow:clip;background:#1A1815}
.tafel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tafel .wash{position:absolute;inset:0}
.w100{width:100vw} .w85{width:85vw} .w48{width:48vw}

/* Textbox wächst mit der Viewportbreite (Deckel 980px). Eine feste
   ch-Breite brach auf breiten Monitoren die Headline mitten im Wort. */
.tafel .txt{position:absolute;max-width:min(46vw,980px);padding:0 var(--gut)}
.bl .txt{left:0;bottom:clamp(52px,9vh,116px)}
.tl .txt{left:0;top:clamp(96px,14vh,150px)}
.br .txt{right:0;bottom:clamp(52px,9vh,116px);text-align:right}
.tr .txt{right:0;top:clamp(96px,14vh,150px);text-align:right}
.br .txt p,.tr .txt p{margin-left:auto}
.tafel h2,.tafel .display{color:var(--white);text-shadow:0 2px 44px rgba(0,0,0,.55)}
.tafel p{margin-top:15px;color:#EDEAE2;font-size:clamp(15.5px,1.15vw,17.5px);max-width:44ch;
  text-shadow:0 1px 24px rgba(0,0,0,.65)}
/* Verläufe kräftiger als in der Vorlage: die KI-Motive haben helle
   Himmel und Nebel, sonst säuft weißer Text ab. */
.bl .wash,.br .wash{background:linear-gradient(0deg,rgba(14,13,11,.88) 0%,rgba(14,13,11,.24) 46%,rgba(14,13,11,.38) 100%)}
.tl .wash,.tr .wash{background:linear-gradient(180deg,rgba(14,13,11,.88) 0%,rgba(14,13,11,.22) 52%,rgba(14,13,11,.42) 100%)}

.schnitt{background:#101317}
.schnitt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);
  opacity:.85;z-index:3}
.schnitt .cap{position:absolute;left:0;bottom:clamp(52px,9vh,116px);
  padding:0 clamp(22px,3vw,48px);z-index:3}
.schnitt .cap .label{color:var(--gold);display:block}
.schnitt .cap strong{display:block;margin-top:13px;color:var(--white);
  font-size:clamp(19px,1.6vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.22;
  max-width:20ch}
.schnitt .wash{background:linear-gradient(0deg,rgba(8,10,13,.90) 0%,rgba(8,10,13,.30) 54%,rgba(8,10,13,.46) 100%)}
.schnitt img{filter:saturate(.7)}

.origin{margin-top:20px;max-width:40ch;font-size:14.5px;line-height:1.55;color:#D4CEC4;
  border-left:1px solid var(--gold);padding-left:15px;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.tr .origin,.br .origin{border-left:0;border-right:1px solid var(--gold);padding-left:0;
  padding-right:15px;margin-left:auto}

.pending{position:absolute;inset:0;display:grid;place-items:center;background:#221F1A;padding:24px}
.schnitt .pending{background:#141820}
.pending span{font-size:13px;letter-spacing:.1em;color:#9A9384;text-align:center;
  line-height:2.2;text-transform:uppercase;font-weight:500}

/* Streckenband ──────────────────────────────────────────────── */
.km{position:absolute;left:0;right:0;bottom:0;z-index:20;pointer-events:none;
  padding:0 var(--gut) clamp(14px,2.2vh,24px)}
.km .track{position:relative;height:1px;background:rgba(255,255,255,.20)}
.km .fill{position:absolute;left:0;top:0;height:1px;background:var(--gold);width:0%}
.km .tick{position:absolute;top:-3px;width:1px;height:7px;background:rgba(255,255,255,.3);
  transition:background .5s var(--ease)}
.km .tick.on{background:var(--gold)}
.km .names{display:flex;justify-content:space-between;margin-top:11px;pointer-events:auto}
.km .names button{appearance:none;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:rgba(255,255,255,.72);padding:9px 2px;line-height:1;
  transition:color .4s var(--ease)}
.km .names button:hover{color:rgba(255,255,255,.92)}
.km .names button.on{color:var(--gold)}
.km .names button:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}

/* ── Ruhige Abschnitte ─────────────────────────────────────── */
.quiet{padding:clamp(76px,12vh,180px) 0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,5vw,88px);align-items:start}
@media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr);gap:22px} }
.stack{display:grid;gap:clamp(18px,2.4vw,34px)}
.line{border-top:1px solid var(--n200);padding-top:18px}
.line h3{margin-bottom:8px}
.line p{font-size:16.5px;max-width:52ch}

.report{margin-top:clamp(30px,4.4vw,56px);overflow-x:auto}
table{width:100%;min-width:680px;border-collapse:collapse;font-size:16px}
thead th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--n500);text-align:left;padding:0 24px 14px 0;border-bottom:1px solid var(--ink)}
tbody td{padding:19px 24px 19px 0;border-bottom:1px solid var(--n200);vertical-align:baseline}
tbody tr:last-child td{border-bottom:1px solid var(--ink)}
td.k{font-size:13px;letter-spacing:.08em;color:var(--n500);white-space:nowrap;font-weight:500}
td.t{color:var(--ink);font-weight:600}
td.n{font-size:15.5px}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:4px 11px;border-radius:999px;white-space:nowrap}
.badge i{width:5px;height:5px;border-radius:50%;flex:none}
.badge.ok{background:#E9F3EE;color:#215A42} .badge.ok i{background:var(--ok)}
.badge.minor{background:#F8EFDD;color:#7E520F} .badge.minor i{background:var(--minor)}
.badge.major{background:#F9E7E5;color:#8E2F29} .badge.major i{background:var(--major)}
.badge.pruef{background:#E7EEF4;color:#2C4C64} .badge.pruef i{background:var(--pruef)}

.rows{margin-top:clamp(28px,4vw,52px);border-top:1px solid var(--ink)}
.rows .r{display:grid;grid-template-columns:minmax(0,60px) minmax(0,1fr) minmax(0,170px);
  gap:clamp(14px,3vw,48px);padding:clamp(20px,2.4vw,32px) 0;
  border-bottom:1px solid var(--n200);align-items:baseline}
.rows .r:last-child{border-bottom:1px solid var(--ink)}
.rows .idx{font-size:13px;font-weight:600;color:var(--gold-txt);letter-spacing:.04em}
.rows p{margin-top:8px;font-size:16px;max-width:56ch}
.rows .meta{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--n500);text-align:right}
@media (max-width:820px){
  .rows .r{grid-template-columns:minmax(0,1fr);gap:8px}
  .rows .meta{text-align:left;margin-top:8px}
}

.frist{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);align-items:start;margin-top:clamp(28px,4vw,52px);
  padding-bottom:clamp(30px,4vw,52px);border-bottom:1px solid var(--ink)}
.frist .date{font-size:clamp(38px,5.6vw,86px);line-height:.92;letter-spacing:-.045em;
  font-weight:600;color:var(--ink)}
.frist .date small{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-txt);margin-bottom:14px;font-weight:600}
@media (max-width:820px){ .frist{grid-template-columns:minmax(0,1fr);gap:18px} }
.pairs{margin-top:clamp(26px,3vw,44px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,48px)}
.pairs .p{border-top:1px solid var(--n200);padding-top:16px}
.pairs .p h3{font-size:18px;margin-bottom:4px}
.pairs .p .term{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--n500);margin-bottom:10px}
.pairs .p p{font-size:15.5px;max-width:44ch}
@media (max-width:820px){ .pairs{grid-template-columns:minmax(0,1fr)} }

.qa{margin-top:clamp(24px,3vw,42px);border-top:1px solid var(--ink)}
.qa details{border-bottom:1px solid var(--n200)}
.qa summary{list-style:none;cursor:pointer;padding:23px 0;display:flex;
  justify-content:space-between;align-items:baseline;gap:26px;
  font-size:19px;font-weight:600;letter-spacing:-.018em;color:var(--ink);overflow-wrap:anywhere}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'';width:9px;height:9px;flex:none;
  border-right:1px solid var(--gold-txt);border-bottom:1px solid var(--gold-txt);
  transform:rotate(45deg) translateY(-3px);transition:transform .4s var(--ease)}
.qa details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.qa .a{padding:0 0 25px;max-width:62ch;font-size:16.5px}

.btn{display:inline-flex;align-items:center;text-decoration:none;font-size:15px;font-weight:600;
  padding:15px 26px;border:1px solid transparent;white-space:nowrap;letter-spacing:-.005em;
  transition:transform .35s var(--ease),background .35s var(--ease),
             color .35s var(--ease),border-color .35s var(--ease)}
.btn:active{transform:translateY(-1px)}
.btn--ink{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--ink:hover{background:#2B2721}
.btn--line{color:var(--ink);border-color:var(--n300)}
.btn--line:hover{border-color:var(--ink)}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--gold:hover{background:#D5931B}
.btn--onimg{color:#fff;border-color:rgba(255,255,255,.52)}
.btn--onimg:hover{background:#fff;color:var(--ink);border-color:#fff}
.acts{margin-top:clamp(22px,2.6vw,36px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tr .acts,.br .acts{justify-content:flex-end}

.word{background:var(--ink);color:var(--white);padding:clamp(74px,13vh,170px) 0}
.word blockquote{font-size:clamp(26px,4.2vw,62px);line-height:1.05;letter-spacing:-.035em;
  font-weight:600;max-width:20ch}
.word .who{margin-top:30px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:var(--gold)}

.meta-list{display:grid;gap:13px;font-size:16px}
.meta-list div{display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:20px;
  padding-bottom:13px;border-bottom:1px solid var(--n200)}
.meta-list dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--n500);padding-top:5px}
.meta-list dd{color:var(--ink);font-weight:600}
.ortsnote{margin-top:clamp(30px,4vw,52px);padding-top:20px;border-top:1px solid var(--n200);
  font-size:15px;color:var(--n500);max-width:64ch}
footer{border-top:1px solid var(--n200);padding:24px 0 60px;margin-top:clamp(56px,8vh,110px);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:12px;letter-spacing:.09em;color:var(--n500);text-transform:uppercase;font-weight:500}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

.rise{opacity:0;transform:translateY(20px)}

@media (max-width:900px){
  .strip{flex-direction:column;height:auto;transform:none !important}
  .tafel{width:100% !important;height:82svh}
  .km{position:sticky;bottom:0;padding-bottom:10px;
    background:linear-gradient(0deg,rgba(14,13,11,.9),rgba(14,13,11,0))}
  .km .track,.km .tick{display:none}
  .km .names{overflow-x:auto;justify-content:flex-start;gap:16px;margin-top:0;scrollbar-width:none}
  .km .names::-webkit-scrollbar{display:none}
  .tafel .txt{max-width:none}
  .br .txt,.tr .txt{text-align:left}
  .br .txt p,.tr .txt p{margin-left:0}
  .tr .origin,.br .origin{border-right:0;border-left:1px solid var(--gold);
    padding-right:0;padding-left:15px;margin-left:0}
  .tr .acts,.br .acts{justify-content:flex-start}
  .tl .txt,.tr .txt{top:auto;bottom:clamp(44px,7vh,84px)}
}
@media (prefers-reduced-motion:reduce){
  .strip{flex-direction:column;height:auto;transform:none !important}
  .tafel{width:100% !important;height:78svh}
  .km .track,.km .tick{display:none}
  .rise{opacity:1;transform:none}
  .btn{transition:none}
}