/* ============================================================
MYSTERY SCOOPS — Design Reference Stylesheet
------------------------------------------------------------
Ein einziges Stylesheet für Storefront + Admin.
Inhalt:
01 Design Tokens (Farben, Typo, Spacing, Radius, Shadow)
02 Reset & Basis
03 Typografie & Utilities
04 Buttons
05 Badges, Pills, Sparkles
06 Platzhalter-Grafiken (Scoops, Fotoflächen)
07 Header / Navigation
08 Footer
09 Hero & Homepage-Sektionen
10 Produktkarten & Shop-Grid
11 Produktdetail
12 Warenkorb
13 Kasse (Checkout)
14 Formulare (Storefront)
15 ADMIN — Tokens & Layout
16 ADMIN — Komponenten (Tabellen, Formulare, Login)
17 Responsive Breakpoints
============================================================ */
/* ============================================================
00 LOKALE SCHRIFTARTEN
------------------------------------------------------------
Lokal gehostet statt über fonts.googleapis.com eingebunden,
damit keine Anfrage an Google beim Seitenaufruf nötig ist.
============================================================ */
@font-face {
font-family: 'Fredoka';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/fredoka-500.woff2') format('woff2-variations'),
url('../fonts/fredoka-500.woff2') format('woff2');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2-variations'),
url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/pacifico-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/pacifico-400-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0300-0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113;
}
/* ============================================================
01 DESIGN TOKENS
============================================================ */
:root {
/* ---------- Blush-Oberflächen (vormals "Cream") ---------- */
--blush-50: #FFF5F9; /* Seitenhintergrund */
--blush-100: #FFE8F1; /* abgesetzte Sektionen */
--blush-200: #FFD3E4; /* Rahmen, sanfte Flächen */
--blush-300: #FFB9D4; /* Deko-Flächen, Ribbon-Verlauf */
/* Alte Namen — GLEICHE Bezeichner, neue Werte. Nicht umbenennen,
werden aus ~30 PHP-Dateien inline referenziert. */
--cream: var(--blush-50);
--cream-deep: var(--blush-100);
--line: var(--blush-200);
--white: #FFFFFF;
/* ---------- Pink-Skala ---------- */
--pink-300: #FF9EC7; /* Glow, Konfetti, Verläufe */
--pink-400: #FF7CB8; /* Ribbon oberer Farbstop, Glanz */
--pink-500: #FF4D9D; /* Signatur-Pink — NUR Flächen/Glow, nie Text */
--pink-cta: #D81B76; /* Buttons + Badges mit weißem Text — 4.84:1 */
--rose-700: #C01E6C; /* Pink-TEXT auf hellem Grund + CTA-Hover — 5.40:1 */
--rose-800: #A8155C; /* Ribbon-Falz, Announce-Leiste, tiefe Akzente */
--rose-900: #5A1136; /* Footer-Hintergrund */
/* Alte Namen — GLEICHE Bezeichner, neue Werte. */
--bubblegum: var(--pink-500);
--bubblegum-dk: var(--rose-700);
/* ---------- Tinte ---------- */
--ink: #3A1F2E; /* 13.9:1 auf --blush-50 */
--ink-soft: #7A5A6C; /* 5.2:1 — Sekundärtext */
--ink-faint: #B394A5; /* nur Deko/deaktiviert, nie Fließtext */
/* ---------- Weitere Akzente (nicht-pink) ----------
Weiterhin genutzt von .scoop--*, .thumb--*, .badge--limited,
Admin-Tier-Chips. Die Scoop-Kugeln stehen für echte, bunt
gemischte Nagel-Charms — die dürfen nicht monochrom werden. */
--lilac: #C9A7FF;
--mint: #9BE8D8;
--butter: #FFE08A;
--peach: #FFB4A2;
--sky: #A8C8FF;
/* --- Statusfarben --- */
--success: #2FA97C;
--warning: #E5A33B;
--danger: #E0505B;
/* ---------- Verläufe ---------- */
/* Nur dekorativ — NIE Text direkt auf --grad-holo/--grad-candy setzen. */
--grad-holo: linear-gradient(100deg, #FF4D9D 0%, #FF8AC2 40%, #FFB9D4 70%, #FF6FB0 100%);
--grad-candy: linear-gradient(135deg, #FFB9D4 0%, #FF4D9D 100%);
--grad-dream: linear-gradient(135deg, #FFD3E4 0%, #FF9EC7 100%);
--grad-cream: linear-gradient(180deg, #FFF5F9 0%, #FFE8F1 100%);
/* Textsichere Verläufe (weißer Text funktioniert darauf) */
--grad-announce: linear-gradient(100deg, #A8155C 0%, #C01E6C 50%, #A8155C 100%);
--grad-band: linear-gradient(135deg, #C01E6C 0%, #7E1046 100%);
--grad-ribbon: linear-gradient(180deg, #FF7CB8 0%, #E62E82 100%);
--grad-brandtext: linear-gradient(100deg, #A8155C 0%, #C01E6C 55%, #8E1250 100%);
--grad-seal: radial-gradient(circle at 50% 26%, #FFFFFF 0%, #FFF5F9 46%, #FFE8F1 100%);
/* ---------- Typografie --- */
--font-display: 'Fredoka', 'Trebuchet MS', 'Segoe UI', 'Noto Sans', system-ui, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
--font-script: 'Pacifico', 'Segoe Script', 'Bradley Hand', 'Snell Roundhand', cursive;
--fs-xs: 0.75rem; /* 12px — Labels, Meta */
--fs-sm: 0.875rem; /* 14px — Kleintext */
--fs-base: 1rem; /* 16px — Fließtext */
--fs-md: 1.125rem; /* 18px — Lead */
--fs-lg: 1.375rem; /* 22px — H4 / Kartentitel */
--fs-xl: 1.75rem; /* 28px — H3 */
--fs-2xl: 2.25rem; /* 36px — H2 */
--fs-3xl: 3rem; /* 48px — H1 mobil→desktop */
--fs-4xl: 4rem; /* 64px — Hero Desktop */
/* Fluide Display-Größen — kommen ohne weiteren Breakpoint aus */
--fs-neon: clamp(2.5rem, 10vw, 5.5rem); /* .neon "Willkommen!" */
--fs-kicker: clamp(0.8rem, 2.4vw, 1.1rem); /* "HERZLICH" */
--seal-size: clamp(200px, 46vw, 360px); /* rundes Marken-Siegel */
/* --- Spacing-Skala (4px-Raster) --- */
--sp-1: 0.25rem; /* 4px */
--sp-2: 0.5rem; /* 8px */
--sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */
--sp-5: 1.5rem; /* 24px */
--sp-6: 2rem; /* 32px */
--sp-7: 3rem; /* 48px */
--sp-8: 4rem; /* 64px */
--sp-9: 6rem; /* 96px */
/* --- Radien --- */
--r-sm: 10px;
--r-md: 18px;
--r-lg: 24px; /* Standard-Karte */
--r-xl: 32px; /* Panels, Hero */
--r-pill: 999px; /* alle Buttons */
--r-blob: 42% 58% 55% 45% / 48% 44% 56% 52%; /* organische Sticker-Form */
/* --- Schatten (weich, rosa getönt — nie neutrales Grau) --- */
--sh-sm: 0 2px 8px rgba(90, 17, 54, .07);
--sh-md: 0 8px 24px rgba(90, 17, 54, .10);
--sh-lg: 0 18px 44px rgba(90, 17, 54, .14);
--sh-pink: 0 10px 26px rgba(216, 27, 118, .30);
--sh-pink-sm: 0 4px 14px rgba(168, 21, 92, .10);
--sh-pink-md: 0 12px 30px rgba(168, 21, 92, .16);
--sh-pink-lg: 0 24px 60px rgba(168, 21, 92, .20);
--sh-glow: 0 0 40px rgba(255, 124, 184, .55);
/* --- Layout --- */
--wrap: 1180px;
--wrap-tight: 820px;
--header-h: 68px;
}
/* ============================================================
02 RESET & BASIS
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.65;
color: var(--ink);
background-color: var(--cream);
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
outline: 3px solid var(--pink-cta);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--sp-4);
}
.wrap--tight { max-width: var(--wrap-tight); }
.section { padding-block: var(--sp-7); }
.section--alt { background: var(--cream-deep); }
.section--white { background: var(--white); }
/* Screenreader-only */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ============================================================
03 TYPOGRAFIE & UTILITIES
============================================================ */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-4);
color: var(--ink);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
.lead {
font-size: var(--fs-md);
color: var(--ink-soft);
max-width: 56ch;
}
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rose-700);
margin: 0 0 var(--sp-3);
display: block;
}
/* Holografischer Verlaufstext — nur für Wortmarke & Hero-Highlight */
.holo {
background: var(--grad-brandtext);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }
.section-head { margin-bottom: var(--sp-6); }
.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-5); }
/* Gezackte "Eiswaffel"-Kante: als erstes Kind einer Sektion einsetzen.
Erbt die Farbe der Sektion via --scallop-color. */
.scallop {
height: 22px;
margin-top: -22px;
background-color: var(--scallop-color, var(--cream));
-webkit-mask-image: radial-gradient(circle at 11px 11px, #000 11px, transparent 11.5px);
mask-image: radial-gradient(circle at 11px 11px, #000 11px, transparent 11.5px);
-webkit-mask-size: 22px 22px;
mask-size: 22px 22px;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
}
/* Rechtstexte & sonstiger owner-verfasster HTML-Inhalt (page.php). Bewusst
zurückhaltend — kein .glossy/.neon/.ribbon/.confetti: dichter Fließtext
muss lesbar und druckbar bleiben, nicht dekorativ. */
.page-body {
max-width: 68ch;
line-height: 1.75;
color: var(--ink);
}
.page-body h2, .page-body h3 {
font-family: var(--font-display);
margin-top: var(--sp-6);
margin-bottom: var(--sp-2);
}
.page-body h2 { font-size: var(--fs-xl); }
.page-body h3 { font-size: var(--fs-lg); }
.page-body p { margin-bottom: var(--sp-4); }
.page-body ul, .page-body ol { padding-left: 1.4em; margin-bottom: var(--sp-4); }
.page-body li { margin-bottom: var(--sp-1); }
.page-body a { color: var(--rose-700); text-decoration: underline; }
.page-body table { border-collapse: collapse; width: 100%; margin-bottom: var(--sp-4); }
.page-body th, .page-body td { border: 1px solid var(--blush-200); padding: var(--sp-2) var(--sp-3); text-align: left; }
/* ============================================================
04 BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 0.8rem 1.6rem;
border: 2px solid transparent;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: 700;
line-height: 1;
cursor: pointer;
text-align: center;
transition: transform .16s ease, box-shadow .16s ease,
background-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Primär — der einzige knallige Button pro Bildschirm */
.btn--primary {
background: var(--pink-cta);
color: var(--white);
box-shadow: var(--sh-pink);
}
.btn--primary:hover { background: var(--bubblegum-dk); }
/* Sekundär — Outline auf Creme */
.btn--secondary {
background: var(--white);
color: var(--ink);
border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--white); }
/* Soft — für tertiäre Aktionen in Karten */
.btn--soft {
background: var(--cream-deep);
color: var(--ink);
}
.btn--soft:hover { background: var(--line); }
/* Ghost — Textlink-Optik mit Buttonfläche */
.btn--ghost {
background: transparent;
color: var(--rose-700);
padding-inline: var(--sp-3);
}
.btn--ghost:hover { background: rgba(216, 27, 118, 0.10); }
/* Hero-Cover-Buttons — eigene Modifier, damit --primary/--secondary
auf dem Rest der Seite unverändert bleiben. Tiefes Pflaumen-Plum
statt Pink: setzt sich klar gegen die rosa/magenta Grafik ab,
statt mit ihr zu konkurrieren. */
.btn--hero-primary {
background: var(--ink);
color: var(--white);
border-color: var(--ink);
box-shadow: var(--sh-pink-md);
}
.btn--hero-primary:hover {
background: var(--rose-700);
border-color: var(--rose-700);
}
.btn--hero-secondary {
background: var(--white);
color: var(--ink);
border-color: var(--blush-300);
box-shadow: var(--sh-pink-sm);
}
.btn--hero-secondary:hover {
background: var(--blush-100);
border-color: var(--pink-cta);
color: var(--rose-700);
}
.btn--lg { padding: 1rem 2.2rem; font-size: var(--fs-md); }
.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* ============================================================
05 BADGES, PILLS, SPARKLES
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 0.3rem 0.75rem;
border-radius: var(--r-pill);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--butter);
color: var(--ink);
}
.badge--new { background: var(--blush-200); color: var(--rose-700); }
.badge--hot { background: var(--pink-cta); color: var(--white); }
.badge--limited{ background: var(--lilac); }
.badge--soldout{ background: var(--line); color: var(--ink-soft); }
/* Vorteile-/USP-Leiste (Startseite) */
.usp-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3);
text-align: center;
}
/* Auf sehr kleinen Screens bleibt die Leiste eine Zeile Icon+Titel —
der Fließtext kommt erst ab 600px zurück (siehe Breakpoints unten). */
.usp-row p { display: none; }
/* Konfetti-Dichte nach Bildschirmgröße — auf dem Handy wirkt die volle
Streuung schnell unruhig statt charmant. */
.confetti > svg:nth-child(n+7) { display: none; }
.usp-item { display: flex; flex-direction: column; align-items: center; }
.usp-icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: var(--sp-3);
border-radius: 50%;
background: var(--blush-100);
color: var(--pink-cta);
box-shadow: var(--sh-pink-sm);
}
.usp-icon svg { width: 1.5em; height: 1.5em; }
.usp-row .sparkle { width: 1.6em; height: 1.6em; margin-bottom: var(--sp-2); }
.usp-row strong { display: block; font-family: var(--font-display); margin-bottom: var(--sp-1); }
.usp-row p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }
/* Scoop-Stufen im Shop — ruhige Skala statt Gaming-Rarity-Optik */
.badge--tier-1 { background: var(--mint); }
.badge--tier-2 { background: var(--lilac); }
.badge--tier-3 { background: var(--white); border-top: 3px solid transparent; border-image: var(--grad-holo) 1; }
/* Filter-Pills (Shop-Kategorien) */
.pill-row {
display: flex;
gap: var(--sp-2);
overflow-x: auto;
padding-bottom: var(--sp-2);
scrollbar-width: none;
}
.pill-row::-webkit-scrollbar { display: none; }
.pill {
flex: 0 0 auto;
padding: 0.5rem 1.1rem;
border: 2px solid var(--line);
border-radius: var(--r-pill);
background: var(--white);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-soft);
cursor: pointer;
transition: all .16s ease;
}
.pill:hover { border-color: var(--rose-700); color: var(--rose-700); }
.pill[aria-current="true"],
.pill.is-active {
background: var(--pink-cta);
border-color: var(--pink-cta);
color: var(--white);
}
/* Funkel-Stern — Deko & Listenpunkte */
.sparkle { width: 1em; height: 1em; flex: 0 0 auto; color: var(--bubblegum); }
.sparkle-list { list-style: none; margin: 0; padding: 0; }
.sparkle-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding-block: var(--sp-2);
border-bottom: 1px dashed var(--line);
}
.sparkle-list li:last-child { border-bottom: 0; }
.sparkle-list .sparkle { margin-top: 0.35em; }
/* ============================================================
05b KAWAII-DEKO — Glossy Headings, Ribbons, Sticker, Notes, Seal
------------------------------------------------------------
Reines CSS/SVG, keine Bilddateien — konsistent mit dem Rest des
Projekts (self-hosted Fonts, .scoop-Illustrationen statt Fotos).
============================================================ */
/* Glänzender 3D-Bubble-Schriftzug — NUR für die Hero-Wortmarke, h1 der
Startseite und die .cta-band-Überschrift. Niemals für Kartentitel,
Preise, Labels oder Navigation (unter ~2rem wird es unleserlich). */
.glossy {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.015em;
font-size: max(2rem, 1em);
background: linear-gradient(180deg,
#FFFFFF 0%, #FFFFFF 38%, #FFE8F1 52%, #FFB9D4 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(0 1px 0 #FFC2DA)
drop-shadow(0 2px 0 #FFAFD0)
drop-shadow(0 3px 0 #FF9EC7)
drop-shadow(0 4px 0 #FF8ABE)
drop-shadow(0 8px 10px rgba(168, 21, 92, .32));
paint-order: stroke fill;
}
/* Neon-Schreibschrift — "Willkommen!"-Stil. Nur dekorativ, nie alleiniger
Bedeutungsträger (der .lead-Text darunter sagt dasselbe nochmal). */
.neon {
font-family: var(--font-script);
font-weight: 400;
font-size: var(--fs-neon);
line-height: 1.05;
color: #FFFFFF;
text-shadow:
0 0 1px #FFFFFF,
0 0 7px rgba(255, 124, 184, .95),
0 0 16px rgba(255, 77, 157, .85),
0 0 34px rgba(216, 27, 118, .55),
0 4px 12px rgba(90, 17, 54, .22);
margin: 0 0 var(--sp-4);
}
/* Auf weißem Grund verschwindet der weiße Buchstabe — dort einfärben. */
.section--white .neon, .panel .neon, .card .neon {
color: var(--rose-700);
text-shadow: 0 0 14px rgba(255,124,184,.55);
}
/* Ribbon-Banner mit gefalteten Enden */
.ribbon {
--ribbon-tail: 26px;
position: relative;
display: inline-block;
margin-inline: var(--ribbon-tail);
padding: .6rem 1.4rem;
background: var(--grad-ribbon);
color: var(--white);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.35;
text-align: center;
filter: drop-shadow(0 6px 14px rgba(168, 21, 92, .26));
}
.ribbon::before, .ribbon::after {
content: "";
position: absolute;
top: 50%;
translate: 0 -50%;
width: var(--ribbon-tail);
height: calc(100% + 14px);
background: var(--rose-800);
}
.ribbon::before { right: 100%; clip-path: polygon(100% 0, 100% 100%, 0 100%, 42% 50%, 0 0); }
.ribbon::after { left: 100%; clip-path: polygon(0 0, 0 100%, 100% 100%, 58% 50%, 100% 0); }
/* Volle Breite, unten an Sektionen ("ÖFFNEN. STAUNEN. LIEBEN.") */
.ribbon--band {
display: block;
width: 100%;
margin-inline: 0;
padding-block: var(--sp-4);
font-size: var(--fs-sm);
letter-spacing: .18em;
background: var(--grad-band);
}
.ribbon--band::before, .ribbon--band::after { display: none; }
.ribbon--lg { font-size: var(--fs-sm); padding: .7rem 1.6rem; }
/* Gestrichelte "Sticker"-Marke (z.B. für kurze Trust-Claims) */
.sticker {
display: grid;
place-items: center;
gap: 2px;
width: clamp(84px, 22vw, 116px);
aspect-ratio: 1;
padding: .7rem;
border-radius: 50%;
border: 2px dashed var(--pink-500);
background: var(--blush-100);
color: var(--rose-700);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: .05em;
line-height: 1.15;
text-align: center;
text-transform: uppercase;
text-wrap: balance;
box-shadow: var(--sh-pink-sm), inset 0 0 0 5px var(--white);
rotate: -7deg;
}
.sticker svg { width: 14px; height: 14px; color: var(--pink-500); }
.sticker--blob { border-radius: var(--r-blob); rotate: 4deg; }
/* Abgerissene Notiz mit Washi-Tape-Ecke */
.note {
--tear: 9px;
position: relative;
display: inline-block;
max-width: 30ch;
padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--tear));
background: #FFFDFB;
color: var(--rose-700);
font-family: var(--font-script);
font-size: clamp(1.05rem, 2.6vw, 1.5rem);
line-height: 1.25;
text-align: center;
rotate: -2.2deg;
filter: drop-shadow(0 8px 18px rgba(168, 21, 92, .16));
-webkit-mask-image:
linear-gradient(#000 0 0),
radial-gradient(circle at 9px 0, transparent 8.5px, #000 9px);
mask-image:
linear-gradient(#000 0 0),
radial-gradient(circle at 9px 0, transparent 8.5px, #000 9px);
-webkit-mask-size: 100% calc(100% - var(--tear)), 18px var(--tear);
mask-size: 100% calc(100% - var(--tear)), 18px var(--tear);
-webkit-mask-repeat: no-repeat, repeat-x;
mask-repeat: no-repeat, repeat-x;
-webkit-mask-position: 0 0, 0 100%;
mask-position: 0 0, 0 100%;
}
.note::before {
content: "";
position: absolute;
top: -9px; left: 50%;
translate: -50% 0;
rotate: -3.5deg;
width: 86px; height: 22px;
background: repeating-linear-gradient(135deg,
rgba(255,124,184,.55) 0 6px, rgba(255,211,228,.55) 6px 12px);
box-shadow: 0 2px 6px rgba(168, 21, 92, .12);
}
.note--right { rotate: 2.4deg; }
/* Rundes Marken-Siegel (Hero) */
.seal {
position: relative;
display: grid;
place-items: center;
gap: var(--sp-3);
width: var(--seal-size);
aspect-ratio: 1;
padding: calc(var(--seal-size) * .11);
border-radius: 50%;
background: var(--grad-seal);
border: 2px solid rgba(255, 124, 184, .45);
box-shadow: var(--sh-pink-lg), inset 0 0 0 10px rgba(255, 255, 255, .6);
text-align: center;
}
.seal::before {
content: "";
position: absolute;
inset: -18%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 124, 184, .55) 0%, rgba(255, 124, 184, 0) 68%);
filter: blur(24px);
z-index: -1;
pointer-events: none;
}
.seal .brand-logo--lockup { height: auto; max-height: calc(var(--seal-size) * .42); max-width: 100%; }
/* Text-Fallback für die Wortmarke — läuft, solange noch keine Logodatei
hinterlegt ist (siehe brand_mark('lockup')). Bewusst konservativ groß,
damit auch ein längerer Firmenname (z.B. "Love Scoop Mystery", 3 Wörter)
im runden Siegel nicht überläuft. */
.seal .lockup-word {
display: block;
max-width: 80%;
margin-inline: auto;
font-size: calc(var(--seal-size) * .11);
line-height: 1.05;
text-wrap: balance;
}
.seal .lockup-script { font-family: var(--font-script); font-size: calc(var(--seal-size) * .09); color: var(--rose-700); line-height: 1; }
.seal .ribbon { font-size: clamp(.62rem, 1.6vw, var(--fs-xs)); --ribbon-tail: 18px; }
/* Konfetti-Streuung — schwebende Herzen/Sparkles hinter dem Content */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti > svg {
position: absolute;
left: var(--x); top: var(--y);
width: var(--s, 18px); height: var(--s, 18px);
rotate: var(--r, 0deg);
color: var(--c, var(--pink-300));
opacity: var(--o, .6);
}
/* Puffige Geschenkbox — Hero-/Leerzustand-/Bestätigungs-Deko */
.giftbox {
position: relative;
width: var(--gift-size, 120px);
aspect-ratio: 1 / .88;
border-radius: 14px 14px 18px 18px;
background:
radial-gradient(circle at 32% 22%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%),
linear-gradient(160deg, #FF9EC7 0%, #E62E82 100%);
box-shadow: var(--sh-pink-md), inset 0 -10px 18px rgba(90,17,54,.16);
}
.giftbox::before {
content: ""; position: absolute; inset: 0 42%;
background: linear-gradient(180deg, #FFFFFF, #FFE8F1);
opacity: .92;
}
.giftbox::after {
content: ""; position: absolute; left: 50%; top: -16%;
translate: -50% 0;
width: 54%; aspect-ratio: 2 / 1;
border-radius: 50% 50% 40% 40%;
background: linear-gradient(160deg, #FFFFFF, #FFB9D4);
box-shadow: 0 3px 8px rgba(168,21,92,.22);
}
/* Glühende Herz-Lampe */
.heartlamp {
width: var(--hl, 64px);
aspect-ratio: 1;
color: var(--pink-500);
filter: drop-shadow(0 0 10px rgba(255,124,184,.9)) drop-shadow(0 0 22px rgba(255,77,157,.5));
}
/* Dekorative Trennlinie. Vormals eine Lichterkette mit gelben Punkten —
die Punkte passten farblich nicht mehr zum Pink-Theme und wurden entfernt,
die Linie bleibt als schlichter Farbverlauf stehen. */
.fairylights {
height: 26px;
background-repeat: repeat-x;
background-size: 46px 26px;
background-image:
linear-gradient(to bottom, transparent 46%, rgba(255,124,184,.45) 46%, rgba(255,124,184,.45) 48%, transparent 48%);
}
/* ============================================================
06 PLATZHALTER-GRAFIKEN
------------------------------------------------------------
Keine externen Bilder! Alle Produktbilder sind bis zur
Fotoproduktion CSS-Verläufe. Später ersetzt der Entwickler
.media durch 
im selben Container.
============================================================ */
.media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
border-radius: var(--r-lg);
background: var(--grad-cream);
overflow: hidden;
}
.media--wide { aspect-ratio: 4 / 3; }
/* Fotos füllen die Bildfläche; Zuschnitt mittig (Karten, Warenkorb, Kasse). */
.media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der "Scoop": Kugel mit Glanzlicht und Steinchen-Textur */
.scoop {
position: relative;
width: 68%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-image:
/* Glanzlicht oben links */
radial-gradient(circle at 30% 24%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 40%),
/* Steinchen-Sprenkel, zwei versetzte Raster */
radial-gradient(circle, rgba(255,255,255,.60) 1.6px, transparent 2.2px),
radial-gradient(circle, rgba(59,36,54,.10) 1.2px, transparent 1.8px),
/* Grundfarbe */
var(--scoop-grad, var(--grad-candy));
background-size: 100% 100%, 15px 15px, 21px 21px, 100% 100%;
background-position: 0 0, 0 0, 7px 9px, 0 0;
box-shadow: inset 0 -14px 26px rgba(90,17,54,.14);
}
.scoop--candy { --scoop-grad: linear-gradient(135deg, #FFB4A2, #FF4D9D); }
.scoop--dream { --scoop-grad: linear-gradient(135deg, #C9A7FF, #A8C8FF); }
.scoop--mint { --scoop-grad: linear-gradient(135deg, #9BE8D8, #A8C8FF); }
.scoop--butter { --scoop-grad: linear-gradient(135deg, #FFE08A, #FFB4A2); }
.scoop--holo { --scoop-grad: linear-gradient(120deg, #FF4D9D, #C9A7FF 40%, #A8C8FF 70%, #9BE8D8); }
.scoop--berry { --scoop-grad: linear-gradient(135deg, #C9A7FF, #FF4D9D); }
/* "Foto folgt"-Kennzeichnung */
.ph-label {
position: absolute;
bottom: var(--sp-3);
left: 50%;
transform: translateX(-50%);
padding: 0.25rem 0.7rem;
border-radius: var(--r-pill);
background: rgba(255,255,255,.82);
color: var(--ink-soft);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.badge-slot {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
z-index: 2;
}
/* Kleine quadratische Fotofläche (Thumbnails, Admin) */
.thumb {
width: 56px;
height: 56px;
border-radius: var(--r-sm);
background: var(--grad-candy);
flex: 0 0 auto;
}
.thumb--dream { background: var(--grad-dream); }
.thumb--mint { background: linear-gradient(135deg, #9BE8D8, #A8C8FF); }
.thumb--butter { background: linear-gradient(135deg, #FFE08A, #FFB4A2); }
.thumb--holo { background: var(--grad-holo); }
/* ============================================================
07 HEADER / NAVIGATION
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 245, 249, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
/* Mobil: Logo + Warenkorb in Reihe 1, Navigation als Scroll-Streifen darunter.
Ab 800px (siehe Breakpoints) sitzt alles in einer Zeile. */
.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
min-height: var(--header-h);
padding-block: var(--sp-2);
}
.logo {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.02em;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-shadow: 0 2px 0 var(--blush-200);
}
.logo .sparkle { color: var(--lilac); }
.main-nav {
order: 3;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav ul {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--sp-4);
list-style: none;
margin: 0;
padding: 0;
}
.main-nav a {
white-space: nowrap;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-soft);
padding-block: 0.4rem;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a[aria-current="page"] {
color: var(--ink);
border-bottom-color: var(--pink-cta);
}
.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.cart-link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 0.5rem 1rem;
border-radius: var(--r-pill);
background: var(--white);
border: 2px solid var(--blush-200);
font-size: var(--fs-sm);
font-weight: 700;
}
.cart-link:hover { border-color: var(--pink-cta); }
.cart-count {
min-width: 20px;
height: 20px;
padding-inline: 5px;
display: grid;
place-items: center;
border-radius: var(--r-pill);
background: var(--pink-cta);
color: var(--white);
font-size: 0.7rem;
}
/* Ankündigungsleiste über dem Header */
.announce {
background: var(--grad-announce);
color: var(--white);
text-align: center;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.5rem var(--sp-4);
}
/* ============================================================
08 FOOTER
============================================================ */
.site-footer {
background: var(--rose-900);
color: rgba(255,255,255,.72);
padding-block: var(--sp-7) var(--sp-5);
margin-top: var(--sp-8);
}
.site-footer h4 {
color: var(--white);
font-size: var(--fs-base);
margin-bottom: var(--sp-3);
}
.site-footer a { color: rgba(255,255,255,.72); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--white); }
.site-footer .logo { color: var(--white); }
.footer-grid {
display: grid;
gap: var(--sp-6);
grid-template-columns: 1fr;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
/* Weißer Untergrund für die Zahlungs-Logos — auf dem dunklen Footer waren
sie schlecht zu erkennen, selbst mit den einzelnen weißen Logo-Chips. */
.footer-bottom {
margin-top: var(--sp-6);
padding: var(--sp-4);
border-top: 1px solid rgba(255,255,255,.14);
background: var(--white);
color: var(--ink-soft);
border-radius: var(--r-md);
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
justify-content: space-between;
align-items: center;
font-size: var(--fs-xs);
}
.footer-bottom a { color: var(--ink-soft); }
.footer-bottom a:hover { color: var(--ink); }
.pay-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* .footer-bottom hat mittlerweile weißen Untergrund (siehe oben) — Chips
bekommen deshalb einen dezenten Rahmen statt der alten hellen Fläche auf
dunklem Grund, sonst wären sie auf Weiß unsichtbar. */
.pay-chip {
padding: 0.3rem 0.7rem;
border-radius: var(--r-sm);
border: 1px solid var(--line);
background: var(--white);
color: var(--ink-soft);
font-size: var(--fs-xs);
font-weight: 600;
display: inline-flex;
align-items: center;
height: 30px;
box-sizing: border-box;
}
.pay-chip--img { padding: 4px 10px; }
.pay-chip--multi { gap: 6px; }
/* Einheitliche Höhe für alle Logo-Bilder in der Leiste, unabhängig vom
Seitenverhältnis der einzelnen Datei (PayPal ist z.B. viel breiter als
Klarna) — sonst wirken sie unterschiedlich groß. */
.pay-chip .brand-asset { height: 16px; }
.pay-chip--img .brand-asset { height: 18px; }
.footer-lights { margin-bottom: var(--sp-5); opacity: .85; }
/* ============================================================
09 HERO & HOMEPAGE-SEKTIONEN
============================================================ */
.hero {
position: relative;
overflow: hidden;
background: var(--grad-cream);
padding-block: var(--sp-7) var(--sp-8);
}
/* Weiche Farbwolken im Hintergrund */
.hero::before,
.hero::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .55;
pointer-events: none;
}
.hero::before { width: 320px; height: 320px; background: var(--pink-300); top: -80px; right: -60px; }
.hero::after { width: 280px; height: 280px; background: var(--blush-300); bottom: -110px; left: -70px; }
/* ------------------------------------------------------------
Cover-Hero (Startseite): das Willkommens-Bild ist der Held.
Es wird NIE beschnitten — Breite und Höhe sind beide nur
gedeckelt (max-width/max-height); das jeweils geladene
Seitenverhältnis bestimmt die tatsächliche Größe. Drei
Fassungen derselben Grafik, per nach Viewport:
941×1672 (Handy), 1086×1448 (Tablet), 1672×941 (Querformat).
Die Deckel-Logik ist verhältnis-agnostisch — sie stimmt für
alle drei ohne Sonderfall. Deshalb auch bewusst KEIN
border-radius und KEIN box-shadow am Bild: ein Radius würde
die Ecken der Grafik abschneiden. Der Schatten kommt
stattdessen per drop-shadow(), das der Bildkante folgt
statt sie zu beschneiden.
------------------------------------------------------------ */
.hero--cover {
isolation: isolate;
/* Kein Abstand oben — der weiße Bildrahmen soll direkt an der
Navbar-Kante beginnen, nicht mit Lücke darunter schweben. */
padding-top: 0;
}
.hero--cover::before,
.hero--cover::after { z-index: 0; }
.hero-cover-inner {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
}
/* Volle Seitenbreite, Höhe ergibt sich allein aus dem Seitenverhältnis
des jeweils geladenen Bildes. .hero hat overflow:hidden, daher läuft
bei der 100vw-Verbreiterung nichts über. Der weiße Rand ist Padding
auf dieser Hülle (nicht am Bild selbst), dadurch bleibt der Abstand
auf allen vier Seiten exakt gleich groß. position:relative macht die
Hülle zum Anker für die Buttonleiste, die ÜBER dem Bild liegt. */
.hero-frame {
position: relative;
display: block;
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
padding: clamp(10px, 2vw, 20px);
background: var(--white);
box-sizing: border-box;
}
/* Nur das Bild blendet beim Scrollen aus — die Buttons bleiben immer
voll sichtbar und klickbar (siehe .hero-actions unten). */
.hero-cover-pic {
display: block;
opacity: var(--hero-fade, 1);
}
.hero-cover-img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
box-shadow: none;
}
/* Buttonleiste liegt ÜBER dem Bild (unten im Rahmen), bewusst OHNE die
Ausblend-Opazität des Bildes — sonst wären die Buttons beim Scrollen
kaum noch zu sehen und schwer zu treffen, obwohl sie klickbar bleiben. */
.hero-actions {
position: absolute;
left: 50%;
bottom: clamp(20px, 4vw, 40px);
transform: translateX(-50%);
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-3);
width: min(420px, calc(100% - 40px));
}
/* TikTok-Badge im Titelbild: immer sichtbar (nicht an --hero-fade gekoppelt),
damit die Marke auch beim Herunterscrollen erkennbar bleibt — genau wie
.hero-actions. brand_asset_img() liefert das echte Logo, sobald es unter
assets/images/brands/ liegt; bis dahin greift das generische Icon. */
.hero-tiktok-badge {
position: absolute;
top: clamp(20px, 4vw, 32px);
right: clamp(20px, 4vw, 32px);
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--white);
box-shadow: var(--sh-pink-sm);
}
.hero-tiktok-badge .brand-asset { height: 22px; }
.hero-tiktok-badge .sparkle { width: 22px; height: 22px; color: var(--rose-700); }
/* "So funktioniert's" — nummerierte Schritte */
.steps {
display: grid;
gap: var(--sp-5);
counter-reset: step;
}
.step {
position: relative;
background: var(--white);
border-radius: var(--r-lg);
padding: var(--sp-6) var(--sp-5) var(--sp-5);
box-shadow: var(--sh-sm);
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
top: calc(-1 * var(--sp-4));
left: var(--sp-5);
width: 48px; height: 48px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--grad-candy);
color: var(--white);
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 700;
box-shadow: var(--sh-pink);
border: 3px solid var(--white);
}
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.step p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }
/* Markengeschichte */
.story {
background: var(--white);
border-radius: var(--r-xl);
padding: var(--sp-6);
box-shadow: var(--sh-md);
display: grid;
gap: var(--sp-5);
}
/* Zitat / Social Proof */
.quote-grid { display: grid; gap: var(--sp-4); }
.quote {
background: var(--white);
border-radius: var(--r-lg);
padding: var(--sp-5);
box-shadow: var(--sh-sm);
border-top: 4px solid var(--pink-300);
}
.quote p { font-size: var(--fs-sm); }
.quote footer { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
/* Newsletter-Band */
.cta-band {
background: var(--grad-band);
border-radius: var(--r-xl);
padding: var(--sp-6);
color: var(--white);
text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.9); max-width: 46ch; margin-inline: auto; }
/* ============================================================
10 PRODUKTKARTEN & SHOP-GRID
============================================================ */
.product-grid {
display: grid;
gap: var(--sp-4);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--blush-200);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-pink-sm);
transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-pink-md); }
.card .media { border-radius: 0; }
.card-body {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4);
flex: 1;
}
.card-cat {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
}
.card-title {
font-family: var(--font-display);
font-size: var(--fs-base);
font-weight: 600;
line-height: 1.25;
margin: 0;
}
.card-foot {
margin-top: auto;
padding-top: var(--sp-3);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
}
/* In schmalen Karten rutscht der Button unter den Preis, statt zu überlaufen. */
.card-foot .btn { flex: 1 1 auto; }
.price {
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--rose-700);
}
.price--old {
font-size: var(--fs-sm);
color: var(--ink-faint);
text-decoration: line-through;
margin-left: var(--sp-2);
font-family: var(--font-body);
}
/* Shop-Kopfzeile mit Sortierung */
.shop-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
justify-content: space-between;
margin-bottom: var(--sp-5);
}
.result-count { font-size: var(--fs-sm); color: var(--ink-soft); }
.select {
padding: 0.55rem 1rem;
border: 2px solid var(--line);
border-radius: var(--r-pill);
background: var(--white);
font-size: var(--fs-sm);
font-weight: 600;
cursor: pointer;
}
/* ============================================================
11 PRODUKTDETAIL
============================================================ */
.pdp { display: grid; gap: var(--sp-6); }
.gallery { display: grid; gap: var(--sp-3); }
.gallery .media--main { aspect-ratio: 1 / 1; box-shadow: var(--sh-pink-sm); border: 1px solid var(--blush-200); }
/* Produktseite: ganzes Bild zeigen, nichts abschneiden.
Freie Ränder füllt der Cream-Verlauf aus .media. */
.gallery .media--main .media-img { object-fit: contain; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.gallery-thumbs .media {
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
border: 2px solid transparent;
cursor: pointer;
}
.gallery-thumbs .media[aria-current="true"] { border-color: var(--pink-cta); }
.gallery-thumbs .scoop { width: 62%; }
.pdp-info .price { font-size: var(--fs-2xl); }
.pdp-meta {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.inside-box {
background: var(--cream-deep);
border-radius: var(--r-lg);
padding: var(--sp-5);
margin-block: var(--sp-5);
}
.inside-box h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
/* Perlensorten-Übersicht auf der Produktseite: bewusst OHNE Prozentangaben.
Beim händischen Schöpfen wäre eine Wahrscheinlichkeit nicht belegbar. */
.bead-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bead-item {
display: flex; align-items: center; gap: 8px; background: var(--white);
border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 12px 6px 6px;
font-size: var(--fs-sm);
}
.bead-img { width: 32px; height: 32px; object-fit: cover; border-radius: var(--r-sm); flex: 0 0 auto; }
.qty {
display: inline-flex;
align-items: center;
border: 2px solid var(--line);
border-radius: var(--r-pill);
background: var(--white);
overflow: hidden;
}
.qty button {
width: 42px; height: 46px;
border: 0; background: none;
font-size: var(--fs-md); font-weight: 700;
color: var(--ink-soft); cursor: pointer;
}
.qty button:hover { color: var(--rose-700); background: var(--cream-deep); }
.qty input {
width: 44px; height: 46px;
border: 0; text-align: center;
font-weight: 700; background: none;
-moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block: var(--sp-5); }
.buy-row .btn--primary { flex: 1 1 200px; }
/* Aufklappbare Detailabschnitte */
.accordion {
border-top: 1px solid var(--line);
}
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
padding: var(--sp-4) 0;
font-family: var(--font-display);
font-size: var(--fs-base);
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: var(--fs-lg); color: var(--rose-700); }
.accordion details[open] summary::after { content: "–"; }
.accordion details > *:not(summary) {
padding-bottom: var(--sp-4);
font-size: var(--fs-sm);
color: var(--ink-soft);
}
/* ============================================================
12 WARENKORB
============================================================ */
.cart-layout { display: grid; gap: var(--sp-6); }
.cart-list { display: grid; gap: var(--sp-3); }
.cart-item {
display: grid;
grid-template-columns: 84px 1fr;
gap: var(--sp-4);
align-items: start;
background: var(--white);
border: 1px solid var(--blush-200);
border-radius: var(--r-lg);
padding: var(--sp-4);
box-shadow: var(--sh-pink-sm);
}
.cart-item .media { aspect-ratio: 1/1; border-radius: var(--r-md); }
.cart-item .scoop { width: 66%; }
.cart-item-head {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
justify-content: space-between; align-items: flex-start;
}
.cart-item-title { font-family: var(--font-display); font-weight: 600; margin: 0; }
.cart-item-ctl {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--sp-3); margin-top: var(--sp-3);
}
.link-danger {
background: none; border: 0; padding: 0;
color: var(--ink-faint); font-size: var(--fs-sm);
font-weight: 600; cursor: pointer; text-decoration: underline;
}
.link-danger:hover { color: var(--danger); }
/* Zusammenfassung / Summenblock */
.summary {
background: var(--white);
border: 1px solid var(--blush-200);
border-radius: var(--r-xl);
padding: var(--sp-5);
box-shadow: var(--sh-pink-md);
position: sticky;
top: calc(var(--header-h) + var(--sp-4));
}
.summary h3 { font-size: var(--fs-lg); }
.sum-row {
display: flex; justify-content: space-between; gap: var(--sp-3);
padding-block: var(--sp-2);
font-size: var(--fs-sm);
}
.sum-row--total {
border-top: 2px dashed var(--line);
margin-top: var(--sp-3);
padding-top: var(--sp-4);
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 600;
}
.sum-row--total .price { font-size: var(--fs-xl); }
.voucher { display: flex; gap: var(--sp-2); margin-block: var(--sp-4); }
.voucher .input { flex: 1; }
.empty-state {
text-align: center;
padding: var(--sp-8) var(--sp-4);
background: var(--white);
border: 1px solid var(--blush-200);
border-radius: var(--r-xl);
box-shadow: var(--sh-pink-sm);
}
/* ============================================================
13 KASSE (CHECKOUT)
============================================================ */
.checkout-layout { display: grid; gap: var(--sp-6); }
.checkout-steps {
display: flex;
align-items: center;
gap: var(--sp-2);
list-style: none;
margin: 0 0 var(--sp-6);
padding: 0;
font-size: var(--fs-sm);
font-weight: 700;
color: var(--ink-faint);
flex-wrap: wrap;
}
.checkout-steps li { display: flex; align-items: center; gap: var(--sp-2); }
.checkout-steps li::after { content: "›"; color: var(--ink-faint); margin-left: var(--sp-2); }
.checkout-steps li:last-child::after { content: ""; }
.checkout-steps .is-done { color: var(--ink-soft); }
.checkout-steps .is-current { color: var(--rose-700); }
.panel {
background: var(--white);
border: 1px solid var(--blush-200);
border-radius: var(--r-xl);
padding: var(--sp-5);
box-shadow: var(--sh-pink-sm);
margin-bottom: var(--sp-5);
}
.panel > h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
/* Zahlungsarten als auswählbare Kacheln */
.pay-options { display: grid; gap: var(--sp-3); }
.pay-option {
display: grid;
grid-template-columns: 22px 52px 1fr auto;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4);
border: 2px solid var(--line);
border-radius: var(--r-md);
cursor: pointer;
background: var(--white);
transition: border-color .15s ease, background-color .15s ease;
}
.pay-option:hover { border-color: var(--pink-300); }
.pay-option:has(input:checked) {
border-color: var(--pink-cta);
background: rgba(216, 27, 118, 0.05);
}
.pay-option input { accent-color: var(--pink-cta); width: 20px; height: 20px; margin: 0; }
.pay-option strong { display: block; font-size: var(--fs-base); }
.pay-option .small { color: var(--ink-soft); }
/* "Bald verfügbar" — Klarna/Kreditkarte sind noch nicht wirklich angebunden,
werden also bewusst als auswählbar aussehend, aber deaktiviert gezeigt,
statt sie kommentarlos verschwinden zu lassen. */
.pay-option--disabled { cursor: not-allowed; opacity: .55; }
.pay-option--disabled:hover { border-color: var(--line); }
.pay-soon-badge {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-soft);
background: var(--bg-soft, #F3F1EE);
border-radius: 999px;
padding: 4px 10px;
white-space: nowrap;
}
/* Zahlungs-Logos. Ursprünglich bewusst reine CSS-/Text-Marken ("keine
Plattform-Logos"); auf ausdrückliche Entscheidung der Inhaberin zeigen wir
jetzt die ECHTEN offiziellen Logos (PayPal, Klarna) — ebenso das TikTok-Logo
beim Video-Add-on. Die Dateien liegen lokal unter assets/images/brands/
(Herkunft: assets/images/brands/QUELLEN.txt); extern nachgeladen wird nach
wie vor nichts. Fehlt eine Datei, greift automatisch wieder die Textmarke
darunter — siehe brand_asset_img() in includes/functions.php. */
.pay-logo {
width: 52px; height: 34px;
display: grid; place-items: center;
border-radius: var(--r-sm);
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.02em;
border: 1px solid var(--line);
background: var(--white);
color: var(--ink);
text-align: center;
line-height: 1.05;
}
.pay-logo--paypal { background: #F0F4FB; color: #12305B; }
.pay-logo--klarna { background: #FFB3C7; color: #17120F; }
.pay-logo--card { background: linear-gradient(135deg, #EDE7FF, #DCEBFF); color: #2E2A55; }
.pay-logo--bank { background: #EAF6F1; color: #17604A; }
/* Marken-Assets: Fremdlogos dürfen laut den Markenrichtlinien der Anbieter
NICHT eingefärbt, verzerrt, beschnitten, gedreht oder mit Effekten belegt
werden — deshalb hier explizit keine Filter, kein currentColor, kein
erzwungenes Seitenverhältnis und ein Mindestabstand rundum. Diese Regeln
bitte nicht "aufräumen". */
.brand-asset {
width: auto; /* nie zusammenstauchen: Höhe führt, Breite folgt */
height: 20px;
max-height: 100%;
object-fit: contain;
display: inline-block;
vertical-align: middle;
flex: 0 0 auto;
filter: none; /* kein Grauton-/Helligkeitsfilter */
mix-blend-mode: normal; /* keine Blendmodi */
border-radius: 0; /* nicht beschneiden */
}
/* width:auto statt der festen 52px oben — ein breites Logo (z.B. PayPal)
würde sonst über den Rand hinaus abgeschnitten, da .pay-logo kein
overflow:hidden hat. Alle Logos bekommen dieselbe Höhe (siehe
.brand-asset unten), die Breite ergibt sich proportional daraus — das
ist die einzige Art, wie unterschiedlich geformte Logos (breite
Wortmarke vs. quadratisches Badge) "gleich groß" wirken können. */
.pay-logo--img {
width: auto;
background: var(--white); /* neutraler Hintergrund statt Markenfarbe */
padding: 4px 8px; /* Schutzraum / clear space */
}
.pay-logo--img .brand-asset { height: 22px; }
/* Kreditkarte zeigt zwei Logos (Visa + Mastercard) — UNTEREINANDER statt
nebeneinander, sonst ragen die beiden nebeneinander gesetzten Wortmarken
(v.a. Visa, sehr breit) über die 52px-Spalte hinaus und überlappen den
Text daneben ("Kreditkarte / Visa, Mastercard, Amex"). Feste Breite statt
des sonst genutzten width:auto von .pay-logo--img, damit das garantiert
in der Spalte bleibt; kleinere Logo-Höhe, damit beide übereinander passen. */
.pay-logo--multi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 52px; padding: 3px 4px; }
.pay-logo--multi .brand-asset { height: 14px; }
.addon-check .brand-asset { height: 18px; }
.form-note {
font-size: var(--fs-xs);
color: var(--ink-soft);
background: var(--cream-deep);
border-radius: var(--r-md);
padding: var(--sp-3);
}
/* Kompakte Bestellübersicht im Checkout */
.mini-item {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: var(--sp-3);
padding-block: var(--sp-3);
border-bottom: 1px solid var(--line);
font-size: var(--fs-sm);
}
.mini-item:last-of-type { border-bottom: 0; }
.mini-item .media { aspect-ratio: 1/1; border-radius: var(--r-sm); }
.mini-item .scoop { width: 68%; }
/* Video-Add-on als eigene "Produktzeile" in der Bestellübersicht — sitzt
bewusst NACH den Summen (siehe checkout.php), nicht bei den Artikeln: das
Add-on zählt nicht zur Zwischensumme (Mindestbestellwert-Schwelle bezieht
sich nur auf Ware), soll aber trotzdem wie ein echtes Produkt aussehen. */
.mini-item--addon { border-bottom: 0; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.media--addon, .addon-line-media {
aspect-ratio: 1/1; border-radius: var(--r-sm);
background: var(--blush-50);
display: flex; align-items: center; justify-content: center;
}
.media--addon .addon-media-icon, .addon-line-media .addon-media-icon { width: 20px; height: 20px; color: var(--rose-700); }
/* ============================================================
14 FORMULARE (STOREFRONT)
============================================================ */
.field { display: block; margin-bottom: var(--sp-4); }
.field > .label {
display: block;
font-size: var(--fs-sm);
font-weight: 700;
margin-bottom: var(--sp-2);
}
/* Hinweis-/Fehlerboxen im Storefront — eigene Klasse statt .a-alert (das
ist Admin-only und setzt --a-radius, das außerhalb von .admin nicht
existiert -> eckige Ecken + falsche Farben auf Kundenseiten). */
.alert {
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-md);
font-size: var(--fs-sm);
background: #FDECEE; color: #B2323C;
border: 1px solid #F3C7CB;
margin-bottom: var(--sp-4);
}
.alert--info { background: var(--blush-100); color: var(--rose-700); border-color: var(--blush-200); }
.alert--warn { background: #FEF4E5; color: #96660F; border: 1px solid #F3DFB3; }
.input, .textarea, select.input {
width: 100%;
padding: 0.8rem 1rem;
border: 2px solid var(--line);
border-radius: var(--r-md);
background: var(--white);
transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, select.input:focus {
outline: none;
border-color: var(--pink-cta);
box-shadow: 0 0 0 4px rgba(216, 27, 118, 0.14);
}
.input::placeholder { color: var(--ink-faint); }
.textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; gap: var(--sp-4); }
.field-row--2 { grid-template-columns: 1fr; }
.field-row--split { grid-template-columns: 1fr; }
.check {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--fs-sm);
cursor: pointer;
margin-bottom: var(--sp-3);
}
.check input { accent-color: var(--pink-cta); width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.hint { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: var(--sp-2); }
/* Video-Add-on-Schalter: dieselbe Kaufabsicht auf vier Oberflächen
(Shop-Übersicht, Produktseite, Warenkorb, Checkout). Verbindlich
ausgewertet wird weiterhin nur das Checkout-Formular. */
.addon-check { margin-top: var(--sp-3); align-items: flex-start; }
.addon-check span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.addon-note { margin: 4px 0 0; }
.card-add { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* "In den Korb"-Bestätigung: der Button selbst zeigt kurz einen animierten
Haken statt dass die Seite (wie vorher per Redirect+Anchor) nach unten
springt — siehe das Skript am Ende von shop.php. */
.js-add-to-cart-btn.is-added { background: var(--success); border-color: var(--success); color: var(--white); }
.js-add-to-cart-label { display: inline-flex; align-items: center; gap: 5px; }
.btn-check {
width: 15px; height: 15px;
animation: btn-check-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes btn-check-pop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.25); opacity: 1; }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.btn-check { animation: none; }
}
.check--tiny { font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: 0; }
.check--tiny input { width: 16px; height: 16px; }
/* Video-Add-on als eigene Kachel: sieht aus wie eine Produktkarte, ist aber
keine. Es gibt keine Detailseite, deshalb ist nur der Button klickbar —
und die Karte hebt sich beim Hover bewusst NICHT an, damit sie nicht
fälschlich als anklickbare Produktkachel gelesen wird. */
.card--addon { border-color: var(--lilac); }
.card--addon:hover { transform: none; box-shadow: var(--sh-pink-sm); }
.card--addon .media { cursor: default; }
.card--addon .brand-asset { height: 48px; }
.addon-media-icon { width: 48px; height: 48px; color: var(--rose-700); }
.card-title-opt {
display: block;
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-soft);
}
.card-note { font-size: var(--fs-xs); color: var(--ink-soft); margin: 0; }
/* Checkout: das gebuchte Video-Add-on als "Produktzeile" statt Checkbox —
dieselbe Spaltenaufteilung wie .mini-item, damit Checkout-Panel und
Bestellübersicht wie dasselbe Objekt aussehen. */
.addon-line {
display: grid;
grid-template-columns: 48px 1fr auto;
gap: var(--sp-3);
align-items: start;
}
.addon-line-media { width: 48px; height: 48px; }
.addon-line-main { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.addon-line-main strong { font-size: var(--fs-md); line-height: 1.3; }
.addon-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.addon-line-text { grid-column: 2 / -1; margin-top: var(--sp-2); }
.addon-line-text p { margin-bottom: 0; }
.addon-line-text p + p { margin-top: 6px; }
@media (max-width: 560px) {
.addon-line { grid-template-columns: 40px 1fr; }
.addon-line-media { width: 40px; height: 40px; }
.addon-line-side { grid-column: 2 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
.addon-line-text { grid-column: 1 / -1; }
}
/* ============================================================
15 ADMIN — TOKENS & LAYOUT
------------------------------------------------------------
Bewusst NICHT verspielt: neutral, dicht, werkzeughaft.
Nur die Wortmarke behält das Pink als Marken-Anker.
============================================================ */
.admin {
--a-bg: #F4F6F9;
--a-surface: #FFFFFF;
--a-sidebar: #1E2432;
--a-sidebar-2: #2A3244;
--a-ink: #1E2432;
--a-ink-soft: #616E82;
--a-ink-faint: #94A1B2;
--a-line: #E3E8EF;
--a-accent: #FF4D9D;
--a-accent-sf: #FFEAF3;
--a-radius: 8px;
--a-radius-lg: 12px;
--a-sh: 0 1px 2px rgba(30,36,50,.06), 0 4px 12px rgba(30,36,50,.05);
font-family: var(--font-body);
background: var(--a-bg);
color: var(--a-ink);
font-size: var(--fs-sm);
line-height: 1.55;
}
.admin h1, .admin h2, .admin h3, .admin h4 {
font-family: var(--font-body);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--a-ink);
}
.admin h1 { font-size: 1.5rem; }
.admin h2 { font-size: 1.15rem; }
.admin h3 { font-size: 1rem; }
.admin-shell {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
}
/* Seitenleiste */
.admin-sidebar {
background: var(--a-sidebar);
color: rgba(255,255,255,.68);
padding: var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.admin-brand {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: #fff;
display: flex; align-items: center; gap: 0.4rem;
}
.admin-brand .sparkle { color: var(--a-accent); }
.admin-brand small {
font-family: var(--font-body);
font-size: 0.65rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--a-ink-faint); display: block;
}
.admin-nav { display: grid; gap: 2px; }
.admin-nav-label {
font-size: 0.65rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: #6B7688;
padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.admin-nav a {
display: flex; align-items: center; gap: var(--sp-3);
padding: 0.55rem var(--sp-3);
border-radius: var(--a-radius);
font-size: var(--fs-sm); font-weight: 500;
color: rgba(255,255,255,.72);
}
.admin-nav a:hover { background: var(--a-sidebar-2); color: #fff; }
.admin-nav a[aria-current="page"] { background: var(--a-sidebar-2); color: #fff; font-weight: 600; }
.admin-nav a[aria-current="page"] .dot { background: var(--a-accent); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #4B5567; flex: 0 0 auto; }
.admin-sidebar-foot { margin-top: auto; font-size: var(--fs-xs); color: #6B7688; }
/* Hauptbereich */
.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--a-surface);
border-bottom: 1px solid var(--a-line);
position: sticky; top: 0; z-index: 20;
}
.admin-topbar .search { flex: 1; max-width: 340px; }
.admin-user {
margin-left: auto;
display: flex; align-items: center; gap: var(--sp-3);
font-size: var(--fs-sm);
}
.avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--grad-candy); color: #fff;
display: grid; place-items: center;
font-size: var(--fs-xs); font-weight: 700;
}
/* minmax(0,1fr) statt 1fr: sonst weigern sich Grid-Kinder zu schrumpfen
und breite Tabellen sprengen die Seite, statt in .table-scroll zu scrollen. */
.admin-content {
padding: var(--sp-4);
display: grid;
gap: var(--sp-5);
grid-template-columns: minmax(0, 1fr);
}
.admin-page-head {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--sp-3); justify-content: space-between;
}
.page-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.page-actions .a-select { width: auto; }
.breadcrumb { font-size: var(--fs-xs); color: var(--a-ink-faint); margin-bottom: var(--sp-1); }
/* ============================================================
16 ADMIN — KOMPONENTEN
============================================================ */
.a-card {
min-width: 0;
background: var(--a-surface);
border: 1px solid var(--a-line);
border-radius: var(--a-radius-lg);
box-shadow: var(--a-sh);
}
.a-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--a-line);
}
.a-card-body { padding: var(--sp-5); }
/* Kennzahlen */
.stat-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.stat {
min-width: 0;
background: var(--a-surface);
border: 1px solid var(--a-line);
border-radius: var(--a-radius-lg);
padding: var(--sp-4);
box-shadow: var(--a-sh);
}
.stat-label {
font-size: var(--fs-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .07em;
color: var(--a-ink-faint);
}
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-top: var(--sp-1); }
.stat-delta { font-size: var(--fs-xs); font-weight: 600; }
.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }
/* Admin-Buttons */
.a-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
padding: 0.5rem 0.9rem;
border: 1px solid var(--a-line);
border-radius: var(--a-radius);
background: var(--a-surface);
font-size: var(--fs-sm); font-weight: 600;
cursor: pointer;
transition: background-color .14s ease, border-color .14s ease;
}
.a-btn:hover { background: #F7F9FC; border-color: #CBD3DE; }
.a-btn--primary {
background: var(--a-accent); border-color: var(--a-accent); color: #fff;
}
.a-btn--primary:hover { background: #E62E82; border-color: #E62E82; }
.a-btn--danger { color: var(--danger); }
.a-btn--danger:hover { background: #FDF0F1; border-color: #F3C7CB; }
/* Für den Bestätigungs-Dialog (#a-confirm): die Löschbestätigung braucht
dasselbe Gewicht wie .a-btn--primary, aber in der Fehlerfarbe der
.a-alert-Palette (#B2323C) statt im positiven Pink-Akzent. */
.a-btn--danger-solid { background: #B2323C; border-color: #B2323C; color: #fff; }
.a-btn--danger-solid:hover { background: #9A2A33; border-color: #9A2A33; }
.a-btn--icon { padding: 0.35rem 0.5rem; line-height: 1; }
.a-btn--sm { padding: 0.3rem 0.6rem; font-size: var(--fs-xs); }
/* Admin-Formularfelder */
.a-field { display: block; margin-bottom: var(--sp-4); }
.a-field > .label {
display: block; font-size: var(--fs-xs); font-weight: 700;
color: var(--a-ink-soft); margin-bottom: var(--sp-2);
}
.a-input, .a-select, .a-textarea {
width: 100%;
padding: 0.5rem 0.7rem;
border: 1px solid #CBD3DE;
border-radius: var(--a-radius);
background: #fff;
font-size: var(--fs-sm);
}
.a-input:focus, .a-select:focus, .a-textarea:focus {
outline: none; border-color: var(--a-accent);
box-shadow: 0 0 0 3px rgba(255,77,157,.15);
}
.a-textarea { min-height: 90px; resize: vertical; }
/* Visueller Editor für Rechts-/Inhaltsseiten (admin/page_edit.php) — bewusst
kein externes Editor-Skript (Projektregel: keine externen Requests), nur
contenteditable + execCommand. Reicht für Absätze/Überschriften/Fett/Liste,
die "Quellcode"-Ansicht bleibt als Rückfallebene für alles Feinere. */
.editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
.editor-visual {
min-height: 280px;
overflow-y: auto;
box-sizing: border-box;
line-height: 1.6;
}
.editor-visual:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(255,77,157,.15); }
.editor-visual h3 { margin: 0.6em 0 0.3em; }
.editor-visual p { margin: 0 0 0.6em; }
.editor-visual ul { margin: 0 0 0.6em; padding-left: 1.4em; }
.a-hint { font-size: var(--fs-xs); color: var(--a-ink-faint); margin-top: var(--sp-1); }
.a-grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
/* Filterleiste */
.a-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--a-line);
}
.a-toolbar .a-input, .a-toolbar .a-select { width: auto; min-width: 150px; }
.a-toolbar .spacer { margin-left: auto; }
/* Tabellen */
.table-scroll { overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.a-table th {
text-align: left;
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--a-ink-faint);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--a-line);
white-space: nowrap;
background: #FAFBFD;
}
.a-table td {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--a-line);
vertical-align: middle;
}
.a-table tbody tr:hover { background: #FAFBFD; }
.a-table tbody tr:last-child td { border-bottom: 0; }
.a-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-table .actions { text-align: right; white-space: nowrap; }
.a-table .actions .a-btn + .a-btn { margin-left: var(--sp-2); }
.cell-product { display: flex; align-items: center; gap: var(--sp-3); min-width: 220px; }
.cell-product .thumb { width: 40px; height: 40px; border-radius: 6px; }
.cell-product strong { display: block; font-weight: 600; }
.cell-product .sku { font-size: var(--fs-xs); color: var(--a-ink-faint); }
/* Sortier-/Reihenfolge-Steuerung */
.order-ctl { display: inline-flex; flex-direction: column; gap: 2px; }
.order-ctl button {
width: 22px; height: 16px;
border: 1px solid var(--a-line);
border-radius: 4px;
background: #fff;
font-size: 9px; line-height: 1;
color: var(--a-ink-soft); cursor: pointer;
}
.order-ctl button:hover { background: #F0F3F8; color: var(--a-accent); }
.order-ctl a {
width: 22px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--a-line);
border-radius: 4px;
background: #fff;
font-size: 9px; line-height: 1;
color: var(--a-ink-soft);
text-decoration: none;
}
.order-ctl a:hover { background: #F0F3F8; color: var(--a-accent); }
.drag-handle { color: var(--a-ink-faint); cursor: grab; font-size: var(--fs-md); }
/* Status-Chips */
.chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 0.15rem 0.55rem;
border-radius: var(--r-pill);
font-size: var(--fs-xs); font-weight: 600;
background: #EEF1F6; color: var(--a-ink-soft);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--live { background: #E7F6EF; color: #1E7A57; }
.chip--draft { background: #FEF4E5; color: #96660F; }
.chip--hidden { background: #EEF1F6; color: #616E82; }
.chip--low { background: #FDECEE; color: #B2323C; }
/* Scoop-Stufen (Rarity) — bewusst ruhig, keine Gaming-Ästhetik */
.chip--tier-1 { background: #E7F6F2; color: #1E7A6E; }
.chip--tier-2 { background: #F1EBFF; color: #6B4FCC; }
.chip--tier-3 { background: linear-gradient(100deg, #FFE6F2, #F1EBFF, #E6F3FF); color: #A8266E; }
/* Gewichtungs-Balken in der Symbol-Tabelle */
.weight-bar-track { width: 100%; max-width: 120px; height: 6px; border-radius: var(--r-pill); background: #EEF1F6; overflow: hidden; }
.weight-bar-fill { height: 100%; border-radius: var(--r-pill); }
/* Paginierung */
.a-pagination {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3); flex-wrap: wrap;
padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--a-line);
font-size: var(--fs-xs); color: var(--a-ink-soft);
}
.a-pagination nav { display: flex; gap: var(--sp-2); }
/* Login */
.admin-login {
min-height: 100vh;
display: grid;
place-items: center;
padding: var(--sp-5);
background:
radial-gradient(900px 420px at 50% -10%, #E9EDF4 0%, transparent 70%),
var(--a-bg);
}
.login-card {
width: 100%; max-width: 390px;
background: var(--a-surface);
border: 1px solid var(--a-line);
border-radius: var(--a-radius-lg);
box-shadow: 0 12px 40px rgba(30,36,50,.10);
padding: var(--sp-6) var(--sp-5);
}
.login-head { text-align: center; margin-bottom: var(--sp-5); }
.login-head .admin-brand { justify-content: center; color: var(--a-ink); }
.login-head .admin-brand small { color: var(--a-ink-faint); }
.login-foot {
margin-top: var(--sp-5); padding-top: var(--sp-4);
border-top: 1px solid var(--a-line);
text-align: center; font-size: var(--fs-xs); color: var(--a-ink-faint);
}
.a-alert {
padding: var(--sp-3);
border-radius: var(--a-radius);
font-size: var(--fs-xs);
background: #FDECEE; color: #B2323C;
border: 1px solid #F3C7CB;
margin-bottom: var(--sp-4);
}
.a-alert--info { background: #EEF4FE; color: #2B5493; border-color: #CFDEF8; }
.a-alert--warn { background: #FEF4E5; color: #96660F; border: 1px solid #F3DFB3; }
/* Bestätigungs-Dialog statt Browser-confirm() — siehe admin/includes/
admin_footer.php für das Markup und die data-confirm-Anbindung. Ein
natives