@font-face{font-family:'Vollkorn';src:url('/assets/fonts/vollkorn-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Vollkorn';src:url('/assets/fonts/vollkorn-var-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Cabinet';src:url('/assets/fonts/cabinet-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cabinet';src:url('/assets/fonts/cabinet-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cabinet';src:url('/assets/fonts/cabinet-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* Die Palette stammt aus dem Signet: gruener Baum, goldener Stern, rote Kugel.
   Alle drei sind entsaettigt und abgedunkelt, damit aus der freundlichen
   Zeichnung eine Warenpraesentation wird, die teure Baeume tragen kann.
   Gruen ist die Grundfarbe der Marke, Rot der einzige Akzent fuer Handlungen,
   Gold nur Licht: feine Linien, Sterne, der Schimmer auf dem Knopf. */
:root{
  --papier:#FBF8F2;
  --papier-hell:#FFFDF8;
  --creme:#F2E9D9;
  --creme-tief:#E6D9C2;
  --grau-warm:#AFA694;

  --ink:#23211B;
  --ink-tief:#171610;
  --ink-weich:#453F34;
  --grau-text:#665F52;

  --tanne:#1E3D2F;
  --tanne-hell:#2C5C43;
  --tanne-licht:#5E8F6B;
  --tanne-text:#245140;

  --gold:#C49A34;
  --gold-licht:#E6CE93;
  --gold-text:#7C5D17;   /* war #8F6E1C: auf Creme nur 3,95:1 */

  --beere:#9C2B26;
  --beere-hell:#B8443E;

  --linie:#DCD0BA;
  --linie-zart:#EAE1CE;

  --display:'Vollkorn',Georgia,'Times New Roman',serif;
  --text:'Cabinet','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(--papier);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1.0625rem,1.0rem + 0.3vw,1.1875rem);
  line-height:1.7;
  font-weight:400;
  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.15;letter-spacing:-.015em;font-weight:600}
h1{font-size:clamp(2.25rem,1.55rem + 3.4vw,4rem);line-height:1.05}
h2{font-size:clamp(1.75rem,1.35rem + 2vw,2.75rem)}
h3{font-size:clamp(1.1875rem,1.09rem + .5vw,1.4375rem)}
h4{font-size:1rem;margin-bottom:var(--s2)}
p{margin:0 0 var(--s3);max-width:64ch}
a{color:var(--tanne-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--beere)}
img,svg{max-width:100%;height:auto}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--tanne-hell);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(--tanne);color:var(--papier-hell);font-family:var(--display);font-weight:700;
  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}

/* Der Zweig ersetzt die uebliche graue Linie: eine Tannenreihe, die sich
   wiederholt. Als data-URI, damit kein zusaetzlicher Request faellt. */
.zweig{
  display:block;height:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cg fill='none' stroke='%23DCD0BA' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 5h34'/%3E%3Cpath d='M7 5l-3-3M7 5l-3 3M17 5l-3-3M17 5l-3 3M27 5l-3-3M27 5l-3 3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 50%;
}
.zweig-gold{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cg fill='none' stroke='rgba(230,206,147,.55)' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 5h34'/%3E%3Cpath d='M7 5l-3-3M7 5l-3 3M17 5l-3-3M17 5l-3 3M27 5l-3-3M27 5l-3 3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Trenner: Zweig, Zeichen, Zweig. Das Zeichen wechselt je Abschnitt, damit die
   Seite beim Scrollen einen Rhythmus bekommt statt immer derselben Linie. */
.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 .zweig{flex:1;min-width:0}
.trenner img{width:clamp(88px,11vw,132px);height:auto;flex:none;border-radius:8px}
.trenner svg{width:clamp(38px,5vw,56px);height:auto;flex:none;color:var(--gold)}
.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:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tanne-text);margin:0 0 var(--s3);
}
.kicker::before{content:"";width:32px;height:2px;background:currentColor;opacity:.45;flex:none}

/* ---------- Kopf ---------- */
header{position:relative;z-index:20;background:var(--papier)}
.kante{height:6px;background:linear-gradient(90deg,var(--tanne) 0 40%,var(--gold) 40% 60%,var(--beere) 60%)}
.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 img,.marke svg{flex:none;display:block;width:48px;height:48px}
.marke b{font-family:var(--display);font-size:1.375rem;font-weight:700;letter-spacing:-.02em;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(--beere);
  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 ---------- */
/* Der Vorlauf bis zum ersten Produkt ist knapp gehalten. Auf der Startseite
   darf der Hero mehr Raum nehmen als auf einer Kaufseite, aber auch hier
   gilt: je frueher die Ware sichtbar ist, desto besser. */
.hero{position:relative;padding-block:clamp(var(--s4),4vw,var(--s6)) 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:700;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% 44%,var(--creme) 0 56%,rgba(242,233,217,0) 72%);
}
.buehne img,.buehne svg{position:relative;display:block;width:100%;border-radius:var(--rund)}

.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(--beere);color:#fff;font-family:var(--text);
  font-weight:700;font-size:1rem;text-decoration:none;padding:13px 30px;border-radius:999px;
  border:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--spur),background-color .3s;
}
.knopf:hover{background:var(--beere-hell);color:#fff;transform:translateY(-2px)}
.knopf-leise{background:transparent;color:var(--ink);border:1px solid var(--linie)}
.knopf-leise:hover{background:var(--creme);color:var(--ink)}
.knopf svg{width:16px;height:16px;flex:none}
.knopf > *{position:relative;z-index:1}

/* Kerzenschein: ein warmer Lichtstreifen laeuft einmal ueber den Knopf. */
.knopf::after{
  content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(230,206,147,0) 38%,
    rgba(230,206,147,.55) 50%,
    rgba(230,206,147,0) 62%);
  transform:translateX(-130%);
  transition:transform .65s var(--spur);
}
.knopf:hover::after,.knopf:focus-visible::after{transform:translateX(130%)}
.knopf-leise::after{
  background:linear-gradient(104deg,
    rgba(35,33,27,0) 38%,
    rgba(35,33,27,.09) 50%,
    rgba(35,33,27,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(--beere);color:var(--ink)}

/* ---------- Baender ---------- */
.band{position:relative;padding-block:clamp(var(--s5),7vw,var(--s7))}
.band-creme{background:var(--creme)}
.band-hell{background:var(--papier-hell)}
/* Das dunkle Band faerbt seinen Text hell - aber nur seinen eigenen. Kaesten,
   die ihren Grund selbst malen (Karte, Besprechung, Kaeuferstimmen,
   Hinweiskasten), sind ausgenommen und behalten ihre dunklen Schriftfarben.
   Ohne diese Ausnahme stand der Produktname in #FFFDF8 auf weissem Grund:
   Kontrast 1,0:1, also unsichtbar. Die Liste steht viermal da, weil CSS
   Selektorlisten nicht in einer Variable halten kann - wer sie aendert,
   aendert sie in allen vier Zeilen und in der Zeile darunter. */
.band-tanne{background:var(--tanne);color:var(--creme)}
.band-tanne :is(h2,h3):not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *){color:var(--papier-hell)}
.band-tanne p:not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *){color:#D3CCBC}
.band-tanne a:not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *){color:var(--gold-licht)}
.band-tanne a:not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *):hover{color:#fff}
.band-tanne .kicker{color:var(--gold-licht)}

/* Und die Kaesten selbst: wer seinen Grund malt, faerbt auch seine Schrift,
   statt sie vom Abschnitt zu erben. */
.karte,.detail,.stimmen,.blatt,.haupt-thema,.sprungmarken{color:var(--ink)}
.band-stempel{padding-block:var(--s5)}
.stempel{font-size:.8125rem;color:var(--grau-text);margin:0}

/* Sternenhimmel im dunklen Band. Rein dekorativ, sehr zurueckhaltend, und
   ausserhalb des Textflusses, damit nichts die Lesbarkeit stoert. */
.band-tanne{overflow:hidden}
.band-tanne::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,var(--gold-licht) 50%,transparent 51%),
    radial-gradient(1px 1px at 28% 68%,var(--gold-licht) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 16%,var(--gold-licht) 50%,transparent 51%),
    radial-gradient(1px 1px at 63% 82%,var(--gold-licht) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 34%,var(--gold-licht) 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 61%,var(--gold-licht) 50%,transparent 51%);
}
.band-tanne > *{position:relative}

