/* ============================================================
   Digital Bohemienne — Website Stylesheet
   Built on the Digital Bohemienne Design System foundations
   (Anthrazit / current palette: #f0eee6 / #e6e3d8 / #3a3f47 / #0f1115).
   ============================================================ */

/* ----- 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:300; font-style:normal; font-display:swap; src:url("../fonts/RobotoMono-Light.woff2") format("woff2"); }
@font-face { font-family:"Roboto Mono"; font-weight:300; font-style:italic; font-display:swap; src:url("../fonts/RobotoMono-LightItalic.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:400; font-style:italic; font-display:swap; src:url("../fonts/RobotoMono-Italic.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 (Anthrazit palette — current canonical version) ----- */
:root {
  --cream:#f0eee6;
  --sand:#e6e3d8;
  --tan:#3a3f47;
  --espresso:#0f1115;
  --violet:#5b21b6;
  --violet-dark:#4a1797;
  --mint:#00ffb5;
  --mint-dark:#00e6a3;

  --fg-1:#0f1115;
  --fg-2:#3a3f47;
  --fg-3:#6b7280;

  --border-1:rgba(15,17,21,.12);
  --border-2:rgba(15,17,21,.22);

  --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(0.22,0.61,0.36,1);
  --dur-quick:140ms;
  --dur-base:220ms;
}

/* ----- Reset ----- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:19px;
  line-height:1.7;
  letter-spacing:0.04em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img { max-width:100%; display:block; }

strong { font-weight:400; color:var(--espresso); }
em { font-style:italic; color:var(--fg-2); }

::selection { background:var(--violet); color:#fff; }

/* ----- Layout primitives ----- */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

section { padding:100px 0; }

/* ----- Accent script (Golden Youth) — shared rendering ----- */
.section-h2 .accent,
.hero-h1 .accent,
.quote-h .accent,
.footer-tag .accent,
.page-hero h1 .accent {
  font-family:var(--font-script);
  font-weight:400;
  font-style:normal;
  letter-spacing:0;
  text-transform:none;
  font-size:1.4em;
  line-height:0.95;
  display:inline-block;
  transform:translateY(0.1em);
  color:var(--violet);
}
.quote-h .accent { color:var(--mint); }
.footer-tag .accent { font-size:1.5em; }

/* ----- Section headings ----- */
.section-eyebrow {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--violet);
  margin-bottom:22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.section-eyebrow::before {
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--violet);
  border-radius:50%;
  flex-shrink:0;
}

.section-h2 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1.25;
  margin:0 0 32px;
  max-width:24ch;
  color:var(--espresso);
}

/* ----- Buttons ----- */
.btn {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  padding:16px 26px;
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             transform var(--dur-quick) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn:active { transform:scale(0.98); }
.btn-primary { background:var(--violet); color:#fff; }
.btn-primary:hover { background:var(--violet-dark); }
.btn-ghost { background:transparent; color:var(--violet); border-color:var(--violet); }
.btn-ghost:hover { background:var(--violet); color:#fff; }
.btn-mint { background:var(--mint); color:var(--espresso); }
.btn-mint:hover { background:var(--mint-dark); color:var(--espresso); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(240,238,230,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-1);
}
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 0;
}
.nav-logo { height:52px; width:auto; display:block; }
.nav-logo-link { display:inline-flex; }
.nav-links { display:flex; gap:36px; }
.nav-link {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--espresso);
  text-decoration:none;
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.nav-link.active,
.nav-link:hover { border-color:var(--violet); }
/* Untermenü Angebote */
.nav-links { align-items:center; }
.nav-sub { position:relative; }
.nav-sub-btn { background:none; border:0; border-bottom:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.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 var(--dur-quick) var(--ease-out); }
.nav-sub:hover .caret, .nav-sub.is-open .caret { transform:translateY(1px) rotate(-135deg); }
.nav-sub-list {
  display:none; position:absolute; top:100%; left:-22px; min-width:330px; z-index:60;
  background:var(--cream); border:1px solid var(--border-2); border-radius:4px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.18); 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-for { font-family:var(--font-mono); font-size:9px; letter-spacing:.25em; text-transform:uppercase; color:var(--fg-3); padding:8px 0 10px; border-bottom:1px solid var(--border-1); white-space:nowrap; }
.nav-sub-list a { display:flex; flex-direction:column; gap:5px; padding:14px 0; border-bottom:1px solid var(--border-1); text-decoration:none; color:var(--espresso); }
.nav-sub-list a:last-child { border-bottom:0; }
.nav-sub-list a .t { font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.28em; text-transform:uppercase; }
.nav-sub-list a .d { font-size:13.5px; line-height:1.4; letter-spacing:.03em; color:var(--fg-3); white-space:nowrap; }
.nav-sub-list a:hover .t { color:var(--violet); }
.nav-sub-list a:hover .d { color:var(--espresso); }

.nav-cta {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  padding:12px 18px;
  border-radius:4px;
  background:var(--violet);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out);
  text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover { background:var(--violet-dark); }
@media (max-width:1240px) {
  .nav-links { gap:22px; }
  .nav-link, .nav-cta { font-size:12px; letter-spacing:.2em; }
  .nav-logo { height:44px; }
}

.nav-toggle {
  display:none;
  background:transparent;
  border:1px solid var(--border-2);
  border-radius:4px;
  padding:8px 10px;
  cursor:pointer;
  color:var(--espresso);
}
.nav-toggle span {
  display:block;
  width:20px;
  height:1.5px;
  background:var(--espresso);
  margin:4px 0;
  transition:transform var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding:80px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero-arrows {
  position:absolute;
  right:-80px;
  top:120px;
  width:480px;
  opacity:0.5;
  pointer-events:none;
  user-select:none;
}
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-eyebrow {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--violet);
  margin-bottom:28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.hero-eyebrow::before {
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--violet);
  border-radius:50%;
  flex-shrink:0;
}
.hero-h1 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(2.2rem, 4.8vw, 3.6rem);
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1.12;
  margin:0 0 22px;
  max-width:14ch;
  color:var(--espresso);
}
.hero-lede {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:19px;
  line-height:1.55;
  letter-spacing:0.04em;
  color:var(--espresso);
  margin:0 0 24px;
  max-width:30ch;
  text-transform:none;
}
.hero-body {
  max-width:46ch;
  font-size:19px;
  line-height:1.75;
  color:var(--fg-2);
  margin:0 0 16px;
}
.hero-cta-row {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:32px;
}

/* ----- Polaroid component ----- */
.polaroid {
  position:relative;
  background:#fff;
  padding:14px 14px 24px;
  border-radius:3px;
  box-shadow:0 14px 36px -14px rgba(15,17,21,.32);
}
.polaroid .frame {
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--sand);
  display:flex;
  align-items:center;
  justify-content:center;
}
.polaroid .frame img.photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.polaroid .placeholder {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.polaroid .tape {
  position:absolute;
  width:130px;
  pointer-events:none;
  user-select:none;
}
.polaroid .caption {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--fg-2);
  margin-top:14px;
  padding-left:6px;
}

.hero-poly {
  transform:rotate(2deg);
  max-width:520px;
  margin-left:auto;
}
.hero-poly .tape {
  top:-14px;
  right:30px;
  transform:rotate(8deg);
  width:170px;
}

/* ============================================================
   Marquee strip
   ============================================================ */
.strip {
  background:var(--espresso);
  color:var(--cream);
  padding:22px 0;
  overflow:hidden;
}
.strip-track {
  display:flex;
  gap:56px;
  white-space:nowrap;
  animation:scroll 50s linear infinite;
}
.strip-item {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.45em;
  text-transform:uppercase;
}
.strip-item .dot { color:var(--mint); margin:0 56px; }
@keyframes scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ============================================================
   "I know" section
   ============================================================ */
.iknow-grid {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:70px;
  align-items:start;
}
.iknow-poly {
  transform:rotate(-2.5deg);
  max-width:420px;
}
.iknow-poly .tape {
  top:-14px;
  left:26px;
  transform:rotate(-6deg);
}
.iknow-poly .caption {
  text-transform:none;
  letter-spacing:0.04em;
  font-size:15px;
  color:var(--fg-2);
}
.iknow p {
  color:var(--fg-2);
  margin:0 0 18px;
  max-width:60ch;
}

/* ============================================================
   Quiz / GEO Invisibility Index
   (Anthrazit block with mint CTA — unique spot of mint as confetti)
   ============================================================ */
.quiz-section { padding:60px 0 100px; }
.quiz {
  background:var(--tan);
  color:var(--cream);
  border-radius:6px;
  padding:56px 60px;
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
.quiz .eb {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.5em;
  text-transform:uppercase;
  color:rgba(240,238,230,.7);
  margin-bottom:22px;
}
.quiz .quiz-h {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.4rem, 2.2vw, 1.85rem);
  letter-spacing:0.2em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--cream);
  margin:0 auto 18px;
  max-width:18ch;
}
.quiz .sub {
  color:rgba(240,238,230,.92);
  font-size:17px;
  margin:0 auto 14px;
  max-width:36ch;
}
.quiz .desc {
  color:rgba(240,238,230,.82);
  font-size:16px;
  margin:0 auto 28px;
  max-width:42ch;
  line-height:1.65;
}
.quiz .btn {
  background:var(--mint);
  color:var(--espresso);
}
.quiz .btn:hover {
  background:var(--mint-dark);
  color:var(--espresso);
}
.quiz .secondary {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(240,238,230,.75);
  margin:18px auto 0;
  max-width:36ch;
  line-height:1.7;
}
.quiz-disclaim {
  text-align:center;
  margin-top:30px;
  font-style:italic;
  font-size:15px;
  color:var(--fg-3);
}

/* ---- Quiz interactive states (GEO Invisibility Index) ---- */
.quiz [data-quiz-state] { display:block; }
.quiz [data-quiz-state][hidden] { display:none !important; }
.quiz [data-quiz-state="question"] { text-align:left; }
.quiz [data-quiz-state="result"] { padding:0; margin:-56px -60px; }

.quiz-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
}
.quiz-counter {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(240,238,230,.7);
}
.quiz-progress {
  flex:0 0 auto;
  width:130px;
  height:3px;
  background:rgba(240,238,230,.15);
  border-radius:2px;
  overflow:hidden;
}
.quiz-progress-fill {
  height:100%;
  width:20%;
  background:var(--violet);
  border-radius:2px;
  transition:width var(--dur-base) var(--ease-out);
}

.quiz-question {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:18px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--cream);
  margin:0 0 8px;
}
.quiz-question-info {
  font-size:15px;
  font-weight:300;
  color:rgba(240,238,230,.62);
  margin:0 0 22px;
  line-height:1.55;
}
.quiz-question + .quiz-option-btn,
.quiz-question-info + .quiz-option-btn,
[data-quiz-question]:has(.quiz-question:only-child) .quiz-option-btn:first-of-type {
  margin-top:18px;
}

