/* ==========================================================================
   Floor Select - Korrekturen
   --------------------------------------------------------------------------
   Diese Datei wird NACH design.css geladen und enthält gezielte Korrekturen,
   die am gerenderten Ergebnis gemessen wurden. Sie ist bewusst klein. Wer hier
   etwas ergänzt, schreibt dazu, was gemessen wurde und warum die Regel nötig
   ist. Langfristig wandern die Regeln nach design.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Produktseite: zweispaltig
   Gemessen am 31.08.2026: .fs-produkt trug zwar grid-template-columns, stand
   aber auf display:block. Dadurch lief die Galerie über die volle Breite von
   1215px und der Kaufbereich rutschte darunter. Auf einer Produktseite gehört
   der Kaufbereich neben das Bild, sonst sieht der Besucher Preis und
   Muster-Button erst nach dem Scrollen.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .fs-produkt {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
      "galerie kopf"
      "galerie info";
    column-gap: var(--fs-s50);
    row-gap: var(--fs-s20);
    align-items: start;
  }

  .fs-produkt__kopf { grid-area: kopf; }
  .fs-produkt__galerie { grid-area: galerie; }
  .fs-produkt__info {
    grid-area: info;
    position: static;
  }
}

@media (min-width: 1025px) {
  .fs-produkt__galerie {
    position: sticky;
    top: 165px;
  }

  .admin-bar .fs-produkt__galerie { top: 197px; }
}

@media (max-width: 899px) {
  .fs-produkt {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kopf"
      "galerie"
      "info";
    gap: var(--fs-s30);
  }

  .fs-produkt__kopf { grid-area: kopf; }
  .fs-produkt__galerie { grid-area: galerie; }
  .fs-produkt__info { grid-area: info; }
}

/* Die Galerie darf nie breiter werden als ihre Spalte. */
.fs-produkt__galerie {
  max-width: 100%;
}

.fs-produkt__galerie img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Produkttitel bricht nicht mitten im Wort
   Gemessen am 31.08.2026: "Moderna Greta Vinylboden" stand mit 52px in einer
   273px schmalen Spalte. Mit overflow-wrap:break-word trennte der Browser
   mitten im Wort zu "Vinylbode / n". Ein Produktname, der so umbricht, sieht
   nach kaputter Seite aus.

   Loesung: die Ueberschrift skaliert mit der Spalte, Silbentrennung ist
   erlaubt, der harte Umbruch mitten im Wort nicht.
   -------------------------------------------------------------------------- */

.fs-produkt__kopf .product_title,
.fs-produkt__kopf h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: none;
}

/* Der Kaufbereich braucht seine ganze Spalte, keine Zeilenlaengen-Begrenzung. */
.fs-produkt__info {
  max-width: none;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Buttons in Elementor: die Klasse darf nur einmal wirken
   Elementor setzt die Klasse aus _css_classes auf den Widget-Rahmen, den
   eigentlichen Button rendert es als a.elementor-button darin. Bisher trafen
   die Button-Regeln beide, dadurch stand ein Rahmen im Rahmen und das Padding
   zaehlte doppelt. Am 31.08.2026 auf der Startseite mobil gemessen:
   Wrapper 267px mit 1px Rahmen, Anker 215px mit demselben Rahmen.

   Loesung: traegt ein Elementor-Element die Button-Klasse, wird der Rahmen
   selbst neutral. Gestaltet wird nur der Link darin.
   -------------------------------------------------------------------------- */

.elementor-element.fs-btn-primaer,
.elementor-element.fs-btn-muster,
.elementor-element.fs-btn-sekundaer {
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: auto;
  min-height: 0;
  box-shadow: none;
  color: inherit;
  letter-spacing: normal;
}

/* Der Link darin bekommt die volle Button-Gestaltung. */
.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;
  min-height: var(--fs-btn-hoehe, 52px);
  border-radius: var(--fs-radius);
  font-family: var(--fs-font-ui);
  font-size: var(--fs-btn-gr);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
}

/* Auf Mobil laufen die CTA-Reihen ueber die volle Breite. */
@media (max-width: 767px) {
  .elementor-element.fs-btn-primaer,
  .elementor-element.fs-btn-muster,
  .elementor-element.fs-btn-sekundaer,
  /* Hoehere Spezifitaet als Elementors eigene Breitenregel. */
  .elementor-element.fs-btn-primaer a.elementor-button,
  .elementor-element.fs-btn-muster a.elementor-button,
  .elementor-element.fs-btn-sekundaer a.elementor-button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Kopfzeile: Reserve für die Navigation auf schmalen Notebooks
   Bei 1200px Fensterbreite braucht das Menü 792px und bekommt 795px. Das ist
   zu knapp: eine andere Schriftwiedergabe oder ein längerer Menüpunkt kippt es
   sofort. Vorher lief "Kontakt" dort 71px über Suche und Musterzähler,
   gemessen am 31.08.2026.

   Unterhalb von 1320px rücken die Menüpunkte enger zusammen. Das kostet
   optisch wenig und schafft rund 60px Reserve.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .fs-header__nav a {
    padding-inline: var(--fs-s5);
  }

  .fs-header__nav ul {
    gap: var(--fs-s5);
  }
}

/* --------------------------------------------------------------------------
   Der Text neben dem Musterzähler erscheint erst ab 1500px
   Gemessen am 31.08.2026 über sieben Fensterbreiten: ab 1400px tauchte
   "von 3 Mustern" auf, der Aktionsblock wuchs um rund 115px und die
   Navigation bekam nur noch 715px statt 850px. Ergebnis war eine
   Überlappung von 58px bei 1440 und 1920px, also genau auf den Breiten,
   auf denen die meisten Desktops laufen.

   Die Zahl im Goldfeld bleibt auf jeder Breite sichtbar, sie ist der Weg
   in den Funnel. Nur die Wortergänzung wartet auf Platz.
   -------------------------------------------------------------------------- */

@media (max-width: 1499px) {
  .fs-header__muster-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   Kopfzeile, Neuaufbau nach der Design-Kritik vom 31.08.2026
   --------------------------------------------------------------------------
   Vorher: eine flache Reihe mit Logo, acht gleichgewichteten Menuepunkten,
   einem toten Loch von rund 110px, einer Lupe, einer umrandeten Null und dem
   Warenkorb mit einer zweiten Null. Der wichtigste Weg im Shop war unsichtbar.

   Jetzt zwei Reihen. Oben Marke, Suche und Handlung. Unten Sortiment links,
   Service rechts und gedaempft. Damit hat jede Zone eine Aufgabe und die
   Navigation kann nicht mehr mit den Aktionen kollidieren.
   ========================================================================== */

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

.fs-header__haupt {
  min-height: 80px;
  display: flex;
  align-items: center;
}

.fs-header__innen {
  display: flex;
  align-items: center;
  gap: var(--fs-s25);
  width: 100%;
}

/* Die Marke bekommt Gewicht, vorher war sie so gross wie ein Menuepunkt. */
.fs-header__logo {
  flex: 0 0 auto;
}

.fs-header__logo .fs-logo__signet svg {
  width: 40px;
  height: 40px;
}

.fs-header__logo .fs-logo__zeile {
  font-size: 15px;
  letter-spacing: 0.2em;
}

/* Suche als echtes Feld, nicht als Lupe. Der Marktfuehrer macht die Suche zum
   Produkteinstieg, das ist keine Discounter-Optik sondern Orientierung. */
.fs-suchfeld {
  flex: 1 1 420px;
  max-width: 440px;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--fs-s5) 0 var(--fs-s15);
  border: 1px solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-wollweiss);
  transition: border-color 180ms var(--fs-easing, ease), background-color 180ms var(--fs-easing, ease);
}

.fs-suchfeld:focus-within {
  border-color: var(--fs-navy);
  background-color: var(--fs-weiss);
}

.fs-suchfeld__eingabe {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-family: var(--fs-font-ui);
  font-size: 15px;
  color: var(--fs-anthrazit);
}

.fs-suchfeld__eingabe::placeholder { color: var(--fs-muted); opacity: 1; }
.fs-suchfeld__eingabe:focus { outline: none; }

.fs-suchfeld__knopf {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--fs-navy);
  cursor: pointer;
}

.fs-header__aktionen {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--fs-s15);
}

/* Der Musterbox-Aufruf: das einzige goldene Element in der Kopfzeile. */
.fs-musterknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s10);
  height: 48px;
  padding: 0 var(--fs-s20);
  border-radius: var(--fs-radius);
  background-color: var(--fs-gold);
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms ease, transform 180ms ease;
}

.fs-musterknopf:hover,
.fs-musterknopf:focus-visible {
  background-color: var(--fs-gold-dark);
  color: var(--fs-navy);
}

.fs-musterknopf__signet {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--fs-navy);
}

.fs-musterknopf__signet svg { width: 22px; height: 22px; }

.fs-musterknopf__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.fs-musterknopf__stand { font-variant-numeric: tabular-nums; }

.fs-musterknopf--breit {
  width: 100%;
  justify-content: center;
  height: 52px;
}

/* Zweite Reihe: Sortiment links, Service rechts. */
.fs-header__navreihe {
  border-top: 1px solid var(--fs-linie);
}

.fs-header__navinnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-s25);
  min-height: 48px;
}

.fs-header__nav .fs-header__liste,
.fs-header__service .fs-service__liste {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die globale Inhaltsliste gibt Listeneinträgen 10px Unterrand. Im
   Servicemenü verschob das Kontakt nach unten und machte die Reihe zu hoch. */
.fs-header__service .fs-service__liste > li {
  position: relative;
  margin: 0;
}

.fs-header__nav .fs-header__liste { gap: var(--fs-s20); }
.fs-header__service .fs-service__liste { gap: var(--fs-s20); }

.fs-header__nav a,
.fs-header__service a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  font-family: var(--fs-font-ui);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.fs-header__nav a { color: var(--fs-navy); font-weight: 600; }
.fs-header__service a { color: var(--fs-muted); font-weight: 400; font-size: 14px; }

.fs-header__nav a::after,
.fs-header__service a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background-color: var(--fs-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

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

.fs-header__service a:hover { color: var(--fs-navy); }

/* Sobald das Hauptmenü in den Burger wandert, verschwindet auch die zweite
   Reihe vollständig. Sonst blieben zwischen 1024px und 1199px nur die drei
   Servicelinks als verwaiste Zeile stehen. */
@media (max-width: 1199px) {
  .fs-header__navreihe { display: none; }
}

/* --------------------------------------------------------- unter 1024px */

@media (max-width: 1023px) {
  .fs-header__haupt { min-height: 64px; }
  .fs-header__innen { gap: var(--fs-s10); }
  .fs-suchfeld { display: none; }
  .fs-burger { display: inline-flex; }

  .fs-header__logo .fs-logo__signet svg { width: 32px; height: 32px; }
  .fs-header__logo .fs-logo__zeile { font-size: 13px; }

  /* Auf schmalen Geraeten nur das Signet im Knopf, der Text wuerde die
     Zeile sprengen. Die Beschriftung bleibt fuer Vorlesesoftware erhalten. */
  .fs-musterknopf { padding: 0 var(--fs-s15); }
  .fs-musterknopf__text { display: none; }
}

@media (min-width: 1024px) {
  .fs-burger { display: none; }
}

@media (max-width: 479px) {
  /* Die Wortmarke bleibt. Nur der Ring ist anonym, gerade auf dem Geraet,
     ueber das die meisten Besucher kommen. Platz ist da, weil das Suchfeld
     mobil ohnehin ausgeblendet ist. */
  .fs-header__logo .fs-logo__zeile { font-size: 11px; letter-spacing: 0.16em; }
  .fs-header__logo .fs-logo__signet svg { width: 28px; height: 28px; }
  .fs-header__aktionen { gap: var(--fs-s10); }
}

/* Die Sortimentsnavigation steht bündig unter dem Logo, nicht zentriert.
   Aus der einreihigen Kopfzeile stand noch justify-content:center auf
   .fs-header__nav. In der zweireihigen Fassung schob das den ersten Punkt
   auf 296px, während der Inhalt bei 125px beginnt. Gemessen am 31.08.2026. */
.fs-header__navinnen .fs-header__nav {
  flex: 0 1 auto;
  justify-content: flex-start;
  min-width: 0;
  /* Aus der einreihigen Kopfzeile lag hier noch margin-left:auto, das schob
     die Navigation um 196px nach rechts. Gemessen am 31.08.2026. */
  margin-left: 0;
  margin-right: 0;
}

.fs-header__navinnen .fs-header__nav ul {
  justify-content: flex-start;
}

.fs-header__navinnen .fs-header__service {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Beide Kopfzeilen-Reihen brauchen denselben Seitenabstand, sonst steht die
   Navigation 25px weiter links als das Logo darueber. Gemessen am 31.08.2026:
   erste Reihe padding-left 25px, zweite 0px. */
.fs-header__navinnen {
  padding-left: var(--fs-s25);
  padding-right: var(--fs-s25);
}

/* ==========================================================================
   Produktseite, Neuaufbau nach der Design-Kritik vom 31.08.2026
   --------------------------------------------------------------------------
   Befunde aus dem Bericht, alle am Screenshot belegt:
   - Galerie und Kaufbereich nutzten nur zwei Drittel der Breite, rechts blieb
     eine grosse Leerflaeche.
   - Das freigestellte Brett nutzte die halbe Bildflaeche, oben blieb tote Weissflaeche.
   - Die Vertrauenszeile lief in der schmalen Spalte sichtbar ineinander.
   - Der Muster-CTA, laut Strategie der Hauptweg, sah zweitrangig aus.
   - Zwischen Artikelnummer und Beschreibung klaffte ein Loch von rund 200px.
   ========================================================================== */

@media (min-width: 1024px) {
  /* 60:40 statt 55:45, mit 30px Abstand. Die Kaufspalte braucht 490px, sonst
     bricht die Ueberschrift auf drei Zeilen. */
  .fs-produkt {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: var(--fs-s30);
    row-gap: var(--fs-s20);
    align-items: start;
  }
}

/* Nutzerentscheidung 05.09.2026: Hauptbild flächenfüllend ohne die bisherigen 25px Innenrand. */
.fs-produkt__hauptbild .fs-produkt__hauptbild-img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}

.fs-produkt__miniaturen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s10);
}

.fs-produkt__miniatur {
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  aspect-ratio: auto;
}

