/* ============================================================
   Shining Account · shared portal skin (concept 33 "Goldene Mitte")
   ALL cross-page styling lives here. Page-specific styling goes in
   a small scoped <style> on the page. Component classes below are
   the vocabulary builders reuse verbatim.
   ------------------------------------------------------------
   TIER MODEL (GOLD/TSS view — the server sets the body class):
     body.tier-gold  -> GOLD view (default, everything visible)
     body.tier-tss   -> TSS view (GOLD items ghosted + lock chip)
   Mark GOLD-only content with  data-gold  OR  class="gold-item".
   Use .gold-only (hidden in TSS) / .tss-only (shown only in TSS).
   ============================================================ */

:root{
  --col:760px;                 /* one-column max width, desktop too */
  --tb-h:63px; --tb-off:0px;   /* sticky stack: topbar height + admin-bar offset */
  --ivory:#fdfbf3; --card:#fffdf8; --tint:#f2f8f1;
  --forest:#20342b; --ink:#33413a;
  --green:#327461; --leaf:#7cc48f; --teal:#137172; --sky:#9fd6c0; --sky2:#a7e7e0;
  --gold:#d9b25e; --gold-l:#f0d79a; --gold-d:#836828;
  --mute:#636e67; --hair:rgba(32,52,43,.11);
  --serif:'Fraunces',Georgia,serif; --sans:'Darker Grotesque',system-ui,sans-serif;
  --ggold:linear-gradient(135deg,#f0d79a 0%,#d9b25e 60%,#c69f47 100%);
  --gteal:linear-gradient(90deg,var(--sky2),var(--teal));
  --sh:0 14px 36px -20px rgba(32,52,43,.22);
  --sh-lift:0 22px 52px -24px rgba(32,52,43,.3);
  --ease:cubic-bezier(.22,.75,.2,1);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --navh:96px;                 /* bottom-bar clearance */
}

/* ---------- reset & base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--sans);background:var(--ivory);color:var(--ink);font-size:18.5px;line-height:1.38;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(var(--navh) + var(--safe-b))}
/* ---------- foundation guard (theme-contamination fix · CRACK7 A5) ----------
   Re-asserts ONLY the base tokens a later theme/Woo/EK element rule kills.
   Anchored on .tss-portal-body (render.php stamps it on <body>, tier-agnostic)
   with :where() to force (0,1,0): strictly beats every plugin element rule
   (0,0,1) regardless of load order, yet stays AT/BELOW the portal's own
   component classes (.acct/.btn/.sec h2/.evp-close). Placed HERE, right after
   the base reset, so equal-specificity component rules further down win the
   tie. Headings: color only. Buttons: only the 3 props no button class sets
   (no line-height — collides with .evp-close). No a{color} guard (would
   collapse teal/gold accents — orange links are removed by the dequeue).
   No !important. */
.tss-portal-body{font-family:var(--sans);font-size:18.5px;line-height:1.38;color:var(--ink);background:var(--ivory)}
@media(min-width:760px){.tss-portal-body{font-size:19.5px}}
.tss-portal-body :where(h1,h2,h3,h4){color:var(--forest);overflow-wrap:anywhere}
.tss-portal-body :where(button){font-family:inherit;text-transform:none}
body.lock{overflow:hidden}
h1,h2,h3,h4{color:var(--forest);line-height:1.08;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold-l);color:var(--forest)}
.serif{font-family:var(--serif);font-weight:400}

/* one column, centered, same on desktop (Nicole) */
.col{max-width:var(--col);margin:0 auto;padding:0 20px}
@media(min-width:760px){ body{font-size:19.5px} }

/* ---------- ambient light background ---------- */
.bg{position:fixed;inset:0;z-index:-1;background:var(--ivory);overflow:hidden;pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(64px)}
.bg .b1{width:min(88vw,640px);aspect-ratio:1;left:50%;top:-26vh;transform:translateX(-50%);background:radial-gradient(circle,rgba(240,215,154,.5),transparent 66%)}
.bg .b2{width:min(60vw,460px);aspect-ratio:1;right:-16vw;top:24vh;background:radial-gradient(circle,rgba(167,231,224,.34),transparent 66%)}
.bg .b3{width:min(62vw,480px);aspect-ratio:1;left:-18vw;top:60vh;background:radial-gradient(circle,rgba(124,196,143,.22),transparent 66%)}

/* ---------- top bar: logo + page title + account ---------- */
.topbar{position:sticky;top:var(--tb-off,0px);z-index:50;background:rgba(253,251,243,.9);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid var(--hair)}
.tb{max-width:var(--col);margin:0 auto;display:flex;align-items:center;gap:10px;padding:9px 20px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:1}
.brand > span{min-width:0;overflow-wrap:anywhere}
.brand img{flex-shrink:0;width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(217,178,94,.45))}
.brand b{font-family:var(--serif);font-weight:500;font-size:18px;color:var(--forest);white-space:normal;display:block;line-height:1}
.brand small{display:block;margin-top:2px;font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);line-height:1}
.tb-title{flex:1;min-width:0;text-align:center;font-family:var(--serif);font-weight:500;font-size:16px;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:479px){.tb-title{display:none}}
.acct{margin-left:auto;flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--hair);box-shadow:var(--sh);color:var(--forest);transition:transform .25s var(--ease),border-color .25s}
.acct:hover{transform:scale(1.05);border-color:rgba(217,178,94,.55)}
.acct svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* back link (subpages that want it) */

/* ---------- hero (home) ---------- */
.hero{position:relative;text-align:center;padding:42px 0 6px}
.hero .halo{position:absolute;left:50%;top:-30px;width:min(120vw,540px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,247,222,.9) 0%,rgba(240,215,154,.4) 34%,rgba(217,178,94,0) 68%);filter:blur(8px);animation:breathe 6s var(--ease) infinite;pointer-events:none;z-index:-1}
@keyframes breathe{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,10.5vw,56px);letter-spacing:-.02em}
.hero h1 em{font-style:italic;background:var(--ggold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{margin:14px auto 0;max-width:440px;font-size:16.5px;font-weight:600;color:var(--mute)}
.quote{max-width:440px;margin:24px auto 0;padding:0 8px}
.quote .ql{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,4.9vw,21px);line-height:1.35;color:var(--forest);margin-top:6px}
.goldline{width:104px;height:1px;margin:24px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.goldline::after{content:"\2726";position:absolute;left:50%;top:-9px;transform:translateX(-50%);color:var(--gold);font-size:11px}

/* ---------- arrival splash (home only) ---------- */
.splash{position:fixed;inset:0;z-index:300;background:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;animation:spOut .6s var(--ease) 1.5s forwards}
.sp-star{font-size:26px;color:var(--gold);animation:spIn .9s var(--ease) both}
.sp-t{font-family:var(--serif);font-size:clamp(22px,6vw,30px);color:var(--forest);animation:spIn .9s var(--ease) .15s both}
.sp-t em{font-style:italic;color:var(--gold-d)}
@keyframes spIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){html:not(.tsa-motion) .splash{display:none}}

/* ---------- section rhythm ---------- */
section.sec{margin-top:44px;scroll-margin-top:76px}
.kick{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.kick::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--gteal)}
.sec h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,6.6vw,30px);margin-top:8px}
.sec h2 em{font-style:italic;color:var(--gold-d)}
.subline{margin-top:4px;font-size:15px;font-weight:600;color:var(--mute)}
.intro{margin-top:12px;font-size:16px;font-weight:600;color:var(--ink);line-height:1.4}
.card{background:var(--card);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--sh)}
/* Bare text cards (empty/neutral states) have no modifier class supplying padding,
   and the global reset zeroes every margin - so their text sat hard against the
   border and clipped into the 20px radius (reported on mobile 2026-08-01). */
.card.pad{padding:18px 20px}
@media(min-width:480px){.card.pad{padding:22px 24px}}

/* ---------- "Neu für dich" list rows ---------- */
.newlist{margin-top:14px;overflow:hidden}
.newrow{display:flex;align-items:center;gap:13px;padding:15px 16px;transition:background .25s}
.newrow + .newrow{border-top:1px solid var(--hair)}
.newrow:hover{background:rgba(240,215,154,.12)}
.newrow .dot{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ggold);color:#3f3110;box-shadow:0 8px 18px -9px rgba(217,178,94,.8)}
.newrow .dot svg{width:14px;height:14px;fill:currentColor;margin-left:1px}
.newrow.rec2 .dot{background:linear-gradient(135deg,var(--sky2),var(--sky));color:#14453f}
.newrow .nb{flex:1;min-width:0}
.newrow b{display:block;font-size:16.5px;font-weight:800;color:var(--forest);line-height:1.15}
.newrow small{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--mute)}
.newrow .chev{flex-shrink:0;color:var(--gold-d);font-size:18px}