.quiz-option-btn {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  padding:16px 18px;
  margin:0 0 10px;
  background:rgba(15,17,21,.18);
  border:1px solid rgba(240,238,230,.14);
  border-radius:6px;
  color:rgba(240,238,230,.92);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:15px;
  line-height:1.5;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             transform var(--dur-quick) var(--ease-out);
}
.quiz-option-btn:hover {
  border-color:var(--violet);
  background:rgba(91,33,182,.18);
}
.quiz-option-btn:active { transform:scale(0.99); }
.quiz-option-btn .dot {
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.5px solid rgba(240,238,230,.32);
  flex-shrink:0;
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.quiz-option-btn:hover .dot { border-color:var(--violet); }
.quiz-option-btn.is-selected {
  border-color:var(--violet);
  background:rgba(91,33,182,.25);
}
.quiz-option-btn.is-selected .dot {
  background:var(--violet);
  border-color:var(--violet);
}

.quiz-back {
  background:none;
  border:none;
  color:rgba(240,238,230,.45);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  cursor:pointer;
  padding:10px 4px;
  margin-top:14px;
  transition:color var(--dur-base) var(--ease-out);
}
.quiz-back:hover { color:rgba(240,238,230,.9); }

/* Result states */
.quiz-result-top {
  padding:48px 60px 36px;
  text-align:center;
  border-bottom:1px solid rgba(240,238,230,.12);
}
.quiz-result-bottom {
  padding:36px 60px 48px;
  text-align:left;
}
.quiz-result-label,
.quiz-weakness-label {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(240,238,230,.6);
  margin:0 0 22px;
}
.quiz-score-ring {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.quiz-score-ring svg {
  width:170px;
  height:170px;
  transform:rotate(-90deg);
}
.quiz-score-ring .quiz-track {
  fill:transparent;
  stroke:rgba(240,238,230,.12);
  stroke-width:10;
}
.quiz-score-ring .quiz-fill {
  fill:transparent;
  stroke-width:10;
  stroke-dasharray:440;
  stroke-dashoffset:440;
  stroke:var(--violet);
  transition:stroke-dashoffset 1s var(--ease-out),
             stroke 0.4s var(--ease-out);
}
.quiz-score-number {
  position:absolute;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:42px;
  letter-spacing:0.04em;
  color:var(--cream);
}
.quiz-result-title {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:20px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cream);
  margin:26px 0 12px;
  line-height:1.3;
}
.quiz-result-desc {
  font-size:16px;
  color:rgba(240,238,230,.82);
  line-height:1.6;
  max-width:46ch;
  margin:0 auto;
}
.quiz-weakness-list {
  list-style:none;
  padding:0;
  margin:0 0 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.quiz-weakness-list li {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.55;
  color:rgba(240,238,230,.85);
  padding-left:0;
}
.quiz-weakness-list li::before {
  content:"\25C6";
  color:var(--violet);
  flex-shrink:0;
  font-size:12px;
  line-height:1.7;
}

.quiz-cta-box {
  background:rgba(15,17,21,.22);
  border:1px solid rgba(240,238,230,.1);
  border-radius:8px;
  padding:30px 28px;
  text-align:center;
}
.quiz-cta-pre {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--mint);
  margin:0 0 8px;
}
.quiz-cta-title {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:17px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cream);
  margin:0 0 8px;
}
.quiz-cta-sub {
  font-size:15px;
  color:rgba(240,238,230,.85);
  margin:0 0 22px;
  line-height:1.55;
}
.quiz-cta-note {
  font-size:13px;
  color:rgba(240,238,230,.6);
  margin:14px 0 0;
}

.quiz-fade { animation:quizFade 0.32s var(--ease-out) both; }
@keyframes quizFade {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ---- Klebstoff-Rechner specific (extends quiz card) ---- */
.kleb-slider-display {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:48px;
  letter-spacing:0.02em;
  color:var(--cream);
  text-align:center;
  margin:0 0 6px;
  line-height:1.1;
}
.kleb-slider-display .value { color:var(--mint); }
.kleb-slider-unit {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(240,238,230,.6);
  text-align:center;
  margin:0 0 28px;
}
.kleb-range {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:3px;
  background:rgba(15,17,21,.22);
  outline:none;
  margin:0 0 24px;
  cursor:pointer;
}
.kleb-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  height:28px;
  width:28px;
  border-radius:50%;
  background:var(--cream);
  border:3px solid var(--violet);
  cursor:pointer;
  transition:transform var(--dur-quick) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
  box-shadow:0 2px 8px rgba(15,17,21,.4);
}
.kleb-range::-webkit-slider-thumb:hover { transform:scale(1.08); }
.kleb-range::-moz-range-thumb {
  height:28px;
  width:28px;
  border-radius:50%;
  background:var(--cream);
  border:3px solid var(--violet);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,17,21,.4);
}
.kleb-range:focus { outline:2px solid var(--violet); outline-offset:4px; }

.kleb-rate-wrap { text-align:center; margin:0 0 24px; }
.kleb-rate-input {
  width:160px;
  padding:14px 16px;
  background:rgba(15,17,21,.18);
  border:1px solid rgba(240,238,230,.2);
  border-radius:6px;
  color:var(--cream);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:28px;
  letter-spacing:0.04em;
  outline:none;
  text-align:center;
  transition:border-color var(--dur-base) var(--ease-out);
  -moz-appearance:textfield;
}
.kleb-rate-input::-webkit-outer-spin-button,
.kleb-rate-input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}
.kleb-rate-input:focus { border-color:var(--violet); }
.kleb-rate-suffix {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(240,238,230,.6);
  margin-left:10px;
  vertical-align:middle;
}

.kleb-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:8px;
}
.kleb-nav .btn { padding:12px 24px; font-size:13px; }
.kleb-nav .quiz-back { margin-top:0; }

.kleb-result-number {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:52px;
  letter-spacing:0.02em;
  color:var(--cream);
  margin:0 0 6px;
  line-height:1.1;
}
.kleb-result-sub {
  font-size:16px;
  color:rgba(240,238,230,.78);
  margin:0;
}

.kleb-compare {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin:0 0 28px;
  flex-wrap:wrap;
}
.kleb-compare-item { text-align:center; }
.kleb-compare-label {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:rgba(240,238,230,.6);
  margin:0 0 6px;
}
.kleb-compare-value {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:28px;
  letter-spacing:0.02em;
  color:var(--cream);
  margin:0;
}
.kleb-compare-value.is-good { color:var(--mint); }
.kleb-compare-vs {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(240,238,230,.42);
}

.kleb-verdict {
  font-size:17px;
  color:rgba(240,238,230,.92);
  margin:0 0 28px;
  line-height:1.55;
  text-align:center;
}

.kleb-reset {
  display:block;
  margin:18px auto 0;
  background:none;
  border:none;
  color:rgba(240,238,230,.5);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  cursor:pointer;
  padding:10px;
  transition:color var(--dur-base) var(--ease-out);
}
.kleb-reset:hover { color:rgba(240,238,230,.9); }

@media (max-width: 900px) {
  .kleb-slider-display { font-size:38px; }
  .kleb-result-number { font-size:42px; }
  .kleb-compare-value { font-size:24px; }
  .kleb-compare { gap:16px; }
}

@media (max-width: 900px) {
  .quiz [data-quiz-state="result"] { margin:-42px -28px; }
  .quiz-result-top { padding:36px 28px 28px; }
  .quiz-result-bottom { padding:28px 28px 36px; }
  .quiz-progress { width:90px; }
  .quiz-score-ring svg { width:140px; height:140px; }
  .quiz-score-number { font-size:34px; }
}

/* ============================================================
   "Was ich baue" — Build cards
   ============================================================ */
.build .intro {
  text-align:center;
  margin:0 auto 60px;
  max-width:60ch;
}
.build .intro .section-h2 { margin:0 auto 8px; }
.build .intro .section-eyebrow { margin-left:auto; margin-right:auto; }
.build .intro p {
  color:var(--fg-2);
  margin:18px 0 0;
}
.build-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.build-card {
  position:relative;
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:40px 38px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.18);
  display:flex;
  flex-direction:column;
  transition:box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.build-card:nth-child(1) { transform:rotate(-0.8deg); }
.build-card:nth-child(2) { transform:rotate(0.6deg); }
.build-grid.three { grid-template-columns:repeat(3, 1fr); gap:24px; }
.build-grid.three .build-card { padding:34px 30px; }
.build-grid.three .build-card p { font-size:16px; }
.build-grid.three .build-card .btn { white-space:nowrap; padding:12px 14px; font-size:12px; letter-spacing:0.16em; }
.build-card:nth-child(3) { transform:rotate(-0.5deg); }
@media (max-width: 1100px) { .build-grid.three { grid-template-columns:1fr; max-width:640px; margin:0 auto; } }
.build-card:hover {
  box-shadow:0 18px 40px -16px rgba(15,17,21,.32);
  transform:rotate(0deg) translateY(-3px);
}
.build-card .eb {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-bottom:10px;
}
.build-card .h {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:20px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin:0 0 18px;
  line-height:1.3;
  color:var(--espresso);
}
.build-card p {
  font-size:17px;
  color:var(--fg-2);
  line-height:1.7;
  margin:0 0 14px;
}
.build-card .btn {
  align-self:flex-start;
  margin-top:18px;
  padding:12px 18px;
  font-size:13px;
}
.build .footnote {
  margin:60px auto 0;
  text-align:center;
  max-width:54ch;
  font-style:italic;
  color:var(--fg-2);
  font-size:16px;
  line-height:1.7;
}
.build .footnote-cta {
  text-align:center;
  margin-top:24px;
}

/* ============================================================
   Raphaela section
   ============================================================ */
.raphaela-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:70px;
  align-items:start;
}
.raphaela p {
  color:var(--fg-2);
  margin:0 0 16px;
  max-width:56ch;
}
.raphaela .name {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:17px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 6px;
}
.rap-stack {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
.rap-poly-1 { transform:rotate(-3deg); }
.rap-poly-1 .tape {
  top:-14px;
  right:20px;
  transform:rotate(8deg);
}
.rap-poly-2 {
  transform:rotate(2.5deg);
  margin-top:60px;
}
.rap-poly-2 .tape {
  top:-14px;
  left:20px;
  transform:rotate(-7deg);
}

/* ============================================================
   Steps (sand block) — outline-mint numerals with violet stroke
   ============================================================ */
.steps { background:var(--sand); }
.steps-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px;
}
.steps .section-h2 { text-align:center; margin:0 auto 50px; }
.steps .section-eyebrow { margin-left:auto; margin-right:auto; display:flex; justify-content:flex-start; }
.steps > .container > .section-eyebrow {
  display:inline-flex;
}
.steps-eyebrow-wrap { text-align:center; }
.step .num {
  font-family:var(--font-script);
  font-weight:400;
  font-size:84px;
  letter-spacing:0;
  color:var(--mint);
  margin-bottom:14px;
  line-height:1;
  display:block;
  -webkit-text-stroke:1px var(--violet);
}
.step h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:17px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin:0 0 14px;
  line-height:1.3;
  color:var(--espresso);
}
.step p {
  font-size:17px;
  color:var(--fg-2);
  line-height:1.7;
  margin:0 0 14px;
}
.steps-cta { text-align:center; margin-top:50px; }

/* ============================================================
   For whom
   ============================================================ */
