/* stil.css — der gemeinsame Anstrich aller go-Seiten (ENTSCHEIDUNGEN (420), 25.09.2026).

   Manuel nach zwei Stilrunden: "der ganz ursprüngliche Katalogstil war eigentlich am Ende das Schönste".
   Die Werte hier sind der Stand vom 24.09. vor dem Farbfeld (Commit ab91d38): Creme #F5EEDF, Linie
   #E2D9C6, weiße Karten mit Radius 10 und einem leichten Schatten. Neu ist nur die Signalfarbe:
   Koralle statt Rot (Manuel: "dieses Rot als Signalfarbe will ich auch nicht mehr ... etwas gefälliger").

   EINE Stelle für Farben und alles, was jede Seite gleich trägt: Kopf, Händlershop-Lasche, Schnellsuche,
   Kontozeichen, Fußzeile, Anfassen-Block. Die Vorlagen tragen nur noch, was nur sie haben — wer die
   Signalfarbe ändert, ändert zwei Zeilen hier, nicht neun Vorlagen (vorher stand die Palette in jeder).

   Koralle ist #BD533C, nicht das #C65A42 der Vorschau: weiße Schrift auf #C65A42 misst 4,25:1 und fällt
   unter die 4,5:1 für normale Schrift. #BD533C misst 4,7:1 und sieht daneben gleich aus. Text in der
   Signalfarbe (Links, Etiketten) nimmt --akzent-dunkel, das hält auch auf Creme (5,4:1). */

:root {
  --creme:#F5EEDF; --ink:#2F2F30; --grey:#4A4A4C; --sand:#E2D9C6; --weiss:#FFFFFF;
  --akzent:#BD533C; --akzent-dunkel:#A04430; --akzent-hell:#F8E3DD;
  --gruen:#3A6B4F; --wartet:#B07A14; --gelb:#FFF200;
  /* (520) Startseite und /sortiment/: das Blau der Wortmarke fuer Knoepfe und Etiketten, Papierweiss fuer Flaechen */
  --marke-blau:#2F6BB8; --papier:#FFFDF8;
  /* 13.10.2026, Manuel: Ueberschriften der Startseite "im gleichen Blau wie das Limo-und-Mo-Logo" - gemessen in wortmarke.png */
  --logo-blau:#5899E3;
  --r:10px; --schatten:0 6px 18px rgba(47,47,48,.08); --schatten-hoch:0 16px 32px rgba(47,47,48,.16);
  --kurve:cubic-bezier(.2,.7,.2,1); --dauer:.35s;
  --disp:"Montserrat","DM Sans",Arial,sans-serif;
  --text:"DM Sans","Avenir Next","Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--creme); color:var(--ink); font-family:var(--text); font-weight:400; line-height:1.55; }

/* ---------- Kopf: Wortmarke links, rechts Lasche (schmal), Schnellsuche, Kontozeichen ---------- */
header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; padding:18px 24px; max-width:1080px; margin:0 auto; }
header .marke { display:flex; flex-direction:column; align-items:flex-start; flex:0 0 auto; color:var(--ink); }
header .marke, header .marke:hover, header .marke * { text-decoration:none; }
/* (422) Der Claim ist so breit wie die Wortmarke (1189 x 175 px Bild): gleiche Hoehe -> gleiche Breite, in jeder Groesse. */
header { --wm-h:64px; }
header .wortmarke { height:var(--wm-h); width:auto; display:block; }
header .claim { display:block; width:calc(var(--wm-h) * 1189 / 175); margin-top:8px; }
header .claim svg { display:block; width:100%; height:auto; overflow:visible; }
header .claim text { font-family:var(--text); font-weight:500; font-size:44px; fill:var(--ink); }
/* Kopf und rechte Seite brechen um, statt zu quetschen: vorher schrumpfte das Suchfeld zwischen 721 und 1199 px auf
   54 px (nur die Lupe), angemeldet sogar bis 1200 px (gemessen 25.09.2026). */
header .rechts { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 12px; flex:1 1 auto; min-width:0; }
@media (max-width:720px) { header .rechts { flex-basis:100%; justify-content:flex-start; } }
/* Seiten mit Suche: unter 1200 px (dort wandert auch die Lasche in den Kopf) bekommt die rechte Seite eine eigene
   Zeile unter der Wortmarke - auf iPad hoch und quer, kleinem Laptop und Handy quer dasselbe Bild. */
@media (max-width:1199px) { header:has(.suche) .rechts { flex-basis:100%; justify-content:flex-start; } }
@media (max-width:520px) { header { padding:14px 16px; --wm-h:44px; } header .claim { margin-top:6px; } }

/* ---------- Händlershop-Lasche (Manuel, 25.09.2026: "dass man sieht, man ist jetzt im Shop, an der linken
   Seite ein Button oder mit einem Icon"). Ersetzt die Zeile "Händlershop · nur für Gewerbetreibende" und das
   Register aus (410)/(411). Am Rand nur, wo neben dem 1080er Inhalt Platz ist - darunter lag sie auf dem
   Text (gemessen bei 800 px); dort steht sie als Etikett im Kopf. ---------- */
.hs-marker { align-items:center; gap:8px; color:#fff; background:var(--akzent); font-weight:700; text-transform:uppercase; text-decoration:none;
             transition:background var(--dauer); }
.hs-marker:hover { background:var(--akzent-dunkel); }
.hs-marker svg { flex:0 0 auto; }
/* Randleiste (421): die Lasche und darunter das Kontaktzeichen - Manuel: "da auch ein icon noch darunter zum anklicken kontakt". */
.randleiste { position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.hs-marker.am-rand { display:flex; flex-direction:column; gap:10px; width:38px;
                     padding:14px 9px 16px; border-radius:0 var(--r) var(--r) 0; box-shadow:4px 0 14px rgba(47,47,48,.14); font-size:11px; letter-spacing:.2em; }
.hs-marker.am-rand svg { width:20px; height:20px; }
.hs-marker.am-rand span { writing-mode:vertical-rl; transform:rotate(180deg); }
.hs-marker.im-kopf { display:none; padding:6px 12px 6px 9px; border-radius:999px; font-size:11px; letter-spacing:.14em; flex:0 0 auto; }
.hs-marker.im-kopf svg { width:16px; height:16px; }
.hs-kontakt { display:inline-flex; align-items:center; justify-content:center; color:var(--akzent-dunkel); background:#fff; border:1px solid var(--sand);
              text-decoration:none; transition:background var(--dauer), color var(--dauer), border-color var(--dauer); }
.hs-kontakt svg { width:20px; height:20px; }
.hs-kontakt:hover { background:var(--akzent); color:#fff; border-color:var(--akzent); }
.hs-kontakt.wa { color:#1F8A4C; }
.hs-kontakt.wa:hover { background:#25D366; color:#fff; border-color:#25D366; }
.hs-kontakt.am-rand { width:38px; height:42px; border-left:0; border-radius:0 var(--r) var(--r) 0; box-shadow:4px 0 14px rgba(47,47,48,.10); }
.hs-kontakt.im-kopf { display:none; width:34px; height:34px; border-radius:999px; flex:0 0 auto; }
.hs-kontakt.im-kopf svg { width:18px; height:18px; }
@media (max-width:1199px) { .randleiste { display:none; } .hs-marker.im-kopf, .hs-kontakt.im-kopf { display:inline-flex; } }

/* ---------- Schnellsuche (Wortlaut aus Manuels Textliste, ARBEITSPAKET_FARBFELD Par. 6). Ohne Skript schickt
   das Feld die Suche an "Alle Produkte"; mit suche.js filtert es auf einer Kategorieseite sofort. ---------- */
.suche { position:relative; flex:1 1 300px; min-width:min(285px,100%); max-width:340px; margin:0; }
.suche input { width:100%; padding:10px 14px 10px 38px; border:1px solid var(--sand); border-radius:999px; font:inherit; font-size:14px;
               background:#fff; color:var(--ink); -webkit-appearance:none; appearance:none; }
.suche input::placeholder { color:#77777A; font-size:14px; }
/* Unter 16 px zoomt Safari auf iPhone und iPad beim Antippen die ganze Seite heran - der Kopf rutscht aus dem Bild. */
/* Und solange getippt wird, weicht die dunkle Auswahl-Leiste unten: über der Handy-Tastatur verdeckte sie die Treffer. */
@media (pointer:coarse) { .suche input { font-size:16px; } body:has(.suche input:focus) .leiste { display:none; } }
.suche input:focus { outline:2px solid var(--akzent); outline-offset:1px; border-color:var(--akzent); }
.suche svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--grey); pointer-events:none; }
/* In der eigenen Zeile steht die Suche zuletzt und füllt, was übrig ist; reicht der Platz nicht für den ganzen
   Platzhalter (285 px), rutscht sie in eine eigene Zeile - sonst stand vom Platzhalter nur "Schnellsuch" da. */
@media (max-width:1199px) { .suche { max-width:none; order:3; } }
@media (max-width:520px) { .suche { flex:1 1 100%; } }
/* 16.10.2026, Olivia: auf Kategorieseiten steht die Suche zwischen Filter und Produkten (nicht mehr im Kopf) - beim
   Tippen stehen die ersten Treffer direkt darunter. Schrift der Seite auch im Platzhalter (iOS nimmt sonst die Systemschrift). */
.suche-zeile { margin:0 0 20px; scroll-margin-top:76px; }   /* unter dem klebenden Menue */
.suche-zeile .suche { max-width:520px; min-width:0; }
.suche-zeile .suche input { padding:13px 16px 13px 42px; font-size:16px; }
.suche-zeile .suche svg { left:15px; width:18px; height:18px; }
.suche input, .suche input::placeholder { font-family:var(--text); }
.karte.such-aus { display:none; }
.treffer-leer { margin:6px 0 0; font-size:15px; color:var(--grey); }
.treffer-liste { position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0; min-width:min(340px,92vw); margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--sand); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.treffer-liste[hidden] { display:none; }
.treffer-liste a { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:14px; }
.treffer-liste a:hover, .treffer-liste a:focus-visible { background:var(--sand); }
.treffer-liste img { width:38px; height:38px; object-fit:cover; border-radius:6px; flex:none; }
.treffer-liste .alle { font-weight:700; color:var(--akzent-dunkel); }
.treffer-liste .leer { padding:8px; font-size:14px; color:var(--grey); }
.treffer-leer a { color:var(--akzent-dunkel); font-weight:700; }

/* ---------- Hauptmenü (425), Manuel: "es fehlt noch ein menü auf den go seiten, kannst du das cool und sinnvoll adden".
   Eine ruhige Leiste unter dem Kopf, die beim Scrollen oben kleben bleibt. Produkte stehen direkt in der Zeile (ein
   Klick zu den Postkarten), Regionen klappen mit kleinen Bildern auf. Unter 900 px ein Knopf "Menü", der alles als
   Kacheln mit Bild öffnet. Bewegung nur beim Überfahren: der Koralle-Strich wächst unter dem Wort. ---------- */
.menue { position:sticky; top:0; z-index:30; background:var(--creme); transform:translateZ(0); border-top:1px solid var(--sand); border-bottom:1px solid var(--sand);
         transition:box-shadow var(--dauer); }
.menue.schwebt { box-shadow:0 6px 18px rgba(47,47,48,.08); }
.menue-zeile { position:relative; max-width:1080px; margin:0 auto; padding:0 24px; display:flex; align-items:center; }
.menue-auf { display:none; }
.menue-konto { display:none; }
.menue-liste { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; column-gap:26px; flex:1 1 auto; }
.menue-liste > li { position:relative; }
.menue-titel { display:none; }
.menue-liste a, .aufklapp-knopf { position:relative; display:inline-flex; align-items:center; gap:6px; padding:13px 0; font:inherit; font-size:15px;
                                  font-weight:500; color:var(--ink); text-decoration:none; background:none; border:0; cursor:pointer; }
.menue-liste > li > a::after, .aufklapp-knopf::after { content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; border-radius:2px;
                                  background:var(--akzent); transform:scaleX(0); transform-origin:left; transition:transform var(--dauer) var(--kurve); }
.menue-liste > li > a:hover::after, .aufklapp-knopf:hover::after, .aufklapp.offen > .aufklapp-knopf::after,
.menue-liste > li > a[aria-current]::after, .aufklapp.hier > .aufklapp-knopf::after { transform:scaleX(1); }
.menue-liste a[aria-current], .aufklapp.hier > .aufklapp-knopf { color:var(--akzent-dunkel); font-weight:700; }
.menue-liste > li > a .mini { display:none; }
.aufklapp-knopf svg { width:16px; height:16px; transition:transform var(--dauer) var(--kurve); }
.aufklapp.offen .aufklapp-knopf svg { transform:rotate(180deg); }
.menue-liste .rechts-aussen { margin-left:auto; }
.menue-liste .rechts-aussen a { color:var(--akzent-dunkel); font-weight:700; }
body.angemeldet .menue .nur-abgemeldet { display:none; }
body:not(.angemeldet) .menue .nur-angemeldet { display:none; }
/* Regionen: weiße Karte mit zwei Spalten, jedes Ziel mit Bild. */
.unter { position:absolute; top:100%; left:50%; z-index:2; width:460px; list-style:none; margin:0; padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
         background:#fff; border:1px solid var(--sand); border-radius:var(--r); box-shadow:var(--schatten);
         opacity:0; visibility:hidden; transform:translate(-50%,6px); transition:opacity .2s, transform .25s var(--kurve), visibility .2s; }
/* Mittig unter "Regionen" - linksbündig ragte es bei 1024 px (iPad quer) rechts aus dem Bild. */
@media (min-width:900px) {
  .aufklapp.offen .unter { opacity:1; visibility:visible; transform:translate(-50%,0); }
}
@media (min-width:900px) and (hover:hover) { .aufklapp:hover .unter { opacity:1; visibility:visible; transform:translate(-50%,0); } }
.unter a { display:flex; gap:10px; width:100%; padding:7px 10px 7px 7px; border-radius:8px; font-size:14.5px; transition:background var(--dauer); }
.unter a:hover { background:var(--creme); }
.unter a[aria-current] { background:var(--akzent-hell); }
.mini { display:block; flex:0 0 auto; width:40px; height:40px; border-radius:8px; object-fit:cover; background:var(--sand); }

/* Zwischen 900 und 1080 px wird es eng (gemessen: bei 912 px brach die Zeile um) - etwas weniger Abstand. */
@media (min-width:900px) and (max-width:1079px) { .menue-liste { column-gap:18px; } .menue-liste a, .aufklapp-knopf { font-size:14.5px; } }
@media (max-width:899px) {
  .menue-zeile { padding:0 16px; }
  .menue-auf { display:inline-flex; align-items:center; gap:8px; margin:7px 0; padding:8px 16px 8px 12px; border:1px solid var(--sand); border-radius:999px;
               background:#fff; font:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; transition:border-color var(--dauer); }
  .menue-auf:hover, .menue.offen .menue-auf { border-color:var(--akzent); }
  .menue-auf svg { width:20px; height:20px; }
  .menue-konto { display:inline-flex; align-items:center; gap:8px; margin:7px 0 7px 8px; padding:8px 16px 8px 12px; border:1px solid var(--sand); border-radius:999px;
                 background:#fff; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; transition:border-color var(--dauer); }
  .menue-konto:hover { border-color:var(--akzent); }
  .menue-konto svg { width:20px; height:20px; }
  .menue-liste { display:none; position:absolute; left:0; right:0; top:100%; max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
                 grid-template-columns:1fr 1fr; gap:8px; padding:6px 16px 20px; background:#fff; border-bottom:1px solid var(--sand);
                 box-shadow:0 16px 32px rgba(47,47,48,.12); }
  .menue.offen .menue-liste { display:grid; }
  .menue-titel { display:block; grid-column:1 / -1; margin:12px 0 0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--akzent-dunkel); }
  .menue-liste > li { min-width:0; }
  .menue-liste a { display:flex; gap:10px; width:100%; padding:8px; border-radius:var(--r); background:var(--creme); font-size:15px; line-height:1.25; }
  .menue-liste a span { min-width:0; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
  /* Offenes Menü: die dunkle Auswahl-Leiste unten weicht, sonst liegt sie auf den letzten Kacheln. */
  body:has(.menue.offen) .leiste { display:none; }
  /* Dasselbe fuer die Reiter-Leiste auf Mein Konto (Manuel 28.10.2026, Screenshot: sie lag auf "Mehr" am Ende des Menues, die Liste liess sich
     nicht bis zum Ende zeigen). */
  body:has(.menue.offen) .reiter { display:none; }
  .menue-liste > li > a .mini { display:block; }
  .menue-liste > li > a::after { display:none; }
  .menue-liste a[aria-current] { background:var(--akzent-hell); }
  .menue-liste .rechts-aussen { margin-left:0; }
  .aufklapp { grid-column:1 / -1; }
  .aufklapp-knopf { display:none; }
  .unter { position:static; width:auto; opacity:1; visibility:visible; transform:none; padding:0; margin-top:8px; gap:8px; border:0; box-shadow:none; background:none; }
  .mini { width:44px; height:44px; }
}

/* ---------- Kontozeichen (anmeldung.js füllt #konto) ---------- */
.konto { display:inline-flex; align-items:center; gap:10px; padding:4px 14px 4px 4px; background:#fff; border:1px solid var(--sand); border-radius:999px;
          color:var(--ink); text-decoration:none; white-space:nowrap; line-height:1.15; transition:border-color var(--dauer), box-shadow var(--dauer), transform var(--dauer) var(--kurve); }
.konto[hidden] { display:none; }
.konto:hover { border-color:var(--gruen); box-shadow:var(--schatten); transform:translateY(-1px); }
/* (427) Kreis mit Initialen + Haekchen statt "Angemeldet als manuelp.sen… Abmelden". */
.konto .avatar { position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--gruen); color:#fff;
                 display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.02em; }
.konto .avatar > svg { width:20px; height:20px; }
.konto .zeichen { position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:#fff; color:var(--gruen);
                  display:grid; place-items:center; box-shadow:0 0 0 1.5px #fff; }
.konto .zeichen svg { width:11px; height:11px; }
.konto.wartet .avatar { background:var(--wartet); }
.konto.wartet .zeichen { color:var(--wartet); }
.konto.wartet:hover { border-color:var(--wartet); }
.konto .wer { display:flex; flex-direction:column; min-width:0; max-width:170px; }
.konto .wer small { font-size:11px; color:var(--grey); letter-spacing:.02em; }
.konto .wer b { font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:520px) { .konto { padding:3px; } .konto .wer { display:none; } }

/* ---------- Knöpfe: dieselbe kleine Bewegung überall ---------- */
.btn, .btn-gross, .btn-anmelden { transition:transform var(--dauer) var(--kurve), background var(--dauer); }
.btn:hover, .btn-gross:hover, .btn-anmelden:hover { transform:translateY(-2px); }
/* Nur Knoepfe, die sicher in der Signalfarbe stehen, werden beim Ueberfahren dunkler - der gelbe Knopf der
   Nachbestellseite und die dunklen der Kampagne behalten ihre Farbe (die Vorlage sagt es fuer ihre .btn selbst). */
.btn-gross:hover, .btn-anmelden:hover { background:var(--akzent-dunkel); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; }

/* ---------- Streifen „Uns gibt es auch auf Faire" auf /b2b/ (Manuel, 09.11.2026; 10.11.: Logo gross und rechts, ganze Karte klickbar) ---------- */
.faire-streifen { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px 36px; margin:0 0 28px; padding:26px 30px;
                  background:#fff; border:1px solid var(--sand); border-radius:var(--r); }
.faire-streifen .eyebrow { display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--akzent-dunkel); font-weight:700; margin-bottom:6px; }
.faire-streifen h2 { font-family:var(--disp); font-weight:900; font-size:24px; margin:0 0 8px; }
.faire-streifen p { margin:0; color:var(--grey); font-size:16px; max-width:52ch; }
.faire-karte { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-width:290px; padding:28px 36px;
               background:var(--papier); border:1px solid var(--sand); border-radius:var(--r); color:var(--ink); text-decoration:none;
               transition:transform var(--dauer) var(--kurve), box-shadow var(--dauer), border-color var(--dauer); }
.faire-karte:hover, .faire-karte:focus-visible { transform:translateY(-3px); box-shadow:var(--schatten); border-color:var(--akzent); }
.faire-karte .faire-logo { width:200px; max-width:100%; height:auto; display:block; }
.faire-karte .faire-knopf { font-size:14px; font-weight:700; }
@media (max-width:760px) { .faire-streifen { grid-template-columns:1fr; padding:20px; } .faire-karte { min-width:0; padding:22px 20px; } }

/* ---------- Heimatstore, Block „anfassen" (Manuel, 25.09.2026: nur WUNDERWERK, Klick öffnet Google Maps;
   26.09.: Überschrift neu, WhatsApp zum Verabreden daneben) ---------- */
.anfassen .wege { display:flex; flex-wrap:wrap; gap:10px; }
.anfassen { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:center; }
.anfassen .eyebrow { display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--akzent-dunkel); font-weight:700; margin-bottom:8px; }
.anfassen h2 { font-family:var(--disp); font-weight:900; font-size:24px; margin:0 0 10px; }
.anfassen p { margin:0 0 16px; color:var(--grey); max-width:52ch; font-size:16px; }
.laden { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--sand); border-radius:999px; padding:9px 16px 9px 12px;
         font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; transition:transform var(--dauer) var(--kurve), box-shadow var(--dauer), border-color var(--dauer); }
.laden:hover { transform:translateY(-3px); box-shadow:var(--schatten); border-color:var(--akzent); }
.laden svg { width:18px; height:18px; color:var(--akzent); flex:0 0 auto; }
.laden small { font-weight:400; color:var(--grey); font-size:13px; }
.anfassen .bild { border-radius:var(--r); overflow:hidden; box-shadow:var(--schatten); }
.anfassen .bild img { width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 45%; display:block; transition:transform .7s var(--kurve); }
.anfassen .bild:hover img { transform:scale(1.04); }
@media (max-width:760px) { .anfassen { grid-template-columns:1fr; } }

/* ---------- Fußzeile ---------- */
footer { max-width:1080px; margin:0 auto; padding:26px 24px 40px; font-size:12.5px; color:var(--grey); border-top:1px solid var(--sand); }
footer a { color:inherit; }
@media (max-width:520px) { footer { padding-inline:16px; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

/* ---------- Angemeldet: nur noch das Kontozeichen oben rechts, daneben "Abmelden" (Manuel 03.10.2026: "Wenn man
   angemeldet ist, genuegt die Box rechts oben ... oben aber noch hinzufuegen, mein Konto und abmelden"). Der gruene
   Kasten unter dem Kopf aus (422) ist weg. ---------- */
.konto-ab { font-size:13px; color:var(--grey); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.konto-ab:hover { color:var(--akzent-dunkel); }
.konto-ab[hidden] { display:none; }

/* ---------- Preiszeile nach Anmeldung (Manuel 03.10.2026: "in zwei Zeilen einsortieren und UVP gesondert") ---------- */
.preis.echt { display:block; margin-top:8px; line-height:1.35; border-bottom:0; }
.preis.echt b { display:block; font-size:14px; color:var(--ink); }
.preis.echt .staffel { display:block; font-size:12.5px; color:var(--grey); font-weight:400; }
.preis.echt .uvp { display:inline-block; margin-top:5px; padding:2px 8px; border-radius:999px; background:var(--creme); border:1px solid var(--sand);
                   font-size:11.5px; color:var(--grey); font-weight:400; letter-spacing:.02em; }

/* ---------- Merkzettel im Kopf (03.10.2026, Manuel: "Wenn ich auf die Herzen klicke, sehe ich nirgends, dass ich einen
   Merkzettel haette"): Herz mit Zahl neben dem Kontozeichen, fuehrt in Mein Konto > Merkliste. Nur angemeldet, nur mit Inhalt. ---------- */
/* Manuel 03.10.2026, zweite Fassung: "muss mitschweben ... erscheinen, wenn man das erste Herz gedrueckt hat". Fest rechts unten,
   ueber der Auswahl-Leiste, kommt mit einem kleinen Sprung herein. */
.merk-kopf { position:fixed; right:18px; bottom:104px; z-index:6; display:inline-flex; align-items:center; gap:7px; padding:9px 15px 9px 11px; border-radius:999px;
             background:#fff; border:1px solid var(--sand); box-shadow:var(--schatten-hoch); color:var(--akzent-dunkel); font-size:13.5px; font-weight:700;
             text-decoration:none; transition:border-color var(--dauer), transform var(--dauer) var(--kurve); animation:merk-rein .45s var(--kurve); }
.merk-kopf svg { width:18px; height:18px; fill:currentColor; }
.merk-kopf:hover { border-color:var(--akzent); transform:translateY(-2px); }
.merk-kopf[hidden] { display:none; }   /* 14.10.2026, Manuel: merken auch ohne Konto */
@keyframes merk-rein { from { opacity:0; transform:translateY(12px) scale(.9); } }
@media (max-width:520px) { .merk-kopf { right:12px; bottom:96px; padding:9px 12px; } .merk-kopf .wort { display:none; } }
/* 13.10.2026, Manuel: am Handy wirkt das Herz in der Leiste unten "deplatziert" - es schwebt am rechten Rand auf halber Hoehe mit */
@media (max-width:640px) { .merk-kopf { right:10px; bottom:auto; top:calc(50% - 22px); padding:10px 11px; } .merk-kopf .wort { display:none; } }
@media (prefers-reduced-motion:reduce) { .merk-kopf { animation:none; } }

/* ---------- Merkliste (427): Herz oben rechts auf jeder Motivkarte. Leise, bis man es braucht: weiss mit Kontur,
   gemerkt in Koralle. Bewegung nur beim Ueberfahren. ---------- */
.karte[data-sku] { position:relative; }
/* Manuel 03.10.2026 ("1a, Herzen erst nach Anmeldung"): ohne Konto gibt es keine Merkliste zu sehen, also auch kein Herz. */
/* 14.10.2026, Manuel: "wenn ich nicht angemeldet bin, keine Merkliste" - Herzen wieder fuer alle (die Liste liegt im Browser) */
.merk { position:absolute; top:10px; right:10px; z-index:3; width:38px; height:38px; border-radius:50%; border:0; padding:0; cursor:pointer;
        display:grid; place-items:center; background:rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(47,47,48,.14); color:var(--ink);
        transition:transform var(--dauer) var(--kurve), background var(--dauer); }
.merk svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.merk:hover { transform:scale(1.1); }
.merk.an { color:var(--akzent); }
.merk.an svg { fill:currentColor; }
@media (prefers-reduced-motion:no-preference) { .merk.an svg { animation:merk-puls .35s var(--kurve); } }
@keyframes merk-puls { 50% { transform:scale(1.25); } }

/* ---------- Eigene Kasse im Bestellblock (Wix-Abloesung Phase 4, (510)) ---------- */
.portal-summe { font-size:14px; margin:0 0 10px; }
.portal-summe .zeile { display:flex; justify-content:space-between; gap:12px; padding:2px 0; }
.portal-summe .gesamt { border-top:1px solid var(--sand); margin-top:4px; padding-top:6px; font-weight:700; }
.portal-summe .nicht-ok { color:var(--akzent-dunkel); }
.portal-label { display:block; font-size:13px; font-weight:700; margin:10px 0 4px; }
#portal-zahlart, #portal-rabatt { width:100%; font:inherit; font-size:16px; padding:9px 11px; border:1px solid var(--sand); border-radius:6px; background:#fff; color:var(--ink); }
.portal-fehler { margin:10px 0 0; padding:9px 11px; border-left:4px solid var(--akzent); background:#FBECEA; font-size:14px; }
#portal-bestellen:disabled { opacity:.5; cursor:not-allowed; }

/* Anmelden oben rechts am Handy (Manuel 12.10.2026: "wenn man nicht angemeldet ist, fehlt am mobile oben rechts der Anmelde-
   button"). Das Menue klappt unter 900 px zu einem Knopf, dort steht "Anmelden" erst im Aufklapp-Menue. Abgemeldet bekommt
   der Kopf deshalb einen eigenen Knopf in der Zeile der Wortmarke; angemeldet nimmt ihn das Kontozeichen ab. */
.anmelden-kopf { display:none; }
.anmelden-kopf[hidden], body.angemeldet .anmelden-kopf { display:none !important; }
@media (max-width:899px) {
  header { position:relative; }
  body:not(.angemeldet) .anmelden-kopf { display:inline-flex; align-items:center; position:absolute; top:calc(18px + (var(--wm-h) - 38px) / 2); right:24px; z-index:5;
        gap:8px; padding:9px 18px; border-radius:999px; background:var(--akzent); color:#fff; font-weight:700; font-size:14px; line-height:1; text-decoration:none;
        box-shadow:0 4px 12px rgba(47,47,48,.14); transition:background var(--dauer), transform var(--dauer) var(--kurve); }
  body:not(.angemeldet) .anmelden-kopf:hover { background:var(--akzent-dunkel); transform:translateY(-1px); }
}
/* Schmal: die Wortmarke ist fast so breit wie der Bildschirm, darum nur das Personenzeichen als Kreis. */
@media (max-width:520px) { body:not(.angemeldet) .anmelden-kopf { top:calc(14px + (var(--wm-h) - 38px) / 2); right:16px; width:38px; height:38px; padding:0; justify-content:center; }
  .anmelden-kopf span { display:none; } }

.leiste[hidden] { display:none !important; }

/* Antippflaechen am Handy (Website-Assessment 12.10.2026): Links und Chips mindestens ~44 px hoch, Optik bleibt */
@media (pointer:coarse) {
  footer a { display:inline-block; padding:13px 6px; margin:-13px -6px; }
  .chip { min-height:44px !important; padding-block:10px !important; }
  .hs-kontakt.im-kopf { width:44px; height:44px; }
  a.zurueck { display:inline-block; padding-block:12px; }
}

/* 13.10.2026, Manuel: "diese blaue Highlight-Farbe rein" - Seiten- und Abschnittsueberschriften im Haendlershop (z. B. "Nach Produkt")
   und die Begruessung "Hallo, ..." im Blau der Wortmarke. Produktnamen in Karten und die Ueberschriften im Warenkorb bleiben dunkel. */
h1:not(.claim), h2, .sz-kopf b { color:var(--logo-blau); }
.karte h2, #bestellen h2, .gross h2 { color:var(--ink); }


/* (600) Preisvorteil aus einer Zusage an diesen Haendler (z. B. „Wunderwerk-Rabatt −33 %“): fett und in der Akzentfarbe */
.preis.echt .staffel.dein { color:var(--akzent); font-weight:700; }
.preis.echt s { color:var(--grey); font-weight:400; margin-right:6px; }
.zeile.rabatt.dein, .zeile.rabatt.dein span, .zeile.rabatt.dein b { color:var(--akzent); font-weight:700; }


/* ---------- Warenkorb-Kasten (Manuel 19.10.2026, dritte Fassung: "minimalistisch, genauso wie die Merkliste - Warenkorb-Symbol und die Zahl
   der Artikel, sonst nichts; die Box war zu gross und stoerte im Bild"). Gleiche Pille wie `.merk-kopf`, direkt darueber; ohne
   Merkliste unten rechts. Preis, Stueckzahl und Knopf sind raus - der ganze Kasten fuehrt in den Warenkorb. Die Bauteile der alten
   Leiste (#zaehler, #leiste-summe, #zeigen) bleiben im Dokument, damit das Skript sie weiter fuellt; sichtbar ist nur Symbol + Zahl. ---------- */
.leiste.korbkasten { left:auto; right:18px; bottom:24px; width:auto; padding:9px 15px 9px 11px; border-radius:999px; background:var(--logo-blau); color:#fff;
                     border:1px solid var(--logo-blau); box-shadow:var(--schatten-hoch); flex-direction:row; align-items:center; justify-content:flex-start;
                     flex-wrap:nowrap; gap:7px; z-index:7; transform-origin:bottom right; font-size:13.5px; cursor:pointer;
                     transition:border-color var(--dauer), transform var(--dauer) var(--kurve); }
.leiste.korbkasten:hover { background:var(--marke-blau); border-color:var(--marke-blau); }
.leiste.korbkasten:focus-visible { outline:2px solid var(--marke-blau); outline-offset:2px; }
body.korb-auf .leiste.korbkasten { display:none; }
.leiste.korbkasten .kasten-icon { width:19px; height:19px; flex:0 0 auto; }
.leiste.korbkasten b { font-size:13.5px; font-family:inherit; font-weight:700; color:#fff; }
.leiste.korbkasten #leiste-summe, .leiste.korbkasten .btn { display:none; }
.leiste.korbkasten.puls { animation:korbkasten-nick .7s var(--kurve); }
@keyframes korbkasten-nick { 30% { transform:translateY(-6px) scale(1.05); } }
@media (max-width:640px) {
  /* wie das Herz am Handy: Symbol und Zahl, das Wort entfaellt */
  .leiste.korbkasten { right:10px; bottom:14px; padding:10px 11px; }
  .leiste.korbkasten .z-wort { display:none; }
}
@media (prefers-reduced-motion:reduce) { .leiste.korbkasten.puls { animation:none; } }

/* ---------- Knopf "In den Warenkorb" auf der Karte: erst die Menge waehlen (Plus/Minus), dann der Knopf (19.10.2026). ---------- */
.karte .in-korb { display:block; width:100%; margin-top:10px; padding:10px 14px; font-size:14.5px; text-align:center; }
.karte .in-korb:disabled { background:var(--sand); color:var(--grey); cursor:not-allowed; }
.karte .in-korb.ok { background:var(--gruen); }
.karte .korb-stand { display:block; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--gruen); text-align:center; }
.karte .korb-stand[hidden] { display:none; }


/* ---------- Merkliste und Warenkorb: zwei gleich grosse Pillen, IMMER am selben Ort (Manuel 19.10.2026: "muss immer gleich gross sein" und
   "die soll immer gleich bleiben, dass ich es immer finde"). Feste Breite und Hoehe, egal wie viele Stellen die Zahl hat. Der Warenkorb sitzt
   8 px ueber der Merkliste - auch wenn die Merkliste (noch) leer und ausgeblendet ist, er springt nicht. `.korb-kopf` ist dieselbe Pille fuer
   Seiten ohne Bestellblock (/b2b/, Mein Konto); `.leiste.korbkasten` die auf Katalog- und Produktseiten. Highlight: das Blau der Wortmarke. ---------- */
.merk-kopf, .leiste.korbkasten, .korb-kopf { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:140px; height:42px; padding:0 12px; gap:7px; white-space:nowrap; }
.korb-kopf { position:fixed; right:18px; z-index:7; background:var(--logo-blau); color:#fff; border:1px solid var(--logo-blau); border-radius:999px; box-shadow:var(--schatten-hoch);
             font-size:13.5px; font-weight:700; text-decoration:none; transition:background var(--dauer), border-color var(--dauer); }
.korb-kopf:hover { background:var(--marke-blau); border-color:var(--marke-blau); }
.korb-kopf:focus-visible { outline:2px solid var(--marke-blau); outline-offset:2px; }
.korb-kopf[hidden] { display:none; }
.korb-kopf svg { width:19px; height:19px; flex:0 0 auto; }
.leiste.korbkasten, .korb-kopf { bottom:154px; }
@media (max-width:640px) {
  .merk-kopf, .leiste.korbkasten, .korb-kopf { width:64px; height:42px; padding:0 10px; }
  .korb-kopf { right:10px; }
  .korb-kopf .wort { display:none; }
  .merk-kopf { top:calc(50% - 21px); }
  .leiste.korbkasten, .korb-kopf { bottom:calc(50% + 29px); }
}

/* ---------- Profilbild: Kreise in Kopf, Konto und Kasten auf /b2b/ (Manuel 19.10.2026: "Logo, Farbe, Symbol - und eine witzige Bewegung").
   Gemalt von anmeldung.js (window.lmAvatar). Das Haekchen im Kopf (.zeichen) bleibt ausserhalb des Bildes. ---------- */
.konto .avatar > img, .sz-av > img, .k-avatar > img { width:100%; height:100%; object-fit:contain; border-radius:50%; padding:3px; box-sizing:border-box; display:block; }
.k-avatar > svg { width:52%; height:52%; }
.konto .avatar.av-logo, .sz-av.av-logo, .k-avatar.av-logo { box-shadow:inset 0 0 0 1px var(--sand); }
/* Bewegung: Wackeln beim Ueberfahren, Drehen am grossen Kreis, Hopser nach einer neuen Wahl. Bei "weniger Bewegung" steht alles still. */
@keyframes av-wackel { 0%, 100% { transform:rotate(0); } 20% { transform:rotate(-16deg); } 40% { transform:rotate(14deg); } 60% { transform:rotate(-8deg); } 80% { transform:rotate(5deg); } }
@keyframes av-dreh { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes av-hops { 0% { transform:scale(1); } 35% { transform:scale(1.28) rotate(-10deg); } 65% { transform:scale(.94) rotate(6deg); } 100% { transform:scale(1); } }
.konto:hover .avatar, .sz-kopf:hover .sz-av { animation:av-wackel .7s var(--kurve); }
button.k-avatar:hover { animation:av-dreh .9s var(--kurve); }
.av-hops { animation:av-hops .55s var(--kurve); }
@media (prefers-reduced-motion:reduce) { .konto:hover .avatar, .sz-kopf:hover .sz-av, button.k-avatar:hover, .av-hops { animation:none; } }

/* 10-%-Sticker auf /b2b/: dreht sich wie eine Muenze einmal um die eigene (senkrechte) Achse (Manuel 19.10.2026: "in einem durch, ohne Pause, relativ schnell,
   mit etwas Dynamik"). EIN Abschnitt 0 -> 360 Grad mit einer Kurve (schnell raus, am Ende ein kleines Nachfedern) - ein Zwischenschritt in der Mitte
   haette jeden Abschnitt einzeln abgebremst. Das kurze Gross-Werden laeuft getrennt ueber die Einzeleigenschaft `scale`. Ruhelage: rotate(6deg). */
@keyframes stoerer-dreh { from { transform:perspective(700px) rotate(6deg) rotateY(0); } to { transform:perspective(700px) rotate(6deg) rotateY(360deg); } }
@keyframes stoerer-gross { 50% { scale:1.15; } }