/* Kaufbereich: klare Abstandsfolge statt gleichmaessigem Brei. */
.fs-produkt__kopf .fs-produkt__kollektion { margin-bottom: var(--fs-s10); }
.fs-produkt__kopf .product_title { margin-bottom: 0; }
.fs-produkt__info .woocommerce-product-details__short-description { margin-bottom: var(--fs-s20); }
.fs-produkt__info .fs-kurzfakten li + li { margin-top: var(--fs-s10); }

/* Der Muster-CTA ist der Hauptweg und sieht ab jetzt auch so aus. */
.fs-produkt__musterhinweis {
  margin: var(--fs-s20) 0 0;
  padding: 0;
  background: none;
  border: 0;
}

.fs-produkt__info .fs-muster-btn,
.fs-produkt__info .fs-btn-muster {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.fs-produkt__musterhinweis .fs-hinweis,
.fs-produkt__musterhinweis p {
  margin: var(--fs-s10) 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fs-muted);
}

/* Systemwahl: ruhige Karten mit eindeutigem Auswahlzeichen. */
.fs-produkt__varianten { margin-top: var(--fs-s25); }

.fs-produkt__varianten .fs-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-s10);
  width: 100%;
  margin-top: var(--fs-s10);
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.fs-segment__option {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.fs-segment__text {
  position: relative;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 64px;
  padding: var(--fs-s10) 38px var(--fs-s10) var(--fs-s10);
  border: 1px solid var(--fs-linie);
  background-color: var(--fs-weiss);
  color: var(--fs-navy);
  white-space: normal;
}

.fs-segment__text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--fs-s10);
  width: 20px;
  height: 20px;
  background: var(--fs-icon-haken) center / contain no-repeat;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--fs-dauer-kurz) var(--fs-ease);
}

.fs-segment__option input:checked ~ .fs-segment__text {
  border: 2px solid var(--fs-navy);
  background-color: var(--fs-sand);
  color: var(--fs-navy);
}

.fs-segment__option input:checked ~ .fs-segment__text::after {
  opacity: 1;
}

.fs-segment__preis { font-size: 13px; font-weight: 400; opacity: .85; }

.fs-produkt__info .woocommerce-variation-price { display: none; }

/* Mengenblock (Neuaufbau 30.09.2026): Titel, darunter Raumfläche und Pakete
   als zwei beschriftete Felder, darunter das Ergebnis mit Fläche und Preis.
   Der Block trägt die WooCommerce-Klasse quantity und erbte deren
   Stepper-Rahmen: Label, Stepper und Fläche standen in einem Kasten, das
   Label klebte ohne Abstand am Rand. */
.woocommerce div.product form.cart div.quantity.fs-mengeblock--rechner,
.fs-produkt__info .quantity.fs-mengeblock--rechner {
  display: block;
  float: none;
  margin: var(--fs-s25) 0 var(--fs-s20);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.fs-mengeblock__titel { margin: 0 0 var(--fs-s10); }

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

.fs-mengeblock__gruppe {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: var(--fs-s5);
  min-width: 0;
}

.fs-mengeblock__feldlabel {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fs-navy);
}

.fs-mengeblock--rechner .fs-menge { display: flex; width: 100%; }

.fs-mengeblock--rechner .fs-menge .fs-menge__feld {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.fs-flaeche {
  display: flex;
  align-items: center;
  border: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
}

.fs-flaeche:focus-within {
  border-color: var(--fs-navy);
  outline: 2px solid var(--fs-navy);
  outline-offset: 2px;
}

.fs-flaeche .fs-flaeche__feld {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--fs-btn-hoehe);
  padding: 0 var(--fs-s10) 0 var(--fs-s15);
  border: 0;
  background: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fs-flaeche .fs-flaeche__feld:focus { outline: none; }

.fs-flaeche__einheit {
  padding-right: var(--fs-s15);
  font-weight: 600;
  color: var(--fs-muted);
}

.fs-mengeblock--rechner .fs-menge__hinweis {
  max-width: none;
  margin: var(--fs-s10) 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--fs-navy);
  font-variant-numeric: tabular-nums;
}

.fs-produkt__info .single_add_to_cart_button {
  width: 100%;
  min-height: 52px;
  margin-top: var(--fs-s15);
  font-size: 16px;
}

/* Vertrauenszeile: volle Breite, vier gleiche Spalten, nichts laeuft mehr ineinander. */
.fs-vertrauen--produkt {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-s20);
  max-width: var(--fs-container, 1240px);
  margin: var(--fs-s40) auto 0;
  padding: var(--fs-s20) var(--fs-s25);
  border-top: 1px solid var(--fs-linie);
  border-bottom: 1px solid var(--fs-linie);
}

.fs-vertrauen--produkt .fs-vertrauen__punkt {
  display: flex;
  align-items: center;
  gap: var(--fs-s10);
  min-height: 70px;
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .fs-vertrauen--produkt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-s15);
  }
  .fs-vertrauen--produkt .fs-vertrauen__punkt { min-height: 52px; }
}

/* Das Loch vor der Beschreibung war rund 200px hoch und sah aus wie ein
   Ladefehler. Jetzt ein bewusster Uebergang mit Trennlinie. */
.fs-produkt__text,
.woocommerce-tabs,
.fs-produkt__beschreibung {
  margin-top: var(--fs-s60);
  padding-top: var(--fs-s60);
}

/* Der Kaufbereich ist eine Layoutspalte, keine Textspalte. Er hat die
   Zeilenlaengen-Begrenzung geerbt und war dadurch 232px statt 484px breit,
   der Muster-CTA nur 190px. Gemessen am 31.08.2026.
   Die Begrenzung bleibt fuer die Textabsaetze darin erhalten. */
.fs-produkt__info,
.fs-produkt__info .fs-produkt__varianten,
.fs-produkt__info form.cart,
.fs-produkt__info .fs-segment,
.fs-produkt__info .fs-mengeblock,
.fs-produkt__info .fs-produkt__musterhinweis {
  max-width: none;
  width: 100%;
}

.fs-produkt__info .woocommerce-product-details__short-description p,
.fs-produkt__info .fs-produkt__musterhinweis p {
  max-width: var(--fs-mass, 54ch);
}

/* WooCommerce setzt in seinem Layout-Stylesheet
   .woocommerce div.product div.summary { float: right; width: 48% }.
   In einem Raster ergibt das 48 Prozent der ohnehin schon zugeteilten Spalte,
   also 232px statt 484px. Der Muster-CTA blieb dadurch bei 190px stecken.
   Gemessen am 31.08.2026. Diese Selektoren sind bewusst so lang, sie muessen
   die WooCommerce-Regel schlagen. */
.woocommerce div.product .fs-produkt > div.summary,
.woocommerce div.product div.fs-produkt__info,
.fs-produkt > .fs-produkt__info.summary {
  float: none;
  width: 100%;
  max-width: none;
  clear: none;
}

.woocommerce div.product .fs-produkt > .fs-produkt__galerie,
.woocommerce div.product .fs-produkt > div.images {
  float: none;
  width: 100%;
  max-width: none;
}

/* Der Muster-CTA steht frei, nicht in einem Kasten. Der Sandkasten mit
   Ueberschrift liess die wichtigste Handlung wie einen Hinweis aussehen.
   Befund aus der Design-Kritik vom 31.08.2026. */
.fs-produkt__muster {
  margin-top: var(--fs-s25);
  padding: 0;
  background: none;
  border: 0;
}

.fs-produkt__muster .fs-muster-btn,
.fs-produkt__muster .fs-btn-muster {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

.fs-produkt__muster-text {
  margin: var(--fs-s10) 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fs-muted);
  max-width: none;
}

/* Der Warenkorb-Button ist gesperrt, solange kein System gewaehlt ist. Als
   graue Flaeche sah das nach einem Darstellungsfehler aus. Jetzt ein ruhiger
   Umriss, der klar als "noch nicht dran" lesbar ist, mit Abstand zur
   Mengenzeile darueber. */
.fs-produkt__info .single_add_to_cart_button {
  margin-top: var(--fs-s15);
}

.fs-produkt__info .single_add_to_cart_button.disabled,
.fs-produkt__info .single_add_to_cart_button:disabled,
.fs-produkt__info .single_add_to_cart_button.wc-variation-selection-needed {
  background-color: transparent;
  border: 1px solid var(--fs-linie);
  color: var(--fs-muted);
  cursor: not-allowed;
}

.fs-produkt__info .single_add_to_cart_button.disabled:hover,
.fs-produkt__info .single_add_to_cart_button.wc-variation-selection-needed:hover {
  background-color: transparent;
  color: var(--fs-muted);
}

/* Die Mengenzeile und der Kaufknopf brauchen Luft voneinander. */
.fs-produkt__info .fs-mengeblock { margin-bottom: var(--fs-s5); }

.fs-produkt__info .product_meta {
  display: grid;
  gap: var(--fs-s10);
  padding-top: var(--fs-s20);
  border-top: 1px solid var(--fs-linie);
  font-size: 14px;
  line-height: 1.5;
}

.fs-produkt__info .product_meta > span { display: block; }

@media (max-width: 767px) {
  .fs-produkt {
    gap: var(--fs-s15);
  }

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

  .fs-produkt__hauptbild .fs-produkt__hauptbild-img {
    padding: 0; /* 05.09.2026: auch mobil flächenfüllend, gemessene 15px Rand entfernt. */
  }

  .fs-produkt__miniatur {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

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

  .fs-produkt__info > * { order: 50; }
  .fs-produkt__info > .fs-produkt__preisblock,
  .fs-produkt__info > .price { order: 10; }
  .fs-produkt__info > .fs-produkt__muster { order: 20; }
  .fs-produkt__info > .fs-produkt__varianten { order: 30; }
  .fs-produkt__info > form.cart { order: 40; }
  .fs-produkt__info > .woocommerce-product-details__short-description { order: 50; }
  .fs-produkt__info > .product_meta { order: 60; }

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

/* ==========================================================================
   Hero der Startseite
   --------------------------------------------------------------------------
   Vorher: eine Textwand über die halbe Breite, rechts daneben nichts, und das
   Bild erst weit darunter über die volle Breite. Gezeigt wurde dabei eine
   Schrankwand mit Decke, kaum Boden. Für einen Bodenshop der schlechtestmögliche
   erste Eindruck. Befund aus der Design-Kritik vom 31.08.2026.

   Jetzt zwei Spalten, Text links, Raumfoto rechts, auf dem der Boden die
   Fläche trägt.
   ========================================================================== */

@media (min-width: 1024px) {
  .fs-hero > .fs-hero__text { flex: 0 1 520px; min-width: 0; }
  .fs-hero > .fs-hero__medien { flex: 1 1 660px; min-width: 0; }
}

.fs-hero__medien .fs-hero__bild img,
.fs-hero__medien img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--fs-radius);
}

.fs-hero__text .fs-lead,
.fs-hero__text .fs-erzaehl p {
  max-width: 46ch;
}

@media (max-width: 1023px) {
  /* Mobil zuerst die Aussage, dann das Bild. Der CTA muss im ersten
     Bildschirm liegen, deshalb bleibt der Text kurz. */
  .fs-hero { flex-direction: column; }
  .fs-hero__medien .fs-hero__bild img { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   Widerrufsformular
   Wer den Widerruf auf der Website anbietet, muss den Eingang unverzüglich
   bestätigen. Das Formular schickt deshalb zwei Mails: eine an den Shop und
   eine Bestätigung an die Absenderin oder den Absender.
   -------------------------------------------------------------------------- */

.fs-widerruf {
  max-width: 620px;
  margin-top: var(--fs-s40);
  padding: var(--fs-s30);
  background-color: var(--fs-weiss);
  border: 1px solid var(--fs-linie);
  border-radius: var(--fs-radius);
}

.fs-widerruf__feld { margin-bottom: var(--fs-s20); }

.fs-widerruf__feld label {
  display: block;
  margin-bottom: var(--fs-s5);
  font-family: var(--fs-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-navy);
}

.fs-widerruf__feld input,
.fs-widerruf__feld textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--fs-s10) var(--fs-s15);
  border: 1px solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-wollweiss);
  font-family: var(--fs-font-ui);
  font-size: 16px;
  color: var(--fs-anthrazit);
}

.fs-widerruf__feld textarea { min-height: 90px; line-height: 1.5; }

.fs-widerruf__feld input:focus,
.fs-widerruf__feld textarea:focus {
  outline: 2px solid var(--fs-gold-dark);
  outline-offset: 2px;
  background-color: var(--fs-weiss);
}

.fs-widerruf__hinweis,
.fs-widerruf__recht {
  display: block;
  margin-top: var(--fs-s5);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fs-muted);
}

.fs-widerruf__recht { margin: var(--fs-s20) 0; }

.fs-widerruf__senden { width: 100%; min-height: 52px; }

.fs-widerruf__meldung {
  margin: 0 0 var(--fs-s20);
  padding: var(--fs-s15);
  border-radius: var(--fs-radius);
  font-size: 15px;
  line-height: 1.5;
}

