@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400&display=swap');

:root{
  --pf-inset-y:2.37%;
  --pf-inset-x:5.5%;
  --pf-radius:12.7% / 5.9%;

  --ink:#1b1714;
  --ink-90:rgba(27,23,20,.9);
  --ink-70:rgba(27,23,20,.7);
  --ink-55:rgba(27,23,20,.55);
  --ink-35:rgba(27,23,20,.35);
  --ink-14:rgba(27,23,20,.14);
  --ink-08:rgba(27,23,20,.08);

  --deep-ink:#241e19;
  --dark-ink:#120e0b;
  --deep-green:#4a3b31;

  --sage:#FF5B3A;
  --sage-hover:#D6431F;
  --sage-tint:#FFE3D9;
  --sage-light:#FF8F6B;

  --slate:#4a423a;
  --slate-light:#7a7268;

  --coral:#FF5B3A;
  --coral-tint:#FFE3D9;
  --coral-border:rgba(232,120,90,.4);

  --bg:#f5f2ec;
  --white:#ffffff;

  --body:'Inter',sans-serif;
  --display:'Gasoek One',sans-serif;

  --content-max:1040px;
  --content-pad:56px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:17.7px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
p{margin:0;}

/* ================= TOP NAVBAR ================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  box-shadow:0 2px 4px -2px rgba(74,59,49,.1), 0 4px 4px -2px rgba(74,59,49,.08);
}
.topbar-inner{
  max-width:1180px;
  margin:0 auto;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14.75px;
  color:var(--slate);
  transition:color .2s ease, transform .2s ease;
}
.topbar-left:hover{color:var(--ink);transform:translateX(-2px);}
.topbar-left:hover svg{transform:translateX(-2px);}
.topbar-left svg{width:13px;height:13px;transition:transform .2s ease;}
.topbar-center{
  font-weight:600;
  font-size:15.34px;
  color:var(--slate-light);
}
.topbar-lang{
  background:#fff;
  border:1px solid #e7e1d6;
  border-radius:100px;
  padding:4px 11px;
  font-size:12.98px;
  color:var(--deep-green);
  transition:background .2s ease, transform .2s ease;
}
.topbar-lang:hover{background:var(--sage-tint);transform:translateY(-1px);}

/* ================= PAGE FRAME ================= */
.page-wrap{
  margin:0 auto;
  display:flex;
  align-items:flex-start;
}

.sidebar{
  position:sticky;
  top:46px;
  height:calc(100vh - 46px);
  width:188px;
  flex:0 0 188px;
  padding:26px 24px 20px 24px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--ink-08);
  overflow:hidden;
}
.nav{flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden;}
.nav a{
  display:block;
  padding:2.5px 0;
  font-size:13px;
  font-weight:500;
  color:var(--ink-70);
  transition:color .2s ease, transform .2s ease;
}
.nav a:hover{transform:translateX(2px);}
.nav a.active{font-weight:700;color:var(--ink);}
.nav a:hover{color:var(--ink);}
.nav .chapter{
  display:flex;
  gap:6px;
  align-items:baseline;
  margin-top:8px;
  font-weight:600;
  font-size:13px;
  color:var(--ink-70);
  transition:color .25s ease;
}
.nav .chapter .num{font-size:11.8px;color:var(--ink-35);font-weight:600;transition:color .25s ease;}
.nav .sub{padding-left:16px;font-size:12.3px;font-weight:400;color:var(--ink-55);}
.nav-figma{
  flex:0 0 auto;
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  transition:transform .2s ease;
}
.nav-figma:hover{transform:translateX(2px);}
.nav-figma .dot{width:6px;height:6px;border-radius:50%;background:var(--sage-hover);}
.nav-figma a{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:600;
  font-size:13px;
  color:var(--deep-green);
  padding:0;
}
.nav-figma svg{width:11px;height:11px;transition:transform .2s ease;}
.nav-figma:hover svg{transform:translate(2px,-2px);}
.sidebar-footer{
  flex:0 0 auto;
  border-top:1px solid var(--ink-08);
  margin-top:12px;
  padding-top:12px;
  font-size:11px;
  color:var(--ink-35);
}

main{flex:1;min-width:0;padding:0 0 96px;overflow-x:hidden;}
.content-col{max-width:var(--content-max);margin:0 auto;padding:0 var(--content-pad);}
.first-screen{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:calc(100vh - 47px);
}
.full-bleed{width:100%;}

@media (max-width:860px){
  .content-col{padding:0 18px;}
}

/* ================= HERO ================= */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  text-align:center;
}
.hero-top{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.kategorie{
  background:var(--sage-tint);
  color:var(--sage-hover);
  font-size:14.75px;
  padding:5px 13px;
  border-radius:100px;
  transition:transform .3s ease, box-shadow .3s ease;
  animation:heroFadeUp .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.05s;
}
.kategorie:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(232,120,90,.18);}

@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-title{animation:heroFadeUp .8s cubic-bezier(.22,.61,.36,1) both;animation-delay:.15s;}
.hero-desc{animation:heroFadeUp .8s cubic-bezier(.22,.61,.36,1) both;animation-delay:.28s;}
.hero-meta{animation:heroFadeUp .8s cubic-bezier(.22,.61,.36,1) both;animation-delay:.4s;}
@media (prefers-reduced-motion: reduce){
  .kategorie, .hero-title, .hero-desc, .hero-meta{animation:none;}
}

/* ================= SCROLL REVEAL ================= */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .marquee-row{animation:none !important;}
  .ergebnis-list .li{opacity:1;transform:none;transition:none;}
  .dot-row span.highlight{animation:none;}
}
.hero-heading{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,18px);width:100%;}
.hero-title{
  font-family:var(--display);
  font-weight:400;
  font-synthesis:none;
  font-size:clamp(48px, min(8vw, 12vh), 112px);
  line-height:1;
  margin:0;
}
.hero-title .same{color:var(--coral);}
.hero-title .spot{color:#1b1714;}
.hero-sub-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.5vh,12px);width:100%;}
.hero-desc{
  font-size:15px;
  color:#241e19;
  max-width:820px;
  line-height:1.5;
}
.hero-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;}
.hero-meta .item{display:flex;gap:6px;align-items:center;font-size:13.57px;color:var(--slate);}
.hero-meta svg{width:14px;height:14px;color:var(--slate);}

/* ================= SCREENS MARQUEE (full-bleed) ================= */
.screens-inner-head{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--content-pad);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:12px;
}
.screens-inner-head .hint{font-size:12.39px;color:var(--ink-35);}
.ia-head .hint{font-size:12px;color:var(--ink-35);font-weight:400;}

.marquee-wrap{
  overflow:hidden;
  width:100%;
  padding:10px 0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.marquee-wrap + .marquee-wrap{margin-top:32px;}

.marquee-row{
  display:flex;
  gap:18px;
  width:max-content;
}
.marquee-row.dir-left{animation:marqueeLeft 35s linear infinite;}
.marquee-row.dir-right{animation:marqueeRight 35s linear infinite;transform:translateX(-50%);}
.marquee-wrap:hover .marquee-row{animation-play-state:running;}
.marquee-row{animation-play-state:running !important;}

@keyframes marqueeLeft{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes marqueeRight{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

.phone-card{display:flex;flex-direction:column;align-items:center;gap:14px;width:180px;flex:0 0 auto;}
.phone-frame{
  width:100%;
  aspect-ratio:337/681;
  position:relative;
  transition:transform .35s ease, filter .35s ease;
}
.phone-screen{
  position:absolute;inset:var(--pf-inset-y) var(--pf-inset-x);
  overflow:hidden;border-radius:var(--pf-radius);
  background:var(--sage-tint);
}
.phone-screen img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
.phone-real-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.phone-card:hover .phone-frame{
  transform:translateY(-4px);
  filter:drop-shadow(0 12px 26px rgba(74,59,49,.14));
}
.phone-name{font-size:13.5px;font-weight:600;color:var(--ink-55);text-align:center;margin-top:2px;}

/* ================= SECTION SPACING ================= */
.section{margin-top:200px;}
.chapter-divider{
  height:1px;
  background:var(--ink-14);
  margin:100px 0;
}
.chapter-divider + .section{margin-top:0;}
.sub-gap{margin-top:200px;}
#vier-zahlen{margin-top:clamp(16px,3vh,32px);}
.eyebrow{
  font-size:12.39px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sage);
}
h2{font-family:var(--body);font-weight:800;font-size:25.96px;letter-spacing:-.01em;margin:0;line-height:1.2;}
h3{font-family:var(--body);font-weight:800;font-size:19.47px;letter-spacing:-.005em;margin:0;}
.accent-italic{font-style:italic;font-weight:600;}

/* ================= VIER ZAHLEN ================= */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:clamp(10px,2vh,18px);
}
.stat-card{
  padding:0 14px;
  border-left:1px solid var(--ink-14);
  opacity:0;
  transform:translateY(14px);
  transition:transform .3s ease, opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view .stat-card{opacity:1;transform:translateY(0);}
.reveal.in-view .stat-card:hover{transform:translateY(-3px);}
.stat-card:hover{transform:translateY(-3px);}
.stat-row .stat-card:nth-child(1){transition-delay:.05s;}
.stat-row .stat-card:nth-child(2){transition-delay:.15s;}
.stat-row .stat-card:nth-child(3){transition-delay:.25s;}
.stat-row .stat-card:nth-child(4){transition-delay:.35s;}
.stat-card:first-child{padding-left:0;border-left:none;}
@media (prefers-reduced-motion: reduce){
  .stat-card{opacity:1;transform:none;transition:none;}
}
.pill-badge{
  display:inline-block;font-size:9.44px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-55);border:1px solid var(--ink-14);border-radius:20px;padding:3px 8px;margin-bottom:8px;
}
.big-num{font-weight:800;letter-spacing:-.015em;font-size:30.68px;line-height:1;color:var(--ink);}
.big-num.sage{color:var(--sage);}
.big-num.outline{color:transparent;-webkit-text-stroke:1px var(--ink-35);}
.stat-label{font-weight:700;font-size:13.57px;margin-top:8px;}
.stat-desc{font-size:12.98px;color:var(--ink-55);margin-top:6px;line-height:1.5;}
.flag{color:var(--coral);background:var(--coral-tint);border:1px solid var(--coral-border);border-radius:4px;padding:0px 5px;font-size:.86em;font-weight:600;}

/* ================= ERGEBNIS (dark, full-bleed) ================= */
.ergebnis-wrap{
  width:100%;
  background:var(--deep-ink);
  text-align:center;
  color:#f7f3ec;
}
.ergebnis-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:52px var(--content-pad) 48px;
}
.ergebnis-wrap h2{color:#f7f3ec;font-size:25.96px;}
.ergebnis-wrap .accent-italic{color:var(--sage-light);font-style:italic;}
.ergebnis-desc{font-size:15.93px;color:rgba(247,243,236,.7);max-width:460px;margin:10px auto 0;line-height:1.55;}
.ergebnis-list{
  display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap;
}
.ergebnis-list .li{
  display:flex;align-items:center;gap:8px;font-size:14.16px;color:rgba(247,243,236,.7);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view .ergebnis-list .li{opacity:1;transform:translateY(0);}
.ergebnis-list .li:nth-child(1){transition-delay:.1s;}
.ergebnis-list .li:nth-child(2){transition-delay:.22s;}
.ergebnis-list .li:nth-child(3){transition-delay:.34s;}
.ergebnis-list .dot{width:5px;height:5px;background:var(--sage);flex:0 0 auto;}
.btn-outline-dark{
  display:inline-block;margin-top:16px;border:1px solid rgba(247,243,236,.35);color:#f7f3ec;
  border-radius:999px;padding:8px 17px;font-size:14.16px;font-weight:600;
  transition:background .25s ease, transform .25s ease;
}
.btn-outline-dark:hover{background:rgba(247,243,236,.1);transform:translateY(-2px);}
.ergebnis-phones{
  display:flex;gap:28px;justify-content:center;margin-top:36px;flex-wrap:wrap;
}
.ergebnis-phone-col{display:flex;flex-direction:column;align-items:center;gap:12px;}
.ergebnis-phone{
  position:relative;
  width:216px;
  aspect-ratio:1469/2205;
  filter:drop-shadow(0 16px 34px rgba(74,59,49,.32));
  transition:transform .35s ease;
}
.ergebnis-video{
  position:absolute;
  left:25.66%;
  top:20%;
  width:43.64%;
  height:60.45%;
  object-fit:cover;
  border-radius:8px;
}
.ergebnis-frame-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
.ergebnis-phone-col:hover .ergebnis-phone{transform:translateY(-6px);}
.ergebnis-phone-col .label{font-weight:700;font-size:15.34px;color:var(--sage-light);margin-top:2px;}

@media (max-width:860px){
  .ergebnis-inner{padding:40px 18px 36px;}
}

/* ================= WIDERSPRUCH ================= */
.chapter-head{display:flex;gap:12px;align-items:baseline;}
.chapter-num{font-weight:800;font-size:27.14px;color:var(--ink-14);line-height:1;}
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-top:14px;align-items:start;}
.lede{font-size:15.93px;color:var(--ink-70);line-height:1.55;max-width:480px;}
#marktluecke .lede{max-width:760px;}
#optionen .lede{max-width:620px;}
.umfrage-caption{margin-top:14px;font-size:12.98px;color:var(--ink-55);}
.quote-card{
  background:rgba(236,231,221,.45);
  border-radius:12px;
  padding:16px 20px;
  display:flex;flex-direction:column;justify-content:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.quote-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(232,120,90,.14);}
.quote-card .q{font-style:italic;font-size:15.93px;color:var(--ink-90);line-height:1.5;}
.quote-card .who{margin-top:8px;font-size:12.98px;color:var(--ink-55);}

/* Persona card */
.persona-card{
  background:#fff;
  border:1px solid var(--ink-08);
  border-radius:14px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:16px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.persona-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(74,59,49,.08);}
.avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  background:var(--sage-tint);
}
.avatar img{display:block;width:100%;height:100%;object-fit:cover;}
.persona-name{font-weight:700;font-size:15.34px;color:var(--ink-90);}
.persona-role{font-style:italic;font-size:13.5px;color:var(--ink-55);margin-top:2px;}

/* Markt scatter chart */
.scatter-wrap{
  margin-top:28px;
  border:1px solid var(--ink-08);
  border-radius:14px;
  padding:22px 24px 18px;
}
.scatter-notes{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0 20px;
  margin-top:28px;
  padding-top:24px;
}
.scatter-note{font-size:13px;color:var(--ink-55);line-height:1.55;}

/* Optionen: concept comparison cards */
.concept-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:32px;
  align-items:stretch;
}
.concept-card{
  border-radius:14px;
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.concept-card.discard{
  background:#fff;
  border:1px solid var(--ink-08);
}
.concept-card.chosen{
  background:var(--ink);
  color:#fff;
}
.concept-card:hover{transform:translateY(-3px);}
.concept-card.discard:hover{box-shadow:0 12px 28px rgba(74,59,49,.08);}
.concept-card.chosen:hover{box-shadow:0 12px 28px rgba(74,59,49,.28);}
.concept-tag{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-35);
}
.concept-card.chosen .concept-tag{color:var(--sage-light);}
.concept-card h4{
  font-family:var(--body);
  font-weight:700;
  font-size:16px;
  margin:0;
  color:var(--ink-90);
}
.concept-card.chosen h4{color:#fff;}
.concept-card p{font-size:13px;color:var(--ink-55);line-height:1.5;}
.concept-card.chosen p{color:rgba(255,255,255,.7);}
.concept-scores{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:11px;
  font-weight:600;
  color:var(--ink-35);
}
.concept-card.chosen .concept-scores{color:rgba(255,255,255,.4);}
.concept-why{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--ink-08);
  font-size:12.5px;
  color:var(--ink-55);
}
.concept-card.chosen .concept-why{
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.7);
}
.concept-why b{color:var(--ink-90);font-weight:600;}
.concept-card.chosen .concept-why b{color:#fff;}

@media (max-width:1180px){
  .concept-grid{grid-template-columns:1fr;}
}

/* Spaltenbreite statt Fensterbreite: siehe Container-Regeln am Dateiende */
@supports (container-type:inline-size){
  @media (max-width:1180px){
    .concept-grid{grid-template-columns:repeat(3,1fr);}
  }
}

/* ============ Mechanik: loop rail ============ */
.loop-rail{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 40px;
  margin-top:44px;
}
.loop-node{position:relative;}
.loop-marker{
  display:flex;align-items:center;
  height:34px;margin-bottom:20px;
}
.loop-dot{
  flex:none;
  width:34px;height:34px;border-radius:100px;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--ink-14);
  color:var(--ink-55);
  background:transparent;
  transition:border-color .3s var(--ease-ios), color .3s var(--ease-ios);
}
.loop-marker::after{
  content:"";flex:1;height:1px;
  background:var(--ink-14);
  margin-left:14px;margin-right:-40px;
}
.loop-node:last-child .loop-marker::after{
  margin-right:0;
  background:linear-gradient(to right,var(--ink-14),transparent);
}
.loop-node.is-goal .loop-dot{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
.loop-node h4{
  font-family:var(--body);font-weight:700;font-size:18px;
  line-height:1.3;color:var(--ink-90);margin-bottom:10px;
  padding-right:20px;
}
.loop-node p{
  font-size:14px;line-height:1.6;color:var(--ink-55);
  padding-right:20px;
}
.loop-node:hover .loop-dot{border-color:var(--ink-35);color:var(--ink-90);}
.loop-node.is-goal:hover .loop-dot{border-color:var(--ink);color:#fff;}
.loop-caption{
  margin-top:30px;font-size:14px;line-height:1.6;
  color:var(--ink-55);max-width:640px;
  padding-top:20px;border-top:1px solid var(--hairline);
}
@media (max-width:1000px){
  .loop-rail{grid-template-columns:1fr;gap:30px;}
  .loop-marker{margin-bottom:14px;}
  .loop-marker::after{margin-right:0;}
}
@supports (container-type:inline-size){
  @media (max-width:1000px){
    .loop-rail{grid-template-columns:repeat(3,1fr);gap:0 40px;}
    .loop-marker{margin-bottom:20px;}
    .loop-marker::after{margin-right:-40px;}
    .loop-node:last-child .loop-marker::after{margin-right:0;}
  }
}

.loop-pills{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:32px;
  flex-wrap:wrap;
}
.loop-pill{
  font-size:13px;
  font-weight:600;
  border-radius:20px;
  padding:8px 18px;
}
.loop-pill.outline{border:1px solid var(--ink-14);color:var(--ink-35);}
.loop-pill.filled{background:var(--sage-hover);color:#fff;}
.loop-dash{color:var(--ink-14);}

/* ============ Informationsarchitektur ============ */
.ia-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.ia-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:20px;
}
.ia-card{
  background:#fff;
  border:1px solid var(--ink-08);
  border-radius:12px;
  padding:18px 18px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.ia-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(74,59,49,.08);}
.ia-dot-title{
  font-weight:700;
  font-size:14px;
  color:var(--ink-90);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.ia-dot-title::before{content:'';width:6px;height:6px;background:var(--sage);border-radius:50%;}
.ia-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.ia-card li{font-size:12.5px;color:var(--ink-55);}
.ia-caption{margin-top:18px;font-size:13px;color:var(--ink-55);line-height:1.55;max-width:680px;}

/* ============ Mockup triplet (Sketches / Wireframes / Mid-Fi) ============ */
.mockup-triplet{
  display:flex;
  justify-content:center;
  gap:56px;
  margin-top:36px;
  flex-wrap:wrap;
}
.mockup-col{display:flex;flex-direction:column;align-items:center;gap:14px;}
.mockup-title{font-weight:700;font-size:14px;color:var(--ink-90);}
.mockup-phone{
  width:216px;
  aspect-ratio:337/681;
  position:relative;
  transition:transform .3s ease, filter .3s ease;
}
.mockup-screen{
  position:absolute;inset:var(--pf-inset-y) var(--pf-inset-x);
  overflow:hidden;border-radius:var(--pf-radius);
}
.mockup-screen img{display:block;width:100%;height:100%;object-fit:cover;}
.mockup-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.mockup-col:hover .mockup-phone{transform:translateY(-4px);filter:drop-shadow(0 14px 30px rgba(74,59,49,.12));}

/* Scope feature grid */
.feature-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  margin-top:32px;
}
.feature-item h4{
  font-family:var(--body);
  font-weight:700;
  font-size:15px;
  color:var(--ink-90);
  margin:0 0 8px;
}
.feature-item p{font-size:13px;color:var(--ink-55);line-height:1.5;}

@media (max-width:1180px){
  .feature-grid{grid-template-columns:1fr;row-gap:24px;}
  .feature-grid .uebersicht-divider{display:none;}
}

@media (max-width:1180px){
  .ia-grid{grid-template-columns:repeat(2,1fr);}
}
.scatter-notes .uebersicht-divider{margin:0;}
.scatter-note b{color:var(--ink-90);}

@media (max-width:860px){
  .scatter-notes{grid-template-columns:1fr;row-gap:16px;}
  .scatter-notes .uebersicht-divider{display:none;}
}

/* Persona traits grid (Verhalten / Needs / Motivation / Pain Points) */
.persona-traits-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--ink-08);
}
.trait-item h4{
  font-family:var(--body);
  font-weight:700;
  font-size:15px;
  color:var(--ink-90);
  margin:0 0 8px;
}
.trait-item p{font-size:13px;color:var(--ink-55);line-height:1.5;}

