/*
 * Oberfläche der Praxis-App – „Papier & Tinte“
 *
 * Warmes Eierschalen-Papier, schwarze Tinte, flüsterleichte Überschriften
 * (Systemschrift in 300), Pillen-Knöpfe, Haarlinien statt Schatten.
 * Farbe gibt es nur als dekorative Kugel (Violett/Orange) und – fachlich
 * nötig – ein gedämpftes Rot für Warnungen (Sicherung, überfällig).
 *
 * Keine Schriften aus dem Internet: die Systemschrift des Geräts wird
 * verwendet (iPad/iPhone: SF Pro, Windows: Segoe UI, Android: Roboto).
 *
 * Touch: alle Bedienelemente ≥ 52 px hoch. Ab 900 px zweispaltig.
 */

:root {
  /* Farben */
  --eierschale: #fdfcfc;
  --taupe: #f5f3f1;
  --stein: #ebe8e4;
  --stein-dunkel: #ddd8d2;
  --tinte: #000000;
  --graphit: #44403b;
  --rauch: #6b655d; /* Fließtext grau: Kontrast ≥ 4,5:1 auch auf Karten (WCAG AA) */
  --asche: #8a8379; /* Platzhalter, Pfeile: Kontrast ≥ 3:1 */
  --violett: #0447ff;
  --glut: #ff4704;
  --rot: #b42318;
  --rot-hell: #fbeeec;
  --ok: #1f6f43;

  /* Schrift */
  --schrift: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Formen */
  --r-karte: 20px;
  --r-gross: 24px;
  --r-eingabe: 10px;
  --r-pille: 9999px;
  --schatten-hauch: rgba(0, 0, 0, .4) 0 0 1px 0, rgba(0, 0, 0, .04) 0 1px 1px 0, rgba(0, 0, 0, .04) 0 2px 4px 0;
  --schatten-innen: rgba(0, 0, 0, .075) 0 0 0 .5px inset;
  --touch: 52px;
  --kugel: var(--marke, #000); /* runde Symbolflächen (Sperre, Schild …) in der Markenfarbe */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--tinte);
  background: var(--eierschale);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
#druckbereich { display: none; }
a { color: var(--tinte); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; }
.versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nowrap { white-space: nowrap; }
.laden { padding: 64px 16px; text-align: center; color: var(--rauch); }
[hidden] { display: none !important; }
::selection { background: var(--stein); }

.icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon.gross { width: 44px; height: 44px; }

/* ── Seitenrahmen ── */
.seite { max-width: 1280px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.kopfzeile {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(84px, 1fr) auto minmax(84px, 1fr); align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(253, 252, 252, .9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--stein);
}
.kopfzeile h1 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .01em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-zurueck {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 14px 0 8px; justify-self: start;
  color: var(--tinte); text-decoration: none; font-weight: 500; font-size: 15px;
  border: 1px solid var(--stein); border-radius: var(--r-pille); background: var(--eierschale);
}
.kopf-zurueck:active { background: var(--taupe); }
.inhalt { padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 700px) { .inhalt { padding: 28px 32px; gap: 20px; } }
.abschnitt { font-size: 13px; margin: 12px 0 0; color: var(--rauch); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* ── Start ── */
.start { position: relative; overflow: hidden; }
.start-kopf { position: relative; padding: calc(40px + env(safe-area-inset-top)) 16px 8px; }
@media (min-width: 700px) { .start-kopf { padding: calc(64px + env(safe-area-inset-top)) 32px 16px; } }
.start-kopf > * { position: relative; z-index: 1; }
.start-untertitel { font-size: 13px; color: var(--rauch); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.start-name { font-size: 48px; /* wird per Skript auf die verfügbare Breite verkleinert (einzeilig) */ font-weight: 300; letter-spacing: -.02em; line-height: 1.1; margin-top: 8px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.start-name-person { white-space: nowrap; }
.start-datum { margin-top: 10px; color: var(--rauch); }
/* Hauptaktion: großer schwarzer Pillen-Knopf unter der Überschrift */
.start-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.knopf.knopf-haupt { min-height: 64px; padding: 12px 34px 12px 28px; font-size: 19px; gap: 12px; }
.knopf-haupt .icon { width: 22px; height: 22px; }
.knopf-haupt small { font-size: 16px; font-weight: 400; color: inherit; opacity: .82; } /* Zusatz (z. B. Name) in der Schriftfarbe des Knopfs, nur etwas zurückgenommen */
.knopf.knopf-haupt-neben { min-height: 64px; padding: 12px 22px; }
@media (max-width: 599px) { .knopf.knopf-haupt { flex: 1 1 100%; } .knopf.knopf-haupt-neben { min-height: var(--touch); } }

/* Bereiche: einheitliche Kacheln (Handy: Zeilen, Tablet: 3 Spalten) */
.kacheln { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .kacheln { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.kachel {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px;
  min-height: 150px; padding: 20px; border-radius: var(--r-karte);
  background: var(--taupe); color: var(--tinte); text-decoration: none; text-align: left;
  font-size: 19px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2;
  transition: background .15s, transform .1s;
}
.kachel .icon { width: 26px; height: 26px; padding: 11px; box-sizing: content-box; border-radius: 50%; background: var(--eierschale); box-shadow: var(--schatten-innen); }
.kachel small { display: block; margin-top: 4px; font-size: 14px; color: var(--rauch); letter-spacing: .01em; }
.kachel:hover { background: var(--stein); }
.kachel:active { transform: scale(.985); }
@media (max-width: 599px) {
  .kachel { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 84px; gap: 16px; padding: 14px 18px 14px 14px; }
}
.start-fuss { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--stein); }
.version { color: var(--rauch); font: 13px/1.6 var(--schrift-mono); }

.sicherungsstatus {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: var(--r-pille);
  text-decoration: none; font-size: 15px; background: var(--taupe); color: var(--graphit); align-self: flex-start; max-width: 100%;
}
.sicherungsstatus .icon { width: 18px; height: 18px; padding: 7px; box-sizing: content-box; border-radius: 50%; background: var(--eierschale); flex: none; }
.sicherungsstatus.gruen .icon { color: var(--ok); }
.sicherungsstatus.rot { background: var(--rot-hell); color: var(--rot); }
.sicherungsstatus.rot .icon { background: var(--rot); color: #fff; }
.sicherungsstatus strong { font-weight: 500; }

/* ── Knöpfe (Pillen) ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 10px 22px; border-radius: var(--r-pille);
  border: 1px solid var(--stein); background: var(--eierschale); color: var(--tinte);
  font: 500 16px/1.2 var(--schrift); letter-spacing: .01em; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background .15s, border-color .15s, transform .1s;
}
.knopf:hover:not(:disabled) { background: var(--taupe); }
.knopf:active:not(:disabled) { transform: scale(.98); }
.knopf:disabled { opacity: .35; cursor: not-allowed; }
.knopf-primaer { background: var(--tinte); border-color: var(--tinte); color: var(--eierschale); }
.knopf-primaer:hover:not(:disabled) { background: #262422; }
.knopf-gefahr { color: var(--rot); border-color: #e9c9c5; }
.knopf-gefahr:hover:not(:disabled) { background: var(--rot-hell); }
.dlg .knopf-gefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf-leise { background: transparent; border-color: transparent; color: var(--graphit); }
.knopf-leise:hover:not(:disabled) { background: var(--taupe); }
.knopf-gross { min-height: 58px; font-size: 17px; padding: 12px 28px; }
.knopf-breit { width: 100%; }
.knopf-klein { min-height: 40px; padding: 6px 12px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.stapel { display: flex; flex-direction: column; gap: 16px; }
.stapel > .abschnitt { margin-bottom: -6px; }
.aktionen > .knopf-gross { flex: 1 1 220px; }
@media (min-width: 900px) { .aktionen > .knopf-gross { flex: 0 1 auto; } .karte .aktionen > .knopf-gross, .dlg .knopf { flex: 1 1 auto; } }
.aktionen-ende { justify-content: flex-end; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

/* ── Karten, Hinweise, Daten ── */
.karte { background: var(--taupe); border-radius: var(--r-karte); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 700px) { .karte { padding: 28px 32px; } }
.karte h2 { margin: 0; font-size: 26px; font-weight: 300; display: flex; align-items: center; gap: 10px; }
.karte h2 .icon { width: 20px; height: 20px; padding: 9px; box-sizing: content-box; border-radius: 50%; background: var(--eierschale); box-shadow: var(--schatten-innen); }
.karte p { margin: 0; color: var(--graphit); }
.karte.gewaehlt { background: var(--eierschale); box-shadow: var(--schatten-hauch); }
.karte-titel { display: flex; gap: 10px; align-items: center; font-size: 24px; font-weight: 300; letter-spacing: -.02em; }
.karte-text { color: var(--rauch); }
.hinweis { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; background: var(--taupe); color: var(--graphit); font-size: 15px; }
.hinweis > .icon { margin-top: 1px; width: 18px; height: 18px; flex: none; }
.hinweis ul { margin: 6px 0; padding-left: 20px; }
.hinweis .knopf { margin-top: 8px; }
.hinweis a { font-weight: 500; }
.hinweis-ok > .icon { color: var(--ok); }
.hinweis-warnung { background: #faf3e6; color: #6b4e16; }
.hinweis-fehler { background: var(--rot-hell); color: var(--rot); }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.daten dt { color: var(--rauch); font-size: 15px; }
.daten dd { margin: 0; }
.notiz { white-space: pre-wrap; }
.leer { color: var(--rauch); padding: 12px 0; list-style: none; }
.abzeichen { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--r-pille); background: var(--stein); color: var(--graphit); white-space: nowrap; letter-spacing: .02em; }
.abzeichen-storno, .abzeichen-storniert { background: var(--eierschale); box-shadow: inset 0 0 0 1px var(--stein-dunkel); color: var(--rauch); text-decoration: line-through; }
.abzeichen-storno { text-decoration: none; }
.abzeichen-offen, .abzeichen-teilweise { background: var(--tinte); color: var(--eierschale); }
.abzeichen-ueberfaellig { background: var(--rot); color: #fff; }
.anleitung { margin: 0; padding-left: 0; list-style: none; counter-reset: a; display: flex; flex-direction: column; gap: 10px; }
.anleitung li { counter-increment: a; display: flex; gap: 12px; align-items: baseline; color: var(--graphit); }
.anleitung li::before { content: counter(a); flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--eierschale); font: 500 13px var(--schrift-mono); box-shadow: var(--schatten-innen); }

/* ── Listen & Suche ── */
.suchzeile { display: flex; align-items: center; gap: 10px; background: var(--taupe); border-radius: var(--r-pille); padding: 0 20px; border: 1px solid transparent; }
.suchzeile:focus-within { background: var(--eierschale); border-color: var(--tinte); }
.suchzeile .icon { color: var(--rauch); }
.suchfeld { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--tinte); min-height: 56px; -webkit-appearance: none; appearance: none; }
.suchfeld::placeholder { color: var(--asche); }
.suche { display: flex; flex-direction: column; gap: 12px; }
.liste-info { color: var(--rauch); font-size: 15px; padding: 0 4px; }
.liste-info:empty { display: none; }
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stein); }
.liste li { border-bottom: 1px solid var(--stein); }
.liste-eintrag {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "haupt pfeil" "neben pfeil";
  width: 100%; min-height: 72px; padding: 14px 8px; gap: 2px 12px; align-items: center;
  background: none; border: 0; border-radius: 12px; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.liste-eintrag:hover { background: var(--taupe); }
.liste-eintrag:active { background: var(--stein); }
.liste-haupt { grid-area: haupt; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.liste-haupt strong { font-weight: 500; }
.liste-neben { grid-area: neben; color: var(--rauch); font-size: 15px; }
.liste-pfeil { grid-area: pfeil; color: var(--asche); }
.jahressumme { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 4px 0; color: var(--rauch); font-size: 15px; }
.jahressumme strong { color: var(--tinte); font-size: 32px; font-weight: 300; letter-spacing: -.02em; }

/* ── Formulare ── */
.formular { display: flex; flex-direction: column; gap: 18px; }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld label, .feld-label { font-weight: 500; font-size: 14px; color: var(--graphit); }
.pflicht { color: var(--rauch); }
.feld input, .feld textarea, .feld select {
  font: inherit; min-height: var(--touch); padding: 12px 14px; width: 100%;
  border: 1px solid var(--stein-dunkel); border-radius: var(--r-eingabe); background: var(--eierschale); color: var(--tinte);
  transition: border-color .15s, box-shadow .15s;
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--asche); }
.feld input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
.feld textarea { min-height: 88px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: 0; border-color: var(--tinte); box-shadow: 0 0 0 3px var(--stein); }
.feld.hat-fehler input, .feld.hat-fehler textarea { border-color: var(--rot); background: var(--rot-hell); }
.feld-fehler { color: var(--rot); font-size: 14px; }
.feld-fehler:empty { display: none; }
.feld-hilfe { color: var(--rauch); font-size: 14px; }
.zweispaltig { display: grid; grid-template-columns: 1fr; gap: 18px; }
.plz-ort { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; }
@media (min-width: 600px) { .zweispaltig { grid-template-columns: 1fr 1fr; } }
.checkbox { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.checkbox input { width: 24px; height: 24px; accent-color: var(--tinte); flex: none; }
.checkbox.gross { min-height: var(--touch); font-weight: 500; }
.unterbereich { border: 0; border-radius: var(--r-karte); padding: 20px; background: var(--taupe); display: flex; flex-direction: column; gap: 16px; margin: 0; }
.unterbereich legend { float: left; width: 100%; padding: 0; font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.auswahl { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--taupe); border-radius: var(--r-pille); align-self: flex-start; max-width: 100%; }
.auswahl-knopf {
  flex: 1 1 auto; min-height: 48px; padding: 8px 20px; border-radius: var(--r-pille);
  border: 0; background: transparent; font: 500 16px var(--schrift); color: var(--graphit); cursor: pointer; white-space: nowrap;
}
.auswahl-knopf.aktiv { background: var(--eierschale); color: var(--tinte); box-shadow: var(--schatten-hauch); }
.feld .auswahl { align-self: stretch; }
@media (min-width: 600px) { .feld .auswahl { align-self: flex-start; } }

/* ── Dialoge ── */
.dlg { border: 0; border-radius: var(--r-gross); padding: 0; width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 24px); background: var(--eierschale); color: var(--tinte); box-shadow: var(--schatten-hauch), 0 24px 64px rgba(0, 0, 0, .12); }
.dlg::backdrop { background: rgba(68, 64, 59, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dlg-form { padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.dlg h2 { margin: 0 0 4px; font-size: 28px; font-weight: 300; }
.dlg p { margin: 0; color: var(--graphit); }
.dlg-fehler { color: var(--rot); font-weight: 500; }
.dlg-fehler:empty { display: none; }
.dlg-knoepfe { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.dlg-knoepfe .knopf { flex: 1 1 160px; }
.dlg-warten { padding: 36px; text-align: center; width: auto; }
.spinner { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; background: var(--kugel); animation: pulsieren 1.4s ease-in-out infinite; }
@keyframes pulsieren { 50% { transform: scale(.82); opacity: .7; } }
.notfallcode { font: 500 26px/1.3 var(--schrift-mono); letter-spacing: .08em; text-align: center; padding: 20px; background: var(--taupe); border-radius: 16px; user-select: all; }
.vergleich { width: 100%; border-collapse: collapse; font-size: 15px; }
.vergleich th, .vergleich td { padding: 10px 8px; border-bottom: 1px solid var(--stein); text-align: left; }
.vergleich thead th { color: var(--rauch); font-weight: 500; }

.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 100;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  display: flex; gap: 10px; align-items: center; width: max-content; max-width: calc(100vw - 32px);
  background: var(--tinte); color: var(--eierschale); padding: 12px 22px; border-radius: var(--r-pille); font-size: 15px; font-weight: 500;
}
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.toast-fehler { background: var(--rot); }

/* ── PIN-Sperre ── */
.sperre { position: fixed; inset: 0; z-index: 1000; background: var(--eierschale); display: grid; place-items: center; padding: 20px; }
.sperre-box { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(320px, 100%); }
.sperre-box h1 { margin: 0; font-size: 32px; font-weight: 300; }
.sperre-box .icon.gross { width: 28px; height: 28px; padding: 26px; box-sizing: content-box; border-radius: 50%; background: var(--kugel); color: var(--marke-text, #fff); }
.pin-punkte { display: flex; gap: 14px; min-height: 22px; }
.pin-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--stein); transition: background .15s; }
.pin-punkt.voll { background: var(--tinte); }
.pin-meldung { color: var(--rot); min-height: 1.5em; font-weight: 500; font-size: 15px; }
.pin-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.pin-taste { aspect-ratio: 1; min-height: 64px; border-radius: 50%; border: 0; background: var(--taupe); font: 300 30px var(--schrift); color: var(--tinte); cursor: pointer; }
.pin-taste:active { background: var(--stein-dunkel); }

/* ── Neue Rechnung ── */
.schritte { display: flex; gap: 6px; list-style: none; margin: 0; padding: 4px; background: var(--taupe); border-radius: var(--r-pille); }
.schritte li { flex: 1; min-width: 0; }
.schritte button {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px;
  border: 0; border-radius: var(--r-pille); background: none; font: 500 15px var(--schrift); color: var(--rauch); cursor: pointer;
}
.schritte button:disabled { cursor: default; opacity: .6; }
.schritte li.aktiv button { background: var(--eierschale); color: var(--tinte); box-shadow: var(--schatten-hauch); }
.schritte li.erledigt button { color: var(--graphit); }
.schritt-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--stein); color: var(--graphit); font: 500 12px var(--schrift-mono); flex: none; }
.schritt-nr .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.aktiv .schritt-nr { background: var(--tinte); color: var(--eierschale); }
.erledigt .schritt-nr { background: var(--graphit); color: var(--eierschale); }
.schritt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .schritte li:not(.aktiv) .schritt-text { display: none; } .schritte li.aktiv { flex: 0 0 auto; min-width: 50%; } .schritte li.aktiv .schritt-text { overflow: visible; } }

.tage { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tage-label { display: inline-flex; gap: 6px; align-items: center; color: var(--rauch); font-size: 14px; font-weight: 500; margin-right: 4px; }
.tag-chip { min-height: 48px; padding: 6px 18px; border-radius: var(--r-pille); border: 1px solid var(--stein); background: var(--eierschale); font: 500 15px var(--schrift); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--tinte); }
.tag-chip.aktiv { background: var(--tinte); border-color: var(--tinte); color: var(--eierschale); }
.tag-plus { border-style: dashed; color: var(--graphit); }

.zweigeteilt { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) {
  .zweigeteilt { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
  .zweigeteilt-3 { grid-template-columns: 400px minmax(0, 1fr); }
  .rechnung-panel { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow: auto; }
  .fussleiste { display: none !important; }
}
@media (max-width: 899px) { .nur-breit { display: none !important; } }

.katalog { display: flex; flex-direction: column; gap: 12px; }
.katalog-gruppe { display: flex; flex-direction: column; gap: 12px; }
.katalog-gruppe + .katalog-gruppe { margin-top: 12px; }
.gruppe-hinweis { margin: -6px 0 0; color: var(--rauch); font-size: 14px; }
.leistungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.leistung { display: flex; flex-direction: column; background: var(--taupe); border-radius: var(--r-karte); overflow: hidden; transition: background .15s; }
.leistung:has(.leistung-zahl:not([hidden])) { background: var(--stein); }
.leistung-kopf {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 52px 10px 16px; position: relative;
  background: none; border: 0; font: inherit; color: var(--tinte); text-align: left; cursor: pointer;
}
.leistung-kopf:disabled { cursor: default; opacity: 1; }
.leistung-name { font-weight: 400; line-height: 1.3; font-size: 16px; }
.ziffer { display: inline-block; font: 500 12px/1.6 var(--schrift-mono); color: var(--graphit); background: var(--eierschale); padding: 1px 9px; border-radius: var(--r-pille); box-shadow: var(--schatten-innen); }
.leistung-zahl { position: absolute; top: 12px; right: 12px; background: var(--tinte); color: var(--eierschale); font: 500 13px/1 var(--schrift-mono); border-radius: var(--r-pille); padding: 6px 9px; }
.preise { display: flex; gap: 6px; padding: 0 10px 10px; flex-wrap: wrap; }
.preis-knopf {
  flex: 1 1 0; min-width: 70px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--stein-dunkel); border-radius: var(--r-pille); background: var(--eierschale); color: var(--tinte);
  font: 500 15px var(--schrift); cursor: pointer; padding: 4px 10px; white-space: nowrap;
}
.preis-knopf .icon { width: 14px; height: 14px; color: var(--rauch); }
.preis-knopf:hover { border-color: var(--tinte); }
.preis-knopf:active { background: var(--tinte); color: var(--eierschale); }
.preis-label { font-weight: 400; font-size: 13px; color: var(--rauch); }

.rechnung-panel { background: var(--eierschale); border-radius: var(--r-gross); padding: 20px; box-shadow: var(--schatten-hauch); display: flex; flex-direction: column; gap: 12px; }
.rechnung-panel > .abschnitt { margin: 0; text-transform: none; letter-spacing: -.02em; font-size: 24px; font-weight: 300; color: var(--tinte); }
.pos-gruppe { display: flex; flex-direction: column; }
.pos-datum { font: 500 12px/1.6 var(--schrift-mono); color: var(--rauch); padding: 8px 0 4px; border-bottom: 1px solid var(--stein); }
.position { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--stein); }
.pos-text { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; font-size: 15px; color: var(--graphit); }
.pos-steuer { display: flex; align-items: center; gap: 6px; }
.rund { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stein); background: var(--eierschale); display: inline-grid; place-items: center; cursor: pointer; color: var(--tinte); flex: none; }
.rund:hover { background: var(--taupe); }
.pos-anzahl { min-width: 2.4em; text-align: center; font: 500 15px var(--schrift-mono); }
.pos-betrag { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-pille); background: none; font: 500 16px var(--schrift); color: var(--tinte); cursor: pointer; padding: 0 10px; }
.pos-betrag:hover { background: var(--taupe); }
.pos-betrag .icon { width: 14px; height: 14px; color: var(--asche); }
.panel-summe { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.panel-summe span { color: var(--rauch); font-size: 15px; }
.panel-summe strong { font-size: 36px; font-weight: 300; letter-spacing: -.02em; }
.fussleiste {
  position: sticky; bottom: 0; z-index: 9; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin: 0 -16px -20px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(253, 252, 252, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--stein);
}
.fuss-summe { display: flex; flex-direction: column; line-height: 1.15; }
.fuss-summe small { color: var(--rauch); font-size: 13px; }
.fuss-summe strong { font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.fussleiste .knopf { flex: 0 1 200px; }
.schritt2 { display: flex; flex-direction: column; gap: 16px; }
.schritt3 .karte { background: var(--taupe); }

/* ── Zahlung ── */
.zahlung-karte { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.zahlung-kopf { font-size: 22px; font-weight: 300; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.zahlung-kopf span { font-size: 15px; color: var(--rauch); letter-spacing: .01em; }
.zahlungen { list-style: none; margin: 0; padding: 0; width: 100%; }
.zahlungen li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--stein); padding: 4px 0; font-size: 15px; color: var(--graphit); }
.stand-bezahlt .zahlung-kopf::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); align-self: center; }
.stand-offen .zahlung-kopf::before, .stand-teilweise .zahlung-kopf::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tinte); align-self: center; }
.stand-ueberfaellig { background: var(--rot-hell); }
.stand-ueberfaellig .zahlung-kopf { color: var(--rot); }

/* ── Vorschau des Rechnungsblatts ── */
.druck-tipp { margin: 0; color: var(--rauch); font-size: 14px; }
.vorschau-rahmen { position: relative; overflow: hidden; border-radius: 8px; }
.vorschau-innen { transform-origin: top left; width: max-content; }
.vorschau-bereich { min-width: 0; padding: 0; }
.rechnung-detail .vorschau-rahmen, .vorschau-bereich .vorschau-rahmen { background: transparent; padding: 0; }

/* Das Blatt auf dem Bildschirm (Maße wie A4; Druck siehe druck.css).
   Das Blatt behält bewusst seine klassische Schrift (wie die Excel-Vorlage). */
.blatt {
  position: relative; width: 210mm; min-height: 297mm; background: #fff; color: #000; letter-spacing: 0;
  padding: var(--rand-oben, 12mm) var(--rand-rechts, 15mm) var(--rand-unten, 15mm) var(--rand-links, 20mm);
  font-family: "Times New Roman", Times, "Liberation Serif", serif; font-size: var(--schriftgroesse, 11pt); line-height: 1.35;
  box-shadow: var(--schatten-hauch);
}
.blatt h2 { letter-spacing: 0; }
.b-wasserzeichen { position: absolute; inset: 0; display: grid; place-items: center; font: 300 72pt var(--schrift); letter-spacing: .1em; color: rgba(0, 0, 0, .05); transform: rotate(-30deg); pointer-events: none; }
.b-kopf { text-align: right; margin-bottom: 4mm; }
.b-kopf-name { font-size: 16pt; font-weight: 700; }
.b-kopf-titel { font-size: 12pt; }
.b-kopf-adresse { font-size: 9pt; color: #333; }
.b-anschrift-bereich { padding-top: var(--anschrift-oben, 38mm); min-height: calc(var(--anschrift-oben, 38mm) + 40mm); width: 85mm; }
.blatt.mit-kopf .b-anschrift-bereich { padding-top: 0; min-height: 45mm; margin-top: calc(var(--anschrift-oben, 38mm) - 24mm); }
.b-absender { font-size: 7.5pt; text-decoration: underline; margin-bottom: 2mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-anschrift { font-size: 11pt; }
.b-ortdatum { text-align: right; margin: 4mm 0 8mm; }
.b-titel { font-size: 12pt; font-weight: 700; margin: 0 0 1mm; }
.b-bezug { margin-bottom: 4mm; }
.b-einleitung { text-align: justify; margin: 4mm 0; }
.b-diagnose { margin: 0 0 4mm; }
.b-tabelle { width: 100%; border-collapse: collapse; margin: 4mm 0; }
.b-tabelle th { text-align: left; font-weight: 700; border-bottom: 1px solid #000; padding: 1.5mm 2mm 1.5mm 0; }
.b-tabelle td { vertical-align: top; padding: 2mm 2mm 2mm 0; border-bottom: .5px solid #bbb; }
.b-tabelle tr { break-inside: avoid; page-break-inside: avoid; }
.b-tabelle .sp-datum { width: 22mm; white-space: nowrap; }
.b-tabelle .sp-ziffer { width: 15mm; }
.b-tabelle .sp-anzahl { width: 14mm; text-align: center; }
.b-tabelle .sp-betrag { width: 24mm; text-align: right; white-space: nowrap; padding-right: 0; }
.b-tabelle tfoot td { border-bottom: 0; border-top: 1px solid #000; font-weight: 700; padding-top: 2mm; }
.b-summe-label { text-align: right; }
.b-summe { border-bottom: 3px double #000 !important; }
.b-zahlung { margin: 6mm 0 2mm; }
.b-bank { margin: 2mm 0; font-size: 10pt; }
.b-steuer { margin-top: 4mm; font-size: 8.5pt; text-align: right; }
.b-gruss { margin-top: 8mm; break-inside: avoid; page-break-inside: avoid; }
.b-unterschrift { height: 12mm; }
.b-verband { font-size: 8.5pt; margin-top: 2mm; font-style: italic; }
.b-fuss { margin-top: 10mm; padding-top: 2mm; border-top: .5px solid #999; font-size: 8pt; color: #333; text-align: center; }

/* ── Sonstiges ── */
.startfehler { padding: 32px 16px; }
.startfehler h1 { font-weight: 300; font-size: 36px; }
.entwicklung { background: var(--eierschale); box-shadow: inset 0 0 0 1px var(--stein-dunkel); }

/* Knöpfe in Panels und Karten immer volle Breite */
.rechnung-panel .aktionen > .knopf, .schritt3 .karte .aktionen > .knopf { flex: 1 1 auto; }

/* ═════════════════════════════════════════════════════════════════════
   App-Rahmen & Hauptnavigation
   Handy: Leiste unten · Tablet/Rechner (≥ 900 px): Seitenleiste links
   ═════════════════════════════════════════════════════════════════════ */
.shell { min-height: 100vh; }
.shell-inhalt { min-width: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.hauptnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  background: rgba(253, 252, 252, .94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--stein);
}
.hauptnav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.hauptnav li { flex: 1; min-width: 0; }
.hauptnav-marke { display: none; }
.hauptnav-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px;
  color: var(--rauch); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: 0; border-radius: 14px;
}
.hauptnav-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hauptnav-link .icon { width: 22px; height: 22px; padding: 4px 16px; box-sizing: content-box; border-radius: var(--r-pille); transition: background .15s; }
.hauptnav-link.aktiv { color: var(--tinte); }
.hauptnav-link.aktiv .icon { background: var(--stein); }
.shell.fokus .hauptnav { display: none; }
.shell.fokus .shell-inhalt { padding-bottom: 0; }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .shell-inhalt { padding-bottom: 0; }
  .shell.fokus .hauptnav { display: flex; }
  .hauptnav {
    position: sticky; top: 0; bottom: auto; height: 100vh; display: flex; flex-direction: column; gap: 28px;
    padding: 28px 16px; border-top: 0; border-right: 1px solid var(--stein); background: var(--eierschale);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .hauptnav-marke { display: flex; align-items: center; gap: 12px; padding: 0 10px; color: var(--tinte); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.25; }
  .marke-kugel { width: 30px; height: 30px; border-radius: 50%; background: var(--kugel); flex: none; }
  .hauptnav ul { flex-direction: column; gap: 4px; }
  .hauptnav-link { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 16px; font-size: 16px; color: var(--graphit); border-radius: var(--r-pille); }
  .hauptnav-link .icon { padding: 0; width: 20px; height: 20px; background: none !important; }
  .hauptnav-link:hover { background: var(--taupe); }
  .hauptnav-link.aktiv { background: var(--stein); color: var(--tinte); }
}

/* ── Hauptseiten: große, leichte Überschrift ── */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: calc(36px + env(safe-area-inset-top)) 16px 4px; }
.seitenkopf h1 { margin: 0; font-size: clamp(34px, 6vw, 48px); font-weight: 300; letter-spacing: -.02em; line-height: 1.08; }
@media (min-width: 700px) { .seitenkopf { padding: calc(56px + env(safe-area-inset-top)) 32px 8px; } }
.klein { font-size: 14px; color: var(--rauch) !important; }

/* ── Kennzahlen ── */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.zahl { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--r-karte); background: var(--taupe); color: var(--tinte); text-decoration: none; min-width: 0; }
a.zahl:hover { background: var(--stein); }
.zahl-label { font-size: 14px; color: var(--rauch); }
.zahl-wert { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.zahl-unter { font-size: 13px; color: var(--rauch); }

/* ── Aufgaben (Heute) ── */
.abschnitt-block { display: flex; flex-direction: column; gap: 8px; }
.aufgaben { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stein); }
.aufgaben li { border-bottom: 1px solid var(--stein); }
.aufgabe { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 8px; color: var(--tinte); text-decoration: none; border-radius: 12px; }
.aufgabe:hover { background: var(--taupe); }
.aufgabe-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--taupe); }
.aufgabe-symbol .icon { width: 18px; height: 18px; }
.aufgabe.dringend .aufgabe-symbol { background: var(--rot); color: #fff; }
.aufgabe-text small { display: block; color: var(--rauch); font-size: 14px; }
.leer-schoen { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 4px; color: var(--rauch); }
.leer-schoen .icon { width: 18px; height: 18px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--taupe); color: var(--ok); }

/* ── Monatsübersicht ── */
.monate-wrap { overflow-x: auto; }
.monate { width: 100%; border-collapse: collapse; font-size: 15px; }
.monate th, .monate td { padding: 10px 8px; border-bottom: 1px solid var(--stein-dunkel); text-align: right; white-space: nowrap; }
.monate th:first-child { text-align: left; font-weight: 400; }
.monate thead th { font-size: 13px; color: var(--rauch); font-weight: 500; }
.monate tfoot th, .monate tfoot td { font-weight: 500; border-bottom: 0; border-top: 1px solid var(--tinte); }
.monate-balken, .monate-balken-kopf { width: 28%; }
.balken { display: block; height: 6px; border-radius: var(--r-pille); background: var(--stein-dunkel); overflow: hidden; }
.balken::after { content: ""; display: block; height: 100%; width: calc(var(--anteil, 0) * 100%); background: var(--tinte); border-radius: inherit; }
@media (max-width: 599px) { .monate-balken, .monate-balken-kopf { display: none; } }

/* ── Leistungskatalog-Editor ── */
.katalog-edit { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.katalog-edit-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.katalog-edit-kopf h2 { margin: 0; font-size: 24px; font-weight: 300; }
.werkzeuge { display: flex; gap: 6px; flex: none; }
.katalog-zeile { display: flex; align-items: center; gap: 8px; }
.katalog-zeile .liste-eintrag { flex: 1; min-width: 0; }
.katalog-zeile.ausgeblendet .liste-eintrag { opacity: .55; }
.rund:disabled { opacity: .3; cursor: default; }
.abzeichen .icon { width: 12px; height: 12px; margin-right: 4px; }
.preis-liste { display: flex; flex-direction: column; gap: 8px; }
.preis-zeile { display: grid; grid-template-columns: 96px 12px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.preis-euro { color: var(--rauch); }
.rund-platz { width: 44px; }
.dlg { overflow-y: auto; }
.dlg-breit { width: min(680px, calc(100vw - 24px)); }
.feld select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rauch) 50%), linear-gradient(135deg, var(--rauch) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.aufgabe .liste-pfeil { grid-area: auto; }
@media (max-width: 599px) {
  .zahlen { grid-template-columns: 1fr 1fr; }
  .zahlen > .zahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .zahl-wert { font-size: 26px; }
}

/* ── Phase 3: Mahnwesen, Auswertung ── */
.mahn-info { align-self: center; }
.b-mahn-tabelle { width: auto; min-width: 60%; margin-left: auto; }
.b-mahn-tabelle td { border-bottom: .5px solid #bbb; }
.b-summe-zeile td { font-weight: 700; border-top: 1px solid #000; border-bottom: 3px double #000 !important; }
.auswertung { display: flex; flex-direction: column; gap: 16px; }
.auswertung-leistung { white-space: normal !important; max-width: 420px; }

/* ── Leistungsauswahl: Suche, Reiter, kompakte Zeilen ── */
.katalog { gap: 14px; }
.katalog-reiter { display: flex; gap: 4px; padding: 4px; background: var(--taupe); border-radius: var(--r-pille); overflow-x: auto; scrollbar-width: none; }
.katalog-reiter::-webkit-scrollbar { display: none; }
.katalog-reiter.gedimmt { opacity: .5; }
.reiter-knopf { flex: none; min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--r-pille); background: transparent; font: 500 15px var(--schrift); color: var(--graphit); cursor: pointer; white-space: nowrap; }
.reiter-knopf.aktiv { background: var(--eierschale); color: var(--tinte); box-shadow: var(--schatten-hauch); }
.lz-liste { display: flex; flex-direction: column; gap: 8px; }
.lz-gruppe { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stein); }
.lz { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 6px; border-bottom: 1px solid var(--stein); border-radius: 10px; flex-wrap: wrap; transition: background .15s; }
.lz.gewaehlt { background: var(--taupe); }
.lz-text { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
.lz .ziffer { flex: none; min-width: 52px; text-align: center; }
.ziffer-leer { color: var(--asche); background: transparent !important; box-shadow: none !important; }
.lz-name { font-size: 16px; line-height: 1.3; }
.lz-name small { display: block; font-size: 12.5px; color: var(--rauch); }
.lz .leistung-zahl { position: static; flex: none; }
.lz-preise { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.lz-preise .preis-knopf { flex: none; min-width: 84px; min-height: 46px; }
@media (max-width: 599px) {
  .lz { padding: 12px 4px; }
  .lz-preise { width: 100%; padding-left: 64px; }
  .lz-preise .preis-knopf { flex: 1 1 0; min-width: 0; }
}

/* ── Globale Suche ── */
.hauptnav-suche { display: none; }
.hauptnav button.hauptnav-link { width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; }
@media (min-width: 900px) {
  .nur-handy { display: none; }
  .hauptnav-suche {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px;
    border: 1px solid var(--stein); border-radius: var(--r-pille); background: var(--taupe);
    font: 400 15px var(--schrift); color: var(--rauch); cursor: pointer; text-align: left;
  }
  .hauptnav-suche:hover { border-color: var(--stein-dunkel); }
  .hauptnav-suche span { flex: 1; }
  .hauptnav-suche kbd { font: 500 11px var(--schrift-mono); padding: 2px 7px; border-radius: 6px; background: var(--eierschale); box-shadow: var(--schatten-innen); color: var(--rauch); }
}
.dlg-suche { width: min(640px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 48px)); margin-top: 8vh; display: flex; flex-direction: column; padding: 0; }
.dlg-suche[open] { display: flex; }
.suche-kopf { display: flex; gap: 8px; align-items: center; padding: 14px; border-bottom: 1px solid var(--stein); }
.suche-kopf .suchzeile { flex: 1; }
.suche-ergebnisse { overflow-y: auto; padding: 8px 10px 14px; }
.suche-gruppe { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.suche-gruppe .abschnitt { margin: 4px 8px 4px; }
.suche-treffer { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--tinte); text-decoration: none; min-height: 56px; }
.suche-treffer small { display: block; font-size: 13.5px; color: var(--rauch); }
.suche-treffer:hover, .suche-treffer.aktiv { background: var(--taupe); }
.suche-leer { padding: 16px 10px; }
@media (max-width: 599px) {
  .dlg-suche { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .suche-kopf { padding-top: calc(14px + env(safe-area-inset-top)); }
}
/* Rasterspalten dürfen schmaler als ihr Inhalt werden (sonst bläht die Reiterleiste die Seite auf) */
.zweigeteilt > *, .katalog, .lz-liste { min-width: 0; }
@media (max-width: 599px) {
  .lz-preise { padding-left: 0; }
  .lz-preise .preis-knopf { min-width: 0; padding: 4px 6px; }
}

/* ── Praxisfoto ── */
.start-foto {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--eierschale), var(--schatten-hauch);
}
/* Kopf mit Foto: Foto bekommt eigenen Platz (keine Überlappung mit der Begrüßung).
   Handy: kleines Foto neben dem Datum. Ab 700 px: großes Foto rechts neben Text und Knopf. */
.start-kopf.mit-foto { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "foto datum" "name name" "aktion aktion"; column-gap: 14px; align-items: center; }
.start-kopf.mit-foto > .start-foto { grid-area: foto; }
.start-kopf.mit-foto > .start-untertitel { grid-area: datum; }
.start-kopf.mit-foto > .start-name { grid-area: name; }
.start-kopf.mit-foto > :last-child:not(.start-foto) { grid-area: aktion; }
@media (min-width: 700px) {
  .start-kopf.mit-foto { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "datum foto" "name foto" "aktion foto"; column-gap: 32px; align-items: start; }
  .start-kopf.mit-foto > .start-foto { width: 150px; height: 150px; box-shadow: 0 0 0 4px var(--eierschale), var(--schatten-hauch); align-self: center; }
}
.marke-logo, .sperre-logo, .marke-logo-vorschau { mix-blend-mode: multiply; } /* weißer Bildhintergrund verschmilzt mit der Fläche */
.marke-logo { display: block; width: 100%; max-width: 190px; max-height: 60px; object-fit: contain; object-position: left center; }
.marke-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--eierschale), 0 0 0 3px var(--stein); }
.start-kopf > .start-foto { position: static; }
.dlg-suche { overflow-x: hidden; }
.suche-kopf .suchzeile { min-width: 0; }
.suche-kopf .knopf { flex: none; padding: 10px 12px; }
@media (max-width: 599px) { .dlg-suche { width: 100%; max-width: 100%; } }

/* ── Sicherheit & Datenschutz ── */
.kurzfassung { position: relative; overflow: hidden; }
.kurzfassung h2 { font-size: clamp(24px, 4vw, 32px); display: block; max-width: 20ch; }
.kurzfassung p { max-width: 62ch; }
.schild { width: 56px; height: 56px; border-radius: 50%; background: var(--kugel); display: grid; place-items: center; color: var(--marke-text, #fff); }
.schild .icon { width: 24px; height: 24px; }
.checkliste { list-style: none; margin: 0; padding: 0; }
.checkliste li + li { border-top: 1px solid var(--stein-dunkel); }
.check-zeile { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 12px 4px; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
button.check-zeile { cursor: pointer; border-radius: 12px; }
button.check-zeile:hover { background: var(--stein); }
.check-zeile small { display: block; color: var(--rauch); font-size: 14px; }
.check-symbol { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rot-hell); color: var(--rot); }
.check-symbol.ok { background: var(--eierschale); color: var(--ok); box-shadow: var(--schatten-innen); }
.check-symbol .icon { width: 16px; height: 16px; }
.datenorte th, .datenorte td { text-align: left !important; white-space: normal !important; vertical-align: top; }
.datenorte tbody th { font-weight: 500; }
.aufklapp-liste { border-top: 1px solid var(--stein); }
.aufklapp { border-bottom: 1px solid var(--stein); }
.aufklapp summary { display: flex; align-items: center; gap: 14px; padding: 14px 6px; cursor: pointer; list-style: none; font-size: 17px; min-height: 64px; border-radius: 12px; }
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary:hover { background: var(--taupe); }
.aufklapp summary > span:nth-child(2) { flex: 1; }
.aufklapp-pfeil { color: var(--asche); transition: transform .2s; }
.aufklapp[open] .aufklapp-pfeil { transform: rotate(90deg); }
.aufklapp-inhalt { padding: 0 6px 18px 60px; display: flex; flex-direction: column; gap: 10px; color: var(--graphit); max-width: 75ch; }
.aufklapp-inhalt p { margin: 0; }
@media (max-width: 599px) { .aufklapp-inhalt { padding-left: 6px; } }
.quelle { color: var(--graphit); text-decoration: underline; text-decoration-color: var(--stein-dunkel); }

/* ── Dokument (z. B. Verarbeitungsverzeichnis) ── */
.blatt.dokument { font-family: Helvetica, Arial, "Liberation Sans", sans-serif; font-size: 9.5pt; line-height: 1.4; } /* metrisch identisch mit der PDF-Schrift Helvetica */
.blatt.dokument .b-titel { font-size: 16pt; font-weight: 600; }
.vvt-tabelle { width: 100%; border-collapse: collapse; margin: 3mm 0; }
.vvt-tabelle th, .vvt-tabelle td { text-align: left; vertical-align: top; padding: 1.5mm 2mm; border: .5px solid #999; }
.vvt-tabelle th { width: 45mm; font-weight: 600; background: #f3f3f3; }
.vvt-tabelle tr { break-inside: avoid; page-break-inside: avoid; }
.vvt-taetigkeit h3 { font-size: 11pt; margin: 6mm 0 1mm; }
.vvt-hinweis { font-style: italic; margin-top: 5mm; }
.vvt-unterschrift { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 18mm; }
.vvt-unterschrift div { border-top: .5px solid #000; padding-top: 1mm; font-size: 8.5pt; }
@media (max-width: 599px) {
  .datenorte thead { display: none; }
  .datenorte tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--stein-dunkel); }
  .datenorte th, .datenorte td { display: block; border: 0 !important; padding: 2px 0 !important; }
  .datenorte td::before { content: attr(data-label) ": "; color: var(--rauch); font-size: 13px; }
}

/* ── Markenfarbe (Praxis einrichten → Erscheinungsbild) ── */
:root { --marke: #000000; --marke-text: #ffffff; }
.knopf-primaer, .knopf-primaer:hover:not(:disabled) { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.knopf-primaer:hover:not(:disabled) { filter: brightness(.92); }
.tag-chip.aktiv, .aktiv .schritt-nr, .leistung-zahl, .abzeichen-offen, .abzeichen-teilweise { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.lz .leistung-zahl { background: var(--marke); color: var(--marke-text); }
.preis-knopf:active { background: var(--marke); color: var(--marke-text); }
.hauptnav-link.aktiv .icon { color: var(--marke); }
@media (min-width: 900px) { .hauptnav-link.aktiv .icon { color: inherit; } .hauptnav-link.aktiv { box-shadow: inset 3px 0 0 var(--marke); } }
.pin-punkt.voll { background: var(--marke); }

/* ── Praxis einrichten ── */
.einrichten-bereich summary small { display: block; color: var(--rauch); font-size: 14px; }
.einrichten-bereich .aufklapp-inhalt { padding-left: 6px; max-width: 760px; }
.farb-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.farb-knopf { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--farbe); cursor: pointer; box-shadow: 0 0 0 2px var(--eierschale), 0 0 0 3px var(--stein-dunkel); }
.farb-knopf.aktiv { box-shadow: 0 0 0 3px var(--eierschale), 0 0 0 5px var(--tinte); }
.farb-eigene { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--graphit); cursor: pointer; }
.farb-eigene input { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: none; -webkit-appearance: none; appearance: none; box-shadow: 0 0 0 2px var(--eierschale), 0 0 0 3px var(--stein-dunkel); cursor: pointer; }
.farb-eigene input::-webkit-color-swatch-wrapper { padding: 0; }
.farb-eigene input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.farb-eigene input::-moz-color-swatch { border: 0; border-radius: 50%; }
.marke-vorschau { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-karte); background: var(--eierschale); box-shadow: var(--schatten-innen); }
.marke-foto-vorschau { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.marke-foto-vorschau.leer { display: grid; place-items: center; background: var(--taupe); color: var(--asche); }
.marke-logo-vorschau { max-height: 56px; max-width: 180px; }
.marke-knopf { pointer-events: none; }

/* ── Zugang / Anmeldung ── */
.sperre { overflow-y: auto; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); }
.sperre-box { gap: 14px; }
.sperre-kopf { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sperre-foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--eierschale), 0 0 0 5px var(--stein); }
.sperre-kugel { width: 80px; height: 80px; border-radius: 50%; background: var(--kugel); display: grid; place-items: center; color: var(--marke-text, #fff); }
.sperre-kugel .icon { width: 28px; height: 28px; }
.sperre-logo { display: block; width: 220px; max-width: 70vw; height: auto; margin: 0 auto; }
.sperre-praxis { font-size: 13px; color: var(--rauch); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; text-align: center; }
.sperre-text { margin: 0; text-align: center; color: var(--graphit); max-width: 34ch; }
.sperre-extra { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.pin-taste .icon { width: 26px; height: 26px; }
.pin-punkte.wackeln { animation: wackeln .35s; }
@keyframes wackeln { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .pin-punkte.wackeln { animation: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.hauptnav-sperren { display: none; }
@media (min-width: 900px) {
  .hauptnav-sperren { display: flex; align-items: center; gap: 12px; margin-top: auto; min-height: 46px; padding: 0 16px; border: 0; border-radius: var(--r-pille); background: none; font: 500 15px var(--schrift); color: var(--rauch); cursor: pointer; }
  .hauptnav-sperren:hover { background: var(--taupe); color: var(--tinte); }
  .hauptnav-sperren .icon { width: 18px; height: 18px; }
}
.seitenkopf .knopf { flex: none; }
@media (min-width: 900px) { .seitenkopf .knopf { display: none; } }
.pin-taste { aspect-ratio: auto; height: clamp(56px, 9.5vh, 76px); border-radius: var(--r-pille); }
.sperre-box { width: min(340px, 100%); }

/* ── PDF-Messung (unsichtbar außerhalb des Bildschirms) & Logo ── */
.pdf-messung { position: fixed; left: -12000px; top: 0; pointer-events: none; }
.pdf-messung .blatt { box-shadow: none; }
.b-kopf.mit-logo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; }
.b-kopf.mit-logo .b-kopf-text { text-align: right; }
.b-logo { max-height: 22mm; max-width: 60mm; object-fit: contain; }
.versand-info { display: flex; align-items: center; gap: 6px; margin: 0; }
.versand-info .icon { width: 16px; height: 16px; }
.unver-box { background: var(--eierschale); box-shadow: var(--schatten-innen); }
@media (max-width: 599px) {
  .kopfzeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kopfzeile h1 { text-align: left; }
  .kopf-platz { display: none; }
}
.anleitung-liste { margin: 0; padding-left: 20px; color: var(--graphit); } .anleitung-liste li { margin: 2px 0; }

/* ── Formulare & Unterschrift ── */
.formular-blatt { background: var(--eierschale); box-shadow: var(--schatten-hauch); font-size: 18px; line-height: 1.6; }
.formular-blatt h2 { font-size: 26px; }
.formular-praxis { font-size: 13px; color: var(--rauch); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.formular-text p { margin: 0 0 12px; max-width: 70ch; }
.formular-ort { color: var(--graphit); }
.unterschrift { display: flex; flex-direction: column; gap: 6px; }
.unterschrift-flaeche { width: 100%; height: 200px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--stein-dunkel); touch-action: none; cursor: crosshair; }
.unterschrift-linie { font-size: 13px; color: var(--rauch); border-top: 1px solid var(--graphit); padding-top: 4px; margin: -48px 24px 28px; pointer-events: none; }
.unterschrift .knopf { align-self: flex-end; }
.dlg-liste .dlg-knoepfe { flex-direction: column; flex-wrap: nowrap; }
.dlg-liste .dlg-knoepfe .knopf { flex: none; width: 100%; }
.formulare-bereich { display: flex; flex-direction: column; gap: 10px; }
/* Druck des unterschriebenen Formulars / der Patienteninfo */
.formular-druck p, .patienteninfo p { margin: 0 0 3mm; text-align: justify; }
.formular-signatur { margin-top: 12mm; width: 90mm; }
.formular-signatur-bild { display: block; width: 80mm; height: auto; margin-top: 4mm; }
.formular-signatur-linie { border-top: .5px solid #000; padding-top: 1mm; font-size: 8.5pt; }
.formular-meta { margin-top: 8mm; color: #555 !important; }
.patienteninfo .info-abschnitt h3 { font-size: 11pt; margin: 5mm 0 1mm; }
.mono { font-family: var(--schrift-mono); letter-spacing: .04em; word-break: break-all; }
.daten dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .daten { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .daten dt { margin-top: 10px; font-size: 13px; }
  .daten dt:first-child { margin-top: 0; }
}

/* ── Phase 4: Finanzen (Ausgaben, Kasse, Bank, Steuer, Gutscheine) ── */
.abzeichen-warnung { background: #fdf3e1; color: #7a4b00; }
.zahl-warnung { background: var(--rot-hell); }
.zahl-warnung .zahl-wert { color: var(--rot); }
.karte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.monat-wahl { font: inherit; font-size: 16px; padding: 8px 36px 8px 14px; border-radius: var(--r-pille); border: 1px solid var(--stein-dunkel); background-color: var(--eierschale); color: var(--tinte); min-height: 40px;
  -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rauch) 50%), linear-gradient(135deg, var(--rauch) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.plus { color: var(--ok); }
.minus { color: var(--graphit); }
.kasse-liste th, .kasse-liste td { white-space: normal; vertical-align: top; }
.kasse-liste tbody th { text-align: left; font-weight: 400; }
.kasse-liste tbody th small { display: block; color: var(--rauch); font-size: 13px; }
.kasse-liste td:first-child { text-align: left; white-space: nowrap; }
.beleg-box { display: flex; flex-direction: column; gap: 14px; }
.beleg-bild { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; align-self: flex-start; box-shadow: var(--schatten-hauch); }
.beleg-bild img { display: block; max-width: min(100%, 360px); max-height: 360px; object-fit: contain; background: #fff; }
.beleg-pdf { display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--stein-dunkel); background: var(--eierschale); font: inherit; cursor: pointer; align-self: flex-start; text-align: left; }
.beleg-pdf small { color: var(--rauch); margin-left: 8px; }
.unterbereich h3 { margin: 0; font-size: 20px; font-weight: 400; }
.bank-liste { border-top: 0; display: flex; flex-direction: column; gap: 12px; }
.bank-liste li.bank-eintrag { border: 0; background: var(--taupe); border-radius: var(--r-karte); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.bank-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.bank-kopf strong { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bank-zweck { overflow-wrap: anywhere; }
.bank-vorschlag { display: flex; align-items: flex-start; gap: 6px; color: var(--ok); font-size: 15px; }
.bank-vorschlag .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.euer th { white-space: normal !important; }
.euer .euer-gruppe th { padding-top: 18px; font-size: 13px; color: var(--rauch); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.euer .euer-summe th, .euer .euer-summe td { font-weight: 500; border-bottom-color: var(--tinte); }
.euer .euer-gewinn th, .euer .euer-gewinn td { font-size: 20px; font-weight: 500; border-bottom: 0; }
.anlage-zeile { padding: 14px 4px; display: flex; flex-direction: column; gap: 6px; }
.termin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.termin-liste li strong { font-variant-numeric: tabular-nums; margin-right: 6px; }
.kasse-tabelle td, .kasse-tabelle th { font-size: 10pt; }

/* Gutschein (A4-Blatt mit Karte im oberen Drittel zum Ausschneiden) */
.gutschein-blatt { display: flex; flex-direction: column; align-items: center; gap: 3mm; padding-top: 20mm !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gs-schnitt { padding: 3mm; border: .3mm dashed #b5b5b5; border-radius: 2mm; }
.gs-hinweis { font: 8pt Helvetica, Arial, sans-serif; color: #999; }
.gs-karte { --gs-farbe: #5f7a5f; width: 160mm; height: 100mm; box-sizing: border-box; display: grid; grid-template-columns: 48mm 1fr; border-radius: 3mm; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 .3mm color-mix(in srgb, var(--gs-farbe) 35%, #fff); font-family: Helvetica, Arial, sans-serif; color: #2a2a2a; }
.gs-band { background: var(--gs-farbe); color: #fff; padding: 9mm 6mm 7mm; display: flex; flex-direction: column; gap: 4mm; }
.gs-logo-rahmen { background: #fff; border-radius: 2mm; padding: 2.5mm; display: flex; justify-content: center; }
.gs-logo { max-width: 100%; max-height: 22mm; object-fit: contain; }
.gs-band-name { font-family: Georgia, "Times New Roman", serif; font-size: 13pt; line-height: 1.25; }
.gs-band-adresse { margin-top: auto; font-size: 7.5pt; line-height: 1.5; opacity: .9; }
.gs-inhalt { position: relative; padding: 9mm 10mm 7mm 11mm; display: flex; flex-direction: column; gap: 2.5mm; overflow: hidden; }
.gs-zweig { position: absolute; right: -6mm; bottom: -8mm; width: 38mm; height: 50mm; fill: color-mix(in srgb, var(--gs-farbe) 10%, #fff); stroke: color-mix(in srgb, var(--gs-farbe) 45%, #fff); stroke-width: 1.4; transform: rotate(-18deg); }
.gs-titel { font-family: Georgia, "Times New Roman", serif; font-size: 30pt; letter-spacing: .02em; color: var(--gs-farbe); line-height: 1; }
.gs-fuer { font-size: 13pt; display: flex; align-items: baseline; gap: 2mm; }
.gs-fuer span, .gs-fuss span, .gs-unterschrift span { font-size: 7.5pt; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; }
.gs-betrag { font-size: 34pt; font-weight: 700; letter-spacing: -.01em; margin-top: 1mm; font-variant-numeric: tabular-nums; }
.gs-text { font-size: 9.5pt; line-height: 1.45; color: #555; max-width: 85mm; }
.gs-fuss { display: flex; gap: 7mm; margin-top: auto; font-size: 9pt; position: relative; white-space: nowrap; }
.gs-fuss > div { display: flex; flex-direction: column; gap: .5mm; }
.gs-unterschrift { display: flex; flex-direction: column; gap: 1mm; width: 55mm; position: relative; }
.gs-linie { display: block; flex: 1; min-width: 40mm; height: 9mm; border-bottom: .3mm solid #9a9a9a; }
.modul-zeile { display: flex; flex-direction: column; gap: 6px; }
[hidden] { display: none !important; }
.feld-hilfe:empty { display: none; }

/* ── Einrichtungsassistent ── */
/* linksbündig wie alle anderen Seiten; nur die Lesebreite ist begrenzt */
.assistent > * { max-width: 820px; }
.assistent-kopf { padding: calc(28px + env(safe-area-inset-top)) 16px 4px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px) { .assistent-kopf { padding: calc(48px + env(safe-area-inset-top)) 32px 8px; } }
.assistent-kopf h1 { margin: 0; font-size: clamp(30px, 6vw, 44px); font-weight: 300; letter-spacing: -.02em; outline: 0; }
.assistent-text { margin: 0; color: var(--graphit); font-size: 17px; line-height: 1.5; max-width: 60ch; }
.assistent-schritt { font-size: 13px; color: var(--rauch); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.assistent-fortschritt { display: flex; gap: 6px; }
.assistent-fortschritt span { flex: 1; height: 4px; border-radius: 4px; background: var(--stein); }
.assistent-fortschritt span.erledigt, .assistent-fortschritt span.aktiv { background: var(--marke); }
.assistent-fortschritt span.aktiv { opacity: .55; }
.assistent-knoepfe { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.assistent-neben { display: flex; gap: 4px; }
@media (max-width: 599px) {
  .assistent-knoepfe { flex-direction: column; align-items: stretch; }
  .assistent-weiter { width: 100%; }
  .assistent-neben { justify-content: space-between; }
}
.assistent-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.assistent-punkte li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.assistent-punkte .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--marke); }
.assistent-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ── Termine ── */
.wochen-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wochen-titel { display: flex; flex-direction: column; flex: 1; min-width: 0; align-items: center; text-align: center; }
.wochen-titel strong { font-size: 20px; font-weight: 500; }
.wochen-titel span { color: var(--rauch); font-size: 14px; }
.woche { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .woche { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.tag { background: var(--taupe); border-radius: var(--r-karte); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tag.heute { box-shadow: inset 0 0 0 2px var(--marke); }
.tag.vergangen { opacity: .72; }
.tag-kopf { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 400; color: var(--rauch); }
.tag-kopf strong { color: var(--tinte); font-size: 18px; font-weight: 500; }
.tag-abwesend { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fdf3e1; color: #7a4b00; font-weight: 500; }
.tag-abwesend .icon { width: 18px; height: 18px; }
.tag-termine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.termin { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 9px 12px 10px 13px; min-height: 48px; border-radius: 12px; border-left: 3px solid var(--marke); background: var(--eierschale); color: var(--tinte); text-decoration: none; box-shadow: var(--schatten-hauch); }
.termin:hover { background: #fff; }
.termin-zeit { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--rauch); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.termin-zeit .icon { width: 14px; height: 14px; }
.termin-name { font-weight: 500; font-size: 15px; line-height: 1.3; min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.termin-symbol { width: 16px; height: 16px; color: var(--ok); }
.termin.status-erledigt { opacity: .75; }
.termin.status-nicht-erschienen .termin-name { text-decoration: line-through; }
.tag-abgesagt { font-size: 13px; color: var(--rauch); padding-left: 4px; }
.tag-frei, .termin-vorschlaege { display: flex; flex-direction: column; gap: 6px; }
.termin-vorschlaege:empty { display: none; }
.tag-frei-label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--rauch); }
.tag-frei-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.frei-zeit { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 11px; border-radius: var(--r-pille); border: 1px dashed var(--stein-dunkel); background: transparent; color: var(--graphit); font: inherit; font-size: 13px; text-decoration: none; font-variant-numeric: tabular-nums; cursor: pointer; }
.frei-zeit:hover { border-style: solid; border-color: var(--marke); color: var(--tinte); }
.mini-treffer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mini-treffer:empty { display: none; }
.mini-treffer-knopf { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; min-height: 48px; border: 0; border-radius: 12px; background: var(--taupe); font: inherit; text-align: left; cursor: pointer; }
.mini-treffer-knopf span { color: var(--rauch); }
.mini-treffer-knopf:hover { background: var(--stein); }
.gewaehlt-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--taupe); }
.gewaehlt-zeile strong { flex: 1; }
.heute-termine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.heute-termine li { display: flex; align-items: center; gap: 10px; }
.heute-termin { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; min-height: 52px; border-radius: 14px; background: var(--taupe); color: var(--tinte); text-decoration: none; min-width: 0; }
.liste-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; }

/* -- Oeffentliches Anfrageformular -- */
.anfrage-seite { background: var(--eierschale); }
.anfrage-rahmen { max-width: 640px; margin: 0 auto; padding: calc(32px + env(safe-area-inset-top)) 16px 48px; display: flex; flex-direction: column; gap: 20px; }
.anfrage-kopf { display: flex; flex-direction: column; gap: 16px; }
.anfrage-kopf h1 { margin: 0; font-size: clamp(32px, 7vw, 44px); font-weight: 300; letter-spacing: -.02em; }
.anfrage-logo { max-width: 240px; max-height: 80px; object-fit: contain; align-self: flex-start; mix-blend-mode: multiply; }
.anfrage-praxis { font-weight: 500; color: var(--graphit); }
.anfrage-einleitung { margin: 0; font-size: 17px; line-height: 1.5; color: var(--graphit); }
.anfrage-neu { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.anfrage-neu legend { font-weight: 500; font-size: 14px; color: var(--graphit); margin-bottom: 8px; padding: 0; }
.anfrage-ok { align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--graphit); }
.anfrage-ok input { margin-top: 2px; }
.anfrage-fuss { color: var(--rauch); font-size: 13px; margin: 0; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.patienteninfo .b-tabelle td:first-child { white-space: nowrap; }

/* -- Website-Baukasten -- */
.website-raster { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1100px) { .website-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .website-vorschau-spalte { position: sticky; top: 16px; } }
.website-vorschau-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.website-rahmen { border-radius: 18px; overflow: auto; max-height: 80vh; box-shadow: var(--schatten-hauch); background: #fff; }
.website-vorschau { display: block; }

/* -- Frei belegbare Leiste -- */
.hauptnav-link .kurz { display: inline; }
.hauptnav-link .lang { display: none; }
.hauptnav li.nur-gross { display: none; }
.hauptnav-anpassen { display: none; }
@media (min-width: 900px) {
  .hauptnav-link .kurz { display: none; }
  .hauptnav-link .lang { display: inline; }
  .hauptnav li.nur-gross { display: list-item; }
  .hauptnav-anpassen { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; margin-top: 8px; border-radius: var(--r-pille); color: var(--rauch); font-size: 14px; text-decoration: none; }
  .hauptnav-anpassen:hover { background: var(--taupe); color: var(--tinte); }
  .hauptnav-anpassen .icon { width: 16px; height: 16px; }
}
.anheften { min-height: 40px; padding: 6px 12px; gap: 6px; font-size: 14px; white-space: nowrap; }
.anheften .icon { width: 18px; height: 18px; }
.anheften.dran { color: var(--marke); }
.anheften.dran .icon { fill: currentColor; fill-opacity: .18; }
@media (max-width: 599px) { .anheften .anheften-text { display: none; } .anheften { padding: 6px 10px; } }
@media (min-width: 900px) { .seitenkopf .knopf.anheften { display: inline-flex; } }
.mehr-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mehr-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; min-height: 88px; border-radius: 18px; background: var(--taupe); color: var(--tinte); text-decoration: none; font-weight: 500; }
.mehr-eintrag .icon { width: 22px; height: 22px; }
.mehr-eintrag.leise { background: none; box-shadow: inset 0 0 0 1px var(--stein-dunkel); color: var(--graphit); }
.nav-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 4px; }
.nav-zeile > .icon { width: 22px; height: 22px; flex: none; color: var(--graphit); }
.nav-zeile .nav-name { flex: 1; min-width: 0; }
.nav-zeile .nav-name small { display: block; color: var(--rauch); font-size: 13px; }
.nav-zeile .knopf { min-height: 44px; }
.nav-vorschau { display: flex; gap: 4px; padding: 8px; border-radius: 18px; background: var(--eierschale); box-shadow: var(--schatten-hauch); max-width: 420px; }
.nav-vorschau span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--graphit); min-width: 0; text-align: center; }
.nav-vorschau .icon { width: 20px; height: 20px; }

.knopf.nur-symbol { padding: 0; width: 44px; justify-content: center; }
.knopf.nur-symbol span:empty { display: none; }
.nav-platz { width: 88px; flex: none; }
@media (max-width: 599px) { .nav-platz { width: 0; } }

/* -- Praxis / Einstellungen -- */
.kachel-gross { display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 22px 24px; }
.kachel-gross > .icon { width: 30px; height: 30px; padding: 14px; flex: none; }
.kachel-gross span { font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.kachel-gross small { font-size: 15px; margin-top: 4px; }
.kachel-warnung { background: var(--rot-hell); }
.kachel-warnung small { color: var(--rot); }
.einstellungen-fuss { display: flex; align-items: center; gap: 6px; }
.einstellungen-fuss .icon { width: 16px; height: 16px; flex: none; }
.seitenkopf .knopf.einstellungen-knopf { display: inline-flex; }
@media (min-width: 900px) { .hauptnav-anpassen.aktiv { background: var(--stein); color: var(--tinte); } .seitenkopf .knopf.nur-handy-inline { display: none; } }
.seitenkopf .knopf.nur-handy-inline { display: inline-flex; }
@media (min-width: 900px) { .seitenkopf .knopf.nur-handy-inline { display: none; } }

/* -- Seitenleiste: Einstellungen, Sperren, Version unten fest -- */
.hauptnav-fuss { display: none; }
@media (min-width: 900px) {
  .hauptnav { overflow-y: auto; }
  .hauptnav-fuss { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--stein); }
  .hauptnav-fuss .hauptnav-anpassen { margin-top: 0; min-height: 44px; font-size: 15px; color: var(--graphit); }
  .hauptnav-fuss .hauptnav-sperren { margin-top: 0; }
  .hauptnav-version { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 0; font: 12px/1.45 var(--schrift-mono); color: var(--rauch); overflow-wrap: anywhere; }
}

/* Logo oben auf „Heute“ – nur ohne Seitenleiste (Handy, schmales Tablet) */
.start-logo { display: block; max-width: 200px; max-height: 56px; margin: calc(20px + env(safe-area-inset-top)) 16px -24px; mix-blend-mode: multiply; object-fit: contain; object-position: left center; }
@media (min-width: 700px) { .start-logo { margin: calc(28px + env(safe-area-inset-top)) 32px -40px; } }
@media (min-width: 900px) { .start-logo { display: none; } }

/* -- Anfrageformular: Abschnitte -- */
.anfrage-abschnitt { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--r-karte); background: var(--taupe); }
.anfrage-abschnitt h2 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.anfrage-abschnitt h3 { margin: 4px 0 0; font-size: 17px; font-weight: 500; }
.anfrage-abschnitt .hinweis { background: var(--eierschale); }
.anfrage-abschnitt select, .anfrage-abschnitt .feld input, .anfrage-abschnitt .feld textarea { background-color: var(--eierschale); }
.anfrage-fragen textarea { min-height: 64px; }
.anfrage-dateien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.anfrage-dateien:empty { display: none; }
.anfrage-dateien li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--eierschale); overflow-wrap: anywhere; }

.anamnese-zeile { break-inside: avoid; page-break-inside: avoid; padding: 2.5mm 0; border-bottom: .3mm solid #ccc; }
.anamnese-frage { font-weight: 700; margin-bottom: 1mm; }
.anamnese-antwort { white-space: pre-wrap; }
.anfrage-merkmale { display: flex; flex-wrap: wrap; gap: 6px; }
.anfrage-merkmale:empty { display: none; }

/* -- AVV -- */
.avv-parteien { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin: 4mm 0 6mm; }
.avv-paragraph h3 { font-size: 11pt; margin: 4mm 0 1.5mm; }
.avv-paragraph p { margin: 0 0 2mm; }
.avv-unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 10mm; break-inside: avoid; }
.avv-leer { height: 18mm; }

/* -- Ziehen & Sortieren -- */
.ziehgriff { flex: none; display: inline-grid; place-items: center; width: 36px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--asche); cursor: grab; touch-action: none; border-radius: 10px; }
.ziehgriff .icon { width: 20px; height: 20px; stroke-width: 3.2; }
.ziehgriff:hover, .ziehgriff:focus-visible { color: var(--tinte); background: var(--taupe); }
.zieht { position: relative; z-index: 5; box-shadow: 0 8px 24px rgba(0,0,0,.14); background: var(--eierschale); border-radius: 14px; cursor: grabbing; transition: none !important; }
.sortiert-gerade { user-select: none; -webkit-user-select: none; }
.sortiert-gerade > :not(.zieht) { transition: transform .12s; }
.katalog-zeile { display: flex; align-items: center; gap: 4px; }
.katalog-zeile > .liste-eintrag { flex: 1; min-width: 0; }
.katalog-gruppen { display: flex; flex-direction: column; gap: 24px; }
.katalog-edit-kopf { justify-content: flex-start; }
.katalog-edit-kopf h2 { flex: 1; }
@media (min-width: 900px) { .hauptnav ul li[data-id] { cursor: grab; } .hauptnav ul.sortiert-gerade li { cursor: grabbing; } }

.kalender-woche { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px) { .woche { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* -- Kalender: Zusätze, Fortbildung, Begegnung -- */
.termin-zusatz { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.termin-zusatz .abzeichen .icon { width: 13px; height: 13px; }
.termin-meiden { color: var(--rauch); display: inline-flex; }
.termin-meiden .icon { width: 15px; height: 15px; }
.termin.status-erledigt { border-left-color: var(--ok); }
.termin.status-nicht-erschienen { border-left-color: var(--rot); }
.termin-fortbildung { border-left-color: var(--stein-dunkel); background: var(--stein); box-shadow: none; }
.tag-gesperrt { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--rauch); }
.tag-gesperrt .icon { width: 15px; height: 15px; }

/* -- Suchzeile in Formularfeldern: kein zweiter Rahmen -- */
.feld .suchzeile .suchfeld { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; min-height: 52px; }
.feld .suchzeile { background: var(--eierschale); border-color: var(--stein-dunkel); border-radius: var(--r-eingabe); padding: 0 14px; }
.feld .suchzeile:focus-within { border-color: var(--tinte); box-shadow: 0 0 0 3px var(--stein); }

/* -- Zeitauswahl -- */
.zeit-wahl { position: relative; }
.zeit-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max(100%, 300px); max-width: calc(100vw - 32px); max-height: 340px; overflow-y: auto; padding: 12px; border-radius: 16px; background: var(--eierschale); border: 1px solid var(--stein); box-shadow: 0 12px 32px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 8px; }
.zeit-panel[hidden] { display: none !important; }
.zeit-raster { display: flex; flex-direction: column; gap: 4px; }
.zeit-zeile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.zeit-chip { min-height: 40px; padding: 0 6px; border: 1px solid transparent; border-radius: 10px; background: var(--taupe); color: var(--tinte); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.zeit-chip:hover, .zeit-chip:focus-visible { border-color: var(--tinte); outline: 0; }
.zeit-chip.frei { background: var(--eierschale); border-color: var(--marke); }
.zeit-chip.belegt { background: transparent; color: var(--asche); }
.zeit-chip.aktiv { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.zeit-legende { display: flex; gap: 6px; }
.zeit-legende .zeit-chip { min-height: 26px; padding: 0 10px; font-size: 12px; cursor: default; }

/* -- Fortbildung -- */
.fb-termine { display: flex; flex-direction: column; gap: 10px; }
.fb-termin { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.fb-termin .rund { margin-bottom: 4px; }
@media (max-width: 560px) { .fb-termin { grid-template-columns: 1fr 1fr auto; } .fb-termin > .feld:first-child { grid-column: 1 / -1; } }
.fb-termin-zeile.vorbei { color: var(--rauch); }
details.einladung { border: 1px solid var(--stein); border-radius: var(--r-eingabe); padding: 12px 16px; }
details.einladung summary { cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 8px; }
details.einladung[open] summary { margin-bottom: 12px; }
.einladung-text { font: inherit; width: 100%; padding: 12px 14px; border: 1px solid var(--stein-dunkel); border-radius: var(--r-eingabe); background: var(--eierschale); color: var(--tinte); resize: vertical; }
.fb-online { display: flex; flex-direction: column; gap: 14px; }
.fb-online > .knopf { align-self: flex-start; }
.fb-code { font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: .03em; }
.fb-link { overflow-wrap: anywhere; font-size: 14px; color: var(--rauch); }
.datei-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.datei-zeile { display: flex; align-items: center; gap: 12px; }
.datei-vorschau { flex: none; width: 96px; }
.datei-vorschau .beleg-bild img { max-height: 72px; width: 96px; object-fit: cover; }
.datei-vorschau .beleg-pdf { width: 96px; padding: 8px; font-size: 12px; }
.datei-vorschau .beleg-pdf span { display: none; }
.datei-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* -- Chips (Mehrfachauswahl) -- */
.chip-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-liste:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: var(--r-pille); background: var(--taupe); font-size: 14px; }
.chip button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--graphit); cursor: pointer; }
.chip button:hover { background: var(--stein); }
.chip .icon { width: 14px; height: 14px; }

/* -- Patient: Summen -- */
.patient-summen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.patient-summen > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--taupe); }
.patient-summen span { font-size: 13px; color: var(--rauch); }
.patient-summen strong { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.patient-summen small { font-size: 12px; color: var(--rauch); }
.patient-summen .offen strong { color: var(--rot); }
@media (max-width: 480px) { .patient-summen { grid-template-columns: 1fr 1fr; } .patient-summen > div:first-child { grid-column: 1 / -1; } }
.fb-online .daten dt { align-self: center; }
.fb-online .daten dd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.chip-liste .chip { background: var(--eierschale); border: 1px solid var(--stein); }
#app h1, #app h2 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* Leistungen: Ziffer in eigener Spalte – Titel und Preise bündig */
.katalog-zeile .liste-eintrag:has(.katalog-ziffer) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ziffer haupt" ". neben"; column-gap: 12px; }
.katalog-ziffer { grid-area: ziffer; justify-self: start; }

/* -- Heute: aufgeräumt -- */
.einrichtung-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; border-radius: 16px; background: var(--taupe); }
.einrichtung-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px; color: inherit; text-decoration: none; border-radius: 12px; }
.einrichtung-link:hover { background: var(--stein); }
.einrichtung-link .aufgabe-text { flex: 1; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.abschnitt-kopf a { font-size: 14px; color: var(--graphit); }
.sicherung-leise { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rauch); text-decoration: none; align-self: flex-start; }
.sicherung-leise .icon { width: 15px; height: 15px; color: var(--ok); }

/* -- Tabellen (Import-Vorschau) -- */
.tabelle-rahmen { overflow-x: auto; border-radius: 12px; background: var(--eierschale); border: 1px solid var(--stein); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabelle th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--rauch); padding: 10px 12px; border-bottom: 1px solid var(--stein); white-space: nowrap; }
.tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--taupe); white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl-rechts { text-align: right; }
.tabelle .fehlt { color: var(--rot); }
.vd-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* -- Mobil: Tippflächen ≥ 40 px, lange Wörter umbrechen -- */
.seite { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.knopf { max-width: 100%; }
.knopf > span { min-width: 0; overflow-wrap: anywhere; }
.frei-zeit { min-height: 40px; }
.abschnitt-kopf a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; margin-right: -10px; border-radius: 10px; }
.fristen-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 40px; }
.zahlungen li > a { display: inline-flex; align-items: center; min-height: 40px; }
#app summary { min-height: 44px; display: flex; align-items: center; }
@media (min-width: 900px) { .hauptnav-marke { min-height: 48px; } }
.liste-eintrag { grid-template-columns: minmax(0, 1fr) auto; }
.liste-haupt > strong, .kachel span, .kachel small { min-width: 0; overflow-wrap: anywhere; }
/* Tab-Leiste: auch auf kleinen Handys ganze Wörter */
.hauptnav-link { letter-spacing: -.01em; }
@media (max-width: 360px) { .hauptnav-link { font-size: 10px; } .hauptnav-link .icon { padding: 4px 12px; } }
.check-zeile > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .hauptnav-link { font-size: 10.5px; } }

/* Sperre: Inhalt im Hintergrund und hinter der Sperre nicht sichtbar */
body.verborgen #app, body.gesperrt #app { visibility: hidden; }
body.verborgen > * { visibility: hidden !important; } /* im Hintergrund (App-Umschalter) gar nichts zeigen */
/* iOS: Eingabefelder mit < 16 px lösen beim Antippen einen Zoom aus */
.farb-eigene input, input, select, textarea { font-size: max(16px, 1em); }
.zeit-chip, .chip button { font-size: 14px; }

/* -- Handy im Querformat: feste Leisten kompakt, damit Platz für Inhalt bleibt -- */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
  .hauptnav { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); padding-left: calc(2px + env(safe-area-inset-left)); padding-right: calc(2px + env(safe-area-inset-right)); }
  .hauptnav-link { flex-direction: row; min-height: 44px; gap: 6px; font-size: 12px; }
  .hauptnav-link .icon { padding: 3px 8px; }
  .shell-inhalt { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .kopfzeile { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  /* Kerbe (Notch) seitlich: Inhalt nicht darunter */
  .seite { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* -- Touch (iPad/iPhone) -- */
/* kein Doppeltipp-Zoom auf Bedienelementen (Ziehgriffe behalten touch-action: none) */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
/* langes Drücken in Leiste und Listen: kein iOS-Vorschaumenü (stört das Sortieren per Ziehen) */
.hauptnav a, .ziehgriff, .nav-zeile, .katalog-zeile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ziehgriff { touch-action: none; }
/* Antippen ohne grauen Blitz, Rückmeldung über :active */
* { -webkit-tap-highlight-color: transparent; }
.knopf:active, .liste-eintrag:active, .kachel:active, .aufgabe:active { transform: scale(.985); }

/* -- Anfrageformular: Datenschutzinformation und Impressum -- */
.anfrage-fuss { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.anfrage-info { border-top: 1px solid var(--stein); padding-top: 4px; min-width: 0; }
.anfrage-info summary { font-weight: 500; color: var(--graphit); cursor: pointer; }
.anfrage-info h3 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: var(--tinte); }
.anfrage-info p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--graphit); overflow-wrap: anywhere; max-width: 65ch; }