/* ---------- Schriften: selbst gehostet (DSGVO) ---------- */
/* Kein Google-Fonts-CDN: dabei geht die IP jedes Besuchers an Google,
   bevor irgendein Consent greift. Das LG München I hat das 2022 als
   DSGVO-Verstoß gewertet (Az. 3 O 17493/20). Dateien liegen in fonts/. */
@font-face{font-family:"Newsreader";src:url("fonts/Newsreader.ttf") format("truetype-variations");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/Figtree.ttf") format("truetype-variations");font-weight:400 600;font-style:normal;font-display:swap}

/* ================================================================
   ORDVIK — Design-System (geteilt von allen Seiten)
   Marke: funktionale Taschen & Organisation · Palette: Camel/Charcoal/Cream
   ================================================================ */
:root{
  --paper:#f2ede4; --paper-2:#e8e1d4; --paper-3:#ded5c6;
  --ink:#22201d; --ink-soft:#57534c;
  --char:#1c1a17; --char-2:#2a2723;
  --camel:#a6763f; --camel-deep:#875a2b;
  --line:rgba(34,32,29,.14);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Figtree',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:'Newsreader',Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.01em}
.wrap{width:min(1180px,90%);margin:0 auto}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--camel-deep)}
.serif-i{font-family:'Newsreader',serif;font-style:italic;font-weight:400}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;font-size:.96rem;padding:1em 2em;border-radius:2px;border:0;cursor:pointer;transition:background .4s var(--ease),transform .4s var(--ease)}
.btn:hover{background:var(--camel-deep);transform:translateY(-2px)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn.light{background:var(--paper);color:var(--ink)}
.btn.light:hover{background:var(--camel);color:var(--paper)}
.btn.ghost{background:transparent;border:1px solid rgba(242,237,228,.5);color:var(--paper)}
.btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.soon{background:var(--paper-3);color:var(--ink-soft);pointer-events:none;transform:none}
/* Farb-/Größen-Auswahl (PDP) */
.sizelabel{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sizelabel a{font-size:.82rem;color:var(--camel-deep);text-decoration:underline;text-transform:none;letter-spacing:0}
.sizepick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.sizepick button{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:3px;padding:10px 15px;cursor:pointer;font:inherit;font-size:.92rem;transition:border-color .25s var(--ease),background .25s}
.sizepick button:hover{border-color:var(--camel)}
.sizepick button.on{border-color:var(--camel);background:rgba(166,118,63,.12);font-weight:600}
.sizehint{font-size:.85rem;color:var(--camel-deep);margin:6px 0 16px;min-height:1.2em}

/* ---------- Reveal ---------- */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rise.in{opacity:1;transform:none}

/* ---------- Header ---------- */
header.site{position:fixed;inset:0 0 auto;z-index:60;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding:24px 0;transition:padding .4s var(--ease)}
.brand{font-family:'Newsreader',serif;font-size:1.5rem;font-weight:600;letter-spacing:.24em;text-decoration:none;color:var(--paper);transition:color .4s var(--ease)}
header.site nav{display:flex;align-items:center;gap:30px}
header.site nav a{color:var(--paper);opacity:.85;text-decoration:none;font-size:.85rem;letter-spacing:.04em;transition:opacity .3s,color .4s var(--ease)}
header.site nav a:hover{opacity:1}
header.site nav .navcta{border:1px solid rgba(242,237,228,.45);padding:9px 18px;border-radius:2px;opacity:1}
header.site.solid{background:rgba(242,237,228,.9);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
header.site.solid .bar{padding:13px 0}
header.site.solid .brand,header.site.solid nav a{color:var(--ink)}
header.site.solid nav .navcta{border-color:var(--line)}
/* Seiten ohne dunklen Hero starten schon „solid“ */
header.site.on-light{background:rgba(242,237,228,.9);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
header.site.on-light .brand,header.site.on-light nav a{color:var(--ink)}
header.site.on-light nav .navcta{border-color:var(--line)}
/* „Über uns" verschwindet auf dem Handy, „Shop" bleibt.
   Seit der „Bestellen"-Knopf raus ist (20.07., war auf jeder Seite anders und
   führte von der Startseite ausgerechnet auf ein einzelnes Produkt), ist in der
   Leiste Platz — und ohne einen einzigen Navigationslink neben dem Warenkorb
   wirkte die Kopfzeile leer. */
@media(max-width:720px){header.site nav a.hide-m{display:none}
  /* ⚠️ Nicht `display:inline` — dann ist der Link nur 22 px hoch und damit unter
     der 38-px-Marke fürs Antippen. Genau das ist am 22.07. passiert und fiel erst
     beim Nachmessen auf. `inline-flex` + min-height bringt ihn auf dieselben
     42 px wie den Warenkorb-Knopf daneben. */
  header.site nav a[href$="#shop"]{display:inline-flex;align-items:center;min-height:42px}}

/* ---------- Kopfzeile auf dem Handy ----------
   Problem (gefunden 20.07. auf einem 412-px-Gerät): Wortmarke mit .24em Sperrung
   + 30px Lücken + zwei Knöpfe ergaben zusammen mehr Breite als der Bildschirm.
   Weil .bar auf space-between steht, lief der Warenkorb-Knopf rechts aus dem Bild.
   Gelöst in zwei Stufen, damit es nicht abrupt springt: erst enger, dann Wort weg.
   Die Sperrung ist der größte Breitenfresser — sie schrumpft zuerst, nicht die
   Schriftgröße, damit die Marke lesbar bleibt.
   ⚠️ Nichts hier darf umbrechen: .bar bleibt einzeilig (nowrap), sonst wächst der
   fixierte Kopf in den Hero hinein. */
@media(max-width:720px){
  header.site .bar{padding:17px 0;flex-wrap:nowrap;gap:10px}
  header.site.solid .bar,header.site.on-light .bar{padding:11px 0}
  .brand{font-size:1.24rem;letter-spacing:.13em;white-space:nowrap}
  header.site nav{gap:10px;flex:none}
  /* 10px statt 8px oben/unten: bringt den Knopf auf 39 px Tippfläche UND auf
     exakt dieselbe Höhe wie den Warenkorb-Knopf daneben. Vorher waren die
     beiden 35 und 39 px hoch — das sah nebeneinander unruhig aus. */
  /* Beide Kopfzeilen-Knöpfe auf dieselbe feste Höhe.
     Über das Padding ging das nicht sauber: „Bestellen" enthält Text, der
     Warenkorb ein Symbol plus Zählerplakette — dieselben Padding-Werte ergeben
     bei unterschiedlichem Inhalt unterschiedliche Höhen. Eine Mindesthöhe ist
     hier das ehrlichere Werkzeug und bleibt stabil, wenn sich die Schrift oder
     der Zähler ändert. 42px liegt zugleich über der 40-px-Marke für Tippziele. */
  header.site nav .navcta,.cartbtn{min-height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
  header.site nav .navcta{padding:0 13px;font-size:.8rem;white-space:nowrap}
  /* Das Logo führt zur Startseite, war aber nur 27 px hoch antippbar.
     Padding vergrößert die Fläche auf 39 px, ohne die Leiste höher zu machen —
     die .bar ist ohnehin höher als der Text. */
  .brand{padding:6px 0}
}
@media(max-width:430px){
  .brand{font-size:1.06rem;letter-spacing:.07em}
  .brand .bmark{width:1.22em;height:1.22em}
  header.site nav{gap:7px}
  /* Seitlich schmaler, oben/unten aber NICHT — sonst fällt die Tippfläche unter
     38 px und der Knopf wird niedriger als der Warenkorb daneben. Genau das war
     hier der Fehler: Diese Regel steht später als der 720er-Block und hat dessen
     Höhe still wieder einkassiert. Wer hier etwas ändert, misst nach. */
  header.site nav .navcta{padding:0 10px;font-size:.76rem}
}
/* ⚠️ Die Handy-Regeln für den Warenkorb-Knopf stehen bewusst NICHT hier, sondern
   weiter unten direkt hinter `.cartbtn` (Abschnitt „Warenkorb"). Grund: Die
   Grundform von .cartbtn wird erst dort definiert — also SPÄTER im Dokument als
   dieser Block. Bei gleicher Spezifität gewinnt die spätere Regel, und meine
   Anpassungen hier wären wirkungslos gewesen. Genau das ist am 20.07. passiert
   und fiel erst beim Nachmessen auf. */

/* ---------- Footer ---------- */
footer.site{background:var(--char-2);color:rgba(242,237,228,.62);padding:60px 0 40px;font-size:.9rem}
footer.site .top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;padding-bottom:34px;border-bottom:1px solid rgba(242,237,228,.12)}
footer.site .brand{color:var(--paper);font-size:1.5rem}
footer.site .cols{display:flex;gap:60px;flex-wrap:wrap}
footer.site nav a{display:block;color:rgba(242,237,228,.82);text-decoration:none;margin:8px 0;font-size:.9rem}
footer.site nav a:hover{color:var(--camel)}
footer.site .legal{margin-top:26px;font-size:.82rem;opacity:.7;line-height:1.7}

/* ---------- Footer auf dem Handy: Links antippbar machen ----------
   Gemessen 20.07. auf 412 px: Die Footer-Links waren nur 23 px hoch mit 8 px
   Lücke dazwischen. Apple empfiehlt 44 px, Google 48 px — wir lagen bei der
   halben Fläche. Das trifft ausgerechnet Impressum, Widerruf, Versand und
   Kontakt: die Links, die jemand mit einem Problem sucht, und bei denen ein
   Fehltipp am meisten nervt.
   Gelöst über padding statt margin — die anklickbare Fläche wächst auf 41 px,
   der sichtbare Abstand bleibt fast gleich. 2 px Restlücke, damit sich die
   Flächen nicht berühren und man nicht versehentlich den Nachbarn trifft.
   Der Spaltenabstand schrumpft im Gegenzug von 60 auf 34 px, damit der Footer
   durch die höheren Links nicht unnötig lang wird. */
@media(max-width:720px){
  footer.site nav a{padding:9px 0;margin:1px 0}
  footer.site .cols{gap:34px}
}

/* ---------- Sektionen allgemein ---------- */
.sec{padding:clamp(66px,10vh,120px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:42px}
.sec-head h2{font-size:clamp(2rem,3.8vw,3.1rem);max-width:18ch}
.sec-head .lead{color:var(--ink-soft);max-width:38ch}

/* ---------- Startseite: Marken-Hero ---------- */
.hero-brand{position:relative;min-height:92svh;display:flex;align-items:center;color:var(--paper);background:var(--char);isolation:isolate;overflow:hidden}
.hero-brand::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(85% 120% at 80% 12%,rgba(166,118,63,.30),transparent 58%)}
.hero-brand::after{content:"";position:absolute;right:-8%;bottom:-14%;width:46vw;height:46vw;max-width:640px;max-height:640px;border-radius:50%;border:1px solid rgba(242,237,228,.10);z-index:-1}
.hero-brand .wrap{padding:120px 0 90px}
.hero-brand h1{font-size:clamp(3rem,8vw,6.4rem);max-width:15ch;margin:.22em 0 .42em;font-weight:500}
.hero-brand p{font-size:clamp(1.05rem,1.7vw,1.28rem);max-width:46ch;color:rgba(242,237,228,.82)}
.hero-brand .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* ---------- Werte-Reihe ---------- */
.values{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.values .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:40px 0}
.values .v b{display:block;font-family:'Newsreader',serif;font-weight:600;font-size:1.05rem;margin-bottom:3px}
.values .v span{font-size:.9rem;color:var(--ink-soft)}
@media(max-width:720px){.values .wrap{grid-template-columns:1fr 1fr;gap:22px}}

/* ---------- Shop-Grid + Produktkarten ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.shop-grid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,19,16,.13)}
.pcard-media{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.pcard-media img{width:100%;height:100%;object-fit:contain;transition:transform 1.1s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.04)}
.pcard-tag{position:absolute;top:12px;left:12px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;background:var(--char);color:var(--paper);padding:4px 9px;border-radius:2px}
.pcard-tag.soon{background:var(--camel-deep)}
/* Auf dem Handy war das Etikett („Neu" / „Bestseller") nur 9,9 px groß und
   dabei auch noch gesperrt und in Versalien — praktisch nicht mehr lesbar.
   Etwas größer, etwas weniger Sperrung. Der Stil bleibt, die Lesbarkeit kommt
   zurück. (Gemessen 20.07. auf 412 px.) */
@media(max-width:720px){.pcard-tag{font-size:.7rem;letter-spacing:.12em;padding:4px 8px}}
.pcard-body{padding:15px 17px 19px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard-body h3{font-size:1.14rem;font-weight:600;line-height:1.16}
.pcard-sub{font-size:.83rem;color:var(--ink-soft)}
.pcard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:13px}
.pcard-price{font-family:'Newsreader',serif;font-size:1.14rem;font-weight:600}
.pcard-cta{font-size:.78rem;color:var(--camel-deep)}

/* ---------- Platzhalter-Foto ---------- */
.ph{background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 15px,var(--paper-3) 15px,var(--paper-3) 30px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink-soft);width:100%;height:100%;text-align:center;padding:16px}
.ph.plain{background:var(--paper-2)}
.ph svg{width:38px;height:38px;opacity:.42}
.ph span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* ---------- Story-Band ---------- */
.story{background:var(--char);color:var(--paper)}
.story .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.story h2{color:var(--paper);font-size:clamp(2rem,3.8vw,3rem)}
.story p{color:rgba(242,237,228,.8);margin-top:1.1em;max-width:46ch}
.story .art{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--char-2)}
.story .art img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.story .grid{grid-template-columns:1fr;gap:32px}}

/* ================================================================
   PRODUKTSEITE (PDP) — von jeder Produktseite genutzt
   ================================================================ */
.pdp{padding:clamp(98px,13vh,148px) 0 clamp(40px,6vh,70px)}
.pdp .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:start}
.pdp-gallery{position:sticky;top:88px;display:flex;flex-direction:column;gap:12px}
.pdp-main{aspect-ratio:1/1;border-radius:5px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.pdp-main img{width:100%;height:100%;object-fit:contain}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pdp-thumbs .t{aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--paper);border:1px solid var(--line);cursor:pointer;transition:border-color .3s var(--ease)}
.pdp-thumbs .t:hover{border-color:var(--camel)}
.pdp-thumbs .t img{width:100%;height:100%;object-fit:contain}
.pdp-info .eyebrow{display:block;margin-bottom:12px}
.pdp-info h1{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:.28em}
.pdp-info .lead{color:var(--ink-soft);font-size:1.06rem;max-width:46ch}
.pdp-price{font-family:'Newsreader',serif;font-size:2rem;font-weight:600;margin:22px 0 4px}
.pdp-price small{display:block;font-family:'Figtree';font-size:.8rem;font-weight:400;color:var(--ink-soft);margin-top:4px}
.pdp-soon{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--camel-deep);border:1px solid var(--camel);border-radius:2px;padding:8px 14px;margin-bottom:8px}
.pdp-buy{margin:22px 0 20px}
.pdp-buy .btn{width:100%;max-width:430px;justify-content:center}
.pdp-trust{display:flex;flex-direction:column;gap:9px;font-size:.92rem;color:var(--ink-soft)}
.pdp-trust div{display:flex;gap:10px;align-items:center}
.pdp-trust b{color:var(--camel-deep)}
.pdp-pays{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pdp-pays span{border:1px solid var(--line);border-radius:3px;padding:5px 11px;font-size:.74rem;color:var(--ink-soft)}
@media(max-width:860px){.pdp .grid{grid-template-columns:1fr;gap:26px}.pdp-gallery{position:static}.pdp-thumbs{grid-template-columns:repeat(5,1fr)}}

/* Feature-Reihen */
.features{padding:clamp(46px,8vh,96px) 0}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(22px,4vh,46px) 0}
.feature:nth-child(even) .fart{order:2}
.feature .fart{aspect-ratio:1/1;border-radius:5px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.feature .fart img{width:100%;height:100%;object-fit:contain;transition:transform 1.3s var(--ease)}
.feature:hover .fart img{transform:scale(1.04)}
.feature .num{font-family:'Newsreader',serif;font-style:italic;font-size:1.3rem;color:var(--camel-deep)}
.feature h3{font-size:clamp(1.6rem,3vw,2.4rem);margin:.25em 0 .45em}
.feature p{color:var(--ink-soft);max-width:44ch}
@media(max-width:820px){.feature,.feature:nth-child(even) .fart{grid-template-columns:1fr;order:0}}

/* Spezifikationen */
.specs{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.specs .wrap{max-width:820px}
.specs h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:20px}
.specs table{width:100%;border-collapse:collapse}
.specs td{padding:15px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.specs td:first-child{color:var(--ink-soft);width:42%}
.specs td:last-child{font-family:'Newsreader',serif}
.specs tr:last-child td{border-bottom:0}

/* FAQ */
.faq .wrap{max-width:820px}
.faq h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:28px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:1.1rem;font-family:'Newsreader',serif;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-size:1.5rem;color:var(--camel-deep);transition:transform .3s var(--ease);line-height:1}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--ink-soft);max-width:64ch}

