/* WECKTECH Shop-Entwurf – Startseite und Shopseite (eine Datei, kein Build-Schritt).
   Farben und Formen wie die Konfigurator-Landingpage; Schriften selbst gehostet (SIL Open Font License). */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/Montserrat.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/OpenSans.woff2') format('woff2');
}

:root {
  /* Markenfarben (Logo): Petrol, Grau #545a61, Anthrazit #11181c. Die Farbwerte des Schemas stehen in EINER Datei fuer
     Shop und Konfiguratoren: /static/konfigurator/css/farben.css (--wt-…, seite.php bindet sie vor dieser Datei ein).
     Die Grundgestaltung "Klar" behaelt ihre kuehlen Neutraltoene; Marke, Kopf und Fuss kommen aus dem Schema. */
  --petrol: var(--wt-akzent, #007a87); --petrol-d: var(--wt-akzent-d, #00616c); --petrol-l: var(--wt-akzent-l, #e4f1f2); --petrol-xl: var(--wt-akzent-xl);
  --ink: #11181c; --ink-2: #3d5254; --muted: #56686a; --line: #dfe8e9;
  --bg: #ffffff; --bg-2: #f5f8f8; --nacht: #11181c; --foto: #ececec;
  --warn: #b3261e;
  --r: 18px; --breite: 1200px; --rand: 20px; --kopf-h: 78px;
  --schatten: 0 2px 8px rgba(0,60,70,.07), 0 16px 40px rgba(0,60,70,.10);
  --schatten-s: 0 1px 3px rgba(0,60,70,.06), 0 8px 24px rgba(0,60,70,.07);
  --titel: "Montserrat", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font: 16px/1.6 "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
a { color: var(--petrol-d); }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--titel); text-wrap: balance; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 700; box-shadow: var(--schatten); }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.fuss :focus-visible, .toast :focus-visible { outline-color: #fff; }

.ueber {
  display: inline-block; font: 700 12px/1.4 var(--titel); letter-spacing: .12em; text-transform: uppercase;
  color: var(--petrol-d); margin-bottom: 12px;
}

/* ---------- Knoepfe und Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 12px 22px; border-radius: 12px; border: 1.5px solid transparent; background: var(--petrol); color: #fff;
  font: 700 15px/1.25 var(--titel); text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--wt-akzent) 22%, transparent);
  transition: background-color .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.btn:hover { background: var(--petrol-d); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-hell { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn-hell:hover { background: var(--petrol-l); color: var(--petrol-d); border-color: #c6dfe2; }
.btn[disabled], .btn[disabled]:hover {
  background: #e9eeee; color: #6b7b7d; border-color: #e9eeee; box-shadow: none; cursor: not-allowed; transform: none;
}
.btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.pfeil-link { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1.3 var(--titel); color: var(--petrol-d); text-decoration: none; }
.pfeil-link svg { width: 18px; height: 18px; transition: transform .15s; }
a.pfeil-link:hover { text-decoration: underline; text-underline-offset: 3px; }
a.pfeil-link:hover svg, a:hover > .pfeil-link svg, a:hover .pfeil-link svg { transform: translateX(3px); }

/* ---------- Kopfzeile: immer dunkel mit hellem Logo (Inhaber 2026-10-10: „Die Kopfzeile soll immer die dunkle sein wie auf
   der Index-Seite und auf allen anderen Seiten gleich aussehen“) – in allen Gestaltungen gleich, Farben aus farben.css.
   Die Konfiguratoren haben denselben Kopf (/static/konfigurator/css/einheit.css). ---------- */
.kopfzeile {
  position: sticky; top: 0; z-index: 50; background: var(--wt-kopf-glas, rgba(34,30,25,.97)); color: var(--wt-kopf-text, #ece3d7);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.kopfzeile.gerollt { box-shadow: 0 6px 24px rgba(0,0,0,.22); }
.kopfzeile :focus-visible { outline-color: var(--wt-kopf-aktiv, #ffc46b); }
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); min-height: var(--kopf-h);
  display: flex; align-items: center; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 11px; flex: none; color: var(--ink); text-decoration: none; border-radius: 10px; }
.logo img { width: 36px; height: 36px; border-radius: 9px; }
/* Logo (Original-Zeichen als SVG + freigestellter Schriftzug, siehe werkzeuge/logo-aufbereiten.py) */
.logo .marke-zeichen { width: auto; height: 28px; border-radius: 0; }
.logo .marke-schrift img { width: auto; height: 17px; border-radius: 0; }
.fuss .logo .marke-zeichen { height: 30px; }
.fuss .logo .marke-schrift img { height: 18px; }
.kopfzeile .logo { color: #fff; }
.kopfzeile .logo .marke-zeichen { height: 38px; }
.kopfzeile .logo .marke-schrift img { height: 22px; }
.menue { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menue a {
  font: 600 14px/1.3 var(--titel); color: var(--wt-kopf-text, #ece3d7); text-decoration: none; padding: 9px 13px; border-radius: 10px;
  transition: background-color .15s, color .15s;
}
.menue a:hover { background: var(--wt-kopf-flaeche-2, rgba(255,255,255,.12)); color: #fff; }
.menue a[aria-current="page"] { color: var(--wt-kopf-aktiv, #ffc46b); background: rgba(255,255,255,.06); }
.kopf-aktionen { display: flex; align-items: center; gap: 8px; flex: none; }
.korb {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px;
  border-radius: 12px; border: 1.5px solid var(--wt-kopf-linie, rgba(255,255,255,.2)); background: var(--wt-kopf-flaeche, rgba(255,255,255,.07)); color: #fff;
  font: 700 14px/1 var(--titel); text-decoration: none; transition: border-color .15s, color .15s, background-color .15s;
}
.korb:hover { border-color: var(--wt-kopf-aktiv, #ffc46b); color: #fff; }
.korb svg { width: 21px; height: 21px; }
.korb-zahl {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--petrol); color: #fff;
  font: 700 11.5px/21px var(--titel); text-align: center;
}
.korb-zahl.neu { animation: tupfer .5s ease-out; }
@keyframes tupfer { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.menue-knopf {
  display: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--wt-kopf-linie, rgba(255,255,255,.2));
  background: var(--wt-kopf-flaeche, rgba(255,255,255,.07)); color: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0;
}
.menue-striche, .menue-striche::before, .menue-striche::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background-color .2s;
}
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ''; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.offen .menue-striche { background: transparent; }
.offen .menue-striche::before { transform: translateY(6px) rotate(45deg); }
.offen .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(900px 520px at 88% -10%, var(--petrol-l), rgba(231,242,243,0) 62%), linear-gradient(180deg, #fff 0%, var(--petrol-xl) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-innen {
  max-width: var(--breite); margin: 0 auto; padding: 64px var(--rand) 88px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: 700 12px/1.3 var(--titel); letter-spacing: .1em; text-transform: uppercase; color: var(--petrol-d);
}
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 4px var(--petrol-l); flex: none; }
h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -.028em; font-weight: 800; }
h1 span { display: block; color: var(--petrol); }
.lead { font-size: 18.5px; line-height: 1.6; color: var(--ink-2); margin: 22px 0 30px; max-width: 31em; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-fakten {
  list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.hero-fakten b { display: block; font: 800 15px/1.3 var(--titel); color: var(--ink); }
.hero-fakten span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.hero-fakten a { display: contents; color: inherit; text-decoration: none; }
.hero-fakten a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.hero-bild { position: relative; margin: 0; }
.hero-bild > picture img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 26px; background: var(--bg-2); box-shadow: var(--schatten);
}
.hero-hinweis {
  position: absolute; right: 16px; top: 16px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--ink-2); font-size: 11.5px; font-weight: 600;
}
.hero-karte {
  position: absolute; left: -32px; bottom: -44px; width: 38%; max-width: 236px; display: block;
  padding: 8px 8px 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink);
  text-decoration: none; box-shadow: var(--schatten); transition: transform .18s, border-color .18s;
}
.hero-karte:hover { transform: translateY(-3px); border-color: var(--petrol); }
.hero-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 13px; background: var(--foto); }
.hero-karte b { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 11px 6px 0; font: 700 14px/1.3 var(--titel); }
.hero-karte b svg { width: 17px; height: 17px; color: var(--petrol); flex: none; transition: transform .15s; }
.hero-karte:hover b svg { transform: translateX(3px); }
.hero-karte span { display: block; padding: 3px 6px 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* ---------- Bloecke ---------- */
.block { max-width: var(--breite); margin: 0 auto; padding: 96px var(--rand); }
.flaeche { background: var(--petrol-xl); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kopf { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.kopf p { color: var(--ink-2); font-size: 17px; margin-top: 14px; }
.kopf-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 40px; flex-wrap: wrap; }
.kopf-zeile > div { max-width: 640px; }
.kopf-zeile p { color: var(--ink-2); font-size: 17px; margin-top: 14px; }

/* ---------- Bereiche ---------- */
.bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bereich {
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); color: inherit; text-decoration: none; box-shadow: var(--schatten-s);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.bereich:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: #c6dfe2; }
.bereich-bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.bereich-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bereich:hover .bereich-bild img { transform: scale(1.04); }
.bereich-bild.foto { background: var(--foto); }
.marker {
  position: absolute; left: 14px; top: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.95);
  color: var(--ink); font: 700 11px/1.3 var(--titel); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,40,45,.08);
}
.marker-petrol { background: var(--petrol); color: #fff; }
.bereich-txt { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.bereich-titel { font: 800 21px/1.25 var(--titel); color: var(--ink); }
.bereich-text { display: block; flex: 1; margin: 8px 0 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
/* Konfigurator-Kacheln als Karte (2026-10-11, Stil der Kupfer-Karte „Alle Heizungsadapter“): Kupfer/Schiefer im Wechsel, feine
   Kreise oben rechts, Maßzeichnung an der Stelle des Fotos – Raster und Breiten wie die Foto-Kacheln (auch im Stil „Werkstatt“) */
.bereiche .bereich.bereich-karte { position: relative; isolation: isolate; border-color: transparent; color: #fff; box-shadow: var(--schatten-s); }
.bereiche .bereich.karte-kupfer { background: linear-gradient(155deg, #b5835c 0%, var(--wt-holz-d, #8c5e3e) 58%, var(--wt-holz-dd, #7a5135) 100%); }
.bereiche .bereich.karte-schiefer { background: linear-gradient(155deg, #5d7b92 0%, var(--wt-akzent-d, #3d5668) 58%, #2c3f4d 100%); }
.bereiche .bereich.bereich-karte::before {
  content: ''; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.10) 0 1.5px, transparent 1.5px 22px);
}
.bereiche .bereich.bereich-karte:hover { border-color: transparent; box-shadow: var(--schatten); }
.bereiche .bereich-karte .bereich-zeichnung { display: flex; align-items: center; justify-content: center; padding: 16px 14px; background: none; }
.bereiche .bereich-karte .bereich-zeichnung img { width: 100%; height: 100%; max-width: 380px; object-fit: contain; opacity: .58; transition: opacity .2s; }
.bereiche .bereich-karte:hover .bereich-zeichnung img { transform: none; opacity: .8; }
.bereiche .bereich-karte .ueber { color: rgba(255,255,255,.78); margin-bottom: 6px; }
.bereiche .bereich-karte .bereich-titel { color: #fff; }
.bereiche .bereich-karte .bereich-text { color: rgba(255,255,255,.88); }
.bereiche .bereich-karte .pfeil-link { color: #fff; }

/* ---------- Produktkarten ---------- */
.produkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.produkt {
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--schatten-s);
}
.produkt-bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--foto); }
.produkt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .6s; }
.produkt-bild .bild-2 img { opacity: 0; }
.produkt:hover .produkt-bild .bild-2 img, .produkt-bild:focus-visible .bild-2 img { opacity: 1; }
.produkt:hover .produkt-bild img { transform: scale(1.03); }
.produkt-txt { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.produkt h3 { font: 700 18.5px/1.3 var(--titel); }
.produkt h3 a { color: inherit; text-decoration: none; }
.produkt h3 a:hover { color: var(--petrol-d); text-decoration: underline; text-underline-offset: 3px; }
.produkt-text { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.haken { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.haken li, .haken .li-ersatz { position: relative; display: block; padding-left: 26px; }
.haken li::before, .haken .li-ersatz::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--petrol-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300646E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.produkt-fuss { margin-top: auto; padding-top: 22px; }
.preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 14px; }
.preis b { font: 800 27px/1.1 var(--titel); letter-spacing: -.01em; color: var(--ink); }
.preis small { font-size: 12.5px; color: var(--muted); }
.preis small a { color: inherit; }
.produkt-knoepfe { display: flex; gap: 10px; }
.produkt-knoepfe .btn { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
.produkt-knoepfe .btn-hell { flex: 0 0 auto; }
.produkt-hinweis {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 11px; border-radius: 10px;
  background: #fff6e8; border: 1px solid #f0d3a2; color: #6e4300; font-size: 13px; line-height: 1.4;
}
.produkt-hinweis svg { width: 16px; height: 16px; flex: none; }

.produkt-mehr {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 30px 28px 28px; border-radius: var(--r);
  color: #eaf5f6; text-decoration: none; isolation: isolate;
  background: linear-gradient(155deg, #00737e 0%, var(--petrol-d) 55%, #0b4f56 100%);
  box-shadow: var(--schatten-s); transition: transform .18s, box-shadow .18s;
}
.produkt-mehr:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.produkt-mehr::before {
  content: ''; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; z-index: -1;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.10) 0 1.5px, transparent 1.5px 22px);
}
.produkt-mehr .ueber { color: #e3f4f6; }
.produkt-mehr-titel { display: block; font: 800 26px/1.2 var(--titel); color: #fff; letter-spacing: -.01em; }
.produkt-mehr-text { display: block; margin-top: 12px; font-size: 15px; color: rgba(234,245,246,.88); }
.produkt-mehr .haken { margin: 20px 0 28px; color: #eaf5f6; }
.produkt-mehr .haken .li-ersatz::before { background-color: rgba(255,255,255,.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.mehr-zeichnung { display: block; margin: auto -6px 22px; }
.mehr-zeichnung img { width: 100%; max-width: 360px; filter: invert(1) grayscale(1); mix-blend-mode: screen; opacity: .42; }
.produkt-mehr .pfeil-link { color: #fff; }
.produkt-mehr:focus-visible { outline-color: var(--ink); }

/* ---------- Vertrauensleiste ---------- */
.vertrauen { background: #fff; border-bottom: 1px solid var(--line); }
.vertrauen ul {
  max-width: var(--breite); margin: 0 auto; padding: 40px var(--rand); list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px;
}
.vertrauen li b a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
/* Gewährleistung auf Produktseiten (2026-10-12, shop.js gewaehrSetzen) */
.wt-gw { display: flex; align-items: center; gap: 9px; margin: 8px 0 6px; font: 600 13.5px/1.35 var(--titel); color: var(--wt-text-2, #435059); }
.wt-gw > svg { flex: none !important; width: 22px !important; height: 22px !important; max-width: none !important; }
.wt-gw > span { flex: 1 1 auto; min-width: 0; }
.wt-gw a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Kundenstimmen am Handy zum Wischen (wie die Videos) */
@media (max-width: 699px) {
  .bw-karten { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .bw-karten > * { scroll-snap-align: start; }
}
.vertrauen li { display: flex; gap: 14px; align-items: flex-start; }
.vertrauen .ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--petrol-l); color: var(--petrol-d); }
.vertrauen .ico svg { width: 23px; height: 23px; }
.vertrauen b { display: block; font: 700 15px/1.3 var(--titel); color: var(--ink); margin-top: 2px; }
.vertrauen span.t { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* ---------- Ueber uns ---------- */
.ueber-uns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ueber-uns-text p { margin-top: 16px; font-size: 16.5px; color: var(--ink-2); max-width: 36em; }
.ueber-uns-text h2 + p { margin-top: 18px; }
.ueber-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.ueber-karte {
  margin: 0; padding: 40px 36px 32px; border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(420px 260px at 100% 0%, var(--petrol-l), rgba(231,242,243,0) 70%), var(--petrol-xl);
}
.ueber-karte img { width: min(300px, 82%); margin: 0 auto 28px; }
.ueber-karte dl { margin: 0; display: grid; gap: 0; }
.ueber-karte dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.ueber-karte dt { color: var(--muted); }
.ueber-karte dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

/* ---------- Fusszeile ---------- */
.fuss { background: var(--nacht); color: #b9c9cb; font-size: 14.5px; }
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 64px var(--rand) 44px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px;
}
.fuss-marke .logo { color: #fff; margin-bottom: 16px; }
.fuss-marke p { max-width: 26em; line-height: 1.6; }
/* „Made im Erzgebirge“ (eigenes Zeichen, Variante B, 2026-10-11) – Fußzeile und Über uns */
.fuss-marke img.fuss-erzgebirge { display: block; width: auto; height: 46px; margin-top: 18px; }
.rechtstext p.erz-zeichen { margin: 22px 0 6px; }
/* Über uns (2026-10-11): Porträt neben dem Einstieg, am Handy darüber */
.ueber-kopf { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; margin: 18px 0 8px; }
.ueber-bild { margin: 0; }
.ueber-bild img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 20px; box-shadow: var(--schatten-s); }
.ueber-bild figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.rechtstext p.ueber-lead { font: 700 19px/1.45 var(--titel); color: var(--ink); margin-bottom: 14px; }
.rechtstext p.ueber-gruss { font: 700 17px/1.4 var(--titel); color: var(--ink); margin-top: 18px; }
@media (max-width: 640px) {
  .ueber-kopf { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ueber-bild { max-width: 240px; }
}
.rechtstext p.erz-zeichen img { display: block; width: auto; height: 64px; max-width: 100%; }
.fuss h2 { font: 700 12.5px/1.3 var(--titel); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 4px 0 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fuss a { color: #d6e3e4; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fuss-unten {
  max-width: var(--breite); margin: 0 auto; padding: 20px var(--rand) 28px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: 13.5px;
}
/* Widerrufsfunktion (§ 356a BGB, 2026-10-12): farbig hervorgehoben, auf jeder Seite unten */
.fuss a.fuss-widerruf {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px; border: 2px solid #e3a06c; border-radius: 999px;
  background: rgba(227,160,108,.16); color: #fff; font: 700 15px/1.2 var(--titel); text-decoration: none;
}
.fuss a.fuss-widerruf:hover, .fuss a.fuss-widerruf:focus-visible { background: #e3a06c; color: #1d2327; text-decoration: none; }
/* Zahlungs-Icons (2026-10-13), 38 × 24 wie die Icons aus activemerchant/payment_icons */
.fuss ul.fuss-zahlarten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fuss-zahlarten li { display: flex; }
.fuss-zahlarten img { display: block; width: 38px; height: 24px; }
.fuss-zahlarten li.fuss-zahlart-text {
  height: 24px; padding: 0 8px; align-items: center; border-radius: 3px; background: #fff; color: #1d2327;
  font: 700 11px/1 var(--titel); letter-spacing: .02em;
}
.entwurf {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,196,94,.12); border: 1px solid rgba(255,196,94,.35); color: #ffd690; font-weight: 600;
}
.entwurf i { width: 8px; height: 8px; border-radius: 50%; background: #ffc45e; flex: none; }

/* ---------- Toast (Rueckmeldung Warenkorb) ---------- */
.toast-bereich { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 560px; margin-bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 12px 10px 12px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14.5px; line-height: 1.45;
  box-shadow: 0 18px 44px rgba(0,0,0,.28); animation: toast-rein .25s ease-out;
}
.toast-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--petrol); }
.toast-ico svg { width: 15px; height: 15px; }
.toast-fehler { background: #4d1915; }
.toast-fehler .toast-ico { background: var(--warn); }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast a { color: #9fe3ea; font-weight: 700; white-space: nowrap; margin-left: 4px; }
.toast-zu { flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.toast-zu:hover { background: rgba(255,255,255,.12); }
.toast-zu svg { width: 16px; height: 16px; }
@keyframes toast-rein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Shopseite ---------- */
.krumen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.krumen li + li::before { content: '/'; margin-right: 6px; color: #a9b8ba; }
.krumen a { color: var(--ink-2); text-decoration: none; }
.krumen a:hover { color: var(--petrol-d); text-decoration: underline; }
.shop-bereich { max-width: var(--breite); margin: 0 auto; padding: 32px var(--rand) 88px; min-height: 60vh; }
/* Kategorien (2026-10-11): unter 1000 px eine Zeile zum Wischen (Felder mit kleinem Piktogramm), ab 1000 px Liste links */
.shop-kategorien { max-width: var(--breite); margin: 0 auto; padding: 14px 0 0; }
/* YouTube-Videos mit eigenem Vorschaubild (2026-10-12, privat/lib/videos.php): Handy zum Wischen, ab 700 px zwei Spalten */
.wt-videos { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; margin-top: 18px; scrollbar-width: thin; }
.wt-videos-eins { display: block; overflow: visible; max-width: 720px; margin: 22px 0 26px; padding: 0; }
.wt-video { margin: 0; scroll-snap-align: start; min-width: 0; }
.wt-video[hidden] { display: none; }
.wt-video-start { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: #1d2327; aspect-ratio: 16 / 9; box-shadow: 0 6px 22px rgba(20, 30, 38, .16); transition: transform .2s, box-shadow .2s; }
.wt-video-start img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wt-video-start:hover, .wt-video-start:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 30, 38, .24); }
.wt-video-start:focus-visible { outline: 3px solid var(--akzent, #a8734e); outline-offset: 3px; }
.wt-video-rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.wt-video-rahmen iframe, .wt-video-rahmen video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wt-video-rahmen video { object-fit: cover; background: #232a31; }
.wt-video figcaption { padding: 12px 2px 0; display: grid; gap: 4px; }
.wt-video figcaption b { font: 700 17px/1.3 var(--titel); }
.wt-video figcaption span { font-size: 15px; line-height: 1.5; }
.wt-video figcaption small { font-size: 12.5px; color: var(--wt-text-2, #5b6770); }
/* Link zum Artikel unter dem Video (2026-10-13) */
.wt-video figcaption a.wt-video-link { justify-self: start; font: 700 15px/1.3 var(--titel); color: var(--petrol-d); text-decoration: none; }
.wt-video figcaption a.wt-video-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) {
  .wt-videos:not(.wt-videos-eins) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 26px 28px; }
}
.shop-videos { max-width: var(--breite); margin: 26px auto 10px; padding: 0 var(--rand, 16px); }
.shop-videos[hidden] { display: none; }
.shop-videos h2 { font: 800 22px/1.25 var(--titel); margin: 0; }
.shop-videos .wt-videos { grid-auto-columns: 86%; }
@media (min-width: 700px) { .shop-videos .wt-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; } }
/* Größen-Plaketten (2026-10-12, Truma-Konzept, Farben vom Inhaber bestätigt): Pille mit dem Schlauchnamen, Farbe je Schlauch –
   gleiche Farbe = passt zusammen. Die Schrift steht immer drauf (auch bei Farbschwäche lesbar). privat/lib/truma-passt.php */
.wt-pl { display: inline-block; font: 800 11.5px/1 var(--titel); letter-spacing: .01em; padding: 4px 8px 3px; border-radius: 999px;
  white-space: nowrap; vertical-align: 1px; margin-left: 6px; border: 1px solid transparent; }
.wt-pl-aus { background: #232a31; color: #fff; }
.wt-pl-a25 { background: #a9c8de; color: #232a31; }
.wt-pl-a42 { background: linear-gradient(155deg, #5d7b92, #3d5668 58%, #2c3f4d); color: #fff; }
.wt-pl-t35 { background: #e2b98f; color: #232a31; }
.wt-pl-t65 { background: linear-gradient(155deg, #b5835c, #8c5e3e 58%, #7a5135); color: #fff; }
.wt-pl-s73 { background: #dce2e6; color: #232a31; border-color: #8a96a0; }
/* „So baust du es zusammen“ unter den Truma-Produkten: Handy untereinander, ab 760 px vier Spalten */
.shop-passt { max-width: var(--breite); margin: 0 auto 10px; padding: 0 var(--rand, 16px); }
.shop-passt[hidden] { display: none; }
.sp-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 14px; }
.sp-kopf h2 { margin: 0; font: 800 22px/1.25 var(--titel); }
.sp-legende { font-size: 14px; color: var(--muted); }
.sp-legende .wt-pl { margin-left: 4px; }
.sp-zeilen { display: grid; gap: 12px; margin: 0; }
.sp-zeile { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 10px; min-width: 0; }
.sp-zeile dt { font: 800 14px/1.3 var(--titel); color: var(--petrol-d); margin-bottom: 6px; }
.sp-zeile dd { margin: 0; }
.sp-zeile ul { list-style: none; margin: 0; padding: 0; }
.sp-zeile li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.sp-zeile li:first-child { border-top: 0; padding-top: 0; }
.sp-zeile li a { font-weight: 600; text-decoration: none; }
.sp-zeile li a:hover, .sp-zeile li a:focus-visible { text-decoration: underline; }
.sp-zeile li .wt-pl { font-size: 10.5px; padding: 3px 7px 2px; }
.sp-hinweis { margin-top: 12px; font-size: 14.5px; padding: 10px 14px; border-left: 4px solid var(--wt-amber, #e2b98f); background: var(--wt-holz-l, #f2e4d9); border-radius: 0 10px 10px 0; }
.sp-fuss { margin-top: 10px; font-size: 14px; color: var(--muted); }
@media (min-width: 760px) {
  .sp-zeilen { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* Übersichtsgrafik „Warmluft-Baukasten“ in Ratgebern (klickbar für die volle Größe) */
.wt-baukasten { margin: 22px 0 26px; }
.wt-baukasten a { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.wt-baukasten img { width: 100%; height: auto; }
.wt-baukasten figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
/* Bild im Ratgeber (2026-10-13, Comic „Hund vor der Heizung“) */
.ratgeber-bild { margin: 22px 0 26px; }
.ratgeber-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; }
.ratgeber-bild figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
/* Lieferampel der Shop-Artikel (2026-10-11): Punkt + Text, Produktseite unter dem Preis, Kacheln mit Kurztext */
.wt-sa { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1.3 var(--titel); color: var(--wt-text-2, #435059); }
.wt-sa .wt-sa-pkt { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.wt-sa-gruen .wt-sa-pkt { background: #2e7d32; box-shadow: 0 0 0 3px rgba(46, 125, 50, .18); }
.wt-sa-gelb .wt-sa-pkt { background: #e59400; box-shadow: 0 0 0 3px rgba(229, 148, 0, .2); }
.wt-sa-rot .wt-sa-pkt { background: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .18); }
.mit-shop-ampel .details-product-purchase__place { display: none; }
.wt-sa-produkt { margin: 10px 0 6px; }
.wt-sa-kachel { margin: 4px 0 10px; text-align: left; }
.wt-sa-kachel .wt-sa { font-size: 12px; gap: 6px; }
.wt-sa-kachel .wt-sa .wt-sa-pkt { width: 8px; height: 8px; }
.sk-titel { display: none; }
.sk-innen { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px var(--rand) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sk-innen::-webkit-scrollbar { display: none; }
.sk-ikon { display: block; flex: none; width: 26px; height: 26px; border-radius: 7px; }
.shop-kategorien a.sk { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 38px; padding: 0 13px 0 6px; border: 1px solid var(--wt-linie-2, #c8d0d5);
  border-radius: 999px; background: var(--wt-karte, #fff); color: var(--wt-text, #22282d); font: 600 13px/1 var(--titel); text-decoration: none;
  white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.shop-kategorien a.sk:hover { border-color: var(--wt-akzent, #4f6b80); color: var(--wt-akzent-d, #3d5668); }
.shop-kategorien a.sk[aria-current="page"] { background: var(--wt-akzent, #4f6b80); border-color: var(--wt-akzent, #4f6b80); color: #fff; }
.shop-kategorien a.sk:focus-visible { outline: 2px solid var(--wt-akzent, #4f6b80); outline-offset: 2px; }
@media (min-width: 1000px) {
  .shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
  .shop-layout .shop-bereich { max-width: none; padding-left: 0; padding-right: 0; }
  .shop-layout .shop-kategorien { position: sticky; top: calc(var(--kopf-h) + 12px); margin: 0; padding: 28px 0 24px; }
  .sk-titel { display: block; margin: 0 0 10px 10px; font: 800 12px/1 var(--titel); letter-spacing: .1em; text-transform: uppercase; color: var(--wt-text-3, #66727b); }
  .sk-innen { flex-direction: column; gap: 2px; overflow: visible; padding: 0; }
  .sk-ikon { width: 40px; height: 40px; border-radius: 9px; }
  .shop-kategorien a.sk { height: auto; gap: 11px; padding: 6px 10px 6px 6px; border: 0; border-radius: 12px; background: none; white-space: normal; line-height: 1.3; font-size: 13.5px; }
  .shop-kategorien a.sk:hover { background: var(--wt-akzent-xl, #eef2f5); color: var(--wt-akzent-dd, #34495a); }
  .shop-kategorien a.sk[aria-current="page"] { background: var(--wt-akzent-l, #e2e9ee); color: var(--wt-akzent-dd, #34495a); box-shadow: inset 3px 0 0 var(--wt-akzent, #4f6b80); }
  /* klebt, ragt aber nie unter den Fensterrand: wird die Liste länger als das Fenster, scrollt sie für sich (2026-10-14) */
  .shop-layout .shop-kategorien { max-height: calc(100vh - var(--kopf-h) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* niedrige Desktop-Fenster (1366 × 657, Full HD mit Windows 150 % = 1280 × 595; werkzeuge/format-browser-test.js 2026-10-14): die
   zehn Kategorien waren 612 px hoch und ragten unter den Fensterrand – knapper, damit alle zu sehen sind */
@media (min-width: 1000px) and (max-height: 760px) {
  .shop-layout .shop-kategorien { padding: 14px 0 12px; }
  .sk-titel { margin-bottom: 6px; }
  .sk-ikon { width: 30px; height: 30px; border-radius: 7px; }
  .shop-kategorien a.sk { padding: 3px 10px 3px 6px; font-size: 13px; line-height: 1.25; }
}
/* Shop-Startseite schlank (2026-10-11): der Shop gleich oben, die Erklärung klein darunter */
.shop-bereich.shop-oben { padding-top: 14px; padding-bottom: 28px; }
.shop-info { max-width: var(--breite); margin: 0 auto; padding: 18px var(--rand) 56px; border-top: 1px solid var(--line); }
.shop-info p { max-width: 46em; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
/* Erklärung der Kategorie (aus dem Shop) unter die Produkte (Inhaber 2026-10-11: „Die Erklärung bitte unten drunter“) */
.shop-rahmen .ec-grid.grid__wrap { display: flex; flex-direction: column; }
.shop-rahmen .ec-grid.grid__wrap > .grid__description { order: 2; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.shop-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 26px; color: var(--muted); font-size: 14.5px; }
.kreisel { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--petrol-l); border-top-color: var(--petrol); animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.skelett { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.skelett span { display: block; border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 12px; }
.skelett span::before, .skelett span::after {
  content: ''; display: block; border-radius: 10px;
  background: linear-gradient(90deg, #edf3f3 0%, #f7fafa 50%, #edf3f3 100%); background-size: 200% 100%; animation: schimmer 1.4s linear infinite;
}
.skelett span::before { aspect-ratio: 4 / 3; }
.skelett span::after { height: 14px; width: 70%; margin: 16px 4px 6px; }
@keyframes schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.shop-rahmen.geladen .shop-platzhalter { display: none; }
.shop-fehler {
  max-width: 640px; margin: 8px auto 0; padding: 24px; border-radius: var(--r); border: 1px solid #f0d3a2; background: #fff6e8;
  color: #5c3800; text-align: center;
}
.shop-fehler b { display: block; font: 700 17px/1.3 var(--titel); margin-bottom: 6px; color: #4a2d00; }
.shop-fehler a { color: #5c3800; font-weight: 700; }

/* ---------- Hinweis: Positionen aus dem Konfigurator noch nicht im Shop-Warenkorb (shop.js) ---------- */
/* Zeichen im Kopf neben dem Warenkorb (2026-10-11, statt der Leiste): leuchtet, Zahl der offenen Positionen */
.konfig-signal {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  border-radius: 12px; background: #ffb547; color: #3a2300; text-decoration: none; animation: konfig-leuchten 1.6s ease-out infinite;
}
.konfig-signal[hidden] { display: none; }
.konfig-signal:hover { background: #ffc46b; color: #3a2300; }
.konfig-signal:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.konfig-signal svg { width: 23px; height: 23px; }
.konfig-signal-zahl {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: #c2410c; color: #fff; font: 700 11.5px/20px var(--titel); text-align: center; box-shadow: 0 0 0 2px var(--wt-kopf, #232a31);
}
@keyframes konfig-leuchten {
  0% { box-shadow: 0 0 0 0 rgba(255, 181, 71, .8); }
  70% { box-shadow: 0 0 0 13px rgba(255, 181, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 181, 71, 0); }
}
@media (prefers-reduced-motion: reduce) { .konfig-signal { animation: none; box-shadow: 0 0 0 3px rgba(255, 181, 71, .5); } }
@media (max-width: 440px) { html.mit-konfig-signal .logo .marke-schrift { display: none; } }
/* dasselbe, wenn nur die Zahl am Warenkorb steht (werkzeuge/format-browser-test.js 2026-10-14: bei 375 px ragte der Menü-Knopf
   sonst 24 px aus dem Fenster, die Seite ließ sich seitlich schieben) */
@media (max-width: 440px) { .kopfzeile:has(.korb-zahl:not([hidden])) .logo .marke-schrift { display: none; } }
.konfig-ico { flex: none; width: 20px; height: 20px; color: #a8620a; }
.konfig-ico svg { width: 100%; height: 100%; }
.konfig-korb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0 0 24px; padding: 18px 20px;
  border-radius: var(--r); border: 1px solid #f0d3a2; background: #fff6e8; color: #5c3800;
}
.konfig-korb .konfig-ico { width: 28px; height: 28px; }
.konfig-korb > div { flex: 1 1 20em; min-width: 0; }
.konfig-korb b { display: block; font: 700 16.5px/1.35 var(--titel); color: #4a2d00; }
.konfig-korb p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }
.konfig-korb .btn { flex: none; }
/* Preisprüfung (Nachtprüfung 2026-10-23, shop.js preisHinweis): Position passt nicht zur gespeicherten Konfiguration */
.konfig-korb.preis-korb { border-color: #efb4ae; background: #fff1f0; color: #5a1610; }
.konfig-korb.preis-korb b { color: #5a1610; }
.konfig-korb.preis-korb .konfig-ico { color: #b3261e; }
.konfig-korb.preis-korb ul { margin: 6px 0 0 1.1em; padding: 0; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 640px) {
  .konfig-korb .konfig-ico { display: none; }
  .konfig-korb { padding: 16px; }
  .konfig-korb .btn { flex: 1 1 100%; }
}

/* ---------- Ecwid-Widget an die Marke anpassen (vorsichtig: nur Schrift, Farben, Rundungen) ---------- */
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .ec-header-h1,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .ec-header-h2,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .ec-header-h3,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .ec-header-h4,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .ec-header-h5,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .ec-header-h6,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__title-inner,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-category__title-inner,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__price-value,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .details-product-price__value,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .form-control--primary .form-control__button {
  font-family: var(--titel);
}
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__button .form-control__button { font-size: 14px; font-weight: 600; }
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__title-inner { font-weight: 700; color: var(--ink); }
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .product-details__product-title { font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__price-value,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .details-product-price__value { font-weight: 700; color: var(--ink); }
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .form-control--primary .form-control__button {
  background-color: var(--petrol); border-color: var(--petrol); color: #fff; border-radius: 12px;
}
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .form-control--primary .form-control__button:hover {
  background-color: var(--petrol-d); border-color: var(--petrol-d);
}
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .form-control--secondary .form-control__button {
  color: var(--petrol-d); border-color: #b9d8db; border-radius: 10px;
}
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .form-control--secondary .form-control__button:hover {
  background-color: var(--petrol-l); border-color: var(--petrol);
}
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__image,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__bg,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__shadow,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-category__image,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-category__bg { border-radius: 12px; }
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-product__image,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .grid-category__image { overflow: hidden; }
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .details-gallery__image-wrapper-inner,
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .details-gallery__picture { border-radius: 14px; }
html#ecwid_html body#ecwid_body .ec-size .ec-wrapper .ec-label { border-radius: 999px; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .hero-innen { gap: 48px; }
  .produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .produkt-mehr { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: 36px; align-content: start; }
  .produkt-mehr > * { grid-column: 1; }
  .produkt-mehr .mehr-zeichnung { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; }
  .produkt-mehr .haken { margin: 18px 0 24px; }
  .vertrauen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}

/* ---------- Handy: Klappnavigation ---------- */
@media (max-width: 900px) {
  :root { --rand: 16px; --kopf-h: 66px; }
  .kopfzeile .logo .marke-zeichen { height: 30px; }
  .kopfzeile .logo .marke-schrift img { height: 18px; }
  .kopf-innen { gap: 12px; }
  .kopf-aktionen { margin-left: auto; }
  .korb { padding: 0 11px; }
  .korb-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .menue-knopf { display: inline-flex; }
  .js .menue {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 16px 18px; background: var(--wt-kopf, #221e19); border-bottom: 0; box-shadow: 0 22px 34px rgba(0,0,0,.3);
  }
  .js .kopfzeile.offen { background: var(--wt-kopf, #221e19); border-bottom-color: transparent; }
  .js .kopfzeile.offen .menue { display: flex; }
  .js .menue a { padding: 13px 12px; font-size: 16px; border-radius: 10px; }
  html:not(.js) .kopf-innen { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .menue { order: 3; width: 100%; margin: 0; flex-wrap: wrap; }

  .hero-innen { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px var(--rand) 64px; }
  .lead { font-size: 17px; margin: 18px 0 26px; }
  .hero-bild > picture img { aspect-ratio: 1 / 1; border-radius: 22px; }
  .hero-karte { left: 12px; bottom: -32px; width: 52%; max-width: 240px; padding: 6px 6px 11px; border-radius: 16px; }
  .hero-karte img { border-radius: 11px; }
  .hero-karte b { font-size: 13px; padding-top: 8px; }
  .hero-karte span { display: none; }
  .block { padding: 72px var(--rand); }
  .kopf { margin-bottom: 32px; }
  .bereiche { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bereich { flex-direction: row; }
  .bereich-bild { flex: 0 0 38%; aspect-ratio: auto; min-height: 100%; }
  .bereich-txt { padding: 18px 18px 18px; }
  .bereich-titel { font-size: 18px; }
  .bereich-text { font-size: 14.5px; margin: 6px 0 12px; }
  .ueber-uns { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .skelett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 640px) {
  .hero-knoepfe .btn { flex: 1 1 100%; }
  .hero-fakten { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 30px; padding-top: 20px; }
  .hero-fakten li { display: flex; align-items: baseline; gap: 10px; }
  .hero-fakten b { flex: 0 0 124px; }
  .hero-fakten span { margin-top: 0; }
  .bereich { flex-direction: column; }
  .bereich-bild { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .produkte { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .produkt-mehr { display: flex; }
  .produkt-mehr .mehr-zeichnung { margin: auto -6px 22px; }
  .produkt-txt { padding: 20px 18px 20px; }
  .vertrauen ul { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px var(--rand); }
  .fuss-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-top: 48px; }
  .ueber-karte { padding: 30px 20px 22px; }
}

@media (max-width: 420px) {
  .logo img { width: 32px; height: 32px; }
  .logo .marke-zeichen { width: auto; height: 24px; }
  .logo .marke-schrift img { width: auto; height: 15px; }
  .produkt-knoepfe { flex-wrap: wrap; }
  .produkt-knoepfe .btn, .produkt-knoepfe .btn-hell { flex: 1 1 100%; }
  .fuss-innen { grid-template-columns: minmax(0, 1fr); }
  .skelett { grid-template-columns: minmax(0, 1fr); }
  .skelett span:nth-child(n+3) { display: none; }
  .toast { font-size: 14px; }
}

/* ---------- Shop mit vorgerenderter Seite (B1): Shop-Skript unsichtbar aufbauen, dann tauschen ---------- */
.shop-rahmen.mit-vorab:not(.geladen) > [id^="my-store-"] { height: 0; overflow: hidden; }
#static-ec-store .static-content__wait { opacity: .6; }

/* ---------- „Fragen?“-Blase: Chat (Crisp), WhatsApp, E-Mail (2026-10-11, ersetzt den WhatsApp-Knopf) ---------- */
.frag { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
html.chat-offen .frag { display: none; }
.frag-knopf { display: flex; align-items: center; gap: 9px; padding: 11px 18px 11px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wt-akzent, #4f6b80); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.2); font: 700 15px/1.2 var(--titel); }
.frag-knopf:hover, .frag-knopf[aria-expanded="true"] { background: var(--wt-akzent-d, #3d5668); }
.frag-knopf:focus-visible, .frag-weg:focus-visible { outline: 3px solid var(--wt-kopf-aktiv, #ffc46b); outline-offset: 2px; }
.frag-knopf svg { width: 24px; height: 24px; flex: none; }
.frag-menue { width: min(300px, calc(100vw - 32px)); padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0,0,0,.2); display: grid; gap: 8px; }
.frag-menue[hidden] { display: none; }
.frag-titel { margin: 0 2px 2px; font: 700 15px/1.3 var(--titel); color: var(--ink); }
.frag-weg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; font: 700 14.5px/1.25 var(--titel); }
.frag-weg[hidden] { display: none; }
.frag-weg:hover { border-color: var(--wt-akzent, #4f6b80); background: var(--wt-akzent-xl, #f1f4f6); }
.frag-weg svg { width: 24px; height: 24px; flex: none; color: var(--wt-akzent-d, #3d5668); }
.frag-weg[href^="https://wa.me"] svg { color: #1f7a4d; }
.frag-weg small { display: block; margin-top: 2px; font: 400 12.5px/1.35 "Open Sans", sans-serif; color: var(--muted); }
.frag-hinweis { margin: 2px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.frag-fehler { margin: 0 2px; padding: 8px 10px; border-radius: 10px; background: #fff6e8; color: #5c3800; font-size: 13px; line-height: 1.4; }
.frag-hinweis a { color: inherit; }
@media (max-width: 640px) { .frag-knopf { padding: 12px 16px 12px 13px; } }

/* ---------- WhatsApp-Knopf (B7, nicht mehr eingebunden – Ersatz: .frag oben) ---------- */
.wa-knopf { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px; background: #1f7a4d; color: #fff; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); font: 700 14px/1.2 var(--titel); }
.wa-knopf:hover { background: #17633e; }
.wa-knopf svg { width: 26px; height: 26px; flex: none; }
.wa-knopf small { display: block; font: 400 11.5px/1.3 "Open Sans", sans-serif; opacity: .9; }
@media (max-width: 640px) { .wa-knopf span { display: none; } .wa-knopf { padding: 12px; } }

/* ---------- Textseiten (Impressum, Datenschutz, AGB, Widerruf, Kontakt, Ueber uns) ---------- */
.textseite { max-width: var(--breite); margin: 0 auto; padding: 48px var(--rand) 96px; }
.rechtstext { max-width: 780px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.rechtstext h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; overflow-wrap: break-word; hyphens: auto; }   /* „Widerrufsbelehrung“ lief am Handy (375 px) aus dem Bild */
.rechtstext h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; margin: 40px 0 10px; scroll-margin-top: calc(var(--kopf-h) + 16px); }
.rechtstext h3 { font-size: 17px; margin: 24px 0 6px; }
.rechtstext p { margin: 0 0 12px; }
/* Ratgeber (2026-10-11): Sicherheits-/Wichtig-Kasten und Entwurfs-Hinweis */
.rechtstext p.ratgeber-hinweis { margin: 18px 0 8px; padding: 14px 16px; border-left: 4px solid var(--wt-akzent, #b07a4f); border-radius: 10px; background: rgba(176, 122, 79, .09); }
/* Ratgeber (2026-10-12): häufige Fragen sichtbar (nicht aufgeklappt – KI-Suche liest sichtbaren Text) und Autorenkasten */
.rechtstext .brotkrumen { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.rechtstext .brotkrumen a:not([class]) { color: var(--muted); text-decoration: none; }
.rechtstext .brotkrumen a:hover { text-decoration: underline; }
.rechtstext .ratgeber-liste { list-style: none; padding: 0; margin: 0 0 8px; }
.rechtstext .ratgeber-liste li { margin: 0 0 14px; }
.rechtstext .tabelle { overflow-x: auto; margin: 0 0 16px; }
.rechtstext table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.rechtstext th, .rechtstext td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line, rgba(0,0,0,.1)); }
.rechtstext th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rechtstext .ratgeber-fragen { margin-top: 44px; padding-top: 4px; border-top: 1px solid var(--line, rgba(0,0,0,.1)); }
.rechtstext .ratgeber-fragen h3 { margin-top: 20px; }
.rechtstext .ratgeber-autor { display: flex; gap: 14px; align-items: center; margin: 40px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--bg-2); font-size: 15px; line-height: 1.5; }
.rechtstext .ratgeber-autor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.rechtstext .ratgeber-autor p { margin: 0; }
.rechtstext .ratgeber-autor small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
/* Themenseiten (2026-10-23, privat/lib/themenseite.php): Knopf zum Konfigurator mit Lieferzeit, Tabelle „Auf einen Blick“ */
.rechtstext .ts-knopf { margin: 22px 0 26px; }
.rechtstext .ts-liefer { display: inline-block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.rechtstext .ts-blick th { width: 36%; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.rechtstext p.seite-entwurf { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 8px; background: #fff3cd; color: #6b5200; font-size: 14px; font-weight: 600; }
.rechtstext ul, .rechtstext ol { margin: 0 0 14px; padding-left: 22px; }
.rechtstext li { margin: 4px 0; }
/* nur reine Textlinks petrol – Links mit eigener Klasse (Knöpfe .btn, Kacheln .kontakt-weg …) behalten ihre Farben
   (2026-10-10: vorher stand petrolfarbene Schrift auf dem Petrol-Knopf) */
.rechtstext a:not([class]) { color: var(--petrol-d); text-underline-offset: 3px; }
.rechtstext .stand { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.inhalt-liste { background: var(--bg-2); border-radius: 14px; padding: 16px 20px; margin: 0 0 8px; font-size: 15px; }
.inhalt-liste ol { columns: 2; column-gap: 28px; margin: 0; }
.hinweisbox { background: var(--petrol-l); border-left: 4px solid var(--petrol); border-radius: 12px; padding: 14px 18px; margin: 0 0 20px; }
.hinweisbox p:last-child { margin: 0; }
.formular { border: 1px dashed var(--line); border-radius: 12px; padding: 16px 20px; margin: 0 0 16px; background: #fff; }
mark.pruefen { display: block; background: #fff3c4; color: #5c3d00; border-left: 4px solid #e0a100; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.textseite p.lizenztext { font-size: 12.5px; line-height: 1.5; color: var(--muted); }   /* Lizenztexte (/lizenzen) */
.kontakt-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.kontakt-wege-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* mit WhatsApp: 2 × 2 statt 3 + 1 (2026-10-13) */
@media (max-width: 560px) { .kontakt-wege-vier { grid-template-columns: minmax(0, 1fr); } }
.kontakt-weg { display: grid; align-content: start; gap: 2px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); }
.kontakt-weg:hover { border-color: var(--petrol); }
.kontakt-weg b { font: 700 13px/1.3 var(--titel); letter-spacing: .08em; text-transform: uppercase; color: var(--petrol-d); }
.kontakt-weg span { font-size: 17px; font-weight: 600; }
@media (max-width: 640px) {
  .textseite { padding-top: 28px; padding-bottom: 64px; }
  .inhalt-liste ol { columns: 1; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bereich:hover, .produkt-mehr:hover, .hero-karte:hover, .btn:hover { transform: none; }
  .bereich:hover .bereich-bild img, .produkt:hover .produkt-bild img { transform: none; }
}

/* ---------- 3D-Ansicht (Produktseite) ---------- */
.wt3d-knopf { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 11px 14px; border: 1.5px solid var(--wt-akzent);
  border-radius: 12px; background: #fff; color: var(--wt-akzent-d); font: 700 15px/1.2 Montserrat, "Open Sans", sans-serif; cursor: pointer; text-align: left; }
.wt3d-knopf svg { width: 30px; height: 30px; flex: 0 0 auto; }
.wt3d-knopf small { display: block; margin-top: 2px; font: 400 12.5px/1.3 "Open Sans", sans-serif; color: #6f665a; }
.wt3d-knopf:hover { background: var(--wt-akzent-l); }
/* gegen die Stile des Shop-Skripts (svg/button) absichern */
#wt3dKnopf { box-sizing: border-box !important; display: flex !important; width: 100% !important; max-width: 460px; min-height: 0 !important; height: auto !important; flex: 0 0 auto;
  position: relative; z-index: 6; margin-top: 22px !important; }   /* ueber dem Wischbereich der Galerie (Handy), Abstand zu den Bildpunkten */
#wt3dKnopf svg { width: 30px !important; height: 30px !important; min-width: 30px; max-width: 30px; }
#wt3dKnopf span { flex: 1 1 auto; min-width: 0; }

/* ---------- „Sag mir Bescheid, wenn wieder da“ (2026-10-18, js/shop.js wiederDa, privat/lib/wieder-da.php) ----------
   Kasten unter „In den Warenkorb“ bei ausverkauftem Artikel bzw. ausverkaufter Größe. Steht im Rahmen des Shop-Skripts – darum alles unter
   #wtWiederDa und die Eingaben gegen dessen Stile (Felder, Knöpfe, versteckte Häkchen) abgesichert. Handy: alles untereinander, volle Breite. */
#wtWiederDa { box-sizing: border-box; position: relative; width: 100%; max-width: 460px; margin: 16px 0 8px; padding: 14px 16px 14px;
  border: 1.5px solid var(--wt-akzent, #007a87); border-radius: 14px; background: var(--petrol-l, #e4f1f2); color: var(--ink);
  font: 400 14.5px/1.45 "Open Sans", system-ui, sans-serif; text-align: left; overflow-wrap: anywhere; }
#wtWiederDa *, #wtWiederDa *::before, #wtWiederDa *::after { box-sizing: border-box; }
#wtWiederDa p { margin: 0; }
#wtWiederDa .wt-wd-titel { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 4px; font: 700 15.5px/1.3 var(--titel); color: var(--petrol-d); }
#wtWiederDa .wt-wd-titel svg { flex: none; width: 22px !important; height: 22px !important; max-width: none !important; margin-top: -1px; }
#wtWiederDa .wt-wd-wahl { margin: 0 0 4px 31px; font-size: 13.5px; color: var(--ink-2); }
#wtWiederDa .wt-wd-label { display: block; margin: 10px 0 5px; font: 700 13.5px/1.3 var(--titel); color: var(--ink); }
#wtWiederDa .wt-wd-mail { display: block !important; width: 100% !important; max-width: none !important; height: 46px !important; min-height: 46px; margin: 0 !important;
  padding: 10px 12px !important; border: 1.5px solid #b9c9cb !important; border-radius: 10px !important; background: #fff !important; color: var(--ink) !important;
  font: 16px/1.3 "Open Sans", system-ui, sans-serif !important; box-shadow: none !important; }   /* 16 px: kein Zoom beim Antippen (iOS) */
#wtWiederDa .wt-wd-mail:focus { border-color: var(--petrol) !important; outline: 3px solid color-mix(in srgb, var(--wt-akzent, #007a87) 25%, transparent); outline-offset: 0; }
#wtWiederDa .wt-wd-mail[aria-invalid="true"] { border-color: var(--warn) !important; }
#wtWiederDa .wt-wd-haken { display: flex !important; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); cursor: pointer; }
#wtWiederDa .wt-wd-haken input { flex: none; position: static !important; opacity: 1 !important; width: 20px !important; height: 20px !important; min-width: 20px; margin: 1px 0 0 !important;
  clip: auto !important; pointer-events: auto !important; -webkit-appearance: checkbox !important; appearance: auto !important; accent-color: var(--petrol); }
#wtWiederDa .wt-wd-haken input[aria-invalid="true"] { outline: 2px solid var(--warn); outline-offset: 2px; }
#wtWiederDa .wt-wd-knopf { display: inline-flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 46px; height: auto !important;
  margin: 14px 0 0 !important; padding: 10px 18px !important; border: 0 !important; border-radius: 10px !important; background: var(--petrol) !important; color: #fff !important;
  font: 700 15px/1.2 var(--titel) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important; }
#wtWiederDa .wt-wd-knopf:hover { background: var(--petrol-d) !important; }
#wtWiederDa .wt-wd-knopf[disabled] { opacity: .7; cursor: progress; }
#wtWiederDa .wt-wd-klein { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
#wtWiederDa a { color: var(--petrol-d); text-decoration: underline; text-underline-offset: 3px; }
#wtWiederDa .wt-wd-meldung { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
#wtWiederDa .wt-wd-meldung.wt-wd-fehler { color: var(--warn); }
#wtWiederDa .wt-wd-meldung.wt-wd-hinweis { color: #1f5e23; }
#wtWiederDa .wt-wd-ok { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; font-weight: 700; color: #173b26; outline: none; }
#wtWiederDa .wt-wd-ok small { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; color: var(--muted); }
#wtWiederDa .wt-wd-honig { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 480px) { #wtWiederDa .wt-wd-knopf { width: auto !important; min-width: 210px; } }
.product-details__action-panel + #wt3dKnopf { margin: 4px 0 16px; }
.wt3d-fenster { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(38, 34, 29, .55); }
.wt3d-fenster.offen { display: flex; }
html.wt3d-gesperrt { overflow: hidden; }
.wt3d-karte { width: min(920px, 100%); max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.wt3d-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid #e2d8c9; font-family: Montserrat, sans-serif; color: #26221d; }
.wt3d-mass { color: #6f665a; font-size: 13px; }
.wt3d-zu { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 10px; background: #f4efe7; color: #26221d; cursor: pointer; display: grid; place-items: center; }
.wt3d-zu svg { width: 20px; height: 20px; }
.wt3d-buehne { position: relative; height: min(70vh, 620px); background: radial-gradient(circle at 50% 40%, #ffffff 0%, #efe9df 100%); }
.wt3d-buehne model-viewer { width: 100%; height: 100%; background: transparent; }
.wt3d-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 20px; text-align: center; color: #6f665a; }
.wt3d-tipp { margin: 0; padding: 10px 18px; font-size: 12.5px; color: #6f665a; border-top: 1px solid #e2d8c9; }
.wt3d-ar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 10px 16px; border: 0; border-radius: 999px; background: var(--wt-akzent); color: #fff; font: 700 14px Montserrat, sans-serif; }
@media (max-width: 600px) { .wt3d-fenster { padding: 0; } .wt3d-karte { border-radius: 0; height: 100%; } .wt3d-buehne { flex: 1 1 auto; height: auto; } }

/* Masse am Modell (Knopf "Masse" im 3D-Fenster) */
.wt3d-massknopf { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1.5px solid var(--wt-akzent); border-radius: 10px;
  background: #fff; color: var(--wt-akzent-d); font: 700 14px Montserrat, sans-serif; cursor: pointer; }
.wt3d-massknopf svg { width: 18px; height: 18px; }
.wt3d-massknopf[aria-pressed="true"] { background: var(--wt-akzent); color: #fff; }
.wt3d-massknopf + .wt3d-zu { margin-left: 0; }
.wt3d-linien, .wt3d-schilder { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.wt3d-fenster.mit-massen .wt3d-linien, .wt3d-fenster.mit-massen .wt3d-schilder { display: block; }
.wt3d-hs { display: none; }
.wt3d-schild { position: absolute; transform: translate(-50%, -50%); background: #fff; color: var(--wt-akzent); border: 1.5px solid var(--wt-akzent); border-radius: 999px;
  padding: 2px 9px; font: 700 13px Arial, sans-serif; white-space: nowrap; }
.wt3d-schild.d { background: var(--wt-akzent); color: #fff; }

/* Zusammenbau-Knopf (Baugruppen mit Animation) */
.wt3d-abspielen { margin-left: auto; display: inline-flex; width: auto !important; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--wt-akzent); color: #fff; font: 700 14px Montserrat, sans-serif; cursor: pointer; }
.wt3d-abspielen svg { width: 16px !important; height: 16px !important; fill: currentColor; stroke: none; flex: 0 0 auto; }
.wt3d-massknopf svg { width: 18px !important; height: 18px !important; flex: 0 0 auto; }
.wt3d-abspielen[hidden] { display: none; }
.wt3d-abspielen:not([hidden]) + .wt3d-massknopf { margin-left: 0; }
.wt3d-massknopf[hidden] { display: none; }

/* ---------- Kopf: Menue „Nach Maß“ mit allen Konfiguratoren (Inhaber 2026-10-10) ---------- */
.menue-gruppe { position: relative; }
.menue-auf {
  display: inline-flex; align-items: center; gap: 4px; padding: 9px 11px 9px 13px; border: 0; border-radius: 10px;
  background: none; color: var(--wt-kopf-text, #ece3d7); font: 600 14px/1.3 var(--titel); cursor: pointer; transition: background-color .15s, color .15s;
}
.menue-auf svg { width: 15px; height: 15px; transition: transform .15s; }
.menue-auf:hover, .menue-gruppe.auf .menue-auf { background: var(--wt-kopf-flaeche-2, rgba(255,255,255,.12)); color: #fff; }
.menue-auf[data-aktiv] { color: var(--wt-kopf-aktiv, #ffc46b); background: rgba(255,255,255,.06); }
.menue-gruppe.auf .menue-auf svg { transform: rotate(180deg); }
.menue-liste {
  display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 60;
  width: 640px; padding: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--schatten);
}
.menue-liste::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* Bruecke fuer die Maus */
.menue-gruppe.auf .menue-liste { display: grid; }
@media (hover: hover) and (min-width: 901px) { .menue-gruppe:hover .menue-liste { display: grid; } }
html:not(.js) .menue-gruppe:focus-within .menue-liste { display: grid; }
.menue .menue-liste a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; color: var(--ink); }
.menue .menue-liste a:hover { background: var(--bg-2); color: var(--ink); }
.menue .menue-liste a[aria-current="page"] { background: var(--bg-2); }
.menue-liste picture { flex: none; }
.menue-liste img { display: block; width: 72px; height: 54px; object-fit: cover; border-radius: 10px; background: var(--foto); }
.menue-liste b { display: block; font: 700 14px/1.3 var(--titel); }
/* Piktogramm des Produkts (Satz A „Linie“, mit heller Kachel) vor dem Namen – Menü „Nach Maß“ und Kacheln der Startseite */
img.wt-marke, .menue-liste img.wt-marke { display: inline-block; width: 1.5em; height: 1.5em; margin: 0 .4em 0 0; vertical-align: -.38em;
  border-radius: 5px; background: none; object-fit: contain; }
/* Menü „Shop“: Kategorien ohne Bilder, etwas schmaler */
.menue-liste.menue-kategorien { width: 560px; }
.menue .menue-liste.menue-kategorien a { padding: 9px 12px; }
.menue .menue-liste.menue-kategorien a.mk-alle { grid-column: 1 / -1; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; margin-bottom: 4px; }
.menue-liste.menue-kategorien img.mk-ikon { width: 40px; height: 40px; border-radius: 9px; object-fit: contain; background: none; }
.menue-kategorien .mk-kurz { display: none; }
@media (min-width: 901px) { .menue-app { display: none !important; } }   /* App-Knopf nur im Handy-Menü */
/* „Sonderanfrage“ am Ende von „Nach Maß“ (2026-10-11): Stift statt Foto, über die ganze Breite */
.menue .menue-liste a.mk-sonder { grid-column: 1 / -1; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; margin-top: 4px; }
/* „Nach Maß“: Maßzeichnung auf Kupfer/Schiefer statt Foto (2026-10-11) */
.mk-zeichnung { flex: none; display: block; width: 72px; height: 54px; border-radius: 10px; overflow: hidden; }
.mk-zeichnung.karte-kupfer { background: linear-gradient(155deg, #b5835c 0%, var(--wt-holz-dd, #7a5135) 100%); }
.mk-zeichnung.karte-schiefer { background: linear-gradient(155deg, #5d7b92 0%, #2c3f4d 100%); }
.menue-liste .mk-zeichnung img { width: 100%; height: 100%; padding: 4px 3px; box-sizing: border-box; object-fit: contain; border-radius: 0; background: none; opacity: .8; }
.menue-liste small { display: block; margin-top: 2px; font: 400 12.5px/1.35 "Open Sans", system-ui, sans-serif; color: var(--muted); }

/* ---------- Titelbereich: Sortiment als Kacheln (2026-10-10) ---------- */
.hero-sortiment {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(150px, 1fr); gap: 12px; min-height: 540px;
}
.hs-kachel {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; border-radius: 22px;
  background: var(--foto); color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.hs-kachel.gross { grid-column: span 2; }
.hs-kachel picture { position: absolute; inset: 0; z-index: -1; }
.hs-kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hs-kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-s); }
.hs-kachel:hover img { transform: scale(1.05); }
.hs-name {
  display: flex; flex-direction: column; margin: 10px; padding: 7px 12px 8px; border-radius: 14px;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.hs-name small { font: 700 10.5px/1.3 var(--titel); letter-spacing: .08em; text-transform: uppercase; color: var(--petrol); }
.hs-name b { font: 700 14.5px/1.25 var(--titel); }
.hs-kachel.gross .hs-name b { font-size: 17px; }
.hs-kachel.text { background: var(--petrol); color: #fff; align-items: stretch; }
.hs-kachel.text .hs-name { flex: 1; margin: 0; padding: 16px 16px 14px; background: none; box-shadow: none; }
.hs-kachel.text .hs-name small { color: rgba(255,255,255,.75); }
.hs-kachel.text .hs-name b { font-size: 16px; margin-top: 4px; }
.hs-kachel.text .hs-name > span { margin-top: 6px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.85); }
.hs-kachel.text svg { width: 22px; height: 22px; margin-top: auto; transition: transform .15s; }
.hs-kachel.text:hover svg { transform: translateX(4px); }
/* Nach-Maß-Kacheln als Karte (2026-10-11): Kupfer/Schiefer im Wechsel, feine Kreise, Maßzeichnung statt Foto */
.hero-sortiment .hs-kachel.hs-karte { color: #fff; }
.hero-sortiment .hs-kachel.karte-kupfer { background: linear-gradient(155deg, #b5835c 0%, var(--wt-holz-d, #8c5e3e) 58%, var(--wt-holz-dd, #7a5135) 100%); }
.hero-sortiment .hs-kachel.karte-schiefer { background: linear-gradient(155deg, #5d7b92 0%, var(--wt-akzent-d, #3d5668) 58%, #2c3f4d 100%); }
.hero-sortiment .hs-kachel.hs-karte::before {
  content: ''; position: absolute; right: -70px; top: -70px; width: 190px; height: 190px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.10) 0 1.2px, transparent 1.2px 16px);
}
.hero-sortiment .hs-karte img.hs-zeichnung { position: absolute; left: 7%; top: 8%; width: 86%; height: 64%; object-fit: contain; z-index: -1; opacity: .58; transition: opacity .2s; }
.hero-sortiment .hs-karte:hover img.hs-zeichnung { transform: none; opacity: .82; }
.hero-sortiment .hs-karte .hs-name { margin: 0; padding: 0 14px 12px; background: none; box-shadow: none; }
.hero-sortiment .hs-karte .hs-name small { color: rgba(255,255,255,.75); }
.hero-sortiment .hs-karte .hs-name b { color: #fff; }
/* Feines Wabenmuster wie in der Start-Kachel auch in den Karten (Inhaber 2026-10-11: „mach das auch für die anderen Kacheln“) –
   unter Kreisen und Zeichnung (z-index −2 im eigenen Stapel), kräftigste Stelle oben rechts */
.hero-sortiment .hs-karte::after, .hero-sortiment .hs-kachel.text::after, .bereiche .bereich.bereich-karte::after, .produkt-mehr::after, .ab-karte::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 34px 61px repeat;
  -webkit-mask-image: radial-gradient(140% 100% at 100% 0%, #000 0%, rgba(0,0,0,.4) 50%, transparent 85%);
          mask-image: radial-gradient(140% 100% at 100% 0%, #000 0%, rgba(0,0,0,.4) 50%, transparent 85%);
}

@media (max-width: 900px) {
  .js .menue { max-height: calc(100vh - var(--kopf-h)); overflow-y: auto; }
  .js .menue-gruppe { display: flex; flex-direction: column; }
  .js .menue .menue-auf {
    pointer-events: none; padding: 14px 12px 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wt-kopf-text-2, #a99d8e); background: none;
  }
  .js .menue .menue-auf svg { display: none; }
  .js .menue .menue-liste {
    display: grid; position: static; transform: none; width: auto; padding: 0 0 6px; grid-template-columns: minmax(0, 1fr);
    border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .js .menue .menue-liste a { padding: 6px 8px; color: #fff; }
  .js .menue .menue-liste a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .js .menue .menue-liste a[aria-current="page"] { background: rgba(255,255,255,.1); }
  .js .menue .menue-liste small { color: var(--wt-kopf-text-2, #a99d8e); }
  /* Shop-Kategorien am Handy (Inhaber 2026-10-11: „ohne Beschreibung, kurz und knapp“): zwei Spalten, kleines Piktogramm, kurzer Name */
  .js .menue .menue-liste.menue-kategorien { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
  .js .menue .menue-liste.menue-kategorien a { gap: 8px; padding: 6px; font: 600 13.5px/1.25 var(--titel); }
  .js .menue .menue-liste.menue-kategorien a.mk-alle { grid-column: 1 / -1; border: 0; margin: 0; padding: 6px 8px; }
  .js .menue .menue-liste.menue-kategorien img.mk-ikon { width: 26px; height: 26px; border-radius: 6px; }
  .js .menue .menue-kategorien .mk-lang { display: none; }
  .js .menue .menue-kategorien .mk-kurz { display: block; }
  /* „Als App auf den Startbildschirm“ (2026-10-11) */
  .menue-app { margin: 14px 4px 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
  .menue-app-knopf { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; font: 700 14.5px/1.25 var(--titel); text-align: left; cursor: pointer; }
  .menue-app-knopf img { grid-row: span 2; width: 30px; height: 30px; border-radius: 7px; }
  .menue-app-knopf small { font: 400 12.5px/1.3 "Open Sans", system-ui, sans-serif; color: var(--wt-kopf-text-2, #9aa6b0); }
  .menue-app-hilfe { margin: 8px 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--wt-kopf-text, #dde3e8); }
  .js .menue .menue-liste a.mk-sonder { border-top-color: rgba(255,255,255,.12); border-radius: 0; }
  .mk-zeichnung { width: 56px; height: 42px; }
  .menue-liste img { width: 56px; height: 42px; }
  .hero-sortiment { min-height: 0; grid-auto-rows: 170px; }
}
@media (max-width: 420px) {
  .kopfzeile .logo .marke-zeichen { height: 27px; }
  .kopfzeile .logo .marke-schrift img { height: 16px; }
}
@media (max-width: 640px) {
  .hero-sortiment { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); gap: 10px; }
  .hs-kachel { border-radius: 18px; }
  .hs-kachel.gross { min-height: 200px; }
  .hs-kachel.text { grid-column: span 2; }
  .hs-name { margin: 8px; padding: 6px 10px 7px; }
  .hs-name b { font-size: 13.5px; }
  .hs-kachel.text .hs-name { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .hs-kachel.text .hs-name > span { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-kachel, .hs-kachel img, .menue-auf svg { transition: none; }
  .hs-kachel:hover, .hs-kachel:hover img { transform: none; }
}

/* ---------- Kopf: Menüpunkt „Passt für dein Fahrzeug“ hervorgehoben (2026-10-11, Kopf sonst unverändert) ---------- */
.menue a.menue-fahrzeug {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; padding: 7px 13px 7px 11px;
  border: 1.5px solid var(--wt-kopf-linie); background: var(--wt-kopf-flaeche); color: var(--wt-kopf-aktiv);
}
.menue a.menue-fahrzeug:hover { border-color: var(--wt-kopf-aktiv); background: var(--wt-kopf-flaeche-2); color: var(--wt-karte); }
.menue-fahrzeug svg { width: 19px; height: 19px; flex: none; }
@media (max-width: 1080px) and (min-width: 901px) { .menue-fahrzeug svg { display: none; } .menue a.menue-fahrzeug { padding: 7px 11px; } }
@media (max-width: 900px) { .js .menue a.menue-fahrzeug { margin: 6px 0 4px; padding: 11px 12px; } }

/* ---------- Startseite: „Passt für dein Fahrzeug“ mit Einbau-Zeichnung (2026-10-11) ----------
   Inhaber: „groß als schematische Zeichnungen mit beispielhaften Einbauten, leicht technisch transparent“. Zeichnung als
   Inline-SVG (privat/lib/startseite-fahrzeug.php), Farben nur aus farben.css, Hervorheben: js/fahrzeug-start.js.
   Technisches Papier: feines Raster, Karosserie und Möbel halb durchsichtig in dünnen Linien, die WECKTECH-Teile im Akzent. */
.fz { max-width: var(--breite); margin: 0 auto; padding: 8px var(--rand) 28px; }
.fz-karte {
  padding: 40px 40px 34px; border-radius: 32px; border: 1px solid var(--wt-linie); background: var(--wt-karte);
  box-shadow: var(--wt-schatten-s);
}
.fz-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 26px; }
.fz-kopf > div:first-child { max-width: 680px; }
.fz-kopf h2 span { color: var(--wt-akzent); }
.fz-kopf p:not(.ueber) { margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--wt-text-2); }
.fz-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.fz .btn.fz-knopf { min-height: 58px; padding: 15px 28px 15px 24px; gap: 10px; font-size: 17px; background: var(--wt-akzent); color: var(--wt-karte); }
.fz .btn.fz-knopf:hover { background: var(--wt-akzent-d); }
.fz .btn.fz-knopf svg { width: 24px; height: 24px; }
.fz .btn.fz-knopf svg:last-child { width: 19px; height: 19px; transition: transform .15s; }
.fz .btn.fz-knopf:hover svg:last-child { transform: translateX(3px); }

/* Bühne: Zeichnung auf technischem Papier */
.fz-buehne, .fz-oben {
  position: relative; margin: 0; border: 1px solid var(--wt-linie);
  --fz-papier: color-mix(in srgb, var(--wt-akzent-xl) 65%, var(--wt-karte));
  background-color: var(--fz-papier);
  background-image:
    linear-gradient(color-mix(in srgb, var(--wt-akzent) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wt-akzent) 13%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--wt-akzent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wt-akzent) 6%, transparent) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
}
.fz-buehne { padding: 20px 18px 14px; border-radius: 24px; }
.fz-zeichnung > svg { display: block; width: 100%; height: auto; overflow: visible; }
.fz-zeichnung > svg * { vector-effect: non-scaling-stroke; }
.fz-hinweis { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--wt-text-3); }
.fz-hinweis svg { width: 17px; height: 17px; flex: none; }

/* Linien und Flächen der Zeichnung */
.fz-karo { fill: color-mix(in srgb, var(--wt-karte) 60%, transparent); stroke: var(--wt-text-2); stroke-width: 1.4px; stroke-linejoin: round; }
.fz-glas { fill: color-mix(in srgb, var(--wt-akzent-l) 80%, transparent); stroke: var(--wt-text-3); stroke-width: 1px; }
.fz-l { fill: none; stroke: var(--wt-text-3); stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round; }
.fz-m { fill: color-mix(in srgb, var(--wt-grund-2) 55%, transparent); stroke: color-mix(in srgb, var(--wt-text-3) 75%, transparent); stroke-width: 1px; stroke-linejoin: round; }
.fz-v { fill: none; stroke: var(--wt-text-3); stroke-width: 1px; stroke-dasharray: 5 4; }
.fz-weich { opacity: .55; }
.fz-licht { fill: color-mix(in srgb, var(--wt-amber) 45%, transparent); stroke: var(--wt-text-3); stroke-width: 1px; }
.fz-rad { fill: color-mix(in srgb, var(--wt-text) 9%, transparent); stroke: var(--wt-text-2); stroke-width: 1.4px; }
.fz-felge { fill: none; stroke: var(--wt-text-3); stroke-width: 1px; }
.fz-boden { fill: none; stroke: var(--wt-text-2); stroke-width: 1.2px; }
.fz-schraffur { fill: none; stroke: var(--wt-text-3); stroke-width: .8px; opacity: .55; }
.fz-mitte { fill: none; stroke: var(--wt-text-3); stroke-width: .8px; stroke-dasharray: 14 4 2 4; opacity: .8; }
.fz-mass { fill: none; stroke: var(--wt-text-3); stroke-width: .8px; }
.fz-text {
  font: 600 13px/1 ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  fill: var(--wt-text-3); paint-order: stroke; stroke: var(--fz-papier); stroke-width: 6px; stroke-linejoin: round;
}
.fz-text-klein { font-size: 11px; letter-spacing: .1em; text-transform: none; }

/* WECKTECH-Teile: Akzent, Nummern mit Hinweislinie */
.fz-p { fill: color-mix(in srgb, var(--wt-akzent) 40%, transparent); stroke: var(--wt-akzent-dd); stroke-width: 1.8px; stroke-linejoin: round; transition: fill .2s; }
.fz-pl { fill: none; stroke: var(--wt-akzent-dd); stroke-width: 1.2px; stroke-linecap: round; stroke-linejoin: round; }
.fz-pd { stroke-dasharray: 4 3; }
.fz-schlauch { fill: none; stroke: color-mix(in srgb, var(--wt-akzent) 42%, transparent); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; }
.fz-rippe { fill: none; stroke: var(--wt-akzent-d); stroke-width: 1.1px; stroke-dasharray: 1.5 2.5; }
.fz-hl { fill: none; stroke: var(--wt-akzent-d); stroke-width: 1px; }
.fz-hp { fill: var(--wt-akzent-d); }
.fz-kreis { fill: var(--wt-akzent); stroke: var(--wt-karte); stroke-width: 2.5px; transition: fill .2s; }
.fz-nr text { font: 800 17px/1 var(--titel); fill: var(--wt-karte); text-anchor: middle; pointer-events: none; }
.fz-oben .fz-nr text { font-size: 32px; }
.fz-nr, .fz-puls { transform-box: fill-box; transform-origin: center; }
.fz-nr { transform: scale(calc(var(--fz-s, 1) * var(--fz-a, 1))); transition: transform .2s; }
.fz-puls { fill: none; stroke: var(--wt-akzent); stroke-width: 2px; animation: fz-puls 2.8s ease-out infinite; }
[data-fz="2"] .fz-puls { animation-delay: .45s; } [data-fz="3"] .fz-puls { animation-delay: .9s; }
[data-fz="4"] .fz-puls { animation-delay: 1.35s; } [data-fz="5"] .fz-puls { animation-delay: 1.8s; } [data-fz="6"] .fz-puls { animation-delay: 2.25s; }
[data-fz="7"] .fz-puls { animation-delay: .2s; } [data-fz="8"] .fz-puls { animation-delay: 1.1s; } [data-fz="9"] .fz-puls { animation-delay: 2s; }   /* 7–9 seit 2026-10-13 */
@keyframes fz-puls { 0% { transform: scale(1); opacity: .7; } 55%, 100% { transform: scale(1.9); opacity: 0; } }
.fz-buehne a[data-fz] { cursor: pointer; outline: none; }
.fz-zeichnung [data-fz] { transition: opacity .2s; }

/* Hervorheben: das gewählte Teil kräftiger, die anderen blasser (Skript setzt data-aktiv und .an; ohne Skript :hover/:focus) */
.fz[data-aktiv] .fz-zeichnung [data-fz]:not(.an) { opacity: .25; }
.fz[data-aktiv] .fz-puls { animation: none; opacity: 0; }
.fz-zeichnung [data-fz].an .fz-p, .fz-buehne a[data-fz]:hover .fz-p, .fz-buehne a[data-fz]:focus-visible .fz-p {
  fill: color-mix(in srgb, var(--wt-akzent) 62%, transparent); stroke-width: 2.6px;
}
.fz-zeichnung [data-fz].an .fz-schlauch, .fz-buehne a[data-fz]:hover .fz-schlauch { stroke: color-mix(in srgb, var(--wt-akzent) 70%, transparent); }
.fz-zeichnung [data-fz].an .fz-kreis, .fz-buehne a[data-fz]:hover .fz-kreis { fill: var(--wt-akzent-dd); }
.fz-zeichnung [data-fz].an .fz-nr, .fz-buehne a[data-fz]:hover .fz-nr { --fz-a: 1.18; }
.fz-buehne a[data-fz]:focus-visible .fz-kreis { stroke: var(--wt-holz); stroke-width: 4px; }

/* Karte zum gewählten Teil: schwebt neben der Nummer (ab Tablet), am Handy fest unter der Zeichnung. Oben Name, Kurzsatz und
   „Zum Konfigurator“ (ein Link), darunter zwei Beispiele als Kacheln mit Bild (je ein Link, 2026-10-11) */
.fz-info { position: absolute; z-index: 5; width: 304px; }
.fz-info-box {
  padding: 13px 15px 14px; border-radius: 16px; background: var(--wt-kopf); color: var(--wt-kopf-text); box-shadow: var(--wt-schatten-l);
}
.fz-info-link { display: block; color: inherit; text-decoration: none; }
.fz-info-kopf { display: flex; align-items: center; gap: 10px; }
.fz-info b { font: 700 16px/1.25 var(--titel); color: var(--wt-karte); }
.fz-info-text { display: block; margin-top: 7px; font-size: 14px; line-height: 1.45; color: var(--wt-kopf-text); }
.fz-info .pfeil-link { margin-top: 9px; font-size: 14px; color: var(--wt-kopf-aktiv); }
.fz-info-link:hover .pfeil-link { text-decoration: underline; text-underline-offset: 3px; }
.fz-info .fz-zahl { width: 28px; height: 28px; font-size: 13.5px; }
.fz-bsp {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--wt-kopf-linie);
}
.fz-bsp[hidden], .fz-bsp-kachel[hidden] { display: none; }
.fz-bsp-titel {
  grid-column: 1 / -1; margin-bottom: -2px; font: 600 11px/1.2 ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wt-kopf-text-2);
}
.fz-bsp-kachel {
  display: block; min-width: 0; border-radius: 11px; overflow: hidden; background: var(--wt-kopf-flaeche); color: var(--wt-karte);
  text-decoration: none; box-shadow: 0 0 0 1px var(--wt-kopf-linie); transition: box-shadow .15s, background-color .15s;
}
.fz-bsp-kachel picture { display: block; aspect-ratio: 4 / 3; background: var(--wt-grund-2); overflow: hidden; }
.fz-bsp-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.fz-bsp-kachel span { display: block; padding: 7px 9px 8px; font: 600 13px/1.3 var(--titel); overflow-wrap: anywhere; }
.fz-bsp-kachel:hover { background: var(--wt-kopf-flaeche-2); box-shadow: 0 0 0 2px var(--wt-kopf-aktiv); }
.fz-bsp-kachel:hover img { transform: scale(1.05); }
.fz-bsp-kachel:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* Art des Beispiels (2026-10-13): „Konfigurator“ (Link mit Code) oder „Shop“ (Artikel) als kleines Schild auf dem Bild */
.fz-bsp-kachel { position: relative; }
.fz-bsp-art {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--wt-text);
  font: 700 9.5px/1.4 var(--titel); letter-spacing: .07em; text-transform: uppercase; pointer-events: none;
}

/* Liste der Einbauten und kleine Draufsicht */
.fz-zahl {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--wt-akzent); color: var(--wt-karte); font: 800 14px/1 var(--titel); transition: background-color .15s;
}
.fz-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: 22px 28px; align-items: start; margin-top: 22px; }
.fz-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Eintrag = Kasten mit dem Link zum Konfigurator und darunter (eigene Links, kein Link im Link) den Beispielen */
.fz-liste li {
  display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--wt-linie); background: var(--wt-karte);
  transition: border-color .15s, background-color .15s;
}
.fz-eintrag {
  display: flex; flex: 1 0 auto; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 15px;
  color: var(--wt-text); text-decoration: none;
}
.fz-eintrag b { display: block; font: 700 15px/1.3 var(--titel); }
.fz-eintrag small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--wt-text-3); }
.fz-liste li:hover, .fz-liste li.an { border-color: var(--wt-akzent); background: var(--wt-akzent-xl); }
.fz-liste li:hover .fz-zahl, .fz-liste li.an .fz-zahl { background: var(--wt-akzent-dd); }
.fz-bsp-zeile { margin: -5px 0 0; padding: 0 14px 11px 56px; font-size: 13px; line-height: 1.5; color: var(--wt-text-3); }
.fz-bsp-zeile a {
  color: var(--wt-akzent-d); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--wt-akzent-d) 35%, transparent);
}
.fz-bsp-zeile a:hover { text-decoration-color: currentColor; }
.fz-oben { padding: 12px 14px 10px; border-radius: 20px; }
.fz-oben figcaption {
  margin-bottom: 4px; font: 600 11.5px/1.2 ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wt-text-3);
}

@media (max-width: 1080px) {
  .fz-unten { grid-template-columns: minmax(0, 1fr); }
  .fz-oben { width: 100%; max-width: 500px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .fz-karte { padding: 28px 24px 24px; border-radius: 28px; }
  .fz-buehne { padding: 16px 12px 12px; }
  .fz-seite .fz-nr { --fz-s: 1.3; }
}
@media (max-width: 719px) {
  .fz-info { position: static; width: auto; margin-top: 10px; }
  .fz-info-box { padding: 12px 14px 13px; }
}
@media (max-width: 600px) {
  .fz { padding-top: 4px; padding-bottom: 20px; }
  .fz-karte { padding: 24px 16px 16px; border-radius: 26px; }
  .fz-kopf { margin-bottom: 20px; }
  .fz-kopf p:not(.ueber) { font-size: 16.5px; }
  .fz-knoepfe, .fz .btn.fz-knopf { width: 100%; }
  .fz-buehne { margin: 0 -8px; padding: 12px 4px 10px; border-radius: 18px; overflow: hidden; }
  .fz-buehne .fz-seite { width: 108%; margin-left: -3%; }   /* Raender mit den Masslinien weglassen: Wagen groesser */
  .fz-seite .fz-nr { --fz-s: 2.1; }
  .fz-seite .fz-text, .fz-seite .fz-schraffur, .fz-seite .fz-mass { display: none; }
  .fz-hinweis { padding: 0 8px; font-size: 13px; }
  .fz-info { margin: 10px 4px 0; }
  .fz-unten { margin-top: 16px; }
  .fz-liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fz-eintrag { padding: 11px 12px; }
  .fz-bsp-zeile { padding: 0 12px 10px 54px; }
  .fz-oben { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fz-puls { animation: none; opacity: 0; }
  .fz-nr, .fz-p, .fz-kreis, .fz-zeichnung [data-fz], .fz-bsp-kachel img { transition: none; }
}

/* ---------- Startseite: Mini-Anleitung „Tischplatte mit dem Handy ausmessen“ (2026-10-11) ----------
   privat/lib/startseite-ausmessen.php; erscheint nur, wenn die Funktion in der Werkstatt „Für alle“ ist. Dunkle Karte wie
   der Kopf, vier Schritte mit eigenen Strich-Piktogrammen, Farben nur aus farben.css. */
.am { max-width: var(--breite); margin: 0 auto; padding: 4px var(--rand) 28px; }
.am-karte {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.75fr); grid-template-areas: "vorschau vorschau" "kopf schritte" "fuss schritte";
  gap: 0 40px; padding: 36px 40px; border-radius: 32px; color: var(--wt-kopf-text);
  background: radial-gradient(640px 360px at 0% 100%, color-mix(in srgb, var(--wt-akzent) 42%, transparent), transparent 70%), var(--wt-kopf);
}
.am-vorschau {
  grid-area: vorschau; margin: -8px 0 22px; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  background: var(--wt-warn-bg); color: var(--wt-warn); font-weight: 600;
}
.am-kopf { grid-area: kopf; align-self: end; }
.am .am-kopf .ueber { color: var(--wt-amber); }   /* gegen .stil-werkstatt .ueber (Holz) */
.am h2 { color: var(--wt-karte); font-size: clamp(28px, 3vw, 38px); }
.am h2 span { color: var(--wt-kopf-aktiv); }
.am-kopf p:not(.ueber) { margin-top: 12px; font-size: 16.5px; line-height: 1.55; color: var(--wt-kopf-text); }
.am-fuss { grid-area: fuss; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.am .btn.am-knopf { background: var(--wt-kopf-aktiv); color: var(--wt-kopf); }
.am .btn.am-knopf:hover { background: var(--wt-karte); }
.am .btn.am-knopf svg { width: 18px; height: 18px; }
.am :focus-visible { outline-color: var(--wt-kopf-aktiv); }
.am-hinweis { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--wt-kopf-text-2); }
.am-hinweis svg { width: 17px; height: 17px; flex: none; }
.am-schritte { grid-area: schritte; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.am-schritte li {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 20px;
  background: var(--wt-kopf-flaeche); border: 1px solid var(--wt-kopf-flaeche-2);
}
.am-bild { position: relative; flex: none; width: 56px; height: 56px; padding: 6px; border-radius: 16px; background: var(--wt-kopf-flaeche-2); color: var(--wt-kopf-aktiv); }
.am-bild svg { display: block; width: 100%; height: 100%; }
.am-bild .am-dick { stroke-width: 4.5; }
.am-bild .am-blick { stroke-dasharray: 2 3; }
.am-bild i {
  position: absolute; left: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wt-akzent); color: var(--wt-karte); font: 800 12px/1 var(--titel); font-style: normal; box-shadow: 0 0 0 2px var(--wt-kopf);
}
.am-txt b { display: block; font: 700 15.5px/1.3 var(--titel); color: var(--wt-karte); }
.am-txt span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--wt-kopf-text-2); }
@media (max-width: 900px) {
  .am-karte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "vorschau" "kopf" "schritte" "fuss"; padding: 30px 24px; border-radius: 28px; }
  .am-schritte { margin-top: 22px; }
}
@media (max-width: 600px) {
  .am { padding-bottom: 20px; }
  .am-karte { padding: 24px 16px 20px; border-radius: 26px; }
  .am-schritte { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
  .am-schritte li { padding: 12px; gap: 12px; border-radius: 16px; }
  .am-bild { width: 48px; height: 48px; padding: 5px; border-radius: 13px; }
  .am-fuss { margin-top: 18px; }
  .am .btn.am-knopf { width: 100%; }
}

/* ---------- Bewertungen (2026-10-12, privat/lib/bewertungen-anzeige.php): Sterne, Google-Abzeichen, Kundenstimmen, Shop-Sektion ----------
   Eigene, geprüfte Bewertungen als Karten mit Kupfer-/Schiefer-Akzent; Google-Sterne nur als Link (es wird nichts von Google geladen).
   Bei jedem Block der Pflichthinweis (UWG § 5b Abs. 3) mit Link auf /bewertungen-pruefung. */
.bw-sterne { position: relative; display: inline-block; flex: none; font-size: 17px; line-height: 1; letter-spacing: 1px; white-space: nowrap;
  color: var(--bw-leer, #cfd6db); }
.bw-sterne::before { content: '★★★★★'; position: absolute; left: 0; top: 0; width: var(--bw-wert, 0%); overflow: hidden; color: var(--bw-voll, #d18a2e); }

.g-abzeichen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.g-abz-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; max-width: 100%; padding: 6px 14px 6px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--wt-karte, #fff); color: var(--ink); font-size: 14px; line-height: 1.25; text-decoration: none;
  transition: border-color .15s, box-shadow .15s; }
.g-abz-link:hover { border-color: var(--wt-holz, #a8734e); box-shadow: var(--schatten-s); }
.g-abz-link b { font: 800 15px/1 var(--titel); }
.g-abz-anzahl { color: var(--muted); white-space: nowrap; }
.g-abz-anzahl::before { content: '· '; }
a.bw-hinweis-link { font-size: 12.5px; color: var(--muted); text-underline-offset: 2px; }
a.bw-hinweis-link:hover { color: var(--petrol-d); }
.g-abzeichen-hero { margin-top: 22px; }
.g-abzeichen-shop { margin: 10px var(--rand) 0; }
@media (min-width: 1000px) {
  .g-abzeichen-shop { flex-direction: column; align-items: flex-start; gap: 6px; margin: 18px 0 0 6px; }
  /* schmale Spalte links: Sterne und Zahl oben, Anzahl darunter */
  .g-abzeichen-shop .g-abz-link { flex-wrap: wrap; row-gap: 1px; border-radius: 14px; font-size: 13px; padding: 7px 12px 7px 11px; }
  .g-abzeichen-shop .g-abz-anzahl { flex-basis: 100%; }
  .g-abzeichen-shop .g-abz-anzahl::before { content: none; }
}
.g-abzeichen-fuss { margin-top: 18px; }
.fuss .g-abz-link { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
.fuss .g-abz-link:hover { border-color: var(--wt-amber, #e2b98f); background: rgba(255,255,255,.1); text-decoration: none; }
.fuss .g-abz-anzahl { color: var(--wt-fuss-text, #aab5be); }
.fuss .bw-sterne { --bw-leer: rgba(255,255,255,.28); --bw-voll: #e8a948; }
.fuss .g-abzeichen a.bw-hinweis-link { color: var(--wt-fuss-text, #aab5be); }

.bw-schnitt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0; font-size: 15px; color: var(--ink-2); }
.bw-schnitt .bw-sterne { font-size: 21px; }
.bw-schnitt b { font: 800 21px/1 var(--titel); color: var(--ink); }
.bw-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; }
.bw-karte { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 18px 20px 18px;
  border: 1px solid var(--line); border-top: 4px solid var(--wt-holz, #a8734e); border-radius: 16px; background: var(--wt-karte, #fff); box-shadow: var(--schatten-s); }
.bw-karte.bw-schiefer { border-top-color: var(--wt-akzent, #4f6b80); }
.bw-karte::after { content: '\201C'; position: absolute; right: 16px; top: 6px; font: 800 56px/1 Georgia, serif; pointer-events: none;
  color: color-mix(in srgb, var(--wt-holz, #a8734e) 22%, transparent); }
.bw-karte.bw-schiefer::after { color: color-mix(in srgb, var(--wt-akzent, #4f6b80) 22%, transparent); }
.bw-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-right: 34px; }
.bw-geprueft { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1.2 var(--titel); color: var(--wt-gut, #2f7a3a); }
.bw-text { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; overflow-wrap: anywhere; }
.bw-text p + p { margin-top: 8px; }
.bw-wer { display: flex; flex-direction: column; gap: 1px; margin: auto 0 0; font-size: 13px; color: var(--muted); }
.bw-wer b { font: 700 15px/1.3 var(--titel); color: var(--ink); overflow-wrap: anywhere; }
.bw-antwort { padding: 10px 13px; border-left: 3px solid var(--wt-akzent, #4f6b80); border-radius: 0 12px 12px 0; background: var(--wt-akzent-xl, #eef2f5);
  color: var(--ink-2); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.bw-antwort b { display: block; margin-bottom: 3px; font: 700 13px/1.3 var(--titel); color: var(--wt-akzent-d, #3d5668); }
.bw-antwort p + p { margin-top: 6px; }
p.bw-hinweis-text { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: 46em; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bw-hinweis-text svg { flex: none; margin-top: 2px; color: var(--wt-akzent, #4f6b80); }
.bw-hinweis-text a { color: var(--petrol-d); font-weight: 600; }

/* Startseite: Sterne je Konfigurator an den Kacheln „Nach Maß“ (2026-10-25, privat/lib/startseite.php s_sterne) – klein unter dem Namen,
   der Pflichthinweis (UWG § 5b Abs. 3) einmal je Block */
.bw-kachel-sterne { display: inline-flex; align-items: center; font: 600 12.5px/1.25 var(--titel); color: rgba(255,255,255,.9); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bw-ks-stern { color: #f3c27a; }
.hs-name .hs-sterne { margin-top: 3px; }
.bereich-txt .bereich-sterne { margin: 2px 0 8px; }
p.bw-hinweis-kacheln { margin-top: 14px; font-size: 12.5px; }
.bereiche + p.bw-hinweis-kacheln { margin-top: 18px; }
/* im Titelbereich: Farbe der Kachel übernehmen (Werkstatt- und Outdoor-Stil: weiß auf Petrol bzw. Nacht, Grundstil dunkel auf hell) */
.hero-text p.bw-hinweis-kacheln { color: inherit; opacity: .78; }
.hero-text p.bw-hinweis-kacheln svg, .hero-text p.bw-hinweis-kacheln a { color: inherit; }
/* Handy: Sterne rechts neben „Nach Maß“ statt in einer dritten Zeile – die Kachel bleibt zweizeilig, nichts verdeckt die Zeichnung */
@media (max-width: 640px) {
  .hero-sortiment .hs-karte .hs-name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 6px; }
  .hero-sortiment .hs-karte .hs-name > b { grid-column: 1 / -1; grid-row: 2; }
  .hero-sortiment .hs-karte .hs-name .hs-sterne { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; font-size: 11.5px; }
}
/* Startseite: Kundenstimmen – Text auf den Karten gekürzt, ganz im Shop */
.bw-stimmen .kopf-zeile { align-items: flex-end; }
.bw-stimmen .bw-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
.bw-stimmen-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 26px; }

/* Shop: Sektion „Bewertungen“ unter dem Shop (nur Produktseiten) */
.shop-bewertungen { max-width: var(--breite); margin: 26px auto 10px; padding: 0 var(--rand, 16px); }
.shop-bewertungen[hidden] { display: none; }
.sb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 16px; }
.sb-kopf h2 { margin: 0; font: 800 22px/1.25 var(--titel); }
.shop-bewertungen .bw-karten { max-width: 980px; }
p.bw-leer { margin: 0 0 4px; color: var(--ink-2); }
.sb-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
@media (max-width: 640px) {
  .bw-karte { padding: 16px 16px 15px; }
  .bw-stimmen-fuss .btn, .sb-fuss .btn { width: 100%; }
}

/* ---------- Startseite: Heizungsadapter nach Maß – Y-Stück und Übergang (2026-10-13) ----------
   privat/lib/startseite-adapterbeispiele.php. Inhaber: „in dem Schiefer-Kupfer, wie wir es jetzt hatten“ – Karten wie die
   Nach-Maß-Kacheln (Verlauf Schiefer bzw. Kupfer, feine Kreise, Wabenmuster aus der gemeinsamen Regel oben), darin drei Bilder:
   Rendering (Studio grau), Schnitt mit Maßen (weißes Papier, Maße in Kupfer) und 3D-Ansicht (Verlauf wie im Konfigurator).
   Raster: PC drei Bilder nebeneinander, gleich hoch (Spalten im Verhältnis der Seitenverhältnisse 4:3, 680:636, 1:1);
   Tablet Rendering oben breit, Schnitt und 3D darunter; Handy alles untereinander. */
.ab .kopf h2 span { color: var(--wt-holz, #a8734e); }
.ab-karten { display: grid; gap: 26px; }
.ab-karte {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px 40px; padding: 32px 30px 30px; border-radius: 30px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "text seite" "bilder bilder";
  color: #fff; box-shadow: var(--schatten-s);
}
.ab-karte.karte-schiefer { background: linear-gradient(155deg, #5d7b92 0%, var(--wt-akzent-d, #3d5668) 58%, #2c3f4d 100%); }
.ab-karte.karte-kupfer { background: linear-gradient(155deg, #b5835c 0%, var(--wt-holz-d, #8c5e3e) 58%, var(--wt-holz-dd, #7a5135) 100%); }
.ab-karte::before {
  content: ''; position: absolute; right: -110px; top: -110px; width: 340px; height: 340px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.10) 0 1.5px, transparent 1.5px 22px);
}
.ab-text { grid-area: text; }
.ab .ab-karte .ueber { color: rgba(255,255,255,.8); margin-bottom: 8px; }
.ab-karte h3 { color: #fff; font: 800 clamp(23px, 2.4vw, 30px)/1.2 var(--titel); letter-spacing: -.01em; }
.ab-beschreibung { margin-top: 12px; max-width: 560px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); }
.ab-seite { grid-area: seite; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 4px; }
.ab-fakten { width: 100%; margin: 0; }
.ab-fakten div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.2); }
.ab-fakten div:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.ab-fakten dt { font: 700 11.5px/1.6 var(--titel); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.ab-fakten dd { margin: 0; font-size: 15px; line-height: 1.45; color: #fff; }
.ab-karte a.btn.ab-knopf { background: #fff; color: var(--wt-akzent-dd, #34495a); border-color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.ab-karte.karte-kupfer a.btn.ab-knopf { color: var(--wt-holz-dd, #7a5135); }
.ab-karte a.btn.ab-knopf:hover { background: var(--wt-akzent-xl, #eef2f5); }
.ab-karte.karte-kupfer a.btn.ab-knopf:hover { background: var(--wt-holz-l, #f2e4d9); }
.ab-karte a.btn.ab-knopf svg { width: 18px; height: 18px; transition: transform .15s; }
.ab-karte a.btn.ab-knopf:hover svg { transform: translateX(3px); }
.ab-karte :focus-visible { outline-color: #fff; }
.ab-bilder { grid-area: bilder; display: grid; grid-template-columns: minmax(0, 1.3333fr) minmax(0, 1.0692fr) minmax(0, 1fr); gap: 14px; }
.ab-bild { display: flex; flex-direction: column; gap: 9px; color: #fff; text-decoration: none; }
.ab-rahmen {
  position: relative; display: block; overflow: hidden; border-radius: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.14);
  transition: transform .18s, box-shadow .18s;
}
.ab-bild:hover .ab-rahmen { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,.14), 0 20px 40px rgba(0,0,0,.18); }
.ab-rahmen picture, .ab-rahmen img { display: block; width: 100%; height: 100%; }
.ab-rahmen img { object-fit: cover; }
.ab-render .ab-rahmen { aspect-ratio: 4 / 3; background: #e4e4e4; }
.ab-schnitt .ab-rahmen { aspect-ratio: 680 / 636; background: #fff; }
.ab-schnitt img { object-fit: contain; }
.ab-3d .ab-rahmen { aspect-ratio: 1 / 1; background: linear-gradient(180deg, var(--wt-karte, #fff) 0%, var(--wt-grund-2, #e7ebed) 100%); }
/* Beschriftung unter dem Bild (im Schnitt stehen oben schon Maße): kleiner Strich in Bernstein bzw. hell auf Kupfer */
.ab-schild { display: flex; align-items: center; gap: 8px; padding-left: 2px; font: 700 11px/1.3 var(--titel); letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.ab-schild::before { content: ''; flex: none; width: 16px; height: 2px; border-radius: 2px; background: var(--wt-amber, #e2b98f); }
.karte-kupfer .ab-schild::before { background: rgba(255,255,255,.75); }
.ab-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; margin-top: 26px; padding: 24px 28px;
  border-radius: 24px; background: var(--papier, #fff); border: 1px solid var(--line);
}
.ab-fuss > div { flex: 1 1 520px; }
.ab-fuss-titel { margin-bottom: 4px; font: 700 15px/1.3 var(--titel); color: var(--ink); }
.ab-fuss .haken { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; font-size: 14.5px; }
.ab-fuss .btn.ab-eigen svg { width: 18px; height: 18px; transition: transform .15s; }
.ab-fuss .btn.ab-eigen:hover svg { transform: translateX(3px); }
@media (max-width: 999px) {
  .ab-karte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "seite" "bilder"; padding: 28px 24px 24px; }
  .ab-bilder { grid-template-columns: minmax(0, 1.0692fr) minmax(0, 1fr); }
  .ab-render { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ab-karten { gap: 18px; }
  .ab-karte { gap: 16px; padding: 22px 16px 16px; border-radius: 24px; }
  .ab-karte::before { width: 240px; height: 240px; right: -90px; top: -90px; }
  .ab-beschreibung { font-size: 15.5px; }
  .ab-seite { gap: 14px; }
  .ab-karte a.btn.ab-knopf { width: 100%; }
  .ab-bilder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-rahmen { border-radius: 16px; }
  .ab-3d .ab-rahmen { aspect-ratio: 4 / 3; }
  .ab-karte a.btn.ab-knopf, .ab-fuss .btn.ab-eigen { padding: 13px 16px; font-size: 14px; gap: 6px; }
  .ab-fuss { padding: 20px 16px; margin-top: 18px; }
  .ab-fuss .haken { grid-template-columns: minmax(0, 1fr); }
  .ab-fuss .btn.ab-eigen { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ab-rahmen, .ab-bild:hover .ab-rahmen { transition: none; transform: none; } }

/* ---------- Aktionsband unter der Kopfzeile (2026-10-13, Willkommenscode NEU10; privat/lib/seite.php wt_aktionsband) ---------- */
.aktionsband { position: relative; background: var(--wt-akzent-l, #e2e9ee); color: var(--wt-text, #22282d); border-bottom: 1px solid var(--wt-linie, #dde2e5); }
.aktionsband[hidden] { display: none; }
.aktionsband p { max-width: 1180px; margin: 0 auto; padding: 9px 52px 9px 16px; font-size: .92rem; line-height: 1.45; text-align: center; }
.aktionsband a { color: var(--wt-akzent-d, #3d5668); font-weight: 600; white-space: nowrap; }
.aktion-code { position: relative; display: inline-block; margin: 0 2px; padding: 1px 9px; font: inherit; font-weight: 700; letter-spacing: .06em;
  color: var(--wt-holz-d, #8c5e3e); background: var(--wt-karte, #fff); border: 1.5px dashed var(--wt-holz, #a8734e); border-radius: 6px; cursor: copy; }
.aktion-code:hover { background: #fff8f1; }
.aktion-code[data-kopiert]::after { content: "kopiert"; position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); padding: 2px 7px;
  font-size: .72rem; font-weight: 600; letter-spacing: 0; color: #fff; background: var(--wt-text, #22282d); border-radius: 5px; white-space: nowrap; z-index: 2; }
.aktion-zu { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--wt-text-2, #435059); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.aktion-zu:hover, .aktion-zu:focus-visible { background: rgba(0, 0, 0, .06); }
@media (max-width: 560px) { .aktionsband p { padding: 8px 46px 8px 12px; font-size: .86rem; text-align: left; } }

/* ---------- Profile im Fuß (2026-10-13, privat/lib/seite.php wt_profil_links, Adressen in WT_PROFILE) ----------
   Eigene Linien-Zeichen in currentColor – passen sich der Fußfarbe an (alle Gestaltungen dunkel) */
.fuss ul.fuss-profile { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
.fuss-profile a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 0; font-size: 14.5px; }
.fuss-profile svg { width: 20px; height: 20px; flex: none; }
.fuss-profile a:hover svg { color: var(--wt-amber, #e2b98f); }

/* ---------- Linkseite /links (2026-10-13, privat/seiten/links.php) – große Knöpfe, schmal wie am Handy ---------- */
.linkseite { max-width: 540px; margin: 0 auto; }
/* Karte und Überschrift so schmal wie die Knöpfe (sonst steht die Überschrift links neben der Knopfspalte) */
.textseite .rechtstext:has(.linkseite) { max-width: 660px; }
.textseite .rechtstext:has(.linkseite) h1 { font-size: clamp(28px, 3.6vw, 38px); }
.ls-kopf { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.ls-kopf img { width: 76px; height: 76px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  background: var(--wt-grund-2, #e7ebed); box-shadow: 0 0 0 3px var(--wt-karte, #fff), 0 0 0 4px var(--line); }
.rechtstext .ls-kopf p { margin: 0; font-size: 16px; line-height: 1.5; }
.rechtstext ul.ls-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rechtstext .ls-liste li { margin: 0; }
.ls-knopf { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--wt-grund, #f5f8f8); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.ls-knopf:hover { border-color: var(--petrol); background: var(--wt-karte, #fff); }
.ls-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--wt-karte, #fff); color: var(--petrol-d); }
.ls-ico svg { width: 24px; height: 24px; }
.ls-txt { display: grid; gap: 1px; min-width: 0; }
.ls-txt b { font: 700 16.5px/1.3 var(--titel); overflow-wrap: anywhere; }
.ls-txt small { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.ls-knopf.ls-neu { border-color: var(--petrol); background: var(--petrol-l); }
.ls-knopf.ls-neu .ls-ico { background: var(--petrol); color: #fff; }
.ls-knopf.ls-aktion { border: 2px dashed var(--wt-holz, #a8734e); background: var(--wt-holz-l, #f2e4d9); }
.ls-knopf.ls-aktion .ls-ico { color: var(--wt-holz-d, #8c5e3e); }
.ls-knopf.ls-aktion small { color: var(--wt-text-2, #435059); }
.rechtstext .ls-unter { margin: -4px 0 4px; padding: 0 4px; font-size: 13.5px; color: var(--muted); }
.rechtstext .ls-unter p { margin: 0 0 6px; }
.rechtstext .ls-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rechtstext .ls-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--wt-karte, #fff); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.rechtstext .ls-chips a:hover { border-color: var(--petrol); color: var(--petrol-d); }
.rechtstext p.ls-recht { margin: 26px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.rechtstext p.ls-recht a { color: var(--muted); }
@media (max-width: 640px) {
  .ls-knopf { gap: 12px; padding: 11px 13px; }
  .ls-ico { width: 38px; height: 38px; }
  .ls-kopf img { width: 64px; height: 64px; }
}

/* Nachbestellung ins offene Paket (2026-10-13, shop.js): Meldung unter dem Feld „Nummer deiner offenen Bestellung“ im Checkout.
   !important, weil das Shop-Skript Absätze im Checkout zurücksetzt (Hintergrund, Abstand – im echten Checkout gemessen) */
.wt-nb-meldung { display: flex !important; align-items: flex-start; gap: 8px; margin: 8px 0 4px !important; padding: 10px 12px !important;
  border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.45 !important; }
.wt-nb-meldung[hidden] { display: none !important; }
.wt-nb-meldung svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.wt-nb-info { background: var(--petrol-l) !important; color: var(--petrol-d) !important; }
.wt-nb-ok { background: #e3f3e6 !important; color: #1d6b2c !important; }
.wt-nb-fehler { background: #fbe7e4 !important; color: #9d2a1b !important; }
/* Lieferadresse (2026-10-23, shop.js adresseWache): PLZ vor dem Ort wie in Deutschland üblich. Ecwid setzt Ort (.ec-form__cell--city,
   8/12) und PLZ (.ec-form__cell--postalcode, 4/12) in dieselbe Zeile (.ec-form__row, flex) – getauscht wird nur die Reihenfolge. */
.ec-store .ec-form__cell--postalcode { order: -1; }

/* Video-Knopf unter den Produktfotos + Fenster (2026-10-14, shop.js videoKnopf/videoFenster) */
.wt-video-knopf { margin-top: 8px; }
.wt-vf { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 30, 33, .72); overflow: auto; }
.wt-vf[hidden] { display: none; }
.wt-vf-karte { position: relative; width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  padding: 50px 16px 16px; border-radius: 16px; background: var(--wt-flaeche, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.wt-vf-zu { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d2d7da; border-radius: 10px; background: #fff; color: #232a31; cursor: pointer; }
.wt-vf-zu svg { width: 18px; height: 18px; }
.wt-vf-inhalt { display: grid; gap: 22px; }
.wt-vf-inhalt .wt-video { scroll-snap-align: none; }
html.wt-vf-offen { overflow: hidden; }

/* ---------- Suche (2026-10-14, privat/lib/suche.php, shop.js sucheKopf): Lupe im Kopf, Vorschläge, Ergebnisseite /suche ----------
   PC: Feld mit Vorschlägen klappt rechts unter dem Kopf auf (ab 1200 px mit „Suchen“ und Taste /). Handy/Tablet (bis 900 px):
   Suchfenster über die ganze Breite und Höhe. Treffer-Karten (.st-karte) gleich in den Vorschlägen und auf der Ergebnisseite. */
.suche { flex: none; }
.suche-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: 12px; border: 1.5px solid var(--wt-kopf-linie, rgba(255,255,255,.2)); background: var(--wt-kopf-flaeche, rgba(255,255,255,.07));
  color: #fff; font: 600 14px/1 var(--titel); text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.suche-knopf:hover, .suche-knopf[aria-expanded="true"] { border-color: var(--wt-kopf-aktiv, #ffc46b); color: #fff; }
.suche-knopf svg { width: 21px; height: 21px; flex: none; }
.suche-knopf-txt, .suche-taste { display: none; }
/* Konto-Knopf (2026-10-23) und „Über uns“ nicht mehr im Kopf: „Suchen“ ab 1200 px neben der Lupe, die Taste „/“ nur noch im Hinweis
   (title) – so bleibt das Menü einzeilig (gemessen 901–1920 px, leerer und voller Warenkorb). */
@media (min-width: 1200px) {
  .suche-knopf { padding: 0 11px 0 11px; font-weight: 600; }
  .suche-knopf-txt { display: inline; }
}
/* „Mein Konto“ (2026-10-23, privat/lib/seite.php): Knopf zwischen Suche und Warenkorb am PC (Text erst bei viel Platz), am Handy
   (bis 900 px) nur als Eintrag im Menü – der Handy-Kopf ist bis 280 px ausgemessen und bekommt keinen weiteren Knopf. */
.konto-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: 12px; border: 1.5px solid var(--wt-kopf-linie, rgba(255,255,255,.2)); background: var(--wt-kopf-flaeche, rgba(255,255,255,.07));
  color: #fff; font: 600 14px/1 var(--titel); text-decoration: none; transition: border-color .15s, background-color .15s, color .15s;
}
.konto-knopf:hover { border-color: var(--wt-kopf-aktiv, #ffc46b); color: #fff; }
.konto-knopf svg { width: 21px; height: 21px; flex: none; }
@media (min-width: 901px) {
  .menue a { padding-left: 11px; padding-right: 11px; }
  .menue a.menue-fahrzeug { padding: 7px 11px 7px 10px; }
}
@media (max-width: 1099px) and (min-width: 901px) {   /* Warenkorb nur als Tasche (Text im aria-label), wie am Handy */
  .korb { padding: 0 11px; }
  .korb-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1080px) and (min-width: 901px) { .konto-knopf { min-width: 42px; padding: 0; } }
@media (max-width: 900px) { .konto-knopf { display: none; } }
.menue a.menue-konto { display: none; }
@media (max-width: 900px) {
  .menue a.menue-konto { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: center; margin: 6px 0 0; padding: 11px 12px; }
  .menue-konto svg { width: 22px; height: 22px; }
  .menue-konto small { display: block; margin-top: 2px; font: 400 12.5px/1.3 "Open Sans", system-ui, sans-serif; color: var(--wt-kopf-text-2, #9aa6b0); }
}
/* Liegt etwas im Warenkorb (Zahl sichtbar), steht „Warenkorb“ nur noch im aria-label – Tasche mit Zahl wie am Handy und wie im
   Konfigurator-Kopf. Vorher (werkzeuge/format-browser-test.js 2026-10-14): mit Zahl (+29 px) und dem Konfigurator-Zeichen (+52 px)
   brachen „Nach Maß“, „Passt für dein Fahrzeug“ und „Über uns“ auf JEDER Desktop-Breite (1280–2560 px) in zwei Zeilen um, weil der
   Kopf höchstens 1200 px breit ist und leer schon genau passt. So ist der Kopf mit Zahl und Zeichen nicht breiter als leer. */
@media (min-width: 901px) {
  .korb:has(.korb-zahl:not([hidden])) { padding: 0 11px 0 10px; }
  .korb:has(.korb-zahl:not([hidden])) .korb-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.suche-feld {
  position: absolute; z-index: 70; top: calc(100% + 6px); right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  width: min(620px, calc(100% - 2 * var(--rand))); padding: 10px; border-radius: 20px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.suche-feld[hidden] { display: none; }
.suche-form { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.suche-form:focus-within { border-color: var(--petrol); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 18%, transparent); }
.suche-lupe { width: 20px; height: 20px; flex: none; color: var(--muted); }
.suche-form input {
  flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0; background: none; color: var(--ink);
  font: 500 17px/1.2 "Open Sans", system-ui, sans-serif; -webkit-appearance: none; appearance: none;
}
.suche-form input::-webkit-search-cancel-button, .suche-seite-form input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.suche-form input::placeholder { color: #8a979a; }
.suche-zu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--muted); cursor: pointer; }
.suche-zu:hover { background: var(--bg-2); color: var(--ink); }
.suche-zu svg { width: 20px; height: 20px; }
.suche-hinweis { margin: 10px 8px 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.suche-hinweis[hidden] { display: none; }
.suche-liste { max-height: min(62vh, 560px); margin-top: 6px; overflow-y: auto; overscroll-behavior: contain; }
.suche-liste[hidden], .suche-fuss[hidden] { display: none; }
.sl-gruppe + .sl-gruppe { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.sl-titel { margin: 8px 10px 4px; font: 700 11.5px/1.3 var(--titel); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-karte { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; cursor: pointer; }
.st-karte:hover, .st-karte[aria-selected="true"] { background: var(--petrol-l); }
.st-karte[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--petrol); }
.st-bild { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: 10px;
  background: var(--bg-2); color: var(--petrol-d); }
.st-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-kategorie img, .st-konfigurator img { padding: 5px; object-fit: contain; }
.st-konfigurator { background: linear-gradient(155deg, #b5835c 0%, var(--wt-holz-dd, #7a5135) 100%); }
.st-bild svg { width: 24px; height: 24px; }
.st-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-text b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 700 14.5px/1.3 var(--titel); }
.st-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1.4; color: var(--muted); }
.st-text em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); }
.st-preis { flex: none; font: 700 14px/1.2 var(--titel); color: var(--ink); white-space: nowrap; }
.st-teil .st-text b { font-weight: 600; }
.suche-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 6px; padding: 10px 10px 4px;
  border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--muted); }
.suche-fuss p { margin: 0; }
.suche-fuss a { color: var(--petrol-d); font-weight: 700; text-decoration: none; }
.suche-fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 901–1080 px: Logo etwas kleiner und engere Abstände – die Lupe nimmt so keinen Platz vom Menü (sonst bricht „Passt für dein
   Fahrzeug“ in drei Zeilen) */
@media (max-width: 1080px) and (min-width: 901px) {
  .kopf-innen { gap: 18px; }
  .kopfzeile .logo .marke-zeichen { height: 33px; }
  .kopfzeile .logo .marke-schrift img { height: 19px; }
  .suche-knopf { min-width: 42px; padding: 0; }
}
@media (max-width: 900px) {
  html.suche-offen, html.suche-offen body { overflow: hidden; }
  html.suche-offen .kopfzeile { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* sonst wäre der Kopf der Rahmen für position: fixed */
  html.suche-offen .frag { display: none; }
  .suche-feld { position: fixed; inset: 0; width: auto; display: flex; flex-direction: column; padding: 12px var(--rand) 14px;
    border: 0; border-radius: 0; box-shadow: none; }
  .suche-feld[hidden] { display: none; }
  .suche-liste { flex: 1 1 auto; max-height: none; min-height: 0; }
  .suche-fuss { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .kopf-innen { gap: 8px; }
  .kopf-aktionen { gap: 6px; }
  .suche-knopf, .menue-knopf { width: 42px; min-width: 42px; padding: 0; }
  .korb { padding: 0 9px; }
}
/* Sehr schmale Handys (2026-10-17, Inhaber: „auf dem iPhone war der rechte Menü-Button nicht sichtbar“): unter 375 px CSS-Breite –
   iPhone SE (1. Gen.), iPhone mit „Anzeigezoom: Größer“ (320 px) oder Safari-Seitenzoom 115–125 % (300–340 px) – war der Kopf 369 px
   breit: die Seite lief seitlich über, das Handy zoomte heraus und der Menü-Knopf lag rechts außerhalb. Darum unter 375 px ohne
   Schriftzug (wie schon mit Warenkorb-Zahl), unter 360 px engere Knöpfe; als letzte Sicherung gibt das Logo nach (wird beschnitten),
   nie der Menü-Knopf. Geprüft 280–440 px mit leerem und vollem Warenkorb samt Konfigurator-Zeichen. */
@media (max-width: 899px) { .kopfzeile .logo { flex: 0 1 auto; min-width: 0; overflow: hidden; } }
@media (max-width: 374px) { .kopfzeile .logo .marke-schrift { display: none; } }
@media (max-width: 359px) {
  .kopf-innen { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .kopf-aktionen { gap: 5px; }
  .kopfzeile .logo .marke-zeichen { height: 20px; }
  .suche-knopf, .menue-knopf, .konfig-signal { width: 40px; min-width: 40px; height: 40px; }
  .korb { height: 40px; gap: 5px; padding: 0 8px; }
}
/* Ergebnisseite /suche (privat/seiten/suche.php) */
.suche-seite-form { display: flex; gap: 10px; margin: 18px 0 12px; }
.suche-seite-form input {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
  font: 500 17px/1.2 "Open Sans", system-ui, sans-serif; -webkit-appearance: none; appearance: none;
}
.suche-seite-form input:focus { border-color: var(--petrol); outline: 3px solid color-mix(in srgb, var(--petrol) 18%, transparent); outline-offset: 0; }
.suche-seite-form .btn { flex: none; min-height: 52px; }
.rechtstext .suche-anzahl { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.suche-sprung ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; }
.rechtstext .suche-sprung li { margin: 0; }
.suche-sprung a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font: 600 13.5px/1.3 var(--titel); text-decoration: none; }
.suche-sprung a:hover { border-color: var(--petrol); color: var(--petrol-d); }
.suche-sprung a span { color: var(--muted); font-weight: 500; }
.rechtstext .suche-gruppe h2 { margin-top: 30px; }
.rechtstext .suche-treffer { list-style: none; display: grid; gap: 6px; margin: 0 0 8px; padding: 0; }
.rechtstext .suche-treffer li { margin: 0; }
.suche-treffer .st-karte { padding: 10px 12px; border: 1px solid var(--line); background: #fff; line-height: 1.4; }
.suche-treffer .st-karte:hover { border-color: var(--petrol); background: #fff; }
.suche-treffer .st-bild { width: 56px; height: 56px; border-radius: 12px; }
.suche-treffer .st-text small { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rechtstext .suche-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.rechtstext .suche-chips li { margin: 0; }
.suche-chips a { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font: 600 14px/1.3 var(--titel); text-decoration: none; }
.suche-chips a:hover { border-color: var(--petrol); color: var(--petrol-d); }
.rechtstext .suche-leer > p:first-child { margin: 6px 0 14px; padding: 14px 16px; border-left: 4px solid var(--petrol); border-radius: 10px; background: var(--petrol-l); }
.rechtstext .suche-shop { margin-top: 26px; }
@media (max-width: 480px) {
  .suche-seite-form .btn { padding-left: 16px; padding-right: 16px; }
  .suche-treffer .st-karte { flex-wrap: wrap; }
  .suche-treffer .st-preis { margin-left: 68px; }
}

/* ---------- Startseite am Handy (2026-10-17) ----------
   Inhaber: „Index-Seite auf dem Handy sehr unübersichtlich … klar und einfach strukturieren“. Je Baustein eine Hülle .sb
   (privat/lib/startseite.php, s_handy) mit data-handy = kompakt (kurz, Reihen zum Wischen, Listen zum Aufklappen –
   static/shop/js/startseite.js) | normal (wie bisher untereinander) | aus (am Handy weg) und data-handy-oben (am Handy direkt unter
   dem Titelbereich). Gilt unter 900 px (wie die Klappnavigation): Handy, aufgeklapptes Falt-Handy (Inhaber: Galaxy Z Fold 8, innen
   ~830 px) und Tablet hochkant – ab 700 px mit mehr Karten je Reihe (Block darunter). Am PC haben .start und .sb keine Gestaltung,
   die Knöpfe sind dort unsichtbar. */
.ab-umschalter, .fz-alle, .ueber-mehr { display: none; }
@media (max-width: 899px) {
  .start { display: grid; grid-template-columns: minmax(0, 1fr); }
  .start > .sb { order: 2; min-width: 0; }
  .start > .sb[data-typ="hero"] { order: 0; }
  .start > .sb[data-handy-oben] { order: 1; }
  .start > .sb[data-handy="aus"] { display: none; }

  /* weniger Luft zwischen den Bausteinen, Überschriften kompakter */
  .sb[data-handy="kompakt"] .block { padding-top: 44px; padding-bottom: 44px; }
  .sb[data-handy="kompakt"] .kopf, .sb[data-handy="kompakt"] .kopf-zeile { margin-bottom: 18px; }
  .sb[data-handy="kompakt"] .kopf-zeile { gap: 10px; }
  .sb[data-handy="kompakt"] .kopf p, .sb[data-handy="kompakt"] .kopf-zeile p { margin-top: 10px; font-size: 15.5px; }

  /* Reihen zum Wischen bis an den Bildschirmrand: erste Karte bündig mit dem Text, die nächste schaut rechts heraus */
  .sb[data-handy="kompakt"] .bereiche,
  .sb[data-handy="kompakt"] .produkte,
  .sb[data-handy="kompakt"] .ab-karten,
  .sb[data-handy="kompakt"] .wt-videos {
    display: grid; grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-rows: auto; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--rand); scrollbar-width: thin;
    margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 14px;
  }
  .sb[data-handy="kompakt"] .bereiche > *, .sb[data-handy="kompakt"] .produkte > *,
  .sb[data-handy="kompakt"] .ab-karten > *, .sb[data-handy="kompakt"] .wt-videos > * { position: relative; scroll-snap-align: start; min-width: 0; }
  /* position: relative – sonst hängen unsichtbare Vorlesetexte (.sr, absolut) am Seitenrand statt an der Karte: Karten weiter rechts in
     der Reihe machten die ganze Seite breiter (gemessen 1385 statt 375 px, das Handy zoomte heraus) */

  /* Titelbereich: Kurz-Fakten als kleine Schilder */
  .sb[data-handy="kompakt"] .hero-fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding-top: 0; border-top: 0; }
  .sb[data-handy="kompakt"] .hero-fakten li { display: flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; }
  .sb[data-handy="kompakt"] .hero-fakten b { flex: none; font-size: 13.5px; }
  .sb[data-handy="kompakt"] .hero-fakten span { margin-top: 0; font-size: 12.5px; }

  /* Beliebte Produkte: Karten zum Wischen, ohne Haken-Liste, Knöpfe nebeneinander */
  .sb[data-handy="kompakt"] .produkte { grid-auto-columns: 80%; }
  .sb[data-handy="kompakt"] .produkt .haken { display: none; }
  .sb[data-handy="kompakt"] .produkt-txt { padding: 14px; }
  .sb[data-handy="kompakt"] .produkt h3 { font-size: 16px; }
  .sb[data-handy="kompakt"] .produkt-text { margin-top: 6px; font-size: 13.5px; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .sb[data-handy="kompakt"] .produkt-fuss { padding-top: 12px; }
  .sb[data-handy="kompakt"] .preis { margin-bottom: 10px; }
  .sb[data-handy="kompakt"] .preis b { font-size: 22px; }
  .sb[data-handy="kompakt"] .produkt-knoepfe { flex-wrap: nowrap; gap: 6px; }
  .sb[data-handy="kompakt"] .produkt-knoepfe .btn { flex: 1 1 auto; padding: 11px 8px; font-size: 13.5px; white-space: nowrap; }
  .sb[data-handy="kompakt"] .produkt-knoepfe .btn-hell { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
  .sb[data-handy="kompakt"] .produkt-mehr { grid-column: auto; padding: 22px 18px 20px; }   /* Tablet-Regel „ganze Breite“ aufheben: Karte bleibt am Ende der Reihe */
  .sb[data-handy="kompakt"] .produkt-mehr-titel { font-size: 22px; }
  .sb[data-handy="kompakt"] .produkt-mehr .haken { margin: 14px 0 18px; }
  .sb[data-handy="kompakt"] .produkt-mehr .mehr-zeichnung { display: none; }

  /* „Was suchst du?“ (falls am Handy gezeigt): Karten zum Wischen */
  .sb[data-handy="kompakt"] .bereiche { grid-auto-columns: 74%; }
  .sb[data-handy="kompakt"] .bereich { flex-direction: column; }
  .sb[data-handy="kompakt"] .bereich-bild { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .sb[data-handy="kompakt"] .bereich-txt { padding: 14px 14px 16px; }
  .sb[data-handy="kompakt"] .bereich-titel { font-size: 17px; }
  .sb[data-handy="kompakt"] .bereich-text { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

  /* Passt für dein Fahrzeug: Zeichnung bleibt, die Liste klappt hinter „Alle 9 Einbauten als Liste“ zu */
  .sb[data-handy="kompakt"] .fz-alle {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 11px 16px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--wt-karte, #fff); color: var(--ink); font: 700 15px/1.25 var(--titel); cursor: pointer;
  }
  .fz-alle svg { width: 18px; height: 18px; flex: none; transition: transform .15s; }
  .fz-alle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sb[data-handy="kompakt"] .fz-zu .fz-liste { display: none; }

  /* Heizungsadapter nach Maß: zwei Karten zum Wischen, je Karte ein Bild mit Umschalter Rendering | Schnitt | 3D */
  .sb[data-handy="kompakt"] .ab-karten { grid-auto-columns: 88%; }
  .sb[data-handy="kompakt"] .ab-karte { grid-template-areas: "text" "bilder" "seite"; align-content: start; gap: 14px; padding: 20px 16px 16px; }
  .sb[data-handy="kompakt"] .ab-karte h3 { font-size: 21px; }
  .sb[data-handy="kompakt"] .ab-beschreibung { margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
  .sb[data-handy="kompakt"] .ab-bilder { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sb[data-handy="kompakt"] .ab-karte[data-bild] .ab-bild { display: none; }
  .sb[data-handy="kompakt"] .ab-karte[data-bild="render"] .ab-render,
  .sb[data-handy="kompakt"] .ab-karte[data-bild="schnitt"] .ab-schnitt,
  .sb[data-handy="kompakt"] .ab-karte[data-bild="3d"] .ab-3d { display: flex; }
  .sb[data-handy="kompakt"] .ab-karte[data-bild] .ab-schild { display: none; }
  .sb[data-handy="kompakt"] .ab-karte[data-bild] .ab-rahmen { aspect-ratio: 4 / 3; }
  .sb[data-handy="kompakt"] .ab-karte[data-bild] .ab-3d img { object-fit: contain; }
  .sb[data-handy="kompakt"] .ab-umschalter { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.2); }
  .ab-umschalter button {
    flex: 1 1 0; min-width: 0; min-height: 38px; padding: 6px 8px; border: 0; border-radius: 999px; background: none; color: #fff;
    font: 700 13px/1.2 var(--titel); cursor: pointer;
  }
  .ab-umschalter button[aria-pressed="true"] { background: #fff; color: var(--wt-akzent-dd, #34495a); }
  .karte-kupfer .ab-umschalter button[aria-pressed="true"] { color: var(--wt-holz-dd, #7a5135); }
  .sb[data-handy="kompakt"] .ab-fakten div { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 6px 0; }
  .sb[data-handy="kompakt"] .ab-fakten dd { font-size: 14px; }
  .sb[data-handy="kompakt"] .ab-fuss { margin-top: 10px; }
  .sb[data-handy="kompakt"] .ab-fuss .haken { gap: 6px; font-size: 14px; }

  /* Videos: zwei nebeneinander, das dritte schaut heraus; ohne Beschreibung (die steht im Video) */
  .sb[data-handy="kompakt"] #videos > p:not(.ueber) { margin: 10px 0 16px; font-size: 15.5px; color: var(--ink-2); }   /* wie .kopf p */
  .sb[data-handy="kompakt"] .wt-videos { grid-auto-columns: calc((100% - 12px) / 2.1); margin-top: 0; }
  .sb[data-handy="kompakt"] .wt-video-start, .sb[data-handy="kompakt"] .wt-video-rahmen { border-radius: 10px; }
  .sb[data-handy="kompakt"] .wt-video figcaption { gap: 3px; padding-top: 8px; }
  .sb[data-handy="kompakt"] .wt-video figcaption b { font-size: 14px; line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .sb[data-handy="kompakt"] .wt-video figcaption > span { display: none; }
  .sb[data-handy="kompakt"] .wt-video figcaption a.wt-video-link { font-size: 13px; }
  .sb[data-handy="kompakt"] .wt-video figcaption small { font-size: 11px; line-height: 1.35; }

  /* Gut zu wissen: zwei Spalten, Zeichen über dem Text */
  .sb[data-handy="kompakt"] .vertrauen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 4px; padding-bottom: 36px; }
  .sb[data-handy="kompakt"] .vertrauen li { flex-direction: column; gap: 8px; padding: 14px 12px; }
  .sb[data-handy="kompakt"] .vertrauen li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .sb[data-handy="kompakt"] .vertrauen .ico { width: 36px; height: 36px; border-radius: 11px; }
  .sb[data-handy="kompakt"] .vertrauen .ico svg { width: 19px; height: 19px; }
  .sb[data-handy="kompakt"] .vertrauen b { font-size: 14px; }
  .sb[data-handy="kompakt"] .vertrauen span.t { font-size: 12.5px; }

  /* Über uns: erster Absatz, der Rest hinter „Weiterlesen“; Steckbrief kleiner */
  .sb[data-handy="kompakt"] .ueber-uns { gap: 22px; }
  .sb[data-handy="kompakt"] .ueber-uns-text p { font-size: 15.5px; }
  .sb[data-handy="kompakt"] .ueber-uns-text.zu .mehr-text { display: none; }
  .sb[data-handy="kompakt"] .ueber-mehr {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 0; border: 0; background: none;
    color: var(--petrol-d); font: 700 15px/1.3 var(--titel); cursor: pointer;
  }
  .ueber-mehr svg { width: 18px; height: 18px; }
  .sb[data-handy="kompakt"] .ueber-knoepfe { margin-top: 18px; }
  .sb[data-handy="kompakt"] .ueber-karte { padding: 20px 18px 10px; border-radius: 24px; }
  .sb[data-handy="kompakt"] .ueber-karte img { width: 140px; margin-bottom: 12px; }
  .sb[data-handy="kompakt"] .ueber-karte dl div { padding: 9px 0; font-size: 14px; }
}
/* aufgeklapptes Falt-Handy und Tablet hochkant (700–899 px): mehr Karten je Reihe, Über-uns-Karte nicht über die ganze Breite */
@media (min-width: 700px) and (max-width: 899px) {
  .sb[data-handy="kompakt"] .produkte, .sb[data-handy="kompakt"] .bereiche { grid-auto-columns: calc((100% - 24px) / 2.3); }
  .sb[data-handy="kompakt"] .ab-karten { grid-auto-columns: calc((100% - 12px) / 1.6); }
  .sb[data-handy="kompakt"] .wt-videos { grid-auto-columns: calc((100% - 24px) / 3.2); }
  .sb[data-handy="kompakt"] .vertrauen ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb[data-handy="kompakt"] .vertrauen li:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; align-items: stretch; }
  .sb[data-handy="kompakt"] .ueber-uns { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}
/* Fußzeile (alle Seiten) am Handy: Shop und Service nebeneinander, Rechtliches darunter zweispaltig – Impressum bleibt sofort sichtbar */
@media (max-width: 699px) {
  .fuss-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; padding-top: 40px; padding-bottom: 32px; }
  .fuss-marke { grid-column: 1 / -1; }
  .fuss-innen > nav:last-child { grid-column: 1 / -1; }
  .fuss-innen > nav:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .fuss ul { gap: 11px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .fz-alle svg { transition: none; } }

/* ---------- Martin auf der Seite (2026-10-22, privat/lib/martin.php) ----------
   Inhaber zum Figuren-Konzept: nur Martin als Figur (Bruno bleibt in den Comic-Videos). Figuren als SVG mit fester Breite/Höhe im HTML (kein
   Springen beim Laden), Köpfe auf hellem Kreis (auch auf dunklem Grund gut zu sehen). Am Handy höchstens 120 px hoch. Jeder Platz ist in der
   Werkstatt abschaltbar – dann fehlen diese Klassen im HTML und alles sieht aus wie bisher. */
.martin-figur { display: block; max-width: none; height: auto; }
.martin-kopf { display: inline-block; flex: none; line-height: 0; }
.martin-kopf img { display: block; border-radius: 50%; }

/* Herkunft mit Gesicht: Etikett über der Überschrift (statt des Punkts Martins Kopf), Klick → Über uns */
.kicker.kicker-martin { padding: 0; }
.kicker-martin a { display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; border-radius: inherit; color: inherit; text-decoration: none; }
.kicker-martin a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.kicker-martin .martin-kopf img { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.kicker-martin i { display: none; }
/* Handy (Konzept: im ersten Bildschirm keine Figur außer „Frag Martin“): Punkt statt Kopf, nur „Aus Schneeberg im Erzgebirge“ */
@media (max-width: 699px) {
  .kicker-martin a { padding: 6px 14px 6px 10px; }
  .kicker-martin .martin-kopf, .kicker-martin .km-vorn { display: none; }
  .kicker-martin i { display: block; }
}

/* „Frag Martin“ unten rechts: Kopf statt Sprechblase */
.frag-knopf.frag-martin { padding: 5px 18px 5px 5px; gap: 10px; }
.frag-martin .martin-kopf img { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
@media (max-width: 640px) { .frag-knopf.frag-martin { padding: 5px 16px 5px 5px; } }

/* Comic-Leiste „Bruno & Martin“ (Baustein comics): Martin zeigt auf die Reihe; PC fünf Karten mit Pfeilen, schmaler weniger, Handy zum Wischen */
.comics-kopf { display: flex; align-items: flex-end; gap: 12px 28px; margin-bottom: 28px; }
.comics-kopf .kopf { flex: 1 1 auto; min-width: 0; margin: 0 0 4px; }
.comics-kopf .martin-figur { width: auto; height: 168px; margin-bottom: -4px; }
.comics-pfeile { display: flex; gap: 8px; flex: none; margin: 0 0 6px auto; }
.comics-pfeil { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: var(--papier, #fff); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s, opacity .15s; }
.comics-pfeil:hover:not(:disabled) { border-color: var(--petrol); color: var(--petrol-d); }
.comics-pfeil:disabled { opacity: .35; cursor: default; }
.comics-pfeil svg { width: 20px; height: 20px; }
.comics-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; padding: 4px 2px 14px; }
.comic-karte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; scroll-snap-align: start; }
.comic-start { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #1d2327;
  box-shadow: 0 6px 18px rgba(20, 30, 38, .14); transition: transform .2s, box-shadow .2s; }
.comic-start img { width: 100%; height: 100%; object-fit: cover; }
.comic-start:hover, .comic-start:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 30, 38, .24); }
.comic-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255, 255, 255, .93); color: #11181c; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); transition: transform .2s; }
.comic-start:hover .comic-play { transform: scale(1.08); }
.comic-play svg { width: 24px; height: 24px; margin-left: 2px; }
h3.comic-titel { margin: 12px 2px 2px; font: 700 16px/1.3 var(--titel); color: var(--ink); }
.comic-link { margin: 0 2px; font: 700 14.5px/1.4 var(--titel); color: var(--petrol-d); text-decoration: none; }
.comic-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1099px) { .comics-reihe { grid-auto-columns: calc((100% - 3 * 20px) / 4); } }
@media (max-width: 899px) {
  .comics-pfeile { display: none; }
  .comics-kopf { align-items: center; gap: 14px; margin-bottom: 16px; }
  .comics-kopf .martin-figur { height: 104px; margin-bottom: 0; }
  .comics-reihe { grid-auto-columns: calc((100% - 24px) / 3.2); gap: 12px; margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 14px; scroll-padding: 0 var(--rand); }
  h3.comic-titel { margin-top: 8px; font-size: 14px; }
  .comic-link { font-size: 13px; }
  .comic-play { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .comic-play svg { width: 20px; height: 20px; }
}
@media (max-width: 699px) {
  .comics-reihe { grid-auto-columns: calc((100% - 12px) / 2.1); }
  .comics-kopf .martin-figur { height: 84px; }
  .comic-start { border-radius: 10px; }
}

/* Über uns: kleiner Comic-Martin neben dem Foto (Baustein: rechts neben dem Bild; Seite /ueber-uns: unter dem Foto) */
.martin-comic { display: flex; align-items: flex-end; gap: 10px; margin: 0; font: 600 13.5px/1.4 var(--titel); color: var(--ink-2); }
.ueber-fotos { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin: 0 auto 28px; }
.ueber-fotos > picture { flex: 0 1 300px; min-width: 0; }
.ueber-karte .ueber-fotos > picture img { width: 100%; margin: 0; }
.ueber-fotos .martin-comic { flex: 0 0 104px; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; }
.ueber-karte .martin-comic img { width: 69px; height: 104px; margin: 0; }
.ueber-bild .martin-comic { margin-top: 12px; }
.ueber-bild .martin-comic img { width: 48px; height: 72px; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
@media (max-width: 899px) {
  .sb[data-handy="kompakt"] .ueber-fotos { margin-bottom: 12px; gap: 12px; }
  .sb[data-handy="kompakt"] .ueber-fotos > picture { flex-basis: 140px; }
  .sb[data-handy="kompakt"] .ueber-karte .ueber-fotos > picture img { width: 100%; margin: 0; }
  .sb[data-handy="kompakt"] .ueber-karte .martin-comic img { width: 52px; height: 78px; margin: 0; }
  .sb[data-handy="kompakt"] .ueber-fotos .martin-comic { flex-basis: 96px; font-size: 12px; }
}
@media (max-width: 640px) { .ueber-bild .martin-comic { max-width: 240px; } }

/* Nichts gefunden: Seite fehlt (Martin verlegen) und Suche ohne Treffer (Martin zeigt) */
.martin-leer { display: flex; align-items: flex-end; gap: 22px; margin: 10px 0 26px; padding: 22px 24px 22px 16px; border-radius: 20px; background: var(--petrol-l); }
.martin-leer .martin-leer-figur { flex: none; width: auto; height: 190px; margin-bottom: -22px; }
.martin-leer-suche .martin-leer-figur { height: 150px; }
.martin-leer-text { flex: 1 1 auto; min-width: 0; }
.rechtstext .martin-leer-text p { margin: 0 0 10px; }
.rechtstext p.martin-leer-titel { font: 800 21px/1.3 var(--titel); color: var(--ink); }
.martin-leer .suche-seite-form { margin: 14px 0 12px; }
.rechtstext p.martin-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
@media (max-width: 640px) {
  .martin-leer { display: block; padding: 18px 16px 16px; }
  .martin-leer .martin-leer-figur { float: left; height: 112px; margin: 0 12px 6px 0; }
  .martin-leer-suche .martin-leer-figur { height: 96px; }
  .martin-leer .suche-seite-form, .rechtstext p.martin-knoepfe { clear: both; }
  .rechtstext p.martin-leer-titel { font-size: 19px; }
  .rechtstext p.martin-knoepfe { gap: 8px; }
  .martin-knoepfe .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
}

/* Bestätigungen: Martin mit Daumen hoch und kurzer Sprechblase im grünen Kasten */
.martin-ok { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; }
.martin-ok-figur { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: -4px 0 -16px; align-self: end; }
.martin-ok-figur .martin-figur { width: auto; height: 112px; }
.martin-ok-figur figcaption { order: -1; position: relative; max-width: 150px; padding: 6px 11px; border: 1.5px solid #2b2019; border-radius: 12px; background: #fff;
  color: #2b2019; font: 700 12.5px/1.25 var(--titel); text-align: center; text-wrap: balance; }
.martin-ok-figur figcaption::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px; margin-left: -5px; background: #fff;
  border-right: 1.5px solid #2b2019; border-bottom: 1.5px solid #2b2019; transform: rotate(45deg); }
/* Handy: Text über die ganze Breite, darunter rechts Sprechblase und Martin nebeneinander */
@media (max-width: 560px) {
  .martin-ok { display: block; }
  .martin-ok-figur { flex-direction: row; justify-content: flex-end; align-items: flex-end; gap: 12px; margin: 6px 0 -16px; }
  .martin-ok-figur .martin-figur { height: 88px; }
  .martin-ok-figur figcaption { margin-bottom: 34px; max-width: 160px; padding: 5px 9px; font-size: 12px; }
  .martin-ok-figur figcaption::after { left: auto; right: -6px; bottom: 50%; margin: 0 0 -5px; transform: rotate(-45deg); }
}

/* Jahreszeiten-Band (Winter): Martin mit Mütze vorn, Text mit Link zum Ratgeber */
.band-jahreszeit p { display: flex; align-items: center; justify-content: center; gap: 10px; }
.band-jahreszeit .martin-kopf img { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
@media (max-width: 560px) { .band-jahreszeit p { justify-content: flex-start; } }

/* ---------- Klarere Startseite (2026-10-22, .start-neu = Stand mit 'gliederung', privat/lib/startseite.php) ----------
   Gleiche Abschnittsköpfe (kleine Zeile + Überschrift + ein Satz) und gleiche Abstände zwischen allen Bausteinen – auch die Karten
   „Passt für dein Fahrzeug“ und „Mit dem Handy ausmessen“ stehen nicht mehr direkt unter dem Titelbereich. Vorlage „Bisherige Gliederung“
   (ohne 'gliederung'): nichts davon, alles wie bis 22.10.2026. Am Handy bleibt die Kompakt-Logik (Abschnitt „Startseite am Handy“). */
.start-neu .block { padding-top: 72px; padding-bottom: 72px; }
.start-neu > .sb > .fz, .start-neu > .sb > .am { padding-top: 72px; padding-bottom: 72px; }
.start-neu .kopf { margin-bottom: 32px; }
.start-neu .kopf-zeile { margin-bottom: 32px; }
.start-neu .comics-kopf .kopf { margin-bottom: 4px; }
.start-neu .sb h2[id$="-titel"] { font-size: clamp(28px, 3.3vw, 40px); }
.start-neu .kopf p:not(.ueber), .start-neu .kopf-zeile p:not(.ueber), .start-neu .fz-kopf p:not(.ueber), .start-neu .am-kopf p:not(.ueber) {
  margin-top: 12px; font-size: 17px; line-height: 1.55; }
.start-neu #videos .wt-videos { margin-top: 0; }
@media (max-width: 900px) {
  .start-neu .block, .start-neu > .sb > .fz, .start-neu > .sb > .am { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 899px) {
  .start-neu .sb[data-handy="kompakt"] .block, .start-neu > .sb[data-handy="kompakt"] > .fz, .start-neu > .sb[data-handy="kompakt"] > .am { padding-top: 36px; padding-bottom: 36px; }
  .start-neu .sb[data-handy="kompakt"] .kopf, .start-neu .sb[data-handy="kompakt"] .kopf-zeile { margin-bottom: 18px; }
  .start-neu .sb[data-handy="kompakt"] .kopf p:not(.ueber), .start-neu .sb[data-handy="kompakt"] .kopf-zeile p:not(.ueber) { font-size: 15.5px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .comics-reihe { scroll-behavior: auto; }
  .comic-start:hover, .comic-start:hover .comic-play { transform: none; }
}

/* ---------- Ladesymbol mit Martin (2026-10-22, Platz „laden“ in privat/lib/martin.php) ----------
   Martins Kopf dreht sich wie eine Münze, wo etwas lädt – Markup wt_martin_laden() bzw. WT_MartinLaden.html()
   (static/konfigurator/js/martin-laden.js). Dieselben Regeln stehen im Baustein (STIL) – bei Änderung beide anpassen,
   werkzeuge/martin-laden-browser-test.js vergleicht sie. --ml-css sagt dem Baustein: Stile sind schon da. */
:root { --ml-css: 1; }

.ml{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;line-height:1.3;color:var(--wt-text-2,#435059);font-size:14px}
.ml-figur{position:relative;flex:none;width:var(--ml-g,32px);height:var(--ml-g,32px);perspective:calc(var(--ml-g,32px) * 4)}
.ml-dreh{position:absolute;inset:0;transform-style:preserve-3d}
.ml-seite{position:absolute;inset:0;border-radius:50%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ml-seite picture,.ml-seite img{display:block;width:100%;height:100%;border-radius:50%}
.ml-vorn{box-shadow:0 0 0 1px var(--wt-linie,#dde2e5)}
.ml-hinten{display:grid;place-items:center;background:var(--wt-kopf,#232a31);transform:rotateY(180deg)}
.ml-hinten img{width:66%;height:auto;border-radius:0}
.ml-muenze .ml-dreh{animation:ml-muenze 1.2s cubic-bezier(.45,.05,.55,.95) infinite}
.ml-kreisen .ml-hinten{display:none}
.ml-kreisen .ml-vorn{inset:10%;animation:ml-kreisen 1.4s linear infinite}
.ml-punkte{display:none;gap:3px;align-items:center}
.ml-punkte i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.ml-text{white-space:nowrap}
.ml-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ml-spaet{animation:ml-ein 0s .3s both}
.ml-wartet{visibility:hidden}
.ml-ueber{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.ml-ueber .ml-text{padding:2px 10px;border-radius:999px;background:var(--wt-karte,#fff);box-shadow:0 1px 4px rgba(20,32,44,.12)}
.ml-verdeckt{display:none!important}
@keyframes ml-muenze{0%,20%{transform:rotateY(0)}50%,60%{transform:rotateY(180deg)}90%,100%{transform:rotateY(360deg)}}
@keyframes ml-kreisen{from{transform:rotate(0deg) translateX(9%) rotate(0deg)}to{transform:rotate(360deg) translateX(9%) rotate(-360deg)}}
@keyframes ml-ein{from{visibility:hidden}to{visibility:visible}}
.ml-still .ml-dreh,.ml-still .ml-vorn{animation:none!important}
.ml-still.ml-kreisen .ml-vorn{inset:0}
.ml-still:not(.ml-mit-text) .ml-punkte{display:inline-flex}
@media (prefers-reduced-motion:reduce){.ml-muenze .ml-dreh,.ml-kreisen .ml-vorn{animation:none}.ml-kreisen .ml-vorn{inset:0}.ml:not(.ml-mit-text) .ml-punkte{display:inline-flex}}