@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Outfit';src:url('/assets/fonts/outfit-var.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --wollweiss:#FAF7F0;
  --leinen:#FFFDF9;
  --naturwolle:#EDE4D6;
  --naturwolle-tief:#E2D6C4;
  --wollgrau:#B4ADA1;
  --ink:#2E2A24;
  --ink-tief:#1E1B17;
  --ink-weich:#4A443B;
  --grau-text:#6B6459;
  --moos:#6B7F4F;
  --moos-hell:#8FA173;
  --moos-text:#4F6139;
  --terra:#C97B4E;
  --terra-text:#A25626;
  --linie:#DDD3C4;
  --linie-zart:#EAE2D5;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --text:'Outfit','Segoe UI',system-ui,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
  --rand:clamp(1.25rem,5vw,4rem);
  --max:1240px;
  --rund:14px;
  --spur:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--wollweiss);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1.0625rem,1.0rem + 0.3vw,1.1875rem);
  line-height:1.7;
  font-weight:350;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--display);margin:0 0 var(--s3);line-height:1.1;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.25rem,1.55rem + 3.4vw,4rem);font-variation-settings:'SOFT' 40,'WONK' 1}
h2{font-size:clamp(1.75rem,1.35rem + 2vw,2.75rem);font-variation-settings:'SOFT' 32,'WONK' 1}
h3{font-size:clamp(1.1875rem,1.09rem + 0.5vw,1.4375rem);letter-spacing:-.015em}
h4{font-size:1rem;margin-bottom:var(--s2);letter-spacing:-.01em}
p{margin:0 0 var(--s3);max-width:64ch}
a{color:var(--terra-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
img,svg{max-width:100%;height:auto}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--moos);outline-offset:3px;border-radius:4px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--leinen);font-family:var(--display);font-weight:600;
  padding:14px 24px;border-radius:0 0 12px 0;text-decoration:none;
}
.sprung:focus{left:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.wrap-text{max-width:68ch}
.eng{max-width:74ch}
.kursiv{font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1}

/* Wollfaden statt Steppnaht: eine feine Wellenlinie, die sich wiederholt. */
.faden{
  display:block;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='6' viewBox='0 0 26 6'%3E%3Cpath d='M0 3q6.5-3 13 0t13 0' fill='none' stroke='%23DDD3C4' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 50%;
}
.faden-hell{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='6' viewBox='0 0 26 6'%3E%3Cpath d='M0 3q6.5-3 13 0t13 0' fill='none' stroke='rgba(237,228,214,.45)' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.trenner{
  display:flex;align-items:center;gap:clamp(var(--s3),3vw,var(--s4));
  max-width:var(--max);margin-inline:auto;padding-inline:var(--rand);
  padding-block:clamp(var(--s4),5vw,var(--s6));
}
.trenner .faden{flex:1;min-width:0}
.trenner img{width:clamp(88px,11vw,132px);height:auto;flex:none}
.trenner-leer{padding-block:clamp(var(--s3),4vw,var(--s5));gap:0}

.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--text);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--moos-text);margin:0 0 var(--s3);
}
.kicker::before{content:"";width:32px;height:2px;background:currentColor;opacity:.5;flex:none}

