/* ===================================================== BASE.CSS – IST-STAND DOKUMENTATION ----------------------------------------------------- Rolle dieser Datei: - Aktuelles globales Fundament der Seite. - Enthält derzeit sowohl echte Basisregeln als auch einige bereichs- und modulspezifische Regeln. Aktueller Status: - Datei ist historisch gewachsen. - Dokumentation erfolgt zunächst im IST-Zustand. - Bereinigung / Auslagerung erfolgt erst danach. Vorgehensregel: 1. Erst vollständig dokumentieren 2. Dann Doppellungen markieren 3. Dann entscheiden, was bleibt / rausgeht Wichtige aktuelle Beobachtungen: - :root ist derzeit auf zwei Blöcke verteilt - einige Variablen sind doppelt oder inhaltlich ähnlich - base.css enthält bereits Regeln, die evtl. später in header.css, content.css oder form-spezifische Dateien gehören könnten ===================================================== */ /* ===================================================== 1. GLOBALES VARIABLENFUNDAMENT – HAUPT-ROOT ----------------------------------------------------- Zweck: - Zentrale Definition globaler Farben, Raumfarben, Textfarben, Layoutbreiten und Abstandswerte. Status: - aktiv - systemnah - später auf Doppellungen prüfen Hinweis: - Diese erste :root-Deklaration ist derzeit der Hauptträger der globalen Variablen. ===================================================== */ :root { /* --------------------------------------------------- 1.1 Raum-Farbsystem (semantisch) --------------------------------------------------- Zweck: - thematische / semantische Farbcodierung von Räumen - systemweit wiederverwendbare Bedeutungsfarben Status: - aktiv oder konzeptionell aktiv - projektweit relevant --------------------------------------------------- */ /* ===================================================== BASE – Farbparameter / semantisches Farbsystem Diese Werte sind Fallback-Farben für das gesamte Projekt. Themes / Userprofile dürfen diese später überschreiben. ===================================================== */ /* ----------------------------------------------------- Räume (semantische Inhaltsfarben) Diese Farben transportieren Bedeutung – nicht Design. ----------------------------------------------------- */ --room-system : #3E5A73; /* blau-grau ruhig / technisch / strukturiert */ --room-human : #5E7F62; /* gedämpftes naturgrün / menschlich / organisch */ --room-action : #6B6B6B; /* neutrales mittelgrau / Bewegung / Aktivität */ --room-relation : #7A3E3E; /* warmes dunkles rot / Beziehung / Nähe */ --room-decision : #B89A4A; /* ocker / gedämpftes gold / Entscheidung */ --room-responsibility : #4B3F57; /* violett-grau / Verantwortung / Tiefe */ --room-uncertainty : #708090; /* schiefergrau kühl / Unsicherheit */ --room-movement : #2F6F6D; /* petrol / Bewegung / Fluss */ --room-boundary : #6A5443; /* erdiges braun / Grenze / Stabilität */ --room-clarity : #D6D1C9; /* sehr helles warmgrau / Klarheit / Ruhe */ --logo-gray : #3a3a3a; --logo-accent : #d32f2f; --text-muted : #666; --header-menu-text: #3a3a3a; /* ist auch nochmal im menü als root:stayle definiert*/ --header-menu-text-hover: #087a2f; --header-menu-bg: #ffffff; --header-menu-border: #d0d0d0; /* ----------------------------------------------------- Textsystem ----------------------------------------------------- */ --text-main: #111111; /* Haupttext sehr dunkel */ --text-muted: #666666; /* sekundärer Text ruhig */ /* ----------------------------------------------------- UI-Linien / feine Rahmen ----------------------------------------------------- */ --border-light: #e5e5e5; /* feine Trennlinie Magazin-Look */ /* ----------------------------------------------------- Hintergrund noch neutraler: #f5f6f8 #f8f9fb; weiss im moment 17.5.2026 ----------------------------------------------------- */ --bg: #ffffff /*#f7f6f2; /* #6B6B6B; /*#f8f9fb;*/ /* ----------------------------------------------------- Layoutparameter ----------------------------------------------------- */ --page-frame-width: 760px; /* Standard Seitenrahmen (Desktop) */ /* ----------------------------------------------------- Abstände (vertikale Rhythmik) ----------------------------------------------------- */ --space-xs: 0.5rem; /* minimal */ --space-sm: 1rem; /* klein */ --space-md: 2rem; /* normal */ --space-lg: 3rem; /* groß */ --space-xl: 5rem; /* sehr groß */ /* --------------------------------------------------- 1.5 Globales Abstandssystem --------------------------------------------------- Zweck: - standardisierte Abstände für Bereiche / Blöcke --------------------------------------------------- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 3rem; --space-xl: 5rem; /* --------------------------------------------------- 1.4 Layoutbreite --------------------------------------------------- Zweck: - bisherige globale Inhaltsbreite Hinweis: - --max-width ist aktuell vorhanden - später zu prüfen gegen --page-frame-width --------------------------------------------------- */ /* --max-width: 760px; */ --page-frame-width: 760px; } /* ===================================================== 2. ZWEITE ROOT-DEKLARATION – NACHGETRAGEN ----------------------------------------------------- Zweck: - neue globale Seitenrahmenbreite - eingefügt am 19.03.2026 Status: - bewusst vorläufig separat belassen - soll später in die erste :root-Deklaration integriert werden - derzeit NICHT zusammengeführt, damit der aktuelle Dokumentationsstand vollständig sichtbar bleibt ===================================================== */ /* ===================================================== 3. GLOBALE FRAME-KLASSE ----------------------------------------------------- Zweck: - universeller Seitenrahmen für sichtbare Hauptbereiche - definiert Breite, Zentrierung und box-sizing Bedeutung: - soll perspektivisch die gemeinsame horizontale Referenz für Header, Player, Content usw. bilden Status: - neu - systemkritisch - aktiv ===================================================== */ .page-frame { width: 100%; max-width: var(--page-frame-width); margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 0; padding-right: 0; background: var(--bg); } /* ===================================================== 4. HTML – SCROLLBALKENVERHALTEN ----------------------------------------------------- Zweck: - stabilere Scrollbalkenlogik - Vermeidung von Layoutsprüngen Hinweis: - html wird später in der Datei nochmals definiert - zunächst bewusst im Ist-Zustand belassen ===================================================== */ html { scrollbar-gutter: stable; } /* ===================================================== 5. RESET & GLOBALE DEFAULTS ----------------------------------------------------- Zweck: - Vereinheitlichung des Box-Modells - globale Basis für alle Elemente ===================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ===================================================== 6. BODY – GLOBALE SEITENBASIS ----------------------------------------------------- Zweck: - grundlegende Seitenoptik - Typografie-Basis - globale Ausrichtung / Farbe / Hintergrund Hinweis: - text-align:center wirkt global auf die ganze Seite - spätere Bewertung möglich, jetzt nur dokumentiert ===================================================== */ body { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; color: var(--text-main); background: #ffffff; line-height: 1.6; } /* ===================================================== 7. GLOBALE LINK-BASIS ----------------------------------------------------- Zweck: - neutrale Standarddarstellung von Links - systemweite Grundlogik für Farbe und Hover Status: - global aktiv ===================================================== */ a { color: #555; text-decoration: none; transition: color 0.15s ease; } a:hover { color: #111; text-decoration: underline; } /* ===================================================== 8. HILFSKLASSEN ----------------------------------------------------- Zweck: - kleine globale Utility-Klassen Status: - aktiv ===================================================== */ .muted { color: var(--text-muted); } /* ===================================================== 9. BRAND & HEADINGS – GLOBALE TYPOGRAFIE ----------------------------------------------------- Zweck: - ruhige globale Überschriftenbasis - systemweite Vereinheitlichung von Headlines Hinweis: - dies ist eine globale Typoregel - bereichsspezifische Headline-Sonderformen gehören später ggf. in Moduldateien ===================================================== */ h1, h2, h3, h4, h5, h6 { font-size: 1.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-main); margin: 2rem 0 1rem; } /* ===================================================== 10. HEADER-ABSTAND ZUM CONTENT ----------------------------------------------------- Zweck: - Reduktion des vertikalen Abstands zwischen Header und folgendem Seiteninhalt Hinweis: - diese Regel betrifft bereits einen konkreten Seitenbereich (Header) - derzeit in base.css dokumentiert, spätere Bewertung folgt erst nach Gesamtprüfung ===================================================== */ /* wird nu rin headser.php verwendet darf auch nur in header.css definiert sein header.site-header { margin-bottom: 0rem; } */ /* ===================================================== 11. CONTENT-ANFANG / ERSTES HEADING ----------------------------------------------------- Zweck: - Korrektur des oberen Abstands innerhalb des Content- Bereichs - Vermeidung eines zusätzlichen Startabstands Hinweis: - betrifft bereits eine konkrete Bereichsstruktur - bleibt vorerst dokumentiert in base.css ===================================================== */ /* .content > h1:first-child { margin-top: 0; } .content { margin-top: 0; padding-top: 0; } */ /* ===================================================== 12. ZWEITE HTML-DEKLARATION ----------------------------------------------------- Zweck: - stabile Scrollbalkenlogik - vertikalen Scrollbalken immer reservieren Hinweis: - html wurde oben bereits definiert - Doppeldeklaration ist aktuell bewusst sichtbar ===================================================== */ html { scrollbar-gutter: stable; overflow-y: scroll; } /* ===================================================== 13. FORMULARBEREICH – KONTAKTFORMULAR ----------------------------------------------------- Zweck: - Gestaltung des Kontaktformulars - reduzierte, ruhige Formularoptik Hinweis: - dies ist kein elementares Systemfundament, sondern bereits Modul-/Bereichslogik - bleibt jetzt bewusst dokumentiert an Ort und Stelle ===================================================== */ /* ----------------------------------------------------- 13.1 Formularhauptcontainer ----------------------------------------------------- */ .contact-form { width: 90%; margin: 2.5rem auto; } /* ----------------------------------------------------- 13.2 Formularzeilen ----------------------------------------------------- */ .form-row { margin-bottom: 1.4rem; } /* ----------------------------------------------------- 13.3 Labels ----------------------------------------------------- */ .form-row label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; letter-spacing: 0.05em; } /* ----------------------------------------------------- 13.4 Eingabefelder ----------------------------------------------------- Hinweis: - nutzt var(--font-main), diese Variable ist aktuell in der vorhandenen Datei noch nicht definiert - erst später bereinigen / ergänzen ----------------------------------------------------- */ .form-row input, .form-row textarea { width: 100%; box-sizing: border-box; padding: 0.8rem 1rem; font-family: var(--font-main); font-size: 1rem; line-height: 1.4; border: 1px solid #d6d6d6; background: #fafafa; } /* ----------------------------------------------------- 13.5 Textarea ----------------------------------------------------- */ .contact-form textarea { min-height: 190px; resize: vertical; } /* ----------------------------------------------------- 13.6 Formularaktionen ----------------------------------------------------- */ .form-actions { margin-top: 2rem; } /* ----------------------------------------------------- 13.7 Formularbutton ----------------------------------------------------- */ .contact-form button { padding: 0.6rem 1.6rem; font-size: 0.9rem; letter-spacing: 0.06em; border: 1px solid #2a2a2a; background: transparent; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .contact-form button:hover { background: #2a2a2a; color: #fff; } /* ----------------------------------------------------- 13.8 Erfolg / Fehler neutralisiert ----------------------------------------------------- */ .form-success, .form-error { margin-bottom: 1.5rem; color: #444; } /* ----------------------------------------------------- 13.9 Zusatzblock Mitgliedschaft / Hinweis ----------------------------------------------------- */ .membership-hint { width: 90%; margin: 2rem auto 3rem; text-align: center; } .membership-hint button { margin: 0 0.5rem; }