@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('schriften/inter-latin.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;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('schriften/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('schriften/jetbrains-mono-latin.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;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('schriften/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
* {box-sizing: border-box}
body {margin:0; min-height:100vh; background:var(--bg-gradient); color:var(--text); font:16px/var(--leading-body) var(--font-sans)}
a {color:var(--accent); text-underline-offset:3px}
button,input,select {font:inherit; min-height:44px; border:1px solid var(--border-input); border-radius:var(--r-sm); padding:var(--space-2) var(--space-3); color:var(--text); background:var(--surface-solid); max-width:100%}
button {cursor:pointer; border-radius:var(--r-pill); font-weight:600}
button:hover {background:var(--accent-soft)}
button:disabled {opacity:.65; cursor:wait}
:focus-visible {outline:2px solid var(--accent); outline-offset:3px; box-shadow:0 0 0 3px var(--accent-soft)}
button.primaer {background:var(--gradient); color:var(--text-on-accent); border-color:var(--accent); box-shadow:var(--glow)}
h1,h2 {line-height:1.12; letter-spacing:var(--tracking-tight)}
h1 {font-size:clamp(2rem,4vw,3rem); margin:var(--space-3) 0}
h2 {font-size:1.35rem}
p {max-width:65ch; color:var(--text-muted)}
.kopf {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5); padding:var(--space-4) max(var(--space-4),calc((100vw - 1400px)/2)); border-bottom:1px solid var(--border); background:var(--surface)}
.marke {font-weight:700; text-decoration:none; font-size:1.2rem; color:var(--text)}
nav {display:flex; flex-wrap:wrap; gap:var(--space-4)}
nav a {display:inline-flex; align-items:center; min-height:44px}
.kopf form {margin-left:auto}
.inhalt {max-width:1448px; padding:var(--space-6) var(--space-5); margin:auto}
.schmal {max-width:760px}
.karte {background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--space-5); box-shadow:var(--shadow-md)}
.anmeldung {max-width:460px; margin:clamp(24px,9vh,96px) auto; padding:var(--space-6)}
form,label {display:grid; gap:var(--space-2)}
form {gap:var(--space-5)}
label {font-weight:500; min-width:0}
small,.label {color:var(--text-muted)}
.label {font:11px var(--font-mono); letter-spacing:var(--tracking-wide); text-transform:uppercase}
.seitenkopf {display:flex; justify-content:space-between; align-items:center; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-5)}
.tagesdatum {display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-3)}
.tabelle {overflow:auto; padding:0}
table {border-collapse:separate; border-spacing:0; width:100%; font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums}
th,td {padding:var(--space-3); border-bottom:1px solid var(--border); text-align:right; font-family:var(--font-mono)}
th {font-weight:600; color:var(--text-muted)}
th:first-child {text-align:left; position:sticky; left:0; z-index:1; background:var(--surface-solid)}
thead th {background:var(--bg-2)}
tr:last-child td,tr:last-child th {border-bottom:0}
.summe {background:var(--accent-soft); font-weight:600}
.meldung {padding:var(--space-3); border:1px solid var(--border-input); border-radius:var(--r-sm)}
.fehler {color:var(--error); border-color:var(--error)}
.visuell-versteckt {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
@media(max-width:640px) {.inhalt {padding:var(--space-5) var(--space-3)} .kopf {gap:var(--space-3); padding:var(--space-3)} .kopf nav {order:3; width:100%; justify-content:space-between; gap:var(--space-2)} .anmeldung {margin:var(--space-5) var(--space-3)} .karte {padding:var(--space-4)} .tabelle {padding:0}}
.blockliste {display:grid; gap:var(--space-2); margin-bottom:var(--space-3)}
.blockkopf {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2)}
.blockkopf h2 {margin:0; font-size:1rem}
.block {border-left-color:var(--accent); padding:var(--space-3)}
.block label {gap:var(--space-1); font-size:13px}
.block input,.block button {padding:var(--space-2); min-height:44px}
.start-anzeige {margin:0; min-height:44px; display:flex; align-items:center; font-variant-numeric:tabular-nums}
.block.arbeit {border-left-color:var(--accent-2)}
.blockfelder {display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:var(--space-2)}
.aktionen,.kennzeichen {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin:var(--space-5) 0}
.kennzeichen {grid-column:1/-1; margin:0}
.kennzeichen button[aria-pressed="true"] {background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.regeln {display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-5); margin-top:var(--space-5)}
.schalter {display:flex; align-items:center; gap:var(--space-3)}
.schalter input {width:24px; accent-color:var(--accent)}
.ergebnis {display:flex; flex-wrap:wrap; gap:var(--space-5); margin:var(--space-5) 0; background:var(--accent-soft)}
.ergebnis div {display:grid; flex:1; min-width:90px}
.ergebnis strong {font:600 1.6rem var(--font-mono)}
.erfolg {color:var(--success)}
.wochenende,.wochenende th:first-child {background:var(--weekend-bg)}
.feiertag,.feiertag th:first-child {background:var(--holiday-bg)}
.feiertagsname {display:block; font:500 12px/1.4 var(--font-sans); color:var(--text); white-space:normal; max-width:24ch; margin-top:var(--space-1)}
.kalenderwoche th:first-child {position:static; padding:var(--space-1) var(--space-3); background:var(--bg-2); border-top:1px solid var(--border-strong); text-align:left}
.kunde-ort {max-width:240px; white-space:normal; text-align:left; font-family:var(--font-sans)}
.zeitleiste {width:240px; height:24px; position:relative; background:repeating-linear-gradient(to right,var(--surface-sunken) 0,var(--surface-sunken) calc(25% - 1px),var(--border-input) calc(25% - 1px),var(--border-input) 25%); border-radius:var(--r-sm); overflow:hidden}
.balken {position:absolute; height:100%; background:var(--accent)}
.balken.arbeit {background:var(--accent-2)}
.balken.uebertrag {opacity:.45; border:2px dashed var(--text); height:50%; bottom:0; z-index:1}
.pause {position:absolute; height:100%; background:repeating-linear-gradient(135deg,var(--text-on-accent) 0,var(--text-on-accent) 2px,transparent 2px,transparent 5px)}
tbody tr.tageszeile:hover,tbody tr.tageszeile:hover th:first-child {background:var(--accent-soft); cursor:pointer}
@media(max-width:480px) {.blockfelder {grid-template-columns:repeat(2,minmax(0,1fr))} .block.arbeit .blockfelder {grid-template-columns:repeat(6,minmax(0,1fr))} .block.arbeit .blockfelder > * {grid-column:span 2} .block.arbeit .blockfelder label:has(input[list]) {grid-column:span 3} .regeln {grid-template-columns:1fr} .ergebnis {gap:var(--space-4)} .ergebnis div {min-width:75px}}
/* Eigenständige Grid-Spalten dürfen nicht von der Standardbreite der Textfelder wachsen. */
label {grid-template-columns:minmax(0,1fr)}
input:not([type="checkbox"]),select {min-width:0; width:100%}

@media(min-width:1024px) {
  .block {display:grid; grid-template-columns:210px minmax(0,1fr); align-items:center; gap:var(--space-3)}
  .blockkopf {margin:0; flex-wrap:nowrap}
  .blockfelder {grid-template-columns:repeat(3,minmax(0,.75fr)) repeat(2,minmax(0,1.5fr))}
  .block.fahrt .blockfelder {grid-template-columns:repeat(4,minmax(0,1fr))}
}