/* =========================================================================
   Flaegs 2026 – Haupt-Stylesheet (v1.0.0)

   Design-Sprache: schlank und klar. Sandfarbener Grund, tiefes Grün-Schwarz
   für Text und die wenigen dunklen Flächen, blaue Akzente, viel Weißraum.
   Keine Rundungen, keine harten Schatten, Rahmen so fein wie möglich –
   Ordnung entsteht über Typografie und Abstand, nicht über Kästen.

   Überschriften: Archiv Grotesk SemiBold, selbst gehostet (siehe unten).
   Fließtext: Systemschriften – nichts nachzuladen, kein Drittanbieter.
   ========================================================================= */

/* ---------- Schrift ----------
   Nur ein Schnitt (SemiBold/600). Deshalb steht überall, wo die
   Display-Schrift genutzt wird, font-weight: 600 – andere Gewichte würde
   der Browser künstlich verzerren. `font-display: swap` zeigt sofort die
   Systemschrift und tauscht sie aus, sobald die Datei da ist. */
@font-face {
  font-family: "Archiv Grotesk";
  src: url("../fonts/archiv-grotesk-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ----------
   Diese Tokens sind die EINZIGE Stelle, an der das Aussehen der Seite
   festgelegt wird – inklusive des Flaggen-Konfigurators: Dessen
   Stylesheet (flaegs-configurator/assets/css/configurator.css) enthält
   nur noch Struktur und liest Farben, Rahmen, Radien und Schatten aus
   den Tokens hier. Die Namen --c-blue / --c-neon sind historisch: das
   Plugin kennt sie als "Akzent" und "helle Signalfläche", nicht als
   konkrete Farben. Sie bleiben deshalb erhalten, auch wenn hier kein
   Neongelb mehr drinsteht. */
:root {
  /* Grundpalette */
  --c-bg:     #f4f2ec;   /* Sand – Seitengrund */
  --c-ink:    #040221;   /* Tinte – Text, Linien, dunkle Flächen */
  --c-blue:   #1b4dff;   /* Akzent – CTA, Links, Hervorhebungen */
  --c-signal: #ff4b09;   /* Sekundärfarbe – nur funktionale Signale */
  --c-white:  #f7f6f1;   /* Eingabefelder, Tabellenköpfe, helle Flächen */

  /* Abgeleitete Rollen */
  --c-muted:      #5b616a;   /* Beschriftungen, Hilfstexte */
  /* Linien tragen die gesamte Gliederung. Deshalb volle Tinte und nicht
     durchscheinend – sonst zerfällt das Raster in ein Geflimmer
     verschieden starker Kanten. */
  --c-line:       #040221;   /* Haarlinie */
  --c-line-hover: #1b4dff;   /* Haarlinie beim Überfahren */
  /* Haarlinie auf dunklem Grund. Volle Tinte wäre dort unsichtbar,
     reines Weiß zu laut. */
  --c-line-on-ink: #454b53;

  /* Rollen, die vor allem der Konfigurator braucht (Namen sind Vertrag). */
  --c-line-soft: var(--c-line);              /* feine Trennlinien */
  --c-neon:      #dfe5ff;                    /* helle Akzentfläche: Hover, Hinweisband */
  --c-neon-soft: rgba(27, 77, 255, 0.06);    /* dieselbe Rolle, noch leiser */
  --c-overlay:   rgba(14, 17, 22, 0.55);     /* Modal-Hintergrund */
  /* Höhe des klebenden Kopfbereichs. Der Konfigurator hält seine
     klebende Vorschau um diesen Betrag tiefer, damit sie nicht darunter
     verschwindet – siehe .header-inner (min-height) weiter unten. */
  --c-sticky-offset: 84px;
  /* Das Hinweisband im w3w-Modal ist die ruhige Akzentfläche, nicht
     Signalorange: Im Raster gibt es kein zweites Signal. Die Meldung über
     fehlende Angaben auf der Produktseite setzt das Orange bewusst
     wieder ein – dort meldet es eine Störung. */
  --c-signal-surface: #dfe5ff;
  --c-on-signal: #0e1116;
  --c-on-ink:    var(--c-bg);                /* Text auf tiefgrüner Fläche */
  --c-focus:     var(--c-blue);              /* Fokus-Ring */
  /* Signalorange trägt als Textfarbe zu wenig Kontrast auf Sand (3,0:1).
     Für Text deshalb eine abgedunkelte Variante desselben Farbtons
     (4,8:1), fürs Auge weiterhin dasselbe Orange. */
  --c-danger:    #c43600;
  /* Pfeil im Varianten-Dropdown: in der Data-URI wirkt keine Variable,
     deshalb als fertige Grafik in Textfarbe. Der Farbwert ist hier von
     Hand mitzuziehen – er stand noch auf dem Tiefgrün des 2026er Themes
     und war damit der einzige Rest der alten Palette im Bild. */
  --c-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230e1116' stroke-width='1.5'/%3E%3C/svg%3E");

  /* Schrift */
  --font-display: "Archiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --tracking-display: 0.01em;   /* leichte Weite in Überschriften */
  --tracking-wide: 0.12em;      /* Versalien: Eyebrow, Labels */

  /* Form */
  --border: 1px solid var(--c-line);
  --radius: 0;                  /* klare Kanten, keine Rundungen */
  /* Eine Linienstärke im ganzen Theme. Ein kräftigerer Knopfrahmen wäre
     neben den Haarlinien des Rasters sofort als zweite Stärke zu sehen. */
  --btn-border: 1px;

  /* Keine Erhebung: Das Raster kennt nur Linien, ein Schatten fiele
     sofort als Fremdkörper auf. Tiefe entsteht über Weißraum und Ton.
     --shadow-hard-accent bleibt, es ist kein Schatten, sondern die
     Markierung des gewählten Farbfelds im Konfigurator. */
  --shadow-hard-sm:     none;
  --shadow-hard:        none;
  --shadow-hard-lg:     none;
  --shadow-hard-accent: 0 0 0 3px var(--c-blue);
  --lift: none;                 /* kein Versatz beim Überfahren */

  /* Maße */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(2rem, 9vw, 4rem);
  --head-weight: 600;
  /* Die zwei Innenabstände des Rasters. Blöcke stehen auf 40, die
     durchlaufenden Bänder (Brotkrumen, Fuß) auf 48 – dadurch wirken sie
     flacher als die Blöcke, ohne eine eigene Linie zu brauchen. */
  --alt-pad: 40px;
  --alt-band-pad: 48px;
}

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

html {
  /* Verhindert, dass iOS beim Drehen ins Querformat die Schrift
     eigenmächtig vergrößert. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Safari auf iOS zoomt die Seite beim Antippen eines Eingabefelds heran,
   wenn dessen Schrift kleiner als 16px ist – und zoomt danach nicht von
   allein zurück. Deshalb bekommen alle Bedienelemente mindestens 16px.
   Die Regel steht bewusst auf den Element-Selektoren (schwächste
   Spezifität): Sie greift überall dort, wo keine andere Regel eine Größe
   vorgibt – etwa beim Gutschein-Feld im Warenkorb oder beim manuellen
   Eingabefeld im Konfigurator, die sonst auf der Browser-Vorgabe von
   rund 13px landen.
   Nicht gemacht: maximum-scale/user-scalable im Viewport festzurren. Das
   würde das Problem auch lösen, nimmt aber das Aufziehen mit zwei
   Fingern weg – für Menschen, die schlecht sehen, ein echter Verlust. */
input, select, textarea, button { font-size: max(1rem, 16px); }

body {
  margin: 0;
  /* Die klebende Vorschau im Konfigurator reicht über die volle
     Fensterbreite hinaus. clip verhindert, dass daraus ein waagerechter
     Scrollbalken wird – anders als hidden schaltet clip das Kleben
     innerhalb der Seite nicht ab. */
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Von der Display-Schrift existiert nur SemiBold. font-synthesis: none
     verhindert, dass der Browser daraus ein künstliches Fett rechnet. */
  font-weight: var(--head-weight);
  font-synthesis: none;
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  margin: 0 0 0.6em;
  color: var(--c-ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
h4 { font-size: 1.0625rem; }

/* Fettung innerhalb von Überschriften nicht doppelt auszeichnen. */
h1 strong, h2 strong, h3 strong, h4 strong { font-weight: inherit; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.18s ease;
}
a:hover { color: var(--c-ink); }

/* Sichtbarer Fokus für Tastaturbedienung – überall, nicht nur bei Buttons. */
:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1.25rem;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  clip: auto; width: auto; height: auto;
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  background: var(--c-ink); color: var(--c-bg); padding: 0.6em 1em;
}

/* ---------- Buttons ----------
   Drei Rollen:
   1. Standard (.btn, .btn-primary, normale WooCommerce-Buttons)
      → Umriss in Akzentblau, füllt sich beim Überfahren.
   2. Sekundär (.btn-ghost, „Weitere Flagge gestalten", Warenkorb
      aktualisieren, Zurück zum Shop)
      → Umriss in Textfarbe, füllt sich beim Überfahren dunkel.
   3. Kauf-CTA (.btn-cta, In-den-Warenkorb, Kasse, Bestellung absenden)
      → von Anfang an blau gefüllt, damit der Kaufweg heraussticht.
   Reichlich Innenabstand ist Absicht: Die Buttons sollen Luft haben.

   Aufbau: Die Deklarationen stehen EINMAL in der Grundregel und lesen
   ihre Werte aus fünf Variablen. Varianten setzen nur diese Variablen.
   Vorher hatte jede Variante eigene Deklarationen – dabei kann eine
   Variante die Grundregel teilweise überschreiben (etwa die Schriftfarbe,
   aber nicht die Hover-Schriftfarbe) und der Button verhält sich anders
   als seine Geschwister. Genau das war beim Startseiten-Button
   „Motive entdecken" passiert: Seine Farbregel war spezifischer als die
   allgemeine Hover-Regel, die Schrift blieb beim Überfahren blau und
   verschwand auf blauem Grund.

   Die Variablen haben ihre Vorgabe als var()-Fallback und werden in der
   Grundregel NICHT gesetzt. Nur so kann ein umgebender Container (etwa
   ein dunkles Band) sie vererben – ein eigener Wert am Element selbst
   würde eine Vererbung immer schlagen.

   Der Hover-Effekt läuft über background-size: Die Füllfarbe liegt als
   Verlauf im Hintergrund und wird von 0 auf volle Breite aufgezogen, was
   sie von links nach rechts einlaufen lässt. Ein Pseudo-Element wäre
   naheliegender, scheidet aber aus: WooCommerce rendert manche Buttons
   als <input>, und die können ::before/::after nicht darstellen. */
/* WooCommerce bringt eigene Button-Farben mit: das bekannte Violett
   #a46497 für .alt, ein Grau für den Hover – und background-image: none,
   was den einlaufenden Verlauf schlicht wegräumt.
   Diese Regeln sind spezifischer als eine Grundregel mit
   `.woocommerce button.button` (drei Klassen gegen zwei), sie haben
   unsere Farben also überstimmt. Deshalb steht `.button` hier dreifach:
   Das ändert nichts an der Auswahl der Elemente, hebt die Spezifität
   aber sicher über die von WooCommerce. Weniger schön als ein
   schlanker Selektor, dafür verlässlich – und es lässt WooCommerce'
   übrige Stile unangetastet, statt sein Stylesheet komplett abzuwerfen. */
.btn,
.wp-block-button__link,
.woocommerce a.button.button.button,
.woocommerce button.button.button.button,
.woocommerce input.button.button.button,
.woocommerce #respond input#submit,
.wc-block-components-button.wc-block-components-button:not(.is-link),
.flaegs-configurator .flaegs-w3w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1em 2.1em;
  border: var(--btn-border) solid var(--btn-line, var(--c-blue));
  border-radius: var(--radius);
  background-color: var(--btn-bg, transparent);
  /* Zwei gleiche Farbstopps statt „Farbe 0 100%": Das Ergebnis ist
     dasselbe, aber diese Schreibweise ist die älteste und schlichteste –
     sie übersteht auch ältere Safari-Versionen und CSS-Minifizierer, die
     mehrfache Positionsangaben in Verläufen nicht kennen. Eine ungültige
     background-image-Zeile würde den Effekt komplett ausfallen lassen. */
  background-image: linear-gradient(to right, var(--btn-fill, var(--c-blue)), var(--btn-fill, var(--c-blue)));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  color: var(--btn-fg, var(--c-blue));
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  /* Kurz gehalten (0,28 s): Während des Einlaufens wechselt die Schrift
     ihre Farbe gleichzeitig mit der Fläche, es gibt also einen kurzen
     Moment, in dem beide auf halbem Weg sind. Je knapper der Übergang,
     desto unauffälliger dieser Moment – und „dezent" heißt hier ohnehin
     eher zügig als langsam. */
  transition: background-size 0.28s ease, color 0.28s ease, border-color 0.2s ease;
}

.btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button.button.button:hover,
.woocommerce button.button.button.button:hover,
.woocommerce input.button.button.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button.wc-block-components-button:not(.is-link):hover,
.flaegs-configurator .flaegs-w3w-btn:hover {
  background-size: 100% 100%;
  border-color: var(--btn-fill, var(--c-blue));
  color: var(--btn-fg-hover, var(--c-white));
  /* Hier steht bewusst KEIN eigenes transition. Der Übergang wird
     ausschließlich in der Grundregel festgelegt und gilt damit in beide
     Richtungen gleich.

     Vorher stand hier eine zweite transition-Deklaration mit einem
     zusätzlichen Eintrag für background-color. Sie hat die Ursache für
     ein schwer greifbares Verhalten geliefert: Beim Betreten gilt die
     transition-Angabe des Ziel-Zustands, beim Verlassen die des
     Ausgangs-Zustands. Fällt die eine von beiden aus, läuft der Effekt
     nur noch in eine Richtung – der Button springt beim Betreten
     sofort um und läuft erst beim Verlassen sauber zurück. Genau so
     war es zu sehen. Eine einzige Quelle für den Übergang schließt
     diese Klasse von Fehlern aus. */
}

/* Sekundär: Rahmen in Textfarbe, läuft dunkel voll.
   .flaegs-submit ist „Weitere Flagge gestalten" im Konfigurator – der
   zweite Weg neben „Weiter zum Warenkorb" und damit nachgeordnet. */
.btn-ghost,
.wp-block-button.btn-ghost,
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.woocommerce button.flaegs-submit,
.flaegs-configurator .flaegs-w3w-btn {
  --btn-fg: var(--c-ink);
  --btn-line: var(--c-ink);
  --btn-fill: var(--c-ink);
  --btn-fg-hover: var(--c-bg);
}

/* Kauf-CTA: blau gefüllt, läuft beim Überfahren in der Markenfarbe voll –
   weiße Schrift darauf. Gilt für den gesamten Kaufweg (In den Warenkorb,
   Zur Kasse, Bestellung absenden), damit die Schritte sich gleich
   verhalten. Zum Kontrast: Weiß auf #ff4b09 liegt bei 3,35:1 und damit
   unter den 4,5:1 für Text dieser Größe – bewusste Markenentscheidung,
   und sie betrifft nur den Zustand unter dem Zeiger. */
.btn-cta,
.wp-block-button.btn-cta,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button,
/* Der Weg zur Kasse und die Bestellung selbst tragen dieselbe Rolle wie
   „Weiter zum Warenkorb“ – gefüllt, beim Überfahren in der Markenfarbe.
   Beide Warenkorb-Varianten sind abgedeckt: die klassische Fassung
   (a.checkout-button, #place_order) und die Block-Fassung, die andere
   Klassennamen verwendet. */
.woocommerce a.checkout-button,
.woocommerce #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  --btn-bg: var(--c-blue);
  --btn-fg: var(--c-white);
  --btn-line: var(--c-blue);
  --btn-fill: var(--c-signal);
  --btn-fg-hover: var(--c-white);
}

.wp-block-buttons { gap: 1rem; }

/* In den Block-Buttons steckt die Beschriftung in einem eigenen Element,
   das seine Farbe selbst mitbringt. Ohne inherit bliebe sie beim
   Überfahren stehen, während die Fläche wechselt. */
.wc-block-components-button__text,
.wc-block-cart__submit-button .wc-block-components-button__text {
  color: inherit;
}

/* Textlink mit Pfeil – ersetzt in vielen Fällen einen dritten Button. */
.link-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  text-decoration: none;
  white-space: nowrap;
}
.link-arrow:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  border-bottom: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}
.site-branding { flex-shrink: 0; }

