/* NurDle · Rätselbeilage. Ruhig gesetzt: eine laute Schrift für Schlagzeilen, eine leise für alles andere. */

@font-face{font-family:"Display";src:url(fonts/fira-condensed-heavy.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Doto";src:url(fonts/doto-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#ece8dc; --paper-2:#e2ddcd; --paper-3:#f6f3ea;
  --ink:#151412; --ink-2:#45423b; --ink-3:#64605a; --hair:#cbc4b2;
  /* the one signal colour; darkened enough to hold 3:1 as a mark on paper */
  --signal:#d94800; --warn:#b5361b;
  /* player colours by position in the group; never green or yellow (those belong to the tiles) */
  --p0:#2345c7; --p1:#8e302c; --p2:#5b3fd0; --p3:#1f6b74; --p4:#8a5a00; --p5:#a8326e;
  --t-correct:#3f7d4c; --t-correct-on:#fff;
  --t-present:#d6a92a; --t-present-on:#151412;
  --t-absent:#8a857a; --t-absent-on:#fff;
  --display:"Display","Arial Narrow",sans-serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --doto:"Doto",ui-monospace,monospace;
  --measure:1200px;
  --gut:clamp(16px,3vw,32px);
  color-scheme:light;
}
/* Night edition: warm and a little softer than full contrast, so bold type does not glow. */
@media (prefers-color-scheme:dark){html:not([data-ausgabe=tag]){
  --paper:#201e1b; --paper-2:#2a2824; --paper-3:#2f2c28;
  --ink:#d6d0c2; --ink-2:#bdb7a9; --ink-3:#9a9487; --hair:#3d3a34;
  --signal:#ff7a33; --warn:#ff8a6a;
  --p0:#5b78e0; --p1:#c0605a; --p2:#8a74e6; --p3:#3c97a1; --p4:#b8862e; --p5:#c95d93;
  --t-correct:#4a8a56; --t-present:#c9a234; --t-absent:#55514a;
  color-scheme:dark;
}}
html[data-ausgabe=nacht]{
  --paper:#201e1b; --paper-2:#2a2824; --paper-3:#2f2c28;
  --ink:#d6d0c2; --ink-2:#bdb7a9; --ink-3:#9a9487; --hair:#3d3a34;
  --signal:#ff7a33; --warn:#ff8a6a;
  --p0:#5b78e0; --p1:#c0605a; --p2:#8a74e6; --p3:#3c97a1; --p4:#b8862e; --p5:#c95d93;
  --t-correct:#4a8a56; --t-present:#c9a234; --t-absent:#55514a;
  color-scheme:dark;
}
.p0{--p:var(--p0)}.p1{--p:var(--p1)}.p2{--p:var(--p2)}.p3{--p:var(--p3)}.p4{--p:var(--p4)}.p5{--p:var(--p5)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--ink-3)}.small{font-size:14px}.warn{color:var(--warn)}
/* the only uppercase voice, kept for navigation and a few column heads */
.label{font:600 12px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.d{font-family:var(--doto);font-weight:900;-webkit-text-stroke:.45px currentColor;line-height:.9}

/* ---------- masthead ---------- */
.titel{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 0 10px}
.titel a{text-decoration:none}
.marke{display:block;margin:0;font:900 clamp(48px,8vw,104px)/.8 var(--display);letter-spacing:-.03em}
.marke i{font-style:normal;color:var(--signal)}
.datum{font-size:14px;color:var(--ink-2);padding-bottom:4px;white-space:nowrap}
.ressorts{border-top:3px solid var(--ink);display:flex;overflow-x:auto;scrollbar-width:none}
.ressorts::-webkit-scrollbar{display:none}
.ressorts a{flex:0 0 auto;text-decoration:none;font:600 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:14px 14px 13px;color:var(--ink-2);position:relative}
.ressorts a:first-child{padding-left:0}
.ressorts a:hover,.ressorts a[aria-current]{color:var(--ink)}
.ressorts a[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--signal)}
.ressorts a:first-child[aria-current]::after{left:0}
.ressorts .rechts{margin-left:auto}
.linie{border-top:1px solid var(--ink)}

