/* Schriften liegen auf dem eigenen Server. Keine Verbindung zu Google,
   damit nichts erklärt werden muss, was niemand braucht. */
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:200 600;font-display:swap;
  src:url("/fonts/manrope-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Palette: Feld (Salbei) → Papier (Sand), Tinte für Struktur, Ton nur für Kauf */
  --feld-tief:#6F8579;
  --feld:#94A79A;
  --sand:#DFC9A6;
  --papier:#F1EEE7;
  --papier-hell:#FAF8F4;
  --tinte:#171D19;
  --tinte-60:rgba(23,29,25,.60);
  --tinte-38:rgba(23,29,25,.38);
  --tinte-14:rgba(23,29,25,.14);
  --tinte-07:rgba(23,29,25,.07);
  --ton:#B05633;           /* nur für Kaufhandlungen */
  --ton-dunkel:#8E4426;
  --r-l:30px;
  --r-m:18px;
  --r-s:11px;
  --display:"Manrope","Avenir Next","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --mx:min(1180px,92vw);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--display);font-weight:400;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2.5px solid var(--tinte);outline-offset:3px;border-radius:4px}

/* ---------- Bausteine ---------- */
.wrap{width:var(--mx);margin-inline:auto}
.blk-title{font-size:1.1rem;font-weight:500;letter-spacing:-.005em;margin:0 0 18px}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(1.9rem,4vw,3.15rem)}
h3{font-size:1.22rem;letter-spacing:-.01em;line-height:1.25;font-weight:500}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--tinte-60);max-width:46ch}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

.btn{
  display:inline-flex;align-items:center;gap:.6em;padding:15px 26px;border-radius:999px;
  background:var(--tinte);color:var(--papier-hell);font-size:15px;font-weight:500;
  transition:transform .18s ease, background .18s ease;text-decoration:none;
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn-buy{background:var(--ton)}
.btn-buy:hover{background:var(--ton-dunkel)}
.btn-ghost{background:transparent;border:1px solid var(--tinte-14);color:var(--tinte)}
.btn-ghost:hover{background:var(--tinte-07)}

.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E")}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.nav-inner{
  pointer-events:auto;width:var(--mx);display:flex;align-items:center;gap:24px;
  padding:9px 9px 9px 22px;border-radius:999px;
  background:rgba(250,248,244,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 30px rgba(23,29,25,.07);
}
.brand{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;display:inline-flex;align-items:center;gap:9px;
}
/* Der Kreis ist derselbe Farbverlauf wie das Favicon. Über CSS, damit
   dafür keine Seite im Markup angefasst werden muss. */
.brand::before{
  content:"";width:12px;height:12px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--feld-tief) 0%,var(--feld) 52%,var(--sand) 100%);
}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--tinte-60)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--tinte)}
.nav .btn{padding:11px 20px;font-size:14px}
/* Die Mobil-Regeln für die Leiste stehen gesammelt weiter unten. */

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:640px;padding:150px 0 0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(90% 70% at 88% 12%, rgba(223,201,166,.75), transparent 65%),
    linear-gradient(168deg,var(--feld-tief) 0%,var(--feld) 42%,var(--sand) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end;padding-bottom:64px}
.hero h1{
  font-size:clamp(2.6rem,7.2vw,5.5rem);font-weight:200;color:#FBFAF7;
  letter-spacing:-.035em;
}
.hero h1 em{font-style:normal;color:rgba(251,250,247,.55)}
.hero-sub{margin-top:26px;max-width:34ch;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.4vw,1.12rem)}
.hero-strip{
  border-top:1px solid rgba(255,255,255,.35);padding:16px 0 18px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:rgba(255,255,255,.8);
}

