/* ============================================================================
   Dachhaut-Konfigurator — Seiten-CSS fuer /konfigurator/
   ============================================================================
   Diese Seite laeuft BEWUSST ohne Woodmart-/WooCommerce-CSS (siehe
   page-konfigurator.php). Alles, was die Seite braucht, steht deshalb hier.

   AENDERUNG 2026-07-30 (Klassennamen entkoppelt): Der ZWANG dazu ist weg. Der
   Wizard hiess frueher .sv-btn, .sv-card und .sv-step — genau diese drei Namen
   sind im Shop-CSS anders belegt (live nachgezaehlt am 30.07.: 29, 8 und 2
   Regeln ueber 01-foundation.css bis 90-utilities.css), das Shop-CSS haette den
   Konfigurator zerlegt. Sie heissen jetzt .sv-konfig-btn / -card / -step und
   kollidieren mit nichts mehr. .sv-btn2, .sv-prod und .sv-root waren im
   Shop-CSS nie belegt (0 Treffer) und bleiben deshalb unveraendert — sie
   umzubenennen waere Bewegung ohne Wirkung.

   Das Abraeumen des Shop-CSS bleibt trotzdem drin, jetzt aus einem
   eigenstaendigen Grund: die Seite laedt dadurch deutlich weniger. Es wieder
   zuzulassen ist ein SEPARATER Schritt und braucht einen visuellen Durchlauf
   durch alle fuenf Schritte — ungeprueft eingeschaltet waere das ein Blindflug.

   AENDERUNG 2026-07-28 (Design-Runde "Angleichung an die Seiten-Runden"):
   Die Palette vom 27.07. sass auf dem Farbwinkel 217 Grad von #1A2A44. Die am
   selben Tag entworfenen Ratgeber-, Kategorie-, Prozess- und Anleitungsseiten
   fahren die Shop-Tokens aus 01-foundation.css auf neutralem Grau. Auf Ansage
   der Geschaeftsfuehrung ist der Konfigurator jetzt auf diese Tokens umgestellt.
   Was sich geaendert hat, steht in UEBERGABE.md Abschnitt 4 mit nachgerechneten
   Kontrasten. Struktur, Klassennamen, Seitengeruest und Druckansicht sind
   unveraendert.
   ============================================================================ */

/* --------------------------------------------------------- Farben (Shop-Tokens)
   Gleiche Werte wie 01-foundation.css, damit Konfigurator und Shop-Seiten
   dieselbe Sprache sprechen. Kontraste im Browser gegen #F5F5F7 gerechnet —
   den unguenstigeren der beiden Gruende. Auf Weiss liegt jeder Wert hoeher. */
:root {
  --sv-primary: #CC3333;        /* bleibt   Marke, Kaufaktion · weiss darauf 5,14:1 */
  --sv-primary-dark: #B82E2E;   /* war A82828 · Hover · weiss darauf 6,05:1         */
  --sv-headline: #1D1D1F;       /* war 1A2A44 · Ueberschriften, dunkle Flaeche 15,46:1 */
  --sv-ink: #424245;            /* war 333A45 · Fliesstext · 9,20:1                 */
  --sv-muted: #5C5C66;          /* war 5F6673 · Nebentext · 6,07:1                  */
  --sv-soft: #6E6E78;           /* NEU      Mute-Stufe, z. B. inaktiver Schritt · 4,63:1 */
  --sv-line: #D2D2D7;           /* war DCDFE5 · Rahmen und starke Trenner           */
  --sv-line-soft: #E6E6EA;      /* NEU      feine Zeilentrenner                     */
  --sv-surface: #F5F5F7;        /* war F4F6F9 · Flaeche hinter und in Karten        */
  --sv-bg: #FFFFFF;             /* Kartenflaeche. Weisse SCHRIFT bleibt literal #FFFFFF */

  /* Zusage (Rat, Vorteil) — ersetzt --sv-success #17803F */
  --sv-success: #1B7A37;        /* 4,96:1 auf Flaeche · weiss darauf 5,40:1          */
  --sv-success-bg: #E8F8ED;     /* Flaeche fuer Zusagen, z. B. "Zuschnitt gratis"   */
  --sv-success-on-dark: #7CDB95;/* dasselbe Gruen auf der dunklen Aktionsleiste     */

  /* Warnung — nur Flaeche und Etikett, Schrift in -strong */
  --sv-warning: #E39A0C;
  --sv-warning-bg: #FFF8E1;
  --sv-warning-strong: #9F5E00;

  /* Fehler — loest sich vom Markenrot */
  --sv-error: #9F2233;
  --sv-error-bg: #F8F0F1;
  --sv-error-bg: color-mix(in srgb, var(--sv-error) 7%, #FFFFFF);

  /* Zuschnittmass in den Zeichnungen. Der Entwurf wollte diese Rolle streichen
     (Zuschnittmass fett in --sv-headline). Dagegen gab es ein Veto, bestaetigt
     am 28.07.: Die Farbe traegt in der Draufsicht und in der Sparrenachsen-
     Leiste die Unterscheidung Standardmass/Zuschnitt — bei 11-px-Ziffern ist
     Fettschrift dafuer zu schwach, und die Legende benennt die Farbe woertlich
     ("Orange = Zuschnittmass", wizard.jsx Z877). Statt #B4530A jetzt der
     einzige orangebraune Ton des Shop-Systems: #9F5E00 aus 01-foundation.css
     (dort --sv-warning-strong). Auf Flaeche 4,73:1, auf Weiss 5,15:1. */
  --sv-accent: #9F5E00;

  /* Uebergang: der Wizard nennt die Warn-Schrift noch --sv-warning-text.
     Faellt weg, sobald wizard.jsx auf --sv-warning-strong umgestellt ist
     (ZUORDNUNG-278.md, Abschnitt 5). Ohne diesen Alias verliert die Warnbox
     ihre Schriftfarbe, sobald diese Datei allein eingespielt wird. */
  --sv-warning-text: var(--sv-warning-strong);

  --sv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* EINE Schrift ueberall (Asim 30.07.: „die Apple-Schrift des Shops und keine
     andere"). --sv-mono war eine eigene Monospace-Kette fuer Masszahlen und
     Preise; fehlten deren Schriften, fiel der Browser auf eine SERIFEN-Schrift
     zurueck — genau so sahen die Zahlen in der Zeichnung aus. Der Token bleibt
     bestehen (rund 40 Verwendungen), zeigt aber jetzt auf die Shop-Schrift —
     damit ist jede Stelle auf einmal umgestellt und keine kann mehr abweichen.
     Gleichmaessige Ziffernbreite, wo sie zaehlt, liefert font-variant-numeric
     an den Preiszeilen; die Apple-Schrift unterstuetzt das. */
  --sv-mono: var(--sv-font);

  /* ------------------------------------------------------------ Typo-Skala
     17 gewachsene Groessen auf 7 benannte Stufen. Zuordnung aller 278
     Inline-Stile: ZUORDNUNG-278.md. Kein Wert unter 11 px. */
  --sv-t1: clamp(22px, 3vw, 38px);   --sv-t1-w: 700;  /* Schritt-Titel. clamp statt
                                     festem Wert: die 600-px-Abfrage unten greift
                                     erst spaet, sonst stuenden auf einem 800-px-
                                     Fenster volle 38 px. */
  --sv-t2: 22px;   --sv-t2-w: 700;   /* Abschnitt-Titel, Kennzahl            */
  --sv-t3: 17px;   --sv-t3-w: 700;   /* Kartentitel, Preis                   */
  --sv-t4: 15px;   --sv-t4-w: 600;   /* Knopf, Wert in der Aktionsleiste     */
  --sv-t5: 14.5px; --sv-t5-w: 400;   /* Fliesstext, Kartentext               */
  --sv-t6: 13px;   --sv-t6-w: 400;   /* Nebentext, Fussnote, Bildunterschrift*/
  --sv-t7: 11px;   --sv-t7-w: 600;   /* Etikett, Chip, Massszahl             */
  --sv-fs: var(--sv-t5);             /* Grundgroesse, war 15px               */
  --sv-ls-title: -0.022em;
  --sv-ls-caps: 0.09em;              /* Etiketten wie in den Shop-Seiten     */
  --sv-ls-chip: 0.05em;

  /* ------------------------------------------------------------- Abstaende
     11 gewachsene Werte auf 5 Stufen. */
  --sv-sp1: 4px;
  --sv-sp2: 8px;
  --sv-sp3: 12px;
  --sv-sp4: 20px;
  --sv-sp5: 32px;
  --sv-card-pad: var(--sv-sp4);

  /* ---------------------------------------------------------------- Formen
     8 gewachsene Radien auf 3. Werte der Shop-Seiten. */
  --sv-radius: 18px;               /* Karten, Boxen — war 12px               */
  --sv-radius-btn: 999px;          /* Knoepfe, Chips — war 10px              */
  --sv-radius-sm: 8px;             /* Felder, Bilder, Schema-Kacheln         */

  /* ----------------------------------------------------------- Bildfeld
     Die Produktfotos sind 800x800 und standen auf 54-62 px — bezahlte
     Ladelast ohne Erkenntnisgewinn. Jetzt ein einheitliches Feld, mobil
     kleiner, damit neben Bild und Preis noch Text Platz hat. */
  --sv-thumb-w: 96px;
  --sv-thumb-h: 72px;

  /* --------------------------------------------------------------- Schatten
     Auf 29,29,31 nachgezogen. Zuvor hingen 19 rgba()-Literale an 26,42,68 —
     mit dem neuen Headline-Ton waeren Schatten und Flaechen ins Blaue gedriftet. */
  --sv-sh1: 0 1px 3px rgba(29, 29, 31, 0.06), 0 4px 14px rgba(29, 29, 31, 0.07);
  --sv-sh2: 0 8px 24px rgba(29, 29, 31, 0.14);
  --sv-sh3: 0 -4px 16px rgba(29, 29, 31, 0.06);

  --sv-cta: var(--sv-primary);
  --sv-cta-hover: var(--sv-primary-dark);
  --sv-kopf-h: 56px;
  --sv-touch: 44px;

  --sv-konfig-max: 1400px;
  --sv-konfig-gutter: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sv-font);
  font-size: var(--sv-fs);
  color: var(--sv-ink);
  background: var(--sv-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Seitengeruest
   Flex-Spalte statt position:fixed. 100dvh statt 100vh, sonst verschwindet die
   Rechtszeile auf iOS-Safari hinter der dynamischen Adressleiste. UNVERAENDERT. */
.sv-konfig-seite {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* Rueckfall fuer Browser ohne dvh */
  height: 100dvh;
  overflow: hidden;
}

/* min-height:0 ist hier entscheidend: ohne das ignoriert der Flex-Container das
   overflow und der Wizard sprengt den Viewport nach unten. */
.sv-konfig-buehne {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.sv-konfig-buehne > #root { height: 100%; }

/* ------------------------------------------------------------------------ Kopf */
.sv-konfig-kopf {
  flex: 0 0 auto;
  height: var(--sv-kopf-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-sp3);
  padding: 0 var(--sv-sp3);
  border-bottom: 1px solid var(--sv-line);
  background: var(--sv-bg);
}

.sv-konfig-kopf__logo { display: flex; align-items: center; }
.sv-konfig-kopf__logo img { display: block; height: 32px; width: auto; }

/* Seiten-H1 im Kopf (Adversarial-Befund 21.08.: Seite hatte 0 H1). flex:1 + Ellipsis:
   kann den Kopf nie sprengen — auf sehr schmalen Geraeten wird der Text abgeschnitten,
   bleibt aber im DOM vollstaendig. Keine zusaetzliche Bauhoehe. */
.sv-konfig-kopf__titel {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: var(--sv-t3);
  font-weight: 600;
  color: var(--sv-headline);
}

.sv-konfig-kopf__rechts {
  display: flex;
  align-items: center;
  gap: var(--sv-sp2);
}

.sv-konfig-kopf__tel,
.sv-konfig-kopf__warenkorb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 15px;
  border: 1px solid transparent;
  border-radius: var(--sv-radius-btn);
  font-size: var(--sv-t5);
  font-weight: var(--sv-t4-w);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.sv-konfig-kopf__tel {
  color: var(--sv-headline);
  border-color: var(--sv-line);
}
.sv-konfig-kopf__tel:hover {
  color: var(--sv-primary);
  border-color: var(--sv-primary);
}

/* Ruecklink zu den fertigen Bausaetzen (Hybrid-Modell, 2026-08-21): gleicher Grundstil
   wie der Telefon-Knopf. Unter 600 px ausgeblendet — der Kopf ist dort auf Logo + Icons
   verdichtet, mobil tragen PDP-Hinweis und Hub-Kategorie den Rueckweg. */
.sv-konfig-kopf__bausaetze {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 15px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-btn);
  font-size: var(--sv-t5);
  font-weight: var(--sv-t4-w);
  text-decoration: none;
  white-space: nowrap;
  color: var(--sv-headline);
  transition: color 0.12s, border-color 0.12s;
}
.sv-konfig-kopf__bausaetze:hover {
  color: var(--sv-primary);
  border-color: var(--sv-primary);
}
@media (max-width: 600px) {
  .sv-konfig-kopf__bausaetze { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-konfig-kopf__bausaetze { transition: none; }
}

/* Rahmen in der Fuellfarbe: ohne ihn entsteht am roten Knopf ein heller Saum. */
.sv-konfig-kopf__warenkorb {
  color: #FFFFFF;
  background: var(--sv-cta);
  border-color: var(--sv-cta);
}
.sv-konfig-kopf__warenkorb:hover {
  background: var(--sv-cta-hover);
  border-color: var(--sv-cta-hover);
}

.sv-konfig-kopf__icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- Rechtszeile */
.sv-konfig-fuss {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 9px var(--sv-sp3);
  border-top: 1px solid var(--sv-line);
  background: var(--sv-surface);
  font-size: var(--sv-t6);
  color: var(--sv-muted);
}

.sv-konfig-fuss a {
  color: var(--sv-muted);
  text-decoration: none;
}
.sv-konfig-fuss a:hover {
  color: var(--sv-primary);
  text-decoration: underline;
}

/* Auf schmalen Geraeten zaehlt jeder Pixel Bauhoehe fuer den Wizard. */
@media (max-width: 600px) {
  :root {
    --sv-kopf-h: 50px;
    --sv-konfig-gutter: 11px;
    --sv-t1: 22px;   /* Schritt-Titel mobil — Bauhoehe geht vor Groesse */
    --sv-t2: 17px;
    --sv-t3: 15px;   /* Kartentitel und Preis: 17 px sprengen die 375-px-Karte */
    --sv-t5: 13.5px; /* Kartentext: bei 14,5 px umbricht die Beschreibung 5-zeilig */
    --sv-thumb-w: 76px;
    --sv-thumb-h: 58px;
  }
  .sv-konfig-kopf { padding: 0 11px; gap: 9px; }
  .sv-konfig-kopf__logo img { height: 26px; }
  .sv-konfig-kopf__tel span,
  .sv-konfig-kopf__warenkorb span { display: none; }
  .sv-konfig-kopf__titel { font-size: 11px; padding: 0 4px; letter-spacing: -0.01em; }
  .sv-konfig-kopf__tel,
  .sv-konfig-kopf__warenkorb { padding: 8px 11px; min-width: var(--sv-touch); }
  .sv-konfig-fuss { font-size: var(--sv-t7); font-weight: 400; padding: 7px 11px; gap: 4px 13px; }
}

/* ------------------------------------------------------- Inhaltsspalte 1400 px
   Gleiche Breite wie der uebrige Shop (Woodmart .container, live 1400 px).

   Bewusst ueber seitlichen Innenabstand statt max-width auf den Leisten selbst:
   So laufen Hintergrund und Trennlinie von Kopf und Rechtszeile weiter randlos
   durch — genau wie auf den Shop-Seiten —, waehrend der INHALT in der 1400er-
   Spalte sitzt.

   max() haelt bei schmalen Fenstern den normalen Randabstand: Ist das Fenster
   kleiner als 1400 px, wird die Klammer negativ und der Gutter gewinnt — unter
   600 px liefert die Medienabfrage oben dafuer 11 px statt 16 px.

   Diese Regel steht ABSICHTLICH nach der 600-px-Abfrage: deren
   `padding`-Kurzschreibweise wuerde ein frueher notiertes padding-inline sonst
   ueberschreiben. Der vertikale Abstand aus der Kurzform bleibt erhalten, weil
   padding-inline nur links und rechts anfasst.

   Die Buehne begrenzt ihren Inhalt ueber dieselbe Formel — ein max-width auf
   #root taete es nicht, weil der Wizard seinen Container fuellt. Sie bekommt
   aber BEWUSST keinen Gutter (0 statt 16/11 px): Unterhalb von 1400 px soll der
   Wizard weiter randlos laufen. Mit Gutter haette er auf 375 px nur noch 353 px
   gehabt — und gerade dort wurde beim Livegang um jeden Pixel gerungen
   (Massfeld-Rahmen mit 520 px Mindestbreite).

   Der Wizard hat kein einziges position:fixed-Element (im Browser geprueft:
   fixiert sind nur Cookiebot und Trustbadge) — die Aktionsleiste unten wandert
   also brav mit. GEOMETRIE UNVERAENDERT gegenueber dem Stand vom 27.07. */
.sv-konfig-kopf,
.sv-konfig-fuss {
  padding-inline: max(var(--sv-konfig-gutter), calc((100% - var(--sv-konfig-max)) / 2));
}

.sv-konfig-buehne {
  padding-inline: max(0px, calc((100% - var(--sv-konfig-max)) / 2));
}

/* --------------------------------------- Doppelten Kopf des Wizards abschalten
   Der Wizard rendert selbst eine Kopfzeile mit Logo, Telefon und Warenkorb-Icon.
   Die ist aber rein dekorativ — sie enthaelt keinen einzigen Link (geprueft im
   Browser: 0 <a> im Wizard-Kopf). Der Kopf der Seite kann dasselbe und ist
   klickbar, also bleibt genau einer stehen. Nebeneffekt: 57 px mehr Bauhoehe.
   !important ist noetig, weil der Wizard display:flex als Inline-Style setzt. */
.sv-konfig-buehne .sv-root > header { display: none !important; }

/* ------------------------------------- Trusted-Shops-Badge auf dieser Seite aus
   Das Badge liegt fixiert unten rechts mit z-index 2147483647 und ueberdeckte im
   Live-Test genau den "Weiter"-Button des Wizards (gemessen: Badge 941-1034 x
   1046-1132, Button 952-1030 x 1108-1143). Auf einer Vollbild-Werkzeugseite ohne
   Shop-Rahmen hat es keinen Platz — im Warenkorb und ueberall sonst bleibt es
   sichtbar. Die ID traegt einen wechselnden Hash, daher der Praefix-Selektor.
   UNVERAENDERT. */
[id^="trustbadge-container-"] { display: none !important; }

/* ------------------------------------ Consent-Knopf ueber die Aktionsleiste
   Das Cookiebot-Widget schwebt fixiert unten links und schnitt die Artikelzahl
   in der Aktionsleiste an. Ausblenden ist keine Option — der Widerruf der
   Einwilligung muss erreichbar bleiben. Auf normalen Shop-Seiten faellt das nicht
   auf, weil dort gescrollt wird; hier steht die Leiste fest. Also wandert das
   Widget nach oben, damit die Leiste ihre volle Breite behaelt.
   100 px = Aktionsleiste (56) + Rechtszeile (34) + Luft.

   "html body" ist kein Zierrat: das mu-plugin sv-mobile-toolbar-clear.php
   setzt unter 1024 px ein #CookiebotWidget{bottom:65px !important}. Bei gleicher
   Spezifitaet und beidem !important gewinnt die spaetere Regel — also mehr
   Spezifitaet statt das mu-plugin anzufassen. UNVERAENDERT. */
html body #CookiebotWidget { bottom: 100px !important; }

@media (max-width: 600px) {
  /* Mobil ist die Aktionsleiste hoeher und die Rechtszeile bricht um. */
  html body #CookiebotWidget { bottom: 124px !important; }

  /* ------------------------------------------- Produktkarten auf schmalem Grund
     Bild, Text und Preis nebeneinander lassen dem Text auf 375 px nur rund
     130 px — die Beschreibung bricht dann fuenfzeilig um. Der Preis wandert
     deshalb unter den Text und richtet sich an dessen linker Kante aus. */
  .sv-prod { flex-wrap: wrap; row-gap: var(--sv-sp2); }
  .sv-prod > :last-child:not(:first-child) {
    flex: 1 1 100%;
    text-align: left;
    padding-left: calc(var(--sv-thumb-w) + var(--sv-sp3));
  }
}

/* ---------------------------------------------- Ergebnis-Schritt: Spalten
   Vorgabe der Geschaeftsfuehrung 30.07.: auf dem Tablet EINSPALTIG, mobil erst gar
   nicht zweispaltig. Anlass war ein Screenshot, auf dem im Zuschnittplan „Platte 3"
   und „Platte 4" rechts aus dem Bild liefen.

   Warum das hierher gehoert und nicht ins JavaScript: Der Wizard kennt nur EINE
   Grenze (`isMobile`, 760 px). Zwischen 760 und 1100 px stand die Preisbox mit ihren
   festen 340 px also neben einer zu schmalen linken Spalte. Das ist ein
   Breiten-Problem und damit die Aufgabe einer Medienabfrage.

   Die 1100 px sind gerechnet, nicht geraten: 340 px Preisbox + 14 px Spalten-Abstand
   + die Innenabstaende der Buehne lassen der linken Spalte darunter weniger als
   700 px — und 700 px war die feste Breite, mit der der Zuschnittplan bis zum 30.07.
   gerechnet hat. Er rechnet jetzt in Prozent und passt in jede Breite; die Grenze
   bleibt trotzdem, weil unter 1100 px zwei Spalten schlicht zu eng sind.

   minmax(0, 1fr) statt 1fr: ohne die 0 behaelt die linke Spalte ihre Inhaltsbreite
   und schiebt die Preisbox aus der Buehne — derselbe Fallstrick wie in der
   Seitenleiste. */
.sv-konfig-ergebnis {
  display: grid;
  gap: 14px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.sv-konfig-ergebnis__preis {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 0;
}

@media (max-width: 1100px) {
  .sv-konfig-ergebnis { grid-template-columns: minmax(0, 1fr); }
  /* Einspaltig wuerde die Preisbox ueber dem Zuschnittplan festhaengen. */
  .sv-konfig-ergebnis__preis { position: static; }
}

/* ------------------------------------------- Kleine Symbole, grosse Flaeche
   Fuer Knoepfe, die bewusst klein AUSSEHEN sollen (das Info-Symbol neben
   Fachbegriffen), aber trotzdem mit dem Finger treffbar sein muessen. Gemessen
   im Prueflauf 30.07.: 12 x 12 px — weit unter der 24-px-Norm und auf dem Handy
   praktisch nicht zu treffen.

   Das Pseudo-Element vergroessert NUR die Trefferflaeche, nicht die Optik: es
   liegt mittig ueber dem Symbol, ist unsichtbar und aendert das Layout nicht
   (position:absolute). Der Knopf selbst bleibt 12 px klein. */
.sv-konfig-hit { position: relative; }

.sv-konfig-hit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sv-touch);
  height: var(--sv-touch);
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------- Bausteine des Wizards */
a { color: var(--sv-primary); }
a:hover { color: var(--sv-primary-dark); }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Karten liegen flach wie auf den Shop-Seiten — der Schatten kommt erst beim
   Anheben. Vorgabe der Geschaeftsfuehrung vom 12.07.: Hover hebt an und wirft
   Schatten, NIEMALS ein farbiger Rand. */
.sv-konfig-card {
  /* Ohne min-width:0 behalten die Karten als Grid-Kinder ihre Inhaltsbreite und
     ragen auf 375 px ueber den Rand — live gemessen 366 statt 343 px (29.07.). */
  min-width: 0;
  max-width: 100%;
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  padding: var(--sv-card-pad);
  transition: transform 0.12s, box-shadow 0.12s;
}
button.sv-konfig-card:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--sv-sh2);
}

/* Aktiv-Zustand als Innenrand statt Rahmenwechsel: 2 px Rahmen wuerden das
   Raster um einen Pixel verschieben, sobald der Kunde etwas anklickt. */
.sv-konfig-card[aria-pressed="true"],
.sv-konfig-card[data-aktiv="true"] {
  background: var(--sv-surface);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--sv-headline);
}

.sv-konfig-btn { transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
.sv-konfig-btn:hover {
  background: var(--sv-cta-hover) !important;
  box-shadow: 0 3px 10px rgba(204, 51, 51, 0.3);
}

.sv-btn2 { transition: transform 0.12s, box-shadow 0.12s; }
.sv-btn2:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(29, 29, 31, 0.10);
}

.sv-konfig-step:hover { background: var(--sv-surface); }

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sv-headline);
  outline-offset: 2px;
  border-radius: var(--sv-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .sv-konfig-card, .sv-konfig-btn, .sv-btn2,
  .sv-konfig-kopf__tel, .sv-konfig-kopf__warenkorb { transition: none; }
  button.sv-konfig-card:hover:not(:disabled),
  .sv-btn2:hover:not(:disabled) { transform: none; }
}

