/* DOTOG Webseite: App-Beispiele im Design der App (Finding F6, 30.09.2026).
   Herkunft der Werte: S:\Claude\DOTOG-Assets\01_Markenkit\03_App-Design\tokens.css,
   dunkles Theme (Welle 1.20, von Frank am 25.09.2026 abgenommen).
   Nur Optik: Flächen mit Licht und Schatten, beleuchtete Schrift, Aktionsfläche,
   Gewinn-Karten, Navigation. Kein Text; Größen und Aufbau nur in der Grundform am Anfang
   (R4, Paket C 06.10.2026: Seiten ohne Ratgeber-Stil, etwa die Hilfe) und im Abschnitt Kalender-Einträge
   (Aufbau der App-Karte, Frank 08.10.2026). */

/* ---------- Grundform der App-Beispiele für Seiten ohne Ratgeber-Stil (R4, Paket C 06.10.2026) ----------
   Wörtlich aus dotog-guide.css (Stand 0e9cf51, bisher Kopie in hilfe.html); :where(main) lässt die Startseite aus. */
:where(main) .v10-mock{margin-top:22px;width:100%; overflow:hidden; padding:14px 12px; display:flex;flex-direction:column; min-height:440px;}
:where(main) .v10-mock .ph-row{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,0.55);text-transform:uppercase;margin-bottom:6px;}
:where(main) .v10-mock .ph-row > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
:where(main) .v10-mock .ph-row > span:not(.ph-pill){flex:0 1 auto;letter-spacing:0;text-transform:none;}
:where(main) .v10-mock .ph-pill{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--night-900) 50%,transparent);border:1px solid rgba(93,224,190,0.32);border-radius:11px;padding:3px 4px;font-size:9px;letter-spacing:0;text-transform:none;color:#fff;white-space:nowrap;flex-shrink:0;}
:where(main) .v10-mock .ph-pill .d{width:8px;height:8px;border-radius:50%;background:var(--disc-blau);}
:where(main) .v10-mock .stage{display:grid;grid-template-columns:48px minmax(0,1fr) auto;column-gap:8px;row-gap:6px;align-items:center;background:radial-gradient(circle at 20% 50%,rgb(var(--dm-mint) / 0.18),transparent 60%);padding:8px 4px;}
:where(main) .v10-mock .av{position:relative;width:48px;height:60px;flex-shrink:0;grid-row:1 / span 2;}
:where(main) .v10-mock .av .disc{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:var(--disc-blau);border:1.5px solid rgb(var(--dm-mint) / 0.55);box-shadow:0 0 14px rgba(93,224,190,0.45);}
:where(main) .v10-mock .av img{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:60px;height:60px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.5));}
:where(main) .v10-mock .nm{min-width:0;display:flex;flex-direction:column;gap:3px;align-self:center;}
:where(main) .v10-mock .nm .n{font-size:14px;font-weight:800;color:#fff;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
:where(main) .v10-mock .nm .p{font-size:9px;font-weight:700;color:var(--mint);letter-spacing:0.3px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
:where(main) .v10-mock .stage .strk-row{grid-column:2 / span 2;align-self:start;background:rgba(255,154,51,0.15);border:1px solid rgba(255,154,51,0.4);border-radius:6px;padding:2px 7px;font-size:9.5px;font-weight:800;color:#ff9a33;line-height:1.2;justify-self:start;}
:where(main) .v10-mock .pts{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;align-self:center;}
:where(main) .v10-mock .pts .b{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:900;line-height:1;color:var(--mint);text-shadow:0 0 10px rgb(var(--dm-mint) / 0.45);letter-spacing:-0.5px;}
:where(main) .v10-mock .pts .l{font-size:7px;color:rgba(255,255,255,0.55);letter-spacing:0.8px;text-transform:uppercase;margin-top:3px;}
:where(main) .v10-mock .tasks{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
:where(main) .v10-mock .tk{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(255,255,255,0.10);border-radius:13px;font-size:10.5px;color:#fff;min-width:0;}
:where(main) .v10-mock .tk .chk{width:14px;height:14px;border-radius:50%;border:1.8px solid rgba(255,255,255,0.3);flex-shrink:0;transition:transform 200ms var(--ease),box-shadow 200ms var(--ease),background-color 200ms var(--ease),border-color 200ms var(--ease),opacity 200ms var(--ease);}
:where(main) .v10-mock .tk .te-tile{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,rgb(var(--dm-mint) / 0.25),rgb(var(--dm-mint) / 0.08));border:1px solid rgb(var(--dm-mint) / 0.45);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);line-height:1;}
:where(main) .v10-mock .tk .tinfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden;}
:where(main) .v10-mock .tk .tn{font-size:10.5px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
:where(main) .v10-mock .tk .tm{font-size:8.5px;color:rgba(255,255,255,0.55);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
:where(main) .v10-mock .tk.done .chk{background:var(--mint);border-color:var(--mint);position:relative;box-shadow:0 0 8px rgba(93,224,190,0.5);}
:where(main) .v10-mock .tk.done .chk::after{content:"✓";position:absolute;inset:0;color:var(--fg-on-mint);font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;}
:where(main) .v10-mock .tk.done .tinfo{opacity:0.62;}
:where(main) .v10-mock .tk.done span:not(.pill):not(.sprint-lbl):not(.einl-lbl){text-decoration:line-through;opacity:0.5;}
:where(main) .v10-mock .tk .pill{margin-left:auto;background:linear-gradient(135deg,rgb(var(--dm-gold) / 0.20),rgb(var(--dm-gold) / 0.06));color:var(--gold);border:1px solid rgb(var(--dm-gold) / 0.45);font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;padding:2px 6px;border-radius:999px;letter-spacing:0.2px;box-shadow:0 0 8px rgb(var(--dm-gold) / 0.18);flex-shrink:0;white-space:nowrap;}
:where(main) .v10-mock .tk.done .pill{background:linear-gradient(135deg,rgb(var(--dm-mint) / 0.25),rgba(93,224,190,0.08));border-color:rgba(93,224,190,0.55);color:var(--mint);box-shadow:0 0 8px rgb(var(--dm-mint) / 0.3);}
:where(main) .v10-mock .v10-head{display:flex;align-items:center;justify-content:space-between; margin:4px 0 8px;gap:8px;}
:where(main) .v10-mock .v10-head .ti{display:flex;align-items:center;gap:7px;min-width:0;}
:where(main) .v10-mock .v10-head .ti .ic{font-size:15px;line-height:1;filter:drop-shadow(0 0 6px rgba(93,224,190,0.55));}
:where(main) .v10-mock .v10-head .ti .ti-t{font-size:15px;font-weight:900;line-height:1.05;letter-spacing:-0.5px;margin:0; color:var(--mint);text-shadow:0 0 10px rgb(var(--dm-mint) / 0.55); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
:where(main) .v10-mock .v10-head .count{flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase; padding:3px 8px;border-radius:999px; background:rgba(93,224,190,0.12);color:var(--mint);border:1px solid rgba(93,224,190,0.4); white-space:nowrap;}
:where(main) .v10-mock .v10-tabbar{margin:12px -12px -14px; margin-top:auto; height:32px;padding:0 4px; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,0.06); display:flex;align-items:center;justify-content:space-around;}
:where(main) .v10-mock .v10-tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:1px; color:rgba(255,255,255,0.42);font-size:8px;font-weight:600;letter-spacing:0.3px; line-height:1.1;}
:where(main) .v10-mock .v10-tabbar .tab .ic{font-size:14px;line-height:1;}
:where(main) .v10-mock .v10-tabbar .tab.active{color:var(--mint);}
:where(main) .v10-mock .v10-tabbar .tab.active .ic{filter:drop-shadow(0 0 6px rgba(93,224,190,0.6));}
:where(main) .g-visual .v10-mock{margin-top:0;max-width:300px;}
:where(main) .g-visual .v10-mock .av img{box-sizing:content-box;padding:var(--schattenraum-avatar) var(--schattenraum-avatar) 0;pointer-events:none;-webkit-mask:var(--buddy-maske-raum);mask:var(--buddy-maske-raum);}
:where(main) .g-visual > .v10-mock:not(.sp-mock){animation:var(--anim-wackeln-3);}
/* Ende Grundform */
.v10-mock,.kal-mock,.bc-chat{
  --app-canvas:radial-gradient(ellipse at 80% 6%,#ffc8a00f,transparent 78%),radial-gradient(ellipse at 20% 96%,#5de0be0f,transparent 78%),linear-gradient(to top,#131a2e 0%,#0f1530 55%,#0b1020 100%);
  --app-surface:#c9d2ee0a;
  --app-line:#c9d2ee14;
  --app-edge-light:#e8f2ff43;
  --app-edge-shade:#00000066;
  --app-header:#131a2e;
  --app-type-title:0 -1px 0 #ffffff38,0 1px 0 #000000b3;
  --app-type-copy:0 1px 0 #00000080;
  --app-type-on-light:0 1px 0 #ffffffe6,0 -1px 0 #173a3d38;
  --app-action-fill:linear-gradient(165deg,#83ead0 0%,#60dec0 35%,#36c5a6 72%,#2bb897 100%);
  --app-action-ink:#103c32;
  --app-action-shadow:inset 0 1.5px 1px #effffbc7,inset 0 -2px 2px #11785f59,0 2px 0 #1d775f,0 4px 8px #071e2238;
  --app-surface-shadow:0 5px 11px #00000086,0 1px 3px #0000007a,inset 0 1.5px .65px var(--app-edge-light),inset 0 -1px .65px var(--app-edge-shade);
  --app-reward:linear-gradient(125deg,#51452e,#1b2636 46%,#273342 76%,#423c2b);
  --app-reward-ready:linear-gradient(125deg,#695126,#263344 38%,#1b2636 64%,#584728);
  text-shadow:var(--app-type-copy);
}

/* ---------- Rahmen der drei App-Beispiele: App-Hintergrund mit heller Oberkante ---------- */
.v10-mock,.kal-mock,.bc-chat{
  background:var(--app-canvas);
  border:1px solid var(--app-line);border-top-color:var(--app-edge-light);
}
.v10-mock{border-radius:20px;box-shadow:0 9px 20px #00000086,0 2px 5px #0000007a,inset 0 2px .65px var(--app-edge-light),inset 0 -1px .65px var(--app-edge-shade);}
.kal-mock{box-shadow:0 30px 80px rgba(0,0,0,0.55),0 0 60px rgb(var(--dm-gold) / .08),inset 0 2px .65px var(--app-edge-light),inset 0 -1px .65px var(--app-edge-shade);}
.bc-chat{box-shadow:0 30px 80px rgba(0,0,0,0.55),0 0 60px rgba(93,224,190,0.10),inset 0 2px .65px var(--app-edge-light),inset 0 -1px .65px var(--app-edge-shade);}

/* ---------- Beleuchtete Schrift: Titel und Namen ---------- */
.v10-mock .v10-head .ti .ti-t,.v10-mock .v10-head.gold .ti .ti-t,.v10-mock .nm .n,.v10-mock .pts .b,.v10-mock .tk .tn,.v10-mock .reward-row .rn,
.kal-head .month,.kal-event .info .ti,.kal-day .dom,.bc-chat-head .who .n{text-shadow:var(--app-type-title);}
.v10-mock .tk .pill,.v10-mock .pts .b,.v10-mock .reward-row .rc,.kal-event .pts,.kal-event .time,.kal-event.termin .date-pill{font-family:inherit;}

/* ---------- Kopfkarte im Heute-Beispiel ---------- */
.v10-mock .stage{
  background:linear-gradient(160deg,#1a2340,var(--app-header) 70%);
  border:1px solid var(--app-line);border-top-color:var(--app-edge-light);border-radius:16px;
  padding:9px 8px;box-shadow:var(--app-surface-shadow);
}

/* ---------- Inhaltskarten: Aufgaben, Termine, Kalender-Einträge ---------- */
.v10-mock .tk,.kal-event,.kal-event.termin,.v10-mock .tk.termin{
  background:var(--app-surface);
  border:1px solid var(--app-line);border-top-color:var(--app-edge-light);
  box-shadow:var(--app-surface-shadow);
}
.v10-mock .tk.done{background:linear-gradient(90deg,#5de0be14,#5de0be08);border-color:#5de0be33;border-top-color:var(--app-edge-light);}
.v10-mock .tk.players{background:#5de0be0f;border-color:#5de0be40;border-top-color:var(--app-edge-light);}
.v10-mock .tk.sprint{box-shadow:0 0 16px rgba(255,140,40,0.2),inset 0 1.5px .65px #ffe0c05c,inset 0 -1px .65px var(--app-edge-shade);}
.kal-event.sprint{border-color:#5de0be59;border-top-color:var(--app-edge-light);box-shadow:0 0 16px rgba(93,224,190,0.12),var(--app-surface-shadow);}
.kal-event.repeat{border-color:rgba(28,176,246,0.35);border-top-color:var(--app-edge-light);}

/* Abhak-Feld: in der App ein abgerundetes Quadrat; erledigt ist die Mint-Aktionsfläche mit Haken */
.v10-mock .tk .chk{border-radius:4px;border:1.5px solid #c9d2ee3d;background:#c9d2ee0a;box-shadow:inset 0 1px .65px var(--app-edge-light);}
.v10-mock .tk.done .chk{background:var(--app-action-fill);border-color:transparent;box-shadow:inset 0 1px .6px #effffbc7,inset 0 -1px 1px #11785f59,0 1px 0 #1d775f;}
.v10-mock .tk.done .chk::after{color:var(--app-action-ink);text-shadow:none;}

/* ---------- Gewinne: goldene Karten auf dunklem Blau, bereit heißt heller und mit Lichtkante ---------- */
.v10-mock .reward-row{
  background:var(--app-reward);border:1px solid #bc9146;
  box-shadow:inset 0 1px .65px #ffe19a9c,inset 0 -2px .65px #00000080,0 3px 9px #00000080;
}
.v10-mock .reward-row.ready{
  background:var(--app-reward-ready);border-color:#ffe19a;
  box-shadow:inset 0 1px .65px #ffe19a9c,inset 0 0 .65px 1px #ffe19a52,0 3px 9px #00000099;
  animation:none;
}
.v10-mock .reward-row .rc,.v10-mock .reward-row.ready .rc{color:#ffe19a;}
.v10-mock .reward-row .rprog{background:#ffffff24;}
.v10-mock .reward-row .rprog span{background:linear-gradient(90deg,#ffe19a,#ffc857);box-shadow:none;}
.v10-mock .reward-row.ready .rprog span{background:linear-gradient(90deg,#ffc857,#fff0bc,#dcaa43);box-shadow:none;}

/* ---------- Untere Navigation: aktiver Bereich mit Mint-Fläche ---------- */
.v10-mock .v10-tabbar{background:#0b1020;border-top:1px solid var(--app-line);box-shadow:inset 0 1px .65px var(--app-edge-light);-webkit-backdrop-filter:none;backdrop-filter:none;}
.v10-mock .v10-tabbar .tab{color:#c9d2ee;border-radius:7px;padding:2px 1px;}
/* Fünf Reiter der App passen in jede Leiste: die Schrift folgt der Breite der Leiste (8 px ab 209 px Leistenbreite), lange Wörter je Sprache etwas kleiner. */
@supports (width:1cqw){
.v10-mock .v10-tabbar{container-type:inline-size;}
.v10-mock .v10-tabbar .tab{font-size:min(8px,var(--reiter-schrift,3.98cqw));}
:lang(fr) .v10-mock .v10-tabbar{--reiter-schrift:3.3cqw;}
:lang(hu) .v10-mock .v10-tabbar,:lang(uk) .v10-mock .v10-tabbar{--reiter-schrift:3.75cqw;}
}
.v10-mock .v10-tabbar .tab.active{color:#5de0be;background:#5de0be1f;text-shadow:var(--app-type-title);}

/* ---------- Kalender-Einträge wie die Karten der App ----------
   Frank 08.10.2026: „Mockup ist king“, Maß ist die Ansicht 390 x 932. Vorbild .task-card im App-Mockup Welle 1.25.12
   (app_frontend_light_dark_wave1.html, Seiten Heute und Kalender, dunkel): drei Zeilen, oben der Name (15 px, 600),
   darunter Wiederholung oder beim Termin Datum mit Uhrzeit (12 px, #c9d2ee), unten links das Zeichen (28 px), rechts
   Sterne in Gold mit Abhak-Feld (27 px, Radius 7 px). Aufgaben ohne Uhrzeit, Termine mit Uhrzeit (Faktenblatt Nr. 7).
   Nur das Raster ordnet an; Text und Reihenfolge im Quelltext bleiben, nichts wird versteckt (Regel 26).
   Fläche, Rand, Schatten und Leuchten der Varianten bleiben wie oben; Hover und Übergang bleiben wie auf der Startseite. */
.kal-events{gap:8px;}
.kal-event{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:none;grid-template-areas:"ti ti ti" "su su su" "ic ctx pts";column-gap:8px;row-gap:2px;align-items:center;padding:6px 10px;border-radius:20px;}
.kal-event.sprint{grid-template-areas:"pre pre pre" "ti ti ti" "su su su" "ic ctx pts";}
.kal-event.termin{grid-template-areas:"ti ti ti" "dp dp dp" "ic su pts";}
.kal-event .info{display:contents;}
.kal-event.sprint .info .pre-sprint{grid-area:pre;margin-bottom:0;}
.kal-event .info .ti{grid-area:ti;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:0;overflow-wrap:break-word;}
.kal-event .info .su{grid-area:su;margin-top:0;font-size:12px;line-height:1.25;color:#c9d2ee;overflow-wrap:break-word;}
.kal-event .ic,.kal-event.sprint .ic,.kal-event.standard .ic,.kal-event.repeat .ic,.kal-event.termin .ic{grid-area:ic;width:28px;height:28px;font-size:28px;line-height:28px;justify-self:start;background:none;border:0;border-radius:0;box-shadow:none;}
.kal-event .pts{grid-area:pts;justify-self:end;display:flex;align-items:center;gap:6px;padding:0;border-radius:0;font-size:13px;font-weight:600;letter-spacing:0;color:#ffe19a;}
.kal-event .pts::after,.kal-event.termin::after{content:"";width:27px;height:27px;box-sizing:border-box;flex-shrink:0;border-radius:7px;border:1.5px solid #c9d2ee99;background:#c9d2ee0a;}
.kal-event.termin::after{grid-area:pts;justify-self:end;}
.kal-event.termin .date-pill{grid-area:dp;justify-self:start;display:block;padding:0;border:0;border-radius:0;background:none;font-size:12px;font-weight:600;letter-spacing:0;line-height:1.25;color:#c9d2ee;white-space:normal;}
.kal-event.termin .date-pill::before{content:none;}

/* ---------- Kalender: Tage als kleine Flächen, heute als gewählter Tag ---------- */
.kal-day{background:var(--app-surface);border:1px solid var(--app-line);border-top-color:var(--app-edge-light);box-shadow:inset 0 1px .65px var(--app-edge-light),inset 0 -1px .65px var(--app-edge-shade);}
.kal-day.today{background:var(--app-action-fill);border-color:transparent;box-shadow:var(--app-action-shadow);}
.kal-day.today .dom,.kal-day.today .dow{color:var(--app-action-ink);text-shadow:var(--app-type-on-light);}
.kal-head .nav button{background:transparent;border:1px solid #c9d2ee80;border-radius:12px;color:#fff;}

/* ---------- Buddy-Chat: denkender KI-Buddy groß im Kopf (Frank 30.09.), Frage als Mint-Aktionsfläche, Antwort als Inhaltsfläche ---------- */
.bc-avatar{width:68px;height:68px;}
.bc-avatar img[src*="buddy-ki-denkt"],.bc-bubble .mini img[src*="buddy-ki-denkt"]{inset:0;min-width:100%;min-height:100%;width:100%;height:100%;object-fit:cover;object-position:center 12%;}
.bc-bubble.typing .mini{width:40px;height:40px;}
.bc-bubble.user .msg{
  background:var(--app-action-fill);color:var(--app-action-ink);font-weight:600;
  border:1px solid transparent;box-shadow:var(--app-action-shadow);text-shadow:var(--app-type-on-light);
}
.bc-bubble.buddy .msg{
  background:var(--app-surface);border:1px solid var(--app-line);border-top-color:var(--app-edge-light);
  box-shadow:var(--app-surface-shadow);-webkit-backdrop-filter:none;backdrop-filter:none;
}