@media (max-width:860px){
  .persona-traits-grid{grid-template-columns:1fr 1fr;row-gap:24px;}
  .persona-traits-grid .uebersicht-divider{display:none;}
}

/* Übersicht analysis cards */
.uebersicht-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0;
  margin-top:32px;
  align-items:stretch;
}
.uebersicht-divider{width:1px;background:var(--ink-14);align-self:stretch;margin:0 12px;}
.uebersicht-card{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-radius:12px;
  transition:transform .3s ease, background .3s ease;
}
.uebersicht-card:hover{transform:translateY(-3px);background:rgba(236,231,221,.18);}
.uebersicht-card h4{
  font-size:16.52px;font-weight:600;color:var(--dark-ink);margin:0;
}
.metric{display:flex;flex-direction:column;gap:3px;}
.metric-top{display:flex;justify-content:space-between;font-size:12.39px;color:var(--slate-light);}
.bar-track{height:5px;border-radius:20px;background:var(--sage-tint);position:relative;overflow:hidden;}
.bar-fill{height:100%;background:var(--sage-hover);border-radius:20px 0 0 20px;transition:width 1.1s cubic-bezier(.22,.61,.36,1);}
.big-stat{font-weight:700;font-size:31.86px;color:var(--sage-hover);letter-spacing:.01em;margin:0;}
.big-stat-caption{font-size:12.39px;color:var(--slate-light);}
.uebersicht-card p.body{font-size:13.57px;color:var(--slate-light);line-height:1.5;}
.metrics-stack{display:flex;flex-direction:column;gap:8px;}
.dot-grid{display:flex;flex-direction:column;gap:3px;}
.dot-row{display:flex;gap:3px;}
.dot-row span{width:13px;height:13px;border-radius:50%;background:var(--sage-tint);flex:0 0 auto;transition:transform .2s ease;}
.dot-row span.highlight{background:var(--coral);animation:dotPulse 2.6s ease-in-out infinite;}
.dot-row span:hover{transform:scale(1.25);}

@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,120,90,.35);}
  50%{box-shadow:0 0 0 5px rgba(232,120,90,0);}
}

/* ================= Constraints table ================= */
.data-table{margin-top:28px;border-top:1px solid var(--ink-14);}
.t-head{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:28px;
  padding:11px 0;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-35);
}
.t-row{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:28px;
  padding:20px 0;
  border-top:1px solid var(--ink-08);
}
.t-row .k{font-weight:700;font-size:14.5px;color:var(--ink-90);}
.t-row .v{font-size:13px;color:var(--ink-55);line-height:1.55;}

@media (max-width:860px){
  .t-head,.t-row{grid-template-columns:1fr;gap:8px;}
}

/* ================= 03 Rückschlag (dark) ================= */
.dark-chapter{border-radius:0;text-align:left;}
.dark-chapter-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:96px var(--content-pad) 80px;
}
.quote-lead{
  font-family:var(--body);
  font-weight:800;
  font-size:28px;
  line-height:1.3;
  max-width:720px;
  margin-top:14px;
  letter-spacing:-.01em;
  color:#f7f3ec;
}
.quote-lead::before{content:'„';}
.quote-lead::after{content:'“';}
.quote-source{margin-top:14px;font-size:13px;color:var(--sage-light);}

.feat-grid-dark{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
  padding-top:28px;
  padding-bottom:28px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.feat-dark h4{
  font-family:var(--body);
  font-weight:700;
  font-size:14.5px;
  color:#f7f3ec;
  margin:0 0 8px;
}
.feat-dark p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.5;}

.rueckschlag-screen-row{
  display:grid;
  grid-template-columns:216px 1fr;
  gap:40px;
  margin-top:64px;
  align-items:center;
}
.rueckschlag-screen-row .mockup-phone{margin:0;}
.italic-statement-dark{
  font-weight:700;
  font-size:22px;
  line-height:1.4;
  color:#f7f3ec;
  letter-spacing:-.01em;
}
.statement-caption-dark{font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;margin-top:12px;}

@media (max-width:860px){
  .feat-grid-dark{grid-template-columns:1fr;gap:20px;}
  .rueckschlag-screen-row{grid-template-columns:1fr;}
}

/* ================= Priorisierung ================= */
.priority-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:32px;
}
.priority-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
.priority-col li{
  font-size:14px;
  padding:12px 0;
  border-bottom:1px solid var(--ink-08);
}
.priority-col.done li{color:var(--ink-90);font-weight:500;}
.priority-col.later li{color:var(--ink-35);}
.priority-col .eyebrow{display:block;margin-bottom:16px;}

@media (max-width:860px){
  .priority-grid{grid-template-columns:1fr;}
}

/* ================= Lösung: vorher/nachher + KPI ================= */
.ba-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:40px;
}
.ba-grid.staffel{grid-template-columns:1fr 1fr 1fr;}
.ba-col .eyebrow{display:block;margin-bottom:16px;text-align:center;}
.ba-caption{margin-top:18px;display:flex;flex-direction:column;gap:6px;text-align:center;}
.ba-caption p{font-size:13px;color:var(--ink-70);}

@media (max-width:860px){
  .ba-grid{grid-template-columns:1fr;}
  .ba-grid.staffel{grid-template-columns:1fr;}
}

.kpi-card{
  margin-top:56px;
  background:var(--ink);
  border-radius:18px;
  padding:44px 48px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px;
  align-items:center;
}
.kpi-num{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:52px;
  color:var(--sage-light);
  line-height:1;
}
.kpi-card .eyebrow{color:rgba(255,255,255,.35);display:block;margin-bottom:9px;}
.kpi-card p{font-size:13.5px;color:rgba(255,255,255,.7);max-width:500px;}

@media (max-width:860px){
  .ba-grid{grid-template-columns:1fr;}
  .kpi-card{grid-template-columns:1fr;text-align:left;}
}

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .stat-card:nth-child(3){border-left:none;padding-left:0;margin-top:16px;}
  .two-col{grid-template-columns:1fr;}
  .uebersicht-grid{grid-template-columns:1fr;}
  .uebersicht-divider{display:none;}
}
@media (max-width:860px){
  .sidebar{display:none;}
  main{padding:28px 0 64px;}
  .hero-title{font-size:11vw;}
  h2{font-size:22.42px;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
}

/* ================= Arbeitsweise / Prozess komplett ================= */
.intro-bullets{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.intro-bullets li{
  font-size:13.5px;
  color:var(--ink-70);
  padding-left:18px;
  position:relative;
}
.intro-bullets li::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--ink-35);
}

.phase-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--sage);
  margin-top:48px;
  margin-bottom:4px;
}
.phase-label:first-of-type{margin-top:56px;}

.accordion-item{border-top:1px solid var(--ink-08);}
.accordion-item:last-child{border-bottom:1px solid var(--ink-08);}

.accordion-trigger{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  background:none;
  border:none;
  cursor:pointer;
  padding:18px 0;
  text-align:left;
  font-family:var(--body);
  color:var(--ink);
}
.accordion-trigger .at-title{font-weight:700;font-size:14.5px;}
.accordion-trigger .at-tag{font-size:12.5px;color:var(--ink-35);font-weight:400;margin-left:10px;}
.accordion-trigger .at-icon{
  font-size:18px;
  color:var(--ink-35);
  flex:0 0 auto;
  transition:transform .2s ease, color .2s ease;
}
.accordion-item.open .at-icon{transform:rotate(45deg);color:var(--sage);}

.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.accordion-item.open .accordion-panel{max-height:400px;}
.accordion-panel-inner{padding:0 0 20px;min-height:12px;}

/* Sicherheit */
.safety-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  margin-top:32px;
}
.safety-item h4{
  font-family:var(--body);
  font-weight:700;
  font-size:14.5px;
  color:var(--ink-90);
  margin:0 0 8px;
}
.safety-item p{font-size:13px;color:var(--ink-55);line-height:1.5;}

@media (max-width:1180px){
  .safety-grid{grid-template-columns:1fr 1fr;row-gap:24px;}
  .safety-grid .uebersicht-divider{display:none;}
}
@media (max-width:860px){
  .safety-grid{grid-template-columns:1fr;}
}

/* ================= UI-System (compact) ================= */
.uisys-label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--sage);
  margin-top:76px;
  margin-bottom:14px;
}

/* Farbe: main grid + grouped list */
.main-swatch-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:28px;
}
.main-swatch{display:flex;flex-direction:column;gap:9px;}
.main-chip{height:60px;border-radius:10px;}
.ms-name{font-weight:700;font-size:13px;color:var(--ink-90);}
.ms-hex{font-size:11.5px;color:var(--ink-55);font-variant-numeric:tabular-nums;}
.ms-use{font-size:11px;color:var(--ink-35);}

@media (max-width:1180px){
  .main-swatch-grid{grid-template-columns:1fr 1fr;}
}
.color-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 40px;
}
.color-list-group{margin-bottom:6px;}
.cl-group-title{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--ink-35);
  padding:14px 0 8px;
  border-bottom:1px solid var(--ink-14);
}
.color-list-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--ink-08);
}
.cl-swatch{
  width:18px;
  height:18px;
  border-radius:5px;
  flex:0 0 auto;
  border:1px solid var(--ink-08);
}
.cl-name{font-size:12.5px;color:var(--ink-90);flex:1;}
.cl-hex{font-size:11.5px;color:var(--ink-55);font-variant-numeric:tabular-nums;}

@media (max-width:860px){
  .color-list{grid-template-columns:1fr;}
}

/* Typografie */
.type-scale-compact{border-top:1px solid var(--ink-14);margin-top:4px;}
.type-scale-head-compact{
  display:grid;
  grid-template-columns:1.8fr 1fr 0.6fr 0.6fr 0.8fr;
  padding:9px 0;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-35);
}
.type-scale-row-compact{
  display:grid;
  grid-template-columns:1.8fr 1fr 0.6fr 0.6fr 0.8fr;
  align-items:center;
  padding:11px 0;
  border-top:1px solid var(--ink-08);
  font-size:11.5px;
  color:var(--ink-55);
}
.ts-sample{color:var(--ink-90);}

@media (max-width:860px){
  .type-scale-head-compact span:nth-child(4),.type-scale-head-compact span:nth-child(5),
  .type-scale-row-compact span:nth-child(4),.type-scale-row-compact span:nth-child(5){display:none;}
  .type-scale-head-compact,.type-scale-row-compact{grid-template-columns:2fr 1fr 0.6fr;}
}

/* Bausteine — self-arranging grid: each tile just declares its own size
   (wide = spans 2 columns, tall = spans 2 rows) and the browser packs
   everything densely, so spacing stays consistent no matter what changes. */
.building-grid-compact{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
  gap:14px;
  align-items:start;
}
.building-grid-compact > .tile-wide{grid-column:span 2;}
.building-grid-compact > .tile-tall{grid-row:span 2;}

.build-card-compact{
  background:#fff;
  border:1px solid var(--ink-08);
  border-radius:10px;
  padding:14px 16px 16px;
}
.build-card-compact.empty{min-height:120px;}
.b-label-compact{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-35);
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
}

/* Bausteine: real reference screenshots — the jpgs already contain their own
   title/border/background, so these wrappers add no extra chrome. */
.build-card-compact.has-image{
  padding:0;
  background:transparent;
  border:none;
  border-radius:10px;
  overflow:hidden;
  align-self:start;
}
.build-card-compact .b-shot-wrap{
  background:none;
  border:none;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  display:block;
}
.build-card-compact .b-shot-wrap img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  cursor:zoom-in;
  transition:transform .3s ease;
}
.build-card-compact .b-shot-wrap img:hover{transform:scale(1.01);}

.mock-buttons-compact{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.mock-btn-solid-compact{background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:8px 16px;border-radius:999px;}
.mock-btn-outline-compact{border:1px solid var(--ink-14);font-size:12px;font-weight:600;padding:7px 16px;border-radius:999px;color:var(--ink);}
.mock-btn-link-compact{font-size:11.5px;color:var(--sage);text-decoration:underline;font-weight:600;}

.mock-task-compact{background:var(--bg);border:1px solid var(--ink-08);border-radius:8px;padding:12px 14px;}
.mock-task-top-compact{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-35);}
.mock-task-title-compact{font-weight:700;font-size:12.5px;margin-top:7px;}
.mock-task-tags-compact{display:flex;gap:6px;margin-top:9px;}
.mock-task-tags-compact span{font-size:10px;font-weight:600;color:var(--sage-dark,var(--sage));background:rgba(236,231,221,.55);border-radius:20px;padding:3px 8px;}