/* Cross-Sell */
.cross{border-top:1px solid var(--line)}

/* GPSR */
.gpsr{background:#efe9e0;color:#2a2320;padding:clamp(44px,7vh,72px) 0;border-top:1px solid rgba(0,0,0,.08)}
.gpsr .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;font-size:.93rem;line-height:1.65;margin-top:14px}
.gpsr strong{display:block;margin-bottom:6px}

/* Mobile Kaufleiste */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-between;gap:14px;background:rgba(28,26,23,.96);backdrop-filter:blur(10px);color:var(--paper);padding:11px 18px calc(11px + env(safe-area-inset-bottom))}
.buybar .p{font-family:'Newsreader',serif;font-weight:600;font-size:1.3rem;line-height:1}
.buybar .p small{display:block;font-family:'Figtree';font-weight:400;font-size:.7rem;opacity:.7}
.buybar .btn{padding:.8em 1.4em;font-size:.9rem}
@media(max-width:720px){.buybar{display:flex}body.has-buybar{padding-bottom:74px}}

/* ================================================================
   STARTSEITE — WOW-Sektionen
   ================================================================ */
/* Vollbild-Bild-Hero */
.hero-img{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--paper);isolation:isolate}
.hero-img .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;background-image:url('img/hero.jpg')}
/* Handy bekommt eine kleinere Fassung: 900 px statt 1920 px Breite, 116 statt
   472 KB. Das Hero-Bild ist das erste, was geladen wird und niemand sieht es,
   bevor es da ist — auf Mobilfunk waren das mehrere Sekunden für Pixel, die ein
   412-px-Bildschirm ohnehin nicht darstellen kann.
   Der Pfad stand vorher als inline-style in der index.html; dort konnte keine
   Media-Query greifen. Deshalb liegt er jetzt hier. */
@media(max-width:900px){.hero-img .bg{background-image:url('img/hero-m.jpg')}}
.hero-img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,19,16,.5) 0%,rgba(20,19,16,.12) 34%,rgba(20,19,16,.5) 74%,rgba(20,19,16,.86) 100%)}
.hero-img .wrap{padding:0 0 clamp(56px,9vh,110px)}
.hero-img .eyebrow{color:rgba(242,237,228,.85)}
.hero-img h1{font-size:clamp(3rem,8.4vw,6.6rem);max-width:15ch;margin:.2em 0 .32em;font-weight:500}
.hero-img p{font-size:clamp(1.05rem,1.7vw,1.28rem);max-width:44ch;color:rgba(242,237,228,.9)}
.hero-img .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.scrollcue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(242,237,228,.6);z-index:1}

/* Intro-Statement */
.statement{padding:clamp(66px,10vh,120px) 0;text-align:center}
.statement .big{font-family:'Newsreader',serif;font-size:clamp(1.8rem,4vw,3rem);line-height:1.2;max-width:24ch;margin:.4em auto 0;font-weight:500}
.statement .big em{font-style:italic;color:var(--camel-deep)}
.statement .kw{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:32px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.statement .kw span{position:relative;padding-left:24px}
.statement .kw span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border:1px solid var(--camel);border-radius:50%;transform:translateY(-50%)}

