/* DOTOG Webseite: Ratgeber-Gestaltung (Paket H, Frank 02.10.2026).
   Wird nach dem eingebetteten Stil und dotog-motion.css geladen, vor dotog-app-ui.css.
   Nur Form, kein Text: Abschnitte als Blöcke, Schritt-Karten, Familienkarten, Prüfliste,
   Quellen und App-Beispiele. Hover, Leuchten und Handy-Mitte der Schritt-Karten kommen
   aus dotog-motion.css (.stepcard). Bewegung nur über transform, translate, opacity, Schatten. */

/* ==========================================================================
   App-Beispiele: Grundregeln aus dem eingebetteten Stil von index.html (Stand b6c7796),
   dort nur eingebettet. Das App-Aussehen legt danach dotog-app-ui.css darüber.
   ponytail: Kopie statt gemeinsamer Datei, weil index.html in dieser Runde unberührt bleibt;
   bei der nächsten Startseiten-Runde in eine gemeinsame Datei auslagern.
   Weggelassen: Hover (Beispiele sind inert), Belohnungs- und Sprint-Zeilen (hier ungenutzt),
   das Wort am heutigen Kalendertag (CSS-Text wäre nicht übersetzbar).
   ========================================================================== */
.bc-chat-head .who .s::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:glowPulse 1.4s ease-in-out infinite;}
.v10-mock{margin-top:22px;width:100%; border-radius:16px;overflow:hidden; border:1px solid rgba(93,224,190,0.25); box-shadow:0 8px 24px rgba(0,0,0,0.4),inset 0 0 0 1px rgba(255,255,255,0.04); padding:14px 12px; display:flex;flex-direction:column; min-height:440px;}
.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;}
.v10-mock .ph-row > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.v10-mock .ph-row > span:not(.ph-pill){flex:0 1 auto;letter-spacing:0;text-transform:none;}
.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;}
.v10-mock .ph-pill .d{width:8px;height:8px;border-radius:50%;background:var(--disc-blau);}
.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;}
.v10-mock .av{position:relative;width:48px;height:60px;flex-shrink:0;grid-row:1 / span 2;}
.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);}
.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));}
.v10-mock .nm{min-width:0;display:flex;flex-direction:column;gap:3px;align-self:center;}
.v10-mock .nm .n{font-size:14px;font-weight:800;color:#fff;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.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;}
.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;}
.v10-mock .pts{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;align-self:center;}
.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;}
.v10-mock .pts .l{font-size:7px;color:rgba(255,255,255,0.55);letter-spacing:0.8px;text-transform:uppercase;margin-top:3px;}
.v10-mock .tasks{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
.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;}
.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);}
.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;}
.v10-mock .tk .tinfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden;}
.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;}
.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;}
.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);}
.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;}
.v10-mock .tk.done .tinfo{opacity:0.62;}
.v10-mock .tk.done span:not(.pill):not(.sprint-lbl):not(.einl-lbl){text-decoration:line-through;opacity:0.5;}
.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;}
.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);}
.v10-mock .v10-head{display:flex;align-items:center;justify-content:space-between; margin:4px 0 8px;gap:8px;}
.v10-mock .v10-head .ti{display:flex;align-items:center;gap:7px;min-width:0;}
.v10-mock .v10-head .ti .ic{font-size:15px;line-height:1;filter:drop-shadow(0 0 6px rgba(93,224,190,0.55));}
.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;}
.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;}
.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;}
.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;}
.v10-mock .v10-tabbar .tab .ic{font-size:14px;line-height:1;}
.v10-mock .v10-tabbar .tab.active{color:var(--mint);}
.v10-mock .v10-tabbar .tab.active .ic{filter:drop-shadow(0 0 6px rgba(93,224,190,0.6));}
.kal-event.sprint .info .pre-sprint{font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase; color:var(--orange); display:flex;align-items:center;gap:4px; animation:var(--anim-orange-text);}
.bc-chat{position:relative; border:1.5px solid rgba(93,224,190,0.32); border-radius:28px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(93,224,190,0.14); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.bc-chat::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%); width:48px;height:4px;border-radius:4px;background:rgba(255,255,255,0.12);}
.bc-chat-head{display:flex;align-items:center;gap:12px; padding:12px 4px 16px; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:16px;}
.bc-avatar{position:relative;width:44px;height:44px;border-radius:50%;flex-shrink:0; background:var(--disc-blau); border:2px solid rgba(28,176,246,0.55); box-shadow:0 0 18px rgba(28,176,246,0.45); display:flex;align-items:center;justify-content:center; font-size:20px; overflow:hidden;}
.bc-avatar img{position:absolute;inset:-4px -4px -10px -4px;width:auto;height:auto;min-width:calc(100% + 8px);min-height:calc(100% + 14px);object-fit:cover;object-position:center 22%;}
.bc-avatar::after{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%; background:var(--mint);border:2px solid #14181B;box-shadow:0 0 8px var(--mint);}
.bc-chat-head .who{flex:1;min-width:0;}
.bc-chat-head .who .n{font-size:15px;font-weight:700;color:#fff;}
.bc-chat-head .who .s{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mint);font-weight:600;}
.bc-chat-head .dots{width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--fg-3);font-size:18px;letter-spacing:1px; cursor:pointer;transition:background 200ms ease;}
.bc-stream{display:flex;flex-direction:column;gap:12px;}
.bc-bubble{display:flex;gap:10px;max-width:88%;animation:var(--anim-blase);}
.bc-bubble.user{align-self:flex-end;flex-direction:row-reverse;animation-delay:200ms;}
.bc-bubble.buddy{align-self:flex-start;animation-delay:400ms;}
.bc-bubble.buddy.typing{animation-delay:800ms;}
.bc-bubble .mini{width:28px;height:28px;border-radius:50%;flex-shrink:0; background:var(--disc-blau); border:1.5px solid rgba(28,176,246,0.55); box-shadow:0 0 10px rgba(28,176,246,0.35); align-self:flex-end; overflow:hidden;position:relative;}
.bc-bubble .mini img{position:absolute;inset:-3px -3px -8px -3px;width:auto;height:auto;min-width:calc(100% + 6px);min-height:calc(100% + 11px);object-fit:cover;object-position:center 22%;}
.bc-bubble .msg{padding:12px 16px;border-radius:18px; font-size:14.5px;line-height:1.55;color:#fff;}
.bc-bubble.user .msg{border-bottom-right-radius:6px;}
.bc-bubble.buddy .msg{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-bottom-left-radius:6px; color:var(--fg-1); backdrop-filter:blur(8px);}
.bc-bubble.typing .msg{display:inline-flex;align-items:center;gap:6px;padding:14px 18px;}
.bc-bubble.typing .msg i{width:8px;height:8px;border-radius:50%;background:var(--mint); box-shadow:0 0 8px var(--mint); animation:var(--anim-tippen);}
.bc-bubble.typing .msg i:nth-child(2){animation-delay:0.18s;}
.bc-bubble.typing .msg i:nth-child(3){animation-delay:0.36s;}
.kal-mock{position:relative; border:1.5px solid rgb(var(--dm-gold) / 0.30); border-radius:28px; padding:22px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.kal-head{display:flex;align-items:center;justify-content:space-between; padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:16px;}
.kal-head .month{font-size:17px;font-weight:800;color:var(--mint);letter-spacing:-0.2px;}
.kal-head .nav button{transition:transform 200ms var(--ease),box-shadow 200ms var(--ease),background-color 200ms var(--ease),border-color 200ms var(--ease),opacity 200ms var(--ease);}
.kal-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:18px;}
.kal-day{position:relative; aspect-ratio:1;border-radius:12px; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:4px; transition:transform 200ms var(--ease),box-shadow 200ms var(--ease),background-color 200ms var(--ease),border-color 200ms var(--ease),opacity 200ms var(--ease);}
.kal-day .dow{font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--fg-3);}
.kal-day .dom{font-weight:800;line-height:1.1;margin-top:2px;}
.kal-day .dots{display:flex;gap:3px;margin-top:4px;}
.kal-day .dots i{width:5px;height:5px;border-radius:50%;}
.kal-day .dots i.g{background:var(--gold);box-shadow:0 0 6px rgb(var(--dm-gold) / 0.7);}
.kal-day .dots i.m{background:var(--mint);box-shadow:0 0 6px rgba(93,224,190,0.7);}
.kal-day .dots i.c{background:#FF5963;box-shadow:0 0 6px rgba(255,89,99,0.7);}
.kal-events{display:flex;flex-direction:column;}
.kal-event{transition:transform 200ms ease, border-color 200ms ease;}
.kal-event .ic{flex-shrink:0; display:flex;align-items:center;justify-content:center;}
.kal-event.sprint .ic{color:var(--mint);}
.kal-event.standard .ic{background:radial-gradient(circle at 35% 30%,rgb(var(--dm-gold) / 0.32),rgb(var(--dm-gold) / 0.08));border:1px solid rgb(var(--dm-gold) / 0.5);color:var(--gold);}
.kal-event.repeat .ic{color:var(--tertiary);}
.kal-event .info{flex:1;}
.kal-event .pts{white-space:nowrap;}
.kal-event.termin .ic{background:rgb(var(--dm-gold) / 0.10);border:1px solid rgb(var(--dm-gold) / 0.32);}
.kal-event.termin .date-pill{background:rgb(var(--dm-gold) / 0.10);border:1px solid rgb(var(--dm-gold) / 0.35);}
@media (max-width:768px){
  .kal-event{display:grid !important; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:12px;row-gap:6px; padding:12px 14px; align-items:center;}
  .kal-event .time{grid-row:1;grid-column:1;font-size:11px;width:auto;}
  .kal-event .ic{grid-row:1;grid-column:2;justify-self:start;width:28px;height:28px;}
  .kal-event .pts,.kal-event .date-pill{grid-row:1;grid-column:3;align-self:center;justify-self:end;}
  .kal-event .info{grid-row:2;grid-column:1 / -1;min-width:0;}
  .kal-event .info .ti{font-size:14px;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word;}
  .kal-event .info .su{font-size:12px;line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;}
  .kal-event.sprint .info .pre-sprint{margin-bottom:3px;}
}

/* ==========================================================================
   Ratgeber-Gestaltung
   ========================================================================== */
/* ---------- Abschnitte: ruhige Lesespalte, Blöcke mit Bild abwechselnd ---------- */
.guide-body{max-width:none;}
.g-sec{max-width:780px;margin-inline:auto;}
.g-sec + .g-sec{margin-top:var(--abschnitt-abstand);}
@media (min-width:769px){.section{padding-block:calc(var(--abschnitt-abstand) / 2);}.section .faq{padding-block:0;}}
.guide-body .g-sec h2{margin-top:0;}
.g-split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(40px,5vw,72px);align-items:start;}
.g-split.g-flip{grid-template-columns:minmax(300px,380px) minmax(0,1fr);}
.g-split.g-flip .g-visual{grid-column:1;grid-row:1;}
.g-split.g-flip .g-text{grid-column:2;grid-row:1;}
.g-visual{position:sticky;top:112px;margin:0;font-size:16px;line-height:1.6;overflow-wrap:normal;}
.g-visual > *{margin-inline:auto;}
.g-visual .v10-mock{margin-top:0;max-width:300px;}
.g-visual .kal-mock,.g-visual .bc-chat{max-width:380px;}
.g-visual .kal-week{gap:4px;}
.g-visual .kal-day{min-width:0;}

