/* ============================================================
   CiaoKI — Kurs-Stylesheet v2.0
   Einzige Quelle der Wahrheit für alle Kursseiten.
   Schrift-Treppe (px): 12 14 15 17 19 24 36 48 56 — Display via clamp.
   ============================================================ */
:root{
  --cream:#FFFBF7; --cream-2:#F6F1EA; --indigo:#292550; --indigo-2:#1F1C40;
  --orange:#FF7A2A; --orange-deep:#EA6612; --ink:#1A1A2E; --ink-soft:#4A4A5A;
  --hair-light:rgba(41,37,80,0.12); --hair-dark:rgba(255,251,247,0.16);
  --fd:'Geist',Arial,sans-serif; --fb:'Inter',Arial,sans-serif; --fm:'Geist Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{background:var(--cream);font-family:var(--fb);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;height:auto;}
picture{display:contents;}
::selection{background:rgba(255,122,42,0.22);}
a{color:inherit;}
em{font-style:normal;}  /* Markenregel: keine Kursivschrift */

/* ---------- HEADER ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,251,247,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:3px solid var(--orange);} /* Teil-1-Auffrischung 05.07.: orange Naht statt Haarlinie (Teil 2 überschreibt mit dunklem Header) */
.header-inner{max-width:1300px;margin:0 auto;padding:16px 40px;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;}
.header-brand{font-family:var(--fd);font-weight:700;font-size:24px;letter-spacing:-0.02em;color:var(--indigo);text-decoration:none;flex:none;}
.header-brand .ki{color:var(--orange);}
.header-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;}
.nav-toggle{display:none;}
.header-nav a{font-family:var(--fm);font-size:14px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:8px 11px;border-radius:7px;white-space:nowrap;transition:background .15s,color .15s;}
.header-nav a:hover{background:rgba(41,37,80,0.05);color:var(--ink);}
.header-nav a.active{color:var(--orange-deep);}

/* ---------- SHARED ---------- */
.section{padding:84px 80px;} /* Styleguide v3 Kap. 16 Punkt 2 (Entscheidung Fable 02.08.): 100 auf 84, wie Landingpage */
.section.compact{padding:64px 80px;}
.inner{max-width:1180px;margin:0 auto;}
.narrow{max-width:820px;margin:0 auto;}
.dark{background:var(--indigo);color:var(--cream);}
.eyebrow{font-family:var(--fm);font-size:14px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.dark .eyebrow{color:rgba(255,251,247,0.7);}
.eyebrow .dot{width:8px;height:8px;background:var(--orange);border-radius:50%;flex:none;}
.eyebrow .line{width:36px;height:1px;background:var(--hair-light);flex:none;}
.dark .eyebrow .line{background:var(--hair-dark);}
.s-head{font-family:var(--fd);font-weight:600;font-size:36px; /* Styleguide v3 (02.08.): 32/48 auf 36 (Treppe H2) */line-height:1.08;letter-spacing:-0.02em;color:var(--indigo);margin-bottom:18px;max-width:900px;}
.dark .s-head{color:var(--cream);}
.s-head .ki{color:var(--orange);}
.s-sub{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:760px;}
.dark .s-sub{color:rgba(255,251,247,0.82);}
.u-fine{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:4px;text-underline-offset:3px;text-decoration-skip-ink:none;}
.u-cream{text-decoration:underline;text-decoration-color:var(--cream);text-decoration-thickness:4px;text-underline-offset:3px;text-decoration-skip-ink:none;}

/* ---------- AUFGABEN-HERO ---------- */
.task-hero{padding:48px 80px 72px;}
.task-hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:center;}
.task-label{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.task-number-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:18px;}
.task-number-big{font-family:var(--fd);font-weight:800;font-size:clamp(120px,18vw,200px);line-height:0.85;letter-spacing:-0.04em;color:var(--orange);}
.task-meta{font-family:var(--fm);font-size:14px;font-weight:500;letter-spacing:0.08em;color:var(--ink-soft);border-left:1px solid var(--hair-light);padding-left:24px;white-space:nowrap;}
.task-sub{font-family:var(--fd);font-weight:400;font-size:24px;line-height:1.3;color:var(--indigo);margin-bottom:14px;}
.task-headline{font-family:var(--fd);font-weight:600;font-size:clamp(32px,5vw,56px);line-height:1.02;letter-spacing:-0.025em;color:var(--indigo);margin-bottom:18px;}
.task-intro{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:520px;}
.task-hero-image{display:flex;justify-content:center;align-items:flex-end;}
.task-hero-image img{width:100%;max-width:360px;filter:drop-shadow(0 20px 40px rgba(41,37,80,0.16));}

/* ---------- CARD-GRID (use / ideen / themen) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
.card-grid.cols-6{grid-template-columns:repeat(3,1fr);}
.tile{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:28px;}
.tile .ic{width:54px;height:54px;border-radius:14px;background:rgba(255,122,42,0.12);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--orange);margin-bottom:18px;}
.tile .ic svg,.ov-card .ic svg,.need .ic svg{width:28px;height:28px;display:block;stroke:currentColor;fill:none;}
.ov-card .ic,.need .ic{color:var(--orange);}
.tile .ti{font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em;}
.tile .ex{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.sub-text{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:760px;margin-top:-4px;}

/* ---------- HOWTO (Schritte-Reihe, dunkel) ---------- */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px;}
.steps-row.three{grid-template-columns:repeat(3,1fr);}
.step{border-top:2px solid rgba(255,122,42,0.4);padding-top:20px;}
.step-num{font-family:var(--fd);font-weight:800;font-size:56px;line-height:1;color:var(--orange);letter-spacing:-0.02em;margin-bottom:16px;}
.step-title{font-family:var(--fd);font-weight:600;font-size:19px;color:var(--cream);margin-bottom:10px;letter-spacing:-0.01em;}
.step-body{font-size:15px;line-height:1.55;color:rgba(255,251,247,0.78);}
.step-body em{color:var(--cream);font-style:normal;}

/* ---------- EXAMPLE FLOW ---------- */
.example-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch;margin-top:44px;}
.example-flow + .example-flow{margin-top:28px;}
.example-side{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:20px;padding:32px;display:flex;flex-direction:column;}
.example-side.out{background:var(--indigo);border-color:var(--indigo);}
.example-side .lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px;}
.example-side.out .lab{color:rgba(255,251,247,0.7);}
.example-side .txt{font-size:17px;line-height:1.6;color:var(--ink);white-space:pre-line;}
.example-side.out .txt{color:var(--cream);}
.example-arrow{display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--orange);font-weight:700;}
.example-tip{margin-top:24px;font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:760px;}
.example-tip b{font-family:var(--fm);font-size:14px;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange);}
.example-flow .example-tip{grid-column:3;margin-top:20px;max-width:none;}
/* Flip-Kommentar: ruhige Randnotiz statt Orange-Block (Maren 17.07. abend):
   Inter statt Geist, normale Groesse, dezente Farbe, Orange nur als Markerlinie */
.flip-comment{font-family:var(--fb);font-style:normal;font-weight:500;font-size:17px;line-height:1.6;color:var(--ink-soft);margin-top:28px;padding-left:18px;border-left:3px solid var(--orange);}
.example-flow .flip-comment{grid-column:3;text-align:left;margin-top:16px;}

/* ---------- BONUS (Aufklappen) ---------- */
.bonus{border:1px solid var(--hair-light);border-radius:20px;background:var(--cream-2);}
.bonus>summary{list-style:none;cursor:pointer;padding:22px 28px;font-family:var(--fm);font-size:15px;font-weight:600;letter-spacing:0.03em;color:var(--ink);display:flex;align-items:center;gap:12px;}
.bonus>summary::-webkit-details-marker{display:none;}
.bonus .bonus-plus{color:var(--orange);font-size:24px;font-weight:700;line-height:1;display:inline-block;transition:transform .2s ease;}
.bonus[open]>summary .bonus-plus{transform:rotate(45deg);}
.bonus-body{padding:4px 28px 30px;}
.bonus-intro{font-size:17px;line-height:1.55;color:var(--ink-soft);margin-bottom:8px;}

/* image placeholder (Aufgabe 5) */
.image-mock{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;border:1px dashed rgba(255,251,247,0.35);border-radius:14px;padding:36px 24px;margin-top:4px;}
.image-mock .mock-icon{font-size:36px;}
.image-mock .mock-caption{font-size:15px;line-height:1.55;color:rgba(255,251,247,0.7);}
.image-mock .mock-caption strong{display:block;font-family:var(--fd);font-size:17px;color:var(--cream);margin-bottom:4px;font-weight:600;}
.example-image{width:100%;height:auto;border-radius:14px;display:block;margin-top:4px;}

/* ---------- CALLOUT-FAMILIE (tryit / wichtig / tipp) ---------- */
.box{border-radius:0 20px 20px 0;padding:40px 44px;max-width:900px;}
.box.orange{background:rgba(255,122,42,0.07);border-left:4px solid var(--orange);}
.box.neutral{background:var(--cream-2);border-left:4px solid var(--indigo);}
.box .lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:12px;}
.box.neutral .lab{color:var(--indigo);}
.box .tit{font-family:var(--fd);font-weight:600;font-size:clamp(28px,3.4vw,36px);line-height:1.1;letter-spacing:-0.015em;color:var(--ink);margin-bottom:18px;}
.box .txt{font-size:17px;line-height:1.6;color:var(--ink);margin-bottom:16px;}
.box .txt:last-of-type{margin-bottom:0;}
.box .txt em{font-style:normal;color:var(--ink);font-weight:500;}
.box .txt + .tryit-cta{margin-top:12px;}
.tryit-cta{display:inline-flex;align-items:center;gap:12px;background:var(--orange);color:#fff;font-family:var(--fb);font-weight:600;font-size:17px;padding:18px 36px;border-radius:12px;text-decoration:none;transition:background .15s;margin-top:12px;}
.tryit-cta:hover{background:var(--orange-deep);}
.tryit-foot{margin-top:24px;font-size:15px;color:var(--ink-soft);}
.tryit-foot a{color:var(--orange-deep);font-weight:600;text-decoration:none;}
.tryit-foot a:hover{text-decoration:underline;}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.chip{font-family:var(--fm);font-size:14px;font-weight:500;letter-spacing:0.02em;color:var(--ink);background:#fff0;border:1px solid var(--hair-light);background:rgba(255,251,247,0.6);border-radius:999px;padding:9px 18px;}
.dark .chip{color:var(--cream);background:rgba(255,251,247,0.1);border-color:rgba(255,251,247,0.35);}
.chips-big{gap:12px;margin-top:24px;}
.chips-big .chip{font-size:15px;padding:13px 24px;}
.dark .chips-big .chip{border-color:rgba(255,122,42,0.6);box-shadow:0 0 0 4px rgba(255,122,42,0.10);}

/* ---------- CHECK-GRID (Aufgabe 6) ---------- */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.check-card{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:28px;}
.check-card .ic{width:36px;height:36px;border-radius:50%;background:var(--indigo);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:17px;margin-bottom:18px;}
.check-card .ti{font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em;}
.check-card .ex{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.check-hint{margin-top:24px;background:rgba(255,122,42,0.07);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:24px 28px;max-width:900px;}
.check-hint .lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:10px;}
.check-hint .txt{font-size:17px;line-height:1.6;color:var(--ink);}
.section.dark .check-hint{background:rgba(255,122,42,0.14);}
.section.dark .check-hint .txt{color:var(--cream);}

/* ---------- NEXT CTA ---------- */
.section-next{padding:64px 80px;display:flex;justify-content:flex-end;}
.next-cta{display:flex;width:max-content;max-width:100%;margin-left:auto;align-items:center;gap:12px;background:var(--indigo);color:var(--cream);font-family:var(--fb);font-weight:600;font-size:17px;letter-spacing:0;padding:18px 30px;border-radius:14px;text-decoration:none;transition:transform .12s,box-shadow .2s;}
.next-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(41,37,80,0.25);}
.next-cta .check{width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;opacity:0.9;}
.next-cta .arrow{color:var(--orange);font-size:18px;}

/* ---------- BEGRÜSSUNG-HERO ---------- */
.hero{padding:48px 80px 80px;}
.hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
.hero-eyebrow{font-family:var(--fm);font-size:14px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.hero-eyebrow .dot{width:8px;height:8px;background:var(--orange);border-radius:50%;}
.hero-wordmark{font-family:var(--fd);font-weight:700;font-size:clamp(56px,9vw,96px);line-height:0.98;letter-spacing:-0.03em;color:var(--indigo);margin-bottom:18px;}
.hero-wordmark .ki{color:var(--orange);}
.hero-headline{font-family:var(--fd);font-weight:700;font-size:56px; /* Styleguide v3 (02.08.): 40/72 auf 56 (Treppe H1) */line-height:1.0;letter-spacing:-0.03em;color:var(--indigo);margin-bottom:18px;}
.hero-sub-main{font-family:var(--fd);font-weight:500;font-size:24px;line-height:1.3;color:var(--ink);margin-bottom:22px;}
.hero-intro{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:520px;margin-bottom:12px;}
.hero-intro:last-child{margin-bottom:0;}
.hero-image{display:flex;justify-content:center;align-items:flex-end;}
.hero-image img{width:100%;max-width:330px;filter:drop-shadow(0 18px 32px rgba(41,37,80,0.14));}

/* ---------- CALLOUT (Begrüßung Zeit/Wichtig) ---------- */
.callout{background:rgba(255,122,42,0.07);border-left:4px solid var(--orange);border-radius:0 20px 20px 0;padding:32px 36px;max-width:900px;}
.callout .lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:10px;}
.callout .tit{font-family:var(--fd);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.2;letter-spacing:-0.015em;color:var(--ink);margin-bottom:14px;}
.callout p{font-size:17px;line-height:1.6;color:var(--ink);}

/* ---------- FLIPS GRID (Begrüßung) ---------- */
.flips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.flip-card{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:30px;}
.avatar{width:116px;height:116px;border-radius:50%;overflow:hidden;background:var(--cream-2);margin-bottom:20px;display:flex;align-items:flex-end;justify-content:center;padding:9px 9px 0;}
.avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom;}
.avatar video{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;}
.flip-card .figur-buehne{margin:0 auto 20px;width:100%;max-width:240px;aspect-ratio:4/5;background:#FFFCF7;border-radius:12px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;}
.flip-card .figur-buehne video,
.flip-card .figur-buehne img{display:block;height:100%;width:auto;object-fit:contain;object-position:bottom center;margin:0;}
.flips-grid .flip-card:nth-child(3) .figur-buehne{align-items:center;} /* Hazel mittig */
.flips-grid .flip-card:nth-child(3) .figur-buehne video,
.flips-grid .flip-card:nth-child(3) .figur-buehne img{height:58%;} /* Hazel kleiner, nicht dominant (Maren 15.07.) */
.visual-stage{max-width:820px;margin:0 0 8px;}
.visual-stage img{width:100%;height:auto;border-radius:20px;display:block;box-shadow:0 22px 54px rgba(41,37,80,0.14);}
.lupe-karte{background:var(--cream);border-radius:20px;padding:34px 30px 22px;margin-top:44px;box-shadow:0 26px 60px rgba(0,0,0,0.28);max-width:900px;}
.lupe-figur{position:relative;max-width:560px;margin:0 auto;container-type:inline-size;}
.lupe-figur img{width:100%;height:auto;display:block;}
.lupe-bubble{position:absolute;left:54.5%;top:2.8%;width:39.6%;height:27%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--fd);font-weight:600;color:var(--indigo);font-size:17px; /* Styleguide v3 (02.08.): clamp(15px,7.4cqi,36px) auf 17 (Kap. 12 Sprechblasen-Body) */line-height:1.15;}
.flip-card .name{font-family:var(--fd);font-weight:600;font-size:24px;color:var(--indigo);margin-bottom:8px;}
.flip-card .desc{font-size:17px;line-height:1.6;color:var(--ink-soft);}

