:root {
  --grund: #0f1115;
  --flaeche: #171a20;
  --rand: #262a33;
  --text: #b9bdc5;
  --leise: #7c818b;
  --akzent: #8fa3c4;
  --neu: #86ad8f;
  --neu-grund: #1a261d;
  --weg: #c08f8f;
  --weg-grund: #2a1c1c;
}
* { box-sizing: border-box; }
html { background: var(--grund); }
body {
  margin: 0 auto; max-width: 640px; min-height: 100vh;
  padding: max(16px, env(safe-area-inset-top)) 16px 32px;
  background: var(--grund); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
h1 { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--text); }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
.knoepfe { display: flex; gap: 8px; }
.knopf {
  font: inherit; color: var(--text); background: #222733; border: 1px solid var(--rand);
  border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.leise { background: transparent; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; padding: 16px; }
.stand { display: grid; gap: 10px; justify-items: start; }
.zahl { display: flex; align-items: baseline; gap: 8px; }
.zahl span { font-size: 2.4rem; font-weight: 600; line-height: 1; color: #d0d3d9; }
.zahl small { color: var(--leise); }
.status { margin: 0; color: var(--leise); font-size: .92rem; }
.status.fehler { color: var(--weg); }
.status.laeuft::before {
  content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em;
  border: 2px solid var(--leise); border-top-color: transparent; border-radius: 50%;
  animation: dreh 1s linear infinite; vertical-align: -1px;
}
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status.laeuft::before { animation: none; } }

.reiter { display: flex; gap: 4px; margin: 20px 0 12px; border-bottom: 1px solid var(--rand); }
.reiter button {
  font: inherit; background: none; border: 0; color: var(--leise); padding: 8px 12px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent); }

.tag { margin: 0 0 18px; }
.tag h3 { font-size: .85rem; font-weight: 500; color: var(--leise); margin: 0 0 6px; }
.eintrag { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; }
.marke {
  flex: none; min-width: 3.6em; text-align: center; font-size: .78rem; font-weight: 600;
  border-radius: 6px; padding: 2px 6px; margin-top: 2px;
}
.marke.neu { color: var(--neu); background: var(--neu-grund); }
.marke.weg { color: var(--weg); background: var(--weg-grund); }
.marke.start { color: var(--leise); background: #1d2027; }
.eintrag .wer { display: flex; flex-wrap: wrap; gap: 4px 12px; }
details summary { cursor: pointer; color: var(--leise); }
.leer { color: var(--leise); }

#suche {
  width: 100%; font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}
.namen { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 16px; }
.namen li { padding: 3px 0; break-inside: avoid; overflow-wrap: anywhere; }
@media (max-width: 380px) { .namen { columns: 1; } }