/* Hochgeladenes Logo (Design → Customizer → Website-Informationen).
   Das Bild bekommt eine DEFINITE Höhe statt nur einer Obergrenze, und
   der Link ist kein Flex-Container. Beides zusammen ist der Grund:
   Ein SVG-Logo ohne eigene width/height-Attribute hat keine Eigenbreite.
   Als Flex-Element mit height:auto rechnet Chrome daraus die Breite 0 –
   das Logo verschwindet. Safari nimmt stattdessen die Standardgröße für
   Ersatzelemente an und zeigt es. Mit fester Höhe leitet auch Chrome die
   Breite aus dem viewBox-Verhältnis ab.
   object-fit: contain schützt dabei vor Verzerrung: Greift die
   Breitengrenze bei einem sehr langen Logo, wird es eingepasst statt
   gestaucht. */
.site-branding .custom-logo-link {
  display: block;
  line-height: 0;   /* kein Zeilenabstand unter dem Bild */
}
.site-branding .custom-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 760px) {
  .site-branding .custom-logo {
    height: 36px;
    max-width: 160px;
  }
}

.site-logo-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  font-size: 1.5rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--c-ink);
}
.site-logo-text:hover { color: var(--c-blue); }

/* ---------- Flaggen-Marke ----------
   Mast und Flagge sind getrennte Formen in einem SVG, damit sie sich
   einzeln bewegen können. Der Mast erbt die Textfarbe, die Flagge trägt
   die Akzentfarbe – im Footer läuft beides in derselben hellen Farbe. */
.logo-mark {
  display: block;
  width: auto;
  height: 1.05em;
  flex-shrink: 0;
  overflow: visible;
}
.logo-mark__pole { fill: currentColor; }
.logo-mark__flag { fill: var(--logo-flag-color, var(--c-blue)); }
.logo-mark--light { --logo-flag-color: currentColor; }

.site-footer .logo-mark {
  height: 34px;
  color: var(--c-bg);
}

/* ---------- Aufbau des Logos ----------
   Läuft nur, wenn die Klasse gesetzt ist. Das übernimmt das Skript –
   einmal pro Besuch und nur, wenn die Animation im Customizer
   eingeschaltet ist.

   Reihenfolge: Der Mast kommt von unten, dann wird die Flagge daran
   hochgezogen und weht zweimal kurz aus, zuletzt erscheinen die
   Buchstaben nacheinander. Ohne die Klasse steht alles sofort da – das
   ist auch der Zustand, den alle sehen, die Bewegung abbestellt haben. */
/* Federt am Ende leicht über und pendelt sich ein. Die Werte sind
   absichtlich klein: Es soll lebendig wirken, nicht hüpfen. */
@keyframes flaegs-pop-up {
  0%   { opacity: 0; transform: translateY(45%); }
  55%  { opacity: 1; transform: translateY(-9%); }
  75%  { transform: translateY(4%); }
  90%  { transform: translateY(-1.5%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes flaegs-hoist {
  from { opacity: 0; transform: translateY(120%); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flaegs-wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  30%      { transform: skewY(-2.5deg) scaleX(0.97); }
  65%      { transform: skewY(2deg) scaleX(1); }
}

/* Ausgelöst wird über die Klasse is-playing – gesetzt vom Skript, und
   zwar am jeweiligen Logo statt einmal für die ganze Seite. Nur so
   können Kopf- und Fußbereich zu unterschiedlichen Zeitpunkten starten
   und sich beim Überfahren einzeln wiederholen.
   Die Regeln greifen, sobald die Klasse an irgendeinem Vorfahren sitzt:
   im Header am Link, im Footer am SVG selbst. */

/* „Vorbereitet": Das Skript setzt diese Klasse an ein Logo, dessen
   Aufbau erst später startet – beim Footer, sobald er ins Bild kommt.
   Ohne sie stünde das Logo fertig da und würde beim Hereinscrollen
   plötzlich verschwinden, um sich neu aufzubauen. Gesetzt wird sie nur,
   wenn der Beobachter auch wirklich zur Verfügung steht; sonst bleibt
   das Logo einfach sichtbar. */
.is-armed .logo-mark__pole,
.is-armed .logo-mark__flag,
.is-armed .logo-letter,
.is-armed [id*="mast" i],
.is-armed [id*="pole" i],
.is-armed [id*="flag" i],
.is-armed [id*="schrift" i],
.is-armed [id*="wort" i],
.is-armed [id*="letter" i] {
  opacity: 0;
}

/* transform-box: fill-box – ohne das beziehen sich Verschiebungen in
   einem SVG auf die gesamte Zeichenfläche statt auf die Form selbst. */
.logo-mark__pole,
.logo-mark__flag {
  transform-box: fill-box;
}
.is-playing .logo-mark__pole {
  transform-origin: bottom center;
  animation: flaegs-pop-up 0.46s ease-out both;
}
.is-playing .logo-mark__flag {
  transform-origin: left center;
  animation:
    flaegs-hoist 0.5s ease-out 0.32s both,
    flaegs-wave 0.6s ease-in-out 0.84s 2 both;
}
.is-playing .logo-letter {
  display: inline-block;
  animation: flaegs-pop-up 0.42s ease-out both;
  /* Jeder Buchstabe etwas später als sein Vorgänger. */
  animation-delay: calc(1.05s + var(--i) * 0.045s);
}

/* ---------- Dasselbe im hochgeladenen Logo ----------
   Ist ein SVG-Logo hinterlegt, wird es eingebettet statt als Bild
   eingebunden – dann lassen sich seine Teile ansprechen.

   Welcher Teil was ist, verrät die Datei über ihre Ebenennamen: Affinity
   und Illustrator schreiben den Ebenennamen als id ins SVG. Gesucht wird
   nach Namen, die "mast" oder "pole", "flag" bzw. "schrift", "wort" oder
   "letter" enthalten – Groß- und Kleinschreibung egal.

   Fehlen solche Ebenen, passiert schlicht nichts: Das Logo steht sofort
   fertig da, so wie vorher als Bild auch. Es gibt also keinen Zustand,
   in dem etwas unsichtbar hängen bleibt. */
.site-logo-svg [id*="mast" i],
.site-logo-svg [id*="pole" i],
.site-logo-svg [id*="flag" i],
.site-logo-svg [id*="schrift" i],
.site-logo-svg [id*="wort" i],
.site-logo-svg [id*="letter" i] {
  transform-box: fill-box;
}

.is-playing [id*="mast" i],
.is-playing [id*="pole" i],
.site-logo-svg.is-playing [id*="mast" i],
.site-logo-svg.is-playing [id*="pole" i] {
  transform-origin: bottom center;
  animation: flaegs-pop-up 0.46s ease-out both;
}
.is-playing [id*="flag" i],
.site-logo-svg.is-playing [id*="flag" i] {
  transform-origin: left center;
  animation:
    flaegs-hoist 0.5s ease-out 0.32s both,
    flaegs-wave 0.6s ease-in-out 0.84s 2 both;
}
.is-playing [id*="schrift" i],
.is-playing [id*="wort" i],
.is-playing [id*="letter" i] {
  transform-origin: bottom center;
  animation: flaegs-pop-up 0.46s ease-out 1.05s both;
}

/* Beim Überfahren wiederholt sich der Aufbau – der Zeiger soll spürbar
   etwas auslösen. */
.custom-logo-link,
.site-logo-text,
.site-footer .site-logo-svg,
.site-footer .logo-mark {
  cursor: pointer;
}

/* Maße des eingebetteten Logos.
   Feste Höhe, Breite aus dem Seitenverhältnis – dasselbe Vorgehen wie
   beim Logo als Bild. Bei einem eingebetteten SVG bedeutet width: auto
   nämlich „volle Breite des Elternteils", nicht „passend zur Höhe". */
.site-logo-svg {
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
  aspect-ratio: var(--logo-ratio, auto);
}
@media (max-width: 760px) {
  .site-logo-svg { height: 36px; max-width: 160px; }
}

/* Im Footer nur Mast und Flagge, alles in Hell: Der Schriftzug steht dort
   ohnehin als Claim darunter. */
.site-footer .site-logo-svg { height: 34px; width: auto; }
.site-logo-svg--mark [id*="schrift" i],
.site-logo-svg--mark [id*="wort" i],
.site-logo-svg--mark [id*="letter" i] {
  display: none;
}
/* Nur Mast und Flagge (samt ihrer Kindelemente) umfärben – nicht jede
   Form im SVG. Exportierte Dateien bringen mitunter zusätzliche, an sich
   unsichtbare Ebenen mit (Artboard-Rahmen o.ä.); ein pauschales "*"
   würde deren fill:none überschreiben und sie sichtbar machen. */
.site-logo-svg--mark [id*="mast" i],
.site-logo-svg--mark [id*="mast" i] *,
.site-logo-svg--mark [id*="pole" i],
.site-logo-svg--mark [id*="pole" i] *,
.site-logo-svg--mark [id*="flag" i],
.site-logo-svg--mark [id*="flag" i] * {
  fill: var(--c-bg) !important;
  stroke: none !important;
}

.nav-menu {
  display: flex;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--c-ink);
  padding: 0.4em 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a {
  color: var(--c-blue);
  border-bottom-color: var(--c-blue);
}

.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-cart {
  position: relative;
  display: inline-flex;
  color: var(--c-ink);
  padding: 0.4rem;
}
.header-cart:hover { color: var(--c-blue); }
.cart-count {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 17px; height: 17px;
  display: grid; place-items: center;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 0.68rem;
  font-weight: 700;
  padding-inline: 4px;
}

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero-columns .hero-left {
  padding-inline: var(--gutter);
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.hero-columns .hero-right {
  min-height: 300px;
  background: url('https://flaegs.de/wp-content/uploads/2026/08/flaegs_hero.png');
  background-size: cover;
  background-position: center;
}
@media only screen and (max-width: 781px) {
  .hero-columns .hero-left { padding-top: 0.25rem; }
   .hero-columns :nth-child(1) { order: 2; }
}

/* ---------- Sektionen ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.75rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--border);
}
.section-head h2 { margin: 0; }

.usps { padding-block: var(--section-pad); }
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.usp h3 { margin-bottom: 0.5em; }
/* Eigener Wert statt --c-muted: Der ist für hellen Grund gerechnet und
   wäre auf Tiefgrün nicht lesbar. */
.usp p { margin: 0; color: rgba(242, 241, 238, 0.78); }

.featured-products { padding-block: var(--section-pad); }

.how-it-works, .faqs { padding-block: var(--section-pad); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
}
/* Höhere Spezifität als `.step p` weiter unten – sonst überschreibt die
   allgemeine Absatzregel die Zahl auf Grau. */
.step p.step-num,
.step-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-white);
  margin: 0 0 1rem;
}
.step h3 { margin-bottom: 0.4em; }
.step p { margin: 0; color: var(--c-muted); }

#o-ton {
  padding-top: 0;
  padding-bottom: 0;
}

/* Dunkle Bänder. .band-dark ist die allgemeine Klasse: Sie lässt sich im
   Editor unter „Erweitert → Zusätzliche CSS-Klasse" auf jede Gruppe
   setzen und macht sie dunkel. .coast-banner ist eine Startseiten-Sektion,
   die von sich aus dunkel bleibt.

   .usps stand hier früher mit drin. Das war eine Eigenschaft des
   Abschnitts selbst und im Editor nicht abwählbar – die Sektion ließ sich
   also nicht hell bekommen, ohne die Regel anzufassen. Jetzt entscheidet
   allein die Klasse, wie überall sonst. */
.band-dark,
.coast-banner {
  background: var(--c-ink);
  color: var(--c-on-ink);
  padding-block: var(--section-pad);
}
.band-dark h1, .band-dark h2, .band-dark h3,
.coast-banner h1, .coast-banner h2, .coast-banner h3 { color: var(--c-on-ink); }
.band-dark p, .coast-banner p { color: rgba(242, 241, 238, 0.78); }
.band-dark .eyebrow, .coast-banner .eyebrow { color: rgba(242, 241, 238, 0.6); }
.band-dark a, .coast-banner a { color: var(--c-on-ink); }
.coast-inner { max-width: 680px; }
.coast-banner p { font-size: 1.1rem; }

/* Auf dunklem Grund trägt Akzentblau zu wenig Kontrast (1,9:1). Buttons
   in dunklen Bändern laufen deshalb in Sand statt in Blau. Gesetzt wird
   das über die Button-Variablen am Band selbst – die Buttons erben sie. */
.band-dark,
.coast-banner,
.site-footer {
  --btn-fg: var(--c-bg);
  --btn-line: var(--c-bg);
  --btn-fill: var(--c-bg);
  --btn-fg-hover: var(--c-ink);
}
.band-dark :focus-visible,
.coast-banner :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--c-bg);
}

/* ---------- Blog / Seiten ---------- */
.site-main.container { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.page-header { margin-bottom: 2.5rem; }
.post-meta { color: var(--c-muted); font-size: 0.9rem; }
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.5rem;
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.post-card-thumb img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.post-card-title { font-size: 1.25rem; margin-bottom: 0.4em; }
.post-card-title a { text-decoration: none; color: var(--c-ink); }
.post-card-title a:hover { color: var(--c-blue); }
.post-card-excerpt { color: var(--c-muted); }
.single-thumb { margin: 0 0 2rem; }
.error-404 { text-align: center; padding-block: var(--section-pad); }

/* ---------- WooCommerce: Produktgrid ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem);
  margin: 0 0 3rem;
  padding: 0;
}
/* WooCommerce räumt sein Float-Grid mit Clearfix-Pseudoelementen auf.
   Im Grid-Layout würden die als leere Zellen mitzählen. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: transparent;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Bezugsrahmen für den Sale-Hinweis. WooCommerce liefert das zwar in
   seinem eigenen Stylesheet mit – wir verlassen uns hier nicht darauf,
   sonst rutscht der Hinweis in den Textfluss. */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product > * { text-align: left; }
.woocommerce ul.products li.product a img {
  margin: 0 0 1.1rem;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--c-white);
  border: var(--border);
  transition: border-color 0.18s ease;
}
.woocommerce ul.products li.product:hover a img { border-color: var(--c-line-hover); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--head-weight);
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--c-ink);
  padding: 0;
  margin: 0 0 0.35rem;
  text-align: left;
}
.woocommerce ul.products li.product .price {
  color: var(--c-muted) !important;
  font-size: 1rem !important;
  font-weight: 400;
  padding: 0;
  margin: 0;
  text-align: left;
}
/* Der Button unter einem Motiv trägt den Standard-Stil: blauer Umriss,
   volle Maße wie überall. Er setzt hier bewusst KEINE eigenen Variablen –
   nur Abstand und Ausrichtung im Kachel-Layout. */
.woocommerce ul.products li.product .button {
  margin: 1.1rem 0 0;
  align-self: flex-start;
}

/* Sale-Hinweis: Signalorange, aber als Umriss – gefüllt wäre der Kontrast
   für die Beschriftung zu schwach (4,4:1 bei kleiner Fettschrift). */
.woocommerce span.onsale {
  position: absolute;
  background: var(--c-bg);
  color: var(--c-danger);
  border: 2px solid var(--c-signal);
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  font-size: 0.8rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.35em 0.9em;
  top: 10px; left: 10px; right: auto;
  margin: 0;
  line-height: 1.5;
  min-width: 0; min-height: 0;
}

/* ---------- WooCommerce: Produktseite ---------- */
.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: var(--head-weight);
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  color: var(--c-ink);
}
.woocommerce div.product p.price {
  font-family: var(--font-display);
  color: var(--c-ink);
  font-size: 1.4rem;
  font-weight: 600;
  font-synthesis: none;
}
.woocommerce div.product div.images img { border: var(--border); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0 2rem 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  color: var(--c-muted);
  padding: 0.75em 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--c-blue); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--c-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--c-line); }
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 1.75rem; }