.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(--papier-hell);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(--gold);transform:translateY(-2px)}
.karte-empfehlung{border-color:var(--tanne-hell);border-width:2px;padding:calc(var(--s3) - 1px)}
.fahne{
  align-self:flex-start;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--papier-hell);background:var(--tanne-hell);padding:4px 11px;border-radius:999px;margin-bottom:var(--s2)
}
.fahne-leise{background:var(--creme-tief);color:var(--ink-weich)}
/* Produktbilder von Amazon haben fast immer weissen Grund. Die Box ist deshalb
   selbst weiss, sonst steht ein heller Kasten in einer cremefarbenen Flaeche. */
.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(30,61,47,.5)}
.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:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grau-text);margin:0 0 4px}
.karte h3{font-size:1.0625rem;line-height:1.3;margin-bottom:var(--s2);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(--tanne-text);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
}
.zumdetail:hover{color:var(--beere);text-decoration:underline;text-underline-offset:3px}
.zumdetail svg{width:14px;height:14px;transition:transform .25s var(--spur)}
.zumdetail:hover svg{transform:translateY(2px)}

/* Groessenwahl direkt in der Karte. Jede Groesse ist ein eigener Amazon-Link,
   damit der Besucher nicht erst auf der Produktseite suchen muss. */
.groessen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s2);padding:0;list-style:none}
.groessen li{margin:0}
.groessen a{
  display:inline-block;font-size:.8125rem;font-weight:500;text-decoration:none;
  color:var(--ink-weich);background:var(--creme);border:1px solid var(--linie-zart);
  border-radius:999px;padding:4px 12px;min-height:32px;line-height:22px;
  transition:background-color .25s,border-color .25s,color .25s;
}
.groessen a:hover{background:var(--tanne-hell);border-color:var(--tanne-hell);color:#fff}
.groessen-titel{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grau-text);margin:0 0 6px}

