@font-face{font-family:"WS Archivo";src:url(../archivo.woff) format("woff");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --orange:#ff6b1a;--orange-2:#ff8a47;
  --bg:#eceeea;--karte:#fff;--karte-2:#f4f5f2;--text:#14171c;--leise:#5a6577;--linie:rgba(20,23,28,.13);
  --kopf-bg:rgba(236,238,234,.88);--akzent:#d9520a;--akzent-text:#fff;
  --notfall:#d92d3a;--notfall-bg:rgba(217,45,58,.1);--dringend:#c75a00;--dringend-bg:rgba(240,140,0,.14);
  --ok:#1f8a4c;--ok-bg:rgba(31,138,76,.12);--fokus:#1c5fd6;--schatten:0 1px 2px rgba(20,23,28,.06),0 8px 24px -12px rgba(20,23,28,.18);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1a2e;--karte:#14243f;--karte-2:#1a2e4d;--text:#eceeea;--leise:#9fb0c8;--linie:rgba(236,238,234,.14);
  --kopf-bg:rgba(13,26,46,.88);--akzent:#ff6b1a;--akzent-text:#140b04;
  --notfall:#ff6b72;--notfall-bg:rgba(255,107,114,.14);--dringend:#ffa23a;--dringend-bg:rgba(255,162,58,.14);
  --ok:#4cd18a;--ok-bg:rgba(76,209,138,.14);--fokus:#8ab4ff;--schatten:0 8px 24px -12px rgba(0,0,0,.5);color-scheme:dark}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge.chat{background:rgba(138,180,255,.16);color:#8ab4ff}}
:root[data-theme="dark"] .badge.chat{background:rgba(138,180,255,.16);color:#8ab4ff}
:root[data-theme="dark"]{
  --bg:#0d1a2e;--karte:#14243f;--karte-2:#1a2e4d;--text:#eceeea;--leise:#9fb0c8;--linie:rgba(236,238,234,.14);
  --kopf-bg:rgba(13,26,46,.88);--akzent:#ff6b1a;--akzent-text:#140b04;
  --notfall:#ff6b72;--notfall-bg:rgba(255,107,114,.14);--dringend:#ffa23a;--dringend-bg:rgba(255,162,58,.14);
  --ok:#4cd18a;--ok-bg:rgba(76,209,138,.14);--fokus:#8ab4ff;--schatten:0 8px 24px -12px rgba(0,0,0,.5);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"WS Archivo",system-ui,"Segoe UI",sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--akzent)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--karte);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.leise{color:var(--leise)}.klein{font-size:14px}

/* Marke */
.marke{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.015em;color:var(--text);text-decoration:none}
.marke svg{width:30px;height:20px;fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Demo-Band */
.demo-band{display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:center;align-items:center;padding:8px 16px;background:var(--orange);color:#140b04;font-size:14px;text-align:center}
.demo-band a{color:#140b04;font-weight:700}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 2px var(--linie);font-weight:700;font-size:16px;text-decoration:none;color:var(--text);transition:transform .2s,background-color .2s,box-shadow .2s}
.knopf:hover{box-shadow:inset 0 0 0 2px var(--text)}
.knopf:active{transform:scale(.97)}
.knopf-haupt{background:var(--akzent);color:var(--akzent-text);box-shadow:none}
.knopf-haupt:hover{background:var(--orange-2);color:#140b04;box-shadow:none}
.knopf[disabled]{opacity:.55;cursor:progress}
.knopf-klein{min-height:36px;padding:0 14px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1.5px var(--linie);background:transparent;font-size:14px;font-weight:600}
.knopf-klein:hover{box-shadow:inset 0 0 0 1.5px var(--text)}

/* Formulare */
label{display:block;font-weight:700;font-size:15px;margin:16px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=time],input[type=search],select,textarea{width:100%;min-height:46px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--linie);background:var(--karte);font-size:16px}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--fokus)}
.hinweis{font-size:14px;color:var(--leise);margin-top:6px}
.fehler{margin-top:14px;padding:10px 14px;border-radius:10px;background:var(--notfall-bg);color:var(--notfall);font-weight:600;font-size:15px}
.erfolg{color:var(--ok);font-weight:700}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(900px 500px at 80% -10%,rgba(255,107,26,.16),transparent 60%),var(--bg)}
.login-karte{width:100%;max-width:420px;background:var(--karte);border-radius:22px;padding:32px 28px;box-shadow:var(--schatten);animation:rein .6s cubic-bezier(.2,.8,.2,1) both}
.login-karte h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:22px 0 4px}
.login-karte .knopf{width:100%;margin-top:22px}
.login-karte .klein{margin-top:20px}
.pw-zeile{display:flex;gap:8px}.pw-zeile .knopf-klein{flex:none}

/* Kopf + Navigation */
.kopf{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:10px 20px;background:var(--kopf-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.hauptnav{display:flex;gap:4px;margin-left:12px}
.hauptnav a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;color:var(--leise);font-weight:700;font-size:16px;transition:background-color .2s,color .2s}
.hauptnav a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hauptnav a:hover{color:var(--text);background:var(--karte-2)}
.hauptnav a[aria-current=page]{color:var(--text);background:var(--karte);box-shadow:inset 0 0 0 1.5px var(--linie)}
.hauptnav a[aria-current=page] svg{stroke:var(--orange)}
.zaehler{font-style:normal;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--notfall);color:#fff;font-size:13px;line-height:22px;text-align:center;font-weight:800}
.zaehler.puls{animation:puls 1.6s infinite}
.konto{position:relative;margin-left:auto}
.konto-knopf{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--linie);font-weight:700;max-width:230px}
.konto-knopf span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.konto-knopf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;flex:none;transition:transform .2s}
.konto-knopf[aria-expanded=true] svg{transform:rotate(180deg)}
.menue{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--karte);border-radius:16px;box-shadow:var(--schatten),0 0 0 1px var(--linie);padding:8px;animation:rein .2s both}
.menue-kopf{padding:8px 12px;font-size:14px;color:var(--leise);border-bottom:1px solid var(--linie);margin-bottom:6px}
.menue button{display:block;width:100%;text-align:left;min-height:44px;padding:0 12px;border:0;background:none;border-radius:10px;font-weight:600}
.menue button:hover{background:var(--karte-2)}