.fs-widerruf__meldung--erfolg {
  background-color: var(--fs-sand);
  border-left: 3px solid var(--fs-erfolg, #2F6B4F);
  color: var(--fs-anthrazit);
}

.fs-widerruf__meldung--fehler {
  background-color: var(--fs-sand);
  border-left: 3px solid var(--fs-warnung, #9A3B24);
  color: var(--fs-anthrazit);
}

/* --------------------------------------------------------------------------
   Rechtstexte und andere reine Textseiten
   Lange Fließtexte brauchen eine begrenzte Zeilenlänge und klare Absätze,
   sonst liest sie niemand. Die Seiten hatten außerdem gar keine H1.
   -------------------------------------------------------------------------- */

.fs-seite__titel {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1.15;
  color: var(--fs-navy);
}

.fs-seite__inhalt {
  max-width: 780px;
}

.fs-seite__inhalt h2 {
  margin: var(--fs-s40) 0 var(--fs-s15);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--fs-navy);
}

.fs-seite__inhalt h2:first-child { margin-top: 0; }

.fs-seite__inhalt h3 {
  margin: var(--fs-s25) 0 var(--fs-s10);
  font-size: 1.125rem;
  color: var(--fs-navy);
}

.fs-seite__inhalt p,
.fs-seite__inhalt li {
  font-size: 16px;
  line-height: 1.7;
  max-width: 68ch;
}

.fs-seite__inhalt p { margin: 0 0 var(--fs-s15); }
.fs-seite__inhalt ul,
.fs-seite__inhalt ol { margin: 0 0 var(--fs-s20) var(--fs-s20); }
.fs-seite__inhalt li + li { margin-top: var(--fs-s5); }

.fs-seite__inhalt a { color: var(--fs-navy); text-decoration: underline; text-underline-offset: 2px; }

/* Offene Platzhalter für Firmendaten sichtbar machen, damit niemand sie
   übersieht. Die Auszeichnung verschwindet, sobald die Angabe eingesetzt ist. */
.fs-seite__inhalt p:has(> em:only-child) { color: var(--fs-muted); }

/* --------------------------------------------------------------------------
   Wortmarke nie unter 13px
   Der Seitencheck meldete sie auf jeder Seite und in beiden Ansichten als
   Mini-Text unter 12px, insgesamt 22 Befunde aus einer einzigen Ursache.
   13px mit weitem Sperrsatz bleibt als Logo ruhig und ist lesbar.
   -------------------------------------------------------------------------- */
.fs-header__logo .fs-logo__zeile,
.fs-logo .fs-logo__zeile {
  font-size: 13px;
  letter-spacing: 0.18em;
}

@media (min-width: 1024px) {
  .fs-header__logo .fs-logo__zeile { font-size: 15px; letter-spacing: 0.2em; }
}

/* --------------------------------------------------------------------------
   Zeilenlänge auf den Rechtsseiten
   68ch klingt nach 68 Zeichen, ist aber die Ziffernbreite. Gemessen ergab das
   83 bis 89 echte Zeichen je Zeile. Dieselbe Falle wie im übrigen Design.
   -------------------------------------------------------------------------- */
.fs-seite__inhalt { max-width: 700px; }

.fs-seite__inhalt p,
.fs-seite__inhalt li,
.fs-seite__inhalt p strong,
.fs-seite__inhalt p em {
  max-width: 56ch;
}

.fs-seite__inhalt table { max-width: 100%; }

/* ==========================================================================
   Drei Darstellungsfehler, gemeldet am 01.09.2026
   ========================================================================== */

/* Nutzerentscheidung 05.09.2026: Alle Bildflächen füllen ihr Format mit cover.
   Die bisherige Einpassung mit 15px Rand entfällt auch bei Produkt-Renderings. */

.fs-dekor__bild {
  background-color: var(--fs-weiss);
}

.fs-dekor__bild img {
  object-fit: cover;
  padding: 0;
}

/* Der Materialstreifen darunter bleibt beschnitten, das ist dort gewollt:
   er zeigt bewusst nur einen Ausschnitt der Oberflaeche. */
.fs-materialstreifen img {
  object-fit: cover;
  padding: 0;
}

/* --------------------------------------------------------------------------
   2. Beschreibung unter der Produktseite war 614px in einer 1440px-Sektion
   Der Textblock stand ohne Bezug in der Flaeche und wirkte verloren. Er
   gehoert in denselben 1240er-Container wie alles darueber und bekommt eine
   ruhige, aber nicht winzige Zeilenlaenge.
   -------------------------------------------------------------------------- */

.fs-produkt__text > .fs-container,
.fs-produkt__textinhalt {
  max-width: var(--fs-container, 1240px);
  margin-inline: auto;
  padding-inline: var(--fs-s25);
}

.fs-produkt__textinhalt p,
.fs-produkt__textinhalt li {
  max-width: 68ch;
}

.fs-produkt__textinhalt h2 {
  margin-top: var(--fs-s40);
  max-width: none;
}

.fs-produkt__textinhalt h3 {
  margin-top: var(--fs-s25);
  max-width: none;
}

/* Die technische Tabelle nutzt die volle Breite, sie ist kein Fliesstext. */
.fs-produkt__textinhalt table,
.fs-produkt__textinhalt .fs-spec {
  width: 100%;
  max-width: 900px;
}

/* --------------------------------------------------------------------------
   3. Magenta und Lila aus dem WordPress-Reset
   hello-elementor/assets/css/reset.css setzt a { color: #c36 }. Ueberall wo
   keine eigene Farbe steht, blitzte dieser Magentaton durch, besuchte Links
   wurden zusaetzlich lila. Das wirkte wie ein fremdes Theme.
   Ab hier gilt: Links sind Navy, besucht bleibt Navy, Hover bekommt den
   Goldunterstrich. Ausnahmen definieren ihre Farbe selbst.
   -------------------------------------------------------------------------- */

a,
a:visited {
  color: var(--fs-navy);
}

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

/* Auf dunklen Flaechen bleibt hell. */
.fs-sektion--navy a,
.fs-sektion--navy a:visited,
.fs-footer a,
.fs-footer a:visited,
.fs-mobilnav a,
.fs-mobilnav a:visited {
  color: var(--fs-hell-86, rgba(255, 255, 255, .86));
}

.fs-footer a:hover,
.fs-mobilnav a:hover,
.fs-sektion--navy a:hover {
  color: var(--fs-weiss);
}

/* Buttons behalten ihre eigene Schriftfarbe. */
a.elementor-button,
a.fs-btn-sekundaer,
a.button,
.fs-musterknopf,
.fs-musterknopf:visited { color: inherit; }

.fs-btn-muster,
.fs-btn-muster:visited,
a.fs-btn-muster .elementor-button { color: var(--fs-navy); }

/* a.fs-btn-primaer stand bis 29.09.2026 oben in der inherit-Liste. Mit
   (0,1,1) schlug das die weisse Schrift hier (0,1,0), der Knopf erbte die
   Textfarbe seiner Umgebung: in der neuen Musterleiste Anthrazit auf Navy,
   unlesbar. Primaerknoepfe sind immer weiss auf Navy. */
.fs-btn-primaer,
.fs-btn-primaer:visited,
a.fs-btn-primaer,
a.fs-btn-primaer:visited,
a.fs-btn-primaer:hover { color: var(--fs-weiss); }

/* --------------------------------------------------------------------------
   4. Weisser Hover auf weisser Kopfzeile
   Aus der alten Navy-Kopfzeile stand noch
   .fs-header__warenkorb:hover { color: weiss }. Auf der jetzt weissen Leiste
   verschwand das Symbol beim Zeigen und auf Mobil beim Antippen komplett.
   Gemeldet am 01.09.2026.
   Auf hellem Grund darf Hover nie auf Weiss gehen. Die Rueckmeldung kommt
   ueber Flaeche und Gold, nicht ueber die Textfarbe.
   -------------------------------------------------------------------------- */

.fs-header__warenkorb,
.fs-header__warenkorb:visited,
.fs-header__warenkorb:hover,
.fs-header__warenkorb:focus-visible,
.fs-header__warenkorb:active,
.fs-header__knopf:hover,
.fs-header__knopf:focus-visible,
.fs-suchfeld__knopf:hover,
.fs-suchfeld__knopf:focus-visible,
.fs-burger:hover,
.fs-burger:focus-visible {
  color: var(--fs-navy);
}

/* Die Rueckmeldung ist eine ruhige Flaeche, kein Farbwechsel der Schrift. */
.fs-header__warenkorb:hover,
.fs-suchfeld__knopf:hover,
.fs-burger:hover {
  background-color: var(--fs-wollweiss);
  border-radius: var(--fs-radius);
}

/* Auf Geraeten ohne Zeiger gibt es kein Hover. Dort darf nichts haengen
   bleiben, sonst sieht ein angetippter Link danach anders aus als die
   anderen. */
@media (hover: none) {
  .fs-header__warenkorb:hover,
  .fs-suchfeld__knopf:hover,
  .fs-burger:hover,
  .fs-header__nav a:hover,
  .fs-header__service a:hover {
    background-color: transparent;
    color: var(--fs-navy);
  }

  .fs-dekor:hover .fs-dekor__bild img { transform: none; }
}

/* Der Musterknopf behaelt Navy auf Gold, auch beim Zeigen und Antippen. */
.fs-musterknopf,
.fs-musterknopf:visited,
.fs-musterknopf:hover,
.fs-musterknopf:focus-visible,
.fs-musterknopf:active {
  color: var(--fs-navy);
}

/* Das Bildfeld der Dekor-Kachel war sandfarben, dadurch stand die freigestellte
   Diele in einem grauen Rahmen und sah aus wie ein Platzhalter. Die Dielen sind
   auf Weiss freigestellt, also gehoert Weiss dahinter.
   Gemeldet am 01.09.2026. */
.fs-dekor .fs-dekor__bild,
.fs-dekor__bild {
  background-color: var(--fs-weiss);
}

.fs-dekor .fs-dekor__bild img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  background-color: var(--fs-weiss);
}

/* Der Materialstreifen bleibt ein Ausschnitt, das ist dort gewollt. */
.fs-dekor .fs-materialstreifen,
.fs-dekor .fs-materialstreifen img {
  object-fit: cover;
  padding: 0;
  background-color: transparent;
}

/* Diese Regeln muessen die Kachelstile aus design.css und WooCommerce schlagen,
   deshalb die lange Selektorkette. Ohne sie stand die freigestellte Diele in
   einem sandfarbenen Rahmen und wurde zusaetzlich beschnitten.
   Gemeldet und am Bild nachgewiesen am 01.09.2026. */
.fs-dekor-raster .fs-dekor a.fs-dekor__bild,
ul.products li.product a.fs-dekor__bild {
  background-color: var(--fs-weiss);
  display: block;
}

.fs-dekor-raster .fs-dekor a.fs-dekor__bild img,
ul.products li.product a.fs-dekor__bild img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  background-color: var(--fs-weiss);
  transform: none;
}

/* Beim Zeigen wandert nicht das Bild, sondern die Karte hebt sich leicht.
   Ein Zoom auf ein freigestelltes Produkt sieht nach Fehler aus. */
.fs-dekor:hover .fs-dekor__bild img,
.fs-dekor:focus-within .fs-dekor__bild img { transform: none; }

/* --------------------------------------------------------------------------
   Beschreibung unter der Produktseite
   Gemessen am 01.09.2026: die Überschrift war 1190px breit, die Absätze
   darunter 614px. Dadurch wirkte der Block zerrissen und der Text verloren.
   Überschrift und Text bekommen jetzt dasselbe Maß, die technische Tabelle
   darf breiter, sie ist kein Fließtext.
   -------------------------------------------------------------------------- */

.fs-produkt__text .fs-container--schmal {
  max-width: var(--fs-container, 1240px);
}

.fs-produkt__text h2,
.fs-produkt__text h3,
.fs-produkt__text p,
.fs-produkt__text li,
.fs-produkt__text .fs-erzaehl {
  max-width: 820px;
}

.fs-produkt__text table,
.fs-produkt__text .fs-spec {
  max-width: 980px;
  width: 100%;
}

.fs-produkt__text h2 { margin-top: var(--fs-s50); }
.fs-produkt__text h2:first-child { margin-top: 0; }
.fs-produkt__text h3 { margin-top: var(--fs-s30); }

/* Gold-Buttons behalten Navy-Text, auch im Footer und auf Navy-Sektionen.
   Meine Regel für helle Links auf dunklem Grund hat sie erwischt und weiss
   auf Gold gesetzt, 2,24:1. Das Manifest verbietet Weiss auf Gold.
   Am 01.09.2026 im Seitencheck gemessen, eigener Regressionsfehler. */
.fs-footer a.fs-btn-muster,
.fs-footer a.fs-btn-muster:visited,
.fs-footer a.fs-btn-muster:hover,
.fs-sektion--navy a.fs-btn-muster,
.fs-sektion--navy a.fs-btn-muster:visited,
.fs-sektion--navy a.fs-btn-muster:hover,
.fs-mobilnav a.fs-btn-muster,
.fs-mobilnav a.fs-btn-muster:visited,
.fs-footer a.fs-musterknopf,
.fs-mobilnav a.fs-musterknopf,
.fs-sektion--navy a.fs-musterknopf {
  color: var(--fs-navy);
}

/* ========================================================================
   Systemweite Elementor-Harmonisierung, gemessen am 01.09.2026
   ------------------------------------------------------------------------
   Der Klassenvertrag aus design.css wurde von Elementors Kit-Regeln in drei
   sichtbaren Punkten überstimmt: 1240px-Container standen bei 1440px links
   auf x=25 statt bei x=91, ein als fs-label markiertes H6 erschien mit 52px,
   und die Hierarchie lag bei H2/H3 auf 32/28px statt 36/24px. Dadurch sahen
   inhaltlich gleichrangige Seiten wie verschiedene Templates aus.
   ======================================================================== */

/* fs-container bedeutet im Projekt immer: begrenzt und mittig. Rasterklassen
   dürfen die Zeilenlängen-Begrenzung ihrer Inhalte aufheben, aber nicht die
   Außenbreite des Containers selbst. */
.fs-inhalt .e-con.fs-container {
  width: 100% !important;
  max-width: var(--fs-container, 1240px) !important;
  margin-inline: auto !important;
}

.fs-inhalt .e-con.fs-container.fs-container--schmal {
  max-width: var(--fs-container-schmal, 820px) !important;
}

/* Elementors Kit setzte eigene Größen direkt auf .elementor-heading-title.
   Die echten HTML-Ebenen folgen wieder der Skala aus dem Design-Manifest. */
.fs-inhalt .elementor-widget-heading h1.elementor-heading-title {
  font-family: var(--fs-font-ui) !important;
  font-size: var(--fs-h1) !important;
  font-weight: 700 !important;
  line-height: var(--fs-lh-h1) !important;
  letter-spacing: -0.01em !important;
}

.fs-inhalt .elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--fs-font-ui) !important;
  font-size: var(--fs-h2) !important;
  font-weight: 700 !important;
  line-height: var(--fs-lh-h2) !important;
  letter-spacing: -0.005em !important;
}

.fs-inhalt .elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--fs-font-ui) !important;
  font-size: var(--fs-h3) !important;
  font-weight: 600 !important;
  line-height: var(--fs-lh-h3) !important;
  letter-spacing: normal !important;
}

/* fs-label sitzt bei Elementor am Widget, nicht am inneren H6. Ohne diesen
   Durchgriff erbte das Label die 52px des Kits und konkurrierte mit der H1. */
.fs-inhalt .elementor-widget-heading.fs-label .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--fs-font-ui) !important;
  font-size: var(--fs-label-gr) !important;
  font-weight: 600 !important;
  line-height: var(--fs-lh-eng) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fs-sekundaer) !important;
}

