/* Lese-Seiten (E5, Read-Modus): So funktioniert's, FAQ, Zustands-Guide, Versand-Guide, Rechtsseiten (/seite/…), Fehlerseiten.
   Ruhig und lesbar: 65–75 Zeichen Zeilenlänge, klare Wegweiser (Inhalt links), Marke in Details (Perforation, Stempel, Preis-Rosa). */

/* Sprungmarken landen unter dem klebenden Kopf */
html{scroll-padding-top:calc(var(--stick) + 20px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* == Grundgerüst */
.rd{padding-top:44px;padding-bottom:64px}
.rd-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.rd-main{min-width:0}
.rd-side{display:none}
@media (min-width:1100px){
  .rd-grid{grid-template-columns:212px minmax(0,760px);column-gap:72px;justify-content:center}
  .rd-main{grid-column:2}
  .rd-side{display:block;grid-column:1;grid-row:1}
  /* Langes Verzeichnis (AGB: 14 Abschnitte) scrollt in sich, damit es auch auf 768–800 px hohen Laptops ganz erreichbar bleibt */
  .rd-side-in{position:sticky;top:calc(var(--stick) + 36px);display:flex;flex-direction:column;max-height:calc(100vh - var(--stick) - 52px);max-height:calc(100dvh - var(--stick) - 52px);padding-top:6px}
  /* Scrollbehälter schneidet am Rand: Schiene als Hintergrund (läuft mit), Platz für den Punkt samt Ring */
  .rd-side .rd-side-in .toc{flex:0 1 auto;min-height:0;margin-left:-9px;padding:4px 4px 4px 9px;border-left:0;background:linear-gradient(to bottom,var(--line-2) 55%,transparent 0) 7.25px 0/1.5px 9px repeat-y local;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;scroll-padding-block:16px}
  .rd-side-in .toc::-webkit-scrollbar{width:6px}
  .rd-side-in .toc::-webkit-scrollbar-thumb{border-radius:6px;background:var(--line-2)}
  .rd-toc-m{display:none}
}
.rd-side[hidden],.rd-toc-m[hidden]{display:none}

.rd-head{margin-bottom:32px}
.rd-head h1{margin:0 0 14px}
.rd-head h1 .hk{font-size:14px}
.rd-head p{max-width:60ch;margin:0;color:var(--ink-2);font-size:18px;line-height:1.55}
.rd-head p b{color:var(--ink)}
.rd-head p.rd-meta{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2);font-size:14px;font-weight:600}
.rd-meta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint-ink)}

/* == Inhaltsverzeichnis (Desktop: links, klebend · Handy: aufklappbar) */
.toc-t{margin:0 0 8px;color:var(--ink);font:800 15px/1.3 var(--round)}
.toc{margin:0;padding:0;list-style:none;counter-reset:none}
.rd-side .toc{border-left:1.5px dashed var(--line-2)}
.toc li{margin:0}
.toc a{position:relative;display:flex;align-items:center;min-height:40px;padding:6px 0 6px 18px;color:var(--ink-2);font-size:14.5px;font-weight:600;line-height:1.3;text-decoration:none;transition:color .16s ease}
.toc a::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.toc .toc-sub a{padding-left:32px;font-size:14px;font-weight:500}
.rd-toc-m .toc .toc-sub a{padding-left:16px}
.toc a[aria-current]{color:var(--ink)}
.toc a[aria-current]::before{background:var(--ichigo);box-shadow:0 0 0 3px var(--ichigo-soft);transform:scale(1.15)}
.toc a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}