/* weight line: the day's progress, the only ornament */
.gewicht{position:relative;margin:-2px 0 40px}
.weight-line{width:100%;height:64px;position:relative;color:var(--ink)}
.weight-line button{display:block;width:100%;height:100%;border:0;padding:0;background:transparent;color:inherit;cursor:grab;touch-action:pan-y}
.weight-line button:hover{background:transparent}
.weight-line svg{width:100%;height:100%;display:block;overflow:visible}
.weight-line path{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.weight-line .heavy{stroke-width:4}
.weight-line .light{stroke-width:1}
.plumb{position:absolute;top:var(--top,0);left:clamp(32px,var(--x),calc(100% - 32px));pointer-events:none;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,var(--y,0))}
.plumb::before{content:"";width:1px;height:12px;background:var(--ink)}
.plumb b{-webkit-text-stroke:.45px currentColor;display:block;padding:6px 8px 4px;background:var(--ink);color:var(--paper);font:900 20px/1 var(--doto);white-space:nowrap}

main{padding-bottom:16px}

/* ---------- type ---------- */
.schlagzeile{margin:0 0 10px;font:900 clamp(44px,7vw,96px)/.92 var(--display);letter-spacing:-.02em;text-wrap:balance}
.unterzeile{margin:0;font:400 clamp(16px,1.7vw,19px)/1.45 var(--sans);color:var(--ink-2);text-wrap:pretty}
h1{margin:32px 0 18px;font:900 clamp(32px,4vw,48px)/.95 var(--display);letter-spacing:-.01em}
h2{font:900 26px/1 var(--display);margin:32px 0 12px}
.rubrik{margin:44px 0 0;padding-bottom:10px;border-bottom:3px solid var(--ink);font:900 28px/1 var(--display)}

/* the single pen circle on a page: around the day's leader */
.kringel{position:relative;display:inline-block;isolation:isolate}
.kringel svg{position:absolute;inset:-8px -11px -7px -11px;width:calc(100% + 22px);height:calc(100% + 15px);overflow:visible;pointer-events:none;z-index:-1}
.kringel path{fill:none;stroke:var(--signal);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:ziehen 700ms cubic-bezier(.6,.05,.3,1) 300ms forwards}
@keyframes ziehen{to{stroke-dashoffset:0}}
/* winner mark in lists: bold plus a small dot */
.sieger{font-weight:800}
.sieger::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--signal);margin-right:7px;vertical-align:.12em}

/* ---------- guess tiles: colour plus a quiet shape for colour-blind readers ---------- */
.kacheln{display:grid;grid-template-columns:repeat(var(--cols,5),var(--k,44px));gap:3px;width:max-content;max-width:100%}
.kachel{position:relative;width:var(--k,44px);height:var(--k,44px);display:grid;place-items:center;background:var(--paper-3);border:1.5px solid var(--hair);color:var(--ink);font:700 calc(var(--k,44px) * .44)/1 var(--sans);text-transform:uppercase}
.kachel.correct{background:var(--t-correct);border-color:var(--t-correct);color:var(--t-correct-on)}
.kachel.present{background:var(--t-present);border-color:var(--t-present);color:var(--t-present-on)}
.kachel.absent{background:var(--t-absent);border-color:var(--t-absent);color:var(--t-absent-on)}
.kachel.correct::after{content:"";position:absolute;top:3px;right:3px;width:max(3px,12%);height:max(3px,12%);background:currentColor;opacity:.7}
.kachel.present::before{content:"";position:absolute;inset:20%;border:1.5px solid currentColor;border-radius:50%;opacity:.55}
.silhouette{display:flex;gap:12px;margin:12px 0 0;flex-wrap:wrap}
.silhouette .kacheln{--k:8px;gap:1px;padding-bottom:4px;border-bottom:2px solid var(--p,var(--hair))}
.silhouette .kachel{border-width:0;font-size:0}
.silhouette .kachel::before,.silhouette .kachel::after{display:none}