/* Unausgezeichnete Text-Widgets liefen mit Elementors 18px. Komponenten mit
   eigener fs-Klasse behalten ihre bewusste Rolle, normaler Fließtext nutzt
   wieder die responsive 16-17px-Skala. */
.fs-inhalt .elementor-widget-text-editor:not([class*="fs-"]),
.fs-inhalt .elementor-widget-text-editor:not([class*="fs-"]) :where(p, li) {
  font-family: var(--fs-font-ui) !important;
  font-size: var(--fs-text-gr) !important;
  line-height: var(--fs-lh-text) !important;
}

/* Die sechs Marketing-Heros besitzen dieselbe Kindfolge. Mit Elementors
   pauschalen 20px waren Label, H1, Subline und Aktion gleich gewichtet.
   Der Markenrhythmus lautet stattdessen 15px, 20px und 25px. */
.fs-inhalt .e-con.fs-hero__text {
  gap: 0 !important;
}

.fs-inhalt .e-con.fs-hero__text > .elementor-widget-heading.fs-label {
  margin-bottom: var(--fs-s15) !important;
}

.fs-inhalt .e-con.fs-hero__text > .elementor-widget-heading:not(.fs-label) {
  margin-bottom: var(--fs-s20) !important;
}

.fs-inhalt .e-con.fs-hero__text > .elementor-widget-text-editor {
  margin-bottom: var(--fs-s25) !important;
}

/* ==========================================================================
   Landingpages, gemeldet am 01.09.2026 an der Steinoptik-Seite
   --------------------------------------------------------------------------
   Die Elementor-Container standen durchgehend auf flex-direction:column.
   Die Klassen fs-raster-2/3/4 waren zwar gesetzt, aber als Grid-Vorgaben
   ohne display:grid wirkungslos gegen Elementors Spaltenrichtung. Ergebnis:
   alles stapelte sich untereinander, ein Produktbild lief seitenbreit über
   einen ganzen Bildschirm, die Buttons standen einzeln übereinander.
   Diese Regeln erzwingen die Raster unabhängig von Elementors Richtung.
   ========================================================================== */

.e-con.fs-raster-2,
.elementor-element.fs-raster-2 {
  display: grid !important; /* schlägt Elementors display:flex am Container */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-s40);
}

.e-con.fs-raster-3,
.elementor-element.fs-raster-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-s25);
}

.e-con.fs-raster-4,
.elementor-element.fs-raster-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-s25);
}

@media (max-width: 1023px) {
  .e-con.fs-raster-3, .elementor-element.fs-raster-3,
  .e-con.fs-raster-4, .elementor-element.fs-raster-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .e-con.fs-raster-2, .elementor-element.fs-raster-2,
  .e-con.fs-raster-3, .elementor-element.fs-raster-3,
  .e-con.fs-raster-4, .elementor-element.fs-raster-4 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fs-s20);
  }
}

/* Der Hero der Landingpages nutzt dieselben Klassen wie die Startseite.
   Elementors Vollbreite wird auf den Container gedeckelt. */
.e-con.fs-hero {
  max-width: var(--fs-container, 1240px);
  margin-inline: auto;
  padding-inline: var(--fs-s25);
}

/* Bilder im Inhalt der Landingpages: begrenzt, beschnitten, gerundet.
   Die Detailaufnahmen sind vollflächige Strukturbilder und vertragen das. */
.fs-raster-2 .elementor-widget-image img,
.fs-sektion .elementor-widget-image:not(.fs-hero__bild):not(.fs-dekor__bild) img {
  width: 100%;
  max-height: 460px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--fs-radius);
}

.fs-hero__medien .fs-hero__bild img { max-height: none; }

/* Der Hero hält dieselbe Breite wie jede andere Sektion. Elementors
   generierte Containerregel überschrieb die Deckelung, dadurch lief der
   Hero mit 1390px breiter als der Rest der Seite (1240px). */
.e-con.fs-hero {
  max-width: var(--fs-container, 1240px) !important; /* gegen Elementors Element-CSS */
}

/* --------------------------------------------------------------------------
   Folgen der Containerklassen-Reparatur, gemeldet am 01.09.2026
   --------------------------------------------------------------------------
   Seit die Containerklassen wirklich rendern, treffen zwei Altlasten
   aufeinander:

   1. Die Rasterkinder tragen noch feste Breiten aus der Zeit, als das Raster
      eine Flex-Zeile war. Im Grid ergab das 59px schmale Spalten, der Text
      brach auf einen Buchstaben je Zeile um (Klickvinyl, Vorteile-Reihe).
   2. fs-karte zeichnet ihren Rahmen jetzt wirklich, aber etliche Karten aus
      den Elementor-JSONs haben keinen Innenabstand. Ein Rahmen direkt am
      Text sieht aus wie ein Versehen (Vertrauensleiste der Startseite).
   -------------------------------------------------------------------------- */

.e-con.fs-raster-2 > .e-con,
.e-con.fs-raster-3 > .e-con,
.e-con.fs-raster-4 > .e-con,
.e-con.fs-raster-2 > .elementor-element,
.e-con.fs-raster-3 > .elementor-element,
.e-con.fs-raster-4 > .elementor-element {
  width: auto !important;   /* schlaegt Elementors Element-Breite */
  max-width: none;
  min-width: 0;
}

/* Karten haben den Kartenabstand aus dem Manifest: 25px, mobil 20px. Live
   setzte Elementor am Container außerdem Radius 0 statt der Marken-3px. */
.fs-inhalt .e-con.fs-karte {
  padding: var(--fs-s25);
  border-radius: var(--fs-radius) !important;
}

@media (max-width: 767px) {
  .fs-inhalt .e-con.fs-karte { padding: var(--fs-s20); }
}

/* ==========================================================================
   Umsetzung der drei Codex-Prüfberichte vom 01.09.2026
   ========================================================================== */

/* 1. Kopfzeile: die verschenkte Mitte. Suche von 440 auf 560px, Eingabe und
   Gold-CTA auf dieselbe Höhe 52px, Suchknopf als klare Schaltfläche. */
.fs-suchfeld { max-width: 560px; height: 52px; }
.fs-musterknopf { height: 52px; }
.fs-suchfeld__knopf { width: 52px; height: 44px; }

/* 2. H1-Konsistenz: die Hero-Überschriften waren sichtbar kleiner als die
   Sortiments-H1, die Hierarchie wechselte je Seitentyp. Manifestwert 52px. */
@media (min-width: 1024px) {
  .fs-hero__text h1,
  .fs-hero__text .elementor-heading-title.elementor-size-default {
    font-size: 52px;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
}

/* 3. Nur die ausgezeichnete Hero-Subline nutzt Lora. Weitere Fakten im Hero
   bleiben in Montserrat und damit klar von der Erzählstimme getrennt. */
.fs-hero__text .fs-erzaehl p {
  font-family: var(--fs-font-erzaehl, Lora, Georgia, serif);
  font-size: var(--fs-erzaehl-gr);
  line-height: var(--fs-lh-erzaehl);
  max-width: 46ch;
}

/* 4. Der Hero verschluckte den ersten Bildschirm: 120px Polster oben und
   unten, danach begann erst bei 675px angeschnittener Text. Das zentrale
   Hero-Token führt jetzt die verbindlichen 60px, mobil 50px. */
.e-con.fs-hero {
  padding-top: var(--fs-sektion-y-hero);
  padding-bottom: var(--fs-sektion-y-hero);
}

/* 5. Nur echte Raumfotos rücken nach unten, damit der Boden das Bild trägt.
   Freigestellte Produkt- und Detailbilder bleiben dagegen mittig. */
.fs-hero__bild--bodenfokus img { object-position: center 70%; }

/* ========================================================================
   Kopfzeilensuche: ein Feld statt verschachtelter Doppelrahmen
   ========================================================================
   Gemessen am 01.09.2026: Die globale input[type="search"]-Regel und die
   Elementor-Kit-Regeln gewannen gegen den bisherigen Klassen-Reset. Dadurch
   lagen ein eigener Input-Rahmen und eine weiße Fokusfläche innerhalb des
   bereits gerahmten Suchformulars. Der hohe Selektor hält die Eingabe
   dauerhaft rahmenlos. Der sichtbare Zustand liegt nur noch am Gesamtfeld. */

.fs-header .fs-suchfeld {
  --fs-fokus: var(--fs-navy);
  padding: 0;
  border-color: var(--fs-muted);
  transition: none;
}

.fs-header .fs-suchfeld:focus-within {
  border-color: var(--fs-navy);
  background-color: var(--fs-weiss);
}

.fs-header .fs-suchfeld:has(> input[type="search"].fs-suchfeld__eingabe:focus-visible) {
  outline: 2px solid var(--fs-navy);
  outline-offset: 2px;
}

.fs-header .fs-suchfeld > input[type="search"].fs-suchfeld__eingabe,
.fs-header .fs-suchfeld > input[type="search"].fs-suchfeld__eingabe:focus,
.fs-header .fs-suchfeld > input[type="search"].fs-suchfeld__eingabe:focus-visible {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 var(--fs-s15);
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  font-family: var(--fs-font-ui);
  font-size: 1rem;
  line-height: var(--fs-lh-eng);
  color: var(--fs-anthrazit);
  caret-color: var(--fs-navy);
}

.fs-header .fs-suchfeld > input[type="search"].fs-suchfeld__eingabe::placeholder {
  color: var(--fs-muted);
  opacity: 1;
}

.fs-header .fs-suchfeld > .fs-suchfeld__knopf {
  flex: 0 0 52px;
  width: 52px;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-left: var(--fs-linie-staerke) solid var(--fs-linie);
  border-radius: 0 var(--fs-radius) var(--fs-radius) 0;
  background-color: transparent;
}

.fs-header .fs-suchfeld > .fs-suchfeld__knopf:focus-visible {
  background-color: var(--fs-navy-schleier);
}

@media (hover: hover) and (pointer: fine) {
  .fs-header .fs-suchfeld:hover { border-color: var(--fs-navy); }
  .fs-header .fs-suchfeld > .fs-suchfeld__knopf:hover {
    background-color: var(--fs-navy-schleier);
  }
}

@media (max-width: 1023px) {
  .fs-header .fs-suchfeld > .fs-suchfeld__knopf {
    flex-basis: 48px;
    width: 48px;
  }
}

/* 6. Mobil: die Goldkachel im Kopf war ein Rätsel-Icon ohne Wort. Die
   Beschriftung bleibt jetzt auf jeder Breite sichtbar. */
@media (max-width: 1023px) {
  .fs-musterknopf { padding: 0 var(--fs-s15); height: 48px; }
  .fs-musterknopf__text { display: inline-flex; }
  .fs-musterknopf__signet { display: none; }

  /*
   * Suche mobil als zweite Zeile. Das frühere Flex-Wrapping stellte bei
   * 390px erst das Logo, dann die Aktionen und zuletzt die Suche untereinander.
   * Gemessen am 01.09.2026: 174px Kopfzeilenhöhe statt der geplanten 127px.
   */
  .fs-header__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo aktionen"
      "suche suche";
    column-gap: var(--fs-s10);
    row-gap: var(--fs-s10);
    padding-top: var(--fs-s10);
    padding-bottom: var(--fs-s10);
  }

  .fs-header__logo {
    grid-area: logo;
    min-width: 0;
  }

  .fs-header__aktionen {
    grid-area: aktionen;
    margin-left: 0;
  }

  .fs-suchfeld {
    grid-area: suche;
    display: flex;
    width: 100%;
    max-width: none;
    height: 48px;
  }
}

@media (max-width: 479px) {
  .fs-header__aktionen { gap: var(--fs-s5); }

  .fs-musterknopf {
    min-width: 112px;
    padding-right: var(--fs-s10);
    padding-left: var(--fs-s10);
    justify-content: center;
    font-size: 13px;
  }

  .fs-musterknopf__text { gap: var(--fs-s5); }
  .fs-musterknopf:not(.ist-gefuellt) .fs-musterknopf__stand { display: none; }

  .fs-header__warenkorb,
  .fs-burger {
    width: 48px;
    height: 48px;
  }

  .fs-header__warenkorb {
    position: relative;
    justify-content: center;
    gap: 0;
  }

  .fs-header__warenkorb-zahl {
    position: absolute;
    top: var(--fs-s5);
    right: var(--fs-s5);
    min-width: 14px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
  }
}

@media (max-width: 374px) {
  .fs-header__logo { gap: var(--fs-s5); }
  .fs-header__logo .fs-logo__zeile {
    letter-spacing: 0.12em;
  }
}

/* 7. Sortiment mobil: zwei 165px-Karten je Zeile machten alles klein und
   schoben den CTA aus dem Bildschirm. Eine volle Karte je Zeile. */
@media (max-width: 767px) {
  .fs-dekor-raster,
  ul.products.fs-dekor-raster {
    grid-template-columns: minmax(0, 1fr) !important; /* gegen Woo columns-4 */
  }

  /* Die alte Zweispalten-Karte verkleinerte Namen auf 17px. Seit jede Karte
     bei 390px die vollen 340px nutzt, gilt wieder die mobile H3 mit 20px. */
  .fs-dekor__name { font-size: var(--fs-h3); }

  /* Vertrauenspunkte als kompakte wischbare Zeile statt 300px Block. */
  .fs-vertrauen--archiv {
    display: flex;
    overflow-x: auto;
    gap: var(--fs-s20);
    padding-block: var(--fs-s10);
    -webkit-overflow-scrolling: touch;
  }
  .fs-vertrauen--archiv .fs-vertrauen__punkt {
    flex: 0 0 auto;
    min-height: 48px;
    white-space: nowrap;
  }
}

/* 8. Produktseite mobil: feste Leiste am unteren Rand mit der Musteraktion.
   Vorher war im ganzen ersten Bildschirm keine Handlung erreichbar. */
.fs-mobilleiste { display: none; }

@media (max-width: 767px) {
  .fs-mobilleiste {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    padding: var(--fs-s10) var(--fs-s15) calc(var(--fs-s10) + env(safe-area-inset-bottom, 0px));
    background-color: var(--fs-weiss);
    border-top: 1px solid var(--fs-linie);
  }
  .fs-mobilleiste .fs-muster-btn,
  .fs-mobilleiste .fs-btn-muster {
    width: 100%;
    min-height: 48px;
  }
  /* Der Inhalt darf nicht hinter der Leiste enden. */
  .single-product .fs-inhalt { padding-bottom: 90px; }
}

