@charset "UTF-8";
/* =========================================================
   Projekt-Stylesheet (global)

   Alles, was auf jeder Seite gilt und sich nicht über theme.json abbilden
   lässt. Kompiliert nach dist/css/main.css, eingebunden in functions.php.

   Bauen:      npm run build:css
   Beobachten: npm run watch:css

   Abgrenzung:
     theme.json      Farben, Schriften, Spacing, Breiten – erste Wahl
     main.scss       projektweite Regeln (hier)
     shop.scss       WooCommerce und Produkt-Hero, lädt nur wo gebraucht
     style.css       nur noch der Theme-Header, den WordPress braucht

   Der Parent bleibt unangetastet und muss nie neu kompiliert werden.
   ========================================================= */
/* --------------------------------------------------
   SEITENHINTERGRUND

   Der Parent setzt `body { background-color: var(--ww-color-bg) }` und
   zeigt dieses Token auf neutral-0. Bei Uckermarkbett ist neutral-0 das
   warme #FBF8F1 – der Body war in v1 aber schlicht weiss, das Creme trat
   nur flaechig in einzelnen Sections auf.

   Umgebogen wird deshalb das Token des Parents, nicht der Palettenwert:
   neutral-0 bleibt fuer alle uebrigen Verwendungen #FBF8F1.
-------------------------------------------------- */
:root {
  --ww-color-bg: #ffffff;
}

/* --------------------------------------------------
   EYEBROW / KICKER

   Kleine Auszeichnungszeile ueber einer Ueberschrift – bei Uckermarkbett
   sieben Mal allein auf der Startseite ("NATUeRLICH BESSER SCHLAFEN").

   Die Klasse steht im gespeicherten Inhalt (<p class="eyebrow">), die Regel
   lag aber im SCSS des alten Themes und kam beim Theme-Wechsel nicht mit.
   Ohne sie rendert die Zeile als normaler Absatz.

   Werte 1:1 aus dem alten Theme uebernommen (gemessen am 2026-09-24).
   .ub-product-card__kicker gehoert zum WooCommerce-Layer (Phase 4) und
   steht hier nur, weil beide Selektoren dieselbe Rolle tragen.
-------------------------------------------------- */
.eyebrow,
.ub-product-card__kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------
   H2-ABSTAND

   Das Parent setzt in base/typography `h2 { margin-bottom: 1rem }`.
   Uckermarkbett hatte dort 2rem (gemessen in v1 am 2026-09-24).

   Die Angabe steht bewusst hier und nicht in der theme.json: beide
   Selektoren heissen schlicht `h2` und haben damit dieselbe Spezifitaet,
   und das Stylesheet des Parents laedt NACH dem <style>-Block, in dem
   WordPress die theme.json-Styles ausgibt. Der Parent gewinnt dort also.
   Dieses Child-Stylesheet haengt per Dependency am Parent-Handle und
   laedt danach – hier greift der Wert.
-------------------------------------------------- */
h2 {
  margin-bottom: 2rem;
}

/* --------------------------------------------------
   AUSKLAPPER (core/accordion)

   Der Kernblock aus WordPress 6.9 bringt nur Mechanik mit: Flex-Zeile,
   Umschaltlogik, ein Plus, das beim Oeffnen um 45 Grad zum Kreuz dreht.
   Farbe, Groesse und jede Polsterung ueberlaesst er dem Theme – und der
   Parent kennt den Block nicht, er ist aelter. Hier steht also die
   gesamte Optik.

   Angelegt am 2026-09-25 fuer die Kundenstimmen auf
   /unsere-kissen/morgenkraft-premium-naturkissen/. Gemessen im Browser
   bei 1692px und bei 390px.

   Vorgefunden wurde:

   | Stelle             | vorher                     | Ursache                   |
   |--------------------|----------------------------|---------------------------|
   | Polsterung Zeile   | 16px 0 – waagerecht keine  | .p-2 ist Bootstrap        |
   | Polsterung Panel   | 0                          | dito                      |
   | Titel              | 28px, Gewicht 300, Inter   | h3 aus theme.json         |
   | Abstand der Karten | 0                          | Flow-Layout ohne blockGap |
   | Zeilenlaenge       | 1068px (~150 Zeichen)      | keine Lesebreite gesetzt  |

   Die Redaktion hatte den Karten `p-2 border-radius-default` mitgegeben.
   `border-radius-default` gibt es im Parent, `p-2` nicht – Bootstrap ist
   mit dem Umbau weggefallen (CLAUDE.md, Fallstricke). Die Polsterung fiel
   damit ersatzlos aus, der Text klebte an der Tonflaeche. Beide Klassen
   sind aus dem Inhalt entfernt; Radius und Polsterung stehen jetzt hier,
   damit jeder weitere Ausklapper im Projekt von selbst richtig aussieht.

   Herkunft der Werte:
     Titel md (1.125rem)  = eine Stufe ueber dem Fliesstext. Die Zeile ist
                            eine Schaltflaeche, keine Seitenueberschrift –
                            dieselbe Ueberlegung, die ww/faq im Plugin
                            notiert (dort 1rem, hier eine Stufe groesser,
                            weil die Karten allein in der Sektion stehen).
     Titel DM Serif 400   = die Schrift der Ueberschriften; die Titel sind
                            Zitate. 400, weil die Schrift nur einen Schnitt
                            hat – wie bei ww/steps.
     Zeilenhoehe 60px     = 18px Polster oben und unten plus 24.3px Zeile.
                            Trifft die Mindesthoehe der Seiten-CTAs
                            (blocks/_cta.scss) und liegt klar ueber den
                            44px, die im Projekt als Tippziel gelten.
     Radius 15px          = $border-radius-default des Parents. Der Parent
                            kompiliert ihn als Sass-Variable fest, ueber
                            ein Token ist er nicht erreichbar – derselbe
                            Fall wie bei ww/cta.
     Linie und Flaeche    = color-mix gegen currentColor, wie ww/faq im
                            Parent. Folgt damit jedem Colorset, statt
                            einen Grauwert zu setzen, der auf Dunkel
                            verschwindet.
-------------------------------------------------- */
.wp-block-accordion {
  --ub-accordion-pad-x: clamp(1rem, 2vw, 1.5rem);
  --ub-accordion-pad-y: 1.125rem;
  --ub-accordion-radius: 15px;
  --ub-accordion-rule: color-mix(in srgb, currentColor 14%, transparent);
  --ub-accordion-hover: color-mix(in srgb, currentColor 6%, transparent);
}

/*
 * Kein `display: grid` mit `gap`: der Block laeuft im Flow-Layout von
 * WordPress (is-layout-flow), und das arbeitet mit Aussenabstaenden. Das
 * Layout-System wird bedient, nicht ueberschrieben (CLAUDE.md, Fallstricke).
 * Die Regeln des Layouts stehen in :where() und haben Spezifitaet 0 –
 * zwei Klassen genuegen hier.
 */
.wp-block-accordion-item + .wp-block-accordion-item {
  margin-block-start: 0.625rem;
}

/*
 * Die Tonflaeche sitzt auf der Karte, nicht getrennt auf Zeile und Panel –
 * sonst risse der Farbblock beim Oeffnen auf. Der Radius gehoert deshalb
 * ebenfalls hierher.
 */
.wp-block-accordion-item {
  border-radius: var(--ub-accordion-radius);
}

/* --- Kopfzeile ------------------------------------------------------- */
.wp-block-accordion-heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--dmserifdisplay);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 400;
  line-height: 1.35;
}

/*
 * Der Kernblock setzt hier `padding: var(--wp--preset--spacing--20) 0` –
 * senkrecht ja, waagerecht nichts. Beide Werte werden ersetzt, damit
 * Zeile und Panel auf derselben Kante stehen.
 */
.wp-block-accordion-heading__toggle {
  gap: 1rem;
  padding: var(--ub-accordion-pad-y) var(--ub-accordion-pad-x);
  border-radius: inherit;
}

/*
 * Der Kernblock unterstreicht den Titel im Hover. Bei sechs Karten
 * untereinander ist das Unruhe; das Aufhellen der ganzen Zeile zeigt
 * dasselbe ruhiger – und genau so macht es ww/faq eine Sektion weiter
 * unten auf derselben Seite.
 */
