/* MM-Branding nach /brand-mm 4.0: Systemschrift, Palette MM, Kontraste nach WCAG 2.2 AA geprüft */
:root {
  --text: #1a1a1a; --gedimmt: #545557; --flaeche: #ffffff; --grund: #fff8f0; --linie: #d0d0d0; --feld: #545557;
  --akzent: #036690; --orange: #ed8406; --orange-dunkel: #a65c04; --auf-orange: #171717;
  --blau-hell: #68bde2; --blauweiss: #f0f6fa;
  --rot: #b42318; --rot-hell: #fdecea; --gelb: #8a5a00; --gelb-hell: #fff4d6;
  --vorschlag: #ffffff; --angekuendigt: #dceff8; --bestaetigt: #036690; --erledigt: #f0f0f0;
  --abstand: 16px; --rund: 6px;
}
* { box-sizing: border-box; }
fieldset { min-width: 0; }
details.abschnitt-form > summary { font-weight: 600; cursor: pointer; }
.paar { display: flex; gap: 6px; align-items: center; }
.paar select { flex: 1; min-width: 0; } .paar input { width: 4.5em; }
.hinweis { color: var(--gelb); }
label { font-size: .85rem; color: var(--gedimmt); }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--text); background: var(--grund); }
a { color: var(--akzent); }
.inhalt { max-width: 1200px; margin: 0 auto; padding: var(--abstand); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 4px 0 16px; letter-spacing: -.01em; } h2 { font-size: 1.1rem; margin: 28px 0 10px; }
.knopf, button { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--feld); border-radius: var(--rund); background: var(--flaeche); color: var(--text); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.knopf:hover, button:hover { background: var(--grund); }
button.primaer, .knopf.primaer { background: var(--orange); color: var(--auf-orange); border-color: var(--orange); font-weight: 650; }
button.primaer:hover, .knopf.primaer:hover { background: var(--orange-dunkel); border-color: var(--orange-dunkel); color: #fff; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
button.gefahr { color: var(--rot); border-color: var(--rot); }
button.link { border: 0; background: none; color: var(--akzent); padding: 0; min-height: 0; text-decoration: underline; }
.klein { min-height: 32px; padding: 2px 10px; font-size: .85rem; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 8px 4px 0; }
.meldung { padding: 8px 12px; border-radius: var(--rund); background: var(--flaeche); border-left: 4px solid var(--akzent); }
.meldung.error { border-color: var(--rot); background: var(--rot-hell); } .meldung.warning { border-color: var(--gelb); background: var(--gelb-hell); }
.warnungen { list-style: none; padding: 0; margin: 0; }
.warnung { padding: 8px 12px; margin: 4px 0; border-radius: var(--rund); background: var(--flaeche); border-left: 4px solid var(--linie); }
.warnung.rot { border-color: var(--rot); background: var(--rot-hell); } .warnung.gelb { border-color: var(--gelb); background: var(--gelb-hell); }
.code { font-size: .75rem; color: var(--gedimmt); margin-right: 6px; }
.leer { color: var(--gedimmt); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-top: 3px solid var(--orange); border-radius: var(--rund); padding: 12px 14px; color: var(--gedimmt); }
.kachel .zahl { display: block; font-size: 1.6rem; font-weight: 750; color: var(--text); letter-spacing: -.01em; }
.woche { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 8px; min-width: 0; }
.tag h3 { font-size: .9rem; margin: 0 0 6px; }
.tag.frei, .tag.gesperrt { background: repeating-linear-gradient(45deg, var(--grund), var(--grund) 6px, var(--flaeche) 6px, var(--flaeche) 12px); }
.halbtag { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0; }
.teil { font-size: .75rem; color: var(--gedimmt); width: 24px; flex: none; }
.chip { display: inline-block; padding: 3px 9px; border-radius: var(--rund); font-size: .85rem; line-height: 1.35; text-decoration: none; color: var(--text); background: var(--vorschlag); border: 1px solid transparent; overflow-wrap: anywhere; }
.chip.vorschlag { border: 1px dashed var(--feld); } .chip.angekuendigt { background: var(--angekuendigt); border-color: var(--blau-hell); }
.chip.bestaetigt { background: var(--bestaetigt); color: #fff; font-weight: 600; } .chip.erledigt { background: var(--erledigt); color: var(--gedimmt); }
.chip.zurueckgestellt, .chip.storniert { text-decoration: line-through; }
.badge { font-size: .7rem; background: var(--gelb-hell); color: var(--gelb); padding: 1px 6px; border-radius: 4px; }
.aussendienst { list-style: none; padding: 6px 0 0; margin: 6px 0 0; border-top: 1px solid var(--linie); font-size: .85rem; }
.abschnitt, .vorschau, fieldset, details.abschnitt-form { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 12px; margin: 12px 0; }
.kette { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.kette li { padding: 4px 10px; border-radius: 999px; background: var(--erledigt); border: 1px solid var(--linie); font-size: .85rem; }
.kette li.ok { background: var(--angekuendigt); border: 1px solid var(--blau-hell); }
.kette li.ok::before { content: "✓ "; font-weight: 700; color: var(--akzent); }
.bestellung { border-top: 1px solid var(--linie); padding-top: 8px; margin-top: 8px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
.positionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 16px; margin-bottom: 12px; }
.formular label { display: block; font-size: .85rem; color: var(--gedimmt); margin-bottom: 5px; }
input, select, textarea { font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--feld); border-radius: var(--rund); background: var(--flaeche); color: var(--text); max-width: 100%; }
input[type="checkbox"], input[type="radio"] { min-height: 0; }
.fehler, .errorlist { color: var(--rot); }
table { border-collapse: collapse; width: 100%; background: var(--flaeche); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .85rem; color: var(--gedimmt); font-weight: 600; background: var(--blauweiss); }
tr.ueberfaellig td:first-child { color: var(--rot); font-weight: 700; }
.laeufe .fehler { color: var(--rot); }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

/* Kopfleiste: weiß mit MM-Kompaktzeichen (Variante „hell“, abgenommen 01.10.2026) */
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px var(--abstand); background: var(--flaeche); border-bottom: 3px solid var(--orange); }
.marke { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.marke .zeichen { height: 40px; width: auto; display: block; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
.nav > a:not(.knopf), .nav-rest > a { padding: 9px 7px; color: var(--text); text-decoration: none; border-radius: var(--rund); }
.nav > a:not(.knopf):hover, .nav-rest > a:hover { text-decoration: underline; }
.nav a.aktiv { box-shadow: inset 0 -3px 0 var(--orange); border-radius: 0; font-weight: 600; }
.nav .knopf { margin: 0 2px; }
.nav-rest { display: flex; align-items: center; gap: 4px 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--linie); font-size: .9rem; }
.nav-rest form.inline { margin: 0 0 0 4px; } .nav-rest button.link { color: var(--text); font-size: .9rem; text-decoration: none; padding: 9px 7px; }
.nav-rest button.link:hover { text-decoration: underline; background: none; }
.menue-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.menue-knopf { display: none; }

/* Anmeldung */
.anmelden { max-width: 400px; margin: 6vh auto 0; background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--orange); border-radius: 8px; padding: 28px 28px 18px; }
.anmelden .logo { display: block; width: 200px; height: auto; margin: 0 auto 18px; }
.anmelden h1 { text-align: center; font-size: 1.3rem; margin-bottom: 20px; }
.anmelden .formular > div { margin-bottom: 14px; }
.anmelden input { width: 100%; min-height: 44px; }
.anmelden button.primaer { width: 100%; min-height: 46px; justify-content: center; margin-top: 4px; }
.anmelden .fuss { text-align: center; font-size: .8rem; color: var(--gedimmt); margin: 18px 0 0; }

/* Druckkopf */
.druckkopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--orange); margin-bottom: 12px; padding-bottom: 8px; }
.druckkopf h1 { margin: 0; } .druckkopf .logo { width: 160px; height: auto; }

