/* Plenus mobil — die Gestaltung stammt 1:1 aus dem Klick-Prototyp.
   Was dort gut aussah, sieht hier gleich aus; niemand muss sich umgewöhnen.
   Unterschied: kein Telefonrahmen mehr, die App füllt den Bildschirm. */
:root{
  color-scheme: light dark;
  --a:#3E7C36; --brand:#60B961; --a-soft:#EAF4E7; --pale:#F5F8F2; --card:#FFFFFF;
  --tx:#2E2F31; --tx2:#5E6A63; --ln:#E1E8DC;
  --amber:#A9631A; --amber-soft:#FBF0E2; --red:#A93B2C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --a:#8CC77F; --brand:#60B961; --a-soft:#1C2A19; --pale:#111614; --card:#18201B;
    --tx:#E7EEE6; --tx2:#8D9A88; --ln:#26312A;
    --amber:#E29459; --amber-soft:#332318; --red:#E0806F;
  }
}
:root[data-theme="dark"]{
  --a:#8CC77F; --brand:#60B961; --a-soft:#1C2A19; --pale:#111614; --card:#18201B;
  --tx:#E7EEE6; --tx2:#8D9A88; --ln:#26312A;
  --amber:#E29459; --amber-soft:#332318; --red:#E0806F;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--pale);color:var(--tx);
  font-family:"Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;}
#app{display:flex;flex-direction:column;height:100dvh;max-width:520px;margin:0 auto;
  background:var(--pale);position:relative;}
h3{margin:0;}
/* Eigene display-Regeln überstimmen sonst das eingebaute [hidden] –
   ein verstecktes Element fängt dann trotzdem Klicks ab. */
[hidden]{display:none !important;}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 6px;
  font-size:.78rem;font-weight:600;color:var(--tx);flex:none;}
.statusbar .dots{letter-spacing:2px;opacity:.55;}
.appbar{display:flex;align-items:center;gap:12px;padding:6px 18px 12px;flex:none;}
.appbar h3{font-family:"Instrument Sans",sans-serif;font-size:1.12rem;font-weight:700;letter-spacing:-.01em;}
.backBtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--ln);background:var(--card);
  display:grid;place-items:center;cursor:pointer;color:var(--tx);font-size:1rem;line-height:1;flex:none;}
.body{flex:1;overflow-y:auto;padding:0 18px 18px;width:100%;}
.body::-webkit-scrollbar{width:0;}
.tabbar{flex:none;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  border-top:1px solid var(--ln);background:var(--card);padding:8px 6px 20px;}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border:0;background:none;
  cursor:pointer;color:var(--tx2);font-family:inherit;font-size:.63rem;font-weight:600;}