/* ---------- Schritt-Karten (Liste mit Schritten, Aufzählung mit Bildern) ---------- */
/* Aussehen mit niedriger Gewichtung, damit Hover aus dotog-motion.css gewinnt */
:where(.guide-body) .stepcard{background:var(--karte-flaeche);border:1px solid var(--karte-rand);border-top-color:var(--karte-kante);border-radius:var(--radius-karte);box-shadow:var(--karte-schatten-aussen);}
.guide-body .g-steps,.guide-body .g-cards{list-style:none;padding:0;margin:26px 0 28px;display:grid;gap:14px;}
.guide-body .g-steps{counter-reset:g-step;}
.guide-body li.stepcard{margin:0;}
.guide-body .g-steps > li{counter-increment:g-step;padding:20px 22px 20px 74px;font-size:16px;line-height:1.65;color:var(--fg-2);}
.guide-body .g-steps > li::before{content:counter(g-step);position:absolute;left:20px;top:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg-deep);border:1.5px solid rgb(255 255 255 / .22);color:var(--fg-1);font-weight:800;font-size:16px;line-height:1;}
.guide-body .g-steps strong,.g-card strong{display:block;margin-bottom:4px;color:var(--fg-1);font-size:17px;line-height:1.4;}
.guide-body .g-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.guide-body .g-cards > li{position:relative;display:flex;flex-direction:column;margin:0;padding:0 20px 22px;overflow:hidden;font-size:15.5px;line-height:1.6;color:var(--fg-2);
  background:var(--karte-flaeche);border:1px solid var(--karte-rand);border-top-color:var(--karte-kante);border-radius:var(--radius-karte);box-shadow:var(--karte-schatten-aussen);will-change:transform;
  transition:transform var(--bild-dauer) var(--ease),scale 280ms var(--ease),border-color var(--bild-dauer) var(--ease),box-shadow var(--bild-dauer) var(--ease);}