.rd-toc-m{margin:0 0 30px;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.rd-toc-m summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 20px;color:var(--ink);font:800 16px/1 var(--round);list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.rd-toc-m summary::-webkit-details-marker{display:none}
.rd-toc-m summary::after{content:"";width:14px;height:10px;background:var(--chev) center/12px 8px no-repeat;transition:transform .2s var(--ease-out)}
.rd-toc-m[open] summary::after{transform:rotate(180deg)}
.rd-toc-m .toc{margin:0 20px;padding:4px 0 12px;border-top:1.5px dashed var(--line-2)}
.rd-toc-m .toc a{padding-left:0;font-size:15px}
.rd-toc-m .toc a::before{display:none}

/* Zahl und Einheit bleiben zusammen („20 %“, „150,00 €“) */
.rd .nb{white-space:nowrap}

/* == Fließtext */
.rd .prose{font-size:17px;line-height:1.72}
.rd .prose p,.rd .prose ul,.rd .prose ol{max-width:70ch}
.rd .prose h2{margin:1.9em 0 .55em;font-size:clamp(22px,2vw,26px)}
.rd .prose h3{margin:1.6em 0 .45em}
.rd .prose>:first-child{margin-top:0}

/* == Weiterlesen */
.rd-next{display:flex;flex-wrap:wrap;gap:10px;margin-top:56px;padding-top:28px;border-top:1.5px dashed var(--line-2)}
.rd-next .btn svg{transition:transform .2s var(--ease-out)}

/* ================= So funktioniert's */
.hw-steps{margin:0;padding:0;list-style:none}
.hw-step{position:relative;padding:0 0 40px 76px}
.hw-step::before{content:"";position:absolute;left:24px;top:60px;bottom:10px;border-left:2px dashed var(--line-2)}
.hw-step:last-child{padding-bottom:8px}
.hw-step:last-child::before{display:none}
.hw-step h2{margin:0 0 12px;padding-top:10px;font-size:clamp(22px,2vw,26px)}
.hw-step>p{max-width:66ch;margin:0;font-size:17px;line-height:1.72}
.hw-n{position:absolute;left:0;top:0;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;font:800 20px/1 var(--round);box-shadow:0 0 0 6px var(--bg)}
.hw-step.is-price .hw-n{background:var(--sakura);color:var(--sakura-ink);box-shadow:0 0 0 6px var(--bg),inset 0 0 0 2px var(--sakura-2)}
.hw-step.is-money .hw-n{background:var(--mint);color:var(--mint-ink);box-shadow:0 0 0 6px var(--bg),inset 0 0 0 2px var(--mint-2)}
.hw-alt{max-width:66ch;margin-top:20px;padding:20px 24px 4px;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.hw-alt h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:19px}
.hw-alt p{font-size:16px;line-height:1.65;color:var(--ink-2)}
.hw-alt-i,.cs-li,.sh-li{display:inline-grid;flex:none;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--bg);color:var(--ink)}

.hw-price{margin-top:44px;padding:36px 40px 20px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.hw-price h2{margin:0 0 18px;font-size:clamp(22px,2vw,26px)}
.hw-formula{margin:0 0 10px;line-height:1.9}
.hw-formula b{padding:3px 10px;border-radius:10px;background:var(--sakura);color:var(--sakura-ink);font:800 clamp(18px,1.9vw,22px)/1.35 var(--round);letter-spacing:-.01em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hw-facts{margin:0;padding:0;list-style:none}
.hw-facts li{max-width:68ch;margin:0;padding:16px 0;border-top:1.5px dashed var(--line-2);font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.hw-facts li:first-child{border-top:0}
.hw-facts li b{color:var(--ink)}

/* ================= FAQ */
.fq-chips{margin:0 0 8px}
.fq-chips ul{position:relative;display:flex;gap:8px;margin:0;padding:2px 0 10px;list-style:none;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.fq-chips ul::-webkit-scrollbar{display:none}
.fq-chips li{flex:none;scroll-snap-align:start}
.fq-chips a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-size:14.5px;font-weight:650;text-decoration:none;white-space:nowrap;transition:box-shadow .16s ease,background-color .16s ease,transform .16s var(--ease-out)}
.fq-chips a[aria-current]{background:var(--ink);box-shadow:none;color:#fff}
.fq-chips a:active{transform:scale(.97)}
@media (min-width:1100px){.fq-chips{display:none}}
@media (max-width:1099px){
  .fq-chips{position:sticky;top:var(--stick);z-index:5;padding-top:8px;background:var(--bg);box-shadow:0 1px 0 var(--line)}
  html:has(.fq-chips){scroll-padding-top:calc(var(--stick) + 76px)}
}
.fq-sec{padding-top:26px}
.fq-sec h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:clamp(21px,1.9vw,24px)}
.fq-n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font:800 13px/1 var(--round)}
.fq .faq summary{cursor:pointer}
.fq .faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--r-m)}
.fq .faq .faq-a{max-width:68ch;font-size:16px}
.fq .faq details:target{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--butter-2)}