svg{width:100%;height:auto;display:block;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tab[aria-current="true"]{color:var(--a);}
.card{background:var(--card);border:1px solid var(--ln);border-radius:16px;padding:16px;}
.stack{display:flex;flex-direction:column;gap:12px;}
.row{display:flex;align-items:center;gap:12px;}
.grow{flex:1;min-width:0;}
.muted{color:var(--tx2);font-size:.85rem;}
.tiny{font-size:.72rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.09em;font-weight:700;}
.big{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.btn{width:100%;border:0;border-radius:14px;padding:15px;font-family:inherit;font-size:1rem;
  font-weight:700;background:var(--a);color:#fff;cursor:pointer;}
.btn:hover{filter:brightness(1.08);}
.btn.ghost{background:var(--card);color:var(--tx);border:1px solid var(--ln);}
.btn.small{padding:11px;font-size:.9rem;border-radius:12px;}
.offline{background:var(--tx);color:#fff;font-size:.74rem;font-weight:600;padding:7px 18px;
  display:flex;align-items:center;gap:8px;flex:none;}
.schutz{flex:none;font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;background:var(--ln);color:var(--tx2);white-space:nowrap;}
.bodyWrap{position:relative;flex:1;min-height:0;display:flex;}
.wasser{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.wasser span{position:absolute;font-size:.6rem;font-weight:600;color:var(--tx);opacity:.05;
  white-space:nowrap;transform:rotate(-32deg);letter-spacing:.04em;}
.hidden{display:none;}
.pill{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:7px;background:var(--a-soft);color:var(--a);}
.pill.warn{background:var(--amber-soft);color:var(--amber);}
.pill.grey{background:var(--ln);color:var(--tx2);}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.tile{background:var(--card);border:1px solid var(--ln);border-radius:16px;padding:15px 13px;
  display:flex;flex-direction:column;gap:9px;cursor:pointer;text-align:left;font-family:inherit;color:var(--tx);}
.tile:hover{border-color:var(--a);}
.tile svg{width:23px;height:23px;stroke:var(--a);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tile b{font-size:.95rem;font-weight:700;}
.tile span{font-size:.76rem;color:var(--tx2);line-height:1.3;}
.listItem{background:var(--card);border:1px solid var(--ln);border-radius:14px;padding:13px 14px;
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;font-family:inherit;color:var(--tx);cursor:pointer;}
.listItem:hover{border-color:var(--a);}
.check{width:24px;height:24px;border-radius:8px;border:2px solid var(--ln);flex:none;display:grid;place-items:center;
  color:#fff;font-size:.8rem;margin-top:1px;}
.done .check{background:var(--a);border-color:var(--a);}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--a-soft);color:var(--a);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none;}
.bubble{max-width:82%;padding:10px 13px;border-radius:16px;font-size:.9rem;line-height:1.4;}
.bubble.them{background:var(--card);border:1px solid var(--ln);border-bottom-left-radius:5px;}
.bubble.me{background:var(--a);color:#fff;border-bottom-right-radius:5px;margin-left:auto;}
.field{width:100%;border:1px solid var(--ln);border-radius:13px;padding:13px;font-family:inherit;
  font-size:.95rem;background:var(--card);color:var(--tx);}
.opt{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--ln);border-radius:13px;
  background:var(--card);cursor:pointer;font-family:inherit;font-size:.92rem;color:var(--tx);width:100%;text-align:left;}
.opt:hover{border-color:var(--a);}
.opt[aria-pressed="true"]{border-color:var(--a);background:var(--a-soft);font-weight:600;}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--ln);flex:none;}
.schalter{width:46px;height:27px;border-radius:14px;background:var(--ln);border:0;flex:none;
  position:relative;cursor:pointer;transition:background .18s;}
.schalter i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .18s;}
.schalter[aria-pressed="true"]{background:var(--a);}
.schalter[aria-pressed="true"] i{transform:translateX(19px);}
.opt[aria-pressed="true"] .radio{border-color:var(--a);border-width:6px;}
.bar{height:7px;border-radius:4px;background:var(--ln);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--brand);}
.stepper{display:flex;align-items:center;gap:10px;}
.stepper button{width:32px;height:32px;border-radius:10px;border:1px solid var(--ln);background:var(--card);
  font-size:1.05rem;cursor:pointer;color:var(--tx);font-family:inherit;line-height:1;}
.stepper b{min-width:22px;text-align:center;font-variant-numeric:tabular-nums;}
.ok{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:46px 20px;}
.okMark{width:66px;height:66px;border-radius:50%;background:var(--a-soft);color:var(--a);
  display:grid;place-items:center;font-size:1.9rem;}