/* Konfigurator-Produkte: keine Produktgalerie, volle Breite. */
.flaegs-configurable div.product div.images { display: none !important; }
.flaegs-configurable div.product div.summary,
.flaegs-configurable div.product .summary.entry-summary {
  width: 100% !important;
  float: none !important;
  /* Der Konfigurator läuft zweispaltig und braucht die volle
     Inhaltsbreite – er begrenzt sich intern selbst auf 1120px. */
  max-width: 1120px;
  margin-inline: auto;
}

/* ---------- WooCommerce: Formulare / Tabellen / Meldungen ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
  border: var(--border);
  border-radius: var(--radius);
  padding: 0.75em 0.9em;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-white);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus {
  outline: 2px solid var(--c-focus);
  outline-offset: 0;
  border-color: var(--c-blue);
}
.woocommerce table.shop_table {
  border: var(--border);
  border-radius: var(--radius);
  border-collapse: collapse;
  background: var(--c-white);
  box-shadow: none;
}
.woocommerce table.shop_table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  color: var(--c-ink);
  /* Schwarze Haarlinie wie überall. Hier stand --c-line-hover, also das
     Blau für den Überfahr-Zustand – als feste Kante war das ein Versehen
     und tauchte u. a. unter der Kopfzeile der Bestellbestätigung auf. */
  border-bottom: 1px solid var(--c-line);
}
.woocommerce table.shop_table td { border-color: var(--c-line); }

.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th {
  border-top: 1px solid var(--c-line);
}

.woocommerce .woocommerce-customer-details address {
  border-radius: 0;
  border: 1px solid var(--c-line);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--c-white);
  border: var(--border);
  border-left: 3px solid var(--c-blue);
  border-top-width: 1px;
  border-radius: var(--radius);
  color: var(--c-ink);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--c-blue); }
/* Fehler sind der Hauptfall für die Sekundärfarbe. */
.woocommerce-error {
  border-left-color: var(--c-signal);
  color: var(--c-danger);
}
.woocommerce-error::before { color: var(--c-signal); }

.woocommerce .woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: 2rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--c-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--c-blue); }

.woo-main { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* ---------- Konfigurator-Feinschliff ----------
   Der Konfigurator holt sich Farben und Formen aus den Tokens oben und
   sieht damit von allein richtig aus. Zwei Kleinigkeiten regelt das
   Plugin aber nicht: Seine eigenen Schaltflächen (w3w-Modal) kennen nur
   den allgemeinen Rahmen-Token, und Überschriften im Konfigurator sollen
   dieselbe Display-Schrift tragen wie der Rest der Seite.

   Alle Regeln hier sind mit .flaegs-configurator vorangestellt. Das ist
   Absicht: Ohne diesen Vorsatz wären Theme- und Plugin-Regel gleich
   spezifisch und es entschiede die Ladereihenfolge der Stylesheets –
   die hängt aber davon ab, wann welches Plugin seine Styles anmeldet.
   Das Modal des Konfigurators liegt innerhalb dieses Containers, die
   Regeln greifen dort also ebenfalls. */
.flaegs-configurator h2,
.flaegs-configurator h3,
.flaegs-configurator .flaegs-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
}
/* Optik und Hover-Verhalten kommen aus der Button-Grundregel weiter oben
   (die Schaltflächen des Konfigurators stehen mit in deren Selektorliste).
   Hier bleibt nur, was für sie abweicht: kompakteres Maß und der
   Verzicht auf den Versatz-Effekt des Plugins. */
.flaegs-configurator .flaegs-w3w-btn {
  padding: 0.7em 1.3em;
}
.flaegs-configurator .flaegs-w3w-btn:hover {
  transform: none;
}
.flaegs-configurator .flaegs-w3w-btn--primary {
  --btn-bg: var(--c-blue);
  --btn-fg: var(--c-white);
  --btn-line: var(--c-blue);
  --btn-fill: var(--c-ink);
  --btn-fg-hover: var(--c-bg);
}

/* Gesperrter Zustand der beiden Absende-Buttons.
   Das Plugin färbt beide gleich in der Akzentfarbe – für uns stimmt das
   nur beim primären Button. „Weitere Flagge gestalten" ist auch gesperrt
   der sekundäre und bleibt deshalb ein Umriss. Zusätzlich das Maß: Das
   Plugin gibt gesperrt ein eigenes Padding vor, sonst springt der Button
   in der Größe, sobald die Konfiguration vollständig ist.

   Der doppelt notierte Selektor (#id#id bzw. .klasse.klasse) sieht
   merkwürdig aus, ist aber Absicht: Er hebt die Spezifität sicher über
   die Plugin-Regel, ohne sich auf die Reihenfolge der Stylesheets zu
   verlassen. Ein vorangestelltes „body" wäre der übliche Griff, geht hier
   aber nicht – WooCommerce setzt die Klasse .woocommerce auf den <body>
   selbst, ein Nachfahren-Selektor liefe also ins Leere. */
.woocommerce form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled,
.woocommerce form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled:hover,
.woocommerce form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled,
.woocommerce form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled:hover {
  padding: 1em 2.1em;
}
.woocommerce form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled,
.woocommerce form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled:hover {
  background: transparent;
  color: var(--c-ink);
  border: var(--btn-border) solid var(--c-ink);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-ink);
  color: rgba(242, 241, 238, 0.75);
  padding-block: var(--section-pad);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-claim {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--c-bg);
  max-width: 20em;
  margin-top: 1.25rem;
}
.footer-menu, .legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.footer-menu a, .legal-menu a {
  color: rgba(242, 241, 238, 0.75);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-menu a:hover, .legal-menu a:hover { color: var(--c-bg); text-decoration: underline; }
/* opacity 0.6 ergäbe zusammen mit der halbtransparenten Textfarbe nur
   3,9:1 – 0.75 bleibt zurückhaltend und liest sich noch. */
.copyright { font-size: 0.85rem; margin-top: 2rem; opacity: 0.75; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr !important; }
  .usp-grid, .steps { grid-template-columns: 1fr !important; }
  .footer-inner { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
  }
  .nav-toggle span {
    width: 24px; height: 2px;
    background: var(--c-ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-bg);
    border-bottom: var(--border);
    padding: 1rem var(--gutter) 1.5rem;
  }
  .site-header.nav-open .site-nav { display: block; }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-menu { flex-direction: column; gap: 0.75rem; }
  .btn, .wp-block-button__link,
  .woocommerce a.button, .woocommerce button.button { padding: 0.9em 1.6em; }
}

/* Wer Animationen abbestellt hat, bekommt keine laufenden Animationen.
   Übergänge werden nur stark verkürzt statt abgeschaltet: Bei dieser
   Einstellung geht es um Bewegung im Raum, nicht um Farbwechsel – und
   ohne jeden Übergang wirken die Buttons tot. Zuvor stand hier 0,01ms
   für alles; das hat auch das Einlaufen der Button-Fläche verschluckt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   ALT-THEME – Raster aus Haarlinien
   docs/design/Flaegs Alt Product.dc.html

   Die Palette und die Formwerte stehen inzwischen oben bei den
   Design-Tokens, nicht mehr als zweiter Satz hier unten. Was folgt, sind
   die Regeln, die sich nicht als Token ausdrücken lassen.

   Leitbild: ein Raster aus Haarlinien. Eine Linienstärke, eine
   Linienfarbe, keine Rundungen, keine Schatten. Flächen unterscheiden
   sich durch Ton, nicht durch Erhebung.
   ========================================================================= */

/* ---------- Signalorange nur noch dort, wo es eine Störung meldet ----------
   --c-signal (#ff4b09) bleibt absichtlich stehen: Fehlermeldungen und der
   Hinweis auf fehlende Angaben MÜSSEN aus dem Raster herausfallen, sonst
   sind sie keine Meldung mehr. Der Entwurf sagt dazu nichts, weil er
   keinen Fehlerfall zeigt.

   Als reine Zier hat die Farbe dagegen nichts verloren. Zwei Stellen aus
   dem 2026er Theme gehören dazu, beide erwischt man sonst erst live:
   die einlaufende Fläche der Kassen-Knöpfe (Zeile 361) und der Umriss des
   Sale-Hinweises. Der Entwurf färbt die CTA beim Überfahren nach Tinte
   (style-hover="background:#0e1116"), also genau das hier. */
.woocommerce a.checkout-button,
.woocommerce #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  --btn-fill: var(--c-ink);
}
.woocommerce span.onsale {
  border-color: var(--c-ink);
  color: var(--c-ink);
}

/* ---------- Konfigurator als Folge von Blöcken ----------
   Der Entwurf gliedert die Bedienung in Blöcke, die jeweils oben durch
   eine Linie abgesetzt sind und eine kleine, gesperrte Überschrift tragen.
   Das Plugin liefert genau diese Reihenfolge bereits: vor jedem Abschnitt
   steht eine .flaegs-section-title. Die Linie gehört deshalb an die
   Überschrift – kein zusätzliches Markup nötig.

   Die Innenabstände wandern von der Spalte an die Blöcke, damit die Linien
   über die volle Breite laufen und nicht im Rand enden. */
