@charset "UTF-8";
/* ==========================================================================
   Floor Select - Design-System
   Einzige Quelle für Farben, Typografie, Abstände und Komponenten.
   Umsetzung von doku/DESIGN-MANIFEST.md und doku/SEITENPLAN.md Abschnitt 5.

   Inhalt
   01  Tokens
   02  Reset und Basistypografie
   03  Layout
   04  Typo-Klassen
   05  Komponenten
   06  Buttons
   07  Formularfelder
   08  WooCommerce
   09  Musterbox
   10  Header und Footer
   11  Zustände
   12  Media Queries
   13  Reduced Motion

   Regeln, die im ganzen File gelten:
   - Genau ein Radius: 3px.
   - Gold ist nie Textfarbe auf hellem Grund. Gold trägt als Fläche, Linie
     oder Signet, oder als Text auf Navy. Gold-Flächen tragen Navy-Text.
   - Animiert werden ausschließlich transform und opacity, 180 bis 260ms.
   ========================================================================== */


/* ==========================================================================
   01  Tokens
   ========================================================================== */

:root {

  /* --- Farben, Mini Brand Guide, unverändert ---------------------------- */
  --fs-anthrazit:      #1A1A1A;   /* Fließtext */
  --fs-navy:           #0D1B2A;   /* Überschriften, Primärflächen */
  --fs-navy-soft:      #233549;   /* Hover Navy, sekundäre Flächen */
  --fs-gold:           #C59D5F;   /* Muster-CTA, Signet, Linien */
  --fs-gold-dark:      #A07C3F;   /* Gold-Hover, Gold-Rahmen auf hell */
  --fs-sand:           #E7E4DF;   /* Sektionswechsel, Kartengrund */
  --fs-wollweiss:      #F7F6F3;   /* Seiten-Hintergrund */
  --fs-weiss:          #FFFFFF;   /* Karten auf Wollweiß */
  --fs-muted:          #55606E;   /* Sekundärtext, Labels, Meta */
  --fs-linie:          #DDD8D1;   /* Rahmen, Trennlinien */
  --fs-erfolg:         #2F6B4F;   /* Verfügbarkeit, Bestätigung */
  --fs-warnung:        #9A3B24;   /* Fehler, Limit erreicht */

  /* Abgeleitete Flächen, ausschließlich aus den Tokens gemischt */
  --fs-gold-schleier:  rgba(197, 157, 95, .12);
  --fs-gold-kante:     rgba(197, 157, 95, .38);
  --fs-navy-schleier:  rgba(13, 27, 42, .06);
  --fs-erfolg-flaeche: rgba(47, 107, 79, .10);
  --fs-warnung-flaeche: rgba(154, 59, 36, .10);
  --fs-hell-86:        rgba(255, 255, 255, .86);  /* Text auf Navy, 12.6:1 */
  --fs-hell-66:        rgba(255, 255, 255, .66);  /* Meta auf Navy,  8.1:1 */
  --fs-hell-16:        rgba(255, 255, 255, .16);  /* Kante auf Navy */

  /* --- Kontextfarben, werden von .fs-sektion umgesetzt ------------------- */
  --fs-flaeche:        var(--fs-wollweiss);
  --fs-text:           var(--fs-anthrazit);
  --fs-titel:          var(--fs-navy);
  --fs-sekundaer:      var(--fs-muted);
  --fs-kante:          var(--fs-linie);
  --fs-fokus:          var(--fs-navy);

  /* --- Spacing, Tivaos-Skala, keine Zwischenwerte ------------------------ */
  --fs-s0:     0;
  --fs-s5:     5px;
  --fs-s10:   10px;
  --fs-s15:   15px;
  --fs-s20:   20px;
  --fs-s25:   25px;
  --fs-s30:   30px;
  --fs-s40:   40px;
  --fs-s50:   50px;
  --fs-s60:   60px;
  --fs-s75:   75px;
  --fs-s100: 100px;
  --fs-s120: 120px;
  --fs-s150: 150px;

  /* Sektions-Padding, wird in den Media Queries umgesetzt */
  --fs-sektion-y:       var(--fs-s100);
  --fs-sektion-y-hero:  var(--fs-s60);
  --fs-sektion-y-eng:   var(--fs-s50);
  --fs-rand:            var(--fs-s25);   /* Seitenrand, nie unter 16px */
  --fs-karte-padding:   var(--fs-s25);
  --fs-raster-gap:      var(--fs-s30);

  /* --- Form ------------------------------------------------------------- */
  --fs-radius: 3px;                      /* der einzige Radius im Projekt */
  --fs-linie-staerke: 1px;
  --fs-container: 1240px;
  --fs-container-schmal: 820px;          /* Fließtextspalte, max. 68 Zeichen */

  /* --- Schatten --------------------------------------------------------- */
  --fs-schatten-karte: 0 6px 24px rgba(13, 27, 42, .10);
  --fs-schatten-hoch:  0 10px 34px rgba(13, 27, 42, .14);
  --fs-schatten-header-aktiv: 0 6px 24px rgba(13, 27, 42, .18);

  /* --- Motion ----------------------------------------------------------- */
  --fs-ease:        cubic-bezier(.2, .7, .3, 1);
  --fs-dauer-kurz:  180ms;
  --fs-dauer:       200ms;
  --fs-dauer-lang:  260ms;

  /* --- Schrift ---------------------------------------------------------- */
  --fs-font-ui: "Montserrat", "Segoe UI", system-ui, -apple-system,
                "Helvetica Neue", Arial, sans-serif;
  --fs-font-erzaehl: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino,
                Georgia, "Times New Roman", serif;

  /* Größen, mobil bis Desktop nach Manifest Abschnitt 3 */
  --fs-h1:      clamp(2.125rem, 1.55rem + 2.40vw, 3.25rem);    /* 34 - 52 */
  --fs-h2:      clamp(1.6875rem, 1.36rem + 1.36vw, 2.25rem);   /* 27 - 36 */
  --fs-h3:      clamp(1.25rem, 1.13rem + 0.50vw, 1.5rem);      /* 20 - 24 */
  --fs-h4:      clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);    /* 18 - 20 */
  --fs-text-gr: clamp(1rem, 0.95rem + 0.16vw, 1.0625rem);      /* 16 - 17 */
  --fs-erzaehl-gr: clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem); /* 17 - 19 */
  --fs-preis-gr: clamp(1.5rem, 1.39rem + 0.45vw, 1.75rem);     /* 24 - 28 */
  --fs-label-gr: 0.8125rem;                                    /* 13 */
  --fs-btn-gr:   0.9375rem;                                    /* 15 */
  --fs-klein-gr: 0.875rem;                                     /* 14 */

  --fs-lh-h1: 1.15;
  --fs-lh-h2: 1.2;
  --fs-lh-h3: 1.3;
  --fs-lh-text: 1.65;
  --fs-lh-erzaehl: 1.7;
  --fs-lh-eng: 1.4;                       /* Untergrenze im ganzen Projekt */

  --fs-mass: 68ch;                        /* maximale Zeilenlänge */
  --fs-mass-erzaehl: 62ch;

  /* --- Bedienelemente --------------------------------------------------- */
  --fs-btn-hoehe: 52px;
  --fs-touch: 44px;                       /* Mindest-Touchziel */

  /* --- Jahresring-Signet, reines Data-URI, keine externe Datei ----------- */

  /* Volles Ringmotiv, Wasserzeichen und Flächen-Dekor */
  --fs-signet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23C59D5F' stroke-width='1.5'%3E%3Cellipse cx='120' cy='120' rx='9' ry='8'/%3E%3Cellipse cx='119' cy='120' rx='22' ry='20'/%3E%3Cellipse cx='121' cy='121' rx='37' ry='34'/%3E%3Cellipse cx='120' cy='119' rx='53' ry='49'/%3E%3Cellipse cx='119' cy='120' rx='70' ry='65'/%3E%3Cellipse cx='121' cy='121' rx='88' ry='82'/%3E%3Cellipse cx='120' cy='120' rx='107' ry='100'/%3E%3C/g%3E%3C/svg%3E");

  /* Drei Ringe, Schritt-Nummern und Trennlinien-Mitte */
  --fs-signet-klein: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C59D5F' stroke-width='1.5'%3E%3Cellipse cx='36' cy='36' rx='34' ry='34'/%3E%3Cellipse cx='35.4' cy='36.4' rx='27' ry='26.4'/%3E%3Cellipse cx='36.4' cy='35.6' rx='20' ry='19.4'/%3E%3C/g%3E%3C/svg%3E");

  /* Zwei Ringe, kompakte Marke in Trennlinie und Leerzustand */
  --fs-signet-punkt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23C59D5F' stroke-width='1.5'%3E%3Ccircle cx='14' cy='14' r='13'/%3E%3Ccircle cx='14' cy='14' r='7'/%3E%3Ccircle cx='14' cy='14' r='1.6'/%3E%3C/g%3E%3C/svg%3E");

  /* Haken und Schloss für Musterkarten, Strichstärke 1.5, kein Emoji */
  --fs-icon-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  --fs-icon-schloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='1'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --fs-icon-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02  Reset-Ergänzungen und Basistypografie
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--fs-wollweiss);
  color: var(--fs-anthrazit);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-text-gr);
  font-weight: 400;
  line-height: var(--fs-lh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--fs-s20);
  font-family: var(--fs-font-ui);
  color: var(--fs-titel);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--fs-lh-h1);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--fs-lh-h2);
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--fs-lh-h3);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
}

p {
  margin: 0 0 var(--fs-s20);
  max-width: var(--fs-mass);
}

p:last-child,
ul:last-child,
ol:last-child { margin-bottom: 0; }

strong,
b { font-weight: 700; color: var(--fs-titel); }

small { font-size: var(--fs-klein-gr); }

a {
  color: var(--fs-titel);
  text-decoration: none;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

/* Textlink: Navy mit Gold-Unterstrich, der beim Hover von links wächst */
.fs-sektion :where(p, li, .fs-erzaehl, .fs-lead) a,
a.fs-link {
  position: relative;
  color: var(--fs-titel);
  font-weight: 600;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--fs-gold), var(--fs-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

.fs-sektion :where(p, li, .fs-erzaehl, .fs-lead) a:hover,
a.fs-link:hover { color: var(--fs-navy-soft); }

.fs-sektion--navy :where(p, li, .fs-erzaehl, .fs-lead) a:hover,
.fs-sektion--navy a.fs-link:hover { color: var(--fs-gold); }

ul, ol {
  margin: 0 0 var(--fs-s20);
  padding-left: var(--fs-s20);
  max-width: var(--fs-mass);
}

li { margin-bottom: var(--fs-s10); }
li:last-child { margin-bottom: 0; }

/* Liste mit Jahresring-Marke statt Punkt */
ul.fs-liste {
  list-style: none;
  padding-left: 0;
}

ul.fs-liste > li {
  position: relative;
  padding-left: var(--fs-s30);
}

ul.fs-liste > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--fs-lh-text) * 0.5em - 5px);
  width: 10px;
  height: 10px;
  background-image: var(--fs-signet-punkt);
  background-size: contain;
  background-repeat: no-repeat;
}

hr {
  border: 0;
  height: 1px;
  margin: var(--fs-s40) 0;
  background-color: var(--fs-kante);
}

blockquote {
  margin: var(--fs-s30) 0;
  padding: var(--fs-s5) 0 var(--fs-s5) var(--fs-s25);
  border-left: 2px solid var(--fs-gold);
  font-family: var(--fs-font-erzaehl);
  font-size: var(--fs-erzaehl-gr);
  line-height: var(--fs-lh-erzaehl);
  color: var(--fs-text);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-klein-gr);
}

th, td {
  padding: var(--fs-s10) var(--fs-s15);
  border-bottom: 1px solid var(--fs-kante);
  text-align: left;
  vertical-align: top;
  line-height: var(--fs-lh-eng);
}

th {
  font-weight: 600;
  color: var(--fs-titel);
}

::selection {
  background-color: var(--fs-gold);
  color: var(--fs-navy);
}

/* Fokus: Navy-Ring auf hellem Grund (16:1), Gold auf Navy (6,9:1).
   Nie nur Gold auf Wollweiß, das reicht als Indikator nicht. */
:focus-visible {
  outline: 2px solid var(--fs-fokus);
  outline-offset: 2px;
  border-radius: var(--fs-radius);
}

.fs-sektion--navy :focus-visible,
.fs-header :focus-visible,
.fs-footer :focus-visible,
.fs-mobilnav :focus-visible { --fs-fokus: var(--fs-gold); }

/* Sprungmarke für Tastaturbedienung */
.fs-skip {
  position: absolute;
  left: var(--fs-s15);
  top: -100px;
  z-index: 200;
  padding: var(--fs-s10) var(--fs-s20);
  background-color: var(--fs-gold);
  color: var(--fs-navy);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  border-radius: var(--fs-radius);
}

.fs-skip:focus { top: var(--fs-s15); }

.fs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   03  Layout
   ========================================================================== */

/* Kontextfarben werden hier gesetzt, alle Komponenten lesen sie aus.
   Die .elementor-element-Variante hebt die Spezifität über Elementors
   Per-Element-CSS (.elementor-element-abc123), ohne !important. */
.fs-sektion,
.elementor-element.fs-sektion {
  --fs-flaeche: var(--fs-wollweiss);
  --fs-text: var(--fs-anthrazit);
  --fs-titel: var(--fs-navy);
  --fs-sekundaer: var(--fs-muted);
  --fs-kante: var(--fs-linie);
  --fs-fokus: var(--fs-navy);

  position: relative;
  padding: var(--fs-sektion-y) var(--fs-rand);
  background-color: var(--fs-flaeche);
  color: var(--fs-text);
}

.fs-sektion--sand,
.elementor-element.fs-sektion--sand {
  --fs-flaeche: var(--fs-sand);
  --fs-kante: var(--fs-gold-kante);
}

.fs-sektion--navy,
.elementor-element.fs-sektion--navy {
  --fs-flaeche: var(--fs-navy);
  --fs-text: var(--fs-hell-86);
  --fs-titel: var(--fs-weiss);
  --fs-sekundaer: var(--fs-hell-66);
  --fs-kante: var(--fs-hell-16);
  --fs-fokus: var(--fs-gold);
}

.fs-sektion--kompakt,
.elementor-element.fs-sektion--kompakt { padding-block: var(--fs-sektion-y-eng); }

.fs-sektion--hero,
.elementor-element.fs-sektion--hero { padding-block: var(--fs-sektion-y-hero); }

/* Überschriften und Fließtext im Farbkontext, auch als Elementor-Widget */
.fs-sektion :where(h1, h2, h3, h4, h5, h6),
.fs-sektion .elementor-widget-heading .elementor-heading-title { color: var(--fs-titel); }

.fs-sektion :where(p, li, td, .fs-erzaehl),
.fs-sektion .elementor-widget-text-editor { color: var(--fs-text); }

.fs-container {
  width: 100%;
  max-width: var(--fs-container);
  margin-inline: auto;
}

.fs-container--schmal { max-width: var(--fs-container-schmal); }

/* Raster. Abstände ausschließlich über gap, nie über Child-Padding. */
.fs-raster-2,
.fs-raster-3,
.fs-raster-4 {
  display: grid;
  gap: var(--fs-raster-gap);
  align-items: start;
}

.fs-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Nutzflächen, die auf jeder Seite gebraucht werden.
   Layout-Klassen heben die Zeilenlängen-Begrenzung auf, sonst erben sie als
   p, ul oder ol die 68 Zeichen aus der Basistypografie. */
.fs-stapel,
.fs-reihe,
.fs-raster-2,
.fs-raster-3,
.fs-raster-4,
.fs-chip-liste,
.fs-musterbox__raster,
.fs-musterbox__auswahl,
.fs-produkt__miniaturen,
.woocommerce ul.products,
.fs-dekor-raster {
  max-width: none;
}

.fs-stapel { display: flex; flex-direction: column; gap: var(--fs-s20); }
.fs-stapel--eng { gap: var(--fs-s10); }
.fs-stapel--weit { gap: var(--fs-s40); }

.fs-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s15);
}

.fs-abstand-oben { margin-top: var(--fs-s40); }
.fs-mitte { text-align: center; }
.fs-mitte p,
.fs-mitte .fs-erzaehl,
.fs-mitte .fs-lead { margin-inline: auto; }


/* ==========================================================================
   04  Typo-Klassen
   ========================================================================== */

.fs-label {
  display: block;
  margin: 0 0 var(--fs-s10);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-label-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-sekundaer);
}

.fs-erzaehl {
  font-family: var(--fs-font-erzaehl);
  font-size: var(--fs-erzaehl-gr);
  font-weight: 400;
  line-height: var(--fs-lh-erzaehl);
  color: var(--fs-text);
  max-width: var(--fs-mass-erzaehl);
}