/* ---------- NEEDS (Begrüßung) ---------- */
.needs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.need{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:32px;}
.need .ic{width:40px;height:40px;border-radius:12px;background:rgba(255,122,42,0.12);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;margin-bottom:18px;}
.need .ti{font-family:var(--fd);font-weight:600;font-size:24px;color:var(--ink);margin-bottom:8px;}
.need .desc{font-size:17px;line-height:1.6;color:var(--ink-soft);}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;}
.note{background:var(--cream-2);border-radius:16px;padding:24px 26px;}
.note .lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:10px;}
.note p{font-size:17px;line-height:1.6;color:var(--ink-soft);}

/* ---------- ACCOUNT STEPS (Begrüßung) ---------- */
.acc-steps{display:flex;flex-direction:column;margin-top:40px;max-width:880px;}
.acc-step{display:grid;grid-template-columns:88px 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--hair-light);align-items:center;}
.acc-step:last-of-type{border-bottom:1px solid var(--hair-light);}
.acc-step .num{font-family:var(--fd);font-weight:800;font-size:56px;line-height:1;color:var(--orange);letter-spacing:-0.02em;}
.acc-step .tag{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
.acc-step .title{font-family:var(--fd);font-weight:600;font-size:24px;color:var(--ink);margin-bottom:10px;letter-spacing:-0.01em;}
.acc-step .body{font-size:17px;line-height:1.6;color:var(--ink-soft);}
.acc-step .body a{color:var(--orange-deep);font-weight:600;text-decoration:none;}
.acc-step .body a:hover{text-decoration:underline;}

/* ---------- EXPLAIN (dark) ---------- */
.explain-text{font-size:19px;line-height:1.7;color:rgba(255,251,247,0.86);max-width:820px;margin-bottom:18px;}
.explain-text:last-child{margin-bottom:0;}
.explain-text strong{color:var(--cream);font-weight:600;}

/* ---------- PROMPT EXAMPLES (Begrüßung) — als Chat-Eingaben, spielerisch ---------- */
.prompt-list{display:flex;flex-direction:column;gap:12px;margin-top:36px;max-width:720px;}
.prompt-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--cream); /* Styleguide v3 (02.08.): Reinweiß #FFFFFF auf var(--cream) #FFFBF7 */border:1.5px solid rgba(41,37,80,0.22);border-radius:999px;padding:13px 12px 13px 24px;font-family:var(--fd);font-weight:500;font-size:19px;color:var(--ink);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.prompt-row:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:0 8px 22px rgba(255,122,42,0.14);}
.prompt-row .go{flex:none;width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;}
.prompt-after{margin-top:20px;font-size:17px;color:var(--ink-soft);}

/* ---------- WAYS (editoriale Hairline-Liste) ---------- */
.ways{display:flex;flex-direction:column;margin-top:44px;max-width:900px;}
.way{display:grid;grid-template-columns:88px 1fr;gap:32px;align-items:start;padding:32px 0;border-top:1px solid var(--hair-light);}
.way:last-child{border-bottom:1px solid var(--hair-light);}
.way .way-num{font-family:var(--fd);font-weight:800;font-size:56px;line-height:1;color:var(--orange);letter-spacing:-0.02em;}
.way .way-title{font-family:var(--fd);font-weight:600;font-size:24px;color:var(--ink);margin-bottom:10px;letter-spacing:-0.01em;}
.way p{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:640px;}
.way p em{font-style:normal;color:var(--ink);}
.way a{color:var(--orange-deep);font-weight:600;text-decoration:none;}
.way a:hover{text-decoration:underline;}

/* ---------- START CTA (Begrüßung) ---------- */
.start{text-align:center;background:var(--cream-2);}
.start-head{font-family:var(--fd);font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-0.02em;color:var(--indigo);margin-bottom:18px;}
.start-text{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:680px;margin:0 0 36px;text-align:left;}
.big-cta{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#fff;font-family:var(--fb);font-weight:700;font-size:19px;padding:20px 42px;border-radius:14px;text-decoration:none;box-shadow:0 14px 40px rgba(255,122,42,0.4);}
@keyframes pulse{0%,100%{box-shadow:0 14px 40px rgba(255,122,42,0.4),0 0 0 0 rgba(255,122,42,0.5);}50%{box-shadow:0 14px 40px rgba(255,122,42,0.4),0 0 0 14px rgba(255,122,42,0);}}

/* ---------- ABSCHLUSS ---------- */
.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.achievement{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:28px;}
.achievement .ck{width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;margin-bottom:16px;}
.achievement .nr{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
.achievement .tit{font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em;line-height:1.25;}
.achievement .ex{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.quote{text-align:center;background:var(--cream-2);}
.quote-text{font-family:var(--fd);font-weight:600;font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:-0.02em;color:var(--indigo);max-width:900px;margin:0 auto 16px;}
.quote-sub{font-size:19px;color:var(--ink-soft);text-align:center;} /* Styleguide v3 (02.08.): Zentrierung entfernt, linksbündig */
.quote-sub strong{color:var(--orange-deep);font-weight:600;}
.teil2-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;margin-top:8px;}
.teil2-text{font-size:19px;line-height:1.6;color:rgba(255,251,247,0.82);margin-bottom:32px;max-width:560px;}
.u-zart-cream{color:var(--cream);font-weight:600;}
.teil2-features{display:flex;flex-direction:column;}
.teil2-feature{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--hair-dark);font-family:var(--fd);font-weight:500;font-size:19px;color:var(--cream);}
.teil2-feature:last-of-type{border-bottom:1px solid var(--hair-dark);margin-bottom:32px;}
.teil2-feature .plus{color:var(--orange);font-size:24px;font-weight:700;margin-right:4px;flex:none;}
.teil2-image{display:flex;justify-content:center;align-items:flex-end;}
.teil2-image img{width:100%;max-width:320px;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.3));}
.teil2-cta,.cta-bottom-btn{display:inline-flex;align-items:center;gap:12px;background:var(--orange);color:#fff;font-family:var(--fb);font-weight:700;font-size:19px;padding:18px 36px;border-radius:14px;text-decoration:none;transition:background .15s;}
.teil2-cta:hover,.cta-bottom-btn:hover{background:var(--orange-deep);}
.bye-headline{font-family:var(--fd);font-weight:600;font-size:clamp(32px,4.5vw,48px);line-height:1.08;letter-spacing:-0.02em;color:var(--indigo);margin-bottom:18px;max-width:820px;}
.bye-text{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:720px;margin-bottom:14px;}
.bye-sig{font-family:var(--fd);font-style:normal;font-weight:500;font-size:19px;color:var(--orange-deep);margin-top:8px;}
.cta-bottom{text-align:center;background:var(--cream-2);padding:clamp(64px,8vw,100px) 80px;}
.cta-bottom-btn{font-size:24px;padding:22px 48px;box-shadow:0 14px 40px rgba(255,122,42,0.4);}

/* ---------- KURS 2 EXTRAS ---------- */
.header-part{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(255,122,42,0.4);border-radius:999px;padding:3px 11px;margin-left:10px;flex:none;white-space:nowrap;}
.hero-part-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);}
.hero-part-pill .num{color:var(--orange);font-weight:700;}
.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.ov-card{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:28px;}
.ov-card .nr{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}
.ov-card .ic{width:44px;height:44px;border-radius:12px;background:rgba(255,122,42,0.12);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:16px;}
.ov-card .ti{font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em;}
.ov-card .desc{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.file-anhang{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.05em;color:var(--orange-deep);background:rgba(255,122,42,0.1);border-radius:8px;padding:6px 12px;margin-bottom:14px;align-self:flex-start;}
.file-anhang::before{content:'\1F4CE';}
.datenschutz-hint{margin-top:24px;background:rgba(255,122,42,0.07);border-left:4px solid var(--orange-deep);border-radius:0 16px 16px 0;padding:24px 28px;max-width:900px;}
.datenschutz-hint .ds-lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange-deep);display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.datenschutz-hint .ds-lab::before{content:"!";flex:none;width:23px;height:23px;border-radius:50%;background:var(--orange-deep);color:#fff;font-family:var(--fd);font-weight:700;font-size:15px;line-height:23px;text-align:center;letter-spacing:0;}
.datenschutz-hint .ds-txt{font-size:17px;line-height:1.6;color:var(--ink);}

/* collapsible long answer (auf Indigo) */
details.answer{margin-top:4px;}
details.answer summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-family:var(--fb);font-weight:600;font-size:15px;color:var(--cream);background:rgba(255,251,247,0.1);border:1px solid rgba(255,251,247,0.25);border-radius:10px;padding:10px 16px;transition:background .15s;}
details.answer summary:hover{background:rgba(255,251,247,0.16);}
details.answer summary::-webkit-details-marker{display:none;}
details.answer summary .plus{color:var(--orange);font-weight:700;font-size:17px;line-height:1;transition:transform .2s;}
details.answer[open] summary{margin-bottom:16px;}
details.answer[open] summary .plus{transform:rotate(45deg);}