/* ---------- Heute ---------- */
.aufmacher{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding-bottom:30px;border-bottom:1px solid var(--ink)}
.offen-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.offen-links a{font:600 14px/1 var(--sans);text-decoration:none;border:1.5px solid var(--ink);padding:11px 13px}
.offen-links a:hover{background:var(--ink);color:var(--paper)}
.gruppen{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}

.raster{border-collapse:collapse;--z:30px;width:auto}
.raster th,.raster td{padding:0;border:0;text-transform:none;letter-spacing:0;font-weight:inherit;color:inherit}
.raster thead th{font:600 10px/1 var(--sans);color:var(--ink-3);padding-bottom:6px;text-align:center;letter-spacing:.02em}
.raster tbody th{text-align:left;padding-right:12px;font:650 15px/1 var(--sans);white-space:nowrap}
.raster tbody th::before{content:"";display:inline-block;width:8px;height:8px;background:var(--p);margin-right:7px;vertical-align:.08em}
.raster tbody tr + tr > *{padding-top:6px}
.zelle{display:grid;place-items:center;width:var(--z);height:var(--z);background:var(--paper-2);margin-right:2px;text-decoration:none}
.zelle.sieg{background:var(--p)}
.zelle.gespielt{background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--hair)}
.zelle.gespielt::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-2)}
.zelle.solo{background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--hair)}
.zelle.solo::after{content:"";width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
a.zelle:hover{outline:2px solid var(--ink);outline-offset:-1px}
.raster td.summe{padding-left:12px;text-align:right}
.siege{font-size:28px}

.spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
.raetsel{position:relative;padding:20px 0 22px;border-bottom:1px solid var(--hair)}
.raetsel.vorn{border-top:4px solid var(--p);margin-top:-1px;padding-top:16px}
.raetsel h3{margin:0 0 10px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:900 24px/1 var(--display)}
.raetsel h3 a{text-decoration:none}
.raetsel h3 a.detail::after{content:"";position:absolute;inset:0}
.raetsel h3 a.detail:hover{text-decoration:underline;text-decoration-thickness:2px}
.raetsel .spiel{position:relative;z-index:1;font:600 14px/1 var(--sans);color:var(--ink-3);text-decoration:none;padding:12px;margin:-12px -12px -12px 0}
.raetsel .spiel:hover{color:var(--ink)}
.ergebnisse{list-style:none;margin:0;padding:0}
.ergebnisse li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:16px}
.ergebnisse .wert{white-space:nowrap;font-weight:600}
.ergebnisse li.verdeckt{color:var(--ink-3)}
.ergebnisse li.verdeckt .wert{font-weight:400}
.raetsel .leer{color:var(--ink-3);margin:0}

.vermisst{padding:20px 0 22px;border-bottom:1px solid var(--hair)}
.vermisst .rahmen{border:1.5px solid var(--ink);background:var(--paper-2);padding:14px 16px}
.vermisst .ruf{font:900 30px/1 var(--display);text-transform:uppercase;margin:0 0 4px}
.vermisst p{margin:0}