/* Startkarte im Hero */
.starter{
  background:var(--papier-hell);border-radius:var(--r-l);padding:30px 30px 24px;
  box-shadow:0 24px 60px rgba(23,29,25,.16);
}
.starter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--tinte-38)}
.starter-q{font-size:clamp(1.18rem,2vw,1.5rem);font-weight:400;line-height:1.28;margin:18px 0 22px;letter-spacing:-.015em}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale button{
  aspect-ratio:1/1;border-radius:var(--r-s);border:1px solid var(--tinte-14);
  font-family:var(--mono);font-size:14px;color:var(--tinte-60);
  display:grid;place-items:center;transition:all .15s ease;
}
.scale button:hover{background:var(--tinte);border-color:var(--tinte);color:var(--papier-hell);transform:translateY(-2px)}
.scale-legend{display:flex;justify-content:space-between;margin-top:11px;color:var(--tinte-38);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:920px){
  .hero{padding-top:112px;min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:36px;padding-bottom:40px}
}

/* ---------- Abschnitte ---------- */
section{padding:96px 0}
.sec-hell{background:var(--papier-hell)}
.sec-head{max-width:52ch;margin-bottom:46px}
.sec-head h2{margin:0 0 18px}

/* Feld (Signatur) */
.feld-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.axes{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.axes li{padding-left:18px;border-left:2px solid var(--tinte-14)}
.axes strong{display:block;font-weight:500;margin-bottom:5px}
.axes span{color:var(--tinte-60);font-size:15.5px}

.feld{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-m);
  background:linear-gradient(150deg,rgba(148,167,154,.22),rgba(223,201,166,.3));
  border:1px solid var(--tinte-14);
}
.feld::before,.feld::after{content:"";position:absolute;background:var(--tinte-14)}
.feld::before{left:50%;top:0;bottom:0;width:1px}
.feld::after{top:50%;left:0;right:0;height:1px}
.quad{position:absolute;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-60);max-width:44%}
.q-tl{top:14px;left:14px}
.q-tr{top:14px;right:14px;text-align:right}
.q-bl{bottom:14px;left:14px}
.q-br{bottom:14px;right:14px;text-align:right}
.axis-label{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-38)}
.axis-x{bottom:-26px;left:50%;transform:translateX(-50%)}
.axis-y{left:-12px;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left center}
.dot{
  position:absolute;width:17px;height:17px;border-radius:50%;background:var(--ton);
  box-shadow:0 0 0 6px rgba(176,86,51,.18);transform:translate(-50%,-50%);
  transition:left .7s cubic-bezier(.2,.8,.2,1),bottom .7s cubic-bezier(.2,.8,.2,1);
}
@media(max-width:920px){.feld-layout{grid-template-columns:1fr;gap:56px}}

/* Muster-Zeilen */
.rows{border-top:1px solid var(--tinte-14)}
.row{
  display:grid;grid-template-columns:150px 1fr 1.25fr;gap:36px;
  padding:30px 0;border-bottom:1px solid var(--tinte-14);align-items:start;
}
.row-mini{width:66px;height:66px;border-radius:9px;position:relative;border:1px solid var(--tinte-14);background:rgba(148,167,154,.14)}
.row-mini::before,.row-mini::after{content:"";position:absolute;background:var(--tinte-14)}
.row-mini::before{left:50%;top:0;bottom:0;width:1px}
.row-mini::after{top:50%;left:0;right:0;height:1px}
.row-mini i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--tinte);transform:translate(-50%,50%)}
.row p{color:var(--tinte-60);font-size:15.5px}
.row .hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-38);margin-top:10px}
@media(max-width:820px){.row{grid-template-columns:1fr;gap:14px}.row-mini{display:none}}

