/* Kopf von bütic.de für klemmbrett.de — ERZEUGT von `php artisan klemmbrett:kopf-export` (App\Support\KopfGemeinsam).
 * Nicht hier ändern: Quelle ist office.buetic public/css/shop-layout.css (Abschnitte @klemmbrett-gemeinsam). */
.kb-kopf-buetic,.kb-erp-baustein{--accent:#734A22;--brand:#8B5A2B;--danger:#C0392B;--danger-flaeche:rgba(192,57,43,.08);--good:var(--web-green);--good-light:#EAF4E2;--good-line:#C6DDB6;--gruen-flaeche-fest:#E8F1D3;--header:#F4EDE1;--ink:#211E1A;--ink-soft:#3D352A;--laser-punkt:#7AC618;--line:#E2DBC8;--line-strong:#D3C9B0;--maxw:1328px;--muted:#6F685B;--paper:#FAF8F1;--paper2:#F4F1E7;--surface:#FFFFFF;--web-green:#2F7A04;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}   /* NUR horizontal — sonst nullt das die vertikalen section-Abstaende (schlaegt section{padding:58px 0}) */
/* USP-Bar = Kopfleiste mit zwei Seiten, die sich ruhig abwechseln (Nutzer-Entscheid 15.09.2026, vorher zwei
   Zeilen): die Vorteile und der Hinweis auf klemmbrett.de. Seit 22.10.2026 beide auf hellem Grün 14 % mit
   dunkelbrauner Schrift (6,6:1, Werkbank e-ci3). Die Vorteile stehen im Fluss und geben die Hoehe vor; der
   Hinweis liegt absolut darueber und blendet nur seine Deckkraft — beim Wechsel verschiebt sich nichts.
   `overflow:hidden`: ein zu langer Spruch wird auf sehr schmalen Handys abgeschnitten, statt die Seite zu
   verbreitern (D16). Ablauf: Skript „Kopfleiste" am Ende von shop/layout.
   Hoehen (Nutzer-Vorgabe 15.09.2026): breit genau 35 px (vorher 37,4) = feste Zeile 19 px + 2 × 8 px;
   mobil 30 px (vorher 33,4) = 18 px + 2 × 6 px, s. 680-px-Block unten. Als Variablen, weil klemmbrett.de die Leiste
   in seinen festen Kopf setzt und den Seitenabstand daraus rechnet (--topbar-h).
   GEMEINSAM MIT klemmbrett.de (05.11.2026, Christian: „Nach Regel bauen, das bei einer Änderung alles überall gleich
   gebaut ist“): Alles zwischen den Marken @klemmbrett-gemeinsam geht unverändert nach klemmbrett.de (klemmbrett:kopf-export,
   App\Support\KopfGemeinsam), dazu die Bausteine shop/_kopf_leiste, _kopf_knopf, _sprachwahl_knopf und das Skript
   shop/_kopfleiste_js. Hier ändern = dort ändern (der Deploy baut klemmbrett.de nach). Nur Klassen verwenden, die es
   in beiden Köpfen gibt (.head-actions, nicht .site-head). */
:root{--topbar-zeile:19px;--topbar-rand:8px;--topbar-h:calc(var(--topbar-zeile) + 2 * var(--topbar-rand))}
.topbar{position:relative;overflow:hidden;background:var(--gruen-flaeche-fest);color:var(--accent);font-size:.76rem;font-weight:600;line-height:var(--topbar-zeile)}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;justify-content:center;padding-top:var(--topbar-rand);padding-bottom:var(--topbar-rand)}
/* Fester Kopf (klemmbrett.de, data-einzeln="messen"): nie umbrechen, das Skript schaltet auf einzeln, wenn es nicht passt. */
.topbar[data-einzeln="messen"] .wrap{flex-wrap:nowrap}
.topbar .tb-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar svg{width:14px;height:14px;flex:none;opacity:.9}
/* Hinweis-Seite (auf bütic.de klemmbrett.de, auf klemmbrett.de bütic.de): Nur die FLAECHE blendet ueber (::before), der
   Text selbst bleibt voll deckend und kommt wie die Vorteile Wort fuer Wort (26.09.2026, s. Woerter unten). Ohne Skript
   bleibt sie verborgen. */
.tb-hinweis{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.tb-hinweis::before{content:"";position:absolute;inset:0;background:var(--gruen-flaeche-fest);opacity:0;transition:opacity 1s ease-in-out .18s}
.tb-hinweis .wrap{position:relative;width:100%;box-sizing:border-box}
.topbar:not(.tb-js) .tb-hinweis{visibility:hidden}
.topbar.hinweis-an .tb-hinweis{pointer-events:auto}
.topbar.hinweis-an .tb-hinweis::before{opacity:1}
.tb-hinweis a{color:var(--accent);text-decoration:none}
.tb-hinweis strong{font-weight:700}
.tb-hinweis strong,.tb-hinweis strong .w{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Woerter: Das Skript zerlegt jeden Text in `.w` (je Wort, dazu das Symbol) und setzt `.tb-js` an die Leiste —
   ohne Skript bleibt alles stehen wie gebaut. Drei Zustaende, der Uebergang haengt jeweils am ZIEL:
   wartend (weggeschnitten, etwas tiefer, unscharf) → `.is-on` (gleitet Wort fuer Wort herein und wird scharf) →
   `.is-off` (gleitet schnell nach oben weg). Der Ruecksprung von `.is-off` auf wartend passiert weggeschnitten.
   BEWUSST OHNE Deckkraft (Nutzer 26.09.2026, „Gleiten statt Einblenden"): Lighthouse/axe rechnet eine halbe
   Deckkraft in den Kontrast ein und meldete die Leiste mitten im Einblenden als zu blass (Barrierefreiheit 97),
   obwohl sie im Stand 8,6:1 hat. `clip-path` blendet ohne Zwischen-Deckkraft ein und aus.
   Staffel ueber `--i` (Position des Worts, vom Skript gesetzt; mobil `--k`, s. 680-px-Block). Bewegung
   reduziert: die globale `prefers-reduced-motion`-Regel schaltet alle Uebergaenge ab, der Wechsel ist ein Schnitt. */
.topbar.tb-js .w{display:inline-block;clip-path:inset(0 0 100% 0);transform:translateY(.55em);filter:blur(3px)}
.topbar.tb-js .is-on .w{clip-path:inset(0);transform:none;filter:none;transition:clip-path .76s cubic-bezier(.2,.7,.2,1),transform .76s cubic-bezier(.2,.7,.2,1),filter .76s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.42s + var(--i,0) * 30ms)}
.topbar.tb-js .is-off .w{clip-path:inset(100% 0 0 0);transform:translateY(-.5em);filter:blur(3px);transition:clip-path .42s cubic-bezier(.4,0,1,1),transform .42s cubic-bezier(.4,0,1,1),filter .42s cubic-bezier(.4,0,1,1);transition-delay:calc(var(--i,0) * 12ms)}
/* Breit: Trennpunkte in Logo-Grün statt grosser Luecken (Werkbank) — erst ab 1200 px. Darunter brechen die vier Vorteile in zwei
   Reihen um, und ein Strich am Reihenanfang saehe verloren aus (gemessen 15.09.2026: Vorteile 1.013 px, mit
   Strichen 1.112 px Inhalt + 48 px Rand). */
@media (min-width:1200px){
  .tb-usp.wrap{column-gap:0}
  .tb-usp .tb-item + .tb-item::before{content:"";width:6px;height:6px;border-radius:50%;margin:0 9px 0 16px;background:var(--laser-punkt)}
}
/* Einzeln: Die vier Vorteile liegen im selben Rasterfeld uebereinander und kommen einzeln an die Reihe (Skript
   „Kopfleiste" setzt .tb-einzeln: auf bütic.de bis 680 px, auf klemmbrett.de, sobald sie nicht in eine Zeile passen),
   danach die Hinweis-Seite. Nicht display:none — Screenreader lesen alle vier. Wort-Staffel je Spruch (`--k`). */
.topbar.tb-einzeln .tb-usp{display:grid;justify-items:center}
.topbar.tb-einzeln .tb-usp .tb-item{grid-area:1/1}
.topbar.tb-einzeln .tb-usp .tb-item + .tb-item::before{display:none}
.topbar.tb-einzeln .is-on .w{transition-delay:calc(.42s + var(--k,0) * 42ms)}
.topbar.tb-einzeln .is-off .w{transition-delay:calc(var(--k,0) * 16ms)}
/* Kopfleiste mobil: EINE Zeile, 30 px. Ohne Skript steht nur der erste Vorteil da; der Hinweis kommt mit Kurztext. */
@media (max-width:680px){
  :root{--topbar-zeile:18px;--topbar-rand:6px}
  .topbar .wrap{flex-wrap:nowrap}
  .topbar:not(.tb-js) .tb-usp .tb-item:not(:first-child){display:none}
  .tb-hinweis .tb-lang{display:none}
}
@media (prefers-reduced-motion:reduce){.topbar *,.topbar *::before{transition:none!important}}
/* Kopf-Aktionen (Sprachwahl, Merkliste, Konto, Warenkorb) — gemeinsam mit klemmbrett.de, s. „USP-Bar“. */
.head-actions{display:flex;align-items:center;gap:4px;flex:none}
/* Sprachwahl im Kopf wie auf klemmbrett.de und bütic.com (29.10.2026): Pille mit Globus, Kürzel und Pfeil. */
.lang-switch{position:relative;flex:none;margin-right:6px}
.lang-switch-btn,.kopf-pille{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:var(--kopf-feld,42px);padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(255,255,255,.8);color:var(--ink-soft);font-family:inherit;font-size:.82rem;font-weight:600;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.lang-switch-btn:hover,.lang-switch-btn[aria-expanded="true"],.kopf-pille:hover{border-color:var(--brand);color:var(--brand)}
.lang-switch-btn svg,.kopf-pille svg{flex:none}
/* Pille als Link neben der Sprachwahl (bütic.com „Zum Shop“, Baustein shop/_kopf_pille): gleiche Größe wie die Sprach-Pille
   (Christian 05.11.2026). */
.kopf-pille{text-decoration:none;white-space:nowrap}
/* Hauptmenü der Webseiten klemmbrett.de und bütic.com (bütic.de hat statt dessen die Sortiments-Leiste). Vorlage klemmbrett.de
   (Christian 05.11.2026): 16 px, aktiver Punkt fett in der Markenfarbe. Die Seiten setzen nur noch die Klasse .kopf-menue an
   ihre Menüliste; Ein- und Ausklappen fürs Handy bleibt bei der jeweiligen Seite. */
.kopf-menue a{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:500;color:var(--ink-soft);padding:0 14px;text-decoration:none;white-space:nowrap;transition:color .15s}
.kopf-menue a:hover{color:var(--brand)}
.kopf-menue a.nav-active,.kopf-menue a.active{color:var(--brand);font-weight:700}
.lang-switch-menu{display:none;position:absolute;top:100%;right:0;margin-top:6px;min-width:160px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200}
.lang-switch-menu.open{display:block}
.lang-switch-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);font-size:.9rem;text-decoration:none}
.lang-switch-menu a:hover,.lang-switch-menu a:focus-visible{background:var(--paper)}
.lang-switch-menu a.active{color:var(--brand);font-weight:700}
/* Handy: Die Kopfzeile hat nur eine Reihe (Logo, Lupe, Aktionen). Die Pille wird dort zum Symbolknopf wie Merkliste,
   Konto und Warenkorb (Globus über dem Kürzel, ohne Rahmen und Pfeil), die vier Knöpfe rücken enger zusammen; sonst
   bricht die Reihe um (gemessen 29.10.2026: 232 px Aktionen bei 359 px Platz). */
@media (max-width:600px){
  .lang-switch{margin-right:0}
  .lang-switch-btn{flex-direction:column;gap:2px;min-height:44px;min-width:44px;padding:6px 6px;border:0;background:transparent;border-radius:10px;font-size:.6rem;justify-content:center}
  .lang-switch-btn svg:first-child{width:20px;height:20px}
  .lang-switch-btn svg:last-child{display:none}
  /* Pille als Link: auf dem Handy derselbe Symbolknopf wie die Sprachwahl, der Text bleibt für Vorleseprogramme da. */
  .kopf-pille{justify-content:center;min-height:44px;min-width:44px;padding:6px;border:0;background:transparent;border-radius:10px}
  .kopf-pille svg{width:20px;height:20px}
  .kopf-pille span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .head-actions{gap:0}
  .head-actions .icon-btn{padding-left:6px;padding-right:6px}
}
@media (max-width:400px){
  .head-actions .icon-btn,.lang-switch-btn{padding-left:4px;padding-right:4px}
}
.icon-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border:0;background:transparent;color:var(--ink-soft);border-radius:10px;transition:.14s;font-size:.6rem;font-weight:600}
.icon-btn:hover{background:rgba(255,255,255,.7);color:var(--brand)}
.icon-btn svg{width:20px;height:20px}
/* Herz fuellt sein 16er-Raster staerker als person/cart2 -> im Header einen Hauch kleiner (18px Glyph),
   Element bleibt 20px per Padding (box-sizing:border-box) -> Button-Hoehe = Konto/Korb.
   Padding oben 2 / unten 0: die Herzform wirkt durch den unteren Punkt optisch nach oben gezogen,
   darum das Glyph 1px tiefer setzen. (Bis 05.11.2026 an #navFav; jetzt am Symbol, damit es auch auf klemmbrett.de gilt.) */
.icon-btn .bic-heart{padding:2px 1px 0}
/* Abzeichen (Anzahl an Merkliste/Warenkorb, Haken am Konto) stehen am SYMBOL, nicht am Rand des Knopfs: von der Mitte aus gemessen,
   weil die Wörter verschieden breit sind (je Sprache sowieso). Bis 06.11.2026 right:5px, da rutschte die Zahl am breiten
   „Warenkorb“ 13 px neben das Symbol, an „Merkliste“ 9 px (Judith: „der braune kreis [steht] nicht am Warenkorbsymbol“). */
.icon-btn .badge,.icon-btn .kopf-haken{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:999px;background:var(--brand);color:#fff;place-items:center}
.icon-btn .badge{padding:0 4px;font-size:.6rem;font-weight:700;display:grid}
/* Angemeldet: Haken am Konto (Judith 06.11.2026: „wenn man eingeloggt ist kann man das aktuell nicht erkennen“). Sichtbar nur mit
   .angemeldet (bütic.de am Server, sonst das gemeinsame Skript shop/_kopfleiste_js über das Cookie kb_konto_an). */
.icon-btn .kopf-haken{display:none}
.icon-btn.angemeldet .kopf-haken{display:grid}
.icon-btn .kopf-haken svg{width:11px;height:11px}
@media (pointer:coarse),(max-width:680px){
  .icon-btn{min-height:44px;min-width:44px;justify-content:center}
}
/* Versteckter Zusatz für Vorleseprogramme (Name der Knöpfe, Anzahl) — gleiche Regel wie unten bei .sr-ansage. */
.head-actions .sr-ansage{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.head-actions .icon-btn{line-height:1.2}
.head-actions .bic-heart{transform:translateY(.6px)}
.head-actions .bic-cart2{transform:translateY(-1.3px)}
.footer-nl-hp, .pdp-ask .ask-hp, .pdp-restock-hp, .fu-box .fu-hp, .wf-hp{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0}
/* Widerrufsformular (shop/_widerruf_formular, seit 05.11.2026 hier statt in shop/widerruf): gemeinsam mit klemmbrett.de, dort im
   Design der Seite (eigene Farben) mit denselben Feldern, Texten und derselben Annahme im ERP (docs/124 Stufe 3c, D41). */
.wf-row{margin:14px 0}
.wf-row label{display:block;font-weight:600;color:var(--ink);margin-bottom:5px}
.wf-row .hint{font-weight:400;color:var(--muted);font-size:.85rem}
.wf-req{color:#c0392b;font-weight:700}
.wf-reqnote{color:var(--muted);font-size:.85rem;margin:8px 0 18px}
.wf-form input[type=text],.wf-form input[type=email],.wf-form textarea{
  width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:8px;font:inherit;background:#fff}
.wf-form input.err,.wf-form textarea.err{border-color:#d33}
.wf-form textarea{resize:vertical;min-height:80px}
.wf-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wf-3col{display:grid;grid-template-columns:1fr 2fr;gap:14px}
@media (max-width:560px){.wf-2col,.wf-3col{grid-template-columns:1fr}}
.wf-decl{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:16px 0;line-height:1.5}
.wf-fielderr{color:#c0392b;font-size:.85rem;margin-top:4px}
.wf-submit{border:0;cursor:pointer;padding:12px 22px;font-size:1rem}
.wf-note{color:var(--muted);font-size:.85rem;margin-top:10px}
.wf-errbox{background:#fdecec;color:#a12;border:1px solid #f3c9c9;border-radius:10px;padding:12px 16px;margin:14px 0}
/* Eingang nach dem Absenden (shop/_widerruf_eingang): bis 05.11.2026 als .wd-* in shop/widerruf_done. */
.wf-ok{display:flex;gap:12px;align-items:flex-start;background:var(--good-light);border:1px solid var(--good-line);
  border-radius:12px;padding:16px 18px;margin:6px 0 18px}
.wf-ok .wf-ic{color:var(--good);flex:none;font-size:1.4rem;line-height:1.2}
.wf-when{font-weight:700;color:var(--ink)}
.wf-sum{border:1px solid #e0e0e0;border-radius:10px;padding:14px 18px;background:#fcfcfc}
.wf-sum dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.wf-sum dt{color:var(--muted);font-weight:600}
.wf-sum dd{margin:0;color:var(--ink);white-space:pre-line}
.wf-p0{margin:0}
.wf-p1{margin:6px 0 0}
html .wf-form input[type=text],html .wf-form input[type=email],html .wf-form textarea{border-color:var(--line-strong);border-radius:12px}
html .wf-form input.err,html .wf-form textarea.err{border-color:var(--danger)}
html .wf-errbox{background:var(--danger-flaeche);color:var(--danger);border-color:var(--danger)}
html .wf-sum{border-color:var(--line);background:var(--surface)}
:root{--btn-l:52px;--btn-m:46px;--btn-s:36px;--btn-ico:36px;--chip-h:36px}
@media (max-width:680px){:root{--btn-l:48px}}
@media (pointer:coarse),(hover:none){:root{--btn-s:44px;--btn-ico:44px;--chip-h:44px}}   /* Reihenfolge bewusst andersherum: ShopWarenkorbKlickTest liest den letzten Block in der üblichen Schreibweise */
/* Bestätigt-Haken (docs/126 §6.6): 1,6 s nach „In den Warenkorb“, Klasse setzt BueticKnopf.imKorb (shop/_kopfleiste_js).
   Dunkelgrün ist Statusfarbe (D10). Inhalt des Knopfs ausgeblendet, Haken und Text kommen aus ::before/::after; die Breite hält
   das Skript, die Höhe das Raster. Bootstrap-Symbol „check-lg“ als Maske (D3), in Weiß über currentColor. */
.ist-im-korb{background:var(--web-green,#2F7A04)!important;border-color:var(--web-green,#2F7A04)!important;color:#fff!important;
  font-size:0!important;outline:0!important;box-shadow:none!important;transform:none!important;gap:7px}
.ist-im-korb>*{display:none!important}
.ist-im-korb::before{content:"";flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E") center/contain no-repeat}
.ist-im-korb::after{content:attr(data-ok);font-size:var(--ok-fs,.92rem);font-weight:700;line-height:1.2;white-space:nowrap}