.flaegs-configurator .flaegs-col--controls {
  padding-inline: 0;
}
.flaegs-configurator .flaegs-section-title {
  margin: 0;
  padding: 28px var(--fc-pad) 14px;
  border-top: 1px solid var(--c-line);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
/* Der erste Block schließt oben an den Kopf des Kastens an – dort trennt
   bereits dessen Rahmen. */
.flaegs-configurator .flaegs-col--controls > .flaegs-section-title:first-child {
  border-top: 0;
}
.flaegs-configurator .flaegs-zones,
.flaegs-configurator .flaegs-extra,
.flaegs-configurator .flaegs-extra-hint,
.flaegs-configurator .flaegs-price-row {
  padding-inline: var(--fc-pad);
}
/* Der Umschalter Paletten/Freie Farbwahl trägt seinen Rahmen selbst.
   Innenabstand hätte ihn nur breiter gemacht, statt ihn einzurücken –
   sein Rahmen lief bis an die Spaltenkante, während alle anderen
   Bedienelemente eingerückt standen. Deshalb hier Außenabstand. */
.flaegs-configurator .flaegs-mode-switch {
  margin-inline: var(--fc-pad);
}

/* ---------- Auswahlfelder im Linienstil ----------
   Größe und Befestigung bleiben Auswahlfelder (so entschieden), nehmen
   aber die Kanten des Entwurfs an: volle Tinte, keine Rundung, heller
   Feldgrund. */
.flaegs-configurator select,
.flaegs-configurator .flaegs-address-wrap input,
.flaegs-configurator .flaegs-text-field input {
  border: 1px solid var(--c-line);
  border-radius: 0;
  background-color: var(--c-white);
  padding: 14px 16px;
}
.flaegs-configurator select:focus,
.flaegs-configurator .flaegs-address-wrap input:focus,
.flaegs-configurator .flaegs-text-field input:focus {
  border-color: var(--c-blue);
  background-color: #ffffff;
  outline: none;
}

/* ---------- Vorschau-Spalte ----------
   Im Entwurf steht sie auf getöntem Grund und hebt sich dadurch von der
   Bedienung ab – ohne Schatten, nur über den Ton. Sie bleibt rechts, wie
   gewünscht; das Plugin legt sie ohnehin in die zweite Spalte. */
@media (min-width: 900px) {
  .flaegs-configurator .flaegs-col--preview {
    background: var(--c-neon);
    padding: 40px;
    border-left: 1px solid var(--c-line);
  }
}

/* ---------- Abschlussleiste ----------
   Gesamtpreis links, Handlungsknopf rechts, über die volle Breite und
   oben abgesetzt.

   Die Linie muss ausdrücklich WEG: Das Plugin gibt der Preiszeile eine
   border-top (configurator.css Zeile 1007) und dem Block darüber eine
   border-bottom. Beide liegen auf derselben Fuge, und im
   Haarlinien-Raster ist eine doppelt so dicke Linie sofort zu sehen.
   Es bleibt die untere des Blocks – so trennt überall dieselbe Kante. */
.flaegs-configurator .flaegs-price-row {
  border-top: 0;
  padding-block: 22px;
  margin-top: auto;
}


/* =========================================================================
   ALT-THEME – das Linienraster des Entwurfs
   ========================================================================= */

/* ---------- Seitenrahmen ----------
   Der Entwurf fasst die ganze Seite in einen 1440er Rahmen mit Haarlinien
   links und rechts; die Abschnitte laufen darin von Kante zu Kante.

   Kopf, Inhalt und Fuß sind im Theme Geschwister direkt im body – der
   body IST also bereits dieser Rahmen, es braucht kein zusätzliches
   Markup. Der klebende Kopfbereich bleibt davon unberührt: body ist kein
   Scroll-Container, position: sticky rechnet weiter gegen das Fenster. */
body {
  max-width: 1440px;
  margin-inline: auto;
  min-height: 100vh;
}
/* Die seitlichen Kanten gibt es NUR, wenn der Rahmen wirklich einen Rand
   hat. Klebt er am Fensterrand, wäre die Linie keine Begrenzung, sondern
   ein Strich am Bildschirmrand.

   Erster Versuch war „farblos statt weg", um die Innenbreite an der
   Umschaltstelle gleich zu halten. Das war falsch: Eine durchsichtige
   Kante nimmt weiter ihren Platz ein und zeigt den Grund des body – auf
   schmalen Schirmen stand deshalb links und rechts ein Streifen in
   Seitenfarbe, an dem die waagerechten Linien und die dunklen Bänder
   kurz vor der Fensterkante endeten. Die zwei Pixel Unterschied sind das
   kleinere Übel; sie fallen nur oberhalb von 1442px an, wo ohnehin Platz
   ist. */
@media (min-width: 1442px) {
  body { border-inline: 1px solid var(--c-line); }
}

/* ---------- Kopfbereich: Navigation in Zellen ----------
   Im Entwurf trennt eine senkrechte Haarlinie jeden Navigationspunkt vom
   nächsten, und der Warenkorb ist eine ausgefüllte Fläche, die bis an die
   rechte Rahmenkante läuft.

   NUR ab 761px. Darunter ist die Navigation eine aufklappende Schublade
   (Zeile 1135ff.) – Zellen mit senkrechten Linien wären dort sinnlos.

   Die Höhe von 84px bleibt unangetastet. Sie ist der Wert, auf den
   --c-sticky-offset gesetzt ist; eine andere Kopfhöhe schiebt die
   klebende Vorschau darunter. */
@media (min-width: 761px) {
  .header-inner {
    max-width: none;
    padding-inline: 0;
    gap: 0;
    align-items: stretch;
  }
  .site-branding {
    display: flex;
    align-items: center;
    padding-inline: 28px;
  }
  .site-nav {
    display: flex;
    align-items: stretch;
    margin-left: auto;
  }
  .nav-menu {
    gap: 0;
    align-items: stretch;
  }
  .nav-menu li { display: flex; }
  .nav-menu a {
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 0;
    border-left: 1px solid var(--c-line);
    font-size: 14px;
    font-weight: 500;
  }
  /* Der Entwurf markiert das Überfahren als Flächenwechsel, nicht als
     Unterstrich – eine Unterstreichung wäre im Zellenraster eine zweite,
     kürzere Linie direkt neben den echten. */
  .nav-menu a:hover,
  .nav-menu .current-menu-item > a {
    background: var(--c-blue);
    color: #ffffff;
    border-bottom-color: transparent;
  }

  /* align-items muss mit: Die Grundregel (Zeile 643) setzt center, und
     ohne Übersteuerung bleibt die Warenkorb-Zelle 21px hoch statt auf
     volle Kopfhöhe zu laufen - gemessen, nicht vermutet. */
  .header-actions {
    align-self: stretch;
    align-items: stretch;
    gap: 0;
  }
  .header-cart {
    align-items: center;
    gap: 9px;
    padding: 0 24px;
    border-left: 1px solid var(--c-line);
    background: var(--c-ink);
    color: var(--c-bg);
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .header-cart:hover {
    background: var(--c-blue);
    color: #ffffff;
  }
}

/* Die Zahl steht jetzt in der Beschriftung („Warenkorb (0)") und braucht
   keine eigene Fläche mehr. Die Blase aus dem 2026er Theme (Zeile 651)
   wird deshalb zu schlichtem Text – in ALLEN Breiten, sonst schwebte sie
   auf schmalen Schirmen weiter über dem Sinnbild. */
.header-cart .cart-count {
  position: static;
  min-width: 0;
  height: auto;
  padding-inline: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
}
/* Ohne Text war am Warenkorb nie eine Unterstreichung zu sehen; mit der
   Beschriftung schlägt die Grundregel für Verweise durch. */
.header-cart { gap: 8px; text-decoration: none; }
@media (max-width: 760px) {
  /* Neben Logo und Menüknopf ist für das Wort kein Platz; Sinnbild und
     Zahl allein tragen dort. */
  .header-cart .cart-label { display: none; }
}

/* ---------- Fußbereich: helles Band ----------
   Der Entwurf setzt den Fuß auf die helle Akzentfläche, nicht auf Tinte.

   Abweichung vom Entwurf, bewusst: Die Menüs bleiben. Der Entwurf zeigt
   im Fuß nur Claim und Copyright – Impressum und Datenschutz müssen in
   Deutschland aber erreichbar sein, und der Fuß ist ihr Ort. Sie stehen
   jetzt in einer Zeile statt in Spalten, damit das Band flach bleibt. */
.site-footer {
  background: var(--c-neon);
  color: var(--c-ink);
  border-top: 1px solid var(--c-line);
  padding: 26px var(--alt-band-pad);
  /* Die Knopf-Variablen aus der Dunkelflächen-Regel (Zeile 765ff.) gelten
     hier nicht mehr: Auf hellem Grund wäre ein heller Knopf unsichtbar. */
  --btn-fg: var(--c-blue);
  --btn-line: var(--c-blue);
  --btn-fill: var(--c-blue);
  --btn-fg-hover: #ffffff;
}
.site-footer :focus-visible { outline-color: var(--c-ink); }
.footer-inner {
  max-width: none;
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Die Marke war für die dunkle Fläche auf --c-bg gestellt (Zeile 617) und
   wäre auf dem hellen Band nicht mehr zu sehen. Auch hier nur Mast und
   Flagge treffen, nicht jede Form (siehe Begründung dort). */
.site-footer .site-logo-svg--mark [id*="mast" i],
.site-footer .site-logo-svg--mark [id*="mast" i] *,
.site-footer .site-logo-svg--mark [id*="pole" i],
.site-footer .site-logo-svg--mark [id*="pole" i] *,
.site-footer .site-logo-svg--mark [id*="flag" i],
.site-footer .site-logo-svg--mark [id*="flag" i] * {
  fill: var(--c-ink) !important;
}
.site-footer .site-logo-svg { height: 22px; }
.footer-claim {
  margin-top: 0;
  max-width: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-ink);
}
.footer-nav { margin-left: auto; }
.footer-menu,
.legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.footer-menu a,
.legal-menu a {
  color: var(--c-ink);
  font-size: 14px;
}
.footer-menu a:hover,
.legal-menu a:hover {
  color: var(--c-blue);
  text-decoration: none;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.copyright {
  margin-top: 0;
  opacity: 1;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}
@media (max-width: 980px) {
  /* Die 2026er Regel setzt hier eine einspaltige Rasterung – im Band ist
     das Raster längst ein Flex-Fluss, die Regel liefe ins Leere. */
  .footer-inner { display: flex; }
  .footer-nav { margin-left: 0; }
}


/* =========================================================================
   ALT-THEME – Produktseite von Kante zu Kante

   Alles hier hängt an .single-product. Der Geltungsbereich ist mit
   Absicht so eng: Warenkorb, Kasse, Kategorie- und Shopseiten laufen
   durch dieselben WooCommerce-Klassen, und ein Raster, das dort
   ungeprüft mitläuft, ist genau die Fernwirkung, vor der Abschnitt 3 des
   Leitfadens warnt. Sie bekommen ihr eigenes Ticket.
   ========================================================================= */

/* Der Inhaltsbereich gibt seine Ränder ab – die Abschnitte tragen ihre
   Innenabstände jetzt selbst, damit die Linien über die volle Breite
   laufen und nicht im Rand enden. */
.single-product .woo-main.container {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
}
/* Die Zusammenfassung hält sich an die 1120px aus Zeile 941 – gedacht als
   Inhaltsbreite für den eingerückten Kasten. Läuft der Konfigurator bis
   an den Rahmen, ist sie eine Fessel: gemessen 1120px bei 1438px Rahmen,
   und damit hing der ganze obere Teil 160px eingerückt in einer Seite,
   deren übrige Abschnitte längst an der Kante standen. */
.single-product.flaegs-configurable div.product .summary.entry-summary {
  max-width: none;
  margin-inline: 0;
}

/* ---------- Brotkrumen als Band ---------- */
.single-product .woocommerce-breadcrumb {
  margin: 0;
  padding: 14px var(--alt-band-pad);
  border-bottom: 1px solid var(--c-line);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

/* ---------- Titelblock ----------
   Im Entwurf steht der Titel in der rechten Spalte über dem ersten
   Bedienblock. Hier bleibt er über beiden Spalten stehen: Er kommt aus
   dem WooCommerce-Template und liegt im Markup vor dem Konfigurator –
   ihn in die Spalte zu holen, ginge nur über das Plugin. Maßstab und
   Gewicht des Entwurfs nimmt er trotzdem an. */
/* Unten ein voller Abstand, damit der Titel auch OHNE Kurzbeschreibung
   nicht auf der Linie zum Konfigurator sitzt. Steht eine darunter,
   bringt sie den Abstand selbst mit – dann fällt er hier weg, sonst
   klafften 40px zwischen Titel und Beschreibung, wo 16px gemeint sind.

   :has() prüft das an einem SPÄTEREN Geschwister, nicht am direkt
   folgenden: Zwischen beiden steht noch p.price. Die Zeile ist zwar
   unsichtbar, im Baum aber vorhanden, und „+" träfe sie statt der
   Beschreibung. */
.single-product div.product .product_title {
  margin: 0;
  padding: var(--alt-pad) var(--alt-band-pad);
  font-size: clamp(2rem, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.single-product div.product .product_title:has(
    ~ .woocommerce-product-details__short-description
  ) {
  padding-bottom: 0;
}
.single-product div.product p.price {
  margin: 0;
  padding: 16px var(--alt-band-pad) var(--alt-pad);
  border-bottom: 1px solid var(--c-line);
  font-size: 18px;
  font-weight: 500;
}
/* Die Kurzbeschreibung steht auf derselben Fluchtlinie wie der Titel –
   gleicher seitlicher Abstand, damit beide bündig anfangen. Senkrecht
   schließt sie mit 16px an den Titel an und gibt unten den vollen
   Abstand des Blocks ab.

   max-width stammt aus dem Entwurf (46ch): Über die volle Rahmenbreite
   gezogen wären das über 130 Zeichen je Zeile, das liest sich nicht
   mehr. Falls das nicht gewollt ist, ist es diese eine Zeile. */
.single-product div.product .woocommerce-product-details__short-description {
  padding: 16px var(--alt-band-pad) var(--alt-pad);
  max-width: calc(46ch + 2 * var(--alt-band-pad));
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-muted);
}
.single-product div.product .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}
.single-product div.product form.cart { margin: 0; }

/* ---------- Konfigurator: zwei Hälften, eine Linie dazwischen ----------
   Aus dem eingerückten Kasten werden zwei Flächen, die bis an den Rahmen
   laufen. Die Trennlinie ist der border-left der Vorschau-Spalte (weiter
   oben gesetzt); der Zwischenraum von 32px muss dafür weg, sonst stünde
   die Linie frei im Nichts statt an der Kante. */
.single-product .flaegs-configurator {
  max-width: none;
  padding: 0;
  background: transparent;
  /* Die Linie unter dem Titelblock hing bisher an der Überschrift
     „Flagge konfigurieren". Die ist jetzt unsichtbar (siehe unten), also
     zieht der Konfigurator die Kante selbst – und zwar unabhängig davon,
     ob darüber eine Kurzbeschreibung steht oder nicht. */
  border: 0;
  border-top: 1px solid var(--c-line);
  /* Der Außenabstand des Plugins („margin: 2rem auto",
     configurator.css Zeile 137) muss ganz weg, waagerecht wie senkrecht.

     Waagerecht: Ein automatischer Außenabstand hebt im Raster das Dehnen
     auf – das Element wird nur so breit wie sein Inhalt und mittig
     gestellt. Gemessen 1388 statt 1438, die ganze Seite hing dadurch
     25px eingerückt. Vorher fiel das nicht auf, weil die Leiste ein
     Flex-Behälter war und flex-basis: 100% dem automatischen Abstand
     keinen Platz ließ.

     Senkrecht: Die 32px unten standen als leeres Band zwischen der
     Abschlusslinie des Konfigurators und den Knöpfen. Die Abstände
     kommen jetzt aus den Blöcken selbst. */
  margin: 0;
}
.single-product .flaegs-layout { gap: 0; }

/* „Vorschau" ist eine .flaegs-section-title wie die Bedienblöcke und hat
   deshalb deren Trennlinie und Einrückung geerbt – in der Vorschauspalte
   steht die Linie aber frei über der Beschriftung und trennt nichts. Der
   Entwurf hat sie dort auch nicht. */
.single-product .flaegs-col--preview .flaegs-section-title {
  border-top: 0;
  padding: 0 0 14px;
}

/* ---------- Alle Abschnittsüberschriften auf einer Fluchtlinie ----------
   „3. Größe & Befestigung" steckt als einzige INNERHALB ihres Blocks
   (.flaegs-extra.flaegs-variants), und der ist bereits um --fc-pad
   eingerückt. Sie stand deshalb doppelt eingerückt bei 81px, während
   „1. Farben" und „2. Koordinaten" bei 40px anfingen – und ihre
   Trennlinie lief nicht durch, sondern schwebte als kurzer Strich in der
   Fläche. Beides kam aus derselben Ursache.

   Die Linie fällt ersatzlos weg: Der Block darüber trägt bereits eine
   border-bottom über die volle Breite, zwei Linien an derselben Fuge
   wären eine zu viel. */
.single-product .flaegs-extra > .flaegs-section-title {
  border-top: 0;
  padding: 0 0 14px;
}

/* „1. Farben" und „Vorschau" beginnen jetzt auf derselben Höhe. Vorher
   trennten sie 40px: Die Vorschauspalte polstert oben um 40, die erste
   Überschrift der Bedienspalte um 28. */
@media (min-width: 900px) {
  .single-product .flaegs-col--preview {
    padding-top: 28px;
  }
}

/* ---------- Umschalter Paletten / Freie Farbwahl ----------
   Im Entwurf sind das zwei nebeneinandergestellte Felder in Haarlinien,
   die sich eine Kante teilen – nicht ein Kasten mit zwei Feldern darin.
   Der aktive trägt die Fläche; im Entwurf Tinte, hier auf Wunsch das
   Markenblau.

   Das Plugin färbt den aktiven über --fc-signal (configurator.css Zeile
   314). Das ist im Alt-Theme die ruhige Akzentfläche – für den aktiven
   Zustand zu leise, deshalb hier ausdrücklich das Blau. */
.single-product .flaegs-mode-switch {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.single-product .flaegs-mode-switch .flaegs-mode {
  padding: 14px 22px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 600;
}
/* Die geteilte Kante: Der zweite rückt um die Linienstärke auf den
   ersten, sonst stünden dort zwei Linien nebeneinander. */
.single-product .flaegs-mode-switch .flaegs-mode + .flaegs-mode {
  margin-left: -1px;
  border-left: 1px solid var(--c-line);
}
.single-product .flaegs-mode-switch .flaegs-mode.is-active {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #ffffff;
  /* Damit der blaue Rahmen über dem des Nachbarn liegt und nicht
     umgekehrt – sonst schneidet dessen Tinte in die Fläche. */
  position: relative;
  z-index: 1;
}

/* „Flagge konfigurieren" verschwindet aus dem Bild. Der Entwurf kennt
   die Zeile nicht, und über einem Block, der sichtbar ein Konfigurator
   ist, sagt sie nichts, was man nicht sieht.

   Aber NICHT display: none. Es ist die einzige Überschrift, die den
   Konfigurator im Dokument benennt; ohne sie klafft in der
   Gliederung zwischen dem Produkttitel und den Abschnitten „1. Farben"
   usw. eine Ebene. Mit derselben Technik wie .screen-reader-text
   (Zeile 200) bleibt sie für Screenreader und die Dokumentgliederung
   erhalten und ist nur nicht mehr zu sehen. */
.single-product .flaegs-conf-title {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

@media (min-width: 900px) {
  /* Der Innenabstand der Blöcke geht von 28px auf die 40px des Entwurfs.
     --fc-pad ist die einzige Stellschraube dafür; sie wirkt auf alle
     Blöcke des Konfigurators gleichzeitig, deshalb genau eine Zeile. */
  .single-product .flaegs-configurator { --fc-pad: var(--alt-pad); }
}

/* ---------- Gesamtpreis ----------
   Beschriftung klein und gesperrt, die Summe groß – wie im Entwurf. */
.single-product .flaegs-price-row {
  align-items: baseline;
}
.single-product .flaegs-price-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.single-product .flaegs-price {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- Abschlussleiste ----------
   Die Leiste gehört unter die BEDIENSPALTE, nicht über die volle Breite:
   Sie ist der Abschluss dessen, was links eingestellt wurde, und die
   Vorschau rechts hat damit nichts zu tun.

   Deshalb ein Raster aus VIER Spalten statt zwei. Der Konfigurator nimmt
   alle vier, die beiden Knöpfe je eine – zusammen also die Hälfte, die
   genau unter der Bedienspalte liegt, und darin jeder die Hälfte. Zwei
   Spalten hätten dafür nicht gereicht: Die Knöpfe sind zwei getrennte
   Elemente ohne gemeinsamen Behälter, sie können sich eine Zelle nicht
   teilen.

   Links die Hauptsache in voller Fläche, rechts die zweite als Umriss.
   Die Reihenfolge steht in grid-column, nicht in order – im Raster wird
   platziert, nicht sortiert. */
/* Aussehen der beiden Knöpfe – in JEDER Breite gleich. Nur ihre
   Anordnung hängt am Breitenpunkt; stünde die Farbgebung mit im
   900er Block, fielen die Knöpfe darunter auf den Grundstil zurück.

   Vier Klassen, damit die Regel die Grundfassung in Zeile 255
   überbietet, ohne !important zu bemühen. */
.single-product button.single_add_to_cart_button.button.button.button,
.single-product button.flaegs-submit.button.button.button {
  border: 0;
  border-radius: 0;
  padding: 22px 24px;
  font-size: 16px;
  font-weight: 700;
}
.single-product button.single_add_to_cart_button.button.button.button {
  --btn-bg: var(--c-blue);
  --btn-fg: #ffffff;
  --btn-line: var(--c-blue);
  --btn-fill: var(--c-ink);
  --btn-fg-hover: #ffffff;
}
/* Der gesperrte Zustand bleibt erkennbar gesperrt – er ist die Antwort
   auf fehlende Angaben und darf nicht wie die offene Handlung
   aussehen. */
.single-product button.single_add_to_cart_button.button.button.button:disabled {
  --btn-bg: transparent;
  --btn-fg: var(--c-muted);
}
/* Hier steht die ID, nicht die Klasse: Das Plugin setzt in
   configurator.css Zeile 1024 „#flaegs-submit-shop { margin-left:
   0.75rem }" und unter 600px zusätzlich einen Abstand nach oben. Gegen
   einen ID-Selektor kommt keine Klassenkette an – ohne diese Zeile
   klaffte zwischen den beiden Knöpfen eine Lücke. */
.single-product button#flaegs-submit-shop {
  margin: 0;
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-line: var(--c-line);
  --btn-fill: var(--c-ink);
  --btn-fg-hover: var(--c-bg);
}

@media (min-width: 900px) {
  .single-product .woocommerce-variation-add-to-cart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
  }
  /* KEINE Linie am Konfigurator: Sie liefe über die volle Breite und
     schnitte damit quer durch die getönte Fläche, die von der Vorschau
     bis unter die Meldung durchlaufen soll. Die Linie tragen stattdessen
     die beiden Knöpfe (weiter unten) – zusammen sind sie genau die linke
     Hälfte, also genau so lang, wie die Linie sein soll. */
  .single-product .woocommerce-variation-add-to-cart > .flaegs-configurator {
    grid-column: 1 / -1;
  }
  .single-product button.single_add_to_cart_button.button.button.button {
    grid-column: 1;
  }
  .single-product button#flaegs-submit-shop {
    grid-column: 2;
  }
  /* Die getönte Fläche der Vorschau läuft eine Zeile weiter und endet
     erst unter der Leiste. Die rechte Hälfte dieser Zeile ist leer –
     die beiden Knöpfe sitzen in Spalte 1 und 2 –, also füllt ein
     Pseudo-Element die Spalten 3 und 4.

     Das geht nur hier, im äußeren Raster: Die Vorschauspalte selbst
     steckt im Konfigurator und kann aus ihm nicht herausreichen. Weil
     der Konfigurator die volle Breite einnimmt und sich innen in zwei
     gleiche Hälften teilt, liegt die Kante zwischen Spalte 2 und 3
     genau unter der Kante der Vorschau. */
  .single-product .woocommerce-variation-add-to-cart::after {
    content: "";
    grid-column: 3 / -1;
    grid-row: 2;
    background: var(--c-neon);
    /* Die senkrechte Linie gehört an die getönte Fläche, nicht an den
       Knopf daneben: Das Plugin legt über den gesperrten Knopf ein
       grayscale-Filter (configurator.css Zeile 1045), und der färbt
       dessen Rahmen gleich mit – die Linie sah dort blass und grau aus,
       während sie über und unter der Leiste voll durchzieht. */
    border-left: 1px solid var(--c-line);
  }
}

/* Einspaltig stehen die beiden untereinander und nehmen die volle
   Breite. Auf ihre Inhaltsbreite geschrumpft klebten sie sonst
   linksbündig an der Rahmenkante, während jeder andere Abschnitt der
   Seite von Kante zu Kante läuft. */
@media (max-width: 899px) {
  .single-product .woocommerce-variation-add-to-cart > .flaegs-configurator {
    border-bottom: 1px solid var(--c-line);
  }
  .single-product button.single_add_to_cart_button.button.button.button,
  .single-product button#flaegs-submit-shop {
    display: block;
    width: 100%;
  }
}

/* ---------- Kanten der Leiste ----------
   Waagerecht zeichnen die Nachbarn: oben der Konfigurator mit seiner
   border-bottom, unten der Hinweis. Die Knöpfe selbst tragen deshalb
   nur die SENKRECHTEN Kanten – sonst stehen an beiden Fugen zwei Linien
   übereinander.

   Der gesperrte Zustand muss ausdrücklich mit: Das Plugin setzt dort
   „border: var(--fc-border)" (configurator.css Zeile 1041), und gemessen
   lag deshalb über der Leiste eine dreifache Kante. Dieselbe Verdopplung
   der Selektoren wie beim Padding – gegen die ID hilft nur die ID. */
.woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button,
.woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled,
.woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled:hover,
.woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop,
.woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled,
.woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled:hover {
  border: 0;
}
@media (min-width: 900px) {
  /* Die Linie über der Leiste. Sie sitzt an den Knöpfen und nicht am
     Konfigurator, damit sie an der Hälfte endet und die getönte Fläche
     rechts ungeteilt bleibt. */
  .woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button,
  .woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled,
  .woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop,
  .woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled {
    border-top: 1px solid var(--c-line);
  }
  /* Nur links, zur Trennung von der blauen Fläche. Rechts zieht die
     getönte Fläche selbst die Linie – siehe oben. */
  .woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop,
  .woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled {
    border-left: 1px solid var(--c-line);
  }
}

/* ---------- Gesperrt heißt: reagiert nicht ----------
   Die Knöpfe des Themes lassen beim Überfahren eine Fläche einlaufen.
   Solange die Konfiguration unvollständig ist, führt das in die Irre: Der
   Knopf sieht anfassbar aus und tut nichts. Im gesperrten Zustand bleibt
   deshalb alles stehen, wie es ist.

   Der Weg dahin ist pointer-events und nicht das Zurücksetzen einzelner
   Eigenschaften. Am Überfahren hängen drei Stellen gleichzeitig: die
   einlaufende Fläche des Themes, die Rahmen- und Schriftfarbe derselben
   Regel und die eigenen :hover-Regeln des Plugins. Jede einzeln
   zurückzunehmen hieße, ihre Werte zu erraten und bei jeder Änderung an
   einer der beiden Seiten nachzuziehen – ein voriger Anlauf hat genau
   deshalb nicht gegriffen.

   Ohne Zeigerereignisse tritt :hover gar nicht erst ein. Für einen
   gesperrten Knopf kostet das nichts: Er nimmt ohnehin keine Eingaben
   an. Das Plugin benutzt denselben Griff für den Zustand während des
   Absendens (configurator.css Zeile 1065). */
.woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled,
.woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled {
  pointer-events: none;
}
@media (max-width: 899px) {
  .woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop,
  .woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled {
    border-top: 1px solid var(--c-line);
  }
}

/* ---------- Hinweis auf fehlende Angaben ----------
   Er gehört unter die Knöpfe in die linke Hälfte und ist eine Meldung,
   keine Fußnote: volle Signalfläche, heller Text.

   width: 50% statt eines eigenen Rasters – der Hinweis ist ein direktes
   Kind des Formulars, das über die volle Breite läuft, und die Hälfte
   davon ist genau die Bedienspalte. Das Plugin setzt width: 100%
   (configurator.css Zeile 1131).

   Zum Verschwinden: Das Plugin setzt beim Absenden bereits
   „submitHintEl.hidden = !fehlt.length" (configurator.js Zeile 1116) –
   aber seine eigene Regel „display: block" schlägt das [hidden] des
   Browsers, weil beide gleich stark sind und das Plugin-Stylesheet
   später kommt. Die Zeile blieb deshalb als leeres Band stehen, auch
   wenn nichts mehr fehlte. Der Kommentar im Plugin beschreibt genau
   das als Absicht von früher; die Zuweisung von .hidden kam später
   dazu. Hier gewinnt jetzt das [hidden]. */
.single-product .flaegs-submit-hint {
  margin: 0;
  padding: 14px var(--alt-band-pad);
  border: 0;
  background: var(--c-signal);
  color: #ffffff;
  font-size: 14px;
}
.single-product .flaegs-submit-hint[hidden] {
  display: none;
}
/* Die getönte Fläche der Vorschau läuft bis zur Unterkante der Meldung,
   ohne leere Zelle dazwischen. Sie hängt als Pseudo-Element AN DER
   MELDUNG und nicht als eigenes Feld daneben: So verschwindet sie
   zwangsläufig mit ihr. Ein eigenständiges Element hätte vom
   Verschwinden nichts mitbekommen und wäre als getöntes Band ohne Anlass
   stehen geblieben.

   Der border-left des Pseudo-Elements setzt die senkrechte Linie fort,
   die weiter oben die Vorschau abteilt und über der Leiste an der
   getönten Fläche sitzt. */
@media (min-width: 900px) {
  .single-product .flaegs-submit-hint {
    position: relative;
    width: 50%;
  }
  .single-product .flaegs-submit-hint::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--c-neon);
    border-left: 1px solid var(--c-line);
  }
}

/* Das Maß muss auch gesperrt stimmen, und zwar in jeder Breite – die
   Regel gehört deshalb aus dem 900er Block heraus. Zeile 1062 friert das
   Padding des gesperrten Zustands ein, damit der Knopf nicht springt,
   sobald die Konfiguration vollständig ist. Mit den neuen Maßen der
   Leiste zeigt sie auf die alten Werte und erzeugt damit genau den
   Sprung, den sie verhindern soll. Dieselbe Verdopplung, neue Zahlen;
   .woocommerce.single-product greift beide Klassen am body ab, ein
   Nachfahren-Selektor liefe hier ins Leere. */
.woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled,
.woocommerce.single-product form.cart button.single_add_to_cart_button.single_add_to_cart_button:disabled:hover,
/* Die ID doppelt, weil die Regel in Zeile 1064 sie ebenfalls doppelt
   notiert – einfach genügt hier nicht. */
.woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled,
.woocommerce.single-product form.cart button#flaegs-submit-shop#flaegs-submit-shop:disabled:hover {
  padding: 22px 24px;
}