/* Typografisches Zitat-Band */
.qband{background:var(--char);color:var(--paper);text-align:center;padding:clamp(80px,15vh,170px) 0}
.qband blockquote{font-family:'Newsreader',serif;font-size:clamp(2rem,5vw,3.8rem);line-height:1.14;max-width:20ch;margin:0 auto;font-weight:500}
.qband blockquote em{font-style:italic;color:var(--camel)}
.qband cite{display:block;margin-top:24px;font-style:normal;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;opacity:.62}

/* Spotlight (Feature-Produkt) */
.spotlight .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.spotlight .art{aspect-ratio:1/1;border-radius:5px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.spotlight .art img{width:100%;height:100%;object-fit:contain;transition:transform 1.3s var(--ease)}
.spotlight:hover .art img{transform:scale(1.03)}
.spotlight h2{font-size:clamp(2rem,4vw,3.2rem);margin:.2em 0 .4em}
.spotlight .lead{color:var(--ink-soft);max-width:44ch;margin-bottom:20px}
.spotlight .price{font-family:'Newsreader',serif;font-size:1.5rem;font-weight:600;margin-bottom:20px}
@media(max-width:820px){.spotlight .grid{grid-template-columns:1fr;gap:26px}.spotlight .art{order:-1}}

/* Werte-Icons */
.values .v svg{width:24px;height:24px;color:var(--camel-deep);margin-bottom:8px}

/* Finales CTA-Band */
.cta-band{background:var(--char);color:var(--paper);text-align:center;padding:clamp(70px,12vh,140px) 0;position:relative;isolation:isolate;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 120% at 50% 0%,rgba(166,118,63,.26),transparent 60%)}
.cta-band h2{color:var(--paper);font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:.4em}
.cta-band p{color:rgba(242,237,228,.8);max-width:42ch;margin:0 auto 30px}