/* ---------- Energy-Insights panel + progress path ---------- */
.ei{margin-top:14px;padding:22px 18px 18px;background:radial-gradient(120% 110% at 14% 0%,rgba(167,231,224,.26),transparent 55%),linear-gradient(155deg,#f4f9f0,#fdf8ea);border:1px solid var(--hair);border-radius:22px;box-shadow:var(--sh)}
@media(min-width:480px){.ei{padding:26px 24px 20px}}
.ei-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ei-top .l{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.ei-top .r{font-size:13px;font-weight:800;color:var(--gold-d);white-space:nowrap}
.ei h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,6vw,27px);margin:8px 0 16px}
.ei h3 em{font-style:italic;color:var(--gold-d)}
.seg{display:flex;gap:5px;height:8px}
.seg i{flex:1;border-radius:100px;background:rgba(32,52,43,.09);position:relative;overflow:hidden}
.seg i.done{background:var(--gteal)}
.seg i.cur::after{content:"";position:absolute;top:0;left:0;bottom:0;width:56%;border-radius:100px;background:linear-gradient(90deg,var(--gold-l),var(--gold));animation:segpulse 2.8s var(--ease) infinite}
@keyframes segpulse{0%,100%{opacity:.55}50%{opacity:1}}
.seg i.fin{border:1px dashed rgba(217,178,94,.65);background:rgba(240,215,154,.14)}
.seg-lbl{margin-top:8px;font-size:13px;font-weight:600;color:var(--mute)}
.seg-lbl b{color:var(--gold-d);font-weight:800}
.path{margin-top:16px;display:flex;flex-direction:column}
.wk{position:relative;display:flex;gap:12px;padding:10px 0;align-items:flex-start}
.wk::before{content:"";position:absolute;left:13px;top:40px;bottom:-4px;width:2px;background:rgba(32,52,43,.1)}
.wk:last-child::before{display:none}
.wk .node{flex-shrink:0;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:#fff;border:1.5px solid var(--hair);color:var(--mute);margin-top:1px}
.wk.done .node{background:var(--teal);border-color:var(--teal);color:#fff}
.wk.cur .node{background:var(--ggold);border-color:transparent;color:#3f3110;box-shadow:0 0 0 5px rgba(217,178,94,.18)}
.wk.fin .node{background:#fff;border:1.5px dashed rgba(217,178,94,.7);color:var(--gold-d)}
.wk .wb{flex:1;min-width:0}
.wk .wd{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.wk h4{font-size:16.5px;font-weight:800;margin-top:1px;line-height:1.16}
.wk.soon h4{color:var(--mute);font-weight:700}
.tag{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:100px}
.tag.seen{background:rgba(26,160,160,.12);color:var(--teal)}
.tag.new{background:var(--ggold);color:#3f3110}
.tag.soon{background:rgba(32,52,43,.06);color:var(--mute)}
.tag.open{background:rgba(240,215,154,.3);color:var(--gold-d)}
.wk .go{flex-shrink:0;align-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--hair);color:var(--forest);transition:.25s}
.wk.cur .go{background:var(--ggold);border-color:transparent;color:#3f3110;box-shadow:0 10px 20px -10px rgba(217,178,94,.85)}
.wk .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lastm{margin-top:12px;display:flex;align-items:center;gap:12px;padding:14px 16px}
.lastm .lb{flex:1;min-width:0}
.lastm .ml{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lastm h4{font-family:var(--serif);font-weight:500;font-size:17.5px;margin-top:2px}
.lastm a{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--teal);font-weight:800;font-size:14px}

/* ---------- events / termine ---------- */
.wanote{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;font-weight:700;color:#12716b;padding:11px 14px;border-radius:14px;background:rgba(26,160,160,.08);border:1px solid rgba(26,160,160,.18)}
.wanote .pd{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#25d366}
/* ---------- live-now hero card (Uzi 2026-09-11: bigger, some excitement, the Zoom join as THE action) ---------- */
section.sec#live{margin-top:14px}
#live + .hero{padding-top:26px}
.livecard{position:relative;overflow:hidden;padding:20px 20px 18px;border-radius:22px;background:radial-gradient(120% 140% at 0% 0%,rgba(167,231,224,.55),transparent 55%),radial-gradient(120% 120% at 100% 100%,rgba(240,215,154,.5),transparent 55%),#fffdf6;border:1.5px solid rgba(26,160,160,.35);box-shadow:0 22px 52px -24px rgba(26,160,160,.45)}
.livecard::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(26,160,160,0),rgba(26,160,160,.12),rgba(217,178,94,.18),rgba(26,160,160,0));animation:liveSpin 9s linear infinite;pointer-events:none}
.livecard>*{position:relative}
.live-top{display:flex;align-items:center;gap:10px}
.live-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 9px;border-radius:100px;background:#12716b;color:#fff;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.live-badge .pd{width:9px;height:9px;border-radius:50%;background:#7cffb2;box-shadow:0 0 0 0 rgba(124,255,178,.7);animation:livePulse 1.6s ease-out infinite}
.live-now{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.livecard .live-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,7vw,34px);line-height:1.08;margin-top:12px;color:var(--forest)}
.live-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px;font-weight:700;color:var(--mute)}
.live-meta b{color:var(--forest)}
.livecard .btn{margin-top:16px;min-height:56px;font-size:17px}
.livecard .seg-lbl{margin-top:14px}
.live-hint{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--mute)}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(124,255,178,.75)}70%{box-shadow:0 0 0 9px rgba(124,255,178,0)}100%{box-shadow:0 0 0 0 rgba(124,255,178,0)}}
@keyframes liveSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.livecard::before,.live-badge .pd{animation:none}}
.evs{margin-top:12px;display:flex;flex-direction:column;gap:11px}
.ev{display:flex;gap:12px;align-items:center;padding:13px 14px;border-radius:18px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh);transition:transform .3s var(--ease),border-color .3s}
.ev:hover{transform:translateY(-2px);border-color:rgba(217,178,94,.45)}
.ev .cal{flex-shrink:0;width:52px;text-align:center;padding:7px 3px;border-radius:13px;background:linear-gradient(165deg,#eef7f2,#fff);border:1px solid rgba(26,160,160,.16)}
.ev .cal .dow{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.ev .cal .dn{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.05;margin:2px 0;color:var(--forest)}
.ev .cal .mo{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--mute)}
.ev .m{flex:1;min-width:0}
.ev h4{font-family:var(--serif);font-weight:500;font-size:17.5px;line-height:1.16}
.ev .meta{font-size:13px;color:var(--mute);font-weight:600;margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.ev .t{flex-shrink:0;text-align:right}
.ev .t b{font-size:15.5px;font-weight:900;color:var(--forest);display:block}
.ev .t span{display:block;font-size:11px;color:var(--mute);font-weight:700}
/* 2026-09-21 (Jana item 2): "Fragen einreichen" pill inside an event card. A nested link: the
   card handler leaves it native, the fragen handler opens the modal. Compact on purpose (the
   48px .btn would dwarf the card). */
.ev .evq{margin-top:9px}
.evq-btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;margin:0;padding:0 14px 0 10px;border-radius:100px;border:1.5px solid rgba(217,178,94,.6);background:#fff;color:var(--gold-d);font:inherit;font-weight:800;font-size:13px;line-height:1;text-decoration:none;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background .25s,border-color .25s}
.evq-btn::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--gold);color:#fff;font-size:11px;font-weight:900;line-height:1}
.evq-btn:hover{background:rgba(240,215,154,.18);border-color:var(--gold)}
.evq-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gtag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:900;letter-spacing:.06em;padding:2px 9px;border-radius:100px;color:#3f3110;background:var(--ggold)}
.free{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:2px 9px;border-radius:100px;color:#12716b;background:rgba(159,214,192,.28)}
.btag{display:inline-flex;align-items:center;font-size:11px;font-weight:900;letter-spacing:.04em;padding:2px 9px;border-radius:100px;color:#12716b;background:rgba(26,160,160,.12)}
.qbtn{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:100px;font-size:12.5px;font-weight:800;white-space:nowrap;border:1.5px solid rgba(217,178,94,.6);color:var(--gold-d);background:#fff;transition:.25s}
.qbtn:hover{background:rgba(240,215,154,.22)}
.glock{display:none;align-items:center;font-size:11px;font-weight:900;letter-spacing:.04em;color:var(--gold-d);padding:2px 9px;border-radius:100px;background:rgba(240,215,154,.32);border:1px dashed rgba(217,178,94,.6);white-space:nowrap}
/* month heading / group divider */
.mh{display:flex;align-items:center;gap:10px;margin:26px 0 0;font-size:12px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.mh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(26,160,160,.35),transparent)}

/* filter chips (sticky row) */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:100px;font-size:13.5px;font-weight:800;white-space:nowrap;background:#fff;border:1px solid var(--hair);box-shadow:var(--sh);color:var(--mute);transition:.2s}
.chip.on{background:var(--ggold);border-color:transparent;color:#3f3110}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-weight:800;font-size:15.5px;padding:0 22px;border-radius:100px;transition:transform .25s var(--ease),box-shadow .25s}
.btn.gold{background:var(--ggold);color:#3f3110;box-shadow:0 12px 26px -12px rgba(217,178,94,.85)}
.btn.gold:hover{transform:translateY(-2px)}
.btn.line{border:1.5px solid rgba(217,178,94,.6);color:var(--gold-d);background:#fff}
.btn.line:hover{background:rgba(240,215,154,.18)}
.btn.wide{display:flex;width:100%}

/* ---------- recordings ---------- */
.count{margin-top:6px;font-size:13px;font-weight:700;color:var(--mute)}
.count b{color:var(--teal);font-weight:900}
.rcat{margin:20px 0 8px;font-size:11.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.rec{display:flex;gap:12px;align-items:center;padding:14px 15px;border-radius:18px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh);position:relative;overflow:hidden;transition:transform .3s var(--ease)}
.rec:hover{transform:translateY(-2px)}
.rec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gteal)}
.rec.g::before{background:var(--ggold)}
.rec .m{flex:1;min-width:0}
.rec h4{font-family:var(--serif);font-weight:500;font-size:17.5px;line-height:1.16}
.rec .meta{font-size:13px;color:var(--mute);font-weight:600;margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
/* status chips: timed (gold "noch X Tage") + earned (green "verdient") */
.until{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:2px 9px;border-radius:100px;background:rgba(240,215,154,.28);color:var(--gold-d)}
.until.earned{background:#e7f2e7;color:#2e6b58}
.play{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(165deg,#eef7f2,#fff);border:1px solid var(--hair);color:var(--forest);transition:.3s}
.rec:hover .play,.vrow:hover .play{background:var(--ggold);color:#3f3110;border-color:transparent}
.play svg{width:13px;height:13px;fill:currentColor;margin-left:2px}

/* ---------- material tiles ---------- */
.tiles{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.tile{display:flex;align-items:center;gap:12px;padding:15px 17px;border-radius:18px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh);transition:transform .3s var(--ease)}
.tile:hover{transform:translateY(-2px)}
.tile b{flex:1;font-size:16.5px;font-weight:800;color:var(--forest)}
.tile .num{font-family:var(--serif);font-size:21px;color:var(--teal);font-weight:500}
.tile small{font-size:12.5px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}

/* ---------- "Wir sind für dich da" ---------- */
.care{margin-top:14px;text-align:center;padding:26px 20px;border-radius:22px;background:radial-gradient(130% 130% at 50% 0%,rgba(159,214,192,.22),transparent 60%),var(--card);border:1px solid var(--hair);box-shadow:var(--sh)}
.care h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,6vw,28px)}
.care p{font-size:15.5px;color:var(--mute);font-weight:600;margin:8px auto 18px;max-width:400px}
.care .stack{display:flex;flex-direction:column;gap:10px}
.cbtn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 18px;border-radius:100px;font-weight:800;font-size:15.5px;background:#fff;border:1px solid var(--hair);box-shadow:var(--sh);color:var(--forest);transition:transform .25s var(--ease),border-color .25s}
.cbtn:hover{transform:translateY(-2px);border-color:rgba(26,160,160,.4)}
.cbtn.first{background:var(--ggold);color:#3f3110;border-color:transparent;box-shadow:0 12px 26px -12px rgba(217,178,94,.85)}

/* ---------- onboarding / masterclass rows ---------- */
.vrow{display:flex;gap:12px;align-items:center;padding:13px 16px}
.vrow + .vrow{border-top:1px solid var(--hair)}
.vrow .num-i{flex-shrink:0;width:26px;text-align:center;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--gold-d)}
.vrow b{flex:1;font-size:16px;font-weight:800;color:var(--forest);line-height:1.2;min-width:0}
.vrow small{flex-shrink:0;font-size:12px;font-weight:800;color:var(--mute)}
.vrow.more b{color:var(--mute);font-weight:700}
.mc-stage{margin-top:14px;position:relative;display:grid;place-items:center;min-height:220px;border-radius:22px;background:radial-gradient(120% 120% at 50% 0%,rgba(240,215,154,.4),transparent 60%),linear-gradient(155deg,#f4f9f0,#fdf8ea);border:1px solid var(--hair);box-shadow:var(--sh);overflow:hidden}
.mc-stage .bigplay{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--ggold);color:#3f3110;box-shadow:0 18px 40px -14px rgba(217,178,94,.9)}
.mc-stage .bigplay svg{width:24px;height:24px;fill:currentColor;margin-left:3px}

/* ---------- check-ins ---------- */
.ci{display:flex;gap:12px;align-items:center;padding:15px 16px;border-radius:18px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh)}
.ci.openci{border:1.5px dashed rgba(217,178,94,.6);background:linear-gradient(130deg,#fffdf6,#fdf6e4)}
.ci .m{flex:1;min-width:0}
.ci h4{font-size:17px;font-weight:800}
.ci small{display:block;font-size:13px;color:var(--mute);font-weight:600;margin-top:1px}
.donep{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:5px 12px;border-radius:100px;background:rgba(26,160,160,.12);color:var(--teal);white-space:nowrap}
.openp{flex-shrink:0;display:inline-flex;align-items:center;font-size:12px;font-weight:800;padding:5px 12px;border-radius:100px;background:rgba(240,215,154,.32);color:var(--gold-d);white-space:nowrap}

/* ---------- collapsible ( .acc + [data-acc] toggles .open ) ---------- */
.acc{border-radius:18px;background:#fff;border:1px solid var(--hair);box-shadow:var(--sh);overflow:hidden}
.acc-h{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;text-align:left;min-height:60px}
.acc-h .aic{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(165deg,#eef7f2,#fff);border:1px solid var(--hair);color:var(--teal)}
.acc-h .aic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acc-h .at{flex:1;min-width:0}
.acc-h h4{font-size:17px;font-weight:800}
.acc-h span{display:block;font-size:12.5px;color:var(--mute);font-weight:600;margin-top:1px}
.acc-h .chev{flex-shrink:0;color:var(--mute);transition:transform .35s var(--ease)}
.acc.open .chev{transform:rotate(90deg)}
.acc-b{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc.open .acc-b{max-height:8000px} /* 2026-09-22: was 2000px, which clipped the Schatzkiste audio list (23 rows = 3172px) - the last six audios were invisible (Nicole). The Termine groups already use 60000px. */
.acc-in{padding:0 16px 16px;font-size:15px;font-weight:600;color:var(--ink)}
.acc-in .since{font-size:15.5px;color:var(--forest)}
.acc-in .hl{font-size:11.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:14px 0 6px}
.acc-in .hl.gd{color:var(--gold-d)}
.acc-in ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.acc-in li{display:flex;gap:8px;align-items:flex-start;line-height:1.25}
.acc-in li .ck{flex-shrink:0;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;margin-top:2px;background:rgba(26,160,160,.13);color:var(--teal);font-size:10px;font-weight:900}
.acc-in li.g .ck{background:var(--ggold);color:#3f3110}
.acc-in li a{border-bottom:1px dotted rgba(26,160,160,.5)}
.acc-in .note{margin-top:14px;padding:11px 13px;border-radius:12px;background:rgba(26,160,160,.06);border:1px solid rgba(26,160,160,.15);font-size:13.5px;line-height:1.35;color:#12716b}
/* ROX2-EI-5: .note only ever existed scoped INSIDE .acc-in, so the EI gate note
   (section-energy-insights.php) rendered as unstyled body text and its inline link
   was invisible (a{color:inherit;text-decoration:none} was the only rule reaching it). */
.note{margin-top:14px;padding:11px 13px;border-radius:12px;background:rgba(26,160,160,.06);border:1px solid rgba(26,160,160,.15);font-size:13.5px;line-height:1.35;color:#12716b}
.note a{color:var(--teal);font-weight:800;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(26,160,160,.5)}
.note a:hover{color:var(--forest)}
.note a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.acc-in .lnk{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-weight:800}
.chev2{flex-shrink:0;color:var(--gold-d);font-size:18px}

/* ---------- footer ---------- */
.foot{text-align:center;padding:34px 20px 8px;color:var(--mute)}
.foot .star{color:var(--gold);font-size:20px}
.foot .sig{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-d);margin-top:6px}
.foot small{display:block;margin-top:6px;font-size:12.5px;letter-spacing:.04em;font-weight:600}
.foot .wa{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin-top:2px;font-size:13.5px;font-weight:800;color:var(--green)}
.foot-sup{display:flex;flex-direction:column;align-items:center;gap:2px}

/* ---------- bottom navigation (5 items, GOLD active) ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(253,251,243,.94);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-top:1px solid var(--hair);box-shadow:0 -12px 30px -24px rgba(32,52,43,.5)}
.nav .in{max-width:var(--col);margin:0 auto;display:flex;justify-content:space-between;gap:2px;padding:7px 8px calc(7px + var(--safe-b))}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;min-width:44px;padding:5px 4px;border-radius:14px;font-size:10.5px;font-weight:800;letter-spacing:.01em;color:var(--mute);white-space:normal;overflow-wrap:anywhere;text-align:center;transition:color .25s,background .25s}
.nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a.on{color:var(--gold-d);background:rgba(240,215,154,.24)}
.nav a.on svg{stroke:var(--gold-d)}
@media(min-width:480px){.nav a{font-size:12px;padding:5px 9px}}
@media(max-width:389px){.nav a{font-size:9.5px;padding:5px 3px;letter-spacing:0}}

/* ---------- account sidebar (slide-in panel) ---------- */
.scrim{position:fixed;inset:0;z-index:110;background:rgba(32,52,43,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.4s}
.scrim.show{opacity:1;visibility:visible}
.panel{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(94vw,420px);background:var(--ivory);box-shadow:-22px 0 56px -20px rgba(32,52,43,.4);transform:translateX(104%);transition:transform .5s var(--ease);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.panel.show{transform:none}
.p-head{position:relative;padding:calc(22px + var(--safe-t)) 22px 18px;background:radial-gradient(130% 120% at 80% -10%,rgba(240,215,154,.5),transparent 60%),linear-gradient(150deg,#f4f9f0,#fdfbf3);border-bottom:1px solid var(--hair)}
.p-close{position:absolute;top:calc(14px + var(--safe-t));right:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--hair);font-size:15px;color:var(--forest)}
.p-head .av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:20px;color:#3f3110;background:var(--ggold);border:2.5px solid #fff;box-shadow:0 10px 22px -10px rgba(217,178,94,.9);margin-bottom:10px}
.p-head h3{font-family:var(--serif);font-weight:500;font-size:24px}
.p-head .pm{margin-top:6px}
.tierchip{display:inline-flex;align-items:center;padding:3px 11px;border-radius:100px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#3f3110;background:var(--ggold)}
.tierchip.tss{background:rgba(159,214,192,.35);color:#12716b}
.p-body{padding:14px 16px calc(26px + var(--safe-b));display:flex;flex-direction:column;gap:10px}

/* ============================================================
   TIER VIEW RULES (GOLD/TSS view — the server sets the body class)
   ============================================================ */
/* GOLD elements muted (never hidden) in TSS view, + lock chip shown.
   CB-U1: this used to be opacity:.45 + saturate(.45). Opacity blends the WHOLE
   card into the ivory ground, and several of these cards are operable (the termine
   event cards are role=button, the recording + library cards are links): forest
   text landed near 2.6:1 and gold text near 1.9:1, both far under the 4.5:1 WCAG
   minimum. The muted look now comes from desaturation + a dashed border + --mute
   text (#636e67 on ivory is about 5:1) with NO transparency at all, so a GOLD card
   still reads as "not yours" while staying legible. Elements that paint their OWN
   background (the lock chip and the house pills/badges) are excluded so they keep
   their own tested colour pairing. */
body.tier-tss :is([data-gold],.gold-item):not(.vexp){filter:saturate(.45);border-style:dashed;color:var(--mute)}
body.tier-tss :is([data-gold],.gold-item):not(.vexp) :where(a,b,strong,em,i,small,span,div,p,h1,h2,h3,h4,li):not(.gtag):not(.glock):not(.goldlock):not(.goldlock-badge):not(.aic):not(.ck):not(.tag):not(.until):not(.openp):not(.chip):not(.plan-tag):not(.btn):not(.qbtn){color:var(--mute)}
body.tier-tss [data-gold] .glock,
body.tier-tss .gold-item .glock{display:inline-flex}
/* ROX2-ONB-2b: an expandable video row mutes only its HEAD, so the GOLD upsell card
   rendered inside the opened body stays fully readable (the rule above skips .vexp
   entirely; this is the head-only half of the same vocabulary). */
body.tier-tss .vexp[data-gold]{filter:none}
body.tier-tss .vexp[data-gold] > .vexp-h{filter:saturate(.45);color:var(--mute)}
body.tier-tss .vexp[data-gold] > .vexp-h :where(b,small,span,i,em,div):not(.gtag):not(.glock):not(.goldlock):not(.vdone){color:var(--mute)}
/* hard show/hide helpers */
.gold-only{}
body.tier-tss .gold-only{display:none}
.tss-only{display:none}
body.tier-tss .tss-only{display:revert}
/* tier chip swap in panel head */
.tierchip.g-off{display:none}
body.tier-tss .tierchip.g-on{display:none}
body.tier-tss .tierchip.g-off{display:inline-flex}
/* legacy alias from concept-33 markup */
.ng-note{display:none;font-size:11px;font-weight:800;padding:2px 9px;border-radius:100px;background:rgba(159,214,192,.28);color:#12716b}
body.tier-tss .ng-note{display:inline-flex}

/* ============================================================
   SCROLL REVEAL — enhancement only. Content is fully visible by
   default; JS only arms elements that are BELOW the fold at load,
   so nothing on screen is ever hidden on first paint.
   ============================================================ */
.reveal-armed{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-armed.reveal-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html:not(.tsa-motion) .reveal-armed{opacity:1;transform:none;transition:none}}

/* ---------- global reduced-motion ---------- */
/* pseudo-elements are included explicitly: the bare * selector does NOT match
   ::before/::after, so page-scoped ::after animations (e.g. energy-insights
   .mseg .fill/.mpanel radiate, onboarding/masterclass button sweeps) would
   otherwise keep running under reduced-motion. */
@media(prefers-reduced-motion:reduce){
  html:not(.tsa-motion) *,html:not(.tsa-motion) *::before,html:not(.tsa-motion) *::after{animation:none!important;transition-duration:.01ms!important}
}

/* ============================================================
   R2 · Fix-Round-2 additions (Jana's feedback, 2026-07-09)
   Appended block — nothing above is modified. New vocabulary:
     .backrow/.backlink ......... back navigation chip (after </header>)
     .libgrid/.libcard .......... rebuilt "Deine Bibliothek" catalog
     .vexp/.vexp-* .............. inline lazy-video expander (rows)
     .vframe .................... 16:9 video placeholder (inline + hero)
     .comingcard/.soonchip ...... "coming soon" recording state
     .aboyear/.ay-* ............. subtle thin Abojahr progress bar
     .teamcard .................. rounded team photo card + caption
     .filt-off .................. shared filter-hide (generic JS filter)
   JS helpers (portal.js): initExpanders() drives [data-exp]; the
   generic initFilters() drives [data-filter-bar]/[data-filter-target].
   ============================================================ */

/* ---------- (a) back navigation · subtle breadcrumb chip ----------
   Copy the canonical markup DIRECTLY AFTER </header> on every page
   except index.html. Sits under the sticky bar, scrolls with content,
   deliberately quieter than a primary button so it never competes.   */
/* Sticky so the back control stays reachable at any scroll position (a tester
   could not click it: the sticky topbar covered it once the page scrolled). */
.backrow{position:sticky;top:calc(var(--tb-off,0px) + var(--tb-h,63px));z-index:45;max-width:var(--col);margin:0 auto;padding:8px 20px 8px}
.backrow::before{content:"";position:absolute;inset:0;z-index:-1;left:50%;transform:translateX(-50%);width:100vw;background:rgba(253,251,243,.94);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
.backlink{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 2px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  transition:color .25s var(--ease),gap .25s var(--ease)}
.backlink:hover{color:var(--forest);gap:11px}
.backlink i{font-style:normal;color:var(--gold);font-size:16px;line-height:1;font-weight:900;transform:translateY(-1px)}

/* ---------- (b) Deine Bibliothek · rebuilt catalog grid ----------
   Filter bar reuses the shared .chips/.chip aesthetic (not sticky here,
   it lives inside content). Cards are a catalog cousin of .rec: left
   accent bar, serif title, category kicker. GOLD rows carry data-gold
   (+ .g for the gold accent) so the shared TSS ghosting/.glock apply.   */
.libgrid{margin-top:14px;display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.libgrid{grid-template-columns:1fr 1fr}}
.libcard{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:13px 15px 13px 18px;border-radius:16px;background:var(--card);
  border:1px solid var(--hair);box-shadow:var(--sh);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s}
.libcard:hover{transform:translateY(-2px);border-color:rgba(217,178,94,.4)}
.libcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gteal)}
.libcard.g::before{background:var(--ggold)}
.lc-cat{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);line-height:1}
.libcard.g .lc-cat{color:var(--gold-d)}
.lc-title{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--forest);line-height:1.16;overflow-wrap:anywhere}
.lc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;font-size:12.5px;font-weight:600;color:var(--mute)}
/* slim library section header (stays subordinate to "Aktuell") */
.lib-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}
.lib-head h3{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--forest)}
.lib-head .tot{flex-shrink:0;font-size:11.5px;font-weight:900;white-space:nowrap;color:#2e6b58;
  background:rgba(126,196,143,.18);padding:3px 11px;border-radius:100px}

/* ---------- (c) inline video expander (onboarding / masterclass) ----------
   A row that expands IN PLACE to a 16:9 placeholder + secondary link.
   Lives inside a .card list; rows divided by a hairline like .vrow.
   JS: [data-exp] on .vexp-h toggles .open on the closest .vexp; only
   one .vexp is open at a time within its [data-exp-scope] (or document). */
.vexp{position:relative;scroll-margin-top:calc(var(--tb-off,0px) + var(--tb-h,63px) + var(--back-h,52px) + 9px)}
.vexp + .vexp{border-top:1px solid var(--hair)}
.vexp-h{width:100%;display:flex;gap:12px;align-items:center;padding:13px 16px;text-align:left;min-height:60px;transition:background .25s}
.vexp-h:hover{background:rgba(240,215,154,.10)}
.vexp-h .num-i{flex-shrink:0;width:26px;text-align:center;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--gold-d)}
.vexp-h .vt{flex:1;min-width:0}
.vexp-h b{display:block;font-size:16px;font-weight:800;color:var(--forest);line-height:1.2;overflow-wrap:anywhere}
.vexp-h small{display:block;font-size:12.5px;font-weight:700;color:var(--mute);margin-top:1px}
.vexp-h .vchev{flex-shrink:0;color:var(--gold-d);transition:transform .35s var(--ease)}
.vexp-h .vchev svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block}
.vexp.open .vexp-h .vchev{transform:rotate(90deg)}
.vexp-b{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.vexp.open .vexp-b{max-height:720px}
.vexp-in{padding:2px 16px 16px}
.vopen{display:inline-flex;align-items:center;gap:5px;min-height:44px;margin-top:11px;color:var(--teal);font-weight:800;font-size:14px}

/* ---------- (c/rec) 16:9 video placeholder frame ----------
   Reused by the inline expander body AND the recording.html hero
   (add .hero for the larger, higher-shadow landing variant).         */
.vframe{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--hair);
  background:
    radial-gradient(120% 130% at 50% 0%,rgba(240,215,154,.42),transparent 58%),
    linear-gradient(158deg,#22403a,#12332e)}
/* 2026-09-17 (Nicole: "the full video and its controls visible on desktop and mobile").
   A 16:9 frame as wide as the column is taller than a laptop viewport leaves free
   (720px column -> 405px of video under ~250px of sticky chrome), so the control bar
   sat under the bottom nav until the member scrolled. The frame is now no wider than
   the width whose 16:9 height still fits between the sticky top stack and the bottom
   nav; it stays centred and never drops below 300px. Phones in portrait are
   unaffected (the viewport term is far larger than the column there). svh where
   supported so mobile browser bars do not count as free space. */
.vframe{max-width:max(300px,calc((100vh - var(--tb-h,63px) - var(--back-h,52px) - var(--navh,67px) - 56px) * 16 / 9));margin-left:auto;margin-right:auto}
@supports(height:100svh){.vframe{max-width:max(300px,calc((100svh - var(--tb-h,63px) - var(--back-h,52px) - var(--navh,67px) - 56px) * 16 / 9))}}
.vframe iframe{min-height:0;max-width:none}
/* 2026-09-21: portrait screen recordings (option tss_portal_portrait_videos) get a 9:16 frame, capped so
   the whole video fits between the sticky bars; fitPlayer still scales the iframe up when the frame is
   narrower than the control bar needs. */
.vexp[data-portrait] .vframe{aspect-ratio:9/16;max-width:min(100%,360px,calc((100vh - var(--tb-h,63px) - var(--back-h,52px) - var(--navh,67px) - 56px) * 9 / 16))}
@supports(height:100svh){.vexp[data-portrait] .vframe{max-width:min(100%,360px,calc((100svh - var(--tb-h,63px) - var(--back-h,52px) - var(--navh,67px) - 56px) * 9 / 16))}}
.vframe .vorb{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--ggold);color:#3f3110;box-shadow:0 16px 38px -14px rgba(217,178,94,.9)}
.vframe .vorb svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.vframe .vph-note{position:absolute;left:0;right:0;bottom:11px;text-align:center;padding:0 12px;
  font-size:12px;font-weight:700;letter-spacing:.01em;color:rgba(255,255,255,.82)}
/* CB-P2: a row whose Bunny GUID is missing or malformed can NEVER get a player -
   portal.js validates the GUID and bails silently - so the frame states that
   instead of showing the "laedt beim Oeffnen" placeholder that spins forever.
   Centred by the frame's own place-items:center; there is no play orb behind it. */
.vframe .vph-na{max-width:86%;text-align:center;font-size:13px;font-weight:700;
  line-height:1.4;color:rgba(255,255,255,.9)}
/* JANA-1 (2026-09-11): .vframe.hero shares the word "hero" with the page-hero rule above (padding:42px 0 6px), so every EI-week and recording player sat inside a 42px dark band. The frame is the player, it carries no padding. */
.vframe.hero{padding:0;border-radius:20px;box-shadow:var(--sh-lift)}
.vframe.hero .vorb{width:78px;height:78px}
.vframe.hero .vorb svg{width:26px;height:26px}
/* ROX2-ONB-2b: a GOLD-locked expander row stays VISIBLE as upsell (product ruling
   2026-09-08 - not hidden, not renumbered), so its frame must not show the
   .vorb/.vph-note "lädt beim Öffnen" pair: no GUID ever reaches the client for a
   locked row, so portal.js can never build a player and that placeholder is a dead
   end. The card below replaces it. It lives here, next to the other frame-internal
   placeholder rules, rather than in the two per-section <style> blocks, which style
   the .vx grid and the description panel - and it is defined ONCE for both. */
.vframe .vx-up{display:flex;flex-direction:column;align-items:center;gap:9px;
  max-width:330px;padding:0 18px;text-align:center}
.vframe .vx-up-t{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.vframe .vx-up-t svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.vframe .vx-up-s{font-size:12.5px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.86)}
.vframe .vx-up-b{min-height:40px;padding:0 18px;font-size:14px}

/* ---------- (d) "coming soon" recording card (not playable) ----------
   One current entry in the PH-Techniken GOLD block. Dashed, calm,
   hourglass corner instead of a play orb, soft "bald verfügbar" chip. */
.comingcard{position:relative;display:flex;gap:12px;align-items:center;padding:14px 15px;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#fbfaf3,#f6f4ea);border:1.5px dashed rgba(217,178,94,.6)}
.comingcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:rgba(217,178,94,.55)}
.comingcard .m{flex:1;min-width:0}
.comingcard h4{font-family:var(--serif);font-weight:500;font-size:17.5px;color:var(--forest);line-height:1.16;overflow-wrap:anywhere}
.comingcard .meta{margin-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;font-weight:600;color:var(--mute)}
.comingcard .cmoon{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(240,215,154,.22);color:var(--gold-d);border:1px dashed rgba(217,178,94,.55)}
.comingcard .cmoon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.soonchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;
  padding:2px 10px;border-radius:100px;background:rgba(240,215,154,.32);color:var(--gold-d);white-space:nowrap}

/* ---------- (e) Abojahr · subtle thin progress bar (abo.html) ----------
   Understated by design (Jana feared "too much"): 6px track, calm
   teal fill, quiet caption. Fill width is set inline per page.        */
.aboyear{margin-top:14px;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh)}
.aboyear .ay-l{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.aboyear p{margin-top:5px;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.34}
.aboyear p b{color:var(--forest);font-weight:800}
.ay-bar{margin-top:12px;height:6px;border-radius:100px;background:rgba(32,52,43,.09);overflow:hidden}
.ay-bar i{display:block;height:100%;border-radius:100px;background:var(--gteal)}
.ay-cap{margin-top:7px;font-size:12.5px;font-weight:700;color:var(--mute)}

/* ---------- (f) team photo card (unterstuetzung.html) ---------- */
.teamcard{margin-top:14px;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh)}
.teamcard img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.teamcard figcaption{padding:13px 16px 15px;text-align:center;font-family:var(--serif);font-weight:500;font-size:17px;color:var(--forest)}

/* ---------- generic filter-hide (shared; used by initFilters) ----------
   Same rule termine.html already defines page-scoped; declaring it here
   lets the shared JS filter work on any page (e.g. the library).      */
.filt-off{display:none!important}

/* ============================================================
   V4 · SHARED DESIGN-SYSTEM LAYER  (appended 2026-07-15)
   Nothing above is modified. New global vocabulary for all 4
   builder agents. Full usage contract in CANONICAL-V4.md.
   Premium calibration (A5): ELEVATED not transformed. Any single
   animation is missable on first glance, rewarding on the second.
   All motion is transform/opacity/box-shadow only, slow, and the
   global prefers-reduced-motion rule above already flattens it.
   Index of blocks:
     [V4-1] ambient background drift
     [V4-2] GOLD lock pattern  (.goldlock chip + .goldlock-badge)
     [V4-3] event popup  (.evp-*)  + one-line rebrand vars
     [V4-4] progress ring  (.pring)
     [V4-5] avatar chip  (.avchip)
     [V4-6] motion primitives  (.u-shimmer / .u-glow / fill)
     [V4-7] premium progress bar  (.pbar)
     [V4-9] colored bottom-bar icons
   ============================================================ */

/* ---------- one-place variables (event popup colors + tokens) ----------
   A7 RE-SKIN: the popup is now BRAND-ALIGNED (no Amelia blue). It reads from
   the portal tokens: ivory surface, forest-green text, a gold gradient
   header/CTA and green accents. Every popup color still reads from the --am-*
   vars below, so the whole component can be re-tuned here in one place. */
:root{
  --am-primary:#327461;      /* portal green (== --green): spinner arc + ghost/cal accents; .evp-btn.ghost + .evp-cal are TEXT, so it must track the token */
  --am-primary-2:#9a7a30;    /* deep gold — gradient anchor + button shadow */
  --am-grad:var(--ggold);    /* portal gold gradient — header band + primary CTA */
  --am-on:#20342b;           /* forest-green text on the gold band */
  --am-text:#20342b;         /* forest-green body text */
  --am-bg:#fffdf8;           /* ivory card surface */
  --am-backdrop:rgba(32,52,43,.52);
  --am-radius:8px;           /* dialog radius (unchanged) */
  --am-font:var(--sans);     /* Darker Grotesque — portal typeface */
}

/* ---------- [V4-1] ambient background drift ----------
   Slow, GPU-cheap drift on the existing .bg blobs. b1 keeps its
   translateX(-50%) base. Transform/opacity only. */
@keyframes bgdrift1{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translate(-50%,3.4vh) scale(1.05);opacity:.86}}
@keyframes bgdrift2{0%,100%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(-3vw,4vh) scale(1.08);opacity:.8}}
@keyframes bgdrift3{0%,100%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(3vw,-3vh) scale(1.06);opacity:.88}}
/* PERF (2026-07-24): the ambient blobs are STATIC. Animating transform:scale() on a
   64px-blurred 640px element re-rasterises a huge blur every frame -> measured 34fps
   (vs 60fps static). Keeping them static composits the blur ONCE. Blur trimmed 64->44px
   to cut the one-time paint too. Visual is unchanged; only the drift is gone. */
.bg i{filter:blur(44px)}

/* ---------- [V4-2] GOLD lock pattern (replaces "Mit GOLD") ----------
   New uniform vocabulary: chip "Nur mit GOLD" WITH an inline padlock,
   plus an optional corner padlock badge on the ghosted card. Both show
   only in TSS view on [data-gold] / .gold-item (ghosting handled by the
   existing tier rules). Old .glock chip stays working but is retired;
   builders swap it for .goldlock. */
.goldlock{display:none;align-items:center;gap:5px;font-size:11px;font-weight:900;letter-spacing:.03em;
  color:var(--gold-d);padding:2px 10px 2px 8px;border-radius:100px;
  background:rgba(240,215,154,.34);border:1px dashed rgba(217,178,94,.62);white-space:nowrap}
.goldlock svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
body.tier-tss [data-gold] .goldlock,
body.tier-tss .gold-item .goldlock{display:inline-flex}
/* corner padlock badge — host needs position:relative (add .haslock) */
.haslock{position:relative}
.goldlock-badge{display:none;position:absolute;top:9px;right:9px;z-index:2;width:26px;height:26px;border-radius:50%;
  place-items:center;background:rgba(255,253,248,.95);color:var(--gold-d);
  border:1px solid rgba(217,178,94,.6);box-shadow:0 6px 16px -8px rgba(217,178,94,.9)}
.goldlock-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.tier-tss [data-gold] .goldlock-badge,
body.tier-tss .gold-item .goldlock-badge{display:grid}

/* ---------- [V4-3] event popup (brand-aligned demo modal, A7) ----------
   Injected + driven by portal.js Portal.openEvent(cfg). Structure kept from
   the AMEC card: backdrop + 8px card, 0.3s fade + 20px drop-in, a ring-spinner
   loader (2.5px, light green track + green top arc, ~0.7s linear) with ONE warm
   German message on open, gold gradient header/CTA, forest body text. All
   colors come from the --am-* vars above (brand re-skin lives in one place). */
.evp-overlay{position:fixed;inset:0;z-index:9999999;display:flex;align-items:center;justify-content:center;
  padding:18px;background:var(--am-backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:evp-fade .3s ease both;overscroll-behavior:contain}
@keyframes evp-fade{from{opacity:0}to{opacity:1}}
.evp-dialog{width:min(94vw,460px);max-height:min(88vh,660px);display:flex;flex-direction:column;
  background:var(--am-bg);border-radius:var(--am-radius);box-shadow:0 30px 80px -30px rgba(0,0,0,.55);
  overflow:hidden;font-family:var(--am-font);color:var(--am-text);animation:evp-drop .3s var(--ease) both}
@keyframes evp-drop{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}
.evp-head{position:relative;flex-shrink:0;padding:17px 46px 16px 20px;background:var(--am-grad);color:var(--am-on)}
.evp-head h3{color:var(--am-on);font-family:var(--am-font);font-weight:600;font-size:18px;line-height:1.22}
.evp-head .evp-sub{margin-top:3px;font-size:12.5px;font-weight:500;opacity:.94}
.evp-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--am-bg);color:var(--am-text);font-size:13px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.22)}
/* glyph stays 26px; expand the tap target to a 44x44 minimum */
.evp-close::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.evp-body{padding:16px 22px;overflow-y:auto;font-size:14.5px;line-height:1.46;-webkit-overflow-scrolling:touch}
@media(min-width:520px){.evp-body{padding:18px 32px}}
.evp-loader{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 0 20px}
.evp-spin{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(58,135,112,.2);
  border-top-color:var(--green);animation:evp-spin .7s linear infinite}
@keyframes evp-spin{to{transform:rotate(1turn)}}
.evp-msg{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--mute);text-align:center;letter-spacing:.01em}
.evp-skels{width:100%;display:flex;flex-direction:column;gap:10px}
.evp-skel{height:12px;border-radius:6px;background:linear-gradient(100deg,#eef1f4 30%,#f7f9fb 50%,#eef1f4 70%);
  background-size:200% 100%;animation:evp-skel 1.3s linear infinite}
.evp-skel.w70{width:70%}.evp-skel.w45{width:45%}
@keyframes evp-skel{0%{background-position:100% 50%}to{background-position:0 50%}}
.evp-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.evp-detail{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid #eef1f4}
.evp-detail:first-child{border-top:none}
.evp-detail .k{flex-shrink:0;width:52px;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#7b8798}
.evp-detail .v{flex:1;min-width:0;font-weight:600;color:var(--am-text);display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px}
.evp-note{margin-top:12px;padding:11px 13px;border-radius:8px;background:var(--tint);
  border:1px solid rgba(58,135,112,.22);font-size:13.5px;line-height:1.4;color:var(--am-text)}
.evp-note.locked{background:rgba(217,178,94,.14);border-color:rgba(217,178,94,.4)}
.evp-foot{flex-shrink:0;display:flex;flex-direction:column;gap:9px;padding:8px 22px 16px}
@media(min-width:520px){.evp-foot{padding:8px 32px 20px}}
.evp-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;
  border-radius:8px;font-weight:600;font-size:14.5px;font-family:var(--am-font);text-align:center}
.evp-btn.primary{background:var(--am-grad);color:var(--am-on);box-shadow:0 12px 26px -14px var(--am-primary-2)}
.evp-btn.ghost{background:var(--am-bg);color:var(--am-primary);border:1.5px solid var(--am-primary)}
.evp-cal{display:inline-flex;align-items:center;gap:7px;align-self:center;min-height:40px;
  color:var(--am-primary);font-weight:600;font-size:13.5px}
.evp-cal svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:768px){.evp-overlay{padding:0}.evp-dialog{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}}

/* ---------- [V4-4] progress ring (percent watched) ----------
   Small SVG ring beside a status chip. data-pct on .pring (0..100).
   Empty ring = unwatched. Fill animates from 0 when scrolled into view
   (portal.js initMotion). Track always visible on first paint. */
.pring{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.pring svg{width:26px;height:26px;transform:rotate(-90deg);overflow:visible;flex-shrink:0}
.pring .pr-track{fill:none;stroke:rgba(32,52,43,.13);stroke-width:3.4}
.pring .pr-fill{fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.pring b{font-size:11px;font-weight:900;color:var(--gold-d);line-height:1}
.pring.sm svg{width:22px;height:22px}
.pring.done .pr-fill{stroke:var(--green)}

/* ---------- [V4-5] avatar chip (leader image after a name) ----------
   <span class="avchip" data-leader="Jutta"></span> — portal.js fills it
   (lazy img from the avatar map + initial fallback). Never blocks paint. */
.avchip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  overflow:hidden;vertical-align:middle;margin-left:5px;flex-shrink:0;position:relative;
  background:var(--tint);border:1.5px solid #fff;box-shadow:0 2px 6px -2px rgba(32,52,43,.4)}
.avchip img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.avchip i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:10px;font-weight:900;color:var(--gold-d);background:var(--ggold)}
.avchip.lg{width:34px;height:34px}.avchip.lg i{font-size:14px}

/* ---------- [V4-6] premium motion primitives ----------
   .u-shimmer  gentle gold light-sweep across an element (needs overflow
               hidden; adds an ::after so keep host content above if needed)
   .u-glow     soft radiant glow pulse (box-shadow only, elevated)
   Fill-on-scroll for bars/rings is JS (initMotion). All flatten under
   the global reduced-motion rule. */
.u-shimmer{position:relative;overflow:hidden;isolation:isolate}
.u-shimmer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,247,222,.55) 50%,transparent 60%);
  transform:translateX(-120%);animation:u-shimmer 3.8s var(--ease) infinite}
@keyframes u-shimmer{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.u-glow{animation:u-glow 3.6s ease-in-out infinite}
@keyframes u-glow{0%,100%{box-shadow:0 8px 22px -14px rgba(217,178,94,.5)}
  50%{box-shadow:0 0 22px 3px rgba(240,215,154,.5),0 10px 26px -12px rgba(217,178,94,.75)}}

/* ---------- [V4-7] premium progress bar (item 20 + A1) ----------
   Flowing gold fill + soft shimmer; celebrates completion once. Fill width
   set on scroll-into-view by initMotion (0 -> data-pct). "Elevated not
   transformed" (A5): only the completion moment has a tiny scale/glow. */
.pbar-wrap{margin-top:12px}
.pbar-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.pbar-top .pl{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--forest)}
.pbar-top .pr{font-size:12px;font-weight:900;color:var(--gold-d)}
.pbar{position:relative;height:12px;border-radius:100px;background:rgba(32,52,43,.09);
  overflow:hidden;box-shadow:inset 0 1px 2px rgba(32,52,43,.09)}
.pbar-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--gold-l),var(--gold) 55%,var(--gold-d));
  background-size:220% 100%;transition:width 1.15s var(--ease);animation:pbar-flow 5s linear infinite}
@keyframes pbar-flow{0%{background-position:0 0}100%{background-position:220% 0}}
.pbar-fill::after{content:"";position:absolute;inset:0;border-radius:100px;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-120%);animation:pbar-shine 3.4s var(--ease) infinite}
@keyframes pbar-shine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(240%)}}
.pbar.teal .pbar-fill{background:linear-gradient(90deg,var(--sky2),var(--teal));background-size:220% 100%}
/* completion moment: JS adds .done + one-shot .cel + a spark */
.pbar.done .pbar-fill{background:var(--ggold);background-size:220% 100%}
.pbar.cel{animation:pbar-cel 1.3s var(--ease)}
@keyframes pbar-cel{0%{box-shadow:inset 0 1px 2px rgba(32,52,43,.09),0 0 0 0 rgba(217,178,94,0)}
  32%{box-shadow:inset 0 1px 2px rgba(32,52,43,.09),0 0 20px 4px rgba(240,215,154,.75)}
  100%{box-shadow:inset 0 1px 2px rgba(32,52,43,.09),0 0 0 0 rgba(217,178,94,0)}}
.pbar-spark{position:absolute;top:50%;right:7px;transform:translateY(-50%) scale(0);
  font-size:12px;line-height:1;color:#fff;pointer-events:none;z-index:2;
  text-shadow:0 1px 3px rgba(154,122,48,.7);animation:pbar-spark 1s var(--ease) forwards}
@keyframes pbar-spark{0%{transform:translateY(-50%) scale(0);opacity:0}
  42%{transform:translateY(-50%) scale(1.3);opacity:1}100%{transform:translateY(-50%) scale(1);opacity:0}}

/* ---------- [V4-9] colored bottom-bar icons (item 6) ----------
   Subtle green resting tint on nav icons; gold on hover; active stays gold
   (the earlier .nav a.on svg rule has higher specificity, so it wins). */
.nav a svg{stroke:#8fae9c}
.nav a:hover svg,.nav a:focus-visible svg{stroke:var(--gold-d)}

/* ============================================================
   V5 · SHARED LAYER ADDITIONS  (appended 2026-07-18)
   Jana + Nicole round. Nothing above is modified. See CANONICAL-V5.md.
   Two small, safe additions:
     [V5-J4] avatar chips retired portal-wide (safety hide)
     [V5-J7] wider popup key column so the "Aufzeichnung" row label fits
   ============================================================ */

/* ---------- [V5-J4] avatar chips retired ----------
   Leader avatar / initial circles are deleted everywhere (J4). The JS
   auto-fill is neutralized to a no-op AND Portal.avatarChip() is a no-op,
   but this rule is the belt-and-suspenders: any un-stripped .avchip span
   never paints a stray circle. Builders still remove the spans from pages. */
.avchip{display:none!important}

/* ---------- [V5-J7] popup detail key column ----------
   The V5 popup adds an "Aufzeichnung" row (J7). Its key is longer than the
   old fixed 52px column, so relax the width: short keys (Wann/Wo/mit) still
   align at a 52px min, "Aufzeichnung" grows to one line instead of wrapping. */
.evp-detail .k{width:auto;min-width:52px;max-width:124px;padding-right:8px}

/* ============================================================
   FIXROUND · horizontal-overflow guard (append-only, 2026-07-23)
   Nothing above is modified. Belt-and-suspenders reinforcement of the
   base overflow-x on html/body (L33/L34). The off-canvas account drawer
   (.panel, position:fixed, parked at transform:translateX(104%) off the
   right edge — L297) and any over-wide child must never widen the page
   or the measured document scrollWidth (screenshots + real browsers).
   overflow-x:clip clips without establishing a scroll container, so the
   sticky .topbar (L55) and position:fixed layers keep working; the
   preceding overflow-x:hidden is the fallback for engines that do not
   support clip. Declared hidden-then-clip so clip wins where supported.
   ============================================================ */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}

/* ============================================================
   FIXROUND · Complianz cookie-bar restyle (Option B · 3D/A1, 2026-07-24)
   Append-only; nothing above is modified. On portal surfaces the Complianz
   banner is KEPT (Option B — never dequeued as a suppression), but it sits
   at the viewport bottom and overlaps the fixed .nav (L285, bottom:0, with
   var(--navh) clearance). Lift it ABOVE the nav so first-visit consent still
   works and no portal content is hidden. cmplz-general enqueues AFTER
   portal.css (ENQUEUE-LIST pos 26 vs 21), so the positioning override is
   forced with !important; the cosmetics are additive portal-token styling.
   z-index 60 = above content/topbar (50) but below .nav (70) and the account
   .scrim/.panel (110/120), unless the portal's dismissible consent dialog is active.
   ============================================================ */
#cmplz-cookiebanner-container,
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  bottom:calc(var(--navh) + var(--safe-b))!important;
  z-index:60!important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  max-width:var(--col);margin-left:auto;margin-right:auto;
  background:var(--ivory);color:var(--ink);
  border:1px solid var(--hair);border-radius:16px;
  box-shadow:var(--sh-lift);
}
/* Portal-only text-resize reflow. Keep Complianz's controls and state intact;
   constrain its automatic grid/flex minimums and keep tall preferences scrollable. */
body.tss-portal-body #cmplz-cookiebanner-container .cmplz-cookiebanner{
  max-width:min(var(--col),100vw)!important;
  max-height:calc(100vh - var(--navh) - var(--safe-b) - 12px)!important;
  max-height:calc(100dvh - var(--navh) - var(--safe-b) - 12px)!important;
  overflow:auto!important;overscroll-behavior:contain;
}
body.tss-portal-body #cmplz-cookiebanner-container :where(.cmplz-header,.cmplz-title,.cmplz-body,.cmplz-message,.cmplz-buttons,.cmplz-links,.cmplz-categories,.cmplz-category-header,.cmplz-category-title,.cmplz-description,.cmplz-links ul,.cmplz-links li){
  min-width:0;max-width:100%;overflow-wrap:anywhere;
}
body.tss-portal-body #cmplz-cookiebanner-container .cmplz-body{max-height:none!important;overflow:visible!important}
body.tss-portal-body #cmplz-cookiebanner-container :where(.cmplz-message,.cmplz-message p){line-height:1.5!important}
body.tss-portal-body #cmplz-cookiebanner-container .cmplz-btn{
  min-width:0;max-width:100%;height:auto!important;min-height:45px;
  white-space:normal;overflow-wrap:anywhere;line-height:1.333333!important;
}
body.tss-portal-body #cmplz-cookiebanner-container .cmplz-links ul{flex-wrap:wrap}
body.tss-portal-body #cmplz-cookiebanner-container .cmplz-link{white-space:normal;overflow-wrap:anywhere;line-height:1.4!important}
/* A reopened consent dialog must paint above an open drawer/event/question
   dialog while their saved inert/focus state is temporarily parked. */
