qciganoandClaude Sonnet 5
0a819b6a4d
1. Neue Seite /konto/angemeldet/ (alle 4 Sprachen): zeigt, was Kund:innen nach
dem Anmelden sehen - Begruessung, Kennzahlen, Bestellhistorie mit farbigem
Bestellstatus, Sendungsverfolgung (echter DHL-Link), Rechnung/Nochmal-
bestellen, Wunschliste, "Zuletzt angesehen" und Profildaten. Klar als
Vorschau gekennzeichnet: es gibt noch kein echtes Login und keine Datenbank
(Phase 2), die Bestellungen sind Beispieldaten fuer die Gestaltung. Von der
Login-Seite aus verlinkt, damit die Ansicht ueberhaupt erreichbar ist.
2. "Ueber die Kreative": der erste Abschnitt ihrer Geschichte ("Meine Reise
begann mit einer einzigen Masche") steht jetzt direkt neben dem Foto statt
darunter. Foto bleibt beim Lesen sichtbar (sticky), die restlichen
Abschnitte folgen wie bisher darunter.
3. Kategorie-Seiten: der farbige Kreis um das Emoji bei "Hauptkategorie" ist
entfernt, das Emoji steht jetzt frei neben der Ueberschrift.
Dabei gefundener und behobener eigener Fehler: das noetige "align-items: start"
fuer das neue Nebeneinander-Layout hat im gestapelten Handy-Layout die
Grid-Zeile zu niedrig berechnet, wodurch das Foto 80px in den Text darunter
ragte (per Messung im Browser nachgewiesen, nicht nur per Screenshot geraten).
Jetzt sauber auf Bildschirme ab 901px begrenzt - Handy misst 24px Abstand.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
1701 lines
68 KiB
CSS
1701 lines
68 KiB
CSS
/*
|
||
Van's DIY & Bastelbedarf — Design-System
|
||
Farbwerte 1:1 aus dem Vault: "Van Van – Homepage/02 Logo & Branding/Branding.md"
|
||
Nicht ohne Rücksprache ändern — sind bereits WCAG-kontrastgeprüft.
|
||
*/
|
||
|
||
/*
|
||
Fonts: aktuell per Google-Fonts-<link> in Layout.astro eingebunden (siehe dort).
|
||
TODO Phase 2: Fraunces + Inter self-hosten (woff2, DSGVO/Performance), sobald Zeit ist —
|
||
Vorgehen wie bei bild.py/fonts_holen.sh im Bild-KI-Projekt (CSS2-API abfragen, .woff2-URLs
|
||
aus der Antwort extrahieren, lokal unter public/fonts/ ablegen, @font-face umstellen).
|
||
*/
|
||
|
||
:root {
|
||
/* Farben */
|
||
--c-black: #0a0910;
|
||
--c-anthracite: #1b1a22;
|
||
--c-anthracite-light: #252333;
|
||
--c-purple: #2e1b47;
|
||
--c-purple-deep: #1b1226;
|
||
--c-text: #f4f1f7;
|
||
--c-text-muted: #b7aec4;
|
||
--c-accent: #5fd3ec;
|
||
--c-accent-hover: #3ca9c2;
|
||
--c-sale: #e7879a;
|
||
--c-purple-glow: #9b7fd6; /* heller Violett-Ton NUR für Verlaufs-Ränder/Deko, nicht für Text */
|
||
|
||
/* Typografie */
|
||
--font-head: "Fraunces", "Playfair Display", Georgia, serif;
|
||
--font-body: "Inter", "Manrope", system-ui, sans-serif;
|
||
|
||
/* Form */
|
||
--radius-s: 10px;
|
||
--radius-m: 16px;
|
||
--radius-l: 22px;
|
||
--shadow-card: 0 12px 30px -12px rgba(46, 27, 71, 0.55);
|
||
--shadow-card-hover: 0 18px 40px -12px rgba(95, 211, 236, 0.25);
|
||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||
--container: 1220px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--c-black);
|
||
color: var(--c-text);
|
||
font-family: var(--font-body);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
font-family: var(--font-head);
|
||
font-weight: 600;
|
||
line-height: 1.15;
|
||
margin: 0 0 0.5em;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); }
|
||
h2 { font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem); }
|
||
h3 { font-size: 1.3rem; }
|
||
p { margin: 0 0 1em; color: var(--c-text-muted); }
|
||
|
||
a { color: inherit; text-decoration: none; }
|
||
|
||
img { max-width: 100%; display: block; }
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: var(--container);
|
||
margin-inline: auto;
|
||
padding-inline: 1.5rem;
|
||
}
|
||
|
||
.section { padding: clamp(3rem, 6vw, 6rem) 0; }
|
||
.section-tight { padding: clamp(2rem, 3vw, 3rem) 0; }
|
||
|
||
.eyebrow {
|
||
display: inline-block;
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--c-accent);
|
||
font-weight: 600;
|
||
margin-bottom: 0.9rem;
|
||
}
|
||
|
||
.lead { font-size: 1.15rem; color: var(--c-text); opacity: 0.9; }
|
||
|
||
.text-center { text-align: center; }
|
||
.small { font-size: 0.85rem; color: var(--c-text-muted); }
|
||
|
||
/* Buttons */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5em;
|
||
padding: 0.85em 1.7em;
|
||
border-radius: var(--radius-l);
|
||
font-weight: 600;
|
||
font-size: 0.98rem;
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
|
||
}
|
||
.btn:hover { transform: translateY(-2px); }
|
||
.btn:active { transform: translateY(0); }
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
|
||
color: #08181c;
|
||
box-shadow: var(--shadow-card-hover);
|
||
}
|
||
.btn-primary:hover { box-shadow: 0 20px 45px -14px rgba(95, 211, 236, 0.45); }
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: var(--c-text);
|
||
border-color: rgba(244, 241, 247, 0.25);
|
||
}
|
||
.btn-outline:hover { border-color: var(--c-accent); color: var(--c-accent); }
|
||
|
||
.btn-block { width: 100%; }
|
||
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.5rem; }
|
||
|
||
/* Cards — Verlaufs-Rand statt trockenem Einzelfarb-Strich (Signature-Look der Seite) */
|
||
.card {
|
||
position: relative;
|
||
isolation: isolate;
|
||
border: 1.5px solid transparent;
|
||
border-radius: var(--radius-m);
|
||
background:
|
||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||
linear-gradient(135deg, rgba(95, 211, 236, 0.5), rgba(155, 127, 214, 0.4) 45%, rgba(231, 135, 154, 0.32)) border-box;
|
||
padding: 1.6rem;
|
||
box-shadow: var(--shadow-card);
|
||
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
|
||
}
|
||
.card::before {
|
||
/* dezenter Glanz-Schimmer oben, wie ein Lichtreflex auf Glas — macht den Rand "speziell" statt flach */
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
padding: 1.5px;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%);
|
||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
opacity: 0.6;
|
||
}
|
||
.card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-card-hover);
|
||
filter: brightness(1.06);
|
||
}
|
||
|
||
/* Klickbare Navigations-Kacheln (Produktkarten, Kategorien) bekommen den Verlaufs-Rand extra
|
||
kräftig — das sind die "Kisten, wo man draufdrückt um auf eine neue Seite zu kommen". */
|
||
a.card {
|
||
background:
|
||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||
linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%) border-box;
|
||
}
|
||
a.card:hover {
|
||
box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(95, 211, 236, 0.25);
|
||
}
|
||
|
||
/* Grid utils */
|
||
.grid { display: grid; gap: 1.5rem; }
|
||
.grid-2 { grid-template-columns: repeat(2, 1fr); }
|
||
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||
.grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
|
||
|
||
/* Der Haupt-Shop (/shop/) wickelt jede Produktkarte zusätzlich in ein .product-slot-Div ein
|
||
(nötig für den Filter/Sortier-JS-Code, das einzelne Karten ein-/ausblendet). CSS Grid streckt
|
||
dieses Div zwar automatisch auf die volle Zeilenhöhe, die Karte DARIN füllte diese Höhe aber
|
||
nicht aus (ein normales <div> reicht "stretch" nicht an sein Kind weiter) — dadurch wirkten
|
||
Karten mit kurzem Text kleiner als Karten mit langem Text in derselben Reihe. Fix: das Slot-Div
|
||
selbst zum Flex-Container machen, dessen einziges Kind (die Karte) sich per Flex-Stretch auf
|
||
die volle Höhe ausdehnt — Karten in derselben Zeile sind dadurch überall gleich groß. */
|
||
.product-slot { display: flex; }
|
||
.product-slot > a { flex: 1; }
|
||
|
||
/* Badges — sitzen direkt auf Produktfotos (unterschiedlichste Hintergründe/Farben), deshalb
|
||
braucht die Pille genug eigene Kraft, um immer lesbar zu bleiben: kräftigerer (weniger
|
||
transparenter) Hintergrund + eigener Rand in derselben Farbe + dezenter Schlagschatten hinterm
|
||
Text. Farbton und Grundstil bleiben exakt gleich, nur die Durchsetzungskraft ist höher. */
|
||
.badge {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
padding: 0.3em 0.75em;
|
||
border-radius: 999px;
|
||
background: rgba(95, 211, 236, 0.34);
|
||
border: 1px solid rgba(95, 211, 236, 0.6);
|
||
color: var(--c-accent);
|
||
text-shadow: 0 1px 3px rgba(10, 9, 16, 0.65);
|
||
}
|
||
.badge-sale { background: rgba(231, 135, 154, 0.36); border-color: rgba(231, 135, 154, 0.6); color: var(--c-sale); }
|
||
.badge-sold-out { background: rgba(183, 174, 196, 0.32); border-color: rgba(183, 174, 196, 0.55); color: var(--c-text-muted); }
|
||
|
||
/* Placeholder art (kein echtes Produktfoto vorhanden) */
|
||
.img-placeholder {
|
||
position: relative;
|
||
border-radius: var(--radius-m);
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(circle at 30% 20%, rgba(95, 211, 236, 0.18), transparent 55%),
|
||
linear-gradient(155deg, var(--c-purple), var(--c-purple-deep));
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.3rem;
|
||
color: var(--c-text-muted);
|
||
font-size: 0.85rem;
|
||
text-align: center;
|
||
padding: 1rem;
|
||
min-height: 160px;
|
||
}
|
||
.img-placeholder::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: repeating-linear-gradient(135deg, rgba(244,241,247,0.03) 0 2px, transparent 2px 14px);
|
||
}
|
||
|
||
/* Echtes Produktfoto (von VanVan im Adminbereich hochgeladen) — ersetzt den Platzhalter, sobald
|
||
`bilder` am Produkt gesetzt ist. Gleiche Maße/Ecken wie der Platzhalter, damit beim Hochladen
|
||
des ersten Fotos nichts im Layout springt. */
|
||
.product-photo {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-m);
|
||
}
|
||
.product-media .product-photo { aspect-ratio: 1 / 1; }
|
||
.thumb.product-photo { cursor: pointer; transition: box-shadow 0.2s var(--ease); }
|
||
|
||
/* Portrait-Frame — edler Bilderrahmen für Porträtfotos (Startseite, Über die Kreative, ...) */
|
||
.portrait-frame {
|
||
position: relative;
|
||
isolation: isolate;
|
||
}
|
||
.portrait-frame::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -6%;
|
||
z-index: -1;
|
||
background:
|
||
radial-gradient(circle at 30% 20%, rgba(95, 211, 236, 0.35), transparent 60%),
|
||
radial-gradient(circle at 75% 80%, rgba(231, 135, 154, 0.22), transparent 55%);
|
||
filter: blur(38px);
|
||
opacity: 0.85;
|
||
border-radius: inherit;
|
||
}
|
||
.portrait-frame .portrait-img,
|
||
.portrait-frame img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 1 / 1;
|
||
object-fit: cover;
|
||
border-radius: var(--radius-l);
|
||
border: 1px solid rgba(244, 241, 247, 0.08);
|
||
box-shadow: var(--shadow-card), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.18);
|
||
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
|
||
}
|
||
/* Auch der "Foto folgt"-Platzhalter bekommt den gleichen edlen Rahmen/Ring wie ein echtes Foto —
|
||
vorher blieb er innerhalb eines Portrait-Frames (z.B. Charakter ohne Produkt) unauffällig
|
||
randlos, während echte Fotos schon den Ring hatten. Behält seine eigene Flex-Zentrierung für
|
||
den "Produktfoto folgt"-Text bei (nur display wird hier NICHT überschrieben). */
|
||
.portrait-frame .img-placeholder {
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: var(--radius-l);
|
||
border: 1px solid rgba(244, 241, 247, 0.08);
|
||
box-shadow: var(--shadow-card), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.18);
|
||
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
|
||
}
|
||
.portrait-frame:hover .portrait-img,
|
||
.portrait-frame:hover img,
|
||
.portrait-frame:hover .img-placeholder {
|
||
transform: translateY(-4px) scale(1.015);
|
||
box-shadow: var(--shadow-card-hover), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.32);
|
||
}
|
||
.portrait-badge {
|
||
position: absolute;
|
||
bottom: -1.1rem;
|
||
right: -1.1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4em;
|
||
padding: 0.7em 1.1em;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
|
||
color: #08181c;
|
||
font-family: var(--font-head);
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.01em;
|
||
box-shadow: 0 10px 26px -8px rgba(95, 211, 236, 0.55), 0 0 0 5px var(--c-black);
|
||
transform: rotate(-4deg);
|
||
white-space: nowrap;
|
||
}
|
||
@media (max-width: 620px) {
|
||
.portrait-badge { right: 0.4rem; bottom: -0.9rem; font-size: 0.78rem; padding: 0.6em 0.9em; }
|
||
}
|
||
|
||
.todo-note {
|
||
border: 1px dashed rgba(95, 211, 236, 0.4);
|
||
border-radius: var(--radius-s);
|
||
padding: 0.9rem 1.1rem;
|
||
font-size: 0.85rem;
|
||
color: var(--c-text-muted);
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.legal-note {
|
||
border-left: 3px solid var(--c-accent);
|
||
background: rgba(95, 211, 236, 0.08);
|
||
padding: 1rem 1.3rem;
|
||
border-radius: var(--radius-s);
|
||
margin-bottom: 2rem;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
hr.divider {
|
||
border: none;
|
||
border-top: 1px solid rgba(244, 241, 247, 0.08);
|
||
margin: 2.5rem 0;
|
||
}
|
||
|
||
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
|
||
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(244,241,247,0.08); }
|
||
th { color: var(--c-text); font-family: var(--font-head); font-weight: 600; }
|
||
|
||
form.frm { display: grid; gap: 1rem; max-width: 560px; }
|
||
.frm label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.35rem; }
|
||
.frm input, .frm select, .frm textarea {
|
||
width: 100%;
|
||
padding: 0.75em 0.9em;
|
||
border-radius: var(--radius-s);
|
||
border: 1px solid rgba(244, 241, 247, 0.15);
|
||
background: var(--c-anthracite);
|
||
color: var(--c-text);
|
||
font-family: var(--font-body);
|
||
font-size: 0.95rem;
|
||
}
|
||
.frm input:focus, .frm select:focus, .frm textarea:focus,
|
||
a:focus-visible, button:focus-visible {
|
||
outline: 2px solid var(--c-accent);
|
||
outline-offset: 2px;
|
||
}
|
||
.frm .checkbox-row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; color: var(--c-text-muted); }
|
||
.frm .checkbox-row input { width: auto; margin-top: 0.2rem; }
|
||
|
||
/* ============================================================
|
||
Sprach-Umschalter + Konto-Button (Header)
|
||
============================================================ */
|
||
.lang-switch { position: relative; }
|
||
.lang-switch-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4em;
|
||
background:
|
||
linear-gradient(155deg, color-mix(in srgb, var(--globe-color) 16%, var(--c-anthracite-light)), color-mix(in srgb, var(--globe-color) 5%, var(--c-anthracite)));
|
||
border: 1px solid color-mix(in srgb, var(--c-purple-glow) 55%, rgba(244, 241, 247, 0.14));
|
||
color: var(--c-text);
|
||
border-radius: 999px;
|
||
padding: 0.45em 0.9em 0.45em 0.55em;
|
||
font-size: 0.92rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
box-shadow:
|
||
inset 0 1px 0 color-mix(in srgb, var(--globe-glow, var(--globe-color)) 20%, transparent),
|
||
0 3px 12px -6px color-mix(in srgb, var(--globe-color) 55%, transparent);
|
||
transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
|
||
}
|
||
.lang-switch-btn:hover {
|
||
border-color: color-mix(in srgb, var(--c-purple-glow) 85%, transparent);
|
||
box-shadow:
|
||
inset 0 1px 0 color-mix(in srgb, var(--globe-glow, var(--globe-color)) 30%, transparent),
|
||
0 6px 18px -6px color-mix(in srgb, var(--globe-color) 70%, transparent);
|
||
transform: translateY(-1px);
|
||
}
|
||
.lang-switch-btn .chevron { font-size: 0.6rem; opacity: 0.7; color: var(--globe-color); transition: transform 0.2s var(--ease); }
|
||
.lang-switch.open .lang-switch-btn .chevron { transform: rotate(180deg); }
|
||
.lang-switch-menu {
|
||
position: absolute;
|
||
top: calc(100% + 0.6rem);
|
||
right: 0;
|
||
min-width: 168px;
|
||
background: var(--c-anthracite-light);
|
||
border: 1px solid rgba(244, 241, 247, 0.1);
|
||
border-radius: var(--radius-m);
|
||
box-shadow: var(--shadow-card);
|
||
padding: 0.4rem;
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 0.15rem;
|
||
z-index: 60;
|
||
}
|
||
.lang-switch.open .lang-switch-menu { display: flex; }
|
||
.lang-switch-menu a {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6em;
|
||
padding: 0.55em 0.7em;
|
||
border-radius: var(--radius-s);
|
||
font-size: 0.88rem;
|
||
opacity: 0.72;
|
||
transition: background 0.15s var(--ease), opacity 0.15s var(--ease);
|
||
}
|
||
.lang-switch-menu a:hover { background: color-mix(in srgb, var(--globe-color) 12%, transparent); opacity: 1; }
|
||
.lang-switch-menu a[aria-current="true"] { opacity: 1; font-weight: 700; }
|
||
.lang-switch-menu a[aria-current="true"] .lang-globe {
|
||
box-shadow:
|
||
0 0 0 3px color-mix(in srgb, var(--globe-color) 45%, transparent),
|
||
0 0 14px 2px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 70%, transparent);
|
||
}
|
||
|
||
/* Sprachname im Farbverlauf der Nationalflagge (2 kräftigste Streifenfarben, Weiß/Schwarz
|
||
ausgelassen weil auf dunklem Grund unsichtbar bzw. zu hart) — Globus und Schrift wirken
|
||
dadurch wie ein zusammengehöriges, flaggenfarbenes Element. */
|
||
.lang-label {
|
||
background: linear-gradient(90deg, var(--globe-color, var(--c-text)), var(--globe-glow, var(--globe-color)));
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
text-shadow: 0 0 10px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 35%, transparent);
|
||
transition: filter 0.2s var(--ease);
|
||
}
|
||
.lang-switch-btn:hover .lang-label,
|
||
.lang-switch-menu a:hover .lang-label {
|
||
filter: brightness(1.25) saturate(1.2);
|
||
}
|
||
|
||
/* Globus-Icon statt Flaggen-Emoji: trägt die echten Nationalflaggen-Farben als rotierende
|
||
Farbscheibe (siehe `flag` in i18n/config.ts) — dreht sich dauerhaft langsam wie ein
|
||
Modellglobus, wird schneller beim Hover. Eine zweite, FESTE Ebene obendrüber sorgt für
|
||
Glanzlicht + Schattenseite (3D-Kugel-Wirkung), damit die Farben plastisch statt flach wirken. */
|
||
.lang-globe {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
color: rgba(10, 9, 16, 0.55);
|
||
/* Dezenter "Polarlicht"-Schimmer: mehrere weiche, unterschiedlich gefärbte Glow-Schichten
|
||
(Lila der Seite + Flaggenfarbe + Akzent-Türkis) statt eines einzelnen harten Farbrings. */
|
||
box-shadow:
|
||
0 0 0 1px color-mix(in srgb, var(--c-purple-glow) 55%, transparent),
|
||
0 3px 5px -1px color-mix(in srgb, black 55%, transparent),
|
||
0 0 7px 1px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 40%, transparent),
|
||
0 0 13px 3px color-mix(in srgb, var(--c-purple-glow) 22%, transparent),
|
||
0 0 18px 4px color-mix(in srgb, var(--c-accent) 12%, transparent);
|
||
transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
|
||
flex-shrink: 0;
|
||
}
|
||
.lang-globe::after {
|
||
/* fixe Lichtquelle: bleibt stehen, während die Flaggenfarben darunter rotieren */
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2;
|
||
background:
|
||
radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 30%),
|
||
radial-gradient(circle at 75% 78%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 55%);
|
||
mix-blend-mode: overlay;
|
||
pointer-events: none;
|
||
}
|
||
.lang-globe-rotor {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* Weiche, ineinander fließende Übergänge statt harter 120°-Segmente — gleicher Stil (Flaggen-
|
||
farben, Rotation), nur eleganter/fließender statt wie ein Tortendiagramm. */
|
||
background: conic-gradient(from 0deg, var(--flag-1) 0%, var(--flag-2) 33%, var(--flag-3) 66%, var(--flag-1) 100%);
|
||
animation: globe-spin 6s linear infinite;
|
||
}
|
||
.lang-globe:hover .lang-globe-rotor { animation-duration: 1.6s; }
|
||
@keyframes globe-spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.lang-globe-rotor { animation: none; }
|
||
}
|
||
.lang-globe svg { position: relative; z-index: 1; opacity: 0.55; filter: drop-shadow(0 0 1px rgba(10, 9, 16, 0.6)); }
|
||
.lang-switch-btn .lang-globe { width: 24px; height: 24px; }
|
||
.lang-switch-btn:hover .lang-globe,
|
||
.lang-switch-menu a:hover .lang-globe {
|
||
box-shadow:
|
||
0 0 0 1px color-mix(in srgb, var(--c-purple-glow) 75%, transparent),
|
||
0 3px 6px -1px color-mix(in srgb, black 55%, transparent),
|
||
0 0 10px 2px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 55%, transparent),
|
||
0 0 18px 4px color-mix(in srgb, var(--c-purple-glow) 30%, transparent),
|
||
0 0 24px 6px color-mix(in srgb, var(--c-accent) 18%, transparent);
|
||
transform: scale(1.12);
|
||
}
|
||
|
||
.account-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5em;
|
||
padding: 0.55em 1.1em 0.55em 0.6em;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, rgba(95, 211, 236, 0.16), rgba(46, 27, 71, 0.4));
|
||
border: 1px solid rgba(95, 211, 236, 0.3);
|
||
color: var(--c-text);
|
||
font-size: 0.92rem;
|
||
font-weight: 600;
|
||
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
||
}
|
||
.account-btn:hover {
|
||
border-color: var(--c-accent);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 8px 20px -8px rgba(95, 211, 236, 0.4);
|
||
}
|
||
.account-btn .account-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 29px;
|
||
height: 29px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(155deg, var(--c-accent), var(--c-purple));
|
||
color: var(--c-black);
|
||
font-size: 0.86rem;
|
||
}
|
||
@media (max-width: 860px) {
|
||
.account-btn .account-label { display: none; }
|
||
.account-btn { padding: 0.5em; }
|
||
}
|
||
|
||
/* ============================================================
|
||
Geteilte Seiten-Layouts (von allen Sprachversionen genutzt,
|
||
damit DE/EN/CH/FR immer exakt gleich aussehen)
|
||
============================================================ */
|
||
|
||
/* Startseite: Hero + Kategorie-Kacheln + Kreative-Sektion */
|
||
.hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 7rem) 0; background: radial-gradient(circle at 15% 20%, rgba(46,27,71,0.9), var(--c-black) 60%); }
|
||
.hero-watermark {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: min(85vw, 900px);
|
||
opacity: 0.045;
|
||
filter: grayscale(1);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.hero-inner { position: relative; max-width: 640px; }
|
||
.hero h1 { margin-bottom: 0.7em; }
|
||
|
||
/* Zweispaltiges Hero-Layout: Foto-Collage links, Text rechts */
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: grid;
|
||
grid-template-columns: minmax(280px, 0.95fr) 1.1fr;
|
||
gap: clamp(2rem, 5vw, 4.5rem);
|
||
align-items: center;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.hero-content { grid-template-columns: 1fr; }
|
||
.hero-inner { max-width: none; }
|
||
}
|
||
|
||
/* Foto-Collage: 4 handgefertigte Produktfotos, versetzt & leicht gedreht arrangiert wie ein
|
||
kuratiertes Moodboard statt eines steifen Rasters — jedes Foto trägt denselben
|
||
Verlaufs-Rand wie unsere Produktkarten (Signature-Look, siehe a.card), damit es sich
|
||
erkennbar in die restliche Seite einfügt statt wie ein Fremdkörper zu wirken. */
|
||
.hero-gallery {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 440px;
|
||
aspect-ratio: 1 / 1.08;
|
||
margin-inline: auto;
|
||
}
|
||
.hero-photo {
|
||
position: absolute;
|
||
overflow: hidden;
|
||
border-radius: var(--radius-l);
|
||
border: 2.5px solid transparent;
|
||
background:
|
||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||
linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%) border-box;
|
||
box-shadow: var(--shadow-card);
|
||
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), z-index 0s;
|
||
}
|
||
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.hero-photo:hover { transform: scale(1.06) rotate(0deg) !important; box-shadow: var(--shadow-card-hover); z-index: 5 !important; }
|
||
|
||
.hero-photo-1 { width: 58%; aspect-ratio: 3 / 4; top: 0; left: 0; transform: rotate(-4deg); z-index: 3; }
|
||
.hero-photo-2 { width: 44%; aspect-ratio: 1 / 1; top: 3%; right: 0; transform: rotate(5deg); z-index: 2; }
|
||
.hero-photo-3 { width: 40%; aspect-ratio: 4 / 5; bottom: 4%; left: 12%; transform: rotate(6deg); z-index: 4; }
|
||
.hero-photo-4 { width: 38%; aspect-ratio: 1 / 1; bottom: -1%; right: 8%; transform: rotate(-6deg); z-index: 1; }
|
||
|
||
@media (max-width: 900px) {
|
||
.hero-gallery { max-width: 380px; margin-bottom: 1rem; }
|
||
}
|
||
@media (max-width: 760px) { .hero-watermark { opacity: 0.035; } }
|
||
|
||
.category-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
|
||
.cat-icon { font-size: 2.1rem; }
|
||
.category-card h3 { margin-bottom: 0.2rem; }
|
||
|
||
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.3rem; }
|
||
.section-head a { color: var(--c-accent); }
|
||
|
||
.creator-section { align-items: center; }
|
||
.creator-photo { max-width: 420px; margin-inline: auto; }
|
||
/* Das echte Foto (vanvan-portrait.png, 1122×1402 ≈ 4/5) ist hochkant, nicht quadratisch — die
|
||
allgemeine .portrait-frame-Regel erzwingt aber ein 1:1-Seitenverhältnis, wodurch der untere
|
||
Teil des Fotos (der zweite Plushie im Arm) abgeschnitten wurde. Eigenes Seitenverhältnis nah am
|
||
Original, damit das komplette Foto sichtbar bleibt — gleiches Muster wie schon bei .portrait auf
|
||
der "Über die Kreative"-Seite gelöst. */
|
||
.creator-photo .portrait-img,
|
||
.creator-photo img { aspect-ratio: 4 / 5; }
|
||
|
||
/* "Über die Kreative" / Charakter-Vorstellung (Unterkategorie-Familienseiten) */
|
||
.intro { align-items: stretch; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
|
||
.intro h2 a { color: inherit; transition: color 0.2s var(--ease); }
|
||
.intro h2 a:hover { color: var(--c-accent); }
|
||
|
||
/* Foto UND Text bekommen auf den Charakter-Vorstellungen jeweils die gleiche "Kisten"-Optik wie
|
||
die Produktkarten (Verlaufsrand, siehe .card) — zwei gleichwertige, gerahmte Boxen nebeneinander
|
||
statt freischwebendem Text neben einem Foto ohne Rahmen. */
|
||
.intro .portrait-frame.portrait,
|
||
.intro .intro-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
border: 1.5px solid transparent;
|
||
border-radius: var(--radius-m);
|
||
background:
|
||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||
linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%) border-box;
|
||
padding: 1.7rem;
|
||
box-shadow: var(--shadow-card);
|
||
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
|
||
}
|
||
.intro .portrait-frame.portrait:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-card-hover);
|
||
filter: brightness(1.06);
|
||
}
|
||
.intro .portrait-frame.portrait::before { display: none; }
|
||
/* Das Foto selbst braucht innerhalb der neuen Karte keinen zweiten Ring mehr — die Karte rahmt
|
||
schon, ein zusätzlicher Rand würde nur "doppelt gerahmt" aussehen.
|
||
WICHTIG: hier bewusst KEIN eigenes aspect-ratio mehr setzen — diese Regel ist (durch die
|
||
Kombination .intro + .portrait-frame + .portrait) spezifischer als die weiter unten stehende
|
||
".portrait img { aspect-ratio: 2/3 }"-Korrektur und hat sie dadurch lautlos wieder auf 1:1
|
||
zurückgesetzt. Genau das hat den bereits einmal gefixten Bug (Oktopus-Plushie unten
|
||
abgeschnitten) auf der "Über die Kreative"-Seite erneut verursacht. */
|
||
.intro .portrait-frame.portrait img,
|
||
.intro .portrait-frame.portrait .img-placeholder {
|
||
border: none;
|
||
box-shadow: none;
|
||
border-radius: var(--radius-s);
|
||
}
|
||
|
||
/* "Über die Kreative": VanVans Geschichte steht direkt NEBEN ihrem Foto (statt darunter als
|
||
eigener Block). Weil die Textspalte dadurch deutlich höher wird als das Foto, wird hier oben
|
||
ausgerichtet statt gestreckt — sonst würde die Fotokarte mit viel leerem Raum mitwachsen.
|
||
Das Foto bleibt beim Lesen sichtbar (sticky), solange genug Platz da ist. */
|
||
/* NUR im zweispaltigen Layout (ab 901px): oben ausrichten statt strecken + Foto bleibt beim
|
||
Lesen sichtbar. Bewusst NICHT global gesetzt — unterhalb von 900px stehen Foto und Text
|
||
ohnehin untereinander, und dort führt `align-items: start` zu einem echten Fehler: die
|
||
Grid-Zeile wird dann anhand des geschätzten Bild-Seitenverhältnisses berechnet und fällt
|
||
~100px zu niedrig aus, wodurch das Foto in den Text darunter hineinragt (gemessen: 80px
|
||
Überlappung). Mit dem Standardverhalten (stretch) tritt das nicht auf. */
|
||
@media (min-width: 901px) {
|
||
.intro-story { align-items: start; }
|
||
.intro-story .portrait-frame.portrait { position: sticky; top: 6.5rem; }
|
||
}
|
||
/* text-wrap: balance verteilt die Zeilen der Überschrift gleichmäßig — sonst rutscht bei
|
||
breiten Fenstern nur das 🩵 allein in eine eigene Zeile. */
|
||
.intro-story-text h1 { margin-bottom: 0.6rem; text-wrap: balance; }
|
||
.intro-story-text h2 {
|
||
margin-top: 2rem;
|
||
font-size: clamp(1.4rem, 2.4vw, 1.8rem);
|
||
}
|
||
.intro-story-text p { max-width: 60ch; }
|
||
|
||
/* Wechselt innerhalb einer Tier-Familie ab: Foto links/rechts, Text jeweils gegenüber — sorgt
|
||
für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. */
|
||
.intro-reverse .portrait-frame.portrait { order: 2; }
|
||
.intro-reverse .intro-text { order: 1; }
|
||
@media (max-width: 800px) {
|
||
.intro { grid-template-columns: 1fr; gap: 1.5rem; }
|
||
.intro-reverse .portrait-frame.portrait, .intro-reverse .intro-text { order: initial; }
|
||
}
|
||
/* Breiter als vorher (war 440px) + Seitenverhältnis nah am Originalfoto (900x1353 ≈ 2/3)
|
||
statt 3/4 — vorher wurde oben/unten so stark beschnitten, dass das Plushie neben VanVan
|
||
(Oktopus) nur noch als Ecke sichtbar war. So ist das ganze Foto inkl. beider Plushies zu sehen. */
|
||
.portrait { max-width: 540px; }
|
||
.portrait .portrait-img,
|
||
.portrait img { aspect-ratio: 2 / 3; }
|
||
|
||
/* Pull-Quote: elegantes, hervorgehobenes Zitat — genutzt für VanVans Zitat auf der Startseite
|
||
("Die Kreative") und den Abschluss-Satz auf "Über die Kreative". Serif-Kursiv + Akzent-Rand
|
||
statt einfachem Fließtext, damit es sich sichtbar abhebt, aber im Stil der Seite bleibt. */
|
||
.pull-quote {
|
||
position: relative;
|
||
font-family: var(--font-head);
|
||
font-style: italic;
|
||
font-weight: 500;
|
||
font-size: clamp(1.2rem, 1.1rem + 1vw, 1.55rem);
|
||
line-height: 1.55;
|
||
color: var(--c-text);
|
||
padding: 0.2rem 0 0.2rem 1.4rem;
|
||
border-left: 3px solid var(--c-accent);
|
||
margin: 1.4rem 0;
|
||
}
|
||
.pull-quote-center {
|
||
text-align: center;
|
||
border-left: none;
|
||
border-top: 1px solid rgba(95, 211, 236, 0.3);
|
||
border-bottom: 1px solid rgba(95, 211, 236, 0.3);
|
||
padding: 1.6rem 1rem;
|
||
max-width: 720px;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
/* Story-Abschnitte ("Über die Kreative"): wiederkehrende h2+Absätze mit klarer Struktur und
|
||
sanftem Einblenden beim Scrollen (dezente Verbesserung, kein Redesign). */
|
||
.story-section { padding-block: 1.6rem; }
|
||
.story-section:not(:last-child) { border-bottom: 1px solid rgba(244, 241, 247, 0.07); }
|
||
.story-section h2 { color: var(--c-text); }
|
||
.story-section p { max-width: 68ch; }
|
||
.story-section.is-visible { animation: story-fade-up 0.7s var(--ease) both; }
|
||
@keyframes story-fade-up {
|
||
from { opacity: 0; transform: translateY(18px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.story-section.is-visible { animation: none; }
|
||
}
|
||
|
||
/* Unterkategorie-Chips auf den Hauptkategorie-Seiten — mittig, mit demselben Verlaufsrand-Stil
|
||
wie die Karten der Seite (siehe .card), statt schlichter Einzelfarb-Pillen. Wirkt dadurch
|
||
"speziell" und zur Marke passend, bleibt aber ruhig/professionell statt aufdringlich. */
|
||
.subcategory-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.6rem 0 2.5rem; }
|
||
.subcategory-chip {
|
||
position: relative;
|
||
isolation: isolate;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.65em 1.4em;
|
||
border-radius: 999px;
|
||
font-size: 0.92rem;
|
||
font-weight: 700;
|
||
color: var(--c-text);
|
||
border: 1.5px solid transparent;
|
||
background:
|
||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||
linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 50%, var(--c-sale) 100%) border-box;
|
||
box-shadow: var(--shadow-card);
|
||
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
|
||
}
|
||
.subcategory-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); filter: brightness(1.1); }
|
||
|
||
/* Persönliche Vorstellung eines Plushie-Charakters auf seiner Unterkategorie-Seite (z.B.
|
||
"Hallo, ich bin Frieda ..."). Dezente Box im Kartenstil des Shops, kein neues Designelement. */
|
||
.character-intro {
|
||
max-width: 640px;
|
||
margin: 1.6rem 0 2rem;
|
||
padding: 1.4rem 1.6rem;
|
||
border-radius: var(--radius-l);
|
||
background: var(--c-anthracite);
|
||
border: 1px solid rgba(244, 241, 247, 0.1);
|
||
border-left: 3px solid var(--c-accent);
|
||
}
|
||
.character-intro p { margin: 0; white-space: pre-line; }
|
||
.character-intro p:first-child { font-family: var(--font-head); font-weight: 600; color: var(--c-text); margin-bottom: 0.5em; }
|
||
|
||
/* "Willst du mehr über X erfahren?" + Link-Button — sowohl innerhalb der character-intro-Box
|
||
(falls noch kein echtes Produkt zugeordnet ist) als auch frei im Intro-Layout (sobald ein
|
||
echtes Produkt featured wird). */
|
||
.character-more { margin-top: 1rem; }
|
||
.character-more p { margin: 0 0 0.6em; color: var(--c-text-muted); }
|
||
|
||
/* Seiten-Banner (Shop, Sale, ...): echtes Foto/Grafik als Kopfbild mit Verlauf-Überblendung
|
||
unten, damit Titel/Text darauf lesbar bleiben — ersetzt die reine Text-Kopfzeile durch ein
|
||
echtes visuelles Signal, wie im Pflichtenheft für "Bannerplätze" gefordert. */
|
||
.page-banner {
|
||
position: relative;
|
||
/* aspect-ratio statt fester min-height, damit das Bild bei background-size:cover NICHT
|
||
oben/unten beschnitten wird — die Box hat exakt das Seitenverhältnis des Fotos, jedes
|
||
Banner setzt seinen eigenen Wert per Inline-Style (--banner-ratio). */
|
||
aspect-ratio: var(--banner-ratio, 1600 / 729);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
background-size: cover;
|
||
background-position: center;
|
||
border-radius: var(--radius-l);
|
||
overflow: hidden;
|
||
margin-inline: auto;
|
||
margin-top: 1.5rem;
|
||
}
|
||
.page-banner::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(180deg, rgba(10, 9, 16, 0.15) 0%, rgba(10, 9, 16, 0.55) 55%, rgba(10, 9, 16, 0.92) 100%),
|
||
linear-gradient(100deg, rgba(46, 27, 71, 0.35), transparent 55%);
|
||
}
|
||
.page-banner-content { position: relative; z-index: 1; padding: 1.8rem clamp(1.25rem, 4vw, 2.5rem); }
|
||
.page-banner-content .eyebrow { color: var(--c-accent); }
|
||
.page-banner-content h1 { margin-bottom: 0.35em; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
|
||
.page-banner-content .lead { color: var(--c-text); max-width: 620px; }
|
||
|
||
/* Shop-Übersicht + Kategorie-Seiten */
|
||
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; }
|
||
.filters h3 { margin-bottom: 1rem; }
|
||
.filter-group { margin-bottom: 1.2rem; }
|
||
.filter-group label, #f-kategorie-label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.4rem; }
|
||
.filter-group select, .filter-group input[type="range"] { width: 100%; }
|
||
.filters select, .shop-toolbar select {
|
||
background: var(--c-anthracite); color: var(--c-text);
|
||
border: 1px solid rgba(244,241,247,0.15); border-radius: var(--radius-s); padding: 0.5em 0.7em;
|
||
}
|
||
|
||
/* Kategorie-Filter im Shop: eigenes Dropdown statt nativem <select> mit optgroups. Grund: die
|
||
Tier-Unterkategorien (Kuh, Hase, Wal, ...) waren in der schmucklosen Browser-eigenen
|
||
Optgroup-Liste zwar technisch vorhanden, aber kaum als eigene, auswählbare Zeilen zu erkennen.
|
||
Hier bekommen sie denselben "Karte mit Verlaufsrand"-Look wie der Rest der Seite, klar
|
||
eingerückt unter ihrer Hauptkategorie, mit demselben Namen wie auf den Kategorie-Seiten. */
|
||
.cat-filter { position: relative; width: 100%; }
|
||
.cat-filter-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.6em;
|
||
width: 100%;
|
||
background: var(--c-anthracite);
|
||
color: var(--c-text);
|
||
border: 1.5px solid transparent;
|
||
background:
|
||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||
linear-gradient(135deg, rgba(95, 211, 236, 0.5), rgba(155, 127, 214, 0.4) 45%, rgba(231, 135, 154, 0.32)) border-box;
|
||
border-radius: var(--radius-s);
|
||
padding: 0.55em 0.8em;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: box-shadow 0.2s var(--ease);
|
||
}
|
||
.cat-filter-btn:hover { box-shadow: var(--shadow-card); }
|
||
.cat-filter-btn .chevron { font-size: 0.65rem; opacity: 0.7; color: var(--c-accent); transition: transform 0.2s var(--ease); flex-shrink: 0; }
|
||
.cat-filter.open .cat-filter-btn .chevron { transform: rotate(180deg); }
|
||
.cat-filter-menu {
|
||
position: absolute;
|
||
top: calc(100% + 0.5rem);
|
||
left: 0;
|
||
right: 0;
|
||
max-height: min(60vh, 420px);
|
||
overflow-y: auto;
|
||
background: var(--c-anthracite-light);
|
||
border: 1px solid rgba(244, 241, 247, 0.12);
|
||
border-radius: var(--radius-m);
|
||
box-shadow: var(--shadow-card);
|
||
padding: 0.5rem;
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 0.1rem;
|
||
z-index: 60;
|
||
}
|
||
.cat-filter.open .cat-filter-menu { display: flex; }
|
||
.cat-filter-group { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.5rem; }
|
||
.cat-filter-group:first-of-type { margin-top: 0.2rem; }
|
||
.cat-filter-group-label {
|
||
padding: 0.3em 0.6em 0.1em;
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--c-accent);
|
||
font-weight: 700;
|
||
}
|
||
.cat-filter-option {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: left;
|
||
background: none;
|
||
border: none;
|
||
color: var(--c-text);
|
||
padding: 0.5em 0.6em;
|
||
border-radius: var(--radius-s);
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
transition: background 0.15s var(--ease);
|
||
}
|
||
.cat-filter-option:hover { background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
|
||
.cat-filter-option[aria-selected="true"] { background: color-mix(in srgb, var(--c-accent) 20%, transparent); font-weight: 700; }
|
||
.cat-filter-option.cat-filter-sub { padding-left: 1.4em; font-size: 0.88rem; opacity: 0.92; }
|
||
.cat-filter-option.cat-filter-sub::before { content: "— "; opacity: 0.6; }
|
||
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
|
||
.legal-hint { margin-top: 2rem; }
|
||
.breadcrumb { margin-bottom: 0.6rem; font-size: 0.95rem; }
|
||
.breadcrumb a { color: var(--c-accent); font-weight: 600; }
|
||
.breadcrumb a:hover { text-decoration: underline; }
|
||
/* Aktuelle Ebene (Haupt-/Unterkategorie, Produktname) hebt sich etwas vom "Shop"-Wurzel-Link ab. */
|
||
.breadcrumb strong { color: var(--c-text); font-weight: 700; }
|
||
|
||
/* Überschrift über der "weitere Produkte"-Reihe auf Unterkategorie-Seiten — macht klar, dass da
|
||
noch mehr Produkte derselben Reihe kommen (Charakter-Familie), egal wie viele es am Ende sind. */
|
||
.more-variants-label { text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); margin-bottom: 0.8rem; }
|
||
|
||
/* Persönliche Charaktergeschichten (Hallo-ich-bin-Texte) auf den Tier-Familien-Seiten — eigene,
|
||
volle Breite Karten übereinander gestapelt, GETRENNT von den Shop-Karten darunter (die zeigen
|
||
nur noch Foto/Preis/Kaufinfos, keine Geschichten). */
|
||
.character-stories { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0.6rem; }
|
||
|
||
/* Die Story-Karte bekommt einen eigenen, "besonderen" Auftritt statt der schlichten Basis-Karte:
|
||
ein großes, dezentes Anführungszeichen als Wasserzeichen (reine Formatierung, kein neuer Text),
|
||
einen sanften Marken-Farbschimmer rund um die Box (Verlauf aus den Signature-Farben Cyan/Lila/
|
||
Rosa, wie beim Verlaufsrand der Karten) und ein eigens gestalteter "hier"-Button im
|
||
Verlaufs-Look statt schlichtem Outline-Rahmen. */
|
||
.character-story {
|
||
position: relative;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
padding: 2.2rem 2.4rem 2rem;
|
||
box-shadow:
|
||
var(--shadow-card),
|
||
0 0 46px -14px color-mix(in srgb, var(--c-accent) 40%, transparent),
|
||
0 0 80px -22px color-mix(in srgb, var(--c-sale) 28%, transparent);
|
||
}
|
||
.character-story:hover {
|
||
box-shadow:
|
||
var(--shadow-card-hover),
|
||
0 0 60px -12px color-mix(in srgb, var(--c-accent) 50%, transparent),
|
||
0 0 100px -18px color-mix(in srgb, var(--c-sale) 36%, transparent);
|
||
}
|
||
.character-story::after {
|
||
content: "“";
|
||
position: absolute;
|
||
z-index: 0;
|
||
top: -0.3rem;
|
||
right: 1rem;
|
||
font-family: var(--font-head);
|
||
font-size: 7rem;
|
||
line-height: 1;
|
||
color: transparent;
|
||
background: linear-gradient(160deg, var(--c-accent), var(--c-purple-glow) 55%, var(--c-sale));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
opacity: 0.18;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
.character-story > * { position: relative; z-index: 1; }
|
||
.character-story h3 {
|
||
margin: 0.2rem 0 0.7rem;
|
||
font-size: 1.5rem;
|
||
background: linear-gradient(120deg, var(--c-text) 45%, var(--c-accent) 130%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
}
|
||
.character-story p { margin: 0 0 1.1rem; max-width: 62ch; font-size: 1.02rem; color: var(--c-text-muted); }
|
||
.character-story .character-more-lead {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0.55em;
|
||
margin-bottom: 0;
|
||
}
|
||
.character-story .btn {
|
||
background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow));
|
||
color: #08181c;
|
||
border-color: transparent;
|
||
font-weight: 700;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
.character-story .btn:hover {
|
||
box-shadow: var(--shadow-card-hover), 0 10px 24px -8px color-mix(in srgb, var(--c-accent) 55%, transparent);
|
||
transform: translateY(-2px);
|
||
}
|
||
@media (max-width: 640px) {
|
||
.character-story { padding: 1.8rem 1.6rem 1.7rem; }
|
||
.character-story::after { font-size: 5rem; top: -0.2rem; }
|
||
}
|
||
|
||
/* Charakter-Karten ohne zugeordnetes Produkt (noch kein Foto/Preis) — gleiche Optik wie die
|
||
echten Produktkarten (ProductCard.astro), damit die Reihe einheitlich aussieht. */
|
||
.character-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; }
|
||
.character-card .product-media { position: relative; }
|
||
/* Gleiche Bildhöhe wie ein echtes Produktfoto (siehe ProductCard.astro .product-media
|
||
.img-placeholder) — vorher griff hier nur die allgemeine .img-placeholder-Mindesthöhe
|
||
(160px), wodurch die Platzhalter-Karten kleiner/anders proportioniert wirkten als die
|
||
Karte mit echtem Foto daneben. */
|
||
.character-card .product-media .img-placeholder { aspect-ratio: 1 / 1; min-height: 0; }
|
||
.character-card h3 { font-size: 1.15rem; margin: 0.1rem 0 0; }
|
||
.character-card-desc { margin: 0; color: var(--c-text-muted); font-size: 0.92rem; }
|
||
|
||
/* Kontaktseite: "Direkter Kontakt" + "Antwortzeit" bekommen eine eigene, auffälligere Kiste
|
||
statt schlichtem freiem Text neben dem Formular — passend zum restlichen Verlaufsrand-/
|
||
Glow-Look der Seite (siehe .card, .character-story), aber ohne deren Anführungszeichen-
|
||
Wasserzeichen, weil es hier nicht um eine Zitat-Vorstellung geht, sondern um wichtige
|
||
Kontaktinfos, die etwas mehr Aufmerksamkeit verdienen. */
|
||
.contact-highlight {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 0.2rem;
|
||
background:
|
||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||
linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%) border-box;
|
||
box-shadow:
|
||
var(--shadow-card),
|
||
0 0 46px -14px color-mix(in srgb, var(--c-accent) 40%, transparent),
|
||
0 0 80px -22px color-mix(in srgb, var(--c-sale) 28%, transparent);
|
||
}
|
||
.contact-highlight:hover {
|
||
box-shadow:
|
||
var(--shadow-card-hover),
|
||
0 0 60px -12px color-mix(in srgb, var(--c-accent) 50%, transparent),
|
||
0 0 100px -18px color-mix(in srgb, var(--c-sale) 36%, transparent);
|
||
}
|
||
.contact-highlight h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5em;
|
||
margin: 0 0 0.5rem;
|
||
font-size: 1.25rem;
|
||
background: linear-gradient(120deg, var(--c-text) 45%, var(--c-accent) 130%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
}
|
||
.contact-highlight h3:not(:first-child) { margin-top: 1.3rem; }
|
||
.contact-highlight p { margin: 0 0 0.3rem; }
|
||
.contact-highlight p:last-child { margin-bottom: 0; }
|
||
|
||
/* "Unterkategorien"-Beschriftung auf der Hauptkategorie-Seite — vorher reiner grauer
|
||
Kleinschrift-Text, kaum von Fließtext zu unterscheiden. Jetzt: Akzentfarbe statt Grau, ein
|
||
kleines Icon und zwei kurze Verlaufslinien links/rechts (dezenter "Trenner"-Look statt
|
||
auffälliger Balken), damit auf einen Blick klar ist: hier beginnt ein neuer Abschnitt. */
|
||
.section-label-sub {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.6em;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
color: var(--c-accent);
|
||
margin: 0 0 1rem;
|
||
}
|
||
.section-label-sub::before,
|
||
.section-label-sub::after {
|
||
content: "";
|
||
height: 1px;
|
||
width: clamp(1.6rem, 6vw, 3.2rem);
|
||
background: linear-gradient(90deg, transparent, var(--c-purple-glow), transparent);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Hauptkategorie-Überschrift zwischen den Unterkategorie-Chips und der eigentlichen
|
||
Produktreihe auf der Kategorie-Seite — macht klar, welche Hauptkategorie man gerade
|
||
durchstöbert. Deutlich kräftiger als die "Unterkategorien"-Beschriftung (größer, mit
|
||
Verlaufs-Icon-Kreis und einem schmalen Leucht-Trenner darunter), weil sie die eigentliche
|
||
Produktreihe einleitet — bewusst nicht übertrieben (kein neuer Farbton, keine Animation). */
|
||
.kategorie-section-label {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.55em;
|
||
text-align: center;
|
||
font-size: 1.3rem;
|
||
color: var(--c-accent);
|
||
margin: 2.2rem 0 0;
|
||
}
|
||
/* Das Kategorie-Emoji steht frei neben der Überschrift — vorher saß es in einem farbigen
|
||
Kreis, der auf Wunsch entfernt wurde (der Kreis hat das Emoji eher eingesperrt als
|
||
hervorgehoben und passte nicht zum ruhigen Rest der Seite). */
|
||
.kategorie-section-label .label-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.35rem;
|
||
line-height: 1;
|
||
}
|
||
.kategorie-section-label-rule {
|
||
height: 2px;
|
||
width: clamp(3.5rem, 16vw, 7rem);
|
||
margin: 0.9rem auto 1.3rem;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, transparent, var(--c-accent), var(--c-purple-glow), var(--c-sale), transparent);
|
||
opacity: 0.85;
|
||
}
|
||
@media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }
|
||
|
||
/* Produktseite — großes Bild bekommt denselben edlen "Rahmen"-Look wie die Porträtfotos der
|
||
Seite (dunkler Ring + Akzent-Leuchtrand), statt einfach randlos zu schweben. */
|
||
.product-detail { align-items: start; }
|
||
.product-hero {
|
||
aspect-ratio: 1/1;
|
||
border: 1px solid rgba(244, 241, 247, 0.08);
|
||
box-shadow:
|
||
var(--shadow-card),
|
||
0 0 0 6px rgba(10, 9, 16, 0.6),
|
||
0 0 0 7px color-mix(in srgb, var(--c-accent) 30%, transparent),
|
||
0 0 26px 2px color-mix(in srgb, var(--c-accent) 12%, transparent);
|
||
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
|
||
}
|
||
.product-hero:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow:
|
||
var(--shadow-card-hover),
|
||
0 0 0 6px rgba(10, 9, 16, 0.6),
|
||
0 0 0 7px color-mix(in srgb, var(--c-accent) 45%, transparent),
|
||
0 0 32px 4px color-mix(in srgb, var(--c-accent) 20%, transparent);
|
||
}
|
||
.thumb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 0.9rem; }
|
||
.thumb {
|
||
aspect-ratio: 1/1;
|
||
min-height: 0;
|
||
border: 1px solid rgba(244, 241, 247, 0.08);
|
||
box-shadow: 0 0 0 3px rgba(10, 9, 16, 0.6), 0 0 0 4px rgba(244, 241, 247, 0.08);
|
||
}
|
||
.thumb.product-photo:hover { box-shadow: 0 0 0 3px rgba(10, 9, 16, 0.6), 0 0 0 4px var(--c-accent); }
|
||
.badge-row { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
|
||
|
||
/* Persönlicher Kundenbereich (/konto/angemeldet/) — Ansicht für angemeldete Kund:innen mit
|
||
Bestellhistorie, Sendungsverfolgung, Wunschliste und Profildaten. Nutzt durchgehend die
|
||
bestehende Karten-/Badge-Optik der Seite, damit sich nichts fremd anfühlt. */
|
||
.account-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.account-head h1 { margin: 0.2rem 0 0.5rem; }
|
||
.account-head .lead { margin: 0; max-width: 52ch; }
|
||
.account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
|
||
.account-stat { text-align: center; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.2rem 1rem; }
|
||
.account-stat-value { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
|
||
@media (max-width: 620px) { .account-stats { grid-template-columns: 1fr; } }
|
||
|
||
.order-list { display: flex; flex-direction: column; gap: 1.1rem; }
|
||
.order-card { display: flex; flex-direction: column; gap: 0.9rem; }
|
||
.order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||
.order-no { display: block; font-weight: 700; font-size: 1.02rem; }
|
||
.order-meta { color: var(--c-text-muted); }
|
||
/* Bestellstatus in den Farben der jeweiligen Phase (siehe Pflichtenheft Punkt 12): unterwegs =
|
||
Akzentfarbe, abgeschlossen = ruhiges Grün, in Arbeit = neutral. */
|
||
.order-status-versendet { background: color-mix(in srgb, var(--c-accent) 34%, transparent); border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
|
||
.order-status-abgeschlossen { background: rgba(126, 200, 160, 0.28); border-color: rgba(126, 200, 160, 0.5); color: #cfeee0; }
|
||
.order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
|
||
.order-items li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: var(--c-text-muted); }
|
||
.order-item-price { color: var(--c-text); white-space: nowrap; }
|
||
.order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px dashed rgba(244, 241, 247, 0.14); padding-top: 0.9rem; }
|
||
.order-total { font-size: 1.05rem; }
|
||
.order-total strong { color: var(--c-accent); }
|
||
.order-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
|
||
.order-tracking-no { margin: 0; color: var(--c-text-muted); }
|
||
.order-tracking-no code { font-size: 0.9em; letter-spacing: 0.02em; }
|
||
.profile-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
||
.profile-card .specs { margin-top: 0; width: 100%; }
|
||
|
||
/* Kundenrezensionen — Herzen in Lila-Babyblau statt Sterne (siehe HeartRating.astro), damit
|
||
Bewertungen sich erkennbar in die restliche Seite einfügen statt wie ein fremdes Bewertungs-
|
||
Widget zu wirken. */
|
||
.review-summary-link { display: inline-flex; text-decoration: none; margin: 0.3rem 0 0.9rem; }
|
||
.review-summary-link:hover .heart-value { color: var(--c-accent); }
|
||
.review-summary-row { margin-bottom: 1.6rem; }
|
||
.review-list { display: flex; flex-direction: column; gap: 1rem; }
|
||
.review-card { gap: 0.5rem; display: flex; flex-direction: column; }
|
||
.review-card-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
|
||
.review-name { font-weight: 700; }
|
||
.review-date { color: var(--c-text-muted); margin-left: auto; }
|
||
.review-card p { color: var(--c-text-muted); }
|
||
/* Bewertungszeile auf der Produktkarte — dicht unter dem Titel, kein zusätzlicher Abstand nötig,
|
||
da .product-card schon einen einheitlichen gap zwischen allen Kindern hat. */
|
||
.product-card .heart-rating { margin-top: -0.2rem; }
|
||
|
||
.price-row-detail { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.2rem; flex-wrap: wrap; }
|
||
.price-detail { font-size: 1.8rem; font-weight: 700; color: var(--c-accent); }
|
||
/* Durchgestrichener alter Preis bei Rabatt — global, damit das auch auf der Produktseite gilt
|
||
(ProductCard.astro hatte die gleiche Regel bereits scoped, hier fehlte sie sitesweit). */
|
||
.price-old { color: var(--c-text-muted); text-decoration: line-through; font-size: 1.1rem; }
|
||
.badge-rabatt { background: #ff5f7e; color: #fff; border-color: #ff5f7e; }
|
||
.mengenrabatt-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
|
||
.mengenrabatt-list li {
|
||
background: color-mix(in srgb, #ff5f7e 14%, transparent);
|
||
border: 1px solid color-mix(in srgb, #ff5f7e 35%, transparent);
|
||
color: #ff5f7e;
|
||
border-radius: var(--radius-s);
|
||
padding: 0.25em 0.6em;
|
||
font-weight: 600;
|
||
}
|
||
/* flex-wrap: falls der "In den Warenkorb"-Button mal langen Text bekommt (z.B. Lagerbestand-
|
||
Hinweise), soll er in eine neue Zeile umbrechen statt die Mengen-Steuerung daneben zu
|
||
verdecken. */
|
||
.qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.4rem 0 0.5rem; }
|
||
.qty-row .qty-stepper { flex-shrink: 0; }
|
||
|
||
/* Große, leicht zu treffende Mengen-Steuerung auf der Produktseite (ersetzt die winzigen
|
||
Browser-Standard-Pfeile eines <input type="number">). */
|
||
.qty-stepper {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid rgba(244, 241, 247, 0.16);
|
||
border-radius: 999px;
|
||
background: var(--c-anthracite);
|
||
overflow: hidden;
|
||
}
|
||
.qty-stepper button {
|
||
width: 44px;
|
||
height: 44px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text);
|
||
font-size: 1.3rem;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
transition: background 0.15s var(--ease), color 0.15s var(--ease);
|
||
flex-shrink: 0;
|
||
}
|
||
.qty-stepper button:hover { background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); }
|
||
.qty-stepper input {
|
||
width: 3rem;
|
||
height: 44px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text);
|
||
text-align: center;
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
-moz-appearance: textfield;
|
||
}
|
||
.qty-stepper input::-webkit-outer-spin-button,
|
||
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||
.qty-stepper input:focus { outline: none; }
|
||
.specs { margin-top: 1.5rem; }
|
||
.specs th { width: 40%; color: var(--c-text-muted); font-weight: 500; font-family: var(--font-body); }
|
||
|
||
/* FAQ */
|
||
.faq-list { display: grid; gap: 1rem; max-width: 760px; }
|
||
.faq-item summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; color: var(--c-text); list-style: none; display: block; }
|
||
.faq-item summary::-webkit-details-marker { display: none; }
|
||
.faq-item summary::before { content: "＋ "; color: var(--c-accent); }
|
||
.faq-item[open] summary::before { content: "－ "; }
|
||
.faq-item p { margin-top: 0.8rem; margin-bottom: 0; }
|
||
|
||
/* Kontakt */
|
||
.contact-layout { align-items: start; }
|
||
|
||
/* Warenkorb */
|
||
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
|
||
.cart-item {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.1rem;
|
||
padding: 1.1rem 0.4rem;
|
||
transition: background 0.2s var(--ease);
|
||
border-radius: var(--radius-s);
|
||
}
|
||
.cart-item:hover { background: rgba(244, 241, 247, 0.02); }
|
||
|
||
/* Trennung zwischen Warenkorb-Positionen als kleines "Knopf an der Naht"-Detail statt einer
|
||
nüchternen Linie — fließender Verlauf in den drei Marken-Farben (wie der Karten-Rand der
|
||
Seite), mit einem kleinen glänzenden Knopf in der Mitte als Anspielung auf's Nähen/Basteln.
|
||
Bleibt dezent (schmal, sanftes Leuchten) statt aufdringlich. */
|
||
.cart-item:not(:last-child)::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0.4rem;
|
||
right: 0.4rem;
|
||
bottom: 0;
|
||
height: 1.5px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
var(--c-accent) 15%,
|
||
var(--c-purple-glow) 50%,
|
||
var(--c-sale) 85%,
|
||
transparent
|
||
);
|
||
opacity: 0.75;
|
||
}
|
||
.cart-item:not(:last-child)::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -4px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 50%;
|
||
transform: translateX(-50%);
|
||
background: radial-gradient(circle at 35% 30%, #fff, var(--c-accent) 45%, var(--c-purple-glow) 100%);
|
||
box-shadow: 0 0 9px 2px color-mix(in srgb, var(--c-purple-glow) 55%, transparent);
|
||
}
|
||
|
||
/* Checkbox "jetzt kaufen" — abgewählte Artikel bleiben sichtbar im Warenkorb liegen, zählen aber
|
||
nicht mehr zur Summe/zum Checkout, bis sie wieder angehakt werden. */
|
||
.cart-item .buy-toggle {
|
||
appearance: none;
|
||
width: 21px;
|
||
height: 21px;
|
||
border-radius: 6px;
|
||
border: 2px solid rgba(244, 241, 247, 0.3);
|
||
flex-shrink: 0;
|
||
display: grid;
|
||
place-content: center;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
|
||
}
|
||
.cart-item .buy-toggle::before {
|
||
content: "";
|
||
width: 12px;
|
||
height: 12px;
|
||
clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 16%, 80% 0%, 43% 68%);
|
||
transform: scale(0);
|
||
transition: transform 0.15s var(--ease);
|
||
background: #08181c;
|
||
}
|
||
.cart-item .buy-toggle:checked {
|
||
border-color: var(--c-accent);
|
||
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
|
||
}
|
||
.cart-item .buy-toggle:checked::before { transform: scale(1); }
|
||
.cart-item.deselected { opacity: 0.55; }
|
||
.cart-item.deselected:hover { opacity: 0.8; }
|
||
.kept-in-cart-badge { color: var(--c-text-muted); margin-top: 0.15rem; }
|
||
.cart-item .thumb {
|
||
width: 76px;
|
||
height: 76px;
|
||
flex-shrink: 0;
|
||
border-radius: var(--radius-m);
|
||
overflow: hidden;
|
||
border: 1px solid rgba(244, 241, 247, 0.1);
|
||
box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.5);
|
||
}
|
||
.cart-item .thumb.img-placeholder { font-size: 0.6rem; padding: 0.3rem; min-height: 0; }
|
||
.cart-item .info { flex: 1; min-width: 0; }
|
||
.cart-item .info strong { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 0.2rem; }
|
||
.cart-item .info .small { color: var(--c-text-muted); }
|
||
.cart-item .qty-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
border: 1px solid rgba(244, 241, 247, 0.14);
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
background: var(--c-anthracite);
|
||
flex-shrink: 0;
|
||
}
|
||
.cart-item .qty-controls button {
|
||
width: 30px;
|
||
height: 30px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--c-text);
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
transition: background 0.15s var(--ease), color 0.15s var(--ease);
|
||
}
|
||
.cart-item .qty-controls button:hover { background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); }
|
||
.cart-item .qty-controls span { min-width: 1.6em; text-align: center; font-weight: 600; font-size: 0.92rem; }
|
||
.cart-item .line-total { min-width: 5.5em; text-align: right; font-weight: 700; color: var(--c-text); flex-shrink: 0; }
|
||
.cart-item .remove {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3em;
|
||
color: var(--c-text-muted);
|
||
font-size: 0.78rem;
|
||
margin-left: 0.4rem;
|
||
flex-shrink: 0;
|
||
transition: color 0.15s var(--ease);
|
||
}
|
||
.cart-item .remove:hover { color: var(--c-sale); }
|
||
.summary-row { display: flex; justify-content: space-between; margin: 0.55rem 0; font-size: 0.92rem; color: var(--c-text-muted); }
|
||
.summary-row.total { color: var(--c-text); font-weight: 700; font-size: 1.2rem; margin-top: 0.3rem; }
|
||
.cart-summary h3 { display: flex; align-items: center; gap: 0.5em; }
|
||
.ship-country-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: 0.6rem 0; font-size: 0.85rem; color: var(--c-text-muted); }
|
||
.ship-country-row label { display: flex; align-items: center; gap: 0.4em; white-space: nowrap; }
|
||
.ship-country-row select {
|
||
background: var(--c-anthracite);
|
||
color: var(--c-text);
|
||
border: 1px solid rgba(244, 241, 247, 0.16);
|
||
border-radius: var(--radius-s);
|
||
padding: 0.35em 0.6em;
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
}
|
||
.ship-country-row select:focus { outline: none; border-color: var(--c-accent); }
|
||
.free-shipping-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5em;
|
||
margin: 0.7rem 0;
|
||
padding: 0.6em 0.9em;
|
||
border-radius: var(--radius-s);
|
||
background: color-mix(in srgb, var(--c-accent) 12%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
|
||
color: var(--c-accent);
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
}
|
||
.discount-row { color: #ff5f7e; font-weight: 600; }
|
||
.mengenrabatt-badge { color: #ff5f7e; font-weight: 600; margin-top: 0.15rem; }
|
||
.coupon-row { margin: 0.7rem 0; }
|
||
.coupon-row label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.35em; }
|
||
.coupon-input-group { display: flex; gap: 0.5em; }
|
||
.coupon-input-group input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: var(--c-anthracite);
|
||
color: var(--c-text);
|
||
border: 1px solid rgba(244, 241, 247, 0.16);
|
||
border-radius: var(--radius-s);
|
||
padding: 0.5em 0.7em;
|
||
font-size: 0.88rem;
|
||
}
|
||
.coupon-input-group input:focus { outline: none; border-color: var(--c-accent); }
|
||
.btn-sm { padding: 0.5em 0.9em; font-size: 0.85rem; white-space: nowrap; }
|
||
#coupon-status { margin-top: 0.4em; color: var(--c-accent); }
|
||
#coupon-status a { color: var(--c-text-muted); margin-left: 0.5em; }
|
||
#coupon-status a:hover { color: var(--c-sale); }
|
||
@media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } }
|
||
|
||
/* Checkout */
|
||
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
|
||
/* Das Checkout-Formular soll die volle Spaltenbreite ausnutzen — .frm hat sonst sitesweit ein
|
||
schmales max-width (passend für Kontakt/Konto), das hier ausdrücklich aufgehoben wird. */
|
||
#checkout-form { max-width: none; }
|
||
|
||
/* "1. Zahlungsart" und "2. Kontakt & Lieferadresse" nebeneinander statt gestapelt, getrennt
|
||
durch eine dezente Verlaufslinie mit kleinem Garnrollen-Symbol in der Mitte — spielt auf
|
||
"Bastelbedarf" an (wie eine Naht zwischen zwei Stoffteilen), bleibt aber ruhig & professionell. */
|
||
.checkout-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.7rem; align-items: start; }
|
||
.checkout-split-col h3:first-child { margin-top: 0; }
|
||
.checkout-split-divider {
|
||
align-self: stretch;
|
||
position: relative;
|
||
width: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.checkout-split-divider::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0.2rem;
|
||
bottom: 0.2rem;
|
||
left: 50%;
|
||
width: 1px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
transparent,
|
||
color-mix(in srgb, var(--c-accent) 55%, transparent) 12%,
|
||
color-mix(in srgb, var(--c-purple-glow) 55%, transparent) 50%,
|
||
color-mix(in srgb, var(--c-accent) 55%, transparent) 88%,
|
||
transparent
|
||
);
|
||
}
|
||
.checkout-split-divider span {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--c-anthracite);
|
||
border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
|
||
box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c-accent) 45%, transparent);
|
||
font-size: 0.95rem;
|
||
}
|
||
@media (max-width: 760px) {
|
||
.checkout-split { grid-template-columns: 1fr; gap: 0; }
|
||
.checkout-split-divider { width: auto; min-height: 0; height: 44px; margin: 0.2rem 0; }
|
||
.checkout-split-divider::before { top: 50%; bottom: auto; left: 0.2rem; right: 0.2rem; width: auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent); }
|
||
}
|
||
|
||
/* Sidebar (Gutschein + Versandhinweis): dezenter Akzentstreifen links + "genähte" gestrichelte
|
||
Trennung zwischen den beiden Blöcken statt einer nüchternen durchgezogenen Linie. */
|
||
.checkout-aside { position: relative; padding-left: 1.9rem; }
|
||
.checkout-aside::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 1.5rem;
|
||
bottom: 1.5rem;
|
||
left: 1.05rem;
|
||
width: 3px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(180deg, var(--c-accent), var(--c-purple-glow) 55%, var(--c-sale));
|
||
opacity: 0.85;
|
||
}
|
||
.checkout-aside .coupon-row label { font-weight: 700; color: var(--c-text); font-size: 0.95rem; }
|
||
.checkout-aside h3 { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em; }
|
||
.checkout-aside hr.stitched {
|
||
border: none;
|
||
border-top: 1.5px dashed rgba(244, 241, 247, 0.22);
|
||
margin: 1.2rem 0;
|
||
}
|
||
|
||
/* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum
|
||
restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). Jede Karte klappt SOFORT
|
||
beim Anklicken den passenden "Verbinden"-Bereich direkt in sich selbst auf (reines CSS über
|
||
:has(), kein Zwischenschritt, kein separates Panel weiter unten). */
|
||
.payment-options { display: grid; gap: 0.85rem; }
|
||
.pay-card {
|
||
border: 1.5px solid rgba(244, 241, 247, 0.12);
|
||
border-radius: var(--radius-l);
|
||
background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
|
||
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
|
||
overflow: hidden;
|
||
}
|
||
.pay-card:hover {
|
||
border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
|
||
}
|
||
.pay-card:has(input:checked) {
|
||
border-color: var(--brand-color, var(--c-accent));
|
||
background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
|
||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
|
||
}
|
||
.pay-card:has(input:checked) .pay-option span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
|
||
|
||
.pay-option {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.1em;
|
||
padding: 1.15em 1.3em;
|
||
font-size: 1.02rem;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Wortmarke) statt schlichtem Emoji —
|
||
groß und mit sanftem Verlauf/Glanz, wirkt "fertig", nicht wie ein Platzhalter. */
|
||
.pay-option .pay-icon {
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.6rem;
|
||
font-weight: 800;
|
||
font-style: italic;
|
||
letter-spacing: -0.03em;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
|
||
background-blend-mode: overlay;
|
||
}
|
||
.pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
|
||
|
||
/* Kreditkarte: schlichtes Kartensymbol (SVG) statt einem Buchstaben wie bei PayPal/Klarna —
|
||
vorher zwei überlappende Kreise in Visa/Mastercard-Anmutung, die auf Wunsch entfernt wurden
|
||
(wirkten wie ein fremdes Marken-Logo statt einem neutralen eigenen Icon). */
|
||
.pay-icon-cc svg { display: block; }
|
||
.pay-option .pay-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.1em; }
|
||
|
||
/* Der "Verbinden"-Bereich sitzt DIREKT in der Karte selbst und klappt beim Anklicken sofort auf —
|
||
kein separates Panel, kein zweiter Klick nötig. */
|
||
.pay-panel-inline {
|
||
display: none;
|
||
padding: 0.2rem 1.3em 1.3em;
|
||
border-top: 1px dashed rgba(244, 241, 247, 0.16);
|
||
margin: 0 1.3em;
|
||
}
|
||
.pay-card:has(input:checked) .pay-panel-inline { display: block; padding-top: 1rem; }
|
||
.pay-panel-inline p { margin: 0 0 0.8em; color: var(--c-text-muted); font-size: 0.88rem; }
|
||
.pay-connect-btn { width: 100%; }
|
||
.pay-connect-btn[disabled] { opacity: 0.75; cursor: default; }
|
||
.pay-connect-status { margin: 0.7em 0 0; font-size: 0.88rem; color: var(--c-accent); font-weight: 600; }
|
||
|
||
/* Inline-Kartenformular (Kreditkarte) */
|
||
.card-fields { display: grid; gap: 0.7rem; }
|
||
.card-fields label { display: block; font-size: 0.8rem; color: var(--c-text-muted); margin-bottom: 0.3rem; }
|
||
.card-fields input { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
|
||
|
||
/* Bankverbindung (Vorkasse) — echte, direkt aus dem Adminbereich gespeiste Kontodaten. */
|
||
.bank-details {
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
font-size: 0.92rem;
|
||
}
|
||
.bank-details .bank-row { display: flex; justify-content: space-between; gap: 1em; padding: 0.4em 0; border-bottom: 1px dashed rgba(244, 241, 247, 0.14); }
|
||
.bank-details .bank-row:last-child { border-bottom: none; }
|
||
.bank-details .bank-row span:first-child { color: var(--c-text-muted); }
|
||
.bank-details .bank-row span:last-child { font-weight: 700; letter-spacing: 0.02em; }
|
||
.pay-option input[type="radio"] {
|
||
appearance: none;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(244, 241, 247, 0.3);
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
display: grid;
|
||
place-content: center;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s var(--ease);
|
||
}
|
||
.pay-option input[type="radio"]::before {
|
||
content: "";
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
transform: scale(0);
|
||
transition: transform 0.15s var(--ease);
|
||
background: var(--brand-color, var(--c-accent));
|
||
}
|
||
.pay-option input[type="radio"]:checked::before { transform: scale(1); }
|
||
.pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
|
||
|
||
.checkout-summary .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.35rem 0; color: var(--c-text-muted); }
|
||
/* Rechnungs-Positionsliste in der Warenkorb-Zusammenfassung — dieselbe Klasse wie im Checkout,
|
||
nur mit etwas Abstand zur folgenden Zwischensumme. */
|
||
.cart-summary #summary-items { margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px dashed rgba(244, 241, 247, 0.14); }
|
||
|
||
/* "Gesamt"-Zeile wie ein Kassenbon-Abriss: gestrichelte Trennlinie + Summe in Marken-Verlauf,
|
||
damit der Endbetrag klar heraussticht statt einfach nur fett zu sein. */
|
||
.checkout-summary .row.total {
|
||
font-weight: 700;
|
||
font-size: 1.3rem;
|
||
padding-top: 0.9rem;
|
||
margin-top: 0.5rem;
|
||
border-top: 1.5px dashed rgba(244, 241, 247, 0.22);
|
||
}
|
||
.checkout-summary .row.total span:first-child { color: var(--c-text); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; font-weight: 700; }
|
||
.checkout-summary .row.total span:last-child {
|
||
background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
/* Eigene, zum Radio-Button passende Checkbox statt nüchternem Browser-Kästchen. */
|
||
.frm .checkbox-row input[type="checkbox"] {
|
||
appearance: none;
|
||
width: 21px;
|
||
height: 21px;
|
||
border-radius: 6px;
|
||
border: 2px solid rgba(244, 241, 247, 0.3);
|
||
flex-shrink: 0;
|
||
display: grid;
|
||
place-content: center;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
|
||
}
|
||
.frm .checkbox-row input[type="checkbox"]::before {
|
||
content: "";
|
||
width: 12px;
|
||
height: 12px;
|
||
clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 16%, 80% 0%, 43% 68%);
|
||
transform: scale(0);
|
||
transition: transform 0.15s var(--ease);
|
||
background: #08181c;
|
||
}
|
||
.frm .checkbox-row input[type="checkbox"]:checked {
|
||
border-color: var(--c-accent);
|
||
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
|
||
}
|
||
.frm .checkbox-row input[type="checkbox"]:checked::before { transform: scale(1); }
|
||
|
||
@media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } }
|
||
.danke { max-width: 560px; margin-inline: auto; }
|
||
|
||
/* Konto */
|
||
.account-grid { align-items: start; }
|