/* ------------------------------------------------------------------- Druck
   UNVERAENDERT. Die Druckansicht traegt den Zuschnittplan in die Werkstatt. */
.print-sheet { display: none; }

@media print {
  body * { visibility: hidden; }
  .print-sheet, .print-sheet * { visibility: visible; }
  .print-sheet {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--sv-bg);
  }
  .sv-konfig-seite { height: auto; overflow: visible; }
}

/* ------------------------------------------------------------ Infoblock (SEO)
   08.09.2026: Serverseitiger Text UNTER dem 100dvh-Rahmen (.sv-konfig-seite bleibt
   unveraendert). Erst beim Scrollen sichtbar; Google liest ihn ohne JavaScript. */
.sv-konfig-info {
  background: var(--sv-bg);
  border-top: 1px solid var(--sv-line);
  padding: var(--sv-sp5) var(--sv-sp3);
  color: var(--sv-ink);
}
.sv-konfig-info__wrap { max-width: 860px; margin: 0 auto; }
.sv-konfig-info h2 { font-size: var(--sv-t2); color: var(--sv-headline); margin: 0 0 var(--sv-sp3); }
.sv-konfig-info h3 { font-size: var(--sv-t3); color: var(--sv-headline); margin: var(--sv-sp5) 0 var(--sv-sp2); }
.sv-konfig-info p, .sv-konfig-info li { font-size: var(--sv-t4); line-height: 1.6; }
.sv-konfig-info p { margin: 0 0 var(--sv-sp3); }
.sv-konfig-info a { color: var(--sv-primary); text-decoration: underline; text-underline-offset: 2px; }
.sv-konfig-info a:hover { color: var(--sv-primary-dark); }
.sv-konfig-info__schritte, .sv-konfig-info__liste { margin: 0; padding-left: 22px; }
.sv-konfig-info__schritte li, .sv-konfig-info__liste li { margin: 0 0 var(--sv-sp2); }
.sv-konfig-info__qa { border: 1px solid var(--sv-line); border-radius: 10px; background: var(--sv-surface); padding: var(--sv-sp2) var(--sv-sp3); margin: 0 0 var(--sv-sp2); }
.sv-konfig-info__qa summary { cursor: pointer; font-weight: 600; font-size: var(--sv-t4); color: var(--sv-headline); }
.sv-konfig-info__qa p { margin: var(--sv-sp2) 0 0; }