.fs-lead {
  font-family: var(--fs-font-ui);
  font-size: var(--fs-erzaehl-gr);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fs-sekundaer);
  max-width: var(--fs-mass);
}

.fs-preis {
  display: inline-block;
  font-family: var(--fs-font-ui);
  font-size: var(--fs-preis-gr);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fs-titel);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.fs-preis__einheit {
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-sekundaer);
  letter-spacing: 0;
}

.fs-preis-alt {
  display: inline-block;
  margin-left: var(--fs-s10);
  font-size: var(--fs-klein-gr);
  font-weight: 400;
  color: var(--fs-sekundaer);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

.fs-meta {
  font-size: var(--fs-klein-gr);
  line-height: var(--fs-lh-eng);
  color: var(--fs-sekundaer);
}


/* ==========================================================================
   05  Komponenten
   ========================================================================== */

/* --- Karte -------------------------------------------------------------- */
.fs-karte {
  --fs-flaeche: var(--fs-weiss);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background-color: var(--fs-flaeche);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  padding: var(--fs-karte-padding);
  color: var(--fs-anthrazit);
  transition: transform var(--fs-dauer) var(--fs-ease);
}

/* Der Hover-Schatten liegt auf einer eigenen Ebene und wird über opacity
   eingeblendet. So bleibt es bei den erlaubten Eigenschaften transform und
   opacity, box-shadow selbst wird nie animiert. */
.fs-karte::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: var(--fs-radius);
  box-shadow: var(--fs-schatten-karte);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-karte--sand { --fs-flaeche: var(--fs-sand); border-color: var(--fs-gold-kante); }

/* Karte in Navy-Sektion behält Lesbarkeit */
.fs-sektion--navy .fs-karte {
  --fs-flaeche: var(--fs-navy-soft);
  border-color: var(--fs-hell-16);
  color: var(--fs-hell-86);
}

.fs-sektion--navy .fs-karte :where(h2, h3, h4) { color: var(--fs-weiss); }

/* Kein Schatten in Ruhe, Schatten erst beim Hover */
.fs-karte:hover::before,
.fs-karte:focus-within::before { opacity: 1; }

/* Die Karte bewegt sich, das Produktbild bleibt ruhig. Hover gilt nur für
   präzise Zeigegeräte, Tastaturfokus hebt die gesamte Karte ebenfalls an. */
@media (hover: hover) and (pointer: fine) {
  .fs-karte:hover { transform: translateY(-3px); }
}

.fs-karte:focus-visible,
.fs-karte:has(:focus-visible) { transform: translateY(-3px); }

/* Randlose Karte: der Radius sitzt am ersten Kind, die Karte selbst braucht
   kein overflow, sonst würde sie die Schattenebene abschneiden. */
.fs-karte--flach { padding: 0; }

.fs-karte--flach > :first-child {
  border-top-left-radius: var(--fs-radius);
  border-top-right-radius: var(--fs-radius);
  overflow: hidden;
}

.fs-karte--flach > :last-child {
  border-bottom-left-radius: var(--fs-radius);
  border-bottom-right-radius: var(--fs-radius);
}

.fs-karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s10);
  padding: var(--fs-karte-padding);
}

.fs-karte__bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--fs-sand);
}

.fs-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ganze Karte klickbar, ohne verschachtelte Links */
.fs-karte__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fs-karte__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s10);
  margin-top: auto;
  padding-top: var(--fs-s15);
  position: relative;
  z-index: 2;
}

.fs-karte__aktionen > * { flex: 1 1 140px; }

/* --- Chip --------------------------------------------------------------- */
.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s5);
  min-height: 26px;
  padding: 4px 10px;
  border: var(--fs-linie-staerke) solid var(--fs-kante);
  border-radius: var(--fs-radius);
  background-color: transparent;
  font-family: var(--fs-font-ui);
  font-size: var(--fs-label-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-sekundaer);
  white-space: nowrap;
}

.fs-chip--gold {
  background-color: var(--fs-gold);
  border-color: var(--fs-gold);
  color: var(--fs-navy);            /* Gold trägt immer Navy-Text */
}

.fs-chip--navy {
  background-color: var(--fs-navy);
  border-color: var(--fs-navy);
  color: var(--fs-weiss);
}

.fs-chip--erfolg {
  border-color: var(--fs-erfolg);
  background-color: var(--fs-erfolg-flaeche);
  color: var(--fs-erfolg);
}

.fs-chip-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.fs-chip-liste li { margin: 0; }

/* --- Jahresring-Signet -------------------------------------------------- */
/* Dekorativ, sitzt hinter dem Inhalt und fängt keine Klicks ab. */
.fs-signet { position: relative; }

.fs-signet > * { position: relative; z-index: 1; }

.fs-signet::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -80px;
  width: 460px;
  height: 460px;
  transform: translateY(-50%);
  background-image: var(--fs-signet);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .06;
  pointer-events: none;
}

.fs-signet--links::before { right: auto; left: -80px; }
.fs-signet--oben::before { top: -120px; transform: none; }
.fs-signet--klein::before { width: 260px; height: 260px; }

/* Auf Navy darf das Signet etwas kräftiger stehen */
.fs-sektion--navy.fs-signet::before,
.fs-sektion--navy .fs-signet::before { opacity: .14; }

/* --- Schritt (Nummer im Goldring) --------------------------------------- */
.fs-schritt {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s15);
}

.fs-schritt__nummer {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  font-family: var(--fs-font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fs-titel);
  font-variant-numeric: tabular-nums;
}

.fs-schritt__nummer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fs-signet-klein);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fs-schritt__titel {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--fs-lh-h3);
  color: var(--fs-titel);
}

.fs-schritt__text {
  margin: 0;
  color: var(--fs-text);
  max-width: 42ch;
}

/* --- Trennlinie mit Ring in der Mitte ----------------------------------- */
.fs-trennlinie {
  position: relative;
  display: block;
  height: 28px;
  margin: var(--fs-s50) 0;
  border: 0;
  /* hr bringt aus der Basistypografie eine Flächenfarbe mit, die hier die
     ganze Höhe füllen würde. Sie wird ausdrücklich zurückgenommen. */
  background-color: transparent;
  background-image: linear-gradient(var(--fs-gold-kante), var(--fs-gold-kante));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 50%;
}

.fs-trennlinie::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background-color: var(--fs-flaeche);
  background-image: var(--fs-signet-punkt);
  background-size: 28px 28px;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Materialstreifen (Signature-Detail unter dem Raumbild) -------------- */
.fs-materialstreifen {
  position: relative;
  display: block;
  width: 100%;
  height: 34px;
  overflow: hidden;
  background-color: var(--fs-sand);
  border-top: 1px solid var(--fs-gold-kante);
}

.fs-materialstreifen img,
.fs-materialstreifen__bild {
  display: block;
  width: 100%;
  height: 34px;
  object-fit: cover;
  object-position: center;
}

/* Variante ohne <img>, Detailfoto kommt als Inline-Custom-Property:
   style="--fs-detailbild:url(...)" */
.fs-materialstreifen--bg {
  background-image: var(--fs-detailbild, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Trust-Leiste ------------------------------------------------------- */
.fs-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-s25);
  padding: var(--fs-s25) 0;
  border-top: 1px solid var(--fs-kante);
  border-bottom: 1px solid var(--fs-kante);
  list-style: none;
  margin: 0;
  max-width: none;
}

.fs-trust li {
  display: flex;
  align-items: center;
  gap: var(--fs-s10);
  margin: 0;
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  color: var(--fs-titel);
}

.fs-trust li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-image: var(--fs-signet-punkt);
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- Akkordeon (FAQ) ---------------------------------------------------- */
.fs-akkordeon {
  border-top: 1px solid var(--fs-kante);
  max-width: var(--fs-container-schmal);
}

.fs-akkordeon__eintrag { border-bottom: 1px solid var(--fs-kante); }

.fs-akkordeon__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-s15);
  width: 100%;
  min-height: var(--fs-touch);
  padding: var(--fs-s20) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--fs-font-ui);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  text-align: left;
  color: var(--fs-titel);
}

.fs-akkordeon__frage::-webkit-details-marker { display: none; }

.fs-akkordeon__frage::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-image: var(--fs-icon-pfeil);
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.fs-akkordeon__eintrag[open] > .fs-akkordeon__frage::after { transform: rotate(180deg); }

.fs-akkordeon__antwort { padding: 0 0 var(--fs-s25); }
.fs-akkordeon__antwort p { max-width: var(--fs-mass); }

/* --- Sprungnavigation auf langen Inhaltsseiten -------------------------- */
.fs-sprungnav {
  width: 100%;
  max-width: var(--fs-container-schmal);
  margin-top: var(--fs-s25);
}

.fs-sprungnav nav {
  padding-block: var(--fs-s15);
  border-top: 1px solid var(--fs-kante);
  border-bottom: 1px solid var(--fs-kante);
}

.fs-sprungnav .fs-label { margin-bottom: var(--fs-s5); }

.fs-sprungnav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s5) var(--fs-s20);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-sprungnav__liste li { margin: 0; }

.fs-sprungnav__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
}

/* Die aktuelle Kopfzeile ist auf Desktop 129px und mobil 127px hoch. Der
   Abstand hält die Zielüberschrift vollständig unter der Sticky-Leiste. */
.fs-sprungziel {
  scroll-margin-top: calc(129px + var(--fs-s25));
}

@media (max-width: 1023px) {
  .fs-sprungziel {
    scroll-margin-top: calc(127px + var(--fs-s25));
  }
}

@media (max-width: 767px) {
  .fs-sprungnav__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fs-s15);
  }
}


/* ==========================================================================
   06  Buttons

   Elementor rendert Buttons als a.elementor-button innerhalb des Widgets.
   Eine über _css_classes gesetzte Klasse landet auf dem Widget-Wrapper,
   nicht auf dem Link. Deshalb greift jede Regel dreifach:
     .fs-btn-x .elementor-button        Klasse auf dem Widget
     a.fs-btn-x                         Klasse direkt am Link
     .elementor-element.fs-btn-x ...    hebt die Spezifität über Elementors
                                        Per-Element-CSS, spart !important
   ========================================================================== */

.fs-btn,
.fs-btn-primaer,
.fs-btn-muster,
.fs-btn-sekundaer,
a.fs-btn-primaer,
a.fs-btn-muster,
a.fs-btn-sekundaer,
.fs-btn-primaer .elementor-button,
.fs-btn-muster .elementor-button,
.fs-btn-sekundaer .elementor-button,
.elementor-element.fs-btn-primaer .elementor-button,
.elementor-element.fs-btn-muster .elementor-button,
.elementor-element.fs-btn-sekundaer .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-s10);
  min-height: var(--fs-btn-hoehe);
  padding: 0 var(--fs-s25);
  border: var(--fs-linie-staerke) solid transparent;
  border-radius: var(--fs-radius);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  background-image: none;
  transition: transform var(--fs-dauer) var(--fs-ease),
              opacity var(--fs-dauer) var(--fs-ease);
}

/* Elementor legt eine eigene Wrapper-Box um den Button */
.fs-btn-primaer .elementor-button-wrapper,
.fs-btn-muster .elementor-button-wrapper,
.fs-btn-sekundaer .elementor-button-wrapper { line-height: 0; }

.fs-btn-primaer .elementor-button-content-wrapper,
.fs-btn-muster .elementor-button-content-wrapper,
.fs-btn-sekundaer .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s10);
}

/* --- Primär: Navy-Fläche, weißer Text -------------------------------- */
.fs-btn-primaer,
a.fs-btn-primaer,
.fs-btn-primaer .elementor-button,
.elementor-element.fs-btn-primaer .elementor-button {
  position: relative;
  background-color: var(--fs-navy);
  border-color: var(--fs-navy);
  color: var(--fs-weiss);
}

/* Gold-Unterkante beim Hover, ohne Layoutsprung */
.fs-btn-primaer::after,
a.fs-btn-primaer::after,
.fs-btn-primaer .elementor-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--fs-gold);
  opacity: 0;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-btn-primaer:hover,
a.fs-btn-primaer:hover,
.fs-btn-primaer .elementor-button:hover,
.elementor-element.fs-btn-primaer .elementor-button:hover {
  background-color: var(--fs-navy-soft);
  border-color: var(--fs-navy-soft);
  color: var(--fs-weiss);
}

.fs-btn-primaer:hover::after,
a.fs-btn-primaer:hover::after,
.fs-btn-primaer .elementor-button:hover::after { opacity: 1; }

.fs-btn-primaer:focus-visible,
a.fs-btn-primaer:focus-visible,
.fs-btn-primaer .elementor-button:focus-visible {
  outline: 2px solid var(--fs-gold);
  outline-offset: 2px;
}

.fs-btn-primaer:active,
a.fs-btn-primaer:active,
.fs-btn-primaer .elementor-button:active { transform: translateY(1px); }

/* --- Muster-CTA: Gold-Fläche, Navy-Text. Nur Musterbestellung. --------- */
.fs-btn-muster,
a.fs-btn-muster,
.fs-btn-muster .elementor-button,
.elementor-element.fs-btn-muster .elementor-button {
  background-color: var(--fs-gold);
  border-color: var(--fs-gold);
  color: var(--fs-navy);           /* nie weiß, Weiß auf Gold ist 2,51 */
}

.fs-btn-muster:hover,
a.fs-btn-muster:hover,
.fs-btn-muster .elementor-button:hover,
.elementor-element.fs-btn-muster .elementor-button:hover {
  background-color: var(--fs-gold-dark);
  border-color: var(--fs-gold-dark);
  color: var(--fs-navy);
}

.fs-btn-muster:focus-visible,
a.fs-btn-muster:focus-visible,
.fs-btn-muster .elementor-button:focus-visible {
  outline: 2px solid var(--fs-navy);
  outline-offset: 2px;
}

.fs-btn-muster:active,
a.fs-btn-muster:active,
.fs-btn-muster .elementor-button:active { transform: translateY(1px); }

/* --- Sekundär: 1px Navy-Rahmen, transparent ---------------------------- */
.fs-btn-sekundaer,
a.fs-btn-sekundaer,
.fs-btn-sekundaer .elementor-button,
.elementor-element.fs-btn-sekundaer .elementor-button {
  background-color: transparent;
  border-color: var(--fs-navy);
  color: var(--fs-navy);
}

.fs-btn-sekundaer:hover,
a.fs-btn-sekundaer:hover,
.fs-btn-sekundaer .elementor-button:hover,
.elementor-element.fs-btn-sekundaer .elementor-button:hover {
  background-color: var(--fs-navy);
  border-color: var(--fs-navy);
  color: var(--fs-weiss);
}

.fs-btn-sekundaer:focus-visible,
a.fs-btn-sekundaer:focus-visible,
.fs-btn-sekundaer .elementor-button:focus-visible {
  outline: 2px solid var(--fs-navy);
  outline-offset: 2px;
}

.fs-btn-sekundaer:active,
a.fs-btn-sekundaer:active,
.fs-btn-sekundaer .elementor-button:active { transform: translateY(1px); }

/* Sekundär auf Navy-Grund: heller Rahmen statt unsichtbarem Navy */
.fs-sektion--navy .fs-btn-sekundaer,
.fs-sektion--navy a.fs-btn-sekundaer,
.fs-sektion--navy .fs-btn-sekundaer .elementor-button {
  border-color: var(--fs-hell-66);
  color: var(--fs-weiss);
}

.fs-sektion--navy .fs-btn-sekundaer:hover,
.fs-sektion--navy a.fs-btn-sekundaer:hover,
.fs-sektion--navy .fs-btn-sekundaer .elementor-button:hover {
  background-color: var(--fs-weiss);
  border-color: var(--fs-weiss);
  color: var(--fs-navy);
}

/* --- Gemeinsame Zustände ----------------------------------------------- */
.fs-btn-primaer[disabled],
.fs-btn-muster[disabled],
.fs-btn-sekundaer[disabled],
.fs-btn-primaer[aria-disabled="true"],
.fs-btn-muster[aria-disabled="true"],
.fs-btn-sekundaer[aria-disabled="true"],
.fs-btn-primaer.is-gesperrt,
.fs-btn-muster.is-gesperrt,
.fs-btn-sekundaer.is-gesperrt,
.fs-btn-primaer .elementor-button[disabled],
.fs-btn-muster .elementor-button[disabled],
.fs-btn-sekundaer .elementor-button[disabled] {
  background-color: var(--fs-sand);
  border-color: var(--fs-linie);
  color: var(--fs-muted);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
  transform: none;
}

.fs-btn-primaer[disabled]::after,
.fs-btn-muster[disabled]::after { display: none; }

