/* =====================================================================
   Home Angel Service · CRM
   Farbwelt: Schwarz, Weiss, Beige, Gold. Gold ausschliesslich als
   Akzent auf Ueberschriften, Knoepfen und Symbolen, nie flaechig.
   ===================================================================== */

:root{
  --schwarz:      #121212;
  --schwarz-weich:#1c1c1c;
  --schwarz-linie:#2a2a28;
  --gold:         #b58a35;
  --gold-hell:    #d8bd82;
  --gold-blass:   rgba(181,138,53,.12);
  --beige:        #f6f3ed;
  --beige-tief:   #ece7dd;
  --weiss:        #ffffff;
  --grau:         #6c6a65;
  --grau-hell:    #9a978f;
  --linie:        #e2ddd2;

  --rot:          #c0392b;
  --gelb:         #d4a316;
  --gruen:        #1f8a52;
  --rot-blass:    rgba(192,57,43,.10);
  --gelb-blass:   rgba(212,163,22,.12);
  --gruen-blass:  rgba(31,138,82,.10);

  --r:      14px;
  --r-klein: 9px;
  --schatten:      0 1px 2px rgba(18,18,18,.04), 0 8px 24px rgba(18,18,18,.06);
  --schatten-hoch: 0 12px 48px rgba(18,18,18,.16);
  --seitenleiste-breite: 244px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--beige); color:var(--schwarz);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.9;
     stroke-linecap:round; stroke-linejoin:round; }
h1,h2,h3{ margin:0; font-weight:650; letter-spacing:-.015em; }

