/*
 * hj-member App-Schale — Komponenten-Bibliothek (aus infra/design/prototype.html,
 * Design-System infra/DESIGN.md). ALLE Regeln sind unter `.hjm-app` gescopt, damit sie
 * nicht mit dem WP-Theme kollidieren. Nur der Member-Teil (NICHT die Coach-Konsole = Modul D),
 * ohne das Prototyp-Demo-Chrome (Telefonrahmen/Statusbar/Toolbar). Font Mulish wird spaeter
 * lokal gebuendelt (Etappe 3); vorerst System-Fallback.
 */
:root {
  --navy:#10155F; --navy-2:#232a7a; --navy-soft:#3a4290;
  --green:#6FCE78; --green-d:#4fae5c;
  --teal:#15779B; --tint:#EDF4FF; --tint-2:#F2F6FF;
  --red:#E92020; --amber:#F5A623;
  --bg:#F8FAFB; --ink:#2b2b2b; --muted:#69727D; --muted-2:#98a0ab;
  --line:#E8ECF1; --line-2:#EEF1F5; --card:#FFFFFF;
  --shadow:0 10px 30px rgba(16,21,95,.08);
  --shadow-sm:0 4px 14px rgba(16,21,95,.06);
  --r:18px; --r-sm:12px;
  --font:'Mulish', system-ui, -apple-system, sans-serif;
}

.hjm-app { font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(111,206,120,.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(21,119,155,.10), transparent 55%),
    #eef1f6;
  min-height:100vh;
}
.hjm-app *, .hjm-app *::before, .hjm-app *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.hjm-app button { font-family:inherit; }

/* App-Rahmen: mobil full-width, Desktop zentrierte Spalte */
.hjm-frame {
  max-width:460px; margin:0 auto; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow);
}

/* Kopfzeile */
.apphead { position:sticky; top:0; z-index:20; background:var(--bg); padding:12px 20px;
  display:flex; align-items:center; gap:12px; min-height:56px; border-bottom:1px solid var(--line-2); }
.apphead .back { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff;
  display:none; place-items:center; cursor:pointer; color:var(--navy); font-size:17px; flex:none; }
.apphead .back.show { display:grid; }
.apphead h2 { font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.3px; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.apphead .av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--navy));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; cursor:pointer; flex:none; border:0; }
.apphead .bell { position:relative; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:#fff; display:grid; place-items:center; cursor:pointer; font-size:16px; flex:none; }
.apphead .bell .notif-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:800; line-height:16px;
  text-align:center; box-shadow:0 0 0 2px var(--bg); }
/* Feed-Zeile: ungelesene fett + Punkt-Markierung rechts. */
.list .li.notif .tx b { font-weight:700; }
.list .li.notif.unread { background:var(--tint-2); }
.list .li.notif .notif-dot { width:9px; height:9px; border-radius:50%; background:var(--red); flex:none; align-self:center; }
/* „Neues"-Banner auf der Startseite: prominenter, antippbarer Hinweis auf neue 1:1-Inhalte. */
.new-banner { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  border:0; border-radius:16px; padding:14px 16px; margin:0 0 12px;
  background:linear-gradient(135deg,var(--green),var(--green-d)); color:#fff;
  box-shadow:0 6px 18px rgba(111,206,120,.35); }
.new-banner .nb-ic { font-size:22px; flex:none; }
.new-banner .nb-tx { flex:1; min-width:0; display:flex; flex-direction:column; }
.new-banner .nb-tx b { font-size:15px; font-weight:800; }
.new-banner .nb-tx span { font-size:12px; font-weight:600; opacity:.9; }
.new-banner .nb-chev { font-size:22px; flex:none; }
/* „Mein 1:1"-Tab: kleiner roter Punkt bei ungelesenem Neuem (nutzt .lockdot-Positionierung). */
.tabbar button .newdot { font-size:9px; }