.wp-block-accordion-heading__toggle:hover {
  background-color: var(--ub-accordion-hover);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

/* Wie in ww/faq: der Ring gehoert nach innen, sonst schneidet ihn der Radius an. */
.wp-block-accordion-heading__toggle:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: -2px;
}

/* --- Das Plus -------------------------------------------------------- */
/*
 * Als rundes Plaettchen statt als nacktes Zeichen: es ist das einzige, was
 * die Zeile als bedienbar ausweist. Feste rem-Masse, weil die Vorgabe des
 * Kernblocks (1.2em) an der Schriftgroesse des Titels haengt und mit ihr
 * mitwachsen wuerde. Inter, weil ein Plus aus DM Serif Display fremd wirkt.
 *
 * Das Drehen um 45 Grad beim Oeffnen – aus dem Plus wird ein Kreuz –
 * bringt der Kernblock mit (accordion-item/style.css).
 */
.wp-block-accordion-heading__toggle-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
  background-color: color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

/* Offen ist der Zustand, der sich absetzen darf. */
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--text-light);
}

/* --- Panel ----------------------------------------------------------- */
/*
 * Waagerecht ueber margin statt padding: so endet die Trennlinie auf
 * derselben Kante wie der Titel darueber, statt durch die ganze Karte zu
 * laufen.
 *
 * Der Kernblock raeumt im geschlossenen Zustand mit
 * `[hidden] { padding: 0 !important; border: none !important }` auf. Das ist
 * noetig, weil `hidden="until-found"` das Element im Fluss laesst – Polster
 * und Linie stuenden sonst unter jeder geschlossenen Karte. Der waagerechte
 * Aussenabstand bleibt dabei stehen und schadet nicht.
 */
.wp-block-accordion-panel {
  margin-inline: var(--ub-accordion-pad-x);
  padding-block: var(--ub-accordion-pad-y);
  border-block-start: 1px solid var(--ub-accordion-rule);
}

/*
 * Lesebreite. Die Karten sind 1068px breit, der Fliesstext darin war damit
 * rund 150 Zeichen lang – die Kundenstimmen sind lange Absaetze, und das
 * Auge findet den Zeilenanfang nicht wieder. 68ch sind etwa 620px.
 *
 * Auf allen direkten Kindern, nicht nur auf p: die Trennlinie zwischen
 * Kurzfassung und Volltext soll auf derselben Kante enden wie der Text.
 */
.wp-block-accordion-panel > * {
  max-width: 68ch;
}

/*
 * Der Trenner bringt von WordPress `margin-inline: auto` mit. Zusammen mit
 * der Lesebreite darueber ruecken ihn die beiden `auto` in die Mitte der
 * Karte, waehrend der Text links steht – die Linie stand dadurch 150px
 * neben ihrem Absatz. Sie gehoert auf dieselbe Kante.
 */
.wp-block-accordion-panel > .wp-block-separator {
  margin-inline: 0;
}

.wp-block-accordion-panel > :first-child {
  margin-block-start: 0;
}

.wp-block-accordion-panel > :last-child {
  margin-block-end: 0;
}

/* --------------------------------------------------
   COLORSETS DES CHILD THEMES

   Ein Colorset besteht aus zwei Teilen:

   1. Registrierung in functions.php  -> Auswahl im Editor
   2. --ww-bg / --ww-text hier        -> die eigentliche Farbe

   Ohne Teil 2 erscheint die Auswahl, der Block bleibt aber
   transparent: das Plugin liest nur
   background: var(--ww-bg, transparent).

   Die Selektorliste nennt jeden WW Block, der Colorsets nutzt – seit
   2026-08-25 sind das ww/section, ww/faq und ww/cards.

   Das Parent definiert base, light, dark, primary, secondary und die
   beiden Verlaeufe. Alles, was das Child zusaetzlich registriert,
   gehoert hierher.
-------------------------------------------------- */
.wp-block-ww-section.colorset-accent,
.wp-block-ww-faq.colorset-accent,
div.ww-card.colorset-accent,
a.ww-card.colorset-accent {
  --ww-bg: var(--wp--preset--color--accent);
  /* Akzent ist bei Uckermarkbett das Sand-Gold #AE8B5D (derselbe Wert wie
     secondary, andere Rolle). Es ist hell: Tinte #111 erreicht 5,98:1 und
     besteht AA, weisser Text nur 3,16:1 und reicht damit bloss fuer
     Grosstext. Deshalb dunkel. Nachgerechnet am 2026-09-24. */
  --ww-text: var(--wp--preset--color--neutral-900);
}

/* --------------------------------------------------
   FARB-SETS VON ww/cta

   Das Parent setzt --ww-cta-secondary-fg auf base (weiss), weil secondary
   dort dunkel ist: #1f2a33 gegen weiss sind 14,6:1.

   In dieser Palette ist secondary das Sand-Gold #AE8B5D und damit hell.
   Weisser Text kommt auf 3,16:1 und faellt fuer Fliesstext unter AA;
   Tinte #111 erreicht 5,98:1.

   Gleiche Ursache wie beim Colorset "Akzent" darueber: wer die Palette des
   Parents ersetzt, prueft die Kontraste neu.
-------------------------------------------------- */
:root {
  --ww-cta-secondary-fg: var(--wp--preset--color--neutral-900);
}

/* --------------------------------------------------
   SCHALTFLÄCHEN VON ww/cta

   Die Form der grossen Seiten-CTAs. Farben stehen in blocks/_colorsets.scss,
   hier geht es nur um Radius, Polsterung und Hoehe.

   Nachgeholt am 2026-09-25. In v1 standen diese drei Werte im Theme selbst
   (base/elements/_button.scss):

       .ww-cta .ww-cta__btn {
           min-height: 60px;
           border-radius: 999px !important;
           padding: 1.3rem 2.5rem;
       }

   Beim Umbau sind sie nicht ins Child gewandert, und der Parent bringt in
   seinem Mixin ww-action-button (abstracts/_mixins.scss) eigene mit. Die
   Seiten-CTAs fielen dadurch auf die Parent-Vorgabe zurueck – derselbe Fall
   wie bei der Navigation.

   Gemessen am 2026-09-25 auf der Startseite, beide Staende nebeneinander:

   |               | v1          | v2 vorher   |
   |---------------|-------------|-------------|
   | Radius        | 999px       | 15px        |
   | Polsterung    | 20.8px 40px | 20.8px      |
   | Mindesthoehe  | 60px        | keine       |
   | Knopf         | 264 x 61px  | 226 x 58px  |

   Der Knopf war also nicht nur eckig, sondern 38px schmaler. Beides gehoert
   zusammen: 999px auf einem schmalen Knopf laesst die Schrift optisch an der
   Rundung kleben.

   Betrifft die fuenf ww/cta-Schaltflaechen im Bestand. Warenkorb-Button,
   Flyout und der Knopf im Seitenfuss waren nie betroffen, sie standen
   durchgehend auf 999px.
-------------------------------------------------- */
/*
   Kein !important, anders als in v1.

   Der Parent kompiliert $border-radius-default (15px) fest in sein
   Stylesheet – eine Sass-Variable, keine Custom Property, ueber ein Token
   also nicht erreichbar. Das Child laedt per Dependency nach dem Parent,
   bei gleicher Spezifitaet gewinnt es dadurch von selbst.

   Nicht getroffen wird damit #ctablock: der Parent setzt dort 15px mit
   einer ID im Selektor und bleibt spezifischer. Das ist richtig so – in v1
   war #ctablock die Ausnahme mit dem kleinen Radius, nicht die Regel. Im
   Bestand kommt der Block derzeit nicht vor.
*/
.ww-cta .ww-cta__btn {
  min-height: 60px;
  padding: 1.3rem 2.5rem;
  border-radius: 999px;
}

