/* ============================================================
   atem.liebe.kraft — App-Styles (SPA)
   Brand-Tokens identisch zum Content-Portal (Grün-Glas-Ästhetik)
   ============================================================ */

:root{
  --green-deep:#2f4a2c; --green:#4a6741; --sage:#8a9e76; --sage-light:#b9c9a6;
  --cream:#f5f2e9; --ink:#22301c; --muted:#5d6b52;
  --shadow:0 14px 40px rgba(28,40,24,.16); --radius:18px;
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.65);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif; color:var(--ink);
  background:linear-gradient(170deg,#eef1e6 0%,#dfe7d3 100%);
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------- Top-Bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; position:sticky; top:0; z-index:20;
  background:rgba(245,242,233,.72); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(47,74,44,.08);
}
.wordmark{
  font-family:'Dancing Script',cursive; font-size:32px; font-weight:700;
  color:var(--green-deep); text-decoration:none; line-height:1;
  display:inline-flex; align-items:center; gap:10px;
}
.wordmark .logo-img{
  width:44px; height:44px; border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 2px 8px rgba(47,74,44,.22);
}
.topbar-right{display:flex; align-items:center; gap:14px; font-size:14px}
.topbar-right .who{color:var(--muted); font-weight:500}
.topbar-right .who b{color:var(--ink); font-weight:600}

/* ---------- Layout ---------- */
main{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:34px 22px 60px}
.loading{text-align:center; color:var(--muted); padding:70px 0; font-weight:300}

.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.kicker{font-family:'Dancing Script',cursive; font-size:36px; color:var(--green); line-height:1}
.page-title{font-size:28px; font-weight:700; color:var(--green-deep); margin-top:2px; line-height:1.15}
.page-sub{color:var(--muted); font-size:15px; font-weight:300; margin-top:8px; line-height:1.6}

/* ---------- Glas-Karten ---------- */
.glass{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:28px;
}
.auth-wrap{max-width:430px; margin:26px auto 0}
.auth-wrap .glass{padding:32px 30px}

/* ---------- Formulare ---------- */
form .field{margin-bottom:16px}
label{display:block; font-size:13px; font-weight:600; color:var(--green-deep);
  letter-spacing:.4px; margin-bottom:6px}
input[type=text],input[type=email],input[type=password]{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.75); border:1px solid #d5ddc6;
  border-radius:12px; padding:11px 14px; outline:none; transition:.18s;
}
input:focus{border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,158,118,.28)}
input::placeholder{color:#9aa78d}
.hint{font-size:12.5px; color:var(--muted); font-weight:300; margin-top:5px; line-height:1.5}
.form-msg{font-size:14px; line-height:1.5; margin:2px 0 14px; padding:10px 13px;
  border-radius:10px; display:none}
.form-msg.err{display:block; background:#f4e3de; color:#7a3327}
.form-msg.ok{display:block; background:#e4ecd8; color:var(--green-deep)}
.consent{font-size:12.5px; color:var(--muted); font-weight:300; line-height:1.55; margin:14px 0 4px}
.consent a{color:var(--green); font-weight:500}
.form-alt{text-align:center; font-size:13.5px; color:var(--muted); margin-top:18px}
.form-alt a{color:var(--green); font-weight:500}

/* ---------- Buttons ---------- */
.btn{
  font-family:inherit; font-size:14.5px; font-weight:500; cursor:pointer;
  border-radius:26px; padding:12px 22px; transition:.18s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; border:none;
}
.btn-pri{background:var(--green-deep); color:var(--cream)}
.btn-pri:hover{background:var(--green)}
.btn-sec{background:transparent; color:var(--green-deep); border:1.5px solid var(--green)}
.btn-sec:hover{background:rgba(74,103,65,.1)}
.btn-block{width:100%}
.btn:disabled{opacity:.55; cursor:default}
.back{display:inline-flex; align-items:center; gap:8px; background:none; border:none;
  color:var(--green); font-family:inherit; font-size:15px; font-weight:500;
  cursor:pointer; margin-bottom:18px; padding:6px 0; text-decoration:none}
.back:hover{text-decoration:underline}

/* ---------- Library-Grid ---------- */
.lib-head{margin-bottom:24px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px}
.lib-card{
  position:relative; border-radius:var(--radius); cursor:pointer; text-align:center;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow); padding:30px 20px 24px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.lib-card:hover{transform:translateY(-6px); box-shadow:0 22px 54px rgba(28,40,24,.26)}
.lib-card .cover{font-size:52px; line-height:1; margin-bottom:14px; display:block}
.lib-card .ttl{font-size:17px; font-weight:600; color:var(--green-deep); line-height:1.3}
.lib-card .sub{font-size:13px; color:var(--muted); font-weight:300; margin-top:5px; min-height:1.2em}
.lib-card .dur{font-size:12.5px; color:var(--muted); margin-top:10px; font-weight:500}
.tier-badge{
  position:absolute; top:14px; left:14px; font-size:10.5px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; padding:5px 11px; border-radius:20px;
  background:rgba(244,241,231,.92); color:var(--green-deep);
}
.tier-badge.paid{background:var(--green-deep); color:var(--cream)}
/* Offener Gratis-Teaser (B45): einladendes Sage statt Bezahl-Dunkelgrün, damit
   „Tag 1 gratis" nicht wie ein Preisschild aussieht. */
.tier-badge.paid.teaser{background:var(--green); color:var(--cream)}
.lock{position:absolute; top:12px; right:14px; font-size:18px}
.lib-card.locked{opacity:.82}
.lib-card.locked .ttl{color:var(--muted)}

/* ---------- Player ---------- */
.player{max-width:560px; margin:0 auto; text-align:center}
.play-ring{
  width:190px; height:190px; margin:26px auto 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:radial-gradient(circle at 32% 28%, #ffffffcc, #cdd7bd);
  border:6px solid rgba(138,158,118,.5); box-shadow:var(--shadow);
  font-size:64px; color:var(--green-deep); user-select:none;
  transition:transform .2s ease, border-color .3s ease;
}
.play-ring:hover{transform:scale(1.04)}
.play-ring.playing{border-color:var(--green); animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(138,158,118,.35)}50%{box-shadow:0 0 0 26px rgba(138,158,118,0)}}
.player .descr{font-size:15px; line-height:1.65; font-weight:300; color:var(--ink);
  margin-top:18px; text-align:left; white-space:pre-wrap}
/* Player-Audio: kein natives Steuer-Element mehr (Doppelbedienung raus) — der
   Atem-Ring + eigener Fortschrittsbalken steuern. Video behaelt native controls. */
.player audio{display:none}
/* Immersive Buehne: sanft zoomender botanischer Full-Bleed-Grund hinter dem Ring. */
.play-stage{position:relative; margin:24px auto 4px; width:min(340px,86%);
  aspect-ratio:1/1; border-radius:50%; overflow:hidden; display:flex;
  align-items:center; justify-content:center}
.play-stage::before{content:''; position:absolute; inset:-8%;
  background:url(../img/section-botanical-1600.jpg) center/cover no-repeat;
  animation:playzoom 22s ease-in-out infinite alternate; z-index:0}
.play-stage::after{content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 46%, rgba(245,242,233,.42) 0 34%,
    rgba(47,74,44,.34) 62%, rgba(47,74,44,.62) 100%); z-index:1}
@keyframes playzoom{from{transform:scale(1)}to{transform:scale(1.12)}}
/* Tageszeit-Skin (Breathwrk-Muster): morgens waermer/heller, abends tiefer/
   gedaempft. Nur der Scrim-Ton aendert sich, das Bild bleibt (leichtgewichtig). */
.play-stage--morgen::after{background:radial-gradient(circle at 50% 44%,
  rgba(245,242,233,.50) 0 34%, rgba(138,158,118,.30) 62%, rgba(47,74,44,.52) 100%)}
.play-stage--abend::after{background:radial-gradient(circle at 50% 46%,
  rgba(245,242,233,.34) 0 32%, rgba(30,48,28,.48) 60%, rgba(30,48,28,.74) 100%)}
.play-stage .play-ring{position:relative; z-index:2; margin:0}
/* Eigene Steuerleiste: Skip -15 · Fortschrittsbalken · Skip +15 */
.play-controls{display:flex; align-items:center; gap:12px; max-width:420px;
  margin:8px auto 6px}
.play-bar{position:relative; flex:1; height:8px; border-radius:20px; cursor:pointer;
  background:rgba(138,158,118,.28)}
.play-fill{position:absolute; left:0; top:0; height:100%; width:0; border-radius:20px;
  background:linear-gradient(90deg,var(--sage),var(--green)); transition:width .15s linear}
.play-bar:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.skip{flex:none; display:inline-flex; align-items:center; gap:3px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--green-deep);
  background:#ffffffcc; border:1.5px solid rgba(138,158,118,.5); border-radius:22px;
  padding:7px 12px; transition:background .2s ease, transform .15s ease}
.skip:hover{background:#fff; transform:translateY(-1px)}
.skip .skip-ic{font-size:16px; line-height:1}
.play-time{letter-spacing:.02em}

/* ---------- Upgrade (Einladung statt SaaS-Grid) ---------- */
.up-view{max-width:680px; margin:0 auto}
.up-head{text-align:center}
.up-band{margin-top:26px; padding:30px 24px; border-radius:24px;
  background-image:linear-gradient(180deg,rgba(245,242,233,.82),rgba(233,238,222,.9)),url(../img/texture-paper-1400.jpg);
  background-size:auto,520px; background-repeat:no-repeat,repeat}
.up-kicker{font-family:'Dancing Script',cursive; font-size:26px; color:var(--sage); line-height:1; margin-bottom:2px}
.up-invite{position:relative; padding:34px 30px 30px; border-radius:20px; text-align:center;
  background:linear-gradient(160deg,var(--green-deep),var(--green));
  border:2px solid var(--green-deep); box-shadow:0 18px 48px rgba(47,74,44,.34)}
.up-invite .up-kicker{color:var(--sage-light)}
.up-anchor-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--cream); color:var(--green-deep); font-size:11.5px; font-weight:600;
  letter-spacing:.8px; padding:5px 14px; border-radius:20px; white-space:nowrap}
.up-h{font-size:24px; font-weight:700; color:var(--cream); margin-top:4px; line-height:1.15}
.up-price{margin:12px 0 4px; display:flex; align-items:baseline; justify-content:center; gap:8px}
.up-amount{font-size:44px; font-weight:700; color:var(--cream); line-height:1}
.up-per{font-size:15px; color:rgba(245,242,233,.92)}
.up-anchor{font-size:14.5px; color:rgba(245,242,233,.92); font-weight:300; line-height:1.6;
  margin:0 auto 4px; max-width:360px}
.up-anchor b{color:var(--cream); font-weight:600}
.up-list{list-style:none; margin:18px auto 22px; max-width:320px; text-align:left;
  font-size:14.5px; line-height:1.5}