.progress{display:flex;gap:5px;}
.progress i{height:4px;border-radius:2px;background:var(--ln);flex:1;}
.progress i.on{background:var(--brand);}
.hidden{display:none !important;}
.tabbar.locked .tab{opacity:.42;}
.toast{position:absolute;left:16px;right:16px;bottom:92px;z-index:6;
  background:#10201C;color:#fff;border-radius:14px;padding:13px 15px;font-size:.87rem;line-height:1.4;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);transition:opacity .3s ease, transform .3s ease;}
.toast.gone{opacity:0;transform:translateY(8px);pointer-events:none;}
.lockNote{display:flex;gap:11px;align-items:flex-start;background:var(--amber-soft);
  border-radius:14px;padding:14px 15px;}
.lockNote svg{width:20px;height:20px;stroke:var(--amber);fill:none;stroke-width:1.8;flex:none;margin-top:1px;}
.splash{position:absolute;inset:0;background:var(--pale);z-index:5;border-radius:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:44px 34px;text-align:center;pointer-events:none;transition:opacity .5s ease;}
.splash.gone{opacity:0;}
.splash .logo{width:74px;height:auto;display:block;}
.splash blockquote{margin:0;font-size:1.02rem;font-weight:600;line-height:1.45;color:var(--tx);max-width:22ch;}
.splash .cat{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--a);font-weight:700;}
.splash .bar2{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
  width:98px;height:3px;border-radius:2px;background:var(--ln);overflow:hidden;}
.splash .bar2 i{display:block;height:100%;width:40%;background:var(--a);animation:sweep 1.1s ease-in-out infinite;}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.splash .bar2 i{animation:none;width:100%;}}


/* Die App füllt den Bildschirm — der Telefonrahmen des Prototyps fällt weg. */
.appbar{padding-top:max(10px, env(safe-area-inset-top));}
.tabbar{padding-bottom:max(14px, env(safe-area-inset-bottom));}
.body{padding-top:2px;padding-bottom:132px;}  /* Platz für Pleni unten rechts */
.fehler{background:var(--amber-soft);color:var(--amber);border-radius:13px;padding:12px 14px;
  font-size:.88rem;line-height:1.4;}
.laedt{display:grid;place-items:center;padding:44px 0;color:var(--tx2);font-size:.88rem;}
.seiteBild{width:100%;border-radius:12px;border:1px solid var(--ln);display:block;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.seitenNav{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.seitenNav .btn{width:auto;padding-left:18px;padding-right:18px;flex:none;}
.seitenNav .muted{white-space:nowrap;}
:focus-visible{outline:2px solid var(--a);outline-offset:2px;}

/* ---------------------------------------------------------------- Pleni */
/* Klein, flauschig, herzlich – und immer erreichbar, ohne im Weg zu sein. */
.pleniKnopf{position:absolute;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));
  width:62px;height:62px;border-radius:50%;border:2px solid var(--card);background:var(--a-soft);
  box-shadow:0 8px 22px -6px rgba(20,50,20,.4);cursor:pointer;padding:0;overflow:hidden;z-index:40;}
.pleniKnopf img{width:100%;height:100%;object-fit:cover;display:block;}
.pleniKnopf:hover{transform:translateY(-2px);}
.pleniBlase{position:absolute;left:12px;right:12px;bottom:calc(156px + env(safe-area-inset-bottom));
  background:var(--card);border:1px solid var(--ln);border-radius:20px;padding:16px;z-index:41;
  box-shadow:0 20px 50px -18px rgba(20,50,20,.5);display:flex;flex-direction:column;gap:12px;
  max-width:520px;margin:0 auto;}
.pleniKopf{display:flex;align-items:center;gap:12px;}
.pleniGesicht{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--a-soft);}
.pleniKopf b{font-size:1rem;}
.pleniKlein{font-size:.74rem;color:var(--tx2);line-height:1.4;}
.pleniZu{margin-left:auto;border:0;background:none;font-size:1.5rem;line-height:1;
  color:var(--tx2);cursor:pointer;padding:0 4px;}
.pleniSatz{font-size:1rem;line-height:1.5;color:var(--tx);}
.pleniEingabe{display:flex;gap:8px;}
.pleniEingabe .field{flex:1;}
.pleniHoeren{border:1px solid var(--ln);background:var(--card);border-radius:13px;
  padding:0 14px;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--tx);
  cursor:pointer;white-space:nowrap;}