/* ---------- Produkte: die Besprechung unten ---------- */
.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(30,61,47,.55)}
.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(--tanne-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}
.tabelle th{font-weight:400;color:var(--grau-text);width:11rem;font-family:var(--text)}
.tabelle td{font-weight:500}

/* Breite Datentabelle mit mehreren Zahlenspalten. Die schmale th-Spalte von
   .tabelle passt hier nicht, und auf dem Telefon muss die Tabelle in ihrem
   eigenen Rahmen scrollen duerfen - sonst schiebt sie die ganze Seite quer. */
.tabelle-rahmen{overflow-x:auto;margin-bottom:var(--s3);
  -webkit-overflow-scrolling:touch}
.tabelle.breit{min-width:34rem;margin-bottom:0}
.tabelle.breit th{width:auto}
.tabelle.breit thead th{font-weight:700;color:var(--ink);white-space:nowrap;
  border-bottom:1px solid var(--linie)}
.tabelle.breit tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
.tabelle.breit td{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabelle caption{caption-side:bottom;padding-top:var(--s2);font-size:.8125rem;
  color:var(--grau-text);text-align:left}

.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:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:var(--s1)}
.waage .plus h4{color:var(--tanne-text)}
.waage .minus h4{color:var(--beere)}
.waage ul{margin:0;padding-left:1.1em;font-size:.9375rem;color:var(--ink-weich)}
.waage li{margin-bottom:5px}

/* Kaeuferstimmen. Eigene Zusammenfassung aus den Rezensionen, nie Zitat und
   nie Sterne.

   Bewusst OHNE Kasten und ohne farbigen Linksbalken: Der Balken ist das
   Erkennungsmerkmal generierter Seiten, und im Produktblock stehen ohnehin
   schon Tabelle und Waage in eigenen Flaechen. Stattdessen traegt die
   Ueberschrift eine Haarlinie bis zum Rand, wie ein Zwischentitel im
   Magazin. Der Text darf dadurch etwas groesser und ruhiger stehen. */
.stimmen{margin:var(--s4) 0}
.stimmen h4{display:flex;align-items:center;gap:.7em;font-family:var(--text);
  font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:var(--s2)}
.stimmen h4::after{content:"";flex:1;height:1px;background:var(--creme-tief)}
.stimmen p{font-size:1rem;margin-bottom:0;color:var(--ink-weich);max-width:62ch}
.stimmen p+p{margin-top:var(--s2)}
.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(--beere)}

/* Groessenmatrix in der Besprechung. Eine Zeile je Groesse mit eigenem Link,
   weil Amazon jede Groesse als eigene ASIN fuehrt. */