/* Scroll-Bereich + Screens */
.app { flex:1; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; }
.screen { display:none; padding:8px 20px 30px; animation:hjm-fade .25s ease; }
.screen.active { display:block; }
@keyframes hjm-fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .screen{ animation:none; } }

/* Bottom-Tabs */
.tabbar { flex:none; display:flex; background:#fff; border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom)); position:sticky; bottom:0; z-index:20; }
.tabbar button { flex:1; border:0; background:transparent; display:flex; flex-direction:column; align-items:center;
  gap:3px; font-size:10px; font-weight:700; color:var(--muted-2); cursor:pointer; padding:4px 0; position:relative; }
.tabbar button .ic { width:24px; height:24px; display:grid; place-items:center; font-size:19px; line-height:1; }
.tabbar button.active { color:var(--navy); }
.tabbar button .lockdot { position:absolute; top:2px; right:calc(50% - 18px); font-size:10px; }

/* Karten & Struktur */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow-sm); }
.card + .card { margin-top:12px; }
.sec-title { font-size:13px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.6px;
  margin:22px 2px 10px; display:flex; align-items:center; justify-content:space-between; }
.sec-title a { font-size:12px; color:var(--teal); text-transform:none; letter-spacing:0; cursor:pointer; font-weight:700; }
.muted { color:var(--muted); }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }

/* Pills / Badges */
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:11px;
  font-weight:800; background:var(--tint); color:var(--navy); }