.mock-hinweis-compact{display:flex;gap:10px;align-items:flex-start;background:var(--coral-tint,#fbe3db);border-radius:8px;padding:12px 14px;}
.mock-hinweis-compact .dot-compact{width:7px;height:7px;border-radius:50%;background:var(--signal,#e8785a);margin-top:5px;flex:0 0 auto;}
.h-title-compact{font-weight:700;font-size:12.5px;}
.h-sub-compact{font-size:11px;color:var(--ink-55);margin-top:3px;}

.mock-nav-compact{background:var(--ink);border-radius:999px;padding:9px 14px;display:flex;justify-content:space-between;}
.mock-nav-item-compact{display:flex;flex-direction:column;align-items:center;gap:4px;}
.mock-nav-dot-compact{width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.14);position:relative;}
.mock-nav-item-compact.active .mock-nav-dot-compact{background:#fff;}
.mock-nav-item-compact.notify .mock-nav-dot-compact::after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--signal,#e8785a);top:-2px;right:-2px;}
.mock-nav-item-compact span{font-size:8px;color:rgba(255,255,255,.35);font-weight:600;}
.mock-nav-item-compact.active span{color:#fff;}

.mock-code-compact{display:flex;gap:7px;}
.mock-code-box-compact{width:32px;height:38px;border:1.5px solid var(--ink-14);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:800;font-size:13px;}
.mock-code-box-compact.active{border-color:var(--sage);}
.mock-code-box-compact.cursor::after{content:'';width:1.5px;height:13px;background:var(--signal,#e8785a);display:block;}

.mock-empty-compact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:6px 0 2px;}
.mock-empty-circle-compact{width:32px;height:32px;border:1.5px solid var(--ink-14);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.mock-empty-circle-compact span{width:6px;height:6px;background:var(--signal,#e8785a);border-radius:50%;}
.mock-empty-title-compact{font-weight:700;font-size:12.5px;}
.mock-empty-sub-compact{font-size:11px;color:var(--ink-55);}

@media (max-width:1180px){
  .swatch-row-compact{grid-template-columns:repeat(2,1fr);}
  .building-grid-compact{grid-template-columns:repeat(2,1fr);}
  .building-grid-compact > .tile-tall{grid-row:span 1;}
}
@media (max-width:860px){
  .swatch-row-compact{grid-template-columns:1fr 1fr;}
  .building-grid-compact{grid-template-columns:1fr;}
}

/* ================= Additional motion pass ================= */

/* Staggered fade-up for grid children, once their parent .reveal is in view */
.feat-grid-dark > .feat-dark,
.concept-grid > .concept-card,
.loop-rail > .loop-node,
.safety-grid > .safety-item,
.ia-grid > .ia-card,
.building-grid-compact > .build-card-compact{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view .feat-grid-dark > .feat-dark,
.reveal.in-view .concept-grid > .concept-card,
.reveal.in-view .loop-rail > .loop-node,
.reveal.in-view .safety-grid > .safety-item,
.reveal.in-view .ia-grid > .ia-card,
.reveal.in-view .building-grid-compact > .build-card-compact{
  opacity:1;
  transform:translateY(0);
}
.feat-grid-dark > .feat-dark:nth-child(1),
.concept-grid > .concept-card:nth-child(1),
.loop-rail > .loop-node:nth-child(1),
.safety-grid > .safety-item:nth-child(1),
.ia-grid > .ia-card:nth-child(1),
.building-grid-compact > .build-card-compact:nth-child(1){transition-delay:.05s;}
.feat-grid-dark > .feat-dark:nth-child(2),
.concept-grid > .concept-card:nth-child(2),
.loop-rail > .loop-node:nth-child(2),
.safety-grid > .safety-item:nth-child(2),
.ia-grid > .ia-card:nth-child(2),
.building-grid-compact > .build-card-compact:nth-child(2){transition-delay:.14s;}
.feat-grid-dark > .feat-dark:nth-child(3),
.concept-grid > .concept-card:nth-child(3),
.loop-rail > .loop-node:nth-child(3),
.safety-grid > .safety-item:nth-child(3),
.ia-grid > .ia-card:nth-child(3),
.building-grid-compact > .build-card-compact:nth-child(3){transition-delay:.23s;}
.safety-grid > .safety-item:nth-child(4),
.ia-grid > .ia-card:nth-child(4),
.building-grid-compact > .build-card-compact:nth-child(4){transition-delay:.32s;}
.building-grid-compact > .build-card-compact:nth-child(5){transition-delay:.41s;}
.building-grid-compact > .build-card-compact:nth-child(6){transition-delay:.5s;}
.building-grid-compact > .build-card-compact:nth-child(7){transition-delay:.59s;}
.building-grid-compact > .build-card-compact:nth-child(8){transition-delay:.68s;}
.building-grid-compact > .build-card-compact:nth-child(9){transition-delay:.77s;}

/* Gentle hover for elements that were missing it */
.feat-dark{transition:transform .3s ease;}
.feat-dark:hover{transform:translateY(-3px);}
.safety-item{transition:transform .3s ease;}
.safety-item:hover{transform:translateX(3px);}
.color-list-row{transition:background .2s ease, padding-left .2s ease;}
.color-list-row:hover{background:rgba(27,23,20,.03);padding-left:6px;}
.accordion-trigger{transition:padding-left .2s ease;}
.accordion-trigger:hover{padding-left:4px;}
.ia-card{transition:transform .3s ease, box-shadow .3s ease;}
.ia-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(74,59,49,.08);}
.build-card-compact{transition:transform .3s ease, box-shadow .3s ease;}
.build-card-compact:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(74,59,49,.06);}

/* Subtle pop-in for big numbers when their section reveals */
.kpi-num,
.big-stat{
  display:inline-block;
  transform:scale(.85);
  opacity:0;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
}
.reveal.in-view .kpi-num,
.reveal.in-view .big-stat{
  transform:scale(1);
  opacity:1;
}

/* Progress bars, gentle easing already present; give trait/scope items a light stagger too */
.persona-traits-grid > .trait-item,
.feature-grid > .feature-item,
.color-list > .color-list-group{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view .persona-traits-grid > .trait-item,
.reveal.in-view .feature-grid > .feature-item,
.reveal.in-view .color-list > .color-list-group{
  opacity:1;
  transform:translateY(0);
}
.persona-traits-grid > .trait-item:nth-child(1),.feature-grid > .feature-item:nth-child(1){transition-delay:.05s;}
.persona-traits-grid > .trait-item:nth-child(3),.feature-grid > .feature-item:nth-child(2){transition-delay:.14s;}
.persona-traits-grid > .trait-item:nth-child(5),.feature-grid > .feature-item:nth-child(3){transition-delay:.23s;}
.persona-traits-grid > .trait-item:nth-child(7){transition-delay:.32s;}

@media (prefers-reduced-motion: reduce){
  .feat-grid-dark > .feat-dark,
  .concept-grid > .concept-card,
  .loop-rail > .loop-node,
  .safety-grid > .safety-item,
  .ia-grid > .ia-card,
  .building-grid-compact > .build-card-compact,
  .persona-traits-grid > .trait-item,
  .feature-grid > .feature-item,
  .color-list > .color-list-group,
  .kpi-num,
  .big-stat{opacity:1;transform:none;transition:none;}
}

/* ================= Large-screen hero breathing room ================= */
@media (min-width:1700px){
  .hero-top{gap:22px;}
  .hero-heading{gap:clamp(20px,3.5vh,34px);}
  .hero-sub-wrap{gap:clamp(14px,2.2vh,22px);}
  .kategorie{padding:7px 16px;}
}

/* ================= Scroll progress indicator ================= */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--sage), var(--signal));
  z-index:100;
  transition:width .1s ease-out;
}

.pfx-inner{display:inline-block;}

/* ================= Custom cursor (matches linamelissa.de) ================= */
@media (pointer: fine){
  body, a, button{cursor:none;}

  .custom-cursor{
    position:fixed;
    top:0; left:0;
    width:14px;
    height:14px;
    margin:-7px 0 0 -7px;
    border-radius:50%;
    background:var(--ink);
    border:2px solid var(--ink);
    pointer-events:none;
    z-index:9999;
    opacity:0;
    transition:width .18s ease, height .18s ease, margin .18s ease, background .18s ease, border-color .18s ease, opacity .2s ease;
    will-change:transform;
  }
  .custom-cursor.visible{opacity:1;}
  .custom-cursor.hovering{
    width:40px;
    height:40px;
    margin:-20px 0 0 -20px;
    background:rgba(74,59,49,.15);
    border:2px solid var(--ink);
  }
}
@media (pointer: fine) and (prefers-reduced-motion: reduce){
  .custom-cursor{transition:none;}
}
@media (hover:none), (pointer:coarse){
  .custom-cursor{display:none;}
}
/* ================= Back to top ================= */
.back-to-top{
  position:fixed;
  bottom:28px;
  right:28px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
  z-index:80;
}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{background:var(--sage-hover);}
.back-to-top svg{width:18px;height:18px;}

/* ================= Lightbox ================= */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(27,23,20,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease;
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img{
  width:auto;
  height:min(88vh, 820px);
  max-width:92vw;
  border-radius:24px;
  transform:scale(.9);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.lightbox.open img{transform:scale(1);}
.lightbox-close{
  position:absolute;
  top:28px;
  right:32px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.18);transform:rotate(90deg);}
.phone-card{cursor:pointer;}

/* ================= Typewriter cursor blink ================= */
.typewriter-cursor{
  display:inline-block;
  width:2px;
  background:var(--signal);
  margin-left:2px;
  animation:twBlink .8s steps(1) infinite;
}
@keyframes twBlink{50%{opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .custom-cursor{display:none;}
  .lightbox img{transition:none;}
}


/* ============================================================
   iOS-TOUCH-LAYER  —  Oberflaechen wie auf der Startseite
   grosse Radien, warme Neutrals, Coral als einziger Akzent
   ============================================================ */
:root{
  --r-card:24px;
  --r-tile:18px;
  --r-pill:100px;
  --hairline:#e7e1d6;
  --sh-rest:0 1px 3px rgba(27,23,20,.04), 0 2px 8px rgba(27,23,20,.035);
  --sh-lift:0 10px 28px rgba(74,59,49,.13), 0 2px 6px rgba(27,23,20,.05);
  --sh-glass:0 4px 20px rgba(74,59,49,.08);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-ios:cubic-bezier(.4,0,.2,1);
  --beige:#ece7dd;
}
html{-webkit-tap-highlight-color:transparent;}
body{background:var(--bg);}

/* ---- Glas-Leiste oben ---- */
.topbar{
  background:rgba(245,242,236,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:none;
  border-bottom:1px solid rgba(27,23,20,.07);
}
.topbar-left{transition:transform .2s var(--spring), color .2s ease;}
.topbar-left:active{transform:scale(.95);}
.topbar-lang{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(27,23,20,.08);
  border-radius:var(--r-pill);
  transition:background .2s ease, transform .18s var(--spring);
}
.topbar-lang:hover{background:#fff;transform:none;}
.topbar-lang:active{transform:scale(.93);}

/* ---- Sidebar: Nav-Zeilen als Touch-Pills ---- */
.sidebar{border-right:1px solid rgba(27,23,20,.06);}
.nav a{
  padding:6px 10px;
  margin:0 -10px;
  border-radius:var(--r-pill);
  transition:background .2s ease, color .2s ease, transform .18s var(--spring);
}
.nav a:hover{transform:none;background:rgba(27,23,20,.045);}
.nav a:active{transform:scale(.97);}
.nav a.active{background:var(--sage-tint);color:var(--sage-hover);}
.nav .sub{padding-left:26px;}
.nav .chapter{margin-top:12px;padding:0 0 2px;}
.nav-figma{
  border-radius:var(--r-pill);
  padding:6px 10px;
  margin:10px -10px 0;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(27,23,20,.06);
}
.nav-figma:hover{transform:none;background:#fff;}

/* ---- Karten: weiss auf Off-White, 24px, weiche Schatten ---- */
.stat-card,
.quote-card,
.persona-card,
.ia-card,
.concept-card,
.uebersicht-card,
.build-card-compact,
.data-table,
.priority-col,
.type-scale-compact,
.accordion-item,
.scatter-wrap{
  border-radius:var(--r-card);
  box-shadow:var(--sh-rest);
  transition:transform .25s var(--ease-ios), box-shadow .25s var(--ease-ios), background .25s ease;
}
.stat-card,
.persona-card,
.ia-card,
.concept-card.discard,
.build-card-compact,
.data-table,
.type-scale-compact,
.accordion-item,
.scatter-wrap{
  background:#fff;
  border:1px solid var(--hairline);
}
.quote-card{background:var(--beige);border:1px solid rgba(27,23,20,.05);}
.uebersicht-card{background:#fff;border:1px solid var(--hairline);padding:22px;}
.uebersicht-card:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--sh-lift);}
.stat-card:hover,
.quote-card:hover,
.persona-card:hover,
.ia-card:hover,
.concept-card.discard:hover,
.build-card-compact:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);}
.concept-card{border-radius:var(--r-card);}
.concept-card.chosen{background:var(--ink);border:1px solid var(--ink);}
.concept-card.chosen:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,23,20,.28);}
.uebersicht-divider{background:rgba(27,23,20,.07);}

/* ---- Pills, Chips, Buttons ---- */
.kategorie,
.pill-badge,
.loop-pill,
.concept-tag,
.at-tag,
.phase-label,
.btn-outline-dark{border-radius:var(--r-pill);}
.kategorie{
  background:var(--sage-tint);
  color:var(--sage-hover);
  transition:transform .2s var(--spring), box-shadow .25s ease;
}
.kategorie:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(232,120,90,.2);}
.loop-pill.outline{border:1px solid rgba(27,23,20,.12);color:var(--ink-55);background:#fff;}
.loop-pill.filled{background:var(--sage);color:#fff;box-shadow:0 6px 16px rgba(232,120,90,.28);}
.btn-outline-dark{transition:background .25s ease, transform .18s var(--spring);}
.btn-outline-dark:active{transform:scale(.96);}

/* ---- Telefone und Bilder: iOS-Radien ---- */
.phone-screen{border-radius:var(--pf-radius);overflow:hidden;}
.mockup-screen{border-radius:var(--pf-radius);overflow:hidden;}
.mockup-col:hover .mockup-phone{transform:translateY(-4px);filter:drop-shadow(0 14px 30px rgba(74,59,49,.12));}
.b-shot-wrap{border-radius:var(--r-tile);overflow:hidden;}
.avatar{border-radius:50%;overflow:hidden;}

/* ---- Grouped-List-Anmutung fuer Tabelle und Akkordeon ---- */
.data-table{overflow:hidden;}
.data-table .t-head{background:var(--beige);}
.data-table .t-row + .t-row{border-top:1px solid rgba(27,23,20,.07);}
.accordion-item{overflow:hidden;margin-bottom:8px;}
.accordion-trigger{transition:background .2s ease;}
.accordion-trigger:hover{background:rgba(27,23,20,.03);}
.at-icon{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--beige);color:var(--ink-70);flex:0 0 auto;
}
.priority-col{background:#fff;border:1px solid var(--hairline);padding:24px;}
.priority-col.done{background:#fff;}
.priority-col.later{background:var(--beige);box-shadow:none;}

/* ---- Dunkle Sektionen bleiben dunkel, nur warm ---- */
.ergebnis-wrap{background:var(--deep-ink);}
.ergebnis-wrap .accent-italic{color:var(--sage-light);}
.kpi-card{border-radius:var(--r-card);}
.ergebnis-list .dot{border-radius:50%;}

/* ---- Farb-Swatches ---- */
.main-chip{border-radius:14px;}
.cl-swatch{border-radius:7px;}

/* ---- Back to top als runder Glas-Knopf ---- */
.back-to-top{
  border-radius:50%;
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(27,23,20,.08);
  box-shadow:var(--sh-glass);
  color:var(--ink);
  transition:transform .2s var(--spring), background .2s ease;
}
.back-to-top:hover{background:#fff;transform:translateY(-2px);}
.back-to-top:active{transform:scale(.92);}

@media (max-width:860px){
  .nav a{padding:9px 12px;}
}


/* ============================================================
   AKZENT-DISZIPLIN + RHYTHMUS
   Coral erscheint nur noch: Wortzeichen, die vier Zahlen,
   Kapitel 03 (dunkel), Kapitel 04, aktiver Nav-Zustand.
   ============================================================ */
.eyebrow{color:var(--slate-light);letter-spacing:.1em;}
.eyebrow.muted{color:var(--ink-35);}
.eyebrow.on-dark{color:rgba(247,243,236,.5);}
.kpi-card .eyebrow{color:rgba(255,255,255,.42);}
.accent-italic{color:var(--ink);}
.accent-signal{color:var(--sage);}
.ergebnis-wrap .accent-italic,
.ergebnis-wrap .accent-signal{color:var(--sage-light);}
.uisys-label,.phase-label{color:var(--slate-light);}
.ia-dot-title,.cl-group-title{color:var(--ink);}

/* Hero: ein Satz, dann das Prinzip */
.hero-principle{
  font-size:14.5px;
  font-style:italic;
  color:var(--ink-55);
  max-width:620px;
  line-height:1.55;
  margin:6px auto 0;
  animation:heroFadeUp .8s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.34s;
}

/* Sidebar: vollständig erreichbar, sanft ausgeblendet */
.sidebar{overflow:visible;}
.nav{
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(27,23,20,.16) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 18px),transparent 100%);
}
.nav::-webkit-scrollbar{width:3px;}
.nav::-webkit-scrollbar-thumb{background:rgba(27,23,20,.16);border-radius:3px;}
.nav::-webkit-scrollbar-track{background:transparent;}

/* Ergebnis: echte Screens im Rahmen */
.ergebnis-shot{
  position:absolute;
  left:25.66%;
  top:20%;
  width:43.64%;
  height:60.45%;
  object-fit:cover;
  object-position:top center;
  border-radius:8px;
}
.ergebnis-phone-col .label{color:rgba(247,243,236,.62);font-weight:600;}

/* Kapitel 04 trägt mehr Gewicht als seine Nachbarn */
.h2-xl{font-size:clamp(30px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;}
#loesung .ba-grid{margin-top:56px;}
.ba-col .mockup-phone[style]{width:264px !important;}
.ba-col .eyebrow{letter-spacing:.1em;}
.kpi-card{padding:34px 38px;}
.kpi-card .kpi-num{color:var(--sage-light);}

/* Methodenliste statt leerer Akkordeons */
.method-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:13px 2px;
  border-bottom:1px solid rgba(27,23,20,.07);
}
.method-row:first-of-type{border-top:1px solid rgba(27,23,20,.07);}
.m-name{font-size:14.5px;font-weight:600;color:var(--ink-90);}
.m-tag{font-size:12.5px;color:var(--ink-35);text-align:right;flex:0 1 auto;}
@media (max-width:640px){
  .method-row{flex-direction:column;gap:3px;}
  .m-tag{text-align:left;}
}


/* ============================================================
   05 WERKSTATT — Beweisebene
   ============================================================ */
.sub-block{margin-top:96px;}
/* nutzt das bestehende .ia-head-Muster, nur mit Umbruchschutz */
.block-head{gap:16px;margin-bottom:14px;}
.block-head .eyebrow,
.block-head .hint{flex:0 0 auto;white-space:nowrap;}
.block-head .hint{font-size:12px;color:var(--ink-35);font-weight:400;text-align:right;}
@media (max-width:560px){
  .block-head{flex-direction:column;align-items:flex-start;gap:4px;}
  .block-head .hint{text-align:left;}
}
.sub-block h3{max-width:660px;}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;padding:11px 20px;
  border:1px solid var(--hairline);
  background:#fff;
  border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:var(--ink);
  box-shadow:var(--sh-rest);
  transition:transform .18s var(--spring), box-shadow .25s var(--ease-ios);
}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);}
.btn-ghost:active{transform:scale(.96);}
.btn-ghost svg{width:13px;height:13px;}
.btn-ghost.sm{margin-top:0;padding:8px 15px;font-size:12.5px;}

/* ---- Video ---- */
.video-frame{
  position:relative;
  margin-top:26px;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--hairline);
  box-shadow:var(--sh-rest);
  aspect-ratio:16/9;
}
.video-frame video{width:100%;height:100%;display:block;object-fit:cover;}
.video-frame.is-empty video{opacity:.28;}

/* ---- Platzhalter-Hinweis, solange die Datei fehlt ---- */
.proof-missing{
  display:none;
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;
  padding:9px 16px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px dashed rgba(27,23,20,.28);
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-70);
  white-space:nowrap;
}
.video-frame.is-empty .proof-missing,
.proof-shot.is-empty .proof-missing{display:block;}

/* ---- Figma-Einblicke ---- */
.proof-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:26px;
}
.proof-shot{
  position:relative;
  margin:0;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--sh-rest);
  transition:transform .25s var(--ease-ios), box-shadow .25s var(--ease-ios);
}
.proof-shot.wide{grid-column:1 / -1;}
.proof-shot:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);}
.proof-shot img{
  display:block;width:100%;
  aspect-ratio:16/10;
  object-fit:cover;object-position:top left;
  background:var(--beige);
}
.proof-shot.wide img{aspect-ratio:21/9;}
.proof-shot.is-empty img{opacity:0;}
.proof-shot.is-empty{background:repeating-linear-gradient(135deg,#f2eee6 0 12px,#ece7dd 12px 24px);}
.proof-shot figcaption{
  padding:15px 18px 17px;
  font-size:13px;color:var(--ink-55);line-height:1.5;
  border-top:1px solid rgba(27,23,20,.06);
  background:#fff;
}
.proof-shot figcaption b{color:var(--ink-90);font-weight:600;}
@media (max-width:860px){
  .proof-grid{grid-template-columns:1fr;}
}

/* ---- Klickbarer Prototyp ---- */
.proto{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:44px;
  align-items:center;
  margin-top:30px;
  padding:38px 40px;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:var(--sh-rest);
}
.proto-stage{display:flex;justify-content:center;}
.proto-phone{
  position:relative;
  width:252px;
  aspect-ratio:337/681;
  background:none;border:0;padding:0;margin:0;
  cursor:pointer;
  filter:drop-shadow(0 18px 38px rgba(74,59,49,.26));
  transition:transform .25s var(--ease-ios);
}
.proto-phone:active{transform:scale(.985);}
.proto-screen{
  position:absolute;
  inset:var(--pf-inset-y) var(--pf-inset-x);
  overflow:hidden;
  border-radius:var(--pf-radius);
}
.proto-shot{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  transition:opacity .22s ease;
}
.proto-phone.is-turning .proto-shot{opacity:.35;}
.proto-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
.proto-tap{
  position:absolute;
  width:34px;height:34px;border-radius:50%;
  left:50%;top:74%;
  margin:-17px 0 0 -17px;
  border:2px solid var(--sage);
  background:rgba(232,120,90,.16);
  pointer-events:none;
  animation:protoTap 1.9s ease-in-out infinite;
  transition:top .3s var(--ease-ios);
}
.proto-tap.at-mid{top:46%;}
.proto-tap.at-nav{top:88%;}
@keyframes protoTap{
  0%,100%{transform:scale(.86);opacity:.55;}
  50%{transform:scale(1.14);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .proto-tap{animation:none;}
}

.proto-counter{
  display:flex;align-items:baseline;gap:6px;
  font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--ink);
}
.proto-counter .of{font-size:15px;font-weight:600;color:var(--ink-35);}
.proto-caption{
  margin-top:6px;
  font-size:17px;font-weight:600;color:var(--ink-90);
  line-height:1.35;max-width:340px;
  text-wrap:pretty;
}
.proto-steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.proto-steps button{
  display:flex;align-items:baseline;gap:12px;
  width:100%;text-align:left;
  background:none;border:0;
  padding:9px 12px;margin:0 -12px;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background .2s ease;
}
.proto-steps button:hover{background:rgba(27,23,20,.045);}
.ps-num{font-size:11px;font-weight:700;color:var(--ink-35);letter-spacing:.06em;flex:0 0 auto;}
.ps-label{font-size:13.5px;color:var(--ink-55);line-height:1.4;}
.proto-steps .is-current{background:var(--sage-tint);}
.proto-steps .is-current .ps-num{color:var(--sage-hover);}
.proto-steps .is-current .ps-label{color:var(--ink);font-weight:600;}
.proto-actions{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap;}
.proto-next{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ink-55);
}
.proto-next::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--sage);flex:0 0 auto;
}
@media (max-width:900px){
  .proto{grid-template-columns:1fr;gap:30px;padding:26px 22px;}
  .proto-phone{width:216px;}
  .proto-caption{max-width:none;}
}


/* ============================================================
   PROZESS VISUELL: Cluster, Fidelity-Strip, Annotationen
   ============================================================ */

/* ---- Vom Zitat zum Motiv ---- */
.cluster-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;
}
.cluster-col{display:flex;flex-direction:column;}
.cluster-tag{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-35);font-weight:600;margin-bottom:14px;
}
.cluster-notes{display:flex;flex-direction:column;gap:10px;}
.q-note{
  background:#fff;border:1px solid var(--hairline);border-radius:14px;
  padding:14px 16px;font-size:13.5px;line-height:1.5;color:var(--ink-70);
  box-shadow:var(--sh-rest);transform:rotate(-.35deg);
  transition:transform .25s var(--ease-ios), box-shadow .25s var(--ease-ios);
}
.q-note:nth-child(2n){transform:rotate(.45deg);}
.q-note:hover{transform:rotate(0) translateY(-2px);box-shadow:var(--sh-lift);}
.q-note .src{
  display:block;margin-top:8px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-35);
}
.cluster-link{height:34px;display:flex;justify-content:center;}
.cluster-link span{
  width:1px;background:linear-gradient(to bottom, var(--ink-14), var(--coral));
  display:block;
}
.cluster-result{
  border-radius:var(--r-tile);padding:16px 18px;
  background:#1b1714;color:#f7f3ec;
  display:flex;flex-direction:column;gap:5px;
}
.cluster-result .cr-name{font-weight:600;font-size:15.5px;line-height:1.3;}
.cluster-result .cr-count{font-size:12.5px;color:rgba(247,243,236,.62);}
@media (max-width:900px){.cluster-grid{grid-template-columns:1fr;gap:34px;}}