/* flip-bubble (kurzer Tipp) */
.flip-bubble{display:flex;align-items:flex-start;gap:16px;margin-top:36px;background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:24px 28px;max-width:820px;}
.flip-bubble .avatar-mini{width:44px;height:44px;border-radius:50%;background:var(--indigo);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:19px;flex:none;}
.flip-bubble .name{display:block;font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:6px;}
.flip-bubble .bubble{font-size:17px;line-height:1.6;color:var(--ink);}

/* rules grid (Datenschutz) */
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;}
.rule-block{background:var(--cream-2);border:1px solid var(--hair-light);border-radius:16px;padding:32px;}
.rule-block.bad{border-left:4px solid var(--ink-soft);}
.rule-block.good{border-left:4px solid var(--orange);}
.rule-lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:10px;display:block;}
.rule-block.bad .rule-lab{color:var(--ink-soft);}
.rule-block.good .rule-lab{color:var(--orange-deep);}
.rule-tit{font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:18px;letter-spacing:-0.01em;}
.rule-list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.rule-list li{position:relative;padding-left:28px;font-size:17px;line-height:1.5;color:var(--ink-soft);}
.rule-list li::before{position:absolute;left:0;top:0;font-weight:700;}
.rule-block.bad .rule-list li::before{content:'\00D7';color:var(--ink-soft);font-size:19px;line-height:1.3;}
.rule-block.good .rule-list li::before{content:'\2713';color:var(--orange);}
.example-side.bad-side{border-style:dashed;border-color:var(--orange);background:var(--cream);position:relative;overflow:hidden;}
.example-side.bad-side .lab{color:var(--orange-deep);}
.example-side.bad-side::after{content:"";position:absolute;top:22%;left:14%;right:22%;bottom:14%;pointer-events:none;background:linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255,122,42,0.6) calc(50% - 1px), rgba(255,122,42,0.6) calc(50% + 1px), transparent calc(50% + 1px));}

/* teaser (Abschluss) — wie teil2 */
.teaser-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;margin-top:8px;}
.teaser-text{font-size:19px;line-height:1.6;color:rgba(255,251,247,0.82);margin-bottom:16px;max-width:560px;}
.teaser-text:last-of-type{margin-bottom:32px;}
.teaser-image{display:flex;justify-content:center;align-items:flex-end;}
.teaser-image img{width:100%;max-width:320px;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.3));}
.teaser-cta{display:inline-flex;align-items:center;gap:12px;background:var(--orange);color:#fff;font-family:var(--fb);font-weight:700;font-size:19px;padding:18px 36px;border-radius:14px;text-decoration:none;transition:background .15s;}
.teaser-cta:hover{background:var(--orange-deep);}

/* FAQ-Seite */
.faq-page{max-width:820px;margin:0 auto;padding:clamp(56px,8vw,96px) 22px;}
.faq-lead{font-family:var(--fm);font-size:14px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:16px;}
.faq-h1{font-family:var(--fd);font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-0.02em;color:var(--indigo);margin-bottom:18px;}
.faq-intro{font-size:19px;line-height:1.6;color:var(--ink-soft);margin-bottom:48px;}
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-top:1px solid var(--hair-light);padding:28px 0;}
.faq-item:last-child{border-bottom:1px solid var(--hair-light);}
.faq-q{font-family:var(--fd);font-weight:600;font-size:24px;letter-spacing:-0.01em;color:var(--ink);padding-left:28px;position:relative;margin-bottom:12px;}
.faq-q::before{content:'';position:absolute;left:0;top:0.45em;width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,122,42,0.18);}
.faq-a{font-size:17px;line-height:1.65;color:var(--ink-soft);padding-left:28px;}
.faq-a strong{color:var(--ink);}
.faq-a em{font-style:normal;color:var(--ink);}
.contact-box{margin-top:48px;background:rgba(255,122,42,0.07);border-left:4px solid var(--orange);border-radius:0 20px 20px 0;padding:32px 36px;}
.contact-box .lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:10px;}
.contact-box .tit{font-family:var(--fd);font-weight:600;font-size:24px;color:var(--ink);margin-bottom:12px;letter-spacing:-0.01em;}
.contact-box p{font-size:17px;line-height:1.6;color:var(--ink);}
.contact-box a{color:var(--orange-deep);font-weight:600;text-decoration:none;}
.header-back{font-family:var(--fm);font-size:14px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:8px 11px;border-radius:7px;}
.header-back:hover{color:var(--orange);}

/* ---------- FOOTER ---------- */
footer{background:var(--indigo);color:rgba(255,251,247,0.6);padding:64px 80px;text-align:center;}
footer .fbrand{font-family:var(--fd);font-weight:600;font-size:17px;color:var(--cream);margin-bottom:6px;}
footer .fbrand .ki{color:var(--orange);}
footer p{font-family:var(--fm);font-size:14px;letter-spacing:0.05em;color:rgba(255,251,247,0.5);}
footer .flegal{margin-top:14px;font-family:var(--fm);font-size:14px;letter-spacing:0.05em;color:rgba(255,251,247,0.55);}
footer .flegal a{color:rgba(255,251,247,0.75);text-decoration:none;}
footer .flegal a:hover{color:var(--cream);text-decoration:underline;}
/* Footer mobil: Trennpunkte ausblenden, Links fliessen (07.08.2026) */
@media (max-width:600px){
  footer .flegal{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;font-size:0;}
  footer .flegal a{font-size:14px;white-space:nowrap;}
}

footer .ki-hinweis{margin-top:14px;font-family:var(--fb);font-size:14px;font-weight:400;color:rgba(255,251,247,0.55);text-align:center;}
footer .wruf-zeile{margin-top:22px;}
footer .wruf-btn{display:inline-block;font-family:var(--fb);font-weight:600;font-size:15px;color:var(--cream);background:transparent;border:2px solid rgba(255,251,247,0.45);border-radius:12px;padding:10px 22px;text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
footer .wruf-btn:hover,footer .wruf-btn:focus{background:var(--cream);color:var(--indigo);border-color:var(--cream);}

/* ============================================================
   CLAUDE DESIGN — Strukturlayer (Nav, Aufgabe-Box, Hero, Abstände)
   ============================================================ */

/* --- Mehr Luft zwischen Header-Block (Hero) und erstem Inhalt --- */
.task-hero + .section,
.hero + .section{ padding-top:clamp(46px,5vw,70px) !important; }

/* --- DEINE-AUFGABE-BOX: der klare Startpunkt (volle Orange-Fläche) --- */
.aufgabe-box{ position:relative; background:var(--cream-2); color:var(--ink); border-radius:24px;
  border:2px solid var(--orange);
  padding:clamp(34px,4vw,52px) clamp(30px,4vw,56px); max-width:1180px;
  box-shadow:0 18px 44px rgba(41,37,80,0.10); }
.aufgabe-box .lab{ display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fm); font-size:14px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:#fff; background:var(--orange); border-radius:999px; padding:7px 16px; margin-bottom:22px; }
.aufgabe-box .lab::before{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; flex:none; }
.aufgabe-box .tit{ font-family:var(--fd); font-weight:700; font-size:36px; /* Styleguide v3 (02.08.): 28/40 auf 36 (Treppe H2) */ line-height:1.08;
  letter-spacing:-0.015em; color:var(--indigo); margin-bottom:16px; }
.aufgabe-box .u-fine{ text-decoration-color:var(--orange); }
.aufgabe-box .txt{ font-size:17px; line-height:1.6; color:var(--ink); margin-bottom:14px; max-width:760px; }
.aufgabe-box .txt:last-of-type{ margin-bottom:0; }
.aufgabe-box .txt em{ font-style:normal; color:var(--ink); font-weight:600; }
.aufgabe-box .tryit-cta{ background:var(--orange); color:#fff; margin-top:24px; box-shadow:0 10px 24px rgba(255,122,42,0.25); }
.aufgabe-box .tryit-cta:hover{ background:var(--orange-deep); transform:translateY(-2px); }
.aufgabe-box .tryit-foot{ color:var(--ink-soft); }
.aufgabe-box .tryit-foot a{ color:var(--orange-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* --- TEIL 1: warme TAG-Bühne (hell) — bewusster Kontrast zur Nacht-Bühne
   von Teil 2, damit man oben sofort sieht: das ist ein anderer Kurs.
   (Korrektur Maren 03.07.: Kopf-/Titelbereich muss sich deutlich
   unterscheiden, ohne Teil-Schriftzug.) --- */
body:not(.teil2) .task-hero,
body:not(.teil2) .hero{ padding:30px 40px 8px; }
body:not(.teil2) .task-hero-grid,
body:not(.teil2) .hero-grid{
  position:relative;
  background:
    radial-gradient(120% 150% at 15% -20%, rgba(255,122,42,0.10), rgba(246,241,234,0) 55%),
    var(--cream-2);
  border:1px solid var(--hair-light);
  border-radius:30px;
  padding:clamp(40px,4.4vw,64px) clamp(36px,4vw,64px);
  max-width:1280px; margin-left:auto; margin-right:auto; overflow:hidden;
}
body:not(.teil2) .task-hero-grid > *,
body:not(.teil2) .hero-grid > *{ position:relative; z-index:1; }
/* warme orange Naht oben links (Marken-Signatur) */
body:not(.teil2) .task-hero-grid::before,
body:not(.teil2) .hero-grid::before{
  content:""; position:absolute; left:0; top:0; height:5px; width:min(220px,40%);
  background:var(--orange); border-radius:0 0 6px 0; z-index:1;
}
/* Typo auf heller Bühne */
body:not(.teil2) .hero-eyebrow{ color:var(--ink-soft); }
body:not(.teil2) .hero-wordmark, body:not(.teil2) .hero-headline{ color:var(--indigo); }
body:not(.teil2) .hero-sub-main{ color:var(--ink); }
body:not(.teil2) .hero-intro{ color:var(--ink-soft); }
body:not(.teil2) .task-label{
  display:inline-block; color:#fff; background:var(--orange);
  padding:5px 13px; border-radius:999px; letter-spacing:0.18em; margin-bottom:14px;
}
.task-number-big{ color:var(--indigo); }
body:not(.teil2) .task-meta{ color:var(--ink-soft); border-left-color:var(--hair-light); }
body:not(.teil2) .task-sub{ color:var(--indigo); }
body:not(.teil2) .task-headline{ color:var(--indigo); }
body:not(.teil2) .task-intro{ color:var(--ink-soft); }
/* Figur auf Creme-Spotlight (Sticker-Kontur bleibt unsichtbar) */
body:not(.teil2) .task-hero-image,
body:not(.teil2) .hero-image{
  align-self:stretch;
  background:
    radial-gradient(130% 70% at 50% 108%, rgba(255,122,42,0.20), rgba(255,251,247,0) 58%),
    var(--cream);
  border-radius:22px;
  padding:26px 22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 32px rgba(41,37,80,0.12), inset 0 0 0 1px rgba(41,37,80,0.06);
  overflow:hidden;
}
body:not(.teil2) .task-hero-image img,
body:not(.teil2) .hero-image img{
  filter:drop-shadow(0 10px 14px rgba(41,37,80,0.18));
  max-width:300px; width:100%;
}
/* Hero-Motiv: sitzt seit Einbau-Paket 17.07. auf eigener Indigo-Kachel,
   Creme-Linien aus dem SVG bleiben unverändert (kein Override mehr nötig). */

/* --- TEIL 1: dezente Fortschrittsanzeige (auf heller Bühne) --- */
.task-progress{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.task-prog-track{ position:relative; width:200px; max-width:40vw; height:2px; background:rgba(41,37,80,0.12);
  border-radius:999px; background:rgba(41,37,80,0.14); overflow:hidden; }
.task-prog-track i{ display:block; height:100%; background:var(--orange); border-radius:999px; box-shadow:0 0 0 1px rgba(255,122,42,0.4); }
.task-prog-track::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0, transparent calc(100%/6 - 2px),
    var(--cream-2) calc(100%/6 - 2px), var(--cream-2) calc(100%/6)); }
.task-prog-label{ font-family:var(--fm); font-size:14px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }

/* --- SCREENSHOT-RAHMEN (App-/Browser-Fenster für echte Visuals) --- */
.app-shot{ max-width:780px; margin:48px auto 0; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 34px 80px rgba(0,0,0,0.34); }
.app-shot-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--cream-2); border-bottom:1px solid var(--hair-light); }
.app-shot-dots{ display:flex; gap:7px; flex:none; }
.app-shot-dots i{ width:11px; height:11px; border-radius:50%; background:rgba(41,37,80,0.16); }
.app-shot-url{ flex:1; text-align:center; }
.app-shot-url span{ display:inline-block; font-family:var(--fm); font-size:14px; color:var(--ink-soft);
  background:#fff; border:1px solid var(--hair-light); border-radius:999px; padding:5px 20px; }
.app-shot image-slot{ display:block; width:100%; height:460px; background:var(--cream); }
.app-shot-cap{ text-align:left; margin:14px auto 0; max-width:780px; font-family:var(--fb); font-size:17px; /* Maren 02.08.: war Mono 14 in 60% über volle Breite, unleserlich. Jetzt Lesetext (Inter 17, Treppe), bündig zur Karte */
  font-weight:500; line-height:1.6; letter-spacing:normal; color:rgba(255,251,247,0.88); }

/* --- NAV: kompakter auf mittlerer Breite, damit alle 8 Punkte lesbar bleiben --- */
@media(max-width:1320px){
  .header-nav a{ padding:8px 8px; letter-spacing:0.05em; }
}
/* --- NAV: Auf-/Zuklapp-Menü auf schmalen Screens --- */
@media(max-width:1024px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
    margin-left:auto; border:1px solid var(--hair-light); border-radius:11px;
    background:rgba(255,251,247,0.7); cursor:pointer; flex:none; }
  .nav-toggle .nt-bars, .nav-toggle .nt-bars::before, .nav-toggle .nt-bars::after{
    content:""; display:block; width:20px; height:2px; background:var(--indigo); border-radius:2px;
    transition:transform .2s, opacity .2s; }
  .nav-toggle .nt-bars{ position:relative; }
  .nav-toggle .nt-bars::before{ position:absolute; top:-6px; left:0; }
  .nav-toggle .nt-bars::after{ position:absolute; top:6px; left:0; }
  .nav-toggle.is-open .nt-bars{ background:transparent; }
  .nav-toggle.is-open .nt-bars::before{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.is-open .nt-bars::after{ transform:translateY(-6px) rotate(-45deg); }
  .header-nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:2px; background:rgba(255,251,247,0.98);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--hair-light); box-shadow:0 18px 34px rgba(41,37,80,0.14);
    padding:10px 20px 16px; display:none; }
  .header-nav.open{ display:flex; }
  .header-nav a{ padding:14px 12px; font-size:15px; border-radius:8px; }
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .header-inner{padding:12px 20px;}
  .section,.task-hero,.section-next,.hero,.cta-bottom{padding-left:22px;padding-right:22px;}
  .section{padding-top:56px;padding-bottom:56px;}
  .task-hero,.hero{padding-top:32px;padding-bottom:48px;}
  .task-hero-grid,.hero-grid,.teil2-grid{grid-template-columns:1fr;gap:32px;}
  .task-hero-image,.hero-image{order:-1;}
  .task-hero-image img{max-width:240px;}
  .hero-image img{max-width:240px;}
  .teil2-image{order:-1;}
  .card-grid,.card-grid.cols-6,.check-grid,.achievement-grid{grid-template-columns:1fr 1fr;}
  .steps-row,.steps-row.three{grid-template-columns:1fr 1fr;gap:28px;}
  .example-flow{grid-template-columns:1fr;}
  .example-flow .example-tip{grid-column:auto;}
  .example-flow .flip-comment{grid-column:auto;text-align:left;}
  .example-arrow{transform:rotate(90deg);font-size:28px;}
  .needs-grid,.notes-grid,.flips-grid{grid-template-columns:1fr;}
  .overview-grid{grid-template-columns:1fr 1fr;}
  .next-cta{font-size:17px;padding:16px 26px;}
}
@media(max-width:980px){
  body:not(.teil2) .task-hero, body:not(.teil2) .hero{ padding:20px 16px 0; }
  body:not(.teil2) .task-hero-grid, body:not(.teil2) .hero-grid{ padding:36px 26px; border-radius:22px; }
}
@media(max-width:560px){.overview-grid{grid-template-columns:1fr;}}
@media(max-width:760px){.rules-grid,.teaser-grid{grid-template-columns:1fr;gap:32px;}.teaser-image{order:-1;}}
@media(max-width:560px){
  .card-grid,.card-grid.cols-6,.check-grid,.achievement-grid,.steps-row,.steps-row.three{grid-template-columns:1fr;}
  .task-number-row{gap:18px;}
  .task-meta{padding-left:16px;}
  .way{grid-template-columns:1fr;gap:8px;}
}