/* Volle Breite, mobil Standard für die Muster-CTA */
.fs-btn-breit,
.fs-btn-breit .elementor-button { width: 100%; }

/* Button mit Zähler, zum Beispiel "Muster gratis (2 von 3)" */
.fs-btn__zaehler {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}


/* ==========================================================================
   07  Formularfelder
   ========================================================================== */

.fs-feld,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--fs-s10) var(--fs-s15);
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  font-family: var(--fs-font-ui);
  font-size: 1rem;                 /* 16px, verhindert iOS-Zoom */
  line-height: var(--fs-lh-eng);
  color: var(--fs-anthrazit);
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

textarea { min-height: 140px; resize: vertical; }

select {
  appearance: none;
  padding-right: var(--fs-s40);
  background-image: var(--fs-icon-pfeil);
  background-repeat: no-repeat;
  background-position: right var(--fs-s15) center;
  background-size: 20px 20px;
}

input::placeholder,
textarea::placeholder { color: var(--fs-muted); opacity: 1; }

.fs-feld:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fs-navy);
  outline-offset: 1px;
  border-color: var(--fs-navy);
}

.fs-feld[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  background-color: var(--fs-sand);
  color: var(--fs-muted);
  cursor: not-allowed;
}

.fs-feld-gruppe { display: flex; flex-direction: column; gap: var(--fs-s5); }

.fs-feld-label {
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-titel);
}

.fs-feld-hinweis {
  font-size: var(--fs-klein-gr);
  line-height: var(--fs-lh-eng);
  color: var(--fs-sekundaer);
}

/* Segmented Control, Basis für den Varianten-Umschalter */
.fs-segment {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background-color: var(--fs-sand);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-segment__option {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}

.fs-segment__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  cursor: pointer;
}

.fs-segment__text {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--fs-s5);
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s20);
  border-radius: var(--fs-radius);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  color: var(--fs-muted);
  white-space: nowrap;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-segment__option input:checked ~ .fs-segment__text {
  background-color: var(--fs-navy);
  color: var(--fs-weiss);
}

.fs-segment__option input:focus-visible ~ .fs-segment__text {
  outline: 2px solid var(--fs-navy);
  outline-offset: 2px;
}

.fs-segment__option input[disabled] ~ .fs-segment__text {
  color: var(--fs-linie);
  cursor: not-allowed;
}

.fs-segment__preis {
  font-size: var(--fs-label-gr);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}


/* ==========================================================================
   08  WooCommerce
   ========================================================================== */

.woocommerce,
.woocommerce-page {
  color: var(--fs-anthrazit);
  font-family: var(--fs-font-ui);
}

.woocommerce .woocommerce-breadcrumb {
  margin: 0 0 var(--fs-s25);
  font-size: var(--fs-klein-gr);
  color: var(--fs-muted);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--fs-navy); font-weight: 600; }

/* --- Produktraster ------------------------------------------------------ */
.fs-shop__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fs-s20);
  margin-bottom: var(--fs-s30);
}

.woocommerce ul.products,
.fs-dekor-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-raster-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-dekor-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
.fs-dekor {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

/* Schattenebene, siehe .fs-karte: eingeblendet wird opacity, nie box-shadow */
.woocommerce ul.products li.product::before,
.fs-dekor::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: var(--fs-radius);
  box-shadow: var(--fs-schatten-karte);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.woocommerce ul.products li.product:hover::before,
.woocommerce ul.products li.product:focus-within::before,
.fs-dekor:hover::before,
.fs-dekor:focus-within::before { opacity: 1; }

/* Raumbild 4:3. Der Radius sitzt am Bildrahmen, damit die Karte selbst ohne
   overflow auskommt und die Schattenebene nicht abgeschnitten wird. */
.woocommerce ul.products li.product > a:first-of-type,
.fs-dekor__bild {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-top-left-radius: var(--fs-radius);
  border-top-right-radius: var(--fs-radius);
  /* Weiss, nicht Sand. Die Dekorbilder sind quadratische, auf Weiss
     freigestellte Dielen. Auf Sand stand jede Diele in einem grauen Rahmen
     und die Kachel sah nach Platzhalter aus. Am 01.09.2026 gemeldet. */
  background-color: var(--fs-weiss);
}

.woocommerce ul.products li.product > *:last-child,
.fs-dekor > *:last-child {
  border-bottom-left-radius: var(--fs-radius);
  border-bottom-right-radius: var(--fs-radius);
}

.woocommerce ul.products li.product a img,
.fs-dekor__bild img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Materialstreifen direkt unter dem Raumbild, das Signature-Detail */
.fs-dekor > .fs-materialstreifen,
.woocommerce ul.products li.product > .fs-materialstreifen { flex: 0 0 auto; }

.fs-dekor__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s10);
  flex: 1 1 auto;
  padding: var(--fs-karte-padding);
}

.fs-dekor__kollektion {
  margin: 0;
  font-size: var(--fs-label-gr);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--fs-lh-eng);
  color: var(--fs-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.fs-dekor__name {
  margin: 0;
  padding: 0;
  font-family: var(--fs-font-ui);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--fs-lh-h3);
  color: var(--fs-navy);
}

.fs-dekor__systeme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s5);
}

.woocommerce ul.products li.product .price,
.fs-dekor__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fs-s5);
  margin: 0;
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-preis-gr);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del,
.fs-dekor__preis del {
  opacity: 1;
  font-size: var(--fs-klein-gr);
  font-weight: 400;
  color: var(--fs-muted);
  text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins,
.fs-dekor__preis ins {
  background: none;
  text-decoration: none;
  color: var(--fs-navy);
  font-weight: 700;
}

.fs-dekor__preis-vorsatz,
.fs-dekor__preis .fs-preis__einheit {
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-muted);
}

.fs-dekor__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s10);
  margin-top: auto;
  padding-top: var(--fs-s15);
}

.fs-dekor__aktionen > * { flex: 1 1 130px; }

/* Woo-Standardbutton in der Kachel neutralisieren, Klassenkontrakt gilt */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fs-btn-hoehe);
  margin: 0;
  padding: 0 var(--fs-s20);
  border-radius: var(--fs-radius);
  background-color: var(--fs-navy);
  color: var(--fs-weiss);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: var(--fs-lh-eng);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover { background-color: var(--fs-navy-soft); }

.woocommerce span.onsale,
.fs-dekor__badge {
  position: absolute;
  top: var(--fs-s15);
  left: var(--fs-s15);
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--fs-radius);
  background-color: var(--fs-navy);   /* kein Discounter-Rot */
  color: var(--fs-weiss);
  font-size: var(--fs-label-gr);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* --- Produktseite ------------------------------------------------------- */
.fs-produkt {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--fs-s50);
  align-items: start;
}

.fs-produkt__galerie {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s15);
  position: sticky;
  top: calc(76px + var(--fs-s25));
}

.fs-produkt__hauptbild {
  overflow: hidden;
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-sand);
  aspect-ratio: 4 / 3;
}

.fs-produkt__hauptbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-produkt__miniaturen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-s10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-produkt__miniatur {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-produkt__miniatur img { width: 100%; height: 100%; object-fit: cover; }
.fs-produkt__miniatur[aria-current="true"] { border-color: var(--fs-gold-dark); }
.fs-produkt__miniatur:hover { opacity: .85; }

.fs-produkt__info { display: flex; flex-direction: column; gap: var(--fs-s20); }

.fs-produkt__titel { margin: 0; }

.fs-produkt__preisblock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fs-s10);
  padding-bottom: var(--fs-s20);
  border-bottom: 1px solid var(--fs-linie);
}

.fs-produkt__muster {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s10);
  padding: var(--fs-s20);
  background-color: var(--fs-sand);
  border: 1px solid var(--fs-gold-kante);
  border-radius: var(--fs-radius);
}

.fs-produkt__muster-titel {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--fs-lh-eng);
  color: var(--fs-navy);
}

.fs-produkt__muster-text {
  margin: 0;
  font-size: var(--fs-klein-gr);
  line-height: 1.5;
  color: var(--fs-muted);
  max-width: var(--fs-mass);
}

/* Varianten-Umschalter als Segmented Control über die volle Breite */
.fs-produkt__varianten { display: flex; flex-direction: column; gap: var(--fs-s10); }
.fs-produkt__varianten .fs-segment { display: flex; width: 100%; }

/* Woo-Variationstabelle unsichtbar halten, der Umschalter ersetzt sie */
.fs-produkt .variations { display: none; }

/* Spec-Tabelle */
.fs-produkt__specs {
  width: 100%;
  border-top: 1px solid var(--fs-linie);
}

.fs-produkt__specs th,
.fs-produkt__specs td {
  padding: var(--fs-s10) 0;
  border-bottom: 1px solid var(--fs-linie);
  font-size: var(--fs-klein-gr);
  line-height: 1.5;
}

.fs-produkt__specs th {
  width: 42%;
  color: var(--fs-muted);
  font-weight: 600;
}

.fs-produkt__specs td { color: var(--fs-anthrazit); font-variant-numeric: tabular-nums; }

.fs-produkt__geschichte {
  font-family: var(--fs-font-erzaehl);
  font-size: var(--fs-erzaehl-gr);
  line-height: var(--fs-lh-erzaehl);
  max-width: var(--fs-mass-erzaehl);
}

/* Woo-Standardelemente auf der Produktseite */
.woocommerce div.product .stock {
  margin: 0;
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-erfolg);
}

.woocommerce div.product .stock.out-of-stock { color: var(--fs-warnung); }

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--fs-s10);
  margin: 0;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  flex: 1 1 200px;
  min-height: var(--fs-btn-hoehe);
  padding: 0 var(--fs-s25);
  border-radius: var(--fs-radius);
  background-color: var(--fs-navy);
  color: var(--fs-weiss);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover { background-color: var(--fs-navy-soft); }

/* --- Mengen-Stepper ----------------------------------------------------- */
.woocommerce .quantity,
.fs-menge {
  display: inline-flex;
  align-items: stretch;
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
  overflow: hidden;
}

.woocommerce .quantity .qty,
.fs-menge__feld {
  width: 76px;
  min-height: var(--fs-btn-hoehe);
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: none;
}

.fs-menge__knopf {
  width: var(--fs-touch);
  min-height: var(--fs-btn-hoehe);
  border: 0;
  background-color: var(--fs-sand);
  color: var(--fs-navy);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-menge__knopf:hover { opacity: .8; }

/* --- Quadratmeter-Rechner ----------------------------------------------- */
.fs-rechner {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s15);
  padding: var(--fs-s20);
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-rechner__titel {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  color: var(--fs-navy);
}

.fs-rechner__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--fs-s10);
}

.fs-rechner__gruppe { flex: 1 1 150px; display: flex; flex-direction: column; gap: var(--fs-s5); }

.fs-rechner__feld { font-variant-numeric: tabular-nums; font-weight: 600; }

.fs-rechner__ausgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-s10);
  margin: 0;
  padding: var(--fs-s15);
  background-color: var(--fs-sand);
  border-radius: var(--fs-radius);
  max-width: none;
}

.fs-rechner__ausgabe-label {
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-muted);
}

.fs-rechner__ausgabe-wert {
  font-size: var(--fs-preis-gr);
  font-weight: 700;
  line-height: 1.1;
  color: var(--fs-navy);
  font-variant-numeric: tabular-nums;
}

.fs-rechner__hinweis {
  margin: 0;
  font-size: var(--fs-klein-gr);
  line-height: 1.5;
  color: var(--fs-muted);
  max-width: var(--fs-mass);
}

.fs-rechner__pakete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s15);
  font-size: var(--fs-klein-gr);
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Warenkorb ---------------------------------------------------------- */
.fs-warenkorb { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--fs-s40); align-items: start; }

.woocommerce table.shop_table {
  width: 100%;
  margin: 0;
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--fs-weiss);
}

.woocommerce table.shop_table th {
  padding: var(--fs-s15);
  background-color: var(--fs-sand);
  border-bottom: 1px solid var(--fs-linie);
  font-size: var(--fs-label-gr);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-muted);
}

.woocommerce table.shop_table td {
  padding: var(--fs-s15);
  border-top: 0;
  border-bottom: 1px solid var(--fs-linie);
  vertical-align: middle;
  font-size: var(--fs-klein-gr);
}

.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce table.cart img { width: 72px; border-radius: var(--fs-radius); }

.woocommerce table.cart .product-name a { font-weight: 600; color: var(--fs-navy); }

.woocommerce a.remove {
  display: inline-grid;
  place-items: center;
  width: var(--fs-touch);
  height: var(--fs-touch);
  border-radius: var(--fs-radius);
  color: var(--fs-muted);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}

.woocommerce a.remove:hover { background-color: var(--fs-sand); color: var(--fs-warnung); }

.woocommerce .cart_totals,
.fs-warenkorb__summe {
  position: sticky;
  top: calc(76px + var(--fs-s25));
  padding: var(--fs-s25);
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.woocommerce .cart_totals h2,
.fs-warenkorb__summe h2 { font-size: var(--fs-h4); margin-bottom: var(--fs-s15); }

.woocommerce .cart_totals table.shop_table { border: 0; }
.woocommerce .cart_totals table.shop_table th { background: none; text-transform: none; letter-spacing: 0; }

.woocommerce .cart_totals .order-total .amount {
  font-size: var(--fs-preis-gr);
  font-weight: 700;
  color: var(--fs-navy);
  font-variant-numeric: tabular-nums;
}

.woocommerce .wc-proceed-to-checkout { padding: var(--fs-s20) 0 0; }

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fs-btn-hoehe);
  margin: 0;
  padding: 0 var(--fs-s25);
  border-radius: var(--fs-radius);
  background-color: var(--fs-navy);   /* Gold bleibt der Muster-CTA vorbehalten */
  color: var(--fs-weiss);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background-color: var(--fs-navy-soft); }

/* Musterzeile im Warenkorb sichtbar auszeichnen */
.woocommerce table.cart tr.fs-musterzeile td { background-color: var(--fs-sand); }

.fs-warenkorb__musterhinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-s10);
  margin: 0 0 var(--fs-s20);
  padding: var(--fs-s15);
  background-color: var(--fs-gold-schleier);
  border-left: 2px solid var(--fs-gold);
  border-radius: var(--fs-radius);
  font-size: var(--fs-klein-gr);
  line-height: 1.5;
  color: var(--fs-anthrazit);
  max-width: none;
}

/* --- Kasse -------------------------------------------------------------- */
.woocommerce-checkout .fs-kasse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--fs-s40);
  align-items: start;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }

.woocommerce-checkout #customer_details {
  display: grid;
  gap: var(--fs-s30);
}

.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s5);
  margin: 0 0 var(--fs-s15);
  padding: 0;
}

.woocommerce form .form-row label {
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-titel);
}

.woocommerce form .form-row .required { color: var(--fs-warnung); text-decoration: none; }

.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

.woocommerce-checkout .fs-kasse__spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-s20);
}

.woocommerce-checkout-review-order {
  position: sticky;
  top: calc(76px + var(--fs-s25));
  padding: var(--fs-s25);
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.woocommerce-checkout #payment {
  background-color: transparent;
  border-radius: var(--fs-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 1px solid var(--fs-linie);
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--fs-s10) 0;
  font-size: var(--fs-klein-gr);
}

.woocommerce-checkout #payment div.payment_box {
  margin: var(--fs-s10) 0 0;
  padding: var(--fs-s15);
  background-color: var(--fs-sand);
  border-radius: var(--fs-radius);
  font-size: var(--fs-klein-gr);
  line-height: 1.5;
  color: var(--fs-anthrazit);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: var(--fs-btn-hoehe);
  margin-top: var(--fs-s15);
  border: 0;
  border-radius: var(--fs-radius);
  background-color: var(--fs-navy);
  color: var(--fs-weiss);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.woocommerce-checkout #payment #place_order:hover { background-color: var(--fs-navy-soft); }
.woocommerce-checkout #payment #place_order:active { transform: translateY(1px); }

/* --- Notices ------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.fs-notiz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s15);
  margin: 0 0 var(--fs-s25);
  padding: var(--fs-s15) var(--fs-s20);
  border: 1px solid var(--fs-linie);
  border-left-width: 2px;
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
  list-style: none;
  max-width: none;
  font-size: var(--fs-klein-gr);
  line-height: 1.5;
  color: var(--fs-anthrazit);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

.woocommerce-message,
.fs-notiz--erfolg {
  border-color: var(--fs-erfolg);
  background-color: var(--fs-erfolg-flaeche);
}

.woocommerce-info,
.fs-notiz--info {
  border-color: var(--fs-gold-dark);
  background-color: var(--fs-gold-schleier);
}

.woocommerce-error,
.fs-notiz--fehler {
  border-color: var(--fs-warnung);
  background-color: var(--fs-warnung-flaeche);
  color: var(--fs-warnung);
}

.woocommerce-error li { margin: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
  min-height: var(--fs-touch);
  margin-left: auto;
  padding: 0 var(--fs-s20);
  display: inline-flex;
  align-items: center;
  border-radius: var(--fs-radius);
  background-color: var(--fs-navy);
  color: var(--fs-weiss);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
}

/* Woo-Sortierung und Ergebniszahl */
.woocommerce .woocommerce-ordering select {
  min-height: var(--fs-touch);
  width: auto;
  min-width: 220px;
}

