/* Praxis-App – ruhig, groß, gut lesbar.
   Keine externen Schriften (Datenschutz): nur Systemschriften. */

:root {
  --papier: #f6f3ec;
  --karte: #fffdf8;
  --linie: #e3ddd0;
  --linie-stark: #cfc6b4;
  --tinte: #2a2925;
  --grau: #6c675d;
  --grau-hell: #8d877b;

  --jade: #2f6f60;
  --jade-hell: #e3eee9;
  --ocker: #9a6a1f;
  --ocker-hell: #f5ead6;
  --pflaume: #75436a;
  --pflaume-hell: #f1e5ee;
  --zinnober: #a83a28;
  --zinnober-hell: #f8e4df;

  --heiss: #b23a26; --warm: #c9772c; --neutral: #8d877b; --kuehl: #3e7f96; --kalt: #2c5384;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { font-size: 19px; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--jade); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .8em; }
.leise { color: var(--grau); }
.klein { font-size: .85rem; }

/* ---------- Kopfzeile ---------- */
.kopf {
  background: var(--karte); border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.kopf-innen {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 32px; height: 72px;
}
.marke { font-family: var(--serif); font-size: 1.15rem; color: var(--tinte); white-space: nowrap; }
.marke span { color: var(--jade); }
.marke:hover { text-decoration: none; }
.hauptnav { display: flex; gap: 6px; flex: 1; }
.hauptnav a {
  padding: 10px 20px; border-radius: 999px; color: var(--tinte); font-size: 1.02rem;
}
.hauptnav a:hover { background: var(--papier); text-decoration: none; }
.hauptnav a.aktiv { background: var(--jade); color: #fff; }
.benutzer { font-size: .85rem; color: var(--grau); display: flex; gap: 14px; align-items: center; }
.benutzer form { margin: 0; }
.benutzer button { background: none; border: 0; color: var(--jade); font: inherit; cursor: pointer; padding: 0; }

main { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; }

/* ---------- Meldungen ---------- */
.meldung {
  padding: 14px 20px; border-radius: var(--radius); margin-bottom: 22px;
  background: var(--jade-hell); border-left: 5px solid var(--jade);
}
.meldung.warning, .meldung.error { background: var(--zinnober-hell); border-color: var(--zinnober); }

/* ---------- Knöpfe ---------- */
.knopf, button.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius); border: 1px solid var(--jade);
  background: var(--jade); color: #fff; font: inherit; font-size: 1rem; cursor: pointer;
  text-decoration: none; line-height: 1.2;
}
.knopf:hover { filter: brightness(1.08); text-decoration: none; }
.knopf.zweit { background: var(--karte); color: var(--jade); }
.knopf.zweit:hover { background: var(--jade-hell); filter: none; }
.knopf.gefahr { background: var(--karte); color: var(--zinnober); border-color: var(--zinnober); }
.knopf.klein { padding: 7px 14px; font-size: .9rem; }
.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Karten / Flächen ---------- */
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 26px 28px; margin-bottom: 22px;
}
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.seitenkopf h1 { margin: 0; }
.zurueck { display: inline-block; margin-bottom: 12px; font-size: .9rem; }

/* ---------- Suche ---------- */
.suche { display: flex; gap: 10px; margin-bottom: 26px; }
.suche input[type=search] {
  flex: 1; font-size: 1.15rem; padding: 16px 20px; border-radius: 12px;
  border: 1px solid var(--linie-stark); background: var(--karte);
}
.suche input[type=search]:focus { outline: 3px solid var(--jade-hell); border-color: var(--jade); }

/* ---------- Startseite ---------- */
.gruss { font-family: var(--serif); font-size: 2.1rem; margin-bottom: 4px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 34px; }
.kachel {
  display: block; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 24px; color: var(--tinte);
}
.kachel:hover { border-color: var(--jade); text-decoration: none; }
.kachel .zahl { font-family: var(--serif); font-size: 2.2rem; color: var(--jade); line-height: 1; }
.kachel .titel { font-size: 1.05rem; margin-top: 8px; }
.kachel.hinweis .zahl { color: var(--zinnober); }

/* ---------- Listen ---------- */
.zeilen { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; }
.zeile {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 16px; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid var(--linie); color: var(--tinte);
}
.zeile:last-child { border-bottom: 0; }
a.zeile:hover { background: var(--papier); text-decoration: none; }
.zeile .name { font-size: 1.1rem; font-weight: 600; }
.zeile .neben { color: var(--grau); font-size: .9rem; }
.leer { padding: 40px; text-align: center; color: var(--grau); }

