/* =========================================================
   MiniMe – Design-System v2  (kein Framework)
   Farbwelten (data-palette) × Hell/Dunkel (data-theme)
   Ansichten (data-view: dashboard | book)
   ========================================================= */

:root {
  /* Flächen / Schrift – HELL */
  --paper:      #f4f1ea;
  --paper-2:    #efeae1;
  --surface:    #ffffff;
  --surface-2:  #f3eee5;
  --ink:        #2b2823;
  --ink-soft:   #6b665e;
  --ink-faint:  #9b958b;
  --line:       rgba(43,40,35,.10);
  --line-2:     rgba(43,40,35,.18);

  /* Akzent (Default = neutral/Terrakotta) */
  --accent:      #c25e3a;
  --accent-ink:  #8c3f23;
  --accent-soft: #f7e9e1;
  --accent-2:    #e0a07f;   /* zweite Akzentnote für Verläufe */

  /* Status */
  --ok:#2f7d57; --ok-soft:#e4f1ea;
  --warn:#a8741c; --warn-soft:#f6ecd8;
  --bad:#b23a2c; --bad-soft:#f6e2df;
  --info:#34618c; --info-soft:#e2ebf4;

  --radius:12px; --radius-lg:18px; --radius-sm:8px; --radius-pill:999px;
  --shadow-sm: 0 1px 2px rgba(43,40,35,.06);
  --shadow:    0 2px 6px rgba(43,40,35,.06), 0 12px 30px rgba(43,40,35,.06);
  --shadow-lg: 0 8px 40px rgba(43,40,35,.12);

  --font-ui:   system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-disp: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  --measure: 1180px;   /* Standard-Inhaltsbreite */
  --measure-wide: 1340px;
}

/* ---------- Farbwelten (HELL) ---------- */
[data-palette="girl"]  { --accent:#d6608a; --accent-ink:#a23a62; --accent-soft:#fae3ec; --accent-2:#eaa0bd; }
[data-palette="boy"]   { --accent:#3f78c2; --accent-ink:#2c5793; --accent-soft:#e6effb; --accent-2:#8fb6e6; }
[data-palette="mint"]  { --accent:#2f9e7d; --accent-ink:#1f6f57; --accent-soft:#e1f3ec; --accent-2:#86cfb5; }
[data-palette="ocean"] { --accent:#2b8aa6; --accent-ink:#1d6379; --accent-soft:#e1f0f5; --accent-2:#86c4d6; }

/* ---------- DUNKEL ---------- */
[data-theme="dark"] {
  --paper:#171614; --paper-2:#1d1b19; --surface:#221f1d; --surface-2:#2a2724;
  --ink:#ece8e1; --ink-soft:#a8a299; --ink-faint:#766f66;
  --line:rgba(236,232,225,.10); --line-2:rgba(236,232,225,.18);
  --accent:#e07f5c; --accent-ink:#f0a888; --accent-soft:#3a2620; --accent-2:#a35b40;
  --ok:#7cc6a0; --ok-soft:#21302a; --warn:#d9aa5c; --warn-soft:#322a1c;
  --bad:#e08378; --bad-soft:#34211f; --info:#8fb5dd; --info-soft:#1f2a36;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.32);
  --shadow-lg:0 10px 50px rgba(0,0,0,.45);
}
[data-theme="dark"][data-palette="girl"]  { --accent:#ec8fb1; --accent-ink:#f4a9c4; --accent-soft:#3a2330; --accent-2:#9c5772; }
[data-theme="dark"][data-palette="boy"]   { --accent:#76a6e4; --accent-ink:#9cc0ee; --accent-soft:#1f2c40; --accent-2:#4a6a99; }
[data-theme="dark"][data-palette="mint"]  { --accent:#6fcbac; --accent-ink:#9adcc6; --accent-soft:#1d322b; --accent-2:#3f7d68; }
[data-theme="dark"][data-palette="ocean"] { --accent:#6cbcd4; --accent-ink:#98d2e3; --accent-soft:#182e36; --accent-2:#3d7587; }

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:
    radial-gradient(1200px 480px at 100% -10%, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 60%),
    var(--paper);
  color:var(--ink); font-family:var(--font-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}

a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:none; }

h1,h2,h3 { font-family:var(--font-disp); font-weight:600; line-height:1.22; margin:0 0 .4em; letter-spacing:-.01em; }
h1{font-size:1.8rem;} h2{font-size:1.32rem;} h3{font-size:1.08rem;}

.muted{color:var(--ink-soft);} .faint{color:var(--ink-faint);}
.small{font-size:.86rem;} .tiny{font-size:.76rem;}
.center{text-align:center;} .right{text-align:right;}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.85em;}
.nowrap{white-space:nowrap;} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}

/* ---------- Layout ---------- */
.mm-main{width:100%; max-width:var(--measure); margin:0 auto; padding:28px 22px 48px; flex:1;}
.mm-main.wide{max-width:var(--measure-wide);}
.stack>*+*{margin-top:16px;} .stack-lg>*+*{margin-top:24px;}
.row{display:flex;gap:12px;align-items:center;}
.row-between{display:flex;gap:12px;align-items:center;justify-content:space-between;}
.wrap{flex-wrap:wrap;} .grow{flex:1;min-width:0;}
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:780px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* ---------- Topbar ---------- */
.mm-topbar{position:sticky;top:0;z-index:40;background:var(--surface);background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--line);}
.mm-topbar-inner{width:100%;max-width:1680px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 26px;}
.mm-brand{font-family:var(--font-disp);font-weight:600;font-size:1.2rem;color:var(--ink);display:inline-flex;align-items:center;gap:10px;}
.mm-brand:hover{text-decoration:none;}
.mm-brand .dot{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;box-shadow:var(--shadow-sm);}
.mm-nav{display:flex;gap:3px;align-items:center;flex-wrap:nowrap;overflow:hidden;min-width:0;scrollbar-width:none;-ms-overflow-style:none;}
.mm-nav::-webkit-scrollbar{display:none;}
.mm-nav a{white-space:nowrap;}
.mm-search-menu{min-width:280px;padding:12px;}
.mm-search-menu .btn{width:100%;justify-content:center;}
.mm-search-menu .btn-primary{background:var(--accent);color:#fff;border:none;}
.mm-search-menu .btn-primary:hover{background:var(--accent-ink);color:#fff;}
.mm-nav a{color:var(--ink-soft);padding:8px 13px;border-radius:var(--radius-pill);font-size:.92rem;display:inline-flex;align-items:center;gap:7px;transition:background .14s,color .14s;}
.mm-nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.mm-nav a.active{background:var(--accent);color:#fff;}
.mm-nav a.active:hover{background:var(--accent-ink);color:#fff;}
.mm-navwrap{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;}
.mm-more{position:relative;flex:none;}
.mm-more[hidden]{display:none;}
.mm-more-btn{color:var(--ink-soft);padding:8px 13px;border-radius:var(--radius-pill);font-size:.92rem;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;font:inherit;cursor:pointer;white-space:nowrap;transition:background .14s,color .14s;}
.mm-more-btn:hover,.mm-more.open .mm-more-btn{background:var(--surface-2);color:var(--ink);}
.mm-more-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow,0 12px 30px -10px rgba(0,0,0,.28));padding:6px;display:none;z-index:60;}
.mm-more.open .mm-more-menu{display:block;}
.mm-more-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--ink-soft);font-size:.92rem;white-space:nowrap;}
.mm-more-menu a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.mm-more-menu a.active{background:var(--accent);color:#fff;}
.mm-more-menu a.active:hover{background:var(--accent-ink);color:#fff;}
.mm-more.has-active .mm-more-btn{background:var(--accent);color:#fff;}
.mm-more.has-active .mm-more-btn:hover{background:var(--accent-ink);color:#fff;}

/* Prominente Bereichs-Navigation (Tabs) innerhalb eines Moduls */
.subnav{display:flex;gap:4px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04)) inset;}
/* Sektions-Subnav in stack-lg an das native Hero/Content-Spacing angleichen (18/22px) */
.stack-lg > .subnav{margin-top:0;}
.lb-tabs{width:max-content;max-width:100%;background:var(--surface-2);border-color:transparent;box-shadow:none;margin-bottom:16px;}
.stack-lg > .subnav + *{margin-top:22px;}
/* Zweite Subnav-Ebene sitzt eng unter der ersten (wie bei wachstum/zeitleiste),
   NICHT mit dem 22px-Content-Abstand darüber. */
.stack-lg > .subnav + .subnav-2{margin-top:0;}
/* Such-Icon markiert, wenn man in Suche/Wortwolke ist */
.mm-search-btn.active,
.mm-notif-btn.active{color:var(--accent-ink);background:var(--accent-soft);}
.subnav::-webkit-scrollbar{height:0;}
.subnav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:var(--radius);color:var(--ink-soft);font-weight:600;font-size:.93rem;white-space:nowrap;line-height:1;transition:background .15s,color .15s,box-shadow .15s,transform .05s;}
.subnav a .ti{font-size:1.12rem;opacity:.9;}
.subnav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.subnav a:active{transform:translateY(1px);}
.subnav a.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px -3px var(--accent);}
.subnav a.active .ti{opacity:1;}
.subnav a.active:hover{background:var(--accent-ink);color:#fff;}
.subnav button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border:0;border-radius:var(--radius);background:transparent;color:var(--ink-soft);font:inherit;font-weight:600;font-size:.93rem;white-space:nowrap;line-height:1;cursor:pointer;transition:background .15s,color .15s,transform .05s;}
.subnav button .ti{font-size:1.12rem;opacity:.9;}
.subnav button:hover{background:var(--surface-2);color:var(--ink);}
.subnav button:active{transform:translateY(1px);}
.subnav button.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px -3px var(--accent);}
.subnav button.active .ti{opacity:1;}
.subnav button.active:hover{background:var(--accent-ink);color:#fff;}
.subnav.subnav-2{margin-bottom:14px;overflow-x:auto;white-space:nowrap;}
.mm-spacer{flex:1;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:.92rem;line-height:1;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s,transform .04s,box-shadow .12s;text-decoration:none;white-space:nowrap;}
.btn:hover{background:var(--surface-2);text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{filter:brightness(1.04);background:linear-gradient(135deg,var(--accent),var(--accent-2));}
/* Nur zwei Buttonarten: .btn (Standard) und .btn-primary (genau eine Hauptaktion je Seite).
   Alt-Klassen bleiben als Alias erhalten, damit dynamisch erzeugtes Markup nicht ausbricht. */
.btn-ghost,.btn-danger,.btn-sm,.btn-block{padding:10px 16px;font-size:.92rem;width:auto;
  background:var(--surface);border-color:var(--line-2);color:var(--ink);}
.btn-ghost:hover,.btn-danger:hover,.btn-sm:hover,.btn-block:hover{background:var(--surface-2);color:var(--ink);}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;}
.icon-btn{width:38px;height:38px;padding:0;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-soft);cursor:pointer;text-decoration:none;}
.icon-btn:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;}
.card-pad{padding:20px 22px;}
.card-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;justify-content:space-between;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 35%,transparent),transparent);}
.card-title{font-family:var(--font-disp);font-weight:600;font-size:1.06rem;display:flex;align-items:center;gap:9px;}
.card-title i{color:var(--accent);}
.card-body{padding:20px 22px;}

/* ---------- Hero (Kind-Kopf) ---------- */
.hero{position:relative;border-radius:var(--radius-lg);padding:24px;color:#fff;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow);}
.hero h1{color:#fff;margin-bottom:4px;}
.hero .muted,.hero .small{color:rgba(255,255,255,.85);}
.hero .badge{background:rgba(255,255,255,.2);color:#fff;}
.hero-emoji{position:absolute;right:-6px;bottom:-18px;font-size:120px;opacity:.16;line-height:1;}

/* ---------- Seiten-Hero (wiederverwendbar, Dashboard-Stil) ---------- */
.ph-hero{margin-bottom:18px;}
.ph-emblem{flex:none;width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.20);color:#fff;font-size:1.9rem;line-height:0;}
.ph-emblem img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ph-ring{display:block;}
.ph-ring .ph-rbg{fill:none;stroke:rgba(255,255,255,.30);stroke-width:8;}
.ph-ring .ph-rfg{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:263.9;transition:stroke-dashoffset .7s ease;}
.ph-ring .ph-rt{font-family:var(--font-disp,Georgia,serif);font-size:22px;font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:central;}
.hero .badge{background:rgba(255,255,255,.2);color:#fff;border:0;}
/* Löschen-/Danger-Buttons im Hero sichtbar (sonst gehen sie im Akzent-Verlauf unter) */
/* Aktive Hero-Buttons (Favorit/Titelbild/„Gefällt mir") gut sichtbar auf dem Akzent-Verlauf */
.hero .btn.is-on,.hero .like-btn.is-liked{background:#fff;border-color:#fff;color:var(--accent);}
.hero .btn.is-on:hover,.hero .like-btn.is-liked:hover{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);color:var(--accent);}
@media (max-width:560px){.ph-emblem{width:54px;height:54px;font-size:1.5rem;}}

/* ---------- Stat / KPI ---------- */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none;}
.stat .label{font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}
.stat .label i{color:var(--accent);}
.stat .value{font-family:var(--font-disp);font-size:1.9rem;font-weight:600;margin-top:4px;}
.stat .sub{font-size:.78rem;color:var(--ink-faint);}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;padding:4px 10px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink-soft);}
.badge-accent{background:var(--accent-soft);color:var(--accent-ink);}
.badge-success{background:var(--ok-soft);color:var(--ok);}
.badge-warning{background:var(--warn-soft);color:var(--warn);}
.badge-danger{background:var(--bad-soft);color:var(--bad);}
.badge-info{background:var(--info-soft);color:var(--info);}

/* ---------- Alerts ---------- */
.alert{border:1px solid var(--line);border-left-width:4px;border-radius:var(--radius);padding:12px 15px;font-size:.92rem;display:flex;gap:11px;align-items:flex-start;background:var(--surface);}
.alert-success{border-left-color:var(--ok);background:var(--ok-soft);}
.alert-danger{border-left-color:var(--bad);background:var(--bad-soft);}
.alert-warning{border-left-color:var(--warn);background:var(--warn-soft);}
.alert-info{border-left-color:var(--info);background:var(--info-soft);}

/* ---------- Forms ---------- */
.field{margin-bottom:15px;}
.field>label{display:block;font-size:.85rem;color:var(--ink-soft);margin-bottom:6px;}
.input,.select,.textarea{width:100%;font:inherit;font-size:.94rem;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:border-color .12s,box-shadow .12s;}
.textarea{min-height:96px;resize:vertical;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* ---------- Segmented control & Palette-Picker (Einstellungen) ---------- */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px;gap:4px;flex-wrap:wrap;}
.seg label{position:relative;cursor:pointer;}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.seg span{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--radius-pill);font-size:.88rem;color:var(--ink-soft);transition:background .12s,color .12s;}
.seg input:checked+span{background:var(--accent);color:#fff;}
.palette-pick{display:flex;gap:12px;flex-wrap:wrap;}
.palette-pick label{cursor:pointer;text-align:center;}
.palette-pick input{position:absolute;opacity:0;pointer-events:none;}
.swatch{width:54px;height:54px;border-radius:14px;border:3px solid transparent;box-shadow:var(--shadow-sm);display:block;}
.palette-pick input:checked+.swatch{border-color:var(--ink);transform:scale(1.04);}
.palette-pick .pname{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:5px;}

/* ---------- Tables (responsiv, KEIN horizontales Scrollen) ---------- */
.table{width:100%;border-collapse:collapse;font-size:.92rem;table-layout:auto;}
.table th{text-align:left;font-weight:600;font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);padding:10px 12px;border-bottom:1px solid var(--line);}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table tbody tr:hover{background:var(--surface-2);}
.table .center{text-align:center;}

/* Kapselt sehr breite Tabellen (z. B. Rechte-Matrix) – Scroll bleibt INNERHALB der Karte,
   die Seite selbst scrollt nie horizontal. */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);}
.table-wrap>.table{min-width:560px;}

/* Ab schmalen Breiten: Zeilen werden zu Karten (Labels via data-label) */
@media(max-width:760px){
  .table.responsive thead{display:none;}
  .table.responsive tr{display:block;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;padding:6px 12px;}
  .table.responsive td{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line);padding:9px 0;text-align:right;}
  .table.responsive tr td:last-child{border-bottom:none;}
  .table.responsive td::before{content:attr(data-label);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);text-align:left;flex:none;}
  .table.responsive td .truncate{max-width:60vw;}
}

/* ---------- Avatar ---------- */
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:600;flex:none;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar-lg{width:58px;height:58px;font-size:1.15rem;}
.avatar-zoom{cursor:zoom-in;transition:transform .12s ease;}
.avatar-zoom:hover{transform:scale(1.04);}
.avatar-lightbox{border:0;background:transparent;padding:0;max-width:94vw;max-height:94vh;overflow:visible;position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;}
.avatar-lightbox::backdrop{background:rgba(0,0,0,.74);backdrop-filter:blur(2px);}
.avatar-lightbox img{max-width:min(520px,92vw);max-height:86vh;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:block;}
.avatar-lightbox-x{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}

/* ---------- Fehlerseiten ---------- */
.errpage{max-width:520px;margin:40px auto;padding:16px;}
.errpage-body{text-align:center;padding:40px 28px;}
.errpage-emblem{width:84px;height:84px;border-radius:24px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:2.4rem;box-shadow:var(--shadow-lg);}
.errpage-code{font-family:var(--font-disp,Georgia,serif);font-size:3.6rem;font-weight:700;line-height:1;color:var(--ink);}
.errpage-title{font-size:1.4rem;margin:6px 0 8px;}
.errpage-text{color:var(--ink-soft);margin:0 auto 22px;max-width:44ch;line-height:1.6;}
.errpage-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
@media (max-width:520px){.errpage-code{font-size:3rem;}.errpage-emblem{width:72px;height:72px;font-size:2rem;}}

/* ---------- Dropdown ---------- */
.dd{position:relative;}
.dd-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:7px;display:none;}
.dd.open .dd-menu{display:block;}
.dd-menu a,.dd-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--radius-sm);font-size:.9rem;color:var(--ink);background:none;border:none;text-align:left;cursor:pointer;}
.dd-menu a:hover,.dd-menu button:hover{background:var(--surface-2);text-decoration:none;}
.dd-menu i{color:var(--ink-soft);}
.dd-sep{height:1px;background:var(--line);margin:7px 4px;}
.dd-label{padding:7px 11px;font-size:.78rem;color:var(--ink-faint);}

