/* Tischplan – Kurth Coded
 * Farben sind Tokens. Hell = Tag am Empfang, [data-theme="dunkel"] = Abendmodus.
 * Statusfarben tragen NIE allein die Information: jede hat ein eigenes Muster und einen Text.
 *   frei = glatt · gleich belegt = Schraffur · belegt = voll mit Punktraster · bald frei = Punkte · Konflikt = Gitter
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format('woff2'); }

:root {
  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  color-scheme: light;
  --papier: #E8EDEB;
  --karte: #FBFCFB;
  --karte-2: #F0F4F2;
  --linie: #C9D3CF;
  --linie-fein: #E0E7E4;
  --linie-stark: #6F838B;
  --tinte: #14302A;
  --tinte-2: #44585A;
  --tinte-3: #566A66;
  --akzent: #8A5B0F;
  --akzent-stark: #6B4609;
  --akzent-text: #FFFFFF;
  --akzent-hell: #F3E5C6;
  --fokus: #14302A;
  --gefahr: #B3261E;
  --gefahr-text: #8F1D17;
  --gefahr-hell: #FBE4E1;
  --schatten: 0 1px 2px rgba(20, 48, 42, .08), 0 8px 24px rgba(20, 48, 42, .10);

  /* Grundriss */
  --boden: #F4F7F5;
  --boden-fenster: #E3EEF3;
  --boden-eingang: #E8E0CD;
  --wand: #14302A;
  --glas: #B9D6E4;
  --stuhl: #FFFFFF;
  --stuhl-rand: #62767A;
  --tresen: #D8CBB0;
  --tresen-rand: #8C7650;
  --pflanze-1: #6FA283;
  --pflanze-2: #98C2A5;
  --pflanze-topf: #B9C9BF;
  --tisch-neutral: #E9EEEC;
  --chip-bg: rgba(251, 252, 251, .92);
  --pm-deck-bg: #E1EBE3; --pm-deck-linie: #C9D9CD;
  --pm-bar-bg: #EEE8DA; --pm-bar-linie: #E0D6BE;

  /* Status */
  --s-frei-bg: #CFEBDD; --s-frei-rand: #1B7552; --s-frei-text: #0B4630;
  --s-gleich-bg: #FFE9B4; --s-gleich-linie: #F0BE55; --s-gleich-rand: #96590A; --s-gleich-text: #4A2C00;
  --s-belegt-bg: #2D4A8E; --s-belegt-punkt: #4E6BB0; --s-belegt-rand: #172B5C; --s-belegt-text: #FFFFFF;
  --s-bald-bg: #D5E0F8; --s-bald-punkt: #2D4A8E; --s-bald-rand: #2D4A8E; --s-bald-text: #14295E;
  --s-konf-bg: #F9D5D1; --s-konf-linie: #C9473B; --s-konf-rand: #A8231A; --s-konf-text: #6B0F09;
  --halo: rgba(251, 252, 251, .9);

  /* Zeitleiste / Zeitstrahl */
  --zl-vorbei: rgba(20, 48, 42, .05);
  --kurve: rgba(45, 74, 142, .20);
  --kurve-linie: #2D4A8E;
  --gitter: #DDE5E2;
  --bar-spaeter-bg: #D5E0F8;
  --bar-vorbei-bg: #E4E9EC;
  --bar-vorbei-text: #4C5F63;
  --walkin-bg: #CDEBE6; --walkin-rand: #1D6F65; --walkin-text: #0D4640;
  --lvl-0: #EEF2F0; --lvl-1: #D6E2F3; --lvl-2: #A9C0E6; --lvl-3: #4A73BF; --lvl-4: #2F55A6; --lvl-5: #1B3A7D;
  --lvl-text-hell: #14302A; --lvl-text-dunkel: #FFFFFF;
}

:root[data-theme="dunkel"] {
  color-scheme: dark;
  --papier: #0D1A20;
  --karte: #15252D;
  --karte-2: #1B2F38;
  --linie: #2D434D;
  --linie-fein: #223640;
  --linie-stark: #7C97A2;
  --tinte: #E7F0EE;
  --tinte-2: #B4C7C2;
  --tinte-3: #9BB0AB;
  --akzent: #E4BA68;
  --akzent-stark: #F0CD8B;
  --akzent-text: #1D1403;
  --akzent-hell: #3A2E14;
  --fokus: #F3F8F6;
  --gefahr: #FF8F85;
  --gefahr-text: #FFB3AB;
  --gefahr-hell: #4A1C19;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);

  --boden: #1A2D36;
  --boden-fenster: #1D3743;
  --boden-eingang: #3A3626;
  --wand: #CBD9D5;
  --glas: #4C7C93;
  --stuhl: #23373F;
  --stuhl-rand: #8FA7A9;
  --tresen: #4A4030;
  --tresen-rand: #B39A68;
  --pflanze-1: #4B8466;
  --pflanze-2: #6BA583;
  --pflanze-topf: #3C5048;
  --tisch-neutral: #2A414B;
  --chip-bg: rgba(21, 37, 45, .92);
  --pm-deck-bg: #1B3236; --pm-deck-linie: #234146;
  --pm-bar-bg: #2A2B2A; --pm-bar-linie: #343227;

  --s-frei-bg: #1F5240; --s-frei-rand: #66D7A7; --s-frei-text: #DDF8EB;
  --s-gleich-bg: #5E4510; --s-gleich-linie: #86631A; --s-gleich-rand: #F2C25B; --s-gleich-text: #FFEFC9;
  --s-belegt-bg: #4468C9; --s-belegt-punkt: #6483DD; --s-belegt-rand: #B4C7FF; --s-belegt-text: #FFFFFF;
  --s-bald-bg: #243962; --s-bald-punkt: #8FA9EE; --s-bald-rand: #8FA9EE; --s-bald-text: #DDE7FF;
  --s-konf-bg: #5E201C; --s-konf-linie: #E2564A; --s-konf-rand: #FF9C92; --s-konf-text: #FFE3DF;
  --halo: rgba(21, 37, 45, .9);

  --zl-vorbei: rgba(255, 255, 255, .04);
  --kurve: rgba(143, 169, 238, .24);
  --kurve-linie: #8FA9EE;
  --gitter: #243A44;
  --bar-spaeter-bg: #26396A;
  --bar-vorbei-bg: #1F323B;
  --bar-vorbei-text: #94ABA6;
  --walkin-bg: #1B4A47; --walkin-rand: #6BD2C5; --walkin-text: #D8F6F1;
  --lvl-0: #1B2F38; --lvl-1: #22435C; --lvl-2: #2D5F8A; --lvl-3: #5B96D0; --lvl-4: #7FB0E3; --lvl-5: #A9C9F0;
  --lvl-text-hell: #E7F0EE; --lvl-text-dunkel: #0E1E26;
}

/* ───────── Grundlagen ───────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 15px/1.45 var(--f-ui);
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--tinte); color: var(--karte); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 8px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.noscript { padding: 24px; }
.abstand { flex: 1; }

.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fuell { fill: currentColor; stroke: none; }
.blass { opacity: .35; }
.gestrichelt { stroke-dasharray: 3 3; }

/* Muster (einmal definiert, in <defs>) */
.pm-gleich-bg { fill: var(--s-gleich-bg); } .pm-gleich-linie { fill: var(--s-gleich-linie); }
.pm-belegt-bg { fill: var(--s-belegt-bg); } .pm-belegt-punkt { fill: var(--s-belegt-punkt); }
.pm-bald-bg { fill: var(--s-bald-bg); } .pm-bald-punkt { fill: var(--s-bald-punkt); }
.pm-konf-bg { fill: var(--s-konf-bg); } .pm-konf-linie { fill: var(--s-konf-linie); }
.pm-frei-bg { fill: var(--s-frei-bg); }
.pm-deck-bg { fill: var(--pm-deck-bg); } .pm-deck-linie { fill: var(--pm-deck-linie); }
.pm-bar-bg { fill: var(--pm-bar-bg); } .pm-bar-linie { fill: var(--pm-bar-linie); }