/* ---------- puzzle detail ---------- */
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-top:24px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.kopfzeile .schlagzeile{font-size:clamp(40px,6vw,80px)}
.nr{font:400 .45em/1 var(--sans);color:var(--ink-3);letter-spacing:0;margin-left:.2em}
.werkzeug{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-bottom:6px}
.knopf-text{font:600 14px/1 var(--sans);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.knopf-text:hover{border-color:var(--signal)}
.wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:40px}
.weg{padding:22px 0 26px;border-bottom:1px solid var(--hair);min-width:0}
.weg header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:8px;border-bottom:3px solid var(--p)}
.weg h2{margin:0;font:900 32px/.95 var(--display)}
.weg .ergebnis{white-space:nowrap;font:900 32px/.95 var(--display)}
.weg .ergebnis.sieg{color:var(--signal)}
.weg .zeit{color:var(--ink-3);font-size:14px;margin:-8px 0 12px}
.weg .kacheln{--k:44px}
.weg .verdeckt{color:var(--ink-3);margin:0}
.zeilen{list-style:none;margin:0;padding:0}
.zeilen li{display:grid;grid-template-columns:1.6em auto 1fr auto;gap:10px;align-items:center;padding:5px 0}
.zeilen .n{color:var(--ink-3);font-size:13px}
.zeilen .kachel{--k:18px}
.zeilen .kachel::after,.zeilen .kachel::before{display:none}
.zeilen .pkt{font-weight:650}
.notizen{margin:16px 0 0}
.notizen summary{cursor:pointer;color:var(--ink-3);font-size:14px}
.notizen ol{list-style:none;margin:8px 0 0;padding:0}
.notizen li{display:grid;grid-template-columns:4.4em 6em 1fr;gap:10px;align-items:baseline;padding:2px 0;font-size:14px}
.notizen time{text-align:right;color:var(--ink-3)}
.notizen .art{color:var(--ink-3)}
.notizen .wort{font-weight:650;text-transform:uppercase;letter-spacing:.05em}
.notizen .x .wort{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--signal)}
body.spoiler .weg .kachel{color:transparent}
body.spoiler .notizen .wort,body.spoiler .zeilen .wort{filter:blur(5px)}

/* ---------- board ---------- */
.tabelle{width:100%;border-collapse:collapse;margin-top:8px}
.tabelle th{text-align:right;padding:0 8px 8px}
.tabelle th:nth-child(-n+2){text-align:left}
.tabelle td{padding:14px 8px;border-bottom:1px solid var(--hair);text-align:right;vertical-align:middle}
.tabelle td:nth-child(-n+2){text-align:left}
.tabelle .pl{font:600 18px/1 var(--sans);width:1.6em;color:var(--ink-3)}
.tabelle .wer{font:900 28px/.95 var(--display)}
.tabelle .wer::before{content:"";display:inline-block;width:10px;height:10px;background:var(--p);margin-right:10px;vertical-align:.15em}
.tabelle .gross{font:900 36px/1 var(--doto);-webkit-text-stroke:.45px currentColor}
.tabelle .wert-zahl{font-size:18px;font-weight:600}
.zeitraum{display:inline-flex;border:1.5px solid var(--ink);flex-wrap:wrap}
.zeitraum a{font:600 13px/1 var(--sans);text-decoration:none;padding:10px 12px;border-left:1.5px solid var(--ink);white-space:nowrap}
.zeitraum a:first-child{border-left:0}
.zeitraum a[aria-current]{background:var(--ink);color:var(--paper)}
.kaesten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
.kasten{padding:18px 0 20px;border-bottom:1px solid var(--hair);min-width:0}
.kasten h3{margin:0 0 8px;font:900 22px/1 var(--display)}
.mini{width:100%;border-collapse:collapse;font-size:14px}
.mini th{font:600 11px/1 var(--sans);letter-spacing:.03em;text-transform:none;color:var(--ink-3);text-align:right;padding:0 4px 6px;border-bottom:1px solid var(--ink)}
.mini th:first-child,.mini td:first-child{text-align:left;padding-left:0}
.mini td{padding:5px 4px;text-align:right;border-bottom:0;white-space:nowrap}
.mini tr.s td{font-weight:800}
.mini tr.n td{color:var(--ink-3)}