.umschalter { display: inline-flex; background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; padding: 4px; }
.umschalter a { padding: 6px 16px; border-radius: 999px; color: var(--grau); font-size: .9rem; }
.umschalter a.aktiv { background: var(--tinte); color: #fff; }
.umschalter a:hover { text-decoration: none; }

/* ---------- Patientenkarte ---------- */
.patientkopf { display: flex; gap: 24px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.monogramm {
  width: 72px; height: 72px; border-radius: 50%; background: var(--jade-hell); color: var(--jade);
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.6rem; flex-shrink: 0;
}
.patientkopf h1 { margin: 0; }
.eckdaten { color: var(--grau); display: flex; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.diagnosebanner {
  background: var(--karte); border: 1px solid var(--linie); border-left: 5px solid var(--pflaume);
  border-radius: 10px; padding: 14px 20px; margin: 18px 0 8px;
}
.diagnosebanner .etikett { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pflaume); }
.diagnosebanner .text { font-family: var(--serif); font-size: 1.2rem; }

.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie-stark); margin: 26px 0 26px; flex-wrap: wrap; }
.reiter a {
  padding: 12px 22px; color: var(--grau); border-bottom: 3px solid transparent; margin-bottom: -1px; font-size: 1.02rem;
}
.reiter a.aktiv { color: var(--tinte); border-bottom-color: var(--jade); font-weight: 600; }
.reiter a:hover { text-decoration: none; color: var(--tinte); }
.reiter .anz { font-size: .8rem; color: var(--grau-hell); margin-left: 4px; }

/* Verlauf als Zeitstrahl */
.zeitstrahl { position: relative; padding-left: 34px; }
.zeitstrahl::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--linie-stark); }
.station { position: relative; margin-bottom: 20px; }
.station::before {
  content: ""; position: absolute; left: -30px; top: 26px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--karte); border: 3px solid var(--jade);
}
.station.ERST::before { background: var(--jade); }
.station.CLEARING::before { border-color: var(--pflaume); }
.station .karte { margin: 0; padding: 20px 24px; }
.station-kopf { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; align-items: baseline; }
.station-datum { font-family: var(--serif); font-size: 1.2rem; }
.art { font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--jade-hell); color: var(--jade); margin-left: 10px; vertical-align: middle; }
.art.CLEARING { background: var(--pflaume-hell); color: var(--pflaume); }
.art.TELEFON { background: var(--papier); color: var(--grau); }
.feldliste { display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px; margin: 0; }
.feldliste dt { color: var(--grau); font-size: .88rem; padding-top: 2px; }
.feldliste dd { margin: 0; white-space: pre-line; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .85rem;
  background: var(--papier); border: 1px solid var(--linie); color: var(--tinte);
}
a.chip:hover { text-decoration: none; border-color: var(--jade); }
.chip.BEHANDLUNG { background: var(--jade-hell); border-color: transparent; color: var(--jade); }
.chip.ERNAEHRUNG { background: var(--ocker-hell); border-color: transparent; color: var(--ocker); }
.chip.HEILMITTEL { background: var(--pflaume-hell); border-color: transparent; color: var(--pflaume); }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.zweispaltig .karte { margin: 0; }

/* ---------- Formulare ---------- */
.formular { max-width: 860px; }
.formular .feld { margin-bottom: 20px; }
.formular label, .feld > label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.formular .hilfe { color: var(--grau); font-size: .82rem; margin-top: 4px; }
.formular .fehler, .errorlist { color: var(--zinnober); font-size: .88rem; list-style: none; padding: 0; margin: 4px 0; }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=number], input[type=password],
input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 14px; border-radius: 8px;
  border: 1px solid var(--linie-stark); background: #fff; color: var(--tinte);
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--jade-hell); border-color: var(--jade); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--jade); vertical-align: middle; }
.raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.raster .breit { grid-column: 1 / -1; }
.abschnitt { font-family: var(--serif); font-size: 1.2rem; margin: 28px 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.abschnitt:first-child { margin-top: 0; }
.aktionen { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linie); }

