/* ============================================================
   WERKBANK — Umbau nach Variante E für klemmbrett.de (office.buetic docs/110 §9.16, Markenhandbuch §8)
   Lädt als LETZTES Stylesheet im <head> jeder Seite (build-pages.php $werkbankEin), nach theme.css und den
   Inline-Stilen der Seite. Was erst im <body> steht (Partials von Kopf und Fuß), überstimmt sie über die Spezifität
   (.site-header …, .site-footer …). Werte und Bausteine wie auf bütic.de (shop-layout.css :root, Abschnitt WERKBANK).
   Etappe 1 (Grundlagen, Kopf, Fuß, Startseite), Etappe 2 (Einsatz-, Ratgeberseiten, Firmenkunden, Kontakt), Etappe 3
   (Sortiment, Farbmuster, Zubehör) und Etappe 4 (Konfigurator) live seit 23.10.2026. Weitere Etappen: docs/110 §9.16; die laufende liegt auf dem
   Zweig umbau-e und ist nur mit Vorschau-Cookie zu sehen.
   ============================================================ */

/* ---------- Grundlagen ---------- */
:root{
  --ink:#211E1A; --ink-soft:#3D352A; --muted-strong:#5A5246; --line:#E2DBC8; --line-strong:#D3C9B0; --surface:#fff;
  --brand:#8B5A2B; --brand-hover:#734A22; --web-green:#2F7A04; --danger:#C0392B; --pill:100px;
  --gruen-flaeche:rgba(122,198,24,.14);  /* Logo-Grün 14 % als Fläche: auf Creme #E8F1D3 */
  --gruen-flaeche-fest:#E8F1D3;          /* dieselbe Fläche deckend */
  --gruen-rand:rgba(122,198,24,.55);     /* Rand der Nebenknöpfe */
  --laser:rgba(122,198,24,.65); --laser-punkt:#7AC618;
  --icon-kreis:rgba(139,90,43,.08);      /* Kreis hinter Icons: Braun 8 % */
  --sand:#F4F1E7;
  --fuss-grund:#EDE5D6; --fuss-hell:#FAF8F1; --fuss-beige:#F4EDE1; --fuss-sand:#F4F1E7;
}
/* Papierkörnung (K4): dieselbe 2,7-KB-Kachel wie bütic.de (img/papierkorn.png). */
body{background:var(--paper) url("/img/papierkorn.png") 0 0/160px 160px}

/* Laserlinie: gestrichelt in Logo-Grün mit leuchtendem, pulsierendem Punkt. Nur an eigener Fertigung — auf
   klemmbrett.de ist alles in Pößneck gelasert. Rein dekorativ, im Markup immer aria-hidden. */
.laserlinie{position:relative;border-top:2px dashed var(--laser);height:0}
.laserlinie::after{content:"";position:absolute;left:var(--punkt,62%);top:-8px;width:14px;height:14px;border-radius:50%;
  background:var(--laser-punkt);box-shadow:0 0 0 5px rgba(122,198,24,.25),0 0 24px 7px rgba(122,198,24,.5)}
.laserlinie::before{content:"";position:absolute;left:var(--punkt,62%);top:-8px;width:14px;height:14px;border-radius:50%;
  opacity:0;pointer-events:none;box-shadow:0 0 0 6px rgba(122,198,24,.3),0 0 30px 12px rgba(122,198,24,.5)}
@keyframes laser-puls{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@media (prefers-reduced-motion:no-preference){.laserlinie::before{animation:laser-puls 2.4s ease-in-out infinite}}

/* Knöpfe: Hauptknopf Pille Braun, Nebenknopf weiß mit grünem Rand und Web-Grün. */
.btn,.lp-cta,.cta-band-btn{border-radius:var(--pill)}
.footer-btn-green{border-radius:var(--pill)}

/* ---------- Kopf ---------- */
.site-header .nav-links a{color:var(--ink-soft)}
.site-header .nav-links a:hover{color:var(--brand)}
.site-header .nav-links a.nav-active{color:var(--brand)}
.site-header .cart-btn{border-radius:var(--pill);border-color:var(--line-strong);background:var(--surface);color:var(--ink-soft)}
.site-header .cart-btn:hover{border-color:var(--brand);background:var(--accent-light);color:var(--brand-hover)}
.site-header .hamburger span{background:var(--ink)}
.site-header .mobile-nav{background:var(--paper);border-bottom-color:var(--line)}
.site-header .mobile-nav a{color:var(--ink);border-bottom-color:var(--line)}
.site-header .mobile-nav a.nav-active{color:var(--brand)}
.lang-switch-menu{border-color:var(--line)}

/* ---------- Fuß: hell in Boards wie bütic.de (V5 A) ---------- */
.site-footer{background:var(--fuss-grund);color:var(--ink-soft)}
.site-footer .footer-inner{color:var(--ink-soft)}
.site-footer .footer-inner>.bgg{background:var(--fuss-hell);box-shadow:0 0 0 1px rgba(115,74,34,.08)}
.site-footer .footer-inner>.bgg:nth-child(even){background:var(--fuss-beige)}
.site-footer .footer-brand-name{color:var(--accent)}
.site-footer .footer-brand-name img{filter:none}
.site-footer .footer-tagline{color:var(--ink-soft)}
.site-footer .footer-buetic-link a{color:var(--accent)}
.site-footer .footer-buetic-link a:hover{color:var(--brand-hover)}
.site-footer .footer-col-title{color:var(--accent)}
.site-footer .footer-links a,.site-footer .footer-links button{color:var(--ink-soft)}
.site-footer .footer-links a:hover,.site-footer .footer-links button:hover{color:var(--brand)}
.site-footer .footer-zeiten{color:var(--muted-strong)}
.site-footer .footer-social-links a{color:var(--web-green);background:var(--surface);border:1px solid var(--gruen-rand)}
.site-footer .footer-social-links a:hover{background:var(--gruen-flaeche);border-color:var(--gruen-rand)}
/* Newsletter: einziger grüner Kasten im Fuß (wie bütic.de). Die Werte im Fuß-Partial stehen im <body>. */
.site-footer .footer-newsletter{background:var(--gruen-flaeche-fest)}
.site-footer .footer-nl-title{font-size:17px;font-weight:800;color:var(--accent)}
.site-footer .footer-nl-sub,.site-footer .footer-nl-consent{color:var(--ink-soft)}
.site-footer .footer-nl-consent a{color:var(--accent);text-underline-offset:2px}
.site-footer .footer-nl-form input[type=email]{border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--surface);color:var(--ink)}
.site-footer .footer-nl-form input[type=email]::placeholder{color:var(--muted)}
.site-footer .footer-nl-form input[type=email]:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-light)}
.site-footer .footer-nl-msg.ok{color:var(--web-green)}
.site-footer .footer-nl-msg.err{color:var(--danger)}
.site-footer .footer-sitemap{background:var(--fuss-sand)}
.site-footer .footer-smgroup-title{color:var(--accent);border-bottom-color:var(--line)}
.site-footer .footer-smgroup a{color:var(--ink-soft)}
.site-footer .footer-smgroup a:hover{color:var(--brand)}
.site-footer .footer-bottom{border-top-color:var(--line)}
.site-footer .footer-bottom p{color:var(--muted-strong)}
.site-footer .footer-pay-badges .pay-logo,.site-footer .footer-pay-badges .pay-badge{box-shadow:0 0 0 1px var(--line)}
/* Exakt wie der Fuß von bütic.de (Judith 23.10.2026: „du hast den footer nicht exakt so gemacht wie auf bütic.de …
   übernimm das mal so“). Werte aus shop-layout.css (.site-foot …): Titel Dunkelbraun #734A22 (dort --accent), Links 13 px,
   Logo 172 px, Bewertungskacheln (.ft-badge), unterste Zeile auf getöntem Streifen über die volle Breite mit dem
   Keks-Link „Cookie-Einstellungen“. */
.site-footer{padding-top:26px;padding-bottom:30px}
.site-footer .footer-col-title,.site-footer .footer-brand-name,.site-footer .footer-nl-title,.site-footer .footer-smgroup-title{color:var(--brand-hover)}
.site-footer .footer-col-title{margin:0 0 16px;line-height:1.3}
.site-footer .footer-links a,.site-footer .footer-links button{font-size:13px;line-height:1.6}
.site-footer .footer-brand-name img{width:172px;max-width:172px;margin-bottom:12px}
.site-footer .footer-trust{display:flex;flex-direction:column;gap:8px;margin-top:14px;width:100%}
.ft-badge{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:8px 11px;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 1px var(--line)}
.ft-badge:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--line-strong),0 6px 16px rgba(60,40,20,.12)}
.ft-badge .ft-ico{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.ft-badge .ft-ico img{display:block;width:auto;height:22px}
.ft-badge .ft-body{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 auto}
.ft-badge .ft-stars{color:#fbbc05;font-size:12px;letter-spacing:1.5px}   /* Google-Sterne im Abzeichen: Fremdmarke, wie im Shop */
.ft-badge .ft-line{color:#202124;font-size:11.5px}
.ft-badge .ft-line b{font-weight:700}
.ft-badge .ft-ext{flex:0 0 auto;color:#9aa0a6;display:flex;align-items:center;font-size:12px}
.site-footer .footer-bottom{max-width:1280px;margin:20px auto -30px;padding:14px 0 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  border-top:0;border-image:linear-gradient(to bottom,var(--line-strong) 0 1px,rgba(139,90,43,.08) 1px) fill 0 / 0 / 0 100vw}
.site-footer .footer-bottom p{font-size:12px;color:var(--muted-strong);margin:0}
.footer-cc-link{font:inherit;font-size:12px;background:none;border:0;padding:0;color:var(--brand-hover);text-decoration:underline;text-underline-offset:2px;cursor:pointer;--keks-innen:var(--fuss-sand)}
.footer-cc-link:hover{color:var(--brand)}
.footer-cc-link .keks{margin-right:3px;vertical-align:-3px}
/* Spalten wie im Shop (Breakpoints 768/600): erst zwei, dann eine; die Sitemap am Handy einspaltig. */
@media (max-width:768px){.site-footer .footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.site-footer .footer-inner{grid-template-columns:1fr}.site-footer .footer-sitemap{grid-template-columns:1fr}
  .site-footer .footer-bottom{flex-direction:column;justify-content:center;text-align:center;gap:6px}}

/* Cookie-Hinweis hell; beide Knöpfe gleich gewichtet (Braun), wie bisher. */
#cookie-banner{background:var(--surface);color:var(--ink-soft);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(60,40,20,.12)}
#cookie-banner .cookie-text{color:var(--ink-soft)}
#cookie-banner .cookie-text strong{color:var(--ink)}
#cookie-banner .cookie-text a{color:var(--web-green)}
#cookie-banner .cookie-btn-ok,#cookie-banner .cookie-btn-no{border-radius:var(--pill);background:var(--brand)}
#cookie-banner .cookie-btn-ok:hover,#cookie-banner .cookie-btn-no:hover{background:var(--brand-hover)}

/* ---------- Startseite ---------- */
/* Einstieg: Eyebrow in Web-Grün, Texte in CI-Tönen, Icons im Kreis Braun 8 %. Das Wort „DEIN KLEMMBRETT“ nahm die
   gewählte Holzfarbe an (gemischt mit Schwarz) — außerhalb der CI, jetzt Braun wie jede Überschrift. */
#herotext .hero-eyebrow{color:var(--web-green);letter-spacing:.17em}
#herotext .hero-h1 .accent-word{color:var(--accent)}
#herotext .hero-subtitle,#herotext .hero-nutzen li{color:var(--ink-soft)}
#herotext .hero-herkunft{color:var(--muted-strong)}
#herotext .hero-nutzen strong{color:var(--ink)}
#herotext .hero-nutzen li i{background:var(--icon-kreis);color:var(--brand);box-shadow:none}
.hero-laser{margin:26px 0 4px}

/* Brett mit Farbwahl (V15): gewählte Farbe mit braunem Ring, Material-Knöpfe als Pillen, gewähltes Material Braun. */
#hero .hero-wahl-text{color:var(--ink-soft)}
#hero .farbe-name{color:var(--muted-strong)}
#hero .farbe[aria-checked="true"] .farbe-name{color:var(--ink)}
#hero .farbe[aria-checked="true"] .farbe-muster{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--brand)}
#hero .farbe[aria-checked="true"] .farbe-muster::before{color:var(--brand)}
#hero .mat-chips button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
#hero .mat-chips button:hover{border-color:var(--brand)}
#hero .mat-chips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
#hero .mat-chips button.on small{opacity:1}   /* Weiß mit 78 % auf Braun käme unter 4,5:1 */
#hero .farben-alle{border:1px solid var(--gruen-rand);background:var(--surface);color:var(--web-green)}
#hero .farben-alle:hover{background:var(--gruen-flaeche);border-color:var(--gruen-rand)}
#hero .hero-zyklus-btn{border:1px solid var(--line-strong);border-radius:var(--pill);color:var(--ink-soft)}
#hero .hero-muster-link small{color:var(--muted-strong)}

/* Kennzahlen: Zahlen in Plus Jakarta (wie bisher), Tinte; Trennlinien in CI. */
#trust{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#trust .trust-stat{border-right-color:var(--line)}
#trust .trust-stat::after{display:none}
#trust .trust-stat-number{color:var(--ink);font-family:var(--font)}
#trust .trust-stat-label{color:var(--muted-strong)}

/* „Schnell bei dir“: weiße Karten mit 1-px-Rand auf Papier, Icons im Kreis Braun 8 %, Titel in Plus Jakarta. */
#Zeiten{background:transparent}
#Zeiten .einsatz-card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
#Zeiten .einsatz-icon-circle{background:var(--icon-kreis);color:var(--brand)}
#Zeiten .einsatz-card-title{font-family:var(--font);font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
#Zeiten .einsatz-card-desc{color:var(--ink-soft)}

/* Kundenstimmen: Sand, weiße Karten mit 1-px-Rand, Sterne Braun. */
#kundenmeinungen{background:var(--sand)}
#kundenmeinungen .review-rating{box-shadow:0 0 0 1px var(--line)}
#kundenmeinungen .review-rating-stars,#kundenmeinungen .review-stars{color:var(--brand)}
#kundenmeinungen .review-rating-score,#kundenmeinungen .review-card-title{color:var(--ink)}
#kundenmeinungen .review-rating-count,#kundenmeinungen .review-ownlink{color:var(--muted-strong)}
#kundenmeinungen .review-ownlink:hover{color:var(--brand)}
#kundenmeinungen .review-h3{font-family:var(--font);color:var(--ink)}
#kundenmeinungen .review-card{border:1px solid var(--line);border-radius:14px}
#kundenmeinungen .review-text{color:var(--ink-soft)}
#kundenmeinungen .review-author{color:var(--muted)}
#kundenmeinungen .review-verified{color:var(--web-green)}
#kundenmeinungen .review-note{color:var(--muted-strong)}

/* Qualität: Papier statt Punktraster, Icons im Kreis, Titel in Plus Jakarta (Century nur groß). */
#qualitaet{background:transparent}
#qualitaet .quali-item{border-radius:14px;box-shadow:none}
#qualitaet .quali-icon{width:40px;height:40px;border:0;border-radius:50%;background:var(--icon-kreis)}
#qualitaet .quali-icon i{color:var(--brand)}
#qualitaet .quali-item-content h3{font-family:var(--font);font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
#qualitaet .quali-item-content p{color:var(--ink-soft)}
#qualitaet .quali-hinweis i{color:var(--web-green)}

/* Versprechen in Century (Markenhandbuch: Century für große Überschriften, Versprechen und Zitat). Der Satz trägt
   seine Werte im style-Attribut, deshalb hier mit !important. */
#versprechen{background:var(--sand)}
#versprechen .inner > p[style]{font-family:var(--headline)!important;font-style:normal!important;font-weight:700!important;
  color:var(--accent)!important;font-size:clamp(19px,2.1vw,26px)!important;line-height:1.45!important;text-wrap:balance}
/* Fetter Schnitt wie die Überschriften und das Versprechen auf bütic.de: der normale Century-Schnitt wären 65 KB mehr. */
#versprechen .versprechen-fall{border:1px solid var(--line);border-radius:14px;box-shadow:none}
#versprechen .versprechen-fall-text{color:var(--ink-soft)}

/* Einsatzgebiete: Karten auf 14 % Grün bleiben (V15), Titel in Plus Jakarta Tinte, weitere Gebiete als Pillen. */
#einsatzgebiete{background:transparent}
#einsatzgebiete .einsatz-card-title{font-family:var(--font);font-weight:800;color:var(--ink)}
#einsatzgebiete .einsatz-weitere a{border:1px solid var(--line-strong);border-radius:var(--pill)}
#einsatzgebiete .einsatz-weitere a:hover{border-color:var(--brand);color:var(--brand)}

/* Ratgeber: Pillen mit 1-px-Rand. */
#ratgeber-teaser{background:transparent}
#ratgeber-teaser .ratgeber-chip{border:1px solid var(--line-strong);border-radius:var(--pill)}
#ratgeber-teaser .ratgeber-chip:hover{border-color:var(--brand);color:var(--brand)}

/* Schluss: hell auf 14 % Grün mit Laserlinie statt Dunkelbraun (V4 „braune Flächen lichten“), als Board mit runden Ecken
   auf Inhaltsbreite wie die Fuß-Boards (Judith 23.10.2026: „hier ein board mit gerundeten ecken draus machen. gilt auch für
   alle anderen kategorieseiten“). Dasselbe für das Schlussband der Einsatz- und Themenseiten (.lp-cta-band, 13 Seiten). */
.cta-band,.lp-cta-band{box-sizing:border-box;width:min(1280px,calc(100% - 40px));margin:32px auto 40px;padding:40px 40px 44px;
  background:var(--gruen-flaeche-fest);border-radius:12px;box-shadow:0 0 0 1px rgba(115,74,34,.08)}
.cta-band .laserlinie{margin:0 0 34px}
.cta-band .cta-band-eyebrow{color:var(--web-green);letter-spacing:.17em}
.cta-band h2{color:var(--accent);font-weight:700}
.lp-cta-band h2{color:var(--accent);font-weight:700}
.lp-cta-band p{color:var(--ink-soft)}
.lp-cta-band a{background:var(--brand);color:#fff}
.lp-cta-band a:hover{background:var(--brand-hover);opacity:1}

/* ============ ETAPPE 2 · EINSATZ-, THEMEN- UND RATGEBERSEITEN, FIRMENKUNDEN, KONTAKT (live seit 23.10.2026, Judith: „etappe 2 freigegeben“) ============
   13 Seiten mit dem lp-/art-Baukasten aus theme.css (Büro, Gastronomie, Praxis, Immobilien, Geschenk, Gravur, PLEXIGLAS®,
   HDF, Klemmbrett kaufen, Konfigurator-Anleitung), Ratgeber-Übersicht (rg-*), Firmenkunden (b2b-*) und Kontakt (kontakt-*).
   Grundsatz wie beim Schlussband (Judith 23.10.2026): keine Bänder über die volle Breite, sondern Boards auf Inhaltsbreite. */

/* Kopf: Laserlinie unten im Kopf (Markup in den Vorlagen), Eyebrow wie überall. */
.lp-hero,.rg-hero{border-bottom:0;padding-bottom:40px}
.lp-hero .lp-laser,.rg-hero .lp-laser{max-width:1280px;margin:40px auto 0}
.lp-eyebrow{letter-spacing:.17em}

/* Abschnitte auf Papier statt abwechselnd weiß; Karten weiß mit 1-px-Rand, Icons im Kreis Braun 8 %, Titel Tinte. */
.lp-section,.lp-section:nth-child(even){background:transparent}
.lp-card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.lp-card-icon{width:40px;height:40px;border-radius:50%;background:var(--icon-kreis)}
.lp-card-icon svg,.lp-card-icon i{color:var(--brand)}
.lp-card h3{font-size:16px;font-weight:800;color:var(--ink)}
.lp-card p{color:var(--ink-soft)}

/* Häufige Fragen: Board statt Sandband. */
.lp-faq{background:transparent;padding-bottom:0}   /* Abstand zum nächsten Board kommt von dessen margin-top */
.lp-faq-inner{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 32px 16px;max-width:1280px}
.lp-faq-inner>*{max-width:760px;margin-left:auto;margin-right:auto}   /* Board auf Inhaltsbreite, Text in Lesebreite */
.lp-faq-item{border-bottom-color:var(--line)}
.lp-faq-item h3{color:var(--ink)}
.lp-faq-item p{color:var(--ink-soft)}

/* Merkliste-Hinweis: Board statt Band. */
.lp-merke-cta{box-sizing:border-box;width:min(1280px,calc(100% - 40px));margin:28px auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:18px 24px}
.lp-merke-icon{color:var(--brand)}
.lp-merke-inner>div:not(.lp-merke-icon){color:var(--ink-soft)}
.lp-merke-btn{background:var(--brand)}
.lp-merke-btn:hover{background:var(--brand-hover);opacity:1}

/* Ratgeber-Text: Tipp-Kasten auf 14 % Grün statt grünem Balken, Tabellen mit hellem Kopf statt Dunkelbraun. */
.art-callout{background:var(--gruen-flaeche-fest);border-left:0;border-radius:12px;padding:16px 20px}
.art-callout p{color:var(--ink-soft)}
.art-callout a{color:var(--web-green)}
.art-wrap p,.art-wrap ul li{color:var(--ink-soft)}
.art-table,.price-table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.art-table th,.price-table th{background:var(--accent-light);color:var(--ink);border-bottom:1px solid var(--line)}
.art-table td,.price-table td{border-bottom-color:var(--line)}
.art-table tr:last-child td,.price-table tr:last-child td{border-bottom:0}
.art-table tr:nth-child(even) td,.price-table tr:nth-child(even) td{background:var(--sand)}

/* Ratgeber-Übersicht: Icon im braunen Kreis statt Logo-Grün, Kartentitel in Plus Jakarta (Century nur groß), Schluss als Board. */
.rg-card{border-color:var(--line);border-radius:14px}
.rg-card:hover{border-color:var(--brand)}
.rg-card-img i,.rg-card-img svg{color:var(--brand);opacity:1}
.rg-card-img i{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:var(--icon-kreis);font-size:36px}
.rg-card-title{font-family:var(--font);font-size:17px;color:var(--ink)}
.rg-card-teaser{color:var(--ink-soft)}
.rg-cta-band{box-sizing:border-box;width:min(1280px,calc(100% - 40px));margin:32px auto 40px;padding:40px 40px 44px;
  background:var(--gruen-flaeche-fest);border-radius:12px;box-shadow:0 0 0 1px rgba(115,74,34,.08)}
.rg-cta-band h2{color:var(--accent)}
.rg-cta-band p{color:var(--ink-soft)}
.rg-cta-band a{background:var(--brand);color:#fff}
.rg-cta-band a:hover{background:var(--brand-hover);opacity:1}

/* Firmenkunden: Icons und Schrittnummern im braunen Kreis ohne grünen Ring, Karten weiß, Reiter mit 1-px-Rand, Titel Tinte. */
.b2b-ic,.b2b-step-n{background:var(--icon-kreis);color:var(--brand);outline:0}
.b2b-card,.b2b-step{background:var(--surface);border-color:var(--line);border-radius:14px}
.b2b-partner{border-color:var(--line);border-radius:14px}
.b2b-card h3,.b2b-block-title,.b2b-partner h3,.b2b-step h4{color:var(--ink)}
.b2b-card p,.b2b-partner p,.b2b-step p,.b2b-facts p,.b2b-benefits li{color:var(--ink-soft)}
.b2b-facts,.b2b-aside{border-color:var(--line);border-radius:14px}
.b2b-tabbtn{border:1px solid var(--line-strong);color:var(--ink-soft)}
.b2b-tabbtn:hover{border-color:var(--brand);color:var(--brand)}
.b2b-field input[type=text],.b2b-field input[type=email],.b2b-field input[type=tel],.b2b-field select,.b2b-field textarea{border-color:var(--line-strong)}
.b2b-field input[type=file]{border-color:var(--line-strong)}
.b2b-field input[type=file]::file-selector-button{border:1px solid var(--gruen-rand);background:var(--surface);color:var(--web-green)}
.b2b-field input[type=file]::file-selector-button:hover{background:var(--gruen-flaeche)}
.b2b-status{color:var(--danger);background:rgba(192,57,43,.08);border-color:var(--danger)}
.b2b-success{border-color:var(--good-line,#C6DDB6)}
.b2b-success-icon{background:var(--gruen-flaeche);color:var(--web-green)}

/* Kontakt: Icons im braunen Kreis, Werte in Tinte, Kästen mit 1-px-Rand. */
.kontakt-karte{border-color:var(--line);border-radius:14px}
.kontakt-karte i{background:var(--icon-kreis);color:var(--brand)}
.kontakt-wert{color:var(--ink)}
.kontakt-b2b,.kontakt-standort{border-color:var(--line);border-radius:14px}
.kontakt-b2b-titel{color:var(--ink)}
.team-karte{border-color:var(--line);border-radius:14px}
.team-foto{outline-color:var(--line-strong)}
/* Eine Inhaltsbreite wie Fuß und Boards (1280 px; Kontakt hatte 1080, Firmenkunden 1100). */
.kontakt-grid,.kontakt-b2b,.kontakt-links,.kontakt-standort,.kontakt-team,.b2b-wrap{max-width:1280px}

/* ============ ETAPPE 3 · SORTIMENT, FARBMUSTER, ZUBEHÖR (live seit 23.10.2026, Judith: „Etappe 3 … ist freigegeben“) ============
   Abläufe und Preise unverändert. Auf /muster entfällt die Kartenliste unter dem Mustertisch (Judith 23.10.2026: „so
   machen“): Großansicht und Gravur-Hinweis stecken jetzt in der Karteikarte (partials/mustertisch.php, js/mustertisch.js),
   Preis, Hinweis und Farbnamen je Material stehen kompakt in .mstr-uebersicht. */

/* Seitenköpfe von /muster und /zubehoer (ohne Kopfband): Laserlinie unter der Unterzeile, Titel in Braun. */
.mstr-main .lp-laser{margin:6px 0 30px}
.mstr-page-title{color:var(--accent)}
.mstr-page-sub{color:var(--ink-soft)}
.mstr-hint{background:var(--sand);border-color:var(--line);border-radius:12px;color:var(--ink-soft)}

/* Sortiment: Bänder raus (grau, Sand), Karten weiß mit 1-px-Rand, Titel Tinte, Reiter mit 1-px-Rand. */
#produktdetails,#sonderanfertigungen{background:transparent}
.sort-karte{background:var(--surface);border-color:var(--line);border-radius:14px}
.sort-karte h3,.sort-kachel h3{color:var(--ink)}
.sort-kachel{border-color:var(--line);border-radius:14px}
.sort-kachel:hover,.sort-karte:hover{border-color:var(--brand)}
.sort-btn{background:var(--brand)}
.sort-mat,.sort-shop{max-width:1280px}   /* eine Breite wie Fuß und Boards (vorher 1100 px) */
.details-reiter button{border:1px solid var(--line-strong);color:var(--ink-soft)}
.details-reiter button:hover{border-color:var(--brand);color:var(--brand)}
.details-reiter button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.form-card{border:1px solid var(--line);border-radius:14px}
.form-card:hover{border-color:var(--brand)}
.form-card-title{font-family:var(--font);color:var(--ink)}
.form-card-desc,.fi-feat,.oesen-feature p{color:var(--ink-soft)}
.klem-card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.klem-card span,.oesen-feature span,.klem-subtitle{color:var(--muted-strong)}
.oesen-feature{border:1px solid var(--line);border-radius:14px}
.oesen-feature h3{font-family:var(--font);color:var(--ink)}
.sonder-item{border:1px solid var(--line);border-radius:12px}
.sonder-dot{background:var(--laser-punkt)}   /* Logo-Grün nur als Akzent (vorher das alte Grün #4DBA06) */
.idx-mass-card{border-color:var(--line);border-radius:12px}
.farb-swatch-image-wrapper{background-color:var(--sand);border-radius:10px}
.farb-swatch-name{color:var(--ink-soft)}
.farb-muster{background:var(--surface);border-color:var(--line);border-radius:12px}
.farb-mat-titel{color:var(--ink)}
.farb-mat-text{color:var(--ink-soft)}

/* Mustertisch (auf /muster und /sortiment): gewähltes Material Braun statt Schwarz, gewählte Farbe mit braunem Ring,
   Knöpfe mit 1-px-Rand. Der Holztisch selbst bleibt (Judith: „der mustertisch ist klasse“). */
.mt-h2{color:var(--accent)}
.mt-text{color:var(--ink-soft)}
.mt-chips button{border:1px solid var(--line-strong);color:var(--ink)}
.mt-chips button:hover{border-color:var(--brand)}
.mt-chips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.mt-chips button.on small{opacity:1}
.mt-stueck[aria-checked="true"],.mt-stueck.plexi.neon[aria-checked="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--brand),0 20px 24px -6px rgba(60,40,20,.4)}
.mt-stueck[aria-checked="true"]::after{background:var(--brand)}
.mt-karte-mat{color:var(--muted-strong)}
.mt-karte-gravur{margin:-6px 0 10px!important;font-size:12px;font-weight:700;color:var(--brand-hover)}
.mt-karte-zoom{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--brand-hover);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mt-karte-zoom:hover{color:var(--brand)}
.mt-karte-zoom svg{flex:none}

/* Farbmuster-Seite: Erklärkästen weiß mit Rand, Gravur-Schalter auf 14 % Grün, Übersicht je Material als drei Boards. */
.mstr-intro-block{background:var(--surface);border-color:var(--line);border-radius:14px}
.mstr-intro-block p{color:var(--ink-soft)}
.mstr-gravur-toggle{background:var(--gruen-flaeche-fest);border:0;border-radius:12px;margin:24px 0}
.mgt-title,.mgt-label{color:var(--brand-hover)}
.mgt-switch input:checked + .mgt-slider{background:var(--brand)}
.mstr-uebersicht{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 8px;align-items:start}
.mstr-uebersicht .mstr-section{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.mstr-uebersicht .mstr-section-head{flex-wrap:wrap}
.mstr-section-tag{background:var(--gruen-flaeche-fest);border-color:var(--gruen-rand);color:var(--brand-hover)}
.mstr-uebersicht .mstr-section-title{font-family:var(--font);font-size:17px;font-weight:800;color:var(--ink)}
.mstr-uebersicht .mstr-hint{margin-bottom:12px}
.mstr-uebersicht .mstr-color-list{color:var(--ink-soft);margin-bottom:6px}
.mstr-uebersicht .marke-hinweis{margin:10px 0 0;padding:0}

/* Zubehör: Karten mit 1-px-Rand, Knopf als Pille, Datenkästen in CI. */
.klemme-card{border:1px solid var(--line);border-radius:14px}
.klemme-card-btn{border-radius:var(--pill);padding:6px 0;background:var(--brand)}
.klemme-card-btn:hover{background:var(--brand-hover)}
.klemme-card-btn.just-added{background:var(--web-green)}
.zub-spec-card,.zub-compare-card,.zub-info-note{border-color:var(--line);border-radius:12px}
.zub-compare-card h3,.zub-spec-sub{color:var(--brand-hover)}
.zub-info-section{border-top-color:var(--line)}
@media (max-width:900px){.mstr-uebersicht{grid-template-columns:1fr}}

@media (max-width:768px){
  .lp-merke-cta,.rg-cta-band{width:calc(100% - 40px)}
  .rg-cta-band{margin:24px auto 32px;padding:30px 20px 34px}
  .lp-faq-inner{padding:8px 18px 12px}
  .lp-hero .lp-laser,.rg-hero .lp-laser{margin-top:30px}
}

@media (max-width:768px){
  .hero-laser{margin:20px 0 0}
  .cta-band,.lp-cta-band{width:calc(100% - 40px);margin:24px auto 32px;padding:30px 20px 34px}
  /* Fuß-Boards am Handy überall 20 px vom Rand wie der Inhalt der Abschnitte (Start und Sortiment hatten 12 px, andere Seiten 16 px). */
  html .site-footer{padding-left:20px;padding-right:20px}
  /* Startseite am Handy ebenso 20 px (Kopf hatte 16, die Abschnitte 12 px). */
  #herotext,#hero,.pad{padding-left:20px;padding-right:20px}
  .cta-band .laserlinie{margin-bottom:26px}
}

/* ============ ETAPPE 4 · KONFIGURATOR (live seit 23.10.2026, Judith: „etappe 4 habe ich freigegeben“) ============
   Nur Farben, Knöpfe, Karten und Rahmen. Schritte, Preise, Gravur-Editor (.gravur-*, .gcb-*), die Vorschau des Bretts und
   der Zoom bleiben, wie sie sind. Warenkorb und Kasse sind Einblendungen auf jeder Seite (.cart-*, .co-*, .land-*, .uid-*,
   .discount-row …) und folgen in Etappe 5. Die Stile des Konfigurators stehen inline im <head> von konfigurator.html; diese
   Regeln gewinnen über die Reihenfolge, gegen die Etappe-3-Regeln für .form-card/.klemme-card über den Vorsatz .config-col.
   Auswahl wie auf der Artikelseite von bütic.de (shop-pdp.css .seg): hell mit 1-px-Rand, gewählt mit Auswahlring (2 px,
   Ausnahme laut Markenhandbuch §8) auf hellem Braun statt brauner Fläche. Nebenknöpfe weiß mit grünem Rand. */

/* Kopf: kein Band über die volle Breite, Laserlinie darunter (Markup in konfigurator.html). */
.hero{background:transparent;border-bottom:0}
.hero-tag{color:var(--muted-strong)}
.hero-chip{border-color:var(--line);color:var(--ink-soft)}
.kfg-laser{width:calc(100% - 40px);max-width:1280px;margin:6px auto 14px}

/* Schritte, Vorschau und Zusammenfassung als Boards: 1-px-Rand, Kopf auf Sand, Nummer im Kreis wie die Schritte der
   bütic.de-Startseite (.es-nr: weiß, Rand Logo-Grün, Zahl Braun); erledigt: Logo-Grün mit Haken in Tinte. */
.step-card,.preview-card,.sum-card{border:1px solid var(--line);border-radius:14px;box-shadow:none}
.step-head,.card-head{background:var(--sand);border-bottom:1px solid var(--line);border-radius:13px 13px 0 0}
.preview-card .card-head{border-radius:13px 13px 0 0}
.preview-card .preview-body{border-radius:0 0 13px 13px}
#gravur-ctrl-bar,.gcb-ribbon:last-child{border-radius:0 0 13px 13px}   /* nur die Ecken an das Board angepasst */
.step-num{width:26px;height:26px;align-self:center;margin:0 0 0 12px;border-radius:50%;background:var(--surface);
  border:1px solid var(--laser-punkt);color:var(--brand);font-size:12px;font-weight:800;letter-spacing:-.02em}
.step-num[data-no-num]{font-size:10.5px}
.step-card.step-done .step-num:not([data-no-num]){background:var(--laser-punkt);color:var(--ink)}
.step-head-inner{padding-left:10px}
.step-title{color:var(--ink);font-weight:800;letter-spacing:.05em}
.card-head{color:var(--ink);font-weight:800;letter-spacing:.06em}
.step-chosen{background:var(--gruen-flaeche-fest);color:var(--brand-hover);font-weight:600;border-radius:var(--pill)}
.step-card.step-error{outline:2px solid var(--danger)!important;border-radius:14px}

/* Bildkacheln (Form, Material, Klemme, Klemmenfarbe, Ösen, Ösenlage): weiß mit 1-px-Rand, Name auf Sand, gewählt mit
   braunem Ring und hellbraunem Namensfeld. */
.config-col .form-card,.config-col .material-card,.config-col .klemme-card,.config-col .kfarbe-card,.config-col .oesen-card,
.config-col .oes-pos-card{border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}
.config-col .form-card:hover,.config-col .material-card:hover,.config-col .klemme-card:hover,.config-col .kfarbe-card:hover,
.config-col .oesen-card:hover,.config-col .oes-pos-card:hover{border-color:var(--brand)}
.config-col .form-card.active,.config-col .material-card.active,.config-col .klemme-card.active,.config-col .kfarbe-card.active,
.config-col .oesen-card.active,.config-col .oes-pos-card.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.form-card span,.material-card span,.klemme-card span,.oesen-card span,.kfarbe-label{background:var(--sand);color:var(--ink-soft)}
.form-card.active span,.material-card.active span,.klemme-card.active span,.oesen-card.active span,
.kfarbe-card.active .kfarbe-label{background:var(--accent-light);color:var(--brand-hover);font-weight:700}
.oes-pos-card.active span{color:var(--brand-hover);font-weight:700}
.klemme-sonder-label,.oes-pos-group-label{color:var(--muted-strong)}

/* Textknöpfe (Größe, Ausrichtung, Maserung, Ösen, Gravur ja/nein). */
.size-btn,.toggle-btn{border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink)}
.size-btn:hover,.toggle-btn:hover{border-color:var(--brand);background:var(--surface);color:var(--brand-hover)}
.size-btn.active,.toggle-btn.active{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--accent-light);color:var(--brand-hover)}
.toggle-btn.active .orient-icon{color:var(--brand)}
.toggle-btn.active .maser-info svg circle:first-child{stroke:var(--brand)}
.size-note,.toggle-note{color:var(--muted-strong)}

/* Farbgruppen als Pillen; die Gruppe zeigt ein Farbpunkt (Inhalt wie die Farbmuster selbst) statt farbiger Leisten. */
/* Breite wie bisher (Rand 1 statt 1+3 px, Polster 9 statt 11 px), damit die neun Gruppen am Bildschirm in einer Zeile bleiben. */
.farb-filter{gap:6px}
.farb-filter .farb-filter-btn[data-grp]{display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 8px;border:1px solid var(--line);
  border-radius:var(--pill);background:var(--surface);color:var(--ink-soft);font-weight:500}
.farb-filter .farb-filter-btn[data-grp]:hover:not(.active){border-color:var(--brand);background:var(--surface);color:var(--brand-hover)}
.farb-filter .farb-filter-btn[data-grp].active{border-color:var(--brand);background:var(--accent-light);color:var(--brand-hover);font-weight:500}
.farb-filter-btn[data-grp]::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--grp)}
.farb-filter-btn[data-grp="alle"]{--grp:conic-gradient(#e0473b,#f0a321,#f2d22e,#5bb84a,#3d7fd6,#8f4fc4,#e0473b)}
.farb-filter-btn[data-grp="holz"]{--grp:#8B5E3C}
.farb-filter-btn[data-grp="neutral"]{--grp:#555}
.farb-filter-btn[data-grp="gelb"]{--grp:#e8a800}
.farb-filter-btn[data-grp="gruen"]{--grp:#3aaa18}
.farb-filter-btn[data-grp="blau"]{--grp:#2255cc}
.farb-filter-btn[data-grp="lila"]{--grp:#aa44cc}
.farb-filter-btn[data-grp="rot"]{--grp:#cc1111}
.farb-filter-btn[data-grp="geflammt"]{--grp:#b5450c}

/* Farbmuster: gewählt mit weiß abgesetztem braunem Ring (wie die Farbwahl der Startseite). */
.swatch-img:hover{border-color:var(--line-strong)}
.swatch-img.active{border-color:transparent;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.plexi-swatch-wrap:hover .plexi-swatch{outline:2px solid var(--line-strong);outline-offset:2px}
.plexi-swatch-wrap.active .plexi-swatch{outline:2px solid var(--brand);outline-offset:2px}
.plexi-swatch-wrap.active .plexi-swatch-label,.color-name-tag,.kfarbe-name-tag{color:var(--brand-hover);font-weight:700}
.maser-info .maser-tip{background:var(--ink)}
.muster-cta-btn{border:1px solid var(--gruen-rand);border-radius:var(--pill);background:var(--surface);color:var(--web-green);font-weight:700}
.muster-cta-btn:hover{border-color:var(--web-green);background:var(--gruen-flaeche);color:var(--web-green)}
.aufpreis-chip,.gravur-preis-chip{border-color:var(--line-strong);border-radius:var(--pill);color:var(--brand-hover)}
.aufpreis-label{color:var(--muted-strong)}

/* Vorschau: leere Fläche auf Sand statt Grau (das Brett, der Holztisch und der Zoom bleiben). */
.preview-body{background:var(--sand)}
.preview-flip-btn{border-color:var(--line-strong);border-radius:var(--pill);background:var(--surface);color:var(--ink-soft)}
.preview-flip-btn:hover{border-color:var(--brand);color:var(--brand-hover)}

/* Werkzeugleiste unter der Vorschau: fünf Nebenknöpfe statt Blau, Grün, Gelb, Lila und Rot; die Felder darunter weiß. */
.action-btns .action-btn{border:1px solid var(--gruen-rand);border-radius:var(--pill);background:var(--surface);color:var(--web-green)}
.action-btns .action-btn:hover{filter:none;border-color:var(--web-green);background:var(--gruen-flaeche)}
.config-io-panel,.share-panel,.reset-confirm-panel,.merke-name-panel,.merke-dup-panel,.inline-cookie-hint{background:var(--surface);
  border:1px solid var(--line);border-radius:12px}
.config-io-panel p,.reset-confirm-panel p,.merke-dup-panel p,.merke-name-label,.inline-cookie-hint{color:var(--ink-soft)}
.inline-cookie-hint strong{color:var(--ink)}
.inline-cookie-hint a{color:var(--brand-hover)}
.share-panel-lbl{color:var(--brand-hover)}
.kfg-trenner{border-top:1px solid var(--line);margin:10px 0 8px}
.config-io-btns .config-io-btn,.share-copy-btn{border:1px solid var(--gruen-rand);border-radius:var(--pill);background:var(--surface);color:var(--web-green)}
.config-io-btns .config-io-btn:hover,.share-copy-btn:hover{filter:none;border-color:var(--web-green);background:var(--gruen-flaeche)}
.share-copy-btn.copied{background:var(--gruen-flaeche-fest);border-color:var(--gruen-rand);color:var(--web-green)}
.config-io-btns .config-io-cancel,.reset-confirm-cancel,.merke-dup-cancel,.inline-cookie-btn-no{border:1px solid var(--line-strong);
  border-radius:var(--pill);background:var(--surface);color:var(--ink-soft)}
.config-io-btns .config-io-cancel:hover,.reset-confirm-cancel:hover,.merke-dup-cancel:hover,.inline-cookie-btn-no:hover{border-color:var(--brand);
  background:var(--surface);color:var(--brand-hover)}
.share-url-input,.merke-name-input{border:1px solid var(--line-strong);border-radius:var(--pill);color:var(--ink)}
.share-qr-wrap canvas,.share-qr-wrap img{border-color:var(--line)}
.reset-confirm-ok{background:var(--danger);border-radius:var(--pill)}
.reset-confirm-ok:hover{background:var(--danger);filter:brightness(.9)}
.merke-name-save,.merke-dup-update,.inline-cookie-btn-ok,.exit-toast-btn,.add-action-cart{background:var(--brand);border-radius:var(--pill)}
.merke-name-save:hover,.merke-dup-update:hover,.inline-cookie-btn-ok:hover,.exit-toast-btn:hover,.add-action-cart:hover{background:var(--brand-hover)}
.merke-dup-new{border:1px solid var(--brand);border-radius:var(--pill);color:var(--brand-hover)}
.merke-dup-new:hover{background:var(--accent-light)}

/* Zusammenfassung: Mengenknöpfe rund, Hinweise als Pillen in CI (Rabatt und Ersparnis grün, Versandhinweis Sand),
   Hauptknopf als braune Pille, Google-Note mit braunen Sternen wie die Bewertungen der Startseite. */
.sum-row{color:var(--muted-strong);border-bottom-color:rgba(139,90,43,.08)}
.sum-divider{background:var(--line)}
.qbtn{border:1px solid var(--line-strong);border-radius:50%;background:var(--surface)}
.qbtn:hover{border-color:var(--brand);background:var(--accent-light);color:var(--brand-hover)}
.discount-tag,.next-discount-tag,.max-discount-tag,.savings-tag,.shipping-savings-tag,.shipping-hint-tag,.total-savings-tag{border-radius:var(--pill)}
.discount-tag,.max-discount-tag,.savings-tag,.shipping-savings-tag,.total-savings-tag{background:var(--gruen-flaeche-fest);border-color:var(--gruen-rand);color:var(--web-green)}
.next-discount-tag{background:var(--sand);border-color:var(--line);color:var(--muted-strong)}
.shipping-hint-tag{background:var(--sand);border-color:var(--line-strong);color:var(--brand-hover)}
.staffel-toggle{padding:7px 14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--pill);color:var(--ink-soft)}
.staffel-toggle:hover{border-color:var(--brand);background:var(--surface);color:var(--brand-hover)}
.staffel-table th,.staffel-table td{border-bottom-color:var(--line)}
.staffel-table tr.staffel-active td,.staffel-table tr.staffel-active td:last-child{color:var(--brand-hover)}
.add-btn,.mob-add-btn{border-radius:var(--pill);text-transform:none;letter-spacing:0;font-weight:800}
.add-btn:hover{background:var(--brand-hover);box-shadow:0 4px 16px rgba(60,40,20,.2)}
.add-action-continue{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--pill)}
.add-action-continue:hover{border-color:var(--brand);background:var(--surface)}
.trust-bar{background:var(--surface);border-color:var(--line);border-radius:12px}
.trust-bar:hover{border-color:var(--brand)}
.trust-stars{color:var(--brand)}
.trust-score{color:var(--ink)}
.trust-sep{color:var(--line-strong)}
.trust-label{color:var(--muted-strong)}

/* Leiste am Handy unten. */
.mob-sum-bar{box-shadow:0 -6px 20px rgba(60,40,20,.12)}
.mob-bar-top{border-top-color:var(--line)}
.mob-icon-btn{background:var(--surface);border:1px solid var(--line-strong);border-radius:50%;color:var(--brand)}
.mob-icon-btn:hover,.mob-icon-btn:active{border-color:var(--brand);background:var(--accent-light)}
.mob-qbtn{border:1px solid var(--line-strong);border-radius:var(--pill)}
.mob-qbtn:hover{border-color:var(--brand);color:var(--brand-hover)}
.mob-qty-input{border:1px solid var(--line-strong);border-radius:12px}
.mob-add-btn:hover{background:var(--brand-hover)}

/* Hinweise: Rückkehr-Hinweis und fehlender Schritt. */
.exit-toast{border:1px solid var(--line);box-shadow:0 8px 36px rgba(60,40,20,.16)}
.exit-toast-title{color:var(--ink)}
.step-hint-toast{border:1px solid var(--danger)}
.step-hint-toast>svg,.step-hint-text strong{color:var(--danger)}
.step-hint-text{color:var(--ink)}

/* Infoteil unter dem Konfigurator: kein Band, Akkordeons und Karten als Boards, kleine Titel in Plus Jakarta (vorher
   Century unter 20 px), Icons im Kreis Braun 8 %, Tabellen mit Sand-Kopf und 1-px-Linien. */
.seo-wrap{background:transparent}
details.seo-akk{border-color:var(--line);border-radius:14px}
details.seo-akk>summary::after{color:var(--brand)}
.seo-section h3{font-family:var(--font);font-weight:800}
.seo-feature{border-color:var(--line);border-radius:14px}
.seo-feature-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--icon-kreis);color:var(--brand);font-size:19px}
.seo-feature h3{font-size:16px;color:var(--ink)}
.seo-feature p{color:var(--ink-soft)}
.seo-card{border-radius:12px}
.seo-card h3{color:var(--ink)}
.seo-faq-item{border-bottom-color:var(--line)}
.mass-table th,.mat-table th{background:var(--sand);border-color:var(--line)}
.mass-table td,.mat-table td{border-color:var(--line);color:var(--ink-soft)}
.mass-table tr:nth-child(even) td,.mat-table tr:nth-child(even) td{background:var(--fuss-hell)}
.mat-table-scroll{border-radius:10px}
.mat-ok{color:var(--web-green)}
.mat-no,.mass-note{color:var(--muted-strong)}

@media (max-width:768px){
  /* Am Handy 20 px zum Rand wie Kopf, Fuß und alle anderen Seiten (vorher 16 px). */
  .hero,.main,.seo-section{padding-left:20px;padding-right:20px}
  .kfg-laser{margin:4px auto 10px}
}
/* Klemmenfarben am Handy in zwei Reihen zu vier (vorher acht in einer Reihe, Namen wie „Regenbogen“ abgeschnitten),
   Klemmennamen eine Stufe kleiner, damit „Bügelklemme“ in die Kachel passt. */
@media (max-width:600px){
  .kfarbe-grid{flex-wrap:wrap}
  .kfarbe-card{flex:0 0 calc(25% - 4px)}
  .klemme-card span{font-size:10px;padding-left:2px;padding-right:2px}
}
@media (max-width:700px){
  .mat-table th:first-child{background:var(--sand)}
  .mat-table tr:nth-child(even) td:first-child{background:var(--fuss-hell)}
}