/* --- Ladeschirm ---------------------------------------------------- */
.ladeschirm{
  position:fixed; inset:0; z-index:200; background:var(--beige);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.ladeschirm img{ width:190px; max-width:56vw; height:auto; }
.ladeschirm p{ margin:0; color:var(--grau); font-size:13.5px; }
.ladebalken{ width:190px; max-width:56vw; height:3px; background:var(--beige-tief);
  border-radius:99px; overflow:hidden; }
.ladebalken i{ display:block; height:100%; width:40%; border-radius:99px;
  background:linear-gradient(90deg,var(--gold-hell),var(--gold));
  animation:schieben 1.15s ease-in-out infinite; }
@keyframes schieben{ 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

/* --- Grundgeruest -------------------------------------------------- */
.huelle{ display:grid; grid-template-columns:var(--seitenleiste-breite) 1fr; min-height:100vh; }
.inhalt{ min-width:0; display:flex; flex-direction:column; }

/* --- Seitenleiste -------------------------------------------------- */
.seitenleiste{
  position:sticky; top:0; height:100vh; background:var(--schwarz); color:#e8e6e1;
  display:flex; flex-direction:column; padding:18px 14px 14px; z-index:40;
}
.marke{ background:var(--weiss); border-radius:11px; padding:9px 13px; margin-bottom:20px;
  display:flex; align-items:center; }
.marke img{ width:100%; height:auto; display:block; }
.navigation{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1;
  scrollbar-width:none; }
.navigation::-webkit-scrollbar{ display:none; }
.nav-gruppe{ padding:16px 12px 6px; font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#6f6c66; }
.nav-punkt{
  display:flex; align-items:center; gap:11px; padding:9.5px 12px; border-radius:9px;
  color:#c9c6c0; font-weight:550; font-size:14px; text-align:left; width:100%;
  transition:background .13s, color .13s;
}
.nav-punkt svg{ font-size:17px; color:var(--gold-hell); flex:none; }
.nav-punkt:hover{ background:rgba(255,255,255,.05); color:var(--weiss); }
.nav-punkt.aktiv{ background:var(--gold-blass); color:var(--weiss);
  box-shadow:inset 2.5px 0 0 var(--gold); }
.nav-punkt .zahl{ margin-left:auto; font-size:11.5px; font-weight:650; color:#8a8781;
  background:rgba(255,255,255,.06); padding:1.5px 7px; border-radius:99px; }
.nav-punkt.aktiv .zahl{ color:var(--gold-hell); background:rgba(181,138,53,.18); }

.seitenleiste-fuss{ border-top:1px solid var(--schwarz-linie); padding-top:12px; margin-top:8px;
  display:flex; flex-direction:column; gap:8px; }
.sync{ display:flex; align-items:center; gap:8px; font-size:12px; color:#8a8781; padding:0 12px; }
.sync i{ width:7px; height:7px; border-radius:99px; background:var(--gruen); flex:none;
  box-shadow:0 0 0 3px rgba(31,138,82,.18); }
.sync.getrennt i{ background:var(--gold); box-shadow:0 0 0 3px rgba(181,138,53,.2); }
.knopf-schlicht{ padding:9px 12px; border-radius:9px; color:#c9c6c0; font-size:13.5px;
  font-weight:550; text-align:left; }
.knopf-schlicht:hover{ background:rgba(255,255,255,.05); color:var(--weiss); }

/* --- Kopfzeile ----------------------------------------------------- */
.kopfzeile{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:12px 22px; background:rgba(246,243,237,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.menue-knopf{ display:none; font-size:21px; color:var(--schwarz); padding:6px; }

.suche{ position:relative; flex:1; max-width:560px; }
.suche-symbol{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:16px; color:var(--grau-hell); pointer-events:none; }
.suche input{
  width:100%; padding:10px 14px 10px 39px; border:1px solid var(--linie);
  border-radius:11px; background:var(--weiss); font-size:14px; outline:none;
  transition:border-color .13s, box-shadow .13s;
}
.suche input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.suche input:focus{ border-color:var(--gold); box-shadow:0 0 0 3.5px var(--gold-blass); }

.vorschlaege{
  position:absolute; top:calc(100% + 7px); left:0; right:0; max-height:min(62vh,460px);
  overflow-y:auto; background:var(--weiss); border:1px solid var(--linie);
  border-radius:13px; box-shadow:var(--schatten-hoch); z-index:60; padding:5px;
}
.vorschlag{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  cursor:pointer; width:100%; text-align:left; }
.vorschlag:hover,.vorschlag.markiert{ background:var(--beige); }
.vorschlag .titel{ font-weight:600; font-size:13.5px; }
.vorschlag .unter{ font-size:12px; color:var(--grau); }
.vorschlag mark{ background:var(--gold-blass); color:var(--schwarz); font-weight:700;
  border-radius:3px; padding:0 1px; }
.vorschlag-kopf{ padding:9px 11px 4px; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grau-hell); }
.vorschlag-leer{ padding:18px 12px; text-align:center; color:var(--grau); font-size:13px; }

/* --- Knoepfe ------------------------------------------------------- */
.knopf-gold, .knopf, .knopf-rand{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9.5px 15px; border-radius:10px; font-size:13.5px; font-weight:600;
  white-space:nowrap; transition:filter .13s, background .13s, border-color .13s;
}
.knopf-gold{ background:var(--gold); color:var(--weiss); box-shadow:0 2px 8px rgba(181,138,53,.28); }
.knopf-gold:hover{ filter:brightness(1.07); }
.knopf-gold svg{ font-size:16px; }
.knopf{ background:var(--schwarz); color:var(--weiss); }
.knopf:hover{ background:var(--schwarz-weich); }
.knopf-rand{ background:var(--weiss); border:1px solid var(--linie); color:var(--schwarz); }
.knopf-rand:hover{ border-color:var(--gold); color:var(--gold); }
.knopf-klein{ padding:6.5px 11px; font-size:12.5px; border-radius:8px; }
.knopf-gefahr{ color:var(--rot); }
.knopf-gefahr:hover{ border-color:var(--rot); background:var(--rot-blass); }
button[disabled]{ opacity:.45; pointer-events:none; }

/* --- Seiteninhalt -------------------------------------------------- */
.seite{ padding:24px 22px 60px; flex:1; min-width:0; }
.seiten-kopf{ display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.seiten-kopf h1{ font-size:25px; }
.seiten-kopf .unter{ color:var(--grau); font-size:13.5px; margin-top:3px; }
.seiten-kopf .rechts{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.karte{ background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r);
  box-shadow:var(--schatten); }
.karte-kopf{ display:flex; align-items:center; gap:10px; padding:15px 18px;
  border-bottom:1px solid var(--linie); }
.karte-kopf h2{ font-size:15px; }
.karte-kopf h2 svg{ color:var(--gold); font-size:16px; vertical-align:-2px; margin-right:6px; }
.karte-kopf .rechts{ margin-left:auto; display:flex; gap:7px; align-items:center; }
.karte-koerper{ padding:18px; }

.raster{ display:grid; gap:16px; }
.raster-4{ grid-template-columns:repeat(4,1fr); }
.raster-3{ grid-template-columns:repeat(3,1fr); }
.raster-2{ grid-template-columns:repeat(2,1fr); }
.spalten-2-1{ display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:16px; }

/* --- Kennzahlen ---------------------------------------------------- */
.kennzahl{ background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--schatten); position:relative; overflow:hidden; }
.kennzahl .beschriftung{ font-size:11.5px; font-weight:650; letter-spacing:.07em;
  text-transform:uppercase; color:var(--grau); display:flex; align-items:center; gap:6px; }
.kennzahl .wert{ font-size:29px; font-weight:680; letter-spacing:-.02em; margin-top:7px;
  font-variant-numeric:tabular-nums; }
.kennzahl .fuss{ font-size:12px; color:var(--grau); margin-top:2px; }
.kennzahl .punkt{ width:8px; height:8px; border-radius:99px; display:inline-block; }

/* --- Ampel --------------------------------------------------------- */
.ampel{ display:inline-flex; align-items:center; gap:6px; padding:3.5px 10px; border-radius:99px;
  font-size:12px; font-weight:650; white-space:nowrap; }
.ampel i{ width:7px; height:7px; border-radius:99px; background:currentColor; flex:none; }
.ampel-rot{   background:var(--rot-blass);   color:var(--rot); }
.ampel-gelb{  background:var(--gelb-blass);  color:#9c7809; }
.ampel-gruen{ background:var(--gruen-blass); color:var(--gruen); }
.ampel-neu{   background:var(--beige-tief);  color:var(--grau); }

.ampel-waehler{ display:inline-flex; gap:4px; background:var(--beige); padding:4px;
  border-radius:11px; border:1px solid var(--linie); }
.ampel-waehler button{ padding:6px 13px; border-radius:8px; font-size:12.5px; font-weight:620;
  color:var(--grau); display:flex; align-items:center; gap:6px; }
.ampel-waehler button i{ width:8px; height:8px; border-radius:99px; background:currentColor; }
.ampel-waehler button:hover{ background:rgba(255,255,255,.7); }
.ampel-waehler button.an{ background:var(--weiss); box-shadow:var(--schatten); }
.ampel-waehler button.an[data-w="rot"]{ color:var(--rot); }
.ampel-waehler button.an[data-w="gelb"]{ color:#9c7809; }
.ampel-waehler button.an[data-w="gruen"]{ color:var(--gruen); }
.ampel-waehler button.an[data-w="neu"]{ color:var(--schwarz); }

.marke-stamm{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:99px; font-size:11.5px; font-weight:650; background:var(--gold-blass);
  color:var(--gold); }

/* --- Tabellen ------------------------------------------------------ */
.tabelle-huelle{ overflow-x:auto; }
table.tabelle{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tabelle th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--grau); padding:10px 14px; white-space:nowrap;
  border-bottom:1px solid var(--linie); position:sticky; top:0; background:var(--weiss); z-index:2; }
.tabelle td{ padding:11px 14px; border-bottom:1px solid #f0ece3; vertical-align:middle; }
.tabelle tbody tr{ cursor:pointer; transition:background .1s; }
.tabelle tbody tr:hover{ background:var(--beige); }
.tabelle tbody tr:last-child td{ border-bottom:0; }
.tabelle .name{ font-weight:600; }
.tabelle .leise{ color:var(--grau); font-size:12.5px; }
.tabelle .zahl{ font-variant-numeric:tabular-nums; text-align:right; }

/* --- Filterleiste -------------------------------------------------- */
.filter{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.filter select, .filter input{
  padding:8px 11px; border:1px solid var(--linie); border-radius:9px;
  background:var(--weiss); font-size:13px; outline:none; max-width:210px;
}
.filter select:focus, .filter input:focus{ border-color:var(--gold); }
.filter .anzahl{ margin-left:auto; font-size:12.5px; color:var(--grau); white-space:nowrap; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px;
  background:var(--weiss); border:1px solid var(--linie); font-size:12.5px; font-weight:560; }
.chip button{ color:var(--grau-hell); font-size:14px; display:flex; }
.chip button:hover{ color:var(--rot); }

/* --- Kontaktprofil -------------------------------------------------- */
.profil-kopf{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:18px; }
.profil-kopf h1{ font-size:24px; }
.profil-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px;
  color:var(--grau); font-size:13px; }
.profil-meta span.trenner{ color:var(--linie); }

.reiter{ display:flex; gap:2px; border-bottom:1px solid var(--linie); margin-bottom:18px;
  overflow-x:auto; scrollbar-width:none; }
.reiter::-webkit-scrollbar{ display:none; }
.reiter button{ padding:10px 15px; font-size:13.5px; font-weight:600; color:var(--grau);
  border-bottom:2.5px solid transparent; white-space:nowrap; margin-bottom:-1px; }
.reiter button:hover{ color:var(--schwarz); }
.reiter button.aktiv{ color:var(--gold); border-bottom-color:var(--gold); }
.reiter .zahl{ font-size:11px; color:var(--grau-hell); margin-left:5px; }

.feldliste{ display:grid; grid-template-columns:auto 1fr; gap:10px 18px; align-items:baseline; }
.feldliste dt{ font-size:12px; font-weight:650; color:var(--grau); white-space:nowrap; }
.feldliste dd{ margin:0; font-size:13.5px; word-break:break-word; }
.feldliste dd a{ color:var(--gold); font-weight:560; }
.feldliste dd.leer{ color:var(--grau-hell); }

/* Ansprechpartner */
.person{ display:flex; gap:12px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid #f0ece3; }
.person:last-child{ border-bottom:0; }
.person .kreis{ width:38px; height:38px; border-radius:99px; background:var(--beige);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-weight:680; font-size:13.5px; flex:none; border:1px solid var(--linie); }
.person .haupt{ flex:1; min-width:0; }
.person .name{ font-weight:620; font-size:14px; display:flex; align-items:center; gap:7px; }
.person .rolle{ font-size:12.5px; color:var(--grau); }
.person .nummern{ display:flex; gap:7px; flex-wrap:wrap; margin-top:7px; }
.tel-knopf{ display:inline-flex; align-items:center; gap:6px; padding:5.5px 11px;
  border-radius:8px; border:1px solid var(--linie); background:var(--weiss);
  font-size:12.5px; font-weight:580; font-variant-numeric:tabular-nums; }
.tel-knopf:hover{ border-color:var(--gold); color:var(--gold); }
.tel-knopf.mobil{ background:var(--gold-blass); border-color:transparent; color:var(--gold); }
.tel-knopf svg{ font-size:14px; }

/* Notizverlauf */
.verlauf{ position:relative; padding-left:22px; }
.verlauf::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1.5px;
  background:var(--linie); }
.notiz{ position:relative; padding-bottom:18px; }
.notiz:last-child{ padding-bottom:0; }
.notiz::before{ content:""; position:absolute; left:-21px; top:5px; width:11px; height:11px;
  border-radius:99px; background:var(--weiss); border:2.5px solid var(--gold); }
.notiz.ki::before{ border-color:var(--grau-hell); }
.notiz .kopf{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--grau);
  margin-bottom:5px; flex-wrap:wrap; }
.notiz .zeit{ font-weight:650; color:var(--schwarz); font-variant-numeric:tabular-nums; }
.notiz .art{ padding:1.5px 8px; border-radius:99px; background:var(--beige);
  font-size:11px; font-weight:620; }
.notiz .inhalt{ font-size:13.5px; white-space:pre-wrap; word-break:break-word;
  background:var(--weiss); border:1px solid var(--linie); border-left:2.5px solid var(--gold);
  border-radius:0 var(--r-klein) var(--r-klein) 0; padding:11px 13px; }
.notiz.revision .inhalt{ border-left-color:var(--linie); color:var(--grau);
  background:var(--beige); }

/* --- Kalender ------------------------------------------------------- */
.monat{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--linie);
  border:1px solid var(--linie); border-radius:var(--r); overflow:hidden; }
.monat .wochentag{ background:var(--beige-tief); padding:8px 6px; font-size:11px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grau);
  text-align:center; }
.monat .tag{ background:var(--weiss); min-height:98px; padding:6px 7px; display:flex;
  flex-direction:column; gap:3px; }
.monat .tag.fremd{ background:#fbf9f5; color:var(--grau-hell); }
.monat .tag.heute .nummer{ background:var(--gold); color:var(--weiss); }
.monat .nummer{ font-size:12px; font-weight:650; width:22px; height:22px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.termin-pille{ font-size:11.5px; padding:3px 7px; border-radius:6px; background:var(--beige);
  border-left:2.5px solid var(--gold); cursor:pointer; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-weight:560; }
.termin-pille:hover{ background:var(--gold-blass); }
.termin-pille.erledigt{ opacity:.5; text-decoration:line-through; border-left-color:var(--grau-hell); }

.termin-zeile{ display:flex; gap:12px; align-items:center; padding:11px 0;
  border-bottom:1px solid #f0ece3; cursor:pointer; }
.termin-zeile:last-child{ border-bottom:0; }
.termin-zeile .datum{ text-align:center; flex:none; width:46px; }
.termin-zeile .datum .t{ font-size:18px; font-weight:680; line-height:1.1;
  font-variant-numeric:tabular-nums; }
.termin-zeile .datum .m{ font-size:10.5px; font-weight:650; text-transform:uppercase;
  color:var(--grau); letter-spacing:.05em; }
.termin-zeile .haupt{ flex:1; min-width:0; }
.termin-zeile .titel{ font-weight:600; font-size:13.5px; }
.termin-zeile .unter{ font-size:12.5px; color:var(--grau); }

/* --- Balken / Diagramm ---------------------------------------------- */
.balken-reihe{ display:flex; align-items:center; gap:11px; padding:7px 0; }
.balken-reihe .beschriftung{ font-size:12.5px; width:104px; flex:none; color:var(--grau); }
.balken{ flex:1; height:8px; background:var(--beige-tief); border-radius:99px; overflow:hidden; }
.balken i{ display:block; height:100%; border-radius:99px; transition:width .45s cubic-bezier(.2,.7,.3,1); }
.balken-reihe .zahl{ font-size:12.5px; font-weight:650; width:52px; text-align:right;
  font-variant-numeric:tabular-nums; flex:none; }

.saeulen{ display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:8px; }
.saeule{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  justify-content:flex-end; height:100%; }
.saeule .stab{ width:100%; max-width:38px; background:linear-gradient(180deg,var(--gold-hell),var(--gold));
  border-radius:5px 5px 0 0; min-height:2px; transition:height .45s cubic-bezier(.2,.7,.3,1); }
.saeule .beschriftung{ font-size:10.5px; color:var(--grau); font-weight:600; }

/* --- Dialog --------------------------------------------------------- */
.abdunklung{ position:fixed; inset:0; background:rgba(18,18,18,.42); z-index:90;
  backdrop-filter:blur(2px); }
.dialog{ position:fixed; z-index:100; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px)); max-height:calc(100vh - 64px); overflow-y:auto;
  background:var(--weiss); border-radius:16px; box-shadow:var(--schatten-hoch); }
.dialog-kopf{ display:flex; align-items:center; gap:10px; padding:17px 20px;
  border-bottom:1px solid var(--linie); position:sticky; top:0; background:var(--weiss);
  border-radius:16px 16px 0 0; z-index:2; }
.dialog-kopf h2{ font-size:16.5px; }
.dialog-kopf .schliessen{ margin-left:auto; color:var(--grau); font-size:19px; padding:4px; display:flex; }
.dialog-kopf .schliessen:hover{ color:var(--schwarz); }
.dialog-koerper{ padding:20px; }
.dialog-fuss{ display:flex; gap:9px; justify-content:flex-end; padding:15px 20px;
  border-top:1px solid var(--linie); position:sticky; bottom:0; background:var(--weiss);
  border-radius:0 0 16px 16px; }

.feld{ margin-bottom:15px; }
.feld:last-child{ margin-bottom:0; }
.feld label{ display:block; font-size:12px; font-weight:650; color:var(--grau);
  margin-bottom:5px; }
.feld input, .feld select, .feld textarea{
  width:100%; padding:9.5px 12px; border:1px solid var(--linie); border-radius:9px;
  background:var(--weiss); font-size:14px; outline:none; transition:border-color .13s, box-shadow .13s;
}
.feld textarea{ min-height:108px; resize:vertical; line-height:1.55; }
.feld input:focus, .feld select:focus, .feld textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3.5px var(--gold-blass); }
.feld .hilfe{ font-size:11.5px; color:var(--grau); margin-top:5px; }
.feld-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* --- Hinweise (Toasts) ---------------------------------------------- */
.hinweis-schicht{ position:fixed; z-index:150; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.hinweis{ background:var(--schwarz); color:var(--weiss); padding:11px 17px; border-radius:11px;
  font-size:13.5px; font-weight:560; box-shadow:var(--schatten-hoch);
  display:flex; align-items:center; gap:9px; animation:auftauchen .22s ease;
  max-width:calc(100vw - 32px); }
.hinweis svg{ color:var(--gold-hell); font-size:16px; flex:none; }
.hinweis.fehler svg{ color:#ff8b80; }
@keyframes auftauchen{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* --- Leerzustand ---------------------------------------------------- */
.leer{ text-align:center; padding:44px 20px; color:var(--grau); }
.leer svg{ font-size:34px; color:var(--linie); margin-bottom:12px; }
.leer p{ margin:0 0 4px; font-size:14px; font-weight:600; color:var(--schwarz); }
.leer small{ font-size:12.5px; }

.mehr-laden{ display:block; width:100%; padding:13px; text-align:center; font-size:13px;
  font-weight:600; color:var(--gold); border-top:1px solid var(--linie); }
.mehr-laden:hover{ background:var(--beige); }

/* --- Anpassung an kleine Bildschirme -------------------------------- */
@media (max-width: 1080px){
  .raster-4{ grid-template-columns:repeat(2,1fr); }
  .spalten-2-1{ grid-template-columns:1fr; }
  .raster-3{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px){
  .huelle{ grid-template-columns:1fr; }
  .seitenleiste{
    position:fixed; left:0; top:0; bottom:0; width:var(--seitenleiste-breite);
    transform:translateX(-100%); transition:transform .24s cubic-bezier(.3,.8,.4,1);
    height:100dvh; padding-top:max(18px, env(safe-area-inset-top));
  }
  .seitenleiste.offen{ transform:none; box-shadow:var(--schatten-hoch); }
  .menue-knopf{ display:flex; }
  .kopfzeile{ padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top)); }
  .knopf-gold span{ display:none; }
  .knopf-gold{ padding:9.5px 11px; }
  .seite{ padding:16px 14px calc(60px + env(safe-area-inset-bottom)); }
  .raster-4,.raster-3,.raster-2{ grid-template-columns:1fr 1fr; }
  .seiten-kopf h1{ font-size:21px; }
  .kennzahl .wert{ font-size:25px; }
  .monat .tag{ min-height:64px; padding:4px; }
  .monat .termin-pille{ font-size:0; padding:0; height:5px; border-radius:99px;
    border-left:0; background:var(--gold); }
  .feld-reihe{ grid-template-columns:1fr; }
  .dialog{ width:100vw; max-width:100vw; left:0; top:auto; bottom:0; transform:none;
    border-radius:18px 18px 0 0; max-height:92dvh; }
  .dialog-kopf{ border-radius:18px 18px 0 0; }
  .dialog-fuss{ border-radius:0; padding-bottom:max(15px, env(safe-area-inset-bottom)); }
  .hinweis-schicht{ bottom:calc(20px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px){
  .raster-4,.raster-3,.raster-2{ grid-template-columns:1fr; }
  .tabelle th.optional, .tabelle td.optional{ display:none; }
}

@media print{
  .seitenleiste,.kopfzeile,.knopf-gold,.reiter{ display:none !important; }
  .huelle{ grid-template-columns:1fr; }
  .karte{ box-shadow:none; border-color:#ccc; break-inside:avoid; }
}

/* --- Anmeldung ------------------------------------------------------- */
.anmeldung{
  position:fixed; inset:0; z-index:180; background:var(--beige);
  display:flex; align-items:center; justify-content:center; padding:22px;
  padding-top:max(22px, env(safe-area-inset-top));
}
.anmeldung-karte{
  width:100%; max-width:378px; background:var(--weiss); border:1px solid var(--linie);
  border-radius:16px; box-shadow:var(--schatten); padding:30px 26px;
}
.anmeldung-karte img{ width:132px; height:auto; display:block; margin:0 auto 20px; }
.anmeldung-karte h1{ font-size:20px; text-align:center; }
.anmeldung-karte .unter{ text-align:center; color:var(--grau); font-size:12.5px;
  margin:5px 0 22px; }
.anmelde-fehler{ background:var(--rot-blass); color:var(--rot); border-radius:9px;
  padding:9px 12px; font-size:12.5px; font-weight:560; margin-bottom:14px; }
.anmelde-fuss{ text-align:center; color:var(--grau-hell); font-size:11.5px;
  margin:16px 0 0; line-height:1.5; }

/* Das hidden-Attribut muss staerker sein als jedes display der Bausteine.
   Sonst bleibt zum Beispiel der Ladeschirm sichtbar, obwohl er
   ausgeblendet wurde - und verdeckt die Anmeldemaske dahinter. */
[hidden]{ display:none !important; }