:root{--grund:#f4f2f0;--flaeche:#fff;--text:#1d1b1a;--leise:#6e6661;--linie:#e3ddd8;--kunde:#8c2f55;--auf-kunde:#fff;--gut:#2f6b4a;--gut-hell:#e2f0e8;--warn:#8a6200;--warn-hell:#f6ecd0;--fehl:#a3271f;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grund:#141211;--flaeche:#1f1c1b;--text:#efe9e6;--leise:#a69c96;--linie:#39322f;--kunde:#e58fb0;--auf-kunde:#1d1b1a;--gut:#7fc49d;--gut-hell:#1f3329;--warn:#e0b85a;--warn-hell:#3a3018;--fehl:#f08a80;color-scheme:dark}}
:root[data-theme="dark"]{--grund:#141211;--flaeche:#1f1c1b;--text:#efe9e6;--leise:#a69c96;--linie:#39322f;--kunde:#e58fb0;--auf-kunde:#1d1b1a;--gut:#7fc49d;--gut-hell:#1f3329;--warn:#e0b85a;--warn-hell:#3a3018;--fehl:#f08a80;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--grund);color:var(--text);font:16px/1.5 "Source Sans 3","Segoe UI",system-ui,sans-serif}
.rahmen{max-width:440px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
header{padding:14px 16px 10px;display:flex;align-items:center;gap:12px}
header>div:nth-child(2){flex:1;min-width:0}
.logo{width:40px;height:40px;flex:none;border-radius:50%;background:var(--kunde);color:var(--auf-kunde);display:grid;place-items:center;font-weight:700}
header small{color:var(--leise);display:block;font-size:.8rem}
header b{font-size:1.05rem;display:block;overflow-wrap:anywhere}
main{flex:1;padding:6px 16px 96px;display:flex;flex-direction:column;gap:12px}
section{display:flex;flex-direction:column;gap:12px}
[hidden]{display:none!important}
h2{font-size:1.25rem;margin:6px 0 0;text-wrap:balance}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px}
.karte h3{margin:0 0 2px;font-size:1rem}
.karte p{margin:0;color:var(--leise);font-size:.93rem}
label{font-size:.85rem;color:var(--leise);margin-top:6px}
input,select{width:100%;padding:10px;border:1px solid var(--linie);border-radius:8px;background:var(--grund);color:var(--text);font:inherit}
input:disabled,select:disabled{opacity:.7}
.paar{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.paar>div{display:flex;flex-direction:column;gap:6px;min-width:0}
button.haupt,a.knopf{margin-top:10px;display:block;width:100%;padding:11px;border:0;border-radius:8px;background:var(--kunde);color:var(--auf-kunde);font:inherit;font-weight:600;cursor:pointer;text-align:center;text-decoration:none}
button.haupt:disabled{opacity:.6;cursor:default}
button.leise{border:1px solid var(--linie);background:none;color:var(--leise);font:inherit;font-size:.85rem;padding:6px 10px;border-radius:8px;cursor:pointer}
button.klein{border:1px solid var(--linie);background:none;color:var(--fehl);font:inherit;font-size:.8rem;padding:4px 8px;border-radius:8px;cursor:pointer}
:focus-visible{outline:3px solid var(--kunde);outline-offset:2px}
.zeile{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linie);font-size:.95rem}
.zeile:last-child{border-bottom:0;padding-bottom:0}
.zeile>span:first-child{min-width:0;overflow-wrap:anywhere}
.zeile>span:last-child{color:var(--leise);text-align:right;font-variant-numeric:tabular-nums}
.zeile small{display:block;color:var(--leise)}
.pille{font-size:.76rem;padding:2px 8px;border-radius:99px;white-space:nowrap;background:var(--linie);color:var(--leise)}
.pille.ok{background:var(--gut-hell);color:var(--gut)}
.meldung{min-height:1.4em;font-size:.9rem}
.meldung.gut{color:var(--gut)}.meldung.fehl{color:var(--fehl)}
.zl{border-left:2px solid var(--linie);margin-left:6px;padding-left:14px;display:flex;flex-direction:column;gap:14px}
.zl div{position:relative;font-size:.95rem}
.zl div::before{content:"";position:absolute;left:-20px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--kunde)}
.zl small{color:var(--leise);display:block;font-variant-numeric:tabular-nums}
nav{position:fixed;bottom:0;left:0;right:0;background:var(--flaeche);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom,0px)}
nav div{max-width:440px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
nav button{border:0;background:none;color:var(--leise);font:inherit;font-size:.78rem;padding:10px 2px 9px;cursor:pointer;border-top:3px solid transparent}
nav button[aria-current="true"]{color:var(--kunde);border-top-color:var(--kunde);font-weight:700}