/* 9. Materialstreifen unter den Hero-Bildern: die Signatur aus dem Manifest.
   Bild und Streifen sind eine Einheit ohne Zwischenraum. */
.e-con.fs-hero__medien {
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  gap: 0 !important; /* Elementors Element-CSS kommt nach dem Theme */
}
.fs-hero__medien .fs-hero__bild img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.fs-hero__medien .fs-herostreifen { margin: 0; }
.fs-hero__medien .fs-herostreifen img {
  display: block;
  width: 100%;
  height: 34px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0 0 var(--fs-radius) var(--fs-radius);
  padding: 0;
  max-height: none;
}

/* Technikzeile in der Dekor-Karte und der Hinweis an der Systemwahl. */
.fs-dekor__technik {
  margin: var(--fs-s5) 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fs-muted);
}

.fs-systemwahl__hinweis {
  margin: 0 0 var(--fs-s5);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fs-muted);
}

/* Bild und Materialstreifen schliessen dicht: Elementor gibt Bild-Widgets
   eine eigene Unterkante, die den Streifen abloeste. */
.fs-hero__medien .elementor-widget,
.fs-hero__medien .elementor-widget-container,
.fs-hero__medien figure {
  margin: 0 !important; /* gegen Elementors Widget-Margin */
}

/* Textreiche Systemabschnitte nutzen die Breite als redaktionelle Teilung:
   Überschrift links, belastbarer Lesetext rechts. So entsteht keine zufällige
   Leerfläche, ohne ein bereits verwendetes Produktbild zu wiederholen. */
.e-con.fs-editorialtext > .e-con-inner {
  gap: var(--fs-s25) !important;
}

@media (min-width: 1024px) {
  .e-con.fs-editorialtext > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
    column-gap: var(--fs-s75) !important;
    row-gap: var(--fs-s25) !important;
    align-items: start;
  }

  .fs-editorialtext > .e-con-inner > .elementor-widget {
    width: auto !important;
    min-width: 0;
  }

  .fs-editorialtext > .e-con-inner > .elementor-widget-heading {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .fs-editorialtext > .e-con-inner > .elementor-widget-text-editor {
    grid-column: 2;
  }
}

/* ==========================================================================
   Musterbox-Einstieg als Werkzeug, geprüft am 01.09.2026
   ========================================================================== */

.e-con.fs-musterbox-hero {
  padding-top: var(--fs-s60);
  padding-bottom: var(--fs-s60);
}

.e-con.fs-musterbox-einstieg {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(340px, 45fr);
  column-gap: var(--fs-s60);
  align-items: center;
}

.fs-musterbox-einstieg > .elementor-widget-heading,
.fs-musterbox-einstieg > .elementor-widget-text-editor,
.fs-musterbox-einstieg > .e-con {
  grid-column: 1;
  max-width: 430px;
}

.fs-musterbox-einstieg > .fs-musterbox-einstieg__status {
  grid-column: 2;
  grid-row: 1 / span 4;
  width: 100%;
  max-width: none;
}

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

.fs-musterbox-fakten li {
  display: flex;
  align-items: center;
  min-height: 50px;
  margin: 0;
  padding: var(--fs-s10);
  border-top: 2px solid var(--fs-gold-dark);
  background-color: var(--fs-sand);
  color: var(--fs-navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.fs-musterbox-fakten__preis {
  margin: var(--fs-s10) 0 0;
  color: var(--fs-muted);
  font-size: 14px;
}

.e-con.fs-musterbox-auswahl {
  padding-top: var(--fs-s30);
}

/* Nur der aktive Knopf ist weiss auf Navy. Der gesperrte Zustand nimmt
   sich davon aus, sonst steht weisse Schrift auf Sand (1,27:1). */
a.fs-musterstatus__kasse:not(.ist-gesperrt),
a.fs-musterstatus__kasse:not(.ist-gesperrt):visited,
a.fs-musterstatus__kasse:not(.ist-gesperrt):hover,
a.fs-musterstatus__kasse:not(.ist-gesperrt):focus-visible {
  color: var(--fs-weiss) !important;
}

@media (max-width: 767px) {
  .e-con.fs-musterbox-hero {
    padding-top: var(--fs-s30);
    padding-bottom: var(--fs-s30);
  }

  .e-con.fs-musterbox-einstieg {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fs-s20);
  }

  .fs-musterbox-einstieg > .elementor-widget-heading,
  .fs-musterbox-einstieg > .elementor-widget-text-editor,
  .fs-musterbox-einstieg > .e-con,
  .fs-musterbox-einstieg > .fs-musterbox-einstieg__status {
    width: 100%;
    max-width: none;
  }

  .fs-musterbox-einstieg > .elementor-widget-heading { order: 1; }
  .fs-musterbox-einstieg > .fs-musterbox-fakten-widget { order: 2; }
  .fs-musterbox-einstieg > .fs-musterbox-einstieg__aktionen { order: 3; }
  .fs-musterbox-einstieg > .fs-musterbox-einstieg__erzaehl { order: 4; }
  .fs-musterbox-einstieg > .fs-musterbox-einstieg__status { order: 5; }

  .fs-musterbox-fakten { gap: var(--fs-s5); }
  .fs-musterbox-fakten li { padding: var(--fs-s5); }

  .e-con.fs-musterbox-auswahl {
    padding-top: var(--fs-s30);
    padding-bottom: var(--fs-s50);
  }
}

/* ==========================================================================
   Warenkorb als ruhige Shop-Seite, geprüft am 01.09.2026
   ========================================================================== */

.woocommerce-cart .fs-inhalt > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--fs-s40);
  width: min(calc(100% - (2 * var(--fs-rand))), var(--fs-container));
  margin-inline: auto;
  padding: var(--fs-s50) 0 var(--fs-s75);
}

.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .fs-warenkorb-kopf {
  grid-column: 1 / -1;
}

.fs-warenkorb-kopf {
  max-width: 680px;
}

.fs-warenkorb-kopf .fs-label {
  margin: 0 0 var(--fs-s10);
}

.fs-warenkorb-kopf h1 {
  margin: 0 0 var(--fs-s15);
}

.fs-warenkorb-kopf > :last-child {
  margin-bottom: 0;
  max-width: 54ch;
}

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
  min-width: 0;
}

.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1;
}

.woocommerce-cart .cart-collaterals {
  grid-column: 2;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  top: 165px;
}

.admin-bar.woocommerce-cart .cart-collaterals .cart_totals {
  top: 197px;
}

.woocommerce-cart table.cart td.actions {
  padding: var(--fs-s20);
}

.woocommerce-cart table.cart td.actions .coupon {
  display: grid;
  grid-template-columns: minmax(180px, 240px) auto;
  gap: var(--fs-s10);
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: 100%;
  min-height: var(--fs-btn-hoehe);
  margin: 0;
}

.woocommerce-cart table.cart td.actions .button {
  min-height: var(--fs-btn-hoehe);
  margin: 0;
  padding-inline: var(--fs-s20);
  white-space: nowrap;
}

.woocommerce table.cart tr.fs-musterzeile td {
  background-color: var(--fs-gold-schleier);
}

@media (max-width: 1024px) {
  .woocommerce-cart .fs-inhalt > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fs-s30);
  }

  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals {
    grid-column: 1;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    position: static;
  }
}

@media (max-width: 767px) {
  .woocommerce-cart .fs-inhalt > .woocommerce {
    width: calc(100% - (2 * var(--fs-rand)));
    padding: var(--fs-s30) 0 var(--fs-s50);
  }

  .fs-warenkorb-kopf h1 {
    font-size: var(--fs-h2);
  }

  .woocommerce table.shop_table.cart {
    display: block;
    border: 0;
    background: transparent;
  }

  .woocommerce table.shop_table.cart tbody {
    display: grid;
    gap: var(--fs-s15);
  }

  .woocommerce table.shop_table.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) var(--fs-touch);
    gap: var(--fs-s10) var(--fs-s15);
    padding: var(--fs-s20);
    border: 1px solid var(--fs-linie);
    border-radius: var(--fs-radius);
    background-color: var(--fs-weiss);
  }

  .woocommerce table.shop_table.cart tr.fs-musterzeile {
    background-color: var(--fs-gold-schleier);
    border-color: var(--fs-gold-kante);
  }

  .woocommerce table.shop_table.cart tr.fs-musterzeile td {
    background: transparent;
  }

  .woocommerce table.shop_table.cart td.product-thumbnail {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    width: 72px;
  }

  .woocommerce table.shop_table.cart td.product-thumbnail::before {
    display: none;
  }

  .woocommerce table.shop_table.cart td.product-thumbnail img {
    width: 72px;
    height: 72px;
    padding: 0;
    object-fit: cover;
    background-color: var(--fs-sand);
  }

  .woocommerce table.shop_table.cart td.product-name {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .woocommerce table.shop_table.cart td.product-remove {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .woocommerce table.shop_table.cart td.product-price,
  .woocommerce table.shop_table.cart td.product-quantity,
  .woocommerce table.shop_table.cart td.product-subtotal {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-s15);
    min-width: 0;
  }

  .woocommerce table.shop_table.cart td.product-price { grid-row: 2; }
  .woocommerce table.shop_table.cart td.product-quantity { grid-row: 3; }
  .woocommerce table.shop_table.cart td.product-subtotal { grid-row: 4; }

  .woocommerce table.shop_table.cart td[data-title]::before {
    float: none;
    color: var(--fs-muted);
    font-size: 13px;
    font-weight: 600;
  }

  .woocommerce table.shop_table.cart dl.variation {
    margin: var(--fs-s10) 0 0;
    color: var(--fs-muted);
    font-size: 13px;
  }

  .woocommerce table.shop_table.cart dl.variation dt,
  .woocommerce table.shop_table.cart dl.variation dd,
  .woocommerce table.shop_table.cart dl.variation dd p {
    display: inline;
    float: none;
    margin: 0;
  }

  .woocommerce table.shop_table.cart tr:not(.cart_item) {
    display: block;
    padding: 0;
    border: 0;
  }

  .woocommerce table.shop_table.cart td.actions {
    display: grid;
    width: 100%;
    gap: var(--fs-s15);
    padding: var(--fs-s20);
    border: 1px solid var(--fs-linie);
    border-radius: var(--fs-radius);
    background-color: var(--fs-weiss);
  }

  .woocommerce table.shop_table.cart td.actions::before {
    display: none;
  }

  .woocommerce-cart table.cart td.actions .coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    float: none;
    width: 100%;
    gap: var(--fs-s10);
  }

  .woocommerce-cart table.cart td.actions .button,
  .woocommerce-cart table.cart td.actions .coupon .input-text {
    width: 100%;
  }

  .woocommerce-cart .cart_totals {
    padding: var(--fs-s20);
  }
}

/* ==========================================================================
   Sortiment als Filter- und Vergleichswerkzeug, geprüft am 01.09.2026
   ========================================================================== */

.fs-sortiment {
  margin: 0 0 var(--fs-s30);
}

.fs-sortiment__form {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(0, 2fr) minmax(190px, .75fr) auto;
  gap: var(--fs-s15);
  align-items: end;
  padding: var(--fs-s20);
  border: 1px solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
}

.fs-sortiment__ergebnis {
  align-self: center;
  margin: 0;
  color: var(--fs-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.fs-sortiment__filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-s10);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fs-sortiment__feld {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s5);
  min-width: 0;
  color: var(--fs-navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.fs-sortiment__feld select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 38px 0 var(--fs-s10);
  border: 1px solid var(--fs-linie);
  border-radius: var(--fs-radius);
  background-color: var(--fs-wollweiss);
  color: var(--fs-anthrazit);
  font-family: var(--fs-font-ui);
  font-size: 14px;
}

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

.fs-sortiment__aktionen {
  display: flex;
  align-items: center;
  gap: var(--fs-s15);
  white-space: nowrap;
}

.fs-sortiment__aktionen .fs-btn-primaer {
  min-height: 48px;
  padding-inline: var(--fs-s20);
}

.fs-sortiment__mobilaktionen { display: none; }

.fs-sortiment__aktiv {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s10);
  margin: var(--fs-s15) 0 0;
  padding: 0;
  list-style: none;
}

.fs-sortiment__aktiv a {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s10);
  min-height: var(--fs-touch);
  padding: 0 var(--fs-s15);
  border: 1px solid var(--fs-gold-kante);
  border-radius: var(--fs-radius);
  background-color: var(--fs-sand);
  color: var(--fs-navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

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

.fs-archiv__trust {
  margin-top: var(--fs-s40);
}

@media (max-width: 1199px) {
  .fs-sortiment__form {
    grid-template-columns: minmax(0, 1fr) minmax(190px, .4fr) auto;
  }

  .fs-sortiment__ergebnis { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .fs-sortiment {
    margin-bottom: var(--fs-s20);
  }

  .fs-sortiment__form {
    display: block;
    padding: var(--fs-s15);
  }

  .fs-sortiment__ergebnis {
    margin-bottom: var(--fs-s15);
  }

  .fs-sortiment__mobilaktionen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-s10);
  }

  .fs-sortiment__schalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-s10);
    min-height: 48px;
    padding: 0 var(--fs-s15);
    border: 1px solid var(--fs-navy);
    border-radius: var(--fs-radius);
    background-color: var(--fs-weiss);
    color: var(--fs-navy);
    font-family: var(--fs-font-ui);
    font-size: 15px;
    font-weight: 600;
  }

  .fs-sortiment__schalter[aria-expanded="true"] {
    background-color: var(--fs-sand);
  }

  .fs-sortiment__anzahl {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    min-height: 24px;
    border-radius: var(--fs-radius);
    background-color: var(--fs-navy);
    color: var(--fs-weiss);
    font-size: 12px;
  }

  .fs-sortiment [data-fs-sortiment-panel][hidden] {
    display: none !important;
  }

  .fs-sortiment__filter,
  .fs-sortiment__sortierung {
    margin-top: var(--fs-s15);
    padding: var(--fs-s15);
    background-color: var(--fs-sand);
  }

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

  .fs-sortiment__aktionen {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--fs-s15);
    white-space: normal;
  }

  .fs-sortiment__aktionen > * {
    width: 100%;
    text-align: center;
  }

  .fs-sortiment__aktionen .fs-link {
    min-height: var(--fs-touch);
    padding-block: var(--fs-s10);
  }

  .fs-sortiment__aktiv {
    gap: var(--fs-s5);
  }

  .fs-sortiment__aktiv li,
  .fs-sortiment__aktiv a {
    width: 100%;
  }

  .fs-sortiment__aktiv a {
    justify-content: space-between;
  }

  .fs-archiv__trust {
    margin-top: var(--fs-s30);
  }
}