body.tss-portal-body.tss-consent-modal-active #cmplz-cookiebanner-container,
body.tss-portal-body.tss-consent-modal-active #cmplz-cookiebanner-container .cmplz-cookiebanner{z-index:10000000!important}
body.tss-portal-body .p-consent{align-self:flex-start;max-width:calc(100% - 48px);min-height:44px;margin:12px 24px;padding:8px 0;border:0;background:none;color:var(--mute);font:inherit;font-size:12px;line-height:1.5;text-decoration:underline;text-underline-offset:3px;white-space:normal;overflow-wrap:anywhere;cursor:pointer}

/* ============================================================
   FIXROUND · print contract (3A8/A8, 2026-07-24)
   Append-only; nothing above is modified. A sane paper/PDF view: drop the
   sticky/fixed interactive chrome so content flows, un-stick the topbar, and
   remove the bottom-nav clearance padding. Only selectors verified present in
   this file are targeted (.topbar L55, .nav L285, .panel L297, .scrim L295,
   .wanote L157, [data-welcome-card] section-home). There is no .drawer class
   — the account drawer IS .panel — so it is not targeted.
   ============================================================ */
@media print{
  .topbar,.backrow{position:static}
  .backrow::before{display:none}
  body{padding-bottom:0}
  .nav,.panel,.scrim,.wanote,[data-welcome-card]{display:none!important}
}

