/* =====================================================================
   HERZBOX — Design-System (Relaunch)
   Richtung: hell/creme mit Galerie-Look · Fraunces SemiBold + Inter
   Alle Farben & Fonts als Custom Properties — nichts hardcoden.
   ===================================================================== */

:root{
  --bg:#F3ECDD;          /* Creme */
  --bg-2:#EBE2CF;
  --bg-3:#FFFDF8;        /* Papier */
  --ink:#211A15;
  --muted:#6E6155;
  --accent:#7A2318;      /* Dunkelrot aus dem Logo */
  --accent-2:#5E1A11;
  --rose:#C98A7D;
  --gold:#B0863A;
  --line:#E1D5C0;
  --ok:#3E6B4F;
  --warn-bg:#FFF3CD; --warn-bd:#E0C97F; --warn-ink:#6B5310;
  --radius:12px;
  --display:"Fraunces",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --pad:clamp(20px,5vw,56px);
  --maxw:1260px;
  --shadow:0 16px 36px rgba(60,40,20,.11);
  --shadow-lg:0 26px 60px rgba(60,40,20,.16);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.serif{font-family:var(--display)}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 30px;border-radius:100px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;letter-spacing:.01em;transition:transform .25s,background .25s}
.btn:hover{background:var(--accent-2);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.sm{min-height:44px;padding:0 22px;font-size:14px}
.btn.block{width:100%}

/* ---------- Ankündigung ---------- */
.ticker{background:var(--ink);color:var(--bg);font-size:12.5px;letter-spacing:.06em;text-align:center;padding:9px 16px;font-weight:500}
.ticker b{color:var(--rose);font-weight:600}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:80;background:rgba(243,236,221,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:74px;overflow:hidden}
.logo{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;flex:0 0 auto}
/* Das Logo aus dem Customizer kommt in Originalgröße — hier begrenzen,
   sonst überragt es den Kopfbereich und legt sich über den Inhalt. */
.logo img,.custom-logo{display:block;width:auto;height:auto;max-height:52px;max-width:190px;object-fit:contain}
@media(max-width:640px){.logo img,.custom-logo{max-height:42px;max-width:140px}}
.nav ul{display:flex;gap:26px;list-style:none;margin-left:auto;font-size:14.5px;font-weight:500}
.nav ul a{padding:6px 0;border-bottom:1.5px solid transparent;transition:border-color .2s;letter-spacing:.02em}
.nav ul a:hover,.nav ul a.active{border-color:var(--accent)}
.tools{display:flex;gap:4px;align-items:center}
.icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:18px;transition:background .2s;position:relative}
.icon:hover{background:var(--bg-2)}
.badge{position:absolute;top:5px;right:5px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;font-family:var(--body);padding:0 4px}
.burger{display:none}
@media(max-width:940px){
  .nav ul{display:none}
  .burger{display:grid}
  .nav{height:64px;gap:8px}
  .tools{margin-left:auto}
}

/* Mobile-Menü (Slide-in) */
.mmenu{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.mmenu .ov{position:absolute;inset:0;background:rgba(28,23,20,.45);opacity:0;transition:opacity .3s}
.mmenu .panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:var(--bg);box-shadow:-20px 0 50px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .35s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;padding:20px 24px}
.mmenu.open{visibility:visible;pointer-events:auto}
.mmenu.open .ov{opacity:1}
.mmenu.open .panel{transform:translateX(0)}
.mmenu .mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mmenu .mhead .logo{font-size:22px}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{font-family:var(--display);font-size:22px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line)}
.mmenu .mfoot{margin-top:auto;font-size:13px;color:var(--muted);padding-top:16px}

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.pagehero{padding:clamp(30px,5vw,58px) 0 clamp(24px,3vw,36px);border-bottom:1px solid var(--line);position:relative}
.pagehero .crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.pagehero .crumb a:hover{color:var(--accent)}
.pagehero h1{font-size:clamp(34px,5vw,58px);margin-bottom:12px}
.pagehero p{color:var(--muted);max-width:60ch;font-size:16.5px}

/* ---------- Home-Hero (Galeriewand) ---------- */
.hero{position:relative;padding:clamp(40px,6vw,74px) 0 clamp(44px,6vw,80px);overflow:hidden}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(44px,6.6vw,86px);font-weight:600;margin:20px 0 22px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--muted);max-width:44ch;margin-bottom:30px;line-height:1.7}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .meta-row{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
.hero .meta-row b{font-family:var(--display);font-size:23px;font-weight:600;display:block;line-height:1}
.hero .meta-row span{font-size:12.5px;color:var(--muted);margin-top:5px;display:block}

.gallery{position:relative}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tiles .col{display:flex;flex-direction:column;gap:16px}
.tiles .col.off{margin-top:44px}
/* Die Bildunterschriften dürfen den Hero nicht überlaufen (er schneidet ab).
   Zwei Zeilen sind reserviert, längere Namen werden gekürzt statt umzubrechen. */
.tile figcaption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile{margin:0;position:relative}
/* Der Rahmen sitzt auf dem Link, nicht auf dem Bild: so bleibt die Kachel
   quadratisch, egal welches Seitenverhältnis das Produktfoto hat. */
.tile>a{display:block;aspect-ratio:1/1;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:7%;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile>a img{display:block;width:100%;height:100%;object-fit:contain}
.tile:hover>a{transform:translateY(-4px)}
.tile figcaption{font-family:var(--display);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:9px}
.float-chip{position:absolute;top:-14px;right:-6px;z-index:5;background:var(--bg-3);border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 12px 28px rgba(60,40,20,.14)}
.float-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  /* Kein Vorziehen der Kacheln mehr: Über dem Hero steht jetzt das
     Saison-Bild. Sonst käme auf dem Handy erst ein Foto, dann Kacheln,
     und die Überschrift erst nach einer ganzen Bildschirmhöhe. */
  .gallery{margin-top:4px}
  .float-chip{top:-12px;right:6px}
}
@media(max-width:400px){.tiles .col.off{margin-top:24px}}

/* ---------- Trust ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 0;justify-items:center}
.trust-it{display:flex;gap:11px;align-items:flex-start}
.trust-it .ic{font-size:17px;color:var(--accent);line-height:1.2}
.trust-it b{display:block;font-size:14px;margin-bottom:1px}
.trust-it span{color:var(--muted);font-size:12.5px;line-height:1.45}
@media(max-width:820px){.trust-in{grid-template-columns:1fr 1fr;gap:16px}}

/* ---------- Sections ---------- */
section.blk{padding:clamp(52px,7vw,92px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(30px,4vw,48px)}
.sec-head .sub{color:var(--muted);max-width:50ch;margin-top:10px;font-size:15.5px}
.link-more{font-weight:600;font-size:14.5px;border-bottom:1.5px solid var(--accent);padding-bottom:3px;white-space:nowrap}
.plch{font-style:italic;font-size:13.5px;color:var(--muted)}

/* ---------- Kategorie-Kacheln ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(min-width:1100px){.cats{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.cat{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4;background:var(--bg-2);display:block}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cat:hover img{transform:scale(1.06)}
.cat .lab{position:absolute;inset:auto 0 0 0;padding:22px 20px 18px;background:linear-gradient(transparent,rgba(28,23,20,.78));color:#fff}
.cat .lab b{font-family:var(--display);font-size:22px;font-weight:600;display:block}
.cat .lab span{font-size:12.5px;opacity:.88}
@media(max-width:800px){.cats{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:520px){.cats{grid-template-columns:1fr}}

/* ---------- Filter ---------- */
/* Filterleiste: Beschriftung links, Knöpfe rechts in einem eigenen Block.
   Ohne diesen Block brach die zweite Reihe bis an den linken Rand aus und
   stand unter „FARBE" statt unter dem ersten Knopf. */
/* Oben und unten gleich viel Luft, damit die Knöpfe mittig zwischen
   den beiden Linien sitzen. */
.filters{display:flex;gap:12px;align-items:flex-start;margin:0;padding:18px 0;border-bottom:1px solid var(--line)}
.filters:first-of-type{border-top:1px solid var(--line)}
.filters+.fbar{margin-top:22px}
.filters .chipwrap{display:flex;flex-wrap:wrap;gap:9px;flex:1 1 auto;min-width:0}
@media(max-width:560px){
  .filters{flex-direction:column;gap:8px}
}
.flabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0;flex:0 0 auto;line-height:40px;white-space:nowrap}
@media(max-width:560px){.flabel{line-height:1.4}}
.fdiv{width:1px;height:22px;background:var(--line);margin:0 6px}
.chip{padding:9px 16px;border-radius:100px;border:1.5px solid var(--line);font-size:13.5px;font-weight:500;transition:.2s;background:var(--bg-3);min-height:40px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg-3)}
.fcount{margin-left:auto;font-size:13.5px;color:var(--muted);font-weight:500}
.fbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.fbar .sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.fbar select{font:inherit;font-size:14px;padding:9px 14px;border-radius:100px;border:1.5px solid var(--line);background:var(--bg-3);color:var(--ink);min-height:40px}
.freset{font-size:13px;color:var(--accent);font-weight:600;border-bottom:1px solid transparent}
.freset:hover{border-color:var(--accent)}
@media(max-width:700px){.fcount{margin-left:0;width:100%;margin-top:4px}.fbar .sort{margin-left:0}}