/* --------------------------------------------------
   FRAGEN VON ww/faq

   Struktur und Zustände liefert das Plugin (`blocks/faq/src/style.scss`),
   Abstände, Rahmenfarbe und Hover der Parent (`blocks/_ww-faq.scss`).
   Hier steht nur die Typografie der anklickbaren Frage.

   Geändert am 2026-09-25 auf Zuruf der Betreiberin: die Fragen standen in
   DM Serif Display, sie sollen die Schrift des Fließtextes tragen.

   **Warum sie überhaupt Serif waren.** `.ww-faq__title` ist ein `<h2>`.
   Das Plugin überschreibt daran `font-size`, `line-height` und
   `font-weight` – die Schriftfamilie nicht. Sie kam damit aus
   `styles.elements.h2` der theme.json, und das ist die Überschriftenschrift
   des Projekts. Eine Frage ist aber keine Seitenüberschrift, sondern eine
   Schaltfläche; derselbe Gedanke, mit dem das Plugin die Größe von 3.4rem
   auf 1rem zurückholt.

   Im Ausklapper daneben (`blocks/_accordion.scss`) bleibt es bei
   DM Serif Display: dort **sind** die Titel Zitate, keine Fragen.
-------------------------------------------------- */
/*
 * Zwei Eigenschaften, eine Ursache.
 *
 * `letter-spacing` steht in der theme.json neben der Schriftart am `h2`
 * (-0.02em) und wird vom Plugin nicht angefasst – die Frage erbte es mit,
 * gemessen -0.32px bei 16px. Das ist eine Enge, die für eine 3.4rem grosse
 * Display-Serife gedacht ist; unter 16px Inter macht sie den Text nur
 * gedrängt. Sie gehört deshalb zum selben Erbe wie die Schriftart und wird
 * mit ihr zurückgesetzt.
 *
 * `font-weight: 600` bleibt unangetastet (Wunsch: sonst alles wie gehabt).
 * Zur Einordnung: Inter liegt im Projekt nur als Schnitt 400 vor, 600 ist
 * also synthetisch verfettet. Das war vorher genauso – DM Serif Display
 * hat ebenfalls nur einen Schnitt. Nachgemessen: derselbe Text ist bei 400
 * und 600 exakt gleich breit, ein echter Schnitt änderte die Metrik.
 *
 * Spezifität 0-2-0 gegen die 0-0-1 der theme.json, und `main.css` lädt
 * ohnehin später – kein `!important` nötig.
 */
.wp-block-ww-faq .ww-faq__title {
  font-family: var(--wp--preset--font-family--inter);
  letter-spacing: normal;
}

/* --------------------------------------------------
   KARTEN ALS ICON-KACHEL

   Uckermarkbett nutzt ww/cards als Kachel mit kleinem Icon links und
   Überschrift daneben – nicht als Bildkarte. Die Regeln dafür lagen im SCSS
   des alten Themes und hingen an der Klasse `.ww_card`, die das ALTE Plugin
   pro Karte ausgab (zusammen mit Bootstrap-Spalten: `ww_card col-12 col-md-3`).

   Das refactorte Plugin rendert stattdessen ein CSS-Grid und vergibt
   `.ww-cards-frontend__item`. Die alten Regeln liefen damit ins Leere – und
   ohne die Breitenbegrenzung zog `.ww-card__image` (im Plugin `width: 100%`)
   die Icons auf Spaltenbreite auf. Deshalb hier 1:1 dieselben Werte,
   umgehängt auf die neue Wrapper-Klasse.

   Die drei Selektoren sind (0,3,0) und damit spezifischer als die
   Plugin-Regel `.ww-cards-frontend .ww-card` (0,2,0) – kein !important nötig.
-------------------------------------------------- */
.ww-cards-frontend .ww-cards-frontend__item .ww-card {
  display: grid;
  grid-template-columns: 86px 1fr;
  /* Erste Zeile FEST 80px, zweite auto – wie im alten Theme.

     Der feste Wert ist der Grund, warum der Fliesstext in allen Karten auf
     derselben Hoehe beginnt: eine Karte wird auf die Hoehe der hoechsten
     ihrer Reihe gestreckt, und der ueberschuessige Platz kann nur in die
     auto-Zeile fliessen. Mit minmax(80px, auto) saugt die erste Zeile ihn
     mit auf – dann startet der Text je nach Textlaenge unterschiedlich
     (gemessen: 132px in drei Karten, 144px in der vierten). */
  grid-template-rows: 80px auto;
  column-gap: 1.25rem;
  row-gap: 1.25rem;
  align-items: start;
  padding: 2rem;
  text-align: left;
}

/*
 * Das refactorte Plugin legt Ueberschrift und Text in einen Wrapper
 * `.ww-card__body` (Flex-Spalte) – das alte hatte beide als direkte Kinder
 * der Karte. Ohne die naechste Regel sitzen die grid-column/grid-row-Angaben
 * unten auf Flex-Kindern und sind wirkungslos: der Fliesstext landet neben
 * dem Icon in der schmalen Spalte und laeuft unten aus der Karte.
 *
 * `display: contents` loest die Wrapper-Box auf, seine Kinder werden wieder
 * Grid-Elemente der Karte. Auf einem generischen <div> ist das fuer
 * Screenreader unproblematisch.
 */
.ww-cards-frontend .ww-cards-frontend__item .ww-card__body {
  display: contents;
}

