/* ============================================================================= PAGE-HERO — Header A "Unsichtbar" + Hero A "klar" ----------------------------------------------------------------------------- Woertlich aus index.html uebernommen, damit die Unterseiten NICHT nachgebaut, sondern dasselbe benutzen. Renes Ansage 12.08.2026: "bei den anderen soll hero genauso sein wie bei home, aktuell katastrophe". Die Begruendungen der einzelnen Entscheidungen stehen als Kommentare drin — sie sind Teil der Regel, nicht Dekoration. HINWEIS: index.html traegt diese Regeln noch inline. Beim naechsten Anfassen der Startseite dort entfernen und diese Datei einbinden, dann gibt es die Wahrheit nur einmal. Die Datei ist selbsttragend: alle var() haben Rueckfallwerte, damit sie auf Seiten funktioniert, denen einzelne Tokens fehlen (--gold fehlte z.B. auf auto-verkaufen-lassen, der Sand-Button war dadurch unsichtbar). Sie ueberschreibt nie, was die Seite selbst definiert. Voraussetzung auf der einbindenden Seite: - Tokens --edge / --page-max / --gut (kommen aus styles/footer.css) - Header-Markup:
mit .hd-logo/.hd-nav/.hd-cta/.hd-burger - Hero-Markup:
mit .hxA-media/.hxA-inner - Das Sentinel-Skript, das .is-scrolled setzt ============================================================================= */ /* ===== HERO A — zentriert (12.08.2026, nach Renes Entscheidung) ========== Gemeinsam fuer alle drei Visionen: Text steht auf der Mittelachse, waagrecht UND senkrecht. Begruendung: das Foto hat seinen Fluchtpunkt exakt in der Bildmitte. Ein Textblock unten links laeuft dieser Achse davon — deshalb wirkte er "unclean". Auf der Mittelachse verstaerken sich Bild und Text. Schrift bewusst hell (#F4F7FA statt #EDF1F5) fuer mehr Kontrastreserve. */ .hxeye{display:inline-flex;align-items:center;gap:13px;font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#D6DEE7} /* Rene 13.08., Korrektur: er meinte AUSSCHLIESSLICH die Ueber-uns-Sektion auf der Startseite, nicht die Heroes. Im Hero bleibt der Eyebrow mittig, mit Strich auf beiden Seiten. */ .hxeye::before,.hxeye::after{content:'';width:34px;height:1px;background:var(--gold,#c9a86a)} .hxh{font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-weight:800;color:#F4F7FA;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;word-break:normal;font-size:clamp(2.5rem,4.8vw,4.4rem);margin:24px auto 0;max-width:17ch} /* KLAR: kein Sand in der Headline. Begruendung ist nicht Geschmack, sondern Funktion — eine Akzentfarbe soll markieren, WO man klickt, nicht ein Wort schmuecken. Genau deshalb hat sich das Sand-Wort mit dem gelben M4 gestritten: zwei Signalfarben auf derselben Stelle. Gemessen lag das Wort bei 4,92:1 mit 15% gelbem Untergrund; in Weiss sind es 6,31:1. Das Sand steht jetzt nur noch auf "Fahrzeuge ansehen". */ .hxh span{color:#F4F7FA} .hxsub{color:#DCE3EA;font-weight:400;line-height:1.62;margin:22px auto 0;max-width:50ch;font-size:clamp(15px,1.25vw,17.5px)} .hxbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 28px;min-height:54px;border-radius:0;font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:13px;font-weight:700;letter-spacing:.03em;text-decoration:none;transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1)),background .3s,border-color .3s,color .3s} .hxbtn-p{background:var(--gold,#c9a86a);color:#0A0B0D} .hxbtn-p:hover{transform:translateY(-2px);background:#EFD9AE} .hxbtn-g{background:rgba(10,11,13,.42);color:#F4F7FA;border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(3px)} .hxbtn-g:hover{transform:translateY(-2px);border-color:#F4F7FA;background:rgba(10,11,13,.62)} .hxcta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:36px} /* Der Rahmen ist bei allen drei gleich — nur die Abdunklung unterscheidet sie */ .hxA{position:relative;min-height:86svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#08090B} .hxA-media{position:absolute;inset:0;z-index:0} .hxA-media img{width:100%;height:100%;object-fit:cover} /* Mit der Leiste mitgezogen: 88 -> 76, sonst saesse der Hero-Inhalt 12px tiefer als optisch mittig. */ .hxA-inner{position:relative;z-index:2;text-align:center;padding:calc(76px + 3vh) var(--edge,clamp(20px,4vw,56px)) 3vh;width:100%} @media(max-width:860px){.hxh{font-size:clamp(34px,9vw,46px);max-width:none}.hxsub{max-width:none}} @media(max-width:760px){} /* Mobile-Typo-Untergrenze 12px (Kampagne 14.08. abends, footer.css laedt VOR dieser Datei - deshalb steht die Eyebrow-Regel hier). */ @media(max-width:768px){.hxeye{font-size:12px;letter-spacing:.2em} /* Ankauf-Stationen: Eyebrow "Autoankauf · Ort" doppelt die H1 direkt darunter ("Autoankauf Ort.") - auf dem Handy fliegt sie raus (Renés "alle Heroes sehr klambi, sehr voll"). */ .hxeye.eye-mobile-out{display:none}} /* --- Seiten-Feinjustagen aus Renés Handy-Review, zweite Runde (14.08.). Ueber das aria-label des Hero-Abschnitts gescoped, damit alles in der Datei liegt, die .hxA besitzt (Lade-Reihenfolge!). --- */ /* Kontakt: "Hero-Bild ein bisschen dunkel, nicht viel." */ .hxA[aria-label="Kontakt"] .hxA-media::after{opacity:.86} /* Garantie: "zu mittig - weiter nach links, damit das Audi-Lenkrad nicht so abgeschnitten ist." */ @media(max-width:900px){ .hxA[aria-label="Garantie"] .hxA-media img{object-position:30% 52%} /* Auto verkaufen lassen: "Der Hintergrund strahlt zu extrem, weil das Gelbe im Vierer so strahlt." Zusaetzliche ruhige Abdunklung nur mobil. */ .hxA[aria-label="Auto verkaufen lassen"] .hxA-media::before{ content:'';position:absolute;inset:0;z-index:1;background:rgba(7,8,9,.32)} } /* --- A1 "Schleier": ein gleichmaessiger dunkler Schleier ueber dem ganzen Bild, dazu eine leichte Vignette zu den Raendern. Warum: die Lesbarkeit ist an JEDER Stelle gleich — egal wie lang die Headline spaeter wird oder wie das Bild spaeter mal getauscht wird. Das Foto wird zur Atmosphaere, nicht zum Wettbewerber. Ruhigste und barrierefreieste der drei. --- */ .hxA1 .hxA-media img{object-position:50% 52%} /* Die Abdunklung hat jetzt ein HELLERES FENSTER genau ueber dem Fahrzeugband (44-56% Hoehe). Begruendung: die Headline ist grosse Schrift und braucht nur 3:1, Eyebrow und Fliesstext brauchen 4,5:1 — und die liegen knapp ober- und unterhalb der Autos. Also darf genau dort aufgehellt werden, wo die Autos stehen. Erste Fassung hatte den M4 auf 49/255 erstickt (Renes Kritik an A3).*/ .hxA1 .hxA-media::after{content:'';position:absolute;inset:0; background:radial-gradient(88% 50% at 50% 50%,rgba(6,7,9,.08) 0%,rgba(6,7,9,.05) 58%,rgba(6,7,9,0) 100%), linear-gradient(180deg,rgba(6,7,9,.84) 0%,rgba(6,7,9,.74) 30%,rgba(6,7,9,.72) 38%,rgba(6,7,9,.47) 44%,rgba(6,7,9,.50) 53%,rgba(6,7,9,.76) 59%,rgba(6,7,9,.80) 66%,rgba(6,7,9,.92) 100%), radial-gradient(120% 85% at 50% 50%,rgba(6,7,9,0) 30%,rgba(6,7,9,.55) 100%)} /* ===== HEADER-REDESIGN (12.08.2026) ======================================= Grundlage: Messungen an apple.com, porsche.com, polestar.com. Kernbefunde, die hier umgesetzt sind: - Diese drei Seiten haben zusammen NULL text-transform:uppercase im Header-CSS. Unsere gesperrten Versal-Links sind Stil von ~2015. - Unsere Leiste war 88px hoch — hoeher als Porsches groesster Breakpoint (82px), doppelt so hoch wie Apple (44px). - Logo:Navigation war 46px:11px = 4,2:1. Bei Apple 1,2:1. - rgba(23,23,23,.95) ist HELLER als die Seite (#0A0B0D) — die Leiste schwamm als graues Rechteck ueber dem Bild statt zu verschwinden. - "Startseite" ist gestrichen: das Logo IST der Home-Link. ===== */ :root{ --sand:#c9a86a; --sand-muted:#B99A5F; --sand-line:rgba(201,168,106,.40); --sand-glow:rgba(201,168,106,.08); /* Variante E, Rene 13.08.2026. Vorher rgba(255,255,255,.72). Nachgemessen an fuenf Referenzen (Porsche, Ferrari, Polestar, Apple, Tom Hartley Jnr): vier von fuenf setzen die Navigation auf 100 % Deckkraft, nur Apple dimmt auf 80. Unsere 72 % waren der niedrigste Wert im Feld — DAS war der Grund, warum die Leiste duenn wirkte, nicht die Strichstaerke. */ --ink:#fff; --ink-strong:#fff; --ink-muted:rgba(255,255,255,.45); --hairline:rgba(255,255,255,.07); --bar-bg:rgba(10,11,13,.72); --bar-blur:blur(18px) saturate(140%); --nav-size:15px; --nav-gap:34px; } @supports not (backdrop-filter:blur(1px)){ :root{ --bar-bg:rgba(10,11,13,.94) } } nav{all:unset} .hd{position:fixed;inset:0 0 auto 0;z-index:300;display:flex;align-items:center; padding-inline:var(--edge,clamp(20px,4vw,56px));box-sizing:border-box} .hd-logo{display:flex;align-items:center;flex-shrink:0} /* 40 -> 32 px (Variante E). Ferrari 25, Polestar 24 — unser Logo war groesser als bei beiden und liess die Navigation daneben klein wirken. */ .hd-logo img{height:32px;width:auto;display:block;transition:height .22s var(--ease,cubic-bezier(.22,1,.36,1))} .hd-nav{display:flex;align-items:center;gap:var(--nav-gap);margin-inline-start:auto} /* Renes Beobachtung 12.08.: "die Schriftart ist eine andere im Header, weil es nicht fett geschrieben ist ... schaut ganz anders aus und nicht einheitlich zu der Website." Nachgemessen: er hatte recht. Der Header war die EINZIGE Stelle der Seite, die die Fliesstext-Schrift (DM Sans 500) fuer Bedienelemente benutzt hat — Eyebrows, Buttons, Ueberschriften und Footer laufen alle auf Plus Jakarta Sans 700/800. Das kam aus der Apple-Messung ("0 Versalien, 12px, 400"): ich hatte deren Vorgehen uebernommen, aber damit auch deren Schriftrolle. Jetzt die Hausschrift, halbfett. Die Modernisierung bleibt — keine Versalien, keine 15%-Sperrung wie frueher. */ /* 600 -> 500 (Variante E). Keine der fuenf Referenzen benutzt eine fette Navigation, alle liegen bei 400. Die Hausschrift bleibt — Renes Kritik vom 12.08. war die FREMDE Schrift (DM Sans), nicht die Staerke. 500 statt 400, damit die Leiste zum uebrigen Plus-Jakarta-Auftritt passt. */ .hd-nav a{font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:var(--nav-size);font-weight:500; letter-spacing:-.005em;text-transform:none;color:var(--ink);text-decoration:none; position:relative;padding-block:6px;transition:color .18s var(--ease,cubic-bezier(.22,1,.36,1))} /* Alle Links stehen jetzt auf 100 %. Die aktive Seite unterscheidet sich ueber den Sand-Strich darunter, der Hover ueber die Sand-Farbe — nicht mehr ueber Helligkeitsstufen. */ .hd-nav a:hover{color:var(--sand)} .hd-nav a[aria-current]{color:var(--ink-strong)} .hd-nav a[aria-current]::after{content:'';position:absolute;left:50%;transform:translateX(-50%); bottom:-8px;width:14px;height:1px;background:var(--sand)} /* Tippziel 44x44 (Apple HIG / WCAG 2.5.5). Vorher ergab padding:8px nur 38x31 - das meistgenutzte Bedienelement auf dem Handy war zu klein. Die Balken bleiben 22px breit und mittig, also sieht der Header unveraendert aus; margin-inline-end:-3px haelt sie an derselben Position wie vorher, weil der Knopf rechts buendig steht. */ .hd-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column; align-items:center;justify-content:center;gap:5px;padding:0; min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent} .hd-burger span{display:block;width:22px;height:1.5px;background:var(--ink-strong)} @media(max-width:900px){.hd-nav,.hd-tel{display:none} .hd-burger{display:flex;margin-inline-start:auto;margin-inline-end:-3px} /* Das Logo ist der Weg zurueck zur Startseite und war nur 32px hoch. */ .hd-logo{min-height:44px;-webkit-tap-highlight-color:transparent} /* Rene 14.08., zweite Runde: "Das Kontakt sollte komplett raus, ist komplett fehl am Platz. Das Hamburger-Menue muss komplett rechts sein." Mobil traegt der Header nur noch Logo + Burger; der Kontakt-Weg steht im Menue an erster Stelle des Fusses. */ .hd-cta{display:none}} /* --- A: Ueber dem Hero gibt es keine Leiste, nur schwebende Elemente. Beim Scrollen kondensiert der Header. Genau das Muster faehrt Porsche produktiv (phn-header[mode=hero] laeuft auf position:absolute ohne Hintergrund) und Apple (.globalnav-scrim wird erst beim Scrollen zugeschaltet). Der CTA ist ein Textlink mit Pfeil — kein Kasten, keine Flaeche. --- */ /* 88 -> 76 px (Variante E). Die Referenzen liegen zwischen 40 (Ferrari) und 82 (Porsche); 88 war das obere Ende des Feldes. */ .hd{height:76px;background:transparent;border-bottom:1px solid transparent; transition:height .22s var(--ease,cubic-bezier(.22,1,.36,1)),background-color .22s var(--ease,cubic-bezier(.22,1,.36,1)),border-color .22s var(--ease,cubic-bezier(.22,1,.36,1))} .hd.is-scrolled{height:64px;background:var(--bar-bg); -webkit-backdrop-filter:var(--bar-blur);backdrop-filter:var(--bar-blur); border-bottom-color:var(--hairline)} .hd.is-scrolled .hd-logo img{height:28px} /* Kontakt auf dieselbe Groesse und Staerke wie die Navigation. Der eine Pixel Unterschied (16 gegen 15) war zu sehen und nicht zu begruenden. */ .hd-cta{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:4px; margin-inline-start:30px;font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:15px;font-weight:500; letter-spacing:-.005em;color:var(--sand);text-decoration:none} .hd-cta svg{transition:transform .2s var(--ease,cubic-bezier(.22,1,.36,1))} .hd-cta:hover{color:#D9BE86} .hd-cta:hover svg{transform:translateX(3px)} /* Muss NACH der Basisregel stehen (Reihenfolge schlaegt sonst den Media-Block weiter oben - D-59): mobil traegt der Header nur Logo und Burger, der Kontakt-Weg steht im Menue (Rene, zweite Runde). */ @media(max-width:900px){.hd-cta{display:none}} /* Verlauf am HERO, nicht am Header — so bleibt die Leiste wirklich unsichtbar und der Text oben trotzdem lesbar (WCAG: an der hellsten Bildstelle messen) */ .hxA::before{content:'';position:absolute;inset:0 0 auto 0;height:190px;z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.34) 45%,rgba(0,0,0,0) 100%); pointer-events:none} /* --- Variante fuer HELLE Hero-Bilder ------------------------------------- */ /* Rene zu auto-verkaufen-lassen: "Schaut echt gut aus, allerdings zu hell. Die Schrift ist nicht ganz lesbar im Kontrast mit dem Hintergrund." Nachgemessen: die Headline lag dort bei 3,56:1 — sie besteht als Grosstext (Grenze 3,0), hat aber die geringste Reserve aller Seiten. Home liegt bei 6,31. Ursache: bei diesem Bild liegt die helle Zone (Hallenfenster) genau auf 40-58% Hoehe, also hinter der Headline. Der Standard-Verlauf hat dort ein bewusst HELLERES Fenster, weil bei Home an dieser Stelle die dunklen Autos stehen. Diese Variante zieht das Fenster zu: Headline 3,57 -> 6,83. Die mittlere Deckung steigt dabei nur von 93% auf 96% — das Bild bleibt sichtbar. Anwenden auf jeder Seite, deren Hero-Bild im mittleren Band hell ist. */ .hxA1.hxA-dim .hxA-media::after{ background:radial-gradient(88% 50% at 50% 50%,rgba(6,7,9,.08) 0%,rgba(6,7,9,.05) 58%,rgba(6,7,9,0) 100%), linear-gradient(180deg,rgba(6,7,9,.84) 0%,rgba(6,7,9,.74) 30%,rgba(6,7,9,.74) 38%,rgba(6,7,9,.66) 44%,rgba(6,7,9,.68) 53%,rgba(6,7,9,.80) 59%,rgba(6,7,9,.83) 66%,rgba(6,7,9,.92) 100%), radial-gradient(120% 85% at 50% 50%,rgba(6,7,9,0) 30%,rgba(6,7,9,.55) 100%)}