/* ---------- Kopf ---------- */
header{position:relative;z-index:20;background:var(--wollweiss)}
.kante{height:6px;background:linear-gradient(90deg,var(--moos) 0 34%,var(--naturwolle-tief) 34% 66%,var(--terra) 66%)}
.kopf{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;padding-block:var(--s3)}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.marke svg,.marke img{flex:none;display:block;width:48px;height:48px}
.marke b{font-family:var(--display);font-size:1.375rem;font-weight:600;letter-spacing:-.03em;display:block;line-height:1}
.marke i{font-style:normal;font-size:.8125rem;color:var(--grau-text);display:block;margin-top:4px;letter-spacing:.02em}
nav{margin-left:auto}
nav ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);list-style:none;margin:0;padding:0}
nav a{
  position:relative;font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--ink);
  padding-block:10px;display:inline-block;
}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--terra);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--spur);
}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(var(--s5),6vw,var(--s7)) 0}
.hero .wrap{display:grid;gap:clamp(var(--s4),4vw,var(--s6));grid-template-columns:1fr;align-items:center}
@media(min-width:920px){.hero .wrap{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
.hero h1{margin-bottom:var(--s4);text-wrap:balance}
.lead{font-size:1.1875em;color:var(--ink-weich);max-width:46ch}
.lead b{font-weight:600;color:var(--ink)}

.buehne{position:relative;justify-self:center;width:min(100%,460px)}
.buehne::before{
  content:"";position:absolute;inset:8% 2% 6% 2%;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,var(--naturwolle) 0 58%,rgba(237,228,214,0) 72%);
}
.buehne img,.buehne svg{position:relative;display:block;width:100%}

.tat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s4)}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  background:var(--terra);color:#fff;font-family:var(--text);
  font-weight:600;font-size:1rem;text-decoration:none;padding:13px 30px;border-radius:999px;
  border:none;cursor:pointer;
  transition:transform .3s var(--spur),background-color .3s;
}
.knopf:hover{background:var(--terra-text);color:#fff;transform:translateY(-2px)}
.knopf-leise{background:transparent;color:var(--ink);border:1px solid var(--linie)}
.knopf-leise:hover{background:var(--naturwolle);color:var(--ink)}
.knopf svg{width:16px;height:16px;flex:none}

/* Scanner: ein schmaler Lichtstreifen laeuft einmal quer ueber den Knopf.
   Nur transform wird bewegt, der Streifen liegt hinter der Beschriftung. */
.knopf{position:relative;overflow:hidden;isolation:isolate}
.knopf > *{position:relative;z-index:1}
.knopf::after{
  content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,0) 62%);
  transform:translateX(-130%);
  transition:transform .65s var(--spur);
}
.knopf:hover::after,.knopf:focus-visible::after{transform:translateX(130%)}
/* Auf dem hellen Knopf waere Weiss unsichtbar, dort laeuft der Streifen dunkel */
.knopf-leise::after{
  background:linear-gradient(104deg,
    rgba(46,42,36,0) 38%,
    rgba(46,42,36,.10) 50%,
    rgba(46,42,36,0) 62%);
}
@media(prefers-reduced-motion:reduce){
  .knopf::after{transition:none}
  .knopf:hover::after,.knopf:focus-visible::after{transform:translateX(-130%)}
}
.weiter{
  font-size:.9375rem;font-weight:500;color:var(--ink);
  text-decoration:none;border-bottom:2px solid var(--linie);padding-bottom:3px;
  transition:border-color .3s;
}
.weiter:hover{border-bottom-color:var(--terra);color:var(--ink)}

/* ---------- Baender ---------- */
.band{position:relative;padding-block:clamp(var(--s5),7vw,var(--s7))}
.band-natur{background:var(--naturwolle)}
.band-leinen{background:var(--leinen)}
.band-ink{background:var(--ink);color:var(--naturwolle)}
.band-ink h2,.band-ink h3{color:var(--leinen)}
.band-ink p{color:#D8D0C3}
.band-ink a{color:var(--naturwolle)}
.band-ink a:hover{color:#fff}
.band-ink .kicker{color:var(--moos-hell)}
.band-stempel{padding-block:var(--s5)}
.stempel{font-size:.8125rem;color:var(--grau-text);margin:0}

.krumen{margin:0 0 var(--s4)}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;
  font-size:.8125rem;font-weight:500;color:var(--grau-text)}
.krumen li+li::before{content:"›";margin-right:.5rem;color:var(--linie)}
.krumen a{color:var(--grau-text);text-decoration:none}
.krumen a:hover{color:var(--ink);text-decoration:underline}

/* ---------- Produkte: die Reihe oben ---------- */
.reihe-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s3);
  flex-wrap:wrap;margin-bottom:var(--s3)}
