/* ============================================================================
* custom-mobile.css — HawaiiCards Mobile/Tablet-Schicht
* ===== MOBILE (≤839px) — Eigentum Rolle mobile — NICHT vom Desktop ändern =====
*
* Zone lt. DESKTOP-MOBILE-VERTRAG: ausschließlich @media (max-width:839px).
* Basis: Deep-Research Mobile/Tablet-Dimensionierung
* Compact < 600px → 4-Spalten-Raster, Seitenrand 16px, Gap 16px
* Medium 600–839px → 8-Spalten-Raster, Seitenrand 24px, Gap 24px
* Expanded ≥ 840px → NICHT diese Datei (Rolle frontend)
* Referenz-Artboards: 390 / 768 (/ 1024 nur Smoke-Test)
* Test-Matrix vor Abnahme: 360 / 390 / 768 / 834 / 1024
*
* P0-1 Adaptives Fundament v1.1 — 2026-07-02
* P0-2 Navigation + Suche v1 — 2026-07-02 (Abschnitt 7, JS: custom-mobile.js)
* Eigene Klassen tragen Präfix .hcm- (HawaiiCards Mobile) — kollisionsfrei.
* Desktop-Hooks werden nur GELESEN (.wrap, .btn, .a-btn, .go, .a-cart, .catbar),
* nie umbenannt (Vertrag §2).
* ========================================================================== */
/* ---------- 1 · Mobile-Tokens (Compact-Default, Medium-Override) ---------- */
@media (max-width: 839px) {
:root {
/* Spacing-Skala: 8er-Raster mit 4er-Feinschritt */
--hcm-s1: 4px;
--hcm-s2: 8px;
--hcm-s3: 12px;
--hcm-s4: 16px;
--hcm-s5: 24px;
--hcm-s6: 32px;
--hcm-s7: 40px;
--hcm-s8: 48px;
/* Layout Compact (<600): 4 Spalten, Rand+Gap 16 */
--hcm-cols: 4;
--hcm-pad: 16px;
--hcm-gap: 16px;
/* Touch-Targets (WCAG 24 min · Praxisziel 44–48) */
--hcm-tap: 44px;
--hcm-tap-primary: 48px;
}
}
@media (min-width: 600px) and (max-width: 839px) {
:root {
/* Layout Medium (600–839): 8 Spalten, Rand+Gap 24 */
--hcm-cols: 8;
--hcm-pad: 24px;
--hcm-gap: 24px;
}
}
@media (max-width: 839px) {
/* ---------- 2 · Overflow-Guard (sticky-sicher) ----------
* clip statt hidden: overflow-x:hidden an Vorfahren bricht position:sticky.
* !important nötig: hawaiicards.css (body{overflow-x:hidden}) + später
* geladene Sheets überstimmen sonst per Ladereihenfolge. Zone ≤839 = mobile.
*/
html, body {
overflow-x: clip !important;
}
/* ---------- 3 · Basis-Ergonomie: Touch-Targets ----------
* :where() hält Spezifität = 0 — Detail-Etappen (P0-2/P0-3) können
* gezielt übersteuern, Desktop-Styles werden nur bei Gleichstand
* durch Ladereihenfolge ergänzt.
*/
:where(.btn, button, [role="button"], input[type="submit"], input[type="button"]) {
min-height: var(--hcm-tap);
}
:where(.site-header .a-btn, .site-header .a-cart, .site-header .go) {
min-height: var(--hcm-tap);
min-width: var(--hcm-tap);
}
:where(input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="password"],
select, textarea) {
min-height: var(--hcm-tap);
/* iOS-Auto-Zoom verhindern: Eingaben nie unter 16px */
font-size: max(16px, 1em);
}
/* Navigations-/Listenziele: Höhe über Padding statt starrer height */
:where(.catbar a, .site-footer a) {
padding-top: max(var(--hcm-s2), 0px);
padding-bottom: max(var(--hcm-s2), 0px);
}
/* ---------- 4 · Container- & Max-Width-Regeln ---------- */
:where(.wrap) {
padding-left: var(--hcm-pad);
padding-right: var(--hcm-pad);
}
/* Medien nie über Containerbreite hinaus */
:where(main img, main video, main iframe) {
max-width: 100%;
height: auto;
}
/* ---------- 5 · Raster-Utilities (Fundament für P0-2/P0-3/P1) ----------
* .hcm-grid — Spaltenraster gem. Größenklasse (4 Compact / 8 Medium)
* .hcm-grid-2up — visuell getriebene Produktkarten (Sealed/Singles)
* .hcm-grid-1up — spec-getriebene Liste (Zubehör/Specs)
* .hcm-grid-3up — nur Medium sinnvoll (Tablet), Compact fällt auf 2 zurück
*/
.hcm-grid {
display: grid;
grid-template-columns: repeat(var(--hcm-cols), minmax(0, 1fr));
gap: var(--hcm-gap);
}
.hcm-grid-2up {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--hcm-gap);
}
.hcm-grid-1up {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--hcm-gap);
}
.hcm-grid-3up {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--hcm-gap);
}
/* ---------- 6 · Sichtbarkeits-Utilities ---------- */
.hcm-only-desktop { display: none !important; }
/* ---------- 7 · P0-2: Header-Suche + Burger-Navigation ----------
* Elemente werden von custom-mobile.js NUR ≤839px injiziert.
*/
.hcm-searchrow {
display: flex;
gap: var(--hcm-s2);
padding: var(--hcm-s2) var(--hcm-pad) var(--hcm-s3);
/* W4-A (24.07.2026, Chef "ruckelfrei"): eigene Opacity/Visibility-Basis,
* damit der Kompakt-Toggle (11.5) NIE mehr display:none nutzt — dessen
* Flow-Hoehe (68px) blieb sonst konstant im DOM, nur die SICHTBARKEIT
* toggelt jetzt. Siehe Root-Cause-Notiz bei 11.5. */
opacity: 1;
visibility: visible;
transition: opacity 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
.hcm-searchrow { transition: none; }
}
.hcm-searchinput {
flex: 1;
min-width: 0;
height: var(--hcm-tap-primary);
border: 1px solid rgba(12, 30, 42, 0.18);
border-radius: var(--r-pill, 999px);
padding: 0 var(--hcm-s4);
background: #fff;
color: var(--brand-navy, #0c1e2a);
}
.hcm-searchgo {
flex: 0 0 auto;
width: var(--hcm-tap-primary);
height: var(--hcm-tap-primary);
border: 0;
border-radius: 50%;
background: var(--brand-orange, #f08a24);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.hcm-burger {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: var(--hcm-tap);
height: var(--hcm-tap);
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
.hcm-burger span {
display: block;
width: 22px;
height: 2.5px;
border-radius: 2px;
background: var(--brand-navy, #0c1e2a);
}
.hcm-backdrop {
position: fixed;
inset: 0;
background: rgba(12, 30, 42, 0.45);
opacity: 0;
transition: opacity 0.2s var(--ease-out, ease-out);
z-index: 99998;
}
.hcm-backdrop.hcm-in { opacity: 1; }
.hcm-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(86vw, 360px);
/* W4-C (24.07.2026, Chef woertlich "Menue in Weiss"): Light-Mode-Flaeche
* jetzt reines Weiss statt Cream (Brand-Book-Linie "Flaechen weiss, kein
* Beige-Flaechenlook"). Dark-Mode (midnight) bleibt navy — eigener
* [data-theme="midnight"] .hcm-drawer-Override unten UNVERAENDERT, gewinnt
* dort per hoeherer Spezifitaet. */
background: #fff;
z-index: 99999;
transform: translateX(-102%);
transition: transform 0.22s var(--ease-out, ease-out);
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 0 40px rgba(12, 30, 42, 0.25);
font-family: var(--font-body, system-ui, sans-serif);
}
.hcm-drawer.hcm-in { transform: translateX(0); }
.hcm-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--hcm-s3) var(--hcm-s4);
border-bottom: 1px solid rgba(12, 30, 42, 0.12);
font-family: var(--font-display, system-ui, sans-serif);
font-size: 18px;
/* W4-C (24.07.2026, Chef "Menue wird in unserem Orange geschrieben"):
* .hcm-close (das ×) traegt eine EIGENE explizite color-Regel (s.u.) und
* erbt diese Farbe deshalb NICHT — nur der "Menü"-Text
* (ohne eigene Regel) erbt sie und wird dadurch orange, ohne einen neuen
* Selektor zu brauchen. Gilt fuer BEIDE Themes (Chef: "reine Textfarbe
* Orange bleibt unveraendert") — Dark-Override unten auf denselben Wert. */
color: #ef820e;
}
.hcm-close {
width: var(--hcm-tap);
height: var(--hcm-tap);
border: 0;
background: transparent;
font-size: 30px;
line-height: 1;
color: var(--brand-navy, #0c1e2a);
cursor: pointer;
}
.hcm-drawer-list {
list-style: none;
margin: 0;
padding: var(--hcm-s2) 0 var(--hcm-s6);
}
/* W4-C (24.07.2026): Trennlinie leicht angehoben (0.08 -> 0.11), damit die
* Zeilen auf reinem Weiss (vorher Cream) noch spuerbar strukturiert wirken —
* Cream gab von sich aus schon etwas Kontrast, Weiss braucht etwas mehr. */
.hcm-item { border-bottom: 1px solid rgba(12, 30, 42, 0.11); }
.hcm-row { display: flex; align-items: stretch; }
.hcm-link {
flex: 1;
display: flex;
align-items: center;
min-height: var(--hcm-tap-primary);
padding: var(--hcm-s2) var(--hcm-s4);
color: var(--brand-navy, #0c1e2a);
text-decoration: none;
font-weight: 600;
font-size: 16px;
}
/* W4-C (24.07.2026, Chef "Konto/Merkliste ebenfalls in Brand-Orange"): NUR
* der Top-Block (.hcm-drawer-top, s. buildNav) — Kategorien nutzen dieselbe
* .hcm-link-Klasse und bleiben bewusst Navy (Chef: "Kategorien bleiben
* Navy"), 2-Klassen-Selektor schlaegt die 1-Klassen-Basisregel automatisch,
* kein !important noetig. Gilt in BEIDE Themes gleich (s. Dark-Override
* Abschnitt 12 fuer den spezifitaets-gleichgezogenen Gegenpart). */
.hcm-drawer-top .hcm-link { color: #ef820e; }
.hcm-acc {
flex: 0 0 var(--hcm-tap-primary);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--brand-navy, #0c1e2a);
cursor: pointer;
transition: transform 0.18s ease;
}
.hcm-open > .hcm-row .hcm-acc { transform: rotate(180deg); }
.hcm-subnav {
list-style: none;
margin: 0;
padding: 0 0 var(--hcm-s2);
/* W4-C (24.07.2026): war rgba(255,255,255,.55) fuer Kontrast GEGEN Cream —
* auf dem neuen weissen Drawer-Grund waere das jetzt unsichtbar (Weiss auf
* Weiss). Navy-Tint stattdessen, liest sich auf Weiss wie zuvor als
* dezent abgesetztes Akkordeon-Panel. */
background: rgba(12, 30, 42, 0.04);
}
.hcm-sublink {
display: flex;
align-items: center;
min-height: var(--hcm-tap);
padding: var(--hcm-s1) var(--hcm-s6);
color: var(--brand-navy, #0c1e2a);
text-decoration: none;
font-size: 15px;
}
/* Scroll-Lock bei offenem Drawer (nur Mobile-Zone) */
body.hcm-lock { overflow: hidden !important; }
}
@media (min-width: 600px) and (max-width: 839px) {
.hcm-grid-3up {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ============================================================================
* Abschnitt 8 · Etappe A (2026-07-11) — Blocker-Fixes + Startseiten-Dichte
* Grundlage: BESTANDSAUFNAHME 03.07. (E1-E4) + Analyse-Fragen F1-F12 (Empfehlungen)
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 8.1 · E1/1.1: Legacy-Mobil-Menü stilllegen + toter Altbestand (K2) ----
* .hcm-drawer ist kanonisch (Chef-Entscheidung E1, 04.07.). Der Legacy-Burger
* .a-burger lag ohnehin unsichtbar außerhalb des Viewports (r=507 bei 390px). */
.a-burger,
#mobileMenu,
.mobile-menu {
display: none !important;
}
/* ---- 8.2 · K1: kompakter Header — Warenkorb wieder im Viewport ----
* Vorher: .brand(271px) + .act ragten bis x=507; Cart halb unsichtbar.
* Layout U7A: Burger links (JS setzt ihn in .wrap) · Logo mittig ohne
* Subline · Merken + Warenkorb rechts. */
.site-header .wrap {
display: flex;
align-items: center;
gap: var(--hcm-s2);
}
.site-header .brand {
flex: 1 1 auto;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.site-header .brand small { display: none; }
.site-header .brand img { height: 34px; width: auto; }
.site-header .brand .c {
font-size: clamp(15px, 4.6vw, 18px);
white-space: nowrap;
}
.site-header .act {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--hcm-s1);
margin-left: auto;
}
/* Merkliste als kompaktes Icon wieder sichtbar (war ≤1080 komplett weg) */
.site-header .act a[aria-label="Merkliste"] { display: inline-flex !important; }
.site-header .act a[aria-label="Merkliste"] .lbl { display: none; }
/* ---- 8.3 · F3A: USP-Leiste als eine kompakte Snap-Zeile ---- */
#hc-usp .row {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
gap: var(--hcm-s4);
scroll-snap-type: x proximity; /* proximity, nie mandatory (Snap-Gotcha) */
-webkit-overflow-scrolling: touch;
padding-bottom: var(--hcm-s1);
}
#hc-usp .hc-usp-item {
flex: 0 0 auto;
scroll-snap-align: start;
white-space: nowrap;
}
/* ---- 8.4 · F9A/F7A: Platzhalter-Reviews + Demo-"Zuletzt angesehen" aus ----
* Wieder aktivieren, sobald echte Bewertungen/Verlaufsdaten existieren. */
/* NUR Platzhalter-Reviews aus — #hc-foryou ist seit deploy45-68 (frontend, 11.07.)
* "Sammler-Highlights" mit ECHTEN Produkten und bleibt sichtbar! */
#hc-proof {
display: none !important;
}
/* ---- 8.5 · F8A: Themen-Karten 2-up statt Stapel ---- */
#hc-themen .tgrid {
display: grid !important;
/* !important: startseite-v3.css lädt im Body NACH dieser Datei */
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--hcm-s3) !important;
}
/* ---- 8.6 · F12/M9: Community 2-up + Kontrast-Pflichtfix ---- */
#hc-community .cgrid {
display: grid !important;
/* !important: startseite-v3.css lädt im Body NACH dieser Datei */
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--hcm-s3) !important;
}
#hc-community .hc-ccard,
#hc-community .hc-ccard :where(h3, h4, strong, b) {
color: #fff !important;
text-shadow: 0 1px 2px rgba(12, 30, 42, 0.35);
}
/* ---- 8.7 · F5A: "Neu eingetroffen" + Sale als 2-up-Snap-Karussell ---- */
#hc-new .hc-rail,
#hc-sale .hc-rail {
display: flex !important;
gap: var(--hcm-s3) !important;
overflow-x: auto !important;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
#hc-new .hc-rail > *,
#hc-sale .hc-rail > * {
/* 14 · Rail-Peek: 46 % statt 50 % — 8 % der naechsten Kachel sichtbar */
flex: 0 0 calc(46% - var(--hcm-s2)) !important;
width: calc(46% - var(--hcm-s2)) !important;
min-width: 0 !important;
scroll-snap-align: start;
}
}
/* ============================================================================
* Abschnitt 9 · S1-S3 (2026-07-11) — Kategorieseiten: Ansichten + Grid + Select
* Chef-Vorgabe: mobil nur GROSSE Kacheln + LISTE, klein raus, gross = Standard.
* Filter-Off-Canvas kommt aus hawaiicards.css (@<=1100, Rolle frontend) — hier
* bewusst NICHT gedoppelt (Single-Writer). Nur Ergaenzungen in meiner Zone.
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 9.1 · Ansicht "Kleine Kacheln" mobil entfernen ---- */
.view-toggle button[title="Kleine Kacheln"] { display: none !important; }
.view-toggle button {
min-width: 44px !important;
min-height: 44px !important;
}
/* ---- 9.2 · Produkt-Grid: grosse Kacheln = 2-up Compact, Liste 1-spaltig ---- */
main .grid.cols-4,
main .grid.cols-3,
main .grid.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--hcm-s3) !important;
}
main .grid.is-list,
main .grid.list {
grid-template-columns: 1fr !important;
}
/* ---- 9.3 · Filter-Drawer-Reparatur: hawaiicards.css hat das Off-Canvas
* (rechts, translateX(102%)), aber die .open-Regel verliert den Kaskaden-
* Kampf gegen die eigene Basis-Regel — hier nur der Mechanismus, kein Doppel-CSS. */
.pk-sidebar.open { transform: none !important; }
.drawer-backdrop.show {
display: block !important;
position: fixed;
inset: 0;
background: rgba(12, 30, 42, 0.45);
z-index: 209;
}
body:has(.pk-sidebar.open) { overflow: hidden; }
/* ---- 9.5 · Selects: iOS-Zoom-Falle + Tap-Hoehe (shopweit, K3) ---- */
select {
font-size: 16px !important;
min-height: 44px !important;
}
}
@media (min-width: 600px) and (max-width: 839px) {
/* Medium: 2-up (B2-Fix, E1-Sweep 23.07.2026 — Ansichten-Matrix Freigabe 3010/
* 20.07. verlangt Tablet 661-839 = 2 Spalten, war faelschlich 3-up seit 11.07.
* Tatsaechlich entscheidend ist Abschnitt 13.12 (hoehere Spezifitaet per
* ID-Boost) — hier nur fuer Konsistenz mitgezogen, keine eigene Wirkung mehr.) */
main .grid.cols-4,
main .grid.cols-3,
main .grid.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ============================================================================
* Abschnitt 10 · S4+S5 (2026-07-11) — Kategorie-Hero + Startseiten-Hero + Ergonomie
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 10.1 · S4: .cat-hero entschaerfen (war fix 664px + overflow:hidden) ---- */
.cat-hero {
height: auto !important;
min-height: 0 !important;
padding-top: var(--hcm-s5);
padding-bottom: var(--hcm-s5);
}
/* ---- 10.2 · S5: Startseiten-Hero kompakt (F1) ----
* Ziel ~600px statt 815: H1 gedeckelt, CTAs nebeneinander, Pfeile weg
* (Swipe/Dots reichen), Dots mit 44px-Hit-Area. */
.hcm-hero .hcm-h1 { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.05 !important; }
.hcm-hero .hcm-cta {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
gap: var(--hcm-s2) !important;
}
.hcm-hero .hcm-cta .hcm-btn,
.hcm-hero .hcm-cta [class*="btn"] {
width: auto !important;
flex: 0 1 auto !important;
min-width: 0;
}
.hcm-hero .hcm-arrow { display: none !important; }
.hcm-hero .hcm-dots button,
.hcm-hero .hcm-dots > * { min-width: 24px; min-height: 24px; }
/* ---- 10.3 · Ergonomie-Kleinkram (Bestandsaufnahme 2.10/2.12) ---- */
.kf-chip { min-height: 44px !important; }
[style*="top: 90px"], [style*="top: 120px"] { top: 56px !important; }
}
/* ============================================================================
* Abschnitt 11 · Teil 3 (2026-07-11) — Chef-Entscheidungen To-dos 1-6+9
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 11.1 · Cat-Hero kompakt: Grid war 1128px in 664px-Fenster ---- */
/* :not(#_) = ID-Spezifitäts-Konter gegen golive :is(#hc-...)-Fixhöhe 664px */
/* max-height-Klemme: 664px ist NATUERLICHE Hoehe (absolute Karten-Deko),
* keine height-Regel vorhanden -> height:auto war wirkungslos */
/* [ANGEPASST 24.07.2026, E0-B Rollout-Welle] Die max-height:420px-Klemme +
* overflow:hidden klemmten H1/CTAs/.pk-quick/.cat-stats.hc-trust auf 0-41%
* sichtbar auf 13 Seiten (siehe E0B_Hero-Inventur_2026-07-24.md). Root-Cause
* live verifiziert: .cat-hero ist display:flex;align-items:center (golive,
* ungescoped) — bei Inhalt > 420px zentrierte das die H1 weit UEBER den
* sichtbaren Bereich (z.B. /karten-ankauf: -138px bei 390px). Klemme raus =
* echter Stapel-Flow wie Startseiten-Hero (Abschnitt 16): Box waechst exakt
* auf Inhaltshoehe, align-items:center hat dann keinen Effekt mehr (Box=
* Kind-Groesse), KEIN separater align-items-Fix noetig (live bestaetigt auf
* /karten-ankauf, /wunsch-service, /faq). WICHTIG: golive-content.css setzt
* .cat-hero{height/min-height/max-height:664px!important;overflow:hidden
* !important} UNGESCOPED (Z.1701) — reines Entfernen der eigenen max-height/
* overflow-Zeilen reicht NICHT (664px-Restklemme blieb aktiv, live gefunden
* beim Verify nach Deploy). max-height explizit auf none + overflow auf
* visible kontern, damit die :not(#_)-Spezifitaet wirklich greift. */
.cat-hero:not(#_) {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
.cat-hero:not(#_) .cat-hero-grid {
display: flex !important;
flex-direction: column !important;
gap: var(--hcm-s3);
height: auto !important;
min-height: 0 !important;
}
.cat-hero:not(#_) .card-side {
width: min(46vw, 170px) !important;
height: auto !important;
aspect-ratio: 266 / 330;
}
/* ---- 11.2 · SEO-Texte: 4-Zeilen-Clamp (JS setzt Klasse + Mehr-lesen) ---- */
.hcm-textclamp {
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hcm-morebtn {
min-height: 44px;
background: none;
border: 0;
color: var(--brand-orange, #f08a24);
font-weight: 600;
padding: 2px 0;
cursor: pointer;
}
/* ---- 11.3 · FAQ: 48px-Zeilen (JS klappt alle details zu) ---- */
main details summary {
min-height: 48px;
display: flex;
align-items: center;
cursor: pointer;
}
/* ---- 11.4 · Footer-Akkordeon ---- */
.site-footer .hcm-footacc h5 {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
margin: 0;
}
.site-footer .hcm-footacc h5::after { content: "\25BE"; opacity: 0.6; }
.site-footer .hcm-footacc.hcm-open h5::after { content: "\25B4"; }
.site-footer .hcm-footacc > *:not(h5) { display: none; }
.site-footer .hcm-footacc.hcm-open > *:not(h5) { display: block; }
/* ---- 11.5 · Sticky-Header kompakt ab 600px Scroll (JS toggelt hcm-compact) ----
* W4-A (24.07.2026, Chef "ruckelfrei", Verhalten KOMPAKT behalten): FIX statt
* display:none. ROOT CAUSE (live gemessen @390: header 152px -> 84px, body-
* scrollHeight -68px in derselben Millisekunde): .hcm-searchrow stand in
* normalem Fluss NACH .wrap (kein position:sticky/fixed-Sonderfall) — ihr
* display:none entfernte die vollen 68px (48px Tap-Primary-Input + 8+12px
* Padding) aus der Boxhoehe von .site-header, wodurch der GESAMTE Dokument-
* fluss darunter augenblicklich um 68px nach oben sprang (klassischer
* Reflow-Jank, kein Animations-/Perf-Problem). Fix: Suchzeile bleibt PHYSISCH
* im Fluss (nimmt ihre 68px immer ein, ob kompakt oder nicht) und wird nur
* noch UNSICHTBAR geschaltet (opacity+visibility, Basis in Abschnitt 7) —
* .site-header's eigene Boxhoehe aendert sich dadurch nie (live verifiziert:
* 152px konstant in beiden Zuständen, 0px bodyScrollHeight-Differenz, siehe
* Rueckgabetext). Trade-off (dokumentiert, Chef-Prioritaet "ruckelfrei" >
* Platz-Rueckgewinn): der Sticky-Header bleibt beim Scrollen durchgehend
* 152px hoch (reserviert weiterhin den Suchzeilen-Platz), gibt also KEINEN
* zusaetzlichen Bildschirmplatz mehr frei — nur die OPTIK (Logo 26px,
* Suchzeile weg) aendert sich noch, exakt wie abgenommen. .brand img-Groesse
* war schon vorher unschaedlich (wrap-Zeile bleibt bei 84px, dominiert von
* Padding/Tap-Targets, nicht vom Logo — live bestaetigt, keine Aenderung
* hier noetig). */
.hcm-compact .site-header .hcm-searchrow {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.hcm-compact .site-header .brand img { height: 26px; }
/* ---- 11.6 · Hero-Ruhe: Holo-Glitzer aus · M2: zweites Band + Desktop-Copy aus ---- */
.hcm-hero .hcm-holo,
.hcm-hero .hcm-holo::before,
.hcm-hero .hcm-holo::after {
animation: none !important;
transition: none !important;
will-change: auto !important;
}
#hc-cats .tmk-band.rev { display: none !important; }
#hc-cats .listdesc { display: none !important; }
}
/* Gegenstück außerhalb der Mobile-Zone: mobile-only-Elemente auf Desktop aus.
* (Einzige Regel ≥840px in dieser Datei — definiert nur das Verhalten der
* hcm-eigenen Utility-Klasse, fasst keine Desktop-Styles an.) */
@media (min-width: 840px) {
.hcm-only-mobile { display: none !important; }
}
/* ============================================================================
* Abschnitt 12 · Dark-Mode (data-theme="midnight") fuer hcm-Komponenten
* Befund 11./12.07.: Drawer blieb cream, Burger-Striche unsichtbar, Such-Input
* hart weiss. Palette: Navy #101d2b · Cream-Text #f2ede0 · Orange #ffa64d.
* ========================================================================== */
@media (max-width: 839px) {
/* W4-C (24.07.2026): Drawer-Flaeche bleibt hier bewusst NAVY (Chef-Pflicht
* "Dark-Mode nicht weiss machen") — Abschnitt 6's neue #fff-Regel gilt nur
* im Default/Light-Theme ("reef"), diese hoehere Spezifitaet ([data-theme]
* + .hcm-drawer) gewinnt unveraendert weiter. */
[data-theme="midnight"] .hcm-drawer { background: #101d2b; color: #f2ede0; }
/* "Menü"-Titel bleibt Orange (erbt von hier, s. Abschnitt 6-Kommentar) —
* Chef: "reine Textfarbe Orange bleibt unveraendert", nur der Border passt
* sich der dunklen Flaeche an. */
[data-theme="midnight"] .hcm-drawer-head {
color: #ef820e;
border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="midnight"] .hcm-close { color: #f2ede0; }
[data-theme="midnight"] .hcm-drawer .hcm-link,
[data-theme="midnight"] .hcm-drawer .hcm-sublink,
[data-theme="midnight"] .hcm-drawer .hcm-acc { color: #f2ede0; }
/* Konto/Merkliste bleiben Orange auch im Dark-Mode (4 Klassen-Ebenen inkl.
* Attribut-Selektor schlaegt zuverlaessig die 3-Ebenen-Regel direkt darueber,
* die sonst mit gleicher [data-theme]-Spezifitaet gewinnen wuerde). */
[data-theme="midnight"] .hcm-drawer .hcm-drawer-top .hcm-link { color: #ef820e; }
[data-theme="midnight"] .hcm-drawer .hcm-row { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="midnight"] .hcm-subnav { background: rgba(255, 255, 255, 0.05); }
[data-theme="midnight"] .hcm-searchinput {
background: rgba(255, 255, 255, 0.08);
color: #f2ede0;
border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="midnight"] .hcm-searchinput::placeholder { color: rgba(242, 237, 224, 0.55); }
[data-theme="midnight"] .hcm-burger span { background: #f2ede0; }
[data-theme="midnight"] .active-chips > * {
background: #16273a;
color: #f2ede0;
border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="midnight"] .hcm-morebtn { color: #ffa64d; }
[data-theme="midnight"] .hcm-shipbar { background: rgba(255, 255, 255, 0.06); color: #f2ede0; }
}
/* ============================================================================
* Abschnitt 13 · Systemcheck-Fixes (12.07.) — siehe SYSTEMCHECK_Mobile_2026-07-12.md
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 13.1 · P0-3: pk-Sidebar/Filter-Drawer deterministische Endlage.
* transition:none — CSSTransition kann in Hintergrund-Tabs am Startwert
* einfrieren (Loesungsbuch-Gotcha); Panel steht damit SOFORT bei right:0. */
.pk-sidebar.open {
transform: none !important;
transition: none !important;
right: 0 !important;
left: auto !important;
width: min(86vw, 360px) !important;
overflow-x: hidden !important;
}
/* ---- 13.1b · Filter-Oeffner-Button (JS: pkFilterOpener, pk-Seiten ohne Engine-Button) ---- */
.hcm-filterbtn {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 0 16px;
border: 1.5px solid rgba(12, 30, 42, 0.22);
border-radius: 999px;
background: #fff;
color: var(--brand-navy, #0c1e2a);
font: 600 14px/1 var(--font-body, system-ui, sans-serif);
cursor: pointer;
margin-right: 8px;
}
[data-theme="midnight"] .hcm-filterbtn {
background: #16273a;
color: #f2ede0;
border-color: rgba(255, 255, 255, 0.2);
}
/* ---- 13.7 · P1-5: Community-Icons — currentColor lief mobil auf weiss ---- */
#hc-community .ic { color: #0c1e2a !important; }
/* ---- 13.8 · P2-1: Wisch-Zeilen ohne sichtbare (Windows-)Scrollbar ---- */
#hc-usp .row,
.nav-tabs,
[role="tablist"] { scrollbar-width: none; }
#hc-usp .row::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar,
[role="tablist"]::-webkit-scrollbar { display: none; }
/* ---- 13.14 · P2-8: NOVA-Suchergebnis (/?qs=) — Seitenrand + Toolbar-Luft ---- */
#result-wrapper {
padding-left: var(--hcm-pad) !important;
padding-right: var(--hcm-pad) !important;
}
/* ---- 13.15 · P2-9: /shop — Franchise-Pills + Filter-Tap-Groessen ---- */
main .cat-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
main .cat-pills > a {
display: inline-flex !important;
align-items: center !important;
min-height: 40px !important;
padding: 0 14px !important;
border: 1.5px solid rgba(12, 30, 42, 0.2) !important;
border-radius: 999px !important;
text-decoration: none !important;
}
main label.fopt {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 44px !important;
}
main label.fopt input[type="checkbox"] {
width: 22px !important;
height: 22px !important;
flex: 0 0 auto !important;
}
/* ---- 13.17 · Nacht-Loop R1 (12.07.): 5 Klein-Fixes aus dem Voll-Re-Check ---- */
/* R1-1: gunpla-Kacheln — Meta-Badges (.lang/.lg, 1/144 usw.) liefen 32px aus
* der Kachel (seit overflow:hidden = abgeschnittene Chips) -> umbrechen */
a.prod .hc-cathead { flex-wrap: wrap !important; row-gap: 2px !important; }
a.prod .hc-cathead .meta-row {
max-width: 100% !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
/* R1-2: /pre-order "Preis folgt" brach 2-zeilig (78px) */
.po-drop .price {
white-space: nowrap !important;
font-size: clamp(20px, 6vw, 26px) !important;
}
/* R1-3: Breadcrumb-Links (.nav-link u.a.) nur 20px hoch -> Tap-Flaeche
* per Padding-Trick vergroessern, Optik unveraendert */
main .breadcrumb a,
main nav[aria-label*="readcrumb" i] a,
main .crumb a,
main .nav-link {
position: relative;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-top: -10px !important;
margin-bottom: -10px !important;
}
/* R1-4: PDP — leeres 360px-img (ohne src, kein lazy-data) im #product-offer
* frass eine ganze Bildflaeche */
#product-offer img:not([src]),
#product-offer img[src=""] { display: none !important; }
/* R2-2: Topmarken-Panel — 18px-Pfeil-Kreise (a.all): unsichtbare ::after-
* Hitarea auf ~44px (width:18 + border-box klemmen echte Box; Kreis-Optik
* darf nicht wachsen) */
#tmk a.all, #hc-cats a.all, #hc-tmk a.all {
position: relative !important;
}
#tmk a.all::after, #hc-cats a.all::after, #hc-tmk a.all::after {
content: "";
position: absolute;
inset: -11px;
}
/* R1-5: Pagination (.pager) 21px-Ziffern -> 40px-Taps */
.pager a, .pager span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
min-height: 40px !important;
}
/* ---- 13.16 · P2-6: PDP-Thumbnails — eine Wisch-Reihe statt Umbruch ---- */
.hc-gal .hc-thumbs {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.hc-gal .hc-thumbs::-webkit-scrollbar { display: none; }
.hc-gal .hc-thumbs > * { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (max-width: 599px) {
/* ---- 13.2 · Kachel-Fusszeile = VARIANTE B (Brand-Book-Freigabe 3010, 20.07.2026
* — nachgezogen im E1-Sweep-Fix 23.07.2026; lief bis dahin faelschlich in der am
* 20.07. VERWORFENEN gestapelten Alternative, siehe Report-Fund A3/B3).
* Struktur: a.prod > .pb > .rowend > div>span.price + span.add (Warenkorb) bzw.
* button.hc-ask-btn (ausverkauft). Preis + Warenkorb-Kreis NEBENEINANDER.
* Rechnung Brand Book §3.4: 96px(Preis) + 8(gap) + 36(Kreis) = 140px <= 141px
* Kachel-Innenbreite. Gilt fuer Grids UND Startseiten-Rails (gleiche Kachel). */
a.prod { overflow: hidden !important; }
a.prod .rowend {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
/* Preis 19px: derselbe :is(#hc-xx,...)-Selektor wie golive-content.css (dort
* unconditional bei 30px/line-height:42px) — ohne den Spiegel-Selektor verliert
* jede reine Klassen-Regel gegen die ID-Liste (Report-Fund A2: ID schlaegt Klasse
* immer, unabhaengig von der Ladereihenfolge). line-height statt top-Offset,
* weil DIESE Kachel-Variante (plain .prod, kein .card) ihre H11-Zentrierung
* ueber line-height=Button-Hoehe loest, nicht ueber position:relative;top
* (das ist die Technik der anderen HC-KACHEL-V1/.prod.card-Variante). */
:is(#hc-op, #hc-pk, #hc-gt, #hc-gp, #hc-mk, #hc-mtg, #hc-ygo, #hc-swu, #hc-dbs,
#hc-fab, #hc-nrk, #hc-ws, #hc-cp, #hc-dg, #hc-sgl, #hc-slv, #hc-dbx, #hc-rft,
#hc-clb) .prod .pb .price {
font-size: 19px !important;
line-height: 36px !important;
}
/* Pflicht-Guards (Brand Book §3.4): Preis darf nie umbrechen. */
a.prod .rowend .price {
white-space: nowrap !important;
flex: 0 0 auto !important;
}
/* Warenkorb-Kreis 36px (vorher gar nicht mobil uebersteuert -> blieb bei 42px) */
a.prod .rowend .add,
a.prod .add {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
flex: 0 0 auto !important;
}
a.prod .rowend .add svg,
a.prod .add svg {
width: 18px !important;
height: 18px !important;
}
/* "Anfragen" -> 36px-Icon-Kreis (Marcel-Entscheidung Brand Book §3.4: Text-Pill
* 76px wuerde neben dem Preis kollidieren). Text bleibt im aria-label fuer
* Screenreader (custom.js setzt bereits "Bestellanfrage ueber das
* Kontaktformular senden" — kein Eingriff in custom.js noetig). */
a.prod .rowend .hc-ask-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
font-size: 0 !important;
line-height: 1 !important;
}
a.prod .rowend .hc-ask-btn::before {
content: "\2709";
font-size: 16px !important;
line-height: 1 !important;
}
/* ---- 13.3 · P1-2: Liste-Ansicht kompakt (Bild 104px, Text darf schrumpfen) ---- */
main .grid.is-list a.prod {
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
}
main .grid.is-list a.prod .pim {
flex: 0 0 104px !important;
width: 104px !important;
min-width: 104px !important;
}
main .grid.is-list a.prod .pb { min-width: 0 !important; flex: 1 1 auto !important; }
main .grid.is-list a.prod .nm {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden !important;
}
/* ---- 13.4 · P1-3: Hero-Deko-Karten aus (Marcel-Entscheid F-A: ganz weg) ---- */
.cat-hero .card-side { display: none !important; }
/* ---- 13.5 · P1-4: #hc-brands Rondell -> 2-up-Kachel-Grid (Entscheid F-B).
* Desktop-Hover-Akkordeon kollabierte <600 auf 74px, .reveal lief als
* Geister-Text heraus. Mobil: jede Kachel 150px, Bild + Name + Pfeil. */
#hc-brands .bacc {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
/* startseite-v3.css (@<=560) setzt feste 74px-Zeilen -> Items koennen nicht
* wachsen. Rows freigeben, jede Zeile 150px: */
grid-template-rows: none !important;
grid-auto-rows: 150px !important;
gap: 10px !important;
height: auto !important;
}
#hc-brands .bacc .bpanel {
height: 150px !important;
width: auto !important;
flex: none !important;
border-radius: 16px !important;
overflow: hidden !important;
position: relative !important;
}
#hc-brands .bpanel .bg { opacity: 1 !important; }
#hc-brands .bpanel .vlabel,
#hc-brands .bpanel .sw,
#hc-brands .bpanel .pub,
#hc-brands .bpanel .desc { display: none !important; }
#hc-brands .bpanel .reveal {
opacity: 1 !important;
transform: none !important;
position: absolute !important;
inset: auto 0 0 0 !important;
width: auto !important;
height: auto !important;
padding: 24px 12px 10px !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
background: linear-gradient(180deg, transparent, rgba(10, 16, 26, 0.82)) !important;
}
#hc-brands .bpanel .reveal b { color: #fff !important; font-size: 15px !important; }
#hc-brands .bpanel .reveal .go { color: #ffa64d !important; font-size: 13px !important; }
/* ---- 13.6 · P1-6: /pre-order Most-wanted-Karten einspaltig ---- */
.po-drop { grid-template-columns: 1fr !important; }
.po-drop .po-drop-art { max-width: 200px; margin: 0 auto; }
.po-drop .po-drop-body { min-width: 0 !important; }
.po-drop .po-drop-body a,
.po-drop .po-drop-body button {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
white-space: normal !important;
}
/* ---- 13.9 · P2-2: Topmarken (#hc-cats) Chips + Panel-Kopf ---- */
#hc-cats .btab { overflow: hidden !important; }
#hc-cats .btab .logo { flex: 0 0 auto !important; max-width: 72px !important; }
#hc-cats .btab .meta {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#hc-cats .phead {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
}
#hc-cats .phead img {
position: static !important;
height: 34px !important;
width: auto !important;
max-width: 120px !important;
}
#hc-cats .phead > * { min-width: 0; }
/* ---- 13.10 · P2-4: Footer-Akkordeon — Luecken straffen ---- */
.site-footer .foot-grid { gap: 14px !important; }
/* ---- 13.11 · P2-5: Themen/Beratung — 3. Karte volle Breite, Schatten weg ---- */
#hc-themen .tgrid > *:nth-child(3):last-child { grid-column: 1 / -1; }
#hc-themen .tgrid * { text-shadow: none !important; }
}
@media (min-width: 600px) and (max-width: 839px) {
/* ---- 13.12 · P1-7a→B2-Fix (E1-Sweep 23.07.2026): Medium 2-up — Spezifitaets-Booster.
* Engine-Regeln sind auf #hc-XX-IDs gescoped und schlagen main .grid (ID > Klasse).
* :is(#hcm-x, [id]) erbt ID-Spezifitaet fuer JEDEN [id]-Match — gewinnt sauber.
* War faelschlich repeat(3) seit 11.07. — Ansichten-Matrix (Freigabe 3010, 20.07.)
* verlangt Tablet 661-839 = 2 Spalten, nicht 3. Report-Fund B2. */
main :is(#hcm-x, [id]) .grid.cols-4,
main :is(#hcm-x, [id]) .grid.cols-3,
main :is(#hcm-x, [id]) .grid.cols-2,
main .grid.cols-4,
main .grid.cols-3,
main .grid.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
main :is(#hcm-x, [id]) .grid.is-list,
main .grid.is-list { grid-template-columns: 1fr !important; }
/* ---- 13.13 · P1-7b: H-Scroll-Klemmen (Uebeltaeter 12.07.: .hcm-cluster/.hcm-frame
* (Desktop-Hero, frontend) + Topbar-Inhalte liefen bis 819/880px) ---- */
.hcm-frame, .hcm-cluster { max-width: 100% !important; }
#utilbar { overflow: hidden !important; }
#utilbar .wrap { flex-wrap: wrap; row-gap: 2px; }
}
/* ============================================================================
* Abschnitt 14 · Conversion-Paket (12.07., Welle 4) — Badge, Shipbar, Suggest,
* Touch, Safe-Area, Back-to-top, Skeleton, Perf. JS: custom-mobile.js v3.
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 14.1 · Warenkorb-Badge (Punkt am Cart-Icon, JS setzt/entfernt) ---- */
.hcm-cartbadge {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
background: #d9435f;
color: #fff;
font: 700 11px/18px system-ui, sans-serif;
text-align: center;
pointer-events: none;
box-shadow: 0 0 0 2px #fff;
}
[data-theme="midnight"] .hcm-cartbadge { box-shadow: 0 0 0 2px #101d2b; }
/* ---- 14.2 · Gratis-Versand-Balken im Drawer ---- */
.hcm-shipbar {
margin: var(--hcm-s3) var(--hcm-s4) var(--hcm-s5);
padding: var(--hcm-s3);
border-radius: 12px;
background: rgba(12, 30, 42, 0.06);
font: 500 13px/1.45 var(--font-body, system-ui, sans-serif);
color: var(--brand-navy, #0c1e2a);
}
.hcm-shipbar-track {
height: 8px;
border-radius: 4px;
background: rgba(12, 30, 42, 0.12);
overflow: hidden;
margin-top: 6px;
}
.hcm-shipbar-fill {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #ef820e, #ffa64d);
transition: width 0.3s ease-out;
}
/* ---- 14.3 · Such-Autocomplete (Kategorien + Marken, clientseitig) ---- */
.hcm-suggest {
position: absolute;
left: var(--hcm-pad);
right: var(--hcm-pad);
top: 100%;
margin: 0;
padding: 4px 0;
list-style: none;
background: #fff;
border-radius: 0 0 14px 14px;
box-shadow: 0 14px 30px rgba(12, 30, 42, 0.18);
z-index: 120;
max-height: 292px;
overflow-y: auto;
}
.hcm-suggest:empty { display: none; }
.hcm-suggest a {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 14px;
color: var(--brand-navy, #0c1e2a);
text-decoration: none;
font: 500 15px/1.2 var(--font-body, system-ui, sans-serif);
}
.hcm-suggest a small { color: rgba(12, 30, 42, 0.55); font-size: 12px; }
[data-theme="midnight"] .hcm-suggest { background: #16273a; }
[data-theme="midnight"] .hcm-suggest a { color: #f2ede0; }
[data-theme="midnight"] .hcm-suggest a small { color: rgba(242, 237, 224, 0.55); }
/* ---- 14.4 · Touch-Feedback (nur echte Touch-Geraete, reduced-motion-sicher) ---- */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
a.prod:active,
.hcm-btn:active,
.btn:active,
.a-btn:active { transform: scale(0.97); transition: transform 0.12s ease-out; }
}
/* ---- 14.5 · Safe-Area (iPhone Notch / Home-Bar) ---- */
.hcm-drawer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.pk-sidebar.open { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
/* ---- 14.6 · Back-to-top (dezenter Kreis unten rechts, JS toggelt .hcm-show) ---- */
.hcm-b2t {
position: fixed;
right: 14px;
bottom: calc(18px + env(safe-area-inset-bottom, 0px));
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.94);
color: var(--brand-navy, #0c1e2a);
box-shadow: 0 6px 18px rgba(12, 30, 42, 0.22);
display: grid;
place-items: center;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
z-index: 220;
cursor: pointer;
}
.hcm-b2t.hcm-show { opacity: 1; visibility: visible; transform: none; }
.hcm-b2t.hcm-fabshift { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
[data-theme="midnight"] .hcm-b2t { background: rgba(22, 39, 58, 0.96); color: #f2ede0; }
/* ---- 14.7 · Skeleton-Shimmer bis Bild geladen (JS setzt .hcm-skel) ---- */
.hcm-skel {
background: linear-gradient(110deg, rgba(12, 30, 42, 0.06) 8%, rgba(12, 30, 42, 0.12) 18%, rgba(12, 30, 42, 0.06) 33%);
background-size: 200% 100%;
animation: hcm-shimmer 1.2s linear infinite;
border-radius: 10px;
}
@keyframes hcm-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
.hcm-skel { animation: none; }
}
/* ---- 14.8 · Perf: Below-fold-Module erst rendern, wenn noetig ---- */
#hc-brands,
#hc-community,
.site-footer .foot-grid {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
/* =====================================================================
* 15 · TOPMARKEN-MODUL — Marcels Variante C "Marken-Raster mit Aufklapp"
* (Chef-Entscheid 25.07.2026; loest die Tab-Variante A vom 13.07. ab).
*
* Desktop bleibt unangetastet: zwei Baender, Hover waehlt das Panel.
* Mobil baut JS (tmkAccordion) aus den acht .btab ein 2-spaltiges
* Marken-Raster. Beim Antippen wandert das ORIGINAL-Panel der Marke in
* ein Aufklapp-Feld hinter ihre Rasterzeile — Akkordeon, immer nur eines
* offen, erneutes Tippen schliesst. Startzustand: alles zu.
*
* Warum verschieben statt nachbauen: die Panels tragen die echten
* Produktkacheln samt Merken-Herz, Warenkorb-Knopf und Links. Als
* dieselben Knoten funktionieren sie weiter; ein Nachbau wuerde sie
* stillschweigend tot machen.
*
* Alle Regeln haengen an .hcm-acc bzw. .hcm-b* — die JS erst setzt.
* Faellt das JS aus, bleibt schlicht das alte Layout stehen statt einer
* leeren Sektion (gleicher Schutz wie zuvor bei .hcm-tmk).
* Gemessen @390: zugeklappt ~708px, mit einer offenen Marke ~1.218px
* (vorher 1.407px, dabei nur 2 von 8 Marken und 2 von 4 Produkten).
* ===================================================================== */
#tmk.hcm-acc .tmk-band { display: none !important; }
#hc-cats.hcm-acc-on .sec-head .lead { display: none !important; }
.hcm-blead {
font-size: 14px;
line-height: 1.5;
color: #4d6470;
margin: 6px 0 0;
}
[data-theme="midnight"] .hcm-blead { color: rgba(255, 255, 255, 0.72); }
.hcm-bgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Marken-Kachel: Logo, Name, Produktzahl, Chevron; Markenfarbe als
* schmaler Streifen links (--c kommt vom Original-Reiter) */
.hcm-btile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 104px;
padding: 12px 10px;
margin: 0;
border: 1px solid rgba(12, 30, 42, 0.10);
border-radius: 16px;
background: #fff;
color: #0c1e2a;
font: inherit;
text-align: center;
cursor: pointer;
overflow: hidden;
-webkit-appearance: none;
appearance: none;
transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.hcm-btile::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--c, #ef820e);
opacity: 0.85;
}
.hcm-btile.is-open {
border-color: var(--c, #ef820e);
box-shadow: inset 0 0 0 2px var(--c, #ef820e);
background: #fbf8f0;
}
.hcm-bt-logo {
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.hcm-bt-logo img {
max-height: 32px;
max-width: 104px;
width: auto;
object-fit: contain;
}
.hcm-bt-nm {
font-size: 12.5px;
font-weight: 700;
line-height: 1.15;
}
/* Marken ohne Bild-Logo (The Army Painter): der Name ist das Logo */
.hcm-bt-word {
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
line-height: 1.15;
}
.hcm-bt-cnt {
font-size: 10.5px;
color: #4d6470;
display: flex;
align-items: center;
gap: 5px;
}
.hcm-bt-chev { transition: transform 0.25s ease; }
.hcm-btile.is-open .hcm-bt-chev { transform: rotate(180deg); }
/* Aufklapp-Feld: volle Rasterbreite, sitzt hinter der Zeile der Marke.
* BEWUSST OHNE eigene Flaeche (Chef-Fund 25.07.: "doppelter Hintergrund"):
* das Panel bringt seinen weissen Grund, den Radius und die markenfarbige
* Oberkante bereits selbst mit. Ein zweiter Kasten drumherum sah aus wie
* zwei ineinandergeschachtelte Karten. Hier bleibt nur die Rasterbreite
* und das Aufklappen — die Optik macht das Panel. Spart nebenbei 43px. */
.hcm-bslot {
grid-column: 1 / -1;
background: none;
border: 0;
border-radius: 0;
padding: 0;
animation: hcmBOpen 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes hcmBOpen {
from { opacity: 0; transform: translateY(-7px); }
to { opacity: 1; transform: none; }
}
.hcm-bslot .panel {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 14px 13px !important; /* Desktop-Polster 20/22 ist mobil zu satt */
}
/* MARKEN-LEISTE als Kopfzeile des Aufklapp-Feldes.
* Inhalt: Marken-Logo · Markenname · "Alle"-Knopf. Sie sitzt oben im Feld
* und scrollt mit den Artikeln mit — Chef-Abnahme 25.07. an der Demo
* `Mobile-Frontend/DEMO_Top-Marken-Aufklapp_W7.html` ("genauso").
*
* NICHT klebend: eine Variante, in der die Leiste unter der Kopfleiste
* haengenbleibt, war gebaut und lag in derselben Demo als Schalter daneben —
* Marcel hat die ruhige Fassung gewaehlt. Falls das je zurueckkommt, reichen
* drei Zeilen hier: position:sticky + top:132px + z-index:20 (132px = Unter-
* kante der Kopfleiste, seit W6 konstant; z-index unter deren 50 bleiben).
*
* Der Kicker "TOPMARKE" und der Untertitel fliegen raus — der Markenname
* steht schon auf der Kachel darueber, mehr braucht die Zeile nicht.
* Die negativen Raender heben das Panel-Polster auf, damit die Leiste
* randlos ueber die volle Panel-Breite laeuft.
* min-height:0 ist Pflicht — das Modul reserviert hier 66px fuer das
* Logo-Rund (gleiche Falle wie W5-Set-Logo und W6-Toggle: ein geerbtes
* min-height schlaegt jede Hoehenangabe). */
#hc-cats .hcm-bslot .phead {
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
min-height: 0 !important;
margin: -14px -13px 12px !important;
padding: 9px 13px !important;
background: #fff;
border-bottom: 1px solid rgba(12, 30, 42, 0.08);
border-radius: 16px 16px 0 0;
}
[data-theme="midnight"] #hc-cats .hcm-bslot .phead {
background: #0e1a24;
border-bottom-color: rgba(255, 255, 255, 0.12);
}
/* Kicker + Untertitel raus, Markenname bleibt als Kennung in der Leiste */
.hcm-bslot .phead .ptitle > .k,
#hc-cats .hcm-bslot .phead .ptitle > .sub { display: none !important; }
#hc-cats .hcm-bslot .phead .ptitle > h3 {
display: block !important;
font-size: 14px !important;
line-height: 1.2 !important;
margin: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Das Logo ist im Modul absolut positioniert UND per transform zentriert —
* beides muss weg, sonst ignoriert es die Flex-Reihenfolge und haengt um
* seine halbe Groesse verschoben links aus der Leiste heraus (Fund 25.07.). */
#hc-cats .hcm-bslot .phead .logo {
display: flex !important;
align-items: center;
order: -1 !important;
position: static !important;
transform: none !important;
inset: auto !important;
margin: 0 !important;
height: 24px;
flex: 0 0 auto;
}
#hc-cats .hcm-bslot .phead .logo img {
max-height: 24px !important;
max-width: 64px !important;
width: auto !important;
}
#hc-cats .hcm-bslot .phead .ptitle { flex: 1 1 auto; min-width: 0; }
#hc-cats .hcm-bslot .phead a.all { flex: 0 0 auto; margin-left: auto; }
/* Der "Alle "-Link ist im Modul ein 18px-Kreis: seine Beschriftung
* (.t) ist ausgeblendet und der Pfeil auf 0x0 zusammengefallen — im
* Aufklapp-Feld sieht das aus wie ein leerer Kreis (Fund Trockenlauf
* 25.07.). Hier bekommt er Beschriftung, Pfeil und ein echtes Tap-Ziel.
* Die unsichtbare ::after-Trefferflaeche aus R2-2 bleibt zusaetzlich. */
.hcm-bslot .phead a.all {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin-left: auto;
width: auto !important;
height: auto !important;
min-height: 34px;
padding: 6px 13px !important;
border: 0 !important;
background: none !important;
/* Der zarte Innen-Schatten kommt aus dem Desktop-Stil und bleibt —
* mit Pillenform passt er zur restlichen Bedien-Sprache des Shops */
border-radius: 999px !important;
font-size: 12.5px;
font-weight: 700;
color: var(--c, #ef820e);
white-space: nowrap;
}
/* Beschriftung kurz halten: der Original-Text lautet "Alle " und
* wiederholt damit den Markennamen, der in derselben Leiste direkt daneben
* steht. Zu dritt (Logo + Name + langer Knopf) passt das @360 nicht mehr —
* der Markenname wurde mit Auslassungspunkten abgeschnitten (Fund 25.07.).
* Darum in der Leiste nur "Alle" + Pfeil; die Marke sagt die Leiste selbst. */
.hcm-bslot .phead a.all .t { display: none !important; }
.hcm-bslot .phead a.all::before {
content: "Alle";
font-weight: 700;
font-size: 12.5px;
}
.hcm-bslot .phead a.all svg {
width: 14px !important;
height: 14px !important;
flex: 0 0 14px;
}
/* Alle vier Produkte als 2x2 — die Variante-A-Kappung auf zwei ist weg */
.hcm-bslot .prods {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.hcm-bslot .prods > * { display: flex !important; }
/* Kachel-Trimm im Aufklapp-Feld: die Vollformat-Kachel ist 304px hoch —
* zu zweit nebeneinander und in zwei Reihen sprengt das den Bereich
* (offen waeren es sonst 1.494px, also MEHR als die 1.407px vorher).
* Gemessen 25.07.: Bild 138->96 und straffere Polster/Schriften bringen
* die Kachel auf 245px und den offenen Bereich auf ~1.375px.
* Bewusst NICHT angetastet: das Sprach-Kuerzel (.meta-row). Es haette
* weitere 60px gebracht, ist bei Karten aber ein Kaufkriterium (DE/EN)
* und darf auf der Kachel nicht fehlen. */
.hcm-bslot .prod .pim { height: 96px !important; }
.hcm-bslot .prod .pim img { max-height: 96px !important; }
.hcm-bslot .prod .pb { padding: 9px 9px 10px !important; gap: 5px !important; }
.hcm-bslot .prod .cat { font-size: 9.5px !important; letter-spacing: 1.2px !important; }
.hcm-bslot .prod .nm { font-size: 11.5px !important; line-height: 1.28 !important; }
.hcm-bslot .prod .rowend { padding-top: 8px !important; }
.hcm-bslot .prod .add {
width: 32px !important;
height: 32px !important;
flex: 0 0 32px !important;
}
/* Dark-Mode */
[data-theme="midnight"] .hcm-btile {
background: rgba(255, 255, 255, 0.06);
color: #fff;
border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="midnight"] .hcm-btile.is-open { background: rgba(255, 255, 255, 0.10); }
[data-theme="midnight"] .hcm-bt-cnt { color: rgba(255, 255, 255, 0.66); }
/* Fuer .hcm-bslot braucht der Dark-Mode nichts: das Feld hat keine eigene
* Flaeche mehr, das Panel darin bringt sein Dark-Styling selbst mit. */
}
/* Sicherheitsnetz: Raster und Aufklapp-Feld existieren im DOM auch auf
* Desktop (Resize-Kante) — dort nie anzeigen. Ein geliehenes Panel holt
* das JS beim Wechsel selbst an seinen Platz zurueck. */
@media (min-width: 840px) {
.hcm-bgrid,
.hcm-blead { display: none !important; }
}
/* ============================================================================
* Abschnitt 16 · Chef-Entscheid 23.07.2026 — Startseiten-Hero: Zusatzbilder
* (Karten-/Modell-Deko) mobil AUS. Kollidierten auf iPhones, gestapeltes
* Layout wurde zu lang. Bleibt <=839px: Hintergrund, Eyebrow/H1/Subline,
* CTAs, Dots/Navigation (aktuell keine im Live-DOM — .hcm-frame ist leer,
* nur 1 Slide aktiv). Desktop (>=840px) bleibt PIXELIDENTISCH — .hcm-cluster
* ist Hero-Subtree-Eigentum von frontend (Vertrag §2a), hier nur READ+OVERRIDE
* innerhalb der eigenen Media-Zone, keine Umbenennung/kein Markup-Eingriff.
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 16.1 · Bild-Cluster aus ---- */
.hcm-hero .hcm-cluster { display: none !important; }
/* ---- 16.2 · Hero-Rahmen nachziehen (sonst Leerflaeche/volle Fix-Hoehe) ----
* Live-Befund: ab ~700px (Medium-Bereich innerhalb <=839) setzt frontends
* Basis-CSS .hcm-hero auf eine feste height:clamp(480px,86vh,664px) und
* positioniert .hcm-copy absolut/50%-zentriert NEBEN .hcm-cluster (welches
* mit height:100% die Hoehe traegt). Ohne Cluster bliebe sonst rechts eine
* leere Flaeche UND die volle Fix-Hoehe stehen (kein Auto-Shrink).
* Fix: die GESAMTE Mobile-Zone (<=839, also auch die Medium-Bandbreite)
* auf das schon vorhandene Compact-Stack-Muster (<600px, natuerlicher
* Fluss) zwingen — Hero/Rotator/aktiver Slide/Stage/Copy auf position:static
* + height:auto, damit die Hoehe rein aus dem Text-Inhalt entsteht.
* Kein neuer Hook, nur Overrides bestehender Hero-Subtree-Klassen. */
.hcm-hero { height: auto !important; min-height: 0 !important; }
.hcm-hero .hcm-rotator {
position: static !important;
inset: auto !important;
height: auto !important;
}
.hcm-hero .hcm-slide.is-active {
position: static !important;
inset: auto !important;
display: block !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
.hcm-hero .hcm-stage {
display: flex !important;
flex-direction: column !important;
height: auto !important;
min-height: 0 !important;
}
.hcm-hero .hcm-copy {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
}
}
/* ============================================================================
* Abschnitt 17 · E1-Sweep-Fixes Welle 1 (23.07.2026) — iOS-Auto-Zoom Kauf-Trichter
* (A1), -webkit-Praefixe fuer Drawer-Blur (A5) + Filter-Chip-Touch-Select (A6).
* Quelle: 00_MASTER/_BEREICHE/frontend-mobile/arbeit/E1_Sweep_E3_Precheck_2026-07-23.md
* (Rolle mobile, ausschliesslich mobile-Zone-Befunde — A4 bleibt Frontend-Melde-
* Liste und wird hier NICHT angefasst, siehe custom.js Z. 23904).
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 17.1 · A1: iOS-Auto-Zoom im gesamten Kauf-Trichter. golive-system-pages.css
* setzt .form-control/input[type=..]/select/textarea auf 14.5px (Bootstrap-3-Erbe);
* die alte :where()-Regel in Abschnitt 3 hat Spezifitaet 0 und verliert gegen
* body.hc-xx main .form-control (0,2,2) bzw. input[type=..] (0,2,3). Hier 1:1
* gespiegelte Selektoren mit gleicher/hoeherer Spezifitaet — custom-mobile.css
* laedt NACH golive-system-pages.css, also gewinnt der Tie-Break. */
body.hc-cart main .form-control, body.hc-checkout main .form-control,
body.hc-conf main .form-control, body.hc-acct main .form-control,
body.hc-auth main .form-control, body.hc-wl main .form-control,
body.hc-news main .form-control, body.hc-kontakt main .form-control,
body.hc-cart main input[type="text"], body.hc-checkout main input[type="text"],
body.hc-conf main input[type="text"], body.hc-acct main input[type="text"],
body.hc-auth main input[type="text"], body.hc-wl main input[type="text"],
body.hc-news main input[type="text"], body.hc-kontakt main input[type="text"],
body.hc-cart main input[type="email"], body.hc-checkout main input[type="email"],
body.hc-conf main input[type="email"], body.hc-acct main input[type="email"],
body.hc-auth main input[type="email"], body.hc-wl main input[type="email"],
body.hc-news main input[type="email"], body.hc-kontakt main input[type="email"],
body.hc-cart main input[type="tel"], body.hc-checkout main input[type="tel"],
body.hc-conf main input[type="tel"], body.hc-acct main input[type="tel"],
body.hc-auth main input[type="tel"], body.hc-wl main input[type="tel"],
body.hc-news main input[type="tel"], body.hc-kontakt main input[type="tel"],
body.hc-cart main input[type="password"], body.hc-checkout main input[type="password"],
body.hc-conf main input[type="password"], body.hc-acct main input[type="password"],
body.hc-auth main input[type="password"], body.hc-wl main input[type="password"],
body.hc-news main input[type="password"], body.hc-kontakt main input[type="password"],
body.hc-cart main input[type="number"], body.hc-checkout main input[type="number"],
body.hc-conf main input[type="number"], body.hc-acct main input[type="number"],
body.hc-auth main input[type="number"], body.hc-wl main input[type="number"],
body.hc-news main input[type="number"], body.hc-kontakt main input[type="number"],
body.hc-cart main select, body.hc-checkout main select,
body.hc-conf main select, body.hc-acct main select,
body.hc-auth main select, body.hc-wl main select,
body.hc-news main select, body.hc-kontakt main select,
body.hc-cart main textarea, body.hc-checkout main textarea,
body.hc-conf main textarea, body.hc-acct main textarea,
body.hc-auth main textarea, body.hc-wl main textarea,
body.hc-news main textarea, body.hc-kontakt main textarea {
font-size: 16px !important;
}
/* ---- 17.2 · A5: -webkit-backdrop-filter fuer die Mobile-Filter-Drawer-Backdrops
* (aeltere iOS-Versionen < 18 ignorieren unpraefixtes backdrop-filter komplett).
* Rein additiv (neue Deklaration, keine Spezifitaets-Frage/Ueberschreibung). */
:is(#hc-op, #hc-pk, #hc-gt, #hc-gp, #hc-mk, #hc-mtg, #hc-ygo, #hc-swu, #hc-dbs,
#hc-fab, #hc-nrk, #hc-ws, #hc-cp, #hc-dg, #hc-sgl, #hc-slv, #hc-dbx, #hc-rft,
#hc-clb) .drawer-backdrop {
-webkit-backdrop-filter: blur(2px);
}
:is(#hc-op, #hc-pk, #hc-gt, #hc-gp, #hc-mk, #hc-mtg, #hc-ygo, #hc-swu, #hc-dbs,
#hc-fab, #hc-nrk, #hc-ws, #hc-cp, #hc-dg, #hc-sgl, #hc-slv, #hc-dbx, #hc-rft,
#hc-clb) .drawer-apply {
-webkit-backdrop-filter: blur(10px);
}
/* ---- 17.3 · A6: -webkit-user-select fuer Filter-Chips (langes Antippen konnte
* auf alten iOS-Versionen das native Text-Auswahl-Callout-Menue ausloesen). */
:is(#hc-op, #hc-pk, #hc-gt, #hc-gp, #hc-mk, #hc-mtg, #hc-ygo, #hc-swu, #hc-dbs,
#hc-fab, #hc-nrk, #hc-ws, #hc-cp, #hc-dg, #hc-sgl, #hc-slv, #hc-dbx, #hc-rft,
#hc-clb) .f-pill {
-webkit-user-select: none;
}
}
/* ============================================================================
* Abschnitt 18 · E0-B Rollout-Welle (24.07.2026) — Hero-Klemme sitewide weg
* Quelle: 00_MASTER/_BEREICHE/frontend-mobile/arbeit/E0B_Hero-Inventur_2026-07-24.md
* Basis-Fix ist Abschnitt 11.1 (max-height/overflow-Klemme entfernt) — loest
* laut Inventur 10 von 13 A-Faellen automatisch (7 TCG-Franchise-Seiten +
* Model-Kits + Pre-Order + alle 3 ak-hero-Seiten). pk-quick/.cat-stats.hc-trust
* brauchten KEINE Zusatzregel — werden durch den Stapel-Flow automatisch
* sichtbar+kompakt (live verifiziert /pokemon-tcg @390: 98px/116px, bereits
* display:flex aus golive-content.css geerbt). Dieser Abschnitt ergaenzt nur
* die 3 seitenspezifischen Resthebel + den OP15-H-Scroll-Guard.
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 18.1 · Gunpla-Flaggschiff (#hc-gp) kompakt statt 14-26% sichtbar ----
* .cat-hero-visual traegt sonst eine feste 340px-Wrapper-Hoehe (fuer die
* Kartenfaecher-Duo-Variante gedacht) -> bei Gunpla mit nur 1 Bild bleiben
* sonst 160px Leerraum. height:auto kollabiert den Wrapper korrekt auf das
* (jetzt position:static) Einzelbild. Nur #hc-gp-Scope, NICHT die Duo-
* Variante generell: dort ist .cat-hero-visual mit ABSOLUTE-positionierten
* .card-side-Faechern bewusst 340px hoch — live verifiziert, ein generelles
* height:auto haette dort ein Fan-Card ueber den oberen Rand hinausgeschoben
* (Testprotokoll: pokemon-tcg @768, Karte 2 sonst top alle 8 Logos/4 Reihen wieder vollstaendig da,
* inkl. "+40 weitere Marken" (Reihe 4, vorher 0% sichtbar). */
.mk-hero-visual { height: auto !important; }
/* ---- 18.3 · Sammelkarten (/sammelkarten) Breiten-Bug: NUR die feste
* 696px-Spaltenbreite responsiv machen, Hoehe bewusst NICHT komprimiert
* (funktionale TCG-Auswahl-Navigation, kein reiner Deko-Hero — D2 offen,
* siehe Rueckgabe/Marcel-Frage). min-width:0 auf den Grid-Items ist
* Pflicht: 1fr allein greift nicht, weil Grid-Tracks per Default auf
* minmax(auto,1fr) laufen und "auto" = Content-Min-Breite der Kinder
* (696px) erzwingt (klassische Grid-Falle, live per getComputedStyle-Diff
* verifiziert: grid-template-columns:1fr ohne min-width blieb bei 696px). */
.hc-sk-hgrid { grid-template-columns: 1fr !important; }
.hc-sk-hgrid > * { min-width: 0 !important; }
/* ---- 18.4 · OP15-Landingpage (/op15-adventure-on-kamis-island) H-Scroll-
* Guard, Design unangetastet. 3 unabhaengige Ursachen live isoliert:
* (a) .stickybar + .stormbg sind position:fixed mit width:100vw/inset:0 —
* ihr Containing Block (ICB) maß in der Testumgebung 410px statt der
* tatsaechlichen 390px (window.innerWidth-vs-documentElement.clientWidth
* -Diskrepanz). Fix: body:has(...) bekommt per transform einen neuen
* Containing Block, damit beide Fixed-Elemente gegen den korrekt
* gemessenen Body (390px) rechnen statt gegen die ICB.
* (b) .wrap.story enthaelt Scroll-Reveal-Elemente (.rv-l/.rv-r) mit einer
* Pre-Reveal-transform:translateX(-44px) — vor dem Ins-Bild-Scrollen von
* keinem overflow:hidden-Vorfahren eingefangen. clip auf den Wrapper
* aendert die Animation selbst NICHT (Endzustand bei translateX:0
* unveraendert), faengt nur den Off-Stage-Bleed ein. Nebeneffekt: auch
* auf OP16 vorhanden (gleiche Komponente), dort bereits 0px Overflow —
* Regel dort wirkungslos/harmlos (kein Design-Eingriff).
* (c) .sb-in (Sticky-Bar-Inhalt) lief mit flex-wrap:nowrap bei 342px
* Innenbreite ueber den CTA-Button hinaus -> wrap erlaubt 2. Zeile
* statt Overflow, kein Inhalt verschwindet.
* Ergebnis (live gemessen, Body/HTML overflow-x:clip aus Abschnitt 2 bleibt
* zusaetzlich als Backstop bestehen): @768 773->753px (0px Rest) · @390
* 410->399px (Rest ~9px, vermutlich Test-Tool-Messartefakt s.o. — clip
* verhindert unabhaengig davon jede tatsaechliche Scroll-Geste). */
body:has(.stickybar, .stormbg) { transform: translateZ(0) !important; }
.wrap.story { overflow-x: clip !important; }
.sb-in { flex-wrap: wrap !important; row-gap: 6px !important; }
}
/* ============================================================================
* Abschnitt 19 · E0-B.2 Hero-Kompaktierung (24.07.2026) — dieselben Inhalte,
* aber verdichtet. Abschnitt 18 hat die Klemme sitewide entfernt (0% -> 100%
* sichtbar), aber dadurch wurden die Heroes zu LANG (@390: pokemon-tcg 1073px ·
* karten-ankauf 1134px · wunsch-service 1169px · model-kits 1063px · gunpla
* 963px · faq 1014px · pre-order 889px). Ziel 550-700px, hart <800px — NICHTS
* ausgeblendet, nur geklappt/gewischt/verdichtet (Chef-Prinzip). Live gegen
* https://hawaiicards.de per Browser-Pane validiert (alle 8 Verify-Seiten x
* 360/390/768/834, 0 H-Scroll, 0 Konsolen-Fehler, Desktop @1280 unberuehrt da
* alles in dieser @media-Zone).
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 19.1 · Basis-Bugfix: .cat-hero-grid align-items:center (golive-Erbe)
* blaest ein nowrap+overflow-x:auto-Kind (Wisch-Zeile) auf max-content-Breite
* auf und schiebt die Text-Spalte aus dem Viewport (live gefunden bei diesem
* Umbau: .cat-hero-grid hat KEIN eigenes align-items aus Abschnitt 11.1 --
* geerbtes golive align-items:center wirkt in der jetzt column-Richtung auf
* der Kreuzachse (Breite) statt Hauptachse (Hoehe); ein flex-item ohne
* explizite Breite bekommt dann shrink-to-fit statt 100% -- bei einem tief
* verschachtelten overflow-x:auto-Kind mit nowrap-Inhalt eskaliert das auf
* dessen max-content-Breite, Text-Spalte landete bei left:-175px/w:741px
* ausserhalb des 390px-Viewports, von overflow-x:clip unsichtbar
* abgeschnitten. stretch macht Spalten wieder 100% breit, wie der Stapel-Flow
* es (Abschnitt 11.1) eigentlich vorsah. Ohne diesen Fix waeren 19.4/19.5/
* 19.8/19.10/19.11 unten auf 7+ Seiten unsichtbar/verschoben gerendert. */
.cat-hero:not(#_) .cat-hero-grid { align-items: stretch !important; gap: var(--hcm-s2) !important; }
/* ---- 19.2 · Vertikale Dichte: Hero-Innenabstand von 24px (Abschnitt 10.1)
* auf 16px, damit die Kompaktierung unten nicht durch Fix-Paddings
* aufgefressen wird. */
.cat-hero:not(#_) { padding-top: var(--hcm-s4) !important; padding-bottom: var(--hcm-s4) !important; }
/* ---- 19.3 · Intro-/SEO-Text im Hero: 3-Zeilen statt 4 (Abschnitt 11.2
* clamped bereits generisch ueber main p.lead -- hier gezielt fuer
* Hero-Leads knapper). Toggle-Button aus 11.2 bleibt unveraendert (JS
* entfernt/setzt nur die Klasse hcm-textclamp, keine JS-Aenderung noetig). */
.cat-hero:not(#_) p.lead.hcm-textclamp { -webkit-line-clamp: 3 !important; }
/* ---- 19.4 · .pk-quick-Chips: einzeilige Wisch-Leiste statt mehrzeiligem
* Stapel (Mechanik 2, betrifft alle 7 Franchise-Seiten + Gunpla). Fade-Kante
* rechts als Wisch-Affordanz per mask-image (kein Markup noetig). */
.cat-hero:not(#_) .pk-quick {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
gap: var(--hcm-s3) !important;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.cat-hero:not(#_) .pk-quick::-webkit-scrollbar { display: none; }
.cat-hero:not(#_) .pk-quick button { flex: 0 0 auto !important; white-space: nowrap !important; }
/* ---- 19.5 · .cat-stats.hc-trust-Badges: gleiche Wisch-Mechanik (Mechanik 3;
* 7 Franchise-Seiten + Gunpla + /alle-marken teilen dieselbe Klasse). */
.cat-hero:not(#_) .cat-stats.hc-trust {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
padding: var(--hcm-s3) 0 0 !important;
gap: 18px !important;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.cat-hero:not(#_) .cat-stats.hc-trust::-webkit-scrollbar { display: none; }
.cat-hero:not(#_) .cat-stats.hc-trust .hc-trust-item { flex: 0 0 auto !important; white-space: nowrap !important; }
/* ---- 19.6 · Franchise-Logo (h1 img) moderat verkleinert -- bleibt
* erkennbar (Brand-Vorgabe), nur ein Groessenschritt kleiner. ---- */
.cat-hero:not(#_) h1 img.hc-franchise-logo { width: clamp(140px, 44vw, 190px) !important; height: auto !important; }
/* ---- 19.7 · Groesster Einzelblock (Mechanik 5): Fan-Card-Visual (rotiertes
* Duo/Solo-Kartenbild) auf kompakte Hoehe/Breite. Funktioniert sicher, weil
* .card-main mit left:50%;top:50%;transform:translate(-50%,-50%) rotate(...)
* (hawaiicards.css) UM DIE EIGENE MITTE zentriert rotiert -- prozentual, nicht
* fix-pixelig -- ein kleinerer Container/eine kleinere Karte bleibt sauber
* zentriert statt zu verrutschen (live verifiziert). #hc-gp bewusst
* ausgenommen: eigene, bereits abgenommene 18.1-Regel fuer das flache
* Einzelbild (position:static, width:auto!important dort) -- ein blindes
* height:auto/width-Clamp hier wuerde die 18.1-Klemme (height:180-240px,
* width:auto) ueberschreiben (gleiche Spezifitaet, diese Regel steht spaeter
* im File = wuerde gewinnen) und den bereits gefixten Gunpla-Flaggschiff
* wieder verzerren. hc-lc/hc-dg haben ID-gescopte !important-Ketten in
* golive-content.css (width/height:280px/391px!important) -- eigene,
* gleich starke ID-Selektoren noetig, die als spaeter geladene Regel
* gewinnen (sonst blieben Lorcana/Digimon bei der vollen 391px-Kartenhoehe). */
.cat-hero:not(#_):not(#hc-gp) .cat-hero-visual { height: clamp(150px, 42vw, 210px) !important; }
.cat-hero:not(#_):not(#hc-gp) .holo-card.card-main,
#hc-lc .cat-hero-visual .holo-card.card-main,
#hc-dg .cat-hero-visual .holo-card.card-main {
width: clamp(110px, 30vw, 150px) !important;
max-width: none !important;
height: auto !important;
}
/* ---- 19.8 · ak-hero (/karten-ankauf, /wunsch-service, /faq): CTA-Buttons
* enger, Pills als Wisch-Zeile statt Stapel (Mechanik 2/4). ---- */
.cat-hero.ak-hero .ak-hero-cta { margin-top: var(--hcm-s1) !important; gap: var(--hcm-s3) !important; }
.cat-hero.ak-hero .ak-hero-cta .btn { padding-top: 12px !important; padding-bottom: 12px !important; }
.cat-hero.ak-hero .ak-hero-pills {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
margin-top: var(--hcm-s2) !important;
gap: var(--hcm-s3) !important;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.cat-hero.ak-hero .ak-hero-pills::-webkit-scrollbar { display: none; }
.cat-hero.ak-hero .ak-pill { flex: 0 0 auto !important; white-space: nowrap !important; }
/* ---- 19.9 · /karten-ankauf: .ak-cascade (animierte Fallkarten-Deko, 440px
* fix, 17s-Keyframe-Loop) per transform:scale kompaktiert statt Hoehe direkt
* zu setzen -- Animation/Choreo bleibt intakt (Keyframes laufen unveraendert
* im lokalen Koordinatensystem), nur visuell kleiner. margin-bottom
* kompensiert den sonst leeren Flow-Platz (identisches Referenz-Muster
* bereits in golive-content.css bei #hc-dg .hc-dg-fan). width:100% ist
* PFLICHT: .ak-cascade traegt golive margin:0 auto -- bei align-items:stretch
* (19.1) deaktiviert ein Auto-Margin auf der Kreuzachse per Spezifikation den
* Stretch, die Box kollabierte in Tests sonst auf 0 Breite. */
.cat-hero.ak-hero .ak-cascade {
width: 100% !important;
transform: scale(0.42);
transform-origin: top center;
margin-bottom: -255px !important;
}
/* ---- 19.10 · /faq: Themen-Karten (topic-strip, 5 Karten) als Wisch-Zeile
* statt 1-spaltigem Grid-Stapel (war groesster Einzelblock, 465px). ---- */
.faq-hero .topic-strip {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
grid-template-columns: none !important;
gap: var(--hcm-s2) !important;
margin-top: var(--hcm-s3) !important;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.faq-hero .topic-strip::-webkit-scrollbar { display: none; }
.faq-hero .topic-strip .topic { flex: 0 0 auto !important; width: 160px !important; }
.faq-hero .faq-search { margin-top: var(--hcm-s2) !important; }
.faq-hero .faq-meta { margin-top: var(--hcm-s2) !important; row-gap: 4px !important; }
/* ---- 19.11 · /pre-order: .po-pills (6 Filter-Buttons/Produktkategorie-Tabs)
* als Wisch-Zeile statt Stapel. ---- */
.po-hero .po-pills {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
gap: var(--hcm-s2) !important;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.po-hero .po-pills::-webkit-scrollbar { display: none; }
.po-hero .po-pills button { flex: 0 0 auto !important; white-space: nowrap !important; }
/* ---- 19.12 · /model-kits: .cat-stats (4 Kacheln, kein .hc-trust) Gap
* gestrafft; .hero-brands (6 Marken-Kacheln, aria-hidden="true" = rein
* dekorativ -- gleiche Praezedenz wie 13.4 Hero-Deko-Karten "ganz weg", hier
* bewusst nur verkleinert statt entfernt) per scale kompaktiert. ---- */
.cat-hero:not(#_) .cat-stats:not(.hc-trust) { gap: 10px !important; margin-top: var(--hcm-s1) !important; }
.cat-hero:not(#_) .hero-brands {
transform: scale(0.38);
transform-origin: top center;
margin-bottom: -278px !important;
}
}
/* ============================================================================
* Abschnitt 20 · E3-W2 (24.07.2026) — Ansichten-Mapping shopweit HART durchsetzen
* + Gunpla-Kachel-Fixes (Badge-Overlap/Button-Clipping). Chef-Ansage 24.07.: mobil
* (<=839px) existieren GENAU 3 Ansichten — Standard=2 Kacheln/Reihe, Gross=1
* Kachel/Reihe, Liste=untereinander. 3-up ist Desktop-only, darf <=839 NIE
* auftreten. Live-Beweis: E2_Voll-Audit_2026-07-24.md (iPhone13/S23/Pixel9,
* 360/390/412 identisch reproduziert).
*
* ROOT CAUSE (live verifiziert an golive-content.css?v=20260723m, 24.07.2026):
* golive-content.css traegt ZWEI widerspruechliche Regel-Generationen fuer
* dieselben ID-Grids (#hc-op/#hc-pk/#hc-gt/#hc-gp/#hc-mk/... + #hcSearchList):
* (a) Z.1913f "Ansichten-Standard Pilot" (03.07.2026, STALE — vor der Klassen-
* Umdeutung vom 20.07. — UNGESCOPED, KEINE @media-Klammer, gilt bei JEDER
* Breite) mit !important:
* :is(#hc-op,#hc-pk,...,#hc-gp,#hc-mk,...) .grid.cols-3{repeat(2,1fr)!important}
* :is(...) .grid.cols-4{repeat(3,1fr)!important}
* (b) Z.3344ff "TABLET/PHONE: Spalten (Premium+Suche)" (neuer, INHALTLICH
* KORREKT nach Freigabe 3010/20.07., liegt in @media(max-width:839px)),
* aber OHNE !important:
* :is(...) .grid, :is(...) .grid.cols-4{repeat(2,1fr)}
* :is(...) .grid.cols-3{1fr}
* (b) ist richtig, verliert aber gegen (a): !important entscheidet IMMER vor
* Spezifitaet/Reihenfolge/@media-Scope. Live gemessen an /gunpla + /pokemon-tcg
* @390: "grid cols-4" rendert grid-template-columns:110px 110px 110px (3
* Spalten) exakt wie im E2-Report. #hcSearchList traegt eine DRITTE, noch
* juengere injizierte !important-Kette (@max-width:559px -> 1fr), die die
* Suche faelschlich auf 1 Spalte klemmt statt "wie Standard" (2 Sp.).
* Abschnitt 13.12 (23.07.) hat (a) fuer Tablet 600-839 bereits mit einem
* ":is(#hcm-x,[id])"-Spezifitaets-Booster geschlagen (ID-Treffer via [id] auf
* JEDEM ID-Vorfahren + eigenes "main" gewinnt den Typ-Tiebreak gegen (a)s
* ID+2-Klassen-Selektor). Es fehlte aber: der Booster im Phone-Zweig (<600px,
* hier greift nur die unboosted Regel aus 9.2 -> verliert gegen (a) -> 3-up),
* die Gross-Korrektur auf 1 statt 2 Spalten (Klassen-Umdeutung Brand Book §3.4/
* Ansichten-Matrix 20.07.2026), und #hcSearchList (kein cols-Klassenname noetig,
* "main :is(#hcm-x,[id]) .grid" faengt jeden ID-gescopten Grid-Container generisch
* ab, auch ohne .cols-4/.cols-3).
*
* Dieser Abschnitt ist ab jetzt die alleinige Quelle der Wahrheit fuer die
* Ansichten-Spaltenzahl <=839 (Standard/Gross/Liste gelten laut Matrix fuer
* Phone UND Tablet identisch -> EIN Media-Query statt der bisherigen 599/600-
* Aufteilung in 9.2/13.12 fuer diesen Teil-Aspekt) und deckt jedes ID-gescopte
* Produkt-Grid automatisch ab (Gunpla, alle #hc-XX-TCG/Zubehoer-Seiten, Suche) —
* OHNE Aufzaehlung einzelner IDs, per [id]-Booster zukunftssicher auch fuer
* neue Kategorieseiten. 9.2/13.12 bleiben unveraendert stehen (redundant fuer
* cols-4, werden hier fuer cols-3 durch die hoehere Spezifitaet/spaetere
* Position sauber ueberschrieben — gleiches Muster wie 13.12 es selbst schon
* fuer 9.2 beschreibt).
*
* NEBENEFFEKT (live nachgemessen, KEINE Extra-Regel fuer Badge/Button noetig):
* Sobald die Kachel wieder ihre echte 2-Spalten-Breite hat (156px@360/171px@390
* statt 110px@beide), verschwinden BEIDE E2-Befunde automatisch:
* - Befund 1 (Massstabs-/Grade-Badge "Non-Scale"/"1/144" ueberlappt Titel):
* bei 110px musste .hc-cathead .meta-row umbrechen (flex-wrap aus 13.17),
* die Cathead-Box wuchs dabei NICHT auf die zweite Zeile mit (gemessene
* Ueberlappung Cathead-Bottom vs. .nm-Top: -13.75px). Bei 156-171px passen
* Franchise-Chip + Grade-Chip auf eine Zeile -> kein Umbruch -> kein
* Overlap (live nachgemessen an allen 6 im E2-Report genannten Karten
* @360: Abstand jetzt +8px statt -13.75px Ueberlappung).
* - Befund 2 (Warenkorb-/Anfragen-Kreis rechts abgeschnitten): bei 110px
* ragte der 36px-Kreis 13.4px ueber den rechten Kartenrand hinaus (Karte
* hat overflow:hidden). Bei 156-171px liegt der Kreis vollstaendig
* innerhalb (12px Restabstand = pb-padding-right, live nachgemessen).
* ========================================================================== */
@media (max-width: 839px) {
/* ---- 20.1 · Standard-Fallback: JEDES ID-gescopte Produkt-Grid ohne (oder mit
* beliebiger) View-Klasse = 2 Spalten. Faengt insbesondere #hcSearchList .grid
* (traegt keine cols-4-Klasse) ein -> "Suche = wie Standard" (Ansichten-Matrix).
* main + :is(#hcm-x,[id]) (ID-Spezifitaet von JEDEM ID-Vorfahren) schlaegt
* golive (a) zuverlaessig (main-Typ gewinnt den Tiebreak bei gleicher
* ID+Klassen-Zahl). ---- */
main :is(#hcm-x, [id]) .grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--hcm-s3) !important;
}
/* ---- 20.2 · Gross (cols-3) = 1 Spalte, ~342px Bild (Klassen-Umdeutung Brand
* Book §3.4 / Ansichten-Matrix 20.07.2026: Tablet 661-839 UND Phone <=660 je
* 1 Spalte). Zwei Klassen > eine Klasse aus 20.1 -> gewinnt automatisch ohne
* Reihenfolge-Abhaengigkeit. War bisher faelschlich mit cols-4 in derselben
* 2-up-Gruppe (Abschnitt 9.2/13.12) -> Follow-up aus Welle 1 hiermit behoben
* (Live-Test vorher: 110-171px/2-spaltig statt 1-spaltig/~342-352px). ---- */
main :is(#hcm-x, [id]) .grid.cols-3 {
grid-template-columns: 1fr !important;
}
/* ---- 20.3 · Liste (is-list/list) = gestapelt, 1 Spalte (war bereits korrekt,
* hier zusaetzlich boostet fuer Konsistenz/Zukunftssicherheit). ---- */
main :is(#hcm-x, [id]) .grid.is-list,
main :is(#hcm-x, [id]) .grid.list {
grid-template-columns: 1fr !important;
}
/* ---- 20.4 · Harte 3-up-Sperre: falls irgendeine kuenftige golive-Regel
* erneut repeat(3,...)/repeat(4,...) auf ein ID-gescoptes Grid legt, faengt
* dieser Schlusswaechter es zusaetzlich ab (identische Spezifitaet wie 20.1,
* steht aber danach -> gewinnt Reihenfolge-Tiebreak bei exakter Uebereinstimmung;
* inhaltlich deckungsgleich mit 20.1, rein defensiv). ---- */
main :is(#hcm-x, [id]) .grid:not(.cols-3):not(.is-list):not(.list) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ============================================================================
* Abschnitt 21 · W3-B (24.07.2026) — /sammelkarten-Hero kompaktieren
* Chef-Auftrag 24.07. nachmittags, Marcel waehlte "Komprimieren (Empfehlung)".
* Ist ~968px @390 (Chef-Referenz "~1155px" schliesst den Sticky-Header-Offset
* mit ein) -> Ziel ~700px. Dichte-Mechanik wie E0-B.2 (Abschnitt 19): Gaps/
* Margins gestrafft, H1 kleiner geclampt, Lede 3-Zeilen-Clamp mit Toggle
* (eigene Mini-Funktion skHeroClamp() in custom-mobile.js -- seoClamp()s
* bestehender Toggle greift hier NICHT, weil .hc-sk-lede mit ~87px unter
* dessen 130px-Schwelle liegt und deshalb uebersprungen wuerde), Stats als
* sauberes 2-up-Grid, Produkt-Buehne (.hc-sk-stage, aus dem JS-injizierten
* hc-sk-css: aspect-ratio:1.18/1) per Breiten-Kappung min(62%,230px)
* verkleinert -- Hoehe folgt automatisch proportional mit, KEIN object-fit-
* Zerren, Bild/Link/Preis-Tag bleiben 100% funktional (live gegengeprueft:
* Preis-Tag ueberlaeuft bei keinem getesteten Produkt). NICHTS entfernt,
* alle Ziele (Alle TCGs ansehen / Zubehoer / Produkt-Link / 10 Thumbs /
* Filter) bleiben erreichbar, Touch-Targets unveraendert >=44px (CTA-Buttons
* weiter 46px; Stats/Thumbs sind keine eigenen Touch-Targets bzw. bereits
* >=44px). !important noetig, weil golive/hc-sk-css als