.forwhom .section-h2 { text-align:center; margin:0 auto 50px; }
.forwhom-eyebrow-wrap { text-align:center; }
.forwhom-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.forwhom h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin:0 0 22px;
  color:var(--espresso);
}
.forwhom ul {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.forwhom li {
  padding-left:28px;
  position:relative;
  font-size:17px;
  line-height:1.6;
  color:var(--fg-2);
}
.forwhom li::before {
  content:"-";
  position:absolute;
  left:0;
  color:var(--violet);
}
.forwhom .nope li::before {
  content:"×";
  color:var(--tan);
  font-weight:500;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { background:var(--sand); }
.faq .section-h2 {
  margin:0 auto 40px;
  max-width:40ch;
}
.faq-list {
  max-width:820px;
  margin:0 auto;
}
details {
  border-top:1px solid var(--border-2);
  padding:22px 0;
}
details:last-child { border-bottom:1px solid var(--border-2); }
details summary {
  list-style:none;
  cursor:pointer;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--espresso);
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}
details summary::-webkit-details-marker { display:none; }
details summary::after {
  content:"+";
  font-size:22px;
  color:var(--violet);
  transition:transform var(--dur-base) var(--ease-out);
  flex-shrink:0;
}
details[open] summary::after { transform:rotate(45deg); }
details .answer {
  padding-top:16px;
  font-size:17px;
  color:var(--fg-2);
  line-height:1.7;
  max-width:70ch;
}

/* ============================================================
   Quote / closing block (espresso = near-black anthracite)
   ============================================================ */
.quote-section {
  background:var(--espresso);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.quote-tape {
  position:absolute;
  top:30px;
  right:60px;
  width:170px;
  transform:rotate(7deg);
  pointer-events:none;
}
.quote-h {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing:0.2em;
  text-transform:uppercase;
  line-height:1.3;
  max-width:24ch;
  margin:0 0 28px;
  color:var(--cream);
}
.quote-section p {
  color:rgba(240,238,230,.92);
  max-width:54ch;
  margin:0 0 16px;
}
.quote-section .hashtag {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--mint);
  margin-top:32px;
}
.quote-section .closing-cta { margin-top:36px; }
.quote-section .closing-cta .btn {
  background:var(--violet);
  color:#fff;
}
.quote-section .closing-cta .btn:hover { background:var(--violet-dark); }
.quote-section .meta {
  font-style:italic;
  font-size:16px;
  color:rgba(240,238,230,.92);
  margin-top:18px;
}
.quote-section em,
.quote-section .meta em { color:rgba(240,238,230,.92); }
.quote-section strong { color:var(--cream); }
.quote-section .section-eyebrow { color:var(--mint); }
.quote-section .section-eyebrow::before { background:var(--mint); }

/* ============================================================
   Footer
   ============================================================ */
footer {
  padding:60px 0 40px;
  border-top:1px solid var(--border-1);
}
.footer-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  align-items:end;
}
.footer-tag {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:0;
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding-top:30px;
  margin-top:40px;
  border-top:1px solid var(--border-1);
  font-family:var(--font-mono);
  font-weight:300;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a {
  color:var(--fg-3);
  text-decoration:none;
  cursor:pointer;
  transition:color var(--dur-base) var(--ease-out);
}
.footer-links a:hover { color:var(--violet); }

/* ============================================================
   About page specifics
   ============================================================ */
.page-hero {
  padding:90px 0 70px;
  position:relative;
  overflow:hidden;
}
.page-hero .hero-arrows { top:60px; opacity:0.4; }
.page-hero-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:70px;
  align-items:center;
  position:relative;
  z-index:2;
}
.page-hero h1 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(2rem, 4vw, 3rem);
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1.15;
  margin:0 0 20px;
  color:var(--espresso);
}
.page-hero p {
  color:var(--fg-2);
  margin:0 0 16px;
  max-width:54ch;
}

.about-bio {
  padding:80px 0;
}
.about-bio-grid {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:70px;
  align-items:start;
}
.about-bio p { color:var(--fg-2); margin:0 0 18px; max-width:62ch; }

.about-credentials { background:var(--sand); }
.creds-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  margin-top:30px;
}
.cred {
  background:var(--cream);
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:32px 28px;
}
.cred .label {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-bottom:14px;
}
.cred p { color:var(--fg-2); font-size:17px; line-height:1.7; margin:0 0 10px; }

.about-topics .topic-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px 60px;
}
.topic h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin:0 0 14px;
  line-height:1.4;
  color:var(--espresso);
}
.topic p { color:var(--fg-2); font-size:17px; line-height:1.7; margin:0; }

/* ============================================================
   Booking section (zcal embed wrapper)
   ============================================================ */
.booking-section { padding:80px 0 50px; }
.booking-card {
  max-width:780px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:8px;
  box-shadow:0 14px 36px -16px rgba(15,17,21,.18);
  overflow:hidden;
}
.booking-header {
  padding:36px 40px 30px;
  text-align:center;
  border-bottom:1px solid var(--border-1);
}
.booking-pre {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.booking-pre::before {
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--violet);
  border-radius:50%;
  flex-shrink:0;
}
.booking-card h2 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing:0.2em;
  text-transform:uppercase;
  line-height:1.3;
  margin:0 0 14px;
  color:var(--espresso);
}
.booking-card h2 .accent {
  font-family:var(--font-script);
  font-weight:400;
  font-size:1.4em;
  letter-spacing:0;
  text-transform:none;
  line-height:0.95;
  color:var(--violet);
  display:inline-block;
  transform:translateY(0.1em);
}
.booking-header p {
  color:var(--fg-2);
  margin:0 auto;
  max-width:50ch;
  font-size:16px;
  line-height:1.6;
}
.zcal-frame {
  padding:12px 12px 18px;
  min-height:720px;
  background:#fff;
  display:flex;
}
.zcal-frame .zcal-inline-widget {
  flex:1;
  min-height:700px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* zcal injects an iframe; let it grow naturally */
.zcal-frame .zcal-inline-widget iframe {
  width:100% !important;
  border:none !important;
  min-height:700px;
}
.zcal-frame .zcal-inline-widget > a {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--violet);
  text-decoration:underline;
  text-underline-offset:6px;
}
.booking-meta {
  text-align:center;
  font-size:13px;
  color:var(--fg-3);
  margin:18px auto 0;
  max-width:54ch;
}

@media (max-width: 640px) {
  .booking-header { padding:28px 24px 24px; }
  .zcal-frame { padding:8px; min-height:640px; }
  .zcal-frame .zcal-inline-widget,
  .zcal-frame .zcal-inline-widget iframe { min-height:620px; }
}

/* ---- Hero variant: zcal calendar inline next to hero text ---- */
.page-hero-booking { padding:50px 0 60px; }
.page-hero-booking .page-hero-grid {
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:center;
}
.page-hero-booking h1 { font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom:18px; }
.page-hero-booking .hero-lede { font-size:17px; margin-bottom:18px; }
.page-hero-booking .hero-meta {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.page-hero-booking .hero-meta::before {
  content:"→";
  color:var(--violet);
  font-size:16px;
  letter-spacing:0;
}

.hero-booking-card {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:8px;
  padding:18px 18px 12px;
  box-shadow:0 14px 36px -16px rgba(15,17,21,.18);
}
.hero-booking-card .booking-pre {
  margin:0 0 14px;
  padding:0 6px;
}
.hero-booking-card .zcal-inline-widget {
  display:block;
  min-height:600px;
}
.hero-booking-card .zcal-inline-widget iframe {
  width:100% !important;
  border:none !important;
  min-height:600px;
  display:block;
}
.hero-booking-card .zcal-inline-widget > a {
  display:block;
  text-align:center;
  padding:240px 12px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--violet);
  text-decoration:underline;
  text-underline-offset:6px;
}

@media (max-width: 1024px) {
  .page-hero-booking .page-hero-grid { grid-template-columns:1fr; gap:40px; }
}
@media (max-width: 640px) {
  .page-hero-booking { padding:36px 0 40px; }
  .hero-booking-card { padding:12px 12px 8px; }
  .hero-booking-card .zcal-inline-widget,
  .hero-booking-card .zcal-inline-widget iframe { min-height:560px; }
}

/* ============================================================
   Kontakt page specifics
   ============================================================ */
.contact-section { padding:80px 0 100px; }
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}
.contact-card {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:40px 38px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.18);
}
.contact-card h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin:0 0 18px;
  color:var(--espresso);
}
.contact-card p { color:var(--fg-2); margin:0 0 14px; }
.contact-card a.mail {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.16em;
  text-transform:none;
  color:var(--violet);
  text-decoration:underline;
  text-underline-offset:4px;
}
.contact-card a.mail:hover { color:var(--violet-dark); }

.contact-form { display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.contact-form label {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-bottom:6px;
  display:block;
}
.contact-form input,
.contact-form textarea {
  font-family:var(--font-sans);
  font-weight:300;
  font-size:17px;
  color:var(--espresso);
  background:var(--cream);
  border:1px solid var(--border-1);
  border-radius:4px;
  padding:14px 16px;
  width:100%;
  letter-spacing:0.04em;
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline:none;
  border-color:var(--violet);
  background:#fff;
}
.contact-form textarea { min-height:140px; resize:vertical; }
.contact-form .form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.contact-form .submit-row { margin-top:8px; }
.form-status {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
  margin-top:14px;
  min-height:1em;
}

/* ============================================================
   Reveal-on-scroll utility
   ============================================================ */
.reveal {
  opacity:0;
  transform:translateY(10px);
  transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.reveal.is-visible {
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .strip-track { animation:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  *,*::before,*::after { animation-duration:0ms !important; transition-duration:0ms !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding:0 24px; }
  section { padding:80px 0; }
  .build-grid,
  .creds-grid,
  .about-topics .topic-grid { gap:24px; }
}

@media (max-width: 900px) {
  .hero-grid,
  .iknow-grid,
  .raphaela-grid,
  .build-grid,
  .steps-grid,
  .forwhom-grid,
  .footer-grid,
  .page-hero-grid,
  .about-bio-grid,
  .creds-grid,
  .about-topics .topic-grid,
  .contact-grid { grid-template-columns:1fr; gap:40px; }

  .rap-stack { grid-template-columns:1fr 1fr; }
  .rap-poly-2 { margin-top:0; }
  .hero-arrows { display:none; }
  .quote-tape { width:120px; right:24px; top:18px; }

  .nav-links { display:none; flex-direction:column; gap:14px; padding:14px 0 4px; flex-basis:100%; }
  .nav.is-open .nav-links { display:flex; }
  .nav-toggle { display:inline-flex; flex-direction:column; }
  .nav-links { align-items:flex-start; }
  .nav-sub { width:100%; }
  .nav-sub-btn { pointer-events:none; color:var(--fg-3); font-size:11px; }
  .nav-sub-btn .caret, .nav-sub-for { display:none; }
  .nav-sub-list { display:flex; position:static; border:0; box-shadow:none; background:none; padding:4px 0 0 16px; min-width:0; }
  .nav-sub-list a { padding:10px 0; border-bottom:0; }
  .nav-sub-list a .d { white-space:normal; }
  .nav-inner { flex-wrap:wrap; }
  .nav-cta { font-size:12px; padding:10px 14px; }

  .hero-poly { margin-left:0; margin-right:auto; }

  .quiz { padding:42px 28px; }

  .nav-logo { height:42px; }
}

@media (max-width: 560px) {
  .container { padding:0 20px; }
  section { padding:64px 0; }
  .hero { padding:48px 0 60px; }
  .build-card { padding:32px 24px; }
  .contact-card { padding:32px 24px; }
  .contact-form .form-row { grid-template-columns:1fr; }
  .rap-stack { grid-template-columns:1fr; }
  .step .num { font-size:72px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   Case Study pages
   Long-read layout: article header, sticky TOC, measurement
   ledger (signature), ranking bars, polaroid screenshots.
   ============================================================ */

/* ----- Draft markers (removed by deleting data-draft on the body element) ----- */
.cs-draft-bar {
  background:var(--sand);
  border-bottom:1px solid var(--border-1);
  text-align:center;
  padding:9px 20px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
}
.cs-draft {
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--violet);
  border:1px dashed var(--violet);
  border-radius:3px;
  padding:2px 8px;
  margin-left:8px;
  vertical-align:middle;
  white-space:nowrap;
}
body:not([data-draft]) .cs-draft-bar,
body:not([data-draft]) .cs-draft { display:none; }

/* ----- Hero ----- */
.cs-hero { padding:70px 0 60px; }
.cs-hero .page-hero-grid { grid-template-columns:1.25fr 1fr; align-items:center; }
.cs-hero h1 { max-width:16ch; }
.cs-hero .cs-sub {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:18px;
  line-height:1.55;
  letter-spacing:0.04em;
  color:var(--espresso);
  margin:0 0 22px;
  max-width:38ch;
}
.cs-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-top:26px;
}
.cs-meta b { font-weight:500; color:var(--espresso); }
.cs-hero .hero-poly { transform:rotate(1.6deg); max-width:540px; }

/* ----- Screenshot figures (polaroid) ----- */
.cs-figure { margin:40px 0; }
.cs-figure.polaroid { padding:12px 12px 18px; }
.cs-figure.polaroid .frame {
  aspect-ratio:auto;
  background:var(--sand);
  display:block;
}
.cs-figure.polaroid img.shot,
.cs-hero .polaroid img.shot {
  display:block;
  width:100%;
  height:auto;
  border-radius:2px;
}
.cs-figure.polaroid .placeholder,
.cs-hero .polaroid .placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:220px;
  padding:24px;
  line-height:1.8;
}
.cs-zoom {
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  cursor:zoom-in;
  text-align:left;
}
.cs-zoom:focus-visible { outline:2px solid var(--violet); outline-offset:4px; }
.cs-figure .cap-meta,
.cs-hero .cap-meta {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--violet);
  margin:14px 0 4px;
  padding-left:4px;
}
.cs-figure .caption,
.cs-hero .caption {
  font-family:var(--font-sans);
  font-weight:300;
  font-size:14px;
  line-height:1.55;
  letter-spacing:0.02em;
  text-transform:none;
  color:var(--fg-2);
  margin:0;
  padding-left:4px;
}
.cs-figure .caption em { color:var(--fg-3); }
.cs-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:start;
}
.cs-pair .polaroid:first-child { transform:rotate(-1.4deg); }
.cs-pair .polaroid:last-child { transform:rotate(1.2deg); margin-top:28px; }
.cs-pair .polaroid .tape { top:-14px; width:120px; }
.cs-pair .polaroid:first-child .tape { left:24px; transform:rotate(-7deg); }
.cs-pair .polaroid:last-child .tape { right:24px; transform:rotate(8deg); }
.cs-trio {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:start;
}
.cs-trio .polaroid:nth-child(1) { transform:rotate(-1.2deg); }
.cs-trio .polaroid:nth-child(2) { transform:rotate(0.8deg); margin-top:20px; }
.cs-trio .polaroid:nth-child(3) { transform:rotate(-0.6deg); }
.cs-wide { max-width:none; }

/* ----- Lightbox ----- */
.cs-lightbox {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(15,17,21,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.cs-lightbox[hidden] { display:none; }
.cs-lightbox img {
  max-width:min(1400px, 100%);
  max-height:calc(100vh - 80px);
  width:auto;
  height:auto;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  border-radius:3px;
  background:#fff;
}
.cs-lightbox-close {
  position:absolute;
  top:22px;
  right:28px;
  background:transparent;
  border:1px solid rgba(240,238,230,.4);
  border-radius:4px;
  color:var(--cream);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  padding:10px 14px;
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out);
}
.cs-lightbox-close:hover { border-color:var(--mint); color:var(--mint); }
.cs-lightbox-cap {
  position:absolute;
  left:0; right:0; bottom:18px;
  text-align:center;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(240,238,230,.7);
  padding:0 24px;
}
body.cs-lightbox-open { overflow:hidden; }

/* ----- Measurement ledger (signature) ----- */
.cs-ledger { background:var(--sand); padding:90px 0; }
.cs-ledger .section-eyebrow { display:inline-flex; }
.cs-ledger .section-h2 { margin-bottom:36px; max-width:30ch; }
.cs-ledger-card {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  box-shadow:0 14px 36px -16px rgba(15,17,21,.22);
  overflow:hidden;
}
.cs-ledger-head,
.cs-ledger-row {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:24px;
  padding:0 36px;
  align-items:center;
}
.cs-ledger-head {
  padding-top:18px;
  padding-bottom:16px;
  border-bottom:2px solid var(--espresso);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.cs-ledger-head .now { color:var(--violet); }
.cs-ledger-row {
  padding-top:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border-1);
}
.cs-ledger-row:last-child { border-bottom:none; }
.cs-ledger-row .lab {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--espresso);
  line-height:1.4;
}
.cs-ledger-row .lab small {
  display:block;
  font-family:var(--font-sans);
  font-weight:300;
  font-size:14px;
  letter-spacing:0.03em;
  text-transform:none;
  color:var(--fg-3);
  margin-top:6px;
  line-height:1.5;
}
.cs-ledger-row .val {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing:0.02em;
  line-height:1.05;
  color:var(--fg-3);
  font-variant-numeric:tabular-nums;
}
.cs-ledger-row .val .of {
  font-size:0.5em;
  color:var(--fg-3);
  letter-spacing:0.06em;
  margin-left:4px;
}
.cs-ledger-row .val.now { color:var(--violet); }
.cs-ledger-row .val.now .of { color:var(--violet); opacity:.7; }
.cs-ledger-row .val .sub {
  display:block;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-top:8px;
  line-height:1.5;
}
.cs-ledger-foot {
  padding:16px 36px 18px;
  background:var(--cream);
  border-top:1px solid var(--border-1);
  font-family:var(--font-mono);
  font-weight:300;
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--fg-3);
  line-height:1.6;
}

/* ----- Fact sheet (Steckbrief) ----- */
.cs-facts {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px 40px;
  margin:56px 0 0;
  padding:0;
}
.cs-facts div { margin:0; }
.cs-facts dt {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin:0 0 8px;
}
.cs-facts dd {
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--fg-2);
}
.cs-facts dd b { font-weight:400; color:var(--espresso); }

/* ----- Article body + TOC ----- */
.cs-body-wrap {
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:72px;
  align-items:start;
  padding:90px 0 40px;
}
.cs-toc {
  position:sticky;
  top:110px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.cs-toc-label { color:var(--violet); margin-bottom:16px; }
.cs-toc ol {
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:cstoc;
  border-left:1px solid var(--border-2);
}
.cs-toc li {
  counter-increment:cstoc;
  position:relative;
  padding:7px 0 7px 22px;
  color:var(--fg-3);
  line-height:1.5;
  transition:color var(--dur-base) var(--ease-out);
}
.cs-toc li::before {
  content:counter(cstoc, decimal-leading-zero);
  position:absolute;
  left:-1px;
  top:7px;
  padding:0 8px 0 6px;
  background:var(--cream);
  color:var(--fg-3);
}
.cs-toc li.active { color:var(--espresso); }
.cs-toc li.active::before { color:var(--violet); }
.cs-toc a { color:inherit; text-decoration:none; }
.cs-toc a:hover { color:var(--violet); }

.cs-article { max-width:760px; min-width:0; }
.cs-article > p,
.cs-article .cs-tldr p,
.cs-article li {
  font-size:17px;
  line-height:1.72;
  color:var(--fg-2);
}
.cs-article > p { margin:0 0 22px; }
.cs-article a { color:var(--violet); text-decoration:underline; text-underline-offset:4px; }
.cs-article h2 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.25;
  color:var(--espresso);
  margin:72px 0 22px;
  scroll-margin-top:110px;
}
.cs-article h2:first-of-type { margin-top:0; }
.cs-article h2 .accent {
  font-family:var(--font-script);
  font-weight:400;
  font-size:1.5em;
  letter-spacing:0;
  text-transform:none;
  line-height:0.95;
  color:var(--violet);
  display:inline-block;
  transform:translateY(0.1em);
}
.cs-article h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--espresso);
  margin:44px 0 14px;
}
.cs-article ul.dash { list-style:none; padding:0; margin:0 0 26px; }
.cs-article ul.dash li { position:relative; padding:5px 0 5px 26px; }
.cs-article ul.dash li::before { content:"-"; position:absolute; left:0; color:var(--violet); font-weight:400; }

.cs-tldr {
  background:#fff;
  border:1px solid var(--border-1);
  border-left:3px solid var(--violet);
  border-radius:6px;
  padding:28px 32px 20px;
  margin:0 0 48px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.14);
}
.cs-tldr .label {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 14px;
}
.cs-tldr p { font-size:16px; margin:0 0 12px; }

.cs-pull {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.15rem, 1.8vw, 1.45rem);
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--espresso);
  padding:26px 0;
  margin:40px 0;
  border-top:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2);
}
.cs-pull .accent { color:var(--violet); }

.cs-article blockquote {
  margin:40px 0;
  padding:6px 0 6px 26px;
  border-left:3px solid var(--violet);
  font-style:italic;
  font-weight:300;
  font-size:21px;
  line-height:1.55;
  color:var(--espresso);
}
.cs-article blockquote p { margin:0; font-size:inherit; color:inherit; }
.cs-article blockquote cite {
  display:block;
  margin-top:14px;
  font-family:var(--font-mono);
  font-style:normal;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--violet);
}

.cs-machine {
  background:var(--tan);
  color:var(--cream);
  border-radius:6px;
  padding:26px 30px;
  margin:28px 0 32px;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  letter-spacing:0.02em;
}
.cs-machine .who {
  display:block;
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:10px;
  font-weight:500;
}

/* Two explainer cards */
.cs-two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin:28px 0 34px;
}
.cs-card {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:26px 26px 20px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.14);
}
.cs-card .k {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 8px;
}
.cs-card h4 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:0 0 12px;
  line-height:1.4;
}
.cs-card p { font-size:15px; line-height:1.65; color:var(--fg-2); margin:0 0 10px; }
.cs-card .t {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-top:12px;
}

/* Tables */
.cs-table-wrap {
  margin:32px 0 36px;
  overflow-x:auto;
  border:1px solid var(--border-1);
  border-radius:6px;
  background:#fff;
}
table.cs-table { width:100%; border-collapse:collapse; font-size:15px; line-height:1.55; }
table.cs-table th {
  background:var(--sand);
  color:var(--espresso);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-align:left;
  padding:14px 18px;
  border-bottom:2px solid var(--espresso);
  white-space:nowrap;
}
table.cs-table th.now { color:var(--violet); }
table.cs-table td {
  padding:15px 18px;
  border-bottom:1px solid var(--border-1);
  vertical-align:top;
  color:var(--fg-2);
  font-weight:300;
}
table.cs-table tr:last-child td { border-bottom:none; }
table.cs-table td:first-child {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--espresso);
}
table.cs-table td b { font-weight:400; color:var(--espresso); }
table.cs-table td.now { color:var(--espresso); font-weight:400; }
table.cs-table td.num { font-family:var(--font-mono); font-weight:500; color:var(--espresso); white-space:nowrap; font-variant-numeric:tabular-nums; }
table.cs-table tr.hl td { background:rgba(91,33,182,.05); }

/* Timeline */
.cs-timeline {
  list-style:none;
  padding:0;
  margin:30px 0 40px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  position:relative;
}
.cs-timeline::before {
  content:"";
  position:absolute;
  left:0; right:0; top:5px;
  height:1px;
  background:var(--border-2);
}
.cs-timeline li { position:relative; padding-top:26px; }
.cs-timeline li::before {
  content:"";
  position:absolute;
  left:0; top:0;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--cream);
  border:2px solid var(--violet);
}
.cs-timeline li.live::before { background:var(--violet); }
.cs-timeline .d {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.2em;
  color:var(--violet);
  margin:0 0 6px;
}
.cs-timeline .e {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:0 0 6px;
  line-height:1.5;
}
.cs-timeline .n { font-size:14px; line-height:1.55; color:var(--fg-3); margin:0; }

/* Ranking list with visibility bars */
.cs-rank { list-style:none; padding:0; margin:28px 0 36px; counter-reset:none; }
.cs-rank li {
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 68px;
  gap:18px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--border-1);
  font-size:16px;
}
.cs-rank li:first-child { border-top:1px solid var(--border-2); }
.cs-rank .pos {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--violet);
  border:1px solid var(--violet);
  border-radius:4px;
  text-align:center;
  padding:8px 0;
  line-height:1;
}
.cs-rank .pos small { display:block; font-size:8px; letter-spacing:0.2em; opacity:.75; margin-bottom:4px; }
.cs-rank .q { color:var(--espresso); line-height:1.5; margin:0 0 8px; font-size:15.5px; }
.cs-rank .bar {
  height:5px;
  background:var(--sand);
  border-radius:3px;
  overflow:hidden;
}
.cs-rank .bar span {
  display:block;
  height:100%;
  width:var(--w, 0%);
  background:var(--violet);
  border-radius:3px;
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 900ms var(--ease-out);
}
.cs-rank.is-visible .bar span { transform:scaleX(1); }
.cs-rank .pct {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  color:var(--espresso);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.cs-article p.cs-rank-legend {
  font-family:var(--font-mono);
  font-weight:400;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--fg-3);
  margin:-24px 0 32px;
  line-height:1.6;
}

/* Stat tiles */
.cs-stats {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:28px 0 30px;
}
.cs-stat {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:22px 22px 18px;
}
.cs-stat .lab {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin:0 0 12px;
}
.cs-stat .row { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.cs-stat .was,
.cs-stat .now {
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.cs-stat .was { font-size:20px; color:var(--fg-3); }
.cs-stat .now { font-size:32px; color:var(--violet); }
.cs-stat .q {
  display:block;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-top:8px;
  font-weight:500;
}
.cs-stat .delta {
  margin:14px 0 0;
  font-size:14px;
  color:var(--fg-2);
  line-height:1.5;
}
.cs-stat .delta b { color:var(--espresso); font-weight:400; }

/* Honest section (anthracite) */
.cs-honest { background:var(--espresso); color:var(--cream); }
.cs-honest .section-eyebrow { color:var(--mint); }
.cs-honest .section-eyebrow::before { background:var(--mint); }
.cs-honest .quote-h .accent { color:var(--mint); }
.cs-honest-intro { color:rgba(240,238,230,.85); max-width:54ch; margin:0 0 40px; }
.cs-honest-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px 56px;
}
.cs-honest-list li { display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:start; }
.cs-honest-list .num {
  font-family:var(--font-script);
  font-weight:400;
  font-size:64px;
  line-height:0.9;
  color:var(--mint);
  -webkit-text-stroke:1px var(--violet);
}
.cs-honest-list h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cream);
  margin:6px 0 10px;
  line-height:1.4;
}
.cs-honest-list p { font-size:16px; line-height:1.7; color:rgba(240,238,230,.85); margin:0 0 10px; max-width:none; }
.cs-honest-list p em { color:rgba(240,238,230,.7); }

/* Closing block variants */
.cs-closing .quote-h { max-width:20ch; }

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  .cs-body-wrap { gap:44px; grid-template-columns:190px minmax(0,1fr); }
  .cs-facts { grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px) {
  .cs-hero .page-hero-grid { grid-template-columns:1fr; }
  .cs-hero .hero-poly { margin:10px 0 0; max-width:520px; }
  .cs-body-wrap { grid-template-columns:1fr; gap:32px; padding-top:64px; }
  .cs-toc { position:static; }
  .cs-toc ol { border-left:none; display:flex; flex-wrap:wrap; gap:6px 18px; }
  .cs-toc li { padding:4px 0; }
  .cs-toc li::before { display:none; }
  .cs-ledger { padding:70px 0; }
  .cs-ledger-head { display:none; }
  .cs-ledger-row { grid-template-columns:1fr 1fr; gap:16px; padding:22px 24px; }
  .cs-ledger-row .lab { grid-column:1 / -1; }
  .cs-ledger-row .val::before {
    display:block;
    font-size:10px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--fg-3);
    margin-bottom:8px;
  }
  .cs-ledger-row .val.was::before { content:"Februar 2026"; }
  .cs-ledger-row .val.now::before { content:"September 2026"; color:var(--violet); }
  .cs-ledger-foot { padding:14px 24px 16px; }
  .cs-two, .cs-stats, .cs-honest-list, .cs-pair, .cs-trio { grid-template-columns:1fr; }
  .cs-pair .polaroid:last-child, .cs-trio .polaroid:nth-child(2) { margin-top:0; }
  .cs-timeline { grid-template-columns:1fr; gap:22px; padding-left:24px; }
  .cs-timeline::before { top:0; bottom:0; left:5px; right:auto; width:1px; height:auto; }
  .cs-timeline li { padding-top:0; padding-left:0; }
  .cs-timeline li::before { left:-24px; top:4px; }
  .cs-lightbox { padding:16px; }
  .cs-lightbox-close { top:12px; right:12px; }
}
@media (max-width: 560px) {
  .cs-hero { padding:44px 0 40px; }
  .cs-facts { grid-template-columns:1fr; gap:20px; }
  .cs-rank li { grid-template-columns:44px minmax(0,1fr); gap:6px 14px; }
  .cs-rank .pct { grid-column:2; text-align:left; margin-top:-4px; font-size:12px; }
  .cs-ledger-row { grid-template-columns:1fr; }
  .cs-honest-list li { grid-template-columns:48px 1fr; }
  .cs-honest-list .num { font-size:52px; }
  .cs-tldr { padding:22px 20px 14px; }
  .cs-machine { padding:20px 20px; font-size:14px; }
}

/* ----- Case Study: foundation stack + quote placeholders ----- */
.cs-stack {
  list-style:none;
  padding:0;
  margin:30px 0 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.cs-stack li {
  width:var(--w, 100%);
  display:grid;
  grid-template-columns:150px 1fr;
  gap:14px;
  align-items:center;
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:4px;
  padding:13px 18px;
  font-size:15px;
  line-height:1.5;
  color:var(--fg-2);
}
.cs-stack li:nth-child(1) { --w:70%; }
.cs-stack li:nth-child(2) { --w:80%; }
.cs-stack li:nth-child(3) { --w:90%; }
.cs-stack li .k {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--fg-3);
  line-height:1.5;
}
.cs-stack li.base {
  background:var(--violet);
  border-color:var(--violet);
  color:var(--cream);
  padding:18px 18px;
}
.cs-stack li.base .k { color:rgba(240,238,230,.75); }
.cs-stack li.base .d { color:var(--cream); font-weight:400; }
.cs-article p.cs-stack-note {
  font-family:var(--font-mono);
  font-weight:400;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--fg-3);
  text-align:center;
  margin:0 0 30px;
}

.cs-draft-slot {
  border:1px dashed var(--violet);
  border-radius:6px;
  background:rgba(91,33,182,.04);
  padding:18px 22px;
  margin:28px 0;
}
.cs-draft-slot .k {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 8px;
}
.cs-article .cs-draft-slot .q {
  font-size:16px;
  font-style:italic;
  color:var(--espresso);
  margin:0 0 8px;
  line-height:1.6;
}
.cs-article .cs-draft-slot .n {
  font-size:13px;
  color:var(--fg-3);
  margin:0;
  line-height:1.5;
}
body:not([data-draft]) .cs-draft-slot { display:none; }

@media (max-width: 560px) {
  .cs-stack li { grid-template-columns:1fr; gap:4px; }
  .cs-stack li:nth-child(1), .cs-stack li:nth-child(2), .cs-stack li:nth-child(3) { --w:100%; }
}

/* ----- Case Study: side note (sticky note with tape) ----- */
.cs-note {
  position:relative;
  background:var(--sand);
  border-radius:4px;
  padding:30px 30px 24px;
  margin:44px 0 8px;
  transform:rotate(-0.6deg);
  box-shadow:0 10px 28px -16px rgba(15,17,21,.28);
}
.cs-note .tape {
  position:absolute;
  top:-14px;
  left:32px;
  width:120px;
  transform:rotate(-6deg);
  pointer-events:none;
  user-select:none;
}
.cs-note .k {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 10px;
}
.cs-article .cs-note p:not(.k) {
  font-size:16px;
  line-height:1.7;
  color:var(--fg-2);
  margin:0;
}
.cs-note em { color:var(--fg-3); }
@media (max-width: 560px) {
  .cs-note { padding:24px 20px 20px; }
}

/* ============================================================
   Markenbrain-Methode page
   ============================================================ */
.mx-hero { padding:70px 0 70px; }
.mx-hero .page-hero-grid { grid-template-columns:1.05fr 1fr; align-items:center; gap:60px; }
.mx-hero h1 { max-width:12ch; }
.mx-hero .mx-def {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:17px;
  line-height:1.6;
  letter-spacing:0.03em;
  color:var(--espresso);
  margin:0 0 18px;
  max-width:44ch;
}
.mx-hero .mx-def b { font-weight:500; color:var(--violet); }
.mx-hero p.mx-def2 { max-width:52ch; margin:0 0 8px; }