/* ================= Zustands-Guide */
.cs-head{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:end}
@media (min-width:1000px){.cs-head{grid-template-columns:minmax(0,1fr) 400px;gap:56px}}
.cs-meter{padding:20px 22px 14px;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.cs-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end}
.cs-col{display:grid;justify-items:center;gap:6px}
.cs-pct{color:var(--ink);font:800 13px/1 var(--round);white-space:nowrap}
.cs-bar{position:relative;display:block;width:100%;max-width:44px;height:96px;border-radius:10px;background:var(--bg-2)}
.cs-bar i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p) * 1%);border-radius:10px;background:var(--sakura-2);box-shadow:inset 0 0 0 1.5px var(--sakura-2)}
.cs-col:first-child .cs-bar i{background:var(--ichigo)}
.cs-col b{display:grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:999px;background:var(--ink);color:#fff;font:800 12px/1 var(--round)}
.rd-head .cs-cap,.cs-cap{margin:12px 0 0;padding-top:10px;border-top:1.5px dashed var(--line-2);color:var(--ink-3);font-size:13px;font-weight:600;text-align:center}

.cs .cond-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cs .cond-card{display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1)}
.cs .cond-card .cc-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.cc-wear{flex:none;width:76px;height:auto;border-radius:6px;box-shadow:0 10px 18px -12px rgba(30,27,57,.6);rotate:-4deg}
.cc-name{display:grid;gap:2px;min-width:0;padding-top:2px}
.cc-name b{color:var(--ink);font:800 18px/1.2 var(--round)}
.cc-name .cc-t{color:var(--ink-2);font-size:14px}
.cs .cond-card .cc-code{justify-self:start;display:inline-grid;place-items:center;width:auto;height:22px;margin-bottom:4px;padding:0 8px;border-radius:999px;background:var(--ink);color:#fff;font:800 12px/1 var(--round);letter-spacing:.04em}
.cs .cond-card .cc-pct{flex:none;margin-left:auto;padding:7px 12px;border-radius:999px;background:var(--sakura);color:var(--sakura-ink);font:800 18px/1 var(--round);white-space:nowrap}
.cs .cond-card p{margin:0;padding-top:14px;border-top:1.5px dashed var(--line-2);color:var(--ink-2);font-size:15px;line-height:1.6}

.cs-lists{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:40px}
@media (min-width:900px){.cs-lists{grid-template-columns:1fr 1fr}}
.cs-list{padding:26px 28px;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.cs-list h2{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:21px}
.cs-list ul{margin:0;padding:0;list-style:none}
.cs-list li{position:relative;padding:7px 0 7px 26px;font-size:16px;line-height:1.5}
.cs-list li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.cs-list.is-ok{background:var(--mint);box-shadow:inset 0 0 0 1.5px var(--mint-2)}
.cs-list.is-ok .cs-li{background:#fff;color:var(--mint-ink)}
.cs-list.is-ok li::before{left:0;top:9px;width:18px;height:18px;background:var(--mint-ink) var(--i-check) center/12px no-repeat}
.cs-list.is-ok li{padding-left:30px;color:var(--mint-ink)}
.cs-more{margin:14px 0 0;padding-top:12px;border-top:1.5px dashed var(--mint-2);color:var(--mint-ink);font-size:15px}
.cs-more a{color:var(--mint-ink);font-weight:700}

/* ================= Versand-Guide */
.sh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
@media (min-width:1100px){.sh-grid{grid-template-columns:minmax(0,760px) 340px;column-gap:64px;justify-content:center;align-items:start}.sh-grid .rd-main{grid-column:1}.sh-grid .sh-side{grid-column:2}}
.sh h2{margin:40px 0 16px;font-size:clamp(22px,2vw,26px)}
.sh .rd-main section:first-of-type h2{margin-top:0}
.sh-steps{margin:0;padding:0;list-style:none;counter-reset:sh}
.sh-steps li{position:relative;max-width:66ch;margin:0;padding:10px 0 22px 60px;font-size:17px;line-height:1.65;counter-increment:sh}
.sh-steps li::before{content:counter(sh);position:absolute;left:0;top:4px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:800 17px/1 var(--round);box-shadow:0 0 0 5px var(--bg)}
.sh-steps li::after{content:"";position:absolute;left:19px;top:50px;bottom:0;border-left:2px dashed var(--line-2)}
.sh-steps li:last-child::after{display:none}
.sh-tiers{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.sh-tiers li{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:18px;align-items:baseline;margin:0;padding:18px 22px;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:16px;line-height:1.55}
.sh-tiers li b{color:var(--ink);font:800 18px/1.25 var(--round);white-space:nowrap}
.sh .notice{max-width:none}
.sh-side{min-width:0}
@media (min-width:1100px){.sh-side{position:sticky;top:calc(var(--stick) + 36px);margin-top:118px}}
.sh-label{position:relative;padding:24px 26px 22px;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-2),inset 0 0 0 1px var(--line)}
.sh-label::before{content:"";position:absolute;inset:8px;border:1.5px dashed var(--line-2);border-radius:20px;pointer-events:none}
.sh .sh-label h2{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:20px}
.sh-label p{position:relative;margin:0}
.sh-label p b{display:block;margin-bottom:12px;color:var(--ink);font:800 19px/1.45 var(--round);letter-spacing:-.01em}
.sh-label p .small{display:block;padding-right:84px;color:var(--ink-2)}
/* Stempel sitzt ganz auf dem Etikett, leicht schräg aufgedrückt */
.sh-label .hanko{position:absolute;right:18px;bottom:16px;width:70px;height:70px;font-size:14px;rotate:-10deg;opacity:.92}
.sh .rd-next{max-width:1164px;margin:48px auto 0}   /* bündig mit dem Zweispalter (760 + 64 + 340) */

/* ================= Rechtsseiten (/seite/…) */
.lg .rd-doc{padding:44px 52px 36px;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);font-size:16.5px;line-height:1.72}
.lg .rd-doc h2{margin:1.8em 0 .6em;padding-top:1.3em;border-top:1.5px dashed var(--line-2);font-size:clamp(20px,1.8vw,23px)}
.lg .rd-doc>h2:first-child,.lg .rd-doc>.notice:first-child+h2{margin-top:.8em;padding-top:0;border-top:0}
.lg .rd-doc .notice{display:block;max-width:none}
.lg .rd-doc img{display:block;max-width:100%;height:auto;border-color:var(--line)!important;border-radius:var(--r-s)!important}
.lg .rd-doc a{overflow-wrap:anywhere}
.rd-print{margin:18px 0 0}

/* ================= Fehlerseiten */
.er.error-page{padding-top:64px;padding-bottom:88px;text-align:center}
.er-art{position:relative;display:inline-block;margin:0 auto 22px;padding:0 104px 0 40px}
/* eine Gans pro Blick: error.html leert den Block footer_goose in base.html, sie sitzt hier am Fehlercode */
.er .code{position:relative;color:transparent;-webkit-text-stroke:3px var(--sakura-2);font:800 clamp(112px,17vw,188px)/.9 var(--round);letter-spacing:-.04em}
.er-goose{position:absolute;right:0;bottom:-8px;width:128px;rotate:6deg}
.er-goose .goose{display:block;width:100%;height:auto}
.er h1{max-width:22ch;margin:0 auto 12px}
.er-text{max-width:52ch;margin:0 auto;color:var(--ink-2);font-size:18px;line-height:1.55}
.er-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}

/* == Hover nur mit Maus */
@media (hover:hover) and (pointer:fine){
  .toc a:hover{color:var(--ink)}
  .toc a:hover::before{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
  .fq-chips a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .fq-chips a[aria-current]:hover{box-shadow:none}
  .rd-next .btn-primary:hover svg{transform:translateX(3px)}
  .rd-toc-m summary:hover{color:var(--ichigo-hover)}
}

/* == Handy */
@media (max-width:760px){
  .rd{padding-top:26px;padding-bottom:44px}
  .rd-head{margin-bottom:24px}
  .rd-head p{font-size:16.5px}
  .rd .prose{font-size:16.5px}
  .hw-step{padding:0 0 30px}
  .hw-step::before{display:none}
  .hw-n{width:42px;height:42px;font-size:17px}
  .hw-step h2{display:flex;align-items:center;min-height:42px;padding:0 0 0 56px}
  .hw-step>p{font-size:16.5px}
  .hw-alt{padding:18px 18px 2px}
  .hw-price{margin:36px -4px 0;padding:24px 20px 10px;border-radius:var(--r-l)}
  .hw-facts li{font-size:16px}
  .fq-chips{margin:0 -16px 4px}
  .fq-chips ul{padding:2px 16px 10px;scroll-padding-inline:16px}
  .cs .cond-grid{grid-template-columns:minmax(0,1fr)}
  .cs-meter{padding:16px 14px 12px}
  .cs-bar{height:76px}
  .cs-list{padding:22px 20px}
  .sh-steps li{padding-left:54px;font-size:16.5px}
  .sh-tiers li{grid-template-columns:minmax(0,1fr);row-gap:4px;padding:16px 18px}
  .lg .rd-doc{margin:0 -4px;padding:24px 20px 18px;font-size:16px;border-radius:var(--r-m)}
  .rd-next{margin-top:40px}
  .rd-next .btn{flex:1 1 auto}
  .rd-next .btn-primary{flex-basis:100%}
  .er.error-page{padding-top:40px;padding-bottom:64px}
  .er-art{padding:0 70px 0 10px}
  .er-goose{width:84px;right:0;bottom:-6px}
  .er-act .btn{flex:1 1 100%}
}

@media print{
  .rd-side,.rd-toc-m,.rd-next,.rd-print{display:none!important}
  .rd-grid{display:block}
  .lg .rd-doc{padding:0;box-shadow:none}
}