/* 8. Produktkarten: technische Werte, ruhige Bewegung und verwandte Dekore. */
.fs-dekor {
  isolation: isolate;
  transition: transform var(--fs-dauer) var(--fs-ease);
}

@media (hover: hover) and (pointer: fine) {
  .fs-dekor:hover,
  .fs-dekor:focus-within {
    transform: translateY(-3px);
  }
}

.fs-dekor__technik {
  display: grid;
  gap: 2px;
  min-height: 38px;
  margin: var(--fs-s5) 0 0;
  padding: 0;
  list-style: none;
}

.fs-dekor__technik li {
  margin: 0;
}

@media (min-width: 768px) {
  .fs-verwandt .fs-dekor-raster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 930px;
    margin-inline: auto;
  }

  .fs-verwandt .fs-dekor {
    flex: 0 1 290px;
    width: min(100%, 290px);
  }
}

.fs-verwandt__titel,
.fs-verwandt__mehr {
  text-align: center;
}

.fs-verwandt__mehr {
  margin: var(--fs-s30) 0 0;
}

/* Das Suchsymbol bleibt fein, die gesamte Schaltfläche bleibt ein 52px-Ziel. */
.fs-suchfeld__knopf {
  width: 52px;
  height: 52px;
}

.fs-suchfeld__knopf .fs-icon--suche {
  width: 18px;
  height: 18px;
}

/* 25px Außenrand gelten auch auf üblichen schmalen Telefonen. */
@media (max-width: 479px) {
  :root { --fs-rand: var(--fs-s25); }
}

@media (prefers-reduced-motion: reduce) {
  .fs-dekor,
  .fs-dekor:hover,
  .fs-dekor:focus-within {
    transform: none;
    transition: none;
  }
}

/* ========================================================================
   FAQ: klare Hierarchie statt Elementors verschachtelter Rahmen
   ======================================================================== */

.e-con.fs-faq-einstieg > .elementor-element.fs-sprungnav {
  margin-top: 0;
}

/* Zwischen 1024px und 1199px ist die zweite Kopfzeile ausgeblendet. Der
   bisherige Desktop-Offset ließ Sprungziele dort rund 48px zu tief stehen. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .fs-sprungziel {
    scroll-margin-top: calc(80px + var(--fs-linie-staerke) + var(--fs-s25));
  }
}

.e-con.fs-faq-sektion,
.e-con.fs-faq-sektion > .e-con-inner {
  gap: var(--fs-s30) !important;
}

.e-con.fs-faq-sektion > .elementor-widget-heading,
.e-con.fs-faq-sektion > .elementor-element.fs-faq,
.e-con.fs-faq-sektion > .e-con-inner > .elementor-widget-heading,
.e-con.fs-faq-sektion > .e-con-inner > .elementor-element.fs-faq {
  width: 100% !important;
  max-width: var(--fs-container-schmal);
  margin-inline: auto;
}

.elementor-element.fs-faq .e-n-accordion {
  gap: 0 !important;
  border: 0 !important;
}

.elementor-element.fs-faq .e-n-accordion-item {
  margin: 0;
  border: 0 !important;
  border-top: var(--fs-linie-staerke) solid var(--fs-linie) !important;
  border-radius: 0 !important;
  background: transparent;
}

.elementor-element.fs-faq .e-n-accordion-item:last-child {
  border-bottom: var(--fs-linie-staerke) solid var(--fs-linie) !important;
}

.elementor-element.fs-faq .e-n-accordion-item[open] {
  border-top-color: var(--fs-gold-dark) !important;
}

.elementor-element.fs-faq .e-n-accordion-item-title {
  min-height: var(--fs-touch);
  padding: var(--fs-s20) var(--fs-s10) !important;
  gap: var(--fs-s20);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fs-navy);
}

.elementor-element.fs-faq .e-n-accordion-item-title:hover {
  background: var(--fs-gold-schleier) !important;
}

.elementor-element.fs-faq .e-n-accordion-item-title:focus-visible {
  outline: 2px solid var(--fs-gold-dark);
  outline-offset: 2px;
}

.elementor-element.fs-faq .e-n-accordion-item-title-header {
  flex: 1;
  min-width: 0;
}

.elementor-element.fs-faq .e-n-accordion-item-title-text {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--fs-lh-eng);
}

.elementor-element.fs-faq .e-n-accordion-item-title-icon {
  order: 2 !important;
  flex: 0 0 20px;
  margin-inline-start: auto;
  color: var(--fs-gold-dark);
}

.elementor-element.fs-faq .e-n-accordion-item > [role="region"],
.elementor-element.fs-faq .e-n-accordion-item > .e-con {
  border: 0 !important;
  background: transparent !important;
}

.elementor-element.fs-faq .e-n-accordion-item > .e-con,
.elementor-element.fs-faq .e-n-accordion-item > [role="region"] > .e-con {
  padding: 0 var(--fs-s10) var(--fs-s20) !important;
  border: 0 !important;
  background: transparent !important;
}

.elementor-element.fs-faq .e-n-accordion-item > .e-con p:last-child,
.elementor-element.fs-faq .e-n-accordion-item > [role="region"] p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .e-con.fs-faq-sektion,
  .e-con.fs-faq-sektion > .e-con-inner {
    gap: var(--fs-s20) !important;
  }

  .elementor-element.fs-faq .e-n-accordion-item-title {
    padding-block: var(--fs-s15) !important;
    gap: var(--fs-s15);
  }

  .elementor-element.fs-faq .e-n-accordion-item > .e-con,
  .elementor-element.fs-faq .e-n-accordion-item > [role="region"] > .e-con {
    padding-bottom: var(--fs-s15) !important;
  }
}

/* ==========================================================================
   Nachprüfung des Codex-Standes vom 01.09.2026, gemessen am 02.09.2026
   --------------------------------------------------------------------------
   Codex hat 20 Commits blind gebaut, ohne die Seite je zu rendern (seine
   Sandbox kommt nicht an SSH). Nach dem Ausrollen blieben vier Fehler.
   ========================================================================== */

/* 1. Gesperrte Kasse-Knöpfe waren unsichtbar: opacity 0.45 auf weißer
   Schrift ergab 1,27:1 auf Sand. Gesperrt heißt jetzt Umriss und gedämpfte
   Schrift, kein Geisterknopf. */
.fs-musterstatus__kasse.ist-gesperrt,
.fs-btn-primaer.ist-gesperrt,
.fs-btn-primaer[aria-disabled="true"] {
  opacity: 1;
  background-color: transparent;
  border: 1px solid var(--fs-linie);
  color: var(--fs-muted);
  cursor: default;
  box-shadow: none;
}

/* Auf der Startseite und anderen Seiten hat ein gesperrter Kasse-Knopf
   keinen Zweck, dort führt der Gold-Button in die Musterbox. Nur die
   Übersicht auf der Musterbox-Seite zeigt ihn gesperrt, so wollte es die
   Prüfung: "0/5, fünf leere Plätze, gesperrte Weiter-Schaltfläche". */
.fs-musterstatus:not(.fs-musterstatus--uebersicht) .fs-musterstatus__kasse.ist-gesperrt {
  display: none;
}

/* 2. Musterbox-Hero: die beiden Buttons standen auf dem Desktop übereinander,
   obwohl der Container auf row steht. Nebeneinander ab Tablet, wie auf jeder
   anderen Seite. */
@media (min-width: 768px) {
  .e-con.fs-musterbox-einstieg > .e-con.fs-musterbox-einstieg__aktionen {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--fs-s15);
    align-items: center;
  }
  .e-con.fs-musterbox-einstieg__aktionen > .elementor-element {
    width: auto !important; /* gegen Elementors Element-Breite */
  }
}

/* 3. Die drei Fakten unter der H1 waren gequetschte Sandkästchen mit 12px
   Text, mobil dreispaltig auf 390px. Jetzt eine ruhige Zeile mit Punkten,
   mobil untereinander. */
.fs-musterbox-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-s5) var(--fs-s20);
  margin: var(--fs-s15) 0 0;
  padding: 0;
  list-style: none;
}

.fs-musterbox-fakten li {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s10);
  min-height: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  font-family: var(--fs-font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fs-anthrazit);
}

.fs-musterbox-fakten li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--fs-gold);
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .fs-musterbox-fakten { flex-direction: column; gap: var(--fs-s5); }
}

/* 4. Musterkarte: der Materialstreifen saß ÜBER dem Dekorbild, in der
   Sortimentskarte darunter. Das Manifest legt ihn unter das Bild, beide
   Karten müssen gleich lesen. */
.fs-musterkarte__medien {
  display: flex;
  flex-direction: column;
}

.fs-musterkarte__medien .fs-musterkarte__bild { order: 1; }
.fs-musterkarte__medien .fs-materialstreifen { order: 2; }
.fs-musterkarte__medien .fs-musterkarte__marke { order: 0; }

/* Nachschärfung, gemessen am 02.09.2026: musterbox.css lädt nach dieser
   Datei und gewann bei gleicher Spezifität. Deshalb hier eine Stufe höher. */
.fs-musterkarte .fs-musterkarte__medien {
  display: flex;
  flex-direction: column;
}

/* Die Textspalte der Musterbox ist laut Prüfbericht 430px breit. Zwei
   Buttons mit Standardpolster (246 + 215 + 15) passen dort nicht in eine
   Zeile. Auf dem Desktop bleiben sie nebeneinander mit kompakterem Polster. */
@media (min-width: 1024px) {
  .e-con.fs-musterbox-einstieg > .e-con.fs-musterbox-einstieg__aktionen {
    flex-wrap: nowrap;
  }
  .e-con.fs-musterbox-einstieg__aktionen .elementor-button {
    padding-inline: var(--fs-s20);
    white-space: nowrap;
  }
}

/* Leerer Warenkorb: der Zweispalter aus Tabelle und Summen hat ohne Inhalt
   keinen Sinn. Steht nur die Leer-Karte da, bekommt sie eine Spalte in der
   Mitte. Gemessen am 02.09.2026. */
.woocommerce-cart .fs-inhalt > .woocommerce:has(.fs-leer) {
  display: block;
  max-width: 640px;
  margin-inline: auto;
}

.woocommerce-cart .fs-leer {
  text-align: center;
}

.woocommerce-cart .fs-leer .fs-leer__aktion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-s15);
}

/* ==========================================================================
   Rundgang über alle 18 Seiten am 02.09.2026, Desktop und Mobil
   ========================================================================== */

/* 1. Produktseite: links endete die Galerie, rechts lief der Kauf 700px
   weiter, dazwischen ein Loch. Die Galerie läuft jetzt im Produktbereich
   mit (sticky), das Loch verschwindet beim Scrollen. */
@media (min-width: 1024px) {
  .fs-produkt { align-items: start; }
  .fs-produkt__galerie {
    position: sticky;
    top: 150px; /* unter der 128px hohen Kopfzeile */
  }
}

/* Der Variantentext (rund 600 Zeichen) stand in der Kaufspalte zwischen
   Systemwahl und Menge und schob den Warenkorb nach unten. Derselbe Text
   steht wortgleich weiter unten im Vergleich Klick gegen Kleben. */
.fs-produkt__info .woocommerce-variation-description { display: none; }

/* 2. Fünf Dekore in einer Reihe (Fischgrät): fs-raster-5. */
.e-con.fs-raster-5,
.elementor-element.fs-raster-5,
.fs-dekore.fs-raster-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fs-s20);
}
@media (max-width: 1199px) {
  .fs-dekore.fs-raster-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .fs-dekore.fs-raster-5 { grid-template-columns: minmax(0, 1fr); }
}

/* 3. Klebevinyl und Klickvinyl: zwischen Hero und Dekor-Sektion klafften
   340px. Die Sektion nach dem Hero beginnt mit 60px statt 100px. */
.e-con.fs-hero + .e-con { padding-top: var(--fs-s60); }

/* 4. Kontakt: der Sendeknopf war Elementor-Grau (105,114,125), sah aus wie
   gesperrt. Er ist der Primärknopf der Seite. */