.reihe-kopf .kicker{margin-bottom:0}
.stand{font-size:.8125rem;color:var(--grau-text)}

.reihe{display:grid;gap:var(--s2);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:620px){.reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}}
@media(min-width:1080px){.reihe{grid-template-columns:repeat(4,minmax(0,1fr))}}

.karte{
  background:var(--leinen);border:1px solid var(--linie);border-radius:var(--rund);
  padding:var(--s3);display:flex;flex-direction:column;
  transition:border-color .3s var(--spur),transform .3s var(--spur);
}
.karte:hover{border-color:var(--terra);transform:translateY(-2px)}
.karte-empfehlung{border-color:var(--moos);border-width:2px;padding:calc(var(--s3) - 1px)}
.fahne{
  align-self:flex-start;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--leinen);background:var(--moos);padding:4px 11px;border-radius:999px;margin-bottom:var(--s2)
}
.fahne-leise{background:var(--naturwolle-tief);color:var(--ink-weich)}
/* Produktbilder kommen von Amazon und haben fast immer einen weissen Grund.
   Die Box ist deshalb selbst weiss, sonst steht das Bild als heller Kasten in
   einer beigen Flaeche. Die feine Linie uebernimmt die Abgrenzung. */
.karte-bild{
  background:#fff;border:1px solid var(--linie-zart);border-radius:10px;
  aspect-ratio:4/3;display:grid;place-items:center;
  margin-bottom:var(--s2);overflow:hidden;padding:0;
  transition:border-color .35s var(--spur),box-shadow .35s var(--spur)
}
.karte-bild img{
  width:100%;height:100%;object-fit:contain;padding:12px;
  transition:transform .55s var(--spur)
}
.karte-bild span{font-size:.6875rem;color:var(--grau-text);text-align:center;line-height:1.4}
.karte:hover .karte-bild{border-color:var(--linie);box-shadow:0 6px 20px -12px rgba(46,42,36,.45)}
.karte:hover .karte-bild img{transform:scale(1.07)}
.karte-bild a{display:block;width:100%;height:100%}
.karte-bild a:focus-visible{outline-offset:-3px}
.hersteller{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grau-text);margin:0 0 4px}
.karte h3{font-size:1.0625rem;line-height:1.25;margin-bottom:var(--s2);
  font-variation-settings:'SOFT' 28;letter-spacing:-.01em}
.daten{list-style:none;margin:0 0 var(--s3);padding:0;font-size:.875rem;color:var(--ink-weich);
  border-top:1px solid var(--linie-zart)}
.daten li{display:flex;justify-content:space-between;gap:var(--s2);
  padding:6px 0;border-bottom:1px solid var(--linie-zart)}
.daten .k{color:var(--grau-text);flex:none}
.daten .v{font-weight:500;text-align:right}
.karte-fuss{margin-top:auto;display:flex;flex-direction:column;gap:var(--s1);align-items:stretch}
.zumdetail{
  font-size:.875rem;font-weight:500;color:var(--moos-text);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
}
.zumdetail:hover{color:var(--moos-text);text-decoration:underline;text-underline-offset:3px}
.zumdetail svg{width:14px;height:14px;transition:transform .25s var(--spur)}
.zumdetail:hover svg{transform:translateY(2px)}

/* ---------- Produkte: die Besprechung unten ---------- */
/* Die ganze Besprechung steht als weisse Karte auf dem beigen Band. Das
   Produktbild bringt selbst Weiss mit, deshalb ist der Kasten drumherum auch
   weiss - sonst sitzt eine helle Flaeche in einer beigen Flaeche. */
