nur der leere Alarm-Wrapper, der Inhalt liegt in den .cms-section-Geschwistern daneben. Der Kern nimmt dem

deshalb die Mindesthöhe (.cms-page-main > .page-main { min-height: unset }). Unsere Regel weiter oben ist spezifischer und hat das überschrieben — dadurch stand ein 782 px hoher leerer Block vor dem Inhalt (am 08.08. gemessen). Hier wird die Ausnahme des Kerns wiederhergestellt. */ body:has(.hw-rail) .cms-page-main > main.page-main { min-height: unset; } /* Die Positionierung der .cms-section und die Neutralisierung des inneren .hw-container stehen im @media (min-width: 720px)-Block am Dateiende — sie existieren nur wegen der senkrechten Leiste. */ /* Abstand über und unter dem CMS-Inhalt. 50 px sind keine gegriffene Zahl, sondern der Wert, den der Kern für alle Panel-Seiten benutzt: .hw-header-section hat padding-top: 50px, .hw-content-section padding-bottom: 50px (storefront.min.css). :first-of-type / :last-of-type, damit bei mehreren Sections nicht 100 px dazwischen entstehen. */ body:has(.hw-rail) .cms-page-main > .cms-section:first-of-type { padding-top: 50px; } body:has(.hw-rail) .cms-page-main > .cms-section:last-of-type { padding-bottom: 50px; } /* Die Knopf-Regeln der Domainsuche stehen im @media (min-width: 720px)-Block am Dateiende — unter 720 px steht der Knopf unter dem Feld, dort ist die volle Breite aus .btn-block richtig. */ /* ---------------------------------------------------------------------------- Seitenspezifisches — Warenkorb ------------------------------------------------------------------------- */ /* Sperrgrund einer Zahlungsart, sichtbar im Kasten (Markup in der Theme-Kopie page/checkout/include/agreement-methods.twig, ersetzt dort den Bootstrap-Tooltip der Kernfassung). Eine Einschränkung, kein Fehler: gedämpft statt alarmrot, aber mit --hw-steel dunkler als text-muted, damit der Text lesbar bleibt. 13px wie die Untereinträge der Leiste, ruhige Zeilenhöhe; 6px Abstand zwischen Schloss-Symbol und Text bzw. über dem Block — kompakt, im Maßstab der small-Zeilen des Kastens. */ .hw-payment-restriction { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--hw-steel); } /* Symbol an der ersten Textzeile ausgerichtet (13px × 1.5 ≈ 20px Zeile, das Symbol ist ~13px hoch — 3px setzen es optisch auf die Grundlinie) */ .hw-payment-restriction > i { flex: 0 0 auto; margin-top: 3px; } /* Die Gründe-Liste ohne Punkte und ohne Einzug, damit sie im Kasten nicht ausbricht */ .hw-payment-restriction ul { margin: 2px 0 0; padding: 0; list-style: none; } /* Der Kern graut gesperrte Zahlungsarten mit opacity: 0.5 aus (.payment-method-selection .custom-control.is--disabled in storefront.min.css). Deckkraft wirkt auf den ganzen Teilbaum und lässt sich von Kindern nicht zurücknehmen: Bei 0.5 über Weiß erreicht selbst reines Schwarz nur 3,98:1, WCAG AA verlangt 4,5:1 für Text unter 18 pt. Der Sperrgrund wäre damit grundsätzlich nicht lesbar. Deshalb volle Deckkraft und die Ausgrauung über die Textfarbe — cursor: not-allowed aus dem Kern bleibt. Eng auf .payment-method-selection begrenzt: .is--disabled kommt im ausgelieferten DOM nur an diesen beiden Elementen vor (07.08. gezählt). */ body:has(.hw-rail) .payment-method-selection .custom-control.is--disabled { opacity: 1; } body:has(.hw-rail) .payment-method-selection .custom-control.is--disabled .custom-control-label, body:has(.hw-rail) .payment-method-selection .custom-control.is--disabled .custom-control-label .text-muted { color: var(--hw-steel); } /* .text-muted: der Kanal-Bootstrap setzt die Utility fest auf #6c757d mit !important. Auf der grauen Kartenfußzeile (#F7F7F7, „Noch kein Konto?" der Anmeldung) sind das 4,38:1, unter AA (Briefing 190, Abschnitt 3.1). --fg-muted (#63677A) kommt dort auf 5,22:1. !important wie im Kern und wie hw.css für den Dunkelmodus, dessen .dark-mode .text-muted durch die höhere Spezifität weiter gewinnt. Der zweite Wert ist der Rückfall ohne Website-Fragment. */ .text-muted { color: var(--fg-muted, #63677A) !important; } /* ---------------------------------------------------------------------------- Ab 720 px: alles, was nur wegen der SENKRECHTEN Leiste existiert --------------------------------------------------------------------------- Unter 720 px baut der Block „Unter 720 px: Leiste waagerecht" weiter oben die Leiste zur waagerechten Zeile um und nimmt main das padding-left. Die folgenden Regeln hatten diesen Rückbau nie bekommen und rechneten weiter mit --hw-rail-width: 260px. Auf einem 390-px-Telefon ergab das margin-left: 272px und eine 118 px schmale Spalte (am 08.08. gemessen: Überschrift 94 px breit und 197 px hoch, Suchfeld 55 px, Inhalt 215 px über den Rand). Deshalb gelten sie ab hier nur noch dort, wo die Leiste tatsächlich senkrecht links steht. ------------------------------------------------------------------------- */ @media (min-width: 720px) { /* Der Website-Header zentriert .mk-nav__inner (max-width 1280) im Fenster; unser Inhalt zentriert sich im Bereich rechts der Leiste und stand deshalb 132 px weiter rechts. Hier wird derselbe Bezugspunkt hergestellt. 1280 ist eine FREMDZAHL aus dem Website-CSS (.mk-nav__inner). 1304 = 1280 + 2 × 12, weil .hw-container 12 px Gutter je Seite hat — nur so kommt der INHALT auf 1280. 652 = 1304 / 2. Kein 100vw: vw enthält die Breite der Bildlaufleiste (am 07.08. gemessen: innerWidth 2880 gegen clientWidth 2865, also 15 px). 50 % bezieht sich dagegen auf den Elternteil, der die echte Innenbreite minus Leiste hat — damit stimmt es auch mit Bildlaufleiste. Herleitung: Elternbreite P = Fensterbreite W − Leistenbreite L. Gewünschte linke Boxkante, vom Elternanfang aus gemessen: (W − 1304) / 2 − L = (P + L − 1304) / 2 − L = P/2 − 652 − L/2 Das max(12px, …) ist die Untergrenze: Sobald der Header-Container unter die Leiste liefe, bleibt der Inhalt an der Leiste stehen statt darunter zu verschwinden. Untergrenze von 0 auf 12px angehoben. Die 12px sind der halbe Bootstrap-Gutter; zusammen mit der 12-px-Polsterung des Containers ergibt das 24px sichtbaren Abstand zur Leiste, wo die Fluchtung mit dem Website-Header nicht möglich ist. Ab ~1824px Fensterbreite gewinnt der zweite Term und die Fluchtung bleibt unverändert bei 0. Gleiche Untergrenze auch an der .cms-section-Regel darunter — sonst entstünden zwei verschiedene Abstände im selben Panel. Muss NACH der min(1300px, 100%)-Regel stehen — gleiche Spezifität, die spätere gewinnt. */ body:has(.hw-rail) .hw-container { max-width: 1304px; margin-left: max(12px, calc(50% - 652px - var(--hw-rail-width) / 2)); margin-right: auto; } /* Die .cms-section-Geschwister tragen zwar die Klasse page-main, sind aber kein

— unsere padding-left-Regel greift dort nicht, deshalb lagen ihre linken 55 px unter der Leiste. Dieselbe Mechanik wie bei .hw-container: an der Leiste anschlagen, sonst mit dem Header-Container fluchten. Untergrenze var(--hw-rail-width) + 12px, im Gleichschritt mit der .hw-container-Regel oben — macht 24px sichtbaren Abstand zur Leiste. Korrektur vom 08.08.: Die Section trägt dieselben Maße wie .hw-container (1304 = 1280 + 2 × 12 Gutter, 652 = 1304/2), weil der Inhalt der CMS-Elemente noch einmal in einem .hw-container steckt — dessen 12 px Polsterung bringen den Inhalt auf die Header-Linie. Der innere Container selbst wird direkt darunter neutralisiert, sonst rückte er ein zweites Mal ein. */ body:has(.hw-rail) .cms-page-main > .cms-section { max-width: 1304px; margin-left: max(calc(var(--hw-rail-width) + 12px), calc(50% - 652px)); margin-right: auto; } /* Der .hw-container INNERHALB einer CMS-Section darf nicht ein zweites Mal einrücken — sonst addieren sich die Untergrenzen (gemessen: 12 + 12 + 12 = 36 px statt 24). Die Section übernimmt die Positionierung, der Container nur noch seine Polsterung. Greift bewusst auf jeden .hw-container in CMS-Sections, auch bei künftigen CMS-Elementen. */ body:has(.hw-rail) .cms-page-main .cms-section .hw-container { max-width: none; margin-left: 0; margin-right: 0; } /* Der Knopf der Domainsuche stand 25 px zu hoch — genau die Höhe des Labels „Domain", weil in seiner Spalte kein Label steht. Die Spalte streckt sich über die volle Zeilenhöhe; wird der Knopf darin mittig gesetzt, liegt er auf dem Feld. Und btn-block streckte ihn auf 403 px, obwohl er von Natur aus 112 px breit ist. Zusatz 08.08.: nur ab 720 px. Unter 720 px steht der Knopf unter dem Feld, dort ist die volle Breite aus .btn-block (storefront.min.css) richtig. */ body:has(.hw-rail) .hw-domain-search-form-action { display: flex; align-items: center; } body:has(.hw-rail) .hw-domain-search-form-action .btn { width: auto; } } /* ---------------------------------------------------------------------------- Anmelden und Registrieren: geteilte Fläche --------------------------------------------------------------------------- Gilt nur, wo .hw-auth-split im Dokument steht — also auf genau den zwei Seiten, deren Vorlage wir kopiert haben. Die anderen acht Seiten auf base-center.twig (Passwort vergessen, 2FA, KYC, Bestellbestätigung, Konto wechseln, Newsletter-Abmeldung …) sind unberührt. ------------------------------------------------------------------------- */ /* Website-Kopf und -Fuß kommen aus den Theme-Feldern „Eigenes PHP" und liegen außerhalb von Twig — sie lassen sich nur hier abschalten. */ body:has(.hw-auth-split) .mk-footer { display: none; } /* Der Kopf verschwindet, aber NICHT mit display:none — sonst rendert der Darstellungs-Umschalter darin überhaupt nicht mehr, und nachbauen lässt er sich nicht: seine Logik hängt an einem