.woocommerce .woocommerce-result-count {
  margin: 0;
  font-size: var(--fs-klein-gr);
  color: var(--fs-muted);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: var(--fs-s5);
  border: 0;
  margin: var(--fs-s40) 0 0;
  padding: 0;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: var(--fs-touch);
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s10);
  border: 1px solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
  color: var(--fs-navy);
  font-size: var(--fs-klein-gr);
  font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--fs-navy);
  border-color: var(--fs-navy);
  color: var(--fs-weiss);
}


/* ==========================================================================
   09  Musterbox
   ========================================================================== */

.fs-musterbox {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s30);
}

.fs-musterbox__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fs-s20);
}

/* --- Filterleiste ------------------------------------------------------- */
.fs-musterbox__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s10);
  padding: var(--fs-s15);
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-musterbox__filter-gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s5);
}

.fs-musterbox__filter-label {
  margin: 0 var(--fs-s5) 0 0;
  font-size: var(--fs-label-gr);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-muted);
}

.fs-musterbox__filter-knopf {
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s15);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: transparent;
  font-family: var(--fs-font-ui);
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  color: var(--fs-muted);
  cursor: pointer;
  transition: transform var(--fs-dauer) var(--fs-ease),
              opacity var(--fs-dauer) var(--fs-ease);
}

.fs-musterbox__filter-knopf:hover { opacity: .78; }

.fs-musterbox__filter-knopf[aria-pressed="true"],
.fs-musterbox__filter-knopf.is-aktiv {
  background-color: var(--fs-navy);
  border-color: var(--fs-navy);
  color: var(--fs-weiss);
}

.fs-musterbox__filter-knopf .fs-musterbox__anzahl {
  margin-left: var(--fs-s5);
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

.fs-musterbox__filter-reset {
  margin-left: auto;
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s10);
  border: 0;
  background: none;
  font-family: var(--fs-font-ui);
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-navy);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--fs-gold);
  text-underline-offset: 3px;
}

/* --- Statuszeile "2 von 3 Mustern gewählt" ----------------------------- */
.fs-musterbox__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s15);
  padding: var(--fs-s15) var(--fs-s20);
  background-color: var(--fs-sand);
  border: 1px solid var(--fs-gold-kante);
  border-radius: var(--fs-radius);
}

.fs-musterbox__status-text {
  margin: 0;
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  color: var(--fs-navy);
  font-variant-numeric: tabular-nums;
}

.fs-musterbox__status-zahl {
  font-size: var(--fs-h4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fs-musterbox__status-hinweis {
  margin: 0;
  font-size: var(--fs-klein-gr);
  line-height: var(--fs-lh-eng);
  color: var(--fs-muted);
  max-width: var(--fs-mass);
}

.fs-musterbox__status-aktion { margin-left: auto; }

/* Limit erreicht: jedes weitere Muster kostet 2,50 EUR */
.fs-musterbox__status.is-limit {
  background-color: var(--fs-gold-schleier);
  border-color: var(--fs-gold-dark);
}

/* Sticky Variante am unteren Rand, mobil der wichtigste Anker */
.fs-musterbox__status--sticky {
  position: sticky;
  bottom: 0;
  z-index: 60;
  box-shadow: 0 -6px 24px rgba(13, 27, 42, .10);
}

/* --- Fortschritt -------------------------------------------------------- */
.fs-musterbox__fortschritt {
  --fs-anteil: 0;
  flex: 1 1 180px;
  position: relative;
  height: 6px;
  min-width: 120px;
  overflow: hidden;
  background-color: var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-musterbox__fortschritt-balken {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--fs-anteil));
  background-color: var(--fs-gold);
  transition: transform var(--fs-dauer-lang) var(--fs-ease);
}

.fs-musterbox__fortschritt.is-voll .fs-musterbox__fortschritt-balken { background-color: var(--fs-erfolg); }

/* Segmentierte Variante, drei Felder für drei Gratismuster */
.fs-musterbox__fortschritt--stufen {
  display: flex;
  gap: 4px;
  height: 8px;
  background: none;
  overflow: visible;
}

.fs-musterbox__stufe {
  flex: 1 1 0;
  border-radius: var(--fs-radius);
  background-color: var(--fs-linie);
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-musterbox__stufe.is-voll { background-color: var(--fs-gold); }

/* --- Raster ------------------------------------------------------------- */
.fs-musterbox__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-raster-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-musterbox__raster > li { margin: 0; }

/* --- Muster-Karte ------------------------------------------------------- */
.fs-muster-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-muster-karte::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: var(--fs-radius);
  box-shadow: var(--fs-schatten-karte);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-muster-karte:hover::before,
.fs-muster-karte:focus-within::before { opacity: 1; }

.fs-muster-karte__bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-top-left-radius: var(--fs-radius);
  border-top-right-radius: var(--fs-radius);
  background-color: var(--fs-sand);
}

.fs-muster-karte__inhalt:last-child {
  border-bottom-left-radius: var(--fs-radius);
  border-bottom-right-radius: var(--fs-radius);
}

.fs-muster-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-muster-karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s5);
  flex: 1 1 auto;
  padding: var(--fs-s20);
}

.fs-muster-karte__kollektion {
  margin: 0;
  font-size: var(--fs-label-gr);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--fs-lh-eng);
  color: var(--fs-muted);
}

.fs-muster-karte__name {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  color: var(--fs-navy);
}

.fs-muster-karte__meta {
  margin: 0;
  font-size: var(--fs-klein-gr);
  line-height: var(--fs-lh-eng);
  color: var(--fs-muted);
}

.fs-muster-karte__aktion { margin-top: auto; padding-top: var(--fs-s15); }

.fs-muster-karte__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-s5);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--fs-s15);
  border: var(--fs-linie-staerke) solid var(--fs-gold);
  border-radius: var(--fs-radius);
  background-color: var(--fs-gold);
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: var(--fs-lh-eng);
  cursor: pointer;
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.fs-muster-karte__knopf:hover { background-color: var(--fs-gold-dark); border-color: var(--fs-gold-dark); }
.fs-muster-karte__knopf:active { transform: translateY(1px); }

.fs-muster-karte__knopf:focus-visible {
  outline: 2px solid var(--fs-navy);
  outline-offset: 2px;
}

/* Zustand: gewählt */
.fs-muster-karte.is-gewaehlt { border-color: var(--fs-gold-dark); }

.fs-muster-karte.is-gewaehlt .fs-muster-karte__knopf {
  background-color: transparent;
  border-color: var(--fs-navy);
  color: var(--fs-navy);
}

.fs-muster-karte.is-gewaehlt .fs-muster-karte__knopf::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: var(--fs-icon-haken);
  background-size: contain;
  background-repeat: no-repeat;
}

.fs-muster-karte__marke {
  position: absolute;
  top: var(--fs-s15);
  right: var(--fs-s15);
  z-index: 2;
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--fs-radius);
  background-color: var(--fs-gold);
}

.fs-muster-karte__marke::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: var(--fs-icon-haken);
  background-size: contain;
  background-repeat: no-repeat;
}

.fs-muster-karte.is-gewaehlt .fs-muster-karte__marke { display: grid; }

/* Zustand: gesperrt, Muster liegt bereits im Warenkorb oder Limit greift */
.fs-muster-karte.is-gesperrt { border-color: var(--fs-linie); }

.fs-muster-karte.is-gesperrt .fs-muster-karte__bild img { opacity: .55; }

.fs-muster-karte.is-gesperrt .fs-muster-karte__knopf {
  background-color: var(--fs-sand);
  border-color: var(--fs-linie);
  color: var(--fs-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.fs-muster-karte.is-gesperrt .fs-muster-karte__knopf::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: var(--fs-icon-schloss);
  background-size: contain;
  background-repeat: no-repeat;
}

.fs-muster-karte.is-gesperrt:hover::before { opacity: 0; }
.fs-muster-karte.is-gesperrt:hover .fs-muster-karte__bild img { transform: none; }

.fs-muster-karte__preis {
  margin: 0;
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-navy);
  font-variant-numeric: tabular-nums;
}

/* Warenkorb-Vorschau der gewählten Muster */
.fs-musterbox__auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-musterbox__auswahl li {
  display: flex;
  align-items: center;
  gap: var(--fs-s5);
  margin: 0;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--fs-gold-kante);
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  color: var(--fs-navy);
}

.fs-musterbox__auswahl-entfernen {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--fs-radius);
  background: none;
  color: var(--fs-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.fs-musterbox__auswahl-entfernen:hover { background-color: var(--fs-sand); color: var(--fs-warnung); }

.fs-musterbox__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-s20);
  padding: var(--fs-s25);
  background-color: var(--fs-navy);
  border-radius: var(--fs-radius);
  color: var(--fs-hell-86);
}

.fs-musterbox__abschluss-titel {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--fs-weiss);
}

.fs-musterbox__abschluss-text {
  margin: 0;
  font-size: var(--fs-klein-gr);
  line-height: 1.5;
  color: var(--fs-hell-66);
  max-width: var(--fs-mass);
}


/* ==========================================================================
   10  Header und Footer
   ========================================================================== */

/* Header, Mobilnavigation und Footer stehen auf Navy, aber außerhalb von
   .fs-sektion. Ohne diesen Block bliebe --fs-titel auf Navy stehen und
   Überschriften oder strong-Text wären Navy auf Navy, also unsichtbar. */
.fs-header,
.fs-mobilnav,
.fs-footer {
  --fs-flaeche: var(--fs-navy);
  --fs-text: var(--fs-hell-86);
  --fs-titel: var(--fs-weiss);
  --fs-sekundaer: var(--fs-hell-66);
  --fs-kante: var(--fs-hell-16);
  --fs-fokus: var(--fs-gold);
}

.fs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--fs-navy);
  color: var(--fs-hell-86);
  border-bottom: 1px solid var(--fs-hell-16);
}

/* Der Schatten beim Scrollen liegt wieder auf einer eigenen Ebene, damit nur
   opacity animiert wird. Die Ebene sitzt unter dem Header-Hintergrund. */
.fs-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: var(--fs-schatten-header-aktiv);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

.fs-header.is-gescrollt::after { opacity: 1; }

.admin-bar .fs-header { top: 32px; }

.fs-header__innen {
  display: flex;
  align-items: center;
  gap: var(--fs-s25);
  width: 100%;
  max-width: var(--fs-container);
  margin-inline: auto;
  min-height: 76px;
  padding: var(--fs-s10) var(--fs-rand);
}

.fs-header__logo {
  display: flex;
  align-items: center;
  gap: var(--fs-s10);
  flex: 0 0 auto;
  min-height: var(--fs-touch);
  color: var(--fs-weiss);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

.fs-header__logo img { max-height: 40px; width: auto; }

/* --- Navigation --------------------------------------------------------- */
.fs-header__nav {
  display: flex;
  align-items: center;
  gap: var(--fs-s5);
  margin-left: auto;
}

.fs-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--fs-s5);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.fs-header__nav li { position: relative; margin: 0; }

.fs-header__nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s15);
  border-radius: var(--fs-radius);
  color: var(--fs-hell-86);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--fs-lh-eng);
  white-space: nowrap;
}

.fs-header__nav a::after {
  content: "";
  position: absolute;
  left: var(--fs-s15);
  right: var(--fs-s15);
  bottom: 8px;
  height: 1px;
  background-color: var(--fs-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.fs-header__nav a:hover { color: var(--fs-weiss); }
.fs-header__nav a:hover::after { transform: scaleX(1); }

.fs-header__nav .current-menu-item > a,
.fs-header__nav a[aria-current="page"] { color: var(--fs-weiss); }
.fs-header__nav .current-menu-item > a::after,
.fs-header__nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Untermenü */
.fs-header__nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: block;
  min-width: 240px;
  padding: var(--fs-s10);
  background-color: var(--fs-navy-soft);
  border: 1px solid var(--fs-hell-16);
  border-radius: var(--fs-radius);
  box-shadow: var(--fs-schatten-hoch);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--fs-dauer) var(--fs-ease),
              transform var(--fs-dauer) var(--fs-ease);
}

.fs-header__nav li:hover > ul,
.fs-header__nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fs-header__nav ul ul a { width: 100%; white-space: normal; }
.fs-header__nav ul ul a::after { display: none; }
.fs-header__nav ul ul a:hover { background-color: rgba(255, 255, 255, .08); }

/* --- Muster-Zähler "2 von 3" ------------------------------------------- */
.fs-header__muster {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s10);
  flex: 0 0 auto;
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s15);
  border: 1px solid var(--fs-gold);
  border-radius: var(--fs-radius);
  background-color: transparent;
  color: var(--fs-gold);              /* Gold auf Navy ist erlaubt, 6,93 */
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.fs-header__muster:hover {
  background-color: var(--fs-gold);
  color: var(--fs-navy);
}

.fs-header__muster-zahl { font-variant-numeric: tabular-nums; font-weight: 700; }

.fs-header__muster-text { display: inline; }

/* Voll: Gold-Fläche mit Navy-Text, klare Statusänderung */
.fs-header__muster.is-voll {
  background-color: var(--fs-gold);
  color: var(--fs-navy);
}

.fs-header__muster.is-voll:hover { background-color: var(--fs-gold-dark); }

.fs-header__warenkorb {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s5);
  min-height: var(--fs-touch);
  min-width: var(--fs-touch);
  padding: 0 var(--fs-s10);
  border-radius: var(--fs-radius);
  color: var(--fs-hell-86);
  font-size: var(--fs-klein-gr);
  font-weight: 600;
}

.fs-header__warenkorb:hover { color: var(--fs-weiss); }
.fs-header__warenkorb-zahl { font-variant-numeric: tabular-nums; }

/* --- Burger ------------------------------------------------------------- */
.fs-burger {
  display: none;
  place-items: center;
  width: var(--fs-touch);
  height: var(--fs-touch);
  padding: 0;
  border: 0;
  border-radius: var(--fs-radius);
  background: none;
  cursor: pointer;
}

.fs-burger__strich {
  position: relative;
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--fs-weiss);
  transition: transform var(--fs-dauer) var(--fs-ease),
              opacity var(--fs-dauer) var(--fs-ease);
}

.fs-burger__strich::before,
.fs-burger__strich::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background-color: var(--fs-weiss);
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.fs-burger__strich::before { transform: translateY(-7px); }
.fs-burger__strich::after { transform: translateY(7px); }

.fs-burger[aria-expanded="true"] .fs-burger__strich { transform: rotate(45deg); }
.fs-burger[aria-expanded="true"] .fs-burger__strich::before { transform: translateY(0) rotate(-90deg); }
.fs-burger[aria-expanded="true"] .fs-burger__strich::after { transform: translateY(0) scaleX(0); }

/* --- Mobilnavigation ---------------------------------------------------- */
.fs-mobilnav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--fs-s10);
  padding: calc(76px + var(--fs-s25)) var(--fs-rand) var(--fs-s40);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--fs-navy);
  color: var(--fs-hell-86);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--fs-dauer-lang) var(--fs-ease),
              transform var(--fs-dauer-lang) var(--fs-ease),
              visibility var(--fs-dauer-lang);
}

.fs-mobilnav.is-offen {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fs-mobilnav ul {
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.fs-mobilnav li { margin: 0; border-bottom: 1px solid var(--fs-hell-16); }

.fs-mobilnav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--fs-s10) 0;
  color: var(--fs-hell-86);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
}

.fs-mobilnav a:hover,
.fs-mobilnav a[aria-current="page"] { color: var(--fs-gold); }

.fs-mobilnav ul ul { padding-left: var(--fs-s20); }
.fs-mobilnav ul ul a { min-height: 48px; font-size: 1rem; font-weight: 400; }

.fs-mobilnav__aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s10);
  margin-top: var(--fs-s25);
}

/* Body-Scroll sperren, solange die Mobilnavigation offen ist */
body.fs-nav-offen { overflow: hidden; }

/* --- Footer ------------------------------------------------------------- */
.fs-footer {
  background-color: var(--fs-navy);
  color: var(--fs-hell-86);
  border-top: 2px solid var(--fs-gold);
  padding: var(--fs-s75) var(--fs-rand) var(--fs-s30);
}