/* Inhalt */
#ansicht{max-width:1040px;margin:0 auto;padding:28px 20px 60px;outline:none}
.seite{animation:rein .45s cubic-bezier(.2,.8,.2,1) both}
.seitenkopf{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:end;justify-content:space-between;margin-bottom:22px}
h1.titel{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
h2.abschnitt{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0 0 12px}
.karte{background:var(--karte);border-radius:20px;padding:22px;box-shadow:var(--schatten);margin-bottom:18px}
.laedt{color:var(--leise);padding:40px 0;text-align:center}
.laedt::before{content:"";display:block;width:34px;height:34px;margin:0 auto 12px;border-radius:50%;border:3px solid var(--linie);border-top-color:var(--orange);animation:dreh .8s linear infinite}
.leer{padding:36px 12px;text-align:center;color:var(--leise)}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kachel{background:var(--karte);border-radius:20px;padding:18px 18px 16px;box-shadow:var(--schatten);text-decoration:none;color:var(--text);display:block;position:relative;overflow:hidden;animation:rein .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s}
a.kachel:hover{transform:translateY(-3px)}
.kachel:nth-child(2){animation-delay:.06s}.kachel:nth-child(3){animation-delay:.12s}.kachel:nth-child(4){animation-delay:.18s}
.kachel .zahl{display:block;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-stretch:112%}
.kachel .name{display:block;font-size:15px;color:var(--leise);font-weight:600;margin-top:4px}
.kachel.warn .zahl{color:var(--dringend)}
.kachel.alarm .zahl{color:var(--notfall)}
.kachel.alarm.aktiv::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 2px var(--notfall);animation:puls 2s infinite;pointer-events:none}

/* Minutenbalken */
.balken{height:18px;border-radius:9px;background:var(--karte-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--linie)}
.balken>i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--orange),var(--orange-2));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.balken.voll>i{background:linear-gradient(90deg,var(--dringend),var(--notfall))}
.minuten-zeile{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;align-items:baseline}
.minuten-zeile b{font-size:26px;font-weight:800;letter-spacing:-.02em}

/* Diagramm */
.diagramm{width:100%;height:auto;display:block;overflow:visible}
.diagramm text{fill:var(--leise);font-family:inherit;font-size:12px}
.diagramm .gitter{stroke:var(--linie);stroke-width:1}
.diagramm .s-ges{fill:var(--orange);opacity:.9}
.diagramm .s-dr{fill:var(--notfall)}
.diagramm rect{transform-box:fill-box;transform-origin:bottom;animation:waechst .7s cubic-bezier(.2,.8,.2,1) both}
.legende{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--leise);margin-top:8px}
.legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.zwei{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}

/* Filter */
.filter{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:16px}
.filter label{margin:0 0 4px;font-size:13px;color:var(--leise)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--karte);box-shadow:inset 0 0 0 1.5px var(--linie);font-weight:700;font-size:15px}
.chip[aria-pressed=true]{background:var(--text);color:var(--bg);box-shadow:none}

