/* =====================================================
   APOTHEKEN-APP - Oberfläche (apotheke.alltagsallianz.de)
   Das Stylesheet des Prototyps apotheke.4.html, unverändert (Farben, Raster, Tabellen, Dialoge, Landingpage, Signaturfeld).
   Einzige Abweichung: Die Schrift Newsreader (SIL Open Font License) wird NICHT von Google nachgeladen, sondern liegt auf dem eigenen
   Server (assets/fonts/newsreader.woff2, Latin-Ausschnitt): aus einer Gesundheitsanwendung darf keine Verbindung zu Dritten entstehen,
   und die Content-Security-Policy erlaubt nur eigene Quellen.
   ===================================================== */
@font-face{font-family:Newsreader;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/newsreader.woff2") format("woff2")}
:root{
  --mark:#0F766E; --mark-d:#115E59; --mark-h:#0D5F59;
  --mark-l:#EDFBF7; --mark-b:#BFE8E0;
  --text:#101C1A; --sub:#5A6B68; --hint:#8A9996;
  --border:#E2E8E7; --border-s:#CFD8D6;
  --surface:#FFFFFF; --surface2:#F6F9F8; --fond:#F1F5F4;
  --gut:#15803D; --gut-l:#ECFDF3;
  --acht:#B45309; --acht-l:#FEF6E7;
  --danger:#B42318; --danger-l:#FEF1F0;
  --neutral:#475467; --neutral-l:#F2F4F7;
  --schatten:0 1px 2px rgba(16,28,26,.05);
  --schatten-m:0 4px 16px rgba(16,28,26,.09);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--fond); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  font-size:13.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--mark);text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit}

/* ── Grundraster ──────────────────────────────────────────── */
.huelle{display:flex;flex-direction:column;min-height:100vh}
.inhalt{flex:1;width:100%;max-width:1320px;margin:0 auto;padding:22px 22px 60px}
@media(max-width:700px){ .inhalt{padding:16px 13px 48px} }