/* Mini brain (hero visual) */
.mx-brain-frame {
  background:var(--sand);
  border:1px solid var(--border-2);
  border-radius:8px;
  padding:18px 18px 16px;
  transform:rotate(1.2deg);
  box-shadow:0 18px 40px -22px rgba(15,17,21,.3);
}
.mx-brain-frame .k {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--fg-2);
  margin:0 0 12px;
}
.mx-brain-frame .k span { color:var(--fg-3); letter-spacing:0.08em; text-transform:none; font-weight:400; margin-left:8px; }
.mx-brain {
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  grid-template-rows:auto auto auto auto;
  gap:8px;
}
.mx-brain .t {
  position:relative;
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:3px;
  padding:12px 12px 10px;
  min-height:64px;
}
.mx-brain .t .a {
  font-family:var(--font-mono);
  font-weight:400;
  font-size:9px;
  letter-spacing:0.2em;
  color:var(--fg-3);
  margin:0 0 4px;
}
.mx-brain .t .h {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:0;
  line-height:1.3;
}
.mx-brain .t.wer { grid-column:1; grid-row:1 / span 2; display:flex; flex-direction:column; justify-content:flex-start; }
.mx-brain .t.wer .h { font-size:clamp(2rem, 4vw, 3rem); letter-spacing:0.08em; line-height:1; margin-top:auto; }
.mx-brain .t.wen { grid-column:2 / span 2; grid-row:1; }
.mx-brain .t.beweis { grid-column:2 / span 2; grid-row:2; }
.mx-brain .t.klingt { grid-column:1; grid-row:3; }
.mx-brain .t.aussieht { grid-column:2; grid-row:3; }
.mx-brain .t.tut { grid-column:3; grid-row:3; }
.mx-brain .t.nerv {
  grid-column:1 / span 3;
  grid-row:4;
  background:rgba(91,33,182,.06);
  border:1px solid var(--violet);
  min-height:0;
}
.mx-brain .t.nerv .a { color:var(--violet); }
.mx-brain .t.nerv .h { color:var(--violet); }
.mx-brain .t::after {
  content:"";
  position:absolute;
  top:10px; right:10px;
  width:8px; height:8px;
  background:var(--mint);
  border:1px solid var(--violet);
  opacity:0;
  animation:mxPulse 9s infinite;
}
.mx-brain .t:nth-child(1)::after { animation-delay:0s; }
.mx-brain .t:nth-child(2)::after { animation-delay:1.3s; }
.mx-brain .t:nth-child(3)::after { animation-delay:2.6s; }
.mx-brain .t:nth-child(4)::after { animation-delay:3.9s; }
.mx-brain .t:nth-child(5)::after { animation-delay:5.2s; }
.mx-brain .t:nth-child(6)::after { animation-delay:6.5s; }
.mx-brain .t:nth-child(7)::after { animation-delay:7.8s; }
@keyframes mxPulse {
  0%, 12% { opacity:1; }
  16%, 100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-brain .t::after { animation:none; opacity:.9; }
}

/* Prose blocks */
.mx-prose { max-width:760px; }
.mx-prose p { font-size:17px; line-height:1.72; color:var(--fg-2); margin:0 0 22px; }
.mx-prose p strong { font-weight:400; color:var(--espresso); }
.mx-prose a { color:var(--violet); text-decoration:underline; text-underline-offset:4px; }
.mx-prose .section-h2 { max-width:none; }
.mx-prose ul.mx-list { list-style:none; padding:0; margin:0 0 26px; }
.mx-prose ul.mx-list li { position:relative; padding:5px 0 5px 26px; font-size:17px; line-height:1.7; color:var(--fg-2); }
.mx-prose ul.mx-list li::before { content:"-"; position:absolute; left:0; color:var(--violet); }
.mx-center { margin-left:auto; margin-right:auto; }

/* Three stages */
.mx-stages { display:flex; flex-direction:column; gap:44px; margin:50px 0 0; }
.mx-stage { display:grid; grid-template-columns:120px minmax(0,1fr); gap:24px; align-items:start; }
.mx-stage .num {
  font-family:var(--font-script);
  font-weight:400;
  font-size:92px;
  line-height:0.9;
  color:var(--mint);
  -webkit-text-stroke:1px var(--violet);
  margin-top:-10px;
}
.mx-stage .lab {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 8px;
}
.mx-stage h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:22px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:0 0 14px;
  line-height:1.25;
}
.mx-stage p { font-size:17px; line-height:1.72; color:var(--fg-2); margin:0 0 14px; max-width:66ch; }
.mx-stage p em { color:var(--fg-3); }

/* Architecture explorer */
.mx-explorer { background:var(--sand); padding:90px 0; }
.mx-explorer .section-h2 { max-width:30ch; }
.mx-explorer .lead { color:var(--fg-2); max-width:62ch; margin:0 0 30px; }
.mx-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.mx-tab {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:11px 14px;
  border-radius:4px;
  border:1px solid var(--border-2);
  background:transparent;
  color:var(--espresso);
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.mx-tab:hover { border-color:var(--violet); color:var(--violet); }
.mx-tab.is-active { background:var(--violet); border-color:var(--violet); color:#fff; }
.mx-tab:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.mx-tab .n { opacity:.6; margin-right:6px; }
.mx-tab.ausbau { border-style:dashed; }
.mx-stage-wrap {
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(280px, 1fr);
  gap:22px;
  align-items:start;
}
.mx-canvas {
  position:relative;
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 14px 36px -18px rgba(15,17,21,.28);
}
.mx-canvas img { display:block; width:100%; height:auto; }
.mx-focus {
  position:absolute;
  left:0; top:0; width:100%; height:100%;
  border:2px solid var(--violet);
  border-radius:4px;
  box-shadow:0 0 0 9999px rgba(240,238,230,.78);
  pointer-events:none;
  opacity:0;
  transition:left 520ms var(--ease-out), top 520ms var(--ease-out), width 520ms var(--ease-out), height 520ms var(--ease-out), opacity 300ms var(--ease-out);
}
.mx-canvas.is-focused .mx-focus { opacity:1; }
.mx-canvas .cs-zoom { cursor:zoom-in; }
.mx-panel {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:26px 28px 22px;
  position:sticky;
  top:110px;
}
.mx-panel .k {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 10px;
  min-height:1.4em;
}
.mx-panel h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:18px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:0 0 12px;
  line-height:1.3;
}
.mx-panel p { font-size:15.5px; line-height:1.65; color:var(--fg-2); margin:0 0 10px; }
.mx-panel .chips { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; }
.mx-panel .chips span {
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  padding:4px 9px;
  border:1px solid var(--border-2);
  border-radius:3px;
  color:var(--espresso);
  background:var(--cream);
}
.mx-panel .chips span.mint { border-color:var(--mint); background:rgba(0,255,181,.12); }
.mx-panel .chips span.violet { border-color:var(--violet); color:var(--violet); }
.mx-panel .hint {
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--fg-3);
  margin:16px 0 0;
}
.mx-caption {
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin:14px 0 0;
}

/* Thesis block */
.mx-thesis {
  background:var(--espresso);
  color:var(--cream);
  border-radius:6px;
  padding:44px 48px;
  margin:44px 0 0;
  text-align:center;
}
.mx-thesis .eb {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--mint);
  margin:0 0 16px;
}
.mx-thesis p {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.45;
  margin:0 auto;
  max-width:30ch;
  color:var(--cream);
}
.mx-thesis p .accent {
  font-family:var(--font-script);
  font-weight:400;
  font-size:1.5em;
  letter-spacing:0;
  text-transform:none;
  color:var(--mint);
  display:inline-block;
  transform:translateY(0.1em);
}

/* Self-build questions */
.mx-q { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 30px; }
.mx-q div {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:4px;
  padding:14px 16px;
  font-size:15px;
  line-height:1.55;
  color:var(--fg-2);
}
.mx-q div::before {
  content:"?";
  font-family:var(--font-mono);
  font-weight:500;
  color:var(--violet);
  margin-right:10px;
}

.mx-stack-note {
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--fg-3);
  text-align:center;
  margin:0 0 34px;
}

@media (max-width: 1024px) {
  .mx-stage-wrap { grid-template-columns:1fr; }
  .mx-panel { position:static; }
}
@media (max-width: 900px) {
  .mx-hero .page-hero-grid { grid-template-columns:1fr; gap:40px; }
  .mx-brain-frame { transform:none; }
  .mx-stage { grid-template-columns:72px minmax(0,1fr); gap:16px; }
  .mx-stage .num { font-size:64px; }
  .mx-explorer { padding:70px 0; }
  .mx-q { grid-template-columns:1fr; }
  .mx-thesis { padding:32px 24px; }
}
@media (max-width: 560px) {
  .mx-hero { padding:44px 0 44px; }
  .mx-brain { grid-template-columns:1fr 1fr; }
  .mx-brain .t.wer { grid-column:1 / span 2; grid-row:1; }
  .mx-brain .t.wen { grid-column:1; grid-row:2; }
  .mx-brain .t.beweis { grid-column:2; grid-row:2; }
  .mx-brain .t.klingt { grid-column:1; grid-row:3; }
  .mx-brain .t.aussieht { grid-column:2; grid-row:3; }
  .mx-brain .t.tut { grid-column:1 / span 2; grid-row:4; }
  .mx-brain .t.nerv { grid-column:1 / span 2; grid-row:5; }
  .mx-stage { grid-template-columns:1fr; gap:6px; }
  .mx-stage .num { font-size:56px; margin:0; }
  .mx-tab { font-size:10px; padding:9px 11px; }
}
.mx-sand { background:var(--sand); }
.mx-hero h1 { max-width:14ch; }

/* ----- Case Study variant without motion (Reactive) + case index ----- */
.cs-plain { padding:80px 0 20px; }
.cs-plain .cs-article { margin:0 auto; }
.cs-article h2 .accent { }
.cs-lead-sub {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:18px;
  line-height:1.55;
  letter-spacing:0.03em;
  color:var(--espresso);
  margin:0 0 22px;
  max-width:60ch;
}
.cs-honest-plain { background:var(--sand); }
.cs-honest-plain .cs-article { margin:0 auto; }
.cs-article blockquote + blockquote { margin-top:-8px; }
.cs-cool { padding-top:0; }
.cs-facts.two { grid-template-columns:1fr 1fr; margin-top:0; }
.cs-facts .stand {
  grid-column:1 / -1;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.cs-draft.inline { margin-left:4px; margin-right:4px; white-space:normal; }

/* Case index cards */
.ci-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:40px; }
.ci-card {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.18);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ci-card:hover { box-shadow:0 18px 40px -16px rgba(15,17,21,.32); transform:translateY(-3px); }
.ci-card .img { aspect-ratio:16/9; background:var(--sand); overflow:hidden; }
.ci-card .img img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.ci-card .body { padding:26px 28px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.ci-card .cat {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--violet);
}
.ci-card h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:17px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.35;
  margin:0;
  color:var(--espresso);
}
.ci-card .quote { font-style:italic; font-size:16px; line-height:1.6; color:var(--fg-2); margin:0; }
.ci-card .pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; }
.ci-card .pills span {
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:4px 8px;
  border:1px solid var(--border-2);
  border-radius:3px;
  color:var(--fg-2);
}
.ci-card .pills span.sit { border-color:var(--violet); color:var(--violet); }
.ci-card .meta {
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fg-3);
}
@media (max-width: 900px) {
  .ci-grid { grid-template-columns:1fr; }
  .cs-facts.two { grid-template-columns:1fr; }
}
.cs-facts.two { margin-bottom:64px; }
.cs-facts .stand { margin-top:4px; }