.formular-mit-seite { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.seitenblick { position: sticky; top: 100px; }
.seitenblick .karte { padding: 20px; font-size: .92rem; }
.seitenblick h3 { font-size: 1rem; color: var(--grau); text-transform: uppercase; letter-spacing: .06em; font-family: var(--sans); }

.katalogwahl { display: grid; gap: 16px; }
.katalogwahl .gruppe-titel { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); margin-bottom: 6px; }
.katalogwahl .chips label {
  font-weight: 400; display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linie-stark); background: #fff; font-size: .9rem; margin: 0;
}
.katalogwahl input { display: none; }
.katalogwahl label:has(input:checked) { background: var(--jade); border-color: var(--jade); color: #fff; }
.katalogwahl .ERNAEHRUNG label:has(input:checked) { background: var(--ocker); border-color: var(--ocker); }
.katalogwahl .HEILMITTEL label:has(input:checked) { background: var(--pflaume); border-color: var(--pflaume); }

/* ---------- Katalog ---------- */
.katalog-kopf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; }
.kat-kachel {
  border-radius: 16px; padding: 26px 26px 22px; color: var(--tinte); display: block;
  border: 2px solid transparent; position: relative; overflow: hidden;
}
.kat-kachel:hover { text-decoration: none; }
.kat-kachel .zeichen { font-family: var(--serif); font-size: 2.6rem; line-height: 1; opacity: .9; }
.kat-kachel .titel { font-family: var(--serif); font-size: 1.35rem; margin-top: 12px; }
.kat-kachel .anz { font-size: .88rem; color: var(--grau); }
.kat-kachel.jade { background: var(--jade-hell); } .kat-kachel.jade .zeichen { color: var(--jade); }
.kat-kachel.ocker { background: var(--ocker-hell); } .kat-kachel.ocker .zeichen { color: var(--ocker); }
.kat-kachel.pflaume { background: var(--pflaume-hell); } .kat-kachel.pflaume .zeichen { color: var(--pflaume); }
.kat-kachel.aktiv.jade { border-color: var(--jade); }
.kat-kachel.aktiv.ocker { border-color: var(--ocker); }
.kat-kachel.aktiv.pflaume { border-color: var(--pflaume); }

.filterleiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -6px 0 26px; }
.filterleiste .etikett { color: var(--grau); font-size: .88rem; margin-right: 4px; }
.temp-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--karte); border: 1px solid var(--linie); color: var(--tinte); font-size: .88rem; }
.temp-knopf:hover { text-decoration: none; border-color: var(--grau); }
.temp-knopf.aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punkt.HEISS { background: var(--heiss); } .punkt.WARM { background: var(--warm); } .punkt.NEUTRAL { background: var(--neutral); }
.punkt.KUEHL { background: var(--kuehl); } .punkt.KALT { background: var(--kalt); }

.gruppenkopf { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.gruppenkopf h2 { margin: 0; }
.gruppenkopf .kat { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); }
.katalog-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.eintrag-karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 20px 22px 18px;
  color: var(--tinte); display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--linie-stark);
}
.eintrag-karte:hover { text-decoration: none; border-color: var(--linie-stark); box-shadow: 0 6px 20px rgba(60,50,30,.07); }
.eintrag-karte.BEHANDLUNG { border-top-color: var(--jade); }
.eintrag-karte.ERNAEHRUNG { border-top-color: var(--ocker); }
.eintrag-karte.HEILMITTEL { border-top-color: var(--pflaume); }
.eintrag-karte .name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.eintrag-karte .zweit { color: var(--grau); font-size: .85rem; font-style: italic; margin-top: -4px; }
.eintrag-karte .kurz { font-size: .92rem; color: #45423b; flex: 1; }
.eigenschaften { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--grau); align-items: center; }
.eigenschaften .temp { display: inline-flex; align-items: center; gap: 6px; color: var(--tinte); }
.stern { color: var(--ocker); }

.eintrag-seite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.eintrag-titel { border-left: 6px solid var(--linie-stark); padding-left: 22px; margin-bottom: 28px; }
.eintrag-titel.jade { border-color: var(--jade); }
.eintrag-titel.ocker { border-color: var(--ocker); }
.eintrag-titel.pflaume { border-color: var(--pflaume); }
.eintrag-titel h1 { font-size: 2.4rem; margin-bottom: 4px; }
.eintrag-titel .zweit { font-style: italic; color: var(--grau); font-size: 1.1rem; }
.eintrag-titel .kurz { font-size: 1.15rem; margin-top: 12px; max-width: 46em; }
.textblock { margin-bottom: 26px; }
.textblock h2 { font-size: 1.15rem; color: var(--grau); font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin-bottom: 8px; }
.textblock p { white-space: pre-line; font-size: 1.05rem; }
.textblock.vorsicht { background: var(--zinnober-hell); border-radius: 12px; padding: 18px 22px; }
.textblock.vorsicht h2 { color: var(--zinnober); }
.textblock.notiz { background: #fff8e3; border-radius: 12px; padding: 18px 22px; }
.profil { display: grid; gap: 16px; }
.profil .etikett { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); margin-bottom: 4px; }
.temperaturskala { display: flex; gap: 4px; margin-top: 6px; }
.temperaturskala span { flex: 1; height: 8px; border-radius: 4px; opacity: .18; }
.temperaturskala span.an { opacity: 1; }
.temperaturskala .HEISS { background: var(--heiss); } .temperaturskala .WARM { background: var(--warm); }
.temperaturskala .NEUTRAL { background: var(--neutral); } .temperaturskala .KUEHL { background: var(--kuehl); }
.temperaturskala .KALT { background: var(--kalt); }

