/* ═══════════════════════════════════════════════════════════════ DAMPFSTICH – Geteilte Design-Tokens (Single Source) Viktorianischer Steampunk: Messing/Kupfer/Eisen/Pergament. Zwei Ebenen, bewusst getrennt: 1) PROJEKT-Namen (--gold, --bg-*, --heart …) – die im Projekt seit Beginn etablierte Konvention. style.css/landing.css referenzieren diese. Werte stammen aus dem Handoff. 2) --ds-* – der Token-Block aus dem Design-Handoff (design_handoff_dampfstich/tokens.css), 1:1 übernommen. Enthält die Oberflächen-Rezepte (Pergament, Messing, Holz, Nieten) und Schatten, die das Kartendesign braucht. Wird von index.html (Spiel) UND den Landing-/Infoseiten geladen. ═══════════════════════════════════════════════════════════════ */ :root { /* ─── Projekt-Namen ─────────────────────────────────────────── */ /* Hintergrund (Öl/Eisen/Leder) & Metall */ --bg-deep:#12100b; --bg-primary:#1a1410; --bg-secondary:#241c14; --bg-3:#2e2418; --velvet:#382b1c; --panel:#2e2418; --gold:#c8963c; --gold-light:#e6c072; --gold-deep:#8a6425; --copper:#b5651d; --bronze:#8c6239; /* Spielfarben (Karten-Identität, steampunk-getönt) */ --heart:#c0492f; --spade:#4a6d8c; --club:#5e7d3a; --diamond:#cc8f2e; /* Sonderkarten-Kern */ --wizard:#d4a843; --narr:#6b6558; /* Status & Text (Pergament) */ --success:#4a9d7f; --error:#b23a2e; --info:#7d9bb5; --text-1:#ede0c8; --text-2:#b8a888; --text-3:#82735c; --line:rgba(200,150,60,.18); /* Fonts – Rollen nach Handoff. Alle Schnitte selbst gehostet (fonts/fonts.css), keine Requests an Google. Logo → Cinzel Decorative H1/H2/Titel → Cinzel Fließtext → EB Garamond Labels/Log → EB Garamond, versal + weit gesperrt (.16–.22em) Zahlen → Oswald (Zählwerk-Charakter) Special Elite (Schreibmaschine) ist mit dem Handoff-Update vom 30.07.2026 entfallen – Labels, Overlines und das Spiellog laufen jetzt ebenfalls in EB Garamond. --f-type bleibt als Rollenname bestehen, führt aber die Textschrift; im Handoff heißt der Token --ds-font-label. --f-mono heißt aus Projekt-Historie so, führt aber jetzt Oswald: es steckt genau an den Zahlen-Stellen (Kartenwert, Punkte, Raumcode). */ --f-logo:'Cinzel Decorative',serif; --f-display:'Cinzel',serif; --f-body:'EB Garamond',Georgia,serif; --f-type:'EB Garamond',Georgia,serif; --f-num:'Oswald',sans-serif; /* Kartenwerte laufen laut Handoff in Marcellus (kantige, gemeißelte Serifen) – Oswald bleibt für Scoreboard- und UI-Zahlen. Der 400er- Schnitt liegt selbst gehostet unter fonts/; Cinzel als Ausweichstufe, nie System-Sans: damit verlören die Karten ihren gravierten Charakter. */ --f-card-num:var(--ds-font-card-num); --f-ui:'EB Garamond',Georgia,serif; --f-script:'EB Garamond',Georgia,serif; --f-mono:'Oswald',sans-serif; /* Radius- & Shadow-Skala */ --r-ctrl:11px; --r-card:16px; --r-pill:999px; --sh-card:0 24px 60px rgba(0,0,0,.5); --sh-cta:0 6px 18px rgba(200,150,60,.4); /* Verläufe */ --grad-gold:linear-gradient(180deg,#e6c072,#c8963c 60%,#8a6425); --grad-logo:linear-gradient(180deg,#f6e3b4,#c8963c 54%,#8a6425); /* ─── Handoff-Block (--ds-*), 1:1 aus design_handoff_dampfstich ─ */ /* Hintergründe — Öl, Eisen, Leder */ --ds-bg: #1a1410; --ds-bg-2: #241c14; --ds-panel: #2e2418; --ds-raised: #382b1c; /* Metall */ --ds-brass: #c8963c; --ds-brass-hi: #e6c072; --ds-brass-dim: #8a6425; --ds-copper: #b5651d; --ds-bronze: #8c6239; --ds-iron: #3a352e; --ds-patina: #3d8b7d; /* Text — Pergament */ --ds-text: #ede0c8; --ds-text-2: #b8a888; --ds-text-muted: #82735c; /* Zustände */ --ds-success: #4a9d7f; --ds-error: #b23a2e; --ds-info: #7d9bb5; /* Spielfarben (Leitungen). Mit dem Handoff vom 31.07.2026 heißen die Keys rot/blau/gruen/gelb – die alten Blatt-Namen (herz/pik/kreuz/karo) sind dort ersatzlos entfallen und stehen deshalb auch hier nicht mehr. Die Symbole bleiben unverändert: Druckventil, Kolben, Zahnrad, Manometer. Die INTERNEN Spiel-Keys heißen weiterhin red/blue/green/yellow (CSS- Klassen .suit-red …, DS.SUIT_HEX) – das ist Spiellogik, keine Anzeige. */ --ds-suit-rot: #c0492f; /* Symbol: Druckventil */ --ds-suit-blau: #4a6d8c; /* Symbol: Kolben */ --ds-suit-gruen: #5e7d3a; /* Symbol: Zahnrad */ --ds-suit-gelb: #cc8f2e; /* Symbol: Manometer */ /* Ziffernfarben für Text auf HELLEM Grund (Dialoge, Regeln) – NICHT auf den Kartenblättern; dort gilt die Gravur weiter unten. */ --ds-ink-rot: #7a2c1b; --ds-ink-blau: #2b4459; --ds-ink-gruen: #3a4f22; --ds-ink-gelb: #84591a; /* Besondere Karten */ --ds-meisterwerk: #d4a843; --ds-blindgaenger: #6b6558; --ds-dampfkoloss: #8a2f1e; --ds-funkenfee: #8fd4e0; --ds-transformator: #b57a2a; --ds-fliessband: #cc7a2e; --ds-kesselberster: #2a2622; --ds-dampfwolke: #cdd2d0; --ds-prototyp: #5b8ca8; --ds-blaupause: #3f7fa6; --ds-schrottsammlerin: #7a5a34; /* ── Kartenblätter: die tatsächlichen Kartenflächen ─────────────── Seit dem Handoff vom 31.07.2026 ist die Kartenfläche IMMER ein geliefertes Blatt – vier gefärbte Leinen-Blätter für die Zahlenkarten, ein Ornament-Pergament für alle elf Sonderkarten. Die früher hier gepflegte Emaille-Metallplatte (--ds-card-enamel) ist damit entfallen. Im Handoff heißen die Dateien assets/cards/bg-*.png bzw. frame.png; im Projekt liegen sie als WebP (aus den Originalen, etwas größer gerechnet) unter img/kartenstoff/. Die Pfade sind relativ zu dieser Datei, die im public-Wurzelverzeichnis liegt. `100% 100%` statt `cover`: die Blätter haben 0.690, die Karte 0.714 – mit `cover` würde oben und unten je 1,7 % abgeschnitten und die eingezeichnete Goldlinie rutschte an den Rand. */ --ds-card-sheet-rot: url('img/kartenstoff/rot.webp'); --ds-card-sheet-blau: url('img/kartenstoff/blau.webp'); --ds-card-sheet-gruen: url('img/kartenstoff/gruen.webp'); --ds-card-sheet-gelb: url('img/kartenstoff/gelb.webp'); --ds-card-sheet-special: url('img/kartenstoff/sonderkarte.webp'); --ds-card-sheet-fit: center center / 100% 100% no-repeat; /* Rückseiten-Blätter. Der Handoff liefert fünf (messing, kupfer, blaupause, patina, elfenbein); im Projekt tragen sie die Katalog-Keys der Supabase-Tabelle `cosmetics` und liegen bereits auf 5:7 beschnitten vor – deshalb reicht `cover` ohne sichtbaren Beschnitt. messing → zahnwerk · kupfer → kupferstich · blaupause → reissbrett patina → patina · elfenbein → uhrwerk Standard ist „Zahnwerk" (= --ds-card-back-messing im Handoff). */ --ds-card-back-zahnwerk: url('img/rueckseiten/zahnwerk.webp'); --ds-card-back-kupferstich: url('img/rueckseiten/kupferstich.webp'); --ds-card-back-reissbrett: url('img/rueckseiten/reissbrett.webp'); --ds-card-back-patina: url('img/rueckseiten/patina.webp'); --ds-card-back-uhrwerk: url('img/rueckseiten/uhrwerk.webp'); --ds-card-back-fit: center / cover no-repeat; /* Gravur auf den Kartenblättern — die Helligkeit des Blattes entscheidet. Rot, Blau und Grün sind dunkel → helle Gravur; Gelb ist hell → dunkle. */ --ds-engrave-light: #f9f0dc; /* Wert auf Rot, Blau, Grün */ --ds-engrave-light-icon: #f7e8c4; /* Ecksymbol dort */ --ds-engrave-light-mid: #f2e2b8; /* Mittelsymbol dort */ --ds-engrave-dark: #4a3208; /* Wert und Symbole auf Gelb */ --ds-engrave-stroke-light: .5px rgba(0,0,0,.55); --ds-engrave-stroke-dark: .4px rgba(255,255,255,.4); --ds-engrave-shadow-light: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5); --ds-engrave-shadow-dark: 0 1px 0 rgba(255,255,255,.55), 0 0 5px rgba(255,255,255,.5); /* Oberflächen — Pergament und Messing sind ab jetzt NUR noch Fallback (falls ein Blatt nicht lädt) und Basis der Rückseite. */ --ds-card-face: linear-gradient(158deg, #f2e6cb, #e2d0aa 52%, #cdb894); --ds-card-fibre: repeating-linear-gradient(88deg, rgba(120,90,50,.05) 0 1px, rgba(255,255,255,.03) 1px 4px); --ds-card-face-brass: linear-gradient(158deg, #e2d3b4, #bfae8c 48%, #9c8c6c); --ds-card-brushed: repeating-linear-gradient(102deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 3px); --ds-card-back: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,.06) 2px 6px), radial-gradient(circle at 50% 40%, #4a443b, #2a2622 70%); --ds-metal: linear-gradient(152deg, #e6c072, #c8963c 40%, #1d160f); --ds-metal-plate: linear-gradient(155deg, #8a6425, #3f2f18 55%, #241c14); --ds-btn-primary: linear-gradient(#d8a94c, #a97a24); --ds-btn-secondary: linear-gradient(#382b1c, #2a2015); --ds-wood: repeating-linear-gradient(96deg, rgba(0,0,0,.16) 0 3px, rgba(255,255,255,.02) 3px 9px), radial-gradient(ellipse at 42% 30%, #6b5232, #40301c 58%, #2c2013); --ds-table-bg: radial-gradient(ellipse at 50% 42%, #3a2c1c 0%, #251c12 52%, #1a1410 100%); /* Nieten (an allen vier Ecken wiederholen; Offset 8px Desktop / 6.5px Handy) */ --ds-rivet: radial-gradient(circle at 8px 8px, #e8cd8a 0 1.5px, rgba(20,14,8,.65) 1.9px 2.7px, transparent 2.8px); /* Schatten & Glanz */ --ds-edge-gloss: inset 0 1px 0 rgba(230,192,114,.4); --ds-shadow-card: 0 6px 14px rgba(0,0,0,.55); --ds-shadow-bench: 0 18px 30px rgba(0,0,0,.65); --ds-shadow-panel: 0 6px 14px rgba(0,0,0,.45); --ds-shadow-dialog: 0 20px 44px rgba(0,0,0,.6); --ds-glow-brass: 0 0 26px rgba(230,192,114,.45); --ds-glow-koloss: 0 0 28px rgba(138,47,30,.5); --ds-glow-fee: 0 0 30px rgba(143,212,224,.55); --ds-card-inner: inset 0 0 0 1px rgba(80,58,28,.45), inset 0 1px 6px rgba(255,255,255,.5); --ds-card-frame-ring: inset 0 0 0 1px rgba(232,205,138,.4); /* Typografie */ --ds-font-display: "Cinzel Decorative", serif; --ds-font-head: "Cinzel", serif; --ds-font-body: "EB Garamond", Georgia, serif; --ds-font-label: "EB Garamond", Georgia, serif; /* Overlines/Labels: versal + .16–.22em */ --ds-font-num: "Oswald", sans-serif; /* Scoreboard, UI-Zahlen */ --ds-font-card-num: "Marcellus", "Cinzel", Georgia, serif; /* Kartenwerte 1–13 */ --ds-fs-logo: 62px; --ds-fs-h1: 38px; --ds-fs-h2: 24px; --ds-fs-body: 18px; --ds-fs-body-sm: 16px; --ds-fs-label: 11px; --ds-fs-log: 14px; --ds-fs-value-lg: 34px; /* Kartenwert bei 120px Karte */ --ds-fs-value-sm: 26px; /* Kartenwert bei 90px Karte — Minimum */ --ds-track-head: .1em; --ds-track-label: .18em; /* ── Bewegung ─────────────────────────────────────────────────── EINZIGE Quelle für Dauern und Kurven. Jede transition und jede animation im Spiel führt hierher zurück – über die Aliasse --t (style.css) und --mo-ease-* (wizard-motion.css), die beide nur noch auf diesen Block zeigen. ZWEI Kurven, und das ist Absicht: --ds-ease ist die Bewegungskurve aus dem Handoff. Sie gehört an alles, was sich über den Tisch bewegt: Karten, Figuren, Szenen. --ds-ease-ui ist die schnellere Aus-Kurve, mit der die Oberfläche seit jeher arbeitet (Tasten, Hover, Panels). Sie steht hier, damit sie einen Namen hat – nicht damit sie ersetzt wird. Beides zu vermischen hieße, jede Taste im Spiel träger zu machen, ohne dass jemand danach gefragt hätte. */ --ds-t-feedback: 100ms; --ds-t-micro: 200ms; --ds-t-move: 300ms; --ds-t-reveal: 500ms; --ds-t-collect: 400ms; --ds-t-count: 800ms; --ds-t-carry: 1400ms; /* Karte quer über den Tisch, lesbar lang */ --ds-ease: cubic-bezier(.22,.61,.36,1); --ds-ease-ui: cubic-bezier(.22,1,.36,1); --ds-ease-inout: cubic-bezier(.65,0,.35,1); --ds-ease-carry: cubic-bezier(.4,0,.2,1); /* Raster, Karten & Touch */ --ds-touch-min: 44px; --ds-gap: 8px; --ds-radius: 8px; --ds-radius-sheet: 12px; --ds-card-w-desktop: 120px; --ds-card-h-desktop: 170px; --ds-card-w-mobile: 90px; --ds-card-h-mobile: 126px; --ds-card-radius-desktop: 9px; --ds-card-radius-mobile: 7px; --ds-fan-step-5: 96px; --ds-fan-step-12: 64px; --ds-fan-step-23: 40px; --ds-safe-top: env(safe-area-inset-top); --ds-safe-right: env(safe-area-inset-right); --ds-safe-bottom: env(safe-area-inset-bottom); --ds-safe-left: env(safe-area-inset-left); } @keyframes brassPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--ds-brass), 0 0 10px rgba(200,150,60,.25); } 50% { box-shadow: 0 0 0 2px var(--ds-brass-hi), 0 0 26px rgba(230,192,114,.55); } } @keyframes shimmer { 0% { background-position: -220px 0; } 100% { background-position: 320px 0; } } @keyframes steamRise { 0% { transform: translateY(6px) scale(.9); opacity: 0; } 40% { opacity: .5; } 100% { transform: translateY(-18px) scale(1.25); opacity: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }