/*
Theme Name:   LeviLoop
Theme URI:    https://leviloop.ch
Description:  Ruhiges, warmes Design fuer den LeviLoop-Shop — Tag-Nacht-Szene,
              gezeichnete Produktbilder, WooCommerce. Entstanden aus dem
              Design-Prototyp auf f2x.ch/leviloop.
Author:       LeviLoop GmbH
Version:      0.1.0
Requires PHP: 7.4
License:      proprietaer
Text Domain:  leviloop
*/

/* ============================================================
   LeviLoop — Design-Prototyp
   Farbtoken: helle Fassung auf :root, dunkle Fassung nur als
   Token-Umdefinition (drei Theme-Zustaende, siehe unten).
   ============================================================ */
:root{
  --grund:#FAFAF8;
  --flaeche:#FFFFFF;
  --flaeche-2:#F4F6F9;
  --sand:#F3EDE3;
  --rosa:#F7DFE2;
  --mint-weich:#DFF3E9;
  --tinte:#26314A;
  --tinte-weich:#5F6C85;
  --tinte-zart:#8B95A8;
  --blau:#5B8CC4;
  --blau-tief:#3A6699;
  --blau-zart:#E4EDF7;
  --mint:#2FA97C;
  --mint-hell:#7BE3B4;
  /* Schrift auf gefuellten Knoepfen. Im Dunkelmodus sind --blau-tief
     und --mint HELL — weisse Schrift darauf war fast unlesbar
     (gefunden 15.08.2026 mit optikpruefung.py). */
  --knopf-text:#FFFFFF;
  --nacht:#131C33;
  --nacht-2:#1D2A4A;
  --linie:#E7EAEF;
  --schatten:0 1px 2px rgba(38,49,74,.04), 0 8px 24px -12px rgba(38,49,74,.16);
  --schatten-hoch:0 2px 4px rgba(38,49,74,.05), 0 20px 44px -18px rgba(38,49,74,.28);
  --radius:22px;
  --radius-klein:14px;
  --display:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --spur:.09em;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#0E1526;
    --flaeche:#16203A;
    --flaeche-2:#1B2743;
    --sand:#1F2A44;
    --rosa:#3A2A31;
    --mint-weich:#16352B;
    --tinte:#E9EFF8;
    --tinte-weich:#A6B2C7;
    --tinte-zart:#7A879E;
    --blau:#8FB8E8;
    --blau-tief:#A9CBF0;
    --blau-zart:#1C2A46;
    --mint:#5CD3A2;
    --mint-hell:#8DEFC4;
    --knopf-text:#0E1526;
    --linie:#26314D;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --schatten-hoch:0 2px 4px rgba(0,0,0,.35), 0 20px 44px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --grund:#0E1526;
  --flaeche:#16203A;
  --flaeche-2:#1B2743;
  --sand:#1F2A44;
  --rosa:#3A2A31;
  --mint-weich:#16352B;
  --tinte:#E9EFF8;
  --tinte-weich:#A6B2C7;
  --tinte-zart:#7A879E;
  --blau:#8FB8E8;
  --blau-tief:#A9CBF0;
  --blau-zart:#1C2A46;
  --mint:#5CD3A2;
  --mint-hell:#8DEFC4;
  --knopf-text:#0E1526;
  --linie:#26314D;
  --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  --schatten-hoch:0 2px 4px rgba(0,0,0,.35), 0 20px 44px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--grund);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blau-tief);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.08}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.16}
h3{font-size:1.2rem;line-height:1.3}
p{margin:0}
.bahn{width:min(1180px,100% - 40px);margin-inline:auto}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--blau-tief);
}
.lead{font-size:1.12rem;color:var(--tinte-weich);max-width:60ch}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{display:flex;align-items:center;gap:28px;padding:14px 0;}
.marke{display:flex;align-items:center;gap:10px;color:var(--tinte);text-decoration:none;flex:none}
.marke:hover{text-decoration:none}
.marke-wort{font-family:var(--display);font-size:1.42rem;letter-spacing:-.02em}
.marke-wort b{font-weight:400;color:var(--blau-tief)}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
/* Die Links waren nackter Text (Felix, 15.08.: „zu schlicht") — jetzt
   liegen sie in dezenten Pillen, die beim Ueberfahren anspringen. */
.nav a{
  color:var(--tinte-weich);font-size:.95rem;font-weight:600;
  padding:8px 14px;border-radius:999px;
  transition:background .18s ease,color .18s ease;
}
.nav a:hover{
  color:var(--blau-tief);text-decoration:none;background:var(--blau-zart);
}
.knopf{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;border:1px solid transparent;
  background:var(--blau-tief);color:var(--knopf-text);font:inherit;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  box-shadow:0 6px 16px -8px rgba(58,102,153,.8);
}
.knopf:hover{background:var(--blau);transform:translateY(-1px);text-decoration:none;color:var(--knopf-text)}
.knopf.stumm{
  background:transparent;color:var(--tinte);border-color:var(--linie);box-shadow:none;
}
.knopf.stumm:hover{background:var(--flaeche-2);color:var(--tinte)}
/* Der Warenkorb ist der wichtigste Knopf im Kopf und soll sich abheben
   (Felix, 15.08.): gefuellt in Markenblau, mit Wagensymbol und einem
   Zaehler-Abzeichen in Mint. */
.warenkorb{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px;
  border-radius:999px;border:1px solid transparent;
  background:var(--blau-tief);color:var(--knopf-text);
  font-size:.92rem;font-weight:600;
  box-shadow:0 6px 16px -8px rgba(58,102,153,.85);
  transition:background .2s ease,transform .15s ease,box-shadow .2s ease;
}
.warenkorb:hover{
  text-decoration:none;color:var(--knopf-text);background:var(--blau);
  transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(58,102,153,.9);
}
.warenkorb svg{flex:none}
.warenkorb .wk-anzahl{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--mint);color:var(--knopf-text);
  font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}
/* Leerer Warenkorb: das Abzeichen tritt zurueck */
.warenkorb .wk-anzahl.leer{background:rgba(255,255,255,.22)}
.nav-schalt{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,76px) 0 0}
.hero-raster{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;
}
.hero-text{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero h1 em{font-style:italic;color:var(--mint)}
.hero-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.hero-fakten{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:6px;
  font-size:.88rem;color:var(--tinte-weich);
}
.hero-fakten b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--tinte);font-weight:400}

/* Szene */
.szene-halter{position:relative}
.szene{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:32px;overflow:hidden;display:block;
  box-shadow:var(--schatten-hoch);background:var(--nacht);
}
.szene-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity 1.1s ease;
}
.szene-bild.nacht{opacity:0}
.szene-halter.dunkel .szene-bild.tag{opacity:0}
.szene-halter.dunkel .szene-bild.nacht{opacity:1}
.schalter{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-24px;
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 12px 10px 20px;border-radius:999px;
  background:var(--flaeche);border:1px solid var(--linie);
  box-shadow:var(--schatten-hoch);
  font:inherit;font-size:.9rem;font-weight:600;color:var(--tinte);cursor:pointer;
  white-space:nowrap;
}
.schalter:hover{border-color:var(--blau)}
.wippe{
  width:46px;height:26px;border-radius:999px;background:var(--blau-zart);
  border:1px solid var(--linie);position:relative;flex:none;transition:background .3s ease;
}
.wippe::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--blau-tief);transition:transform .3s cubic-bezier(.4,1.4,.5,1),background .3s ease;
}
.dunkel .wippe{background:var(--nacht-2)}
.dunkel .wippe::after{transform:translateX(20px);background:var(--mint-hell)}

/* ---------- Vertrauensband ---------- */
.band{
  margin-top:60px;background:var(--sand);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
}
.band-innen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:22px 0;
}
.band-punkt{display:flex;gap:12px;align-items:flex-start;padding:4px 14px}
.band-punkt + .band-punkt{border-left:1px solid color-mix(in srgb,var(--tinte) 12%,transparent)}
.band-punkt svg{flex:none;margin-top:2px}
.band-punkt strong{display:block;font-size:.95rem}
.band-punkt span{font-size:.83rem;color:var(--tinte-weich);line-height:1.45;display:block}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(56px,7vw,96px) 0}
.abschnitt-kopf{display:flex;flex-direction:column;gap:12px;max-width:64ch;margin-bottom:38px}
.welle{display:block;width:100%;height:auto}