.ww-cards-frontend .ww-cards-frontend__item .ww-card__media {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ww-cards-frontend .ww-cards-frontend__item .ww-card__image {
  display: block;
  width: 76px;
  height: 76px;
  max-width: 76px;
  object-fit: contain;
}

.ww-cards-frontend .ww-cards-frontend__item .ww-card__headline {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: center;
  text-align: left;
  line-height: 1.15;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  text-transform: uppercase;
}

.ww-cards-frontend .ww-cards-frontend__item .ww-card__text {
  grid-column: 1/-1;
  grid-row: 2;
  margin: 0;
  text-align: left;
  line-height: 1.45;
}

/* Karte ohne Bild: eine Spalte, Überschrift oben. */
.ww-cards-frontend .ww-cards-frontend__item .ww-card:not(:has(.ww-card__media)) {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.ww-cards-frontend .ww-cards-frontend__item .ww-card:not(:has(.ww-card__media)) .ww-card__headline {
  grid-column: 1;
  grid-row: 1;
}

.ww-cards-frontend .ww-cards-frontend__item .ww-card:not(:has(.ww-card__media)) .ww-card__text {
  grid-column: 1;
  grid-row: 2;
}

/* --------------------------------------------------
   SPALTENABSTÄNDE

   Redaktionelle Hilfsklassen an `core/columns`, im Inhalt 16× vergeben
   (Startseite, Material & Herstellung, Produkt-Landingpage). Die Regeln
   lagen im alten Theme unter base/elements/_wordpress.scss.

   Sie stehen hier und nicht in shop.css: die Klasse kommt auch auf Seiten
   ohne Shortcode vor, shop.css lädt aber nur dort, wo der Produkt-Hero steht.

   Nur die -xl-Variante kommt im Bestand vor; -lg ist bewusst mitgenommen,
   weil sie im Editor weiterhin vergeben werden kann.
-------------------------------------------------- */
.wp-block-columns.ub-columns-gap-lg {
  gap: clamp(2.5rem, 5vw, 6rem);
}

.wp-block-columns.ub-columns-gap-xl {
  gap: clamp(3rem, 7vw, 8rem);
}

.wp-block-columns.ub-columns-gap-lg > .wp-block-column,
.wp-block-columns.ub-columns-gap-xl > .wp-block-column {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 991.98px) {
  .wp-block-columns.ub-columns-gap-lg {
    gap: 3rem;
  }
  .wp-block-columns.ub-columns-gap-xl {
    gap: 3.5rem;
  }
}
@media (max-width: 781px) {
  .wp-block-columns.ub-columns-gap-lg,
  .wp-block-columns.ub-columns-gap-xl {
    gap: 2rem;
  }
}
/* --------------------------------------------------
   PROZESS-SCHRITTE (ww/steps)

   Das Plugin liefert nur die Anordnung – Reihe oder Spalte, Verbindungs-
   linie, Raster. Farben und Typografie kommen von hier, über die
   --ww-steps-* Eigenschaften. Derselbe Zwei-Teile-Vertrag wie bei
   ww/cards: Werte setzen, keine Selektoren überschreiben.

   Herkunft der Werte:
     Nummernkreis 2.75rem   = Schriftgröße `lg` (1.375rem) mal zwei. Trifft
                              zugleich die 44px, die im Projekt als kleinstes
                              Tippziel gelten (Navigation, mobil).
     Nummernfläche primary  = die Ziffernkreise in der Kissen-Grafik weiter
                              oben auf derselben Seite sind grün gefüllt.
     Linie ub-border        = das Rahmen-Token der Palette; gestrichelt, weil
                              die Bemaßungslinien derselben Grafik es sind.
     Ziffern DM Serif       = die Schrift der Überschriften. Die Nummer ist
                              hier Auszeichnung, kein Fließtext.
-------------------------------------------------- */
.wp-block-ww-steps {
  --ww-steps-marker-size: 2.75rem;
  --ww-steps-marker-bg: var(--wp--preset--color--primary);
  --ww-steps-marker-color: var(--wp--preset--color--neutral-0);
  --ww-steps-marker-font-size: var(--wp--preset--font-size--lg);
  --ww-steps-connector: 1px dashed var(--wp--preset--color--ub-border);
}

/*
 * DM Serif Display liefert nur einen Schnitt (400). Die Ziffer steht
 * deshalb in ihrer normalen Stärke – fett wäre künstlich.
 */
.wp-block-ww-steps .ww-step__marker {
  font-family: var(--wp--preset--font-family--dmserifdisplay);
  font-weight: 400;
}

/* Zeilenhöhe wie im Kartentext (blocks/_cards.scss) – dieselbe Rolle. */
.wp-block-ww-steps .ww-step__text {
  line-height: 1.45;
}

/* =========================================================
   Seitenfuss

   Flaeche, Raster, Logo und der Kontaktblock kommen vom Parent
   (layout/_footer.scss). Hier stehen die Stellen, an denen der Footer nach
   der Migration anders aussah als v1 – gemessen am 2026-09-25 mit beiden
   Staenden nebeneinander im Browser – und die zwei Zeilen, die es in v1
   ueberhaupt nicht gab:

     .ub-footer-head      Produktband und Vertrauensleiste ueber den Spalten
     .ub-footer-colophon  Copyright und Preishinweis in der Subline

   Beide baut inc/footer.php, ausgegeben werden sie vom Override
   templates/parts/content-footer.php.

   Alles haengt an .footer--dark. Das Projekt faehrt diesen Stil
   (ww_globals, 'footer_style'). Wird umgeschaltet, gelten wieder die
   Vorgaben des Parents – heller Footer ist hier nie gemessen worden.
   ========================================================= */
.site-footer {
  /*
     Mehr Luft als die 2rem des Parents.

     Der Footer traegt jetzt vier Zeilen statt zwei, und der Uebergang von
     der hellen CTA-Section auf #232622 kam mit 32px oben hart. Unten
     weniger als oben: dort schliesst die Subline mit ihrer eigenen
     Polsterung an.
  */
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.site-footer.footer--dark {
  /*
     Der gedaempfte Ton aus v1. Gemessen gegen footer-bg (#232622):
     6,4:1 – ueber den 4,5:1 aus WCAG 1.4.3. Volles Weiss waeren 15,3:1,
     optisch aber deutlich haerter als der produktive Stand.

     Deckkraft ueber color-mix gegen transparent, wie im Flyout, damit die
     Farbe aus der Palette kommt und nicht als rgba() daneben steht.
  */
  color: color-mix(in srgb, var(--wp--preset--color--text-light) 60%, transparent);
  /*
     Der Parent faerbt jedes a:hover mit !important (base/elements/_links.scss).
     Eine eigene color-Deklaration verloere dagegen; die Regel liest aber
     --ww-link-hover, also wird die Property gesetzt statt gegengehalten.

     v1 lief hier auf brand-link (#AE8B5D, gemessen 5,0:1). Statt der
     Markenfarbe hellt der Hover den gedaempften Ton auf volles Weiss auf –
     dieselbe Entscheidung wie im Flyout, und der Wechsel ist die
     Rueckmeldung, die v1 hier nicht hatte.
  */
  --ww-link-hover: var(--wp--preset--color--text-light);
}
.site-footer.footer--dark a {
  color: color-mix(in srgb, var(--wp--preset--color--text-light) 60%, transparent);
}
.site-footer.footer--dark .ww-footer-contact__name,
.site-footer.footer--dark .widget-title,
.site-footer.footer--dark .ub-footer-cta__name {
  color: var(--wp--preset--color--text-light);
}
.site-footer.footer--dark .ub-footer-head {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--text-light) 15%, transparent);
}
.site-footer.footer--dark .footer-subline {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--text-light) 15%, transparent);
}

/* ---------------------------------------------------------
   Kopf des Seitenfusses: Produktband und Vertrauensleiste
   --------------------------------------------------------- */
.ub-footer-head {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
}

/*
   Produktband.

   Text links, Knopf rechts – bis der Platz nicht mehr reicht, dann
   untereinander. Kein Breakpoint: flex-wrap entscheidet nach Inhalt, wie
   das Raster des Parents auch.
*/
.ub-footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.ub-footer-cta__eyebrow {
  margin-block: 0;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ub-footer-cta__product {
  margin-block: 0.25rem 0;
  font-size: var(--wp--preset--font-size--md);
}

.ub-footer-cta__name {
  font-weight: 600;
}

.ub-footer-cta__price::before {
  content: "·";
  padding-inline: 0.5em;
}

.ub-footer-cta__action {
  margin-block: 0;
}

/*
   Der Knopf.

   Farbe ist brand-link (#AE8B5D), nicht das Gruen der uebrigen CTAs:
   primary (#31592F) auf footer-bg sind gemessen 1,96:1, der Knopf waere
   auf der dunklen Flaeche fast verschwunden. WCAG 1.4.11 verlangt 3:1 fuer
   Bedienelemente. Mit brand-link sind es 4,85:1, die Beschriftung in
   neutral-900 darauf 5,98:1. Der Knopf misst 160x50px (2.5.8: 24px).

   --ww-link-hover muss hier gegen den Wert am .site-footer gesetzt werden.
   Der ist volles Weiss – auf dem hellen Braun waeren das 3,16:1 und damit
   unter 4,5:1 (1.4.3). Siehe die !important-Linkregel des Parents in
   CLAUDE.md.
*/
.ub-footer-cta__button {
  --ww-link: var(--wp--preset--color--neutral-900);
  --ww-link-hover: var(--wp--preset--color--neutral-900);
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background-color: var(--wp--preset--color--brand-link);
  color: var(--wp--preset--color--neutral-900);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  transition: background-color 0.2s ease;
}

/*
   Zwei Regeln des Parents muessen hier ueberstimmt werden, beide mit
   Elementselektor und dadurch spezifischer als die Klasse allein:
   .site-footer a { text-decoration: underline } und die Farbregel fuer
   .footer--dark a weiter oben. Ein Knopf traegt keinen Unterstrich - die
   Flaeche ist die Kennzeichnung.
*/
.site-footer .ub-footer-cta__button,
.site-footer.footer--dark .ub-footer-cta__button {
  color: var(--wp--preset--color--neutral-900);
  text-decoration: none;
}

.site-footer .ub-footer-cta__button:hover,
.site-footer .ub-footer-cta__button:focus-visible {
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-link) 82%, #fff);
  text-decoration: none;
}

/*
   Vertrauensleiste.

   Eine Liste, kein Absatz mit Trennzeichen – es sind vier gleichrangige
   Zusagen, und ein Screenreader soll ihre Zahl ansagen koennen. Die Punkte
   entfallen, die Icons stehen an ihrer Stelle.
*/
.ub-footer-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 1.75rem 0 0;
  padding-left: 0;
  list-style: none;
  font-size: var(--wp--preset--font-size--sm);
}

.ub-footer-usps__item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.ub-footer-usps__item .ww-icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--wp--preset--color--brand-link);
}

/* ---------------------------------------------------------
   Profilknoepfe (Spalte 1)
   --------------------------------------------------------- */
/*
   Die Social-Media-Profile, unter der Anschrift in Spalte 1. Markup aus
   inc/social.php, Adressen aus ww_globals.

   Eine Liste, kein Absatz – es sind gleichrangige Eintraege, und ein
   Screenreader soll ihre Zahl ansagen koennen. Denselben Aufbau hat die
   Vertrauensleiste weiter oben.

   Keine sichtbare Ueberschrift "Folge uns": sie stuende als vierte Zeile in
   einer Spalte, die schon Logo, Firma und Adresse traegt. Den Zusammenhang
   traegt das aria-label am <nav>, den Namen je Knopf ein
   .screen-reader-text neben dem Icon.
*/
.ub-footer-social {
  margin-top: 1.5rem;
}

.ub-footer-social__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/*
   Mindestens 44px in beide Richtungen – das Tippziel, das im Projekt auch
   fuer die Hauptnavigation und den Schnellzugriff gilt. Ein Knopf, der nur
   so gross ist wie sein Icon, waere auf dem Telefon nicht zu treffen.

   Eine Pille mit min-width, kein fester Kreis. Der Grund steht im Knopf
   selbst: der Parent haengt jedem Link auf eine fremde Domain einen
   diagonalen Pfeil als ::after an (die Regel entsteht zur Laufzeit in
   inc/assets.php, weil der Selektor den eigenen Host braucht). Das ist hier
   richtig so – die Profile liegen auf fremden Seiten, und die Markierung
   sagt das.

   Der Pfeil ist damit aber ein zweites Flex-Kind. In einem festen Quadrat
   waere das Icon danach nicht mehr mittig, sondern um die halbe
   Pfeilbreite nach links geschoben. Waechst der Knopf stattdessen mit
   seinem Inhalt, steht das Paar aus Zeichen und Pfeil zusammen in der
   Mitte, und die Regel des Parents muss nirgends ueberschrieben werden.

   Gemessen: Icon 1,2rem + Abstand 0,1em + Pfeil 0,45em ergibt rund 1,75rem
   Inhalt, dazu 2 x 0,5rem Polster – die Pille landet von selbst bei 2,75rem
   und bleibt durch min-width auch dann breit genug, wenn eine Marke ein
   schmaleres Zeichen hat.
*/
.ub-footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.5rem;
  border-radius: 999px;
  transition: background-color 0.2s ease-in-out;
}

/*
   .site-footer a { text-decoration: underline } im Parent zoege dem Knopf
   einen Strich unter das Icon – im Fliesstext richtig, unter einem
   Piktogramm nur ein Strich. Der Elementselektor darin macht die Regel
   spezifischer als eine Klasse allein, deshalb zwei Klassen dagegen.
*/
.site-footer .ub-footer-social__link,
.site-footer.footer--dark .ub-footer-social__link {
  text-decoration: none;
}

/*
   Die Farbe kommt nicht von hier.

   Im Ruhezustand erbt das Icon den gedaempften Ton der Spalte (60 % Weiss,
   gemessen 6,4:1 gegen footer-bg – weit ueber den 3:1, die WCAG 1.4.11 fuer
   ein Bedienelement verlangt). Im Hover faerbt der Parent jedes a:hover mit
   !important auf --ww-link-hover um, und die Property steht am .site-footer
   bereits auf vollem Weiss. Eine eigene color-Deklaration waere hier also
   wirkungslos – und ist auch nicht noetig.

   fill: currentColor setzt der Parent an .ww-icon (base/_icons.scss), das
   SVG folgt damit von selbst.
*/
.ub-footer-social__link:hover,
.ub-footer-social__link:focus-visible {
  background-color: color-mix(in srgb, var(--wp--preset--color--text-light) 12%, transparent);
}

.ub-footer-social__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--text-light);
  outline-offset: 2px;
}

.ub-footer-social__link .ww-icon {
  width: 1.2rem;
  height: 1.2rem;
}

/*
   youtube ist 576 Zeichenflaechen breit, die uebrigen Markenzeichen 512.
   Bei preserveAspectRatio "meet" bliebe es in einem 1,2rem-Quadrat auf
   1,07rem Hoehe stehen und wirkte neben Instagram zu klein.

   1,35rem = 1,2 x 576/512. Damit stimmt das Seitenverhaeltnis der Box mit
   dem der viewBox ueberein, das Icon fuellt sie aus und steht auf denselben
   1,2rem Hoehe wie die anderen. Derselbe Fall wie mattress-pillow im
   Schnellzugriff (components/_flyout.scss).
*/
.ub-footer-social__link .ww-icon--youtube {
  width: 1.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .ub-footer-social__link {
    transition: none;
  }
}
/* ---------------------------------------------------------
   Spalten
   --------------------------------------------------------- */
/*
   Die Ueberschrift der Spalte. Neu gegenueber v1: dort trug nur eine Spalte
   ein Menue, seit die Rechtslinks in einer eigenen stehen, braeuchte man
   sonst zwei unbeschriftete Linklisten nebeneinander.

   h4 aus der Sidebar-Registrierung des Parents (inc/setup.php). Die Groesse
   kommt aus den Slugs, nicht in Pixeln – die theme.json setzt h4 auf
   1,2rem, im Footer ist eine Stufe ueber dem Fliesstext genug.
*/
.footer-widget .widget-title {
  margin-block: 0 0.75rem;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
}

/*
   Das Footer-Menue.

   Der Parent unterstreicht jeden Link im Seitenfuss – als Kennzeichnung im
   Fliesstext richtig, in einer reinen Linkliste steht nur Unterstrich unter
   Unterstrich.

   Die Trennlinien aus v1 sind am 2026-09-25 wieder entfallen. Sie liefen
   ueber die volle Spaltenbreite (gemessen 432px) unter Links von 80px – das
   Fuenfeinhalbfache. In v1 fiel das weniger auf, weil nur eine Spalte ein
   Menue trug; mit zwei Listen nebeneinander und den neuen Trennlinien ueber
   und unter den Spalten sah der Footer aus wie eine Tabelle. Die Gliederung
   uebernehmen jetzt der Spaltentitel und der groessere Zeilenabstand.

   Der Unterstrich kommt im Hover und im Tastaturfokus zurueck: 1.4.1 ist
   hier nicht verletzt, aber ohne ihn bliebe als Rueckmeldung nur die
   Farbe.
*/
.footer-widget .menu {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.footer-widget .menu li.menu-item {
  margin: 0;
  padding-block: 0.45rem;
}

.footer-widget .menu a {
  display: inline-block;
  text-decoration: none;
}

.footer-widget .menu a:hover,
.footer-widget .menu a:focus-visible {
  text-decoration: underline;
}

/* ---------------------------------------------------------
   Subline
   --------------------------------------------------------- */
/*
   Bis zum 2026-09-25 war die Subline 0px hoch – der Footer endete ohne
   Boden. Sie traegt jetzt Copyright und Preishinweis und schliesst ihn ab.

   Das Widget-Gebiet footer_subline bleibt davor bestehen; steht dort etwas,
   erscheint es ueber dem Copyright.
*/
.footer-subline {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.ub-footer-colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  font-size: var(--wp--preset--font-size--xs);
}

.ub-footer-colophon p {
  margin-block: 0;
}

/* --------------------------------------------------
   BREADCRUMB

   Der Parent stylt `.breadcrumb` – die Wrapper-Klasse, die
   templates/parts/content-page.php um die Breadcrumb legt. Uckermarkbett
   setzt sie stattdessen als Inhaltsblock (synchronisiertes Muster 503,
   Shortcode [rank_math_breadcrumb]); dort gibt es diesen Wrapper nicht,
   die Parent-Regel greift also nicht.

   Werte 1:1 aus components/_breadcrumb.scss des alten Themes. Das
   !important stand dort schon – Rank Math liefert die Zeile als <p>, das
   sonst die Absatzgroesse traegt.
-------------------------------------------------- */
.rank-math-breadcrumb {
  font-size: var(--wp--preset--font-size--xs) !important;
}

.rank-math-breadcrumb a {
  text-decoration: none;
}

/* --------------------------------------------------
   Rundes Icon-Bild

   Redaktionelle Klasse, wird im Backend im Feld
   "Zusätzliche CSS-Klasse(n)" gesetzt. Zwei Sitzweisen:

   auf dem Container  <figure class="hero-icon-round"><img></figure>
                      trifft img/svg im Inneren (Bild-Block)
   auf dem Element    <img class="hero-icon-round">
                      trifft es direkt

   Warum beim direkten Fall img/svg vor der Klasse steht:
   ohne die Elementangabe bekaeme auch ein Container mit dieser
   Klasse die feste Hoehe von 80px und wuerde seinen Inhalt
   abschneiden. Die Regel soll nur das Bild selbst treffen.

   Aus dem alten Theme übernommen (ww-basetheme-v1-alt,
   src/scss/base/elements/_globals.scss).
-------------------------------------------------- */
.hero-icon-round img,
.hero-icon-round svg,
img.hero-icon-round,
svg.hero-icon-round {
  height: 80px;
  width: auto;
  border-radius: 999px;
}

/* --------------------------------------------------
   WEITERFÜHRENDE LINKS (.ub-link-arrow)

   Die „Mehr über …"-Links auf der Startseite. Redaktionelle Klasse, gesetzt
   am Absatzblock im Feld „Zusätzliche CSS-Klasse(n)".

   Nachgeholt am 2026-09-25. In v1 stand der Pfeil als
   `<i class="fa-solid fa-arrow-right-long"></i>` im Text und wurde von Font
   Awesome gezeichnet. Das Child lädt Font Awesome bewusst nicht mehr
   (CLAUDE.md, bewusste Abweichungen) – die fünf Elemente waren dadurch 0px
   breit und hinterließen nur ein Leerzeichen hinter der Beschriftung.
   Derselbe Fall wie beim Radius der Seiten-CTAs: kein neuer Wunsch, sondern
   eine Stelle, die beim Umbau verloren ging.

   Die Klasse sitzt am **Block**, nicht am `<a>`. „Zusätzliche CSS-Klasse(n)"
   ist ein offizielles Blockattribut und übersteht jedes erneute Speichern;
   eine von Hand ins `<a>` geschriebene Klasse kennt das Rich-Text-Format des
   Editors nicht und könnte beim nächsten Bearbeiten verschwinden.
-------------------------------------------------- */
/*
 * Als Maske, nicht als Schriftzeichen.
 *
 * `content: "→"` wäre kürzer, wird aber von Screenreadern mitgelesen – die
 * Beschriftung hieße dann „Mehr über Uckermarkbett, Pfeil nach rechts". Eine
 * Maske hat keinen Textinhalt und bleibt stumm, die Form kommt aus dem SVG,
 * die Farbe aus `currentColor`. Genau so löst es der Parent für die
 * Menüpfeile (abstracts/_icons.scss).
 *
 * Der Pfad ist `fa-arrow-right-long` (\f178) aus `fa-solid-900.ttf` des
 * Parents, gespiegelt mit `Transform(1, 0, 0, -1, 0, 448)` – das in der
 * CLAUDE.md beschriebene Verfahren. Gegenprobe: mit denselben Einstellungen
 * neu erzeugtes `arrow-right` ist zeichengleich mit dem Eintrag in
 * `abstracts/_icons.scss` des Parents.
 *
 * Breite 1em, weil die Vorschubbreite der Glyphe 512 beträgt und die Höhe
 * immer 512 ist. Der lange Pfeil ist damit breiter als die 0.875em der
 * Menüpfeile (Vorschub 448) – das ist der Unterschied zwischen
 * `arrow-right` und `arrow-right-long`, kein Vertipper.
 *
 * Icon: Font Awesome Free 6, CC BY 4.0 – https://fontawesome.com
 */
.ub-link-arrow a::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-start: 0.5em;
  vertical-align: -0.125em;
  background-color: currentColor;
  transition: transform 0.2s ease-in-out;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Cpath d=%22M503 279Q512 269 512 256Q512 243 503 233L375 105Q365 96 352 96Q339 96 329 105Q320 115 320 128Q320 141 329 151L403 224H32Q18 224 9 233Q0 242 0 256Q0 270 9 279Q18 288 32 288H403L329 361Q320 371 320 384Q320 397 329 407Q339 416 352 416Q365 416 375 407L503 279Z%22/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Cpath d=%22M503 279Q512 269 512 256Q512 243 503 233L375 105Q365 96 352 96Q339 96 329 105Q320 115 320 128Q320 141 329 151L403 224H32Q18 224 9 233Q0 242 0 256Q0 270 9 279Q18 288 32 288H403L329 361Q320 371 320 384Q320 397 329 407Q339 416 352 416Q365 416 375 407L503 279Z%22/%3E%3C/svg%3E") no-repeat center/contain;
}

/*
 * Der Pfeil rückt im Hover ein Stück nach – die einzige Bewegung, die der
 * Link hat. Über `transform`, nicht über `margin`: das löst kein Neulayout
 * des Absatzes aus.
 */
.ub-link-arrow a:hover::after,
.ub-link-arrow a:focus-visible::after {
  transform: translateX(0.25em);
}

@media (prefers-reduced-motion: reduce) {
  .ub-link-arrow a::after {
    transition: none;
  }
  .ub-link-arrow a:hover::after,
  .ub-link-arrow a:focus-visible::after {
    transform: none;
  }
}
/* --------------------------------------------------
   SCHNELLZUGRIFF - PROJEKTOPTIK

   Die Komponente liegt im Parent (components/_flyout-menu.scss) und
   bleibt dort unangetastet. Hier steht, was Uckermarkbett daraus macht:
   das cremefarbene Glaspanel aus v1, weisse Knoepfe, gruener Hover.

   Der Parent liefert bewusst ein markenneutrales Paar (neutral-900 auf
   text-light) und verlangt von jedem, der davon abweicht, BEIDE Werte zu
   setzen und den Kontrast nachzumessen. Genau das passiert hier - die
   gemessenen Werte stehen an den Farben.

   Struktur statt Kopie: v1 hatte zwei getrennte Beschriftungen, einen
   ::after-Tooltip aus data-label fuer Desktop und ein eigenes <span>
   fuer Mobil. Im Parent ist beides EIN Element (.ww-flyout__label),
   damit der zugaengliche Name nicht doppelt entsteht. Die Optik von v1
   liegt deshalb auf diesem einen Element.
-------------------------------------------------- */
/* --------------------------------------------------
   1. Farben und Masse

   Alle Farben kommen aus der Palette in theme.json, nicht als Hex-Werte
   aus v1. Der Look bleibt derselbe, die Toene sind die des Projekts:

     v1-Wert    Palette                        Abweichung
     #1f6b3a    primary        #31592F         etwas dunkler, weniger blau
     #ffffff    header-bg      #ffffff         keine
     #1f241f    neutral-900    #111111         etwas dunkler
     #fbf7ef    base           #FBF8F1         praktisch gleich
     #1f241f    dark-bg        #232622         praktisch gleich (Tooltip)

   Durchsichtigkeit entsteht ueber color-mix gegen transparent - so
   bleibt der Palettenwert die einzige Quelle. Der Parent arbeitet an
   seinem Knopfverlauf mit demselben Mittel.

   Einzige Ausnahme ist das Rot des Warenkorb-Zaehlers weiter unten: die
   Palette fuehrt kein Rot. Es steht deshalb als Hex-Wert da.
-------------------------------------------------- */
.ww-flyout {
  --ub-flyout-green: var(--wp--preset--color--primary);
  /* Traegt alle Schatten und die Knopfkante. Als eigene Property,
     damit die Mischungen darunter lesbar bleiben. */
  --ub-flyout-ink: var(--wp--preset--color--neutral-900);
  --ub-flyout-cream: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
  --ub-flyout-cream-solid: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
  --ub-flyout-hairline: color-mix(in srgb, var(--wp--preset--color--text-light) 65%, transparent);
  /* Der Zwei-Teile-Vertrag des Parents. Neu gemessen mit den
     Palettenwerten:
       Schrift auf Knopf   neutral-900 auf header-bg   18,9:1
       Schrift auf Hover   text-light  auf primary      8,1:1
       Tooltip             text-light  auf dark-bg     15,3:1
       Fokusring           primary     auf base         7,6:1
     Alle ueber den 4,5:1 aus WCAG 1.4.3, der Ring ueber den 3:1 aus
     1.4.11. Jeder Wert liegt hoeher als mit den v1-Farben. */
  --ww-flyout-bg: var(--wp--preset--color--header-bg);
  --ww-flyout-fg: var(--wp--preset--color--neutral-900);
  --ww-flyout-bg-hover: var(--ub-flyout-green);
  --ww-flyout-accent: var(--ub-flyout-green);
  /* v1-Masse: 48px Knopf, 8px Abstand, 22px vom Rand. */
  --ww-flyout-size: 3rem;
  --ww-flyout-gap: .5rem;
  --ww-flyout-offset: 1.375rem;
}