/* Statusfläche (Legende, Popover) */
.muster-flaeche { stroke-width: 2; }
.muster-flaeche.s-frei { fill: url(#p-frei); stroke: var(--s-frei-rand); }
.muster-flaeche.s-gleich { fill: url(#p-gleich); stroke: var(--s-gleich-rand); }
.muster-flaeche.s-belegt { fill: url(#p-belegt); stroke: var(--s-belegt-rand); }
.muster-flaeche.s-baldfrei { fill: url(#p-bald); stroke: var(--s-bald-rand); }
.muster-flaeche.s-konflikt { fill: url(#p-konflikt); stroke: var(--s-konf-rand); }

/* ───────── Knöpfe und Felder ───────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: 10px;
  background: var(--karte); color: var(--tinte); border: 1px solid var(--linie-stark);
  font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color .12s, border-color .12s;
}
.knopf:hover:not(:disabled) { background: var(--karte-2); border-color: var(--tinte-2); }
.knopf:disabled { opacity: .45; }
.knopf-icon { width: 40px; padding: 0; }
.knopf-klein { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.knopf-rund { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.knopf-rund:hover:not(:disabled) { background: var(--akzent-stark); border-color: var(--akzent-stark); }
.knopf-primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.knopf-primaer:hover:not(:disabled) { background: var(--akzent-stark); border-color: var(--akzent-stark); }
.knopf-akzent { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-stark); }
:root[data-theme="dunkel"] .knopf-akzent { color: var(--akzent); }
.knopf-akzent:hover:not(:disabled), .knopf-akzent.an { background: var(--akzent); color: var(--akzent-text); }
.knopf-gefahr { background: var(--gefahr); color: #fff; border-color: var(--gefahr); }
:root[data-theme="dunkel"] .knopf-gefahr { color: #2A0906; }
.knopf-gefahr:hover:not(:disabled) { filter: brightness(.92); background: var(--gefahr); }
.knopf-text-gefahr { color: var(--gefahr-text); border-color: transparent; background: transparent; }
.knopf-text-gefahr:hover:not(:disabled) { background: var(--gefahr-hell); border-color: var(--gefahr); }
.knopf-ok { background: var(--s-frei-bg); border-color: var(--s-frei-rand); color: var(--s-frei-text); }
.knopf[aria-pressed="true"]:not(.knopf-ok) { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 40px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid; }
.chip-warn { background: var(--gefahr-hell); color: var(--gefahr-text); border-color: var(--gefahr); }
.chip-warn:hover { filter: brightness(.96); }
.etikett { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--walkin-bg); color: var(--walkin-text); border: 1px solid var(--walkin-rand); }

.feld { display: grid; gap: 6px; min-width: 0; }
.feld > label, .feld-label { font-size: 13px; font-weight: 600; color: var(--tinte-2); }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; }
input[type="text"], input[type="number"], input[type="time"], input[type="date"], select, textarea, .auswahl {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--tinte);
  font-size: 16px; line-height: 1.3;
}
textarea { resize: vertical; min-height: 64px; }
input:disabled { opacity: .6; }
.stepper { display: grid; grid-template-columns: 44px minmax(56px, 1fr) 44px; gap: 6px; align-items: stretch; }
.stepper .knopf-icon { width: 44px; min-height: 44px; }
.stepper-wert { text-align: center; font-weight: 700; padding: 8px 4px; }
.stepper-wert::-webkit-outer-spin-button, .stepper-wert::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-wert { -moz-appearance: textfield; appearance: textfield; }
.haken { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 500; }
.haken input { width: 22px; height: 22px; accent-color: var(--akzent); }

.schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--karte-2); border: 1.5px solid var(--linie-stark); transition: background-color .15s; }
.schalter-bahn::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--tinte-2); transition: transform .15s, background-color .15s; }
.schalter input:checked + .schalter-bahn { background: var(--akzent); border-color: var(--akzent); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(16px); background: var(--akzent-text); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid var(--fokus); outline-offset: 2px; }

.segment { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--linie-stark); border-radius: 10px; overflow: hidden; }
.segment-knopf { min-height: 40px; padding: 0 16px; border: 0; background: var(--karte); font-weight: 600; font-size: 14px; }
.segment-knopf + .segment-knopf { border-left: 1px solid var(--linie-stark); }
.segment-knopf[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }

/* ───────── Kopfzeile ───────── */
.kopf {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px 22px;
  padding: 10px 16px; background: var(--karte); border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marke-zeichen { width: 40px; height: 40px; flex: none; }
.mz-grund { fill: var(--tinte); } .mz-tisch { fill: var(--akzent-hell); } .mz-stuhl { fill: var(--akzent); }
:root[data-theme="dunkel"] .mz-grund { fill: #264049; }
.marke-name { font: 500 22px/1.1 var(--f-serif); letter-spacing: -.005em; margin: 0; }
.marke-sub { font-size: 12.5px; color: var(--tinte-3); margin-top: 2px; }
@media (max-width: 1560px) { .marke-sub { display: none; } }
.datum { display: flex; align-items: center; gap: 4px; }
.datum-wahl { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-weight: 700; font-size: 15px; border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--karte); cursor: pointer; min-width: 150px; justify-content: center; }
.datum-wahl:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }
.datum-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; padding: 0; }
.ansichten { display: flex; gap: 4px; justify-self: center; padding: 4px; background: var(--karte-2); border: 1px solid var(--linie); border-radius: 12px; }
.ansicht-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: 14.5px; color: var(--tinte-2); }
.ansicht-knopf:hover:not(:disabled) { background: var(--karte); color: var(--tinte); }
.ansicht-knopf[aria-current="true"] { background: var(--tinte); color: var(--karte); }
:root[data-theme="dunkel"] .ansicht-knopf[aria-current="true"] { background: var(--akzent); color: var(--akzent-text); }
.aktionen { display: flex; align-items: center; gap: 8px; justify-self: end; }
.menue { position: relative; }
.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary.knopf { cursor: pointer; }
.menue-liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 270px; padding: 6px; background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 12px; box-shadow: var(--schatten); display: grid; }
.menue-liste a, .menue-liste button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-weight: 500; }
.menue-liste a { color: inherit; text-decoration: none; }
.menue-liste a:hover, .menue-liste button:hover { background: var(--karte-2); }
.menue-trenner { height: 1px; background: var(--linie); margin: 4px 6px; }

/* ───────── Zeitleiste ───────── */
.haupt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.zeitleiste {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 22px;
  padding: 12px 16px 6px;
}
.zl-links { display: flex; align-items: center; gap: 14px; }
.zl-zeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.zl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.zl-label { font-size: 12.5px; font-weight: 600; color: var(--tinte-2); }
.zl-feldreihe { display: flex; align-items: center; gap: 6px; }
input.zl-uhr { width: 7.4ch; min-height: 48px; padding: 2px 6px; text-align: center; font: 700 32px/1 var(--f-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; border: 2px solid var(--linie-stark); border-radius: 12px; background: var(--karte); }
input.zl-uhr:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
input.zl-uhr[aria-invalid="true"] { border-color: var(--gefahr); background: var(--gefahr-hell); }
.zl-schritt { min-width: 48px; padding: 0 8px; font-size: 14px; }
.zl-jetzt { padding: 0 12px; }
.zl-hinweis { font-size: 12.5px; font-weight: 600; color: var(--gefahr-text); min-height: 0; }
.zl-hinweis:empty { display: none; }
.zl-plus { white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--akzent-stark); background: var(--akzent-hell); border-radius: 6px; padding: 2px 6px; line-height: 1.2; }
:root[data-theme="dunkel"] .zl-plus { color: var(--akzent); }
.zl-mitte { min-width: 0; padding: 0 14px; }
.zl-regler-box { position: relative; height: 56px; border-radius: 10px; background: linear-gradient(to right, var(--zl-vorbei) 0, var(--zl-vorbei) var(--fuellung, 0%), transparent var(--fuellung, 0%)); border-bottom: 2px solid var(--linie-stark); }
.zl-kurve { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.kurve-flaeche { fill: var(--kurve); }
.kurve-linie { fill: none; stroke: var(--kurve-linie); stroke-width: 1.5; }
.zl-regler { position: absolute; left: -14px; top: 0; width: calc(100% + 28px); height: 100%; margin: 0; padding: 0; min-height: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; touch-action: pan-y; }
.zl-regler::-webkit-slider-runnable-track { height: 56px; background: transparent; border: 0; }
.zl-regler::-moz-range-track { height: 56px; background: transparent; border: 0; }
.zl-regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 56px; border: 0; border-radius: 0; cursor: grab;
  background: radial-gradient(circle at 50% 15px, var(--akzent) 0 12.5px, var(--karte) 12.5px 14.5px, transparent 14.5px), linear-gradient(var(--akzent), var(--akzent)) 50% 0 / 3px 100% no-repeat;
}
.zl-regler::-moz-range-thumb {
  width: 28px; height: 56px; border: 0; border-radius: 0; cursor: grab;
  background: radial-gradient(circle at 50% 15px, var(--akzent) 0 12.5px, var(--karte) 12.5px 14.5px, transparent 14.5px), linear-gradient(var(--akzent), var(--akzent)) 50% 0 / 3px 100% no-repeat;
}
.zl-regler:active::-webkit-slider-thumb { cursor: grabbing; }
.zl-regler:focus-visible { outline: none; }
.zl-regler:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--fokus); outline-offset: -2px; border-radius: 8px; }
.zl-regler:focus-visible::-moz-range-thumb { outline: 3px solid var(--fokus); outline-offset: -2px; border-radius: 8px; }
.zl-skala { position: relative; height: 20px; margin-top: 4px; }
.zl-tick .h-kurz, .t-kurz { display: none; }
.zl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.zl-tick.erste { transform: translateX(-14px); } .zl-tick.letzte { transform: translateX(calc(-100% + 14px)); }
.zl-tick.mitternacht { color: var(--akzent-stark); }
:root[data-theme="dunkel"] .zl-tick.mitternacht { color: var(--akzent); }
.zl-stand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.stand { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; font-size: 13px; line-height: 1; }
.stand .muster { flex: none; }
.stand-zahl { font-weight: 700; font-size: 16px; min-width: 1ch; }
.stand-name { color: var(--tinte-2); font-weight: 500; }
.stand-kurz { display: none; color: var(--tinte-2); font-weight: 500; }
.stand.null { background: var(--karte-2); }
.stand.null .stand-zahl, .stand.null .stand-name, .stand.null .stand-kurz { color: var(--tinte-3); }

.demo-hinweis { display: flex; align-items: center; gap: 16px; margin: 4px 16px 10px; padding: 8px 8px 8px 16px; background: var(--akzent-hell); border: 1px solid var(--akzent); border-radius: 12px; font-size: 14px; }
.demo-hinweis p { flex: 1; max-width: 120ch; }

/* ───────── Flächen ───────── */
.inhalt { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(380px, 1fr); gap: 14px; padding: 0 16px 16px; }
.haupt[data-ansicht="zeitstrahl"] .inhalt, .haupt[data-ansicht="auslastung"] .inhalt, .haupt[data-ansicht="service"] .inhalt { grid-template-columns: minmax(0, 1fr); }
.haupt[data-modus="raum"] .inhalt { grid-template-columns: minmax(0, 1fr) 390px; padding-top: 12px; }
.flaeche { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.flaeche-breit { overflow: auto; padding: 8px 20px 20px; }
.flaeche-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 6px; flex-wrap: wrap; }
.titel { font: 500 21px/1.15 var(--f-serif); letter-spacing: -.005em; }
.titel.gross { font-size: 30px; }
.werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.zs-hilfe { padding: 0 16px 8px; font-size: 13px; color: var(--tinte-3); max-width: 70ch; }
.seite-zeit, .seite-editor { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.leer { padding: 16px; color: var(--tinte-3); font-size: 14px; }

/* ───────── Grundriss ───────── */
.plan-rahmen { position: relative; flex: 1; min-height: 0; margin: 0 8px 10px; background: var(--karte-2); border-radius: 12px; overflow: auto; }
.plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; --scale: .6; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.plan .zone-flaeche { stroke: none; }
.zone-innen .zone-flaeche { fill: var(--boden); }
.zone-fenster .zone-flaeche { fill: var(--boden-fenster); }
.zone-bar .zone-flaeche { fill: url(#p-bar); }
.zone-terrasse .zone-flaeche { fill: url(#p-deck); }
.zone-chip { pointer-events: none; }
.chip-bg { fill: var(--chip-bg); stroke: var(--linie); stroke-width: 1; }
.chip-text { fill: var(--tinte-2); font: 600 14px var(--f-ui); }
.objekt-flaeche { fill: var(--tresen); stroke: var(--tresen-rand); stroke-width: 2; }
.objekt-eingang .objekt-flaeche { fill: var(--boden-eingang); stroke: var(--tresen-rand); stroke-dasharray: 5 4; }
.objekt-station .objekt-flaeche { fill: var(--karte-2); stroke: var(--linie-stark); }
.objekt-text { fill: var(--tinte-2); font: 600 14px var(--f-ui); text-anchor: middle; pointer-events: none; }
.eingang-pfeil { fill: none; stroke: var(--tresen-rand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pflanze-topf { fill: var(--pflanze-topf); } .pflanze-blatt { fill: var(--pflanze-1); } .pflanze-blatt-2 { fill: var(--pflanze-2); }
.wand { stroke: var(--wand); stroke-width: 9; stroke-linecap: square; fill: none; }
.fenster-glas { stroke: var(--glas); stroke-width: 9; stroke-linecap: butt; }
.fenster-linie { stroke: var(--wand); stroke-width: 1.6; }
.treffer { stroke: transparent; stroke-width: 22; pointer-events: none; }
.plan .zone, .plan .objekt, .plan .wand-g { pointer-events: none; }
.haupt[data-modus="raum"] .plan .el { pointer-events: auto; cursor: move; }
.haupt[data-modus="raum"] .plan .wand-g .treffer { pointer-events: stroke; }
.haupt[data-modus="raum"] .plan .zone .zone-flaeche { pointer-events: fill; }
.haupt[data-modus="raum"] .plan { touch-action: pan-x pan-y; }
.haupt[data-modus="raum"] .plan .el, .haupt[data-modus="raum"] .plan .tisch, .haupt[data-modus="raum"] .plan .griff { touch-action: none; }

/* Tische */
.tisch { cursor: pointer; outline: none; }   /* kein touch-action: ein schnelles Wischen soll scrollen; das Ziehen nach dem Halten fängt plan.js per touchmove ab */
.tisch.bereit { cursor: grab; }
.tisch.bereit .platte { stroke-width: 5; filter: drop-shadow(0 3px 5px rgba(20, 48, 42, .35)); }
.tisch.gezogen { cursor: grabbing; }
.tisch.gezogen .platte { filter: drop-shadow(0 8px 10px rgba(20, 48, 42, .4)); }
.plan.zieht-tisch { cursor: grabbing; }
.tisch.ist-ziel .vorschlag { opacity: 1; stroke: var(--akzent); stroke-width: 5; stroke-dasharray: 10 6; }
.gruppe-bruecke { stroke: var(--akzent); stroke-width: 12; stroke-linecap: round; opacity: .55; pointer-events: none; }
.gruppe-bruecke.vorschau { stroke-dasharray: 2 14; opacity: .9; stroke-width: 9; }
.gruppe-knoten { fill: var(--karte); stroke: var(--akzent); stroke-width: 3; pointer-events: none; }
.gruppe-halo rect { fill: var(--akzent); stroke: var(--akzent); stroke-width: 18; stroke-linejoin: round; }
.gruppe-halo line { stroke: var(--akzent); stroke-linecap: round; }
.gruppe-halo-innen rect { fill: var(--akzent-hell); stroke: none; }
.gruppe-halo-innen line { stroke: var(--akzent-hell); stroke-linecap: butt; }
.gruppe-halo, .gruppe-halo-innen { pointer-events: none; }
.gruppe-halo.vorschau, .gruppe-halo-innen.vorschau { opacity: .55; }
.tisch .platte { stroke-width: 2.5; transition: fill .15s; }
.tisch .stuhl { fill: var(--stuhl); stroke: var(--stuhl-rand); stroke-width: 1.6; }
.tisch .ring-bg { fill: none; stroke: currentColor; stroke-width: 5; opacity: .14; }
.tisch .ring { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .25s linear; }
.plan.ringe-aus .ring, .plan.ringe-aus .ring-bg { display: none; }
.tisch .fokus, .tisch .wahl, .tisch .vorschlag { fill: none; opacity: 0; pointer-events: none; }
.tisch:focus-visible .fokus { opacity: 1; stroke: var(--fokus); stroke-width: 4; }
.tisch.gewaehlt .wahl { opacity: 1; stroke: var(--akzent); stroke-width: 4; stroke-dasharray: 9 6; }
.tisch.vorschlag .vorschlag { opacity: 1; stroke: var(--akzent); stroke-width: 5; }
.tisch.vorschlag .platte { filter: drop-shadow(0 0 7px var(--akzent)); }
.tisch:hover .platte { stroke-width: 4; }
.t-label { font: 700 calc(var(--fs, 24) * 1px) var(--f-ui); font-size: max(calc(var(--fs, 24) * 1px), calc(15px / var(--scale))); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke-width: 4; stroke-linejoin: round; pointer-events: none; }
.t-sub { font: 600 calc(var(--fs, 14) * 1px) var(--f-ui); font-size: max(calc(var(--fs, 14) * 1px), calc(9px / var(--scale))); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke-width: 3.5; stroke-linejoin: round; pointer-events: none; }
.badge { display: none; pointer-events: none; }
.badge circle { fill: var(--s-konf-rand); stroke: var(--karte); stroke-width: 2.5; }
.badge text { fill: #fff; font: 800 15px var(--f-ui); }
.tisch.hat-konflikt .badge { display: block; }

.tisch.s-frei { color: var(--s-frei-rand); }
.tisch.s-frei .platte { fill: url(#p-frei); stroke: var(--s-frei-rand); }
.tisch.s-frei .ring { stroke: var(--s-frei-rand); }
.tisch.s-frei .t-label, .tisch.s-frei .t-sub { fill: var(--s-frei-text); stroke: var(--s-frei-bg); }
.tisch.s-gleich { color: var(--s-gleich-rand); }
.tisch.s-gleich .platte { fill: url(#p-gleich); stroke: var(--s-gleich-rand); }
.tisch.s-gleich .ring { stroke: var(--s-gleich-rand); }
.tisch.s-gleich .t-label, .tisch.s-gleich .t-sub { fill: var(--s-gleich-text); stroke: var(--s-gleich-bg); }
.tisch.s-belegt { color: var(--s-belegt-bg); }
.tisch.s-belegt .platte { fill: url(#p-belegt); stroke: var(--s-belegt-rand); }
.tisch.s-belegt .ring { stroke: var(--s-belegt-bg); }
.tisch.s-belegt .t-label, .tisch.s-belegt .t-sub { fill: var(--s-belegt-text); stroke: var(--s-belegt-bg); }
.tisch.s-baldfrei { color: var(--s-bald-rand); }
.tisch.s-baldfrei .platte { fill: url(#p-bald); stroke: var(--s-bald-rand); }
.tisch.s-baldfrei .ring { stroke: var(--s-bald-rand); }
.tisch.s-baldfrei .t-label, .tisch.s-baldfrei .t-sub { fill: var(--s-bald-text); stroke: var(--s-bald-bg); }
.tisch.s-konflikt { color: var(--s-konf-rand); }
.tisch.s-konflikt .platte { fill: url(#p-konflikt); stroke: var(--s-konf-rand); }
.tisch.s-konflikt .ring { stroke: var(--s-konf-rand); }
.tisch.s-konflikt .t-label, .tisch.s-konflikt .t-sub { fill: var(--s-konf-text); stroke: var(--s-konf-bg); }
.tisch.s-belegt .stuhl.besetzt { fill: var(--s-belegt-bg); stroke: var(--s-belegt-rand); }
.tisch.s-baldfrei .stuhl.besetzt { fill: var(--s-bald-punkt); stroke: var(--s-bald-rand); }
.tisch.s-konflikt .stuhl.besetzt { fill: var(--s-konf-linie); stroke: var(--s-konf-rand); }
.kombi-linie { stroke: var(--s-belegt-bg); stroke-width: 5; stroke-linecap: round; opacity: .55; pointer-events: none; }
.kombi-auswahl { stroke: var(--akzent); stroke-dasharray: 2 9; opacity: 1; stroke-width: 6; }

/* Raum-Modus: Tische neutral, ohne Status */
.haupt[data-modus="raum"] .tisch .platte { fill: var(--tisch-neutral); stroke: var(--linie-stark); }
.haupt[data-modus="raum"] .tisch .ring, .haupt[data-modus="raum"] .tisch .ring-bg, .haupt[data-modus="raum"] .tisch .t-sub, .haupt[data-modus="raum"] .tisch .badge { display: none; }
.haupt[data-modus="raum"] .tisch .t-label { fill: var(--tinte); stroke: var(--tisch-neutral); }
.haupt[data-modus="raum"] .tisch .stuhl.besetzt { fill: var(--stuhl); stroke: var(--stuhl-rand); }
.haupt[data-modus="raum"] .tisch { cursor: move; }
.haupt[data-modus="raum"] .kombi-linie { display: none; }

/* Editor-Ebene */
.auswahl-rahmen { fill: none; stroke: var(--akzent); stroke-width: 3; stroke-dasharray: 8 6; pointer-events: none; }
.auswahl-linie { stroke: var(--akzent); stroke-width: 15; opacity: .3; stroke-linecap: round; pointer-events: none; }
.griff { fill: var(--karte); stroke: var(--akzent); stroke-width: 3.5; cursor: pointer; }
.griff[data-cursor="nwse-resize"] { cursor: nwse-resize; } .griff[data-cursor="nesw-resize"] { cursor: nesw-resize; }
.griff-dreh { fill: var(--akzent); cursor: grab; }
.dreh-linie { stroke: var(--akzent); stroke-width: 3; pointer-events: none; }
.dreh-zeichen { fill: none; stroke: var(--akzent-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.vorschau { fill: color-mix(in srgb, var(--akzent) 18%, transparent); stroke: var(--akzent); stroke-width: 3; stroke-dasharray: 8 6; pointer-events: none; }
.vorschau-linie { fill: none; stroke-width: 9; stroke-dasharray: none; opacity: .65; stroke-linecap: square; }

/* Leiste unter dem Plan: Tische kombinieren */
.plan-aktion { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px 10px 16px; background: var(--karte); border: 2px solid var(--akzent); border-radius: 12px; box-shadow: var(--schatten); }
.pa-text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.pa-hinweis { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.pa-hinweis.ok { background: var(--s-frei-bg); color: var(--s-frei-text); }
.pa-hinweis.warn { background: var(--s-gleich-bg); color: var(--s-gleich-text); }
.pa-hinweis .ic { width: 16px; height: 16px; }
.pa-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Walk-in */
.flaeche-seite { position: relative; }
.walkin { position: absolute; left: 12px; right: 12px; top: 56px; z-index: 12; max-height: calc(100% - 68px); overflow: auto; padding: 14px; background: var(--karte); border: 2px solid var(--akzent); border-radius: 14px; box-shadow: var(--schatten); display: grid; gap: 10px; }
.wi-sub { font-size: 13px; color: var(--tinte-3); }
.wi-eingabe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wi-liste { display: grid; gap: 8px; }
.wi-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte-2); }
.wi-option.beste { border-color: var(--akzent); background: var(--akzent-hell); }
.wi-option.kurz { border-style: dashed; }
.wi-text { display: grid; gap: 1px; min-width: 0; font-size: 14px; }
.wi-detail { color: var(--tinte-2); font-size: 13px; }
.wi-grund { font-size: 12.5px; font-weight: 600; color: var(--akzent-stark); }
:root[data-theme="dunkel"] .wi-grund { color: var(--akzent); }
.wi-leer { padding: 10px; font-size: 14px; color: var(--tinte-2); }

/* Tisch-Fenster */
.pop { position: fixed; z-index: 40; width: 340px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: 14px 16px 16px; background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 14px; box-shadow: var(--schatten); display: grid; gap: 8px; }
.pop-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pop-titel { font: 500 22px/1.1 var(--f-serif); }
.pop-meta { font-size: 13px; color: var(--tinte-3); margin-top: -4px; }
.pop-status { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--karte-2); font-size: 14px; font-weight: 500; }
.pop-status .muster { flex: none; margin-top: 1px; }
.pop-unter { font-size: 13px; font-weight: 600; color: var(--tinte-2); margin-top: 4px; }
.pop-liste { display: grid; gap: 4px; }
.pop-res { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); text-align: left; }
.pop-res:hover { background: var(--karte-2); border-color: var(--tinte-2); }
.pop-res.konflikt { border-color: var(--s-konf-rand); background: var(--gefahr-hell); }
.pop-zeit { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.pop-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-pers { color: var(--tinte-2); font-size: 13px; }
.pop-leer { font-size: 13.5px; color: var(--tinte-3); }
.pop-aktionen { display: grid; gap: 8px; margin-top: 6px; }
.pop-aktionen .knopf { justify-content: flex-start; }

/* ───────── Zeitstrahl ───────── */
.zs { --label-w: 66px; --zeile-h: 29px; --spur-min: 540px; flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.haupt[data-ansicht="zeitstrahl"] .zs { --zeile-h: 50px; --label-w: 84px; --spur-min: 760px; }   /* zwei Textzeilen + Musterstreifen unten brauchen Platz */
.g-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--linie); }
.g-innen { min-width: calc(var(--label-w) + var(--spur-min)); }
.g-kopf { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); background: var(--karte); border-bottom: 1px solid var(--linie-stark); }
.g-ecke { position: sticky; left: 0; z-index: 9; background: var(--karte); font-size: 12px; font-weight: 600; color: var(--tinte-3); padding: 0 10px; display: flex; align-items: center; border-right: 1px solid var(--linie); }
.g-achse { position: relative; height: 48px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.g-stunde { position: absolute; top: 0; height: 100%; display: flex; align-items: flex-end; padding-bottom: 7px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--tinte-2); pointer-events: none; }
.g-stunde.erste { transform: translateX(3px); } .g-stunde.letzte { transform: translateX(calc(-100% - 3px)); }
.g-stunde.aus { visibility: hidden; }   /* ausgedünnt: zu wenig Platz für jede Stunde (zeitstrahl.js achseDichte) */
.g-stunde.mitternacht { color: var(--akzent-stark); }
:root[data-theme="dunkel"] .g-stunde.mitternacht { color: var(--akzent); }
.h-lang { display: none; }
@container (min-width: 560px) { .h-kurz { display: none; } .h-lang { display: inline; } }
.g-pin { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 0; pointer-events: none; z-index: 2; }
.g-pin-text { position: absolute; top: 5px; left: 0; transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; background: var(--akzent); color: var(--akzent-text); font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.g-koerper { position: relative; }
.g-gruppe { height: 24px; display: flex; align-items: center; padding: 0 10px; background: var(--karte-2); border-bottom: 1px solid var(--linie-fein); font-size: 12px; font-weight: 700; color: var(--tinte-2); }
.g-gruppe-text { position: sticky; left: 10px; z-index: 6; padding-right: 8px; background: var(--karte-2); }   /* über der Zeitmarke (z-index 5): die Linie läuft hinter dem Gruppentext durch */
.g-zeile { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); height: var(--zeile-h); border-bottom: 1px solid var(--linie-fein); }
.g-zeile.ziel .g-spur { background-color: var(--akzent-hell); }
.g-label { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; background: var(--karte); border-right: 1px solid var(--linie); }
.g-nr { font-weight: 700; font-size: 14px; min-width: 2ch; }
.g-pl { font-size: 11.5px; font-weight: 600; color: var(--tinte-2); border: 1px solid var(--linie-stark); border-radius: 999px; padding: 0 6px; line-height: 1.5; }
.g-warn { color: var(--gefahr-text); display: inline-flex; margin-left: auto; }
.g-warn .ic { width: 16px; height: 16px; }
.g-spur { position: relative; overflow: hidden; cursor: copy;
  background-image: linear-gradient(to right, var(--gitter) 1px, transparent 1px);
  background-size: calc(100% / var(--stunden, 8)) 100%; background-position: calc(var(--versatz, 0) * 1%) 0; background-repeat: repeat-x; }
.g-spur:hover { background-color: color-mix(in srgb, var(--akzent) 6%, transparent); }
.g-ueberschneidung { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--s-konf-linie) 0 3px, transparent 3px 7px); opacity: .7; pointer-events: none; z-index: 1; }
.g-cursor { position: absolute; top: 0; bottom: 0; left: calc(var(--label-w) + (100% - var(--label-w)) * var(--p, 0)); width: 2px; margin-left: -1px; background: var(--akzent); z-index: 5; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--karte) 60%, transparent); }

.g-balken {
  position: absolute; top: 3px; bottom: 3px; z-index: 2; display: flex; align-items: center; min-width: 8px; padding: 0 10px;
  border-radius: 8px; border: 1.5px solid var(--s-belegt-rand); background: var(--bar-spaeter-bg); color: var(--s-bald-text);
  font-size: 12.5px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden;
}
.g-balken:hover { filter: brightness(.96); }
.g-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; pointer-events: none; flex-wrap: nowrap; align-items: center; flex: 1; overflow: hidden; }
.g-name { line-height: 1.25; font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-pers { flex: none; font-size: 11.5px; font-weight: 600; opacity: .85; }
.g-zeit { display: none; font-size: 11.5px; line-height: 1.2; opacity: .85; }
.haupt[data-ansicht="zeitstrahl"] .g-text { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; }
.haupt[data-ansicht="zeitstrahl"] .g-kombi { grid-column: 3; grid-row: 1; }
.haupt[data-ansicht="zeitstrahl"] .g-zeit { display: block; grid-column: 1 / -1; }
.g-kombi { width: 14px; height: 14px; flex: none; align-self: center; }
.g-griff { position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize; z-index: 2; }
.g-griff-l { left: 0; } .g-griff-r { right: 0; }
.g-balken:hover .g-griff::after, .g-balken:focus-visible .g-griff::after, .g-balken.zieht .g-griff::after { content: ''; position: absolute; top: 28%; bottom: 28%; width: 3px; border-radius: 2px; background: currentColor; opacity: .55; }
.g-griff-l::after { left: 4px; } .g-griff-r::after { right: 4px; }
@media (pointer: coarse) { .g-griff { width: 20px; } }
.g-balken.vergangen { background: var(--bar-vorbei-bg); color: var(--bar-vorbei-text); border-color: var(--linie-stark); border-style: dashed; }
.g-balken.gleich { background: repeating-linear-gradient(45deg, var(--s-gleich-rand) 0 2.5px, transparent 2.5px 6px) 0 100% / 100% 5px no-repeat, var(--s-gleich-bg); color: var(--s-gleich-text); border-color: var(--s-gleich-rand); padding-bottom: 4px; }
.g-balken.aktuell { background: var(--s-belegt-bg); color: var(--s-belegt-text); border-color: var(--s-belegt-rand); }
.g-balken.aktuell.bald { background: radial-gradient(circle, var(--s-bald-punkt) 1.5px, transparent 1.9px) 0 100% / 7px 6px repeat-x, var(--s-bald-bg); color: var(--s-bald-text); border-color: var(--s-bald-rand); padding-bottom: 4px; }
.g-balken.walkin { border-style: dotted; border-width: 2px; }
.g-balken.da::before { content: ''; position: absolute; left: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--s-frei-rand); box-shadow: 0 0 0 1.5px var(--karte); }
.g-balken.konflikt, .g-balken.aktuell.konflikt, .g-balken.aktuell.bald.konflikt { background: repeating-linear-gradient(45deg, var(--s-konf-linie) 0 2.5px, transparent 2.5px 6px) 0 100% / 100% 5px no-repeat, var(--s-konf-bg); color: var(--s-konf-text); border-color: var(--s-konf-rand); border-width: 2px; padding-bottom: 4px; }
.g-balken.ausserhalb { border-style: dashed; }
.g-balken.zieht { cursor: grabbing; z-index: 9; box-shadow: var(--schatten); }
.g-balken:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; z-index: 6; border-radius: 8px; }
body.zieht-balken { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.zieht-balken .g-spur { overflow: visible; }
.g-blase { position: fixed; z-index: 90; padding: 6px 10px; border-radius: 8px; background: var(--tinte); color: var(--karte); font-size: 13px; font-weight: 700; pointer-events: none; white-space: nowrap; box-shadow: var(--schatten); }
.g-blase.warn { background: var(--gefahr); color: #fff; }
:root[data-theme="dunkel"] .g-blase.warn { color: #2A0906; }
.leer-ueber { position: sticky; left: 0; }

/* ───────── Dialoge ───────── */
.dlg { border: 0; padding: 0; border-radius: 18px; background: var(--karte); color: var(--tinte); width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 24px 60px rgba(8, 18, 16, .45); overflow: hidden; }
.dlg-klein { width: min(480px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(10, 22, 19, .55); backdrop-filter: blur(2px); }
.dlg-form { display: grid; gap: 14px; padding: 20px 22px 18px; max-height: calc(100dvh - 24px); overflow: auto; }
.dlg-titel { font: 500 26px/1.15 var(--f-serif); }
.dlg-sub { margin-top: -10px; color: var(--tinte-3); font-size: 14px; }
.dlg-text { font-size: 15px; line-height: 1.5; }
.dlg-hilfe { font-size: 13px; color: var(--tinte-3); }
.dlg-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding: 10px 22px 16px; margin: 0 -22px -18px; position: sticky; bottom: 0; background: var(--karte); box-shadow: 0 -10px 10px -10px rgba(20, 48, 42, .25); }   /* Speichern bleibt auch in einem langen Dialog sichtbar */
.mit-plus { position: relative; }
.plus1 { position: absolute; right: 8px; top: -19px; font-size: 11.5px; font-weight: 600; color: var(--akzent-stark); }
:root[data-theme="dunkel"] .plus1 { color: var(--akzent); }
.dauer-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-knopf { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--karte); font-weight: 600; font-size: 13.5px; }
.chip-knopf:hover { background: var(--akzent-hell); border-color: var(--akzent); }
.tisch-wahl { border: 1px solid var(--linie); border-radius: 12px; padding: 8px 12px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.tisch-wahl legend { font-size: 13px; font-weight: 600; color: var(--tinte-2); padding: 0 6px; }
.tisch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tisch-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--karte-2); border: 1px solid var(--linie-stark); font-weight: 600; font-size: 14px; min-height: 36px; }
.tisch-chip:not(:has(.chip-x)) { padding-right: 12px; }
.chip-x { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; }
.chip-x:hover { background: var(--linie); }
.chip-x .ic { width: 16px; height: 16px; }
.hinweise { display: grid; gap: 8px; }
.hinweis { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; border: 1px solid; }
.hinweis .ic { margin-top: 1px; width: 18px; height: 18px; }
.hinweis-fehler { background: var(--gefahr-hell); border-color: var(--gefahr); color: var(--gefahr-text); }
.hinweis-warn { background: var(--s-gleich-bg); border-color: var(--s-gleich-rand); color: var(--s-gleich-text); }
.alternativen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alternativen-titel { font-size: 13px; font-weight: 600; color: var(--tinte-2); }

/* Meldungen */
.toasts { position: fixed; z-index: 120; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; gap: 8px; width: min(560px, calc(100vw - 24px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 12px; background: var(--tinte); color: var(--karte); box-shadow: var(--schatten); font-size: 14px; font-weight: 500; animation: toast-rein .2s ease-out; }
:root[data-theme="dunkel"] .toast { background: #E7F0EE; color: #0D1A20; }
.toast-text { flex: 1; }
.toast-knopf { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid currentColor; background: transparent; font-weight: 700; font-size: 13.5px; }
.toast-knopf:hover { background: rgba(255, 255, 255, .15); }
.toast-zu { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 8px; }
.toast-zu .ic { width: 18px; height: 18px; }
@keyframes toast-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────── Alternative Ansichten ───────── */
.sv-kopf { display: grid; gap: 6px; padding: 8px 0 14px; }
.sv-sub { color: var(--tinte-2); max-width: 90ch; font-size: 15px; }

/* Heatmap */
.hm-box { overflow-x: auto; padding-bottom: 6px; }
.hm { border-collapse: separate; border-spacing: 2px; width: 100%; table-layout: fixed; min-width: 860px; font-variant-numeric: tabular-nums; }
.hm th { font-weight: 600; font-size: 12.5px; color: var(--tinte-2); text-align: left; }
.hm-ecke { width: 150px; }
.hm-stunde { padding: 2px 0 4px 4px; border-left: 2px solid var(--linie); }
.hm-stunde.mitternacht { border-left-color: var(--akzent); color: var(--akzent-stark); }
.hm-zeilenkopf { width: 150px; text-align: left; padding-right: 8px; }
.hm-zeilenkopf .hm-name { display: block; font-size: 14px; font-weight: 700; color: var(--tinte); }
.hm-plaetze { display: block; font-size: 12px; font-weight: 500; color: var(--tinte-3); }
.hm-gesamt .hm-zelle { height: 54px; }
.hm-zelle { height: 40px; padding: 0; border-radius: 5px; text-align: center; cursor: pointer; font-size: 12.5px; font-weight: 700; position: relative; }
.hm-zelle:hover { outline: 2px solid var(--tinte-2); outline-offset: -1px; }
.hm-zelle.jetzt { outline: 3px solid var(--akzent); outline-offset: -1px; z-index: 1; }
.lvl-0 { background: var(--lvl-0); color: var(--lvl-text-hell); }
.lvl-1 { background: var(--lvl-1); color: var(--lvl-text-hell); }
.lvl-2 { background: var(--lvl-2); color: var(--lvl-text-hell); }
.lvl-3 { background: var(--lvl-3); color: var(--lvl-text-dunkel); }
.lvl-4 { background: var(--lvl-4); color: var(--lvl-text-dunkel); }
.lvl-5 { background: var(--lvl-5); color: var(--lvl-text-dunkel); }
:root[data-theme="dunkel"] .lvl-3, :root[data-theme="dunkel"] .lvl-4, :root[data-theme="dunkel"] .lvl-5 { color: var(--lvl-text-dunkel); }
:root[data-theme="dunkel"] .lvl-2 { color: var(--lvl-text-hell); }
.lvl-5.hm-zelle { box-shadow: inset 0 -5px 0 var(--akzent); }
.hm-ankunft th { vertical-align: bottom; padding-bottom: 6px; }
.hm-ank-zelle { vertical-align: bottom; height: 66px; text-align: center; cursor: pointer; padding: 0; }
.hm-ank-zahl { display: block; font-size: 12px; font-weight: 700; min-height: 15px; }
.hm-ank-balken { display: block; width: 62%; margin: 2px auto 0; background: var(--akzent); border-radius: 4px 4px 0 0; min-height: 0; }
.hm-ank-zelle:hover .hm-ank-balken { background: var(--akzent-stark); }
.sv-vor { font-size: 13.5px; font-weight: 600; color: var(--tinte-2); }
.hm-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: var(--tinte-2); }
.hm-legende li { display: inline-flex; align-items: center; gap: 8px; }
.hm-swatch { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 20px; border-radius: 5px; font-weight: 800; font-size: 13px; }
.hm-swatch.lvl-5 { box-shadow: inset 0 -4px 0 var(--akzent); }
.hm-box + .hm-legende + .dlg-hilfe { margin-top: 10px; }

/* Service */
.sv-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sv-spalte { display: grid; gap: 10px; min-width: 0; }
.sv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 500 19px/1.2 var(--f-serif); padding-bottom: 8px; border-bottom: 2px solid var(--tinte); }
.sv-zahl { font: 700 14px var(--f-ui); color: var(--tinte-2); }
.sv-karten { display: grid; gap: 10px; }
.sv-karte { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte-2); }
.sv-karte.konflikt { border-color: var(--s-konf-rand); }
.sv-karte.da { border-left: 5px solid var(--s-frei-rand); }
.sv-karte-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sv-zeit { font: 700 26px/1 var(--f-ui); letter-spacing: -.02em; }
.sv-rel { font-size: 13.5px; font-weight: 600; color: var(--tinte-2); }
.sv-rel.faellig { color: var(--gefahr-text); }
.sv-wer { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15.5px; }
.sv-pers { color: var(--tinte-2); font-size: 14px; }
.sv-tische { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tisch-marke { display: inline-block; padding: 2px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--karte); border: 1.5px solid var(--linie-stark); }
.tisch-marke.s-frei { background: var(--s-frei-bg); border-color: var(--s-frei-rand); color: var(--s-frei-text); }
.tisch-marke.s-gleich { background: var(--s-gleich-bg); border-color: var(--s-gleich-rand); color: var(--s-gleich-text); border-style: dashed; }
.tisch-marke.s-baldfrei { background: var(--s-bald-bg); border-color: var(--s-bald-rand); color: var(--s-bald-text); border-style: dotted; }
.sv-zone { font-size: 13px; color: var(--tinte-3); }
.sv-notiz { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--tinte); padding: 6px 8px; background: var(--karte); border-radius: 8px; border: 1px solid var(--linie); }
.sv-notiz .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.sv-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sv-rest { height: 8px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.sv-rest-fuell { display: block; height: 100%; background: var(--s-belegt-bg); border-radius: 999px; }
.sv-walkin { display: grid; gap: 8px; padding: 12px 14px; border: 2px solid var(--akzent); border-radius: 12px; background: var(--akzent-hell); font-size: 14.5px; }
.sv-unter { font-size: 13px; font-weight: 700; color: var(--tinte-2); margin-top: 6px; }
.sv-frei { display: grid; gap: 6px; }
.sv-frei li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.sv-frei-text { color: var(--tinte-2); }

/* ───────── Raum einrichten ───────── */
.edit-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 18px; display: grid; gap: 14px; align-content: start; }
.edit-block { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linie); }
.edit-h { font-size: 13px; font-weight: 700; color: var(--tinte-2); }
.werkzeuge-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.werkzeug { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linie-stark); background: var(--karte); font-weight: 600; font-size: 13.5px; }
.werkzeug[aria-pressed="true"] { background: var(--tinte); color: var(--karte); border-color: var(--tinte); }
:root[data-theme="dunkel"] .werkzeug[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pal { display: grid; gap: 4px; justify-items: center; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte-2); font-size: 12.5px; font-weight: 600; text-align: center; }
.pal:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.pal-icon { width: 100%; height: 44px; }
.pal-stuhl { fill: var(--stuhl); stroke: var(--stuhl-rand); stroke-width: 3; }
.pal-platte { fill: var(--tisch-neutral); stroke: var(--linie-stark); stroke-width: 4; }
.insp { display: grid; gap: 12px; }
.insp-titel { font: 500 18px/1.2 var(--f-serif); }
.insp-leer, .insp-info { font-size: 13.5px; color: var(--tinte-3); }
.insp-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.drehfeld { display: flex; align-items: center; gap: 10px; }
.drehwert { min-width: 4ch; text-align: center; font-weight: 700; font-size: 16px; }

/* ───────── Anpassung an Fenstergrößen ───────── */
/* Kopfzeile eng (Heute-Knopf oder Konflikt-Zähler sichtbar): Navigation zeigt nur den aktiven Namen, damit nichts überlappt */
.kopf.eng .ansicht-knopf { padding: 0 12px; }
.kopf.eng .ansicht-knopf:not([aria-current="true"]) span { display: none; }
@media (max-width: 1360px) {
  .ansicht-knopf { padding: 0 12px; }
  .ansicht-knopf:not([aria-current="true"]) span { display: none; }
  .sv-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .kopf { gap: 8px 12px; }
  .aktionen .knopf-primaer span { display: none; }
  .aktionen .knopf-primaer { width: 40px; padding: 0; }
  .marke-name { font-size: 20px; }
}
@media (max-width: 1100px) {
  .zeitleiste { grid-template-columns: auto minmax(0, 1fr); padding-inline: 12px; gap: 6px 16px; }
  .zl-stand { grid-column: 1 / -1; justify-content: flex-start; }
  .inhalt { grid-template-columns: minmax(0, 1.3fr) minmax(330px, 1fr); gap: 10px; padding: 0 12px 12px; }
  .haupt[data-modus="raum"] .inhalt { grid-template-columns: minmax(0, 1fr) 340px; }
  .hm-zelle { font-size: 11px; letter-spacing: -.02em; }
}
/* Tablet hochkant: Plan und Zeitstrahl untereinander, die Seite scrollt */
@media (max-width: 960px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  .kopf { position: sticky; top: 0; z-index: 30; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marke aktionen" "datum ansichten"; padding: 8px 12px; }
  .marke { grid-area: marke; } .aktionen { grid-area: aktionen; } .datum { grid-area: datum; } .ansichten { grid-area: ansichten; justify-self: end; }
  .aktionen .knopf-primaer span { display: inline; }
  .aktionen .knopf-primaer { width: auto; padding: 0 14px; }
  .haupt { display: block; }
  .zeitleiste { position: sticky; top: var(--kopf-h, 104px); z-index: 25; background: var(--papier); border-bottom: 1px solid var(--linie); padding-block: 8px 4px; }
  .zl-regler-box { height: 48px; } .zl-regler::-webkit-slider-runnable-track, .zl-regler::-moz-range-track { height: 48px; } .zl-regler::-webkit-slider-thumb, .zl-regler::-moz-range-thumb { height: 48px; }
  .inhalt { display: grid; grid-template-columns: minmax(0, 1fr) !important; padding: 10px 12px 16px; gap: 12px; }
  .plan-rahmen { flex: none; height: clamp(320px, 64vw, 540px); }
  .plan { position: relative; inset: auto; width: max(720px, 100%); height: 100%; }
  .flaeche { overflow: visible; }
  .flaeche-plan { overflow: hidden; }
  .zs { min-height: 380px; max-height: 72vh; }
  .haupt[data-ansicht="zeitstrahl"] .zs { max-height: none; }
  .sv-spalten { grid-template-columns: minmax(0, 1fr); }
  .walkin { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: 64dvh; z-index: 45; }
  .plan-aktion { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 44; }
  .pop { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; max-width: none; max-height: 70dvh; z-index: 50; }
  .haupt[data-modus="raum"] .plan-rahmen { height: clamp(320px, 64vw, 520px); }
  .menue-liste { position: fixed; right: 12px; top: 60px; }
}
/* Telefon: Ansichten als feste Leiste unten */
@media (max-width: 760px) {
  body { padding-bottom: 76px; }
  .kopf { grid-template-areas: "marke aktionen" "datum datum"; gap: 6px 10px; }
  .marke { gap: 8px; } .marke-zeichen { width: 30px; height: 30px; } .marke-name { font-size: 17px; white-space: nowrap; }
  .datum { justify-content: space-between; width: 100%; } .datum-wahl { flex: 1; }
  .aktionen .knopf-primaer span { display: none; }
  .aktionen .knopf-primaer { width: 40px; padding: 0; }
  .ansichten { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; grid-area: auto; justify-self: stretch; border-radius: 0; border: 0; border-top: 1px solid var(--linie-stark); background: var(--karte); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
  .ansicht-knopf { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; font-size: 12px; }
  .ansicht-knopf span, .ansicht-knopf:not([aria-current="true"]) span, .kopf.eng .ansicht-knopf:not([aria-current="true"]) span { display: inline; font-size: 12px; }
  .zeitleiste { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "links stand" "mitte mitte"; gap: 6px 12px; padding: 8px 12px 6px; }
  .zl-mitte { grid-area: mitte; } .zl-stand { grid-area: stand; }
  .zl-tick .h-lang { display: none; } .zl-tick .h-kurz { display: inline; }
  .t-lang { display: none; } .t-kurz { display: inline; }
  .zl-links { grid-area: links; min-width: 0; gap: 8px; } .knopf-rund { width: 44px; height: 44px; min-height: 44px; }
  .zl-regler-box { height: 44px; } .zl-regler::-webkit-slider-runnable-track, .zl-regler::-moz-range-track { height: 44px; } .zl-regler::-webkit-slider-thumb, .zl-regler::-moz-range-thumb { height: 44px; }
  .zl-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; justify-content: stretch; }
  .stand { padding: 3px 6px 3px 4px; gap: 5px; } .stand .muster { width: 18px; height: 18px; } .stand-zahl { font-size: 14px; } .stand-name { display: none; } .stand-kurz { display: inline; font-size: 12.5px; }
  .demo-hinweis { flex-direction: column; align-items: stretch; margin: 8px 12px; padding: 10px 12px; gap: 8px; font-size: 13.5px; }
  .inhalt { padding: 8px 12px 12px; }
  .plan-rahmen { height: auto; overflow-x: auto; overflow-y: hidden; }
  .plan { width: max(640px, 100%); height: auto; aspect-ratio: var(--ar, 1.56); }
  .zs-hilfe { display: none; }
  .haupt[data-ansicht="zeitstrahl"] .zs { --label-w: 66px; --zeile-h: 48px; --spur-min: 620px; }
  .flaeche-breit { padding: 8px 12px 16px; }
  .titel.gross { font-size: 24px; }
  .walkin, .plan-aktion { left: 8px; right: 8px; bottom: 80px; }
  .pop { left: 8px !important; right: 8px; bottom: 72px; }
  .dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 94dvh; }
  .dlg-form { max-height: 94dvh; padding: 16px 16px 14px; }
  .toasts { bottom: 82px; }
  .haupt[data-modus="raum"] .plan-rahmen { height: auto; }
  .menue-liste { top: 56px; }
}
@media (pointer: coarse) {
  .knopf { min-height: 44px; } .knopf-klein { min-height: 44px; } .knopf-icon { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .tisch .platte { stroke: CanvasText; } .g-balken { border-color: CanvasText; } .zl-regler::-webkit-slider-thumb { background: Highlight; }
}
@media print { .kopf, .zeitleiste, .ansichten, .toasts { display: none; } body { height: auto; overflow: visible; } }
.edit-block-oben { border-top: 0; padding-top: 0; }

/* ───────── Nachträge nach Prüfung ───────── */
html { scroll-padding-bottom: 24px; }
@media (max-width: 960px) { html { scroll-padding-top: calc(var(--kopf-h, 104px) + 150px); scroll-padding-bottom: 96px; } }
.pop-konflikt { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--gefahr-text); }
.pop-konflikt .ic { width: 15px; height: 15px; }
.pop-kombi { display: inline-flex; color: var(--tinte-2); }
.pop-res { grid-template-columns: auto 1fr auto auto auto; }
.sv-konflikt { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--gefahr-text); }
.sv-konflikt .ic { width: 17px; height: 17px; flex: none; }
.sv-hinweis { font-size: 13px; color: var(--tinte-3); margin-bottom: 8px; }
.nudge { display: flex; gap: 8px; }
.ic-hoch { transform: rotate(-90deg); } .ic-runter { transform: rotate(90deg); }
.hm-box:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ───────── v2: Zeit-Eingabefeld, Telefon ───────── */
@media (max-width: 960px) { input.zl-uhr { font-size: 28px; min-height: 46px; } }
@media (max-width: 760px) {
  .zeitleiste { position: static; grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "mitte" "stand"; gap: 6px; padding: 8px 12px 6px; }
  .zl-links { grid-area: links; justify-content: space-between; gap: 8px; }
  .zl-zeit { flex: 1; min-width: 0; }
  .zl-feldreihe { justify-content: space-between; }
  input.zl-uhr { flex: 1; min-width: 0; width: auto; font-size: 26px; }
  .zl-schritt { min-width: 44px; }
  .zl-stand { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; }
  .stand { flex: 1 0 auto; justify-content: center; }
}
.g-balken.schmal .g-pers, .g-balken.schmal .g-zeit { display: none; }
.g-balken.mini { padding: 0; }
.g-balken.mini .g-text { display: none; }   /* die Ziehgriffe bleiben: auch eine 30-Minuten-Reservierung muss sich verlängern lassen */
.g-balken .g-kombi { margin-right: 2px; }
.pop-kombi-info { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--akzent-stark); background: var(--akzent-hell); border-radius: 8px; padding: 6px 10px; }
:root[data-theme="dunkel"] .pop-kombi-info { color: var(--akzent); }
.pop-kombi-info .ic { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.pop-zeitzusatz { font-weight: 500; font-size: 13px; opacity: .95; }
.pop-aktionen .knopf-primaer { flex-wrap: wrap; row-gap: 0; }
.pop-aktionen .pop-zeitzusatz { flex-basis: 100%; padding-left: 26px; font-size: 12.5px; }   /* zweite Zeile: „ab 23:00 Uhr“ unter dem Knopftext */

/* ───────── v2b: freie Zeiten, Slots, Tisch-Fenster ───────── */
.slot-wahl { border: 1px solid var(--linie); border-radius: 12px; padding: 8px 12px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.slot-wahl legend { font-size: 13px; font-weight: 600; color: var(--tinte-2); padding: 0 6px; }
.slot-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-sprung { font-weight: 700; }
.slot-sprung[aria-disabled="true"] { opacity: .55; cursor: default; border-style: dashed; }
.slot-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; padding: 2px; }
.slot-chip { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 48px; padding: 3px 4px; border-radius: 10px; border: 1.5px solid var(--linie-stark); background: var(--karte); color: var(--tinte); font: inherit; cursor: pointer; }
.slot-zeit { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.slot-sub { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.slot-chip.s-frei { background: var(--s-frei-bg); border-color: var(--s-frei-rand); color: var(--s-frei-text); }
.slot-chip.s-knapp { background: var(--s-gleich-bg); border-color: var(--s-gleich-rand); color: var(--s-gleich-text); border-style: dashed; }
.slot-chip.s-belegt { background: var(--karte-2); border-color: var(--linie); color: var(--tinte-3); cursor: not-allowed; }
.slot-chip.s-belegt .slot-zeit { text-decoration: line-through; }
.slot-chip.aktiv { border-color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--tinte); }   /* gewählt: kräftiger Rand; Fokus bleibt der äußere Ring */
.slot-chip:not(.s-belegt):hover { filter: brightness(.96); }
.slot-chip:focus-visible { outline-offset: 3px; }
.slot-chip:focus-visible, .slot-sprung:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.slot-info { font-size: 12.5px; color: var(--tinte-3); line-height: 1.4; }
.knopf-gewaehlt { background: var(--akzent-hell); border-color: var(--akzent); }
.pop-frei { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--s-frei-rand); border-radius: 10px; background: var(--s-frei-bg); color: var(--s-frei-text); text-align: left; font: inherit; cursor: pointer; }
.pop-frei .pop-zeit { font-size: 14px; }
.pop-frei .ic { width: 16px; height: 16px; flex: none; }
.pop-frei:hover { filter: brightness(.96); }
.pop-frei:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }