/*
Theme Name: Lieblingsfuchs
Theme URI: https://lieblingsfuchs.com
Author: Lieblingsfuchs
Description: Eigenes WooCommerce-Theme für Lieblingsfuchs — handgefertigter Babyschmuck mit 3D-/2D-Konfigurator. Kein Child-Theme, steht für sich, damit das komplette Design ohne Konflikt mit einem fremden Basis-Theme portiert werden kann.
Version: 1.74.2
Text Domain: lieblingsfuchs
Requires PHP: 8.0
Requires at least: 6.0
*/

/* Schriften lokal (seit v1.55.0, vorher Google Fonts) -- SIL Open Font License, siehe assets/fonts/OFL-*.txt */
@font-face{font-family:'Handlee';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/handlee-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Ephesis';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ephesis-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Ephesis';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ephesis-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}


/* ============ Design Tokens ============ */
:root{
  /* Sagt dem Browser: diese Seite ist hell gedacht -- sonst faerbt er Eingabefelder,
     Auswahllisten und Bildlaufleisten im Dunkelmodus eigenmaechtig dunkel ein. */
  color-scheme:light;
  --color-bg-main:#E5A388;
  --color-bg-alt:#F1EDE8;
  --color-bg-accent-soft:#FDEEE7;
  --color-heading:#7A2415;
  --color-accent:#F06B47;
  --color-accent-strong:#CE4726;
  --color-text:#2B1710;
  --color-text-muted:#7A6556;
  --color-border:#E8DBCD;
  --color-surface:#FFFFFF;
  --color-silver:#D6D6D6;
  --shadow-soft: 0 2px 4px rgba(43,23,16,.06), 0 8px 24px rgba(43,23,16,.08);
  --shadow-warm: 0 2px 8px rgba(240,107,71,.12), 0 8px 24px rgba(43,23,16,.06);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --ease-bouncy: cubic-bezier(.34,1.56,.64,1);
  --ease-soft: cubic-bezier(.4,.2,.2,1);
  /* Handlee/Ephesis sind Google Fonts, kein Systemfont mehr wie vorher Noteworthy —
     werden ueber functions.php (wp_enqueue_style) geladen, siehe dort. */
  --font-handlee:"Handlee", "Comic Sans MS", cursive, sans-serif;
  --font-ephesis:"Ephesis", "Brush Script MT", cursive;
  --font-display:var(--font-handlee);
  --font-body:var(--font-handlee);
  --font-script:var(--font-ephesis);
  --color-brand-text:var(--color-nav-text);
  --color-nav-bg:#893B29;
  /* Menueband ist jetzt dunkel (siehe --color-nav-bg) — eigene helle Textfarbe fuers
     Menueband, sonst waeren Markenname/Links (--color-text, fast schwarz) darauf
     kaum noch lesbar. */
  --color-nav-text:#F5F0E6;
  /* Menueband laeuft schraeg zu: rechts schmal, links breit. --nav-h ist die Bandhoehe
     rechts (~3 cm), --nav-skirt das Dreieck, das links zusaetzlich darunter haengt --
     zusammen ergibt das links ~5,5 cm. Beide Werte hier zentral, damit sich die Schraege
     an einer Stelle nachjustieren laesst. */
  --nav-h:158px;
  /* Deutlich groesseres Dreieck: die rechte Bandhoehe bleibt, links faellt die Kante
     jetzt rund 3 cm tiefer -- dadurch wirkt das Band spuerbar schraeger. */
  --nav-skirt:130px;
  /* Zieht Logo und Warenkorb naeher an die Bildschirmecken, ohne sie hart hineinzudruecken. */
  /* Randabstand der Marke (~1,5 cm) und zusaetzlicher Abstand des Warenkorbs, damit er
     insgesamt ~3,5 cm vom rechten Rand steht. */
  --nav-pad-x:clamp(1rem,3.9vw,56px);
  --nav-cart-inset:0px;
  /* Fusszeilen-Links und Copyright im dunklen Markenbraun (identisch zur Menueband-Farbe). */
  --color-footer-text:#893B29;
  --color-footer-head:#000000;
}
/* Dunkelmodus bewusst nicht unterstuetzt.
   Frueher stand hier eine komplette dunkle Farbwelt. Sie hat die Seite aber unlesbar
   gemacht, sobald ein Geraet abends automatisch umschaltet: Das Theme dunkelte den
   Hintergrund ab, waehrend die Textfarben der Elementor-Inhalte fest in der Vorlage
   stehen und sich nicht mitaendern -- schwarzer Fliesstext auf fast schwarzem Grund,
   Kontrast 1,14:1. Nachziehen laesst sich das nicht: Elementor kann in der kostenlosen
   Version keine zweite Farbe je Farbschema hinterlegen.
   Deshalb gilt die helle Farbwelt immer. */

/* ============ Reset & Base ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
body{
  margin:0;
  /* Durchgehend die reine Grundfarbe, keine Verlaufsflächen — die hatten an manchen
     Bildschirmgroessen/Scrollpositionen (u. a. im Logo-Bereich) einen hellen Fleck erzeugt,
     wo die Grundfarbe eigentlich durchgehend sein soll. */
  background:var(--color-bg-main);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* height:auto ist hier entscheidend: Die Bilder tragen im HTML feste width-/height-Angaben.
   Wird nur die Breite begrenzt (max-width oder eine Spaltenbreite), behaelt das Bild seine
   urspruengliche Hoehe und wird dadurch gestaucht. Mit height:auto rechnet der Browser die
   Hoehe passend mit und das Seitenverhaeltnis bleibt erhalten. */
img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--color-accent);color:#fff;}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px;}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--color-heading);
  text-wrap:balance;
  margin:0;
  line-height:1.14;
  font-weight:600;
}
p{margin:0;max-width:60ch;}
/* Die 60-Zeichen-Grenze ist fuer die handgeschriebenen Theme-Seiten gedacht (angenehme
   Zeilenlaenge). In Elementor-Inhalten richtet sie Schaden an: dort bestimmt die Spalten-
   bzw. Elementbreite, wie breit ein Absatz laufen soll -- die Regel hat jede Verbreiterung
   im Editor wirkungslos gemacht ("der Text laesst sich nicht nach rechts ziehen").
   Deshalb innerhalb von Elementor-Bereichen aufheben. */
.elementor p{max-width:none;}

/* Produktkacheln (Elementor-Widget "Bildbox"): einheitlicher Bildrahmen 4:3, NICHTS abgeschnitten.
   -----------------------------------------------------------------------------------------
   Vorgabe: Jede Kachel gleich gross, jeder Titel einer Reihe auf gleicher Hoehe -- und von
   jedem Produkt muessen ALLE Teile zu sehen sein ("im Zweifel weit genug rauszoomen").
   Deshalb:
   1. Der Rahmen ist fest: spaltenbreit, 3/4 so hoch. Daraus folgt die gleiche Titelhoehe.
      Der Regler "Bildgroesse" der Bildbox hat dadurch bewusst keine Wirkung
      (width:100% !important) -- sonst waeren die Titel wieder verrutscht.
   2. Das Foto wird mit object-fit:contain KOMPLETT in diesen Rahmen gelegt, also so weit
      "herausgezoomt", bis es ganz hineinpasst. Eine fruehere Fassung schnitt mit
      object-fit:cover zu -- bei Hochformat-Fotos gingen dabei bis zu 47 % verloren
      (Beisskette ohne Clip, Lesezeichen ohne Schriftzug). Das ist damit ausgeschlossen, auch
      fuer jedes Foto, das spaeter ausgetauscht wird.
   3. Der Platz, der neben einem Hochformat-Foto frei bleibt, wird mit einer stark
      unscharfen Kopie DESSELBEN Fotos gefuellt. Dadurch wirkt jede Kachel randlos und
      farblich passend (Holz bleibt Holz, Leinen bleibt Leinen), statt Streifen in einer
      fremden Farbe zu zeigen -- der "weisse Rand" von frueher kommt so nicht zurueck.
      Das Einsetzen der Kopie erledigt assets/js/site-chrome.js (CSS allein kann die
      Bildadresse nicht als Hintergrund uebernehmen). Ohne JavaScript bleibt der Streifen
      cremefarben -- das Produkt ist trotzdem vollstaendig zu sehen.
   4. Fotos, die schon (fast) 4:3 sind, fuellen den Rahmen direkt (Klasse lfx-bild--passt,
      ebenfalls vom Skript gesetzt). Abweichung hoechstens 5 %, also hoechstens gut 2 % pro
      Rand -- da faellt nichts vom Produkt weg.
   Hinweis: Handyfotos tragen oft nur einen EXIF-Drehvermerk. Was Vorschau oder Mediathek als
   Mass anzeigen, kann deshalb um 90 Grad verdreht sein; das Skript misst das tatsaechlich
   angezeigte Bild und liegt damit immer richtig. */
.elementor-widget-image-box .elementor-image-box-img{
  width:100% !important;
  margin-left:0;
  margin-right:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--color-bg-alt);
}
.elementor-widget-image-box .elementor-image-box-img::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--lfx-bild, none);
  background-size:cover;
  background-position:center;
  /* scale: Weichzeichnen laesst die Kanten ausfransen -- etwas groesser ziehen, der
     ueberstehende Rand wird vom overflow:hidden des Rahmens abgeschnitten. */
  filter:blur(18px);
  transform:scale(1.15);
}
.elementor-widget-image-box .elementor-image-box-img img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:4 / 3;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
}
.elementor-widget-image-box .elementor-image-box-img.lfx-bild--passt img{object-fit:cover;}

/* Schrift der Produktkacheln: Titel und Text in der Theme-Schrift. Ohne das erbt der
   Beschreibungstext Elementors Standardschrift (Roboto) und passt nicht zum Menueband.
   font-weight:400 ist hier entscheidend: Handlee gibt es nur in dieser einen Schnittstaerke.
   Der Kacheltitel ist ein <h3> und erbte deshalb font-weight:600 aus der Ueberschriften-
   Regel -- eine Staerke, die es in der Schrift gar nicht gibt. Der Browser rechnet sie sich
   dann selbst aus, indem er die Striche verdickt. Das Ergebnis wirkt teigig und gerade nicht
   mehr wie eine Handschrift, was als "das sieht nicht nach Handlee aus" auffiel. */
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-description{
  font-family:var(--font-body);
  font-weight:400;
}

/* Etwas Luft links und rechts vom Kacheltext. Ohne das laufen die Texte benachbarter
   Kacheln bis an die Spaltenkante und stehen dadurch fast aneinander -- besonders auffaellig
   in der letzten Reihe, wo nur zwei Kacheln nebeneinander stehen. Das Bild darueber bleibt
   bewusst randlos, das ergibt den ruhigeren Kartenlook. */
.elementor-widget-image-box .elementor-image-box-content{
  padding-left:.9rem;
  padding-right:.9rem;
}

/* Farbe beim Darueberfahren: cremefarben wie der Grund der Fusszeile.
   Ohne eigene Regel setzt Elementor hier seine globale Linkfarbe ein, die nicht zum
   Fuchs-Design passt. */
.elementor-widget-image-box .elementor-image-box-title a,
.elementor-widget-image-box .elementor-image-box-title a:visited{
  color:inherit;transition:color .15s ease;
}
.elementor-widget-image-box .elementor-image-box-title a:hover,
.elementor-widget-image-box .elementor-image-box-title a:focus-visible,
.elementor-widget-image-box:hover .elementor-image-box-title a{
  color:var(--color-bg-alt);
}

/* Bilder-Trenner (Elementor-Flexbox mit den Fuchs-Zeichnungen): am Desktop stehen alle
   vier gross nebeneinander. Auf Tablet und Handy bleiben ebenfalls alle vier stehen -- das
   Bild soll dasselbe sein, nur klein. Begrenzt wird deshalb die HOEHE, nicht die Breite:
   So bleibt jedes Seitenverhaeltnis erhalten, und der Trenner wird zu einem schmalen
   Streifen, statt halbe Bildschirmhoehen zu fuellen.
   Die Werte liegen bewusst deutlich unter der Hoehe des Menuebands (dort 132 px bzw. 76 px),
   damit der Trenner nie wuchtiger wirkt als das Band darueber.
   :has(img) grenzt die Regel auf Bilderreihen ein, damit spaeter angelegte Flexbox-Bereiche
   mit Text davon unberuehrt bleiben. */
@media (max-width:1200px){
  .elementor [class*="e-flexbox"]:has(img){
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    gap:.7rem;
  }
  .elementor [class*="e-flexbox"]:has(img) > *{
    flex:0 0 auto;
    max-width:none;
  }
  .elementor [class*="e-flexbox"]:has(img) img{
    width:auto;
    height:auto;
    max-height:64px;
    object-fit:contain;
  }
}
/* Umschaltpunkt bewusst bei 860 px -- dieselbe Grenze, an der auch das Menueband auf seine
   flache Handy-Hoehe (76 px) wechselt. Mit einer eigenen Grenze war der Trenner auf dem
   Tablet zwischenzeitlich hoeher als das Band darueber. */
@media (max-width:860px){
  .elementor [class*="e-flexbox"]:has(img) img{
    max-height:38px;
  }
}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem);}
.eyebrow{
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent-strong);
  display:flex;align-items:center;gap:.6em;
  margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.5em;height:2px;border-radius:2px;background:var(--color-accent);display:inline-block;}

/* ---- Eyebrow-Ersatz: statt der kleinen Textzeile ein rundes Fuchs-Emblem, dieselbe
   Bildsprache wie .card-badge auf den Sortiment-Karten. ---- */
/* Seit v1.43.0: der rote stehende Fuchs aus dem Menueband ("Sortiment"), frei stehend ohne
   runden Hintergrund. */
.eyebrow-fox{height:58px;margin-bottom:.8rem;display:flex;align-items:flex-end;}
.eyebrow-fox img{width:auto;height:100%;object-fit:contain;}

/* ---- Fuchs-Trenner: alle 5 Embleme nebeneinander, als Abschluss der Startseite. ---- */
.fox-divider{display:flex;justify-content:center;align-items:center;gap:clamp(1rem,3vw,2.2rem);flex-wrap:wrap;padding:clamp(2.2rem,5vw,3.2rem) 0;}
.fox-divider img{width:60px;height:60px;border-radius:50%;object-fit:contain;padding:6px;background:var(--color-surface);box-shadow:var(--shadow-soft);}

.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  padding:.85em 1.7em;border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-warm);}
.btn-primary:hover{background:var(--color-accent-strong);transform:translateY(-2px);box-shadow:0 4px 12px rgba(240,107,71,.2), 0 12px 28px rgba(43,23,16,.08);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent;color:var(--color-heading);border-color:var(--color-border);}
.btn-ghost:hover{background:var(--color-bg-alt);border-color:var(--color-accent);transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.98);}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* Perlen-Einblendung: Karten, die zu mehreren nebeneinander stehen, fallen versetzt
   von oben ein und federn kurz nach -- wie Perlen, die auf die Schnur rutschen.
   Einzeln stehende Bloecke behalten das ruhige Einblenden von oben. Welche Elemente
   die Klasse bekommen, entscheidet assets/js/site-chrome.js (ab drei Geschwistern). */
.reveal--perlen{
  transform:translateY(-16px);
  transition:opacity .38s ease, transform .5s var(--ease-bouncy);
  transition-delay:calc(var(--lfx-perle, 0) * .085s);
}
.reveal--perlen.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal--perlen{transform:none;transition-delay:0s !important;}
}

/* ============ Header ============ */
header.site{
  position:sticky;top:0;z-index:40;
  /* Deckend statt 94 % + Weichzeichner: der Header ist durch backdrop-filter ein eigener
     "Backdrop-Root", dadurch bekam die darunter haengende Schraege (::after) einen anderen
     Untergrund zu filtern als der Header selbst. Die beiden leicht verschiedenen Mischfarben
     ergaben genau an der Kante eine sichtbare waagerechte Linie quer durchs Band. Mit einer
     vollflaechigen Farbe auf beiden Elementen kann dieser Versatz gar nicht erst entstehen. */
  background:var(--color-nav-bg);
  border-bottom:none;
}
/* Schraeg zulaufende Unterkante: unter dem geraden Nav-Inhalt haengt ein Dreieck, das
   rechts auf 0 auslaeuft und links seine volle Hoehe hat. Dadurch beginnt die Schraege
   nicht in der oberen rechten Ecke, sondern erst unterhalb des Bands (die Bandhoehe rechts
   bleibt --nav-h stehen) und faellt nach links auf --nav-h + --nav-skirt ab.
   Bewusst ein eigenes Pseudo-Element statt clip-path auf dem Header selbst: sonst wuerde
   die Schraege Logo und Warenkorb an den Raendern anschneiden.
   z-index:-1, damit das Dreieck hinter dem aufgeklappten Mobil-Menue liegt. */
header.site::after{
  content:"";
  position:absolute;left:0;right:0;top:100%;
  height:var(--nav-skirt);
  /* Exakt dieselbe deckende Farbe wie der Header darueber -- siehe Begruendung dort. */
  background:var(--color-nav-bg);
  clip-path:polygon(0 0, 100% 0, 0 100%);
  z-index:-1;
  pointer-events:none;
}
.nav-row{
  /* Zwei Zeilen: oben Marke und Warenkorb an den Aussenkanten, darunter versetzt die
     Menuepunkte. Vorher standen alle drei nebeneinander -- dabei blieb fuer den
     vergroesserten Schriftzug zu wenig Platz. */
  display:grid;
  /* Erste Spalte so breit wie die Marke, zweite nimmt den Rest. Die Marke belegt beide
     oberen Zeilen ("brand" steht zweimal untereinander), der Warenkorb nur die zweite --
     der Punkt oben rechts bleibt bewusst leer. */
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "brand ."
    "brand cart"
    "nav   nav";
  align-items:center;row-gap:0;column-gap:1rem;
  min-height:var(--nav-h);
  max-width:1440px;
  padding-top:.3rem;padding-bottom:.3rem;
  /* Links und rechts derselbe Innenabstand -- nur so liegt die Mitte des Rasters wirklich
     auf der Seitenmitte, und die Menuepunkte sitzen exakt mittig. */
  padding-left:var(--nav-pad-x);
  padding-right:var(--nav-pad-x);
}
.brand{
  display:flex;align-items:center;gap:.65rem;font-family:var(--font-script);font-weight:700;
  font-size:2.75rem;color:var(--color-brand-text);
  /* clamp statt fester Groesse: der Vollwert gilt am Desktop, auf schmaleren Fenstern
     schrumpfen Logo und Schriftzug mit, sonst schoebe die groessere Marke die mittig
     gesetzten Menuepunkte aus der Mitte. */
  /* min-width:0 + Ellipsis: ohne das schrumpft ein Flex-Kind standardmaessig nicht unter seine
     Inhaltsbreite, wodurch der lange Schriftzug auf schmalen Bildschirmen den Warenkorb/Toggle
     in .nav-cta ueberlappt statt Platz zu machen. */
  min-width:0;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.brand .mark{height:64px;width:auto;flex:none;}
header.site .brand{grid-area:brand;font-size:3.6rem;}
header.site .brand .mark{height:110px;}
.nav-links{
  grid-area:nav;
  display:flex;align-items:center;justify-self:center;
  gap:1.7rem;font-weight:700;
  /* 1.57rem = die vorherigen 1.4rem plus 2 pt. */
  font-size:1.57rem;
}
.nav-links a{display:inline-flex;align-items:center;gap:.45rem;color:var(--color-nav-text);padding:.3rem 0;border-bottom:2px solid transparent;transition:border-color .15s ease;text-transform:uppercase;}
/* Fuechse bewusst groesser als die Schrift daneben (40 px gegenueber 25 px Versalhoehe). */
.nav-icon{width:40px;height:40px;object-fit:contain;flex:none;}
/* Der Fuchs vor "Kontakt" ist eine breite Querformat-Zeichnung. In einem quadratischen
   Kasten mit object-fit:contain bleibt oben und unten Luft, dadurch wirkt er kleiner als
   die uebrigen -- deshalb hier ein groesserer Kasten als Ausgleich. */
.nav-icon--springend{width:50px;height:50px;}
.nav-links a:hover,.nav-links a:active,.nav-links a:visited{color:var(--color-nav-text);}
.nav-links a:hover{border-color:var(--color-nav-text);}
.nav-cta{grid-area:cart;display:flex;align-items:center;justify-content:flex-end;justify-self:end;gap:.9rem;margin-right:var(--nav-cart-inset);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--color-nav-text);}

/* ---- Sortiment-Dropdown im Hauptmenue: Klick statt Hover, damit es auch touch-freundlich
   ist; Liste aller Produkte, damit man direkt von jeder Seite aus zu jedem Produkt kommt,
   ohne erst zur Startseite zurueck zu muessen. ---- */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  font:inherit;font-weight:700;font-size:1.57rem;color:var(--color-nav-text);text-transform:uppercase;
  background:none;border:none;cursor:pointer;padding:.3rem 0;
  border-bottom:2px solid transparent;transition:border-color .15s ease;
  display:inline-flex;align-items:center;gap:.35rem;
}
.nav-dropdown-trigger svg{width:14px;height:14px;transition:transform .15s ease;}
.nav-dropdown-trigger:hover,.nav-dropdown-trigger[aria-expanded="true"]{color:var(--color-nav-text);border-color:var(--color-nav-text);}
.nav-dropdown-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-dropdown-panel{
  display:none;flex-direction:column;gap:.1rem;
  position:absolute;top:100%;left:0;margin-top:.7rem;padding:.5rem;min-width:470px;
  /* Mit 18 Produkten waere eine einspaltige Liste hoeher als der Bildschirm. */
  max-height:min(70vh,620px);overflow-y:auto;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);z-index:40;
}
/* Zweispaltig, aber SPALTENWEISE gefuellt: erst die linke Spalte von oben nach unten,
   dann die rechte. Ein Raster (grid) fuellt zeilenweise -- damit standen Schnullerkette und
   Kinderwagenkette nebeneinander statt untereinander. Der Mehrspaltensatz (column-count)
   macht genau das Gewuenschte und passt sich ausserdem jeder Produktanzahl an, ohne dass
   eine Zeilenzahl fest hinterlegt werden muesste. */
.nav-dropdown-panel.open{display:block;column-count:2;column-gap:.6rem;}
.nav-dropdown-panel.open a{display:block;break-inside:avoid;}
/* Die Produktliste im Aufklappmenue bleibt bewusst in normaler Schreibweise -- die
   Grossbuchstaben gelten nur fuer die vier Hauptpunkte im Band. */
.nav-dropdown-panel a{padding:.55rem .7rem;border-radius:8px;font-weight:600;font-size:1.05rem;color:var(--color-text);border-bottom:none;text-transform:none;}
/* Ohne explizite :visited-Regel faerbt der Browser bereits besuchte Links in seiner eigenen
   (blassen/violetten) Standardfarbe ein -- dadurch sahen einzelne Sortiment-Eintraege
   uneinheitlich aus, je nachdem ob man die Seite schon mal besucht hatte. */
.nav-dropdown-panel a:visited{color:var(--color-text);}
.nav-dropdown-panel a:hover{background:var(--color-bg-accent-soft);color:var(--color-accent-strong);}
@media (max-width:860px){
  .nav-dropdown-panel{position:static;box-shadow:none;border:none;margin:.2rem 0 .4rem;padding:0 0 0 1.2rem;min-width:0;max-height:none;}
  /* Auf dem Handy untereinander -- zwei Spalten waeren dort zu schmal zum Treffen. */
  .nav-dropdown-panel.open{column-count:1;}
  /* Der Trigger ist ein inline-flex-Button und richtete sich dadurch mittig aus, waehrend
     die uebrigen Menuepunkte linksbuendig stehen -- hier auf dieselbe Linie gebracht. */
  .nav-dropdown{width:100%;}
  .nav-dropdown-trigger{
    width:100%;justify-content:flex-start;
    padding:.9rem var(--nav-pad,1.2rem);
    border-bottom:1px solid rgba(245,240,230,.16);
  }
}
@media (max-width:860px){
  .nav-links{
    position:absolute;inset:100% 0 auto 0;
    /* Muss das justify-self:center der Desktop-Regel zuruecknehmen: sonst zieht sich das
       aufgeklappte Menue trotz left:0/right:0 auf seine Inhaltsbreite zusammen und haengt
       mittig statt ueber die volle Bildschirmbreite. */
    justify-self:stretch;
    flex-direction:column;gap:0;
    /* Dunkles Menueband statt der (jetzt hellen) Seiten-Grundfarbe, sonst waere der
       helle --color-nav-text im aufgeklappten Mobil-Menue unlesbar. */
    background:var(--color-nav-bg);
    border-bottom:1px solid var(--color-border);
    padding:.5rem 0;
    display:none;
    /* Ohne max-height+overflow ragt das aufgeklappte Menue (inkl. aufgeklapptem
       Sortiment-Dropdown darunter) auf kleinen Bildschirmen ueber den sichtbaren Viewport
       hinaus, ohne dass sich der ueberstehende Teil erreichen liesse. */
    max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.7rem var(--nav-pad,1.2rem);width:100%;border-bottom:1px solid rgba(245,240,230,.16);border-left:2px solid transparent;}
  /* Die Desktop-Groessen (25 px Schrift, 40 px Fuechse) sind fuers aufgeklappte Handy-Menue
     deutlich zu wuchtig -- dort steht alles untereinander und braucht keine Fernwirkung. */
  .nav-links{font-size:1.12rem;}
  .nav-dropdown-trigger{font-size:1.12rem;padding-top:.7rem;padding-bottom:.7rem;}
  .nav-icon{width:26px;height:26px;}
  .nav-icon--springend{width:32px;height:32px;}
  .nav-dropdown-panel a{font-size:.92rem;padding:.42rem .6rem;}
  .nav-toggle{display:inline-flex;}
  .nav-cta .btn-primary{display:none;}
  header.site .brand{font-size:1.7rem;}
  header.site .brand .mark{height:48px;}
  /* Das Mobil-Menue ist absolut positioniert und faellt damit aus dem Raster -- ohne diese
     Korrektur landete der Warenkorb in der mittleren Spalte statt am rechten Rand. */
  /* Auf dem Handy wieder einzeilig: Marke und Warenkorb nebeneinander, die Menuepunkte
     stecken im Aufklappmenue. Eigene Zeilen dafuer waeren hier nur verschenkte Hoehe. */
  .nav-row{grid-template-columns:1fr auto;grid-template-areas:"brand cart";min-height:var(--nav-h);}
  .nav-cta{margin-right:0;}
  /* Der doppelt so grosse Warenkorb gilt nur am Desktop -- auf dem Handy stuende er
     sonst neben dem Menue-Knopf im schmalen Band voellig ausser Verhaeltnis.
     Bewusst mit "header.site" davor: die Grundregel steht weiter unten im Stylesheet und
     wuerde bei gleicher Spezifitaet gewinnen. */
  header.site .cart-trigger svg{width:28px;height:28px;}
  header.site .cart-badge{min-width:18px;height:18px;padding:0 4px;font-size:.68rem;}
  /* Flacheres Band, sonst frisst das Menueband das halbe Display. */
  :root{--nav-h:76px;--nav-skirt:56px;}
}

/* Sehr schmale Geraete (iPhone SE und aehnlich, 320-420 px): dort reichte die Breite fuer
   Logo + Schriftzug + Warenkorb + Menue-Knopf nicht mehr, der Schriftzug wurde per Ellipse
   zu "Lieblingsfu..." abgeschnitten. Statt ihn abzuschneiden, verkleinern wir Schriftzug
   und Logo eine Stufe -- gemessen bleiben so auch bei 320 px rund 30 px Luft. */
@media (max-width:420px){
  header.site .brand{font-size:1.42rem;}
  header.site .brand .mark{height:40px;}
  .nav-row{padding-left:.85rem;padding-right:.85rem;}
  .nav-cta{gap:.5rem;}
}

/* Zwischen dem Mobil-Umbruch (860px) und einem breiten Desktop passen Marke, fuenf
   Menuepunkte und Warenkorb in voller Groesse nicht nebeneinander -- hier eine Stufe
   kleiner, damit nichts umbricht oder ueberlappt. Ab ~1200px gelten die vollen Groessen. */
@media (min-width:861px) and (max-width:1200px){
  header.site .brand{font-size:2.8rem;}
  header.site .brand .mark{height:86px;}
  .nav-links{font-size:1.22rem;gap:1rem;}
  .nav-dropdown-trigger{font-size:1.22rem;}
  .nav-icon{width:32px;height:32px;}
  .nav-icon--springend{width:40px;height:40px;}
  :root{--nav-h:132px;--nav-skirt:104px;}
}

/* ============ Hero ============ */
.hero{
  padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4.5rem);
  position:relative;
  overflow:hidden;
}
.hero-glow{
  position:absolute;inset:auto -10% -30% auto;
  width:60vw;height:60vw;max-width:700px;max-height:700px;
  /* Ganz entfernt statt nur abgedunkelt — jede Verlaufs-/Aufhellungsvariante an dieser Stelle
     wurde als heller Fleck auf der Grundfarbe wahrgenommen. Element bleibt im Markup
     (aria-hidden, harmlos), zeigt aber keinen eigenen Hintergrund mehr. */
  background:none;
  pointer-events:none;z-index:0;
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}.hero-art{order:-1;}}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.6rem);max-width:14ch;}
.hero-sub{font-size:1.15rem;color:#000;margin:1.3rem 0 0;max-width:46ch;}
.hero-art{max-width:460px;margin:0 auto;}
.hero-art img{width:100%;height:auto;display:block;}

/* ============ USP strip ============ */
.usp{
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  background:var(--color-bg-alt);
}
.usp-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.5rem;padding:1.7rem 0;
}
@media (max-width:860px){.usp-row{grid-template-columns:repeat(2,1fr);}}
.usp-item{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;font-weight:700;color:var(--color-heading);}
.usp-item svg{flex:none;width:22px;height:22px;color:var(--color-accent);}

/* ============ Section shell ============ */
section.block{padding:clamp(3.2rem,7vw,5.5rem) 0;}
.block-head{max-width:60ch;margin-bottom:2.6rem;}
.block-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);}
.block-head p{color:var(--color-text-muted);margin-top:.9rem;font-size:1.05rem;}

/* ============ Sortiment grid ============ */
.sortiment-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;
}
@media (max-width:1020px){.sortiment-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.sortiment-grid{grid-template-columns:repeat(2,1fr);}}
.product-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:0 1.2rem 1.5rem;
  display:flex;flex-direction:column;gap:.9rem;
  transition:transform .2s ease, box-shadow .2s ease;
  overflow:visible;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
.card-photo{
  margin:0 -1.2rem;
  aspect-ratio:4/5;
  background:var(--color-bg-accent-soft);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  overflow:hidden;
  position:relative;
}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.card-photo.card-photo--illustration img{object-fit:contain;padding:14%;}
.card-photo.card-photo--framed{background:var(--color-surface);}
.card-photo.card-photo--framed img{object-fit:contain;padding:8%;}
.card-badge{
  position:absolute;left:.9rem;bottom:-16px;
  width:52px;height:52px;border-radius:50%;
  background:var(--color-surface);
  border:2.5px solid var(--color-surface);
  box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.card-badge img{width:80%;height:80%;object-fit:contain;}
.product-card h3{font-size:1.08rem;margin-top:.6rem;}
.product-card .price{display:block;font-weight:800;font-size:.92rem;color:var(--color-accent-strong);margin-top:.15rem;}
.product-card p{font-size:.9rem;color:var(--color-text-muted);}
.product-card .go{margin-top:auto;font-weight:800;font-size:.85rem;color:var(--color-accent-strong);display:inline-flex;align-items:center;gap:.35em;}
.product-card .go svg{width:14px;height:14px;transition:transform .15s ease;}
.product-card:hover .go svg{transform:translateX(3px);}

/* ============ Geschenksets ============ */
.sets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;}
@media (max-width:760px){.sets-grid{grid-template-columns:1fr;}}
.set-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:1.5rem 1.3rem;
}
.set-badge{
  display:inline-block;background:var(--color-bg-accent-soft);color:var(--color-accent-strong);
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.3em .7em;border-radius:999px;margin-bottom:.8rem;
}
.set-card h3{font-size:1.15rem;margin-bottom:.3rem;}
.set-card .price{display:block;font-weight:800;font-size:1rem;color:var(--color-accent-strong);margin-bottom:.6rem;}
.set-card p{font-size:.92rem;color:var(--color-text-muted);}

/* ============ Entstehung / process ============ */
.process{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  counter-reset:step;
}
@media (max-width:860px){.process{grid-template-columns:1fr;}}
.step{position:relative;padding-left:3.2rem;}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--color-accent);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:1.1rem;margin-bottom:.5rem;}
.step p{color:var(--color-text-muted);font-size:.94rem;}
.process-note{
  margin-top:2.4rem;padding:1.1rem 1.4rem;
  background:var(--color-bg-accent-soft);border-radius:var(--radius-md);
  font-size:.92rem;color:var(--color-text-muted);font-style:italic;
  max-width:65ch;
}

/* ============ Farbauswahl (Grundfarben) ============ */
.color-group{margin-bottom:1.6rem;}
.color-group:last-child{margin-bottom:0;}
.color-group-label{
  font-size:.85rem;font-weight:800;color:var(--color-heading);
  display:flex;align-items:baseline;gap:.5em;margin-bottom:.8rem;
}
.color-group-hint{font-size:.78rem;font-weight:600;color:var(--color-text-muted);}
.swatch-grid{display:flex;flex-wrap:wrap;gap:.75rem;}
.swatch-btn{
  appearance:none;border:none;background:none;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  width:64px;padding:.3rem .1rem;border-radius:14px;
  transition:transform .2s var(--ease-bouncy);
}
.swatch-btn:hover{transform:translateY(-3px) scale(1.05);}
.swatch-btn:active{transform:translateY(-1px) scale(1.02);}
.swatch-dot{
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(0,0,0,.08);box-sizing:border-box;
  box-shadow:0 0 0 0 transparent, 0 2px 6px rgba(43,23,16,.06);transition:box-shadow .25s var(--ease-bouncy), transform .25s var(--ease-bouncy);
}
.swatch-btn:hover .swatch-dot{transform:scale(1.08);}
.swatch-btn[aria-pressed="true"] .swatch-dot{box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent), 0 2px 8px rgba(240,107,71,.2);transform:scale(1.1);}
.swatch-label{font-size:.72rem;font-weight:700;color:var(--color-text-muted);text-align:center;line-height:1.2;transition:color .2s ease;}
.swatch-btn[aria-pressed="true"] .swatch-label{color:var(--color-accent-strong);}

/* ---- 3D-Vorschau ---- */
.preview-panel{
  margin-top:2rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);padding:clamp(1.2rem,3vw,2rem);
  display:grid;grid-template-columns:280px 1fr;gap:1.8rem;box-shadow:var(--shadow-soft);
  animation:panel-enter .5s var(--ease-soft) both;
}
@media (max-width:760px){.preview-panel{grid-template-columns:1fr;}}
.preview-controls{display:flex;flex-direction:column;gap:1.2rem;}
.preview-controls label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;font-weight:800;color:var(--color-heading);}
.preview-controls input,.preview-controls select{
  padding:.65em .9em;border-radius:14px;border:1.5px solid var(--color-border);
  background:var(--color-bg-main);color:var(--color-text);font-family:var(--font-body);font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.preview-controls input:focus,.preview-controls select:focus{
  border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(240,107,71,.15);outline:none;
}
.preview-controls .field-hint{font-size:.72rem;font-weight:600;color:var(--color-text-muted);text-transform:none;letter-spacing:0;margin-top:-.2rem;}

/* ---- Material-Chips (Perlen-/Motiv-/Namensperlen-Material) ---- */
.chip-group{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip-btn{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.82rem;
  border:1.5px solid var(--color-border);border-radius:999px;background:var(--color-bg-main);
  color:var(--color-text);padding:.5em 1.1em;transition:all .2s var(--ease-bouncy);
}
.chip-btn:hover{transform:translateY(-1px);border-color:var(--color-accent);}
.chip-btn:active{transform:scale(.96);}
.chip-btn[aria-pressed="true"]{border-color:var(--color-accent);background:var(--color-bg-accent-soft);color:var(--color-accent-strong);box-shadow:0 2px 8px rgba(240,107,71,.12);}

/* ---- Motiv-Auswahl ---- */
.motif-picker-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
@media (max-width:520px){.motif-picker-row{grid-template-columns:1fr;}}
.motif-picker-row select{width:100%;}
.motif-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem;}
#preview-motif-add{transition:transform .2s var(--ease-bouncy), border-color .2s ease;}
#preview-motif-add:hover{transform:translateY(-1px);}
#preview-motif-add:active{transform:scale(.97);}
#preview-motif-add:disabled{opacity:.45;cursor:not-allowed;}
.motif-chip{
  display:inline-flex;align-items:center;gap:.4em;
  background:var(--color-bg-main);border:1.5px solid var(--color-border);border-radius:999px;
  padding:.35em .5em .35em 1em;font-size:.8rem;font-weight:700;color:var(--color-text);
  animation:chip-pop .25s var(--ease-bouncy) both;
}
.motif-chip--primary{border-color:var(--color-accent);background:var(--color-bg-accent-soft);box-shadow:0 2px 8px rgba(240,107,71,.1);}
.motif-chip strong{color:var(--color-accent-strong);font-weight:800;}
.motif-chip-remove{
  appearance:none;border:none;background:var(--color-border);color:var(--color-text);
  width:20px;height:20px;border-radius:50%;font-size:.9rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,transform .15s ease;
}
.motif-chip-remove:hover{background:var(--color-accent);color:#fff;transform:scale(1.15);}
.motif-chip-remove:disabled{opacity:.35;cursor:not-allowed;}

/* ---- Checkbox-Reihen (Greifring: Ring im Ring / Glocke) ---- */
.checkbox-row{flex-direction:row !important;align-items:center;gap:.6em !important;}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--color-accent);cursor:pointer;}
.preview-stage{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;
  background:radial-gradient(circle at 50% 35%, var(--color-bg-accent-soft), var(--color-bg-alt));
  box-shadow:inset 0 2px 8px rgba(43,23,16,.04);
}
.preview-stage canvas{width:100%;height:100%;display:block;cursor:grab;}
.preview-stage canvas:active{cursor:grabbing;}
.preview-length{
  position:absolute;bottom:.8rem;right:.9rem;font-size:.72rem;font-weight:700;
  background:color-mix(in srgb, var(--color-surface) 90%, transparent);
  padding:.35em .8em;border-radius:999px;
  color:var(--color-text-muted);border:1px solid var(--color-border);
  backdrop-filter:blur(6px);
}
.preview-fallback{padding:2rem;text-align:center;color:var(--color-text-muted);}
.preview-actions .btn{transition:transform .2s var(--ease-bouncy), box-shadow .2s ease, background .2s ease;}
.preview-actions .btn-primary:hover{box-shadow:var(--shadow-warm);}

/* ============ Über uns ============ */
.about{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
@media (max-width:860px){.about{grid-template-columns:1fr;}}
.about-art{
  aspect-ratio:4/3;border-radius:var(--radius-lg);
  background:var(--color-bg-accent-soft);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);
}
.about-art img{width:58%;height:auto;filter:drop-shadow(0 8px 18px rgba(43,23,16,.15));}
.about-copy p{margin-bottom:1.1rem;color:var(--color-text-muted);font-size:1.02rem;}
.about-copy p:last-child{margin-bottom:0;}

/* ============ Footer ============ */
footer.site{
  background:var(--color-bg-alt);
  border-top:1px solid var(--color-border);
  padding:clamp(2.6rem,5vw,3.6rem) 0 1.6rem;
}
.footer-grid{
  /* Die Sortiment-Spalte (zweite) bekommt mehr Platz, weil sie die Produktliste
     zweispaltig traegt; die Markenspalte kommt mit weniger aus, seit dort nur noch
     Logo und Instagram stehen. */
  display:grid;grid-template-columns:1.15fr 1.85fr 1fr 1fr;gap:2.2rem;
  padding-bottom:2.4rem;border-bottom:1px solid var(--color-border);
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  /* Markenspalte ueber die volle Breite: in einer der beiden schmalen Spalten wuerde der
     vergroesserte Schriftzug abgeschnitten -- oder die Seite seitlich ueberlaufen. */
  .footer-brand{grid-column:1 / -1;}
  /* Auf schmalen Bildschirmen wieder einspaltig -- zwei Spalten waeren dort zu eng.
     Mit ".footer-grid" davor, weil die Zweispalten-Regel weiter unten im Stylesheet steht
     und bei gleicher Spezifitaet sonst gewinnt. */
  .footer-grid .footer-col--sortiment ul{column-count:1;}
  .footer-brand .brand .mark{height:104px;}
  .footer-social{font-size:.9rem;}
}
/* Eigene Farbe fuer die Marke im Footer: .brand erbt sonst --color-brand-text, also die
   helle Menueband-Schrift -- auf dem hellen Footer-Grund war der Schriftzug dadurch
   praktisch unsichtbar. Faellt erst seit der Vergroesserung wirklich auf. */
/* Logo ganz links, senkrecht auf mittlerer Hoehe der Textspalten daneben, der
   Instagram-Verweis direkt in der Zeile darunter. justify-content:center wirkt in einer
   Spalten-Flexbox senkrecht -- das ergibt die mittige Hoehe ohne feste Werte. */
.footer-brand{
  display:flex;flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
}
/* Knapper Abstand: der Instagram-Verweis soll direkt unter dem Logo haengen. */
.footer-brand .brand{margin-bottom:.35rem;}
/* Im Footer steht der Schriftzug "Lieblingsfuchs" nicht mehr als Text daneben -- das
   Wortmarken-Logo traegt den Namen bereits selbst, deshalb hier deutlich groesser. */
.footer-brand .brand .mark{height:132px;}
/* Instagram-Verweis sitzt in der Markenspalte: seit Beschreibungstext und Newsletter-Feld
   dort entfallen sind, ist das der natuerliche Platz dafuer. */
.footer-social{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;color:var(--color-footer-text);}
.footer-social svg{width:26px;height:26px;flex:none;}
.footer-social:hover{color:var(--color-accent-strong);}
.footer-col h4{
  font-family:var(--font-body);font-size:.78rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;color:var(--color-footer-head);
  margin-bottom:.9rem;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
/* Produktliste in der Fusszeile zweispaltig -- wie im Menueband oben, und in derselben
   Reihenfolge, weil beide dieselbe Quelle nutzen. column-count fuellt spaltenweise:
   erst die linke Spalte von oben nach unten, dann die rechte. */
.footer-col--sortiment ul{display:block;column-count:2;column-gap:1.4rem;}
.footer-col--sortiment li{break-inside:avoid;margin-bottom:.6rem;}
/* Eintraege unter Sortiment/Service/Rechtliches im dunklen Markenbraun. :visited muss
   mitgesetzt werden, sonst faerbt der Browser bereits besuchte Links selbst um und die
   Spalten sehen unterschiedlich aus (derselbe Effekt wie frueher im Sortiment-Dropdown). */
.footer-col a,.footer-col a:visited{font-size:.92rem;font-weight:700;color:var(--color-footer-text);}
.footer-col a:hover{color:var(--color-accent-strong);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;
  padding-top:1.4rem;font-size:.82rem;color:var(--color-footer-text);
}
/* Bewusst kleiner/unauffaelliger als .footer-bottom -- ein dezenter Website-Credit, kein
   zweiter Werbeblock. */
.footer-credit{
  text-align:center;padding-top:.6rem;font-size:.72rem;color:var(--color-text-muted);opacity:.7;
}
.footer-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.footer-credit a:hover{color:var(--color-accent-strong);}

/* ============ Produkt-Detailseite ============ */
.breadcrumb{font-size:.85rem;color:var(--color-text-muted);padding:1.1rem 0 0;}
.breadcrumb a{font-weight:700;}
.breadcrumb a:hover{color:var(--color-accent-strong);}
.breadcrumb span{margin:0 .4em;}

.product-hero{padding:clamp(2rem,5vw,3.2rem) 0 clamp(2.5rem,5vw,4rem);}
.product-hero-grid{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;
}
@media (max-width:900px){.product-hero-grid{grid-template-columns:1fr;}}
.product-gallery{
  aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-bg-accent-soft);box-shadow:var(--shadow-soft);position:relative;
}
.product-gallery img{width:100%;height:100%;object-fit:cover;}
.product-gallery .card-badge{position:absolute;left:1rem;bottom:1rem;}
.product-info .eyebrow{margin-bottom:.7rem;}
.product-info h1{font-size:clamp(1.9rem,4vw,2.6rem);max-width:20ch;}
.product-price{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:1.5rem;color:var(--color-accent-strong);margin:.9rem 0 .3rem;
}
.product-price small{font-family:var(--font-body);font-weight:600;font-size:.8rem;color:var(--color-text-muted);}
.product-lede{color:var(--color-text-muted);font-size:1.05rem;margin-bottom:1.6rem;}
/* Seit v1.39.0 steht hier die Produktbeschreibung aus WooCommerce -- das koennen mehrere
   Absaetze sein, deshalb ein <div> mit eigenen <p> statt eines einzelnen <p>. */
.product-lede p{margin:0 0 .75rem;}
.product-lede p:last-child{margin-bottom:0;}

/* Preisangaben von Germanized unter dem Preis ("zzgl. Versand", Kleinunternehmer-Hinweis,
   Lieferzeit). Klein und gedaempft wie der fruehere Zusatz neben dem Preis, damit der Preis
   selbst der Blickfang bleibt. Germanized liefert eigene <p>/<div>, die hier nur
   vereinheitlicht werden. */
.lfx-preisangaben,.lfx-preis-hinweis{display:block;margin:.15rem 0 1.1rem;font-size:.82rem;line-height:1.45;color:var(--color-text-muted);}
.lfx-preisangaben p,.lfx-preisangaben div{margin:0;}
.lfx-preisangaben a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.lfx-preisangaben .delivery-time-info{margin-top:.2rem;}

/* Kasten Produktsicherheit: Germanized bringt eigene Ueberschriften mit (h2/h3 je nach
   Version) -- auf die Groesse der uebrigen Kastenueberschrift angleichen. */
.lfx-produktsicherheit h2,.lfx-produktsicherheit h3,.lfx-produktsicherheit h4{font-size:.95rem;color:var(--color-heading);margin:0 0 .6rem;}
.lfx-produktsicherheit h2 ~ h2,.lfx-produktsicherheit h3 ~ h3{margin-top:1rem;}
.lfx-produktsicherheit p{margin:0 0 .5rem;}
.lfx-admin-hinweis{border:2px dashed var(--color-accent-strong);}

/* Produktbeschreibung (WooCommerce-Feld) als eigener Abschnitt unter dem Konfigurator.
   Lesebreite begrenzt; Noemis Stichpunkte ("Handgemachtes Unikat: ...") als Liste mit
   hervorgehobenem Anfang. */
.produkt-beschreibung{padding-top:0;}
.produkt-beschreibung-text{max-width:68ch;font-size:1.02rem;line-height:1.65;}
.produkt-beschreibung-text p{margin:0 0 1rem;}
.produkt-beschreibung-text ul{margin:0 0 1rem;padding-left:1.2rem;}
.produkt-beschreibung-text li{margin:.45rem 0;}
.produkt-beschreibung-text li strong{color:var(--color-heading);font-weight:400;}
.produkt-beschreibung-text em{color:var(--color-text-muted);font-size:.9rem;}

/* ---- Ausfuehrung waehlen (Greifring ohne/mit Clip, Handykette einfach/geflochten) ----
   Zwei Knoepfe in Pillenform statt eines Aufklappmenues: beide Preise sind sofort sichtbar. */
.lfx-ausfuehrung{border:0;padding:0;margin:.9rem 0 .3rem;display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;}
.lfx-ausfuehrung legend{float:left;width:100%;padding:0;margin:0 0 .45rem;font-weight:700;font-size:.85rem;color:var(--color-text);}
.lfx-ausfuehrung-option{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border:1.5px solid var(--color-border);border-radius:999px;background:var(--color-surface);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;}
.lfx-ausfuehrung-option input{accent-color:var(--color-accent-strong);margin:0;}
.lfx-ausfuehrung-option:has(input:checked){border-color:var(--color-accent-strong);background:var(--color-bg-accent-soft);}
.lfx-ausfuehrung-option:has(input:focus-visible){outline:2px solid var(--color-accent-strong);outline-offset:2px;}
.lfx-ausfuehrung-preis{font-size:.85rem;color:var(--color-text-muted);}

/* ---- Fotos aus WooCommerce (Produktseite, Empfehlungskarten): ganzes Foto im Rahmen, freier
   Rand unscharf gefuellt -- dasselbe Prinzip wie die Startseiten-Kacheln. Die Bildadresse setzt
   assets/js/site-chrome.js als --lfx-bild. Doppelte Klassen, damit die aelteren Regeln
   .product-gallery img / .card-photo img (object-fit:cover) sicher uebertroffen werden. */
.lfx-bildrahmen{position:relative;overflow:hidden;isolation:isolate;}
.lfx-bildrahmen::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--lfx-bild, none);background-size:cover;background-position:center;
  filter:blur(18px);transform:scale(1.15);
}
.product-gallery.lfx-bildrahmen img,.card-photo.lfx-bildrahmen img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:0;}
.product-gallery.lfx-bildrahmen.lfx-bild--passt img,.card-photo.lfx-bildrahmen.lfx-bild--passt img{object-fit:cover;}

.lfx-galerie-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;}
.lfx-galerie-thumb{width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface);cursor:pointer;box-shadow:var(--shadow-soft);}
.lfx-galerie-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.lfx-galerie-thumb.is-active{border-color:var(--color-accent-strong);}
.lfx-galerie-thumb:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px;}

/* ---- Kontaktformular [lfx_kontaktformular] (siehe functions.php) ---- */
.lfx-kontakt{max-width:720px;margin:0 auto;}
.lfx-kontaktformular{display:grid;gap:1rem;font-family:var(--font-body);}
.lfx-kf-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media (max-width:600px){.lfx-kf-reihe{grid-template-columns:1fr;}}
.lfx-kf-feld{display:block;font-size:1rem;color:var(--color-heading);}
.lfx-kf-optional{color:#000000;font-size:.85rem;}
.lfx-kf-feld input,.lfx-kf-feld select,.lfx-kf-feld textarea{
  display:block;margin-top:.35rem;width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--color-text);
  padding:.7rem .85rem;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);
}
.lfx-kf-feld textarea{resize:vertical;min-height:9rem;}
.lfx-kf-feld input:focus,.lfx-kf-feld select:focus,.lfx-kf-feld textarea:focus{outline:none;border-color:var(--color-accent-strong);box-shadow:0 0 0 3px rgba(240,107,71,.18);}
.lfx-kf-hinweis{font-size:.85rem;color:#000000;margin:0;}
.lfx-kf-hinweis a{color:inherit;text-decoration:underline;}
.lfx-kontaktformular .btn{justify-self:start;}
/* Kontakt: WhatsApp / E-Mail / Telefon (Elementor-Abschnitt mit CSS-Klasse lfx-kontaktwege). Auf Tablets
   untereinander statt nebeneinander -- in schmalen Spalten brachen die Zeilen unterschiedlich um und die
   Nummer stand versetzt. Am Handy stapelt Elementor ohnehin. */
@media (max-width:1024px){
  .lfx-kontaktwege > .elementor-container{flex-wrap:wrap;}
  .lfx-kontaktwege > .elementor-container > .elementor-column{width:100% !important;}
  .lfx-kontaktwege .elementor-widget-icon-box{margin-bottom:1.4rem;}
}
/* "Nachricht senden" im Markenbraun wie alle anderen Knoepfe (In den Warenkorb, Widerruf ...) statt Orange */
.lfx-kontaktformular .btn-primary{background:var(--color-nav-bg);color:var(--color-nav-text);box-shadow:none;border-color:var(--color-nav-bg);}
.lfx-kontaktformular .btn-primary:hover,.lfx-kontaktformular .btn-primary:focus-visible{background:#6F2E20;color:var(--color-nav-text);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
/* Nur fuer Bots sichtbar: aus dem Bild geschoben statt display:none, weil manche Bots
   ausgeblendete Felder bewusst ueberspringen. */
.lfx-kf-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.lfx-kontakt-meldung{padding:1rem 1.2rem;border-radius:var(--radius-sm);margin-bottom:1.2rem;font-family:var(--font-body);}
.lfx-kontakt-meldung--ok{background:#E7F3EA;color:#1F5130;border:1.5px solid #9CC9A8;}
.lfx-kontakt-meldung--fehler{background:var(--color-bg-accent-soft);color:var(--color-heading);border:1.5px solid var(--color-accent);}
.lfx-kontakt-meldung a{color:inherit;}

/* ---- Laengere Texte in Elementor-Textbloecken (Impressum, Datenschutz, AGB ...) ----
   Rechtstexte aus Generatoren bestehen aus vielen Zwischenueberschriften, Absaetzen und Listen.
   Die Theme-Ueberschriften sind fuer Abschnittstitel gemacht (gross, ohne Abstand) -- im
   Fliesstext wirkten sie riesig und klebten am naechsten Absatz. Hier deshalb eigene, ruhigere
   Groessen und Abstaende. Betrifft nur Ueberschriften INNERHALB eines Textblocks; die
   Ueberschriften-Widgets der Startseite bleiben unberuehrt. */
.elementor-widget-text-editor{overflow-wrap:break-word;}
.elementor-widget-text-editor h2{font-size:1.45rem;margin:1.8rem 0 .6rem;}
.elementor-widget-text-editor h3{font-size:1.15rem;margin:1.3rem 0 .45rem;}
.elementor-widget-text-editor h4{font-family:var(--font-display);color:var(--color-heading);font-size:1rem;margin:1.1rem 0 .4rem;}
.elementor-widget-text-editor :is(h2,h3,h4):first-child{margin-top:0;}
.elementor-widget-text-editor ul,.elementor-widget-text-editor ol{margin:0 0 1rem;padding-left:1.3rem;}
.elementor-widget-text-editor li{margin:.25rem 0;}
.elementor-widget-text-editor a{color:var(--color-heading);text-decoration:underline;text-underline-offset:2px;}
.product-facts{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.55rem;}
.product-facts li{display:flex;gap:.6em;align-items:flex-start;font-size:.92rem;}
.product-facts svg{flex:none;width:18px;height:18px;color:var(--color-accent);margin-top:.15em;}
.product-actions{display:flex;gap:1rem;flex-wrap:wrap;}
.preview-actions{grid-column:1/-1;display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;}
.preview-actions .btn{flex:1;min-width:200px;justify-content:center;}

.spec-section{border-top:1px solid var(--color-border);}
.spec-tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem;}
.spec-tab{
  appearance:none;font:inherit;cursor:pointer;border:1.5px solid var(--color-border);
  background:var(--color-surface);color:var(--color-text);border-radius:999px;
  padding:.55em 1.2em;font-weight:700;font-size:.88rem;transition:border-color .15s ease,color .15s ease;
}
.spec-tab[aria-selected="true"]{border-color:var(--color-accent);color:var(--color-accent-strong);}
.spec-panels{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;}
@media (max-width:760px){.spec-panels{grid-template-columns:1fr;}}
.spec-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:1.4rem 1.5rem;
}
.spec-card h3{font-size:1.02rem;margin-bottom:.6rem;}
.spec-card p{font-size:.92rem;color:var(--color-text-muted);}
.spec-card ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:.9rem;color:var(--color-text-muted);}
.spec-card li{margin-bottom:.3rem;}
.swatch-row{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap;}
.swatch-row span{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.08);display:inline-block;}

.legal-box{
  background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:1.4rem 1.6rem;margin-top:2.4rem;font-size:.88rem;color:var(--color-text-muted);
}
.legal-box h3{font-size:.95rem;color:var(--color-heading);margin-bottom:.7rem;}
.legal-box dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.3rem 1rem;margin:0 0 1rem;}
@media (max-width:520px){.legal-box dl{grid-template-columns:minmax(0,1fr);}.legal-box dt{margin-top:.5rem;}.legal-box dt:first-child{margin-top:0;}}
.legal-box dt{font-weight:800;color:var(--color-text);}
.legal-box dd{margin:0;}
.legal-box .placeholder{color:var(--color-accent-strong);font-style:italic;}
.legal-box p{font-size:.85rem;margin-top:.4rem;}
.legal-box p:not(:last-child){margin-bottom:.6rem;}

.crosssell{border-top:1px solid var(--color-border);}
.crosssell-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem;}
@media (max-width:760px){.crosssell-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.crosssell-grid{grid-template-columns:1fr;}}

/* ============ Warenkorb ============ */
.cart-trigger{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:.4rem;color:var(--color-nav-text);
}
/* Doppelte Groesse gegenueber den urspruenglichen 26 px. Der Zaehler waechst mit,
   sonst saesse eine winzige Blase an einem grossen Symbol. */
.cart-trigger svg{width:52px;height:52px;}
.cart-badge{
  display:none;align-items:center;justify-content:center;
  position:absolute;top:0;right:0;min-width:24px;height:24px;padding:0 6px;
  background:var(--color-accent-strong);color:#fff;border-radius:999px;
  font-size:.82rem;font-weight:800;line-height:1;
}
#cart-overlay{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;}
#cart-overlay.open{visibility:visible;pointer-events:auto;}
.cart-backdrop{
  position:absolute;inset:0;background:rgba(20,12,7,.45);opacity:0;transition:opacity .2s ease;
}
#cart-overlay.open .cart-backdrop{opacity:1;}
.cart-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  /* Gleiche Flaeche und Schriftfarben wie die Fusszeile, damit der geoeffnete Warenkorb
     wie ein Teil der Seite wirkt und nicht wie ein fremdes Fenster. */
  background:var(--color-bg-alt);color:var(--color-footer-text);
  box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease;
}
#cart-overlay.open .cart-panel{transform:translateX(0);}
.cart-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem 1.3rem 1rem;border-bottom:1px solid var(--color-border);
}
/* Ueberschrift schwarz wie die Spaltentitel der Fusszeile, alles Uebrige im Markenbraun. */
.cart-panel-head h2{font-family:var(--font-display);color:var(--color-footer-head);font-size:1.4rem;margin:0;}
.cart-close{background:none;border:none;cursor:pointer;font-size:1.6rem;line-height:1;color:var(--color-footer-text);padding:.2rem .5rem;}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.3rem;}
.cart-empty{color:var(--color-footer-text);font-size:.92rem;}
.cart-item{
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:.9rem 1rem;margin-bottom:.9rem;background:var(--color-surface);
}
.cart-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;}
.cart-item-head strong{color:var(--color-footer-head);font-size:1rem;}
.cart-item-remove{background:none;border:none;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--color-footer-text);flex:none;}
.cart-item-summary{font-size:.85rem;color:var(--color-footer-text);margin:.4rem 0;}
.cart-item-price{font-weight:800;color:var(--color-footer-text);font-size:.95rem;}
.cart-footer{padding:1.1rem 1.3rem 1.4rem;border-top:1px solid var(--color-border);}
.cart-note{font-size:.78rem;color:var(--color-footer-text);margin:0 0 .9rem;}

/* Knoepfe im Warenkorb passend zur Fusszeilen-Farbwelt statt im Orange der Seite:
   gefuellt im Markenbraun, der zweite nur mit Kontur. */
.cart-footer .btn-primary{background:var(--color-nav-bg);color:var(--color-nav-text);box-shadow:none;}
.cart-footer .btn-primary:hover{background:var(--color-footer-head);color:var(--color-nav-text);transform:translateY(-2px);box-shadow:none;}
.cart-footer .btn-ghost{background:transparent;color:var(--color-footer-text);border-color:var(--color-footer-text);}
.cart-footer .btn-ghost:hover{background:var(--color-surface);color:var(--color-footer-text);border-color:var(--color-footer-text);}
.lfx-wc-form{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cart-toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:#2B1710;color:#fff;padding:.8em 1.4em;border-radius:999px;
  font-family:var(--font-body);font-size:.85rem;font-weight:700;z-index:9999;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .2s ease;
}
.cart-toast.show{opacity:1;}

/* ============ Configurator animations ============ */
@keyframes panel-enter{
  from{opacity:0;transform:translateY(16px) scale(.99);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes chip-pop{
  0%{transform:scale(.85);opacity:0;}
  60%{transform:scale(1.05);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.block-head{animation:fade-up .5s var(--ease-soft) both;}
.color-group{animation:fade-up .5s var(--ease-soft) both;}
.color-group:nth-child(2){animation-delay:.08s;}
.color-group:nth-child(3){animation-delay:.16s;}


/* ============================================================================
 * Produktseiten (v1.43.0, Wuensche vom 12.09.2026)
 * ========================================================================= */

/* 2) Schriftfarben wie auf der Startseite: Ueberschriften #7A2415, Text schwarz. Vorher war
      Fliesstext auf den Produktseiten graubraun (--color-text-muted) und der Preis orange. */
body.single-product main{--color-text:#000000;--color-text-muted:#000000;color:#000000;}
body.single-product main .product-price,
body.single-product main .product-card .price,
body.single-product main .product-card .go{color:var(--color-heading);}

/* 3) Das Menueband klebt oben und laeuft links in eine Schraege aus, die bis zu --nav-skirt
      ueber den Inhalt ragt. Ohne diesen Abstand lagen die obere linke Ecke des Produktfotos und
      der Pfad "Start / Sortiment / ..." darunter verborgen. --nav-skirt ist je Bildschirmgroesse
      passend gesetzt (Desktop 130 px, kleiner auf Tablet/Handy). */
body.single-product main#top{padding-top:var(--nav-skirt);}

/* 4) Die zwei Kauf-Flaechen: gleiche Form und Groesse, Farben aus dem Menueband --
      "Jetzt gestalten" dunkelbraun mit cremefarbener Schrift, "Lieber persoenlich bestellen?"
      umgekehrt. Nebeneinander, auf dem Handy untereinander. */
.lfx-kaufaktionen{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.8rem;max-width:560px;margin-top:.4rem;}
.lfx-kaufaktionen--einzeln{grid-template-columns:1fr;max-width:280px;margin-top:1rem;}
@media (max-width:520px){.lfx-kaufaktionen{grid-template-columns:1fr;}}
.lfx-aktion{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;
  min-height:5.2rem;padding:.8rem 1.2rem;box-sizing:border-box;border-radius:var(--radius-lg);
  border:1.5px solid var(--color-nav-bg);font-family:var(--font-body);font-weight:700;line-height:1.3;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.lfx-aktion--gestalten,.lfx-aktion--gestalten:visited{background:var(--color-nav-bg);color:var(--color-nav-text);font-size:1.15rem;}
.lfx-aktion--gestalten:hover,.lfx-aktion--gestalten:focus-visible{background:#6F2E20;color:var(--color-nav-text);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.lfx-aktion--persoenlich{background:var(--color-nav-text);color:var(--color-nav-bg);}
.lfx-aktion-text{font-size:.95rem;}
.lfx-aktion-icons{display:flex;gap:.8rem;}
.lfx-aktion-icons a,.lfx-aktion-icons a:visited{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--color-nav-bg);transition:background-color .15s ease, transform .15s ease;}
.lfx-aktion-icons a:hover,.lfx-aktion-icons a:focus-visible{background:rgba(137,59,41,.12);transform:translateY(-1px);}
.lfx-aktion-icons svg{width:26px;height:26px;display:block;}

/* 6) Box-Karte bei "Passend dazu" */
.lfx-box-label{align-self:flex-start;margin-top:.7rem;padding:.15rem .65rem;border-radius:999px;background:var(--color-nav-bg);color:var(--color-nav-text);font-size:.75rem;font-weight:700;}
.lfx-box-karte h3{margin-top:.35rem;}

/* ============================================================================
 * Produktseiten (v1.44.0, Wuensche vom 12.09.2026)
 * ========================================================================= */

/* 2) Pfad "Start / Sortiment / ..." leuchtet beim Darueberfahren cremefarben -- wie die Titel der
      Produktkacheln auf der Startseite -- statt orange. */
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--color-bg-alt);}

/* 4) Konfiguratoren in den Farben der Startseite / des Menuebands: Dunkelbraun #893B29 und Creme
      #F5F0E6 statt Orange und Lachs. */
body.single-product .preview-controls input,
body.single-product .preview-controls select{background:var(--color-nav-text);border-color:rgba(137,59,41,.35);color:#000000;}
body.single-product .preview-controls input:focus,
body.single-product .preview-controls select:focus{border-color:var(--color-nav-bg);box-shadow:0 0 0 3px rgba(137,59,41,.18);}
body.single-product .chip-btn{background:var(--color-nav-text);border-color:rgba(137,59,41,.35);color:var(--color-nav-bg);}
body.single-product .chip-btn:hover{border-color:var(--color-nav-bg);}
body.single-product .chip-btn[aria-pressed="true"]{background:var(--color-nav-bg);border-color:var(--color-nav-bg);color:var(--color-nav-text);box-shadow:none;}
/* Holz ist immer dabei: sichtbar ausgewaehlt, aber nicht abwaehlbar */
body.single-product .chip-btn:disabled{cursor:default;transform:none;opacity:1;}
body.single-product .swatch-btn[aria-pressed="true"] .swatch-dot{box-shadow:0 0 0 2px var(--color-nav-text),0 0 0 4px var(--color-nav-bg),0 2px 8px rgba(137,59,41,.25);}
body.single-product .swatch-btn[aria-pressed="true"] .swatch-label{color:var(--color-nav-bg);}
body.single-product .motif-chip{background:var(--color-nav-text);border-color:rgba(137,59,41,.35);color:var(--color-nav-bg);}
body.single-product .motif-chip--primary{border-color:var(--color-nav-bg);background:var(--color-nav-text);box-shadow:none;}
body.single-product .motif-chip strong{color:var(--color-nav-bg);}
body.single-product .motif-chip-material{font-weight:400;opacity:.8;}
body.single-product .motif-chip-remove{background:rgba(137,59,41,.15);color:var(--color-nav-bg);}
body.single-product .motif-chip-remove:hover{background:var(--color-nav-bg);color:var(--color-nav-text);}
body.single-product #gestalten .btn-primary{background:var(--color-nav-bg);color:var(--color-nav-text);box-shadow:none;}
body.single-product #gestalten .btn-primary:hover{background:#6F2E20;color:var(--color-nav-text);box-shadow:var(--shadow-soft);}
body.single-product #gestalten .btn-ghost{background:var(--color-nav-text);color:var(--color-nav-bg);border-color:var(--color-nav-bg);}
body.single-product #gestalten .btn-ghost:hover{background:#EDE4D3;border-color:var(--color-nav-bg);}
body.single-product .preview-stage{background:radial-gradient(circle at 50% 35%, #FFFFFF, var(--color-nav-text));}

/* 5) Warenkorb-Schublade: unter der schwarzen WordPress-Leiste (nur fuer Eingeloggte sichtbar)
      beginnen, sonst verschwindet der Kopf "Dein Warenkorb" dahinter. */
body.admin-bar .cart-panel{top:32px;}
@media screen and (max-width:782px){body.admin-bar .cart-panel{top:46px;}}
/* Inhalt = echter WooCommerce-Warenkorb */
.lfx-wc-minicart-inhalt ul.woocommerce-mini-cart{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;}
.lfx-wc-minicart-inhalt li.woocommerce-mini-cart-item{position:relative;padding:.9rem 2.2rem .9rem .9rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.92rem;color:#000000;overflow:hidden;}
.lfx-wc-minicart-inhalt li.woocommerce-mini-cart-item img{width:58px;height:58px;object-fit:cover;border-radius:10px;float:left;margin:0 .75rem .3rem 0;}
.lfx-wc-minicart-inhalt li.woocommerce-mini-cart-item a:not(.remove){color:var(--color-heading);font-weight:700;text-decoration:none;}
.lfx-wc-minicart-inhalt a.remove{position:absolute;top:.45rem;right:.6rem;font-size:1.35rem;line-height:1;color:var(--color-nav-bg);text-decoration:none;}
.lfx-wc-minicart-inhalt dl.variation{clear:both;margin:.5rem 0 0;font-size:.82rem;}
.lfx-wc-minicart-inhalt dl.variation dt{font-weight:700;margin-top:.2rem;}
.lfx-wc-minicart-inhalt dl.variation dd{margin:0;}
.lfx-wc-minicart-inhalt dl.variation dd p{margin:0;max-width:none;}
.lfx-wc-minicart-inhalt .quantity{display:block;margin-top:.35rem;color:var(--color-heading);font-weight:700;}
.lfx-wc-minicart-inhalt .woocommerce-mini-cart__total{display:flex;justify-content:space-between;gap:1rem;margin:1.2rem 0 .9rem;padding-top:.9rem;border-top:1px solid var(--color-border);font-size:1rem;color:#000000;}
.lfx-wc-minicart-inhalt .woocommerce-mini-cart__buttons{display:grid;gap:.6rem;margin:0;}
.lfx-wc-minicart-inhalt .woocommerce-mini-cart__buttons a{display:block;text-align:center;padding:.85rem 1rem;border-radius:var(--radius-lg);font-weight:700;text-decoration:none;border:1.5px solid var(--color-nav-bg);background:var(--color-nav-text);color:var(--color-nav-bg);}
.lfx-wc-minicart-inhalt .woocommerce-mini-cart__buttons a.checkout{background:var(--color-nav-bg);color:var(--color-nav-text);}
.lfx-wc-minicart-inhalt .woocommerce-mini-cart__empty-message{color:#000000;font-size:.95rem;}

/* 11) Box-Gestaltung (kleine/grosse Geschenkbox) */
.lfx-box-gestalten{padding-top:0;}
.lfx-box-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.8rem;align-items:start;margin-top:1.4rem;}
@media (max-width:860px){.lfx-box-raster{grid-template-columns:1fr;}}
.lfx-box-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(1.2rem,3vw,2rem);box-shadow:var(--shadow-soft);}
.lfx-box-form .lfx-aktion{min-height:3.4rem;width:100%;font-size:1.1rem;cursor:pointer;}
.lfx-box-ablauf{background:var(--color-nav-text);border:1.5px solid var(--color-nav-bg);border-radius:var(--radius-lg);padding:clamp(1.2rem,3vw,1.8rem);color:#000000;}
.lfx-box-ablauf h3{font-size:1.3rem;margin-bottom:.8rem;}
.lfx-box-ablauf ol{margin:0;padding-left:1.2rem;display:grid;gap:.8rem;}
.lfx-box-ablauf li strong{display:block;color:var(--color-heading);}

/* 13) Produktsicherheit: groessere Schrift, Text ueber die volle Kastenbreite. Vorher begrenzte
       die allgemeine Absatzregel (p{max-width:60ch}) die Zeilen auf die linke Haelfte. */
.lfx-produktsicherheit{font-size:1rem;line-height:1.6;color:#000000;}
.lfx-produktsicherheit p,.lfx-produktsicherheit li{max-width:none;}
.lfx-produktsicherheit h2,.lfx-produktsicherheit h3,.lfx-produktsicherheit h4{font-size:1.1rem;}
.lfx-produktsicherheit ul{margin:.3rem 0 .9rem;padding-left:1.3rem;}
.lfx-produktsicherheit li{margin:.3rem 0;}

/* ============================================================================
 * Produktseiten, Runde "Allgemein" (v1.46.0, 12.09.2026)
 * ========================================================================= */

/* 1.1 Text unter dem Preis: der Kacheltext der Startseite, groesser und schwarz.
   1.2 Darunter Noemis Stichpunkte als Liste mit kleinen Icons (Schild, Haken, Kreuz) -- wie in
       der frueheren Stichpunktliste. Beides kommt aus der WooCommerce-Kurzbeschreibung (<p> + <ul>),
       ist also dort bearbeitbar. */
body.single-product .product-lede p{font-size:clamp(1.15rem,1.05rem + .45vw,1.35rem);line-height:1.5;color:#000000;}
body.single-product .product-lede ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.6rem;}
body.single-product .product-lede li{position:relative;padding-left:1.9em;font-size:clamp(1.02rem,.97rem + .25vw,1.14rem);line-height:1.45;color:#000000;}
body.single-product .product-lede li::before{
  content:"";position:absolute;left:0;top:.18em;width:1.2em;height:1.2em;background:var(--color-nav-bg);
  -webkit-mask:var(--lfx-icon) center/contain no-repeat;mask:var(--lfx-icon) center/contain no-repeat;
}
body.single-product .product-lede li:nth-child(3n+1){--lfx-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22%3E%3Cpath d=%22M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8.5 12l2.5 2.5 4.5-5%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");}
body.single-product .product-lede li:nth-child(3n+2){--lfx-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22%3E%3Cpath d=%22M4 12l5 5L20 6%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");}
body.single-product .product-lede li:nth-child(3n){--lfx-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22%3E%3Cpath d=%22M12 3v18M3 12h18%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22 stroke-width=%222%22/%3E%3C/svg%3E");}

/* 1.3 (v1.66.0) Einheitliche Kurz-Sicherheitshinweise auf allen Produktseiten: eigene Icons je
       Punkt (Schild = geprueft, Lupe = vor Gebrauch pruefen, Info = Hinweise weiter unten). */
body.single-product .product-lede li.lfx-sk--geprueft{--lfx-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22%3E%3Cpath d=%22M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8.5 12l2.5 2.5 4.5-5%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");}
body.single-product .product-lede li.lfx-sk--kontrolle{--lfx-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22%3E%3Ccircle cx=%2210.5%22 cy=%2210.5%22 r=%226.5%22 stroke-width=%222.2%22/%3E%3Cpath d=%22M15.5 15.5L21 21%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");}
body.single-product .product-lede li.lfx-sk--hinweise{--lfx-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22 stroke-width=%222%22/%3E%3Cpath d=%22M12 11v6%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2212%22 cy=%227.6%22 r=%221.3%22 fill=%22black%22 stroke=%22none%22/%3E%3C/svg%3E");}

/* 1.4 "Jetzt gestalten" groesser */
.lfx-aktion--gestalten,.lfx-aktion--gestalten:visited{font-size:1.4rem;}
.lfx-box-form .lfx-aktion{font-size:1.25rem;}
/* 1.5 "Lieber persoenlich bestellen?" / "Dann schreib mir einfach." in zwei Zeilen, groessere
       Schrift -- Symbole und Abstaende etwas knapper, damit der Knopf nicht hoeher wird. */
.lfx-aktion-text{display:flex;flex-direction:column;font-size:1.08rem;line-height:1.25;}
.lfx-aktion-text span{white-space:nowrap;}
@media (max-width:380px){.lfx-aktion-text span{white-space:normal;}}
.lfx-aktion--persoenlich{gap:.3rem;padding-left:.8rem;padding-right:.8rem;}
.lfx-aktion-icons a,.lfx-aktion-icons a:visited{width:34px;height:34px;}
.lfx-aktion-icons svg{width:24px;height:24px;}

/* 1.6 Geschenkbox-Knoepfe in der Ausfuehrungsauswahl: sehen aus wie die Ausfuehrungen, fuehren
       aber auf die Seite der Box (Pfeil statt Auswahlkreis). */
a.lfx-ausfuehrung-link,a.lfx-ausfuehrung-link:visited{color:var(--color-nav-bg);text-decoration:none;}
a.lfx-ausfuehrung-link::after{content:"→";margin-left:.1rem;}
a.lfx-ausfuehrung-link:hover,a.lfx-ausfuehrung-link:focus-visible{border-color:var(--color-nav-bg);background:var(--color-nav-text);}
.lfx-ausfuehrung-option{font-size:1rem;}
.lfx-ausfuehrung legend{font-size:1rem;}

/* 1.7 Trennstreifen wie auf der Startseite zwischen Produkten und Boxen: 20 px cremefarben
       ueber die ganze Breite statt einer duennen Linie. */
body.single-product .crosssell,
body.single-product .lfx-gestalten,
body.single-product .lfx-box-gestalten,
body.single-product .spec-section{border-top:20px solid var(--color-nav-text);}
body.single-product .lfx-box-gestalten{padding-top:clamp(3.2rem,7vw,5.5rem);}

/* 1.8 Schwarze Schrift auf allen Produktseiten groesser -- sie wirkte vor allem am Desktop klein */
body.single-product .breadcrumb{font-size:.98rem;}
body.single-product .lfx-preisangaben{font-size:.95rem;}
body.single-product .block-head p{font-size:clamp(1.08rem,1rem + .4vw,1.25rem);line-height:1.55;}
body.single-product .product-card h3{font-size:1.18rem;}
body.single-product .product-card p{font-size:1.02rem;line-height:1.5;}
body.single-product .product-card .price{font-size:1rem;}
body.single-product .spec-card h3{font-size:1.18rem;}
body.single-product .spec-card p,body.single-product .spec-card ul{font-size:clamp(1rem,.96rem + .25vw,1.1rem);line-height:1.55;}
body.single-product .preview-controls label{font-size:.98rem;}
body.single-product .preview-controls .field-hint,body.single-product .field-hint{font-size:.86rem;}
body.single-product .preview-controls input,body.single-product .preview-controls select{font-size:1.02rem;}
body.single-product .color-group-label{font-size:.98rem;}
body.single-product .color-group-hint{font-size:.84rem;}
body.single-product .swatch-label{font-size:.8rem;}
body.single-product .chip-btn{font-size:.92rem;}
body.single-product .motif-chip{font-size:.9rem;}
body.single-product .process-note{font-size:1rem;}
body.single-product .lfx-produktsicherheit{font-size:1.06rem;}
body.single-product .lfx-box-ablauf{font-size:1.06rem;}

/* 1.10 "Farben, Materialien & Details" in einer Zeile (auf schmalen Handys darf es umbrechen) */
@media (min-width:600px){body.single-product .spec-section .block-head h2{white-space:nowrap;}}

/* ============================================================================
 * v1.47.0 (12.09.2026)
 * ========================================================================= */

/* 1) Auswahl der Ausfuehrung / Box / Variante in den Farben der Startseite: cremefarbener
      Grund, schwarze Schrift, alles was vorher orange war jetzt dunkelbraun. */
.lfx-ausfuehrung-option,a.lfx-ausfuehrung-link,a.lfx-ausfuehrung-link:visited{background:var(--color-nav-text);border-color:rgba(137,59,41,.35);color:#000000;}
.lfx-ausfuehrung-option input{accent-color:var(--color-nav-bg);}
.lfx-ausfuehrung-option:has(input:checked){border-color:var(--color-nav-bg);background:var(--color-nav-text);box-shadow:0 0 0 2px rgba(137,59,41,.18);}
.lfx-ausfuehrung-option:has(input:focus-visible){outline-color:var(--color-nav-bg);}
.lfx-ausfuehrung-option:hover,a.lfx-ausfuehrung-link:hover{border-color:var(--color-nav-bg);}
.lfx-ausfuehrung-preis{color:#000000;}
a.lfx-ausfuehrung-link::after{color:var(--color-nav-bg);}
/* Varianten-Auswahl innerhalb der Konfiguratoren (z. B. Beisskette/Beissring) */
body.single-product #preview-variant{background:var(--color-nav-text);color:#000000;}

/* 2) Neuer Ketten-Konfigurator (assets/js/lfx-konfigurator.js) -- Pilot Schnullerkette */
.lfx-konf{margin-top:1.4rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:clamp(1rem,2.6vw,1.9rem);}
.lfx-konf-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem 1.6rem;flex-wrap:wrap;}
.lfx-konf-titel{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.lfx-konf-titel strong{font-family:var(--font-display);font-size:1.4rem;color:var(--color-heading);font-weight:400;}
.lfx-konf-neu{appearance:none;cursor:pointer;font:inherit;font-size:.95rem;font-weight:700;padding:.45rem 1rem;border-radius:999px;border:1.5px solid var(--color-nav-bg);background:var(--color-nav-text);color:var(--color-nav-bg);}
.lfx-konf-neu:hover{background:#EDE4D3;}
.lfx-konf-preis{display:grid;justify-items:end;gap:.2rem;min-width:min(100%,250px);padding:.8rem 1rem;border-radius:var(--radius-md);background:var(--color-nav-text);border:1.5px solid var(--color-nav-bg);}
.lfx-konf-summe{font-family:var(--font-display);font-size:2rem;line-height:1.1;color:var(--color-heading);}
.lfx-konf-zusatz{font-size:.9rem;color:#000000;min-height:0;}
.lfx-konf-lieferzeit,.lfx-konf-lieferzeit p{font-size:.9rem;color:#000000;margin:0;max-width:none;text-align:right;}
.lfx-konf-warenkorb{margin-top:.5rem;width:100%;min-height:3.2rem;font-size:1.2rem;cursor:pointer;}
.lfx-konf-buehne{margin-top:1.1rem;border-radius:var(--radius-md);overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#FFFFFF 0%,#FBF8F2 45%,#EFE6D8 100%);box-shadow:inset 0 2px 10px rgba(43,23,16,.05);}
.lfx-konf-canvas{display:block;}
.lfx-konf-buehne{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;position:relative;}
/* Hinweis nur, wenn die Kette breiter als das Fenster ist (Handy) */
.lfx-konf-buehne--wischen::after{content:"← wischen →";position:sticky;left:0;display:block;width:100%;text-align:center;font-size:.85rem;color:var(--color-nav-bg);padding:0 0 .5rem;}
.lfx-konf-hinweis{font-size:.92rem;color:#000000;margin:.55rem 0 0;max-width:none;}
.lfx-konf-tabs{display:flex;gap:.4rem;margin-top:1.5rem;overflow-x:auto;border-bottom:2px solid var(--color-nav-bg);scrollbar-width:thin;}
.lfx-konf-tab{appearance:none;cursor:pointer;flex:none;font:inherit;font-weight:700;font-size:1.02rem;padding:.6rem 1.2rem;border:1.5px solid rgba(137,59,41,.35);border-bottom:none;border-radius:14px 14px 0 0;background:var(--color-nav-text);color:var(--color-nav-bg);}
.lfx-konf-tab[aria-selected="true"]{background:var(--color-nav-bg);border-color:var(--color-nav-bg);color:var(--color-nav-text);}
.lfx-konf-panel{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.5rem;padding:1.3rem 0 .3rem;}
.lfx-konf-panel[hidden]{display:none;}
@media (max-width:760px){.lfx-konf-panel{grid-template-columns:1fr;}}
.lfx-konf-seite{display:grid;gap:.6rem;align-content:start;}
.lfx-konf-panel h4{font-family:var(--font-display);font-size:1.05rem;color:var(--color-heading);margin:0;font-weight:400;}
.lfx-konf-tipp{font-size:.88rem;color:#000000;margin:0;max-width:none;}
.lfx-konf-rasterkopf{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.7rem;}
.lfx-konf-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.6rem;}
.lfx-konf-kacheln--breit{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
.lfx-konf-kachel{appearance:none;cursor:pointer;font:inherit;font-size:.86rem;line-height:1.2;color:#000000;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem .3rem .45rem;border:1.5px solid transparent;border-radius:14px;background:var(--color-nav-text);transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;text-align:center;}
.lfx-konf-kachel:hover{border-color:rgba(137,59,41,.45);transform:translateY(-2px);}
.lfx-konf-kachel[aria-pressed="true"]{border-color:var(--color-nav-bg);box-shadow:0 0 0 2px rgba(137,59,41,.2);}
.lfx-konf-kachel:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.lfx-konf-kachel canvas{display:block;}
.lfx-konf-auswahl{margin-bottom:1rem;display:grid;gap:.5rem;}
.lfx-konf-namensfeld{display:grid;gap:.4rem;font-size:1rem;color:var(--color-heading);}
.lfx-konf-namensfeld input{font:inherit;font-size:1.15rem;padding:.7rem .9rem;border-radius:14px;border:1.5px solid rgba(137,59,41,.35);background:var(--color-nav-text);color:#000000;max-width:360px;}
.lfx-konf-namensfeld input:focus{outline:none;border-color:var(--color-nav-bg);box-shadow:0 0 0 3px rgba(137,59,41,.18);}
.lfx-konf .chip-btn{background:var(--color-nav-text);border-color:rgba(137,59,41,.35);color:var(--color-nav-bg);}
.lfx-konf .chip-btn[aria-pressed="true"]{background:var(--color-nav-bg);border-color:var(--color-nav-bg);color:var(--color-nav-text);}
.lfx-konf .chip-btn:disabled{cursor:default;opacity:1;}
.lfx-konf .motif-chip{background:var(--color-nav-text);border-color:rgba(137,59,41,.35);color:var(--color-nav-bg);}
.lfx-konf-einleitung{flex:1 1 320px;display:grid;gap:.6rem;align-content:start;max-width:560px;}
.lfx-konf-einleitung .lfx-konf-tipp{font-size:1.02rem;line-height:1.5;}
/* ==========================================================================
   v1.48.0
   ========================================================================== */
/* 1) Ausfuehrung: Auswahlmoeglichkeiten untereinander (wie in der Handy-Ansicht) */
.lfx-ausfuehrung{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;max-width:480px;}
.lfx-ausfuehrung-option,a.lfx-ausfuehrung-link{display:flex;align-items:center;gap:.6rem;width:100%;box-sizing:border-box;border-radius:14px;padding:.7rem 1rem;}
.lfx-ausfuehrung-name{flex:1 1 auto;}
.lfx-ausfuehrung-preis{flex:none;margin-left:auto;text-align:right;}
/* 2) Konfigurator fuer alle Produkte: Reiter-Inhalte in einem Behaelter */
.lfx-konf-panels{min-width:0;}
.lfx-konf-abstand{margin-top:1.2rem !important;}

/* ==========================================================================
   v1.49.0
   ========================================================================== */
/* Konfigurator: Messanleitung (Handykette) und Pflichtfeld-Hinweis */
.lfx-konf-anleitung{margin:0;padding-left:1.2rem;display:grid;gap:.45rem;font-size:.95rem;color:#000000;}
.lfx-konf-anleitung li{padding-left:.2rem;}
.lfx-konf-fehler{margin:.5rem 0 0;font-size:.95rem;font-weight:700;color:#A3261B;max-width:none;}
.lfx-konf-namensfeld input[type="number"]{max-width:180px;}
/* Seite "Über mich": Bild oben links, Text fliesst darum herum ueber die ganze Breite.
   In Elementor der Sektion die CSS-Klasse lfx-textfluss geben (Erweitert -> CSS-Klassen). */
.lfx-textfluss .elementor-container,.lfx-textfluss .elementor-row{display:block !important;}
.lfx-textfluss .elementor-column{width:100% !important;max-width:100% !important;display:block !important;}
.lfx-textfluss .elementor-widget-wrap{display:block !important;}
.lfx-textfluss .elementor-widget-image{float:left;width:min(42%,460px) !important;margin:0 2.2rem 1.2rem 0 !important;}
.lfx-textfluss .elementor-widget-image img{width:100% !important;height:auto;display:block;}
.lfx-textfluss .elementor-widget-heading,.lfx-textfluss .elementor-widget-text-editor{width:auto !important;}
.lfx-textfluss p{max-width:none;}
.lfx-textfluss .elementor-widget-wrap::after{content:"";display:table;clear:both;}
@media (max-width:600px){.lfx-textfluss .elementor-widget-image{float:none;width:100% !important;margin:0 0 1.2rem 0 !important;}}
/* Geschenkbox: Ablauf-Kasten unter dem Konfigurator */
.lfx-box-raster--ablauf{display:block;margin-top:1.4rem;}
/* Konfigurator: Foto-Kacheln (grosse Anhaenger der Kinderwagenkette) */
.lfx-konf-kachelbild{display:block;width:64px;height:56px;object-fit:contain;}

/* ==========================================================================
   v1.53.0 -- einheitliche Schriftgroessen auf allen Produktseiten (auch im Konfigurator)
   Stufen: Abschnitts-Ueberschrift (h2, .block-head) | Kasten-Ueberschrift | Karten-/Unter-
   ueberschrift | Fliesstext | kleine Schrift (Kacheln, Chips, Preiszusaetze).
   ========================================================================== */
body.single-product{
  --lfx-s-kasten:1.3rem;
  --lfx-s-karte:1.18rem;
  --lfx-s-text:clamp(1rem,.96rem + .25vw,1.1rem);
  --lfx-s-klein:.95rem;
}
/* Kasten-Ueberschriften */
body.single-product .lfx-konf-titel strong,
body.single-product .lfx-box-ablauf h3,
body.single-product .lfx-produktsicherheit h2{font-size:var(--lfx-s-kasten);}
/* Karten- und Unterueberschriften */
body.single-product .spec-card h3,
body.single-product .product-card h3,
body.single-product .lfx-konf-panel h4,
body.single-product .lfx-produktsicherheit h3,
body.single-product .lfx-produktsicherheit h4,
body.single-product .legal-box h3{font-size:var(--lfx-s-karte);}
/* Fliesstext */
body.single-product .spec-card p,body.single-product .spec-card ul,
body.single-product .product-card p,
body.single-product .lfx-konf-tipp,
body.single-product .lfx-konf-hinweis,
body.single-product .lfx-konf-anleitung,
body.single-product .lfx-konf-fehler,
body.single-product .lfx-konf-namensfeld,
body.single-product .lfx-produktsicherheit,
body.single-product .lfx-box-ablauf,
body.single-product .legal-box p,
body.single-product .lfx-ausfuehrung-option,
body.single-product .lfx-ausfuehrung legend{font-size:var(--lfx-s-text);line-height:1.55;}
/* kleine Schrift */
body.single-product .lfx-konf-kachel,
body.single-product .chip-btn,
body.single-product .motif-chip,
body.single-product .lfx-konf-zusatz,
body.single-product .lfx-konf-lieferzeit,body.single-product .lfx-konf-lieferzeit p,
body.single-product .lfx-preisangaben,
body.single-product .lfx-ausfuehrung-preis,
body.single-product .breadcrumb{font-size:var(--lfx-s-klein);}
body.single-product .lfx-konf-tab{font-size:1.05rem;}
body.single-product .lfx-konf-namensfeld input{font-size:1.15rem;}
body.single-product .lfx-konf-kachel{line-height:1.25;}
/* etwas mehr Platz fuer die groessere Schrift in der linken Spalte des Konfigurators */
.lfx-konf-panel{grid-template-columns:250px minmax(0,1fr);}
@media (max-width:760px){.lfx-konf-panel{grid-template-columns:1fr;}}

/* ==========================================================================
   v1.55.0 -- Widerrufsfunktion (Widerrufsbutton im Footer + Formular /vertrag-widerrufen/)
   ========================================================================== */
.footer-widerruf{display:inline-block;margin-top:.35rem;padding:.35rem .9rem;border-radius:999px;border:1.5px solid currentColor;font-weight:700;text-decoration:none;}
.footer-widerruf:hover,.footer-widerruf:focus-visible{background:var(--color-nav-text);color:var(--color-nav-bg);border-color:var(--color-nav-text);}
.lfx-widerruf h3{font-size:1.3rem;margin:1.6rem 0 .8rem;color:var(--color-heading);}
.lfx-widerruf > p{max-width:none;margin:0 0 .8rem;}
.lfx-widerruf-schritt[hidden]{display:none;}
.lfx-widerruf-zusammenfassung{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1.2rem;margin:0 0 1.4rem;padding:1rem 1.2rem;border-radius:var(--radius-md);background:var(--color-nav-text);border:1.5px solid rgba(137,59,41,.35);}
.lfx-widerruf-zusammenfassung dt{font-weight:700;color:var(--color-heading);}
.lfx-widerruf-zusammenfassung dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;}
@media (max-width:520px){.lfx-widerruf-zusammenfassung{grid-template-columns:1fr;}.lfx-widerruf-zusammenfassung dd{margin-bottom:.4rem;}}
.lfx-widerruf-schritt .btn + .btn{margin-left:.6rem;}
.lfx-widerruf .btn-primary{background:var(--color-nav-bg);color:var(--color-nav-text);box-shadow:none;}
.lfx-widerruf .btn-primary:hover{background:#6F2E20;}
.lfx-widerruf .btn-ghost{background:var(--color-nav-text);color:var(--color-nav-bg);border-color:var(--color-nav-bg);}
/* Kasse: Kontaktweg (WhatsApp oder E-Mail) */
.lfx-kontaktweg label.radio,.lfx-kontaktweg .woocommerce-input-wrapper label{display:inline;font-weight:400;}
.lfx-kontaktweg .woocommerce-input-wrapper{display:grid;gap:.35rem;}
.lfx-kontaktweg .description{display:block;margin-top:.4rem;font-size:.9rem;}
/* Motive: Farbwahl der Holz-Motivscheibe */
.lfx-konf-farbpunkte{display:flex;flex-wrap:wrap;gap:.35rem;}
.lfx-konf-farbpunkt{appearance:none;width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid rgba(0,0,0,.12);cursor:pointer;padding:0;box-shadow:inset 0 -2px 4px rgba(0,0,0,.15);}
.lfx-konf-farbpunkt[aria-pressed="true"]{outline:3px solid var(--color-nav-bg);outline-offset:2px;}
.lfx-konf-farbpunkt--original{background:conic-gradient(#e6b3c8,#f3d37a,#9fd5c0,#8fb6e3,#c6a6df,#e6b3c8);}
.lfx-konf-kacheln--motive{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));}

/* ==========================================================================
   v1.58.0 -- Warenkorb, Kasse und Shop-Hinweise im Look der Seite
   Gedacht fuer die klassischen Seiten mit [woocommerce_cart] / [woocommerce_checkout];
   die Grundregeln (Karten, Knoepfe, Felder) greifen auch bei den Block-Varianten.
   ========================================================================== */
/* Abstand unter der Schraege des Menuebands (wie auf den Produktseiten), sonst liegt der
   Seitentitel "Warenkorb"/"Kasse" darunter verborgen. */
body.woocommerce-cart main#top,body.woocommerce-checkout main#top,body.woocommerce-account main#top{padding-top:var(--nav-skirt);}
body.woocommerce-cart main#top > section.block,body.woocommerce-checkout main#top > section.block,body.woocommerce-account main#top > section.block{padding-top:clamp(1.2rem,3vw,2rem);}
body.woocommerce-cart .entry-title,body.woocommerce-checkout .entry-title,body.woocommerce-account .entry-title{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1.6rem;}
body.woocommerce-cart main p,body.woocommerce-checkout main p,body.woocommerce-account main p{max-width:none;}

/* Hinweise (hinzugefuegt, Fehler, Infos) */
.lfx-shop-hinweise:empty{display:none;}
.lfx-shop-hinweise .woocommerce-notices-wrapper:empty{display:none;}
.lfx-shop-hinweise{padding-top:.8rem;}
.woocommerce-page .woocommerce-message,.woocommerce-page .woocommerce-info,.woocommerce-page .woocommerce-error,
.lfx-shop-hinweise .woocommerce-message,.lfx-shop-hinweise .woocommerce-info,.lfx-shop-hinweise .woocommerce-error{
  list-style:none;margin:0 0 1.4rem;padding:1rem 1.2rem 1rem 3rem;border-radius:var(--radius-md);
  background:var(--color-bg-alt);color:var(--color-text);border:1.5px solid var(--color-border);border-top-width:1.5px;
  font-family:var(--font-body);font-size:1rem;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
}
.woocommerce-page .woocommerce-message,.lfx-shop-hinweise .woocommerce-message{border-color:#9CC9A8;background:#EEF6F0;}
.woocommerce-page .woocommerce-error,.lfx-shop-hinweise .woocommerce-error{border-color:var(--color-accent);background:var(--color-bg-accent-soft);display:block;}
.woocommerce-page .woocommerce-message::after,.woocommerce-page .woocommerce-info::after,
.lfx-shop-hinweise .woocommerce-message::after,.lfx-shop-hinweise .woocommerce-info::after{display:none;}
.woocommerce-page .woocommerce-message::before,.woocommerce-page .woocommerce-info::before,.woocommerce-page .woocommerce-error::before,
.lfx-shop-hinweise .woocommerce-message::before,.lfx-shop-hinweise .woocommerce-info::before,.lfx-shop-hinweise .woocommerce-error::before{color:var(--color-nav-bg);top:1.05rem;left:1.1rem;}
.woocommerce-page .woocommerce-message .button,.woocommerce-page .woocommerce-info .button,
.lfx-shop-hinweise .woocommerce-message .button,.lfx-shop-hinweise .woocommerce-info .button{order:2;margin-left:auto;float:none;}

/* Knoepfe: wie die Kauf-Flaechen der Produktseite (Markenbraun, rund) */
.woocommerce-page .woocommerce a.button,.woocommerce-page .woocommerce button.button,.woocommerce-page .woocommerce input.button,
.woocommerce-page .woocommerce #respond input#submit,.lfx-shop-hinweise a.button{
  font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1.2;
  padding:.8em 1.5em;border-radius:999px;border:1.5px solid var(--color-nav-bg);
  background:var(--color-nav-text);color:var(--color-nav-bg);text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.woocommerce-page .woocommerce a.button:hover,.woocommerce-page .woocommerce button.button:hover,.woocommerce-page .woocommerce input.button:hover,.lfx-shop-hinweise a.button:hover{
  background:#EDE4D3;color:var(--color-nav-bg);transform:translateY(-1px);
}
.woocommerce-page .woocommerce a.button.alt,.woocommerce-page .woocommerce button.button.alt,.woocommerce-page .woocommerce input.button.alt,
.woocommerce-page .woocommerce #place_order,.woocommerce-page .woocommerce .checkout-button{
  background:var(--color-nav-bg);color:var(--color-nav-text);border-color:var(--color-nav-bg);
}
.woocommerce-page .woocommerce a.button.alt:hover,.woocommerce-page .woocommerce button.button.alt:hover,
.woocommerce-page .woocommerce #place_order:hover,.woocommerce-page .woocommerce .checkout-button:hover{background:#6F2E20;color:var(--color-nav-text);}
.woocommerce-page .woocommerce button.button:disabled,.woocommerce-page .woocommerce button.button:disabled[disabled]{
  padding:.8em 1.5em;opacity:.55;color:var(--color-nav-bg);background:var(--color-nav-text);
}
.woocommerce-page .woocommerce .wc-proceed-to-checkout a.checkout-button{font-size:1.15rem;padding:1em 1.4em;border-radius:var(--radius-lg);}
.woocommerce-page .woocommerce #place_order{width:100%;font-size:1.15rem;padding:1em 1.4em;border-radius:var(--radius-lg);float:none;}

/* Felder */
.woocommerce-page .woocommerce form .form-row input.input-text,.woocommerce-page .woocommerce form .form-row textarea,
.woocommerce-page .woocommerce form .form-row select,.woocommerce-page .woocommerce .quantity .qty,
.woocommerce-page .woocommerce #coupon_code,.woocommerce-page .select2-container .select2-selection--single{
  font-family:var(--font-body);font-size:1rem;color:var(--color-text);
  padding:.65rem .85rem;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-sizing:border-box;
}
.woocommerce-page .select2-container .select2-selection--single{height:auto;min-height:2.9rem;}
.woocommerce-page .woocommerce .quantity .qty{width:4.5rem;padding:.5rem;text-align:center;}
.woocommerce-page .woocommerce form .form-row input.input-text:focus,.woocommerce-page .woocommerce form .form-row textarea:focus,
.woocommerce-page .woocommerce form .form-row select:focus,.woocommerce-page .woocommerce .quantity .qty:focus,.woocommerce-page .woocommerce #coupon_code:focus{
  outline:none;border-color:var(--color-accent-strong);box-shadow:0 0 0 3px rgba(240,107,71,.18);
}
.woocommerce-page .woocommerce form .form-row label{font-family:var(--font-body);color:var(--color-heading);font-size:1rem;line-height:1.4;}
.woocommerce-page .woocommerce form .form-row .required{color:var(--color-accent-strong);text-decoration:none;}
.woocommerce-page .woocommerce form .form-row textarea{min-height:8rem;}
.woocommerce-page .woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--color-accent-strong);}

/* Warenkorb: Positionen als helle Karte */
.woocommerce-page .woocommerce table.shop_table{
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);
  border-collapse:separate;border-spacing:0;overflow:hidden;margin:0 0 1.6rem;font-size:1rem;color:var(--color-text);
}
.woocommerce-page .woocommerce table.shop_table th{text-align:left;font-family:var(--font-display);color:var(--color-heading);font-weight:600;font-size:1.05rem;padding:1rem 1.1rem;background:var(--color-bg-alt);}
.woocommerce-page .woocommerce table.shop_table td{padding:1rem 1.1rem;border-top:1px solid var(--color-border);vertical-align:middle;}
.woocommerce-page .woocommerce table.shop_table td.product-name a{color:var(--color-heading);font-weight:700;font-size:1.1rem;}
.woocommerce-page .woocommerce table.shop_table td.product-name a:hover{color:var(--color-accent-strong);}
.woocommerce-page .woocommerce table.cart img{width:84px;border-radius:var(--radius-sm);}
.woocommerce-page .woocommerce table.shop_table .product-price,.woocommerce-page .woocommerce table.shop_table .product-subtotal{font-weight:700;color:var(--color-heading);white-space:nowrap;}
/* .product-price ist im Theme auch der grosse Preis der Produktseite (display:block) -- in der
   Tabelle zuruecksetzen. Unter 769 px stellt WooCommerce die Zellen selbst untereinander. */
.woocommerce-page .woocommerce table.shop_table .product-price{font-family:var(--font-body);font-size:1rem;margin:0;}
@media (min-width:769px){.woocommerce-page .woocommerce table.shop_table .product-price{display:table-cell;}}
.woocommerce-page .woocommerce a.remove{color:var(--color-nav-bg)!important;font-size:1.6rem;width:1.6em;height:1.6em;line-height:1.5em;font-weight:400;}
.woocommerce-page .woocommerce a.remove:hover{background:var(--color-nav-bg);color:var(--color-nav-text)!important;}
/* "Deine Gestaltung" unter dem Produktnamen */
.woocommerce-page .woocommerce td.product-name dl.variation{margin:.5rem 0 0;font-size:.92rem;color:var(--color-text);}
.woocommerce-page .woocommerce td.product-name dl.variation dt{font-weight:700;color:var(--color-heading);float:none;margin:.3rem 0 0;}
.woocommerce-page .woocommerce td.product-name dl.variation dd{margin:0;padding:0;float:none;}
.woocommerce-page .woocommerce td.product-name dl.variation dd p{margin:0;max-width:60ch;white-space:pre-line;}
.woocommerce-page .woocommerce table.cart td.actions{background:var(--color-bg-alt);}
.woocommerce-page .woocommerce table.cart td.actions .coupon{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.woocommerce-page .woocommerce table.cart td.actions .coupon #coupon_code{width:12rem;margin:0;}

/* Summen */
.woocommerce-page .woocommerce .cart-collaterals .cart_totals{width:min(100%,460px);}
.woocommerce-page .woocommerce .cart_totals h2,.woocommerce-page .woocommerce #order_review_heading,
.woocommerce-page .woocommerce .woocommerce-billing-fields h3,.woocommerce-page .woocommerce .woocommerce-additional-fields h3,
.woocommerce-page .woocommerce .woocommerce-shipping-fields h3{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:0 0 1rem;}
.woocommerce-page .woocommerce .cart_totals table.shop_table th{background:transparent;font-family:var(--font-body);font-weight:700;font-size:1rem;width:40%;}
.woocommerce-page .woocommerce .cart_totals .order-total td,.woocommerce-page .woocommerce .cart_totals .order-total th,
.woocommerce-page .woocommerce table.woocommerce-checkout-review-order-table .order-total td{font-size:1.15rem;color:var(--color-heading);}
.woocommerce-page .woocommerce ul#shipping_method{list-style:none;margin:0;padding:0;}
.woocommerce-page .woocommerce ul#shipping_method li{margin:0 0 .3rem;}
.woocommerce-page .woocommerce .cart_totals table.shop_table tr + tr th,.woocommerce-page .woocommerce #order_review table.shop_table tr + tr th{border-top:1px solid var(--color-border);}
.woocommerce-page .woocommerce .cart_totals table.shop_table tr:first-child td{border-top:none;}
.woocommerce-page .woocommerce .woocommerce-shipping-destination,.woocommerce-page .woocommerce small.includes_tax,
.woocommerce-page .woocommerce .wc-gzd-additional-info,.woocommerce-page .woocommerce .shipping-costs-cart-info{font-size:.9rem;color:var(--color-text-muted);}
.woocommerce-page .woocommerce .cart-empty.woocommerce-info{font-size:1.1rem;}
.woocommerce-page .woocommerce .return-to-shop{margin-top:1rem;}

/* Kasse */
.woocommerce-page .woocommerce form.checkout .col2-set{margin-bottom:1.6rem;}
.woocommerce-page .woocommerce .woocommerce-billing-fields,.woocommerce-page .woocommerce .woocommerce-additional-fields,
.woocommerce-page .woocommerce .woocommerce-shipping-fields,.woocommerce-page .woocommerce #order_review{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.4rem 1.5rem;margin-bottom:1.4rem;
}
.woocommerce-page .woocommerce #order_review table.shop_table{border:none;border-radius:0;margin-bottom:1.2rem;}
.woocommerce-page .woocommerce #order_review table.shop_table th{background:transparent;}
.woocommerce-page .woocommerce #payment{background:var(--color-bg-alt);border-radius:var(--radius-md);}
.woocommerce-page .woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--color-border);padding:1.1rem 1.2rem;}
.woocommerce-page .woocommerce #payment ul.payment_methods li{font-size:1rem;margin-bottom:.4rem;}
.woocommerce-page .woocommerce #payment div.payment_box{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-sm);font-size:.95rem;}
.woocommerce-page .woocommerce #payment div.payment_box::before{border-bottom-color:var(--color-surface);}
.woocommerce-page .woocommerce #payment div.form-row{padding:1.1rem 1.2rem;}
.woocommerce-page .woocommerce .woocommerce-terms-and-conditions-wrapper,.woocommerce-page .woocommerce .wc-gzd-checkbox-placeholder,
.woocommerce-page .woocommerce .legal,.woocommerce-page .woocommerce .checkbox-legal{font-size:.95rem;line-height:1.5;}
.woocommerce-page .woocommerce form .form-row .input-checkbox{width:1.1rem;height:1.1rem;accent-color:var(--color-nav-bg);vertical-align:-.15em;margin-right:.4rem;}
.woocommerce-page .woocommerce input[type="radio"]{accent-color:var(--color-nav-bg);}
.woocommerce-page .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info{font-size:.95rem;}
.woocommerce-page .woocommerce a:not(.button):not(.remove){color:var(--color-nav-bg);text-decoration:underline;text-underline-offset:2px;}
.woocommerce-page .woocommerce td.product-name a{text-decoration:none!important;}
.woocommerce-page .lfx-kontaktweg{background:var(--color-bg-alt);border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-bottom:1.2rem;}
.woocommerce-page .lfx-kontaktweg .description{color:var(--color-text-muted);}
/* Eine Spalte, mittig: Germanized ordnet die Kasse selbst um (Pruefen-Bereich, Checkboxen,
   Bestellknopf) -- ein zweispaltiges Raster wuerde dabei auseinanderfallen. */
.woocommerce-page .woocommerce form.checkout,.woocommerce-page .woocommerce .woocommerce-form-coupon-toggle,
.woocommerce-page .woocommerce form.checkout_coupon{max-width:820px;margin-left:auto;margin-right:auto;}
.woocommerce-page .woocommerce form.checkout .col2-set .col-1,.woocommerce-page .woocommerce form.checkout .col2-set .col-2{float:none;width:auto;}
/* Bestellung erhalten */
.woocommerce-page .woocommerce ul.order_details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.2rem 1.4rem;list-style:none;}
.woocommerce-page .woocommerce ul.order_details li{border-right-color:var(--color-border);font-size:.85rem;color:var(--color-text-muted);}
.woocommerce-page .woocommerce ul.order_details li strong{color:var(--color-heading);font-size:1rem;}
.woocommerce-page .woocommerce .woocommerce-thankyou-order-received{font-size:1.2rem;color:var(--color-heading);}
/* Block-Warenkorb/-Kasse (falls sie doch bleiben): Schrift und Hauptknopf angleichen */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{font-family:var(--font-body);color:var(--color-text);}
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link),.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button{
  background:var(--color-nav-bg);color:var(--color-nav-text);border-radius:var(--radius-lg);font-family:var(--font-body);font-weight:700;
}
/* Motiv gibt es nicht in der gewaehlten Holzfarbe */
.lfx-konf-kachel--nichtda{opacity:.35;filter:grayscale(1);cursor:not-allowed;}
/* Motive: gewaehltes Holzmotiv anklicken -> seine Farben waehlen */
.motif-chip-text{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;}
.motif-chip-text:disabled{cursor:default;}
.motif-chip.is-aktiv{border-color:var(--color-nav-bg);box-shadow:0 0 0 2px rgba(137,59,41,.25);}
.lfx-konf-motivfarbe{margin-top:1rem;padding:.9rem 1rem;border-radius:var(--radius-sm);background:var(--color-bg-alt);}
.lfx-konf-motivfarbe h4{margin:0 0 .6rem;}
.lfx-konf-motivfarbe .lfx-konf-tipp{margin:.5rem 0 0;}

/* ============================================================================
 * Geschenkgutschein (v1.68.0)
 * Mehrfachauswahl im Stil der Ausfuehrungen, eine Summenzeile und EIN Kaufknopf
 * im Seitendesign (vorher stand hier der lila Standardknopf von WooCommerce).
 * ========================================================================= */
.lfx-gutschein-auswahl{max-height:26rem;overflow-y:auto;}
.lfx-gutschein-auswahl legend{margin-bottom:.5rem;}
.lfx-gutschein-mehrfach{font-weight:400;font-size:.85em;color:#000000;}
.lfx-gutschein-auswahl .lfx-ausfuehrung-option{cursor:pointer;}
.lfx-gutschein-auswahl input[type="checkbox"]{accent-color:var(--color-accent-strong);width:1.05rem;height:1.05rem;flex:0 0 auto;}
.lfx-gutschein-auswahl .lfx-ausfuehrung-option:has(input:checked){
  border-color:var(--color-accent-strong);background:var(--color-nav-text);box-shadow:var(--shadow-soft);
}
.lfx-gutschein-summe{margin:.9rem 0 .2rem;font-weight:600;color:#000000;font-size:1.02rem;}
.lfx-gutschein-noscript{margin-top:1rem;}
.lfx-gutschein-noscript-liste{margin:.4rem 0 0;padding-left:1.2rem;}
/* Ausgeblendete Bereiche bleiben ausgeblendet -- die Flex-Regeln der Kaufaktionen haben das
   hidden-Attribut bisher ueberschrieben, wodurch alle Ausfuehrungen gleichzeitig sichtbar waren. */
.lfx-kaufaktionen[hidden],.lfx-option[hidden],.lfx-wc-form[hidden]{display:none !important;}

/* Einwilligung Werbe-Messung (v1.68.8) -- zwei gleichwertige Knoepfe, blockiert die Seite nicht */
.lfx-einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:99999;padding:0 16px 16px;pointer-events:none;}
.lfx-einwilligung[hidden]{display:none !important;}
.lfx-einwilligung__box{pointer-events:auto;max-width:640px;margin:0 auto;background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);border-radius:14px;box-shadow:0 10px 30px rgba(43,23,16,.22);padding:1.1rem 1.25rem;}
.lfx-einwilligung__titel{margin:0 0 .4rem;font-weight:700;color:var(--color-heading);font-size:1.05rem;}
.lfx-einwilligung__text{margin:0 0 .9rem;font-size:.9rem;line-height:1.5;color:#000000;}
.lfx-einwilligung__text a{color:var(--color-heading);text-decoration:underline;}
.lfx-einwilligung__knoepfe{display:flex;gap:.6rem;flex-wrap:wrap;}
.lfx-einwilligung__knopf{flex:1 1 12rem;min-height:44px;padding:.6rem 1rem;border-radius:999px;cursor:pointer;font:inherit;font-weight:600;
  background:var(--color-nav-bg);color:#FFFFFF;border:2px solid var(--color-nav-bg);}
.lfx-einwilligung__knopf:hover,.lfx-einwilligung__knopf:focus-visible{background:var(--color-heading);border-color:var(--color-heading);}

/* Kleine Rueckmeldungen (v1.69.2) -------------------------------------------------- */
/* Warenkorb-Symbol leuchtet kurz auf, wenn etwas hineingelegt wurde */
.cart-trigger.lfx-korb-neu{animation:lfx-korb-puls 1.2s ease-out 1;}
.cart-trigger.lfx-korb-neu .cart-badge{animation:lfx-badge-pop .6s ease-out 1;}
@keyframes lfx-korb-puls{
  0%{transform:scale(1);}
  18%{transform:scale(1.14);}
  36%{transform:scale(1);}
  54%{transform:scale(1.07);}
  100%{transform:scale(1);}
}
@keyframes lfx-badge-pop{
  0%{transform:scale(.6);}
  60%{transform:scale(1.25);}
  100%{transform:scale(1);}
}
/* Schmaler Ladebalken oben, solange die naechste Seite laedt */
.lfx-ladebalken{position:fixed;top:0;left:0;height:3px;width:0;z-index:100000;pointer-events:none;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-strong));
  box-shadow:0 0 8px rgba(217,80,44,.45);transition:width 8s cubic-bezier(.05,.7,.1,1);}
.lfx-ladebalken.laeuft{width:92%;}
@media (prefers-reduced-motion:reduce){
  .cart-trigger.lfx-korb-neu{animation:none;outline:2px solid var(--color-accent-strong);outline-offset:3px;border-radius:8px;}
  .cart-trigger.lfx-korb-neu .cart-badge{animation:none;}
  .lfx-ladebalken{transition:none;}
  .lfx-ladebalken.laeuft{width:100%;opacity:.85;}
}

/* Sanftes Ueberblenden der Konfigurator-Vorschau (v1.69.3) */
.lfx-konf-ueberblend{position:absolute;pointer-events:none;z-index:2;opacity:1;transition:opacity .3s ease-out;}
@media (prefers-reduced-motion:reduce){ .lfx-konf-ueberblend{display:none;} }

/* Barrierefreiheit (v1.70.0) ------------------------------------------------------- */
/* Sprunglink: nur sichtbar, wenn er per Tastatur angesteuert wird */
.lfx-sprunglink{position:absolute;left:-9999px;top:0;z-index:100001;padding:.7rem 1.1rem;border-radius:0 0 8px 0;
  background:var(--color-nav-bg);color:#FFFFFF;font-weight:600;text-decoration:none;}
.lfx-sprunglink:focus{left:0;}
/* Einheitlicher Fokusrahmen fuer alles, was bedienbar ist */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-accent-strong);outline-offset:2px;border-radius:4px;}
/* Galerie: Klick aufs Foto blaettert weiter */
.lfx-galerie--blaetterbar{position:relative;cursor:pointer;}
.lfx-galerie-weiter{position:absolute;right:.6rem;bottom:.6rem;width:44px;height:44px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(43,23,16,.55);color:#FFFFFF;font-size:1.6rem;line-height:1;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);transition:background .2s ease;}
.lfx-galerie-weiter:hover{background:rgba(43,23,16,.78);}
@media (prefers-reduced-motion:reduce){ .lfx-galerie-weiter{transition:none;} }

/* Sicherheitsfrage im Kontaktformular (v1.72.1) */
.lfx-kf-rechnen{max-width:22rem;}
.lfx-kf-rechnen input{max-width:5rem;}

/* ============ EU-Gewaehrleistungslabel (Germanized) ============
   Die Grafik selbst ist vorgeschrieben (Reflex-Blau #003399, EU-Gelb #FFED00) und wird
   nicht umgefaerbt -- geregelt wird hier nur, wie viel Platz sie bekommt.
   Auf der Produktseite sitzt sie unter dem Preis (siehe inc/gewaehrleistung.php),
   auf allen uebrigen Seiten haengt Germanized sie als eigenen Block an das Seitenende. */
.lfx-gewaehrleistung p{margin:0 0 .9rem;color:var(--color-text-muted);font-size:.95rem;}
.lfx-gewaehrleistung .wc-gzd-legal-guarantee-label img,
.wc-gzd-legal-guarantee-footer img{
  width:auto;max-width:150px;height:auto;display:block;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);
}
.lfx-gewaehrleistung a{display:inline-block;}
/* Das angehaengte Label am Seitenende in ein ruhiges Band setzen, statt es frei auf der
   Grundfarbe stehen zu lassen. */
.wc-gzd-legal-guarantee-footer{
  background:var(--color-bg-alt);
  border-top:1px solid var(--color-border);
  padding:clamp(1.4rem,4vw,2.2rem) clamp(1.1rem,4vw,2.5rem);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.wc-gzd-legal-guarantee-footer::before{
  content:"Deine gesetzlichen Rechte beim Kauf";
  font-family:var(--font-display);font-size:1rem;color:var(--color-heading);
}