/* --------------------------------------------------
   2. Knoepfe

   Der Parent legt einen Verlauf aus --ww-flyout-bg an; mit Weiss als
   Grundwert bleibt er weiss - der Knopf sieht aus wie in v1, ohne dass
   die Regel des Parents umgangen werden muss.
-------------------------------------------------- */
.ww-flyout__btn {
  /* Der Parent setzt gar keinen Radius, seine Knoepfe sind eckig. In v1
     waren sie Kreise - bei gleicher Breite und Hoehe macht 999px genau
     das. Mobil wird daraus weiter unten die abgerundete Kachel. */
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--ub-flyout-ink) 12%, transparent);
  box-shadow: 0 0.5rem 1.125rem color-mix(in srgb, var(--ub-flyout-ink) 10%, transparent);
  /*
     Die Schaltflaechen sind <a>, und base/elements/_links.scss faerbt
     JEDES a:hover mit !important auf --ww-color-link-hover um. Gemessen
     am 2026-09-24: das Markenbraun #AE8B5D auf dem gruenen Hover, 2,6:1
     - unter den 4,5:1 aus WCAG 1.4.3. Eine eigene color-Deklaration
     verliert dagegen, egal wie spezifisch.

     Die Regel liest aber --ww-link-hover mit Fallback. Diesen Vertrag
     bedienen wir hier, statt ein zweites !important zu stapeln: das
     Parent faerbt dann selbst weiss.
  */
  --ww-link: var(--ww-flyout-fg);
  --ww-link-hover: var(--wp--preset--color--text-light);
  /*
     Die color-Deklaration bleibt trotzdem: die Back-to-Top-Schaltflaeche
     im Stapel ist ein <button> (flyoutmenu.scroll_top), den die
     a-Regel oben gar nicht erreicht.

     Noetig ist sie in beiden Faellen, weil der Parent im Hover nur die
     Flaeche tauscht und color auf --ww-flyout-fg stehen laesst. Das
     passt zu seiner dunklen Vorgabe, wo die Schrift ohnehin hell ist -
     hier waere sie fast schwarz auf Dunkelgruen, gemessen 1,4:1.
  */
  /*
     v1 setzte den Fokusring auf rgba(31, 107, 58, .35) - zu 65 Prozent
     durchsichtiges Gruen auf hellem Grund. Uebernommen ist die Optik
     (gruener Ring aussen), nicht die Deckkraft: deckend gemessen 7,6:1
     gegen das Panel, durchsichtig waeren es keine 2:1 und damit unter
     den 3:1 aus WCAG 1.4.11.

     offset und Breite bleiben zusammen unter dem Knopfabstand von 8px,
     sonst raenge der Ring in den Nachbarknopf.
  */
}
.ww-flyout__btn:hover {
  color: var(--wp--preset--color--text-light);
  box-shadow: 0 0.75rem 1.625rem color-mix(in srgb, var(--ub-flyout-green) 25%, transparent);
}
.ww-flyout__btn:focus-visible {
  outline: 3px solid var(--ub-flyout-green);
  outline-offset: 2px;
}