.matrix{width:100%;border-collapse:collapse;font-size:.9375rem;margin:0 0 var(--s3)}
.matrix caption{
  font-family:var(--text);font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau-text);text-align:left;padding-bottom:var(--s1)
}
.matrix th,.matrix td{text-align:left;padding:10px 0;border-bottom:1px solid var(--linie-zart);vertical-align:middle}
.matrix thead th{font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grau-text)}
.matrix tbody th{font-family:var(--display);font-weight:700;font-size:1.0625rem;width:8rem}
.matrix td:last-child{text-align:right}
.matrix .zumshop{
  font-size:.8125rem;font-weight:700;text-decoration:none;color:var(--beere);
  display:inline-flex;align-items:center;gap:5px;min-height:32px
}
.matrix .zumshop:hover{text-decoration:underline;text-underline-offset:3px}
.matrix .zumshop svg{width:12px;height:12px;transition:transform .25s var(--spur)}
.matrix .zumshop:hover svg{transform:translateX(3px)}

/* ---------- Textbausteine ---------- */
/* Ein Kasten, der eine eigene Flaeche mitbringt, muss auch eine eigene
   Textfarbe mitbringen. Sonst erbt er die des Abschnitts, und auf .band-tanne
   stand cremefarbener Text (#D3CCBC) auf fast weissem Grund: 1,57:1. */
.hinweis{
  border:1px solid var(--linie);border-radius:var(--rund);background:var(--papier-hell);
  padding:var(--s3) var(--s4);margin:var(--s4) 0;max-width:64ch;
  color:var(--ink);
}
.hinweis p{color:var(--ink)}
/* Die Kopfzeile steht als .hinweis .hinweis-kopf, nicht als .hinweis-kopf:
   Sie muss das .hinweis p von oben ueberbieten, sonst faerbt sich die
   Versalzeile mit dem Fliesstext ein und verliert ihr Tannengruen. */
.hinweis .hinweis-kopf{
  font-family:var(--text);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tanne-text);margin:0 0 var(--s1);
}
.hinweis-achtung .hinweis-kopf{color:var(--beere)}
.hinweis p:last-child{margin-bottom:0}

/* Auf dem dunklen Band bleibt der Kasten dunkel: durchscheinende Cremeflaeche
   wie bei .marginal .tag und .skala .bahn, statt eines weissen Blocks mitten
   im Tannengruen. Kontrast auf der so entstehenden Flaeche (#3E5748):
   Text 5,4:1, Kopfzeile 5,1:1, Einwandkopf 4,8:1. */