/* ---------- BARRIEREFREIHEIT ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--orange-deep); outline-offset:3px; border-radius:4px;
}
.dark a:focus-visible, .dark button:focus-visible, footer a:focus-visible{
  outline-color:var(--cream);
}
/* Pulse nur, wenn Bewegung erwuenscht */
@media (prefers-reduced-motion: reduce){
  .big-cta, .cta-bottom-btn{ animation:none; }
}

/* ---------- TON-UMSCHALTER (Aufgabe 2) ---------- */
.ton-chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 8px;}
button.ton-chip{cursor:pointer;font-family:var(--fm);font-size:15px;font-weight:600;letter-spacing:0.02em;
  color:var(--ink);background:rgba(255,251,247,0.6);border:1px solid var(--hair-light);
  border-radius:999px;padding:11px 20px;transition:background .15s,border-color .15s,color .15s;}
button.ton-chip:hover{border-color:var(--orange);}
button.ton-chip.is-active{background:var(--orange);border-color:var(--orange);color:#fff;}

/* ---------- DATENSCHUTZ-SELBSTTEST (Teil 2, Aufgabe 6) ---------- */
.quiz{max-width:900px;margin-top:44px;}
.quiz-item{border:1px solid var(--hair-light);border-radius:16px;background:var(--cream-2);padding:24px 28px;margin-bottom:14px;}
.quiz-q{font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:14px;letter-spacing:-0.01em;}
.quiz-btns{display:flex;gap:10px;}
.quiz-btns button{cursor:pointer;font-family:var(--fb);font-weight:600;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--hair-light);border-radius:10px;padding:10px 22px;transition:border-color .15s;}
.quiz-btns button:hover{border-color:var(--orange);}
.quiz-item.answered .quiz-btns button{cursor:default;opacity:0.55;}
.quiz-item.answered .quiz-btns button.chosen{opacity:1;border-width:2px;}
.quiz-item.answered.right .quiz-btns button.chosen{border-color:var(--orange-deep);color:var(--orange-deep);}
.quiz-item.answered.wrong .quiz-btns button.chosen{border-color:var(--indigo);color:var(--indigo);}
.quiz-fb{display:none;margin-top:14px;font-size:15px;line-height:1.55;color:var(--ink);}
.quiz-item.answered .quiz-fb{display:block;}
.quiz-fb b{font-family:var(--fm);font-size:14px;letter-spacing:0.1em;text-transform:uppercase;}
.quiz-item.right .quiz-fb b{color:var(--orange-deep);}
.quiz-item.wrong .quiz-fb b{color:var(--indigo);}
.quiz-result{display:none;margin-top:10px;font-family:var(--fd);font-weight:600;font-size:19px;color:var(--ink);}
.quiz-result.show{display:block;}

/* ---------- PROMPT-BAUKASTEN (Aufgabe 5) ---------- */
.pb-groups{display:flex;flex-direction:column;gap:22px;margin-top:32px;max-width:900px;}
.pb-lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);}
.pb-result{margin-top:30px;background:var(--cream-2);border:1px solid var(--hair-light);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:24px 28px;max-width:900px;}
.pb-sentence{font-family:var(--fd);font-weight:500;font-size:19px;line-height:1.5;color:var(--ink);margin:10px 0 18px;}
.pb-copy{cursor:pointer;font-family:var(--fb);font-weight:700;font-size:15px;color:#fff;background:var(--orange);border:none;border-radius:10px;padding:12px 24px;transition:background .15s;}
.pb-copy:hover{background:var(--orange-deep);}

/* ============================================================
   COWORK-LAYER (01.07.2026) — Scroll-Reveal, Figuren-Hover,
   Interaktiv-Muster, Videos, Feier-Momente, Übergänge.
   Alles progressive Enhancement: ohne JS (html.anim) ist
   jeder Inhalt sofort sichtbar. Bewegung nur, wenn erwünscht.
   ============================================================ */

/* --- 1 · SCROLL-REVEAL (Schritte + Recap, ruhig nacheinander, deutlich sichtbar) --- */
html.anim .reveal{ opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
html.anim .in > .reveal{ opacity:1; transform:none; }
/* Account-Schritte: Ziffer kommt mit kleinem Pop in Orange an */
html.anim .acc-steps .reveal .num{ transform:scale(.55); transform-origin:left center; color:var(--ink-soft);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1) .2s, color .5s ease .2s; }
html.anim .acc-steps.in .reveal .num{ transform:scale(1); color:var(--orange); }
/* Schritte: die orange Oberlinie zeichnet sich mit --- */
html.anim .steps-row .step{ border-top-color:transparent; position:relative; }
html.anim .steps-row .step::before{ content:""; position:absolute; top:-2px; left:0; right:0; height:2px;
  background:rgba(255,122,42,0.4); transform:scaleX(0); transform-origin:left;
  transition:transform .8s ease; transition-delay:inherit; }
html.anim .steps-row.in .step::before{ transform:none; }

/* --- 2 · FIGUREN-HOVER (Begrüßung: nur die Figur bewegt sich, nie die Kachel) --- */
@media (prefers-reduced-motion: no-preference){
  .flip-card .avatar img{ transform-origin:50% 92%; }
  .flips-grid .flip-card:nth-child(1):hover .avatar img{ animation:flipWave .9s ease; }
  .flips-grid .flip-card:nth-child(2):hover .avatar img{ animation:flipBounce .9s ease; }
  .flips-grid .flip-card:nth-child(3):hover .avatar img{ animation:hazelWiggle 1s ease; }
  /* Hero-Figuren: kleiner, ruhiger Gruß beim Überfahren */
  .task-hero-image img, .hero-image img{ transition:transform .35s ease; }
  .task-hero-image:hover img, .hero-image:hover img{ transform:translateY(-6px); }
}
@keyframes flipWave{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg) translateY(-4px)}
  55%{transform:rotate(3deg)} 80%{transform:rotate(-1.5deg)} }
@keyframes flipBounce{ 0%,100%{transform:none} 30%{transform:translateY(-9px)}
  55%{transform:translateY(0)} 75%{transform:translateY(-4px)} }
@keyframes hazelWiggle{ 0%,100%{transform:rotate(0)} 18%{transform:rotate(-6deg) translateY(-5px)}
  42%{transform:rotate(5deg) translateY(-2px)} 66%{transform:rotate(-3deg)} 84%{transform:rotate(2deg)} }
/* kleine Sprechblase (erscheint nur beim Hover, rein dekorativ) */
.flip-card{ position:relative; }
.flip-hallo{ position:absolute; top:22px; left:150px; max-width:calc(100% - 168px); z-index:2; pointer-events:none;
  font-family:var(--fd); font-weight:600; font-size:15px; color:var(--indigo);
  background:var(--cream); border:1px solid var(--hair-light); border-radius:14px 14px 14px 4px;
  padding:8px 14px; box-shadow:0 8px 20px rgba(41,37,80,0.12);
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
.flip-card:hover .flip-hallo{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .flip-card .flip-hallo{ display:none; } }

/* --- 3 · INTERAKTIV-PANEL (Ton-Chips, Baukasten, Rollen: lädt sichtbar zum Klicken ein) --- */
.try-panel{ position:relative; background:var(--cream-2); border:1px solid var(--hair-light);
  border-radius:24px; padding:clamp(28px,3.5vw,44px); margin-top:40px; overflow:hidden; }
.try-panel::before{ content:""; position:absolute; top:0; left:0; height:4px; width:min(180px,36%);
  background:var(--orange); border-radius:0 0 6px 0; }
.try-panel .example-flow{ margin-top:32px; }
.try-panel .example-side{ background:var(--cream); }
.try-panel .example-side.out{ background:var(--indigo); }
.try-panel .pb-result{ background:var(--cream); }
.try-badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fm); font-size:14px;
  font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#fff;
  background:var(--indigo); border-radius:999px; padding:7px 16px; margin-bottom:18px; }
.try-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none; }
button.ton-chip{ font-size:15px; }
button.ton-chip:hover{ transform:translateY(-1px); }
html.anim .try-panel.in .ton-chip.is-active{ animation:chipNudge 1.1s ease .5s 1; }
@keyframes chipNudge{ 0%,100%{transform:none} 30%{transform:scale(1.06)} 60%{transform:scale(1)} 80%{transform:scale(1.03)} }