/* ---------- Admin shell ---------- */
.admin-shell{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start;}
.admin-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px;position:sticky;top:78px;box-shadow:var(--shadow-sm);}
.admin-side .group{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:11px 11px 6px;}
.admin-side a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--radius-sm);color:var(--ink-soft);font-size:.92rem;margin-bottom:2px;}
.admin-side a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.admin-side a.active{background:var(--accent);color:#fff;}
.admin-side a.active i{color:#fff;}
.admin-content{min-width:0;}
@media(max-width:860px){.admin-shell{grid-template-columns:1fr;}.admin-side{position:static;display:flex;flex-wrap:wrap;gap:4px;}.admin-side .group{width:100%;}}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;flex:1;}
.auth-card{width:100%;max-width:430px;}
/* Anmeldung/Registrierung: Buttons über die volle Breite */
.auth-card .btn{width:100%;justify-content:center;}
.auth-card .btn + .btn{margin-top:10px;}
.auth-wrap{background:
  radial-gradient(820px 460px at 8% -8%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 60%),
  radial-gradient(760px 540px at 108% 112%, color-mix(in srgb,var(--accent-2) 22%,transparent), transparent 56%),
  var(--surface-2);}
.auth-pane{overflow:hidden;box-shadow:var(--shadow-lg);}
.auth-pane-head{padding:22px 24px 18px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.auth-pane-head h2{margin:0 0 3px;color:#fff;font-size:1.3rem;display:flex;align-items:center;gap:9px;}
.auth-pane-head p{margin:0;color:rgba(255,255,255,.86);font-size:.9rem;}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;}
.auth-remember{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.92rem;color:var(--ink);}
.auth-remember input{width:auto;margin:0;}
.auth-link{font-size:.9rem;text-decoration:none;color:var(--accent-ink);}
.auth-link:hover{color:var(--accent);text-decoration:none;}
.auth-sep{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--ink-faint);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line);}
.input-icon{position:relative;display:flex;align-items:center;}
.input-icon>.ti{position:absolute;left:13px;color:var(--ink-faint);font-size:1.05rem;pointer-events:none;}
.input-icon>.input{padding-left:38px;width:100%;}
.brand-mark{text-align:center;margin-bottom:22px;}
.brand-mark .dot{width:56px;height:56px;border-radius:17px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:12px;box-shadow:var(--shadow);}
.brand-mark .name{font-family:var(--font-disp);font-size:1.7rem;font-weight:600;}

