/* ============================================================================================ custom-desktop.css — HawaiiCards · Desktop-Schicht ≥840px Zone: frontend-desktop (Gegenstück zu custom-mobile.css der Zone frontend-mobile) Angelegt: 26.07.2026 · Bereichs-Orchestrator Frontend Desktop ZWECK DIESER DATEI Zonenspezifische Regeln der Desktop-Zone, die NICHT in custom.js gehoeren. custom.js ist 2,3 MB gross und wird von mehreren Chats gleichzeitig bearbeitet — Aenderungen dort sind riskant. Diese Datei gehoert ausschliesslich der Desktop-Zone. Klassen-Praefix: hcd- (Desktop). Die Mobile-Zone nutzt hcm-. Getrennte Praefixe, damit die Zonen sich nicht gegenseitig ueberschreiben. ============================================================================================ */ /* -------------------------------------------------------------------------------------------- FD-46 · Anfrage-Knopf nur in der Kit-Welt (Chef-Entscheid 26.07.2026) Regel woertlich: "alle Artikel die ueber /model-kits und ueber /collectibles zu finden sind bekommen den Anfrage-Button. Alles was ueber /sammelkarten zu finden ist bekommt den nicht." Umsetzung: reine PFAD-Zuordnung (Liste im JS), KEINE Kachel-Heuristik. Begruendung aus der Messung der Mobile-Zone: .cat ist mal Franchise, mal Set-Name, mal Hersteller; data-group traegt bei Kartenhuellen "booster" wie bei Pokemon-Boostern; Produkt-Links sind flach ohne Kategoriepfad. Es gibt an der Kachel kein verlaessliches Welt-Signal. ⚠️ SPEZIFITAETS-BOOSTER IST PFLICHT — nicht "aufraeumen"! Die einfache Fassung .prod.hcd-keine-anfrage .hc-ask-btn (0,3,0) greift NICHT, obwohl die Klasse auf allen Kacheln sitzt, kein Inline-Style existiert und die Media-Query passt. In custom.js liegt eine staerkere Regel. Erst die verdoppelten Klassen (0,5,0) gewinnen. Befund der Mobile-Zone, hier 1:1 uebernommen. Media-Query: Die Regel gilt nur ab 840px. Damit bleibt sie folgenlos, wenn ein Besucher das Fenster unter die Zonengrenze zieht — dort uebernimmt custom-mobile.css mit hcm-. -------------------------------------------------------------------------------------------- */ @media (min-width: 840px) { .prod.prod.hcd-keine-anfrage .hc-ask-btn.hc-ask-btn { display: none !important; } } /* -------------------------------------------------------------------------------------------- FD-49 · Anfrage-Knopf im Ruhezustand sichtbar (Marcel-Befund 26.07.2026, mit Screenshot) Befund woertlich: "die anfrage button sind nur sichtbar wenn man darueber hovert". Gemessen auf der Startseite, Ruhezustand: background rgba(0,0,0,0), border none, box-shadow none, color rgb(12,30,42), font-size 11.5px. Der Knopf war also nur ein unscheinbares Textchen auf weisser Kachel; erst :hover fuellte ihn orange (transition: background, color). Der Knopf ist die EINZIGE Handlungsaufforderung bei Model-Kits (dort gibt es keinen Warenkorb-Knopf) — unsichtbar im Ruhezustand kostet er direkt Anfragen. Fix: gefuellter Zustand wird zum Normalzustand (Brand-Orange, weisse Schrift), Hover wird zum dunkleren Feedback. Genau die Optik aus Marcels Screenshot, nur eben immer statt nur bei Hover. -------------------------------------------------------------------------------------------- */ @media (min-width: 840px) { .prod .hc-ask-btn.hc-ask-btn { background: #EF820E !important; color: #fff !important; font-weight: 700; box-shadow: 0 1px 3px rgba(12, 30, 42, .18); } .prod .hc-ask-btn.hc-ask-btn:hover, .prod .hc-ask-btn.hc-ask-btn:focus-visible { background: #0C1E2A !important; /* Navy = klares Hover-Feedback, Brand-konform */ color: #fff !important; } } /* -------------------------------------------------------------------------------------------- FD-51 · /faq — Layout auf den Kategorie-Standard bringen (Marcel-Auftrag 26.07.2026) Skill `seite-akkurat-ausrichten`, alle Werte am Live-DOM gemessen. ── BEFUND ────────────────────────────────────────────────────────────────────────────────── Die gesamte Seite klebte am linken Fensterrand, rechts stand eine leere Flaeche. Gemessen bei 2844px Fensterbreite: Container x=0 Leerraum links 0px / rechts 1594px Hero 1250px breit statt randlos, Wrap 1250 statt 1280 (Standard Paragraf 3.1) Hero-Glow FEHLT (Paragraf 2.12 macht ihn fuer jeden .cat-hero zur Pflicht) URSACHE, zwei Ebenen: 1. Bootstrap wird shopweit nicht geladen (template.xml laesst es weg) -> `.container` fehlt die Standardregel `margin-inline:auto`. Gegenprobe: im ganzen Shop existiert KEINE CSS-Regel, die .container ein margin gibt. Betrifft ausser /faq auch /ueber-uns und /News. 2. Auf /faq steckt der .cat-hero INNERHALB des .container (max 1250px). Auf der Referenzseite /gunpla liegt er frei und randlos. Deshalb wurde der Hero doppelt beschnitten: auf Containerbreite UND nach links gedrueckt. ── FIX + BEWEIS (Live-Injektion, Gate 14) ────────────────────────────────────────────────── vorher nachher Soll Hero-x 0 0 0 (nach Scrollleisten-Korrektur, s.u.) Hero-Breite 1250 2827 2827 randlos Wrap-Breite 1250 1280 1280 Paragraf 3.1 Container-x 0 789 zentriert (Leerraum 789 links / 805 rechts, Differenz 16px = exakt die Scrollleiste) Hero-Hoehe 664 664 664 war schon korrekt Hero-Glow fehlt da Pflicht ⚠️ SCROLLLEISTEN-FALLE: Die uebliche Ausbruch-Formel mit `100vw` erzeugte Hero-x = -9px, weil 100vw die Scrollleiste MITZAEHLT, der Container aber nicht. Das haette horizontales Scrollen ausloesen koennen. Deshalb rechnet der Fix mit der Variablen `--hcd-sbw`, die custom-desktop.js beim Start auf die echte Scrollleistenbreite setzt (hier 17px). Gegenprobe nach dem Fix: scrollWidth == clientWidth, kein Overflow. -------------------------------------------------------------------------------------------- */ @media (min-width: 840px) { /* 1 · Inhalt mittig statt linksbuendig — greift auch auf /ueber-uns und /News */ .container.link-content { margin-left: auto !important; margin-right: auto !important; } /* 2 · Hero bricht aus der Containerbreite aus und laeuft randlos, wie auf /gunpla */ .container.link-content .cat-hero { width: calc(100vw - var(--hcd-sbw, 0px)) !important; max-width: calc(100vw - var(--hcd-sbw, 0px)) !important; margin-left: calc(50% - (100vw - var(--hcd-sbw, 0px)) / 2) !important; margin-right: calc(50% - (100vw - var(--hcd-sbw, 0px)) / 2) !important; position: relative; } /* 3 · Marken-Glow nach Paragraf 2.12, mit dem vorgeschriebenen Doppel-Glow-Schutz */ .cat-hero.faq-hero:not(:has(> .hero-glow))::before { content: ""; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 760px; height: 420px; background: radial-gradient(closest-side, rgba(239,130,14,.40), rgba(239,130,14,0) 70%); filter: blur(30px); pointer-events: none; z-index: 0; } .cat-hero.faq-hero > .wrap { position: relative; z-index: 1; } } /* -------------------------------------------------------------------------------------------- FD-52 · Produktkachel: Hover-Rahmen um die GANZE Kachel (Marcel-Befund 27.07.2026, mit Bild) Befund woertlich: "wenn ich im shop ueber ein produkt hover, moechte ich gerne das die ganze aktive kachel orange umrandet ist und nicht wie auf dem bild zusehen nur die Haelfte". ── URSACHE, am DOM gemessen ──────────────────────────────────────────────────────────────── Die Kachel zeichnet ihren Rahmen mit `outline` + `outline-offset: -0.89px`, also NACH INNEN gezogen. Direkt darueber liegt das Kind `.pim` (Bildbereich, 287px hoch) mit `position: relative` UND `background: rgb(255,255,255)`. Ein positioniertes Element mit eigenem Hintergrund ueberdeckt die nach innen gezogene Outline in seinem Bereich. Ergebnis: Rahmen nur dort sichtbar, wo der Textbereich `.pb` liegt (transparent, position:static) — genau die "Haelfte" aus Marcels Bild. Gegenprobe der bestehenden Regel in golive-content.css: ... .prod:hover{ transform:translateY(-3px); box-shadow:...; outline-color:rgba(12,30,42,.30) } Sie setzt nur die FARBE der Outline — am Ueberdeckungsproblem aendert das nichts. ── FIX ───────────────────────────────────────────────────────────────────────────────────── Statt der Outline ein Overlay-Pseudoelement, das GARANTIERT ueber allen Kindern liegt: `inset:0` deckt die volle Kachel, `border-radius:inherit` folgt der 24px-Rundung, `z-index:6` schlaegt das positionierte `.pim`, `pointer-events:none` laesst den Klick durch. Gemessen nach dem Fix (Testkachel 289x507): ::after 283x502 (= Kachel minus Rahmenbreite), radius 24px, z-index 6, border rgb(239,130,14) — Rahmen laeuft ueber Bild- UND Textbereich durch. -------------------------------------------------------------------------------------------- */ @media (min-width: 840px) { .prod { position: relative; } .prod::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; /* folgt der Kachel-Rundung, auch wenn sie sich aendert */ pointer-events: none; /* Klick auf die Kachel darf nie abgefangen werden */ z-index: 6; /* ueber .pim (position:relative, weisser Hintergrund) */ transition: border-color .18s ease; } .prod:hover::after, .prod:focus-within::after { /* Tastatur-Navigation bekommt dieselbe Rueckmeldung */ border-color: #EF820E; } } /* -------------------------------------------------------------------------------------------- FD-59 · /model-kits — Premium-Seite nach Mockup „Model Kits Premium Design A" Quelle: 03 - Ressourcen/Claude Design/Model Kits Premium Design A (standalone).html Gebaut: 27.07.2026 · Bereichs-Orchestrator Frontend Desktop ── WAS AUS DEM MOCKUP KAM UND WAS NICHT ──────────────────────────────────────────────────── Das Mockup ist ein Artifact-Bundle: die Seite steckt JSON-kodiert im Manifest und enthaelt DREI Entwuerfe (A = .fa/.aa-*, B = .fb/.ab-*, C = .fc/.ac-*) plus einen kompletten Schaufenster-Rahmen mit eigenem Header, Footer, Topbar und Breadcrumb. Uebernommen wurden ausschliesslich die 133 Regeln des Entwurfs A. NICHT uebernommen — und das ist wichtig, nicht Bequemlichkeit: 1. CSS-Block 1 des Mockups (292 Zeilen Designsystem) stylt `.prod`, `.btn`, `.card`, `.holo` GLOBAL. Der Shop nutzt dieselben Klassennamen fuer echte Produktkacheln. Ein Import haette jede Kategorieseite des Shops umgestylt. Stattdessen: die 26 von 32 Variablen, die golive-content.css ohnehin schon fuehrt, werden einfach mitgenutzt; die 4 wirklich fehlenden werden unten auf `#hc-mk` gescopt nachdeklariert. 2. Header/Footer/Topbar/Breadcrumb — hat der Shop bereits. 3. Entwurf B und C — nicht ausgewaehlt. ── WARUM ALLES UNTER #hc-mk HAENGT ───────────────────────────────────────────────────────── Der Entwurf benutzt sehr kurze Klassennamen: .pr .m .d .st .ar .go .num .tb .cb .sl .code. Gegenprobe gegen golive-content.css + hawaiicards.css: `.code` hat live 15 Regeln, `.tb` 8, `.num` 3, `.m` 4 — alle unter fremden Seiten-IDs (#hc-dg, #hc-pa, #hc-vz …). Ohne Scope waere die Kollision beidseitig. `#hc-mk` ist exakt das Hausmuster, mit dem der Shop seine Seiten schon trennt (#hc-faq, #hc-po, #hc-uu, #hc-404, #hc-srch). ── RESPONSIV: MUSSTE NEU GEBAUT WERDEN ───────────────────────────────────────────────────── Das Mockup enthaelt KEINE einzige Media-Query — es ist auf eine feste Buehnenbreite gezeichnet (Hero-H1 96px, Grade-Leiter als 7-Spalten-Raster, Trending als 3-Spalten-Raster mit zweizeiligem Feature). Unveraendert portiert waere die Seite unterhalb ~1200px zerlaufen und auf dem Handy unbrauchbar gewesen. Die Stufen unten sind daher Eigenbau. Sie decken bewusst AUCH <840px ab, obwohl das die Zone der Mobile-Kollegen ist: der Seiteninhalt liegt in EINER CMS-Quelle, die beide Zonen ausliefern. Ohne Untergrenze waere die Seite mobil roh und gebrochen. Die Regeln sind bewusst anspruchslos gehalten (nur Stapeln + Schriftgrad), damit die Mobile-Zone jederzeit sauber darueber schreiben kann — Uebergabe liegt in deren Eingang. -------------------------------------------------------------------------------------------- */ /* 1 · Die vier Variablen, die golive-content.css noch nicht fuehrt. Bewusst auf #hc-mk gescopt statt auf :root — sie sollen nichts ausserhalb dieser Seite beeinflussen. Werte 1:1 aus dem Mockup-Designsystem. */ #hc-mk{ --el-1:0 1px 2px rgba(8,15,20,.08), 0 1px 1px rgba(8,15,20,.05); --el-2:0 4px 10px -3px rgba(8,15,20,.12), 0 2px 4px -2px rgba(8,15,20,.07); --el-3:0 14px 30px -10px rgba(8,15,20,.18), 0 6px 12px -6px rgba(8,15,20,.10); --accent-line:linear-gradient(90deg, var(--brand-teal), var(--brand-orange)); } /* Dunkelmodus: der Shop nutzt dasselbe Theme-Signal wie das Mockup ([data-theme="midnight"]), deshalb passen die Schattenwerte des Entwurfs unveraendert. */ :root[data-theme="midnight"] #hc-mk{ --el-1:0 1px 2px rgba(0,0,0,.40); --el-2:0 6px 16px -4px rgba(0,0,0,.50); --el-3:0 18px 40px -12px rgba(0,0,0,.60); } /* 2 · Grundbausteine aus Mockup-Block 1 — NUR die vier, die die Auszeichnung wirklich braucht, und nur gescopt. Der Rest von Block 1 bleibt bewusst draussen (siehe Kopf). */ #hc-mk .wrap{max-width:var(--maxw,1280px);margin:0 auto;padding:0 28px;} #hc-mk .eyebrow{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--primary);display:inline-flex;align-items:center;gap:10px;} #hc-mk .eyebrow::before{content:"";width:26px;height:2px;background:var(--primary);border-radius:2px;} #hc-mk .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:.01em;padding:14px 26px;border-radius:var(--r-pill);transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s;white-space:nowrap;border:0;text-decoration:none;} #hc-mk .btn:active{transform:translateY(1px) scale(.99);} #hc-mk .btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow);} #hc-mk .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--primary), 0 26px 64px -18px var(--primary);} #hc-mk .btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border);} #hc-mk .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);} #hc-mk .btn-lg{padding:17px 32px;font-size:16px;} #hc-mk .btn-sm{padding:10px 18px;font-size:13.5px;} /* 3 · Bildplatzhalter statt leerer Kaesten. Befund: die Live-Seite fuehrt AUSSER mascot.png kein einziges Kit-Bild — es gibt im Template-Ordner keine Gunpla-Freisteller. Das Mockup arbeitet mit 13 - Elementen (leer) plus 2 Fotos, die per Hotlink von d2j6dbq0eux0bg.cloudfront.net kamen — das ist die alte Ecwid-CDN, also genau die Alt-Domain-Klasse, die FD-54 gerade shopweit entfernt hat. Beides scheidet aus. Statt leerer grauer Flaechen bekommt jeder Bildplatz eine gestaltete Platte mit Grade-/Marken-Kuerzel. Sobald echte Freisteller da sind, ersetzt ein die Platte ersatzlos — die Slots sind dafuer schon vorbereitet. */ #hc-mk .simg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;} #hc-mk .mkph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:14px; background:radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--mkc,var(--primary)) 13%, transparent), transparent 72%), linear-gradient(150deg, var(--surface-2), var(--card));} #hc-mk .mkph b{font-family:var(--font-display);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--mkc,var(--dim));} #hc-mk .mkph span{font-size:10px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);max-width:22ch;line-height:1.5;} #hc-mk .aa-ti .mkph b{font-size:26px;} #hc-mk .aa-xc .mkph b{font-size:24px;} /* 4 · Uebernommene Regeln des Entwurfs A (maschinell auf #hc-mk gescopt, Werte unveraendert) */ #hc-mk .slot{position:relative;overflow:hidden;} #hc-mk .slot image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;} #hc-mk .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px;} #hc-mk .shead h2{font-size:38px;letter-spacing:-.025em;} #hc-mk .shead .sl{max-width:52ch;color:var(--muted);font-size:15px;} #hc-mk .badge{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:var(--primary);color:var(--primary-ink);} #hc-mk .badge.pre{background:var(--accent);color:#fff;} #hc-mk .badge.out{background:var(--card-hi);color:var(--muted);} #hc-mk .aa-hero{position:relative;background:var(--hero-grad);border-bottom:1px solid var(--border-soft);} #hc-mk .aa-hgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding:54px 0 60px;} /* Entwurf sagt 96px — auf der echten Seite ist die Hero-Spalte durch --maxw:1280 aber fest ~596px breit, "Bau dir deinen" braucht bei 96px 664px und brach dreizeilig. Am Live-DOM gemessen: 86px ist die Kippgrenze, 84px sitzt mit Reserve zweizeilig wie im Entwurf. */ #hc-mk .aa-hero h1{font-size:84px;letter-spacing:-.035em;line-height:.94;margin:22px 0 0;} #hc-mk .aa-hero h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-mk .aa-lead{font-size:17px;color:var(--muted);max-width:54ch;line-height:1.65;margin:24px 0 0;} #hc-mk .aa-lead b{color:var(--text);} #hc-mk .aa-cta{display:flex;gap:14px;margin:30px 0 0;} #hc-mk .aa-figs{display:flex;gap:0;margin:40px 0 0;border-top:1px solid var(--border);padding-top:0;} #hc-mk .aa-fig{flex:1;padding:18px 18px 0 0;border-left:1px solid var(--border);padding-left:18px;} #hc-mk .aa-fig:first-child{border-left:none;padding-left:0;} #hc-mk .aa-fig b{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.01em;display:block;line-height:1;} #hc-mk .aa-fig span{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);display:block;margin-top:7px;} #hc-mk .aa-stage{position:relative;height:560px;} #hc-mk .aa-stage .glow{position:absolute;inset:6% 2%;background:radial-gradient(60% 55% at 50% 44%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 70%);filter:blur(30px);} #hc-mk .aa-shot{position:absolute;inset:0 30px 74px;border-radius:var(--r-lg);background:var(--card);box-shadow:inset 0 0 0 1px var(--border-soft);} #hc-mk .aa-plate{position:absolute;left:30px;right:30px;bottom:0;background:var(--card);border-radius:var(--r-md);box-shadow:var(--el-3);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;} #hc-mk .aa-plate h3{font-size:17px;letter-spacing:-.01em;} #hc-mk .aa-plate p{font-size:12px;color:var(--muted);margin-top:3px;} #hc-mk .aa-plate .pr{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--primary);white-space:nowrap;} #hc-mk .aa-plate .st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--brand-teal);white-space:nowrap;} #hc-mk .aa-plate .st i{width:7px;height:7px;border-radius:50%;background:var(--brand-teal);} #hc-mk .aa-vert{position:absolute;right:-6px;top:56px;writing-mode:vertical-rl;font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);} #hc-mk .aa-idx{border-bottom:1px solid var(--border-soft);} #hc-mk .aa-idx .wrap{display:flex;} #hc-mk .aa-idx a{flex:1;display:flex;align-items:baseline;gap:10px;padding:18px 6px;font-size:13px;font-weight:700;color:var(--muted);border-left:1px solid var(--border-soft);padding-left:18px;} #hc-mk .aa-idx a:first-child{border-left:none;padding-left:6px;} #hc-mk .aa-idx i{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--primary);} #hc-mk .sec{padding:74px 0 0;} #hc-mk .kick{font-size:11.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--primary);display:flex;align-items:center;gap:12px;margin-bottom:14px;} #hc-mk .kick::before{content:"";width:26px;height:2px;background:var(--accent-line);border-radius:2px;} #hc-mk .aa-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} #hc-mk .aa-tile{position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;transition:.25s var(--ease);display:block;} #hc-mk .aa-tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--primary),var(--el-3);} #hc-mk .aa-tile .slot{aspect-ratio:16/10;background:var(--surface-2);} #hc-mk .aa-tile .num{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--text);background:var(--card);border-radius:8px;padding:4px 9px;box-shadow:var(--el-1);} #hc-mk .aa-tile .tb{padding:20px 22px 24px;} #hc-mk .aa-tile h3{font-size:20px;letter-spacing:-.015em;} #hc-mk .aa-tile p{font-size:13.5px;color:var(--muted);margin:8px 0 0;line-height:1.55;} #hc-mk .aa-tile .go{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--primary);margin-top:14px;} #hc-mk .aa-grows{border-top:2px solid var(--text);margin-top:34px;} #hc-mk .aa-grow{display:grid;grid-template-columns:180px 1fr 120px 120px 130px 140px 40px;align-items:center;gap:18px;padding:26px 8px;border-bottom:1px solid var(--border);transition:background .2s;} #hc-mk .aa-grow:hover{background:var(--surface-2);} #hc-mk .aa-grow .code{font-family:var(--font-display);font-weight:800;font-size:58px;letter-spacing:-.02em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--dim);transition:.2s;} #hc-mk .aa-grow:hover .code{-webkit-text-stroke:1.5px var(--primary);} #hc-mk .aa-grow h3{font-size:19px;letter-spacing:-.01em;} #hc-mk .aa-grow .d{font-size:13px;color:var(--muted);margin-top:5px;} #hc-mk .aa-grow .m{font-size:13px;color:var(--muted);font-feature-settings:"tnum";} #hc-mk .aa-grow .m b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px;} #hc-mk .aa-grow .pr{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--primary);text-align:right;font-feature-settings:"tnum";} #hc-mk .aa-grow .ar{color:var(--dim);} #hc-mk .aa-gnote{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 8px 0;font-size:13px;color:var(--dim);} #hc-mk .aa-trend{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:auto auto;gap:20px;} #hc-mk .aa-feat{grid-row:1/3;position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;display:flex;flex-direction:column;transition:.25s var(--ease);} #hc-mk .aa-feat:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--primary),var(--el-3);} #hc-mk .aa-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--primary),var(--el-3);} #hc-mk .aa-feat .slot{aspect-ratio:1/1;background:var(--card);} #hc-mk .aa-feat .fb{padding:22px 24px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;} #hc-mk .aa-feat h3{font-size:24px;letter-spacing:-.02em;} #hc-mk .aa-feat p{font-size:13px;color:var(--muted);margin-top:6px;} #hc-mk .aa-feat .pr{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--primary);white-space:nowrap;} #hc-mk .aa-card{position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;display:block;transition:.25s var(--ease);} #hc-mk .aa-card .slot{aspect-ratio:1/1;background:var(--card);} #hc-mk .aa-card .cb{padding:16px 18px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;} #hc-mk .aa-card h3{font-size:15.5px;letter-spacing:-.01em;} #hc-mk .aa-card p{font-size:12px;color:var(--muted);margin-top:4px;} #hc-mk .aa-card .pr{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--primary);white-space:nowrap;} #hc-mk .aa-tools{background:var(--surface-2);border-radius:var(--r-xl);padding:38px 40px 40px;display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;} #hc-mk .aa-tools h2{font-size:30px;letter-spacing:-.02em;} #hc-mk .aa-tools .tl{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.6;} #hc-mk .aa-titems{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} #hc-mk .aa-ti{background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border-soft);padding:14px;transition:.2s var(--ease);} #hc-mk .aa-ti:hover{box-shadow:inset 0 0 0 1px var(--primary),var(--el-2);} #hc-mk .aa-ti .slot{aspect-ratio:1/1;border-radius:9px;background:var(--card);box-shadow:inset 0 0 0 1px var(--border-soft);margin-bottom:12px;} #hc-mk .aa-ti h4{font-family:var(--font-body);font-weight:700;font-size:13.5px;} #hc-mk .aa-ti p{font-size:11.5px;color:var(--dim);margin-top:3px;} #hc-mk .aa-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;} #hc-mk .aa-sv{border-top:2px solid var(--text);padding-top:20px;} #hc-mk .aa-sv h3{font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;} #hc-mk .aa-sv svg{color:var(--primary);flex:none;} #hc-mk .aa-sv p{font-size:13.5px;color:var(--muted);margin:10px 0 0;line-height:1.6;} #hc-mk .aa-sv a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);margin-top:12px;} #hc-mk .aa-x{margin-top:74px;background:var(--brand-navy);color:#eaf3f6;} #hc-mk .aa-x .wrap{display:grid;grid-template-columns:1fr 380px;gap:50px;align-items:center;padding-top:46px;padding-bottom:46px;} #hc-mk .aa-x h2{font-size:32px;letter-spacing:-.02em;} #hc-mk .aa-x p{font-size:14.5px;color:rgba(234,243,246,.72);margin:12px 0 0;max-width:58ch;line-height:1.6;} #hc-mk .aa-x .xb{display:flex;gap:12px;margin-top:22px;} #hc-mk .aa-xcards{position:relative;height:230px;} #hc-mk .aa-xc{position:absolute;width:170px;aspect-ratio:1/1;border-radius:12px;background:var(--card);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);} #hc-mk .aa-xc.c1{left:0;top:34px;transform:rotate(-6deg);} #hc-mk .aa-xc.c2{left:168px;top:6px;transform:rotate(4deg);z-index:2;} #hc-mk .aa-news{padding:64px 0 70px;text-align:center;} #hc-mk .aa-news h2{font-size:30px;letter-spacing:-.02em;} #hc-mk .aa-news p{font-size:14px;color:var(--muted);margin:10px 0 0;} #hc-mk .aa-form{display:flex;gap:10px;justify-content:center;margin-top:24px;} #hc-mk .aa-form input{width:340px;padding:14px 20px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--card);font-family:var(--font-body);font-size:14px;color:var(--text);outline:none;} #hc-mk .aa-form input:focus{border-color:var(--primary);} #hc-mk .aa-stage .aa-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);pointer-events:none;} #hc-mk .aa-stage .aa-slide.on{opacity:1;pointer-events:auto;} #hc-mk .aa-dots{position:absolute;top:8px;right:36px;display:flex;gap:8px;z-index:5;} #hc-mk .aa-dots button{width:9px;height:9px;border-radius:50%;background:var(--border);padding:0;transition:.2s var(--ease);} #hc-mk .aa-dots button.on{background:var(--primary);transform:scale(1.3);} #hc-mk .aa-slide .tagchip{position:absolute;top:2px;left:32px;z-index:4;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--el-1);color:var(--primary);} #hc-mk .aa-plate .st.pre{color:var(--accent);} #hc-mk .aa-plate .st.pre i{background:var(--accent);} #hc-mk .aa-wpanel{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--hero-grad);box-shadow:inset 0 0 0 1px var(--border-soft);display:grid;grid-template-columns:1.08fr .92fr;gap:44px;padding:46px 48px;align-items:center;} #hc-mk .aa-wpanel::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 88% 8%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 60%);pointer-events:none;} #hc-mk .aa-wpanel>div{position:relative;} #hc-mk .aa-wpanel h2{font-size:42px;letter-spacing:-.025em;} #hc-mk .aa-wpanel h2 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-mk .aa-wpanel .wl{font-size:15px;color:var(--muted);margin:16px 0 0;max-width:56ch;line-height:1.65;} #hc-mk .aa-wpanel .wl b{color:var(--text);} #hc-mk .aa-wsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0;} #hc-mk .aa-wstep{background:var(--card);border-radius:var(--r-md);box-shadow:var(--el-1);padding:14px 16px;} #hc-mk .aa-wstep b{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--primary);display:block;letter-spacing:.08em;} #hc-mk .aa-wstep h4{font-family:var(--font-body);font-weight:700;font-size:13.5px;margin-top:5px;} #hc-mk .aa-wstep p{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;} #hc-mk .aa-wcta{display:flex;gap:14px;margin-top:28px;align-items:center;flex-wrap:wrap;} #hc-mk .aa-wnote{font-size:12px;color:var(--dim);} #hc-mk .aa-wvisual{position:relative;height:380px;} #hc-mk .aa-wvisual .slot{position:absolute;inset:14px 10px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--el-3);} #hc-mk .aa-wtag{position:absolute;z-index:3;background:var(--card);border-radius:var(--r-pill);box-shadow:var(--el-2);padding:9px 15px;font-size:12.5px;font-weight:700;white-space:nowrap;} #hc-mk .aa-wtag i{font-style:normal;color:var(--primary);margin-right:7px;font-weight:800;} #hc-mk .aa-wtag.t1{top:-2px;left:-14px;transform:rotate(-3deg);} #hc-mk .aa-wtag.t2{bottom:34px;left:-22px;transform:rotate(2deg);} #hc-mk .aa-wtag.t3{bottom:-4px;right:-8px;transform:rotate(-2deg);} /* 5 · Responsive Stufen — Eigenbau, siehe Kopf (das Mockup hat keine einzige Media-Query). Bezugsgroessen aus dem Entwurf: Hero-H1 96px, .aa-grow als 7-Spalten-Raster (180 1fr 120 120 130 140 40), .aa-trend als 3 Spalten mit zweizeiligem Feature. */ /* ≤1199px — Buehne schrumpfen, Grade-Leiter enger, Trending auf zwei Spalten */ @media (max-width:1199px){ #hc-mk .aa-hero h1{font-size:72px;} #hc-mk .aa-stage{height:480px;} #hc-mk .aa-wpanel h2{font-size:34px;} #hc-mk .shead h2{font-size:32px;} #hc-mk .aa-grow{grid-template-columns:120px 1fr 96px 96px 104px 120px 32px;gap:12px;} #hc-mk .aa-grow .code{font-size:44px;} #hc-mk .aa-trend{grid-template-columns:1fr 1fr;} #hc-mk .aa-feat{grid-row:auto;grid-column:1/3;} #hc-mk .aa-feat .slot{aspect-ratio:16/9;} #hc-mk .aa-x .wrap{grid-template-columns:1fr 300px;} #hc-mk .aa-tools{grid-template-columns:250px 1fr;gap:30px;} } /* ≤1023px — Hero einspaltig, Kennzahlen der Grade-Leiter fallen weg (Name+Preis bleiben) */ @media (max-width:1023px){ #hc-mk .aa-hgrid{grid-template-columns:1fr;gap:34px;padding:38px 0 46px;} #hc-mk .aa-hero h1{font-size:58px;} #hc-mk .aa-stage{height:420px;} #hc-mk .aa-vert{display:none;} #hc-mk .aa-idx .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} #hc-mk .aa-idx a{flex:0 0 auto;min-width:170px;} #hc-mk .aa-tiles{grid-template-columns:1fr 1fr;} #hc-mk .aa-grow{grid-template-columns:88px 1fr 120px 28px;gap:14px;padding:20px 6px;} #hc-mk .aa-grow .m{display:none;} #hc-mk .aa-grow .code{font-size:38px;} #hc-mk .aa-titems{grid-template-columns:1fr 1fr;} #hc-mk .aa-svc{grid-template-columns:1fr;gap:26px;} #hc-mk .aa-tools{grid-template-columns:1fr;gap:26px;padding:30px 28px 32px;} #hc-mk .aa-wpanel{grid-template-columns:1fr;gap:30px;padding:34px 30px;} #hc-mk .aa-wvisual{height:300px;} #hc-mk .aa-x .wrap{grid-template-columns:1fr;gap:32px;} #hc-mk .aa-xcards{height:210px;} #hc-mk .shead{flex-direction:column;align-items:flex-start;gap:12px;} } /* ≤839px — Zonengrenze zur Mobile-Schicht. Diese Stufe soll die Seite NUR benutzbar halten, nicht mobil gestalten. Sie ist bewusst anspruchslos, damit custom-mobile.css jederzeit sauber darueber schreiben kann. */ @media (max-width:839px){ #hc-mk .wrap{padding:0 18px;} #hc-mk .sec{padding:46px 0 0;} #hc-mk .aa-hero h1{font-size:42px;} #hc-mk .aa-lead{font-size:15.5px;} #hc-mk .aa-stage{height:340px;} #hc-mk .aa-shot{inset:0 8px 66px;} #hc-mk .aa-plate{left:8px;right:8px;flex-wrap:wrap;gap:8px;padding:12px 14px;} #hc-mk .aa-slide .tagchip{left:10px;} #hc-mk .aa-dots{right:12px;} #hc-mk .aa-cta{flex-wrap:wrap;} #hc-mk .aa-figs{flex-wrap:wrap;} #hc-mk .aa-fig{flex:1 1 45%;border-left:none;padding-left:0;} #hc-mk .aa-tiles{grid-template-columns:1fr;} #hc-mk .aa-trend{grid-template-columns:1fr;} #hc-mk .aa-feat{grid-column:auto;} #hc-mk .aa-titems{grid-template-columns:1fr 1fr;} #hc-mk .aa-grow{grid-template-columns:64px 1fr 28px;gap:12px;} #hc-mk .aa-grow .pr{display:none;} #hc-mk .aa-grow .code{font-size:30px;} #hc-mk .aa-gnote{flex-direction:column;align-items:flex-start;gap:12px;} #hc-mk .aa-wsteps{grid-template-columns:1fr;} #hc-mk .aa-wpanel h2{font-size:28px;} #hc-mk .aa-wvisual{height:230px;} #hc-mk .aa-wtag.t1,#hc-mk .aa-wtag.t2,#hc-mk .aa-wtag.t3{left:auto;right:auto;position:static;display:inline-block;margin:6px 6px 0 0;transform:none;} #hc-mk .aa-wvisual .slot{position:relative;inset:auto;height:170px;} #hc-mk .shead h2{font-size:26px;} #hc-mk .aa-x h2,#hc-mk .aa-news h2{font-size:24px;} #hc-mk .aa-xcards{height:180px;} #hc-mk .aa-xc{width:130px;} #hc-mk .aa-xc.c2{left:120px;} #hc-mk .aa-form{flex-direction:column;align-items:center;} #hc-mk .aa-form input{width:100%;max-width:340px;} } /* Bewegungsreduktion respektieren — das Hero-Karussell blendet dann hart um statt zu faden. Der Selbstlauf wird zusaetzlich in custom-desktop.js abgeschaltet. */ @media (prefers-reduced-motion:reduce){ #hc-mk .aa-stage .aa-slide{transition:none;} #hc-mk .aa-tile,#hc-mk .aa-card,#hc-mk .aa-feat,#hc-mk .aa-ti{transition:none;} #hc-mk .aa-tile:hover,#hc-mk .aa-card:hover,#hc-mk .aa-feat:hover{transform:none;} } /* -------------------------------------------------------------------------------------------- FD-61 · /model-kits v2 — Marcels Live-Sichtung vom 27.07. abends, 9 Aenderungen 1 Striche vor Abschnitts-Titeln raus 2 Sprungnav-Hover orange 3 Outline-Buchstaben sauber 4 sieben Brand-Kacheln 5 Standard-Produktkacheln je Grade 6 Zubehoer-/Display-Bilder 7 Cross-Sell-Schrift heller 8 Hero-Platte mit Kauf-Button 9 WhatsApp raus (nur CMS) -------------------------------------------------------------------------------------------- */ /* 1 · Kicker ohne Verlaufs-Strich (Marcel: "diese langen striche wollen wir nicht") */ #hc-mk .kick::before{display:none;} #hc-mk .kick{gap:0;} /* 2 · Sprungnavigation: aktive Zelle orange, Schrift dreht auf weiss — damit man sieht, dass das Buttons sind */ #hc-mk .aa-idx a{transition:background .18s var(--ease), color .18s var(--ease);} #hc-mk .aa-idx a:hover, #hc-mk .aa-idx a:focus-visible{background:var(--primary);color:#fff;} #hc-mk .aa-idx a:hover i, #hc-mk .aa-idx a:focus-visible i{color:#fff;} /* 3 · Outline-Buchstaben sauber ziehen: paint-order rendert den Strich HINTER der Fuellung, dadurch verschwinden die Miter-Spitzen an den Buchstaben-Ecken (Marcels Befund). Zusaetzlich minimale Fuellung statt transparent — glaettet die Innenkanten. ⚠️ Grade-Logos: Marcel will hier mittelfristig die ORIGINALEN Bandai-Grade-Logos — Dateien existieren noch nicht, Bildbedarf ist angemeldet. Bis dahin: saubere Letter. */ #hc-mk .aa-grow .code{paint-order:stroke fill;-webkit-text-stroke:1.6px var(--dim);color:color-mix(in srgb, var(--dim) 14%, transparent);} #hc-mk .aa-grow:hover .code{-webkit-text-stroke:1.6px var(--primary);color:color-mix(in srgb, var(--primary) 14%, transparent);} #hc-mk .mkph b{paint-order:stroke fill;color:color-mix(in srgb, var(--mkc,var(--dim)) 16%, transparent);} /* 4 · Sieben Brand-Kacheln (Gunpla, Figure-rise, 30MS, One Piece, P-Bandai, SNAA, IN ERA+). Gradient-Wortmarke wie im Hero-B-Muster aus custom.js; Logo-Dateien gibt es noch nicht — sobald sie da sind, ersetzt ein die .bm-Wortmarke (Slot vorbereitet). */ /* Marcel 27.07. spaet: "der bereich soll in 2 zeilen" + "premium bandai kommt da raus" — 6 Marken als 3+3, dadurch werden die Kacheln breiter und die Wortmarken bekommen Luft */ #hc-mk .aa-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} #hc-mk .aa-brand{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center; background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border-soft); padding:18px 10px 14px;transition:transform .2s var(--ease), box-shadow .2s var(--ease);} #hc-mk .aa-brand:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--primary),var(--el-2);} #hc-mk .aa-brand .bm{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff;letter-spacing:.02em; background:linear-gradient(145deg,var(--bg1,#888),var(--bg2,#444));box-shadow:var(--el-1);margin-bottom:6px;} #hc-mk .aa-brand b{font-family:var(--font-body);font-weight:700;font-size:13px;line-height:1.25;color:var(--text);} #hc-mk .aa-brand i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);} /* 5 · Standard-Produktkacheln (eine je Grade). Kachel-Optik kommt komplett aus golive-content.css (.prod/.pim/.pb) — hier NUR die Rasteranordnung. Anfragen-Button + Kontakt-Vorbefuellung ruestet HC-ASK-SOLD (custom.js) automatisch nach, weil die Kacheln data-ib + data-availability="sold" tragen. */ #hc-mk .aa-kits{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} #hc-mk .aa-kits .prod .pim{aspect-ratio:1/1;height:auto;} /* 6 · Echte Produktfotos in Zubehoer-Kacheln, Cross-Sell-Karten und Hero-Buehne */ #hc-mk .zimg{padding:10px;} #hc-mk .aa-shot .simg{padding:26px 26px 14px;} #hc-mk .aa-xc{overflow:hidden;transition:transform .2s var(--ease);} #hc-mk .aa-xc:hover{transform:rotate(0deg) scale(1.04);z-index:3;} /* 7 · Cross-Sell: Ueberschrift klar weiss statt gedimmt (Marcel: "farblich optimiert") */ #hc-mk .aa-x h2{color:#fff;} #hc-mk .aa-x p{color:rgba(234,243,246,.85);} #hc-mk .aa-xghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);} #hc-mk .aa-xghost:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff;} /* 8 · Hero-Platte traegt jetzt einen Kauf-Button — Platz schaffen, nichts quetschen */ #hc-mk .aa-plate{gap:12px;flex-wrap:wrap;} #hc-mk .aa-plate .btn-sm{padding:9px 16px;font-size:13px;} /* Responsive-Nachzieher fuer die neuen Raster */ @media (max-width:1199px){ #hc-mk .aa-brands{grid-template-columns:repeat(4,1fr);} #hc-mk .aa-kits{grid-template-columns:repeat(3,1fr);} } @media (max-width:1023px){ #hc-mk .aa-kits{grid-template-columns:repeat(2,1fr);} } @media (max-width:839px){ #hc-mk .aa-brands{grid-template-columns:repeat(2,1fr);} #hc-mk .aa-kits{grid-template-columns:1fr 1fr;gap:10px;} } /* FD-61 Nachfix: beim PG-Kit (659,99 + Anfragen-Button) lief die Preiszeile aus der Kachel — Zeile darf umbrechen, Preis einen Tick kompakter nur innerhalb der 5er-Leiste */ #hc-mk .aa-kits .rowend{flex-wrap:wrap;gap:10px;} #hc-mk .aa-kits .price{font-size:24px;} /* Marcel 27.07. spaet: Karussell-Punkte an die UNTERE Kante der Bildkarte, mittig — statt oben rechts. bottom:86px = knapp innerhalb der Karte (aa-shot endet 74px ueber dem Buehnenrand, darunter sitzt die Preis-Platte). */ #hc-mk .aa-dots{top:auto;right:auto;bottom:86px;left:50%;transform:translateX(-50%);} /* Marcel 27.07. spaet: Grade-Leiter — unter PG ein Trennstrich, danach SD und MGSD. Der Trennstrich nutzt dieselbe starke Linie wie der Tabellenkopf (2px, Textfarbe). */ #hc-mk .aa-grow-sep{border-top:2px solid var(--text);} #hc-mk .aa-grow .code.sm{font-size:38px;letter-spacing:-.01em;} /* Marcel 28.07.: originale Grade-Logos statt Outline-Buchstaben in der Grade-Leiter. Quelle: 03 - Ressourcen/Bilder/Logos/Gunpla (1-7), aufbereitet: randverbundenes Weiss transparent, beschnitten, max 360px, WebP -> /templates/HawaiiCards/img/grade-*.webp. Dunkelmodus: die Logos sind dunkel gezeichnet und wuerden auf Navy verschwinden — deshalb dort eine weisse Plakette hinter dem Logo. */ #hc-mk .aa-grow .glogo{max-width:min(150px,100%);max-height:56px;width:auto;height:auto;object-fit:contain;justify-self:start;} :root[data-theme="midnight"] #hc-mk .aa-grow .glogo{background:#fff;border-radius:8px;padding:5px 8px;} @media (max-width:1023px){ #hc-mk .aa-grow .glogo{max-height:44px;} } /* Marcel 28.07.: Marken-Kacheln GROSS wie im Mockup-Vorbild (.aa-tile mit Bildbuehne), 3+3 auf zwei Zeilen, mit den ORIGINALEN Brand-Logos aus 03 - Ressourcen/Bilder/Logos. Die kleine .aa-brands-Chipleiste ist damit abgeloest (Regeln bleiben harmlos zurueck). */ #hc-mk .aa-tile .blogo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;} :root[data-theme="midnight"] #hc-mk .aa-tile .blogo{background:#fff;} /* Marcel 28.07. (Screenshot N°3): Marken-Kacheln — Hover-Rand lief nur um den Textteil. URSACHE wie bei FD-52: der Ring lag als inset-box-shadow AUF der Kachel, der Bildbereich (.slot mit eigener Hintergrundflaeche) ueberdeckte ihn. FIX: Overlay-::after wie beim Produktkachel-Standard — liegt garantiert ueber allen Kindern. Dazu nach aktuellem Brand Book: KEINE Hintergrundfarbe im Bildbereich und die gesamte Kachel traegt im Ruhezustand eine feine Umrandung. */ #hc-mk .aa-tile{box-shadow:none;} #hc-mk .aa-tile:hover{box-shadow:var(--el-3);} #hc-mk .aa-tile .slot{background:transparent;} #hc-mk .aa-tile::after{content:"";position:absolute;inset:0;border:1.5px solid var(--border-soft);border-radius:inherit;pointer-events:none;z-index:6;transition:border-color .18s ease;} #hc-mk .aa-tile:hover::after, #hc-mk .aa-tile:focus-within::after{border-color:var(--primary);} /* Marcel 28.07.: Grade-Leiter farblich hervorheben WIE der "Nicht nur Kits"-Bereich — also als randloses Navy-Band mit heller Schrift. Die Grade-Logos sind teils dunkel gezeichnet und bekommen auf Navy dieselbe weisse Plakette wie im Dunkelmodus. */ #hc-mk #a-grades{background:var(--brand-navy);color:#eaf3f6;padding-top:56px;padding-bottom:64px;margin-top:74px;} #hc-mk #a-grades h2{color:#fff;} #hc-mk #a-grades .sl{color:rgba(234,243,246,.72);} #hc-mk #a-grades .aa-grows{border-top-color:rgba(255,255,255,.85);} #hc-mk #a-grades .aa-grow{border-bottom-color:rgba(255,255,255,.14);} #hc-mk #a-grades .aa-grow-sep{border-top-color:rgba(255,255,255,.85);} #hc-mk #a-grades .aa-grow:hover{background:rgba(255,255,255,.06);} #hc-mk #a-grades .aa-grow h3{color:#fff;} #hc-mk #a-grades .aa-grow .d{color:rgba(234,243,246,.66);} #hc-mk #a-grades .aa-grow .m{color:rgba(234,243,246,.66);} #hc-mk #a-grades .aa-grow .m b{color:rgba(234,243,246,.45);} #hc-mk #a-grades .aa-grow .ar{color:rgba(234,243,246,.5);} #hc-mk #a-grades .aa-gnote{color:rgba(234,243,246,.55);} #hc-mk #a-grades .glogo{background:#fff;border-radius:8px;padding:5px 8px;} /* Der folgende Abschnitt 03 braucht nach dem Band wieder Luft */ #hc-mk #a-trend{padding-top:74px;} /* Marcel 28.07.: Display-Kacheln im "Nicht nur Kits"-Band DEUTLICH groesser — "man erkennt da garnichts". Rechte Spalte breiter, Karten von 170 auf 270px. */ #hc-mk .aa-x .wrap{grid-template-columns:1fr 580px;} #hc-mk .aa-xcards{height:380px;} #hc-mk .aa-xc{width:280px;} #hc-mk .aa-xc.c1{left:0;top:56px;} #hc-mk .aa-xc.c2{left:274px;top:12px;} #hc-mk .aa-xc .zimg{padding:16px;} @media (max-width:1199px){ #hc-mk .aa-x .wrap{grid-template-columns:1fr 440px;} #hc-mk .aa-xcards{height:300px;} #hc-mk .aa-xc{width:215px;} #hc-mk .aa-xc.c2{left:210px;} } @media (max-width:839px){ #hc-mk .aa-xcards{height:230px;} #hc-mk .aa-xc{width:165px;} #hc-mk .aa-xc.c2{left:160px;} } /* FD-63 · "Beliebte Kits" auf den ECHTEN Produktkachel-Standard v1 (Marcels Abnahme-Frage 28.07.: 5 Abweichungen gemessen). Raster von 5 auf 3 Spalten — 232px verletzten die harte 286px-Mindestbreite des Standards; 3 Spalten gross = ~380px. Preis zurueck auf Standard-30px (der 24px-Notfix war nur das Symptom der zu schmalen Kacheln). */ #hc-mk .aa-kits{grid-template-columns:repeat(3,1fr);gap:20px;} #hc-mk .aa-kits .price{font-size:30px;} @media (max-width:1023px){ #hc-mk .aa-kits{grid-template-columns:repeat(2,1fr);} } /* Crossfade-Ebene des Hover-Bildwechslers (Pass HCD-KITS in custom-desktop.js) */ #hc-mk .aa-kits .holo .hcd-img-b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;opacity:0;transition:opacity .28s ease;} /* Marcel 28.07.: Kit-Kacheln eine Stufe kleiner — 4 in einer Reihe. Rechnerisch sauber: (1224px Wrap-Inhalt - 3x16 gap) / 4 = 294px, bleibt ueber der harten 286px-Mindestbreite. Kacheln sind fluid, alles skaliert von selbst mit. Media-Stufen hier neu gesetzt, weil die spaete Basisregel sonst die aelteren Stufen ueberstimmt (Kaskaden-Reihenfolge). */ #hc-mk .aa-kits{grid-template-columns:repeat(4,1fr);gap:16px;} @media (max-width:1199px){ #hc-mk .aa-kits{grid-template-columns:repeat(3,1fr);} } @media (max-width:1023px){ #hc-mk .aa-kits{grid-template-columns:repeat(2,1fr);} } /* Marcel 28.07.: echtes Foto in der Wunsch-Service-Karte (Wunschservice bild.png, 1100x750) — laeuft randlos als cover, die Sticker-Pillen liegen weiter drueber (z-index 3). */ #hc-mk .aa-wvisual .slot .wimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;} /* -------------------------------------------------------------------------------------------- FD-62 · Header kompakter (Marcel 27.07.: "der header ist aktuell noch zu hoch") Gemessen vorher: 184px bis
= Utilbar 40 + Brandrow 92 + Catbar 52. Nachher: 152px = Utilbar 32 + Brandrow 68 + Catbar 52 (minus 32px / -17%). Stellschrauben, alle am Live-DOM verprobt (Injektions-Beweis + Dropdown-Test): · Utilbar: height 40->32 an #utilbar UND dessen .wrap (der Wrap ist ein GRID mit 3 Spalten links/mitte/rechts — display NICHT anfassen, ein Flex-Test hat die Spalten kollidieren lassen). · Brandrow: padding 20/20 -> 10/10 und die Konto-/Merken-Buttons (.a-btn, vorher hoechstes Kind mit 52px) auf 44px — dadurch bestimmt die Suchleiste (48px) die Zeile. Logo (46px) und Suche bleiben unveraendert. · Catbar bleibt BEWUSST bei 52px: Klickflaeche der Hauptnavigation; das Mega-Dropdown dockt weiterhin sauber an (getestet). Nur >=840px — der Mobile-Header-Standard (Brand Book Paragraf 12.2) bleibt unberuehrt. -------------------------------------------------------------------------------------------- */ @media (min-width:840px){ #utilbar{height:32px !important;} #utilbar .wrap{height:32px !important;} .brandrow{padding-top:10px !important;padding-bottom:10px !important;} .brandrow .act .a-btn{height:44px !important;} } /* -------------------------------------------------------------------------------------------- FD-66 · Sticky-Header Desktop (Marcel 28.07., Testnutzer-Feedback: "die Headerleiste soll immer angezeigt bleiben und verschwindet nicht mehr beim Scrollen") BEFUND: header#header traegt im Bestand BEREITS position:sticky + top:0 — aber body{overflow-x:hidden} bricht sticky (die bekannte Overflow-Vorfahren-Falle; html steht schon auf clip, body nicht). Gemessen: bei scrollY 2400 war header.top -2368. FIX: body auf overflow-x:clip — clip beschneidet wie hidden, erzeugt aber keinen Scroll-Container, sticky lebt. Beweis nach Fix: header.top = 0 bei scrollY 2400, scrollWidth == clientWidth (kein Quer-Overflow). Dazu: scroll-padding-top 136px, damit Anker-Spruenge (Sprungnav 01-06, #a-grades usw.) nicht unter dem klebenden Header (120px) landen; z-index 200 = ueber Seiteninhalt (max z6 in Kacheln), unter Modals/Cookie (>1000). Utilbar scrollt bewusst weg — kleben Logo + Suche + Navigation. Nur >=840px, Mobile-Zone unberuehrt. -------------------------------------------------------------------------------------------- */ @media (min-width:840px){ body{overflow-x:clip !important;} html{scroll-padding-top:136px;} header#header{z-index:200;} } /* -------------------------------------------------------------------------------------------- FD-67 · /model-kit-zubehoer — Premium-Seite (Claude-Design-Mockup 'Model-Kit-Zubehoer Premium Design', Projekt 42fc2723, 28.07.2026). Das Mockup kam dank Briefing bereits fertig gescopt (#hc-mkz, Praefix mkz-), mit allen 3 Media-Stufen und nur Shop-Variablen — hier 1:1 uebernommen; einzige Aenderung: die Preview-Theme-Regel des Mockups entfernt. Produktkacheln stylt weiterhin golive-content.css (Standard-Markup). -------------------------------------------------------------------------------------------- */ /* ===== Model-Kit-Zubehör · alles unter #hc-mkz, Präfix mkz- · nur Shop-Variablen ===== */ #hc-mkz{color:var(--text);font-family:var(--font-body);} #hc-mkz .mkz-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} #hc-mkz .mkz-grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-mkz .mkz-kick{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);} #hc-mkz .mkz-sec{padding:72px 0 0;} #hc-mkz .mkz-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:26px;} #hc-mkz .mkz-shead h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;margin-top:10px;} #hc-mkz .mkz-slead{font-size:15px;line-height:1.6;color:var(--muted);max-width:440px;text-wrap:pretty;} #hc-mkz .mkz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:800;font-size:15px;text-decoration:none;transition:.22s var(--ease);} #hc-mkz .mkz-btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow);} #hc-mkz .mkz-btn-primary:hover{transform:translateY(-2px);} #hc-mkz .mkz-btn-ghost{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border);} #hc-mkz .mkz-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);} #hc-mkz .mkz-arrow{width:13px;height:13px;flex:none;} /* ---- Hero ---- */ #hc-mkz .mkz-hero{background:var(--hero-grad);padding:64px 0 72px;overflow:hidden;} #hc-mkz .mkz-hero .mkz-wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;} #hc-mkz .mkz-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:var(--card);border-radius:var(--r-pill);padding:8px 16px;box-shadow:inset 0 0 0 1px var(--border-soft);} #hc-mkz .mkz-hero h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-.025em;margin-top:20px;} #hc-mkz .mkz-lead{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:520px;margin-top:18px;text-wrap:pretty;} #hc-mkz .mkz-lead b{color:var(--text);} #hc-mkz .mkz-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} #hc-mkz .mkz-figs{display:flex;gap:0;margin-top:34px;} #hc-mkz .mkz-fig{padding:0 26px;border-left:1px solid var(--border);} #hc-mkz .mkz-fig:first-child{padding-left:0;border-left:0;} #hc-mkz .mkz-fig b{font-family:var(--font-display);font-weight:800;font-size:26px;display:block;} #hc-mkz .mkz-fig span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px;display:block;} /* Hero-Bühne */ #hc-mkz .mkz-stage{position:relative;min-height:480px;} #hc-mkz .mkz-slide{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:.5s var(--ease);pointer-events:none;display:flex;flex-direction:column;gap:14px;} #hc-mkz .mkz-slide.on{opacity:1;transform:none;pointer-events:auto;} #hc-mkz .mkz-tagchip{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--card);color:var(--text);border-radius:var(--r-pill);padding:7px 13px;box-shadow:var(--el-2);} #hc-mkz .mkz-shot{position:relative;flex:1;background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--border-soft),var(--el-2);overflow:hidden;} #hc-mkz .mkz-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;} #hc-mkz .mkz-plate{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--el-3);padding:16px 20px;} #hc-mkz .mkz-plate .mkz-pcat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);} #hc-mkz .mkz-plate h3{font-size:17px;letter-spacing:-.015em;margin-top:3px;} #hc-mkz .mkz-plate .mkz-pprice{font-family:var(--font-display);font-weight:800;font-size:19px;white-space:nowrap;} #hc-mkz .mkz-pbtn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--primary);color:var(--primary-ink);font-family:var(--font-display);font-weight:800;font-size:13.5px;text-decoration:none;box-shadow:var(--glow);transition:.22s var(--ease);} #hc-mkz .mkz-pbtn:hover{transform:translateY(-2px);} #hc-mkz .mkz-dots{position:absolute;top:18px;right:18px;z-index:2;display:flex;gap:7px;} #hc-mkz .mkz-dots button{width:9px;height:9px;border-radius:50%;background:var(--border);padding:0;transition:.2s;} #hc-mkz .mkz-dots button.on{background:var(--primary);transform:scale(1.25);} /* ---- Sprungnavigation ---- */ #hc-mkz .mkz-idx{border-bottom:1px solid var(--border-soft);background:var(--bg);} #hc-mkz .mkz-idx .mkz-wrap{display:flex;gap:10px;overflow-x:auto;padding-top:16px;padding-bottom:16px;scrollbar-width:none;} #hc-mkz .mkz-idx .mkz-wrap::-webkit-scrollbar{display:none;} #hc-mkz .mkz-idx a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:var(--r-pill);background:var(--card);box-shadow:inset 0 0 0 1px var(--border-soft);font-size:13.5px;font-weight:700;color:var(--text);text-decoration:none;transition:.2s var(--ease);} #hc-mkz .mkz-idx a i{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:11.5px;color:var(--primary);} #hc-mkz .mkz-idx a:hover{background:var(--primary);color:#fff;box-shadow:none;} #hc-mkz .mkz-idx a:hover i{color:#fff;} /* ---- 01 Kategorien ---- */ #hc-mkz .mkz-kats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} #hc-mkz .mkz-kat{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;text-decoration:none;color:inherit;transition:.22s var(--ease);} #hc-mkz .mkz-kat:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--primary),0 24px 50px -28px var(--primary);} #hc-mkz .mkz-kat .mkz-kim{position:relative;aspect-ratio:4/3;background:var(--surface-2);} #hc-mkz .mkz-kat .mkz-kim img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px;} #hc-mkz .mkz-kat .mkz-knum{position:absolute;top:12px;left:12px;font-family:var(--font-display);font-weight:800;font-size:11.5px;background:var(--card);border-radius:8px;padding:5px 9px;box-shadow:var(--el-1);} #hc-mkz .mkz-kat .mkz-kb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} #hc-mkz .mkz-kat h3{font-size:19px;letter-spacing:-.015em;} #hc-mkz .mkz-kat p{font-size:13.5px;line-height:1.5;color:var(--muted);} #hc-mkz .mkz-kat .mkz-go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);margin-top:auto;padding-top:6px;} /* ---- 02 Build-Station ---- */ #hc-mkz .mkz-steps{border-top:2px solid var(--text);} #hc-mkz .mkz-step{display:grid;grid-template-columns:88px 1.3fr 1fr auto;gap:24px;align-items:center;padding:22px 10px;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit;transition:.18s var(--ease);} #hc-mkz .mkz-step:hover{background:var(--card-hi);} #hc-mkz .mkz-step .mkz-scode{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--primary);} #hc-mkz .mkz-step h3{font-size:20px;letter-spacing:-.015em;} #hc-mkz .mkz-step .mkz-sdesc{font-size:13.5px;color:var(--muted);margin-top:4px;} #hc-mkz .mkz-step .mkz-sgroup{font-size:13px;font-weight:700;color:var(--muted);} #hc-mkz .mkz-step .mkz-sprice{font-family:var(--font-display);font-weight:800;font-size:17px;white-space:nowrap;} #hc-mkz .mkz-snote{font-size:13px;color:var(--dim);margin-top:14px;} /* ---- 03 Sortiment: Produktkacheln stylt der Shop (kein eigenes CSS!) ---- */ #hc-mkz .mkz-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:18px;} /* ---- 04 Marken ---- */ #hc-mkz .mkz-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} #hc-mkz .mkz-brand{background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;} #hc-mkz .mkz-blogoslot{height:44px;display:flex;align-items:center;} #hc-mkz .mkz-blogo{max-height:44px;max-width:170px;width:auto;} #hc-mkz .mkz-bword{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.015em;} #hc-mkz .mkz-brand p{font-size:13.5px;line-height:1.55;color:var(--muted);} #hc-mkz .mkz-brand a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;margin-top:auto;padding-top:8px;} /* ---- 05 Wunsch-Service · Navy-Band ---- */ #hc-mkz .mkz-wband{margin-top:72px;background:var(--brand-navy);color:#eaf3f6;padding:64px 0 68px;} #hc-mkz .mkz-wband .mkz-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;} #hc-mkz .mkz-wband .mkz-kick{color:var(--brand-orange);} #hc-mkz .mkz-wband h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.02em;color:#fff;margin-top:12px;} #hc-mkz .mkz-wband .mkz-wgrad{background:linear-gradient(90deg,var(--brand-orange),var(--brand-mint));-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-mkz .mkz-wband .mkz-wlead{font-size:15.5px;line-height:1.65;color:rgba(234,243,246,.78);margin-top:16px;max-width:520px;text-wrap:pretty;} #hc-mkz .mkz-wband .mkz-wlead b{color:#fff;} #hc-mkz .mkz-wcta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;} #hc-mkz .mkz-wnote{font-size:12.5px;color:rgba(234,243,246,.55);} #hc-mkz .mkz-wsteps{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.14);} #hc-mkz .mkz-wstep{display:flex;gap:18px;align-items:flex-start;padding:20px 4px;border-bottom:1px solid rgba(255,255,255,.14);} #hc-mkz .mkz-wstep b{flex:none;width:38px;height:38px;border-radius:50%;background:var(--brand-orange);color:#1a0a00;font-family:var(--font-display);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;} #hc-mkz .mkz-wstep h4{font-size:16px;color:#fff;} #hc-mkz .mkz-wstep p{font-size:13px;line-height:1.5;color:rgba(234,243,246,.65);margin-top:4px;} /* ---- 06 Service ---- */ #hc-mkz .mkz-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--text);} #hc-mkz .mkz-sv{padding:24px 26px 26px 0;border-right:1px solid var(--border-soft);} #hc-mkz .mkz-sv:last-child{border-right:0;} #hc-mkz .mkz-sv+ .mkz-sv{padding-left:26px;} #hc-mkz .mkz-sv h3{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.01em;} #hc-mkz .mkz-sv h3 svg{color:var(--primary);flex:none;} #hc-mkz .mkz-sv p{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:10px;} #hc-mkz .mkz-sv a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;margin-top:12px;} /* ---- Cross-Sell · Navy ---- */ #hc-mkz .mkz-x{margin-top:72px;background:var(--brand-navy);color:#eaf3f6;padding:56px 0 60px;text-align:center;} #hc-mkz .mkz-x h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;color:#fff;} #hc-mkz .mkz-x p{font-size:15px;line-height:1.6;color:rgba(234,243,246,.75);max-width:560px;margin:14px auto 0;text-wrap:pretty;} #hc-mkz .mkz-xb{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;} #hc-mkz .mkz-xpills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px;} #hc-mkz .mkz-xpills a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:rgba(234,243,246,.85);font-size:12.5px;font-weight:700;text-decoration:none;transition:.2s;} #hc-mkz .mkz-xpills a:hover{background:var(--brand-orange);color:#1a0a00;box-shadow:none;} #hc-mkz .mkz-x .mkz-btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);} #hc-mkz .mkz-x .mkz-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand-orange);color:var(--brand-orange);} /* ---- Newsletter ---- */ #hc-mkz .mkz-news{padding:72px 0 84px;text-align:center;} #hc-mkz .mkz-news h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;} #hc-mkz .mkz-news p{font-size:14px;color:var(--muted);margin-top:10px;} #hc-mkz .mkz-form{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;} #hc-mkz .mkz-form input{width:min(360px,100%);padding:14px 20px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--card);font-family:var(--font-body);font-size:14.5px;color:var(--text);outline:none;} #hc-mkz .mkz-form input:focus{border-color:var(--primary);} /* ---- Media Queries (Pflicht: 1199 / 1023 / 839) ---- */ @media (max-width:1199px){ #hc-mkz .mkz-hero .mkz-wrap{gap:36px;} #hc-mkz .mkz-kats{grid-template-columns:repeat(2,1fr);} #hc-mkz .mkz-brands{grid-template-columns:repeat(2,1fr);} } @media (max-width:1023px){ #hc-mkz .mkz-hero .mkz-wrap{grid-template-columns:1fr;} #hc-mkz .mkz-stage{min-height:420px;} #hc-mkz .mkz-shead{flex-direction:column;align-items:flex-start;gap:12px;} #hc-mkz .mkz-step{grid-template-columns:64px 1.4fr 1fr auto;gap:18px;} #hc-mkz .mkz-wband .mkz-wrap{grid-template-columns:1fr;gap:36px;} #hc-mkz .mkz-svc{grid-template-columns:1fr;} #hc-mkz .mkz-sv{border-right:0;border-bottom:1px solid var(--border-soft);padding:20px 0;} #hc-mkz .mkz-sv+ .mkz-sv{padding-left:0;} #hc-mkz .mkz-sv:last-child{border-bottom:0;} } @media (max-width:839px){ #hc-mkz .mkz-sec{padding-top:52px;} #hc-mkz .mkz-hero{padding:44px 0 52px;} #hc-mkz .mkz-hero h1{font-size:clamp(34px,9vw,44px);} #hc-mkz .mkz-figs{flex-wrap:wrap;gap:14px 0;} #hc-mkz .mkz-fig{padding:0 18px;} #hc-mkz .mkz-kats{grid-template-columns:1fr;} #hc-mkz .mkz-brands{grid-template-columns:1fr;} #hc-mkz .mkz-step{grid-template-columns:44px 1fr auto;} #hc-mkz .mkz-step .mkz-sgroup{display:none;} #hc-mkz .mkz-step .mkz-scode{font-size:20px;} #hc-mkz .mkz-wband,#hc-mkz .mkz-x{margin-top:52px;padding:44px 0 48px;} #hc-mkz .mkz-cta .mkz-btn,#hc-mkz .mkz-xb .mkz-btn{flex:1 1 100%;} } /* FD-68e · Marcel 28.07.: Sortiment-Raster exakt wie "03 Beliebte Kits" auf /model-kits. Der Mockup-Emulations-Block (#hc-mkz .prod …) ist raus — die Kacheln stylt jetzt der Shop-Standard (weisse Karte, transparentes Bild, Preis 30px, 42px-Pill). Hier stehen nur noch dieselben Ergaenzungen, die auch .aa-kits auf /model-kits traegt. */ #hc-mkz .mkz-pgrid .prod .pim{aspect-ratio:1/1;height:auto;background:#fff;} html[data-theme="midnight"] #hc-mkz .mkz-pgrid .prod .pim{background:#13242f;} #hc-mkz .mkz-pgrid .price{font-size:30px;} #hc-mkz .mkz-pgrid .rowend{flex-wrap:wrap;gap:10px;} #hc-mkz .mkz-pgrid .holo .hcd-img-b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;opacity:0;transition:opacity .28s ease;} #hc-mkz .mkz-pgrid{grid-template-columns:repeat(4,1fr);gap:16px;} @media (max-width:1199px){ #hc-mkz .mkz-pgrid{grid-template-columns:repeat(3,1fr);} } @media (max-width:1023px){ #hc-mkz .mkz-pgrid{grid-template-columns:repeat(2,1fr);} } /* FD-67 Ehrlichkeits-Korrektur: das Mockup listete Gaahleri + Mr. Hobby — beide ohne einen einzigen Artikel im Sortiment. Ersetzt durch die belegte dritte Marke Bandai (Action Bases); Marken-Raster von 4 auf 3 Spalten. */ #hc-mkz .mkz-brands{grid-template-columns:repeat(3,1fr);} /* ================= FD-68 · Marcel 28.07. · /model-kit-zubehoer wie /model-kits ================= */ /* (a) Sprungleiste im aa-idx-Stil: volle Segment-Leiste statt Pillen-Reihe — flex:1-Segmente, Baseline-Nummer, Trennlinien, Hover fuellt das ganze Segment orange. Marcel 28.07.: Hintergrund der Leiste weiss (var(--card)) statt Seiten-Creme. */ #hc-mkz .mkz-idx{background:var(--card);} #hc-mkz .mkz-idx .mkz-wrap{gap:0;padding-top:0;padding-bottom:0;overflow-x:visible;} #hc-mkz .mkz-idx a{flex:1;display:flex;align-items:baseline;gap:10px;min-height:0;padding:18px 6px 18px 18px;border-radius:0;background:transparent;box-shadow:none;font-size:13px;font-weight:700;color:var(--muted);border-left:1px solid var(--border-soft);transition:background .18s var(--ease), color .18s var(--ease);} #hc-mkz .mkz-idx a:first-child{border-left:none;padding-left:6px;} #hc-mkz .mkz-idx a i{font-size:12px;} #hc-mkz .mkz-idx a:hover, #hc-mkz .mkz-idx a:focus-visible{background:var(--primary);color:#fff;box-shadow:none;} #hc-mkz .mkz-idx a:hover i, #hc-mkz .mkz-idx a:focus-visible i{color:#fff;} @media (max-width:1023px){ #hc-mkz .mkz-idx .mkz-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} #hc-mkz .mkz-idx a{flex:0 0 auto;min-width:170px;} } /* (b) Kategorie-Kacheln nach Brand Book: feine Umrandung im Ruhezustand, bei Hover der KOMPLETTE orange Rand (Overlay-::after — der inset-Shadow wird vom Bildbereich verdeckt) und KEINE Hintergrundfarbe hinter den Bildern. Muster = aa-tile-Fix von /model-kits. */ #hc-mkz .mkz-kat{box-shadow:none;} #hc-mkz .mkz-kat:hover{box-shadow:var(--el-3);} #hc-mkz .mkz-kat .mkz-kim{background:transparent;} #hc-mkz .mkz-kat::after{content:"";position:absolute;inset:0;border:1.5px solid var(--border-soft);border-radius:inherit;pointer-events:none;z-index:6;transition:border-color .18s ease;} #hc-mkz .mkz-kat:hover::after, #hc-mkz .mkz-kat:focus-within::after{border-color:var(--primary);} /* (c) Marken-Sektion wie der Brand-Bereich auf /model-kits: grosse Logo-Kacheln (16/10-Slot mit Original-Logo, Textblock darunter), Overlay-Rahmen wie (b), Dark-Mode = weisse Logo-Plakette. */ #hc-mkz .mkz-btile{position:relative;display:block;background:var(--card);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:.25s var(--ease);} #hc-mkz .mkz-btile:hover{transform:translateY(-4px);box-shadow:var(--el-3);} #hc-mkz .mkz-btile .mkz-bslot{position:relative;aspect-ratio:16/10;background:transparent;} #hc-mkz .mkz-btile .mkz-blogo{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:34px;} :root[data-theme="midnight"] #hc-mkz .mkz-btile .mkz-blogo{background:#fff;} #hc-mkz .mkz-btile .mkz-bnum{position:absolute;top:12px;left:12px;z-index:7;font-family:var(--font-display);font-weight:800;font-size:11.5px;background:var(--card);border-radius:8px;padding:5px 9px;box-shadow:var(--el-1);} #hc-mkz .mkz-btile .mkz-btb{padding:20px 22px 24px;} #hc-mkz .mkz-btile h3{font-size:19px;letter-spacing:-.015em;} #hc-mkz .mkz-btile p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:6px;} #hc-mkz .mkz-btile .mkz-bgo{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);margin-top:12px;} #hc-mkz .mkz-btile::after{content:"";position:absolute;inset:0;border:1.5px solid var(--border-soft);border-radius:inherit;pointer-events:none;z-index:6;transition:border-color .18s ease;} #hc-mkz .mkz-btile:hover::after, #hc-mkz .mkz-btile:focus-within::after{border-color:var(--primary);} /* FD-69 · Marcel 28.07. (Abschluss-Runde) */ /* (a) Sektion 01 zeigt jetzt alle 7 echten Zubehoer-Kategorieseiten (4+3). Kategorien ohne Artikelbild bekommen eine gestaltete Typo-Flaeche im Outline-Stil von /model-kits statt eines Fake-Fotos (Regel: keine Demo-Bilder). */ #hc-mkz .mkz-kat .mkz-ktypo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:.06em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--dim);paint-order:stroke fill;opacity:.75;} /* (b) Mega-Dropdown "Model Kits & Zubehoer": die ZUBEHOER-Zeile bekommt rechts die Schaltflaeche zur neuen Hub-Seite (Injektion via HCD-MEGA-ZUB in custom-desktop.js). */ @media (min-width:840px){ #header .mega2-ghead.hcd-ghead-flex, #header span.mega2-head.hcd-ghead-flex{display:flex!important;align-items:center;justify-content:space-between;gap:14px;} #header .hcd-mzub{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--primary);text-decoration:none;white-space:nowrap;text-transform:none;} #header .hcd-mzub:hover{text-decoration:underline;} #header .hcd-mzub svg{flex:none;} } /* ================= FD-70 · 28.07.2026 · /sammelkarten Premium (#hc-skx) ================= Quelle: Claude-Design-Mockup "Sammelkarten Premium Design.html" (Projekt 42fc2723). Direkt mit den finalen /model-kits-Learnings portiert (einheitliche Linie, Marcel): - Sprungleiste im aa-idx-Stil mit WEISSEM Hintergrund (statt Mockup-Pillen) - Poster/Mini-Kacheln mit ECHTEM Rand statt inset-Shadow (Kinder verdecken ihn sonst) - Sortiment = Shop-Kachel-Standard (dazu #hc-skx in der golive-:is()-Liste!) - Dark-Mode: weisse Logo-Plakette wie auf /model-kits */ #hc-skx{color:var(--text);font-family:var(--font-body);} #hc-skx .skx-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} #hc-skx .skx-grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-skx .skx-kick{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);} #hc-skx .skx-sec{padding:72px 0 0;} #hc-skx .skx-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:26px;} #hc-skx .skx-shead h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;margin-top:10px;} #hc-skx .skx-slead{font-size:15px;line-height:1.6;color:var(--muted);max-width:440px;text-wrap:pretty;} #hc-skx .skx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:800;font-size:15px;text-decoration:none;transition:.22s var(--ease);} #hc-skx .skx-btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow);} #hc-skx .skx-btn-primary:hover{transform:translateY(-2px);} #hc-skx .skx-btn-ghost{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border);} #hc-skx .skx-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);} #hc-skx .skx-arrow{width:13px;height:13px;flex:none;} /* ---- Hero ---- */ #hc-skx .skx-hero{background:var(--hero-grad);padding:64px 0 72px;overflow:hidden;} #hc-skx .skx-hero .skx-wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;} #hc-skx .skx-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:var(--card);border-radius:var(--r-pill);padding:8px 16px;box-shadow:inset 0 0 0 1px var(--border-soft);} #hc-skx .skx-hero h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-.025em;margin-top:20px;} #hc-skx .skx-lead{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:520px;margin-top:18px;text-wrap:pretty;} #hc-skx .skx-lead b{color:var(--text);} #hc-skx .skx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} #hc-skx .skx-figs{display:flex;margin-top:34px;} #hc-skx .skx-fig{padding:0 26px;border-left:1px solid var(--border);} #hc-skx .skx-fig:first-child{padding-left:0;border-left:0;} #hc-skx .skx-fig b{font-family:var(--font-display);font-weight:800;font-size:26px;display:block;} #hc-skx .skx-fig span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px;display:block;} #hc-skx .skx-stage{position:relative;min-height:480px;} #hc-skx .skx-slide{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:.5s var(--ease);pointer-events:none;display:flex;flex-direction:column;gap:14px;} #hc-skx .skx-slide.on{opacity:1;transform:none;pointer-events:auto;} #hc-skx .skx-tagchip{position:absolute;top:14px;left:14px;z-index:3;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--card);color:var(--text);border-radius:var(--r-pill);padding:7px 13px;box-shadow:var(--el-2);} #hc-skx .skx-shot{position:relative;flex:1;background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--border-soft),var(--el-2);overflow:hidden;} #hc-skx .skx-shot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(143,233,218,.14) 8%,rgba(123,108,240,.10) 38%,rgba(255,138,30,.12) 72%,rgba(143,233,218,.10));mix-blend-mode:soft-light;} #hc-skx .skx-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;} #hc-skx .skx-plate{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--el-3);padding:16px 20px;} #hc-skx .skx-plate .skx-pcat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);} #hc-skx .skx-plate h3{font-size:17px;letter-spacing:-.015em;margin-top:3px;} #hc-skx .skx-instock{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-teal);margin-top:4px;} #hc-skx .skx-pprice{font-family:var(--font-display);font-weight:800;font-size:19px;white-space:nowrap;} #hc-skx .skx-pbtn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--primary);color:var(--primary-ink);font-family:var(--font-display);font-weight:800;font-size:13.5px;text-decoration:none;box-shadow:var(--glow);transition:.22s var(--ease);} #hc-skx .skx-pbtn:hover{transform:translateY(-2px);} #hc-skx .skx-dots{position:absolute;top:18px;right:18px;z-index:3;display:flex;gap:7px;} #hc-skx .skx-dots button{width:9px;height:9px;border-radius:50%;background:var(--border);padding:0;transition:.2s;} #hc-skx .skx-dots button.on{background:var(--primary);transform:scale(1.25);} /* ---- Sprungleiste · aa-idx-Stil, weisser Hintergrund (FD-68-Linie) ---- */ #hc-skx .skx-idx{border-bottom:1px solid var(--border-soft);background:var(--card);} #hc-skx .skx-idx .skx-wrap{display:flex;gap:0;} #hc-skx .skx-idx a{flex:1;display:flex;align-items:baseline;gap:10px;padding:18px 6px 18px 18px;font-size:13px;font-weight:700;color:var(--muted);border-left:1px solid var(--border-soft);text-decoration:none;transition:background .18s var(--ease), color .18s var(--ease);} #hc-skx .skx-idx a:first-child{border-left:none;padding-left:6px;} #hc-skx .skx-idx a i{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--primary);} #hc-skx .skx-idx a:hover, #hc-skx .skx-idx a:focus-visible{background:var(--primary);color:#fff;} #hc-skx .skx-idx a:hover i, #hc-skx .skx-idx a:focus-visible i{color:#fff;} /* ---- 01 TCG-Welten: Premium-Poster im aa-tile-Stil von /model-kits (FD-72, Marcel 29.07.): weisse Kachel, grosser Logo-Slot oben, Textblock unten — kompakter und 4 pro Reihe (4+3). ---- */ #hc-skx .skx-posters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} #hc-skx .skx-poster{position:relative;display:block;border-radius:var(--r-lg);background:var(--card);overflow:hidden;text-decoration:none;color:inherit;transition:.24s var(--ease);} #hc-skx .skx-poster::after{content:"";position:absolute;inset:0;border:1.5px solid var(--border-soft);border-radius:inherit;pointer-events:none;z-index:6;transition:border-color .18s ease;} #hc-skx .skx-poster:hover{transform:translateY(-4px);box-shadow:var(--el-3);} #hc-skx .skx-poster:hover::after, #hc-skx .skx-poster:focus-within::after{border-color:var(--primary);} #hc-skx .skx-poster .skx-pnum{position:absolute;top:12px;left:12px;z-index:7;font-family:var(--font-display);font-weight:800;font-size:11.5px;background:var(--card);border-radius:8px;padding:5px 9px;box-shadow:var(--el-1);} #hc-skx .skx-poster .skx-bslot{position:relative;aspect-ratio:16/10;background:transparent;} #hc-skx .skx-poster .skx-bslot .skx-logo{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:28px;} #hc-skx .skx-poster .skx-btb{padding:16px 18px 20px;} #hc-skx .skx-poster h3{font-size:17px;letter-spacing:-.015em;} #hc-skx .skx-poster p{font-size:13px;line-height:1.5;color:var(--muted);margin-top:5px;} #hc-skx .skx-poster .skx-go{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--primary);margin-top:10px;} #hc-skx .skx-logo{max-height:52px;max-width:75%;width:auto;} :root[data-theme="midnight"] #hc-skx .skx-logo{background:#fff;border-radius:8px;padding:5px 9px;} /* Minis (FD-72b, Marcel 29.07.): die 5 restlichen Welten als Logo-Kacheln in EINER 5er-Reihe, ~50%% der Premium-Poster-Hoehe — gleiche Kachel-Sprache (feiner Rand, Orange-Hover). */ #hc-skx .skx-mosaic{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:16px;} #hc-skx .skx-mini{position:relative;display:block;border-radius:var(--r-lg);background:var(--card);overflow:hidden;text-decoration:none;color:inherit;transition:.2s var(--ease);} #hc-skx .skx-mini::after{content:"";position:absolute;inset:0;border:1.5px solid var(--border-soft);border-radius:inherit;pointer-events:none;z-index:6;transition:border-color .18s ease;} #hc-skx .skx-mini:hover{transform:translateY(-3px);box-shadow:var(--el-3);} #hc-skx .skx-mini:hover::after, #hc-skx .skx-mini:focus-within::after{border-color:var(--primary);} #hc-skx .skx-mini .skx-logoslot{position:relative;display:block;aspect-ratio:16/10;} #hc-skx .skx-mini .skx-logoslot .skx-logo{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:22px;} #hc-skx .skx-mini > svg{position:absolute;right:12px;bottom:12px;color:var(--primary);} @media (max-width:1199px){ #hc-skx .skx-mosaic{grid-template-columns:repeat(3,1fr);} } @media (max-width:839px){ #hc-skx .skx-mosaic{grid-template-columns:repeat(2,1fr);} } /* ---- 02 Releases · FD-73 (Marcel 29.07.): unsichtbare Tabelle — feste Spalten Code | Set | Franchise | Sprache | Bestand | Preis, ALLE Zellen linksbuendig, keine sichtbare Tabelle, keine Spaltenkoepfe. Einheitliche Code-Badges (feste Breite), damit die Set-Namen exakt untereinander beginnen. ---- */ #hc-skx .skx-rel{border-top:2px solid var(--text);} #hc-skx .skx-rrow{display:grid;grid-template-columns:84px minmax(0,1.6fr) 170px 90px 110px 110px 92px;gap:20px;align-items:center;padding:20px 10px;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit;transition:.18s var(--ease);} #hc-skx .skx-rrow:hover{background:var(--card-hi);} #hc-skx .skx-rcode{justify-self:start;min-width:76px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--primary-ink);background:var(--primary);border-radius:8px;padding:6px 10px;white-space:nowrap;} #hc-skx .skx-rname{min-width:0;} #hc-skx .skx-rrow h3{font-size:19px;letter-spacing:-.015em;text-align:left;} #hc-skx .skx-rfr{font-size:13px;font-weight:700;color:var(--muted);text-align:left;} #hc-skx .skx-rlang{font-size:13px;font-weight:700;color:var(--muted);text-align:left;} #hc-skx .skx-rst{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);text-align:left;white-space:nowrap;} #hc-skx .skx-rst.in{color:var(--brand-teal);} #hc-skx .skx-rpr{font-family:var(--font-display);font-weight:800;font-size:17px;white-space:nowrap;text-align:left;} #hc-skx .skx-rarr{color:var(--primary);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;} #hc-skx .skx-rarr svg{flex:none;} #hc-skx .skx-rarr em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.03em;white-space:nowrap;} /* ---- 03 Sortiment: Shop-Standard + aa-kits-Paritaet (FD-68e-Linie) ---- */ #hc-skx .skx-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} #hc-skx .skx-pgrid .prod .pim{aspect-ratio:1/1;height:auto;background:#fff;} html[data-theme="midnight"] #hc-skx .skx-pgrid .prod .pim{background:#13242f;} #hc-skx .skx-pgrid .price{font-size:30px;} #hc-skx .skx-pgrid .rowend{flex-wrap:wrap;gap:10px;} #hc-skx .skx-pgrid .holo .hcd-img-b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;opacity:0;transition:opacity .28s ease;} /* ---- 04 Einzelkarten & Ankauf · Navy-Band ---- */ #hc-skx .skx-nband{margin-top:72px;background:var(--brand-navy);color:#eaf3f6;padding:64px 0 68px;} #hc-skx .skx-nband .skx-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;} #hc-skx .skx-nband .skx-kick{color:var(--brand-orange);} #hc-skx .skx-nband h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.02em;color:#fff;margin-top:12px;} #hc-skx .skx-ngrad{background:linear-gradient(90deg,var(--brand-orange),var(--brand-mint));-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-skx .skx-nlead{font-size:15.5px;line-height:1.65;color:rgba(234,243,246,.78);margin-top:16px;max-width:460px;text-wrap:pretty;} #hc-skx .skx-ncards{display:flex;flex-direction:column;gap:14px;} #hc-skx .skx-ncard{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(255,255,255,.06);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:22px 24px;text-decoration:none;color:inherit;transition:.2s var(--ease);} #hc-skx .skx-ncard:hover{box-shadow:inset 0 0 0 1px var(--brand-orange);transform:translateY(-2px);} #hc-skx .skx-ncard h3{font-size:19px;color:#fff;letter-spacing:-.015em;} #hc-skx .skx-ncard p{font-size:13px;line-height:1.5;color:rgba(234,243,246,.65);margin-top:5px;} #hc-skx .skx-ncard svg{color:var(--brand-orange);flex:none;} #hc-skx .skx-nnote{font-size:13px;color:rgba(234,243,246,.6);} #hc-skx .skx-nnote a{color:var(--brand-mint);font-weight:700;text-decoration:none;} /* ---- 05 Kartenschutz ---- */ #hc-skx .skx-guard{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--card);border-radius:var(--r-xl);border:1.5px solid var(--border-soft);padding:34px 38px;} #hc-skx .skx-guard h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;} #hc-skx .skx-guard p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:560px;text-wrap:pretty;} #hc-skx .skx-guard svg{color:var(--primary);flex:none;} /* ---- 06 Service ---- */ #hc-skx .skx-svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--text);} #hc-skx .skx-sv{padding:24px 26px 26px 0;border-right:1px solid var(--border-soft);} #hc-skx .skx-sv:last-child{border-right:0;} #hc-skx .skx-sv+ .skx-sv{padding-left:26px;} #hc-skx .skx-sv h3{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.01em;} #hc-skx .skx-sv h3 svg{color:var(--primary);flex:none;} #hc-skx .skx-sv p{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:10px;} #hc-skx .skx-sv a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;margin-top:12px;margin-right:18px;} /* ---- Cross-Sell (Aurora, damit EIN Navy-Band bleibt) ---- */ #hc-skx .skx-x{margin-top:72px;background:var(--hero-grad);padding:56px 0 60px;text-align:center;} #hc-skx .skx-x h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;} #hc-skx .skx-x p{font-size:15px;line-height:1.6;color:var(--muted);max-width:560px;margin:14px auto 0;text-wrap:pretty;} #hc-skx .skx-xb{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;} /* ---- Newsletter ---- */ #hc-skx .skx-news{padding:72px 0 84px;text-align:center;} #hc-skx .skx-news h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;} #hc-skx .skx-news p{font-size:14px;color:var(--muted);margin-top:10px;} #hc-skx .skx-form{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;} #hc-skx .skx-form input{width:min(360px,100%);padding:14px 20px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--card);font-family:var(--font-body);font-size:14.5px;color:var(--text);outline:none;} #hc-skx .skx-form input:focus{border-color:var(--primary);} /* ---- Media Queries (Pflicht: 1199 / 1023 / 839) ---- */ @media (max-width:1199px){ #hc-skx .skx-hero .skx-wrap{gap:36px;} #hc-skx .skx-posters{grid-template-columns:repeat(2,1fr);} #hc-skx .skx-poster{aspect-ratio:16/10;} #hc-skx .skx-rrow{grid-template-columns:84px minmax(0,1.6fr) 150px 110px 110px 92px;} #hc-skx .skx-rrow .skx-rlang{display:none;} #hc-skx .skx-pgrid{grid-template-columns:repeat(3,1fr);} } @media (max-width:1023px){ #hc-skx .skx-hero .skx-wrap{grid-template-columns:1fr;} #hc-skx .skx-stage{min-height:420px;} #hc-skx .skx-shead{flex-direction:column;align-items:flex-start;gap:12px;} #hc-skx .skx-idx .skx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} #hc-skx .skx-idx a{flex:0 0 auto;min-width:170px;} #hc-skx .skx-nband .skx-wrap{grid-template-columns:1fr;gap:36px;} #hc-skx .skx-svc{grid-template-columns:1fr;} #hc-skx .skx-sv{border-right:0;border-bottom:1px solid var(--border-soft);padding:20px 0;} #hc-skx .skx-sv+ .skx-sv{padding-left:0;} #hc-skx .skx-sv:last-child{border-bottom:0;} #hc-skx .skx-guard{flex-direction:column;align-items:flex-start;} #hc-skx .skx-pgrid{grid-template-columns:repeat(2,1fr);} } @media (max-width:839px){ #hc-skx .skx-sec{padding-top:52px;} #hc-skx .skx-hero{padding:44px 0 52px;} #hc-skx .skx-hero h1{font-size:clamp(34px,9vw,44px);} #hc-skx .skx-figs{flex-wrap:wrap;gap:14px 0;} #hc-skx .skx-fig{padding:0 18px;} #hc-skx .skx-posters{grid-template-columns:1fr;} #hc-skx .skx-poster{aspect-ratio:16/9;} #hc-skx .skx-rrow{grid-template-columns:84px minmax(0,1fr) 100px 92px;gap:14px;} #hc-skx .skx-rrow .skx-rfr,#hc-skx .skx-rrow .skx-rst{display:none;} #hc-skx .skx-rrow h3{font-size:16px;} #hc-skx .skx-nband,#hc-skx .skx-x{margin-top:52px;padding:44px 0 48px;} #hc-skx .skx-cta .skx-btn,#hc-skx .skx-xb .skx-btn{flex:1 1 100%;} } /* FD-71 · Marcel 28.07. (Nacht): (a) 7 Premium-Poster (Pokemon/OnePiece/Gundam/Lorcana/Magic/ Cyberpunk/Riftbound) + 6 Logo-Minis, (b) Kartenschutz auf Position 03 mit 4 Bereichskacheln (Sleeves/Binder/Deckboxen/Playmats) im mkz-kat-Muster: feiner Rand, Overlay-Orange-Hover, Bildbereich transparent, Typo-Flaeche wo (noch) kein Artikelbild existiert. */ #hc-skx .skx-kats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} #hc-skx .skx-kat{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:.22s var(--ease);} #hc-skx .skx-kat:hover{transform:translateY(-4px);box-shadow:var(--el-3);} #hc-skx .skx-kat::after{content:"";position:absolute;inset:0;border:1.5px solid var(--border-soft);border-radius:inherit;pointer-events:none;z-index:6;transition:border-color .18s ease;} #hc-skx .skx-kat:hover::after, #hc-skx .skx-kat:focus-within::after{border-color:var(--primary);} #hc-skx .skx-kat .skx-kim{position:relative;aspect-ratio:4/3;background:transparent;} #hc-skx .skx-kat .skx-kim img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px;} #hc-skx .skx-kat .skx-knum{position:absolute;top:12px;left:12px;z-index:7;font-family:var(--font-display);font-weight:800;font-size:11.5px;background:var(--card);border-radius:8px;padding:5px 9px;box-shadow:var(--el-1);} #hc-skx .skx-kat .skx-ktypo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:.06em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--dim);paint-order:stroke fill;opacity:.75;} #hc-skx .skx-kat .skx-kb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} #hc-skx .skx-kat h3{font-size:19px;letter-spacing:-.015em;} #hc-skx .skx-kat p{font-size:13.5px;line-height:1.5;color:var(--muted);} #hc-skx .skx-kat .skx-go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);margin-top:auto;padding-top:6px;} @media (max-width:1199px){ #hc-skx .skx-kats{grid-template-columns:repeat(2,1fr);} } @media (max-width:839px){ #hc-skx .skx-kats{grid-template-columns:1fr;} } /* FD-74 · Qualitaetskontrolle 29.07. (Marcel-Entscheid): alle drei Hub-Heroes exakt auf den Brand-Book-Standard 664px (Paragraf 3.1, Referenz /pokemon-tcg). /model-kits: externes 64er-Sektions-Polster neutralisieren, Hoehe ueber hgrid-Polster steuern (51 + 560 Stage + 52 + 1 Border = 664). mkz/skx: 64/72 -> 88/96 (88 + 480 Stage + 96 = 664). */ #hc-mk .aa-hero{padding:0;} #hc-mk .aa-hgrid{padding:51px 0 52px;} #hc-mkz .mkz-hero{padding:88px 0 96px;} #hc-skx .skx-hero{padding:88px 0 96px;} /* FD-75 · QK-Nachlese 29.07.: Drei Luecken der golive-Kachelregeln auf den Hub-Grids. Ursache: golive scoped Chip-/Herz-Detailregeln ueber ".grid .card"-Pfade, die Hub-Grids (.aa-kits/.mkz-pgrid/.skx-pgrid) haben diesen Vorfahren nicht. (a) Sprach-/Typ-Chip: exakt die /pokemon-tcg-Referenzwerte (card-hi, 2x6, 10.5/800, r5). */ #hc-mk .aa-kits .lang .lg, #hc-mkz .mkz-pgrid .lang .lg, #hc-skx .skx-pgrid .lang .lg{display:inline-block;background:var(--card-hi);color:var(--muted);padding:2px 6px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;} /* (b) Herz-Toggle sichtbar machen: is-on fuellt das Herz pink wie in der Referenz (#ff5d7a). */ #hc-mk .aa-kits .wish.heart.is-on svg, #hc-mkz .mkz-pgrid .wish.heart.is-on svg, #hc-skx .skx-pgrid .wish.heart.is-on svg{fill:#ff5d7a;color:#ff5d7a;} /* (c) Fly-to-Cart: flyFrom() klont das Kachelbild MIT seinen Inline-Styles (position:absolute, inset:0, padding:8) — die schlagen die .hc-fly-Positionierung und der Klon landet unsichtbar. Der Override gewinnt gegen Inline-Styles und macht die Animation auf den Hubs sichtbar. */ img.hc-fly{position:fixed!important;padding:0!important;margin:0!important;z-index:99999!important;} /* ============================================================================================ FD-77 (29.07.2026) - /sammelkarten-zubehoer Premium (#hc-skz, kLink 182) Portiert aus Claude-Design-Mockup "Sammelkarten-Zubehoer Premium Design". Standards eingebaut: Hero 664px (88+480+96) - Sprungnav aa-idx-Segment (FD-68) - Kategorie-Kacheln = skx-kat-Klon (Overlay-Orange-Hover) - Sortiment = Kachel-Standard- Paritaet inkl. Chips/Herz (Gate 17: Detail-Regeln fuer Hub-Grids in der Zonen-CSS). ============================================================================================ */ #hc-skz{color:var(--text);font-family:var(--font-body);} #hc-skz .skz-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} #hc-skz .skz-grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-skz .skz-kick{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);} #hc-skz .skz-sec{padding:72px 0 0;} #hc-skz .skz-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:26px;} #hc-skz .skz-shead h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;margin-top:10px;} #hc-skz .skz-slead{font-size:15px;line-height:1.6;color:var(--muted);max-width:440px;text-wrap:pretty;} #hc-skz .skz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:800;font-size:15px;text-decoration:none;transition:.22s var(--ease);} #hc-skz .skz-btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow);} #hc-skz .skz-btn-primary:hover{transform:translateY(-2px);} #hc-skz .skz-btn-ghost{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border);} #hc-skz .skz-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);} #hc-skz .skz-arrow{width:13px;height:13px;flex:none;} /* ---- Hero ---- */ #hc-skz .skz-hero{background:var(--hero-grad);padding:88px 0 96px;overflow:hidden;} #hc-skz .skz-hero .skz-wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;} #hc-skz .skz-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:var(--card);border-radius:var(--r-pill);padding:8px 16px;box-shadow:inset 0 0 0 1px var(--border-soft);} #hc-skz .skz-hero h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-.025em;margin-top:20px;} #hc-skz .skz-lead{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:520px;margin-top:18px;text-wrap:pretty;} #hc-skz .skz-lead b{color:var(--text);} #hc-skz .skz-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} #hc-skz .skz-figs{display:flex;margin-top:34px;} #hc-skz .skz-fig{padding:0 26px;border-left:1px solid var(--border);} #hc-skz .skz-fig:first-child{padding-left:0;border-left:0;} #hc-skz .skz-fig b{font-family:var(--font-display);font-weight:800;font-size:26px;display:block;} #hc-skz .skz-fig span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px;display:block;} /* Hero-Bühne · dezenter Sleeve-Glanz auf der Bildfläche */ #hc-skz .skz-stage{position:relative;min-height:480px;} #hc-skz .skz-slide{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:.5s var(--ease);pointer-events:none;display:flex;flex-direction:column;gap:14px;} #hc-skz .skz-slide.on{opacity:1;transform:none;pointer-events:auto;} #hc-skz .skz-tagchip{position:absolute;top:14px;left:14px;z-index:3;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--card);color:var(--text);border-radius:var(--r-pill);padding:7px 13px;box-shadow:var(--el-2);} #hc-skz .skz-shot{position:relative;flex:1;background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--border-soft),var(--el-2);overflow:hidden;} #hc-skz .skz-shot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.2) 46%,transparent 58%);mix-blend-mode:soft-light;} #hc-skz .skz-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;} #hc-skz .skz-plate{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--el-3);padding:16px 20px;} #hc-skz .skz-plate .skz-pcat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);} #hc-skz .skz-plate h3{font-size:17px;letter-spacing:-.015em;margin-top:3px;} #hc-skz .skz-out{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:4px;} #hc-skz .skz-pprice{font-family:var(--font-display);font-weight:800;font-size:19px;white-space:nowrap;} #hc-skz .skz-pbtn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--primary);color:var(--primary-ink);font-family:var(--font-display);font-weight:800;font-size:13.5px;text-decoration:none;box-shadow:var(--glow);transition:.22s var(--ease);} #hc-skz .skz-pbtn:hover{transform:translateY(-2px);} #hc-skz .skz-dots{position:absolute;top:18px;right:18px;z-index:3;display:flex;gap:7px;} #hc-skz .skz-dots button{width:9px;height:9px;border-radius:50%;background:var(--border);padding:0;transition:.2s;} #hc-skz .skz-dots button.on{background:var(--primary);transform:scale(1.25);} /* ---- Sprungnavigation: aa-idx-Segment-Stil (FD-68-Standard) ---- */ #hc-skz .skz-idx{border-bottom:1px solid var(--border-soft);background:var(--card);} #hc-skz .skz-idx .skz-wrap{display:flex;gap:0;} #hc-skz .skz-idx a{flex:1;display:flex;align-items:baseline;gap:10px;padding:18px 6px 18px 18px;font-size:13px;font-weight:700;color:var(--muted);border-left:1px solid var(--border-soft);text-decoration:none;transition:background .18s var(--ease), color .18s var(--ease);} #hc-skz .skz-idx a:first-child{border-left:none;padding-left:6px;} #hc-skz .skz-idx a i{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--primary);} #hc-skz .skz-idx a:hover, #hc-skz .skz-idx a:focus-visible{background:var(--primary);color:#fff;} #hc-skz .skz-idx a:hover i, #hc-skz .skz-idx a:focus-visible i{color:#fff;} /* ---- 01 Kategorien: skx-kat-Klon (feiner Rand + Orange-Overlay-Hover, FD-68b) ---- */ #hc-skz .skz-kats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} #hc-skz .skz-kat{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:.22s var(--ease);} #hc-skz .skz-kat:hover{transform:translateY(-4px);box-shadow:var(--el-3);} #hc-skz .skz-kat::after{content:"";position:absolute;inset:0;border:1.5px solid var(--border-soft);border-radius:inherit;pointer-events:none;z-index:6;transition:border-color .18s ease;} #hc-skz .skz-kat:hover::after, #hc-skz .skz-kat:focus-within::after{border-color:var(--primary);} #hc-skz .skz-kat .skz-kim{position:relative;aspect-ratio:4/3;background:transparent;} #hc-skz .skz-kat .skz-kim img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px;} #hc-skz .skz-kat .skz-knum{position:absolute;top:12px;left:12px;z-index:7;font-family:var(--font-display);font-weight:800;font-size:11.5px;background:var(--card);border-radius:8px;padding:5px 9px;box-shadow:var(--el-1);} #hc-skz .skz-kat .skz-ktypo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:.06em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--dim);paint-order:stroke fill;opacity:.75;} #hc-skz .skz-kat .skz-kb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} #hc-skz .skz-kat h3{font-size:19px;letter-spacing:-.015em;} #hc-skz .skz-kat p{font-size:13.5px;line-height:1.5;color:var(--muted);} #hc-skz .skz-kat .skz-go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);margin-top:auto;padding-top:6px;} @media (max-width:1199px){ #hc-skz .skz-kats{grid-template-columns:repeat(2,1fr);} } @media (max-width:839px){ #hc-skz .skz-kats{grid-template-columns:1fr;} } /* ---- 02 Schutz-Leiter · aufsteigende Treppe vom Pull zum Grail ---- */ #hc-skz .skz-rail{display:flex;align-items:center;gap:14px;margin-bottom:20px;} #hc-skz .skz-rail span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);} #hc-skz .skz-rail .skz-rgrail{color:var(--primary);} #hc-skz .skz-rail i{flex:1;height:2px;border-radius:2px;background:var(--ribbon);} #hc-skz .skz-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end;} #hc-skz .skz-stufe{display:flex;flex-direction:column;gap:8px;min-height:var(--skz-h,220px);padding:20px;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);text-decoration:none;color:inherit;transition:.22s var(--ease);} #hc-skz .skz-stufe:nth-child(1){--skz-h:212px;} #hc-skz .skz-stufe:nth-child(2){--skz-h:236px;} #hc-skz .skz-stufe:nth-child(3){--skz-h:260px;} #hc-skz .skz-stufe:nth-child(4){--skz-h:284px;} #hc-skz .skz-stufe:nth-child(5){--skz-h:308px;} #hc-skz .skz-stufe:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--primary),0 24px 50px -28px var(--primary);} #hc-skz .skz-scode{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--primary);} #hc-skz .skz-flag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--ribbon);color:var(--brand-navy);border-radius:var(--r-pill);padding:4px 10px;} #hc-skz .skz-stufe h3{font-size:18px;letter-spacing:-.015em;} #hc-skz .skz-stufe p{font-size:13px;line-height:1.5;color:var(--muted);} #hc-skz .skz-sgroup{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:auto;padding-top:10px;} #hc-skz .skz-sprice{font-family:var(--font-display);font-weight:800;font-size:17px;} #hc-skz .skz-soon{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--card-hi);border-radius:var(--r-pill);padding:4px 10px;} #hc-skz .skz-lnote{font-size:13px;color:var(--dim);margin-top:14px;} /* ---- 03 Sortiment: .prod stylt der Shop (kein eigenes CSS!) ---- */ #hc-skz .skz-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} #hc-skz .skz-pgrid .prod .pim{aspect-ratio:1/1;height:auto;background:#fff;} html[data-theme="midnight"] #hc-skz .skz-pgrid .prod .pim{background:#13242f;} #hc-skz .skz-pgrid .price{font-size:30px;} #hc-skz .skz-pgrid .rowend{flex-wrap:wrap;gap:10px;} #hc-skz .skz-pgrid .holo .hcd-img-b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;opacity:0;transition:opacity .28s ease;} #hc-skz .skz-pgrid .lang .lg{display:inline-block;background:var(--card-hi);color:var(--muted);padding:2px 6px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;} #hc-skz .skz-pgrid .wish.heart.is-on svg{fill:#ff5d7a;color:#ff5d7a;} /* ---- 04 Raw2Rare · Navy-Band ---- */ #hc-skz .skz-r2r{margin-top:72px;background:var(--brand-navy);color:#eaf3f6;padding:64px 0 68px;} #hc-skz .skz-r2r .skz-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;} #hc-skz .skz-r2r .skz-kick{color:var(--brand-orange);} #hc-skz .skz-r2r h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.02em;color:#fff;margin-top:12px;} #hc-skz .skz-rgrad{background:linear-gradient(90deg,var(--brand-orange),var(--brand-mint));-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-skz .skz-rlead{font-size:15.5px;line-height:1.65;color:rgba(234,243,246,.78);margin-top:16px;max-width:520px;text-wrap:pretty;} #hc-skz .skz-rlead b{color:#fff;} #hc-skz .skz-rcta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;} #hc-skz .skz-rcards{display:flex;flex-direction:column;gap:14px;} #hc-skz .skz-rcard{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(255,255,255,.06);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:22px 24px;text-decoration:none;color:inherit;transition:.2s var(--ease);} #hc-skz .skz-rcard:hover{box-shadow:inset 0 0 0 1px var(--brand-orange);transform:translateY(-2px);} #hc-skz .skz-rcard h3{font-size:18px;color:#fff;letter-spacing:-.015em;} #hc-skz .skz-rcard p{font-size:12.5px;line-height:1.5;color:rgba(234,243,246,.65);margin-top:5px;} #hc-skz .skz-rprice{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:12px;} #hc-skz .skz-rprice svg{color:var(--brand-orange);flex:none;} #hc-skz .skz-rnote{font-size:13px;color:rgba(234,243,246,.6);} #hc-skz .skz-rnote a{color:var(--brand-mint);font-weight:700;text-decoration:none;} /* ---- 05 Passend fürs Spiel ---- */ #hc-skz .skz-fit{background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--border-soft);padding:30px 34px 26px;} #hc-skz .skz-fitrow{display:grid;grid-template-columns:repeat(3,1fr);} #hc-skz .skz-size{padding:0 26px 22px 0;border-right:1px solid var(--border-soft);} #hc-skz .skz-size+ .skz-size{padding-left:26px;} #hc-skz .skz-size:last-child{border-right:0;} #hc-skz .skz-size b{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;display:block;} #hc-skz .skz-mm{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);display:block;margin-top:4px;} #hc-skz .skz-size p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:8px;text-wrap:pretty;} #hc-skz .skz-games{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border-soft);padding-top:20px;} #hc-skz .skz-games b{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-right:6px;} #hc-skz .skz-games a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 18px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--border);color:var(--text);font-size:13px;font-weight:700;text-decoration:none;transition:.2s var(--ease);} #hc-skz .skz-games a:hover{box-shadow:none;background:var(--primary);color:var(--primary-ink);} /* ---- 06 Service ---- */ #hc-skz .skz-svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--text);} #hc-skz .skz-sv{padding:24px 26px 26px 0;border-right:1px solid var(--border-soft);} #hc-skz .skz-sv:last-child{border-right:0;} #hc-skz .skz-sv+ .skz-sv{padding-left:26px;} #hc-skz .skz-sv h3{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.01em;} #hc-skz .skz-sv h3 svg{color:var(--primary);flex:none;} #hc-skz .skz-sv p{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:10px;} #hc-skz .skz-sv a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;margin-top:12px;} /* ---- Cross-Sell (Aurora, damit EIN Navy-Band bleibt) ---- */ #hc-skz .skz-x{margin-top:72px;background:var(--hero-grad);padding:56px 0 60px;text-align:center;} #hc-skz .skz-x h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;} #hc-skz .skz-x p{font-size:15px;line-height:1.6;color:var(--muted);max-width:560px;margin:14px auto 0;text-wrap:pretty;} #hc-skz .skz-xb{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;} /* ---- Newsletter ---- */ #hc-skz .skz-news{padding:72px 0 84px;text-align:center;} #hc-skz .skz-news h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;} #hc-skz .skz-news p{font-size:14px;color:var(--muted);margin-top:10px;} #hc-skz .skz-form{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;} #hc-skz .skz-form input{width:min(360px,100%);padding:14px 20px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--card);font-family:var(--font-body);font-size:14.5px;color:var(--text);outline:none;} #hc-skz .skz-form input:focus{border-color:var(--primary);} /* ---- Media Queries (Pflicht: 1199 / 1023 / 839) ---- */ @media (max-width:1199px){ #hc-skz .skz-hero .skz-wrap{gap:36px;} #hc-skz .skz-pgrid{grid-template-columns:repeat(3,1fr);} #hc-skz .skz-kats{grid-template-columns:repeat(2,1fr);} #hc-skz .skz-ladder{gap:10px;} #hc-skz .skz-stufe{padding:16px;} #hc-skz .skz-stufe:nth-child(1){--skz-h:196px;} #hc-skz .skz-stufe:nth-child(2){--skz-h:216px;} #hc-skz .skz-stufe:nth-child(3){--skz-h:236px;} #hc-skz .skz-stufe:nth-child(4){--skz-h:256px;} #hc-skz .skz-stufe:nth-child(5){--skz-h:276px;} } @media (max-width:1023px){ #hc-skz .skz-hero .skz-wrap{grid-template-columns:1fr;} #hc-skz .skz-stage{min-height:420px;} #hc-skz .skz-shead{flex-direction:column;align-items:flex-start;gap:12px;} #hc-skz .skz-ladder{grid-template-columns:1fr;gap:12px;} #hc-skz .skz-stufe{--skz-h:0;min-height:0;} #hc-skz .skz-r2r .skz-wrap{grid-template-columns:1fr;gap:36px;} #hc-skz .skz-fitrow{grid-template-columns:1fr;} #hc-skz .skz-size{border-right:0;border-bottom:1px solid var(--border-soft);padding:18px 0;} #hc-skz .skz-size+ .skz-size{padding-left:0;} #hc-skz .skz-size:first-child{padding-top:0;} #hc-skz .skz-svc{grid-template-columns:1fr;} #hc-skz .skz-sv{border-right:0;border-bottom:1px solid var(--border-soft);padding:20px 0;} #hc-skz .skz-sv+ .skz-sv{padding-left:0;} #hc-skz .skz-sv:last-child{border-bottom:0;} } @media (max-width:839px){ #hc-skz .skz-sec{padding-top:52px;} #hc-skz .skz-pgrid{grid-template-columns:repeat(2,1fr);} #hc-skz .skz-hero{padding:44px 0 52px;} #hc-skz .skz-hero h1{font-size:clamp(34px,9vw,44px);} #hc-skz .skz-figs{flex-wrap:wrap;gap:14px 0;} #hc-skz .skz-fig{padding:0 18px;} #hc-skz .skz-kats{grid-template-columns:1fr;} #hc-skz .skz-kim{aspect-ratio:16/9;} #hc-skz .skz-plate{flex-wrap:wrap;} #hc-skz .skz-fit{padding:22px 20px 20px;} #hc-skz .skz-r2r,#hc-skz .skz-x{margin-top:52px;padding:44px 0 48px;} #hc-skz .skz-cta .skz-btn,#hc-skz .skz-xb .skz-btn{flex:1 1 100%;} } /* ============================================================================================ FD-81 (29.07.2026) — Set-Matrix in den Mega-Dropdowns (HCD-SETMATRIX): 2x2-Raster + Typo-Kachel .hcd-cnk fuer Slots ohne offizielles Logo (kein Fremd-Scrape). Kachelgroesse der a.cn-set bleibt unveraendert; das Grid wrappt von 2 auf 2x2. ============================================================================================ */ #header .cn-sets.hcd-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;} #header .cn-sets.hcd-matrix .cn-set{width:auto;} /* Outline-Fix (30.07.): Epilogue-Innenkonturen — Stroke-Kopie hinter deckender Kachel-BG-Fuellung */ #header .hcd-cnk{display:flex;align-items:center;justify-content:center;min-height:64px;flex:1;font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:.05em;color:#fbf8ef;position:relative;isolation:isolate;opacity:.8;} #header .hcd-cnk::before{content:attr(data-txt);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:transparent;-webkit-text-stroke:3px var(--dim);z-index:-1;} html[data-theme="midnight"] #header .hcd-cnk{color:#16293a;} /* ============================================================================================ FD-82 (29.07.2026) - /collectibles Premium (#hc-clx, kLink 141) Portiert aus Claude-Design-Mockup "Collectibles Premium Design". Standards: Hero 664 (88+Vitrine+96) - Sprungnav aa-idx-Segment - CSS-Var-Fallbacks (purple/teal/cream/el-4) auf #hc-clx - Kachel-Detail-Styles kommen aus golive (#hc-clx in :is()-Listen, Gate 17) + Zonen-Detail fuer clx-side-Grid (Chips/Herz analog FD-75). ============================================================================================ */ #hc-clx{color:var(--text);font-family:var(--font-body);--brand-purple:#7a5cff;--brand-teal:#19C7B6;--brand-cream:#F7F0DC;--el-4:0 34px 70px -30px rgba(12,30,42,.5);--clx-ink:#eaf3f6;--clx-ink-soft:rgba(234,243,246,.72);--clx-glass:rgba(255,255,255,.06);--clx-hair:rgba(255,255,255,.13);} #hc-clx .clx-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} #hc-clx .clx-grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-clx .clx-kick{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);} #hc-clx .clx-sec{padding:72px 0 0;} #hc-clx .clx-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:26px;} #hc-clx .clx-shead h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;margin-top:10px;} #hc-clx .clx-slead{font-size:15px;line-height:1.6;color:var(--muted);max-width:440px;text-wrap:pretty;} #hc-clx .clx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:800;font-size:15px;text-decoration:none;transition:.22s var(--ease);} #hc-clx .clx-btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow);} #hc-clx .clx-btn-primary:hover{transform:translateY(-2px);} #hc-clx .clx-btn-ghost{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border);} #hc-clx .clx-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);} #hc-clx .clx-btn-lit{color:var(--clx-ink);box-shadow:inset 0 0 0 1.5px var(--clx-hair);} #hc-clx .clx-btn-lit:hover{box-shadow:inset 0 0 0 1.5px var(--brand-orange);color:var(--brand-orange);} #hc-clx .clx-arrow{width:13px;height:13px;flex:none;} /* ---- Hero ---- */ #hc-clx .clx-hero{background:var(--hero-grad);padding:69px 0 77px;overflow:hidden;} #hc-clx .clx-hero .clx-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} #hc-clx .clx-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:var(--card);border-radius:var(--r-pill);padding:8px 16px;box-shadow:inset 0 0 0 1px var(--border-soft);} #hc-clx .clx-hero h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-.025em;margin-top:20px;} #hc-clx .clx-lead{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:520px;margin-top:18px;text-wrap:pretty;} #hc-clx .clx-lead b{color:var(--text);} #hc-clx .clx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} #hc-clx .clx-figs{display:flex;flex-wrap:wrap;margin-top:34px;} #hc-clx .clx-fig{padding:0 24px;border-left:1px solid var(--border);} #hc-clx .clx-fig:first-child{padding-left:0;border-left:0;} #hc-clx .clx-fig b{font-family:var(--font-display);font-weight:800;font-size:26px;display:block;} #hc-clx .clx-fig span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px;display:block;} /* Die Vitrine · beleuchteter Schaukasten (Navy-Akzent im Hero, nicht ganzseitig) */ #hc-clx .clx-case{position:relative;background:radial-gradient(95% 60% at 50% -8%,rgba(255,138,30,.20),rgba(255,138,30,0) 62%),var(--brand-navy);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--clx-hair),var(--el-4);padding:26px 22px 18px;overflow:hidden;} #hc-clx .clx-case::before{content:"";position:absolute;top:0;left:12%;right:12%;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,rgba(255,214,170,0),rgba(255,214,170,.75),rgba(255,214,170,0));} #hc-clx .clx-cshelf{display:grid;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--clx-hair);} #hc-clx .clx-cshelf-a{grid-template-columns:repeat(3,1fr);} #hc-clx .clx-cshelf-b{grid-template-columns:repeat(2,1fr);border-bottom:0;margin-bottom:10px;} #hc-clx .clx-bay{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;min-height:122px;padding:15px 16px;border-radius:var(--r-md);background:var(--clx-glass);box-shadow:inset 0 0 0 1px var(--clx-hair);text-decoration:none;color:var(--clx-ink);transition:.35s var(--ease);} #hc-clx .clx-bay::before{content:"";position:absolute;inset:0 14% auto 14%;height:86%;background:linear-gradient(180deg,rgba(255,203,145,.30),rgba(255,203,145,0) 68%);opacity:0;transition:.45s var(--ease);pointer-events:none;} #hc-clx .clx-bay i{position:relative;font-style:normal;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.1em;color:var(--brand-mint);} #hc-clx .clx-bay b{position:relative;font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.015em;} #hc-clx .clx-bay em{position:relative;font-style:normal;font-size:12px;line-height:1.45;color:var(--clx-ink-soft);margin-top:auto;} #hc-clx .clx-bay.on{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px var(--brand-orange),0 18px 40px -24px rgba(255,138,30,.9);} #hc-clx .clx-bay.on::before{opacity:1;} #hc-clx .clx-bay.on i{color:var(--brand-orange);} #hc-clx .clx-bay:hover{background:rgba(255,255,255,.13);} #hc-clx .clx-cfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;} #hc-clx .clx-cfoot span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(234,243,246,.5);} #hc-clx .clx-dots{display:flex;gap:7px;} #hc-clx .clx-dots button{width:9px;height:9px;border-radius:50%;background:rgba(234,243,246,.28);padding:0;transition:.2s;} #hc-clx .clx-dots button.on{background:var(--brand-orange);transform:scale(1.3);} /* ---- Sprungnavigation: aa-idx-Segment-Stil (FD-68-Standard) ---- */ #hc-clx .clx-idx{border-bottom:1px solid var(--border-soft);background:var(--card);} #hc-clx .clx-idx .clx-wrap{display:flex;gap:0;} #hc-clx .clx-idx a{flex:1;display:flex;align-items:baseline;gap:10px;padding:18px 6px 18px 18px;font-size:13px;font-weight:700;color:var(--muted);border-left:1px solid var(--border-soft);text-decoration:none;transition:background .18s var(--ease), color .18s var(--ease);} #hc-clx .clx-idx a:first-child{border-left:none;padding-left:6px;} #hc-clx .clx-idx a i{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--primary);} #hc-clx .clx-idx a:hover, #hc-clx .clx-idx a:focus-visible{background:var(--primary);color:#fff;} #hc-clx .clx-idx a:hover i, #hc-clx .clx-idx a:focus-visible i{color:#fff;} /* ---- 01 Fünf Welten ---- */ #hc-clx .clx-welten{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;} #hc-clx .clx-welt{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;text-decoration:none;color:inherit;transition:.22s var(--ease);} #hc-clx .clx-welt:nth-child(1),#hc-clx .clx-welt:nth-child(2){grid-column:span 3;} #hc-clx .clx-welt:nth-child(n+3){grid-column:span 2;} #hc-clx .clx-welt:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--primary),0 24px 50px -28px var(--primary);} #hc-clx .clx-art{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;} #hc-clx .clx-welt:nth-child(1) .clx-art,#hc-clx .clx-welt:nth-child(2) .clx-art{aspect-ratio:21/9;} #hc-clx .clx-art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 47%,rgba(255,255,255,0) 60%);} #hc-clx .clx-welt:nth-child(1) .clx-art{background:linear-gradient(135deg,var(--brand-orange),var(--brand-purple));} #hc-clx .clx-welt:nth-child(2) .clx-art{background:linear-gradient(135deg,var(--brand-teal),var(--brand-navy));} #hc-clx .clx-welt:nth-child(3) .clx-art{background:linear-gradient(140deg,var(--brand-purple),var(--brand-mint));} #hc-clx .clx-welt:nth-child(4) .clx-art{background:linear-gradient(140deg,var(--brand-cream),var(--brand-orange));} #hc-clx .clx-welt:nth-child(5) .clx-art{background:linear-gradient(140deg,var(--brand-navy),var(--brand-teal));} #hc-clx .clx-word{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.4vw,74px);letter-spacing:-.045em;line-height:1;color:rgba(255,255,255,.30);-webkit-text-stroke:1.5px rgba(255,255,255,.35);} #hc-clx .clx-welt:nth-child(4) .clx-word{color:rgba(12,30,42,.22);-webkit-text-stroke:1.5px rgba(12,30,42,.28);} #hc-clx .clx-wnum{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.06em;background:var(--card);color:var(--text);border-radius:8px;padding:5px 9px;box-shadow:var(--el-1);} #hc-clx .clx-wb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} #hc-clx .clx-welt h3{font-size:19px;letter-spacing:-.015em;} #hc-clx .clx-welt p{font-size:13.5px;line-height:1.5;color:var(--muted);} #hc-clx .clx-go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);margin-top:auto;padding-top:6px;} /* ---- 02 Franchise-Kompass ---- */ #hc-clx .clx-komp{background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--border-soft);padding:30px 34px;} #hc-clx .clx-chips{display:flex;flex-wrap:wrap;gap:10px;} #hc-clx .clx-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:var(--r-pill);background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--border-soft);font-size:14px;font-weight:700;color:var(--text);transition:.2s var(--ease);} #hc-clx .clx-chip:hover{box-shadow:inset 0 0 0 1px var(--primary);color:var(--primary);} #hc-clx .clx-knote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--border-soft);font-size:13.5px;color:var(--muted);} #hc-clx .clx-knote b{color:var(--text);} #hc-clx .clx-klink{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--primary);text-decoration:none;} /* ---- 03 Spotlight · dunkle Bühne mit Spot-Licht ---- */ #hc-clx .clx-stage{margin-top:72px;padding:64px 0 68px;background:radial-gradient(70% 80% at 50% -12%,rgba(255,138,30,.26),rgba(255,138,30,0) 62%),radial-gradient(50% 60% at 88% 110%,rgba(25,199,182,.18),rgba(25,199,182,0) 60%),var(--brand-navy);color:var(--clx-ink);} #hc-clx .clx-stage .clx-kick{color:var(--brand-orange);} #hc-clx .clx-stage h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.02em;color:#fff;margin-top:12px;} #hc-clx .clx-stage .clx-slead{color:var(--clx-ink-soft);} #hc-clx .clx-sgrad{background:linear-gradient(90deg,var(--brand-orange),var(--brand-mint));-webkit-background-clip:text;background-clip:text;color:transparent;} #hc-clx .clx-sgrid{display:grid;grid-template-columns:1.22fr 1fr;gap:20px;align-items:start;} #hc-clx .clx-feature{position:relative;display:flex;flex-direction:column;background:var(--clx-glass);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--clx-hair);overflow:hidden;text-decoration:none;color:inherit;transition:.25s var(--ease);} #hc-clx .clx-feature:hover{box-shadow:inset 0 0 0 1px var(--brand-orange),0 30px 60px -30px rgba(255,138,30,.8);transform:translateY(-3px);} #hc-clx .clx-fim{position:relative;aspect-ratio:16/11;background:radial-gradient(60% 70% at 50% 0%,rgba(255,203,145,.20),rgba(255,203,145,0) 70%);} #hc-clx .clx-fim img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;} #hc-clx .clx-fim::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:44%;background:radial-gradient(60% 100% at 50% 100%,rgba(255,203,145,.16),rgba(255,203,145,0) 70%);pointer-events:none;} #hc-clx .clx-plinth{position:absolute;left:8%;right:8%;bottom:0;height:8px;border-radius:8px 8px 0 0;background:linear-gradient(90deg,rgba(255,203,145,0),rgba(255,203,145,.5),rgba(255,203,145,0));} #hc-clx .clx-ftag{position:absolute;top:16px;left:16px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;background:rgba(255,255,255,.12);color:var(--clx-ink);border-radius:var(--r-pill);padding:7px 13px;box-shadow:inset 0 0 0 1px var(--clx-hair);} #hc-clx .clx-fb{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:22px 26px 24px;border-top:1px solid var(--clx-hair);} #hc-clx .clx-fb .clx-fcat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-mint);} #hc-clx .clx-fb h3{font-size:22px;letter-spacing:-.02em;color:#fff;margin-top:6px;max-width:22ch;} #hc-clx .clx-fout{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--clx-ink-soft);margin-top:8px;} #hc-clx .clx-fright{text-align:right;flex:none;} #hc-clx .clx-fprice{font-family:var(--font-display);font-weight:800;font-size:24px;color:#fff;white-space:nowrap;display:block;} #hc-clx .clx-fgo{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:800;color:var(--brand-orange);} #hc-clx .clx-side{display:grid;grid-template-columns:1fr 1fr;gap:18px;} #hc-clx .clx-snote{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--clx-glass);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--clx-hair);padding:20px 22px;} #hc-clx .clx-snote .clx-btn{flex:none;white-space:nowrap;} #hc-clx .clx-snote p{font-size:13px;line-height:1.55;color:var(--clx-ink-soft);text-wrap:pretty;} #hc-clx .clx-snote b{color:#fff;} /* ---- 04 Pre-Order-Radar ---- */ #hc-clx .clx-radar{display:flex;align-items:center;gap:32px;background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--border-soft),var(--el-2);padding:28px 34px;} #hc-clx .clx-disc{position:relative;flex:none;width:104px;height:104px;border-radius:50%;background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;} #hc-clx .clx-disc::before{content:"";position:absolute;inset:22px;border-radius:50%;box-shadow:0 0 0 1px var(--border-soft);} #hc-clx .clx-disc::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(239,130,14,.55),rgba(239,130,14,0) 26%);animation:clx-sweep 3.4s linear infinite;} @keyframes clx-sweep{to{transform:rotate(360deg);}} #hc-clx .clx-blip{position:absolute;top:34%;left:60%;width:10px;height:10px;border-radius:50%;background:var(--primary);z-index:2;box-shadow:0 0 0 0 rgba(239,130,14,.5);animation:clx-blip 3.4s ease-out infinite;} @keyframes clx-blip{0%,60%{box-shadow:0 0 0 0 rgba(239,130,14,.55);}100%{box-shadow:0 0 0 22px rgba(239,130,14,0);}} #hc-clx .clx-rtxt{flex:1;min-width:0;} #hc-clx .clx-rlive{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);} #hc-clx .clx-rlive::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);} #hc-clx .clx-radar h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;margin-top:8px;} #hc-clx .clx-radar p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:62ch;text-wrap:pretty;} /* ---- 05 Wunsch-Service ---- */ #hc-clx .clx-wish{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--border-soft);padding:34px 38px;} #hc-clx .clx-wish h3{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;} #hc-clx .clx-wish>div>p{font-size:15px;line-height:1.65;color:var(--muted);margin-top:14px;text-wrap:pretty;} #hc-clx .clx-steps{display:flex;flex-direction:column;gap:14px;} #hc-clx .clx-step{display:flex;gap:16px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--border-soft);} #hc-clx .clx-step:last-child{border-bottom:0;padding-bottom:0;} #hc-clx .clx-step i{font-style:normal;flex:none;width:34px;height:34px;border-radius:50%;background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--border-soft);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--primary);} #hc-clx .clx-step b{display:block;font-family:var(--font-display);font-size:15.5px;letter-spacing:-.01em;} #hc-clx .clx-step p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:3px;} /* ---- 06 Service ---- */ #hc-clx .clx-svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--text);} #hc-clx .clx-sv{padding:24px 26px 26px 0;border-right:1px solid var(--border-soft);} #hc-clx .clx-sv:last-child{border-right:0;} #hc-clx .clx-sv+ .clx-sv{padding-left:26px;} #hc-clx .clx-sv h3{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.01em;} #hc-clx .clx-sv h3 svg{color:var(--primary);flex:none;} #hc-clx .clx-sv p{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:10px;} #hc-clx .clx-svl{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;} #hc-clx .clx-sv a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;} /* ---- Cross-Sell ---- */ #hc-clx .clx-x{margin-top:72px;background:var(--hero-grad);padding:56px 0 60px;text-align:center;} #hc-clx .clx-x h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;} #hc-clx .clx-x p{font-size:15px;line-height:1.6;color:var(--muted);max-width:560px;margin:14px auto 0;text-wrap:pretty;} #hc-clx .clx-xb{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;} /* ---- Newsletter ---- */ #hc-clx .clx-news{padding:72px 0 84px;text-align:center;} #hc-clx .clx-news h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;} #hc-clx .clx-news p{font-size:14px;color:var(--muted);margin-top:10px;} #hc-clx .clx-form{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;} #hc-clx .clx-form input{width:min(360px,100%);padding:14px 20px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--card);font-family:var(--font-body);font-size:14.5px;color:var(--text);outline:none;} #hc-clx .clx-form input:focus{border-color:var(--primary);} /* ---- Media Queries (Pflicht: 1199 / 1023 / 839) ---- */ @media (max-width:1199px){ #hc-clx .clx-hero .clx-wrap{gap:36px;} #hc-clx .clx-bay{min-height:110px;padding:13px 14px;} #hc-clx .clx-bay b{font-size:15px;overflow-wrap:anywhere;} #hc-clx .clx-welten{gap:14px;} #hc-clx .clx-sgrid{grid-template-columns:1.05fr 1fr;} #hc-clx .clx-komp{padding:26px 24px;} #hc-clx .clx-wish{gap:30px;padding:28px 26px;} } @media (max-width:1023px){ #hc-clx .clx-hero .clx-wrap{grid-template-columns:1fr;} #hc-clx .clx-shead{flex-direction:column;align-items:flex-start;gap:12px;} #hc-clx .clx-welten{grid-template-columns:repeat(2,1fr);} #hc-clx .clx-welt:nth-child(n){grid-column:auto;} #hc-clx .clx-welt:nth-child(1) .clx-art,#hc-clx .clx-welt:nth-child(2) .clx-art{aspect-ratio:16/9;} #hc-clx .clx-sgrid{grid-template-columns:1fr;} #hc-clx .clx-radar{flex-direction:column;align-items:flex-start;gap:22px;} #hc-clx .clx-wish{grid-template-columns:1fr;} #hc-clx .clx-svc{grid-template-columns:1fr;} #hc-clx .clx-sv{border-right:0;border-bottom:1px solid var(--border-soft);padding:20px 0;} #hc-clx .clx-sv+ .clx-sv{padding-left:0;} #hc-clx .clx-sv:last-child{border-bottom:0;} } @media (max-width:839px){ #hc-clx .clx-sec{padding-top:52px;} #hc-clx .clx-hero{padding:44px 0 52px;} #hc-clx .clx-hero h1{font-size:clamp(34px,9vw,44px);} #hc-clx .clx-figs{gap:14px 0;} #hc-clx .clx-fig{padding:0 16px;} #hc-clx .clx-case{padding:20px 16px 14px;} #hc-clx .clx-cshelf-a,#hc-clx .clx-cshelf-b{grid-template-columns:1fr 1fr;} #hc-clx .clx-bay{min-height:0;} #hc-clx .clx-welten{grid-template-columns:1fr;} #hc-clx .clx-welt:nth-child(n) .clx-art{aspect-ratio:16/9;} #hc-clx .clx-side{grid-template-columns:1fr;} #hc-clx .clx-snote{grid-column:auto;flex-direction:column;align-items:flex-start;} #hc-clx .clx-fb{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 22px;} #hc-clx .clx-fright{text-align:left;} #hc-clx .clx-stage,#hc-clx .clx-x{margin-top:52px;padding:44px 0 48px;} #hc-clx .clx-komp{padding:22px 18px;} #hc-clx .clx-wish{padding:24px 20px;} #hc-clx .clx-cta .clx-btn,#hc-clx .clx-xb .clx-btn{flex:1 1 100%;} } #hc-clx .clx-side .prod .pim{aspect-ratio:1/1;height:auto;background:#fff;} html[data-theme="midnight"] #hc-clx .clx-side .prod .pim{background:#13242f;} #hc-clx .clx-side .price{font-size:30px;} #hc-clx .clx-side .rowend{flex-wrap:wrap;gap:10px;} #hc-clx .clx-side .holo .hcd-img-b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;opacity:0;transition:opacity .28s ease;} #hc-clx .clx-side .lang .lg{display:inline-block;background:var(--card-hi);color:var(--muted);padding:2px 6px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;} #hc-clx .clx-side .wish.heart.is-on svg{fill:#ff5d7a;color:#ff5d7a;} /* ============================================================================================ FD-83 (29.07.2026) - Header-Icons Konto/Merken: das FD-62-Kompaktmass (Button 44px) quetschte die 21x21-SVGs auf 21x13. Fix: exakt Warenkorb-Paritaet 20x20 + straffe Label-Zeile. Nur Desktop >=840px; Header-bis-main bleibt 152px (gemessen). ============================================================================================ */ @media (min-width:840px){ #header .a-btn svg{width:20px;height:20px;flex:none;} #header .a-btn{line-height:1.1;} } /* ============================================================================================ FD-84 (29.07.2026) - Set-Matrix-Nachbesserung (Marcel-Befund): einheitliche 120x120-Kacheln in ALLEN 4 Dropdowns (vorher 120/120/100/87 durch 1fr-Spalten) + Panel-Hoehe freigeben, damit die Kategorienliste (Pokemon-Zubehoer!) nicht mehr geclippt wird. ============================================================================================ */ @media (min-width:840px){ #header .mega2:has(.hcd-matrix){height:auto !important;max-height:none !important;} #header .cn-sets.hcd-matrix{grid-template-columns:repeat(2,120px);gap:10px;} #header .cn-sets.hcd-matrix .cn-set{width:120px;height:120px;} } /* ==== FD-85 (29.07.2026) - Fuenf-Welten-Kacheln mit echten Beispiel-Produktbildern (Marcel: Grosshaendler-Bilder ok, Produkte kommen in den Shop). Weisse Bildflaeche wie mkz-Kacheln, Mehrbild-Gruppen als Reihe. ==== */ #hc-clx .clx-welt:nth-child(n) .clx-art.clx-art-img{background:#fff;display:flex;align-items:center;justify-content:center;gap:6px;padding:16px;} #hc-clx .clx-art.clx-art-img::after{display:none;} #hc-clx .clx-art.clx-art-img img{max-width:100%;max-height:100%;object-fit:contain;flex:0 1 auto;min-width:0;} #hc-clx .clx-art.clx-art-multi img{flex:1 1 0;height:82%;} html[data-theme="midnight"] #hc-clx .clx-welt:nth-child(n) .clx-art.clx-art-img{background:#13242f;} /* ==== FD-86 (29.07.2026) - Set-Matrix-Badges lesbar (Marcel-Befund: 'Aktuelles Set' weiss auf hellen Kacheln unsichtbar - Original-Badges waren fuer dunkle Artworks gebaut). Solide Pillen: Aktuell = Brand-Orange, Upcoming = Pink, Schrift weiss. ==== */ @media (min-width:840px){ #header .cn-sets.hcd-matrix .cn-set-tag{color:#fff !important;font-weight:800;letter-spacing:.04em;text-shadow:none;} #header .cn-sets.hcd-matrix .cn-set-tag.akt{background:#EF820E !important;} #header .cn-sets.hcd-matrix .cn-set-tag.pre{background:#e0447a !important;} }