/* Globale Basis. Importiert die Tokens und setzt alles, was auf jeder Seite gilt. Bewusst klein gehalten: alles Sektionsspezifische gehört in die Komponente. *//* Designtokens NXT Marketing. REGEL: Kein Farb- oder Größenwert im Komponentencode ohne Token. Kommt eine Komponente mit einem eigenen Wert, fehlt entweder ein Token oder die Komponente irrt sich. Geprüft mit scripts/pruefe-tokens.mjs. Herkunft der Werte: marke.json und marke-brief.md. */ :root { /* --------------------------------------------------------------------- FARBRAMPE Vorgabe des Kunden: #1B69C8, dazu Weiß und Schwarz. Sonst nichts. Die Rampe hält den Farbton und steuert Helligkeit und Sättigung, sie entsteht nicht durch Aufhellen mit Weiß. Alle Kontrastwerte unten sind gerechnet, nicht geschätzt, und werden von scripts/pruefe-kontrast.mjs nachgerechnet. --------------------------------------------------------------------- */ --farbe-marke-50: #EAF2FC; /* auf Schwarz 18,60:1 */ --farbe-marke-100: #D2E4F8; /* auf Schwarz 16,19:1 */ --farbe-marke-200: #A6C8F1; /* auf Schwarz 12,15:1 */ --farbe-marke-300: #6FA4E6; /* auf Schwarz 8,13:1, Links in dunklen Sektionen */ --farbe-marke-400: #3E83D6; /* auf Schwarz 5,42:1, Hervorhebung in dunklen Sektionen */ --farbe-marke-500: #1B69C8; /* die Markenfarbe selbst */ --farbe-marke-600: #1657A6; /* auf Weiß 7,12:1 */ --farbe-marke-700: #124684; /* auf Weiß 9,40:1 */ --farbe-marke-800: #0E3767; /* DER GLÜCKSFALL DIESES PROJEKTS, und der Grund, warum hier keine zusätzliche dunkle Sonderstufe nötig ist: #1B69C8 erreicht auf Weiß 5,38:1 und auf sich selbst mit weißem Text ebenfalls 5,38:1. Die Markenfarbe ist damit ausnahmsweise BEIDES: Flächenfarbe für den Primärknopf UND Textfarbe für die Hervorhebungswörter auf hellen Flächen. Die Ausnahme ist Schwarz: dort fällt 500 auf 3,90:1 und reißt die 4,5:1. Deshalb schaltet .sektion--dunkel am Ende dieser Datei auf 400 um. */ /* --------------------------------------------------------------------- ROLLEN: Komponenten greifen NUR hierauf zu, nie auf die Rampe. --------------------------------------------------------------------- */ --farbe-marke: var(--farbe-marke-500); --farbe-marke-hell: var(--farbe-marke-50); --farbe-marke-text: var(--farbe-marke-500); /* 5,38:1 auf Weiß, siehe oben */ /* Primäre Handlung: Markenfläche mit weißem Text, 5,38:1. */ --farbe-akzent: var(--farbe-marke-500); --farbe-akzent-auf: #FFFFFF; --farbe-akzent-hover: var(--farbe-marke-600); --farbe-akzent-aktiv: var(--farbe-marke-700); /* Flächen: Weiß führt, getöntes Blau trennt, Schwarz setzt den Akzent. Der Kunde hat Schwarz gesagt, deshalb #000000 und kein getöntes Fast-Schwarz. */ --farbe-flaeche: #FFFFFF; --farbe-flaeche-alt: #F4F7FB; --farbe-flaeche-dunkel: #000000; /* GRUNDWERTE FÜR HELLE FLÄCHEN. Diese vier werden NIE überschrieben, auch nicht in dunklen Sektionen. Sie sind die Quelle, aus der `.flaeche-hell` in global.css die hellen Rollen wiederherstellt. Der Grund: `.sektion--dunkel` schaltet die Rollen um (Text weiß, leiser Text weiß mit 72 %, Hervorhebung auf Stufe 400). Ein Element, das INNERHALB einer dunklen Sektion eine eigene helle Fläche aufspannt (ein Bildplatzhalter, eine weiße Karte), erbt diese Umschaltung und bekommt weißen Text auf weißem Grund. Ohne diese vier Tokens ließe sich das nur mit rohen Werten in der Komponente reparieren. */ --auf-hell-text: #000000; --auf-hell-text-leise: #595959; --auf-hell-marke: #1B69C8; --auf-hell-rahmen: #E4E9F0; /* Text. Neutrale Graustufen, kein Blaustich: die Palette hat genau eine Farbe. */ --farbe-text: var(--auf-hell-text); --farbe-text-leise: var(--auf-hell-text-leise); /* auf Weiß 7,00:1, auf flaeche-alt 6,66:1 */ --farbe-text-invers: #FFFFFF; --farbe-text-invers-leise: rgba(255, 255, 255, 0.72); --farbe-rahmen: #E4E9F0; --farbe-rahmen-stark: #767676; /* auf Weiß 4,54:1, trägt Bedienelementbegrenzungen */ /* Aufhellung für Hover- und Aktivflächen IN dunklen Sektionen. Dort gibt es keine hellere Flächenfarbe, auf die man ausweichen könnte: die Palette hat Weiß, Schwarz und ein Blau. Eine halbtransparente Aufhellung ist deshalb die einzige Möglichkeit, eine Zustandsfläche auf Schwarz zu zeigen, ohne eine vierte Farbe einzuführen. */ --farbe-aufhellung: rgba(255, 255, 255, 0.08); --farbe-aufhellung-stark: rgba(255, 255, 255, 0.14); /* Semantik. Fehler und Warnung sind Systemfarben, sie gehören nicht in die Marke und erscheinen nur in Formularzuständen. */ --farbe-erfolg: var(--farbe-marke-600); --farbe-fehler: #B3261E; /* auf Weiß 6,26:1 */ --farbe-fehler-hell: #FDECEA; --farbe-warnung: #8A5A00; /* ZWEITE, EXPLIZIT BEGRENZTE AUSNAHME VON "NUR BLAU, WEISS, SCHWARZ": Grün als reiner Zustandsindikator im Vergleichsabschnitt, neben Rot, das dort dieselbe Rolle wie --farbe-fehler bekommt. Beide sind keine Markenfarben und tragen keine Fläche, nur den Haken bzw. das Kreuz und die Kartenbeschriftung, damit "was du häufig hörst" gegenüber "was wir zusagen" auch ohne Lesen der Spaltenüberschrift eindeutig ist. Auf Schwarz gemessen: 6,1:1. */ --farbe-vgl-negativ: var(--farbe-fehler); --farbe-vgl-positiv: #2E9E5B; /* FOKUSRING: auf hellen Flächen Schwarz (21:1), in dunklen Sektionen schaltet er unten auf die Markenstufe 300 um (8,13:1 auf Schwarz). */ --farbe-fokus: #000000; /* --------------------------------------------------------------------- TYPOGRAFIE Schibsted Grotesk für Überschriften: Zeitungsgroteske, hohe x-Höhe, enge Punzen. Sie trägt große Headlines ruhig und wirkt redaktionell statt geometrisch. Instrument Sans für Fließtext: humanistische Groteske mit offenen Punzen, bei 16 px auf dem Handy klar lesbar. Die beiden sind bewusst unterschiedlich gebaut und nicht zu verwechseln. Poppins von der Bestandsseite ist abgelöst: geometrische Rundungen tragen lange deutsche Komposita schlecht, und der Kunde hat ausdrücklich eine übersichtlichere und elegantere Schrift verlangt. NACHTRAG: Schibsted Grotesk fuer Headlines ist seinerseits durch Space Grotesk abgeloest, auf Kundenwunsch Richtung "technisch, Social-Media-Mix". Fliesstext bleibt bei Instrument Sans: der Kontrast einer eckigen Display-Schrift gegen eine offene, ruhige Lesetextschrift war der Grund fuer die urspruengliche Paarung und gilt fuer die neue Display-Schrift genauso. --------------------------------------------------------------------- */ --schrift-text: 'Instrument Sans Variable', system-ui, -apple-system, 'Segoe UI', sans-serif; --schrift-display: 'Space Grotesk Variable', var(--schrift-text); --zeilenhoehe-eng: 1.06; /* große Überschriften */ --zeilenhoehe-mittel: 1.28; /* kleine Überschriften, Buttons */ --zeilenhoehe-normal: 1.62; /* Fließtext */ /* TYPOSKALA, ZWEI STUFEN, NACH DEM REFERENZABGLEICH MIT APPLE UND GOOGLE. Gemessen (referenzen/messwerte.json): Apple setzt Statement-Zeilen auf 80 bis 96 px am Desktop und 48 px mobil, Sektionsueberschriften auf 56 px, Fliesstext auf 17 px. Google setzt 60 bis 68 px und 16 px. Die alte Skala dieses Projekts deckelte h2 bei 52 px und Fliesstext bei 17 px: gegen beide Referenzen sichtbar kleinlaut. Die Kurven laufen von 360 bis 1200 px und deckeln dort. Der Block am Ende der Datei hebt die Deckel ab 1200 px an. Grund fuer zwei Stufen statt einer: Eine einzige clamp-Kurve von 320 bis 1920 laesst die Schriften zwischen 768 und 1200 px zu schnell wachsen. Dort wird die Heldenueberschrift vierzeilig und der Heldenbereich hoeher als das Fenster. NEU: --text-statement. Der eine Satz je Abschnitt, der allein stehen soll (Kostenblock im Problemabschnitt, Uebergang zu den Paketen). Er ist keine zweite h1, sondern eine groessere h2 fuer zentrierte Aussagen. */ --text-xs: clamp(0.875rem, 0.86rem + 0.06vw, 0.9375rem); /* 14 px ist die kleinste erlaubte Stufe */ --text-sm: clamp(0.875rem, 0.84rem + 0.16vw, 0.96875rem); --text-base: clamp(1rem, 0.955rem + 0.2vw, 1.09375rem); /* 16 bis 17,5 px */ --text-lg: clamp(1.0625rem, 0.98rem + 0.38vw, 1.3125rem); /* 17 bis 21 px */ --text-h4: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem); --text-h3: clamp(1.375rem, 1.12rem + 1.15vw, 2rem); --text-h2: clamp(2rem, 1.28rem + 3.2vw, 3.25rem); --text-h1: clamp(2.375rem, 1.3rem + 4.8vw, 3.75rem); --text-statement: clamp(2.25rem, 1.1rem + 5.1vw, 4rem); --text-zahl: clamp(2.25rem, 1.6rem + 2.9vw, 3.5rem); /* EINGABEFELDER: feste 16 px, bewusst NICHT aus der fließenden Skala. iOS zoomt beim Fokus in ein Eingabefeld hinein, sobald dessen Schrift kleiner als 16 px ist. Der Besucher landet dann in einer vergrößerten Ansicht, aus der er selbst wieder herausfinden muss, und das mitten im Formular. Ein clamp-Wert, der bei 320 px unter 16 px fällt, löst genau das aus, ohne dass es beim Testen am Desktop auffällt. */ --text-eingabe: 1rem; /* --------------------------------------------------------------------- RAUM Wachsende Sprünge, weil eine lineare Leiter (20, 24, 28) Entscheidungen kostet, die niemand sieht. --------------------------------------------------------------------- */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 0.75rem; --raum-4: 1rem; --raum-6: 1.5rem; --raum-8: 2rem; --raum-12: 3rem; --raum-16: 4rem; --raum-24: 6rem; --raum-32: 8rem; /* OPTISCHE KORREKTUR, als Token statt als Ausnahme in jeder Komponente. Haken und Kreuz laufen spitz zu und weichen an den Rändern zurück. Neben Text wirken sie bei --raum-2 (8 px) optisch angeklebt, bei --raum-3 (12 px) zu weit weg. 10 px sitzen richtig. Der Wert liegt bewusst nicht auf der Raumskala: er ist keine Abstandsentscheidung, sondern eine Korrektur der Silhouette. Weil sie an mehreren Stellen gebraucht wird, steht sie hier und nicht dreimal als kommentierte Abweichung im Komponentencode. */ --raum-zeichen-text: 10px; /* Fließender Rhythmus statt fester Abstände mit Umschaltpunkt. */ /* SEKTIONSABSTAND NACH DEM REFERENZABGLEICH: Apple 160 px am Desktop und 96 px mobil, dieses Projekt stand bei 112 und 56. Mobil war die Seite damit gedraengt, jeder Abschnitt klebte am vorigen. Jetzt 80 bis 144 px. --raum-kachel ist das Innenpolster der rahmenlosen Kacheln, eine eigene Stufe, weil die grossen Radien mehr Abstand zum Rand verlangen als ein Rahmenkasten: Text, der zu nah an einer 28-px-Rundung steht, wirkt hineingequetscht. */ --raum-sektion: clamp(5rem, 3rem + 6.4vw, 9rem); --raum-sektion-eng: clamp(3rem, 1.9rem + 4.4vw, 5.5rem); --raum-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); --raum-spalte: clamp(1rem, 0.7rem + 1.2vw, 1.5rem); --raum-kachel: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); /* --------------------------------------------------------------------- LAYOUT HALTEPUNKTE DES PROJEKTS: als Kommentar, weil Custom Properties in Media Queries NICHT gelten. Die Werte stehen mehrfach im Code, diese Liste verhindert, dass jede Sektion eigene erfindet. 480 px kleines Handy 640 px großes Handy, ab hier zweispaltige Karten 861 px ab hier zweispaltiger Held und Desktopraster 1100 px kleiner Laptop, ab hier volle Spaltenzahl 1200 px Desktop, ab hier die große Typostufe --------------------------------------------------------------------- */ /* BREITE-INHALT UND RAND-SEITE, AUF CA. 8 PROZENT RAND JE SEITE ABGESTIMMT. Erster Entwurf stand auf 1240px/max 3rem Rand. Auf breiten Monitoren (1920px) blieb die Bahn dort weit unter der verfuegbaren Breite: der Randabstand lag bei rund 18 Prozent je Seite, nicht bei den angestrebten rund 8. Rand-seite waechst jetzt mit 4vw statt 2.4vw und die Bahn selbst ist breiter, damit beide Werte bei typischen Desktopbreiten (1366 bis 1920px) zusammen auf ungefaehr 8 Prozent Rand je Seite kommen. */ --breite-inhalt: 1440px; --breite-text: 62ch; /* unter 80 Zeichen Zeilenlänge */ --rand-seite: clamp(1.125rem, 0.6rem + 4vw, 5rem); --hoehe-kopf: clamp(4rem, 3.4rem + 2vw, 4.75rem); /* --hoehe-kopf ist die Hoehe der KAPSEL, --hoehe-kopf-gruppe der Platz, den der gesamte schwebende Kopf einnimmt: Kapsel plus der Abstand oben und unten, mit dem sie schwebt (--raum-3 je Seite, siehe Kopf.astro). Der Unterschied ist nicht kosmetisch. Sprungziele und scroll-padding-top rechnen mit der GRUPPE: mit der reinen Kapselhoehe laege die Ueberschrift eines angesprungenen Abschnitts genau unter dem unteren Kapselrand. */ --hoehe-kopf-gruppe: calc(var(--hoehe-kopf) + 2 * var(--raum-3)); /* Gemessen, nicht geschaetzt: der Balken ist mit 48 px Knopf, 12 px Polster oben und unten und 1 px Rahmen genau 73 px hoch. body reserviert unten diesen Wert, damit der Fuss nicht darunter liegt. */ --hoehe-mobilbalken: 4.75rem; /* --------------------------------------------------------------------- FORM Zurückhaltende Radien: die Seite trennt über Flächen, nicht über Karten. --------------------------------------------------------------------- */ --radius-s: 0.375rem; --radius-m: 0.75rem; --radius-l: 1.25rem; /* Die rahmenlose Kachel. Apple misst 28 px an 143 Stellen einer Seite, Google 28 bis 40. Sie traegt die Trennung ueber die Flaeche, nicht ueber eine Linie, und braucht deshalb die grosse Rundung. */ --radius-kachel: 1.75rem; --radius-pille: 999px; /* GERAETERADIEN, getrennt von der Layoutleiter. Ein Telefonrahmen hat keinen Layoutradius: seine Rundung ist die Form eines Gegenstands und richtet sich nach ihm, nicht nach der Karte daneben. --radius-l (20 px) an einem 320 px breiten Geraet saehe aus wie ein abgerundetes Rechteck, nicht wie ein Telefon. Der Schirmradius ist NICHT der Rahmenradius minus Rand, sondern etwas kleiner: zwei konzentrische Rundungen mit exakt demselben Mittelpunkt wirken ineinandergeschoben. Der optische Ausgleich ist bewusst. */ --radius-geraet: 2.25rem; --radius-geraet-schirm: 1.7rem; /* Schatten neutral schwarz, kein blau eingefärbter Schatten: die Palette hat genau eine Farbe, und die trägt keine Schatten. */ --schatten-weich: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06); --schatten-hoch: 0 12px 40px rgba(0, 0, 0, 0.14); /* Fuer schwebende UI-Karten im Heldenbereich: drei Lagen, die unterste kurz und dicht, die oberste weit und fast unsichtbar. Eine einzige Lage wirkt wie ausgeschnitten und aufgeklebt. */ --schatten-schwebend: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.1); /* AUSNAHME VON "SCHATTEN NEUTRAL SCHWARZ", GENAU EINE STELLE: die Empfehlung unter den Paketen. Sie soll leuchten, nicht nur hoeher liegen, und das geht nur mit der Markenfarbe im Schein. Kein anderes Element traegt ihn, sonst ist die Empfehlung keine mehr. */ --schein-marke: 0 30px 80px -20px rgba(27, 105, 200, 0.55); /* Die Tiefe in schwarzen Sektionen: ein Markenschimmer von oben, sonst wirkt reines Schwarz auf grossen Flaechen wie ein Loch. Die Fläche bleibt #000000, der Schimmer liegt darueber und ist bei 22 Prozent Deckkraft kein eigener Farbton. */ --schimmer-dunkel: radial-gradient(70% 55% at 50% 0%, rgba(27, 105, 200, 0.22), transparent 70%); /* --------------------------------------------------------------------- BEWEGUNG Handschrift aus marke-brief.md Abschnitt 8: PRÄZISE. Kurze Wege, klare Dezeleration, kein Overshoot. Laut gesagt "schnapp", nicht "hopp". Eine Agentur, die für Verlässlichkeit im Redaktionsplan bezahlt wird, federt nicht. Fünf Dauern statt zwei, weil Dauer der Distanz und der Fläche folgt. --------------------------------------------------------------------- */ --dauer-sofort: 0.1s; /* Zustandsfarbe, Fokusring */ --dauer-schnell: 0.18s; /* Hover, Verschiebungen unter 8 px */ --dauer-normal: 0.34s; /* Akkordeon, Karte anheben */ --dauer-lang: 0.52s; /* Dialog, große Flächen, Funnelschritt */ --dauer-sequenz: 0.8s; /* orchestrierter Moment im Ablauf, Gesamtlaufzeit */ /* Austritte sind kürzer als Eintritte, etwa 60 bis 70 Prozent. Wer geschlossen hat, hat sich schon entschieden, das Warten ist reine Verzögerung. */ --dauer-aus-normal: 0.22s; --dauer-aus-lang: 0.34s; /* DREI KURVEN MIT BEDEUTUNG, nicht eine für alles. eintritt stark dezeleriert, das Element landet austritt akzeleriert, das Element geht weg und blockiert nicht wechsel symmetrisch, keine Richtung, also keine Betonung */ --kurve-eintritt: cubic-bezier(0.16, 0.84, 0.3, 1); --kurve-austritt: cubic-bezier(0.4, 0, 1, 1); --kurve-wechsel: cubic-bezier(0.4, 0, 0.2, 1); --kurve: var(--kurve-eintritt); /* Amplitude: klein, passend zum Profil "präzise". */ --weg-klein: 6px; --weg-normal: 12px; --weg-gross: 20px; /* --------------------------------------------------------------------- ICONS Strichstärke folgt dem Gewicht der Display-Schrift. Schibsted Grotesk läuft in Überschriften auf 600, das ergibt 1,75px auf dem 24er Raster. Der Eckenradius im Icon ist NICHT der Layoutradius: eine Kachel mit 12px Radius bedeutet für ein 24px-Icon etwa 2px, proportional zur Fläche. --------------------------------------------------------------------- */ --icon-raster: 24; --icon-strich: 1.75px; --icon-radius: 2px; --icon-groesse: 1.5rem; /* 24 px, Standarddarstellung */ --icon-groesse-klein: 1.25rem; /* 20 px, in Knöpfen und Formularen */ --icon-groesse-gross: 2.5rem; /* 40 px, Leistungssektion */ /* --------------------------------------------------------------------- TAKTRASTER Die individuelle visuelle Eigenschaft dieses Projekts, abgeleitet aus marke-brief.md Abschnitt 1: Social Media lebt von Wiederkehr. Das Raster zeigt Frequenz und taucht in Held, Ablauf und Vergleich auf, immer für denselben Gegenstand. Es ist kein Dekomuster. --------------------------------------------------------------------- */ --takt-feld: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); --takt-luecke: 0.375rem; /* DER SCHLEIER UEBER DEM HELDENMOTIV. Er steht hier und nicht in Held.astro, weil die Regel dieses Projekts lautet: kein Farbwert im Komponentencode ohne Token. Ein Verlauf aus vier Weisstufen ist ein Farbwert, auch wenn er wie Layout aussieht. Die Stufen folgen der Textlage im Helden und sind nicht gleichmaessig verteilt. Gemessen mit scripts/pruefe-held-kontrast.mjs auf sechs Fenstergroessen: 0 % 35 % Kopfkapsel und Etikett. Hier darf das Motiv am klarsten sein 38 % 62 % Ueberschrift 66 % 86 % Fliesstext, CTA und Vertrauenspunkte 100 % voll sauberer Uebergang in die weisse Sektion darunter Wer hier Werte senkt, senkt den Kontrast der Heldentexte. Danach gehoert pruefe-held-kontrast.mjs erneut gefahren, nicht das Auge befragt. */ --schleier-held: linear-gradient( to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.62) 38%, rgba(255, 255, 255, 0.86) 66%, #FFFFFF 100% ); /* Der eine individuelle Verlauf, aus der Markenfarbe abgeleitet, nicht aus einem Glass-Preset kopiert. Er sitzt im Custom-Abschnitt (Ablauf) und genau dort, nicht auf jeder Kachel. */ --verlauf-takt: linear-gradient( 160deg, var(--farbe-marke-700) 0%, var(--farbe-marke-500) 45%, var(--farbe-marke-600) 100% ); } /* Zweite Typostufe ab echtem Desktop. Erst hier dürfen die Schriften über die auf Tablet nötigen Deckel hinauswachsen. */ @media (min-width: 1200px) { :root { --text-base: clamp(1.09375rem, 0.95rem + 0.2vw, 1.125rem); --text-h4: clamp(1.4375rem, 1.1rem + 0.45vw, 1.625rem); --text-h3: clamp(2rem, 1.4rem + 0.8vw, 2.375rem); /* 60 px bei 1440, Apple liegt bei 56, Google bei 48. */ --text-h2: clamp(3.25rem, 1.7rem + 2.1vw, 3.875rem); /* Der Deckel lag zuerst bei 4.75rem. Bei 1440 x 900 lief der Heldeninhalt damit unten aus dem Fenster heraus, und der dritte Vertrauenspunkt war abgeschnitten. Die harte Grenze sagt: der Held liegt auf 100svh, und angepasst wird der INHALT darin, nie der Container. Also der Grad. 4.5rem ist nach dem Umbau des Heldenvisuals wieder gemessen, siehe CLAUDE.md, Aenderungsverlauf 23.09.2026. */ --text-h1: clamp(3.75rem, 1.6rem + 3.4vw, 4.5rem); --text-statement: clamp(4rem, 1.2rem + 4.4vw, 5.5rem); --text-zahl: clamp(3.5rem, 2.4rem + 1.5vw, 4.25rem); } } /* KUNDENFEEDBACK 27.09.2026: die Desktop-/Laptop-Ansicht wirkte zu breit und zu wenig übersichtlich, mit zu wenig Luft zum Fensterrand. Ab 1100 px (der "kleiner Laptop"-Haltepunkt aus der Liste oben) bekommt die Seite deshalb spürbar mehr Seitenrand, eine niedrigere Kopfkapsel und einen insgesamt kompakteren Rhythmus. --rand-seite treibt über .inhalt (global.css) JEDEN Sektionsinhalt gleichzeitig ein, ohne Sonderregeln je Komponente. Mobil und Tablet bleiben unverändert: das Problem betraf laut Kundenfeedback ausdrücklich nur die Laptop-/Desktop-Breite. */ @media (min-width: 1100px) { :root { /* Deutlich mehr Luft zum Fensterrand als die Basiskurve (die bei Desktopbreiten auf ca. 8 % je Seite gedeckelt war). Bei 1366 px liegt der Rand jetzt bei rund 6,9rem, bei 1920 px am Deckel von 8rem. */ --rand-seite: clamp(2.5rem, 0.2rem + 6.8vw, 8rem); /* Die Kapsel selbst wird niedriger: eine schlankere Kopfzeile lässt die Seite sofort kompakter wirken, ohne dass Logo oder CTA unter die 44-px-Zielgröße fallen. */ --hoehe-kopf: clamp(3.5rem, 3.15rem + 0.9vw, 3.875rem); /* Sektionsabstand und Blockabstand einen Schritt enger als die Basiskurve, damit der zusätzliche Seitenrand nicht zusätzlich durch viel Luft zwischen den Abschnitten verstärkt wird. */ --raum-sektion: clamp(4rem, 2.6rem + 4vw, 7rem); --raum-sektion-eng: clamp(2.5rem, 1.7rem + 2.6vw, 4.5rem); --raum-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); } } /* Dunkle Sektionen und der Fuß schalten um: - Hervorhebungswörter von 500 (3,90:1 auf Schwarz, reißt AA) auf 400 (5,42:1) - Fokusring von Schwarz auf 300 (8,13:1 auf Schwarz) - Rahmen auf eine helle Aufhellung, weil #E4E9F0 auf Schwarz zu laut ist Das ist der Grund, warum Komponenten nur Rollen benutzen: hier wird einmal umgeschaltet und nicht in jeder Komponente eine Sonderregel geschrieben. */ .sektion--dunkel, .fuss { --farbe-marke-text: var(--farbe-marke-400); --farbe-fokus: var(--farbe-marke-300); --farbe-rahmen: rgba(255, 255, 255, 0.16); --farbe-rahmen-stark: rgba(255, 255, 255, 0.42); --farbe-text-leise: rgba(255, 255, 255, 0.72); } /* Schriften selbst hosten: spart DNS und Verbindung zu einem Drittserver und damit die Einwilligungspflicht nach DSGVO. Beide Dateien sind variable Fonts, ein Schnitt deckt den ganzen Gewichtsbereich ab. Lizenzen liegen als LIZENZ-*.txt daneben, beide SIL OFL 1.1. KEIN unicode-range: Es wird je Familie genau EINE Datei ausgeliefert, die lateinische Teilmenge, und die Seite ist vollstaendig deutsch. Ein unicode-range wuerde hier nichts einsparen, und die Zeichenliste darin wird von pruefe-platzhalter.mjs als Platzhaltertelefonnummer gemeldet. */ @font-face { font-family: 'Instrument Sans Variable'; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 100%; src: url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations'); } /* Space Grotesk fuer die Headlines, seit dem Kundenwunsch nach einer Schrift, die staerker Richtung "technisch, Social-Media-Mix" geht. Schibsted Grotesk blieb redaktionell-ruhig, wirkte dem Kunden aber zu sehr wie eine Zeitungsschrift. Space Grotesk ist eine monospace-abgeleitete Groteske mit eckigen Formen und einem markanten "G", genau der Ton, den Tech- und Social-Marken (u.a. auf beiden Referenzseiten) fuer ihre Headlines nutzen. Ebenfalls SIL OFL 1.1, Lizenz liegt daneben. */ @font-face { font-family: 'Space Grotesk Variable'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations'); } *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Sprungziele dürfen nicht unter der sticky Kopfzeile verschwinden */ scroll-padding-top: calc(var(--hoehe-kopf-gruppe) + var(--raum-4)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--schrift-text); font-size: var(--text-base); line-height: var(--zeilenhoehe-normal); color: var(--farbe-text); background: var(--farbe-flaeche); -webkit-font-smoothing: antialiased; overflow-x: clip; /* Platz für den festen Mobilbalken, damit der Fuß nicht darunter liegt */ padding-block-end: var(--hoehe-mobilbalken); } @media (min-width: 861px) { body { padding-block-end: 0; } } img, video, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--schrift-display); font-weight: 600; line-height: var(--zeilenhoehe-eng); letter-spacing: -0.022em; margin: 0 0 var(--raum-4); text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; } h2 { font-size: var(--text-h2); letter-spacing: -0.032em; line-height: 1.04; } h3 { font-size: var(--text-h3); } h4 { font-size: var(--text-h4); } /* KEINE SILBENTRENNUNG. hyphens: auto trennt lange deutsche Komposita an fast jeder Spaltenkante mitten im Wort ("Betreu-ung", "Reich-weite"). Der Text bricht an Wortgrenzen. text-wrap: pretty übernimmt die Feinarbeit: keine einzelnen Wörter in der letzten Zeile. overflow-wrap bleibt die Notbremse und greift nur, wenn ein Wort breiter als die Spalte ist, ohne Trennstrich. */ p, li, dd, dt, figcaption, th, td, label { overflow-wrap: break-word; text-wrap: pretty; } p { margin: 0 0 var(--raum-4); max-width: var(--breite-text); } p:last-child { margin-bottom: 0; } /* Links tragen die Markenfarbe. Sie misst auf Weiß 5,38:1 und darf das hier, anders als in den meisten Projekten. Begründung in tokens.css. */ a { color: var(--farbe-marke-text); text-underline-offset: 0.18em; } a:not(.btn) { padding-block: 0.2rem; } /* vergrößert das Ziel ohne Layoutänderung */ a:hover { color: var(--farbe-akzent-hover); } .sektion--dunkel a:not(.btn):hover, .fuss a:not(.btn):hover { color: var(--farbe-marke-300); } strong { font-weight: 600; } ul, ol { padding-left: 1.25em; } button, input, select, textarea { font: inherit; color: inherit; } /* Fokusring: nie entfernen, nur gestalten. Farbe kommt aus dem Token und wird in dunklen Sektionen umgeschaltet. */ :focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 3px; border-radius: var(--radius-s); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Sprunglink: erstes fokussierbares Element, bei Fokus sichtbar. min-height 44 px, obwohl er nur per Tastatur erreichbar ist: die Zielgrößenregel aus WCAG 2.2 unterscheidet nicht danach, wie ein Element erreicht wurde, und scripts/pruefe-breakpoints.mjs hat ihn zu Recht gemeldet. Flex zentriert den Text in der größeren Fläche. */ .sprunglink { position: absolute; left: var(--raum-4); top: -100px; z-index: 10000; display: inline-flex; align-items: center; min-height: 2.75rem; background: var(--farbe-flaeche-dunkel); color: var(--farbe-text-invers); padding: var(--raum-3) var(--raum-4); border-radius: var(--radius-s); transition: top var(--dauer-schnell) var(--kurve); } .sprunglink:focus { top: var(--raum-4); } /* Ein Container für alles: kein max-width in jeder Sektion einzeln */ .inhalt { width: min(100% - 2 * var(--rand-seite), var(--breite-inhalt)); margin-inline: auto; } .inhalt--schmal { --breite-inhalt: 900px; } /* Rasterhelfer: eine Spalte mobil, zwei ab 640 px, Zielzahl ab 1100 px. Sektionen setzen nur --spalten und bringen keine eigenen Haltepunkte mit. */ .raster { display: grid; gap: var(--raum-spalte); grid-template-columns: 1fr; } @media (min-width: 640px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .raster { grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); } } /* CONTAINER QUERIES: die Bahn meldet sich an, die Komponente fragt sie. Eine Karte weiß nicht, ob sie in einer dreispaltigen Sektion oder allein steht. Ein @media in der Karte behauptet, sie wüsste es. Eskalationspfad: intrinsisches CSS → Container Queries → Media Queries zuletzt. ACHTUNG: container-type erzeugt einen neuen Containing Block. Ein position: absolute-Kind orientiert sich danach an der Bahn, nicht am Seitenkörper. */ .raster { container-type: inline-size; container-name: bahn; } /* Intrinsisches Raster ohne Haltepunkt, für unbekannt viele gleichartige Elemente. min(17rem, 100%) ist die Notbremse: ohne sie erzwingt 17rem bei 320 px Viewport horizontalen Überlauf. */ .raster--auto { display: grid; gap: var(--raum-spalte); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); } /* Grid- und Flex-Kinder mit überlaufendem Inhalt. Das voreingestellte min-width: auto lässt sonst die max-content-Breite durch und erzeugt horizontalen Überlauf auf der ganzen Seite. */ .raster > * { min-width: 0; } /* VERTIKALER FLUSS für Inhaltsbereiche mit wechselnden Elementen (Rechtstexte). Der Eulen-Selektor zeigt auf das Verhältnis zweier Elemente, nicht auf eine Position, deshalb braucht er keine :last-child-Ausnahme. Die zweite und dritte Regel sind die wichtigen: eine Überschrift gehört zu dem, was UNTER ihr steht, nicht zu dem, was über ihr kam. */ .fluss > * + * { margin-block-start: var(--fluss-raum, var(--raum-6)); } .fluss > * + :is(h2, h3) { margin-block-start: var(--raum-12); } .fluss > :is(h2, h3) + * { margin-block-start: var(--raum-3); } .fluss > p { max-width: var(--breite-text); } /* Scrollbehälter für Tabellen. tabindex="0" und role="region" mit aria-label gehören ins Markup, nicht hierher: ohne sie ist eine scrollende Tabelle für Tastaturnutzer nicht erreichbar. */ .scrollrahmen { overflow-x: auto; min-width: 0; } .scrollrahmen:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 2px; } /* --- Sektionsrhythmus --- Nur die Sektionsklasse setzt äußeres Spacing, Komponenten setzen nur inneres. Sonst heben sich .sektion und .cta gegenseitig auf. Ungleiche Abstände sind die Regel: oben mehr Luft als unten, weil die Überschrift optisch leichter ist als der Inhaltsblock darunter. */ .sektion { padding-block-start: var(--raum-sektion); padding-block-end: calc(var(--raum-sektion) * 0.82); } .sektion--eng { padding-block-start: var(--raum-sektion-eng); padding-block-end: calc(var(--raum-sektion-eng) * 0.82); } .sektion--alt { background: var(--farbe-flaeche-alt); } .sektion--dunkel { background: var(--schimmer-dunkel), var(--farbe-flaeche-dunkel); color: var(--farbe-text-invers); } /* DIE RAHMENLOSE KACHEL, aus dem Referenzabgleich mit Apple (siehe referenzen/README.md): Trennung ueber die Flaeche statt ueber eine Linie, grosse Rundung, grosses Innenpolster. Auf weissen Sektionen getoent, auf getoenten Sektionen weiss, in dunklen Sektionen eine Aufhellung. Die Umschaltung steht hier einmal und nicht in jeder Sektion. */ .kachel { background: var(--farbe-flaeche-alt); border-radius: var(--radius-kachel); padding: var(--raum-kachel); } .sektion--alt .kachel { background: var(--farbe-flaeche); } .sektion--dunkel .kachel { background: var(--farbe-aufhellung); } /* STATEMENT: der eine Satz, der allein stehen soll. Zentriert, gross, mit Luft. Apple setzt so "Nichts klingt besser.", hier traegt es die Kosten des Nichthandelns und den Uebergang zu den Paketen. */ .statement { font-size: var(--text-statement); line-height: 1.02; letter-spacing: -0.04em; text-align: center; max-width: 18ch; margin-inline: auto; } /* WORTWEISE AUFHELLUNG, gesteuert von src/scripts/bewegung.ts. Ohne JavaScript und bei reduzierter Bewegung steht der Satz voll deckend da: das Skript setzt die Abdunklung selbst, sie steht nicht hier im CSS. */ .wort { display: inline; } /* Hervorhebung einzelner Wörter in Überschriften. Bewusst NUR Farbe, kein Balken und kein Unterstrich: die Hervorhebung steht in jeder Sektionsüberschrift, ein Balken je Titel wäre Lärm. Ausgezeichnet wird mit , weil die Betonung semantisch stimmt, die Optik läuft über Farbe. Das ist die Vorgabe des Kunden: Markanz in Blau, Rest in Schwarz oder Weiß je nach Sektion. Der Umschaltpunkt steht in tokens.css bei .sektion--dunkel. */ .hebung { color: var(--farbe-marke-text); font-style: normal; } /* --- Interaktion: zwei Helfer für den ganzen Auftritt --- Statt in jeder Sektion eine eigene Hoverregel gibt es zwei Klassen. Beide hängen an (hover: hover): auf Touch gibt es kein Zeigen, dort bliebe :hover am ersten Fingertipp hängen und die Kachel stünde angehoben. Bewegt werden nur transform und box-shadow, nichts, was Layout neu rechnet. Wer Bewegung reduziert, bekommt trotzdem eine Rückmeldung: Rand und Schatten bleiben, das Anheben entfällt. */ @media (hover: hover) { /* translate statt transform: GSAP schreibt transform, eine Transition darauf laesst dessen Animationen haengen. Regel 4 in src/scripts/gsap.ts. */ .hebt { transition: translate var(--dauer-schnell) var(--kurve), box-shadow var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve), background-color var(--dauer-schnell) var(--kurve); } .hebt:hover, .hebt:focus-within { translate: 0 -4px; box-shadow: var(--schatten-hoch); border-color: var(--farbe-marke-500); } /* Für Bildkästen. Der Kasten braucht overflow: hidden, sonst läuft das vergrößerte Bild über seine Ecken hinaus. */ .zoomt img, .zoomt video { transition: transform var(--dauer-normal) var(--kurve); } .zoomt:hover img, .zoomt:hover video { transform: scale(1.04); } } @media (hover: hover) and (prefers-reduced-motion: reduce) { .hebt:hover, .hebt:focus-within { translate: none; } .zoomt img, .zoomt:hover img, .zoomt video, .zoomt:hover video { transition: none; transform: none; } } /* EINE HELLE INSEL IN EINER DUNKLEN SEKTION. .sektion--dunkel und .fuss schalten die Rollen um: Text wird weiß, leiser Text wird weiß mit 72 Prozent, die Hervorhebung wechselt auf die hellere Markenstufe. Ein Element, das darin eine EIGENE helle Fläche aufspannt, erbt diese Umschaltung und steht dann mit weißem Text auf weißem Grund. Genau das ist im Bildrundgang passiert: die Bildplatzhalter in der schwarzen Social-Sektion zeigten nur ihr blaues Label, die Beschreibung des Motivs war unsichtbar. Der Fehler fällt beim Bauen nicht auf, weil das Markup stimmt. Diese Klasse stellt die hellen Rollen aus den auf-hell-Tokens wieder her. Sie gehört an jedes Element, das in einer dunklen Sektion eine helle Fläche bekommt. */ .flaeche-hell { color: var(--auf-hell-text); --farbe-text: var(--auf-hell-text); --farbe-text-leise: var(--auf-hell-text-leise); --farbe-marke-text: var(--auf-hell-marke); --farbe-rahmen: var(--auf-hell-rahmen); --farbe-fokus: var(--auf-hell-text); } /* EINE SEKTION, DIE EIN RANDELEMENT TRAEGT. Zwei Dinge, die beide gebraucht werden und die man beide vergisst: position: relative macht die Sektion zum Bezugsrahmen. Ohne sie faellt ein position: absolute-Randelement auf den naechsten positionierten Vorfahren zurueck, im Zweifel den Seitenkoerper, und haengt dann irgendwo. overflow: clip Das Randelement laeuft absichtlich ein Stueck aus dem Bild. Ohne Beschnitt waechst die Seite nach rechts, und auf dem Handy entsteht waagerechtes Scrollen. Das ist DER klassische Fehler bei angeschnittenen Dekoelementen, und er faellt am Desktop nie auf. clip und nicht hidden: hidden macht die Sektion zum Scrollcontainer und bricht damit position: sticky in allem, was darin liegt. clip beschneidet nur. Der Inhalt darin muss ueber das Element steigen, sonst liegt das Dekoelement bei gleicher Stapelposition darueber. */ .sektion-deko { position: relative; overflow: clip; } .sektion-deko > .inhalt { position: relative; z-index: 1; } .text-leise { color: var(--farbe-text-leise); } .text-klein { font-size: var(--text-sm); } .text-gross { font-size: var(--text-lg); } .text-mitte { text-align: center; } .text-mitte p { margin-inline: auto; } /* Entwicklungsmarkierung für Texte, die noch mit dem Kunden abzustimmen sind. Erscheint nie in Produktion, weil das Attribut vor dem Livegang entfernt wird, und solange es da ist, ist es nicht zu übersehen. Gefunden von scripts/pruefe-platzhalter.mjs. */ [data-copy-vorschlag] { outline: 2px dashed var(--farbe-fehler); outline-offset: -2px; position: relative; } [data-copy-vorschlag]::before { content: 'Copy-Vorschlag, mit Kunde abstimmen'; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: var(--farbe-fehler); color: #fff; font-size: 0.75rem; padding: 0.25rem 0.5rem; z-index: 50; } /* BEISPIELHAFTE INHALTE, KEIN ECHTER KUNDENFALL. Case Studies und Kundenstimmen zeigen erfundene, aber plausible Beispielinhalte, damit beide Sektionen ihre endgültige Form zeigen, bevor echte, freigegebene Fälle und Zitate vorliegen. Diese Kennzeichnung ist bewusst NICHT alarmierend wie die Entwicklungsmarkierung weiter oben in dieser Datei oder .offen: sie bleibt eine dauerhafte Gestaltungsentscheidung und nicht eine Baustellenmarkierung. Trotzdem ist sie kein Freibrief. Ohne diese sichtbare Kennzeichnung wäre ein erfundener Kundenname mit erfundenem Ergebnis eine Irreführung nach Paragraf 5 UWG. Mit ihr ist für jeden Besucher erkennbar, dass hier ein Beispiel und keine echte Referenz steht. Werden die Beispielinhalte vor dem Livegang durch echte, freigegebene Fälle ersetzt, wird diese Markierung an derselben Stelle entfernt, siehe CLAUDE.md. */ .beispiel-marke { display: inline-flex; align-items: center; gap: var(--raum-1); padding: var(--raum-1) var(--raum-3); background: var(--farbe-flaeche-alt); border: 1px solid var(--farbe-rahmen-stark); border-radius: var(--radius-pille); font-family: var(--schrift-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--farbe-text-leise); } /* HELDENHÖHE: svh, nicht vh und nicht dvh. vh entspricht auf Mobil lvh und wird von der Adressleiste beschnitten. dvh wächst und schrumpft beim Scrollen, wenn die Adressleiste ein- und ausfährt: jedes Element mit 100dvh springt dabei sichtbar. Harte Grenze aus dem Regelwerk: der Heldenbereich liegt auf jeder Breite und jeder Fensterhöhe bei 100 % der sichtbaren Höhe. Angepasst wird der Inhalt darin, nie der Container. DER KOPF SCHWEBT JETZT DARUEBER, NICHT DAVOR. Seit dem Umbau auf die schwebende Kapsel ist .kopf position: fixed und belegt KEINEN Platz mehr im Fluss: der Held beginnt ganz oben, sein Hintergrundmotiv laeuft hinter der Kapsel durch, und die Kopfhoehe steht als Innenabstand IM Helden (Held.astro). DIE REGEL, DIE DABEI GLEICH BLEIBT: die Kopfhoehe steht GENAU EINMAL in der Rechnung. Vorher wurde sie von 100svh abgezogen, jetzt ist sie Polster innerhalb der 100svh. Beides ergibt zusammen genau eine Fensterhoehe. Zweimal gerechnet laeuft der Inhalt unten heraus, und genau das war der Fehler aus Phase 8: der letzte Vertrauenspunkt lag unterhalb der ersten sichtbaren Fensterhoehe. */ .held { min-height: 100svh; } /* Der Heldenbereich meldet seine Sichtbarkeit als benannte View-Timeline an, body macht den Namen ueber timeline-scope fuer Geschwister sichtbar. Das braucht der feste Mobilbalken: er ist position: fixed, verlaesst den sichtbaren Bereich nie und hat deshalb keine eigene brauchbare View-Timeline. Er haengt sich an die des Helden und faehrt ein, sobald der nach oben hinauslaeuft. Siehe MobilBalken.astro. */ body { timeline-scope: --held-sicht; } .held { view-timeline-name: --held-sicht; } /* GESTUFTE REDUZIERTE BEWEGUNG. reduce heißt nicht "keine Rückmeldung", sondern "keine vestibulär auslösende Bewegung". Deshalb KEIN pauschales * { animation: none !important; transition: none !important } Das killt auch Deckkraft- und Farbübergänge und lässt jeden Zustandswechsel sprunghaft aussehen. Erlaubt bleiben: opacity, background-color, border-color, color, box-shadow. Es entfallen: translate, scale, rotate, Parallaxe, scrollgebundene Bewegung. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; scroll-behavior: auto !important; } a, button, input, select, textarea, summary, .btn, .hebt, [data-zustand] { transition-property: opacity, background-color, border-color, color, box-shadow !important; transition-duration: 0.15s !important; } } /* SCROLL-GETRIEBENE EINBLENDUNG, ohne JavaScript, ohne IntersectionObserver. Der Anfangszustand steht IN den Keyframes, nicht als Regel am Element. Wer opacity: 0 außerhalb des @supports-Blocks setzt, macht Inhalt in Browsern ohne Unterstützung dauerhaft unsichtbar. Das ist der häufigste Fehler bei diesem Muster und verstößt gegen die harte Grenze "Seite bleibt ohne JavaScript vollständig lesbar". Sparsam eingesetzt: eine Einblendung je Sektionsgruppe, nicht an jedem Element. */ @keyframes auf-einblenden { from { opacity: 0; transform: translateY(var(--weg-normal)); } to { opacity: 1; transform: none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-anim='auf'] { animation: auf-einblenden linear both; animation-timeline: view(); animation-range: entry 15% entry 55%; } } } .icon-sprite[data-astro-cid-tk6x7xfu] { position: absolute; width: 0; height: 0; overflow: hidden; } .logo[data-astro-cid-qmbhzs4e] { display: block; height: 1.75rem; width: auto; } .icon[data-astro-cid-zgufigjl] { width: var(--icon-groesse); height: var(--icon-groesse); flex: none; stroke-width: 1.75px; vertical-align: -.16em; } .icon--klein[data-astro-cid-zgufigjl] { --icon-groesse: var(--icon-groesse-klein); stroke-width: 2.1px; } .icon--gross[data-astro-cid-zgufigjl] { --icon-groesse: var(--icon-groesse-gross); stroke-width: 1.05px; } .fuss[data-astro-cid-osws6ng6] { background: var(--farbe-flaeche-dunkel); color: var(--farbe-text-invers); padding-block: var(--raum-sektion-eng); } .fuss__logo { height: 2.5rem; } .fuss__bahn[data-astro-cid-osws6ng6] { display: grid; gap: var(--raum-block); } @media (width >= 861px) { .fuss__bahn[data-astro-cid-osws6ng6] { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--raum-12); } } .fuss__satz[data-astro-cid-osws6ng6] { margin-block-start: var(--raum-4); color: var(--farbe-text-leise); max-width: 32rem; } .fuss__titel[data-astro-cid-osws6ng6] { font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em; margin-block-end: var(--raum-4); } .fuss__titel--zweit[data-astro-cid-osws6ng6] { margin-block-start: var(--raum-8); } .fuss__liste[data-astro-cid-osws6ng6] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-2); } .fuss__liste[data-astro-cid-osws6ng6] li[data-astro-cid-osws6ng6] { display: flex; align-items: center; gap: var(--raum-3); } .fuss__icon { color: var(--farbe-marke-text); } .fuss[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6] { color: var(--farbe-text-invers); text-decoration: none; } .fuss[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6]:hover, .fuss[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6]:focus-visible { color: var(--farbe-marke-text); text-decoration: underline; } .fuss__adresse[data-astro-cid-osws6ng6] { margin-block-start: var(--raum-6); font-style: normal; color: var(--farbe-text-leise); } .fuss__zeile[data-astro-cid-osws6ng6] { margin-block-start: var(--raum-12); padding-block-start: var(--raum-6); border-block-start: 1px solid var(--farbe-rahmen); color: var(--farbe-text-leise); }