/* ---------- Finder + Produkte ---------- */
.finder{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:18px;border-radius:var(--radius);background:var(--flaeche);
  border:1px solid var(--linie);box-shadow:var(--schatten);margin-bottom:32px;
}
.finder-titel{
  font-size:.72rem;font-weight:700;letter-spacing:var(--spur);text-transform:uppercase;
  color:var(--tinte-zart);padding:0 8px 0 6px;
}
.chip{
  padding:8px 16px;border-radius:999px;border:1px solid var(--linie);
  background:var(--flaeche);color:var(--tinte-weich);
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:all .18s ease;
}
.chip:hover{border-color:var(--blau);color:var(--blau-tief)}
.chip[aria-pressed="true"]{background:var(--blau-tief);border-color:var(--blau-tief);color:var(--knopf-text)}
.raster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px;
}
.karte{
  /* die Karte ist jetzt ein Link auf die Produktseite */
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--schatten);
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease;
}
.karte:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--schatten-hoch);border-color:color-mix(in srgb,var(--blau) 45%,var(--linie))}
.karte-bild{
  /* Die Produktbilder sind bereits auf 5:4 eingepasst und bringen ihren
     Hintergrund mit — die Kachel muss ihn nur noch aufnehmen. */
  position:relative;aspect-ratio:5/4;background:#FFFFFF;overflow:hidden;
}
/* Das Bild wird absolut gesetzt, sonst sprengt ein hochformatiges Motiv
   (die PET-Flasche) das 4:3-Format der Kachel und die Karte wird doppelt
   so hoch wie die anderen im Raster. */
.karte-bild img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;transition:opacity .45s ease,transform .5s ease}
/* Zweites Bild: dieselbe Flasche im Dunkeln. Beim Ueberfahren der Karte geht
   das Licht aus — genau das, was das Produkt tut. */
.karte-bild img.nacht{opacity:0}
.karte:hover .karte-bild img.tag{opacity:0}
.karte:hover .karte-bild img.nacht{opacity:1}
.karte:hover .karte-bild img{transform:scale(1.02)}
/* Auf dem Telefon gibt es kein Ueberfahren mit der Maus — dort blieb das
   staerkste Verkaufsargument unsichtbar: dass der Ring im Dunkeln leuchtet.
   Deshalb wechseln die Karten dort von selbst in die Nachtansicht und
   zurueck, versetzt je Karte, damit das Raster ruhig wirkt. */
@media (hover:none){
  .karte-bild img.nacht{animation:karte-nacht 9s ease-in-out infinite}
  .karte-bild img.tag{animation:karte-tag 9s ease-in-out infinite}
  .raster .karte:nth-child(3n+2) .karte-bild img{animation-delay:1.2s}
  .raster .karte:nth-child(3n+3) .karte-bild img{animation-delay:2.4s}
  .karte-nachtmarke{display:inline-flex}
}
@keyframes karte-nacht{
  0%,58%{opacity:0} 68%,88%{opacity:1} 96%,100%{opacity:0}
}
@keyframes karte-tag{
  0%,58%{opacity:1} 68%,88%{opacity:0} 96%,100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .karte-bild img.nacht,.karte-bild img.tag{animation:none!important}
}
.karte-text{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.karte-marke{
  font-size:.68rem;font-weight:700;letter-spacing:var(--spur);text-transform:uppercase;
  color:var(--tinte-zart);
}
.karte-name{font-family:var(--display);font-size:1.06rem;line-height:1.3;color:var(--tinte)}
.karte-fuss{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
/* Die Set-Angabe („5 Stück 9.50“) ist breiter als ein blosses „CHF“ —
   auf schmalen Schirmen rutscht der Knopf sonst aus der Karte. */
.karte-fuss .preis{flex:1 1 auto}
.preis{font-family:var(--display);font-size:1.18rem;font-variant-numeric:tabular-nums;color:var(--tinte)}
.preis small{font-family:var(--sans);font-size:.7rem;color:var(--tinte-zart);letter-spacing:var(--spur);text-transform:uppercase;margin-right:4px}
.mini-knopf{
  display:inline-flex;align-items:center;
  padding:8px 15px;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche-2);
  color:var(--tinte);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .18s ease;
}
.karte:hover .mini-knopf{background:var(--blau-tief);border-color:var(--blau-tief);color:var(--knopf-text)}
.mini-knopf:hover{background:var(--blau-tief);border-color:var(--blau-tief);color:var(--knopf-text)}
.lager{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--mint);font-weight:600;
}
.lager::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 22%,transparent)}
.leer-hinweis{padding:40px;text-align:center;color:var(--tinte-weich);grid-column:1/-1}

/* ---------- Schritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.schritt{
  position:relative;padding:30px 26px 26px;border-radius:var(--radius);
  background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten);
  display:flex;flex-direction:column;gap:10px;
}
.schritt-nr{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--blau-zart);color:var(--blau-tief);
  font-family:var(--display);font-size:1.1rem;margin-bottom:4px;
}
.schritt p{color:var(--tinte-weich);font-size:.95rem}
.schritt-linie{
  position:absolute;top:48px;right:-14px;width:28px;height:2px;
  background:repeating-linear-gradient(90deg,var(--linie) 0 6px,transparent 6px 11px);
}
.schritt:last-child .schritt-linie{display:none}

/* ---------- Staffel ---------- */
.staffel{
  background:linear-gradient(135deg,var(--blau-zart),var(--mint-weich));
  border-radius:var(--radius);padding:clamp(26px,4vw,44px);
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  border:1px solid var(--linie);
}
.staffel-preise{display:flex;gap:14px;flex-wrap:wrap}
.stufe{
  background:var(--flaeche);border-radius:var(--radius-klein);padding:16px 22px;text-align:center;
  min-width:112px;box-shadow:var(--schatten);border:1px solid var(--linie);
}
.stufe span{display:block;font-size:.74rem;letter-spacing:var(--spur);text-transform:uppercase;color:var(--tinte-zart);font-weight:700}
.stufe b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:400;font-variant-numeric:tabular-nums;margin-top:4px}
.stufe.beste{border-color:var(--mint);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 18%,transparent),var(--schatten)}
.stufe.beste b{color:var(--mint)}

/* ---------- PET ---------- */
.pet{
  background:linear-gradient(160deg,var(--nacht),var(--nacht-2));
  color:#EAF0F8;border-radius:var(--radius);overflow:hidden;position:relative;
  display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;
  padding:clamp(28px,4vw,52px);box-shadow:var(--schatten-hoch);
}
.pet h2{color:#fff}
.pet p{color:#B9C6DC;max-width:46ch}
.pet-inhalt{display:flex;flex-direction:column;gap:18px;align-items:flex-start;position:relative;z-index:2}
.pet .eyebrow{color:var(--mint-hell)}
.pet .knopf{background:var(--mint);color:#0B1A14;box-shadow:0 6px 20px -8px rgba(47,169,124,.9)}
.pet .knopf:hover{background:var(--mint-hell);color:#0B1A14}
.pet-bild{position:relative;z-index:2;display:flex;justify-content:center}
/* Die gezeichnete PET-Flasche bringt ihre eigene Nachtszene mit — sie wird
   deshalb gerahmt gezeigt, nicht freigestellt beleuchtet. */
.pet-bild img{
  max-height:300px;width:auto;border-radius:var(--radius);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.75),
             0 0 0 1px rgba(255,255,255,.06);
}
.pet-sterne{position:absolute;inset:0;z-index:1;opacity:.55}

/* ---------- Stimme / Bewertung ---------- */
.bewertung{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:28px 32px;box-shadow:var(--schatten);
}
.sterne-note{text-align:center;padding-right:28px;border-right:1px solid var(--linie)}
.sterne-note b{display:block;font-family:var(--display);font-size:2.8rem;line-height:1;font-variant-numeric:tabular-nums}
.sterne-note .sterne{color:#E9B949;letter-spacing:.12em;font-size:1.05rem;margin-top:6px}
.sterne-note small{display:block;color:var(--tinte-zart);font-size:.8rem;margin-top:4px}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:2px;max-width:78ch}
.faq details{
  border-bottom:1px solid var(--linie);padding:4px 0;
}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:600;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--tinte-zart);border-bottom:2px solid var(--tinte-zart);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.faq details p{padding:0 40px 20px 0;color:var(--tinte-weich);font-size:.97rem}

/* ---------- Newsletter / Abschluss ---------- */
.abschluss{
  background:var(--sand);border-radius:var(--radius);padding:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;border:1px solid var(--linie);
}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--flaeche-2);border-top:1px solid var(--linie);margin-top:clamp(48px,6vw,88px);padding:52px 0 30px}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.fuss h4{font-size:.74rem;letter-spacing:var(--spur);text-transform:uppercase;color:var(--tinte-zart);margin:0 0 14px}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fuss a{color:var(--tinte-weich);font-size:.92rem}
.fuss a:hover{color:var(--blau-tief)}
.fuss-unten{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.84rem;color:var(--tinte-zart);
}
/* Zahlungsmittel als Badges mit Symbol. Die Kacheln bleiben bewusst WEISS —
   Markenlogos brauchen einen definierten Grund, auch im Dunkelmodus. */
.zahlarten{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zahlart{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:8px;border:1px solid var(--linie);
  background:#fff;font-size:.76rem;font-weight:700;
  letter-spacing:.03em;color:#26314A;
}
.zahlart svg{flex:none;display:block}
.zahlart.twint{
  background:#000;border-color:#000;color:#fff;
  font-weight:800;letter-spacing:.09em;
}
.zahlart.paypal i{font-style:normal;color:#003087}
.zahlart.paypal i b{color:#0079C1;font-weight:inherit}

/* ---------- Hinweisfahne Prototyp ---------- */
.fahne{
  background:var(--nacht);color:#DCE6F5;font-size:.82rem;padding:9px 0;text-align:center;
}
.fahne b{color:var(--mint-hell)}

/* ---------- Responsiv ---------- */
@media (max-width:960px){
  .hero-raster{grid-template-columns:1fr;gap:44px}
  .szene-halter{order:-1;max-width:520px;margin-inline:auto;width:100%}
  .band-innen{grid-template-columns:repeat(2,1fr);gap:16px 0}
  .band-punkt:nth-child(3){border-left:none}
  .schritte{grid-template-columns:1fr}
  .schritt-linie{display:none}
  .pet{grid-template-columns:1fr}
  .staffel,.abschluss{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav-schalt{display:inline-flex;margin-left:auto}
}
@media (max-width:660px){
  /* im Kopf wird es eng: Warenkorb nur noch als Symbol, engere Abstaende */
  .kopf-innen{gap:12px}
  .wk-wort{display:none}
  .marke-wort{font-size:1.28rem}
  .nav-schalt{padding:10px 16px}
}
@media (max-width:600px){
  body{font-size:16px}
  .band-innen{grid-template-columns:1fr}
  .band-punkt + .band-punkt{border-left:none;border-top:1px solid color-mix(in srgb,var(--tinte) 10%,transparent);padding-top:14px}
  .bewertung{grid-template-columns:1fr}
  .sterne-note{border-right:none;border-bottom:1px solid var(--linie);padding:0 0 20px}
  .fuss-raster{grid-template-columns:1fr}
  .raster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================
   Unterseiten: Produkt, Shop, Über uns
   ============================================================ */

/* ---------- Brotkrume ---------- */
.brotkrume{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:18px 0 4px;font-size:.86rem;color:var(--tinte-zart);
}
.brotkrume a{color:var(--tinte-weich)}
.brotkrume .jetzt{color:var(--tinte)}

/* ---------- Produktseite ---------- */
.produkt{padding:clamp(18px,3vw,34px) 0 0}
.produkt-raster{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);
  align-items:start;
}
.produkt-bilder{display:flex;flex-direction:column;gap:12px}
.buehne{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(170deg,var(--flaeche),var(--flaeche-2));
  border:1px solid var(--linie);box-shadow:var(--schatten);
  aspect-ratio:7/5;
}
.buehne-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .55s ease;
}
/* Die Nachtansicht zeigt den Ring allein — der wird eingepasst statt
   formatfuellend beschnitten, sonst sieht man nur ein Stueck davon. */
.buehne-bild.nacht,.buehne-bild.nacht-blau{object-fit:contain;padding:8%}
/* Derselbe Nachthimmel wie in den gezeichneten Produktbildern und in der
   Hero-Szene — sonst steht das Bild in einem anders getoenten Rahmen. */
.buehne.dunkel{background:#232C55}
.buehne-bild.nacht{opacity:0}
.buehne.dunkel .buehne-bild.tag{opacity:0}
.buehne.dunkel .buehne-bild.nacht{opacity:1}
.buehne-schalter{
  position:absolute;right:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:12px;
  padding:9px 12px 9px 18px;border-radius:999px;
  background:color-mix(in srgb,var(--flaeche) 92%,transparent);
  backdrop-filter:blur(6px);
  border:1px solid var(--linie);box-shadow:var(--schatten-hoch);
  font:inherit;font-size:.88rem;font-weight:600;color:var(--tinte);cursor:pointer;
}
.buehne-schalter:hover{border-color:var(--blau)}
.buehne.dunkel .buehne-schalter{
  background:color-mix(in srgb,var(--nacht) 78%,transparent);color:#EAF0F8;
  border-color:color-mix(in srgb,var(--mint-hell) 40%,transparent);
}
.buehne.dunkel .wippe{background:var(--nacht-2)}
.buehne.dunkel .wippe::after{transform:translateX(20px);background:var(--mint-hell)}
.bild-hinweis{font-size:.84rem;color:var(--tinte-zart);padding-left:4px}

.produkt-info{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.produkt-info h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.preiszeile{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:2px}
.preis.gross{font-size:2rem}
.staffel-klein{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--blau-zart);border-radius:var(--radius-klein);
  padding:10px 16px;font-size:.92rem;
}
.staffel-klein span{
  font-size:.7rem;font-weight:700;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--blau-tief);
}
.staffel-klein b{font-weight:700;font-variant-numeric:tabular-nums}
.kauf{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.menge{
  display:inline-flex;align-items:center;border:1px solid var(--linie);
  border-radius:999px;background:var(--flaeche);overflow:hidden;
}
.menge button{
  width:42px;height:46px;border:0;background:transparent;cursor:pointer;
  font-size:1.25rem;color:var(--tinte);line-height:1;
}
.menge button:hover{background:var(--flaeche-2)}
.menge input{
  width:44px;height:46px;border:0;background:transparent;text-align:center;
  font:inherit;font-weight:600;color:var(--tinte);
  font-variant-numeric:tabular-nums;
}
.knopf.gross{padding:14px 30px;font-size:1rem}
.kauf-hinweis{font-size:.86rem;color:var(--tinte-zart)}
.merkmale{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.merkmale li{
  position:relative;padding-left:26px;font-size:.95rem;color:var(--tinte-weich);
}
.merkmale li::before{
  content:"";position:absolute;left:0;top:8px;width:12px;height:7px;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);
  transform:rotate(-45deg);
}
.merkmale b{color:var(--tinte);font-weight:600}
.versandbox{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;margin-top:8px;
  border:1px solid var(--linie);border-radius:var(--radius-klein);overflow:hidden;
  background:var(--linie);
}
.versandbox > div{background:var(--flaeche);padding:14px 16px}
.versandbox strong{display:block;font-size:.82rem;margin-bottom:3px}
.versandbox span{font-size:.85rem;color:var(--tinte-weich);line-height:1.45}

/* ---------- Fliesstext-Abschnitte ---------- */
.zweispalt{
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,4vw,54px);
  align-items:start;
}
.fliess{color:var(--tinte-weich);max-width:62ch;margin-top:14px}
.passform{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--schatten);
}
.passform h3{margin-bottom:12px}
.passform ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.passform li{
  font-size:.93rem;color:var(--tinte-weich);padding-left:16px;position:relative;
}
.passform li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--blau);
}
.passform li b{color:var(--tinte)}
.hinweis{font-size:.86rem;color:var(--tinte-zart);margin-top:16px;line-height:1.55}

/* ---------- Shopseite ---------- */
.shop-kopf{
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  flex-wrap:wrap;padding-top:12px;
}
.shop-kopf h1{font-size:clamp(2rem,4vw,3rem);margin:8px 0 12px}
.shop-staffel{
  display:flex;flex-direction:column;gap:2px;padding:14px 20px;
  background:var(--mint-weich);border-radius:var(--radius-klein);
}
.shop-staffel span{
  font-size:.7rem;font-weight:700;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--mint);
}
.shop-staffel b{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums}
.shop-raster{display:grid;grid-template-columns:250px 1fr;gap:clamp(22px,3vw,42px);align-items:start}
.seitenleiste{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}
.filterblock{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--schatten);
}
.filterblock h3{font-size:.98rem;margin-bottom:12px}
.marken-liste{display:flex;flex-wrap:wrap;gap:8px}
.marken-liste .chip{padding:7px 13px;font-size:.85rem}
.filterblock p{font-size:.87rem;color:var(--tinte-weich);line-height:1.55}
.filterblock.neuheit{
  background:var(--mint-weich);border-color:color-mix(in srgb,var(--mint) 32%,var(--linie));
}
.neu-marke{
  display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;
  background:var(--mint);color:var(--knopf-text);
  font-size:.66rem;font-weight:700;letter-spacing:var(--spur);text-transform:uppercase;
}
.filterblock.neuheit h3{margin-bottom:8px}
.filterblock.hilfe{background:var(--sand)}
.filterblock.hilfe p{font-size:.87rem;color:var(--tinte-weich);margin-bottom:14px}
.shop-leiste{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:18px;font-size:.9rem;color:var(--tinte-weich);
}
.sortierung{display:inline-flex;align-items:center;gap:8px;font-size:.86rem}
.sortierung select{
  font:inherit;font-size:.88rem;padding:7px 12px;border-radius:999px;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--tinte);
}

/* ---------- Über uns ---------- */
.ueber-kopf{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);
  align-items:center;padding:clamp(18px,3vw,40px) 0 0;
}
.ueber-kopf h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.ueber-kopf h1 em{font-style:italic;color:var(--mint)}
.ueber-kopf .lead{margin-top:18px}
.ueber-bild img{
  width:100%;border-radius:var(--radius);box-shadow:var(--schatten-hoch);
  border:1px solid var(--linie);
}

@media (max-width:960px){
  .produkt-raster,.zweispalt,.ueber-kopf{grid-template-columns:1fr}
  .shop-raster{grid-template-columns:1fr}
  .seitenleiste{position:static}
  .ueber-bild{order:-1}
}
@media (max-width:600px){
  .versandbox{grid-template-columns:1fr}
  .kauf{width:100%}
  .knopf.gross{flex:1;justify-content:center}
}

/* ============================================================
   Fenster-Animation im Hero
   Die Zimmerbilder blenden zwischen Tag und Nacht; unabhaengig davon
   wandern Sonne, Mond und Sterne durch das Fenster. Damit sie hinter den
   Sprossen durchlaufen, bekommt jede der vier Scheiben einen eigenen
   Ausschnitt desselben Himmels — die Sprossen des Fotos bleiben stehen.
   ============================================================ */
/* Das Overlay laeuft nur im Automatikbetrieb. Schaltet jemand selbst, wird
   es ausgeblendet — dann sind Sonne bzw. Mond aus dem Bild zu sehen. */
.fenster{position:absolute;inset:0;pointer-events:none;display:none}
.szene-halter.laeuft .fenster{display:block}
.scheibe{position:absolute;overflow:hidden}
.scheibe .himmel{position:absolute;background:var(--himmelfarbe, #8CC7EE)}
.scheibe.lo{left:36.26%;top:11.33%;width:13.66%;height:20.05%}
.scheibe.lo .himmel{left:0;top:0;width:213.3%;height:173.4%}
.scheibe.ro{left:51.53%;top:11.33%;width:13.88%;height:20.05%}
.scheibe.ro .himmel{left:-109.9%;top:0;width:209.9%;height:173.4%}
.scheibe.lu{left:36.26%;top:34.11%;width:13.66%;height:11.98%}
.scheibe.lu .himmel{left:0;top:-190.2%;width:213.3%;height:290.2%}
.scheibe.ru{left:51.53%;top:34.11%;width:13.88%;height:11.98%}
.scheibe.ru .himmel{left:-109.9%;top:-190.2%;width:209.9%;height:290.2%}

/* --- Himmelsfarbe: der Tageslauf --- */
.szene{--himmelfarbe:#8CC7EE}
.himmel{animation:himmelfarbe 15s linear infinite}
@keyframes himmelfarbe{
  0%,20%     {background:#8CC7EE}
  26%        {background:#3B4E86}
  33%,73%    {background:#232C55}
  86%        {background:#4E6BA6}
  100%       {background:#8CC7EE}
}


/* --- Sonne --- */
.sonne{
  position:absolute;width:17%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#FFF3C4 0%,#FFD84D 58%,#F7B733 100%);
  box-shadow:0 0 22px 8px rgba(255,214,80,.55);
  animation:sonnenlauf 15s linear infinite;
}
@keyframes sonnenlauf{
  0%         {left:44%;top:14%;opacity:1}
  14%        {left:66%;top:22%;opacity:1}
  22%        {left:90%;top:62%;opacity:1}
  26%        {left:98%;top:90%;opacity:0}
  26.01%,80% {left:-18%;top:80%;opacity:0}
  88%        {left:8%;top:40%;opacity:1}
  100%       {left:44%;top:14%;opacity:1}
}


/* --- Mond --- */
.mond{
  position:absolute;width:14%;aspect-ratio:1;border-radius:50%;
  background:#F6E7B8;
  box-shadow:inset -5px 3px 0 -1px #232C55, 0 0 18px 6px rgba(246,231,184,.4);
  opacity:0;animation:mondlauf 15s linear infinite;
}
@keyframes mondlauf{
  0%,22%     {left:-16%;top:78%;opacity:0}
  30%        {left:6%;top:34%;opacity:1}
  45%        {left:32%;top:14%;opacity:1}
  60%        {left:62%;top:18%;opacity:1}
  72%        {left:88%;top:52%;opacity:1}
  80%,100%   {left:106%;top:88%;opacity:0}
}


/* --- Sterne --- */
/* ⚠️ Nur innerhalb der Fensterszene! Eine nackte .sterne-Regel fing auch
   die Bewertungs-Sterne (★★★★★) ein und liess sie absolut positioniert
   oben in der Fahne blinken — gleiche Falle wie einst sonne/mond. */
.himmel .sterne{position:absolute;inset:0;opacity:0;animation:sterne 15s linear infinite}
.himmel .sterne i{
  position:absolute;width:5px;height:5px;border-radius:50%;background:#FFFDF2;
  box-shadow:0 0 6px 2px rgba(255,253,242,.7);
  animation:funkeln 3.4s ease-in-out infinite;
}
.himmel .sterne i:nth-child(2n){animation-delay:.9s;width:4px;height:4px}
.himmel .sterne i:nth-child(3n){animation-delay:1.8s;width:6px;height:6px}
@keyframes sterne{0%,22%{opacity:0} 33%,72%{opacity:1} 86%,100%{opacity:0}}

@keyframes funkeln{0%,100%{opacity:.35} 50%{opacity:1}}

/* --- Wolken: ziehen tagsueber durch, nachts sind sie fort --- */
.wolke{
  position:absolute;height:13%;width:34%;border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:14% -40% 0 -2% rgba(255,255,255,.92), -16% -30% 0 -4% rgba(255,255,255,.92);
  animation:wolkenzug 15s linear infinite, wolkensicht 15s linear infinite;
}
.wolke.w1{top:34%}
.wolke.w2{top:62%;transform:scale(.72);animation-duration:15s,15s;animation-delay:-6s,0s}
@keyframes wolkenzug{0%{left:-40%} 100%{left:110%}}
@keyframes wolkensicht{0%,18%{opacity:.95} 30%{opacity:0} 80%{opacity:0} 96%,100%{opacity:.95}}


/* Die Zimmerbilder folgen demselben Takt wie der Himmel. */
.szene-halter.laeuft .szene-bild.tag{animation:tagsicht 15s linear infinite}
.szene-halter.laeuft .szene-bild.nacht{animation:nachtsicht 15s linear infinite}
@keyframes tagsicht{0%,20%{opacity:1} 33%,73%{opacity:0} 100%{opacity:1}}

@keyframes nachtsicht{0%,20%{opacity:0} 33%,73%{opacity:1} 100%{opacity:0}}


@media (prefers-reduced-motion:reduce){
  .himmel,.sonne,.mond,.sterne,.sterne i,.wolke,
  .szene-halter.laeuft .szene-bild{animation:none}
  .fenster{display:none}
}

/* ---------- Logo ----------
   Schrift und Gesicht des Logos sind auf currentColor gesetzt, die Ringe
   tragen die Farben der Seite. Dadurch braucht es keine zweite Datei fuer
   den dunklen Modus — das Logo folgt einfach der Textfarbe. */
.logo{height:56px;width:auto;display:block;color:var(--tinte)}
.marke:hover .logo{color:var(--blau-tief)}
.logo-fuss{height:64px;margin-bottom:14px;color:var(--tinte)}
@media (max-width:660px){ .logo{height:44px} }

/* ---------- Ringfarbe waehlen (Produktseite) ---------- */
.farbwahl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.farbwahl-titel{
  font-size:.7rem;font-weight:700;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--tinte-zart);margin-right:2px;
}
.farbknopf{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px 8px 10px;border-radius:999px;
  border:1px solid var(--linie);background:var(--flaeche);
  font:inherit;font-size:.9rem;font-weight:600;color:var(--tinte-weich);
  cursor:pointer;transition:all .18s ease;
}
.farbknopf .tupfer{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:1px solid rgba(0,0,0,.12);
}
.farbknopf.gruen .tupfer{background:linear-gradient(150deg,#9FF0C9,#3FBE8C)}
.farbknopf.blau .tupfer{background:linear-gradient(150deg,#9EC9F5,#4A7BB0)}
.farbknopf:hover{border-color:var(--blau)}
.farbknopf[aria-pressed="true"]{
  color:var(--tinte);border-color:var(--tinte-zart);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--tinte-zart) 22%,transparent);
}
/* Die dritte Bildebene: blau leuchtender Ring. Sie zeigt sich nur, wenn die
   Buehne dunkel geschaltet ist UND Blau gewaehlt wurde. */
.buehne-bild.nacht-blau{opacity:0}
.buehne.dunkel.blau .buehne-bild.nacht{opacity:0}
.buehne.dunkel.blau .buehne-bild.nacht-blau{opacity:1}

/* Hinweis im Kartenraster: es gibt zwei Farben */
.karte-farben{display:inline-flex;gap:5px;align-items:center;margin-left:auto}
.karte-farben i{
  width:11px;height:11px;border-radius:50%;display:block;
  border:1px solid rgba(0,0,0,.12);
}
.karte-farben i.g{background:linear-gradient(150deg,#9FF0C9,#3FBE8C)}
.karte-farben i.b{background:linear-gradient(150deg,#9EC9F5,#4A7BB0)}

/* ---------- Helles oder dunkles Design waehlen ----------
   Ohne Wahl folgt die Seite der Systemeinstellung. Wer selbst schaltet,
   bekommt seine Entscheidung beim naechsten Besuch wieder. */
.modus svg{width:18px;height:18px;flex:none}
.modus{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;border-radius:999px;
  border:1px solid var(--linie);background:var(--flaeche);
  color:var(--tinte-weich);cursor:pointer;transition:all .18s ease;
}
.modus:hover{border-color:var(--blau);color:var(--blau-tief)}
.modus .modus-mond{display:none}
:root[data-theme="dark"] .modus .modus-mond{display:block}
:root[data-theme="dark"] .modus .modus-sonne{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .modus .modus-mond{display:block}
  :root:not([data-theme="light"]) .modus .modus-sonne{display:none}
}
@media (max-width:660px){ .modus svg{width:18px;height:18px;flex:none}
.modus{width:36px;height:36px} }

/* ---------- Video (So funktioniert's) ----------
   Klick-Fassade: erst liegt nur das eingebettete Vorschaubild da, der
   YouTube-Rahmen kommt beim Klick — bis dahin fliesst nichts zu Google. */
.video-halter{
  position:relative;max-width:820px;margin:34px auto 0;
  aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schatten-hoch);background:#000;
}
.video-halter img{width:100%;height:100%;object-fit:cover;display:block}
.video-halter iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-start{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;border:0;cursor:pointer;background:rgba(19,28,51,.28);
  transition:background .2s ease;
}
.video-start:hover{background:rgba(19,28,51,.45)}
.video-start .kreis{
  width:76px;height:76px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  transition:transform .18s ease;
}
.video-start:hover .kreis{transform:scale(1.07)}
.video-start .kreis svg{margin-left:5px}
.video-start .wort{
  color:#fff;font-weight:600;font-size:.95rem;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.video-hinweis{
  text-align:center;font-size:.84rem;color:var(--tinte-zart);margin-top:10px;
}

/* ---------- Menue fuer schmale Fenster ----------
   Unter 960 px verschwand die Navigation ersatzlos; erreichbar waren die
   Unterseiten dann nur noch ueber die Fusszeile. Mit zehn Seiten ist das
   zu wenig — hier klappt sie stattdessen auf. */
.menue-knopf{display:none}
@media (max-width:960px){
  .menue-knopf{
    display:inline-flex;align-items:center;justify-content:center;
    position:relative;
    width:40px;height:40px;flex:none;border-radius:999px;
    border:1px solid var(--linie);background:var(--flaeche);
    color:var(--tinte-weich);cursor:pointer;transition:all .18s ease;
  }
  .menue-knopf:hover{border-color:var(--blau);color:var(--blau-tief)}
  /* Drei Striche aus einem Balken und zwei Pseudo-Elementen. Alle drei
     liegen ABSOLUT uebereinander — im Fluss wuerden sie sich stapeln und
     das Kreuz kaeme schief heraus. */
  .balken{position:absolute;left:50%;top:50%;margin:-1px 0 0 -9px}
  .balken,.balken::before,.balken::after{
    width:18px;height:2px;border-radius:2px;background:currentColor;
    transition:transform .2s ease,background-color .15s ease;
  }
  .balken::before,.balken::after{content:"";position:absolute;left:0}
  .balken::before{top:-6px}
  .balken::after{top:6px}
  .menue-knopf[aria-expanded="true"] .balken{background:transparent}
  .menue-knopf[aria-expanded="true"] .balken::before{transform:translateY(6px) rotate(45deg)}
  .menue-knopf[aria-expanded="true"] .balken::after{transform:translateY(-6px) rotate(-45deg)}

  .kopf-innen{position:relative}
  .nav{
    display:none;position:absolute;top:calc(100% + 10px);right:0;left:auto;
    min-width:220px;flex-direction:column;align-items:stretch;gap:0;
    background:var(--flaeche);border:1px solid var(--linie);
    border-radius:var(--radius-klein);box-shadow:var(--schatten-hoch);
    padding:8px;margin:0;z-index:60;
  }
  .kopf-innen.menue-offen .nav{display:flex}
  .nav a{padding:11px 14px;border-radius:10px;font-size:1rem}
  .nav a:hover{background:var(--flaeche-2)}
  /* Der Knopf „Shop" BLEIBT sichtbar. Er war hier früher ausgeblendet
     („macht neben dem Menü nur Platznot") — damit führte auf dem Telefon
     der einzige Weg zum Shop über das ☰-Symbol, und Felix fand ihn am
     15.08.2026 nicht auf Anhieb. In einem Verkaufsauftritt muss der Weg
     zur Ware ohne Umweg sichtbar sein; der Platz kommt aus engeren
     Abständen und kleineren Bedienknöpfen (siehe unten). */
  .nav-schalt{display:inline-flex;order:3}
}
@media (max-width:660px){
  .menue-knopf{width:36px;height:36px}
}
/* Abschluss-Aufruf am Seitenende (16.08.2026): der letzte Weg in den
   Shop, für alle, die die Seite zu Ende gelesen haben. */
.schluss-aufruf{
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  background:linear-gradient(150deg,var(--mint-weich),var(--flaeche));
  border:1px solid color-mix(in srgb,var(--mint) 35%,transparent);
  border-radius:var(--radius);padding:clamp(24px,3.4vw,40px);
  box-shadow:var(--schatten);
}
.schluss-aufruf h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:8px}
.schluss-aufruf p{color:var(--tinte-weich);max-width:56ch}
.schluss-aufruf .knopf{white-space:nowrap}
@media (max-width:760px){
  .schluss-aufruf{grid-template-columns:1fr;gap:18px}
  .schluss-aufruf .knopf{justify-content:center}
}

/* Telefonbreite: Kopf so einteilen, dass Marke, Shop, Warenkorb,
   Design-Umschalter und Menü nebeneinander Platz haben — und in einer
   Reihenfolge, die dem Einkauf folgt:
   Marke links, dann rechtsbündig  Shop · Warenkorb · Design · Menü. */
@media (max-width:960px){
  .marke{order:0}
  .nav-schalt{order:1;margin-left:auto}
  .warenkorb{order:2;margin-left:0}
  .modus{order:3}
  .menue-knopf{order:4}
}
@media (max-width:520px){
  .kopf-innen{gap:8px}
  .logo{height:38px}
  .nav-schalt{padding:9px 15px;font-size:.9rem}
  .warenkorb{padding:9px 12px;gap:7px}
  .modus{width:34px;height:34px}
  .menue-knopf{width:34px;height:34px}
}
@media (max-width:380px){
  /* Ganz schmale Geräte: der Design-Umschalter tritt zurück,
     die Systemeinstellung greift weiterhin automatisch. */
  .modus{display:none}
}

/* ============================================================
   Textseiten: Hilfe & FAQ, Kontakt, Impressum, Datenschutz,
   AGB, Rueckgabe. Ruhiger als die Verkaufsseiten — eine Spalte
   Lesetext, links ein mitlaufendes Verzeichnis.
   ============================================================ */
.seitenkopf{padding:clamp(26px,4vw,52px) 0 clamp(20px,3vw,34px)}
.seitenkopf h1{font-size:clamp(2rem,4.2vw,3.1rem);margin:8px 0 14px}
.seitenkopf .lead{max-width:64ch}
.stand{
  font-size:.82rem;color:var(--tinte-zart);margin-top:14px;
  display:inline-flex;align-items:center;gap:8px;
}
.stand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}

/* Zweispalter: Verzeichnis + Text. Ohne Verzeichnis (kurze Seiten)
   traegt .textbahn allein. */
.text-raster{
  display:grid;grid-template-columns:230px 1fr;
  gap:clamp(22px,3vw,48px);align-items:start;
  padding-bottom:clamp(40px,6vw,80px);
}
.inhaltsverzeichnis{
  position:sticky;top:88px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--radius-klein);
  padding:18px 18px 20px;box-shadow:var(--schatten);
}
.inhaltsverzeichnis h2{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:var(--spur);text-transform:uppercase;
  color:var(--tinte-zart);margin-bottom:12px;
}
.inhaltsverzeichnis ol{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:7px;
  max-height:min(62vh,560px);overflow-y:auto}
.inhaltsverzeichnis a{font-size:.88rem;color:var(--tinte-weich);line-height:1.4}
.inhaltsverzeichnis a:hover{color:var(--blau-tief)}

.textbahn{max-width:74ch}
.textbahn h2{
  font-size:clamp(1.25rem,2.3vw,1.6rem);
  margin:34px 0 10px;scroll-margin-top:96px;
}
.textbahn h2:first-child{margin-top:0}
.textbahn h3{margin:22px 0 8px;scroll-margin-top:96px}
.textbahn p{color:var(--tinte-weich);margin:0 0 12px;line-height:1.7}
.textbahn ul{color:var(--tinte-weich);margin:0 0 14px;padding-left:20px;
  display:flex;flex-direction:column;gap:6px}
.textbahn a{overflow-wrap:anywhere}
.textbahn > section + section{
  border-top:1px solid var(--linie);margin-top:30px;padding-top:26px;
}

/* Kleiner Kasten fuer Anschrift, Kontaktwege, Kurzfakten */
.datenkarte{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:20px 22px;
  box-shadow:var(--schatten);
}
.datenkarte + .datenkarte{margin-top:14px}
.datenkarte h3{margin-bottom:10px}
.datenkarte dl{margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:7px 16px;font-size:.93rem}
.datenkarte dt{color:var(--tinte-zart);white-space:nowrap}
.datenkarte dd{margin:0;color:var(--tinte)}
.datenkarte p{color:var(--tinte-weich);font-size:.93rem;margin:0}

/* Kontaktseite */
.kontakt-raster{
  display:grid;grid-template-columns:1.25fr .85fr;
  gap:clamp(22px,3vw,46px);align-items:start;
  padding-bottom:clamp(40px,6vw,80px);
}
.formular{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(20px,3vw,32px);
  box-shadow:var(--schatten);display:flex;flex-direction:column;gap:16px;
}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:.86rem;font-weight:600;color:var(--tinte)}
.feld input,.feld textarea{
  font-family:inherit;font-size:.97rem;color:var(--tinte);
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:11px 14px;width:100%;
  transition:border-color .18s ease;
}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--blau)}
.feld textarea{min-height:150px;resize:vertical}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formular-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form-hinweis{font-size:.86rem;color:var(--tinte-zart);line-height:1.5}
.form-danke{
  background:var(--mint-weich);border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);
  border-radius:var(--radius-klein);padding:14px 16px;font-size:.92rem;color:var(--tinte);
}

/* Anleitung auf der FAQ-Seite */
.anleitung{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:8px}
.anleitung .schritt p{font-size:.93rem}

@media (max-width:900px){
  .text-raster,.kontakt-raster{grid-template-columns:1fr}
  .inhaltsverzeichnis{position:static;order:-1}
  .inhaltsverzeichnis ol{max-height:none;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}
@media (max-width:600px){
  .anleitung{grid-template-columns:1fr}
  .feld-paar{grid-template-columns:1fr}
}

/* ============================================================
   WooCommerce-Anpassungen: Kaufformular, Warenkorb, Kasse,
   Meldungen — auf denselben Farbtoken wie der Rest.
   ============================================================ */
/* WooCommerce setzt vor jede Meldung ein Zeichen aus SEINER Icon-Schrift.
   Die bringt das Theme nicht mit — es erschien ein Kaestchen mitten im
   Text (Felix, 15.08.2026). Deshalb: Woo-Zeichen abschalten, eigenes
   Symbol als Hintergrundbild, Text mit Platz dafuer. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  position:relative;list-style:none;margin:0 0 18px;
  padding:15px 18px 15px 52px;
  border-radius:var(--radius-klein);border:1px solid var(--linie);
  background:var(--flaeche);color:var(--tinte);box-shadow:var(--schatten);
  font-size:.95rem;line-height:1.5;
}
.woocommerce-message::before,.woocommerce-info::before,
.woocommerce-error::before{
  content:"";position:absolute;left:16px;top:16px;
  width:22px;height:22px;border-radius:50%;
  font-family:inherit!important;   /* Woos Icon-Schrift ausschalten */
  background-repeat:no-repeat;background-position:center;background-size:13px;
}
.woocommerce-message{
  border-color:color-mix(in srgb,var(--mint) 45%,transparent);
  background:linear-gradient(160deg,var(--mint-weich),var(--flaeche));
}
.woocommerce-message::before{
  background-color:var(--mint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.woocommerce-info{border-color:color-mix(in srgb,var(--blau) 40%,transparent)}
.woocommerce-info::before{
  background-color:var(--blau-tief);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");
}
.woocommerce-error{border-color:#D98080}
.woocommerce-error::before{
  background-color:#C1554F;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
/* Der Knopf „Warenkorb ansehen“ in der Meldung steht rechts */
.woocommerce-message .button,.woocommerce-message a.wc-forward{
  float:right;margin-left:16px;
}
.woocommerce-message a,.woocommerce-info a{font-weight:600}
/* Leerer Warenkorb: Woo setzt hier ebenfalls ein Icon-Zeichen */
.cart-empty::before,.wc-empty-cart-message .cart-empty::before{
  content:none!important;
}
.cart-empty{padding-left:18px}

/* Kaufformular auf der Produktseite */
.produkt-info form.cart{display:flex;flex-direction:column;gap:14px;margin:6px 0 2px}
.produkt-info table.variations{border-collapse:collapse}
.produkt-info table.variations th{
  text-align:left;padding:0 14px 0 0;font-size:.74rem;font-weight:700;
  letter-spacing:var(--spur);text-transform:uppercase;color:var(--tinte-zart);
}
.produkt-info table.variations select{
  font-family:inherit;font-size:.95rem;color:var(--tinte);
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:10px;padding:9px 12px;
}
.produkt-info .reset_variations{font-size:.84rem;color:var(--tinte-zart)}
.produkt-info .woocommerce-variation-price{display:none} /* Preis steht schon oben */
.produkt-info .quantity input{
  width:70px;text-align:center;font-family:inherit;font-size:1rem;
  color:var(--tinte);background:var(--flaeche);
  border:1px solid var(--linie);border-radius:10px;padding:10px 8px;
}
.produkt-info .single_add_to_cart_button,
.woocommerce a.checkout-button,.woocommerce button.button.alt,
.wc-proceed-to-checkout a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blau-tief);color:var(--knopf-text);border:none;cursor:pointer;
  font-family:inherit;font-size:.98rem;font-weight:600;
  padding:13px 26px;border-radius:999px;transition:all .18s ease;
}
.produkt-info .single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover,.woocommerce button.button.alt:hover,
.wc-proceed-to-checkout a:hover{
  background:var(--blau);color:var(--knopf-text);transform:translateY(-1px);text-decoration:none;
}
.produkt-info .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:center}
/* Mengenrabatt als Angebot direkt beim Kaufknopf (16.08.2026) */
.staffel-hinweis{
  margin:2px 0 0;font-size:.92rem;line-height:1.5;color:var(--tinte-weich);
}
.staffel-hinweis b{color:var(--tinte);font-variant-numeric:tabular-nums}

/* ---------- ALLE uebrigen WooCommerce-Knoepfe ----------
   Bis 15.08.2026 waren nur die Haupt-Knoepfe gestaltet; „Zurueck zum
   Shop", „Anmelden", „Warenkorb aktualisieren", „Gutschein anwenden" und
   die Konto-Knoepfe standen im grauen Browser-Standard da. Auf einer
   Verkaufsseite faellt genau das auf. */
.seiteninhalt .button,
.seiteninhalt button[type=submit],
.seiteninhalt input[type=submit],
.seiteninhalt .woocommerce-Button,
.seiteninhalt a.wc-backward,
.seiteninhalt .woocommerce-form-login__submit,
.seiteninhalt .woocommerce-form-register__submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blau-tief);color:var(--knopf-text);border:1px solid transparent;
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.2;
  padding:12px 24px;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(58,102,153,.8);
  transition:background .2s ease,transform .15s ease;
}
.seiteninhalt .button:hover,
.seiteninhalt button[type=submit]:hover,
.seiteninhalt input[type=submit]:hover,
.seiteninhalt .woocommerce-Button:hover,
.seiteninhalt a.wc-backward:hover{
  background:var(--blau);color:var(--knopf-text);transform:translateY(-1px);
  text-decoration:none;
}
/* Zweitrangige Knoepfe (Warenkorb aktualisieren, Gutschein) treten zurueck */
.seiteninhalt [name=update_cart],
.seiteninhalt .coupon .button{
  background:transparent;color:var(--tinte);border-color:var(--linie);
  box-shadow:none;
}
.seiteninhalt [name=update_cart]:hover,
.seiteninhalt .coupon .button:hover{
  background:var(--flaeche-2);color:var(--tinte);
}
.seiteninhalt [name=update_cart]:disabled{opacity:.45;cursor:default}

/* Anmelde-Formular: Kaestchen und Passwortfeld im Seitenstil */
.seiteninhalt .woocommerce-form-login__rememberme,
.seiteninhalt .woocommerce-form__label-for-checkbox{
  display:flex;align-items:center;gap:9px;
  font-size:.93rem;color:var(--tinte-weich);margin:2px 0 4px;
}
.seiteninhalt input[type=checkbox]{
  width:18px;height:18px;accent-color:var(--blau-tief);margin:0;
}
.seiteninhalt .woocommerce-form-login .form-row{margin-bottom:14px}
.seiteninhalt .password-input{display:block;position:relative}
.seiteninhalt .show-password-input{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  cursor:pointer;opacity:.55;
}
.seiteninhalt .show-password-input:hover{opacity:1}
.seiteninhalt .password-input input{padding-right:46px}
.seiteninhalt .woocommerce-LostPassword{margin-top:6px;font-size:.92rem}

/* Waehrungswahl im Warenkorb/Kasse: das nackte Auswahlfeld einbetten */
.leviloop-currency-choice{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:12px 16px;margin-bottom:18px;
}
.leviloop-currency-choice strong{
  font-size:.72rem;font-weight:700;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--tinte-zart);
}
.leviloop-currency-choice select,
.leviloop-currency-choice .woocommerce-currency-switcher-form{
  min-width:150px;margin:0;
}

/* ---------- Tabellen (Warenkorb, Bestellungen) ---------- */
.seiteninhalt table.shop_table{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--radius-klein);
  overflow:hidden;box-shadow:var(--schatten);
}
.seiteninhalt table.shop_table th,.seiteninhalt table.shop_table td{
  padding:12px 14px;border-bottom:1px solid var(--linie);text-align:left;
  font-size:.95rem;vertical-align:middle;
}
.seiteninhalt table.shop_table thead th{
  font-size:.72rem;font-weight:700;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--tinte-zart);background:var(--flaeche-2);
}
.seiteninhalt table.shop_table tr:last-child td{border-bottom:none}
.seiteninhalt table.shop_table img{max-width:64px;border-radius:10px;display:block}
.seiteninhalt .product-name a{font-weight:600}
.seiteninhalt .product-remove a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-size:1.1rem;line-height:1;
  color:var(--tinte-zart);border:1px solid var(--linie);text-decoration:none;
}
.seiteninhalt .product-remove a:hover{color:#B4423F;border-color:#D98080}

/* Auf dem Telefon stapeln sich die Tabellenzeilen zu Karten */
@media (max-width:760px){
  .seiteninhalt table.shop_table_responsive thead{display:none}
  .seiteninhalt table.shop_table_responsive tr{display:block;padding:6px 0}
  .seiteninhalt table.shop_table_responsive td{
    display:flex;justify-content:space-between;align-items:center;
    gap:14px;border-bottom:none;padding:7px 14px;
  }
  .seiteninhalt table.shop_table_responsive td::before{
    content:attr(data-title);font-size:.74rem;font-weight:700;
    letter-spacing:var(--spur);text-transform:uppercase;color:var(--tinte-zart);
  }
  .seiteninhalt table.shop_table_responsive td.product-remove::before,
  .seiteninhalt table.shop_table_responsive td.actions::before{content:none}
  .seiteninhalt table.shop_table_responsive tr + tr{border-top:1px solid var(--linie)}
}

/* ---------- Formularfelder (Kasse, Konto, Adressen) ---------- */
.seiteninhalt .woocommerce form .form-row{margin:0 0 14px;padding:0}
.seiteninhalt .woocommerce form .form-row label{
  display:block;font-size:.86rem;font-weight:600;color:var(--tinte);
  margin-bottom:6px;
}
.seiteninhalt .woocommerce form .form-row .required{color:#B4423F;text-decoration:none}
.seiteninhalt .woocommerce form .form-row input.input-text,
.seiteninhalt .woocommerce form .form-row textarea,
.seiteninhalt .woocommerce form .form-row select,
.seiteninhalt .woocommerce-cart-form .quantity input{
  font-family:inherit;font-size:.97rem;color:var(--tinte);
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:10px;padding:11px 13px;width:100%;
  transition:border-color .18s ease;
}
.seiteninhalt .woocommerce form .form-row input.input-text:focus,
.seiteninhalt .woocommerce form .form-row textarea:focus,
.seiteninhalt .woocommerce form .form-row select:focus{
  outline:none;border-color:var(--blau);
}
.seiteninhalt .woocommerce form .form-row.woocommerce-invalid input.input-text{
  border-color:#D98080;
}
/* Laenderauswahl (select2) auf dieselbe Linie bringen */
.seiteninhalt .select2-container .select2-selection--single{
  height:auto;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:10px;
}
.seiteninhalt .select2-container .select2-selection__rendered{
  color:var(--tinte);line-height:1.5;padding:10px 13px;
}
.seiteninhalt .select2-container .select2-selection__arrow{height:100%}

/* Zwei Spalten nebeneinander, mobil untereinander */
.seiteninhalt .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.seiteninhalt .col2-set .col-1,.seiteninhalt .col2-set .col-2{width:auto;float:none}
@media (max-width:860px){ .seiteninhalt .col2-set{grid-template-columns:1fr} }

/* ---------- Warenkorb ---------- */
.seiteninhalt .woocommerce-cart-form .quantity input{width:74px;text-align:center}
.seiteninhalt td.actions{background:var(--flaeche-2)}
.seiteninhalt td.actions .coupon{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Das Feld war mit 180px zu schmal fuer einen Gutscheincode (Felix, 15.08.) */
.seiteninhalt td.actions .coupon input{
  flex:1 1 260px;min-width:240px;max-width:340px;
  padding:11px 14px;font-size:.97rem;
}
.seiteninhalt .cart_totals{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:20px 22px;box-shadow:var(--schatten);
}
.seiteninhalt .cart_totals h2{margin-top:0;font-size:1.25rem}
.seiteninhalt .cart_totals table{border:none;box-shadow:none}
.seiteninhalt .cart_totals .order-total td,.seiteninhalt .cart_totals .order-total th{
  font-family:var(--display);font-size:1.15rem;
}
.wc-proceed-to-checkout{padding-top:14px}
.wc-proceed-to-checkout a{width:100%}

/* ---------- Kasse ---------- */
.seiteninhalt form.checkout{display:grid;grid-template-columns:1.15fr .85fr;
  grid-template-rows:auto 1fr;      /* Zeile 1 nur so hoch wie die Ueberschrift */
  gap:14px clamp(20px,3vw,40px);align-items:start}
@media (max-width:960px){ .seiteninhalt form.checkout{grid-template-columns:1fr} }
/* Adressspalte spannt beide Zeilen — sonst beginnt die Bestelluebersicht
   erst UNTER der vollen Hoehe des Adressformulars. */
.seiteninhalt form.checkout #customer_details{grid-column:1;grid-row:1 / span 2}
.seiteninhalt form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0}
.seiteninhalt form.checkout #order_review{grid-column:2;grid-row:2}
@media (max-width:960px){
  .seiteninhalt form.checkout #customer_details{grid-row:auto}
  .seiteninhalt form.checkout #order_review_heading,
  .seiteninhalt form.checkout #order_review{grid-column:1;grid-row:auto}
  .seiteninhalt #order_review{position:static}
}
.seiteninhalt #order_review_heading{font-size:1.25rem;margin:0 0 10px}
.seiteninhalt #order_review{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:20px 22px;box-shadow:var(--schatten);
  position:sticky;top:88px;
}
.seiteninhalt #order_review table{border:none;box-shadow:none}
/* Zahlarten */
.seiteninhalt #payment{background:transparent}
.seiteninhalt ul.wc_payment_methods{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.seiteninhalt ul.wc_payment_methods li{
  border:1px solid var(--linie);border-radius:var(--radius-klein);
  padding:11px 14px;background:var(--grund);
}
.seiteninhalt ul.wc_payment_methods li label{
  font-weight:600;color:var(--tinte);display:inline;margin:0 0 0 4px;
}
.seiteninhalt ul.wc_payment_methods li img{
  max-height:22px;vertical-align:middle;margin-left:6px;
}
.seiteninhalt .payment_box{
  font-size:.88rem;color:var(--tinte-weich);margin-top:8px;
  background:var(--flaeche-2);border-radius:10px;padding:10px 12px;
}
.seiteninhalt .payment_box::before{display:none}
.seiteninhalt #place_order{
  width:100%;background:var(--blau-tief);color:var(--knopf-text);border:none;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:600;
  padding:14px 26px;border-radius:999px;transition:all .18s ease;
}
.seiteninhalt #place_order:hover{background:var(--blau);transform:translateY(-1px)}
.seiteninhalt .woocommerce-terms-and-conditions-wrapper{
  font-size:.88rem;color:var(--tinte-weich);margin-bottom:12px;
}
/* Gutschein- und Login-Hinweis oberhalb der Kasse */
.seiteninhalt .woocommerce-form-coupon-toggle .woocommerce-info,
.seiteninhalt .woocommerce-form-login-toggle .woocommerce-info{
  background:var(--sand);border-color:transparent;
}
.seiteninhalt form.woocommerce-form-coupon,
.seiteninhalt form.woocommerce-form-login{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:18px;margin-bottom:18px;
}

/* ---------- Bestellbestaetigung ----------
   Felix, 15.08.2026: „das sieht so steril aus" — die Dankesseite ist der
   letzte Eindruck nach dem Kauf und bekommt deshalb die Farben der Seite:
   mintgruener Dankes-Block mit Haken, Bestelldaten als warme Karte,
   die Summenzeile hervorgehoben. */
.seiteninhalt .woocommerce-thankyou-order-received{
  position:relative;
  font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.75rem);
  color:var(--tinte);margin:0 0 20px;
  background:linear-gradient(150deg,var(--mint-weich),var(--flaeche));
  border:1px solid color-mix(in srgb,var(--mint) 35%,transparent);
  border-radius:var(--radius);padding:22px 26px 22px 74px;
  box-shadow:var(--schatten);
}
.seiteninhalt .woocommerce-thankyou-order-received::before{
  content:"";position:absolute;left:24px;top:50%;
  width:32px;height:32px;margin-top:-16px;border-radius:50%;
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/18px no-repeat;
}
.seiteninhalt .woocommerce-order ul.order_details{
  list-style:none;margin:0 0 26px;padding:18px 22px;
  display:flex;flex-wrap:wrap;gap:14px 34px;
  background:var(--sand);border:1px solid var(--linie);
  border-radius:var(--radius);box-shadow:var(--schatten);
}
.seiteninhalt .woocommerce-order ul.order_details li{
  border:none;font-size:.72rem;font-weight:700;color:var(--tinte-zart);
  text-transform:uppercase;letter-spacing:var(--spur);
}
.seiteninhalt .woocommerce-order ul.order_details li strong{
  display:block;font-family:var(--display);font-size:1.2rem;
  font-weight:400;color:var(--tinte);
  text-transform:none;letter-spacing:0;margin-top:5px;
}
/* Die Positions-Tabelle: gleiche Handschrift wie der Warenkorb */
.seiteninhalt .woocommerce-order .woocommerce-table--order-details{
  border-radius:var(--radius);overflow:hidden;
}
.seiteninhalt .woocommerce-order .woocommerce-table--order-details thead th{
  background:var(--blau-zart);color:var(--blau-tief);
  font-size:.72rem;letter-spacing:var(--spur);text-transform:uppercase;
}
.seiteninhalt .woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.seiteninhalt .woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td{
  background:var(--mint-weich);
  font-family:var(--display);font-size:1.15rem;color:var(--tinte);
}
.seiteninhalt .woocommerce-order .woocommerce-column__title,
.seiteninhalt .woocommerce-order h2{
  font-family:var(--display);font-weight:400;
}

