/*
 * Amewo Shop-Relaunch – Child-Template-CSS
 * Quelle: Figma-Datei "Amewo-Shop", Navigation (Node 1:430) und Footer (Node 1:301)
 * aus dem Frame "Startseite".
 *
 * WICHTIG: Viele Farb-/Branding-Anpassungen müssen NICHT hier gepflegt werden,
 * sondern lassen sich direkt im Backend einstellen (Einstellungen → Templates →
 * AmewoShop → Einstellungen):
 *   - Abschnitt "Colors": primary, secondary, header-bg-color, footer-bg-color, ...
 *   - Abschnitt "Custom Sass": customVariables / customContent (freier Sass-Code,
 *     wird von NOVA direkt in clear.scss eingebaut, kein Datei-Upload nötig)
 *   - Abschnitt "Footer-Einstellungen": Newsletter-Box & Social-Media-Icons an/aus
 * Diese Datei enthält nur das, was es im NOVA-Standard noch gar nicht gibt:
 * den "Lösung finden"-Button, den "B2B Anfrage"-Link und Feinschliff am Footer.
 */

/* ---------------------------------------------------------------------- */
/* Inter, lokal ausgeliefert (fonts/inter-*.woff2).                         */
/*                                                                          */
/* Vorher lief das über @import von fonts.googleapis.com. Dabei wird bei    */
/* JEDEM Seitenaufruf die IP-Adresse des Besuchers an Google übertragen -   */
/* dafür hat das LG München 2022 Schadenersatz zugesprochen (Az. 3 O        */
/* 17493/20), und Abmahnungen dazu sind verbreitet. Bei einem Shop mit      */
/* Behörden- und Schulkunden ist das ein reales Risiko. NOVA hostet seine   */
/* eigenen Schriften ebenfalls lokal - wir folgen damit nur der bestehenden */
/* Linie des Shops.                                                         */
/*                                                                          */
/* Nebeneffekt: @import blockiert das Nachladen (die CSS muss erst geparst  */
/* sein, bevor die Schrift überhaupt angefragt wird). Lokale @font-face-    */
/* Regeln starten sofort.                                                   */
/*                                                                          */
/* Die Schnitte 700/800 waren zuvor nie geladen, obwohl im CSS an über 20   */
/* Stellen verwendet - Browser haben sie nur künstlich fett gerechnet.      */
/* Inter steht unter der SIL Open Font License, Selbsthosting ist erlaubt.  */
/* ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans - zweite Schriftfamilie des Entwurfs, ausschließlich für
   Überschriften (Inter bleibt die Textschrift). Ebenfalls lokal ausgeliefert
   und ebenfalls SIL Open Font License. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jakarta-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jakarta-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/jakarta-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/jakarta-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-primary: #F46060;
  /* Farbverlauf steht bereit, wird aber NIRGENDS automatisch verwendet:
     Buttons sind grundsätzlich einfarbig. Wer ihn braucht, setzt ihn
     ausdrücklich per background: var(--color-primary-gradient).
     Werte aus Figma Node 1:460 ("Lösung finden") - exakt wie exportiert.
     Entscheidend sind die NEGATIVEN Stopps: #FFC5C5 (-90.29%) und #FFB8B8
     (-34.25%) liegen außerhalb der Fläche und sind gar nicht sichtbar, sie
     bestimmen nur die Farbe an der linken Kante (rechnerisch ~#F88080).
     Sichtbar ist damit ein satter Rotverlauf, kein Rosa.
     Eine frühere Fassung hatte alle fünf Stopps in den Bereich 0-100%
     "sortiert" - dadurch rutschten die hellen Rosatöne in die Fläche und der
     Button wirkte ausgewaschen. Werte also NICHT umsortieren. */
  --color-primary-gradient: linear-gradient(92.84deg, #FFC5C5 -90.29%, #FFB8B8 -34.25%, #F46060 19.67%, #EE5A5A 65.14%, #E45454 115.89%);
  /* FLÄCHENFARBE aus dem Entwurf. Hängt an fertigen Figma-Elementen mit
     festen Node-Werten: Newsletter-Band (104:144), USP- und Trust-Kacheln,
     Kontakt-Icons, FAQ-Pillen, aktiver Kontakt-Reiter. Nicht anfassen, um
     Buttons umzufärben - dafür gibt es --color-action. */
  --color-secondary: #B4D6FF;
  --color-secondary-bg: #DFEEFF;
  /* AKTIONSFARBE: alle gefüllten blauen Buttons des Shops - Standard-Button,
     Umrandungsvariante, "Jetzt kaufen", "Zur Kasse", Cookie-Banner.
     Bewusst von --color-secondary getrennt: Ein reiner Variablentausch hätte
     die sechs Flächen oben mitgedunkelt, und die stammen mit festen Werten
     aus dem Entwurf. Eine Stelle für alle Buttons ist damit weiter gegeben,
     nur eben eine eigene.
     Wer die Buttons umfärbt, ändert AUSSCHLIESSLICH diese beiden Werte -
     nicht die einzelnen Regeln, die ziehen alle hier durch.
     Der Wert ist bestätigt: #B4D6FF ist das Blau des Entwurfs, ausdrücklich
     vom Nutzer am "Zur Kasse"-Button gegengeprüft. Ein Vorschlag, die
     Buttons abzudunkeln, wurde abgelehnt - NICHT erneut anbringen. Er ist
     derselbe Wert wie --color-secondary, steht aber bewusst getrennt: Ein
     Umfärben der Buttons darf die Figma-Flächen oben nicht mitnehmen. */
  --color-action: #B4D6FF;
  --color-action-hover: #9CC7F7;
  /* Hoverfarbe für Links, shopweit. Der Wert ist nicht neu - er wird an
     mehreren Stellen dieser Datei schon fest verwendet (Agenturname im
     Copyright, Newsletter-Button, Kontaktdaten) und steht in AGENTS.md als
     "Blau, Text/Links, Hover". Seit er der shopweite Standard ist, gehört
     er in eine Variable. Die vorhandenen festen #4A8FD4 dürfen bei
     Gelegenheit hierher wandern - nicht als eigener Umbau. */
  --color-link-hover: #4A8FD4;
  --color-text-muted: #6B6B6B;
  --color-border: #E6E6E6;
  --font-family-base: 'Inter', -apple-system, sans-serif;
  /* Zweite Familie des Entwurfs, nur für Überschriften. */
  --font-family-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --radius-pill: 999px;
}

/* ---------------------------------------------------------------------- */
/* Schriftart site-weit: Figma nutzt Inter durchgängig (Header, Footer,    */
/* Produktkarten, Fließtext - geprüft an Node 1:430 und 1:301), NOVA setzt */
/* per Default "Open Sans" auf body/Headings/Buttons. Hier überschreiben   */
/* wir das global, nicht nur für unsere eigenen amewo-* Klassen.           */
/* ---------------------------------------------------------------------- */
body,
.btn,
input,
select,
textarea,
.form-control {
  font-family: var(--font-family-base);
}
/* Überschriften laufen shopweit in Plus Jakarta Sans (zweite Familie des
   Entwurfs). Inter bleibt Fließtext-, Button- und Formularschrift.
   Ausnahmen, die bewusst in Inter bleiben, stehen weiter unten jeweils
   direkt an der betroffenen Regel (z. B. Produktkachel-Titel). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-display);
}

/* ---------------------------------------------------------------------- */
/* Link-Hover shopweit: Blau statt Rot                                     */
/*                                                                        */
/* GESUCHT WIRD DIE REGEL NICHT IN clear.css - sie steht in               */
/* themes/clear/clear_crit.css (kritisches CSS, eine einzige Zeile):      */
/*   a:hover { color: <primary>; text-decoration: none }                  */
/* Die Farbe stammt aus der Template-Einstellung "primary" im Backend, im */
/* Shop also Rot. Betroffen war damit JEDER Link: Navigation, Fußzeile,   */
/* Produkttitel, Brotkrümel, Kategorielisten.                             */
/*                                                                        */
/* .slick-slide a:hover steht dort ein zweites Mal mit derselben Farbe    */
/* (zwei Klassen + Element) und muss deshalb mitgenommen werden - sonst   */
/* bliebe der Hover in allen Slidern rot: Produktslider der Startseite,   */
/* Zubehör der Artikelseite, "Kunden kauften auch" im Warenkorb.          */
/*                                                                        */
/* Die Spezifität bleibt bewusst so niedrig wie die des Originals - jede  */
/* gezieltere Regel dieser Datei gewinnt weiter (Brotkrümel auf Dunkel,   */
/* Agenturname, Kontaktlinks). amewo.css wird nach dem kritischen CSS     */
/* geladen, gleiche Spezifität genügt also.                               */
/* ---------------------------------------------------------------------- */
a:hover,
a:focus,
.slick-slide a:hover,
.slick-slide a:focus {
  color: var(--color-link-hover);
}

/* ====================================================================== */
/* FORMULARE UND BUTTONS – shopweiter Grundstil                            */
/*                                                                        */
/* Vorlage ist das Kontaktformular: Felder und Buttons mit 10px Radius,    */
/* Buttons in Hellblau, Inter SemiBold. Vorher trug NOVA seinen Standard   */
/* durch den ganzen Shop - 2px Radius (0.125rem), Rahmen #707070 und ein   */
/* gelber Fokusring (#F8BF00, NOVA-Akzentfarbe), der zum Entwurf gar nicht */
/* passt. Betroffen war alles außerhalb der bereits gestalteten Seiten:    */
/* Anmeldung, Registrierung, Kasse, Passwort vergessen, Bewertung,         */
/* Wunschzettel, Rückfrage zum Artikel.                                    */
/*                                                                        */
/* WARUM DIESER BLOCK HIER OBEN STEHT: Es sind bewusst schwache Selektoren */
/* (eine Klasse), damit jede spätere, gezieltere Regel in dieser Datei     */
/* gewinnt - Newsletter, Warenkorb-Button, Mengenwahl und die Kaufbuttons  */
/* der Artikelseite behalten so ihre eigenen Werte. Wird der Block nach    */
/* unten verschoben, überschreibt er sie.                                  */
/* ====================================================================== */
:root {
  --radius-field: 10px;
  /* Textfarbe auf hellblauen Flächen: weiß, so wie im Entwurf und wie
     ursprünglich im Kontaktformular. Ausdrückliche Entscheidung des Nutzers
     nach direktem Vergleich Ist/Soll.
     Gemessener Kontrast: Weiß auf #B4D6FF = 1,7:1, WCAG 1.4.3 verlangt
     4,5:1. Falls das später doch zum Thema wird (Behörden- und
     Schulkunden), sind es zwei Stellen: diese Variable auf #1B1B1B (ergibt
     11,5:1) ODER die Fläche --color-secondary auf ca. #2E6FB8 abdunkeln,
     dann bleibt die Schrift weiß. Nicht in den einzelnen Regeln nachfassen -
     die ziehen alle diese Variable. */
  --color-on-secondary: #FFFFFF;
}

/* --- Eingabefelder ----------------------------------------------------- */
.form-control,
.custom-select,
.custom-file-label {
  border-radius: var(--radius-field);
  border-color: var(--color-border);
  color: #1B1B1B;
}
.form-control::placeholder {
  color: var(--color-text-muted);
}
/* Fokus: NOVAs gelber Ring ersetzt. Der Ring bleibt bewusst erhalten und
   wird nicht auf outline:none gesetzt - er ist für Tastaturbedienung die
   einzige Rückmeldung, wo man gerade steht. */
.form-control:focus,
.custom-select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(180, 214, 255, 0.45);
}
textarea.form-control {
  min-height: 120px;
}
/* Beschriftungen. Der Außenabstand hängt bewusst nur an Labels innerhalb
   einer .form-group bzw. .control-label - ein Abstand auf JEDEM <label>
   würde auch inline stehende Beschriftungen auseinanderziehen. */
label,
.control-label {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: #1B1B1B;
}
.form-group > label,
.control-label {
  margin-bottom: 6px;
}

/* --- Auswahlkästchen und Radios ---------------------------------------- */
.custom-control-label {
  font-weight: 400;
  color: var(--color-text-muted);
}
/* NOVA setzt angehakte Optionen auf fett
   (input[type="checkbox"]:checked + label → 700, clear.css). Neben der
   blau gefüllten Box ist das doppelt gemoppelt und liest sich eher wie ein
   Darstellungsfehler - "Angemeldet bleiben" springt beim Anklicken in
   Fettschrift. Rückgängig, dafür braucht es dieselbe Struktur wie NOVAs
   Selektor, sonst gewinnt dessen höhere Spezifität. */
input[type="radio"]:checked + .custom-control-label,
input[type="checkbox"]:checked + .custom-control-label {
  font-weight: 400;
}
.custom-checkbox .custom-control-label::before {
  border-radius: 4px;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
/* Fokus und Gedrückthalten. NOVA setzt hier dreimal die Akzentfarbe aus den
   Template-Einstellungen (clear.css 8921/8924/8927), im Shop also Rot - beim
   Antippen eines Häkchens blitzte dadurch ein roter Rahmen auf, der wie eine
   Fehlermeldung aussieht.
   Der Ring allein reicht nicht: Der ROTE RAHMEN kommt aus einer eigenen
   Regel für :focus:not(:checked), und die Farbe beim Gedrückthalten aus
   einer dritten. Alle drei müssen mit. */
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(180, 214, 255, 0.45);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--color-secondary);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--color-secondary-bg);
  border-color: var(--color-secondary);
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
  border-radius: var(--radius-field);
  font-family: var(--font-family-base);
  font-weight: 600;
  padding: 12px 24px;
}
.btn-sm {
  padding: 8px 16px;
}
.btn-lg {
  padding: 14px 28px;
}
/* AUSNAHME: runde Icon-Buttons (Vergleichsliste und Wunschzettel am Bild,
   Schnellaktionen auf Produktkacheln). NOVA legt sie als .badge-circle-1 mit
   fest 44x44 und border-radius 50% an. Der Innenabstand der Grundregel oben
   hat sie zu Ellipsen von 50x44 aufgezogen - die Breite sprengt die 44px,
   die Rundung bleibt bei 50 %, das Ergebnis ist ein Ei.
   Zwei Klassen im Selektor genügen, ohne die Spezifität der Grundregeln
   anzuheben - die müssen niedrig bleiben, damit spätere Seitenregeln in
   dieser Datei weiter gewinnen. */
.btn.badge-circle-1,
.btn.badge {
  padding: 0;
}
.btn-link {
  padding-left: 0;
  padding-right: 0;
}
/* Link-Buttons sind optisch Links, verhalten sich aber als <button> - das
   shopweite a:hover greift bei ihnen deshalb nicht. clear.css setzt für sie
   eine eigene Regel auf die Primärfarbe (.btn-link:hover, clear.css:8343),
   im Shop also Rot. Sichtbar u. a. am "Auf Wunschzettel" im Warenkorb.
   Farbe hier auf denselben Wert wie bei echten Links; die Unterstreichung
   bleibt, wie NOVA sie setzt (Grundzustand unterstrichen, Hover ohne) -
   dazu gibt es keine Vorgabe aus dem Entwurf.
   Ausgenommen bleibt der Papierkorb im Warenkorb: Der ist ebenfalls ein
   .btn-link, wird aber weiter unten gezielt rot gesetzt - Löschen ist die
   einzige Signalhandlung der Positionskarte. */
.btn-link:hover,
.btn-link:focus {
  color: var(--color-link-hover);
}

/* --- Farben: Hellblau ist der Standard --------------------------------- */
/* ACHTUNG, DIESE ENTSCHEIDUNG WURDE EINMAL GEDREHT - bitte die Begründung
   lesen, bevor jemand sie zurückdreht.
   Frühere Fassung: .btn-primary blieb rot, blau war nur, was ein
   [type="submit"] trug. Der Grund war, dass ein noch früherer Anlauf die
   Klasse shopweit auf Blau gezogen und dabei die bewusst roten Aktionen
   miterwischt hat (Topbar-CTA, OPC-Buttons der Startseite,
   "Details"-Button der Produktkacheln).
   Jetzt gilt: Hellblau ist die Standard-Buttonfarbe, Rot nur noch dort, wo
   es GEZIELT gesetzt ist. Das ist gefahrlos möglich, weil genau diese drei
   roten Aktionen inzwischen an EIGENEN Klassen hängen und nicht mehr an
   .btn-primary:
     .amewo-btn-solutionfinder      Topbar "Lösung finden"
     .amewo-btn-cta-primary .btn    OPC-Buttons ("B2B-Anfrage starten")
     .amewo-product-card-details    "Details" auf den Produktkacheln
   Wer eine weitere rote Hauptaktion braucht, legt sie ebenso an - NICHT
   über .btn-primary, sonst steht dieselbe Falle wieder da.
   Betroffen von der Umstellung sind damit die noch nicht gestalteten
   Seiten: Anmeldung, Registrierung, Konto, Kasse, Wunschzettel, Bewertung,
   Newsletter-Bestätigung, Retouren, Listenansicht der Produkte.
   Die Spezifität bleibt bewusst niedrig (eine Klasse), damit spätere,
   gezieltere Regeln in dieser Datei weiter gewinnen - siehe Kopf dieses
   Abschnitts. Die Zustandsselektoren spiegeln die von clear.css: Bootstrap
   setzt :active über :not(:disabled):not(.disabled), das sind vier
   Klassenstufen, und mit gleicher Spezifität gewinnt hier die später
   geladene Datei. */
.btn-primary {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-secondary);
}
/* .btn-animated MUSS hier mit stehen. NOVA hängt diese Klasse an den <body>,
   sobald die Template-Einstellung "Button-Animation" auf Ja steht
   (NOVA/layout/header.tpl:401) - dann liegt JEDER Button im Shop darin.
   clear.css definiert dafür `.btn-animated .btn-primary:hover` mit drei
   Klassen und schlägt damit ein schlichtes `.btn-primary:hover`. Genau
   daran ist die erste Fassung gescheitert: Fläche blau, Hover trotzdem rot.
   Die Regel steht dort zusätzlich in @media (hover) - das hebt die
   Spezifität NICHT an, ändert hier also nichts. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-animated .btn-primary:hover,
.btn-animated .btn-primary:focus {
  background-color: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
}
/* Der ausgegraute Zustand wird BEWUSST nicht angefasst: NOVA setzt dafür
   #ebebeb mit #707070 Schrift (clear.css). Ein gesperrter Button, der
   aussieht wie ein klickbarer, ist genau die Art Fehler, die man erst
   bemerkt, wenn ein Kunde ihn anklickt und nichts passiert. */
/* Die Umrandungsvariante gehört zur selben Familie (Gutscheincode im
   Warenkorb, Filter, Konto). Ohne sie stünde ein roter Rahmenbutton neben
   einem blauen Vollbutton. Gefüllt wird sie beim Überfahren - dieselbe
   Logik wie bei Bootstrap, nur in Blau. */
.btn-outline-primary {
  border-color: var(--color-action);
  /* Die BESCHRIFTUNG zieht NICHT --color-action. Das ist #B4D6FF und liegt
     auf Weiß bei rund 1,5:1 - eine erste Fassung dieser Regel hat den
     Button dadurch praktisch unbeschriftet gemacht (aufgefallen am
     "Versandkosten ermitteln" im Warenkorb). Für Text auf hellem Grund ist
     #6BA7E8 der vorgesehene Ton, das steht so auch in AGENTS.md. Der Rahmen
     darf beim helleren Wert bleiben, er trägt keine Information. */
  color: #6BA7E8;
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-animated .btn-outline-primary:hover,
.btn-animated .btn-outline-primary:focus {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-secondary);
}
/* Die Umrandungsvariante füllt sich bei aktiver Button-Animation nicht über
   background, sondern über ein ::after, das von links hereinfährt - mit
   fester Farbe aus den Template-Einstellungen. Ohne diese Regel schöbe sich
   weiterhin eine rote Fläche unter die blaue Beschriftung. */
.btn-animated .btn-outline-primary::after,
.btn-animated .btn-outline-primary:hover::after {
  background-color: var(--color-action);
}
.btn:focus {
  box-shadow: 0 0 0 3px rgba(180, 214, 255, 0.45);
}

/* --- Pflichtfeld-Stern in Textfarbe ------------------------------------ */
/* NOVA setzt den Stern an Pflichtfeldern in Dunkelrot (#b90000, clear.css
   ab 21609). Rot ist im Shop die Signalfarbe für Fehler und Hauptaktionen -
   an einem Feld, das noch gar nicht falsch ausgefüllt ist, liest sich das
   wie eine Fehlermeldung.
   `inherit` statt eines festen Wertes: Der Stern übernimmt damit die Farbe
   der Beschriftung, an der er hängt, und bleibt auch dann richtig, wenn die
   Beschriftung irgendwo anders eingefärbt ist (z. B. gedämpft im Fußbereich).
   Die Selektoren sind bewusst 1:1 die von clear.css - bei gleicher
   Spezifität gewinnt amewo.css, weil es später geladen wird. */
.label-slide input[required] + .col-form-label::after,
.label-slide textarea[required] + .col-form-label::after,
.label-slide select[required] + .col-form-label::after,
.label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox).typeahead-required .col-form-label::after,
.required-info .required-star {
  color: inherit;
}

/* --- Meldungen und Validierung ----------------------------------------- */
/* Bootstrap liefert für Meldungen eine eigene Farbwelt mit (Rosa #f8d7da mit
   #721c24, Grün #d4edda, Gelb #fff3cd). Die hat mit der Palette dieses Shops
   nichts zu tun und wirkt neben den weißen Karten wie ein Fremdkörper -
   besonders die Fehlermeldung, die im Warenkorb ganz oben steht.
   Hier deshalb dieselbe Sprache wie überall: ruhige Tönung der jeweiligen
   Signalfarbe, 1px Rahmen, weiche Rundung, dunkler Text.
   BEWUSST alle vier Varianten und nicht nur die Fehlermeldung: Sonst stünde
   eine angepasste neben drei Bootstrap-bunten - der Bruch wäre größer als
   vorher. Die Textfarbe ist überall #1B1B1B; Farbe tragen Fläche, Rahmen und
   das Symbol. Das hält den Kontrast durchgehend über 12:1, während
   Bootstraps eingefärbter Text je nach Variante bis auf 4,5:1 herunterging. */
.alert {
  border-radius: 14px;
  border-width: 1px;
  border-style: solid;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  padding: 14px 18px;
  color: #1B1B1B;
}
.alert-danger {
  background-color: #FDECEC;
  border-color: #F8C9C9;
  color: #1B1B1B;
}
.alert-success {
  background-color: #EDF7F0;
  border-color: #CDE9D6;
  color: #1B1B1B;
}
.alert-info {
  background-color: var(--color-secondary-bg);
  border-color: var(--color-secondary);
  color: #1B1B1B;
}
.alert-warning {
  background-color: #FFF7E6;
  border-color: #FFE2A8;
  color: #1B1B1B;
}
/* Das Symbol trägt die Signalfarbe, nicht der Text. */
.alert-danger .fa,
.alert-danger .fas,
.alert-danger .far {
  color: var(--color-primary);
}
.alert-info .fa,
.alert-info .fas,
.alert-info .far {
  color: #6BA7E8;
}
.alert a {
  color: #6BA7E8;
  text-decoration: underline;
}
/* Das Schließkreuz sitzt bei Bootstrap mit opacity .5 in der Ecke und ist
   auf den getönten Flächen kaum zu sehen. */
.alert .close {
  opacity: .6;
  color: #1B1B1B;
  text-shadow: none;
}
.alert .close:hover,
.alert .close:focus {
  opacity: 1;
  color: #1B1B1B;
}
.invalid-feedback,
.form-group.has-error .form-control {
  border-color: var(--color-primary);
}
.invalid-feedback {
  font-size: 13px;
  color: var(--color-primary);
}
/* Eingabegruppen (Gutscheincode, Suchfelder in Konto/Warenkorb): NOVA rundet
   nur die Außenkanten - die müssen den neuen Radius mitbekommen, sonst
   sitzen runde Felder in eckigen Gruppen. */
.input-group > .form-control:first-child,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-top-left-radius: var(--radius-field);
  border-bottom-left-radius: var(--radius-field);
}
.input-group > .form-control:last-child,
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-top-right-radius: var(--radius-field);
  border-bottom-right-radius: var(--radius-field);
}

/* ---------------------------------------------------------------------- */
/* Topbar (Reihe 1 laut Figma Node 1:430/1:432): "Lösung finden"-CTA und  */
/* "B2B Anfrage" links, "Support" und Telefonnummer rechts. Komplettes    */
/* Override von layout/header_top_bar.tpl, kein NOVA-Äquivalent.         */
/* ---------------------------------------------------------------------- */
#header-top-bar {
  border-bottom: 1px solid var(--color-border);
}
.amewo-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  padding: 12px 0 13px;
}
.amewo-topbar-left,
.amewo-topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.amewo-btn-solutionfinder {
  display: inline-flex;
  align-items: center;
  /* Einfarbig. Der Verlauf steht als --color-primary-gradient bereit und wird
     nur dort gesetzt, wo er ausdrücklich gewünscht ist. */
  background: var(--color-primary);
  color: #FFFFFF !important;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.amewo-btn-solutionfinder:hover,
.amewo-btn-solutionfinder:focus,
.amewo-btn-solutionfinder:active {
  opacity: .9;
  color: #FFFFFF !important;
  text-decoration: none;
}
.amewo-link-topbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
/* Wie bei den Kontaktzeilen im Fußbereich reicht diese Regel allein nicht:
   `#header-top-bar a:not(.dropdown-item):not(.btn):hover` aus clear_crit.css
   hat eine ID und schlägt sie. Der wirksame Gegenpart steht im Abschnitt
   "Kopfzeile: Hover auf Links und Symbolen" weiter unten, mit demselben
   Wert. */
.amewo-link-topbar:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}
/* Icon aus dem Entwurf im Topbar-Link (16px wie im Figma). Die SVG-Datei wird
   als Maske genutzt und über currentColor eingefärbt - dadurch übernimmt das
   Icon die Farbe des Links und wechselt beim Hover automatisch mit. Als <img>
   wäre es dauerhaft grau, weil die Strichfarbe fest in der Datei steht. */
.amewo-topbar-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("../images/topbar-b2b.svg") no-repeat center;
  mask: url("../images/topbar-b2b.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---------------------------------------------------------------------- */
/* Kopfzeile: Hover auf Links und Symbolen                                 */
/*                                                                        */
/* Auch das steckt in clear_crit.css, nicht in clear.css - und zwar in     */
/* DREI Regeln, die alle stärker sind als das shopweite a:hover weiter     */
/* oben. Sichtbar war das am Login- und Warenkorbsymbol: Fläche blau,      */
/* Symbol beim Überfahren rot.                                             */
/*                                                                        */
/*   #header-top-bar a:not(.dropdown-item):not(.btn):hover   (1,3,1 - ID!) */
/*   header a:not(.dropdown-item):not(.btn):hover            (0,3,1)       */
/*   .navbar-light .navbar-nav .nav-link:hover/:focus        (0,3,0)       */
/*                                                                        */
/* Die erste hat eine ID und schlägt damit ALLES ohne ID - unter anderem   */
/* die Regel für .amewo-link-topbar weiter oben, die deshalb nie sichtbar  */
/* wurde. Deshalb hier dieselben Selektorformen statt eines eigenen,       */
/* kürzeren Selektors: nur so kommt der Wert überhaupt an.                 */
/*                                                                        */
/* Der rote CTA "Lösung finden" ist trotz `header a:not(.btn)` sicher - er */
/* setzt seine weiße Schrift mit !important (siehe oben).                  */
/*                                                                        */
/* Der Block steht bewusst VOR den Brotkrümel-Regeln: `header a…:hover`    */
/* und `.breadcrumb .breadcrumb-item > a:hover` sind beide (0,3,1), und    */
/* der Pfad liegt seit dem Umbau innerhalb von <header>. Bei Gleichstand   */
/* entscheidet die Reihenfolge - der Pfad soll seinen dunklen Hover        */
/* behalten, also muss er weiter unten stehen bleiben.                     */
/* ---------------------------------------------------------------------- */
#header-top-bar a:not(.dropdown-item):not(.btn):hover,
#header-top-bar a:not(.dropdown-item):not(.btn):focus,
header a:not(.dropdown-item):not(.btn):hover,
header a:not(.dropdown-item):not(.btn):focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--color-link-hover);
}
/* Farbe und Hoehe des Balkens unter den Menuepunkten stehen NICHT mehr hier,
   sondern im Abschnitt "Hauptnavigation: Hover und Aktiv-Zustand" am
   Dateiende - dort werden Hover (hellblau) und Aktiv (rot) unterschieden. */

/* ---------------------------------------------------------------------- */
/* Breite der Kopfzeilen.                                                  */
/* NOVA rendert Topbar und Navigation in .container-fluid-xl, das per      */
/* Theme-Variable auf 1650px begrenzt ist. Der Entwurf sieht 2174px vor    */
/* (= 2030px Inhaltsbreite der Seitencontainer + 2x72px Außenabstand).     */
/* Bewusst NICHT die Klasse global umdefiniert: .container-fluid-xl wird   */
/* auch vom Content-Wrapper und der Breadcrumb benutzt (NOVA header.tpl    */
/* Z. 602 ff.) - das würde die Breite shopweit verändern. Daher nur die    */
/* beiden Kopfzeilen-Container.                                            */
/* ---------------------------------------------------------------------- */
#header-top-bar > .container-fluid-xl,
#jtl-nav-wrapper > .container-fluid-xl {
  max-width: 2174px;
}

/* ---------------------------------------------------------------------- */
/* Hauptzeile (Reihe 2 laut Figma Node 1:458): Kategorien links, Logo      */
/* zentriert, Suche+Warenkorb rechts – als Flex-Geschwister in derselben   */
/* {navbar} (siehe layout-header-category-nav-Override in header.tpl).    */
/* ---------------------------------------------------------------------- */
.amewo-header-row {
  justify-content: space-between !important;
  flex-wrap: nowrap;
}
/* mainNavigation (Kategorien) und shop-nav (Icons) bekommen GLEICHES flex-grow,
   damit das Logo unabhängig davon, wie breit/leer die Kategorien-Liste gerade
   ist (aktuell 0 Einträge, siehe Task "Logo-Asset/Navigation"), immer exakt
   mittig sitzt - nicht nur per justify-content:space-between, das bei ungleich
   breiten Geschwistern eine Verschiebung verursacht. */
/* Linke Gruppe: Suche + Kategorien (Wrapper aus header.tpl). Sie ist das
   Gegenstück zu #shop-nav rechts - beide mit gleichem flex-grow, damit das
   Logo dazwischen exakt mittig bleibt. */
.amewo-header-left {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
}
@media (min-width: 992px) {
  .amewo-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
  }
}
/* Suche behält ihre Eigenbreite, die Kategorien füllen den Rest. */
.amewo-header-left #search {
  flex: 0 0 auto;
}
.amewo-header-row #mainNavigation {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
.amewo-header-row .toggler-logo-wrapper {
  order: 2;
  flex: 0 0 auto;
  float: none;
}
.amewo-header-row #shop-nav {
  order: 3;
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------- */
/* Suchfeld in der Hauptzeile: Figma (Node 1:430, Sub-Node 142:315 "Suche")*/
/* zeigt im Ruhezustand NUR eine geschlossene Pille - Icon (24px) + Label  */
/* "Suche" (Inter SemiBold 14px, #6b6b6b), Höhe 36px, Border 1px #6b6b6b,  */
/* rounded-full. Das eigentliche Eingabefeld ist in der Vorlage gar nicht  */
/* sichtbar. Wir bilden das per Klick-zum-Öffnen nach (Trigger-Button aus  */
/* header.tpl-Script), damit das echte NOVA-Suchfeld inkl. Autocomplete /  */
/* Typeahead funktional unverändert bleibt.                               */
/* ---------------------------------------------------------------------- */
/* Suchfeld: immer sichtbar, waechst bei Fokus.
   Vorher ersetzte ein Skript das Feld durch eine Pillen-Schaltflaeche und
   blendete das echte Feld erst beim Klick ein. Das sprang: #search ging von
   97px auf 285px Breite und von 36px auf 47px Hoehe, die Kategorienleiste
   rutschte dabei um 188px nach rechts (gemessen). Deshalb jetzt:
   - #search bekommt FESTEN Platz (320px). Der bleibt reserviert, egal ob das
     Feld schmal oder breit ist - dadurch bewegt sich die Kategorienleiste nie.
   - Das Feld selbst ist im Ruhezustand 140px schmal (Pillen-Optik aus dem
     Entwurf, Node 142:315) und waechst bei Fokus weich auf die vollen 320px.
   Die Autocomplete von NOVA bleibt unberuehrt; es wird nur die Breite
   animiert, nichts ein- oder ausgeblendet. */
/* Der Platz entspricht der SCHMALEN Pille (140px). Waeren es die vollen
   320px, stuenden im Ruhezustand 180px Leerraum zwischen Suche und
   Kategorien - genau das ist aufgefallen.
   Damit trotzdem nichts springt, ist das Feld absolut gesetzt: Es waechst
   beim Tippen ueber den Anfang der Kategorienleiste, statt sie zu schieben.
   Die feste Hoehe muss dabei an #search, weil ein absolut gesetztes Kind
   keine Hoehe mehr beisteuert und die Zeile sonst zusammenfiele. */
.amewo-header-left #search {
  position: relative;
  /* Muss zur Ruhebreite der Pille passen (siehe unten), sonst entsteht wieder
     Leerraum zwischen Suche und Kategorien. */
  flex: 0 0 112px;
  height: 36px;
}
#search .search-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  /* 108px statt frueher 140px: GEMESSEN sass der Text "Suchen" 14px hinter
     dem linken Pillenrand, hatte rechts aber 48px Luft - die Pille wirkte
     dadurch nach rechts ausgefranst. Rechnung: Lupe (34px) + 6px + Textbreite
     (50px) + 14px Rand = 104px Innenbreite, plus die 2x1px Rahmen = 106px.
     Auf Wunsch etwas grosszuegiger: 112px, das ergibt rechts rund 20px statt
     der 14px links - optisch angenehmer als die exakte Symmetrie, weil das
     Wort rechts frei endet, links aber ein Symbol steht. Wird der Platzhalter laenger (andere Sprache), hier nachziehen -
     der Text wird sonst abgeschnitten. */
  width: 112px;
  transform: translateY(-50%);
  transition: width .25s ease;
  /* Ueber der Navigation, sonst liegt die aufgeklappte Suche dahinter. */
  z-index: 20;
}
/* focus-within statt :focus: Der Fokus liegt auf dem <input> INNERHALB des
   Wrappers, und bei aktiver Autocomplete auch mal auf dem Vorschlagsfeld. */
#search .search-wrapper:focus-within {
  width: 320px;
}
#search .search-wrapper form,
#search .search-wrapper .form-icon {
  width: 100%;
}
/* Pillen-Optik wie im Entwurf: EIN Rahmen um Feld und Lupe, innen randlos. */
#search .input-group {
  height: 36px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-pill);
}
#search .input-group:focus-within {
  border-color: var(--color-action-hover);
}
/* Das Feld muss MITWACHSEN, nicht die ganze Breite beanspruchen: NOVA legt
   es in einen `.twitter-typeahead`-Wrapper (inline-block, feste Breite). Mit
   width:100% schob er die Lupe aus der Pille - bei `overflow: hidden` war sie
   schlicht weg. */
#search .input-group {
  align-items: center;
}
#search .input-group .twitter-typeahead {
  /* Basis 0, nicht auto: Mit `auto` leitet der Browser die Ausgangsbreite aus
     dem Inhalt ab - beim Typeahead ist das die volle Feldbreite, und die Lupe
     wurde aus der Pille gedraengt (gemessen: Feld 138px in einer 138px
     breiten Gruppe, Lupe ausserhalb). Mit Basis 0 teilt sich der Platz
     sauber: Lupe nach Bedarf, Feld den Rest. */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
/* Lupe VOR das Feld: Der Entwurf (Node 142:315) zeigt Symbol links, Text
   rechts daneben. Im Markup steht der Submit-Button hinter dem Feld, deshalb
   hier per order umgestellt statt das Markup zu aendern - so bleibt es ein
   echter Submit-Button und die Suche funktioniert ohne JavaScript. */
#search .input-group-append {
  order: -1;
  flex: 0 0 auto;
  /* Bootstrap zieht die Gruppe mit -1px zusammen, damit sich die Rahmen von
     Feld und Button ueberlagern. Hier gibt es nur EINEN Rahmen (an der
     Gruppe), der Versatz schob die Lupe 2px ueber die runde Kante hinaus. */
  margin: 0;
}
#search .input-group input.ac_input {
  width: 100%;
  height: 34px;
  padding: 0 14px 0 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
}
#search .input-group input.ac_input::placeholder {
  color: var(--color-text-muted);
  font-weight: 600;
}
#search .input-group-append .btn,
#search button[type="submit"] {
  height: 34px;
  padding: 0 6px 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-text-muted);
}
#search .input-group-append .btn:hover,
#search button[type="submit"]:hover {
  color: #2E6FB8;
}
#search .search-wrapper {
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  overflow: hidden;
}
#search .form-icon .input-group {
  border: none;
  background: transparent;
}
#search input.ac_input {
  border: none;
  background: transparent;
  box-shadow: none;
  height: 38px;
  font-size: 14px;
  padding-left: 16px;
}
#search .input-group-append .btn,
#search button[type="submit"] {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  box-shadow: none;
}

/* --- Suche im Handy-Kopf ------------------------------------------------ */
/* Eigener Aufbau: Unterhalb von lg rendert NOVA eine zweite Suche
   (.search-form-wrapper-fixed, d-lg-none) - Feld und daneben ein
   btn-secondary. Der war ein 64x47-Rechteck ohne Rundung, 4px hoeher als das
   43px hohe Feld und damit sichtbar aus der Achse (Rueckmeldung: "Lupe nicht
   mittig und in diesem Kasten - da waere rund besser").
   Jetzt ein Kreis in derselben Hoehe wie das Feld, 8px daneben, Symbol exakt
   mittig (gemessen: Versatz 0/0, gleiche Mittelachse wie das Feld).

   DREI STOLPERSTELLEN, alle gemessen:
   1. Die 43px stehen fest und sind die Hoehe des Feldes. `aspect-ratio` am
      Knopf oder am Wrapper fuehrte NICHT zum Quadrat: Der Wrapper schrumpfte
      auf seine Inhaltsbreite (16px) und der Knopf ragte darueber hinaus.
      Aendert sich die Feldhoehe, muss der Wert hier mitgehen.
   2. Das Typeahead-Skript setzt dem Feld eine feste Pixelbreite. Ohne
      `flex: 1 1 0` samt `width: 100% !important` behielt es seine alte Breite,
      und der Kreis schob die Zeile ueber den Bildschirmrand hinaus
      (gemessen: Dokument 386px breit bei 375px Fenster).
   3. Bootstrap nullt in einer Eingabegruppe die rechten Ecken des letzten
      Knopfes ueber Einzelwerte - deshalb stehen sie hier ausdruecklich. */
.search-form-wrapper-fixed .main-search .input-group {
  flex-wrap: nowrap;
  align-items: center;
}
.search-form-wrapper-fixed .main-search .input-group > .twitter-typeahead {
  flex: 1 1 0;
  min-width: 0;
}
.search-form-wrapper-fixed .main-search .input-group > .twitter-typeahead > input {
  width: 100% !important;
}
.search-form-wrapper-fixed .main-search .input-group > .input-group-append {
  flex: 0 0 43px;
  margin-left: 8px;
}
.search-form-wrapper-fixed .main-search .input-group > .input-group-append > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

/* ---------------------------------------------------------------------- */
/* Footer-Feinschliff (Struktur selbst kommt aus 4 Boxen + Newsletter-    */
/* Einstellung im Backend – siehe README). Hier nur Optik, die über die   */
/* Boxen-Standardausgabe hinausgeht.                                     */
/* ---------------------------------------------------------------------- */
#footer-boxes {
  background: linear-gradient(170deg, #FAFAFA 0%, #F8F8F8 33%, #F5F5F5 67%, #F3F3F3 100%);
}
/* Footer über die volle Fensterbreite: NOVA legt den kompletten Footer-Inhalt
   in einen boxed .container (max. 1250px), im Figma laufen Newsletter-Box und
   Footer-Spalten dagegen über die gesamte Breite. Statt den großen
   'layout-footer-content'-Block zu überschreiben (der bei NOVA-Updates
   auseinanderlaufen würde) heben wir hier nur die Breitenbegrenzung auf.
   Ein Seitenabstand bleibt, damit der Text nicht am Bildschirmrand klebt. */
/* Weiße Grundfläche für den Footer: NOVA lässt ihn transparent, dadurch
   scheint der graue Body-Hintergrund (#f5f7fa) durch - sichtbar als grauer
   Streifen über der Newsletter-Box und hinter deren abgerundeten Ecken. */
#footer {
  background: #FFFFFF;
  /* NOVA gibt dem Footer 64px Innenabstand oben. Zusammen mit den 60px, die
     unterhalb der Trust-Texte aus Row- und Card-Body-Padding entstehen, ergab
     das 124px unter der Leiste gegenüber 76px darüber - sichtbar unsymmetrisch.
     16px stellen Gleichstand her (60 + 16 = 76). */
  padding-top: 16px;
}

/* Startseite (PAGE_STARTSEITE = 18, ausgegeben als body[data-page]):
   Der eigentliche #content ist dort LEER - sämtliche Inhalte liegen im
   OPC-Bereich darüber. NOVA reserviert für diesen leeren Block trotzdem
   4rem oben (#content-wrapper) und 3rem unten (#content), zusammen ~112px
   leere Fläche zwischen Trust-Leiste und Footer. Auf allen anderen Seiten
   bleiben die Abstände unangetastet, da #content dort echten Inhalt hat. */
body[data-page="18"] #content-wrapper:not(.has-fluid) {
  padding-top: 0;
}
body[data-page="18"] #content {
  padding-bottom: 0;
}
#footer > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* Die Footer-Boxen (Linklisten) bekommen den Seitenabstand einzeln zurück -
   nur die Newsletter-Box läuft laut Figma randlos bis an die Kanten. */
#footer-boxes {
  position: relative;
  overflow: hidden;
  /* Innenabstand unten, weil sonst der Widerruf-Button (letzte Spalte) direkt
     an der Unterkante des grauen Bereichs klebt - gemessen waren es 0px. */
  padding: 56px 2rem 56px;
  /* Bootstrap gibt jeder .row -15px Seitenmargin, was normalerweise vom
     15px-Padding des Containers ausgeglichen wird. Da der Footer-Container
     hier padding 0 hat, ragte die Reihe 15px über den Viewport hinaus - das
     erzeugte einen horizontalen Scrollbalken und den leeren Streifen am
     Seitenende. */
  margin-left: 0;
  margin-right: 0;
}
/* NOVAs eigener Preishinweis unterhalb der Boxen entfällt - er steht dort auf
   weißem Grund. Stattdessen rendert der Template-Override ihn INNERHALB der
   Boxen-Reihe (.amewo-footer-vat), also auf der grauen Fläche mit Muster. */
#footer > .container > .footnote-vat {
  display: none;
}
.amewo-footer-vat {
  margin-top: 32px;
  font-size: 12px;
  color: var(--color-text-muted);
}
/* Copyright-Leiste: NOVA liefert sie dunkelgrau mit hellem Text, der Entwurf
   zeigt eine weiße Fläche mit zentriertem, grauem Text. Der JTL-Hinweis
   bleibt erhalten (Brandfree-Lizenz), fügt sich nun aber ruhig ein. */
#copyright {
  background: #FFFFFF;
  color: var(--color-text-muted);
  margin-top: 0;
  padding: 18px 2rem;
  font-size: 12px;
}
/* !important ist hier nötig: NOVA gibt dem JTL-Link die Bootstrap-Klasse
   .text-white, und die ist selbst mit !important definiert - ohne Gegenwehr
   stünde weißer Text auf der jetzt weißen Leiste. */
#copyright a,
#copyright .text-white,
#copyright #system-credits {
  color: var(--color-text-muted) !important;
}
#copyright a:hover {
  color: var(--color-link-hover) !important;
}
/* Agenturname im Fußzeilenhinweis farbig hervorgehoben und verlinkt (Figma
   Node 1:425). Figma nutzt dort #B4D6FF; bei 12px Text auf Weiß wäre das kaum
   lesbar, daher derselbe Blauton etwas dunkler abgestimmt wie beim
   Newsletter-Button.
   Der Selektor muss #copyright mit einschließen und !important tragen, weil
   die Regel für #copyright a (gegen das weiße .text-white von Bootstrap)
   sonst gewinnt und den Link ebenfalls grau färben würde. */
#copyright a.amewo-credit-brand,
.amewo-credit-brand {
  color: #6BA7E8 !important;
  text-decoration: none;
}
#copyright a.amewo-credit-brand:hover,
.amewo-credit-brand:hover {
  color: #4A8FD4 !important;
  text-decoration: underline;
}
/* Picto-Muster im Footer-Hintergrund (Figma Node 119:741). Dort liegt es mit
   50% Deckkraft über die volle Breite; die Grafik ist deutlich höher als der
   Footer, es ist also bewusst nur der obere Ausschnitt zu sehen
   (background-size: 100% auto + position top). Als ::before statt als
   background-image direkt, weil sonst die Deckkraft nicht getrennt vom Inhalt
   steuerbar wäre. */
#footer-boxes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/footer-pattern.png") no-repeat top center;
  background-size: 100% auto;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
/* Inhalt über das Muster heben */
#footer-boxes > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------- */
/* Footer-Spalten (Figma Node 1:370): links Logo/Firmierung/Kontakt, daneben */
/* die vier Linkgruppen-Boxen. Markup siehe layout/footer.tpl-Override.     */
/* Die Boxen selbst rendert NOVA als .box-linkgroup mit                     */
/* .productlist-filter-headline als Überschrift und .nav-link als Einträge. */
/* ---------------------------------------------------------------------- */
.amewo-footer-brand {
  padding-top: 8px;
}
/* Unterhalb von xl ist die Spalte volle Breite und stapelt über den
   Linkgruppen. Der einzige Abstand kam dann vom margin-bottom der letzten
   Kontaktzeile (10px) - zu wenig, die Menüpunkte klebten an der Anschrift. */
@media (max-width: 1199.98px) {
  .amewo-footer-brand {
    margin-bottom: 32px;
  }
}
/* Auf dem Tablet gilt seit 1.0.321 dasselbe Muster wie darunter: Markenblock
   über die volle Breite, darunter vier gleich breite Linkspalten.
   GRUND: Mit NOVAs lg-Aufteilung (Marke 4/12, Linkgruppen je 2/12) blieben bei
   1024px nur 125px Inhaltsbreite je Spalte - zu wenig für die längsten
   Einträge. "Batteriegesetzhinweise" ist 151px breit und ragte damit 26px aus
   seiner Spalte heraus, direkt in den Außenabstand des Footers: rechts blieben
   23px statt der 32px, die links stehen (Rückmeldung des Nutzers "unten rechts
   fehlt etwas Abstand", sichtbar an "Vertrag widerrufen").
   Vier Spalten zu 25 % ergeben 236px - alle Einträge passen einzeilig hinein,
   der Abstand nach rechts stimmt wieder. Ab 1200px bleibt NOVAs Aufteilung.
   Gemessen bei 1024px: Text endet bei 907 statt 986, Footerkante 1009. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #footer .row > .amewo-footer-brand {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #footer .row > .col-lg-2 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
/* Die Logodatei (bilder/intern/shoplogo/amewo_logo.svg, 199x62) bringt rundum
   Leerraum mit: links 13px, oben ~18px bei Anzeigegröße. Dadurch wirkte das
   Logo gegenüber "by Accessory-Tech GmbH" darunter eingerückt. Der negative
   Margin zieht die sichtbare Logokante auf dieselbe Flucht wie den Text.
   Bei einem Logowechsel im Backend diesen Wert prüfen - er hängt am Leerraum
   der jeweiligen Datei. */
/* Der frueher hier stehende `margin-left: -13px` ist WEG. Er glich den
   Leerraum aus, den die alte Logodatei eingebaut hatte (200x62 Kasten,
   sichtbare Schrift darin nur 175x29, 13px Rand links). Die neue Datei ist
   eng beschnitten - mit dem Negativabstand stand das Logo 13px links neben
   der Firmierung darunter (gemessen: Logo bei x=35, Text bei x=48). */
.amewo-footer-logo img {
  /* Ganzzahliger Kasten. Mit width:186 + height:auto ergaeben sich 29,97px
     Hoehe; auf halben Pixeln wird die Antialiasing-Kante unruhig, was als
     "verpixelt" auffaellt. 186 x 30 weicht vom echten Verhaeltnis (6,2114)
     um 0,18 % ab - unsichtbar - und liegt dafuer auf vollen Pixeln. */
  width: 186px;
  height: 30px;
  max-width: 100%;
}
.amewo-footer-company {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-muted);
  margin: 20px 0 12px;
}
.amewo-footer-contact {
  margin: 0;
}
.amewo-footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.amewo-footer-contact i {
  width: 16px;
  text-align: center;
  flex: 0 0 auto;
}
.amewo-footer-contact a {
  color: inherit;
  text-decoration: none;
}
/* E-Mail laut Entwurf fett (Figma Node 104:180). Angezeigt wird die
   (at)-Schreibweise, verlinkt ist die echte Adresse. */
.amewo-footer-mail {
  font-weight: 700;
}
/* Diese Regel allein reicht NICHT: clear.css setzt den Hover im Fußbereich
   über `#footer a:not(.btn):hover`, und eine ID schlägt jede Klassenkette.
   Der wirksame Gegenpart steht deshalb im Abschnitt "Fußzeile: die Regeln
   mit #footer" weiter unten. Hier stehen bleiben darf sie: Sie greift,
   falls das Markup einmal außerhalb von #footer landet, und hat denselben
   Wert - auseinanderlaufen können die beiden also nicht. */
.amewo-footer-contact a:hover {
  color: var(--color-link-hover);
}
/* Spaltenüberschriften der Linkgruppen.
   Inter SemiBold 14px / 20px, Zeichenabstand -0,15px (Vorgabe). */
#footer-boxes .box-linkgroup .productlist-filter-headline {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.15px;
  color: #1B1B1B;
  margin-bottom: 16px;
  padding: 0;
  border: none;
}
/* Menüeinträge: gleiche Maße, nur Regular statt SemiBold (Vorgabe). */
#footer-boxes .box-linkgroup .nav-link {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.15px;
  color: var(--color-text-muted);
  padding: 0;
  /* 6px statt 10px - der Nutzer wollte die Unterpunkte enger. */
  margin-bottom: 6px;
}
#footer-boxes .box-linkgroup .nav-link:hover {
  color: var(--color-link-hover);
}
/* Widerruf-Button sitzt laut Entwurf unter "Rechtliches" - NOVA gibt ihm
   btn-block (volle Breite), das passt in der schmalen Spalte nicht. */
#footer-boxes .withdrawal-link {
  display: inline-flex;
  width: auto;
  border-radius: 14px;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  white-space: nowrap;
  /* Weiße Schrift wie bei allen anderen Primary-Buttons. Bootstrap wählt die
     Textfarbe sonst automatisch nach Helligkeit des Hintergrunds (color-yiq)
     und landet bei dem hellen Rot #F46060 auf dunklem Text. */
  color: #FFFFFF;
}
#footer-boxes .withdrawal-link:hover,
#footer-boxes .withdrawal-link:focus,
#footer-boxes .withdrawal-link:active {
  color: #FFFFFF;
}

/* Newsletter-Box im Footer. Das Markup kommt komplett aus NOVA
   (layout/footer.tpl, Block 'layout-footer-newsletter') und erscheint nur,
   wenn BEIDE Schalter stehen: Template-Einstellungen -> Footer ->
   "Newsletter-Anmeldung im Footer" = Ja UND Einstellungen -> Newsletter
   shopweit aktiv. Hier nur die Optik nach Figma (Node 104:144):
   Fläche #B4D6FF, Radius 20, weiße Typo, transparentes Eingabefeld mit
   hellem Rand, weißer Button mit blauer Schrift.
   Hinweis: {row} bringt Bootstrap-Negativmargins mit - die müssen raus,
   sonst ist die Box breiter als der Footer-Container. */
.newsletter-footer {
  background: var(--color-secondary);
  border-radius: 20px;
  color: #FFFFFF;
  padding: 40px;
  /* Kein eigener Versatz mehr - der Ausgleich für #content passiert oben am
     #footer, sonst würde er doppelt greifen. Der <hr> hinter der Box ist im
     Template-Override entfernt. */
  margin: 0;
}
/* NOVA schiebt die Footer-Boxen bei aktiver Newsletter-Box um 4rem nach
   unten. Im Entwurf schließt die graue Fläche direkt an die Newsletter-Box an,
   ohne weißen Streifen dazwischen - der Abstand entsteht dort über das
   padding-top der grauen Fläche selbst. */
#footer.newsletter-active #footer-boxes {
  margin-top: 0;
}
/* Ausnahme von der shopweiten Überschriften-Schrift: Laut Vorgabe steht die
   Newsletter-Überschrift in Inter, nicht in Plus Jakarta Sans. */
.newsletter-footer .newsletter-footer-heading {
  color: #FFFFFF;
  font-family: var(--font-family-base);
}
.newsletter-footer .info {
  color: #FFFFFF;
  font-family: var(--font-family-base);
}
/* Kopfbereich: Icon-Badge + Überschrift + Untertitel nebeneinander
   (Struktur kommt aus dem Override in layout/footer.tpl). */
.newsletter-footer .newsletter-footer-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.newsletter-footer .newsletter-footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .2);
  color: #FFFFFF;
  font-size: 24px;
}
/* Inter Bold 24px / 32px, Zeichenabstand 0,07px (Vorgabe) */
.newsletter-footer .newsletter-footer-heading {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: .07px;
  margin-bottom: 8px;
}
/* Inter Regular 14px / 20px, Zeichenabstand -0,15px (Vorgabe) */
.newsletter-footer .newsletter-footer-sub {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.15px;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 0;
}
/* Datenschutz-Hinweis als Kleinschrift unter dem Formular (Figma 104:155).
   Inter Regular 12px / 16px, Zeichenabstand 0 (Vorgabe). */
.newsletter-footer .info {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .9);
  margin: 12px 0 0;
}
.newsletter-footer .info a {
  color: #FFFFFF;
  text-decoration: underline;
}
/* Eingabefeld: im Entwurf transparent mit hellem Rand, weiße Schrift */
.newsletter-footer input[type="email"],
.newsletter-footer .form-control {
  height: 52px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF;
  /* Inter Regular 16px, Zeilenhöhe 100%, Zeichenabstand -0,31px (Vorgabe).
     Gilt für Platzhalter und eingegebenen Text gleichermaßen - der
     Platzhalter erbt die Schriftangaben vom Eingabefeld. */
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -.31px;
  padding: 12px 16px;
  box-shadow: none;
}
.newsletter-footer input[type="email"]::placeholder,
.newsletter-footer .form-control::placeholder {
  color: rgba(255, 255, 255, .6);
}
.newsletter-footer input[type="email"]:focus,
.newsletter-footer .form-control:focus {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .15);
  color: #FFFFFF;
  box-shadow: none;
}
/* Button: weiß mit blauer Schrift, feste Breite 163px (Figma 104:148).
   #6BA7E8 statt des reinen Figma-Werts #B4D6FF: Letzterer ergibt auf weißem
   Grund nur ~1.5:1 Kontrast und ist praktisch unlesbar (WCAG fordert 4.5:1).
   Gleicher Blauton, nur dunkler abgestimmt. */
.newsletter-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  min-width: 163px;
  border: none;
  border-radius: 14px;
  background: #FFFFFF;
  color: #6BA7E8;
  /* Inter SemiBold 16px / 24px, Zeichenabstand -0,31px (Vorgabe) */
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.31px;
  padding: 12px 24px;
  box-shadow: 0 10px 7.5px rgba(0, 0, 0, .1), 0 4px 3px rgba(0, 0, 0, .1);
}
.newsletter-footer .btn:hover,
.newsletter-footer .btn:focus {
  background: #F5F5F5;
  color: #4A8FD4;
}
/* Eingabefeld und Button sind im Figma zwei getrennte Elemente mit 8px
   Abstand. Bootstraps .input-group klebt sie dagegen zusammen (negative
   Margins, abgeflachte Ecken an der Nahtstelle) - beides hier aufgehoben. */
.newsletter-footer .input-group {
  border: none;
  background: transparent;
  gap: 8px;
}
.newsletter-footer .input-group > .form-control,
.newsletter-footer .input-group > .form-control:not(:last-child) {
  margin: 0;
  border-radius: 14px;
}
.newsletter-footer .input-group-append {
  margin: 0;
}
.newsletter-footer .input-group-append .btn {
  border-radius: 14px;
}
@media (max-width: 767px) {
  .newsletter-footer {
    padding: 24px 20px;
  }
  .newsletter-footer .newsletter-footer-heading {
    font-size: 20px;
  }
  .newsletter-footer .newsletter-footer-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  /* Auf dem Handy steht das Brief-Symbol ueber dem Text statt daneben
     (Wunsch des Nutzers). Grund: Hier ist der Text mittig gesetzt, waehrend
     das Symbol links davor stand - dadurch sass die Ueberschrift sichtbar aus
     der Mitte (gemessen bei 375px: Symbol bei x=36, Textspalte ab x=96, also
     nur 243 von 303px breit). Ab 768px bleibt die Zeile nebeneinander, dort
     ist der Text linksbuendig und die Anordnung stimmt. */
  .newsletter-footer .newsletter-footer-head {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* ---------------------------------------------------------------------- */
/* Fußzeile: die Regeln mit #footer schlagen alles ohne ID                  */
/*                                                                        */
/* clear.css setzt für den gesamten Fußbereich:                            */
/*                                                                        */
/*   #footer a:not(.btn),                                                  */
/*   #footer .productlist-filter-headline,                                 */
/*   #footer .newsletter-footer-heading,                                   */
/*   #footer .btn-outline-primary   { color: #525252 }                     */
/*   #footer a:not(.btn):hover      { color: <primary> }                   */
/*                                                                        */
/* Eine ID schlägt beliebig viele Klassen. Die Newsletter-Überschrift wird */
/* deshalb dunkelgrau ausgegeben, obwohl .newsletter-footer                */
/* .newsletter-footer-heading sie ausdrücklich auf Weiß setzt - sie steht  */
/* damit in #525252 auf hellblauer Fläche statt in Weiß wie im Entwurf.    */
/* Dasselbe trifft den Datenschutz-Link unter dem Formular und die         */
/* Kontaktzeilen: deren Regeln in dieser Datei kamen nie an.               */
/*                                                                        */
/* Gegengehalten wird deshalb mit derselben Selektorform (#footer davor)   */
/* und NICHT mit !important - die Spezifität reicht, sobald die ID mit im  */
/* Selektor steht. Wer hier eine Farbe im Fußbereich ändert und sich       */
/* wundert, warum nichts passiert: zuerst prüfen, ob die Regel ein         */
/* #footer braucht.                                                        */
/* ---------------------------------------------------------------------- */
#footer .newsletter-footer .newsletter-footer-heading {
  color: #FFFFFF;
}
#footer .newsletter-footer .info,
#footer .newsletter-footer .info a {
  color: #FFFFFF;
}
#footer .newsletter-footer .info a:hover,
#footer .newsletter-footer .info a:focus {
  color: #FFFFFF;
  text-decoration: underline;
}
/* Der Absende-Button ist ein <button>, greift also ohnehin nicht in
   `#footer a:not(.btn)`. Er steht hier nur zur Erinnerung: weiße Fläche mit
   blauer Schrift ist der Figma-Wert (Node 104:148), NICHT weiße Schrift -
   die wäre auf Weiß unsichtbar. */

/* Kontaktzeilen und Fußzeilen-Links: Hover in Blau statt in der
   Primärfarbe. Ohne das #footer davor gewinnt weiterhin
   `#footer a:not(.btn):hover`. */
#footer .amewo-footer-contact a {
  color: inherit;
}
#footer .amewo-footer-contact a:hover,
#footer a:not(.btn):hover,
#footer a:not(.btn):focus {
  color: var(--color-link-hover);
}

/* ---------------------------------------------------------------------- */
/* Checkout: B2B-Hinweisbanner (Rechnungsadress-Formular, isB2BCheckout) */
/* ---------------------------------------------------------------------- */
.amewo-b2b-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-secondary-bg);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.amewo-b2b-banner i {
  color: var(--color-primary);
  margin-top: 2px;
}
.amewo-b2b-banner-warning {
  background: #FFF3CD;
  color: #6B5900;
}
.amewo-b2b-banner-warning i {
  color: #B38600;
}

/* ---------------------------------------------------------------------- */
/* Produktliste: Karten-Feinschliff nach Figma (Radius/Hover/Typografie) */
/* ---------------------------------------------------------------------- */
.productlist .productbox {
  background: #FFFFFF;
  /* Ohne Rahmen (Wunsch des Nutzers) - wie die Kacheln der Galerieansicht. */
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.productlist .productbox:hover {
  box-shadow: 0 8px 24px rgba(27, 27, 27, 0.08);
  transform: translateY(-2px);
}
.productlist .productbox .productbox-image img {
  border-radius: 16px;
}
/* Hinweis: Wirkt der Weißraum um Produktbilder zu groß, hat das ZWEI
   mögliche Ursachen - erst beide prüfen, bevor jemand an den Fotos arbeitet.
   1. Die Fotos selbst: case-clear-...jpg ist 600x600px, das Produkt darin nur
      226x292px (49% der Höhe, 38% der Breite). Dagegen hilft nur engeres
      Freistellen in der Wawi, kein CSS.
   2. Das Bild füllt seinen Rahmen nicht. Das war bis 1.0.333 in der
      einspaltigen Ansicht so: NOVAs `sizes`-Angabe geht dort von halber
      Fensterbreite aus, obwohl die Kachel fast das ganze Fenster einnimmt -
      gemessen bei 496px: Rahmen 432px, Bild 248px. Behoben über width/height
      100% weiter unten (Block "Produktbild"). */
.productlist .productbox .productbox-title,
.productlist .productbox .productbox-title a {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #1B1B1B;
  text-decoration: none;
}
/* Preis: Figma (Node 133:777) zeigt den Preis dunkel #1B1B1B, Inter Bold 24px –
   NICHT in Primary-Rot. Rot ist im Entwurf den CTAs/Badges vorbehalten. */
.productlist .productbox .price {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;
  color: #1B1B1B;
}
.productlist .productbox-quick-actions .btn {
  border-radius: var(--radius-pill);
}
/* Status-Badges (Lagerstatus/Aktion) an die runde Bildsprache angleichen –
   NOVA rendert sie standardmäßig eckig. */
.productlist .productbox .badge,
.productlist .productbox .productbox-badges .badge {
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-weight: 600;
}

/* ====================================================================== */
/* ARTIKELDETAILSEITE (Figma-Entwurf "Produktdetail")                      */
/*                                                                        */
/* Gescopet auf body[data-page="1"] (PAGE_ARTIKEL, siehe                   */
/* includes/defines_inc.php:404). Damit bleiben Kategorie-, Konto- und     */
/* Checkout-Seiten unberührt, auch wenn sie dieselben NOVA-Klassen nutzen. */
/*                                                                        */
/* MASSE: Aus dem Entwurfs-Screenshot proportional hochgerechnet. Bekannte */
/* Größe ist wie im übrigen Projekt die Inhaltsbreite 2030px; im Screenshot */
/* misst sie 993px, der Faktor ist also rund 2,04. Gegenprobe an der        */
/* Produktzeile: Galerie 435px + Lücke 20px + Kaufspalte 535px = 990px im   */
/* Bild, hochgerechnet 889 + 41 + 1094 = 2024px ≈ 2030px.                   */
/* Die Spaltenbreiten stehen deshalb unten als Verhältnis 889fr : 1094fr    */
/* und nicht in absoluten Pixeln - so stimmt das Verhältnis unabhängig      */
/* davon, ob der Shop 2030px oder weniger Inhaltsbreite ausspielt.          */
/* Schriftgrößen sind an die bereits abgeglichene Figma-Tabelle in          */
/* AGENTS.md angelehnt; sie sind der unsicherste Teil und der erste         */
/* Kandidat für eine Gegenprüfung im Figma-Inspector.                       */
/* ====================================================================== */

/* --- Inhaltsbreite ----------------------------------------------------- */
/* Der Entwurf zeigt die Seite über die volle Breite. NOVA steckt sowohl den
   Brotkrümelbereich als auch den Produktinhalt in einen Bootstrap-.container,
   der bei xl auf 1140px begrenzt ist - auf einem 1920er Monitor also gut
   700px schmaler als Footer und Referenzen. Deshalb hier dieselbe
   Konvention wie bei Referenzen, FAQ, Kontakt und Textseiten (siehe
   .amewo-ref-* weiter unten): volle Breite minus 48px Schutzabstand,
   gedeckelt auf die 2030px des Entwurfs.
   Die Innenabstände des Containers fallen weg, weil der Schutzabstand hier
   über die BREITE gelöst ist - sonst käme er doppelt.
   #result-wrapper > .container trifft genau die drei Container der
   Artikelseite (Meldungen, Kaufbereich, Abschnitte) und nichts sonst;
   der Zubehörbereich liegt in einem .container-fluid und bringt seine
   Begrenzung selbst mit (.amewo-pd-xsell). */
/* .breadcrumb-container fehlt hier absichtlich: den regelt inzwischen die
   shopweite Regel im Brotkrümel-Abschnitt weiter oben. Zweimal dieselbe
   Breite zu setzen wäre die klassische Stelle, an der später eine der
   beiden angepasst wird und die andere stehen bleibt. */
body[data-page="1"] #result-wrapper > .container {
  width: calc(100% - 48px);
  max-width: 2030px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------------- */
/* Brotkrümel – shopweit, nicht nur auf der Artikelseite                    */
/*                                                                          */
/* Der Entwurf zeigt an dieser Stelle einen schlichten "← Zurück"-Link.     */
/* Eine frühere Fassung hat den Pfad deshalb auf der Artikelseite dadurch   */
/* ERSETZT und auf Kontakt-/Textseiten ganz ausgeblendet. Das ist zurück-   */
/* genommen: Der Pfad bleibt überall stehen, übernimmt aber die ruhige      */
/* Optik jenes Zurück-Links (Inter 14/20, gedämpft, ohne Rahmen).           */
/* ---------------------------------------------------------------------- */
/* Der Pfad sitzt dicht unter dem Header - er wird dafür in
   layout/header.tpl vor den OPC-Bereich gezogen, siehe Begründung dort.
   Die 64px, die vorher über ihm standen, kommen aus NOVAs KRITISCHEM CSS
   (_base_crit.scss: #content-wrapper:not(.has-fluid) → padding-top 4rem ab
   lg) - in clear.css sucht man sie vergeblich.
   Der Wert unten steht bewusst mit derselben schwachen Spezifität wie
   NOVAs Regel (eine ID, eine Klasse) und gewinnt nur, weil amewo.css später
   geladen wird. Damit schlagen die vorhandenen Ausnahmen für Startseite,
   FAQ und Referenzen (body[data-page=…] bzw. body:has(…)) ihn weiterhin -
   die setzen den Wert auf 0 und müssen das auch weiter tun. */
/* Breite: dieselbe Konvention wie bei Referenzen, FAQ, Kontakt, Textseiten
   und der Artikelseite (siehe .amewo-ref-* weiter unten) - volle Breite
   minus 48px Schutzabstand, gedeckelt auf die 2030px des Entwurfs. Sonst
   liefe der Pfad im Bootstrap-Container (bei xl 1140px, mittig) und stünde
   auf breiten Monitoren weit eingerückt über linksbündigem Inhalt.
   Bewusst SHOPWEIT und nicht je Seitentyp: Der Pfad steht auf jeder Seite
   an derselben Stelle, eine Liste von data-page-Ausnahmen wäre hier die
   fehleranfälligere Lösung.
   Bekannte Einschränkung: Konto- und Kassenseiten laufen noch im schmalen
   Bootstrap-Container. Dort ist der Pfad breiter als der Inhalt, bis diese
   Seiten dieselbe Begrenzung bekommen. Der Warenkorb hat sie inzwischen
   (siehe Abschnitt WARENKORB weiter unten). */
.breadcrumb-container {
  width: calc(100% - 48px);
  max-width: 2030px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 16px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
/* Auf Startseite, Kasse und Bestellstatus gibt NOVAs breadcrumb.tpl nichts
   aus - der Container aus header.tpl steht aber trotzdem da und hinterließ
   mit seinen 16px eine sichtbare Lücke zwischen Header und Inhalt (auf der
   Startseite über dem Video).
   Bewusst über :has und NICHT über eine Kopie von NOVAs {if}-Bedingung im
   Template: Die Regel greift, sobald kein Pfad gerendert wurde - egal aus
   welchem Grund. Ändert NOVA die Bedingung, stimmt das hier weiterhin.
   :empty scheitert, weil zwischen den Tags Leerraum und das Skript aus
   layout/breadcrumb.tpl stehen. */
.breadcrumb-container:not(:has(.breadcrumb-wrapper)) {
  display: none;
}
#content-wrapper:not(.has-fluid) {
  padding-top: 24px;
}
/* NOVA rahmt den Pfad ab 992px oben und unten mit je 1px #ebebeb ein
   (.breadcrumb-wrapper, border-width: 1px 0). Im Entwurf steht der Pfad
   frei. amewo.css wird nach clear.css geladen, deshalb genügt gleiche
   Spezifität - kein !important nötig. */
.breadcrumb-wrapper {
  border-width: 0;
}
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item > a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumb .breadcrumb-item > a:hover,
.breadcrumb .breadcrumb-item > a:focus {
  color: #1B1B1B;
  text-decoration: none;
}
/* Der letzte Eintrag ist die aktuelle Seite - dunkel, damit der Pfad einen
   Endpunkt hat und nicht als Kette gleichwertiger Links gelesen wird. */
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.active > a {
  color: #1B1B1B;
}
/* "Zurück zur Liste" steht auf Artikelseiten vor dem Pfad, sobald der Kunde
   über eine Produktliste gekommen ist (NOVA, layout/breadcrumb.tpl). NOVA
   setzt dort bereits einen Chevron davor - hier deshalb KEIN zusätzlicher
   Pfeil per ::before (stand früher hier und ergab "‹ ← Zurück"). */

/* --- Produktzeile: EINZELNE Panels, keine durchgehende Karte ----------- */
/* Der Entwurf setzt Galerie, jedes Vorschaubild und die Kaufspalte als
   eigene weiße Fläche ab; dazwischen steht überall der graue Seitengrund.
   Eine erste Fassung hatte alles in EINE weiße Karte gepackt - dabei
   verschwinden genau diese grauen Fugen, und die Seite wirkt als ein Block.
   Deshalb hier: die Zeile selbst bleibt transparent, weiß sind nur die
   Panels darin. Gilt für die Abschnitte weiter unten genauso
   (.amewo-pd-card).
   --gap ist bewusst eine Variable: die Fugenbreite taucht an mehreren
   Stellen auf (Spalten, Vorschauleiste, Karten) und muss überall gleich
   sein, sonst franst das Raster aus. */
body[data-page="1"] {
  --amewo-pd-gap: 24px;
}
body[data-page="1"] #product-offer {
  background: transparent;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}
/* Verhältnis 889 : 1094 aus der Messung oben. Erst ab lg - darunter stehen
   die Panels wie bei NOVA untereinander. */
@media (min-width: 992px) {
  body[data-page="1"] #product-offer {
    display: grid;
    grid-template-columns: minmax(0, 889fr) minmax(0, 1094fr);
    column-gap: var(--amewo-pd-gap);
    align-items: start;
  }
  body[data-page="1"] #product-offer > .product-gallery,
  body[data-page="1"] #product-offer > .product-info {
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* Kaufspalte endet bündig mit der Vorschaubildleiste links (Wunsch des
     Nutzers). Dafür streckt sie sich auf die Zeilenhöhe. NOVA gibt der
     Galerie (#image_wrapper) aber 48px Außenabstand nach unten - gestreckt
     stünde der Kasten dann 48px tiefer als die Vorschaubilder. Der Abstand
     wandert deshalb von der Galerie unter die ganze Produktzeile; zum
     nächsten Abschnitt bleibt er gleich. Ist die Kaufspalte höher als die
     Galerie, bestimmt sie die Zeilenhöhe wie bisher. */
  body[data-page="1"] #product-offer {
    margin-bottom: 48px;
  }
  body[data-page="1"] #product-offer > .product-gallery #image_wrapper {
    margin-bottom: 0;
  }
  body[data-page="1"] #product-offer > .product-info {
    align-self: stretch;
  }
}

/* --- Panel 1: Hauptbild ------------------------------------------------- */
body[data-page="1"] #gallery_wrapper {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px;
  overflow: hidden;
}

/* --- Panel 2..n: Vorschaubilder, je Kachel ein eigenes Panel ------------ */
/* WICHTIG: Rahmen, Abstand und Abblendung hängen bei NOVA an `.slick-slide`
   - dem Wrapper, den Slick zur Laufzeit um jede Kachel legt - und NICHT an
   `.square` aus image.tpl. Eine frühere Fassung stylte `.square > .inner`;
   die Regeln kamen dort nie an, sichtbar blieb NOVAs gelb-/rotgerahmte
   Standardkachel. Wer hier etwas ändert: erst im Inspector nachsehen, an
   welchem Element die Regel tatsächlich hängt.
   Auch die Fuge kommt von NOVA (`.carousel-thumbnails .slick-slide`,
   je 0,5rem). Sie bleibt bewusst unangetastet: Slick rechnet die
   Slide-Breiten inline aus, größere Ränder lassen die Spur überlaufen. */
body[data-page="1"] .product-thumbnails .slick-slide {
  background: #FFFFFF;
  /* Rahmen bei ALLEN Kacheln, nur durchsichtig: Nur die aktive faerbt ihn ein
     (siehe unten). Haette allein die aktive Kachel einen Rahmen, schrumpfte
     dort die Innenflaeche um 6px und das Bild sprang beim Umschalten. */
  border: 3px solid transparent;
  border-radius: 16px;
  overflow: hidden;
}
/* Ohne Rahmen (Wunsch des Nutzers). Nur das gerade grosse Bild bleibt
   markiert - sonst ist nicht erkennbar, welche Kachel aktiv ist.
   Als RAHMEN nur an dieser einen Kachel. Zwei Irrwege davor, beide vom
   Nutzer als unsichtbar gemeldet:
   - inset box-shadow liegt UNTER dem weissen Bildkasten der Kachel (nur ein
     schmaler Streifen links war zu sehen),
   - outline mit negativem Versatz war gar nicht sichtbar (Kachel hat
     overflow:hidden).
   Der Rahmen macht die Kachel NICHT groesser: Bootstrap setzt shopweit
   box-sizing:border-box, die von Slick inline gesetzte Breite bleibt also
   gueltig - so war es auch beim urspruenglichen 1px-Rahmen. */
body[data-page="1"] .product-thumbnails .slick-slide.slick-current {
  border-color: var(--color-action-hover);
}
/* NOVA blendet jede nicht ausgewählte Kachel auf 50 % ab. Im Entwurf sind
   alle gleich präsent - abgeblendet liest es sich wie "nicht anklickbar".
   Der Selektor braucht .product-detail, weil NOVAs eigene Regel über vier
   Klassen läuft und sonst gewinnt. */
body[data-page="1"] .product-detail .product-thumbnails .slick-slide:not(.slick-current) {
  opacity: 1;
}
/* Pfeile bleiben funktionsfähig (ab dem 6. Bild), aber zurückgenommen -
   der Entwurf zeigt an dieser Stelle keine. */
body[data-page="1"] .product-thumbnails .slick-arrow {
  border: 0;
  color: var(--color-text-muted);
}
body[data-page="1"] .product-detail-image-preview-bar {
  margin-top: var(--amewo-pd-gap);
  padding-left: 0;
  padding-right: 0;
}
/* Artikel mit nur einem Bild: NOVA gibt die Leiste trotzdem aus, leer (nur
   Leerzeichen - deshalb :has statt :empty). Ohne diese Regel bliebe die
   24px-Fuge stehen, und die gestreckte Kaufspalte endete 24px unter dem
   Hauptbild statt bündig. */
body[data-page="1"] .product-detail-image-preview-bar:not(:has(*)) {
  margin-top: 0;
}

/* --- Panel: Kaufspalte -------------------------------------------------- */
body[data-page="1"] #product-offer > .product-info {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px;
}
/* Unterhalb von lg stehen die Panels untereinander - dann braucht die
   Kaufspalte oben dieselbe Fuge, die im Raster die column-gap liefert. */
@media (max-width: 991.98px) {
  body[data-page="1"] #product-offer > .product-info {
    margin-top: var(--amewo-pd-gap);
  }
}

/* --- Kaufspalte: Kopf --------------------------------------------------- */
/* Figma-Vorgabe: Inter Bold 36/40, Zeichenabstand 0,37px.
   ACHTUNG, dokumentierte Ausnahme: NOVA hängt dem Titel die Klasse .h2 an,
   und die shopweite Regel setzt h1-h6/.h1-.h6 auf Plus Jakarta Sans. Die
   Familie muss hier also ausdrücklich zurück auf Inter - sonst greift die
   Überschriftenregel daneben (dieselbe Falle wie bei der
   Newsletter-Überschrift und den Produktkachel-Titeln). */
body[data-page="1"] .product-info .product-title {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.37px;
  color: #1B1B1B;
  /* Kein eigener Abstand nach unten. Der Abstand zum Preis hängt an
     .product-offer (siehe unten) - nur so stimmt er in BEIDEN Fällen:
     mit Unterzeile (Titel → 8px → Unterzeile → 24px → Preis) und ohne
     (Titel → 24px → Preis). Vorher standen hier 8px, die für den Fall mit
     Unterzeile gedacht waren; bei Artikeln ohne Kurzbeschreibung klebte
     der Preis dadurch am Titel. */
  margin-bottom: 0;
}
/* Artikelnummer, GTIN, Hersteller und Kategorie zeigt der Entwurf nicht.
   Das Markup bleibt trotzdem stehen und wird nur ausgeblendet: dort hängen
   die schema.org-Angaben (itemprop="sku", "gtin13"), die Google für die
   Produkt-Rich-Results ausliest. Ein Entfernen im Template würde die
   strukturierten Daten mit wegnehmen. */
body[data-page="1"] .product-info .info-essential {
  display: none;
}
.amewo-pd-subline {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.45px;
  color: var(--color-text-muted);
  margin-top: 8px;
  margin-bottom: 0;
}
/* Trägt den Abstand zwischen Kopfbereich und Preis - siehe .product-title. */
body[data-page="1"] .product-info .product-offer {
  margin-top: 24px;
}
.amewo-pd-subline p:last-child {
  margin-bottom: 0;
}

/* --- Kaufspalte: Preis -------------------------------------------------- */
/* NOVA hängt dem Preis die Klasse h1 an; die Überschriftenregel weiter oben
   würde ihn damit in Plus Jakarta setzen. Der Entwurf zeigt hier Inter -
   dieselbe Ausnahme wie bei Produktkacheln und Newsletter-Überschrift. */
body[data-page="1"] .product-info .price_wrapper .price {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.37px;
  color: #1B1B1B;
}
body[data-page="1"] .product-info .price-note,
body[data-page="1"] .product-info .vat_info {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
/* Die ganze Verfügbarkeitszeile entfällt auf Wunsch: Lieferstatus,
   Lieferzeit und "Frage zum Artikel". Die Lieferzeit steht seit dem Umbau
   vollständig im zweiten Info-Kästchen unter den Kaufbuttons, inklusive
   Länderhinweis und Popover.

   ABER: Kein display:none auf .stock-information und auch nicht auf die
   <li> darin. Dort steckt <link itemprop="availability">, das Google für
   die Produkt-Rich-Results ausliest. Ausgeblendet werden deshalb gezielt
   nur die sichtbaren Kinder; das <link> bleibt in einem normal gerenderten
   Elternelement stehen.
   Achtung beim Ändern: .delivery-status gibt es ZWEIMAL - als äußerer
   Wrapper um die ganze Liste (darin das <link>) und als innerer Kasten mit
   dem Lieferstatus-Text. Nur der innere darf weg, sonst nimmt man das
   Snippet mit. */
body[data-page="1"] .product-info .stock-information .status,
body[data-page="1"] .product-info .stock-information .delivery-status .delivery-status,
body[data-page="1"] .product-info .estimated-delivery,
body[data-page="1"] .product-info .question-on-item {
  display: none;
}
/* Die leeren <li> würden sonst als Leerzeilen stehenbleiben. */
body[data-page="1"] .product-info .stock-information .delivery-status > ul,
body[data-page="1"] .product-info .stock-information .delivery-status > ul > li {
  margin: 0;
  line-height: 0;
}
/* NOVA rahmt die Verfügbarkeitszeile oben UND unten mit je 1px #ebebeb ein.
   Da der Inhalt hier ausgeblendet ist, blieben zwei Striche dicht
   untereinander stehen. Der Entwurf hat an dieser Stelle genau EINEN
   Trenner - direkt unter dem Steuerhinweis.

   #product-offer im Selektor ist PFLICHT und kein Zufall: Die NOVA-Regel
   steht im eingebetteten kritischen CSS und lautet
   "#product-offer .product-info .stock-information" - also mit ID. Eine
   Gegenregel ohne ID verliert, egal wie viele Klassen man anhängt (ID
   schlägt jede Zahl von Klassen). Ein erster Anlauf mit
   body[data-page="1"] .product-info … blieb deshalb wirkungslos; live
   nachgesehen, nicht geraten. */
body[data-page="1"] #product-offer .product-info .stock-information {
  border: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}
/* Der eine Trenner hängt normalerweise an den Produktmerkmalen (border-top,
   siehe .amewo-pd-features) - so steht er im Entwurf zwischen Steuerhinweis
   und Merkmalsliste. Fehlt die Liste, weil der Artikel keine
   Kurzbeschreibung hat, übernimmt die Verfügbarkeitszeile den Strich.
   Sonst stünde bei solchen Artikeln gar keiner und der Kaufbereich ginge
   ohne Absetzung in den Preis über. */
body[data-page="1"] #product-offer .product-offer:not(:has(.amewo-pd-features)) .stock-information {
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
}

/* --- Kaufspalte: Produktmerkmale --------------------------------------- */
.amewo-pd-features {
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
  padding-top: 24px;
}
.amewo-pd-features-title {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.44px;
  color: #1B1B1B;
  margin-bottom: 12px;
}
.amewo-pd-features ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.amewo-pd-features li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: var(--color-text-muted);
}
/* Häkchen als Font-Awesome-Glyphe statt als Bild: die Liste ist beliebig
   lang und soll ohne weitere Assets auskommen. Blau statt Rot, weil Rot im
   Entwurf den CTAs und Badges vorbehalten ist. */
.amewo-pd-features li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  color: #6BA7E8;
}

/* --- Kaufspalte: Menge und Buttons -------------------------------------- */
/* Abstand über der Mengenwahl: NOVA gibt #add-to-cart bereits margin-top
   2rem mit. Zusammen mit den 24px, die hier ursprünglich am Label standen,
   waren es 56px - der ganze Kaufbereich rutschte dadurch sichtbar nach
   unten. Der Abstand steckt jetzt an EINER Stelle (#add-to-cart), das Label
   selbst bringt keinen mehr mit.
   Nicht mit der Ausrichtung IM Kasten verwechseln: die ist nachgemessen und
   exakt mittig (Zellen 0,0px Abweichung zur Kastenmitte). */
body[data-page="1"] #add-to-cart {
  margin-top: 24px;
}
.amewo-pd-qty-label {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #1B1B1B;
  margin-top: 0;
  margin-bottom: 8px;
}
/* NOVA stellt Mengenfeld und Warenkorbbutton nebeneinander (je col-sm-6).
   Der Entwurf hat ein schmales Mengenfeld und darunter zwei Buttons über
   die volle Breite - deshalb alle Spalten der Zeile auf 100 %. */
body[data-page="1"] .basket-form-inline > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
/* NOVA setzt auf .basket-form-inline text-align:center. Das zentrierte
   dadurch die Beschriftung "Menge:", während das Mengenfeld darunter als
   Flex-Element linksbündig blieb - die beiden standen versetzt. Der Entwurf
   ist durchgehend linksbündig. Die Zahl IM Feld bleibt zentriert, das macht
   NOVA über .form-counter .form-control und passt zum Entwurf. */
body[data-page="1"] .basket-form-inline {
  text-align: left;
}
/* Mengenwahl.
   NOVA gibt ihr (clear.css, .form-counter) drei Eigenschaften mit, die im
   Entwurf anders sind:
     - border-radius 0.125rem (2px), während hier alles andere auf 8px läuft
     - border #707070, ein kräftiges Dunkelgrau statt der ruhigen
       Rahmenfarbe des Entwurfs
     - font-family Montserrat auf der ZAHL und der Einheit
   Der dritte Punkt ist kein Geschmacks-, sondern ein Fehlerfall: Montserrat
   wird in diesem Shop gar nicht ausgeliefert (fonts/ enthält nur Inter und
   Plus Jakarta Sans). Der Browser fällt auf eine beliebige serifenlose
   Systemschrift zurück - die "1" stand also in einer anderen Schrift als
   alles um sie herum. Die shopweite Regel weiter oben (body, input,
   .form-control → Inter) greift dort nicht, weil NOVAs Selektor
   spezifischer ist.
   Die Schriftkorrektur gilt deshalb SHOPWEIT (Warenkorb, Produktkacheln),
   Form und Maße nur auf der Artikelseite - nur dort liegt ein Entwurf vor. */
.form-counter .form-control,
.form-counter .input-group-text {
  font-family: var(--font-family-base);
}

/* Der Entwurf zeigt DREI EINZELNE Kästen - Minus, Zahl, Plus - jeder mit
   eigenem Rahmen und eigener Rundung, dazwischen Luft. Nicht einen
   geteilten Kasten, wie NOVA ihn als .input-group baut.
   Der gemeinsame Rahmen wandert deshalb von der Gruppe auf die drei
   Elemente; die Gruppe selbst wird zum reinen Flex-Behälter mit Lücke. */
body[data-page="1"] .basket-form-inline .form-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin-bottom: 20px;
  border: 0;
  background: transparent;
  overflow: visible;
}
/* Bootstrap schiebt die angehängten Gruppen mit margin-left: -1px unter den
   Nachbarrahmen, damit ein durchgehender Kasten entsteht. Genau das wollen
   wir hier nicht. */
body[data-page="1"] .basket-form-inline .form-counter .input-group-prepend,
body[data-page="1"] .basket-form-inline .form-counter .input-group-append {
  display: flex;
  margin: 0;
}
/* Gemeinsames Aussehen und gemeinsame BREITE der drei Kästen.
   Die Höhe ist ausdrücklich NICHT gemeinsam: Im Entwurf sind alle drei
   gleich breit, aber das Zahlenfeld ist höher als die beiden
   Schaltflächen, die mittig daneben sitzen (die Gruppe hat dafür
   align-items: center). Eine frühere Fassung hatte es andersherum -
   gleiche Höhe, unterschiedliche Breite -, dadurch wirkten Plus und Minus
   zu wuchtig. */
body[data-page="1"] .basket-form-inline .form-counter .btn,
body[data-page="1"] .basket-form-inline .form-counter .form-control {
  flex: 0 0 44px;
  width: 44px;
  /* min-height MUSS zurückgesetzt werden: Die Mengenwahl liegt in
     #add-to-cart.product-buy, und die Regel für die Kaufbuttons weiter
     unten gibt jedem .btn darin min-height: 56px. min-height schlägt
     height - die Zellen wurden dadurch 56px hoch und standen unten aus dem
     Kasten heraus. Auf der Live-Seite gemessen; ein lokaler Nachbau OHNE
     den .product-buy-Wrapper zeigt den Fehler nicht. */
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #FFFFFF;
  box-sizing: border-box;
}
/* Die Zahl: der höchste der drei Kästen. padding raus, damit der Browser
   sie über die volle Zellenhöhe zentriert - bei <input> ist das
   zuverlässiger als line-height. */
body[data-page="1"] .basket-form-inline .form-counter .form-control {
  height: 44px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.45px;
  color: #1B1B1B;
}
/* Die beiden Schaltflächen: gleiche Breite, aber flacher als das
   Zahlenfeld. Werte aus dem Entwurf abgelesen, nicht gemessen - der
   Ausschnitt gibt nur Verhältnisse her. Liegen exakte Figma-Werte vor,
   gehören sie hierher: 44px Breite für alle drei, 44px Höhe Zahlenfeld,
   36px Höhe Schaltflächen, 8px Lücke, Gesamtbreite 148px. */
body[data-page="1"] .basket-form-inline .form-counter .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  line-height: 1;
  color: var(--color-text-muted);
}
body[data-page="1"] .basket-form-inline .form-counter .btn:hover,
body[data-page="1"] .basket-form-inline .form-counter .btn:focus {
  background-color: #F5F7FA;
  border-color: var(--color-secondary);
  color: #1B1B1B;
}
body[data-page="1"] .product-buy .btn {
  min-height: 56px;
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.44px;
}
/* "Jetzt kaufen" – Fläche #B4D6FF wie im Entwurf.
   ABWEICHUNG VOM ENTWURF, bewusst: dort wirkt die Beschriftung weiß. Weiß
   auf #B4D6FF ergibt rund 1,7:1 Kontrast und reißt damit WCAG 1.4.3 (4,5:1)
   deutlich. Bei einem Shop mit Behörden- und Schulkunden ist das kein
   Schönheitsfehler, sondern BITV-relevant. Dunkle Schrift auf derselben
   Fläche liegt bei rund 11:1. Wenn die Beschriftung doch weiß sein soll,
   müsste die Fläche auf etwa #2E6FB8 abdunkeln. */
.amewo-pd-buynow {
  background: var(--color-action);
  border: 1px solid var(--color-action);
  color: var(--color-on-secondary);
  margin-bottom: 12px;
}
.amewo-pd-buynow:hover,
.amewo-pd-buynow:focus {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
}
/* "In den Warenkorb" als ruhigere Zweitstufe: weiß mit blauem Rahmen,
   Beschriftung und Warenkorbsymbol im selben Blau - so der Entwurf.
   Beim Überfahren wandert die Schrift auf das dunklere #6BA7E8: Die Fläche
   wird heller getönt, und ohne diesen Schritt würde die Beschriftung darauf
   noch schwächer stehen als ohnehin. Der Hover-Wert steht hier bewusst fest
   und nicht als --color-action-hover: das ist eine Schriftfarbe auf heller
   Fläche, nicht die Füllfarbe eines Buttons - die beiden dürfen sich
   unabhängig voneinander bewegen. */
body[data-page="1"] .product-buy .btn-primary {
  background: #FFFFFF;
  border: 1px solid var(--color-action);
  color: var(--color-action);
}
body[data-page="1"] .product-buy .btn-primary .fas,
body[data-page="1"] .product-buy .btn-primary .far {
  color: inherit;
}
body[data-page="1"] .product-buy .btn-primary:hover,
body[data-page="1"] .product-buy .btn-primary:focus {
  background: var(--color-secondary-bg);
  border-color: var(--color-action);
  color: #6BA7E8;
}
/* Im Entwurf steht das Warenkorbsymbol VOR der Beschriftung, NOVA setzt es
   dahinter. Umgedreht per row-reverse statt über das Template, weil in
   basket.tpl an derselben Stelle die Erfolgs-Animation (SVG-Häkchen) hängt -
   die soll unangetastet bleiben. */
body[data-page="1"] .product-buy .btn-basket-check {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
}

/* --- Kaufspalte: Mengenrabatt-Hinweis und Info-Kästchen ----------------- */
/* Im Entwurf grau hinterlegt und unter den Buttons, nicht mehr blau über
   dem Preis wie in der ersten Fassung dieser Seite.
   ACHTUNG: .amewo-pd-bulk-hint wird nicht nur auf der Artikelseite benutzt,
   sondern seit 1.0.163 auch am Fuß der Warenkorb-Zusammenfassung
   (basket/index.tpl). Beide sollen gleich aussehen - Änderungen hier
   wirken also auf zwei Seiten. Der "pd"-Namensteil stimmt seitdem nicht
   mehr ganz; umbenennen zöge productdetails/details.tpl mit und ist die
   größere Änderung als der ungenaue Name. */
.amewo-pd-bulk-hint {
  background: #F5F7FA;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 20px;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
/* Nur das Wort "Mengenrabatt:" ist fett, der Rest läuft regulär weiter. */
.amewo-pd-bulk-hint strong {
  font-weight: 700;
  color: #1B1B1B;
}
.amewo-pd-infocards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.amewo-pd-infocard {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Senkrecht mittig: Das Lieferzeit-Kästchen hat eine dritte Zeile
     ("DE - Ausland abweichend"), die anderen beiden nicht. Im Raster werden
     alle drei gleich hoch - ohne das ständen die kürzeren oben statt in der
     Mitte. */
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.amewo-pd-infocard-label {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.amewo-pd-infocard-value {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #1B1B1B;
}
/* Länderhinweis zur Lieferzeit. Bewusst klein und gedämpft: die Aussage des
   Kästchens ist die Lieferzeit, der Hinweis ist die Fußnote dazu. Er öffnet
   dasselbe Popover wie der Hinweis oben im Verfügbarkeitsblock.
   Unterstrichen, weil er anklickbar ist - ohne das ist an einer 11px
   großen, gedämpften Zeile nicht zu erkennen, dass dort etwas passiert. */
.amewo-pd-infocard-note {
  margin-top: 2px;
  font-family: var(--font-family-base);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.amewo-pd-infocard-note:hover,
.amewo-pd-infocard-note:focus {
  color: #1B1B1B;
  text-decoration: underline;
}

/* --- Abschnitte unterhalb des Kaufbereichs ----------------------------- */
/* productdetails/tabs.tpl ersetzt die NOVA-Reiterleiste durch diese Karten. */
.amewo-pd-sections {
  margin-top: var(--amewo-pd-gap);
}
/* Jeder Abschnitt ein eigenes Panel; die graue Fuge dazwischen ist dieselbe
   wie zwischen Galerie und Kaufspalte. */
.amewo-pd-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: var(--amewo-pd-gap);
}
/* Plus Jakarta Sans ExtraBold 30/36, Zeichenabstand 0,4px (Figma-Vorgabe für
   "Technische Spezifikationen"; gilt für alle Abschnittsüberschriften der
   Seite, damit Beschreibung, Downloads und Zubehör dieselbe Stufe haben). */
.amewo-pd-section-title {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0.4px;
  color: #1B1B1B;
  margin: 0 0 24px;
}
.amewo-pd-section-title-upper {
  text-transform: uppercase;
}
.amewo-pd-section-title i {
  color: var(--color-primary);
  margin-right: 10px;
}
.amewo-pd-desc {
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: var(--color-text-muted);
}

/* --- Technische Spezifikationen ---------------------------------------- */
/* Zweispaltiges Raster, zeilenweise gefüllt (links, rechts, links, ...) -
   so steht es im Entwurf. Bei ungerader Zeilenzahl bleibt rechts unten ein
   Platz frei, das ist gewollt. */
.amewo-pd-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  margin: 0;
}
.amewo-pd-spec {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.amewo-pd-spec dt {
  flex: 0 0 45%;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #1B1B1B;
  margin: 0;
}
.amewo-pd-spec dd {
  flex: 1 1 auto;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: var(--color-text-muted);
  margin: 0;
}
/* Merkmalswerte bleiben Links auf die Filterseiten, sehen aber wie
   normaler Text aus - NOVAs blaues Badge passt nicht zum Entwurf. */
.amewo-pd-spec dd a {
  color: inherit;
  text-decoration: none;
}
.amewo-pd-spec dd a:hover {
  color: #6BA7E8;
}

/* --- Downloads ---------------------------------------------------------- */
.amewo-pd-downloads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.amewo-pd-download {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  text-decoration: none;
}
.amewo-pd-download:hover,
.amewo-pd-download:focus {
  border-color: var(--color-secondary);
  text-decoration: none;
}
.amewo-pd-download-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-secondary-bg);
  color: #6BA7E8;
  font-size: 16px;
}
.amewo-pd-download-name {
  font-family: var(--font-family-base);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #1B1B1B;
}

/* --- "Wird oft zusammen gekauft" ---------------------------------------- */
/* Festes Dreierraster statt NOVAs Slick-Slider: der Entwurf zeigt die
   Empfehlungen nebeneinander ohne Pfeile. Mehr als drei Artikel rutschen
   in eine zweite Reihe. */
/* NOVA legt die Empfehlungen in einen {container fluid=true} - der läuft über
   die volle Fensterbreite, die Karten oben stehen aber im normalen Container.
   Gleiche Begrenzung wie bei Referenzen/FAQ, damit die linke Kante mit der
   Produktkarte flüchtet (siehe .amewo-ref-* weiter unten). */
.amewo-pd-xsell {
  width: calc(100% - 48px);
  max-width: 2030px;
  margin-left: auto;
  margin-right: auto;
  /* Kein eigener Abstand nach oben: die Fuge liefert bereits das
     margin-bottom der letzten .amewo-pd-card darüber. */
  margin-top: 0;
}
.amewo-pd-xsell-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.amewo-pd-xsell-card {
  display: block;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.amewo-pd-xsell-card:hover,
.amewo-pd-xsell-card:focus {
  box-shadow: 0 8px 24px rgba(27, 27, 27, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
}
.amewo-pd-xsell-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 16px;
}
.amewo-pd-xsell-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.amewo-pd-xsell-name {
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #1B1B1B;
  margin-bottom: 4px;
}
/* price.tpl bringt eigene Klassen mit; hier nur die Typografie angleichen. */
.amewo-pd-xsell-price .price {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #1B1B1B;
}
.amewo-pd-xsell-price .price-note,
.amewo-pd-xsell-price .vat_info {
  display: none;
}

/* --- Schmale Fenster ---------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Kleinere Fugen und Innenabstände, damit auf schmalen Fenstern nicht
     mehr Rand als Inhalt entsteht. #product-offer bekommt hier bewusst
     KEINEN Innenabstand - es ist kein Panel mehr, sondern nur der Rahmen
     um die Panels. */
  body[data-page="1"] {
    --amewo-pd-gap: 16px;
  }
  body[data-page="1"] #gallery_wrapper,
  body[data-page="1"] #product-offer > .product-info,
  .amewo-pd-card {
    padding: 20px;
    border-radius: 16px;
  }
  /* Titel und Preis stehen im Entwurf beide auf 36/40. Auf schmalen
     Fenstern gemeinsam zurückgenommen, damit die Überschrift nicht über
     vier Zeilen läuft - das Verhältnis der beiden zueinander bleibt. */
  body[data-page="1"] .product-info .product-title,
  body[data-page="1"] .product-info .price_wrapper .price {
    font-size: 28px;
    line-height: 34px;
  }
  /* Spezifikationen und Downloads einspaltig - zwei Spalten à 45 % Label
     werden hier unleserlich schmal. */
  .amewo-pd-specs,
  .amewo-pd-downloads {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .amewo-pd-xsell-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .amewo-pd-xsell-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .amewo-pd-infocards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ====================================================================== */
/* WARENKORB (body[data-page="3"] = PAGE_WARENKORB, defines_inc.php:406)   */
/*                                                                        */
/* Entwurf: weiße Panels auf grauem Grund - links je Position eine Karte,  */
/* rechts die Zusammenfassung als eigene Karte. Die Bausteine sind bewusst */
/* dieselben wie auf der Artikelseite (20px Rundung, 24px Fuge,            */
/* dreiteilige Mengenwahl, 8px Buttonrundung): beide Seiten stammen aus    */
/* demselben Entwurf, und getrennt gepflegte Werte laufen erfahrungsgemäß  */
/* auseinander.                                                            */
/*                                                                        */
/* Fast alles hier ist CSS. Das einzige Template-Override der Seite ist    */
/* basket/index.tpl, und es fügt genau EINE Sache hinzu: den grauen        */
/* Mengenrabatt-Kasten, den es in NOVAs Markup nicht gibt.                 */
/*                                                                        */
/* Der Entwurf zeigt mehrere Bausteine nicht, die NOVA rendert. Was davon  */
/* wegfällt, entscheidet der Nutzer EINZELN - nicht vorgreifen.            */
/*   raus: Spaltenüberschrift "Artikel | Stückpreis | Anzahl | Preis",     */
/*     die Wörter "Auf Wunschzettel" und "Löschen" neben den Symbolen,     */
/*     die Trennlinien aus NOVAs Tabellenlayout                            */
/*   noch sichtbar: Artikel-Nr., Lieferstatus, Hersteller                  */
/* Weggenommen wird immer nur die SICHTBARKEIT, nie das Markup - und je    */
/* Baustein an einer Stelle, damit das Zurücknehmen eine gelöschte Regel   */
/* ist. Beschriftungen, die für Screenreader gebraucht werden, bleiben     */
/* über aria-label bzw. title erhalten.                                    */
/* Ebenfalls NICHT ergänzt, obwohl im Entwurf: die Zeilen "Versandkosten"  */
/* und "Gesamt / inkl. MwSt.", der Link "Weiter einkaufen" und der graue   */
/* Mengenrabatt-Kasten in der Zusammenfassung. Eine Gesamtsumme inkl.      */
/* Versand gibt es im Warenkorb nicht, weil die Versandart erst in der     */
/* Kasse feststeht - sie wäre eine Preisangabe auf Verdacht.               */
/*                                                                        */
/* MASSE: Der seitliche Rand folgt NICHT einer Pixelmessung im Screenshot, */
/* sondern der shopweiten Konvention (calc(100% - 48px), max 2030px) - so  */
/* steht der Warenkorb in derselben Flucht wie Brotkrümel, Artikelseite,   */
/* Referenzen, FAQ und Textseiten. Das Spaltenverhältnis ist dagegen aus   */
/* dem Bild abgelesen (links ~976px, rechts ~628px) und deshalb unten als  */
/* Verhältnis notiert, nicht in Pixeln.                                    */
/* ====================================================================== */
body[data-page="3"] {
  /* Eine Variable, weil die Fuge an vier Stellen gebraucht wird:
     Spaltenabstand, Abstand der beiden Spalten im Umbruch, Bild zu Text
     in der Positionskarte und der Abstand über der Zusammenfassung. */
  --amewo-cart-gap: 24px;
}

/* --- Versandrechner: Felder und Button auf gleiche Höhe ----------------- */
/* Land, PLZ und "Versandkosten ermitteln" stehen nebeneinander, waren aber
   unterschiedlich hoch: NOVA gibt Feldern height calc(1.5em + 1.25rem + 2px)
   (clear.css), der Button holt seine Höhe dagegen aus dem Innenabstand, den
   der shopweite Buttonblock weiter oben auf 12/24px setzt - macht rund 4px
   Unterschied.
   Der Button bekommt deshalb GENAU DIESELBE Rechnung wie die Felder, statt
   irgendeiner runden Zahl. So bleiben die drei auch dann bündig, wenn NOVA
   seine Feldmaße einmal ändert. Voraussetzung ist, dass Button und Feld
   dieselbe Schriftgröße haben (beide 0.875rem) - das 1.5em in der Formel
   bezieht sich auf das jeweilige Element.
   Nicht auf body[data-page="3"] gescopet: Denselben Baustein
   (snippets/shipping_calculator.tpl) benutzt auch die Kasse, und dort steht
   dasselbe Problem. */
.shipping-calculator-main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(1.5em + 1.25rem + 2px);
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Inhaltsbreite ------------------------------------------------------ */
/* Meldungen liegen NICHT im .basket-Container, sondern in einem eigenen
   #alert-list.container ganz oben (NOVA, layout/header.tpl → alert_list.tpl).
   Der bleibt bei Bootstraps 1140px stehen - die Fehlermeldung stand dadurch
   als schmaler, mittiger Kasten über einem Warenkorb, der die volle Breite
   nutzt. Gleiche Konvention wie unten, damit beide fluchten. */
body[data-page="3"] #alert-list.container {
  width: calc(100% - 48px);
  max-width: 2030px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
/* NOVA steckt den Warenkorb in einen Bootstrap-.container (bei xl 1140px).
   Damit stand die Seite bisher deutlich schmaler als Header, Footer und
   Artikelseite - und schmaler als der Brotkrümelpfad darüber, der die
   2030px-Konvention schon benutzt. Genau diese Unwucht war in AGENTS.md als
   offener Punkt notiert; sie ist hiermit erledigt. */
body[data-page="3"] .basket {
  width: calc(100% - 48px);
  max-width: 2030px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* --- Kurzbeschreibung in Positionslisten -------------------------------- */
/* Nur der Einleitungssatz, keine Aufzaehlung - genau wie in der
   Artikeluebersicht (Wunsch des Nutzers). Die Wawi-Texte sind
   <p>Satz</p> + <ul> mit fuenf bis sieben Merkmalen; im Warenkorb machte das
   allein 156px je Position aus, jetzt sind es 40px (zwei Zeilen).
   BEWUSST NICHT auf den Warenkorb gescopet: `.shortdescription` kommt in
   denselben Positionslisten auch in der Kassen-Zusammenfassung
   (checkout/inc_order_items.tpl) und in der Bestellhistorie
   (account/order_item.tpl) vor - dort gilt dasselbe.
   `:not(:only-child)` ist die Sicherung: Besteht eine Kurzbeschreibung NUR aus
   einer Liste, bleibt sie sichtbar. */
.shortdescription ul:not(:only-child),
.shortdescription ol:not(:only-child) {
  display: none;
}
.shortdescription {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.shortdescription p {
  margin: 0;
}

/* --- Zwei Spalten ------------------------------------------------------- */
/* Verhältnis 976 : 628 aus dem Entwurf. Als fr-Werte und nicht in Pixeln,
   damit es unabhängig davon stimmt, ob der Shop die vollen 2030px oder
   weniger ausspielt - dieselbe Schreibweise wie bei #product-offer.
   :has(.cart-summary) ist kein Schmuck: Ist der Warenkorb LEER, rendert
   NOVA nur eine Spalte (lgCols = 12). Ohne die Bedingung stünde der
   "Warenkorb ist leer"-Hinweis im linken Drittel und rechts bliebe eine
   leere Rasterspalte stehen. */
@media (min-width: 992px) {
  body[data-page="3"] .basket > .row:has(.cart-summary) {
    display: grid;
    grid-template-columns: minmax(0, 976fr) minmax(0, 628fr);
    column-gap: var(--amewo-cart-gap);
    align-items: start;
    margin-left: 0;
    margin-right: 0;
  }
  /* margin-left muss mit zurück: die rechte Spalte trägt .ml-auto-util,
     im Raster würde das die Spalte aus ihrer Zelle schieben. */
  body[data-page="3"] .basket > .row:has(.cart-summary) > [class*="col-"] {
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
  }
}
/* Unterhalb von lg stehen die Spalten wie bei NOVA untereinander - dann
   braucht die Zusammenfassung oben dieselbe Fuge, die sonst die
   column-gap liefert. */
@media (max-width: 991.98px) {
  body[data-page="3"] .cart-summary {
    margin-top: var(--amewo-cart-gap);
  }
}

/* --- Seitenüberschrift -------------------------------------------------- */
/* NOVA gibt der Seitenüberschrift <h1 class="h2 basket-heading"> und der
   Überschrift der Zusammenfassung <div class="h2 basket-heading"> - beide
   tragen also dieselben Klassen. Unterschieden wird deshalb über das
   Element (h1) bzw. den Wrapper (.cart-summary), nicht über die Klasse.
   Plus Jakarta ExtraBold ist hier KEINE Ausnahme, sondern die shopweite
   Überschriftenregel; der Entwurf zeigt an dieser Stelle dieselbe Schrift. */
/* Vorgabe: Plus Jakarta Sans Bold 36/40, Zeichenabstand 0,37px.
   ACHTUNG, Bold heißt hier 700 - NICHT 800. Die Abschnittsüberschriften der
   Artikelseite laufen in ExtraBold (800), diese hier bewusst eine Stufe
   leichter. Beide Schnitte werden ausgeliefert (jakarta-700/-800), ein
   Vertippen fällt deshalb nicht durch eine fehlende Datei auf, sondern nur
   im direkten Vergleich. */
body[data-page="3"] h1.basket-heading {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.37px;
  color: #1B1B1B;
  margin-bottom: var(--amewo-cart-gap);
}

/* --- Spaltenüberschrift: ausgeblendet ----------------------------------- */
/* "Artikel | Stückpreis | Anzahl | Preis" - die Kopfzeile aus NOVAs
   Tabellenlayout (ab xl eingeblendet, darunter d-none). Auf Entscheidung des
   Nutzers raus: Sobald jede Position eine eigene Karte ist, beschriftet die
   Zeile keine Spalten mehr, sie steht nur noch lose über der ersten Karte.
   Ausgeblendet statt entfernt - im Child-Template gibt es ohnehin kein
   basket/-Override, und so kommt die Zeile durch Löschen dieser einen Regel
   zurück. Das <hr> darin geht mit, es liegt innerhalb der Zeile.
   NEBENWIRKUNG, bewusst so belassen: Ab xl blendet NOVA auch die eigenen
   Beschriftungen an den Preisen aus (.cart-items-price-text, "Einzelpreis:"
   und "Preis:"). Auf breiten Fenstern stehen Stückpreis und Gesamtpreis
   dadurch als zwei nackte Beträge untereinander. Der Entwurf schreibt an
   der Stelle "39,90 € / Stück", hat also sehr wohl eine Beschriftung. Wenn
   das stören soll, ist der kleinste Hebel, .cart-items-price-text ab xl
   wieder einzublenden - nicht vorweggenommen.
   !important ist hier UNVERMEIDLICH und keine Bequemlichkeit: NOVA hängt der
   Zeile die Bootstrap-Hilfsklassen `d-none d-xl-flex` an, und die Anzeige-
   Hilfsklassen sind bei Bootstrap selbst mit !important definiert
   (`.d-xl-flex { display: flex !important }`, clear.css:11659). Ohne
   Gegen-!important verliert jede noch so spezifische Regel - eine erste
   Fassung ohne war deshalb ab 1200px wirkungslos, also genau dort, wo die
   Zeile überhaupt erscheint. */
body[data-page="3"] .cart-items-header {
  display: none !important;
}

/* --- Positionskarte ----------------------------------------------------- */
/* Jede Position ist im Entwurf eine eigene weiße Karte auf dem grauen
   Seitengrund - dieselbe Sprache wie die Panels der Artikelseite.
   .cart-items-body IST die Bootstrap-Zeile; deren negative Ränder müssen
   deshalb raus, sonst steht die Karte 15px links und rechts über. Die
   Rinnen der Spalten übernimmt column-gap. */
body[data-page="3"] .basket-items .cart-items-body {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  margin: 0 0 16px;
  column-gap: var(--amewo-cart-gap);
}
body[data-page="3"] .basket-items .cart-items-body > div {
  padding-left: 0;
  padding-right: 0;
}
/* Bild: feste Spaltenbreite statt NOVAs col-3/col-xl-2. Bei 2030px
   Inhaltsbreite wären das rund 160px - der Entwurf zeigt eine deutlich
   kleinere Kachel neben dem Text. */
@media (min-width: 768px) {
  body[data-page="3"] .basket-items .cart-items-body > .cart-items-image {
    flex: 0 0 120px;
    max-width: 120px;
  }
}
body[data-page="3"] .basket-items .cart-items-image img {
  border-radius: 12px;
}

/* --- Aufteilung innerhalb der Karte ------------------------------------- */
/* Der Entwurf ordnet die Karte in zwei Blöcke: links Titel, Beschreibung
   und Mengenwahl, rechts Gesamtpreis, Stückpreis und Papierkorb. NOVA legt
   dieselben Bausteine als vierspaltigen Streifen aus (Name | Einzelpreis |
   Menge | Preis) und schiebt Details und Löschen darunter.
   Umgesetzt als Raster mit benannten Bereichen, nicht über `order`: Die
   Bausteine sollen paarweise nebeneinander stehen, und dafür müsste man mit
   `order` zusätzlich Breiten und Umbrüche steuern.
   Der Name-Block trägt als einziger KEINE eigene Klasse (NOVA vergibt dort
   nur Spaltenklassen), er wird deshalb über :first-child gegriffen. Kommt in
   cart_items.tpl vor dem Namen noch etwas dazu, ist das die Stelle, die
   nachgezogen werden muss. */
@media (min-width: 768px) {
  body[data-page="3"] .cart-items-body > .col > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name price"
      "info unit"
      "qty  remove";
    align-items: start;
    column-gap: var(--amewo-cart-gap);
    row-gap: 8px;
    margin-left: 0;
    margin-right: 0;
  }
  /* Die Spalten bringen Breiten, Rinnen und je ein margin-left:auto mit
     (NOVA, .cart-items-single-price / -quantity / -delete). Im Raster
     bestimmt die Zelle die Position - beides muss weg. */
  body[data-page="3"] .cart-items-body > .col > .row > div {
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }
  body[data-page="3"] .cart-items-body > .col > .row > :first-child {
    grid-area: name;
  }
  body[data-page="3"] .cart-items-body > .col > .row > .cart-items-price {
    grid-area: price;
    text-align: right;
  }
  body[data-page="3"] .cart-items-body > .col > .row > .ml-auto-util {
    grid-area: info;
  }
  body[data-page="3"] .cart-items-body > .col > .row > .cart-items-single-price {
    grid-area: unit;
    text-align: right;
  }
  body[data-page="3"] .cart-items-body > .col > .row > .cart-items-quantity {
    grid-area: qty;
    text-align: left;
    align-self: end;
  }
  body[data-page="3"] .cart-items-body > .col > .row > .cart-items-delete {
    grid-area: remove;
    text-align: right;
    align-self: end;
  }
}

/* --- Positionskarte: Typografie ----------------------------------------- */
body[data-page="3"] .basket-items .cart-items-name {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.44px;
  color: #1B1B1B;
  margin-bottom: 0;
}
body[data-page="3"] .basket-items a.cart-items-name:hover,
body[data-page="3"] .basket-items a.cart-items-name:focus {
  color: #6BA7E8;
  text-decoration: none;
}
/* Kurzbeschreibung, Artikel-Nr., Lieferstatus, Hersteller, Merkmale: eine
   ruhige Liste unter dem Titel. Die Beschriftungen (<strong>) bleiben
   dunkel, damit die Zeilen als Wertepaare lesbar bleiben. */
/* Vorgabe: Inter Regular 14/20, Zeichenabstand -0,15px. */
body[data-page="3"] .cart-items-body .list-unstyled {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
body[data-page="3"] .cart-items-body .list-unstyled strong {
  font-weight: 600;
  color: #1B1B1B;
}
body[data-page="3"] .cart-items-body .list-unstyled .shortdescription {
  margin-bottom: 6px;
}
/* Gesamtpreis der Position. NOVA hängt .text-accent an - das ist die
   Akzentfarbe der Template-Einstellungen (im Shop Rot). Im Entwurf ist der
   Preis schwarz; Rot bleibt den Aktionen vorbehalten. */
/* Vorgabe: Inter Bold 24/32, Zeichenabstand 0,07px. */
body[data-page="3"] .cart-items-price .price_overall {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.07px;
  color: #1B1B1B;
}
/* Stückpreis, im Entwurf direkt unter dem Gesamtpreis und gedämpft.
   Vorgabe: Inter Regular 14/20, Zeichenabstand -0,15px. */
body[data-page="3"] .cart-items-single-price {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
/* Die Beschriftungen "Einzelpreis:" / "Preis:" blendet NOVA erst ab xl aus.
   Darunter bleiben sie stehen und sollen dort nicht fetter wirken als der
   Wert daneben. */
body[data-page="3"] .cart-items-price-text {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* --- Positionskarte: Mengenwahl ----------------------------------------- */
/* Gleiche Bauform wie auf der Artikelseite: drei einzelne Kästen - Minus,
   Zahl, Plus - statt NOVAs geteiltem Kasten. Die Regeln stehen hier ein
   zweites Mal, weil die der Artikelseite auf body[data-page="1"] gescopet
   sind; zusammenlegen ginge erst, wenn beide Seiten dieselben Maße haben.
   Die Zahl ist hier eine Stufe kleiner als auf der Artikelseite (18 statt
   20px), passend zum kleineren Positionsblock.
   Zur Schriftfamilie: NOVA setzt auf Zahl und Einheit Montserrat, das in
   diesem Shop gar nicht ausgeliefert wird. Korrigiert wird das schon
   shopweit weiter oben (.form-counter .form-control) - hier nicht doppeln. */
body[data-page="3"] .cart-items-quantity .qty-wrapper {
  max-width: none;
}
body[data-page="3"] .cart-items-quantity .form-counter {
  display: inline-flex;
  align-items: center;
  /* Fuge 8px. Vorgeschichte: 24px (aus dem gezoomten Bild hochgerechnet),
     dann 12px, jetzt 8px. Gesamtbreite 32+8+36+8+32 = 116px.
     WICHTIG für den nächsten, der das enger haben will: Der SICHTBARE
     Abstand ist nicht die Fuge allein. Die Zahl steht mittig in einem
     Zahlenfeld fester Breite - bei einstelligen Mengen liegt links und
     rechts von der Ziffer noch die halbe Restbreite des Feldes. Bei 36px
     Feld und einer rund 9px breiten Ziffer sind das je 13,5px zusätzlich.
     Wer weiter zusammenrücken will, muss deshalb das FELD schmaler machen,
     nicht die Fuge - unter etwa 36px passen aber keine vierstelligen Mengen
     mehr, und die sind in einem B2B-Shop nicht abwegig. */
  gap: 8px;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  border: 0;
  background: transparent;
  overflow: visible;
}
/* Bootstrap schiebt angehängte Gruppen mit margin-left:-1px unter den
   Nachbarrahmen, damit ein durchgehender Kasten entsteht - genau das soll
   hier nicht passieren. */
body[data-page="3"] .cart-items-quantity .form-counter .input-group-prepend,
body[data-page="3"] .cart-items-quantity .form-counter .input-group-append {
  display: flex;
  margin: 0;
}
/* Die beiden Schaltflächen: quadratisch mit weicher Rundung. Anders als auf
   der Artikelseite, wo sie flacher als das Zahlenfeld sind - der Entwurf
   des Warenkorbs zeigt hier zwei gleich große Quadrate.
   32 x 32 ist Vorgabe. Die Rundung ist mitgewandert (vorher 12px bei 44px
   Kantenlänge): Ein fester Radius an einer kleineren Fläche sieht nicht wie
   dasselbe Element in klein aus, sondern deutlich runder. 8px hält das
   Verhältnis und ist zugleich der Radius, den die Mengenwahl der
   Artikelseite benutzt.
   HINWEIS ZUR BEDIENBARKEIT: 32px liegt unter den 44px, die die WCAG als
   Mindestgröße für Zeigerziele empfiehlt (2.5.8, Level AA seit 2.2). Bei
   Behörden- und Schulkunden ist das der Punkt, an dem jemand nachfragen
   könnte. Die Vorgabe geht vor - falls es später Thema wird, liegt der
   Hebel hier. */
body[data-page="3"] .cart-items-quantity .form-counter .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #FFFFFF;
  box-sizing: border-box;
  line-height: 1;
  font-size: 14px;
  color: var(--color-text-muted);
}
body[data-page="3"] .cart-items-quantity .form-counter .btn:hover,
body[data-page="3"] .cart-items-quantity .form-counter .btn:focus {
  background-color: #F5F7FA;
  border-color: var(--color-secondary);
  color: #1B1B1B;
}
/* DIE ZAHL HAT KEINEN KASTEN. Das ist der auffälligste Unterschied zum
   NOVA-Standard und auch zur Artikelseite: Dort sitzt die Menge in einem
   dritten, gerahmten Feld, im Warenkorb-Entwurf steht sie frei zwischen den
   beiden Schaltflächen - nur die Zahl, groß und fett.
   Es bleibt trotzdem ein <input type="number">, damit Eingabe und das
   Nachrechnen des Warenkorbs unverändert funktionieren. Sichtbar ist davon
   nichts mehr: Rahmen, Fläche und Schatten raus. Die Pfeilchen des
   Zahlenfeldes blendet NOVA schon aus (appearance: textfield und
   ::-webkit-*-spin-button). */
/* Vorgabe für die Zahl: Inter SemiBold 16/24, Zeichenabstand -0,31px.
   ABWEICHUNG VON MEINER ERSTEN FASSUNG, bewusst: Aus dem gezoomten
   Entwurfsbild hatte ich die Ziffer auf rund 24px hochgerechnet (Verhältnis
   Ziffernhöhe zu Schaltflächenhöhe). Die Vorgabe sagt 16px - sie sticht die
   Messung. Falls die Zahl dadurch zu klein neben den 44px-Schaltflächen
   wirkt, sind eher die Schaltflächen zu groß geraten als die Zahl zu klein;
   deren Maß stammt aus derselben Hochrechnung und liegt nicht als Vorgabe
   vor. */
body[data-page="3"] .cart-items-quantity .form-counter .form-control {
  /* 36px - die Breite, die "1000" bei 16px SemiBold gerade noch braucht.
     Jedes Pixel mehr rückt die Ziffer bei kleinen Mengen weiter von den
     Schaltflächen weg (siehe Erläuterung an der Fuge oben). */
  flex: 0 0 36px;
  width: 36px;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #1B1B1B;
}
/* Ohne Rahmen fehlt dem Feld jede Rückmeldung beim Tabben - deshalb ein
   eigener Fokusring. Bootstrap setzt an .form-control:focus outline: 0 und
   einen Schatten; beides passt hier nicht mehr. */
body[data-page="3"] .cart-items-quantity .form-counter .form-control:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

/* --- Positionskarte: Merkzettel und Löschen ----------------------------- */
/* Beide nur noch als Symbol, ohne Wort daneben - so der Entwurf.
   Die Beschriftungen verschwinden NUR OPTISCH, nicht aus dem
   Barrierefreiheits-Baum: Der Merkzettel-Button trägt ein aria-label, der
   Papierkorb ein title-Attribut (beides NOVA). Screenreader und Tooltip
   sagen weiterhin, was der Knopf tut. */
body[data-page="3"] .cart-items-delete {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Der Abstand der beiden Symbole steckt AUSSCHLIESSLICH hier. NOVAs
     eigene Abstände am Merkzettel-Button (margin/padding rechts) sind
     weiter unten zurückgesetzt - wer den Abstand ändern will, ändert diesen
     einen Wert. */
  gap: 16px;
}
body[data-page="3"] .cart-items-delete .btn {
  font-family: var(--font-family-base);
  line-height: 1;
  padding: 8px;
}
/* Merkzettel: die Beschriftung liegt in einem eigenen <span> und lässt sich
   damit schlicht ausblenden. */
body[data-page="3"] .cart-items-delete .wishlist-button-text {
  display: none;
}
/* NOVA gibt dem Merkzettel-Button einen Trennstrich nach rechts
   (`border-right: 1px solid #ebebeb`, clear.css:27225) plus je 1rem
   Innen- und Außenabstand auf derselben Seite. Das war der Trenner zwischen
   den beiden Beschriftungen "Auf Wunschzettel" und "Löschen". Ohne Text
   stehen dort nur noch zwei Symbole - der Strich dazwischen wirkt wie ein
   versehentlicher Rahmen.
   Alle drei Werte müssen weg: Der Abstand der beiden Symbole zueinander
   kommt jetzt aus dem `gap` des Flex-Behälters weiter oben, sonst käme er
   doppelt. */
body[data-page="3"] .cart-items-delete .wishlist-button {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
/* Abstand vom Herz zur (ausgeblendeten) Beschriftung - ohne Text schiebt er
   das Symbol nur aus der Mitte. */
body[data-page="3"] .cart-items-delete .wishlist-button-inner .wishlist-icon {
  margin-right: 0;
}
/* Papierkorb: hier geht das NICHT so, denn "Löschen" steht in
   basket/cart_items.tpl als NACKTER TEXTKNOTEN direkt im Button, ohne
   umgebendes Element (`<span class="fas fa-trash-alt"></span>{lang
   key='delete'}`). Ein Textknoten ist per CSS nicht ansprechbar.
   Deshalb der Umweg über die Schriftgröße: 0 am Button lässt den Text
   verschwinden, das Symbol bekommt seine Größe am <span> zurück. Es sitzt
   im Icon-Font, hängt also selbst an font-size - ohne die Rückgabe wäre es
   ebenfalls weg.
   Die Alternative wäre ein Override von basket/cart_items.tpl gewesen; das
   hieße, NOVAs kompletten Block zu kopieren (Merkzettel-Include, Formular-
   Namen, Positionsindex) und bei jedem Shop-Update gegen das Original zu
   prüfen. Für ein weggenommenes Wort ist das der teurere Weg. */
body[data-page="3"] .cart-items-delete .cart-items-delete-button {
  font-size: 0;
  color: var(--color-primary);
  text-decoration: none;
}
/* Eigenes Papierkorb-Symbol (images/cart-delete.svg) statt FontAwesome.
   Eingebunden als MASKE, nicht als <img> - dasselbe Verfahren wie beim
   Topbar-Icon weiter oben: Die Fläche kommt aus background-color und zieht
   currentColor, das Symbol übernimmt damit automatisch die Farbe des Buttons
   samt Hover-Wechsel. Als <img> wäre es fest auf dem #F46060 aus der Datei.
   font-size bleibt 0 (vom Button geerbt): Das unterdrückt das Zeichen aus
   dem Icon-Font, das NOVA über .fas::before einsetzt. Breite und Höhe sind
   deshalb ausdrücklich gesetzt - ohne sie hätte das <span> keine Ausdehnung.
   NOVAs 0.5rem Abstand zum Wort daneben entfällt, das Wort ist ausgeblendet. */
body[data-page="3"] .cart-items-delete .cart-items-delete-button > span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 0;
  background-color: currentColor;
  -webkit-mask: url("../images/cart-delete.svg") no-repeat center;
  mask: url("../images/cart-delete.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
body[data-page="3"] .cart-items-delete .wishlist-icon {
  font-size: 18px;
}
/* Rot bleibt richtig: Löschen ist die einzige Signalhandlung der Karte.
   Ohne Beschriftung trägt die Farbe zusätzlich Bedeutung. Unterstreichen
   beim Überfahren ergibt ohne Text keinen Sinn mehr. */
body[data-page="3"] .cart-items-delete .cart-items-delete-button:hover,
body[data-page="3"] .cart-items-delete .cart-items-delete-button:focus {
  color: #E45454;
  text-decoration: none;
}

/* --- Trennlinien aus NOVAs Tabellenlayout: raus ------------------------- */
/* NOVA setzt ans Ende jeder Position ein <hr> (Block
   'basket-cart-items-items-bottom-hr'). Das stammt aus der Zeit, als die
   Positionen als Tabelle untereinander liefen - dort war die Linie die
   einzige Trennung. Seit jede Position eine eigene weiße Karte ist,
   übernimmt das die graue Fuge dazwischen; die Linie steht dann als Rest
   INNERHALB der Karte, kurz vor deren unterer Kante.
   Bewusst unabhängig von der Anzahl der Positionen ausgeblendet: Auch bei
   mehreren Artikeln säße sie im Inneren jeder Karte und nicht zwischen
   ihnen - sie trennt also in keinem Fall etwas.
   Mit ausgeblendet wird die Spalte, die das <hr> umschließt ({col cols=12}).
   Bliebe sie stehen, wäre sie ein leeres Rasterfeld über die volle Breite. */
body[data-page="3"] .basket-items .cart-items-body > .col-12,
body[data-page="3"] .basket-items hr {
  display: none;
}

/* --- Zusammenfassung ---------------------------------------------------- */
/* Der Entwurf zeigt rechts EINE weiße Karte, die Überschrift steht darin.
   NOVA setzt die Überschrift ÜBER die Karte und die Karte selbst grau
   (.card-gray, #f5f7fa). Statt die Überschrift im Template zu verschieben,
   wird hier der ohnehin vorhandene Wrapper .sticky-top.cart-summary zur
   Karte und die graue Fläche darin durchsichtig - damit wandert die
   Überschrift ohne Eingriff ins Markup nach innen, und Gutscheinfeld,
   Versandkostenfrei-Hinweis und Gewichtsangabe liegen automatisch mit auf
   derselben Fläche. */
body[data-page="3"] .cart-summary {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  /* NOVA hängt der Spalte .sticky-top an (top: 0, z-index: 1020). Solange
     sie durchsichtig war, fiel das nicht auf - als weiße Karte schiebt sie
     sich beim Scrollen sichtbar VOR die Kopfzeile, wenn die im Backend auf
     mitscrollen steht (layout/header.tpl vergibt sticky-top abhängig von
     Einstellungen.template.header.menu_scroll). Beide hätten dann z-index
     1020, und die spätere im Markup gewinnt - also die Karte.
     z-index runter löst das in beiden Fällen. Der passende top-Abstand
     lässt sich erst live messen, sobald feststeht, ob und wie hoch die
     Kopfzeile stehen bleibt; bis dahin NOVAs top: 0. */
  z-index: 1;
}
body[data-page="3"] .cart-summary .basket-heading {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.2px;
  color: #1B1B1B;
  margin-bottom: 16px;
}
body[data-page="3"] .cart-summary .card {
  background: transparent;
  border: 0;
  margin-top: 0;
}
body[data-page="3"] .cart-summary .card-body {
  padding: 0;
}
/* Kopfzeile der Gutscheinkarte (nur wenn im Backend eingeschaltet).
   Ohne Trennlinie - siehe Begründung bei .basket-summary-total. */
body[data-page="3"] .cart-summary .card-header {
  background: transparent;
  border-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
body[data-page="3"] .cart-summary .basket-summary .row {
  margin-left: 0;
  margin-right: 0;
  align-items: baseline;
}
body[data-page="3"] .cart-summary .basket-summary .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
body[data-page="3"] .cart-summary .basket-summary .row + .row {
  margin-top: 8px;
}
body[data-page="3"] .cart-summary .price_label,
body[data-page="3"] .cart-summary .tax_label {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: var(--color-text-muted);
}
/* Zwischensumme: die betonte Zeile des Blocks.
   OHNE Trennlinie. NOVA bringt an .basket-summary-total eine border-top
   mit, die Gutscheinkarte darüber eine border-bottom - beide waren in
   NOVAs Layout nötig, weil die Zeilen dort ohne eigene Fläche liefen.
   In der weißen Karte des Entwurfs gliedert die Fläche selbst; die Linien
   zerschneiden sie nur. Der Abstand allein trägt die Trennung.
   Die Summe war zuvor rot (--color-primary). Der Entwurf setzt sie
   schwarz - Rot bleibt Signalfarbe für Aktionen, nicht für Beträge. */
body[data-page="3"] .cart-summary .basket-summary-total {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
body[data-page="3"] .cart-summary .basket-summary-total .price_label {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #1B1B1B;
}
body[data-page="3"] .cart-summary .basket-summary-total .total-sum {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: #1B1B1B;
}
/* Versandkostenhinweis: bei NOVA ein Fließtextsatz mit Link, kein
   Wertepaar wie im Entwurf. Bleibt inhaltlich unangetastet, wird nur zur
   ruhigen Fußzeile des Summenblocks. */
body[data-page="3"] .cart-summary .shipping-costs {
  margin-top: 8px;
}
body[data-page="3"] .cart-summary .shipping-costs small,
body[data-page="3"] .cart-summary .basket-summary-notice-weight,
body[data-page="3"] .cart-summary .basket-summary-notice-weight-wrapper {
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
body[data-page="3"] .cart-summary .shipping-costs a {
  color: #6BA7E8;
}
/* Versandzeile bei ECHT gewählter Versandart (Markup in basket/index.tpl,
   erscheint nur, wenn eine Versandart in der Sitzung steht). Aufbau wie die
   Summenzeilen darüber: Beschriftung links, Betrag rechts - darunter klein
   der Name der Versandart, damit erkennbar bleibt, wofür der Betrag gilt. */
body[data-page="3"] .cart-summary .amewo-cart-shipping-name {
  display: block;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
body[data-page="3"] .cart-summary .amewo-cart-shipping-price {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #1B1B1B;
}
/* Gesamtsumme - die einzige Zeile der Zusammenfassung, die eine Trennlinie
   bekommt. Weiter oben stehen bewusst keine (siehe .basket-summary-total):
   In der weißen Karte gliedert die Fläche selbst. Hier ist die Linie kein
   Schmuck, sondern trennt die Rechnung von ihrem Ergebnis - so auch im
   Entwurf. */
body[data-page="3"] .cart-summary .amewo-cart-grandtotal {
  margin-left: 0;
  margin-right: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  align-items: baseline;
}
body[data-page="3"] .cart-summary .amewo-cart-grandtotal > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
body[data-page="3"] .cart-summary .amewo-cart-grandtotal-label {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #1B1B1B;
}
body[data-page="3"] .cart-summary .amewo-cart-grandtotal-value {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.07px;
  color: #1B1B1B;
}
/* Die Steuerzeile unter der Gesamtsumme liest sich wie die Versandzeile
   darüber: Beschriftung gedämpft, Betrag kräftig - gleiche Größe, gleiche
   Gewichte. Vorher stand sie als 12px-Fußnote da und der Betrag verlor sich.
   Beide Spans tragen dieselbe Klasse (basket/index.tpl), unterschieden wird
   deshalb über ihre Spalte: links die Beschriftung, rechts der Wert. */
body[data-page="3"] .cart-summary .amewo-cart-grandtotal-note {
  display: block;
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
}
body[data-page="3"] .cart-summary .amewo-cart-grandtotal .text-left-util .amewo-cart-grandtotal-note {
  font-weight: 400;
  color: var(--color-text-muted);
}
body[data-page="3"] .cart-summary .amewo-cart-grandtotal .price-col .amewo-cart-grandtotal-note {
  font-weight: 600;
  color: #1B1B1B;
}
/* "Zur Kasse" - im Entwurf hellblau über die volle Breite statt des roten
   Pill-Buttons der ersten Fassung. Fläche und Schriftfarbe kommen aus
   denselben Variablen wie "Jetzt kaufen" auf der Artikelseite, damit die
   Kontrastentscheidung an EINER Stelle steht (--color-on-secondary, siehe
   Formularblock weiter oben) und nicht in jeder Regel einzeln nachgefasst
   werden muss. Rundung 8px wie die Kaufbuttons der Artikelseite.
   Der Selektor braucht .cart-summary vor der ID nicht - die ID gewinnt
   ohnehin; sie steht trotzdem da, damit die Regel im Abschnitt bleibt,
   wenn jemand nach .cart-summary sucht. */
body[data-page="3"] .cart-summary #cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 20px;
  border-radius: 8px;
  background: var(--color-action);
  border: 1px solid var(--color-action);
  color: var(--color-on-secondary);
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.44px;
}
body[data-page="3"] .cart-summary #cart-checkout-btn:hover,
body[data-page="3"] .cart-summary #cart-checkout-btn:focus {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
}

/* --- "Weiter einkaufen" ------------------------------------------------- */
/* Zweitrangige Aktion unter dem Kassen-Button, im Entwurf als schlichter
   roter Text ohne Rahmen. Markup kommt aus basket/index.tpl.
   Rot ist hier kein Widerspruch zur Regel "Rot nur für Hauptaktionen": Der
   Link ist im Entwurf bewusst die einzige farbige Zeile unter dem Button und
   führt aus der Kasse heraus - genau die Bedeutung, die Rot im Shop sonst
   auch trägt. Als Text, nicht als Fläche, bleibt er der Hauptaktion trotzdem
   klar untergeordnet.
   Die Unterstreichung kommt erst beim Überfahren; sonst stünden zwei
   konkurrierende Linien unter dem Button. */
body[data-page="3"] .cart-summary .amewo-cart-continue {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: var(--color-primary);
  text-decoration: none;
}
body[data-page="3"] .cart-summary .amewo-cart-continue:hover,
body[data-page="3"] .cart-summary .amewo-cart-continue:focus {
  color: #E45454;
  text-decoration: underline;
}

/* --- Mengenrabatt-Kasten am Fuß der Zusammenfassung --------------------- */
/* Markup kommt aus basket/index.tpl, Fläche und Typografie aus der
   gemeinsamen Klasse .amewo-pd-bulk-hint (siehe Artikelseite).
   EINZIGER Unterschied zur Artikelseite: Dort läuft "Mengenrabatt:" als
   fetter Auftakt IN der Zeile weiter, im Warenkorb steht es laut Entwurf
   als eigene Zeile mit dem Satz darunter. Deshalb hier gescopet auf
   body[data-page="3"] und nicht über eine zweite Klasse - es ist eine
   Eigenschaft dieser Seite, nicht eine zweite Bauform des Kastens. */
body[data-page="3"] .amewo-pd-bulk-hint strong {
  display: block;
  margin-bottom: 4px;
}
/* Abstand nach oben größer als der Wert der Artikelseite (20px). Der Kasten
   ist der einzige Baustein der Zusammenfassung, der KEINE Aktion ist -
   "Zur Kasse" und "Weiter einkaufen" gehören zusammen und stehen mit 12px
   dicht beieinander, der Hinweis darunter setzt sich mit 32px deutlich ab.
   Wären alle drei Abstände gleich, läse sich der Kasten als dritte
   Schaltfläche. */
body[data-page="3"] .cart-summary .amewo-pd-bulk-hint {
  margin-top: 32px;
}

/* --- Leerer Warenkorb --------------------------------------------------- */
/* Auch ohne Positionen soll die Seite nicht auf nackten grauen Grund
   fallen. NOVAs .alert-info bringt einen blassblauen Kasten mit - hier
   dieselbe weiße Karte wie überall sonst. */
body[data-page="3"] .basket-empty .alert {
  background: #FFFFFF;
  border: 0;
  border-radius: 20px;
  color: #1B1B1B;
  padding: 40px 24px;
}

/* --- Schmale Fenster ---------------------------------------------------- */
@media (max-width: 767.98px) {
  body[data-page="3"] h1.basket-heading {
    font-size: 30px;
    line-height: 38px;
  }
  body[data-page="3"] .basket-items .cart-items-body,
  body[data-page="3"] .cart-summary {
    padding: 20px;
  }
}

/* ---------------------------------------------------------------------- */
/* Zähler am Warenkorb-Symbol im Header                                    */
/*                                                                         */
/* Die Blase hängt an .fa-sup (NOVA, basket/cart_dropdown_label.tpl) und    */
/* zieht ihre Farbe aus der Template-Einstellung "primary" im Backend - im  */
/* Shop also dasselbe Rot wie die Hauptaktionen. Auf Wunsch hier auf Blau.  */
/*                                                                         */
/* Fläche ist --color-secondary, also dasselbe #B4D6FF wie überall sonst.   */
/* Die SCHRIFT darauf ist aber dunkel und NICHT weiß wie auf den Buttons:   */
/* Die Blase ist rund 18px groß und trägt eine einzelne Ziffer. Weiß auf    */
/* #B4D6FF sind gemessene ~1,5:1 - die Zahl wäre auf dem weißen Header      */
/* schlicht nicht zu lesen, und dann trägt der Zähler keine Information     */
/* mehr. Dunkel auf derselben Fläche liegt bei ~9:1.                        */
/* Falls die Blase auf Weiß zu blass wirkt, ist die Alternative #2E6FB8     */
/* mit weißer Schrift (~5,1:1) - eine Zeile, aber dann weicht sie vom       */
/* Blau des Entwurfs ab. Bewusst nicht vorweggenommen.                      */
/* Schriftfamilie muss mitgesetzt werden: clear.css gibt der Blase Open     */
/* Sans mit, das in diesem Shop gar nicht ausgeliefert wird - die Zahl      */
/* stünde sonst in einer beliebigen Systemschrift.                          */
/* ---------------------------------------------------------------------- */
.fa-sup {
  background-color: var(--color-secondary);
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Warenkorb-Aufklapper in der Kopfzeile (basket/cart_dropdown.tpl)         */
/*                                                                        */
/* Gescopet über die ID, nicht über .cart-dropdown: Die Klasse trägt auch  */
/* das Bootstrap-Menü, dessen Rahmen, Rundung und Innenabstand hier        */
/* überschrieben werden müssen - mit der ID gewinnen wir das ohne          */
/* !important.                                                            */
/* Nicht auf body[data-page] gescopet: Der Aufklapper hängt in der         */
/* Kopfzeile und erscheint auf JEDER Seite.                                */
/* ---------------------------------------------------------------------- */
/* Alle Aufklapper der Kopfzeilen-Symbole (Konto, Vergleichsliste,
   Wunschzettel, Warenkorb) liegen in #shop-nav. Der Warenkorb hatte seine
   Rundung schon über die eigene Regel weiter unten, die übrigen standen
   noch eckig da.
   overflow:hidden wäre der bequeme Weg, die Kindelemente auf die Rundung zu
   beschneiden - er scheidet aber aus: NOVA gibt dem geöffneten
   Warenkorb-Aufklapper overflow-y:auto zum Scrollen, und overflow setzt
   immer BEIDE Achsen. Deshalb bekommen die Randbausteine ihre Ecken
   einzeln. NOVA setzt sie ausdrücklich auf 0 (clear.css:21477/21482), damit
   sie in einem eckigen Menü bündig sitzen - hier ist es umgekehrt. */
#shop-nav .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(27, 27, 27, .12);
}
#shop-nav .dropdown-menu .dropdown-body:first-child,
#shop-nav .dropdown-menu .dropdown-footer:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
#shop-nav .dropdown-menu .dropdown-body:last-child,
#shop-nav .dropdown-menu .dropdown-footer:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

#cart-dropdown-container.cart-dropdown {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(27, 27, 27, .12);
  padding: 24px;
  font-family: var(--font-family-base);
  /* NOVA deckelt die Breite über .lg-min-w-lg auf 21,875rem = 350px. Darin
     drängeln sich Bild, Menge, ein zweizeiliger Artikelname und der Preis;
     der Name lief in den Preis. 420px geben jeder Angabe ihre Zeile.
     max-width mit 100vw minus Rand, damit der Aufklapper auf schmalen
     Fenstern nicht über den Bildschirm hinausragt. */
  min-width: 420px;
  max-width: calc(100vw - 32px);
}
/* .dropdown-body bringt eigene 1,5rem Polsterung mit (clear.css:21472).
   Zusammen mit der des Behälters saß der Summenblock deutlich enger als die
   Positionsliste darüber - beide sollen dieselbe Kante haben. */
#cart-dropdown-container .dropdown-body {
  padding: 0;
}

/* --- Positionsliste ----------------------------------------------------- */
/* NOVA rendert die Positionen als <table>. Deren Zellenrahmen und
   Innenabstände kommen von Bootstrap und passen nicht zur ruhigen
   Kartenoptik - stattdessen nur eine feine Linie ZWISCHEN den Positionen. */
#cart-dropdown-container .dropdown-cart-items {
  margin-bottom: 0;
}
/* Schriftmaße auf die ZELLE und nicht auf die einzelnen Elemente. Grund:
   Die Höhe eines Zeilenkastens bestimmt der Block, in dem er steht - nicht
   das <a> darin. Lag die 14/20 nur am Link, blieb die Spalte auf der
   16px-Grundschrift mit 24px Zeilenhöhe, und der Artikelname rutschte darin
   ein paar Pixel nach unten. Die Menge "2x" steht dagegen unmittelbar in
   ihrer Spalte und saß auf der Oberkante - die beiden fluchteten nicht.
   Mit gemeinsamem Maß an der Zelle erben alle Spalten denselben
   Zeilenkasten und beginnen auf einer Linie. */
#cart-dropdown-container .dropdown-cart-items td {
  border: 0;
  padding: 14px 0;
  vertical-align: top;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
}
/* Der Preis steht in einer eigenen Zelle mit nowrap. Ohne Abstand nach links
   stößt er direkt an den umbrechenden Artikelnamen. */
#cart-dropdown-container .dropdown-cart-items td.text-right-util {
  padding-left: 16px;
}
/* Menge ("2x") und Name auseinanderhalten - beide liegen in derselben
   {formrow} und standen ohne Abstand aneinander. */
#cart-dropdown-container .dropdown-cart-items .form-row {
  align-items: start;
}
#cart-dropdown-container .dropdown-cart-items .form-row > [class*="col"] {
  padding-left: 6px;
  padding-right: 6px;
}
#cart-dropdown-container .dropdown-cart-items tr + tr td {
  border-top: 1px solid var(--color-border);
}
/* clear.css zieht die Bilder auf width:100% ihrer Spalte. In einer col-auto
   ist das die Eigenbreite der Datei - je nach Artikel also verschieden groß.
   Feste Kachel wie in der Positionskarte des Warenkorbs. */
#cart-dropdown-container .dropdown-cart-items img {
  width: 40px;
  height: auto;
  border-radius: 8px;
}
/* Ebenfalls ohne eigene Größe - siehe Zelle. Nur Gewicht und Farbe. */
#cart-dropdown-container .dropdown-cart-items a {
  font-weight: 600;
  color: #1B1B1B;
  text-decoration: none;
}
/* Das Bild ist höher als eine Textzeile. Ohne eigene Ausrichtung würde es
   die Oberkante der Zeile bestimmen und Menge wie Name nach unten drücken. */
#cart-dropdown-container .dropdown-cart-items .form-row > .col-auto:first-child {
  align-self: start;
}
#cart-dropdown-container .dropdown-cart-items a:hover,
#cart-dropdown-container .dropdown-cart-items a:focus {
  color: var(--color-link-hover);
}
/* Die Mengenangabe ("2x") steht in einer eigenen Spalte ohne Klasse. */
/* Nur noch die Farbe - Größe und Zeilenhöhe kommen jetzt von der Zelle,
   damit Menge und Artikelname denselben Zeilenkasten haben. */
#cart-dropdown-container .dropdown-cart-items td .col-auto {
  color: var(--color-text-muted);
}
/* Preiszelle: nur Gewicht und Farbe, Größe kommt von der Zellenregel oben.
   Zwei Regeln für dieselbe Zelle wären sonst zwei Stellen für ein Maß. */
#cart-dropdown-container .dropdown-cart-items td.text-right-util {
  font-weight: 600;
  color: #1B1B1B;
}

/* --- Summen ------------------------------------------------------------- */
#cart-dropdown-container .dropdown-body .list-unstyled {
  margin-bottom: 0;
}
/* Luft zwischen Positionsliste und Summen - die beiden Blöcke stießen
   bisher fast aneinander. */
#cart-dropdown-container .dropdown-body .list-unstyled {
  margin-top: 16px;
}
#cart-dropdown-container .cart-dropdown-total-item {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
#cart-dropdown-container .cart-dropdown-total-item-price {
  font-weight: 600;
  color: #1B1B1B;
}
/* Die Summenzeile trägt bei NOVA KEINE eigene Klasse, nur
   .font-weight-bold-util. Sie ist damit die einzige Zeile der Liste, die
   sich so ansprechen lässt - deshalb dieser Selektor und nicht ein
   sprechenderer. Trennlinie darüber wie in der Warenkorb-Zusammenfassung:
   Sie trennt die Aufstellung von ihrem Ergebnis. */
#cart-dropdown-container .dropdown-body .list-unstyled > li.font-weight-bold-util {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #1B1B1B;
  border-top: 1px solid var(--color-border);
  margin-top: 10px;
  padding-top: 10px;
}
/* Versandkostenhinweis: Fließtext mit Link, gehört gedämpft unter die
   Summe. */
#cart-dropdown-container .cart-dropdown-total-item a {
  color: #6BA7E8;
}

/* --- Buttons ------------------------------------------------------------ */
/* NOVA gibt "Zur Kasse" die Umrandungsvariante und "Zum Warenkorb" die
   gefüllte - also der Nebenhandlung das stärkere Gewicht. Hier gedreht:
   "Zur Kasse" ist gefüllt, wie auf der Warenkorbseite auch. Der Kunde soll
   an beiden Stellen dieselbe Hauptaktion sehen.
   nowrap, weil "Zum Warenkorb" in der halben Aufklapperbreite sonst auf
   zwei Zeilen umbricht und die Zeile ungleich hoch wird. */
#cart-dropdown-container .cart-dropdown-buttons {
  margin-top: 16px;
}
#cart-dropdown-container .cart-dropdown-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next {
  background: var(--color-action);
  border: 1px solid var(--color-action);
  color: var(--color-on-secondary);
}
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover,
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:focus {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
}
#cart-dropdown-container .cart-dropdown-buttons .btn-primary {
  background: #FFFFFF;
  border: 1px solid var(--color-action);
  color: #6BA7E8;
}
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:hover,
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:focus {
  background: var(--color-secondary-bg);
  border-color: var(--color-action);
  color: var(--color-link-hover);
}

/* --- Hinweise am Fuß und leerer Warenkorb -------------------------------- */
#cart-dropdown-container .cart-dropdown-shipping-notice {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}
#cart-dropdown-container hr {
  border-top-color: var(--color-border);
}
#cart-dropdown-container .cart-dropdown-empty {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: normal;
}

/* ====================================================================== */
/* KASSE (body[data-page="11"] = PAGE_BESTELLVORGANG, defines_inc.php:417) */
/*                                                                        */
/* NUR OPTIK - ausdrückliche Vorgabe des Nutzers. Der Ablauf bleibt        */
/* unangetastet.                                                          */
/*                                                                        */
/* WICHTIG ZUM VERSTÄNDNIS: Der Entwurf zeigt eine EIN-SEITEN-Kasse        */
/* (Kundentyp + Adresse + Zahlungsart + Übersicht + Bestellbutton          */
/* untereinander). JTL ist ein Assistent - checkout/index.tpl schaltet     */
/* über $step zwischen eigenen Seiten um:                                  */
/*     accountwahl → edit_customer_address → Versand/Zahlung               */
/*     → [ZahlungZusatzschritt] → Bestaetigung                             */
/* An diesen Schritten hängen serverseitige Prüfung, Pflichtangaben und    */
/* die Zahlungsmodule. Sie zusammenzulegen wäre ein Umbau, kein Umstylen.  */
/* Deshalb: die BILDSPRACHE des Entwurfs auf JTLs Schritte legen - weiße   */
/* Karten auf grauem Grund, ruhige Typografie, Zahl- und Versandarten als  */
/* anklickbare Karten. Der Kunde sieht dieselbe Gestaltung, nur in zwei    */
/* bis drei Zügen statt einem.                                             */
/*                                                                        */
/* NICHT umgesetzt und bewusst offen (siehe AGENTS.md, Offene Punkte):     */
/*   - der Kundentyp-Umschalter B2C/B2B (wird getrennt besprochen)         */
/*   - die Bestellübersicht rechts auf JEDER Seite (JTL zeigt sie nur im   */
/*     letzten Schritt; sie überall einzublenden wäre eine Ergänzung,      */
/*     keine Optik)                                                        */
/*   - AGB/Widerruf als Fließtext statt Pflicht-Checkbox (Rechtsfrage)     */
/* ====================================================================== */

/* --- Inhaltsbreite ------------------------------------------------------ */
/* Dieselbe Konvention wie Warenkorb, Artikelseite und Brotkrümel - die Kasse
   steht in derselben Flucht wie die Seite davor.
   ZWISCHENSTAND, der wieder weg ist: Eine Fassung hatte die ganze Kasse auf
   1040px verschmälert, weil das einspaltige Formular über 2030px leer wirkte.
   Das war die Behandlung des Symptoms und erzeugte einen sichtbaren Sprung
   zwischen Warenkorb und Kasse. Nicht zu breit ist die SEITE, sondern die
   einzelnen Formular- und Auswahlblöcke darin - die bekommen weiter unten
   ihre eigene Begrenzung.
   Der Meldungs-Container liegt AUSSERHALB von #checkout (layout/header.tpl →
   alert_list.tpl) und muss mitwandern - sonst steht eine Fehlermeldung
   schmal und mittig über breitem Inhalt. */
/* Die Kasse ist SCHMALER als der Rest des Shops und steht MITTIG:
   calc(100% - 48px), gedeckelt auf 1040px. Warenkorb, Artikelseite und
   Referenzen laufen weiter auf 2030px - dieser Unterschied ist gewollt und
   abgestimmt. Sie besteht fast nur aus Formularfeldern und Auswahlkarten;
   über zwei Meter Bildschirm gezogen wird sie schlechter zu bedienen, nicht
   großzügiger.
   1040px ist keine neue Zahl, sondern die vorhandene Formular- und
   Lesebreite des Projekts (Textseiten wie Impressum/AGB, Kontaktseite).

   WICHTIG: Die Breite hängt HIER und nur hier. Eine Zwischenfassung hatte
   die Seite auf 2030px gelassen und stattdessen jedem Block einzeln eine
   Begrenzung gegeben (Karten, Formulare, Auswahlkarten, Buttonzeile,
   Rechtshinweis, Schrittanzeige) - sechs Stellen für eine Größe, die
   zwangsläufig auseinanderlaufen. Wer die Kasse breiter oder schmaler will,
   ändert genau diesen einen Wert.

   Der Meldungs-Container liegt AUSSERHALB von #checkout (layout/header.tpl →
   alert_list.tpl) und muss mitwandern - sonst steht eine Fehlermeldung
   breiter als der Inhalt darunter. */
body[data-page="11"] #checkout,
body[data-page="11"] #alert-list.container {
  width: calc(100% - 48px);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* --- Seitenüberschrift -------------------------------------------------- */
/* Jeder Schritt bringt seine eigene <h1> mit ("Rechnungs- und
   Lieferadresse", "Versand- und Zahlungsart", "Zusammenfassung"). Der
   Entwurf schreibt an der Stelle durchgehend "Kasse" - das ist eine
   INHALTLICHE Änderung und bleibt deshalb aus. Hier nur dieselbe Optik wie
   die Warenkorb-Überschrift, damit die beiden Seiten zusammenpassen. */
body[data-page="11"] #checkout h1 {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.37px;
  color: #1B1B1B;
  margin-bottom: 24px;
}

/* --- Schrittanzeige als Pillen ------------------------------------------ */
/* Im Entwurf gibt es sie nicht - sie bleibt, weil der Ablauf bleibt: Ohne
   sie wüsste der Kunde nicht, wie viele Schritte noch kommen, und das ist
   bei einer mehrstufigen Kasse die häufigste Abbruchursache.
   FORM und FARBEN sind bewusst die der FAQ-Filter (.amewo-faq-pill): weiße
   Pille mit ruhigem Rahmen, 8px Rundung, Inter SemiBold, aktive Pille in
   Hellblau mit weißer Schrift. Der Shop hat damit EIN Pillen-Aussehen und
   nicht zwei. Wer die Form oder die Farben ändert, sollte das andere
   mitnehmen; die MASSE dürfen auseinandergehen (Begründung unten an der
   Pille selbst).

   NOVA baut die Leiste dagegen als graues Band mit Rahmen, Pfeilspitzen
   zwischen den Stufen und einem Unterstrich unter der aktiven. Davon muss
   alles weg - die Pille trägt den Zustand jetzt selbst. */
/* Die Pillen stehen mittig in der Leiste; die Leiste selbst füllt den
   Kassen-Container, der ja bereits mittig und auf 1040px begrenzt ist.
   Einen eigenen Schutzabstand oder eine eigene Breite braucht sie deshalb
   NICHT - beides käme doppelt. */
body[data-page="11"] .stepper.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  overflow: visible;
  margin-bottom: 32px;
}
/* Die Stufen sind Bootstrap-Spalten (col-lg-4 bzw. col-auto). Deren eigene
   Breiten müssen weg; ab md teilen sich die drei Pillen die Containerbreite
   zu gleichen Teilen (flex: 1 1 0 - gleiche Breite unabhängig davon, wie
   lang die Beschriftung ist; mit flex-basis:auto wäre "Zusammenfassung"
   schmaler als "Rechnungs- und Lieferadresse").
   Darunter bleiben sie inhaltsbreit und umbrechen - drei gestreckte Pillen
   nebeneinander wären auf dem Telefon nicht mehr lesbar. */
body[data-page="11"] .stepper .step {
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  padding: 0;
  background: transparent;
}
@media (min-width: 768px) {
  body[data-page="11"] .stepper .step {
    flex: 1 1 0;
  }
}
/* {link} rendert ein <a>, und das ist von Haus aus inline - die Pille darin
   würde deshalb auf Inhaltsbreite schrumpfen statt ihr Drittel zu füllen.
   Schritt 3 ist im Original kein Link und braucht das nicht, stört sich aber
   auch nicht daran. */
body[data-page="11"] .stepper .step > a {
  display: block;
}
body[data-page="11"] .stepper .step-active {
  background: transparent;
}
/* Die Pille selbst. min-height muss zurück: NOVA gibt .step-content 2.875rem,
   was für ein Band gedacht war und die Pille unnötig hoch macht. */
body[data-page="11"] .stepper .step .step-content {
  display: flex;
  width: 100%;
  align-items: center;
  /* Inhalt mittig in der gestreckten Pille. NOVA schiebt Nummer, Text und
     Häkchen stattdessen mit auto-Rändern an die Ränder - das ist weiter
     unten zurückgesetzt, sonst klebte die Nummer links und das Häkchen
     rechts an der Kante. */
  justify-content: center;
  text-align: center;
  gap: 12px;
  min-height: 0;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* Eine Stufe größer als die FAQ-Pillen (dort 8/18px bei 13/18er Schrift).
     Form, Rundung und Farben bleiben identisch - nur die Maße wachsen.
     Grund: Die FAQ-Pillen sind eine dichte Filterreihe mit kurzen Wörtern,
     hier stehen lange Beschriftungen ("Rechnungs- und Lieferadresse"), und
     die Leiste ist die einzige Orientierung im Bestellvorgang. */
  padding: 12px 22px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* NOVA schiebt Nummer, Text und Häkchen mit margin-left/right: auto
   auseinander, damit sie das breite Band füllen (clear.css:26794 ff.).
   In einer Pille sollen sie zusammenstehen - der Abstand kommt aus dem gap. */
body[data-page="11"] .checkout-steps .badge-pill,
body[data-page="11"] .checkout-steps .step-text,
body[data-page="11"] .checkout-steps .step-check {
  margin-left: 0;
  margin-right: 0;
}
/* Pfeilspitzen und Unterstrich: beides gehörte zum Band.
   Die Pfeilspitzen sind zwei ineinandergeschobene Dreiecke aus border-Farben
   an .step::after / ::before. NOVA blendet sie selbst aus - aber erst
   unterhalb von 992px. Genau deshalb fielen sie zuerst nicht auf: auf
   schmalen Fenstern sah die Leiste richtig aus.
   Den Unterstrich setzt NOVA an ZWEI Stellen (.step-active für erledigte,
   .step-current für die aktuelle Stufe) - beide müssen weg, sonst bleibt
   einer stehen. */
body[data-page="11"] .stepper .step::after,
body[data-page="11"] .stepper .step::before,
body[data-page="11"] .stepper .step-active .step-content::after,
body[data-page="11"] .stepper .step-current .step-content::after {
  display: none;
}
body[data-page="11"] .stepper .step-text {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
/* Erledigte Stufen bleiben weiß, tragen aber dunklen Text und ein blaues
   Häkchen - sie sind anklickbar (Rücksprung) und sollen nicht wie die noch
   ausstehenden aussehen. */
body[data-page="11"] .stepper .step-active .step-text {
  color: #1B1B1B;
}
/* :not(.step-current) ist hier PFLICHT. NOVA vergibt der aktuellen Stufe
   BEIDE Klassen gleichzeitig - step-active und step-current (siehe
   inc_steps.tpl). Ohne den Ausschluss ersetzt dieser Hover die blaue Füllung
   der aktuellen Pille durch Hellgrau, während die Beschriftung weiß bleibt:
   weiße Schrift auf hellgrauem Grund, praktisch unlesbar.
   Die aktuelle Pille bekommt ihren eigenen Hover eine Stufe tiefer statt
   heller - so bleibt die weiße Schrift lesbar. */
body[data-page="11"] .stepper .step-active:not(.step-current) .step-content:hover {
  background: #F5F7FA;
}
body[data-page="11"] .stepper .step-current .step-content:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}
/* Die aktuelle Stufe: gefüllt wie .amewo-faq-pill.is-active.
   Weiße Schrift auf #B4D6FF ist mit ~1,5:1 schwach - übernommen wird sie
   trotzdem, weil dieselbe Kombination im Shop bereits an den FAQ-Pillen und
   den blauen Buttons steht und eine Ausnahme hier den Bruch größer machen
   würde als der Gewinn. Wenn das später umgestellt wird, dann an allen drei
   Stellen gemeinsam. */
body[data-page="11"] .stepper .step-current .step-content {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}
body[data-page="11"] .stepper .step-current .step-text {
  color: #FFFFFF;
}
/* Die Nummernblase zieht ihre Farbe aus .badge-primary, also aus der
   Primärfarbe der Template-Einstellungen (Rot). In der Kasse ist die
   Schrittanzeige aber keine Signalhandlung, sondern Orientierung. */
body[data-page="11"] .stepper .badge {
  background: var(--color-secondary);
  color: #FFFFFF;
}
body[data-page="11"] .stepper .badge-secondary {
  background: #F5F7FA;
  color: var(--color-text-muted);
}
/* Auf der gefüllten Pille verschwände eine blaue Blase in der Fläche -
   deshalb dort umgekehrt: weiß mit blauer Ziffer. */
body[data-page="11"] .stepper .step-current .badge {
  background: #FFFFFF;
  color: #6BA7E8;
}
/* Das Häkchen an erledigten Stufen (clear.css:26802, ebenfalls Akzentfarbe).
   Bewusst der dunklere Blauton: Es steht auf der weißen Pille, dort wäre
   #B4D6FF mit rund 1,5:1 kaum zu erkennen - und das Häkchen ist die einzige
   Rückmeldung, dass ein Schritt abgeschlossen ist. */
body[data-page="11"] .checkout-steps .step-check {
  color: #6BA7E8;
}

/* --- Gleiche Breite auf ALLEN Schritten --------------------------------- */
/* Schritt "Versand- und Zahlungsart" war schmaler als die übrigen: NOVA legt
   seinen Inhalt dort in {col cols=12 lg=9} (step3_shipping_options.tpl:6),
   also 75 % der Breite. Adressschritt und Zusammenfassung benutzen cols=12.
   Es fehlt rechts NICHTS - die Spalte hat kein Geschwister, die 25 % bleiben
   einfach leer. NOVA hält sie für eine Seitenspalte frei, die in diesem
   Layout nicht existiert.
   Der Selektor greift bewusst über den direkten Kindpfad: col-lg-9 kommt in
   den Kassen-Templates nur an dieser einen Stelle als Kind einer Zeile
   direkt unter #checkout vor - die lg=3-Spalten in Bestätigung und
   Bestellabschluss liegen tiefer und bleiben unangetastet. */
body[data-page="11"] #checkout > .row > .col-lg-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* --- Karten ------------------------------------------------------------- */
/* Der Entwurf gliedert die Kasse in weiße Karten auf grauem Grund - genau
   wie Warenkorb und Artikelseite. JTL benutzt dafür drei verschiedene
   Bausteine, die hier dieselbe Fläche bekommen:
     .checkout-shipping-form > fieldset  - Schritt "Versand- und Zahlungsart"
     .card                               - Schritt "Zusammenfassung"
     form#neukunde / .checkout-register-form  - Adress-/Registrierschritt
                                                                            */
/* WICHTIG, hier lag ein hartnäckiger Fehler: NICHT auf `fieldset` allein
   zielen. In den Kassen-Templates stecken ACHT fieldsets, teils ineinander -
   allein inc_billing_address_form.tpl hat vier (Rechnungsadresse,
   Kontaktdaten und zwei verschachtelte). Eine Regel auf `fieldset` machte
   aus jedem eine Karte MIT 32px Innenabstand; bei Verschachtelung summierte
   sich das. Im Adressschritt standen dadurch Rechnungs- und Lieferteil auf
   zwei verschiedenen senkrechten Fluchten, und ein Teil lag als weiße Karte
   in der weißen Karte.
   Karten sollen nur die drei fieldsets aus Schritt 3 sein - Versandart,
   Zahlungsart, Verpackungsart. Die sind die DIREKTEN Kinder des dortigen
   Formulars, deshalb der Kindpfad. Alle übrigen fieldsets bleiben, was sie
   sind: reine Gruppierung ohne eigene Fläche. */
body[data-page="11"] #checkout .checkout-shipping-form > fieldset,
body[data-page="11"] #checkout .card {
  background: #FFFFFF;
  border: 0;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
}
/* NOVAs Karten bringen eigene Innenabstände in Kopf und Körper mit. Da die
   Karte selbst jetzt polstert, kämen die doppelt. */
body[data-page="11"] #checkout .card-header,
body[data-page="11"] #checkout .card-body {
  background: transparent;
  border: 0;
  padding: 0;
}
body[data-page="11"] #checkout .card-header {
  margin-bottom: 16px;
}
/* Abschnittsüberschriften in den Karten ("Versandart", "Zahlungsart",
   "Rechnungsadresse"). NOVA vergibt dafür .h2 - die shopweite
   Überschriftenregel setzt sie damit auf Plus Jakarta. Der Entwurf zeigt
   hier Inter, dieselbe dokumentierte Ausnahme wie bei den Produktkacheln
   und der Newsletter-Überschrift. */
body[data-page="11"] #checkout fieldset > .h2,
body[data-page="11"] #checkout .card-header .h3,
body[data-page="11"] #checkout .card-header .h4 {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.45px;
  color: #1B1B1B;
  margin-bottom: 20px;
}
/* Das Adressformular aus Schritt 2 liegt frei in der Spalte, ohne .card.
   Es bekommt die Fläche über sein Formular. */
body[data-page="11"] #checkout form#neukunde,
/* margin-top 0: NOVA gibt dem Formular 16px nach oben - die Karte "Als
   Neukunde fortfahren" stand dadurch 16px tiefer als "Ich bin bereits Kunde"
   daneben. Untereinander (schmale Fenster) trennt die untere 24px-Fuge der
   Kundenkarte. */
body[data-page="11"] #checkout form.checkout-register-form {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px;
  margin-top: 0;
  margin-bottom: 24px;
}
/* Die grauen Trennlinien zwischen den Abschnitten des Adressformulars raus.
   NOVA setzt fünf <hr> (inc_billing_address_form.tpl 24/165/432/581 und
   customer_shipping_contact.tpl:12), um "Name", "Rechnungsadresse" und
   "Kontaktdaten" voneinander abzusetzen. Diese Aufgabe übernimmt in unserem
   Layout die Beschriftungsspalte links: Jeder Abschnitt hat dort seine
   eigene Überschrift. Die Linie sagt dasselbe ein zweites Mal und
   zerschneidet dabei die Karte.
   Ein Selektor für alle fünf - sie liegen sämtlich innerhalb des Formulars,
   und andere <hr> gibt es dort nicht. */
body[data-page="11"] #checkout form#neukunde hr,
body[data-page="11"] #checkout form.checkout-register-form hr {
  display: none;
}

/* --- Zahl- und Versandarten als anklickbare Karten ---------------------- */
/* Der Entwurf zeigt je Zahlungsart eine Karte, die ausgewählte hellblau
   hinterlegt. NOVA rendert beides als Bootstrap-Radios
   (.custom-control.custom-radio); die Karte entsteht hier rein aus CSS,
   das Markup bleibt unangetastet - Formularname, Wert und Pflichtstatus
   der Radios sind für die Verarbeitung nötig. */
/* Die Zahlungsarten stecken in einem {row} (step4_payment_options.tpl:6),
   die Versandarten NICHT. Eine Bootstrap-Zeile hat -15px Außenrand je Seite,
   ausgeglichen normalerweise durch das Innenpolster eines {col} - genau das
   fehlt dort aber, zwischen {row} und den Karten liegt nur der klassenlose
   Behälter der Radiogruppe.
   Folge: Die Zahlungskarten standen 15px links und rechts über den
   Karteninhalt hinaus und flossen nicht mit Überschrift und Trennlinie
   darüber. Die Versandarten sahen daneben schmaler aus - obwohl sie die
   richtigen waren. */
body[data-page="11"] .checkout-payment-options {
  margin-left: 0;
  margin-right: 0;
}
body[data-page="11"] .checkout-payment-method,
body[data-page="11"] .checkout-shipping-form-options .custom-control {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 12px;
  background: #FFFFFF;
  transition: background-color .15s ease, border-color .15s ease;
}
/* Die Beschriftung trägt den Innenabstand, nicht der Behälter: Nur so ist
   die GANZE Karte anklickbar - ein <label for> ist der einzige Bereich, der
   das Radio schaltet. Läge das padding am Behälter, wäre der Rand tot. */
/* display:flex und NICHT block - das ist hier kein Geschmacksfrage.
   Im Label stehen mehrere Blockelemente (die Inhaltszeile, der Span für
   artikelabhängige Zuschläge) und dazwischen die Zeilenumbrüche aus dem
   Template. In einem BLOCK-Container erzeugt dieser Leerraum anonyme Boxen,
   die eine volle Zeilenhöhe mitbringen - die Versandart-Karte war dadurch
   rund 30px höher als ihr Inhalt, der Text saß oben statt mittig.
   Ein FLEX-Container erzeugt aus reinem Leerraum keine Elemente; die Höhe
   ergibt sich wieder aus dem, was wirklich drinsteht. align-items zentriert
   den Inhalt zusätzlich sauber zwischen den Innenabständen. */
body[data-page="11"] .checkout-payment-method .custom-control-label,
body[data-page="11"] .checkout-shipping-form-options .custom-control-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 16px 20px;
  cursor: pointer;
}
/* Die Inhaltszeile ist selbst eine Bootstrap-Zeile und soll die Kartenbreite
   ausfüllen - als Flex-Element würde sie sonst auf Inhaltsbreite schrumpfen.
   align-items: center statt Bootstraps stretch. Die drei Spalten haben
   unterschiedliche Zeilenhöhen (Name 24px, Lieferzeit und Preis 20px).
   Gestreckt sind alle Spalten gleich hoch, der Text sitzt aber jeweils OBEN
   in seiner Spalte - die beiden rechten standen dadurch 2px höher als der
   Name. Zentriert richten sich alle drei an derselben Mittellinie aus, und
   das gilt auch, wenn eine Spalte eine zweite Zeile bekommt
   (Hinweistext, Zuschlag). */
body[data-page="11"] .checkout-payment-method .custom-control-label > .form-row,
body[data-page="11"] .checkout-shipping-form-options .custom-control-label > .form-row {
  width: 100%;
  margin-bottom: 0;
  align-items: center;
}
/* Ausgewählte Karte. :has() greift auf den Behälter zurück, weil das
   angehakte Radio ein Kind ist - dieselbe Technik wie beim leeren
   Warenkorb weiter oben. */
body[data-page="11"] .checkout-payment-method:has(.custom-control-input:checked),
body[data-page="11"] .checkout-shipping-form-options .custom-control:has(.custom-control-input:checked) {
  background: var(--color-secondary-bg);
  border-color: var(--color-secondary);
}
body[data-page="11"] .checkout-payment-method:hover,
body[data-page="11"] .checkout-shipping-form-options .custom-control:hover {
  border-color: var(--color-secondary);
}
/* Der Bootstrap-Radiopunkt entfällt - im Entwurf markiert die Fläche die
   Auswahl. Er wird über seine beiden Pseudoelemente ausgeblendet, das
   <input> selbst BLEIBT bedienbar und im Barrierefreiheits-Baum.
   Dafür braucht die Karte einen sichtbaren Fokus, sonst wüsste ein
   Tastaturnutzer nicht mehr, wo er steht. */
body[data-page="11"] .checkout-payment-method .custom-control-label::before,
body[data-page="11"] .checkout-payment-method .custom-control-label::after,
body[data-page="11"] .checkout-shipping-form-options .custom-control-label::before,
body[data-page="11"] .checkout-shipping-form-options .custom-control-label::after {
  display: none;
}
body[data-page="11"] .checkout-payment-method:has(.custom-control-input:focus-visible),
body[data-page="11"] .checkout-shipping-form-options .custom-control:has(.custom-control-input:focus-visible) {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
/* Die zweite, leere Zeile in der Versandart-Karte.
   Die Karte war 82px hoch statt 58, der Text klebte oben, darunter stand
   eine leere Zeile. Ursache ist eine Regel aus der PRODUKTLISTE:

       #result-wrapper .title { margin-bottom: 1.5rem; }   clear.css:25024

   NOVA legt die komplette Kasse in <div id="result-wrapper">
   (checkout/index.tpl:10). Die Titelspalte der Versandart heißt
   "col title col-sm-5 col-12" - also greift die Regel. 24px Außenabstand an
   einem FLEX-Element gehen voll in die Zeilenhöhe ein: 24 Inhalt + 24
   Abstand = 48px Zeile statt 24.

   Zahlungsarten sind nicht betroffen: dort ist .title ein <span>
   (inc_payment_methods.tpl:16), an einem Inline-Element bleibt
   margin-bottom wirkungslos. Aus demselben Grund schadet auch
   "#result-wrapper .desc { margin-bottom: 2rem }" (clear.css:25026) hier
   nichts - die Lieferzeit ist ein <small>.

   Spezifität: NOVAs Regel steht bei (1,1,0), gewinnt also gegen jede noch
   so lange Klassenkette. Deshalb muss #result-wrapper im eigenen Selektor
   stehen - siehe AGENTS.md, "Vendor-Regeln mit ID". */
body[data-page="11"] #result-wrapper .checkout-shipping-form-options .title {
  margin-bottom: 0;
}

/* Typografie in den Karten: Name kräftig, Zusatzangaben gedämpft. */
body[data-page="11"] .checkout-payment-method .title,
body[data-page="11"] .checkout-shipping-form-options .title {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #1B1B1B;
}
body[data-page="11"] .checkout-payment-method .checkout-payment-method-note,
body[data-page="11"] .checkout-payment-method .checkout-payment-method-note small,
body[data-page="11"] .checkout-shipping-form-options .desc {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
/* NOVA lässt den Aufpreis mit float:right laufen. In der Karte reicht die
   Ausrichtung im Raster. */
body[data-page="11"] .checkout-payment-method .checkout-payment-method-badge {
  float: none;
  margin-left: 0;
  font-weight: 600;
  color: #1B1B1B;
}

/* --- Bestätigungsschritt: Kartenraster ---------------------------------- */
/* Die vier Karten der Zusammenfassung (Adressen, Versand/Zahlung, Kommentar,
   Gutschein) liegen bei NOVA in EINER Zeile mit der Klasse .row-eq-height.
   Zu der Klasse gibt es in NOVA allerdings gar keine Regel - weder in
   clear.css noch im kritischen CSS. Der Name verspricht also etwas, das
   nirgends eingelöst wird; die Karten waren unterschiedlich hoch.
   Nachgeholt über height an der KARTE: Die Spalte streckt Bootstrap schon
   von selbst (align-items: stretch), nur füllt die Karte sie nicht aus.
   Die 24px sind der eigene Außenabstand der Karte nach unten - ohne den
   Abzug stünde sie um genau diesen Betrag über.
   Gestreckt wird je Flex-Zeile, nicht über alle vier: Adressen und
   Versand/Zahlung bilden die erste Zeile, Kommentar und Gutschein die
   zweite. Genau so ist es gewollt. */
body[data-page="11"] .row-eq-height > [class*="col-"] > .card {
  height: calc(100% - 24px);
}
/* Das Kommentarfeld füllt die Breite, wenn es allein in seiner Zeile steht.
   NOVA gibt ihm md-6, daneben gehört der Gutschein-Kasten - der erscheint
   aber nur, wenn überhaupt ein Kupon möglich ist. Ohne ihn stand das
   Kommentarfeld auf halber Breite und rechts blieb Weißraum.
   flex-grow löst beide Fälle mit einer Regel: allein wächst die Spalte auf
   100 %, neben dem Gutschein bleibt es bei der Hälfte, weil dann kein Platz
   mehr frei ist. Eine Abfrage auf "ist der Gutschein da" braucht es nicht. */
@media (min-width: 768px) {
  body[data-page="11"] .row-eq-height > [class*="col-"]:has(> #panel-edit-comment) {
    flex-grow: 1;
    max-width: 100%;
  }
}
/* NOVAs .min-h-card erzwingt 188px Mindesthöhe. Das war für die schmalen
   Karten gedacht; über die volle Breite entsteht daraus eine große leere
   Fläche unter dem dreizeiligen Eingabefeld. Die Höhe ergibt sich jetzt aus
   dem Inhalt und der Streckung durch die Zeile. */
body[data-page="11"] #checkout .min-h-card {
  min-height: 0;
}

/* --- Bestätigungsschritt: AGB-Hinweis und die Linien darum -------------- */
/* NOVA rahmt den Bereich mit den Bestell-Checkboxen in zwei freistehende
   <hr> ein (step5_confirmation.tpl). Die sind direkte Kinder des Formulars,
   liegen also AUSSERHALB jeder Karte - auf dem grauen Seitengrund stehen sie
   als zwei nackte Striche zwischen den weißen Flächen.
   In einem Layout aus Karten trennt die Fläche; die Striche sind ein Rest
   aus NOVAs durchlaufender Seite. Der Selektor nutzt >, damit die <hr> INNEN
   in den Karten (Summenblock von inc_order_items.tpl) unangetastet bleiben -
   dort trennen sie tatsächlich etwas. */
/* Es sind DREI Linien, nicht zwei: Die dritte
   (<hr class="checkout-confirmation-pre-form-hr">, step5_confirmation.tpl:180)
   steht VOR dem Formular und damit außerhalb von #complete_order - ein
   Selektor auf das Formular greift bei ihr nicht. Sie trennt die Kartenzeile
   vom Bestellblock und hat ordentlich Abstand nach oben und unten; im Layout
   aus Karten blieb davon eine freistehende Linie mitten im grauen Grund. */
body[data-page="11"] #complete_order > hr,
body[data-page="11"] .checkout-confirmation-pre-form-hr {
  display: none;
}
/* Der Rechtshinweis stand bisher ohne eigene Fläche zwischen zwei Karten.
   Er ist Pflichttext und gehört zum Bestellblock - deshalb dieselbe weiße
   Karte wie alles andere, direkt über dem Bestellbutton. */
body[data-page="11"] .checkout-confirmation-legal-notice {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px 32px;
  margin-bottom: 24px;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text-muted);
}
body[data-page="11"] .checkout-confirmation-legal-notice p:last-child {
  margin-bottom: 0;
}
body[data-page="11"] .checkout-confirmation-legal-notice a {
  color: #6BA7E8;
}

/* --- Anmeldeblock (Schritt 0): "Anmelden" und "Passwort vergessen" ------- */
/* Beide sind .btn - links ein Submit, rechts ein btn-link
   (register/form/customer_login.tpl). Sie stehen in zwei lg-6-Spalten
   innerhalb der ohnehin schmalen lg-4-Anmeldespalte; "Passwort vergessen"
   passt dort nicht in eine Zeile, bricht um und wird dadurch anders hoch als
   der Button daneben. Zusätzlich setzt clear.css:27025 den Link auf
   display:block mit voller Breite, wodurch er an der Oberkante klebt.
   Beide bekommen deshalb dieselbe Mindesthöhe und zentrieren ihren Inhalt -
   dann stehen sie auf einer Linie, unabhängig davon, ob der Text umbricht. */
/* Sie stehen bei NOVA in zwei lg-6-Spalten. Die Anmeldebox ist aber selbst
   nur eine lg-4-Spalte - je Hälfte bleiben rund 140px, und "Passwort
   vergessen" braucht bei 16px etwa 150. Der Link brach deshalb um und stand
   zweizeilig neben einem einzeiligen Button.
   Nebeneinander ist an dieser Stelle einfach zu wenig Platz. Deshalb
   untereinander: Button über die volle Breite, Link darunter mittig. Das
   hält auch, wenn die Beschriftung in einer anderen Sprache länger wird -
   ein nowrap hätte den Link nur aus der Box laufen lassen.
   Der Selektor greift über :has() genau die Zeile mit dem Link; die
   Feldzeilen darüber bleiben unangetastet. */
body[data-page="11"] #existing-customer .form-row:has(.customer-login-buttons-forgot) > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
body[data-page="11"] #existing-customer .form-row:has(.customer-login-buttons-forgot) .btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}
/* Der Link ist ein .btn - ohne Zurücksetzen brächte er die Buttonhöhe und
   -polsterung mit und stünde als zweiter, gleich großer Kasten darunter. */
body[data-page="11"] #existing-customer .customer-login-buttons-forgot {
  display: block;
  min-height: 0;
  padding: 0;
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

/* --- Buttonzeile am Fuß jedes Schritts ---------------------------------- */
/* "Zurück" ist die Nebenhandlung und im Entwurf kein gefüllter Button. */
body[data-page="11"] .checkout-button-row {
  margin-top: 24px;
}
body[data-page="11"] .checkout-button-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 8px;
  font-size: 16px;
  /* Der Grund für die ganze Regelgruppe: Ohne nowrap bricht
     "Kundendaten abschicken" um und der Button wird hoch statt breit. */
  white-space: nowrap;
}
/* Buttons auf INHALTSBREITE statt auf Spaltenbreite.
   NOVA gibt den Spalten feste Rasterbreiten (Schritt 1: md-4 xl-3, Schritt 3:
   md-5 und md-4) und den Buttons darin block=true, also 100 % der Spalte.
   Bei 1040px Inhaltsbreite sind 25 % rund 260px - zu schmal für
   "Kundendaten abschicken", zu breit für "Zurück". Beides sah zufällig aus.
   Jetzt bestimmt die Beschriftung die Breite.

   Das min-width ist der Grund, warum die Buttons einer Zeile TROTZDEM gleich
   breit aussehen: Es liegt über der Länge aller kurzen Beschriftungen
   ("Zurück", "Weiter", "Warenkorb ändern"), die landen deshalb alle auf
   demselben Maß. Nur "Zahlungspflichtig bestellen" im Bestätigungsschritt
   ist von sich aus breiter - eine gemeinsame feste Breite für ALLE Zeilen
   würde entweder diesen Button abschneiden oder "Zurück" absurd breit
   machen. Wer es dort exakt gleich haben will, ändert diesen einen Wert auf
   die Breite der längsten Beschriftung.
   Erst ab md: Darunter sind die Spalten col-12, und über die volle Breite
   gestapelte Buttons sind auf dem Telefon richtig so.
   ml-auto-util an der Weiter-Spalte bleibt wirksam - die Hauptaktion steht
   weiterhin rechts. */
/* --- Adressformular: Häkchen und Button in die Feldflucht --------------- */
/* Das Adressformular ist zweispaltig aufgebaut: Beschriftung in einer
   md-4-Spalte, Felder in md-8 daneben. Zwei Bausteine machen das nicht mit,
   weil sie in eigenen Zeilen über die volle Breite sitzen:
     - das Häkchen "Lieferadresse entspricht der Rechnungsadresse"
       (inc_shipping_address.tpl, {col cols=12}) - beginnt ganz links unter
       den BESCHRIFTUNGEN, obwohl es zu den Eingaben gehört
     - die Buttonzeile, die NOVA zusätzlich per margin-left:auto an den
       rechten Rand schiebt (clear.css:26848)
   Der Button stand dadurch weit rechts, ohne Bezug zu irgendetwas darüber,
   und das Häkchen in einer dritten Flucht. Beides bekommt jetzt denselben
   Einzug wie die Feldspalte - danach hat das Formular genau ZWEI linke
   Kanten: Beschriftungen und alles andere.
   33,333 % ist keine geschätzte Zahl, sondern exakt die Rechnung, die
   Bootstrap für offset-md-4 benutzt. Sie geht auf, weil alle Zeilen des
   Formulars gleich breit sind - der Prozentwert bezieht sich also überall
   auf dieselbe Grundbreite wie bei der md-4-Beschriftungsspalte.
   Nur ab md: Darunter liegen Beschriftung und Feld ohnehin untereinander. */
/* "Lieferadresse entspricht der Rechnungsadresse" ist keine Nebenbemerkung,
   sondern eine Weiche: Wer sie abwählt, bekommt ein zweites Adressformular.
   Als nackte Zeile zwischen zwei Abschnitten wurde sie leicht übersehen.
   Deshalb dieselbe Bauform wie die Zahl- und Versandarten im nächsten
   Schritt - eine anklickbare Karte, im gewählten Zustand hellblau getönt.
   Damit heißt "auswählbar" im ganzen Bestellvorgang dasselbe.

   Sie steht über die VOLLE Breite des Formulars und nicht in der Flucht der
   Feldspalte. Das ist Absicht: Die Weiche gehört zu keiner der beiden
   Spalten - sie trennt den Rechnungs- vom Lieferadressteil. Als Band über
   die ganze Breite liest sie sich als Abschnittswechsel, eingerückt sähe sie
   aus wie ein weiteres Feld der Rechnungsadresse.

   Die Polsterung sitzt am ÄUSSEREN Kasten und nicht am Label. Grund:
   Bootstrap setzt Kästchen und Häkchen als absolut positionierte
   Pseudoelemente mit left:-1.5rem - bezogen auf .custom-control, nicht auf
   das Label. Polstert man das Label, muss man beide Marker einzeln
   nachschieben und trifft die Bezugskante leicht daneben. Polstert man
   außen, wandert .custom-control samt Markern als Ganzes - ohne dass an
   deren Positionierung irgendetwas angefasst werden muss.
   Preis dafür: Anklickbar bleibt das Label, nicht die ganze Karte. Bei den
   Zahlungsarten ist das anders gelöst, weil dort die Fläche selbst die
   Auswahl ist; hier steht ein einzelnes Häkchen mit kurzem Text. */
/* FLUCHT: Der Lieferadressteil steckt eine Ebene tiefer als der
   Rechnungsadressteil. NOVA legt ihn in {row class="inc-shipping-address"} >
   {col cols=12} und darin noch einmal in {row} > {col md=4}/{col md=8} -
   der Rechnungsteil hat diese Zwischenebene nicht.
   Jede Bootstrap-Zeile bringt -15px Außenrand mit, jede Spalte +15px
   Innenabstand. Beim Rechnungsteil hebt sich das einmal auf, beim
   Lieferteil bleibt die zusätzliche Ebene übrig: Beschriftungen und Felder
   standen dadurch rund 30px weiter links bzw. der Kasten entsprechend
   breiter als der Abschnitt darüber - im Formular waren drei verschiedene
   Kanten sichtbar.
   Die Zwischenebene wird deshalb neutralisiert. Die inneren Zeilen bleiben
   unangetastet und verhalten sich danach genau wie im Rechnungsteil. */
body[data-page="11"] #neukunde .inc-shipping-address {
  margin-left: 0;
  margin-right: 0;
}
body[data-page="11"] #neukunde .inc-shipping-address > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Gilt für BEIDE Weichen des Bestellvorgangs - "Lieferadresse entspricht der
   Rechnungsadresse" (Schritt 1) und "Neues Kundenkonto erstellen"
   (Schritt 0). Sie tragen dieselbe Klasse control-toggle und tun dasselbe:
   ein Häkchen, das weitere Felder ein- oder ausblendet. Deshalb ein Selektor
   für beide statt zweier fast gleicher Regeln. */
body[data-page="11"] #checkout .form-group.checkbox.control-toggle {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #FFFFFF;
  padding: 14px 18px;
  /* Luft nach oben und unten. Die Weiche trennt zwei Abschnitte des
     Formulars - sie braucht mehr Abstand als die Felder untereinander,
     sonst liest sie sich als weitere Zeile der Rechnungsadresse.
     Mehr als NOVAs 1rem an .form-group; 32px waren dem Nutzer zu viel. */
  margin-top: 24px;
  margin-bottom: 24px;
  transition: background-color .15s ease, border-color .15s ease;
}
/* Gastbestellung: "Neues Kundenkonto erstellen" und "Lieferadresse
   entspricht der Rechnungsadresse" folgen direkt aufeinander. Sie stehen in
   verschiedenen Zeilen, die Außenabstände fallen deshalb NICHT zusammen,
   sondern addierten sich (vorher 32 + 32 = 64px). Als Paar rücken sie auf
   12px zusammen. */
body[data-page="11"] #checkout .register-form-account:has(~ .inc-shipping-address) .form-group.checkbox.control-toggle {
  margin-bottom: 0;
}
body[data-page="11"] #checkout .register-form-account ~ .inc-shipping-address .form-group.checkbox.control-toggle {
  margin-top: 12px;
}
body[data-page="11"] #checkout .form-group.checkbox.control-toggle .custom-control-label {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: #1B1B1B;
  cursor: pointer;
}
body[data-page="11"] #checkout .form-group.checkbox.control-toggle:hover {
  border-color: var(--color-secondary);
}
/* --- Einzelne Felder über die volle Breite ------------------------------ */
/* NOVA gibt Firma und Telefon je eine halbe Spalte (md-6), weil daneben
   Firmenzusatz bzw. Fax stehen KÖNNTEN. Sind die im Backend abgeschaltet -
   wie hier -, bleibt das Feld auf halber Breite stehen und daneben Weißraum;
   beim Telefon wird die Beschriftung dadurch sogar abgeschnitten
   ("Telefon - optionale Ang...").
   Der Selektor greift die INNERSTE Spalte: `> .form-group` sorgt dafür, dass
   nur die Spalte trifft, deren direktes Kind die Feldgruppe ist. Ohne diese
   Einschränkung würde :has() auch die umgebenden Spalten (md-8, col-12)
   treffen und die Zweispaltigkeit des Formulars zerlegen.
   Die IDs stammen aus snippets/form_group_simple.tpl (Options-Feld 1). */
@media (min-width: 768px) {
  body[data-page="11"] #checkout [class*="col-"]:has(> .form-group #firm),
  body[data-page="11"] #checkout [class*="col-"]:has(> .form-group #tel) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- "Neues Kundenkonto erstellen" über die volle Breite ---------------- */
/* Die Weiche steckt bei NOVA in einer md-4-Spalte - also in der Breite der
   Beschriftungsspalte. Für "Neues Kundenkonto erstellen" reicht das nicht,
   der Text bricht auf zwei Zeilen um.
   Sie bekommt deshalb die volle Breite, genau wie die Lieferadress-Weiche
   in Schritt 1. Die Passwortfelder daneben (md-8) rutschen dadurch in die
   nächste Zeile und brauchen den Einzug der Feldspalte, sonst begännen sie
   am linken Rand statt in einer Flucht mit den übrigen Feldern. */
@media (min-width: 768px) {
  body[data-page="11"] #checkout .register-form-account > [class*="col-"]:has(.register-form-account-unreg) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  body[data-page="11"] #checkout .register-form-account > .col-md-8 {
    margin-left: 33.333333%;
  }
}

body[data-page="11"] #checkout .form-group.checkbox.control-toggle:has(.custom-control-input:checked) {
  background: var(--color-secondary-bg);
  border-color: var(--color-secondary);
}

/* Die Buttonzeile bleibt rechtsbündig (NOVAs margin-left:auto an
   .checkout-button-row-submit) - korrigiert wird nur ihre waagerechte Lage.
   Dafür sind ZWEI Werte nötig, und das ist die Stelle, an der ich zweimal
   danebengelegen habe:
     - die Zeile trägt als Bootstrap-Zeile -15px Außenrand je Seite
       (Button ragte über die Feldkante hinaus)
     - die Spalte darin trägt +15px Innenabstand
       (Button endete 15px VOR der Feldkante)
   Nur eines von beiden zu nullen verschiebt den Button lediglich von der
   einen Seite auf die andere. Beide zusammen setzen ihn exakt auf die
   Inhaltskante des Formulars, also in eine Flucht mit den Feldern darüber.
   Bewusst KEIN margin an der Spalte: Das würde NOVAs auto überschreiben und
   den Button nach links ziehen.
   Gilt für alle Kassenschritte, nicht nur den Adressschritt - das Problem
   ist dasselbe, wo immer eine .checkout-button-row steht.
   Zwischenstand, der wieder weg ist: Eine Fassung hat Button UND Häkchen in
   die Feldspalte eingerückt (margin-left: 33,333%). Das war stimmig, aber
   der Nutzer möchte den Button rechts und das Häkchen über die volle
   Breite. */
body[data-page="11"] #checkout .checkout-button-row {
  margin-left: 0;
  margin-right: 0;
  /* Luft NUR beim Umbruch: `row-gap` wirkt ausschliesslich zwischen
     Flex-Zeilen. Zwischen 992 und ~1400px ist die Spalte zu schmal fuer
     Hinweis und Button nebeneinander, der Button rutscht darunter - und klebte
     mit 0px Abstand am Datenschutz-Hinweis (gemessen bei 1024px; Rueckmeldung
     des Nutzers "gequetscht"). Stehen beide nebeneinander, aendert die Regel
     nichts. */
  row-gap: 16px;
}
body[data-page="11"] #checkout .checkout-button-row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
/* Symbol vor "Bitte beachten Sie unsere Datenschutzerklaerung" (Wunsch des
   Nutzers): Notizblatt aus Font Awesome, das NOVA ohnehin laedt - kein
   zusaetzliches Bild und keine Template-Aenderung.
   inline-block am ::before, damit die Unterstreichung des Links das Symbol
   nicht mitnimmt (Dekorationen laufen nicht in atomare Inline-Boxen). */
/* Hellblau und ohne Unterstreichung (Wunsch des Nutzers). #6BA7E8 ist der
   Blauton fuer Text und Links - das hellere #B4D6FF der Flaechen waere auf
   Weiss praktisch unlesbar (~1,5:1, siehe Farbtabelle in AGENTS.md). */
body[data-page="11"] .checkout-register-form-buttons-privacy a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6BA7E8;
  text-decoration: none;
}
body[data-page="11"] .checkout-register-form-buttons-privacy a:hover,
body[data-page="11"] .checkout-register-form-buttons-privacy a:focus {
  color: #2E6FB8;
  text-decoration: none;
}
body[data-page="11"] .checkout-register-form-buttons-privacy a::before {
  content: "\f15c";
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  font-weight: 400;
}

@media (min-width: 768px) {
  /* Gemeinsame Achse für alles in der Zeile. In Schritt 0 steht neben dem
     Button noch der Datenschutz-Link ("Bitte beachten Sie unsere
     Datenschutzerklärung"). NOVA legt ihn in eine col-12, also eigentlich in
     eine eigene Zeile - durch die Inhaltsbreite oben sitzt er jetzt daneben,
     stand aber an der Oberkante statt auf einer Linie mit dem Button.
     Sein margin-bottom von 1rem (clear.css:26838) stammt aus dem
     ursprünglichen Untereinander und schiebt ihn hier nur nach oben. */
  body[data-page="11"] .checkout-button-row {
    align-items: center;
  }
  body[data-page="11"] .checkout-button-row .checkout-register-form-buttons-privacy {
    margin-bottom: 0;
  }
  body[data-page="11"] .checkout-button-row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  body[data-page="11"] .checkout-button-row .btn-block {
    width: auto;
    min-width: 240px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* --- Schmale Fenster ---------------------------------------------------- */
@media (max-width: 767.98px) {
  body[data-page="11"] #checkout h1 {
    font-size: 30px;
    line-height: 38px;
  }
  body[data-page="11"] #checkout .checkout-shipping-form > fieldset,
  body[data-page="11"] #checkout .card,
  body[data-page="11"] #checkout form#neukunde,
  body[data-page="11"] #checkout form.checkout-register-form {
    padding: 20px;
  }
}

/* ====================================================================== */
/* FORMULARSEITEN DES KONTOBEREICHS                                        */
/*   body[data-page="8"]  = PAGE_NEWSLETTER                                */
/*   body[data-page="10"] = PAGE_REGISTRIERUNG                             */
/*   body[data-page="14"] = PAGE_PASSWORTVERGESSEN                         */
/*                                                                        */
/* Alle drei sind gleich gebaut: Bootstrap-.container, darin eine lg-8-    */
/* oder md-8-Spalte, darin ein <fieldset> mit dem Formular. Ergebnis ohne  */
/* Zutun: Der Inhalt steht LINKS der Seitenmitte (Spalte linksbündig im    */
/* mittigen Container), hat keine Fläche, und die Trennlinien der Formulare*/
/* liegen frei auf dem grauen Grund.                                       */
/*                                                                        */
/* Deshalb EIN gemeinsamer Regelsatz statt dreimal derselbe: gleiche       */
/* Bildsprache wie Warenkorb und Kasse - weiße Karte, 1040px mittig.       */
/* Kommt eine vierte Seite dieser Art dazu (Login, Kontoübersicht), gehört */
/* ihr Seitentyp einfach in die Aufzählung.                                */
/*                                                                        */
/* Die Container tragen auf diesen Seiten teils GAR KEINE eigene Klasse    */
/* (Newsletter), deshalb läuft der Zugriff über den Seitentyp und den      */
/* direkten Kindpfad unter #content - so bleiben verschachtelte Container  */
/* im Inhalt unberührt.                                                    */
/* ====================================================================== */
body[data-page="8"] #content > .container,
body[data-page="10"] #content > .container,
body[data-page="14"] #content > .container,
body[data-page="8"] #content > .container-fluid,
body[data-page="10"] #content > .container-fluid,
body[data-page="14"] #content > .container-fluid {
  width: calc(100% - 48px);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
/* Die lg-8- bzw. md-8-Spalte auf volle Breite: Die Begrenzung übernimmt
   jetzt der Container. Eine zweite Verengung darin würde den Inhalt erneut
   aus der Mitte schieben - genau das war vorher das Problem. */
body[data-page="8"] #content > [class*="container"] > .row > [class*="col-"],
body[data-page="10"] #content > [class*="container"] > .row > [class*="col-"],
body[data-page="14"] #content > [class*="container"] > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}
/* Überschrift wie auf den anderen umgestalteten Seiten. */
body[data-page="8"] #content h1,
body[data-page="10"] #content h1,
body[data-page="14"] #content h1 {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.37px;
  color: #1B1B1B;
  margin-bottom: 24px;
}
/* Hier IST das <fieldset> die Karte - anders als in der Kasse, wo es nur
   Gruppierung ist (siehe Warnung im Kassenabschnitt). Auf diesen Seiten
   umschließt es jeweils genau ein Formular. */
body[data-page="8"] #content fieldset,
body[data-page="10"] #content fieldset,
body[data-page="14"] #content fieldset {
  background: #FFFFFF;
  border: 0;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
}
body[data-page="8"] #content legend,
body[data-page="10"] #content legend,
body[data-page="14"] #content legend {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.45px;
  color: #1B1B1B;
  margin-bottom: 20px;
}
/* Trennlinien raus - in der Karte gliedert die Fläche. Auf der
   Registrierseite sind das die fünf <hr> aus inc_billing_address_form.tpl
   und customer_shipping_contact.tpl, dieselben wie im Adressschritt der
   Kasse. */
body[data-page="8"] #content hr,
body[data-page="10"] #content hr,
body[data-page="14"] #content hr {
  display: none;
}
/* --- Newsletter: Button und Einwilligungstext ---------------------------- */
/* NOVA steckt BEIDE in dieselbe rechte Halbspalte ({col md=6 ml-auto-util},
   newsletter/index.tpl:76). Unter einem vollbreiten Eingabefeld hängen sie
   dadurch mittig-rechts in der Luft, und der Erläuterungstext bricht auf der
   halben Breite unnötig um.
   Die Spalte bekommt volle Breite; der Button wandert per margin-left:auto
   an die rechte Kante - also bündig mit dem Feld darüber. Der Text steht
   darunter über die ganze Breite und linksbündig, wo er hingehört.
   Bewusst NUR für diese Seite: Auf der Registrierseite stehen in denselben
   Zeilen die Feldpaare (Vorname/Nachname), die nebeneinander bleiben müssen.
   margin-left an einem <button> wirkt, weil .btn-block ihn als Blockelement
   ausgibt - bei width:auto bestimmt bei Formularelementen der Inhalt die
   Breite, der Rest bleibt als Außenabstand verteilbar. */
body[data-page="8"] #content fieldset .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}
body[data-page="8"] #content fieldset .row .btn-block {
  margin-left: auto;
}
body[data-page="8"] #content .newsletter-subscribe-consent {
  margin-top: 12px;
  margin-bottom: 0;
  text-align: left;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}

body[data-page="8"] #content .btn,
body[data-page="10"] #content .btn,
body[data-page="14"] #content .btn {
  min-height: 52px;
  border-radius: 8px;
  font-size: 16px;
  white-space: nowrap;
}
@media (min-width: 768px) {
  body[data-page="8"] #content .btn-block,
  body[data-page="10"] #content .btn-block,
  body[data-page="14"] #content .btn-block {
    width: auto;
    min-width: 240px;
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (max-width: 767.98px) {
  body[data-page="8"] #content fieldset,
  body[data-page="10"] #content fieldset,
  body[data-page="14"] #content fieldset {
    padding: 20px;
  }
  body[data-page="8"] #content h1,
  body[data-page="10"] #content h1,
  body[data-page="14"] #content h1 {
    font-size: 30px;
    line-height: 38px;
  }
}

/* ---------------------------------------------------------------------- */
/* Freie Textseiten (Impressum, AGB, Datenschutz, Widerrufsrecht ...):      */
/* Inhalt als weiße Karte auf dem grauen Seitenhintergrund, wie im Entwurf. */
/* Gescopet auf die Seitentypen der Rechts-/Textseiten (body[data-page]):   */
/* 19 Versand, 20 AGB, 21 Datenschutz, 27 Widerrufsrecht, 31 Eigene Seite.  */
/* Frueher nur 31 - AGB, Datenschutz und Widerruf standen deshalb ohne     */
/* weisse Karte da (vom Nutzer gemeldet).                                   */
/* bleiben Kategorie-, Artikel- und Kontoseiten unberührt.                  */
/* Überschrift und Text liegen bei NOVA in zwei getrennten Containern       */
/* (.index-heading-wrapper + .link-content, siehe layout/index.tpl); beide  */
/* bekommen dieselbe Fläche und zusammen die Rundung, sodass sie optisch    */
/* EINE Karte ergeben.                                                      */
/* ---------------------------------------------------------------------- */
/* Überschrift steht ÜBER der Karte auf dem grauen Grund - nur der Inhalt
   liegt auf Weiß. */
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content .index-heading-wrapper,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) {
  width: calc(100% - 48px);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content .index-heading-wrapper {
  background: transparent;
  padding: 0 0 20px;
  margin-top: 24px;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 40px 48px 48px;
  margin-bottom: 56px;
}
/* Frühere Fassung blendete die Brotkrümel auf Textseiten (31) und Kontakt (5)
   aus, weil der Entwurf sie dort nicht zeigt. Auf ausdrücklichen Wunsch
   wieder aktiv - der Entwurf bildet die Orientierung im Shop an dieser
   Stelle schlicht nicht ab, und ohne Pfad fehlt auf Unterseiten der Weg
   zurück. Gestaltung siehe .breadcrumb weiter oben (Optik des früheren
   "Zurück"-Links). Nicht erneut ausblenden. */
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content .index-heading-wrapper h1 {
  font-family: var(--font-family-display);
  font-weight: 700;
  color: #1B1B1B;
}
/* Typografie im Textkoerper. Der Inhalt kommt als HTML aus dem Backend
   (Inhalte -> Seiten), also ohne eigene Klassen - deshalb Elementselektoren.
   Vorher kam alles aus NOVAs Grundstil: Zwischenueberschriften grau in
   Jakarta 400, Fliesstext 14/21 und Zeilen ueber die volle Kartenbreite
   (944px). Das passte weder zur Typografie des Entwurfs noch las es sich gut.
   Zeilenlaenge auf 72 Zeichen begrenzt - die Karte bleibt breit, der Text
   bricht frueher um. */
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) h2 {
  margin: 40px 0 12px;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.45px;
  line-height: 30px;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) h3 {
  margin: 28px 0 8px;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
/* Kein Abstand ueber der ersten Ueberschrift - sonst stehen 40px Abstand
   PLUS 40px Innenabstand der Karte darueber (vom Nutzer gemeldet). Bewusst
   ohne ">": In den JTL-Bloecken (#tos, #data-privacy,
   #revocation-instruction) steckt der Text noch in einem .container. */
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) h2:first-child,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) h3:first-child,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) > *:first-child > h2:first-child {
  margin-top: 0;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) p,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) li {
  /* #4A4A4A statt --color-text-muted (#6B6B6B): Der Nutzer fand den Text zu
     hell. Grau ist laut Entwurf den Nebeninfos vorbehalten, Lauftext steht
     dunkel. Schrift und Zeichenabstand nach Figma-Vorgabe (Inter 16,
     LS -0,31); Zeilenhoehe bewusst 26 statt 24 - diese Seiten sind lange
     Rechtstexte. */
  color: #4A4A4A;
  font-family: var(--font-family-base);
  font-size: 16px;
  letter-spacing: -0.31px;
  line-height: 26px;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) p,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) ul,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) ol {
  max-width: 72ch;
  margin-bottom: 16px;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) ul,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) ol {
  padding-left: 20px;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) li + li {
  margin-top: 4px;
}
/* Beschriftungen wie "Handelsregister:" heben sich dunkel ab. */
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) strong,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) b {
  color: #1B1B1B;
  font-weight: 600;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) a {
  color: #2E6FB8;
  text-decoration: underline;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) a:hover,
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) a:focus {
  color: var(--color-link-hover);
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) hr {
  margin: 32px 0;
  border-top: 1px solid var(--color-border);
}
/* Grauer Kasten auf Textseiten, z. B. das Muster-Widerrufsformular. Die Klasse
   wird im Backend-HTML gesetzt (siehe Widerruf-Inhalt.html im Projekt). */
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) .amewo-textbox {
  margin: 0 0 16px;
  padding: 24px 28px;
  background: #F5F7FA;
  border-radius: 14px;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) .amewo-textbox p:last-child {
  margin-bottom: 0;
}
/* AGB-, Datenschutz- und Widerrufsseite geben den Text aus Inhalte ->
   AGB/WRB bzw. Inhalte -> Datenschutz in einem EIGENEN Block unter dem
   Seiteninhalt aus: #tos, #data-privacy, #revocation-instruction sowie #online-revocation-form (alle mit
   NOVA-Klasse .well). Die liegen AUSSERHALB von .link-content und hatten
   deshalb weder Karte noch Typografie. Er bekommt hier dieselbe weisse Karte;
   die Typografie oben gilt ueber :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form)
   fuer beide. */
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(#revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) {
  max-width: 1040px;
  width: calc(100% - 48px);
  margin: 0 auto 56px;
  padding: 40px 48px 48px;
  background: #FFFFFF;
  border: 0;
  border-radius: 20px;
}
body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(#revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) > .container {
  width: auto;
  max-width: none;
  padding: 0;
}
@media (max-width: 767px) {
  body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(#revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) {
    padding: 24px 20px 32px;
  }
}
@media (max-width: 767px) {
  body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content .index-heading-wrapper {
    padding: 0 0 16px;
  }
  body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) {
    padding: 24px 20px 32px;
  }
  body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) h2 {
    margin-top: 32px;
    font-size: 20px;
    line-height: 28px;
  }
  body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) p,
  body:is([data-page="19"], [data-page="20"], [data-page="21"], [data-page="27"], [data-page="31"]) #content :is(.link-content, #revocation-instruction, #data-privacy, #tos, #online-revocation-form, #revocation-form) li {
    font-size: 15px;
    line-height: 25px;
  }
}

/* ---------------------------------------------------------------------- */
/* Referenzen-Seite (Figma Node 12:10072).                                  */
/* Aufbau im OPC: Kopf, Kennzahlen-Leiste, abwechselnde Referenzblöcke,     */
/* Netzwerk-Sektion, Kategoriebalken, Abschluss-CTA.                        */
/* Siehe OPC-Bauanleitung-Referenzen.md.                                    */
/* ---------------------------------------------------------------------- */
/* Breite wie im Entwurf (Karte dort 2030px). Das ist bewusst deutlich mehr
   als auf den übrigen Seiten: Nur so bekommt die Textspalte genug Raum, der
   Text bricht auf weniger Zeilen um und wird kürzer als das Bild - erst
   dadurch entsteht die vertikale Zentrierung mit Luft oben und unten. */
/* Seitlicher Schutzabstand: Ist das Fenster schmaler als der Container, saßen
   Karten und Text bündig an der Fensterkante.
   Bewusst über die BREITE gelöst und nicht über Innenabstand: .amewo-ref-item
   ist selbst die weiße Karte, dort würde padding das randlose Bild nach innen
   schieben. So bleiben alle vorhandenen Innenabstände unangetastet, und auf
   breiten Monitoren greift weiterhin die 2030px-Grenze des Entwurfs. */
/* Die Über-uns-Seite haengt bewusst in denselben Regeln (Klassen
   .amewo-about-*, siehe Block "Ueber-uns-Seite" weiter unten): Ihre Karte ist
   bauartgleich mit einem Referenzblock. Werte deshalb NICHT doppelt pflegen. */
.amewo-ref-head,
.amewo-ref-stats,
.amewo-ref-item,
.amewo-ref-network,
.amewo-ref-cta,
.amewo-about-head,
.amewo-about-card {
  width: calc(100% - 48px);
  max-width: 2030px;
  margin-left: auto;
  margin-right: auto;
}
/* Oben 22px -> 56px (Sektionsoberkante bis Versalhöhe "Referenzen"),
   unten 15px -> 38px (Unterzeile bis Kachelkante), gerundet auf 40px. */
.amewo-ref-head,
.amewo-about-head {
  padding: 56px 0 40px;
}
/* Plus Jakarta Sans ExtraBold 38px / 38px, Zeichenabstand 0,35px (Vorgabe) */
.amewo-ref-head h1,
.amewo-ref-head .h1,
.amewo-about-head h1,
.amewo-about-head .h1 {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 38px;
  letter-spacing: .35px;
  color: #1B1B1B;
  margin: 0 0 8px;
}
/* Inter Regular 20px / 28px, Zeichenabstand -0,45px (Vorgabe) */
.amewo-ref-head p,
.amewo-about-head p {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.45px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Das OPC verpackt jedes Portlet in klassenlose Zwischen-<div>s. Ohne
   Gegenmaßnahme wäre nur dieser Wrapper das Grid-Element und der Inhalt würde
   stapeln (gemessen: .amewo-ref-stats > div > div > .amewo-ref-stat,
   .amewo-ref-item > div > .amewo-ref-image).

   Früher stand hier display:contents auf den Wrappern. Das funktioniert im
   Frontend, macht die Bereiche im OPC-Editor aber unbearbeitbar: Ein Element
   mit display:contents hat keine eigene Box mehr (gemessen 0x0 Pixel), und
   genau darüber bestimmt der Editor die Ablagefläche - "Portlet hier
   einfügen" reagierte dann nicht mehr.

   Deshalb liegt das Raster jetzt auf dem Wrapper selbst. Er behält seine Box
   und bleibt im Editor bespielbar; das Ergebnis im Frontend ist identisch.
   Die Verschachtelungstiefe ist je Bereich unterschiedlich und stammt aus
   Messungen an der Live-Seite - bei Änderungen am Aufbau im OPC bitte
   nachmessen. */

/* Kennzahlen: vier weiße Karten nebeneinander. Die Karten liegen zusammen in
   EINEM Text-Portlet, das Raster gehört daher zwei Ebenen tiefer.
   Seitliches Padding auf 0: Der OPC-Container bringt 16px mit, wodurch die
   Kacheln 16px weiter innen begannen als die Referenzkarten darunter
   (gemessen: Kachel x=16, Referenzkarte x=0). Jetzt fluchten beide. */
.amewo-ref-stats {
  padding-left: 0;
  padding-right: 0;
  /* Kachelunterkante bis Oberkante der ersten Referenzkarte: 23px -> 58px */
  margin-bottom: 56px;
}
.amewo-ref-stats > div > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Aus dem Entwurfsausschnitt hochgerechnet (Inhaltsbreite dort 799px bei
     2030px Sollbreite, Faktor 2,54): Kachel 189px -> 480px, Lücke 15px ->
     38px. Probe: 4x477 + 3x40 = 2028 = Inhaltsbreite, passt. */
  gap: 40px;
}
.amewo-ref-stat {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
}
/* Typografie exakt nach Vorgabe: Zahl 48px ExtraBold, Label 16px SemiBold
   (24px Zeilenhöhe), Zusatz 14px Regular (20px Zeilenhöhe). */
.amewo-ref-stat-value {
  font-family: var(--font-family-base);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.15;
  color: #B4D6FF; /* Blauton laut Entwurf */
  margin-bottom: 8px;
}
.amewo-ref-stat-label {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #1B1B1B;
  margin-bottom: 4px;
}
.amewo-ref-stat-note {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
}

/* Referenzblock: Bild und Text nebeneinander in einer weißen Karte.
   Mit der Zusatzklasse is-reverse liegt das Bild rechts - im Entwurf
   wechseln sich die Blöcke ab. */
.amewo-ref-item,
.amewo-about-card {
  background: #FFFFFF;
  border-radius: 20px;
  /* Kein Innenabstand an der Karte: Das Bild läuft im Entwurf randlos bis an
     die Kanten (Figma: Bild sitzt bei 0/0 im Kartencontainer). Der Abstand
     entsteht ausschließlich im Textteil. overflow:hidden sorgt dafür, dass
     das Bild die Rundung der Karte übernimmt. */
  padding: 0;
  /* Kein Spaltenabstand: Er lag zwischen Bild und Text und verschob damit die
     Bildkante je nach Laufrichtung um 48px (gemessen: normal endet das Bild
     bei 1031, umgedreht beginnt es bei 1079). Der Abstand zum Text steckt
     jetzt komplett im padding von .amewo-ref-body, damit die Bildkanten
     aller Blöcke auf einer Linie liegen. */
  overflow: hidden;
  /* Proportional aus dem Entwurfsausschnitt gemessen: Kartenbreite dort
     ~1036px bei 2030px Sollbreite (Faktor ~1,96), gemessene Lücke ~26px
     -> ~50px, gerundet auf das 8px-Raster. */
  margin-bottom: 48px;
  /* Weicher Schatten wie im Entwurf. overflow:hidden beschneidet nur die
     Kindelemente, der eigene Schatten der Karte bleibt sichtbar. */
  box-shadow: 0 4px 20px rgba(27, 27, 27, .06);
}
/* Bild und Text sind zwei eigene Portlets, das Raster gehört daher auf den
   Wrapper eine Ebene tiefer (gemessen: .amewo-ref-item > div). */
.amewo-ref-item > div,
.amewo-about-card > div {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
}
@media (min-width: 992px) {
  .amewo-ref-item > div,
  .amewo-about-card > div {
    /* Exakt halbe/halbe Teilung. Nur so fällt die Bildkante bei normalen und
       bei umgedrehten Blöcken auf dieselbe x-Position - bei 52/48 lägen die
       Kanten spiegelbildlich und damit 81px auseinander. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  /* Der Textteil hält 96px Abstand zur Bildkante und 48px zum Kartenrand -
     dieselben Werte wie vorher, nur nicht mehr über den Spaltenabstand. */
  .amewo-ref-item .amewo-ref-body {
    padding-left: 96px;
    padding-right: 48px;
  }
  /* Über uns: Text links, Bild rechts - dieselbe Aufteilung wie bei einem
     umgedrehten Referenzblock, nur ohne order-Wechsel (dort steht das
     Bild-Portlet zuerst, hier das Text-Portlet). */
  .amewo-ref-item.is-reverse .amewo-ref-body,
  .amewo-about-card .amewo-about-body {
    padding-left: 48px;
    padding-right: 96px;
  }
  .amewo-ref-item.is-reverse .amewo-ref-image {
    order: 2;
  }
}
/* Das Bild-Portlet schreibt INLINE "max-width:<Bildbreite>px; margin-left:auto;
   margin-right:auto" in seinen Wrapper. Als Grid-Element hebeln die auto-Ränder
   das Strecken auf: Der Wrapper schrumpft auf die Eigenbreite des Bildes und
   wird in seiner Spalte zentriert - gemessen 834px in einer 1031px-Spalte, also
   je 98px Weiß links und rechts. Genau der Versatz, der im Entwurf nicht da
   ist. Nur mit !important zu überschreiben, weil es Inline-Styles sind. */
.amewo-ref-image,
.amewo-about-image {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Keine eigene Rundung: Die Ecken kommen über overflow:hidden von der Karte,
   sonst wären es zwei übereinanderliegende Rundungen. */
.amewo-ref-image img,
.amewo-about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Text vertikal zentriert wie im Entwurf: Dort beginnt das Badge 156px unter
   der Kartenkante, was genau (Kartenhöhe - Texthöhe) / 2 entspricht. Über die
   Zentrierung stimmt das Verhältnis bei jeder Textlänge, ohne feste Werte. */
.amewo-ref-body,
.amewo-about-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 48px;
  font-family: var(--font-family-base);
}
/* Badge: rotes Icon-Kästchen mit weißem Symbol, daneben die Kategorie in Rot
   (Entwurf). Bewusst KEIN gefülltes Label mit weißer Schrift. */
/* Maße direkt aus Figma (Node 12:10102): Kästchen 48x48, Icon 24x24 mit 12px
   Innenabstand, 12px Abstand zum Text, Textzeile 20px hoch. */
/* display:flex statt inline-flex: Als Inline-Element saß das Badge in einer
   Textzeile, deren Zeilenhöhe zusätzliche 12px unter dem Kästchen erzeugte -
   gemessen 28px statt der 16px aus dem Entwurf. */
.amewo-ref-badge,
.amewo-about-badge {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  color: var(--color-primary);
  /* Inter SemiBold 14px / 20px, Zeichenabstand 0,2px (Vorgabe) */
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.amewo-ref-badge-icon,
.amewo-about-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 20px;
}
.amewo-ref-badge-icon img,
.amewo-about-badge-icon img {
  width: 24px;
  height: 24px;
  display: block;
}
/* Der WYSIWYG-Editor des OPC verpackt das alleinstehende Badge-<span> beim
   Speichern in ein <p> - auf ALLEN Referenzbloecken und der Ueber-uns-Karte so
   vorgefunden. Dessen 12px Aussenabstand kamen zu den 16px des Badges hinzu:
   gemessen 28px bis zur Ueberschrift statt 16px laut Entwurf. Die Raender
   fallen nicht zusammen, weil .amewo-ref-body ein Flex-Container ist und seine
   Kinder eigene Formatierungskontexte bilden.
   Im Quellcode zu entfernen hilft nicht, der Editor setzt das <p> wieder.
   Live gegengeprueft: 5 Referenzbloecke + Ueber uns, alle 28px -> 16px. */
.amewo-ref-body p:has(> .amewo-ref-badge),
.amewo-about-body p:has(> .amewo-about-badge) {
  margin-bottom: 0;
}
/* Plus Jakarta Sans ExtraBold 30px / 36px, Zeichenabstand 0,4px (Vorgabe) */
.amewo-ref-body h2,
.amewo-ref-body .h2,
.amewo-ref-title,
.amewo-about-body h2,
.amewo-about-body .h2 {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: .4px;
  color: #1B1B1B;
  margin: 0 0 12px;
}
/* Fließtext der Blöcke: Inter Regular 16px / 24px, Zeichenabstand -0,31px
   (Vorgabe). */
.amewo-ref-body p,
.amewo-about-body p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.31px;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
/* Unterzeile direkt unter der Überschrift: Inter Regular 18px / 28px,
   Zeichenabstand -0,44px (Vorgabe). Bewusst nur der erste Absatz - die
   Folgeabsätze (Lösung / Ergebnis) sind im Entwurf kleiner gesetzt. */
.amewo-ref-title + p,
.amewo-ref-body h2 + p,
.amewo-ref-body .h2 + p,
.amewo-about-body h2 + p,
.amewo-about-body .h2 + p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -.44px;
  margin-bottom: 16px;
}
.amewo-ref-body p:last-child,
.amewo-about-body p:last-child {
  margin-bottom: 0;
}
/* Zwischenüberschriften "Lösung:" / "Ergebnis:" - im OPC sind das <strong>
   am Absatzanfang, gefolgt von <br> und dem Fließtext. Inter SemiBold 14px /
   20px, Zeichenabstand -0,15px (Vorgabe). Der Absatz selbst bleibt bei 16px,
   deshalb stehen Größe und Zeilenhöhe hier explizit. */
.amewo-ref-body strong {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.15px;
  color: #1B1B1B;
}

/* Netzwerk-Sektion mit Partnerlogos.
   Weißes Band über die volle Fensterbreite: Das Element selbst ist auf die
   2030px Inhaltsbreite begrenzt, deshalb kommt die Fläche links und rechts
   über einen sehr breiten Schlagschatten dazu. clip-path schneidet ihn oben
   und unten wieder ab, sodass nur der seitliche Überstand sichtbar bleibt -
   dasselbe Verfahren wie beim grauen Mengenrabatt-Band auf der Startseite
   (siehe .amewo-bulk-section). Ein Wrapper-Element im OPC wäre die
   Alternative, würde aber die Bauanleitung verkomplizieren. */
.amewo-ref-network {
  text-align: center;
  /* Unten bewusst weniger als oben: Darunter folgt der Kategoriebalken, und
     dessen PNGs bringen bereits ~85px transparenten Rand über dem Produkt mit
     (gemessen: Bildhöhe 339px, sichtbares Produkt beginnt ~85px darunter).
     Mit 64px unten ergab das eine sichtbare Lücke von ~165px. Da beide
     Bereiche ein weißes Band haben, entsteht dazwischen kein grauer Streifen. */
  padding: 64px 0 16px;
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF;
  clip-path: inset(0 -100vmax);
}
/* Plus Jakarta Sans ExtraBold 36px / 40px, Zeichenabstand 0,37px (Vorgabe) */
.amewo-ref-network h2,
.amewo-ref-network .h2 {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: .37px;
  color: #1B1B1B;
  margin: 0 0 16px;
}
/* Inter Regular 20px / 28px, Zeichenabstand -0,45px (Vorgabe) */
.amewo-ref-network p {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.45px;
  color: var(--color-text-muted);
  /* Aus dem Entwurfsausschnitt hochgerechnet: Der Textsatz nimmt dort ~81%
     der Sektionsbreite ein (655px von 808px), bei 2030px Inhaltsbreite also
     rund 1640px. Die vorherigen 860px waren eine Lesbarkeitsannahme von mir,
     kein Wert aus dem Entwurf. */
  max-width: 1640px;
  margin: 0 auto 16px;
}
/* Logoreihe. Funktioniert in zwei Varianten:
   a) als Container-Portlet mit einzelnen Bild-Portletts darin (Custom Class
      amewo-ref-logo) - so lässt sich jedes Logo über die Medienverwaltung
      austauschen, ohne den Quellcode anzufassen. Empfohlen.
   b) als Text-Portlett mit <img>-Tags (alter Aufbau, bleibt lauffähig). */
.amewo-ref-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin: 28px 0;
}
/* Der OPC schiebt zwischen Container und Portlets ein klassenloses <div>.
   Ohne Gegenmaßnahme wäre dieses div das einzige Flex-Element und alle Logos
   lägen untereinander.
   WICHTIG: Hier NICHT display:contents verwenden (wie bei .amewo-ref-stats
   und .amewo-ref-item). Das nimmt dem div seine Box - gemessen 0x0 Pixel -
   und der OPC-Editor bestimmt die Ablagefläche für neue Portlets über genau
   diese Box. Ergebnis: "Portlet hier einfügen" reagiert nicht mehr.
   Stattdessen wird das Zwischen-div selbst zur Logoreihe gemacht; es behält
   damit eine echte Box und bleibt im Editor bespielbar. */
.amewo-ref-logos > div {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
/* Das Bild-Portlet schreibt max-width und auto-Ränder inline in seinen
   Wrapper (siehe Kommentar bei .amewo-ref-image). Im Flex-Kontext würden die
   auto-Ränder den Abstand zwischen den Logos auffressen. */
.amewo-ref-logo {
  flex: 0 0 auto;
  max-width: none !important;
  margin: 0 !important;
}
/* NOVA hängt w-100 an die Portlet-Bilder (width:100% !important). Logos
   sollen dagegen ihre Eigenbreite behalten und nur in der Höhe begrenzt
   werden, damit unterschiedlich breite Wortmarken gleich groß wirken. */
/* Größe laut Entwurf: Jedes Logo sitzt dort in einem Rahmen von 220x122px.
   Da alle sechs Bilder dieselbe Bezugshöhe von 246px haben, reicht die
   Höhenbegrenzung - die Breite bleibt bei allen unter 220px und ist nur als
   Sicherung gesetzt. Zuvor standen hier 34px, das war eine Annahme von mir
   und keine Vorgabe. */
.amewo-ref-logo img {
  width: auto !important;
  height: auto;
  max-height: 122px;
  max-width: 220px;
  display: block;
}
/* Alte Variante mit <img>-Tags im Text-Portlet, gleiche Maße. */
.amewo-ref-logos img {
  max-height: 122px;
  max-width: 220px;
  width: auto;
}

/* Abschluss-CTA */
.amewo-ref-cta {
  text-align: center;
  padding: 40px 0 64px;
}
/* Plus Jakarta Sans ExtraBold 36px / 40px, Zeichenabstand 0,37px (Vorgabe) */
.amewo-ref-cta h2,
.amewo-ref-cta .h2 {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: .37px;
  color: #1B1B1B;
  margin: 0 0 8px;
}
/* Inter Regular 20px / 28px, Zeichenabstand -0,45px (Vorgabe) */
.amewo-ref-cta p {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.45px;
  color: var(--color-text-muted);
  /* Im Entwurf bricht der Satz nach "... erhalten Sie ein" um. Ohne
     Begrenzung läuft er über die volle Containerbreite auf eine Zeile. */
  max-width: 640px;
  margin: 0 auto 20px;
}
.amewo-ref-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Wie bei der FAQ-CTA: Die Links kommen aus einem Text-Portlet, sind also
   einfache <a> ohne .btn-Hülle. */
.amewo-ref-cta-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 12px 24px;
  /* Inter SemiBold 16px / 24px, Zeichenabstand -0,31px (Vorgabe) */
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.31px;
  text-decoration: none;
  white-space: nowrap;
}
.amewo-ref-cta-actions a.amewo-btn-cta-secondary {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: #1B1B1B;
}
.amewo-ref-cta-actions a.amewo-btn-solutionfinder {
  border-radius: 8px;
}
@media (max-width: 767px) {
  .amewo-ref-head,
  .amewo-about-head {
    padding: 32px 0 20px;
  }
  .amewo-ref-body,
  .amewo-about-body {
    padding: 32px 20px;
  }
}

/* ---------------------------------------------------------------------- */
/* Ueber-uns-Seite (Figma Node 477:763).                                    */
/* Siehe OPC-Bauanleitung-Ueber-uns.md.                                     */
/* ---------------------------------------------------------------------- */
/* Der Entwurf zeigt exakt die Bausteine der Referenzen-Seite: Kopfbereich
   mit H1 und Unterzeile, darunter EINE weisse Karte mit Textspalte links und
   randlosem Bild rechts, darin das rote Badge, eine H2, eine Unterzeile und
   drei Fliesstextabsaetze. Deshalb gibt es hier KEINE eigenen Werte - die
   Klassen .amewo-about-head, .amewo-about-card, .amewo-about-body,
   .amewo-about-image, .amewo-about-badge(-icon) stehen oben in denselben
   Regeln wie ihre .amewo-ref-*-Gegenstuecke. Eigene Namen trotzdem, damit im
   OPC ersichtlich bleibt, welche Seite gemeint ist.
   Einziger Unterschied zur Referenzkarte: Text links / Bild rechts ohne
   is-reverse - im OPC steht hier das Text-Portlet zuerst.
   Wer die Ueber-uns-Seite eigenstaendig gestalten will, loest die Klassen aus
   den gemeinsamen Regeln heraus und gibt ihnen hier eigene Werte. */
/* Das Bild braucht auf schmalen Fenstern eine Hoehe: Einspaltig hat die
   Bildzeile keine Vorgabe mehr, height:100% liefe ins Leere und das Foto
   waere nur so hoch wie seine Eigenhoehe im 1:1-Kasten. */
@media (max-width: 991px) {
  .amewo-about-image img {
    height: 260px;
  }
  /* Einspaltig zuerst das Foto, dann der Text - wie bei den Referenzbloecken,
     wo das Bild ohnehin als erstes Portlet im Markup steht. Ohne das laegen
     hier erst ~1080px Text und das Foto erst darunter (gemessen bei 375px). */
  .amewo-about-image {
    order: -1;
  }
}

/* ---------------------------------------------------------------------- */
/* FAQ-Seite (Figma "Häufig gestellte Fragen").                             */
/* Aufbau im OPC: Heading + Text, danach die Filter-Pillen als Text-Portlet  */
/* (Quellcode), darunter je Kategorie ein Container mit Accordion-Portlet.   */
/* Siehe OPC-Bauanleitung-FAQ.md. Das Umschalten übernimmt das Skript in     */
/* layout/footer.tpl - es wird nur aktiv, wenn Pillen auf der Seite sind.    */
/* ---------------------------------------------------------------------- */
/* Wie auf der Startseite ist auch hier der eigentliche #content leer - die
   Inhalte liegen im OPC-Bereich darüber. NOVA reserviert trotzdem 64px oben
   und 48px unten, wodurch zwischen CTA-Karte und Footer rund 180px Leerraum
   entstanden. Über :has gezielt nur auf Seiten mit FAQ-Pillen, damit normale
   Textseiten ihre Abstände behalten. */
/* Dasselbe auf der Referenzen-Seite: gemessen 64px (#content-wrapper) + 48px
   (#content) = 112px Leerraum unter dem Abschluss-CTA. Wichtig: Der leere
   #content steht HINTER dem OPC-Bereich, die Abstände wirken also nach unten
   und nicht auf den Seitenkopf. Erkennungsmerkmal ist der Kopfbereich der
   Seite, den es nur dort gibt. */
/* Seit der Ueber-uns-Seite (vierte OPC-Seite) NICHT mehr als Seitenliste,
   sondern ueber ein generisches Merkmal - eine Liste haette hier zum vierten
   Mal verlaengert werden muessen.
   Merkmal: eigene Seite (data-page 31), deren Inhalt aus dem OPC kommt.
   Live gegengeprueft (amewo.de):
     /Referenzen    data-page 31, 11x .opc-Container, #content leer  -> greift
     /FAQ           dito                                             -> greift
     /Impressum     data-page 31,  0x .opc-Container, #content voll  -> greift nicht
   Die Startseite (data-page 18) hat ihre eigene Regel und bleibt aussen vor. */
body[data-page="31"]:has(.opc-Container) #content-wrapper:not(.has-fluid) {
  padding-top: 0;
}
body[data-page="31"]:has(.opc-Container) #content {
  padding-bottom: 0;
}

.amewo-faq-head {
  text-align: center;
  /* Seitlicher Schutzabstand auf schmalen Fenstern, siehe Kommentar bei
     .amewo-ref-head. */
  width: calc(100% - 48px);
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 0 24px;
}
/* Überschrift wie auf den anderen Seiten: Bold 36px. Das Heading-Portlet
   bringt sonst nur die dünnere NOVA-Standardgröße mit. */
.amewo-faq-head h1,
.amewo-faq-head .h1 {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: #1B1B1B;
  margin: 0 0 12px;
}
.amewo-faq-head p {
  font-family: var(--font-family-base);
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 767px) {
  .amewo-faq-head {
    padding: 40px 0 20px;
  }
  .amewo-faq-head h1,
  .amewo-faq-head .h1 {
    font-size: 26px;
  }
}
/* Der FAQ-Inhalt steht im Entwurf als schmale, zentrierte Spalte - die
   OPC-Container laufen dagegen über die volle Fensterbreite. Deshalb hier
   zentral begrenzen, unabhängig davon, welcher Containertyp im OPC gewählt
   wurde. */
.amewo-faq-pills,
.amewo-faq-group,
.amewo-faq-cta {
  width: calc(100% - 48px);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* Der OPC-Container bringt seitlich 15px Polsterung mit. Bei der CTA-Karte
   liegt die Farbfläche auf dem Container selbst (also 820px breit), bei den
   Fragen sitzen die weißen Karten dagegen INNERHALB der Polsterung und wären
   30px schmaler. Deshalb hier auf 0 - dann fluchten beide Blöcke. */
.amewo-faq-group {
  padding-left: 0;
  padding-right: 0;
}
.amewo-faq-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 0;
  list-style: none;
}
.amewo-faq-pill {
  background: #FFFFFF;
  /* Ohne Rahmen (Wunsch des Nutzers) - die weisse Flaeche auf dem grauen
     Seitengrund traegt sich selbst. */
  border: 0;
  /* Abgerundetes Rechteck statt voller Pille (Entwurf). */
  border-radius: 8px;
  padding: 8px 18px;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.amewo-faq-pill:hover {
  background: #F5F7FA;
}
.amewo-faq-pill.is-active {
  background: var(--color-secondary);
  color: #FFFFFF;
}
/* Weicher Wechsel beim Filtern (siehe Skript in layout/footer.tpl):
   Die Gruppe wird ausgeblendet, indem sie zuerst transparent wird und leicht
   nach oben rutscht - display:none folgt erst danach. */
.amewo-faq-group {
  transition: opacity .2s ease, transform .2s ease;
}
.amewo-faq-group.amewo-faq-out {
  opacity: 0;
  transform: translateY(-6px);
}

/* Fragen: NOVA rendert das Accordion-Portlet als Bootstrap-Cards. */
.amewo-faq-group .opc-Accordion-group {
  background: #FFFFFF;
  /* Ohne Rahmen (Wunsch des Nutzers) - wie die Filter-Pillen und die Buttons
     im CTA-Kasten. Die weisse Flaeche auf dem grauen Grund genuegt. */
  border: 0;
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.amewo-faq-group .opc-Accordion-head {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 15px;
  color: #1B1B1B;
  text-decoration: none;
}
/* Pfeil nach rechts: Das Portlet-CSS (OPC/Portlets/Accordion/Accordion.scss)
   setzt justify-content:start über einen Selektor mit höherer Spezifität -
   deshalb hier dieselbe Selektorform, sonst greift es nicht. */
.amewo-faq-group [data-toggle="collapse"]:not(.navbar-toggler).opc-Accordion-head {
  justify-content: space-between;
}
/* Bewusst nur :hover - nach einem Klick bliebe der Fokus sonst hängen und die
   Frage dauerhaft eingefärbt. */
.amewo-faq-group .opc-Accordion-head:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}
/* Bootstrap legt auf .btn-link beim Fokus einen Ring in der Primärfarbe
   (box-shadow). Bei einem Button über die volle Kartenbreite erscheint der als
   rosa Linie unter der Frage. Für Mausklicks abschalten, für Tastatur-
   Navigation über :focus-visible aber erhalten (Barrierefreiheit). */
.amewo-faq-group .opc-Accordion-head:focus {
  box-shadow: none;
  outline: none;
  text-decoration: none;
}
.amewo-faq-group .opc-Accordion-head:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: -2px;
}
/* Keine Trennlinien zwischen Frage und Antwort */
.amewo-faq-group .card-header,
.amewo-faq-group .opc-Accordion-collapse,
.amewo-faq-group .card-body {
  border: none;
}
/* Chevron rechts, dreht sich beim Aufklappen */
/* Zugeklappt hellblau, aufgeklappt hellrot - wie die übrigen Zustände im Shop. */
.amewo-faq-group .opc-Accordion-head::after {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 12px;
  color: var(--color-secondary);
  margin-left: 16px;
  flex: 0 0 auto;
  transition: transform .15s ease, color .15s ease;
}
.amewo-faq-group .opc-Accordion-head[aria-expanded="true"]::after {
  transform: rotate(180deg);
  color: var(--color-primary);
}
.amewo-faq-group .opc-Accordion-collapse .card-body {
  padding: 0 20px 14px;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-muted);
}
/* Der Antworttext kommt aus einem Text-Portlet, das ihn zusätzlich in ein
   <div> verpackt. Eine Regel auf das äußere Element reicht deshalb nicht -
   der Absatz IM div behält sonst seinen eigenen Abstand nach unten. */
.amewo-faq-group .opc-Accordion-collapse .card-body > *:last-child,
.amewo-faq-group .opc-Accordion-collapse .card-body p:last-child,
.amewo-faq-group .opc-Accordion-collapse .card-body *:last-child > p:last-child {
  margin-bottom: 0;
}
.amewo-faq-group .card-header {
  background: transparent;
  border: none;
  padding: 0;
}

/* Abschlusskarte "Ihre Frage ist nicht dabei?" */
/* VERLAUF statt einfarbig - die fuenf Stopps und der Radius kommen
   unveraendert aus dem Figma-Container (896x256, vom Nutzer uebergeben).
   Der Verlauf ist sehr flach (#F0F6FF -> #E5F1FF, gut ein Prozent
   Helligkeitsunterschied): Das ist so gewollt, er soll die Flaeche nur
   leicht beleben. Werte NICHT durch --color-secondary-bg ersetzen - die
   Karte lag vorher auf diesem flachen #DFEEFF und wirkte dadurch dunkler
   und stumpfer als im Entwurf. */
.amewo-faq-cta {
  background: linear-gradient(135deg, #F0F6FF 0%, #EDF5FF 25%, #EBF4FF 50%, #E8F2FF 75%, #E5F1FF 100%);
  border-radius: 24px;
  text-align: center;
  padding: 32px 24px;
  margin-top: 40px;
  margin-bottom: 64px;
}
.amewo-faq-cta .amewo-faq-cta-title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 20px;
  color: #1B1B1B;
  margin: 0 0 8px;
}
.amewo-faq-cta p {
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}
.amewo-faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Die Links stammen aus einem Text-Portlet, sind also einfache <a> ohne
   .btn-Hülle. Die CTA-Klassen der Startseite zielen dagegen auf den inneren
   .btn des Button-Portlets und greifen hier nicht - deshalb eigene Regeln. */
.amewo-faq-cta-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Gleiche Rundung wie die Filter-Pillen, keine volle Pille (Entwurf). */
  border-radius: 8px;
  padding: 12px 24px;
  /* Inter SemiBold 16px / 24px, Zeichenabstand -0,31px (Vorgabe) */
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.31px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease, background-color .15s ease;
}
.amewo-faq-cta-actions a:hover,
.amewo-faq-cta-actions a:focus {
  text-decoration: none;
}
/* Erste Aktion: nur die Rundung angleichen - die Farbe kommt bereits
   einfarbig aus .amewo-btn-solutionfinder. */
.amewo-faq-cta-actions a.amewo-btn-solutionfinder {
  border-radius: 8px;
}
/* Zweite Aktion: weiß OHNE Rand (Wunsch des Nutzers). Bewusst border:0 und
   kein durchsichtiger Rahmen - der rote Button daneben hat auch keinen,
   beide bleiben so exakt gleich hoch. */
.amewo-faq-cta-actions a.amewo-btn-cta-secondary {
  background: #FFFFFF;
  border: 0;
  color: #1B1B1B;
}
.amewo-faq-cta-actions a.amewo-btn-cta-secondary:hover {
  background: #FAFAFA;
  color: #1B1B1B;
}

/* ---------------------------------------------------------------------- */
/* Cookie-Consent (Figma "Cookie-Einstellungen").                           */
/* Struktur und Texte gibt JTL vor (snippets/consent_manager.tpl) - hier    */
/* wird ausschließlich die Optik angeglichen: weiße Karte mit Rundung,      */
/* blaues Icon-Badge, Buttons in Amewo-Farben statt Grün.                   */
/* ---------------------------------------------------------------------- */
#consent-banner {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(27, 27, 27, .08);
  padding: 24px 28px;
  font-family: var(--font-family-base);
}
/* Icon als blaues Badge wie im Entwurf (JTL liefert ein nacktes SVG) */
#consent-banner .consent-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-secondary-bg);
  color: #6BA7E8;
  padding: 9px;
}
#consent-banner .consent-banner-icon svg {
  width: 22px;
  height: 22px;
}
#consent-banner .consent-display-2 {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 16px;
  color: #1B1B1B;
}
#consent-banner .consent-banner-description p,
#consent-banner .consent-banner-description a {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-muted);
}
/* Im Entwurf stehen die Buttons UNTER dem Beschreibungstext - NOVA rendert
   sie davor. Reihenfolge per Flex umdrehen statt das Template anzufassen. */
#consent-banner .consent-banner-body {
  display: flex;
  flex-direction: column;
  /* align-items:stretch gegen NOVAs center: In der Flex-Spalte schrumpften die
     Kinder sonst auf Inhaltsbreite - der Knopfbereich war nur 270px breit und
     die drei Buttons standen untereinander (vom Nutzer gemeldet). */
  align-items: stretch;
}
#consent-banner .consent-banner-actions {
  order: 2;
  width: 100%;
  margin-top: 16px;
}
#consent-banner .consent-banner-description {
  order: 1;
}
#consent-banner .consent-btn-helper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#consent-banner .consent-btn-helper > div {
  flex: 1 1 160px;
}
#consent-banner .consent-btn {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
}
/* "Alle akzeptieren" als gefüllte Hauptaktion */
#consent-banner #consent-banner-btn-all {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-secondary);
}
#consent-banner .consent-btn:hover {
  background: #F5F7FA;
}
#consent-banner #consent-banner-btn-all:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
}

/* Einstellungen-Dialog: gleiche Formensprache, grüner Bestätigen-Button wird
   zum Amewo-Blau. */
.consent-modal .consent-modal-content {
  border-radius: 16px;
  font-family: var(--font-family-base);
}
.consent-modal .consent-display-1 {
  font-family: var(--font-family-base);
  font-weight: 700;
  color: #1B1B1B;
}
.consent-modal .consent-btn {
  border-radius: 10px;
  font-family: var(--font-family-base);
  font-weight: 600;
}
.consent-modal .consent-btn-primary,
.consent-modal .consent-btn-tertiary {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-secondary);
}
.consent-modal .consent-btn-primary:hover,
.consent-modal .consent-btn-tertiary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
}

/* ---------------------------------------------------------------------- */
/* Kontaktseite (Figma "Kontakt & Beratung"): zentrierte Überschrift, dann  */
/* zwei Karten - links Kontaktinformationen, rechts Tabs + Formular.        */
/* Markup siehe contact/index.tpl; das Formular selbst bleibt NOVAs         */
/* Original, hier wird nur die Optik überschrieben.                         */
/* ---------------------------------------------------------------------- */
/* Grauer Seitenhintergrund wie im Entwurf - gilt für den ganzen Shop.
   NOVA setzt #main-wrapper auf Weiß und verdeckt damit den grauen
   Body-Hintergrund; hier wird das aufgehoben, damit sich Inhaltskarten
   (Kontakt, Konto, Checkout ...) wie im Entwurf davon abheben. */
#main-wrapper {
  background: #F5F7FA;
}
/* Ausnahme Startseite (PAGE_STARTSEITE = 18): Sie bringt ihre Flächen selbst
   mit - Hero, weißer Kategoriebalken, blaues USP-Band, graues Produktband.
   Ein grauer Grund würde dort den weißen Kategoriebalken einfärben. */
body[data-page="18"] #main-wrapper {
  background: #FFFFFF;
}

.amewo-contact-header {
  text-align: center;
  /* Wie die Karten auf Entwurfsbreite begrenzt und zentriert */
  width: calc(100% - 48px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 0 32px;
}
.amewo-contact-title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: #1B1B1B;
  margin: 0 0 8px;
}
.amewo-contact-subtitle {
  font-family: var(--font-family-base);
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0;
}
.amewo-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  /* Der Shop-Container ist deutlich breiter als der Entwurf - dort nehmen die
     beiden Karten zusammen rund 1000px ein. Ohne Begrenzung liefen sie über
     die volle Containerbreite auseinander. */
  width: calc(100% - 48px);
  max-width: 1040px;
  margin: 0 auto;
  padding-bottom: 64px;
}
@media (min-width: 992px) {
  .amewo-contact-grid {
    /* Beide Karten gleich breit (Entwurf: 50/50) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.amewo-contact-info,
.amewo-contact-formcard {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(27, 27, 27, .04);
}
.amewo-contact-info-title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 18px;
  color: #1B1B1B;
  margin: 0 0 24px;
}
.amewo-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.amewo-contact-info-item:last-child {
  margin-bottom: 0;
}
.amewo-contact-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  /* Weiss auf Blau (Wunsch des Nutzers) - dasselbe Paar wie bei den
     Kauf-Buttons des Shops: Flaeche --color-secondary, Symbol
     --color-on-secondary. Vorher blaues Symbol auf blauer Flaeche. */
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-size: 15px;
}
.amewo-contact-info-label {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  color: #1B1B1B;
  margin-bottom: 2px;
}
.amewo-contact-info-link {
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: 14px;
  color: #6BA7E8;
  text-decoration: none;
}
.amewo-contact-info-link:hover {
  color: #4A8FD4;
  text-decoration: underline;
}
.amewo-contact-info-note {
  font-family: var(--font-family-base);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-muted);
}

/* Tabs als Pillen im Kopf der Formularkarte (Entwurf: aktiver Tab blau
   gefüllt, inaktiver grau) - vorher waren es Unterstrich-Tabs. */
.amewo-contact-tabs {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
.amewo-contact-tabs .nav-item {
  flex: 1 1 0;
}
.amewo-contact-tab {
  width: 100%;
  background: #F1F3F5;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.amewo-contact-tab.is-active {
  background: var(--color-secondary);
  color: #FFFFFF;
}

/* Formular in der Karte: NOVA legt jedes Feldset als Zeile mit einer
   Beschriftungsspalte (col-lg-4) und einer Feldspalte (col-lg-8) an. Im
   Entwurf stehen die Felder einspaltig ohne diese Zwischenüberschriften -
   daher Beschriftungsspalte ausblenden und Feldspalte auf volle Breite. */
.amewo-contact-formcard .contact-form fieldset > [class*="col-"]:first-child {
  display: none;
}
/* Alle übrigen Spalten auf volle Breite: Der Entwurf zeigt die Felder
   einspaltig untereinander, NOVA verteilt sie dagegen auf Bootstrap-Spalten
   (Vorname/Nachname nebeneinander, Absende-Button in col-xl-3 mit
   offset-lg-4). In der schmalen Karte blieben davon nur ~80px übrig - der
   Buttontext brach um und wurde abgeschnitten. Die Offsets müssen mit weg,
   sonst rutscht der Inhalt trotz voller Breite nach rechts. */
.amewo-contact-formcard .contact-form .row > [class*="col"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.amewo-contact-formcard .contact-form hr {
  display: none;
}
/* Feldradius, Buttonfläche, Schriftschnitt und Innenabstand kommen jetzt aus
   dem shopweiten Formularblock oben - genau dieses Formular war die Vorlage
   dafür. Hier bleibt nur, was wirklich seitenspezifisch ist. */
/* Zusatzfeld "Bevorzugte Rückrufzeit" (nur im Rückruf-Tab sichtbar) */
.amewo-callback-time label {
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-muted);
}
/* Absende-Button laut Entwurf über die volle Kartenbreite */
.amewo-contact-formcard .contact-form button[type="submit"] {
  display: block;
  width: 100%;
  white-space: nowrap;
}
.amewo-contact-callback-panel {
  display: flex;
  justify-content: center;
  padding: 24px 0 48px;
}
.amewo-contact-callback-card {
  text-align: center;
  max-width: 480px;
  background: var(--color-secondary-bg);
  border-radius: 20px;
  padding: 32px;
}
.amewo-contact-callback-card i {
  font-size: 28px;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.amewo-contact-callback-phone a {
  font-weight: 600;
  color: #1B1B1B;
  font-size: 18px;
}

/* ---------------------------------------------------------------------- */
/* FAQ- und Referenzen-Seiten: Klassen für den Backend-Seiteneditor.      */
/* Diese Seiten sind native JTL-"individuelle Seiten" (WYSIWYG-Content) - */
/* die Klassen unten ins HTML der jeweiligen Seite einfügen               */
/* (Backend → Inhalte → Seiten → Quellcode-Ansicht), siehe README.        */
/* ---------------------------------------------------------------------- */
.amewo-faq {
  max-width: 860px;
  margin: 0 auto;
}
.amewo-faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}
.amewo-faq-item summary {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  color: #1B1B1B;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.amewo-faq-item summary::-webkit-details-marker {
  display: none;
}
.amewo-faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--color-primary);
  transition: transform .15s ease;
}
.amewo-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.amewo-faq-item p {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}

.amewo-referenzen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.amewo-referenz-card {
  background: #FAFAFA;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 24px;
  font-family: var(--font-family-base);
}
.amewo-referenz-card .amewo-referenz-quote {
  font-size: 15px;
  color: #1B1B1B;
  font-style: italic;
  margin-bottom: 16px;
}
.amewo-referenz-card .amewo-referenz-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 14px;
}
.amewo-referenz-card .amewo-referenz-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* ======================================================================= */
/* STARTSEITE (Online Page Composer / OPC) – Figma Frame "Startseite test",*/
/* Node 133:575. Die folgenden Klassen kommen NICHT über Datei-Upload zum  */
/* Einsatz, sondern werden im OPC-Editor in das Feld "Eigene CSS-Klasse"   */
/* ("custom-class") des jeweiligen Portlets eingetragen. Siehe separate    */
/* Bauanleitung für die genaue Portlet-Struktur.                           */
/* ======================================================================= */

/* ----------------------------------------------------------------------- */
/* Hero (Figma Node 133:580/133:581): Video-Hintergrund, Logo-Icon,        */
/* Headline, Subline, zwei CTA-Buttons ("Lösungsfinder" / "B2B Anfrage").  */
/* Portlet: "Container" mit background-flag = video.                      */
/* ----------------------------------------------------------------------- */
.amewo-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding: 96px 24px 80px;
  text-align: center;
  overflow: hidden;
  /* Full-Bleed: Der umgebende OPC-container-fluid hat 1rem Innenabstand
     links/rechts - der soll für alle anderen Sektionen erhalten bleiben,
     nur das Hero-Video läuft laut Figma randlos. Daher bricht NUR der Hero
     per Negativ-Margin aus dem Padding aus (statt das Padding global auf 0
     zu setzen, was allen Sektionen den Seitenabstand nähme). */
  margin-left: -1rem;
  margin-right: -1rem;
}
/* Abdunkelnder Verlauf über dem Hintergrundvideo, damit weißer Text/die
   Buttons lesbar bleiben (im Figma-Screenshot ist der untere Bildbereich
   sichtbar dunkler als der obere). */
.amewo-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 27, 27, 0) 0%, rgba(27, 27, 27, .15) 55%, rgba(27, 27, 27, .45) 100%);
  pointer-events: none;
  z-index: 1;
}
/* `:not(video)` ist entscheidend: Das Hintergrundvideo ist ein direktes Kind
   des Containers. Mit z-index 2 lag es UEBER dem abdunkelnden Verlauf
   (z-index 1) - der Verlauf war dadurch wirkungslos, und weisser Text stand
   auf hellem Video. Ohne die Ausnahme sieht man das nicht: Die Regel darueber
   beschreibt genau das, was nicht passierte. */
.amewo-hero > *:not(video) {
  position: relative;
  z-index: 2;
}
/* Unterhalb von lg fuellt das Video den Hero nicht aus: JTLs Portlet gibt ihm
   inline `width: 100%` ohne Hoehe, die Hoehe ergibt sich also aus dem
   Seitenverhaeltnis 16:9. Bei 375px Fensterbreite sind das 211px in einem
   514px hohen Hero - darunter lief der Text auf grauem Grund weiter und war
   kaum lesbar (Rueckmeldung zum Bereich ueber der Falz).
   `!important`, weil Hoehe und Breite als Inline-Styles im Markup stehen.
   Nur bis lg: Auf dem Desktop ist der Hero flacher als 16:9, dort deckt das
   Video ohnehin und behaelt seine oben ausgerichtete Bildwahl. */
@media (max-width: 991.98px) {
  .amewo-hero > video {
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* Pause/Play-Button, den das OPC-Container-Portlet bei Video-Hintergrund
   automatisch einblendet – laut Figma nicht Teil des Hero-Designs, aus
   Barrierefreiheitsgründen (WCAG 2.2.2: bewegte Inhalte müssen anhaltbar
   sein) aber bewusst NICHT entfernt, sondern dezent in die untere rechte
   Ecke verlegt: klein, halbtransparent, erst bei Hover/Fokus voll sichtbar.
   Nur im Hero umgestylt, damit ein evtl. künftiger Video-Container an
   anderer Stelle das NOVA-Standardverhalten behält. */
.amewo-hero .opc-container-pause {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(27, 27, 27, .35);
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  opacity: .4;
  transition: opacity .15s ease;
}
.amewo-hero .opc-container-pause:hover,
.amewo-hero .opc-container-pause:focus-visible {
  opacity: 1;
  background: rgba(27, 27, 27, .55);
  color: #FFFFFF;
}
/* Animiertes Picto-Logo im Hero. Die SVG-Datei
   (images/amewo-hero-icon-animated.svg) ist der unveränderte Original-Export
   (Vorgabe: Datei nicht anfassen) mit viewBox="0 0 750 500" – die Zeichnung
   selbst belegt davon aber nur den zentrierten Bereich x 169-579 / y 124-373
   (409×249 Einheiten inkl. Strichstärke), der Rest ist Leerraum. Wir
   kompensieren das rein per CSS:
   - Ziel laut Figma-Node 133:597: sichtbares Picto ~97×58px.
   - Elementbreite = 96px × (750/409) ≈ 176px -> sichtbares Picto ≈ 96×58px.
   - Der vertikale Canvas-Leerraum (je ~125 Einheiten oben/unten ≈ 29-30px bei
     176px Breite) wird über negative Margins neutralisiert; unten bleiben
     visuell die gewünschten 20px Abstand zur Headline (20 − 30 = −10px).
   Bei Änderung der Anzeigegröße die Margins im selben Verhältnis anpassen! */
.amewo-hero-icon {
  display: block;
  width: 176px;
  height: auto;
  margin: -29px auto -10px;
}
/* Lottie-Container (siehe Lazy-Loader in layout/header.tpl): ein leeres
   <div class="amewo-hero-icon amewo-lottie"> im OPC-Portlet, der Player
   rendert die Animation hinein. Ein div hat - anders als svg/img - kein
   intrinsisches Seitenverhältnis, daher hier explizit das Canvas-Format des
   Logo-Exports (750x500). Falls die Lottie-JSON ein anderes Canvas-Format
   hat: aspect-ratio UND die Margins in .amewo-hero-icon anpassen. */
.amewo-lottie {
  aspect-ratio: 750 / 500;
  overflow: hidden;
}
.amewo-lottie svg {
  display: block;
}
/* Werte aus Figma, Node 133:596 ("Smartes Zubehör für moderne Geräte."):
   Inter Bold 60/60, LS 0,2637px - 1:1 übernommen wie die übrigen Figma-Maße.
   Vorher stand hier Plus Jakarta Sans 700 in 48px mit Zeilenhöhe 1,15: zu
   dünn und zu luftig. Dieselbe Jakarta/Inter-Verwechslung wie beim
   Newsletter (siehe AGENTS.md, Typografie-Vorgaben).
   line-height unitless 1, damit die mobile Größe unten mitskaliert. */
.amewo-hero-heading {
  color: #FFFFFF;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0.2637px;
  max-width: 700px;
  margin: 0 auto 16px;
  text-shadow: 3px 4px 15px rgba(0, 0, 0, .15);
}
.amewo-hero-text {
  color: #FFFFFF;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  max-width: 600px;
  margin: 0 auto 32px;
  text-shadow: 2px 3px 10px rgba(0, 0, 0, .15);
}
.amewo-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* Das OPC-Row-Portlet rendert jeden Button in eine EIGENE Bootstrap-Spalte
   (col-md-6 = 50% Breite). 50% + 50% + 16px gap > 100% -> Flex-Umbruch, die
   Buttons landen untereinander statt nebeneinander (gleiche Falle wie bei der
   USP-Row). Fix: Spalten auf Inhaltsbreite kollabieren, dann sitzen die
   Buttons zentriert mit 16px Abstand nebeneinander wie im Figma. Gilt für
   beide CTA-Reihen (Hero + Produkt-Grid). */
.amewo-hero-cta-row > [class*="col"],
.amewo-product-grid-cta-row > [class*="col"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
/* Nur im Hero: beide CTAs gleich breit (Figma 133:599/133:603: 217/219px).
   Die CTA-Reihe unterm Produkt-Grid behält bewusst inhaltsabhängige Breiten
   (Figma 133:935/133:939: 171px vs. 270px). */
.amewo-hero-cta-row .amewo-btn-cta .btn {
  min-width: 218px;
}
@media (max-width: 767px) {
  .amewo-hero {
    min-height: 460px;
    padding: 64px 16px 56px;
  }
  .amewo-hero-heading {
    font-size: 30px;
  }
  .amewo-hero-text {
    font-size: 16px;
  }
}

/* Großes CTA-Button-Paar – wiederverwendet im Hero UND am Ende des
   Produkt-Grids (Figma: "Lösungsfinder" gefüllt rot + zweiter Button
   weiß mit Rand). Bewusst eigene Klassen, NICHT .amewo-btn-solutionfinder
   aus der Topbar, da Figma hier eckigere, größere Buttons zeigt
   (rounded 14px statt volle Pille, 60px statt ~36px Höhe). */
/* WICHTIG: Das OPC-Button-Portlet rendert die Klassen amewo-btn-cta* auf einem
   äußeren <div>-Wrapper; der sichtbare Button ist ein inneres
   <a class="btn btn-primary">. Deshalb IMMER auf `.amewo-btn-cta .btn` zielen –
   sonst greift NOVAs Standard-.btn-Optik (falscher Radius/Padding/Schatten) und
   die Buttons sehen komplett anders aus als im Figma. */
.amewo-btn-cta {
  display: inline-block;
}
.amewo-btn-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Inter SemiBold 16px / 24px, Zeichenabstand -0,31px (Vorgabe, gilt für
     alle Buttons in dieser Optik) */
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.31px;
  border-radius: 14px;
  padding: 18px 32px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: opacity .15s ease, background-color .15s ease;
}
.amewo-btn-cta .btn:hover,
.amewo-btn-cta .btn:focus,
.amewo-btn-cta .btn:active {
  text-decoration: none;
  box-shadow: none;
}
.amewo-btn-cta-primary .btn {
  background: var(--color-primary);
  border: none;
  color: #FFFFFF;
}
.amewo-btn-cta-primary .btn:hover,
.amewo-btn-cta-primary .btn:focus,
.amewo-btn-cta-primary .btn:active {
  background: var(--color-primary);
  opacity: .9;
  color: #FFFFFF;
}
.amewo-btn-cta-secondary .btn {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: #1B1B1B;
}
.amewo-btn-cta-secondary .btn:hover,
.amewo-btn-cta-secondary .btn:focus,
.amewo-btn-cta-secondary .btn:active {
  background: #FAFAFA;
  border-color: var(--color-border);
  color: #1B1B1B;
}

/* ----------------------------------------------------------------------- */
/* USP-Leiste (Figma Node 133:706): 4 gleich breite Boxen mit Icon-Badge,  */
/* Heading und Paragraph. Portlet: "Row" mit 4 Spalten, jede Spalte        */
/* bekommt amewo-usp-item. Icons per Font Awesome (kein Bild-Asset nötig). */
/* ----------------------------------------------------------------------- */
/* USP-Row ist eine Bootstrap-.row mit .col-lg-3-Spalten (4 nebeneinander).
   NICHT mit flex/gap überschreiben – sonst summieren sich col-Breiten + gap
   auf über 100% und es bricht auf 3+1 um.
   Hellblaues Band über die volle Breite hinter der ganzen Reihe (Wunsch des
   Kunden; Hinweis: im Figma-Export von Node 133:706 ist das Band weiß -
   Farbton bei Bedarf hier zentral ändern). Full-Bleed per -1rem-Margins wie
   bei .amewo-hero; die Badges (#B4D6FF) bleiben auf dem helleren #DFEEFF
   sichtbar. */
.amewo-usp-row {
  padding: 56px 0;
  background: var(--color-secondary-bg);
  margin-left: -1rem;
  margin-right: -1rem;
}
/* Items sind OPC-Panels (Bootstrap .card). Im Figma flach ohne Kartenrahmen –
   weißen Hintergrund, Border und Schatten entfernen, Inhalt zentrieren. */
.amewo-usp-item.card {
  background: transparent;
  border: none;
  box-shadow: none;
}
.amewo-usp-item .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.amewo-usp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--color-secondary);
  color: #2E6FB8;
  font-size: 32px;
  margin-bottom: 24px;
}
/* Original-Icons aus dem Figma-Entwurf (weiße Outline-Icons, 32px, Strich
   2.67 - liegen als images/usp-*.svg im Template). Die früher verwendeten
   Font-Awesome-Solid-Icons wichen sichtbar vom Entwurf ab; FA bleibt nur
   als Fallback-Styling (color/font-size oben) erhalten. */
.amewo-usp-icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.amewo-usp-heading {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.44px;
  color: #1B1B1B;
  margin: 0 0 8px;
}
.amewo-usp-text {
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 22.75px;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 767px) {
  .amewo-usp-row {
    padding: 32px 0;
  }
  .amewo-usp-item {
    flex: 1 1 100%;
  }
}

/* ----------------------------------------------------------------------- */
/* Trust-Leiste im Footer (Figma Node 1:304): 4 Vertrauens-Merkmale auf     */
/* WEISSEM Grund - bewusst nicht die blaue USP-Reihe, sondern eine kleinere */
/* Variante davon: Badge 56px/Radius 16 (statt 64/20), Icon 28px (statt 32),*/
/* Überschrift 14px (statt 18), Text 12px (statt 14).                       */
/* Aufbau im OPC identisch zur USP-Reihe, nur mit diesen Klassen.           */
/* ----------------------------------------------------------------------- */
/* Wrapper der Leiste im Footer-Template. Liegt außerhalb von #main-wrapper,
   braucht deshalb eine eigene weiße Fläche - sonst schiene der graue
   Body-Hintergrund durch. */
.amewo-trust-bar {
  background: #FFFFFF;
}
/* Auf der Startseite (PAGE_STARTSEITE = 18) ausblenden: Dort steht bereits die
   USP-Reihe aus dem OPC, zwei fast gleich aussehende Leisten übereinander
   wirken doppelt gemoppelt. */
body[data-page="18"] .amewo-trust-bar {
  display: none;
}
/* Auf Entwurfsbreite begrenzt. Figma "TRUST 2" (Node 133:949): vier Einträge
   à 252px mit 48px Abstand = 300px-Raster. Eine Reihe von höchstens 1200px mit
   vier Viertelspalten trifft genau dieses Raster (gleiche Mittelpunkte, 900px
   vom ersten bis zum letzten Eintrag). Ohne Begrenzung lagen die Einträge bei
   2000px Fensterbreite rund 500px auseinander.
   Warum nicht über "boxed" im OPC: Das Container-Portlet ignoriert das
   Häkchen, sobald der Container IN einem anderen Container liegt
   (Container.tpl: `{if $inContainer}` gibt dann ein schlichtes div aus). Auf
   der Startseite steckt alles in einem äußeren Seiten-Container - "boxed"
   greift dort also bei keinem Container.
   margin auto ersetzt die -16px der Bootstrap-.row; die Spalten behalten
   ihre 16px Innenabstand. Unterhalb von 1200px Fensterbreite ändert sich
   nichts. Gilt auch für die Trust-Leiste des Footer-Templates (dieselbe
   Figma-Vorlage). */
.amewo-trust-row {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 0 40px;
}
.amewo-trust-item.card {
  background: transparent;
  border: none;
  box-shadow: none;
}
.amewo-trust-item .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.amewo-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--color-secondary);
  margin-bottom: 12px;
}
.amewo-trust-icon img {
  display: block;
  width: 28px;
  height: 28px;
}
.amewo-trust-heading {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #1B1B1B;
  margin: 0 0 4px;
}
/* Inter Regular 12px / 16px, Zeichenabstand 0 (Vorgabe). Die 0 steht
   ausdrücklich da: Ohne Angabe würde der Wert vererbt, falls weiter oben mal
   einer gesetzt wird. */
.amewo-trust-text {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 767px) {
  .amewo-trust-row {
    padding: 32px 0 24px;
  }
}

/* ----------------------------------------------------------------------- */
/* Kategoriebalken (direkt unter dem Hero): 4 verlinkte Kategoriebilder auf */
/* hellgrauen Rundkacheln, darunter fette zentrierte Labels. Aufbau im OPC: */
/* Row-Portlet (amewo-cat-row) mit 4 Spalten, je Image-Portlet mit Link     */
/* (amewo-cat-img) + Text-Portlet (amewo-cat-label). Siehe Bauanleitung.    */
/* ----------------------------------------------------------------------- */
/* Breitenbegrenzung der Reihe: Der OPC-Container läuft über die volle
   Fensterbreite - auf breiten Monitoren würden die Spalten dadurch sehr breit
   und die 334px-Kacheln mit riesigen Lücken darin "schwimmen". 1500px ergeben
   4 Spalten à ~375px, abzüglich Bootstrap-Gutter ~345px Inhalt: die Kachel
   erreicht damit genau ihre 334px Maximalbreite und das 317px breite Produkt
   bleibt innerhalb des Sockels (Verhältnis wie im Entwurf). Der OPC-Container
   selbst kann auf voller Breite bleiben. */
/* Der Balken wird per OPC-Blueprint auch auf anderen Seiten eingesetzt. Dort
   ist der Seitenhintergrund grau (#F5F7FA), die Sockel sind #F5F5F5 - der
   Unterschied wäre praktisch unsichtbar. Deshalb bekommt der Balken außerhalb
   der Startseite ein weißes Band über die volle Fensterbreite, wie im Entwurf.
   Verfahren wie bei .amewo-ref-network: seitlicher Überstand über einen sehr
   breiten Schlagschatten, oben und unten per clip-path abgeschnitten. */
body:not([data-page="18"]) .amewo-cat-row {
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF;
  clip-path: inset(0 -100vmax);
}
.amewo-cat-row {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  /* Kein oberer Innenabstand: Die Kategorie-PNGs bringen bereits ~85px
     transparenten Rand über dem Produkt mit (bei 339px Bildhöhe), der optisch
     als Abstand zum Hero wirkt. Zusätzliches padding-top ergäbe eine doppelt
     so große Lücke. */
  padding: 0 0 56px;
}
/* "Sockel"-Optik nach Figma (334x266): Die graue Kachel ist ein FLACHER
   Sockel, das Produktbild steht darauf und ragt oben darüber hinaus. Deshalb
   liegt das Grau als ::before-Sockel fester Höhe HINTER dem Bild (nicht als
   Hintergrund des mitwachsenden Bild-Divs, sonst umschließt es das Produkt
   komplett und wirkt klein). Das Image-Portlet setzt zudem inline
   max-width:{Bildbreite} + die Klassen w-100/img-fluid aufs Bild - beide hier
   überschrieben, damit das Bild per HÖHE skaliert wird und die Kachel voll
   über die Spalte geht. */
.amewo-cat-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  /* Bezugsgroesse fuer die cqw-Angaben an Sockel und Bild: beide richten sich
     nach der Breite DIESER Kachel, nicht nach dem Fenster. */
  container-type: inline-size;
  /* Sockelbreite laut Figma 334px. Das Image-Portlet setzt hier inline die
     Bildbreite als max-width (z. B. 634px) - das ergäbe je Kategorie
     unterschiedlich breite Sockel, daher per !important auf den festen
     Entwurfswert kappen und zentrieren. */
  max-width: 334px !important;
  margin-left: auto;
  margin-right: auto;
  background: transparent;
}
.amewo-cat-img::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* FLACHER Sockel - die Höhe ergibt bewusst NICHT die Bildhöhe, sonst
     umschließt das Grau das Produkt und es wirkt klein/eingesperrt.
     Zu beachten: Die Kategorie-PNGs haben transparenten Rand eingebaut
     (kat-tablet.png: 634x678, sichtbares Produkt nur 372x432 - 25% Leerraum
     oben, 11% unten). Das sichtbare Produkt ist bei height:339px also ~216px
     hoch und sitzt ~37px über der Sockelunterkante; bei 130px Sockel ragt es
     gut sichtbar darüber hinaus. Bei Bildern mit anderem Leerraum ggf.
     nachjustieren. */
  /* 160px ist der Entwurfswert bei 334px Kachelbreite. Auf dem Tablet ist die
     Kachel aber schmaler (gemessen bei 1024px: 212px), waehrend Sockel und
     Bild in festen Pixeln stehen blieben - das Produkt ragte dadurch 179px
     ueber einen nur 160px hohen Sockel und wirkte "sehr weit hochgezogen"
     (Rueckmeldung des Nutzers).
     Deshalb haengen beide Hoehen jetzt an der KACHELBREITE statt an festen
     Pixeln: 160/334 = 47,9 % und (beim Bild) 339/334 = 101,5 %. Damit stimmt
     das Verhaeltnis des Entwurfs in jeder Breite - gemessen bei 1024px:
     Kachel 212, Sockel 102, Bild 215, Ueberstand 114 statt 179.
     `cqw` braucht `container-type` an der Kachel (siehe .amewo-cat-img); die
     Pixelangabe davor bleibt als Rueckfall fuer Browser ohne
     Container-Query-Einheiten stehen. */
  height: 160px;
  height: 47.9cqw;
  background: #F5F5F5;
  border-radius: 20px;
  transition: box-shadow .25s ease;
}
/* Leichte Bewegung beim Ueberfahren (Wunsch Sebastian): Das freigestellte
   Produkt hebt sich an und wird eine Spur groesser, der Sockel bekommt
   gleichzeitig seinen weichen Schatten. Vorher waren es 4px ohne
   Groessenaenderung - das war kaum zu sehen. */
.amewo-cat-img a {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 0;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.amewo-cat-img picture {
  display: block;
  line-height: 0;
}
/* Bildhöhe 339px laut Figma (Tablet-Motiv dort 317x339 - das entspricht exakt
   dem natürlichen Seitenverhältnis der Datei 634x678, Breite ergibt sich also
   automatisch). NOVA gibt dem Bild w-100/img-fluid mit, was es auf die
   Spaltenbreite zwingen würde - daher width per !important auf auto. */
.amewo-cat-img img {
  width: auto !important;
  /* Siehe Kommentar am Sockel: Hoehe an der Kachelbreite statt fest in px,
     339/334 = 101,5 %. Pixelwert als Rueckfall. */
  height: 339px;
  height: 101.5cqw;
  max-width: 100%;
  object-fit: contain;
}
.amewo-cat-img:hover::before {
  box-shadow: 0 10px 28px rgba(27, 27, 27, 0.10);
}
.amewo-cat-img:hover a,
.amewo-cat-img:focus-within a {
  transform: translateY(-10px) scale(1.03);
}
/* Wer Bewegung abgestellt hat, bekommt nur den Schatten. */
@media (prefers-reduced-motion: reduce) {
  .amewo-cat-img a {
    transition: none;
  }
  .amewo-cat-img:hover a,
  .amewo-cat-img:focus-within a {
    transform: none;
  }
}
/* Inter Bold 20px / 28px, Zeichenabstand -0,45px (Vorgabe) */
.amewo-cat-label {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.45px;
  color: #1B1B1B;
  text-align: center;
  margin: 16px 0 0;
}
.amewo-cat-label a {
  color: #1B1B1B;
  text-decoration: none;
}
@media (max-width: 767px) {
  .amewo-cat-row {
    padding: 0 0 40px;
  }
  .amewo-cat-img::before {
    height: 110px;
  }
  .amewo-cat-img img {
    height: 230px;
  }
  .amewo-cat-label {
    margin-bottom: 24px;
  }
}

/* ----------------------------------------------------------------------- */
/* Produkt-Grid "Produkte, die unsere Kunden lieben" (Figma Node 133:746): */
/* Heading + Subtext, 6 Produktkarten über ProductStream-Portlet           */
/* (listStyle = gallery, nutzt automatisch die .productlist .productbox-  */
/* Regeln weiter oben in dieser Datei), darunter CTA-Button-Paar.          */
/* ----------------------------------------------------------------------- */
/* Hellgraues Sektions-Band (#FAFAFA) hinter dem gesamten Produktbereich –
   Figma zeigt es von "Produkte, die unsere Kunden lieben" bis einschließlich
   Mengenrabatte-Umfeld (Panel #F3F3F3 liegt DARAUF), per Pixel-Messung aus
   dem Entwurf bestätigt. Verwendung: im OPC ein Container-Portlet um
   Heading/Subtext/ProductStream/CTA-Row/Mengenrabatte legen und ihm diese
   Custom Class geben. Full-Bleed über die -1rem-Margins (kompensiert das
   Padding des äußeren container-fluid, gleiche Technik wie .amewo-hero). */
.amewo-section-gray {
  position: relative;
  background: #FAFAFA;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 96px 1rem;
}
/* Picto-Wasserzeichen (Figma Node 133:1103) - hängt am grauen Sektionsband,
   NICHT am Mengenrabatte-Panel: Im Entwurf sitzt es auf der grauen Fläche
   rechts neben dem Panel und reicht bis zur Unterkante der Sektion. Am Panel
   verankert konnte es dort nie ankommen, weil darunter weißer Grund liegt und
   das weiße Picto unsichtbar wird.
   Unten bündig (bottom:0) mit minimalem Anschnitt: Das Element ist 12px
   niedriger als die Grafik (172px) und zeigt sie ab der Oberkante.
   Erscheint erst, wenn der Wrapper im OPC angelegt ist. */
/* ANIMIERT (Wunsch des Nutzers) - jetzt per LOTTIE, nicht mehr als
   CSS-Hintergrund-SVG. Warum der Wechsel (1.0.295):
   amewo-hero-icon-animated.svg traegt die Vergroesserung der vier Kreise
   AUSSCHLIESSLICH in ihren SMIL-Animationen (`additive="sum"`, Startwert
   `0 0`, Endwert `3 3`); im statischen Markup stehen sie auf Faktor 1. Die
   drei Punkte (_R_G_L_3/2/1_G) haben scale(3,3) dagegen fest im Markup.
   SMIL laeuft in einem CSS-Hintergrundbild nicht - herausgekommen ist
   deshalb ein Mischbild aus winzigen Kreisen und drei Punkten in voller
   Groesse, also genau das "irgendwas passt da noch nicht ganz".
   Loesung ist dieselbe wie beim Hero: die Lottie-Fassung derselben
   Animation (images/amewo-logoanimation.json, weisse Striche, 3s Schleife),
   eingehaengt per Skript aus layout/header.tpl - das graue Band ist ein
   OPC-Container, an dessen Markup wir sonst nicht herankommen.

   ZUSCHNITT: Die Leinwand ist 750x500, die Zeichnung belegt darin ueber die
   gesamte Laufzeit nur x 170-566 und y 124-361 (396 x 237 Einheiten, live am
   laufenden Player ausgemessen - im Ruhezustand ist sie kleiner, maximal
   wird sie 385x225 gross). Der sichtbare Rahmen ist deshalb auf diesen
   Ausschnitt zugeschnitten: 340px Breite wie bisher -> Leinwand
   340 x 750/396 = 644px breit, 429px hoch; Versatz 170/750 x 644 = 146px
   und 124/500 x 429 = 106px; sichtbare Hoehe 237/500 x 429 = 203px.
   Dadurch sitzt die Zeichnung mit `bottom: 0` UNTEN BUENDIG auf der Kante
   des grauen Bandes auf und wird weder angeschnitten noch laeuft sie in den
   weissen Bereich darunter (Wunsch des Nutzers).

   POSITION: seit 1.0.314 IM Mengenrabatt-Kasten, nicht mehr daneben.
   ~~Vorher war das Piktogramm am rechten Kastenrand verankert
   (`left: min(50% + 652px, 100% - 348px)`)~~ - daneben ist aber nur auf sehr
   breiten Schirmen Platz. Gemessen bei 1280px: Rahmen ab x=917, Kasten reicht
   bis x=1249, das Piktogramm lag also fast vollstaendig hinter dem Kasten und
   lugte nur unten rechts hervor (Rueckmeldung des Nutzers: "Animation ist
   versteckt"). Im Kasten gibt es dagegen in jeder Breite freien Platz: Der
   Text steht links, rechts unten ist nichts. Damit entfaellt die Frage nach
   dem Umbruch ganz - Vorschlag des Nutzers.
   GROESSE: Der Rahmen waechst mit dem Kasten (26 % seiner Breite, gedeckelt
   auf die 340px des Entwurfs), das Seitenverhaeltnis haelt `aspect-ratio`.
   Gemessen: 321x195 bei 1280px, 246x150 bei 992px Fensterbreite, jeweils
   vollstaendig im Kasten und ohne Beruehrung mit Text oder Button. */
.amewo-watermark {
  position: absolute;
  left: auto;
  right: 40px;
  bottom: 24px;
  z-index: 0;
  width: clamp(200px, 26%, 340px);
  height: auto;
  aspect-ratio: 340 / 207;
  /* overflow: hidden MUSS bleiben. Die Leinwand ist mit 184 % deutlich
     groesser als der Rahmen; ohne Zuschnitt ragt sie darueber hinaus und
     erzeugt neben dem Kasten eine waagerechte Scrollleiste (gemessen bei
     2100px Fensterbreite: scrollWidth 2180 statt 2100). Der Sicherheitsrand
     gegen das Anschneiden steckt stattdessen in den Prozentwerten der
     Leinwand, siehe naechste Regel. */
  overflow: hidden;
  pointer-events: none;
}
/* Die Leinwand im Rahmen: Versatz und Groesse in PROZENT statt in Pixeln -
   nur so bleibt der Zuschnitt richtig, wenn der Rahmen mitwaechst.
   Umrechnung der oben hergeleiteten Werte auf den 340x207-Rahmen:
   -142/340 = -41,76 %, -104/207 = -50,24 %, 627/340 = 184,41 %,
   418/207 = 201,93 %. Prozentwerte bei `left`/`width` beziehen sich auf die
   Rahmenbreite, bei `top`/`height` auf die Rahmenhoehe.
   Breite UND Hoehe stehen ausdruecklich - das aspect-ratio aus
   .amewo-lottie greift dann nicht mehr, was hier auch richtig ist. */
/* SICHERHEITSRAND: Ohne ihn deckt sich die Zeichnung auf den Pixel mit dem
   Rahmen - ueber alle 90 Bilder gemessen (bei 1024px: Rahmen 699-953 x
   4657-4811, Zeichnung 699-953 x 4656-4811). Schon ein Rundungspixel schnitt
   damit eine Strichkante ab, und waehrend der Animation soll nichts
   verschwinden (Wunsch des Nutzers).
   Deshalb ist die Leinwand um 6 % verkleinert und mittig gerueckt: 3 % Luft
   auf jeder Seite. Rechenweg: Werte oben mal 0,94, Versatz dann
   3 % - 41,76 % x 0,94 = -36,25 % bzw. 3 % - 50,24 % x 0,94 = -44,23 %.
   Das Piktogramm wird dadurch 6 % kleiner - unauffaellig, und dafuer ist der
   Zuschnitt in jeder Groesse auf der sicheren Seite. */
.amewo-watermark .amewo-lottie {
  position: absolute;
  left: -36.25%;
  top: -44.23%;
  width: 173.35%;
  height: 189.81%;
}
/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt das statische
   Bild; das Skript haengt dann gar keinen Player ein (siehe header.tpl).
   PNG 565x339, eng beschnitten - auf dieselbe Flaeche gezogen. */
.amewo-watermark-static {
  background: url("../images/picto-watermark.png") no-repeat top left;
  background-size: 100% 100%;
}
/* Panel bleibt über dem Wasserzeichen */
.amewo-section-gray .amewo-bulk-section {
  z-index: 1;
}
/* Inhalt des Kastens ueber das Wasserzeichen legen. Noetig, weil positionierte
   Elemente mit z-index 0 sonst UEBER dem nicht positionierten Text stehen -
   dieselbe Loesung wie beim Loesungsfinder (.amewo-lf > *). */
.amewo-bulk-section > *:not(.amewo-watermark) {
  position: relative;
  z-index: 1;
}
/* Drei Zustaende, jeweils an der Frage "ist daneben Platz?" ausgerichtet:

   | Fensterbreite   | Piktogramm                                    |
   |-----------------|-----------------------------------------------|
   | < 768px         | keins - der Kasten ist einspaltig, der Text   |
   |                 | laeuft bis unten durch                        |
   | 768 - 2019px    | IM Kasten, rechts unten (Regeln oben)         |
   | ab 2020px       | NEBEN dem Kasten wie im Entwurf               |

   Zur Grenze 2020px: Der Kasten ist hoechstens 1273px breit und steht mittig,
   seine rechte Kante liegt also bei 50vw + 636px. Daneben braucht das
   Piktogramm 16px Abstand + 340px Breite + 8px zum Fensterrand - macht
   50vw >= 1000px, also rund 2000px Fensterbreite. Genau da wechselt es nach
   draussen; darunter steht es im Kasten, statt wie frueher hinter dessen
   Kante zu verschwinden. */
@media (max-width: 767.98px) {
  .amewo-bulk-section .amewo-watermark {
    display: none;
  }
}
@media (min-width: 2020px) {
  .amewo-bulk-section .amewo-watermark {
    /* Neben dem Kasten: 16px rechts von seiner Kante, unten buendig mit ihm.
       Die festen Entwurfsmasse gelten wieder, deshalb kein clamp(). */
    left: calc(100% + 16px);
    right: auto;
    bottom: 0;
    width: 340px;
    height: 207px;
    aspect-ratio: auto;
  }
}

/* Live-Fallback fuer die aktuelle OPC-Struktur: Auf der Startseite fehlt der
   vorgesehene Wrapper `.amewo-section-gray`. Heading, Subtext, ProductStream,
   CTA-Row und Mengenrabatt sind dort direkte Geschwister im Seiten-Container.
   Diese Regeln bilden das gleiche durchgehende graue Band ab, ohne andere
   OPC-Produktstreams oder normale Produktlisten zu veraendern. Sobald der
   Wrapper im OPC gesetzt ist, greift dieser Fallback bewusst nicht mehr. */
.opc-Container:not(.amewo-section-gray) > div > .amewo-section-heading {
  margin: 0 -1rem;
  padding: 96px 1rem 8px;
  background: #FAFAFA;
}
.opc-Container:not(.amewo-section-gray) > div > .amewo-section-subtext {
  margin: 0 -1rem;
  padding: 0 1rem 16px;
  background: #FAFAFA;
}
.opc-Container:not(.amewo-section-gray) > div > .amewo-product-grid {
  background: #FAFAFA;
}
.opc-Container:not(.amewo-section-gray) > div > .amewo-product-grid + .row {
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 1rem 64px;
  background: #FAFAFA;
}
.opc-Container:not(.amewo-section-gray) > div > .amewo-product-grid + .row > [class*="col"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
.opc-Container:not(.amewo-section-gray) > div > .amewo-bulk-section {
  margin-bottom: 96px;
  box-shadow: 0 0 0 100vmax #FAFAFA;
  clip-path: inset(0 -100vmax -96px);
}

.amewo-section-heading {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  color: #1B1B1B;
  text-align: center;
  margin: 0 0 8px;
}
.amewo-section-subtext {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.45px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 16px;
}
/* Kein padding-bottom: Die Produktkarten bringen bereits ~24px Eigenabstand
   nach unten mit. Zusammen mit den früheren 64px entstand ein 88px hoher
   Leerraum INNERHALB des Grid-Elements - der addierte sich unsichtbar zum
   Abstand der CTA-Reihe und ergab 137px zwischen letzter Karte und Button
   (Entwurf: ~66px). Wer hier wieder Abstand einbaut, muss ihn von der
   margin-top der CTA-Reihe abziehen. */
.amewo-product-grid {
  padding: 16px 0 0;
}

/* Das ProductStream-Portlet rendert `.product-list` (mit Bindestrich) und
   nicht den `.productlist`-Wrapper der normalen Kategorieansicht.
   DESHALB STEHEN AB HIER ZWEI AUFHAENGER an jeder Regel:
     .amewo-product-grid                             = OPC-Grid der Startseite
     body[data-page="2"] #product-list.layout-gallery = Kategorie, Suche,
       Hersteller und Merkmalwert - alle vier sind PAGE_ARTIKELLISTE
       (ControllerFactory.php:103 ff.), ein Scope genuegt also fuer alle.
   Bewusst KEIN :is(...) als Kurzform: `#product-list` bringt eine ID mit,
   die Regel wuerde damit auch fuer das OPC-Grid schlagartig spezifischer und
   koennte spaetere Startseiten-Regeln aushebeln.
   Bewusst nur `.layout-gallery`: In der Zeilendarstellung (Umschalter oben
   rechts) rendert JTL `item_list.tpl` mit voelig anderem Innenaufbau - die
   Kartenpolsterung und der Bildzuschnitt passen dort nicht. Jene Ansicht
   behaelt den leichten Feinschliff aus dem Block `.productlist .productbox`
   weiter oben. */
.amewo-product-grid .product-wrapper,
body[data-page="2"] #product-list.layout-gallery .product-wrapper,
.amewo-lf-products .product-wrapper {
  display: flex;
  margin-bottom: 24px;
}
.amewo-product-grid .productbox,
body[data-page="2"] #product-list.layout-gallery .productbox,
.amewo-lf-products .productbox {
  width: 100%;
  height: 100%;
  padding: 16px 16px 18px;
  background: #FFFFFF;
  /* Ohne Rahmen (Wunsch des Nutzers), siehe Filterkarte. */
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.amewo-product-grid .productbox:hover,
.amewo-product-grid .productbox:focus,
.amewo-product-grid .productbox.focus,
body[data-page="2"] #product-list.layout-gallery .productbox:hover,
.amewo-lf-products .productbox:hover,
body[data-page="2"] #product-list.layout-gallery .productbox:focus,
.amewo-lf-products .productbox:focus,
body[data-page="2"] #product-list.layout-gallery .productbox.focus,
.amewo-lf-products .productbox.focus {
  z-index: auto;
  box-shadow: 0 8px 24px rgba(27, 27, 27, .08);
  transform: translateY(-2px);
}
.amewo-product-grid .productbox-inner::before,
body[data-page="2"] #product-list.layout-gallery .productbox-inner::before,
.amewo-lf-products .productbox-inner::before {
  display: none;
}
.amewo-product-grid .productbox > form,
.amewo-product-grid .productbox-inner,
.amewo-product-grid .productbox-inner > .row,
body[data-page="2"] #product-list.layout-gallery .productbox > form,
.amewo-lf-products .productbox > form,
body[data-page="2"] #product-list.layout-gallery .productbox-inner,
.amewo-lf-products .productbox-inner,
body[data-page="2"] #product-list.layout-gallery .productbox-inner > .row,
.amewo-lf-products .productbox-inner > .row {
  height: 100%;
}
.amewo-product-grid .productbox-inner > .row > [class*="col"]:last-child,
body[data-page="2"] #product-list.layout-gallery .productbox-inner > .row > [class*="col"]:last-child,
.amewo-lf-products .productbox-inner > .row > [class*="col"]:last-child {
  display: flex;
  flex-direction: column;
}
/* Produktbild: nur zentriert, NICHT vergroessert.
   ~~Bis 1.0.300 stand hier zusaetzlich scale(1.35)~~ - die Bilder wurden damit
   auf 135% gezogen und vom overflow:hidden der .productbox-images beschnitten
   (gemessen: Bild 449px in einem 332px-Kasten, also oben/unten und links/rechts
   je 58px abgeschnitten). Auf Wunsch des Nutzers entfernt: Produktbilder
   sollen IMMER vollstaendig zu sehen sein (contain), auch wenn sie dadurch
   kleiner wirken und der weisse Eigenrand der Fotos sichtbar bleibt.
   Gilt bewusst fuer alle drei Stellen mit dieser Kachel - Startseiten-Raster,
   Kategorieseite und Loesungsfinder zeigen dieselben Fotos. */
/* Das Bild fuellt seinen Rahmen - `contain`, es wird also weiterhin nichts
   beschnitten.
   Warum das noetig ist: NOVA gibt dem <img> ein `sizes` mit, das von der
   Spaltenzahl des DESKTOPS ausgeht ("50vw" unterhalb von 992px). In der
   einspaltigen Ansicht ist die Kachel aber fast fensterbreit, und ein Bild
   ohne eigene Breitenangabe wird genau so gross gerechnet, wie `sizes` es
   ankuendigt. Gemessen bei 496px Fensterbreite: Rahmen 432px, Bild 248px -
   also 57%. Mit 100/100 sitzt das Bild immer genau im Rahmen.
   Unscharf wird dadurch nichts: Die Datei, die der Browser laedt, ist mit
   600px deutlich groesser als der Rahmen.
   Die Verschiebung um -50% bleibt: NOVA setzt das Bild auf top/left 50%;
   bei voller Breite hebt sich beides exakt auf (gemessen: Bild und Rahmen
   liegen auf demselben Punkt). */
.amewo-product-grid .productbox-image img,
body[data-page="2"] #product-list.layout-gallery .productbox-image img,
body[data-page="2"] #product-list.layout-list .productbox-image img,
.amewo-lf-products .productbox-image img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.amewo-product-grid .productbox-images,
body[data-page="2"] #product-list.layout-gallery .productbox-images,
.amewo-lf-products .productbox-images {
  overflow: hidden;
  border-radius: 16px;
}
/* Die Ausnahme fuer den Platzhalter keinBild.gif ist seit dem Wegfall von
   scale(1.35) gegenstandslos - sie bleibt als Merker stehen, falls jemand die
   Vergroesserung wieder einfuehrt: Der Platzhalter darf sie nicht mitbekommen,
   er ist nur 130px gross und wuerde sichtbar unscharf. */
.amewo-product-grid .productbox-image img[src*="keinBild"],
body[data-page="2"] #product-list.layout-gallery .productbox-image img[src*="keinBild"],
body[data-page="2"] #product-list.layout-list .productbox-image img[src*="keinBild"],
.amewo-lf-products .productbox-image img[src*="keinBild"] {
  /* Der Platzhalter ist nur 130px gross und darf deshalb NICHT auf
     Rahmengroesse gezogen werden - er bleibt bei seiner eigenen Groesse,
     mittig im Rahmen. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
}
/* Einspaltig (unter 576px) wird der Bildbereich sonst fensterbreit und damit
   quadratisch sehr hoch - bei 496px Fensterbreite 432px hoch, die Kachel
   insgesamt 687px. Die Deckelung bei 360px laesst Telefone unangetastet
   (bei 390px ist der Rahmen 326px breit, 100% sind dort also weniger als
   360px) und kuerzt nur die breiteren einspaltigen Faelle.
   `min()` statt einer festen Hoehe, damit der Rahmen quadratisch BLEIBT,
   solange er schmaler als 360px ist. */
@media (max-width: 575.98px) {
  .amewo-product-grid .productbox-image.square::before,
  body[data-page="2"] #product-list.layout-gallery .productbox-image.square::before,
  .amewo-lf-products .productbox-image.square::before {
    padding-bottom: min(100%, 360px);
  }
}
.amewo-product-grid .productbox-title,
body[data-page="2"] #product-list.layout-gallery .productbox-title,
.amewo-lf-products .productbox-title {
  margin: 16px 0 6px;
}
.amewo-product-grid .productbox-title,
.amewo-product-grid .productbox-title a,
body[data-page="2"] #product-list.layout-gallery .productbox-title,
.amewo-lf-products .productbox-title,
body[data-page="2"] #product-list.layout-gallery .productbox-title a,
.amewo-lf-products .productbox-title a {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
}
.amewo-product-card-description {
  display: -webkit-box;
  min-height: 40px;
  margin: 0 0 16px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.amewo-product-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
.amewo-product-card-footer [itemprop="offers"],
.amewo-product-card-footer .price_wrapper,
.amewo-product-card-footer .price-note {
  margin: 0;
}
.amewo-product-card-footer .price {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.amewo-product-card-details {
  flex: 0 0 auto;
  padding: 10px 18px;
  color: #FFFFFF;
  background: var(--color-primary);
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: opacity .15s ease;
}
.amewo-product-card-details:hover,
.amewo-product-card-details:focus {
  color: #FFFFFF;
  opacity: .9;
  text-decoration: none;
}
/* --- Nur Startseite: Karten ruhiger (Wunsch des Nutzers) --------------- */
/* Die Kartenregeln oben teilt sich die Startseite mit der Kategorieseite.
   Diese Abweichungen gelten bewusst NUR fuer das Startseiten-Grid.
   - Titel 16/24 statt 18/28: Er stand hierarchisch ueber dem Produktbild.
   - Unten 36px statt 18px Innenabstand ("ca. 100% mehr unter dem Preis").
   - Fusszeile rechts 5px eingerueckt: "Details" steht damit 21px statt 16px
     von der Kante ("1/3 mehr"). Absichtlich an der Fusszeile und nicht an
     der Karte - sonst wuerde das Bild mitschrumpfen.
   - Kein Rahmen: Weisse Karte auf grauem Produktband traegt sich selbst,
     der Schatten beim Ueberfahren bleibt. */
.amewo-product-grid .productbox {
  padding-bottom: 36px;
  border: 0;
}
.amewo-product-grid .productbox-title,
.amewo-product-grid .productbox-title a {
  font-size: 16px;
  line-height: 24px;
}
.amewo-product-grid .amewo-product-card-footer {
  padding-right: 5px;
}
/* Feste Kartenhoehe von NOVA aufheben - nur im Startseiten-Grid.
   NOVAs registerImageHover() (js/jtl.evo.js:1166) fixiert bei load UND bei
   jedem resize JEDEN .product-wrapper per Inline-Style auf seine gerade
   gemessene Hoehe. Beim naechsten resize misst es die fixierte Hoehe und
   behaelt sie - eine zu grosse Hoehe schrumpft nie zurueck. Flexbox verteilte
   den Ueberschuss dann auf Bild- und Textbereich: weisser Raum unter dem
   Bild, grosse Luecke ueber dem Preis (vom Nutzer als "seltsam" gemeldet).
   Gemessen ohne die Fixierung: Karte 510px, Bild quadratisch, 6px zwischen
   Titel und Preiszeile.
   Wofuer NOVA das braucht: Auf der KATEGORIESEITE werden Karten mit
   Variationen beim Ueberfahren absolut positioniert; ohne feste Hoehe
   spraenge das Raster. Diese Regel haengt an #product-list - das
   Startseiten-Grid hat die ID nicht, hier ist die Fixierung ueberfluessig.
   Auf der Kategorieseite bleibt sie deshalb BEWUSST stehen.
   !important ist noetig, weil nur so ein Inline-Style zu schlagen ist. */
.amewo-product-grid .product-wrapper {
  height: auto !important;
}
/* Gleich hohe Karten je Reihe kommen jetzt aus Flexbox statt aus der
   Fixierung. NOVA setzt die Reihe auf align-items: flex-start. */
.row.amewo-product-grid {
  align-items: stretch;
}
/* Karte als Spalte: Das Bild behaelt seine natuerliche Hoehe, nur der
   Textbereich waechst. Vorher lagen Bild und Text als zwei umgebrochene
   Zeilen einer Flex-Reihe, und Mehrhoehe verteilte sich auf beide. */
.amewo-product-grid .productbox-inner > .row {
  flex-direction: column;
  flex-wrap: nowrap;
}
.amewo-product-grid .productbox-inner > .row > [class*="col"] {
  flex: 0 0 auto;
  max-width: 100%;
}
.amewo-product-grid .productbox-inner > .row > [class*="col"]:last-child {
  flex: 1 1 auto;
}

.amewo-product-grid .productbox-ribbon,
.amewo-product-grid .productbox-quick-actions {
  display: none !important;
}

/* JTL setzt fuer den ProductStream ab XL vier Spalten. Der Figma-Frame
   bleibt auch auf grossen Desktop-Ansichten bei einem 3x2-Raster. */
@media (min-width: 992px) {
  .amewo-product-grid > .product-wrapper {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
@media (max-width: 767px) {
  .amewo-product-grid > .product-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.amewo-product-grid-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
/* Dieselbe Zentrierung auch ohne die Custom Class, allein über die Position
   hinter dem Produkt-Grid. Wichtig, weil das OPC-Row-Portlet die beiden
   Buttons in Bootstrap-Spalten (col-md-6 = je 50% Breite) legt - ohne diese
   Regel steht einer ganz links und einer in der Mitte. Bewusst NICHT auf
   `:not(.amewo-section-gray)` gescopet wie der Fallback weiter unten, sonst
   fällt die Zentrierung weg, sobald der graue Wrapper im OPC angelegt ist.
   Über .amewo-product-grid greift es nur bei unserem Grid, nicht bei anderen
   Produktstreams. */
.amewo-product-grid + .row {
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* Vertikale Abstände exakt nach Figma: Produkt-Grid endet bei y1581.5, die
     CTA-Reihe beginnt bei y1629.5 (= 48px), das Mengenrabatte-Panel folgt bei
     y3166 gegenüber Reihenende y3074 (= 92px).
     padding hier und an den Spalten auf 0, damit ausschließlich diese Margins
     den sichtbaren Abstand bestimmen - sonst addieren Bootstraps Spalten- und
     Row-Innenabstände unkontrolliert dazu. */
  margin: 40px 0 92px;
  padding: 0;
}
.amewo-product-grid + .row > [class*="col"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
@media (max-width: 767px) {
  .amewo-section-heading {
    font-size: 24px;
  }
  .opc-Container:not(.amewo-section-gray) > div > .amewo-section-heading {
    padding-top: 64px;
  }
  .opc-Container:not(.amewo-section-gray) > div > .amewo-product-grid + .row {
    flex-direction: column;
    padding-bottom: 48px;
  }
  .opc-Container:not(.amewo-section-gray) > div > .amewo-bulk-section {
    margin-bottom: 64px;
    clip-path: inset(0 -100vmax -64px);
  }
  .amewo-product-grid .productbox {
    padding: 12px 12px 16px;
  }
  .amewo-product-card-description {
    min-height: 0;
  }
}

/* ----------------------------------------------------------------------- */
/* "Mengenrabatte für jeden" (Figma Node 133:1102 / 25:7414): graues        */
/* Rundpanel (#F3F3F3, radius 24px) mit Heading (36px), Subtext (20px),     */
/* 4-Punkte-Vorteilsliste mit roten Kreis-Häkchen und rotem CTA             */
/* "Jetzt anfragen". Portlet: "Panel"/"Container" mit Custom Class          */
/* amewo-bulk-panel; Button nutzt die bestehenden .amewo-btn-cta-Klassen    */
/* (siehe OPC-Bauanleitung-Startseite.md, Abschnitt "Mengenrabatte").       */
/* ----------------------------------------------------------------------- */
/* Das graue Panel selbst. Wird in der Praxis direkt auf den OPC-Container
   gelegt (Custom Class amewo-bulk-section), der Hintergrund/Radius über die
   Portlet-Einstellungen mitbringt - deshalb tragen beide Klassen dieselben
   Maße: Breite laut Figma max. 1273px, zentriert, mit großzügigem
   Innenabstand. Ohne das horizontale Padding klebt der Text am Panelrand. */
.amewo-bulk-section,
.amewo-bulk-panel {
  position: relative;
  max-width: 1273px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 64px;
  border-radius: 24px;
}
/* Nur wenn die Klasse als eigenes Panel-Element genutzt wird (nicht auf einem
   Container-Portlet, das die Farbe schon selbst setzt). */
.amewo-bulk-panel {
  background: #F3F3F3;
}
.amewo-bulk-heading {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  color: #1B1B1B;
  margin: 0 0 12px;
}
.amewo-bulk-subtext {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0 0 24px;
  /* Kein max-width: Im Figma steht der Satz einzeilig durch. Eine Begrenzung
     (früher 820px) hat ihn künstlich umbrechen lassen. */
}
.amewo-bulk-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.amewo-bulk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family-base);
  font-size: 16px;
  color: #1B1B1B;
}
/* Kreis-Häkchen vor jedem Vorteil (Figma: 24px Kreis, weißes Icon).
   GRAU statt Rot (Wunsch des Nutzers, 23.09.2026): Vier rote Kreise direkt
   über einem roten CTA nahmen dem Button die Wirkung. Rot bleibt damit den
   Aktionen und Badges vorbehalten - dieselbe Begründung steht schon bei der
   Merkmalliste der Artikelseite (.amewo-pd-features). Das Symbol in der
   SVG ist weiß gezeichnet, der Kreis muss also dunkel genug bleiben:
   --color-text-muted (#6B6B6B) trägt Weiß mit rund 4,9:1. */
.amewo-bulk-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  /* Original-Icon aus dem Entwurf (Figma Node 1:266): ein SCHILD mit Häkchen
     (shield-check, weiße Outline) - bewusst kein einfaches Häkchen, das war
     eine falsche Annahme in einer früheren Version. Datei:
     images/bulk-check.svg, Größe 16px im 24px-Kreis wie im Figma.
     Als CSS-Hintergrund eingebunden, damit der Listen-HTML im OPC-Portlet
     nicht angefasst werden muss; ein dort vorhandenes
     <i class="fas fa-check"> wird unten ausgeblendet. */
  background: var(--color-text-muted) url("../images/bulk-check.svg") no-repeat center;
  background-size: 16px 16px;
  color: #FFFFFF;
  font-size: 12px;
}
.amewo-bulk-check i {
  display: none;
}
@media (max-width: 767px) {
  .amewo-bulk-section,
  .amewo-bulk-panel {
    padding: 32px 20px;
  }
  .amewo-bulk-heading {
    font-size: 26px;
  }
  .amewo-bulk-subtext {
    font-size: 16px;
  }
}

/* ====================================================================== */
/* KATEGORIE-, SUCH-, HERSTELLER- UND MERKMALSEITE                        */
/* (body[data-page="2"] = PAGE_ARTIKELLISTE)                              */
/*                                                                        */
/* Entwurf: Figma-Frame "Unsere Produkte" (Produktuebersicht mit          */
/* Filterspalte links, 3 Karten je Reihe).                                */
/*                                                                        */
/* EIN SCOPE FUER VIER SEITEN: Kategorie, Suchergebnis, Hersteller und     */
/* Merkmalwert setzen alle nSeitenTyp = 2 (ControllerFactory.php:103 ff.). */
/* Die Karten selbst stehen NICHT hier, sondern im Block                   */
/* `.amewo-product-grid` weiter oben - dort ist diese Seite als zweiter    */
/* Aufhaenger eingetragen, damit Startseiten-Grid und Produktliste         */
/* dieselben Werte teilen und nicht auseinanderlaufen.                     */
/*                                                                        */
/* BEWUSSTE ABWEICHUNGEN VOM ENTWURF (mit dem Nutzer abgestimmt):          */
/* - Die Werkzeugleiste (Sortierung, Artikel pro Seite, Umschalter Liste/  */
/*   Galerie, Trefferzeile) fehlt im Entwurf, weil dort eine reine         */
/*   Produktuebersicht gezeigt wird. Sie bleibt FUNKTIONAL VOLLSTAENDIG    */
/*   und wird nur optisch angeglichen.                                     */
/* - Das Sternchen am Preis und der MwSt-/Versandhinweis bleiben stehen,   */
/*   obwohl der Entwurf sie nicht zeigt: Pflichtangabe nach PAngV. Sie     */
/*   sind nur klein und gedaempft gesetzt.                                 */
/* - Vom Lagerstatus-Band bleibt nur "Ausverkauft" (rundes Badge). "Auf    */
/*   Lager" ist der Normalfall und faellt weg.                             */
/* ====================================================================== */

/* --- Kopfbereich ------------------------------------------------------- */
/* Ueberschrift und Trefferzahl stehen wie im Entwurf UEBER der ganzen Breite,
   also auch ueber der Filterkarte. Markup dafuer in layout/header.tpl (hinter
   <div id="content">, vor der Reihe mit der Filterspalte); NOVAs eigene
   H1-Bloecke in productlist/header.tpl sind leer ueberschrieben.
   Warum nicht per CSS aus der rechten Spalte geschoben: Die Ueberschrift liegt
   dort im Spalten-Div, ein negativer Aussenabstand wuerde nur ueber die
   Filterkarte laufen statt sie nach unten zu druecken.
   Der Block braucht keinen linken Innenabstand: Bootstrap gleicht die
   Reihen-Aussenabstaende (-15px) mit dem Spalten-Innenabstand (+15px) aus,
   ein normales Kind des Containers fluchtet also von sich aus mit der
   Filterkarte. */
.amewo-list-head {
  padding: 8px 0 24px;
}
/* H1 wie auf den uebrigen Innenseiten: Plus Jakarta ExtraBold 38/38,
   LS 0,35 (Werte aus der abgeglichenen Figma-Tabelle in AGENTS.md). */
.amewo-list-title {
  margin: 0 0 4px;
  color: #1B1B1B;
  font-family: var(--font-family-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.35px;
  line-height: 1.05;
}
/* Unterzeile "x Produkte gefunden". Typografie wie der Newsletter-Untertitel
   (Inter 14/20, LS -0,15), damit Kleinschrift im ganzen Shop gleich aussieht.
   Kein eigener Abstand nach unten - den bringt .amewo-list-head mit. */
.amewo-list-subline {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  letter-spacing: -0.15px;
  line-height: 20px;
}
/* NOVAs Titelzeile bleibt als LEERE Huelle stehen, weil nur der H1-Block
   darin geleert wurde (der OPC-Mountpoint `opc_before_heading` liegt
   ausserhalb und soll erhalten bleiben).
   Ihr `margin-bottom: 24px` faellt aus dem leeren Element HERAUS und landet
   per Margin-Collapsing an #result-wrapper - gemessen: die ganze rechte
   Spalte begann dadurch bei y=343, die Filterkarte bei y=319. Das war der
   eigentliche Grund, warum Sortierung und Artikel pro Seite tiefer standen
   als die Filterkarte. Deshalb Abstand komplett auf 0.
   Der Selektor greift am direkten Kind von #result-wrapper: NOVA legt die
   Huelle DORT ab, nicht innerhalb von .productlist-header-description. */
body[data-page="2"] #result-wrapper > .title {
  margin: 0;
}

/* --- Spaltenraster ---------------------------------------------------- */
/* JTL liefert ab xl vier Spalten (col-xl-3). Der Entwurf zeigt drei - die
   Karte traegt jetzt Beschreibung UND Kaufbutton und braucht die Breite.
   Leiter: ab 1200px drei, ab 768px zwei, darunter eine. Bewusst nicht
   NOVAs Spaltenklassen im Template umgeschrieben, sondern hier - so bleibt
   productlist/index.tpl unangetastet (ein Override dort muesste den ganzen
   Rasterblock kopieren). */
@media (min-width: 1200px) {
  body[data-page="2"] #product-list.layout-gallery > .product-wrapper {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  body[data-page="2"] #product-list.layout-gallery > .product-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 767.98px) {
  body[data-page="2"] #product-list.layout-gallery > .product-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Kachel-Fusszeile: Preis oben, Kaufbutton darunter ----------------- */
/* Im Startseiten-Grid stehen Preis und "Details" NEBENeinander; der Entwurf
   der Produktuebersicht stapelt Preis und Warenkorb-Button. Deshalb hier
   die Richtung umgestellt statt eine zweite Fusszeilenklasse zu erfinden. */
body[data-page="2"] .amewo-product-card-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
/* Pflichtangaben am Preis: Sternchen und Grundpreis-/MwSt-Zeile bleiben,
   treten aber optisch zurueck (Entwurf zeigt nur die Zahl). */
body[data-page="2"] .amewo-product-card-footer .footnote-reference,
body[data-page="2"] .amewo-product-card-footer .price-note {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
/* Warenkorb-Button der Kachel (Markup: productlist/item_box.tpl).
   Hellblau gefuellt wie alle Kauf-Buttons des Shops - Rot bleibt den
   Aktions-CTAs vorbehalten (siehe Farbtabelle in AGENTS.md). */
.amewo-product-card-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 18px;
  background: var(--color-action);
  border: 1px solid var(--color-action);
  border-radius: 8px;
  color: var(--color-on-secondary);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.31px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.amewo-product-card-cart:hover,
.amewo-product-card-cart:focus {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
  text-decoration: none;
}
/* Rueckfall-Variante fuer Varianten-, Konfig- und nicht bestellbare Artikel:
   derselbe Umriss, aber leer - der Klick fuehrt auf die Artikelseite, nicht
   in den Warenkorb. So bleibt sichtbar, dass hier noch eine Auswahl fehlt. */
.amewo-product-card-cart.amewo-product-card-cart-link {
  background: #FFFFFF;
  color: #2E6FB8;
}
.amewo-product-card-cart.amewo-product-card-cart-link:hover,
.amewo-product-card-cart.amewo-product-card-cart-link:focus {
  background: var(--color-action);
  color: var(--color-on-secondary);
}

/* --- Lagerstatus-Baender ---------------------------------------------- */
/* NOVA rendert die Suchspecial-Baender als spitze .ribbon oben links.
   Im Frontend nachgesehen: .ribbon-8 = "Auf Lager", .ribbon-7 =
   "Ausverkauft". "Auf Lager" faellt weg (Normalfall, im Entwurf nicht
   vorhanden), "Ausverkauft" bleibt als rundes Badge - ohne den Hinweis
   klicken Kunden sonst in eine Sackgasse. */
body[data-page="2"] #product-list .ribbon-8 {
  display: none;
}
body[data-page="2"] #product-list .ribbon {
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 16px;
}
/* NOVA baut die Spitze des Bandes als ::before/::after-Dreieck. Beim runden
   Badge muss sie weg, sonst haengt ein Zipfel an der Ecke. */
body[data-page="2"] #product-list .ribbon::before,
body[data-page="2"] #product-list .ribbon::after {
  display: none;
}
/* Rot des Badges auf die Primaerfarbe des Shops ziehen. NOVA nimmt dafuer
   sein eigenes Rot aus den Ribbon-Farben (_ribbons.scss), das neben
   #F46060 sichtbar abweicht. */
body[data-page="2"] #product-list .ribbon-7 {
  background: var(--color-primary);
  color: #FFFFFF;
}

/* --- Werkzeugleiste --------------------------------------------------- */
/* Aufbau (im Frontend nachgesehen): .productlist-page-nav enthaelt zwei
   Dropdowns (.filter-type-FilterItemSort, .filter-type-FilterItemLimits),
   den Ansichtsumschalter (.btn-option.ed) und die Trefferzeile; darum
   liegen <hr class="productlist-page-nav-top|-bottom">. */

/* Beide Spalten sollen auf derselben Hoehe anfangen. GEMESSEN auf amewo.de
   bei 1920px (Stand 223): Oberkante Filterkarte y=319, Oberkante der Pillen
   y=367 - also 48px Versatz. Er entsteht aus zwei gestapelten Abstaenden:
   `.productlist-page-nav` bringt margin-top 32px mit, ihre erste Spalte
   weitere 16px. Beide hier auf 0, damit die Werkzeugleiste buendig mit der
   Kartenoberkante beginnt.
   Angehaengt an die KLASSE `.productlist-page-nav-header-m`, mit der NOVA nur
   die obere Leiste auszeichnet - NICHT an `:first-of-type`. Das war zuerst so
   und ging auf Kategorieseiten daneben: `of-type` zaehlt den ELEMENTTYP, und
   dort steht als erstes div NOVAs (leere) `.title`-Huelle des
   Beschreibungsblocks. Auf der Suchseite fiel es nicht auf, weil die Leiste
   dort zufaellig das erste div war.
   Nur die erste Spalte verliert ihren Abstand: Unterhalb von xl stapeln sich die Spalten der Leiste
   (`col-12 col-xl-auto`), dort ist der 16px-Abstand der Zeilenabstand
   zwischen ihnen - und die untere Leiste unter den Produkten braucht ihren
   Abstand ohnehin. */
body[data-page="2"] #result-wrapper .productlist-page-nav-header-m {
  margin-top: 0;
  /* Ersetzt den Abstand, den bisher die ausgeblendete Trennlinie brachte. */
  margin-bottom: 16px;
}
body[data-page="2"] #result-wrapper .productlist-page-nav-header-m > [class*="col"]:first-child {
  margin-top: 0;
}
/* Die drei Trennlinien der Leisten raus (NOVA setzt sie ueber und unter die
   Blaetter-/Trefferzeilen). Der Entwurf trennt allein ueber Flaechen und
   Abstaende - eine Linie quer ueber die Seite zerschneidet die Karten-Optik.
   WICHTIG: Die untere Leiste hatte KEINEN eigenen Abstand nach oben, sie hing
   allein an den Aussenabstaenden dieser Linien. Ohne Ersatz klebte die
   Trefferzeile direkt an der letzten Kachel (gemessen: 0px). Deshalb die 8px
   unten - zusammen mit den 24px Eigenabstand der Kacheln ergibt das 32px. */
body[data-page="2"] #result-wrapper hr.productlist-page-nav-top,
body[data-page="2"] #result-wrapper hr.productlist-page-nav-bottom {
  display: none;
}
body[data-page="2"] #result-wrapper .productlist-page-nav:not(.productlist-page-nav-header-m) {
  margin-top: 8px;
}
/* Werkzeugleiste: Ansichtsumschalter ans rechte Ende.
   NOVA reiht Sortierung, Artikel pro Seite und den Umschalter einfach
   hintereinander. Unterhalb von xl ist die Spalte aber volle Breite - der
   Umschalter stand dadurch mitten in der Zeile, mit grossem Leerraum rechts
   daneben (gemessen bei 1100px: Umschalter endet bei 811, Spalte bei 1069).
   Als Flex-Zeile mit `margin-left: auto` am letzten Element sitzt er rechts,
   dort wo darunter auch Trefferzahl und Blaetternavigation stehen. Ab xl ist
   die Spalte inhaltsbreit, die Regel bleibt dort folgenlos.
   Der Abstand kommt jetzt aus `gap` statt aus den 8px-Raendern der Kinder
   (plus dem Leerzeichen zwischen den Inline-Elementen) - sonst zaehlt beides
   zusammen und die Zeile bricht frueher um. */
body[data-page="2"] .productlist-page-nav .displayoptions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body[data-page="2"] .productlist-page-nav .displayoptions > * {
  margin-left: 0;
}
body[data-page="2"] .productlist-page-nav .displayoptions > .btn-group:last-child {
  margin-left: auto;
}
/* Auf schmalen Schirmen braucht die Zeile jeden Pixel: Mit NOVAs 24px
   Innenabstand je Seite passte der Umschalter ab etwa 570px abwaerts nicht
   mehr daneben und rutschte allein in eine zweite Zeile (genau der Zustand
   aus der Rueckmeldung). Mit 14px passt alles bis 540px in eine Zeile;
   darunter bricht der Umschalter um, steht dann aber rechts statt links. */
@media (max-width: 767.98px) {
  body[data-page="2"] .productlist-page-nav .displayoptions .btn:not(.btn-option) {
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* Trefferzeile ("Artikel 1 - 15 von 15") rechtsbuendig statt mittig.
   NOVA gibt ihrer Spalte Aussenabstaende auf `auto` - solange alles in eine
   Zeile passt, faellt das nicht auf (der Platz geht nach links). Sobald die
   Zeile umbricht, steht die Trefferzahl dagegen MITTIG unter linksbuendigen
   Schaltflaechen und wirkt wie verrutscht (Rueckmeldung des Nutzers zur
   Anordnung; gemessen bei 620px: Spalte bei x=247 statt am rechten Rand).
   Mit margin-right: 0 bleibt nur der linke auto-Abstand - die Zeile sitzt
   damit in jeder Breite rechts, wie auf dem Desktop. */
body[data-page="2"] .productlist-page-nav .productlist-item-info {
  margin-left: auto;
  margin-right: 0;
}
/* Unter 768px teilen sich Umschalter und Trefferzeile eine Zeile.
   Ein schmal gezogenes Desktop-Fenster (kein Handy - dort liefert der Shop
   nur die Sammelschaltflaeche "Filter und Sortierung") zeigte vier Zeilen
   untereinander: Schaltflaechen, Umschalter allein, Trefferzahl allein,
   Blaetternavigation. Der Umschalter stand rechts in einer sonst leeren
   Zeile - genau das wirkte verrutscht (Rueckmeldung des Nutzers).
   `display: contents` loest die Spalte auf, ohne die Auszeichnung zu
   aendern: ihre Schaltflaechen werden selbst Kinder der Bootstrap-Zeile und
   koennen sich damit eine Zeile mit Trefferzahl und Blaettern teilen. Ueber
   `order` bleibt die Reihenfolge erhalten (Umschalter vor Trefferzahl vor
   Blaettern), umgebrochen wird erst, wenn der Platz wirklich nicht reicht.
   Gemessen bei 496px Fensterbreite: Zeile 1 Filter/Sortierung/Artikel pro
   Seite, Zeile 2 Umschalter links und "Artikel 1 - 21 von 54" rechts,
   Zeile 3 Blaetternavigation - eine Zeile weniger und kein Leerraum mehr.
   Ab 768px bleibt alles wie gehabt: dort passt die Leiste in eine Zeile und
   der Umschalter sitzt ueber `margin-left: auto` am rechten Rand.
   Die 12px Zeilenabstand ersetzen die Aussenabstaende der aufgeloesten
   Spalte. `margin-left: 0` nimmt dem Umschalter den auto-Abstand von oben -
   sonst teilte er sich den freien Platz mit der Trefferzeile und stuende
   irgendwo in der Mitte. Auf dem Handy bleibt alles wie bisher: dort steht
   in der Leiste nur die Sammelschaltflaeche, fuer die Trefferzahl daneben
   reicht der Platz nicht. */
@media (max-width: 767.98px) {
  body[data-page="2"] .productlist-page-nav .displayoptions {
    display: contents;
  }
  body[data-page="2"] .productlist-page-nav {
    align-items: center;
    column-gap: 8px;
    row-gap: 12px;
  }
  body[data-page="2"] .productlist-page-nav > .displayoptions > .btn-group:has(> .btn-option.ed) {
    order: 1;
    margin-left: 0;
  }
  body[data-page="2"] .productlist-page-nav > .productlist-item-info {
    order: 2;
  }
  body[data-page="2"] .productlist-page-nav > .productlist-pagination {
    order: 3;
  }
}
body[data-page="2"] .productlist-page-nav .dropdown-toggle {
  background: #FFFFFF;
  /* Ohne sichtbare Kontur (Wunsch des Nutzers). Bewusst ein DURCHSICHTIGER
     Rahmen statt border:0 - sonst waeren die Pillen 2px flacher als der
     Ansichtsumschalter daneben und die Zeile stuende schief. */
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.15px;
}
body[data-page="2"] .productlist-page-nav .dropdown-toggle:hover {
  background: #F5F7FA;
  color: #2E6FB8;
}
/* Ansichtsumschalter als Segmentschalter statt zwei aneinandergeklebter
   Knoepfe. Vorher war die aktive Haelfte hellblau gefuellt mit weissem
   Symbol - auf #B4D6FF kaum zu erkennen - und die Trennkante mitten in der
   Pille wirkte wie ein Bruch.
   Jetzt: die Gruppe ist die graue Spur, der aktive Knopf eine weisse Kachel
   darin. Das kommt ohne die weisse Schrift auf Hellblau aus und ist trotzdem
   eindeutig. */
/* NUR der Ansichtsumschalter (enthaelt .btn-option). Bootstrap gibt auch den
   Dropdown-Huellen von "Sortierung" und "Artikel pro Seite" die Klasse
   .btn-group - die bekamen dadurch dieselbe graue Flaeche mit 3px Polsterung,
   die rund um die weissen Pillen als grauer Rand hervorschaute (vom Nutzer
   gemeldet). */
body[data-page="2"] .productlist-page-nav .btn-group:has(.btn-option) {
  padding: 3px;
  background: #EDEFF3;
  border-radius: var(--radius-pill);
}
body[data-page="2"] .productlist-page-nav .btn-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 41px + 2x3px Polsterung der Gruppe = 47px, exakt die Hoehe der
     Sortier-Pillen daneben (gemessen). Sonst steht der Umschalter sichtbar
     flacher in der Zeile. */
  min-width: 46px;
  height: 41px;
  padding: 0;
  background: transparent;
  border: 0;
  /* Bootstrap setzt in .btn-group die Innenkanten eckig - hier sollen beide
     Knoepfe rundum rund sein, damit die weisse Kachel als Kachel wirkt. */
  border-radius: var(--radius-pill) !important;
  box-shadow: none;
  color: var(--color-text-muted);
}
body[data-page="2"] .productlist-page-nav .btn-option + .btn-option {
  margin-left: 2px;
}
body[data-page="2"] .productlist-page-nav .btn-option:hover {
  color: #2E6FB8;
}
body[data-page="2"] .productlist-page-nav .btn-option.active {
  background: #FFFFFF;
  color: #1B1B1B;
  /* Ohne Schatten (Wunsch des Nutzers) - die weisse Kachel auf der grauen
     Spur reicht als Markierung. */
  box-shadow: none;
}
/* "Seite1" -> "Seite 1" in der Blaetter-Schaltflaeche.
   Die Auszeichnung ist korrekt (`<span class="pagination-site">Seite</span> 1`),
   NOVA macht in clear.css aber JEDE `.dropdown-toggle` zur Flexbox. Damit
   werden Beschriftung und Ziffer zu zwei Flex-Elementen, und der Leerraum
   zwischen zwei Flex-Elementen faellt ersatzlos weg (gemessen: 3,31px im
   aufgeklappten Menue, 0px in der Schaltflaeche). Der Rand stellt genau
   diesen Wortzwischenraum wieder her - 0.25em sind bei 14px 3,5px.
   Sichtbar ist die Schaltflaeche nur unter 768px; ab dort blendet NOVA sie
   aus und zeigt stattdessen die Seitenzahlen einzeln. */
.navbar-pagination .dropdown-toggle > .pagination-site {
  margin-right: 0.25em;
}
/* Aufklapper der Werkzeugleiste (Sortierung, Artikel pro Seite, Seite N)
   in der Formensprache des Shops. NOVA liefert sie eckig, randlos und ohne
   Innenabstand - ein grauer Kasten, der neben den runden Pillen wie ein
   Fremdkoerper wirkte (Rueckmeldung des Nutzers zum Blaetter-Aufklapper).
   Rundung, Rahmen und Schatten sind dieselben wie bei den Aufklappern der
   Kopfzeile (#shop-nav .dropdown-menu), nur eine Nummer kleiner: 16 statt 20,
   weil diese Menues deutlich schmaler sind.
   `min-width: 100%` statt Bootstraps 10rem: Damit ist das Menue mindestens
   so breit wie seine Pille und waechst bei langen Eintraegen wie
   "Artikelname von A bis Z" weiterhin auf Inhaltsbreite.
   ACHTUNG SCOPE: Auf dem Handy klont NOVA die Filter in ein Modal INNERHALB
   von .displayoptions. Die Regeln haengen deshalb am direkten Weg
   `> .displayoptions > .dropdown > .dropdown-menu` und nicht am Klassennamen
   allein - sonst faerbte sich auch die Filterliste im Modal um. */
.productlist-page-nav > .displayoptions > .dropdown > .dropdown-menu {
  min-width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(27, 27, 27, .12);
}
.productlist-page-nav > .displayoptions > .dropdown > .dropdown-menu > .dropdown-item {
  padding: 6px 12px;
  border-radius: 8px;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
}
/* Beim Ueberfahren eine graue Flaeche - anders als in der Filterspalte, wo
   die Liste offen in der Karte steht und nur die Schrift die Farbe wechselt.
   Hier schwebt das Menue, da ist die Flaeche die uebliche und deutlichere
   Rueckmeldung. */
.productlist-page-nav > .displayoptions > .dropdown > .dropdown-menu > .dropdown-item:hover,
.productlist-page-nav > .displayoptions > .dropdown > .dropdown-menu > .dropdown-item:focus {
  background: #F5F7FA;
  color: #1B1B1B;
}
/* Der aktive Eintrag als rote Pille - dieselbe Markierung wie bei den
   aktiven Filtern in der Seitenspalte. */
.productlist-page-nav > .displayoptions > .dropdown > .dropdown-menu > .dropdown-item.active {
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 600;
}
/* Der Blaetter-Aufklapper NUR unter 768px.
   Grund: NOVA benutzt oberhalb davon DASSELBE Element `.dropdown-menu` als
   ganz normale Zahlenreihe (dort `display: flex; position: static`, die
   Pille darueber ist ausgeblendet). Ohne diese Klammer bekaemen die Seiten
   1 2 3 auf dem Desktop einen Rahmen samt Rundung um sich herum und die
   aktive Seite statt NOVAs rotem Strich eine rote Pille - beides hat
   niemand verlangt. */
@media (max-width: 767.98px) {
  .productlist-page-nav .navbar-pagination .dropdown-menu {
    min-width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    /* !important ist hier Pflicht: NOVA haengt dem Menue die
       Bootstrap-Hilfsklasse `.shadow-none` an, und die traegt ihr
       `box-shadow: none` selbst mit !important. Ohne Gegenwehr stuende das
       Menue als einziges der drei ohne Schatten da. */
    box-shadow: 0 18px 40px rgba(27, 27, 27, .12) !important;
  }
  /* Der Link steckt hier eine Ebene tiefer als bei Sortierung und Artikel
     pro Seite (<div.dropdown-item.page-item> um <a.page-link>). Flaeche und
     Innenabstand muessen AM LINK haengen, sonst laege die Markierung neben
     dem, was man anklickt. */
  .productlist-page-nav .navbar-pagination .dropdown-menu .dropdown-item {
    padding: 0;
    background: transparent;
  }
  .productlist-page-nav .navbar-pagination .dropdown-menu .dropdown-item > .page-link {
    padding: 6px 12px;
    border-radius: 8px;
    color: #1B1B1B;
    font-family: var(--font-family-base);
    font-size: 14px;
  }
  /* NOVA markiert die aktuelle Seite zusaetzlich mit einem 4px hohen roten
     Balken unter dem Eintrag (::after am Link). Neben der roten Pille waere
     das doppelt gemoppelt. */
  .productlist-page-nav .navbar-pagination .dropdown-menu .dropdown-item > .page-link::after {
    display: none;
  }
  .productlist-page-nav .navbar-pagination .dropdown-menu .dropdown-item > .page-link:hover,
  .productlist-page-nav .navbar-pagination .dropdown-menu .dropdown-item > .page-link:focus {
    background: #F5F7FA;
    color: #1B1B1B;
  }
  .productlist-page-nav .navbar-pagination .dropdown-menu .dropdown-item.active > .page-link {
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: 600;
  }
}
/* Trefferzeile ("Artikel 1 - 5 von 5") in Kleinschrift wie der Rest der
   Nebeninformationen. */
body[data-page="2"] .productlist-page-nav .pagination-info,
body[data-page="2"] .productlist-page-nav .product-list-count,
body[data-page="2"] .productlist-page-nav-info {
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  letter-spacing: -0.15px;
}
/* Aktive Filterpillen ueber der Liste in derselben Sprache wie die
   Werkzeugleiste. */
body[data-page="2"] .active-filters .snippets-filter-item {
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
}
body[data-page="2"] .active-filters .snippets-filter-item-all {
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
}

/* --- Filterspalte als weisse Karte ------------------------------------ */
/* Der Entwurf zeigt EINE weisse Karte mit allen Filtergruppen darin. NOVA
   liefert stattdessen mehrere lose Boxen (#sidebox<N>.box.box-filter-*) im
   <aside id="sidepanel_left"> - gerendert in layout/footer.tpl, Block
   'footer-sidepanel-left-content'. Die Karte entsteht deshalb am aside, die
   Boxen darin verlieren ihre eigenen Abstaende.
   ACHTUNG SCOPE: .btn-filter-box und .productlist-filter-headline tauchen
   auch im FOOTER auf (Linkgruppen-Boxen, siehe Block "Footer-Spalten" weiter
   oben). Alle Regeln hier haengen deshalb an #sidepanel_left und NICHT an
   den Klassennamen allein. */
/* Reihenfolge in der Karte: erst die echten Filter, dann die Kategorien
   (Wunsch des Nutzers). Die Kategorien sind KEIN Filter, sondern die Box
   box_categories - im Markup steht sie vor den Filterboxen, weil die
   Boxenverwaltung des Backends sie dort einsortiert. Statt dort zu sortieren
   (und damit an einer zweiten Stelle), dreht die Reihenfolge hier: Die Karte
   wird zur Flex-Spalte, die Kategorien-Box bekommt order:1 und rutscht damit
   hinter alle uebrigen Kinder (order:0 = Dokumentreihenfolge).
   FOLGE: Eine Sortierung unter Darstellung -> Boxen aendert die sichtbare
   Reihenfolge nicht mehr. Wer dort sortiert, muss diese Regel kennen. */
body[data-page="2"] #sidepanel_left {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  padding: 8px 20px 20px;
  background: #FFFFFF;
  /* Ohne Rahmen (Wunsch des Nutzers): weisse Flaechen tragen sich auf dem
     grauen Seitengrund selbst - wie FAQ-Karten und Produktkacheln. */
  border: 0;
  border-radius: 20px;
}
/* Kopf der Karte: "Filter" plus Reset-Link (Markup im footer.tpl-Override). */
.amewo-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 8px;
}
.amewo-filter-head-title {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.31px;
  line-height: 24px;
}
/* Reset in Primaerrot wie im Entwurf - die einzige rote Stelle der Spalte. */
.amewo-filter-reset {
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.15px;
  white-space: nowrap;
}
.amewo-filter-reset:hover,
.amewo-filter-reset:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}
/* Reihenfolge in drei Stufen (Wunsch des Nutzers):
     0  Kopf "Filter" (kein .box, behaelt die Vorgabe 0)
     1  Merkmalfilter - die eigentlichen Produktfilter, deshalb oben.
        Bewusst ueber .box und nicht ueber .box-filter-characteristics: Eine
        spaeter dazukommende Filterbox (z. B. Hersteller) landet damit
        automatisch in dieser Gruppe und nicht ganz oben.
     2  Kategorien (die Box box_categories)
     3  Verfuegbarkeit und Preisspanne
   Gleiche Spezifitaet, es entscheidet die Reihenfolge hier in der Datei -
   .box-categories und die beiden unteren Boxen sind auch .box. */
body[data-page="2"] #sidepanel_left > .box {
  order: 1;
}
body[data-page="2"] #sidepanel_left > .box-categories {
  order: 2;
}
body[data-page="2"] #sidepanel_left > .box-filter-availability,
body[data-page="2"] #sidepanel_left > .box-filter-price {
  order: 3;
}
/* !important ist hier noetig, nicht Spezifitaet: NOVA haengt an die letzte
   Filterbox Bootstraps .mb-5, und Bootstraps Abstandsklassen sind selbst mit
   !important definiert (siehe AGENTS.md). Die 48px sassen bisher unten in der
   Karte und kaum auf; seit die Kategorien nach unten wandern, laegen sie
   mitten zwischen den Gruppen. */
body[data-page="2"] #sidepanel_left .box {
  margin-bottom: 0 !important;
}
/* Gruppenkopf ("Verfuegbarkeit", "Preisspanne", "Merkmal" ...): Typografie
   wie die Footer-Spaltenueberschrift (Inter SemiBold 14/20, LS -0,15). */
body[data-page="2"] #sidepanel_left .btn-filter-box {
  padding: 14px 0;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.15px;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
}
body[data-page="2"] #sidepanel_left .btn-filter-box:hover {
  color: #2E6FB8;
}
/* Filtereintraege: Inter 14/20 gedaempft, Zaehler als blasses Badge.
   Seitlicher Innenabstand 12px = derselbe Wert wie bei der aktiven Pille
   (Regel darunter). Nur so stehen angeklickte und nicht angeklickte Eintraege
   auf derselben Textkante; vorher sass die Pille 12px weiter rechts als die
   uebrigen Zeilen ihrer Gruppe.
   margin: 0 gegen NOVAs `margin: 0 3px` an den Eintraegen - die 3px
   verschoben die Verfuegbarkeits-Gruppe gegen die Merkmalgruppen
   (gemessen: x=23 statt 20). */
body[data-page="2"] #sidepanel_left .filter-item {
  display: block;
  margin: 0;
  padding: 6px 12px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  letter-spacing: -0.15px;
  line-height: 20px;
  text-decoration: none;
}
body[data-page="2"] #sidepanel_left .filter-item:hover {
  color: #2E6FB8;
}
/* Aktiver Eintrag als gefuellte Pille - im Entwurf sitzt sie auf der
   Kategorienliste ("Alle Produkte"). Sie greift genauso bei jedem anderen
   aktiven Filter, deshalb keine Sonderregel fuer Kategorien. */
body[data-page="2"] #sidepanel_left .filter-item.active,
body[data-page="2"] #sidepanel_left .filter-item.filter-active {
  padding: 6px 12px;
  background: var(--color-primary);
  border-radius: 8px;
  color: #FFFFFF;
  font-weight: 600;
}
body[data-page="2"] #sidepanel_left .filter-item .badge {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 400;
}
/* Auf der roten Pille muessen Kaestchen UND Zaehler weiss sein.
   Das Kaestchen ist ein Font-Awesome-<i> mit EIGENER Farbe aus dem
   kritischen CSS (`.box-link-wrapper i.snippets-filter-item-icon-right`,
   #707070) - es erbt das Weiss des Eintrags deshalb nicht, sondern braucht
   eine eigene Regel mit mindestens dieser Spezifitaet. Es sah aus wie ein
   blaugraues Kaestchen auf Rot. */
body[data-page="2"] #sidepanel_left .filter-item.active .box-link-wrapper i.snippets-filter-item-icon-right,
body[data-page="2"] #sidepanel_left .filter-item.filter-active .box-link-wrapper i.snippets-filter-item-icon-right,
body[data-page="2"] #sidepanel_left .filter-item.active .badge,
body[data-page="2"] #sidepanel_left .filter-item.filter-active .badge {
  color: #FFFFFF;
}
/* Trennlinie zwischen den Gruppen: NOVAs <hr class="box-filter-hr"> bleibt,
   wird aber duenn und randlos wie im Entwurf. Nach der letzten Gruppe stoert
   sie - die Karte endet dort selbst. */
/* Merkmal-Filter OHNE inneren Aufklapper (Wunsch des Nutzers): Die Werte
   stehen direkt untereinander, der Knopf "Beliebig" entfaellt.
   ~~Bis 1.0.303 war das ein schwebendes Menue mit Rahmen, Rundung 14 und
   Schatten~~ - das faellt weg, inline sitzt die Liste in der Karte.

   URSACHE ist nicht das Template, sondern der Merkmaltyp in der Wawi:
   NOVAs snippets/filter/characteristic.tpl schaltet bei
   cTyp === 'SELECTBOX' auf Dropdown-Markup um (<div class="dropdown"> +
   Knopf + .dropdown-menu); bei 'TEXT' liefert es direkt eine Liste.
   Der saubere Weg waere also der Merkmaltyp in der Wawi. Solange er
   SELECTBOX ist, macht diese Regel aus dem Menue eine normale Liste - sie
   stoert auch nicht, wenn der Typ spaeter umgestellt wird: Dann gibt es
   weder .dropdown-toggle noch .dropdown-menu. */
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown > .dropdown-toggle {
  display: none;
}
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu {
  display: block;
  position: static;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
/* NOVA gibt .dropdown-item 3px Rand links/rechts UND volle Breite - der
   Eintrag ragte dadurch 6px in den rechten Innenabstand (links 10px Luft,
   rechts 4px). */
/* Kein eigener Innenabstand mehr: Den setzt die allgemeine .filter-item-Regel
   fuer alle Gruppen gemeinsam (6px 12px). Die frueheren 10px seitlich
   stammten aus der Zeit als schwebendes Menue und haetten die Merkmalwerte
   gegen die uebrigen Gruppen verschoben. */
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu .filter-item {
  width: auto;
  margin: 0;
  border-radius: 8px;
  white-space: normal;
}
/* Beim Ueberfahren nur die Textfarbe wechseln - wie in jeder anderen
   Filtergruppe. ~~Bis 1.0.309 lag hier zusaetzlich eine graue Flaeche
   (#F5F7FA)~~: Die stammt aus der Zeit als schwebendes Menue, wo die Zeile
   sich vom Menue abheben musste. Inline wirkte sie wie ein Fehler, weil
   Verfuegbarkeit, Kategorien und Preis keine bekommen.
   `transparent` muss ausdruecklich dastehen: Ohne eigene Angabe greift
   Bootstraps `.dropdown-item:hover` (background #f8f9fa) - die Eintraege
   sind hier weiterhin .dropdown-item. */
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu .filter-item:hover,
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu .filter-item:focus {
  background: transparent;
  color: #2E6FB8;
}
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu .box-link-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu .box-link-wrapper > i {
  flex-shrink: 0;
  margin: 0;
}
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu .filter-item-value {
  flex: 1 1 auto;
  min-width: 0;
}
body[data-page="2"] #sidepanel_left .box-filter-characteristics .dropdown-menu .badge {
  flex-shrink: 0;
  margin: 0 0 0 auto;
}
body[data-page="2"] #sidepanel_left .box-filter-hr {
  margin: 0;
  border-top: 1px solid var(--color-border);
}
body[data-page="2"] #sidepanel_left .box:last-of-type .box-filter-hr {
  display: none;
}
/* Preisspanne: schmaler Schieber, Griffe und Balken in Primaerrot wie im
   Entwurf. Die noUi-*-Klassen kommen von noUiSlider, daher die fremden
   Namen.
   Der Schieber steht 7px vom Rand ein: Die Griffe sind 14px breit und haengen
   je zur Haelfte ueber die Spurenden hinaus (noUiSlider setzt sie mit
   `right: -7px`). Ohne diesen Einzug schnitte die Karte sie an. */
body[data-page="2"] #sidepanel_left .price-range-slide {
  height: 4px;
  margin: 20px 7px 10px;
  background: #EDEFF3;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
}
body[data-page="2"] #sidepanel_left .price-range-slide .noUi-connect {
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}
body[data-page="2"] #sidepanel_left .price-range-slide .noUi-handle {
  top: -5px;
  right: -7px;
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  border: 2px solid #FFFFFF;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px rgba(27, 27, 27, .2);
  cursor: pointer;
  transition: box-shadow .15s ease;
}
/* Anfasser beim Ueberfahren: heller Ring statt Vergroesserung. Ein
   transform:scale() waere hier falsch - noUiSlider positioniert die Griffe
   selbst ueber transform und wuerde es beim Ziehen ueberschreiben. */
body[data-page="2"] #sidepanel_left .price-range-slide .noUi-handle:hover,
body[data-page="2"] #sidepanel_left .price-range-slide .noUi-handle:focus {
  box-shadow: 0 1px 3px rgba(27, 27, 27, .2), 0 0 0 5px rgba(244, 96, 96, .18);
  outline: none;
}
/* noUiSlider zeichnet zwei Striche in den Griff - beim runden Punkt weg. */
body[data-page="2"] #sidepanel_left .price-range-slide .noUi-handle::before,
body[data-page="2"] #sidepanel_left .price-range-slide .noUi-handle::after {
  display: none;
}
/* Die beiden Eingabefelder als EIN ruhiges Feld je Seite. NOVA baut hier eine
   Bootstrap-Input-Group: Feld + `.input-group-text` mit dem Waehrungsnamen -
   letzteres kommt mit grauer Flaeche und eigenem Rahmen und sah wie ein
   angeklebter Knopf aus. Rahmen und Radius wandern deshalb auf die Gruppe,
   Feld und Waehrung werden randlos.
   (Die Waehrung liegt im Markup als `input-group-prepend` VOR dem Feld,
   erscheint aber rechts davon - NOVA-Eigenheit, nicht anfassen.) */
body[data-page="2"] #sidepanel_left .price-range-inputs {
  align-items: center;
  justify-content: space-between;
}
/* Bootstrap gibt col-5 + col-5 eine Luecke von 2/12 der Breite. Fest 12px
   ergibt breitere Felder und einen gleichmaessigen Abstand. */
body[data-page="2"] #sidepanel_left .price-range-inputs > [class*="col"] {
  flex: 0 0 calc(50% - 6px);
  max-width: calc(50% - 6px);
}
body[data-page="2"] #sidepanel_left .price-range-inputs .input-group {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
body[data-page="2"] #sidepanel_left .price-range-inputs .input-group:focus-within {
  border-color: var(--color-action-hover);
}
body[data-page="2"] #sidepanel_left .price-range-inputs .form-control {
  height: 34px;
  padding: 0 4px 0 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
}
body[data-page="2"] #sidepanel_left .price-range-inputs .input-group-text {
  padding: 0 10px 0 0;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 12px;
  letter-spacing: 0.2px;
}
/* Die Waehrung hing oben im Feld statt mittig. GEMESSEN: Feld 36px hoch,
   die Einheit nur 25,6px - und zwar durch eine FESTE Hoehe aus dem
   NOVA-Theme, weshalb das `align-items: stretch` der Input-Group nicht
   greift. Erst `height: auto` gibt sie frei, `align-self: stretch` zieht sie
   auf Feldhoehe, `align-items: center` setzt die Schrift in die Mitte.
   Gegenprobe nach der Aenderung: Mitte Feld 495,1 = Mitte Einheit 495,1. */
body[data-page="2"] #sidepanel_left .price-range-inputs .input-group-prepend,
body[data-page="2"] #sidepanel_left .price-range-inputs .input-group-text {
  height: auto;
  align-self: stretch;
  align-items: center;
}
/* Etwas Luft zwischen Schieber und Trennlinie zur naechsten Gruppe. */
body[data-page="2"] #sidepanel_left .box-filter-price-collapse {
  padding-bottom: 6px;
}

/* --- Schmale Fenster -------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Unterhalb von lg blendet NOVA die Filterboxen aus (.d-none.d-lg-block)
     und bietet stattdessen den Filter-Knopf oben an. Ohne Inhalt darf die
     Karte nicht als leerer weisser Kasten stehenbleiben.
     SEITLICH bleiben 16px stehen: Die Kategorien-Box ist KEINE der
     ausgeblendeten Filterboxen und steht deshalb weiterhin da. Mit
     `padding: 0` klebte ihre Ueberschrift an der Bildschirmkante (gemessen
     bei 375px: Box ab x=0, waehrend die H1 der Seite bei x=16 beginnt) -
     Rueckmeldung des Nutzers zu den Kategorie-Unterseiten. Die 16px sind
     derselbe Seitenabstand wie im uebrigen Seiteninhalt. */
  body[data-page="2"] #sidepanel_left {
    padding: 0 16px;
    background: transparent;
    border: 0;
  }
  .amewo-filter-head {
    display: none;
  }
  .amewo-list-title {
    font-size: 28px;
  }
  /* Auf schmalen Fenstern folgt direkt unter der Unterzeile die
     Werkzeugleiste (Filter-Knopf, Sortierung). Die 24px von oben sind dort
     zu viel - der Kopf soll kompakt bleiben, die Karten sollen frueher
     anfangen. */
  .amewo-list-head {
    padding-bottom: 16px;
  }
}

/* --- Zeilendarstellung ("Liste" im Umschalter) ------------------------- */
/* Markup: NOVAs productlist/item_list.tpl, Wrapper #product-list.layout-list.
   Der Entwurf zeigt diese Ansicht nicht - Ziel ist deshalb nicht Figma-Treue,
   sondern DIESELBE Bildsprache wie die Kacheln: weisse Karte mit Radius 20,
   Rahmen in --color-border, Titel Inter SemiBold 18/28, Preis Inter Bold 24.

   ACHTUNG, TOTER CODE WEITER OBEN: Der Block `.productlist .productbox`
   (Karten-Feinschliff, Radius/Hover/Typografie) greift hier NICHT. JTL 5.7
   rendert den Wrapper `.productlist` gar nicht mehr - im Frontend geprueft:
   document.querySelector('.productlist') === null. Die Klassen heissen heute
   `#product-list.product-list.layout-list|layout-gallery`. Wer den alten Block
   aufraeumt: Er ist wirkungslos, nicht loeschen ohne Gegenprobe an anderen
   Seiten (Wunschliste, Vergleichsliste nutzen teils dieselben Klassen). */
body[data-page="2"] #product-list.layout-list > .product-wrapper {
  /* NOVA setzt 64px - zwischen Karten viel zu viel, die Liste zerfiel in
     Einzelteile. 24px wie zwischen den Kacheln. */
  margin-bottom: 24px;
}
@media (max-width: 767.98px) {
  /* NOVAs Spaltenklassen ergeben unterhalb von md zwei halbe Spalten
     (`col-6 col-md-12`) - eine Zeilenkarte auf halber Breite ist unlesbar. */
  body[data-page="2"] #product-list.layout-list > .product-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Die weisse Flaeche der Zeile malt NOVA als absolute Lage
   `.productbox-inner::before` (inset 0, ohne Radius) - deshalb waren die Ecken
   eckig, obwohl die Karte weiss aussah. Genau wie in der Galerie wird diese
   Lage abgeschaltet und die Karte direkt auf `.productbox` gemalt: So wirken
   Radius und Rahmen zusammen und die Polsterung sitzt am echten Element. */
body[data-page="2"] #product-list.layout-list .productbox-inner::before {
  display: none;
}
body[data-page="2"] #product-list.layout-list .productbox {
  /* Seitlich nur 4px: Bootstraps Spalten im Inneren bringen 16px Polster mit,
     zusammen also 20px bis zum Inhalt - genauso viel wie oben und unten. */
  padding: 20px 4px;
  background: #FFFFFF;
  /* Ohne Rahmen (Wunsch des Nutzers) - wie in der Galerieansicht. */
  border: 0;
  border-radius: 20px;
  transition: box-shadow .2s ease;
}
body[data-page="2"] #product-list.layout-list .productbox:hover {
  box-shadow: 0 8px 24px rgba(27, 27, 27, .08);
}
/* Bootstrap gibt der inneren Reihe -16px Aussenabstand. Ohne dieses Zuruecksetzen
   frisst sie die Polsterung der Karte wieder auf. */
body[data-page="2"] #product-list.layout-list .productbox-inner > .row {
  margin-right: 0;
  margin-left: 0;
}
/* Titel: NOVA liefert hier Inter 14/400 in Grau und UNTERSTRICHEN. */
body[data-page="2"] #product-list.layout-list .productbox-title,
body[data-page="2"] #product-list.layout-list .productbox-title a {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
}
/* Titel hoechstens zwei Zeilen - ein dritter Umbruch schiebt Preis und
   Kaufbereich ohne Gegenwert nach unten. */
body[data-page="2"] #product-list.layout-list .productbox-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Kurzbeschreibung in der Zeile: nur der Einleitungssatz.
   Die Wawi-Texte bestehen aus <p>Satz</p> plus <ul> mit fuenf bis sieben
   Merkmalen. Live gemessen: Die Liste allein war 142px hoch und schob den
   Kaufbereich auf y=599 statt 473 - die Zeile wuchs auf 472px. Die
   vollstaendige Aufzaehlung steht auf der Artikelseite.
   :not(:only-child) ist die Sicherung: Besteht eine Kurzbeschreibung NUR aus
   einer Liste, bleibt sie sichtbar - sonst staende dort gar nichts.
   Die Galeriekachel braucht das nicht, dort kuerzt item_box.tpl den Text
   bereits im Template (strip_tags + truncate:150). */
body[data-page="2"] #product-list.layout-list .item-list-description ul:not(:only-child),
body[data-page="2"] #product-list.layout-list .item-list-description ol:not(:only-child) {
  display: none;
}
/* Typografie wie die Kachelbeschreibung (Inter 14/20 gedaempft), zwei Zeilen -
   sonst zoege ein langer Einleitungssatz die Zeile wieder auseinander. */
body[data-page="2"] #product-list.layout-list .item-list-description {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body[data-page="2"] #product-list.layout-list .item-list-description p {
  margin: 0;
}
/* Preis- und Kaufbereich auf Hoehe des Titels.
   NOVAs Aufbau in der Zeile ist zweistufig: Titel und Beschreibung liegen in
   der AEUSSEREN Spalte, die drei inneren Spalten (Details / Variationen /
   Preis+Kauf, je col-xl-4) stecken darunter in einem <form>. Der Preisblock
   begann deshalb erst unter der Beschreibung, und der Text lief ueber die
   volle Breite unter ihm durch (gemessen bei 1500px: Text bis x=1449,
   Preisspalte ab x=1197; Karte 346px hoch).
   Loesung ohne Template-Aenderung: Die aeussere Spalte wird ein Raster, und
   <form> samt innerer .row geben ihre Box mit `display: contents` ab. Damit
   liegen Titel, Beschreibung, Details und Preisblock in DEMSELBEN Raster und
   lassen sich frei platzieren - der Preisblock steht rechts ueber die volle
   Hoehe, Titel und Beschreibung enden an seiner Kante.
   Gemessen danach: Preisblock beginnt bei y=405 statt 473 (= Oberkante des
   Titels), Karte 278px statt 346px.
   `display: contents` ist hier unbedenklich - die Warnung in AGENTS.md
   betrifft den OPC-Editor, der ueber die Box die Ablageflaeche bestimmt. Das
   <form> bleibt funktionsfaehig, der Warenkorb-Button liegt weiterhin darin.
   Nur ab xl: Darunter stapeln die inneren Spalten als col-12, dort ist die
   einspaltige Reihenfolge richtig. */
@media (min-width: 1200px) {
  body[data-page="2"] #product-list.layout-list .productbox-inner > .row > .col:has(> .productbox-title) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 16px;
    align-content: start;
  }
  body[data-page="2"] #product-list.layout-list .form-basket,
  body[data-page="2"] #product-list.layout-list .form-basket > .row {
    display: contents;
  }
  body[data-page="2"] #product-list.layout-list .productbox-title {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-page="2"] #product-list.layout-list .item-list-description {
    grid-column: 1;
    grid-row: 2;
  }
  body[data-page="2"] #product-list.layout-list .productbox-details {
    grid-column: 1;
    grid-row: 3;
  }
  body[data-page="2"] #product-list.layout-list .productbox-variations {
    grid-column: 1;
    grid-row: 4;
  }
  /* Preis und Verfuegbarkeit oben, Mengenwahl und Kaufbutton unten buendig.
     `stretch` statt `start`: Die Spalte nimmt die volle Kartenhoehe ein, und
     margin-top:auto an der Aktionszeile schiebt Mengenwahl und Button an die
     Unterkante. Ist der Kaufbereich selbst das hoechste Element der Zeile,
     aendert sich dadurch nichts.
     Gegenprobe mit kuenstlich verlaengerter linker Spalte (Karte 356 statt
     278px): Preis blieb bei y=405, Button endete 20px ueber der Kartenkante -
     genau die Polsterung der Karte. */
  body[data-page="2"] #product-list.layout-list .productbox-options {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  body[data-page="2"] #product-list.layout-list .productbox-actions {
    margin-top: auto;
  }
  /* Die inneren Spalten sind als Rasterelemente keine Bootstrap-Spalten mehr:
     Ihre 33%-Deckelung wuerde sie auf ein Drittel ihrer Rasterspalte
     schrumpfen, und ihr 15px-Innenabstand haette Titel und Details um 16px
     gegeneinander versetzt. */
  body[data-page="2"] #product-list.layout-list .productbox-details,
  body[data-page="2"] #product-list.layout-list .productbox-variations,
  body[data-page="2"] #product-list.layout-list .productbox-options {
    flex: none;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* MUSS nach der Regel darueber stehen: Beide setzen max-width bei gleicher
     Spezifitaet, es gewinnt die spaetere. Beschriftung und Wert sind je col-6,
     ueber die ganze Rasterspalte standen zwischen "Artikelnummer:" und
     "AT-267" rund 250px Luft. */
  body[data-page="2"] #product-list.layout-list .productbox-details {
    max-width: 340px;
  }
}
body[data-page="2"] #product-list.layout-list .productbox-image img {
  border-radius: 16px;
}
/* Preis wie auf der Kachel (NOVA: 16px/600 grau), Pflichtangaben klein. */
body[data-page="2"] #product-list.layout-list .item-list-price .price {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
body[data-page="2"] #product-list.layout-list .item-list-price .footnote-reference,
body[data-page="2"] #product-list.layout-list .item-list-price .price-note {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
/* Merkmalliste (Artikelnummer, GTIN, Gewichte): Bezeichnung gedaempft, Wert
   dunkel - vorher stand beides gleich fett und gleich grau da.
   WELCHE ZEILEN ERSCHEINEN, IST BACKEND: GTIN ueber
   artikeldetails.gtin_display, Versand-/Artikelgewicht ueber
   artikeluebersicht_gewicht_anzeigen bzw. _artikelgewicht_anzeigen. Nur die
   Artikelnummer haengt an keiner Einstellung - die braucht ein Override des
   Blocks 'productlist-item-details-product-number'. */
body[data-page="2"] #product-list.layout-list .productlist-item-detail dt {
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
body[data-page="2"] #product-list.layout-list .productlist-item-detail dd {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 22px;
}
body[data-page="2"] #product-list.layout-list .item-delivery-status {
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 22px;
}
/* Mengenzaehler: NOVA gibt ihm 1px #707070 und Radius 2px - dunkler und
   kantiger als jedes andere Feld im Shop. */
body[data-page="2"] #product-list.layout-list .form-counter {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
body[data-page="2"] #product-list.layout-list .form-counter .form-control,
body[data-page="2"] #product-list.layout-list .form-counter .btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #1B1B1B;
}
/* Warenkorb-Button: dieselbe Optik wie der Button auf der Kachel.
   Die Schriftfarbe zieht --color-on-secondary (weiss) - das ist die
   dokumentierte Entscheidung ganz oben in dieser Datei, hier NICHT abweichen. */
body[data-page="2"] #product-list.layout-list .basket-details-add-to-cart {
  background: var(--color-action);
  border-color: var(--color-action);
  border-radius: 8px;
  color: var(--color-on-secondary);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.31px;
  line-height: 24px;
}
body[data-page="2"] #product-list.layout-list .basket-details-add-to-cart:hover,
body[data-page="2"] #product-list.layout-list .basket-details-add-to-cart:focus {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-secondary);
}
/* "Details"-Rueckfall der Zeilenansicht (Varianten-/Konfigartikel) in
   derselben Form wie auf der Kachel: heller Umriss statt gefuellt. */
body[data-page="2"] #product-list.layout-list .item-list-basket-details .btn-outline-primary {
  border-color: var(--color-action);
  border-radius: 8px;
  color: #2E6FB8;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
}
body[data-page="2"] #product-list.layout-list .item-list-basket-details .btn-outline-primary:hover {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-secondary);
}

/* --- Nichts mehr nur beim Ueberfahren -------------------------------- */
/* NOVA blendet in der Zeilenansicht ALLES aus, was `.productbox-onhover`
   traegt: die Schnellaktionen (Vergleichsliste, Merkzettel), den
   Mengenzaehler samt Warenkorb-Button und den Rueckfall "Zum Artikel".
   Die Regel steht in der SASS-Quelle des Themes, nicht im Template:

     themes/base/sass/components/_productbox.scss:25
     @include media-breakpoint-up(md) {
       .productbox.productbox-hover:not(:hover, :focus, .focus)
         .productbox-onhover { opacity: 0; }
     }

   Sie greift also erst ab 768px - unterhalb davon standen die Buttons immer
   schon da. Wer das im Frontend nachmisst: Ueber ein eingefrorenes
   Vorschaufenster ist der Wert NICHT zu pruefen, dort haengt die
   0,35s-Ueberblendung bei currentTime 0 und meldet je nach Element mal 0 und
   mal 1. Die Quelle oben ist die verlaessliche Auskunft.

   Auf Touch-Geraeten gibt es kein Hovern, ab Tablettbreite waren Kaufen,
   Merkzettel und Vergleich damit gar nicht erreichbar. Deshalb hier
   dauerhaft sichtbar. `transition: none` dazu, sonst blenden die Elemente
   bei jedem Seitenaufbau erst ein.

   BEWUSST NUR IN DER ZEILENDARSTELLUNG: In der Galerie sind dieselben
   Elemente zusaetzlich per `display: none` weggeschaltet (Zeile 33 derselben
   Datei, greift ueber `.productbox-column`), sie liegen dort auf dem
   Produktbild, und der Entwurf zeigt auf den Kacheln keine Symbole. Die
   Kachel hat ihren eigenen, immer sichtbaren Warenkorb-Button aus
   productlist/item_box.tpl. */
body[data-page="2"] #product-list.layout-list .productbox-onhover {
  opacity: 1;
  transition: none;
}

/* --- Kategorienbaum in der Filterspalte -------------------------------- */
/* Das ist NICHT eine der Filterboxen, sondern NOVAs Kategorien-Box
   (boxes/box_categories.tpl -> snippets/categories_recursive.tpl). Sie bringt
   voellig anderes Markup mit, deshalb greifen die Filterregeln weiter oben
   hier nicht:
     .productlist-filter-headline              = Ueberschrift "Kategorien"
     li.nav-item.dropdown > span.nav-link > a  = Zweig mit Unterkategorien
     li.nav-item          > a.nav-link         = Blatt
     .snippets-categories-collapse             = aufgeklappte Unterliste
   Der aktive Pfad traegt .active auf JEDER Ebene (im Frontend geprueft:
   Tablet-Zubehoer > Displayschutz > Folie).

   ACHTUNG SCOPE: .productlist-filter-headline benutzt NOVA auch im Footer
   fuer die Linkgruppen. Alles hier haengt an #sidepanel_left. */
body[data-page="2"] #sidepanel_left .productlist-filter-headline {
  margin: 0;
  padding: 14px 0;
  border-bottom: 0;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.15px;
  line-height: 20px;
}
body[data-page="2"] #sidepanel_left .box-categories .nav-link {
  padding: 6px 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  letter-spacing: -0.15px;
  line-height: 20px;
  text-decoration: none;
}
/* Bei Zweigen sitzt der Text in einem <a> IM .nav-link-<span> - ohne
   `inherit` behielte er die NOVA-Linkfarbe. */
body[data-page="2"] #sidepanel_left .box-categories .nav-link > a {
  color: inherit;
  text-decoration: none;
}
body[data-page="2"] #sidepanel_left .box-categories .nav-link:hover,
body[data-page="2"] #sidepanel_left .box-categories .nav-link:hover > a {
  color: #2E6FB8;
}
/* Unterlisten: NOVA hinterlegt sie mit #F5F7FA - auf der weissen Filterkarte
   ein grauer Kasten mitten im Baum. Stattdessen Einzug je Ebene. */
body[data-page="2"] #sidepanel_left .box-categories .snippets-categories-collapse {
  background: transparent;
}
/* Einzugsleiter, gemessen an der Textkante: Ueberschrift "Kategorien" 149,
   Hauptkategorien 161, 1. Unterebene 181, 2. Unterebene 201 - also 12px
   Einzug unter der Ueberschrift und danach gleichmaessige 20px-Stufen.
   Die Rohwerte sind kleiner als die Differenz, weil NOVA jeder Unterliste
   zusaetzlich 8px Eigenabstand gibt (li.nav-item padding-left). */
body[data-page="2"] #sidepanel_left .box-categories .snippets-categories-collapse .nav-link {
  padding-left: 24px;
  /* Rechts derselbe Wert wie bei den Hauptzeilen. Ohne ihn endeten die
     Auf-/Zuklapp-Pfeile der Unterebenen 12px weiter rechts als die der
     Hauptkategorien (519 statt 507) - sie standen sichtbar nicht auf einer
     Linie. */
  padding-right: 12px;
}
/* Luft unter der letzten Zeile einer aufgeklappten Unterliste. Ohne sie sass
   der letzte Eintrag - besonders auffaellig als rote Pille - direkt auf der
   Trennlinie der naechsten Hauptkategorie. 6px ergeben zusammen mit den 6px
   Eigenpolsterung der Zeile dieselben 12px Luft, die auch die Hauptzeilen
   unter ihrem Text haben. */
body[data-page="2"] #sidepanel_left .box-categories .snippets-categories-collapse {
  padding-bottom: 6px;
}
body[data-page="2"] #sidepanel_left .box-categories .snippets-categories-collapse .snippets-categories-collapse .nav-link {
  padding-left: 36px;
}
/* Aktiver Pfad: dunkel und halbfett statt NOVAs rotem Balken. Der ist ein
   `border-bottom: 6px solid #F46060` am .nav-link des aktiven Zweigs -
   im Entwurf gibt es so eine Linie nicht, und quer ueber die Karte wirkt sie
   wie ein Trennstrich an falscher Stelle. */
body[data-page="2"] #sidepanel_left .box-categories .nav-item.active > .nav-link {
  border-bottom: 0;
  color: #1B1B1B;
  font-weight: 600;
}
/* Die AKTUELLE Kategorie als rote Pille wie im Entwurf ("Alle Produkte").
   `:not(:has(.active))` trifft genau das unterste Glied der Kette - die
   Elternzweige bleiben nur dunkel. :has() wird in diesem Projekt schon
   verwendet (FAQ-Seite), die Browserunterstuetzung ist geprueft. */
body[data-page="2"] #sidepanel_left .box-categories .nav-item.active:not(:has(.active)) > .nav-link {
  /* flex, NICHT block: NOVA legt diese Zeilen als
     `display: flex; justify-content: space-between` an - nur dadurch sitzt der
     Auf-/Zuklapp-Pfeil (das ::after des .dropdown-toggle) ganz rechts. Mit
     `display: block` klebte er direkt hinter dem Text. Die beiden Angaben
     stehen hier ausdruecklich dabei, weil NOVAs Regel nur Zweige
     (.dropdown-toggle) trifft - Blaetter ohne Pfeil sollen sich genauso
     verhalten. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--color-primary);
  border-radius: 8px;
  color: #FFFFFF;
}
body[data-page="2"] #sidepanel_left .box-categories .nav-item.active:not(:has(.active)) > .nav-link > a,
body[data-page="2"] #sidepanel_left .box-categories .nav-item.active:not(:has(.active)) > .nav-link:hover,
body[data-page="2"] #sidepanel_left .box-categories .nav-item.active:not(:has(.active)) > .nav-link:hover > a {
  color: #FFFFFF;
}
/* Trennlinie der Kategorien-Box wie bei den Filtergruppen. */
body[data-page="2"] #sidepanel_left .box-normal-hr {
  margin: 0;
  border-top: 1px solid var(--color-border);
}
/* Hauptkategorien untereinander mit derselben duennen Linie trennen wie die
   Filtergruppen. `+ .nav-item` setzt die Linie OBEN an jedem Eintrag ausser
   dem ersten - so entsteht keine doppelte Linie mit dem <hr> am Fuss der Box
   und keine Linie direkt unter der Ueberschrift "Kategorien".
   Nur die oberste Ebene (`.nav-panel > .nav >`): Unterkategorien bleiben eine
   zusammenhaengende Liste, sonst zerfaellt der aufgeklappte Zweig in lauter
   Einzelzeilen.
   Etwas mehr Hoehe fuer die Hauptzeilen (12px statt 6px), damit die Linien
   nicht am Text kleben - dieselbe Luft wie zwischen den Filtergruppen. */
body[data-page="2"] #sidepanel_left .box-categories .nav-panel > .nav > .nav-item + .nav-item {
  border-top: 1px solid var(--color-border);
}
body[data-page="2"] #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
  /* Seitlich 12px: Die Kategorien stehen dadurch eingerueckt unter der
     Ueberschrift "Kategorien" (die bleibt buendig an der Kartenkante).
     Rechts derselbe Wert, damit die Auf-/Zuklapp-Pfeile aller Zeilen -
     auch die in der Pille - auf einer Linie enden. */
  padding: 12px;
}
/* Die Pille bringt eigene Polsterung (6px 12px) mit und macht die Zeile damit
   flacher als ihre Nachbarn - seit die Hauptkategorien Trennlinien haben,
   klebte sie oben und unten daran.
   Auf der obersten Ebene deshalb 6px Aussenabstand: 6+6 Aussen + 6+6 Innen +
   20 Zeilenhoehe = 44px, genau die Hoehe einer normalen Hauptzeile
   (12+20+12). Die Linien behalten so ihren Rhythmus, und die Pille bekommt
   Luft. Unterkategorien bleiben ohne Aussenabstand - dort ist die Zeile 6px
   hoch gepolstert und die Pille passt genau hinein. */
body[data-page="2"] #sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active:not(:has(.active)) > .nav-link {
  /* Polsterung hier NOCHMAL, obwohl sie schon in der allgemeinen Pillen-Regel
     steht: Jene hat exakt dieselbe Spezifitaet wie die Zeilenregel der
     Hauptkategorien (je 1 ID, 6 Klassen, 1 Element), und die steht spaeter in
     der Datei - also gewann dort `padding: 12px 0`. Die Pille war damit 44px
     hoch statt 32px, zusammen mit dem Aussenabstand 56px, und stand als
     einzige Zeile aus der Reihe. Dieser Selektor traegt eine Klasse mehr
     (.active) und gewinnt eindeutig.
     Wer die Werte aendert: Die Summe muss 44px ergeben (6+6 aussen, 6+6
     innen, 20 Zeilenhoehe) - so hoch ist eine normale Hauptzeile
     (12+20+12). */
  /* Aussenabstand seitlich NEGATIV: Die Pille bringt 12px Innenpolsterung mit,
     die anderen Hauptkategorien haben keine - mit `margin: 6px 0` staende ihr
     Text 12px weiter rechts als der Rest der Liste. Statt allen Zeilen 12px
     Polsterung zu geben (dann waeren die Kategorien gegenueber "Filter",
     "Kategorien" und den Filtergruppen eingerueckt), waechst die FLAECHE der
     Pille um dieselben 12px nach aussen. Der Text steht damit auf derselben
     Linie wie darueber und darunter.
     Platz dafuer ist da: Die Filterkarte hat 20px Innenabstand, die Pille
     ragt 12px hinein und laesst 8px bis zur Kante. */
  /* Kein negativer Aussenabstand mehr: Seit die Hauptzeilen selbst 12px
     Polsterung haben, sitzt der Pillentext ohnehin auf derselben Linie wie
     die uebrigen Kategorien. Die Flaeche laeuft damit genau von Kartenkante
     zu Kartenkante. */
  margin: 6px 0;
  padding: 6px 12px;
}
/* Pille auf der 1. Unterebene: Ohne diese Zeile zoege die allgemeine
   Pillen-Regel (padding-left 12px) den Text 12px nach links aus der Flucht
   ihrer Geschwister. Fuer die 2. Unterebene steht dieselbe Korrektur weiter
   unten. */
body[data-page="2"] #sidepanel_left .box-categories .snippets-categories-collapse .nav-item.active:not(:has(.active)) > .nav-link {
  padding-left: 24px;
}
/* Zweite Unterebene: Dort sind die Geschwister 24px eingerueckt (siehe
   `.snippets-categories-collapse .snippets-categories-collapse .nav-link`),
   die Pille braucht denselben Wert - sonst rutscht ihr Text nach links raus. */
body[data-page="2"] #sidepanel_left .box-categories .snippets-categories-collapse .snippets-categories-collapse .nav-item.active:not(:has(.active)) > .nav-link {
  padding-left: 36px;
}

/* ---------------------------------------------------------------------- */
/* Logo eine Zeile hoeher: ab lg in der Topbar, darunter in der Hauptzeile  */
/*                                                                        */
/* Wunsch des Nutzers: Die zweite Kopfzeile soll ganz den Kategorien       */
/* gehoeren - die Namen sind lang ("Lade- und Aufbewahrungsloesungen") und */
/* wurden vom mittig sitzenden Logo abgeschnitten.                         */
/*                                                                        */
/* WARUM ZWEI STELLEN IM MARKUP: Die Topbar ist unterhalb von lg           */
/* ausgeblendet (im Frontend geprueft: bei 375px steht #header-top-bar auf */
/* display:none). Laege das Logo nur dort, waeren auf dem Handy weder Logo */
/* noch Burger-Menue sichtbar - beide stecken in derselben Datei           */
/* (NOVA/layout/header_logo.tpl, .toggler-logo-wrapper). Deshalb bleibt das*/
/* Logo der Hauptzeile im Markup und wird ab lg nur ausgeblendet. Sichtbar  */
/* ist immer genau eines von beiden.                                       */
/* ---------------------------------------------------------------------- */
.amewo-topbar-logo {
  display: none;
}
@media (min-width: 992px) {
  /* Topbar wird dreiteilig: linke und rechte Gruppe teilen sich den Rest zu
     gleichen Teilen, damit das Logo exakt mittig sitzt - dieselbe Technik,
     die vorher in der Hauptzeile fuer das Logo gesorgt hat. */
  .amewo-topbar-left,
  .amewo-topbar-right {
    flex: 1 1 0;
    min-width: 0;
  }
  .amewo-topbar-right {
    justify-content: flex-end;
  }
  .amewo-topbar-logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }
  /* 30px Hoehe (vorher 36px, auf Wunsch zurueckgenommen - das Logo wirkte zu
     gross und stand zu dicht an der Trennlinie der Topbar). Die Zeile ist
     62px hoch (12px + Inhalt + 13px) und wird von den Links rechts und links
     bestimmt (~37px), nicht vom Logo - die 6px weniger werden also komplett
     zu Weissraum um das Logo und aendern die Zeilenhoehe nicht.
     Nebeneffekt: dieselbe Hoehe wie das Logo in der Fusszeile (186x30). */
  .amewo-topbar-logo img {
    display: block;
    width: auto;
    height: 30px;
  }
  /* In der Hauptzeile das Logo ausblenden. Der Burger daneben ist ab lg
     ohnehin weg (Bootstrap .navbar-toggler), deshalb faellt der ganze
     Wrapper weg - sonst bliebe eine leere Spalte im Flex-Layout stehen. */
  .amewo-header-row .toggler-logo-wrapper {
    display: none;
  }
  /* Ohne Logo in der Mitte braucht es das gleiche flex-grow links und rechts
     nicht mehr (siehe Kommentar weiter oben, der sich auf die alte Anordnung
     bezieht). Jetzt bekommen die Kategorien den ganzen Platz, die Icons
     rechts nur noch ihre Eigenbreite. */
  .amewo-header-left {
    flex: 1 1 auto;
  }
  .amewo-header-row #shop-nav {
    flex: 0 0 auto;
  }
}

/* --- Unterkategorie-Kacheln ------------------------------------------- */
/* Zeigt JTL oberhalb der Produkte, wenn eine Kategorie Unterkategorien hat
   (NOVA productlist/header.tpl, Block 'productlist-header-subcategories').
   Markup: .row.row-eq-height.content-cats-small > col > .sub-categories mit
   .subcategories-image (Bild) und .caption (Beschriftung).
   NOVA liefert dort nacktes Markup: kein Rahmen, keine Flaeche, Beschriftung
   grau/unterstrichen in 14px - zwischen den weissen Produktkarten sah das aus
   wie ein Fremdkoerper.

   Jetzt dieselbe Sprache wie die Produktkarten dieser Seite: weisse Karte,
   Radius 20, 1px --color-border, gleicher Hover (anheben + weicher Schatten).
   Beschriftung nach der dokumentierten Vorgabe fuer Kategorie-Labels
   (Inter Bold 20/28, LS -0,45) - dieselben Werte wie im Kategoriebalken der
   Startseite, damit Kategorien im ganzen Shop gleich aussehen.

   Bewusst NICHT die "Sockel"-Optik der Startseite (graue Flaeche, Bild ragt
   darueber hinaus): Die funktioniert nur mit den freigestellten PNGs mit
   transparentem Rand. Hier kommen normale Kategoriebilder aus der Wawi - und
   aktuell meist gar keine, dann zeigt JTL keinBild.gif. Deshalb ein ruhiger
   grauer Bildkasten fester Hoehe, in dem das Bild zentriert sitzt; so sind
   alle Kacheln gleich hoch, mit Bild wie ohne (gemessen: 284px). */
body[data-page="2"] .content-cats-small > [class*="col"] {
  display: flex;
  /* 24px wie zwischen den Produktkacheln, NOVA setzt 16px. */
  margin-bottom: 24px;
}
body[data-page="2"] .sub-categories {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 16px 16px 18px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transition: box-shadow .2s ease, transform .2s ease;
}
body[data-page="2"] .sub-categories:hover {
  box-shadow: 0 8px 24px rgba(27, 27, 27, .08);
  transform: translateY(-2px);
}
body[data-page="2"] .sub-categories > a {
  display: block;
}
/* Flaeche seit 1.0.301 WEISS statt #F5F7FA: Das Bild fuellt den Kasten jetzt
   aus (siehe naechste Regel). Bei quadratischen Fotos in einem 231x160-Kasten
   bleibt links und rechts trotzdem ein Rest stehen - grau wirkte das wie ein
   Rahmen um ein zu kleines Bild. Der Kasten bleibt als Masshalter erhalten,
   damit alle Kacheln gleich hoch sind, mit Bild wie ohne. */
body[data-page="2"] .sub-categories .subcategories-image {
  align-items: center;
  justify-content: center;
  height: 160px;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 16px;
}
/* Das Bild nutzt den Kasten voll aus, wird dabei aber NIE beschnitten
   (Wunsch des Nutzers): object-fit:contain skaliert bis zur ersten Kante und
   behaelt das Seitenverhaeltnis. Vorher deckelte max-height:128px die
   Darstellung, das Foto sass klein in der Flaeche.
   WICHTIG - das <picture> dazwischen: JTL gibt das Bild als
   <picture><source><img> aus, und das <picture> ist das eigentliche
   Flex-Element. Ohne eigene Hoehe bleibt seine Hoehe unbestimmt, und
   height/max-height:100% am <img> laufen ins Leere (gemessen: Bild 231x225 in
   einem 160px-Kasten, also unten abgeschnitten - genau der Fehler, der hier
   behoben werden sollte). Deshalb bekommt das <picture> die Hoehe des Kastens
   und gibt sie nach innen weiter. */
body[data-page="2"] .sub-categories .subcategories-image > picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
body[data-page="2"] .sub-categories .subcategories-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Ausnahme Platzhalter: keinBild.gif ist nur 130x130 - auf 160px hochgezogen
   wird er sichtbar unscharf. Bleibt deshalb bei seiner Eigengroesse. */
body[data-page="2"] .sub-categories .subcategories-image img[src*="keinBild"] {
  width: auto;
  height: auto;
  max-height: 128px;
}
body[data-page="2"] .sub-categories .caption {
  margin: 16px 0 0;
  text-align: left;
}
body[data-page="2"] .sub-categories .caption a {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.45px;
  line-height: 28px;
  text-decoration: none;
}
/* Lange Einzelwoerter duerfen nicht aus der Kachel laufen. "Displayschutz" ist
   ein Wort und liess sich nicht umbrechen - gemessen bei 1024px: Text 133px in
   einer 102px breiten Beschriftung, also 14px ueber die Kachelkante hinaus
   (Rueckmeldung des Nutzers "Schrift laeuft ueber"). `hyphens: auto` trennt
   sauber mit Bindestrich (das <html> traegt lang="de", sonst wuerde die Regel
   nichts tun), `overflow-wrap` ist der Rueckfall fuer Woerter ohne
   Trennstelle. */
body[data-page="2"] .sub-categories .caption {
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Zwischen lg und xl standen VIER Kacheln nebeneinander (NOVAs col-lg-3),
   obwohl die Inhaltsspalte neben der Filterspalte nur rund 700px breit ist -
   gemessen 136px je Kachel bei 1024px Fensterbreite. Drei Kacheln ergeben dort
   192px und damit wieder Platz fuer die Beschriftung. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body[data-page="2"] .content-cats-small > [class*="col"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
body[data-page="2"] .sub-categories:hover .caption a {
  color: var(--color-link-hover);
}
/* Unterhalb von md blendet NOVA den Bildkasten aus (.d-none.d-md-flex) - dann
   ist die Karte nur noch Beschriftung und darf flacher sein. */
@media (max-width: 767.98px) {
  body[data-page="2"] .sub-categories {
    padding: 12px 16px;
  }
  body[data-page="2"] .sub-categories .caption {
    margin: 0;
  }
  body[data-page="2"] .sub-categories .caption a {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ---------------------------------------------------------------------- */
/* Hauptnavigation: Hover und Aktiv-Zustand                                */
/*                                                                        */
/* Dafuer gibt es KEINE Backend-Einstellung. Der Abschnitt "Megamenu" in   */
/* den Templateeinstellungen steuert nur INHALTE (welche Kategorien,       */
/* Seiten, Hersteller, Bilder erscheinen), nichts zur Optik.               */
/*                                                                        */
/* NOVA zeichnet unter jedem Menuepunkt ein ::before, dessen Breite von 0  */
/* auf 100% animiert wird - ausgeloest von :hover UND .active              */
/* (themes/base/sass/_header.scss:120-127). Im Original: 6px hoch, eckig,  */
/* in einer Farbe. Das war fuer beide Zustaende dasselbe und mit 6px sehr  */
/* laut.                                                                   */
/*                                                                        */
/* Jetzt: derselbe Balken, aber 3px hoch mit runden Enden - und in ZWEI    */
/* Farben, damit "hier koennte ich hin" und "hier bin ich" unterscheidbar  */
/* sind:                                                                   */
/*   Hover  = --color-action (Hellblau), dazu dunklerer Text               */
/*   Aktiv  = --color-primary (Rot), wie die aktive Kategorie in der       */
/*            Filterspalte - dieselbe Aussage, dieselbe Farbe              */
/* Die Breitenanimation (width .4s) ist NOVAs und bleibt.                  */
/*                                                                        */
/* Reihenfolge beachten: Die .active-Regeln stehen NACH den Hover-Regeln   */
/* und haben dieselbe Spezifitaet - nur so bleibt die aktive Kategorie rot,*/
/* waehrend die Maus darueber liegt.                                       */
/* ---------------------------------------------------------------------- */
#mainNavigation .navbar-nav > .nav-item > .nav-link::before {
  border-width: 0 0 3px;
  border-radius: var(--radius-pill);
  border-color: var(--color-action);
}
#mainNavigation .navbar-nav > .nav-item:hover > .nav-link::before,
#mainNavigation .navbar-nav > .nav-item.hover > .nav-link::before {
  width: 100%;
}
#mainNavigation .navbar-nav > .nav-item.active > .nav-link::before {
  width: 100%;
  border-color: var(--color-primary);
}

/* --- Registrierung: Passwortfelder als eigene Karte -------------------- */
/* NOVA gibt den Passwortblock als nackte `.row.register-form-account`
   direkt hinter den beiden <fieldset>-Karten aus. Auf dieser Seite IST das
   <fieldset> die Karte (siehe oben), der Passwortblock hatte deshalb als
   einziger keine Flaeche und hing frei auf dem grauen Grund - genau das ist
   aufgefallen.
   Dieselben Werte wie beim fieldset: weiss, Radius 20, 32px Polsterung,
   24px Abstand nach unten.
   Wichtig: Als Bootstrap-.row bringt der Block -16px Aussenabstand mit; ohne
   das Zuruecksetzen frisst er die Polsterung an beiden Seiten wieder auf.
   Die Ueberschrift "Passwort" kommt aus dem Override
   register/form/customer_account.tpl. */
body[data-page="10"] #content .register-form-account {
  margin: 0 0 24px;
  /* Seitlich 16px statt 32px: Die Nachbarkarten sind <fieldset> mit 32px
     Polsterung, DARIN liegt eine Bootstrap-.row mit -16px Aussenabstand und
     Spalten mit +16px Polsterung - unterm Strich beginnt der Text 32px hinter
     der Kartenkante. Hier IST die Karte selbst die .row, ihre Spalten bringen
     die 16px also schon mit. Mit 32px waere alles 16px zu weit rechts
     gestanden (gemessen: Titel bei 481 statt 465).
     Gegenprobe nach der Aenderung: Kartenkanten 433/1473, Titel 465, Felder
     785 - identisch zur Karte "Kontaktdaten" darueber. */
  padding: 32px 16px;
  background: #FFFFFF;
  border-radius: 20px;
}
/* NOVA haelt in dieser Zeile eine leere linke Drittelspalte vor (dort steht
   im BESTELLVORGANG das Haekchen "Konto anlegen", auf der Registrierseite
   bleibt sie leer). Unser Titel kommt als eigene col-md-4 davor - ohne das
   Ausblenden waeren es 4+4+8 Spalten und die Felder wuerden umbrechen.
   `:not(:has(*))` trifft genau die leere Spalte: Sie enthaelt nur Leerraum,
   `:empty` wuerde deshalb nicht greifen. */
body[data-page="10"] #content .register-form-account > [class*="col-md-4"]:not(:has(*)) {
  display: none;
}

/* Kategorien mittig in der Kopfzeile. Vorher standen sie direkt hinter der
   Suche und wanderten mit deren Breite - links klebte alles zusammen, rechts
   blieb viel Leerraum. Zentriert wirkt die Zeile ruhiger, unabhaengig davon,
   wie viele Kategorien gerade gepflegt sind.
   Nur ab lg: Darunter ist #mainNavigation das aufklappbare Burger-Menue, dort
   gehoeren die Eintraege linksbuendig untereinander. */
@media (min-width: 992px) {
  .amewo-header-row #mainNavigation .navbar-nav {
    /* `safe center` statt `center`: Passen die Kategorien nicht in die Zeile,
       schiebt zentriertes Ausrichten sie auf BEIDEN Seiten hinaus - und die
       linke Haelfte ist unerreichbar, weil .nav-scrollbar auf overflow:hidden
       steht und scrollLeft nicht negativ werden kann. Auf dem Tablet fehlte
       dadurch das "S" von "Smartphone-Zubehoer" (gemessen bei 1024px: erster
       Eintrag bei x=126, Spalte beginnt erst bei x=168).
       `safe` faellt in genau diesem Fall auf linksbuendig zurueck, dann
       greifen NOVAs Pfeile zum Scrollen. Die einfache Angabe davor bleibt als
       Rueckfall fuer Browser ohne `safe` stehen. */
    justify-content: center;
    justify-content: safe center;
    width: 100%;
  }
}
/* Tablet-Breiten: NOVAs 24px Innenabstand je Seite summieren sich bei vier
   Kategorien auf 192px - gemessen 692px Bedarf bei 608px Platz (1024px
   Fenster). Mit kleinerem Abstand passt die Zeile wieder vollstaendig:
   596px bei 1024px, 564px bei 992px Fensterbreite. Ab 1200px bleibt es bei
   NOVAs Wert, dort ist genug Platz.
   Kommen weitere Kategorien dazu, greift wieder `safe center` samt Pfeilen -
   abgeschnitten wird nichts mehr. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  .amewo-header-row #mainNavigation .navbar-nav > .nav-item > .nav-link {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .amewo-header-row #mainNavigation .navbar-nav > .nav-item > .nav-link {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* Loeschkreuz im Suchfeld. NOVA setzt es mit `right: 52px` - das ist der
   Platz, den der Lupen-Button dort normalerweise am rechten Rand einnimmt.
   Da die Lupe bei uns links steht (order: -1), schwebte das Kreuz mitten im
   Feld. Hier an die rechte Kante und mittig auf der Zeile. */
#search .form-clear {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
/* Textfarbe der Menuepunkte. Ruhezustand kommt aus dem Theme (#525252),
   beim Ueberfahren und im aktiven Zustand wird er auf die Textfarbe des
   Shops dunkler - zurueckhaltender als der blaue Link-Hover, den NOVA und
   unsere shopweite Regel sonst setzen wuerden.
   ABSICHTLICH ENG GESCOPET auf die Hauptzeile: Topbar, Footer und
   Seitenspalte behalten ihren blauen Hover. */
.amewo-header-row #mainNavigation .navbar-nav > .nav-item > .nav-link:hover,
.amewo-header-row #mainNavigation .navbar-nav > .nav-item > .nav-link:focus,
.amewo-header-row #mainNavigation .navbar-nav > .nav-item.active > .nav-link {
  color: #1B1B1B;
}
/* Die aktive Kategorie zusaetzlich halbfett - der rote Balken allein traegt
   die Aussage sonst nur unterhalb des Textes. */
.amewo-header-row #mainNavigation .navbar-nav > .nav-item.active > .nav-link {
  font-weight: 600;
}
/* Aufklapp-Pfeil der Hauptkategorien weg: Das Menue klappt seit 1.0.243 gar
   nicht mehr auf (siehe Skript in layout/footer.tpl), ein Pfeil wuerde etwas
   versprechen, das nicht passiert. NOVA rendert ihn als ::after mit einem
   Font-Awesome-Zeichen am .dropdown-toggle - nicht zu verwechseln mit dem
   ::before am selben Element, das den Balken zeichnet.
   Nur ab lg: Unterhalb ist #mainNavigation das Burger-Menue, dort klappen die
   Ebenen weiterhin auf und der Pfeil zeigt das auch an. */
@media (min-width: 992px) {
  .amewo-header-row #mainNavigation .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    display: none;
  }
}

/* Telefonhoerer gespiegelt, damit er nach rechts geoeffnet ist - also zur
   Nummer hin, die rechts daneben steht. Font Awesome zeichnet fa-phone nach
   links. Gespiegelt per transform statt fa-flip-horizontal im Markup: eine
   Stelle statt zwei Templates.
   Beide Vorkommen gleich (Topbar + Kontaktzeile im Footer), sonst zeigten
   die Hoerer in verschiedene Richtungen. Bewusst nur diese beiden - andere
   Seiten, etwa Kontakt, bleiben unberuehrt. */
#header-top-bar .fa-phone,
#footer .fa-phone {
  transform: scaleX(-1);
}

/* ====================================================================== */
/* B2B-ANFRAGE  (/b2b-anfrage, Plugin amewo_b2b_anfrage)                  */
/*                                                                        */
/* Figma "Individuelle Anfrage" (Datei Y8s5EggglmW3pqbxnldOkj, Node       */
/* 5:1190), Werte 1:1 übernommen. Markup im Plugin:                        */
/* plugins/amewo_b2b_anfrage/frontend/template/b2b_anfrage.tpl.           */
/* Alles hängt an .amewo-b2b: Die Seite ist ein Plugin-Link, und          */
/* data-page 28 gilt für ALLE Plugin-Seiten (auch den Lösungsfinder).     */
/* Seitenhintergrund bleibt das shopweite #F5F7FA (Entwurf: #FAFAFA) -    */
/* alle Innenseiten nutzen bewusst denselben Grauton.                     */
/* ====================================================================== */
/* NOVA gibt den Linknamen "B2B Anfrage" als eigenes H1 über dem Plugin aus
   (layout/index.tpl, Block layout-index-heading). Der Entwurf hat nur
   "Individuelle Anfrage" - ohne das Ausblenden stünden zwei H1 übereinander.
   Per :has() nur auf dieser Seite, nicht auf anderen Plugin-Seiten. */
#content:has(> .amewo-b2b) > .index-heading-wrapper {
  display: none;
}
/* 1026px Breite laut Entwurf. Oben 24px: #content-wrapper bringt bereits
   24px mit, zusammen die 48px aus Figma. */
.amewo-b2b {
  max-width: 1058px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* --- Kopf: roter Badge, Überschrift, Unterzeile ------------------------ */
.amewo-b2b-head {
  margin-bottom: 48px;
  text-align: center;
}
.amewo-b2b-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: var(--color-primary);
  border-radius: 20px;
}
.amewo-b2b-head-icon img {
  display: block;
  width: 40px;
  height: 40px;
}
.amewo-b2b-title {
  margin: 0 0 16px;
  color: #1B1B1B;
  font-family: var(--font-family-display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 0.35px;
  line-height: 48px;
}
.amewo-b2b-sub {
  max-width: 672px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 20px;
  letter-spacing: -0.45px;
  line-height: 28px;
}

/* --- Vier Vorteilskarten ---------------------------------------------- */
.amewo-b2b-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}
.amewo-b2b-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 20px;
  text-align: center;
}
.amewo-b2b-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  background: var(--color-secondary);
  border-radius: 14px;
}
.amewo-b2b-benefit-icon img {
  display: block;
  width: 28px;
  height: 28px;
}
.amewo-b2b-benefit-title {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.44px;
  line-height: 27px;
}
.amewo-b2b-benefit-text {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  letter-spacing: -0.15px;
  line-height: 20px;
}

/* --- Formularkarte ---------------------------------------------------- */
.amewo-b2b-card {
  padding: 48px;
  background: #FFFFFF;
  border-radius: 20px;
}
.amewo-b2b-card-title {
  margin: 0 0 24px;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 36px;
}
.amewo-b2b .alert {
  margin: 0 0 24px;
  border-radius: 14px;
}
.amewo-b2b-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.amewo-b2b-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* PLZ : Ort im Entwurf 293 : 611px - rund 1 : 2. */
.amewo-b2b-row-plz {
  grid-template-columns: 1fr 2fr;
}
.amewo-b2b-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Das fieldset der Institutionsauswahl: Eine <legend> nimmt nicht verlässlich
   am Flex-Layout teil, deshalb hier Block + Abstand an der Legende (12px wie
   im Entwurf, statt 8px bei den Feldern). */
fieldset.amewo-b2b-field {
  display: block;
}
fieldset.amewo-b2b-field > .amewo-b2b-label {
  margin-bottom: 12px;
}
.amewo-b2b-label {
  margin: 0;
  padding: 0;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.31px;
  line-height: 24px;
}

/* Felder: 50px hoch, 1px #E6E6E6, Radius 14 - der Entwurf dieser Seite nimmt
   14px statt der shopweiten 10px (--radius-field), deshalb hier gesetzt. */
.amewo-b2b .form-control {
  height: 50px;
  padding: 12px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: none;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 16px;
  letter-spacing: -0.31px;
}
.amewo-b2b .form-control::placeholder {
  color: rgba(10, 10, 10, .5);
  opacity: 1;
}
.amewo-b2b .form-control:focus {
  border-color: var(--color-action-hover);
  box-shadow: 0 0 0 3px rgba(180, 214, 255, .35);
  outline: none;
}
.amewo-b2b .form-control.is-invalid {
  border-color: var(--color-primary);
}
.amewo-b2b textarea.form-control {
  height: auto;
  min-height: 98px;
  line-height: 24px;
  resize: vertical;
}
.amewo-b2b textarea.amewo-b2b-textarea-lg {
  min-height: 122px;
}
/* Auswahlfelder mit eigenem Pfeil - der Entwurf zeigt leere Kästen, ohne
   Pfeil wäre aber nicht erkennbar, dass es eine Auswahl ist. */
.amewo-b2b select.form-control {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Institution als Pillen: echte Radiobuttons (Tastatur, Formularwert,
   Pflichtprüfung), optisch versteckt; das Label ist die Pille. Die Inputs
   sind absolut gesetzt und belegen deshalb keine Rasterzelle.
   minmax(0, 1fr) statt 1fr: Sonst drückt das lange Wort "Bildungseinrichtung"
   seine Spalte auf, und auf dem Handy werden die Pillen ungleich breit. */
.amewo-b2b-pills {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.amewo-b2b-pill-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.amewo-b2b-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height statt height: Auf schmalen Fenstern bricht "Bildungs-
     einrichtung" um (Silbentrennung per lang="de") und braucht zwei Zeilen. */
  min-height: 48px;
  margin: 0;
  padding: 4px 12px;
  background: #FFFFFF;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.15px;
  line-height: 20px;
  text-align: center;
  hyphens: auto;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.amewo-b2b-pill:hover {
  border-color: var(--color-action-hover);
}
.amewo-b2b-pill-input:checked + .amewo-b2b-pill {
  background: var(--color-border);
  border-color: var(--color-border);
}
.amewo-b2b-pill-input:focus-visible + .amewo-b2b-pill {
  outline: 2px solid var(--color-action-hover);
  outline-offset: 2px;
}
.amewo-b2b-pills.is-invalid .amewo-b2b-pill {
  border-color: var(--color-primary);
}

/* Trennlinie + "Projektdetails". Zur nächsten Zeile im Entwurf 16px statt
   der 24px Formularabstand - daher die -8px unten. */
.amewo-b2b-section {
  margin-bottom: -8px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.amewo-b2b-section-title {
  margin: 0;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.44px;
  line-height: 28px;
}

/* Absenden: im Entwurf 48px unter dem letzten Feld (24px Formularabstand +
   24px Innenabstand), 60px hoch, rot über die volle Breite. */
.amewo-b2b-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}
.amewo-b2b-submit {
  width: 100%;
  height: 60px;
  background: var(--color-primary);
  border: 0;
  border-radius: 14px;
  color: #FFFFFF;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.44px;
  line-height: 28px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.amewo-b2b-submit:hover,
.amewo-b2b-submit:focus-visible {
  opacity: .9;
}
.amewo-b2b-note {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  letter-spacing: -0.15px;
  line-height: 20px;
  text-align: center;
}
.amewo-b2b-note a {
  color: inherit;
  text-decoration: underline;
}

/* --- Schmale Fenster -------------------------------------------------- */
@media (max-width: 991.98px) {
  .amewo-b2b-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767.98px) {
  .amewo-b2b {
    padding-top: 8px;
  }
  .amewo-b2b-title {
    font-size: 32px;
    line-height: 36px;
  }
  .amewo-b2b-sub {
    font-size: 17px;
    line-height: 25px;
  }
  .amewo-b2b-card {
    padding: 24px 16px;
  }
  .amewo-b2b-card-title {
    font-size: 24px;
    line-height: 30px;
  }
  .amewo-b2b-row,
  .amewo-b2b-row-plz {
    grid-template-columns: 1fr;
  }
  .amewo-b2b-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479.98px) {
  .amewo-b2b-benefits {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================== */
/* LÖSUNGSFINDER  (/loesung-finden, Plugin amewo_loesungsfinder)          */
/*                                                                        */
/* Nach den Figma-Screenshots der Schritte 1-3 gebaut (das Figma-         */
/* Kontingent war erschöpft, Maße aus den Bildern abgelesen). Markup:     */
/* plugins/amewo_loesungsfinder/frontend/template/loesungsfinder.tpl.     */
/* Breiten laut Entwurf: Schritt 1 = 1024, Schritt 2 und Ergebnis = 800,  */
/* Schritt 3 = 672px. Alles hängt an .amewo-lf.                           */
/* ====================================================================== */
/* NOVA-H1 mit dem Linknamen ausblenden - wie bei der B2B-Anfrage. */
#content:has(> .amewo-lf) > .index-heading-wrapper {
  display: none;
}
/* Oben 16px: #content-wrapper bringt 24px mit, zusammen 40px bis zum
   Fortschritt wie im Entwurf. */
.amewo-lf {
  position: relative;
  padding: 16px 16px 96px;
}
/* Inhalt liegt über dem Wasserzeichen (siehe .amewo-lf .amewo-watermark
   weiter unten). Das Wasserzeichen ist ausgenommen: Es ist selbst ein
   direktes Kind von .amewo-lf (das Skript in layout/header.tpl haengt es
   dort ein) und wuerde sonst hier ein `position: relative` abbekommen -
   dann wirken seine top/right-Angaben als VERSCHIEBUNG aus dem Textfluss
   heraus statt als Verankerung am Abschnitt, und es landet weit unterhalb
   der Seite. Genau das ist beim Umbau auf Lottie passiert. */
.amewo-lf > *:not(.amewo-watermark) {
  position: relative;
  z-index: 1;
}
.amewo-lf-svg {
  display: block;
  flex-shrink: 0;
}

/* --- Fortschritt: vier Punkte mit Linien ------------------------------ */
.amewo-lf-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.amewo-lf-steps-item {
  display: flex;
  align-items: center;
}
/* Linie VOR jedem Punkt außer dem ersten; blau, sobald dieser Punkt
   erreicht ist. */
.amewo-lf-steps-item + .amewo-lf-steps-item::before {
  content: "";
  width: clamp(24px, 10vw, 80px);
  height: 3px;
  margin: 0 4px;
  background: var(--color-border);
  border-radius: 2px;
}
.amewo-lf-steps-item.is-done::before,
.amewo-lf-steps-item.is-active::before {
  background: var(--color-secondary);
}
.amewo-lf-steps-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.amewo-lf-steps-item.is-active .amewo-lf-steps-dot {
  width: 40px;
  height: 40px;
  background: var(--color-secondary);
  color: #FFFFFF;
}
/* Erledigte Punkte sind Links zurück zu diesem Schritt. */
.amewo-lf-steps-item.is-done .amewo-lf-steps-dot {
  background: var(--color-secondary-bg);
  color: var(--color-action-hover);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.amewo-lf-steps-item.is-done .amewo-lf-steps-dot:hover,
.amewo-lf-steps-item.is-done .amewo-lf-steps-dot:focus-visible {
  background: var(--color-secondary);
  color: #FFFFFF;
}
.amewo-lf-steps-dot .amewo-lf-svg {
  width: 18px;
  height: 18px;
}

/* --- Kopf ------------------------------------------------------------- */
.amewo-lf-head {
  margin: 0 auto 40px;
  text-align: center;
}
.amewo-lf-title {
  margin: 0 0 8px;
  color: #1B1B1B;
  font-family: var(--font-family-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 40px;
}
.amewo-lf-sub {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 16px;
  letter-spacing: -0.31px;
  line-height: 24px;
}
.amewo-lf-body {
  max-width: 800px;
  margin: 0 auto;
}
.amewo-lf-step-1 .amewo-lf-body {
  max-width: 1024px;
}
.amewo-lf-step-3 .amewo-lf-body {
  max-width: 672px;
}

/* --- Auswahlkarten (Schritt 1, 2 und Ergebnis) ------------------------ */
.amewo-lf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amewo-lf-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.amewo-lf-grid > li {
  display: flex;
}
/* Die ganze Karte ist der Link. Weiß wie im Entwurf ab Schritt 2. */
.amewo-lf-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 20px;
  color: #1B1B1B;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.amewo-lf-card:hover,
.amewo-lf-card:focus-visible {
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
  color: #1B1B1B;
  text-decoration: none;
}
.amewo-lf-card:focus-visible {
  outline: 2px solid var(--color-action-hover);
  outline-offset: 2px;
}
/* Schritt 1: im Entwurf leicht abgedunkelt statt weiß. Als Transparenz über
   dem Seitengrund, damit der Ton zum shopweiten #F5F7FA passt. Beim Überfahren
   wird die Karte weiß. */
.amewo-lf-card-soft {
  padding: 32px;
  background: linear-gradient(135deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .015) 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.amewo-lf-card-soft:hover,
.amewo-lf-card-soft:focus-visible {
  background: #FFFFFF;
}
/* Beim Zurückspringen ist die bisherige Wahl markiert. */
.amewo-lf-card.is-selected {
  box-shadow: inset 0 0 0 2px var(--color-secondary);
}
.amewo-lf-card-icon {
  display: flex;
  margin-bottom: 16px;
  color: var(--color-secondary);
}
.amewo-lf-card-icon .amewo-lf-svg {
  width: 32px;
  height: 32px;
}
.amewo-lf-card-soft .amewo-lf-card-icon .amewo-lf-svg {
  width: 40px;
  height: 40px;
}
.amewo-lf-card-title {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.44px;
  line-height: 28px;
}
.amewo-lf-card-text {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  letter-spacing: -0.15px;
  line-height: 20px;
}
/* margin-top:auto - bei zweizeiligem Text stehen die Links einer Reihe
   trotzdem auf einer Höhe. */
.amewo-lf-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--color-action);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.15px;
  line-height: 20px;
  transition: color .2s ease;
}
.amewo-lf-card-link .amewo-lf-svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.amewo-lf-card:hover .amewo-lf-card-link,
.amewo-lf-card:focus-visible .amewo-lf-card-link {
  color: var(--color-link-hover);
}

/* --- Leiste "Gewählte Lösung" / "Ihre Auswahl" ------------------------- */
.amewo-lf-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 20px;
}
.amewo-lf-chosen-icon {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: #F3F3F3;
  border-radius: 12px;
  color: var(--color-secondary);
}
.amewo-lf-chosen-icon .amewo-lf-svg {
  width: 20px;
  height: 20px;
}
.amewo-lf-chosen-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.amewo-lf-chosen-label {
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 13px;
  line-height: 18px;
}
.amewo-lf-chosen-value {
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.31px;
  line-height: 24px;
}
.amewo-lf-chosen-restart {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-action);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: color .15s ease;
}
.amewo-lf-chosen-restart:hover,
.amewo-lf-chosen-restart:focus-visible {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* --- Schritt 3: Formularkarte ----------------------------------------- */
/* Abstände zwischen den Gruppen einheitlich 28px - der Entwurf schwankt
   hier zwischen 10 und 52px. */
.amewo-lf-panel {
  padding: 32px 28px;
  background: #FFFFFF;
  border-radius: 20px;
}
.amewo-lf-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.amewo-lf-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.amewo-lf-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.15px;
  line-height: 20px;
}
.amewo-lf-label-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  stroke-width: 2;
}
.amewo-lf-search {
  position: relative;
}
.amewo-lf-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  stroke-width: 2;
  transform: translateY(-50%);
  pointer-events: none;
}
.amewo-lf .amewo-lf-search .form-control {
  height: 52px;
  padding: 0 16px 0 46px;
  background: #FFFFFF;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  box-shadow: none;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 15px;
  letter-spacing: -0.23px;
}
.amewo-lf .amewo-lf-search .form-control::placeholder {
  color: rgba(10, 10, 10, .45);
  opacity: 1;
}
.amewo-lf .amewo-lf-search .form-control:focus {
  border-color: var(--color-action-hover);
  box-shadow: 0 0 0 3px rgba(180, 214, 255, .35);
  outline: none;
}

/* Anzahl und Nutzung: echte Radiobuttons, optisch versteckt; das Label ist
   die Schaltfläche (wie die Pillen der B2B-Anfrage). */
.amewo-lf-choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.amewo-lf-pills {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.amewo-lf-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 4px 12px;
  background: #F3F3F3;
  border-radius: 12px;
  color: #4A4A4A;
  font-family: var(--font-family-base);
  font-size: 15px;
  letter-spacing: -0.23px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.amewo-lf-usage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.amewo-lf-usage-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 16px 20px;
  background: #F3F3F3;
  border-radius: 14px;
  color: #4A4A4A;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.amewo-lf-usage-option .amewo-lf-svg {
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
}
.amewo-lf-usage-title {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.23px;
  line-height: 20px;
}
.amewo-lf-usage-text {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 12px;
  line-height: 16px;
}
.amewo-lf-pill:hover,
.amewo-lf-usage-option:hover {
  background: #EBEBEB;
}
/* Gewählter Zustand ist im Entwurf nicht gezeigt - hellblau wie die
   Fortschrittspunkte. */
.amewo-lf-choice-input:checked + .amewo-lf-pill,
.amewo-lf-choice-input:checked + .amewo-lf-usage-option {
  background: var(--color-secondary-bg);
  box-shadow: inset 0 0 0 2px var(--color-secondary);
  color: #1B1B1B;
}
.amewo-lf-choice-input:focus-visible + .amewo-lf-pill,
.amewo-lf-choice-input:focus-visible + .amewo-lf-usage-option {
  outline: 2px solid var(--color-action-hover);
  outline-offset: 2px;
}

/* --- Schaltflächen ---------------------------------------------------- */
.amewo-lf-actions {
  display: flex;
  gap: 12px;
}
.amewo-lf-back {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  background: #FFFFFF;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: border-color .15s ease;
}
.amewo-lf-back:hover,
.amewo-lf-back:focus-visible {
  border-color: var(--color-action-hover);
  color: #1B1B1B;
  text-decoration: none;
}
/* Grau wie im Entwurf, bis eine Anzahl gewählt ist (Pflichtfeld) - dann rot
   wie alle Hauptaktionen. Ohne :has() bleibt er grau, funktioniert aber. */
.amewo-lf-submit {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 16px;
  background: var(--color-border);
  border: 0;
  border-radius: 12px;
  color: #4A4A4A;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.amewo-lf-form:has(input[name="anzahl"]:checked) .amewo-lf-submit {
  background: var(--color-primary);
  color: #FFFFFF;
}
.amewo-lf-form:has(input[name="anzahl"]:checked) .amewo-lf-submit:hover,
.amewo-lf-form:has(input[name="anzahl"]:checked) .amewo-lf-submit:focus-visible {
  opacity: .9;
}
.amewo-lf-result-actions {
  justify-content: center;
  margin-top: 32px;
}

/* --- Wasserzeichen rechts (wie Startseite, 75 % Größe) ----------------- */
/* Steht im Entwurf rechts neben dem Inhalt - erst ab 1680px ist dort Platz,
   darunter würde es die Karten überdecken. */
@media (min-width: 1680px) {
  .amewo-lf {
    min-height: 800px;
  }
  /* Gleiche Umstellung wie beim grauen Band der Startseite (siehe dort die
     ausfuehrliche Begruendung): Lottie statt CSS-Hintergrund-SVG, weil SMIL
     in einem Hintergrundbild nicht laeuft und das Piktogramm dadurch aus
     winzigen Kreisen und drei viel zu grossen Punkten bestand.
     Zuschnitt nach derselben Rechnung, nur auf 255px Breite:
     Leinwand 255 x 750/396 = 483px breit, 322px hoch; Versatz
     170/750 x 483 = 110px und 124/500 x 322 = 80px; sichtbare Hoehe
     237/500 x 322 = 153px (vorher 143px - die Zeichnung war unten
     angeschnitten). Position unveraendert. */
  .amewo-lf .amewo-watermark {
    /* `position` steht hier ausdruecklich, obwohl die Grundregel es schon
       setzt - siehe die Ausnahme bei `.amewo-lf > *` weiter oben. */
    position: absolute;
    /* 640px wie im Entwurf, aber nach unten begrenzt: Die Hoehe des
       Abschnitts haengt am gewaehlten Schritt (Schritt 4 mit Produktkacheln
       ist deutlich hoeher als Schritt 1). Ohne das min() wuerde das
       Piktogramm auf einem kurzen Schritt unten aus dem Abschnitt
       herauslaufen. */
    top: min(640px, calc(100% - 155px));
    bottom: auto;
    left: auto;
    right: 56px;
    width: 255px;
    height: 155px;
  }
  .amewo-lf .amewo-watermark .amewo-lottie {
    left: -106.5px;
    top: -78px;
    width: 470px;
    height: 313px;
  }
  .amewo-lf .amewo-watermark-static {
    background-size: 255px 155px;
  }
}
/* Unterhalb von 1680px gibt es das Wasserzeichen im Loesungsfinder nicht -
   das Skript haengt es zwar immer ein, die Flaeche wird hier aber
   ausgeblendet. */
@media (max-width: 1679.98px) {
  .amewo-lf .amewo-watermark {
    display: none;
  }
}

/* --- Schmale Fenster -------------------------------------------------- */
@media (max-width: 991.98px) {
  .amewo-lf-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .amewo-lf {
    padding-bottom: 64px;
  }
  .amewo-lf-head {
    margin-bottom: 32px;
  }
  .amewo-lf-title {
    font-size: 28px;
    line-height: 34px;
  }
  .amewo-lf-card-soft {
    padding: 28px 24px;
  }
  .amewo-lf-panel {
    padding: 24px 16px;
  }
}
@media (max-width: 575.98px) {
  .amewo-lf-grid,
  .amewo-lf-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .amewo-lf-chosen {
    padding: 16px;
  }
}
@media (max-width: 479.98px) {
  .amewo-lf-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .amewo-lf-usage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Lösungsfinder Schritt 4: Ergebnis mit Produktkacheln -------------- */
/* Nach dem Figma-Screenshot "Ihre Lösungen". Die Kacheln sind die normalen
   Shop-Kacheln (item_box.tpl mit amewoLfCard=true) und teilen sich die
   Kartenregeln mit Start- und Kategorieseite (Aufhänger .amewo-lf-products im
   gemeinsamen Kartenblock oben). Breite: shopweiter Inhaltsbereich (1218px)
   statt der vollen Fensterbreite des Entwurfs - so steht das Ergebnis bündig
   mit Kopf und Fuß des Shops. */
.amewo-lf-step-4 .amewo-lf-body {
  max-width: 1218px;
}
.amewo-lf-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding: 20px 24px;
  background: #FFFFFF;
  border-radius: 20px;
}
.amewo-lf-summary-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.amewo-lf-summary-label {
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 13px;
  line-height: 18px;
}
.amewo-lf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amewo-lf-chip {
  padding: 3px 12px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}
.amewo-lf-summary-restart {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}
.amewo-lf-summary-restart:hover,
.amewo-lf-summary-restart:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}
.amewo-lf-note {
  margin: -12px 0 20px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
}

/* Raster: 3 / 2 / 1 Spalten über die Bootstrap-Klassen im Template,
   Abstand 24px. */
.row.amewo-lf-products {
  align-items: stretch;
  margin: 0 -12px;
}
.amewo-lf-products > .product-wrapper {
  padding: 0 12px;
}
/* NOVAs registerImageHover() fixiert Kachelhöhen per Inline-Style (siehe
   Startseiten-Grid) - hier unnötig, Flexbox macht die Reihe gleich hoch. */
.amewo-lf-products .product-wrapper {
  height: auto !important;
}
.amewo-lf-products .productbox {
  padding: 20px;
  border: 0;
}
.amewo-lf-products .productbox-inner > .row {
  flex-direction: column;
  flex-wrap: nowrap;
}
.amewo-lf-products .productbox-inner > .row > [class*="col"] {
  flex: 0 0 auto;
  max-width: 100%;
}
.amewo-lf-products .productbox-inner > .row > [class*="col"]:last-child {
  flex: 1 1 auto;
}
.amewo-lf-products .productbox-quick-actions,
.amewo-lf-products .ribbon-8 {
  display: none !important;
}
.amewo-lf-products .productbox-title,
.amewo-lf-products .productbox-title a {
  font-size: 16px;
  line-height: 24px;
}
/* Preis oben, Warenkorb-Button darunter - wie auf der Kategorieseite. */
.amewo-lf-products .amewo-product-card-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.amewo-lf-products .amewo-product-card-footer .footnote-reference,
.amewo-lf-products .amewo-product-card-footer .price-note {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.amewo-lf-products .productbox-image {
  position: relative;
}
/* Das zweite Artikelbild (NOVA-Wechsel beim Überfahren) stünde hier
   UNTER dem ersten und verdoppelte die Kachelhöhe der ganzen Reihe. */
.amewo-lf-products .productbox-image.second-wrapper {
  display: none;
}
.amewo-lf-compat {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  max-width: 75%;
  color: #1B1B1B;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: right;
}
.amewo-lf-more {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.amewo-lf-more a {
  color: var(--color-link-hover);
  font-weight: 500;
}
@media (max-width: 575.98px) {
  .amewo-lf-summary {
    flex-wrap: wrap;
    padding: 16px;
  }
  .amewo-lf-summary-restart {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------- */
/* Fenster "In den Warenkorb gelegt" (NOVA productdetails/pushed_success)  */
/* ---------------------------------------------------------------------- */
/* NOVA gibt .modal-body nur oben/unten Innenabstand (16px 0) und
   overflow:auto in beide Richtungen; die Bootstrap-Zeilen darin haben aber
   -16px Rand links und rechts. Der Inhalt wurde dadurch 32px breiter als das
   Fenster, und unten erschien ein waagerechter Scrollbalken. Abgeschnitten
   werden mit hidden nur die Spaltenabstände, kein Inhalt; die Ausrichtung zur
   Überschrift bleibt unverändert. Gilt shopweit, das Fenster kommt von jeder
   Seite mit Warenkorb-Button. */
.modal-body:has(> #pushed-success) {
  overflow-x: hidden;
}