.proof-grid.slots-2{grid-template-columns:1fr 1fr;margin-top:34px;}
.slot-single{margin-top:44px;}

/* ---- Fidelity-Strip ---- */
.fidelity{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px;
}
.fid-step{display:flex;flex-direction:column;}
.fid-stage{
  display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-35);font-weight:600;margin-bottom:12px;
}
.fid-stage b{
  color:var(--ink-90);font-size:11px;letter-spacing:.06em;
  border:1px solid var(--ink-14);border-radius:100px;padding:2px 8px;
}
.fid-shot{
  position:relative;
  aspect-ratio:337/681;
  cursor:pointer;
  transition:transform .3s var(--ease-ios), filter .3s var(--ease-ios);
}
.fid-screen{
  position:absolute;inset:var(--pf-inset-y) var(--pf-inset-x);
  overflow:hidden;border-radius:var(--pf-radius);
  background:var(--beige);
}
.fid-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.fid-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.fid-shot:hover{transform:translateY(-4px);filter:drop-shadow(0 14px 26px rgba(74,59,49,.16));}
.fid-step.is-final .fid-screen{border:1.5px solid var(--ink);}
.fid-step.is-tested .fid-screen{border:1.5px dashed var(--coral-border);}
.fid-title{margin-top:16px;font-weight:600;font-size:15.5px;color:var(--ink-90);}
.fid-flag{
  display:inline-block;margin-left:6px;font-size:11px;font-weight:600;
  letter-spacing:.04em;color:var(--coral);border:1px solid var(--coral-border);
  border-radius:100px;padding:2px 8px;vertical-align:middle;white-space:nowrap;
}
.fid-note{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-55);}
@media (max-width:1000px){.fidelity{grid-template-columns:1fr;gap:32px;}}
@supports (container-type:inline-size){
  @media (max-width:1000px){.fidelity{grid-template-columns:repeat(3,1fr);gap:28px;}}
}
@media (max-width:560px){.fidelity{grid-template-columns:1fr;}}

/* ---- Annotierter Screen ---- */
.annot{
  display:grid;grid-template-columns:minmax(0,304px) 1fr;gap:56px;
  align-items:start;margin-top:36px;
}
.annot-phone{position:relative;border-radius:24px;}
.annot-phone > img{
  display:block;width:100%;border-radius:24px;
  box-shadow:var(--sh-rest);border:1px solid var(--hairline);
}
.annot-pin{
  position:absolute;width:30px;height:30px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:13px;font-weight:700;
  display:grid;place-items:center;transform:translate(-50%,-50%);
  box-shadow:0 4px 14px rgba(27,23,20,.3);
  transition:transform .25s var(--spring), box-shadow .25s var(--ease-ios);
}
.annot-pin.is-active{transform:translate(-50%,-50%) scale(1.28);box-shadow:0 8px 22px rgba(232,120,90,.5);}
.annot-list{display:flex;flex-direction:column;}
.annot-item{
  display:grid;grid-template-columns:28px 1fr;gap:18px;
  padding:20px 0;border-bottom:1px solid var(--ink-08);
  transition:opacity .25s var(--ease-ios);
}
.annot-item:first-child{padding-top:0;}
.annot-num{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--ink-14);font-size:12.5px;font-weight:700;color:var(--ink-70);
  transition:background .25s var(--ease-ios), color .25s var(--ease-ios), border-color .25s var(--ease-ios);
}
.annot-item.is-active .annot-num{background:var(--coral);border-color:var(--coral);color:#fff;}
.annot-item h4{margin:2px 0 6px;font-size:16.5px;line-height:1.3;color:var(--ink-90);}
.annot-item p{font-size:14px;line-height:1.6;color:var(--ink-55);}
.annot-fix{
  display:inline-block;margin-top:10px;font-size:12px;font-weight:600;
  color:var(--ink-70);background:var(--beige);border-radius:100px;padding:4px 12px;
}
@media (max-width:860px){
  .annot{grid-template-columns:1fr;gap:34px;}
  .annot-phone{max-width:280px;}
  .proof-grid.slots-2{grid-template-columns:1fr;}
}


/* ============================================================
   WEISS + LINIEN · Coral als Akzent · etwas luftiger
   ============================================================ */
:root{
  --bg:#ffffff;
  --beige:#ffffff;
  --surface:#ffffff;
  --hairline:rgba(27,23,20,.11);
  --line-soft:rgba(27,23,20,.07);
  --sage-tint:#fdeee9;
  --coral-tint:#fdeee9;
  --sh-rest:0 1px 2px rgba(27,23,20,.04);
  --sh-lift:0 12px 30px -12px rgba(27,23,20,.16);
  --content-pad:64px;
}
body{background:#fff;}
.topbar{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);box-shadow:none;border-bottom:1px solid var(--line-soft);}
.topbar-lang{border-color:var(--hairline);}
.sidebar{border-right:1px solid var(--line-soft);}

/* Flächen entbeigen: alles weiß, getrennt durch Linien */
.quote-card,
.data-table .t-head,
.priority-col.later,
.uebersicht-card,
.priority-col{background:#fff;border:1px solid var(--hairline);}
.quote-card{border-left:2px solid var(--coral);}
.data-table .t-head{border:0;border-bottom:1px solid var(--ink-14);}
.priority-col.later{box-shadow:none;opacity:.86;}
.num-badge{background:#fff;border:1px solid var(--hairline);}
.proof-shot img{background:#fbfbfa;}
.proof-shot.is-empty{background:repeating-linear-gradient(135deg,#fafaf9 0 12px,#f3f3f1 12px 24px);}
.annot-fix{background:#fff;border:1px solid var(--hairline);}
.fid-screen{background:#fbfbfa;}

/* etwas mehr Luft */
.section{padding-top:clamp(76px,8vw,116px);}
.sub-gap{margin-top:clamp(56px,6vw,84px);}
.sub-block{margin-top:clamp(56px,6vw,84px);}


/* ============================================================
   HERO-STAGE: dunkel → hell, Handy dreht sich beim Scrollen
   ============================================================ */
.first-screen{display:block;height:auto;min-height:0;}

.hero-scroll{
  position:relative;height:340vh;
  margin:0 calc(-1 * var(--content-pad)) clamp(40px,6vw,80px);
}
.hero-stage{
  position:sticky;top:46px;height:calc(100vh - 46px);
  overflow:hidden;border-radius:0 0 32px 32px;
  background:rgb(var(--stage-rgb,18 16 14));
  color:var(--stage-ink,#fff);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,4vw,56px);
  transition:background .15s linear;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
  gap:clamp(24px,4vw,56px);align-items:center;width:100%;
  max-width:1180px;margin:0 auto;
}
.hero-copy{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.6vh,18px);text-align:left;
  transform:translateY(var(--copy-y,0px));
  opacity:var(--copy-o,1);
}
.hero-copy .kategorie{
  background:rgba(232,120,90,.16);color:var(--coral);
  border:1px solid rgba(232,120,90,.32);animation:none;
}
.hero-copy .hero-title{
  animation:none;text-align:left;
  font-size:clamp(46px,7.4vw,104px);line-height:.94;letter-spacing:-.01em;
}
.hero-copy .hero-title .spot{color:var(--stage-ink,#fff);transition:color .15s linear;}
.hero-copy .hero-sub-wrap{align-items:flex-start;text-align:left;}
.hero-copy .hero-desc{
  animation:none;color:var(--stage-ink-70,rgba(255,255,255,.72));
  font-size:clamp(14.5px,1.5vw,17px);max-width:46ch;transition:color .15s linear;
}
.hero-copy .hero-principle{
  color:var(--stage-ink-45,rgba(255,255,255,.5));max-width:46ch;transition:color .15s linear;
}
.hero-copy .hero-meta{animation:none;justify-content:flex-start;}
.hero-copy .hero-meta .item,
.hero-copy .hero-meta svg{color:var(--stage-ink-70,rgba(255,255,255,.7));white-space:nowrap;transition:color .15s linear;}

/* ---- Handy-Bühne ---- */
.hero-phones{
  position:relative;justify-self:center;width:100%;
  max-width:min(340px,34vh);aspect-ratio:337/681;
  perspective:1400px;
}
.hp-glow{
  position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(var(--glow-s,.7));
  background:radial-gradient(circle, rgba(232,120,90,.42) 0%, rgba(232,120,90,.14) 42%, transparent 70%);
  filter:blur(24px);opacity:var(--glow-o,0);pointer-events:none;
}
.hero-phone{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:
    translateY(var(--ph-y,120px))
    scale(var(--ph-s,.92))
    rotateX(var(--ph-rx,14deg))
    rotateY(var(--ph-ry,-24deg))
    rotateZ(var(--ph-rz,0deg));
  opacity:var(--ph-o,0);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
.hp-viewport{
  position:absolute;inset:2.6% 3.4%;border-radius:30px;overflow:hidden;
  background:#0b0a09;
}
.hp-shot,.hp-springboard{position:absolute;inset:0;}
.hp-shot{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .35s var(--ease-ios);
}
.hp-shot.is-on{opacity:1;}
.hp-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.hp-island{
  position:absolute;top:2.4%;left:50%;transform:translateX(-50%) scale(var(--island-s,1));
  width:32%;height:3.4%;border-radius:100px;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
  transition:transform .4s var(--spring);
}
.hp-gloss{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.20) 46%, rgba(255,255,255,.05) 54%, transparent 66%);
  transform:translateX(var(--gloss-x,-60%));
  mix-blend-mode:screen;
}

/* Springboard (App-Icon-Grid, das sich öffnet) */
.hp-springboard{
  display:grid;grid-template-columns:repeat(4,1fr);
  align-content:start;gap:9%;padding:16% 10%;
  background:linear-gradient(165deg,#241f1b,#100e0c);
  opacity:var(--board-o,1);
  transform:scale(var(--board-s,1));
  transition:opacity .1s linear;
}
.hp-icon{
  aspect-ratio:1;border-radius:24%;
  background:rgba(255,255,255,.09);
}
.hp-icon.is-app{
  background:var(--coral);
  box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 6px 18px rgba(232,120,90,.5);
  transform:scale(var(--app-s,1));
}

/* Nebenhandys, die auffächern */
.hp-side{
  position:absolute;top:6%;width:78%;aspect-ratio:337/681;
  left:50%;border-radius:26px;overflow:hidden;
  opacity:var(--side-o,0);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.4));
}
.hp-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;}
.hp-side .hp-side-frame{object-fit:contain;}
.hp-side.left{transform:translateX(calc(-50% + var(--fan-x,0px) * -1)) rotate(calc(var(--fan-r,0deg) * -1)) scale(.86);}
.hp-side.right{transform:translateX(calc(-50% + var(--fan-x,0px))) rotate(var(--fan-r,0deg)) scale(.86);}

/* Beat-Anzeige + Hinweis */
.hero-beats{
  position:absolute;left:50%;bottom:44px;transform:translateX(-50%);
  display:flex;gap:8px;align-items:center;
}
.hero-beats .hb{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--stage-ink-45,rgba(255,255,255,.45));
  border:1px solid currentColor;border-radius:100px;padding:4px 11px;
  opacity:.5;transition:opacity .3s var(--ease-ios), color .3s var(--ease-ios), transform .3s var(--spring);
}
.hero-beats .hb.is-on{opacity:1;color:var(--coral);transform:scale(1.04);}
.hero-hint{
  position:absolute;right:26px;bottom:44px;display:flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stage-ink-45,rgba(255,255,255,.4));
  opacity:var(--hint-o,1);transition:opacity .3s linear;
}
.hero-hint span{
  width:1px;height:22px;background:currentColor;
  animation:hintPulse 1.8s var(--ease-ios) infinite;
}
@keyframes hintPulse{0%,100%{transform:scaleY(.4);opacity:.4;}50%{transform:scaleY(1);opacity:1;}}

@media (max-width:900px){
  .hero-scroll{height:260vh;}
  .hero-grid{grid-template-columns:1fr;gap:22px;}
  .hero-phones{max-width:min(240px,28vh);}
  .hero-copy{align-items:center;text-align:center;}
  .hero-copy .hero-title,.hero-copy .hero-sub-wrap{text-align:center;align-items:center;}
  .hero-hint{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll{height:auto;}
  .hero-stage{position:static;height:auto;padding-block:clamp(40px,8vh,90px);}
  .hero-hint,.hero-beats{display:none;}
}

/* ---- Kopfzeile: keine Umbrüche mehr ---- */
.topbar-inner{gap:16px;}
.topbar-left,.topbar-center,.topbar-lang{white-space:nowrap;}
.topbar-center{overflow:hidden;text-overflow:ellipsis;}

/* ---- Sidebar: dauerhaft komplett sichtbar, kein internes Scrollen ---- */
.sidebar{
  height:calc(100vh - 46px);overflow:hidden;
  padding:18px 18px 14px;width:196px;flex:0 0 196px;
}
.nav{overflow:visible;flex:1 1 auto;min-height:0;mask-image:none;-webkit-mask-image:none;}
.nav::after{display:none;}
.nav a{padding:3.5px 9px;font-size:12.2px;line-height:1.25;}
.nav .sub{padding-left:22px;font-size:11.5px;}
.nav .chapter{margin-top:9px;padding:0 0 1px;font-size:12.2px;}
.nav .chapter .num{font-size:11px;}
.nav-figma{padding:5px 9px;font-size:11.8px;margin-top:8px;}
.sidebar-footer{padding-top:8px;font-size:10.5px;}
@media (max-height:660px){
  .nav a{padding:2px 9px;font-size:11.6px;}
  .nav .sub{font-size:11px;}
  .nav .chapter{margin-top:6px;}
}


/* ---- Sticky-Bühne: main darf kein Scroll-Container sein ---- */
main{overflow-x:clip;overflow-y:visible;}
.hero-copy .kategorie{white-space:nowrap;}

/* ---- Sidebar: bei niedrigen Fenstern lautlos scrollbar statt überlappend ---- */
.nav{overflow-y:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
@media (max-height:760px){
  .nav a{padding:2px 9px;font-size:11.4px;}
  .nav .sub{font-size:10.9px;padding-left:20px;}
  .nav .chapter{margin-top:5px;font-size:11.4px;}
  .sidebar{padding:12px 16px 10px 32px;}
}


/* ---- Landeframe: Handy passt immer in die Bühne ---- */
.hero-phones{max-width:min(340px,30vh);max-height:64vh;}
.hero-phone{--ph-y:44px;--ph-o:.9;}


/* ---- Handy-Bühne: Display exakt im Rahmenbild ---- */
.hero-phones{max-width:min(420px,44vh);max-height:74vh;}
.hp-island{top:1.6%;width:34%;height:2.4%;}
.hp-springboard{gap:8%;padding:12% 8%;}
.hp-icon{border-radius:22%;}
.hp-side{top:4%;width:88%;aspect-ratio:1469/2205;}

.nav{position:relative;}
.sidebar[data-nav-overflow="1"] .nav{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.nav-more{
  display:none;position:absolute;left:0;right:0;bottom:0;height:22px;
  align-items:flex-end;justify-content:center;pointer-events:none;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-35);
}
.sidebar[data-nav-overflow="1"] .nav-more{display:flex;}

.hp-icon{width:100%;height:auto;aspect-ratio:1;}


/* ---- Kopfbereich über die volle Breite (ohne Nav) ---- */
.hero-scroll{width:100%;margin:0 0 clamp(40px,6vw,80px);}
.hero-stage{padding:clamp(20px,3vw,44px) clamp(24px,4vw,64px);}
.hero-grid{max-width:1240px;}

/* ---- Zahlen im Kopf, scanbar ---- */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,2vw,28px);margin-top:clamp(12px,2.2vh,22px);
  width:100%;max-width:760px;
}
.hero-stats .hs{
  display:flex;flex-direction:column;gap:4px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.16);
  transition:border-color .15s linear;
}
.hero-stats b{
  font-size:clamp(22px,2.7vw,34px);font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--coral);font-variant-numeric:tabular-nums;
}
.hero-stats b span{font-size:.62em;font-weight:600;}
.hero-stats .hs-l{
  font-size:11.5px;line-height:1.35;text-wrap:pretty;
  color:var(--stage-ink-70,rgba(255,255,255,.7));transition:color .15s linear;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;
}
@media (max-width:900px){
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;}
}
@media (max-height:620px){
  .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px;}
  .hero-stats b{font-size:19px;}
  .hero-stats .hs-l{font-size:10px;}
  .hero-copy .hero-principle{display:none;}
}

.hero-phone{transform-origin:50% 34%;}
.hero-phones{max-height:68vh;}

.hero-copy .hero-principle{margin:6px 0 0;text-align:left;animation:none;align-self:stretch;}


/* ---- Der Loop, in drei Schritten ---- */
.loop-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);margin:clamp(30px,4vw,52px) 0 clamp(28px,3.4vw,44px);
  align-items:start;
}
.loop-step{display:flex;flex-direction:column;gap:16px;}
.ls-head{display:flex;align-items:baseline;gap:10px;}
.ls-num{
  font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--coral);
  border:1px solid rgba(232,120,90,.45);border-radius:100px;padding:3px 9px;
}
.ls-name{font-size:17px;font-weight:600;color:#fff;line-height:1.25;}
.loop-step .ergebnis-phone{width:100%;}
.ls-note{
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.66);text-wrap:pretty;
}
@media (max-width:820px){
  .loop-steps{grid-template-columns:1fr;gap:38px;}
  .loop-step .ergebnis-phone{max-width:260px;}
}


/* ============================================================
   EIN DUNKLER BLOCK: Header-Screens wandern in den Loop
   ============================================================ */
.hero-scroll{height:460vh;}
.hero-stage{background:#17140f;color:#fff;}
.hero-grid{grid-template-columns:minmax(0,1fr);max-width:1240px;}
.hero-copy{max-width:min(620px,52%);}

/* Bühnenebene für die drei Geräte */
.hp-layer{position:absolute;inset:0;perspective:1500px;pointer-events:none;}
.hp-slot{
  position:absolute;left:50%;top:50%;
  width:var(--slot-w,clamp(140px,30vh,290px));
  aspect-ratio:1469/2205;transform-style:preserve-3d;
  transform:translate(-50%,-50%)
            translate3d(var(--x,0px),var(--y,0px),0)
            scale(var(--s,1))
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));
  opacity:var(--o,1);
}
.hp-slot .hero-phone,.hp-slot .hp-wing{position:absolute;inset:0;transform:none;opacity:1;filter:drop-shadow(0 34px 54px rgba(0,0,0,.5));}
.hp-wing-screen{
  position:absolute;
  overflow:hidden;background:#0b0a09;
}
.hp-wing-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}

/* Bildunterschriften der Loop-Schritte */
.hp-cap{
  position:absolute;left:-14%;right:-14%;top:calc(100% + 14px);
  display:flex;flex-direction:column;gap:6px;
  opacity:var(--cap-o,0);transform:translateY(calc((1 - var(--cap-o,0)) * 10px));
  text-align:left;
}
.hc-head{display:flex;align-items:baseline;gap:8px;}
.hc-num{
  font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--coral);
  border:1px solid rgba(232,120,90,.45);border-radius:100px;padding:2px 7px;
}
.hc-name{font-size:14.5px;font-weight:600;color:#fff;}
.hc-note{font-size:11.8px;line-height:1.5;color:rgba(255,255,255,.6);text-wrap:pretty;}

/* Loop-Kopfzeile, die im letzten Beat einfährt */
.loop-head{
  position:absolute;left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);
  top:clamp(22px,4vh,48px);max-width:640px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  opacity:var(--loop-o,0);transform:translateY(var(--loop-y,24px));
  pointer-events:var(--loop-pe,none);
}
.loop-head .eyebrow{color:rgba(255,255,255,.45);}
.loop-head h2{font-size:clamp(26px,3.4vw,46px);line-height:1.06;color:#fff;margin:0;}
.loop-head .accent-italic{color:rgba(255,255,255,.66);}
.loop-desc{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.66);max-width:46ch;}
.loop-head .btn-outline-dark{margin-top:4px;}

