/*
MAGIC MIRROR — Design Tokens & Glow-Utilities
Siehe DESIGN_SYSTEM.md für Hintergrund & Verwendungsregeln.
Einbindung im , NACH dem Google-Fonts-Link:
*/
:root {
/* ---------- Basis / Bühne ---------- */
--bg-void: #08070c;
--bg-surface: #120f1c;
--bg-surface-2: #1c1730;
/* ---------- Gold (Luxus-Layer) ---------- */
--gold: #e8c468;
--gold-bright: #ffe29a;
--gold-deep: #a9812e;
/* ---------- Neon (Energie-Layer) ---------- */
--neon-pink: #ff3fc0;
--neon-violet: #9d4eff;
--neon-cyan: #2fe6ff;
--neon-yellow: #f5ff6b;
--neon-green: #39ff14;
--neon-blue: #3d8bff;
/* 2026-08-02, Nutzerwunsch: Card-Icons im Hero (site.css .hero-float-icon) bekommen je ein
eigenes, zum Motiv passendes SVG-Icon in einer eigenen Akzentfarbe statt eines einzelnen
Emoji-Unicode-Zeichens (siehe DESIGN_SYSTEM.md fuer die volle Herleitung). Rot war bisher
nirgends in der Palette vertreten, "Momente" (Herz) braucht es als bewusst warmen
Farbtupfer. */
--neon-red: #ff4d5e;
/* ---------- Text ---------- */
--text-primary: #f6f1e7;
--text-muted: #b4aac2;
/* ---------- Typografie ---------- */
/* 2026-07-02: Playfair Display + Tangerine ersetzt (zu verschnoerkelt), siehe
DESIGN_SYSTEM.md Abschnitt 3 fuer die Begruendung. */
--font-display: "Outfit", "Helvetica Neue", sans-serif;
--font-body: "Montserrat", "Helvetica Neue", sans-serif;
--font-accent: "Unbounded", sans-serif;
/* 2026-07-11: nur fuer H1/H2, siehe assets/fonts/fonts.css fuer die Begruendung/Abgrenzung
zu --font-display (Logo/Buttons/kleinere Headlines bleiben bei Outfit). Nach zwei
verworfenen Versuchen (Old Standard TT, Gelasio) jetzt Frank Ruhl Libre. */
--font-heading: "Frank Ruhl Libre", "Georgia", serif;
/* 2026-07-11: formales Ueberschriften-Groessenkonzept, Nutzerfeedback "H2 H3 Groessen sind
zu unterschiedlich". --text-h3 fuer eigenstaendige Unter-Abschnittstitel (z. B. "Direkt aus
dem Drucker"), --text-card-title fuer die vielen kleinen Grid-/Card-Ueberschriften (Ablauf,
Warum-Foto-Bergander, Pakete, Zusatzleistungen, Garantie), die vorher uneinheitlich
zwischen 1rem und 1.2rem hart codiert waren. */
/* 2026-07-11: H1 auf "Eine Fotobox wie keine andere." gekuerzt (kein zweiter Satzteil mehr),
wieder naeher an die urspruengliche Groesse hoch (war zwischenzeitlich fuer eine laengere
Zweizeiler-Variante verkleinert worden). Da aktuell nur der Hero ein H1 hat, wirkt sich das
nirgendwo sonst aus. */
--text-h1: clamp(2.4rem, 5.2vw, 4rem);
--text-h2: clamp(1.9rem, 3.4vw, 2.8rem);
--text-h3: clamp(1.3rem, 2.2vw, 1.6rem);
--text-card-title: 1.05rem;
/* ---------- Radien / Timing ---------- */
--radius-lg: 20px;
--radius-md: 14px;
--ease-glow: cubic-bezier(0.4, 0, 0.2, 1);
/* ---------- Layout ---------- */
/* 2026-07-04: feste Hoehe statt intrinsisch, damit #hero per calc() zuverlaessig
Header + Hero-Foto zusammen auf exakt 100vh bringen kann, siehe site.css. */
--header-h: 4.5rem;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =======================================================
BASIS
======================================================= */
body {
background: var(--bg-void);
color: var(--text-primary);
font-family: var(--font-body);
accent-color: var(--gold);
caret-color: var(--gold);
}
/* =======================================================
AMBIENT LIVING BACKGROUND (2026-07-03)
Ein einziger fixer Hintergrund ueber der ganzen Seite statt einzelner statischer
Section-Washes, driftet langsam, Farben verschmelzen per mix-blend-mode ueber dem
fast schwarzen Grund. Section-Hintergruende in site.css haben ihre eigene deckende
Grundfarbe deshalb verloren, hier scheint das jetzt durch. Referenz: "Moving Gradient
Background"-Beispiel des Nutzers.
======================================================= */
.ambient-bg {
position: fixed;
inset: 0;
z-index: -10;
overflow: hidden;
background: var(--bg-void);
pointer-events: none;
}
/* 2026-08-02: .ambient-bg .blob (drei grosse, verschwommene, animierte Farbverlauf-Kreise)
komplett entfernt. Nutzerfeedback: liess sich in der Mobile-Version die Seite "irgendwie
verschieben", per Puppeteer bestaetigt (echter horizontaler Overflow, documentElement.
scrollWidth 396px bei 390px Viewport, die .blob-Spans mit ihrer riesigen Groesse (62vmax)
und teils negativen Offsets waren die groessten Ausreisser). Nutzer fand den Effekt
ausserdem "nicht mehr passend". .scrim und .cursor-glow (kein animierter Farbverlauf,
nicht am Bug beteiligt) bleiben erhalten. Zugehoerige @keyframes ambient-drift und die
reduced-motion-Ausnahme fuer .blob sind mit entfernt (totes CSS statt liegen zu lassen). */
.ambient-bg .scrim {
position: absolute;
inset: 0;
background: rgba(8, 7, 12, 0.34);
}
/* 2026-08-11: .cursor-glow (mausfolgender Farbverlauf ueber der ganzen Seite) ersatzlos
entfernt. Nutzerentscheidung: "ich habe das selbst mal gewuenscht, aber es passt nicht mehr
zum Design." Der Effekt kam aus Welle 2 (damals als .spotlight nur in Hero/Pakete/Galerie,
danach global hierher gezogen). Mit entfernt: das in index.html und der
pointermove-Listener in site.js, damit kein toter Code zurueckbleibt.
.scrim bleibt: das ist eine statische Abdunklung ohne Mausbezug.
Die zugehoerige prefers-reduced-motion-Ausnahme ist damit ebenfalls entfallen, sie hat nur
.cursor-glow ausgeblendet und waere sonst eine Regel ohne Ziel gewesen. */
.font-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
/* 2026-07-11: Nutzerfeedback "aktuelle H1 und H2 gefallen mir nicht, sehen zu unsauber aus".
Ueberschreibt --font-display gezielt nur fuer H1/H2 (hoehere Selektor-Spezifitaet durch den
Element-Teil), Logo/Buttons/sonstige .font-display-Elemente bleiben bei Outfit. Alle H1/H2
im Projekt tragen bereits die .font-display-Klasse, kein zusaetzliches Markup noetig.
font-size hier (statt nur in .section-title) behebt einen Bug: zwei H2 ohne
.section-title-Klasse ("Berühren Sie den Spiegel.", "Ihr Ansprechpartner an der
Ostseekueste", beide bewusst linksbuendig neben einem Bild statt zentriert) fielen bisher auf
die unformatierte Browser-Standardgroesse zurueck. Jetzt bekommen ALLE H2 dieselbe Groesse,
.section-title fuegt nur noch Zentrierung/Abstand als Zusatz-Modifier hinzu, siehe site.css. */
h1.font-display {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: normal;
font-size: var(--text-h1);
}
h2.font-display {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: normal;
font-size: var(--text-h2);
}
/* 2026-08-11: Nutzerfeedback "Direkt aus dem Drucker hat noch nicht unsere DESIGN H2". Der
Gold-Look (Kontur, Verlaufsfuellung, Sweep) kommt aus .h2-gold-word (site.css), die Spans
dafuer setzt splitIntoGoldWords (site.js) jetzt auch fuer h3.font-display. Damit die Wirkung
stimmt, braucht die Ueberschrift dieselbe Schriftfamilie wie H1/H2: ohne diese Regel fiele sie
ueber .font-display auf Outfit zurueck und saehe trotz Gold anders aus als alle anderen
Ueberschriften.
2026-08-11, direkt danach korrigiert: die Groesse war zunaechst bei --text-h3 belassen worden
(siehe die Token-Notiz weiter oben, die "Direkt aus dem Drucker" woertlich als H3-Beispiel
nennt). Nutzerentscheidung dagegen: "beachte bitte einheitliche H2 Groessen, Direkt aus dem
Drucker ist deutlich kleiner, bitte anpassen an die Groesse von BERUEHREN SIE DEN SPIEGEL."
Gemessen war der Unterschied deutlich: 25.6px gegen 44.8px bei 1440px Fensterbreite. Diese
Regel nutzt deshalb bewusst --text-h2, obwohl der Selektor h3 heisst: das Element bleibt aus
Dokumentstruktur-Sicht eine H3 (es steht unter der Section-H2 "Beruehren Sie den Spiegel"),
traegt optisch aber die volle H2-Stufe.
Dabei aufgefallen und mit erledigt: `.print-showcase h3 { font-size: var(--text-h3) }` in
site.css haette diese Regel geschlagen und die Aenderung wirkungslos gemacht. Beide Selektoren
haben die identische Spezifitaet (je eine Klasse plus ein Element), bei Gleichstand entscheidet
die Quelltext-Reihenfolge, und site.css wird nach tokens.css geladen. Die Regel dort ist
deshalb ersatzlos entfallen. --text-h3 bleibt als Token erhalten, wird aktuell aber von keiner
Ueberschrift mehr verwendet. */
h3.font-display {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: normal;
font-size: var(--text-h2);
}
.font-accent { font-family: var(--font-accent); font-weight: 800; letter-spacing: 0.04em; }
/* =======================================================
ICON-SET (2026-07-04)
Handgezeichnete Linien-Icons statt Buchstaben/Roemischer-Zahlen/Unicode-Symbolen als
Platzhalter, im "Neon-Line-Art-Stil" (siehe DESIGN_SYSTEM.md Footer-Abschnitt, jetzt
sitewide ausgeweitet). Sprite mit allen -Definitionen liegt einmal in index.html,
Einsatz per . stroke="currentColor", erbt
also automatisch die Textfarbe/den Glow des umgebenden Elements.
======================================================= */
.icon {
width: 1.5rem;
height: 1.5rem;
display: block;
flex-shrink: 0;
}
/* =======================================================
TEXT-GLOW
======================================================= */
.glow-gold {
color: var(--gold-bright);
text-shadow:
0 0 8px rgba(232, 196, 104, 0.65),
0 0 24px rgba(232, 196, 104, 0.45),
0 0 60px rgba(232, 196, 104, 0.25);
}
.glow-neon {
color: #fff;
text-shadow:
0 0 6px var(--neon-pink),
0 0 18px var(--neon-pink),
0 0 40px var(--neon-violet);
}
.glow-cyan {
color: #fff;
text-shadow:
0 0 6px var(--neon-cyan),
0 0 18px var(--neon-cyan),
0 0 40px var(--neon-violet);
}
/* =======================================================
MIRROR FRAME — wiederkehrendes Rahmen-/Card-Motiv
======================================================= */
/* 2026-07-02: Default-Zustand von Gold auf Neon umgestellt (siehe DESIGN_SYSTEM.md,
Richtungswechsel-Hinweis). Neon ist jetzt in Ruhe schon sichtbar, Hover intensiviert nur. */
.mirror-frame {
position: relative;
isolation: isolate;
background: var(--bg-surface);
border: 1.5px solid var(--neon-pink);
border-radius: var(--radius-lg);
box-shadow:
0 0 14px rgba(255, 63, 192, 0.5),
0 0 42px rgba(47, 230, 255, 0.28),
inset 0 0 20px rgba(157, 78, 255, 0.1);
transition: box-shadow 0.4s var(--ease-glow), border-color 0.4s var(--ease-glow);
}
.mirror-frame:hover {
border-color: var(--neon-cyan);
box-shadow:
0 0 18px rgba(47, 230, 255, 0.65),
0 0 56px rgba(255, 63, 192, 0.4),
inset 0 0 26px rgba(47, 230, 255, 0.15);
}
/* Rahmen mit rotierendem Farbverlauf (Gold/Pink/Cyan, dauerhaft in Bewegung).
Technik gefunden auf coding2go.com/border-animation, auf Markenfarben umgestellt.
Braucht @property-Unterstuetzung (alle aktuellen Browser ab 2024/2025).
Fuer eher zurueckhaltende, edle Wirkung: 6 Sekunden pro Umlauf statt schnellerer Demo-Werte.
Hinweis: das Pseudo-Element braucht content-box-Groessenberechnung (Browser-Standard), damit
das padding den sichtbaren Ring erzeugt. Falls irgendwo global box-sizing: border-box auf
*, *::before, *::after gesetzt wird, muss dieser Selektor davon ausgenommen werden. */
@property --mirror-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.mirror-frame--shift::before,
.mirror-frame--shift::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
padding: 3px;
border-radius: inherit;
box-sizing: content-box;
background-image: conic-gradient(
from var(--mirror-angle),
var(--neon-pink),
var(--neon-violet),
var(--neon-cyan),
var(--gold),
var(--neon-pink)
);
z-index: -1;
animation: mirror-frame-spin 6s linear infinite;
}
.mirror-frame--shift::after {
/* 2026-07-03: 1.25rem Blur hat auf kleineren Karten (z.B. Pakete, Anlaesse) die ganze
Flaeche durch das halbtransparente .glass-panel geflutet statt nur einen Ring zu zeigen.
Deutlich enger, damit es ueberall nach Rand-Glow aussieht statt nach Farbklecks. */
filter: blur(0.2rem);
opacity: 0.3;
padding: 0;
}
@keyframes mirror-frame-spin {
from { --mirror-angle: 0deg; }
to { --mirror-angle: 360deg; }
}
/* =======================================================
RING FRAME (2026-07-02)
Leichte Alternative zu .mirror-frame fuer Elemente, die NUR den rotierenden
Regenbogen-Rahmen (.mirror-frame--shift) brauchen, ohne den statischen Glow-Schatten
obendrauf. Verhindert das "zu viele Rahmen"-Problem, ::before/::after brauchen ein
echtes Element (kein ), deshalb als Wrapper-Div um Bilder verwenden.
======================================================= */
.ring-frame {
position: relative;
border-radius: var(--radius-lg);
transition: transform 0.3s var(--ease-glow);
}
/* 2026-07-03: Anlaesse-Karten und Premium-Paket hatten VOR dieser Regel zwei unabhaengige
Hover-Transforms (aeusserer ring-frame UND inneres glass-panel bewegten sich beide),
dadurch schob sich das innere Panel sichtbar vom Ring weg. :has() sorgt dafuer, dass NUR
Ring-Frames mit einem Glass-Panel drin (nicht z. B. das Portraitfoto bei #ueber-mich) den
Hebe-Effekt bekommen, und das innere Panel bewegt sich dann nicht mehr zusaetzlich fuer
sich, nur der Glow/Rand aus .glass-panel:hover bleibt. */
.ring-frame:has(.glass-panel):hover {
transform: translateY(-6px);
}
.ring-frame:hover .glass-panel {
transform: none;
}
/* =======================================================
GLASS PANEL
======================================================= */
.glass-panel {
position: relative;
background: rgba(28, 23, 48, 0.45);
backdrop-filter: blur(16px) saturate(130%);
-webkit-backdrop-filter: blur(16px) saturate(130%);
border: 1px solid rgba(157, 78, 255, 0.5);
border-radius: var(--radius-lg);
box-shadow: 0 0 16px rgba(157, 78, 255, 0.12);
transition:
border-color 0.35s var(--ease-glow),
box-shadow 0.35s var(--ease-glow),
transform 0.35s var(--ease-glow);
}
/* 2026-07-02: Neon-Steigerung bleibt bei Interaktion (Hover), damit der Ruhezustand nicht
wieder in den "ueberall glueht was"-Fehler zurueckfaellt. Der Rand selbst ist aber jetzt
auch in Ruhe klar farbig sichtbar (Referenz: "Glass-Karten mit farbigem Rand"). */
.glass-panel:hover {
border-color: var(--neon-pink);
box-shadow:
0 0 22px rgba(255, 63, 192, 0.4),
0 0 50px rgba(47, 230, 255, 0.22);
transform: translateY(-4px);
}
/* =======================================================
HINTERGRUND-WASH (Neon-Brick-Wall-Referenz)
======================================================= */
.section-neon-bg {
background:
radial-gradient(circle at 20% 20%, rgba(255, 63, 192, 0.18), transparent 45%),
radial-gradient(circle at 80% 30%, rgba(47, 230, 255, 0.14), transparent 40%),
radial-gradient(circle at 50% 90%, rgba(157, 78, 255, 0.16), transparent 50%),
var(--bg-void);
}
/* 2026-07-04: Der fruehere Cursor-Spotlight war hier auf einzelne Sections beschraenkt
(.spotlight, Hero/Pakete/Galerie), danach global als .ambient-bg .cursor-glow.
2026-08-11: beides existiert nicht mehr, der mausfolgende Verlauf ist auf Nutzerwunsch
komplett entfernt, siehe Kommentar im Abschnitt AMBIENT LIVING BACKGROUND oben. */
/* =======================================================
BUTTON — CTA mit Glow Pulse + Mirror Sweep
======================================================= */
.btn-glow {
position: relative;
overflow: hidden;
display: inline-block;
padding: 16px 40px;
border-radius: 999px;
border: 1.5px solid var(--neon-pink);
background: linear-gradient(135deg, rgba(255, 63, 192, 0.22), rgba(47, 230, 255, 0.14));
color: var(--text-primary);
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.03em;
cursor: pointer;
animation: glow-pulse 2.8s ease-in-out infinite;
transition: transform 0.3s var(--ease-glow);
}
.btn-glow:hover {
transform: translateY(-2px);
}
.btn-glow::before {
/* Mirror Sweep */
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-15deg);
transition: left 0.6s ease;
}
.btn-glow:hover::before {
left: 130%;
}
@keyframes glow-pulse {
0%, 100% {
box-shadow: 0 0 10px rgba(255, 63, 192, 0.4), 0 0 22px rgba(47, 230, 255, 0.18);
}
50% {
box-shadow: 0 0 28px rgba(47, 230, 255, 0.85), 0 0 64px rgba(255, 63, 192, 0.55);
}
}
/* =======================================================
TOUCH RIPPLE (2026-07-02)
JS erzeugt bei Klick auf .btn-glow ein .ripple-Element an der Klickposition,
siehe assets/js/site.js. Referenz an "Beruehre den Spiegel".
======================================================= */
.ripple {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 63, 192, 0.55), transparent 70%);
transform: translate(-50%, -50%) scale(0);
pointer-events: none;
animation: ripple-out 0.7s ease-out forwards;
}
@keyframes ripple-out {
to {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
/* =======================================================
NEON-FUNKEN-BURST (Welle 2)
JS erzeugt bei Klick auf .btn-hero-cta mehrere .confetti-Partikel an der Klickposition,
siehe assets/js/site.js. Bewusst nur auf dem Haupt-CTA, nicht auf jedem Button.
======================================================= */
/* 2026-08-02, /grill-me-Nachbesserung: Nutzerfeedback "Konfetti sieht nicht professionell aus,
dafuer gibt es eine bestimmte Technik". Die eigene DOM/CSS-Partikelloesung, die hier vorher
stand (Span-Elemente mit --tx/--ty/--rot-Custom-Properties, spaeter 3D-Taumel-Nachbesserung
per `rotate`+`perspective`), wurde komplett durch die Bibliothek canvas-confetti ersetzt
(identifiziert als die auf der Referenzseite verwendete Technik: echte Canvas-Partikelphysik
statt CSS-Transforms). Siehe assets/js/vendor/canvas-confetti.js (lokal vendored) und
assets/js/site.js (spawnConfettiBurst/spawnConfettiRain/spawnConfettiCannon). Die Bibliothek
verwaltet ihr eigenes