/* ---------- Menge ----------
   Auf der Produktseite gibt es nur die eine Flagge, die gerade
   eingestellt wird; für eine zweite gibt es „Weitere Flagge gestalten".
   Das Feld verschwindet deshalb hier und bleibt im Warenkorb.

   display: none und nicht etwa entfernt: Das Feld steht weiter im
   Formular und sendet seinen Standardwert 1 mit. Würde es fehlen, käme
   die Position ohne Menge beim Server an. Der Warenkorb hat sein eigenes
   Feld und ist von dieser Regel nicht berührt (.single-product).

   !important ist hier die einzige Möglichkeit, und zwar nachweislich:
   WooCommerce ruft in add-to-cart-variation.js auf der Menge .show()
   auf, sobald eine Ausführung gewählt ist. jQuery schreibt dabei
   „display: block" als Attribut direkt ins Element, und gegen ein
   Attribut kommt keine Spezifität an – das Feld tauchte deshalb genau
   dann wieder auf, wenn die Knöpfe aktiv wurden. */
.single-product .woocommerce-variation-add-to-cart > .quantity {
  display: none !important;
}
.single-product div.product .product_meta {
  margin: 0;
  padding: 18px var(--alt-band-pad);
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-muted);
}

/* ---------- Die Reiter als Raster ----------
   Der Entwurf zeigt die Felder gleichzeitig statt hinter Reitern. Die
   Reiterleiste entfällt damit; sie wäre eine Navigation zu Zielen, die
   ohnehin alle zu sehen sind.

   Aufteilung: links übereinander die Beschreibung und die Zusatzangaben,
   rechts die Rezensionen über beide hinweg.

       +---------------------+                     +
       | Beschreibung        |                     |
       +---------------------+  Rezensionen        |
       | Zusatzangaben       |                     |
       +---------------------+---------------------+

   Zwei Zeilen stehen fest im Raster, damit „1 / -1" bei den Rezensionen
   überhaupt etwas zu überspannen hat – ohne feste Zeilen wäre -1 die
   Linie hinter der ersten. Fehlt die Beschreibung, bleibt die zweite
   Zeile leer und damit 0 hoch; die Rezensionen überspannen dann faktisch
   nur die erste. Deshalb braucht es keine Fallunterscheidung.

   display: block braucht !important: WooCommerce schreibt display:none
   direkt ins style-Attribut des nicht gewählten Feldes, und dagegen
   kommt keine Spezifität an. */
@media (min-width: 900px) {
  .single-product .woocommerce-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    border-top: 1px solid var(--c-line);
  }
  .single-product .woocommerce-tabs ul.tabs { display: none; }
  /* div.product muss mit: Die Regel in Zeile 931 setzt padding-top über
     .woocommerce div.product .woocommerce-tabs .panel und schlägt eine
     reine Klassenkette. */
  .single-product div.product .woocommerce-tabs .panel {
    display: block !important;
    /* Alles Weitere sammelt sich links und stapelt sich. Käme später ein
       zusätzlicher Reiter dazu, stünde er dort mit drin statt das Raster
       zu sprengen. */
    grid-column: 1;
  }
  .single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel--reviews {
    grid-column: 2;
    grid-row: 1 / -1;
    border-left: 1px solid var(--c-line);
  }
  /* Die Trennlinie hängt an der Nachbarschaft der beiden und erscheint
     deshalb von selbst nur dann, wenn es eine Beschreibung gibt. Ohne
     sie trifft der Selektor nicht zu, und die Zusatzangaben stehen ohne
     Linie oben. */
  .single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel--description
    + .woocommerce-Tabs-panel--additional_information {
    border-top: 1px solid var(--c-line);
  }
}
/* Der Innenabstand gilt in JEDER Breite. Er stand vorher im 900er
   Block – einspaltig hatte das Feld dadurch gar keinen, und die Tabelle
   stieß beidseitig an die Rahmenkante. */
.single-product div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: var(--alt-pad) var(--alt-band-pad);
}
/* .woocommerce-Reviews-title muss ausdrücklich mit: Die Überschrift der
   Rezensionen steckt zwei Ebenen tiefer im Feld und wurde von „> h2"
   nicht erfasst – sie stand deshalb auf 40px neben den 26px der
   Zusatzangaben. */
.single-product .woocommerce-tabs .panel > h2,
.single-product .woocommerce-tabs .panel .woocommerce-Reviews-title {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- Tabelle der Zusatzangaben ----------
   Wie im Entwurf: eine führende Spalte auf dem hellen Feldton, jede
   Zelle in Haarlinien, überall dasselbe Zellenmaß.

   WooCommerce bringt für diese Tabelle einen vollständigen eigenen Satz
   mit (woocommerce.css, .woocommerce table.shop_attributes …) und
   verteilt die Abstände anders als erwartet: 8px am th, 0 am td und die
   eigentlichen 8px am <p> IM td. Gemessen kam dabei 8px/0px heraus,
   während die Breitenangabe griff – daher „table" im Selektor: Ohne das
   Element steht es 2:2 bei den Klassen und WooCommerce gewinnt über die
   Zahl der Elemente. */
.single-product div.product table.shop_attributes {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 15px;
}
.single-product div.product table.shop_attributes th,
.single-product div.product table.shop_attributes td {
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  line-height: 1.5;
  font-style: normal;
  vertical-align: top;
}
/* Der Abstand steckt jetzt in der Zelle; das <p> darf keinen zweiten
   mitbringen, sonst stehen die Werte tiefer als ihre Beschriftungen. */
.single-product div.product table.shop_attributes td p {
  margin: 0;
  padding: 0;
  font-style: normal;
}
/* tr im Selektor gegen die Zebra-Regel von WooCommerce
   (tr:nth-child(even) …): Der Entwurf tönt die führende Spalte, nicht
   jede zweite Zeile. */
.single-product div.product table.shop_attributes tr th {
  width: 40%;
  background: var(--c-white);
  font-weight: 600;
  text-align: left;
}
.single-product div.product table.shop_attributes tr td {
  background: transparent;
}

/* Einspaltig bricht WooCommerce die Tabelle auf: In
   woocommerce-smallscreen.css werden tr, th und td auf display: block
   gestellt, der Wert rutscht also unter seine Bezeichnung und die
   Tabelle ist keine mehr. Gewollt ist das Gegenteil – zwei Spalten
   bleiben, und lang wird stattdessen rechts umbrochen.

   table-layout: fixed ist dabei der eigentliche Schalter: Nur damit hält
   sich die Tabelle an die 40 Prozent und lässt die rechte Spalte
   umbrechen, statt sie am längsten Wort aufzuziehen. */
@media (max-width: 899px) {
  .single-product div.product table.shop_attributes {
    table-layout: fixed;
  }
  .single-product div.product table.shop_attributes tr {
    display: table-row;
  }
  .single-product div.product table.shop_attributes tr th,
  .single-product div.product table.shop_attributes tr td {
    display: table-cell;
    max-width: none;
    padding: 12px 14px;
    text-align: left;
    overflow-wrap: break-word;
  }
}

/* ---------- Reiterleiste einspaltig ----------
   Ab 900px ist sie ausgeblendet (beide Felder stehen nebeneinander);
   darunter bleibt sie die Navigation und braucht denselben Rand wie
   alles andere. Kleinere Schrift, damit beide Beschriftungen in eine
   Zeile passen – vorher standen sie übereinander.

   div.product im Selektor gegen die Regel in Zeile 913, die den
   Elementen einen rechten Außenabstand von 2rem gibt. */
@media (max-width: 899px) {
  .single-product div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin: 0;
    padding: 0 var(--alt-band-pad);
  }
  .single-product div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
  }
  .single-product div.product .woocommerce-tabs ul.tabs li a {
    font-size: 14px;
  }
}