/* ============================================================
   FIXROUND · V6-parity additions (append-only, 2026-07-24)
   Two additive rules to match the approved V6 prototype. Nothing
   above is modified; these only ADD the missing scoped nodes.
   ============================================================ */

/* (1) abo duplicate-badge fix [HIGH] — tier-tss GOLD block.
   Both .gtag ("Moegliches Upgrade") and .goldlock (lock chip) sit in
   the markup (section-abo.php L281-282). The base-tier rule
   body.tier-tss [data-gold] .goldlock{display:inline-flex} (~L546)
   turns the lock chip ON, but .gtag had no counterpart, so BOTH pills
   showed. .goldlock is meant to REPLACE .gtag in the locked view.
   Hide .gtag in TSS view so only the lock chip shows; GOLD members
   (body.tier-gold) still see .gtag because .goldlock stays hidden. */
body.tier-tss .gtag{display:none}

/* (2) .brand-mark fallback [LOW] — the subpage topbar emits the
   <span class="brand-mark">✦</span> glyph when assets/logo.png is
   absent (templates.php). With no rule it inherited body ink + default
   size, reading as flat default text. Give it the branded gold glyph so
   the fallback looks intentional. var(--gold-d) confirmed in :root (L19). */
.brand-mark{color:var(--gold-d);font-size:24px;line-height:1}

