/*
  Panel Aesthetics & Workspace (Vorlage HAIR & BEAUTY by Othman): Aufbau wie das infinitecodes-CRM (graue Arbeitsflaeche, weisse Karten,
  8-px-Knoepfe, 12-px-Karten, ruhige Tabellen, Reiter mit Zahlen), Farben des Salons: Schwarz,
  Gold, Weiss. Gold als Text nur auf Schwarz (--gold) oder dunkel auf Hell (--gold-text, 6:1),
  helles Gold (--gold-linie) nur fuer Linien. Schriften liefert der Dienst selbst (dateien/).
  Die Klassen z-1 bis z-72 und d-1 bis d-72 (Lage im Kalender) haengt server.js unten an.
*/
@font-face { font-family: "Jost"; src: url("jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --grund: #f6f5f2; --karte: #ffffff; --flaeche: #efede8; --rand: #e4e1da; --rand-feld: #8f8a80; --rand-knopf: #c9c4b9;
  --text: #161513; --leise: #5c5850;
  --schwarz: #111111; --schwarz-hover: #2a2926;
  --gold: #d4b25a; --gold-linie: #b08d2e; --gold-text: #7a5d0f; --gold-sanft: #f7f0dc;
  --ok: #1f6b45; --ok-sanft: #e3f2ea; --aus: #9b2c2c; --aus-sanft: #f7e7e7; --warn-linie: #b5651d; --warn-sanft: #fbefdf;
  --r-knopf: 8px; --r-karte: 12px;
  --zeile: 2.125rem;   /* eine Viertelstunde (seit 06.11.2026 groesser): der Tag von 9 bis 18 Uhr ist so 1224 px hoch */
  --achse: 3.25rem; --spalte: 11rem;
  /* Kalender: weisse Schrift hat auf allen sechs Flaechen mindestens 4,5:1 (test/kalender.test.js) */
  --kal-blau: #1c6f92; --kal-blau-dunkel: #155a77; --kal-orange: #bd5700; --kal-orange-dunkel: #9c4700; --kal-rot: #c8202f; --kal-rot-dunkel: #a81825;
  --kal-jetzt: #0f9960; --kal-linie: #e4e1da; --kal-linie-stunde: #8f8a80;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 .9375rem/1.5 "Jost", system-ui, sans-serif; }
a { color: var(--gold-text); text-underline-offset: .15em; }
h1 { font-size: 1.625rem; font-weight: 600; margin: .25rem 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 .8rem; }
.huelle { max-width: 76rem; margin: 0 auto; padding: 1.25rem 1.5rem; }
@media (max-width: 40rem) { .huelle { padding: 1rem; } }
main:focus { outline: none; }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.leise { color: var(--leise); }
.klein { font-size: .8125rem; }
.block { display: block; }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; }
.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .6rem 1rem; border-radius: var(--r-knopf); background: var(--karte); color: var(--text); font-weight: 600; }
.sprung:focus { top: 1rem; }