.pill.green { background:rgba(111,206,120,.18); color:var(--green-d); }
.pill.red { background:rgba(233,32,32,.12); color:var(--red); }
.pill.amber { background:rgba(245,166,35,.16); color:#b9791b; }
.pill.teal { background:rgba(21,119,155,.14); color:var(--teal); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px;
  border-radius:14px; border:0; background:var(--navy); color:#fff; font-weight:800; font-size:15px; cursor:pointer;
  transition:.15s; box-shadow:0 8px 20px rgba(16,21,95,.22); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.6; cursor:default; }
.btn.green { background:linear-gradient(135deg,var(--green),var(--green-d)); box-shadow:0 8px 20px rgba(79,174,92,.3); }
.btn.ghost { background:#fff; color:var(--navy); border:1.5px solid var(--line); box-shadow:none; }
.btn.teal { background:var(--teal); box-shadow:0 8px 20px rgba(21,119,155,.25); }
.btn.sm { width:auto; padding:9px 16px; font-size:13px; border-radius:11px; }

/* Tiles */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile { border-radius:var(--r); padding:15px; cursor:pointer; position:relative; overflow:hidden; min-height:104px;
  display:flex; flex-direction:column; justify-content:space-between; transition:.15s; border:1px solid var(--line);
  background:#fff; box-shadow:var(--shadow-sm); text-align:left; }
.tile:active { transform:scale(.98); }
.tile .ic { font-size:24px; }
.tile .t { font-weight:800; font-size:14px; color:var(--navy); line-height:1.2; }
.tile .s { font-size:11px; color:var(--muted); font-weight:600; }
.tile.nav { background:linear-gradient(150deg,var(--navy),var(--navy-2)); border:0; }
.tile.nav .t, .tile.nav .s { color:#fff; } .tile.nav .s { color:rgba(255,255,255,.7); }
.tile.grn { background:linear-gradient(150deg,var(--green),var(--green-d)); border:0; }
.tile.grn .t, .tile.grn .s { color:#fff; } .tile.grn .s { color:rgba(255,255,255,.85); }
.tile.teal { background:linear-gradient(150deg,var(--teal),#0f5a77); border:0; }
.tile.teal .t, .tile.teal .s { color:#fff; } .tile.teal .s { color:rgba(255,255,255,.8); }
.tile .lockcorner { position:absolute; top:10px; right:12px; font-size:15px; opacity:.9; }

/* Listen */
.list .li { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-2);
  cursor:pointer; text-align:left; width:100%; background:none; border-left:0; border-right:0; border-top:0; }
.list .li:last-child { border-bottom:0; }
.li .ic { width:42px; height:42px; border-radius:12px; background:var(--tint); display:grid; place-items:center;
  font-size:20px; flex:none; color:var(--navy); }
.li .tx { flex:1; min-width:0; }
.li .tx b { display:block; font-size:14px; font-weight:800; color:var(--ink); }
.li .tx span { font-size:12px; color:var(--muted); font-weight:600; }
.li .chev { color:var(--muted-2); font-size:18px; }

/* Fortschritt / Ring / Thumb */
.progress { height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--green-d)); }
.thumb { aspect-ratio:16/9; border-radius:14px; background:linear-gradient(135deg,var(--navy),var(--teal));
  display:grid; place-items:center; color:#fff; position:relative; overflow:hidden; }
.thumb .play { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.9); display:grid;
  place-items:center; color:var(--navy); font-size:18px; padding-left:3px; }
.thumb .dur { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px;
  font-weight:700; padding:2px 7px; border-radius:6px; }
/* Kurs-Detail: Lektion + eingebetteter Vimeo-Player (responsiv 16:9). */
.lesson { margin:0 0 22px; }
.lesson-h { display:flex; align-items:center; gap:10px; margin:0 2px 8px; }
.lesson-n { flex:none; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff;
  font-size:13px; font-weight:800; display:grid; place-items:center; }
.lesson-h b { color:var(--navy); font-size:15px; font-weight:800; }
.lesson-dur { margin-left:auto; flex:none; font-size:12px; font-weight:700; }
/* Kapitel-Ueberschrift (Tutor-„Topic") ueber einer Lektionsgruppe. */
.lesson-sec { color:var(--navy); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  margin:6px 2px 12px; padding-bottom:6px; border-bottom:1px solid rgba(0,0,0,.08); }
.lesson-body { font-size:13px; }
.lesson-body p { margin:0 0 8px; }
.course-desc p { margin:0 0 10px; }
.course-desc :where(ul,ol) { margin:0 0 10px 18px; }
.vwrap { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--navy); }
.vwrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ring { --p:62; width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--green) calc(var(--p)*1%), rgba(255,255,255,.25) 0); display:grid; place-items:center; margin:0 auto; }
.ring .inner { width:96px; height:96px; border-radius:50%; background:var(--navy); display:grid; place-items:center;
  text-align:center; color:#fff; }
.ring .inner b { font-size:28px; font-weight:900; line-height:1; }
.ring .inner span { font-size:11px; opacity:.8; font-weight:700; }

/* Banner */
.banner { border-radius:var(--r); padding:18px; color:#fff; background:linear-gradient(135deg,var(--navy),var(--teal));
  box-shadow:var(--shadow); position:relative; overflow:hidden; }
.banner h3 { font-size:17px; font-weight:800; margin:0 0 5px; }
.banner p { font-size:12.5px; opacity:.9; line-height:1.5; margin:0 0 12px; }
.banner p:last-child { margin-bottom:0; }

/* Chat / Composer */
.chat { display:flex; flex-direction:column; gap:10px; padding:6px 2px; }
.bub { max-width:80%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.45; font-weight:500; }
.bub.them { background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; color:var(--ink); }
.bub.me { background:var(--navy); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.bub.ai { background:linear-gradient(135deg,var(--tint),#fff); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; }
.bub small { display:block; font-size:10px; opacity:.6; margin-top:3px; font-weight:700; }
.composer { display:flex; gap:8px; padding:10px 0 2px; align-items:center; }
.composer input { flex:1; border:1px solid var(--line); border-radius:999px; padding:12px 16px; font-size:14px; background:#fff; }
.composer input:focus { outline:2px solid var(--tint); }
.composer .send { width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; border:0; font-size:18px; cursor:pointer; flex:none; }

/* Felder */
.field { margin-bottom:13px; }
.field label { display:block; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:14px; background:#fff; color:var(--ink); font-family:inherit; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--tint); }

/* Stat / Alert / Spark / Check / Rate / Toggle / Steps / Subnav */
.stat { background:var(--tint-2); border-radius:14px; padding:13px; text-align:center; }
.stat b { display:block; font-size:22px; font-weight:900; color:var(--navy); line-height:1; }
.stat span { font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.alert { border-radius:14px; padding:13px 14px; font-size:12.5px; font-weight:600; line-height:1.5; display:flex; gap:10px; align-items:flex-start; }
.alert.red { background:rgba(233,32,32,.08); border:1px solid rgba(233,32,32,.25); color:#a51616; }
.alert.green { background:rgba(111,206,120,.12); border:1px solid rgba(111,206,120,.35); color:var(--green-d); }
.alert.info { background:var(--tint-2); border:1px solid var(--line); color:var(--muted); }
.alert .i { font-size:16px; flex:none; }
.spark { width:100%; height:70px; display:block; }
.check { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.check:last-child { border-bottom:0; }
.check .box { width:24px; height:24px; border-radius:8px; border:2px solid var(--line); flex:none; display:grid;
  place-items:center; cursor:pointer; color:#fff; font-size:13px; background:none; }
.check.done .box { background:var(--green); border-color:var(--green); }
.check.done .lbl { text-decoration:line-through; color:var(--muted); }
.check .lbl { font-size:14px; font-weight:700; flex:1; }
.rate { display:flex; gap:7px; }
.rate button { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff; font-weight:800; color:var(--muted); cursor:pointer; }
.rate button.on { background:var(--green); border-color:var(--green); color:#fff; }
.tog { width:44px; height:26px; border-radius:99px; background:var(--line); position:relative; cursor:pointer; flex:none; transition:.2s; border:0; }
.tog::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s; }
.tog.on { background:var(--green); } .tog.on::after { left:21px; }
.steps { display:flex; gap:6px; margin-bottom:14px; }
.steps i { flex:1; height:5px; border-radius:99px; background:var(--line); }
.steps i.on { background:var(--navy); }
.subnav { display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; margin:0 -2px; }
.subnav::-webkit-scrollbar { height:0; }
.subnav button { flex:none; border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 15px; font-weight:800; font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap; }
.subnav button.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.copanel { display:none; } .copanel.active { display:block; animation:hjm-fade .2s; }

/* Skeleton (Loading) — DESIGN.md §6 */
.skel { height:16px; border-radius:8px; margin:8px 0; background:linear-gradient(90deg,var(--line-2),var(--tint-2),var(--line-2));
  background-size:200% 100%; animation:hjm-shimmer 1.2s infinite; }
@keyframes hjm-shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){ .skel{ animation:none; } }

/* ---- Auth-Gating: Login nur bei "in", App-Rahmen nur bei "ok" (loading = neutral) ---- */
.hjm-login { display:none; }
.hjm-frame { display:none; }
.hjm-app[data-auth="in"] .hjm-login { display:flex; }
.hjm-app[data-auth="ok"] .hjm-frame { display:flex; }
.hjm-login { max-width:400px; margin:0 auto; padding:40px 20px; flex-direction:column; gap:14px; }
.hjm-login .brand { display:flex; align-items:center; gap:11px; margin-bottom:8px; }
.hjm-login .logo { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--navy),var(--teal));
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:16px; box-shadow:var(--shadow-sm); }
.hjm-login .brand h1 { font-size:21px; color:var(--navy); font-weight:800; margin:0; }

/* Marken-Kopf der Sidebar: nur im Desktop-Layout sichtbar (siehe @media unten). */
.side-brand { display:none; }

/* ---------- Tablet (600–899px): breitere Inhaltsspalte, weiterhin untere Tab-Leiste ----------
 * Schliesst die Luecke zwischen Handy-Spalte (<600px) und Desktop-Sidebar (>=900px):
 * auf dem Tablet fuellt die Spalte den Schirm statt schmaler 460px-Spalte mit Leerraum. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hjm-frame { max-width:720px; }
  .hjm-login { max-width:460px; }
  .apphead { padding:14px 32px; }
  .apphead h2 { font-size:21px; }
  .screen { padding:16px 32px 48px; }
  .grid2 { gap:16px; }
  .tile { min-height:118px; padding:18px; }
  .tile .ic { font-size:25px; }
  .sec-title { margin-top:22px; }
}

/* ---------- Desktop-Layout (>=900px): Phone-Spalte -> Sidebar + Inhaltsflaeche ----------
 * Rein additiv; Mobil (<900px) bleibt unangetastet. Die untere Tab-Leiste wird zur linken
 * Seitenleiste, der App-Rahmen zum Grid [Sidebar|Kopf] / [Sidebar|Inhalt]. */
@media (min-width: 900px) {
  /* Login vertikal zentriert */
  .hjm-login { justify-content:center; min-height:100vh; max-width:420px; }

  /* App-Rahmen -> Grid: [Sidebar | Kopf] / [Sidebar | Inhalt].
   * Selektor matcht die Auth-Regel (.hjm-app[data-auth="ok"] .hjm-frame{display:flex}),
   * sonst gewinnt deren höhere Spezifität und display:grid greift nicht. */
  .hjm-app[data-auth="ok"] .hjm-frame {
    max-width:none; width:100%; min-height:100vh; box-shadow:none; background:var(--bg);
    display:grid;
    grid-template-columns:264px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"side head" "side main";
  }

  /* Bottom-Tabs -> vertikale Seitenleiste */
  .tabbar {
    grid-area:side; position:static; flex-direction:column; justify-content:flex-start;
    gap:4px; padding:22px 16px; border-top:0; border-right:1px solid var(--line); background:#fff;
  }
  .side-brand { display:flex; align-items:center; gap:11px; margin:2px 8px 18px; }
  .side-brand .logo { width:40px; height:40px; border-radius:11px; flex:none;
    background:linear-gradient(135deg,var(--navy),var(--teal)); color:#fff; font-weight:900;
    font-size:14px; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
  .side-brand span { font-size:16px; font-weight:800; color:var(--navy); letter-spacing:-.2px; }
  .tabbar button {
    flex:none; flex-direction:row; justify-content:flex-start; align-items:center; gap:13px;
    width:100%; padding:12px 14px; border-radius:12px; font-size:14.5px; font-weight:800;
    color:var(--muted); text-align:left; transition:.15s;
  }
  .tabbar button .ic { width:24px; height:24px; font-size:20px; flex:none; }
  .tabbar button:hover { background:var(--tint-2); color:var(--navy); }
  .tabbar button.active { background:var(--tint); color:var(--navy); }
  .tabbar button .lockdot { position:static; top:auto; right:auto; margin-left:auto; }

  /* Kopfzeile über dem Inhalt (Seitentitel + Account) */
  .apphead { grid-area:head; padding:16px 40px; min-height:66px; background:var(--bg);
    border-bottom:1px solid var(--line-2); }
  .apphead h2 { font-size:22px; }

  /* Inhalts-Spalte: zentriert, begrenzte Lesebreite, Kacheln weiterhin 2-spaltig */
  .app { grid-area:main; }
  .screen { max-width:1040px; margin:0 auto; padding:28px 40px 60px; }
  .grid2 { gap:16px; }
  .tile { min-height:120px; padding:18px; }
  .tile .ic { font-size:26px; }
  .tile .t { font-size:15px; }
  .sec-title { margin-top:26px; }
}

/* Lexikon-Akkordeon: Begriff (.li) + aufklappbarer HTML-Inhalt (.lex-body). */
.lex-item { border-bottom:1px solid var(--line, #eef0f4); }
.lex-item:last-child { border-bottom:0; }
.lex-item .li.open .chev { transform:rotate(90deg); }
.lex-item .li .chev { transition:transform .15s ease; }
.lex-body { font-size:14px; line-height:1.5; }
.lex-body > :first-child { margin-top:0; }
.lex-body > :last-child { margin-bottom:0; }
.lex-body img { max-width:100%; height:auto; }

/* ---------- Onboarding-Ausbau: Gate-Views, Formulare, Toggle, Legal, Lesezeichen, Dialog ---------- */

/* Login-/Registrier-/Pending-Umschaltung im Auth-Gate */
.hjm-login .gate-view { display:none; flex-direction:column; gap:14px; width:100%; }
.hjm-login[data-mode="login"]    .gate-view[data-view="login"],
.hjm-login[data-mode="register"] .gate-view[data-view="register"],
.hjm-login[data-mode="pending"]  .gate-view[data-view="pending"],
.hjm-login[data-mode="forgot"]   .gate-view[data-view="forgot"],
.hjm-login[data-mode="reset"]    .gate-view[data-view="reset"] { display:flex; }
.gate-link { color:var(--teal); font-weight:800; text-decoration:none; }
.gate-link:hover { text-decoration:underline; }

/* Zwei-Spalten-Feldzeile in Formularen */
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.row2 .field { margin-bottom:13px; }

/* Inline-Zustimmungs-Checkbox (AGB/Datenschutz) */
.term-check { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--muted);
  font-weight:600; line-height:1.45; margin:2px 0 13px; }
.term-check input { width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--green); }
.term-check a { color:var(--teal); font-weight:800; text-decoration:none; }
.term-check a:hover { text-decoration:underline; }

/* An/Aus-Schalter (Newsletter) */
.switch { position:relative; width:46px; height:27px; border-radius:999px; border:0; flex:none;
  background:var(--line); cursor:pointer; transition:background .18s ease; padding:0; }
.switch .knob { position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(16,21,95,.25); transition:transform .18s ease; }
.switch[aria-checked="true"] { background:var(--green); }
.switch[aria-checked="true"] .knob { transform:translateX(19px); }
.switch:disabled { opacity:.5; cursor:default; }

/* Rechtstext-Reader */
.legal-doc .card { line-height:1.6; font-size:14px; color:var(--ink); }
.legal-doc h1, .legal-doc h2, .legal-doc h3 { color:var(--navy); margin:16px 0 8px; line-height:1.3; }
.legal-doc h1 { font-size:19px; } .legal-doc h2 { font-size:16px; } .legal-doc h3 { font-size:14px; }
.legal-doc p { margin:0 0 10px; } .legal-doc ul, .legal-doc ol { margin:0 0 10px 18px; }
.legal-doc a { color:var(--teal); }
.legal-meta { font-size:11px; color:var(--muted-2); font-weight:700; margin-top:14px; }

/* Lesezeichen-Button in Listenzeilen */
.li .bm { flex:none; border:0; background:none; cursor:pointer; font-size:19px; line-height:1;
  color:var(--muted-2); padding:4px; border-radius:8px; }
.li .bm.on { color:var(--amber); }
.li .bm:hover { background:var(--tint-2); }

/* Bestätigungs-Dialog ("Bist du sicher?") */
.hjm-modal { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(16,21,95,.45); padding:24px; }
.hjm-modal[hidden] { display:none; }
.hjm-modal .box { background:#fff; border-radius:var(--r); padding:22px; max-width:340px; width:100%;
  box-shadow:var(--shadow); text-align:center; }
.hjm-modal h4 { color:var(--navy); font-size:17px; margin:0 0 8px; }
.hjm-modal p { color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 18px; }
.hjm-modal .actions { display:flex; gap:10px; }
.hjm-modal .actions .btn { padding:12px; }
.field textarea { resize:vertical; min-height:44px; font-family:inherit; }

/* „Coming soon"-Kachel (z. B. Fragecenter): ausgegraut, nicht interaktiv */
.tile.soon { opacity:.6; filter:grayscale(.5); cursor:default; }
.tile.soon:active { transform:none; }
.tile .soon-badge { position:absolute; top:8px; right:8px; font-size:9px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; background:var(--muted-2); color:#fff;
  padding:2px 6px; border-radius:6px; }