/* --- 4 · KACHELN (größere Icons, leiser Hover-Lift) --- */
.tile .ic{ width:64px; height:64px; border-radius:16px; }
.tile .ic svg{ width:32px; height:32px; }
.tile, .ov-card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tile:hover, .ov-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(41,37,80,0.10);
  border-color:rgba(255,122,42,0.45); }
.ov-card .ic{ width:54px; height:54px; }
.ov-card .ic svg{ width:28px; height:28px; }
/* klickbare Themen-Kachel (Aufgabe 3) */
button.tile{ cursor:pointer; text-align:left; font:inherit; color:inherit; display:block; width:100%; }
button.tile.is-active{ border-color:var(--orange); box-shadow:0 14px 30px rgba(255,122,42,0.14); }
button.tile.is-active .ic{ background:var(--orange); color:#fff; }

/* --- 5 · BILD-SLOTS (Aufgabe 5: echte Beispielbilder folgen) --- */
.bild-slot{ margin-top:18px; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--cream); }
.bild-slot img{ width:100%; height:100%; object-fit:cover; }
.bild-slot .bs-lab{ display:none; font-family:var(--fm); font-size:14px; letter-spacing:0.08em;
  color:var(--ink-soft); text-align:center; padding:0 12px; }
.bild-slot.pending{ border:1.5px dashed rgba(41,37,80,0.28); }
.bild-slot.pending .bs-lab{ display:block; }
/* Foto-Anhang in der Chat-Sprechblase (wie ein hochgeladenes Bild) */
.bild-slot.chat-anhang{ margin:0 0 12px; max-width:240px; aspect-ratio:4/3; border-radius:12px; }

/* --- 6 · VIDEO-DEMO (stummes Loop-Video, ruhig gerahmt) --- */
.video-demo{ max-width:780px; margin:44px auto 0; border-radius:16px; overflow:hidden;
  box-shadow:0 34px 80px rgba(0,0,0,0.34); }
.video-demo video{ display:block; width:100%; height:auto; }

/* Feier-Funkeln entfernt (Maren 05.07.: keine Sterne mehr, nirgendwo) */

  70%{opacity:.4; transform:scale(.7) rotate(60deg);} }
html.anim .celebrate.in img{ animation:celebrateFloat 5.5s ease-in-out infinite; }
@keyframes celebrateFloat{ 0%,100%{transform:none} 50%{transform:translateY(-8px)} }
/* kleiner Feier-Moment vor dem Seitenwechsel (Aufgabe 6) */
.next-feier{ text-align:center; font-family:var(--fd); font-weight:600; font-size:clamp(24px,3vw,32px);
  letter-spacing:-0.015em; color:var(--indigo); max-width:1180px; margin:0 auto 26px; }
.next-feier .dot{ display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--orange); margin:0 14px; vertical-align:middle; }

/* --- 8 · ÜBERGÄNGE (Next-CTA: Marken-Naht + Pfeil-Bewegung) --- */
.next-cta{ position:relative; overflow:hidden; }
.next-cta::before{ content:""; position:absolute; top:0; left:0; height:4px; width:min(160px,30%);
  background:var(--orange); border-radius:0 0 6px 0; }
.next-cta .arrow{ transition:transform .2s ease; }
.next-cta:hover .arrow{ transform:translateX(6px); }

/* --- 9 · BEGRÜSSUNG: „Schön, dass du da bist!" als warmer Blickfang --- */
.hero-grid .hero-sub-main{ font-size:clamp(24px,3vw,36px); font-weight:600;
  line-height:1.15; letter-spacing:-0.015em; margin-top:4px; }

/* --- 10 · DATENSCHUTZ (Teil 2, Aufgabe 6): zwei Spalten klar getrennt --- */
.rule-block.bad{ background:rgba(41,37,80,0.05); border-left:4px solid var(--indigo); }
.rule-block.good{ background:rgba(255,122,42,0.06); }
.rule-block .rule-lab{ display:flex; align-items:center; gap:10px; }
.rule-block .rule-lab::before{ flex:none; width:22px; height:22px; border-radius:50%;
  font-family:var(--fd); font-weight:700; font-size:14px; line-height:22px;
  text-align:center; letter-spacing:0; }
.rule-block.bad .rule-lab{ color:var(--indigo); }
.rule-block.bad .rule-lab::before{ content:"\00D7"; background:var(--indigo); color:var(--cream); font-size:15px; }
.rule-block.good .rule-lab::before{ content:"\2713"; background:var(--orange); color:#fff; }
.rule-block.bad .rule-list li::before{ color:var(--indigo); }

/* --- 11 · ZERTIFIKAT (Abschluss: Vorschau + Anforderung) --- */
.zert-block{ margin-top:36px; display:grid; grid-template-columns:minmax(280px,420px) 1fr;
  gap:40px; align-items:center; justify-content:center; text-align:left; }
.zert-preview{ border-radius:14px; overflow:hidden; border:1px solid var(--hair-light);
  box-shadow:0 24px 60px rgba(41,37,80,0.18); background:var(--cream); }
.zert-preview img{ display:block; width:100%; height:auto; }
.zert-side .lab{ font-family:var(--fm); font-size:14px; font-weight:600; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--orange-deep); display:block; margin-bottom:12px; }
@media(max-width:760px){ .zert-block{ grid-template-columns:1fr; gap:28px; } }
/* Mini-Vorschau als reines CSS (für Teil 2, solange kein PDF existiert) */
.zert-mini{ position:relative; aspect-ratio:297/210; border-radius:14px; background:var(--cream);
  border:1px solid var(--hair-light); box-shadow:0 24px 60px rgba(41,37,80,0.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:8%; }
.zert-mini::before{ content:""; position:absolute; inset:6%; border:2px solid var(--indigo); border-radius:8px; }
.zert-mini::after{ content:""; position:absolute; top:calc(6% - 2px); left:50%; transform:translateX(-50%);
  width:26%; height:5px; background:var(--orange); border-radius:5px; }
.zert-mini .zm-brand{ font-family:var(--fd); font-weight:700; font-size:clamp(19px,2.4vw,26px);
  letter-spacing:-0.02em; color:var(--indigo); }
.zert-mini .zm-brand .ki{ color:var(--orange); }
.zert-mini .zm-kicker{ font-family:var(--fm); font-size:14px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--ink-soft); }
.zert-mini .zm-line{ width:44%; border-bottom:1.5px solid var(--indigo); margin-top:10px; }
.zert-mini .zm-dots{ color:var(--orange); font-size:14px; letter-spacing:0.6em; }

/* --- 12 · FAQ: Kontaktbox mit Figur --- */
.contact-box.contact-box-flip{ display:grid; grid-template-columns:1fr 130px; gap:24px; align-items:end; }
.contact-box .cb-fig img{ width:100%; max-width:130px; }
@media(max-width:560px){ .contact-box.contact-box-flip{ grid-template-columns:1fr; }
  .contact-box .cb-fig{ display:flex; justify-content:flex-end; margin-top:-8px; } }

/* --- 13 · Illustration (Aufgabe 3: dampfende Kaffeekanne) --- */
.illu-inline{ display:flex; justify-content:center; margin:8px 0 0; }
.illu-inline svg{ width:min(220px,40vw); height:auto; }
@media (prefers-reduced-motion: no-preference){
  .illu-steam path{ animation:steamUp 3.2s ease-in-out infinite; opacity:0; }
  .illu-steam path:nth-child(2){ animation-delay:1.1s; }
  .illu-steam path:nth-child(3){ animation-delay:2.2s; }
}
@keyframes steamUp{ 0%{opacity:0; transform:translateY(6px);}
  35%{opacity:.7;} 100%{opacity:0; transform:translateY(-10px);} }

/* ============================================================
   COWORK-LAYER v2 (02.07.2026) — Review-Korrekturen:
   Chat-Optik, Kachel-Illustrationen + gleiche Höhe, Akkordeon
   „Weitere Beispiele", Journey-Vorschau, Feier-Sparkles.
   ============================================================ */

/* --- 14 · CHAT-OPTIK: Beispiel-Felder wie der echte Chatbot ---
   Neutraler Chat (weiße App-Fläche wie in den Screenshots, graue
   Nutzer-Sprechblase, Antwort als Klartext) in einem dezenten
   Marken-Rahmen mit Browser-Zeile. `.compare` behält die alte
   Gegenüberstellung (K2-A6: falsch/richtig). */
.example-flow:not(.compare){ display:block; max-width:820px; background:#fff;
  border:1px solid var(--hair-light); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 44px rgba(41,37,80,0.10); padding:0; }
.example-flow:not(.compare)::before{ content:"chatgpt.com"; display:block; text-align:center;
  font-family:var(--fm); font-size:14px; color:var(--ink-soft); letter-spacing:0.02em;
  padding:11px 16px; background:var(--cream-2); border-bottom:1px solid var(--hair-light);
  background-image:radial-gradient(circle 5.5px at 20px 50%, rgba(41,37,80,0.16) 5.5px, transparent 6px),
    radial-gradient(circle 5.5px at 38px 50%, rgba(41,37,80,0.16) 5.5px, transparent 6px),
    radial-gradient(circle 5.5px at 56px 50%, rgba(41,37,80,0.16) 5.5px, transparent 6px); }
.example-flow:not(.compare) .example-arrow{ display:none; }
.example-flow:not(.compare) .example-side{ background:#F2F2F2; border:none; border-radius:18px 18px 4px 18px;
  width:fit-content; max-width:min(560px,82%); margin:24px 24px 0 auto; padding:14px 18px; display:block; }
.example-flow:not(.compare) .example-side .lab{ font-size:14px; letter-spacing:0.08em;
  color:rgba(26,26,46,0.45); margin-bottom:8px; }
.example-flow:not(.compare) .example-side .txt{ color:#0D0D0D; font-size:17px; }
.example-flow:not(.compare) .example-side.out{ background:transparent; border-radius:0;
  width:auto; max-width:none; margin:22px 24px 24px; padding:0 0 0 42px; position:relative; }
.example-flow:not(.compare) .example-side.out::before{ content:""; position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%; border:1px solid var(--hair-light); background:#fff;
  background-image:radial-gradient(circle 5px at 50% 50%, var(--orange) 5px, transparent 6px); }
.example-flow:not(.compare) .example-side.out .lab{ color:rgba(26,26,46,0.45); margin-bottom:10px; }
.example-flow:not(.compare) .example-side.out .txt{ color:var(--ink); }
.example-flow:not(.compare) .example-tip{ margin:4px 24px 22px; grid-column:auto; max-width:none; }
.example-flow:not(.compare) .flip-comment{ margin:4px 24px 22px; grid-column:auto; }
.example-flow:not(.compare) .example-image{ margin-top:8px; }
/* Aufklapp-Antwort auf der hellen Chat-Fläche */
.example-flow:not(.compare) details.answer summary{ color:var(--ink); background:var(--cream-2);
  border-color:var(--hair-light); }
.example-flow:not(.compare) details.answer summary:hover{ background:rgba(41,37,80,0.07); }
/* Flip-Kommentar generell nicht über die halbe Seite laufen lassen */
.flip-comment{ max-width:640px; }

/* --- 15 · KACHELN v2: Illustrations-Bühne + gleiche Höhe --- */
.card-grid{ align-items:stretch; }
.tile{ display:flex; flex-direction:column; }
.tile .ex{ flex:1; }
.tile .spot-stage, .need .spot-stage{ width:100%; height:104px; border-radius:12px; margin-bottom:18px; flex:none;
  border:1px solid var(--hair-light);
  background:radial-gradient(95% 130% at 50% 118%, rgba(255,122,42,0.16), rgba(255,251,247,0) 62%), var(--cream);
  display:flex; align-items:center; justify-content:center; }
.tile .spot-stage svg, .need .spot-stage svg{ width:74px; height:74px; display:block; }
button.tile.is-active .spot-stage{ border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange); }
/* A5: Bild oben, randlos, alle auf einer Linie */
.tile .bild-slot.top{ order:-1; margin:-28px -28px 18px; aspect-ratio:16/10;
  border-radius:15px 15px 0 0; }
.tile .bild-slot.top.pending{ margin:0 0 18px; border-radius:12px; }

/* --- 16 · AKKORDEON „Weitere Beispiele" (Vertiefung unter der Aufgabe) --- */
details.more{ border:1px solid var(--hair-light); border-radius:20px; background:var(--cream-2);
  margin-top:18px; }
details.more[open]{ background:var(--cream); }
details.more>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:24px 30px; font-family:var(--fd); font-weight:600; font-size:19px; letter-spacing:-0.01em;
  color:var(--ink); }
