/* ========================================================================= gm-Theme — Design-Tokens (Modernisierung des FlatCore-gm-Looks) Ersetzt verstreute Hardcodes durch CSS-Custom-Properties. ========================================================================= */ /* --- Schriften lokal (DSGVO-konform), saubere Schnitte --- */ /* woff2 zuerst (≈ −60 % ggü. TTF), TTF als Fallback für alte Browser. */ /* Inter (variabel, 100-900 + optischer Groessenausgleich): fuer Bildschirme entwickelt, sehr gut lesbar auf Desktop/Mobil und bei kleinen Graden — ersetzt PT Sans. */ @font-face { font-family: 'Inter'; src: url('fonts/inter/Inter-Variable.woff2') format('woff2-variations'), url('fonts/inter/Inter-Variable.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter/Inter-Italic-Variable.woff2') format('woff2-variations'), url('fonts/inter/Inter-Italic-Variable.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond/EBGaramond-VariableFont_wght.woff2') format('woff2'), url('fonts/eb-garamond/EBGaramond-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond/EBGaramond-Italic-VariableFont_wght.woff2') format('woff2'), url('fonts/eb-garamond/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 400 800; font-style: italic; font-display: swap; } :root { /* Motion: starke Ease-Out-Kurve (Emil Kowalski) statt schwacher CSS-Built-ins */ --gm-ease-out: cubic-bezier(.23, 1, .32, 1); /* === Markenfarbschema TuK Graal-Müritz (Farbschema-PDF) === */ /* Meer / Blau */ --gm-primary: #323E52; /* Primär — VERBINDLICHE Markenfarbe, keine Abweichung (nicht #0f3c8b, nicht #32477a) */ --gm-primary-hover: #232c3b; /* dunkler Hover */ --gm-sea: #3E8DAE; /* Meer mittel */ --gm-teal: #88CDD3; /* Türkis */ --gm-teal-light: #BFE2E0; /* Türkis hell */ /* Natur / Grün */ --gm-green-dark: #34624D; --gm-green: #5A9077; --gm-green-light: #AAD29A; /* Strand / Sand */ --gm-cream: #F5F1E9; --gm-sand: #EBE2C9; /* Sonne */ --gm-sun: #FFCC00; --gm-sun-light: #FFED99; /* Rollen */ --gm-ink: #232E3C; /* fast-schwarzes Marine */ --gm-text: #45505f; /* Fließtext (Kontrast AA) */ --gm-heading: var(--gm-primary); --gm-accent: var(--gm-sea); /* Akzent (Links/Hover-Highlights) */ --gm-danger: #d12020; --gm-footer-bg: #f5f5f5; --gm-footer-text: #595959; /* WCAG AA auf #f5f5f5 */ --gm-border: #dee2e6; --gm-white: #ffffff; /* Typografie */ --gm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --gm-font-head: 'EB Garamond', Georgia, 'Times New Roman', serif; /* Fluide Schriftgrößen-Skala (ersetzt die px-Breakpoint-Stufen) */ --gm-fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 2.625rem); /* 34→42 */ --gm-fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.125rem); /* 28→34 */ --gm-fs-h3: clamp(1.625rem, 1.3rem + 1.5vw, 2rem); /* 26→32 */ --gm-fs-h4: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); --gm-fs-h5: clamp(1.25rem, 1.1rem + 0.6vw, 1.4rem); --gm-fs-h6: clamp(1rem, 0.95rem + 0.4vw, 1.375rem); /* 16→22 */ --gm-lh-body: 1.625; /* Marken-Verlauf Blau -> Grün: Marineblau (--gm-primary) diagonal zu Waldgrün (--gm-green-dark), nur Bestandspalette. Blau dominiert (bis 52 %), Grün in der unteren Ecke. Beide Töne dunkel -> weißer Text durchgehend AA-fest. */ --gm-grad-deep: linear-gradient(135deg, var(--gm-primary) 0%, var(--gm-primary) 52%, var(--gm-green-dark) 118%); /* Form */ /* EIN Radius für die ganze Website. Belegt: 46 Fundstellen zogen ihn schon als var(--gm-radius) (davon 39 mit totem Fallback »14px«), nur 9 schrieben hart 8px. Die 9 sind eingezogen. */ --gm-radius: .25rem; /* Karten-Schatten (eine systemweite Stufe, Vorlage: .gm-event-card). Overlays/Modals/Lightbox/Dropdowns/Fokus behalten bewusst ihre eigene Tiefe. */ --gm-shadow-card: 0 1px 3px rgba(20,30,45,.08); --gm-shadow-card-hover: 0 4px 14px rgba(20,30,45,.12); /* Bootstrap-5-Variablen auf gm-Primaerfarbe mappen */ --bs-body-bg: #ffffff; /* statt BS-Build-Grau #eee -> sauberer weisser Grund */ --bs-primary: var(--gm-primary); --bs-primary-rgb: 50, 62, 82; --bs-link-color: var(--gm-primary); --bs-link-color-rgb: 50, 62, 82; --bs-link-hover-color: var(--gm-primary-hover); /* A11y: dunkler Bestandston, AA-fest (#3E8DAE-Text war 3,73:1) */ /* ========================================================================== FUNDAMENT (18.08.2026) — »alles aus einem Guss« Die Skalen und Rollen, die bisher fehlten. Jede Section hat ihre Werte vorher selbst erfunden: gemessen 18 Übergangsdauern, 9 Easings, 22 Radius-Angaben, 45 Schattenwerte, 47 padding-Werte und 7 Spezifikationen für dasselbe Versalien-Label. Ursache war nicht Nachlässigkeit, sondern diese Lücke — ohne Stufe im Fundament ist jeder Wert frei erfindbar. ADDITIV: kein Bestandswert wird hier geändert, nur benannt. ========================================================================== */ /* --- Abstände ------------------------------------------------------------ Übernommen aus plugins/se_form/assets/css/form-frontend.css, wo diese Skala bereits erprobt läuft — sie war die einzige echte Abstandsskala des Projekts und lag im Plugin statt im Fundament. */ --gm-space-3xs: .25rem; /* 4px */ --gm-space-2xs: .375rem; /* 6px */ --gm-space-xs: .5rem; /* 8px */ --gm-space-sm: .75rem; /* 12px */ --gm-space-md: 1rem; /* 16px */ --gm-space-lg: 1.5rem; /* 24px */ --gm-space-xl: 2rem; /* 32px */ --gm-space-2xl: 3rem; /* 48px */ /* Rasterrinne: 24px ist der faktische Standard der Startseite (Bootstrap »row g-4« in Events, HdG, Öffnungszeiten, Video) — bisher nur als Utility-Klasse im Markup, nirgends als Entscheidung. */ --gm-gap: var(--gm-space-lg); --gm-gap-wide: clamp(2.5rem, 5vw, 5rem); /* Bild ↔ Text in angeschnittenen Kammern */ /* Sektionsrhythmus: der Abstand war auf der Startseite achtmal neu erfunden (16/72 · 56/56 · 10/84 · 64/64 px …). Eine Stufe, mobil kleiner. */ --gm-space-section: clamp(3rem, 6vw, 4.5rem); /* 48→72px */ --gm-space-block: clamp(2.75rem, 6vw, 5.5rem); /* 44→88px, zwischen Blöcken einer Section */ /* Randbahn: Innenkante des 1200er-Containers. Jede randlose Section braucht sie; mit 100% statt vw entsteht kein Scrollbar-Versatz und kein Überlauf. */ --gm-rail: max(25px, calc((100% - 1200px) / 2 + 25px)); /* --- Satzbreite --------------------------------------------------------- Vorher in drei Einheiten gemessen: sieben ch-Werte, drei px, zwei rem. */ --gm-measure: 62ch; /* Fließtext */ --gm-measure-narrow: 48ch; /* schmale Spalte, Marginalie, Beleg */ --gm-measure-lead: 52ch; /* Anriss / Vorspann */ /* --- Motion ------------------------------------------------------------- 18 Dauern und 9 Easings gegen bisher ein einziges Token. --gm-dur-fast (.2s) ist der Mehrheitswert im Bestand, --gm-dur-slow (.45s) trägt die großen Bildkacheln. --gm-ease-soft war dreimal hart als cubic-bezier(.2,.6,.2,1) in die Kachel-Section getippt. */ --gm-dur-press: .16s; /* Press-Feedback */ --gm-dur-fast: .2s; /* Icons, Links, kleine Zustände */ --gm-dur-mid: .28s; /* Panels, Dropdowns */ --gm-dur-slow: .45s; /* Karten, Bildkacheln */ --gm-dur-image: 1.3s; /* Bildzoom großer Flächen — bewusst träge */ --gm-ease-soft: cubic-bezier(.2, .6, .2, 1); /* --- Mikrotypografie ---------------------------------------------------- EIN Versalien-Label für die ganze Website. Mehrheitswert des Bestands (.78rem / 700 / .12em / --gm-primary) — so führen ihn heute schon gm-jobs, gm-hdg, gm-vid und gm-sec-eyebrow. */ --gm-fs-label: .78rem; --gm-ls-label: .12em; --gm-fw-label: 700; /* --- Farbrollen --------------------------------------------------------- Rollennamen statt Rohwerte: die Rolle ist aussprechbar und übersteht einen Palettenwechsel. --gm-ink-rgb als Kanäle, damit --gm-primary mit Alpha benutzbar ist, ohne eine neue Farbe zu tippen (Muster: --bs-primary-rgb). Achtung, Bestandsfehler: gm-tiles nutzt rgba(35,44,59) und nennt es »--gm-ink« — das ist #232C3B, nicht der Token #232E3C. */ --gm-ink-rgb: 35, 46, 60; --gm-border-subtle: var(--gm-sand); /* Marginalienlinie, leise Trennung */ --gm-accent-line: var(--gm-sun); /* CTA-Unterlinie, Kicker-Balken */ --gm-text-on-photo: var(--gm-white); --gm-label-on-photo: var(--gm-teal-light); /* ======================================================================= ROLLEN (Gate 3, freigegeben 20.08.2026) Zweite Ebene ueber der Palette: die Palette nennt Werte, die Rollen nennen Verwendung. Komponenten greifen ab hier auf Rollen zu, nicht mehr auf Palettenwerte — dann laesst sich ein Ton austauschen, ohne jede Regel zu suchen. Belegt durch die 40 Zielvarianten aus design-system/konsolidierung.md; Herleitung je Token in design-system/g3-tokens.md. ======================================================================= */ /* --- Farbrollen — Rolle vor Aussehen --------------------------- */ --gm-primary-rgb: 50, 62, 82; /* Kanäle der Markenfarbe, damit sie mit Alpha benutzbar ist, ohne einen neuen Ton zu tippen. Speist die --bs-Brücke und die Haarlinien. */ --gm-sea-rgb: 62, 141, 174; /* Kanal von --gm-sea (#3E8DAE), damit Meerblau-Flächen/Linien mit Alpha adressierbar sind, ohne den Ton zu tippen. G6-Migration 24.08.2026 (moorfrosch/sonnencremespender/gaestebefragung). */ --gm-erfolg: var(--gm-green-dark); /* Erfolgszustand: Text und Kontur. Symmetrisch zu --gm-danger, damit der zweite Feldzustand nicht wieder frei erfunden wird. */ --gm-flaeche-grund: var(--gm-white); /* Grundfläche: Seite, Karte, Feld, invertierte Schaltfläche, Segmentgruppe. Ersetzt --gm-white als Rollenname; --gm-white bleibt Palettenwert. */ --gm-flaeche-ruhig: var(--gm-cream); /* ruhige helle Fläche ohne Dringlichkeit — Hinweis, Einwilligungsblock, jede Hoverfläche auf hellem Grund. */ --gm-flaeche-signal: var(--gm-sun-light); /* Signalfläche — die einzige Stelle, an der eine Signalfarbe zulässig ist. */ --gm-flaeche-marke: var(--gm-primary); /* dunkle Markenfläche (Flachton): gefüllte Handlung, aktiver Zustand einer Gruppe, Tabellenkopf, Dialogfläche, dunkler Abschnitt. */ --gm-flaeche-marke-verlauf: linear-gradient(135deg, var(--gm-primary) 0%, var(--gm-primary) 52%, var(--gm-green-dark) 118%); /* dunkle Markenfläche als Verlauf. Zweite Ausprägung derselben Rolle, kein Ersatz: der Flachton kann den Verlauf nicht tragen. Bestand --gm-grad-deep wi */ --gm-flaeche-fehler: color-mix(in srgb, var(--gm-danger) 8%, var(--gm-flaeche-grund)); /* = #FBEDED. zweiter Kanal des Fehlerzustands. Abgeleitet, damit kein Fremdton in die Palette kommt. */ --gm-flaeche-erfolg: color-mix(in srgb, var(--gm-erfolg) 8%, var(--gm-flaeche-grund)); /* = #EFF2F1. zweiter Kanal des Erfolgszustands. Gleicher Mischanteil wie die Fehlerfläche — ein Anteil für beide Zustände. */ --gm-text-invers: var(--gm-white); /* Text auf dunklem Grund — Fläche, Bild oder Video gleichermaßen. Ersetzt --gm-text-on-photo, weil karte/dialog eine Marinefläche ist und kein Foto. */ --gm-label-invers: var(--gm-teal-light); /* Versalien-Label auf dunklem Grund — ordnet ein, ohne mit dem Titel zu konkurrieren. Ersetzt --gm-label-on-photo. */ --gm-tinte-rgb: 35, 46, 60; /* FLÄCHENROLLE Lesbarkeitsdeckung. Die EINE Tinte für jede Deckung mit Alpha über Bild und Video — und für jede Schattenstufe. Kanäle statt Hex, damit A */ --gm-deckung-titel: 0.52; /* Untergrenze der Deckung, unter der Titel- und Großtext über Bild nicht mehr zulässig ist. Bemessen gegen den schlechtesten denkbaren Bildpunkt (reines */ --gm-deckung-text: 0.68; /* Untergrenze der Deckung für Fließtextgrößen über Bild. Bemessen gegen reines Weiß: ab α = 0,649 erreicht --gm-tinte-rgb genau 4,5:1 für --gm-text-inve */ --gm-deckung-fest: 0.78; /* gebaute Sicherheitsstufe über den Untergrenzen. Reserve für Bildtausch, Motivwechsel und den Hover-Zoom (Bild verschiebt sich um 5 %); deckt auch --gm */ --gm-linie-bedien: var(--gm-sea); /* Kontur, die ein Bedienelement überhaupt erst sichtbar macht — dort, wo kein Label die Erkennung trägt. */ --gm-fokus: var(--gm-sea); /* Fokusring auf hellem Grund, mit outline-offset ≥ 2 px. Nie outline:0. */ --gm-fokus-invers: var(--gm-white); /* Fokusring auf dunklem Grund, wo --gm-fokus mit 2,89:1 auf --gm-primary die Schwelle verfehlt. */ /* --- Typografie — geschlossene Skala --------------------------- */ --gm-fs-klein: .78rem; /* Kleinster Grad: Zeilen, die einordnen statt zu erzählen. Fest, wächst nicht mit. */ --gm-fs-kompakt: .875rem; /* Verdichteter Grad für enge Bedienelemente und Beitext. Fest. */ --gm-fs-fliess: 1rem; /* Grundstufe der Skala. Fest — 16 px bleibt auf jeder Breite 16 px. */ --gm-fs-lead: clamp(1.125rem, 1.055rem + .29vw, 1.3125rem); /* Eine Stufe über der Grundstufe: 18 px bei 390 px, 21 px ab ~1419 px. Anriss und Blocktitel teilen sie — getrennt werden sie durch Familie, Gewicht und */ --gm-fs-titel: clamp(1.375rem, 1.143rem + .95vw, 2rem); /* Titelgrad der Seitengliederung: 22 px mobil, 32 px ab ~1440 px. */ --gm-fs-display: clamp(2.375rem, 1.68rem + 2.86vw, 4.25rem); /* Schaugrad, bewusst außerhalb der Textleiter: 38 px mobil, 68 px ab ~1438 px. */ --gm-lh-titel: 1.2; /* Zeilenhöhe ALLER vier Titelrollen — auch des Schaugrades. */ --gm-fw-text: 400; /* Ruhiges Gewicht: Fließtext, Listen, Tabellen, Felder, Footer-Links, Schalterbeschriftung ohne Betonung, Bildnachweis, Kennzahl-Label. */ --gm-fw-betont: 600; /* Einziges Betonungsgewicht der Grundschrift: Navigations- und Fließtextlinks, Eyebrow, Formularbeschriftung, Schaltflächen mit Handlungscharakter, Pill */ --gm-fw-titel: 800; /* Einziges Gewicht der Titelschrift, für alle vier Titelrollen. G4 (21.08.2026): von 700 auf 800 angehoben — die Überschriften trugen sitewide bereits 800, der Kanon folgt der Realität. In EB Garamond ist 700↔800 optisch kaum unterscheidbar, die Anhebung ist damit praktisch bildneutral. */ --gm-tt-label: uppercase; /* Großschreibung der Versalienzeile — gehört zwingend mit --gm-fs-klein und --gm-ls-label an dieselbe Rolle. */ /* --- Abstand, Raster, Container -------------------------------- */ --gm-space-3xl: 4rem; /* Hängender Einzug und breite Ankerspalte: der Abstand, der eine Jahreszahl- oder Markerspalte freistellt. */ --gm-space-4xl: 6rem; /* Größte feste Stufe: voller hängender Einzug auf Desktop, Versatz eines Sprungziels unter dem klebenden Kopf. */ --gm-container: 1200px; /* Innenmaß der Seite — die Breite, an der jede Randbahn rechnet. */ --gm-rail-inset: var(--gm-space-lg); /* Seitlicher Innenabstand des Containers — der Abstand von Text zur Fensterkante. */ --gm-target-min: 24px; /* Mindestmaß einer Bedienfläche in beiden Achsen. */ /* --- Radius, Schatten, Bewegung -------------------------------- */ --gm-radius-group: calc(var(--gm-radius) + var(--gm-space-3xs)); /* Stufe 2 von 3: Außenradius einer Gruppe, die ihre Kinder mit genau einem Innenpolster von --gm-space-3xs (4 px) umschließt. Ergibt 8 px. GILT NUR für */ --gm-radius-round: 999px; /* Stufe 3 von 3: vollrund, das Element ist an den Enden halbkreisförmig. Ersetzt die DREI Bestands-Schreibweisen 50 %, 100px und 999px. */ --bs-border-radius: var(--gm-radius); /* Mapping, kein neuer Wert: zieht die Bootstrap-Standardschaltflächen auf den Kanon. Ohne diese Zeile bleiben sie bei .375rem = 6 px aus default.css. */ --gm-shadow-raised-up: 0 -4px 14px rgba(var(--gm-ink-rgb), .12); /* Richtungsfassung der Höhenstufe 2 — gleiche Weichzeichnung, gleiche Farbe, nur die Kante wechselt. Für eine Fläche, die am UNTEREN Bildschirmrand anse */ --gm-shadow-overlay: 0 18px 50px rgba(var(--gm-ink-rgb), .28); /* Höhenstufe 3, schwebend: eine Fläche liegt über der Seite — Dialog, Lightbox, aufgeklapptes Navigationspanel. */ --gm-shadow-overlay-left: -18px 0 50px rgba(var(--gm-ink-rgb), .28); /* Richtungsfassung der Höhenstufe 3 für eine Fläche, die von RECHTS einfährt und ihren Schatten nach links auf die Seite wirft. Gleiche Höhe, gleiche Fa */ --gm-text-shadow-on-photo: 0 1px 12px rgba(var(--gm-ink-rgb), .55), 0 1px 3px rgba(var(--gm-ink-rgb), .45); /* Die eine Schattenfassung für Text über Foto oder Video. Lesehilfe gegen Kantenflimmern, KEIN Kontrastmittel: der Schatten geht nicht in die WCAG-Rechn */ --gm-scrim-floor: .78; /* Untergrenze der Deckung unter hellem Text über Bild — Flächenrolle, nicht Farbrolle. Als Alpha auf rgba(var(--gm-ink-rgb), …) zu benutzen. Die Deckung */ --gm-dur-loop: 2.4s; /* Wiederholende Hinweisbewegung (Puls, Nudge) — @keyframes … infinite, ausdrücklich NICHT der Geltungsbereich der Übergangsstufen. Das ist der Befund de */ --gm-focus-width: 3px; /* Breite des sichtbaren Fokusrings in der Kanon-Bauform outline. Achsen-Grenzfall: Geometrie hier, Ringfarbe in der Farbachse. */ --gm-focus-offset: 2px; /* Abstand des Fokusrings zur Elementkante in der Kanon-Bauform outline. */ --gm-focus-ring-inner: 2px; /* Zweite, ausdrücklich zugelassene Fokus-Bauform: Innenring eines Doppelrings als box-shadow. Nötig für Felder, deren eigener Rahmen beim Fokus die Farb */ --gm-focus-ring-outer: 4px; /* Außenring derselben Doppelring-Bauform. Zusammen mit --gm-focus-ring-inner die vollständige Geometrie: box-shadow: 0 0 0 var(--gm-focus-ring-inner)