/* --------------------------------------------------
   3. Desktop: Glaspanel und dunkler Tooltip
-------------------------------------------------- */
@media (min-width: 992px) {
  .ww-flyout__list {
    padding: 0.5rem;
    background: var(--ub-flyout-cream);
    border: 1px solid var(--ub-flyout-hairline);
    border-radius: 999px;
    box-shadow: 0 0.875rem 2.25rem color-mix(in srgb, var(--ub-flyout-ink) 16%, transparent);
    /* -webkit- ist keine Altlast: Safari kennt die Eigenschaft bis
       heute nur so. Ohne Unterstuetzung bleibt das Panel einfach
       deckender - es faellt nichts aus. */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .ww-flyout__btn:hover {
    /* v1 rueckte 4px nach links, der Parent 6px. */
    transform: translateX(-0.25rem);
  }
  /* Der Tooltip. Dunkle Pille statt heller Flaeche mit Akzentkante -
     deshalb border-left zuruecksetzen, sonst bliebe die Kante des
     Parents stehen. */
  .ww-flyout__label {
    padding: 0.4375rem 0.6875rem;
    background: var(--wp--preset--color--dark-bg);
    color: var(--wp--preset--color--text-light);
    border-left: 0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--ub-flyout-ink) 18%, transparent);
  }
}
/* --------------------------------------------------
   4. Mobil: schwebende Leiste statt randloser Kante

   v1 liess die Leiste mit 12px Abstand schweben, der Parent klebt sie an
   den unteren Rand. Uebernommen ist v1 - mit den Folgen, die daran
   haengen: der Abstand zaehlt zur Hoehe, und die Leiste muss beim
   Ausblenden weiter fahren als ihre eigene Hoehe.
-------------------------------------------------- */
@media (max-width: 991.98px) {
  /*
     --ww-flyout-bar-height traegt im Parent DIE GANZE Hoehe der Leiste:
     body padding-bottom, scroll-padding-bottom und die Position der
     Back-to-Top-Schaltflaeche haengen daran (WCAG 2.4.11, der
     Seitenfuss darf nicht dauerhaft verdeckt sein).

     Gesamt sind es hier 88px = 12 Abstand + 1 Rand + 8 Polster
     + 58 Knopf + 8 Polster + 1 Rand. Der Wert steht am :root, nicht an
     .ww-flyout - sonst erreicht er die body-Regel des Parents nicht,
     die ausserhalb der Komponente steht.

     Die Knopfhoehe wird dadurch separat gesetzt, weil der Parent
     dafuer dieselbe Property benutzt.
  */
  :root {
    --ww-flyout-bar-height: 5.5rem;
  }
  .ww-flyout {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    /* Die Flaeche liegt in v1 auf der Liste, nicht auf dem <nav> -
       nur so bekommt sie die runden Ecken und den Abstand. */
    background: none;
    box-shadow: none;
    /* Beim Ausblenden ganz aus dem Bild: die eigene Hoehe reicht
       nicht, der Abstand zum unteren Rand kommt dazu. */
  }
  .ww-flyout.is-scroll-managed {
    transform: translateY(calc(100% + 0.75rem));
  }
  .ww-flyout__list {
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--ub-flyout-cream-solid);
    border: 1px solid var(--ub-flyout-hairline);
    border-radius: 22px;
    box-shadow: 0 0.75rem 2.125rem color-mix(in srgb, var(--ub-flyout-ink) 22%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .ww-flyout__btn {
    min-height: 3.625rem;
    border-radius: 16px;
    /* Der Parent trennt die Felder mit einer weissen Linie bei 10
       Prozent - auf seiner dunklen Leiste sichtbar, auf Creme nicht.
       v1 hatte keine Trenner. */
    border: 0;
    box-shadow: none;
  }
  .ww-flyout__label {
    font-size: 0.72rem;
    font-weight: 600;
    /* Die zwei Zeilen des Parents bleiben. v1 kuerzte hier mit
       ellipsis und schnitt laengere Beschriftungen sichtbar ab,
       waehrend der zugaengliche Name vollstaendig blieb. */
  }
}
/* --------------------------------------------------
   5. Kissen-Icon

   mattress-pillow ist 640 Zeichenflaechen breit, alle uebrigen Icons
   512. Das Parent gibt jedem Icon 1,1rem im Quadrat; bei
   preserveAspectRatio "meet" bliebe das Kissen auf 0,88rem Hoehe stehen
   und wirkte neben Blatt und Tuete zu klein.

   1,375rem = 1,1 x 640/512. Damit stimmt das Seitenverhaeltnis der Box
   mit dem der viewBox ueberein, das Icon fuellt sie aus und steht auf
   denselben 1,1rem Hoehe wie die anderen.
-------------------------------------------------- */
.ww-flyout__btn .ww-icon--mattress-pillow {
  width: 1.375rem;
}

/* --------------------------------------------------
   6. Warenkorb-Zaehler

   Markup aus templates/components/flyout-menu.php, Inhalt aus
   inc/woocommerce.php. Der Wrapper traegt die Position, das Plaettchen
   die Optik - und es verschwindet bei leerem Warenkorb, waehrend der
   Text fuer Screenreader stehen bleibt.
-------------------------------------------------- */
.ww-flyout {
  /*
     Die einzige Farbe hier, die NICHT aus theme.json kommt: die
     Palette fuehrt kein Rot, und keiner ihrer 18 Slugs taugt als
     Ersatz - primary und accent sind die Marke, sie wuerden den
     Zaehler zur Dekoration machen statt zum Hinweis.

     Deshalb der Wert aus v1, gemessen gegen die Schrift darauf: 5,3:1,
     ueber den 4,5:1 aus WCAG 1.4.3. Der Zaehler ist ausserdem nie der
     einzige Traeger der Information - daneben steht sie als Text.

     Soll auch das aus der Palette kommen, gehoert ein Slug dafuer in
     theme.json. Das hat einen Preis: jeder Palettenwert erscheint im
     Editor als waehlbare Farbe.
  */
  --ub-cart-badge-bg: #c7352a;
  --ub-cart-badge-fg: var(--wp--preset--color--text-light);
}

.ww-flyout__cart {
  position: absolute;
  pointer-events: none;
}

.ww-flyout__cart-count {
  /* Leerer Warenkorb, kein Plaettchen. Der Text daneben bleibt und sagt
     dann "Warenkorb ist leer". */
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--ub-cart-badge-bg);
  color: var(--ub-cart-badge-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  /* Der Rand traegt die Farbe der Knopfflaeche, nicht fest Weiss: er
     soll das Plaettchen von der Flaeche darunter abheben. In v1 stand
     hier Weiss, weil die Knoepfe weiss waren - ueber --ww-flyout-bg
     stimmt es auch, wenn die Flaeche spaeter wechselt. */
  border: 2px solid var(--ww-flyout-bg);
}
.ww-flyout__cart-count.is-visible {
  display: inline-flex;
}

@media (min-width: 992px) {
  .ww-flyout__cart {
    top: -0.25rem;
    right: -0.25rem;
  }
}
@media (max-width: 991.98px) {
  /*
     Die Schaltflaeche fuellt hier die ganze Spalte, eine Ecke waere
     also weit weg vom Icon. Das Plaettchen sitzt deshalb an dessen
     rechter oberer Ecke: 50% ist die Mitte der Spalte, das Icon ist
     1,1rem breit, macht + 0,55rem bis zu seiner Kante. Etwas weniger
     davon, damit das Plaettchen ueberlappt statt danebenzustehen.
  */
  .ww-flyout__cart {
    top: 0.25rem;
    left: calc(50% + 0.35rem);
  }
}
/* --------------------------------------------------
   NAVIGATION - ABGLEICH MIT v1

   Die Komponente liegt im Parent (components/_navigation.scss) und
   bleibt unangetastet. Sie ist bereits eine sehr getreue Portierung des
   alten Menues - Abstaende, Radien, Schatten, Rasterbreiten und der
   Burger stimmen auf den Wert genau ueberein.

   Vier Dinge weichen ab. Gemessen am 2026-09-24 im Browser, beide
   Staende nebeneinander:

     Mega- und Untermenue-Links   v1 16px   v2 18px
     Spaltentitel                 v1 18px   v2 22px
     Pfeil vor den Links          v1 keiner v2 vorhanden
     Karte "nur Bild"             v1 randlos v2 gerahmt und gepolstert

   Die ersten drei kommen daher, dass der Parent die festen Pixelwerte
   des alten Themes durch Schriftgroessen-Slugs ersetzt hat und dabei
   eine Stufe hoeher gelandet ist - und dass er den auskommentierten
   Pfeil aus v1 als aktives Icon uebernommen hat. Beides ist im
   markenneutralen Parent vertretbar; dieses Projekt will den alten
   Stand.
-------------------------------------------------- */
/* --------------------------------------------------
   1. Schriftgroessen

   Keine Pixelwerte wie in v1, sondern die Slugs, die sie treffen:
   sm ist 1rem (16px), md ist 1.125rem (18px). Der Parent nimmt md fuer
   die Links und lg (1.375rem, 22px) fuer die Titel - jeweils eine Stufe
   zu hoch.

   Mobil setzt der Parent den Titel selbst auf md. Das ist derselbe Wert
   wie hier, die Regel dort bleibt also wirkungslos ueberschrieben - die
   Abstufung mit opacity .7 im Burger bleibt erhalten.
-------------------------------------------------- */
.ww-mega__link,
.ww-sub__link {
  font-size: var(--wp--preset--font-size--sm);
}

.ww-mega__title,
.ww-sub__list .ww-nav__item--static .ww-nav__text {
  font-size: var(--wp--preset--font-size--md);
}

/* --------------------------------------------------
   2. Kein Pfeil vor den Links

   In v1 stand das Icon im Stylesheet, war aber auskommentiert - die
   Menues liefen jahrelang ohne. Der Parent hat es beim Umbau auf
   Inline-Masken aktiviert.

   display:none statt content:none, weil das Icon des Parents eine
   Maske mit eigener Breite und Hoehe ist und nicht ueber content
   entsteht. Ohne display bliebe der Platz stehen.
-------------------------------------------------- */
.ww-mega__link::before,
.ww-sub__link::before {
  display: none;
}

/* --------------------------------------------------
   3. Karte "nur Bild"

   Traegt der Menuepunkt die redaktionelle Klasse only-image, ist die
   Karte nichts als das Bild: kein Rahmen, kein Polster, und die Ecken
   rundet das Bild selbst.

   In v1 brauchte das zweimal !important, weil Bootstrap dazwischenfunkte.
   Ohne Bootstrap genuegt die hoehere Spezifitaet der zwei Klassen.
-------------------------------------------------- */
.only-image .ww-mega__card {
  border: 0;
  padding: 0;
}

.only-image .ww-mega__card img {
  /* 15px, nicht die 12px der Karte - so stand es in v1. Sichtbar ist
     ohnehin nur dieser Radius, die Karte liegt exakt darunter. */
  border-radius: 15px;
  /* Ohne block bleibt unter dem Bild die Grundlinienluecke des
     inline-Elements stehen - in v1 fiel sie nicht auf, weil das
     Polster der Karte sie ueberdeckte. Das gibt es hier nicht mehr. */
  display: block;
}

/* --------------------------------------------------
   4. Aktiver Menuepunkt

   Bis hierher sah der aufgerufene Punkt aus wie jeder andere. Der Parent
   hat zwar Regeln dafuer, sie greifen aber nicht:

     .ww-nav .active > .ww-nav__link      .active ist eine Bootstrap-
                                          Klasse, WordPress setzt sie nie
     .header--dark .ww-nav .current-menu-item > .ww-nav__link
                                          nur im dunklen Header, dieses
                                          Projekt faehrt header--light

   WordPress liefert stattdessen aria-current="page" am Link der
   aufgerufenen Seite - auf jeder Ebene, auch im Mega- und Untermenue -
   und current-menu-ancestor am <li> des Zweigs darueber.

   Die Farbe ist die Hoverfarbe, wie gewuenscht. Zwei Punkte dazu:

   1. Sichtbar war der Hover bisher BRAUN, nicht das Gruen, das der
      Parent vorsieht ($link-color-hover = primary). Schuld ist dieselbe
      Regel wie beim Flyout: base/elements/_links.scss faerbt jedes
      a:hover mit !important auf brand-link um. Damit "aktiv wie Hover"
      ueberhaupt zutrifft, wird unten der Vertrag des Parents bedient -
      danach ist beides gruen.

   2. Gruen statt Braun ist auch die haltbarere Wahl: #AE8B5D auf dem
      hellen Header sind 3,2:1, unter den 4,5:1 aus WCAG 1.4.3. Fuer
      einen Hover mag das durchgehen, fuer einen Dauerzustand nicht.
      primary liegt bei 8,1:1.

   Soll es doch das Braun sein, genuegt ein anderer Wert an
   --ub-nav-accent - dann faerben sich Hover und aktiver Punkt gemeinsam
   um, sie haengen am selben Token.
-------------------------------------------------- */
.ww-nav {
  --ub-nav-accent: var(--wp--preset--color--primary);
  /*
     Der Vertrag aus base/elements/_links.scss: dessen !important-Regel
     liest --ww-link-hover mit Fallback. Hier gesetzt, erbt ihn jeder
     Link im Menue - Ebene 0, Mega, Untermenue und Spaltentitel.
     Ein zweites !important braucht es dadurch nicht.
  */
  --ww-link-hover: var(--ub-nav-accent);
}

/* Der aufgerufene Punkt selbst. */
.ww-nav [aria-current=page],
.ww-nav .current-menu-ancestor > .ww-nav__link,
.ww-nav .current-menu-ancestor > .ww-disclosure > .ww-nav__link,
.ww-nav .current-menu-parent > .ww-nav__link,
.ww-nav .current-menu-parent > .ww-disclosure > .ww-nav__link {
  color: var(--ub-nav-accent);
}