@media (max-width:900px){
  .hero-scroll{height:420vh;}
  .hero-copy{max-width:100%;}
  .hc-note{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll{height:auto;}
  .hp-layer{display:none;}
  .loop-head{position:static;opacity:1;transform:none;margin-top:32px;}
}

/* Loop-Endzustand: Beat-Pills weichen, Kopf und Geräte kollidieren nicht */
.hero-beats{opacity:var(--beats-o,1);transition:opacity .3s linear;}
.loop-head{top:clamp(16px,2.6vh,34px);gap:7px;}
.loop-head h2{font-size:clamp(24px,2.9vw,40px);}
.loop-desc{font-size:13.5px;}
.hp-cap{top:calc(100% + 10px);}
.hc-note{font-size:11.2px;line-height:1.45;}
@media (max-height:700px){
  .loop-desc{display:none;}
  .loop-head .btn-outline-dark{padding:6px 14px;font-size:12px;}
}

/* 4) fehlendes Token */
.typewriter-cursor{background:var(--coral);}

.scroll-progress{background:linear-gradient(90deg,var(--coral),var(--sage-light));}
:root{--signal:#FF5B3A;--sage-dark:#D6431F;}


/* ---- Geräte in Originalgröße: Slot ist der Gerätekörper, nicht die PNG-Fläche ---- */
.hp-slot{
  /* doppelte Basisgroesse: die Slots werden immer HERUNTER skaliert,
     dadurch rastert der Browser die Screens scharf statt pixelig */
  --slot-w:clamp(236px,43vh,476px);
  width:var(--slot-w);aspect-ratio:337/681;
}
.hp-slot .hp-frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}
.hp-slot .hp-viewport,
.hp-slot .hp-wing-screen{
  position:absolute;
  inset:var(--pf-inset-y) var(--pf-inset-x);
  border-radius:var(--pf-radius);overflow:hidden;background:#f4f1ec;
}
/* Screens exakt in die Glasflaeche, echtes Seitenverhaeltnis, kein Verzerren */
.hp-slot .hp-shot,
.hp-slot .hp-wing-screen img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}
.hp-slot .hp-island{top:7%;}
.hp-slot .hp-island{top:1.1%;width:30%;height:1.9%;}
.hp-slot .hp-springboard{gap:7%;padding:9% 7%;}
.hp-cap{left:-24%;right:-24%;}

.hp-cap{gap:5px;}
.hero-stats{margin-bottom:34px;}


/* ---- Loop-Kopf zentriert, Texte größer ---- */
.loop-head{
  left:0;right:0;margin-inline:auto;max-width:760px;
  padding-inline:clamp(24px,4vw,64px);
  align-items:center;text-align:center;gap:9px;
}
.loop-head h2{font-size:clamp(28px,3.3vw,46px);}
.loop-desc{font-size:15px;line-height:1.5;max-width:52ch;}
@media (max-height:700px){.loop-desc{display:block;font-size:13.5px;}}

/* ---- Bildunterschriften: gegen die Slot-Skalierung zurueckgerechnet,
       damit Schriftgroessen echt sind und nichts kollidiert ---- */
.hp-cap{
  left:50%;right:auto;
  width:var(--cap-w,220%);
  top:calc(100% + var(--cap-gap,26px));
  text-align:center;
  align-items:center;
  transform-origin:top center;
  transform:translateX(-50%) scale(var(--cap-inv,1)) translateY(calc((1 - var(--cap-o,0)) * 8px));
  gap:7px;
}
.hc-head{justify-content:center;}
.hc-num{font-size:10.5px;padding:2px 7px;letter-spacing:.12em;}
.hc-name{font-size:15px;line-height:1.3;}
.hc-note{
  font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62);
  max-width:26ch;margin-inline:auto;
}

/* Mittelgeraet immer oben: waehrend der Ueberlappung sieht man nie hindurch */
#slotMid{z-index:3;}
#slotWL,#slotWR{z-index:1;}

/* ---- Kuerzere Scrollstrecke, gleicher Flow ---- */
.hero-scroll{height:300vh;}
@media (max-width:900px){.hero-scroll{height:260vh;}}
@media (prefers-reduced-motion: reduce){.hero-scroll{height:auto;}}

/* Loop-Kopf: kompakter, damit er nie in die Geraete laeuft */
.loop-head{top:clamp(14px,2.2vh,30px);max-width:680px;}
.loop-head h2{font-size:clamp(24px,2.7vw,38px);}
.loop-desc{font-size:14.5px;max-width:48ch;}
@media (max-height:760px){
  .loop-head h2{font-size:clamp(22px,2.2vw,30px);}
  .loop-desc{font-size:13px;}
  .hc-note{font-size:11.8px;}
}
@media (max-height:660px){.loop-desc{display:none;}}

/* Screens: Übergänge kommen aus dem Scroll, nicht aus einer CSS-Transition */
.hp-shot{transition:none;will-change:opacity;}


/* ---- Screens-Laufband: Lauf kommt aus JS (px-genau, keine Luecken) ---- */
.marquee-row.dir-left,
.marquee-row.dir-right{animation:none !important;transform:none;}
/* naeher an den dunklen Block darueber */
.hero-scroll + .section.full-bleed,
.section.full-bleed:has(.marquee-wrap){margin-top:0;padding-top:40px;padding-bottom:24px;}
.screens-inner-head{margin-bottom:6px;}


/* ============================================================
   Navigation folgt dem Hintergrund: dunkel und hell gleichzeitig
   --edge = Kante des dunklen Bereichs, gemessen im Element (samespot.js)
   ============================================================ */
