/* ============================================================================
   fs-seo.css — FOGSMOKE SEO STYLE SYSTEM V1
   Besitzer: Sitzung SEOREF · Stand 24.08.2026
   ----------------------------------------------------------------------------
   Ein Designsystem fuer ALLE sichtbaren Produkt- und Kategoriebeschreibungen.

   ZWEI SCHICHTEN

     .fs-desc   BASIS. Sitzt als Wrapper im Theme um jede Beschreibungs-
                ausgabe. Gibt bestehendem, unstrukturiertem WAWI-HTML die
                FOGSMOKE-Typografie. Erfindet KEINE Struktur.
                Modifier --product / --category

     .fog-seo   REICH. Die strukturierte SEO-Komponente. Wird bewusst ins
                Beschreibungs-HTML geschrieben, nie automatisch erzeugt.

   >> BESITZUEBERGABE 29.08.2026 <<
   `.fsseo` gehoert seit dem 29.08.2026 ALLEIN `fs-beschreibung.css`. Diese
   Datei hat am selben Tag 169 `.fsseo`-Selektoren abgegeben; ihre Zwillinge
   auf `.fog-seo` sind unveraendert geblieben, das Vokabular lebt also weiter.
   Grund: beide Dateien haben dieselbe Klasse gestaltet, `fs-seo.css` mit
   `font-family: ... !important` sogar gegen die spaeter geladene Datei. Der
   Kopf der Beschreibung bekam von hier einen Verlauf und einen Magenta-Keil,
   den der freigegebene Entwurf nicht vorsieht. Wer `.fsseo` gestalten will,
   tut das in `fs-beschreibung.css` — nicht hier.

   MASSGEBLICHE FASSUNG
   Yunus hat am 24.08.2026 dreimal nachgeschaerft; es gilt die LETZTE:
     1. frueh    Referenzpaket ELFA Filter Series / Master Luxe  -> .fog-seo__*
     2. mittags  Master-Prompt "SEO STYLE SYSTEM V1"
     3. nachm.   Bundle-Vorlage (Verlauf, Zaehler)               -> .hero-count
     4. spaet    DIESE Fassung                                   -> .mark, .eye,
                 .label, .value, .box, .specs, .notice   << KANONISCH >>

   Abschnitt 4 ist die kanonische Fassung. Abschnitt 6 haelt die beiden
   aelteren Vokabulare am Leben, damit bereits vorbereitete Texte (u. a. die
   sechs ELFA-Bundles) weiter richtig rendern. Neue Texte verwenden
   ausschliesslich das Vokabular aus Abschnitt 4.

   GELTUNGSBEREICH: nur .fs-desc und .fog-seo. NICHT .fsseo (siehe oben).
   KEINE globale Regel fuer h1..h6, p, ul, li, a, table, details, summary.
   Der Shop hat 369 OPC-Seiten mit Markup, das dieser Datei nicht gehoert.

   NICHT BETROFFEN: Header, Footer, Produktkarten, Warenkorb, Staffelpreise,
   Cross-Selling, Bewertungen, Reiter-Chrom, rechte Merkmalsuebersicht,
   OPC-Elemente ausserhalb der Beschreibung.

   Rollback der Besitzuebergabe = die 169 abgegebenen Selektoren wieder
   ergaenzen; einfacher ist die Sicherung fs-seo.css.bak-besitz-20260829.

   Rollback = Datei loeschen, Zeile aus template.xml nehmen, die vier
   Wrapper-Klassen aus den drei Templates entfernen.
   ============================================================================ */


/* ============================================================================
   1 — SCHRIFTEN: DIE ROHNAMEN ZUM LEBEN ERWECKEN
   ----------------------------------------------------------------------------
   DAS PROBLEM: Die WAWI-Codes schreiben font-family:"Anton" und "DM Sans".
   Diese Familiennamen existierten im Shop NICHT — er laedt seine Schriften
   ausschliesslich unter Token-Namen:
       "FS Display" / "FS Anton"  -> anton.woff2      (fs-redesign, fs-menu)
       "FS Body"    / "FS Text"   -> dmsans-*.woff2   (fs-redesign, fs-kanon)
   Jede Beschreibung mit dem Rohnamen fiel auf Arial Narrow bzw. Arial zurueck.

   DIE LOESUNG: dieselben, bereits lokal liegenden und bereits vorgeladenen
   WOFF2-Dateien zusaetzlich unter ihren Rohnamen deklarieren.
     - KEINE neue Datei, KEIN neuer Download, KEINE zusaetzliche Anfrage.
       Gemessen: anton.woff2 und dmsans-var.woff2 kommen mit 0 KB / 0 ms aus
       dem Cache, weil der Header-Override sie ohnehin vorlaedt.
     - KEIN @import auf fonts.googleapis.com. Die Vorlagen bringen einen mit;
       er gehoert NICHT in die Wawi — alles ist selbst gehostet.
     - Anton hat genau EINEN Schnitt (400). Jedes hoehere Gewicht laesst der
       Browser kuenstlich nachfetten. Deshalb steht die Familie nur mit 400.
     - DM Sans ist variabel (100-1000) und deckt 400/500/600/700 aus EINER
       Datei ab. dmsans-bold.woff2 bleibt als statischer 700er deklariert,
       weil fs-redesign.css:1586 das Gewicht punktgenau anfordert.

   LIZENZ: beide Familien SIL Open Font License 1.1.
   Hinweise in themes/base/fonts/SCHRIFTEN-LIZENZ.txt.

   Rollback = nur diesen Abschnitt loeschen; die Token-Namen bleiben unberuehrt.
   ============================================================================ */