.elementor-form .elementor-field-type-submit .elementor-button,
.elementor-form button[type="submit"].elementor-button {
  background-color: var(--fs-navy);
  color: var(--fs-weiss);
  border: 0;
  border-radius: var(--fs-radius);
  min-height: 52px;
  font-family: var(--fs-font-ui);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.elementor-form .elementor-field-type-submit .elementor-button:hover,
.elementor-form button[type="submit"].elementor-button:hover {
  background-color: var(--fs-navy-dunkel, #0E1B2E);
  color: var(--fs-weiss);
}

/* 5. Rechtsseiten: die H1 stand links am Containerrand (x=100), der Text
   darunter zentriert bei x=370. Die Überschrift folgt jetzt der Textspalte. */
.fs-seite__kopf {
  max-width: 700px;
  margin-inline: auto;
}

/* In der Fünferreihe (218px je Karte) brach "ab 34,90 € je m²" auf zwei
   Zeilen. Der Preis wird eine Stufe kleiner, die Einheit bleibt dahinter. */
.fs-raster-5 .fs-dekorkarte__preis .fs-preis { font-size: 22px; }
.fs-raster-5 .fs-dekorkarte__preis { white-space: nowrap; }

/* Gemessen am 02.09.2026: vom Ende des Hero-Inhalts bis zur nächsten H2
   lagen 240px (Hero-Polster 60 + Sektions-Polster 60 + Innencontainer +
   Überschriftenabstand). Die Sektion nach dem Hero beginnt enger. */
.e-con.fs-hero + .e-con { padding-top: var(--fs-s40); }
.e-con.fs-hero + .e-con > .e-con-inner { padding-top: 0; }
.e-con.fs-hero + .e-con h2:first-child,
.e-con.fs-hero + .e-con > .e-con-inner > .elementor-widget-heading:first-child { margin-top: 0; }

/* 404-Seite: eigene Vorlage statt Elternthema. Gemessen am 02.09.2026:
   weißer Knopf auf Wollweiß, kein Weg ins Sortiment. */
.fs-nichtgefunden { min-height: 60vh; display: flex; align-items: center; }
.fs-nichtgefunden__innen { max-width: 640px; margin-inline: auto; text-align: center; }
.fs-nichtgefunden__titel { margin: var(--fs-s10) 0 var(--fs-s15); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.15; color: var(--fs-navy); }
.fs-nichtgefunden__text { margin: 0 auto var(--fs-s25); max-width: 46ch; font-size: 17px; line-height: 1.6; }
.fs-nichtgefunden__aktion { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fs-s15); margin: 0 0 var(--fs-s30); }
.fs-nichtgefunden__suche { display: flex; gap: var(--fs-s10); max-width: 480px; margin: 0 auto var(--fs-s15); }
.fs-nichtgefunden__suche .fs-suchfeld__eingabe { flex: 1 1 auto; min-height: 48px; padding: 0 var(--fs-s15); border: 1px solid var(--fs-linie); border-radius: var(--fs-radius); background-color: var(--fs-weiss); font-size: 16px; }
.fs-nichtgefunden__suche .fs-btn-primaer { min-height: 48px; padding-inline: var(--fs-s20); }
@media (max-width: 479px) {
  .fs-nichtgefunden__suche { flex-direction: column; }
  .fs-nichtgefunden__aktion a { width: 100%; }
}

/* Abnahme 05.09.2026, Klick/Klebe bei 1440px: äußere Sektion und
   e-con-inner hatten je 100px Polster, zwischen Karten und H2 lagen 400px.
   Boxed-Sektionen bekommen das Polster einmal; 75 + 75 ergibt 150px. */
.fs-inhalt .e-con.fs-sektion.e-con-boxed > .e-con-inner {
  padding-block: 0;
}
@media (min-width: 768px) {
  .fs-inhalt .e-con.fs-sektion.e-con-boxed:not(.fs-hero):not(.fs-sektion--kompakt) {
    padding-block: var(--fs-s75);
  }
  .fs-inhalt .e-con.fs-hero + .e-con.fs-sektion.e-con-boxed {
    padding-top: var(--fs-s40);
  }
}

/* Abnahme 05.09.2026: 430px Aktionsspalte gegen 235,78 + 204,95px
   Buttons plus 15px Abstand. Flex schrumpfte die Widgets, deren Inhalt
   überstand. Die Aktionen nutzen ihre vorhandene Rasterspalte vollständig. */
@media (min-width: 768px) {
  .e-con.fs-musterbox-einstieg > .e-con.fs-musterbox-einstieg__aktionen {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .e-con.fs-musterbox-einstieg__aktionen > .elementor-element {
    flex: 0 0 auto;
  }
}

/* Abnahme 05.09.2026, 1024px: drei Filter wurden in den Restplatz neben
   Sortierung und Aktionen gequetscht. Die Filter erhalten eine eigene Reihe. */
@media (min-width: 768px) and (max-width: 1199px) {
  .fs-sortiment__form {
    grid-template-columns: minmax(190px, 1fr) auto;
  }
  .fs-sortiment__filter {
    grid-column: 1 / -1;
  }
}

/* Abnahme 05.09.2026: die Kasse lag bei x=0 mit 1440px Breite, während
   Header und Sortiment 1240px nutzen. Das Woo-Root ist direkt unter main. */
.woocommerce-checkout .fs-inhalt > .woocommerce {
  width: calc(100% - 50px);
  max-width: var(--fs-container, 1240px);
  margin: var(--fs-s50) auto;
}

/* Abnahme 05.09.2026: technische Werte hatten 14px, die Kopfzeile war
   kaum vom Tabellenkörper getrennt. Lokale 15px-Werte, 10/15px Zellpolster. */
.fs-produkt__text .fs-spec {
  font-size: 15px;
}
.fs-produkt__text .fs-spec th,
.fs-produkt__text .fs-spec td {
  padding: var(--fs-s10) var(--fs-s15);
  font-size: 15px;
  line-height: 1.5;
}
.fs-produkt__text .fs-spec thead th {
  background-color: var(--fs-sand);
  color: var(--fs-navy);
  font-weight: 600;
}
@media (max-width: 479px) {
  .fs-produkt__text .fs-spec th,
  .fs-produkt__text .fs-spec td {
    padding-inline: var(--fs-s5);
  }
  /* 390px: die AGB-H1 brach mitten in Geschäftsbedingungen um. Die
     längeren Titel dieser Textvorlage passen mit 23,4px in die 340px-Spalte. */
  .fs-seite__titel {
    font-size: clamp(20px, 6vw, 28px);
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Abnahme 05.09.2026, 390px: erster Menülink begann bei y=80 unter
   dem 127px hohen Kopf. Der scrollbare Menübereich beginnt jetzt darunter. */
@media (max-width: 1023px) {
  .fs-mobilnav {
    inset-block-start: 127px;
    padding-top: var(--fs-s25);
  }
}

/* Abnahme 05.09.2026: Stein und Fischgrät haben keine echten Raumfotos.
   Zugeordnete Hero-Produktbilder füllen nach Nutzerentscheidung ihr Format. */
.fs-hero__medien .fs-hero__bild.fs-hero__bild--produkt img {
  object-fit: cover;
  background-color: var(--fs-weiss);
  padding: 0;
}

/* Nachprüfung 05.09.2026, 390px: die dreispaltige technische Tabelle
   ragte bis x=442,20. Mobile Merkmale stehen über ihren Vergleichswerten;
   290px Tabellenbreite, lesbare 15px Schrift und keine harten Wortbrüche. */
@media (max-width: 479px) {
  .fs-produkt__text .fs-spec,
  .fs-produkt__text .fs-spec thead,
  .fs-produkt__text .fs-spec tbody {
    display: block;
    width: 100%;
  }
  .fs-produkt__text .fs-spec tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fs-produkt__text .fs-spec th,
  .fs-produkt__text .fs-spec td {
    width: auto;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
  }
  .fs-produkt__text .fs-spec tr > th:first-child,
  .fs-produkt__text .fs-spec tr > :nth-child(2):last-child {
    grid-column: 1 / -1;
  }
  .fs-produkt__text .fs-spec tbody tr {
    margin-top: var(--fs-s10);
  }
  .fs-produkt__text .fs-spec tbody th {
    background-color: var(--fs-sand);
  }
}

/* Nachprüfung 05.09.2026, mobile Kasse: 347,19px Tabelle in 288px
   Innenraum. Kompakte Zellpolster und 13px Kopftext ergeben ausreichend
   Platz; Zwischensumme misst ohne Versalien/Laufweite 115,33px. */
@media (max-width: 479px) {
  .woocommerce table.woocommerce-checkout-review-order-table {
    table-layout: fixed;
    width: 100%;
  }
  .woocommerce table.woocommerce-checkout-review-order-table th,
  .woocommerce table.woocommerce-checkout-review-order-table td {
    padding: var(--fs-s10) var(--fs-s5);
    overflow-wrap: normal;
    word-break: normal;
  }
  .woocommerce table.woocommerce-checkout-review-order-table th {
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
  }
}

/* Nachprüfung 05.09.2026, Tablet 1024px: vier Faktenkarten ließen
   172,75px Textbreite und trennten zusammenhängende mitten im Wort.
   Viererraster wechseln bereits unter 1200px auf zwei lesbare Spalten. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .e-con.fs-raster-4,
  .elementor-element.fs-raster-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Nutzerentscheidung 05.09.2026: Bildflächen ausfüllen und niemals kacheln.
   Vorhermessung: 24 Sortimentsbilder und 41 Musterbilder pro Ansicht mit
   contain. Foto-Hintergründe behalten cover; Bild-/Elementorflächen erhalten
   explizit no-repeat. Symbol- und Logo-Hintergründe haben eigene Größen. */
.fs-inhalt img {
  object-fit: cover;
  background-repeat: no-repeat;
}
.fs-inhalt .elementor-element {
  background-repeat: no-repeat;
}
.fs-materialstreifen--bg {
  background-size: cover;
  background-repeat: no-repeat;
}

/* Nutzerkorrektur 05.09.2026: Der 34px-Detailstreifen unter dem Startbild
   wirkt wie eine Bildwiederholung (live 565x423,75px Foto + 34px Streifen).
   Auf der Startseite zeigt die gesamte Medienfläche ein einziges Raumfoto. */
body.home .fs-hero__medien .fs-herostreifen {
  display: none;
}
body.home .fs-hero__medien .fs-hero__bild img {
  border-radius: var(--fs-radius);
}
/* Cookie-Einstellungen im Footer (Complianz oeffnet das Hinweisfenster). */
.fs-footer__cookie { margin: var(--fs-s10) 0 0; }
.fs-footer__cookie a { color: var(--fs-hell-86, rgba(255, 255, 255, .86)); text-decoration: underline; text-underline-offset: 2px; }
.fs-footer__cookie a:hover { color: var(--fs-weiss); }

/* Hinweis unter dem E-Mail-Feld des Widerrufsformulars war 13px, mobil
   unter der Lesegrenze. */
.fs-widerruf__hinweis { font-size: 14px; }

/* Der Cookie-Link war 19px hoch, WCAG 2.2 verlangt mindestens 24px, die
   Tivaos-Vorgabe 44px. Gemessen am 28.09.2026 direkt nach dem Einbau. */
.fs-footer__cookie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Unterzeile der Fußzeile, 29.09.2026: links Copyright, rechts der
   Tivaos-Hinweis wie auf allen Kundenseiten im Website-Abo. Die doppelten
   Links Impressum und Datenschutz sind weg, alle Rechtslinks stehen in der
   Spalte "Rechtliches". Gleiche Schrift wie das Copyright, Trefferfläche
   44px wie die übrigen Fußlinks. */
.fs-footer__copyright,
.fs-footer__credit {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fs-hell-66);
}

.fs-footer__credit a,
.fs-footer__credit a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fs-hell-66);
  text-decoration: none;
}

.fs-footer__credit a:hover,
.fs-footer__credit a:focus-visible {
  color: var(--fs-weiss);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* "Cookie-Einstellungen" war 18px und unterstrichen, die Links darüber 14px
   ohne Unterstrich. Gleiche Schrift wie die Rechtslinks, Abstand nach unten,
   damit er mobil nicht am Versand-Absatz klebt. Gemessen am 29.09.2026. */
.fs-footer__cookie {
  margin: var(--fs-s5) 0 var(--fs-s25);
  font-size: 14px;
  line-height: 1.4;
}

.fs-footer__cookie a,
.fs-footer__cookie a:visited {
  font-size: 14px;
  text-decoration: none;
  color: var(--fs-hell-86, rgba(255, 255, 255, .86));
}

.fs-footer__cookie a:hover,
.fs-footer__cookie a:focus-visible {
  color: var(--fs-weiss);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobil lag der Versand-Absatz 10px unter "Cookie-Einstellungen", der
   Abstand am Link greift dort nicht. Abstand am Hinweisblock selbst. */
@media (max-width: 767px) {
  .fs-footer__hinweise { margin-top: var(--fs-s30); }
}

/* 29.09.2026: Mobil lief der Gold-Unterstrich von "Zurücksetzen" über die
   volle Breite, weil der Link auf 100% gestreckt war. Link nur so breit
   wie sein Text, die Trefferfläche bleibt 44px hoch. */
@media (max-width: 767px) {
  .fs-sortiment__aktionen > a.fs-link {
    width: auto;
    align-self: center;
  }
}

/* 30.09.2026, Kaan: Produktbilder wirkten abgeschnitten. Die Renderings sind
   quadratisch und freigestellt (1800x1800), der 4:3-Rahmen mit cover schnitt
   oben und unten je ein Achtel ab. Das Rendering steht jetzt ganz auf Weiß.
   Raum- und Detailfotos der Galerie füllen ihren Rahmen weiter. */
.fs-dekor-raster .fs-dekor a.fs-dekor__bild img,
ul.products li.product a.fs-dekor__bild img,
.fs-produkt__hauptbild .fs-produkt__hauptbild-img.ist-freigestellt {
  object-fit: contain;
  background-color: var(--fs-weiss);
}

/* 30.09.2026: Das Kartenbild ist ein Link und erbte den Gold-Unterstrich der
   Textlinks (mobil zusätzlich 14px Polster oben und unten). Solange der
   Materialstreifen darunter lag, fiel das nicht auf. */
.fs-dekor a.fs-dekor__bild {
  padding: 0;
  background-image: none;
}

/* ==========================================================================
   Zentriertes Logo mit Claim (Kundenwunsch 22.09.2026)
   --------------------------------------------------------------------------
   Neue Logodatei: Signet oben, FLOOR / SELECT darunter, Claim "Einfach zum
   richtigen Boden." in Gold. Gilt für Kopfzeile und Fuß; im Fuß bleibt das
   Logo linksbündig in der Spalte, innen aber zentriert wie in der Datei.
   ========================================================================== */
.fs-logo--zentriert {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.fs-logo--zentriert .fs-logo__wort {
  align-items: center;
  line-height: 1.05;
}

.fs-logo--zentriert .fs-logo__zeile {
  margin-right: -0.2em; /* Sperrung nach dem letzten Buchstaben ausgleichen */
}

.fs-logo__claim {
  display: block;
  margin: 5px 0 0;
  font-family: var(--fs-font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  color: var(--fs-gold);
}

/* Kopfzeile: kompakt genug für die 80px-Reihe */
.fs-header__logo.fs-logo--zentriert {
  min-height: 0;
  padding: 4px 0;
  gap: 4px;
}

.fs-header__logo.fs-logo--zentriert .fs-logo__signet,
.fs-header__logo.fs-logo--zentriert .fs-logo__signet svg {
  width: 30px;
  height: 30px;
}

.fs-header__logo.fs-logo--zentriert .fs-logo__zeile {
  font-size: 12px;
  letter-spacing: 0.2em;
}

.fs-header__logo.fs-logo--zentriert .fs-logo__claim {
  font-size: 9px;
  margin-top: 3px;
}

@media (max-width: 767px) {
  .fs-header__logo.fs-logo--zentriert .fs-logo__claim { display: none; }
  .fs-header__logo.fs-logo--zentriert .fs-logo__signet,
  .fs-header__logo.fs-logo--zentriert .fs-logo__signet svg { width: 26px; height: 26px; }
  .fs-header__logo.fs-logo--zentriert .fs-logo__zeile { font-size: 10px; letter-spacing: 0.16em; }
}

/* Fuß: etwas größer, mit Claim */
.fs-footer__logo.fs-logo--zentriert {
  align-self: flex-start;
}

.fs-footer__logo.fs-logo--zentriert .fs-logo__signet,
.fs-footer__logo.fs-logo--zentriert .fs-logo__signet svg {
  width: 44px;
  height: 44px;
}

.fs-footer__logo.fs-logo--zentriert .fs-logo__zeile {
  font-size: 14px;
  letter-spacing: 0.2em;
}

.fs-footer__logo.fs-logo--zentriert .fs-logo__claim {
  font-size: 11px;
}

/* Hero-Buttons: die neuen, längeren Beschriftungen ("Kostenlose Muster
   auswählen" + "Alle Holzdekore entdecken") sprengten mit 25px Innenabstand
   die 565px breite Textspalte und brachen um. 18px reichen. */
.fs-hero .elementor-widget-button .elementor-button {
  padding-left: 18px;
  padding-right: 18px;
}

/* 06.10.2026, Kaan: Kästen einer Reihe immer gleich hoch. design.css setzt
   für alle Raster align-items: start, dadurch war etwa "Klick- & Klebevinyl"
   auf der Startseite kürzer als seine Nachbarn. Gestreckt werden nur Karten
   in Dreier- und Viererrastern; das Zweier-Raster (Text neben Bild) bleibt. */
.e-con.fs-raster-3 > .fs-karte,
.e-con.fs-raster-4 > .fs-karte,
.fs-raster-3 > .fs-karte,
.fs-raster-4 > .fs-karte {
  align-self: stretch;
}

/* Kasse in zwei Spalten (06.10.2026, Kaan: "alle Elemente untereinander,
   bisschen komisch"). Das Raster .fs-kasse aus design.css hängt jetzt an der
   Vorlage woocommerce/checkout/form-checkout.php. Die Bestellübersicht ist
   nicht mehr sticky: mit Zahlungsarten ist sie höher als der Bildschirm, der
   Bestellknopf wäre sonst erst am Ende der linken Spalte erreichbar. */
.woocommerce-checkout .fs-kasse {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: var(--fs-s50);
}

.woocommerce-checkout .fs-kasse__daten,
.woocommerce-checkout .fs-kasse__bestellung { min-width: 0; }

.woocommerce-checkout .woocommerce-checkout-review-order {
  position: static;
  top: auto;
}

.woocommerce-checkout #order_review_heading {
  margin: 0 0 var(--fs-s15);
}

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

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row.hidden,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_state_field[style*="none"] { display: none; }

@media (max-width: 1023px) {
  .woocommerce-checkout .fs-kasse { grid-template-columns: minmax(0, 1fr); gap: var(--fs-s40); }
}

@media (max-width: 599px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 1; }
}

/* Die Formularzeilen von WooCommerce sind <p>-Elemente und erbten die
   Textbreiten-Begrenzung (608px): Straße, Adresszusatz und Notiz waren
   schmaler als die Spalte. */
.woocommerce-checkout .fs-kasse .form-row,
.woocommerce-checkout .fs-kasse .form-row .input-text,
.woocommerce-checkout .fs-kasse .form-row select,
.woocommerce-checkout .fs-kasse .form-row textarea {
  max-width: none;
  width: 100%;
}

/* Feldpaare über die IDs: address-i18n.js von WooCommerce setzt die Klassen
   beim Laden zurück (Telefon war wieder form-row-wide). */
@media (min-width: 600px) {
  .woocommerce-checkout .fs-kasse #billing_postcode_field,
  .woocommerce-checkout .fs-kasse #shipping_postcode_field,
  .woocommerce-checkout .fs-kasse #billing_email_field { grid-column: 1; }
  .woocommerce-checkout .fs-kasse #billing_city_field,
  .woocommerce-checkout .fs-kasse #shipping_city_field,
  .woocommerce-checkout .fs-kasse #billing_phone_field { grid-column: 2; }
}

/* Entfernen-Knopf im Warenkorb (06.10.2026): WooCommerce erzwingt beim
   Zeigen weiße Schrift mit !important, auf Sand war das "×" kaum zu sehen. */
.woocommerce a.remove:hover,
.woocommerce a.remove:focus-visible {
  background-color: var(--fs-sand) !important;
  color: var(--fs-warnung) !important;
}

/* "i" mit den wichtigsten Produktdaten auf Sortiments-, Muster- und
   Dekorkarten (Kaan, 06.10.2026). Die Übersicht liegt über der Karte und
   scrollt bei schmalen Karten (Musterbox mobil, zwei Spalten). */
.fs-dekor,
.fs-musterkarte,
.fs-dekorkarte { position: relative; }

.fs-info__knopf,
.fs-info__zu {
  --fs-knopf-hover: var(--fs-navy);
  --fs-knopf-hover-schrift: var(--fs-weiss);
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--fs-linie);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .94);
  color: var(--fs-navy);
  font-family: var(--fs-font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--fs-dauer-kurz, .18s) var(--fs-ease, ease), color var(--fs-dauer-kurz, .18s) var(--fs-ease, ease);
}

.fs-info__knopf { z-index: 3; }
.fs-info__zu { z-index: 1; font-size: 20px; font-weight: 400; }

/* Trefferfläche 44px, sichtbar bleibt der kleine Kreis. */
.fs-info__knopf::after,
.fs-info__zu::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.fs-info__knopf:hover,
.fs-info__knopf[aria-expanded="true"],
.fs-info__zu:hover {
  border-color: var(--fs-navy);
  background-color: var(--fs-navy);
  color: var(--fs-weiss);
}

.fs-info__knopf:focus-visible,
.fs-info__zu:focus-visible {
  outline: 2px solid var(--fs-navy);
  outline-offset: 2px;
}

.fs-info__panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: auto;
  padding: 20px;
  border-radius: var(--fs-radius);
  background-color: var(--fs-weiss);
  box-shadow: 0 6px 24px rgba(13, 27, 42, .12);
  text-align: left;
}