/* QC BLK-2: the Shine check-in pill (checkin-engine, fixed bottom:18px z99998)
   covered the portal bottom nav (z70, ~67px tall) - every nav item unhittable.
   On portal pages lift the pill clear of the nav; !important beats the module's
   inline <style>. */
body.tss-portal-body .tss-ce-pill{bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important}
body.tss-portal-body .tss-ce-pill.is-min{bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important}

/* ============================================================
   FRAGE EINREICHEN · member question modal (append-only, 2026-07-31)
   Nothing above is modified. Markup: modules/tss-portal/fragen.php
   (#frqOverlay in wp_footer); behaviour: the last IIFE in portal.js.

   The CARD deliberately reuses the event-popup vocabulary verbatim
   (.evp-dialog / .evp-head / .evp-close / .evp-body / .evp-foot /
   .evp-btn.primary) so the two modals are visually one component and
   the gold band + ivory surface stay defined in exactly one place
   (the --am-* block, L505ff). Only the BACKDROP is our own class:
   .evp-overlay is display:flex unconditionally because portal.js
   injects and removes it, while this one is server-rendered and must
   start hidden, so it needs its own show/hide state.
   ============================================================ */

/* ---------- backdrop + open state ---------- */
.frq-overlay{
  position:fixed;inset:0;z-index:9999999;   /* above .nav (70), .panel (120), the cookie bar (60) */
  display:none;align-items:center;justify-content:center;
  padding:18px;background:var(--am-backdrop);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  overscroll-behavior:contain}