@font-face {
  font-family: "Anton";
  src: url("../base/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../base/fonts/dmsans-var.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../base/fonts/dmsans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   2 — TOKENS
   ----------------------------------------------------------------------------
   Die acht Kernwerte sind seit dem Master-Prompt verbindlich. Die letzte
   Fassung bringt VIER weitere Toene mit; sie stehen unten markiert.

   VERHAELTNIS ZUM FARBKONTRAKT — offener Punkt, siehe SEO-STYLE-GUIDE.md:
     #830779  == --brand-ruhig
     #ffffff  == --brand-papier
     #111111  ~= --brand-tinte  #111114
     #707070  ~= --brand-grau   #6c6c75
     #c2188f  NEU — der Shop fuehrt bereits #c90f88 und #e5169f
     #140412  NEU
     #faf3f9  NEU
     #e0d5df  NEU
     #ef7fca  NEU — helles Magenta, nur auf dunklem Grund
     #fff0f4  NEU — Warnflaeche
     #fff7ed  NEU — Hinweisflaeche, ausserhalb der FOGSMOKE-Palette
     #f59e0b  NEU — Hinweiskante, ausserhalb der FOGSMOKE-Palette
   ============================================================================ */

.fs-desc,
.fog-seo {
  --fsseo-brand:        #830779;
  --fsseo-magenta:      #c2188f;
  --fsseo-ink:          #111111;
  --fsseo-deep:         #140412;
  --fsseo-white:        #ffffff;
  --fsseo-soft:         #faf3f9;
  --fsseo-soft-tief:    #f1e5ef;   /* Endpunkt des Opener-Verlaufs */
  --fsseo-line:         #e0d5df;
  --fsseo-muted:        #707070;

  /* Auf #140412 hat #c2188f nur 4,6:1. #ef7fca kommt auf rund 7:1 und ist
     damit auch fuer kleine Schrift auf dunklem Grund sicher. */
  --fsseo-magenta-hell: #ef7fca;

  /* Fliesstext auf dunkler Flaeche. #707070 kaeme dort auf 3,1:1 und waere
     unlesbar; dieser Ton liegt bei rund 11:1. */
  --fsseo-auf-dunkel:   #cfc7cd;

  --fsseo-warn-bg:      #fff0f4;
  --fsseo-notice-bg:    #fff7ed;
  --fsseo-notice-line:  #f59e0b;

  --fsseo-display: "Anton", "FS Display", "Arial Narrow", Arial, sans-serif;
  --fsseo-text:    "DM Sans", "FS Body", Arial, sans-serif;
}


/* ============================================================================
   3 — BASISSCHICHT .fs-desc
   ----------------------------------------------------------------------------
   Greift auf JEDE bestehende Beschreibung, ohne den Inhalt anzufassen.
   Gleiche Schrift, gleiche Abstaende, lesbare Listen, Tabellen die nicht
   ueberlaufen, erkennbare Links. Mehr nicht.

   WARUM `width:100%` — Falle, am 24.08.2026 selbst hineingelaufen:
   `container-type: inline-size` bringt Size Containment mit. Der eigene
   Inhalt traegt danach NICHTS mehr zur Breitenberechnung bei. Sitzt der Block
   in einem Elternteil, der sich nach seinem Inhalt bemisst — Grid-/Flex-Item
   mit `margin:auto`, `width:fit-content`, `align-items:center` —, faellt die
   Breite auf 0 und der Block verschwindet. Im Shop sitzen die Beschreibungen
   in normalen Block-Spalten; `width:100%` faengt den haeufigsten Rest ab.
   ============================================================================ */

.fs-desc {
  color: var(--fsseo-ink);
  container-name: fsseo;
  container-type: inline-size;
  font-family: var(--fsseo-text);
  overflow-wrap: anywhere;
  width: 100%;
}

.fs-desc :is(h2, h3, h4, h5, h6, .h2, .h3, .h4) {
  color: var(--fsseo-ink);
  font-family: var(--fsseo-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.fs-desc :is(h2, .h2) { font-size: clamp(22px, 3cqi, 32px); margin: 28px 0 12px; }
.fs-desc :is(h3, .h3) { font-size: clamp(18px, 2.2cqi, 24px); margin: 24px 0 10px; }
.fs-desc :is(h4, h5, h6, .h4) { font-size: 17px; margin: 20px 0 8px; }
.fs-desc :is(h2, h3, h4, .h2, .h3, .h4):first-child { margin-top: 0; }

.fs-desc p { font-size: 16px; line-height: 1.62; margin: 0 0 14px; }
.fs-desc :is(ul, ol) { margin: 0 0 16px; padding-left: 20px; }
.fs-desc li { font-size: 16px; line-height: 1.62; }
.fs-desc li + li { margin-top: 6px; }

.fs-desc a {
  color: var(--fsseo-brand);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.fs-desc a:hover,
.fs-desc a:focus-visible { color: var(--fsseo-magenta); }

.fs-desc :is(strong, b) { font-weight: 700; }
.fs-desc hr { border: 0; border-top: 1px solid var(--fsseo-line); margin: 24px 0; }
.fs-desc img { height: auto; max-width: 100%; }

/* Tabellen ohne Wrapper scrollbar machen: display:block laesst overflow-x
   greifen, ohne dass etwas ins WAWI-HTML eingefuegt werden muss. Kein JS. */
.fs-desc table {
  border-collapse: collapse;
  display: block;
  font-size: 15px;
  margin: 0 0 18px;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.fs-desc :is(th, td) {
  border-bottom: 1px solid var(--fsseo-line);
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
}

.fs-desc th {
  color: var(--fsseo-muted);
  font-family: var(--fsseo-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Altlast aus ChatGPT-Exporten: erzwungener Blocksatz reisst in schmalen
   Spalten Loecher. Nur dieser eine Fall wird geradegezogen. */
.fs-desc [style*="text-align: justify"],
.fs-desc [style*="text-align:justify"] { text-align: left !important; }

.fs-desc--product  { margin-bottom: 8px; }
.fs-desc--category { margin: 8px 0 0; }


/* ============================================================================
   4 — KANONISCHE KOMPONENTE .fog-seo  (frueher auch .fsseo, abgegeben 29.08.)
   ----------------------------------------------------------------------------
   Vokabular der letzten Fassung vom 24.08.2026:
     .hero .eye .lead .tags .tag .mark
     .facts .fact small .value
     .content .label .grid .box .box.soft
     .decision
     .specs .spec
     ol.steps
     .faq + native details/summary
     .warning .notice

   DREI ABWEICHUNGEN von der gelieferten Inline-CSS — keine davon
   Geschmacksfragen:
     1. Kein `@import` auf fonts.googleapis.com. Die Schriften liegen global
        im Theme (Abschnitt 1), selbst gehostet.
     2. Kein `Impact`-Fallback. Anton laedt echt; die Angabe waere toter Code.
        Stattdessen die Shop-Tokens als Zwischenstufe.
     3. Groessen in `cqi` statt `vw` — ZAHLENWERTE UNVERAENDERT, nur der Bezug
        ist der Container. Die Beschreibung steht in einer 7/12-Spalte neben
        der Merkmalsuebersicht: gemessen 651 px bei 1280 px Fensterbreite.
        Mit `4vw` staende dort eine 46-px-Ueberschrift in einer 651-px-Spalte;
        mit `4cqi` sind es 29 px. Genau dafuer gibt es Container Queries —
        die Datei nutzt sie ohnehin fuer das Raster.
   ============================================================================ */

.fog-seo {
  background: var(--fsseo-white);
  color: var(--fsseo-ink);
  container-name: fsseo;
  container-type: inline-size;
  font-family: var(--fsseo-text) !important;
  margin: 28px 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  width: 100%;
}

.fog-seo, .fog-seo * { box-sizing: border-box; }

/* Kantig. Bootstrap, Theme und Plugins verteilen Radien breit — hier keine. */
.fog-seo, .fog-seo *, .fog-seo *::before, .fog-seo *::after { border-radius: 0; }

/* --- Typografie ---------------------------------------------------------- */

.fog-seo :is(h2, h3),
.fog-seo :is(.eye, .label, .value, .tag, .mark) {
  font-family: var(--fsseo-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.fog-seo h2 {
  color: var(--fsseo-ink);
  font-size: clamp(29px, 4cqi, 46px);
  line-height: 1.02;
  margin: 8px 0 16px;
}

.fog-seo h3 {
  color: var(--fsseo-ink);
  font-size: clamp(21px, 2.5cqi, 28px);
  line-height: 1.08;
  margin: 0 0 11px;
}

.fog-seo :is(p, li) {
  font-family: var(--fsseo-text) !important;
  font-size: 16px;
  line-height: 1.62;
}

.fog-seo p { margin: 0 0 14px; }

.fog-seo a {
  color: var(--fsseo-brand);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Einstieg ------------------------------------------------------------ */

/* Der Opener. Ansage Yunus, 24.08.2026: "ich moechte auch den Farbverlauf im
   Hintergrund oben im OPENER" — dazu ein Sichtbeleg, der mehr zeigt als nur
   den Verlauf. Uebernommen ist damit der vollstaendige Opener der
   Bundle-Vorlage, Werte woertlich aus deren Inline-CSS:

     Verlauf   135deg, Weiss 0% -> weiche Markenflaeche 72% -> #f1e5ef 100%
     Kontur    1 px Haarlinie rundum, links 6 px Marken-Violett
     Polster   30 px (nach unten abgestuft, damit es bei 320 px nicht klemmt)
     Keil      240x240, right -90 / top -120, rotate(28deg), opacity .11
     Raster    1.45fr / minmax(190px, .55fr), gap 24, align-items stretch

   `align-items: stretch` statt `end`: das Signet fuellt die Hoehe des
   Openers aus, so wie im Beleg. `overflow: hidden` schneidet den Keil an der
   Kante ab — .hero meldet dadurch scrollWidth > clientWidth, ohne dass etwas
   sichtbar oder scrollbar waere. Ueberlaufpruefungen muessen das ausnehmen.

   Rueckbau auf den flachen Opener = background, border, padding und der
   ::after-Block hier raus. */
.fog-seo .hero {
  align-items: stretch;
  background: linear-gradient(135deg,
              var(--fsseo-white) 0%,
              var(--fsseo-soft) 72%,
              var(--fsseo-soft-tief) 100%);
  border: 1px solid var(--fsseo-line);
  border-left: 6px solid var(--fsseo-brand);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.45fr) minmax(190px, 0.55fr);
  overflow: hidden;
  padding: clamp(20px, 2.6cqi, 30px);
  position: relative;
}

.fog-seo .hero::after {
  background: linear-gradient(135deg, var(--fsseo-brand), var(--fsseo-magenta));
  content: "";
  height: 240px;
  opacity: 0.11;
  position: absolute;
  right: -90px;
  top: -120px;
  transform: rotate(28deg);
  width: 240px;
}

/* Ueber dem Keil bleiben. */
.fog-seo .hero > * { position: relative; z-index: 1; }

.fog-seo :is(.eye, .label) {
  color: var(--fsseo-brand);
  font-size: 15px;
}

.fog-seo .lead {
  font-size: clamp(17px, 2cqi, 20px) !important;
  line-height: 1.52 !important;
  max-width: 820px;
}

/* Das Signet. Ansage Yunus, 24.08.2026: "Lass die Flaeche rechts oben
   komplett schwarz und zieh nur unten eine LINIE."
   Die beiden diagonalen Magenta-Balken sind deshalb raus — die Flaeche steht
   durchgehend, der einzige Akzent ist die Magenta-Kante unten.
   Rueckbau der Balken = die entfernten ::before/::after wieder aufnehmen. */
.fog-seo .mark {
  align-items: center;
  align-self: stretch;
  background: var(--fsseo-deep);
  border-bottom: 5px solid var(--fsseo-magenta);
  color: var(--fsseo-white);
  display: flex;
  font-size: clamp(25px, 3cqi, 38px);
  justify-content: center;
  min-height: 170px;
  overflow: hidden;
  padding: 25px;
  position: relative;
  text-align: center;
}

.fog-seo .mark span { position: relative; z-index: 1; }

/* --- Etiketten ----------------------------------------------------------- */

.fog-seo .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.fog-seo .tag {
  background: var(--fsseo-white);
  border: 1px solid var(--fsseo-magenta);
  color: var(--fsseo-ink);
  display: inline-flex;
  font-size: 13px;
  padding: 8px 11px;
}

/* --- Faktenleiste --------------------------------------------------------
   minmax(0,1fr) statt 1fr: mit reinem 1fr sprengen lange technische Werte
   die Spalte. Im Projekt schon zweimal passiert. */

.fog-seo .facts {
  border-bottom: 1px solid var(--fsseo-line);
  border-top: 1px solid var(--fsseo-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 28px 0;
}

.fog-seo .fact {
  border-right: 1px solid var(--fsseo-line);
  min-width: 0;
  padding: 18px;
}

.fog-seo .fact:last-child { border-right: 0; }

.fog-seo .fact small {
  color: var(--fsseo-muted);
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.fog-seo .value {
  color: var(--fsseo-ink);
  display: block;
  font-size: clamp(19px, 2.3cqi, 27px);
  line-height: 1.05;
}

/* --- Inhalt -------------------------------------------------------------- */

.fog-seo .content { padding: clamp(26px, 5cqi, 54px) 0 0; }
.fog-seo .content > p { max-width: 880px; }

.fog-seo .grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px 0;
}

.fog-seo .box {
  border-top: 4px solid var(--fsseo-brand);
  min-width: 0;
  padding: 18px 0 0;
}

.fog-seo .box.soft {
  background: var(--fsseo-soft);
  border-top-color: var(--fsseo-magenta);
  padding: 22px;
}

.fog-seo .box :is(ul, ol), .fog-seo ol.steps, .fog-seo ul.steps {
  margin: 0;
  padding-left: 20px;
}

.fog-seo .box li + li { margin-top: 7px; }

/* --- Entscheidungshilfe --------------------------------------------------
   Die dunkle Flaeche des Textkoerpers. #830779 darf Schwarz nicht beruehren
   (2,04:1) — das Label traegt hier das helle Magenta (rund 7:1). */

.fog-seo .decision {
  background: var(--fsseo-deep);
  border-left: 6px solid var(--fsseo-magenta);
  color: var(--fsseo-white);
  display: grid;
  gap: 25px;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  margin: 30px 0;
  padding: clamp(25px, 4cqi, 42px);
}

.fog-seo .decision :is(h2, h3), .fog-seo .decision a { color: var(--fsseo-white); }

.fog-seo .decision .label { color: var(--fsseo-magenta-hell); }

.fog-seo .decision p:last-child { margin-bottom: 0; }

/* --- Technische Daten ---------------------------------------------------- */

.fog-seo .specs {
  background: var(--fsseo-line);
  border: 1px solid var(--fsseo-line);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 28px;
}

.fog-seo .spec {
  background: var(--fsseo-white);
  min-width: 0;
  padding: 15px 17px;
}

.fog-seo .spec small {
  color: var(--fsseo-muted);
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fog-seo .spec strong {
  display: block;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 4px;
}

/* --- FAQ -----------------------------------------------------------------
   Nativ ueber details/summary. Kein JS-Akkordion: der Text muss ohne Skript
   im Quelltext stehen und per Tastatur bedienbar bleiben. */

.fog-seo .faq { margin-top: 42px; }

.fog-seo details {
  border-top: 1px solid var(--fsseo-line);
  margin: 0;
  padding: 0;
}

.fog-seo details:last-child {
  border-bottom: 1px solid var(--fsseo-line);
}

.fog-seo summary {
  color: var(--fsseo-ink);
  cursor: pointer;
  font-family: var(--fsseo-text) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  list-style-position: outside;
  padding: 18px 30px 18px 0;
}

.fog-seo details[open] summary { color: var(--fsseo-brand); }

.fog-seo details p {
  max-width: 840px;
  padding: 0 28px 18px 0;
}

/* Fokus muss sichtbar bleiben — das Theme setzt an mehreren Stellen
   outline:none. Hier nicht. */
.fs-desc a:focus-visible, .fog-seo a:focus-visible, .fog-seo summary:focus-visible {
  outline: 2px solid var(--fsseo-brand);
  outline-offset: 2px;
}

/* --- Hinweise ------------------------------------------------------------ */

.fog-seo .warning {
  background: var(--fsseo-warn-bg);
  border: 2px solid var(--fsseo-magenta);
  margin: 24px 0;
  padding: 16px;
}

.fog-seo .notice {
  background: var(--fsseo-notice-bg);
  border-left: 4px solid var(--fsseo-notice-line);
  margin: 22px 0;
  padding: 14px 16px;
}

.fog-seo :is(.warning, .notice) p:last-child { margin-bottom: 0; }


/* ============================================================================
   5 — CONTAINER QUERIES
   ----------------------------------------------------------------------------
   WARUM NICHT MEDIA QUERIES: Die Produktbeschreibung steht je nach Einstellung
   in einer 7/12-Spalte neben der rechten Merkmalsuebersicht. Gemessen am
   Dev-Shop am 24.08.2026 bei 1280 px Fensterbreite: die Beschreibungsflaeche
   ist je nach Reiter-Variante 658 px ODER 1336 px breit — dieselbe
   Fensterbreite, zwei voellig verschiedene Layoutlagen.

   Der Container heisst "fsseo" und sitzt auf .fs-desc und .fog-seo. (Der
   Name blieb, damit die Regeln unten unveraendert greifen; .fsseo selbst
   bringt seinen eigenen, namenlosen Container in fs-beschreibung.css mit.)
   Name ist bewusst gesetzt: eine namenlose @container-Regel bindet an den
   naechsten Container-Vorfahren, was in fremdem OPC-Markup danebengreifen
   koennte.
   ============================================================================ */

@container fsseo (max-width: 900px) {
  .fog-seo .hero, .fog-seo .decision { grid-template-columns: minmax(0, 1fr); }

  .fog-seo .mark { min-height: 120px; }

  .fog-seo .hero { border-left-width: 5px; }

  .fog-seo .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fog-seo .fact:nth-child(2) { border-right: 0; }

  .fog-seo .fact:nth-child(-n + 2) {
    border-bottom: 1px solid var(--fsseo-line);
  }
}

@container fsseo (max-width: 650px) {
  .fog-seo .grid, .fog-seo .specs { grid-template-columns: minmax(0, 1fr); }
}

@container fsseo (max-width: 480px) {
  .fog-seo h2 { font-size: 30px; }
  .fog-seo h3 { font-size: 22px; }

  .fog-seo :is(p, li), .fog-seo summary { font-size: 15px; }

  .fog-seo .facts { grid-template-columns: minmax(0, 1fr); }

  .fog-seo .fact, .fog-seo .fact:nth-child(2) {
    border-bottom: 1px solid var(--fsseo-line);
    border-right: 0;
  }

  .fog-seo .fact:last-child { border-bottom: 0; }

  .fs-desc :is(h2, .h2) { font-size: 22px; }
  .fs-desc :is(h3, .h3) { font-size: 18px; }
  .fs-desc :is(p, li)   { font-size: 15px; }
}

/* Fallback fuer Browser ohne Container Queries (Safari < 16, Chrome < 105).
   Dort greift ersatzweise die Fensterbreite — schlechter, aber nie kaputt. */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .fog-seo .hero, .fog-seo .decision { grid-template-columns: minmax(0, 1fr); }
    .fog-seo .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fog-seo .fact:nth-child(2) { border-right: 0; }
  }

  @media (max-width: 650px) {
    .fog-seo .grid, .fog-seo .specs { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 480px) {
    .fog-seo h2 { font-size: 30px; }
    .fog-seo .facts { grid-template-columns: minmax(0, 1fr); }
    .fog-seo .fact { border-right: 0; }
  }
}


/* ============================================================================
   6 — KOMPATIBILITAET: die beiden aelteren Vokabulare
   ----------------------------------------------------------------------------
   Abschnitt 4 ist die verbindliche Fassung. Dieser Abschnitt haelt zwei
   aeltere Schreibweisen am Leben, damit bereits geschriebene Texte weiter
   richtig aussehen — insbesondere die sechs ELFA-Bundles, deren Ameise-Datei
   fertig vorbereitet ist.

     V1  .fog-seo__hero, __eyebrow, __mark, __facts, __fact-label,
         __fact-value, __content, __section-label, __grid, __block,
         __block--soft, __decision, __decision-label, __faq
         (Referenzpaket ELFA Filter Series / Master Luxe)

     V2  .eyebrow, .hero-copy, .hero-count, .fact > span/strong, .section,
         .section-head, .flavor-*, .spec-grid, .spec-card, div.steps, .step,
         .link-card, .faq-item, .tag.primary
         (Bundle-Generator)

   Sie erben die Optik von Abschnitt 4 — es gibt also weiterhin GENAU EIN
   Erscheinungsbild, nur mehrere Wege, es anzusprechen.

   FUER NEUE TEXTE NICHT VERWENDEN. Wenn die Altbestaende umgestellt sind,
   kann dieser Abschnitt ersatzlos entfallen.
   ============================================================================ */

/* --- V1: BEM-Schreibweise ------------------------------------------------ */

.fog-seo__hero   { /* siehe .hero */ }

.fog-seo__eyebrow, .fog-seo__section-label, .fog-seo__decision-label, .fog-seo .section-head > span, .fog-seo .eyebrow {
  color: var(--fsseo-brand);
  display: block;
  font-family: var(--fsseo-display) !important;
  font-size: 15px;
  font-weight: 400 !important;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.fog-seo .eyebrow { font-size: 13px; letter-spacing: 0.1em; margin-bottom: 10px; }

.fog-seo__decision-label,
.fog-seo .section.decision .section-head > span { color: var(--fsseo-magenta-hell); }

.fog-seo__hero {
  align-items: stretch;
  background: linear-gradient(135deg,
              var(--fsseo-white) 0%,
              var(--fsseo-soft) 72%,
              var(--fsseo-soft-tief) 100%);
  border: 1px solid var(--fsseo-line);
  border-left: 6px solid var(--fsseo-brand);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.45fr) minmax(190px, 0.55fr);
  overflow: hidden;
  padding: clamp(20px, 2.6cqi, 30px);
  position: relative;
}

.fog-seo__hero::after {
  background: linear-gradient(135deg, var(--fsseo-brand), var(--fsseo-magenta));
  content: "";
  height: 240px;
  opacity: 0.11;
  position: absolute;
  right: -90px;
  top: -120px;
  transform: rotate(28deg);
  width: 240px;
}

.fog-seo__hero > * { position: relative; z-index: 1; }

.fog-seo__lead {
  font-size: clamp(17px, 2cqi, 20px) !important;
  line-height: 1.52 !important;
  max-width: 820px;
}

/* Signet und Bundle-Zaehler tragen dieselbe durchgehende Flaeche wie .mark:
   keine Balken, nur die Magenta-Kante unten. */
.fog-seo__mark, .fog-seo .hero-count {
  align-items: center;
  background: var(--fsseo-deep);
  border-bottom: 5px solid var(--fsseo-magenta);
  color: var(--fsseo-white);
  display: flex;
  flex-direction: column;
  font-family: var(--fsseo-display) !important;
  font-size: clamp(25px, 3cqi, 38px);
  font-weight: 400 !important;
  justify-content: center;
  letter-spacing: 0.025em;
  min-height: 170px;
  overflow: hidden;
  padding: 25px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

.fog-seo__mark span, .fog-seo .hero-count > * { position: relative; z-index: 1; }

.fog-seo .hero-count strong {
  font-family: var(--fsseo-display) !important;
  font-size: clamp(48px, 7cqi, 86px);
  font-weight: 400 !important;
  line-height: 0.9;
}

.fog-seo .hero-count span {
  font-family: var(--fsseo-text) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-top: 8px;
}

.fog-seo__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.fog-seo__tag {
  background: var(--fsseo-white);
  border: 1px solid var(--fsseo-magenta);
  color: var(--fsseo-ink);
  display: inline-flex;
  font-family: var(--fsseo-display) !important;
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: 0.025em;
  padding: 8px 11px;
  text-transform: uppercase;
}

/* Der Bundle-Generator kennt eine gefuellte Variante. */
.fog-seo .tag.primary, .fog-seo__tag--primary {
  background: var(--fsseo-brand);
  border-color: var(--fsseo-brand);
  color: var(--fsseo-white);
}

.fog-seo__facts {
  border-bottom: 1px solid var(--fsseo-line);
  border-top: 1px solid var(--fsseo-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 28px 0;
}

.fog-seo__fact {
  border-right: 1px solid var(--fsseo-line);
  min-width: 0;
  padding: 18px;
}

.fog-seo__fact:last-child { border-right: 0; }

/* V1 nutzt eigene Klassen, V2 nutzt span/strong im .fact.
   ACHTUNG, hier steckte eine Kollision: In der kanonischen Fassung ist der
   WERT ein <span class="value"> und damit ebenfalls ein direktes span-Kind
   von .fact. Ohne das :not(.value) gewinnt diese Label-Regel (0,2,1) gegen
   `.fsseo .value` (0,2,0) — der Wert stand dann als 12-px-Label da.
   Am 24.08.2026 am lebenden Objekt gemessen und behoben. */
.fog-seo__fact-label, .fog-seo .fact > span:not(.value) {
  color: var(--fsseo-muted);
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.fog-seo__fact-value, .fog-seo .fact > strong, .fog-seo .fact > span.value {
  color: var(--fsseo-ink);
  display: block;
  font-family: var(--fsseo-display) !important;
  font-size: clamp(19px, 2.3cqi, 27px);
  font-weight: 400 !important;
  letter-spacing: 0.025em;
  line-height: 1.05;
  text-transform: uppercase;
}

.fog-seo__content { padding: clamp(26px, 5cqi, 54px) 0 0; }
.fog-seo__content > p { max-width: 880px; }

.fog-seo__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px 0;
}

.fog-seo__block {
  border-top: 4px solid var(--fsseo-brand);
  min-width: 0;
  padding: 18px 0 0;
}

.fog-seo__block--soft {
  background: var(--fsseo-soft);
  border-top-color: var(--fsseo-magenta);
  padding: 22px;
}

.fog-seo__block ul { margin: 0; padding-left: 20px; }
.fog-seo__block li + li { margin-top: 7px; }

.fog-seo__decision {
  background: var(--fsseo-deep);
  border-left: 6px solid var(--fsseo-magenta);
  color: var(--fsseo-white);
  display: grid;
  gap: 25px;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  margin: 30px 0;
  padding: clamp(25px, 4cqi, 42px);
}

.fog-seo__decision :is(h2, h3), .fog-seo__decision a { color: var(--fsseo-white); }

.fog-seo__faq { margin-top: 42px; }

/* --- V2: Bundle-Generator ------------------------------------------------ */

.fog-seo .section { margin: 28px 0; }

.fog-seo .section-head {
  align-items: baseline;
  border-bottom: 1px solid var(--fsseo-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
}

.fog-seo .section-head :is(h2, h3, h4) { margin: 0; }

/* Der Bundle-Abschnitt mit Entscheidungscharakter — dieselbe dunkle Flaeche. */
.fog-seo .section.decision {
  border-left: 6px solid var(--fsseo-magenta);
  display: block;
  padding: clamp(25px, 4cqi, 42px);
}

.fog-seo .section.decision .section-head { border-bottom-color: rgba(255, 255, 255, 0.25); }

.fog-seo .flavor-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* KORREKTUR 24.08.2026 nach Sichtbeleg von Yunus: die Sortenkarten stehen
   DUNKEL, nicht auf der weichen Markenflaeche. Meine erste Fassung war eine
   Rekonstruktion — die Quelldatei lag nicht mehr vor. Jetzt am Original
   ausgerichtet: dunkle Flaeche, Magenta-Oberkante, weisser Anton-Titel.

   EINE ABWEICHUNG: der Fliesstext steht auf --fsseo-auf-dunkel statt auf dem
   Sekundaergrau. #707070 auf #140412 ergibt 3,1:1 und ist damit unter der
   Lesbarkeitsgrenze fuer Fliesstext; der helle Ton kommt auf rund 11:1. */
.fog-seo .flavor-card {
  background: var(--fsseo-deep);
  border-top: 3px solid var(--fsseo-magenta);
  color: var(--fsseo-white);
  min-width: 0;
  padding: 18px;
}

.fog-seo .flavor-no {
  color: var(--fsseo-magenta);
  display: block;
  font-family: var(--fsseo-display) !important;
  font-size: 22px;
  font-weight: 400 !important;
  line-height: 1;
  margin-bottom: 8px;
}

.fog-seo .flavor-card h4, .fog-seo .faq-item h4 {
  color: var(--fsseo-ink);
  line-height: 1.2;
  margin: 0 0 6px;
}

.fog-seo .flavor-card h4 {
  color: var(--fsseo-white);
  font-family: var(--fsseo-display) !important;
  font-size: 18px;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fog-seo .flavor-card p {
  color: var(--fsseo-auf-dunkel);
  font-size: 15px;
  margin: 0;
}

/* .spec-grid/.spec-card sind die V2-Namen fuer .specs/.spec. */
/* KORREKTUR 24.08.2026, ebenfalls nach Sichtbeleg: die Datenkarten des
   Generators stehen als eigenstaendige weisse Karten mit Magenta-Kante links,
   dreispaltig mit echtem Abstand — nicht im 1-px-Raster wie .specs der
   verbindlichen Fassung. auto-fill statt fester Dreiteilung, damit die Karten
   in der schmalen 7/12-Spalte nicht zerquetschen. */
.fog-seo .spec-grid {
  display: grid;
  gap: 10px;
  /* 320px + 10px Abstand ergeben bei 1200 px Container genau DREI Spalten
     wie im Original, bei 651 px zwei und unter 480 px eine. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  margin: 18px 0 28px;
}

.fog-seo .spec-card {
  background: var(--fsseo-white);
  border: 1px solid var(--fsseo-line);
  border-left: 5px solid var(--fsseo-magenta);
  min-width: 0;
  padding: 14px 16px;
}

.fog-seo .spec-card > span {
  color: var(--fsseo-muted);
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fog-seo .spec-card > strong {
  display: block;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 4px;
}

/* V2 baut Schritte als Kartenraster (div.steps), V3 als Liste (ol.steps).
   Die Unterscheidung laeuft ueber das Element, nicht ueber :has(). */
.fog-seo div.steps {
  counter-reset: fsseo-step;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  padding-left: 0;
}

.fog-seo .step {
  border-top: 3px solid var(--fsseo-brand);
  counter-increment: fsseo-step;
  min-width: 0;
  padding: 14px 0 0;
}

.fog-seo .step::before {
  color: var(--fsseo-magenta);
  content: counter(fsseo-step, decimal-leading-zero);
  display: block;
  font-family: var(--fsseo-display);
  font-size: 20px;
  line-height: 1;
  margin-bottom: 6px;
}

.fog-seo .step > strong {
  color: var(--fsseo-ink);
  display: block;
  font-family: var(--fsseo-display) !important;
  font-size: 17px;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.fog-seo .step p { font-size: 15px; margin: 0; }

.fog-seo .link-card {
  background: var(--fsseo-soft);
  border-left: 4px solid var(--fsseo-brand);
  font-size: 15px;
  line-height: 1.6;
  margin: 20px 0;
  padding: 16px 18px;
}

.fog-seo .link-card strong {
  color: var(--fsseo-brand);
  font-weight: 700;
}

/* Statische FAQ des Generators. Frage und Antwort stehen dauerhaft sichtbar —
   der Text liegt ohne Skript im Quelltext, es gibt nichts aufzuklappen. */
.fog-seo .faq-item {
  border-top: 1px solid var(--fsseo-line);
  padding: 14px 0;
}

.fog-seo .faq-item:last-child {
  border-bottom: 1px solid var(--fsseo-line);
}

.fog-seo .faq-item h4 {
  font-family: var(--fsseo-text) !important;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}

.fog-seo .faq-item p { margin: 0; max-width: 840px; }

/* --- Kompatibilitaet im Container-Raster --------------------------------- */

@container fsseo (max-width: 900px) {
  .fog-seo__hero, .fog-seo__decision { grid-template-columns: minmax(0, 1fr); }

  .fog-seo__mark, .fog-seo .hero-count { min-height: 120px; }

  .fog-seo__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fog-seo__fact:nth-child(2) { border-right: 0; }
  .fog-seo__fact:nth-child(-n + 2) {
    border-bottom: 1px solid var(--fsseo-line);
  }
}

@container fsseo (max-width: 650px) {
  .fog-seo__grid, .fog-seo .flavor-grid, .fog-seo div.steps { grid-template-columns: minmax(0, 1fr); }

  .fog-seo .section { margin: 22px 0; }
  .fog-seo .section-head { gap: 4px; }
}

@container fsseo (max-width: 480px) {
  .fog-seo__facts { grid-template-columns: minmax(0, 1fr); }

  .fog-seo__fact, .fog-seo__fact:nth-child(2) {
    border-bottom: 1px solid var(--fsseo-line);
    border-right: 0;
  }

  .fog-seo__fact:last-child { border-bottom: 0; }
}


/* ============================================================================
   7 — BEWEGUNG
   Das System animiert nichts. Der Block steht hier, damit spaeter ergaenzte
   Uebergaenge die Nutzereinstellung nicht uebergehen.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .fs-desc *, .fog-seo * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}