.fs-footer__innen {
  width: 100%;
  max-width: var(--fs-container);
  margin-inline: auto;
}

.fs-footer__raster {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--fs-s40);
}

.fs-footer__marke {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s15);
}

.fs-footer__marke img { max-height: 40px; width: auto; }

.fs-footer__claim {
  margin: 0;
  font-family: var(--fs-font-erzaehl);
  font-size: 1rem;
  line-height: var(--fs-lh-erzaehl);
  color: var(--fs-hell-66);
  max-width: 34ch;
}

.fs-footer__titel {
  margin: 0 0 var(--fs-s15);
  font-size: var(--fs-label-gr);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-gold);              /* Gold auf Navy, erlaubt */
}

.fs-footer__liste {
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.fs-footer__liste li { margin: 0; }

.fs-footer__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  color: var(--fs-hell-86);
  font-size: var(--fs-klein-gr);
  line-height: var(--fs-lh-eng);
}

.fs-footer__liste a:hover { color: var(--fs-gold); }

.fs-footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-s15);
  margin-top: var(--fs-s50);
  padding-top: var(--fs-s25);
  border-top: 1px solid var(--fs-hell-16);
  font-size: var(--fs-klein-gr);
  color: var(--fs-hell-66);
}

.fs-footer__rechtlich {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s20);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.fs-footer__rechtlich li { margin: 0; }

.fs-footer__rechtlich a {
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  color: var(--fs-hell-66);
}

.fs-footer__rechtlich a:hover { color: var(--fs-gold); }


/* ==========================================================================
   11  Zustände: Skeleton, Ladebalken, Leer, Fehler
   ========================================================================== */

/* --- Skeleton ----------------------------------------------------------- */
.fs-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--fs-sand);
  border-radius: var(--fs-radius);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.fs-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: fs-schimmer 1200ms var(--fs-ease) infinite;
}

/* Nur transform wird animiert, kein background-position */
@keyframes fs-schimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.fs-skeleton--bild { aspect-ratio: 4 / 3; width: 100%; }
.fs-skeleton--streifen { height: 34px; width: 100%; }
.fs-skeleton--zeile { height: 14px; width: 100%; margin-bottom: var(--fs-s10); }
.fs-skeleton--zeile-kurz { width: 55%; }
.fs-skeleton--titel { height: 22px; width: 70%; margin-bottom: var(--fs-s15); }
.fs-skeleton--preis { height: 26px; width: 40%; }
.fs-skeleton--knopf { height: 48px; width: 100%; margin-top: var(--fs-s15); }

.fs-skeleton-karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--fs-weiss);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-skeleton-karte__inhalt {
  display: flex;
  flex-direction: column;
  padding: var(--fs-karte-padding);
}

/* --- Ladebalken --------------------------------------------------------- */
.fs-ladebalken {
  --fs-anteil: 0;
  position: relative;
  height: 3px;
  width: 100%;
  overflow: hidden;
  background-color: var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-ladebalken__balken {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--fs-anteil));
  background-color: var(--fs-gold);
  transition: transform var(--fs-dauer-lang) var(--fs-ease);
}

/* Unbestimmt: läuft durch, ausschließlich per transform */
.fs-ladebalken--unbestimmt .fs-ladebalken__balken {
  transform: scaleX(.35);
  animation: fs-laeuft 1100ms var(--fs-ease) infinite;
}

@keyframes fs-laeuft {
  from { transform: translateX(-100%) scaleX(.35); }
  to   { transform: translateX(285%) scaleX(.35); }
}

/* Am oberen Seitenrand, während Filter oder Ajax laufen */
.fs-ladebalken--seite {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  background-color: transparent;
}

/* Bereich, der gerade neu geladen wird */
.fs-laedt {
  position: relative;
  opacity: .5;
  pointer-events: none;
  transition: opacity var(--fs-dauer) var(--fs-ease);
}

/* --- Leerzustand -------------------------------------------------------- */
.fs-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-s15);
  padding: var(--fs-s60) var(--fs-s25);
  text-align: center;
  background-color: var(--fs-weiss);
  border: 1px dashed var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-leer::before {
  content: "";
  width: 64px;
  height: 64px;
  background-image: var(--fs-signet-klein);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .7;
}

.fs-leer__titel {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--fs-lh-h3);
  color: var(--fs-navy);
}

.fs-leer__text {
  margin: 0;
  max-width: 46ch;
  color: var(--fs-muted);
}

.fs-leer__aktion { margin-top: var(--fs-s10); }

/* --- Fehlerzustand ------------------------------------------------------ */
.fs-fehler {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s10);
  padding: var(--fs-s25);
  background-color: var(--fs-warnung-flaeche);
  border: 1px solid var(--fs-warnung);
  border-left-width: 2px;
  border-radius: var(--fs-radius);
}

.fs-fehler__titel {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--fs-lh-eng);
  color: var(--fs-warnung);
}

.fs-fehler__text {
  margin: 0;
  color: var(--fs-anthrazit);
  max-width: var(--fs-mass);
}

.fs-fehler__aktion { margin-top: var(--fs-s5); }

/* Feldfehler im Formular */
.fs-feld.is-fehler,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--fs-warnung); }

.fs-feld-fehler {
  font-size: var(--fs-klein-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  color: var(--fs-warnung);
}

.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--fs-erfolg); }


/* ==========================================================================
   12  Media Queries
   Breakpoints: 1024px Tablet, 767px Mobil.
   Seitenrand mobil nie unter 16px, Touchziele mindestens 44px.
   ========================================================================== */

/* --- Tablet, bis 1024px ------------------------------------------------- */
@media (max-width: 1024px) {

  :root {
    --fs-sektion-y: var(--fs-s75);
    --fs-sektion-y-hero: var(--fs-s60);
    --fs-sektion-y-eng: var(--fs-s40);
    --fs-raster-gap: var(--fs-s25);
  }

  .fs-raster-3,
  .fs-raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .woocommerce ul.products,
  .fs-dekor-raster,
  .fs-dekor-raster--3,
  .fs-musterbox__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .fs-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Produktseite und Kasse einspaltig, kein sticky mehr */
  .fs-produkt,
  .fs-warenkorb,
  .woocommerce-checkout .fs-kasse { grid-template-columns: minmax(0, 1fr); }

  .fs-produkt__galerie,
  .woocommerce .cart_totals,
  .fs-warenkorb__summe,
  .woocommerce-checkout-review-order { position: static; top: auto; }

  .fs-footer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fs-signet::before { width: 320px; height: 320px; right: -120px; }
  .fs-signet--links::before { left: -120px; right: auto; }

  /* Navigation wandert in die Mobilnavigation */
  .fs-header__nav { display: none; }
  .fs-burger { display: grid; margin-left: auto; }
  .fs-header__innen { min-height: 68px; gap: var(--fs-s15); }
  .fs-mobilnav { padding-top: calc(68px + var(--fs-s25)); }
  .fs-produkt__galerie { top: auto; }
  .woocommerce .cart_totals,
  .fs-warenkorb__summe,
  .woocommerce-checkout-review-order { top: auto; }
}

/* --- Mobil, bis 767px --------------------------------------------------- */
@media (max-width: 767px) {

  :root {
    --fs-sektion-y: var(--fs-s50);
    --fs-sektion-y-hero: var(--fs-s50);
    --fs-sektion-y-eng: var(--fs-s30);
    --fs-rand: var(--fs-s25);        /* 25px, deutlich über der 16px-Grenze */
    --fs-karte-padding: var(--fs-s20);
    --fs-raster-gap: var(--fs-s20);
    --fs-btn-hoehe: 48px;            /* weiterhin über dem 44px-Touchziel */
  }

  /* Inhaltsraster kollabieren vollständig */
  .fs-raster-2,
  .fs-raster-3,
  .fs-raster-4 { grid-template-columns: minmax(0, 1fr); }

  /* Bildkacheln bleiben zweispaltig, das ist im Shop die bessere Übersicht */
  .woocommerce ul.products,
  .fs-dekor-raster,
  .fs-dekor-raster--3,
  .fs-musterbox__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fs-dekor__aktionen,
  .fs-karte__aktionen { flex-direction: column; }
  .fs-dekor__aktionen > *,
  .fs-karte__aktionen > * { flex: 1 1 auto; width: 100%; }

  .fs-dekor__inhalt,
  .fs-muster-karte__inhalt { padding: var(--fs-s15); }

  /* Schmalere Innenabstände, damit die Beschriftung in der Zweispalter-Kachel
     einzeilig bleibt. Die Schriftgröße bleibt bei 15px. */
  .fs-muster-karte__knopf { padding-inline: var(--fs-s10); }

  .fs-dekor__name { font-size: 1.0625rem; }

  .fs-trust { grid-template-columns: minmax(0, 1fr); gap: var(--fs-s15); }

  .fs-produkt__miniaturen { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .fs-produkt__varianten .fs-segment { flex-direction: column; }
  .fs-segment__text { white-space: normal; }

  .woocommerce-checkout .fs-kasse__spalten { grid-template-columns: minmax(0, 1fr); }

  /* Warenkorbtabelle als Kartenliste */
  .woocommerce table.shop_table.cart thead { display: none; }
  .woocommerce table.shop_table.cart tr {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--fs-s10) var(--fs-s15);
    padding: var(--fs-s15);
    border-bottom: 1px solid var(--fs-linie);
  }
  .woocommerce table.shop_table.cart td {
    padding: 0;
    border: 0;
  }
  .woocommerce table.shop_table.cart td.product-thumbnail { grid-row: span 3; }
  .woocommerce table.shop_table.cart td.product-remove { grid-column: 2; justify-self: end; }

  /* Sektionen und Typo */
  .fs-schritt { align-items: flex-start; }
  .fs-schritt__nummer { width: 60px; height: 60px; font-size: 1.25rem; }

  .fs-signet::before { width: 240px; height: 240px; right: -90px; opacity: .05; }
  .fs-sektion--navy.fs-signet::before,
  .fs-sektion--navy .fs-signet::before { opacity: .10; }

  .fs-trennlinie { margin: var(--fs-s40) 0; }

  /* Header */
  .fs-header__innen { min-height: 60px; gap: var(--fs-s10); }
  .fs-mobilnav { padding-top: calc(60px + var(--fs-s20)); }
  .admin-bar .fs-header { top: 46px; }
  .fs-header__logo { font-size: 1rem; }
  .fs-header__logo img { max-height: 32px; }
  .fs-header__muster { padding: 0 var(--fs-s10); }
  .fs-header__muster-text { display: none; }   /* nur noch "2 / 3" */

  /* Musterbox */
  .fs-musterbox__filter { gap: var(--fs-s5); padding: var(--fs-s10); }
  .fs-musterbox__filter-gruppe { width: 100%; }
  .fs-musterbox__filter-reset { margin-left: 0; }
  .fs-musterbox__status { flex-direction: column; align-items: stretch; gap: var(--fs-s10); }

  /* In der Spalte ist die Hauptachse senkrecht. Ohne diese Zeile würde die
     flex-basis von 180px zur Höhe und der Balken zum Block. */
  .fs-musterbox__status .fs-musterbox__fortschritt { flex: 0 0 6px; width: 100%; }
  .fs-musterbox__status .fs-musterbox__fortschritt--stufen { flex: 0 0 8px; }

  .fs-musterbox__status-aktion { margin-left: 0; }
  .fs-musterbox__status-aktion > * { width: 100%; }
  .fs-musterbox__abschluss { flex-direction: column; align-items: stretch; }
  .fs-musterbox__abschluss > * { width: 100%; }

  /* Footer */
  .fs-footer { padding-top: var(--fs-s50); }
  .fs-footer__raster { grid-template-columns: minmax(0, 1fr); gap: var(--fs-s30); }
  .fs-footer__unten { flex-direction: column; align-items: flex-start; margin-top: var(--fs-s30); }

  /* Woo-Kopf */
  .fs-shop__kopf { flex-direction: column; align-items: flex-start; }
  .woocommerce .woocommerce-ordering select { width: 100%; min-width: 0; }
}

/* --- Sehr schmale Geräte ----------------------------------------------- */
@media (max-width: 479px) {

  :root { --fs-rand: var(--fs-s20); }   /* 20px, weiterhin über 16px */

  .fs-produkt__miniaturen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Erst unterhalb der gängigen Telefonbreiten wird auch das Bildraster
   einspaltig. Bei 375px bleiben zwei Kacheln, das ist im Shop die
   brauchbarere Übersicht. */
@media (max-width: 359px) {

  .woocommerce ul.products,
  .fs-dekor-raster,
  .fs-dekor-raster--3,
  .fs-musterbox__raster { grid-template-columns: minmax(0, 1fr); }

  .fs-produkt__miniaturen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .fs-header,
  .fs-mobilnav,
  .fs-burger,
  .fs-footer,
  .fs-musterbox__filter,
  .fs-signet::before { display: none; }

  body { background: #fff; color: #000; }
  .fs-sektion { padding: 0; background: #fff; }
}


/* ==========================================================================
   13  Reduced Motion

   !important ist hier notwendig und der einzige Ort im File: Elementor
   schreibt Entrance-Animationen und Motion-Effekte als Inline-Styles
   (style="transform:...") sowie eigene Keyframes direkt an das Element.
   Ohne !important lässt sich das aus einem Stylesheet nicht abschalten.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  /* Alle dekorativen Verschiebungen und Skalierungen stehen still */
  .fs-karte:hover,
  .fs-karte:focus-within,
  .fs-karte__bild img,
  .fs-karte:hover .fs-karte__bild img,
  .fs-dekor__bild img,
  .fs-dekor:hover .fs-dekor__bild img,
  .fs-muster-karte__bild img,
  .fs-muster-karte:hover .fs-muster-karte__bild img,
  .woocommerce ul.products li.product:hover a img,
  .fs-btn-primaer:active,
  .fs-btn-muster:active,
  .fs-btn-sekundaer:active,
  .fs-muster-karte__knopf:active,
  .woocommerce-checkout #payment #place_order:active,
  .fs-akkordeon__eintrag[open] > .fs-akkordeon__frage::after,
  .elementor-element,
  .elementor-widget,
  .elementor-invisible {
    transform: none !important;
    animation: none !important;
  }

  /* Elementor markiert nicht animierte Elemente als unsichtbar */
  .elementor-invisible { opacity: 1 !important; visibility: visible !important; }

  /* Zustandsanzeigen bleiben sichtbar, nur ohne Bewegung */
  .fs-skeleton::after { animation: none !important; opacity: .45; }

  .fs-ladebalken--unbestimmt .fs-ladebalken__balken {
    animation: none !important;
    transform: scaleX(1) !important;
    opacity: .55;
  }

  /* Fortschritt und Segmented Control springen statt zu gleiten */
  .fs-musterbox__fortschritt-balken,
  .fs-ladebalken__balken { transition: none !important; }

  /* Navigation und Untermenüs erscheinen ohne Versatz */
  .fs-header__nav ul ul,
  .fs-mobilnav { transform: none !important; }

  .fs-header__nav a::after,
  .fs-header__nav a:hover::after { transform: scaleX(1) !important; opacity: 1; }

  .fs-burger[aria-expanded="true"] .fs-burger__strich,
  .fs-burger[aria-expanded="true"] .fs-burger__strich::before,
  .fs-burger[aria-expanded="true"] .fs-burger__strich::after { transition: none !important; }
}


/* ==========================================================================
   14  Nachtrag: Klassen aus dem gerenderten Markup

   Grund für diesen Abschnitt: Child-Theme und Stylesheet sind parallel
   entstanden und tragen unterschiedliche BEM-Namen. 75 Klassen aus
   doku/markup/gerendert.html hatten keine einzige Regel, deshalb standen
   Kopfzeile, Navigation, Logo, Musterzähler, Suche, Off-Canvas,
   Produktseite, Archiv und Vertrauensleiste roh im Dokument.

   Verbindlich war hier das gerenderte Markup, nicht der ältere Kontrakt in
   header.php. Wo Vorgabe und Markup auseinanderliefen, steht der Grund als
   Kommentar an der Regel.

   Es gelten dieselben Regeln wie im ganzen File: genau ein Radius (3px),
   Gold nie als Textfarbe auf hellem Grund, animiert werden ausschließlich
   transform und opacity, alle Abstände aus der Tivaos-Skala.

   14.1  Grundlagen: Kopfhöhe, Icons, Signet, Skip-Link, Sprungziel
   14.2  Kopfzeile: Leiste, Marke, Aktionen
   14.3  Logo
   14.4  Hauptnavigation
   14.5  Musterzähler
   14.6  Warenkorb in der Kopfzeile
   14.7  Suche
   14.8  Off-Canvas
   14.9  Breadcrumb
   14.10 Archiv-Kopf
   14.11 Vertrauensleiste
   14.12 Filter-Ergänzungen
   14.13 Dekor-Karte: Medienbereich
   14.14 Produktseite
   14.15 Media Queries zu Abschnitt 14
   14.16 Reduced Motion zu Abschnitt 14
   ========================================================================== */


/* --------------------------------------------------------------------------
   14.1  Grundlagen
   -------------------------------------------------------------------------- */

:root {
  /* Höhe der Kopfleiste. Wird von .fs-inhalt und vom Off-Canvas gelesen,
     damit das Sprungziel nicht unter der Sticky-Leiste verschwindet. */
  --fs-kopf-hoehe: 76px;
}

/* Body-Klasse aller Shop-Seiten. WooCommerce rendert Warenkorb, Archiv und
   Produkt außerhalb von .fs-sektion, dort stünden die Kontextfarben sonst
   auf dem Wert der zuletzt gesetzten Umgebung. */
.fs-ist-shop {
  --fs-flaeche: var(--fs-wollweiss);
  --fs-text: var(--fs-anthrazit);
  --fs-titel: var(--fs-navy);
  --fs-sekundaer: var(--fs-muted);
  --fs-kante: var(--fs-linie);
  --fs-fokus: var(--fs-navy);

  background-color: var(--fs-flaeche);
}

/* Sprungziel des Skip-Links. Ohne scroll-margin landet der Fokus hinter der
   Sticky-Kopfzeile. */
.fs-inhalt {
  display: block;
  scroll-margin-top: calc(var(--fs-kopf-hoehe) + var(--fs-s25));
}

/* Skip-Link.
   FEHLER, DER HIER BEHOBEN WIRD: .fs-skiplink hatte keine Regel und stand
   damit als sichtbarer Link im normalen Fluss über jeder Seite. Die alte
   .fs-skip-Regel greift nicht, weil das Markup .fs-skiplink schreibt.
   Verschoben wird per transform, nicht per top, damit die Bewegung unter
   die erlaubten Eigenschaften fällt. */
.fs-skiplink {
  position: absolute;
  left: var(--fs-s15);
  top: var(--fs-s15);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  padding: var(--fs-s10) var(--fs-s20);
  border-radius: var(--fs-radius);
  background-color: var(--fs-gold);
  color: var(--fs-navy);            /* Navy auf Gold: 6,93 */
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--fs-s25)));
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.fs-skiplink:focus,
.fs-skiplink:focus-visible { transform: translateY(0); }

/* --- Icon-Set, Strichstärke kommt aus dem Markup ------------------------- */
.fs-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  vertical-align: middle;
  pointer-events: none;
}

.fs-icon--suche,
.fs-icon--korb,
.fs-icon--menue,
.fs-icon--schliessen {
  width: 24px;
  height: 24px;
}

/* Der Haken steht im Fließtext und in Knöpfen, dort ist 24px zu groß */
.fs-icon--haken {
  width: 18px;
  height: 18px;
}

/* Jahresring-Signet als Inline-SVG. Die Kreise tragen stroke="currentColor",
   die Farbe kommt also über color vom Elternelement. Nie interaktiv. */
.fs-signet-svg {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   14.2  Kopfzeile
   -------------------------------------------------------------------------- */

/* Die Kopfzeile ist eine weiße Fläche mit einer Linie unten.
   Abschnitt 10 stellt .fs-header zusammen mit .fs-mobilnav und .fs-footer
   auf Navy. Das war vor dem gerenderten Markup richtig, ist es jetzt nicht
   mehr: das Markup setzt in der Kopfzeile durchgehend .fs-logo--auf-hell,
   also die Variante für hellen Grund mit Navy-Wortmarke. Auf Navy wäre die
   Marke unsichtbar. Überschrieben wird nur .fs-header, Footer und die alte
   Mobilnavigation behalten ihren Navy-Kontext. */
.fs-header {
  --fs-flaeche: var(--fs-weiss);
  --fs-text: var(--fs-anthrazit);
  --fs-titel: var(--fs-navy);
  --fs-sekundaer: var(--fs-muted);
  --fs-kante: var(--fs-linie);
  --fs-fokus: var(--fs-navy);

  background-color: var(--fs-weiss);
  color: var(--fs-navy);
  border-bottom: var(--fs-linie-staerke) solid var(--fs-linie);
}

/* Abschnitt 02 setzt den Fokusring in der Kopfzeile auf Gold. Das war für
   die Navy-Kopfzeile richtig. Auf Weiß hat Gold 2,32 und wäre als Fokus
   nicht erkennbar, deshalb hier zurück auf Navy. */
.fs-header :focus-visible { --fs-fokus: var(--fs-navy); }

.fs-header__leiste {
  display: flex;
  align-items: center;
  gap: var(--fs-s25);
  min-height: var(--fs-kopf-hoehe);
  padding-inline: var(--fs-rand);
}

.fs-header__marke {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Kein margin-left: auto in der Basis. Eine auto-Marge saugt den freien
   Raum der Leiste auf, bevor .fs-nav ihn bekommt: gemessen fehlten der
   Navigation dadurch 49px und sie brach um. Nach rechts geschoben werden
   die Aktionen erst unter 1024px, wenn die Navigation weg ist (14.15). */
.fs-header__aktionen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--fs-s5);
}

/* Icon-Knöpfe ohne Rahmen, Touch-Ziel 44px. Icons erben currentColor. */
.fs-header__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-s10);
  min-width: var(--fs-touch);
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s10);
  border: 0;
  border-radius: var(--fs-radius);
  background-color: transparent;
  background-image: none;
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  text-decoration: none;
  cursor: pointer;
}

/* Hover als Fläche, nicht als Farbwechsel: Gold-Dark als Textfarbe läge bei
   4,0 und damit unter der Grenze für 15px-Text. */
.fs-header__knopf:hover { background-color: var(--fs-navy-schleier); }

.fs-header__knopf--suche { flex: 0 0 auto; }
.fs-header__knopf--suche[aria-expanded="true"] { background-color: var(--fs-navy-schleier); }

.fs-header__knopftext {
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  white-space: nowrap;
}

/* Der Burger erscheint erst unter 1024px, siehe 14.15 */
.fs-header__burger { display: none; }


/* --------------------------------------------------------------------------
   14.3  Logo
   -------------------------------------------------------------------------- */

.fs-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s10);
  min-height: var(--fs-touch);
  color: var(--fs-navy);
  text-decoration: none;
}

/* Das Signet trägt die Goldfarbe über color, die Ringe im SVG lesen sie
   über stroke="currentColor" aus. */
.fs-logo__signet {
  flex: 0 0 auto;
  display: block;
  width: 40px;
  height: 40px;
  color: var(--fs-gold);
}

.fs-logo__ringe {
  width: 100%;
  height: 100%;
}

.fs-logo__wort {
  display: flex;
  flex-direction: column;
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 0.95;
  text-transform: uppercase;
}

.fs-logo__zeile { display: block; }

/* Die Sperrung setzt auch hinter den letzten Buchstaben eine Lücke. Ohne
   den negativen rechten Rand stünde die Wortmarke sichtbar außermittig. */
.fs-logo__zeile--eins,
.fs-logo__zeile--zwei { margin-right: -0.18em; }

/* Standardvariante auf hellem Grund */
.fs-logo--auf-hell { color: var(--fs-navy); }
.fs-logo--auf-hell .fs-logo__wort { color: var(--fs-navy); }
.fs-logo--auf-hell .fs-logo__signet { color: var(--fs-gold); }

/* Kleine Variante für das Off-Canvas */
.fs-logo--klein .fs-logo__signet { width: 32px; height: 32px; }
.fs-logo--klein .fs-logo__wort { font-size: 13px; }


/* --------------------------------------------------------------------------
   14.4  Hauptnavigation
   -------------------------------------------------------------------------- */

.fs-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Aufzählungspunkte und Innenabstand von ul aus Abschnitt 02 zurücknehmen */
.fs-nav__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fs-s25);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.fs-nav__liste li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-nav__liste a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  text-decoration: none;
  white-space: nowrap;
}

/* Gold-Unterstrich, der beim Hover von links wächst. Gold als Linie ist
   erlaubt, als Textfarbe auf Weiß nicht. */
.fs-nav__liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--fs-s10);
  height: 2px;
  background-color: var(--fs-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--fs-dauer) var(--fs-ease);
}

.fs-nav__liste a:hover::after,
.fs-nav__liste a:focus-visible::after,
.fs-nav__liste .current-menu-item > a::after,
.fs-nav__liste .current-menu-ancestor > a::after { transform: scaleX(1); }


/* --------------------------------------------------------------------------
   14.5  Musterzähler

   Das wichtigste Element der Kopfzeile, es führt in den Funnel. Die Zahl
   sitzt zentriert im Goldring, daneben steht die Beschriftung.
   -------------------------------------------------------------------------- */

.fs-musterzaehler {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s10);
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s10);
  border-radius: var(--fs-radius);
  color: var(--fs-navy);
  text-decoration: none;
}

.fs-musterzaehler:hover { background-color: var(--fs-gold-schleier); }

.fs-musterzaehler__ring {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 40px;
  height: 40px;
  color: var(--fs-gold);
}

.fs-musterzaehler__signet {
  display: block;
  width: 100%;
  height: 100%;
}

.fs-musterzaehler__zahl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fs-musterzaehler__text {
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  white-space: nowrap;
}

/* Gefüllter Zustand: die konzentrischen Kreise bekommen eine Goldfüllung,
   der äußerste Ring deckt die Fläche vollständig. Das SVG trägt fill="none"
   als Attribut, eine CSS-Deklaration schlägt das Präsentationsattribut.
   So bleibt es beim einen Radius, ein border-radius wird nicht gebraucht. */
.fs-musterzaehler--gefuellt .fs-musterzaehler__signet { fill: var(--fs-gold); }
.fs-musterzaehler--gefuellt .fs-musterzaehler__zahl { color: var(--fs-navy); }


/* --------------------------------------------------------------------------
   14.6  Warenkorb in der Kopfzeile
   -------------------------------------------------------------------------- */

/* .fs-warenkorb ist in Abschnitt 08 das zweispaltige Raster der
   Warenkorbseite. Im gerenderten Markup trägt aber ausschließlich der
   Verweis in der Kopfzeile diese Klasse, auf allen sechs erfassten Seiten.
   Das Seitenraster hätte den Verweis zu einem Grid mit 360px-Spalte
   gemacht. Die Regel wird deshalb nicht geändert, sondern in der Kopfzeile
   höher spezifiziert überstimmt. */
.fs-header .fs-warenkorb {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-s10);
  min-width: var(--fs-touch);
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s10);
  border-radius: var(--fs-radius);
  color: var(--fs-navy);
  text-decoration: none;
}

.fs-header .fs-warenkorb:hover { background-color: var(--fs-navy-schleier); }

.fs-warenkorb__icon { flex: 0 0 auto; }

.fs-warenkorb__text {
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  white-space: nowrap;
}

/* Zahl als Plakette oben rechts.
   Die Vorgabe nennt 18px rund. Das Manifest verbietet jeden Radius außer
   3px, und dieselbe Vorgabe wiederholt das als harte Regel. Umgesetzt ist
   deshalb 18px mit dem Projektradius, nicht als Kreis. */
.fs-warenkorb__zahl {
  position: absolute;
  top: var(--fs-s5);
  right: var(--fs-s5);
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--fs-s5);
  border-radius: var(--fs-radius);
  background-color: var(--fs-navy);
  color: var(--fs-weiss);            /* Weiß auf Navy: 16,09 */
  font-family: var(--fs-font-ui);
  font-size: var(--fs-label-gr);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   14.7  Suche

   Das Feld hängt unter der Kopfleiste und ist in Ruhe zugeklappt. Das
   Theme-Skript nimmt beim Öffnen das hidden-Attribut weg und setzt
   .fs-offen. Deshalb steht hier bewusst KEINE display-Deklaration: sonst
   überschriebe sie das hidden-Attribut und das Feld stünde ohne JavaScript
   im Accessibility-Baum.
   max-height wird nicht animiert, das wäre gegen die Motion-Regel.
   -------------------------------------------------------------------------- */

.fs-suche {
  max-height: 0;
  overflow: hidden;
  background-color: var(--fs-sand);
  border-bottom: var(--fs-linie-staerke) solid var(--fs-linie);
}

/* Kein Zahlenwert, damit nichts abgeschnitten werden kann, wenn der Knopf
   auf schmalen Geräten in die zweite Zeile rutscht. */
.fs-suche.fs-offen {
  max-height: none;
  overflow: visible;
}

.fs-suche__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s10);
  padding: var(--fs-s20) var(--fs-rand);
}

.fs-suche__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fs-suche__feld {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--fs-btn-hoehe);
  padding: 0 var(--fs-s15);
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
  color: var(--fs-anthrazit);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-text-gr);
  line-height: var(--fs-lh-eng);
}

.fs-suche__feld::placeholder {
  color: var(--fs-muted);
  opacity: 1;
}

/* Fokusring in Gold. Genommen wird Gold-Dark, das im Manifest als
   Gold-Rahmen auf hellem Grund geführt wird: reines Gold käme auf 2,32 und
   bliebe als Fokusanzeige unsichtbar. */
.fs-suche__feld:focus-visible {
  outline: 2px solid var(--fs-gold-dark);
  outline-offset: 2px;
  border-color: var(--fs-gold-dark);
}

.fs-suche__senden { flex: 0 0 auto; }


/* --------------------------------------------------------------------------
   14.8  Off-Canvas

   Panel von rechts. In Ruhe um die eigene Breite verschoben, offen auf 0.
   Auch hier keine display-Deklaration, damit das hidden-Attribut trägt.
   Höhe über dvh mit Prozent als Rückfall, vh ist auf Mobil verboten.
   -------------------------------------------------------------------------- */

.fs-offcanvas {
  --fs-flaeche: var(--fs-navy);
  --fs-text: var(--fs-hell-86);
  --fs-titel: var(--fs-weiss);
  --fs-sekundaer: var(--fs-hell-66);
  --fs-kante: var(--fs-hell-16);
  --fs-fokus: var(--fs-gold);

  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;            /* über Kopfzeile (100) und Verdunkelung (110) */
  display: flex;
  flex-direction: column;
  width: min(360px, 88vw);
  height: 100%;            /* Rückfall für Browser ohne dvh */
  height: 100dvh;
  overflow-y: auto;
  background-color: var(--fs-navy);
  color: var(--fs-hell-86);
  transform: translateX(100%);
  transition: transform var(--fs-dauer-lang) var(--fs-ease);
}

.fs-offcanvas.fs-offen { transform: translateX(0); }

/* Verdunkelung. Das Markup hat kein eigenes Element dafür, das Skript setzt
   .fs-menue-offen an den Body.
   pointer-events bleibt aus: das Skript schließt über den Knopf und Escape,
   eine klickbare Fläche ohne eigenen Schließ-Handler würde die Bedienung
   blockieren statt sie zu erleichtern. */
body.fs-menue-offen { overflow: hidden; }

body.fs-menue-offen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 110;
  background-color: var(--fs-navy);
  opacity: .55;
  pointer-events: none;
}

.fs-offcanvas__kopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-s15);
  min-height: var(--fs-kopf-hoehe);
  padding: var(--fs-s15) var(--fs-s20);
  border-bottom: var(--fs-linie-staerke) solid var(--fs-hell-16);
}

/* Das Markup setzt im Off-Canvas .fs-logo--auf-hell, also die Variante für
   hellen Grund, obwohl das Panel auf Navy steht. Die Wortmarke bliebe damit
   Navy auf Navy und wäre unsichtbar. Hier gilt der Kontext des Panels. */
.fs-offcanvas .fs-logo { color: var(--fs-weiss); }
.fs-offcanvas .fs-logo__wort { color: var(--fs-weiss); }
.fs-offcanvas .fs-logo__signet { color: var(--fs-gold); }

.fs-offcanvas__schliessen {
  flex: 0 0 auto;
  min-width: var(--fs-touch);
  min-height: var(--fs-touch);
  color: var(--fs-weiss);
}

.fs-offcanvas__schliessen:hover { background-color: var(--fs-hell-16); }

.fs-offcanvas__nav {
  flex: 1 1 auto;
  padding: var(--fs-s10) 0;
}

.fs-offcanvas__liste {
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.fs-offcanvas__liste li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-offcanvas__liste li + li { border-top: var(--fs-linie-staerke) solid var(--fs-hell-16); }

.fs-offcanvas__liste a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--fs-s20);
  color: var(--fs-hell-86);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-text-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
  text-decoration: none;
}