/* ---------- generic pieces for the plainer pages ---------- */
.card{border-top:1px solid var(--ink);padding:18px 0;margin-bottom:8px}
.card h2:first-child{margin-top:0}
.grid{display:grid;gap:24px 40px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--hair)}
th{font:600 12px/1.2 var(--sans);letter-spacing:.03em;color:var(--ink-3);border-bottom:1px solid var(--ink)}
td.num,th.num{text-align:right}
form.stack{display:grid;gap:14px;max-width:440px}
label{display:grid;gap:6px;font:600 14px/1.2 var(--sans);color:var(--ink-2)}
label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px;font-weight:400;color:var(--ink)}
input,textarea,select{font:400 16px/1.3 var(--sans);height:44px;padding:0 12px;border:1.5px solid var(--ink);border-radius:0;background:var(--paper-3);color:var(--ink)}
input[type=checkbox]{accent-color:var(--signal);width:18px;height:18px;padding:0}
textarea{height:auto;min-height:150px;padding:10px 12px;font-family:ui-monospace,monospace;font-size:14px}
button,.btn{font:650 14px/1 var(--sans);height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
button:hover,.btn:hover{background:var(--ink-2);border-color:var(--ink-2)}
button.ghost{background:transparent;color:var(--ink)}
button.ghost:hover{background:var(--paper-3)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}
.pill{display:inline-block;font:600 13px/1 var(--sans);padding:8px 10px;border:1.5px solid var(--ink);color:var(--ink-2);text-decoration:none}
.pill.done{background:var(--ink);color:var(--paper)}
details > summary{cursor:pointer}
.tiles{display:grid;gap:3px;grid-template-columns:repeat(var(--cols),26px)}
.tile{width:26px;height:26px;display:inline-grid;place-items:center;font-weight:700;font-size:13px;text-transform:uppercase;color:#fff;vertical-align:middle}
.tile.correct{background:var(--t-correct)}.tile.present{background:var(--t-present);color:var(--t-present-on)}.tile.absent{background:var(--t-absent)}
.bars{display:grid;gap:3px}.bar{display:flex;gap:8px;align-items:center;font-size:13px}.bar span.fill{background:var(--ink-2);height:12px;min-width:2px}
.flash{padding:12px 14px;margin:20px 0 0;border:1.5px solid var(--ink);background:var(--paper-3)}
.flash.error{border-color:var(--warn);color:var(--warn)}
code{font-family:ui-monospace,monospace;background:var(--paper-2);padding:1px 5px}
.ausgabe{display:inline-flex;border:1.5px solid var(--ink)}
.ausgabe button{height:40px;background:transparent;color:var(--ink-2);border:0}
.ausgabe button + button{border-left:1.5px solid var(--ink)}
.ausgabe button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

.fuss{margin-top:56px;border-top:1px solid var(--ink);padding:14px 0 40px;font-size:14px;color:var(--ink-3)}
.fuss .wrap{display:flex;justify-content:flex-end;gap:16px}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}

@media (max-width:980px){.spalten,.kaesten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .aufmacher{grid-template-columns:1fr;gap:28px}
  .kopfzeile{grid-template-columns:1fr}
  .werkzeug{flex-direction:row;flex-wrap:wrap;gap:14px 22px;align-items:center}
}
@media (max-width:620px){
  .titel{padding:12px 0 8px}
  .marke{font-size:46px}
  .ressorts a{padding:13px 10px 12px}
  .ressorts a[aria-current]::after{left:10px;right:10px}
  .ressorts a:first-child[aria-current]::after{left:0}
  .ressorts .rechts{margin-left:0}
  .weight-line{height:50px}
  .gewicht{margin-bottom:34px}
  .plumb b{font-size:16px;padding:5px 6px 3px}
  .schlagzeile{font-size:46px}
  .spalten,.kaesten{grid-template-columns:1fr}
  .raster{--z:24px}
  .raster tbody th{font-size:14px;padding-right:8px}
  .siege{font-size:22px}
  .raster td.summe{padding-left:8px}
  .zelle{margin-right:1px}
  .weg .kacheln{--k:min(48px,calc((100vw - 2 * var(--gut) - 4 * 3px) / var(--cols,5)))}
  .tabelle .col-weg{display:none}
  .tabelle td{padding:12px 4px}
  .tabelle .wer{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.kringel path{animation:none;stroke-dashoffset:0}}