details.more>summary::-webkit-details-marker{ display:none; }
details.more>summary:hover{ color:var(--indigo); }
details.more .more-plus{ flex:none; width:34px; height:34px; border-radius:50%; background:rgba(255,122,42,0.12);
  color:var(--orange-deep); font-size:22px; font-weight:700; line-height:34px; text-align:center;
  transition:transform .2s ease; }
details.more[open]>summary .more-plus{ transform:rotate(45deg); }
details.more .more-body{ padding:2px 30px 32px; }
.more-intro-hint{ font-family:var(--fm); font-size:14px; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft); max-width:1180px; margin:56px auto 0;
  display:flex; align-items:center; gap:12px; }
.more-intro-hint::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none; }

/* ============================================================
   AKKORDEON-VEREINHEITLICHUNG 01.08.
   Maren will kursweit EIN Akkordeon-Erscheinungsbild statt zwei
   verschiedene Optiken. Zielbild: Geist-Titel (var(--fd), 600,
   19px) + runder, weich orange getönter Plus-Kreis — das ist der
   Look, den details.more bereits hat (siehe Block 16 oben).
   details.bonus (Mono-Titel, nacktes Plus-Zeichen) wird hier per
   CSS auf denselben Look gebracht, ohne die Seiten anzufassen.
   ============================================================ */
.bonus>summary{
  font-family:var(--fd); font-weight:600; font-size:19px; letter-spacing:-0.01em; color:var(--ink);
}
.bonus>summary:hover{ color:var(--indigo); }
.bonus .bonus-plus{
  flex:none; width:34px; height:34px; border-radius:50%; background:rgba(255,122,42,0.12);
  color:var(--orange-deep); font-size:22px; font-weight:700; line-height:34px; text-align:center;
  display:inline-block; text-decoration:none;
}

/* --- 17 · JOURNEY (K2-Begrüßung: 6 Aufgaben als Weg) --- */
.overview-grid.journey{ display:block; position:relative; max-width:820px; margin:44px auto 0; }
.overview-grid.journey::before{ content:""; position:absolute; left:25px; top:14px; bottom:14px; width:2px;
  background:repeating-linear-gradient(180deg, rgba(41,37,80,0.28) 0 7px, transparent 7px 15px); }
.overview-grid.journey .ov-card{ position:relative; margin:0 0 18px 64px; }
.overview-grid.journey .ov-card:last-child{ margin-bottom:0; }
.overview-grid.journey .ov-card::before{ content:""; position:absolute; left:-46px; top:30px;
  width:16px; height:16px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,122,42,0.18); }
.overview-grid.journey .ov-card{ display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:center; }
.overview-grid.journey .ov-card .spot-stage{ width:96px; height:96px; border-radius:14px; margin:0; flex:none;
  border:1px solid var(--hair-light);
  background:radial-gradient(95% 130% at 50% 118%, rgba(255,122,42,0.16), rgba(255,251,247,0) 62%), var(--cream);
  display:flex; align-items:center; justify-content:center; grid-row:1 / span 3; }
.overview-grid.journey .ov-card .spot-stage svg{ width:64px; height:64px; }
.overview-grid.journey .ov-card .nr{ margin-bottom:6px; }
.overview-grid.journey .ov-card .ti{ margin-bottom:4px; }
@media(max-width:560px){
  .overview-grid.journey::before{ left:17px; }
  .overview-grid.journey .ov-card{ margin-left:44px; grid-template-columns:72px 1fr; gap:14px; }
  .overview-grid.journey .ov-card::before{ left:-35px; }
  .overview-grid.journey .ov-card .spot-stage{ width:72px; height:72px; }
}

/* --- 18 · RECAP-PAYOFF (Abschluss, freigegebener Text, kräftig als Statement) --- */
.recap-payoff{ margin-top:56px; max-width:940px; font-family:var(--fd); font-weight:600;
  font-size:clamp(24px,3vw,36px); line-height:1.22; letter-spacing:-0.015em; color:var(--indigo);
  border-top:2px solid var(--hair-light); padding-top:32px; position:relative; }
.recap-payoff::before{ content:""; position:absolute; top:-2px; left:0; width:min(180px,32%); height:5px;
  background:var(--orange); border-radius:0 0 6px 0; }
.recap-payoff strong{ display:block; font-weight:700; color:var(--orange); margin-bottom:10px; }
/* Recap-Karten: kräftiger + deutlicher Hover */
.achievement{ position:relative; border-top:3px solid rgba(255,122,42,0.5); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.achievement:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(41,37,80,0.18); border-top-color:var(--orange); border-color:var(--orange); }
.achievement .ck{ width:38px; height:38px; font-size:17px; box-shadow:0 0 0 4px rgba(255,122,42,0.18); }
.achievement .nr{ color:var(--orange-deep); }

/* ============================================================
   COWORK-LAYER v3 (Runde 3) — Aufgabe-Box als Chatfenster,
   heller Schritte-Block, Karten-Inhalte auf dunklen Sektionen.
   ============================================================ */

