/* =========================================================== SSW Automobile Wasungen — "Nachtschicht an der B19" Design-System nach bau-brief.md. Handgeschrieben, kein Build. =========================================================== */ /* ---------- Fonts (self-hosted, DSGVO) ---------- */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); } @font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/wix-madefor-display-700.woff2") format("woff2"); } @font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/wix-madefor-display-800.woff2") format("woff2"); } /* ---------- Tokens ---------- */ :root { /* Palette aus dem Kundenlogo gesampelt (§0e-14b: das Logo fuehrt). SSW-Logo: #0062A8 blau (dominant) + #FCC400 gelb. Die echten Fotos tragen dasselbe Blau (#0054C4/#0062C4) - deshalb sind die Neutrals kuehl-blau statt warm-braun: sonst kaempft der Grund gegen die Bilder. */ --nacht: #070c14; --asphalt: #0e1520; --asphalt-2: #16202e; --asphalt-3: #223042; --marke: #0062a8; --marke-tief: #00549a; --marke-hell: #8cc4ee; --signal: #fcc400; --signal-tief: #c4a400; --licht: #edf2f7; --dunst: #97a6b8; --linie: rgba(237, 242, 247, 0.11); --linie-stark: rgba(237, 242, 247, 0.24); /* Theme-Schaltstellen. Alles hier drunter kippt im Hellmodus mit, alles darueber ist die Nachtpalette (Standard). */ --tinte: #07121c; /* Text auf Gelb/hellen Flaechen - kippt NIE */ --platte: #edf2f7; /* Grund hinter Fremdlogos - kippt NIE */ --akzent-txt: var(--signal); /* Gelb als TEXT: auf Weiss unlesbar */ --hauch: rgba(237, 242, 247, 0.06); --nav-flor: rgba(7, 12, 20, 0.92); --menue-flor: #070c14; --schema: dark; /* fuer Formularfelder/Scrollbars */ color-scheme: dark; --seite-licht: #edf2f7; --seite-dunst: #97a6b8; --seite-akzent-txt: #fcc400; --seite-linie: rgba(237, 242, 247, 0.11); --seite-linie-stark: rgba(237, 242, 247, 0.24); --t-display: clamp(3.4rem, 11.5vw, 9.5rem); --t-statement: clamp(2.6rem, 7vw, 6rem); --t-h2: clamp(2rem, 4.4vw, 3.6rem); --t-h3: clamp(1.25rem, 2vw, 1.7rem); --t-body: clamp(1.02rem, 1.15vw, 1.16rem); --t-daten: 1.3rem; --t-klein: 0.82rem; --r-eng: 3.4rem; /* kompressiv */ --r-std: clamp(6rem, 9vw, 9rem); /* Standard */ --r-weit: clamp(10rem, 16vw, 16rem); /* sehr weit */ --maxw: 1440px; --pad: clamp(1.25rem, 5vw, 5rem); --ease: cubic-bezier(0.23, 1, 0.32, 1); --display: "Wix Madefor Display", system-ui, sans-serif; --body: "Barlow", system-ui, sans-serif; } /* =========================================================== TAGSCHICHT — heller Modus Dieselbe Seite bei Tageslicht: kuehl-blaue Neutrals aus dem Logo, Blau tiefer (Kontrast auf Weiss), Gelb bleibt Gelb. Umschalter: data-theme="hell" am . Ohne Attribut entscheidet die Systemeinstellung des Besuchers. =========================================================== */ :root[data-theme="hell"] { --nacht: #dfe7f0; --asphalt: #f4f7fb; --asphalt-2: #ffffff; --asphalt-3: #e5ecf4; --marke: #005490; --marke-tief: #003f6e; --marke-hell: #005490; --licht: #0b1724; --dunst: #4b5d73; --linie: rgba(11, 23, 36, 0.14); --linie-stark: rgba(11, 23, 36, 0.3); --akzent-txt: #6f5400; /* Gelb als Text waere auf Weiss unlesbar */ --hauch: rgba(11, 23, 36, 0.05); --nav-flor: rgba(255, 255, 255, 0.93); --menue-flor: #f4f7fb; --schema: light; color-scheme: light; --seite-licht: #0b1724; --seite-dunst: #4b5d73; --seite-akzent-txt: #6f5400; --seite-linie: rgba(11, 23, 36, 0.14); --seite-linie-stark: rgba(11, 23, 36, 0.3); } @media (prefers-color-scheme: light) { :root:not([data-theme="dunkel"]) { --nacht: #dfe7f0; --asphalt: #f4f7fb; --asphalt-2: #ffffff; --asphalt-3: #e5ecf4; --marke: #005490; --marke-tief: #003f6e; --marke-hell: #005490; --licht: #0b1724; --dunst: #4b5d73; --linie: rgba(11, 23, 36, 0.14); --linie-stark: rgba(11, 23, 36, 0.3); --akzent-txt: #6f5400; --hauch: rgba(11, 23, 36, 0.05); --nav-flor: rgba(255, 255, 255, 0.93); --menue-flor: #f4f7fb; --schema: light; color-scheme: light; --seite-licht: #0b1724; --seite-dunst: #4b5d73; --seite-akzent-txt: #6f5400; --seite-linie: rgba(11, 23, 36, 0.14); --seite-linie-stark: rgba(11, 23, 36, 0.3); } } /* Dunkel-Inseln: Buehnen mit Bild/Video darunter bleiben in BEIDEN Modi dunkel — sonst kaempft dunkler Text gegen ein Nachtvideo. */ .head, .bleed, .fix, .nav:not(.nav--fest) { --licht: #edf2f7; --dunst: #b7c4d3; --akzent-txt: #fcc400; --asphalt-3: #223042; --linie: rgba(237, 242, 247, 0.14); --linie-stark: rgba(237, 242, 247, 0.3); color: var(--licht); } /* Das offene Mobilmenue hat einen eigenen, deckenden Grund und folgt deshalb wieder dem Seitenmodus — nicht der Buehne dahinter. */ .nav .nav__links.offen { --licht: var(--seite-licht); --dunst: var(--seite-dunst); --akzent-txt: var(--seite-akzent-txt); --linie: var(--seite-linie); --linie-stark: var(--seite-linie-stark); color: var(--licht); } /* Hell-Insel: die Preistafel ist bewusst der helle Tonbruch. */ .tafel { --licht: #0b1724; --dunst: #4b5d73; --akzent-txt: #6f5400; --linie: rgba(11, 23, 36, 0.14); --linie-stark: rgba(11, 23, 36, 0.3); } /* ---------- Lichtschalter ---------- */ .licht { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .licht:hover { background: var(--hauch); } .licht:active { transform: scale(0.94); } .licht svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Genau ein Symbol pro Modus: gezeigt wird, wohin der Klick fuehrt. */ .licht__mond { display: none; } :root[data-theme="hell"] .licht__sonne { display: none; } :root[data-theme="hell"] .licht__mond { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme="dunkel"]) .licht__sonne { display: none; } :root:not([data-theme="dunkel"]) .licht__mond { display: block; } } /* Logo-Paar: auf dunklem Grund die helle Fassung, auf hellem die dunkle. */ /* Kundenwunsch Stefan Schroeder 19.08.2026: statt des Altseiten-Schriftzugs steht jetzt die echte Wort-Bild-Marke oben links. Sie bringt ihren eigenen blauen Grund mit und braucht darum keine Hell-/Dunkel-Fassung mehr. */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--asphalt); color: var(--licht); font-family: var(--body); font-size: var(--t-body); line-height: 1.62; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 0.94; letter-spacing: -0.03em; text-wrap: balance; } p { max-width: 64ch; } ::selection { background: var(--signal); color: var(--tinte); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } /* ---------- Bausteine ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .sekt { padding-block: var(--r-std); } .sekt--eng { padding-block: var(--r-eng); } .sekt--weit { padding-block: var(--r-weit); } /* ⭐ Das B19-Schild — Signature-Device (Kapitelmarke, Nav-Aktiv, Listenpunkt) */ .b19 { display: inline-block; background: var(--signal); color: var(--tinte); font-family: var(--display); font-weight: 800; font-size: 0.78em; letter-spacing: 0.02em; line-height: 1; padding: 0.34em 0.5em 0.3em; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.82); font-variant-numeric: tabular-nums; } .kapitel { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 2.2rem; } .kapitel__txt { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.17em; font-weight: 600; color: var(--dunst); } .eyebrow { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.17em; font-weight: 600; color: var(--akzent-txt); display: block; margin-bottom: 1.1rem; } .lead { color: var(--dunst); font-size: clamp(1.06rem, 1.4vw, 1.24rem); max-width: 56ch; margin-top: 1.5rem; } .daten { font-size: var(--t-daten); font-weight: 600; font-variant-numeric: tabular-nums; } .klein { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--dunst); } /* CTA */ .cta { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--signal); color: var(--tinte); font-weight: 600; font-size: 1.02rem; padding: 1rem 1.7rem; border-radius: 3px; transition: transform 0.2s var(--ease), background 0.2s var(--ease); } .cta:hover { background: #ffda2a; } .cta:active { transform: scale(0.98); } .cta--linie { background: transparent; color: var(--licht); box-shadow: inset 0 0 0 1px var(--linie-stark); } .cta--linie:hover { background: var(--hauch); } .tel { font-family: var(--display); font-weight: 700; font-size: 1.24rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ---------- Navigation ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background 0.3s var(--ease); } .nav--fest { background: var(--nav-flor); border-bottom: 1px solid var(--linie); } /* Der Blur MUSS auf der Pseudo-Ebene sitzen: backdrop-filter auf .nav selbst macht die Leiste zum Containing Block fuer das position:fixed-Mobilmenue — das Menue schrumpft dann auf Nav-Hoehe und blutet ueber den Inhalt. */ .nav--fest::after { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(10px); pointer-events: none; } .nav__in { max-width: var(--maxw); margin-inline: auto; padding: 0.85rem var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav__logo { display: flex; align-items: center; } .nav__logo img { height: 64px; width: auto; border-radius: 12px; display: block; } .nav__links { display: flex; gap: 1.6rem; align-items: center; } .nav__links a { font-size: 0.94rem; font-weight: 500; color: var(--dunst); transition: color 0.2s; position: relative; padding-block: 0.3rem; } .nav__links a:hover { color: var(--licht); } .nav__links a[aria-current="page"] { color: var(--licht); font-weight: 700; } .nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--signal); border-radius: 2px; } .nav__tel { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.95rem; white-space: nowrap; } .burger { display: none; background: none; border: 0; color: var(--licht); width: 44px; height: 44px; cursor: pointer; } .burger span { display: block; height: 2px; background: currentColor; margin: 5px auto; width: 24px; transition: 0.3s var(--ease); } /* ---------- Hero / Head ---------- */ .head { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .head--sub { min-height: 74svh; } .head__media { position: absolute; inset: 0; z-index: 0; } .head__media img, .head__media video { width: 100%; height: 100%; object-fit: cover; } .head__media video { position: absolute; inset: 0; } .head::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Das Hero-Motiv ist jetzt ein helles Tagesbild der echten Tankstelle - der Verlauf muss deutlich kraeftiger sein als ueber dem alten Nachtclip, sonst verliert die weisse Headline ihren Kontrast. */ background: linear-gradient( to top, rgba(7, 12, 20, 0.96) 0%, rgba(7, 12, 20, 0.82) 30%, rgba(7, 12, 20, 0.5) 58%, rgba(7, 12, 20, 0.3) 100% ), linear-gradient( to right, rgba(7, 12, 20, 0.72) 0%, rgba(7, 12, 20, 0.34) 52%, rgba(7, 12, 20, 0.08) 100% ); } .head__in { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; /* Oben Platz fuer die Nav: auf niedrigen Viewports schob sich die erste H1-Zeile sonst UNTER das Logo (Kontrast-Messung 14.08.2026, index 1,9:1 — Text-Pixel vor dem Logo). flex-end + padding-top laesst den Head im Kollisionsfall wachsen statt kollidieren. */ padding: clamp(4.8rem, 10vh, 6.5rem) var(--pad) clamp(2.5rem, 5vw, 4rem); } .head__h1 { font-size: var(--t-display); margin-bottom: 1.6rem; } .head__h1 .zeile { display: block; overflow: hidden; } .head__h1 .zeile > span { display: block; } .head__sub { font-size: clamp(1.06rem, 1.5vw, 1.3rem); color: var(--licht); max-width: 46ch; margin-bottom: 2rem; } .head__akt { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; } /* Fakten-Leiste am Fuß des Heads */ .fakten { position: relative; z-index: 2; border-top: 1px solid var(--linie-stark); background: rgba(7, 12, 20, 0.5); backdrop-filter: blur(6px); } .fakten__in { max-width: var(--maxw); margin-inline: auto; padding: 1.1rem var(--pad); display: flex; flex-wrap: wrap; gap: 1rem 2.8rem; align-items: center; } .fakt { display: flex; align-items: baseline; gap: 0.6rem; } .fakt__w { font-family: var(--display); font-weight: 700; font-size: var(--t-daten); font-variant-numeric: tabular-nums; } .fakt__l { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.15em; color: var(--dunst); font-weight: 600; } /* ---------- Stunden-Register (Layout-System) ---------- */ .reg { border-top: 1px solid var(--linie); } .reg__zeile { display: grid; grid-template-columns: auto 1fr minmax(0, 42%); gap: 0 clamp(1.5rem, 4vw, 3.5rem); align-items: center; border-bottom: 1px solid var(--linie); padding-block: var(--r-eng); position: relative; } .reg__nr { align-self: start; padding-top: 0.4rem; } .reg__txt h3 { font-size: var(--t-h3); margin-bottom: 0.7rem; letter-spacing: -0.02em; } .reg__txt p { color: var(--dunst); max-width: 44ch; } .reg__zeit { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.1rem; font-variant-numeric: tabular-nums; } .reg__zeit b { font-family: var(--display); font-weight: 700; font-size: 1.16rem; } .reg__bild { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 3px; } .reg__bild img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); } .reg__zeile:hover .reg__bild img { transform: scale(1.02); } .reg__bild img { transition: transform 0.7s var(--ease); } .reg__mehr { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--akzent-txt); font-weight: 600; font-size: 0.95rem; margin-top: 1rem; } .reg__mehr::after { content: "→"; transition: transform 0.25s var(--ease); } .reg__zeile:hover .reg__mehr::after { transform: translateX(5px); } /* ---------- Bleed-Statement (Layout-Bruch) ---------- */ .bleed { position: relative; min-height: 86svh; display: flex; align-items: center; overflow: hidden; } .bleed__bg { position: absolute; inset: -12% 0; z-index: 0; } .bleed__bg img { width: 100%; height: 100%; object-fit: cover; } .bleed::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 105deg, rgba(7, 12, 20, 0.92) 8%, rgba(7, 12, 20, 0.55) 52%, rgba(7, 12, 20, 0.2) 100% ); } .bleed__in { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); width: 100%; } .bleed__h { font-size: var(--t-statement); max-width: 62%; } .bleed__q { margin-top: 1.8rem; color: var(--licht); max-width: 44ch; font-size: 1.1rem; } /* ---------- Editorial (Marginalie + Überlappung) ---------- */ .edi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; } .edi__marg { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.16em; color: var(--akzent-txt); font-weight: 600; margin-bottom: 1.4rem; } .edi__h { font-size: var(--t-h2); margin-bottom: 1.7rem; } .edi__txt p + p { margin-top: 1.1rem; } .edi__bild { position: relative; } .edi__bild img { width: 100%; border-radius: 3px; } .edi__bild::after { content: ""; position: absolute; left: -1.5rem; bottom: -1.5rem; width: 42%; height: 38%; background: var(--signal); z-index: -1; border-radius: 3px; } /* ---------- Tafel (heller Tonbruch, nur werkstatt.html) ---------- */ .tafel { background: var(--platte); color: var(--tinte); } .tafel h2, .tafel h3 { color: var(--tinte); } .tafel .klein, .tafel .lead { color: #4a5563; } .tafel__reihe { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 1.15rem; border-bottom: 1px solid rgba(20, 19, 14, 0.13); } .tafel__preis { font-family: var(--display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .tafel__stand { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.14em; color: #6b675c; margin-top: 1.4rem; font-weight: 600; } /* .grid-karten entfernt 13.08.2026: Das eine Card-Grid der Seite gehoert jetzt dem Fahrzeugbestand (.flotte), die Garantiepakete stehen im Hairline-Register. */ .karte { background: var(--asphalt-2); border: 1px solid var(--linie); border-radius: 3px; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease); } .karte:hover { border-color: var(--linie-stark); transform: translateY(-3px); } .karte__bild { aspect-ratio: 16/11; overflow: hidden; } .karte__bild img { width: 100%; height: 100%; object-fit: cover; } .karte__in { padding: 1.4rem; } .karte h3 { font-size: 1.2rem; margin-bottom: 0.6rem; } .karte p { color: var(--dunst); font-size: 0.98rem; } /* ---------- Horizontale Sequenz ---------- */ .seq { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.4rem; -webkit-overflow-scrolling: touch; } .seq::-webkit-scrollbar { height: 3px; } .seq::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 2px; } .seq__el { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; background: var(--asphalt-2); border: 1px solid var(--linie); border-radius: 3px; padding: 1.6rem; } .seq__el h3 { font-size: 1.16rem; margin-bottom: 0.7rem; } .seq__el p { color: var(--dunst); font-size: 0.97rem; } .seq__preis { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--akzent-txt); margin-top: 1.1rem; font-variant-numeric: tabular-nums; } /* ---------- Hairline-Liste ---------- */ .liste { border-top: 1px solid var(--linie); } .liste li { list-style: none; border-bottom: 1px solid var(--linie); padding-block: 1.15rem; display: flex; gap: 1.2rem; align-items: baseline; } .liste li::before { content: ""; flex: 0 0 22px; height: 2px; background: var(--signal); transform: translateY(-4px); } /* ---------- Kontaktband ---------- */ .band { background: var(--nacht); border-top: 1px solid var(--linie); } .band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem; } .band__sp h3 { font-size: 1.05rem; margin-bottom: 0.9rem; font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: uppercase; font-size: var(--t-klein); letter-spacing: 0.15em; color: var(--dunst); } .band__sp a.tel { display: block; margin-bottom: 0.5rem; } .band__zeit { font-size: 0.95rem; color: var(--dunst); font-variant-numeric: tabular-nums; } /* ---------- Zeiten-Matrix ---------- */ .matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .matrix th, .matrix td { text-align: left; padding: 1rem 1.2rem; border-bottom: 1px solid var(--linie); } .matrix thead th { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.15em; color: var(--dunst); font-weight: 600; } .matrix tbody th { font-weight: 600; font-size: 1.02rem; } .matrix td { font-size: 1.02rem; color: var(--licht); } .matrix td.zu { color: var(--dunst); } /* ---------- Footer ---------- */ .fuss { background: var(--nacht); border-top: 1px solid var(--linie); padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .fuss__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; } /* Kundenwunsch Stefan Schroeder 19.08.2026: Social-Media-Kontakte in der Fusszeile, neben Servicebereiche und Betrieb. */ .fuss__social { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; } .fuss__social a { display: block; width: fit-content; padding-block: 0.32rem; min-height: 24px; } .fuss__logo { display: inline-flex; margin-bottom: 1.3rem; } .fuss__logo img { height: 72px; width: auto; border-radius: 10px; display: block; } .fuss h4, .fuss__grid h2 { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.15em; color: var(--dunst); font-family: var(--body); font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.15em; } .fuss a { color: var(--dunst); /* Kundenwunsch Stefan Schroeder 18.08.2026: die Aufzaehlungen stehen untereinander, nicht nebeneinander. Zuvor zog die Trefferhoehen-Regel weiter unten sie auf inline-block — die 24px bleiben hier erhalten. */ display: block; width: fit-content; padding-block: 0.32rem; min-height: 24px; transition: color 0.2s; } .fuss a:hover { color: var(--licht); } .fuss__unten { border-top: 1px solid var(--linie); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: 0.9rem; color: var(--dunst); } .siegel { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.6rem; } .siegel img { height: 46px; width: auto; background: var(--platte); border-radius: 3px; padding: 0.35rem 0.5rem; } /* ---------- Fixe Kontakt-Buttons (§0e-12: IMMER sichtbar) ---------- */ .fix { position: fixed; right: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1rem, 2vw, 1.6rem); z-index: 70; display: flex; flex-direction: column; gap: 0.7rem; } .fix a { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--tinte); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5); transition: transform 0.2s var(--ease); } .fix a:hover { transform: scale(1.06); } .fix a.fix--dunkel { background: var(--asphalt-3); color: var(--licht); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--linie-stark); } .fix svg { width: 24px; height: 24px; fill: currentColor; } body { padding-bottom: 0; } .fuss { padding-bottom: clamp(6rem, 9vw, 7rem); } /* Platz statt Button verstecken */ /* ---------- Reveals ---------- */ .rv { opacity: 0; transform: translateY(26px); } .wipe { clip-path: inset(100% 0 0 0); } /* ---------- Mobil ---------- */ @media (max-width: 1000px) { .edi { grid-template-columns: 1fr; gap: 2.5rem; } .bleed__h { max-width: 100%; } .reg__zeile { grid-template-columns: auto 1fr; gap: 1rem; } .reg__bild { grid-column: 1/-1; margin-top: 1.6rem; aspect-ratio: 16/9; } } @media (max-width: 860px) { .nav__links { position: fixed; inset: 0; background: var(--menue-flor); flex-direction: column; justify-content: center; gap: 1.7rem; font-size: 1.5rem; transform: translateY(-100%); transition: transform 0.45s var(--ease); } .nav__links.offen { transform: translateY(0); } .nav__links a { font-size: 1.5rem; color: var(--licht); } .burger { display: block; position: relative; z-index: 2; } .burger.aktiv span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.aktiv span:nth-child(2) { opacity: 0; } .burger.aktiv span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__tel { display: none; } .fakten__in { gap: 0.8rem 1.8rem; } .head { min-height: 92svh; } .fix a { width: 50px; height: 50px; } .edi__bild::after { left: -0.8rem; bottom: -0.8rem; } } @media (max-width: 520px) { .fakt__w { font-size: 1.12rem; } .seq__el { flex-basis: 82vw; } .matrix th, .matrix td { padding: 0.8rem 0.6rem; font-size: 0.94rem; } } /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .rv { opacity: 1; transform: none; } .wipe { clip-path: none; } .head__media video { display: none; } } /* ---------- ⭐ Signature: Schichtwechsel ---------- */ .schicht { background: linear-gradient(to bottom, var(--nacht), var(--asphalt)); padding-block: var(--r-std); } .schicht__buehne { position: relative; } .schicht__bild { position: relative; aspect-ratio: 16/8; overflow: hidden; } .schicht__bild img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .schicht__legende { padding-top: 0; } .schicht__list { list-style: none; border-top: 1px solid var(--linie); } .schicht__list li { display: flex; gap: 1.4rem; align-items: baseline; padding-block: 1.05rem; border-bottom: 1px solid var(--linie); } .schicht__list b { font-family: var(--display); font-weight: 700; font-size: 1.16rem; color: var(--akzent-txt); font-variant-numeric: tabular-nums; flex: 0 0 5.2rem; } .schicht__list span { color: var(--licht); } /* ---------- Bewertungs-Badge (belegt, ohne Zitate) ---------- */ .bewert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding-block: 2rem; } .bewert__sterne { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--akzent-txt); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .bewert__txt { color: var(--dunst); font-size: 1.06rem; } .bewert__txt strong { color: var(--licht); font-weight: 600; } @media (max-width: 860px) { .schicht__bild { aspect-ratio: 4/5; } .schicht__list b { flex-basis: 4.2rem; } } /* ---------- Personen-Register (feste Hairline-Spalten, kein Kartenraster) ---------- */ .grid-team { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie-stark); } .person { padding: 2rem 1.6rem 2rem 0; border-right: 1px solid var(--linie); } .person:last-child { border-right: 0; } .person h3 { font-size: 1.22rem; margin: 1rem 0 0.4rem; } .person__rolle { color: var(--dunst); font-size: 0.96rem; margin-bottom: 1.2rem; } .person .tel { color: var(--akzent-txt); } @media (max-width: 1000px) { .grid-team { grid-template-columns: repeat(2, 1fr); } .person { border-bottom: 1px solid var(--linie); padding-right: 1.2rem; } .person:nth-child(2n) { border-right: 0; } } @media (max-width: 560px) { .grid-team { grid-template-columns: 1fr; } .person { border-right: 0; } } /* ---------- Formular ---------- */ .formular { display: flex; flex-direction: column; gap: 1.2rem; } .formular label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--dunst); } .formular input[type="text"], .formular select, .formular textarea { background: var(--asphalt-2); border: 1px solid var(--linie-stark); border-radius: 3px; color: var(--licht); font-family: var(--body); font-size: 1.02rem; padding: 0.85rem 1rem; width: 100%; transition: border-color 0.2s var(--ease); } .formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--akzent-txt); } .formular textarea { resize: vertical; min-height: 120px; } .formular .check { flex-direction: row; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; line-height: 1.5; } .formular .check input { margin-top: 0.28rem; accent-color: var(--akzent-txt); width: 18px; height: 18px; flex: 0 0 18px; } .formular .check a { color: var(--akzent-txt); text-decoration: underline; } .formular button { align-self: flex-start; border: 0; cursor: pointer; font-family: var(--body); } .formular button:disabled { opacity: 0.55; cursor: default; } .formular__hinweis { color: var(--akzent-txt); font-weight: 600; margin-top: 0.4rem; } /* Zwischenueberschrift im Formular (Ankauf: Fahrzeug / Kontakt getrennt) */ .formular__blockh { font-family: var(--display); font-size: var(--t-h3); color: var(--licht); letter-spacing: -0.01em; margin-top: 0.6rem; } .formular__blockh:first-child { margin-top: 0; } .formular__blockh + .formular__lead { color: var(--dunst); font-size: 0.95rem; margin-top: -0.7rem; } /* Zwei schmale Felder nebeneinander — auf dem Handy untereinander */ .formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } @media (max-width: 620px) { .formular__reihe { grid-template-columns: 1fr; } } /* Bestaetigung nach dem Absenden */ .formular__danke { border: 1px solid var(--signal); border-left-width: 3px; border-radius: 3px; padding: 1.8rem; background: var(--asphalt-2); } .formular__danke h3 { font-family: var(--display); font-size: var(--t-h3); color: var(--akzent-txt); margin-bottom: 0.7rem; } .formular__danke p { color: var(--dunst); } .formular__danke .tel { display: inline-block; margin-top: 0.4rem; } /* ---------- Rechtsseiten ---------- */ .recht { padding-top: clamp(8rem, 14vh, 11rem); } .recht h1 { font-size: var(--t-h2); margin-bottom: 2.5rem; } .recht h2 { font-size: var(--t-h3); margin: 2.8rem 0 1rem; letter-spacing: -0.01em; } .recht p, .recht li { color: var(--dunst); max-width: 68ch; } .recht p + p { margin-top: 0.9rem; } .recht ul { margin: 1rem 0 0 1.2rem; } .recht li { margin-bottom: 0.5rem; } .recht strong { color: var(--licht); font-weight: 600; } .recht a { color: var(--akzent-txt); } /* ---------- Korrekturen aus dem Sehen-Loop (06.08.2026) ---------- */ /* Fakten-Leiste: 5 Fakten sollen auf 1440 in eine Zeile passen */ .fakten__in { gap: 0.9rem 2rem; } .fakt__l { white-space: nowrap; } /* Signature: Abstand zum Register straffen (Rhythmus-Karte: kompressiv) */ .schicht { padding-bottom: var(--r-eng); } .schicht__legende { padding-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 1200px) { .fakten__in { gap: 0.8rem 1.6rem; } .fakt__w, .fakt__l { font-size: 0.94rem; } .fakt__w { font-size: 1.1rem; } } @media (max-width: 860px) { /* H1 darf nie unter die Nav rutschen */ :root { --t-display: clamp(2.85rem, 12.2vw, 9.5rem); } .head__in { padding-top: 5.6rem; } .head__sub { font-size: 1rem; max-width: 100%; } .head { min-height: 100svh; } /* Fakten-Leiste kompakt in zwei Spalten */ .fakten__in { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.2rem; padding-block: 1rem; } .fakt { flex-direction: column; align-items: flex-start; gap: 0.1rem; } .fakt__l { font-size: 0.7rem; letter-spacing: 0.12em; white-space: normal; } .fakt__w { font-size: 1.05rem; } } @media (max-width: 420px) { .head__akt { gap: 0.9rem; } .cta { padding: 0.9rem 1.3rem; font-size: 0.96rem; } } @media (max-width: 860px) { /* §0e-12: Platz für die fixen Buttons schaffen, Button bleibt sichtbar */ .fakten__in { padding-right: 4.6rem; } .band__grid { padding-right: 0; } } /* Band und Footer: feste Spalten statt Kartenraster (Budget §0b Nr.1 liegt bei .grid-karten) */ @media (max-width: 1000px) { .band__grid { grid-template-columns: repeat(2, 1fr); } .fuss__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 901px) and (max-width: 1180px) { .fuss__grid { grid-template-columns: minmax(0, 1.4fr) 1fr 1fr; } } @media (max-width: 560px) { .band__grid { grid-template-columns: 1fr; } .fuss__grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { /* Head-Copy darf nicht unter die fixen Buttons laufen (§0e-12: Platz, nicht verstecken) */ .head__in { padding-right: calc(var(--pad) + 4rem); } .bleed__in { padding-right: calc(var(--pad) + 3.6rem); } } /* Helle Tages-Kundenfotos auf dunkler Bühne als Lichtinsel einpassen (§0d e). Dezent — das Motiv bleibt erkennbar, nur die Anmutung folgt der Bildwelt. */ .reg__bild img, .seq__el > img, .edi__bild img { filter: brightness(0.9) saturate(0.94) contrast(1.04); } .reg__zeile:hover .reg__bild img { filter: brightness(0.98) saturate(1) contrast(1.02); } /* Nav-Lesbarkeit auch über hellen Heads (Abendlicht/Golden Hour) */ .nav::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 150%; pointer-events: none; z-index: -1; background: linear-gradient( to bottom, rgba(7, 12, 20, 0.82) 0%, rgba(7, 12, 20, 0.45) 55%, transparent 100% ); transition: opacity 0.3s var(--ease); } .nav--fest::before { opacity: 0; } .nav__links a { text-shadow: 0 1px 10px rgba(7, 12, 20, 0.55); } .nav--fest .nav__links a { text-shadow: none; } /* B2: Kontext-Selektor .recht a darf Buttons nicht umfärben (Spezifität 0,2,0 > 0,1,0). Fließtext-Links bleiben gelb, .cta behält seine eigene Farbe. */ .recht a.cta { color: var(--tinte); } .recht a.cta.cta--linie { color: var(--licht); } /* ===== Härtetest-Runde 1: Dichte statt Löcher ===== */ /* W1: --r-weit war bis 512 px Luft neben halbleeren Zeilen */ :root { --r-weit: clamp(7rem, 10vw, 11rem); } /* W2: kurzer Textblock neben hohem Formular nicht mittig zentrieren */ .edi:has(.formular) { align-items: start; } .edi:has(> .edi__txt:first-child:last-of-type) { align-items: start; } /* W10: Fakten-Leiste muss auf 1440 in eine Zeile */ @media (min-width: 1201px) { .fakten__in { gap: 0.8rem 1.7rem; flex-wrap: nowrap; } .fakt__l { font-size: 0.74rem; letter-spacing: 0.13em; } .fakt__w { font-size: 1.16rem; } } /* K3: Head-Verlauf oben abschwächen, Video atmen lassen */ .head::after { background: linear-gradient( to top, rgba(7, 12, 20, 0.94) 0%, rgba(7, 12, 20, 0.6) 34%, rgba(7, 12, 20, 0.1) 62%, rgba(7, 12, 20, 0.3) 100% ); } /* =========================================================== TAGSCHICHT AM HEAD — damit der Lichtschalter SOFORT wirkt Problem (13.08.2026, Hamada): Der Head ist 100svh hoch und war in beiden Modi gleich dunkel — im ersten Bildschirm passierte beim Umschalten sichtbar NICHTS ("Schalter kaputt"). Loesung: Bei Tag wird das Motiv heller durchgelassen, der Schleier duenner, unten laeuft der Head in die helle Seite aus. Die weisse Headline behaelt ihren Schleier am unteren Rand. =========================================================== */ :root[data-theme="hell"] .head__media img, :root[data-theme="hell"] .head__media video { /* 14.08.2026 (Hamada, Standard = hell): Tagschicht kraeftiger — die Nacht-Motive (Start/Tankstelle/Werkstatt …) sollen im hellen Modus sichtbar aufhellen, nicht nur Autohandel/Ankauf mit ihrem hellen Motiv. */ filter: brightness(1.18) saturate(1.03) contrast(0.95); } :root[data-theme="hell"] .head::after { /* Textzone (links/unten) bleibt geschuetzt — hell wird die RECHTE Seite; ein Weiss-Schleier ueber der weissen H1 machte sie unlesbar (Sehen-Loop). */ background: linear-gradient( to top, rgba(7, 12, 20, 0.84) 0%, rgba(7, 12, 20, 0.5) 34%, rgba(7, 12, 20, 0.3) 66%, rgba(7, 12, 20, 0.42) 100% ), linear-gradient( to right, rgba(7, 12, 20, 0.62) 0%, rgba(7, 12, 20, 0.14) 58%, rgba(244, 247, 251, 0.08) 100% ); } @media (prefers-color-scheme: light) { /* MUSS mit :root[data-theme="hell"] oben identisch bleiben — gleicher Spezifitaetsrang, spaeter in der Datei: dieser Block gewinnt sonst und hebelt jede Aenderung oben still aus (Kontrast-Messung 14.08.2026). */ :root:not([data-theme="dunkel"]) .head__media img, :root:not([data-theme="dunkel"]) .head__media video { filter: brightness(1.18) saturate(1.03) contrast(0.95); } :root:not([data-theme="dunkel"]) .head::after { background: linear-gradient( to top, rgba(7, 12, 20, 0.84) 0%, rgba(7, 12, 20, 0.5) 34%, rgba(7, 12, 20, 0.3) 66%, rgba(7, 12, 20, 0.42) 100% ), linear-gradient( to right, rgba(7, 12, 20, 0.62) 0%, rgba(7, 12, 20, 0.14) 58%, rgba(244, 247, 251, 0.08) 100% ); } } /* K1: Nav-Logo auf kleinen Schirmen deckeln */ @media (max-width: 520px) { .nav__logo img { height: 48px; } } /* K2: Partnersiegel auf einheitliche Höhe + gemeinsame Platte */ .siegel { background: var(--hauch); border: 1px solid var(--linie); border-radius: 3px; padding: 0.9rem 1.1rem; gap: 1.4rem; } .siegel img { height: 38px; background: var(--licht); padding: 0.3rem 0.45rem; border-radius: 2px; } /* K5: Preistafel über die volle Breite */ .tafel__reihe { max-width: none; } /* W5: Der horizontale Scroller muss zeigen, dass es weitergeht */ .seq-wrap { position: relative; } .seq-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1.4rem; width: 90px; pointer-events: none; background: linear-gradient(to right, transparent, var(--asphalt)); } .seq { scrollbar-color: var(--linie-stark) transparent; } .seq::-webkit-scrollbar { height: 6px; } .seq::-webkit-scrollbar-track { background: var(--linie); border-radius: 3px; } .seq::-webkit-scrollbar-thumb { background: var(--signal-tief); border-radius: 3px; } .seq__hinweis { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--dunst); } .seq__hinweis::after { content: "→"; color: var(--akzent-txt); font-size: 1.1rem; } /* Logo: transparentes PNG mit aufgehellter Wortmarke - kein Traeger, kein Schatten. */ /* ---------- Stimmen: echte Rezensionen als Hairline-Zitate (kein Card-Grid) ---------- */ .stimmen { margin-top: 3.5rem; border-top: 1px solid var(--linie); } .stimme { border-bottom: 1px solid var(--linie); padding-block: 2.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: start; } .stimme p { font-size: clamp(1.06rem, 1.5vw, 1.28rem); line-height: 1.6; max-width: 68ch; color: var(--licht); text-wrap: pretty; } .stimme cite { font-style: normal; font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: var(--akzent-txt); white-space: nowrap; padding-top: 0.35rem; } @media (max-width: 760px) { .stimme { grid-template-columns: 1fr; gap: 0.9rem; } .stimme cite { white-space: normal; } } /* Badge und Zitate teilen sich eine Trennlinie */ .bewert { border-bottom: 0; padding-bottom: 1.2rem; } .stimmen { margin-top: 1.6rem; } /* ---------- Zahl-Bühne: zweiter Layout-Bruch, ohne Foto ---------- */ .zahl { background: var(--nacht); border-block: 1px solid var(--linie-stark); overflow: hidden; } .zahl__in { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 8vw, 7rem) var(--pad); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .zahl__w { font-family: var(--display); font-weight: 800; color: var(--akzent-txt); font-size: clamp(5rem, 17vw, 15rem); line-height: 0.82; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; } .zahl__txt h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; } .zahl__txt p { color: var(--dunst); max-width: 46ch; } .zahl__liste { margin-top: 1.6rem; border-top: 1px solid var(--linie); } .zahl__liste li { list-style: none; border-bottom: 1px solid var(--linie); padding-block: 0.75rem; color: var(--dunst); font-size: 0.99rem; } @media (max-width: 860px) { .zahl__in { grid-template-columns: 1fr; gap: 1.6rem; } .zahl__w { font-size: clamp(4.2rem, 26vw, 9rem); } } /* Vier Namen typografisch statt einer leeren Halle (Kritiker-Vorschlag Runde 3) */ .edi__namen { display: flex; flex-direction: column; gap: 0.1rem; border-left: 2px solid var(--signal); padding-left: clamp(1.4rem, 3vw, 2.4rem); } .edi__name { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--licht); } .edi__nachname { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--akzent-txt); margin-top: 0.3rem; } /* ---------- Bewertungs-Ticker: läuft automatisch nach rechts ---------- */ .ticker { position: relative; overflow: hidden; margin-inline: calc(var(--pad) * -1); padding-block: 0.4rem; -webkit-mask-image: linear-gradient( to right, transparent 0, #000 7%, #000 93%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 7%, #000 93%, transparent 100% ); } .ticker::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; } .ticker__spur { display: flex; width: max-content; animation: ticker-rechts 22s linear infinite; } .ticker__bahn { display: flex; gap: clamp(1.5rem, 3vw, 2.6rem); padding-right: clamp(1.5rem, 3vw, 2.6rem); } .ticker .stimme { flex: 0 0 clamp(300px, 34vw, 460px); display: flex; flex-direction: column; gap: 1rem; border: 1px solid var(--linie); border-radius: 3px; background: var(--asphalt-2); padding: 1.7rem 1.6rem; border-bottom: 1px solid var(--linie); } .ticker .stimme p { font-size: 1rem; line-height: 1.55; color: var(--licht); max-width: none; } .ticker .stimme cite { white-space: nowrap; padding-top: 0; } /* nach rechts: Spur startet verschoben und läuft auf 0 */ @keyframes ticker-rechts { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .ticker:hover .ticker__spur { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .ticker__spur { animation: none; transform: none; } .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } } /* ---------- Echte Kundenfotos in die dunkle Bildwelt einbetten ---------- Die Fotos bleiben unangetastet (echter Betrieb, echte Aral-Farben); eingebettet wird ueber Verlaeufe, nicht ueber Bildmanipulation. */ .schicht__bild { position: relative; } .schicht__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(7, 12, 20, 0.72) 0%, rgba(7, 12, 20, 0.12) 26%, rgba(7, 12, 20, 0.1) 62%, rgba(7, 12, 20, 0.78) 100% ), linear-gradient(to right, rgba(7, 12, 20, 0.34) 0%, transparent 34%); } .reg__bild { position: relative; } .reg__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(7, 12, 20, 0.1), rgba(7, 12, 20, 0.46) ); mix-blend-mode: multiply; } /* Die fixen Kontakt-Knoepfe duerfen keinen Text anschneiden (Haertetest-Befund 14). Sie schweben rechts unten - alles, was dort endet, bekommt Freiraum. */ .fuss__unten { padding-right: clamp(0rem, 8vw, 7.5rem); } @media (max-width: 860px) { .fuss__unten { padding-right: 0; padding-bottom: 4.5rem; } .fakten__in { padding-right: 5.5rem; } } /* ---------- Zweite Leitfarbe: das Blau aus dem Logo (§0e-14b) ---------- Gelb bleibt das Signal, Blau traegt Flaechen, Kanten und Zustaende - dadurch stehen die blauen Kundenfotos nicht mehr als Fremdkoerper im Dunkeln. */ .reg__zeile:hover .reg__nr .b19 { background: var(--marke); color: #fff; } .reg__bild::before { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(to right, var(--marke), transparent 72%); z-index: 2; } .bleed::after { background: linear-gradient( to right, rgba(7, 12, 20, 0.94) 0%, rgba(9, 22, 40, 0.78) 46%, rgba(7, 12, 20, 0.42) 100% ); } .schicht { background: linear-gradient(to bottom, var(--nacht), var(--asphalt)); } .stimme { border-left: 2px solid var(--marke); } .nav__links a:hover { color: var(--marke-hell); } .fuss { border-top: 3px solid var(--marke); } /* Die Dreiteiligkeit des Heads ist das Konzept - "Fünf Gewerke." darf auf Mobil nicht in zwei Zeilen zerfallen (Härtetest-Befund 23). */ @media (max-width: 520px) { .head__h1 { font-size: clamp(2.6rem, 10.2vw, 3.6rem); } .head__h1 .zeile > span { white-space: nowrap; } } /* Autohandel-Head: Das Hof-Motiv hat ein sehr helles Schaufenster genau dort, wo die Headline sitzt (gemessen: Spitzen bis Luma 255). Der Standardverlauf reicht dort nicht - deshalb links/oben kraeftiger, nur auf dieser Seite. */ .head--autohandel::after { background: linear-gradient( to top, rgba(7, 12, 20, 0.96) 0%, rgba(7, 12, 20, 0.86) 30%, rgba(7, 12, 20, 0.66) 58%, rgba(7, 12, 20, 0.5) 100% ), linear-gradient( to right, rgba(7, 12, 20, 0.88) 0%, rgba(7, 12, 20, 0.6) 52%, rgba(7, 12, 20, 0.2) 100% ); } /* =========================================================== ⛽ PREISMAST — die tagesaktuellen Kraftstoffpreise Vorbild ist das Schild am Hofeingang: schwarze Tafel, harte Ziffern, eine Zeile pro Sorte. Bleibt in BEIDEN Modi dunkel — das Schild an der Strasse leuchtet ja auch nachts. =========================================================== */ .mast { --licht: #edf2f7; --dunst: #b7c4d3; --akzent-txt: #fcc400; --linie: rgba(237, 242, 247, 0.14); --linie-stark: rgba(237, 242, 247, 0.3); position: relative; background: linear-gradient(160deg, #0a1119 0%, #121d2b 58%, #0a1119 100%); border: 1px solid var(--linie-stark); border-radius: 4px; color: var(--licht); overflow: hidden; } /* Der gelbe Streifen oben ist das Wiedererkennungszeichen des Schilds. */ .mast::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient( to right, var(--signal) 0%, var(--signal) 62%, var(--marke) 62%, var(--marke) 100% ); } .mast__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 1.4rem; padding: 1.6rem clamp(1.2rem, 3vw, 2rem) 1.1rem; border-bottom: 1px solid var(--linie); } .mast__titel { font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.01em; } .mast__stand { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: var(--dunst); font-variant-numeric: tabular-nums; } .mast__reihen { list-style: none; } .mast__reihe { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 0.95rem clamp(1.2rem, 3vw, 2rem); border-bottom: 1px solid var(--linie); } .mast__reihe:last-child { border-bottom: 0; } .mast__sorte { font-weight: 600; font-size: 1.02rem; } .mast__sorte small { display: block; font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dunst); font-weight: 600; margin-top: 0.15rem; } /* Die Ziffern sind der Punkt: tabellarisch, damit nichts springt, und die Zehntelcent hochgestellt wie auf dem echten Schild. */ .mast__preis { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--signal); white-space: nowrap; } .mast__preis sup { font-size: 0.5em; vertical-align: super; margin-left: 0.06em; letter-spacing: 0; } .mast__preis[data-leer="ja"] { color: var(--dunst); font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 600; letter-spacing: 0; } .mast__fuss { padding: 1rem clamp(1.2rem, 3vw, 2rem) 1.3rem; border-top: 1px solid var(--linie); font-size: 0.86rem; line-height: 1.5; color: var(--dunst); } .mast__fuss a { color: var(--akzent-txt); text-decoration: underline; text-underline-offset: 0.2em; } .mast__zustand { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } .mast__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--dunst); flex: none; } .mast__zustand[data-offen="ja"] .mast__punkt { background: #46c07a; } .mast__zustand[data-offen="ja"] { color: #7fd9a4; } /* Bestand: Karten als Links + Kollektion-Werkzeuge (Sortierung/Preis) */ .wagen--link { display: block; color: inherit; text-decoration: none; } .wagen--link:hover .wagen__name, .wagen--link:focus-visible .wagen__name { color: var(--akzent-txt); } .wagen--link:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 0.5rem; } .flotte__werk { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.4rem 0 1.4rem; } .flotte__werk-feld { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--dunst); } .flotte__werk-feld select { font: inherit; font-size: 0.9rem; color: var(--licht); background: var(--asphalt); border: 1px solid var(--linie-stark); border-radius: 0.45rem; padding: 0.5rem 0.7rem; min-width: 210px; } /* ============ Fahrzeug-Detailseiten (Pipeline aus mobile.de) ============ */ .fz-kopf { padding-top: clamp(7rem, 12vh, 9rem); } .fz-pfad { font-size: 0.82rem; color: var(--dunst); margin-bottom: 1.4rem; } .fz-pfad a { color: var(--dunst); text-decoration: underline; text-underline-offset: 0.2em; } .fz-titel { max-width: 18ch; } .fz-unter { color: var(--dunst); font-size: clamp(1rem, 1.6vw, 1.2rem); margin-top: 0.6rem; max-width: 60ch; } .fz-preiszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem; margin-top: 1.6rem; } .fz-preis { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.02em; color: var(--akzent-txt); } .fz-eck { color: var(--licht); font-size: 1rem; } .fz-rate { color: var(--dunst); font-size: 0.88rem; margin-top: 0.4rem; } /* Steuer-Status unter dem Preis (Hamada 18.08.2026). Steht bei JEDEM Fahrzeug — entweder ausweisbare MwSt oder § 25a. Gewerbliche Kaeufer entscheiden danach, Privatkunden ueberlesen es. */ .fz-mwst { color: var(--dunst); font-size: 0.84rem; margin-top: 0.45rem; font-variant-numeric: tabular-nums; } /* Ansprechpartner ueber dem Anfrageformular (Kundenwunsch 18.08.2026). */ .fz-partner { margin-top: 0.9rem; font-size: 0.95rem; color: var(--licht); } .fz-partner a { color: inherit; } .fz-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; } .fz-chip { border: 1px solid var(--linie-stark); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.82rem; color: var(--licht); background: var(--hauch); } .fz-akt { margin-top: 1.8rem; } .fz-druck { font: inherit; font-size: 0.9rem; color: var(--dunst); background: none; border: 1px solid var(--linie-stark); border-radius: 0.45rem; padding: 0.6rem 1rem; cursor: pointer; /* seit 17.08.2026 ein auf die Exposé-Seite, nicht mehr window.print() */ display: inline-block; text-decoration: none; } .fz-druck:hover { color: var(--licht); border-color: var(--licht); } .fz-buehne img { width: 100%; height: auto; border-radius: 0.7rem; border: 1px solid var(--linie); background: var(--asphalt); } .fz-thumbs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.55rem; margin-top: 0.7rem; } @media (max-width: 900px) { .fz-thumbs { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 560px) { .fz-thumbs { grid-template-columns: repeat(3, 1fr); } } .fz-thumb { padding: 0; border: 1px solid var(--linie); border-radius: 0.45rem; overflow: hidden; background: var(--asphalt); cursor: pointer; aspect-ratio: 4/3; } .fz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fz-thumb:hover, .fz-thumb:focus-visible { border-color: var(--signal); } .fz-daten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem 1.4rem; margin-top: 2rem; } @media (max-width: 900px) { .fz-daten { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .fz-daten { grid-template-columns: 1fr; } } .fz-datum { border-bottom: 1px solid var(--linie); padding-bottom: 0.55rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; min-width: 0; } .fz-datum dt { color: var(--dunst); font-size: 0.88rem; } .fz-datum dd { margin: 0; color: var(--licht); font-weight: 600; font-size: 0.92rem; text-align: right; overflow-wrap: anywhere; min-width: 0; } .fz-quelle { margin-top: 1.6rem; color: var(--dunst); font-size: 0.85rem; max-width: 68ch; } .fz-quelle a { color: var(--akzent-txt); text-decoration: underline; text-underline-offset: 0.2em; } .fz-formular { margin-top: 2rem; max-width: 560px; display: grid; gap: 1rem; } .fz-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .fz-formular label { display: grid; gap: 0.35rem; font-size: 0.86rem; color: var(--dunst); } .fz-formular input, .fz-formular textarea { font: inherit; color: var(--licht); background: var(--asphalt); border: 1px solid var(--linie-stark); border-radius: 0.45rem; padding: 0.65rem 0.8rem; } .fz-formular input:focus-visible, .fz-formular textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; } .fz-ds { font-size: 0.78rem; color: var(--dunst); } .fz-ds a { color: var(--akzent-txt); text-decoration: underline; text-underline-offset: 0.2em; } #fzhinweis { color: #ff9d9d; } #fzdanke { color: #7fd9a4; } .fz-lupe { border: 0; padding: 0; margin: auto; /* globaler Reset wuerde das dialog-Zentrieren sonst kippen */ background: rgba(7, 12, 20, 0.96); max-width: min(96vw, 1400px); } .fz-lupe::backdrop { background: rgba(7, 12, 20, 0.85); } .fz-lupe img { max-width: 100%; max-height: 88vh; display: block; } .fz-lupe__zu { position: absolute; top: 0.4rem; right: 0.6rem; font-size: 1.6rem; color: #fff; background: none; border: 0; cursor: pointer; z-index: 1; } .fz-druckfuss { display: none; } @media (max-width: 640px) { .fz-felder { grid-template-columns: 1fr; } } /* Expose-Druck (Dokumentenerstellung): die Detailseite druckt sich als sauberes 1-2-Seiten-Expose — Browser "Als PDF speichern". */ @media print { .nav, .fix, .fuss, .fz-akt, .fz-formular, .fz-pfad, #anfrage .kapitel, #anfrage h2, #anfrage .lead, .fz-lupe { display: none !important; } body { background: #fff !important; color: #111 !important; } .fz-kopf { padding-top: 0.5cm; } .fz-titel, .fz-preis, .fz-eck, .fz-datum dd, .fz-chip { color: #111 !important; } .fz-unter, .fz-datum dt, .fz-quelle, .fz-mwst, .fz-rate { color: #444 !important; } .fz-chip { border-color: #bbb; background: none; } .fz-thumbs { grid-template-columns: repeat(4, 1fr); } .fz-thumb { border-color: #ddd; break-inside: avoid; } .fz-buehne img { border: 0; border-radius: 0; max-height: 9cm; object-fit: contain; background: none; } .fz-daten { margin-top: 0.6cm; } .fz-datum { border-color: #ddd; } .fz-druckfuss { display: block; margin-top: 0.8cm; padding-top: 0.3cm; border-top: 1px solid #bbb; font-size: 9pt; color: #444; } } /* Live-Preisboard: Stations-Widget von kraftstoffbilliger.de, uebernommen von der Bestandsseite — laedt erst nach Klick (2-Klick). */ .mast__live { margin-bottom: 0.4rem; } .mast__live-knopf { display: inline-block; font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--tinte); background: var(--signal); border: 0; border-radius: 0.45rem; padding: 0.6rem 1.05rem; cursor: pointer; } .mast__live-knopf:hover { background: var(--signal-tief); } .mast__live-hinweis { margin-top: 0.55rem; font-size: 0.78rem; line-height: 1.5; color: var(--dunst); } .mast__live-rahmen { border: 1px solid var(--linie-stark); border-radius: 0.6rem; overflow: hidden; background: #fff; } .mast__live-rahmen iframe { display: block; width: 100%; height: 330px; border: 0; } .mast__live-aus { display: inline-block; margin-top: 0.6rem; font: inherit; font-size: 0.78rem; color: var(--dunst); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; } /* Startseite: Schild neben dem Text, nicht als eigene Bildschirmseite. */ .mast--klein .mast__reihe { padding-block: 0.8rem; } .mast--klein .mast__preis { font-size: clamp(1.7rem, 2.8vw, 2.1rem); } @media (max-width: 560px) { .mast__kopf { padding-top: 1.3rem; } .mast__reihe { gap: 0.6rem; } } /* Startseiten-Fassung: das Schild liegt quer, drei Sorten nebeneinander. Bewusst ein anderer Rhythmus als die hochkante Tafel auf der Tankstellenseite — dieselbe Information, nicht dieselbe Form. */ .mast--breit .mast__reihen { display: grid; grid-template-columns: repeat(3, 1fr); } .mast--breit .mast__reihe { display: block; border-bottom: 0; border-right: 1px solid var(--linie); padding-block: 1.5rem 1.7rem; } .mast--breit .mast__reihe:last-child { border-right: 0; } .mast--breit .mast__sorte { display: block; margin-bottom: 0.7rem; } .mast--breit .mast__preis { font-size: clamp(2rem, 4.4vw, 3.1rem); } @media (max-width: 760px) { .mast--breit .mast__reihen { grid-template-columns: 1fr; } .mast--breit .mast__reihe { border-right: 0; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 1fr auto; align-items: center; padding-block: 1rem; } .mast--breit .mast__sorte { margin-bottom: 0; } } /* [hidden] muss staerker sein als jedes display der Bauteile — sonst zeigt das Schild einen Zustand an, den es gar nicht kennt. */ [hidden] { display: none !important; } /* Der Leerzustand ist bis zur Freischaltung der Live-Daten der Normalfall: ruhig, kleiner als eine echte Zahl, und nicht wie ein Preis aussehend. */ .mast .mast__preis[data-leer="ja"], .mast--breit .mast__preis[data-leer="ja"] { font-size: clamp(1rem, 1.4vw, 1.14rem); font-weight: 600; font-family: var(--body); letter-spacing: 0.01em; color: var(--dunst); } /* =========================================================== 🚗 FLOTTE — Fahrzeugbestand Grammatik uebernommen von rufki.eu (Matrix Motors): Haarlinie ueber der Karte statt Kasten drumherum, Bild 4:3 mit stillem Zoom, Marke klein und gesperrt, Modell gross, darunter EINE Zeile Preis + Eckdaten mit Trennstrichen. Keine Schatten, keine Rahmen — die Linie traegt. Das ist ab jetzt das EINE Card-Grid der Seite (§0b Nr. 4); die Garantiepakete stehen dafuer im Hairline-Register. =========================================================== */ .flotte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: clamp(2rem, 3.5vw, 3.2rem) clamp(1.6rem, 2.5vw, 2.6rem); } .wagen { display: flex; flex-direction: column; border-top: 1px solid var(--linie-stark); padding-top: 1.1rem; color: inherit; transition: border-color 0.35s var(--ease); } .wagen__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--asphalt-2); border-radius: 3px; } .wagen__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } /* Leerer Bildplatz darf nicht wie ein Fehler aussehen. */ .wagen__bild--ohne { /* Muss sich vom Seitengrund absetzen, sonst wirkt die Karte kaputt. */ background: var(--asphalt-3); border: 1px dashed var(--linie-stark); display: grid; place-items: center; color: var(--dunst); font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; } .wagen__tag { position: absolute; top: 0.8rem; left: 0.8rem; background: rgba(7, 12, 20, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(237, 242, 247, 0.22); color: #edf2f7; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; padding: 0.34rem 0.6rem; border-radius: 2px; } .wagen__tag--verkauft { color: var(--signal); border-color: rgba(252, 196, 0, 0.5); } .wagen__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; } .wagen__marke { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; color: var(--dunst); } .wagen__nr { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--dunst); font-variant-numeric: tabular-nums; } .wagen__name { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.72rem); line-height: 1.08; letter-spacing: -0.02em; margin-top: 0.5rem; text-wrap: balance; } .wagen__zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.2rem; margin-top: 0.9rem; } .wagen__preis { font-family: var(--display); font-weight: 700; font-size: 1.16rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Netto-Zeile unter dem Bruttopreis (Hamada 18.08.2026). Bewusst leise: der Gewerbekunde sucht sie, der Privatkunde soll den Preis lesen. */ .wagen__netto { display: block; margin-top: 0.18rem; font-family: var(--body, inherit); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.01em; white-space: nowrap; opacity: 0.62; } .wagen__eck { display: flex; flex-wrap: wrap; gap: 0.9rem; list-style: none; font-size: 0.78rem; color: var(--dunst); font-variant-numeric: tabular-nums; } .wagen__eck li { position: relative; } /* Trennstrich zwischen den Eckdaten — das Detail, das die Zeile zu einer Zeile macht statt zu drei Woertern. */ .wagen__eck li + li::before { content: ""; position: absolute; left: -0.5rem; top: 50%; width: 1px; height: 0.8em; background: var(--linie-stark); transform: translateY(-50%); } @media (hover: hover) and (pointer: fine) { a.wagen:hover { border-top-color: var(--signal); } a.wagen:hover .wagen__bild img { transform: scale(1.045); } } @media (prefers-reduced-motion: reduce) { .wagen__bild img { transition: none; } a.wagen:hover .wagen__bild img { transform: none; } } /* Marken-Reiter ueber dem Bestand */ .flotte__reiter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.4rem; } .reiter { background: none; border: 1px solid var(--linie-stark); border-radius: 999px; color: var(--dunst); font-family: var(--body); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.55rem 1.05rem; min-height: 40px; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .reiter:hover { color: var(--licht); border-color: var(--linie-stark); background: var(--hauch); } .reiter[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--tinte); } .reiter__n { margin-left: 0.45rem; font-variant-numeric: tabular-nums; /* keine opacity-Abschwaechung: fiel im axe-Lauf 14.08.2026 unter 4,5:1 (WCAG 1.4.3, hell 4,45) — Abgrenzung nur ueber das normale Gewicht */ font-weight: 400; } .flotte__zahl { font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: var(--dunst); margin-bottom: 1.6rem; font-variant-numeric: tabular-nums; } /* Ungleich lange Modellnamen duerfen die Preiszeilen nicht verspringen lassen — die Zeile sitzt am Kartenfuss, nicht direkt unterm Namen. */ .wagen { height: 100%; } .wagen__zeile { margin-top: auto; padding-top: 0.9rem; } /* ---------- Barrierefreiheit ---------- */ /* Sprungmarke: unsichtbar bis sie den Fokus bekommt (WCAG 2.4.1). */ .sprungmarke { position: absolute; left: 1rem; top: -100%; z-index: 200; background: var(--signal); color: var(--tinte); font-weight: 600; padding: 0.85rem 1.4rem; border-radius: 3px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); transition: top 0.2s var(--ease); } .sprungmarke:focus-visible { top: 1rem; } /* Formularfelder hatten `outline:none` und nur einen Rahmenwechsel als Fokusanzeige — das ist zu leise. Jetzt Rahmen UND Ring. */ .formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible, .formular button:focus-visible { outline: 2px solid var(--akzent-txt); outline-offset: 2px; border-color: var(--akzent-txt); } /* Zeigegeraet-Fokus (Klick) soll den Ring nicht ausloesen, Tastatur schon. */ .formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--akzent-txt); } /* Ankreuzfeld war 18 px — zu klein zum Treffen (WCAG 2.2 SC 2.5.8). */ .formular .check input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 0.15rem; } /* Der Datenschutz-Link in der Einwilligung braucht eine eigene Trefferhoehe. */ .formular .check a { display: inline-block; padding-block: 0.35rem; } /* Waagerechte Scroller muessen mit der Tastatur erreichbar sein (axe: scrollable-region-focusable). Der Fokus darf dabei sichtbar sein. */ .seq:focus-visible, .ticker:focus-visible { outline: 2px solid var(--akzent-txt); outline-offset: 4px; } /* Links im Fliesstext duerfen sich nicht nur ueber die Farbe abheben (axe: link-in-text-block, WCAG 1.4.1) — betrifft die Rechtsseiten. */ .recht p a, .recht li a, .mast__fuss a { text-decoration: underline; text-underline-offset: 0.2em; } /* Leerzustand des Preisschilds darf die Zeile nicht aufspannen — sonst laeuft die Seite bei 320 px waagerecht ueber. */ .mast__preis[data-leer="ja"] { white-space: normal; } /* Die Kapitelzeile ist auf zwei Seiten die echte Sektionsueberschrift (h2) — sie darf dabei nicht anders aussehen als die span-Fassung. */ h2.kapitel__txt { font-family: var(--body); font-size: var(--t-klein); text-transform: uppercase; letter-spacing: 0.17em; font-weight: 600; color: var(--dunst); line-height: 1.4; margin: 0; } /* Ein einzelnes langes Wort („Datenschutzerklärung") sprengte bei 320 px die Seite. Deutsch trennt sich sauber, wenn man es zulaesst. */ h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; } /* Eigenstaendige Kontaktlinks (Kontaktband, Fussbereiche, Linklisten) sind keine Fliesstext-Links — sie brauchen eine Trefferhoehe von 24 px+ (WCAG 2.2 SC 2.5.8). Fliesstext bleibt unberuehrt. */ .band__sp a, .recht > p > a[href^="tel:"], .recht > p > a[href^="https:"], .recht > p > a[href^="mailto:"], .liste li > div > a { display: inline-block; padding-block: 0.32rem; min-height: 24px; } /* „Mehr“-Link im Preisschild-Fuss: gleiche Trefferhoehe wie die uebrigen. */ .mast__fuss a.reg__mehr { padding-block: 0.35rem; min-height: 26px; } /* Auch der Tabellen-Scroller auf der Kontaktseite zeigt seinen Fokus. */ [role="region"][tabindex="0"]:focus-visible { outline: 2px solid var(--akzent-txt); outline-offset: 4px; } /* =========================================================== Textschutz im Head (WCAG 1.4.3, gemessen mit tools/kontrast-auf-bild.mjs) Die Motive haben helle Stellen genau dort, wo die Headline sitzt — Aral-Schild, Vordachbeleuchtung, Himmel. Der Flaechenverlauf reicht dafuer nicht. Loesung: ein WEICHER Schleier, der nur den Textblock traegt und nach oben/rechts vollstaendig ausläuft. Das Video bleibt dadurch offen; abgedunkelt wird nur, was Buchstaben traegt. =========================================================== */ .head__in::before { content: ""; position: absolute; inset: -6% -12% -30% -8%; z-index: -1; pointer-events: none; background: radial-gradient( 85% 62% at 24% 44%, rgba(7, 12, 20, 0.92) 0%, rgba(7, 12, 20, 0.78) 34%, rgba(7, 12, 20, 0.42) 62%, rgba(7, 12, 20, 0) 78% ); } /* Hell-Modus: das Motiv wird aufgehellt (brightness 1.18) — der Schleier muss dann BREITER tragen, sonst kippen die rechten Buchstaben der langen H1-Zeilen unter 3:1 (gemessen 14.08.2026, index 1,9:1). Beide Varianten (Attribut + System-hell) identisch halten! */ :root[data-theme="hell"] .head__in::before { background: radial-gradient( 68% 52% at 22% 40%, rgba(7, 12, 20, 0.82) 0%, rgba(7, 12, 20, 0.6) 40%, rgba(7, 12, 20, 0.3) 62%, rgba(7, 12, 20, 0) 78% ); } @media (prefers-color-scheme: light) { :root:not([data-theme="dunkel"]) .head__in::before { background: radial-gradient( 68% 52% at 22% 40%, rgba(7, 12, 20, 0.82) 0%, rgba(7, 12, 20, 0.6) 40%, rgba(7, 12, 20, 0.3) 62%, rgba(7, 12, 20, 0) 78% ); } } /* Der Schleier braucht eine eigene Ebene, sonst liegt er ueber dem Text. */ .head__in { isolation: isolate; } .head__in > * { position: relative; z-index: 1; } /* =========================================================== NAVIGATIONSLEISTE ENTLASTEN (Hamada 13.08.2026: „sieht auf dem PC zu voll aus") Messung vorher bei 1280px: Inhalt 1179px auf 1152px Innen- breite — „Bistro B19" und „Über uns" brachen ZWEIZEILIG um, die Leiste wuchs auf 86px Höhe. Das war der volle Eindruck, nicht die Zahl der Punkte. Vier Griffe, keiner nimmt Substanz weg (§ „dezent ≠ nackt"): 1) Menüpunkte brechen nie mehr um 2) Logo + Abstände + Schrift eine Spur ruhiger 3) das B-19-Schild neben der Nummer entfällt am Desktop — „Bistro B19" steht ohnehin im Menü direkt daneben 4) unter 1100px zeigt die Leiste den Burger, statt zu quetschen (vorher erst ab 860px — dazwischen war sie gedrängt) =========================================================== */ @media (min-width: 1101px) { .nav__in { gap: 1.4rem; } .nav__logo img { height: 60px; } .nav__links { gap: 1.15rem; } .nav__links a { font-size: 0.9rem; white-space: nowrap; /* der eigentliche Fix */ } .nav__tel { font-size: 0.92rem; gap: 0; } /* Das Schild doppelt den Menüpunkt „Bistro B19" — am Desktop raus, am Telefon bleibt es (dort ist die Nummer der einzige Anker). */ .nav__tel .b19 { display: none; } } /* Burger schon ab 1100px statt erst ab 860px. Die Regeln spiegeln bewusst den 860px-Block; die Telefonnummer bleibt hier aber sichtbar — sie ist auf dem Tablet der wichtigste Weg zum Hof. */ @media (max-width: 1100px) { .nav__links { position: fixed; inset: 0; background: var(--menue-flor); flex-direction: column; justify-content: center; gap: 1.7rem; font-size: 1.5rem; transform: translateY(-100%); transition: transform 0.45s var(--ease); } .nav__links.offen { transform: translateY(0); } .nav__links a { font-size: 1.5rem; color: var(--licht); } .burger { display: block; position: relative; z-index: 2; } .burger.aktiv span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.aktiv span:nth-child(2) { opacity: 0; } .burger.aktiv span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Ohne die Menuezeile verteilt space-between Nummer und Schalter lose ueber die Leiste. Rechts buendeln statt streuen. */ .nav__tel { margin-left: auto; } .nav__in { gap: 1rem; } } /* Das Schliess-X im offenen Menue war fast unsichtbar: der Burger erbt die helle Buehnenfarbe (#edf2f7), der Menuegrund ist bei Tag aber ebenfalls fast weiss (#f4f7fb) — Kontrast 1,05. Im offenen Zustand folgt er jetzt dem Seitenmodus, wie es das Menue darunter schon tut. (Beim Anheben des Burger-Breakpoints auf 1100px am 13.08.2026 aufgefallen.) */ .burger.aktiv { color: var(--seite-licht, #0b1724); }