/* ---------- Rezensionsformular ----------
   WooCommerce setzt Beschriftung und Feld nebeneinander in einen
   Absatz, und die Felder tragen ihre Breite als Zeichenzahl – daher die
   unterschiedlich langen Kästen. Hier wie überall sonst im Theme:
   Beschriftung oben, Feld darunter über die volle Breite, Kanten im
   Linienstil. */
.single-product #respond .comment-form-author label,
.single-product #respond .comment-form-email label,
.single-product #respond .comment-form-comment label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}
.single-product #respond input[type="text"],
.single-product #respond input[type="email"],
.single-product #respond input[type="url"],
.single-product #respond textarea {
  width: 100%;
  max-width: none;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: var(--c-white);
  font-family: inherit;
  font-size: 15px;
}
.single-product #respond input:focus,
.single-product #respond textarea:focus {
  border-color: var(--c-blue);
  background: #ffffff;
  outline: none;
}
.single-product #respond p {
  margin: 0 0 18px;
}
/* Die Einwilligung bleibt eine Zeile: Kästchen und Text gehören
   nebeneinander, eine Beschriftung darüber ergäbe hier keinen Sinn. */
.single-product #respond .comment-form-cookies-consent {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.single-product #respond .comment-form-cookies-consent input {
  width: auto;
}
.single-product #respond .form-submit {
  margin-bottom: 0;
}
/* Der Absendeknopf ist ein <input>, kein <button> und kein <a> – als
   einziger Knopf der Seite. WebKit gibt Eingabefeldern ein eigenes
   Aussehen mit und unterdrückt dabei das Hintergrundbild; die
   einlaufende Fläche, die alle anderen Knöpfe beim Überfahren zeigen,
   blieb dort deshalb aus. Mit abgeschaltetem Eigenaussehen verhält er
   sich wie die übrigen.

   Die Knopf-Variablen stehen zusätzlich ausdrücklich da, damit er nicht
   von Vorgabewerten abhängt, die anderswo gesetzt sein könnten. */
.single-product #respond .form-submit input#submit {
  appearance: none;
  -webkit-appearance: none;
  --btn-bg: transparent;
  --btn-fg: var(--c-blue);
  --btn-line: var(--c-blue);
  --btn-fill: var(--c-blue);
  --btn-fg-hover: #ffffff;
}
/* Das Überfahren steht hier ausgeschrieben statt sich auf die
   Grundregel des Themes zu verlassen. Grund: WooCommerce bringt für
   genau diesen Knopf eine eigene :hover-Regel mit, die „background-image:
   none" setzt und damit die einlaufende Fläche abschaltet
   (woocommerce.css). Sie ist gleich stark wie die des Themes, so dass
   allein die Ladereihenfolge entscheidet – und die ist nichts, worauf
   sich eine Gestaltung stützen sollte. Mit zwei Kennungen im Selektor
   ist die Frage entschieden.

   Die Werte sind dieselben, die die Grundregel für jeden anderen Knopf
   errechnet: Fläche läuft in Akzentblau ein, Schrift wird hell. */
.single-product #respond .form-submit input#submit:hover,
.single-product #respond .form-submit input#submit:focus-visible {
  background-color: transparent;
  background-image: linear-gradient(to right, var(--c-blue), var(--c-blue));
  background-size: 100% 100%;
  border-color: var(--c-blue);
  color: #ffffff;
}

/* ---------- Ähnliche Flægs ----------
   Drei Spalten, nur durch Haarlinien getrennt, ohne Zwischenraum.

   Abweichung vom Entwurf, bewusst: Der Knopf „Jetzt gestalten" bleibt.
   Im Entwurf sind die Karten als Ganzes anklickbar – im Markup ist der
   Knopf aber der Weg in den Konfigurator, und ihn wegzublenden nähme der
   Karte ihre Handlung. */
.single-product section.related.products {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}
.single-product section.related > h2 {
  margin: 0;
  padding: 26px var(--alt-pad);
  border-bottom: 1px solid var(--c-line);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.single-product section.related ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
/* Spalten, Linien und Füllkacheln kommen aus dem gemeinsamen Block bei
   .flaegs-kartenraster – hier steht nur noch, was diese Karten von den
   anderen unterscheidet. Die Linienregeln standen einmal auch hier; sie
   galten in JEDER Breite und hätten dem zweispaltigen Querformat
   dazwischengefunkt (die vierte Karte verlöre dort ihre linke Linie,
   obwohl sie in Spalte 2 steht). */
.single-product section.related ul.products li.product {
  padding: 0 0 24px;
}
.single-product section.related li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
}
/* Das Seitenverhältnis bleibt bei den 5:3 aus Zeile 835, nicht bei den
   4:3 des Entwurfs. Im Entwurf stehen in den Karten abstrakte Rechtecke,
   hier stehen echte Motive im Format 600×360 – auf 4:3 beschnitten
   verlören sie an beiden Seiten etwas. Das Raster hält auch mit 5:3.

   Weder Linie noch eigener Grund: Zeile 838 gibt dem Motiv die helle
   Feldfläche, Zeile 839 einen Rahmen ringsum. Beides trennt die Karte
   in zwei Hälften, obwohl Bild, Name und Knopf eine Einheit sind – und
   der abweichende Ton lässt die Karte aus der Seite herausstehen.

   Der Rahmen ringsum bleibt dagegen und kommt aus Zeile 839 – dasselbe
   Bild wie im Shop und in der Vorschau. Damit er am MOTIV sitzt und
   nicht um die Luft herum, ist der Abstand ein Außenabstand: Ein
   Innenabstand läge innerhalb des Rahmens und zöge ihn nach außen an die
   Kanten der Karte. Die Breite muss die beiden Abstände abziehen, sonst
   liefe das Bild um sie über die Karte hinaus.

   ul.products muss in den Selektor, sonst gewinnt Zeile 833 über die
   Zahl der Elemente. */
.single-product section.related ul.products li.product a img {
  width: calc(100% - 2 * 26px);
  margin: 26px 26px 0;
  padding: 0;
  background: transparent;
}
.single-product section.related li.product .woocommerce-loop-product__title {
  padding: 20px 26px 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.single-product section.related li.product .price {
  padding: 6px 26px 0;
  font-size: 14px;
  color: var(--c-ink);
}
.single-product section.related li.product .button {
  margin: 18px 26px 0;
  align-self: flex-start;
}

/* Unter 900px steht alles untereinander; die Innenabstände gehen auf das
   schmalere Maß zurück, sonst bliebe vom Inhalt wenig übrig. */
@media (max-width: 899px) {
  :root { --alt-pad: 22px; --alt-band-pad: 22px; }
  /* Einspaltig bekommt die Vorschau keinen getönten Grund (der wäre ein
     Farbblock quer durch die Seite), wohl aber ihren Innenabstand: Ohne
     ihn klebte die Flagge an beiden Rahmenkanten, seit der Konfigurator
     seinen eigenen Rand abgegeben hat. */
  .single-product .flaegs-col--preview {
    padding: var(--alt-pad) var(--alt-band-pad);
  }

  /* ---------- Die Vorschau löst sich eine Kachel früher ----------
     Einspaltig klebt die Vorschau-SPALTE selbst (configurator.css Zeile
     182), und eine klebende Fläche läuft genau so weit, wie ihr
     Elternteil reicht: bis zum Ende von .flaegs-layout. Das Layout endet
     mit der Preiszeile, also blieb die Vorschau bis zuletzt stehen und
     verschwand erst, wenn die Knopfleiste heranrückte. Auf dem Weg
     dorthin lief die Preiszeile unter der deckenden Fläche durch.

     Der Hebel ist der Außenabstand der klebenden Fläche selbst: Sie darf
     ihr Elternteil mitsamt Rand nicht überschreiten, ein unterer Abstand
     verkürzt die Strecke also um genau diesen Betrag. Die Bedienspalte
     bekommt denselben Betrag negativ nach oben zurück, damit im Bild
     nichts auseinanderrückt – nur die Haltestrecke wird kürzer, die
     Anordnung bleibt.

     Der Wert ist die Höhe der Preiszeile (gemessen 94px: 2 × 22px
     Innenabstand plus die Zeile der Summe). Weicht sie einmal ab, löst
     sich die Vorschau entsprechend früher oder später – der Fehler
     bleibt klein und sichtbar an einer Stelle. */
  .single-product .flaegs-layout {
    --alt-vorschau-vorlauf: 94px;
  }
  .single-product .flaegs-col--preview {
    margin-bottom: var(--alt-vorschau-vorlauf);
  }
  .single-product .flaegs-col--controls {
    margin-top: calc(var(--alt-vorschau-vorlauf) * -1);
  }

  .single-product section.related ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Querformat: den Vorlauf-Kniff zurücknehmen ----------
   Der negative Rand oben (--alt-vorschau-vorlauf) gehört zum EINSPALTIGEN
   Fall: Dort steht die Vorschau ÜBER der Bedienung, klebt als ganze
   Spalte, und ihr unterer Abstand verkürzt die Haltestrecke – die
   Bedienspalte bekommt denselben Betrag negativ zurück, damit nichts
   verrutscht.

   Im Querformat (600–899px) stehen beide aber NEBENeinander (siehe
   configurator.css). Dann zieht der negative Rand die Bedienspalte ins
   Nichts nach oben – und ihr Kopf (der Umschalter Paletten/Freie
   Farbwahl) schob sich in die Kurzbeschreibung darüber. Hier klebt der
   Kasten in der Spalte, nicht die Spalte; der Kniff wird deshalb
   zurückgenommen. */
@media (orientation: landscape) and (max-width: 899px) {
  .single-product .flaegs-col--preview {
    margin-bottom: 0;
  }
  .single-product .flaegs-col--controls {
    margin-top: 0;
  }
}

/* ---------- Einspaltig: nur waagerechte Linien ----------
   Unter 600px steht eine Karte je Zeile. Senkrechte Linien gäbe es dort
   nicht zu ziehen, und die Füllkacheln bleiben unsichtbar – gebraucht
   werden sie nur, wo eine Zeile mehrere Karten trägt.

   Gilt für alle drei Raster über die gemeinsame Klasse. */
@media (max-width: 599px) {
  .woocommerce ul.products.flaegs-kartenraster {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--c-line);
    padding-inline: var(--alt-band-pad);
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product:first-child {
    border-top: 0;
  }
}

/* Das Querformat regelt jetzt der gemeinsame Block bei
   .flaegs-kartenraster – hier stand dafür einmal eine eigene Fassung. */


/* =========================================================================
   ALT-THEME – Startseite im Linienraster

   Vorlage: docs/design/Flaegs Alt Home.dc.html. Dort sind die Abschnitte
   dasselbe wie auf der Produktseite: eine Kopfzeile mit Überschrift, dann
   Zellen, die nur durch Haarlinien getrennt sind – kein Zwischenraum,
   keine Flächenwechsel.

   ALLES HIER IST CSS. Die Startseite ist eine KOPIE der Patterns aus
   inc/block-patterns.php (Leitfaden 5.5): Änderungen an der Pattern-Datei
   erreichen die bestehende Seite nicht, sie müsste dafür neu eingefügt
   werden. Die Regeln greifen deshalb am Markup, das auf der Seite steht.

   Die dunklen Bänder bleiben als .band-dark vollständig erhalten und
   lassen sich im Editor jederzeit wieder auf eine Gruppe setzen. Neu ist
   nur, dass die beiden Startseiten-Abschnitte nicht mehr von sich aus
   dunkel sind.
   ========================================================================= */

/* Im Editor hängt an der ersten Merkmal-Kachel eine Textfarbe „Weiß" als
   Voreinstellung von WordPress – auf hellem Grund wäre sie unlesbar.
   WordPress setzt Voreinstellungen mit !important, dagegen hilft nur
   dasselbe Mittel. Mit .band-dark gilt wieder die weiße Schrift. */
.usps:not(.band-dark) .usp.has-white-color,
.usps:not(.band-dark) .usp.has-white-color h3 {
  color: var(--c-ink) !important;
}

/* ---------- Abschnitte von Kante zu Kante ----------
   Die Abschnitte tragen innen einen .container mit eigener Höchstbreite.
   Für das Raster geben sie ihn ab; die Innenabstände wandern an die
   Kopfzeile und die Zellen. */
.how-it-works,
.featured-products,
.usps {
  padding-block: 0;
  border-bottom: 1px solid var(--c-line);
}
.how-it-works > .container,
.featured-products > .container,
.usps > .container {
  max-width: none;
  padding-inline: 0;
}

/* ---------- Kopfzeile eines Abschnitts ----------
   Überschrift links, Verweis rechts, darunter die Linie – wie auf der
   Produktseite über den ähnlichen Flægs. */
.how-it-works > .container > h2,
.featured-products .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 28px var(--alt-band-pad);
  border-bottom: 1px solid var(--c-line);
}
.how-it-works > .container > h2,
.featured-products .section-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.featured-products .section-head h2 {
  margin: 0;
  padding: 0;
  border: 0;
}
.featured-products .section-head p {
  margin: 0;
}

/* ---------- Zellen: drei Spalten, nur Linien dazwischen ---------- */
.steps,
.usps > .container.usp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}
.step,
.usp {
  padding: 40px 36px 44px;
  border-top: 0;
  border-left: 1px solid var(--c-line);
}
.step:first-child,
.usp:first-child {
  border-left: 0;
}
/* Die Schrittzahl war 2rem in --c-white – ein Wert für dunklen Grund, auf
   hellem also unsichtbar. Im Entwurf ist sie eine kleine, gesperrte
   Ziffer in Blau über der Überschrift. */
.step p.step-num,
.step-num {
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-blue);
  margin: 0 0 12px;
}
.step h3,
.usp h3 {
  font-size: clamp(1.15rem, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}
.step p,
.usps:not(.band-dark) .usp p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-muted);
}

/* Bleibt ein Abschnitt dunkel (Klasse .band-dark im Editor), trägt das
   Raster trotzdem – nur mit der helleren Linie. */
.band-dark .step,
.band-dark .usp {
  border-left-color: var(--c-line-on-ink);
}
.band-dark .step:hover,
.band-dark .usp:hover {
  background: transparent;
}
.band-dark .step p.step-num,
.band-dark .step-num {
  color: var(--c-neon);
}

/* =========================================================================
   Schritte als angehefteter Lauf

   Der Abschnitt hält sich am oberen Rand fest, während man an ihm
   vorbeiscrollt. Überschrift und Schritte stehen dabei zusammen im Bild:
   Die Überschrift sagt, worum es geht – sie darf nicht weggescrollt sein,
   während die Schritte noch laufen.

   Die Schritte liegen wie ein Stapel Karten übereinander, nicht
   nebeneinander: Der laufende Schritt füllt das Bild, die noch
   kommenden warten als schmale Streifen am rechten Rand, die schon
   gelaufenen bleiben als ebenso schmale Streifen links stehen. So ist
   immer zu sehen, wie viele Schritte es gibt und wo man gerade steht –
   ein einzelnes Feld ohne Nachbarn sähe nach Ende des Abschnitts aus.

   Aufbau: Das Gerüst darum baut das Skript, nicht der Editor. Im Inhalt
   steht weiterhin nur .steps mit drei .step – wer die Vorlage schon
   eingefügt hat, muss nichts neu setzen. Ohne Skript und für alle, die
   Bewegung abbestellt haben, bleibt es beim Dreispalter von oben; es
   gibt also keinen Zustand, in dem der Abschnitt leer oder halb
   aufgebaut dasteht.

   .steps-stage    – die Laufstrecke. Ihre Höhe ist der Weg, den man
                     scrollt, während der Abschnitt steht.
   .steps-viewport – das, was man sieht: klebt oben, füllt den Schirm.
   .steps-title    – die Überschrift, aus dem Fluss hierher geholt.
   .steps          – bekommt .is-scroller und wird zur Bühne, auf der
                     das Skript die Felder einzeln verschiebt.
   ========================================================================= */