/* ---------- Produktgrid + Kachel ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1040px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:1fr 1fr;gap:16px}}
.card{display:flex;flex-direction:column;transition:transform .35s}
.card:hover{transform:translateY(-4px)}
.card .ph{position:relative;aspect-ratio:1/1;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card:hover .ph img{transform:scale(1.05)}
.card .ph-link{position:absolute;inset:0;z-index:1}
.card .uni,.card .wish{z-index:2}
.card .uni{position:absolute;top:12px;left:12px;background:rgba(255,253,248,.94);color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:100px;box-shadow:0 3px 10px rgba(60,40,20,.1)}
.card .wish{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,253,248,.94);display:grid;place-items:center;font-size:15px;transition:.2s;box-shadow:0 3px 10px rgba(60,40,20,.1)}
.card .wish:hover{transform:scale(1.1)}
.card .wish[aria-pressed="true"]{color:var(--accent)}
.card .no{font-family:var(--display);font-size:11.5px;letter-spacing:.18em;color:var(--gold);margin:16px 0 5px}
.card h3{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.card .ct{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.card .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.card{height:100%}
.card .pr{font-family:var(--display);font-size:19px;font-weight:600}
.card .pr small{display:block;font-family:var(--body);font-weight:400;font-size:10.5px;color:var(--muted);letter-spacing:0}
.card .add{background:var(--ink);color:var(--bg-3);font-weight:600;font-size:13px;padding:11px 16px;border-radius:100px;transition:.25s;min-height:40px;white-space:nowrap}
.card .add:hover{background:var(--accent)}
.empty{grid-column:1/-1;text-align:center;padding:56px 20px;color:var(--muted)}
.empty b{font-family:var(--display);font-size:22px;font-weight:600;display:block;margin-bottom:8px;color:var(--ink)}
@media(max-width:560px){.card .foot{flex-direction:column;align-items:stretch;gap:11px}.card .add{width:100%}}

/* ---------- Split / Geschenk ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split .media{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-3);border:1px solid var(--line);padding:5%}
.split.contain .media{object-fit:contain}
.split h2{font-size:clamp(28px,3.6vw,42px);margin:12px 0 16px}
.split p{color:var(--muted);margin-bottom:14px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:11px;margin:20px 0 26px}
.ticks li{display:flex;gap:11px;font-size:15.5px}
.ticks .c{color:var(--accent);font-weight:700}
.ticks .muted{color:var(--muted)}
@media(max-width:820px){.split{grid-template-columns:1fr}.split .media{aspect-ratio:16/10}}

/* ---------- Über uns / Gründerinnen ---------- */
.founders{background:var(--bg-2);border-radius:var(--radius);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.fphoto{aspect-ratio:1/1;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;text-align:center;font-size:12.5px;color:#8a6a5f;padding:24px;font-weight:500;line-height:1.5;border:2px dashed rgba(122,35,24,.32)}
.founders h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
.founders p{color:var(--muted);margin-bottom:12px}
.sig{font-family:var(--display);font-style:italic;font-size:22px;margin-top:16px;color:var(--ink)}
@media(max-width:760px){.founders{grid-template-columns:1fr;text-align:center}.fphoto{max-width:200px;margin:0 auto}}

/* ---------- Bewertungen ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.stars{color:var(--gold);letter-spacing:2px;margin-bottom:10px;font-size:15px}
.rev p{font-size:15.5px;margin-bottom:14px}
.rev .who{font-size:13.5px;color:var(--muted);font-weight:500}
@media(max-width:820px){.revs{grid-template-columns:1fr}}

/* ---------- Newsletter ---------- */
.nl{background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:clamp(32px,5vw,64px);text-align:center}
.nl h2{font-size:clamp(27px,3.6vw,42px);margin-bottom:12px;color:var(--bg)}
.nl p{color:#B9AE9F;max-width:52ch;margin:0 auto 26px}
.nlform{display:flex;gap:10px;max-width:470px;margin:0 auto;flex-wrap:wrap}
.nlform input{flex:1;min-width:200px;min-height:52px;border-radius:100px;border:1.5px solid #453D35;background:#2A231E;color:var(--bg);padding:0 22px;font:inherit;font-size:15px}
.nlform input::placeholder{color:#8A7F72}
.nlform input:focus{outline:2px solid var(--rose);outline-offset:1px}
.nl .nlnote{font-size:12.5px;color:#8A7F72;margin:34px auto 0}

/* ---------- Produktdetail ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start;padding-top:clamp(28px,4vw,44px)}
.pdp .crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.pdp .crumb a:hover{color:var(--accent)}
.pgal .main{aspect-ratio:1/1;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:5%}
.pgal .main img{width:100%;height:100%;object-fit:contain}
.pgal .thumbs{display:flex;gap:10px;margin-top:12px}
.pgal .thumbs button{width:74px;height:74px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg-3);overflow:hidden;padding:6px;transition:.2s}
.pgal .thumbs button.on,.pgal .thumbs button:hover{border-color:var(--accent)}
.pgal .thumbs img{width:100%;height:100%;object-fit:contain}
.pinfo .no{font-family:var(--display);font-size:12px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.pinfo h1{font-size:clamp(30px,4vw,44px);margin:8px 0 6px}
.pinfo .ct{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pinfo .price{font-family:var(--display);font-size:30px;font-weight:600;margin:20px 0 2px}
.pinfo .vat{font-size:12.5px;color:var(--muted);margin-bottom:20px}
/* Der Pflichtzusatz hängt direkt hinter dem Preis und klebte daran:
   „€ 49,00inkl. USt.". Ein halbes Geviert Abstand trennt beides, ohne
   dass es wie eine eigene Zeile wirkt. Gilt überall, wo ein Preis steht
   — Produktseite, Kacheln, Warenkorb. */
.vat{margin-left:.5em}
.stock{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--accent);background:#F6E7E2;border-radius:100px;padding:7px 14px;margin-bottom:22px}
.stock .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pbuy{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pbuy .btn{flex:1;min-width:200px}
.giftline{font-size:13.5px;color:var(--muted);margin-bottom:24px}
.pfeatures{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:22px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pfeatures li{display:flex;gap:10px;font-size:14px;align-items:flex-start}
.pfeatures .ic{color:var(--accent)}
.acc{border-bottom:1px solid var(--line)}
.acc:first-of-type{border-top:1px solid var(--line)}
.acc h3{font-family:var(--body);font-size:15px;font-weight:600;padding:16px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;letter-spacing:0}
/* Aufklappbarer Bereich ohne Höhendeckel.
   Vorher stand hier `max-height:340px` im offenen Zustand. Längere
   Produkttexte brachen dadurch mitten im Satz ab — gemeldet von Martina
   am 14.09.2026 an einem Ohrring, dessen Beschreibung nach „Perfekt, um
   jedem Sommeroutfit einen Hauch" endete. Ein größerer Deckel verschiebt
   das Problem nur; mit `grid-template-rows` von 0fr auf 1fr animiert der
   Browser gegen die tatsächliche Höhe, egal wie lang der Text ist.
   Dafür braucht der Inhalt einen eigenen Kasten (.inner) — die Zeile,
   die von 0fr auf 1fr wächst, darf nur ein einziges Kind sein. */
.acc .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;color:var(--muted);font-size:14.5px}
.acc.open .body{grid-template-rows:1fr}
.acc .body>.inner{overflow:hidden;min-height:0}
.acc .body p{padding-bottom:16px}
.acc .plus{transition:transform .3s;color:var(--accent);font-size:20px}
.acc.open .plus{transform:rotate(45deg)}
@media(max-width:860px){.pdp{grid-template-columns:1fr;gap:26px}.pfeatures{grid-template-columns:1fr}}

/* ---------- Rechtstexte / Prosa ---------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(22px,3vw,30px);margin:34px 0 12px}
.prose h3{font-size:19px;margin:24px 0 8px}
.prose p,.prose li{color:var(--ink);font-size:15.5px;margin-bottom:12px;line-height:1.7}
.prose ul,.prose ol{padding-left:22px;margin-bottom:14px}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent)}
.notice{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-ink);border-radius:var(--radius);padding:18px 22px;font-size:14.5px;line-height:1.6;margin:18px 0 30px}
.notice b{font-weight:700}
/* offene Stelle, die der Kunde noch festlegen muss */
.prose p.fill{background:var(--warn-bg);border-left:3px solid var(--warn-bd);color:var(--warn-ink);padding:10px 14px;border-radius:0 6px 6px 0;font-size:14px;font-style:italic}

/* ---------- Formular (heller Hintergrund) ---------- */
.form-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px);max-width:640px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field .hint{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.field input,.field textarea{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:13px 16px;font:inherit;font-size:15px}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.req{color:var(--accent)}
.form-ok{background:#EDF4EE;border:1px solid #BBD3C0;color:#22503A;border-radius:var(--radius);padding:20px 24px;font-size:15px;line-height:1.6}
.form-ok b{display:block;font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:6px}
.btn-widerruf{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 32px;border-radius:100px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;border:2px solid var(--accent);transition:.25s}
.btn-widerruf:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-2px)}
/* Falle für Formular-Roboter: unsichtbar, aber nicht display:none —
   das überspringen manche von ihnen. */
.hp,.screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.widerruf-cta{margin-top:32px}

/* ---------- Gravur auf der Produktseite ---------- */
.gravur{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--bg-3);padding:14px 16px;margin:20px 0}
.gravur.offen{border-color:var(--accent-soft);background:var(--bg-2)}
.gravur-an{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:15px}
.gravur-an input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--accent);cursor:pointer}
.gravur-titel{font-weight:600}
.gravur-preis{margin-left:auto;color:var(--accent);font-weight:700;white-space:nowrap}
.gravur-preis .woocommerce-Price-amount{font-weight:700}
/* Zugeklappt nimmt der Block keinen Platz weg — aufgeklappt wächst er auf. */
.gravur-feld{display:none;padding-top:12px}
.gravur.offen .gravur-feld{display:block}
.gravur-was{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.gravur-feld input[type=text]{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:13px 16px;font:inherit;font-size:15px}
.gravur-feld input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.gravur-zaehler{font-size:12.5px;color:var(--muted);margin-top:6px;text-align:right}
.gravur-hinweis{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:10px;padding-left:12px;border-left:2px solid var(--accent-soft)}
.gravur-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px}
.gravur-weg{min-height:44px;background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;text-decoration:underline;padding:0}
.gravur-weg:hover{color:var(--accent)}
/* Im Warenkorb steht das Feld in der schmalen rechten Spalte, in der
   WooCommerce sonst nur die Zwischensumme zeigt — dort über die volle
   Breite, sonst quetscht es sich neben die Summenbox. */
.gravur-warenkorb{width:100%;float:none;clear:both;margin:0 0 26px}
.gravur-warenkorb form{margin:0}

/* Beim Block-Warenkorb steht das Feld über der Tabelle, nicht in einer
   Spalte daneben. Es soll dieselbe Breite haben wie der Block darunter —
   der bringt seinen eigenen Innenabstand mit, deshalb hier nur der
   Abstand nach unten. Die Meldungen sitzen darüber. */
.gravur-meldungen{margin:0 0 18px}
.gravur-meldungen .woocommerce-message,
.gravur-meldungen .woocommerce-error,
.gravur-meldungen .woocommerce-info{margin:0 0 12px}

/* ---------- Footer ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0 28px;margin-top:clamp(48px,6vw,80px)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.fgrid h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:var(--muted);font-weight:600;font-family:var(--body)}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.fgrid ul a:hover{color:var(--accent)}
.fbrand .logo{font-size:24px}
.fbrand p{font-size:14.5px;color:var(--muted);margin:12px 0 16px;max-width:34ch}
.fbrand a.contact{font-weight:600;display:block;margin-bottom:2px}
.pays{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.pay{border:1px solid var(--line);background:var(--bg-3);border-radius:6px;padding:5px 10px;font-size:11.5px;font-weight:600;letter-spacing:.03em}
.fbot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.new-flag{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-ink);border-radius:5px;padding:1px 7px;font-size:10.5px;font-weight:700;letter-spacing:.05em;margin-left:6px;vertical-align:1px;font-family:var(--body)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:26px}}

/* ---------- Mobile Sticky CTA ---------- */
.mcta{display:none}
@media(max-width:760px){
  .mcta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:70;gap:9px;background:var(--bg-3);border:1px solid var(--line);border-radius:100px;padding:8px 8px 8px 20px;align-items:center;box-shadow:0 10px 30px rgba(60,40,20,.2)}
  .mcta span{font-size:13.5px;font-weight:600;flex:1}
  .mcta .btn{min-height:44px;padding:0 20px;font-size:14px}
  body.has-mcta{padding-bottom:78px}
}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);background:var(--ink);color:var(--bg);padding:14px 24px;border-radius:100px;font-size:14.5px;font-weight:500;z-index:200;transition:transform .4s cubic-bezier(.2,.8,.3,1);box-shadow:0 12px 34px rgba(0,0,0,.28);max-width:90vw;text-align:center}
.toast.on{transform:translate(-50%,0)}
@media(max-width:760px){.toast{bottom:84px}}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(20px)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* =====================================================================
   ORNAMENTE — „etwas Geschnörksel, Vintage" (Wunsch Tina & Mimi)
   Die Formen sind aus dem ausgelaserten Muster ihres Deckels abgeleitet:
   Schnörkel, Herzbogen, kleine Punkte. Bewusst sparsam eingesetzt —
   an Übergängen und Rahmen, nie über dem Produkt selbst.
   ===================================================================== */