@media (max-width: 1023px) {
  .kopf { padding: 6px 12px; gap: 6px 12px; }
  .marke .zeichen { height: 36px; }
  .menue-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--feld); border-radius: var(--rund); font-weight: 600; cursor: pointer; color: var(--text); }
  .menue-knopf::before { content: "☰"; margin-right: 8px; font-size: 1.1rem; }
  .menue-schalter:focus-visible + .menue-knopf { outline: 3px solid var(--akzent); outline-offset: 2px; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 8px; }
  .menue-schalter:checked ~ .nav { display: flex; }
  .nav > a:not(.knopf), .nav-rest > a { padding: 12px 4px; border-top: 1px solid var(--linie); border-radius: 0; }
  .nav a.aktiv { box-shadow: inset 4px 0 0 var(--orange); padding-left: 12px; }
  .nav .knopf { min-height: 44px; justify-content: center; margin: 8px 0 0; }
  .nav-rest { flex-direction: column; align-items: stretch; margin: 10px 0 0; padding: 0; border-left: 0; font-size: 1rem; }
  .nav-rest form.inline { margin: 0; padding: 12px 4px; border-top: 1px solid var(--linie); }
  .nav-rest button.link { padding: 0; font-size: 1rem; font-weight: 400; }
}
@media (max-width: 760px) {
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kachel { padding: 10px; font-size: .8rem; line-height: 1.3; }
  .kachel .zahl { font-size: 1.15rem; margin-bottom: 4px; }
  h1 { font-size: 1.35rem; }
  .knopf, button { min-height: 44px; }
  .anmelden { margin-top: 3vh; padding: 22px 18px 14px; }
  .woche { grid-template-columns: 1fr; }
  .tag.frei:not(.gesperrt) { display: none; }
  table.liste, table.liste tbody, table.liste tr, table.liste td { display: block; width: 100%; }
  table.liste tr:first-child { display: none; }
  table.liste tr { border-bottom: 2px solid var(--linie); padding: 6px 0; }
  table.liste td { border: 0; padding: 2px 8px; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .kopf, .nicht-drucken, .meldung { display: none; }
  .druckkopf .logo { width: 40mm; }
  .chip.bestaetigt { background: #fff; color: #000; border: 2px solid #000; }
  body { background: #fff; font-size: 11px; }
  .inhalt { max-width: none; padding: 0; }
  .woche { grid-template-columns: repeat(6, 1fr); }
  .tag { break-inside: avoid; }
  .chip { border: 1px solid #999; }
}