/* ============================================================
   Digital Bohemienne - Startseite, neues Brand Design (Vorschau)
   Eigenständig: lädt styles.css nicht mit. Sobald das Design
   freigegeben ist, wandern Tokens und Bausteine in styles.css.
   ============================================================ */

/* ----- Fonts ----- */
@font-face { font-family:"Roboto"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/Roboto-Light.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:300; font-style:italic; font-display:swap; src:url("../fonts/Roboto-LightItalic.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/Roboto-Regular.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/Roboto-Italic.woff2") format("woff2"); }
@font-face { font-family:"Roboto Mono"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/RobotoMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"Roboto Mono"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/RobotoMono-Medium.woff2") format("woff2"); }
@font-face { font-family:"Golden Youth Script"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/GoldenYouthScriptAlt.woff2") format("woff2"); }

/* ----- Tokens ----- */
:root {
  --cream:#f0eee6;
  --sand:#e6e3d8;
  --espresso:#0f1115;
  --ink-2:#2a2d33;
  --ink-3:#5c6068;
  --night:#1b1e24;
  --violet:#5b21b6;
  --violet-dark:#4c1c99;
  --mint:#00ffb5;

  --on-dark:#f0eee6;
  --on-dark-2:#c9c6bc;
  --on-dark-3:#a9a69c;

  --line-1:rgba(15,17,21,.12);
  --line-2:rgba(15,17,21,.22);
  --line-dark:rgba(240,238,230,.14);

  --shadow-2:0 6px 18px -8px rgba(54,8,0,.18);
  --shadow-3:0 18px 40px -16px rgba(54,8,0,.28);

  --font-mono:"Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-sans:"Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-script:"Golden Youth Script", "Caveat", cursive;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --pad-x:clamp(20px,5vw,48px);
  --pad-y:clamp(80px,10vw,140px);
}

/* ----- Reset ----- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; padding:0; }
body {
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
p { margin:0; text-wrap:pretty; }
h1, h2, h3 { margin:0; font-weight:500; }
a { color:var(--espresso); text-underline-offset:4px; text-decoration-thickness:1px; }
a:hover { color:var(--violet); }
strong { font-weight:400; }
::selection { background:var(--violet); color:var(--cream); }
:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }

.wrap { max-width:1200px; margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }
.sec { padding-top:var(--pad-y); padding-bottom:var(--pad-y); }
.rule-top { border-top:1px solid var(--line-1); }
.stack { display:flex; flex-direction:column; gap:18px; }

/* ----- Typo-Bausteine ----- */
.eyebrow {
  font-family:var(--font-mono); font-weight:500; font-size:12px;
  letter-spacing:.4em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:20px;
}
.h2 {
  font-family:var(--font-mono); font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:.22em; line-height:1.35; text-transform:uppercase;
  text-wrap:balance; overflow-wrap:break-word;
}
.script { font-family:var(--font-script); font-weight:400; letter-spacing:0; text-transform:none; line-height:1; }
.aside { font-size:15px; line-height:1.6; font-style:italic; color:var(--ink-3); }
.mono-s {
  font-family:var(--font-mono); font-weight:500; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
}

/* ----- Buttons: Lila nur für die eine Hauptaktion ----- */
.btn {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-weight:500; font-size:12px;
  letter-spacing:.3em; text-transform:uppercase; text-decoration:none;
  padding:18px 26px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:background var(--ease-out) 140ms, color var(--ease-out) 140ms, transform 140ms;
}
.btn:active { transform:scale(.98); }
.btn-main { background:var(--violet); color:#fff; }
.btn-main:hover { background:var(--violet-dark); color:#fff; }
.btn-line { background:transparent; color:var(--espresso); border-color:var(--espresso); }
.btn-line:hover { background:var(--espresso); color:var(--cream); }
.link-mono {
  font-family:var(--font-mono); font-weight:500; font-size:12px;
  letter-spacing:.3em; text-transform:uppercase; text-underline-offset:6px;
}

/* ----- Häkchen-Motiv ----- */
.box {
  flex:none; width:16px; height:16px; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center;
}
.box-done { background:var(--espresso); }
.box-done svg { width:11px; height:11px; fill:none; stroke:var(--cream); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.box-open { border:1px solid var(--espresso); }
.strike { text-decoration:line-through; text-decoration-thickness:1px; }

/* ----- Polaroid ----- */
.pola { position:relative; margin:0; background:#fff; padding:14px 14px 58px; box-shadow:var(--shadow-3); }
.pola img.ph { width:100%; height:auto; object-fit:cover; }
.pola figcaption { position:absolute; right:18px; bottom:10px; white-space:nowrap; }
.pola figcaption.script { font-size:36px; }
.pola .tape { position:absolute; pointer-events:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav { position:sticky; top:0; z-index:50; background:var(--cream); transition:box-shadow 180ms; }
.nav.is-stuck { box-shadow:0 1px 0 rgba(15,17,21,.08), 0 10px 30px -18px rgba(15,17,21,.35); }
.nav.is-stuck .nav-inner { padding-top:14px; padding-bottom:14px; }
.nav-inner {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:28px; padding-bottom:28px; transition:padding 180ms;
}
.nav-logo { height:44px; width:auto; }
.nav-links {
  display:flex; align-items:center; gap:clamp(14px,2.2vw,30px);
  font-family:var(--font-mono); font-weight:500; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase;
}
.nav-links a { text-decoration:none; white-space:nowrap; }
.nav-links a.nav-cta { border:1px solid var(--espresso); padding:10px 16px; border-radius:2px; }
.nav-links a.nav-cta:hover { background:var(--espresso); color:var(--cream); }
/* Untermenü Angebote */
.nav-sub { position:relative; }
.nav-sub-btn {
  background:none; border:0; padding:10px 0; margin:0; cursor:pointer; color:var(--espresso);
  font:inherit; letter-spacing:inherit; text-transform:inherit; display:inline-flex; align-items:center; gap:8px;
}
.nav-sub-btn:hover { color:var(--violet); }
.nav-sub-btn .caret { width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform 140ms; }
.nav-sub-list {
  display:none; position:absolute; top:100%; left:-22px; min-width:320px; z-index:30;
  background:var(--cream); border:1px solid var(--line-2); border-radius:2px; box-shadow:var(--shadow-2);
  padding:10px 22px 12px; flex-direction:column;
}
.nav-sub:hover .nav-sub-list, .nav-sub:focus-within .nav-sub-list, .nav-sub.is-open .nav-sub-list { display:flex; }
.nav-sub:hover .caret, .nav-sub.is-open .caret { transform:translateY(1px) rotate(-135deg); }
.nav-sub-for { font-size:9px; letter-spacing:.25em; color:var(--ink-3); padding:8px 0 10px; border-bottom:1px solid var(--line-1); white-space:nowrap; }
.nav-sub-list a { padding:12px 0; border-bottom:1px solid var(--line-1); }
.nav-sub-list a:last-child { border-bottom:0; }
.nav-sub-list a { display:flex; flex-direction:column; gap:5px; white-space:normal; padding:14px 0; }
.nav-sub-list a .d {
  font-family:var(--font-sans); font-weight:300; font-size:13.5px; line-height:1.4;
  letter-spacing:.03em; text-transform:none; color:var(--ink-3); white-space:nowrap;
}
.nav-sub-list a:hover .d { color:var(--espresso); }

.nav-toggle {
  display:none; background:none; border:0; padding:10px; margin-right:-10px; cursor:pointer;
  flex-direction:column; gap:6px;
}
.nav-toggle span { display:block; width:26px; height:2px; background:var(--espresso); transition:transform 220ms var(--ease-out), opacity 140ms; }

@media (max-width:900px) {
  .nav-toggle { display:flex; }
  .nav-links {
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--cream); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
    padding:8px var(--pad-x) 24px; font-size:12px;
  }
  .nav.is-open .nav-links { display:flex; }
  .nav-links a { padding:16px 0; width:100%; border-bottom:1px solid var(--line-1); }
  .nav-sub { width:100%; border-bottom:1px solid var(--line-1); padding:14px 0 6px; }
  .nav-sub-btn { padding:0; cursor:default; color:var(--ink-3); font-size:10px; pointer-events:none; }
  .nav-sub-btn .caret, .nav-sub-for { display:none; }
  .nav-sub-list { display:flex; position:static; border:0; box-shadow:none; padding:4px 0 0 16px; min-width:0; background:none; }
  .nav-sub-list a { padding:12px 0; }
  .nav-sub-list a .d { white-space:normal; }
  .nav-links a.nav-cta { width:auto; margin-top:20px; padding:14px 18px; border:1px solid var(--espresso); }
  .nav.is-open .nav-toggle span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { opacity:0; }
  .nav.is-open .nav-toggle span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
}

/* ============================================================
   01 HERO
   ============================================================ */
.hero {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:clamp(48px,6vw,88px); align-items:center;
  padding-top:clamp(24px,5vw,64px); padding-bottom:var(--pad-y);
}
.hero .eyebrow { margin-bottom:28px; }
.hero-h1 { margin:0 0 36px; font-weight:400; }
.hero-h1 .tadaa { display:block; padding-top:.18em; font-size:clamp(5rem,12vw,9.5rem); line-height:.9; color:var(--violet); }
.hero-h1 .statt {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5em; margin-top:6px;
  font-family:var(--font-mono); font-weight:500; font-size:clamp(1.4rem,3vw,2.2rem);
  letter-spacing:.28em; text-transform:uppercase; line-height:1.2;
}
.hero-h1 .todo { position:relative; display:inline-block; white-space:nowrap; }
.hero-h1 .todo::after {
  content:""; position:absolute; left:-6%; right:-4%; top:52%; height:3px;
  background:var(--espresso); transform:rotate(-5deg);
}
.hero-lede { font-weight:400; font-size:clamp(1.15rem,1.6vw,1.35rem); line-height:1.5; max-width:32ch; margin-bottom:22px; }
.hero-body { max-width:52ch; margin-bottom:16px; }
.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:28px; margin-top:36px; }

.hero-collage { position:relative; padding:0 clamp(0px,3vw,40px) clamp(150px,16vw,190px) 0; }
.hero-collage .pola { transform:rotate(-2.2deg); }
.hero-collage .pola figcaption { left:18px; right:auto; }
.hero-collage .pola img.ph { aspect-ratio:3/2; }
.hero-collage .tape { top:-22px; left:18%; width:150px; transform:rotate(-7deg); }

.done-card {
  position:absolute; right:0; bottom:0; width:min(88%,360px);
  background:var(--cream); border:1px solid var(--line-2); border-radius:2px;
  padding:22px 24px 20px; transform:rotate(2.5deg); box-shadow:var(--shadow-2);
}
.hero-collage .pola { padding-bottom:44px; }
.done-card .head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line-1); letter-spacing:.25em; }
.done-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.45; }
.done-list li { display:grid; grid-template-columns:18px 1fr; gap:12px; align-items:start; }
.done-list .box { margin-top:2px; }
.done-list .by { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.done-list li.open { padding-top:10px; border-top:1px dashed var(--line-2); font-weight:400; }
.done-list li.open em { font-weight:300; color:var(--ink-3); }

/* ============================================================
   02 #ÄCHZ
   ============================================================ */
.achz {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(48px,7vw,110px); align-items:start;
}
.achz-pic { max-width:400px; }
.achz-pic .pola { padding:12px 12px 56px; box-shadow:var(--shadow-2); transform:rotate(-3deg); }
.achz-pic .pola img.ph { aspect-ratio:4/4.4; object-position:center 20%; }
.achz-pic .pola figcaption.script { font-size:44px; right:20px; bottom:6px; }
.achz .h2 { margin-bottom:32px; }
.achz .stack { max-width:58ch; }
.achz-punch {
  margin-top:40px; padding-top:28px; border-top:1px solid var(--line-2);
  font-family:var(--font-mono); font-weight:500; font-size:clamp(1rem,1.7vw,1.15rem);
  letter-spacing:.12em; line-height:1.6; text-transform:uppercase; max-width:44ch; text-wrap:balance;
}

/* ============================================================
   03 QUIZ (dunkel)
   ============================================================ */
.dark { background:var(--espresso); color:var(--on-dark); }
.dark .eyebrow { color:var(--on-dark-2); margin-bottom:24px; }
.quiz-sec {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(48px,7vw,100px); align-items:start;
}
.quiz-intro .h2 { font-size:clamp(1.6rem,3.6vw,2.8rem); line-height:1.25; color:var(--on-dark); margin-bottom:28px; }
.quiz-intro .sub { font-weight:400; font-size:1.15rem; line-height:1.5; margin-bottom:18px; }
.quiz-intro .sub em { font-weight:300; color:var(--on-dark-2); }
.quiz-intro .desc { max-width:48ch; color:var(--sand); }
.quiz-intro .script { margin-top:40px; font-size:clamp(2.2rem,4vw,2.8rem); transform:rotate(-3deg); transform-origin:left; }

.quiz {
  background:var(--night); border:1px solid var(--line-dark); border-radius:8px;
  padding:clamp(22px,3vw,34px); font-size:15px; line-height:1.6; scroll-margin-top:24px;
}
.quiz [hidden] { display:none !important; }
.quiz .lab { font-family:var(--font-mono); font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:12px; }
.ai-q { background:var(--cream); color:var(--espresso); border-radius:4px; padding:14px 16px; margin-bottom:26px; }
.ai-a { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; color:var(--sand); }
.ai-a li { display:grid; grid-template-columns:22px 1fr; gap:10px; }
.ai-a .n { font-family:var(--font-mono); color:var(--on-dark-3); }
.ai-verdict {
  margin-top:26px; padding-top:18px; border-top:1px dashed rgba(240,238,230,.22);
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase;
}
.ai-verdict .dot { width:10px; height:10px; border-radius:999px; background:var(--mint); flex:none; }
.quiz-start-row { margin-top:28px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.quiz-start-row .note { font-size:14px; line-height:1.6; color:var(--on-dark-2); }

/* Fragen */
.quiz-meta { display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.quiz-counter { font-family:var(--font-mono); font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--on-dark-3); white-space:nowrap; }
.quiz-progress { flex:1; height:4px; background:rgba(240,238,230,.22); border-radius:1px; overflow:hidden; }
.quiz-progress-fill { height:100%; width:0; background:var(--mint); transition:width 220ms var(--ease-out); }
.quiz-question {
  font-family:var(--font-mono); font-weight:500; font-size:clamp(1rem,1.6vw,1.15rem);
  letter-spacing:.12em; line-height:1.5; text-transform:uppercase; color:var(--on-dark); margin-bottom:12px;
}
.quiz-question-info { font-size:14px; color:var(--on-dark-2); margin-bottom:8px; }
.quiz-option-btn {
  display:grid; grid-template-columns:18px 1fr; gap:14px; align-items:start; width:100%;
  margin-top:12px; padding:16px 18px; text-align:left; cursor:pointer;
  background:transparent; color:var(--sand); font:inherit; letter-spacing:inherit;
  border:1px solid rgba(240,238,230,.22); border-radius:2px;
  transition:border-color 140ms, background 140ms;
}
.quiz-option-btn .dot { width:16px; height:16px; margin-top:4px; border:1px solid var(--on-dark-3); border-radius:2px; }
.quiz-option-btn:hover { border-color:var(--on-dark); }
.quiz-option-btn.is-selected { border-color:var(--mint); background:rgba(0,255,181,.06); }
.quiz-option-btn.is-selected .dot { background:var(--mint); border-color:var(--mint); }
.quiz-back {
  margin-top:22px; background:none; border:0; padding:0; cursor:pointer; color:var(--on-dark-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase;
}
.quiz-back:hover { color:var(--on-dark); }
@media (prefers-reduced-motion:no-preference) {
  .quiz-fade { animation:quizFade 260ms var(--ease-out); }
  @keyframes quizFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
}

/* Ergebnis */
.quiz-result-top { text-align:center; }
.quiz-result-label, .quiz-weakness-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--on-dark-3); }
.quiz-score-ring { position:relative; width:160px; height:160px; margin:22px auto; }
.quiz-score-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.quiz-track { fill:none; stroke:rgba(240,238,230,.14); stroke-width:8; }
.quiz-fill { fill:none; stroke:var(--mint); stroke-width:8; stroke-linecap:round; stroke-dasharray:440; stroke-dashoffset:440; transition:stroke-dashoffset 900ms var(--ease-out); }
.quiz-score-number { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:500; font-size:2rem; letter-spacing:.04em; }
.quiz-result-title { font-family:var(--font-mono); font-weight:500; font-size:1.15rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:10px; }
.quiz-result-desc { color:var(--sand); max-width:44ch; margin:0 auto; }
.quiz-result-bottom { margin-top:30px; padding-top:24px; border-top:1px dashed rgba(240,238,230,.22); }
.quiz-weakness-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; }
.quiz-weakness-list li { position:relative; padding:12px 0 12px 26px; border-bottom:1px solid var(--line-dark); color:var(--sand); font-size:14px; }
.quiz-weakness-list li::before { content:""; position:absolute; left:0; top:18px; width:12px; height:12px; border:1px solid var(--on-dark-3); border-radius:2px; }
.quiz-cta-box { margin-top:28px; background:var(--cream); color:var(--espresso); border-radius:4px; padding:24px; }
.quiz-cta-pre { font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--ink-3); }
.quiz-cta-title { font-family:var(--font-mono); font-weight:500; font-size:1.05rem; letter-spacing:.16em; text-transform:uppercase; margin:8px 0; }
.quiz-cta-sub { font-size:15px; margin-bottom:18px; }
.quiz-cta-note { margin-top:14px; font-size:13px; font-style:italic; color:var(--ink-3); }

/* ============================================================
   04 WAS ICH BAUE
   ============================================================ */
.bau {
  background-color:var(--sand);
  background-image:linear-gradient(rgba(15,17,21,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,17,21,.05) 1px,transparent 1px);
  background-size:32px 32px;
}
.bau-head {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:24px clamp(40px,6vw,88px); align-items:end; margin-bottom:clamp(40px,6vw,72px);
}
.bau-head .h2 { font-size:clamp(1.4rem,3vw,2.3rem); }
.bau-head .stack { gap:16px; color:var(--ink-2); }
.wege { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(20px,2.4vw,32px); }
.weg {
  background:var(--cream); border:1px solid var(--line-2); border-radius:2px;
  display:flex; flex-direction:column; box-shadow:var(--shadow-2);
  transition:box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
/* Die Karten hängen leicht schief, wie auf der bisherigen Startseite */
.weg:nth-child(1) { transform:rotate(-0.8deg); }
.weg:nth-child(2) { transform:rotate(0.6deg); }
.weg:nth-child(3) { transform:rotate(-0.5deg); }
.weg:hover { transform:rotate(0) translateY(-3px); box-shadow:var(--shadow-3); }
.weg-tag { padding:16px 26px; border-bottom:1px solid var(--line-2); letter-spacing:.35em; }
.weg-body { padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:18px; flex:1; }
.weg-body h3 {
  font-family:var(--font-mono); font-size:clamp(1rem,1.6vw,1.25rem);
  letter-spacing:.2em; line-height:1.35; text-transform:uppercase;
  overflow-wrap:break-word; hyphens:manual;
}
.weg-body p { font-size:16px; color:var(--ink-2); }
.weg-body p.aside { font-size:15px; color:var(--ink-3); }
.weg-body .link-mono { margin-top:auto; padding-top:8px; align-self:flex-start; }

/* Das Fundament: trägt alle drei Karten */
.fundament {
  margin-top:22px; background:var(--espresso); color:var(--cream); border-radius:2px;
  padding:18px 26px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px;
  font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.35em; text-transform:uppercase;
  text-decoration:none; position:relative;
}
.fundament::before {
  content:""; position:absolute; left:0; right:0; top:-22px; height:22px;
  background:repeating-linear-gradient(90deg, var(--espresso) 0 1px, transparent 1px 32px);
  opacity:.35;
}
.fundament .name { font-size:13px; letter-spacing:.3em; }
.fundament .more { color:var(--on-dark-2); letter-spacing:.25em; font-size:10px; }
a.fundament:hover { color:var(--cream); background:var(--ink-2); }
a.fundament:hover .more { color:var(--cream); text-decoration:underline; text-underline-offset:5px; }

.bau-foot { margin-top:clamp(48px,6vw,72px); display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.bau-foot p { max-width:56ch; font-style:italic; color:var(--ink-2); }

/* ============================================================
   05 ABOUT
   ============================================================ */
.about {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(56px,7vw,110px); align-items:start;
}
.about .h2 { letter-spacing:.2em; line-height:1.4; margin-bottom:10px; }
.about .sig { font-size:clamp(2.6rem,5vw,3.4rem); margin:26px 0 28px; }
.about .stack { max-width:56ch; }
.about .stack .em { font-weight:400; }
.facts { margin:40px 0 0; max-width:56ch; border-top:1px solid var(--line-2); }
.facts > div { display:grid; grid-template-columns:minmax(0,7.5em) 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--line-1); font-size:15px; line-height:1.5; }
.facts dt { font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.12em; }
.facts dd { margin:0; }
.about .link-mono { display:inline-block; margin-top:32px; }

.about-pics { position:relative; min-height:clamp(520px,60vw,680px); }
.about-pics .p1 { position:absolute; top:0; right:0; width:min(78%,360px); padding:14px 14px 54px; transform:rotate(2.5deg); z-index:1; }
.about-pics .p1 img.ph { aspect-ratio:1/1; }
.about-pics .p1 figcaption { left:18px; right:auto; bottom:16px; }
.about-pics .p1 .tape { top:-24px; left:-30px; width:140px; transform:rotate(-38deg); }
.about-pics .p2 { position:absolute; bottom:0; left:0; width:min(62%,280px); padding:12px 12px 58px; box-shadow:var(--shadow-2); transform:rotate(-4deg); z-index:2; }
.about-pics .p2 img.ph { aspect-ratio:4/5; }
.about-pics .p2 figcaption.script { font-size:40px; right:16px; bottom:6px; }

/* ============================================================
   06 ABLAUF
   ============================================================ */
.steps-h { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 24px; margin-bottom:clamp(48px,6vw,80px); font-weight:400; }
.steps-h .h2 { letter-spacing:.24em; }
.steps-h .script { font-size:clamp(3rem,6vw,4.6rem); line-height:.9; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(32px,4vw,56px); }
.step { border-top:1px solid var(--espresso); padding-top:24px; display:flex; flex-direction:column; gap:14px; }
.step-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:8px; }
.step-n { font-family:var(--font-mono); font-weight:500; font-size:clamp(2.6rem,5vw,3.6rem); letter-spacing:.04em; line-height:1; }
.step h3 { font-family:var(--font-mono); font-size:14px; letter-spacing:.28em; line-height:1.4; text-transform:uppercase; }
.step p { font-size:16px; color:var(--ink-2); }
.step p.aside { font-size:15px; color:var(--ink-3); }
.center-cta { margin-top:clamp(48px,6vw,72px); display:flex; justify-content:center; }

/* ============================================================
   07 FÜR WEN
   ============================================================ */
.sand { background:var(--sand); }
.fit-h { margin-bottom:clamp(40px,5vw,64px); letter-spacing:.24em; }
.fit { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:clamp(40px,5vw,80px); }
.fit h3 { font-family:var(--font-mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase; margin-bottom:18px; }
.fit ul { list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.fit li { display:grid; grid-template-columns:18px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-1); }
.fit li .box { margin-top:5px; }
.fit .no li { color:var(--ink-3); }
.fit .no .box-open { border-color:var(--ink-3); }

/* ============================================================
   08 FAQ
   ============================================================ */
.faq { display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,80px); align-items:flex-start; }
.faq-head { flex:1 1 260px; }
.faq-head .h2 { letter-spacing:.24em; }
.faq-list { flex:2 1 460px; min-width:0; border-top:1px solid var(--espresso); }
.faq-list details { border-bottom:1px solid var(--line-2); }
.faq-list summary {
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:22px 0; font-family:var(--font-mono); font-weight:500; font-size:13px;
  letter-spacing:.2em; line-height:1.5; text-transform:uppercase;
}
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:hover { color:var(--violet); }
.faq-list summary h3 { font:inherit; letter-spacing:inherit; }
.faq-list summary::after {
  content:"+"; flex:none; font-family:var(--font-mono); font-size:22px; font-weight:400; line-height:1;
  transition:transform 220ms var(--ease-out);
}
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list .answer { padding:0 48px 26px 0; max-width:64ch; color:var(--ink-2); }

/* ============================================================
   09 LETZTER GEDANKE
   ============================================================ */
.last { position:relative; }
.last-inner { padding-top:clamp(96px,12vw,170px); padding-bottom:clamp(96px,12vw,170px); text-align:center; display:flex; flex-direction:column; align-items:center; }
.last .eyebrow { margin-bottom:28px; }
.last .h2 { font-size:clamp(1.3rem,3vw,2.3rem); line-height:1.5; max-width:26ch; margin-bottom:36px; }
.last .h2 .script { font-size:1.9em; line-height:.6; color:var(--violet); vertical-align:-.12em; }
.last .stack { gap:16px; max-width:54ch; margin-bottom:36px; }
.last .tagline { margin-bottom:40px; font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.3em; line-height:1.9; text-transform:uppercase; color:var(--ink-2); overflow-wrap:anywhere; }
.last .meta { margin-top:22px; max-width:52ch; font-size:14px; font-style:italic; color:var(--ink-3); }
.last .tape { position:absolute; right:clamp(12px,6vw,90px); bottom:40px; width:130px; transform:rotate(6deg); pointer-events:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background:var(--espresso); color:var(--sand); }
.foot a { color:var(--sand); text-decoration:none; }
.foot a:hover { color:#fff; text-decoration:underline; }
.foot-top { padding-top:clamp(56px,7vw,80px); padding-bottom:28px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:28px; }
.foot-top img { height:44px; width:auto; }
.foot-nav { display:flex; flex-wrap:wrap; gap:12px 28px; font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; }
.foot-bottom { padding-top:22px; padding-bottom:32px; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--on-dark-3); }
.foot-bottom a { color:var(--on-dark-3); }
.foot-bottom .links { display:flex; flex-wrap:wrap; gap:12px 24px; }

/* ============================================================
   Vorschau-Hinweis (nur auf der Vorschauseite)
   ============================================================ */
.preview-note {
  background:var(--mint); color:var(--espresso); text-align:center; padding:8px 16px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase;
}
.preview-note a { color:var(--espresso); }

/* ============================================================
   Kleine Bildschirme
   ============================================================ */
@media (max-width:560px) {
  body { font-size:16px; }
  .eyebrow { letter-spacing:.3em; }
  .h2 { letter-spacing:.14em; }
  .hero-h1 .statt { letter-spacing:.2em; }
  .btn { padding:16px 20px; letter-spacing:.22em; }
  .hero-cta { gap:20px; }
  .hero-collage { padding-right:0; }
  .hero-collage .tape { width:110px; }
  .about-pics { min-height:0; display:flex; flex-direction:column; gap:28px; padding:20px 0 10px; }
  .about-pics .p1, .about-pics .p2 { position:relative; inset:auto; }
  .about-pics .p1 { align-self:flex-end; width:82%; }
  .about-pics .p2 { align-self:flex-start; width:66%; margin-top:-70px; }
  .about-pics .p1 .tape { left:-14px; width:110px; }
  .faq-list .answer { padding-right:0; }
  .faq-list summary { font-size:12px; letter-spacing:.14em; }
  .last .tape { width:90px; bottom:16px; }
  .fundament { padding:16px 20px; }
  .weg-tag { padding:14px 20px; }
}

/* ============================================================
   Warteliste DIY-Kurs: Leiste über dem Menü, Anmeldeblock,
   Zwischenruf in Artikeln. Formular schickt erst beim Absenden
   Daten an ActiveCampaign (kein Skript, kein Cookie).
   ============================================================ */
.topbar {
  display:block; background:#0f1115; color:#f0eee6; text-decoration:none; text-align:center;
  padding:11px 20px; font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:500;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; line-height:1.6;
}
.topbar:hover { color:#f0eee6; background:#2a2d33; }
.topbar b { font-weight:500; color:#00ffb5; }
.topbar .arrow { margin-left:6px; }

.wl-todo {
  display:inline-block; font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:500; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:#5b21b6; border:1px dashed #5b21b6; border-radius:2px;
  padding:1px 7px; margin:0 2px; vertical-align:middle; line-height:1.6; white-space:nowrap;
}

.wl { background:#e6e3d8; border-top:1px solid rgba(15,17,21,.12); }
.wl-inner {
  max-width:1200px; margin:0 auto; padding:clamp(56px,7vw,88px) clamp(20px,5vw,48px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(32px,5vw,72px); align-items:center;
}
.wl-eyebrow { font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:500; font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:#2a2d33; margin:0 0 18px; }
.wl-h {
  margin:0 0 18px; font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.9rem); letter-spacing:.2em; line-height:1.35; text-transform:uppercase; color:#0f1115; text-wrap:balance;
}
.wl-h .script { font-family:"Golden Youth Script","Caveat",cursive; font-weight:400; font-size:1.6em; letter-spacing:0; text-transform:none; line-height:.8; color:#0f1115; }
.wl p { margin:0 0 14px; color:#2a2d33; font-size:16px; line-height:1.7; letter-spacing:.03em; max-width:52ch; }
.wl p:last-child { margin-bottom:0; }

.wl-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; background:#f0eee6; border:1px solid rgba(15,17,21,.22); border-radius:2px; padding:clamp(22px,3vw,34px); }
.wl-form label { display:flex; flex-direction:column; gap:8px; font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:500; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#5c6068; }
.wl-form label.full, .wl-form .wl-actions, .wl-form .wl-note { grid-column:1 / -1; }
.wl-form input {
  width:100%; box-sizing:border-box; font:300 16px/1.4 "Roboto", system-ui, sans-serif; letter-spacing:.02em;
  color:#0f1115; background:#fff; border:1px solid rgba(15,17,21,.22); border-radius:2px; padding:14px 16px;
}
.wl-form input:focus { outline:2px solid #5b21b6; outline-offset:2px; }
.wl-form .wl-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:6px; }
.wl-form button {
  display:inline-flex; align-items:center; gap:12px; cursor:pointer; border:0; border-radius:2px;
  background:#5b21b6; color:#fff; padding:18px 26px; font-family:"Roboto Mono", ui-monospace, Menlo, monospace;
  font-weight:500; font-size:12px; letter-spacing:.3em; text-transform:uppercase;
}
.wl-form button:hover { background:#4c1c99; }
.wl-form .wl-note { margin:0; font-size:13px; line-height:1.6; color:#5c6068; font-style:italic; }
.wl-form .wl-note a { color:#5c6068; text-decoration:underline; text-underline-offset:3px; }
.wl-status { grid-column:1 / -1; margin:0; font-size:14px; color:#0f1115; min-height:1em; }
.wl-form.is-done label, .wl-form.is-done .wl-actions, .wl-form.is-done .wl-note { display:none; }

/* Zwischenruf im Artikel */
.wl-inline {
  margin:48px 0; padding:clamp(26px,3vw,36px); background:#0f1115; color:#f0eee6; border-radius:2px;
  display:grid; grid-template-columns:1fr auto; gap:20px 32px; align-items:center;
}
.wl-inline .wl-eyebrow { color:#c9c6bc; margin-bottom:12px; }
.wl-inline .wl-h { color:#f0eee6; font-size:clamp(1.1rem,1.8vw,1.35rem); margin-bottom:10px; }
.wl-inline .wl-h .script { color:#f0eee6; }
.wl-inline p { color:#e6e3d8; margin:0; font-size:15.5px; max-width:60ch; }
.wl-inline .wl-todo { color:#00ffb5; border-color:#00ffb5; }
.wl-inline a.btn-wl {
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap; text-decoration:none;
  background:#5b21b6; color:#fff; padding:18px 26px; border-radius:2px;
  font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:500; font-size:12px; letter-spacing:.3em; text-transform:uppercase;
}
.wl-inline a.btn-wl:hover { background:#4c1c99; color:#fff; }
@media (max-width:720px) {
  .wl-form { grid-template-columns:1fr; }
  .wl-inline { grid-template-columns:1fr; }
  .topbar { font-size:10px; letter-spacing:.16em; padding:10px 16px; }
}

.wl-form button:disabled { opacity:.7; cursor:wait; }

/* Nach oben */
.totop { position:fixed; right:18px; bottom:18px; z-index:60; width:44px; height:44px; border-radius:999px; border:1px solid var(--espresso); background:var(--cream); color:var(--espresso); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity 200ms, transform 200ms, background 140ms, color 140ms; box-shadow:0 10px 24px -14px rgba(15,17,21,.45); }
.totop.is-visible { opacity:1; transform:none; pointer-events:auto; }
.totop:hover { background:var(--espresso); color:var(--cream); }
.totop svg { width:16px; height:16px; }
@media (max-width:640px) { .totop { right:14px; bottom:14px; width:40px; height:40px; } }