/* ----- Device trio (CSS frames around real screenshots) ----- */
.cs-devices { margin:40px 0 8px; }
.cs-devices-stage {
  position:relative;
  width:100%;
  aspect-ratio:16 / 10.6;
}
.dev { position:absolute; }
.dev img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.dev-laptop { left:8%; top:0; width:84%; }
.dev-laptop .screen {
  background:#0f1115;
  border-radius:10px 10px 4px 4px;
  padding:2.2% 2.2% 1.6%;
  box-shadow:0 24px 50px -20px rgba(15,17,21,.45);
}
.dev-laptop .screen img { aspect-ratio:16 / 10; border-radius:3px; }
.dev-laptop .base {
  height:14px;
  margin:0 -4%;
  background:linear-gradient(#3a3f47, #262a30);
  border-radius:0 0 10px 10px;
}
.dev-laptop .base::after {
  content:"";
  display:block;
  width:16%;
  height:5px;
  margin:0 auto;
  background:#4b515a;
  border-radius:0 0 6px 6px;
}
.dev-tablet { left:0; bottom:0; width:30%; }
.dev-tablet .screen {
  background:#0f1115;
  border-radius:14px;
  padding:4.5% 4.5%;
  box-shadow:0 24px 50px -18px rgba(15,17,21,.5);
}
.dev-tablet .screen img { aspect-ratio:3 / 4; border-radius:5px; }
.dev-phone { right:2%; bottom:0; width:15%; }
.dev-phone .screen {
  position:relative;
  background:#0f1115;
  border-radius:20px;
  padding:6% 5% 6%;
  box-shadow:0 24px 50px -18px rgba(15,17,21,.5);
}
.dev-phone .screen::before {
  content:"";
  position:absolute;
  top:2.5%; left:50%;
  transform:translateX(-50%);
  width:32%;
  height:4%;
  background:#0f1115;
  border-radius:6px;
  z-index:2;
}
.dev-phone .screen img { aspect-ratio:1 / 2; border-radius:12px; }
.cs-devices .cap-meta { margin-top:22px; }
@media (max-width: 720px) {
  .cs-devices-stage { aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .dev { position:static; width:auto; }
  .dev-laptop { grid-column:1 / -1; }
  .dev-phone { width:60%; justify-self:center; }
}
.cs-devices .cap-meta {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--violet);
  margin:22px 0 4px;
}
.cs-article .cs-devices .caption,
.cs-devices .caption {
  font-family:var(--font-sans);
  font-weight:300;
  font-size:14px;
  line-height:1.55;
  letter-spacing:0.02em;
  color:var(--fg-2);
  margin:0;
}
.cs-toc li { padding-left:44px; }

/* ============================================================
   Pillar article (GEO Optimierung)
   ============================================================ */
.pl-hero { padding:60px 0 10px; }
.pl-crumb {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin:0 0 26px;
}
.pl-crumb a { color:var(--violet); text-decoration:none; }
.pl-crumb .sep { margin:0 10px; }
.pl-h1 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1.15;
  margin:0 0 22px;
  color:var(--espresso);
  max-width:24ch;
}
.pl-h1 .accent {
  font-family:var(--font-script);
  font-weight:400;
  font-size:1.4em;
  letter-spacing:0;
  text-transform:none;
  line-height:0.95;
  color:var(--violet);
  display:inline-block;
  transform:translateY(0.1em);
}
.cs-article p.pl-lead {
  font-size:19px;
  line-height:1.65;
  color:var(--espresso);
  margin:0 0 22px;
}
.cs-article p.pl-lead strong { color:var(--espresso); font-weight:400; }
.cs-tldr ul.pl-check { margin:0 0 6px; }
.cs-tldr ul.pl-check li { font-size:16px; line-height:1.6; }
.cs-tldr ul.pl-check li::before { content:"✓"; color:var(--violet); font-weight:400; }

.pl-article h3 { margin-top:40px; }
.pl-article h4 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:30px 0 10px;
}
.pl-article sup.fn { font-size:0.6em; line-height:0; margin-left:1px; }
.pl-article sup.fn a { color:var(--violet); text-decoration:none; font-family:var(--font-mono); }
.pl-article ol.cs-num { padding-left:0; list-style:none; counter-reset:pln; margin:0 0 26px; }
.pl-article ol.cs-num li { counter-increment:pln; position:relative; padding:6px 0 6px 40px; font-size:17px; line-height:1.7; color:var(--fg-2); }
.pl-article ol.cs-num li::before {
  content:counter(pln, decimal-leading-zero);
  position:absolute; left:0; top:8px;
  font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.1em; color:var(--violet);
}
.pl-article .pl-links {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.12em;
  margin:6px 0 30px;
}
.pl-article .pl-links a { color:var(--violet); text-decoration:none; border-bottom:1px solid var(--violet); }
.pl-article .pl-links a::before { content:"→ "; }
.pl-article .cs-table-wrap table.cs-table td:first-child { font-family:var(--font-sans); font-weight:400; font-size:15px; letter-spacing:0; }
.pl-article .cs-table-wrap table.cs-table td { font-size:14.5px; }

.pl-widget { margin:44px 0; }
.pl-widget .quiz { max-width:none; margin:0; }
.pl-widget .quiz [data-quiz-state="result"] { margin:-56px -60px; }
@media (max-width: 900px) { .pl-widget .quiz [data-quiz-state="result"] { margin:-42px -28px; } }

.pl-faq details { border-top:1px solid var(--border-2); padding:20px 0; }
.pl-faq details:last-child { border-bottom:1px solid var(--border-2); }
.pl-faq details summary { font-size:14px; }
.pl-faq details .answer { font-size:16px; }

.pl-author {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:28px;
  align-items:start;
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:32px 34px;
  margin:56px 0 10px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.14);
}
.pl-author .pl-author-img img { width:100%; height:auto; border-radius:4px; display:block; }
.pl-author .k {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 10px;
}
.pl-author h3 { margin:0 0 12px; font-size:14px; letter-spacing:0.12em; line-height:1.5; }
.pl-author p { font-size:15px; line-height:1.65; color:var(--fg-2); margin:0 0 10px; }
.pl-author .pl-links { margin:8px 0 0; }

.pl-sources { padding-left:0; list-style:none; counter-reset:src; margin:0; }
.pl-sources li { counter-increment:src; position:relative; padding:8px 0 8px 40px; font-size:14px; line-height:1.6; color:var(--fg-2); border-top:1px solid var(--border-1); scroll-margin-top:110px; }
.pl-sources li::before { content:counter(src); position:absolute; left:0; top:9px; font-family:var(--font-mono); font-weight:500; font-size:12px; color:var(--violet); }
.pl-sources li a { color:var(--violet); text-decoration:none; border-bottom:1px solid var(--border-2); }
.pl-sources li em { color:var(--fg-3); font-size:13px; }

.pl-shots { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:32px 0 8px; }
.pl-shots .cs-figure { margin:0; }
@media (max-width: 720px) { .pl-shots { grid-template-columns:1fr; } .pl-author { grid-template-columns:1fr; } .pl-author .pl-author-img { max-width:160px; } }
.pl-article table.cs-table.wide { font-size:12.5px; line-height:1.45; }
.pl-article table.cs-table.wide th { white-space:normal; font-size:10px; padding:12px 10px; }
.pl-article table.cs-table.wide td { padding:12px 10px; font-size:12.5px; }
.pl-article table.cs-table.wide td:first-child { font-size:13px; }

/* ============================================================
   Webdesign offer page (La Maison Web)
   ============================================================ */
.wd-hero .page-hero-grid { grid-template-columns:1.05fr 1fr; align-items:center; gap:56px; }
.wd-hero h1 { max-width:16ch; }
.wd-trust {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin:22px 0 0;
  line-height:1.9;
}
.wd-trust span { white-space:nowrap; }
.wd-trust .dot { color:var(--violet); margin:0 10px; }
.wd-hero .cs-devices { margin:0; }
.wd-hero .cs-devices .cap-meta { margin-top:18px; }
.wd-hero .cs-devices .caption { font-size:13px; }

.wd-three { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:44px 0 0; }
.wd-three .build-card { transform:none; padding:32px 28px; }
.wd-three .build-card:hover { transform:translateY(-3px); }
.wd-three .build-card .eb { color:var(--violet); }
.wd-three .build-card p { font-size:16px; }

.wd-prose { max-width:760px; }
.wd-prose p { color:var(--fg-2); margin:0 0 18px; font-size:17px; line-height:1.72; }
.wd-prose p strong { font-weight:400; color:var(--espresso); }
.wd-prose ul.dash { list-style:none; padding:0; margin:0 0 24px; }
.wd-prose ul.dash li { position:relative; padding:5px 0 5px 26px; font-size:17px; line-height:1.7; color:var(--fg-2); }
.wd-prose ul.dash li::before { content:"-"; position:absolute; left:0; color:var(--violet); }
.wd-prose ul.dash li strong { font-weight:400; color:var(--espresso); }
.wd-prose .section-h2 { max-width:none; }
.wd-prose h3 {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--espresso);
  margin:38px 0 14px;
  line-height:1.4;
}
.wd-prose a { color:var(--violet); text-decoration:underline; text-underline-offset:4px; }
.wd-sand { background:var(--sand); }

.wd-proof { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:30px 0 0; }
.wd-proof .cs-draft-slot { margin:0; }
.wd-proof-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0 0; }
.wd-case {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:28px 30px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.14);
  display:flex; flex-direction:column; gap:10px;
}
.wd-case .k { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--violet); margin:0; }
.wd-case h3 { font-family:var(--font-mono); font-weight:500; font-size:16px; letter-spacing:0.1em; text-transform:uppercase; line-height:1.4; margin:0; color:var(--espresso); }
.wd-case p { font-size:15.5px; line-height:1.65; color:var(--fg-2); margin:0; }
.wd-case a.more { margin-top:auto; padding-top:8px; font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--violet); text-decoration:none; }

.wd-who { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; margin-top:40px; }
.wd-who h3 { font-family:var(--font-mono); font-weight:500; font-size:15px; letter-spacing:0.2em; text-transform:uppercase; margin:0 0 14px; color:var(--espresso); }
.wd-who p { font-size:16px; line-height:1.7; color:var(--fg-2); margin:0; }
.wd-who p em { color:var(--fg-3); }

.wd-price table.cs-table td:first-child { font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.08em; color:var(--espresso); white-space:nowrap; }
.wd-price table.cs-table td.price { font-family:var(--font-mono); font-weight:500; font-size:15px; color:var(--violet); white-space:nowrap; text-align:right; }
.wd-price table.cs-table th.price { text-align:right; }
.wd-price table.cs-table.modules td:first-child { font-family:var(--font-sans); font-weight:300; font-size:15px; letter-spacing:0; white-space:normal; color:var(--fg-2); }
.wd-price .wd-cta { margin-top:34px; }

.wd-steps { display:flex; flex-direction:column; gap:30px; margin:44px 0 0; }
.wd-step { display:grid; grid-template-columns:90px minmax(0,1fr); gap:20px; align-items:start; }
.wd-step .num { font-family:var(--font-script); font-weight:400; font-size:72px; line-height:0.9; color:var(--mint); -webkit-text-stroke:1px var(--violet); margin-top:-6px; }
.wd-step h3 { font-family:var(--font-mono); font-weight:500; font-size:16px; letter-spacing:0.18em; text-transform:uppercase; color:var(--espresso); margin:0 0 10px; }
.wd-step p { font-size:17px; line-height:1.7; color:var(--fg-2); margin:0; max-width:64ch; }
.wd-tech { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:26px 0 0; }
.wd-tech .cs-card h4 { font-size:14px; }
.wd-tech .cs-card p { font-size:15px; }

