@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* ════════════════════════════════════════════════
Fangmeldung – Design System v2 "Tiefes Wasser"
Petrol/Tiefseegrün + Bernstein-Akzent, klare
Flächen, ruhige Typographie (Manrope).
════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
color-scheme: light;
--bg: #f4f6f5;
--bg-alt: #e9eeec;
--bg2: #e9eeec;
--surface: #ffffff;
--surface-solid: #ffffff;
--surface-hover: #f0f5f3;
--text: #182622;
--text-secondary: #4e635d;
--text-muted: #7e928c;
--primary: #0e7569;
--primary-light: #e0f1ee;
--primary-hover: #0a5d53;
--primary-glow: rgba(14,117,105,0.16);
--danger: #d6453d;
--danger-hover: #b53229;
--danger-light: #fdecea;
--accent: #c2700a;
--accent-light: #fcf0de;
--border: #d8e0dd;
--border-light: #e7ecea;
--shadow-sm: 0 1px 2px rgba(24,38,34,0.05);
--shadow: 0 1px 3px rgba(24,38,34,0.06), 0 6px 20px rgba(24,38,34,0.05);
--shadow-lg: 0 4px 12px rgba(24,38,34,0.07), 0 16px 40px rgba(24,38,34,0.08);
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 18px;
--code-bg: #e4efec;
--code-color: #0a5d53;
--header-bg: rgba(255,255,255,0.88);
--header-text: #182622;
--header-border: rgba(24,38,34,0.08);
--input-bg: #fafcfb;
--row-stripe: #f7faf9;
--row-hover: #edf4f2;
--flash-success-bg: #e3f4ec;
--flash-success-text: #135c40;
--flash-success-border: #bfe5d2;
--flash-error-bg: #fdecea;
--flash-error-text: #92271f;
--flash-error-border: #f5c6c1;
--flash-info-bg: #e7f0f8;
--flash-info-text: #1d4d6e;
--flash-info-border: #c4dcee;
--backdrop-blur: 14px;
}
[data-theme="dark"] {
color-scheme: dark;
--bg: #0b1416;
--bg-alt: #0f1b1e;
--bg2: #0f1b1e;
--surface: #122024;
--surface-solid: #122024;
--surface-hover: #182b30;
--text: #e1eae7;
--text-secondary: #9cb3ad;
--text-muted: #627e77;
--primary: #3cc0ae;
--primary-light: rgba(60,192,174,0.13);
--primary-hover: #5ad4c3;
--primary-glow: rgba(60,192,174,0.18);
--danger: #ef7068;
--danger-hover: #d44f46;
--danger-light: rgba(239,112,104,0.12);
--accent: #eba24e;
--accent-light: rgba(235,162,78,0.13);
--border: #233a3e;
--border-light: #1a2c30;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
--shadow: 0 2px 8px rgba(0,0,0,0.32);
--shadow-lg: 0 6px 24px rgba(0,0,0,0.45);
--code-bg: #16292c;
--code-color: #6fd6c6;
--header-bg: rgba(11,20,22,0.88);
--header-text: #e1eae7;
--header-border: rgba(255,255,255,0.07);
--input-bg: #15262a;
--row-stripe: #15262a;
--row-hover: #1a2e33;
--flash-success-bg: rgba(60,192,174,0.13);
--flash-success-text: #7eddcd;
--flash-success-border: rgba(60,192,174,0.28);
--flash-error-bg: rgba(239,112,104,0.12);
--flash-error-text: #f4a09a;
--flash-error-border: rgba(239,112,104,0.25);
--flash-info-bg: rgba(94,170,222,0.12);
--flash-info-text: #93c5e8;
--flash-info-border: rgba(94,170,222,0.25);
--backdrop-blur: 16px;
}
html { scroll-behavior: smooth; }
body {
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
transition: background 0.3s, color 0.3s;
background-image:
radial-gradient(ellipse 80% 50% at 50% -10%, var(--primary-glow) 0%, transparent 65%);
background-attachment: fixed;
padding-top: env(safe-area-inset-top, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
padding-left: env(safe-area-inset-left, 0);
padding-right: env(safe-area-inset-right, 0);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ── Header ───────────────────────────────────── */
header {
background: var(--header-bg);
backdrop-filter: blur(var(--backdrop-blur));
-webkit-backdrop-filter: blur(var(--backdrop-blur));
border-bottom: 1px solid var(--header-border);
color: var(--header-text);
padding: 0 1.5rem;
position: sticky;
top: 0;
z-index: 100;
transition: background 0.3s, border-color 0.3s;
}
.header-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.7rem 0;
}
.header-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.brand {
display: flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
color: inherit;
}
.brand-mark {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 11px;
background: linear-gradient(140deg, var(--primary) 0%, var(--primary-hover) 100%);
color: #fff;
box-shadow: 0 2px 8px var(--primary-glow);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
header h1, .brand-title {
font-size: 1.02rem;
font-weight: 800;
letter-spacing: -0.015em;
white-space: nowrap;
color: var(--text);
}
.brand-sub {
font-size: 0.68rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
/* ── Theme Toggle ─────────────────────────────── */
.theme-btn {
background: var(--surface-solid);
border: 1px solid var(--border);
color: var(--text);
font-size: 1rem;
cursor: pointer;
padding: 0.4rem 0.6rem;
border-radius: var(--radius-sm);
line-height: 1;
transition: all 0.2s;
}
.theme-btn:hover {
background: var(--surface-hover);
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
}
[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
/* ── Nav ──────────────────────────────────────── */
nav {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
/* Header-Navigation: rechts vor dem Theme-Umschalter */
.header-nav { display: flex; align-items: center; margin-left: auto; }
/* ── QR-Codes immer mittig ────────────────────── */
/* qrcodejs setzt selbst display:block auf das ![]()
→ text-align greift nicht,
margin:auto zentriert es (auch in html2canvas). WICHTIG: display hier nicht
überschreiben – das