/* Kopf in Schwarz mit goldener Wortmarke, Bereiche als Reiter darunter */
.kopf { background: var(--schwarz); color: #fff; border-bottom: 2px solid var(--gold-linie); }
.kopf :focus-visible { outline-color: var(--gold); }
/* Seit 01.11.2026 (Ansage): Wortmarke mittig und groesser, Hamburger-Menue rechts auf jeder Breite. Drei Spalten
   gleicher Mindestbreite, links leer (Benutzername auf Ansage 01.11.2026 entfernt), rechts das Menue; so steht die Marke genau
   in der Mitte. */
.kopf { position: relative; z-index: 20; }
.kopf-reihe { display: grid; grid-template-columns: minmax(2.75rem, 1fr) auto minmax(2.75rem, 1fr); grid-template-areas: "links marke rechts"; align-items: center; gap: .75rem; min-height: 4.5rem; padding-top: .6rem; padding-bottom: .6rem; }
.kopf-links { grid-area: links; display: flex; align-items: center; gap: .75rem; justify-self: start; min-width: 0; }
.kopf-rechts { grid-area: rechts; justify-self: end; }
.marke { grid-area: marke; justify-self: center; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 .45rem; color: #fff; text-decoration: none; }
.marke-wort { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.3rem; letter-spacing: .14em; color: var(--gold); }
.marke-by { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.15rem; color: #fff; }
.marke-bild { display: block; align-self: center; width: auto; height: 3.1rem; max-width: 100%; }
/* Seit 01.11.2026 (Ansage): "HAIR & BEAUTY by Othman | Verwaltung"; die Gruppe aus Marke und Zusatz steht mittig.
   Am Handy steht "Verwaltung" klein unter der Marke (daneben fehlt der Platz). */
.marke-zusatz { display: inline-flex; align-items: center; gap: .7rem; color: #e9e5dc; font-size: 1.3rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.marke-strich { color: var(--gold-linie); font-size: 2rem; font-weight: 300; line-height: 1; }
.kopf-wer { color: #cfcac0; font-size: .875rem; }
.kopf form { margin: 0; }
.menue { position: relative; }
.menue > summary { list-style: none; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 1rem; border: 1px solid #55514a; border-radius: 999px; color: #fff; font-weight: 500; cursor: pointer; user-select: none; }
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover, .menue[open] > summary { border-color: var(--gold); }
.menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.menue[open] .menue-striche { background: transparent; }
.menue[open] .menue-striche::before { top: 0; transform: rotate(45deg); }
.menue[open] .menue-striche::after { top: 0; transform: rotate(-45deg); }
.menue .zahl { background: var(--gold); color: var(--schwarz); }
.menue-feld { position: absolute; right: 0; top: calc(100% + .75rem); z-index: 30; width: min(20rem, calc(100vw - 2rem)); padding: .35rem 0 .9rem; background: var(--schwarz); border: 1px solid #2a2926; border-top: 2px solid var(--gold-linie); border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.menue-feld ul { list-style: none; margin: 0; padding: 0; }
.menue-feld li a { display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; padding: 0 1.15rem; color: #e9e5dc; font-weight: 500; text-decoration: none; }
.menue-pfeil { display: inline-flex; margin-left: auto; color: var(--gold); }
.menue-pfeil .ico { width: 1rem; height: 1rem; }
.menue-feld li a:hover { background: #1d1c1a; color: #fff; }
.menue-feld li a.aktiv { background: #1d1c1a; color: #fff; font-weight: 600; }
.menue-unten { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .45rem; padding: .85rem 1.15rem 0; border-top: 1px solid #2a2926; }
.menue-unten form { margin: 0; }
@media (max-width: 40rem) {
  .kopf-wer { display: none; }
  /* Seit 01.11.2026 (Ansage): auch am Handy "HAIR & BEAUTY by Othman | Verwaltung" in einer Zeile; die Marke
     schrumpft, damit alles zwischen die beiden Seitenspalten passt */
  .marke { flex-wrap: nowrap; gap: 0 .45rem; min-width: 0; max-width: 100%; }
  .marke-zusatz { gap: .45rem; font-size: clamp(.8125rem, 3.7vw, 1rem); }
  .marke-strich { font-size: 1.5rem; }
  .kopf-reihe { gap: .5rem; min-height: 4rem; }
  .menue > summary { padding: 0; justify-content: center; }
  .menue-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menue > summary .zahl { position: absolute; top: -.35rem; right: -.45rem; }
  .menue > summary { position: relative; }
  /* Marke so breit wie Platz ist (Rand 2 x 1 rem, zwei Seitenspalten 2 x 2,75 rem, zwei Abstaende), hoechstens 214 px */
  .marke-bild { flex: 0 1 auto; min-width: 0; height: auto; width: 160px; max-width: 100%; }
}

/* Knoepfe: eine gefuellte Hauptaktion je Bereich (Schwarz), sonst ruhig */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .55rem 1rem; border-radius: var(--r-knopf); border: 1px solid transparent; font-family: inherit; font-weight: 600; font-size: .9rem; line-height: 1.2; text-decoration: none; cursor: pointer; }
.knopf.voll { background: var(--schwarz); color: #fff; }
.knopf.voll:hover { background: var(--schwarz-hover); }
.knopf.leise { background: var(--karte); color: var(--text); border-color: var(--rand-knopf); }
.knopf.leise:hover { background: var(--flaeche); border-color: var(--rand-feld); }
.knopf.dunkel { background: transparent; color: #fff; border-color: #5a5650; }
.knopf.dunkel:hover { background: #222120; border-color: var(--gold); }
.knopf.gefahr { background: var(--aus); color: #fff; }
.knopf.gefahr:hover { background: #7f2222; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.knopf-reihe form { margin: 0; }

.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-karte); padding: 1.25rem; box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }
.meldung { padding: .75rem 1rem; border-radius: var(--r-knopf); margin: 0 0 1rem; }
.meldung p { margin: 0 0 .4rem; }
.meldung.ok { background: var(--ok-sanft); color: var(--ok); }
.meldung.fehler { background: var(--aus-sanft); color: var(--aus); }
.meldung.hinweis { background: var(--gold-sanft); color: var(--text); border-left: 3px solid var(--gold-linie); }
.meldung.hinweis a { color: var(--gold-text); font-weight: 600; }
/* Warnung (fehlgeschlagene Mail, Gesamtgrenze der Online-Buchung): dunkler Text, Linie in Orange */
.meldung.warnung { background: var(--warn-sanft); color: var(--text); border-left: 3px solid var(--warn-linie); }
.meldung.warnung a { color: var(--gold-text); font-weight: 600; }
.mail-fehler { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.mail-fehler p, .mail-fehler form { margin: 0; }
.frage { max-width: 40rem; }
.frage .angaben { margin-bottom: 1rem; }
.leer { padding: 1.5rem 1.25rem; margin: 0; color: var(--leise); }
.einfach { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.abstand-liste li { padding-left: 1rem; position: relative; }
.abstand-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--gold-linie); }

/* Formulare */
.formular { display: grid; gap: .9rem; }
.formular > label, .feld > label { font-weight: 600; font-size: .875rem; }
.feld { display: grid; gap: .3rem; align-content: start; }
.formular.zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; }
.formular.drei { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 56rem) { .formular.drei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .formular.drei .breit { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .formular.drei { grid-template-columns: minmax(0, 1fr); } }
.formular.abstand { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font: inherit; font-size: 1rem; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid var(--rand-feld); border-radius: var(--r-knopf); background: var(--karte); color: var(--text); width: 100%; max-width: 100%; }
textarea { resize: vertical; min-height: 5rem; }
input[aria-invalid="true"] { border-color: var(--aus); box-shadow: inset 0 0 0 1px var(--aus); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: .45rem; font-weight: 600; font-size: .875rem; }
.haken { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.haken input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--ok); }   /* Haken in Gruen (Wunsch des Salons 31.10.2026), 6,6:1 auf Weiss */
.anmelden { max-width: 26rem; margin: 3rem auto; }

/* Auswahl als Karten (Modus, Art der Sperrzeit) */
.wahl-liste { display: grid; gap: .5rem; }
.wahl { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--rand-feld); border-radius: var(--r-karte); cursor: pointer; }
.wahl:has(input:checked) { border-color: var(--schwarz); box-shadow: inset 0 0 0 1px var(--schwarz); background: #fcfbf8; }
.wahl input { flex: none; width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; accent-color: var(--schwarz); }
.wahl strong { display: block; font-weight: 600; }
.wahl span { color: var(--leise); font-size: .875rem; }
.wahl strong { color: var(--text); font-size: .9375rem; }

/* Uhrzeiten als Knoepfe (Radio darunter, bleibt fuer Tastatur und Vorleser bedienbar) */
.zeit-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: .5rem; }
.zeit-wahl { position: relative; display: block; }
.zeit-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zeit-wahl span { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 .6rem; border: 1px solid var(--rand-feld); border-radius: var(--r-knopf); background: var(--karte); font-weight: 600; font-variant-numeric: tabular-nums; }
.zeit-wahl input:hover + span { background: var(--flaeche); }
.zeit-wahl input:checked + span { background: var(--schwarz); border-color: var(--schwarz); color: #fff; }
.zeit-wahl input:focus-visible + span { outline: 3px solid var(--gold-text); outline-offset: 2px; }
.andere { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.andere .breit span { padding: 0 1rem; }
.andere input[type="time"] { width: auto; min-width: 8rem; }

/* Seitenkopf, Tagesleiste */
.seiten-kopf { margin-bottom: 1rem; }
.seiten-kopf h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.seiten-kopf p { margin: 0; }
/* Kalender (06.11.2026, Ansage): Tagesansicht auf jeder Breite als Zeitraster, Aufbau nach dem Tageskalender aus der
   Ansage. Ein einziger Scroller fuer beide Richtungen (.kalender), darin die Flaeche (.kal-flaeche) mit voller Breite:
   sticky bleibt in seinem umgebenden Block, deshalb Flex statt Grid (ein Grid-Bereich wuerde die Achse festhalten). */
.kal-leiste { position: relative; z-index: 2; display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; padding: .2rem .5rem; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-knopf); }
.kal-wahl { position: relative; flex: none; }
.kal-wahl > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-knopf); color: var(--leise); cursor: pointer; }
.kal-wahl > summary::-webkit-details-marker { display: none; }
.kal-wahl > summary .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.kal-wahl > summary:hover, .kal-wahl[open] > summary { background: var(--flaeche); color: var(--text); }
.tag-wahl { position: absolute; left: 0; top: calc(100% + .35rem); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); margin: 0; padding: .75rem; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-knopf); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.tag-wahl label { font-weight: 600; font-size: .875rem; }
.tag-wahl input { width: auto; }
.kal-datum { flex: none; margin: 0; padding: .15rem .7rem .1rem; border-top: 3px solid transparent; color: var(--gold-text); font-weight: 500; text-align: center; line-height: 1.1; }
.kal-datum.kal-heute { border-top-color: var(--gold-linie); }
.kal-datum > span[aria-hidden] { display: grid; }
.kal-wt, .kal-mon { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.kal-nr { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.kal-pfeile { display: flex; flex: none; padding-left: .35rem; border-left: 1px solid var(--rand); }
.kal-pfeil { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-knopf); color: var(--text); }
.kal-pfeil:hover { background: var(--flaeche); }
.kal-pfeil .ico { width: 1.35rem; height: 1.35rem; }
.kal-zuheute { flex: none; }
.kal-status { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .8125rem; color: var(--leise); }
.kal-leiste .tag-neu { flex: none; margin-left: auto; white-space: nowrap; }

/* Flaeche: Zeitachse plus eine Spalte je Person; Zeilen = Viertelstunden von 9 bis 18 Uhr. Die Hoehe rechnet
   vorlage/panel.js aus der Lage des Scrollers nach (--kal-oben), ohne JavaScript bleibt der Ersatzwert. */
.kalender { position: relative; isolation: isolate; max-height: calc(100vh - var(--kal-oben, 5rem)); max-height: calc(100dvh - var(--kal-oben, 5rem)); min-height: 22rem; overflow: auto; overscroll-behavior-x: contain; scroll-padding: 3.15rem 0 0 var(--achse); background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-knopf); }
.kal-flaeche { display: flex; width: max-content; min-width: 100%; }
.kal-achse { flex: none; width: var(--achse); position: sticky; left: 0; z-index: 6; background: var(--karte); }
.kal-spalte { flex: 1 0 var(--spalte); width: var(--spalte); min-width: 0; scroll-snap-align: start; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.kal-kopf h2 { margin: 0; font-size: .875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
/* "nicht online"/"entfernt" neben dem Namen, ohne die Kopfzeile hoeher zu machen (Raster bleibt buendig) */
.kal-kopf .kopf-pille { padding-top: 0; padding-bottom: 0; line-height: 1.35; vertical-align: .1em; letter-spacing: 0; text-transform: none; }
.kalender .kal-kopf h2 { min-width: 0; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termine td.zeitraum { min-width: 10.5rem; }
/* Namen bleiben beim Scrollen oben stehen, die Zeitachse beim Wischen links */
.kalender .kal-kopf { position: sticky; top: 0; z-index: 5; height: 3.15rem; padding: 0 .15rem 0 .6rem; background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.kal-achse .kal-kopf { background: var(--karte); }
.kal-plus { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-knopf); color: var(--leise); }
.kal-plus:hover { background: var(--rand); color: var(--text); }
.kal-raster { display: grid; grid-template-rows: repeat(36, var(--zeile)); list-style: none; margin: 0; padding: 0; min-width: 0; }
.kal-spalte .kal-raster {
  background-color: var(--karte); box-shadow: inset 1px 0 0 var(--kal-linie-stunde);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--zeile) * 4 - 1px), var(--kal-linie-stunde) calc(var(--zeile) * 4 - 1px), var(--kal-linie-stunde) calc(var(--zeile) * 4)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--zeile) - 1px), var(--kal-linie) calc(var(--zeile) - 1px), var(--kal-linie) var(--zeile));
}
.kal-raster > li, .kal-raster > span { grid-column: 1; min-height: 0; overflow: hidden; }
/* Zeiten sitzen mittig auf ihrer Linie; die erste bleibt unter dem Kopf ganz sichtbar */
.kal-raster > span.kal-std { align-self: start; height: 1em; overflow: visible; font-size: .8125rem; color: var(--text); text-align: right; padding-right: .45rem; line-height: 1; font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.kal-raster > span.kal-std.halb { color: var(--leise); }
.kal-raster > span.kal-std.z-1 { transform: none; padding-top: .2rem; }
/* Geschlossen und Abwesenheit: schraffiert; der Text bleibt beim Scrollen im Bild */
.kz { display: flex; align-items: flex-start; justify-content: center; background: repeating-linear-gradient(135deg, #ecebe6 0 6px, #f4f3ef 6px 12px); color: var(--leise); font-size: .75rem; }
.ks { padding: .2rem .45rem; background: repeating-linear-gradient(135deg, #e2e0da 0 6px, #ebe9e4 6px 12px); color: #3d3a35; font-size: .75rem; line-height: 1.3; z-index: 1; }
.kal-raster > li.kz, .kal-raster > li.ks { overflow: hidden; overflow: clip; }
.kz > span, .ks-text { position: sticky; top: 3.6rem; display: block; padding: .15rem 0; }

/* Karten: volle Farbe, weisse Schrift, oben Name, darunter Punkt und Leistung, keine Uhrzeit */
.kf-blau { background: var(--kal-blau); color: #fff; }
.kf-orange { background: var(--kal-orange); color: #fff; }
.kf-rot { background: var(--kal-rot); color: #fff; }
.kb { margin: 1px 3px; z-index: 2; }
.kb a { display: flex; flex-direction: column; gap: .1rem; height: 100%; padding: .2rem .5rem; overflow: hidden; border-radius: 4px; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.kb a.kf-blau:hover { background: var(--kal-blau-dunkel); }
.kb a.kf-orange:hover { background: var(--kal-orange-dunkel); }
.kb a.kf-rot:hover { background: var(--kal-rot-dunkel); }
.kb a:focus-visible { outline: 3px solid var(--schwarz); outline-offset: -3px; }
.kb-neu a { padding: calc(.2rem - 2px) calc(.5rem - 2px); border: 2px dashed #fff; }
.kb-name { flex: none; font-size: .875rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-unter { display: flex; flex: none; align-items: center; gap: .35rem; min-width: 0; }
.kb-punkt { display: inline-block; flex: none; width: .875rem; height: .875rem; border: 2px solid #fff; border-radius: 50%; }
.kp-0 { background: #a9d3f2; }
.kp-1 { background: #c2185b; }
.kp-2 { background: #6a1b9a; }
.kp-3 { background: #f6d55c; }
.kp-4 { background: #2e7d32; }
.kp-5 { background: #f8bbd0; }
.kp-6 { background: #111111; }
.kp-7 { background: #80deea; }
.kp-x { background: #ffffff; }
.kb-was { flex: 1 1 auto; min-width: 0; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-rechts { display: inline-flex; flex: none; align-items: center; gap: .3rem; margin-left: auto; }
.kb-notiz { width: 1.05rem; height: 1.05rem; stroke-width: 1.6; }
.kb-art { font-size: 1.0625rem; font-weight: 400; line-height: 1; }
.kb-marken { display: flex; flex: none; flex-wrap: wrap; gap: .2rem; }
.kb-marke { display: inline-block; padding: 0 .3rem; border-radius: 3px; background: #fff; color: var(--text); font-size: .6875rem; font-weight: 600; line-height: 1.35; }
.kb-marke.warn { color: var(--aus); }
.kb-marke.serie { color: var(--schwarz); }
/* Viertelstunde (eine Zeile): Name, Marken, Buchstabe, Punkt nebeneinander; Leistung steht im Titel und in der Akte,
   lange Marken schrumpfen auf ein Zeichen (der Text bleibt fuer Vorlesen und im Titel) */
.kb.d-1 a { flex-direction: row; align-items: center; gap: .3rem; padding-top: 0; padding-bottom: 0; }
/* Der Name bleibt lesbar: wird es eng, faellt rechts Punkt oder Buchstabe weg, nicht er (Titel und Akte nennen alles) */
.kb.d-1 .kb-name { flex: 1 0 2.75rem; min-width: 2.75rem; }
.kb.d-1 .kb-marken { order: 1; flex-wrap: nowrap; }
.kb.d-1 .kb-unter { order: 2; }
.kb.d-1 .kb-was { display: none; }
.kb.d-1 .kb-punkt { order: 2; }
.kb.d-1 .kb-marke:not(.tw) { font-size: 0; }
.kb.d-1 .kb-marke:not(.tw)::before { content: "?"; content: "?" / ""; font-size: .6875rem; }
.kb.d-1 .kb-marke.warn::before { content: "!"; content: "!" / ""; }
.kb.d-1 .kb-marke.serie::before { content: "S"; content: "S" / ""; }
/* Schmale Spalte am Handy: Mit Marken faellt der Buchstabe weg, sonst bleiben vom Namen drei Buchstaben (Titel und Akte nennen ihn) */
@media (max-width: 47.99rem) { .kb.d-1 a:has(.kb-marken) .kb-art { display: none; } }
/* Halbe Stunde: "Unbestaetigt" und "Mail fehlgeschlagen" passen nicht nebeneinander, die Mailmarke wird zum Zeichen */
.kb.d-2 .kb-marke.warn { font-size: 0; }
.kb.d-2 .kb-marke.warn::before { content: "!"; content: "!" / ""; font-size: .6875rem; }
/* Serie: die Marke bleibt lesbar, "Unbestaetigt" wird zum Zeichen (der gestrichelte Rand und der Titel sagen es weiter) */
.kb.d-2 .kb-marken:has(.serie) { flex-wrap: nowrap; }
.kb.d-2 .kb-marke.serie ~ .kb-marke:not(.warn) { font-size: 0; }
.kb.d-2 .kb-marke.serie ~ .kb-marke:not(.warn)::before { content: "?"; content: "?" / ""; font-size: .6875rem; }
/* Jetzt-Linie (nur heute) ueber alle Spalten, Versatz in Fuenf-Minuten-Schritten innerhalb der Viertelstunde. Der Punkt bleibt
   ganz in der Achse: die Achse liegt ueber den Namen, ragte er heraus, stuende er beim Scrollen ueber der Namenszeile. */
.kal-raster > li.jetzt { position: relative; align-self: start; height: 2px; margin: 0; overflow: visible; background: var(--kal-jetzt); z-index: 3; pointer-events: none; }
.kal-raster > span.kal-jetzt { align-self: start; justify-self: end; width: .625rem; height: .625rem; overflow: visible; border-radius: 50%; background: var(--kal-jetzt); transform: translate(0, calc(1px - 50%)); scroll-margin-top: 35vh; z-index: 1; }
.kal-raster > li.jetzt.jo-1, .kal-raster > span.kal-jetzt.jo-1 { margin-top: calc(var(--zeile) / 3); }
.kal-raster > li.jetzt.jo-2, .kal-raster > span.kal-jetzt.jo-2 { margin-top: calc(var(--zeile) * 2 / 3); }
.kal-raster > span.kal-anker { align-self: start; height: 0; }
.kal-sprung { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--karte); color: var(--text); box-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.kal-sprung:hover { background: var(--flaeche); }
.kal-sprung .ico { width: 1.5rem; height: 1.5rem; }

/* Legende */
.kal-legende { margin-top: 1rem; padding: .9rem 1rem 1rem; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-karte); font-size: .875rem; }
.kal-legende h2 { margin-bottom: .6rem; }
.kl-titel { margin: .9rem 0 .5rem; font-size: .875rem; font-weight: 600; }
.kl-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .4rem 1rem; margin: 0; padding: 0; }
.kl-liste li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kl-karte { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.25rem; border-radius: 3px; font-size: .8125rem; }
.kl-offen { background: var(--kal-blau); box-shadow: inset 0 0 0 1px var(--kal-blau); border: 2px dashed #fff; outline: 1px solid var(--kal-blau); }
.kl-zu { background: repeating-linear-gradient(135deg, #cfccc4 0 4px, #ebe9e4 4px 8px); }
.kl-zeichen { display: inline-flex; flex: none; justify-content: center; width: 1.75rem; }
.kl-marke { flex: none; width: 1.75rem; padding: 0; text-align: center; }
.kl-marke.serie { width: auto; padding: 0 .3rem; box-shadow: inset 0 0 0 1px var(--rand-feld); }
.kl-jetzt { flex: none; width: 1.75rem; height: 2px; background: var(--kal-jetzt); }
.kl-liste .kb-punkt { width: 1rem; height: 1rem; margin: 0 .375rem; border-color: var(--rand-feld); border-width: 1px; }

@media (max-width: 47.99rem) {
  .kalender { --spalte: calc((100vw - var(--achse)) / 2); scroll-snap-type: x mandatory; margin-left: -1.5rem; margin-right: -1.5rem; border-left: 0; border-right: 0; border-radius: 0; }
}
@media (max-width: 40rem) {
  .kalender { margin-left: -1rem; margin-right: -1rem; }
  .kal-leiste { flex-wrap: wrap; gap: .1rem .3rem; padding: .1rem .35rem .25rem; }
  .kal-leiste .knopf-zusatz { display: none; }
  .kal-datum { padding: .1rem .45rem 0; }
  .kal-pfeile { padding-left: .2rem; }
  .kal-pfeil { width: 2.5rem; }
  .kal-status { order: 9; flex: 1 1 calc(100% - 5rem); padding: 0 .3rem; font-size: .75rem; line-height: 1.3; }
  .kal-zuheute { order: 10; min-height: 2rem; padding: 0 .7rem; }
}
/* Ganz schmal: Termin anlegen nur als Plus (Name im aria-label), die Reihe bleibt eine Reihe */
@media (max-width: 23rem) {
  .kal-leiste .knopf-wort { display: none; }
  .kal-leiste .tag-neu { min-width: 2.75rem; padding: 0 .7rem; justify-content: center; }
  .kal-pfeil { width: 2.25rem; }
}
@media print {
  .kalender { max-height: none; overflow: visible; }
  .kal-flaeche { width: auto; }
  /* sonst behalten Namen und Achse den Versatz des Scrollers und liegen mitten im Tag ueber den Karten */
  .kalender .kal-kopf, .kal-achse, .kz > span, .ks-text { position: static; }
  .kal-sprung, .kal-wahl, .kal-pfeile, .kal-leiste .tag-neu { display: none; }
  .kb a, .kl-karte, .kb-punkt { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Kontrastdesign: Hintergruende fallen weg, also tragen Raender die Karten; die Jetzt-Linie behaelt ihre Flaeche */
@media (forced-colors: active) {
  .kb a { border: 1px solid CanvasText; }
  .kb-neu a { border: 2px dashed CanvasText; }
  .kal-raster > li.jetzt, .kal-raster > span.kal-jetzt, .kl-jetzt { forced-color-adjust: none; background: Highlight; }
  .ks, .kz, .kl-zu { border: 1px solid CanvasText; }
}
.kal-weg { margin-top: 1rem; }
.kal-weg li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Reiter mit Zahlen wie die Pipeline-Reiter im CRM */
.suche { display: grid; gap: .3rem; margin-bottom: 1rem; max-width: 40rem; }
.suche label { font-weight: 600; font-size: .875rem; }
.suche-reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.suche-reihe input { flex: 1 1 14rem; width: auto; }
.reiter-leiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .25rem; border-bottom: 1px solid var(--rand); margin-bottom: 1rem; }
.reiter { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .85rem; color: var(--leise); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter:hover { color: var(--text); }
.reiter.aktiv { color: var(--text); border-bottom-color: var(--gold-linie); }
.zahl { min-width: 1.5rem; padding: .05rem .45rem; border-radius: 999px; background: var(--flaeche); color: var(--leise); font-size: .75rem; font-weight: 600; text-align: center; }
.reiter.aktiv .zahl { background: var(--gold-sanft); color: var(--gold-text); }
.reiter.warn .zahl { background: var(--aus-sanft); color: var(--aus); }

/* Tabellen */
.tabelle-karte { padding: 0; overflow-x: auto; }
.tabelle-titel { padding: 1.25rem 1.25rem 0; }
table.termine { width: 100%; border-collapse: collapse; font-size: .875rem; }
.termine th { text-align: left; font-size: .75rem; font-weight: 600; color: var(--leise); padding: .7rem .9rem; background: var(--grund); border-bottom: 1px solid var(--rand); white-space: nowrap; }
.termine td { padding: .75rem .9rem; border-top: 1px solid var(--rand); vertical-align: middle; }
.termine tbody tr:first-child td { border-top: 0; }
.termine tbody tr:hover { background: #faf9f6; }
.termine .termin a { font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.termine .termin a:hover { color: var(--gold-text); text-decoration: underline; }
.termine .haupt .name { display: flex; align-items: center; min-height: 1.5rem; font-weight: 600; color: var(--text); text-decoration: none; }
.termine .haupt .tel { display: inline-flex; align-items: center; min-height: 1.5rem; }
.termine .haupt a.name:hover { color: var(--gold-text); text-decoration: underline; }
.termine .haupt .klein a { color: var(--leise); }
.termine td.aktion { text-align: right; white-space: nowrap; }
.termine td.aktion form { margin: 0; }
.termine .oeffnen { min-height: 2.5rem; padding: .4rem .8rem; }
@media (max-width: 46rem) {
  .termine thead { display: none; }
  .termine, .termine tbody, .termine tr, .termine td { display: block; }
  .termine tr { position: relative; padding: .75rem .9rem; border-top: 1px solid var(--rand); }
  .termine tbody tr:first-child { border-top: 0; }
  .termine td { border: 0; padding: .1rem 0; }
  /* Telefon: die ganze Karte oeffnet die Buchung; die Telefonnummer liegt darueber und bleibt antippbar */
  .termine .oeffnen::after { content: ""; position: absolute; inset: 0; }
  .termine .haupt .tel, .termine .termin a { position: relative; z-index: 1; }
  .termine td.aktion { text-align: left; padding-top: .55rem; }
  .termine .oeffnen { width: 100%; }
}

.pille { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; font-family: "Jost", system-ui, sans-serif; letter-spacing: 0; }
.pille.neu { background: var(--gold-sanft); color: var(--gold-text); }
.pille.ok { background: var(--ok-sanft); color: var(--ok); }
.pille.still { background: var(--flaeche); color: var(--leise); }
.pille.aus { background: var(--aus-sanft); color: var(--aus); }
.pille.warn { background: var(--karte); color: var(--aus); box-shadow: inset 0 0 0 1px var(--aus); }
.pillen { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* Akte: Kopf mit Stand und Aktionen, Angaben links, Verschieben/Absagen/Verlauf rechts */
.zurueck-reihe { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 .5rem; }
.zurueck { display: inline-flex; align-items: center; gap: .3rem; color: var(--leise); text-decoration: none; font-weight: 600; min-height: 2.75rem; }
.zurueck:hover { color: var(--text); }
.akte-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.akte-kopf h1 { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.akte-unter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--leise); }
.akte-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.akte-aktionen form { margin: 0; }
.akte-raster { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 56rem) { .akte-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.spalte { display: grid; gap: 1rem; min-width: 0; }
.angaben { margin: 0; display: grid; }
.angaben div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--rand); }
.angaben div:first-child { border-top: 0; }
.angaben dt { color: var(--leise); font-size: .875rem; }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .angaben div { grid-template-columns: 1fr; gap: .1rem; } }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.verlauf li { display: grid; font-size: .875rem; overflow-wrap: anywhere; }
.verlauf time { color: var(--leise); font-size: .8125rem; }
@media (prefers-reduced-motion: no-preference) { .knopf, .menue-feld a, .reiter, .kb a { transition: background-color .15s, color .15s, border-color .15s; } }

/* ---- seit 26.10.2026: Treatwell, Neuer Termin, Urlaub & Abwesenheit, Team, Einstellungen ---- */
:root { --tw: #155e75; --tw-sanft: #e2f1f5; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knopf.eckig { width: 2.75rem; padding: 0; }
.abstand-oben { margin-top: 1rem; }
.abstand-unten { margin-bottom: 1rem; }
.feld-titel { font-weight: 600; font-size: .875rem; }
.tabelle-fuss { padding: 0 1.25rem 1.25rem; margin: 0; }
.aufraeumen { margin-top: 1rem; }

/* Treatwell: eigene ruhige Farbe (Petrol), Kennzeichen "TW" */
.pille.tw { background: var(--tw); color: #fff; }
.pille.serie { background: var(--schwarz); color: #fff; }
.serie-termine li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.serie-termine li[aria-current] a { font-weight: 600; }
.kb-marke.tw { background: var(--schwarz); color: #fff; }

/* Auswahl als Pillen (Woher kommt der Termin, freie Tage) */
.pillen-reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.pillen-wahl { position: relative; display: inline-flex; }
.pillen-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pillen-wahl span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--rand-feld); border-radius: 999px; background: var(--karte); font-weight: 600; font-size: .9rem; }
.pillen-wahl input:hover + span { background: var(--flaeche); }
.pillen-wahl input:checked + span { background: var(--schwarz); border-color: var(--schwarz); color: #fff; }
.pillen-wahl input:focus-visible + span { outline: 3px solid var(--gold-text); outline-offset: 2px; }
.pillen-wahl input:disabled { cursor: not-allowed; }
.pillen-wahl input:disabled + span { color: var(--leise); background: var(--flaeche); border-style: dashed; }

/* Aufklappbereiche (Sondertermin, stundenweise Abwesenheit, Anleitung) */
details.sonder { border: 1px solid var(--rand); border-radius: var(--r-knopf); background: #fcfbf8; }
details.sonder > summary { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem .9rem; cursor: pointer; font-weight: 600; font-size: .9rem; }
details.sonder[open] > summary { border-bottom: 1px solid var(--rand); }
.sonder-innen { display: grid; gap: .8rem; padding: .9rem; }
details.karte > summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.anleitung { margin: .9rem; padding-left: 1.2rem; display: grid; gap: .3rem; }
.neu-form { margin-top: 0; }

/* Team */
.team-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.team-karte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-karte); padding: .9rem 1rem; }
.team-text h2 { margin: 0; font-size: 1.0625rem; }
.team-text h2 a { color: var(--text); text-decoration: none; }
.team-text h2 a:hover { color: var(--gold-text); text-decoration: underline; }
.team-text p { margin: .15rem 0 0; }
.team-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.team-aktionen form { margin: 0; }
@media (max-width: 34rem) { .team-karte { grid-template-columns: auto minmax(0, 1fr); } .team-aktionen { grid-column: 1 / -1; justify-content: flex-start; } }
.team-bild { display: block; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-knopf); background: var(--flaeche); width: 10rem; height: 10rem; }
.team-karte .team-bild, .foto-reihe .team-bild.rund { width: 4rem; height: 4rem; }
.foto-reihe .team-bild.rund { width: 3.5rem; height: 3.5rem; }
.team-bild.rund { border-radius: 50%; }
.team-bild.leer { display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; font-weight: 600; color: var(--gold-text); background: var(--gold-sanft); }
.foto-reihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.leistung-gruppen { display: grid; gap: .5rem; margin-top: .4rem; }
.leistung-gruppe { border: 1px solid var(--rand); border-radius: var(--r-knopf); background: var(--karte); }
.leistung-gruppe > summary { display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .45rem .9rem; list-style: none; cursor: pointer; font-weight: 600; }
.leistung-gruppe > summary::-webkit-details-marker { display: none; }
.leistung-gruppe > summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-left: .15rem; border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise); transform: rotate(45deg) translateY(-2px); }
.leistung-gruppe[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.leistung-gruppe > summary:hover { background: var(--flaeche); }
.lg-name { flex: 1; min-width: 0; }
.lg-zahl { color: var(--leise); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.lg-innen { display: grid; gap: .35rem; margin: 0; padding: .2rem .9rem .8rem; border: 0; border-top: 1px solid var(--rand); }
.leistung-gruppe .haken { min-height: 2rem; align-items: center; font-size: .875rem; }
.leistung-gruppe .haken input { margin-top: 0; }
.zeile-mit-knopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.zeile-mit-knopf form { margin: 0; }

/* Kalender-Abos */
.abo-liste { margin: 1rem 0; gap: 1rem; }
.abo { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.abo:first-child { padding-top: 0; border-top: 0; }
input[readonly] { background: var(--grund); font-size: .8125rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

/* Tippziele mindestens 44 px (26.10.2026) */
.termine .oeffnen { min-height: 2.75rem; }
.haken { min-height: 2.75rem; align-items: center; }
.haken input { margin: 0; }
.leistung-gruppe .haken { min-height: 2.75rem; }
.wahl { min-height: 2.75rem; }
.leistung-gruppen { align-items: start; }

/* Begruessung nach dem Login (26.10.2026): einmal je Anmeldung, etwa 1,6 s, nur CSS (keine Skripte, strenge CSP).
   Schwarze Flaeche mit dem Zeichen, "Hallo, <Name>" in Cormorant Garamond und einem schmalen goldenen Ladebalken.
   Bewegt werden nur opacity und transform; die Flaeche blockiert nie Klicks (pointer-events: none) und ist fuer
   Screenreader ausgeblendet (aria-hidden im HTML). Danach unsichtbar (opacity 0, visibility hidden). */
.gruss { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem; background: var(--schwarz); color: #fff; pointer-events: none; animation: gruss-weg 1.6s ease-in forwards; }
.gruss-inhalt { display: grid; justify-items: center; gap: 1.1rem; max-width: 100%; text-align: center; animation: gruss-rein .3s ease-out both; }
.gruss-zeichen { display: block; width: 4.5rem; height: 4.5rem; border-radius: 16px; box-shadow: 0 0 0 1px var(--gold-linie); }
.gruss-text { margin: 0; max-width: 100%; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(2.5rem, 10vw, 4rem); letter-spacing: .01em; line-height: 1.1; overflow-wrap: anywhere; }
.gruss-balken { display: block; width: 9rem; height: 2px; border-radius: 2px; background: rgba(212, 178, 90, .25); overflow: hidden; }
.gruss-balken span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; animation: gruss-laden 1.1s .15s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes gruss-rein { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes gruss-laden { to { transform: scaleX(1); } }
@keyframes gruss-weg { 0%, 80% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes gruss-aus { to { opacity: 0; visibility: hidden; } }
/* Weniger Bewegung: nichts laeuft, 0,8 s stehen, dann ohne Uebergang weg */
@media (prefers-reduced-motion: reduce) {
  .gruss { animation: gruss-aus 0s .8s forwards; }
  .gruss-inhalt { animation: none; }
  .gruss-balken span { animation: none; transform: none; }
}
@media print { .gruss { display: none; } }

/* ---- seit 31.10.2026: Preise und Bilder der Webseite ---- */
textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--aus); box-shadow: inset 0 0 0 1px var(--aus); }
input[type="file"] { padding: .45rem .5rem; font-size: .9rem; }
.unsichtbar { display: none; }
.h3 { font-size: .9375rem; font-weight: 600; margin: 0; }
.feld-fehler { margin: 0; color: var(--aus); font-size: .8125rem; font-weight: 500; }

/* Sprungmarken zu den Kategorien (umbrechend, auch bei 320 px ohne waagerechtes Scrollen) */
.sprung-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sprung-liste a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .85rem; border: 1px solid var(--rand-knopf); border-radius: 999px; background: var(--karte); color: var(--text); font-weight: 500; font-size: .875rem; text-decoration: none; }
.sprung-liste a:hover { background: var(--flaeche); border-color: var(--rand-feld); }
/* Seit 01.11.2026 (Ansage): am Rechner stehen die Kategorien als Spalte links und bleiben beim Scrollen stehen;
   am Handy bleiben sie als Knoepfe oben. */
@media (min-width: 64rem) {
  .leistungen-spalten { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .kat-spalte { position: sticky; top: 1rem; }
  .kat-spalte .sprung-liste { flex-direction: column; flex-wrap: nowrap; gap: .25rem; margin: 0; padding: .6rem; background: var(--karte); border: 1px solid var(--rand-knopf); border-radius: 14px; }
  .kat-spalte .sprung-liste a { display: flex; min-height: 2.75rem; padding: .5rem .8rem; border: 0; border-radius: 8px; background: transparent; line-height: 1.3; }
  .kat-spalte .sprung-liste a:hover { background: var(--flaeche); }
}

/* Preise: je Leistung eine Zeile, Felder nebeneinander (am Handy untereinander) */
.preis-raster { display: grid; gap: 1rem; }
.preis-karte { scroll-margin-top: 1rem; }
.preis-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.preis-zeile { display: grid; gap: .5rem; padding: .9rem 0; border-top: 1px solid var(--rand); scroll-margin-top: 1rem; }
.preis-zeile:first-child { border-top: 0; padding-top: 0; }
.preis-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0; }
.preis-name { font-weight: 600; overflow-wrap: anywhere; }
.preis-felder { display: grid; gap: .6rem .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); align-items: end; }
.preis-feld label { font-weight: 500; font-size: .8125rem; }
.preis-feld input { max-width: 12rem; }
.preis-standard { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 0; }

/* Bilder der Webseite */
.bild-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.bild-karte { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--rand); scroll-margin-top: 1rem; }
.bild-karte:first-child { padding-top: 0; border-top: 0; }
@media (max-width: 34rem) { .bild-karte { grid-template-columns: minmax(0, 1fr); } }
.bild-vorschau { display: block; width: 100%; max-width: 20rem; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-knopf); background: var(--flaeche); }
.bild-vorschau.hoch { aspect-ratio: 3 / 4; max-width: 9rem; }
.bild-vorschau.leer { display: flex; align-items: center; justify-content: center; color: var(--leise); font-size: .875rem; }
.bild-text { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.bild-text > form, .bild-text > details { margin: 0; }
.bild-titel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: 1rem; font-weight: 600; }
.bild-reihe { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 26rem) { .bild-reihe { grid-template-columns: minmax(0, 1fr); } }
#buehne, #bild-neu, #galerie, #buehne-hoch, .sonder-innen { scroll-margin-top: 1rem; }
/* Preise: "bis" und "statt" aufklappbar (am Handy sonst drei Felder je Leistung) */
details.preis-mehr { grid-column: 1 / -1; }
details.preis-mehr > summary { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; cursor: pointer; font-weight: 500; font-size: .875rem; color: var(--gold-text); }
details.preis-mehr > summary::before { content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .35rem 0 .1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
details.preis-mehr[open] > summary::before { transform: rotate(45deg); }
details.preis-mehr > .preis-felder { margin-top: .2rem; }
details.preis-mehr > p { margin: .5rem 0 0; }

/* Navigation mit acht Bereichen (31.10.2026): am Handy "Urlaub" statt "Urlaub & Abwesenheit", bei 320 px etwas enger */
/* Leistungen & Preise (seit 01.11.2026): Bearbeiten/Loeschen je Leistung, Leistung hinzufuegen, Formular einer Leistung */
.leistung-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; margin: 0; }
/* Schlichte Schaltflaechen mit Symbol (01.11.2026): Bearbeiten, Loeschen (rot), Zurueck auf Standard */
.aktion-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .7rem; border: 0; border-radius: var(--r-knopf); background: none; color: var(--text); font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.aktion-link .ico { width: 1.15rem; height: 1.15rem; }
.aktion-link:hover { background: var(--flaeche); }
.aktion-link.gefahr { color: var(--aus); }
.aktion-link.gefahr:hover { background: var(--aus-sanft); }
/* Leiste unten in jeder Kategorie: links hinzufuegen, rechts speichern samt Hinweis auf ungespeicherte Aenderungen */
.preis-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.preis-speichern { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .9rem; margin-left: auto; }
.ungespeichert { color: var(--gold-text); font-size: .875rem; font-weight: 600; }
@media (max-width: 40rem) {
  .preis-fuss { flex-direction: column-reverse; align-items: stretch; }
  .preis-speichern { margin-left: 0; justify-content: stretch; }
  .preis-speichern .knopf, .preis-fuss > .knopf { width: 100%; justify-content: center; }
  .ungespeichert { width: 100%; text-align: center; }
}
.geloescht-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 0; border-top: 1px solid var(--rand); }
.geloescht-liste li:first-child { border-top: 0; }
.geloescht-liste form { margin: 0; }
:where(select, textarea)[aria-invalid="true"] { border-color: var(--aus); box-shadow: inset 0 0 0 1px var(--aus); }
.leistung-formular .karte h2 { margin-top: 0; }
.wer-liste { display: grid; gap: .1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.hl-liste { display: grid; gap: .75rem; margin-top: .6rem; }
.hl-zeile { display: grid; gap: .5rem .75rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; padding: .75rem .9rem; border: 1px solid var(--rand); border-radius: var(--r-knopf); }
.hl-zeile legend { padding: 0 .3rem; margin-bottom: 0; }
.hl-zeile .hl-weg { grid-column: 1 / -1; min-height: 2.75rem; }
@media (max-width: 34rem) { .hl-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hl-zeile .feld:first-of-type { grid-column: 1 / -1; } }
.formular-fuss { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
/* Schalter "Anbieten / Nicht anbieten" je Leistung und Kategorie: zwei Knoepfe, der gedrueckte ist gefuellt.
   Mindesthoehe 2.75rem wie alle Bedienelemente; am Handy reicht die Breite auch bei 320 px fuer beide. */
.angebot-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.angebot-schalter { display: inline-flex; flex: none; max-width: 100%; border: 1px solid var(--rand-feld); border-radius: var(--r-knopf); background: var(--karte); overflow: hidden; }
.angebot-knopf { min-height: 2.75rem; padding: 0 .8rem; border: 0; background: none; color: var(--text); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; }
.angebot-knopf + .angebot-knopf { border-left: 1px solid var(--rand-feld); }
.angebot-knopf:hover:not(:disabled) { background: var(--flaeche); }
.angebot-knopf:focus-visible { outline-offset: -3px; }
.angebot-knopf[value="an"][aria-pressed="true"] { background: var(--ok); color: #fff; }
.angebot-knopf[value="aus"][aria-pressed="true"] { background: var(--aus); color: #fff; }
.angebot-knopf:disabled { cursor: not-allowed; }
.angebot-schalter:has(:disabled) { opacity: .75; }
.nicht-angeboten .preis-name { color: var(--leise); }
.kat-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.kat-kopf h2 { margin: 0; }
.kat-schalter { margin: 0; }
/* Am Rechner stehen Bearbeiten/Loeschen rechts neben dem Namen (die Karte wird so nicht doppelt so lang) */
@media (min-width: 40rem) {
  .preis-zeile { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .preis-zeile > * { grid-column: 1 / -1; }
  .preis-zeile > .preis-kopf { grid-column: 1; grid-row: 1; align-self: center; }
  .preis-zeile > .leistung-aktionen { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
}

/* Kalender der Abwesenheiten (seit 01.11.2026): Monat im Raster Mo bis So, am Handy als Liste */
.ak-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.ak-kopf h2 { margin: 0; }
.ak-blaettern { display: flex; flex-wrap: wrap; gap: .5rem; }
.ak-blaettern .knopf { display: inline-flex; align-items: center; gap: .35rem; }
.ak-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ak-wt { padding: .25rem .4rem; color: var(--leise); font-size: .8125rem; font-weight: 600; }
.ak-tag { min-height: 6.5rem; padding: .35rem .4rem .45rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--karte); }
.ak-leer { border: 0; background: transparent; }
.ak-zu { background: var(--flaeche); }
.ak-heute { border-color: var(--gold-linie); box-shadow: inset 0 0 0 1px var(--gold-linie); }
.ak-nr { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 600; }
.ak-zu .ak-nr { color: var(--leise); font-weight: 500; }
.ak-e { margin-top: 3px; padding: .15rem .35rem; border-left: 3px solid var(--rand-knopf); border-radius: 4px; background: var(--flaeche); font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; }
.ak-e b { font-weight: 600; }
.ak-urlaub, .ak-legende.ak-urlaub { border-left-color: var(--gold-linie); background: var(--gold-sanft); }
.ak-krank, .ak-legende.ak-krank { border-left-color: var(--aus); background: var(--aus-sanft); }
.ak-feiertag, .ak-sonst, .ak-legende.ak-sonst { border-left-color: var(--warn-linie); background: var(--warn-sanft); }
.ak-frei { border-left-color: var(--rand-knopf); background: transparent; color: var(--leise); }
.ak-salon { font-weight: 600; }
.ak-legende { display: inline-block; width: .9rem; height: .9rem; margin: 0 .25rem -.1rem .6rem; border: 1px solid var(--rand-knopf); border-left-width: 3px; border-radius: 3px; vertical-align: baseline; }
.ak-legende:first-child { margin-left: 0; }
.ak-legende.ak-zu { background: var(--flaeche); }
.ak-handy { display: none; }
.ak-liste > li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--rand); }
.ak-liste > li:first-child { border-top: 0; }
.ak-liste-tag { font-weight: 600; padding-top: .2rem; }
.ak-liste-tag.ak-heute { box-shadow: none; color: var(--gold-text); }
.ak-liste .ak-e { font-size: .875rem; }
@media (max-width: 48rem) {
  .ak-raster { display: none; }
  .ak-handy { display: block; }
}

/* "Business Day" mit dem heutigen Datum rechts unter dem Kopf, nur Schrift ohne Rahmen und Hintergrund (01.11.2026, Ansage) */
.tages-leiste { display: flex; justify-content: flex-end; padding-top: .75rem; padding-bottom: 0; }
.tages-leiste + main { padding-top: .6rem; }
.tages-schild { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin: 0; color: var(--gold-text); font-size: .875rem; font-weight: 600; }
.tages-schild time { color: var(--text); font-weight: 500; }

/* Einstellungen (seit 01.11.2026, Ansage): alle Bereiche untereinander, Unterpunkte am Rechner als Spalte links
   (gleiche Spalte wie bei Leistungen & Preise), am Handy als Knoepfe oben */
.einst-liste { display: grid; gap: 1rem; min-width: 0; }
.einst-liste > .karte h2 { scroll-margin-top: 1rem; }
.einst-liste > .karte { scroll-margin-top: 1rem; }

/* Neuer Termin (seit 01.11.2026, Ansage): ein Formular in vier Abschnitten, Unterpunkte links wie bei Einstellungen */
.neu-abschnitte { display: grid; gap: 1rem; min-width: 0; }
.neu-abschnitte > .karte { margin: 0; scroll-margin-top: 1rem; }
.neu-abschnitte > .karte > h2 { margin: 0; }

/* Stand in den Angaben eines Termins: nur farbige Schrift, ohne Hintergrund (01.11.2026, Ansage) */
.angaben .akte-unter { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.angaben .akte-unter .pille { padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: inherit; font-weight: 600; }
.angaben .akte-unter .pille.still { color: var(--leise); }
.angaben .akte-unter .pille.tw { color: var(--tw); }

/* Unterpunkt des Abschnitts, der gerade zu sehen ist (dateien/panel.js, seit 01.11.2026) */
.sprung-liste a.aktuell { border-color: var(--schwarz); background: var(--schwarz); color: #fff; }
@media (min-width: 64rem) {
  .kat-spalte .sprung-liste a.aktuell { background: var(--flaeche); color: var(--text); font-weight: 700; }
}

/* Termine (seit 01.11.2026, Ansage): Filter und eine kleinere Suche in einer Zeile, zusammen mittig;
   am Handy rutscht die Suche unter die Filter */
.liste-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rand); }
.liste-leiste .reiter-leiste { margin-bottom: 0; border-bottom: 0; }
.liste-leiste .suche { margin: 0 0 .4rem; max-width: none; }
.liste-leiste .suche-reihe { flex-wrap: nowrap; gap: .4rem; }
.liste-leiste .suche-reihe input { flex: 0 1 17.5rem; width: 17.5rem; min-width: 0; font-size: .875rem; }
.liste-leiste .suche-reihe .knopf { font-size: .875rem; }
@media (max-width: 40rem) {
  .liste-leiste .suche { width: 100%; }
  .liste-leiste .suche-reihe input { flex: 1 1 auto; }
}

/* FAQ (seit 01.11.2026): Fragen zum Aufklappen */
.faq-liste { display: grid; gap: .5rem; }
.faq { border: 1px solid var(--rand); border-radius: var(--r-knopf); background: var(--karte); }
.faq > summary { display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .5rem .9rem; list-style: none; cursor: pointer; font-weight: 600; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-left: auto; border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise); transform: rotate(45deg) translateY(-2px); }
.faq[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq > summary:hover { background: var(--flaeche); }
.faq > p { margin: 0; padding: .1rem .9rem .9rem; color: var(--text); }

/* Hilfe: Suche rechts neben der Ueberschrift, am Handy darunter */
.hilfe-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1.5rem; }
.hilfe-suche { margin: 0; max-width: none; }
.hilfe-suche .suche-reihe { flex-wrap: nowrap; gap: .4rem; }
.hilfe-suche .suche-reihe input { flex: 0 1 19rem; width: 19rem; min-width: 0; font-size: .875rem; }
@media (max-width: 40rem) { .hilfe-suche { width: 100%; } .hilfe-suche .suche-reihe input { flex: 1 1 auto; width: auto; } }

/* Seitenueberschrift steht immer ueber der Unterpunkt-Spalte und klebt mit ihr (01.11.2026, Ansage) */
.kat-titel { margin-bottom: .9rem; }
.kat-titel h1 { margin: 0; overflow-wrap: anywhere; }
.kat-titel .akte-aktionen { margin-top: .75rem; }
/* Spalte am Rechner, "Titel im Kasten" (01.11.2026 aus drei Designs gewaehlt): Ueberschrift ist der Kopf des
   Kastens, der Kasten beginnt buendig mit der ersten Karte und klebt beim Scrollen oben. */
@media (min-width: 64rem) {
  .kat-spalte { padding: 1.15rem .6rem .6rem; background: var(--karte); border: 1px solid var(--rand-knopf); border-radius: 14px; }
  .kat-spalte .sprung-liste { padding: 0; background: none; border: 0; border-radius: 0; }
  .kat-titel { margin: 0 0 .55rem; padding: 0 .8rem; }
  .kat-titel h1 { font-size: 1.25rem; line-height: 1.3; }
  .kat-titel .akte-aktionen { display: flex; margin-top: .6rem; }

}


/* Nur mit bzw. ohne JavaScript (panel.js setzt html.js) */
.nur-mit-js { display: none !important; }
.js .nur-mit-js { display: inline-flex !important; }
.js .nur-ohne-js { display: none !important; }
/* Stand beim Speichern der Beschreibung waehrend des Tippens */
.alt-stand { min-height: 1.3em; margin: .4rem 0 0; color: var(--leise); }
.alt-stand.ok { color: var(--ok); }
.alt-stand.warn { color: var(--gold-text); }
.alt-stand.fehler { color: var(--aus); }

/* Leistungen: Kategorie waehlen statt scrollen, Zahl der Leistungen je Kategorie rechts (01.11.2026) */
.kat-spalte .sprung-liste a, .sprung-liste a { gap: .5rem; }
.kat-punkt-name { flex: 1; min-width: 0; }
.kat-punkt-zahl { flex: none; color: var(--leise); font-size: .8125rem; font-weight: 500; }
.sprung-liste a.aktuell .kat-punkt-zahl { color: inherit; }

/* Termine am Handy (01.11.2026, Ansage): Filter auf EINER Zeile, seitlich wischbar, etwas kompakter */
@media (max-width: 40rem) {
  .liste-leiste { display: block; }
  .liste-leiste .reiter-leiste { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
  .liste-leiste .reiter-leiste::-webkit-scrollbar { display: none; }
  /* Rechts weich ausgeblendet: zeigt, dass man weiter wischen kann */
  .liste-leiste .reiter-leiste { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .liste-leiste .reiter-leiste { padding-right: 2.5rem; }
  .liste-leiste .reiter { flex: none; padding: 0 .6rem; font-size: .9375rem; white-space: nowrap; }
  .liste-leiste .suche { margin-top: .75rem; }
}

/* Unterpunkte am Handy und Tablet (bis 64rem) wie die Filter bei Termine: Reiter mit Unterstrich auf einer
   wischbaren Zeile statt Knoepfen (01.11.2026, Ansage "als Kategorie") */
@media (max-width: 63.99rem) {
  .kat-spalte .sprung-liste { flex-wrap: nowrap; gap: 0 .25rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -1rem 1rem; padding: 0 2.5rem 0 1rem; border-bottom: 1px solid var(--rand); -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .kat-spalte .sprung-liste::-webkit-scrollbar { display: none; }
  .kat-spalte .sprung-liste li { flex: none; }
  .kat-spalte .sprung-liste a { min-height: 2.75rem; padding: 0 .6rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--leise); font-weight: 600; font-size: .9375rem; white-space: nowrap; margin-bottom: -1px; }
  .kat-spalte .sprung-liste a:hover { background: none; color: var(--text); }
  .kat-spalte .sprung-liste a.aktuell { border-color: transparent; border-bottom-color: var(--gold-linie); background: none; color: var(--text); }
}
@media (min-width: 40.01rem) and (max-width: 63.99rem) { .kat-spalte .sprung-liste { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; } }

/* Termin: Anrufen und E-Mail in derselben Zeile wie der Name (01.11.2026) */
.kat-titel.mit-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.kat-titel.mit-aktionen h1 { flex: 1 1 0; min-width: 4.5rem; }
.kat-titel.mit-aktionen .akte-aktionen { margin-top: 0; flex: none; gap: .4rem; max-width: 100%; }
/* Anrufen und E-Mail als runde Symbol-Knoepfe (Name im aria-label), damit der Name Platz hat */
.kat-titel.mit-aktionen .kopf-knopf { width: 2.75rem; min-width: 2.75rem; padding: 0; justify-content: center; border-radius: 50%; }
.kat-titel.mit-aktionen .kopf-knopf .knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Langer Knopf ("Ganze Serie bestaetigen ..."): bleibt in der Breite und bricht um, sonst laeuft die Akte auf schmalen Handys seitlich ueber */
.kat-titel.mit-aktionen .akte-aktionen form { flex-basis: 100%; max-width: 100%; min-width: 0; }
.kat-titel.mit-aktionen .akte-aktionen form .knopf { max-width: 100%; white-space: normal; }
/* Am Rechner (Maus) im schmalen Kasten etwas kleinere Symbol-Knoepfe, damit der Name mehr Platz hat */
@media (min-width: 64rem) {
  .kat-titel.mit-aktionen .kopf-knopf { width: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; height: 2.25rem; }
  .kat-titel.mit-aktionen .akte-aktionen { gap: .3rem; }
  .kat-titel.mit-aktionen { gap: .4rem .5rem; }
}

/* Termin anlegen am Handy (01.11.2026, Ansage): die vier Herkunfts-Knoepfe in EINER Zeile, gleich breit;
   "Laufkundschaft" bricht dabei sauber getrennt in zwei Zeilen (hyphens, lang="de") */
@media (max-width: 40rem) {
  .herkunft-wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .herkunft-wahl .pillen-wahl { display: flex; }
  .herkunft-wahl .pillen-wahl span { width: 100%; justify-content: center; padding: .3rem .35rem; border-radius: 12px; font-size: .8125rem; line-height: 1.15; text-align: center; hyphens: manual; -webkit-hyphens: manual; }
}
/* Sehr kleine Handys: zwei mal zwei statt vier in einer Zeile (sonst werden Woerter zerteilt) */
@media (max-width: 24rem) { .herkunft-wahl .pillen-wahl span { font-size: .75rem; padding: .3rem .25rem; } }
@media (max-width: 21rem) { .herkunft-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .herkunft-wahl .pillen-wahl span { font-size: .8125rem; } }

/* Termin anlegen: "Termin speichern" unter der letzten Karte, fuer das ganze Formular (01.11.2026) */
.neu-speichern { display: flex; justify-content: flex-end; }
@media (max-width: 40rem) { .neu-speichern .knopf { width: 100%; justify-content: center; } }

/* Seitenueberschriften immer mittig (01.11.2026, Ansage): freie Seitenkoepfe, Titel im Kasten links, Person und
   Leistung bearbeiten; beim Termin stehen Name und Symbol-Knoepfe als Gruppe in der Mitte */
.seiten-kopf { text-align: center; }
.seiten-kopf h1 { justify-content: center; }
.akte-kopf { justify-content: center; text-align: center; }
.akte-kopf .akte-unter { justify-content: center; }
.kat-titel { text-align: center; }
.kat-titel .akte-aktionen { justify-content: center; }
.kat-titel.mit-aktionen { justify-content: center; }
.kat-titel.mit-aktionen h1 { flex: 0 1 auto; min-width: 0; }
.hilfe-kopf { justify-content: center; }

/* "Business Day" am Handy ganz unten auf der Seite, am Rechner oben rechts (01.11.2026, Ansage); immer nur eine
   Fassung sichtbar (display: none, also auch nur eine vorgelesen) */
.tages-unten { display: none; }
@media (max-width: 40rem) {
  .tages-oben { display: none; }
  .tages-unten { display: flex; justify-content: center; padding-top: .5rem; padding-bottom: 1.5rem; }
}

/* Fuss des Panels mit dem Zeichen von infinitecodes (01.11.2026, Ansage), dunkel wie der Kopf */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; width: 100%; }
body > .huelle { width: 100%; }   /* sonst schrumpft die Leiste im Spaltenlayout und Business Day rutscht in die Mitte */
.panel-fuss { margin-top: 2rem; background: var(--schwarz); border-top: 2px solid var(--gold-linie); color: #cfcac0; }
.panel-fuss-reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem; font-size: .875rem; }
.panel-fuss p { margin: 0; }
.ic-marke { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: #fff; text-decoration: none; }
.ic-marke:hover .ic-wort { text-decoration: underline; text-underline-offset: .15em; }
.ic-marke:focus-visible { outline-color: var(--gold); }
.ic-von { color: #cfcac0; }
.ic-wort { font-weight: 700; letter-spacing: -.02em; font-size: 1rem; }
@media (max-width: 40rem) { .panel-fuss-reihe { flex-direction: column; text-align: center; } .tages-unten { padding-bottom: .5rem; } }

/* Team: "Person anlegen" mittig in der Karte (01.11.2026) */
.knopf-mitte { display: flex; justify-content: center; }

/* Hilfe (01.11.2026, Ansage): am Handy steht "Hilfe" UEBER der Suche; dafuer zwei Ueberschriften, von denen immer
   nur eine sichtbar ist (display: none, also auch nur eine vorgelesen): am Rechner die im Kasten links */
.hilfe-kopf .hilfe-h1 { flex-basis: 100%; margin: 0; }
@media (min-width: 64rem) { .hilfe-kopf.mit-spalte .hilfe-h1 { display: none; } }
@media (max-width: 63.99rem) { .hilfe-titel { display: none; } .hilfe-kopf { gap: .75rem; } }

/* Oeffnungszeiten (Einstellungen, 01.11.2026, Ansage): eine Zeile je Tag, Haken links, "von bis" rechts. Ohne
   Haken ist der Tag zu: die Auswahl wird ausgeblendet und "geschlossen" steht da (nur mit :has, sonst bleibt die
   Auswahl sichtbar und wird beim Speichern ignoriert) */
.oe-woche legend { margin-bottom: .6rem; }
.oe-tage { display: grid; gap: .4rem; }
.oe-tag { display: grid; grid-template-columns: minmax(8.5rem, 1fr) minmax(0, 2fr); align-items: center; gap: .4rem 1rem; padding: .35rem .6rem; border: 1px solid var(--rand); border-radius: var(--r-knopf); background: var(--karte); }
.oe-tag.falsch { border-color: var(--aus); box-shadow: inset 0 0 0 1px var(--aus); }
.oe-offen span { font-weight: 600; }
.oe-zeit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.oe-bis { color: var(--leise); font-size: .9375rem; }
.oe-zu { display: none; color: var(--leise); font-size: .9375rem; }
.oe-tag:has(.oe-offen input:not(:checked)) { background: var(--flaeche); }
.oe-tag:has(.oe-offen input:not(:checked)) .oe-zeit { display: none; }
.oe-tag:has(.oe-offen input:not(:checked)) .oe-zu { display: block; }
.oe-ausserhalb p { margin: 0 0 .35rem; }
.oe-ausserhalb ul { display: grid; gap: .2rem; }
@media (max-width: 30rem) {
  .oe-tag { grid-template-columns: 1fr; }
  .oe-zeit { padding-left: 1.85rem; }
  .oe-tag:has(.oe-offen input:not(:checked)) .oe-zu { display: none; }
}

/* Konto und Zwei-Faktor-Anmeldung (05.11.2026). Groesse des QR-Codes hier und ueber width/height am img: die CSP
   verbietet style-Attribute. Weisser Grund, damit die App ihn auch bei Spiegelungen liest. */
.konto-spalte { max-width: 40rem; margin: 0 auto; }
.konto-spalte .karte h2 { margin-top: 0; }
.konto-abbruch { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.qr-bild { display: block; width: 15rem; max-width: 100%; height: auto; margin: 1rem auto; background: #fff; border: 1px solid var(--rand); border-radius: var(--r-knopf); }
.schluessel { margin: .5rem 0 1rem; padding: .6rem .75rem; background: var(--flaeche); border-radius: var(--r-knopf); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; word-spacing: .15em; overflow-wrap: anywhere; user-select: all; }

/* Schnitte: Vorschaubild eines fertigen Videos ist ein Link */
.schnitt-vorschau { display: block; }
.schnitt-grund { margin: 0; color: var(--aus); }

/* Panel > Webseite (seit 10.11.2026): rundes Foto unter "Über mich" wie auf der Seite, Platzhalter als Kreis */
.bild-vorschau.rund { aspect-ratio: 1; max-width: 9rem; border-radius: 50%; object-position: 50% 40%; }
.bild-vorschau.rund.leer { border: 2px dashed var(--rand); }

/* =====================================================================================================================
   Seit 10.11.2026 (Ansage "uebernimm im panel die farben, design etc. von der hauptseite"): Farben, Schriften und Formen der
   Webseite (seite/stil.css): warmes Weiss und Puder (--fliese #f7f1ed), Espresso statt Schwarz (--lack #2e2522), Braun als
   Akzent (#8b5a47, 5,8:1 auf Weiss), Rose-Champagner als Linie (#dcbba6), weisser Kopf mit Wortmarke in Cormorant und
   braunem "&", Pillen-Knoepfe, Karten mit 18 px Ecken, Ueberschriften in Cormorant. Der Kalender behaelt seine Farben.
   ===================================================================================================================== */
:root {
  --grund: #f7f1ed; --karte: #ffffff; --flaeche: #f2e8e1; --rand: #eadfd7; --rand-feld: #8a7a71; --rand-knopf: #d8c6bb;
  --text: #2e2522; --leise: #63574f;
  --schwarz: #2e2522; --schwarz-hover: #4a3b36;
  --gold: #dcbba6; --gold-linie: #c9a493; --gold-text: #8b5a47; --gold-sanft: #f6ebe4;
  --r-karte: 18px;
}
body { color: var(--text); }
h1, h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: .005em; color: var(--text); }
h1 { font-size: 2rem; line-height: 1.1; }
h2 { font-size: 1.4rem; line-height: 1.2; }
:focus-visible { outline-color: var(--gold-text); }
.knopf { border-radius: 999px; padding-inline: 1.2rem; font-weight: 500; }
.knopf.voll:hover { background: var(--schwarz-hover); }

/* Kopf weiss wie auf der Webseite */
.kopf { background: #fff; color: var(--text); border-bottom: 1px solid var(--rand); }
.kopf :focus-visible { outline-color: var(--gold-text); }
.marke { color: var(--text); }
.marke-wort { color: var(--text); letter-spacing: .02em; font-size: 1.45rem; }
.marke-by { color: var(--text); font-size: 1.45rem; }
.marke-zusatz { color: var(--leise); font-size: 1.15rem; }
.marke-strich { color: var(--rand-knopf); }
.kopf-wer { color: var(--leise); }
.menue > summary { border-color: var(--rand); color: var(--text); background: #fff; }
.menue > summary:hover, .menue[open] > summary { border-color: var(--gold); }
.menue .zahl { background: var(--gold-text); color: #fff; }
.menue-feld { background: #fff; border: 1px solid var(--rand); border-top: 1px solid var(--rand); border-radius: 18px; box-shadow: 0 24px 48px -24px rgba(46, 37, 34, .35); }
.menue-feld li a { color: var(--text); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-weight: 600; }
.menue-pfeil { color: var(--gold-text); }
.menue-feld li a:hover { background: var(--grund); color: var(--gold-text); }
.menue-feld li a.aktiv { background: var(--gold-sanft); color: var(--gold-text); }
.menue-unten { border-top: 1px solid var(--rand); }
.knopf.dunkel { background: transparent; color: var(--text); border-color: var(--rand-knopf); }
.knopf.dunkel:hover { border-color: var(--gold-text); color: var(--gold-text); }

/* Fuss hell wie die Seite, Begruessung in Espresso */
.panel-fuss { background: #fff; border-top: 1px solid var(--rand); color: var(--leise); }
.ic-marke { color: var(--text); }
.ic-von { color: var(--leise); }
.ic-marke:focus-visible { outline-color: var(--gold-text); }
.gruss { background: var(--schwarz); }
.wahl:has(input:checked) { background: var(--gold-sanft); }
/* Wortmarke wie auf der Webseite: "&" kursiv in Braun; am Handy kleiner und in einer Zeile */
.marke-und { font-style: italic; font-weight: 500; color: var(--gold-text); }
.marke-wort, .marke-by { white-space: nowrap; }
@media (max-width: 40rem) {
  .marke-wort, .marke-by { font-size: clamp(1rem, 4.6vw, 1.2rem); letter-spacing: .01em; }
  .marke { gap: 0 .3rem; }
  .marke-zusatz { font-size: clamp(.75rem, 3.4vw, .95rem); gap: .35rem; }
  .marke-strich { font-size: 1.25rem; }
}
@media (max-width: 22rem) { .marke-zusatz { display: none; } }

/* =====================================================================================================================
   Seit 10.11.2026, zweite Fassung (Ansage "kontrast ist aber schrecklich zu viel weiss, farben ueberarbeiten"): mehr Tiefe wie
   die dunklen Teile der Webseite. Kopf, Menue und Fuss in Espresso mit hellem Text, kraeftiger Puder-Grund, Karten mit klarem
   Rand und Schatten, Aktives in Braun (#6f4536 wie der Bewertungsabschnitt). Alle Textfarben mit mindestens 4,5:1.
   ===================================================================================================================== */
:root {
  --grund: #ecdfd6; --flaeche: #f4ebe5; --rand: #d9c5b8; --rand-knopf: #c4ab9c; --rand-feld: #7d6a60;
  --leise: #5a4c45; --gold-sanft: #f3e4da; --gold-text: #7f4f3d;
  --espresso: #2e2522; --espresso-hell: #3d312d; --braun: #6f4536; --puder-text: #f3e9e3; --rose: #dcbba6;
}
/* Kopf dunkel */
.kopf { background: var(--espresso); color: var(--puder-text); border-bottom: 3px solid var(--braun); }
.kopf :focus-visible { outline-color: var(--rose); }
.marke, .marke-wort, .marke-by { color: var(--puder-text); }
.marke-und { color: var(--rose); }
.marke-zusatz { color: var(--rose); }
.marke-strich { color: #6b5650; }
.kopf-wer { color: #d8c8bf; }
.menue > summary { background: transparent; border-color: #6b5650; color: var(--puder-text); }
.menue > summary:hover, .menue[open] > summary { border-color: var(--rose); }
.menue .zahl { background: var(--rose); color: var(--espresso); }
.menue-feld { background: var(--espresso); border: 1px solid #4a3b36; border-top: 3px solid var(--braun); box-shadow: 0 24px 48px -20px rgba(20, 14, 12, .6); }
.menue-feld li a { color: var(--puder-text); }
.menue-pfeil { color: var(--rose); }
.menue-feld li a:hover { background: var(--espresso-hell); color: #fff; }
.menue-feld li a.aktiv { background: var(--braun); color: #fff; }
.menue-feld li a.aktiv .menue-pfeil { color: #fff; }
.menue-unten { border-top-color: #4a3b36; }
.menue-feld .knopf.dunkel { color: var(--puder-text); border-color: #6b5650; }
.menue-feld .knopf.dunkel:hover { border-color: var(--rose); color: #fff; }
.menue-feld :focus-visible { outline-color: var(--rose); }

/* Arbeitsflaeche und Karten */
body { background: var(--grund); }
.karte { border-color: var(--rand); box-shadow: 0 1px 0 rgba(46, 37, 34, .04), 0 10px 28px -18px rgba(46, 37, 34, .35); }
.kalender .kal-kopf { background: var(--gold-sanft); border-bottom-color: var(--rand); }
.kal-kopf h2 { color: var(--braun); font-weight: 600; }
.meldung.hinweis { background: #f6e9e0; border-left: 4px solid var(--braun); }
.meldung.hinweis a { color: var(--braun); }
.tages-schild { color: var(--text); }
/* Aktives in Braun: Reiter, Seitenliste, Auswahl */
.reiter.aktiv { color: var(--braun); border-bottom-color: var(--braun); }
.reiter.aktiv .zahl { background: var(--braun); color: #fff; }
.sprung-liste a.aktuell, .kat-spalte .sprung-liste a.aktuell { background: var(--braun); border-color: var(--braun); color: #fff; }
.kat-spalte .sprung-liste { background: var(--karte); border-color: var(--rand); }
.kat-spalte .sprung-liste a:hover { background: var(--gold-sanft); }
.pillen-wahl input:checked + span, .zeit-wahl input:checked + span { background: var(--braun); border-color: var(--braun); }
.wahl:has(input:checked) { border-color: var(--braun); box-shadow: inset 0 0 0 1px var(--braun); background: var(--gold-sanft); }
.wahl input { accent-color: var(--braun); }
a { color: var(--gold-text); }
.knopf.voll { background: var(--espresso); border-color: var(--espresso); }
.knopf.voll:hover { background: var(--braun); border-color: var(--braun); }

/* Fuss dunkel wie auf der Webseite */
.panel-fuss { background: var(--espresso); border-top: 3px solid var(--braun); color: #d8c8bf; }
.ic-marke, .ic-wort { color: var(--puder-text); }
.ic-von { color: #d8c8bf; }
.ic-marke:focus-visible { outline-color: var(--rose); }
/* Hinweis ohne Studio-Adresse klein im Fuss, ueber der Zeile mit dem Jahr (seit 10.11.2026) */
.panel-fuss .fuss-hinweis { flex-basis: 100%; order: -1; margin: 0 0 .25rem; padding-bottom: .75rem; border-bottom: 1px solid #4a3b36; color: #d8c8bf; font-size: .8125rem; line-height: 1.5; }
.panel-fuss .fuss-hinweis a { color: var(--rose); font-weight: 600; }
.panel-fuss .fuss-hinweis a:focus-visible { outline-color: var(--rose); }
@media (max-width: 40rem) { .panel-fuss .fuss-hinweis { text-align: left; } }
/* Begruessung (seit 10.11.2026): Hallo oben, Wortmarke unten wie auf der Webseite, Ladebalken in Rose */
.gruss { background: var(--espresso); color: var(--puder-text); }
.gruss-inhalt { gap: 1.4rem; }
.gruss-marke { display: inline-flex; align-items: baseline; gap: .32em; margin: .6rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(1.4rem, 5.5vw, 2rem); letter-spacing: .02em; color: var(--puder-text); white-space: nowrap; }
.gruss-und { font-style: italic; font-weight: 500; color: var(--rose); }
.gruss-balken { background: rgba(220, 187, 166, .25); }
.gruss-balken span { background: var(--rose); }

/* erzeugt in server.js */
.z-1 { grid-row-start: 1; } .d-1 { grid-row-end: span 1; }
.z-2 { grid-row-start: 2; } .d-2 { grid-row-end: span 2; }
.z-3 { grid-row-start: 3; } .d-3 { grid-row-end: span 3; }
.z-4 { grid-row-start: 4; } .d-4 { grid-row-end: span 4; }
.z-5 { grid-row-start: 5; } .d-5 { grid-row-end: span 5; }
.z-6 { grid-row-start: 6; } .d-6 { grid-row-end: span 6; }
.z-7 { grid-row-start: 7; } .d-7 { grid-row-end: span 7; }
.z-8 { grid-row-start: 8; } .d-8 { grid-row-end: span 8; }
.z-9 { grid-row-start: 9; } .d-9 { grid-row-end: span 9; }
.z-10 { grid-row-start: 10; } .d-10 { grid-row-end: span 10; }
.z-11 { grid-row-start: 11; } .d-11 { grid-row-end: span 11; }
.z-12 { grid-row-start: 12; } .d-12 { grid-row-end: span 12; }
.z-13 { grid-row-start: 13; } .d-13 { grid-row-end: span 13; }
.z-14 { grid-row-start: 14; } .d-14 { grid-row-end: span 14; }
.z-15 { grid-row-start: 15; } .d-15 { grid-row-end: span 15; }
.z-16 { grid-row-start: 16; } .d-16 { grid-row-end: span 16; }
.z-17 { grid-row-start: 17; } .d-17 { grid-row-end: span 17; }
.z-18 { grid-row-start: 18; } .d-18 { grid-row-end: span 18; }
.z-19 { grid-row-start: 19; } .d-19 { grid-row-end: span 19; }
.z-20 { grid-row-start: 20; } .d-20 { grid-row-end: span 20; }
.z-21 { grid-row-start: 21; } .d-21 { grid-row-end: span 21; }
.z-22 { grid-row-start: 22; } .d-22 { grid-row-end: span 22; }
.z-23 { grid-row-start: 23; } .d-23 { grid-row-end: span 23; }
.z-24 { grid-row-start: 24; } .d-24 { grid-row-end: span 24; }
.z-25 { grid-row-start: 25; } .d-25 { grid-row-end: span 25; }
.z-26 { grid-row-start: 26; } .d-26 { grid-row-end: span 26; }
.z-27 { grid-row-start: 27; } .d-27 { grid-row-end: span 27; }
.z-28 { grid-row-start: 28; } .d-28 { grid-row-end: span 28; }
.z-29 { grid-row-start: 29; } .d-29 { grid-row-end: span 29; }
.z-30 { grid-row-start: 30; } .d-30 { grid-row-end: span 30; }
.z-31 { grid-row-start: 31; } .d-31 { grid-row-end: span 31; }
.z-32 { grid-row-start: 32; } .d-32 { grid-row-end: span 32; }
.z-33 { grid-row-start: 33; } .d-33 { grid-row-end: span 33; }
.z-34 { grid-row-start: 34; } .d-34 { grid-row-end: span 34; }
.z-35 { grid-row-start: 35; } .d-35 { grid-row-end: span 35; }
.z-36 { grid-row-start: 36; } .d-36 { grid-row-end: span 36; }
.z-37 { grid-row-start: 37; } .d-37 { grid-row-end: span 37; }
.z-38 { grid-row-start: 38; } .d-38 { grid-row-end: span 38; }
.z-39 { grid-row-start: 39; } .d-39 { grid-row-end: span 39; }
.z-40 { grid-row-start: 40; } .d-40 { grid-row-end: span 40; }
.z-41 { grid-row-start: 41; } .d-41 { grid-row-end: span 41; }
.z-42 { grid-row-start: 42; } .d-42 { grid-row-end: span 42; }
.z-43 { grid-row-start: 43; } .d-43 { grid-row-end: span 43; }
.z-44 { grid-row-start: 44; } .d-44 { grid-row-end: span 44; }
.z-45 { grid-row-start: 45; } .d-45 { grid-row-end: span 45; }
.z-46 { grid-row-start: 46; } .d-46 { grid-row-end: span 46; }
.z-47 { grid-row-start: 47; } .d-47 { grid-row-end: span 47; }
.z-48 { grid-row-start: 48; } .d-48 { grid-row-end: span 48; }
.z-49 { grid-row-start: 49; } .d-49 { grid-row-end: span 49; }
.z-50 { grid-row-start: 50; } .d-50 { grid-row-end: span 50; }
.z-51 { grid-row-start: 51; } .d-51 { grid-row-end: span 51; }
.z-52 { grid-row-start: 52; } .d-52 { grid-row-end: span 52; }
.z-53 { grid-row-start: 53; } .d-53 { grid-row-end: span 53; }
.z-54 { grid-row-start: 54; } .d-54 { grid-row-end: span 54; }
.z-55 { grid-row-start: 55; } .d-55 { grid-row-end: span 55; }
.z-56 { grid-row-start: 56; } .d-56 { grid-row-end: span 56; }
.z-57 { grid-row-start: 57; } .d-57 { grid-row-end: span 57; }
.z-58 { grid-row-start: 58; } .d-58 { grid-row-end: span 58; }
.z-59 { grid-row-start: 59; } .d-59 { grid-row-end: span 59; }
.z-60 { grid-row-start: 60; } .d-60 { grid-row-end: span 60; }
.z-61 { grid-row-start: 61; } .d-61 { grid-row-end: span 61; }
.z-62 { grid-row-start: 62; } .d-62 { grid-row-end: span 62; }
.z-63 { grid-row-start: 63; } .d-63 { grid-row-end: span 63; }
.z-64 { grid-row-start: 64; } .d-64 { grid-row-end: span 64; }
.z-65 { grid-row-start: 65; } .d-65 { grid-row-end: span 65; }
.z-66 { grid-row-start: 66; } .d-66 { grid-row-end: span 66; }
.z-67 { grid-row-start: 67; } .d-67 { grid-row-end: span 67; }
.z-68 { grid-row-start: 68; } .d-68 { grid-row-end: span 68; }
.z-69 { grid-row-start: 69; } .d-69 { grid-row-end: span 69; }
.z-70 { grid-row-start: 70; } .d-70 { grid-row-end: span 70; }
.z-71 { grid-row-start: 71; } .d-71 { grid-row-end: span 71; }
.z-72 { grid-row-start: 72; } .d-72 { grid-row-end: span 72; }
.kal-raster.zr-36 { grid-template-rows: repeat(36, var(--zeile)); }
.kal-raster.zr-40 { grid-template-rows: repeat(40, var(--zeile)); }
.kal-raster.zr-44 { grid-template-rows: repeat(44, var(--zeile)); }
.kal-raster.zr-48 { grid-template-rows: repeat(48, var(--zeile)); }
.kal-raster.zr-52 { grid-template-rows: repeat(52, var(--zeile)); }
.kal-raster.zr-56 { grid-template-rows: repeat(56, var(--zeile)); }
.kal-raster.zr-60 { grid-template-rows: repeat(60, var(--zeile)); }
.kal-raster.zr-64 { grid-template-rows: repeat(64, var(--zeile)); }
.kal-raster.zr-68 { grid-template-rows: repeat(68, var(--zeile)); }
.kal-raster.zr-72 { grid-template-rows: repeat(72, var(--zeile)); }