/* Leitfäden */
.guides{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.guide{
  background:var(--papier-hell);border-radius:var(--r-l);padding:30px;
  display:flex;flex-direction:column;gap:22px;border:1px solid var(--tinte-07);
}
/* Seitenstapel: echte Seiten aus dem PDF, gefächert wie Blätter auf dem Tisch */
.stack{position:relative;width:100%;padding-bottom:72%}
.sheet{
  position:absolute;top:0;width:43%;padding:0;border-radius:3px;overflow:hidden;background:#fff;
  box-shadow:0 12px 28px rgba(23,29,25,.16),0 0 0 1px rgba(23,29,25,.05);cursor:zoom-in;
  transition:transform .45s cubic-bezier(.22,.72,.2,1),box-shadow .35s ease;
}
.sheet img{display:block;width:100%;height:auto}
.sheet.s1{left:0;z-index:3;transform:rotate(-3.2deg)}
.sheet.s2{left:27%;top:4.5%;z-index:2;transform:rotate(1.6deg)}
.sheet.s3{left:54%;top:2%;z-index:1;transform:rotate(4.8deg)}
.guide:hover .sheet.s1,.offer-visual:hover .sheet.s1{transform:rotate(-5.4deg) translateX(-4%)}
.guide:hover .sheet.s3,.offer-visual:hover .sheet.s3{transform:rotate(7deg) translateX(4%)}
.sheet:hover{box-shadow:0 18px 40px rgba(23,29,25,.24),0 0 0 1px rgba(23,29,25,.08);z-index:4}
.stack-note{color:var(--tinte-38)}
.guide ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--tinte-60)}
.guide ul li{display:flex;gap:10px}
.guide ul li::before{content:"—";color:var(--tinte-38)}
.price{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:6px}
.price .chf{font-family:var(--mono);font-size:13px;letter-spacing:.08em}
.note{
  margin-top:26px;padding:24px 26px;border-radius:var(--r-m);
  background:rgba(148,167,154,.14);border:1px solid var(--tinte-07);
  font-size:15.5px;color:var(--tinte-60);max-width:70ch;
}
.note strong{color:var(--tinte);font-weight:500}
@media(max-width:820px){.guides{grid-template-columns:1fr}}

/* Grundlage */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tinte-14);border:1px solid var(--tinte-14);border-radius:var(--r-m);overflow:hidden}
.fact{background:var(--papier);padding:28px 24px}
.fact b{display:block;font-size:2.5rem;font-weight:200;letter-spacing:-.03em;line-height:1}
.fact span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-60)}
@media(max-width:820px){.facts{grid-template-columns:1fr 1fr}}

/* FAQ */
details{border-bottom:1px solid var(--tinte-14)}
details summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:1.06rem;font-weight:400;transition:color .25s ease;
}
details summary::-webkit-details-marker{display:none}
/* Marker aus zwei Strichen: geschlossen ein Plus, offen ein Minus */
details summary::before,
details summary::after{
  content:"";position:absolute;right:6px;top:calc(50% - .75px);width:13px;height:1.5px;
  background:var(--tinte-38);
  transition:transform .45s cubic-bezier(.22,.72,.2,1),background .25s ease;
}
details summary::after{transform:rotate(90deg)}
details[open] summary::after{transform:rotate(0deg)}
details summary:hover::before,
details summary:hover::after{background:var(--tinte)}

details .body{
  padding:0 20% 24px 0;color:var(--tinte-60);font-size:15.5px;
  overflow:hidden;height:0;opacity:0;
  transition:height .42s cubic-bezier(.22,.72,.2,1),opacity .32s ease;
}
details.is-open .body{opacity:1;transition:height .42s cubic-bezier(.22,.72,.2,1),opacity .38s ease .12s}
@media(max-width:820px){details .body{padding-right:0}}