/* --- 19 · AUFGABE-BOX: Label „Aufgabe" + echtes Chatfenster --- */
.aufgabe-stage{ max-width:1180px; }
.aufgabe-label{ display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fm); font-size:15px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  color:#fff; background:var(--orange); border-radius:14px 14px 0 0; padding:12px 28px 10px; margin-left:26px; }
.aufgabe-label::before{ content:""; width:9px; height:9px; border-radius:50%; background:#fff; flex:none; }
.aufgabe-box.chat{ background:#fff; padding-top:0; overflow:hidden;
  box-shadow:0 28px 64px rgba(41,37,80,0.16); }
.aufgabe-box.chat::before{ content:"chatgpt.com"; display:block; text-align:center;
  margin:0 calc(-1 * clamp(30px,4vw,56px)) 30px; padding:11px 16px;
  font-family:var(--fm); font-size:14px; color:var(--ink-soft); letter-spacing:0.02em;
  background-color:var(--cream-2); border-bottom:1px solid var(--hair-light);
  background-image:radial-gradient(circle 5.5px at 22px 50%, rgba(41,37,80,0.16) 5.5px, transparent 6px),
    radial-gradient(circle 5.5px at 40px 50%, rgba(41,37,80,0.16) 5.5px, transparent 6px),
    radial-gradient(circle 5.5px at 58px 50%, rgba(41,37,80,0.16) 5.5px, transparent 6px); }
.aufgabe-input{ display:flex; align-items:center; gap:10px; margin-top:28px; max-width:640px;
  background:#fff; border:1.5px solid rgba(41,37,80,0.25); border-radius:999px;
  padding:12px 10px 12px 22px; text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease; }
.aufgabe-input:hover{ border-color:var(--orange); box-shadow:0 8px 22px rgba(255,122,42,0.16); }
.aufgabe-input .ai-ph{ font-family:var(--fb); font-size:17px; color:rgba(26,26,46,0.45); }
.aufgabe-input .chat-cursor{ display:inline-block; width:2.5px; height:17px; background:var(--orange);
  border-radius:1px; box-shadow:0 0 8px rgba(255,122,42,0.5); flex:none; }
@media (prefers-reduced-motion: no-preference){
  .aufgabe-input .chat-cursor{ animation:cursorBlink 1.1s steps(2) infinite; }
}
@keyframes cursorBlink{ 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }
.aufgabe-input .ai-send{ margin-left:auto; flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--orange); color:#fff; font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.aufgabe-box.chat .tryit-cta{ margin-top:20px; }

/* --- 20 · Heller „So geht's"-Block (Rhythmus Hell→Dunkel→Hell) --- */
.section:not(.dark) .step-title{ color:var(--ink); }
.section:not(.dark) .step-body{ color:var(--ink-soft); }
.section:not(.dark) .step-body em{ color:var(--ink); }
.section:not(.dark) .step{ border-top-color:rgba(255,122,42,0.5); }
.section:not(.dark) .app-shot{ box-shadow:0 26px 60px rgba(41,37,80,0.18); }
.section:not(.dark) .app-shot-cap{ color:var(--ink-soft); }
.section:not(.dark) .video-demo{ box-shadow:0 26px 60px rgba(41,37,80,0.18); }
.chips-big .chip{ border-color:rgba(255,122,42,0.6); box-shadow:0 0 0 4px rgba(255,122,42,0.08); }

/* --- 21 · Karten-Inhalte auf dunklen Beispiel-Sektionen --- */
.dark .try-panel .s-head{ color:var(--indigo); }
.dark .try-panel .s-sub{ color:var(--ink-soft); }
.dark .try-panel .chip{ color:var(--ink); background:rgba(255,251,247,0.7); border-color:var(--hair-light); }
.dark .try-panel button.ton-chip:hover{ border-color:var(--orange); }
.dark .try-panel button.ton-chip.is-active{ background:var(--orange); border-color:var(--orange); color:#fff; }
.dark .sub-text{ color:rgba(255,251,247,0.8); }
/* Flip-Kommentare: außerhalb der Chat-Karte auf Indigo helles Orange, innen dunkles */
.dark .flip-comment{ color:rgba(255,251,247,0.88); }
.example-flow:not(.compare) .flip-comment{ color:var(--ink-soft); }

/* ============================================================
   COWORK-LAYER v4 — Themen-Signatur: jede Aufgabenseite bekommt
   ihr eigenes Gesicht (Hero-Motiv + gespiegelter Rhythmus).
   ============================================================ */

/* --- 22 · HERO-MOTIV: seit Einbau-Paket 17.07. feste Grid-Spalte (siehe Ende der Datei),
   Wasserzeichen-Positionierung entfernt. --- */

/* --- 22b · Begrüßungs-Hero: Animation statt Standbild --- */
.hero-image video{ width:100%; max-width:330px; display:block; border-radius:12px; }

/* --- 23 · Gespiegelte Hero-Bühne entfällt (Einbau-Paket 17.07.):
   Motiv · Text · Figur sitzen auf allen Aufgabenseiten identisch. --- */


/* ---------- TEIL-1-AUFFRISCHUNG (05.07., Fable) — Tag-Bühne wärmer, mehr Orange.
   Bewusst NUR Teil 1: alles über body:not(.teil2) gescoped, Teil 2 bleibt unverändert. */
body:not(.teil2) .hero{
  background:
    radial-gradient(640px 440px at 76% 44%, rgba(255,122,42,0.15), transparent 70%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 82%);
}
body:not(.teil2) .hero-eyebrow{ color:var(--orange-deep); }
body:not(.teil2) .hero-image{ position:relative; }
body:not(.teil2) .hero-image::before{
  content:""; position:absolute; top:-16px; left:8%; width:36px; height:36px;
  border-top:3px solid var(--orange); border-left:3px solid var(--orange); border-radius:2px 0 0 0;
}
body:not(.teil2) .hero-image::after{
  content:""; position:absolute; bottom:-16px; right:8%; width:36px; height:36px;
  border-bottom:3px solid var(--orange); border-right:3px solid var(--orange); border-radius:0 0 2px 0;
}

/* Thema-Wort: seit Einbau-Paket 17.07. als Mono-Etikett in der Meta-Zeile (siehe Ende der Datei). */

/* ---------- NUTZERTEST-FIXES (Briefing 17.07.) ----------
   Teilwechsel-Link: Styling seit Einbau-Paket 17.07. als Mono-Pill (siehe Ende der Datei). */
.tab-hinweis{margin-top:12px;font-size:15px;color:var(--ink-soft);}

/* ---------- ABSCHLUSS-QUIZ v2 (Einbau-Paket Teil 3, 17.07.):
   Creme-Karte mit Orange-Streifen, A/B/C-Optionen, Prüfen-Schritt,
   Richtig/Falsch-Zustand, Score-Endscreen. ---------- */
.quizbox{max-width:760px;}
.qz{background:var(--cream);border:1px solid var(--hair-light);border-radius:20px;padding:28px 30px;position:relative;overflow:hidden;}
.qz::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange);}
.qz-head{display:flex;align-items:center;gap:20px;margin-bottom:10px;}
.qz-av{flex:none;width:120px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.qz-av .avi{width:64px;height:64px;border-radius:50%;background:var(--cream-2);border:1px solid var(--hair-light);background-size:300%;}
.qz-av .cap{font-family:var(--fb);font-size:14px;color:var(--ink-soft);text-align:center;line-height:1.35;}
.qz-progress{flex:1;min-width:0;}
.qz-counter{font-family:var(--fm);font-weight:600;font-size:14px;letter-spacing:0.14em;color:var(--ink);margin-bottom:8px;text-transform:uppercase;}
.qz-counter span{color:var(--ink-soft);}
.qz-track{height:3px;background:rgba(41,37,80,0.12);border-radius:2px;overflow:hidden;}
.qz-track i{display:block;height:100%;background:var(--orange);border-radius:2px;transition:width .3s ease;}
.qz-q{font-family:var(--fd);font-weight:600;font-size:24px;line-height:1.25;letter-spacing:-0.01em;margin:20px 0 26px;color:var(--ink);}
.qz-opts{display:flex;flex-direction:column;gap:10px;}
.qz-opt{display:flex;align-items:center;gap:14px;border:1.5px solid var(--hair-light);background:#fff;border-radius:14px;padding:14px 18px;font-family:var(--fb);font-size:17px;line-height:1.45;color:var(--ink);text-align:left;cursor:pointer;width:100%;transition:border-color .18s,background .18s;}
.qz-opt .mark{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(41,37,80,0.25);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-weight:600;font-size:14px;color:var(--ink-soft);}
.qz-opt.selected{border-color:var(--orange);background:rgba(255,122,42,0.06);}
.qz-opt.selected .mark{background:var(--orange);border-color:var(--orange);color:#fff;}
.qz-opt.correct{border-color:#7ba87c;background:rgba(123,168,124,0.08);}
.qz-opt.correct .mark{background:#7ba87c;border-color:#7ba87c;color:#fff;}
.qz-opt.wrong{border-color:rgba(177,72,58,0.45);background:rgba(177,72,58,0.04);}
.qz-opt.wrong .mark{background:rgba(177,72,58,0.12);border-color:rgba(177,72,58,0.45);color:#b1483a;}
.qz-opt.dim{opacity:1;}
.qz-opt:disabled{cursor:default;}
.qz-fb{margin-top:22px;padding:16px 20px;border-radius:12px;background:var(--cream-2);border-left:3px solid var(--orange);}
.qz-fb .fbtitle{font-family:var(--fm);font-weight:600;font-size:14px;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange-deep);margin:0 0 6px;}
.qz-fb .fbtext{font-family:var(--fb);font-size:17px;line-height:1.55;color:var(--ink);margin:0;}
.qz-bar{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:20px;border-top:1px solid var(--hair-light);}
.qz-back{font-family:var(--fm);font-size:14px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);background:none;border:none;padding:0;cursor:pointer;}
.qz-back:hover{color:var(--indigo);}
.qz-btn{background:var(--orange);color:#fff;font-family:var(--fb);font-weight:600;font-size:17px; /* Styleguide v3 (02.08.): 16 auf 17 (Treppe Buttons) */padding:11px 22px;border-radius:12px;border:1.5px solid var(--orange);box-shadow:0 6px 18px rgba(255,122,42,0.28);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s;}
.qz-btn:hover{background:var(--orange-deep);border-color:var(--orange-deep);}
.qz-btn.ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--hair-light);box-shadow:none;cursor:default;}
/* Teaser im selben Karten-Muster */
.qz-teaser{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.qz-teaser .avi{flex:none;width:64px;height:64px;border-radius:50%;background:var(--cream-2);border:1px solid var(--hair-light);background-size:300%;}
.qz-tbody{flex:1;min-width:220px;}
.qz-lab{font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:4px;}
.qz-ttitle{font-family:var(--fd);font-weight:600;font-size:24px;letter-spacing:-0.01em;color:var(--ink);margin-bottom:4px;}
.qz-tsub{font-family:var(--fb);font-size:17px; /* Styleguide v3 (02.08.): 16 auf 17 (Treppe Body) */color:var(--ink-soft);margin:0;}
/* Endscreen */
.qz-end{text-align:center;padding:56px 40px;}
.qz-end > *{position:relative;z-index:2;}
.qz-end .sparkle{position:absolute;font-family:var(--fd);pointer-events:none;z-index:1;opacity:0;animation:hki-twinkle 3.2s ease-in-out infinite;color:var(--orange);}
.qz-end .sparkle.s1{top:14%;left:12%;font-size:22px;animation-delay:0s;}
.qz-end .sparkle.s2{top:22%;right:14%;font-size:16px;animation-delay:.4s;color:var(--orange-deep);}
.qz-end .sparkle.s3{top:58%;left:8%;font-size:14px;animation-delay:1.1s;color:var(--indigo);}
.qz-end .sparkle.s4{top:70%;right:10%;font-size:20px;animation-delay:.7s;}
.qz-end .sparkle.s5{top:8%;right:36%;font-size:12px;animation-delay:1.8s;color:var(--indigo);}
.qz-end .sparkle.s6{bottom:14%;left:32%;font-size:16px;animation-delay:2.2s;color:var(--orange-deep);}
@keyframes hki-twinkle{
  0%,100%{opacity:0;transform:scale(.6) rotate(0deg);}
  50%{opacity:.9;transform:scale(1) rotate(12deg);}
}
@media (prefers-reduced-motion: reduce){.qz-end .sparkle{animation:none;opacity:.5;}}
.qz-end .avi{width:80px;height:80px;border-radius:50%;background:var(--cream-2);border:1px solid var(--hair-light);margin:0 auto 16px;background-size:300%;}
.qz-end .score{font-family:var(--fd);font-weight:800;font-size:56px;line-height:1;letter-spacing:-0.02em;color:var(--indigo);margin-bottom:4px;}
.qz-end .score .of{color:var(--orange);}
.qz-end .scap{font-family:var(--fm);font-size:14px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px;}
.qz-end h3{font-family:var(--fd);font-weight:600;font-size:24px;letter-spacing:-0.01em;margin:0 0 12px;color:var(--ink);}
.qz-end p{font-family:var(--fb);font-size:17px;color:var(--ink-soft);margin:0 auto 24px;max-width:520px;line-height:1.55;}
.qz-again{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:14px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange-deep);border:1.5px solid var(--orange);background:none;padding:10px 20px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;}
.qz-again:hover{background:var(--orange);color:#fff;}
@media(max-width:560px){
  .qz{padding:24px 20px;}
  .qz-head{gap:14px;}
  .qz-av{width:84px;}
  .qz-end{padding:40px 20px;}
}
/* ---------- HAZEL-FILM (Begrüßungsseite): Klick zum Abspielen, kein Loop ---------- */
.hazel-player{position:relative;width:100%;max-width:760px;margin:36px auto 0;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--cream-2);}
.hazel-player video{display:block;width:100%;height:100%;object-fit:contain;background:var(--cream-2);}
.hazel-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;}
.hazel-player.is-playing .hazel-cover{display:none;}
.hazel-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;background:var(--orange);box-shadow:0 12px 34px rgba(255,122,42,0.5);display:flex;align-items:center;justify-content:center;padding-left:6px;transition:background .2s ease,transform .2s ease;}
.hazel-play:hover{background:var(--orange-deep);transform:scale(1.06);}
.hazel-player.is-playing .hazel-play{display:none;}
.hazel-caption{text-align:center;font-size:15px;color:var(--ink-soft);margin:16px auto 0;max-width:760px;}

/* ============================================================
   EINBAU-PAKET (17.07., Lovable-Handoff) — 5 Änderungen,
   CSS 1:1 aus HALLOKI-EINBAU-PAKET.md ans Dateiende.
   Token-Alias: das Paket nutzt --font-mono, unser Token heißt --fm.
   ============================================================ */
:root{ --font-mono:var(--fm); }

/* — Änderung 1 · Header: Trenner + Abstand vor dem Teilwechsel — */
.header-inner{ gap:32px; }
.header-nav{ align-items:center; gap:4px; }
.header-nav .teilwechsel{ margin-left:20px; position:relative; }
.header-nav .teilwechsel::before{
  content:""; position:absolute; left:-10px; top:50%;
  width:1px; height:22px; transform:translateY(-50%);
  background:var(--hair-light);
}

/* Teilwechsel als Mono-Pill */
.header-nav a.teilwechsel{
  font-family:var(--font-mono);
  font-size:14px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange-deep, #EA6612);
  background:rgba(255,122,42,0.08);
  border:1px solid rgba(255,122,42,0.55);
  border-radius:999px;
  padding:8px 16px;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.header-nav a.teilwechsel:hover{
  background:var(--orange); color:#fff;
  border-color:var(--orange); transform:translateY(-1px);
}

/* — Änderung 2 · Editorial-Ziffer vergrößert + /06-Suffix — */
.task-number-big{
  font-size:clamp(96px, 14vw, 168px) !important;
  line-height:0.85 !important;
  letter-spacing:-0.04em !important;
}
.task-number-big::after{
  content:"/06";
  font-size:0.22em;
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:0.05em;
  color:var(--orange);
  vertical-align:top;
  margin-left:8px;
  opacity:0.85;
}

/* Styleguide v3 (02.08.): !important-Regel 48/64 auf 36/56 ersatzlos entfernt — die
   korrekte 36/56-Treppe steht bereits in der Basisregel .task-headline (Zeile 59). */

/* — Änderung 4 · Aufgaben-Hero als festes 3-Spalten-Grid — */
.task-hero-grid{
  grid-template-columns:200px 1fr 340px !important;
  gap:56px !important;
  align-items:center;
}
.hero-motiv{
  width:100%; max-width:200px;
  background:var(--indigo);
  border-radius:20px;
  padding:24px;
  aspect-ratio:1/1;
  box-shadow:0 20px 40px rgba(41,37,80,0.16);
}
body.teil2 .hero-motiv{ background:var(--indigo-2); }

/* Meta-Zeile: darf sauber umbrechen, wenn zwei Zeilen (Progress + Meta)
   (row-gap steht hier NACH dem gap-Shorthand, damit die 6px aus der
   Prüfliste wirklich greifen — im Paket-Snippet hätte gap sie überschrieben) */
.task-number-row{
  align-items:flex-end;
  flex-wrap:wrap;
  gap:20px 24px;
  row-gap:6px;
  margin-bottom:24px;
}
.task-thema{
  font-family:var(--font-mono); font-size:14px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-soft);
  border-left:1px solid var(--hair-light);
  padding-left:20px; padding-bottom:14px;
}
body.teil2 .task-thema{
  color:rgba(255,251,247,0.7);
  border-color:rgba(255,251,247,0.18);
}
.task-meta{ padding-bottom:14px; }

/* Responsive Fallback */
@media (max-width: 980px){
  .task-hero-grid{ grid-template-columns:1fr !important; }
  .hero-motiv{ max-width:140px; }
  .task-hero-image picture,
  .task-hero-image img{ max-width:280px; }
  /* Spezifitäts-Nachzieher: die bestehenden 300px/240px-Regeln liegen höher */
  body:not(.teil2) .task-hero-image img,
  body.teil2 .task-hero-image img{ max-width:280px; }
}

/* Mobil-Menü-Schutz: im aufgeklappten Drawer (<=1024px) bleibt die Liste
   gestreckt, Pill ohne Trenner-Strich und ohne Extra-Abstand */
@media (max-width:1024px){
  .header-nav{ align-items:stretch; gap:2px; }
  .header-nav .teilwechsel{ margin-left:0; }
  .header-nav .teilwechsel::before{ display:none; }
  .header-nav a.nav-logout{ margin-left:0; margin-top:10px; text-align:center; }
}

/* ---------- NACHTRAG ABSCHLUSS-SEITEN (Einbau-Paket 17.07.) ----------
   P0-2: Figuren nie direkt auf Indigo — Creme-Insel, exakt wie
   angeordnet: background var(--cream), Radius 22px, Padding 26px 22px.
   Sonst nichts. */
.teil2-image, .teaser-image{
  background:var(--cream);
  border-radius:22px;
  padding:26px 22px;
}
/* P1-7: Fortschrittsleiste auf den Abschluss-Heros (100 %, ohne Zahl) */
.hero-grid .task-progress{ margin-bottom:22px; }


/* ---------- KORREKTUREN 17.07. ABEND (Marens Review der Vorschau) ----------
   1) Rom-Beispiel: Satz-Zeilen statt Textblock + Flagge als Farbtupfer */
.flagge-it{width:22px;height:16px;border-radius:3px;display:inline-block;vertical-align:baseline;margin-left:10px;box-shadow:0 0 0 1px rgba(255,251,247,0.25);}
.rom-liste{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.rom-satz{display:grid;grid-template-columns:24px 1fr 1.4fr;gap:12px;align-items:baseline;padding:9px 12px;background:rgba(41,37,80,0.05);border-radius:10px;}
.rom-satz .nr{font-family:var(--fm);font-size:14px;font-weight:600;color:var(--orange-deep);}
.rom-satz .de{font-size:15px;color:var(--ink-soft);}
.rom-satz .it{font-family:var(--fd);font-weight:600;font-size:17px;color:var(--ink);} /* Styleguide v3 (02.08.): 16 auf 17 (Treppe Listen) */
.rom-satz .laut{display:block;font-family:var(--fm);font-size:14px;font-weight:500;color:var(--ink-soft);margin-top:2px;}
@media(max-width:560px){.rom-satz{grid-template-columns:20px 1fr;}.rom-satz .it{grid-column:2;}}

/* 2) Wichtig-Kaesten: rotes Ausrufezeichen als Warnsignal
   (bewusste Ausnahme von der Drei-Farben-Regel, Marens Vorgabe 17.07.) */
.datenschutz-hint .ds-lab::before{background:#b1483a;}

/* Logout-Link in der Kurs-Navigation (19.07. Passwort-Zugang, 20.07. sichtbar
   gemacht: vorher optisch identisch mit den übrigen Nav-Punkten, ging in der
   langen Liste unter. Jetzt als kleine Pill mit dezentem Orange-Rahmen,
   volle Opacity, analog zur Teilwechsel-Pill aber zurückhaltender. */
.header-nav a.nav-logout{
  margin-left:16px;
  color:var(--orange-deep);
  opacity:1;
  border:1px solid rgba(255,122,42,0.5);
  border-radius:999px;
  background:rgba(255,122,42,0.07);
}
.header-nav a.nav-logout:hover{ color:#fff; background:var(--orange); border-color:var(--orange); }

/* ============================================================
   MOBILTEST N7 TEIL 1 (31.07.2026)
   ============================================================ */

/* Footer-Jahr auf allen Teil-1-Seiten als untrennbare Einheit. */
body:not(.teil2) .copyright{ display:inline-block; white-space:nowrap; }

/* Orange Aufgaben-Zeile: nur mobil, ganz oben unter dem Header. */
.sub-head{ display:none; }
@media(max-width:1024px){
  .sub-head{ display:block; background:var(--orange); color:#fff; font-family:var(--fm);
    font-weight:600; font-size:14px; letter-spacing:0.14em; text-align:center;
    padding:8px 14px; }

  body:not(.teil2).mobil-header-kompakt .header-inner > div:first-child{
    flex-direction:row !important; align-items:center !important; gap:10px;
  }
  body:not(.teil2).mobil-header-kompakt .header-part{
    margin:0; font-size:14px; line-height:1; letter-spacing:0.14em;
  }
  body:not(.teil2).mobil-header-kompakt .nav-toggle{
    width:auto; min-width:86px; gap:10px; padding:0 14px;
  }
  body:not(.teil2).mobil-header-kompakt .nav-toggle::after{
    content:"Menü"; font-family:var(--fm); font-size:14px; font-weight:600;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--indigo);
  }
}

@media(max-width:980px){
  body:not(.teil2) .task-hero-grid{ gap:0 !important; grid-template-columns:1fr !important; }
  body:not(.teil2) .task-hero-grid > .hero-motiv{ display:none; }
  body:not(.teil2) .task-hero-grid > div:not(.task-hero-image){ display:contents; }
  body:not(.teil2) .task-hero-grid .task-progress{ order:1; margin-bottom:18px; }
  body:not(.teil2) .task-hero-grid .task-label{ order:2; justify-self:start; width:auto; margin:0 0 12px; }
  body:not(.teil2) .task-hero-grid .task-number-row{ order:3; margin:0; }
  body:not(.teil2) .task-hero-grid .task-headline{ order:4; margin-top:16px; }
  body:not(.teil2) .task-hero-grid .task-hero-image{ order:5; margin:20px 0 4px; }
  body:not(.teil2) .task-hero-grid .task-sub{ order:6; margin-top:14px; }
  body:not(.teil2) .task-hero-grid .task-intro{ order:7; margin-top:10px; }

  .task6-next{
    flex-direction:column; align-items:center; justify-content:center; gap:22px;
  }
  .task6-next .next-feier{ margin:0; }
  .task6-next .next-cta{
    width:min(100%,520px); margin-left:0; justify-content:center; text-align:center;
  }
}

/* ============================================================
   FEINSCHLIFF 31.07.2026 spät (Fable) — Marens Restliste
   ============================================================ */
.app-shot-mobil{ display:none; }
.image-build-copy{ display:none; }
@media(max-width:760px){
  /* „Kurz zur Sicherheit"-Sektionen: mobil gleiche Kante und keine Riesenlücke
     (Ursache: .section.compact behielt 80px Seitenrand und 64px Abstand oben) */
  .section.compact{ padding:28px 22px 36px; }
  /* Schritt-Kacheln (u. a. „04 Bild runterladen") lesbar */
  .step-title{ font-size:19px; }
  .step-body{ font-size:17px; }
  /* Beispiel-Karten „Was du eintippst" (Café im Regen u. a.) lesbar */
  .example-side .lab{ font-size:14px; }
  .example-side .txt{ font-size:17px; line-height:1.6; }
  /* Landingpage-Abschluss: „Super." deutlich kleiner (Headline darunter regelt Codex-Regel) */
  h2.final-headline{ font-size:24px !important; }
  /* ChatGPT-Bildschirmfoto: mobil ersetzt durch lesbare HTML-Karte */
  .app-shot picture{ display:none; }
  .app-shot-mobil{ display:block; background:#fff; padding:18px 16px 16px; }
  .app-shot-mobil .asm-frage{ font-family:var(--fd); font-weight:600; font-size:19px; color:#1A1A2E; text-align:center; margin:6px 0 14px; }
  .app-shot-mobil .asm-box{ border:1px solid #E4E4EA; border-radius:16px; padding:14px 14px 12px; box-shadow:0 6px 22px rgba(41,37,80,0.08); }
  .app-shot-mobil .asm-txt{ font-size:17px; line-height:1.55; color:#1A1A2E; }
  .app-shot-mobil .asm-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  .app-shot-mobil .asm-chip{ font-size:14px; font-weight:600; color:#4a63d0; }
  .app-shot-mobil .asm-send{ margin-left:auto; width:30px; height:30px; border-radius:50%; background:#1A1A2E; color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; }
}

/* ============================================================
   NACHARBEIT MOBILTEST N7 (01.08.2026) — Codex, ungeprüft
   ============================================================ */
@media(max-width:1024px){
  /* Die vorhandene orange Aufgabenzeile bleibt unter dem Sticky-Header sichtbar. */
  .sub-head{
    position:sticky; top:73px; z-index:99;
    box-shadow:0 4px 12px rgba(41,37,80,0.12);
  }
  body.teil2 .sub-head{ top:71px; }
}

@media(max-width:760px){
  /* Text, der in den Originalbildern zu klein ist, wird mobil als HTML gezeigt. */
  .app-shot-recipe > .app-shot-img,
  .task1-app-shot > .app-shot-img,
  .task1-video-demo > video{ display:none !important; }

  .recipe-mobile .asm-frage{ text-align:left; }
  .recipe-mobile .asm-txt{ font-size:15px; line-height:1.55; }
  .recipe-mobile .recipe-answer{ background:var(--cream-2); }
  .mail-mobile .mail-user{
    background:var(--indigo); color:var(--cream); border-radius:12px;
    padding:14px 16px; font-size:17px; line-height:1.5; margin-bottom:14px;
  }
  .mail-mobile .mail-label,
  .image-build-label{
    display:block; font-family:var(--fm); font-size:14px; font-weight:600;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--orange-deep);
    margin-bottom:10px;
  }

  /* Aufgabe 5: eingebetteten Kleinsttext ersetzen und die Bildhälfte groß zeigen. */
  .image-build-copy{
    display:block; background:var(--cream-2); border:1px solid var(--hair-light);
    border-radius:16px; padding:20px; margin-top:24px;
  }
  .image-build-copy p{ margin:0; font-size:17px; line-height:1.6; color:var(--ink); }
  .image-build-demo{ overflow:hidden; }
  .image-build-demo video{
    display:block; width:100%; max-width:none; margin:0 auto;
  }

  /* Aufgabe 5: Karten und Bildflächen an einer gemeinsamen Außenkante. */
  .kurs1-a5 .app-shot,
  .kurs1-a5 .video-demo,
  .kurs1-a5 .example-flow,
  .kurs1-a5 .aufgabe-stage,
  .kurs1-a5 details.more,
  .kurs1-a5 .try-panel,
  .kurs1-a5 .task1-a5-result{
    width:100%; max-width:none; margin-left:0; margin-right:0; box-sizing:border-box;
  }

  /* „Weiter zu Aufgabe X"-CTA: mobil überall mittig (Button + .next-feier-Text),
     unabhängig von .task6-next-Variante. Desktop bleibt rechtsbündig (unverändert). */
  .section-next{
    flex-direction:column; align-items:center; justify-content:center; gap:22px;
  }
  .section-next .next-feier{ margin:0; }
  .section-next .next-cta{
    width:min(100%,520px); margin-left:auto; margin-right:auto; justify-content:center; text-align:center;
  }
}

/* ============================================================
   DEMO-KARTE „AUS WORTEN WIRD EIN BILD" MOBIL GESTAPELT (01.08.)
   Karte mit Prompt-Box „Was du eintippst" (Café-Beispiel), darunter
   das Aufbau-Video (mobil wieder sichtbar, volle Breite, mittig,
   ohne Zuschnitt — Maren 01.08.: „das Bild baut sich beim Lesen auf"),
   darunter das klickbare Foto mit „Per Klick vergrößern.".
   ============================================================ */
.image-build-photo-wrap{ display:none; }
@media(max-width:980px){
  .kurs1-a5 .image-build-copy{
    display:block; background:var(--cream-2); border:1px solid var(--hair-light);
    border-radius:16px; padding:20px; width:100%; max-width:none; box-sizing:border-box; margin-top:24px;
  }
  .kurs1-a5 .image-build-copy p{ margin:0; font-size:17px; line-height:1.6; color:var(--ink); }
  .kurs1-a5 .image-build-label{
    display:block; font-family:var(--fm); font-size:14px; font-weight:600;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--orange-deep); margin-bottom:10px;
  }
  .kurs1-a5 .image-build-demo{
    display:block; width:100%; max-width:none; margin:16px auto 0; box-sizing:border-box;
  }
  .kurs1-a5 .image-build-photo-wrap{
    display:block; width:100%; max-width:none; margin-top:16px; box-sizing:border-box;
  }
  .kurs1-a5 .image-build-photo{
    display:block; width:100%; height:auto; border-radius:16px;
  }
}

/* ============================================================
   BILD-ZOOM (01.08.)
   Klick/Tipp auf ein Foto mit der Klasse .zoomable öffnet es
   bildschirmfüllend als einfaches Overlay (Vanilla-JS/CSS,
   keine Bibliothek). Klick irgendwo im Overlay schließt es wieder.
   ============================================================ */
.zoomable{ cursor:zoom-in; }
.img-zoom-overlay{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(255,251,247,0.96);
  align-items:center; justify-content:center; padding:20px; box-sizing:border-box;
  cursor:zoom-out;
}
.img-zoom-overlay.is-open{ display:flex; }
.img-zoom-overlay img{
  max-width:95%; max-height:95%; border-radius:16px; box-shadow:0 24px 80px rgba(41,37,80,0.35);
}
.img-zoom-overlay video{
  max-width:min(90%,760px); max-height:85%; border-radius:16px; box-shadow:0 24px 80px rgba(41,37,80,0.35); cursor:zoom-out;
}
.img-zoom-close{
  position:fixed; top:20px; right:20px; width:32px; height:32px; border-radius:50%;
  background:var(--indigo); color:var(--cream); border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fb); font-weight:700; font-size:19px; line-height:1; z-index:10000;
}
/* Bildunterschrift „Per Klick vergrößern." unter dem Foto — nur mobil,
   Desktop braucht den Hinweis nicht (Klick-Zoom funktioniert dort trotzdem). */
.image-build-caption{ display:none; }
@media(max-width:980px){
  .image-build-caption{
    display:block; font-size:15px; line-height:1.5; color:var(--ink-soft);
    text-align:left; margin-top:10px; font-style:normal;
  }
}
/* VIDEO-ZOOM (01.08.): Das Aufbau-Video (zu kleine eingebettete Schrift)
   ist per Klick vergrößerbar — Cursor-Hinweis wie beim Foto-Zoom. */
.image-build-demo{ cursor:zoom-in; }

/* Etikett über dem Aufbau-Video: nur mobil (Desktop hat das eingebrannte Etikett im Video, dort lesbar). */
.eyebrow-nur-mobil{ display:none; }
@media(max-width:980px){ .eyebrow-nur-mobil{ display:flex; } }