.fs-info__panel[hidden] { display: none; }

.fs-info__titel {
  max-width: none;
  margin: 0 44px 15px 0;
  font-family: var(--fs-font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fs-navy);
}

/* Ein Raster für alle Zeilen: die Bezeichnungen bekommen ihre natürliche
   Breite (kein Umbruch mitten im Wort), die Werte den Rest. */
.fs-info__liste {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 15px;
  max-width: none;
  margin: 0;
}

.fs-info__zeile { display: contents; }

.fs-info__liste dt,
.fs-info__liste dd {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--fs-linie);
  line-height: 1.4;
}

.fs-info__zeile:last-child dt,
.fs-info__zeile:last-child dd { border-bottom: 0; }

.fs-info__liste dt {
  font-size: 13px;
  color: var(--fs-muted);
}

.fs-info__liste dd {
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-navy);
  white-space: pre-line;
}

/* Schmale Karten (Musterbox mit vier Spalten, Handy): untereinander. Maß
   ist die Breite der Übersicht selbst, nicht die des Bildschirms. */
.fs-info__panel { container-type: inline-size; }

@media (max-width: 479px) {
  .fs-info__panel { padding: 15px; }
  .fs-info__titel { font-size: 15px; margin-bottom: 10px; }
}

@container (max-width: 279px) {
  .fs-info__liste { grid-template-columns: minmax(0, 1fr); }
  .fs-info__liste dt { padding: 7px 0 0; border-bottom: 0; }
  .fs-info__liste dd { padding: 0 0 7px; font-size: 13px; }
}

/* Produktdetails: Panel nimmt beim Klick auf Text den Fokus, ohne Rahmen (06.10.2026). */
.fs-info__panel:focus { outline: none; }

/* Landingpage-Karten [fs_dekore] zeigen seit 06.10.2026 dieselbe Preisangabe
   wie die Shopkarten (Grundpreis, Paketzeile, Hinweis) statt nur "ab je m²". */
.fs-dekorkarte__preis.fs-dekor__preis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  white-space: normal;
}
.fs-raster-5 .fs-dekorkarte__preis .fs-preis__wert { font-size: 22px; }
.fs-raster-5 .fs-dekorkarte__preis .fs-preis__zeile { white-space: nowrap; }

/* Widerrufsfunktion (§ 356a BGB, 06.10.2026): Spamfalle unsichtbar, Eingangsbeleg
   nach dem Absenden mit Inhalt und Uhrzeit. */
.fs-widerruf__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.fs-widerruf__meldung p { margin: 0 0 var(--fs-s10); }
.fs-widerruf__meldung p:last-child { margin-bottom: 0; }
.fs-widerruf__beleg {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--fs-s10) var(--fs-s20);
  margin: var(--fs-s20) 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.fs-widerruf__beleg dt { font-weight: 600; color: var(--fs-navy); }
.fs-widerruf__beleg dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .fs-widerruf__beleg { grid-template-columns: 1fr; gap: 2px; }
  .fs-widerruf__beleg dd { margin-bottom: var(--fs-s10); }
}
.fs-footer__widerruf a { font-weight: 600; }

/* Produktsicherheit (GPSR, 07.10.2026): eingeklappt ganz unten auf der
   Produktseite, kleine Schrift, ohne eigene Fläche. */
.fs-sicherheit {
  padding: var(--fs-s20) 0 var(--fs-s30);
  border-top: 1px solid var(--fs-linie);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fs-muted);
}
.fs-sicherheit summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--fs-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-muted);
}
.fs-sicherheit summary:hover,
.fs-sicherheit summary:focus-visible { color: var(--fs-navy); }
.fs-sicherheit dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--fs-s20);
  margin: var(--fs-s10) 0 0;
}
.fs-sicherheit dt { font-weight: 600; }
.fs-sicherheit dd { margin: 0; overflow-wrap: anywhere; }
.fs-sicherheit a { color: inherit; }
@media (max-width: 599px) {
  .fs-sicherheit dl { grid-template-columns: 1fr; gap: 0; }
  .fs-sicherheit dd { margin-bottom: var(--fs-s10); }
}

/* Hinweis über den Express-Knöpfen an der Kasse (07.10.2026). */
.fs-express-hinweis {
  margin: 0 0 var(--fs-s10);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fs-muted);
}
.fs-express-hinweis[hidden] { display: none; }
.fs-express-hinweis a { color: inherit; text-decoration: underline; }

/* Herstellerangabe (GPSR) im Info-Fenster der Karten, klein unter den Daten. */
.fs-info__hersteller {
  margin-top: var(--fs-s10);
  padding-top: var(--fs-s10);
  border-top: 1px solid var(--fs-linie);
  font-size: 11px;
  line-height: 1.45;
  color: var(--fs-muted);
  overflow-wrap: anywhere;
}
.fs-info__hersteller a { color: inherit; }

/* Lieferzeit unter dem Preis auf der Produktseite (08.10.2026). */
.fs-lieferzeit {
  margin: var(--fs-s5) 0 var(--fs-s15);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fs-anthrazit);
}
.fs-lieferzeit__titel { font-weight: 600; }

/* Info-Fenster: Produktsicherheit eingeklappt, klein (08.10.2026). */
.fs-info__hersteller { border-top: 1px solid var(--fs-linie); }
.fs-info__hersteller summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--fs-muted);
}
.fs-info__hersteller summary:hover,
.fs-info__hersteller summary:focus-visible { color: var(--fs-navy); }
.fs-info__hersteller p { margin: 4px 0 0; }

/* Bestellbestätigung (Danke-Seite): Rechnungs- und Lieferadresse hatten
   mobil keinen Abstand, die zweite Überschrift klebte am ersten Kasten
   (Christopher, 08.10.2026). */
.woocommerce-order .woocommerce-customer-details { margin-top: var(--fs-s40); }
.woocommerce-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-s30);
}
.woocommerce-order .woocommerce-columns--addresses::before,
.woocommerce-order .woocommerce-columns--addresses::after { display: none; }
.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.woocommerce-order .woocommerce-column__title { margin: 0 0 var(--fs-s15); }
.woocommerce-order .woocommerce-customer-details address {
  margin: 0;
  padding: var(--fs-s20);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.woocommerce-order .woocommerce-customer-details address p { margin: var(--fs-s10) 0 0; }
@media (max-width: 767px) {
  .woocommerce-order .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
    gap: var(--fs-s40);
  }
}

/* Produktsicherheit: Hinweisliste schlicht (08.10.2026). */
.fs-sicherheit__liste { margin: 0; padding-left: 1.1em; }
.fs-sicherheit__liste li { margin: 0 0 2px; }

/* Lieferland und Zahlungsarten zu Beginn des Bestellvorgangs (08.10.2026). */
.fs-bestellbeginn {
  margin: 0 0 var(--fs-s15);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fs-muted);
}

/* Kundenfeedback 13.10.2026: Die lange Beratungs-CTA passt neben der
   Musteraktion nur mit Umbruch. Zwei gleich hohe Spalten, mobil volle Breite. */
.e-con.fs-beratungsaktionen,
.e-con.fs-musterbox-einstieg > .e-con.fs-beratungsaktionen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-s15);
  align-items: stretch;
}
.e-con.fs-beratungsaktionen > .elementor-widget-button {
  width: 100% !important;
  min-width: 0;
  align-self: stretch;
}
.fs-beratungsaktionen .elementor-widget-container,
.fs-beratungsaktionen .elementor-button-wrapper { width: 100%; height: 100%; }
.e-con.fs-beratungsaktionen .elementor-button {
  width: 100%;
  height: 100%;
  min-height: 60px;
  padding: var(--fs-s10) var(--fs-s15);
  white-space: normal;
}
.e-con.fs-beratungsaktionen > .elementor-widget-button:nth-child(n+3) {
  grid-column: 1 / -1;
  width: fit-content !important;
}

/* Bisher unbetonte Meldung unter dem Formular: deutlicher Status mit
   16px Text, gutem Kontrast und Abstand zur fixierten Kopfzeile. */
#kontaktformular .elementor-message {
  margin-top: var(--fs-s20);
  padding: var(--fs-s20);
  border: 1px solid currentColor;
  border-radius: var(--fs-radius);
  background: var(--fs-wollweiss);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  scroll-margin-top: 155px;
}
#kontaktformular .elementor-message-success { color: var(--fs-erfolg); }
#kontaktformular .elementor-message-danger { color: var(--fs-warnung); }
#kontaktformular .elementor-message:focus {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .e-con.fs-beratungsaktionen,
  .e-con.fs-musterbox-einstieg > .e-con.fs-beratungsaktionen {
    grid-template-columns: minmax(0, 1fr);
  }
  .e-con.fs-beratungsaktionen > .elementor-widget-button:nth-child(n+3) {
    width: 100% !important;
  }
  .e-con.fs-beratungsaktionen .elementor-button { min-height: 48px; }
}