.guide-body .pain-card::before{content:"";position:absolute;inset:0;background:var(--bild-glanz);transform:translateX(-100%);transition:transform var(--bild-glanz-dauer) var(--ease);pointer-events:none;z-index:2;}
.guide-body .pain-card.in{transition:opacity 500ms var(--ease),transform 500ms var(--ease);}  /* index.html .pain-card.in */
.g-card img{width:100%;max-width:170px;height:auto;aspect-ratio:1;margin:calc(-1 * var(--schattenraum-karte)) calc(-1 * var(--schattenraum-karte)) 6px;align-self:center;object-fit:contain;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .5));box-sizing:content-box;padding:var(--schattenraum-karte) var(--schattenraum-karte) 0;pointer-events:none;-webkit-mask:var(--karte-bild-maske-raum);mask:var(--karte-bild-maske-raum);}

/* ---------- Familienkarten „Aus unserer Familie“: Buddy und Erfahrung, Coral sparsam ---------- */
.g-family{position:relative;display:grid;grid-template-columns:minmax(160px,230px) minmax(0,1fr);gap:14px clamp(20px,3vw,40px);align-items:center;margin:34px 0;padding:clamp(24px,3vw,38px);border-radius:var(--radius-karte);
  background:var(--familie-licht),var(--karte-flaeche);
  border:1px solid var(--karte-rand);border-top-color:var(--karte-kante);box-shadow:var(--karte-schatten-aussen);
  transition:border-color 240ms var(--ease),box-shadow 240ms var(--ease);}