.detail{
  background:#fff;border:1px solid var(--linie-zart);border-radius:var(--rund);
  padding:clamp(var(--s3),3vw,var(--s5));
  margin-top:var(--s3);scroll-margin-top:var(--s4);
  transition:border-color .35s var(--spur),box-shadow .35s var(--spur)
}
.detail:first-of-type{margin-top:0}
.detail:hover{border-color:var(--linie);box-shadow:0 12px 36px -22px rgba(46,42,36,.5)}
.detail-satz{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:880px){
  .detail-satz{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(var(--s4),4vw,var(--s5))}
  .detail:nth-of-type(even) .detail-satz{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
  .detail:nth-of-type(even) .detail-bild{order:2}
}
.detail-bild{
  background:#fff;border-radius:10px;
  aspect-ratio:1;display:grid;place-items:center;padding:0;align-self:start;
  overflow:hidden
}
.detail-bild img{
  width:100%;height:100%;object-fit:contain;padding:var(--s4);
  transition:transform .55s var(--spur)
}
.detail-bild span{font-size:.75rem;color:var(--grau-text);text-align:center;padding:var(--s3)}
.detail-bild a{display:block;width:100%;height:100%}
.detail:hover .detail-bild img{transform:scale(1.06)}
.detail-bild:hover img{transform:scale(1.09)}
@media(prefers-reduced-motion:reduce){
  .karte-bild img,.detail-bild img{transition:none}
  .karte:hover .karte-bild img,.detail-bild:hover img,
  .detail:hover .detail-bild img{transform:none}
}
.detail h3{margin-bottom:var(--s3);font-size:clamp(1.3125rem,1.15rem + .7vw,1.625rem)}
.detail .hersteller{color:var(--moos-text);font-size:.75rem}

.tabelle{width:100%;border-collapse:collapse;font-size:.9375rem;margin-bottom:var(--s3)}
.tabelle th,.tabelle td{text-align:left;padding:9px 0;border-bottom:1px solid var(--linie-zart);vertical-align:top}
.detail .tabelle th,.detail .tabelle td{border-bottom-color:var(--linie-zart)}
.tabelle th{font-weight:400;color:var(--grau-text);width:11rem;font-family:var(--text)}
.tabelle td{font-weight:500}

.waage{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-bottom:var(--s3)}
@media(min-width:560px){.waage{grid-template-columns:1fr 1fr}}
.waage h4{font-family:var(--text);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:var(--s1)}
.waage .plus h4{color:var(--moos-text)}
.waage .minus h4{color:var(--terra-text)}
.waage ul{margin:0;padding-left:1.1em;font-size:.9375rem;color:var(--ink-weich)}
.waage li{margin-bottom:5px}

.stimmen{background:var(--naturwolle);border-radius:var(--rund);padding:var(--s3);margin-bottom:var(--s3)}
.stimmen h4{font-family:var(--text);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau-text);margin-bottom:var(--s1)}
.stimmen p{font-size:.9375rem;margin-bottom:0;color:var(--ink-weich);max-width:none}
.detail-fuss{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.hoch{font-size:.875rem;color:var(--grau-text);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.hoch:hover{color:var(--terra-text)}

/* ---------- Textbausteine ---------- */
.hinweis{
  border:1px solid var(--linie);border-radius:var(--rund);background:var(--leinen);
  padding:var(--s3) var(--s4);margin:var(--s4) 0;max-width:64ch;
}
.hinweis-kopf{
  font-family:var(--text);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moos-text);margin:0 0 var(--s1);
}
.hinweis-achtung .hinweis-kopf{color:var(--terra-text)}
.hinweis p:last-child{margin-bottom:0}

.rand-satz{display:grid;gap:var(--s4) clamp(var(--s4),5vw,var(--s6));grid-template-columns:1fr}
@media(min-width:960px){.rand-satz{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:start}}
.marginal{font-size:.9375em;line-height:1.65}
.marginal p{margin-bottom:var(--s2)}
.marginal .tag{
  display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:rgba(46,42,36,.09);margin-bottom:var(--s2);
}
.band-ink .marginal .tag{background:rgba(237,228,214,.15)}
.band-ink .marginal p{color:#C8C0B3}

/* Faserskala */
.skala{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.skala li{display:grid;grid-template-columns:1fr;gap:var(--s1)}
@media(min-width:640px){.skala li{grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s3);align-items:center}}
.skala .name{font-family:var(--display);font-weight:600;font-size:1.0625rem;line-height:1.2}
.skala .name small{display:block;font-family:var(--text);font-weight:400;font-size:.75rem;
  color:var(--grau-text);margin-top:2px}
.band-ink .skala .name small{color:var(--wollgrau)}
.skala .bahn{display:block;height:12px;border-radius:999px;background:var(--naturwolle);position:relative;overflow:hidden}
.band-ink .skala .bahn{background:rgba(237,228,214,.16)}
.skala .bahn i{position:absolute;inset-block:0;border-radius:999px;display:block}
.skala .wert{font-size:.8125rem;color:var(--grau-text);margin:5px 0 0}
.band-ink .skala .wert{color:var(--wollgrau)}

/* Massliste */
.masse{list-style:none;margin:var(--s5) 0 0;padding:0}
.masse li{
  display:grid;gap:var(--s1) var(--s4);grid-template-columns:1fr;
  padding-block:var(--s3);border-top:1px solid rgba(237,228,214,.2);
}
@media(min-width:760px){.masse li{grid-template-columns:minmax(0,13rem) minmax(0,9rem) minmax(0,1fr);align-items:baseline}}
.masse li:last-child{border-bottom:1px solid rgba(237,228,214,.2)}
.masse .mass{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);line-height:1;color:var(--leinen)}
.masse .fuer{font-size:.9375em;color:var(--moos-hell);font-weight:500}
.masse .was{margin:0;color:#C8C0B3;font-size:.9688em;max-width:48ch}

/* Themenliste */
.stapel{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-top:var(--s5)}
@media(min-width:880px){.stapel{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s5);align-items:start}}
.haupt-thema{
  display:block;background:var(--leinen);border:1px solid var(--linie);border-radius:var(--rund);
  padding:clamp(var(--s3),3vw,var(--s5));text-decoration:none;color:var(--ink);
  transition:border-color .3s var(--spur),transform .3s var(--spur);
}
.haupt-thema:hover{border-color:var(--terra);transform:translateY(-2px);color:var(--ink)}
.haupt-thema .zahl{
  font-family:var(--text);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moos-text);display:block;margin-bottom:var(--s2);
}
.haupt-thema h3{margin-bottom:var(--s2)}
.haupt-thema p{margin-bottom:var(--s3);color:var(--ink-weich);font-size:.9688em}
.pfeil{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9375rem;color:var(--terra-text)}
.pfeil svg{transition:transform .3s var(--spur)}
.haupt-thema:hover .pfeil svg{transform:translateX(4px)}