dialog {
  background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: 14px;
  width: min(92vw, 460px); padding: 20px;
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
label { display: block; margin-bottom: 12px; }
label small { color: var(--leise); }
label input {
  display: block; width: 100%; margin-top: 4px; font: inherit; color: var(--text);
  background: var(--grund); border: 1px solid var(--rand); border-radius: 8px; padding: 8px 10px;
}
.hinweis { font-size: .85rem; color: var(--leise); }
.zeile { display: flex; justify-content: space-between; gap: 8px; }

/* Beschlag (12.11.2026): Alles mit Rahmen trägt einen eckigen Innenrahmen in der Rundung und
   vier kleine Schrauben in Weißgold, wie die Kacheln der Startseite. Licht von rechts
   oben, darum fallen die Schatten nach links unten. Der Beschlag liegt als acht
   Hintergrund-Ebenen (--beschlag: vier Schrauben, vier Linien) vor dem eigenen Grund
   jedes Bauteils. Die Namen beginnen mit bsl-, weil viele Werkzeuge --bg selbst
   für ihre Hintergrundfarbe benutzen. --bsl-i Abstand des Rahmens von der Innenkante, --bsl-g Schraubengröße,
   --bsl-a Abstand der Schraube vom Rahmen, --bsl-l Linienfarbe. Gebaut mit einbau.py. */
:root {
  --schraube-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cdefs%3E%3CradialGradient id='s' cx='42%' cy='58%' r='50%'%3E%3Cstop offset='55%' stop-opacity='.6'/%3E%3Cstop offset='100%' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='k' cx='66%' cy='30%' r='78%'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.2' stop-color='%23FFFCEE'/%3E%3Cstop offset='.5' stop-color='%23F1E4BC'/%3E%3Cstop offset='.8' stop-color='%23C4A964'/%3E%3Cstop offset='1' stop-color='%237A6226'/%3E%3C/radialGradient%3E%3ClinearGradient id='m' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A22' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%23FFF3C4' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FFFBEA' stop-opacity='.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='5.1' cy='6.9' r='5' fill='url(%23s)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='url(%23k)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='none' stroke='%23553E0C' stroke-opacity='.6' stroke-width='.45'/%3E%3Ccircle cx='6' cy='6' r='2.9' fill='none' stroke='url(%23m)' stroke-width='.5'/%3E%3Cg transform='rotate(32 6 6)'%3E%3Cpath d='M2.5 6h7' stroke='%233A2A07' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M2.7 6.62h6.6' stroke='%23FFF7DA' stroke-opacity='.75' stroke-width='.3' stroke-linecap='round'/%3E%3C/g%3E%3Cellipse cx='7.7' cy='3.9' rx='1.05' ry='.6' transform='rotate(-35 7.7 3.9)' fill='%23FFFFFF' fill-opacity='.9'/%3E%3C/svg%3E");
  --schraube-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cdefs%3E%3CradialGradient id='s' cx='42%' cy='58%' r='50%'%3E%3Cstop offset='55%' stop-opacity='.6'/%3E%3Cstop offset='100%' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='k' cx='66%' cy='30%' r='78%'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.2' stop-color='%23FFFCEE'/%3E%3Cstop offset='.5' stop-color='%23F1E4BC'/%3E%3Cstop offset='.8' stop-color='%23C4A964'/%3E%3Cstop offset='1' stop-color='%237A6226'/%3E%3C/radialGradient%3E%3ClinearGradient id='m' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A22' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%23FFF3C4' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FFFBEA' stop-opacity='.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='5.1' cy='6.9' r='5' fill='url(%23s)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='url(%23k)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='none' stroke='%23553E0C' stroke-opacity='.6' stroke-width='.45'/%3E%3Ccircle cx='6' cy='6' r='2.9' fill='none' stroke='url(%23m)' stroke-width='.5'/%3E%3Cg transform='rotate(-58 6 6)'%3E%3Cpath d='M2.5 6h7' stroke='%233A2A07' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M2.7 6.62h6.6' stroke='%23FFF7DA' stroke-opacity='.75' stroke-width='.3' stroke-linecap='round'/%3E%3C/g%3E%3Cellipse cx='7.7' cy='3.9' rx='1.05' ry='.6' transform='rotate(-35 7.7 3.9)' fill='%23FFFFFF' fill-opacity='.9'/%3E%3C/svg%3E");
  --schraube-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cdefs%3E%3CradialGradient id='s' cx='42%' cy='58%' r='50%'%3E%3Cstop offset='55%' stop-opacity='.6'/%3E%3Cstop offset='100%' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='k' cx='66%' cy='30%' r='78%'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.2' stop-color='%23FFFCEE'/%3E%3Cstop offset='.5' stop-color='%23F1E4BC'/%3E%3Cstop offset='.8' stop-color='%23C4A964'/%3E%3Cstop offset='1' stop-color='%237A6226'/%3E%3C/radialGradient%3E%3ClinearGradient id='m' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A22' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%23FFF3C4' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FFFBEA' stop-opacity='.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='5.1' cy='6.9' r='5' fill='url(%23s)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='url(%23k)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='none' stroke='%23553E0C' stroke-opacity='.6' stroke-width='.45'/%3E%3Ccircle cx='6' cy='6' r='2.9' fill='none' stroke='url(%23m)' stroke-width='.5'/%3E%3Cg transform='rotate(78 6 6)'%3E%3Cpath d='M2.5 6h7' stroke='%233A2A07' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M2.7 6.62h6.6' stroke='%23FFF7DA' stroke-opacity='.75' stroke-width='.3' stroke-linecap='round'/%3E%3C/g%3E%3Cellipse cx='7.7' cy='3.9' rx='1.05' ry='.6' transform='rotate(-35 7.7 3.9)' fill='%23FFFFFF' fill-opacity='.9'/%3E%3C/svg%3E");
  --schraube-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cdefs%3E%3CradialGradient id='s' cx='42%' cy='58%' r='50%'%3E%3Cstop offset='55%' stop-opacity='.6'/%3E%3Cstop offset='100%' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='k' cx='66%' cy='30%' r='78%'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.2' stop-color='%23FFFCEE'/%3E%3Cstop offset='.5' stop-color='%23F1E4BC'/%3E%3Cstop offset='.8' stop-color='%23C4A964'/%3E%3Cstop offset='1' stop-color='%237A6226'/%3E%3C/radialGradient%3E%3ClinearGradient id='m' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A22' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%23FFF3C4' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FFFBEA' stop-opacity='.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='5.1' cy='6.9' r='5' fill='url(%23s)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='url(%23k)'/%3E%3Ccircle cx='6' cy='6' r='4.3' fill='none' stroke='%23553E0C' stroke-opacity='.6' stroke-width='.45'/%3E%3Ccircle cx='6' cy='6' r='2.9' fill='none' stroke='url(%23m)' stroke-width='.5'/%3E%3Cg transform='rotate(-14 6 6)'%3E%3Cpath d='M2.5 6h7' stroke='%233A2A07' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M2.7 6.62h6.6' stroke='%23FFF7DA' stroke-opacity='.75' stroke-width='.3' stroke-linecap='round'/%3E%3C/g%3E%3Cellipse cx='7.7' cy='3.9' rx='1.05' ry='.6' transform='rotate(-35 7.7 3.9)' fill='%23FFFFFF' fill-opacity='.9'/%3E%3C/svg%3E");
}
.knopf,
.karte,
#suche,
label input,
dialog {
  --bsl-i: 2px;
  --bsl-g: 4.5px;
  --bsl-a: 1px;
  --bsl-l: currentColor;
  --beschlag:
    var(--schraube-1) left calc(var(--bsl-i) + var(--bsl-a)) top calc(var(--bsl-i) + var(--bsl-a)) / var(--bsl-g) var(--bsl-g) no-repeat,
    var(--schraube-2) right calc(var(--bsl-i) + var(--bsl-a)) top calc(var(--bsl-i) + var(--bsl-a)) / var(--bsl-g) var(--bsl-g) no-repeat,
    var(--schraube-3) left calc(var(--bsl-i) + var(--bsl-a)) bottom calc(var(--bsl-i) + var(--bsl-a)) / var(--bsl-g) var(--bsl-g) no-repeat,
    var(--schraube-4) right calc(var(--bsl-i) + var(--bsl-a)) bottom calc(var(--bsl-i) + var(--bsl-a)) / var(--bsl-g) var(--bsl-g) no-repeat,
    linear-gradient(var(--bsl-l), var(--bsl-l)) center top var(--bsl-i) / calc(100% - 2 * var(--bsl-i)) 1px no-repeat,
    linear-gradient(var(--bsl-l), var(--bsl-l)) center bottom var(--bsl-i) / calc(100% - 2 * var(--bsl-i)) 1px no-repeat,
    linear-gradient(var(--bsl-l), var(--bsl-l)) left var(--bsl-i) center / 1px calc(100% - 2 * var(--bsl-i)) no-repeat,
    linear-gradient(var(--bsl-l), var(--bsl-l)) right var(--bsl-i) center / 1px calc(100% - 2 * var(--bsl-i)) no-repeat;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .knopf { --bsl-l: color-mix(in srgb, var(--akzent) 45%, transparent); }
}
.knopf {
  --bsl-i: 3px;
  --bsl-g: 4px;
  --bsl-a: 0.5px;
  background: var(--beschlag), #222733;
  box-shadow: -3px 4px 8px -4px rgba(0, 0, 0, 0.5);
}
.knopf.leise { background: var(--beschlag), transparent; }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .karte { --bsl-l: color-mix(in srgb, var(--akzent) 45%, transparent); }
}
.karte {
  --bsl-i: 5px;
  --bsl-g: 7px;
  --bsl-a: 2px;
  background: var(--beschlag), var(--flaeche);
  box-shadow: -12px 14px 30px -6px rgba(0, 0, 0, 0.34);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  #suche { --bsl-l: color-mix(in srgb, var(--akzent) 45%, transparent); }
}
#suche {
  --bsl-i: 3px;
  --bsl-g: 4px;
  --bsl-a: 0.5px;
  background: var(--beschlag), var(--flaeche);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  label input { --bsl-l: color-mix(in srgb, var(--akzent) 45%, transparent); }
}
label input {
  --bsl-i: 3px;
  --bsl-g: 4px;
  --bsl-a: 0.5px;
  background: var(--beschlag), var(--grund);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  dialog { --bsl-l: color-mix(in srgb, var(--akzent) 45%, transparent); }
}
dialog {
  --bsl-i: 5px;
  --bsl-g: 8px;
  --bsl-a: 2.5px;
  background: var(--beschlag), var(--flaeche);
  box-shadow: -12px 14px 30px -6px rgba(0, 0, 0, 0.34);
}
/* Hoher Kontrast kennt keine Schatten, der Beschlag bleibt. Gedruckt wird ohne beides. */
:root[data-vision="contrast"] :is(.knopf, .karte, dialog) { box-shadow: none; }
@media print {
  .knopf, .karte, #suche, label input, dialog { background-image: none !important; box-shadow: none !important; }
}
/* Ende Beschlag */