/* „Deine offenen Punkte": Mikro-Knopf, Sammel-Leiste, Übersicht. Gemeinsamer Baustein für alle Seiten.
   Farben nur aus Tokens; Fallbacks für Seiten ohne eigene Tokens (Rechtsseiten). Bewegung nur transform/opacity. */
:root{
  --op-p:var(--p,#5c0060); --op-pm:var(--pm,#8b1a5e); --op-pk:var(--pk,#c4325a);
  --op-pink:var(--pink,#e879a0); --op-pink2:var(--pink2,#f0a0b8);
  --op-scrim:#220d28; --op-scrim-a:rgba(34,13,40,.82);
  --op-line:rgba(255,255,255,.14); --op-muted:rgba(255,255,255,.72);
  --op-paper:#faf7fa; --op-ink:#1a1a1a; --op-sub:#555555; --op-sel:#fce8f4; --op-pline:#e8d5e0;
  --op-h:64px;                                                   /* Höhe der Leiste */
  --op-space:calc(var(--op-h) + env(safe-area-inset-bottom,0px)); /* mobil: volle Breite unten */
}
@media (min-width:768px){:root{--op-space:calc(var(--op-h) + 32px);}} /* Desktop: schwebend mit Abstand */

/* Ohne JavaScript: Mikro-Knöpfe und Übersicht-Links ausgeblendet (bestehende Termin-Links bleiben) */
html:not(.op-js) .op-mini,html:not(.op-js) .op-linkwrap{display:none!important;}

/* ---------- Mikro-Knopf „Möchte ich klären" / „Notiert ✓" ---------- */
.op-mini{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:10px 20px;
  border-radius:999px;border:1.5px solid currentColor;background:transparent;font:inherit;font-size:.9375rem;font-weight:700;
  line-height:1.2;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;}
.op-mini:focus-visible{outline:2px solid var(--op-pink2);outline-offset:3px;}
/* dunkler Grund (Karten, /altersvorsorge) */
.op-mini{color:#fff;border-color:rgba(255,255,255,.6);}
.op-mini:hover{color:var(--op-pink2);border-color:var(--op-pink2);}
.op-mini[aria-pressed="true"]{color:#fff;border-color:var(--op-pink);background:rgba(232,121,160,.18);}
/* heller Grund (Szenen) */
.op-light .op-mini{color:var(--op-p);border-color:var(--op-p);}
.op-light .op-mini:hover{color:var(--op-pm);border-color:var(--op-pm);background:var(--op-sel);}
.op-light .op-mini[aria-pressed="true"]{color:var(--op-p);border-color:var(--op-p);background:var(--op-sel);}
.op-light .op-mini:focus-visible{outline-color:var(--op-p);}

/* Link „Deine offenen Punkte ansehen" */
.op-linkwrap{margin:24px 0 0;}
.op-linkbtn{display:inline-flex;align-items:center;min-height:48px;padding:0;border:0;background:none;font:inherit;font-weight:650;
  color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;}
.op-linkbtn:focus-visible{outline:2px solid var(--op-pink2);outline-offset:3px;border-radius:4px;}
.op-light .op-linkbtn{color:var(--op-p);}
.op-light .op-linkbtn:focus-visible{outline-color:var(--op-p);}

/* ---------- Sammel-Leiste ---------- */
.op-bar{position:fixed;z-index:130;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--op-h);padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  box-sizing:content-box;background:var(--op-scrim);color:#fff;border-top:1px solid var(--op-line);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  transform:none;opacity:1;transition:transform .28s ease,opacity .28s ease;}
.op-bar[hidden]{display:none;}
.op-bar.is-in{transform:translateY(100%);opacity:0;transition:none;}
.op-count{display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:48px;padding:0 12px;margin-left:-12px;border:0;border-radius:12px;
  background:none;color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;touch-action:manipulation;}
.op-count:hover{color:var(--op-pink2);}
.op-chev{width:16px;height:16px;flex:none;}
.op-book{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 24px;border-radius:999px;
  background:var(--op-pk);color:#fff;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;
  border:1.5px solid var(--op-pk);touch-action:manipulation;transition:box-shadow .2s ease,background-color .2s ease;}
.op-book:hover{color:#fff;box-shadow:0 0 22px rgba(196,50,90,.55);}
.op-count:focus-visible,.op-book:focus-visible,.op-close:focus-visible,.op-rm:focus-visible{outline:2px solid var(--op-pink2);outline-offset:3px;}
@media (min-width:768px){
  .op-bar{left:auto;right:24px;bottom:24px;border:1px solid var(--op-line);border-radius:999px;padding:8px 8px 8px 24px;
    box-shadow:0 12px 32px rgba(20,6,26,.45);gap:20px;}
  .op-bar.is-in{transform:translateY(24px);}
}
/* Platz unten reservieren, damit Fuß und Rechtslinks erreichbar bleiben */
html.has-op body{padding-bottom:var(--op-space);}
html.has-op .scene-layout-preview .scene-content{padding-bottom:calc(32px + var(--op-space));}
html.has-op .card{padding-bottom:calc(28px + var(--op-space));}
@media (min-width:768px){html.has-op .card{padding-bottom:32px;}}

/* ---------- Übersicht ---------- */
.op-layer{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
.op-layer[hidden]{display:none;}
.op-scrim{position:absolute;inset:0;background:var(--op-scrim-a);opacity:0;transition:opacity .25s ease;touch-action:none;}
.op-sheet{position:relative;width:100%;max-height:88svh;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));background:var(--op-scrim);color:#fff;
  border-top:1px solid var(--op-line);border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .3s ease;}
.op-layer.is-open .op-scrim{opacity:1;}
.op-layer.is-open .op-sheet{transform:none;}
.op-close{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:1px solid var(--op-line);
  background:none;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;}
.op-close:hover{border-color:var(--op-pink2);color:var(--op-pink2);}
/* Porträt: Ausschnitt aufs Gesicht (Gesicht im Bild bei ca. 54 % / 26 %) */
.op-picwrap{position:relative;display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,.18);background:var(--op-pm);box-sizing:border-box;}
.op-pic{position:absolute;left:-29px;top:-1px;width:112px;height:auto;max-width:none;}
.op-title{margin:12px 56px 6px 0;font-size:1.375rem;line-height:1.2;font-weight:750;letter-spacing:-.02em;color:#fff;}
.op-title:focus{outline:none;}
.op-lead{margin:0 0 16px;font-size:.9375rem;line-height:1.5;color:var(--op-muted);}
.op-list{margin:0 0 20px;}
.op-group{padding:12px 0;border-top:1px solid var(--op-line);}
.op-gname{margin:0 0 4px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--op-pink2);}
.op-items{list-style:none;margin:0;padding:0;}
.op-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;}
.op-text{font-size:1rem;line-height:1.35;color:#fff;}
.op-flag{display:inline-block;margin-left:4px;padding:1px 8px;border:1px solid var(--op-pink);border-radius:999px;
  font-size:.75rem;font-weight:700;color:var(--op-pink2);white-space:nowrap;}
.op-rm{flex:none;min-height:48px;min-width:48px;padding:0 4px;border:0;background:none;color:var(--op-muted);font:inherit;font-size:.875rem;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.op-rm:hover{color:var(--op-pink2);}
.op-book-wide{display:flex;width:100%;min-height:56px;}
@media (min-width:768px){
  .op-layer{align-items:center;}
  .op-sheet{max-width:460px;max-height:80vh;border:1px solid var(--op-line);border-radius:20px;padding:32px;
    transform:translateY(12px);opacity:0;transition:transform .25s ease,opacity .25s ease;}
  .op-layer.is-open .op-sheet{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .op-bar,.op-scrim,.op-sheet,.op-mini{transition:none!important;}
}