/* ============================================================
FEG · Abi 2001 — Jubiläums-App
Design-System "Mitternachtsgala" · Design-Tokens & Basis-Komponenten
Drop-in CSS für die bestehende statische Multi-Page-App.
Einbinden:
Schriften (im jeder Seite):
============================================================ */
:root {
/* ---- Farben ---- */
--ink: #15141b; /* Basis-Hintergrund */
--night: #1d1b24; /* Flächen / Karten */
--dusk: #252330; /* erhöhte Flächen / Toast */
--gold: #d8b878; /* Primär-Akzent / Buttons */
--champagne: #e6cf9a; /* heller Akzent / Display-Glanz*/
--rose: #cda69c; /* Sekundär-Akzent / Fehler */
--cream: #f2efe9; /* Text hoch / Polaroid-Rahmen */
--text: #e9e4da; /* Standard-Text */
--muted: #a39e95; /* gedämpfter Text */
--faint: #7d7970; /* Labels / Hinweise */
--mono-gold: #9a8c6e; /* Mono-Labels in Gold-Ton */
/* ---- Linien ---- */
--line-gold: rgba(216,184,120,.14); /* edle Haarlinie */
--line-gold-2: rgba(216,184,120,.20); /* Countdown / Felder */
--line-gold-3: rgba(216,184,120,.30); /* Hover / Erfolg / dashed*/
--line-soft: rgba(255,255,255,.07);
--line-soft-2: rgba(255,255,255,.10);
--field-bg: #15141b;
/* ---- Typografie ---- */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
--font-mono: 'Space Mono', ui-monospace, monospace;
--fs-display: 52px; --lh-display: .96;
--fs-h1: 32px;
--fs-h2: 24px;
--fs-eyebrow: 11px; --ls-eyebrow: .22em;
--fs-body-l: 17px;
--fs-body: 15px;
--fs-small: 13px;
--fs-caption: 11px;
/* ---- Abstände ---- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
/* ---- Radien ---- */
--r-sm: 8px; /* kleine Elemente */
--r-md: 12px; /* Formularfelder */
--r-lg: 16px; /* Karten */
--r-xl: 18px; /* große Container */
--r-pill: 999px;
/* ---- Schatten ---- */
--shadow-card: 0 24px 60px -28px rgba(20,18,25,.55);
--shadow-polaroid: 0 14px 30px -16px rgba(0,0,0,.6);
--shadow-toast: 0 16px 40px -12px rgba(0,0,0,.7);
}
/* ============================================================
Basis
============================================================ */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ink);
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: var(--ink); }
/* mobile-first Spalte */
.app-shell { width: 100%; max-width: 460px; margin: 0 auto; min-height: 100vh; }
/* ============================================================
Typografie-Hilfsklassen
============================================================ */
.display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.01em; color: var(--cream); }
.display em { font-style: italic; color: var(--champagne); }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); color: var(--cream); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); color: var(--cream); }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mono-gold); }
.body-l { font-size: var(--fs-body-l); line-height: 1.6; color: var(--text); }
.body { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); }
.quote { font-family: var(--font-display); font-style: italic; color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--faint); }
/* ============================================================
Buttons
============================================================ */
.btn {
font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
border-radius: var(--r-pill); padding: 14px 26px; cursor: pointer;
border: none; transition: transform .14s ease, background .2s ease, border-color .2s ease, opacity .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--gold); color: var(--ink); }
.btn--primary:hover { background: var(--champagne); }
.btn--secondary { background: transparent; color: var(--champagne); border: 1px solid rgba(216,184,120,.4); padding: 13px 24px; }
.btn--secondary:hover { border-color: rgba(216,184,120,.7); background: rgba(216,184,120,.06); }
.btn--ghost { background: transparent; color: var(--muted); padding: 13px 16px; }
.btn--ghost:hover { color: var(--champagne); }
.btn:disabled, .btn--disabled { background: rgba(255,255,255,.04); color: #6f6b63; cursor: not-allowed; }
.btn--sm { font-size: 12.5px; padding: 9px 18px; }
.btn--icon { width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* runde Zurück-Schaltfläche im Header */
.btn--back {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.04); border: 1px solid var(--line-soft-2);
color: #d6d1c8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
/* ============================================================
Karten & Kacheln
============================================================ */
.card {
background: var(--night); border: 1px solid var(--line-gold);
border-radius: var(--r-lg); padding: 20px;
}
.tile {
background: var(--night); border: 1px solid var(--line-gold);
border-radius: var(--r-lg); padding: 18px; cursor: pointer;
transition: transform .18s ease, border-color .2s ease, background .2s ease;
}
.tile:hover { transform: translateY(-3px); border-color: rgba(216,184,120,.4); background: #22202b; }
.tile__icon {
width: 40px; height: 40px; border-radius: 11px;
background: rgba(216,184,120,.12); border: 1px solid rgba(216,184,120,.28);
display: flex; align-items: center; justify-content: center; color: var(--champagne);
}
/* Steckbrief-Avatar */
.avatar {
width: 46px; height: 46px; border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--rose));
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 600; color: var(--ink); flex-shrink: 0;
}
/* Polaroid */
.polaroid {
background: var(--cream); padding: 8px 8px 24px; border-radius: 3px;
box-shadow: var(--shadow-polaroid);
}
.polaroid__img { aspect-ratio: 1; border-radius: 2px; background-size: cover; background-position: center; }
.polaroid__caption { font-family: var(--font-display); font-style: italic; font-size: 15px; color: #3a382f; text-align: center; margin-top: 8px; }
/* Platzhalter-Füllung, solange kein Foto vorhanden */
.placeholder-stripes { background: repeating-linear-gradient(135deg, #2a2832 0 9px, #322f3b 9px 18px); }
/* ============================================================
Formularfelder
============================================================ */
.field-label {
display: block; font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: .16em; text-transform: uppercase; color: var(--mono-gold); margin-bottom: 8px;
}
.field {
width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--cream);
background: var(--field-bg); border: 1px solid var(--line-soft-2);
border-radius: var(--r-md); padding: 13px 15px;
}
.field::placeholder { color: #6f6b63; }
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,184,120,.15); }
textarea.field { resize: vertical; }
select.field { appearance: none; }
input[type="checkbox"] { accent-color: var(--gold); }
/* ============================================================
Countdown
============================================================ */
.countdown { display: flex; gap: 8px; }
.countdown__cell {
flex: 1; text-align: center; padding: 14px 4px;
background: rgba(255,255,255,.03); border: 1px solid var(--line-gold-2); border-radius: var(--r-md);
}
.countdown__num { font-family: var(--font-display); font-weight: 600; font-size: 32px; color: var(--champagne); line-height: 1; }
.countdown__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #86817a; margin-top: 5px; }
/* ============================================================
Chat-Blasen
============================================================ */
.bubble-row { display: flex; flex-direction: column; max-width: 78%; }
.bubble-row--me { align-self: flex-end; align-items: flex-end; }
.bubble-row--them { align-self: flex-start; align-items: flex-start; }
.bubble { padding: 10px 14px; border-radius: 15px; font-size: 14px; line-height: 1.4; }
.bubble--me { background: var(--gold); color: var(--ink); border-bottom-right-radius: 5px; }
.bubble--them { background: var(--dusk); color: var(--text); border-bottom-left-radius: 5px; }
/* ============================================================
Quiz-Balken
============================================================ */
.poll-option {
position: relative; overflow: hidden; text-align: left; width: 100%;
border-radius: var(--r-md); padding: 12px 14px; cursor: pointer;
background: var(--field-bg); border: 1px solid var(--line-soft);
}
.poll-option--selected { border-color: rgba(216,184,120,.7); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(216,184,120,.14); transition: width .5s ease; }
/* ============================================================
Zustände: Toast, Erfolg, leer
============================================================ */
.toast {
display: inline-flex; align-items: center; gap: 11px;
background: var(--dusk); border: 1px solid rgba(216,184,120,.4);
border-radius: 13px; padding: 13px 18px; box-shadow: var(--shadow-toast);
}
.empty-state {
border: 1px dashed var(--line-gold-3); border-radius: var(--r-lg);
padding: 34px; text-align: center;
}
.empty-state__title { font-family: var(--font-display); font-style: italic; font-size: 20px; color: #c9c3b8; }
/* edler Gold-Trenner */
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, rgba(216,184,120,.22), transparent); border: 0; }
/* ============================================================
In-App-Kamera (FEG.openCamera) — Vollbild, Front/Back wechselbar
============================================================ */
.feg-cam { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; }
.feg-cam__video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.feg-cam__bar { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding: 16px 18px; }
.feg-cam__bar--top { top: 0; justify-content: space-between; padding-top: max(16px, env(safe-area-inset-top)); }
.feg-cam__bar--bottom { bottom: 0; justify-content: center; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.feg-cam__btn {
width: 46px; height: 46px; border-radius: 50%;
background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.28); color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 19px; line-height: 1;
}
.feg-cam__btn:hover { background: rgba(0,0,0,.65); }
.feg-cam__shutter {
width: 72px; height: 72px; border-radius: 50%;
background: var(--gold); color: var(--ink);
border: 4px solid rgba(255,255,255,.85); cursor: pointer; box-shadow: 0 0 0 2px rgba(0,0,0,.35);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: .01em;
}
.feg-cam__shutter:active { transform: scale(.93); }