.pleniHoeren[aria-pressed="true"]{background:var(--a);color:#fff;border-color:var(--a);}
.pleniVorschlaege{display:flex;flex-direction:column;gap:8px;}
.pleniVorschlag{border:1px solid var(--ln);background:var(--card);border-radius:13px;
  padding:12px 14px;text-align:left;font-family:inherit;font-size:.92rem;color:var(--tx);
  cursor:pointer;}
.pleniVorschlag:hover{border-color:var(--a);background:var(--a-soft);}
@media (prefers-reduced-motion:no-preference){
  .pleniKnopf{transition:transform .18s ease;}
}

/* --- Plenus mobil im Browser ---
   Dieselbe App, nur auf einem großen Bildschirm. Statt einer schmalen Spalte
   im Nichts steht sie dann als Fenster in der Mitte, mit einem ruhigen Rand
   drumherum. Am Inhalt ändert sich nichts — es ist dieselbe App wie auf dem
   Handy, und sie soll sich auch so bedienen lassen. */
/* Nur für die Handy-Ausgabe. Die Büro-Ausgabe und die Eingangsseite bringen
   ihre eigene Anordnung mit und dürfen davon nicht eingefangen werden. */
@media (min-width:900px) and (min-height:640px){
  body:not(.buero):not(.start){background:
    radial-gradient(120% 90% at 50% 0%, var(--a-soft) 0%, var(--pale) 62%);
    display:grid;place-items:center;padding:26px 0;}
  body:not(.buero):not(.start) #app{height:min(880px, calc(100dvh - 52px));
    max-width:460px;width:460px;
    border:1px solid var(--ln);border-radius:26px;overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);}
  /* Der Balken oben ahmt auf dem Handy die Systemleiste nach. Am PC gibt es
     keine – dann ist er nur eine leere Zeile und kann weg. */
  body:not(.buero):not(.start) .statusbar{display:none;}
  body:not(.buero):not(.start) .appbar{padding-top:16px;}
}

/* --- Chips: Rubriken und Gebiete ---
   Waagerecht scrollbar. Am Handy ist eine Reihe, die man wischt, besser als
   ein Klappmenü: Man sieht, was es gibt, ohne erst zu tippen. */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;display:flex;align-items:center;gap:6px;background:var(--card);
  border:1px solid var(--ln);border-radius:999px;padding:9px 14px;font:inherit;
  font-size:.86rem;color:var(--tx2);cursor:pointer;white-space:nowrap;}
.chip.aktiv{background:var(--a-soft);border-color:var(--a);color:var(--a);font-weight:600;}
.chipZahl{font-size:.72rem;font-weight:700;background:var(--pale);
  border-radius:999px;padding:1px 7px;color:var(--tx2);}
.chip.aktiv .chipZahl{background:var(--card);color:var(--a);}

/* --- Schwarzes Brett --- */
.brettBilder{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;}
.brettBilder::-webkit-scrollbar{display:none;}
.brettBild{flex:none;width:min(78vw,320px);height:auto;max-height:60vh;
  object-fit:cover;border-radius:14px;border:1px solid var(--ln);background:var(--pale);}
.brettBildKasten{flex:none;display:flex;flex-direction:column;gap:6px;}
.brettBildKasten .brettBild{width:min(48vw,200px);}
/* Der Anzeigentext behält die Absätze, die jemand hineingeschrieben hat.
   Ein Text, der zu einem Block zusammenläuft, liest sich wie ein Vertrag. */
.brettText{white-space:pre-wrap;line-height:1.55;}
.feldLabel{display:flex;flex-direction:column;gap:5px;font-size:.8rem;
  color:var(--tx2);font-weight:600;}
.linkKnopf{background:none;border:0;font:inherit;font-size:.82rem;
  color:var(--tx2);text-decoration:underline;cursor:pointer;padding:6px 0;
  align-self:flex-start;}