.band-tanne .hinweis{
  background:rgba(242,233,217,.15);
  border-color:rgba(242,233,217,.28);
  color:#DCD5C6;
}
.band-tanne .hinweis p{color:#DCD5C6}
.band-tanne .hinweis .hinweis-kopf{color:var(--gold-licht)}
.band-tanne .hinweis-achtung .hinweis-kopf{color:#F2BDB7}

.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:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:rgba(35,33,27,.08);margin-bottom:var(--s2);
}
.band-tanne .marginal .tag{background:rgba(242,233,217,.15)}
.band-tanne .marginal p{color:#C6BEAD}

/* Groessenskala fuer Baumhoehen. Zeigt auf einen Blick, welche Hoehe zu
   welcher Raumhoehe passt. */
.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:700;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-tanne .skala .name small{color:var(--grau-warm)}
.skala .bahn{display:block;height:12px;border-radius:999px;background:var(--creme);position:relative;overflow:hidden}
.band-tanne .skala .bahn{background:rgba(242,233,217,.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-tanne .skala .wert{color:var(--grau-warm)}

/* 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(242,233,217,.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(242,233,217,.2)}
.masse .mass{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);line-height:1;color:var(--papier-hell)}
.masse .fuer{font-size:.9375em;color:var(--gold-licht);font-weight:500}
.masse .was{margin:0;color:#C6BEAD;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(--papier-hell);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(--gold);transform:translateY(-2px);color:var(--ink)}
.haupt-thema .zahl{
  font-family:var(--text);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tanne-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:700;font-size:.9375rem;color:var(--beere)}
.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(--beere)}
.liste .nr{font-family:var(--text);font-size:.8125rem;font-weight:700;color:var(--tanne-text);letter-spacing:.06em}
.liste .txt strong{display:block;font-family:var(--display);font-size:1.0625rem;font-weight:700;
  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(--gold)}

.sprungmarken{background:var(--papier-hell);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:700;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}
.prose ul{margin:0 0 var(--s3);padding-left:1.3em;max-width:64ch}
.prose li{margin-bottom:var(--s1)}

/* ---------- Fuss ---------- */
footer{background:var(--ink-tief);color:var(--creme);margin-top:var(--s6)}
footer .wrap{padding-block:var(--s6) var(--s4)}
footer h2{font-family:var(--text);font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau-warm);margin-bottom:var(--s2)}
footer p{color:#C6BEAD;font-size:.9375rem}
footer a{color:var(--creme);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--gold-licht)}
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(--grau-warm);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(--creme) 0 58%,rgba(242,233,217,0) 72%);
}
.seitenkopf-bild img{position:relative;display:block;width:100%;border-radius:var(--rund)}

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

.marke img{border-radius:0}

/* 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(--papier-hell);
  padding:var(--s2) var(--s3);margin-bottom:var(--s3);max-width:none
}
.werbehinweis summary{
  cursor:pointer;font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink-weich);list-style:none
}
.werbehinweis summary::-webkit-details-marker{display:none}
.werbehinweis summary::before{content:"+ ";color:var(--beere);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}

/* Preis. In der Karte ueber dem Knopf, in der Besprechung als erste
   Tabellenzeile. Immer mit Abrufzeitpunkt, siehe produkte.php. */
.preis{
  font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 var(--s1)
}
.preis-stand{display:block;font-weight:400;font-size:.8125rem;color:var(--grau-text);margin-top:2px}

/* ---------- Downloads: Ausmalbilder, Karten, Vorlagen ---------- */
.blaetter{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  list-style:none;margin:var(--s4) 0 0;padding:0}
.blatt{
  display:block;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--linie-zart);border-radius:10px;overflow:hidden;
  transition:border-color .3s var(--spur),transform .3s var(--spur),box-shadow .3s var(--spur)
}
.blatt:hover{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 10px 28px -18px rgba(30,61,47,.5);color:var(--ink)}
.blatt img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:var(--s2);background:#fff}
.blatt span{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s1);
  padding:10px var(--s2);border-top:1px solid var(--linie-zart);
  font-size:.8125rem;font-weight:500;color:var(--ink-weich)
}
.blatt span svg{width:14px;height:14px;flex:none;color:var(--tanne-text);
  transition:transform .25s var(--spur)}
.blatt:hover span svg{transform:translateY(2px)}

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

/* ---------- Galerien ---------- */
/* Kleine Bildstrecken an verschiedenen Stellen. Bewusst kein Lightbox-Zauber:
   die Bilder sind Illustration, nicht Ware, sie muessen nicht gross aufgehen. */
.galerie{margin:var(--s5) 0;padding:0}
.galerie-kopf{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);
  margin:0 0 var(--s3)
}
.galerie-kopf b{
  font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tanne-text)
}
.galerie-kopf span{font-size:.9375rem;color:var(--grau-text)}
.galerie-gitter{
  display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  list-style:none;margin:0;padding:0
}
@media(min-width:620px){.galerie-gitter{gap:var(--s3)}}
.galerie-gitter li{margin:0}
.galerie-gitter figure{margin:0}
.galerie-gitter img{
  display:block;width:100%;height:auto;border-radius:10px;
  background:var(--papier-hell);border:1px solid var(--linie-zart);
  transition:border-color .35s var(--spur),transform .35s var(--spur)
}
.galerie-gitter li:hover img{border-color:var(--gold);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  .galerie-gitter img{transition:none}
  .galerie-gitter li:hover img{transform:none}
}
.galerie-gitter figcaption{
  font-size:.75rem;color:var(--grau-text);margin-top:6px;line-height:1.45
}
.galerie-fuss{
  font-size:.8125rem;color:var(--grau-text);margin:var(--s3) 0 0;max-width:none
}
.band-tanne .galerie-kopf b{color:var(--gold-licht)}
.band-tanne .galerie-kopf span,
.band-tanne .galerie-gitter figcaption,
.band-tanne .galerie-fuss{color:var(--grau-warm)}
.band-tanne .galerie-gitter img{background:rgba(242,233,217,.06);border-color:rgba(242,233,217,.18)}

/* Werbekennzeichnung in der Kopfzeile der Produktreihe. Sie muss vor dem
   ersten Amazon-Knopf sichtbar sein, darf die Reihe aber nicht nach unten
   drücken - deshalb sitzt sie in derselben Zeile wie die Überschrift und
   klappt nur bei Bedarf auf. */