/* ── Kopfzeile ────────────────────────────────────────────── */
.kopf{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.kopf-in{max-width:1320px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:16px;height:60px}
@media(max-width:700px){ .kopf-in{padding:0 13px;height:56px;gap:10px} }
.mark{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mark-ic{width:32px;height:32px;border-radius:9px;background:var(--mark);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.mark-t{font-size:14.5px;font-weight:700;letter-spacing:-.015em;display:block;line-height:1.2}
.mark-s{font-size:10px;color:var(--hint);letter-spacing:.1em;text-transform:uppercase;display:block}
.kopf-nav{display:flex;gap:4px;margin-left:14px;overflow-x:auto;scrollbar-width:none}
.kopf-nav::-webkit-scrollbar{display:none}
.nv{padding:7px 14px;border-radius:9px;border:1px solid transparent;background:none;
  font-size:13px;font-weight:600;color:var(--sub);cursor:pointer;white-space:nowrap;display:flex;
  align-items:center;gap:7px}
.nv:hover{background:var(--surface2);color:var(--text)}
.nv.an{background:var(--mark-l);border-color:var(--mark-b);color:var(--mark-d)}
.nv-z{font-size:11px;font-weight:700;background:var(--surface2);border:1px solid var(--border);
  border-radius:20px;padding:1px 7px;color:var(--sub)}
.nv.an .nv-z{background:#fff;border-color:var(--mark-b);color:var(--mark-d)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.ich{text-align:right;line-height:1.25}
.ich b{display:block;font-size:12.5px;font-weight:650}
.ich span{display:block;font-size:11px;color:var(--hint)}
@media(max-width:860px){ .ich{display:none} .kopf-nav{margin-left:4px} }
@media(max-width:760px){
  .kopf-in{height:auto;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;row-gap:8px}
  .kopf-nav{order:3;width:100%;margin-left:0}
  .nv{flex:1;justify-content:center}
  .kopf-rechts{margin-left:auto}
}

/* ── Knöpfe ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:9px;border:1px solid var(--border-s);background:var(--surface);
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer;line-height:1.3;
  transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--mark);color:var(--mark-d)}
.btn.bp{background:var(--mark);border-color:var(--mark);color:#fff}
.btn.bp:hover{background:var(--mark-h);border-color:var(--mark-h);color:#fff}
.btn.bs{background:var(--surface);color:var(--text)}
.btn.bg{background:var(--surface2)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:7px;gap:5px}
.btn.bl{padding:11px 20px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.voll{width:100%}

/* ── Flächen ──────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:var(--schatten);overflow:hidden}
.p-kopf{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.p-kopf h3{font-size:14px;font-weight:700;letter-spacing:-.01em}
.p-kopf .rechts{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.p-body{padding:16px 18px}
.p-fuss{padding:12px 18px;border-top:1px solid var(--border);background:var(--surface2)}

/* ── Marken, Abzeichen ───────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:2.5px 8px;border-radius:20px;border:1px solid;white-space:nowrap;line-height:1.45}
.bg-g{background:var(--gut-l);border-color:#BBF7D0;color:#15803D}
.bg-a{background:var(--acht-l);border-color:#FDE4B8;color:#B45309}
.bg-d{background:var(--danger-l);border-color:#FECDCA;color:#B42318}
.bg-n{background:var(--neutral-l);border-color:#E4E7EC;color:#475467}
.bg-m{background:var(--mark-l);border-color:var(--mark-b);color:var(--mark-d)}

/* ── Texte ────────────────────────────────────────────────── */
.fhint{font-size:11.5px;color:var(--hint);line-height:1.65}
.fsub{font-size:12px;color:var(--sub);line-height:1.6}
.ueber{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--hint)}
h1.titel{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
@media(max-width:700px){ h1.titel{font-size:18px} }

/* ── Seitenkopf ───────────────────────────────────────────── */
.skopf{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.skopf .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ── Kennzahlen ───────────────────────────────────────────── */
.kz-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:18px}
.kz{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  box-shadow:var(--schatten)}
.kz b{display:block;font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.kz span{display:block;font-size:11.5px;color:var(--sub);margin-top:3px;line-height:1.45}
.kz.hell{background:var(--mark-l);border-color:var(--mark-b)}
.kz.hell b{color:var(--mark-d)}
.kz.warn{background:var(--acht-l);border-color:#FDE4B8}
.kz.warn b{color:#B45309}
.kz.rot{background:var(--danger-l);border-color:#FECDCA}
.kz.rot b{color:#B42318}

/* ── Tabellen ─────────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tb{width:100%;border-collapse:collapse;font-size:12.5px;min-width:620px}
table.tb th{text-align:left;padding:10px 14px;background:var(--surface2);
  border-bottom:1px solid var(--border);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--hint);white-space:nowrap}
table.tb td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tb tr:last-child td{border-bottom:none}
table.tb tbody tr.klick{cursor:pointer}
table.tb tbody tr.klick:hover{background:var(--mark-l)}
table.tb td.r,table.tb th.r{text-align:right}
@media(max-width:760px){
  table.tb{min-width:520px;font-size:12px}
  table.tb th,table.tb td{padding:9px 10px}
  table.tb th.opt,table.tb td.opt{display:none}
}
.tb-leer{padding:34px 18px;text-align:center;color:var(--hint);font-size:12.5px}

/* ── Formulare ────────────────────────────────────────────── */
.ff{margin-bottom:13px}
label.fl{display:block;font-size:11.5px;font-weight:650;color:var(--sub);margin-bottom:4px}
.fi,.fs,.fa{width:100%;padding:9px 11px;border:1px solid var(--border-s);border-radius:8px;
  background:var(--surface);font-size:13px;color:var(--text);outline:none}
.fi:focus,.fs:focus,.fa:focus{border-color:var(--mark);box-shadow:0 0 0 3px rgba(15,118,110,.11)}
.fa{min-height:72px;resize:vertical;line-height:1.55}
.fi.fehl,.fs.fehl{border-color:var(--danger);background:var(--danger-l)}
.ff-fehl{font-size:11px;color:var(--danger);margin-top:4px;font-weight:600}
.fgitter{display:grid;gap:13px}
.fg2{grid-template-columns:1fr 1fr}
.fg3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:620px){ .fg2,.fg3{grid-template-columns:1fr} }
.suchfeld{position:relative;flex:1;min-width:190px}
.suchfeld input{width:100%;padding:9px 11px 9px 32px;border:1px solid var(--border-s);
  border-radius:9px;font-size:13px;outline:none;background:var(--surface)}
.suchfeld input:focus{border-color:var(--mark)}
.suchfeld span{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--hint);pointer-events:none}

/* ── Angaben ──────────────────────────────────────────────── */
.ar{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.ar:last-child{border-bottom:none}
.ar>span:first-child{width:160px;flex-shrink:0;color:var(--sub)}
.ar>span:last-child{flex:1;font-weight:600;min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){ .ar{flex-direction:column;gap:1px} .ar>span:first-child{width:auto;font-size:11px} }

/* ── Beratungsbanner (aus dem Standortportal) ─────────────── */
.be-banner{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;
  flex-wrap:wrap;background:var(--mark-l);transition:background .12s}
.be-banner:hover{background:#E3F7F2}
.be-ic{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--mark-b);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}

/* ── Dialoge ──────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(16,28,26,.42);z-index:90;display:flex;
  align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dlg{background:var(--surface);border-radius:15px;box-shadow:0 18px 56px rgba(16,28,26,.28);
  width:100%;max-width:620px;overflow:hidden;animation:auf .14s ease-out}
.dlg.schmal{max-width:430px}
.dlg.breit{max-width:860px}
@keyframes auf{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.dlg-kopf{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;
  align-items:center;gap:12px}
.dlg-kopf h3{font-size:15px;font-weight:700;flex:1;letter-spacing:-.01em}
.dlg-zu{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:none;
  cursor:pointer;color:var(--sub);font-size:15px;flex-shrink:0}
.dlg-zu:hover{background:var(--surface2);color:var(--text)}
.dlg-body{padding:20px}
.dlg-fuss{padding:14px 20px;border-top:1px solid var(--border);background:var(--surface2);
  display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}

/* ── Meldungen ────────────────────────────────────────────── */
#melder{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;
  gap:8px;max-width:360px}
@media(max-width:560px){ #melder{left:13px;right:13px;bottom:13px;max-width:none} }
.mld{background:var(--text);color:#fff;padding:11px 15px;border-radius:10px;font-size:12.5px;
  box-shadow:var(--schatten-m);line-height:1.5;animation:auf .14s ease-out}
.mld.ok{background:#14532D}
.mld.warnung{background:#7C2D12}
.mld.fehler{background:#7F1D1D}

/* ── Hinweiskasten ────────────────────────────────────────── */
.merker{background:var(--mark-l);border:1px solid var(--mark-b);border-radius:11px;
  padding:14px 16px;font-size:12.5px;line-height:1.7;color:var(--mark-d)}
.merker b{font-weight:700}
.warner{background:var(--acht-l);border:1px solid #FDE4B8;border-radius:11px;
  padding:14px 16px;font-size:12.5px;line-height:1.7;color:#92400E}

/* ══ Landingpage und Anmeldung ═══════════════════════════════
   Ruhiges Papierweiß, nur Konturen statt Schatten, ein einziger
   Serif-Moment in der Überschrift. Die kräftige Farbe kommt
   ausschließlich im Bildfeld der Nebenkarte vor.
   ═══════════════════════════════════════════════════════════ */
.lp{min-height:100vh;background:#fff;display:flex;flex-direction:column}
.lp-kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 28px}
.lp-mark{display:flex;align-items:center;gap:11px}
.lp-mark-ic{width:36px;height:36px;border-radius:10px;background:var(--mark);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.lp-mark-t b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em;
  line-height:1.2;color:#121A18}
.lp-mark-t i{display:block;font-size:11.5px;font-style:normal;color:#6C7B78;line-height:1.3}
.lp-pill{border:2px solid #121A18;border-radius:11px;background:#fff;color:#121A18;
  padding:11px 19px;font-size:14px;font-weight:700;cursor:pointer;line-height:1.2}
.lp-pill:hover{background:#121A18;color:#fff}

.lp-mitte{flex:1;display:flex;justify-content:center;align-items:flex-start;gap:52px;
  padding:30px 28px 90px;flex-wrap:wrap}
.lp-karte{width:552px;max-width:100%;border:1px solid #E4E8E7;border-radius:15px;
  padding:40px 46px 34px;background:#fff}
.lp-region{text-align:right;font-size:12.5px;color:#6C7B78;margin-bottom:26px}
.lp-region b{color:#121A18;font-weight:600}
.lp-h1{font-family:Newsreader,Georgia,'Times New Roman',serif;font-weight:400;
  font-size:43px;line-height:1.14;letter-spacing:-.012em;text-align:center;color:#121A18;
  margin-bottom:28px}
.lp-gross{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:1px solid #1C2422;border-radius:999px;background:#fff;color:#121A18;
  padding:14px 20px;font-size:14.5px;font-weight:600;cursor:pointer;line-height:1.3}
.lp-gross:hover{background:#F4F7F6}
.lp-gross-ic{width:21px;height:21px;border-radius:5px;background:#121A18;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.lp-unter{text-align:center;font-size:11.5px;color:#8B9794;margin-top:9px}
.lp-oder{display:flex;align-items:center;gap:16px;margin:22px 0;font-size:12.5px;
  color:#8B9794}
.lp-oder::before,.lp-oder::after{content:"";flex:1;height:1px;background:#E4E8E7}
.lp-feld{margin-bottom:17px}
.lp-feld label{display:block;font-size:13px;color:#121A18;margin-bottom:7px}
.lp-feld input,.lp-feld select{width:100%;padding:13px 15px;border:1px solid #1C2422;
  border-radius:9px;font-size:14px;color:#121A18;background:#fff;outline:none;
  font-family:inherit}
.lp-feld select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23121A18' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.lp-feld input::placeholder{color:#A6B0AE}
.lp-feld input:focus,.lp-feld select:focus{box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.lp-feld.fehl input,.lp-feld.fehl select{border-color:var(--danger);background:#FEF6F5}
.lp-hint{font-size:12px;color:#6C7B78;margin-top:7px;line-height:1.55}
.lp-fehl{font-size:12px;color:var(--danger);font-weight:600;margin-top:7px}
.lp-pw{position:relative}
.lp-pw button{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;
  background:none;cursor:pointer;color:#6C7B78;padding:4px 4px;line-height:0;display:flex}
.lp-pw button:hover{color:#121A18}
.lp-reihe{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:4px 0 22px;flex-wrap:wrap}
.lp-merk{display:flex;align-items:center;gap:9px;font-size:13px;color:#121A18;cursor:pointer}
.lp-merk input{width:17px;height:17px;accent-color:#121A18;cursor:pointer;margin:0}
.lp-text-link{font-size:13px;color:#121A18;text-decoration:underline;text-underline-offset:3px;
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.lp-text-link:hover{color:var(--mark)}
.lp-weiter{width:100%;border:none;border-radius:999px;background:#121A18;color:#fff;
  padding:15px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit}
.lp-weiter:hover{background:#0A100F}
.lp-fuss-link{text-align:center;margin-top:22px}

.lp-neben{width:420px;max-width:100%;border:1px solid #E4E8E7;border-radius:15px;
  padding:18px 18px 22px;background:#fff}
.lp-bild{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(118deg,#0F766E 0%,#2F8F82 42%,#BFD8CF 100%);
  display:flex;align-items:flex-end;padding:22px 24px}
.lp-bild-m{position:absolute;top:19px;left:24px;width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px}
.lp-bild-w{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:40px;
  color:#fff;line-height:1;letter-spacing:-.01em}
.lp-meta{font-size:13px;font-weight:700;color:#121A18;margin:20px 0 10px}
.lp-neben h3{font-size:21px;font-weight:500;line-height:1.32;color:#121A18;
  letter-spacing:-.005em;margin-bottom:16px}
.lp-ecke-l{position:fixed;left:20px;bottom:18px;z-index:20}
.lp-blase{position:fixed;right:22px;bottom:20px;z-index:20;width:54px;height:54px;
  border-radius:50%;background:#121A18;color:#fff;border:none;cursor:pointer;font-size:21px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(18,26,24,.26)}
.lp-blase:hover{background:var(--mark)}
.lp-liste{border-top:1px solid #E4E8E7}
.lp-liste>div{padding:13px 0;border-bottom:1px solid #E4E8E7}
.lp-liste b{display:block;font-size:13.5px;font-weight:650;color:#121A18}
.lp-liste span{display:block;font-size:12.5px;color:#6C7B78;line-height:1.65;margin-top:3px}
.lp-liste a{color:var(--mark);text-decoration:underline;text-underline-offset:2px}

/* ── Personenauswahl nach der Anmeldung ───────────────────── */
.lp-wer{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.lp-person{display:flex;align-items:center;gap:13px;width:100%;padding:13px 15px;
  border:1px solid #E4E8E7;border-radius:11px;background:#fff;cursor:pointer;
  font-family:inherit;text-align:left;transition:border-color .12s,background .12s}
.lp-person:hover{border-color:var(--mark);background:var(--mark-l)}
.lp-person-ic{width:36px;height:36px;border-radius:50%;background:var(--mark-l);
  border:1px solid var(--mark-b);color:var(--mark-d);display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.lp-person b{display:block;font-size:13.5px;font-weight:650;color:#121A18}
.lp-person i{display:block;font-size:11.5px;font-style:normal;color:#6C7B78;margin-top:1px}
.lp-person>span:nth-child(2){flex:1;min-width:0}
.lp-person-pfeil{color:#A6B0AE;font-size:19px;flex-shrink:0;line-height:1}

/* ── Abschnitte der Landingpage ───────────────────────────── */
.lp-sek{border-top:1px solid #E4E8E7;padding:64px 28px}
.lp-sek.hell{background:#F7FAF9}
.lp-sek-in{max-width:980px;margin:0 auto}
.lp-sek-kopf{margin-bottom:26px}
.lp-sek-kopf h2{font-family:Newsreader,Georgia,'Times New Roman',serif;font-weight:400;
  font-size:34px;line-height:1.2;letter-spacing:-.01em;color:#121A18;margin-bottom:12px}
.lp-sek-kopf p{font-size:14px;line-height:1.75;color:#5A6B68;max-width:70ch}
.lp-sek-fuss{font-size:12.5px;color:#8B9794;line-height:1.7;margin-top:18px}
.lp-fuss-sek{border-top:1px solid #E4E8E7;padding:34px 28px 110px;background:#fff}
.lp-fuss-sek p{font-size:12px;color:#8B9794;line-height:1.85;text-align:center}

/* ── Preisblock ───────────────────────────────────────────── */
.lp-preis{display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--mark-b);background:var(--mark-l);border-radius:13px;
  padding:20px 24px;margin-bottom:24px}
.lp-preis-z{display:block;font-family:Newsreader,Georgia,serif;font-size:40px;font-weight:400;
  color:var(--mark-d);line-height:1;letter-spacing:-.01em}
.lp-preis-t{display:block;font-size:12.5px;color:var(--mark-d);margin-top:6px;max-width:26ch;
  line-height:1.55}
.lp-preis-n{display:flex;gap:7px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.lp-preis-n span{font-size:12px;font-weight:600;color:var(--mark-d);background:#fff;
  border:1px solid var(--mark-b);border-radius:20px;padding:5px 12px;white-space:nowrap}
@media(max-width:620px){
  .lp-sek{padding:44px 16px}
  .lp-sek-kopf h2{font-size:27px}
  .lp-preis{padding:16px 17px;gap:16px}
  .lp-preis-z{font-size:33px}
  .lp-preis-n{justify-content:flex-start}
  .lp-fuss-sek{padding:28px 16px 110px}
}

@media(max-width:1060px){
  .lp-mitte{gap:34px;padding:22px 20px 96px}
  .lp-neben{width:552px}
}
@media(max-width:620px){
  .lp-kopf{padding:16px 16px}
  .lp-mitte{padding:16px 16px 96px}
  .lp-karte{padding:28px 22px 26px;border-radius:13px}
  .lp-h1{font-size:33px}
  .lp-bild-w{font-size:30px}
  .lp-blase{width:48px;height:48px;right:14px;bottom:14px}
  .lp-ecke-l{left:14px;bottom:16px}
  .lp-pill{font-size:13px;padding:9px 14px;border-radius:9px}
  .lp-mark-ic{width:32px;height:32px;border-radius:9px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }

/* ── Fälligkeitsraster ────────────────────────────────────── */
.raster{display:inline-flex;gap:4px;flex-wrap:wrap}
.rf{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:6px;border:1px solid;white-space:nowrap;line-height:1.5;
  font-variant-numeric:tabular-nums;cursor:default}
.rf-g{background:var(--gut-l);border-color:#BBF7D0;color:#15803D}
.rf-a{background:var(--acht-l);border-color:#FDE4B8;color:#B45309}
.rf-d{background:var(--danger-l);border-color:#FECDCA;color:#B42318}
.rf-n{background:var(--surface2);border-color:var(--border);color:var(--hint)}
.rf-k{background:transparent;border-color:var(--border);border-style:dashed;color:var(--hint)}
.legende{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.legende-s{flex:1;min-width:245px;display:flex;gap:11px;align-items:flex-start}
.legende-n{width:30px;height:30px;border-radius:8px;background:var(--mark-l);
  border:1px solid var(--mark-b);color:var(--mark-d);display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}

/* ── Signaturfeld ─────────────────────────────────────────── */
.sig-feld{border:1px dashed var(--border-s);border-radius:10px;background:var(--surface2);
  position:relative;overflow:hidden}
.sig-feld canvas{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair}
.sig-linie{position:absolute;left:22px;right:22px;bottom:34px;border-bottom:1px solid #B9C4C2;
  pointer-events:none}
.sig-platz{position:absolute;left:22px;bottom:16px;font-size:10.5px;color:var(--hint);
  pointer-events:none}
.sig-bild{border:1px solid var(--border);border-radius:9px;background:#fff;padding:7px;
  max-width:330px}
.sig-bild img{display:block;width:100%;height:auto}

/* ── Chips ────────────────────────────────────────────────── */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5.5px 11px;border-radius:20px;border:1px solid var(--border-s);background:var(--surface);
  font-size:11.5px;font-weight:650;color:var(--sub);cursor:pointer;line-height:1.4}
.chip:hover{border-color:var(--mark)}
.chip.an{background:var(--mark);border-color:var(--mark);color:#fff}

/* ── Werkleiste ───────────────────────────────────────────── */
.wl{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

/* ── Fußzeile ─────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--border);background:var(--surface);padding:18px 22px;
  text-align:center}
@media print{ .kopf,#melder,.btn,.fuss{display:none !important} body{background:#fff} }