/* Anruf-Liste */
.liste{display:grid;gap:12px}
.anruf{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center;background:var(--karte);border-radius:18px;padding:16px 18px 16px 22px;box-shadow:var(--schatten);cursor:pointer;overflow:hidden;animation:rein .4s cubic-bezier(.2,.8,.2,1) both;transition:transform .2s,opacity .35s}
.anruf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--linie)}
.anruf.d-notfall::before{background:var(--notfall)}
.anruf.d-dringend::before{background:var(--dringend)}
.anruf:hover{transform:translateX(3px)}
.anruf.weg{opacity:0;transform:translateX(30px)}
.anruf.neu{animation:rein .4s both,blitz 2.4s .3s 3}
.anruf .kopfzeile{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.anruf .wer{font-weight:800;font-size:18px}
.anruf .zeit{color:var(--leise);font-size:14px}
.anruf .anliegen{grid-column:1;color:var(--text);opacity:.9;font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.anruf .aktion{grid-column:2;grid-row:1/3}
.anruf-link{color:inherit;text-decoration:none;position:static}
.anruf-link::after{content:"";position:absolute;inset:0}
.anruf .status-gruppe{position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.01em;background:var(--karte-2);color:var(--leise)}
.badge.notfall{background:var(--notfall-bg);color:var(--notfall)}
.badge.notfall::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--notfall);animation:puls 1.4s infinite}
.badge.dringend{background:var(--dringend-bg);color:var(--dringend)}
.badge.chat{background:rgba(28,95,214,.12);color:#1c5fd6}
.badge.chat svg{width:14px;height:14px;fill:currentColor}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.status-gruppe{display:inline-flex;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--linie);padding:3px;gap:2px;background:var(--karte)}
.status-gruppe button{min-height:38px;padding:0 12px;border:0;border-radius:999px;background:none;font-weight:700;font-size:14px;color:var(--leise);white-space:nowrap}
.status-gruppe button:hover{color:var(--text)}
.status-gruppe button[aria-pressed=true]{background:var(--text);color:var(--bg)}
.status-gruppe button[aria-pressed=true].s-offen{background:var(--akzent);color:var(--akzent-text)}
.seiten{display:flex;justify-content:center;gap:12px;align-items:center;margin-top:20px}