.fs-offcanvas__liste a:hover {
  background-color: var(--fs-hell-16);
  color: var(--fs-weiss);
}

.fs-offcanvas__fuss {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--fs-s10);
  padding: var(--fs-s20);
  border-top: var(--fs-linie-staerke) solid var(--fs-hell-16);
}

.fs-offcanvas__muster { width: 100%; }

.fs-offcanvas__hinweis {
  margin: 0;
  max-width: none;
  color: var(--fs-hell-66);        /* 8,1 auf Navy */
  font-size: var(--fs-text-gr);    /* mindestens 16px, das Panel ist mobil */
  line-height: var(--fs-lh-eng);
}


/* --------------------------------------------------------------------------
   14.9  Breadcrumb

   Der aktuelle Eintrag steht im Markup als nackter Textknoten im nav, ohne
   eigenes Element. Deshalb trägt der Container die Navy-Farbe des aktuellen
   Eintrags und die Verweise werden auf Muted zurückgenommen.
   -------------------------------------------------------------------------- */

.fs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s5);
  margin: 0 0 var(--fs-s15);
  max-width: none;
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-label-gr);
  line-height: var(--fs-lh-eng);
}

.fs-breadcrumb a {
  color: var(--fs-muted);          /* 5,92 auf Wollweiß */
  text-decoration: none;
}

.fs-breadcrumb a:hover {
  color: var(--fs-navy);
  text-decoration: underline;
}

/* Trenner in Gold. Gold-Dark statt Gold, weil der Trenner auf hellem Grund
   steht: reines Gold läge bei 2,32. */
.fs-breadcrumb__trenner {
  color: var(--fs-gold-dark);
  user-select: none;
}


/* --------------------------------------------------------------------------
   14.10  Archiv-Kopf
   -------------------------------------------------------------------------- */

/* flow-root hält die Außenabstände von Kopf und Produktraster innerhalb der
   Sektion, sonst fällt der obere Rand des Kopfes aus dem Block heraus. */
.fs-archiv { display: flow-root; }

.fs-archiv__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fs-s15);
  margin-bottom: var(--fs-s40);
}

.fs-archiv__label { margin: 0; }

/* Keine ch-Grenze an der H1: ch skaliert mit der eigenen Schriftgroesse,
   62ch waeren bei 52px gemessene 2189px und begrenzten damit gar nichts.
   Den Umbruch der Ueberschrift regelt text-wrap: balance aus Abschnitt 02.
   Die Zeichengrenze der Vorgabe gilt dem Einleitungstext darunter. */
.fs-archiv__titel { margin: 0; }

/* Einleitungstext auf 62 Zeichen begrenzt */
.fs-archiv__text {
  max-width: var(--fs-mass-erzaehl);
  color: var(--fs-text);
}

.fs-archiv__text > :last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   14.11  Vertrauensleiste
   -------------------------------------------------------------------------- */

.fs-vertrauen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-s25);
  margin: 0;
  padding: var(--fs-s20) 0;
  max-width: none;
  list-style: none;
  border-top: var(--fs-linie-staerke) solid var(--fs-kante);
  border-bottom: var(--fs-linie-staerke) solid var(--fs-kante);
}

.fs-vertrauen__punkt {
  display: flex;
  align-items: center;
  gap: var(--fs-s10);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fs-titel);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
}

/* Icon in Gold. Gold-Dark, weil auch grafische Elemente auf hellem Grund
   3:1 erreichen müssen und reines Gold dort bei 2,32 liegt. */
.fs-vertrauen__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--fs-gold-dark);
}

/* Im Archiv-Kopf steht die Leiste unter der H1 und trägt drei Punkte. Dort
   ist eine umbrechende Reihe richtig, kein Vierer-Raster mit Doppellinie. */
.fs-vertrauen--archiv {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s10) var(--fs-s25);
  padding: 0;
  border: 0;
}


/* --------------------------------------------------------------------------
   14.12  Filter-Ergänzungen

   Reihe, Chips und aktiver Zustand stehen im Plugin-Stylesheet
   (floorselect-muster/assets/css/musterbox.css). Hier fehlen nur die beiden
   Gruppen-Varianten und die Beschriftung im Chip. Bewusst ohne Regeln, die
   mit dem Plugin um dieselben Eigenschaften stritten.
   -------------------------------------------------------------------------- */

.fs-filter--optik,
.fs-filter--kollektion {
  flex: 1 1 auto;
  min-width: 0;
}

/* Die Beschriftung darf nicht umbrechen, sonst wird der Chip zweizeilig und
   verliert die Höhe der Reihe. */
.fs-filter__name { white-space: nowrap; }


/* --------------------------------------------------------------------------
   14.13  Dekor-Karte: Medienbereich

   Abschnitt 08 erwartet Bild und Materialstreifen als direkte Kinder von
   .fs-dekor. Im gerenderten Markup liegen beide in .fs-dekor__medien.
   Die Klassenregeln greifen weiterhin, die Hülle braucht nur ihre eigene.
   -------------------------------------------------------------------------- */

.fs-dekor__medien {
  position: relative;
  flex: 0 0 auto;
  display: block;
}

/* Das Raumbild im Verhältnis 4:3, den Rahmen stellt .fs-dekor__bild */
.fs-dekor__raum {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Im gerenderten Markup ist .fs-dekor__details der sekundäre Details-Knopf
   der Karte (a.fs-btn-sekundaer.fs-dekor__details), nicht ein Textbereich.
   Der Textbereich der Karte heißt .fs-dekor__inhalt und hat seine Regel
   bereits in Abschnitt 08. */
.fs-dekor__details {
  flex: 1 1 130px;
  white-space: nowrap;
}

/* Der Text im Muster-Knopf wechselt zwischen drei Beschriftungen. Er darf
   schrumpfen, damit der Haken daneben nicht aus dem Knopf gedrückt wird. */
.fs-muster-btn__text {
  flex: 0 1 auto;
  min-width: 0;
}


/* --------------------------------------------------------------------------
   14.14  Produktseite
   -------------------------------------------------------------------------- */

.fs-produktseite { display: flow-root; }

.fs-produktseite__pfad {
  padding-block: var(--fs-s20) 0;
  padding-inline: var(--fs-rand);
}

/* Abschnitt 08 macht .fs-produkt zum zweispaltigen Raster. Gegen das
   gerenderte Markup ist das falsch: die Kinder von .fs-produkt sind
   vollbreite Sektionen (.fs-produkt__oben und die Blöcke darunter), die
   beiden Spalten liegen eine Ebene tiefer in .fs-produkt__raster. Als
   Raster würden die Sektionen zu Spalten. Die alte Regel bleibt stehen und
   wird hier neutralisiert, damit der Diff klein und nachlesbar bleibt. */
.fs-produkt { display: block; }

/* Der Pfad darüber bringt bereits Luft, deshalb hier kein zweites Polster */
.fs-produkt__oben { padding-top: var(--fs-s20); }

/* Einspaltig bis 900px, darüber Galerie und Kaufbereich nebeneinander */
.fs-produkt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-s50);
  align-items: start;
}

.fs-produkt__kauf {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s20);
  min-width: 0;
}

/* Label direkt über der Überschrift, ohne die 20px Lücke des Kaufbereichs */
.fs-produkt__kollektion { margin: 0 0 calc(var(--fs-s20) * -1 + var(--fs-s5)); }

.fs-kurzfakten {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s5);
  margin: var(--fs-s15) 0 0;
  padding: 0;
  max-width: var(--fs-mass);
  list-style: none;
}

.fs-kurzfakten li {
  position: relative;
  margin: 0;
  padding-left: var(--fs-s25);
  list-style: none;
  color: var(--fs-text);
  font-size: var(--fs-text-gr);
  line-height: var(--fs-lh-eng);
}

/* Kleiner Gold-Haken aus zwei Kanten, kein Bild und kein neuer Farbwert.
   Gold-Dark, weil der Haken auf hellem Grund steht. Die Drehung ist ein
   fester Zustand, keine Animation. */
.fs-kurzfakten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--fs-gold-dark);
  border-bottom: 2px solid var(--fs-gold-dark);
  transform: rotate(-45deg);
}

/* Sandkasten mit Goldkante links, nennt die Musterregel */
.fs-produkt__musterhinweis {
  margin: 0;
  max-width: none;
  padding: var(--fs-s15) var(--fs-s20);
  background-color: var(--fs-sand);
  border-left: 3px solid var(--fs-gold);
  border-radius: 0 var(--fs-radius) var(--fs-radius) 0;
  color: var(--fs-anthrazit);      /* 15,3 auf Sand */
  font-size: var(--fs-text-gr);
  line-height: var(--fs-lh-eng);
}


/* --------------------------------------------------------------------------
   14.15  Media Queries zu Abschnitt 14
   -------------------------------------------------------------------------- */

/* Produktseite: zweispaltig ab 900px, Galerie etwa 55 Prozent */
@media (min-width: 900px) {

  .fs-produkt__raster { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
}

/* --- Desktop ab 1025px: Kopfzeile einzeilig halten ----------------------
   Gemessen am gerenderten Menue bei 1280px Viewport: die acht Punkte
   brauchen mit gap 25px zusammen 853px, das Logo 122px, die Aktionen mit
   allen Beschriftungen 446px. Das sind 1421px bei einem Container von
   1240px. Die Navigation braeche also auf JEDER Desktop-Breite um und die
   Leiste waere 113px statt 76px hoch.
   Deshalb ruecken hier die Abstaende auf 15px zusammen und Suche und
   Warenkorb stehen nur als Icon. Der Musterzaehler behaelt seinen Text,
   er ist der Funnel und laut Vorgabe erst unter 1024px stumm.
   Gemessen wurde in drei Schritten: mit gap 25px fehlten der Navigation
   231px, nach dem Entfernen der auto-Marge und mit gap 15px noch 11px,
   mit gap 10px passt sie mit rund 24px Luft in eine Zeile.

   OFFEN, Entscheidung fuer den Kunden: die Vorgabe nennt fuer die
   Navigation 25px Abstand. Mit acht Punkten und diesen Beschriftungen ist
   das bei einem Container von 1240px rechnerisch nicht erreichbar, auf
   keiner Bildschirmbreite, weil der Container gedeckelt ist. Umgesetzt
   sind deshalb 10px. Robuster waeren kuerzere Labels (etwa "So geht es"
   statt "So funktioniert es"), weniger Menuepunkte oder ein hoeherer
   Umschaltpunkt zum Off-Canvas als 1024px. Das ist eine Entscheidung
   ueber den Inhalt, nicht ueber das Stylesheet. */
@media (min-width: 1025px) {

  .fs-header__leiste { gap: var(--fs-s10); }
  .fs-nav__liste { gap: var(--fs-s10); }

  /* Der Musterzaehler behaelt seinen Text, wird aber kompakter gesetzt */
  .fs-musterzaehler { gap: var(--fs-s5); padding-inline: var(--fs-s5); }

  /* Nur fuer Screenreader, nicht display: none: sonst verloeren die
     Knoepfe ihren zugaenglichen Namen. */
  .fs-header__knopf--suche .fs-header__knopftext,
  .fs-warenkorb__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .fs-header__knopf--suche,
  .fs-header .fs-warenkorb { gap: 0; }
}

/* --- Tablet und darunter, bis 1024px ------------------------------------ */
@media (max-width: 1024px) {

  :root { --fs-kopf-hoehe: 64px; }

  /* Hauptnavigation aus, Off-Canvas übernimmt */
  .fs-nav { display: none; }
  .fs-header__burger { display: inline-flex; }

  /* Erst jetzt nach rechts: ohne Navigation klebten die Aktionen am Logo */
  .fs-header__aktionen { margin-left: auto; }

  /* Beschriftungen der Icon-Knöpfe nur noch für Screenreader.
     Bewusst visually-hidden statt display: none, sonst verlören die Knöpfe
     ihren zugänglichen Namen. */
  .fs-header__knopftext,
  .fs-warenkorb__text,
  .fs-musterzaehler__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Ohne Beschriftung braucht der Knopf keinen Zwischenraum mehr */
  .fs-header__knopf,
  .fs-header .fs-warenkorb,
  .fs-musterzaehler { gap: 0; }

  /* Der Ring bleibt immer sichtbar, er ist der Einstieg in den Funnel */
  .fs-musterzaehler__ring { width: 36px; height: 36px; }

  .fs-header__leiste { gap: var(--fs-s15); }

  .fs-logo__signet { width: 34px; height: 34px; }
}

/* --- Mobil, bis 767px --------------------------------------------------- */
@media (max-width: 767px) {

  /* Zweispaltig, nicht einspaltig: vier kurze Punkte untereinander füllten
     sonst die halbe Seite. */
  .fs-vertrauen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-s15);
  }

  .fs-vertrauen__punkt { align-items: flex-start; }

  .fs-vertrauen--archiv { gap: var(--fs-s10) var(--fs-s20); }

  .fs-archiv__kopf { margin-bottom: var(--fs-s30); }

  .fs-produkt__raster { gap: var(--fs-s30); }

  .fs-suche__form { padding: var(--fs-s15) var(--fs-rand); }
  .fs-suche__senden { width: 100%; }

  .fs-logo__wort { font-size: 13px; }
  .fs-logo__signet { width: 32px; height: 32px; }
}


/* --------------------------------------------------------------------------
   14.16  Reduced Motion zu Abschnitt 14

   Die Wildcard in Abschnitt 13 setzt bereits jede transition auf 1ms, damit
   greift sie auch für alles hier. Ergänzt wird nur, was darüber hinausgeht.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .fs-skiplink,
  .fs-nav__liste a::after,
  .fs-offcanvas { transition: none; }

  /* Ausdrücklich KEIN transform: none für .fs-offcanvas und .fs-skiplink.
     Die Verschiebung ist dort der geschlossene beziehungsweise versteckte
     Zustand und keine Animation. Ein transform: none würde das Panel und
     den Skip-Link dauerhaft sichtbar machen. Abschnitt 13 macht genau das
     mit der alten .fs-mobilnav, deshalb steht der Hinweis hier. */
}

/* ==========================================================================
   Preisangabe nach PAngV
   --------------------------------------------------------------------------
   Boden wird nur in ganzen Paketen verkauft. Damit ist der Quadratmeterpreis
   der Grundpreis und der Paketpreis der Gesamtpreis der Verkaufseinheit.
   Beide muessen dort erkennbar sein, wo der Boden angeboten wird, dazu der
   Hinweis auf Steuer und Versandkosten.

   Ohne diese Regeln erben Paketzeile und Hinweis die 28px fett des
   Preis-Containers und laufen inline hinter dem Preis her. Genau das hat die
   Dekor-Karte am 31.08.2026 auf 762px Hoehe aufgeblaeht.
   ========================================================================== */

.fs-preis__zeile {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--fs-s5);
  line-height: 1.15;
}

.fs-preis__wert {
  font-size: var(--fs-preis-gr);
  font-weight: 700;
  color: var(--fs-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.fs-preis__paket,
.fs-preis__hinweis {
  display: block;
  font-size: var(--fs-klein-gr);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fs-muted);
  letter-spacing: 0;
}

.fs-preis__paket {
  margin-top: var(--fs-s5);
  font-variant-numeric: tabular-nums;
}

.fs-preis__hinweis {
  margin-top: 2px;
  font-size: 0.8125rem;
}

.fs-preis__hinweis a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fs-preis__hinweis a:hover,
.fs-preis__hinweis a:focus-visible {
  color: var(--fs-navy);
}

/* Der Preisblock selbst gibt keine Schriftgroesse mehr an die Kinder weiter. */
.fs-dekor__preis,
.fs-produkt__preisblock .price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: inherit;
  font-weight: 400;
}

.fs-preis-alt {
  font-size: var(--fs-klein-gr);
  font-weight: 400;
  color: var(--fs-muted);
}

/* ==========================================================================
   Kopfzeile, endgueltige Fassung
   --------------------------------------------------------------------------
   In dieser Datei standen zwei Kopfzeilen gegeneinander: eine fruehere in Navy
   und eine spaetere in Weiss. Der Hintergrund kam von der spaeteren Regel, die
   Textfarben aber aus dem Navy-Block. Ergebnis waren weisse Navigationslinks
   auf weissem Grund, Kontrast 1,05:1, also unsichtbar. Am 31.08.2026 im
   Browser gemessen.

   Verbindlich ist die helle Kopfzeile: weisse Flaeche, Navy-Text, Goldakzent.
   Das passt zum Logo auf hellem Grund (Navy-Schrift, Gold-Signet) und laesst
   den Gold-Muster-Button im Kopf als einziges farbiges Element wirken.
   Die lokalen Tokens werden hier zurueckgesetzt, damit alles darin erbt.
   ========================================================================== */