.wd-about-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:center; }
.wd-about-grid .polaroid { max-width:380px; transform:rotate(2deg); margin-left:auto; }
.wd-about-grid .polaroid .tape { top:-14px; right:24px; transform:rotate(8deg); }

.wd-signoff { font-style:italic; color:rgba(240,238,230,.85); margin-top:26px; }

@media (max-width: 1024px) {
  .wd-three, .wd-who, .wd-tech { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .wd-hero .page-hero-grid { grid-template-columns:1fr; gap:36px; }
  .wd-proof, .wd-proof-cards, .wd-about-grid { grid-template-columns:1fr; }
  .wd-about-grid .polaroid { margin-left:0; transform:none; }
  .wd-step { grid-template-columns:60px minmax(0,1fr); gap:14px; }
  .wd-step .num { font-size:54px; }
}
.wd-trust { display:flex; flex-wrap:wrap; gap:6px 0; max-width:60ch; }
.wd-trust span { white-space:normal; }
.wd-prose a.btn, .wd-prose a.btn:hover { color:#fff; text-decoration:none; }
.wd-trust { display:block; max-width:64ch; margin-top:28px; line-height:2; }
.wd-trust span { display:inline; }
.cs-article a.btn, .cs-article a.btn:hover { color:#fff; text-decoration:none; }
.cs-article a.btn-ghost { color:var(--violet); }
.cs-article a.btn-ghost:hover { color:#fff; }

/* ----- Methodikseite: drei Wege zum Markenbrain ----- */
.mx-ways { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin:36px 0 0; }
.mx-way {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  padding:32px 30px 28px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.18);
  display:flex;
  flex-direction:column;
}
.mx-way .eb { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--violet); margin:0 0 12px; }
.mx-way h3 { font-family:var(--font-mono); font-weight:500; font-size:16px; letter-spacing:0.16em; text-transform:uppercase; line-height:1.35; color:var(--espresso); margin:0 0 14px; }
.mx-way p { font-size:16px; line-height:1.7; color:var(--fg-2); margin:0 0 18px; }
.mx-way a { margin-top:auto; font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--espresso); text-decoration:underline; text-underline-offset:5px; }
.mx-way a:hover { color:var(--violet); }
@media (max-width: 900px) { .mx-ways { grid-template-columns:1fr; } }

/* ----- GEO für Coaches (Angebotsseite) ----- */
.gc-shots-section { padding:20px 0 70px; }
.gc-shots { display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; align-items:start; }
.gc-shots .polaroid { margin:0; }
.gc-shots .polaroid:nth-child(1) { transform:rotate(-1.4deg); }
.gc-shots .polaroid:nth-child(2) { transform:rotate(0.8deg); }
.gc-shots .polaroid:nth-child(3) { transform:rotate(-0.6deg); }
.gc-shots button.frame { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.gc-shots .frame img.photo { width:100%; height:auto; display:block; }
.gc-parts { display:grid; grid-template-columns:1fr; gap:24px; max-width:1040px; margin:0 auto; }
.gc-part {
  background:#fff;
  border:1px solid var(--border-1);
  border-radius:6px;
  box-shadow:0 6px 18px -8px rgba(15,17,21,.18);
  display:grid;
  grid-template-columns:260px 1fr;
  overflow:hidden;
}
.gc-part.no-img { grid-template-columns:1fr; }
.gc-part-img { background:var(--sand); min-height:100%; }
.gc-part-img img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.gc-part-body { padding:34px 38px 32px; display:flex; flex-direction:column; align-items:flex-start; }
.gc-part .eb { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--violet); margin:0 0 10px; }
.gc-part .h { font-family:var(--font-mono); font-weight:500; font-size:16px; letter-spacing:0.14em; text-transform:uppercase; line-height:1.35; color:var(--espresso); margin:0 0 16px; }
.gc-part .h + .h, .gc-part p + .h { margin-top:14px; }
.gc-part p { font-size:16px; line-height:1.7; color:var(--fg-2); margin:0 0 14px; }
.gc-part p strong { font-weight:400; color:var(--espresso); }
.gc-part p a { color:var(--violet); text-decoration:underline; text-underline-offset:4px; }
.gc-part .btn { margin-top:10px; padding:12px 18px; font-size:13px; }
.gc-price-section { padding:20px 0 90px; }
.gc-price { max-width:620px; margin:0 auto; background:var(--espresso); color:var(--cream); border-radius:6px; padding:48px 44px; text-align:center; }
.gc-price .eb { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--mint); margin:0 0 18px; }
.gc-price-num { font-family:var(--font-mono); font-weight:500; font-size:44px; letter-spacing:0.04em; margin:0 0 12px; color:#fff; }
.gc-price-num span { font-size:14px; letter-spacing:0.1em; color:rgba(240,238,230,.6); }
.gc-price p { font-size:16px; line-height:1.7; color:rgba(240,238,230,.82); margin:0 0 14px; }
.gc-price .gc-price-note { margin-bottom:24px; }
.gc-price .btn { margin-top:6px; }
@media (max-width: 900px) { .gc-shots, .gc-part { grid-template-columns:1fr; } .gc-part-img { aspect-ratio:3/2; } .gc-part-body { padding:28px 24px; } .gc-price { padding:36px 24px; } .gc-price-num { font-size:36px; } }

/* ----- Blog-Übersicht ----- */
.bl-hashtag { font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--violet); margin:8px 0 0; }
.bl-start { padding:70px 0; }
.bl-start-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.bl-start-grid p { font-size:17px; line-height:1.7; color:var(--fg-2); margin:0 0 22px; }
.bl-path { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bl-path li { background:#fff; border:1px solid var(--border-1); border-radius:6px; padding:14px 18px; display:flex; flex-direction:column; gap:4px; }
.bl-path .k { font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--violet); }
.bl-path a { color:var(--espresso); text-decoration:none; font-size:15px; line-height:1.5; }
.bl-path a:hover { color:var(--violet); text-decoration:underline; text-underline-offset:4px; }
.bl-list { padding:80px 0 90px; }
.bl-filter { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; }
.bl-chip { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; padding:9px 14px; border:1px solid var(--border-2); border-radius:999px; background:transparent; color:var(--fg-2); cursor:pointer; transition:all var(--dur-base) var(--ease-out); }
.bl-chip:hover { border-color:var(--espresso); color:var(--espresso); }
.bl-chip.is-active { background:var(--espresso); border-color:var(--espresso); color:var(--cream); }
.bl-chip:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.bl-card .cat .cs-draft { margin-left:6px; }
.bl-card .meta { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-3); }
.bl-empty { font-style:italic; color:var(--fg-3); margin:30px 0 0; }
body[data-page="blog"] .cs-draft { display:inline-block; }
@media (max-width: 900px) { .bl-start-grid { grid-template-columns:1fr; gap:28px; } }

.cred p a { color:var(--violet); text-decoration:underline; text-underline-offset:4px; }

/* ----- Lange Vollseiten-Screenshots: nur der obere Teil, Rest per Lightbox ----- */
.cs-figure.tall .frame { max-height:640px; overflow:hidden; position:relative; }
.cs-figure.tall .frame::after { content:""; position:absolute; left:0; right:0; bottom:0; height:140px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events:none; }
.cs-figure.tall .cs-zoom::before { content:"Vollansicht öffnen"; position:absolute; right:22px; bottom:26px; z-index:2; font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--espresso); background:rgba(255,255,255,.92); border:1px solid var(--border-2); border-radius:999px; padding:7px 12px; }
.cs-figure.tall .cs-zoom { position:relative; display:block; width:100%; }

/* ----- Vorher/Nachher: Schieberegler und Seitenpaare ----- */
.cs-compare { margin:36px 0 44px; }
.cs-compare-stage { --pos:50%; position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:6px; background:var(--sand); box-shadow:0 18px 40px -16px rgba(15,17,21,.32); }
.cs-compare-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.cs-compare-stage .before-wrap { position:absolute; inset:0; width:var(--pos); overflow:hidden; }
.cs-compare-stage .before-wrap img { width:auto; height:100%; max-width:none; aspect-ratio:16/10; }
.cs-compare-stage .handle { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(15,17,21,.25); pointer-events:none; }
.cs-compare-stage .handle span { position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; background:var(--violet); box-shadow:0 6px 18px -6px rgba(15,17,21,.5); }
.cs-compare-stage .handle span::before, .cs-compare-stage .handle span::after { content:""; position:absolute; top:50%; width:0; height:0; border:6px solid transparent; transform:translateY(-50%); }
.cs-compare-stage .handle span::before { left:8px; border-right-color:#fff; }
.cs-compare-stage .handle span::after { right:8px; border-left-color:#fff; }
.cs-compare-stage input[type=range] { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }
.cs-compare-stage input[type=range]:focus-visible + * , .cs-compare-stage:focus-within { outline:2px solid var(--violet); outline-offset:3px; }
.cs-badge { position:absolute; top:14px; z-index:3; font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; padding:6px 10px; border-radius:3px; pointer-events:none; }
.cs-badge.was { left:14px; background:rgba(15,17,21,.78); color:var(--cream); }
.cs-badge.now { right:14px; background:var(--violet); color:#fff; }
.cs-ba { margin:0 0 34px; }
.cs-ba-title { font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--fg-3); margin:0 0 12px; }
.cs-ba .cs-ba-grid { margin:0; }
.cs-ba .cs-figure { position:relative; }
.cs-ba .cs-badge { top:22px; }
.cs-ba .cs-badge.was { left:22px; } .cs-ba .cs-badge.now { right:22px; }
@media (max-width: 720px) { .cs-ba-grid { grid-template-columns:1fr; } }

/* ----- Case Study: aufklappbare Detailblöcke (Nerd-Ebene) ----- */
.cs-deep { border:1px solid var(--border-1); border-radius:6px; background:#fff; margin:0 0 12px; box-shadow:0 6px 18px -12px rgba(15,17,21,.18); }
.cs-deep > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:44px 1fr 28px; grid-template-areas:"n t c" "n s c"; column-gap:14px; row-gap:4px; align-items:center; padding:20px 22px; }
.cs-deep > summary::-webkit-details-marker { display:none; }
.cs-deep > summary .n { grid-area:n; font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.2em; color:var(--violet); }
.cs-deep > summary .t { grid-area:t; font-family:var(--font-mono); font-weight:500; font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--espresso); line-height:1.4; }
.cs-deep > summary { display:grid; font:inherit; letter-spacing:0; text-transform:none; }
.cs-deep > summary .s { grid-area:s; font-family:var(--font-sans); font-weight:300; font-size:15px; letter-spacing:0; text-transform:none; line-height:1.5; color:var(--fg-3); }
.cs-deep > summary::after { grid-area:c; content:"+"; justify-self:end; font-family:var(--font-mono); font-size:22px; color:var(--violet); line-height:1; }
.cs-deep[open] > summary::after { content:"×"; }
.cs-deep > summary:hover .t { color:var(--violet); }
.cs-deep > summary:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:6px; }
.cs-deep-body { padding:4px 22px 26px; border-top:1px solid var(--border-1); }
.cs-deep-body > :first-child { margin-top:22px; }
.cs-deep-body h3 { margin-top:34px; }
@media (max-width: 720px) { .cs-deep > summary { grid-template-columns:36px 1fr 22px; padding:16px 16px; } .cs-deep-body { padding:4px 16px 22px; } }