/* ---------- Fenster „Liegt im Warenkorb" (assets/shop.js) ----------
   Felix, 15.08.2026: nach dem Zulegen soll gefragt werden, ob es zur
   Kasse oder weiter einkaufen geht. */
.ll-versteckt{display:none!important}
.ll-dialog-grund{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--tinte) 55%,transparent);
  backdrop-filter:blur(3px);
  animation:ll-auf .2s ease;
}
.ll-dialog{
  position:relative;width:min(430px,100%);
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--radius);padding:32px 30px 26px;text-align:center;
  box-shadow:0 24px 60px -20px rgba(20,30,50,.45);
  animation:ll-hoch .25s ease;
}
.ll-dialog h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,3vw,1.6rem);margin:0 0 8px;color:var(--tinte);
}
.ll-dialog-text{color:var(--tinte-weich);font-size:.95rem;margin:0 0 22px}
.ll-dialog-haken{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  background:var(--mint-weich);
  display:flex;align-items:center;justify-content:center;
}
.ll-dialog-haken::after{
  content:"";width:30px;height:30px;
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/17px no-repeat;
  border-radius:50%;
}
.ll-dialog-wege{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ll-dialog-wege .knopf{flex:1 1 160px;justify-content:center}
.ll-dialog-korb{
  display:inline-block;margin-top:16px;
  font-size:.88rem;color:var(--tinte-zart);
}
.ll-dialog-zu{
  position:absolute;top:10px;right:12px;
  width:32px;height:32px;border:none;background:none;cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--tinte-zart);
}
.ll-dialog-zu:hover{color:var(--tinte)}
@keyframes ll-auf{from{opacity:0}to{opacity:1}}
@keyframes ll-hoch{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ll-dialog-grund,.ll-dialog{animation:none}
}

/* ---------- Mengenrabatt-Tabelle des Rabatt-Plugins (Acowebs) ----------
   Ersetzt die frueher doppelt gezeigte eigene Staffel-Box. Sie steht
   direkt ueber dem Kaufformular und ist im Seitenstil gehalten. */
.wdp_table_outter{
  background:var(--blau-zart);border-radius:var(--radius-klein);
  padding:14px 18px;margin:0 0 18px;
}
.wdp_table_outter h4{
  margin:0 0 10px;font-family:inherit;font-size:.7rem;font-weight:700;
  letter-spacing:var(--spur);text-transform:uppercase;color:var(--blau-tief);
}
.wdp_table_outter table.wdp_table{
  width:100%;border:none;border-collapse:collapse;box-shadow:none;
  background:transparent;margin:0;
}
.wdp_table_outter table.wdp_table td{
  border:none;padding:5px 14px 5px 0;background:transparent;
  font-size:.95rem;color:var(--tinte);white-space:nowrap;
}
/* Erste Spalte ist die Beschriftung („Anzahl" / „Preis") */
.wdp_table_outter table.wdp_table td:first-child{
  font-size:.72rem;font-weight:700;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--blau-tief);padding-right:18px;
}
.wdp_table_outter table.wdp_table tr:last-child td{
  font-variant-numeric:tabular-nums;font-weight:600;
}
.wdp_table_outter table.wdp_table tr:last-child td:last-child{color:var(--mint)}
@media (max-width:520px){
  .wdp_table_outter{overflow-x:auto}
}

/* ---------- Mein Konto ---------- */
.seiteninhalt .woocommerce-MyAccount-navigation{float:none;width:auto}
.seiteninhalt .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.seiteninhalt .woocommerce-MyAccount-navigation a{
  display:inline-flex;padding:9px 16px;border-radius:999px;
  border:1px solid var(--linie);background:var(--flaeche);
  color:var(--tinte-weich);font-size:.9rem;font-weight:600;
}
.seiteninhalt .woocommerce-MyAccount-navigation a:hover{
  border-color:var(--blau);color:var(--blau-tief);text-decoration:none;
}
.seiteninhalt .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--blau-tief);border-color:var(--blau-tief);color:var(--knopf-text);
}
.seiteninhalt .woocommerce-MyAccount-content{float:none;width:auto}
.seiteninhalt .woocommerce-Addresses .woocommerce-Address{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:16px 18px;
}

/* Basistypografie fuer Inhalte aus dem Editor */
.seiteninhalt h2{font-size:clamp(1.25rem,2.3vw,1.6rem);margin:30px 0 10px}
.seiteninhalt h3{margin:20px 0 8px}
.seiteninhalt p{color:var(--tinte-weich);margin:0 0 12px;line-height:1.7}
.seiteninhalt ul,.seiteninhalt ol{color:var(--tinte-weich);margin:0 0 14px;padding-left:20px}
.seiteninhalt a{overflow-wrap:anywhere}