:root{
  --olive:#5A6248;        /* zweite Farbe, aus ihren eigenen Grafiken */
  --olive-2:#6E7758;
  --gold-2:#C9A059;
  --orn-schnoerkel:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012c8%200%2010-7%2016-7s7%209%200%209-9-7-1-7c9%200%2012%2010%2022%2010%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2212%22%20r%3D%222.8%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M116%2012c-8%200-10-7-16-7s-7%209%200%209%209-7%201-7c-9%200-12%2010-22%2010%22%2F%3E%3C%2Fsvg%3E");
  --orn-ecke:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M31%203H8c-3%200-5%202-5%205v23%22%2F%3E%3Cpath%20d%3D%22M12%208c-3%200-5%202-5%205%200%202%202%203.5%203.5%202.5S12%2012%209%2012%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%226%22%20r%3D%221.7%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2216%22%20r%3D%221.7%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------- Zierteiler zwischen Abschnitten ---------- */
.zier{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:clamp(30px,5vw,54px) 0;color:var(--gold);
}
.zier::before,.zier::after{
  content:"";height:1px;flex:1;max-width:190px;
  background:linear-gradient(90deg,transparent,var(--line),var(--gold));
}
.zier::after{background:linear-gradient(270deg,transparent,var(--line),var(--gold))}
.zier::marker{content:""}
.zier>i{
  width:110px;height:22px;flex:0 0 auto;background:currentColor;opacity:.95;
  -webkit-mask:var(--orn-schnoerkel) no-repeat center/contain;
          mask:var(--orn-schnoerkel) no-repeat center/contain;
}
/* Ohne <i> im Markup trotzdem ein Ornament zeigen */
.zier:not(:has(i))::before{margin-right:0}


/* ---------- Eckornamente an großen Überschriften ---------- */
.sec-head h2,.founders h2,.split h2{position:relative}
.orn-h{position:relative;padding-top:20px}
.orn-h::before{
  content:"";position:absolute;top:0;left:0;width:44px;height:12px;
  background:var(--gold);opacity:.85;
  -webkit-mask:var(--orn-schnoerkel) no-repeat left center/contain;
          mask:var(--orn-schnoerkel) no-repeat left center/contain;
}

/* ---------- Goldener Innenrahmen für Kacheln ---------- */
.tile>a{position:relative}
.tile>a::after{
  content:"";position:absolute;inset:9px;border:1px solid var(--gold);
  opacity:.34;border-radius:3px;pointer-events:none;transition:opacity .3s;
}
.tile:hover>a::after{opacity:.6}

/* ---------- Zierrahmen um ein Bild (Gründerinnen, Holzbox) ---------- */
.rahmen{position:relative;isolation:isolate}
.rahmen>img,.rahmen>.media{position:relative;z-index:1}
.rahmen::before{
  content:"";position:absolute;inset:-13px;z-index:0;
  border:1px solid var(--gold);opacity:.5;border-radius:calc(var(--radius) + 6px);
}
.rahmen::after{
  content:"";position:absolute;inset:-6px;z-index:0;
  border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);
}
/* Ecken-Röschen wie am Deckel */
.rahmen .ecke{
  position:absolute;width:26px;height:26px;z-index:2;opacity:.8;
  background:var(--gold);
  -webkit-mask:var(--orn-ecke) no-repeat center/contain;
          mask:var(--orn-ecke) no-repeat center/contain;
}
.rahmen .ecke.ol{top:-20px;left:-20px}
.rahmen .ecke.or{top:-20px;right:-20px;transform:scaleX(-1)}
.rahmen .ecke.ul{bottom:-20px;left:-20px;transform:scaleY(-1)}
.rahmen .ecke.ur{bottom:-20px;right:-20px;transform:scale(-1)}

/* ---------- Olivgrüner Abschnitt ---------- */
.blk.olive{background:var(--olive);color:#F1EEE4}
.blk.olive .eyebrow{color:var(--gold-2)}
.blk.olive h2,.blk.olive h3{color:#FBF8F0}
.blk.olive p{color:#DAD8CB}
.blk.olive .zier{color:var(--gold-2)}
.blk.olive .zier::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),var(--gold-2))}
.blk.olive .zier::after{background:linear-gradient(270deg,transparent,rgba(255,255,255,.22),var(--gold-2))}
.blk.olive .btn{background:var(--gold-2);color:#2A2A22}
.blk.olive .btn:hover{background:#D8B472}
.blk.olive .btn.ghost{border-color:rgba(255,255,255,.5);color:#F1EEE4;background:transparent}
.blk.olive .btn.ghost:hover{background:rgba(255,255,255,.12)}
.blk.olive .ticks .c{color:var(--gold-2)}
/* Der Grauton aus dem hellen Design verschwindet auf Oliv fast ganz */
.blk.olive .ticks .muted{color:#BFC4AC}
.blk.olive .rahmen::before{border-color:rgba(201,160,89,.6)}
.blk.olive .rahmen::after{border-color:rgba(255,255,255,.2)}

/* ---------- Saison-Band über dem Hero ---------- */
.saison{position:relative;overflow:hidden;background:var(--bg-2)}
.saison img{
  display:block;width:100%;
  height:clamp(200px,32vw,430px);object-fit:cover;object-position:center;
}
.saison::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(176,134,58,.35) inset;
}
@media(max-width:640px){
  .saison img{height:clamp(160px,46vw,260px)}
  .saison::after{inset:9px}
}

/* Bei Ornamenten sparsam bleiben, wenn jemand Animationen abbestellt hat */
@media (prefers-reduced-motion:reduce){
  .tile>a::after{transition:none}
}

/* Die Klasse .muster stammt aus der Zeit, als hier ein Damastraster lag.
   Seit 20.08. trägt die Seite einen Verlauf statt eines Musters; die
   Klasse bleibt im Markup stehen, weil der Olivblock daran hängt. */
.muster{position:relative;isolation:isolate}

/* ---------- Werkstattband (Fertigungsfotos von Martina) ---------- */
.werkstattband{position:relative;overflow:hidden;background:var(--bg-2);margin-bottom:clamp(30px,5vw,54px)}
.werkstattband img{display:block;width:100%;height:clamp(180px,26vw,340px);object-fit:cover}
.werkstattband::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(176,134,58,.32);
}
@media(max-width:640px){.werkstattband::after{inset:9px}}

/* =====================================================================
   ORNAMENTE — zweite Runde, etwas deutlicher (Wunsch Tina & Mimi)
   ===================================================================== */

/* Eyebrow bekommt ein kleines Ornament davor */
.eyebrow.orn::before{
  content:"";display:inline-block;vertical-align:middle;
  width:26px;height:9px;margin-right:9px;
  background:currentColor;opacity:.85;
  -webkit-mask:var(--orn-schnoerkel) no-repeat left center/contain;
          mask:var(--orn-schnoerkel) no-repeat left center/contain;
}

/* Der kleine Schnörkel unter jeder Abschnittsüberschrift ist entfernt.
   Er stand auf der ganzen Seite unter jedem h2, drängte sich zwischen
   Überschrift und Einleitungssatz und störte mehr, als er schmückte.
   Die Zierteiler (.zier) und die Rahmen bleiben. */

/* Vertrauensleiste: Ornament als Trenner statt harter Linie */
.trust{position:relative}
.trust::before,.trust::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:120px;height:18px;background:var(--gold);opacity:.5;
  -webkit-mask:var(--orn-schnoerkel) no-repeat center/contain;
          mask:var(--orn-schnoerkel) no-repeat center/contain;
}
.trust::before{top:-9px}
.trust::after{bottom:-9px}

/* Ecken am Saison-Band */
.saison .ecke,.werkstattband .ecke{
  position:absolute;width:30px;height:30px;z-index:3;opacity:.7;background:var(--bg-3);
  -webkit-mask:var(--orn-ecke) no-repeat center/contain;
          mask:var(--orn-ecke) no-repeat center/contain;
}
.saison .ecke.ol,.werkstattband .ecke.ol{top:18px;left:18px}
.saison .ecke.or,.werkstattband .ecke.or{top:18px;right:18px;transform:scaleX(-1)}
.saison .ecke.ul,.werkstattband .ecke.ul{bottom:18px;left:18px;transform:scaleY(-1)}
.saison .ecke.ur,.werkstattband .ecke.ur{bottom:18px;right:18px;transform:scale(-1)}

/* Kategoriekacheln: feiner Goldrahmen innen */
.cat::after{
  content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,253,248,.5);border-radius:6px;transition:opacity .3s;opacity:.8;
}
.cat:hover::after{opacity:1}

/* Produktkacheln im Raster: zarter Goldrahmen im Bild */
.card .ph::after{
  content:"";position:absolute;inset:8px;z-index:2;pointer-events:none;
  border:1px solid var(--gold);opacity:.22;border-radius:4px;transition:opacity .3s;
}
.card:hover .ph::after{opacity:.42}



/* ---------- Lupe in der HTML-Vorschau ----------
   Bildet nach, was WooCommerce auf der echten Seite mitbringt, damit
   Tina & Mimi die Funktion beurteilen können. */
.pgal .main{position:relative}
.pgal .main img{cursor:zoom-in}
.lupe{
  position:absolute;top:14px;right:14px;z-index:5;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,253,248,.94);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--accent);
  box-shadow:0 4px 14px rgba(60,40,20,.14);transition:.2s;cursor:zoom-in;
}
.lupe::after{content:"⌕";font-size:23px;line-height:1}
.lupe:hover{background:var(--accent);color:#fff;transform:scale(1.06)}

.lupe-voll{
  position:fixed;inset:0;z-index:9999;background:rgba(28,23,20,.94);
  display:grid;place-items:center;opacity:0;transition:opacity .2s;
}
.lupe-voll.an{opacity:1}
.lupe-voll .buehne{max-width:92vw;max-height:82vh;overflow:hidden;display:grid;place-items:center}
.lupe-voll img{
  max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:8px;background:#fff;
  cursor:zoom-in;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.lupe-voll img.zoom{transform:scale(2.4);cursor:zoom-out}
.lupe-voll .zu{
  position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,253,248,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer;
}
.lupe-voll .zu:hover{background:rgba(255,253,248,.3)}
.lupe-voll .tipp{
  position:absolute;bottom:24px;left:0;right:0;text-align:center;
  color:rgba(243,236,221,.7);font-size:13px;letter-spacing:.04em;
}
@media(max-width:640px){
  .lupe{width:40px;height:40px;top:10px;right:10px}
  .lupe-voll .tipp{font-size:12px}
}

/* ---------- Kopfbereich „Über uns" mit Verzierung ---------- */
.pagehero.muster{isolation:isolate}