/* =====================================================================================
 * Coaching (App 2. Version, Paket P8): Übersicht, Mein 1:1 mit Thumbnails, Daily Check als Fenster,
 * Chat als Vollbild mit „Frage zu …". Nur Tokens aus app.css (Dunkelmodus), feste Farben nur in den
 * Thumbnails (Bild-Verlauf) und in den Daily-Check-Symbolen (hell/dunkel liegen beide im HTML).
 * ===================================================================================== */

/* ---------- Kopf: „Dein Coach …" mit Bild ---------- */
.hj-kopf--coaching .hj-kopf__inhalt { position:relative; padding-right:64px; }
.co-kopf-av { position:absolute; right:0; top:2px; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-size:20px; font-weight:800; color:#fff; background:linear-gradient(135deg,#2F3C99,#62C3DC); border:2px solid rgba(255,255,255,.5); }
.co-kopf-av[hidden] { display:none; }

/* ---------- Übersicht ---------- */
.co-kick { display:block; font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--teal); }
.co-ic { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; flex:none; background:var(--tint); color:var(--navy); }
.co-ic .hji { width:20px; height:20px; }
.co-termin { display:flex; flex-direction:column; gap:12px; }
.co-termin__z { display:flex; gap:12px; align-items:flex-start; }
.co-termin__tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.co-termin__tx b { font-size:16px; color:var(--navy); }
.co-termin__tx small { font-size:12.5px; font-weight:600; color:var(--muted); }
.co-knoepfe { display:flex; gap:10px; flex-wrap:wrap; }
.co-knoepfe .btn { flex:1 1 0; margin:0; }
.co-knoepfe.klein { gap:16px; }
.co-link { border:0; background:none; padding:0; font:inherit; font-size:13px; font-weight:800; color:var(--teal-t); cursor:pointer; text-decoration:none; }
.co-buchen { margin:0; }
.co-klein { margin:0; font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.co-rb { display:flex; flex-direction:column; gap:4px; }
.co-rb__kopf b { display:block; font-size:16px; color:var(--navy); margin-top:2px; }
.co-zitat { display:flex; gap:10px; margin-top:10px; align-items:flex-start; }
.co-zitat p { margin:0; padding:10px 12px; background:var(--card2); border-radius:6px 16px 16px 16px; font-size:14px; line-height:1.45; color:var(--ink); }
.co-zitat p small { display:block; margin-top:4px; font-size:11.5px; font-weight:700; color:var(--muted); }
.co-av { display:grid; place-items:center; flex:none; border-radius:50%; font-weight:800; color:#fff; background:linear-gradient(135deg,#2F3C99,#62C3DC); }
.co-av.klein { width:34px; height:34px; font-size:14px; }
.co-sub { margin:14px 0 6px; font-size:13px; font-weight:800; color:var(--navy); }
.co-rb__tage { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.co-rb__tag { display:flex; flex-direction:column; align-items:center; gap:4px; }
.co-rb__tag small { font-size:11px; font-weight:700; color:var(--muted); }
.co-rb__tag i { width:24px; height:24px; border-radius:50%; border:2px dashed var(--line); box-sizing:border-box; }
.co-rb__tag.voll i { background:var(--navy); border:2px solid var(--navy); }
.co-rb__tag.teilweise i { background:var(--tint); border:2px solid var(--navy); }
.co-rb__tag.zukunft i { border-style:solid; border-color:transparent; background:var(--card2); opacity:.6; }
.co-pills { display:flex; flex-wrap:wrap; gap:8px; }
.co-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:16px; background:var(--tint); color:var(--navy); font-size:13px; font-weight:800; }
.co-leer { flex-direction:row; gap:12px; align-items:flex-start; }
.co-leer > span:last-child { display:flex; flex-direction:column; gap:3px; }
.co-leer b { color:var(--navy); }
.co-leer small { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.co-uebersicht { display:flex; flex-direction:column; gap:12px; }
.co-uebersicht > .card, .co-uebersicht > div > .card { margin:0; }

/* ---------- Thumbnail-Baukasten (Thumbnail-Paket 18.10., Varianten A und Foto) ---------- */
.th { overflow-wrap:break-word; container-type:inline-size; width:100%; max-width:100%; font-family:var(--font); -webkit-font-smoothing:antialiased; }
.th-in { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:max(14px, 4.4cqw); isolation:isolate; }
.th.r1610 .th-in { aspect-ratio:16/10; }
.th.r43 .th-in { aspect-ratio:4/3; border-radius:18px; }
.th .hji { fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; overflow:visible; display:block; }
.th .hji.mono { --ic-acc:currentColor; }
.th-a .th-in { background:linear-gradient(115deg, var(--ta) 0%, var(--tb) 100%); color:#fff; --ic-acc:url(#hjg-d); }
.th-a .th-glow { position:absolute; right:-14cqw; top:-26cqw; width:70cqw; height:70cqw; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%); }
.th-a .th-wm { position:absolute; right:-6cqw; bottom:-4cqw; width:56cqw; height:56cqw; color:#fff; opacity:.16; --ic-acc:#fff; stroke-width:1.2; }
.th-a .th-kachel { position:absolute; left:5cqw; top:5cqw; width:13cqw; height:13cqw; border-radius:4.4cqw; display:grid; place-items:center;
  background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); z-index:2; }
.th-a .th-kachel .hji { width:7.2cqw; height:7.2cqw; color:#fff; }
.th-dauer { position:absolute; z-index:2; right:5cqw; bottom:5cqw; display:inline-flex; align-items:center; gap:.35em; font-weight:800;
  font-size:max(10px, 3.5cqw); line-height:1; padding:.5em .75em .5em .6em; border-radius:999px; background:rgba(16,21,95,.55); color:#fff; }
.th-dauer .hji { width:.95em; height:.95em; }
.th-d .th-foto { position:absolute; inset:0; background-size:cover; background-position:center; }
.th-d .th-schleier { position:absolute; inset:0; background:
  linear-gradient(100deg, color-mix(in srgb, var(--ta) 90%, transparent) 0%, color-mix(in srgb, var(--ta) 66%, transparent) 30%,
  color-mix(in srgb, var(--ta) 18%, transparent) 58%, transparent 78%),
  linear-gradient(0deg, color-mix(in srgb, var(--ta) 45%, transparent) 0%, transparent 45%); }
.th-d .th-kachel { background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.th-a .th-txt { position:absolute; z-index:2; left:5cqw; right:26cqw; bottom:5cqw; display:flex; flex-direction:column; gap:1.4cqw; }
.th-a .th-txt small { font-size:max(9px, 3.3cqw); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.th-a .th-txt b { font-size:7cqw; line-height:1.12; font-weight:800; letter-spacing:-.02em; text-wrap:balance; color:#fff;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Klein (Kursliste 96 px, Lektionen 76 px, Paket 7): nur Motiv und Symbolkachel (Thumbnail-Paket). */
@container (max-width: 160px) {
  .th-in { border-radius:14px; }
  .th-a .th-txt, .th-a .th-dauer { display:none; }
  .th-a .th-kachel { display:none; }
  .th-d .th-kachel { display:grid; left:7cqw; top:7cqw; width:30cqw; height:30cqw; border-radius:10cqw; }
  .th-d .th-kachel .hji { width:18cqw; height:18cqw; }
  .th-d .th-schleier { background:linear-gradient(135deg, color-mix(in srgb, var(--ta) 55%, transparent) 0%, transparent 45%); }
  .th-a .th-wm { right:auto; bottom:auto; left:50%; top:50%; width:44cqw; height:44cqw; transform:translate(-50%,-50%); opacity:1; --ic-acc:url(#hjg-d); stroke-width:1.5; }
  .th-a .th-glow { right:-30cqw; top:-50cqw; width:110cqw; height:110cqw; }
}

/* ---------- Mein 1:1 ---------- */
.co-hinweis { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--muted); }
.co-vids { display:grid; grid-template-columns:1fr; gap:12px; }
.co-vid-item { display:flex; flex-direction:column; gap:8px; }
.co-vid { position:relative; display:flex; flex-direction:column; gap:8px; width:100%; padding:10px; border-radius:22px; border:var(--card-border);
  background:var(--card); box-shadow:var(--shadow-card); text-align:left; font-family:inherit; cursor:pointer; color:var(--ink); }
.co-vid__bild { display:block; }
.co-vid__tx { display:flex; flex-direction:column; gap:2px; padding:0 4px 2px; }
.co-vid__tx small { font-size:12px; font-weight:600; color:var(--muted); }
.co-neu { position:absolute; top:18px; right:18px; z-index:3; font-size:11px; font-weight:800; color:var(--rose-t); background:var(--rose-100);
  padding:3px 9px; border-radius:10px; }
@media (min-width:700px) { .co-vids { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- Chat: Vollbild wie bei WhatsApp (Telefon) ---------- */
.cochat-bar { display:none; align-items:center; gap:10px; padding:10px 14px 12px; color:#fff;
  background:linear-gradient(120deg,#10155F 0%,#15779B 100%); }
.cochat-bar__zur { width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  display:grid; place-items:center; cursor:pointer; flex:none; }
.cochat-bar__zur .hji { width:20px; height:20px; --ic-acc:currentColor; }
.cochat-bar__tx { display:flex; flex-direction:column; min-width:0; }
.cochat-bar__tx b { font-size:16.5px; color:#fff; }
.cochat-bar__tx small { font-size:12px; font-weight:600; color:rgba(255,255,255,.82); }
.hjm-frame[data-chat="1"] .cochat-bar { display:flex; border-radius:var(--r) var(--r) 0 0; }
@media (max-width:899.98px) {
  .hjm-frame[data-chat="1"] .apphead, .hjm-frame[data-chat="1"] #a-tabs, .hjm-frame[data-chat="1"] .hj-kopf { display:none !important; }
  /* Tastatur (Fabio 15, J1): --hj-vv-oben und --hj-tastatur misst app.js (tastaturWaechter) am
     visualViewport. Der Kopf bleibt oben im sichtbaren Ausschnitt, die Eingabe sitzt direkt auf
     der Tastatur, nur der Verlauf dazwischen scrollt. */
  .hjm-frame[data-chat="1"] .cochat-bar { position:fixed; z-index:45; top:var(--hj-vv-oben, 0px); left:0; right:0; border-radius:0 0 22px 22px;
    padding-top:calc(env(safe-area-inset-top, 0px) + 10px); box-shadow:0 8px 24px -12px rgba(16,21,95,.5); }
  .hjm-frame[data-chat="1"] .cochat { position:fixed; z-index:40; left:0; right:0; bottom:var(--hj-tastatur, 0px);
    top:calc(var(--hj-vv-oben, 0px) + env(safe-area-inset-top, 0px) + 62px); height:auto !important; min-height:0; border:0; border-radius:0; box-shadow:none; }
  .hjm-frame[data-chat="1"] .cochat-compose { padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* Bei offener Tastatur keine Safe-Area unten (sonst weisser Streifen ueber der Tastatur) und
     keine Menueleiste. */
  html.hj-tastatur-offen .hjm-frame[data-chat="1"] .cochat-compose { padding-bottom:10px; }
  html.hj-tastatur-offen #a-tabs { display:none !important; }
}
.cochat-plus { width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--tint); color:var(--navy);
  display:grid; place-items:center; cursor:pointer; flex:none; }
.cochat-plus:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.cochat-chip { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 10px; padding:6px 6px 6px 10px; border-radius:12px;
  background:var(--tint); font-size:12.5px; font-weight:800; color:var(--navy); }
.cochat-chip[hidden] { display:none; }
.cochat-chip button { border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; color:var(--navy); padding:2px 6px; }
.co-bezug { display:flex; gap:10px; align-items:center; margin:-1px -3px 7px; padding:8px 10px; border-radius:12px;
  background:var(--tint); border-left:3px solid var(--teal); color:var(--ink); }
.comsg.from-member .co-bezug { background:rgba(255,255,255,.14); border-left-color:#62C3DC; color:#fff; }
.co-bezug .hji { width:18px; height:18px; flex:none; }
.comsg.from-member .co-bezug .hji { --ic-acc:currentColor; }
.co-bezug > span { display:flex; flex-direction:column; min-width:0; }
.co-bezug small { font-size:11px; opacity:.85; font-weight:700; }
.co-bezug b { font-size:13px; color:inherit; }

/* Blatt „Frage zu …" */
.co-blatt { position:fixed; inset:0; z-index:80; background:rgba(11,14,38,.45); display:flex; align-items:flex-end; justify-content:center; }
.co-blatt[hidden] { display:none; }
.co-blatt__f { width:min(480px,100%); box-sizing:border-box; background:var(--bg); color:var(--ink); border-radius:26px 26px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:10px; max-height:85vh; max-height:85dvh; overflow:auto; }
.co-blatt__griff { width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 4px; }
.co-blatt__kopf { display:flex; align-items:center; gap:8px; }
.co-blatt__kopf b { flex:1; font-size:18px; color:var(--navy); }
.co-blatt p { margin:0; font-size:13.5px; line-height:1.45; }
.co-blatt .card { margin:0; }
.co-x { width:36px; height:36px; border-radius:50%; border:0; background:var(--card2); color:var(--navy); font-size:20px; line-height:1;
  display:grid; place-items:center; cursor:pointer; flex:none; }
.co-x .hji { width:18px; height:18px; }

/* ---------- Daily Check: Reiter ---------- */
.dcr { display:flex; flex-direction:column; gap:12px; }
.dcr .card { margin:0; }
.dcr-heute { display:flex; align-items:center; gap:12px; }
.dcr-heute__tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dcr-heute__tx b { font-size:16px; color:var(--navy); }
.dcr-heute__tx small { font-size:12.5px; font-weight:600; color:var(--muted); }
.dcr-heute .btn { flex:none; margin:0; width:auto; padding-left:20px; padding-right:20px; }
.dcr-heute.offen { background:linear-gradient(120deg,#10155F,#15779B); border-color:transparent; }
.dcr-heute.offen b, .dcr-heute.offen small { color:#fff; }
.dcr-heute.offen small { opacity:.88; }
.dcr-heute.offen .co-ic { background:rgba(255,255,255,.16); color:#fff; }
.dcr-heute.offen .co-ic .hji { --ic-acc:currentColor; }
.dcr-heute.offen .btn { background:#fff; color:#10155F; border-color:#fff; }
.dcr-sec { display:flex; align-items:baseline; justify-content:space-between; margin:6px 2px -2px; }
.dcr-sec h3 { margin:0; font-size:19px; font-weight:800; color:var(--navy); }
.dcr-sec small { font-size:13px; font-weight:600; color:var(--muted); }
.dcr-tafel { display:grid; grid-template-columns:72px repeat(7,minmax(0,1fr)); gap:4px 3px; align-items:center; }
.dcr-tafel > b { font-size:12px; color:var(--navy); }
.dcr-t { display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:none; font:inherit; cursor:pointer; padding:0; color:var(--ink); }
.dcr-t small { font-size:11px; font-weight:700; color:var(--muted); }
.dcr-t span { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:800; box-sizing:border-box;
  border:2px dashed var(--line); color:var(--muted); position:relative; }
.dcr-t.voll span { background:var(--navy); border:2px solid var(--navy); color:var(--card); }
.dcr-t.teilweise span { background:var(--tint); border:2px solid var(--navy); color:var(--navy); }
.dcr-t.heute span { border:2px solid var(--teal); color:var(--teal-t); }
.dcr-t.heute.voll span { background:var(--navy); color:var(--card); }
.dcr-t.nach span::after { content:""; position:absolute; right:-2px; top:-2px; width:8px; height:8px; border-radius:2px; background:var(--teal); border:2px solid var(--card); }
.dcr-z { height:30px; border-radius:9px; background:var(--card2); display:grid; place-items:center; color:var(--navy); font-size:12.5px; font-weight:800; }
.dcr-z.leer { background:transparent; border:1.5px dashed var(--line); box-sizing:border-box; }
.dcr-z .dcs-ic svg { width:22px; height:22px; }
.dcr-z .dc-bristol svg { width:28px; height:15px; }
.dcr-fuss { margin:10px 0 0; font-size:12.5px; font-weight:600; color:var(--muted); }
.dcr-notiz small { font-size:12px; font-weight:800; color:var(--muted); }
.dcr-notiz p { margin:3px 0 0; font-size:14.5px; line-height:1.45; color:var(--ink); }
.dcr-notiz + .dcr-notiz { border-top:1px solid var(--line); padding-top:10px; margin-top:10px; }
.dcr .dc-kal { margin:0; }
/* Kalender: voll und Luecke deutlich unterscheidbar (06_Coaching.md, Fehler fuer dich). */
.dcr .dc-p { width:10px; height:10px; opacity:1; }

/* ---------- Daily Check: Fenster ueber der verschwommenen App ---------- */
.dcf { position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px;
  box-sizing:border-box; background:rgba(16,21,95,.28); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.dcf[hidden] { display:none; }
.dcf-karte { width:min(440px,100%); max-height:calc(100% - 24px); overflow:auto; box-sizing:border-box; background:var(--card); color:var(--ink);
  border-radius:26px; padding:16px 16px 18px; box-shadow:0 24px 60px -20px rgba(11,18,32,.5); }
.dcf-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.dcf-kopf .dc-kopf { margin:0; flex:1; }
.dcf .dc-schirm { box-shadow:none; border:0; padding:0; margin:0; background:transparent; }
.dcf .dc-kal-knopf { display:none; }
html.dcf-offen, html.co-blatt-offen { overflow:hidden; }
/* Feste Hoehe fuer den Fragenblock: zweizeilige Fragen lassen die Skala nicht springen. */
.dcf .dc-frage { min-height:3.6em; }
.dcf .dc-frage b { text-wrap:balance; }
/* Die fuenf Symbole sind die Skala, darunter die Zahl bzw. das Wort. */
.dcs-skala { display:flex; gap:6px; }
.dcs-skala button { flex:1; min-width:0; font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card2); color:var(--navy);
  border-radius:14px; padding:10px 2px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.dcs-skala button em { font-style:normal; font-size:12px; font-weight:800; line-height:1.15; color:var(--muted); text-align:center; }
.dcs-skala button.on { border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); background:var(--card); }
.dcs-skala button.on em { color:var(--navy); }
.dcs-skala button[disabled] { cursor:default; }
.dcs-ic { display:inline-grid; place-items:center; }
.dcs-ic svg { display:block; width:34px; height:34px; }
.dcs-ic .d { display:none; }
html[data-theme="dark"] .dcs-ic .h { display:none; }
html[data-theme="dark"] .dcs-ic .d { display:block; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .dcs-ic .h { display:none; } html:not([data-theme="light"]) .dcs-ic .d { display:block; } }
/* Stuhlgang: Punktreihe 0 bis 6+, ein Tipp */
.dcs-punkte button { padding:12px 0 8px; }
.dcs-punkte i { width:16px; height:16px; border-radius:50%; border:1.8px solid currentColor; display:block; box-sizing:border-box; }
.dcs-punkte button.on i { background:currentColor; }
/* Antworten ansehen: alle Antworten auf einer Seite */
.dcl-liste { display:flex; flex-direction:column; }
.dcl-z { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:10px; padding:9px 2px; border:0; border-bottom:1px solid var(--line);
  background:none; font:inherit; text-align:left; color:var(--ink); cursor:pointer; width:100%; }
.dcl-z:last-child { border-bottom:0; }
.dcl-z .sym { width:34px; height:34px; display:grid; place-items:center; color:var(--navy); }
.dcl-z .sym .dcs-ic svg { width:30px; height:30px; }
.dcl-z .sym .dcl-ic .hji { width:26px; height:26px; }
.dcl-z small { display:block; font-size:12px; font-weight:700; color:var(--muted); }
.dcl-z b { font-size:14.5px; color:var(--navy); }
.dcl-z b.offen { color:var(--muted); font-weight:600; }
.dcl-z .chev { color:var(--muted); font-size:18px; }

/* Abschluss: Punktering, Ring schliesst sich, Haken, Tageskreise als Welle, kurzer Konfetti-Regen (ca. 2 s) */
.dcd { text-align:center; position:relative; }
.dcd h2 { margin:4px 0 6px; font-size:22px; font-weight:800; color:var(--navy); }
.dcd p { margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--muted); }
.dcd-feier { position:relative; width:96px; height:96px; margin:2px auto 8px; }
.dcd-feier svg { width:96px; height:96px; display:block; overflow:visible; }
.dcd-feier .spur { fill:none; stroke:var(--card2); stroke-width:5; }
.dcd-feier .ring { fill:none; stroke:url(#dcd-g); stroke-width:5; stroke-linecap:round; stroke-dasharray:213.7; stroke-dashoffset:213.7; }
.dcd-feier .innen { fill:url(#dcd-g); transform-box:fill-box; transform-origin:center; transform:scale(0); }
.dcd-feier .haken { fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; }
.dcd-feier .punkte circle { fill:var(--line); transform-box:fill-box; transform-origin:center; transform:scale(0); }
.dcd-feier .punkte circle.ja { fill:url(#dcd-g); }
.dcd-feier.an .punkte circle { animation:dcdPunkt .32s cubic-bezier(.3,1.7,.5,1) var(--v) forwards, dcdWeg .3s ease-in 1.35s forwards; }
.dcd-feier.an .ring { animation:dcdRing .6s cubic-bezier(.4,0,.2,1) .85s forwards; }
.dcd-feier.an .innen { animation:dcdPop .42s cubic-bezier(.3,1.6,.5,1) 1.4s forwards; }
.dcd-feier.an .haken { animation:dcdHaken .32s ease-out 1.65s forwards; }
@keyframes dcdPunkt { to { transform:scale(1); } }
@keyframes dcdWeg { to { opacity:0; transform:scale(.4); } }
@keyframes dcdRing { to { stroke-dashoffset:0; } }
@keyframes dcdPop { to { transform:scale(1); } }
@keyframes dcdHaken { to { stroke-dashoffset:0; } }
.dcd .dcr-woche { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:4px 0 16px; }
.dcd .dcr-woche .dcr-t span { animation:dcdHuepf .45s ease-out calc(1.85s + var(--i) * 70ms) both; }
@keyframes dcdHuepf { 0% { transform:translateY(0); } 45% { transform:translateY(-8px); } 100% { transform:translateY(0); } }
.dcd-konfetti { position:absolute; inset:-16px 0 auto; height:0; pointer-events:none; }
.dcd-konfetti i { position:absolute; top:0; width:7px; height:11px; border-radius:2px; opacity:0;
  animation:dcdFall 1.6s ease-in calc(2s + var(--d)) forwards; }
@keyframes dcdFall { 0% { opacity:1; transform:translateY(0) rotate(0); } 100% { opacity:0; transform:translateY(240px) rotate(320deg); } }
.dcd .dc-nav { margin-top:6px; }
@media (prefers-reduced-motion: reduce) {
  .dcd-feier .ring, .dcd-feier .haken { stroke-dashoffset:0; }
  .dcd-feier .innen { transform:none; }
  .dcd-feier .punkte, .dcd-konfetti { display:none; }
  .dcd-feier.an *, .dcd .dcr-woche * { animation:none !important; }
}

/* Mein 1:1 ohne Coaching: Karte „1:1 Coaching" */
.co-teaser { display:flex; flex-direction:column; gap:6px; width:100%; margin-top:14px; text-align:left; font-family:inherit; cursor:pointer;
  border:0; color:#fff; background:linear-gradient(120deg,#10155F,#15779B); }
.co-teaser .co-kick { color:rgba(255,255,255,.78); }
.co-teaser b { font-size:17px; line-height:1.3; color:#fff; }
.co-teaser span { font-size:13.5px; font-weight:600; color:rgba(255,255,255,.88); }
.dcl-titel { margin:4px 0 8px; font-size:20px; font-weight:800; color:var(--navy); }
/* Fenster oben verankert: die Leiste springt nicht, wenn die naechste Frage hoeher ist. */
.dcf { justify-content:flex-start; padding-top:max(16px, 10vh); }
.dcf .dc-stepval { display:block; text-align:center; font-size:30px; font-weight:800; color:var(--navy); margin:0 0 10px; min-width:0; }
.co-knoepfe a.btn { text-decoration:none; }

/* ---------- Chat: ein Datums-Chip (15b) ---------- */
.cochat-tagchip-halter { position:relative; height:0; z-index:3; display:flex; justify-content:center; }
.cochat-tagchip { position:absolute; top:8px; font-size:11px; font-weight:800; color:var(--muted); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; box-shadow:var(--shadow-sm); pointer-events:none;
  opacity:0; transition:opacity .2s ease; }
.cochat-tagchip.an { opacity:1; }
.cochat-tagchip[hidden] { display:none; }

/* ---------- Chat: Zustand eigener Nachrichten (Fabio 14) ---------- */
.comsg .foot { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.comsg .foot-haken { width:14px; height:14px; --ic-acc:currentColor; }
.comsg .foot-status { font-weight:700; }
.comsg.is-pending { opacity:.85; }
.comsg.is-fehler { opacity:1; box-shadow:0 0 0 2px var(--red); }
.comsg .foot-status.fehler { color:#fff; }
.comsg .foot-nochmal { border:0; border-radius:999px; padding:3px 10px; font:inherit; font-size:11px; font-weight:800;
  background:#fff; color:var(--red); cursor:pointer; }
.comsg .foot-nochmal:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* ---------- Chat: Sprachnachricht-Player (Fabio 12) ----------
   Ein- und ausgehend gleich, Farben aus der Blase (currentColor). */
.vn { display:flex; align-items:center; gap:10px; min-width:220px; max-width:100%; margin:2px 0; }
.vn__av { position:relative; flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,#62C3DC,#2F3C99); color:#fff; font-size:14px; font-weight:800; }
.vn__punkt { display:none; position:absolute; right:-2px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:#2EA8D0; border:2px solid var(--card); }
.vn--neu .vn__punkt { display:block; }
.vn__play { flex:none; width:38px; height:38px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:var(--teal); color:#fff; padding:0; }
.comsg.from-member .vn__play { background:rgba(255,255,255,.2); }
.vn__play svg { width:20px; height:20px; }
.vn__play:focus-visible, .vn__tempo:focus-visible, .vn__welle:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.vn__mitte { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.vn__welle { display:flex; align-items:center; gap:2px; height:28px; cursor:pointer; touch-action:none; }
.vn__welle i, .vn-live i { flex:1; min-width:2px; max-width:4px; border-radius:2px; background:currentColor; opacity:.35; }
.vn__welle i.an { opacity:1; }
.comsg.from-coach .vn__welle i { background:var(--teal); }
.vn__fuss { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; font-weight:700; opacity:.85; }
.vn__zeit { font-variant-numeric:tabular-nums; }
.vn__tempo { border:0; border-radius:999px; padding:1px 8px; font:inherit; font-size:11px; font-weight:800; cursor:pointer;
  background:rgba(127,127,127,.18); color:inherit; }
.vn--neu .vn__zeit { color:#2EA8D0; }

/* ---------- Chat: Aufnahme und Vorschau (Fabio 13) ---------- */
.cochat-compose { position:relative; }
.cochat-compose.rec-an > :not(.cochat-rec) { display:none; }
.cochat-rec { flex:1; display:flex; align-items:center; gap:8px; min-height:40px; min-width:0;
  transform:translateX(var(--wisch, 0px)); touch-action:pan-y; }
.cochat-rec[hidden] { display:none; }
.cochat-rec__weg, .cochat-rec__stopp { flex:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--red); display:grid; place-items:center; cursor:pointer; }
.cochat-rec__weg .hji { width:20px; height:20px; --ic-acc:currentColor; }
.cochat-rec__quadrat { width:14px; height:14px; border-radius:3px; background:var(--red); }
.cochat-rec__punkt { flex:none; width:10px; height:10px; border-radius:50%; background:var(--red); animation:hjm-pulse 1.1s infinite; }
.cochat-rec[data-zustand="vorschau"] .cochat-rec__punkt { display:none; }
.cochat-rec__mitte { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; color:var(--navy); }
.cochat-rec__mitte .vn { min-width:0; }
.vn-live { display:flex; align-items:center; gap:2px; height:26px; color:var(--red); }
.vn-live i { opacity:.8; transition:height .1s linear; }
.cochat-rec__tipp { font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cochat-rec__zeit { flex:none; font-size:13px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; min-width:36px; text-align:right; }
.cochat-rec__zeit[hidden], .cochat-rec__stopp[hidden], .cochat-rec .cochat-send[hidden] { display:none; }
.cochat-rec__weg:focus-visible, .cochat-rec__stopp:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .cochat-rec__punkt { animation:none; } .vn-live i, .cochat-tagchip { transition:none; } }

/* ---------- Profilbild (Paket 5) ---------- */
.pb-blatt__f { width:min(480px,100%); box-sizing:border-box; background:var(--bg); color:var(--ink); border-radius:26px 26px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; align-items:center; gap:12px;
  max-height:92dvh; overflow:auto; }
.pb-kopf { align-self:stretch; display:flex; align-items:center; gap:8px; }
.pb-kopf b { flex:1; font-size:18px; color:var(--navy); }
.pb-zu { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--navy);
  display:grid; place-items:center; cursor:pointer; }
.pb-zu .hji { width:18px; height:18px; }
.pb-text, .pb-hinweis { align-self:stretch; margin:0; font-size:13.5px; line-height:1.45; color:var(--muted); }
.pb-hinweis { text-align:center; font-size:12.5px; }
.pb-hinweis[hidden], .pb-zoom[hidden] { display:none; }
.pb-rahmen { position:relative; flex:none; border-radius:50%; overflow:hidden; background:var(--tint);
  display:grid; place-items:center; box-shadow:0 0 0 4px var(--card), 0 0 0 5px var(--line); touch-action:none; }
.pb-rahmen.zuschnitt { cursor:grab; display:block; }
.pb-rahmen .pb-bild { position:absolute; left:0; top:0; max-width:none; user-select:none; -webkit-user-drag:none; }
.pb-jetzt { width:100%; height:100%; object-fit:cover; display:block; }
.pb-leer { font-size:64px; font-weight:800; color:var(--navy); }
.pb-zoom { align-self:stretch; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--navy); }
.pb-zoom input { flex:1; accent-color:var(--teal); }
.pb-knoepfe { align-self:stretch; display:flex; flex-direction:column; gap:8px; }
.pb-knoepfe .btn[hidden] { display:none; }
.pb-waehlen { cursor:pointer; }
.pb-loeschen { color:var(--red); }
.pb-loeschen .hji { --ic-acc:currentColor; }
.pb-note { margin:0; min-height:1em; font-size:12.5px; font-weight:700; color:var(--muted); text-align:center; }
.pb-note.err { color:var(--red); }
/* Avatar oben rechts und im Konto-Kopf: das Foto fuellt den Kreis. */
.apphead .av .mit-bild { display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; }
.hj-konto-kopf__av.mit-bild { background:var(--card); }
.apphead .av .mit-bild img, .hj-konto-kopf__av.mit-bild img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.apphead .av:has(.mit-bild) { background:var(--card); overflow:hidden; }
.hj-konto-kopf__av { cursor:pointer; padding:0; font-family:inherit; overflow:hidden; }
.hj-konto-kopf__av:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* ---------------------------------------------------------------- Blatt 0l, Paket 5 (Fabio 04.11.2026) */
/* I1: Tage im Daily Check. Die Tageskreise bleiben 30 Punkte, der Knopf fuellt seine Spalte und ist
   44 hoch. Breiter als die Spalte geht bei sieben Tagen auf 375 Punkten nicht (siehe PR, Offen). */
.dcr-tafel { grid-template-columns:68px repeat(7,minmax(0,1fr)); column-gap:2px; }
.dcr-tafel .dcr-t { width:100%; min-height:44px; justify-content:center; }
/* J31: „Alle Bereiche anzeigen" unter der Wochentafel, eingeklappt, nach Themen gruppiert. */
.dcr-alle { margin-top:10px; border-top:1px solid var(--line-2); }
.dcr-alle > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; list-style:none;
  cursor:pointer; font-size:13.5px; font-weight:800; color:var(--navy); }
.dcr-alle > summary::-webkit-details-marker { display:none; }
.dcr-alle > summary::after { content:'\203A'; font-size:20px; line-height:1; color:var(--muted); transition:transform .15s; }
.dcr-alle[open] > summary::after { transform:rotate(90deg); }
.dcr-alle > summary:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:8px; }
.dcr-thema { margin:10px 0 4px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); }
.dcr-alle .dcr-tafel > b { font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.dcr-k { min-height:30px; border-radius:9px; background:var(--card2); display:grid; place-items:center; padding:2px 1px;
  color:var(--navy); font-size:10.5px; font-weight:800; line-height:1.1; text-align:center; overflow-wrap:anywhere; }
.dcr-k.leer { background:transparent; border:1.5px dashed var(--line); box-sizing:border-box; }
.dcr-k-tag { font-size:10.5px; font-weight:700; color:var(--muted); text-align:center; }