/* ═══════════════════════════════════════════════════════════════════════════ CampKumpel — Gestaltungsgrundlagen ═══════════════════════════════════════════════════════════════════════════ Alle Farben stammen aus dem Logo (brand/logo-2000.webp), ausgelesen statt geschaetzt: Gruen #44723F, Dunkel #141B23. Das Dunkel hat einen Blaustich (H212) — das ist Absicht und unterscheidet die Marke von neutralem Schwarz. Saemtliche Abstufungen halten den Farbton und variieren nur Saettigung und Helligkeit. Jede Kombination, die im Produkt vorkommt, erfuellt mindestens WCAG AA; die Werte stehen als Kommentar an der jeweiligen Variablen. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Markengruen ──────────────────────────────────────────────────────── */ --ck-green-50: #E0F2DE; --ck-green-100: #C9E6C5; --ck-green-200: #A4CF9F; /* auf dunkel 9.95 : AAA */ --ck-green-300: #7DB178; /* auf dunkel 6.95 : AA */ --ck-green-400: #5A8D54; --ck-green-500: #44723F; /* Markenfarbe — auf weiss 5.64 : AA */ --ck-green-600: #376032; /* weiss darauf 7.31 : AAA */ --ck-green-700: #2B4E27; --ck-green-800: #203B1E; /* ── Dunkel / Neutral ─────────────────────────────────────────────────── */ --ck-ink-50: #D1DBE7; --ck-ink-100: #C2CEDC; --ck-ink-200: #A2B2C4; --ck-ink-300: #76879A; /* auf weiss 3.70 : AA fuer Grosstext */ --ck-ink-400: #4A5A6D; /* auf weiss 7.08 : AAA */ --ck-ink-500: #2D3A4A; --ck-ink-600: #1F2A36; --ck-ink-700: #19212B; --ck-ink-800: #141B23; /* Markenfarbe — auf weiss 17.34 : AAA */ /* ── Rollen ───────────────────────────────────────────────────────────── */ --ck-bg: #FFFFFF; --ck-bg-gedaempft: #F6F8F5; /* ein Hauch Gruen, kein reines Grau */ --ck-bg-erhaben: #FFFFFF; --ck-rand: #E3E8E0; --ck-rand-stark: #C8D2C5; --ck-text: var(--ck-ink-800); --ck-text-gedaempft:var(--ck-ink-400); --ck-text-leise: var(--ck-ink-300); --ck-text-auf-farbe:#FFFFFF; --ck-akzent: var(--ck-green-500); --ck-akzent-stark: var(--ck-green-600); --ck-akzent-leise: var(--ck-green-50); --ck-warnung: #B45309; --ck-fehler: #B42318; --ck-erfolg: var(--ck-green-600); /* ── Typografie ───────────────────────────────────────────────────────── */ /* Die Wortmarke ist eine geometrische Grotesk. Inter kommt dem nahe, laedt schnell und hat einen vollstaendigen deutschen Zeichensatz. */ --ck-schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ck-groesse-xs: 0.8125rem; --ck-groesse-sm: 0.9375rem; --ck-groesse-md: 1.0625rem; --ck-groesse-lg: 1.25rem; --ck-groesse-xl: 1.75rem; --ck-groesse-2xl: 2.5rem; --ck-groesse-3xl: 3.5rem; --ck-zeilen-eng: 1.25; --ck-zeilen: 1.6; /* ── Raster ───────────────────────────────────────────────────────────── */ --ck-abstand-1: 0.25rem; --ck-abstand-2: 0.5rem; --ck-abstand-3: 0.75rem; --ck-abstand-4: 1rem; --ck-abstand-6: 1.5rem; --ck-abstand-8: 2rem; --ck-abstand-12: 3rem; --ck-abstand-16: 4rem; --ck-abstand-24: 6rem; --ck-radius-sm: 6px; --ck-radius: 10px; --ck-radius-lg: 16px; --ck-radius-voll: 999px; --ck-schatten-sm: 0 1px 2px rgba(20, 27, 35, 0.06); --ck-schatten: 0 2px 8px rgba(20, 27, 35, 0.08); --ck-schatten-lg: 0 12px 32px rgba(20, 27, 35, 0.12); --ck-breite-inhalt: 1120px; --ck-breite-text: 68ch; } /* ── Dunkle Darstellung ─────────────────────────────────────────────────── */ /* Die Systemeinstellung greift; ein data-theme am sticht sie. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ck-bg: var(--ck-ink-800); --ck-bg-gedaempft: var(--ck-ink-700); --ck-bg-erhaben: var(--ck-ink-600); --ck-rand: #26323F; --ck-rand-stark: #35434F; --ck-text: #EEF3F8; --ck-text-gedaempft: var(--ck-ink-200); --ck-text-leise: var(--ck-ink-300); /* Auf dunklem Grund traegt das Markengruen zu wenig Kontrast (3.08), deshalb die hellere Stufe. */ --ck-akzent: var(--ck-green-300); --ck-akzent-stark: var(--ck-green-200); --ck-akzent-leise: rgba(68, 114, 63, 0.18); --ck-schatten-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ck-schatten: 0 2px 8px rgba(0, 0, 0, 0.45); --ck-schatten-lg: 0 12px 32px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --ck-bg: var(--ck-ink-800); --ck-bg-gedaempft: var(--ck-ink-700); --ck-bg-erhaben: var(--ck-ink-600); --ck-rand: #26323F; --ck-rand-stark: #35434F; --ck-text: #EEF3F8; --ck-text-gedaempft: var(--ck-ink-200); --ck-text-leise: var(--ck-ink-300); --ck-akzent: var(--ck-green-300); --ck-akzent-stark: var(--ck-green-200); --ck-akzent-leise: rgba(68, 114, 63, 0.18); } /* ═══════════════════════════════════════════════════════════════════════════ Grundlagen ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ck-bg); color: var(--ck-text); font-family: var(--ck-schrift); font-size: var(--ck-groesse-md); line-height: var(--ck-zeilen); -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: var(--ck-zeilen-eng); letter-spacing: -0.02em; margin: 0 0 var(--ck-abstand-4); font-weight: 700; } h1 { font-size: var(--ck-groesse-2xl); } h2 { font-size: var(--ck-groesse-xl); } h3 { font-size: var(--ck-groesse-lg); } p { margin: 0 0 var(--ck-abstand-4); max-width: var(--ck-breite-text); } a { color: var(--ck-akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--ck-akzent-stark); } /* Sichtbarer Fokus — nie wegblenden, nur gestalten */ :focus-visible { outline: 2px solid var(--ck-akzent); outline-offset: 2px; border-radius: var(--ck-radius-sm); } img { max-width: 100%; height: auto; } /* ── Bausteine ──────────────────────────────────────────────────────────── */ .ck-inhalt { width: 100%; max-width: var(--ck-breite-inhalt); margin-inline: auto; padding-inline: var(--ck-abstand-6); } .ck-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--ck-abstand-2); padding: var(--ck-abstand-3) var(--ck-abstand-6); border: 1px solid transparent; border-radius: var(--ck-radius); font: inherit; font-weight: 600; font-size: var(--ck-groesse-sm); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; min-height: 44px; /* Fingerkuppe, nicht Mauszeiger */ } .ck-knopf--haupt { background: var(--ck-green-500); color: #FFFFFF; /* 5.64 auf gruen-500 */ } .ck-knopf--haupt:hover { background: var(--ck-green-600); color: #FFFFFF; } .ck-knopf--rand { background: transparent; color: var(--ck-text); border-color: var(--ck-rand-stark); } .ck-knopf--rand:hover { border-color: var(--ck-akzent); color: var(--ck-akzent); } .ck-knopf[disabled] { opacity: .5; cursor: not-allowed; } .ck-feld { width: 100%; padding: var(--ck-abstand-3) var(--ck-abstand-4); border: 1px solid var(--ck-rand-stark); border-radius: var(--ck-radius); background: var(--ck-bg-erhaben); color: var(--ck-text); font: inherit; min-height: 44px; } .ck-feld:focus { border-color: var(--ck-akzent); outline: none; box-shadow: 0 0 0 3px var(--ck-akzent-leise); } .ck-feld::placeholder { color: var(--ck-text-leise); } .ck-karte { background: var(--ck-bg-erhaben); border: 1px solid var(--ck-rand); border-radius: var(--ck-radius-lg); padding: var(--ck-abstand-6); box-shadow: var(--ck-schatten-sm); } .ck-marke { display: inline-flex; align-items: center; gap: var(--ck-abstand-3); } .ck-marke img { height: 32px; width: auto; display: block; } .ck-leise { color: var(--ck-text-gedaempft); font-size: var(--ck-groesse-sm); } /* Nur fuer Bildschirmleser */ .ck-nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }