/* ========================================================================== KB Immobilien - Basis-Stylesheet -------------------------------------------------------------------------- Diese Datei gilt fuer ALLE Seiten. Wer hier etwas aendert, aendert es ueberall. Farben, Abstaende und Schriftgroessen stehen gesammelt ganz oben unter ":root" - das ist normalerweise die einzige Stelle, die man anfasst. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Grundeinstellungen (Farben, Masse) -------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* Neutrale Farben */ --bg: #f5f6f7; --surface: #ffffff; --surface-alt: #eef0f2; --ink: #15181b; --ink-muted: #5b636a; --line: #e0e4e7; /* Akzentfarbe - wird je Bereich ueberschrieben (siehe Abschnitt 2) */ /* Koenigsblau, gewaehlt am 09.08.2026. Vorher stand hier das Indigo #3b2a9a aus dem Altlogo von 1989 - das Logo fuehrt diese Farbe seit dem 07.08.2026 nicht mehr, es ist schwarz. Die Werte stammen aus logo/werkzeug/farbwahl.py, Kontrast auf Weiss 9,0:1. Sie gilt fuer die Startseite und alle gemeinsamen Seiten. Die beiden Geschaeftsbereiche ueberschreiben sie weiter unten. */ --accent: #1c3faa; --accent-dark: #163185; --accent-tint: #edf0f8; --on-accent: #ffffff; --kopfband: #163185; /* Masse */ --page: 1140px; --radius: 10px; /* Schrift: bewusst Systemschriften. Keine Google Fonts - die wuerden Besucherdaten an Google senden und sind in Deutschland abmahnbar. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Dunkles Design, wenn der Besucher es an seinem Geraet eingestellt hat */ @media (prefers-color-scheme: dark) { :root { --bg: #131619; --surface: #1b1f23; --surface-alt: #232830; --ink: #eceef0; --ink-muted: #a2abb4; --line: #2e343b; /* Koenigsblau auf dunklem Grund aufgehellt, sonst bliebe es unleserlich. Kontrast auf dem dunklen Grund 5,7:1. */ --accent: #798ecd; --accent-dark: #6779ae; --accent-tint: #151e36; } } /* -------------------------------------------------------------------------- 2. Akzentfarbe je Bereich Wird ueber die Klasse im -Tag gesteuert. -------------------------------------------------------------------------- */ body.bereich-immobilien { --accent: #0e5c4f; --accent-dark: #0a4539; --accent-tint: #e4efec; --kopfband: #0a4539; } body.bereich-hausverwaltung { /* Die Hausverwaltung traegt die Hausfarbe unveraendert. */ --accent: #1c3faa; --accent-dark: #163185; --accent-tint: #edf0f8; --kopfband: #163185; } /* --kopfband ist die Flaeche hinter der Ueberschrift einer Unterseite (Abschnitt 6b2). Sie ist ABSICHTLICH in beiden Designs dieselbe und folgt nicht --accent-dark: Auf dunklen Bildschirmen wird --accent-dark aufgehellt, und weisse Schrift darauf kaeme nur noch auf gut 3:1 Kontrast. Dieser feste Wert traegt Weiss mit ueber 10:1 - und die Bereichsfarbe bleibt trotzdem erkennbar. */ @media (prefers-color-scheme: dark) { body.bereich-immobilien { --accent: #3d9e8a; --accent-dark: #2f8271; --accent-tint: #172b27; } body.bereich-hausverwaltung { --accent: #798ecd; --accent-dark: #6779ae; --accent-tint: #151e36; } } /* -------------------------------------------------------------------------- 3. Grundlagen -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.6em; font-weight: 650; } h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); } h3 { font-size: 1.2rem; } p, ul, ol { margin: 0 0 1.1em; } .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.5rem; } .muted { color: var(--ink-muted); } .lead { font-size: 1.2rem; color: var(--ink-muted); max-width: 62ch; } /* Sprungmarke fuer Tastatur- und Screenreader-Nutzer */ .skip { position: absolute; left: -9999px; background: var(--accent); color: var(--on-accent); padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radius) 0; z-index: 100; } .skip:focus { left: 0; top: 0; } :where(a, button, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* -------------------------------------------------------------------------- 4. Platzhalter-Markierung Alles, was noch mit echten Firmendaten gefuellt werden muss, ist gelb hinterlegt. Sobald der Text eingetragen ist, einfach das entfernen. -------------------------------------------------------------------------- */ .todo { background: #ffe680; color: #4a3b00; padding: 0 0.3em; border-radius: 3px; font-style: normal; } /* -------------------------------------------------------------------------- 5. Kopfbereich und Menue -------------------------------------------------------------------------- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } /* Die Kopfzeile darf breiter sein als der Text darunter. Der Lesebereich ist bewusst auf 1140 Punkte begrenzt - lange Zeilen liest niemand gern. Fuer ein Menue gilt das nicht: Dort stehen kurze Woerter nebeneinander, und mit dem casavi-Eintrag sind es im HV-Bereich acht. In 1140 Punkten ueberlappten Logo und Menuepunkte. Nur die Kopfzeile bekommt deshalb mehr Platz. */ .site-header .wrap { max-width: 1320px; } .header-inner { display: flex; align-items: center; gap: 1rem; min-height: 76px; } /* Firmenlogo in der Kopfzeile. Die Datei ist zweifarbig wie das Original; fuer dunkle Bildschirme laedt der Browser ueber