/* Hilfe */
.help{background:var(--tinte);color:var(--papier-hell)}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.help h2{color:#FBFAF7}
.help p{color:rgba(250,248,244,.65);max-width:44ch}
.lines{display:grid;gap:2px}
.line{
  display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(250,248,244,.14);text-decoration:none;
}
.line b{
  font-family:var(--mono);font-size:1.35rem;font-weight:400;letter-spacing:.02em;
  min-width:0;overflow-wrap:break-word;transition:color .25s ease;
}
.line.word b{font-size:.92rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.3}
.line span{color:rgba(250,248,244,.65);font-size:15px}
.line:hover b{color:var(--sand)}
@media(max-width:820px){.help-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){.line{grid-template-columns:1fr;gap:6px}}

footer{background:var(--tinte);color:rgba(250,248,244,.5);padding:34px 0 44px;font-size:13.5px}
.foot a{color:rgba(250,248,244,.72);text-decoration:none}
.foot a:hover{color:#FBFAF7;text-decoration:underline}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(250,248,244,.14);padding-top:22px}

/* ---------- Quiz-Ansicht ---------- */
.view{display:none}
.view.on{display:block}
body.quiz-on{overflow:hidden}
#quiz,#result{
  position:fixed;inset:0;z-index:70;overflow-y:auto;
  background:
    radial-gradient(100% 80% at 85% 0%, rgba(223,201,166,.5), transparent 60%),
    linear-gradient(180deg,var(--papier-hell),var(--papier));
}
.q-bar{position:sticky;top:0;background:rgba(250,248,244,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--tinte-14);z-index:2}
.q-bar-in{width:var(--mx);margin-inline:auto;display:flex;align-items:center;gap:20px;padding:16px 0}
.q-bar .brand{margin-right:auto}
.progress{height:3px;background:var(--tinte-14);border-radius:2px;width:min(340px,42vw);overflow:hidden}
.progress i{display:block;height:100%;background:var(--tinte);width:0;transition:width .35s ease}
.q-close{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-60)}
.q-stage{width:var(--mx);margin-inline:auto;padding:clamp(40px,9vh,96px) 0 80px;max-width:760px}
.q-count{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte-38)}
.q-text{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:300;letter-spacing:-.025em;line-height:1.18;margin:20px 0 40px}
.q-scale{display:grid;gap:10px}
.q-scale button{
  display:flex;align-items:center;gap:18px;padding:17px 22px;border-radius:14px;
  border:1px solid var(--tinte-14);background:rgba(255,255,255,.5);text-align:left;
  transition:all .14s ease;
}
.q-scale button:hover{border-color:var(--tinte);background:#fff;transform:translateX(4px)}
.q-scale b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--tinte-38);min-width:18px}
.q-back{margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-38)}
.q-back:hover{color:var(--tinte)}