/* ---------- Rechnungen ---------- */
.betrag { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.status { font-size: .8rem; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.status.ENTWURF { background: var(--papier); color: var(--grau); border: 1px dashed var(--linie-stark); }
.status.OFFEN { background: var(--ocker-hell); color: var(--ocker); }
.status.BEZAHLT { background: var(--jade-hell); color: var(--jade); }
.status.STORNO { background: var(--papier); color: var(--grau-hell); text-decoration: line-through; }
.status.UEBERFAELLIG { background: var(--zinnober-hell); color: var(--zinnober); }
.zeile.rechnung { grid-template-columns: 120px 1.4fr 140px 130px 130px; }

table.positionen { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.positionen th { text-align: left; font-weight: 600; color: var(--grau); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 2px solid var(--linie); }
table.positionen td { padding: 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.positionen tfoot td { border: 0; font-weight: 700; font-size: 1.1rem; padding-top: 16px; }
table.positionen input, table.positionen select { padding: 8px 10px; font-size: .92rem; }
table.positionen .loeschen { text-align: center; }

.rechnungsblatt {
  background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 50px 56px; max-width: 860px;
  box-shadow: 0 10px 30px rgba(60,50,30,.06);
}

/* ---------- Anmelden ---------- */
.anmelden { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.anmelden .karte { width: 100%; max-width: 520px; padding: 44px 44px 36px; }
.anmelden h1 { font-size: 1.6rem; }

@media (max-width: 900px) {
  html { font-size: 18px; }
  .kopf-innen { gap: 14px; height: auto; padding: 12px 16px; flex-wrap: wrap; }
  .hauptnav { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 22px 16px 60px; }
  .zeile, .zeile.rechnung { grid-template-columns: 1fr auto; }
  .zeile .nur-breit { display: none; }
  .raster, .zweispaltig, .katalog-kopf, .formular-mit-seite, .eintrag-seite { grid-template-columns: 1fr; }
  .feldliste { grid-template-columns: 1fr; }
  .feldliste dt { padding-top: 8px; }
  .seitenblick { position: static; }
  .rechnungsblatt { padding: 26px 20px; }
}

@media print {
  .kopf, .nicht-drucken, .knopfreihe, .zurueck { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
  .karte, .rechnungsblatt { border: 0; box-shadow: none; padding: 0; }
}

.zwei-text .feld.breit { grid-column: auto; }
@media (max-width: 900px) { .zwei-text .feld.breit { grid-column: 1 / -1; } }
.eintrag-karte .gruppe { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grau-hell); margin-bottom: -4px; }
table.positionen th.betrag { text-align: right; }

/* Logo */
.marke { display: inline-flex; align-items: center; gap: 12px; }
.marke img { height: 42px; width: auto; max-width: 180px; object-fit: contain; }
.anmelde-kopf { text-align: center; margin-bottom: 30px; }
.anmelde-logo { display: block; max-height: 260px; max-width: 100%; margin: 0 auto 18px; object-fit: contain; }
.anmelde-name { font-family: var(--serif); font-size: 2.1rem; color: var(--jade); line-height: 1.15; }
.anmelde-text { color: var(--grau); font-size: .95rem; margin-top: 6px; }
.rechnungsblatt .briefkopf .logo { max-height: 70px; max-width: 240px; display: block; margin: 0 0 8px auto; }

/* Versand */
.versand-leiste { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: -6px 0 22px; }
.versand-liste { font-size: .9rem; color: var(--grau); margin: 0 0 22px; padding: 0; list-style: none; }
.versand-liste li { padding: 3px 0; }
.vorschau-nummer { font-family: var(--serif); font-size: 1.05rem; color: var(--tinte); }
.hinweisbox { background: var(--ocker-hell); border-left: 5px solid var(--ocker); border-radius: 10px; padding: 14px 20px; margin-bottom: 20px; }
.hinweisbox.rot { background: var(--zinnober-hell); border-color: var(--zinnober); }
.marke .marke-text { color: var(--tinte); }
.marke .marke-text span { color: var(--jade); }
.benutzer > span { white-space: nowrap; }

.app-fuss { max-width: 1180px; margin: -50px auto 0; padding: 0 24px 30px; font-size: .78rem; text-align: right; }
.app-fuss a { color: var(--grau-hell); }
.aenderungen h2 { font-size: 1.2rem; margin: 22px 0 6px; }
.aenderungen ul { margin: 0 0 6px; padding-left: 22px; }
.aenderungen p { color: var(--grau); font-size: .9rem; }
.kopf-innen { gap: 22px; }

/* Neue Katalog-Rubriken */
:root { --himmel: #2f6390; --himmel-hell: #e3ecf4; --salbei: #5b7a3a; --salbei-hell: #eaf0e1; }
.kat-kachel.himmel { background: var(--himmel-hell); } .kat-kachel.himmel .zeichen { color: var(--himmel); }
.kat-kachel.salbei { background: var(--salbei-hell); } .kat-kachel.salbei .zeichen { color: var(--salbei); }
.kat-kachel.zinnober { background: var(--zinnober-hell); } .kat-kachel.zinnober .zeichen { color: var(--zinnober); }
.kat-kachel.aktiv.himmel { border-color: var(--himmel); }
.kat-kachel.aktiv.salbei { border-color: var(--salbei); }
.kat-kachel.aktiv.zinnober { border-color: var(--zinnober); }
.eintrag-karte.ARZNEI { border-top-color: var(--zinnober); }
.eintrag-karte.HOMOEOPATHIE { border-top-color: var(--salbei); }
.eintrag-karte.ERGAENZUNG { border-top-color: var(--himmel); }
.chip.ARZNEI { background: var(--zinnober-hell); border-color: transparent; color: var(--zinnober); }
.chip.HOMOEOPATHIE { background: var(--salbei-hell); border-color: transparent; color: var(--salbei); }
.chip.ERGAENZUNG { background: var(--himmel-hell); border-color: transparent; color: var(--himmel); }
.katalogwahl .ARZNEI label:has(input:checked) { background: var(--zinnober); border-color: var(--zinnober); }
.katalogwahl .HOMOEOPATHIE label:has(input:checked) { background: var(--salbei); border-color: var(--salbei); }
.katalogwahl .ERGAENZUNG label:has(input:checked) { background: var(--himmel); border-color: var(--himmel); }
.eintrag-titel.himmel { border-color: var(--himmel); }
.eintrag-titel.salbei { border-color: var(--salbei); }
.eintrag-titel.zinnober { border-color: var(--zinnober); }
.eintrag-karte .produkt { font-size: .82rem; color: var(--tinte); background: var(--papier); border-radius: 6px; padding: 4px 8px; }

/* Auswahl */
.karte-huelle { position: relative; display: flex; }
.karte-huelle .eintrag-karte { flex: 1; padding-top: 20px; }
.karte-huelle .auswahl-form { position: absolute; top: 12px; right: 12px; z-index: 2; }
.auswahl-form { margin: 0; display: inline-block; }
.auswahl-knopf { font: inherit; font-size: .78rem; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--grau); white-space: nowrap; }
.auswahl-knopf:hover { border-color: var(--jade); color: var(--jade); }
.auswahl-knopf.an { background: var(--jade); border-color: var(--jade); color: #fff; }
.auswahl-knopf.gross { font-size: .95rem; padding: 8px 16px; }
.auswahl-leiste { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  display: flex; gap: 14px; align-items: center; background: var(--tinte); color: #fff;
  padding: 10px 12px 10px 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.auswahl-leiste.leer { display: none; }
.auswahl-leiste form { margin: 0; }
.auswahl-leiste .knopf { padding: 8px 18px; }
.auswahl-leiste .knopf.zweit { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

/* Recherche */
.quellen { display: grid; gap: 14px; }
.quelle { margin: 0; padding: 20px 24px; }
.quelle-kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.quelle-titel { font-family: var(--serif); font-size: 1.2rem; color: var(--tinte); }
.quelle-kommentar { margin: 10px 0 6px; padding: 10px 14px; background: #fff8e3; border-radius: 8px; font-size: .95rem; }
.quelle-kurz { margin-bottom: 10px; }
.chip-aktiv { background: var(--tinte); color: #fff; }

/* Listen-Editor */
.listen-zeilen { display: grid; gap: 12px; margin-bottom: 22px; }
.listen-zeile { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: start; margin: 0; padding: 18px 20px; }
.listen-nr { font-family: var(--serif); font-size: 1.6rem; color: var(--jade); text-align: center; }
.zeilen-titel { font-weight: 600; }
.listen-zeile .weg { font-size: .85rem; color: var(--zinnober); white-space: nowrap; font-weight: 400; }
.liste-punkte { padding-left: 22px; }
@media (max-width: 900px) {
  .listen-zeile { grid-template-columns: 1fr; }
  .listen-nr { text-align: left; }
  .auswahl-leiste { left: 12px; right: 12px; transform: none; justify-content: space-between; }
}
.hauptnav a { padding: 10px 16px; }
.kopf-innen { gap: 18px; }

/* Geburtstags-Hinweis */
.hinweis-geburtstag { display: flex; align-items: center; gap: 14px; background: #fff3d6; border: 1px solid #f0d89a;
  border-radius: 12px; padding: 12px 14px 12px 18px; margin-bottom: 18px; font-size: 1.02rem; }
.hinweis-geburtstag .kuchen { font-size: 1.5rem; }
.hinweis-geburtstag > span:nth-child(2) { flex: 1; }
.hinweis-weg { margin: 0; }
.hinweis-weg button { border: 0; background: transparent; font-size: 1.7rem; line-height: 1; color: var(--grau);
  cursor: pointer; padding: 2px 10px; border-radius: 8px; }
.hinweis-weg button:hover { background: rgba(0,0,0,.06); color: var(--tinte); }

/* Punkte-Schnellauswahl in der Sitzung */
.punkte-gruppe { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.punkte-titel { font-size: .8rem; color: var(--grau); white-space: nowrap; min-width: 110px; }
.punkt-chip { font: inherit; font-size: .9rem; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie-stark); background: #fff; color: var(--tinte); }
.punkt-chip:hover { border-color: var(--jade); }
.punkt-chip.an { background: var(--jade-hell); border-color: var(--jade); color: var(--jade); font-weight: 600; }
/* gewählte Katalog-Einträge: helle Füllung, dunkle Schrift – gut lesbar */
.katalogwahl label:has(input:checked) { background: var(--jade-hell); border-color: var(--jade); color: var(--jade); font-weight: 600; }
.katalogwahl .ERNAEHRUNG label:has(input:checked) { background: var(--ocker-hell); border-color: var(--ocker); color: var(--ocker); }
.katalogwahl .HEILMITTEL label:has(input:checked) { background: var(--pflaume-hell); border-color: var(--pflaume); color: var(--pflaume); }
.katalogwahl .ARZNEI label:has(input:checked) { background: var(--zinnober-hell); border-color: var(--zinnober); color: var(--zinnober); }
.katalogwahl .HOMOEOPATHIE label:has(input:checked) { background: var(--salbei-hell); border-color: var(--salbei); color: var(--salbei); }
.katalogwahl .ERGAENZUNG label:has(input:checked) { background: var(--himmel-hell); border-color: var(--himmel); color: var(--himmel); }
.katalogwahl label:has(input:checked)::before { content: "✓ "; }
@media (max-width: 900px) { .punkte-gruppe { flex-direction: column; gap: 4px; } }

/* Rechnung bearbeiten: GOÄ-Schnellliste */
.rechnung-arbeitsflaeche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; margin-bottom: 22px; }
.goae-liste { position: sticky; top: 90px; padding: 18px; max-height: calc(100vh - 110px); overflow-y: auto; }
.goae-liste h3 { font-size: 1rem; margin-bottom: 10px; }
.goae-liste .feld { margin-bottom: 12px; }
.goae-knopf { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; width: 100%; text-align: left; font: inherit;
  font-size: .86rem; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px;
  margin-bottom: 6px; cursor: pointer; color: var(--tinte); line-height: 1.3; }
.goae-knopf:hover { border-color: var(--jade); background: var(--jade-hell); }
.goae-knopf:active { transform: scale(.98); }
.goae-nr { font-weight: 700; color: var(--jade); }
.goae-betrag { color: var(--grau); white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.pos.neu { background: var(--jade-hell); transition: background .8s; }
.zeile-weg { border: 0; background: transparent; font-size: 1.4rem; color: var(--zinnober); cursor: pointer; line-height: 1; }
.leer-hinweis { padding: 16px 0 0; }
@media (max-width: 1000px) { .rechnung-arbeitsflaeche { grid-template-columns: 1fr; } .goae-liste { position: static; max-height: none; } }

/* Listen-Editor mit Standard-Empfehlungen */
.listen-arbeitsflaeche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.zeilen-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.standard-knopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  text-align: left; font: inherit; font-size: .9rem; background: #fff; border: 1px solid var(--linie);
  border-left: 4px solid var(--linie-stark); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; color: var(--tinte); }
.standard-knopf:hover { border-color: var(--jade); background: var(--jade-hell); }
.standard-knopf .plus { font-size: 1.3rem; color: var(--jade); }
.standard-knopf.ARZNEI { border-left-color: var(--zinnober); } .standard-knopf.HOMOEOPATHIE { border-left-color: var(--salbei); }
.standard-knopf.ERGAENZUNG { border-left-color: var(--himmel); } .standard-knopf.HEILMITTEL { border-left-color: var(--pflaume); }
.standard-knopf.ERNAEHRUNG { border-left-color: var(--ocker); } .standard-knopf.BEHANDLUNG { border-left-color: var(--jade); }
.listen-zeile.neu { background: var(--jade-hell); transition: background .8s; }
.lp-bezug { font-size: .9rem; margin-top: 2px; }
@media (max-width: 1000px) { .listen-arbeitsflaeche, .zeilen-unten { grid-template-columns: 1fr; } }

/* ---------- Terminkalender ---------- */
:root { --min: 1.4px; }
.kal-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.kal-nav { display: flex; gap: 8px; align-items: center; }
.kal-springen { margin: 0; }
.kal-springen input { width: auto; padding: 7px 10px; font-size: .9rem; }
.kal-titel { font-size: 1.7rem; margin-bottom: 4px; }
.heute-marke { font-family: var(--sans); font-size: .8rem; background: var(--jade); color: #fff; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.kal-tag { display: grid; grid-template-columns: 56px 1fr; margin-top: 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 14px 14px 6px; }
.kal-zeiten { position: relative; }
.kal-stunde { position: absolute; right: 8px; transform: translateY(-50%); font-size: .78rem; color: var(--grau); }
.kal-stunde:first-child { transform: none; }
.kal-spalte { position: relative; border-left: 1px solid var(--linie); cursor: copy; }
.kal-spalte.heute { background: #fbf6e8; }
.kal-linie { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linie); }
.kal-linie::after { content: ""; position: absolute; left: 0; right: 0; top: calc(30 * var(--min)); border-top: 1px dashed #efe9dc; }
.kal-termin { position: absolute; border-radius: 7px; padding: 3px 8px; overflow: hidden; color: var(--tinte);
  background: var(--jade-hell); border-left: 4px solid var(--jade); font-size: .85rem; line-height: 1.25; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); display: flex; flex-direction: column; }
.kal-termin:hover { text-decoration: none; filter: brightness(.97); z-index: 3; }
.kal-termin .kt-zeit { font-size: .75rem; color: var(--grau); }
.kal-termin .kt-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-termin .kt-art { font-size: .75rem; color: var(--grau); }
.kal-termin.ERST { background: #dcebe5; border-left-color: #1f5a4c; }
.kal-termin.CLEARING { background: var(--pflaume-hell); border-left-color: var(--pflaume); }
.kal-termin.TELEFON { background: var(--himmel-hell); border-left-color: var(--himmel); }
.kal-termin.BLOCK { background: repeating-linear-gradient(45deg, #efebe3, #efebe3 6px, #f6f3ec 6px, #f6f3ec 12px); border-left-color: var(--grau-hell); }
.kal-termin.storniert, .kal-mtermin.storniert { opacity: .5; text-decoration: line-through; }
.kal-woche { display: grid; grid-template-columns: 56px repeat(var(--tage), minmax(0, 1fr)); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 14px; padding: 10px 10px 14px 6px; margin-top: 16px; }
.kal-tagkopf { text-align: center; padding: 6px 4px 10px; color: var(--tinte); font-size: .92rem; border-left: 1px solid transparent; }
.kal-tagkopf:hover { text-decoration: none; color: var(--jade); }
.kal-tagkopf.heute { color: var(--jade); }
.kal-tagkopf.heute strong { background: var(--jade); color: #fff; padding: 2px 8px; border-radius: 999px; }
.kal-woche .kal-termin { font-size: .78rem; padding: 2px 5px; }
.kal-monat { display: grid; grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; margin-top: 16px; }
.kal-mkopf { background: var(--papier); text-align: center; padding: 8px; font-size: .82rem; color: var(--grau); font-weight: 600; }
.kal-kw { background: var(--papier); color: var(--grau-hell); font-size: .78rem; text-align: center; padding-top: 10px; }
.kal-mtag { background: var(--karte); min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.kal-mtag.fremd { background: #f9f7f2; }
.kal-mtag.fremd .kal-mdatum { color: var(--grau-hell); }
.kal-mtag.heute { background: #fbf6e8; }
.kal-mdatum { font-weight: 600; color: var(--tinte); font-size: .95rem; margin-bottom: 2px; }
.kal-mtag.heute .kal-mdatum { color: var(--jade); }
.kal-mtermin { font-size: .76rem; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 5px; border-radius: 4px; border-left: 3px solid var(--jade); background: var(--jade-hell); }
.kal-mtermin.CLEARING { border-left-color: var(--pflaume); background: var(--pflaume-hell); }
.kal-mtermin.TELEFON { border-left-color: var(--himmel); background: var(--himmel-hell); }
.kal-mtermin.BLOCK { border-left-color: var(--grau-hell); background: #efebe3; }
.kal-mmehr { font-size: .74rem; color: var(--grau); }
.nur-drucken { display: none; }
.druck-tabelle { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.druck-tabelle th, .druck-tabelle td { border-bottom: 1px solid #bbb; padding: 6px 8px; text-align: left; vertical-align: top; }
.druck-tabelle tr.storniert td { color: #888; text-decoration: line-through; }
.termin-heute { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; }
@media (max-width: 900px) {
  .kal-woche { grid-template-columns: 40px repeat(var(--tage), minmax(0, 1fr)); padding-right: 4px; }
  .kal-woche .kal-termin .kt-zeit { display: none; }
  .kal-mtag { min-height: 70px; }
  .kal-mtermin { font-size: .68rem; }
}
@media print {
  .nur-drucken { display: table; }
  .auswahl-leiste, .hinweis-geburtstag, .app-fuss, .meldung { display: none !important; }
  .kal-titel { font-size: 16pt; }
  .kal-woche, .kal-monat, .kal-tag { border: 1px solid #999; box-shadow: none; }
  .kal-spalte, .kal-spalte.heute, .kal-mtag.heute { background: #fff !important; }
  .kal-termin, .kal-mtermin { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kal-mtag { min-height: 90px; }
}

.naechster-termin { color: var(--jade); font-weight: 600; }
.storniert-zeile .name, .storniert-zeile .neben { text-decoration: line-through; opacity: .6; }
.kal-termin.kurz { flex-direction: row; gap: 6px; align-items: baseline; padding-top: 1px; padding-bottom: 0; }
.kal-termin.kurz .kt-zeit { flex-shrink: 0; }
.nur-drucken-block { display: none; }
@media print { .nur-drucken-block { display: block; color: #666; margin: 0 0 4px; } }

/* Kopfzeile v1.8: Marke wie Menüpunkte, Katalog mit Untermenü */
.marke { font-family: var(--sans); font-size: 1.02rem; padding: 6px 12px 6px 0; border-radius: 999px; }
.marke .marke-text, .marke .marke-text span { color: #d99a00; font-weight: 600; }
.marke.aktiv .marke-text { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.mit-unter { position: relative; }
.mit-unter > a { display: inline-block; }
.mit-unter .pfeil { font-size: .75em; opacity: .7; }
.untermenue { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 30;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 30px rgba(60,50,30,.12); }
.mit-unter:hover .untermenue, .mit-unter:focus-within .untermenue { display: block; }
.untermenue a { display: block; border-radius: 8px; padding: 10px 14px; }
.hauptnav .untermenue a.aktiv { background: var(--papier); color: var(--tinte); }
.unter-reiter { display: flex; gap: 4px; margin: -8px 0 22px; border-bottom: 1px solid var(--linie-stark); }
.unter-reiter a { padding: 10px 18px; color: var(--grau); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.unter-reiter a.aktiv { color: var(--tinte); font-weight: 600; border-bottom-color: var(--jade); }
.unter-reiter a:hover { text-decoration: none; color: var(--tinte); }
@media (max-width: 900px) {
  .kopf-innen { gap: 8px 12px; }
  .benutzer { order: 2; margin-left: auto; }
  .hauptnav { order: 3; width: 100%; overflow: visible; flex-wrap: wrap; gap: 4px; }
  .hauptnav a { padding: 7px 12px; font-size: .95rem; }
  .mit-unter .pfeil, .untermenue { display: none !important; }
  .marke img { height: 34px; }
}
@media (max-width: 900px) { .hauptnav { flex: 1 1 100%; } }
.app-fuss .copyright { color: var(--grau-hell); }

/* v1.9.4: Edition vor dem Namen („Jade“), doppelt so groß, Jadegrün, nie unterstrichen */
.marke .marke-edition { font-size: 2.05em; line-height: 1; font-weight: 600; color: var(--jade);
  letter-spacing: .01em; text-decoration: none; margin-right: -4px; }
.marke:has(.marke-edition) { align-items: baseline; }
.marke:has(.marke-edition) img { align-self: center; }
@media (max-width: 600px) { .marke .marke-edition { font-size: 1.6em; } }