/* ============================================================ LIVÉRA Property Care — Design-Tokens Grundlage: „Loader-DNA.md" (Countdown-Seite, freigegeben 15.08.2026) und das Tokenset aus Entwurf 05. Zwei Ebenen: 1. Primitive — die tatsächlichen Farbwerte der Marke. 2. Semantische Tokens — was die Farbe im Layout bedeutet. Nur diese werden im CSS benutzt, nur sie wechseln beim Umschalten zwischen dunkel und hell. Dunkel ist der Standard. Hell ist die umschaltbare Variante. ============================================================ */ :root { /* ---------- 1 · Primitive ---------- */ /* Bühne (aus dem Countdown) */ --p-schwarz: #0A0A0A; --p-schwarz-2: #121211; --p-schwarz-3: #171715; --p-anthrazit: #22211E; /* Die dunkle Buehne als Verlauf, nicht als Anstrich. Reines #0A0A0A war praktisch Schwarz: es wirkte nicht tief, sondern leer, weil sich Buehne, Band und Karte kaum voneinander abhoben. Die drei ersten Stufen bilden den Verlauf, --p-nacht ist seine Mitte und zugleich der Farbwert, mit dem alle Bildabschluesse rechnen. Die Achse bleibt leicht gruenlich- neutral — kein Blaustich. */ --p-nacht-licht: #191A17; /* oberer Rand des Buehnenverlaufs */ --p-nacht: #141512; /* die Buehne als Flaeche */ --p-nacht-tief: #0F100E; /* unterer Rand des Buehnenverlaufs */ --p-nacht-band: #1E1F1B; /* die Baender — eine echte Stufe hoeher */ --p-nacht-karte: #232420; /* Karten und Felder: noch eine Stufe */ /* Salbei — die tragende Markenfarbe. #AEBFA9 ist der Markenton. Er trägt als FLÄCHE (Bänder, Chips, große Ziffern, Fußleiste), nicht als Schrift: auf Weiß erreicht er nur 2,1:1. Für Schrift und Linien gibt es die abgedunkelten Stufen. */ --p-salbei: #AEBFA9; /* Markenton, Fläche */ --p-salbei-mittel: #93A58E; --p-salbei-tinte: #46543F; --p-salbei-tief: #526049; /* Schrift, Linien und Primär-CTA im hellen Modus — das Grün aus Version 03. 5,0:1 auf dem Band, 5,2:1 auf der Bühne. Auch der Rahmen in wortmarke-auf-hell.svg trägt diesen Wert. */ /* Zurück zum Grün von Version 03 (30.09.2026, Meeting 29.09.): das Waldgrün #3B5239 vom 28./29.09. ist raus — Kopf und Fußleiste stehen im hellen Modus wieder dunkel, die umgedrehten Akte fast schwarz, die Bänder cremig. Das Latte-Creme darunter bleibt. */ /* Gold — Akzent des Erstgesprächs-Buttons */ --p-gold: #E4BC74; /* auf dunkel */ --p-gold-tief: #795518; /* auf Sand, 5,2:1 auf dem Band */ /* Helle Fläche — gebrochenes Papier statt Weiß. Eine ganzseitige weiße Bühne blendet: sie wirft bei Zimmerlicht mehr zurück als der Bildschirm daneben, und die haarfeinen Jost-Züge brennen darauf aus. 28.09.2026, zweimal: Der alte Sand (#EFE8D9) war gelb, der Salbei kühl-grau — nebeneinander verwaschen. Das helle Leinen danach (#F4F1E8) war fast weiß: blass und grell. Jetzt ein tieferes Latte-Creme, etwas weniger gelb als der Sand; es trägt die Seite, statt zu blenden, und das satte Salbei steht darauf. Die drei ersten Stufen bilden den Bühnenverlauf. --p-sand ist seine Mitte und zugleich die Farbe, mit der die Bildabschlüsse rechnen — deshalb weicht die Bühne nie weit von ihr ab. */ --p-sand-licht: #EFE8DB; /* oberer Rand des Bühnenverlaufs */ --p-sand: #E9E1D2; /* die Bühne als Fläche */ --p-sand-tief: #E3DACA; /* unterer Rand des Bühnenverlaufs */ --p-sand-karte: #F4EFE6; /* Karten: eine Stufe heller als die Bühne */ --p-sand-band: #E2DDCD; /* die Bänder — Salbei 12 % auf dem Latte-Creme */ --p-tinte: #141510; /* Schlagzeilen, nahezu schwarz — 12,5:1 auf dem Band */ --p-tinte-2: #4F524E; /* Fließtext — 5,4:1 auf dem Band */ --p-warmgrau: #53564E; /* leise Zeilen — 5,1:1 auf dem Band */ /* ---------- 2 · Typografie ---------- */ --schrift-sans: "Jost", "Jost Ersatz", "Segoe UI", system-ui, -apple-system, sans-serif; --schrift-serif: "Cormorant Garamond", "Cormorant Ersatz", Georgia, "Times New Roman", serif; --schrift-signum: "Great Vibes", "Cormorant Garamond", cursive; --t-mega: clamp(2.8rem, 8vw, 6.5rem); /* Der Held-Dreiklang steht eine Stufe ueber dem uebrigen Mega-Grad. Er ist das erste, was man sieht, und muss sich gegen Foto und Rauchband behaupten. */ --t-held: clamp(3.2rem, 9.6vw, 7.6rem); --t-h1: clamp(2.2rem, 5.4vw, 4.2rem); --t-h2: clamp(1.7rem, 3.4vw, 2.8rem); --t-h3: clamp(1.15rem, 2vw, 1.45rem); --t-lead: clamp(1.05rem, 1.6vw, 1.3rem); --t-body: 1.0625rem; --t-klein: 0.9rem; --t-label: clamp(0.75rem, 1.1vw, 0.76rem); /* Untergrenze 12 px (Abnahme 12.09.2026) */ --sperr-weit: 0.35em; /* Eyebrow */ --sperr-mittel: 0.25em; /* Buttons, Navigation */ --sperr-eng: 0.14em; /* Überschriften in Versalien */ /* ---------- 3 · Raum ---------- */ --raum-1: 0.5rem; --raum-2: 1rem; --raum-3: 1.5rem; --raum-4: 2.5rem; --raum-5: 4rem; --raum-6: 6rem; --sektion: clamp(4.5rem, 10vw, 9rem); /* 14.09.2026: 1240 → 1400. Die Textseiten („Über LIVÉRA“) wirkten auf dem Desktop als schmale Säule; der Rand schrumpft von 56 auf 48 px. */ --breite-huelle: 1400px; /* Die Rasterabschnitte laufen breiter als der Textkoerper. 1240 px sind das Mass fuer Fliesstext; Kacheln, Karten und die Prozess- spur haben davon nichts und stehen auf grossen Schirmen als schmale Saeule mitten im Nichts. 1560 px liegen zwischen Text- huelle und Kopfzeile (1720) — die Seite bekommt dadurch eine Fluchtlinie statt drei. */ --breite-weit: 1560px; --breite-text: 68ch; --breite-schmal: 56ch; --rand: clamp(1.25rem, 5vw, 3rem); /* Die Kopfzeile laeuft bewusst breiter als der Textkoerper: Marke, Themenschalter und CTA sitzen dadurch naeher am Bildschirmrand und rahmen die Seite, statt in der Huelle mitzuschwimmen. */ --breite-kopf: 1720px; --rand-kopf: clamp(1.25rem, 2.6vw, 2.75rem); /* ---------- 4 · Kanten ---------- Die Marke kommt aus dem offenen Logo-Rahmen und bleibt an Linien und Rahmen eckig. Die Flaechen, die man beruehrt — Buttons, Felder, Karten —, sind seit dem 01.10.2026 minimal abgerundet: 8 px sind bei 48 px Buttonhoehe rund ein Sechstel, sichtbar weicher, aber keine Pille. Der Kompass hat es als Antwortkarte etwas runder (12 px). */ --kante: 8px; --kante-fein: 6px; --kante-karte: 12px; /* Ausnahme fuer schwebende Tafeln (Aufklapp-Menue): was sich vor die Seite legt, statt in ihr zu liegen, darf weich sein — die Rundung macht sichtbar, dass die Tafel eine eigene Ebene ist. */ --kante-tafel: 16px; --kante-zeile: 10px; --kopf-hoehe: 130px; --kopf-hoehe-klein: 104px; /* ---------- 4 · Bewegung ---------- */ /* Aus dem Loader: schneller Antritt, sehr weiches Auslaufen. */ --kurve: cubic-bezier(0.16, 1, 0.3, 1); --kurve-sanft: cubic-bezier(0.4, 0, 0.2, 1); --dauer-kurz: 0.28s; --dauer: 0.55s; --dauer-lang: 1.1s; --dauer-blende: 1.6s; /* ---------- 5 · Semantische Tokens — DUNKEL (Standard) ---------- */ color-scheme: dark; /* --buehne bleibt daneben eine echte Farbe: die Bildabschlüsse rechnen mit ihr (`linear-gradient(to top, var(--buehne) …)`) und brauchen einen Farbwert. Sie ist die Mitte des Verlaufs, deshalb fällt der Unterschied an keiner Kante auf. */ --buehne: var(--p-nacht); --buehne-verlauf: linear-gradient(180deg, var(--p-nacht-licht) 0%, var(--p-nacht) 46%, var(--p-nacht-tief) 100%); --buehne-2: var(--p-nacht-band); --buehne-3: var(--p-nacht-karte); --buehne-kopf: rgba(20, 21, 18, 0.82); --text: rgba(255, 255, 255, 0.94); --text-2: rgba(255, 255, 255, 0.78); --text-3: rgba(255, 255, 255, 0.56); --text-invers: var(--p-schwarz); --akzent: var(--p-salbei); --akzent-leise: var(--p-salbei-mittel); /* Salbei als Fläche gibt es auch auf dunkel — dort sparsam, weil die Bühne selbst schon die Marke trägt. */ --akzent-flaeche: var(--p-salbei); --akzent-flaeche-text: var(--p-schwarz); /* Auf dunkel bleibt der Primär-CTA golden. */ --cta-flaeche: transparent; --cta-text: var(--p-gold); --gold: var(--p-gold); /* Auf der gehobenen Bühne darf die Linie zurücktreten — sie muss nicht mehr allein die Kante behaupten. */ --linie: rgba(255, 255, 255, 0.12); --linie-fein: rgba(255, 255, 255, 0.07); --linie-akzent: rgba(174, 191, 169, 0.35); /* Die Karte ist kein Prozentwert mehr, sondern eine Ebene: unten 2,2 % Weiß, oben 5,5 %. Der Verlauf liegt als background-image darüber, damit die Farbe für den Hover animierbar bleibt. */ --flaeche: rgba(255, 255, 255, 0.022); --flaeche-hover: rgba(255, 255, 255, 0.05); --flaeche-licht: linear-gradient(180deg, rgba(255, 255, 255, 0.033) 0%, rgba(255, 255, 255, 0) 100%); /* Kantenlicht: eine ein Pixel hohe Aufhellung an der Oberkante. Das ist der Griff, der dunkle Oberflächen gefertigt statt gezeichnet aussehen lässt — er kostet nichts und wirkt sofort. */ --kantenlicht: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* Ein sehr weiter, sehr schwacher Salbei-Fleck hinter den Abschnitten, von Abschnitt zu Abschnitt versetzt. Er nimmt dem Dunkel die Leblosigkeit, ohne dass eine Farbe erkennbar wird. */ --schimmer-a: radial-gradient(ellipse 62% 78% at 14% 26%, rgba(174, 191, 169, 0.055) 0%, transparent 68%); --schimmer-b: radial-gradient(ellipse 62% 78% at 86% 68%, rgba(174, 191, 169, 0.05) 0%, transparent 68%); --akzent-a08: rgba(174, 191, 169, 0.08); --akzent-a12: rgba(174, 191, 169, 0.12); --akzent-a22: rgba(174, 191, 169, 0.22); --gold-a22: rgba(228, 188, 116, 0.22); --gold-a28: rgba(228, 188, 116, 0.28); --schatten: 0 24px 60px rgba(0, 0, 0, 0.55); /* Weicher Schein hinter der Held-Schrift. Sehr weit gestreut, damit er die haarfeinen Jost-Züge nicht verschmutzt — er legt der Schrift ein Bett unter, statt sie zu umranden. */ --held-schein: 0 2px 44px rgba(6, 8, 6, 0.75), 0 1px 10px rgba(6, 8, 6, 0.45); /* Der Sockel unter der Held-Schrift: eine sehr weiche Ellipse, die Foto und Rauchband genau dort zurueckdraengt, wo Buchstaben stehen. Randlos auslaufend — man sieht keine Flaeche, nur dass die Schlagzeile ploetzlich traegt. */ --held-sockel: radial-gradient(ellipse 74% 58% at 20% 44%, rgba(5, 7, 5, 0.78) 0%, rgba(5, 7, 5, 0.52) 42%, rgba(5, 7, 5, 0.18) 66%, transparent 82%); /* Atmosphäre — Ringe, Rauch, Glow. Die Bänder laufen im `screen`-Modus. Auf der gehobenen Bühne verlieren sie Kontrast — zugleich hält die Vignette sie an den Rändern nicht mehr klein. Die Ringe ziehen deshalb an, die Bänder bleiben, wo sie waren. */ /* Sektionslicht — der weite, langsam atmende Schein, der einen dunklen Abschnitt aus der Bühne hebt, ohne ihn aufzuhellen. Salbei trägt, Gold setzt einen warmen Punkt, die dritte Stufe ist nur noch eine Wäsche über die ganze Fläche. */ --licht-salbei: rgba(174, 191, 169, 0.18); --licht-gold: rgba(228, 188, 116, 0.08); --licht-weit: rgba(174, 191, 169, 0.055); --atmo-deckkraft: 0.48; --atmo-blur: 6px; --rauch-deckkraft: 0.60; --vignette: rgba(0, 0, 0, 0.45); /* Der weiche Saum am oberen Rand jedes Abschnitts (.hat-licht::before). */ --saum-schatten: rgba(0, 0, 0, 0.26); } /* ---------- 6 · Semantische Tokens — HELL ---------- Palette aus dem Entwurf in „Logos & Visuals", die Bühne auf Sand gestellt: Salbei als Fläche, nahezu schwarze Schlagzeilen, grauer Fließtext — nur eben auf gebrochenem Papier statt auf Weiß. Die Bühne ist ein Verlauf, kein Anstrich: oben Licht, unten Sand, über die Bildhöhe, fest im Bild. Er ist so flach, dass man ihn nicht als Verlauf erkennt — man sieht nur, dass oben Luft ist. ------------------------------------------------------------------ */ :root[data-thema="hell"] { color-scheme: light; /* --buehne bleibt daneben eine echte Farbe: die Bildabschlüsse rechnen mit ihr (`linear-gradient(to top, var(--buehne) …)`) und brauchen einen Farbwert. Sie ist die Mitte des Verlaufs, deshalb fällt der Unterschied an keiner Kante auf. */ --buehne: var(--p-sand); --buehne-verlauf: linear-gradient(180deg, var(--p-sand-licht) 0%, var(--p-sand) 46%, var(--p-sand-tief) 100%); --buehne-2: var(--p-sand-band); /* die Bänder tragen den Markenton */ --buehne-3: var(--p-sand-karte); /* Karten: eine Stufe heller */ --buehne-kopf: rgba(239, 232, 219, 0.9); --text: var(--p-tinte); --text-2: var(--p-tinte-2); --text-3: var(--p-warmgrau); --text-invers: #FFFFFF; /* Salbei für Schrift und Linien — abgedunkelt, sonst nicht lesbar. Zurück auf das Grün von Version 03 (30.09.2026, Meeting 29.09.). */ --akzent: var(--p-salbei-tief); --akzent-leise: var(--p-salbei-tinte); /* Salbei als Fläche — der Markenton selbst. Trägt dunkle Schrift mit 9,4:1 und ist die Farbe, die den hellen Modus prägt. */ --akzent-flaeche: var(--p-salbei); --akzent-flaeche-text: var(--p-tinte); /* Der Primär-CTA ist im hellen Modus salbeigefüllt, nicht golden — Gold gehört auf die dunkle Bühne, auf Creme wird es lehmig. */ --cta-flaeche: var(--p-salbei-tief); --cta-text: #FFFFFF; --gold: var(--p-salbei-tief); --linie: rgba(20, 21, 16, 0.15); --linie-fein: rgba(20, 21, 16, 0.07); --linie-akzent: rgba(82, 96, 73, 0.42); /* Auf Creme trägt das Licht die Karte, nicht der Schatten: sie steht eine Stufe HELLER als die Bühne. Haarlinie und ein sehr flacher, warmer Schatten setzen sie ab. */ --flaeche: var(--p-sand-karte); --flaeche-hover: #F8F4EC; /* Kantenlicht, Flächenverlauf und Schimmer sind Mittel der dunklen Bühne. Auf Sand trägt der Schatten, nicht das Licht. */ --flaeche-licht: none; --kantenlicht: none; --schimmer-a: none; --schimmer-b: none; --akzent-a08: rgba(174, 191, 169, 0.16); --akzent-a12: rgba(174, 191, 169, 0.26); --akzent-a22: rgba(82, 96, 73, 0.24); --gold-a22: rgba(82, 96, 73, 1); --gold-a28: rgba(82, 96, 73, 0.28); /* Der Schatten ist warm getönt statt neutral grau — auf Creme wirkt ein blaugrauer Schatten wie Schmutz. */ --schatten: 0 18px 44px rgba(52, 46, 30, 0.10); /* Schein und Sockel entfallen im hellen Modus (28.09.2026): die Held-Schrift steht jetzt auf deckender Creme, nicht mehr auf dem Foto — dort malten beide nur milchige Höfe um die Buchstaben. */ --held-schein: none; --held-sockel: none; /* Auf hellem Grund muss der Schein kräftiger stehen als auf dunkel — aber nicht so kräftig, dass er als grauer oder gelber Fleck liegen bleibt (so war es mit 42 % Salbei und 20 % Gold auf Sand). */ --licht-salbei: rgba(143, 164, 136, 0.22); --licht-gold: rgba(214, 178, 120, 0.10); --licht-weit: rgba(143, 164, 136, 0.07); --atmo-deckkraft: 0.22; --rauch-deckkraft: 0.85; --vignette: rgba(96, 86, 64, 0.07); --saum-schatten: rgba(62, 55, 36, 0.06); } /* ---------- 7 · Umgekehrter Akt ---------- Einzelne Sektionen kehren die Bühne um — im dunklen Modus wird ein Abschnitt hell, im hellen dunkel. Das ist der „aggressive Section"-Wechsel aus dem Meeting. */ .akt-invers { color-scheme: light; /* Dieselbe helle Palette wie :root[data-thema="hell"]. */ --cta-flaeche: var(--p-salbei-tief); --cta-text: #FFFFFF; --akzent-flaeche: var(--p-salbei); --akzent-flaeche-text: var(--p-tinte); --buehne: var(--p-sand); --buehne-2: var(--p-sand-band); --buehne-3: var(--p-sand-karte); --text: var(--p-tinte); --text-2: var(--p-tinte-2); --text-3: var(--p-warmgrau); --text-invers: #FFFFFF; --akzent: var(--p-salbei-tief); --akzent-leise: var(--p-salbei-tinte); --gold: var(--p-gold-tief); --linie: rgba(26, 26, 22, 0.16); --linie-fein: rgba(26, 26, 22, 0.08); --linie-akzent: rgba(82, 96, 73, 0.38); --flaeche: var(--p-sand-karte); --flaeche-hover: #F8F4EC; --flaeche-licht: none; --kantenlicht: none; --schimmer-a: none; --schimmer-b: none; --akzent-a08: rgba(82, 96, 73, 0.08); --akzent-a12: rgba(82, 96, 73, 0.12); --akzent-a22: rgba(82, 96, 73, 0.22); --gold-a22: rgba(121, 85, 24, 0.16); --gold-a28: rgba(121, 85, 24, 0.22); --saum-schatten: rgba(62, 55, 36, 0.10); background: var(--buehne); color: var(--text); } /* Im hellen Modus kippt der Akt wieder ins Fast-Schwarz (30.09.2026, Meeting 29.09.: zurück zum Stand von Version 03) — wie Kopf und Fußleiste. Schrift weiß, Akzent Salbei. */ :root[data-thema="hell"] .akt-invers { color-scheme: dark; --cta-flaeche: transparent; --cta-text: var(--p-gold); --akzent-flaeche: var(--p-salbei); --akzent-flaeche-text: var(--p-schwarz); --buehne: var(--p-nacht); --buehne-2: var(--p-nacht-band); --buehne-3: var(--p-nacht-karte); --text: rgba(255, 255, 255, 0.94); --text-2: rgba(255, 255, 255, 0.78); --text-3: rgba(255, 255, 255, 0.56); --text-invers: var(--p-schwarz); --akzent: var(--p-salbei); --akzent-leise: var(--p-salbei-mittel); --gold: var(--p-gold); --linie: rgba(255, 255, 255, 0.12); --linie-fein: rgba(255, 255, 255, 0.07); --linie-akzent: rgba(174, 191, 169, 0.35); --flaeche: rgba(255, 255, 255, 0.022); --flaeche-hover: rgba(255, 255, 255, 0.05); --flaeche-licht: linear-gradient(180deg, rgba(255, 255, 255, 0.033) 0%, rgba(255, 255, 255, 0) 100%); --kantenlicht: inset 0 1px 0 rgba(255, 255, 255, 0.07); --schimmer-a: none; --schimmer-b: none; --akzent-a08: rgba(174, 191, 169, 0.08); --akzent-a12: rgba(174, 191, 169, 0.12); --akzent-a22: rgba(174, 191, 169, 0.22); --gold-a22: rgba(228, 188, 116, 0.22); --gold-a28: rgba(228, 188, 116, 0.28); } /* ------------------------------------------------------------------ Sehr schmale Geräte (iPhone SE und Ähnliches, 320–380 px) Die gesperrten Versalien sind der Markenkern, aber „VERWALTEN" mit 0,14 em Sperrung passt bei 320 px nicht mehr in die Zeile. Statt zu trennen — was die Wortmarke zerstören würde — werden Grad und Sperrung zurückgenommen. Der Charakter bleibt, die Zeile hält. ------------------------------------------------------------------ */ /* Sobald das Klappmenue uebernimmt, fluchtet der Kopf wieder mit dem Inhalt — der breitere Aussenlauf ist eine Desktop-Geste. */ @media (max-width: 1000px) { :root { --rand-kopf: var(--rand); --breite-kopf: 100%; } } /* Tablets und größere Smartphones (768px und darunter) */ @media (max-width: 768px) { :root { --t-mega: clamp(2.2rem, 7.5vw, 3.4rem); --t-held: clamp(2.55rem, 9vw, 4.4rem); --t-h1: clamp(1.85rem, 5.8vw, 2.6rem); --t-h2: clamp(1.45rem, 4.2vw, 2.1rem); --t-h3: clamp(1.1rem, 2.5vw, 1.35rem); --t-lead: clamp(1.02rem, 2.2vw, 1.2rem); --sperr-eng: 0.09em; --sperr-mittel: 0.18em; --sperr-weit: 0.26em; --sektion: clamp(3.5rem, 8vw, 5.5rem); --raum-4: clamp(1.75rem, 4vw, 2.5rem); --raum-5: clamp(2.5rem, 6vw, 4rem); --raum-6: clamp(3.5rem, 8vw, 5rem); } } /* Kompakte Smartphones (480px und darunter) */ @media (max-width: 480px) { :root { --t-mega: clamp(2.05rem, 8.5vw, 2.75rem); --t-held: clamp(2.25rem, 9.5vw, 3.2rem); --t-h1: clamp(1.65rem, 6.8vw, 2.2rem); --t-h2: clamp(1.35rem, 5vw, 1.8rem); --t-h3: 1.1rem; --sperr-eng: 0.07em; --sperr-mittel: 0.14em; --sperr-weit: 0.22em; --rand: clamp(1rem, 4.5vw, 1.25rem); --rand-kopf: var(--rand); --raum-4: 1.75rem; --raum-5: 2.5rem; --raum-6: 3.5rem; } } /* Sehr schmale Geräte (iPhone SE 1, ältere Androids, 360px und darunter) */ @media (max-width: 360px) { :root { --t-mega: clamp(1.85rem, 9vw, 2.35rem); --t-held: clamp(2.05rem, 10.5vw, 2.7rem); --t-h1: clamp(1.5rem, 7.5vw, 1.95rem); --t-h2: clamp(1.25rem, 5.5vw, 1.55rem); --sperr-eng: 0.05em; --sperr-mittel: 0.10em; --sperr-weit: 0.16em; --rand: 0.95rem; --rand-kopf: 0.95rem; --raum-1: 0.375rem; --raum-2: 0.75rem; --raum-3: 1.1rem; --raum-4: 1.4rem; } }