.fs-header {
  --fs-flaeche:   var(--fs-weiss);
  --fs-text:      var(--fs-anthrazit);
  --fs-titel:     var(--fs-navy);
  --fs-sekundaer: var(--fs-muted);
  --fs-kante:     var(--fs-linie);
  --fs-fokus:     var(--fs-gold-dark);

  background-color: var(--fs-weiss);
  color: var(--fs-anthrazit);
  border-bottom: 1px solid var(--fs-linie);
}

.fs-header__nav a,
.fs-header__nav .current-menu-item > a,
.fs-header__nav a[aria-current="page"] {
  color: var(--fs-navy);
}

.fs-header__nav a:hover,
.fs-header__nav a:focus-visible {
  color: var(--fs-navy);
}

/* Der Gold-Unterstrich waechst beim Hover von links. Er ersetzt die
   Farbaenderung, die auf hellem Grund keinen Kontrastgewinn brachte. */
.fs-header__nav a::after {
  background-color: var(--fs-gold);
}

.fs-header__knopf,
.fs-header__burger,
.fs-header .fs-warenkorb,
.fs-header__warenkorb,
.fs-header__muster {
  color: var(--fs-navy);
}

.fs-header__muster-text,
.fs-header__knopftext {
  color: var(--fs-muted);
}

/* Der Musterzaehler ist der Weg in den Funnel und darf sich abheben. */
.fs-header__muster {
  border: 1px solid var(--fs-linie);
  border-radius: var(--fs-radius);
  padding: 0 var(--fs-s15);
}

.fs-header__muster.is-voll,
.fs-header__muster.ist-gefuellt {
  background-color: var(--fs-gold);
  border-color: var(--fs-gold);
  color: var(--fs-navy);
}

.fs-header__muster.is-voll .fs-header__muster-text,
.fs-header__muster.ist-gefuellt .fs-header__muster-text {
  color: var(--fs-navy);
}

/* --------------------------------------------------------------------------
   Kopfzeile: die Zeile muss passen
   Gemessen am 31.08.2026: bei 1265px Fensterbreite lief die Kopfzeile um 224px
   über den Viewport hinaus. Die Navigation belegte 965px, Logo und Aktionen
   wurden nach rechts hinausgedrängt. body{overflow-x:clip} verdeckte das nur.

   Drei Massnahmen: die Navigation darf schrumpfen, die Vollnavigation
   erscheint erst ab 1200px, und der Text neben dem Musterzähler entfällt auf
   schmalen Fenstern. Die Zahl im Zähler bleibt immer sichtbar, sie ist der
   Weg in den Funnel.
   -------------------------------------------------------------------------- */

.fs-header__innen {
  flex-wrap: nowrap;
  gap: var(--fs-s20);
}

.fs-header__logo { flex: 0 0 auto; }

.fs-header__nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.fs-header__nav ul {
  flex-wrap: nowrap;
  gap: var(--fs-s5);
  min-width: 0;
}

.fs-header__nav a {
  white-space: nowrap;
  padding-inline: var(--fs-s10);
}

.fs-header__aktionen,
.fs-header__innen > .fs-header__muster,
.fs-header__innen > .fs-header__warenkorb {
  flex: 0 0 auto;
}

/* Zwischen 1024 und 1200px reicht der Platz für acht Menüpunkte nicht.
   Dort greift das Off-Canvas, das es ohnehin gibt. */
@media (max-width: 1199px) {
  .fs-header__nav { display: none; }
  .fs-header__burger { display: inline-flex; }
}

@media (max-width: 1399px) {
  .fs-header__muster-text { display: none; }
  .fs-header__muster { padding-inline: var(--fs-s10); }
}

/* --------------------------------------------------------------------------
   Logo auf dunklem Grund
   Der Footer setzt .fs-logo--auf-navy, für die Variante gab es keine einzige
   Regel. Ergebnis war Navy-Schrift auf Navy-Fläche, Kontrast 1,00:1, also ein
   unsichtbares Logo im Footer. Am 31.08.2026 im Seitencheck gemessen.
   Vorgabe aus dem Brand Guide: auf dunklem Grund Weiss plus Gold.
   -------------------------------------------------------------------------- */

.fs-logo--auf-navy,
.fs-logo--auf-navy .fs-logo__wort,
.fs-logo--auf-navy .fs-logo__zeile {
  color: var(--fs-weiss);
}

.fs-logo--auf-navy .fs-logo__signet { color: var(--fs-gold); }
.fs-logo--auf-navy .fs-logo__claim  { color: var(--fs-gold); }


/* ==========================================================================
   15  Nachtrag: Seitencheck vom 31.08.2026
   --------------------------------------------------------------------------
   Alles in diesem Abschnitt ist am gerenderten Ergebnis gemessen, nicht
   geschätzt. Jede Regel nennt den Messwert und den Sollwert. Der Block steht
   am Ende der Datei, damit er ohne Spezifitätstricks gegen die früheren
   Abschnitte gewinnt.

   15.1  Zeilenlänge: ch ist nicht Zeichen
   15.2  Fließtext unter 16px auf Mobil
   15.3  Bedienelemente unter 44px
   15.4  Waagerechter Überlauf: das Signet ragt hinaus
   15.5  Produktraster: WooCommerce zwängt Grid-Kacheln auf 48 Prozent
   15.6  Warenkorb: Rand zum Display
   15.7  Akkordeon-Titel: Zeilenhöhe bei umbrechendem Text
   ========================================================================== */


/* --------------------------------------------------------------------------
   15.1  Zeilenlänge: ch ist nicht Zeichen

   Das Manifest verlangt höchstens 68 Zeichen je Zeile. Die Tokens setzten
   dafür 68ch. Ein ch ist aber die Laufweite der Ziffer 0, in Montserrat
   0,66em, während ein durchschnittliches Zeichen deutschen Fließtextes nur
   0,51em misst. Gemessen am 31.08.2026 auf der Startseite: 68ch ergaben 85
   bis 92 Zeichen je Zeile, 62ch beim Lora-Erzähltext 81 Zeichen.

   Die Tokens bekommen deshalb die Werte, die tatsächlich unter 80 Zeichen
   bleiben. Gerechnet mit dem breitesten gemessenen Absatz, damit keiner knapp
   darüber liegt.
   -------------------------------------------------------------------------- */

:root {
  --fs-mass:         54ch;   /* Montserrat, gemessen rund 70 Zeichen */
  --fs-mass-erzaehl: 52ch;   /* Lora, gemessen rund 68 Zeichen */
  --fs-mass-hinweis: 58ch;   /* Kleingedrucktes, gemessen rund 75 Zeichen */
}

/* Fußzeilen-Hinweise dürfen etwas länger laufen. Sie sind Kleingedrucktes
   und keine Lesestrecke. Gemessen 87 und 89 Zeichen. */
.fs-footer__hinweis { max-width: var(--fs-mass-hinweis); }

/* Elementor zentriert drei Textblöcke über text-align auf dem Widget selbst,
   ohne dabei eine Klasse zu setzen, an der man das im CSS erkennen könnte.
   Mit der schmaleren Zeilenlänge muss der Absatz dort auch mittig stehen,
   sonst klebt zentrierter Text am linken Rand. Die IDs stehen fest in
   elementor/so-funktionierts.json, ueber-uns.json und
   versand-und-lieferung.json. */
.elementor-element-e50001f p,
.elementor-element-e50011d p,
.elementor-element-e500219 p { margin-inline: auto; }


/* --------------------------------------------------------------------------
   15.2  Fließtext unter 16px auf Mobil

   Die Musterhinweise sind ganze Sätze, keine Labels. Das Manifest lässt 13px
   nur für Label und Meta zu, Fließtext beginnt bei 16px. Gemessen 14px auf
   Archiv, Produktseite und im leeren Warenkorb.
   -------------------------------------------------------------------------- */

p.fs-meta,
.fs-produkt__muster-text { font-size: var(--fs-text-gr); }


/* --------------------------------------------------------------------------
   15.3  Bedienelemente unter 44px
   -------------------------------------------------------------------------- */

/* Der Burger stand mit 28x44px in der Leiste. Er trägt zwar width:44px,
   schrumpft aber als Flex-Element: Logo, Suche, Zähler und Warenkorb
   brauchten mit 20px Abstand genau 16px mehr, als die Zeile hergab. Kleinerer
   Abstand und flex-shrink:0 lösen beides. Gemessen bei 390px Viewport:
   106 + 44 + 33 + 59 + 44 = 286px Inhalt, dazu vier Abstände zu 10px, macht
   326px in einer 350px breiten Zeile. */
/* Zugleich eine Lücke ohne jede Navigation: Abschnitt 14.15 blendet die
   Hauptnavigation schon ab 1199px aus und will dafür .fs-header__burger
   einblenden. Diese Klasse kommt im Markup nicht vor, der Knopf heißt dort
   .fs-burger und erschien erst ab 1024px. Zwischen 1025 und 1199px stand
   deshalb beides auf display:none. Am 31.08.2026 bei 1085px gemessen: kein
   Menü und kein Burger auf der Seite.

   Die automatische Marge wandert vom Burger auf die erste Aktion, sonst
   klebten Suche, Zähler und Warenkorb am Logo und nur der Burger stünde
   rechts. */
@media (max-width: 1199px) {

  .fs-header .fs-header__innen > .fs-header__suche-schalter { margin-left: auto; }

  .fs-header .fs-burger {
    display: grid;
    flex: 0 0 auto;
    width: var(--fs-touch);
    height: var(--fs-touch);
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  .fs-header .fs-header__innen { gap: var(--fs-s10); }
}

/* Und der Knopf war überhaupt nicht zu sehen: Abschnitt 05 färbt die drei
   Striche weiß, das war für die alte Navy-Kopfzeile richtig. Seit Abschnitt
   14.2 ist die Kopfzeile weiß. Am 31.08.2026 gemessen: Strich #FFFFFF auf
   Fläche #FFFFFF. Der Seitencheck findet das nicht, er misst nur Textfarben.
   Bei geöffnetem Menü bleibt es richtig: die Kopfzeile liegt mit z-index 100
   über der Mobilnavigation mit 99, der Knopf steht also weiter auf Weiß. */
.fs-header .fs-burger__strich,
.fs-header .fs-burger__strich::before,
.fs-header .fs-burger__strich::after {
  background-color: var(--fs-navy);
}

/* Die Mengenknöpfe sind auf 44px gesetzt, schrumpften im Flex-Block aber auf
   39px. Gemessen auf der Produktseite. */
.fs-menge__knopf { flex: 0 0 auto; }

/* Fußzeilen-Links: "Kasse" maß 40x44px. Die Trefferfläche muss in beiden
   Richtungen 44px erreichen, der Text bleibt linksbündig. */
.fs-footer__liste a {
  min-width: var(--fs-touch);
  justify-content: flex-start;
}

/* Kleine Inline-Links. Senkrechtes Padding vergrößert das Rechteck, ohne die
   Zeile zu verschieben: bei Inline-Elementen wirken senkrechte Innenabstände
   nicht auf die Zeilenhöhe. Gemessen 17 bis 29px Höhe, Vorgabe 44px. 14px
   oben und unten heben auch die flachste dieser Zeilen über 44px.

   Der Goldstrich der Textlinks liegt am unteren Rand der Polsterbox und würde
   mit dem Padding nach unten wandern. Seine Position wird deshalb um denselben
   Betrag zurückgesetzt und sitzt weiter direkt unter dem Text. */
@media (max-width: 767px) {

  .fs-breadcrumb a,
  .fs-preis__hinweis a,
  .product_meta a,
  .fs-dekor__name a,
  .fs-dekorkarte__name a,
  .fs-musterkarte__name a,
  .fs-sektion :where(p, li, .fs-erzaehl, .fs-lead) a,
  a.fs-link,
  /* Nicht jeder Elementor-Textblock steht in einer .fs-sektion: der
     E-Mail-Link auf der Kontaktseite sitzt in einer .fs-karte und maß
     deshalb weiter 184x22px. */
  .elementor-widget-text-editor a,
  .elementor-field-subgroup label a { padding-block: 14px; }

  .fs-sektion :where(p, li, .fs-erzaehl, .fs-lead) a,
  a.fs-link { background-position: 0 calc(100% - 14px); }

  /* Kurze Dekornamen sind auch zu schmal: "Mila" maß 34px. Das Padding
     verbreitert die Trefferfläche, die gleich große negative Marge schiebt sie
     zurück, damit der Name an derselben Stelle steht wie vorher. Gemessen nach
     der Änderung: 46 bis 83px breit statt vorher 34 bis 46px. */
  .fs-dekor__name a,
  .fs-dekorkarte__name a,
  .fs-musterkarte__name a {
    padding-inline: 6px;
    margin-inline: -6px;

    /* Die Kachel ist ein li, deshalb greift der Goldstrich aus Abschnitt 02
       auch hier. Er ist 100 Prozent der Polsterbox breit und wäre mit dem
       neuen Padding 12px länger als der Name. Breite und Anfang werden um
       genau dieses Padding zurückgenommen. */
    background-size: calc(100% - 12px) 1px;
    background-position: 6px calc(100% - 14px);
  }
}

/* Elementor-Formularfelder. Das Auswahlfeld auf der Kontaktseite maß 42px.
   Elementors Kit-CSS lädt nach design.css, deshalb hier über das Widget mit
   zwei Klassen statt über .elementor-field-textual allein. */
.elementor-widget-form .elementor-field-textual,
.elementor-widget-form select.elementor-field-textual {
  min-height: var(--fs-touch);
}

/* Der Zustimmungshaken maß 13x13px und verletzt damit WCAG 2.2 AA. 24px ist
   das dort geforderte Minimum. Größer würde das Kästchen das Formular optisch
   beherrschen, die 44px der Tivaos-Vorgabe trägt das Label daneben. */
.elementor-field-subgroup input[type="checkbox"],
.elementor-field-type-acceptance input[type="checkbox"] {
  width: 24px;
  height: 24px;
}


/* --------------------------------------------------------------------------
   15.4  Waagerechter Überlauf: das Signet ragt hinaus

   Gemessen am 31.08.2026 auf /vinylboden/ und /produkt-kategorie/holzoptik/:
   80px zu breit bei 1440px, 91px zu breit bei 390px. Kein Element ragte über
   die Kante, der Verursacher ist das Pseudo-Element .fs-signet::before mit
   right:-80px am Desktop und right:-90px auf Mobil.

   body{overflow-x:clip} verdeckt das nur optisch, die Seite scrollt trotzdem.
   Geklemmt wird deshalb in der Sektion selbst. overflow-x:clip und nicht
   hidden, weil clip keinen Scrollbereich anlegt und position:sticky in der
   Sektion dadurch weiter am Viewport hängt. Sichtbar ändert sich nichts: an
   derselben Stelle klemmte vorher schon der Body.
   -------------------------------------------------------------------------- */

.fs-signet { overflow-x: clip; }


/* --------------------------------------------------------------------------
   15.5  Produktraster: WooCommerce zwängt Grid-Kacheln auf 48 Prozent

   woocommerce-smallscreen.css setzt unter 768px auf
   .woocommerce ul.products[class*=columns-] li.product die Werte width:48%
   und float:left und gewinnt mit vier Klassen gegen die drei des Themes in
   Abschnitt 08. Gemessen am 31.08.2026 bei 390px: das Raster stellte zwei
   Spalten zu 165px, jede Kachel blieb aber 79px breit und ihr Inhalt lief
   97px heraus.

   Gleiche Spezifität genügt, design.css lädt nach woocommerce-smallscreen.css.
   -------------------------------------------------------------------------- */

.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  width: auto;
  float: none;
  clear: none;
  margin: 0;
}


/* --------------------------------------------------------------------------
   15.6  Warenkorb: Rand zum Display

   Der Warenkorb rendert ohne .fs-sektion und ohne .fs-container, dadurch stand
   die Woo-Meldung "Dein Warenkorb ist derzeit leer" mit 0px am linken
   Displayrand. Vorgabe sind mindestens 16px.
   -------------------------------------------------------------------------- */

.woocommerce-cart .fs-inhalt > .woocommerce {
  padding-inline: var(--fs-rand);
}


/* --------------------------------------------------------------------------
   15.7  Akkordeon-Titel: Zeilenhöhe bei umbrechendem Text

   Die Titel im Elementor-Akkordeon sind ganze Fragen und brechen um. Als H3
   erben sie die 1,3 aus dem Manifest, die für kurze Überschriften gedacht ist.
   Bei umbrechendem Fließtext ist 1,4 die Untergrenze im ganzen Projekt.
   Gemessen auf der Startseite und auf /klickvinyl/.
   -------------------------------------------------------------------------- */

.fs-faq .e-n-accordion-item-title-text { line-height: var(--fs-lh-eng); }