/* Detail */
.zurueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--leise);font-weight:700;text-decoration:none;margin-bottom:6px}
.zurueck:hover{color:var(--text)}
.detail-kopf{display:flex;flex-wrap:wrap;gap:12px 18px;justify-content:space-between;align-items:start;margin-bottom:18px}
.detail-kopf .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px}
.daten dt{font-size:13px;color:var(--leise);font-weight:700}
.daten dd{margin:2px 0 0;font-weight:700;font-size:18px;overflow-wrap:anywhere}
.rueckruf{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;background:var(--akzent);color:var(--akzent-text);font-weight:800;text-decoration:none;font-size:19px}
.rueckruf:hover{background:var(--orange-2);color:#140b04}
.rueckruf svg{width:20px;height:20px;fill:currentColor}
.zusammen{font-size:19px;line-height:1.5}
.termin{border-left:5px solid var(--ok);background:var(--ok-bg);padding:12px 16px;border-radius:0 14px 14px 0}
.chat{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow:auto;padding:4px 2px}
.blase{max-width:82%;padding:10px 14px;border-radius:18px;font-size:16px;overflow-wrap:anywhere}
.blase small{display:block;font-size:12px;font-weight:800;opacity:.7;margin-bottom:2px}
.blase.anrufer{align-self:flex-start;background:var(--karte-2);border-bottom-left-radius:6px}
.blase.assistent{align-self:flex-end;background:var(--akzent);color:var(--akzent-text);border-bottom-right-radius:6px}
audio{width:100%;margin-top:6px}
.notizen li{padding:10px 14px;background:var(--karte-2);border-radius:12px;margin-bottom:8px;overflow-wrap:anywhere;white-space:pre-wrap}
.notizen time{display:block;font-size:12px;color:var(--leise);font-weight:700}
.notiz-form{display:flex;gap:10px;align-items:end;margin-top:12px}
.notiz-form textarea{min-height:56px}

/* Einstellungen */
.einst fieldset{border:0;padding:0;margin:0}
.einst .karte h2{margin-bottom:4px}
.tag{display:grid;grid-template-columns:70px 1fr;gap:6px 12px;padding:12px 0;border-top:1px solid var(--linie);align-items:start}
.tag:first-of-type{border-top:0}
.tag>b{padding-top:10px}
.fenster{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fenster .f{display:inline-flex;gap:6px;align-items:center;background:var(--karte-2);padding:4px 6px 4px 10px;border-radius:14px}
.fenster input[type=time]{width:112px;min-height:40px}
.fenster .zu{color:var(--leise);padding-top:10px}
.x{width:36px;height:36px;border-radius:50%;border:0;background:none;font-size:20px;line-height:1;color:var(--leise)}
.x:hover{background:var(--notfall-bg);color:var(--notfall)}
.optionen{display:grid;gap:10px;margin-top:10px}
.option{display:flex;gap:12px;align-items:start;padding:12px 14px;border-radius:14px;border:1.5px solid var(--linie);cursor:pointer;background:var(--karte)}
.option:has(input:checked){border-color:var(--akzent);background:var(--karte-2)}
.option input{margin-top:5px;width:20px;height:20px;accent-color:var(--orange);flex:none}
.option b{display:block}
.option span{font-size:14px;color:var(--leise)}
.option{font-weight:400;margin:0}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
details.hilfe{margin-top:12px;background:var(--karte-2);border-radius:14px;padding:12px 16px}
details.hilfe summary{cursor:pointer;font-weight:700}
details.hilfe ol{padding-left:22px;list-style:decimal;margin-top:8px}
details.hilfe code{background:var(--bg);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere;font-size:15px}
.speichern-leiste{position:sticky;bottom:0;display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 16px;margin:0 -8px;background:var(--kopf-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linie);border-radius:16px 16px 0 0}
.schalter{display:flex;align-items:center;gap:12px;font-weight:700;margin:14px 0 0}
.schalter input{width:22px;height:22px;accent-color:var(--orange)}

/* Dialog + Toasts */
dialog{border:0;border-radius:22px;padding:26px;width:min(440px,calc(100vw - 32px));background:var(--karte);color:var(--text);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(5,10,20,.6);backdrop-filter:blur(3px)}
dialog h2{font-size:24px;font-weight:800}
.dialog-knoepfe{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.toasts{position:fixed;z-index:60;right:16px;top:70px;display:grid;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;background:var(--text);color:var(--bg);padding:14px 16px;border-radius:14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);animation:rein .35s both;font-weight:600;display:flex;gap:12px;align-items:center;justify-content:space-between}
.toast.notfall{background:var(--notfall);color:#fff}
.toast a{color:inherit;font-weight:800}

/* Animationen */
.still .seite,.still .kachel,.still .anruf,.still .diagramm rect,.still .anruf.neu{animation:none}
.still .anruf.neu{box-shadow:0 0 0 2px var(--notfall)}
textarea.code{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:14px;min-height:64px;resize:vertical;margin-top:6px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--linie);background:var(--karte-2);color:var(--text)}
input[type=color]{width:64px;height:44px;padding:2px;border-radius:10px;border:1.5px solid var(--linie);background:var(--karte);display:block;margin-top:4px}
@keyframes rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes waechst{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dreh{to{transform:rotate(360deg)}}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes blitz{0%,100%{box-shadow:var(--schatten)}50%{box-shadow:0 0 0 3px var(--notfall),0 0 26px rgba(217,45,58,.45)}}

/* Mobil */
@media (max-width:860px){
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .zwei{grid-template-columns:1fr}
  .kachel .zahl{font-size:38px}
}
@media (max-width:720px){
  body{font-size:16px;padding-bottom:78px}
  .kopf{padding:8px 16px;gap:10px}
  .konto-knopf{max-width:170px}
  .hauptnav{position:fixed;left:0;right:0;bottom:0;margin:0;justify-content:space-around;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--karte);border-top:1px solid var(--linie);z-index:30}
  .hauptnav a{flex-direction:column;gap:2px;min-height:56px;padding:6px 14px;border-radius:14px;font-size:12px;flex:1}
  .hauptnav a[aria-current=page]{box-shadow:none;background:var(--karte-2)}
  .zaehler{position:absolute;top:2px;right:calc(50% - 30px);min-width:20px;height:20px;line-height:20px;font-size:12px}
  #ansicht{padding:20px 16px 40px}
  .filter{grid-template-columns:1fr 1fr}.filter>div:first-child{grid-column:1/3}
  .anruf{grid-template-columns:1fr;padding:14px 14px 14px 20px}
  .anruf .aktion{grid-column:1;grid-row:auto}
  .status-gruppe{display:flex}.status-gruppe button{flex:1;padding:0 6px}
  .zwei-spalten{grid-template-columns:1fr}
  .tag{grid-template-columns:1fr}.tag>b{padding-top:0}
  .karte{padding:18px 16px;border-radius:18px}
  .toasts{top:auto;bottom:90px;right:16px;left:16px;width:auto}
  .blase{max-width:92%}
  .notiz-form{flex-direction:column;align-items:stretch}
  .speichern-leiste{bottom:70px;margin:0;border-radius:16px}
  .rueckruf{width:100%;justify-content:center}
}
@media (max-width:380px){.kacheln{grid-template-columns:1fr 1fr;gap:10px}.kachel{padding:14px}.kachel .zahl{font-size:32px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Zurück-Knopf (nur Demo) */
.zurueck-zeile{padding:12px 16px 0;background:var(--bg)}
.zurueck-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:800;font-size:17px;text-decoration:none;box-shadow:var(--schatten)}
.zurueck-knopf:hover{opacity:.88}