.up-list li{padding:7px 0 7px 28px; position:relative; color:rgba(245,242,233,.94); font-weight:300}
.up-list li::before{content:'✓'; position:absolute; left:2px; top:7px; color:var(--sage-light); font-weight:600}
.up-invite .btn-pri{background:var(--cream); color:var(--green-deep)}
.up-invite .btn-pri:hover{background:#fff}
.up-alt{display:block; margin-top:14px; font-size:13.5px; color:rgba(245,242,233,.92);
  text-decoration:underline; text-underline-offset:3px}
.up-alt:hover{color:var(--cream)}
.up-invite-owned .up-h{color:var(--cream)}
.up-invite-owned .up-p{color:rgba(245,242,233,.9)}
.up-master{margin-top:22px; padding:22px 24px; border-radius:18px;
  background:rgba(255,255,255,.72); border:1.5px solid rgba(138,158,118,.5);
  display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.up-master-txt{flex:1; min-width:220px; text-align:left}
.up-master-h{font-size:18px; font-weight:600; color:var(--green-deep); margin-top:2px}
.up-p{font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.6; margin-top:6px}
.up-master-cta{flex:none; width:220px; text-align:center}
.up-note-sm{font-size:12.5px; color:var(--muted); font-weight:300; line-height:1.5; margin-top:8px}
@media(max-width:560px){.up-master-cta{width:100%}}
.upgrade-note{margin-top:22px; font-size:13.5px; color:var(--muted); font-weight:300;
  line-height:1.6; text-align:center}

/* ---------- Account ---------- */
.account-rows{margin:18px 0 24px}
.account-rows .row{display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid rgba(47,74,44,.1); font-size:14.5px}
.account-rows .row:last-child{border-bottom:none}
.account-rows .k{color:var(--muted); font-weight:500}
.account-rows .v{font-weight:600; color:var(--green-deep); text-align:right}

/* ---------- Admin ---------- */
.stats-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:22px 0 30px}
.stat{text-align:center; padding:20px 12px}
.stat .num{font-size:30px; font-weight:700; color:var(--green-deep); line-height:1.1}
.stat .lbl{font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-top:6px}
.admin-section{margin-bottom:32px}
.admin-section h3{font-size:14px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:12px}
.table-wrap{overflow-x:auto; border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px}
thead th{text-align:left; font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:2px solid rgba(47,74,44,.14)}
tbody td{padding:10px 12px; border-bottom:1px solid rgba(47,74,44,.08); vertical-align:middle}
tbody tr:hover{background:rgba(255,255,255,.4)}
td select{font-family:inherit; font-size:13px; color:var(--ink);
  background:rgba(255,255,255,.8); border:1px solid #d5ddc6; border-radius:8px;
  padding:5px 8px; cursor:pointer; outline:none}
td select:focus{border-color:var(--sage); box-shadow:0 0 0 2px rgba(138,158,118,.25)}
td input[type=checkbox]{width:16px; height:16px; accent-color:var(--green); cursor:pointer}
.reset-links li{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  list-style:none; padding:9px 0; border-bottom:1px solid rgba(47,74,44,.08); font-size:13px}
.reset-links code{background:rgba(255,255,255,.6); padding:3px 8px; border-radius:8px;
  font-size:12px; word-break:break-all}
.btn-mini{font-size:12px; padding:6px 13px; border-radius:18px}
.empty{color:var(--muted); font-weight:300; font-size:14px; padding:14px 0}

/* ---------- Toast ---------- */
#toast-root{position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:100; display:flex; flex-direction:column; gap:10px; align-items:center}
.toast{
  background:var(--green-deep); color:var(--cream); font-size:14px; font-weight:500;
  padding:12px 22px; border-radius:26px; box-shadow:var(--shadow);
  animation:toast-in .25s ease; max-width:90vw;
}
.toast.err{background:#7a3327}
@keyframes toast-in{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.toast.out{opacity:0; transition:opacity .4s ease}

/* ---------- Footer ---------- */
.app-foot{text-align:center; padding:26px 22px 34px; font-size:12.5px; color:var(--muted)}
.app-foot .disclaimer{max-width:620px; margin:0 auto 10px; font-weight:300; line-height:1.6}
.app-foot .foot-links a{color:var(--green); text-decoration:none; font-weight:500}
.app-foot .foot-links a:hover{text-decoration:underline}

/* ---------- Responsive ---------- */
@media(max-width:560px){
  .topbar{padding:12px 16px}
  .wordmark{font-size:26px}
  .wordmark .logo-img{width:36px; height:36px}
  /* Gruss mobil ausblenden — bricht sonst mehrzeilig und kollidiert mit dem Logo */
  .topbar-right .who{display:none}
  main{padding:24px 16px 50px}
  .play-ring{width:150px; height:150px; font-size:50px}
}

/* ---------- Social (Instagram-Admin) ---------- */
.soc-thumb{width:46px;height:57px;object-fit:cover;border-radius:8px;display:block;background:#cdd7bd}
.soc-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.soc-actions{white-space:nowrap}
.soc-actions .dt{padding:6px 8px;border:1px solid #d5dcc7;border-radius:8px;font-family:inherit;font-size:13px;margin-right:4px}
.soc-table td{vertical-align:middle}
.st-badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:14px;background:#e6ecdb;color:var(--green-deep)}
.st-approved{background:#dcebc8}
.st-scheduled{background:#d7e4f0;color:#2c4a66}
.st-published{background:#2f4a2c;color:#f5f2e9}
.st-rejected{background:#f0dcd7;color:#7a3b2e}
.st-approval_pending{background:#f2ecd4;color:#6b5b1e}
.soc-settings{display:grid;grid-template-columns:2fr 1fr auto auto;gap:14px;align-items:end;margin-bottom:14px}
@media(max-width:820px){.soc-settings{grid-template-columns:1fr}}
.soc-inline{display:flex;align-items:center;gap:8px;font-weight:400;padding:10px 0}
.soc-guide{margin:10px 0 4px 20px;font-size:14px;line-height:1.7;color:var(--ink)}
.soc-guide code{background:#eef2e6;padding:1px 6px;border-radius:6px;font-size:12.5px}
.soc-activity{list-style:none;margin:0;padding:6px 4px}
.soc-activity li{padding:8px 6px;border-bottom:1px solid #e7eadf;font-size:14px}
.soc-activity li:last-child{border-bottom:none}

/* ---------- Monatskalender (Social-Tab) ----------
   Gitter Mo bis So auf dem Desktop. Unter 400px kippt dasselbe Markup in eine
   Liste, weil sieben Spalten auf einem Handy nicht mehr lesbar sind. */
.cal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cal-title{font-size:19px;font-weight:600;color:var(--green-deep);min-width:170px;text-align:center;flex:1}
.cal-wrap{padding:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dow{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  font-weight:600;text-align:center;padding:2px 0 6px}
.cal-cell{min-height:104px;border-radius:12px;padding:6px 6px 8px;
  background:rgba(255,255,255,.5);border:1px solid rgba(47,74,44,.09);
  display:flex;flex-direction:column;gap:4px;overflow:hidden}
.cal-cell.is-out{background:rgba(255,255,255,.16);border-style:dashed;opacity:.5}
.cal-cell.is-today{border-color:var(--green);box-shadow:0 0 0 2px rgba(74,103,65,.22)}
/* Leere Tage bleiben sichtbar als Lücke, nicht als weisses Nichts. */
.cal-cell.is-empty{background:repeating-linear-gradient(135deg,
  rgba(255,255,255,.42) 0 8px, rgba(255,255,255,.18) 8px 16px)}
.cal-daynum{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.2}
.cal-cell.is-today .cal-daynum{color:var(--green-deep)}
.cal-dayname{display:none}
.cal-outmon{display:none}
.cal-cell.is-out .cal-outmon{display:inline}
.cal-evs{display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-frei{font-size:11.5px;color:var(--muted);opacity:.6;font-style:italic;padding:2px 2px}
.cal-ev{display:flex;align-items:center;gap:5px;width:100%;min-width:0;text-align:left;
  font-family:inherit;font-size:11.5px;line-height:1.25;cursor:pointer;
  padding:4px 6px;border-radius:8px;border:1px solid transparent;
  background:#e6ecdb;color:var(--green-deep);transition:transform .12s ease,box-shadow .12s ease}
.cal-ev:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(28,40,24,.18)}
.cal-ev:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.cal-ev-z{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-ev-f{flex:none;width:15px;height:15px;border-radius:4px;display:inline-flex;
  align-items:center;justify-content:center;font-size:9.5px;font-weight:700;
  background:rgba(47,74,44,.16);color:inherit}
.cal-ev-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
/* Status-Farben, gleiche Logik wie die Badges in der Warteschlange. */
.cal-st-wait{background:#f2ecd4;color:#6b5b1e}
.cal-st-ok{background:#dcebc8;color:#33501f}
.cal-st-pub{background:#2f4a2c;color:#f5f2e9}
.cal-st-pub .cal-ev-f{background:rgba(245,242,233,.22)}
.cal-st-err{background:#f0dcd7;color:#7a3b2e}
.cal-st-story{background:#e2e8f2;color:#33465e}
.cal-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:12px}
.cal-legend .cal-key{padding:3px 10px;border-radius:12px;font-weight:600}
.cal-sum{color:var(--muted);margin-right:6px}
.cal-fmtkey{color:var(--muted)}
/* Story-Vorschau: 9:16-Rahmen, damit die Länge des Textes sofort sichtbar ist. */
.story-prev-box{max-width:520px}
.story-prev-frame{margin:16px auto 0;width:236px;aspect-ratio:9/16;border-radius:18px;
  background:linear-gradient(165deg,#3c5636 0%,#1c2818 100%);
  display:flex;align-items:center;justify-content:center;padding:22px;
  box-shadow:0 10px 30px rgba(28,40,24,.3)}
.story-prev-text{color:#f2f4e9;font-size:16px;line-height:1.5;font-weight:300;text-align:center}

/* Schmales Gitter (401px bis 760px): der Titel hat keinen Platz mehr, Uhrzeit
   und Format-Symbol müssen aber beide sichtbar bleiben. Sie passen nicht mehr
   nebeneinander in eine Spalte, darum bricht der Chip um. Das Symbol steht
   dabei oben, weil es auch allein noch etwas aussagt. */
@media(max-width:760px){
  .cal-cell{min-height:86px;padding:5px 4px 6px}
  .cal-grid{gap:4px}
  .cal-ev-t{display:none}
  .cal-ev{flex-wrap:wrap;gap:2px 4px;padding:3px 5px;font-size:10.5px;justify-content:center}
  .cal-ev-f{order:-1;width:14px;height:14px;font-size:9px}
  .cal-title{min-width:120px;font-size:17px}
}
/* Unter 400px: Liste statt Gitter. Fremde Monatstage fallen ganz weg. */
@media(max-width:400px){
  .cal-wrap{padding:10px}
  .cal-grid{grid-template-columns:1fr;gap:5px}
  .cal-dow{display:none}
  .cal-cell{min-height:0;flex-direction:row;align-items:flex-start;gap:10px;padding:8px 10px}
  .cal-cell.is-out{display:none}
  .cal-daynum{flex:none;width:96px;font-size:12px;padding-top:4px}
  .cal-dayname{display:inline}
  .cal-evs{flex:1;min-width:0}
  /* In der Liste ist Platz nach unten: Titel umbrechen statt abschneiden. */
  .cal-ev{font-size:12.5px;align-items:flex-start}
  .cal-ev-z{padding-top:1px}
  .cal-ev-t{display:inline;white-space:normal;overflow:visible;text-overflow:clip}
  .cal-title{flex:1 0 100%;order:-1;min-width:0}
}

/* ---------- Library-Sektionen ---------- */
.lib-section{margin-bottom:40px}
.sec-title{font-size:14px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:14px}
.sec-title .sec-link{color:var(--green-deep); text-decoration:none}
.sec-title .sec-link:hover{color:var(--green); text-decoration:underline}
.sec-title .sec-arrow{font-weight:400}
.sec-sub{font-size:13.5px; color:var(--muted); font-weight:300; line-height:1.55;
  margin:-6px 0 14px}
.kind-badge{position:absolute; top:12px; right:14px; font-size:16px; line-height:1}
.lib-card.locked .kind-badge{right:44px}

/* ---------- Journey-Karten (Grid + Teaser) ---------- */
.journey-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.journey-card{
  position:relative; display:block; text-align:center; text-decoration:none;
  padding:30px 20px 24px; cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
}
.journey-card:hover{transform:translateY(-6px); box-shadow:0 22px 54px rgba(28,40,24,.26)}
.journey-card .cover{font-size:52px; line-height:1; margin-bottom:14px; display:block}
.journey-card .ttl{font-size:17px; font-weight:600; color:var(--green-deep); line-height:1.3}
.journey-card .sub{font-size:13px; color:var(--muted); font-weight:300; margin-top:5px; min-height:1.2em}
.journey-card .j-meta{font-size:12.5px; color:var(--muted); margin-top:10px; font-weight:500}
.journey-card .j-meta b{color:var(--green-deep)}

/* ---------- Journey-Detail ---------- */
.journey-detail .j-descr{font-size:15px; line-height:1.65; font-weight:300;
  color:var(--ink); margin-top:12px; max-width:640px; white-space:pre-wrap}
.upgrade-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:18px 22px; margin-bottom:24px;
  font-size:14.5px; line-height:1.55; color:var(--ink);
}
.upgrade-banner b{color:var(--green-deep)}
.upgrade-banner span{color:var(--muted); font-weight:300}

/* Tages-Leiste (Pills 1..N) */
.day-pills{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 14px;
  margin-bottom:20px; scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.day-pill{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:52px; padding:8px 10px; border-radius:16px; cursor:pointer;
  font-family:inherit; background:var(--glass); border:1px solid var(--glass-border);
  box-shadow:0 6px 18px rgba(28,40,24,.10); transition:transform .18s ease;
}
.day-pill:hover{transform:translateY(-2px)}
.day-pill .no{font-size:14px; font-weight:600; color:var(--green-deep); line-height:1.1}
.day-pill .ic{font-size:12px; line-height:1; color:var(--muted)}
.day-pill.done{background:#dcebc8; border-color:rgba(74,103,65,.35)}
.day-pill.done .ic{color:var(--green-deep)}
.day-pill.available{background:var(--green-deep); border-color:var(--green-deep)}
.day-pill.available .no,.day-pill.available .ic{color:var(--cream)}
.day-pill.locked{opacity:.55}
.day-pill.locked:hover{transform:none}

/* Tages-Karten */
.day-list{display:flex; flex-direction:column; gap:16px}
.day-card{padding:20px 22px}
.day-card.locked{opacity:.72}
.day-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.day-no{font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:600; color:var(--muted)}
.day-state{display:inline-block; font-size:12.5px; font-weight:600;
  padding:3px 10px; border-radius:14px; background:#e6ecdb; color:var(--green-deep); white-space:nowrap}
.day-state.st-avail{background:var(--green-deep); color:var(--cream)}
.day-state.st-locked{background:#eee9db; color:var(--muted)}
.day-card .ttl{font-size:17px; font-weight:600; color:var(--green-deep); line-height:1.3}
.day-descr{font-size:14px; color:var(--muted); font-weight:300; line-height:1.6; margin-top:6px}
.day-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
.day-actions:empty{display:none}
.lock-hint{font-size:13px; color:var(--muted); font-weight:300}
.coming-soon{display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; padding:5px 12px; border-radius:16px;
  background:#f2ecd4; color:#6b5b1e}

/* ---------- Video-Player ---------- */
.player.video{max-width:760px}
.player .video-el{width:100%; max-width:100%; display:block; margin:22px auto 0;
  border-radius:14px; background:#141a10; box-shadow:var(--shadow)}

/* ============================================================
   V2 — Tab-Leiste, Heute, Filter-Chips, Programme, Onboarding
   ============================================================ */

/* ---------- Tab-Leiste (Heute / Programme / Sessions / Journeys) ---------- */
.tabbar{
  position:sticky; top:77px; z-index:19; /* klebt unter der Top-Bar (44px Logo + 2×16px + 1px Border) */
  display:flex; gap:6px;
  /* Zentriert wird über auto-Margins am ersten/letzten Tab, NICHT über
     justify-content:center. Grund: in einem scrollenden Flex-Container
     schiebt justify-content:center überzählige Tabs nach links aus dem
     Scrollbereich heraus — sie sind dann weder sichtbar noch erreichbar.
     Auto-Margins zentrieren nur, solange Platz da ist, und verschwinden
     sauber, sobald gescrollt werden muss. */
  justify-content:flex-start;
  padding:8px 14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:rgba(245,242,233,.72); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(47,74,44,.08);
}
.tabbar > .tab:first-child{margin-left:auto}
.tabbar > .tab:last-child{margin-right:auto}
.tabbar::-webkit-scrollbar{display:none}
.tabbar[hidden]{display:none}
.tab{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;
  padding:8px 16px; border-radius:22px; transition:.18s;
  border:1px solid transparent;
}
.tab:hover{color:var(--green-deep); background:rgba(255,255,255,.55)}
.tab.active{
  color:var(--cream); background:var(--green-deep);
  box-shadow:0 6px 16px rgba(47,74,44,.28);
}
.tab-ic{font-size:15px; line-height:1}
@media(max-width:560px){
  .tabbar{
    padding:8px 10px; top:61px; /* 36px Logo + 2×12px + 1px */
    /* Scroll-Hint: rechte Fade-Kante zeigt, dass weitere Tabs offscreen warten */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  }
  /* Auf dem Handy beginnt die Leiste immer links (kein Auto-Zentrieren),
     damit „Heute" ohne Scrollen sichtbar ist. Der Auslauf hinter dem letzten
     Tab sorgt dafür, dass die Fade-Kante am Scroll-Ende über leerem Raum
     liegt statt über „Mein Profil". */
  .tabbar > .tab:first-child{margin-left:0}
  .tabbar > .tab:last-child{margin-right:38px}
  .tab{padding:8px 13px; font-size:13.5px}
}

/* ---------- Heute für dich ---------- */
/* Tageszeit-adaptives Foto-Hero (DESIGN Move 8 + Breathwrk-Skin): der Gruss
   liegt auf einem echten Goldstunde-/Botanisch-Bild unter tiefgruenem Scrim,
   morgens hell, abends gedaempft. Loest die flache Cream-Kopfzeile ab. */
.heute-hero{
  position:relative; border-radius:22px; overflow:hidden; margin-bottom:20px;
  isolation:isolate; box-shadow:var(--shadow);
}
.heute-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.02); animation:heuteZoom 26s ease-in-out infinite alternate;
}
.heute-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
}
@keyframes heuteZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.heute-hero::before{animation:none}}
.heute-hero--morgen::before{background-image:url(../img/hero-sunrise-960.jpg)}
.heute-hero--tag::before,
.heute-hero--abend::before{background-image:url(../img/section-botanical-1600.jpg)}
/* Scrim: morgens leicht (Bild darf leuchten), tags mittel, abends tief/dunkel.
   Alle sichern Cream-Text auf AA ab (linke Textseite am dunkelsten). */
/* Jeder Scrim: diagonaler Grund-Verlauf + ein Boden-Verlauf, der die untere
   Zitat-Zeile auch ueber hellen Bildstellen (Morgen) auf AA absichert. */
.heute-hero--morgen::after{background:
  linear-gradient(0deg, rgba(30,48,28,.58) 0%, rgba(30,48,28,0) 40%),
  linear-gradient(105deg, rgba(47,74,44,.82) 0%, rgba(47,74,44,.58) 46%, rgba(47,74,44,.30) 100%)}
.heute-hero--tag::after{background:
  linear-gradient(0deg, rgba(30,48,28,.42) 0%, rgba(30,48,28,0) 40%),
  linear-gradient(105deg, rgba(47,74,44,.86) 0%, rgba(47,74,44,.66) 46%, rgba(47,74,44,.42) 100%)}
.heute-hero--abend::after{background:
  linear-gradient(0deg, rgba(20,32,18,.40) 0%, rgba(20,32,18,0) 40%),
  linear-gradient(105deg, rgba(30,48,28,.90) 0%, rgba(30,48,28,.74) 46%, rgba(30,48,28,.54) 100%)}
.hh-inner{position:relative; z-index:2; padding:34px 32px 30px}
/* Text-Schatten sichert Cream/Sage-Text auf hellen Bildstellen (Morgen-Sonne)
   auf AA ab, ohne den Scrim uebermaessig zu verdunkeln. */
.hh-kicker,.hh-title,.hh-sub,.hh-quote{text-shadow:0 1px 5px rgba(18,28,14,.55)}
.hh-kicker{color:var(--sage-light)}
.hh-title{color:var(--cream)}
.hh-title .title-ic{color:var(--sage-light)}
.hh-sub{color:rgba(245,242,233,.92)}
.hh-link{color:#fff; font-weight:600; white-space:nowrap; text-decoration:underline;
  text-underline-offset:2px}
.hh-quote{color:var(--sage-light); margin-top:12px}
@media(max-width:560px){.hh-inner{padding:26px 22px 24px}}

/* Fotografischer Full-Width-Kopf der Journey-/Programm-Detailseiten (DESIGN
   Move 9 · Landing-Hero-Spiegel): gleiches tageszeit-adaptive Bild + Scrim wie
   das Heute-Hero, damit der Ersteindruck der Detailseite nicht mehr flach ist.
   Kicker + Titel + Untertitel liegen im Overlay, AA via Scrim + Text-Schatten. */
.detail-hero{
  position:relative; border-radius:22px; overflow:hidden; margin-bottom:18px;
  isolation:isolate; box-shadow:var(--shadow);
}
.detail-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.02); animation:heuteZoom 26s ease-in-out infinite alternate;
}
.detail-hero::after{ content:''; position:absolute; inset:0; z-index:1; }
@media(prefers-reduced-motion:reduce){.detail-hero::before{animation:none}}
.detail-hero--morgen::before{background-image:url(../img/hero-sunrise-960.jpg)}
.detail-hero--tag::before,
.detail-hero--abend::before{background-image:url(../img/section-botanical-1600.jpg)}
.detail-hero--morgen::after{background:
  linear-gradient(0deg, rgba(30,48,28,.58) 0%, rgba(30,48,28,0) 42%),
  linear-gradient(105deg, rgba(47,74,44,.82) 0%, rgba(47,74,44,.58) 46%, rgba(47,74,44,.30) 100%)}
.detail-hero--tag::after{background:
  linear-gradient(0deg, rgba(30,48,28,.44) 0%, rgba(30,48,28,0) 42%),
  linear-gradient(105deg, rgba(47,74,44,.86) 0%, rgba(47,74,44,.66) 46%, rgba(47,74,44,.42) 100%)}
.detail-hero--abend::after{background:
  linear-gradient(0deg, rgba(20,32,18,.42) 0%, rgba(20,32,18,0) 42%),
  linear-gradient(105deg, rgba(30,48,28,.90) 0%, rgba(30,48,28,.74) 46%, rgba(30,48,28,.54) 100%)}
.dh-inner{position:relative; z-index:2; padding:20px 32px 30px}
.dh-back{display:inline-block; margin:0 0 14px; color:rgba(245,242,233,.92);
  font-weight:600; text-decoration:none}
.dh-back:hover{color:#fff}
.dh-kicker,.dh-title,.dh-sub{text-shadow:0 1px 5px rgba(18,28,14,.55)}
.dh-kicker{color:var(--sage-light)}
.dh-title{color:var(--cream); margin:0}
.dh-sub{color:rgba(245,242,233,.92); margin-top:6px}
.detail-intro{margin-bottom:18px}
.detail-intro .j-descr{margin:0 2px 12px}
@media(max-width:560px){.dh-inner{padding:16px 22px 24px}}

.heute .impulse-card{padding:24px 26px; margin-bottom:18px}
.imp-label,.ns-label{
  font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:600; color:var(--muted); margin-bottom:10px;
}
.imp-text{
  font-family:'Dancing Script',cursive; font-size:27px; line-height:1.35;
  color:var(--green-deep); font-weight:600;
}
.imp-text.knowledge{
  font-family:'Poppins',sans-serif; font-size:15.5px; line-height:1.7;
  font-weight:300; color:var(--ink);
}
.imp-src{font-size:12.5px; color:var(--muted); font-weight:300; margin-top:8px}
.day-reflexion{
  font-family:'Dancing Script',cursive; font-size:22px; line-height:1.35;
  color:var(--green); margin-top:12px;
}
.heute .next-step{padding:22px 26px; margin-bottom:26px}
.ns-body{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.ns-ttl{font-size:18px; font-weight:600; color:var(--green-deep); line-height:1.3}
.ns-sub{font-size:14px; color:var(--muted); font-weight:300; margin-top:5px; line-height:1.55}
.heute-sec{margin-bottom:30px}
.need-chips{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:720px){.need-chips{grid-template-columns:repeat(2,1fr)}}
.need-chip{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px 12px; text-decoration:none; text-align:center; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.need-chip:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.need-chip.on{
  background:var(--green-deep); border-color:var(--green-deep);
  box-shadow:0 8px 20px rgba(47,74,44,.28);
}
.need-chip.on .nc-lbl{color:var(--cream)}
.need-chip.on .nc-emoji{color:var(--sage-light)}
.nc-emoji{font-size:30px; line-height:1}
.nc-lbl{font-size:14px; font-weight:600; color:var(--green-deep)}
.run-list{display:flex; flex-direction:column; gap:14px}
.run-card{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.run-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.run-emoji{font-size:30px; line-height:1; flex:0 0 auto}
.run-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.run-ttl{font-size:15.5px; font-weight:600; color:var(--green-deep)}
.run-meta{font-size:12.5px; color:var(--muted); font-weight:300}
.run-go{flex:0 0 auto; font-size:13.5px; font-weight:600; color:var(--green)}

/* Fortschritts-Balken */
.prog-bar{
  display:block; width:100%; height:7px; border-radius:6px; margin-top:6px;
  background:rgba(47,74,44,.12); overflow:hidden;
}
.prog-bar.big{height:10px; margin-top:10px}
.prog-fill{
  display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--sage),var(--green));
  transition:width .4s ease;
}

/* ---------- Filter-Chips (Sessions) ---------- */
.sessions-needs{margin-bottom:22px}
.filter-more-lbl{
  display:block; font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:600; color:var(--muted); margin-bottom:10px;
}
.filter-chips{padding:16px 20px; margin-bottom:24px}
.chip-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:5px 0}
.chip-row-lbl{
  font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:600; color:var(--muted); margin-right:4px; flex:0 0 auto;
}
.chip{
  display:inline-flex; align-items:center; font-size:13px; font-weight:500;
  color:var(--green-deep); text-decoration:none; cursor:pointer;
  padding:6px 14px; border-radius:18px; transition:.16s;
  background:rgba(255,255,255,.6); border:1px solid #d5ddc6;
}
.chip:hover{border-color:var(--sage); background:#fff}
.chip.on{
  background:var(--green-deep); border-color:var(--green-deep); color:var(--cream);
  box-shadow:0 4px 12px rgba(47,74,44,.26);
}

/* ---------- Programme ---------- */
.prog-card{
  position:relative; display:block; text-align:center; text-decoration:none;
  padding:30px 20px 24px; cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
}
.prog-card:hover{transform:translateY(-6px); box-shadow:0 22px 54px rgba(28,40,24,.26)}
.prog-card .cover{font-size:52px; line-height:1; margin-bottom:14px; display:block}
.prog-card .ttl{font-size:17px; font-weight:600; color:var(--green-deep); line-height:1.3}
.prog-card .sub{font-size:13px; color:var(--muted); font-weight:300; margin-top:5px; min-height:1.2em}
.prog-card .j-meta{font-size:12.5px; color:var(--muted); margin-top:10px; font-weight:500}
.prog-card .j-meta b{color:var(--green-deep)}
.prog-card .prog-bar{margin-top:12px}
.prog-teaser{max-width:560px; margin:0 auto; text-align:center; padding:36px 30px}
.prog-teaser .cover{font-size:52px; line-height:1; display:block; margin-bottom:14px}
.prog-teaser .ttl{font-size:22px; font-weight:700; color:var(--green-deep)}
.prog-teaser .sub{font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.65; margin:12px 0}
.week-preview{list-style:none; margin:18px auto; max-width:320px; text-align:left}
.week-preview li{padding:8px 0; border-bottom:1px solid rgba(47,74,44,.1);
  font-size:14.5px; font-weight:300; color:var(--ink)}
.week-preview li:last-child{border-bottom:none}
.week-preview b{color:var(--green-deep); font-weight:600}
.prog-teaser .btn{margin-top:10px}

/* Programm-Detail: Status + Wochen-Gruppen */
.prog-status{padding:18px 22px; margin-bottom:20px}
.ps-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ps-row b{font-size:15.5px; color:var(--green-deep)}
.ps-row span{font-size:13.5px; color:var(--muted); font-weight:500}
.week-group{padding:0; margin-bottom:16px; overflow:hidden}
.week-head{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:18px 22px; user-select:none;
}
.week-head::-webkit-details-marker{display:none}
.week-head::after{
  content:'▾'; margin-left:auto; color:var(--sage); font-size:15px;
  transition:transform .25s ease;
}
.week-group:not([open]) .week-head::after{transform:rotate(-90deg)}
.wk-no{
  flex:0 0 auto; font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:600; color:var(--cream); background:var(--green);
  padding:5px 12px; border-radius:16px; white-space:nowrap;
}
.wk-ttl{font-size:15.5px; font-weight:600; color:var(--green-deep); line-height:1.3}
.wk-status{
  flex:0 0 auto; font-size:12px; font-weight:600; color:var(--muted);
  background:#eee9db; padding:4px 11px; border-radius:14px; white-space:nowrap;
}
.wk-status.done{background:#dcebc8; color:var(--green-deep)}
.wk-status.now{background:var(--green-deep); color:var(--cream)}
.wk-descr{font-size:13.5px; color:var(--muted); font-weight:300; line-height:1.6;
  padding:0 22px 8px}
.week-group .day-list{padding:4px 16px 18px}
@media(max-width:560px){
  .week-head{flex-wrap:wrap; gap:8px; padding:15px 16px}
  .week-head::after{margin-left:0}
  .week-group .day-list{padding:2px 10px 14px}
}

/* ============================================================
   P3 — UI-Polish: SVG-Icons, Kacheln+, Sticky-Header, Hilfe
   ============================================================ */

/* ---------- Inline-SVG-Icons (dünne Linien, currentColor) ---------- */
.ic{width:1.15em; height:1.15em; display:inline-block; vertical-align:-.18em; flex:0 0 auto}
.ic-cover{width:52px; height:52px; color:var(--green)}
.ic-run{width:30px; height:30px; color:var(--green)}
.lib-card .cover,.journey-card .cover,.prog-card .cover,.prog-teaser .cover{color:var(--green)}
.title-ic .ic{width:.85em; height:.85em; color:var(--green); vertical-align:-.08em}
.tab-ic{display:inline-flex; align-items:center}
.tab-ic .ic{width:16px; height:16px}
.nc-emoji{color:var(--green); line-height:1}
.nc-emoji .ic{width:30px; height:30px}
.pc-emoji{color:var(--green); line-height:1}
.pc-emoji .ic{width:32px; height:32px}
.run-emoji{display:inline-flex; align-items:center}
.lock{color:var(--green-deep)}
.lock .ic{width:18px; height:18px}
.kind-badge{color:var(--green-deep)}
.kind-badge .ic{width:17px; height:17px}
.day-pill .ic{width:13px; height:13px}
.day-state .ic{width:12px; height:12px; vertical-align:-.14em}
.wk-status .ic{width:12px; height:12px; vertical-align:-.14em}
.imp-label .ic,.ns-label .ic{width:13px; height:13px; vertical-align:-.2em; color:var(--green)}
.cover-kicker{line-height:1}
.cover-kicker .ic{width:44px; height:44px; color:var(--green)}

/* ---------- Kacheln+: Inhalt / Ziel / „Passt zu dir, weil …" ---------- */
.j-infos{margin-top:12px; text-align:left; display:flex; flex-direction:column; gap:8px}
.j-info{font-size:12.5px; color:var(--muted); font-weight:300; line-height:1.55}
.j-info-lbl{
  display:inline-block; font-size:10px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--green-deep);
  background:rgba(185,201,166,.35); padding:2px 8px; border-radius:10px;
  margin-right:6px; vertical-align:.08em;
}
.j-match{
  display:flex; gap:7px; align-items:flex-start;
  font-size:12.5px; line-height:1.5; color:var(--green-deep); font-weight:400;
  background:rgba(220,235,200,.55); border:1px solid rgba(74,103,65,.18);
  border-radius:12px; padding:8px 11px;
}
.j-match .ic{width:14px; height:14px; margin-top:2px; color:var(--green)}
.j-match b{font-weight:600}
/* Teaser-Zeile auf Journey-/Programm-Kacheln (B45): sagt vor dem Klick, dass
   Tag 1 offen ist. `.open` = noch nicht aufgebraucht, darf tragen. */
.j-teaser{
  margin-top:12px; text-align:left; font-size:12.5px; line-height:1.5;
  color:var(--muted); font-weight:400;
}
.j-teaser.open{
  color:var(--green-deep); font-weight:500;
  background:rgba(220,235,200,.55); border:1px solid rgba(74,103,65,.18);
  border-radius:12px; padding:8px 11px;
}
.journey-detail .j-infos{max-width:640px; margin-top:14px}

/* ---------- Sticky Page-Header (Titel+Intro+Filter fix, Grid scrollt) ----------
   top = Top-Bar (77px) + Tab-Leiste (~53px). Verlauf statt harter Kante,
   damit die Karten sanft darunter wegscrollen. */
.page-head{
  position:sticky; top:129px; z-index:15;
  padding-bottom:10px; margin-bottom:14px;
  /* opak bis kurz vor der Unterkante — Inhalt darf nicht DURCH den Titel scheinen */
  background:linear-gradient(180deg,
    #eef1e6 0%, #e9eede 86%, rgba(233,238,222,0) 100%);
}
.page-head .lib-head{margin-bottom:12px}
.page-head .filter-chips{margin-bottom:0}
/* Mobil: sticky aus — der Header frässe sonst ~40% Viewport (Scroll-Fix in app.js:
   Routenwechsel springt nach oben, Titel ist damit immer sichtbar). */
@media(max-width:560px){.page-head{position:static;background:none}}
/* Wenig Höhe (Landscape-Handy): sticky aus, sonst bleibt kaum Scroll-Raum */
@media(max-height:640px){.page-head{position:static}}

/* ---------- Hilfe: FAQ + Kontakt (#/hilfe) ---------- */
.hilfe{max-width:720px; margin:0 auto}
.faq-list{display:flex; flex-direction:column; gap:12px; margin-bottom:34px}
.faq-item{padding:0; overflow:hidden}
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 52px 18px 22px; font-size:15.5px; font-weight:500;
  color:var(--green-deep); transition:.15s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:300; color:var(--sage); line-height:1;
  transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--green)}
.faq-item p{padding:0 22px 20px; font-size:14.5px; font-weight:300;
  color:var(--muted); line-height:1.7}
.contact-card{padding:30px 28px}
textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.75); border:1px solid #d5ddc6;
  border-radius:12px; padding:11px 14px; outline:none; transition:.18s;
  resize:vertical; min-height:120px;
}
textarea:focus{border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,158,118,.28)}
textarea::placeholder{color:#9aa78d}

/* ---------- Onboarding (#/willkommen) ---------- */
.welcome-wrap{max-width:560px; margin:20px auto 0}
.welcome-card{padding:36px 32px; text-align:center}
.welcome-logo{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  margin:0 auto 14px; display:block; box-shadow:0 4px 14px rgba(47,74,44,.28);
}
.persona-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0 6px}
@media(max-width:480px){.persona-grid{grid-template-columns:1fr}}
.persona-card{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:22px 14px; cursor:pointer; font-family:inherit; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.persona-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--sage)}
.persona-card:disabled{cursor:default; opacity:.6}
.persona-card.chosen{opacity:1; border-color:var(--green); box-shadow:0 0 0 3px rgba(74,103,65,.25)}
.pc-emoji{font-size:32px; line-height:1}
.pc-ttl{font-size:15px; font-weight:600; color:var(--green-deep); line-height:1.3}
.pc-sub{font-size:12.5px; color:var(--muted); font-weight:300; line-height:1.5}
.reco-card{padding:26px 24px; margin:22px 0 8px; text-align:center}
.reco-card .pc-emoji{display:block; margin-bottom:10px}
.reco-card .pc-ttl{font-size:18px}
.reco-card .pc-sub{margin:10px 0 18px; font-size:14px; line-height:1.6}

/* ============================================================
   P4 — Atem-Typ-Check (check.html) + Mein Profil (#/profil)
   ============================================================ */

/* ---------- Check: Rahmen + Karten ---------- */
.check-wrap{max-width:620px; margin:10px auto 0}
.check-card{padding:30px 28px; margin-bottom:18px}
.check-intro{text-align:center; padding:38px 32px}
.check-facts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin:20px 0 24px; font-size:13.5px; font-weight:500; color:var(--green-deep)}
.check-facts span{background:rgba(220,235,200,.55); border:1px solid rgba(74,103,65,.18);
  padding:6px 14px; border-radius:18px}
.btn-big{font-size:16px; padding:15px 30px}

/* Fortschritt */
.check-progress{display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:0 4px}
.cp-lbl{flex:0 0 auto; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:600; color:var(--muted); white-space:nowrap}
.check-progress .prog-bar{margin-top:0}

/* Frage-Screen */
.check-block{font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:600; color:var(--green); margin-bottom:10px}
.check-q{font-size:21px; font-weight:600; color:var(--green-deep); line-height:1.35; margin-bottom:22px}
.opt-list{display:flex; flex-direction:column; gap:12px}
.opt-card{
  font-family:inherit; font-size:14.5px; font-weight:400; color:var(--ink);
  text-align:left; line-height:1.5; padding:16px 18px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.opt-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--sage)}
.opt-card.on{border-color:var(--green); background:rgba(220,235,200,.6);
  box-shadow:0 0 0 3px rgba(74,103,65,.22); color:var(--green-deep); font-weight:500}
.likert-row{display:flex; gap:8px; justify-content:space-between}
.likert-opt{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:inherit; cursor:pointer; padding:14px 6px 12px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.likert-opt:hover{transform:translateY(-2px); border-color:var(--sage)}
.likert-opt.on{border-color:var(--green); background:rgba(220,235,200,.6);
  box-shadow:0 0 0 3px rgba(74,103,65,.22)}
.lk-dot{width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:600; color:var(--green-deep);
  background:rgba(255,255,255,.7); border:1.5px solid var(--sage-light)}
.likert-opt.on .lk-dot{background:var(--green-deep); color:var(--cream); border-color:var(--green-deep)}
.lk-lbl{font-size:11px; font-weight:400; color:var(--muted); text-align:center; line-height:1.3}
@media(max-width:560px){
  .likert-row{flex-wrap:wrap}
  .likert-opt{flex:1 1 30%}
  .check-q{font-size:18px}
}
.check-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px}
.check-hint-nav{font-size:12.5px; color:var(--muted); font-weight:300; text-align:right}

/* Consent */
.check-consent{display:flex; gap:10px; align-items:flex-start; font-size:12.5px;
  font-weight:300; color:var(--muted); line-height:1.55; margin:6px 0 18px; cursor:pointer}
.check-consent input{width:17px; height:17px; margin-top:2px; accent-color:var(--green); flex:0 0 auto; cursor:pointer}
.check-consent a{color:var(--green); font-weight:500}

/* ---------- Ergebnis (Check + #/profil teilen die Klassen) ---------- */
.result .page-title.big{font-size:32px}
.result-hero{text-align:center}
.mix-badge{display:inline-block; margin-top:12px; font-size:12px; font-weight:600;
  color:var(--green-deep); background:rgba(185,201,166,.4); padding:5px 14px; border-radius:14px}
.result-descr{font-size:14.5px; font-weight:300; line-height:1.7; color:var(--ink);
  margin-top:16px; text-align:left}
.res-h{font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:14px}
.res-h.outside{margin:4px 4px 12px}
.check-sec{margin-bottom:18px}
.score-list{display:flex; flex-direction:column; gap:9px}
.sc-row{display:flex; align-items:center; gap:12px}
.sc-lbl{flex:0 0 132px; font-size:13px; font-weight:500; color:var(--muted)}
.sc-lbl.main{color:var(--green-deep); font-weight:600}
.sc-bar{flex:1; height:9px; border-radius:6px; background:rgba(47,74,44,.12); overflow:hidden}
.sc-fill{display:block; height:100%; border-radius:6px; background:var(--sage-light); transition:width .5s ease}
.sc-fill.main{background:linear-gradient(90deg,var(--sage),var(--green))}
.sc-pct{flex:0 0 40px; font-size:13px; font-weight:600; color:var(--green-deep); text-align:right}
@media(max-width:480px){.sc-lbl{flex-basis:104px; font-size:12px}}
.strength-list{list-style:none}
.strength-list li{font-size:14px; font-weight:300; line-height:1.6; padding:7px 0 7px 26px; position:relative}
.strength-list li::before{content:'✓'; position:absolute; left:2px; color:var(--green); font-weight:600}
.reco-row{display:flex; gap:14px; align-items:flex-start; padding:8px 0}
.reco-no{flex:0 0 26px; height:26px; border-radius:50%; background:var(--green-deep);
  color:var(--cream); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center}
.reco-row p{font-size:14px; font-weight:300; line-height:1.6; padding-top:2px}
.reise-list{display:flex; flex-direction:column; gap:12px}
.reise-step{display:flex; gap:14px; align-items:flex-start; padding:18px 20px;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
.reise-step:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.rs-when{flex:0 0 auto; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:600; color:var(--cream); background:var(--green); padding:5px 12px;
  border-radius:12px; margin-top:2px; white-space:nowrap}
.rs-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.rs-ttl{font-size:15px; font-weight:600; color:var(--green-deep); line-height:1.35}
.rs-kind{font-size:12px; color:var(--muted); font-weight:500}
.rs-why{font-size:12.5px; font-weight:300; line-height:1.5; color:var(--ink); margin-top:3px}
.rs-why b{font-weight:600; color:var(--green-deep)}
.rs-go{flex:0 0 auto; color:var(--green); font-size:14px; margin-top:4px}
@media(max-width:480px){.reise-step{flex-wrap:wrap}.rs-when{order:-1}}
.result-cta{text-align:center}

/* ---------- Heute: sanfter Check-Hinweis ---------- */
.check-hint-card{display:flex; align-items:center; gap:16px; padding:18px 22px;
  margin-bottom:26px; text-decoration:none; flex-wrap:wrap;
  transition:transform .2s ease, box-shadow .2s ease}
.check-hint-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.check-hint-card .ch-ic{flex:0 0 auto; color:var(--green)}
.check-hint-card .ch-ic .ic{width:30px; height:30px}
.check-hint-card .ch-txt{flex:1; min-width:200px}
.check-hint-card .ch-ttl{font-size:15px; font-weight:600; color:var(--green-deep)}
.check-hint-card .ch-sub{font-size:13px; color:var(--muted); font-weight:300; margin-top:3px; line-height:1.5}
.check-hint-card .ch-go{flex:0 0 auto; font-size:13.5px; font-weight:600; color:var(--green)}

/* ---------- Mein Profil (#/profil) ---------- */
.profil-wrap{max-width:620px; margin:0 auto}
.profil-meta{font-size:12.5px; color:var(--muted); font-weight:300; margin-top:14px}

/* ---------- Ausbildung (#/ausbildung, P8: Breath Master) ---------- */
.master-wrap{max-width:820px; margin:0 auto}
.master-hero{text-align:center; padding:36px 30px}
.master-descr{font-size:14px; font-weight:300; line-height:1.7; color:var(--ink);
  margin-top:14px; text-align:left}
.master-toc{margin-top:18px; padding:24px 28px}
.master-toc-list{list-style:none; display:flex; flex-direction:column; gap:2px}
.master-toc-list li{display:flex; align-items:center; gap:12px; font-size:14.5px;
  font-weight:400; color:var(--ink); padding:7px 0;
  border-bottom:1px solid rgba(47,74,44,.08)}
.master-toc-list li:last-child{border-bottom:none}
.mw-no{flex:0 0 26px; height:26px; border-radius:50%; background:rgba(185,201,166,.45);
  color:var(--green-deep); font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center}
.master-note{font-size:13px; color:var(--muted); font-weight:300; line-height:1.6;
  margin-top:20px; text-align:center}
.master-hwg{font-size:11.5px; color:var(--muted); font-weight:300; line-height:1.55;
  margin-top:12px; text-align:center}

/* Wochen-Timeline */
.mw-list{display:flex; flex-direction:column; gap:14px; margin-top:20px}
.mw-card,.mw-final{display:flex; align-items:center; gap:16px; padding:18px 22px;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
a.mw-card:hover,a.mw-final:hover{transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(28,40,24,.24)}
.mw-card.locked{opacity:.62; cursor:default}
.mw-state{flex:0 0 40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center}
.mw-state .ic{width:17px; height:17px}
.mw-state.passed{background:var(--green); color:var(--cream)}
.mw-state.available{background:rgba(185,201,166,.55); color:var(--green-deep)}
.mw-state.locked{background:rgba(47,74,44,.1); color:var(--muted)}
.mw-body{flex:1; min-width:0; display:flex; flex-direction:column}
.mw-kicker{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--muted); font-weight:600}
.mw-ttl{font-size:16.5px; font-weight:600; color:var(--green-deep);
  line-height:1.3; margin-top:2px}
.mw-sum{font-size:13px; color:var(--muted); font-weight:300; line-height:1.5; margin-top:3px}
.mw-score{flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--muted);
  background:rgba(47,74,44,.08); border-radius:12px; padding:4px 11px}
.mw-score.ok{background:rgba(185,201,166,.5); color:var(--green-deep)}
.mw-go{flex:0 0 auto; color:var(--green); font-size:14px}
.mw-final{margin-top:2px}
.mw-final .btn{flex:0 0 auto}
@media(max-width:560px){
  .mw-card,.mw-final{flex-wrap:wrap}
  .mw-final .btn{margin-left:56px}
}

/* Lektion-Reader: Serif-Zwischentitel + Merkkästen */
.mw-goals{margin-top:4px; padding:24px 28px}
/* Lecture-Video-Kachel: Thumbnail + Dauer-Badge, Titel, Play-Button */
.lecture-card{display:flex; align-items:center; gap:18px; margin-top:14px;
  padding:14px 20px 14px 14px; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease}
a.lecture-card:hover{transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(28,40,24,.24)}
a.lecture-card:hover .lecture-play{background:var(--green)}
.lecture-thumb{position:relative; flex:0 0 132px; height:82px; border-radius:12px;
  background:linear-gradient(135deg,var(--green-deep) 0%,var(--green) 58%,var(--sage) 100%);
  display:flex; align-items:center; justify-content:center; color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lecture-thumb .ic{width:30px; height:30px; opacity:.95}
.lecture-dur{position:absolute; right:6px; bottom:6px; font-size:10.5px; font-weight:600;
  letter-spacing:.4px; color:var(--cream); background:rgba(34,48,28,.72);
  border-radius:8px; padding:2px 7px; line-height:1.4}
.lecture-body{flex:1; min-width:0; display:flex; flex-direction:column}
.lecture-kicker{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--muted); font-weight:600}
.lecture-ttl{font-size:16.5px; font-weight:600; color:var(--green-deep);
  line-height:1.3; margin-top:2px}
.lecture-sum{font-size:13px; color:var(--muted); font-weight:300; line-height:1.5; margin-top:3px}
.lecture-play{flex:0 0 auto}
.lecture-card.soon{opacity:.85}
.lecture-card.soon .lecture-thumb{background:linear-gradient(135deg,#6b7a62 0%,var(--sage) 100%)}
@media(max-width:560px){
  .lecture-card{flex-wrap:wrap; padding:14px}
  .lecture-thumb{flex-basis:100%; height:118px}
  .lecture-play{width:100%}
}
/* Legal-Seiten (Datenschutz/Impressum) — statische Seiten, gleiche Glas-Optik */
.legal-wrap{max-width:820px; margin:0 auto}
.legal-wrap .glass{padding:32px 36px; margin-top:18px}
.legal-wrap h2{font-family:Georgia,'Times New Roman',serif; font-size:21px; font-weight:600;
  color:var(--green-deep); line-height:1.3; margin:26px 0 10px}
.legal-wrap .glass h2:first-child{margin-top:0}
.legal-wrap h3{font-size:15px; font-weight:600; color:var(--green-deep); margin:18px 0 6px}
.legal-wrap p,.legal-wrap li{font-size:14.5px; font-weight:300; line-height:1.75; color:var(--ink)}
.legal-wrap p{margin:0 0 12px}
.legal-wrap ul{margin:0 0 14px 22px}
.legal-wrap li{margin-bottom:6px}
.legal-wrap a{color:var(--green); font-weight:500}
.legal-stand{font-size:12.5px; color:var(--muted); margin-top:16px}
.legal-todo{background:#f4e3de; color:#7a3327; border-radius:10px; padding:3px 9px;
  font-weight:600; font-size:13.5px; white-space:nowrap}
@media(max-width:560px){.legal-wrap .glass{padding:24px 20px}}

.mw-passed-banner{display:flex; align-items:center; gap:10px; padding:14px 20px;
  margin-bottom:16px; font-size:14px; font-weight:500; color:var(--green-deep)}
.mw-passed-banner .ic{color:var(--green)}
.mw-passed-banner a{color:var(--green); font-weight:600}
.lesson{padding:36px 40px; margin-top:16px}
.lesson h2{font-family:Georgia,'Times New Roman',serif; font-size:23px; font-weight:600;
  color:var(--green-deep); line-height:1.3; margin:28px 0 12px; letter-spacing:.2px}
.lesson h2:first-child{margin-top:0}
.lesson h3{font-family:Georgia,'Times New Roman',serif; font-size:18.5px; font-weight:600;
  color:var(--green-deep); line-height:1.3; margin:22px 0 10px}
.lesson p{font-size:15px; font-weight:300; line-height:1.78; margin:0 0 14px}
.lesson ul,.lesson ol{margin:0 0 16px 24px}
.lesson li{font-size:15px; font-weight:300; line-height:1.7; margin-bottom:7px}
.lesson strong{font-weight:600; color:var(--green-deep)}
.lesson blockquote.merk{background:rgba(185,201,166,.28); border-left:3px solid var(--green);
  border-radius:0 12px 12px 0; padding:15px 20px; margin:0 0 16px}
.lesson blockquote.merk p{margin:0; font-size:14.5px; line-height:1.65}
@media(max-width:560px){.lesson{padding:26px 22px}}

/* Quiz-Flow */
.mw-quiz-intro{margin-top:18px; padding:30px; text-align:center}
.mw-quiz-intro .btn{margin-top:16px}
.mw-quiz{margin-top:18px; padding:28px 30px}
.quiz-top{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.quiz-progress{font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:600; color:var(--muted); white-space:nowrap}
.prog-bar.quiz{flex:1; margin-top:0; height:6px}
.quiz-q{font-size:18px; font-weight:600; color:var(--green-deep);
  line-height:1.45; margin-bottom:18px}
.quiz-opts{display:flex; flex-direction:column; gap:10px}
.quiz-opt{display:flex; align-items:center; gap:13px; text-align:left;
  font-family:inherit; font-size:14.5px; font-weight:300; color:var(--ink);
  background:rgba(255,255,255,.6); border:1.5px solid rgba(74,103,65,.22);
  border-radius:14px; padding:13px 16px; cursor:pointer; transition:.15s}
.quiz-opt:hover{border-color:var(--sage); background:rgba(255,255,255,.8)}
.quiz-opt.sel{border-color:var(--green-deep); background:rgba(185,201,166,.35); font-weight:500}
.qo-key{flex:0 0 26px; height:26px; border-radius:50%; background:rgba(47,74,44,.1);
  color:var(--green-deep); font-size:12.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center}
.quiz-opt.sel .qo-key{background:var(--green-deep); color:var(--cream)}
.quiz-nav{display:flex; justify-content:space-between; align-items:center; margin-top:20px}
.quiz-score{display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center}
.qs-num{font-size:48px; font-weight:700; color:#96502e; line-height:1}
.qs-num.ok{color:var(--green-deep)}
.qs-sub{font-size:13px; color:var(--muted); font-weight:300}
.mw-badge{display:inline-flex; align-items:center; gap:7px; font-size:13px;
  font-weight:600; border-radius:16px; padding:6px 16px}
.mw-badge.passed{background:var(--green); color:var(--cream)}
.mw-badge.passed .ic{width:14px; height:14px}
.mw-badge.failed{background:#f4e3de; color:#7a3327}
.quiz-msg{font-size:14.5px; font-weight:300; line-height:1.65; text-align:center;
  max-width:480px; margin:14px auto 0}
.quiz-cta{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.quiz-res-list{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.quiz-res{border:1px solid rgba(74,103,65,.18); border-radius:14px;
  padding:14px 18px; background:rgba(255,255,255,.45)}
.quiz-res.ok{border-color:rgba(74,103,65,.32)}
.quiz-res.no{border-color:rgba(122,51,39,.28); background:rgba(244,227,222,.32)}
.qr-head{display:flex; gap:10px; align-items:flex-start}
.qr-ic{flex:0 0 20px; color:var(--green); font-weight:600}
.quiz-res.no .qr-ic{color:#7a3327}
.qr-ic .ic{width:15px; height:15px}
.qr-q{font-size:14px; font-weight:500; color:var(--green-deep); line-height:1.5}
.qr-line{font-size:13.5px; font-weight:300; margin:7px 0 0 30px; color:#7a3327}
.qr-line.good{color:var(--green-deep); font-weight:400}
.qr-explain{font-size:13px; font-weight:300; color:var(--muted);
  margin:6px 0 0 30px; line-height:1.6}

/* ============================================================
   Gamification — Badges (Heute-Mini-Leiste, Profil-Grid, Toast)
   ============================================================ */

/* Rundes Badge-Icon (Icon-Stil: dünne Linien auf Glas-Kreis) */
.badge-circle{
  width:54px; height:54px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #ffffffd9, #cdd7bd);
  border:2.5px solid var(--green); color:var(--green-deep);
  box-shadow:0 6px 16px rgba(47,74,44,.22);
}
.badge-circle .ic{width:26px; height:26px}
.badge-circle.locked{
  background:rgba(255,255,255,.45); border-color:rgba(93,107,82,.3);
  color:#9aa78d; box-shadow:none;
}

/* Mini-Leiste auf Heute: letzte 3 + nächstes erreichbares */
.badge-mini{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:16px 22px; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.badge-mini:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.bm-item{display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:0 0 auto; max-width:96px; text-align:center}
.bm-item .badge-circle{width:46px; height:46px}
.bm-item .badge-circle .ic{width:22px; height:22px}
.bm-lbl{font-size:11.5px; font-weight:500; color:var(--green-deep); line-height:1.3}
.bm-lbl b{font-weight:600}
.bm-empty{font-size:13.5px; color:var(--muted); font-weight:300; line-height:1.5}
.bm-next{display:flex; align-items:center; gap:12px; flex:1 1 220px; min-width:200px;
  padding-left:18px; border-left:1px solid rgba(47,74,44,.12)}
.bm-next .badge-circle{width:46px; height:46px}
.bm-next .badge-circle .ic{width:22px; height:22px}
.bm-next-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left}
.bm-next-txt .bm-lbl{color:var(--muted); font-weight:400}
.bm-next-txt .prog-bar{margin-top:2px; height:6px}
.bm-plbl{font-size:11px; font-weight:500; color:var(--muted)}
.bm-go{flex:0 0 auto; margin-left:auto; font-size:13px; font-weight:600; color:var(--green)}
@media(max-width:560px){
  .badge-mini{gap:14px; padding:14px 16px}
  .bm-next{border-left:none; padding-left:0; flex-basis:100%}
}

/* Profil: „Deine Badges"-Grid */
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.badge-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; padding:20px 14px 16px;
}
.badge-card .b-ttl{font-size:13.5px; font-weight:600; color:var(--green-deep); line-height:1.3}
.badge-card .b-date{font-size:11.5px; font-weight:500; color:var(--green)}
.badge-card .b-date .ic{width:12px; height:12px; vertical-align:-.15em}
.badge-card.locked{opacity:.85}
.badge-card.locked .badge-circle{filter:grayscale(.35)}
.badge-card.locked .b-ttl{color:var(--muted)}
.badge-card .prog-bar{height:6px; margin-top:2px}
.badge-card .b-plbl{font-size:11px; font-weight:500; color:var(--muted)}
.badge-card .b-hint{font-size:11.5px; font-weight:300; color:var(--muted); line-height:1.45}

/* Badge-Toast (neu verdient) */
.toast.badge-toast{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:linear-gradient(120deg, var(--green-deep), var(--green));
  padding:11px 22px 11px 12px;
}
.badge-toast .bt-ic{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,242,233,.94); color:var(--green-deep);
}
.badge-toast .bt-ic .ic{width:20px; height:20px}
.badge-toast .bt-txt{line-height:1.35}
.badge-toast .bt-txt b{
  display:block; font-size:10.5px; letter-spacing:1.6px;
  text-transform:uppercase; opacity:.85; font-weight:600;
}

/* ============================================================
   Admin-Zentrale (#/admin/<tab>) — Sub-Navigation, KPIs, Funnel,
   Filter, Pills, Detail-Grids, Mail-Vorschau-Modal
   ============================================================ */

/* Sub-Navigation (Tab-Pills) */
.admin-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 26px}
.admin-tab{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500;
  color:var(--green-deep); text-decoration:none; padding:9px 18px; border-radius:22px;
  background:var(--glass); border:1px solid var(--glass-border); transition:.18s;
}
.admin-tab .ic{width:15px; height:15px}
.admin-tab:hover{background:rgba(255,255,255,.75); transform:translateY(-1px)}
.admin-tab.active{
  color:var(--cream); background:var(--green-deep); border-color:var(--green-deep);
  box-shadow:0 6px 16px rgba(47,74,44,.28);
}

/* KPI-Kachel-Raster (Übersicht + Mail-Personas) */
.adm-kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.adm-kpis .stat{padding:18px 10px}
.adm-kpis .stat.persona{padding:16px 12px}
.adm-kpis .stat.persona .num{font-size:24px}

/* Funnel (Übersicht) */
.funnel-row{display:flex; align-items:center; gap:14px; padding:7px 0}
.funnel-lbl{flex:0 0 130px; font-size:13px; font-weight:600; color:var(--green-deep)}
.funnel-bar{flex:1; height:14px; border-radius:8px; background:rgba(47,74,44,.1); overflow:hidden}
.funnel-fill{display:block; height:100%; border-radius:8px;
  background:linear-gradient(90deg,var(--sage),var(--green-deep)); transition:width .5s ease}
.funnel-num{flex:0 0 110px; font-size:13px; font-weight:600; color:var(--green-deep); text-align:right}
.funnel-num em{font-style:normal; font-weight:400; color:var(--muted); font-size:12px}
@media(max-width:560px){
  .funnel-lbl{flex-basis:92px; font-size:12px}
  .funnel-num{flex-basis:84px; font-size:12px}
}

/* Filterleiste (User / Mails / Check) */
.adm-filters{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:16px}
.adm-filters input[type=text]{flex:1; min-width:200px; font-family:inherit; font-size:14px;
  color:var(--ink); background:rgba(255,255,255,.75); border:1px solid #d5ddc6;
  border-radius:10px; padding:9px 13px; outline:none}
.adm-filters input[type=text]:focus{border-color:var(--sage); box-shadow:0 0 0 3px rgba(138,158,118,.28)}
.adm-filters select{font-family:inherit; font-size:13.5px; color:var(--ink);
  background:rgba(255,255,255,.8); border:1px solid #d5ddc6; border-radius:10px;
  padding:8px 12px; cursor:pointer; outline:none}
.adm-count{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap}

/* Status-/Tier-Pills */
.adm-pill{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 10px;
  border-radius:12px; background:rgba(47,74,44,.08); color:var(--muted); white-space:nowrap}
.adm-pill.ok{background:#dcebc8; color:var(--green-deep)}
.adm-pill.mid{background:#f2ecd4; color:#6b5b1e}
.adm-pill.off{background:#f0dcd7; color:#7a3b2e}
.adm-pill.tier-free{background:rgba(47,74,44,.08); color:var(--muted)}
.adm-pill.tier-premium,.adm-pill.tier-paid{background:#dcebc8; color:var(--green-deep)}
.adm-pill.tier-master{background:var(--green-deep); color:var(--cream)}

/* Klickbare Tabellenzeilen */
tr.rowlink{cursor:pointer}
tr.rowlink:hover{background:rgba(255,255,255,.6)}

/* Detail-Grids (User-Detail, Check-Detail) */
.adm-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:28px}
@media(max-width:760px){.adm-detail-grid{grid-template-columns:1fr}}
.adm-card{padding:22px 24px}
.adm-edit-row{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(47,74,44,.1)}
.adm-edit-row label{display:flex; flex-direction:column; gap:5px; font-size:12px;
  font-weight:600; color:var(--green-deep); letter-spacing:.4px}
.adm-edit-row select{font-family:inherit; font-size:13.5px; color:var(--ink);
  background:rgba(255,255,255,.8); border:1px solid #d5ddc6; border-radius:10px;
  padding:7px 12px; cursor:pointer; outline:none}
.adm-check-lbl{flex-direction:row !important; align-items:center; gap:8px !important;
  font-weight:500 !important; padding-bottom:8px}
.adm-check-lbl input{width:16px; height:16px; accent-color:var(--green); cursor:pointer}

/* Block-Zwischenzeile (Check-Antworten) */
.adm-block-row td{font-size:11px; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:600; color:var(--green); padding-top:16px; border-bottom:none}

/* Muster-Factsheet-Buttons */
.adm-sample-btns{display:flex; gap:10px; flex-wrap:wrap}

/* Mail-Vorschau-Modal */
.adm-modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center;
  justify-content:center; padding:22px; background:rgba(28,40,24,.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.adm-modal-box{width:100%; max-width:660px; max-height:86vh; overflow:auto;
  background:rgba(245,242,233,.97); padding:26px 28px}
.adm-modal-head{display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(47,74,44,.12)}
.adm-mail-body{font-size:14.5px; font-weight:300; line-height:1.7; color:var(--ink)}
.adm-mail-body p{margin-bottom:12px}
.adm-mail-body ol,.adm-mail-body ul{margin:0 0 12px 22px}
.adm-mail-body a{color:var(--green); font-weight:500}
.adm-mail-body strong{font-weight:600; color:var(--green-deep)}

/* ============================================================
   Stufe B1 — Commerce: Danke-Seite, Preis-Hinweis, Master-Info
   Warme Cream-Karten statt Glass-Uniformität (DESIGN-DIRECTION Move 5).
   ============================================================ */

/* ---------- #/danke (Rückkehr nach dem Kauf) ---------- */
.danke-view{max-width:600px; margin:0 auto}
.danke-card{
  position:relative; text-align:center; padding:40px 32px 34px; border-radius:24px;
  background:linear-gradient(168deg,#faf8f1 0%,var(--cream) 62%,#eef1e3 100%);
  border:1px solid rgba(138,158,118,.35); box-shadow:var(--shadow);
}
.danke-card::before{
  content:''; position:absolute; inset:0; border-radius:24px; pointer-events:none;
  border:1px solid rgba(255,255,255,.6);
}
.danke-mark{
  font-size:12.5px; letter-spacing:2.6px; text-transform:lowercase;
  font-weight:600; color:var(--sage);
}
.danke-slogan{
  font-family:'Dancing Script',cursive; font-size:27px; line-height:1.2;
  color:var(--green); margin-top:4px;
}
.danke-h{font-size:32px; font-weight:700; color:var(--green-deep); margin-top:14px; line-height:1.1}
.danke-lead{
  font-size:15px; font-weight:300; line-height:1.65; color:var(--muted);
  margin:10px auto 0; max-width:400px;
}
.danke-state{margin-top:24px; min-height:96px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px}
.danke-state .btn{max-width:320px}
.danke-msg{font-size:15px; font-weight:300; line-height:1.6; color:var(--ink); max-width:420px}
.danke-msg b{font-weight:600; color:var(--green-deep)}
.danke-state.ok{
  padding:20px 18px; border-radius:16px;
  background:rgba(185,201,166,.34); border:1px solid rgba(74,103,65,.24);
}
/* drei atmende Punkte, solange die Freischaltung läuft */
.danke-dots{display:inline-flex; gap:4px; margin-left:7px; vertical-align:middle}
.danke-dots i{
  width:5px; height:5px; border-radius:50%; background:var(--sage);
  animation:danke-breathe 1.5s ease-in-out infinite;
}
.danke-dots i:nth-child(2){animation-delay:.22s}
.danke-dots i:nth-child(3){animation-delay:.44s}
@keyframes danke-breathe{0%,100%{opacity:.32; transform:scale(.8)}50%{opacity:1; transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.danke-dots i{animation:none; opacity:.7}}
.danke-hint{
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(47,74,44,.12);
  font-size:13px; font-weight:300; line-height:1.55; color:var(--muted);
}
@media(max-width:520px){
  .danke-card{padding:32px 22px 28px}
  .danke-h{font-size:27px}
}

/* ---------- Preis-Hinweis auf #/upgrade (api/pricing notice) ---------- */
.up-notice{
  margin-top:14px; text-align:center; font-size:12.5px; font-weight:300;
  line-height:1.55; color:var(--muted);
}

/* ---------- Master-Info-Karte auf #/hilfe?thema=master ---------- */
.hilfe-master{
  margin-bottom:26px; padding:26px 28px; border-radius:20px;
  background:linear-gradient(160deg,#faf8f1 0%,var(--cream) 100%);
  border:1px solid rgba(138,158,118,.4); box-shadow:var(--shadow);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  scroll-margin-top:96px;
}
.hm-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.hilfe-master .kicker{font-size:28px}
.hm-h{font-size:21px; font-weight:700; color:var(--green-deep); margin-top:2px; line-height:1.2}
.hm-price{
  flex:none; padding:8px 16px; border-radius:999px; white-space:nowrap;
  background:var(--green-deep); color:var(--cream); font-size:14px; font-weight:600;
}
.hm-p{font-size:14.5px; font-weight:300; line-height:1.65; color:var(--muted); margin-top:12px}
.hm-list{list-style:none; margin:14px 0 0; display:flex; flex-direction:column; gap:6px}
.hm-list li{position:relative; padding-left:26px; font-size:14px; font-weight:300; color:var(--ink)}
.hm-list li::before{content:'✓'; position:absolute; left:3px; top:0; color:var(--green); font-weight:600}
.hm-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.hm-note{font-size:11.5px; font-weight:300; line-height:1.55; color:var(--muted); margin-top:14px}
@media(max-width:520px){
  .hilfe-master{padding:22px 20px}
  .hm-cta .btn{width:100%}
}

/* ============================================================
   Stufe B2 — Social-Vorschau, Nachrichten, Quiz, Check-CRM
   Warme Cream-Flächen statt Glass-Uniformität (DESIGN-DIRECTION Move 5).
   ============================================================ */

/* ---------- Posting-Zentrale: Zeile/Thumbnail öffnen die Vorschau ---------- */
.soc-thumb{cursor:pointer; transition:transform .16s ease, box-shadow .16s ease}
.soc-table tbody tr[data-slug]{cursor:pointer}
.soc-table tbody tr[data-slug]:hover{background:rgba(255,255,255,.6)}
.soc-table tbody tr[data-slug]:hover .soc-thumb{transform:scale(1.06); box-shadow:0 4px 14px rgba(28,40,24,.22)}
.soc-actions{cursor:default}

/* ---------- Vorschau-Modal (Carousel-Galerie / Reel) ---------- */
.soc-prev-box{max-width:760px}
.soc-prev-media{
  display:flex; align-items:center; justify-content:center;
  padding:14px; border-radius:16px; background:rgba(47,74,44,.06);
}
.soc-prev-media img,.soc-prev-video{
  max-width:100%; max-height:62vh; border-radius:12px; display:block;
  box-shadow:0 8px 26px rgba(28,40,24,.2);
}
.soc-prev-video{background:#1c2818}
.soc-gal{width:100%; display:flex; flex-direction:column; align-items:center; gap:14px}
.soc-gal-stage{display:flex; align-items:center; justify-content:center; min-height:180px}
.soc-gal-nav{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.soc-gal-nav .btn[disabled]{opacity:.4; cursor:default; pointer-events:none}
.soc-gal-count{
  font-size:12.5px; font-weight:600; letter-spacing:.6px; color:var(--muted);
  min-width:96px; text-align:center;
}
.soc-prev-caption{
  margin-top:16px; max-height:30vh; overflow-y:auto;
  padding:16px 18px; border-radius:14px;
  background:linear-gradient(160deg,#faf8f1 0%,var(--cream) 100%);
  border:1px solid rgba(138,158,118,.34);
  font-size:14px; font-weight:300; line-height:1.7; color:var(--ink);
}
@media(max-width:520px){
  .soc-prev-media{padding:8px}
  .soc-prev-media img,.soc-prev-video{max-height:52vh}
}

/* ---------- Admin-Tab „Nachrichten" (Kontaktformular) ---------- */
.adm-msg{padding:18px 20px; margin-bottom:14px}
.adm-msg-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid rgba(47,74,44,.12);
}
.adm-msg-head b{font-weight:600; color:var(--green-deep)}
.adm-msg-mail{margin-left:10px; font-size:13px; font-weight:400; color:var(--green); text-decoration:underline}
.adm-msg-body{
  font-size:14.5px; font-weight:300; line-height:1.7; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
.adm-msg-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}

/* ---------- Check-CRM: Notiz + Lead-Hinweis ---------- */
.adm-note-line{
  margin-top:4px; max-width:340px; font-size:12.5px; font-weight:300;
  line-height:1.45; color:var(--muted); font-style:italic;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.adm-note-block{
  margin:14px 0; padding:14px 16px; border-radius:14px;
  background:linear-gradient(160deg,#faf8f1 0%,var(--cream) 100%);
  border:1px solid rgba(138,158,118,.34);
}
.adm-note-lbl{
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:600; color:var(--green); margin-bottom:6px;
}
.adm-note-text{
  font-size:14px; font-weight:300; line-height:1.7; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
.adm-lead-hint{
  display:flex; align-items:center; gap:8px; margin:10px 0 14px;
  padding:9px 14px; border-radius:12px;
  background:#dcebc8; color:var(--green-deep);
  font-size:13px; font-weight:500;
}
.adm-lead-hint .ic{color:var(--green)}

/* ============================================================
   Stufe B3 — Profil-Sektionen (Paket E), Onboarding „Dein Weg",
   gestapelte Wortmarke mit Slogan
   ============================================================ */

/* ---------- Wortmarke mit Slogan (Kopfzeile aller app.css-Seiten) ---------- */
.brand-stack{display:inline-flex; flex-direction:column; gap:0; text-decoration:none}
.brand-stack .brand-line{display:inline-flex; align-items:center; gap:10px}
.brand-stack .slogan{
  font-family:'Poppins',sans-serif; font-size:10.5px; letter-spacing:.7px;
  color:var(--muted); font-weight:400; margin-top:-2px;
}
@media(max-width:520px){
  .brand-stack .slogan{font-size:9px; letter-spacing:.4px}
}
.app-foot .foot-slogan{
  font-size:12.5px; color:var(--muted); font-weight:400;
  letter-spacing:.4px; margin-bottom:8px;
}

/* ---------- #/profil: Paket-E-Sektionen (Spiegel von check.html) ---------- */
.check-greet{
  font-family:'Dancing Script',cursive; font-size:30px; color:var(--green);
  line-height:1.1; margin-bottom:2px;
}
.pattern-list{list-style:none; margin:0}
.pattern-list li{font-size:14px; font-weight:300; line-height:1.6; padding:7px 0 7px 26px; position:relative}
.pattern-list li::before{
  content:'·'; position:absolute; left:6px; top:2px; color:var(--green);
  font-weight:700; font-size:22px; line-height:1;
}
.pitfall-list{list-style:none; margin:0}
.pitfall-list li{font-size:14px; font-weight:300; line-height:1.6; padding:7px 0 7px 26px; position:relative}
.pitfall-list li::before{content:'‹'; position:absolute; left:6px; color:var(--sage); font-weight:700}
.anchor-text{font-size:14.5px; font-weight:300; line-height:1.7; color:var(--ink)}
.anchor-lead{
  font-family:'Dancing Script',cursive; font-size:22px; color:var(--green);
  display:block; margin-bottom:6px;
}
.two-up{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
.two-up .check-card{margin-bottom:0}
@media(max-width:640px){ .two-up{grid-template-columns:1fr} }
.res-sub{font-size:13px; color:var(--muted); font-weight:300; margin:-6px 4px 12px}

/* Master-Empfehlung (nur bei works_with_people = yes|building) */
.master-card{background:linear-gradient(160deg,#2f4a2c,#4a6741); color:#f2f5ec; border:none}
.master-card .mk{
  font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:#cdd9be; font-weight:600;
}
.master-card h2{color:#fff; margin:6px 0 4px; font-size:20px; font-weight:700; line-height:1.25}
.master-card .mbody{font-size:14px; font-weight:300; line-height:1.65; color:#e7eddf}
.master-card .mbul{list-style:none; margin:14px 0 4px}
.master-card .mbul li{
  font-size:13.5px; font-weight:300; line-height:1.5;
  padding:5px 0 5px 24px; position:relative; color:#eef3e7;
}
.master-card .mbul li::before{content:'✓'; position:absolute; left:2px; color:#b9c9a6; font-weight:700}
.master-card .mprice{
  display:inline-block; margin:12px 0 16px; font-size:14px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.14); padding:7px 16px; border-radius:14px;
}
.master-card .btn-master{
  display:block; text-align:center; background:#f5f2e9; color:var(--green-deep);
  font-weight:600; padding:14px; border-radius:14px; text-decoration:none;
}
.master-card .btn-master:hover{background:#fff}

/* ---------- #/heute: Onboarding-Karte „Dein Weg" ---------- */
.weg-card{
  padding:22px 24px 18px; margin-bottom:22px;
  background:linear-gradient(160deg,#faf8f1 0%,var(--cream) 100%);
  border:1px solid rgba(138,158,118,.38);
}
.weg-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.weg-kicker{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:600; color:var(--green);
}
.weg-kicker .ic{width:16px; height:16px}
.weg-ttl{font-size:19px; font-weight:600; color:var(--green-deep); margin:6px 0 2px; line-height:1.25}
.weg-sub{font-size:13.5px; font-weight:300; color:var(--muted); line-height:1.6}
.weg-count{
  flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--green);
  background:rgba(74,103,65,.12); border-radius:14px; padding:6px 13px; white-space:nowrap;
}
.weg-steps{list-style:none; margin:16px 0 0; display:grid; gap:10px; counter-reset:none}
.weg-step{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.62); border:1px solid rgba(47,74,44,.08);
}
.weg-step.done{background:rgba(220,235,200,.5); border-color:rgba(138,158,118,.34)}
.ws-no{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
  background:rgba(74,103,65,.12); color:var(--green-deep);
}
.weg-step.done .ws-no{background:var(--green); color:var(--cream)}
.weg-step.done .ws-no .ic{width:18px; height:18px}
.ws-body{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0}
.ws-ttl{font-size:15px; font-weight:600; color:var(--ink); line-height:1.3}
.weg-step.done .ws-ttl{color:var(--green-deep)}
.ws-sub{font-size:13px; font-weight:300; color:var(--muted); line-height:1.55}
.ws-go{flex:0 0 auto; white-space:nowrap}
.ws-state{
  flex:0 0 auto; font-size:12px; font-weight:500; color:var(--green);
  letter-spacing:.3px; white-space:nowrap;
}
@media(max-width:620px){
  .weg-card{padding:18px 16px 16px}
  .weg-head{flex-direction:column; gap:8px}
  .weg-step{flex-wrap:wrap; row-gap:10px}
  .ws-go{width:100%; text-align:center}
}

/* ---------- E2E-Fix 27.07.: hidden-Attribut schlaegt Komponenten-Display ----------
   `.btn` setzt `display:inline-flex`, das gewinnt gegen das `display:none` des
   Browser-Stylesheets fuer `[hidden]`. Folge: Knoepfe, die per `el.hidden = true`
   ausgeblendet werden (z. B. „Mehr laden" im Admin-Tab Nachrichten, die
   Galerie-Pfeile bei einem einzelnen Slide), blieben sichtbar.
   Eine globale Regel statt einer Sonderregel je Komponente. */
[hidden]{display:none !important}

/* ---------- E2E-Fix 27.07.: Kopfzeile bricht auf schmalen Viewports um ----------
   Auf 375px passten Wortmarke (194px) und die rechte Navigation nicht neben-
   einander, sobald ein Admin-Konto den zusaetzlichen Knopf „Admin" sieht:
   die Zeile lief auf 436px und die ganze Seite scrollte waagrecht.
   Statt etwas auszublenden (der Slogan unter der Wortmarke ist gefordert)
   darf die Kopfzeile jetzt umbrechen, die Navigation bleibt rechtsbuendig. */
@media(max-width:560px){
  .topbar{flex-wrap:wrap; row-gap:8px; column-gap:10px}
  .topbar-right{gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto}
  .topbar-right .btn-mini{padding:6px 11px}
}

/* ---------- Ausbildung in Raten (27.07.) ----------
   Die vierte Karte auf #/upgrade benutzt bewusst dieselbe .up-master-Struktur
   wie die Ausbildungs-Karte (flex mit flex-wrap, CTA-Spalte 220px, unter 560px
   volle Breite). Damit gibt es auf dem Handy keinen neuen Umbruchfall: die
   Karten stapeln sich untereinander, jede Karte wird selbst einspaltig.
   Hier nur die optische Abgrenzung, KEINE neuen Breiten. */
.up-master-rate{margin-top:14px; background:rgba(255,255,255,.58);
  border-style:dashed; border-color:rgba(138,158,118,.65)}
.up-master-rate .up-master-h{color:var(--green)}

/* Hinweis-Zeile in der Ausbildungs-Karte, solange kein Raten-Link gepflegt ist */
.up-master-txt .up-note-sm{margin-top:8px}

/* Admin, Tab Pakete: Notiz-Spalte der Ratenzahlungen darf lang werden, muss
   aber umbrechen statt die Tabelle waagrecht aufzublasen. */
.raten-note{font-size:12.5px; line-height:1.5; color:var(--muted);
  max-width:340px; white-space:normal; word-break:break-word}

/* ---------- Abschluss-Moment nach der Session (B44) ----------
   Bis hierher lief das Audio auf 'ended' und im DOM aenderte sich nichts.
   Bewusst ruhig gehalten: keine Konfetti-Geste, sondern eine warme Notiz im
   Cream-Ton der Marke. Die drei Antworten sind gleichwertig gestaltet, damit
   die Gestaltung keine Antwort nahelegt. */
.outro{
  margin-top:22px; padding:22px 20px 20px; border-radius:20px;
  background:rgba(255,255,255,.62); border:1px solid rgba(138,158,118,.5);
  text-align:center; animation:outro-in .5s ease-out both;
}
@keyframes outro-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.outro-script{
  font-family:'Dancing Script',cursive; font-size:27px; line-height:1.25;
  color:var(--green-deep); margin:0;
}
.outro-mins{font-size:14px; line-height:1.6; color:var(--muted); margin:8px 0 0}
.outro-ask{margin-top:16px}
.outro-q{font-size:14.5px; font-weight:500; color:var(--green-deep); margin:0 0 10px}
.outro-taps{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.outro-tap{
  font-family:inherit; font-size:14px; cursor:pointer; transition:.18s;
  padding:9px 18px; border-radius:22px; background:transparent;
  color:var(--green-deep); border:1.5px solid var(--sage);
}
.outro-tap:hover{background:var(--sage-light); border-color:var(--green)}
.outro-tap:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.outro-tap[disabled]{opacity:.55; cursor:default}
.outro-danke{color:var(--muted); font-weight:400; margin:0}
.outro-hint{font-size:13px; color:var(--muted); margin:10px 0 0}
@media(prefers-reduced-motion:reduce){.outro{animation:none}}
.outro-cta{margin-top:18px; background:var(--green-deep); color:var(--cream)}
.outro-cta:hover{background:var(--green)}

/* ============ Abzeichen-Seite (#/abzeichen), Founder 28.07. ============ */
.abz-next{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 22px; border-radius:var(--radius); margin-bottom:26px;
}
.abz-next-ic{flex:0 0 auto}
.abz-next-txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.abz-next-kick{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage); font-weight:600;
}
.abz-next-ttl{font-size:18px; font-weight:600; color:var(--green-deep)}
.abz-next-hint{font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.55}
.abz-next .prog-bar{margin-top:8px}

.abz-teaser{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  border-radius:var(--radius); transition:.2s ease;
}
.abz-teaser:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft)}
.abz-teaser-ic{display:flex; gap:-6px}
.abz-teaser-ic .badge-circle{margin-right:-10px}
.abz-teaser-txt{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.abz-teaser-txt b{color:var(--green-deep); font-size:15.5px; font-weight:600}
.abz-teaser-txt span{color:var(--muted); font-size:14px; font-weight:300}
.abz-teaser-pfeil{color:var(--sage); flex:0 0 auto}

.empty-card{padding:26px 22px; text-align:center; display:flex;
  flex-direction:column; gap:16px; align-items:center}
.empty-card p{color:var(--muted); font-weight:300; max-width:44ch; line-height:1.6}

@media(max-width:520px){
  .abz-next{flex-direction:column; gap:12px}
}