/* ============================================================ k3.css · Bildwelt-Effektebene (28.08.2026) Ebene 1 = das Foto: neutral, korrekt belichtet, OHNE Grading. Ebene 2 = diese Datei: gibt jedem Bereich seine eigene Handschrift. Drei Regeln: 1) Scrim NUR dort, wo Text auf dem Bild liegt. Bilder in Karten und Rahmen bleiben unbehandelt -> helle und dunkle Zonen auf der Seite statt ueberall Grau. 2) Gerichtet statt flaechig. Ein Schleier ueber allem toetet das Bild. 3) Hoechstens EIN Glow je Seite, sonst wird der Akzent zur Tapete. Der Bereich kommt als Klasse am (layout.py -> fx_class(path)). ============================================================ */ /* ---------- Grundwerte (= fx-ruhe: Ratgeber, Ueber uns, Kontakt, Recht) ---------- */ :root { --fx-grade: saturate(0.95); --fx-scrim: linear-gradient(100deg, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.88) 50%, rgba(10,11,13,0.46) 80%, rgba(10,11,13,0.26) 100%); --fx-glow: none; } /* ---------- Seiten-Hero: Bild als eigene Flaeche ---------- Das Grading darf die Schrift nicht mitfiltern, deshalb liegt das Bild in .ph-bg und nicht mehr als background-image auf der Sektion. */ .page-hero { background-image: none !important; } .page-hero::before { display: none !important; } /* alter Pauschal-Abdunkler (style.css) */ .ph-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--ph-img); background-size: cover; background-position: var(--ph-pos, 50% 50%); background-repeat: no-repeat; filter: var(--fx-grade); } .ph-bg::after { content: ""; position: absolute; inset: 0; background: var(--fx-glow), var(--fx-scrim); } /* ---------- Startseite: Hero-Slides ---------- */ .hero-slide { filter: var(--fx-grade); } .hero-slides::after { background: var(--fx-glow), var(--fx-scrim); } /* ============================================================ Die Bereiche ============================================================ */ /* Startseite: warm, einladend, ein Glow oben rechts */ .fx-home { --fx-grade: saturate(1) contrast(1.03); --fx-scrim: linear-gradient(96deg, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.93) 56%, rgba(10,11,13,0.40) 80%, rgba(10,11,13,0.18) 100%), linear-gradient(to top, rgba(10,11,13,0.92) 0%, rgba(10,11,13,0) 38%); --fx-glow: radial-gradient(100% 120% at 92% 8%, rgba(249,154,64,0.16), rgba(249,154,64,0) 58%); } /* KFZ-Meisterbetrieb: technisch, praezise, kuehl. Scrim gerichtet von links. */ .fx-werkstatt { --fx-grade: saturate(0.92) contrast(1.06); --fx-scrim: linear-gradient(100deg, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.92) 54%, rgba(10,11,13,0.34) 78%, rgba(10,11,13,0.10) 100%); } /* Karosserie & Lackzentrum: Farbe und Glanz SIND das Thema. Deshalb volle Saettigung, Scrim schwerpunktmaessig unten, Bildmitte bleibt farbig. */ .fx-lack { --fx-grade: saturate(1.10) contrast(1.04); --fx-scrim: linear-gradient(180deg, rgba(10,11,13,0.22) 0%, rgba(10,11,13,0) 38%, rgba(10,11,13,0.80) 100%), linear-gradient(100deg, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.90) 54%, rgba(10,11,13,0.30) 80%, rgba(10,11,13,0.05) 100%); --fx-glow: radial-gradient(120% 90% at 10% 100%, rgba(249,154,64,0.20), rgba(249,154,64,0) 60%); } /* KFZ-Sachverstaendiger: sachlich, dokumentarisch, hell. Kuehler Hauch, kein Glow. */ .fx-gutachten { --fx-grade: saturate(0.82) brightness(1.04); --fx-scrim: linear-gradient(90deg, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.86) 48%, rgba(10,11,13,0.42) 78%, rgba(10,11,13,0.22) 100%), linear-gradient(0deg, rgba(20,26,34,0.22), rgba(20,26,34,0.22)); } /* Autohaus: offen, freundlich, Tageslicht. Scrim nur unten, flacher warmer Schleier. */ .fx-autohaus { --fx-grade: saturate(1) brightness(1.06); --fx-scrim: linear-gradient(to top, rgba(10,11,13,0.90) 0%, rgba(10,11,13,0.30) 48%, rgba(10,11,13,0.04) 80%), linear-gradient(100deg, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.87) 50%, rgba(10,11,13,0.28) 80%, rgba(10,11,13,0.03) 100%); --fx-glow: linear-gradient(0deg, rgba(249,154,64,0.06), rgba(249,154,64,0.06)); } /* ---------- Zeilenlaenge der Hero-Ueberschrift ---------- Ohne Deckel lief die H1 quer ueber die ganze Wrap-Breite (1152 px) und damit bis in die helle Bildzone. 22ch ist ohnehin der Lesewert fuer Ueberschriften: die Zeile bekommt Form und bleibt in der ruhigen Bildhaelfte. */ .page-hero h1 { max-width: 22ch; text-wrap: balance; } /* ---------- Lauftext IM Hero: --text-muted (#A5A5A9) traegt nur auf der Vollflaeche, nicht ueber einem Bild. Auf dem Hero deshalb der hellere Chrom-Mittelton aus der Marke. Gemessen, nicht geschaetzt. ---------- */ .page-hero p.lead, .page-hero .lead, .hero-v2 .hero-sub { color: #D1D1D1; } .page-hero .crumbs, .page-hero .crumbs span, .page-hero .crumbs a { color: #C3C3C6; } /* ---------- Mobil: Text liegt voll ueber dem Bild, deshalb eine zusaetzliche senkrechte Lage. Die Handschrift des Bereichs bleibt darunter erhalten. ---------- */ @media (max-width: 760px) { .ph-bg::before, .hero-slides::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,11,13,0.52) 0%, rgba(10,11,13,0.62) 55%, rgba(10,11,13,0.76) 100%); } } /* ---------- Stimmen-Sektion: gerichtet statt flach 90 % ---------- */ .testi-section { background-image: none; } .testi-section::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--bg-img); background-size: cover; background-position: center; background-attachment: fixed; filter: var(--fx-grade); } .testi-scrim { background: linear-gradient(104deg, rgba(10,11,13,0.96) 0%, rgba(10,11,13,0.88) 46%, rgba(10,11,13,0.74) 100%); } @media (max-width: 720px) { .testi-section::before { background-attachment: scroll; } } /* ---------- Unfall-Strecke: dringlich. Der eine Glut-Akzent der Startseite sitzt hier, nicht am Bild - die Sektion traegt kein Foto. ---------- */ #unfall { position: relative; isolation: isolate; } #unfall::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 120% at 100% 0%, rgba(232,66,10,0.14), rgba(232,66,10,0) 55%); } /* ---------- Karten- und Rahmenbilder bleiben unbehandelt ---------- Ausdruecklich keine Regel fuer .svc-media img, .tb-media img, .vehicle-card img, .post-card img, .gal img. Genau das bricht die Monotonie. */ /* ============================================================ Trefferflaechen — gemessen per Hit-Testing bei 375 px, nicht per getBoundingClientRect (Pseudo-Elemente und verdeckende Overlays faelschen das Rechteckmass). Projektregel: 44 x 44 px. ============================================================ */ /* Mobiles Menue: 12px Innenabstand ergaben nur 31 px Hoehe. */ @media (max-width: 860px) { .nav-links a { min-height: 44px; display: flex; align-items: center; } } /* Karussell-Pfeile: waren 40 px. Die Punkte daneben tragen ihre Flaeche ueber ::after { inset: -18px } = 44 px breit. Bei nur 18 px Abstand ragte diese Flaeche 4 px ueber den Pfeil und nahm ihm den Rand weg (per elementFromPoint nachgewiesen). Deshalb zusaetzlich der groessere Abstand. */ .testi-btn { width: 44px; height: 44px; } .testi-nav { gap: 26px; } /* Brotkrumen: bewusst NICHT auf 44 px aufgeblasen. Versuch und Messergebnis: mit min-height 44 wuchs der Linkkasten auf 68 px, ragte unter die H1 und war dort NICHT klickbar - die Trefferflaeche wurde dadurch schlechter statt besser. Die Zeile erfuellt mit ~31 px die WCAG-Vorgabe 2.5.8 AA (24 px) samt Abstandsausnahme; 44 px ist im Projekt fuer primaere Bedienelemente gesetzt, nicht fuer eine tertiaere Pfadzeile. Was bleibt: sauberer Abstand nach unten, damit sich nichts ueberlagert. */ .crumbs { align-items: center; } .crumbs a { display: inline-flex; align-items: center; padding-block: 6px; } /* Einverstaendnis-Haken: das Label traegt zwar den Klick, der Haken selbst war mit 23 px unter der AA-Mindestgroesse. */ .fn-consent input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; } /* ============================================================ Zweispalter Text + Bild (Kundenrunde 05.09.2026) „Bilder immer auf der selben Hoehe wie Fliesstexte und nicht sticky, Texte liegen lose in Containern ohne passende Anordnung." Vorher: Textspalte vertikal zentriert, Bild mit fixem 16:10 -> beide Kanten lagen auf unterschiedlicher Hoehe, und eine Spalte lief per JS mit. Jetzt bestimmt der Text die Hoehe, das Bild fuellt sie exakt aus. Die mitlaufende Spalte ist ersatzlos raus (main.js). ============================================================ */ @media (min-width: 961px) { .tb { align-items: stretch; gap: clamp(32px, 3.4vw, 56px); } /* Text: oben buendig, damit Ueberschrift und Bildoberkante eine Linie bilden */ .tb > .tb-copy.panel { justify-content: flex-start; } .tb-media { display: flex; margin: 0; } /* aspect-ratio kommt als Inline-Style aus layout.py und laesst sich nur mit !important schlagen. Hier gewollt: die Hoehe macht der Text. */ .tb-media img { height: 100%; aspect-ratio: auto !important; min-height: 300px; object-fit: cover; } } /* Bild und Panel sind nebeneinander -> gleicher Radius, sonst sieht es unsauber aus (Panel 14px gegen Bild 10px faellt genau in der Zeile auf, in der sie sich beruehren). */ .tb-media img { border-radius: var(--radius-panel, 14px); } @media (min-width: 961px) { } /* Innere Anordnung des Textblocks: Rhythmus statt loser Absaetze. Der erste Absatz traegt die Aussage und steht etwas groesser. */ .tb-copy > h2 { margin-bottom: 18px; } .tb-copy > p { margin-bottom: 0; } .tb-copy > p + p { margin-top: 14px; } .tb-copy > p:first-of-type { font-size: 1.06rem; line-height: 1.62; color: var(--text); } .tb-copy > p:empty { display: none; } /* leere Absaetze erzeugen sonst Geisterabstaende */ .tb-copy > .btn, .tb-copy > p:last-child:has(.btn) { margin-top: 22px; } @media (max-width: 960px) { .tb { gap: 28px; } .tb-media img { aspect-ratio: 16/10; } } /* ============================================================ Ratgeber-Artikel: gegliedert statt durchlaufend Vorher: eine graue Flaeche ueber ~1100 px reiner Fliesstext, kein Bild. Der Container bleibt (K3-Vorgabe: nichts steht blanko), aber er bekommt eine Anordnung: Lesespalte, abgesetzte Abschnitte, ein Bild am mittleren Zwischentitel. ============================================================ */ /* 82ch Panel war zu breit fuer eine Lesespalte. Jetzt bestimmt das Panel die Spalte, der Text fuellt sie ganz aus (sonst bleibt rechts ein toter Streifen) und das Bild spannt ueber die volle Spaltenbreite. */ .article-panel { max-width: 74ch; } .article-body { max-width: none; } /* Abschnitte sichtbar trennen, damit der Text nicht als eine Bahn liest */ .article-body h2 { margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--hairline, rgba(244,244,245,0.10)); } .article-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Erster Absatz traegt die Aussage */ .article-body > p:first-of-type { font-size: 1.08rem; line-height: 1.65; color: var(--text); } /* Bild im Artikel: volle Spaltenbreite, aus der Lesespalte ausbrechend */ .article-figure { margin: 34px 0 30px; max-width: none; } .article-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-panel, 14px); border: 1px solid var(--hairline, rgba(244,244,245,0.10)); } .article-figure figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--text-muted); padding-left: 12px; border-left: 1px solid rgba(249,154,64,0.45); } /* Info-/Listen-Zweispalter genauso: die Kopfspalte ist eine Flaeche, also traegt sie dieselbe Hoehe wie die Liste daneben. align-items:start liess einen kurzen Kasten neben einer langen Liste schweben. */ @media (min-width: 961px) { .split-wide { align-items: stretch; } .split-wide > .sec-head.panel { display: flex; flex-direction: column; justify-content: flex-start; } } /* Zeilenfuellung auf schmalen Schirmen: ohne Silbentrennung brechen deutsche Komposita zu frueh um und lassen bis zu 19 % der Zeile leer (gemessen bei 390 px auf /ratgeber/ und /ratgeber/inspektion/). Ueberschriften haben das schon (v2.css), der Fliesstext bekommt es hier. `lang="de"` steht am , sonst greift die Trennung nicht. */ @media (max-width: 760px) { .tb-copy p, .article-body p, .article-body li, .page-hero .lead, .panel p, .legal-body p { hyphens: auto; -webkit-hyphens: auto; } } /* Kartenrahmen: 3px Leuchtbalken war schwerer als die Akzentkante der Panels (2px). Vereinheitlicht, Glow raus - der Balken war das einzige Element dieser Machart auf der Seite. */ .map-frame::before { height: 2px; box-shadow: none; } /* ============================================================ EIN CONTAINER-KONZEPT (Kundenrunde 06.09.2026) „Container für alle Sektionen die sinn ergeben aber bitte im einheitlichen stil das wir das selbe container konzept für alle fahren." Gemessener Ausgangszustand: 30 Container-Bauarten, 3 Radien (10/14/16), 10 verschiedene Flaechenfarben, 13 verschiedene Paddings. Gewachsen, nicht entworfen. Ab hier gilt genau eine Bauart in drei Stufen: RUHIG (--box-bg) Standard: Textpanels, Infokaesten, Zeilenkarten ERHOBEN (--box-bg-2) Bildkarten, die ueber der Flaeche stehen AKZENT (--box-accent) genau die Elemente, die zur Handlung auffordern Radius, Rand und Innenabstand sind fuer alle drei identisch. Unterschieden wird ueber Flaeche und Inhalt, nicht ueber die Bauart. Bedienelemente (Knoepfe, Chips) haben ihren eigenen, kleineren Radius - ein Knopf ist kein Container. ============================================================ */ :root { --r-box: 14px; /* jeder Container */ --r-ctl: 10px; /* jedes Bedienelement */ --box-bg: #16171A; --box-bg-2: #1C1D20; --box-line: rgba(244, 244, 245, 0.10); --box-accent: rgba(249, 154, 64, 0.09); --box-accent-ln: rgba(249, 154, 64, 0.32); --box-pad: clamp(20px, 2.1vw, 28px); --box-pad-lg: clamp(28px, 3vw, 44px); } /* --- Radius: genau zwei Werte auf der ganzen Seite --- */ .svc-card, .vehicle-card, .post-card, .team-card, .panel, .article-panel, .funnel-aside, .cta-panel, .contact-card, .faq-card, .ray-card, .wf-card, .hero-tile, .fn-tile-box, .infobox, .funnel, .testi, .map-frame, .tl-card { border-radius: var(--r-box); } .btn, .chip, .filter-chip, .subnav a, .nav-links a { border-radius: var(--r-ctl); } /* --- Stufe RUHIG: der Normalfall --- */ .panel, .article-panel, .funnel-aside, .tb-copy.panel, .sec-head.panel, .contact-card, .faq-card, .ray-card, .wf-card, .hero-tile, .tl-card { background: var(--box-bg); border: 1px solid var(--box-line); } /* --- Stufe ERHOBEN: Karten mit Bild stehen ueber der Flaeche --- */ .svc-card, .vehicle-card, .post-card, .team-card, .testi { background: var(--box-bg-2); border: 1px solid var(--box-line); } /* --- Stufe AKZENT: fordert zur Handlung auf --- */ .infobox, .cta-panel, .sec-foot.center, .funnel, .fn-tile-box { background: var(--box-accent); border: 1px solid var(--box-accent-ln); } /* --- Innenabstand: zwei Werte, nicht dreizehn --- */ .contact-card, .ray-card, .wf-card, .hero-tile, .infobox, .tl-card { padding: var(--box-pad); } .panel, .article-panel, .funnel-aside, .tb-copy.panel, .sec-head.panel, .cta-panel, .sec-foot.center, .funnel, .testi { padding: var(--box-pad-lg); } /* Karten mit randlosem Bild: aussen 0, der Textteil traegt den Abstand */ .svc-card, .vehicle-card, .post-card, .team-card, .faq-card { padding: 0; } .svc-body, .vehicle-body, .post-body, .team-body { padding: var(--box-pad); } /* --- Abstaende zwischen Containern: die vorhandene Skala, nicht Handarbeit --- */ .svc-grid, .vehicle-grid, .post-grid, .team-grid, .why-grid, .xref-grid, .feature-cards, .contact-grid, .tl { gap: var(--sp-6); } @media (max-width: 760px) { .svc-grid, .vehicle-grid, .post-grid, .team-grid, .why-grid, .xref-grid, .feature-cards, .contact-grid, .tl { gap: var(--sp-5); } } /* --- Reste aus der alten Container-Vielfalt, gemessen und nachgezogen --- k2.css setzte auf Panels `border: 0 !important` (Stufe PANEL war damals ausdruecklich randlos). Ein einheitliches Konzept braucht denselben Rand ueberall, deshalb hier zurueckgeholt. */ .panel, .article-panel, .funnel-aside, .tb-copy.panel, .sec-head.panel, .faq-card { border: 1px solid var(--box-line) !important; } .funnel-aside, .faq-card { background: var(--box-bg); } .fn-tile-box { padding: var(--box-pad); } /* Bildraender liefen auf --line (0.08), Container auf --box-line (0.10). Ein Wert fuer alles, sonst flimmert die Kante nebeneinander. */ .tb-media img, .svc-media img, .article-figure img, .map-frame, .vehicle-card img, .post-card img, .team-card img { border-color: var(--box-line); } /* Ein Container steht immer EINE Stufe ueber seinem Grund. Auf dem hellen Wechselband (#141518) waeren --box-bg (#16171A) nur zwei Stufen Unterschied - praktisch unsichtbar. Statt einer Sonderfarbe je Element wird hier der Grund neu gesetzt, den Rest erbt jeder Container. */ .section-alt { --box-bg: #202126; --box-bg-2: #26272B; } /* ============================================================ ZEITSTRAHL (Kundenwunsch 06.09.2026: „Abläufe immer mit scroll-animiertem Zeitstrahl") Ein Bauteil fuer alle drei Ablaeufe: Unfall-Strecke, Werkstatt-Ablauf, Ablauf auf jeder Leistungsseite. Vorher waren das drei verschiedene Macharten (.ray / .wf-car-grid / .steps-v2). Die Fuellung steuert js/main.js ueber --tl (0..1). ============================================================ */ .tl { position: relative; list-style: none; margin: 0; padding: 0 0 0 76px; display: grid; gap: var(--sp-6); --tl: 1; /* ohne JS steht die Linie voll */ } .tl-rail { position: absolute; left: 27px; top: 18px; bottom: 18px; width: 2px; background: var(--box-line); border-radius: 2px; } .tl-fill { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--tl) * 100%); background: linear-gradient(180deg, var(--accent), #E8420A); border-radius: 2px; box-shadow: 0 0 14px rgba(249, 154, 64, 0.45); } .tl-marker { position: absolute; left: 50%; top: calc(var(--tl) * 100%); transform: translate(-50%, -50%); display: block; pointer-events: none; } /* Ohne eigenen Laeufer: leuchtender Kopf auf der Linie */ .tl-marker:empty::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(249, 154, 64, 0.18), 0 0 18px rgba(249, 154, 64, 0.8); } /* Eigener Laeufer (Auto von oben) faehrt den Ablauf entlang. ACHTUNG: .tl-marker sitzt in der 2px schmalen Schiene, und das globale `img { max-width: 100% }` misst gegen genau diese 2px - das Auto wurde dadurch auf 1x2 px gequetscht. Deshalb max-width und Breite explizit. */ .tl-marker { width: max-content; } .tl-marker img { width: 58px; max-width: none; height: auto; display: block; position: relative; z-index: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7)) drop-shadow(0 0 14px rgba(249,154,64,0.35)); } /* Warmer Schein unter dem Laeufer, sonst verschwindet ein dunkles Auto auf dunklem Grund */ .tl-marker:has(img)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(249,154,64,0.30), rgba(249,154,64,0) 68%); } .tl-step { position: relative; min-width: 0; } /* Grid-Elemente haben min-width:auto - ein langes Wort verhindert sonst das Schrumpfen und sprengt 320px */ .tl-card { min-width: 0; overflow-wrap: anywhere; } .tl-dot { position: absolute; left: -76px; top: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--box-bg); border: 1px solid var(--box-accent-ln); color: var(--accent); transition: border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .tl-dot .ic { width: 22px; height: 22px; } /* Mit JS: noch nicht erreichte Schritte sind ruhig. Ohne JS leuchten alle. */ .js .tl-step:not(.is-on) .tl-dot { border-color: var(--box-line); color: var(--text-dim); } .tl-step.is-on .tl-dot { box-shadow: 0 0 0 4px rgba(249, 154, 64, 0.10); } .tl-card { position: relative; } .tl-nr { position: absolute; top: 14px; right: 16px; font-family: Michroma, sans-serif; font-size: 0.86rem; letter-spacing: 0.04em; color: var(--text-muted); } .tl-step.is-on .tl-nr { color: var(--accent); } .tl-card h3 { margin-bottom: 6px; padding-right: 34px; } .tl-card p { color: var(--text-muted); } @media (max-width: 700px) { .tl { padding-left: 58px; gap: var(--sp-5); } .tl-rail { left: 21px; } .tl-dot { left: -58px; width: 44px; height: 44px; } } @media (max-width: 380px) { .tl { padding-left: 48px; } .tl-rail { left: 17px; } .tl-dot { left: -48px; width: 36px; height: 36px; } .tl-dot .ic { width: 16px; height: 16px; } .tl-dot .ic { width: 19px; height: 19px; } .tl-marker img { width: 36px; } } @media (prefers-reduced-motion: reduce) { .tl-dot { transition: none; } } /* ============================================================ FUSSZEILE (Kundenwunsch 06.09.2026) „Copyright links, rechts inglory badge und in der mitte die links für Impressum, Datenschutz und Design" Drei Spalten: die Mitte bleibt optisch mittig, auch wenn links und rechts unterschiedlich breit sind (1fr auto 1fr). ============================================================ */ .footer-bottom-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5); justify-content: initial; } .footer-bottom-inner .copyright { justify-self: start; text-align: left; } .footer-legal { justify-self: center; display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center; } .footer-legal a { color: var(--text-dim); font-size: 0.85rem; text-decoration: none; } .footer-legal a:hover { color: var(--accent); } .footer-bottom-inner .credit-badge { justify-self: end; } @media (max-width: 860px) { .footer-bottom-inner { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-4); text-align: center; } .footer-bottom-inner .copyright { justify-self: center; text-align: center; order: 3; } .footer-legal { order: 2; } .footer-bottom-inner .credit-badge { justify-self: center; order: 1; } } /* --- Auch die letzten randlosen Bloecke in dasselbe Konzept --- .why-card, .xref und die Versprechen-Liste liefen als Rollen-Variante „LISTE" (Haarlinie statt Kasten, K7). Neben lauter Containern lasen sie sich als vergessene Stellen. Kundenwunsch 06.09.2026: ein Konzept fuer alle. Die Abwechslung kommt jetzt ueber die Flaechenstufe und den Inhalt, nicht darueber, dass manche Bloecke gar keinen Kasten haben. */ .why-card, .xref, .promise-list > li { background: var(--box-bg); border: 1px solid var(--box-line); border-radius: var(--r-box); padding: var(--box-pad); border-top-width: 1px; } .why-card { border-top: 1px solid var(--box-line); } .promise-list { display: grid; gap: var(--sp-4); } .promise-list > li { border-top: 1px solid var(--box-line); } .xref { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; transition: border-color .25s var(--ease), background .25s var(--ease); } .xref:hover { border-color: var(--box-accent-ln); background: var(--box-bg-2); }