.g-family.g-flip{grid-template-columns:minmax(0,1fr) minmax(160px,230px);background:radial-gradient(120% 90% at 100% 100%,rgb(var(--dm-coral) / .09),transparent 62%),var(--karte-flaeche);}
.g-family.g-flip > .avatar-stage{grid-column:2;grid-row:2;}
.g-family.g-flip > blockquote{grid-column:1;grid-row:2;}
/* Buddy-Bühne: .avatar-stage, .avatar-disc, .avatar-buddy wörtlich aus dem eingebetteten Stil von index.html (Z. 792 bis 836) */
.avatar-stage{position:relative;display:block;width:160px;height:160px;margin:0 auto 20px;overflow:visible;isolation:isolate;flex-shrink:0;}
.avatar-disc{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:block;width:120px;height:120px;border-radius:50%;background:var(--disc-blau);border:2px solid var(--disc-rand);box-shadow:var(--disc-leuchten);animation:var(--anim-disc);z-index:1;}
.avatar-buddy{position:absolute;left:0;bottom:-6px;display:block;width:160px;height:160px;object-fit:contain;object-position:center bottom;filter:var(--buddy-schatten-buehne);animation:var(--anim-familie-1);z-index:3;}
.g-family > .avatar-stage{margin:0 auto;}
.g-family > p{grid-column:1 / -1;margin:0;color:var(--coral);font-size:14px;font-weight:700;letter-spacing:.3px;}
.guide-body .g-family blockquote{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:18px;line-height:1.75;}

/* ---------- Prüfliste als Checklisten-Karte (Haken aus .tlist) ---------- */
.tlist{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,0.09);display:flex;flex-direction:column;gap:11px;}
.tlist li{position:relative;padding-left:27px;font-size:13.5px;color:var(--fg-2);line-height:1.4;}
.tlist li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,rgba(93,224,190,0.22),rgba(93,224,190,0.05));border:1px solid rgba(93,224,190,0.42);}
.tlist li::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:3.5px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg);}
.g-checkcard{margin:28px 0;padding:26px 28px;border-radius:var(--radius-karte);background:var(--karte-flaeche);border:1px solid var(--karte-rand);border-top-color:var(--karte-kante);box-shadow:var(--karte-schatten-aussen);transition:border-color 240ms var(--ease),box-shadow 240ms var(--ease);}
.guide-body .g-checkcard > p{margin:0;font-weight:700;color:var(--fg-1);}
.guide-body .g-checkcard .tlist{margin:16px 0 0;padding:16px 0 0;gap:14px;}
.guide-body .g-checkcard .tlist li{margin:0;padding-left:34px;font-size:16px;line-height:1.55;}
.g-checkcard .tlist li::before{top:3px;width:20px;height:20px;}
.g-checkcard .tlist li::after{left:6px;top:9px;}

/* ---------- Zahl aus dem vorhandenen Satz (Destatis): groß in Mint mit Leuchten, zählt beim Scrollen
   hoch (Skript auf der Seite, nur bei Bewegung). Poppins statt Mono: Mono nur für Codes und Datum. ---------- */
.guide-body .factline{display:block;max-width:none;margin:30px 0;padding:26px 28px;border-radius:var(--radius-karte);background:var(--karte-flaeche);border:1px solid var(--karte-rand);border-top-color:var(--karte-kante);box-shadow:var(--karte-schatten);}
.guide-body .factline p{margin:0;font-size:16px;line-height:1.65;color:var(--fg-2);}
.guide-body .factline .big{display:block;margin:8px 0 10px;font-family:inherit;font-size:clamp(36px,7vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--mint);text-shadow:0 0 24px rgb(var(--dm-mint) / .45);}

/* ---------- Quellen: ruhige Textkarte ---------- */
.g-sec.g-sources{padding:clamp(24px,3vw,34px);border-radius:var(--radius-karte);background:var(--karte-flaeche);border:1px solid var(--karte-rand);border-top-color:var(--karte-kante);box-shadow:var(--karte-schatten);}
.guide-body .g-sources h2{font-size:clamp(20px,2.4vw,24px);margin-bottom:12px;}
.guide-body .g-sources ul{margin:0;font-size:15px;line-height:1.7;color:var(--fg-2);}