.liste{list-style:none;margin:0;padding:0}
.liste li+li{border-top:1px solid var(--linie)}
.liste a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;
  padding-block:var(--s3);text-decoration:none;color:var(--ink);
}
.liste a:hover{color:var(--terra-text)}
.liste .nr{font-family:var(--text);font-size:.8125rem;font-weight:600;color:var(--moos-text);letter-spacing:.06em}
.liste .txt strong{display:block;font-family:var(--display);font-size:1.0625rem;font-weight:600;
  letter-spacing:-.015em;margin-bottom:2px}
.liste .txt span{font-size:.9375rem;color:var(--grau-text)}
.liste .zeichen{color:var(--linie);transition:transform .3s var(--spur),color .3s}
.liste a:hover .zeichen{transform:translateX(4px);color:var(--terra)}

.sprungmarken{background:var(--leinen);border:1px solid var(--linie);border-radius:var(--rund);
  padding:var(--s3) var(--s4);margin:0 0 var(--s5)}
.sprungmarken h2{font-family:var(--text);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau-text);margin-bottom:var(--s2)}
.sprungmarken ol{margin:0;padding-left:1.3em;font-size:.9375rem}
.sprungmarken li{margin-bottom:5px}

.abbinder{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between;
  max-width:var(--max);margin-inline:auto;padding:clamp(var(--s4),5vw,var(--s6)) var(--rand);
}
.abbinder h2{margin-bottom:var(--s2)}
.abbinder p{margin-bottom:0;color:var(--ink-weich)}