/* --- Pflegestandards ---
   Am Bett gelesen, oft mit einer Hand und selten bei Tageslicht. Deshalb
   größere Schrift im Ablauf als sonst und viel Luft zwischen den Schritten. */
.standardListe{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;
  font-size:.95rem;line-height:1.5;}
.schritt{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--ln);
  font-size:1rem;line-height:1.55;}
.schritt:first-of-type{border-top:0;}
.schrittNr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--a-soft);
  color:var(--a);font-weight:700;font-size:.82rem;display:flex;
  align-items:center;justify-content:center;margin-top:2px;}
/* Die Warnung steht am Schritt, nicht am Ende des Standards. Wer sie am
   Ende liest, hat den Schritt schon gemacht. */
.schrittAchtung{margin-top:7px;background:var(--amber-soft);color:var(--amber);
  border-radius:11px;padding:9px 11px;font-size:.88rem;line-height:1.45;font-weight:600;}
/* Die dritte Zeile einer Anzeige: wer sie eingestellt hat, wie viele Bilder,
   wie lange sie noch steht. Kleiner als der Rest, aber in normaler Schrift —
   .tiny schreibt in Großbuchstaben, und ein Name in Versalien schreit. */
.brettZeile{font-size:.76rem;color:var(--tx2);line-height:1.35;margin-top:2px;}
/* Ein Fehler sieht anders aus als eine Bestätigung. Beide verschwinden von
   selbst — der Fehler bleibt aber lange genug stehen, um ihn zu lesen. */
.toast.fehlerToast{background:var(--red);}

/* --- Wenn es am Handy klingelt ---
   Wer im Dienst ist, hat keine Hand frei für ein Menü: großer Name,
   großer Knopf, sonst nichts. */
.rufHuelleHandy{position:absolute;inset:0;z-index:70;background:rgba(20,24,20,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;}
.rufKastenHandy{width:100%;background:var(--card);border:2px solid var(--a);
  border-radius:20px;padding:22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.3);}
.rufKastenHandy.dringend{border-color:var(--amber);background:var(--amber-soft);}

/* --------------------------------------------------------- Fernhilfe */
/* Der Balken, der stehen bleibt, solange jemand zusieht.
 *
 * Er steht ÜBER allem und lässt sich nicht wegklicken — nur beenden. Eine
 * Sitzung, die man vergisst, ist keine Zustimmung mehr, sondern nur ein
 * einmaliges Ja. Und wer tippen darf, färbt den Balken kräftiger: Das ist
 * ein anderer Zustand, und er soll sich auch anders anfühlen. */
.fernBalken {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  background: var(--amber-soft, #F6E7C1);
  color: #3A2F12;
  border-bottom: 2px solid #C79A2E;
  font-weight: 600;
}
.fernBalken.steuert {
  background: #F3D7D7; color: #4A1F1F; border-bottom-color: #B84A4A;
}
.fernBalken .btn { width: auto; padding: 6px 12px; }

/* --------------------------------------------- Die Pflegedokumentation
 *
 * `.durch` ist der durchgestrichene, berichtigte Eintrag. Er wird nicht
 * ausgeblendet: § 630f Abs. 1 S. 2 BGB verlangt, dass der ursprüngliche
 * Inhalt erkennbar bleibt.
 */
.zeile{display:flex;gap:12px;align-items:flex-start;
       padding:10px 0;border-top:1px solid var(--ln);}
.zeile:first-of-type{border-top:0;}
.zeile.erledigt{opacity:.72;}
.zeile.alt{opacity:.7;}
.durch{text-decoration:line-through;}

/* Betäubungsmittel und offene Anordnungen fallen auf — sie müssen. */
.btmzeichen{display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;padding:1px 6px;margin-left:6px;border-radius:6px;
  background:#7A2E2E;color:#fff;vertical-align:middle;}
.warnzeile{font-size:.85rem;color:#8A4B00;border-left:3px solid #C9821A;
  padding-left:8px;margin-top:4px;}