.frq-overlay.is-open{display:flex;animation:evp-fade .3s ease both}
/* the dialog animation is re-armed by the class swap (none -> evp-drop) */
.frq-overlay .evp-dialog{animation:none}
.frq-overlay.is-open .evp-dialog{animation:evp-drop .3s var(--ease) both}
.frq-dialog{width:min(94vw,460px);max-height:min(88vh,660px)}

/* ---------- body ---------- */
/* flex:1 so the footer button sits at the BOTTOM of the full-bleed mobile sheet
   instead of floating mid-screen; harmless on the content-sized desktop card. */
.frq-body{flex:1 1 auto;font-size:15px}
.frq-intro{margin:0 0 12px;font-size:15px;line-height:1.5;font-weight:600;color:var(--am-text)}
.frq-who{margin:0 0 16px;font-size:13px;font-weight:700;color:var(--mute)}
.frq-who b{font-weight:900;color:var(--forest)}

.frq-field{margin:0 0 14px}
.frq-label{display:block;margin:0 0 6px;font-size:13px;font-weight:900;letter-spacing:.02em;color:var(--forest)}
.frq-input{
  box-sizing:border-box;width:100%;font:inherit;font-size:15px;font-weight:600;
  color:var(--forest);background:#fff;
  border:1px solid var(--hair);border-radius:12px;padding:11px 13px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.frq-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,160,160,.16)}