.reihe-kopf .werbehinweis{
  border:none;background:transparent;padding:0;margin:0;max-width:38rem
}
.reihe-kopf .werbehinweis summary{font-weight:500;color:var(--grau-text);font-size:.8125rem}
.reihe-kopf .werbehinweis p{margin-top:6px}
.stand-fuss{margin:var(--s3) 0 0}

/* Seitenkopf einer Markenseite: Der Besucher hat die Marke schon gewählt, offen
   ist nur noch die Größe. Deshalb steht die Produktreihe im selben Band wie die
   H1 und der Vorlauf ist knapp gehalten. */
.seitenkopf-knapp{padding-block:clamp(var(--s3),3vw,var(--s4)) clamp(var(--s5),6vw,var(--s6))}
.seitenkopf-knapp h1{margin-bottom:var(--s2)}
.seitenkopf-knapp .lead{margin-bottom:var(--s4)}
.seitenkopf-knapp .krumen{margin-bottom:var(--s2)}

/* Zwei-Klick-Video. Der Platzhalter ist bewusst kein YouTube-Vorschaubild,
   sondern eigene Flaeche - sonst waere die Verbindung zu Google schon da,
   bevor jemand geklickt hat. Er haelt dasselbe Seitenverhaeltnis wie der
   spaetere iframe, damit beim Austausch nichts springt. */
.video{margin:var(--s4) 0}
.video-flaeche,.video iframe{
  display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--rund)
}
.video-flaeche{
  position:relative;cursor:pointer;text-align:left;
  padding:var(--s3);
  background:
    radial-gradient(circle at 78% 22%, rgba(212,175,110,.16), transparent 55%),
    var(--tanne);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s1);
  transition:background-color .25s cubic-bezier(.16,1,.3,1)
}
.video-flaeche:hover,.video-flaeche:focus-visible{background-color:var(--tanne-dunkel,#14301f)}
.video-spielen{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gold);color:var(--tanne);
  transition:transform .25s cubic-bezier(.16,1,.3,1)
}
.video-flaeche:hover .video-spielen,
.video-flaeche:focus-visible .video-spielen{transform:translate(-50%,-60%) scale(1.06)}
.video-text{display:block}
.video-titel{
  display:block;font-family:var(--display);font-size:clamp(1.05rem,2.4vw,1.3rem);
  line-height:1.25;margin-bottom:2px
}
.video-kanal{display:block;font-size:.8125rem;color:rgba(255,255,255,.72)}
.video-hinweis{
  display:block;font-size:.75rem;line-height:1.45;color:rgba(255,255,255,.62);
  max-width:34rem;margin-top:var(--s1)
}
.video figcaption{
  font-size:.8125rem;color:var(--grau-text);margin-top:var(--s2);
  display:flex;flex-wrap:wrap;gap:.4em 1em
}
.video-was{color:var(--ink-weich)}
@media(max-width:520px){
  .video-spielen{width:58px;height:58px}
  .video-hinweis{font-size:.7rem}
}


/* ---------- Dunkles Band: was ohne eigenen Grund darauf steht ----------
   Diese Bausteine bringen keine Flaeche mit, stehen also direkt auf dem
   Tannengruen. Ihre Standardfarbe ist Grau (#665F52) und ergibt dort 1,9:1.
   Gemessen mit dem Kontrastdurchlauf, siehe CLAUDE.md. */
.band-tanne .stand{color:#C6BEAD}
.band-tanne .werbehinweis summary,
.band-tanne .werbehinweis p{color:#C6BEAD}
.band-tanne .reihe-kopf .werbehinweis summary{color:#C6BEAD}
.band-tanne .marginal .tag{color:#DCD5C6}

/* Tabellen, die frei auf dem Band stehen. Die in einer Besprechung sitzen,
   liegen auf Weiss und sind durch die Kastenregel oben schon ausgenommen. */
.band-tanne .tabelle:not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *) th,
.band-tanne .tabelle:not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *) caption{color:#C6BEAD}
.band-tanne .tabelle.breit:not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *) :is(thead th,tbody th){color:#FFFDF8}
.band-tanne .tabelle:not(:is(.karte,.detail,.stimmen,.hinweis,.blatt,.haupt-thema,.sprungmarken) *) :is(th,td){border-bottom-color:rgba(242,233,217,.22)}