/* Reise-Set — echtes Bundle-Angebot (Rabattcode REISESET, 15 € ab 3 Artikeln).
   Bild-Trio links, Kaufpanel rechts; auf Handy gestapelt (Bild zuerst). */
.bundle{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(52px,8vh,88px);padding:clamp(20px,3vw,38px);background:var(--paper-2);border:1px solid var(--line);border-radius:8px}
.bundle-art{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.bundle-art picture:first-child{grid-row:1 / span 2;aspect-ratio:auto;height:100%;min-height:100%}
.bundle-art picture{display:block;aspect-ratio:1/1;border-radius:5px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.bundle-art img{width:100%;height:100%;object-fit:cover;display:block}
.bundle-body h2{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.12;margin:.28em 0 .34em}
.bundle-body .lead{color:var(--ink-soft);max-width:42ch;margin-bottom:18px}
.bundle-price{font-family:'Newsreader',serif;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.bundle-price strong{font-size:1.8rem;font-weight:600;color:var(--ink)}
.bundle-price s{color:var(--ink-soft);font-size:1.05rem}
.bundle-save{font-family:'Figtree',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--camel);color:var(--paper);padding:.4em .72em;border-radius:2px}
.bundle-note{font-size:.82rem;color:var(--ink-soft);margin-top:15px;max-width:44ch}
@media(max-width:820px){.bundle{grid-template-columns:1fr;gap:22px}.bundle-art{order:-1}}

/* Reise-Set-Streifen auf den drei Set-Produktseiten (Upsell zum Bundle). */
.setband{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:38px;padding:22px 28px;background:var(--char);color:var(--paper);border-radius:8px}
.setband .eyebrow{color:var(--camel)}
.setband-txt p{margin-top:8px;font-family:'Newsreader',serif;font-size:1.16rem;line-height:1.4;color:var(--paper);max-width:52ch}
.setband-txt s{opacity:.6;font-size:.9em}
.setband .btn{flex:0 0 auto;background:var(--paper);color:var(--ink)}
.setband .btn:hover{background:var(--camel);color:var(--paper)}
@media(max-width:640px){.setband{flex-direction:column;align-items:flex-start}.setband .btn{width:100%;justify-content:center}}

/* Cookie-Consent-Banner */
.cookiebar{position:fixed;left:12px;right:12px;bottom:12px;z-index:200;max-width:840px;margin:0 auto;background:var(--char);color:var(--paper);border:1px solid var(--camel);border-radius:14px;padding:20px 24px;box-shadow:0 22px 60px rgba(0,0,0,.42);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cookiebar .cc-txt{flex:1;min-width:250px;font-size:.93rem;line-height:1.6}
.cookiebar .cc-txt strong{display:block;font-family:'Newsreader',serif;font-weight:600;font-size:1.12rem;margin-bottom:5px}
.cookiebar .cc-txt a{color:var(--camel);text-decoration:underline}
.cookiebar .cc-btns{display:flex;gap:12px;flex-shrink:0}
.cookiebar button{border-radius:6px;padding:11px 20px;cursor:pointer;font-family:inherit;font-size:.9rem}
.cookiebar .cc-no{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--paper)}
.cookiebar .cc-yes{background:var(--paper);border:0;color:var(--char);font-weight:600}
@media(max-width:560px){.cookiebar .cc-btns{width:100%}.cookiebar .cc-yes{flex:1}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise{opacity:1;transform:none}}

/* ---------- Bildmarke im Logo ---------- */
.brand{display:inline-flex;align-items:center;gap:11px}
.brand .bmark{width:1.3em;height:1.3em;flex:none;margin-top:-.05em;stroke:currentColor}
footer.site .brand .bmark{width:1.24em;height:1.24em}
/* ⚠️ Hier stand zusätzlich font-size:1.3rem. Diese Regel steht WEITER UNTEN als
   der Handy-Block (~Zeile 83) und hat dieselbe Spezifität — sie hat die dortige
   Verkleinerung also wieder aufgehoben und war Mitursache der gequetschten
   Kopfzeile. Nur der Abstand bleibt hier, die Größe regelt der Handy-Block. */
@media(max-width:520px){.brand{gap:9px}}

/* ---------- Warenkorb ---------- */
.cartbtn{background:none;border:1px solid rgba(242,237,228,.45);color:var(--paper);font:inherit;font-size:.85rem;letter-spacing:.04em;padding:9px 16px;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .3s var(--ease),color .4s var(--ease)}
header.site.solid .cartbtn,header.site.on-light .cartbtn{border-color:var(--line);color:var(--ink)}
.cartbtn:hover{border-color:var(--camel)}
/* Handy-Anpassung des Warenkorb-Knopfs — steht hier und nicht oben im
   Kopfzeilen-Block, weil sie sonst von der Grundform darüber überschrieben würde
   (gleiche Spezifität, spätere Regel gewinnt).
   Die 9px oben/unten sind nachgemessen: sie ergeben exakt dieselben 41px wie der
   „Bestellen"-Knopf daneben. Zwei nebeneinanderliegende Knöpfe unterschiedlicher
   Höhe fallen sofort auf. */
@media(max-width:720px){.cartbtn{padding:0 12px;font-size:.8rem;gap:7px}}
@media(max-width:430px){
  .cartbtn{padding:0 11px}
  .cartlabel{display:none}   /* ab hier trägt das Symbol den Knopf; aria-label bleibt */
}
.cartcount{background:var(--camel);color:var(--paper);border-radius:99px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-variant-numeric:tabular-nums;padding:0 5px}
.cartcount.leer{background:transparent;color:inherit;opacity:.55}

.cartwrap{position:fixed;inset:0;z-index:120;pointer-events:none}
.cartveil{position:absolute;inset:0;background:rgba(20,19,16,.4);opacity:0;transition:opacity .35s var(--ease)}
.cartpanel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--paper);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .42s var(--ease);box-shadow:-20px 0 60px rgba(20,19,16,.16)}
.cartwrap.offen{pointer-events:auto}
.cartwrap.offen .cartveil{opacity:1}
.cartwrap.offen .cartpanel{transform:none}
.cartpanel header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.cartpanel header strong{font-family:'Newsreader',serif;font-size:1.25rem;font-weight:600;letter-spacing:.02em}
.cartx{background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink-soft);padding:0 4px}
.cartx:hover{color:var(--ink)}
.cartlist{flex:1;overflow-y:auto;padding:6px 24px}
.cartleer{color:var(--ink-soft);font-size:.92rem;padding:26px 0}
.cartitem{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cartitem img{width:62px;height:62px;object-fit:contain;background:var(--paper-2);border-radius:3px}
.ci-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ci-txt a{color:var(--ink);text-decoration:none;font-size:.94rem}
.ci-txt a:hover{color:var(--camel)}
.ci-var{font-size:.76rem;color:var(--ink-soft)}
.ci-pr{font-size:.84rem;font-variant-numeric:tabular-nums}
.ci-qty{display:flex;align-items:center;gap:9px}
.ci-qty button{width:26px;height:26px;border:1px solid var(--line);background:none;border-radius:2px;cursor:pointer;font-size:1rem;line-height:1;color:var(--ink)}
.ci-qty button:hover{border-color:var(--camel);color:var(--camel)}
.ci-qty span{font-size:.9rem;min-width:14px;text-align:center;font-variant-numeric:tabular-nums}
/* Auf dem Handy waren „−" und „+" nur 26×26 px groß und lagen 9 px auseinander —
   zu klein zum sicheren Treffen, und ein Fehltipp ändert hier die Bestellmenge.
   Dasselbe beim Schließkreuz (24×27 px). Beide auf 40 px gebracht; die Zahl
   dazwischen bekommt mehr Luft, damit die Gruppe nicht gedrängt wirkt.
   (Gemessen 20.07. auf 412 px.) */
@media(max-width:720px){
  .ci-qty{gap:6px}
  .ci-qty button{width:40px;height:40px;font-size:1.15rem}
  .ci-qty span{min-width:22px}
  .cartx{padding:6px 10px;margin:-6px -6px -6px 0}
}
.cartpanel footer{padding:20px 24px 26px;border-top:1px solid var(--line)}
.cartsum{display:flex;justify-content:space-between;align-items:baseline;font-size:.96rem;margin-bottom:4px}
.cartsum strong{font-size:1.3rem;font-variant-numeric:tabular-nums}
.cartnote{font-size:.78rem;color:var(--ink-soft);margin:0 0 14px}
.cartnote.small{margin:10px 0 0;text-align:center}
.cartgo{width:100%;justify-content:center;border:0;cursor:pointer;font:inherit}
.carticon{width:17px;height:17px;flex:none}
/* Der alte 520er-Breakpoint ist in den Handy-Block oben gewandert (Zeile ~69),
   damit alle Kopfzeilen-Maße an EINER Stelle stehen und sich nicht gegenseitig
   überschreiben. Hier bewusst nichts mehr. */

/* ---------- Farbfelder im Picker ---------- */
.sizepick button{display:inline-flex;align-items:center;gap:9px}
.sizepick button::before{content:"";width:17px;height:17px;border-radius:50%;background:var(--sw,transparent);border:1px solid rgba(34,32,29,.22);flex:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.sizepick button:not([style*="--sw"])::before{display:none}
.colornote{font-size:.76rem;color:var(--ink-soft);margin:-2px 0 14px}

/* ---------- Rechtstext-Seiten ---------- */
.legalpage{padding:clamp(110px,15vh,160px) 0 clamp(60px,9vh,100px)}
.legalpage h1{font-size:clamp(2rem,3.6vw,2.9rem);margin:10px 0 30px}
.legaltext{max-width:70ch}
.legaltext h2{font-family:'Newsreader',serif;font-size:1.22rem;font-weight:600;margin:34px 0 10px;letter-spacing:.01em}
.legaltext h2:first-child{margin-top:0}
.legaltext p{margin:0 0 12px;line-height:1.75;color:var(--ink-soft);font-size:.97rem}
.legalback{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.legalback a{color:var(--camel-deep);text-decoration:none;font-size:.92rem}
.legalback a:hover{text-decoration:underline}

/* ---------- Farbübersicht am Seitenende ---------- */
.colorsec{padding:clamp(56px,8vh,90px) 0;border-top:1px solid var(--line)}
.colorsec .eyebrow{display:block;margin-bottom:12px}
.colorsec h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px}
.colorsec p.lead{max-width:56ch;color:var(--ink-soft);margin-bottom:34px}
.colorgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.colorcard{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.colorcard img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--paper);display:block}
.colorcard .cc-b{padding:13px 16px 16px;display:flex;align-items:center;gap:10px}
.colorcard .cc-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(34,32,29,.22);flex:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.colorcard .cc-n{font-size:.95rem}

/* ---------- Bildunterschrift in Feature-Reihen ---------- */
.fart-wrap{display:flex;flex-direction:column;gap:9px}
.fart-cap{font-size:.78rem;line-height:1.5;color:var(--ink-soft);font-style:italic}

/* ---------- Produktvideo ---------- */
.vidsec{padding:clamp(56px,8vh,90px) 0;border-top:1px solid var(--line)}
.vidwrap{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.vidwrap video{width:100%;border-radius:5px;border:1px solid var(--line);display:block;background:var(--paper-2)}
.vidtxt h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px}
.vidtxt p{color:var(--ink-soft);max-width:46ch;margin-bottom:10px}
@media(max-width:820px){.vidwrap{grid-template-columns:1fr}}

/* ---------- Newsletter-Band (newsletter.js baut es vor den Footer) ---------- */
.nlband{background:var(--paper-2);border-top:1px solid var(--line);padding:66px 0}
.nlinner{display:flex;gap:56px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.nltext{flex:1 1 340px;max-width:46ch}
.nltext h2{font-family:'Newsreader',serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:500;line-height:1.2;margin:12px 0 10px}
.nltext p{color:var(--ink-soft);font-size:.95rem;margin:0}
.nlform{flex:1 1 380px;max-width:480px}
.nlrow{display:flex;gap:10px;flex-wrap:wrap}
.nlrow input[type=email]{flex:1 1 220px;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:1em 1.1em;font:inherit;font-size:.96rem;color:var(--ink);transition:border-color .25s var(--ease)}
.nlrow input[type=email]:focus{outline:0;border-color:var(--camel)}
.nlrow input[type=email]::placeholder{color:var(--ink-soft);opacity:.6}
.nlrow .btn{flex:0 0 auto}
.nlcheck{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.85rem;color:var(--ink-soft);line-height:1.55;cursor:pointer}
.nlcheck input{margin-top:.25em;accent-color:var(--camel-deep);flex:0 0 auto;width:16px;height:16px;cursor:pointer}
.nlcheck a{color:var(--camel-deep)}
.nlmsg{margin:14px 0 0;font-size:.9rem;line-height:1.6;min-height:1px}
.nlmsg.fehler{color:#96341f}
.nlmsg.gut{color:var(--camel-deep);font-weight:500}
.nlsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:720px){
  .nlband{padding:48px 0}
  .nlinner{gap:30px}
  .nlrow .btn{width:100%;justify-content:center}
}
.nlcode{display:inline-block;background:var(--paper);border:1px dashed var(--camel);border-radius:2px;padding:.15em .5em;letter-spacing:.08em;color:var(--camel-deep)}
.cartsplit{margin:12px 0 16px;padding:12px 14px;background:rgba(166,118,63,.09);border-left:2px solid var(--camel);font-size:.84rem;line-height:1.55;color:var(--ink-soft)}
.cartsplit strong{color:var(--ink)}
.cartsplit a{color:var(--camel-deep);white-space:nowrap}

/* ---------- Newsletter-Popup ----------
   Erscheint nach 25 s oder bei Exit-Intent, einmal pro Besucher.
   Auf dem Handy bewusst als Balken UNTEN statt als Overlay über der ganzen
   Seite: Google stuft Werbefenster ab, die beim Ankommen den Inhalt verdecken
   ("intrusive interstitial"). Ein Balken, der nach 25 Sekunden hochfährt,
   fällt nicht darunter. */
.nlpop{position:fixed;inset:0;z-index:140;pointer-events:none}
.nlpop-veil{position:absolute;inset:0;background:rgba(20,19,16,.42);opacity:0;transition:opacity .3s var(--ease)}
.nlpop-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);opacity:0;
  width:min(430px,92vw);background:var(--paper);border-radius:4px;padding:34px 32px 26px;
  box-shadow:0 24px 70px rgba(20,19,16,.24);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.nlpop.offen{pointer-events:auto}
.nlpop.offen .nlpop-veil{opacity:1}
.nlpop.offen .nlpop-box{opacity:1;transform:translate(-50%,-50%)}
.nlpop-box h2{font-family:'Newsreader',serif;font-size:1.5rem;font-weight:600;margin:.3em 0 .35em;line-height:1.2}
.nlpop-box p{color:var(--ink-soft);font-size:.92rem;margin-bottom:18px}
.nlpop-box .nlrow{display:flex;flex-direction:column;gap:9px}
/* ⚠️ flex zurücksetzen ist Pflicht: Das Band im Footer setzt `flex:1 1 220px`
   auf das Eingabefeld. In einer Zeile ist 220px die BREITE — in der Spalte des
   Popups wird daraus die HÖHE, und das Feld war 220 px hoch. Beim Testen am
   20.07. sofort im Screenshot aufgefallen. */
.nlpop-box .nlrow input[type=email]{width:100%;flex:0 0 auto}
.nlpop-box .nlrow .btn{width:100%;justify-content:center}
.nlpop-x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:1.7rem;line-height:1;
  color:var(--ink-soft);cursor:pointer;padding:6px 10px}
.nlpop-x:hover{color:var(--ink)}
.nlpop-nein{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink-soft);
  font:inherit;font-size:.84rem;text-decoration:underline;cursor:pointer;padding:8px 12px}
.nlpop-nein:hover{color:var(--ink)}

@media(max-width:720px){
  /* Balken unten statt Fenster in der Mitte */
  .nlpop-box{top:auto;bottom:0;left:0;transform:translate(0,100%);width:100%;
    border-radius:6px 6px 0 0;padding:26px 20px 18px}
  .nlpop.offen .nlpop-box{transform:translate(0,0)}
  .nlpop-box h2{font-size:1.3rem}
  .nlpop-x{top:6px;right:6px;padding:10px 14px}   /* 44px Tippfläche */
}
@media(prefers-reduced-motion:reduce){
  .nlpop-box,.nlpop-veil{transition:none}
}