/* native arrow off, brand chevron on (inline data URI, no external asset) */
.frq-select{min-height:46px;appearance:none;-webkit-appearance:none;
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%239a7a30' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}
.frq-select::-ms-expand{display:none}
.frq-ta{min-height:132px;resize:vertical;line-height:1.45}
.frq-count{margin-top:5px;text-align:right;font-size:12px;font-weight:700;color:var(--mute)}
.frq-err{margin:2px 0 0;padding:10px 12px;border-radius:10px;
  background:rgba(217,178,94,.16);border:1px solid rgba(217,178,94,.45);
  font-size:13.5px;line-height:1.4;font-weight:700;color:var(--gold-d)}
.frq-err[hidden]{display:none}

/* ---------- footer button ---------- */
.frq-send[disabled]{opacity:.62;cursor:default;box-shadow:none}

/* ---------- thank-you state ---------- */
.frq-done{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 6px 18px;text-align:center}
.frq-done-star{font-size:24px;color:var(--gold)}
.frq-done-t{margin:0;font-family:var(--serif);font-style:italic;
  font-size:19px;line-height:1.3;color:var(--gold-d)}

/* ---------- mobile-first: full-bleed sheet on phones (matches .evp-*) ---------- */
@media(max-width:768px){
  .frq-overlay{padding:0}
  .frq-dialog{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  .frq-body{padding-bottom:calc(16px + var(--safe-b))}
  .frq-foot{padding-bottom:calc(16px + var(--safe-b))}
}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  .frq-overlay.is-open,
  .frq-overlay.is-open .evp-dialog{animation:none}
  .frq-input{transition:none}
}

/* ---------- print: never paper the modal ---------- */
@media print{ .frq-overlay{display:none!important} }

/* ============================================================
   ROX2 FL-D · page-guard card links (append-only, 2026-09-09)
   Nothing above is modified. The guard cards (modules/page-guard/guard.php,
   .tsa-guard-msg) carry the ONLY login / upgrade CTA a locked-out member
   ever sees - "melde dich bitte an", "Klicke hier", "The Shining
   Spirits-Abo", "Mehr über GOLD erfahren". The base rule
   a{color:inherit;text-decoration:none} (L53) reaches straight into them,
   so every one of those anchors rendered as plain body text and the card
   read as a dead end. Same treatment the .note links already carry: teal,
   underlined, 700, with a visible focus ring.
   A guard card served OUTSIDE the portal shell gets no portal.css at all -
   guard.php emits its own equivalent <style> next to the card markup for
   that case, so the two must stay in step.
   ============================================================ */
.tsa-guard-msg a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(26,160,160,.5)}
.tsa-guard-msg a:hover{color:var(--forest)}
.tsa-guard-msg a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* ============================================================
   ROX2 FL-F + FL-AG · Shine check-in submit button (append-only, 2026-09-09)
   Nothing above is modified. The check-in form is embedded through the
   sanctioned [tss_feedback_form] shortcode into the portal's own .ci-embed
   wrapper (sections/section-check-ins.php, templates/ei-week.php). The
   checkin-engine's gold override is scoped to .tss-ce-form - its own gate
   card / reminder modal - and never reaches that wrapper, so the submit
   button shipped in Fluent Forms' default blue (#1A7EFB): the single
   off-brand element in the whole portal. Same declarations as .btn.gold
   (L211), reached through the Fluent Forms class names.
   !important, deliberately: Fluent Forms emits a per-form <style> in the
   BODY (after portal.css in both cascade order and specificity), and the
   engine already uses the same lever for the same button in .tss-ce-form.
   Scoped to body.tss-portal-body so it can only ever touch portal
   surfaces - Fluent Forms buttons elsewhere on the-spirits.com are
   untouched.
   FL-AG: the button had no focus ring at all, and when tabbed to it sat
   61px UNDER the fixed bottom nav. scroll-padding-bottom on the scroll
   container (plus scroll-margin-bottom on the button itself, for engines
   that only honour the latter on focus scrolls) lands it above the nav.
   ============================================================ */