/* ---------- Login: Split-Screen „mehr als ein Buch" ---------- */
.auth-card--wide{max-width:980px;}
.al-split{display:grid;grid-template-columns:1.1fr .9fr;padding:0;}
/* Bühne (links) */
.al-hero{position:relative;overflow:hidden;min-height:560px;padding:36px 32px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(150deg,var(--accent),var(--accent-2));}
.al-tiles{position:absolute;inset:0;}
.al-tile{position:absolute;width:120px;background:#fff;padding:8px 8px 20px;border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.22);transform:var(--r,none);animation:al-floaty 6s ease-in-out infinite;}
.al-tile-pic{display:flex;align-items:center;justify-content:center;height:82px;border-radius:3px;color:#fff;font-size:26px;overflow:hidden;}
.al-tile-cap{display:block;text-align:center;margin-top:6px;font-family:var(--font-disp);font-size:.68rem;color:#5a5049;}
.al-chart{width:100%;height:100%;}
.al-tile.is-photo  .al-tile-pic{background:linear-gradient(135deg,#e0a07f,#c25e3a);}
.al-tile.is-growth .al-tile-pic{background:linear-gradient(135deg,#8bbf9a,#3f9e6a);}
.al-tile.is-preg   .al-tile-pic{background:linear-gradient(135deg,#c98a63,#8c3f23);}
.al-tile.is-games  .al-tile-pic{background:linear-gradient(135deg,#e6b189,#cf7c53);}
.al-tile.is-tree   .al-tile-pic{background:linear-gradient(135deg,#a6b3d6,#5a6ea3);}
.al-tile.is-letter .al-tile-pic{background:linear-gradient(135deg,#d99a6c,#b0794f);}
.al-tile.p1{top:24px;left:20px;--r:rotate(-8deg);}
.al-tile.p2{top:40px;left:150px;--r:rotate(6deg);animation-delay:.6s;}
.al-tile.p3{top:66px;left:286px;--r:rotate(-4deg);animation-delay:1.1s;}
.al-tile.p4{top:176px;left:44px;--r:rotate(5deg);animation-delay:1.7s;}
.al-tile.p5{top:150px;left:190px;--r:rotate(-6deg);animation-delay:2.2s;}
.al-tile.p6{top:196px;left:316px;--r:rotate(7deg);animation-delay:2.8s;}
@keyframes al-floaty{0%,100%{transform:translateY(0) var(--r,none);}50%{transform:translateY(-9px) var(--r,none);}}
.al-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(140,63,35,.9) 6%,rgba(140,63,35,.3) 44%,transparent 70%);}
.al-htxt{position:relative;}
.al-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;opacity:.92;}
.al-htxt h2{margin:8px 0 10px;color:#fff;font-family:var(--font-disp);font-size:1.9rem;line-height:1.14;}
.al-htxt p{margin:0;color:rgba(255,255,255,.92);font-size:.96rem;}
/* Formular (rechts) */
.al-form{background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:36px 34px;}
.al-form-inner{width:100%;}
.al-form-title{margin:0 0 4px;font-family:var(--font-disp);font-size:1.34rem;display:flex;align-items:center;gap:9px;color:var(--ink);}
.al-form-sub{margin:0 0 20px;color:var(--ink-soft);font-size:.92rem;}
/* zentrierte Meldung (z. B. „Konto gelöscht") */
.al-note{text-align:center;}
.al-note .al-form-title{justify-content:center;}
.al-note-ic{font-size:2.6rem;color:var(--accent);line-height:1;margin-bottom:6px;}
.al-note .btn{margin-top:8px;}
@media (prefers-reduced-motion: reduce){.al-tile{animation:none;}}
@media (max-width:680px){
  .al-split{grid-template-columns:1fr;}
  .al-hero{min-height:300px;padding:26px 22px;}
  .al-tile{width:96px;}
  .al-tile-pic{height:64px;font-size:22px;}
  .al-tile.p4,.al-tile.p5,.al-tile.p6{display:none;}
  .al-htxt h2{font-size:1.6rem;}
  .al-form{padding:26px 22px;}
}

/* ---------- Footer ---------- */
.mm-footer{border-top:1px solid var(--line);background:var(--surface);background:color-mix(in srgb,var(--surface) 60%,transparent);margin-top:auto;}
.mm-footer-inner{width:100%;max-width:var(--measure-wide);margin:0 auto;padding:22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.mm-footer .links{display:flex;gap:16px;flex-wrap:wrap;}
.mm-footer .links a{color:var(--ink-soft);font-size:.88rem;}
.mm-footer .links a:hover{color:var(--accent-ink);}
.mm-footer .ftext{color:var(--ink-soft);font-size:.88rem;}
.mm-footer .credit{color:var(--ink-faint);font-size:.78rem;}

/* ---------- Comments ---------- */
.comment{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid var(--line);}
.comment:last-child{border-bottom:none;}
.comment .c-avatar{width:34px;height:34px;font-size:.76rem;}
.c-bubble{background:var(--surface-2);border-radius:14px;padding:9px 14px;}
.c-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
.c-name{font-weight:700;color:var(--ink);text-decoration:none;font-size:.9rem;}
.c-name:hover{text-decoration:underline;}
.c-time{font-size:.72rem;color:var(--ink-faint);}
.c-edited{border:0;background:none;cursor:pointer;color:var(--ink-faint);font-size:.72rem;padding:0;display:inline-flex;align-items:center;gap:3px;font-family:inherit;}
.c-edited:hover{color:var(--accent-ink);text-decoration:underline;}
.c-body{color:var(--ink);line-height:1.5;word-break:break-word;}
.c-actions{display:flex;align-items:center;gap:2px;margin-top:5px;flex-wrap:wrap;}
.c-act{display:inline-flex;align-items:center;gap:4px;border:0;background:none;cursor:pointer;color:var(--ink-faint);font-size:.76rem;font-weight:600;padding:4px 9px;border-radius:8px;font-family:inherit;line-height:1;}
.c-act:hover{background:var(--accent-soft);color:var(--accent-ink);}
.c-act-danger:hover{background:rgba(192,57,43,.12);color:#c0392b;}
.comment-replies{margin-left:34px;padding-left:14px;border-left:2px solid var(--line);}
.comment-replies .comment{padding:11px 0;}
.comment-thread .comment-replies .comment:last-child{border-bottom:none;}
.c-replybox{margin-top:8px;}

/* ---------- Misc ---------- */
.divider{height:1px;background:var(--line);margin:18px 0;border:none;}
.empty{text-align:center;color:var(--ink-faint);padding:34px 16px;}
.empty i{font-size:32px;display:block;margin-bottom:10px;opacity:.55;}
.empty .btn i{font-size:1.05rem;display:inline-flex;margin:0;opacity:1;}
.opts .req{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);font-size:.9rem;color:var(--ink-soft);cursor:pointer;background:var(--surface);white-space:nowrap;}
.opts .req input{margin:0;}
.checkbox{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;}
.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.list-row:last-child{border-bottom:none;}
.kv{display:grid;grid-template-columns:140px 1fr;gap:7px 16px;font-size:.92rem;}
.kv dt{color:var(--ink-soft);} .kv dd{margin:0;}
.thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);background:var(--surface-2);display:block;}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;}

/* ---------- Buch-Ansicht ---------- */
body[data-view="book"] .only-dashboard{display:none !important;}
body[data-view="dashboard"] .only-book{display:none !important;}

/* Die Buchseite wirkt wie eine echte Albumseite aus warmem Papier. */
body[data-view="book"] .mm-main{max-width:840px;}
body[data-view="book"] .only-book{
  position:relative;
  max-width:730px;
  margin:8px auto 30px;
  padding:clamp(28px,5vw,60px) clamp(22px,5vw,62px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  font-family:var(--font-disp);
  font-size:1.14rem;
  line-height:1.9;
  color:var(--ink);
}
/* feines Passepartout */
body[data-view="book"] .only-book::before{
  content:"";position:absolute;inset:13px;
  border:1px solid var(--accent-soft);
  border-radius:calc(var(--radius-lg) - 7px);
  pointer-events:none;
}
body[data-view="book"] .only-book > *{position:relative;}
body[data-view="book"] .only-book p{margin:0 0 1.05em;}

/* Überschriften mittig mit kleinem Zierschmuck */
body[data-view="book"] .only-book h1,
body[data-view="book"] .only-book h2,
body[data-view="book"] .only-book h3{
  font-family:var(--font-disp);font-weight:600;text-align:center;
  line-height:1.25;margin:.2em 0 .15em;letter-spacing:.01em;
}
body[data-view="book"] .only-book h2{font-size:1.8rem;}
body[data-view="book"] .only-book h2::after{
  content:"\2767";display:block;color:var(--accent);
  font-size:1rem;line-height:1;margin:.3em 0 .85em;opacity:.85;
}
body[data-view="book"] .only-book > h2:first-child,
body[data-view="book"] .only-book > *:first-child h2{margin-top:0;}

/* Initiale (Drop-Cap) am ersten Absatz */
body[data-view="book"] .only-book > p:first-of-type::first-letter,
body[data-view="book"] .only-book .book-lead::first-letter{
  font-family:var(--font-disp);font-weight:600;color:var(--accent);
  font-size:3.3em;line-height:.8;float:left;margin:.05em .12em 0 0;
}

/* Zierteiler statt Linie */
body[data-view="book"] .only-book hr,
body[data-view="book"] .only-book .divider{
  border:0;height:auto;margin:1.5em 0;text-align:center;overflow:visible;background:none;
}
body[data-view="book"] .only-book hr::before,
body[data-view="book"] .only-book .divider::before{
  content:"\2022 \2022 \2022";color:var(--accent);letter-spacing:.45em;font-size:.7rem;opacity:.8;
}

/* Listen hübscher */
body[data-view="book"] .only-book ul{list-style:none;padding:0;margin:1em 0;}
body[data-view="book"] .only-book ul li{padding:.28em 0 .28em 1.5em;position:relative;}
body[data-view="book"] .only-book ul li::before{content:"\2726";position:absolute;left:0;top:.5em;color:var(--accent);font-size:.78em;}

/* Tabellen ruhiger im Buch */
body[data-view="book"] .only-book table{font-size:1rem;}
body[data-view="book"] .only-book .table th{color:var(--ink-faint);}

/* Fotos wie eingeklebte Abzüge */
body[data-view="book"] .only-book img,
body[data-view="book"] .only-book .thumb{
  background:#fff;border:1px solid var(--line);
  padding:7px;border-radius:4px;
  box-shadow:0 7px 20px -9px rgba(0,0,0,.45);
}
body[data-view="book"] .only-book .thumb-grid{
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:20px;margin-top:16px;
}
body[data-view="book"] .only-book .thumb-grid > *:nth-child(3n+1){transform:rotate(-1.5deg);}
body[data-view="book"] .only-book .thumb-grid > *:nth-child(3n+2){transform:rotate(1.1deg);}
body[data-view="book"] .only-book .thumb-grid > *:nth-child(3n){transform:rotate(-.5deg);}
body[data-view="book"] .only-book .thumb-grid img:hover,
body[data-view="book"] .only-book .thumb-grid .thumb:hover{transform:rotate(0) scale(1.03);transition:transform .18s;z-index:2;}

/* Zeitstrahl-Einträge (auch in Dashboard-Tabs genutzt) */
.book-entry{border-left:2px solid var(--accent-soft);padding:2px 0 26px 24px;position:relative;}
.book-entry:last-child{padding-bottom:2px;}
.book-entry::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--accent-soft);}
.book-entry .when{font-size:.74rem;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.12em;font-weight:600;}
.book-entry .etitle{font-family:var(--font-disp);font-size:1.28rem;font-weight:600;margin:4px 0 7px;line-height:1.25;}
body[data-view="book"] .only-book .book-entry .etitle{text-align:left;}
body[data-view="book"] .only-book .book-entry .etitle::after{content:none;}

/* ====================================================================
   Mobile / responsive (Phones) – Stand 2026-06
   Topbar bricht um (Navigation auf eigene, scrollbare Zeile), schmalere
   Innenabstaende, Container voll breit, Dropdowns passen in den Viewport.
   ==================================================================== */
@media (max-width:640px){
  .mm-topbar-inner{flex-wrap:nowrap; padding:10px 12px; gap:6px;} /* alles in EINER Reihe */
  .mm-brand{font-size:1.06rem; margin-right:auto; min-width:0;} /* schiebt die rechten Buttons mobil rechtsbündig */
  .mm-navwrap{display:none;} /* Navigation läuft mobil über die untere Leiste */

  .mm-main{max-width:100%; padding:18px 14px 40px;}
  .mm-main.wide{max-width:100%;}
  body[data-view="book"] .mm-main{max-width:100%;}

  h1{font-size:1.5rem;} h2{font-size:1.2rem;} h3{font-size:1.02rem;}

  .card-pad{padding:16px;}
  .row{flex-wrap:wrap;}
  .grid-2,.grid-3{grid-template-columns:1fr;}

  .dd-menu{max-width:calc(100vw - 24px);}
  .mm-search-menu{min-width:min(280px, calc(100vw - 24px));}

  /* Account-Menue: auf dem Handy nur Avatar (Name erst im geoeffneten Menue),
     Menue fest oben rechts im Bild - laeuft so nicht mehr links heraus. */
  .mm-user .mm-username{display:none;}
  .mm-user .dd-menu{position:fixed; top:60px; right:10px; left:auto; min-width:240px; max-width:calc(100vw - 20px);}

  .mm-footer-inner{padding:18px 14px; gap:10px;}

  /* Tabellen lesbarer; breite Tabellen duerfen horizontal scrollen */
  table{font-size:.88rem;}
  .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

@media (max-width:360px){
  .mm-brand-name{display:none;} /* sehr schmal: nur Logo-Punkt, spart Platz für die Buttons */
}

@media (max-width:420px){
  h1{font-size:1.34rem;}
  .mm-nav a{padding:6px 9px; font-size:.85rem;}
  .btn{padding:9px 13px;}
}

/* Hilfsklasse: Aktion-Buttons auf Mobil volle Breite */
@media (max-width:640px){
  .btn-block-mobile{width:100%; justify-content:center;}
}

/* ---------- Auth-Seiten (Login/Registrierung) auf Mobil ---------- */
@media (max-width:640px){
  /* Oben ausrichten statt vertikal zentriert -> wirkt nicht „leer/riesig",
     und das Feld bleibt beim Einblenden der Tastatur sichtbar. */
  .auth-wrap{min-height:auto; align-items:flex-start; padding:26px 16px 32px;}
  .auth-card{max-width:none;}
  .brand-mark{margin-bottom:16px;}
  .brand-mark .dot{width:46px;height:46px;font-size:23px;border-radius:14px;margin-bottom:8px;}
  .brand-mark .name{font-size:1.38rem;}
  .auth-card .card-pad{padding:18px 16px;}
  .auth-card h2{font-size:1.18rem;margin-bottom:14px;}
}
@media (max-width:420px){
  .brand-mark .dot{width:42px;height:42px;font-size:21px;}
  .brand-mark .name{font-size:1.28rem;}
}

/* "mehr anzeigen" Aufklapper: natives Dreieck ausblenden */
.mm-more > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;}
.mm-more > summary::-webkit-details-marker{display:none;}
.mm-more[open] > summary i.ti-chevron-down{transform:rotate(180deg);}

/* ---- Rich-Editor (BBCode-Toolbar + Emoji) & Rich-Ausgabe ---- */
.bb-toolbar{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.bb-btn{cursor:pointer;border:1px solid var(--line,#e1e1e1);background:var(--surface,#fff);color:var(--ink,#222);border-radius:8px;min-width:34px;height:34px;padding:0 9px;font-size:.95rem;line-height:1;transition:.12s}
.bb-btn:hover{border-color:var(--accent);color:var(--accent)}
.bb-pop{position:fixed;z-index:1000;box-shadow:0 14px 36px rgba(0,0,0,.22);border-radius:12px;overflow:hidden}
.bb-pop emoji-picker{--background:var(--surface,#fff);--border-color:var(--line,#e1e1e1);--num-columns:9;--category-emoji-size:1.15rem;--category-emoji-padding:0.4rem;line-height:normal;letter-spacing:normal;width:min(94vw,22.5rem);height:400px}
.bb-quote{margin:10px 0;padding:8px 16px;border-left:3px solid var(--accent);background:var(--surface-2,#f5f5f5);border-radius:8px;font-style:italic}
.bb-list{margin:8px 0 8px 1.3em;padding:0}
.bb-list li{margin:2px 0}
/* Changelog – Code-Look, folgt dem Seiten-Theme (hell standardmäßig, dunkel im Dunkelmodus) */
.bb-changelog{margin:14px 0;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm,0 6px 20px rgba(0,0,0,.07));font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
.bb-changelog-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.bb-changelog-h::before{content:"";flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:#ff5f56;box-shadow:17px 0 0 #ffbd2e,34px 0 0 #27c93f;margin-right:30px}
.bb-changelog-badge{font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:6px;padding:3px 9px}
[data-theme="dark"] .bb-changelog-badge{color:var(--accent-soft)}
.bb-changelog-ver{font-weight:600;color:var(--ink-soft);font-size:.82rem}
.bb-changelog-list{list-style:none;margin:0;padding:14px 16px;font-size:.86rem;line-height:1.7;color:var(--ink-soft)}
.bb-changelog-list li{margin:1px 0;padding-left:1.7em;text-indent:-1.7em;display:block}
.bb-changelog-list .cl-mark{display:inline-block;width:1.15em;margin-right:.55em;text-align:center;font-weight:700}
.bb-changelog-list strong{color:var(--ink);font-weight:700}
.bb-changelog-list em{color:var(--ink-soft);font-style:italic}
.bb-changelog-list a{color:var(--accent);text-decoration:none}
.bb-changelog-list a:hover{text-decoration:underline}
.bb-changelog-list li.cl-add .cl-mark{color:var(--ok,#2ea043)}
.bb-changelog-list li.cl-rem .cl-mark{color:var(--bad,#cf222e)}
.bb-changelog-list li.cl-chg .cl-mark{color:var(--info,#0969da)}
.bb-changelog-list li.cl-fix .cl-mark{color:var(--warn,#bf8700)}
.bb-changelog-list li.cl-note .cl-mark{color:var(--ink-faint)}
.bb-changelog-list li.cl-dot .cl-mark{color:var(--ink-faint)}

/* Medaillen-Karten-Grid (Erfolge im Profil – Stil wie Adminmenü, Site-Tokens) */
.medal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.medal-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 16px 18px;text-align:center;transition:transform .18s,box-shadow .18s}
.medal-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md,0 14px 32px rgba(20,30,45,.12))}
.medal-card .medal{width:64px;height:64px;margin:0 auto 13px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:1.7rem;box-shadow:0 9px 20px var(--accent-soft,rgba(214,96,138,.32)),inset 0 -3px 7px rgba(0,0,0,.12)}
.medal-card .medal-lbl{font-weight:700;color:var(--ink);font-size:1rem;line-height:1.25}
.medal-card .medal-desc{font-size:.82rem;color:var(--ink-soft);line-height:1.4;margin-top:6px}

/* ---- Lightbox ---- */
.lb-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.lb-overlay[hidden]{display:none}
.lb-fig{margin:0;max-width:94vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.lb-img{max-width:94vw;max-height:84vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-cap{color:#eee;font-size:.9rem;text-align:center;max-width:80vw}
.lb-cap[hidden]{display:none}
.lb-link{color:#fff;font-size:.85rem;opacity:.85;text-decoration:underline}
.lb-link[hidden]{display:none}
.lb-close{position:fixed;top:16px;right:20px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.lb-nav[hidden]{display:none}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:18px}.lb-next{right:18px}
img[data-lb],img.js-zoom{cursor:zoom-in}
@media(max-width:560px){.lb-nav{width:42px;height:42px;font-size:1.6rem}.lb-prev{left:6px}.lb-next{right:6px}}

/* „Gefällt mir"-Button */
.likebar{display:inline-flex;align-items:center;gap:10px;margin:0}
.like-btn.is-liked{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.like-btn.is-liked:hover{background:var(--accent-soft)}
.like-who{display:inline-flex;align-items:center;gap:5px}

/* „Auf einen Blick" – Fakten-Grid im Profil */
.glance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.glance{display:flex;gap:11px;align-items:center;min-width:0}
.glance-ic{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:1.15rem}

/* PWA – „Installieren"-Hinweis */
#mm-install{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow-lg);font-size:.92rem;animation:mm-install-in .25s ease}
#mm-install span{display:inline-flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
#mm-install button{appearance:none;border:0;cursor:pointer;font:inherit}
#mm-install #mm-install-yes{background:var(--accent);color:#fff;border-radius:10px;padding:7px 14px;font-weight:600}
#mm-install #mm-install-no{background:transparent;color:var(--ink-soft);font-size:1rem;padding:4px 8px;line-height:1}
@keyframes mm-install-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:560px){#mm-install{left:12px;right:12px;transform:none;max-width:none}@keyframes mm-install-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

/* ===== Mobile Bottom-Navigation (MediaHub-Stil) ===== */
.mm-bottomnav{display:none}
.mm-sheet-wrap{display:none}
@media (max-width:768px){
  .mm-topbar .mm-nav{display:none}
  .mm-bottomnav{display:flex}
  .mm-sheet-wrap:not([hidden]){display:block}
  .mm-main{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
body.is-mobile .mm-topbar .mm-nav{display:none}
body.is-mobile .mm-bottomnav{display:flex}
body.is-mobile .mm-sheet-wrap:not([hidden]){display:block}
body.is-mobile .mm-main{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

.mm-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:flex-end;justify-content:space-between;
  background:var(--surface);border-top:1px solid var(--line);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(0,0,0,.06)}
[data-theme="dark"] .mm-bottomnav{box-shadow:0 -6px 22px rgba(0,0,0,.34)}
.mm-bt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--ink-faint);font-size:.67rem;font-weight:500;padding:3px 2px;border-radius:12px;background:none;border:0;cursor:pointer;text-decoration:none}
.mm-bt:hover{text-decoration:none}
.mm-bt-iwrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:30px;border-radius:15px;transition:background .16s,color .16s}
.mm-bt-iwrap i{font-size:1.5rem;line-height:1}
.mm-bt-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-bt.active{color:var(--accent)}
.mm-bt.active .mm-bt-iwrap{background:var(--accent-soft)}
.mm-bt-dot{position:absolute;top:1px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.mm-bt-fab{flex:0 0 auto;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:1.85rem;
  display:flex;align-items:center;justify-content:center;transform:translateY(-20px);transition:transform .12s;
  box-shadow:0 0 0 5px var(--surface),0 10px 22px color-mix(in srgb,var(--accent) 46%,transparent)}
.mm-bt-fab:active{transform:translateY(-16px) scale(.96)}

.mm-sheet-wrap{position:fixed;inset:0;z-index:70}
.mm-sheet-bd{position:absolute;inset:0;background:rgba(20,12,16,.46);animation:mm-fade .18s ease}
.mm-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:22px 22px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));
  max-height:82vh;overflow:auto;box-shadow:0 -12px 30px rgba(0,0,0,.22);animation:mm-up .22s ease}
.mm-grab{width:42px;height:4px;border-radius:2px;background:var(--line-2,var(--line));margin:0 auto 12px}
.mm-sheet-h{font-family:var(--font-disp);font-size:1.12rem;color:var(--ink);margin:0 0 8px}
.mm-sheet-row{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.mm-sheet-row:last-child{border-bottom:0}
.mm-sheet-row:hover{text-decoration:none;background:var(--surface-2);border-radius:10px}
.mm-sheet-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.mm-sheet-lbl{flex:1;min-width:0;font-size:.98rem}
.mm-sheet-chev{color:var(--ink-faint)}
.mm-sheet-row.active .mm-sheet-ic{background:var(--accent);color:#fff}
.mm-sheet-sep{height:1px;background:var(--line);margin:8px 0}
.mm-sheet-empty{color:var(--ink-soft);font-size:.92rem;padding:8px 4px}
body.mm-sheet-open{overflow:hidden}
@keyframes mm-up{from{transform:translateY(22px);opacity:.5}to{transform:translateY(0);opacity:1}}
@keyframes mm-fade{from{opacity:0}to{opacity:1}}

/* Bottom-Nav: Mobil-Politur */
.mm-bt,.mm-bt-fab,.mm-sheet-row{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){.mm-sheet,.mm-sheet-bd,.mm-bt-fab{animation:none;transition:none}}

/* ===== „Gefällt …" – wer geliked hat (Karte) ===== */
.likers-card .card-title .ti-heart-filled{color:var(--accent)}
.likers-all{display:flex;flex-wrap:wrap;gap:8px}
a.liker-chip{display:inline-flex;align-items:center;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:5px 13px;font-size:.86rem;font-weight:500;text-decoration:none;transition:filter .12s,transform .1s;-webkit-tap-highlight-color:transparent}
a.liker-chip:hover{filter:brightness(.96);text-decoration:none}
a.liker-chip:active{transform:scale(.97)}

/* „Anfrage gesendet" – ausstehender Zustand im Profil-Hero */
.ph-hero .mm-req-sent{background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.6);color:#fff}
.ph-hero .mm-req-sent:hover{background:rgba(255,255,255,.26);border-style:solid}

/* Aufklappbare Karte (z. B. „Gesendete Anfragen") */
details.card > summary.card-head{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
details.card > summary.card-head::-webkit-details-marker{display:none}
.mm-cardcaret{margin-left:auto;color:var(--ink-faint);transition:transform .18s}
details.card[open] > summary.card-head .mm-cardcaret{transform:rotate(180deg)}

/* ===== Reaktionen (integriert in eine Karte) ===== */
.reactions-card{overflow:visible;margin-bottom:18px}
.reactions-card .react-head-right{display:inline-flex;align-items:center;gap:8px}
.reactions-card .react-cluster{display:inline-flex;align-items:center}
.reactions-card .react-cluster b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);font-size:15px;margin-left:-7px}
.reactions-card .react-cluster b:first-child{margin-left:0}
.reactions-card .react-total{color:var(--ink-soft);font-weight:600;font-size:.9rem}
.react-add{display:block}
.react-add-btn{list-style:none;-webkit-tap-highlight-color:transparent;user-select:none}
.react-add-btn::-webkit-details-marker{display:none}
.react-add-btn.is-active{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.react-picker-inline{display:inline-flex;flex-wrap:wrap;gap:1px;margin-top:10px;padding:5px 7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 18px rgba(30,16,22,.12);animation:mm-up .16s ease}
.react-picker-inline form{margin:0}
.rp-emoji{border:0;background:none;cursor:pointer;font-size:1.45rem;line-height:1;padding:5px 7px;border-radius:50%;transition:transform .12s;-webkit-tap-highlight-color:transparent}
.rp-emoji:hover{transform:scale(1.3) translateY(-2px)}
.rp-emoji.on{background:var(--accent-soft)}
.react-list{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.react-line{display:flex;gap:10px;align-items:flex-start}
.react-line .em{font-size:19px;flex:none;width:24px;text-align:center;line-height:1.5}

/* Kompakte Reaktions-Anzeige in Listen/Galerie */
.react-mini{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;line-height:1.5;white-space:nowrap}
.react-mini b{font-weight:700;color:var(--ink)}

/* Kompakte Reaktionen (unter Kommentaren) */
.react-compact{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.react-add-mini{position:relative}
.react-cbtn{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:27px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-soft);font-size:1rem;line-height:1}
.react-cbtn::-webkit-details-marker{display:none}
.react-cbtn.is-active{background:var(--accent-soft);border-color:transparent}
.react-add-mini .react-picker-inline{position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;margin-top:0;width:max-content;max-width:min(92vw,360px);flex-wrap:nowrap}
.react-sum{position:relative}
.react-sum-btn{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.react-sum-btn::-webkit-details-marker{display:none}
.react-sum-btn b{color:var(--ink);font-weight:700}
.react-sum .react-list{margin-top:9px}
.react-compact .react-line .em{font-size:17px;width:22px}

/* @-Erwähnungen */
a.mention{color:var(--accent-ink);background:var(--accent-soft);border-radius:5px;padding:0 4px;font-weight:600;text-decoration:none}
a.mention:hover{text-decoration:underline}
.mention-box{position:absolute;z-index:2000;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(30,16,22,.20);padding:5px;max-width:300px;overflow:hidden}
.mention-item{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;font-size:.9rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.mention-item i{color:var(--accent)}
.mention-item.on,.mention-item:hover{background:var(--accent-soft);color:var(--accent-ink)}

/* Veröffentlichungs-Auswahl (Entwurf/geplant) */
.pub-picker{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pub-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-top:1px solid var(--line);margin:0;transition:background .12s}
.pub-opt:first-child{border-top:0}
.pub-opt:hover{background:var(--surface-2)}
.pub-opt input{position:absolute;opacity:0;pointer-events:none}
.pub-ico{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-soft);font-size:1.05rem;transition:background .14s,color .14s}
.pub-opt input:checked ~ .pub-ico{background:var(--accent-soft);color:var(--accent-ink)}
.pub-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pub-name{font-weight:600;font-size:.95rem;color:var(--ink)}
.pub-desc{font-size:.78rem;color:var(--ink-soft)}
.pub-dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);position:relative;transition:border-color .15s}
.pub-opt input:checked ~ .pub-dot{border-color:var(--accent)}
.pub-opt input:checked ~ .pub-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.pub-opt input:focus-visible ~ .pub-dot{box-shadow:0 0 0 3px var(--accent-soft)}

/* Frage der Woche */
.qotw-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 60%,var(--surface)),var(--surface))}
.qotw-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:1.5rem}

/* Countdown-Anker (Geburtstag / Übergabe mit 18) */
.cd-row{display:flex;flex-wrap:wrap;gap:14px 30px}
.cd-item{display:flex;align-items:center;gap:12px}
.cd-ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.cd-days{font-family:var(--font-disp);font-size:1.5rem;line-height:1.1;color:var(--ink)}
.cd-unit{font-size:.9rem;font-weight:400;color:var(--ink-soft)}
.cd-lbl{font-size:.85rem;color:var(--ink-soft);margin-top:2px}

/* Jahresrückblick „Wrapped" */
.wrap-page{max-width:860px;margin:0 auto}
.wrap-hero{text-align:center;padding:30px 20px 22px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#d6608a,#a98fd6);margin-bottom:18px;box-shadow:0 10px 30px rgba(120,60,120,.18)}
.wrap-hero-year{font-family:var(--font-disp);font-size:3.2rem;line-height:1;opacity:.92}
.wrap-hero h1{font-family:var(--font-disp);margin:6px 0 4px;color:#fff;font-size:1.65rem}
.wrap-hero p{margin:0;opacity:.9}
.wrap-years{margin-top:14px;display:flex;gap:8px;justify-content:center}
.wrap-years .btn{background:rgba(255,255,255,.2);color:#fff;border:0}
.wrap-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-bottom:18px}
.wrap-tile{border-radius:16px;padding:16px;color:#fff;box-shadow:0 6px 16px rgba(60,30,40,.10)}
.wrap-tile i{font-size:1.4rem;opacity:.95}
.wrap-num{font-family:var(--font-disp);font-size:2rem;line-height:1.1;margin-top:6px}
.wrap-lbl{font-size:.9rem;opacity:.95}
.wrap-eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.wrap-eyebrow i{color:var(--accent)}
.wrap-feature-title{display:block;font-family:var(--font-disp);font-size:1.5rem;color:var(--ink);text-decoration:none;margin-bottom:6px}
.wrap-feature-title:hover{color:var(--accent)}
.wrap-feature-meta{color:var(--ink-soft);font-size:.9rem}
.wrap-big{font-family:var(--font-disp);font-size:1.7rem;color:var(--ink)}
.wrap-mine{display:flex;flex-direction:column;gap:6px;color:var(--ink-soft)}
.wrap-mine strong{color:var(--ink);font-size:1.05rem}
.wrap-cta-ic{flex:none;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#d6608a,#a98fd6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem}

/* Wrapped: Toolbar + Druck/PDF */
.wrap-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
@media print{
  .mm-topbar,.mm-bottomnav,.mm-footer,.mm-impersonate,.wrap-toolbar,.mm-flash{display:none !important}
  .mm-main{padding:0 !important;margin:0 !important}
  body{background:#fff !important}
  .wrap-page{max-width:100% !important;margin:0 !important}
  .wrap-hero,.wrap-tile,.wrap-cta-ic,.wrap-num,.wrap-lbl{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card{break-inside:avoid;box-shadow:none !important;border:1px solid #e8e0d8 !important}
  .wrap-tile{break-inside:avoid}
  a{text-decoration:none !important}
}

/* Wrapped: Druck-Titelseite (nur im PDF/Druck) */
.wrap-cover{display:none}
@media print{
  .wrap-cover{display:flex;align-items:center;justify-content:center;text-align:center;min-height:92vh;page-break-after:always;border-radius:18px;color:#fff;background:linear-gradient(135deg,#d6608a,#a98fd6);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wrap-cover-eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.9rem;opacity:.92}
  .wrap-cover-year{font-family:var(--font-disp);font-size:5rem;line-height:1;margin:4px 0}
  .wrap-cover h1{font-family:var(--font-disp);font-size:2.2rem;margin:6px 0;color:#fff}
  .wrap-cover p{opacity:.92}
}

/* Wrapped: Story-Vollbild */
.wrap-story{position:fixed;inset:0;z-index:3000;background:#1a1420}
.wrap-slide{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:44px}
.wrap-slide.on{display:flex;animation:mm-up .35s ease}
.wrap-slide i{font-size:3rem;opacity:.95;margin-bottom:14px}
.ws-big{font-family:var(--font-disp);font-size:2.4rem;line-height:1.16;max-width:640px}
.ws-sub{margin-top:12px;font-size:1.1rem;opacity:.92;max-width:560px}
.wrap-story-bar{position:absolute;top:12px;left:12px;right:12px;z-index:5;display:flex;gap:5px}
.wsd{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.28);cursor:pointer}
.wsd.on{background:#fff}
.wrap-story-x{position:absolute;top:22px;right:16px;z-index:6;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wrap-story-nav{position:absolute;bottom:26px;left:0;right:0;z-index:6;display:flex;justify-content:center;gap:16px}
.wrap-story-nav button{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media print{ .wrap-story{display:none !important} }

/* Wrapped-Story: Fortschritts-Füllung + Foto-Lesbarkeit */
.wsd{position:relative;overflow:hidden}
.wsd-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:3px}
.wrap-slide.has-photo .ws-big,.wrap-slide.has-photo .ws-sub,.wrap-slide.has-photo>i{text-shadow:0 2px 14px rgba(0,0,0,.45)}
.wrap-slide{user-select:none;-webkit-user-select:none}

/* Wrapped-Story: Foto-Ebene + Ken-Burns + Aktionsleiste */
.wrap-slide{overflow:hidden}
.ws-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;will-change:transform}
.wrap-slide.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,25,.34),rgba(20,15,25,.72));z-index:1}
.wrap-slide>i,.ws-big,.ws-sub{position:relative;z-index:2}
.wrap-slide.on .ws-bg{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.2) translate(-1.5%,-1.5%)}}
.wrap-story-actions{position:absolute;top:20px;left:16px;z-index:6;display:flex;gap:8px}
.wrap-story-actions button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Wrapped-Story: Highlight-Diashow + Konfetti */
.ws-gallery{position:absolute;inset:0;z-index:0}
.ws-gimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.ws-gimg.on{opacity:1;animation:kenburns 4.5s ease-out both}
.wrap-slide[data-gallery]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,25,.3),rgba(20,15,25,.72));z-index:1}
.ws-confetti{position:absolute;inset:0;z-index:9;pointer-events:none}

/* Wrapped: Abstände zwischen den Kacheln/Karten */
.wrap-page > .card,
.wrap-page > .grid{margin-bottom:16px}
.wrap-page > .card:last-child,
.wrap-page > .grid:last-child{margin-bottom:0}

/* Veröffentlichungs-Datum eingerückt */
.pub-when-row{max-width:280px}
.pub-when{width:100%}

/* Reaktionen: immer sichtbare Emoji-Leiste (statt Reagieren-Button) */
.react-strip{display:flex;flex-wrap:wrap;gap:4px}
.react-strip form{margin:0}
.react-strip .rp-emoji{font-size:1.5rem;line-height:1;padding:6px 9px;border-radius:12px;background:transparent;border:0;cursor:pointer;transition:transform .12s,background .12s;-webkit-tap-highlight-color:transparent}
.react-strip .rp-emoji:hover{transform:scale(1.18);background:var(--surface-2)}
.react-strip .rp-emoji.on{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.reactions-card .react-list{margin-top:16px}

/* Countdown-Kacheln (nebeneinander) */
.cd-grid{display:grid;gap:12px;margin-bottom:18px;grid-template-columns:1fr}
.cd-grid.cd-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd-grid.cd-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cd-grid.cd-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cd-grid.cd-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:820px){.cd-grid.cd-n3,.cd-grid.cd-n4,.cd-grid.cd-n5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cd-grid.cd-n2,.cd-grid.cd-n3,.cd-grid.cd-n4,.cd-grid.cd-n5{grid-template-columns:1fr}}
.cd-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px 16px;text-align:center;display:flex;flex-direction:column;align-items:center}
.cd-tile .cd-ic{display:inline-flex;width:46px;height:46px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:12px}
.cd-tile .cd-days{font-family:var(--font-disp);font-size:2.1rem;line-height:1;color:var(--accent-ink)}
.cd-tile .cd-unit{font-size:.9rem;font-weight:400;color:var(--ink-soft);margin-left:3px}
.cd-tile .cd-lbl{font-size:.95rem;color:var(--ink);margin-top:7px;line-height:1.3}
.cd-tile .cd-date{margin-top:4px}

/* Aufklappbare Karten-Kopfzeile (details/summary) ohne Standard-Marker */
details > summary.card-head{list-style:none}
details > summary.card-head::-webkit-details-marker{display:none}

/* Einzelner Toggle-Schalter (einheitlich, wie die Termin-Optionen) */
label.switch-line{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;margin:0;position:relative;transition:background .12s}
.switch-line + .switch-line{margin-top:12px;}
.opts .switch-line{margin-top:8px;}
.orc-visbox > * + *{margin-top:8px;}
.vis-sep{border:none;border-top:1px solid var(--line);margin:18px 0;}
.orc-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:var(--ink);padding:9px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
.orc-radio input{margin:0;accent-color:var(--accent);}
.switch-line:hover{background:var(--surface-2)}
.switch-line input{position:absolute;opacity:0;pointer-events:none}
.switch-line .sl-ico{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-soft);font-size:1.05rem;transition:background .14s,color .14s}
.switch-line input:checked ~ .sl-ico{background:var(--accent-soft);color:var(--accent-ink)}
.switch-line .sl-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.switch-line .sl-name{font-weight:600;font-size:.95rem;color:var(--ink)}
.switch-line .sl-desc{font-size:.78rem;color:var(--ink-soft)}
.switch-line .sl-sw{flex:none;width:44px;height:25px;border-radius:999px;background:var(--line-2);border:1px solid rgba(0,0,0,.12);box-sizing:border-box;position:relative;transition:background .15s}
.switch-line .sl-sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch-line input:checked ~ .sl-sw{background:var(--accent);border-color:var(--accent)}
.switch-line input:checked ~ .sl-sw::after{left:21px}
.switch-line input:focus-visible ~ .sl-sw{outline:2px solid var(--accent);outline-offset:2px}

/* Buch-Ansicht: Titelseite, Zahlen, Notizen */
body[data-view="book"] .only-book .book-cover{text-align:center;padding:6px 0 20px;margin-bottom:6px}
body[data-view="book"] .only-book .book-kicker{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
body[data-view="book"] .only-book .book-name{font-family:var(--font-disp);font-size:2.7rem;line-height:1.05;margin:8px 0 6px;color:var(--ink)}
body[data-view="book"] .only-book .book-sub{color:var(--ink-soft);font-style:italic}
body[data-view="book"] .only-book .book-figures{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin:2px 0 6px}
body[data-view="book"] .only-book .book-fig{text-align:center}
body[data-view="book"] .only-book .book-fig b{display:block;font-family:var(--font-disp);font-size:1.9rem;line-height:1;color:var(--ink)}
body[data-view="book"] .only-book .book-fig span{font-size:.8rem;color:var(--ink-soft)}
body[data-view="book"] .only-book .book-note{text-align:center;color:var(--ink-soft);font-style:italic}

/* Buch-Ansicht: Frage-der-Woche-Seite */
body[data-view="book"] .only-book .book-prompt{text-align:center;padding:4px 0}
body[data-view="book"] .only-book .book-prompt-k{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
body[data-view="book"] .only-book .book-prompt-q{font-family:var(--font-disp);font-size:1.5rem;font-style:italic;margin:0 0 14px;color:var(--ink)}

.bb-page{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap;}
.bb-page:hover{text-decoration:underline;}
.bb-page .ti{font-size:.85em;vertical-align:-1px;}

/* Grafisches Wetter-Widget (oben rechts in Eintrags-/Brief-Card) */
.wx-graphic{float:right;margin:2px 0 12px 16px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:72px;max-width:98px;padding:11px 12px 9px;border-radius:16px;color:#fff;text-align:center;box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.14));background:linear-gradient(160deg,#94a9c4,#6a7f9e);}
.wx-graphic .wx-ic{font-size:1.9rem;line-height:1;}
.wx-graphic .wx-temp{font-size:1.14rem;font-weight:700;line-height:1.05;}
.wx-graphic .wx-label{font-size:.64rem;font-weight:600;letter-spacing:.03em;opacity:.95;line-height:1.2;margin-top:1px;}
.wx-sun{background:linear-gradient(160deg,#ffbf5a,#f6893d);}
.wx-clouds{background:linear-gradient(160deg,#94a9c4,#6a7f9e);}
.wx-fog{background:linear-gradient(160deg,#aeb6c2,#828b99);}
.wx-rain{background:linear-gradient(160deg,#5fa0d8,#37699f);}
.wx-snow{background:linear-gradient(160deg,#8ec8ec,#5a9bd0);}
.wx-storm{background:linear-gradient(160deg,#6f61cf,#40348a);}
.wx-overlay{position:absolute;top:12px;right:12px;float:none;margin:0;z-index:3;box-shadow:0 3px 14px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.35);}
@media(max-width:520px){.wx-graphic{min-width:62px;max-width:86px;padding:9px 10px;margin-left:12px;}.wx-graphic .wx-ic{font-size:1.55rem;}.wx-graphic .wx-temp{font-size:1rem;}}

/* Größere Textinhalte standardmäßig im Blocksatz (Lebensbuch, Briefe, Termine, Steckbrief) */
.book-read,
.rich,
.rich-text{text-align:justify;-webkit-hyphens:auto;hyphens:auto;}

/* Milchzahn-Übersicht (Wachstum > Zähne) */
.teeth-jaw{font-family:var(--font-disp);font-weight:600;color:var(--ink-soft);font-size:.95rem;margin-bottom:8px;display:flex;align-items:center;gap:6px;justify-content:center}
.teeth-arch{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tooth{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:center}
.tooth>i{font-size:1.4rem;color:var(--ink-faint)}
.tooth.on{border-color:var(--accent);background:var(--accent-soft)}
.tooth.on>i{color:var(--accent-ink)}
.tooth .tin{width:100%;font-size:.68rem;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.tooth .tds{font-size:.72rem;color:var(--ink-soft)}
.tooth .tref{font-size:.58rem;color:var(--ink-faint);line-height:1.15}
@media(max-width:560px){.tooth{width:calc(20% - 6px)}}

/* Sprachnotiz-Recorder */
.mm-voice{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface-2)}
.mm-voice .mm-voice-stop,.mm-voice .mm-voice-reset{display:none}
.mm-voice[data-state="recording"] .mm-voice-start{display:none}
.mm-voice[data-state="recording"] .mm-voice-stop{display:inline-flex}
.mm-voice[data-state="recording"] .mm-voice-time{font-variant-numeric:tabular-nums}
.mm-voice[data-state="done"] .mm-voice-start{display:none}
.mm-voice[data-state="done"] .mm-voice-reset{display:inline-flex}
.mm-voice .mm-voice-preview audio{width:100%;margin-top:2px}

/* Audio/Video im Export: Link + QR (nur eingeloggt abspielbar) */
.capsule-media{display:flex;gap:10px;align-items:center;margin:8px 0}
.capsule-media .mm-qr{width:74px;height:74px;flex:none;background:#fff;padding:3px;border:1px solid var(--border);border-radius:6px}
.capsule-media .mm-qr img,.capsule-media .mm-qr canvas{display:block;width:100%;height:100%}

/* Quiz-Rangliste (Leaderboard) */
.lb{display:flex;flex-direction:column;gap:6px}
.lb-head,.lb-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px}
.lb-head.full,.lb-row.full{grid-template-columns:40px 1fr 66px 66px 54px}
.lb-head{padding:2px 12px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
.lb-head span:nth-child(n+3){text-align:right}
.lb-row{padding:9px 12px;border-radius:12px;background:var(--surface-2)}
.lb-row.lb-me{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.lb-rank{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-weight:800;font-size:.85rem;background:var(--surface);color:var(--ink-soft)}
.lb-rank.r1{background:linear-gradient(135deg,#ffdf7e,#f0a92e);color:#5a3d00;font-size:1.05rem;box-shadow:0 2px 6px rgba(240,169,46,.4)}
.lb-rank.r2{background:linear-gradient(135deg,#eaeaf2,#b9bdc9);color:#3a3a44;font-size:1.05rem}
.lb-rank.r3{background:linear-gradient(135deg,#f0c390,#cf8f52);color:#4a2f10;font-size:1.05rem}
.lb-name{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.lb-name{color:inherit;text-decoration:none}
a.lb-name:hover{color:var(--accent);text-decoration:none}
.lb-you{font-size:.66rem;background:var(--accent);color:#fff;padding:1px 7px;border-radius:999px;margin-left:6px;font-weight:700}
.lb-best{font-weight:800;color:var(--accent);text-align:right;white-space:nowrap}
.lb-avg,.lb-plays{color:var(--ink-soft);text-align:right;font-size:.92rem;white-space:nowrap}

/* Foto-Blätterer + Ansichts-Umschalter */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:22px 0 4px}
.pager-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600}
.pager-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pager-btn.is-off{opacity:.4;pointer-events:none}
.pager-nums{display:flex;gap:4px;align-items:center}
.pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 6px;border-radius:9px;text-decoration:none;color:var(--ink-soft);font-weight:400;font-size:.9rem;background:var(--surface);border:1px solid var(--line)}
.pager-num:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pager-num.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.pager-gap{color:var(--ink-faint);padding:0 2px}
.ph-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ph-count{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.85rem;padding:5px 12px;border-radius:999px}
.ph-count i{font-size:1rem}
.ph-viewtoggle{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.ph-viewtoggle button,.ph-viewtoggle a{border:0;background:var(--surface);color:var(--ink-soft);padding:7px 11px;cursor:pointer;font-size:1rem;line-height:1;display:inline-flex;align-items:center;text-decoration:none}
.ph-viewtoggle button:not(:last-child),.ph-viewtoggle a:not(:last-child){border-right:1.5px solid var(--line)}
.ph-viewtoggle button.on,.ph-viewtoggle a.on{background:var(--accent);color:#fff}
.thumb-grid.ph-grid[data-size="s"]{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.thumb-grid.ph-grid[data-size="m"]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.thumb-grid.ph-grid[data-size="l"]{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* === Foto-Kacheln (Favoriten-Look) + Like/Kommentar-Pillen + Wasserzeichen === */
.ph-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s}
.ph-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ph-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;cursor:pointer}
.ph-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0 !important}
.ph-foot{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:10px 12px;text-align:left}
.ph-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;min-height:24px}
.ph-cap{width:100%;font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.25;text-align:left;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ph-date{width:100%;font-size:.76rem;color:var(--ink-soft);text-align:left}
.ph-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-faint);font-size:.82rem;font-weight:600;text-decoration:none;line-height:1}
.ph-pill i{font-size:.95rem}
.ph-pill.zero{display:none}
a.ph-pill:hover{filter:brightness(.97)}
.ph-pill.has,.ph-pill.ph-like.on{background:var(--accent);color:#fff;box-shadow:0 2px 8px -2px color-mix(in srgb, var(--accent) 60%, transparent)}
.ph-pill.has i,.ph-pill.ph-like.on i{color:#fff}
/* Favoriten-Stern rund wie in der Highlight-Ansicht */
.ph-card .ph-fav-btn{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;font-size:.95rem}
/* Wasserzeichen */
.wm-badge{position:absolute;right:8px;bottom:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:rgba(24,18,26,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;font-family:var(--font-disp);font-size:.72rem;font-weight:600;letter-spacing:.01em;pointer-events:none;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.35);user-select:none}
.wm-badge::before{content:"\2665";color:var(--accent);font-size:.82em}
.wm-badge.wm-lg{font-size:.95rem;padding:5px 13px;right:12px;bottom:12px}
/* Einzelfoto-Ansicht: vorheriges/nächstes Bild blättern */
.ph-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(20,16,22,.44);color:#fff;text-decoration:none;font-size:1.55rem;opacity:.8;transition:background .15s,opacity .15s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ph-nav:hover{background:rgba(20,16,22,.7);color:#fff;opacity:1;text-decoration:none}
.ph-nav:active{transform:translateY(-50%) scale(.94)}
.ph-nav-prev{left:10px}
.ph-nav-next{right:10px}
@media (max-width:520px){.ph-nav{width:40px;height:40px;font-size:1.35rem}.ph-nav-prev{left:6px}.ph-nav-next{right:6px}}

/* ---------- Lebensbuch × Galerie: Alben/Fotos verknüpfen ---------- */
/* Anzeige im Eintrag („Aus der Galerie"-Karte) */
.gl-view{box-shadow:none;background:var(--surface)}
.gl-view-head{padding:11px 14px}
.gl-view-head .card-title{font-size:.95rem}
.gl-view-body{padding:14px}
.gl-galcard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:var(--surface);text-decoration:none;color:inherit}
.gl-galcard + .gl-galcard{margin-top:8px}
.gl-galcard:hover{text-decoration:none;border-color:var(--line-2)}
.gl-cover{width:74px;height:74px;border-radius:10px;overflow:hidden;flex:none;position:relative;background:var(--surface-2)}
.gl-cover img{width:100%;height:100%;object-fit:cover;display:block}
.gl-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:var(--surface-2);color:var(--ink-faint)}
.gl-cnt{position:absolute;right:5px;bottom:5px;background:rgba(20,16,22,.6);color:#fff;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill)}
.gl-galtxt{min-width:0}
.gl-nm{display:block;font-family:var(--font-disp);font-size:1.08rem;font-weight:600;line-height:1.2;color:var(--ink)}
.gl-mt{display:flex;align-items:center;gap:6px;color:var(--ink-faint);font-size:.8rem;margin-top:2px}
.gl-go{margin-left:auto;color:var(--ink-faint);font-size:1.3rem;flex:none}
.gl-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gl-photo{aspect-ratio:1;border-radius:10px;overflow:hidden;display:block;position:relative}
.gl-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Verknüpfen-Box im Formular */
.gl-box{border:1px dashed var(--line-2);border-radius:var(--radius);padding:14px;background:var(--surface-2)}
.gl-actions{display:flex;gap:8px;flex-wrap:wrap}
.gl-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gl-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:5px 6px 5px 8px;font-size:.86rem}
.gl-chip-mini{width:24px;height:24px;border-radius:6px;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-faint)}
.gl-chip-mini img{width:100%;height:100%;object-fit:cover}
.gl-chip-x,.gl-thumb-x{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.gl-chip-x{width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft)}
.gl-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gl-thumb{width:60px;height:60px;border-radius:8px;overflow:hidden;position:relative}
.gl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gl-thumb-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(20,16,22,.6);color:#fff;font-size:.8rem}

/* Auswähl-Dialog */
.gl-overlay{position:fixed;inset:0;z-index:1000;background:rgba(24,18,26,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.gl-overlay[hidden]{display:none}
.gl-dialog{width:100%;max-width:620px;max-height:86vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg,0 8px 40px rgba(43,40,35,.12));overflow:hidden}
.gl-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.gl-tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:var(--radius-pill);padding:3px}
.gl-tab{padding:6px 13px;border:0;background:none;border-radius:var(--radius-pill);font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-soft);cursor:pointer}
.gl-tab.is-on{background:var(--accent);color:#fff}
.gl-dialog-body{padding:14px;overflow:auto}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.gl-cell{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1;border:2px solid transparent;padding:0;background:var(--surface-2)}
.gl-cell img{width:100%;height:100%;object-fit:cover;display:block}
.gl-cell-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:var(--surface-2);color:var(--ink-faint)}
.gl-chk{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;color:transparent;font-size:.9rem}
.gl-cell.sel{border-color:var(--accent)}
.gl-cell.sel .gl-chk{background:var(--accent);color:#fff}
.gl-cell-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(20,16,22,.74),transparent);color:#fff;font-size:.72rem;padding:14px 8px 5px;text-align:left;line-height:1.2}
.gl-cell-cnt{opacity:.8}
.gl-dialog-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line)}
.gl-foot-btns{display:flex;gap:8px}
.gl-empty{padding:24px 8px;text-align:center}
/* Foto des Monats – Einzelfoto-Auswahl (auf den Monat begrenzt) */
.potm-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.potm-pick{position:relative;display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1/1;background:#f2f2f6}
.potm-pick img{width:100%;height:100%;object-fit:cover;display:block}
.potm-pick-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.potm-pick-tick{position:absolute;top:6px;right:6px;width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;color:transparent;font-size:.9rem;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.potm-pick.is-sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 32%,transparent)}
.potm-pick.is-sel .potm-pick-tick{background:var(--accent);color:#fff}
.potm-pick.is-in{cursor:default}
.potm-pick.is-in img{opacity:.5}
.potm-pick-flag{position:absolute;left:6px;bottom:6px;font-size:.7rem;padding:2px 7px;border-radius:20px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:3px}
/* Herz-Animation bei Doppelklick */
.ph-heart-fx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.3);z-index:6;color:#fff;font-size:4.4rem;pointer-events:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.4));animation:phheart .85s ease forwards}
.ph-heart-fx i{color:var(--accent)}
@keyframes phheart{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}32%{transform:translate(-50%,-50%) scale(.95)}45%{transform:translate(-50%,-50%) scale(1.02)}80%{opacity:1;transform:translate(-50%,-52%) scale(1)}100%{opacity:0;transform:translate(-50%,-64%) scale(1)}}
/* Kopierschutz: Bilder nicht markier-/ziehbar */
img.thumb,.ph-media img,.fav-media img,.photo-protect img,.lb-img,.book img,.photo-hero img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}

.wm-auto{position:relative;display:inline-block;max-width:100%;line-height:0}
.wm-auto>img,.wm-auto>video{max-width:100%}

/* Benachrichtigungs-Badge (Live-Glocke) */
.mm-notif-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:.65rem;line-height:17px;text-align:center;font-weight:700}
.mm-notif-btn.mm-notif-new{animation:mmbell .7s ease}
@keyframes mmbell{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}

/* Freundlicher Push-Aktivieren-Hinweis */
.mm-push-bar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,20px);z-index:1200;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px -10px rgba(0,0,0,.35);padding:12px 16px;opacity:0;transition:opacity .3s,transform .3s}
.mm-push-bar.show{opacity:1;transform:translate(-50%,0)}
.mm-push-bar-txt{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.mm-push-bar-txt i{color:var(--accent)}
.mm-push-bar-act{display:flex;gap:8px}
body.is-mobile .mm-push-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* Dashboard: anpassbare Widget-Boxen */
.dash-grid{column-count:2;column-gap:16px}
.dash-grid > [data-dbox]{position:relative;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 16px;width:100%}
.dash-grid > [data-dbox].span2{column-span:all;-webkit-column-span:all}
.dash-grid > [data-dbox].span2:not(:first-child){margin-top:14px}
@media (max-width:760px){ .dash-grid{column-count:1} }
.dbox-tools{position:absolute;top:28px;right:10px;transform:translateY(-50%);z-index:6;display:none;gap:4px;background:transparent;padding:0}
.only-dashboard.dash-editing .dbox-tools{display:flex;flex-wrap:wrap;max-width:230px;justify-content:flex-end}
/* Im Bearbeiten-Modus die Überschrift-Aktionen (z. B. „Öffnen") ausblenden,
   damit sie der Werkzeugleiste nicht in die Quere kommen. */
.only-dashboard.dash-editing [data-dbox] .card-head .btn{display:none}
.only-dashboard.dash-editing [data-dbox]{outline:2px dashed color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:3px;border-radius:16px}
.dbox-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;padding:0}
.dbox-btn:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
.dbox-size{margin-left:2px;border-color:var(--accent);color:var(--accent)}
.dbox-flash{animation:dboxflash .55s ease}
@keyframes dboxflash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}
.dash-actions{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
/* Ein-/Ausblenden von Boxen: normal versteckt, im Bearbeiten-Modus blass sichtbar */
.only-dashboard:not(.dash-editing) .dash-grid > [data-dbox].dbox-hidden{display:none}
.only-dashboard.dash-editing [data-dbox].dbox-hidden{opacity:.45}
.only-dashboard.dash-editing [data-dbox].dbox-hidden::after{content:"ausgeblendet";position:absolute;top:8px;left:8px;z-index:5;background:var(--ink);color:#fff;font-size:.66rem;padding:2px 7px;border-radius:8px;opacity:.85}
.dbox-btn.dbox-btn-off{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Galerie: Ansichts-Umschalter (Kacheln/Zeitverlauf) + Monats-Mosaik */
.ph-vmode{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.ph-sort{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px}
.ph-sort a{width:34px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:1rem;text-decoration:none}
.ph-sort a:hover{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
.ph-vmode button{width:34px;height:30px;border:0;background:transparent;color:var(--ink-soft);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem}
.ph-vmode button.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
.gal-tl-h{font-family:var(--font-disp);font-size:1.25rem;margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.gal-tl-month:first-child .gal-tl-h{margin-top:4px}
.gal-tl-n{font-size:.72rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 9px}
.gal-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;grid-auto-flow:dense}
.gal-cell{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;display:block;background:var(--surface-2)}
.gal-cell img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.gal-cell.big{grid-column:span 2;grid-row:span 2}
.gal-cell .wm-badge{right:5px;bottom:5px;font-size:.6rem;padding:2px 7px}
@media (min-width:820px){ .gal-mosaic{grid-template-columns:repeat(4,1fr);gap:6px} }

/* Foto-Auswahl (Kachel- & Zeitverlauf-Ansicht) */
#ph-bar.ph-fixed{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px -12px rgba(0,0,0,.3)}
.ph-panel-fixed{position:fixed;left:0;right:0;bottom:0;z-index:61;display:none;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 30px -12px rgba(0,0,0,.35);padding:14px 16px;max-height:82vh;overflow:auto}
body.selecting .ph-tile,body.selecting .gal-cell{cursor:pointer}
body.selecting .ph-tile form{display:none}
body.selecting .ph-tile.sel .thumb,body.selecting .gal-cell.sel .thumb{outline:3px solid var(--accent);outline-offset:-3px}
body.selecting .ph-tile::after,body.selecting .gal-cell::after{content:'';position:absolute;top:7px;left:7px;width:23px;height:23px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.4);box-shadow:0 1px 5px rgba(0,0,0,.4);z-index:5;pointer-events:none;box-sizing:border-box}
body.selecting .ph-tile.sel::after,body.selecting .gal-cell.sel::after{content:'✓';background:var(--accent);border-color:var(--accent);color:#fff;font-size:14px;font-weight:800;line-height:19px;text-align:center}

/* Spiele-Hub + Orakel */
.games-tile{display:block;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.games-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.games-ic{width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent-ink,var(--accent));display:grid;place-items:center;font-size:26px;margin-bottom:12px}
.games-t{font-family:var(--font-disp);font-size:1.2rem;font-weight:600}
.games-d{color:var(--ink-soft);font-size:.92rem;margin-top:4px;line-height:1.5}
.orc-status{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px}
.orc-status.open{background:var(--accent-soft);color:var(--accent-ink,var(--accent))}
.orc-status.closed{background:var(--surface-2);color:var(--ink-soft)}
.orc-status.resolved{background:#e1f3ec;color:#1f6f57}
.orc-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--ink-soft);font-size:.85rem;margin-top:6px}
.orc-field-row{display:grid;grid-template-columns:1fr 150px 40px;gap:8px;align-items:start;margin-bottom:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.orc-field-row .opts{grid-column:1 / -1}
.orc-opt{flex:1 1 180px;min-width:0}
.orc-opt>.input{width:100%}
@media(max-width:640px){.orc-field-row{grid-template-columns:1fr 1fr}.orc-field-row .rm{grid-column:2;justify-self:end}}
.orc-guess-field{margin-bottom:14px}
.orc-guess-field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:5px}
.orc-sealed{display:flex;align-items:center;gap:10px;background:var(--accent-soft);color:var(--accent-ink,var(--accent));border-radius:12px;padding:12px 14px;font-weight:600;font-size:.9rem}

.quiz-start{text-align:center;padding:34px 20px}
.quiz-start-ico{font-size:3rem;color:var(--accent);line-height:1;margin-bottom:10px}
.quiz-start-title{font-family:var(--font-disp);margin:0 0 6px}
.quiz-start-sub{color:var(--ink-soft);max-width:440px;margin:0 auto 20px}

/* Übersicht-Kacheln (Gesundheit/Entwicklung) */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
a.ov-card{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.ov-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.ov-card .card-body{display:flex;flex-direction:column;gap:5px}
.ov-lbl{color:var(--ink-soft);font-size:.85rem;display:flex;align-items:center;gap:6px}
.ov-big{font-family:var(--font-disp);font-size:1.5rem;line-height:1.15}
.ov-sub{color:var(--ink-soft);font-size:.85rem}
a.ov-link{color:inherit;text-decoration:none;border-radius:10px}
a.ov-link:hover{background:var(--surface-2)}
.ov-stats{gap:26px}

/* Übersicht Entwicklung: Sparklines, Perzentil, Zähne, Ring */
.ov-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.ov-chart{display:block;padding:12px;border:1px solid var(--line);border-radius:12px}
.ov-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:stretch}
.ov-two > .card{display:flex;flex-direction:column}
.ov-two > .card > .card-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:22px}
.spark{width:100%;height:48px;display:block;margin:6px 0 8px}
.spark-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.spark-area{fill:var(--accent);opacity:.10}
.spark-dot{fill:var(--accent)}
.pctbar{margin-top:4px}
.pctbar-track{position:relative;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--surface-2),var(--accent-soft,var(--surface-2)),var(--surface-2));border:1px solid var(--line)}
.pctbar-mark{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);transform:translate(-50%,-50%)}
.pctbar-scale{display:flex;justify-content:space-between;font-size:.68rem;color:var(--ink-soft);margin-top:3px}
.teeth-mini{width:100%;max-width:380px;height:auto;display:block;margin:0 auto}
.teeth-mini .tooth{fill:var(--surface-2);stroke:var(--line);stroke-width:1.5}
.teeth-mini .tooth.on{fill:var(--accent);stroke:var(--accent)}
.ov-ring-wrap{text-align:center}
.ov-ring{width:180px;height:180px;transform:rotate(-90deg)}
.ov-ring .ring-bg{fill:none;stroke:var(--surface-2);stroke-width:9}
.ov-ring .ring-fg{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .6s ease}
.ov-ring .ring-txt{transform:rotate(90deg);transform-origin:50px 50px;fill:var(--ink);font-family:var(--font-disp);font-size:19px}

/* Galerie-Zeitverlauf: Gruppen-Boxen + anspringbarer Zeitstrahl */
.ph-toolbar-card{padding:12px 16px;margin-bottom:18px}
.ph-toolbar-card .ph-toolbar{margin-bottom:0}
.ph-tb-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph-tb-view{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph-tb-actions .btn.is-on{background:var(--accent);border-color:transparent;color:#fff}
.ph-panel{margin-bottom:18px}
.ph-panel-foot{gap:8px;margin-top:14px}
.ph-toolbar-card .ph-toolbar{margin-bottom:0}
.gal-tl-wrap{display:grid;grid-template-columns:1fr 200px;gap:20px;align-items:start}
.gal-tl-wrap.is-plain{grid-template-columns:1fr}
.gal-tl-group{margin-bottom:18px}
.gal-rail{order:2;padding:10px;position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto}
/* Zeitstrahl-Leisten scrollen, ohne sichtbaren Scrollbalken (Galerie + Lebensbuch) */
.gal-rail,.tl-rail{scrollbar-width:none;-ms-overflow-style:none}
.gal-rail::-webkit-scrollbar,.tl-rail::-webkit-scrollbar{width:0;height:0;display:none}
.gal-rail-in{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:16px}
.gal-rail-in::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.gal-rail-pt{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-soft);text-decoration:none;font-size:.86rem;line-height:1.15;background:var(--surface)}
.gal-rail-pt:hover{background:var(--surface);color:var(--accent);text-decoration:none}
.gal-rail-pt:hover .gal-rail-dot{border-color:var(--accent)}
.gal-rail-pt.on{background:var(--surface);color:var(--accent);font-weight:600}
.gal-rail-pt.is-loading,.rail-year-head.is-loading{opacity:.55;animation:gal-rail-pulse 1s ease-in-out infinite}
@keyframes gal-rail-pulse{50%{opacity:.85}}
.gal-rail-dot{position:absolute;left:-14px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.gal-rail-pt.on .gal-rail-dot{background:var(--accent);border-color:var(--accent)}
.gal-rail-lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-rail-n{font-size:.72rem;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:1px 7px}
.gal-rail-pt.on .gal-rail-n{background:var(--accent-soft);color:var(--accent)}
@media (max-width:900px){
  .gal-tl-wrap{grid-template-columns:1fr}
  .gal-rail{order:0;position:sticky;top:56px;max-height:none;overflow-x:auto;overflow-y:hidden;margin-bottom:12px}
  .gal-rail-in{flex-direction:row;padding-left:0;gap:6px}
  .gal-rail-in::before{display:none}
  .gal-rail-pt{white-space:nowrap}
  .gal-rail-dot{display:none}
}

/* Erklärungs-Box der Galerie */
.gal-note{display:flex;gap:14px;align-items:flex-start}
.gal-note-ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.gal-note-tx strong{display:block;margin-bottom:2px}

/* Termine (events/index) */
.ev-stats{margin-bottom:18px}
.ev-next{margin-bottom:18px}
.ev-next .card-body{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ev-next-count{flex:none;min-width:104px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--accent-soft);color:var(--accent);text-align:center}
.ev-next-num{display:block;font-family:var(--font-disp);font-size:2.2rem;font-weight:700;line-height:1.05}
.ev-next-unit{display:block;font-size:.8rem;font-weight:600;opacity:.85}
.ev-next-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ev-next-kicker{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:6px}
.ev-next-title{font-family:var(--font-disp);font-size:1.35rem;font-weight:600;color:var(--ink);text-decoration:none}
.ev-next-title:hover{color:var(--accent);text-decoration:none}
.ev-next-sub{font-size:.85rem;color:var(--ink-soft)}

.ev-group{margin-bottom:18px}
.ev-past > summary{cursor:pointer;list-style:none}
.ev-past > summary::-webkit-details-marker{display:none}

.ev-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.ev-row:last-child{border-bottom:none}
.ev-date{flex:none;width:60px;padding:7px 4px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);text-align:center;text-decoration:none;line-height:1.1}
.ev-date:hover{border-color:var(--accent);text-decoration:none}
.ev-date-wd{display:block;font-size:.7rem;font-weight:700;color:var(--accent);text-transform:uppercase}
.ev-date-d{display:block;font-family:var(--font-disp);font-size:1.5rem;font-weight:700;color:var(--ink)}
.ev-date-m{display:block;font-size:.72rem;color:var(--ink-soft)}
.ev-main{flex:1;min-width:0}
.ev-titleline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ev-title{font-weight:600;color:var(--ink);text-decoration:none}
.ev-title:hover{color:var(--accent);text-decoration:none}
.ev-cat{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border-radius:var(--radius-pill);padding:3px 10px}
.ev-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:5px;font-size:.85rem;color:var(--ink-soft)}
.ev-reactions{margin-top:6px}
.ev-acts{flex:none;display:flex;gap:4px}
.ev-acts form{margin:0}
@media(max-width:560px){
  .ev-next .card-body{gap:12px}
  .ev-next-count{min-width:88px;padding:10px 12px}
  .ev-date{width:52px}
}

/* Gesundheit: aufklappbarer Dokumenten-Upload */
.med-docup{padding:16px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.med-docup .field:last-of-type{margin-bottom:8px}

/* Bilderrahmen: Optionen */
.ss-opts{margin-top:14px}

/* Lebensbuch-Liste: Medien-Spalte immer gleich breit (mit und ohne Foto) */
.bb-media{width:84px;height:84px;flex:none;display:flex;align-items:center;justify-content:center}
.bb-media .thumb{width:84px;height:84px;border-radius:var(--radius-sm);object-fit:cover}

/* Termine: Jahreskalender */
.ev-cal{margin-bottom:18px}
.ev-cal-nav{display:flex;align-items:center;gap:6px}
.ev-cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ev-cal-month{border:1px solid var(--line);border-radius:var(--radius);padding:10px 10px 8px;background:var(--surface)}
.ev-cal-month.has-events{border-color:var(--accent-soft);background:var(--surface)}
.ev-cal-name{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--font-disp);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--accent-soft);letter-spacing:.01em}
.ev-cal-n{font-size:.7rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 7px}
.ev-cal-wd,.ev-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ev-cal-wd{background:var(--accent-soft);border-radius:7px;padding:4px 0;margin-bottom:5px}
.ev-cal-wd span{text-align:center;font-size:.64rem;font-weight:700;color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase}
.ev-cal-wd span.we{color:var(--accent)}
/* Aktueller Monat deutlich hervorgehoben */
.ev-cal-month.is-current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ev-cal-month.is-current .ev-cal-name{color:var(--accent);border-bottom-color:var(--accent)}
.ev-cal-day{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--ink-soft);border-radius:6px;text-decoration:none}
.ev-cal-day.is-empty{visibility:hidden}
.ev-cal-day.is-today{outline:1.5px solid var(--accent);outline-offset:-1.5px;font-weight:700;color:var(--ink)}
.ev-cal-day.is-we{background:var(--accent-soft);color:var(--accent-ink)}
.ev-cal-day.has-ev{background:var(--accent);color:#fff;font-weight:700}
.ev-cal-day.has-ev:hover{background:var(--accent-ink);color:#fff;text-decoration:none;transform:scale(1.08)}
.ev-cal-day.has-ev.is-today{outline-color:var(--ink)}
.ev-cal-more{position:absolute;top:-3px;right:-3px;min-width:13px;height:13px;padding:0 3px;border-radius:999px;background:var(--ink);color:#fff;font-size:.58rem;line-height:13px;text-align:center}

/* Geburtstage */
.ev-cal-day.has-bd:not(.has-ev){background:var(--accent-2);color:#fff;font-weight:700}
.ev-cal-day.has-bd:not(.has-ev):hover{filter:brightness(1.06)}
.ev-cal-bd{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:999px;background:var(--surface);color:var(--accent-2);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--line)}
.ev-cal-bd i{font-size:9px}

/* Legende */
.ev-cal-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft)}
.ev-cal-legend span{display:inline-flex;align-items:center;gap:7px}
.ev-cal-key{width:16px;height:16px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex:none;font-style:normal}
.ev-cal-key.is-ev{background:var(--accent)}
.ev-cal-key.is-bd{background:var(--accent-2);color:#fff}
.ev-cal-key.is-bd i{font-size:10px}
.ev-cal-key.is-we{background:var(--accent-soft)}
.ev-cal-key.is-td{outline:1.5px solid var(--accent);outline-offset:-1.5px}
@media(max-width:1040px){.ev-cal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.ev-cal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.ev-cal-grid{grid-template-columns:1fr}}

/* Gesundheit: Übersicht */
.med-emg{margin-bottom:18px}
.med-emg-grid{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap}
.med-blood{flex:none;width:132px;border-radius:var(--radius-lg);background:var(--accent-soft);color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px;text-align:center}
.med-blood-lbl{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.med-blood-val{font-family:var(--font-disp);font-size:2.4rem;font-weight:700;line-height:1.1}
.med-emg-tx{flex:1;min-width:220px;display:flex;flex-direction:column;gap:14px}
.med-block{display:flex;flex-direction:column;gap:6px}
.med-lbl{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.med-lbl i{color:var(--accent)}
.med-chips{gap:6px}

.med-stats{margin-bottom:18px}
.med-of{font-size:.55em;color:var(--ink-faint)}
.med-bar{margin-top:8px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.med-bar span{display:block;height:100%;border-radius:999px;background:var(--accent)}

.med-cols{align-items:start}
.med-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.med-row:last-child{border-bottom:none}
.med-row-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.med-date{flex:none;width:56px;padding:6px 4px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);text-align:center;line-height:1.1}
.med-date-wd{display:block;font-size:.66rem;font-weight:700;color:var(--accent);text-transform:uppercase}
.med-date-d{display:block;font-family:var(--font-disp);font-size:1.35rem;font-weight:700;color:var(--ink)}
.med-date-m{display:block;font-size:.68rem;color:var(--ink-soft)}
.med-pill{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
@media(max-width:760px){.med-blood{width:100%}}

/* Entwicklung: Übersicht */
.gr-stats{margin-bottom:18px}
.gr-age-val{font-size:1.35rem}
.gr-phase-tx{margin:0 0 14px;color:var(--ink-soft);line-height:1.55}
.ov-charts .gr-now-unit{font-size:.6em;color:var(--ink-faint)}

/* ===================== Bildwerkstatt (Foto-Editor) ===================== */
.mmw-grid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media (max-width:860px){.mmw-grid{grid-template-columns:1fr}}
.mmw-tools .card-body{gap:14px}
.mmw-group{display:flex;flex-direction:column;gap:8px}
.mmw-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700}
.mmw-row{display:flex;flex-wrap:wrap;gap:6px}
.mmw-toolrow .btn{padding:8px 10px}
.mmw-tool.is-on{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}
.mmw-filter.is-on{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}
.mmw-inline{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-soft)}
.mmw-inline input[type=color]{width:34px;height:28px;border:1px solid var(--border);border-radius:6px;padding:0;background:none;cursor:pointer}
.mmw-inline.mmw-size{flex:1}
.mmw-size input[type=range]{flex:1;min-width:80px}
.mmw-slider{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-soft)}
.mmw-slider input[type=range]{flex:1}
.mmw-slider output{min-width:2.4em;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.mmw-stage{padding:0;overflow:hidden}
.mmw-canvas-wrap{display:flex;justify-content:center;align-items:center;background:#111;min-height:320px;padding:10px}
.mmw-canvas{max-width:100%;max-height:72vh;height:auto;display:block;touch-action:none;box-shadow:0 2px 14px rgba(0,0,0,.4);background:#fff}
.mmw-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface)}
.mmw-bar .mmw-spacer{flex:1}
.mmw-status{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.mmw-history .tbl td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:middle}

/* ===================== Zeitdokumente ===================== */
.md-board{display:flex;flex-wrap:wrap;gap:14px}
.md-snip{display:block;background:#fff;padding:8px 8px 10px;border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow-sm);transform:rotate(var(--rot,0deg));transition:transform .15s ease,box-shadow .15s ease;max-width:220px;text-decoration:none;color:inherit}
.md-snip:hover{transform:rotate(0) scale(1.03);box-shadow:var(--shadow-lg);z-index:2}
.md-snip img{display:block;max-width:200px;max-height:200px;width:auto;height:auto;border-radius:2px}
.md-snip-cap{display:block;margin-top:6px;font-family:var(--font-disp,serif);font-size:.9rem;text-align:center;color:var(--ink)}
.md-doclist{display:flex;flex-direction:column;gap:8px}
.md-doc{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;background:var(--surface)}
.md-doc:hover{border-color:var(--accent)}
.md-doc-icon{font-size:1.4rem;color:var(--accent);flex:0 0 auto}
.md-doc-main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.md-doc-arrow{color:var(--ink-soft)}
.md-editpage{position:relative;display:inline-block;max-width:100%;margin:0 0 14px;line-height:0;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.md-editpage img{max-width:100%;height:auto;display:block;user-select:none}
.md-select-layer{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.md-select-box{position:absolute;border:2px dashed #fff;background:rgba(0,0,0,.28);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.md-snip-edit{position:relative;display:flex;flex-direction:column;gap:6px;width:200px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px}
.md-snip-edit.is-hidden{opacity:.5}
.md-snip-edit img{max-width:184px;max-height:180px;width:auto;height:auto;border-radius:3px;align-self:center}
.md-snip-capin{font-size:.85rem;padding:4px 8px}
.md-snip-actions{display:flex;gap:6px;justify-content:flex-end}
.md-pdf-page{margin-bottom:16px;border-top:1px dashed var(--border);padding-top:10px}
.md-pdf-page canvas{max-width:100%;height:auto;border:1px solid var(--border);border-radius:6px;background:#fff}

/* Zeitdokumente – Snippet-Reihenfolge (Drag) */
.md-snip-edit[draggable="true"]{cursor:grab}
.md-snip-edit.md-dragging{opacity:.4;cursor:grabbing}

/* Zeitdokumente – Dokumentzeile (öffnen + herunterladen) + aufklappbare Hinzufügen-Box */
.md-doc-open{flex:1;display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit}
.md-doc-open:hover{color:var(--accent)}
.md-doc-dl{flex:none}
#md-add > summary{display:flex;align-items:center;justify-content:space-between;gap:8px}
#md-add > summary::-webkit-details-marker{display:none}
#md-add > summary::marker{content:""}
.md-add-hint{display:inline-flex;align-items:center;gap:4px;font-weight:400}
.md-add-hint i{transition:transform .15s}
#md-add[open] .md-add-hint i{transform:rotate(180deg)}

/* NUR die Gesamtseiten-Scrollleiste (html): schlank & dezent, erscheint erst
   beim Scrollen (Klasse .mm-scrolling wird per JS gesetzt, nach kurzer Pause
   wieder entfernt). ALLE anderen Scrollbalken (innere Bereiche, Navs, Selects)
   bleiben komplett unberührt / im Standard. */
html{scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable}
html.mm-scrolling{scrollbar-color:var(--ink-faint) transparent}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
html.mm-scrolling::-webkit-scrollbar-thumb{background:var(--ink-faint)}
html.mm-scrolling::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* Zeitdokumente – „aufklappen"/„zuklappen" umschalten */
.md-add-txt-close{display:none}
#md-add[open] .md-add-txt-open{display:none}
#md-add[open] .md-add-txt-close{display:inline}

/* Galerie ausblenden, solange ein abdeckendes Werkzeug-Panel offen ist
   (Kapitel, Ähnliche Fotos, Hochladen) – die Filter-Suche zählt bewusst nicht. */
body.mm-panel-open #ph-gallery{display:none}

/* ============================================================
   Gesichts-Vorschläge (2026-09q) – Karte in der Foto-Detailansicht
   ============================================================ */
.mm-face-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
.mm-face-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  display:flex;
  flex-direction:column;
}
.mm-face-img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
  background:var(--accent-soft);
}
.mm-face-meta{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.9rem;
}
.mm-face-name{
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
}
.mm-face-name .ti-check{color:var(--accent)}
.mm-face-sugg{line-height:1.35}
.mm-face-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.mm-face-actions .btn{
  padding:5px 9px;
  font-size:.82rem;
}
.mm-face-choose{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}
.mm-face-choose .select,
.mm-face-choose .input{
  font-size:.85rem;
  padding:6px 8px;
}

/* ============================================================
   Zeitstrahl-Seitennavigation: Jahres-Akkordeon
   (nur Monatsansicht der Fotos + Lebensbuch-Zeitleiste; die Jahresansicht
   bleibt flach). Eigene, eingerückte Spur je Jahr statt der durchgehenden Linie.
   ============================================================ */
.gal-rail-acc .gal-rail-in{padding-left:0}
.gal-rail-acc .gal-rail-in::before{display:none}
.gal-rail-acc .rail-year{margin-bottom:2px}
.gal-rail-acc .rail-year-head{position:relative;display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;background:none;border:0;text-decoration:none;color:var(--ink);font-family:var(--font-disp,serif);font-weight:700;font-size:.98rem;padding:8px 10px 6px 28px;border-radius:var(--radius-sm)}
.gal-rail-acc .rail-year-head:hover{background:var(--surface)}
.gal-rail-acc .rail-year-head.on{color:var(--accent)}
.gal-rail-acc .rail-year-chev{position:absolute;left:8px;top:50%;transform:translateY(-50%);transition:transform .18s;color:var(--ink-soft);font-size:1rem}
.gal-rail-acc .rail-year.open > .rail-year-head .rail-year-chev{transform:translateY(-50%) rotate(90deg)}
.gal-rail-acc .rail-year-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-rail-acc .rail-year-n{flex:none;font-size:.72rem;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:1px 7px}
.gal-rail-acc .rail-year-head.on .rail-year-n{background:var(--accent-soft);color:var(--accent)}
.gal-rail-acc .rail-year:not(.open) > .rail-year-body{display:none}
.gal-rail-acc .rail-year-body{margin-left:14px;padding-left:0;border-left:2px solid var(--line)}
.gal-rail-acc .rail-year-body .gal-rail-pt{position:relative;padding:7px 10px 7px 16px}
.gal-rail-acc .rail-year-body .gal-rail-dot{position:absolute;left:-6px;top:50%;transform:translateY(-50%);margin:0}

/* Mobile: horizontale Rail – Akkordeon aus, Wrapper „auflösen", damit
   Jahres-Köpfe und Punkte wieder in einer Zeile laufen. */
@media (max-width:900px){
  .gal-rail-acc .rail-year{display:contents}
  .gal-rail-acc .rail-year-body{display:contents !important;border:0}
  .gal-rail-acc .rail-year-chev{display:none}
  .gal-rail-acc .rail-year-head{white-space:nowrap;padding:6px 8px}
  .gal-rail-acc .rail-year-body .gal-rail-pt{padding:8px 10px}
}

/* ============================================================
   Feststimmung (Konfetti / Saison-Partikel / Geburtstags-Banner)
   Rein kosmetisch; respektiert prefers-reduced-motion.
   ============================================================ */
.mm-season{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.mm-flake{position:absolute;top:-8vh;font-size:calc(15px * var(--sc,1));line-height:1;opacity:.5;will-change:transform;animation:mm-fall var(--d,12s) linear var(--dl,0s) infinite}
@keyframes mm-fall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg)}
  100%{transform:translateY(112vh) translateX(26px) rotate(240deg)}
}
.mm-bday{position:fixed;left:50%;transform:translateX(-50%);top:12px;z-index:1200;display:flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;padding:9px 12px 9px 16px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);font-weight:600;max-width:92vw}
.mm-bday-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-bday-x{background:rgba(255,255,255,.25);border:0;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;flex:none;line-height:1}
@media (prefers-reduced-motion: reduce){ .mm-season{display:none} }

/* ============================================================
   Wachs-Siegel (Zeitkapsel-Brief öffnen) – rein kosmetisch
   ============================================================ */
.mm-seal-wrap{position:relative}
.mm-seal-wrap .mm-seal-cover{display:none}
.mm-seal-wrap.is-sealed .mm-seal-body{filter:blur(7px);opacity:.22;pointer-events:none;user-select:none;min-height:190px;max-height:240px;overflow:hidden}
.mm-seal-wrap.is-sealed .mm-seal-cover{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  position:absolute;inset:0;z-index:2;width:100%;border:0;cursor:pointer;padding:24px;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 60%,transparent));
  border-radius:var(--radius)}
.mm-wax{width:88px;height:88px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;
  background:radial-gradient(circle at 34% 28%, color-mix(in srgb,var(--accent) 65%,#fff), var(--accent) 58%, color-mix(in srgb,var(--accent) 65%,#000));
  box-shadow:inset 0 3px 8px rgba(255,255,255,.35), inset 0 -7px 13px rgba(0,0,0,.38), 0 6px 16px rgba(0,0,0,.25);
  border:3px solid color-mix(in srgb,var(--accent) 55%,#000)}
.mm-seal-hint{color:var(--ink-soft);font-size:.9rem;text-align:center;max-width:82%;line-height:1.45}
.mm-seal-wrap.breaking .mm-wax{animation:mm-wax-break .7s ease forwards}
.mm-seal-wrap.breaking .mm-seal-cover{animation:mm-cover-out .7s ease forwards}
@keyframes mm-wax-break{0%{transform:scale(1) rotate(0)}28%{transform:scale(1.12) rotate(-5deg)}100%{transform:scale(1.45) rotate(9deg);opacity:0}}
@keyframes mm-cover-out{to{opacity:0}}

/* ============================================================
   Spiele-UI (gemeinsam, tokenbasiert) – Puzzle/Memory/Spot/Wortsuche/Kreuzworträtsel
   ============================================================ */
/* Auswahl-Chips (Schwierigkeit / Thema) */
.gm-chips{display:flex;gap:8px;flex-wrap:wrap}
.gm-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink-soft);cursor:pointer;user-select:none;font-size:.92rem;font-weight:600;transition:border-color .12s,background .12s,color .12s,transform .05s}
.gm-chip:hover{background:var(--surface-2)}
.gm-chip:active{transform:translateY(1px)}
.gm-chip .ti{font-size:1.05rem;opacity:.9}
.gm-chip.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.gm-chip.is-on .ti{color:var(--accent);opacity:1}

/* Statuszeile mit Pills */
.gm-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gm-toolbar .gm-sp{flex:1}
.gm-stat{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:7px 14px 7px 8px}
.gm-stat-ico{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:1.05rem}
.gm-stat-tx{display:flex;flex-direction:column;line-height:1.15}
.gm-stat-k{font-size:.72rem;color:var(--ink-faint);letter-spacing:.02em}
.gm-stat strong{font-size:1.14rem;font-variant-numeric:tabular-nums;font-family:var(--font-disp,inherit)}

/* Foto-Auswahl (Puzzle/Spot) */
.gm-pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.gm-pick{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.gm-pick img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s}
.gm-pick:hover img{transform:scale(1.07)}
.gm-pick-go{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff;background:rgba(15,15,30,.3);opacity:0;transition:opacity .15s}
.gm-pick:hover .gm-pick-go{opacity:1}

/* Auswahl-Kacheln (Memory-Schwierigkeit) */
.gm-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.gm-choice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;border:1px solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:inherit;background:var(--surface);transition:border-color .15s,transform .12s,box-shadow .15s}
.gm-choice:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.gm-choice-ico{font-size:1.9rem;color:var(--accent)}
.gm-choice-t{font-weight:700;font-family:var(--font-disp,inherit)}

/* Bestenlisten */
.gm-boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.gm-board-h{font-weight:700;font-family:var(--font-disp,inherit);margin-bottom:8px;font-size:.98rem}
.gm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 8px;border-radius:9px}
.gm-row+.gm-row{margin-top:1px}
.gm-row .gm-rk{display:inline-flex;align-items:center;gap:7px;min-width:0}
.gm-row .gm-medal{flex:none;width:22px;text-align:center;font-size:.95rem}
.gm-row .gm-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-row .gm-val{color:var(--ink-soft);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.gm-row.gm-me{background:var(--accent-soft)}
.gm-row.gm-me .gm-nm{color:var(--accent-ink);font-weight:600}

/* Board-Karte (dezenter Verlauf hinter dem Spielfeld) */
.gm-board-inner{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}

/* Sieg-Modal (gemeinsam) */
.gm-win{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,22,40,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:gmFade .2s ease}
.gm-win[hidden]{display:none}
.gm-win-inner{background:var(--surface);border-radius:20px;padding:26px 30px;text-align:center;max-width:360px;width:100%;box-shadow:0 24px 60px rgba(10,10,30,.35);animation:gmRise .28s cubic-bezier(.2,.8,.3,1.1)}
.gm-win-emoji{font-size:2.7rem;line-height:1}
.gm-win-title{font-family:var(--font-disp,inherit);font-size:1.5rem;margin:6px 0 2px}
.gm-win-stats{color:var(--ink-soft);font-size:.98rem}
@keyframes gmFade{from{opacity:0}to{opacity:1}}
@keyframes gmRise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gm-win,.gm-win-inner{animation:none}}

/* Video-Kachel-Markierung in der Galerie (Foto-Modul kann jetzt auch Videos enthalten) */
.ph-vidbadge{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:15px;pointer-events:none}
.ph-media{position:relative}

/* ==========================================================================
   Live-/Koop-Spiele – zentrale Stile (früher als <style>-Blöcke in den
   einzelnen Live-Views). Gemeinsame „Chrome" = .lv-* (ein System für alle
   Modi); spielspezifische Bretter behalten ihren eigenen Präfix.
   ========================================================================== */

/* --- gemeinsame Chrome (Status, Rangliste, Warteraum, Fußzeile) --- */
.lv-status{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);transition:background .25s,border-color .25s}
.lv-status.is-live,.lv-status.is-mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.lv-status.is-done{border-color:#7bd88f;background:color-mix(in srgb,#7bd88f 14%,var(--surface))}
.lv-st-ico{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);overflow:hidden}
.lv-status.is-done .lv-st-ico{background:color-mix(in srgb,#7bd88f 22%,transparent);color:#2f9e58}
.lv-st-ico img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lv-st-tx{display:flex;flex-direction:column;line-height:1.25}
.lv-st-tx strong{font-size:1.05rem}
.lv-status.is-mine .lv-st-tx strong{color:var(--accent)}
.lv-st-tx span{font-size:.85rem;color:var(--ink-soft,#888)}
.lv-spin{animation:lvSpin 1s linear infinite;display:inline-block}
@keyframes lvSpin{to{transform:rotate(360deg)}}
.lv-badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:3px 10px;border-radius:999px}
.lv-stat{font-size:.9rem;color:var(--ink-soft,#888)}.lv-stat strong{color:var(--ink)}

.lv-board{display:flex;flex-direction:column;gap:8px}
.lv-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.lv-row.is-me{border-color:var(--accent)}
.lv-rank{font-weight:800;color:var(--ink-soft,#999);min-width:1.4em;text-align:center}
.lv-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-soft,#999)}
.lv-av img{width:100%;height:100%;object-fit:cover;display:block}
.lv-nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-prog{font-size:.8rem;color:var(--ink-soft,#888)}
.lv-tag{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:#e9f8ee;color:#15803d}
.lv-tag.wait,.lv-tag.is-wait{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border:0}
.lv-tag.is-wrong{background:#fdeaea;color:#c0392b}
.lv-sc{font-weight:800;color:var(--accent);min-width:2.2em;text-align:right;font-variant-numeric:tabular-nums}
.lv-kick{border:none;background:transparent;color:var(--ink-soft,#aaa);cursor:pointer;padding:2px;border-radius:50%}.lv-kick:hover{color:#e05656}

.lv-team{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))}
.lv-team-ico{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.lv-team-tx{display:flex;flex-direction:column;line-height:1.15}.lv-team-lbl{font-size:.8rem;color:var(--ink-soft,#888)}.lv-team-tx strong{font-size:1.5rem;font-variant-numeric:tabular-nums}

.lv-share{padding:18px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));text-align:center}
.lv-code-wrap{display:flex;justify-content:center;margin-bottom:12px}
.lv-code{font-size:2rem;letter-spacing:.35em;font-weight:800;padding:8px 6px 8px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.lv-share-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lv-share-hint{font-size:.82rem;color:var(--ink-soft,#888);margin:12px 0 0}
.lv-lobby-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}

.lv-host-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.lv-foot{display:flex;justify-content:center;margin-top:4px}
.lv-exit.is-host{color:#c0392b;border-color:color-mix(in srgb,#c0392b 40%,var(--line))}

.lv-done{text-align:center;padding:26px 18px}
.lv-done-ico{font-size:2.6rem;color:var(--accent);margin-bottom:8px}
.lv-done-title{margin:0 0 6px}
.lv-done-sub{color:var(--ink-soft,#888);margin:0 0 18px;font-size:1.05rem}
.lv-done-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){.lv-spin{animation:none}}

/* --- Wortsuche-Brett --- */
.ws-play{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:start}
@media (max-width:820px){.ws-play{grid-template-columns:1fr}}
.ws-grid{display:grid;gap:4px;user-select:none;touch-action:none;max-width:540px;margin:0 auto}
.ws-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:7px;font-weight:700;font-size:clamp(.7rem,2.4vw,1.05rem);cursor:pointer;text-transform:uppercase;color:var(--ink);box-shadow:0 1px 2px rgba(20,20,40,.05);transition:background .1s}
.ws-cell.is-sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.ws-cell.is-found{background:#e9f8ee;border-color:#7ad493;color:#15803d}
.ws-words{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.ws-words li{padding:5px 12px;border:1px solid var(--line);border-radius:20px;font-size:.9rem;font-weight:600;color:var(--ink-soft);transition:all .12s}
.ws-words li.is-done{text-decoration:line-through;color:#15803d;background:#e9f8ee;border-color:#7ad493}

/* --- Aufdeck-Spiel (reveal) --- */
.rvl-q{font-family:var(--font-disp,inherit);font-size:1.25rem;font-weight:600;text-align:center;margin:2px 0 12px}
.rvl-stage{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/3;max-width:520px;margin:0 auto;box-shadow:var(--shadow)}
.rvl-stage img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(30px) saturate(1.1);transform:scale(1.06);transition:filter .9s ease,transform .9s ease}
.rvl-bar{display:flex;gap:5px;margin:12px auto 4px;max-width:520px}
.rvl-bar i{flex:1;height:6px;border-radius:99px;background:var(--surface-2);transition:background .3s}
.rvl-bar i.on{background:var(--accent)}
.rvl-pts{text-align:center;font-weight:700;color:var(--accent);margin:4px 0 14px;min-height:1.2em}
.rvl-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;margin:0 auto}
@media(max-width:520px){.rvl-opts{grid-template-columns:1fr}}
.rvl-opt{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:600;cursor:pointer;text-align:center;transition:transform .1s,border-color .2s}
.rvl-opt:hover{transform:translateY(-1px);border-color:var(--accent-2,var(--accent))}
.rvl-opt.correct{background:#e1f3ec;border-color:#1f6f57;color:#1f6f57}
.rvl-opt.wrong{background:#fbe3e3;border-color:#c0392b;color:#c0392b}
.rvl-opt.chosen{outline:2px solid var(--accent);outline-offset:-2px}
.rvl-opt[disabled]{cursor:default}
.rvl-result{text-align:center;margin-top:16px;font-weight:700}
@media (prefers-reduced-motion: reduce){.rvl-stage img{transition:none}}

/* --- Fehlersuche (spot) --- */
.sp-loading{padding:40px 0;text-align:center;color:var(--ink-soft)}
.sp-loading .ti{animation:lvSpin 1s linear infinite;display:inline-block}
.sp-stage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.sp-stage{grid-template-columns:1fr}}
.sp-fig{margin:0}.sp-fig figcaption{margin-bottom:6px;display:flex;align-items:center;gap:5px}
.sp-canvas{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);cursor:crosshair;touch-action:manipulation;background:var(--surface-2);box-shadow:0 1px 3px rgba(20,20,40,.08)}
.sp-hint{margin:14px 0 0;color:var(--ink-soft);font-size:.86rem}.sp-hint .ti{color:var(--accent)}

/* --- Foto-Puzzle (puzzle) --- */
.pz-wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start}
@media (max-width:760px){.pz-wrap{grid-template-columns:1fr}}
.pz-stagewrap{position:relative;width:100%;max-width:520px;margin:0 auto}
.pz-board{position:relative;width:100%;aspect-ratio:1/1;display:grid;gap:3px;background:transparent;border-radius:10px;overflow:hidden;touch-action:manipulation}
.pz-tile{background-repeat:no-repeat;cursor:pointer;border-radius:5px;box-shadow:0 1px 2px rgba(20,20,40,.12);transition:transform .08s ease,filter .1s}
.pz-tile.pz-movable:hover{filter:brightness(1.07)}
.pz-tile.pz-blank{visibility:hidden;cursor:default;box-shadow:none}
.pz-board.pz-solved .pz-tile{box-shadow:none;border-radius:0}
.pz-board.pz-solved .pz-tile.pz-blank{visibility:visible}
.pz-board.pz-peek .pz-tile{outline:1px solid rgba(255,255,255,.35)}
.pz-peek{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft);margin-top:4px}

/* --- Live-Quiz (kooperativ) --- */
.qzl-question{font-size:1.2rem;font-weight:700;line-height:1.35;margin:2px 0 16px}
.qzl-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.qzl-options{grid-template-columns:1fr}}
.qzl-opt{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--surface);cursor:pointer;font-size:1rem;font-weight:600;color:var(--ink);transition:border-color .15s,background .15s,transform .08s}
.qzl-opt:hover:not(:disabled){border-color:var(--accent)}
.qzl-opt:active:not(:disabled){transform:scale(.99)}
.qzl-opt:disabled{cursor:default}
.qzl-opt .qzl-opt-key{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.qzl-opt.is-picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.qzl-opt.is-correct{border-color:#2ecc71;background:color-mix(in srgb,#2ecc71 14%,var(--surface))}
.qzl-opt.is-correct .qzl-opt-key{background:#2ecc71;color:#fff}
.qzl-opt.is-wrong{border-color:#e05656;background:color-mix(in srgb,#e05656 12%,var(--surface))}
.qzl-opt.is-wrong .qzl-opt-key{background:#e05656;color:#fff}
.qzl-feedback{margin-top:16px;padding:12px 16px;border-radius:12px;font-weight:600;text-align:center}
.qzl-feedback.is-ok{background:color-mix(in srgb,#2ecc71 12%,var(--surface));color:#15803d}
.qzl-feedback.is-no{background:color-mix(in srgb,#e05656 10%,var(--surface));color:#c0392b}
.qzl-feedback.is-wait{background:var(--surface-2);color:var(--ink-soft,#888)}

/* --- Kreuzwort-Koop: Spielerliste (Pillen) + Brett --- */
.cwl-board-list{display:flex;flex-wrap:wrap;gap:8px}
.cwl-row{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.cwl-row.is-me{border-color:var(--accent)}
.cwl-av{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-soft,#999)}
.cwl-av img{width:100%;height:100%;object-fit:cover;display:block}
.cwl-nm{font-weight:600;font-size:.9rem}
.cwl-dot{width:8px;height:8px;border-radius:50%;background:#cfd4da}.cwl-row.is-on .cwl-dot{background:#2ecc71}
.cw-play{--cw-tile:var(--surface);--cw-solved:#e9f8ee;--cw-solved-bd:#7ad493;--cw-solved-ink:#15803d;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
@media (max-width:900px){.cw-play{grid-template-columns:1fr}}
.cw-gridwrap{overflow:auto}
.cw-grid{display:grid;gap:4px;width:max-content;max-width:100%;margin:0 auto}
.cw-cell{position:relative;width:var(--cw,34px);height:var(--cw,34px);box-sizing:border-box}
.cw-cell.blk{background:transparent}
.cw-cell.fill{background:var(--cw-tile);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:7px;box-shadow:0 1px 2px rgba(20,20,40,.06);transition:background .12s,box-shadow .12s,transform .05s}
.cw-cell.fill input{width:100%;height:100%;border:0;text-align:center;text-transform:uppercase;font-weight:700;font-size:calc(var(--cw,34px)*.52);background:transparent;color:var(--ink);padding:0;caret-color:var(--accent);border-radius:7px}
.cw-cell.fill input:focus{outline:0}
.cw-cell.hl{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.cw-cell.active{background:var(--surface);box-shadow:0 0 0 2px var(--accent),0 2px 6px rgba(20,20,40,.12);z-index:1}
.cw-cell.solved{background:var(--cw-solved);border-color:var(--cw-solved-bd)}
.cw-cell.solved input{color:var(--cw-solved-ink)}
.cw-cell.active.solved{box-shadow:0 0 0 2px var(--cw-solved-bd),0 2px 6px rgba(20,20,40,.12)}
.cw-cell.bad input{color:#dc2626}
.cw-cell.win-pop{animation:cwPop .4s ease}
@keyframes cwPop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.cw-num{position:absolute;top:2px;left:3px;font-size:calc(var(--cw,34px)*.28);line-height:1;color:#9aa;font-weight:600;pointer-events:none}
.cw-hint{margin:14px 2px 0;color:var(--ink-soft);font-size:.86rem}
.cw-hint .ti{color:var(--accent)}
.cw-clues{display:flex;flex-direction:column;gap:16px}
.cw-clue-dir{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:.85rem;margin-right:2px}
.cw-cluelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cw-cluelist li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;padding:7px 9px;border-radius:10px;cursor:pointer;line-height:1.35;border-left:3px solid transparent;transition:background .12s}
.cw-cluelist li:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cw-cluelist li.is-on{background:var(--accent-soft);border-left-color:var(--accent)}
.cw-cluelist li.done{color:#9aa1ab}
.cw-cluelist li.done .cw-cl-tx{text-decoration:line-through}
.cw-cluelist li.done .cw-cl-num{background:var(--cw-solved);color:var(--cw-solved-ink)}
.cw-cl-num{flex:none;min-width:22px;height:22px;padding:0 5px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;background:var(--accent-soft);color:var(--accent-ink)}
.cw-cl-len{color:#9aa1ab;font-weight:600}

/* --- Gruppenmemory ONLINE --- */
.ml-turnbar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);transition:background .25s,border-color .25s}
.ml-turnbar.is-mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.ml-turnbar.is-done{border-color:#7bd88f;background:color-mix(in srgb,#7bd88f 14%,var(--surface))}
.ml-tb-ico{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);overflow:hidden}
.ml-turnbar.is-done .ml-tb-ico{background:color-mix(in srgb,#7bd88f 22%,transparent);color:#2f9e58}
.ml-tb-ico img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ml-tb-tx{display:flex;flex-direction:column;line-height:1.25}
.ml-tb-tx strong{font-size:1.05rem}
.ml-tb-tx span{font-size:.85rem;color:var(--ink-soft,#888)}
.ml-turnbar.is-mine .ml-tb-tx strong{color:var(--accent)}
.ml-pulse{position:relative}
.ml-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:mlPulse 1.6s ease-out infinite}
@keyframes mlPulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.25);opacity:0}}
.memg-scores{display:flex;flex-wrap:wrap;gap:10px}
.memg-sc{position:relative;display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);transition:border-color .18s,box-shadow .18s,transform .18s}
.memg-sc.is-turn{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);transform:translateY(-1px)}
.memg-sc.is-out{opacity:.4;filter:grayscale(.6)}
.memg-sc-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--surface);position:relative;display:flex;align-items:center;justify-content:center;color:var(--ink-soft,#999)}
.memg-sc-av img{width:100%;height:100%;object-fit:cover;display:block}
.memg-sc-nm{font-weight:600;font-size:.92rem}
.memg-sc-pts{font-weight:800;color:var(--accent);min-width:1.3em;text-align:center;font-variant-numeric:tabular-nums}
.memg-sc .ml-crown{color:#f2b705;margin-left:-2px}
.memg-sc .ml-wait{font-size:.72rem;color:var(--ink-soft,#888);font-weight:600;display:inline-flex;align-items:center;gap:3px}
.memg-sc .ml-joined{color:#3fb469;font-size:.95rem}
.memg-sc .ml-kick{margin-left:2px;border:none;background:transparent;color:var(--ink-soft,#aaa);cursor:pointer;padding:2px;line-height:1;border-radius:50%}
.memg-sc .ml-kick:hover{color:#e05656;background:color-mix(in srgb,#e05656 12%,transparent)}
.mem-board{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);max-width:600px;margin:0 auto}
.mem-card{position:relative;aspect-ratio:1/1;border-radius:12px;perspective:800px;cursor:pointer;background:transparent}
.mem-card.is-lock{cursor:default}
.mem-card:not(.is-lock):hover{transform:translateY(-2px)}
.mem-inner{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d;pointer-events:none}
.mem-card.is-up .mem-inner,.mem-card.is-done .mem-inner{transform:rotateY(180deg)}
.mem-face{position:absolute;inset:0;border-radius:12px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.mem-back{background:linear-gradient(140deg,var(--accent),var(--accent-2,#e0a07f));color:#fff;box-shadow:0 2px 6px rgba(20,20,40,.16)}
.mem-back::before{content:"";position:absolute;inset:6%;border:1px solid rgba(255,255,255,.42);border-radius:8px;pointer-events:none}
.mem-brand{display:block;width:66%;height:auto}
.mem-front{transform:rotateY(180deg);background:var(--surface-2)}
.mem-front img{width:100%;height:100%;object-fit:cover;display:block}
.mem-card.is-done{cursor:default;animation:memPop .35s ease}
.mem-card.is-done .mem-front{outline:3px solid #7bd88f;outline-offset:-3px}
.mem-card.is-replay .mem-front{outline:3px solid var(--accent);outline-offset:-3px}
@keyframes memPop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.ml-inner,.mem-inner{transition:none}.mem-card.is-done{animation:none}.ml-pulse::after{animation:none}}
/* Ende Live-/Koop-Spiele */

/* --- Live-Einstiegsseite (games/livelanding) --- */
.ll-hero{display:flex;gap:18px;align-items:center;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));padding:20px 22px}
@media (max-width:560px){.ll-hero{flex-direction:column;text-align:center}}
.ll-hero-ic{flex:0 0 auto;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:2rem;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.ll-hero-t{font-family:var(--font-disp,inherit);font-weight:800;font-size:1.2rem;line-height:1.2;margin-bottom:4px}
.ll-hero-d{color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.ll-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.ll-actions{justify-content:center}}
.ll-create{display:flex;flex-direction:column;gap:14px}
.ll-diff{display:flex;flex-direction:column;gap:12px}
.ll-diff-field{display:flex;flex-direction:column;gap:6px}
.ll-diff-lbl{font-size:.82rem;font-weight:700;color:var(--ink-soft,#777);text-transform:uppercase;letter-spacing:.03em}
.ll-chips{display:flex;gap:8px;flex-wrap:wrap}
.ll-chip{cursor:pointer}
.ll-chip input{position:absolute;opacity:0;pointer-events:none}
.ll-chip span{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:.9rem;transition:border-color .12s,background .12s,color .12s}
.ll-chip:hover span{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ll-chip input:checked+span{border-color:var(--accent);background:var(--accent);color:#fff}
@media (max-width:560px){.ll-actions{justify-content:center}.ll-diff-field{align-items:center}}
.btn-lg{padding:11px 20px;font-size:1.02rem}
.ll-join{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ll-code{font-size:1.15rem;letter-spacing:.28em;font-weight:700;text-transform:uppercase;max-width:220px;text-align:center}
.ll-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;line-height:1.5}

/* ==========================================================================
   Profil-Übersicht: In Zahlen, Verbundenheit, Aktivitäts-Heatmap, Zeitleiste
   ========================================================================== */
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.pf-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);text-align:center}
.pf-stat-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:1.05rem;margin-bottom:2px}
.pf-stat-v{font-family:var(--font-disp,inherit);font-weight:700;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.pf-stat-l{font-size:.78rem;color:var(--ink-soft,#888)}

.pf-bond-tier{font-size:.78rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:3px 11px;border-radius:999px}
.pf-bond{height:14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.pf-bond-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 65%,#fff),var(--accent));transition:width .6s ease}

.pf-heat-wrap{overflow-x:auto;padding-bottom:4px}
.pf-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;width:max-content}
.pf-heat-c{width:13px;height:13px;border-radius:3px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.pf-heat-c.pf-l0{background:var(--surface-2)}
.pf-heat-c.pf-l1{background:color-mix(in srgb,var(--accent) 28%,var(--surface));border-color:transparent}
.pf-heat-c.pf-l2{background:color-mix(in srgb,var(--accent) 50%,var(--surface));border-color:transparent}
.pf-heat-c.pf-l3{background:color-mix(in srgb,var(--accent) 72%,var(--surface));border-color:transparent}
.pf-heat-c.pf-l4{background:var(--accent);border-color:transparent}
.pf-heat-legend{display:flex;align-items:center;gap:4px;margin-top:10px}
.pf-heat-legend .pf-heat-c{width:11px;height:11px}
/* Aktivität – Zusammenfassung (Kernzahlen + Wochen-Verlauf) */
.pf-act-hero{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pf-act-big{font-family:var(--font-disp);font-size:2.6rem;line-height:1;color:var(--accent-ink)}
.pf-act-big small{display:block;font-family:var(--font-ui);font-size:.8rem;color:var(--ink-faint);font-weight:400;margin-top:4px}
.pf-act-stats{display:flex;gap:10px;flex-wrap:wrap;flex:1;min-width:200px}
.pf-act-stat{flex:1;min-width:120px;background:var(--surface-2);border-radius:var(--radius);padding:10px 13px}
.pf-act-stat .k{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--ink-faint)}
.pf-act-stat .v{margin-top:3px;font-size:1.05rem;font-weight:700;color:var(--ink)}
.pf-act-spark{margin-top:16px}
.pf-act-spark-cap{display:flex;justify-content:space-between;margin-bottom:6px}
.pf-act-area{fill:var(--accent-soft)}
.pf-act-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

.pf-timeline{list-style:none;margin:0;padding:0}
.pf-tl{position:relative;display:flex;gap:14px;padding-bottom:16px}
.pf-tl:last-child{padding-bottom:0}
.pf-tl::before{content:"";position:absolute;left:17px;top:36px;bottom:-2px;width:2px;background:var(--line)}
.pf-tl:last-child::before{display:none}
.pf-tl-dot{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft,color-mix(in srgb,var(--accent) 14%,var(--surface)));color:var(--accent);position:relative;z-index:1}
.pf-tl-body{display:block;flex:1;min-width:0;color:inherit;text-decoration:none;padding:6px 34px 6px 10px;border-radius:10px;position:relative}
a.pf-tl-body:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pf-tl-go{position:absolute;right:8px;top:50%;transform:translateY(-50%)}

/* Profil: Sternzeichen + Geburtstags-Countdown */
.pf-bday{display:flex;align-items:center;gap:16px;padding:16px 20px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.pf-bday-ic{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.7rem;box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 35%,transparent)}
.pf-bday-sign{font-family:var(--font-disp,inherit);font-weight:700;font-size:1.15rem;line-height:1.2}

/* Profil: Status, Gaming-Showcase */
.pf-status-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf-status-emoji{width:64px;text-align:center;font-size:1.2rem;flex:0 0 auto}
.pf-status-text{flex:1;min-width:160px}
.pf-status-show{display:flex;align-items:center;gap:14px;padding:14px 18px;border-color:color-mix(in srgb,var(--accent) 26%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.pf-status-emoji-b{font-size:1.8rem;line-height:1;flex:0 0 auto}
.pf-status-txt{font-weight:600}
.pf-game-fav{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.pf-game-ic{flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.5rem}
.pf-game-favn{font-family:var(--font-disp,inherit);font-weight:700;font-size:1.15rem;line-height:1.2}

/* Profil: Gestaltung (Akzent-Swatches, Lieblingsfoto-Picker + Highlight) */
.pf-swatches{display:flex;gap:10px;flex-wrap:wrap}
.pf-swatch{cursor:pointer;line-height:0}
.pf-swatch input{position:absolute;opacity:0;pointer-events:none}
.pf-swatch span{display:block;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);box-shadow:0 1px 3px rgba(20,20,40,.12);transition:transform .1s}
.pf-swatch .pf-sw-def{background:conic-gradient(from 210deg,#c25e3a,#d6608a,#3f78c2,#3f9e6a,#d4a017,#c25e3a)}
.pf-swatch:hover span{transform:scale(1.08)}
.pf-swatch.is-on span,.pf-swatch input:checked+span{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.pf-pin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pf-pin{cursor:pointer;position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid var(--line);display:block}
.pf-pin input{position:absolute;opacity:0;pointer-events:none}
.pf-pin img{width:100%;height:100%;object-fit:cover;display:block}
.pf-pin-none{width:100%;height:100%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-soft,#999);font-size:1.3rem}
.pf-pin.is-on,.pf-pin:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.pf-fav{display:block;position:relative;padding:0;overflow:hidden;text-decoration:none;color:inherit;line-height:0}
.pf-fav-img{width:100%;max-height:340px;object-fit:cover;display:block}
.pf-fav-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;color:#fff;background:color-mix(in srgb,var(--accent) 86%,transparent);padding:5px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25);line-height:1}
.pf-fav-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 16px 12px;color:#fff;font-weight:600;line-height:1.3;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}

/* Profil: Titelbild (Cover) im Hero */
.ph-hero{position:relative;overflow:hidden}
.ph-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph-cover-shade{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.5))}
.ph-hero.has-cover .hero-emoji{opacity:.14}
.pf-cover-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf-cover-row .input{flex:1;min-width:180px}

/* Profil: Reaktionen (Herz) auf Steckbrief-Antworten */
.pf-react{margin-top:8px}
.pf-heart{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft,#888);font-weight:600;font-size:.85rem;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.pf-heart:hover{border-color:color-mix(in srgb,#e05656 45%,var(--line));color:#e05656}
.pf-heart.is-on{border-color:#e05656;color:#e05656;background:color-mix(in srgb,#e05656 8%,var(--surface))}
.pf-heart.is-static{cursor:default}
.pf-heart i{font-size:1rem}
.pf-heart-n{font-variant-numeric:tabular-nums}


.pf-msg{display:flex;flex-direction:column;gap:16px}
.pf-msg-audio{width:100%;margin-top:4px;display:block}
.pf-msg-video{width:100%;max-height:420px;margin-top:4px;border-radius:var(--radius-sm);background:#000;display:block}

/* Profil: Besucher-Anordnung („So sehen dich Besucher") */
.pf-preview-note{display:flex;align-items:center;gap:7px;margin:6px 2px -6px;padding-top:6px;border-top:1px dashed var(--line);color:var(--ink-soft)}
.pf-arrange-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pf-arrange-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);transition:opacity .12s,border-color .12s,transform .12s}
.pf-arrange-row.is-off{opacity:.5}
.pf-arrange-row.is-moved{border-color:var(--accent);transform:scale(1.01)}
.pf-arrange-move{display:inline-flex;flex-direction:column;gap:2px;flex:none}
.pf-arrange-btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-soft);border-radius:6px;width:26px;height:18px;display:grid;place-items:center;cursor:pointer;padding:0;line-height:0;transition:background .12s,color .12s,border-color .12s}
.pf-arrange-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pf-arrange-btn:disabled{opacity:.35;cursor:default}
.pf-arrange-btn i{font-size:.95rem}
.pf-arrange-ic{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--accent-soft,var(--surface-2));color:var(--accent-ink,var(--ink-soft))}
.pf-arrange-label{flex:1;min-width:0;font-weight:600;font-size:.92rem}
.pf-arrange-toggle{flex:none;position:relative;display:inline-flex;cursor:pointer}
.pf-arrange-toggle input{position:absolute;opacity:0;width:0;height:0}
.pf-arrange-switch{width:40px;height:23px;border-radius:999px;background:var(--line-2);position:relative;transition:background .14s}
.pf-arrange-switch::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .14s}
.pf-arrange-toggle input:checked+.pf-arrange-switch{background:var(--accent)}
.pf-arrange-toggle input:checked+.pf-arrange-switch::after{transform:translateX(17px)}
.pf-arrange-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Profil: Gästebuch (Text + Medien zusammengeführt) */

/* Einstellungen: Abschnitts-Überschrift zum Gruppieren mehrerer Karten */
.set-group-h{margin:28px 2px 14px;padding-top:22px;border-top:1px solid var(--line)}
.set-group-h h2{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--font-disp,inherit);font-size:1.08rem;font-weight:700;line-height:1.2}
.set-group-h h2 i{color:var(--accent)}
.set-group-h .sub{display:block;margin-top:4px;color:var(--ink-soft);font-size:.86rem}
.pf-sub-label{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:.9rem;font-weight:600;color:var(--ink)}
.pf-sub-label i{color:var(--accent);font-size:1rem}

/* Gästebuch-Composer (Auswahl Text / Audio / Video) + Feed */
.pf-gb-modes{margin-bottom:14px}
.pf-gb-panel{display:none}
.pf-gb:not(:has(input[name="gbmode"])) .pf-gb-panel{display:block}
.pf-gb:has(input[name="gbmode"][value="text"]:checked) .pf-gb-panel[data-mode="text"]{display:block}
.pf-gb:has(input[name="gbmode"][value="audio"]:checked) .pf-gb-panel[data-mode="media"]{display:block}
.pf-gb:has(input[name="gbmode"][value="video"]:checked) .pf-gb-panel[data-mode="media"]{display:block}
/* Direkt-Aufnahme nur im Audio-Modus zeigen */
.pf-gb .mm-voice{display:none}
.pf-gb:has(input[name="gbmode"][value="audio"]:checked) .mm-voice{display:block}
.pf-gb-file{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer}
.pf-gb-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.pf-gb-fname{word-break:break-word}
.pf-gb-fname.is-picked{color:var(--ink);font-weight:600}
.pf-gb-formats{margin:8px 0 0}
.pf-gb-actions{display:flex;justify-content:flex-end;margin-top:14px}
/* Gästebuch – vertikale Anordnung ohne Rahmen: Composer-Box + Einträge als eigene Karten */
.pf-gb-wrap{display:flex;flex-direction:column;gap:16px}
.pf-gb-composer .pf-gb-actions{margin-top:14px}
/* Gästebuch-Feed – Eintrag als eigene Karte (Kopfzeile + Inhalt) */
.pf-gb-feed{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.pf-gb-item{overflow:hidden}
.pf-gb-head{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line)}
.pf-gb-who{display:flex;flex-direction:column;min-width:0}
.pf-gb-nm{font-weight:700;line-height:1.15;color:var(--ink);text-decoration:none}
.pf-gb-nm:hover{text-decoration:underline}
.pf-gb-dt{font-size:.76rem;color:var(--ink-faint)}
.pf-gb-sp{flex:1}
.pf-gb-chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.pf-gb-chip.is-text{background:var(--surface-2);color:var(--ink-soft)}
.pf-gb-delform{margin:0;line-height:0}
.pf-gb-del{border:0;background:none;color:var(--ink-faint);cursor:pointer;padding:5px;border-radius:var(--radius-sm);line-height:0;transition:color .12s,background .12s}
.pf-gb-del:hover{color:var(--bad);background:var(--bad-soft)}
/* „Gefällt mir" – NUR der/die Empfänger:in kann herzen; sonst schreibgeschützte Markierung */
.pf-gb-likeform{margin:0;line-height:0}
.pf-gb-like{display:inline-flex;align-items:center;border:0;background:none;color:var(--ink-faint);cursor:pointer;padding:5px;border-radius:var(--radius-sm);line-height:0;transition:color .12s,background .12s,transform .12s}
.pf-gb-like:hover{color:var(--bad);background:var(--bad-soft)}
.pf-gb-like.is-on{color:var(--bad)}
.pf-gb-like.is-on:active{transform:scale(.9)}
.pf-gb-like.is-static{cursor:default;padding:5px 2px}
.pf-gb-like.is-static:hover{background:none}
.pf-gb-body{padding:14px 15px}
.pf-gb-body .rich-text{line-height:1.55}
.pf-gb-body .pf-msg-audio{width:100%;display:block}
.pf-gb-body .pf-msg-video{width:100%;max-height:360px;border-radius:var(--radius-sm);background:#000;display:block}

/* =========================================================================
   Notfall-Seite (öffentlich, ohne Login) – app/Views/share/emergency.php
   Lebendig im App-Look: Standard-Hero mit Akzent-Verlauf, Vitalwerte als
   „Glas"-Chips im Hero, darunter weiße Karten mit Akzent-Icons. Rot (--nf-danger)
   nur als kleiner Schweregrad-Marker bei Allergien. Passt sich der Profil-
   Akzentfarbe und Hell/Dunkel automatisch an. Druck-/PDF-tauglich.
   ========================================================================= */
:root{--nf-danger:#c8402f;--nf-warn:#e79a3f}
:root[data-theme="dark"]{--nf-danger:#f0705f;--nf-warn:#e6ab5a}
.nf{max-width:660px;margin:0 auto}
/* Hero */
.nf-hero{position:relative;border-radius:22px;padding:24px 26px 20px;color:#fff;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 32%,transparent)}
.nf-hero-wm{position:absolute;right:-14px;bottom:-30px;font-size:170px;opacity:.16;line-height:1;pointer-events:none}
.nf-kick{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.22);padding:6px 14px;border-radius:999px;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800}
.nf-name{font-family:var(--font-disp,serif);font-size:2.05rem;line-height:1.12;margin:13px 0 3px;color:#fff;position:relative;z-index:1}
.nf-sub{color:rgba(255,255,255,.92);position:relative;z-index:1}
.nf-sub b{color:#fff;font-weight:700}
/* Vitalwerte-Chips: gleich groß, eine Reihe */
.nf-chips{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px;margin-top:18px;position:relative;z-index:1}
.nf-chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:15px;padding:11px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center;min-width:0}
.nf-chip .k{font-size:.63rem;text-transform:uppercase;letter-spacing:.07em;opacity:.9;font-weight:700}
.nf-chip .v{font-size:1.42rem;line-height:1.15;font-weight:800;word-break:break-word}
.nf-chip .s{display:block;font-size:.64rem;opacity:.82;margin-top:2px}
.nf-chip.is-blood{background:#fff;color:var(--accent-ink);border-color:#fff}
.nf-chip.is-blood .k{opacity:.65}
.nf-chip.is-flag .v{font-size:1.05rem}
/* Karten */
.nf-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:17px 19px;margin-top:14px;box-shadow:0 3px 14px rgba(20,20,40,.05)}
.nf-card>h2{display:flex;align-items:center;gap:12px;font-family:var(--font-disp,inherit);font-size:1.14rem;margin:0;color:var(--ink)}
.nf-card>h2 .ic{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;flex:none}
.nf-card.is-crit>h2 .ic{background:color-mix(in srgb,var(--nf-danger) 14%,var(--surface));color:var(--nf-danger)}
.nf-hr{height:2px;border:0;border-radius:2px;background:linear-gradient(90deg,var(--accent-soft),transparent);margin:12px 0 2px}
.nf-card.is-crit .nf-hr{background:linear-gradient(90deg,color-mix(in srgb,var(--nf-danger) 30%,var(--surface)),transparent)}
.nf-row{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nf-row:last-child{border-bottom:0;padding-bottom:2px}
.nf-row>:first-child{flex:1;min-width:0}
.nf-txt{line-height:1.6;padding:8px 0 2px;color:var(--ink)}
.nf-sev{font-size:.73rem;font-weight:800;padding:3px 12px;border-radius:999px;white-space:nowrap}
.nf-sev.crit{background:var(--nf-danger);color:#fff}
.nf-sev.sev{background:var(--nf-warn);color:#3a2408}
.nf-sev.mild{background:var(--accent-soft);color:var(--accent-ink)}
.nf-tel{font-weight:800;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.nf-tel-lite{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.nf-foot{text-align:center;color:var(--ink-soft);font-size:.83rem;margin-top:16px;line-height:1.5}
.nf-stand{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--ink) 6%,var(--surface));border-radius:999px;padding:4px 12px;margin-top:8px}
@media (max-width:540px){
  .nf-name{font-size:1.7rem}
  .nf-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nf-card{padding:15px 16px}
}
@media print{
  .no-print{display:none!important}
  .nf-hero{background:#fff!important;color:#000!important;box-shadow:none;border:1px solid #ccc}
  .nf-hero .nf-kick,.nf-name,.nf-sub,.nf-sub b{color:#000!important}
  .nf-chip{border:1px solid #bbb!important;color:#000!important;background:#fff!important}
  .nf-card,.nf-hero{break-inside:avoid;box-shadow:none}
  .nf-tel,.nf-tel-lite{color:#000!important}
}

/* =========================================================================
   Vorsorge – U-Untersuchungen (Reiter in „Gesundheit"), app/Views/medical/index.php
   Zeitstrahl im App-Look (Akzentfarbe), hell/dunkel. Kein eigenes Rot.
   ========================================================================= */
.ck-head{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin-bottom:14px}
.ck-head-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ck-head .card-title{display:inline-flex;align-items:center;gap:8px}
.ck-head-pct{font-size:.82rem;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:3px 11px;white-space:nowrap}
.ck-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,var(--surface));overflow:hidden;margin-top:10px}
.ck-track i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
/* Als Nächstes */
.ck-next{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:13px 15px;margin-bottom:14px;box-shadow:0 3px 14px rgba(20,20,40,.05);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ck-next .lab{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);font-weight:800}
.ck-next b{font-size:1.02rem}
.ck-when-sm{color:var(--ink-soft);font-size:.85rem;margin-top:2px}
/* Zeitstrahl */
.ck-tl{position:relative}
.ck-item{position:relative;padding-left:38px;padding-bottom:12px}
.ck-item::before{content:"";position:absolute;left:13px;top:6px;bottom:-6px;width:2px;background:var(--line)}
.ck-item:last-child::before{display:none}
.ck-dot{position:absolute;left:4px;top:4px;width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;background:var(--surface);border:2px solid var(--line);color:var(--ink-soft);z-index:1}
.ck-item.done .ck-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.ck-item.is-next .ck-dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ck-item.overdue .ck-dot{border-color:var(--nf-danger,#c8402f);color:var(--nf-danger,#c8402f)}
.ck-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px 15px;box-shadow:0 2px 10px rgba(20,20,40,.04)}
.ck-item.is-next .ck-card{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ck-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ck-badge{font-family:var(--font-disp,serif);font-weight:800;font-size:1.02rem;color:var(--accent-ink);background:var(--accent-soft);border-radius:9px;padding:2px 10px;min-width:42px;text-align:center}
.ck-when{color:var(--ink-soft);font-size:.9rem}
.ck-tag-extra{font-size:.66rem;font-weight:700;color:var(--ink-soft);border:1px dashed var(--line);border-radius:999px;padding:1px 8px}
.ck-chip{margin-left:auto;font-size:.72rem;font-weight:800;padding:3px 11px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.ck-chip.done{background:var(--accent-soft);color:var(--accent-ink)}
.ck-chip.due{background:var(--accent);color:#fff}
.ck-chip.upcoming{background:color-mix(in srgb,var(--ink) 7%,var(--surface));color:var(--ink-soft)}
.ck-chip.overdue{background:var(--nf-danger,#c8402f);color:#fff}
.ck-inc{margin:9px 0 0;line-height:1.5;font-size:.92rem;color:var(--ink)}
.ck-inc b{color:var(--ink-soft);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:2px}
.ck-more{margin-top:8px}
.ck-more>summary{list-style:none;cursor:pointer;color:var(--accent-ink);font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;gap:5px}
.ck-more>summary::-webkit-details-marker{display:none}
.ck-more>summary i{transition:transform .15s}
.ck-more[open]>summary i{transform:rotate(90deg)}
.ck-text{margin:8px 0 0;line-height:1.6;color:var(--ink);font-size:.92rem}
.ck-window{margin-top:9px;color:var(--ink-soft);font-size:.85rem;display:inline-flex;align-items:center;gap:6px}
.ck-note{margin-top:9px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:.88rem;line-height:1.5}
.ck-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:.86rem}
.ck-foot-info{color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px}
.ck-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font-weight:700;text-decoration:none}
.ck-donebox>summary{list-style:none;cursor:pointer}
.ck-donebox>summary::-webkit-details-marker{display:none}
.ck-doneform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px;background:color-mix(in srgb,var(--ink) 4%,var(--surface));border:1px solid var(--line);border-radius:12px;padding:12px}
.ck-doneform label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--ink-soft);flex:1;min-width:150px}
.ck-doneform .input{min-width:140px}
.ck-legal{margin-top:14px;color:var(--ink-soft);font-size:.82rem;line-height:1.55;background:color-mix(in srgb,var(--ink) 4%,var(--surface));border:1px solid var(--line);border-radius:12px;padding:12px 14px}

/* Vorlesen (Text-to-Speech) – dezenter Balken über dem Text */
.mm-tts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.mm-tts .btn i{font-size:1.05em}
.mm-tts[data-state="playing"] [data-tts-play],
.mm-tts[data-state="paused"] [data-tts-play]{background:var(--surface-2)}

/* Upload-Manager: Warteschlange & Fortschritt */
.mm-up-overall{margin:12px 0 6px}
.mm-up-summary{font-size:.9rem;font-weight:600;margin-bottom:6px;color:var(--ink-soft,#6b6b6b)}
.mm-up-obar{height:8px;border-radius:999px;background:var(--surface-2,#eee);overflow:hidden}
.mm-up-obar-fill{height:100%;width:0;background:var(--accent,#c25e3a);border-radius:999px;transition:width .2s ease}
.mm-up-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mm-up-row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line,#e7e3de);border-radius:10px;background:var(--surface,#fff)}
.mm-up-row.is-done{border-color:#bfe0c4;background:rgba(120,190,130,.08)}
.mm-up-row.is-err{border-color:#f0b8b1;background:rgba(220,120,110,.07)}
.mm-up-thumb{flex:none;width:44px;height:44px;border-radius:8px;overflow:hidden;background:#0001;display:flex;align-items:center;justify-content:center;color:var(--ink-soft,#888)}
.mm-up-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mm-up-main{flex:1;min-width:0}
.mm-up-name{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-up-bar{height:6px;border-radius:999px;background:var(--surface-2,#eee);overflow:hidden;margin:5px 0 3px}
.mm-up-bar-fill{height:100%;width:0;background:var(--accent,#c25e3a);border-radius:999px;transition:width .15s ease}
.mm-up-row.is-done .mm-up-bar-fill{background:#5fae66}
.mm-up-status{font-size:.78rem;color:var(--ink-soft,#7a7a7a)}
.mm-up-action{flex:none}
.mm-up-retry{border:1px solid var(--line,#d9d4cd);background:var(--surface-2,#faf8f5);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.mm-up-list [data-mm-dropzone], [data-mm-dropzone].mm-drag{}
[data-mm-dropzone].mm-drag{border-color:var(--accent,#c25e3a)!important;background:rgba(194,94,58,.06)!important}

/* Sammelalbum (Panini-Stil) */
.sa-wrap{width:100%}
.sa-head h1{font-size:1.6rem;margin:.1em 0 .1em}
.sa-head .muted{margin:.1em 0 16px}
.sa-prog{padding:18px 20px;margin-bottom:22px}
.sa-prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.sa-prog-num{font-weight:800;font-size:1.1rem}
.sa-prog-num b{color:var(--accent);font-size:1.45rem}
.sa-bar{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:12px 0 14px}
.sa-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2,#d98a5a));transition:width .4s ease}
.sa-badges{display:flex;gap:8px;flex-wrap:wrap}
.sa-badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:700}
.sa-badge.locked{opacity:.5;font-weight:600}
.sa-section-h{display:flex;align-items:center;gap:10px;margin:22px 2px 12px}
.sa-section-h h2{font-size:1.12rem;margin:0}
.sa-section-h .cnt{color:var(--ink-soft);font-size:.85rem;font-weight:600}
.sa-section-h::after{content:"";flex:1;height:1px;background:var(--line)}
.sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.sa-sticker{position:relative;border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:190px;justify-content:flex-start}
.sa-sticker.got{background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.10);transform:rotate(-1.3deg)}
.sa-sticker.got:nth-child(even){transform:rotate(1.5deg)}
.sa-sticker.got::before{content:"";position:absolute;top:0;right:0;width:24px;height:24px;background:linear-gradient(135deg,transparent 46%,rgba(0,0,0,.10) 47%,rgba(255,255,255,.7) 55%,transparent 56%);border-top-right-radius:16px}
.sa-shine{position:absolute;inset:0;border-radius:16px;background:linear-gradient(115deg,rgba(255,255,255,.45),transparent 40%);pointer-events:none;opacity:.5}
.sa-disc{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.1rem;margin:6px 0 8px;background:radial-gradient(circle at 38% 32%,#fff,#f0e7db);border:4px solid #fff;box-shadow:0 0 0 3px var(--gold,#e6b980),0 8px 16px rgba(0,0,0,.16)}
.sa-disc.photo{background-size:cover;background-position:center;font-size:0}
.sa-sticker.empty{background:repeating-linear-gradient(135deg,#faf6f0,#faf6f0 10px,#f3ece2 10px,#f3ece2 20px);border:2px dashed #d8ccbd}
.sa-sticker.empty .sa-disc{background:#fff;border:3px dashed #d8ccbd;box-shadow:none;filter:grayscale(.4);opacity:.6}
.sa-title{font-weight:800;font-size:.9rem;line-height:1.15}
.sa-sticker.empty .sa-title{color:#a89c8c}
.sa-date{color:var(--ink-soft);font-size:.72rem;margin-top:3px}
.sa-note{color:var(--ink-soft);font-size:.74rem;margin-top:4px;font-style:italic}
.sa-chip{margin-top:8px;background:#eef7ee;color:#2f8f4a;border:1px solid #bfe0c4;border-radius:999px;font-size:.68rem;font-weight:800;padding:2px 8px}
.sa-hint{margin-top:8px;font-size:.72rem;color:#b3a695;font-weight:700}
.sa-claim{margin-top:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.sa-more{width:100%}
.sa-more summary{cursor:pointer;font-size:.72rem;color:var(--accent);font-weight:700;list-style:none;text-align:center}
.sa-more summary::-webkit-details-marker{display:none}
.sa-collect{background:var(--accent);color:#fff;border:0;border-radius:999px;font-size:.8rem;font-weight:800;padding:8px 14px;cursor:pointer;box-shadow:0 4px 10px rgba(194,94,58,.32)}
.sa-undo{position:absolute;top:6px;left:6px}
.sa-undo button{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:8px;width:26px;height:26px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center}