.steps-stage {
  /* Unter der klebenden Kopfzeile ansetzen, sonst verschwindet die obere
     Haarlinie des Abschnitts dahinter. */
  --steps-top: 84px;

  /* ==== Stellschraube: Wie viel vom nächsten Schritt zu sehen ist ====
     Die Breite EINES wartenden Streifens am rechten Rand. Bei drei
     Schritten stehen dort zwei davon nebeneinander, es ist also das
     Doppelte dieses Wertes.

     Größer = mehr vom nächsten Schritt zu sehen, dafür schmaler die
     Bühne: Ein Feld ist immer 100% minus (Anzahl - 1) Streifen breit.
     Der mittlere Wert wächst mit dem Fenster, die beiden anderen halten
     ihn am kleinen und am sehr großen Schirm in Grenzen. */
  --steps-streifen: clamp(70px, 14vw, 200px);

  /* Zweite Stellschraube: die Länge der Strecke, also wie lange man
     scrollt, bis alle Schritte durch sind. Mehr = gemächlicher. */
  position: relative;
  height: 340vh;
}
.steps-viewport {
  position: sticky;
  top: var(--steps-top);
  height: calc(100vh - var(--steps-top));
  display: flex;
  flex-direction: column;
}
/* Die Überschrift steht im Bild wie im Fluss: über den Feldern, mit der
   Haarlinie darunter. */
.steps-title {
  flex: 0 0 auto;
  margin: 0;
  padding: 22px var(--alt-band-pad);
  border-bottom: 1px solid var(--c-line);
  font-size: clamp(1.4rem, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.steps.is-scroller {
  flex: 1 1 auto;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  /* Die Ziffern laufen absichtlich über die Kanten hinaus (siehe unten);
     hier werden sie abgeschnitten. */
  overflow: clip;
}

/* Ab Tablet: der Kartenstapel.
   Die Felder liegen übereinander statt nebeneinander – nur so lassen
   sich die wartenden Schritte als Streifen zeigen, ohne der Bühne
   Breite zu nehmen. Das Skript setzt je Feld ein translateX; die
   Reihenfolge im Stapel kommt aus z-index, den es gleich mitgibt. */
@media (min-width: 600px) {
  .steps.is-scroller .step {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Die Bühne minus die Streifen der wartenden Schritte. --steps-zahl
       setzt das Skript auf die Zahl der Felder. */
    width: calc(100% - (var(--steps-zahl, 3) - 1) * var(--steps-streifen));
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: clamp(1rem, 4vw, 4rem);
    padding: var(--alt-band-pad);
    border-left: 1px solid var(--c-line);
    border-top: 0;
    /* Deckend, sonst schiene das Feld darunter durch. */
    background: var(--c-bg);
  }
  .steps.is-scroller .step:first-child {
    border-left: 0;
  }
}

/* Die Ziffer steht ganz im Feld – die Haarlinien schneiden sie nicht an.
   line-height unter 1 nimmt ihr nur die Leerzeile über und unter der
   Schrift, damit sie satt auf der Grundlinie des Feldes sitzt; das Feld
   selbst begrenzt sie. */
.steps.is-scroller .step p.step-num,
.steps.is-scroller .step-num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  font-size: clamp(9rem, 46vh, 32rem);
  line-height: 0.8;
  letter-spacing: -0.045em;
  color: var(--c-blue);
  margin: 0;
}
.steps.is-scroller .step-body {
  flex: 0 1 42ch;
  align-self: flex-end;
  padding-bottom: 0.8em;
}
.steps.is-scroller .step h3 {
  font-size: clamp(1.15rem, 2vw, 26px);
  margin: 0 0 0.5em;
}
.steps.is-scroller .step p {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--c-muted);
}
.band-dark .steps.is-scroller .step {
  background: var(--c-ink);
  border-left-color: var(--c-line-on-ink);
}
.band-dark .steps-title {
  border-bottom-color: var(--c-line-on-ink);
}
.band-dark .steps.is-scroller .step p.step-num,
.band-dark .steps.is-scroller .step-num {
  color: var(--c-neon);
}

/* ---------- Telefon hochkant: untereinander, aber überlappend ----------
   Quer wäre hier kein Platz. Stattdessen legen sich die Schritte beim
   Scrollen übereinander: Jeder klebt etwas tiefer als der vorige, der
   davor bleibt als Streifen sichtbar.

   Der Abstand UNTER jedem Feld ist dabei das Entscheidende: Er gibt dem
   Feld die Strecke, auf der es allein und vollständig im Bild steht,
   bevor das nächste darüberzieht. Ohne ihn läge sofort das nächste Feld
   darauf und man bekäme keinen Schritt je ganz zu sehen.

   Die Strecke oben wird hier nicht gebraucht: Die Höhe ergibt sich aus
   den Feldern selbst, und das Skript hält sich unterhalb dieser Grenze
   heraus. */
@media (max-width: 599px) {
  .steps-stage {
    height: auto;
  }
  .steps-viewport {
    position: static;
    height: auto;
    display: block;
  }
  .steps-title {
    position: sticky;
    top: var(--steps-top);
    z-index: 2;
    background: var(--c-bg);
  }
  .steps.is-scroller {
    display: block;
    overflow: visible;
  }
  .steps.is-scroller .step {
    position: sticky;
    /* Jeder Schritt hält etwas tiefer als der vorige – so bleibt von den
       vorigen oben je ein Streifen stehen. --steps-versatz setzt das
       Stylesheet weiter unten je Feld. */
    top: calc(var(--steps-top) + 3.2rem + var(--steps-versatz, 0px));
    height: 24rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    padding: var(--alt-band-pad);
    border-left: 0;
    border-top: 1px solid var(--c-line);
    background: var(--c-bg);
  }
  .steps.is-scroller .step:first-child {
    border-top: 0;
  }
  /* Abstand unter dem Feld: die Strecke, auf der es allein steht.
     Nach hinten hin kürzer, damit der Abschnitt am Ende nicht ausläuft. */
  .steps.is-scroller .step:nth-child(1) { margin-bottom: 34vh; }
  .steps.is-scroller .step:nth-child(2) { margin-bottom: 22vh; --steps-versatz: 3rem; }
  .steps.is-scroller .step:nth-child(3) { margin-bottom: 10vh; --steps-versatz: 6rem; }
  /* Die Ziffer steht über dem Text – nicht darunter wie quer, wo sie
     neben ihm sitzt. Der Satz aus Ziffer und Text bleibt trotzdem am
     unteren Rand des Feldes stehen; dafür sorgt justify-content oben. */
  .steps.is-scroller .step p.step-num,
  .steps.is-scroller .step-num {
    font-size: clamp(6rem, 38vw, 12rem);
    margin: 0 0 0.1em;
  }
  .steps.is-scroller .step-body {
    flex: none;
    padding-bottom: 0;
  }
  .band-dark .steps.is-scroller .step {
    background: var(--c-ink);
    border-top-color: var(--c-line-on-ink);
  }
}

/* ---------- Beliebte Flægs ----------
   Dasselbe Raster wie bei den ähnlichen Flægs auf der Produktseite:
   drei Spalten, Haarlinien dazwischen, Motiv ohne eigenen Grund und ohne
   Linie zu den Angaben darunter. */
.featured-products .woocommerce {
  margin: 0;
}
.featured-products ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}
/* Spalten, Linien und Füllkacheln kommen aus dem gemeinsamen Block bei
   .flaegs-kartenraster – hier steht nur noch, was diese Karten von den
   anderen unterscheidet. */
.featured-products ul.products li.product {
  padding: 0 0 24px;
}


.featured-products ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
}
/* Rahmen am Motiv wie bei den ähnlichen Flægs und im Shop: Abstand als
   Außenabstand, damit der Rahmen das Bild fasst und nicht die Luft
   darum; die Breite zieht ihn ab.

   ul.products im Selektor, sonst gewinnt Zeile 833 über die Zahl der
   Elemente – dieselbe Stelle wie bei den ähnlichen Flægs. */
.featured-products ul.products li.product a img {
  width: calc(100% - 2 * 28px);
  margin: 28px 28px 0;
  padding: 0;
  background: transparent;
}
.featured-products ul.products li.product .woocommerce-loop-product__title {
  padding: 22px 28px 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.featured-products ul.products li.product .price {
  padding: 6px 28px 0;
  font-size: 14px;
  color: var(--c-ink);
}
.featured-products ul.products li.product .button {
  margin: 18px 28px 0;
  align-self: flex-start;
}

/* Einspaltig steht alles untereinander; die Linie wandert von links nach
   oben, sonst stünde sie quer zur Leserichtung. */
@media (max-width: 899px) {
  /* Die Karten stehen NICHT mehr hier: Sie folgen dem gemeinsamen
     Raster, das zwischen 600 und 899px zweispaltig ist. Diese Regel
     hätte ihnen dort weiterhin waagerechte Linien gegeben – die zweite
     Karte der ersten Zeile trug dadurch eine Oberkante, obwohl sie ganz
     oben steht. Schritte und Merkmale bleiben einspaltig. */
  .steps,
  .usps > .container.usp-grid {
    grid-template-columns: 1fr;
  }
  .step,
  .usp {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--c-line);
    padding-inline: var(--alt-band-pad);
  }
  .step:first-child,
  .usp:first-child {
    border-top: 0;
  }
  .band-dark .step,
  .band-dark .usp {
    border-top-color: var(--c-line-on-ink);
  }
  .featured-products ul.products li.product {
    padding-inline: 0;
  }
}


/* ---------- Linie unter dem Kopfbereich der Startseite ----------
   Der Aufmacher ist der einzige Abschnitt, der bisher ohne untere Kante
   endete – das Raster begann erst darunter. */
.hero-columns {
  border-bottom: 1px solid var(--c-line);
}


/* =========================================================================
   .hairline-grid – Raster-Klasse für den Editor

   Im Editor unter „Erweitert → Zusätzliche CSS-Klasse" auf die ÄUSSERE
   Gruppe eines Abschnitts setzen. Danach gilt für alles darin:

   - Der Abschnitt gibt seine Höchstbreite ab und läuft von Kante zu Kante.
   - Zeilen (Blöcke untereinander) bekommen ab der zweiten oben eine
     Haarlinie, Spalten ab der zweiten links eine. Immer nur ab der
     zweiten – so kann nie eine Linie auf eine andere treffen, und es
     braucht keine negativen Abstände, um Doppelkanten aufzulösen.
   - Zwischenräume gehen auf 0, sonst schwebten die Linien frei.
   - Zellen bekommen Innenabstand, damit der Inhalt nicht anstößt.
   - Unter 900px stehen Spalten untereinander; die senkrechte Linie wird
     dort zur waagerechten.

   Wirkt auf die Spalten-Blöcke von WordPress (wp-block-columns) und auf
   Gruppen mit Raster-Anordnung. Knopfreihen (wp-block-buttons) sind
   ausgenommen – dort sollen die Knöpfe nebeneinanderstehen, nicht als
   Rasterzellen.
   ========================================================================= */

.hairline-grid > .container,
.hairline-grid > .wp-block-group {
  max-width: none;
  padding-inline: 0;
}

/* ---------- Zeilen ---------- */
.hairline-grid > * + *,
.hairline-grid > .container > * + *,
.hairline-grid > .wp-block-group > * + * {
  border-top: 1px solid var(--c-line);
}
/* Innenabstand nur für Zeilen, die selbst KEIN Spaltenraster sind – sonst
   käme der Abstand zweimal, einmal an der Zeile und einmal an der Zelle. */
.hairline-grid > .container > *:not(.wp-block-columns):not(.is-layout-grid),
.hairline-grid > .wp-block-group > *:not(.wp-block-columns):not(.is-layout-grid) {
  padding: 28px var(--alt-band-pad);
}

/* ---------- Spalten ---------- */
.hairline-grid .wp-block-columns,
.hairline-grid .wp-block-group.is-layout-grid {
  gap: 0;
  margin-bottom: 0;
}
.hairline-grid .wp-block-columns > .wp-block-column,
.hairline-grid .wp-block-group.is-layout-grid > * {
  padding: var(--alt-pad) 36px;
}
.hairline-grid .wp-block-columns > .wp-block-column + .wp-block-column,
.hairline-grid .wp-block-group.is-layout-grid > * + * {
  border-left: 1px solid var(--c-line);
}

/* Knopfreihen bleiben Knopfreihen. */
.hairline-grid .wp-block-buttons > * + * {
  border-left: 0;
  border-top: 0;
  padding: 0;
}

@media (max-width: 899px) {
  /* Spalten stehen jetzt untereinander – eine senkrechte Linie stünde
     quer zur Leserichtung. */
  .hairline-grid .wp-block-columns > .wp-block-column + .wp-block-column,
  .hairline-grid .wp-block-group.is-layout-grid > * + * {
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }
  .hairline-grid .wp-block-columns > .wp-block-column,
  .hairline-grid .wp-block-group.is-layout-grid > * {
    padding-inline: var(--alt-band-pad);
  }
}


/* =========================================================================
   ALT-THEME – Warenkorb und Kasse im Linienraster

   Für diese beiden Seiten gibt es keinen Entwurf; sie sind abgeleitet.
   Vorbild ist die Produktseite: Bedienung links, getönte Fläche rechts,
   dazwischen und zwischen den Abschnitten nur Haarlinien.

   Beide Seiten laufen über WooCommerce-Blöcke. Deren Stylesheet
   (wc-blocks.css) wird NACH dem Theme geladen – die Regeln hier tragen
   deshalb durchweg die Body-Klasse mit, damit sie sich nicht auf die
   Reihenfolge verlassen müssen.
   ========================================================================= */

/* ---------- Seitenrahmen ----------
   Wie auf der Produktseite: Der Inhaltsbereich gibt seine Ränder ab, die
   Abschnitte tragen sie selbst. */
body.woocommerce-checkout .site-main.container,
body.woocommerce-cart .site-main.container {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
}
body.woocommerce-checkout .page-header,
body.woocommerce-cart .page-header {
  margin: 0;
  padding: var(--alt-pad) var(--alt-band-pad);
  border-bottom: 1px solid var(--c-line);
}
body.woocommerce-checkout .page-title,
body.woocommerce-cart .page-title {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart {
  padding: 0;
}

/* ---------- Zwei Spalten, eine Linie dazwischen ----------
   Beide Spalten haben IMMER ihren Innenabstand, auch einspaltig – sonst
   klebt der Inhalt am Fensterrand. Nur die Trennlinien sollen die
   Rahmenlinien berühren, nicht der Inhalt; das regelt der Ausbruch
   weiter unten. */
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-cart .wc-block-components-main {
  padding: var(--alt-pad) var(--alt-band-pad);
}
/* Die Übersichtsspalte steht auf dem Seitengrund, NICHT auf der hellen
   Akzentfläche: Warenkorb und Kasse bleiben durchgehend Sand. Die
   Akzentfläche ist der Vorschau auf der Produktseite und dem Fußband
   vorbehalten – hier trennt allein die Linie. */
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-cart .wc-block-components-sidebar {
  padding: var(--alt-pad);
}
@media (min-width: 900px) {
  body.woocommerce-checkout .wc-block-components-sidebar-layout,
  body.woocommerce-cart .wc-block-components-sidebar-layout {
    align-items: stretch;
  }
  body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-cart .wc-block-components-sidebar {
    /* align-self MUSS mit: Die Blöcke setzen flex-start, die Spalte wäre
       sonst nur so hoch wie ihr Inhalt und die Linie endete mitten auf
       der Seite statt an deren Fuß. */
    align-self: stretch;
    background: transparent;
    border-left: 1px solid var(--c-line);
  }
}

/* ---------- Ausbruch der Trennzeilen ----------
   Nur die Zeilen MIT Trennlinie ziehen sich seitlich über den
   Innenabstand der Spalte hinaus: Ihre Kante berührt dadurch links die
   Spaltenlinie und rechts den Seitenrahmen, während ihr Inhalt durch
   denselben Betrag Innenabstand auf der Fluchtlinie aller anderen bleibt.

   Der Weg über den Ausbruch und nicht über „Spalte ohne Innenabstand,
   Zeilen mit": Bei letzterem verlieren ALLE übrigen Elemente ihren
   Abstand mit – Knöpfe, Express-Kasse und die Angaben liefen dann bis an
   die Kante. */
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-sidebar [class*="order-summary-coupon-form-block"],
body.woocommerce-checkout .wc-block-components-sidebar [class*="order-summary-totals-block"],
body.woocommerce-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-components-sidebar [class*="order-summary-coupon-form-block"],
body.woocommerce-cart .wc-block-components-sidebar [class*="order-summary-totals-block"] {
  margin-inline: calc(var(--alt-pad) * -1);
  padding-inline: var(--alt-pad);
}

/* ---------- Abschnitte ----------
   Jeder Schritt ist ein Block wie im Konfigurator: oben eine Linie über
   die volle Spaltenbreite, darüber eine kleine gesperrte Überschrift. */
body.woocommerce-checkout .wc-block-components-checkout-step {
  margin: 0;
  padding-block: 28px;
  border-top: 1px solid var(--c-line);
}
body.woocommerce-checkout .wc-block-components-checkout-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-cart .wc-block-components-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
body.woocommerce-checkout .wc-block-components-checkout-step__description {
  color: var(--c-muted);
  font-size: 14px;
}

/* ---------- Eingabefelder ----------
   Dieselben Kanten wie im Konfigurator: volle Tinte, keine Rundung,
   heller Feldgrund. Die Blöcke setzen 4px Radius und eine eigene
   Rahmenfarbe mit 0,8 Deckung – das war die einzige Stelle der Seite mit
   runden Ecken.

   .wc-block-components-form muss in den Selektor: Die Blockregel lautet
   „.wc-block-components-form .wc-block-components-text-input
   input[type=email]" und bringt damit drei Klassen mit – ohne die dritte
   verliert die Regel hier und die Felder behielten ihre runden Ecken. */
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-form textarea,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input {
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: var(--c-white);
  font-family: var(--font-sans);
}
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__select:focus,
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input:focus {
  border-color: var(--c-blue);
  background: #ffffff;
  outline: none;
  box-shadow: none;
}
/* Der Rahmen des Blocks liegt als eigenes Element über dem Feld. */
body.woocommerce-checkout .wc-block-components-text-input::after,
body.woocommerce-cart .wc-block-components-text-input::after {
  border-radius: 0;
  border-color: var(--c-line);
}

/* ---------- Bestellübersicht ----------
   Die Blöcke setzen um die Übersicht einen grauen Kasten mit 5px Radius.
   Im Raster gibt es keine Kästen: Der Block läuft über die volle Spalte,
   getrennt wird nur durch Linien. Den Abstand zum Text tragen die Zeilen
   darin – NICHT ihre Elternelemente, sonst rückte deren Innenabstand die
   Zeilen ein und die Trennlinien endeten vor den Kanten. */
body.woocommerce-checkout [class*="order-summary-block"],
body.woocommerce-cart [class*="order-summary-block"] {
  border: 0;
  border-radius: 0;
  padding-inline: 0;
}

/* ---------- Zahlungsarten ----------
   Eine Liste aus Zeilen, durch Haarlinien getrennt – kein Kasten.

   Der Innenabstand LINKS muss bleiben: Der Auswahlpunkt liegt absolut
   positioniert im Feld, und ohne Platz dafür läuft die Beschriftung
   unter ihm durch – „Karte" stand halb hinter dem Punkt. Er rückt dabei
   an die Spaltenkante, wie alles andere im Raster auch. */
body.woocommerce-checkout .wc-block-components-radio-control__option {
  padding: 16px 0 16px 34px;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
}
body.woocommerce-checkout .wc-block-components-radio-control__input {
  left: 0;
}
body.woocommerce-checkout .wc-block-components-radio-control__option:first-child {
  border-top: 0;
}
/* Der Kasten um die gewählte Zahlungsart ist KEIN Rahmen, sondern ein
   nach innen gezeichneter Schatten (box-shadow: inset 0 0 0 1.5px) – ein
   „border: 0" geht daran vorbei. Er bleibt; er braucht nur Luft, sonst
   sitzt der Auswahlpunkt auf seiner Kante. Der Innenabstand kommt an den
   Kasten, nicht an die Zeile darin, damit auch die aufgeklappten
   Kartenfelder darunter mit einrücken. */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  border: 0;
  border-radius: 0;
  padding: 8px 16px;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
  padding: 0 0 16px;
}

/* ---------- Summen ---------- */
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-components-totals-wrapper {
  padding-block: 14px;
  border-top: 1px solid var(--c-line);
}
body.woocommerce-checkout .wc-block-components-totals-wrapper:first-child,
body.woocommerce-cart .wc-block-components-totals-wrapper:first-child {
  border-top: 0;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item,
body.woocommerce-cart .wc-block-components-totals-footer-item {
  font-size: 18px;
  font-weight: 700;
}

/* ---------- Knöpfe ----------
   Fläche und Kanten kommen bereits aus den Knopf-Variablen weiter oben;
   hier bleibt die Form. */
body.woocommerce-checkout .wc-block-components-button,
body.woocommerce-cart .wc-block-components-button {
  border-radius: 0;
}

/* ---------- Bestellbestätigung (Danke-Seite) ----------
   Die Seite läuft über den Kassen-Endpunkt und trägt deshalb ebenfalls
   die Body-Klasse woocommerce-checkout. Der Seitenrahmen dort (weiter
   oben: „.site-main.container { padding-inline: 0 }") nimmt dem
   Inhaltsbereich die seitlichen Ränder – für das Zwei-Spalten-Layout der
   Kassen-BLÖCKE ist das richtig, die geben ihre Ränder an die Spalten ab.
   Die Bestätigung ist aber die KLASSISCHE Vorlage (.woocommerce-order)
   und bekommt die Ränder sonst nirgends zurück; ihr Inhalt klebte an den
   Kanten. Hier trägt sie dieselben Abstände wie die Abschnitte ringsum.
   Die Überschrift „Bestellung erhalten" bleibt davon unberührt – sie
   steht in .page-header und ist schon über die Kassen-Regeln gesetzt. */
body.woocommerce-order-received .woocommerce-order {
  padding: var(--alt-pad) var(--alt-band-pad);
}


/* =========================================================================
   ALT-THEME – Shop- und Kategorieseiten im Linienraster

   Der Shop hatte bisher gar keine Linien: Das Raster war je einmal für
   die Startseite und für die ähnlichen Flægs geschrieben, und die
   Archivseiten kamen in keiner der beiden Regeln vor.

   Die gemeinsame Klasse .flaegs-kartenraster setzt functions.php an jede
   Produktliste, in der das Theme das Raster stellt. Die Linienregeln
   stehen dadurch nur noch an dieser einen Stelle – Startseite, ähnliche
   Flægs und Archive teilen sie sich.
   ========================================================================= */

/* ---------- Linien im Karten-Raster ----------
   Zwei Regeln reichen, weil die letzte Zeile immer voll ist: Fehlende
   Kacheln ergänzt functions.php als leere .flaegs-luecke.

   1. Erste Spalte ohne linke Linie – jede Karte in Spalte 1 (3n+1),
      nicht nur die erste.
   2. Ab der zweiten Zeile (ab Karte 4) oben eine Linie. */
/* .woocommerce muss in JEDEN dieser Selektoren: Die Grundregel in Zeile
   806 setzt „display: grid !important" mit repeat(auto-fill, minmax(280px,
   1fr)) und einem Zwischenraum. Sie bringt zwei Klassen mit, eine
   Klasse allein verliert dagegen – der erste Anlauf stand deshalb
   vierspaltig mit Lücken da. */
@media (min-width: 900px) {
  .woocommerce ul.products.flaegs-kartenraster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--c-line);
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product:not(.flaegs-luecke):nth-child(3n + 1) {
    border-left: 0;
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product:not(.flaegs-luecke):nth-child(n + 4) {
    border-top: 1px solid var(--c-line);
  }
}

/* ---------- Zwei Spalten im Querformat ----------
   Dreispaltig sind die Karten auf einem quer gehaltenen Telefon zu
   schmal, einspaltig zu groß. Der Bereich deckt die quer gehaltenen
   Telefone ab (etwa 667 bis 896px) und die kleinen Tafeln im Hochformat
   (768px) – über die Breite und nicht über orientation: landscape, weil
   eine Tafel im Hochformat breit genug für zwei Karten ist, aber
   Hochformat meldet. */
@media (min-width: 600px) and (max-width: 899px) {
  .woocommerce ul.products.flaegs-kartenraster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--c-line);
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product:not(.flaegs-luecke):nth-child(2n + 1) {
    border-left: 0;
  }
  .woocommerce ul.products.flaegs-kartenraster > li.product:not(.flaegs-luecke):nth-child(n + 3) {
    border-top: 1px solid var(--c-line);
  }
}

/* ---------- Die Füllkacheln ----------
   Es gibt zwei Sätze, weil zwei Spaltenzahlen im Spiel sind: Bei drei
   Spalten fehlen andere Kacheln als bei zwei. functions.php rechnet
   beide aus und schreibt sie hin; angezeigt wird je nach Breite nur der
   passende Satz.

   Die Kacheln tragen ihre Linien AUSDRÜCKLICH und nicht über
   :nth-child. Das ist der Grund für die ganze Konstruktion: Ein
   ausgeblendetes Element zählt bei :nth-child weiter mit. Der Satz für
   die jeweils andere Spaltenzahl steht zwar unsichtbar, aber eben im
   Baum – und würde die Zählung der sichtbaren Kachel um eins bis zwei
   verschieben. Die echten Karten trifft das nicht, sie stehen alle vor
   den Kacheln; deshalb steht bei deren Regeln oben :not(.flaegs-luecke),
   damit sie die Kacheln in Ruhe lassen.

   Eine Kachel steht nie in Spalte 1 – dafür müsste die letzte Zeile leer
   sein –, also braucht sie immer die linke Linie. Die obere braucht sie
   nur, wenn es überhaupt eine zweite Zeile gibt; das weiß functions.php
   und hängt sonst --zeile1 an.

   .woocommerce muss auch hier in den Selektor: Zeile 820 stellt jede
   Karte auf „display: flex" und schlüge ein schlichtes
   .flaegs-luecke. */
.woocommerce ul.products li.flaegs-luecke {
  display: none;
}
/* Die Ausblendung muss so schwer wiegen wie die Kartenregel darüber:
   Die stellt jede Karte auf „display: flex" und bringt vier Klassen mit
   – eine leichtere Regel verliert, und dann standen BEIDE Kachelsätze
   gleichzeitig im Bild. Gleiche Spezifität, aber später in der Datei
   genügt; die Regeln, die je einen Satz wieder einblenden, folgen
   darunter. */
.woocommerce ul.products.flaegs-kartenraster > li.flaegs-luecke {
  display: none;
  padding: 0;
  border-left: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
}
.woocommerce ul.products.flaegs-kartenraster > li.flaegs-luecke--zeile1 {
  border-top: 0;
}
@media (min-width: 900px) {
  .woocommerce ul.products.flaegs-kartenraster > li.flaegs-luecke--3 {
    display: block;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .woocommerce ul.products.flaegs-kartenraster > li.flaegs-luecke--2 {
    display: block;
  }
}

/* ---------- Shop und Kategorien ----------
   Aufbau wie die Produktseite: Der Inhaltsbereich gibt seine Ränder ab,
   die Abschnitte tragen sie selbst. */
body.woocommerce-shop .woo-main.container,
body.tax-product_cat .woo-main.container,
body.tax-product_tag .woo-main.container {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
}
/* Der Brotkrumen-Pfad ist wie auf der Produktseite ein eigenes Band mit
   Innenabstand. Seit der Inhaltsbereich seine Ränder abgibt (Regel
   darüber), klebte er sonst an der linken Kante. Dieselben Werte wie
   .single-product .woocommerce-breadcrumb. */
body.woocommerce-shop .woo-main > .woocommerce-breadcrumb,
body.tax-product_cat .woo-main > .woocommerce-breadcrumb,
body.tax-product_tag .woo-main > .woocommerce-breadcrumb {
  margin: 0;
  padding: 14px var(--alt-band-pad);
  border-bottom: 1px solid var(--c-line);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}
body.woocommerce-shop .woo-main > .page-title,
body.tax-product_cat .woo-main > .page-title,
body.tax-product_tag .woo-main > .page-title {
  margin: 0;
  padding: var(--alt-pad) var(--alt-band-pad);
  font-size: clamp(2rem, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Trefferzahl und Sortierung werden zu zwei schmalen Bändern.
   WooCommerce lässt beide nebeneinander schweben (float links und
   rechts) – dabei sind sie unterschiedlich hoch, und jede zog ihre
   eigene, kurze Linie: gemessen endete die eine bei 331, die andere bei
   324, und keine reichte über die Breite. Ohne Schwebesatz stehen sie
   untereinander, jede über die volle Breite, die Auswahl rechtsbündig. */
body.woocommerce-shop .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_tag .woocommerce-result-count {
  float: none;
  margin: 0;
  padding: 18px var(--alt-band-pad);
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-muted);
}
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering {
  float: none;
  margin: 0;
  padding: 12px var(--alt-band-pad);
  border-top: 1px solid var(--c-line);
  text-align: right;
}
/* Die Linie über den Karten. Sie gehört an die Liste und nicht an das
   Band darüber: Die erste Kartenzeile trägt selbst keine obere Kante,
   die kommt erst ab Zeile zwei. */
body.woocommerce-shop ul.products.flaegs-kartenraster,
body.tax-product_cat ul.products.flaegs-kartenraster,
body.tax-product_tag ul.products.flaegs-kartenraster {
  border-top: 1px solid var(--c-line);
}
body.woocommerce-shop .woocommerce-ordering select,
body.tax-product_cat .woocommerce-ordering select,
body.tax-product_tag .woocommerce-ordering select {
  border: 1px solid var(--c-line);
  border-radius: 0;
  background-color: var(--c-white);
  padding: 10px 14px;
}

/* Die Karten des Archivs bekommen dieselbe Innenaufteilung wie die
   beliebten Flægs auf der Startseite.

   OHNE Breiten-Schranke: Die 28px-Ränder am Motiv sind der Abstand der
   Flagge zur Haarlinie, und den braucht die Karte in jeder Spaltenzahl –
   auch im Querformat (zweispaltig, 600–899px) und einspaltig. Vorher
   standen diese Regeln in @media (min-width: 900px); unterhalb davon
   klebten die Motive an den Kanten. Die beliebten Flægs auf der
   Startseite setzen dieselben Werte ebenfalls schrankenlos. */
body.woocommerce-shop ul.flaegs-kartenraster > li.product,
body.tax-product_cat ul.flaegs-kartenraster > li.product,
body.tax-product_tag ul.flaegs-kartenraster > li.product {
  padding: 0 0 24px;
}
body.woocommerce-shop ul.flaegs-kartenraster > li.product a img,
body.tax-product_cat ul.flaegs-kartenraster > li.product a img,
body.tax-product_tag ul.flaegs-kartenraster > li.product a img {
  width: calc(100% - 2 * 28px);
  margin: 28px 28px 0;
  padding: 0;
  background: transparent;
}
body.woocommerce-shop ul.flaegs-kartenraster > li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.flaegs-kartenraster > li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.flaegs-kartenraster > li.product .woocommerce-loop-product__title {
  padding: 22px 28px 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
body.woocommerce-shop ul.flaegs-kartenraster > li.product .price,
body.tax-product_cat ul.flaegs-kartenraster > li.product .price,
body.tax-product_tag ul.flaegs-kartenraster > li.product .price {
  padding: 6px 28px 0;
  font-size: 14px;
  color: var(--c-ink);
}
body.woocommerce-shop ul.flaegs-kartenraster > li.product .button,
body.tax-product_cat ul.flaegs-kartenraster > li.product .button,
body.tax-product_tag ul.flaegs-kartenraster > li.product .button {
  margin: 18px 28px 0;
  align-self: flex-start;
}

/* Ein- und zweispaltig regelt der gemeinsame Block bei
   .flaegs-kartenraster; hier stand dafür einmal eine eigene Fassung. */