.prose h2{margin-top:var(--s5)}
.prose h3{margin-top:var(--s4)}
.prose > *:first-child{margin-top:0}

/* ---------- Fuss ---------- */
footer{background:var(--ink);color:var(--naturwolle);margin-top:var(--s6)}
footer .wrap{padding-block:var(--s6) var(--s4)}
footer h2{font-family:var(--text);font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wollgrau);margin-bottom:var(--s2)}
footer p{color:#C8C0B3;font-size:.9375rem}
footer a{color:var(--naturwolle);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px;color:#fff}
footer ul{list-style:none;margin:0;padding:0;font-size:.9375rem}
footer li{margin-bottom:8px}
.fuss-satz{display:grid;gap:var(--s4) var(--s5);grid-template-columns:1fr}
@media(min-width:760px){.fuss-satz{grid-template-columns:1.5fr 1fr 1fr}}
.fuss-ende{margin-top:var(--s5)}
.fuss-ende p{margin:var(--s3) 0 0;font-size:.8125rem;color:var(--wollgrau);max-width:none}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf-satz{display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.seitenkopf-satz{grid-template-columns:minmax(0,1fr) minmax(0,300px)}}
.seitenkopf-bild{justify-self:center;position:relative;width:min(100%,300px)}
.seitenkopf-bild::before{
  content:"";position:absolute;inset:6% 2%;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,var(--naturwolle) 0 58%,rgba(237,228,214,0) 72%);
}
.seitenkopf-bild img{position:relative;display:block;width:100%}
.prose ul{margin:0 0 var(--s3);padding-left:1.3em;max-width:64ch}
.prose li{margin-bottom:var(--s1)}

.hinweis-lieferbar{
  font-size:.9375rem;color:var(--terra-text);background:var(--leinen);
  border:1px solid var(--linie);border-radius:10px;padding:var(--s2) var(--s3);
  margin-bottom:var(--s3);max-width:none
}

/* Die Illustrationen bringen ihren eigenen cremefarbenen Grund mit. Ohne
   Rundung stehen sie als Kasten auf der Seite, deshalb weiche Kanten. */
.marke img{border-radius:50%}
.buehne img{border-radius:var(--rund)}
.seitenkopf-bild img{border-radius:var(--rund)}
.trenner img{border-radius:8px}

/* Merles Wort in der Produktbesprechung. Kompakter als der Hinweiskasten,
   weil er innerhalb einer Karte steht und nicht die Seite unterbrechen soll. */
.merle-wort{
  border-left:2px solid var(--moos);background:transparent;
  padding:2px 0 2px var(--s3);margin:0 0 var(--s3);max-width:60ch
}
.merle-kopf{
  font-family:var(--text);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--moos-text);margin:0 0 4px
}
.merle-wort p:last-child{margin-bottom:0;font-size:.9688em;color:var(--ink-weich)}
.detail .merle-wort{margin-bottom:var(--s3)}

/* Werbekennzeichnung an der Produktreihe. Aufklappbar, damit sie sichtbar ist,
   ohne den Blick auf die Produkte zu verstellen. */
.werbehinweis{
  border:1px solid var(--linie);border-radius:10px;background:var(--leinen);
  padding:var(--s2) var(--s3);margin-bottom:var(--s3);max-width:none
}
.werbehinweis summary{
  cursor:pointer;font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-weich);list-style:none
}
.werbehinweis summary::-webkit-details-marker{display:none}
.werbehinweis summary::before{content:"+ ";color:var(--terra-text);font-weight:700}
.werbehinweis[open] summary::before{content:"– "}
.werbehinweis p{font-size:.875rem;color:var(--grau-text);margin:var(--s2) 0 0;max-width:70ch}