/* Text-only resizing may grow either fixed/sticky bar. JS measures their
   rendered heights; the existing clearance remains the no-JS minimum. */
html{scroll-padding-top:var(--portal-scroll-top,0px);scroll-padding-bottom:calc(var(--navh) + var(--safe-b) + 24px)}
.tss-portal-body .filterbar{top:calc(var(--tb-off,0px) + var(--tb-h,63px) + var(--back-h,52px))}
body.tss-portal-body .ff-btn-submit,
body.tss-portal-body button.ff-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere;text-align:center;
  min-height:48px;padding:0 22px;
  font-family:var(--sans);font-weight:800!important;font-size:15.5px;line-height:1.2;
  text-shadow:none!important;
  border:none!important;border-radius:100px!important;
  background:var(--ggold)!important;color:#3f3110!important;
  box-shadow:0 12px 26px -12px rgba(217,178,94,.85)!important;
  scroll-margin-bottom:calc(var(--navh) + var(--safe-b) + 24px);
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
body.tss-portal-body .ff-btn-submit:hover,
body.tss-portal-body button.ff-btn:hover{transform:translateY(-2px);background:var(--ggold)!important;color:#3f3110!important}
body.tss-portal-body .ff-btn-submit:focus-visible,
body.tss-portal-body button.ff-btn:focus-visible{outline:3px solid var(--gold-d)!important;outline-offset:3px}

/* ============================================================
   ROX2 FL-Z · narrow-screen overlaps (append-only, 2026-09-09)
   Nothing above is modified. Two of the three FL-Z items live here; the
   check-in history badge is scoped inside section-check-ins.php.
   ============================================================ */

/* (1) row header: lock chip + count badge vs the title.
   The Materialien category headers (.acc-h) and the Onboarding / Masterclass
   video rows (.vexp-h) put the title in a flex:1;min-width:0 slot and the
   "Nur mit GOLD" chip next to it at white-space:nowrap. At 390px that chip
   (~112px) plus the count badge left the title about 86px, and .acc-h h4 had
   no wrap rule at all, so the text ran straight under the chip.
   Two fixes, both minimal: the heading may now break anywhere (.vexp-h b
   already could, L454), and below 480px the chip drops to its padlock only.
   font-size:0 rather than display:none on the label deliberately - the text
   node stays in the accessibility tree, so the chip keeps announcing
   "Nur mit GOLD" to a screen reader while taking icon-only space. */
.acc-h h4{overflow-wrap:anywhere}
@media(max-width:479px){
  .acc-h .goldlock,.vexp-h .goldlock{font-size:0;gap:0;letter-spacing:0;padding:3px 8px}
  .acc-h .goldlock svg,.vexp-h .goldlock svg{width:12px;height:12px}
}

/* (2) embedded Amelia calendar month header (Termine · #calview).
   Amelia sizes .am-ecs__header-text from its own grid, which lands at 87px on
   a 390px phone, and the label broke mid-word: "Septemb / er, 2026". Let it
   claim the width its content needs and forbid the break; a smaller face on
   the narrowest screens keeps that width honest. Scoped to the calendar
   container, so no other Amelia surface on the site is touched. */
#calview .am-ecs__header-text{min-width:max-content;white-space:nowrap;word-break:normal;overflow-wrap:normal}
@media(max-width:479px){#calview .am-ecs__header-text{font-size:14px}}

/* (3) FL-Z2 · the same header, phone width. The min-width:max-content above is what
   the month label needs to stay on one line, but it also makes the flex row
   .am-ecs__header-inner unshrinkable: Amelia's nav group (Heute + both arrows,
   207.5px of min-content) plus that label (153.5px) is 361px of content inside a
   294px header on a 390px phone, so "September, 2026" ran to x=409 - 19px past the
   screen edge - and only an ancestor's overflow:hidden kept the page itself from
   scrolling. Below 480px the row wraps instead: the label takes a full centred line
   of its own above the nav buttons, so month AND year stay readable and the header
   measures scrollWidth 294 in a 294px box. overflow:hidden on the header is
   belt-and-braces for a label longer than "September". Scoped to #calview, so no
   other Amelia surface on the site is touched. */
@media(max-width:479px){
  #calview .am-ecs__header{overflow:hidden}
  #calview .am-ecs__header-inner{flex-wrap:wrap;row-gap:6px;max-width:100%}
  #calview .am-ecs__header-text{order:-1;width:100%;min-width:0;text-align:center}
  #calview .am-ecs__header-actions{flex-wrap:wrap;max-width:100%}
}

/* ============================================================
   2026-09-23 (phase 3): guided tour ("Rundgang"), its one-time offer card and the
   new-joiner welcome popup. Engine ported from the V6 prototype [V4-8]; state is
   server-side (tour.php), never localStorage.
   ============================================================ */
.tour{position:fixed;inset:0;z-index:520;pointer-events:auto}
.tour-ring{position:absolute;border-radius:16px;pointer-events:none;box-shadow:0 0 0 9999px rgba(32,52,43,.42);border:2px solid var(--gold);transition:top .3s var(--ease),left .3s var(--ease),width .3s var(--ease),height .3s var(--ease)}
.tour-pulse{position:absolute;border-radius:20px;pointer-events:none;border:2px solid rgba(217,178,94,.7);animation:tourPulse 1.8s ease-out infinite}
@keyframes tourPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.12);opacity:0}}
.tour-bubble{position:absolute;width:min(88vw,320px);background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:16px 16px 14px;box-shadow:0 22px 50px -18px rgba(32,52,43,.45)}
.tour-bubble.center{left:50%;top:50%;transform:translate(-50%,-50%)}
.tour-step{font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.tour-bubble h4{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--forest);margin-top:3px}
.tour-bubble p{margin-top:6px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.36}
.tour-nav{display:flex;align-items:center;gap:8px;margin-top:13px;flex-wrap:wrap}
.tour-dots{display:flex;gap:5px;margin-right:auto}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--hair)}
.tour-dots i.on{background:var(--gold)}
.tour-skip,.tour-back,.tour-next{border:0;background:none;font:inherit;cursor:pointer;min-height:40px}
.tour-skip{padding:0 10px;font-size:13px;font-weight:800;color:var(--mute)}
.tour-back{padding:0 10px;font-size:13px;font-weight:800;color:var(--gold-d)}
.tour-next{padding:0 16px;border-radius:100px;font-size:13.5px;font-weight:800;background:var(--ggold);color:#3f3110}
.tour-next:focus-visible,.tour-skip:focus-visible,.tour-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tour-pulse{animation:none}.tour-ring{transition:none}}
/* offer card: sits above the bottom nav, one line on desktop, stacked on phones */
.tour-offer{position:fixed;left:12px;right:12px;bottom:calc(var(--navh,67px) + env(safe-area-inset-bottom,0px) + 10px);z-index:100;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--card);border:1px solid rgba(217,178,94,.45);box-shadow:0 18px 40px -16px rgba(32,52,43,.4)}
.tour-offer[hidden]{display:none}
.tour-offer .to-star{color:var(--gold);font-size:18px;flex-shrink:0}
.tour-offer .to-t{flex:1;min-width:0;font-size:13.5px;line-height:1.3}
.tour-offer .to-t b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;color:var(--forest)}
.tour-offer .to-t span{color:var(--mute);font-weight:600}
.tour-offer .to-b{display:flex;gap:6px;flex-shrink:0}
.tour-offer .to-start{border:0;font:inherit;cursor:pointer;min-height:38px;padding:0 14px;border-radius:100px;font-size:13px;font-weight:800;background:var(--ggold);color:#3f3110}
.tour-offer .to-no{border:0;background:none;font:inherit;cursor:pointer;min-height:38px;padding:0 8px;font-size:13px;font-weight:800;color:var(--mute)}
@media(min-width:720px){.tour-offer{left:50%;right:auto;transform:translateX(-50%);width:min(92vw,620px)}}
@media(max-width:480px){.tour-offer{flex-wrap:wrap}.tour-offer .to-b{width:100%;justify-content:flex-end}}
/* welcome popup (new joiners) */
.intro-ov{position:fixed;inset:0;z-index:510;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(32,52,43,.55);backdrop-filter:blur(3px)}
.intro-ov[hidden]{display:none}
.intro-box{position:relative;width:min(94vw,520px);max-height:calc(100vh - 32px);overflow:auto;background:var(--card);border-radius:22px;padding:22px 20px 18px;box-shadow:0 30px 70px -20px rgba(32,52,43,.6)}
.intro-x{position:absolute;top:10px;right:12px;border:0;background:none;font:inherit;font-size:26px;line-height:1;color:var(--mute);cursor:pointer;width:40px;height:40px}
.intro-kick{font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.intro-box h3{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--forest);margin-top:4px}
.intro-box p{margin-top:8px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.intro-frame{position:relative;margin-top:14px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.intro-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.intro-b{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.intro-b .btn{background:var(--ggold);color:#3f3110}
.intro-later{border:0;background:none;font:inherit;cursor:pointer;min-height:44px;padding:0 10px;font-size:14px;font-weight:800;color:var(--mute)}