/* ---------- Spieler-Ansicht nach dem verbindlichen App-Mockup Welle 1.25.10
   (APP-DESIGN-EINHEIT-260907/docs/frontend/app_frontend_light_dark_wave1.html, dunkles Theme):
   Podest aus .podium, .pod, .pod-av, .pod-crown, .pod-block (Z. 5, 57 bis 59, 277, 280, 802, 809),
   Rangliste aus .player-row, .rank-mark, .card-media, .card-name, .card-trailing (Z. 5, 21 bis 22, 239 bis 242, 732 bis 739),
   Kartenschatten Z. 317, Buddy-Bildkante Z. 206, Bildtiefe Z. 303 und 334 bis 335. Rahmen, Kopfzeile und
   Reiterleiste wie das Heute-Beispiel (.v10-mock). Maße auf die Rahmenbreite von 300 px verkleinert. ---------- */
.v10-mock.sp-mock{min-height:0;}
.sp-mock .podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:166px;padding:20px 0 6px;}
.sp-mock .pod{position:relative;width:76px;display:flex;flex-direction:column;align-items:center;}
.sp-mock .pod-av{width:76px;height:92px;display:flex;align-items:flex-end;justify-content:center;}
.sp-mock .pod-av img,.sp-mock .card-media img{object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 -0.5px 0.5px #dceeff80) drop-shadow(0 2px 2px #000000b3);}
.sp-mock .pod-av img{position:relative;z-index:1;width:84px;height:96px;max-width:none;animation:dotog-podium-float 4s ease-in-out infinite;}
.sp-mock .pod-crown{position:absolute;top:-19px;z-index:2;font-size:19px;line-height:1;filter:drop-shadow(0 -0.5px 0.4px #fff0bf80) drop-shadow(0 2px 1.5px #000000d1);animation:dotog-crown-float 4s ease-in-out infinite;}
.sp-mock .pod:nth-child(1) :is(.pod-av img,.pod-crown){animation-duration:4.3s;animation-delay:-.8s;}
.sp-mock .pod:nth-child(2) :is(.pod-av img,.pod-crown){animation-duration:5.1s;animation-delay:-2.4s;}
.sp-mock .pod:nth-child(3) :is(.pod-av img,.pod-crown){animation-duration:4.7s;animation-delay:-1.6s;}
.sp-mock .pod-block{width:74px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:12px 12px 5px 5px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:#0b1020;text-shadow:var(--app-type-on-light);box-shadow:inset 2px 3px 2px #ffffff99,inset -3px -4px 5px #00000055,0 3px 3px #0000007a,0 8px 12px #00000086;}
.sp-mock .pod-block.silver{background:linear-gradient(150deg,rgb(201 210 238 / 90%),rgb(255 255 255 / 45%));}
.sp-mock .pod-block.gold{height:48px;background:linear-gradient(150deg,rgb(255 225 154 / 90%),rgb(255 200 87 / 90%));}
.sp-mock .pod-block.bronze{height:24px;background:linear-gradient(150deg,rgb(255 216 186 / 90%),rgb(255 183 170 / 90%));}
.sp-mock .sp-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.sp-mock .player-row{display:grid;grid-template-columns:26px 32px minmax(0,1fr) max-content;align-items:center;gap:0 8px;min-height:50px;padding:5px 10px;border-radius:14px;color:#fff;
  background:linear-gradient(to bottom,#ffffff0f,transparent 8%),var(--app-surface);border:1px solid var(--app-line);border-top-color:#ffffff24;
  box-shadow:0 10px 22px #00000086,0 2px 6px #0000007a,inset 0 2px .65px #e8f2ff43,inset 0 -1px .65px #00000066;}
.sp-mock .rank-mark{display:grid;place-items:center;min-height:28px;border:1px solid;border-radius:9px;font-size:13px;font-weight:700;line-height:1.2;text-shadow:var(--app-type-on-light);}
.sp-mock .rank-mark[data-rank="1"]{background:linear-gradient(135deg,#fff2bc,#edc663);border-color:#ac7e29;color:#50390f;}
.sp-mock .rank-mark[data-rank="2"]{background:linear-gradient(135deg,#f1f5fc,#bdc8dd);border-color:#8d9db7;color:#29374d;}
.sp-mock .rank-mark[data-rank="3"]{background:linear-gradient(135deg,#fce4cf,#d2a37c);border-color:#ac7954;color:#50311b;}
.sp-mock .card-media{width:32px;height:40px;display:grid;place-items:end center;}
.sp-mock .card-media img{width:32px;height:40px;}
.sp-mock .card-name{font-size:12.5px;font-weight:600;line-height:1.25;text-shadow:var(--app-type-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-mock .card-trailing{font-size:11.5px;font-weight:600;color:#ffe19a;white-space:nowrap;}
@keyframes dotog-podium-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes dotog-crown-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- Welle 4 (06.10.2026): Bausteine der Ratgeber Belohnungssystem, Haushaltsaufgaben nach Alter, Haushalts-App auswählen ---------- */
/* App-Beispiele Aufgabe, Belohnungen und Gewinnportal: Regeln wörtlich aus dem eingebetteten Stil von index.html (Sprint,
   goldener Kopf, Sprint-Zeile, Gewinnliste), nur was die drei Ratgeber zeigen. ponytail: Kopie wie die App-Grundregeln oben;
   eine gemeinsame Datei, sobald die Startseite eine App-Datei lädt. Keyframes kommen aus den Tokens. */
.v10-mock .tk.sprint{
  background:linear-gradient(135deg,rgba(255,140,40,0.22),rgba(255,90,30,0.08));
  border:1.5px solid rgba(255,140,40,0.65);
  border-radius:14px;
  box-shadow:0 0 16px rgba(255,140,40,0.2);
  animation:pulseOrange 2.5s ease-in-out infinite;
}
.v10-mock .tk.sprint .sprint-lbl{color:#ff9633;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;font-size:10px;margin-right:4px;}
.v10-mock .tk.sprint .pill{background:rgba(255,140,40,0.22);color:#ff9633;border:1px solid rgba(255,140,40,0.55);font-weight:900;letter-spacing:1.2px;text-transform:uppercase;}
.v10-mock .v10-head.gold .ti .ti-t{color:var(--gold);text-shadow:0 0 10px rgb(var(--dm-gold) / 0.5);}
.v10-mock .v10-head.gold .ti .ic{filter:drop-shadow(0 0 6px rgb(var(--dm-gold) / 0.55));}
.v10-mock .v10-head.gold .count{background:rgb(var(--dm-gold) / 0.14);color:var(--gold);border-color:rgb(var(--dm-gold) / 0.45);}
.v10-mock .sprint-pre{
  font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;
  color:#ff9633;
  margin:8px 2px 4px;
  display:flex;align-items:center;gap:5px;
  animation:pulseOrangeText 2.5s ease-in-out infinite;
}
.v10-mock .reward-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.v10-mock .reward-row{
  display:grid;
  grid-template-columns:22px 1fr auto;
  grid-template-rows:auto auto;
  column-gap:8px;row-gap:4px;
  padding:8px 10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgb(var(--dm-gold) / 0.22);
  border-radius:10px;
  align-items:center;
}
.v10-mock .reward-row .re{grid-row:1/3;font-size:16px;line-height:1;align-self:center;}
.v10-mock .reward-row .rn{font-size:11px;font-weight:700;color:#fff;letter-spacing:-0.1px;}
.v10-mock .reward-row .rc{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:800;color:var(--gold);
  white-space:nowrap;
}
.v10-mock .reward-row .rprog{
  grid-column:2/4;height:3px;border-radius:3px;
  background:rgba(255,255,255,0.06);overflow:hidden;
}
.v10-mock .reward-row .rprog span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-dim));
  box-shadow:0 0 6px rgb(var(--dm-gold) / 0.5);
}
.v10-mock .reward-row.ready{
  border-color:var(--mint);
  background:linear-gradient(135deg,rgba(93,224,190,0.10),rgb(var(--dm-gold) / 0.06));
  box-shadow:0 0 16px rgba(93,224,190,0.25);
  animation:pulseReady 2.4s ease-in-out infinite;
}
.v10-mock .reward-row.ready .rc{color:var(--mint);}
/* Prüffragen als Zwischenüberschriften (haushalts-app-auswaehlen.html, bisher im eingebetteten Stil der Seite) */
.guide-body h3{margin:36px 0 12px;font-size:21px;line-height:1.3;font-weight:800;color:#fff;}
/* Tabelle bleibt Tabelle, im Kartenrezept (Regel 8) */
.guide-body .guide-table{background:var(--karte-flaeche);border:1px solid var(--karte-rand);border-top-color:var(--karte-kante);border-radius:var(--radius-karte);box-shadow:var(--karte-schatten);}
/* Familienkarte ohne Zitat: der Absatz nach der Bühne ist Inhalt, kein Kartenkopf */
.g-family > .avatar-stage + p{grid-column:auto;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;}
/* Ende Welle 4 */
/* ---------- Buddy-Bildkante: unten weich auslaufend statt harter Kante, Werte aus dem App-Mockup
   Welle 1.25.10 (app_frontend_light_dark_wave1.html Z. 206) und APP-DESIGN.md Abschnitt Buddy-Bildkante ---------- */
.guide-hero .buddy-img{
  -webkit-mask-image:var(--buddy-maske);mask-image:var(--buddy-maske);}
/* Schattenraum (Frank 05.10.2026, „transparenter Rahmen“): Schatten (filter) und Maske am selben Bild schneiden den Schatten an
   der Bildbox gerade ab. Das Bild bekommt innen Platz für den Schatten, ein Gegen-Rand hält die Lage, die Maske deckt den Platz
   (Werte und Masken aus dotog-web-tokens.css, WEB-DESIGN.md Regel 11). Der Hero trägt den Schatten auf der Hülle .buddy-wrap. */
.avatar-buddy{box-sizing:content-box;padding:var(--schattenraum-buehne) var(--schattenraum-buehne) 0;margin-left:calc(-1 * var(--schattenraum-buehne));pointer-events:none;-webkit-mask:var(--buddy-maske-raum);mask:var(--buddy-maske-raum);}
.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);}
.sp-mock .pod-av img,.sp-mock .card-media img{box-sizing:content-box;padding:var(--schattenraum-mini) var(--schattenraum-mini) 0;margin:calc(-1 * var(--schattenraum-mini)) calc(-1 * var(--schattenraum-mini)) 0;pointer-events:none;-webkit-mask:var(--buddy-maske-raum);mask:var(--buddy-maske-raum);}

/* ---------- Bewegung wie auf der Startseite: Keyframes und Zuweisungen (Name, Dauer, Kurve, Versatz)
   aus assets/css/dotog-web-tokens.css, Werte der Startseite. ---------- */
/* Bild-Karten wie .pain-card .cover img (Z. 267 bis 269, 668) */
.g-card img{animation:var(--anim-bild-1);}
.g-card:nth-child(2) img{animation:var(--anim-bild-2);}
.g-card:nth-child(3) img{animation:var(--anim-bild-3);}
/* Schritt-Karten wie .step-card .step-inner (Z. 726 bis 737): Wackeln, versetzt um je 1 s */
.guide-body .g-steps > li{animation:var(--anim-wackeln-1);will-change:transform;}
.guide-body .g-steps > li:nth-child(2){animation:var(--anim-wackeln-2);}
.guide-body .g-steps > li:nth-child(3){animation:var(--anim-wackeln-3);}
/* Heute-Beispiel: steht auf der Startseite in der dritten Schritt-Karte (nth-child 4, --wd 2s) und wackelt mit ihr */
.g-visual > .v10-mock:not(.sp-mock){animation:var(--anim-wackeln-3);}
/* Familien-Buddies wie .step-card .avatar-buddy der Schritt-Karten 1 bis 3 (nth-child 2 bis 4, Z. 280 bis 282): 200, 400, 600 ms */
.g-sec:nth-child(5) .avatar-buddy{animation:var(--anim-familie-2);}
.g-sec:nth-child(8) .avatar-buddy{animation:var(--anim-familie-3);}
@media (max-width:768px){.guide-body .g-steps > li,.g-visual > .v10-mock{animation:none;}}

/* ---------- Chaos-Dad im Ratgeber-Hero wippt wie bis 21d7a5d (Frank 04.10.2026: „der caos dad hatte so eine weg
   rutschende bewegung als würde er auf dem Skatebord treten und ausrutschen“), bewusste Abweichung vom Schweben.
   Keyframes byte-gleich aus haushalts-app-auswaehlen.html (Zeile 248 bis 252). ---------- */
@keyframes dadSway{
  0%{transform:rotate(0deg);}
  50%{transform:rotate(-5deg);}
  100%{transform:rotate(0deg);}
}
.guide-hero .buddy-img[src*="chaosdad"]{transform-origin:50% 4%;animation:dadSway 4s cubic-bezier(0.37,0,0.63,1) infinite;}
/* ---------- Hover nur mit Maus, Tastatur-Fokus gleich ---------- */
@media (hover:hover) and (pointer:fine){
  .guide-body .pain-card:hover,.guide-body .pain-card:focus-within{border-color:var(--bild-hover-rand);transform:var(--bild-hover-transform);box-shadow:var(--bild-hover-schatten);}
  .guide-body .pain-card:hover::before,.guide-body .pain-card:focus-within::before{transform:translateX(100%);}
  .g-family:hover,.g-family:focus-within{border-color:rgb(var(--dm-coral) / .45);box-shadow:0 22px 50px rgb(0 0 0 / .4),0 0 44px rgb(var(--dm-coral) / calc(.16 * var(--dm-glow)));}
  .g-checkcard:hover,.g-checkcard:focus-within{border-color:var(--faq-hover-rand);box-shadow:var(--faq-hover-schatten);}
}

/* ---------- Schmale Fenster: eine Spalte, Bild nach dem Text ---------- */
@media (max-width:900px){
  .g-split,.g-split.g-flip{grid-template-columns:minmax(0,1fr);gap:28px;}
  .g-split.g-flip .g-visual,.g-split.g-flip .g-text{grid-column:auto;grid-row:auto;}
  .g-visual{position:static;}
}
@media (max-width:640px){
  .guide-body .g-cards{grid-template-columns:minmax(0,1fr);}
  .guide-body .g-cards > li{flex-direction:row;align-items:center;gap:14px;padding:14px 18px;}
  .g-card img{flex:0 0 84px;width:84px;margin:calc(-1 * var(--schattenraum-karte)) calc(-1 * var(--schattenraum-karte)) 0;}
  .g-family,.g-family.g-flip{grid-template-columns:minmax(0,1fr);}
  .g-family > .avatar-stage,.g-family.g-flip > .avatar-stage{grid-column:auto;grid-row:auto;}
  .g-family.g-flip > blockquote{grid-column:auto;grid-row:auto;}
  .guide-body .g-steps > li{padding:18px 18px 18px 66px;}
  .guide-body .g-steps > li::before{left:16px;}
  .g-checkcard,.guide-body .factline{padding:22px 20px;}
}

/* ---------- Einstellung „weniger Bewegung“: neue Bewegungen aus ---------- */
@media (prefers-reduced-motion:reduce){
  .g-card img,.avatar-disc,.avatar-buddy,.guide-body .g-steps > li,.g-visual > .v10-mock,.sp-mock .pod-av img,.sp-mock .pod-crown,
  .g-visual .bc-bubble,.g-visual .bc-bubble.typing .msg i,.g-visual .pre-sprint,.guide-hero .buddy-img,.eyebrow::before{animation:none !important;}
  .guide-body .pain-card{transform:none !important;transition:none !important;}  /* ::before bleibt bei translateX(-100%) wie auf der Startseite */
}

/* ---------- Textstand-Zeile im Kopf: ausgewogen umbrechen, damit das Datum nicht zerreißt (Polish 05.10.2026) ---------- */
.guide-meta{text-wrap:balance;}
/* ---------- Store-Knöpfe wie die Startseite (index.html Zeile 362 bis 366 und 1698 bis 1701, Frank 04.10.2026)
   ponytail: dieselbe Kopie wie im eingebetteten Stil von index.html, keine dritte Wahrheit; index.html bleibt
   unberührt, bei der nächsten Startseiten-Runde beide in eine gemeinsame Datei ziehen. ---------- */
.hero-stores-row{display:flex;gap:16px;flex-wrap:wrap;}
.store-btn{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 22px;border-radius:14px;background:#0A0C18;color:#fff;border:1px solid rgba(255,255,255,0.12);text-decoration:none;transition:transform 240ms var(--ease),box-shadow 240ms var(--ease),background-color 240ms var(--ease),border-color 240ms var(--ease),color 240ms var(--ease),opacity 240ms var(--ease);box-shadow:0 6px 20px rgba(0,0,0,0.4);}.store-btn:active{transform:scale(0.97);transition-duration:120ms}
.store-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(93,224,190,0.25);border-color:rgba(93,224,190,0.4);}
.store-lbl{display:flex;flex-direction:column;line-height:1.1;text-align:left;}
.store-lbl small{font-size:10px;font-weight:500;color:rgba(255,255,255,0.7);letter-spacing:0.4px;text-transform:uppercase;}
.store-lbl strong{font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.3px;}
@media (hover:none){.store-btn:hover{transform:none !important;box-shadow:none !important;}}
@media (max-width:768px){
  .hero-stores-row{gap:10px;width:100%;}
  .hero-stores-row .store-btn{flex:1 1 0;min-width:0;height:48px;padding:0 10px;gap:8px;justify-content:center;}
  .hero-stores-row .store-lbl strong{font-size:14px;}
  .hero-stores-row .store-lbl small{font-size:8px;}
}
/* Ende Store-Knöpfe */
/* Review Stufe 2, 02.10.2026, FIX-PFLICHT Nr. 1: Bilder, die das Ladeskript noch nicht
   gesetzt hat, bleiben unsichtbar statt als leerer Rahmen (JavaScript aus oder blockiert). */
img[data-src]{visibility:hidden}
/* ---------- Sol-Review 04.10.2026 ---------- */
/* A7: Store-Zeile mit dem Abstand der Startseite. Gemessen dort 16 px auf allen Breiten (ihr Inline-Stil überstimmt die
   kopierte Handy-Regel mit 10 px). .cta-row bleibt am Wrapper, damit der Abstand zum Text (30 px) schon im ersten Bild steht. */
.hero .hero-stores-row{gap:16px;}
/* A1, A2: Zähler. Der Endtext bleibt echter Text und Zugänglichkeitsname; während des Zählens ist er nur optisch
   verborgen, die überlagerte Anzeige (aria-hidden, translate="no") zeigt die Zwischenwerte. */
.factline .big{position:relative;}
.zahl-zaehler{position:absolute;inset:0;}
.zaehlt>.zahl-echt{opacity:0;}
/* A4: Druck zeigt jeden Text vollständig und ohne Bewegung. */
@media print{
  .tw-c{opacity:1 !important;}
  .tw-c.tw-cursor{border-right-color:transparent !important;}
  .anim-on .reveal{opacity:1 !important;transform:none !important;}
  .zahl-zaehler{display:none !important;}
  .zaehlt>.zahl-echt{opacity:1 !important;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}
/* Ende Sol-Review */