/* ---------- Ergebnis ---------- */
.r-stage{width:var(--mx);margin-inline:auto;padding:clamp(36px,7vh,72px) 0 90px}
.r-top{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start}
.r-titel{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:300;letter-spacing:-.025em;line-height:1.06;margin:0 0 20px}
.r-scores{display:grid;gap:18px;margin:30px 0 0;max-width:420px}
.bar-row .bar-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-60);margin-bottom:7px}
.bar{height:7px;border-radius:4px;background:var(--tinte-14);overflow:hidden}
.bar i{display:block;height:100%;background:var(--feld-tief);width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar.b-v i{background:var(--sand)}
.r-block{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.r-list{display:grid;gap:16px}
.r-list div{padding-left:16px;border-left:2px solid var(--tinte-14)}
.r-list b{display:block;font-weight:500;margin-bottom:3px}
.r-list span{color:var(--tinte-60);font-size:15.5px}
.offer{margin-top:60px;background:var(--papier-hell);border:1px solid var(--tinte-07);border-radius:var(--r-l);padding:34px;display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center}
.offer h3{font-size:1.5rem;font-weight:300;letter-spacing:-.02em}
.offer-visual{position:relative}
@media(max-width:920px){
  .r-top,.r-block,.offer{grid-template-columns:1fr;gap:34px}
}

/* Download nach dem Kauf */
.dl-box{
  margin:34px 0;padding:30px;border-radius:var(--r-l);background:var(--papier-hell);
  border:1px solid var(--tinte-07);box-shadow:0 12px 34px rgba(23,29,25,.07);
}
.dl-status{color:var(--tinte-60);font-size:15.5px;margin:0}
.dl-titel{font-size:1.3rem;font-weight:300;letter-spacing:-.02em;margin:0 0 6px}
.dl-fein{font-size:12.5px;color:var(--tinte-38);margin:14px 0 0}
.dl-box .btn{margin-top:20px}
@keyframes puls{0%,100%{opacity:.45}50%{opacity:1}}
.dl-warten{animation:puls 1.6s ease-in-out infinite}

/* Checkout-Platzhalter */
.lightbox{position:fixed;inset:0;z-index:95;display:none;background:rgba(20,26,22,.86);backdrop-filter:blur(6px);padding:56px 20px 28px;overflow:auto}
.lightbox.on{display:block}
.lightbox img{display:block;max-width:min(760px,94vw);margin:0 auto;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lb-cap{max-width:min(760px,94vw);margin:16px auto 0;color:rgba(250,248,244,.6);text-transform:none;letter-spacing:.02em;font-size:12px}
.lb-close{position:fixed;top:16px;right:18px;color:rgba(250,248,244,.75);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.lb-close:hover{color:#fff}

.modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:20px;background:rgba(23,29,25,.5);backdrop-filter:blur(5px)}
.modal.on{display:grid}
.modal-card{background:var(--papier-hell);border-radius:var(--r-l);padding:30px;max-width:452px;width:100%;box-shadow:0 30px 80px rgba(23,29,25,.28)}
.modal-card h3{margin-bottom:12px}
.modal-card p{color:var(--tinte-60);font-size:15.5px}
.modal-card .row-btns{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
/* Kaufdialog */
.co-head{display:flex;gap:16px;align-items:flex-start}
.co-thumb{width:60px;flex:0 0 auto;border-radius:3px;overflow:hidden;background:#fff;
  box-shadow:0 8px 20px rgba(23,29,25,.18),0 0 0 1px rgba(23,29,25,.06)}
.co-thumb img{display:block;width:100%;height:auto}
.co-head h3{font-size:1.16rem;line-height:1.25;margin:0}
.co-sub{font-size:13.5px;color:var(--tinte-38);margin-top:7px;line-height:1.4}
.co-rule{height:1px;background:var(--tinte-14);margin:22px 0}
.co-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.co-total .lbl{font-size:15px;color:var(--tinte-60)}
.co-total .amt{font-size:1.45rem;font-weight:400;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.co-fine{font-size:12.5px;color:var(--tinte-38);margin-top:5px}
.co-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px;color:var(--tinte-60)}
.co-list li{display:flex;gap:11px;align-items:flex-start}
.co-list svg{flex:0 0 auto;margin-top:4px}
.btn-block{width:100%;justify-content:center;padding:16px 24px}
.btn[disabled]{background:var(--tinte-14);color:var(--tinte-38);cursor:not-allowed;transform:none}
.co-back{display:block;width:100%;text-align:center;margin-top:6px;padding:13px;font-size:14px;color:var(--tinte-60)}
.co-back:hover{color:var(--tinte)}
.co-trust{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:12.5px;line-height:1.5;color:var(--tinte-38)}
.co-trust svg{flex:0 0 auto;margin-top:1px}
.co-dev{margin-top:18px;padding:11px 13px;border-radius:var(--r-s);background:rgba(176,86,51,.08);
  font-family:var(--mono);font-size:10.5px;line-height:1.6;letter-spacing:.02em;color:var(--ton-dunkel)}

/* ---------- Bewegung ---------- */
/* Eine Kurve, eine Distanz, überall dieselbe. Verzögerung kommt aus --d. */
.reveal{
  opacity:0;transform:translateY(15px);
  transition:opacity .85s cubic-bezier(.22,.72,.2,1),transform .85s cubic-bezier(.22,.72,.2,1);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1;transform:none}

/* Hero: sehr langsame Drift im Hintergrund */
.hero::after{
  content:"";position:absolute;inset:-15%;pointer-events:none;
  background:radial-gradient(38% 34% at 30% 60%, rgba(255,255,255,.28), transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-3%,2%,0) scale(1)}
  to{transform:translate3d(6%,-4%,0) scale(1.12)}
}
.hero .wrap{position:relative;z-index:1}

/* Navigation verdichtet sich beim Scrollen */
.nav-inner{transition:background .3s ease,box-shadow .3s ease,padding .3s ease}
.nav.is-scrolled .nav-inner{background:rgba(250,248,244,.92);box-shadow:0 12px 36px rgba(23,29,25,.13);padding-block:7px}

/* Streufeld: schematische Verteilung, erscheint beim Hereinscrollen */
.scatter{position:absolute;inset:0}
.scatter i{
  position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(23,29,25,.26);
  opacity:0;transform:translate(-50%,50%) scale(.3);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.85,.25,1);transition-delay:var(--d,0ms);
}
.scatter.in i{opacity:1;transform:translate(-50%,50%) scale(1)}
.feld-note{position:absolute;right:0;bottom:-26px;color:var(--tinte-38)}

/* Zeilen der vier Muster: Hover hebt die Zeile leicht an */
.row{transition:background .25s ease}
.row:hover{background:var(--tinte-07)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .btn:hover,.q-scale button:hover,.scale button:hover{transform:none}
  .reveal{opacity:1;transform:none}
  .hero::after{animation:none}
}

/* ---------- Startseite: die erste Frage führt auf /test/ ---------- */
/* Aus den Knöpfen sind echte Links geworden, damit sie auch ohne
   JavaScript funktionieren und in einem neuen Tab geöffnet werden können.
   Dieselbe Gestaltung wie .scale button darüber. */
.scale a{
  aspect-ratio:1/1;border-radius:var(--r-s);border:1px solid var(--tinte-14);
  font-family:var(--mono);font-size:14px;color:var(--tinte-60);text-decoration:none;
  display:grid;place-items:center;transition:all .15s ease;cursor:pointer;
}
.scale a:hover{background:var(--tinte);border-color:var(--tinte);color:var(--papier-hell);
  transform:translateY(-2px)}

/* ==================================================================
   SPRACHWAHL
   Deutsch liegt auf /, Englisch auf /en/. Der Umschalter steht in der
   Navigationsleiste, damit er auf jeder Seite an derselben Stelle ist.
   Gehört in basis.css und nicht in typen.css: die Startseite lädt nur
   diese Datei, und dort war der Umschalter deshalb ungestylt.
   ================================================================== */
.sprachwahl{
  display:flex;align-items:center;gap:2px;flex:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.sprachwahl a,.sprachwahl span{
  padding:5px 8px;border-radius:5px;text-decoration:none;line-height:1;
}
.sprachwahl a{color:var(--tinte-38)}
.sprachwahl a:hover{color:var(--tinte);background:var(--tinte-07)}
.sprachwahl span{color:var(--tinte);background:var(--tinte-07);font-weight:500}
.sprachwahl i{font-style:normal;color:var(--tinte-14)}
.q-bar-in .sprachwahl{margin-left:6px}

/* Hinweis im Kaufdialog: das Heft ist auf Deutsch. Steht bewusst vor dem
   Knopf und nicht im Kleingedruckten. */
.co-sprache{
  margin:18px 0 0;padding:13px 15px;border-radius:var(--r-s);
  background:rgba(176,86,51,.08);border:1px solid rgba(176,86,51,.22);
  font-size:13.5px;line-height:1.5;color:var(--tinte);
}

/* Derselbe Hinweis als Block auf einer Seite */
.sprachhinweis{
  margin-top:20px;padding:16px 19px;border-radius:var(--r-m);
  background:rgba(176,86,51,.07);border:1px solid rgba(176,86,51,.2);
  font-size:14.6px;line-height:1.58;color:var(--tinte-60);max-width:62ch;
}
.sprachhinweis strong{color:var(--tinte);font-weight:500}

/* Nur für Screenreader und Suchmaschinen */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Kurzfassung des Knopftexts, erscheint erst auf schmalen Bildschirmen */
.nav .btn .kurz{display:none}

/* ---------- Burger-Menü ----------
   Auf schmalen Bildschirmen trug die Leiste vier Dinge gleichzeitig: Marke,
   Links, Sprachwahl und Knopf. Das ging nicht auf. Jetzt bleiben Marke,
   Sprachwahl und der Burger stehen; Links und Knopf liegen im Menü.

   Den Burger baut js/basis.js und setzt dabei .hat-burger auf die Leiste.
   Alle Regeln hier hängen an dieser Klasse: fällt das Skript aus, bleibt die
   Leiste wie vorher und der Knopf sichtbar. */
.burger{
  display:none;width:34px;height:34px;flex:none;border-radius:9px;
  place-items:center;background:none;border:1px solid var(--tinte-14);
  transition:background .18s ease, border-color .18s ease;
}
.burger:hover{background:var(--tinte-07)}
.burger i{
  display:block;position:relative;width:15px;height:1.5px;border-radius:2px;
  background:var(--tinte);transition:transform .26s cubic-bezier(.22,.72,.2,1);
}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:15px;height:1.5px;border-radius:2px;
  background:var(--tinte);
  transition:transform .26s cubic-bezier(.22,.72,.2,1), opacity .18s ease;
}
.burger i::before{top:-5px}
.burger i::after{top:5px}
/* Offen: aus drei Strichen wird ein Kreuz */
.nav.offen .burger i{transform:rotate(45deg)}
.nav.offen .burger i::before{transform:translateY(5px) rotate(-90deg)}
.nav.offen .burger i::after{opacity:0;transform:translateY(-5px)}

/* Das Menü selbst. Geschlossen nimmt es keine Höhe ein. */
.nav-menu{display:contents}

@media(max-width:820px){
  .nav.hat-burger .burger{display:grid}
  .nav.hat-burger .nav-inner{flex-wrap:wrap;row-gap:0;column-gap:10px}
  .nav.hat-burger .sprachwahl{margin-left:auto}

  /* Das Menü hat flex-basis 100% und steht im Markup vor Sprachwahl und
     Burger. Ohne order würde es die beiden auch im zugeklappten Zustand in
     eine zweite Zeile schieben. Auf dem Desktop ist das Menü display:contents,
     dort greift order nicht und die Reihenfolge bleibt wie vorher. */
  .nav.hat-burger .brand{order:1}
  .nav.hat-burger .sprachwahl{order:2}
  .nav.hat-burger .burger{order:3}
  .nav.hat-burger .nav-menu{order:4}

  .nav.hat-burger .nav-menu{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    flex-basis:100%;overflow:hidden;
    max-height:0;opacity:0;
    transition:max-height .3s cubic-bezier(.22,.72,.2,1), opacity .2s ease,
               margin-top .3s cubic-bezier(.22,.72,.2,1);
  }
  .nav.hat-burger.offen .nav-menu{
    max-height:340px;opacity:1;margin-top:12px;
    border-top:1px solid var(--tinte-14);padding-top:12px;
  }

  /* Die Leiste ist eine Pille mit 999px Radius. Zugeklappt ist das richtig,
     aufgeklappt wird daraus ein Kreis. Also beim Öffnen auf eine Ecke
     zurücknehmen, die zu einem hohen Kasten passt. */
  .nav.hat-burger .nav-inner{
    transition:border-radius .26s cubic-bezier(.22,.72,.2,1),
               background .3s ease, box-shadow .3s ease, padding .3s ease;
  }
  .nav.hat-burger.offen .nav-inner{border-radius:24px}

  .nav.hat-burger .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;
    font-size:16px;
  }
  .nav.hat-burger .nav-links a{
    display:block;padding:13px 4px;color:var(--tinte);
    border-bottom:1px solid var(--tinte-07);
  }
  .nav.hat-burger .nav-links a:last-child{border-bottom:0}
  .nav.hat-burger .nav-links a.hier{font-weight:500}

  /* Der Knopf erscheint erst mit dem Menü */
  .nav.hat-burger .btn{
    margin:12px 4px 4px;justify-content:center;padding:15px 24px;font-size:15px;
  }
  .nav.hat-burger .btn .kurz{display:none}
  .nav.hat-burger .btn .lang{display:inline}

  /* Marke etwas kleiner, der Kreis bleibt als Anker */
  .nav.hat-burger .brand{font-size:9.5px;letter-spacing:.14em;gap:8px}
  .nav.hat-burger .brand::before{width:11px;height:11px}
  .nav.hat-burger .nav-inner{padding:9px 9px 9px 15px}
}

/* Nur noch das andere Kürzel: auf welcher Sprache man ist, sagt die Seite.
   Als Kästchen wie der Burger daneben, sonst schwebt ein blasses «EN» im Raum. */
@media(max-width:660px){
  .sprachwahl span,.sprachwahl i{display:none}
  .sprachwahl a{
    padding:0 10px;height:34px;display:grid;place-items:center;
    border:1px solid var(--tinte-14);border-radius:9px;color:var(--tinte-60);
  }
  .sprachwahl a:hover{color:var(--tinte);background:var(--tinte-07)}
}

@media(max-width:360px){
  .nav.hat-burger .brand{font-size:9px;letter-spacing:.1em}
}

@media (prefers-reduced-motion:reduce){
  .burger i,.burger i::before,.burger i::after,.nav-menu{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .scale a:hover{transform:none}
}