body{background:#fff;--edge:0px;--edge-a:0px;--edge-b:0px;}

.topbar{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  padding-top:12px;
  z-index:120;
  pointer-events:none;
}
.topbar-inner{
  pointer-events:auto;
  position:relative;
  width:min(1180px, 100% - 32px);
  max-width:none;
  margin-inline:auto;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(27,23,20,.08);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 4px 24px rgba(27,23,20,.10), 0 1px 4px rgba(27,23,20,.06);
  background:linear-gradient(to bottom,
    #17140f 0, #17140f var(--tb-edge-a,0px),
    rgba(255,255,255,.82) var(--tb-edge-a,0px), rgba(255,255,255,.82) 100%);
}
.topbar-inner.all-dark{border-color:rgba(255,255,255,.16);box-shadow:0 4px 24px rgba(0,0,0,.28);}

/* kein Farb-Fading: die Zeilen kippen exakt an der Kante */
.topbar-left,.topbar-center,.topbar-lang,
.nav a,.nav .chapter,.nav .chapter .num,.nav-figma,.sidebar-footer,.custom-cursor{
  transition:none;
}
.topbar-left.on-dark{color:rgba(255,255,255,.72);}
.topbar-left.on-dark:hover{color:#fff;}
.topbar-center.on-dark{color:rgba(255,255,255,.92);}
.topbar-lang.on-dark{
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.2);
}

/* Sidebar: der Hintergrund kippt an der Kante, die Zeilen folgen einzeln */
.sidebar{
  top:76px;
  height:calc(100vh - 76px);
  border-right:1px solid rgba(27,23,20,.06);
  background:#ffffff;
}
.nav a.on-dark{color:rgba(255,255,255,.6);}
.nav a.on-dark:hover{color:#fff;background:rgba(255,255,255,.07);}
.nav a.on-dark.active{color:#ff7a52;background:rgba(255,255,255,.1);}
.nav .sub.on-dark{color:rgba(255,255,255,.45);}
.nav .sub.on-dark.active{color:#ff7a52;}
.nav .chapter.on-dark{color:rgba(255,255,255,.42);}
.nav .chapter.on-dark .num{color:rgba(255,255,255,.34);}
.nav-figma.on-dark{
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}
.sidebar-footer.on-dark{color:rgba(255,255,255,.38);border-top-color:rgba(255,255,255,.1);}

/* Loop-Kopf unter der Glas-Pille */
.loop-head{top:clamp(84px,11vh,120px);}
@media (max-height:760px){
  .loop-head{top:72px;gap:6px;}
  .loop-desc{display:none;}
  .loop-head .btn-outline-dark{display:none;}
}
@media (max-height:640px){
  .hc-note{display:none;}
  .hc-name{font-size:14px;}
}

@media (pointer: fine){
  .custom-cursor.on-dark{background:#fff;border-color:#fff;}
  .custom-cursor.on-dark.hovering{background:rgba(255,255,255,.22);border-color:#fff;}
}

/* dunkler Grund bis unter die Leiste, solange der dunkle Block oben steht */
body.dark-behind{background:#17140f;}


/* ============================================================
   Kopfleiste wie auf der Portfolio-Startseite:
   schwebende, zentrierte Glas-Kapsel (Werte aus index2.html)
   ============================================================ */
.topbar{padding-top:18px;}
.topbar-inner{
  width:max-content;
  max-width:calc(100vw - 32px);
  height:auto;
  padding:7px 9px;
  gap:6px;
  border-radius:999px;
  border:0;
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  backdrop-filter:saturate(180%) blur(28px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,
             0 0 0 1px rgba(0,0,0,.06),
             0 14px 40px -14px rgba(0,0,0,.26);
  background:linear-gradient(to bottom,
    #17140f 0, #17140f var(--tb-edge-a,0px),
    rgba(255,255,255,.62) var(--tb-edge-a,0px), rgba(255,255,255,.62) 100%);
}
.topbar-inner.all-dark{
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,
             0 0 0 1px rgba(255,255,255,.1),
             0 14px 40px -14px rgba(0,0,0,.6);
}
.topbar-left,.topbar-center{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-size:13.5px;font-weight:500;letter-spacing:-.011em;
  color:#0a0a0a;
}
.topbar-left{color:rgba(10,10,10,.62);}
.topbar-left:hover{background:rgba(0,0,0,.05);color:#0a0a0a;transform:none;}
.topbar-left svg{width:14px;height:14px;}
.topbar-center{background:rgba(0,0,0,.05);color:#0a0a0a;font-weight:600;}
.topbar-lang{
  padding:6px 12px;border-radius:999px;border:0;
  background:transparent;color:rgba(10,10,10,.62);
  font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.topbar-lang:hover{background:rgba(0,0,0,.05);color:#0a0a0a;transform:none;}

/* dunkle Haelfte der Kapsel */
.topbar-left.on-dark{color:rgba(255,255,255,.66);}
.topbar-left.on-dark:hover{background:rgba(255,255,255,.1);color:#fff;}
.topbar-center.on-dark{background:rgba(255,255,255,.12);color:#fff;}
.topbar-lang.on-dark{background:transparent;border:0;color:rgba(255,255,255,.66);}
.topbar-lang.on-dark:hover{background:rgba(255,255,255,.1);color:#fff;}

.sidebar{top:70px;height:calc(100vh - 70px);}
@media (max-width:640px){
  .topbar-center{display:none;}
}


/* Trennstriche und Sprungpunkte in der Kapsel */
.topbar-div{
  width:1px;height:18px;flex:0 0 1px;
  background:rgba(10,10,10,.12);
}
.topbar-div.on-dark{background:rgba(255,255,255,.16);}
.topbar-jump{
  padding:6px 12px;border-radius:999px;
  font-size:13.5px;font-weight:500;letter-spacing:-.011em;
  color:rgba(10,10,10,.62);white-space:nowrap;
}
.topbar-jump:hover{background:rgba(0,0,0,.05);color:#0a0a0a;}
.topbar-jump.on-dark{color:rgba(255,255,255,.66);}
.topbar-jump.on-dark:hover{background:rgba(255,255,255,.1);color:#fff;}
@media (max-width:860px){.topbar-jump,.topbar-div{display:none;}}


/* Markenblock in der Kapsel: Logo + Name, Aufbau wie auf der Startseite */
/* Werte 1:1 aus index2.html (Zeile 23-25) */
.topbar-brand{
  display:flex;align-items:center;gap:9px;
  height:46px;padding:0 14px 0 11px;border-radius:16px;
  color:#0A0A0A;text-decoration:none;
  transition:transform .2s cubic-bezier(.22,1,.36,1), background .2s ease;
}
.topbar-brand:hover{background:#F0F0F2;color:#0A0A0A;}
.topbar-brand:active{transform:scale(.94);}
.topbar-mark{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#248453 0%,#14562F 100%);
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-0.02em;
}
.topbar-name{
  font-size:14.5px;font-weight:600;letter-spacing:-0.025em;white-space:nowrap;
}
.topbar-brand.on-dark{color:#fff;}
.topbar-brand.on-dark:hover{background:rgba(255,255,255,.12);color:#fff;}
@media (max-width:640px){.topbar-name{display:none;}}

/* Kapsel folgt der Hoehe des Markenblocks */
.topbar-inner{padding:6px 8px;}
.topbar-left,.topbar-center,.topbar-lang,.topbar-jump{height:46px;}
.topbar-div{height:22px;}


/* ============================================================
   Uebergang dunkel -> hell (final)
   - dunkler Block: volle Viewport-Breite, Inhalt mittig
   - Kapsel oben: immer helles Glas
   - linke Navigation: schwebende Glas-Kapsel, vertikal zentriert,
     blendet erst mit "Alle 14 Screens" ein
   ============================================================ */
:root{--nav-gutter:236px;}

.topbar-inner{position:relative;background:rgba(255,255,255,.62);}

/* Navigation aus dem Fluss nehmen -> der dunkle Block ist echt mittig */
.sidebar{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%) translateX(-10px);
  width:204px;flex:none;
  height:auto;max-height:min(74vh,620px);
  padding:14px 12px 12px 32px;
  border:0;border-right:0;
  border-radius:0 24px 24px 0;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  backdrop-filter:saturate(180%) blur(28px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,
             0 0 0 1px rgba(0,0,0,.06),
             0 18px 50px -18px rgba(0,0,0,.28);
  overflow:hidden;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .34s cubic-bezier(.22,1,.36,1);
  z-index:90;
}
body.side-on .sidebar{
  opacity:1;
  transform:translateY(-50%) translateX(0);
  pointer-events:auto;
}
.nav{overflow-y:auto;scrollbar-width:none;min-height:0;}
.nav::-webkit-scrollbar{display:none;}

/* iOS-Touch: Zeilen als Pillen, Druckpunkt mit Feder */
.nav a{
  border-radius:10px;
  transition:background .2s ease, color .2s ease,
             transform .2s cubic-bezier(.22,1,.36,1);
}
.nav a:active{transform:scale(.96);}
.nav a.active{background:rgba(0,0,0,.05);}
.nav-figma{
  border-radius:12px;
  transition:background .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.nav-figma:active{transform:scale(.96);}

/* Inhaltsspalte haelt dauerhaft Platz frei -> kein Sprung beim Einblenden */
main{padding-left:var(--nav-gutter);}
.hero-scroll{
  margin-left:calc(-1 * var(--nav-gutter));
  width:calc(100% + var(--nav-gutter));
}
.sidebar .nav-figma{margin:8px 0 0;}
@media (max-width:1080px){:root{--nav-gutter:200px;} .sidebar{left:0;width:180px;}}
@media (max-width:860px){:root{--nav-gutter:0px;} .sidebar{display:none;}}
@media (prefers-reduced-motion: reduce){.sidebar{transition:none;}}


/* dunkler Block endet frueher -> die Seite wird zeitiger hell */
.hero-scroll{height:210vh;}
@media (max-width:900px){.hero-scroll{height:190vh;}}
@media (prefers-reduced-motion: reduce){.hero-scroll{height:auto;}}

.hero-scroll{height:140vh;}
@media (max-width:900px){.hero-scroll{height:130vh;}}
@media (prefers-reduced-motion: reduce){.hero-scroll{height:auto;}}


/* harter Schnitt: dunkler Block endet frueh, danach sofort hell */
.hero-scroll{height:105vh;}
@media (max-width:900px){.hero-scroll{height:100vh;}}
@media (prefers-reduced-motion: reduce){.hero-scroll{height:auto;}}

/* Navigation: nie scrollbar, alles immer sichtbar -> Groessen folgen der Fensterhoehe */
.sidebar{
  max-height:none;
  height:auto;
  padding:clamp(9px,1.5vh,14px) 12px clamp(8px,1.3vh,12px) 32px;
  overflow:visible;
}
.nav{
  overflow:visible;
  mask-image:none;-webkit-mask-image:none;
}
.nav::after{display:none;}
.sidebar[data-nav-overflow="1"] .nav{mask-image:none;-webkit-mask-image:none;}
.nav a{
  padding:clamp(2px,.42vh,4px) 9px;
  font-size:clamp(10.4px,1.12vh,12.2px);
  line-height:1.22;
}
.nav .sub{font-size:clamp(9.8px,1.04vh,11.4px);}
.nav .chapter{
  margin-top:clamp(3px,.6vh,7px);
  font-size:clamp(10.2px,1.06vh,11.6px);
}
.nav-figma{
  margin:clamp(5px,.9vh,9px) 0 0;
  padding:clamp(5px,.8vh,8px) 9px;
  font-size:clamp(10px,1.02vh,11.4px);
}
.sidebar-footer{
  margin-top:clamp(5px,.8vh,9px);
  padding-top:clamp(5px,.8vh,9px);
  font-size:clamp(9.4px,.96vh,10.8px);
}


/* Sequenz braucht Strecke: ~85vh Fortschritt, danach harter Schnitt ins Helle */
.hero-scroll{height:185vh;}
@media (max-width:900px){.hero-scroll{height:170vh;}}
@media (prefers-reduced-motion: reduce){.hero-scroll{height:auto;}}

/* full-bleed bleibt full-bleed trotz Navigations-Gutter */
.section.full-bleed{
  margin-left:calc(-1 * var(--nav-gutter));
  width:calc(100% + var(--nav-gutter));
}


/* Nav-Typografie erreicht ihre Zielgroesse auf normalen Fensterhoehen */
.nav a{font-size:clamp(10.4px,1.45vh,12.6px);padding:clamp(2px,.52vh,4.5px) 9px;}
.nav .sub{font-size:clamp(9.8px,1.35vh,11.8px);}
.nav .chapter{font-size:clamp(10.2px,1.36vh,12px);margin-top:clamp(3px,.75vh,8px);}
.nav-figma{font-size:clamp(10px,1.3vh,11.8px);}
.sidebar-footer{font-size:clamp(9.4px,1.24vh,11.2px);}


/* Der dunkle Block blendet aus, sobald das Screens-Laufband hereinkommt */
/* die dunkle Buehne ist EINE Ebene: Grund bleibt dunkel, die Gruppe blendet aus */
.hero-stage{
  background:#17140f;
  opacity:var(--stage-fade,1);
  will-change:opacity;
  isolation:isolate;
}
/* Sequenzwerte gelten nur innerhalb der Gruppe */
.hero-copy{opacity:var(--copy-o,1);}
.loop-head{opacity:var(--loop-o,0);}
.hp-cap{opacity:var(--cap-o,0);}
.beat-pills{opacity:var(--beats-o,1);}
.hero-hint{opacity:var(--hint-o,1);}
.hp-glow{opacity:var(--glow-o,0);}
body{background:#ffffff;}
body.dark-behind{background:color-mix(in oklab, #ffffff, #17140f calc(var(--stage-fade,1) * 100%));}


/* Nav lesbar auch auf kurzen Fenstern: Minimum hoch, Abstaende kuerzer */
.nav a{font-size:clamp(12px,1.45vh,12.6px);padding:clamp(1px,.4vh,4.5px) 9px;}
.nav .sub{font-size:clamp(11.5px,1.35vh,11.8px);}
.nav .chapter{font-size:clamp(11.5px,1.36vh,12px);margin-top:clamp(2px,.6vh,8px);}
.nav-figma{font-size:clamp(11.5px,1.3vh,11.8px);padding:clamp(4px,.7vh,8px) 9px;}
.sidebar-footer{font-size:clamp(11px,1.24vh,11.2px);}


/* ================= 01 WIDERSPRUCH — Beweiskette ================= */
.chain{margin-top:52px;display:grid;gap:0;}
.chain-step{
  display:grid;grid-template-columns:64px 1fr;gap:28px;padding:38px 0;position:relative;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease-ios,cubic-bezier(.22,.61,.36,1)), transform .7s var(--ease-ios,cubic-bezier(.22,.61,.36,1));
}
.chain-step.in{opacity:1;transform:none;}
.chain-step + .chain-step{border-top:1px solid rgba(27,23,20,.09);}
.chain-rail{display:flex;flex-direction:column;align-items:center;gap:12px;}
.chain-num{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  background:#fff;border:1px solid rgba(27,23,20,.1);color:var(--ink-35,rgba(27,23,20,.5));
  box-shadow:0 2px 8px rgba(27,23,20,.05);
}
.chain-step:last-child .chain-num{background:var(--sage,#e8785a);border-color:var(--sage,#e8785a);color:#fff;box-shadow:0 6px 16px rgba(232,120,90,.3);}
.chain-line{width:1px;flex:1;background:linear-gradient(rgba(27,23,20,.14),rgba(27,23,20,0));}
.chain-step:last-child .chain-line{display:none;}
.chain-body{padding-top:2px;}
.chain-kicker{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-35,rgba(27,23,20,.35));margin-bottom:12px;
}
.chain-body p.say{font-size:24px;line-height:1.45;color:var(--ink,#1b1714);margin:0;text-wrap:pretty;letter-spacing:-.01em;}
.chain-body p.after{margin:14px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-55,rgba(27,23,20,.58));text-wrap:pretty;max-width:60ch;}
.chain .figrow{display:flex;flex-wrap:wrap;gap:44px;margin-top:22px;}
.chain .fig{display:flex;flex-direction:column;gap:4px;}
.chain .fig b{font-size:46px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--sage-hover,#b23a1f);}
.chain .fig b u{text-decoration:none;font-size:20px;color:var(--ink-35,rgba(27,23,20,.35));}
.chain .fig span{font-size:12.5px;color:var(--ink-55,rgba(27,23,20,.5));line-height:1.4;max-width:22ch;}
.chain .dot-grid{margin:20px 0 22px;}
.chain .pull{
  margin-top:6px;background:#fff;border:1px solid rgba(27,23,20,.06);border-radius:24px;
  padding:26px 28px;box-shadow:0 10px 26px -14px rgba(27,23,20,.22);max-width:64ch;
}
.chain .pull q{display:block;font-style:italic;font-size:19px;line-height:1.5;color:var(--ink,#1b1714);quotes:none;text-wrap:pretty;}
.chain .pull .src{display:block;margin-top:12px;font-size:12px;letter-spacing:.05em;color:var(--ink-35,rgba(27,23,20,.42));}
.chain .verdict{margin-top:20px;border-radius:26px;background:var(--ink,#1b1714);color:#fff;padding:34px;}
.chain .verdict p{margin:0;font-size:23px;line-height:1.45;text-wrap:pretty;letter-spacing:-.01em;}
.chain .verdict p em{font-style:italic;color:#ff7a52;}
.chain .verdict .foot{margin-top:16px;font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.03em;}

@media (max-width:820px){
  .chain-step{grid-template-columns:40px 1fr;gap:18px;padding:30px 0;}
  .chain-num{width:28px;height:28px;font-size:11px;}
  .chain-body p.say{font-size:20px;}
  .chain .figrow{gap:26px;}
  .chain .fig b{font-size:36px;}
  .chain .verdict{padding:26px;}
  .chain .verdict p{font-size:19px;}
}
@media (prefers-reduced-motion:reduce){
  .chain-step{opacity:1;transform:none;transition:none;}
}


/* ================= Inhaltsspalte echt mittig =================
   Der Gutter wirkt nur noch als Mindestabstand zur schwebenden Navigation:
   sobald genug Platz da ist, faellt er auf 0 und die Spalte sitzt zentriert. */
:root{
  --nav-pad: clamp(0px, calc(var(--nav-gutter) - (100vw - var(--content-max) - 2 * var(--content-pad)) / 2), var(--nav-gutter));
}
main{padding-left:var(--nav-pad);}
.hero-scroll,
.section.full-bleed{
  margin-left:calc(-1 * var(--nav-pad));
  width:calc(100% + var(--nav-pad));
}
@media (max-width:860px){
  :root{--nav-pad:0px;}
  main{padding-left:0;}
  .hero-scroll,
  .section.full-bleed{margin-left:0;width:100%;}
}


/* ================= Ausklappbare Belege ================= */
.belege{
  margin-top:34px;border:1px solid var(--hairline,rgba(27,23,20,.1));border-radius:20px;
  background:#fff;overflow:hidden;
}
.belege > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;
}
.belege > summary::-webkit-details-marker{display:none;}
.belege-label{font-size:14px;font-weight:600;color:var(--ink,#1b1714);}
.belege-hint{font-size:12.5px;color:var(--ink-35,rgba(27,23,20,.42));letter-spacing:.02em;flex:1;}
.belege-chev{
  width:9px;height:9px;flex:0 0 auto;border-right:1.6px solid var(--ink-35,rgba(27,23,20,.45));
  border-bottom:1.6px solid var(--ink-35,rgba(27,23,20,.45));
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease-ios,cubic-bezier(.22,.61,.36,1));
}
.belege[open] .belege-chev{transform:rotate(-135deg) translateY(-2px);}
.belege > summary:hover .belege-label{color:var(--sage-hover,#b23a1f);}
.belege-body{padding:0 22px 22px;}
.belege-body .proof-grid{margin-top:0;}
.belege[open] .belege-body{animation:belegeIn .4s var(--ease-ios,cubic-bezier(.22,.61,.36,1)) both;}
@keyframes belegeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (max-width:860px){
  .belege-hint{display:none;}
}


/* ================= Muster: Motive laufen zusammen ================= */
.motiv-lede{margin-top:14px;max-width:62ch;}
.converge{margin-top:8px;}
.converge-out{
  border-radius:26px;background:var(--ink,#1b1714);color:#fff;padding:34px 36px;
}
.converge-kick{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:14px;
}
.converge-out p{margin:0;font-size:22px;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty;max-width:52ch;}
.converge-out .accent-italic{color:#ff7a52;font-style:italic;}

@media (max-width:900px){
  .motiv-row{grid-template-columns:1fr;gap:16px;padding:26px 0;}
  .motiv-id{flex-direction:row;align-items:center;gap:12px;}
  .motiv-count{max-width:none;}
  .motiv-main h4{font-size:22px;}
  .converge-lines{display:none;}
  .converge{margin-top:26px;}
  .converge-out{padding:26px;}
  .converge-out p{font-size:18px;}
}


/* ---- Konvergenz-Grafik: drei Ticks auf eine Sammelschiene ---- */
.converge-lines{
  position:relative;height:52px;margin:0 auto;
  --cl:rgba(27,23,20,.18);
}
.converge-lines span{position:absolute;background:var(--cl);}
.cl-tick{top:0;width:1px;height:20px;}
.cl-tick.a{left:16.66%;}
.cl-tick.b{left:50%;}
.cl-tick.c{left:83.33%;}
.cl-bar{
  top:20px;left:16.66%;right:16.66%;height:1px;width:auto;
  background:linear-gradient(90deg,rgba(27,23,20,0),var(--cl) 12%,var(--cl) 88%,rgba(27,23,20,0));
}
.cl-drop{top:20px;left:50%;width:1px;height:32px;
  background:linear-gradient(var(--cl),rgba(27,23,20,.35));}
@media (max-width:900px){
  .converge-lines{display:none;}
}


/* ================= Muster: breite typografische Baender ================= */
.motive{margin-top:36px;display:flex;flex-direction:column;gap:16px;container-type:inline-size;}
.motiv-band{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--hairline,rgba(27,23,20,.09));
  border-radius:24px;padding:34px 36px 30px;
  box-shadow:0 10px 26px -20px rgba(27,23,20,.3);
}
.motiv-ghost{
  position:absolute;top:-26px;right:14px;pointer-events:none;
  font-size:170px;line-height:1;font-weight:700;letter-spacing:-.04em;
  color:rgba(27,23,20,.045);
}
.motiv-head{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  position:relative;
}
.motiv-head h4{
  margin:0;font-size:clamp(21px,3cqi + 12px,32px);line-height:1.15;
  letter-spacing:-.02em;color:var(--ink,#1b1714);font-weight:600;
  text-wrap:pretty;hyphens:auto;
}
.motiv-count{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--sage-hover,#b23a1f);white-space:nowrap;
}
.motiv-say{
  position:relative;margin:14px 0 0;max-width:56ch;
  font-size:16.5px;line-height:1.6;color:var(--ink-55,rgba(27,23,20,.6));text-wrap:pretty;
}
.motiv-ev{
  position:relative;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(27,23,20,.08);
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.motiv-ev span{
  display:block;font-size:12.5px;line-height:1.5;
  color:var(--ink-55,rgba(27,23,20,.58));
}
.motiv-ev i{
  display:block;margin-top:5px;font-style:normal;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-35,rgba(27,23,20,.34));
}
@container (max-width:640px){
  .motiv-band{padding:26px 24px 24px;border-radius:20px;}
  .motiv-ghost{font-size:120px;top:-16px;}
  .motiv-ev{grid-template-columns:1fr;gap:14px;}
}
@supports not (container-type:inline-size){
  @media (max-width:1200px){
    .motiv-ev{grid-template-columns:1fr;gap:14px;}
  }
}

/* ---- Belege offen, direkt im Zweier-Grid ---- */
.belege-open{margin-top:40px;}
.belege-kick{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-35,rgba(27,23,20,.35));margin-bottom:4px;
}


/* ================= Kapitelkopf: Ziffer ueber dem Titel, zentriert ================= */
.chapter-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.chapter-num{
  font-size:clamp(46px,5.4vw,74px);font-weight:800;line-height:.8;letter-spacing:-.04em;
  color:var(--ink,#1b1714);
}
.chapter-rule{width:1px;height:26px;background:rgba(27,23,20,.2);}
.chapter-head > div{display:flex;flex-direction:column;align-items:center;gap:9px;}
.chapter-head h2{font-size:clamp(24px,3.4vw,36px);letter-spacing:-.022em;line-height:1.18;max-width:20ch;}
.chapter-head .eyebrow{color:var(--sage,#e8785a);}

.dark-chapter .chapter-num,
.ergebnis-wrap .chapter-num{color:#f7f3ec;}
.dark-chapter .chapter-rule,
.ergebnis-wrap .chapter-rule{background:rgba(247,243,236,.28);}
.dark-chapter .chapter-head,
.ergebnis-wrap .chapter-head{margin-inline:auto;}

@media (max-width:720px){
  .chapter-num{font-size:44px;}
}


/* ================= Deutlichere Trennung zwischen Unterbereichen ================= */
.sub-gap{
  margin-top:180px;
  padding-top:64px;
  border-top:1px solid var(--hairline,rgba(27,23,20,.1));
  position:relative;
}
.sub-gap::before{
  content:"";position:absolute;top:-1px;left:0;
  width:56px;height:3px;border-radius:2px;
  background:var(--sage,#e8785a);
}
.sub-gap .eyebrow{display:block;}
.dark-chapter .sub-gap,
.ergebnis-wrap .sub-gap{border-top-color:rgba(247,243,236,.18);}

/* enthaelt der Block selbst einen Kapitelkopf, markiert die chapter-divider den Wechsel */
.sub-gap:has(.chapter-head){border-top:none;padding-top:0;}
.sub-gap:has(.chapter-head)::before{display:none;}

/* Eyebrow im dunklen Kapitel bleibt hell */
.dark-chapter .chapter-head .eyebrow,
.ergebnis-wrap .chapter-head .eyebrow{color:rgba(247,243,236,.5);}

@media (max-width:860px){
  .sub-gap{margin-top:110px;padding-top:44px;}
}


/* ================= Markt: Positionierungsfeld ================= */
.field{
  margin-top:34px;border-radius:28px;overflow:hidden;
  background:var(--ink,#1b1714);
  box-shadow:0 26px 60px -34px rgba(27,23,20,.8);
}
.field-plot{
  position:relative;aspect-ratio:16/9;min-height:340px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  padding:52px 60px;gap:0;
  background-image:
    linear-gradient(rgba(247,243,236,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(247,243,236,.05) 1px,transparent 1px);
  background-size:44px 44px;background-position:center;
}
.field-quadrant{border:1px solid rgba(247,243,236,.09);position:relative;}
.q-tl{border-right:none;border-bottom:none;}
.q-tr{border-bottom:none;}
.q-bl{border-right:none;}
.q-tr.is-gap{
  border:1px dashed rgba(232,120,90,.5);
  background:radial-gradient(120% 120% at 70% 30%,rgba(232,120,90,.2),rgba(232,120,90,.03) 60%,transparent);
}
.gap-label{
  position:absolute;top:14px;right:16px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,120,90,.75);
}
.field-axis{
  position:absolute;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:rgba(247,243,236,.38);white-space:nowrap;
}
.y-top{top:20px;left:60px;}
.y-bot{bottom:20px;left:60px;}
.x-left{bottom:20px;left:50%;transform:translateX(-50%);display:none;}
.x-right{top:20px;right:60px;}
@media (min-width:900px){.x-left{display:block;bottom:20px;left:auto;right:auto;transform:none;left:60px;display:none;}}

.dot{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.dot i{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:rgba(247,243,236,.45);
}
.dot b{
  font-size:13.5px;font-weight:500;color:rgba(247,243,236,.62);letter-spacing:-.005em;
}
.dot.is-us i{width:13px;height:13px;background:var(--sage,#e8785a);box-shadow:0 0 0 4px rgba(232,120,90,.18);}
.dot.is-us b{font-size:16px;font-weight:700;color:#fff;}
.dot.is-us .ping{
  position:absolute;left:6px;top:50%;width:13px;height:13px;margin:-6px 0 0 -6px;
  border-radius:50%;border:1px solid rgba(232,120,90,.7);
  animation:fieldPing 3.2s cubic-bezier(.22,.61,.36,1) infinite;
}
.dot.is-us .ping.p2{animation-delay:1.6s;}
@keyframes fieldPing{
  0%{transform:scale(1);opacity:.75;}
  70%{transform:scale(5.5);opacity:0;}
  100%{transform:scale(5.5);opacity:0;}
}

.field-legend{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(247,243,236,.1);
}
.field-legend > div{
  padding:26px 28px;display:flex;flex-direction:column;gap:10px;
  border-right:1px solid rgba(247,243,236,.1);
}
.field-legend > div:last-child{border-right:none;}
.lg-num{font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(232,120,90,.8);}
.field-legend p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(247,243,236,.6);text-wrap:pretty;}
.field-legend p b{color:#fff;font-weight:600;}
.field-legend p i{font-style:italic;color:var(--sage-light,#f0a48c);}

@media (max-width:900px){
  .field-plot{aspect-ratio:4/5;padding:44px 26px;background-size:32px 32px;}
  .y-top,.y-bot{left:26px;}
  .x-right{right:26px;top:auto;bottom:20px;}
  .dot b{font-size:12px;white-space:normal;max-width:11ch;}
  .dot.is-us b{font-size:14px;}
  .field-legend{grid-template-columns:1fr;}
  .field-legend > div{border-right:none;border-bottom:1px solid rgba(247,243,236,.1);}
  .field-legend > div:last-child{border-bottom:none;}
}
@media (prefers-reduced-motion:reduce){
  .dot.is-us .ping{animation:none;opacity:0;}
}


/* ================= Persona: Portrait + Spannungsfeld ================= */
#persona{container-type:inline-size;}
.pers{
  margin-top:36px;
  display:grid;grid-template-columns:minmax(0,clamp(210px,32cqi,320px)) minmax(0,1fr);
  gap:36px;align-items:start;
}
.pers-shot{
  margin:0;position:relative;border-radius:26px;overflow:hidden;
  background:var(--ink,#1b1714);
  box-shadow:0 22px 54px -30px rgba(27,23,20,.65);
  aspect-ratio:4/5;
}
.pers-shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03);}
.pers-shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:60px 24px 22px;
  display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(transparent,rgba(16,13,11,.9) 62%);
}
.pers-role{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-light,#f0a48c);margin-bottom:4px;
}
.pers-name{font-size:26px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.1;}
.pers-meta{font-size:12.5px;color:rgba(247,243,236,.6);letter-spacing:.01em;}

.pers-body{display:flex;flex-direction:column;gap:26px;}
.pers-quote{margin:0;padding:0 0 0 22px;border-left:2px solid var(--sage,#e8785a);}
.pers-quote q{
  display:block;quotes:none;font-style:italic;
  font-size:clamp(18px,4cqi,25px);line-height:1.42;letter-spacing:-.015em;
  color:var(--ink,#1b1714);text-wrap:pretty;
}
.pers-quote cite{
  display:block;margin-top:12px;font-style:normal;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-35,rgba(27,23,20,.38));
}

.pers-body{container-type:inline-size;}
.pers-tension{
  display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;
  background:#fff;border:1px solid var(--hairline,rgba(27,23,20,.09));
  border-radius:22px;padding:26px 24px;
  box-shadow:0 10px 26px -22px rgba(27,23,20,.4);
}
.pt-side{display:flex;flex-direction:column;gap:12px;}
.pt-kick{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-35,rgba(27,23,20,.4));
}
.pt-want .pt-kick{color:var(--sage-hover,#b23a1f);}
.pt-side ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.pt-side li{
  font-size:14px;line-height:1.5;color:var(--ink-55,rgba(27,23,20,.62));
  padding-left:15px;position:relative;text-wrap:pretty;
}
.pt-side li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:rgba(27,23,20,.22);
}
.pt-want li::before{background:var(--sage,#e8785a);}
.pt-vs{display:flex;flex-direction:column;align-items:center;gap:10px;}
.pt-vs span{width:1px;flex:1;background:rgba(27,23,20,.12);}
.pt-vs b{
  font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-35,rgba(27,23,20,.32));writing-mode:vertical-rl;
}

.pers-need{
  border-radius:22px;background:var(--ink,#1b1714);color:#fff;padding:28px 30px;
}
.pn-kick{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:12px;
}
.pers-need p{margin:0;font-size:clamp(17px,3.4cqi,22px);line-height:1.4;letter-spacing:-.01em;text-wrap:pretty;}
.pers-need .accent-italic{color:#ff7a52;font-style:italic;}

@container (max-width:640px){
  .pers{grid-template-columns:1fr;gap:26px;}
  .pers-shot{aspect-ratio:3/2;}
  .pers-shot figcaption{padding:48px 20px 18px;}
}
@container (max-width:420px){
  .pers-tension{grid-template-columns:1fr;gap:20px;padding:22px;}
  .pt-vs{flex-direction:row;gap:12px;}
  .pt-vs span{width:auto;height:1px;flex:1;}
  .pt-vs b{writing-mode:horizontal-tb;}
}
@supports not (container-type:inline-size){
  @media (max-width:1200px){
    .pers{grid-template-columns:1fr;gap:26px;}
    .pers-shot{aspect-ratio:3/2;}
    .pers-tension{grid-template-columns:1fr;gap:20px;padding:22px;}
    .pt-vs{flex-direction:row;gap:12px;}
    .pt-vs span{width:auto;height:1px;flex:1;}
    .pt-vs b{writing-mode:horizontal-tb;}
  }
}


/* ================= Mechanik: Spaltenbreite statt Fensterbreite ================= */
#mechanik{container-type:inline-size;}

@container (max-width:760px){
  .concept-grid{grid-template-columns:1fr;}
  .fidelity{grid-template-columns:1fr;gap:32px;}
  .loop-rail{grid-template-columns:1fr;gap:30px;}
  .loop-marker{margin-bottom:14px;}
  .loop-marker::after{margin-right:0;}
  .loop-node:last-child .loop-marker::after{background:var(--ink-14);}
  .loop-node h4,
  .loop-node p{padding-right:0;}
}
@container (max-width:520px){
  .loop-caption{margin-top:24px;}
  .ia-grid{grid-template-columns:1fr;}
}


/* ================= Zeilenumbruch: aesthetisch statt zufaellig ================= */
h1, h2, h3, h4,
.h2-xl, .say, .lede, .quote-lead, .motiv-title, .pers-need p,
.chain .verdict p, .converge-out p, .fid-title, .loop-node h4,
.concept-card h4, .feature-item h4, .safety-item h4, .ia-caption,
.loop-caption, .hint, .ba-caption p{
  text-wrap:balance;
}
p, li, .fid-note, .concept-why, .loop-node p, .after{
  text-wrap:pretty;
}
/* Kurze Kapitelzeile bleibt einzeilig, solange die Spalte es hergibt */
#widerspruch{container-type:inline-size;}
.chapter-head h2.h2-oneline{
  white-space:nowrap;
  max-width:none;
  font-size:min(2rem, calc(6.1cqi - 2px));
  letter-spacing:-.015em;
}
@container (max-width:340px){
  .chapter-head h2.h2-oneline{white-space:normal;max-width:20ch;font-size:1.35rem;}
}
@supports not (container-type:inline-size){
  @media (max-width:900px){.chapter-head h2.h2-oneline{white-space:normal;max-width:20ch;font-size:1.55rem;}}
}


/* Optischer Ausgleich: das oeffnende Anfuehrungszeichen haengt aus */
.chapter-head h2.h2-oneline{text-indent:-.34em;}
@container (max-width:340px){
  .chapter-head h2.h2-oneline{text-indent:0;}
}

/* Kette als eigener Unterbereich mit Marke, aber ohne den grossen Vorlauf */
.chain.sub-gap{padding-top:52px;}
.chain.sub-gap > .chain-step:first-child{margin-top:0;}

/* ================= Persona: Portrait fuellt die linke Spalte ================= */
.pers{align-items:stretch;}
.pers-shot{
  aspect-ratio:auto;
  height:100%;
  min-height:100%;
  border-radius:10px;
}
.pers-shot img{height:100%;object-position:center 22%;}
@container (max-width:640px){
  .pers-shot{aspect-ratio:3/2;height:auto;min-height:0;}
}
@supports not (container-type:inline-size){
  @media (max-width:1200px){
    .pers-shot{aspect-ratio:3/2;height:auto;min-height:0;}
  }
}


/* ---- Markt: flacheres Positionierungsfeld ---- */
.field-plot{aspect-ratio:2/1;min-height:300px;padding:44px 56px;}
@media (max-width:900px){
  .field-plot{aspect-ratio:4/5;min-height:340px;padding:44px 26px;}
}

/* ---- Loop: durchgehende Linie, sauber an den Punkten ---- */
.loop-marker::after{
  margin-left:12px;
  margin-right:-40px;
  background:var(--ink-14);
}
.loop-node:last-child .loop-marker::after{
  margin-right:0;
  background:linear-gradient(to right,var(--ink-14) 0 40%,transparent 100%);
}

/* ---- Loop-Fazit: eine Zeile ---- */
.loop-caption{
  white-space:nowrap;
  max-width:none;
  text-wrap:nowrap;
}
@container (max-width:420px){
  .loop-caption{white-space:normal;text-wrap:balance;}
}


/* ---- Loop gestapelt: senkrechte Verbindung statt langer Querlinien ---- */
@container (max-width:760px){
  .loop-rail{gap:0;}
  .loop-node{padding-left:52px;padding-bottom:30px;position:relative;}
  .loop-node:last-child{padding-bottom:0;}
  .loop-marker{position:static;height:auto;margin-bottom:8px;}
  .loop-marker::after{display:none;}
  .loop-dot{position:absolute;left:0;top:0;}
  .loop-node::before{
    content:"";position:absolute;left:17px;top:40px;bottom:-6px;
    width:1px;background:var(--ink-14);
  }
  .loop-node:last-child::before{display:none;}
  .loop-node h4{min-height:34px;display:flex;align-items:center;}
}
@supports not (container-type:inline-size){
  @media (max-width:1000px){
    .loop-rail{gap:0;}
    .loop-node{padding-left:52px;padding-bottom:30px;position:relative;}
    .loop-node:last-child{padding-bottom:0;}
    .loop-marker{position:static;height:auto;margin-bottom:8px;}
    .loop-marker::after{display:none;}
    .loop-dot{position:absolute;left:0;top:0;}
    .loop-node::before{
      content:"";position:absolute;left:17px;top:40px;bottom:-6px;
      width:1px;background:var(--ink-14);
    }
    .loop-node:last-child::before{display:none;}
    .loop-node h4{min-height:34px;display:flex;align-items:center;}
  }
}


/* ---- Loop gestapelt: Ziffer und Titel auf einer Achse ---- */
@container (max-width:760px){
  .loop-marker{margin-bottom:0;}
  .loop-node h4{min-height:34px;margin-bottom:8px;}
}
@supports not (container-type:inline-size){
  @media (max-width:1000px){
    .loop-marker{margin-bottom:0;}
    .loop-node h4{min-height:34px;margin-bottom:8px;}
  }
}

.loop-node h4{margin-top:0;}


/* ================= Constraints: Schlussmoment ================= */
.limits{
  margin-top:8px;
  background:var(--ink,#1b1714);
  color:#fff;
  border-radius:28px;
  padding:clamp(28px,4cqi,44px) clamp(28px,4.4cqi,52px);
  box-shadow:0 30px 70px -40px rgba(27,23,20,.8);
}
.limits .eyebrow{display:block;color:var(--sage-light,#f0a48c);}
.limits-title{
  margin:8px 0 0;
  font-size:19.5px;font-weight:800;line-height:1.3;letter-spacing:-.005em;
  color:#fff;white-space:nowrap;
}
.limits-title .accent-italic{color:#ff7a52;font-style:italic;}
.limits-lede{
  margin:14px 0 0;max-width:56ch;
  font-size:14.5px;line-height:1.55;color:rgba(247,243,236,.6);
}

.limit-rail{
  margin-top:clamp(20px,3cqi,28px);
  display:flex;flex-direction:column;
}
.limit{
  display:flex;gap:16px;
  padding:14px 0;border-top:1px solid rgba(247,243,236,.1);
}
.limit:first-child{border-top:none;}
.limit-num{
  flex:none;padding-top:2px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:rgba(247,243,236,.4);
}
.limit-body{min-width:0;}
.limit-body h4{
  margin:0 0 6px;
  font-family:var(--body);font-weight:700;
  font-size:14.5px;line-height:1.3;color:#fff;
}
.limit-line{
  margin:0;font-size:13px;line-height:1.55;
  color:rgba(247,243,236,.6);max-width:64ch;
}
.limit-arrow{color:rgba(255,122,82,.8);padding:0 2px;}
.limits-close{
  margin:clamp(20px,3cqi,28px) 0 0;
  padding-top:18px;border-top:1px solid rgba(247,243,236,.14);
  font-size:15px;line-height:1.45;letter-spacing:-.01em;
  color:#fff;max-width:48ch;text-wrap:balance;
}

#werkstatt{container-type:inline-size;}


/* ================= Kapitel 03: Testaufbau ================= */
.method-strip{
  margin-top:40px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(247,243,236,.16);
}
.method-strip > div{
  padding:20px 22px 0 0;
  display:flex;flex-direction:column;gap:7px;
  border-right:1px solid rgba(247,243,236,.12);
}
.method-strip > div + div{padding-left:22px;}
.method-strip > div:last-child{border-right:none;padding-right:0;}
.method-strip span{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(232,120,90,.85);
}
.method-strip b{
  font-size:14.5px;font-weight:600;line-height:1.45;color:rgba(247,243,236,.88);
  text-wrap:pretty;
}

/* ================= Kapitel 03: Beobachtung vs. Deutung ================= */
#im-interface{container-type:inline-size;}
.findings-log{margin-top:32px;}
.finding-row{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  padding:16px 0;border-top:1px solid var(--hairline);
}
.finding-row:last-child{border-bottom:1px solid var(--hairline);}
.fl-num{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-35);flex:none;}
.fl-obs{font-size:13.5px;line-height:1.55;color:var(--ink-55);flex:1 1 320px;}
.fl-fix{font-size:12px;font-weight:600;color:var(--sage,#e8785a);flex:1 0 100%;}

/* ---- Belege ---- */
.evidence{
  margin-top:44px;
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:26px;align-items:start;
}
.evidence-shot{margin:0;}
.evidence-shot img{
  display:block;width:100%;border-radius:14px;
  border:1px solid var(--hairline);background:#fbfbfa;
}
.evidence-shot.wide img{aspect-ratio:16/10;object-fit:cover;object-position:top left;}
.evidence-shot.is-empty img{
  opacity:0;
}
.evidence-shot.is-empty{
  background:repeating-linear-gradient(135deg,#f2eee6 0 12px,#ece7dd 12px 24px);
  border-radius:14px;
}
.evidence-shot figcaption{
  margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink-35);
}

/* ---- Eingestaendnis ---- */
.admission{
  margin-top:44px;padding:34px 36px;
  background:#fff;border:1px solid var(--hairline);border-radius:22px;
}
.admission-line{
  margin:0;font-size:clamp(22px,4cqi,32px);line-height:1.28;letter-spacing:-.018em;
  color:var(--ink,#1b1714);text-wrap:balance;
}
.admission-line .accent-italic{color:var(--sage,#e8785a);font-style:italic;}
.admission-note{
  margin:18px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-55);max-width:62ch;
}
.admission-bridge{
  display:flex;align-items:center;gap:12px;margin:28px 0;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-35);
}
.admission-bridge span{flex:1;height:1px;background:var(--hairline);}
.admission-bridge span:first-child{flex:0 0 24px;}
.admission-consequence{
  margin:0;font-size:15.5px;line-height:1.62;color:var(--ink,#1b1714);max-width:62ch;
}
.admission-limit{
  margin:20px 0 0;padding-top:16px;border-top:1px solid var(--hairline);
  font-size:13px;line-height:1.55;color:var(--ink-35);
}

/* ---- Der Sprung Mid-Fi zu Final ---- */
.jump{
  margin-top:56px;padding:34px;
  border:1px solid var(--hairline);border-radius:20px;background:#fff;
  max-width:68ch;
}
.jump-text h4{
  margin:10px 0 14px;font-family:var(--body);font-weight:700;
  font-size:19px;line-height:1.32;color:var(--ink-90);max-width:26ch;
}
.jump-text p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-55);max-width:56ch;}
.jump-text p + p{margin-top:12px;}
.jump-pair{display:flex;align-items:center;gap:16px;}
.jump-pair figure{margin:0;width:132px;}
.jump-shot{position:relative;aspect-ratio:337/681;}
.jump-screen{
  position:absolute;inset:var(--pf-inset-y) var(--pf-inset-x);
  overflow:hidden;border-radius:var(--pf-radius);
  background:#fbfbfa;
}
.jump-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.jump-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.jump-pair figcaption{
  margin-top:9px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink-35);text-align:center;
}
.jump-arrow{font-size:18px;color:var(--ink-14);}

@container (max-width:760px){
  .evidence{grid-template-columns:1fr;}
  .evidence-shot:first-child{max-width:220px;}
}
@media (max-width:900px){
  .method-strip{grid-template-columns:1fr 1fr;gap:0;}
  .method-strip > div{border-right:none;padding-left:0 !important;padding-bottom:18px;}
  .method-strip > div:nth-child(odd){border-right:1px solid rgba(247,243,236,.12);padding-right:22px;}
  .method-strip > div:nth-child(even){padding-left:22px !important;}
}
/* ---- Kapitel 03: dunkler Kopfblock komplett zentriert ---- */
.dark-chapter{text-align:center;}
.dark-chapter .quote-lead,
.dark-chapter .lede{margin-left:auto;margin-right:auto;}
.dark-chapter .lede{
  font-size:15px;
  line-height:1.65;
  max-width:none;
  text-wrap:balance;
  margin-top:34px;
}
.dark-chapter .dark-quote{
  margin:22px auto 0;
  max-width:44ch;
}
.dark-chapter .dark-quote .quote-lead{
  font-size:14.5px;
  font-weight:500;
  font-style:italic;
  line-height:1.55;
  color:rgba(247,243,236,.5);
  max-width:none;
  margin:0;
}
.dark-chapter .dark-quote .quote-source{
  margin-top:8px;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(247,243,236,.56);
}
.dark-chapter .method-strip{text-align:center;}
.dark-chapter .method-strip > div{
  align-items:center;
  padding:20px 22px 0;
}
.dark-chapter .method-strip > div + div{padding-left:22px;}
.dark-chapter .method-strip > div:last-child{padding-right:22px;}

@media (max-width:560px){
  .method-strip{grid-template-columns:1fr;}
  .method-strip > div:nth-child(odd){border-right:none;padding-right:0;}
  .method-strip > div:nth-child(even){padding-left:0 !important;}
}


/* ================= UI-System: Schaufenster-Fassung ================= */
.uisys-why{
  font-size:13.5px;line-height:1.6;color:var(--ink-55);
  max-width:62ch;margin:-6px 0 18px;
}
.main-swatch-grid .ms-use{font-size:11.8px;line-height:1.5;color:var(--ink-55);}
.main-swatch .main-chip{height:88px;}

.type-specimen{
  border-top:1px solid var(--ink-14);
  margin-bottom:34px;
}
.type-specimen .ts-row{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--ink-08);
}
.type-specimen .ts-line{margin:0;color:var(--ink);text-wrap:pretty;}
.type-specimen .ts-meta{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-35);white-space:nowrap;
}

.baustein-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px;
}
.baustein-single{
  padding-top:22px;border-top:1px solid var(--ink-08);
}
.baustein-single img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-tile);
}

@media (max-width:640px){
  .type-specimen .ts-row{grid-template-columns:1fr;gap:8px;}
}


/* ================= Arbeitsweise: KI gegen mich ================= */
.ki-card{
  margin-top:30px;background:#fff;border:1px solid var(--hairline);
  border-radius:22px;padding:6px 32px;
}
.ki-timeline{padding:14px 0;}
.ki-tl-row{display:flex;gap:16px;}
.ki-tl-rail{width:16px;flex:none;display:flex;flex-direction:column;align-items:center;}
.ki-tl-dot{width:7px;height:7px;border-radius:50%;background:var(--sage,#e8785a);flex:none;margin-top:22px;}
.ki-tl-rail-line{flex:1;width:1px;background:var(--hairline);margin-top:6px;}
.ki-tl-row:not(.is-last) .ki-tl-rail{position:relative;}
.ki-tl-row:not(.is-last) .ki-tl-rail::after{
  content:"";flex:1;width:1px;background:var(--hairline);margin-top:6px;
}
.ki-tl-body{flex:1;min-width:0;padding:18px 0;}
.ki-log-title{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.ki-log-arrow{color:var(--ink-35);padding:0 2px;}
.ki-tl-line{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink-55);}
.ki-tool{
  margin-left:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-55);border:1px solid var(--ink-14);border-radius:var(--r-pill,999px);
  padding:2px 9px;white-space:nowrap;
}
.ki-not{padding:22px 0 26px;border-top:1px solid var(--hairline);}

/* ================= Learnings ================= */
.learn-card{
  margin-top:30px;background:#fff;border:1px solid var(--hairline);
  border-radius:22px;padding:6px 22px;
}
.learn-row{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--hairline);}
.learn-row:first-child{border-top:none;}
.learn-num{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-35);flex:none;padding-top:2px;}
.learn-row p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-55);}
.ki-not p{font-size:13.5px;line-height:1.6;color:var(--ink-55);margin:8px 0 0;text-wrap:pretty;}
@media (max-width:820px){
  .ki-card{padding:6px 20px;}
}


/* ================= Über mich + Footer (Startseiten-Stil) ================= */
.lp-pill:hover{background:#0A0A0A;color:#fff;}
.lp-pill-solid:hover{background:#0A0A0A;color:#fff;}
.lp-social:hover{background:#fff;color:#0A0A0A;}
.lp-imprint:hover{color:#fff;}
.sidebar.is-hidden{opacity:0 !important;pointer-events:none !important;transition:opacity .25s ease;}
.nav-top{margin-bottom:14px;}

/* Kontakt-Button in der Topbar, 1:1 aus der Startseite */
.topbar-kontakt{
  display:flex;align-items:center;justify-content:center;
  height:46px;padding:0 20px;border-radius:16px;
  background:linear-gradient(135deg,#248453 0%,#14562F 100%);
  color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-0.01em;
  white-space:nowrap;text-decoration:none;
  box-shadow:0 2px 8px rgba(46,139,87,0.3);
  transition:transform .2s cubic-bezier(.22,1,.36,1), filter .2s ease;
}
.topbar-kontakt:hover{color:#fff;filter:brightness(1.08);}
.topbar-kontakt:active{transform:scale(.94);}

/* EN-Button exakt wie auf der Startseite (finale, gewinnende Regel) */
.topbar-lang{
  display:flex;align-items:center;justify-content:center;
  height:46px;width:46px;
  border:none;background:transparent;
  border-radius:16px;
  color:#6E6E73;
  font-size:13px;font-weight:600;letter-spacing:0.01em;
  font-family:inherit;cursor:pointer;
  padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s ease,color .2s ease;
}
.topbar-lang:hover{color:#0A0A0A;background:#F0F0F2;transform:none;}
.topbar-lang:active{transform:scale(.9);}


/* ============================================================
   sameSpot · Mobile-Layer
   Wird NACH samespot.css geladen und überschreibt nur, was auf
   Smartphones und kleinen Tablets anders sein muss.
   Breakpoints: 900px (Hero statisch), 860px (Nav-Sheet), 760px (Phone)
   ============================================================ */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:clip;}

/* Mobile Kapitel-Navigation: auf Desktop nie sichtbar */
.mnav-pill,.mnav-sheet,.mnav-backdrop{display:none;}


/* ============================================================
   1) HERO: Scroll-Animation aus, ruhiges statisches Layout
      (Phones schmal ODER Handy quer mit wenig Höhe)
   ============================================================ */
@media (max-width:900px), (pointer:coarse) and (max-height:520px){

  /* Kopfleiste schwebt fest über der Seite, kein weißer Streifen über dem Hero */
  .topbar{position:fixed;left:0;right:0;top:0;padding-top:10px;}

  .hero-scroll{height:auto !important;margin-bottom:0;}
  .hero-stage{
    position:relative;top:auto;height:auto;
    display:block;
    opacity:1 !important;
    padding:96px 20px 52px;
    border-radius:0 0 28px 28px;
  }
  body.dark-behind{background:#17140f !important;}

  .hero-grid{grid-template-columns:1fr;gap:0;}
  .hero-copy{
    max-width:100%;align-items:center;text-align:center;
    transform:none !important;opacity:1 !important;
  }
  .hero-copy .hero-title{text-align:center;font-size:clamp(46px,14vw,72px);}
  .hero-copy .hero-sub-wrap{align-items:center;text-align:center;}
  .hero-copy .hero-desc{font-size:16px;line-height:1.55;max-width:38ch;}
  .hero-copy .hero-principle{display:block;text-align:center;max-width:38ch;margin:4px auto 0;font-size:14px;}
  .hero-copy .hero-meta{justify-content:center;gap:10px 16px;}

  .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 18px;max-width:440px;margin:22px auto 0;text-align:left;
  }
  .hero-stats b{font-size:30px;}
  .hero-stats .hs-l{font-size:12.5px;-webkit-line-clamp:unset;display:block;overflow:visible;}

  /* Deko der Desktop-Sequenz weg */
  .hp-glow,.hero-beats,.hero-hint,.hp-springboard,.hp-gloss{display:none !important;}

  /* Loop-Kopf im Fluss */
  .loop-head{
    position:static;
    opacity:1 !important;transform:none !important;pointer-events:auto !important;
    max-width:560px;margin:52px auto 0;padding:40px 0 0;
    border-top:1px solid rgba(255,255,255,.12);
    align-items:center;text-align:center;
  }
  .loop-head h2{font-size:clamp(26px,7.4vw,34px);}
  .loop-desc{display:block !important;font-size:15px;}
  .loop-head .btn-outline-dark{display:inline-flex !important;align-items:center;min-height:44px;padding:0 20px;margin-top:8px;}

  /* Die drei Loop-Schritte als Liste */
  .hp-layer{
    position:relative;inset:auto;perspective:none;pointer-events:auto;
    display:grid;gap:26px;max-width:560px;margin:36px auto 0;
  }
  .hp-slot{
    position:relative;left:auto;top:auto;
    width:auto;aspect-ratio:auto;
    transform:none !important;opacity:1 !important;
    display:grid;grid-template-columns:116px minmax(0,1fr);gap:20px;align-items:center;
  }
  .hp-slot .hero-phone,
  .hp-slot .hp-wing{
    position:relative;inset:auto;width:100%;aspect-ratio:337/681;
    transform:none !important;opacity:1 !important;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
  }
  .hp-slot .hp-shot{opacity:1 !important;}
  .hp-slot .hp-island{transform:translateX(-50%) !important;}

  .hp-cap{
    position:static;width:auto !important;
    transform:none !important;opacity:1 !important;
    text-align:left;align-items:flex-start;gap:8px;
  }
  .hc-head{justify-content:flex-start;}
  .hc-name{font-size:16px;}
  .hc-note{display:block !important;max-width:none;margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.66);}
}

/* Tablet hochkant: drei Schritte nebeneinander */
@media (min-width:561px) and (max-width:900px){
  .hp-layer{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;gap:22px;}
  .hp-slot{grid-template-columns:1fr;justify-items:center;gap:18px;}
  .hp-slot .hero-phone,.hp-slot .hp-wing{width:min(100%,150px);}
  .hp-cap{align-items:center;text-align:center;}
  .hc-head{justify-content:center;}
  .hc-note{font-size:13px;}
}


/* ============================================================
   2) KAPITEL-NAVIGATION (ersetzt die Sidebar unter 860px)
   ============================================================ */
@media (max-width:860px){
  .mnav-pill{
    position:fixed;z-index:110;
    left:50%;bottom:calc(14px + env(safe-area-inset-bottom));
    transform:translate(-50%,16px);
    display:flex;align-items:center;gap:10px;
    max-width:calc(100vw - 140px);
    height:46px;padding:0 18px 0 8px;
    border:0;border-radius:999px;
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    backdrop-filter:saturate(180%) blur(24px);
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 0 0 1px rgba(0,0,0,.07),0 12px 30px -12px rgba(0,0,0,.3);
    font-family:var(--body);color:var(--ink);
    opacity:0;pointer-events:none;
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1);
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-pill.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
  .mnav-pill:active{transform:translate(-50%,0) scale(.96);}
  .mnav-num{
    flex:none;width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--sage);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  }
  .mnav-label{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mnav-chev{
    flex:none;width:7px;height:7px;margin-left:2px;
    border-right:1.6px solid var(--ink-55);border-top:1.6px solid var(--ink-55);
    transform:rotate(-45deg) translateY(2px);
  }

  .mnav-backdrop{
    position:fixed;inset:0;z-index:140;display:block;
    background:rgba(18,14,11,.42);
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .mnav-sheet{
    position:fixed;z-index:150;left:0;right:0;bottom:0;display:block;
    max-height:78vh;max-height:78dvh;overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border-radius:24px 24px 0 0;
    padding:10px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
    transform:translateY(105%);
    transition:transform .38s cubic-bezier(.22,1,.36,1);
    visibility:hidden;
  }
  body.mnav-open .mnav-backdrop{opacity:1;pointer-events:auto;}
  body.mnav-open .mnav-sheet{transform:none;visibility:visible;}
  body.mnav-open{overflow:hidden;}

  .mnav-handle{width:38px;height:5px;border-radius:5px;background:rgba(27,23,20,.15);margin:0 auto 14px;}
  .mnav-title{
    display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink-35);margin:0 0 6px;
  }
  .mnav-list a{
    display:flex;align-items:center;gap:10px;
    min-height:44px;padding:0 12px;margin:0 -12px;border-radius:12px;
    font-size:15px;color:var(--ink-70);
  }
  .mnav-list a:active{background:rgba(27,23,20,.06);}
  .mnav-list a.chapter{margin-top:8px;font-weight:700;color:var(--ink);}
  .mnav-list a.chapter .num{font-size:12px;color:var(--ink-35);font-weight:700;min-width:20px;}
  .mnav-list a.sub{padding-left:42px;font-size:14px;color:var(--ink-55);min-height:40px;}
  .mnav-list a.is-current{background:var(--sage-tint);color:var(--sage-hover);}
  .mnav-list a.is-current .num{color:var(--sage-hover);}
  .mnav-figma{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:18px;min-height:48px;border-radius:14px;
    border:1px solid var(--hairline);font-size:14.5px;font-weight:600;color:var(--ink);
  }
  .mnav-figma svg{width:13px;height:13px;}

  /* Nach-oben-Knopf rückt neben die Nav-Pille */
  .back-to-top{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:46px;height:46px;}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .mnav-pill,.mnav-sheet,.mnav-backdrop{transition:none;}
}


/* ============================================================
   3) PHONE: Raster, Abstände, Lesbarkeit
   ============================================================ */
@media (max-width:760px){
  :root{--content-pad:20px;}
  .content-col{padding:0 20px;}

  /* Anker landen unter der Kopfleiste */
  [id]{scroll-margin-top:84px;}

  /* ---- Kopfleiste kompakt ---- */
  .topbar-inner{padding:5px 6px;gap:4px;max-width:calc(100vw - 24px);}
  .topbar-left,.topbar-lang,.topbar-brand,.topbar-kontakt{height:42px;}
  .topbar-left{padding:0 10px;}
  .topbar-left > span{display:none;}
  .topbar-left svg{width:16px;height:16px;}
  .topbar-brand{padding:0 8px;}
  .topbar-kontakt{padding:0 16px;font-size:14px;border-radius:14px;}
  .topbar-lang{width:42px;border-radius:14px;}
  .topbar-div{height:18px;}

  /* ---- Rhythmus: weniger Leerlauf zwischen den Bereichen ---- */
  .section{margin-top:64px;padding-top:24px;}
  .sub-gap,.sub-block{margin-top:64px;padding-top:36px;}
  .sub-gap::before{width:40px;}
  .chain.sub-gap{padding-top:36px;margin-top:44px !important;}
  .chapter-divider{margin:40px 0 !important;}

  /* ---- Typo ---- */
  h3{font-size:21px;line-height:1.28;}
  .lede{font-size:16px;line-height:1.6;max-width:none !important;}
  .eyebrow{font-size:11.5px;}
  .chapter-num{font-size:48px;}
  .chapter-head{gap:12px;}
  .chapter-head h2{font-size:clamp(24px,7vw,30px);max-width:18ch;}
  .chapter-head h2.h2-oneline{
    white-space:normal;text-indent:0;max-width:16ch;font-size:clamp(24px,7vw,30px);
  }
  .h2-xl{font-size:clamp(26px,7.6vw,32px);}

  /* ---- Laufband ---- */
  .section.full-bleed:has(.marquee-wrap){padding-top:32px;}
  .screens-inner-head{padding:0 20px;}
  .screens-inner-head .hint{display:none;}
  .phone-card{width:132px;gap:10px;}
  .phone-name{font-size:12px;}
  .marquee-row{gap:14px;}
  .marquee-wrap + .marquee-wrap{margin-top:18px;}

  /* ---- 01 Widerspruch ---- */
  .chain-step{grid-template-columns:32px 1fr;gap:14px;padding:28px 0;}
  .chain-num{width:28px;height:28px;font-size:11px;}
  .chain-body p.say{font-size:20px;}
  .chain-body p.after{font-size:15px;}
  .chain .figrow{gap:22px 26px;}
  .chain .fig b{font-size:36px;}
  .chain .dot-grid{overflow:hidden;}
  .dot-row span{width:12px;height:12px;}
  .chain .pull{padding:20px;border-radius:20px;}
  .chain .pull q{font-size:17px;}
  .chain .verdict{padding:24px 22px;border-radius:22px;}
  .chain .verdict p{font-size:19px;}

  .motiv-band{padding:24px 20px 22px;border-radius:20px;}
  .motiv-say{font-size:15.5px;}
  .converge-out{padding:24px 22px;border-radius:22px;}
  .converge-out p{font-size:18px;}

  .pers-quote{padding-left:16px;}
  .pers-tension{padding:20px;}
  .pers-need{padding:22px;}

  /* Markt-Feld */
  .field{border-radius:22px;margin-left:-4px;margin-right:-4px;}
  .field-plot{padding:40px 18px;min-height:360px;background-size:28px 28px;}
  .field-axis{font-size:9.5px;letter-spacing:.08em;}
  .y-top,.y-bot{left:18px;}
  .x-right{right:18px;}
  .y-top{top:14px;}
  .y-bot,.x-right{bottom:14px;}
  .gap-label{top:10px;right:10px;font-size:9.5px;}
  .dot b{font-size:12px;}
  .dot.is-us b{font-size:14px;}
  .field-legend > div{padding:20px;}

  /* ---- 02 Mechanik ---- */
  .concept-grid{gap:12px;margin-top:24px;}
  .concept-card{padding:20px;}
  .ia-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .ia-card{padding:16px 14px;border-radius:18px;}
  .ia-head{flex-wrap:wrap;gap:4px 12px;}

  /* Sketch → Wireframe → Mid-Fi als wischbare Reihe */
  .fidelity{
    display:flex !important;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin:28px -20px 0;padding:0 20px 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .fidelity::-webkit-scrollbar{display:none;}
  .fid-step{flex:0 0 64%;max-width:260px;scroll-snap-align:start;}
  .fid-shot:hover{transform:none;filter:none;}

  .feature-grid,.safety-grid{row-gap:22px;}

  /* ---- 03 Rückschlag ---- */
  .dark-chapter-inner{padding:64px 20px 56px;}
  .dark-chapter .lede{margin-top:24px;font-size:15.5px;}
  .method-strip{margin-top:32px;}
  .finding-row{padding:18px 0;}
  .fl-obs{font-size:14.5px;flex-basis:100%;}
  .admission{padding:26px 20px;border-radius:20px;}
  .admission-line{font-size:23px;}
  .admission-note,.admission-consequence{font-size:15px;}
  .priority-grid{gap:16px;}
  .priority-col{padding:20px;}

  /* ---- 04 Lösung: drei Begegnungs-Stufen wischbar ---- */
  .ba-grid.staffel{
    display:flex !important;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin:36px -20px 0 !important;padding:0 20px 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .ba-grid.staffel::-webkit-scrollbar{display:none;}
  .ba-grid.staffel .ba-col{flex:0 0 70%;max-width:280px;scroll-snap-align:center;}
  .ba-col .mockup-phone[style]{width:min(100%,210px) !important;}
  .kpi-card{padding:26px 22px;gap:14px;margin-top:40px;border-radius:22px;}
  .kpi-num{font-size:46px;}

  .main-swatch-grid{gap:16px 12px;}
  .main-swatch .main-chip{height:64px;}
  .type-specimen .ts-line[style*="34px"]{font-size:28px !important;}
  .ki-card{padding:4px 18px;border-radius:20px;}
  .ki-tl-body{padding:16px 0;}
  .learn-card{padding:4px 18px;border-radius:20px;}
  .learn-row p{font-size:14.5px;}

  /* ---- 05 Vertiefung ---- */
  .video-frame{border-radius:18px;margin-top:20px;}
  .proof-grid{gap:12px;}
  .proof-shot{border-radius:18px;}
  .proof-shot.wide img{aspect-ratio:16/10;}
  .proof-shot figcaption{padding:13px 15px 15px;}
  .proof-missing{white-space:normal;text-align:center;max-width:86%;}
  .btn-ghost{min-height:46px;}

  .limits{padding:28px 20px;border-radius:22px;}
  .limits-title{white-space:normal;font-size:21px;}
  .limits-lede{font-size:14.5px;}
  .limit-line{font-size:14px;}

  /* ---- Über mich (Inline-Styles brauchen !important) ---- */
  #ueber-mich-cs{padding:64px 20px !important;}
  #ueber-mich-cs > div:first-child{grid-template-columns:1fr !important;gap:28px !important;}
  #ueber-mich-cs > div:first-child > div:last-child{
    order:-1;min-height:0 !important;aspect-ratio:1/1;max-width:340px;width:100%;border-radius:24px !important;
  }
  #ueber-mich-cs p[style*="17px"]{font-size:16px !important;}
  #ueber-mich-cs .lp-pill,#ueber-mich-cs .lp-pill-solid{min-height:44px;display:inline-flex !important;align-items:center;}
  #ueber-mich-cs > div:last-child{grid-template-columns:1fr 1fr !important;gap:22px 18px !important;}

  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;}

  /* ---- Lightbox ---- */
  .lightbox img{height:auto;max-height:82vh;max-height:82dvh;max-width:88vw;border-radius:18px;}
  .lightbox-close{top:calc(14px + env(safe-area-inset-top));right:14px;width:44px;height:44px;}
}

/* sehr schmale Geräte (iPhone SE, kleine Androids) */
@media (max-width:370px){
  .topbar-div{display:none;}
  .topbar-kontakt{padding:0 13px;}
  .hp-slot{grid-template-columns:96px minmax(0,1fr);gap:16px;}
  .ia-grid{grid-template-columns:1fr;}
  .hero-stats b{font-size:26px;}
  .mnav-pill{max-width:calc(100vw - 120px);}
}

/* Touch: keine „klebenden“ Hover-Effekte nach dem Antippen */
@media (hover:none){
  .phone-card:hover .phone-frame,
  .concept-card:hover,.ia-card:hover,.proof-shot:hover,
  .stat-card:hover,.persona-card:hover,.build-card-compact:hover,
  .safety-item:hover,.feat-dark:hover,.mockup-col:hover .mockup-phone{
    transform:none !important;filter:none;
  }
}


/* ============================================================
   05 PROTOTYP: eingebetteter Figma-Prototyp zum Durchklicken
   (ersetzt Walkthrough-Video und "In Figma"-Screenshots)
   ============================================================ */
.proto-embed{
  margin-top:28px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.pe-copy h3{max-width:22ch;}
.pe-lede{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--ink-55);max-width:46ch;}
.pe-steps{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--hairline);}
.pe-steps li{
  display:flex;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--hairline);
  font-size:14.5px;line-height:1.45;color:var(--ink-90);
}
.pe-num{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--sage);}
.pe-tip{margin-top:16px;font-size:13px;line-height:1.55;color:var(--ink-35);max-width:46ch;}
.pe-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:24px;}
.pe-actions .btn-ghost{margin-top:0;}
.pe-link{
  font-size:13px;font-weight:600;color:var(--ink-55);
  text-decoration:underline;text-decoration-color:var(--ink-14);text-underline-offset:3px;
}
.pe-link:hover{color:var(--ink);}

.pe-stage{
  position:relative;display:flex;justify-content:center;
  padding:28px 0;
}
.pe-stage::before{
  content:"";position:absolute;inset:6% -8%;z-index:0;
  background:radial-gradient(closest-side,rgba(255,91,58,.16),transparent);
  pointer-events:none;
}
.pe-device{
  position:relative;z-index:1;
  width:min(100%,380px);
  aspect-ratio:390/800;
  border-radius:34px;
  overflow:hidden;
  background:#17140f;
  border:1px solid rgba(27,23,20,.12);
  box-shadow:0 30px 70px -30px rgba(27,23,20,.55),0 0 0 8px #fff,0 0 0 9px var(--hairline);
}
.pe-frame{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;border:0;display:block;
  background:transparent;
}
.pe-loading{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  font-size:12.5px;letter-spacing:.06em;color:rgba(247,243,236,.5);
}
.pe-loading span:first-child{
  width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(247,243,236,.15);border-top-color:var(--sage);
  animation:peSpin .9s linear infinite;
}
@keyframes peSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.pe-loading span:first-child{animation:none;}}

#werkstatt{container-type:inline-size;}
@container (max-width:780px){
  .proto-embed{grid-template-columns:1fr;gap:8px;}
  .pe-copy h3,.pe-lede,.pe-tip{max-width:none;}
}
@supports not (container-type:inline-size){
  @media (max-width:1100px){.proto-embed{grid-template-columns:1fr;gap:8px;}}
}

/* Handy: Gerät schmaler als der Bildschirm, damit man links und rechts
   daneben weiterscrollen kann; Vollbild-Button ist der Hauptweg */
@media (max-width:760px){
  .proto-embed{margin-top:20px;}
  .pe-lede{font-size:15.5px;}
  .pe-steps li{font-size:15px;}
  .pe-actions{flex-direction:column;align-items:stretch;}
  .pe-actions .btn-ghost{justify-content:center;min-height:48px;}
  .pe-link{text-align:center;padding:6px 0;}
  .pe-stage{padding:24px 0 8px;}
  .pe-device{
    width:min(76vw,320px);
    border-radius:28px;
    box-shadow:0 24px 50px -24px rgba(27,23,20,.5),0 0 0 6px #fff,0 0 0 7px var(--hairline);
  }
}
/* Gerät passt immer komplett ins Fenster */
.pe-device{height:min(760px,calc(100vh - 150px),calc(100dvh - 150px));width:auto;max-width:100%;}
@media (max-width:760px){
  .pe-device{height:auto;width:min(76vw,320px,calc((100dvh - 190px) * 390 / 800));}
}


/* Rahmen eng ums Handy: keine dunkle Fläche, das iPhone-Mockup aus Figma ist der Rahmen */
.pe-stage{padding:8px 0;}
.pe-stage::before{inset:14% 4%;}
.pe-device{
  background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;
  height:min(760px,calc(100vh - 150px),calc(100dvh - 150px));
}
.pe-loading{color:var(--ink-35);}
.pe-loading span:first-child{border-color:var(--ink-14);border-top-color:var(--sage);}
@media (max-width:760px){
  .pe-device{height:auto;width:min(76vw,320px,calc((100dvh - 190px) * 390 / 800));box-shadow:none;}
}


/* Touch-Geräte: Figma lässt dort seinen iPhone-Rahmen weg,
   also kommt der eigene Phone-Rahmen der Seite um den Prototyp */
.pe-phone{display:none;}
@media (hover:none) and (pointer:coarse){
  .pe-device{
    aspect-ratio:337/681;
    height:auto;
    width:min(76vw,320px,calc((100dvh - 190px) * 337 / 681));
    filter:drop-shadow(0 22px 40px rgba(27,23,20,.22));
  }
  .pe-frame,.pe-loading{
    inset:var(--pf-inset-y) var(--pf-inset-x);
    width:auto;height:auto;
    border-radius:var(--pf-radius);
    overflow:hidden;
    background:#fff;
  }
  .pe-frame{width:calc(100% - 2 * var(--pf-inset-x));height:calc(100% - 2 * var(--pf-inset-y));}
  .pe-phone{
    display:block;position:absolute;inset:0;z-index:3;
    width:100%;height:100%;object-fit:contain;pointer-events:none;
  }
}