/* ========================================================================== I LOVE RETRO BULLI — Design-System v3 -------------------------------------------------------------------------- Vorgeschichte: v1 und v2 wirkten „wie aus dem Baukasten". Die Analyse von THE COURT und der neuen STREET-KITCHEN-Startseite hat gezeigt, woran das liegt — und diese v3 setzt genau die fünf Mechaniken um, die dort greifen: 1) DER FARBWECHSEL IST DER TRENNER. Keine Trennlinien zwischen Sektionen, keine zwei gleichen Flächentöne hintereinander. Vier Töne rotieren: creme → creme-tief → creme → anthrazit … Rot kommt genau EINMAL (Abschluss), Tinte genau einmal (Fußzeile). 2) KEIN RASTER AUS LAUTER GLEICH HOHEN KACHELN. Die Anlässe liegen als asymmetrisches Bento (Hochzeit doppelt groß = 90 % des Geschäfts). 3) NUMMERIERUNG ALS STRUKTUR-ANKER. Jede Sektion beginnt mit „01 — LABEL". 4) TEXT AUF FOTOS LIEGT NIE IM VERLAUF, sondern auf einer massiven Fläche. Das löst die Lesbarkeit UND erdet das Bild (es „hängt" nicht mehr). 5) EIN WIEDERKEHRENDES SIGNATUR-MOTIV: das Typenschild — ein scharfkantiges Plättchen mit gesperrter Versalschrift, wie am Oldtimer. Es sitzt als Nummer auf den Kacheln, als Baujahr auf den Quartettkarten und als Kopf der Fahrzeugkarten. Bleibt aus v2 gültig: - Ein Überschriften-Muster: DM Serif Display, genau ein Wort in Rot (). - Nur zwei Fließtextgrößen (Lead + Standard). Schrift- und Farbentscheidung Patrick, 06.08.2026: DM Serif Display + DM Sans · Rot #CE4A3E · B2B-Fläche Anthrazit #2C2C2A ========================================================================== */ /* ---------- Schriften (lokal, DSGVO) ---------- DM Serif Display gibt es NUR in einem Schnitt (400). Überschriften deshalb überall font-weight:400 — sonst rechnet der Browser einen falschen Fettschnitt. */ @font-face { font-family: 'DM Serif Display'; src: url('../fonts/dm-serif-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Serif Display'; src: url('../fonts/dm-serif-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-latin.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens ---------- */ :root { --creme: #F5F0E7; /* HELL – Grundton */ --creme-tief: #EAE2D4; /* MITTEL – jeder zweite Abschnitt */ --tinte: #17150F; /* DUNKEL – Kachelsockel, Fußzeile */ --tinte-weich:#5A5348; --rot: #CE4A3E; /* genau EINMAL als Fläche (Abschluss-CTA) */ --rot-tief: #AF382D; --anthrazit: #2C2C2A; /* Firmenkunden-/Werbefahrzeug-Fläche – matt, warm-neutral */ --sand: #E0B473; /* Akzent auf dunklen Flächen statt Rot */ --chrom: #B8B2A6; --chrom-hell: #DCD5C7; --weiss: #FFFFFF; --ueberzeile: .81rem; /* alle kleinen Rubrikzeilen */ /* Winzige Rundung — nur auf dem, was man anfasst. Struktur, Bilder und Kacheln bleiben scharfkantig; das ist der Charakter der Seite. Patrick, 08.08.2026: eine ganz kleine Nuance an Rundung, angemessen bei den runden Bullis. */ --rundung: 3px; --text: 1.02rem; /* Fließtext, Aufzählungen, Einleitungen — EINE Größe */ --klein: .92rem; /* Kleintext: Hinweise, Fußnoten, Bildunterschriften */ --knopftext: .95rem; /* alle Knöpfe und Handlungsflächen */ /* alle kleinen Rubrikzeilen, Maß wie THE COURT */ --serif: 'DM Serif Display', Georgia, serif; --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --breite: 1320px; --breite-schmal: 820px; --rand: clamp(1.25rem, 5vw, 4.5rem); --luft: clamp(4.5rem, 8.5vw, 8rem); --kopfluft: clamp(2rem, 2.9vw, 2.6rem); /* Sektionskopf → Inhalt, EIN Wert */ /* Kopfzeile — bewusst stämmig (Patrick, 06.08.2026) */ --kopf-h: 136px; --kopf-h-klein: 96px; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* KEIN `scroll-behavior: smooth`. Der Parallax-Handler läuft bei jedem Scroll-Ereignis und bricht das sanfte Scrollen sofort ab — Sprungmarken wie #bj1964 landeten dadurch nach fünf Pixeln statt am Ziel (gefunden in der Prüfung am 07.08.2026). Harte Sprünge funktionieren zuverlässig. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; width: 100%; background: var(--creme); color: var(--tinte); font-family: var(--sans); font-size: var(--text); line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } /* Sicherheitsnetz für Symbole. Jedes Icon wird sonst einzeln per Klasse bemaßt (.knopf svg, .textlink svg …). Fehlt die passende Regel, greift nur `max-width:100%` — und das SVG bläht sich auf die volle Breite des Elternteils auf. Genau so entstand am 10.08.2026 auf werbefahrzeug.html ein 647 px großer Pfeil hinter „Alle Referenzen ansehen". :where() hat die Spezifität NULL. Jede vorhandene Klassenregel gewinnt also weiterhin; dieser Wert greift ausschließlich dort, wo gar nichts definiert ist. Deshalb ändert er kein einziges bestehendes Symbol. */ :where(svg[viewBox="0 0 24 24"]) { width: 1em; height: 1em; flex: none; } a { color: inherit; } /* Verweise im Fließtext, die keine eigene Klasse tragen. Ohne diese Regel erben sie nur `color: inherit` — sie sehen dann aus wie normaler Text, und niemand erkennt, dass man klicken kann. Am 12.08.2026 traf das auf neun Verweise zu, unter anderem auf „Datenschutzhinweise" im Anfrageformular. Gestaltung bewusst identisch zu .textlink--im-satz: im Ruhezustand nur die Farbe, die Unterstreichung kommt beim Überfahren. Patrick am 12.08.2026: „damit das halt auch einheitlich ist". :where() hat Spezifität null — jede vorhandene Klassenregel gewinnt weiter. */ /* NUR im Seiteninhalt. Ohne die Einschränkung auf
färbt diese Regel auch die Listenpunkte in der Fußzeile rot — dort sind die Verweise weiß (Patrick, 12.08.2026: „im Footer muss das bitte wieder alles weiß sein"). */ main :where(p, li, dd, .lead, .faq__antwort, .rechtstext) a:not([class]) { color: var(--rot); font-weight: 600; text-decoration: none; } main :where(p, li, dd, .lead, .faq__antwort, .rechtstext) a:not([class]):hover, main :where(p, li, dd, .lead, .faq__antwort, .rechtstext) a:not([class]):focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; } /* Auf dunklen Flächen wäre Rot kaum lesbar — dort das wärmere Sand. */ main .auf-dunkel :where(p, li, dd, .lead) a:not([class]) { color: var(--sand); } button { font: inherit; color: inherit; } /* ========================================================================== REGEL 1 — Ein Überschriften-Muster. Jede Überschrift: DM Serif Display + genau ein Wort in Rot (). ========================================================================== */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.02; } h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); } h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1.16; letter-spacing: -.008em; } h4 { font-size: 1.02rem; line-height: 1.3; } h1 em, h2 em, h3 em { font-style: normal; color: var(--rot); } .auf-dunkel h1 em, .auf-dunkel h2 em, .auf-dunkel h3 em { color: var(--sand); } /* ========================================================================== MECHANIK 3 — Kapitelmarke: „01 —— LABEL". Beginnt JEDE Sektion. Ersetzt den beliebigen grauen Kicker aus v2 und macht die Startseite als erzählte Abfolge lesbar statt als Stapel. ========================================================================== */ .vor { display: flex; align-items: center; gap: .8rem; font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--tinte-weich); margin: 0 0 1.3rem; } .vor i { /* Serifenlos wie alle Ziffern der Seite. Vorher trug dieselbe Rolle (Nummerierung) zwei Handschriften — das war die eigentliche Unruhe, nicht die Anzahl der Schriftgrößen (Messung 07.08.2026). */ font-family: var(--sans); font-style: normal; font-size: 1.15rem; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--rot); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .8rem; flex: none; } .vor i::after { content: ''; width: 30px; height: 1px; background: var(--chrom); } .auf-dunkel .vor { color: rgba(255,255,255,.7); } .auf-dunkel .vor i { color: var(--sand); } .auf-dunkel .vor i::after { background: rgba(255,255,255,.3); } /* ========================================================================== REGEL 2 — Zwei Fließtextgrößen. Mehr nicht. ========================================================================== */ p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } /* Einleitung, Aufzählung und Randnotiz haben DIESELBE Größe. Patrick, 07.08.2026: „Dann gibt es eine serifenlose Schrift, dann bei den Checkboxen noch eine kleinere, und darunter noch eine kleinere. Das ist viel zu viel." Der Unterschied kommt jetzt über Farbe und Zeilenbreite, nicht über Größe. Nur der Vorspann im Seitenkopf und im Hero bleibt größer — dort trägt er. */ .lead { font-size: var(--text); line-height: 1.65; color: var(--tinte-weich); max-width: 62ch; margin-bottom: 1.2em; } .auf-dunkel { color: rgba(255,255,255,.86); } .auf-dunkel .lead { color: rgba(255,255,255,.78); } /* ========================================================================== MECHANIK 1 — Layout und Farbrotation. Sektionen stoßen ohne Rahmen aneinander; der Tonwechsel trennt sie. ========================================================================== */ .huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } /* Zentriert. Der Raster-Agent wollte linksbündig (einheitliche Fluchtlinie), Patrick fand das „weird" — 07.08.2026. Ein zentrierter schmaler Block ist ein gängiges Mittel für Fragen und Rechtstexte und bleibt hier bewusst so. */ .huelle--schmal { max-width: var(--breite-schmal); } .block { padding-block: var(--luft); } .block--tief { background: var(--creme-tief); } .block--anthrazit { background: var(--anthrazit); } .block--rot { background: var(--rot); } .block--tinte { background: var(--tinte); } /* Genau EIN Abstand vom Sektionskopf zum Inhalt darunter. Gemessen am 07.08.2026 gab es drei: 5,7 px (Aufzählung), 44,8 px (FAQ, inline gesetzt) und 57,6 px (Standard) — Faktor 10 für dieselbe Beziehung. */ .sektionskopf { max-width: 46ch; margin-bottom: var(--kopfluft); } .sektionskopf--breit { max-width: 62ch; } .sektionskopf p:last-child { margin-bottom: 0; } /* Die Einleitung sitzt eng unter der Überschrift, nicht in einer zweiten Spalte — dort wirkte sie verloren (Patrick, 06.08.2026). */ .sektionskopf h2 { margin-bottom: .42em; } .sektionskopf .lead { max-width: 52ch; } /* ---------- Buttons ---------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .62rem; padding: 1.1rem 2.2rem; font-family: var(--sans); font-size: var(--knopftext); font-weight: 600; letter-spacing: .015em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; border-radius: var(--rundung); /* Nie umbrechen: sonst wird der Knopf in einem schmalen Fenster zweizeilig und riesig (Patrick, 06.08.2026) */ white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .knopf:hover { transform: translateY(-2px); } .knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; } /* Auf roter und dunkler Fläche wäre der rote Ring unsichtbar — dort weiß. Betraf ausgerechnet die Absende-Knöpfe im roten Abschlussblock. */ .block--rot .knopf:focus-visible, .auf-dunkel .knopf:focus-visible, .seitenkopf .knopf:focus-visible, .hero .knopf:focus-visible { outline-color: #fff; } .knopf--voll { background: var(--rot); color: #fff; } .knopf--voll:hover { background: var(--rot-tief); } .knopf--linie { border-color: currentColor; background: transparent; } .knopf--linie:hover { background: var(--tinte); color: var(--creme); border-color: var(--tinte); } .auf-dunkel .knopf--linie:hover { background: #fff; color: var(--tinte); border-color: #fff; } .knopf--hell { background: #fff; color: var(--tinte); } .knopf--hell:hover { background: var(--creme-tief); } .knopf svg { width: 1.02em; height: 1.02em; flex: none; transition: transform .25s var(--ease); } .knopf:hover svg { transform: translateX(3px); } .textlink { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--klein); text-decoration: none; color: var(--rot); padding-bottom: .2rem; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), gap .25s var(--ease); } .textlink:hover { border-color: currentColor; gap: .8rem; } .textlink svg { width: .92em; height: .92em; } .auf-dunkel .textlink { color: #fff; } /* ========================================================================== MECHANIK 5 — Signatur-Motiv „Typenschild". Scharfkantiges Plättchen mit gesperrter Versalschrift wie am Oldtimer. Kommt auf Kacheln (Nummer) und Quartettkarten (Baujahr) wieder vor. ========================================================================== */ .schild { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid currentColor; border-radius: var(--rundung); padding: .42rem .78rem; font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; line-height: 1; } /* ========================================================================== Kopfzeile — stämmiger als in v2 (Patrick, 06.08.2026) ========================================================================== */ .kopf { position: fixed; inset-inline: 0; top: 0; z-index: 100; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); } .kopf__inner { /* Unten bündig statt mittig: dadurch sitzt das Menü auf Höhe des Schriftzugs im Logo, nicht neben dem Emblem — genau wie auf der alten Seite, wo `.navigation` mit `padding-top:47px` nach unten geschoben war. */ display: flex; align-items: flex-end; gap: clamp(1rem, 2.4vw, 2.6rem); min-height: var(--kopf-h); padding-bottom: 1.15rem; transition: min-height .4s var(--ease), padding-bottom .4s var(--ease); } .kopf.ist-fest { background: var(--creme); box-shadow: 0 1px 0 var(--chrom-hell); } .kopf.ist-fest .kopf__inner { min-height: var(--kopf-h-klein); padding-bottom: .85rem; } /* Das Logo ist ein Emblem: Über dem Schriftzug „I ♥ RETRO BULLI" sitzt der Bogentext mit dem Bus, darunter noch die Webadresse. Bündig ausgerichtet liegt der Schriftzug deshalb HÖHER als die Menüzeile (Patrick, 07.08.2026). Der Versatz schiebt das Emblem so weit nach unten, dass der Schriftzug auf einer Linie mit dem Menü sitzt — die Webadresse ragt dafür etwas tiefer. */ /* Der Schriftzug „I ♥ RETRO BULLI" sitzt im Logo nicht mittig, sondern bei 76,1 % der Bildhöhe (am 07.08.2026 pixelweise ausgemessen: Emblem 1–159, Schriftzug 173–209, Webadresse 239–249 von 251). Der Rest ergibt sich aus der Bildbreite und dem Flex-Layout — am Ende blieben 3,2 % der Höhe als Feinkorrektur übrig, im Browser gemessen statt geschätzt. Weil der Wert an der Höhe hängt, stimmt er auch in der geschrumpften Kopfzeile. */ .kopf__marke { --logo-h: clamp(76px, 7.6vw, 112px); display: flex; align-items: center; margin-right: auto; text-decoration: none; transform: translateY(calc(var(--logo-h) * var(--logo-fein, .032))); transition: transform .4s var(--ease); } .kopf.ist-fest .kopf__marke { --logo-h: clamp(58px, 5.2vw, 78px); --logo-fein: -.061; } .kopf__marke img { height: var(--logo-h); width: auto; transition: height .4s var(--ease); } .kopf__marke .logo-dunkel { display: none; } .kopf.ist-fest .kopf__marke .logo-hell { display: none; } .kopf.ist-fest .kopf__marke .logo-dunkel { display: block; } /* Rechte Spalte: Hotline-Etikett hängt über dem Menü (Vorbild alte Seite) */ .kopf__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .85rem; } .kopf__nav { display: flex; align-items: center; gap: clamp(1.3rem, 2.3vw, 2.3rem); } .kopf__nav a:not(.knopf) { /* Größe an den Logo-Schriftzug angeglichen: der ist bei voller Logohöhe 15,6 px hoch (Zeilen 173–209 von 251), was bei DM Sans etwa 21 px Schriftgröße entspricht. 1,3 rem = 20,8 px kommt dem sehr nahe, ohne dass die fünf Punkte in der Kopfzeile zu dominant werden. */ color: #fff; text-decoration: none; font-size: 1.3rem; font-weight: 600; padding: .4rem 0; position: relative; white-space: nowrap; transition: color .3s var(--ease); } .kopf__nav > .mnu > a::after, .kopf__nav a:not(.knopf)::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--rot); transition: width .3s var(--ease); } .kopf__nav a:not(.knopf):hover::after, .kopf__nav a[aria-current='page']::after { width: 100%; } .kopf.ist-fest .kopf__nav a:not(.knopf) { color: var(--tinte); } /* Im Kopf gar kein Kasten mehr (Patrick, 07.08.2026): Etikett UND umrandeter Knopf direkt übereinander waren zu viel. „Termin anfragen" ist jetzt ein betonter Textlink — das Etikett trägt die Aufmerksamkeit. */ .kopf__nav .knopf { padding: .4rem 0; font-size: 1.3rem; font-weight: 700; background: transparent; border: 0; color: #fff; gap: .5rem; position: relative; } .kopf__nav .knopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rot); transform: scaleX(1); transform-origin: left; transition: transform .3s var(--ease); } .kopf__nav .knopf:hover { transform: none; } .kopf__nav .knopf:hover::after { transform: scaleX(0); transform-origin: right; } .kopf.ist-fest .kopf__nav .knopf { color: var(--tinte); } .kopf__tel { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: #fff; line-height: 1.22; padding-left: clamp(1rem, 1.9vw, 1.8rem); border-left: 1px solid rgba(255,255,255,.24); } .kopf__tel span { font-size: .645rem; letter-spacing: .18em; text-transform: uppercase; opacity: .65; font-weight: 600; } .kopf__tel b { font-size: 1.12rem; font-weight: 700; white-space: nowrap; letter-spacing: -.005em; transition: color .25s var(--ease); } .kopf__tel:hover b { color: var(--rot); } .kopf.ist-fest .kopf__tel { color: var(--tinte); border-left-color: var(--chrom-hell); } .burger { display: none; background: none; border: 0; padding: .55rem; cursor: pointer; color: #fff; } .burger span { display: block; width: 28px; height: 2.5px; background: currentColor; margin: 6px 0; transition: transform .3s var(--ease), opacity .3s var(--ease); } .kopf.ist-fest .burger { color: var(--tinte); } .burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } .kopf__tel-mobil { display: none; } .mnu__schalter { display: none; } /* Zwei Handlungsflächen am Fuß des Mobilmenüs — nur dort sichtbar. Zwei Klassen nötig: Der Kasten trägt zusätzlich `.spalte__tun`, und deren `display: grid` steht weiter unten im Stylesheet. Mit nur `.kopf__tun` gewann die spätere Regel — dadurch stand die Telefonnummer auf dem Desktop ein zweites Mal im Kopf und schob das Logo aus der Zeile (08.08.2026). */ .kopf .kopf__tun { display: none; } /* Früher aufs Mobilmenü umschalten: zwischen 1100 und 1240 px wurde es im Kopf zu eng, der CTA-Knopf geriet unter Druck. */ @media (max-width: 1240px) { .burger { display: block; } .kopf__tel { display: none; } .kopf__nav { position: fixed; inset: var(--kopf-h) 0 auto; z-index: 99; flex-direction: column; align-items: stretch; gap: 0; background: var(--creme); padding: .6rem var(--rand) 2.4rem; border-bottom: 1px solid var(--chrom-hell); /* Volle Höhe statt nur Inhaltshöhe – sonst schimmert das Hero-Foto unter dem geöffneten Menü durch und es sieht aus wie ein Fehler. */ height: calc(100dvh - var(--kopf-h)); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-14px); transition: transform .34s var(--ease), opacity .26s var(--ease), visibility .34s; } .kopf.ist-fest .kopf__nav { top: var(--kopf-h-klein); height: calc(100dvh - var(--kopf-h-klein)); } .kopf__nav.ist-offen { visibility: visible; opacity: 1; transform: translateY(0); } .kopf__nav a:not(.knopf) { color: var(--tinte); font-family: var(--serif); font-size: 1.5rem; font-weight: 400; padding: 1.05rem 0; border-bottom: 0; } .kopf.ist-fest .kopf__nav a:not(.knopf) { color: var(--tinte); } .kopf__nav .mnu__liste a::after { display: none; } .kopf__nav > .mnu > a::after, .kopf__nav a:not(.knopf)::after { display: none; } /* Der Desktop-Knopf ist im Mobilmenü unbrauchbar: durchsichtig, randlos und weiß auf Creme. Ersetzt durch dieselben farbigen Handlungsflächen wie in der Seitenspalte — Patrick, 08.08.2026: „das kriegen wir auch schön hin, mit zwei Call-to-Actions." */ .kopf__nav .knopf { display: none; } .kopf .kopf__nav .kopf__tun { display: grid; margin-top: 1.8rem; } .kopf__nav .kopf__tun a { font-family: var(--sans); font-size: var(--knopftext); font-weight: 600; border-bottom: 0; padding: 1.05rem 1.2rem; justify-content: center; } /* Vier Klassen nötig: `.kopf.ist-fest .kopf__nav a:not(.knopf)` setzt die Textfarbe mit demselben Gewicht, und bei offenem Menü ist `ist-fest` aktiv. */ .kopf .kopf__nav .kopf__tun a.tun--rot, .kopf .kopf__nav .kopf__tun a.tun--dunkel { color: #fff; } .kopf .kopf__nav .kopf__tun a.tun--rot svg, .kopf .kopf__nav .kopf__tun a.tun--dunkel svg { color: #fff; } /* Bei offenem Menü ist die Kopfzeile hell und das Logo klein — dort ist vom Emblem nichts mehr zu erkennen. Deshalb bleibt es hier auf voller Größe. */ /* Bei offenem Menü ist die Kopfzeile hell und das Logo geschrumpft — dort erkennt man vom Emblem nichts mehr. Deshalb bleibt es voll groß. */ .kopf.hat-offenes-menue .kopf__marke { --logo-h: 76px; } .kopf__nav .kopf__tel-mobil { display: flex; margin-top: 1.1rem; justify-content: center; align-items: center; gap: .55rem; color: var(--tinte); text-decoration: none; font-weight: 700; font-family: var(--sans); font-size: 1.1rem; border-bottom: 0; padding: .4rem 0; } .kopf__nav .kopf__tel-mobil svg { width: 1.15rem; height: 1.15rem; } } @media (max-width: 560px) { :root { --kopf-h: 104px; --kopf-h-klein: 82px; } .kopf__marke { --logo-h: 68px; } .kopf.ist-fest .kopf__marke { --logo-h: 56px; } } /* ========================================================================== Hotline-Etikett — Zitat der alten Seite. Dort saß oben rechts ein rotes Feld (`#e11316`), das über den Kopf hinausragte: „Info Hotline" plus Nummer. Patrick mochte das. Hier in unserer Sprache nachgebaut: scharfkantiges Etikett, das an der Oberkante klebt, statt eines zweiten Textblocks neben dem Knopf. ========================================================================== */ .kopf__etikett { display: flex; flex-direction: column; align-items: center; gap: .12rem; background: var(--rot); color: #fff; text-decoration: none; padding: .6rem 1.15rem .7rem; transition: background-color .25s var(--ease); } .kopf__etikett { border-radius: var(--rundung); } .kopf__etikett:hover { background: var(--rot-tief); } .kopf__etikett span { font-size: .6rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; opacity: .85; line-height: 1; } .kopf__etikett b { font-size: 1.06rem; font-weight: 700; white-space: nowrap; line-height: 1.15; } @media (max-width: 1240px) { .kopf__etikett { display: none; } } /* ========================================================================== Hero mit Bild-Slider ========================================================================== */ .hero { position: relative; min-height: min(96svh, 960px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .hero__buehne { position: absolute; inset: 0; } .hero__folie { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s var(--ease); } .hero__folie.ist-da { opacity: 1; } .hero__folie img { width: 100%; height: 100%; object-fit: cover; } .hero__buehne::after { content: ''; position: absolute; inset: 0; z-index: 2; /* Fuß bewusst heller als vorher (.92 → .62): darunter liegt jetzt die eigene Faktenleiste, die soll sich absetzen und nicht in Schwarz ersaufen */ background: linear-gradient(180deg, rgba(10,8,5,.52) 0%, rgba(10,8,5,.06) 24%, rgba(10,8,5,.38) 58%, rgba(10,8,5,.62) 100%), linear-gradient(96deg, rgba(10,8,5,.62) 0%, rgba(10,8,5,.2) 44%, rgba(10,8,5,0) 70%); } .hero__inhalt { position: relative; z-index: 3; color: #fff; width: 100%; padding-top: calc(var(--kopf-h) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(3.4rem, 6vw, 5.5rem); /* Alle Textfolien liegen übereinander in derselben Rasterzelle. Dadurch bestimmt die längste Folie die Höhe und der Hero springt beim Wechsel nicht — das ist bei einem Slider mit unterschiedlich langen Texten die eigentliche Fehlerquelle. */ display: grid; } /* Gestaffelt statt überblendet: Der alte Text ist in 0,3 s weg, der neue kommt erst danach. Beim einfachen Überblenden lagen sekundenlang zwei Überschriften übereinander — unlesbar. Das Bild darunter blendet weiter langsam, das trägt die Ruhe. */ .hero__wort { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; } .hero__wort.ist-da { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease) .3s, transform .55s var(--ease) .3s, visibility 0s; } /* Folien 2 und 3 tragen die Überschrift als

— auf einer Seite darf es nur EINE

geben. Optisch identisch zur ersten. */ .hero__titel { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -.015em; color: #fff; max-width: 14ch; margin: 0 0 .38em; text-shadow: 0 2px 40px rgba(0,0,0,.5); } .hero__titel em { color: var(--sand); font-style: normal; } @media (prefers-reduced-motion: reduce) { .hero__wort { transition: opacity .01s; transform: none; } .hero__folie { transition: opacity .01s; } } .hero h1 { color: #fff; max-width: 14ch; margin-bottom: .38em; text-shadow: 0 2px 40px rgba(0,0,0,.5); } .hero h1 em { color: var(--sand); } .hero .vor { color: rgba(255,255,255,.82); } .hero .vor i { color: var(--sand); } .hero .vor i::after { background: rgba(255,255,255,.35); } .hero__lead { font-size: clamp(1.08rem, 1.35vw, 1.22rem); max-width: 44ch; line-height: 1.6; color: rgba(255,255,255,.92); margin-bottom: 2.2rem; text-shadow: 0 1px 20px rgba(0,0,0,.65); } .hero__knoepfe { display: flex; flex-wrap: wrap; gap: .85rem; } @media (max-width: 560px) { .hero__knoepfe { flex-direction: column; align-items: stretch; } .hero__knoepfe .knopf { width: 100%; } } .hero__punkte { position: absolute; z-index: 4; right: var(--rand); bottom: clamp(6.5rem, 9vw, 8.5rem); display: flex; gap: .5rem; } .hero__punkte button { width: 42px; height: 3px; padding: 0; border: 0; cursor: pointer; background: rgba(255,255,255,.3); transition: background-color .3s var(--ease), transform .3s var(--ease); position: relative; } .hero__punkte button::after { /* größere Trefferfläche, ohne den Strich dicker zu machen */ content: ''; position: absolute; inset: -12px -4px; } .hero__punkte button:hover { background: rgba(255,255,255,.6); } .hero__punkte button[aria-current='true'] { background: #fff; transform: scaleY(2); } .hero__punkte button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; } /* Auf dem Telefon nicht ausblenden — sonst gibt es keinerlei Hinweis darauf, dass es drei Themen gibt, und keine Möglichkeit zu wechseln. */ @media (max-width: 900px) { .hero__punkte { right: auto; left: var(--rand); bottom: clamp(5.5rem, 12vw, 7rem); } .hero__punkte button { width: 34px; } } /* ========================================================================== Verkaufsargumente als schmale Leiste AM FUSS DES HEROS. Patrick, 06.08.2026: als eigenes Band unter dem Hero wirkte das „gewollt und nicht gekonnt" und fand keinen Platz. Jetzt liegt es auf dem Bild und schließt den Hero ab, statt dazwischen herumzustehen. Die technischen Daten (PS, Hubraum, Sitzplätze) stehen nicht mehr hier, sondern unten bei der Flotte — dort gehören sie inhaltlich hin. ========================================================================== */ /* Eigene, klar abgesetzte Fläche statt eines dunklen Verlaufs am Bildfuß — Patrick, 06.08.2026: „zu dunkel, gerne plakativer und abgetrennt". Zentriert statt linksbündig. Die rote Oberkante ist auf seinen Wunsch wieder raus — die eigene Fläche trennt schon deutlich genug ab. */ .hero__fakten { position: relative; z-index: 3; width: 100%; /* Variante „Verlauf" statt harter Kante — zum Vergleich gebaut. Die harte Fassung steckt in `basis-v6-harte-leiste.css`. */ background: linear-gradient(180deg, rgba(23,21,15,0) 0%, rgba(23,21,15,.42) 34%, rgba(23,21,15,.72) 72%, rgba(23,21,15,.86) 100%); padding-top: clamp(2.2rem, 4vw, 3.6rem); } .hero__fakten .huelle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem clamp(1.4rem, 3.4vw, 3.4rem); padding-block: clamp(1rem, 1.6vw, 1.35rem); } .hero__fakten span, .hero__fakten a { display: inline-flex; align-items: center; gap: .6rem; font-size: clamp(.78rem, .95vw, .875rem); font-weight: 600; letter-spacing: .055em; text-transform: uppercase; color: rgba(255,255,255,.92); text-decoration: none; } .hero__fakten span::before, .hero__fakten a::before { content: ''; width: 5px; height: 5px; flex: none; background: var(--rot); transform: rotate(45deg); } .hero__fakten a { color: #fff; transition: color .25s var(--ease); } .hero__fakten a:hover { color: var(--sand); } @media (max-width: 700px) { .hero__fakten .huelle { gap: .5rem 1.2rem; padding-block: .85rem; } .hero__fakten span, .hero__fakten a { font-size: .68rem; letter-spacing: .045em; } } /* ========================================================================== MECHANIK 2 + 4 — Anlass-Bento. Hochzeit ist ~90 % des Geschäfts und liegt deshalb doppelt so groß. Der Text sitzt NICHT im Verlauf auf dem Foto, sondern auf einem massiven Tintensockel: garantiert lesbar und das Bild steht auf etwas. ========================================================================== */ .anlaesse { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(250px, 24vw, 340px); gap: clamp(.7rem, 1.1vw, 1rem); } .kachel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; text-decoration: none; color: #fff; background: var(--tinte); transition: transform .45s var(--ease); } .kachel--gross { grid-column: span 2; grid-row: span 2; } .kachel__bild { position: absolute; inset: 0; overflow: hidden; } .kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } /* Abdunkler oben für das Typenschild */ .kachel__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,10,6,.34) 0%, rgba(12,10,6,0) 40%); } .kachel:hover .kachel__bild img { transform: scale(1.055); } /* Typenschild auf dem Foto — mit eigener Abdunklung, damit es auch auf hellen Bildstellen sicher lesbar bleibt */ .kachel__nr { position: absolute; z-index: 3; top: clamp(1rem, 1.5vw, 1.4rem); left: clamp(1rem, 1.5vw, 1.4rem); color: #fff; background: rgba(12,10,6,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Verlauf statt massivem Sockel (Patrick, 06.08.2026). Der Verlauf hängt am Textblock, nicht am Bild — dadurch skaliert er mit der Textmenge und die dunkelste Zone liegt IMMER genau unter der Schrift, egal wie groß die Kachel ist. Zusätzlich ein Textschatten als Sicherheitsnetz. */ .kachel__inhalt { position: relative; z-index: 2; padding: clamp(3.5rem, 6vw, 6rem) clamp(1.35rem, 2vw, 1.9rem) clamp(1.4rem, 2vw, 1.9rem); background: linear-gradient(0deg, rgba(10,8,5,.95) 0%, rgba(10,8,5,.90) 44%, rgba(10,8,5,.68) 68%, rgba(10,8,5,.32) 86%, rgba(10,8,5,0) 100%); } .kachel__inhalt::before { content: ''; display: block; width: 34px; height: 2.5px; background: var(--rot); margin-bottom: 1.05rem; transition: width .4s var(--ease); } .kachel:hover .kachel__inhalt::before { width: 76px; } .kachel__inhalt h3 { color: #fff; margin-bottom: .4rem; text-shadow: 0 2px 18px rgba(0,0,0,.55); } .kachel__inhalt h3 em { color: var(--sand); } .kachel__inhalt p { font-size: var(--klein); line-height: 1.55; color: rgba(255,255,255,.82); margin-bottom: .9rem; text-shadow: 0 1px 14px rgba(0,0,0,.6); } .kachel .textlink { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.6); } /* In den kleinen Kacheln bleibt der Sockel knapp */ .kachel:not(.kachel--gross) .kachel__inhalt p { display: none; } @media (max-width: 900px) { .anlaesse { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .9rem; } .kachel--gross { grid-column: auto; grid-row: auto; } .kachel { min-height: 430px; } .kachel:not(.kachel--gross) .kachel__inhalt p { display: block; } } /* ========================================================================== Zweispalter Text / Bild ========================================================================== */ .duo { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(2.5rem, 5.5vw, 5.5rem); align-items: stretch; } .duo > *:not(.duo__bild) { align-self: center; } /* Steht die Überschrift schon über dem Paar, ist die Textspalte nur noch eine Fortsetzung — sie gehört dann nach oben, nicht in die Mitte. Sonst hängt die Aufzählung mitten im Nichts (Patrick, 07.08.2026: „die Aufzählungspunkte hängen viel zu weit unten"). */ .sektionskopf + .duo > *:not(.duo__bild) { align-self: start; } /* Auch das Bild gehört dann nach oben — sonst sitzt es unten rechts, während der Text oben links beginnt (Patrick, 08.08.2026 zu Touren, Punkt 5). */ .sektionskopf + .duo > .duo__bild { align-self: start; } /* Bild nach links — dann muss auch die Spaltenbreite mitwandern, sonst ist das Bild links 527 px und rechts 570 px breit (gemessen 07.08.2026). */ .duo--gedreht { grid-template-columns: 1.08fr 1fr; } .duo--gedreht .duo__bild { order: -1; } /* Breitere Bildspalte — das hochkante Format wirkte zu schmal (Patrick, 06.08.2026) */ .duo--bildbreit { grid-template-columns: 1.45fr 1fr; } .duo--bildbreit .duo__bild { min-height: clamp(320px, 34vw, 500px); } /* Festes Hochformat 4:5 für JEDES Text-Bild-Paar. Vorher richtete sich die Bildhöhe nach der Textlänge daneben — dadurch war dasselbe Bauteil einmal 661×742 und einmal 612×880 groß. Patrick, 07.08.2026: „zwischendurch gibt es so große Fotos und kleinere Fotos." Jetzt hat jedes Bild dieselbe Form. */ .duo__bild { position: relative; overflow: hidden; display: flex; align-self: start; } .duo__bild > img { width: 100%; aspect-ratio: 4/5; height: auto; object-fit: cover; flex: 1; } /* Auch das Bildmosaik der Fahrzeugseite bekommt die 4:5-Form — sonst ist es bei jedem der drei Bullis unterschiedlich hoch (gemessen: 847, 735, 742 px). */ .duo__bild.fzg-bilder { align-self: start; aspect-ratio: 4/5; min-height: 0; } .duo__bild img { width: 100%; height: 100%; object-fit: cover; flex: 1; } @media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 2.4rem; } .duo--gedreht .duo__bild { order: 0; } .duo__bild > img { aspect-ratio: 4/3; } .duo__bild.fzg-bilder { aspect-ratio: 4/3; } } /* Sanfter Parallax */ .parallax { overflow: hidden; } .parallax img { will-change: transform; transform: translate3d(0, var(--versatz, 0px), 0) scale(1.16); } /* ---------- Häkchenliste ---------- */ /* max-width in rem statt ch: „76ch" ergab real 109–117 Zeichen je Zeile, weil ch an der Ziffernbreite hängt, nicht am Durchschnittszeichen. */ .haken { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .8rem; max-width: 38rem; } /* Folgt die Aufzählung direkt auf einen Sektionskopf, addieren sich dessen Abstand nach unten und der eigene nach oben zu einer Lücke von ~90 px (Patrick, 07.08.2026: „der Abstand ist zu hoch"). Die Aufzählung gehört inhaltlich zum Text darüber und rückt deshalb näher heran. */ .sektionskopf + .haken, .sektionskopf + .duo .haken:first-child { margin-top: 0; } .haken li { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--text); line-height: 1.55; } .haken svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--rot); margin-top: .32rem; } .auf-dunkel .haken svg { color: var(--sand); } /* ========================================================================== Die Flotte — drei Fronten, sonst nichts. Patrick, 06.08.2026: Das Autoquartett war sinnfrei (alle Werte gleich), der Umschalter mit dem großen Bild war zu wuchtig. Dritter Anlauf: Die drei Bullis werden über ihr GESICHT unterschieden, nicht über Zahlenkolonnen — drei Frontansichten im Hochformat nebeneinander, darunter Baujahr, Bauart und der eine Satz, der den Unterschied macht. Keine Kästen, kein Rahmen, kein Schatten. Die gemeinsamen Daten stehen genau einmal darunter. ========================================================================== */ /* Seit dem vierten Fahrzeug (Camper, 10.08.2026) laufen die Karten waagerecht statt umzubrechen. Patrick ausdrücklich: der vierte gehört DANEBEN, nicht darunter. Drei sind sichtbar, der vierte schaut angeschnitten herein — das ist die Einladung zum Weiterblättern; ein sauber abschließendes Raster würde niemand anfassen. */ .flotte__buehne { position: relative; } .flotte { display: grid; grid-auto-flow: column; /* 3,25 statt 3: Die vierte Karte schaut ein Stück herein. Ein sauber abschließendes Dreierraster sieht fertig aus — dann fasst niemand den Pfeil an, weil nichts darauf hindeutet, dass es weitergeht. */ grid-auto-columns: calc((100% - 2.25 * clamp(1.2rem, 2.8vw, 2.6rem)) / 3.25); gap: clamp(1.2rem, 2.8vw, 2.6rem); overflow-x: auto; /* „proximity" statt „mandatory": Bei mandatory ignoriert Chromium scrollBy({behavior:'smooth'}) — die Pfeile bewegen dann NICHTS, obwohl alles richtig aussieht (gefunden im Klicktest am 11.08.2026). proximity rastet weiterhin ein, blockiert das Blättern per Skript aber nicht. */ scroll-snap-type: x proximity; scroll-behavior: smooth; /* Der Rand schafft Platz, damit die angeschnittene vierte Karte nicht hart an der Hüllenkante klebt; der negative Außenabstand holt ihn wieder rein, damit die erste Karte weiter in der Flucht der Überschrift steht. */ padding-inline: 0 clamp(1.2rem, 2.8vw, 2.6rem); scrollbar-width: none; } .flotte::-webkit-scrollbar { display: none; } .flotte__bulli { scroll-snap-align: start; } .flotte:focus-visible { outline: 2px solid var(--rot); outline-offset: 6px; } .flotte__pfeil { position: absolute; top: 32%; z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--tinte); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(23,21,15,.28); transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s; } .flotte__pfeil:hover { background: var(--rot); transform: scale(1.06); } .flotte__pfeil:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; } .flotte__pfeil svg { width: 20px; height: 20px; } .flotte__pfeil--zurueck { left: calc(-1 * clamp(.6rem, 1.6vw, 1.4rem)); } .flotte__pfeil--vor { right: calc(-1 * clamp(.6rem, 1.6vw, 1.4rem)); } .flotte__pfeil[hidden] { display: none; } @media (max-width: 900px) { .flotte { grid-auto-columns: calc((100% - clamp(1.2rem, 2.8vw, 2.6rem)) / 2); } } @media (max-width: 620px) { /* Auf dem Handy zeigt die angeschnittene zweite Karte, dass es weitergeht. Die Pfeile fallen weg — dort wird gewischt. */ .flotte { grid-auto-columns: 82%; } .flotte__pfeil { display: none; } } .flotte__bulli { display: flex; flex-direction: column; } .flotte__bild { overflow: hidden; background: var(--creme-tief); } /* Quadrat statt Hochformat: die Vorlagen sind Querformate, ein 4:5-Schnitt hat den Bullis die Stoßstange abgeschnitten. */ .flotte__bild img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 55%; transition: transform 1s var(--ease); } .flotte__bulli:hover .flotte__bild img { transform: scale(1.045); } .flotte__kopf { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; margin-top: clamp(1.1rem, 1.8vw, 1.5rem); } .flotte__jahr { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--tinte); } .flotte__bauart { font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--rot); } .flotte__satz { margin: .7rem 0 0; font-size: .96rem; line-height: 1.6; color: var(--tinte-weich); } /* Die gemeinsamen technischen Daten – genau einmal, nicht dreimal */ .flotte__gemein { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem clamp(.9rem, 1.8vw, 1.6rem); margin: clamp(2.2rem, 3.6vw, 3.2rem) 0 0; padding-top: clamp(1.4rem, 2.2vw, 1.9rem); border-top: 1px solid var(--chrom-hell); font-size: .95rem; color: var(--tinte-weich); } .flotte__gemein strong { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .68rem; color: var(--tinte); margin-right: .4rem; } .flotte__gemein span { display: inline-flex; align-items: baseline; gap: .4em; } .flotte__gemein span + span::before { content: ''; width: 4px; height: 4px; flex: none; background: var(--chrom); transform: rotate(45deg) translateY(-.4em); margin-right: clamp(.9rem, 1.8vw, 1.6rem); } .flotte__gemein b { font-weight: 600; color: var(--tinte); } @media (max-width: 760px) { .flotte { grid-template-columns: 1fr; gap: 2.4rem; } .flotte__bild img { aspect-ratio: 4/3; } } /* ========================================================================== Fahrzeug-Bildmosaik — die-bullis.html Pro Fahrzeug drei Motive statt einem (Außen, Innenraum, Detail), damit die Bildspalte nicht in gleich hohe Kacheln zerfällt (Mechanik 2). Sitzt anstelle von .duo__bild in der Bildspalte und übernimmt darum dessen Klasse mit — so funktionieren Drehung (duo--gedreht) und Parallax weiter. ========================================================================== */ .duo__bild.fzg-bilder { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(.5rem, 1.2vw, .9rem); } .fzg-bilder__gross { grid-row: 1 / span 2; position: relative; overflow: hidden; } .fzg-bilder__klein { position: relative; overflow: hidden; } .fzg-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .duo__bild.fzg-bilder { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .fzg-bilder__gross { grid-row: auto; grid-column: 1 / span 2; aspect-ratio: 4/3; } .fzg-bilder__klein { aspect-ratio: 4/3; } } /* ---------- Sprungmarken: nicht unter der fixen Kopfzeile verschwinden ---------- */ [id] { scroll-margin-top: calc(var(--kopf-h-klein) + 1rem); } /* -------------------------------------------------------------------------- SCHRITTE — der EINE Ablauf-Baustein der Seite. Zweiter Anlauf (Patrick, 07.08.2026): „Vielleicht sehen auch die Zahlen einfach scheiße aus, weil du da die Serifenzahlen hast. Lieber serifenlos und plakativer, wirklich wie fünf Schritte — und nicht wie eine 20, 30 Jahre alte Timeline mit so komischen Vierecken da oben." Also: große serifenlose Ziffern als eigentliches Gestaltungsmittel, keine Verbindungslinie, keine Knotenpunkte. Die Nummer trägt, der Rest ist ruhig. Markup:
  1. 01…

    …

    2. Varianten: --fuenf (fünf statt vier Spalten) · --senkrecht (schmale Spalte) -------------------------------------------------------------------------- */ .schritte { list-style: none; margin: clamp(2.4rem, 4vw, 3.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); } .schritte--fuenf { grid-template-columns: repeat(5, 1fr); } .schritte li { position: relative; padding-top: clamp(1rem, 1.6vw, 1.3rem); border-top: 2px solid var(--tinte); } .schritte i { display: block; font-family: var(--sans); font-style: normal; font-size: clamp(2.4rem, 3.6vw, 3.4rem); font-weight: 700; line-height: .95; letter-spacing: -.04em; color: var(--rot); margin-bottom: .55rem; font-variant-numeric: tabular-nums; } .schritte b { display: block; font-size: var(--text); font-weight: 600; color: var(--tinte); margin-bottom: .35rem; line-height: 1.25; } .schritte p { margin: 0; font-size: var(--klein); line-height: 1.55; color: var(--tinte-weich); } .auf-dunkel .schritte li { border-top-color: rgba(255,255,255,.55); } .auf-dunkel .schritte i { color: var(--sand); } .auf-dunkel .schritte b { color: #fff; } .auf-dunkel .schritte p { color: rgba(255,255,255,.78); } /* Senkrechte Variante für schmale Spalten: gleiche Bausteine, nur Ziffer neben dem Text statt darüber und ohne die kräftige Oberlinie. */ .schritte--senkrecht { display: grid; grid-template-columns: 1fr; gap: 1.15rem; margin-top: 0; } .schritte--senkrecht li { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0 .9rem; padding-top: 0; border-top: 0; } .schritte--senkrecht i { grid-row: 1 / span 2; font-size: 1.25rem; line-height: 1.25; margin-bottom: 0; letter-spacing: 0; } .schritte--senkrecht b { grid-column: 2; font-size: var(--text); margin-bottom: .1rem; } .schritte--senkrecht p { grid-column: 2; font-size: var(--klein); } @media (max-width: 1040px) { .schritte, .schritte--fuenf { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .schritte, .schritte--fuenf { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } } @media (max-width: 430px) { .schritte, .schritte--fuenf { grid-template-columns: 1fr; } } /* ========================================================================== Referenzen — Logoleiste. Patrick, 06.08.2026: „müssen kleiner, einige sind schlecht zu lesen." Ursache war CSS-`filter: grayscale()` auf ungleich hellen Logos — helle Marken (P.U.N.K.T. PR, pulsmacher) verschwanden fast. Jetzt wie bei STREET-KITCHEN: vorab tonwert-normalisierte Dateien (assets/logos-grau), KEIN CSS-Filter, feste Höhe, Rand-Ausblendung per mask-image, Farbversion erst beim Zeigen. ========================================================================== */ .laufband { overflow: hidden; position: relative; max-width: 100%; --dauer: 68s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .laufband__spur { display: flex; align-items: center; width: max-content; animation: rollen var(--dauer) linear infinite; } .laufband:hover .laufband__spur { animation-play-state: paused; } /* Feste Mindestbreite je Marke: sonst wächst die Spur beim Nachladen der Lazy-Bilder und das Laufband springt. */ .laufband__marke { position: relative; display: flex; align-items: center; justify-content: center; height: 71px; min-width: clamp(170px, 15vw, 216px); flex: none; } /* Graustufe im Ruhezustand, Farbe beim Zeigen. Der erste Anlauf scheiterte, weil die Tonwerte auf 30–188 gespreizt wurden: helle Logoteile (IPG, pulsmacher, P.U.N.K.T. PR) landeten bei 188 und verschwanden auf dem cremefarbenen Grund. Mit dem Deckel bei 150 ist jedes Logo lesbar und die Leiste bleibt trotzdem ruhig. Erzeugt mit: python3 tools/bild_werkzeug.py grau (ziel_hell=150) */ /* Alle Dateien liegen auf derselben Leinwand (330×220, tools/bild_werkzeug.py leinwand). Deshalb genügt EINE Höhenangabe — jedes Logo belegt automatisch dieselbe Fläche und wirkt optisch gleich groß. Keine Einzelfaktoren mehr. */ .laufband__marke img { height: 71px; width: 107px; object-fit: contain; transition: opacity .3s var(--ease); } .laufband__marke .lm-grau { opacity: .9; } .laufband__marke .lm-farbe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .laufband__marke:hover .lm-grau { opacity: 0; } .laufband__marke:hover .lm-farbe { opacity: 1; } @keyframes rollen { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Unterzeile der Referenzleiste — bewusst wieder da und mit Luft drumherum (Patrick, 06.08.2026: „es war ein Fehler von mir, das wegzunehmen"). */ .laufband__hinweis { margin: clamp(2.4rem, 4vw, 3.4rem) 0 0; max-width: 58ch; font-size: 1.02rem; line-height: 1.65; color: var(--tinte-weich); } .laufband__hinweis b { font-weight: 600; color: var(--tinte); } @media (prefers-reduced-motion: reduce) { .laufband__spur { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } } @media (max-width: 620px) { .laufband__marke { height: 48px; min-width: 122px; } .laufband__marke img { height: 48px; width: 72px; } } /* ========================================================================== FAQ ========================================================================== */ .faq { border-top: 1px solid var(--chrom); } .faq details { border-bottom: 1px solid var(--chrom); } .faq summary { list-style: none; cursor: pointer; padding: 1.65rem 3rem 1.65rem 0; position: relative; font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.75vw, 1.4rem); line-height: 1.32; transition: color .25s var(--ease); } .faq summary:hover { color: var(--rot); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after, .faq summary::before { content: ''; position: absolute; right: .5rem; top: 50%; background: var(--rot); transition: transform .3s var(--ease), opacity .3s var(--ease); } .faq summary::after { width: 15px; height: 2px; transform: translateY(-50%); } .faq summary::before { width: 2px; height: 15px; right: calc(.5rem + 6.5px); transform: translateY(-50%); } .faq details[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); } .faq__antwort { padding: 0 3rem 1.8rem 0; color: var(--tinte-weich); max-width: 68ch; } /* ========================================================================== Abschluss-CTA (Rot – der EINE laute Moment) und Fußzeile (Tinte) ========================================================================== */ .abschluss { text-align: center; color: #fff; } .abschluss .vor { justify-content: center; color: rgba(255,255,255,.78); } .abschluss .vor i { color: #fff; } .abschluss .vor i::after { background: rgba(255,255,255,.4); } .abschluss h2 { color: #fff; max-width: 20ch; margin-inline: auto; } .abschluss h2 em { color: var(--tinte); } .abschluss .lead { max-width: 52ch; margin-inline: auto; margin-bottom: 2.4rem; color: #fff; } .abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; } .abschluss .knopf--hell:hover { background: var(--tinte); color: #fff; } .abschluss .knopf--linie { color: #fff; } .abschluss .knopf--linie:hover { background: #fff; color: var(--rot); border-color: #fff; } .fuss { background: var(--tinte); color: rgba(255,255,255,.6); padding-block: clamp(3.5rem,6vw,5rem) 2.2rem; font-size: var(--klein); } .fuss__gitter { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; } .fuss h4, .fuss__titel { color: #fff; font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 1.35rem; } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .fuss a { text-decoration: none; transition: color .25s var(--ease); } .fuss a:hover { color: #fff; } .fuss__logo { height: 118px; width: auto; margin-bottom: 1.5rem; } .fuss__unten { border-top: 1px solid rgba(255,255,255,.13); padding-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .83rem; } .fuss__unten nav { display: flex; gap: 1.6rem; flex-wrap: wrap; } @media (max-width: 880px) { .fuss__gitter { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .fuss__gitter { grid-template-columns: 1fr; gap: 2.2rem; } } /* ---------- Einblenden (gestaffelt wie bei SK) ---------- */ /* NUR verstecken, wenn JavaScript nachweislich läuft (Kennzeichen .hat-js aus dem ). Sonst bliebe der Inhalt für jeden unsichtbar, bei dem das Skript nicht ankommt — gefunden am 12.08.2026 beim WebKit-Test. */ .hat-js .zeig { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); } .hat-js .zeig.drin { opacity: 1; transform: none; } .zeig--2 { transition-delay: .08s; } .zeig--3 { transition-delay: .16s; } .zeig--4 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .hat-js .zeig { opacity: 1; transform: none; } } /* ---------- Sprungmarke ---------- */ .skip { position: fixed; left: 1rem; top: 1rem; z-index: 200; background: var(--rot); color: #fff; padding: .9rem 1.4rem; font-weight: 600; text-decoration: none; transform: translateY(calc(-100% - 1.5rem)); transition: transform .2s var(--ease); } .skip:focus, .skip:focus-visible { transform: none; } @media (max-width: 1040px) { .konfig { grid-template-columns: 1fr; } } @media (max-width: 620px) { .kreihe { grid-template-columns: 1fr; } } @media (max-width: 1040px) { .kaside { position: static; margin-top: 3rem; } } @media (max-width: 980px) { .mauerwerk { columns: 3 190px; } } @media (max-width: 640px) { .mauerwerk { columns: 2 150px; column-gap: .5rem; } .mauerwerk__stueck { margin-bottom: .5rem; } } @media (max-width: 420px) { .mauerwerk { columns: 1; } } @media (max-width: 640px) { .licht__vor, .licht__zurueck { width: 44px; height: 44px; } .licht__vor svg, .licht__zurueck svg { width: 19px; height: 19px; } .licht__schliessen { width: 40px; height: 40px; } }` je Seite ein eigenes Motiv, und das Menü liegt buchstäblich auf dem Bild. Hier in unserer Sprache nachgebaut: ein Bildband unter der festen Kopfzeile, flacher als der Hero der Startseite. Damit sieht JEDE Seite aus wie aus einem Guss — Menü immer auf Bild, nie auf leerer Fläche. ========================================================================== */ @media (max-width: 560px) { .seitenkopf { min-height: clamp(360px, 58vh, 480px); } .seitenkopf--knapp { min-height: clamp(260px, 40vh, 340px); } .seitenkopf .hero__knoepfe { flex-direction: column; align-items: stretch; } .seitenkopf .hero__knoepfe .knopf { width: 100%; } } /* Zusatztext nur im Überblick, nicht im Menü */ /* ========================================================================== SEITENSPALTE — Untermenü, Ansprechpartner und Anfrage rechts neben dem Text -------------------------------------------------------------------------- Erster Versuch war ein waagerechtes Band unter dem Seitenkopf. Patrick: „Macht da oben keinen Sinn und sieht auch nicht geil aus." Vorbild sind jetzt die alte ilovebulli-Seite (dort stand rechts die „Überblick"-Liste) und die Anfrage-Spalte der STREET-KITCHEN-Seite: eine mitlaufende Spalte neben dem Inhalt mit drei Dingen — wo es weitergeht, wer ansprechbar ist, und der Anfrage-Knopf. Keine Kästen: Haarlinien, Nummern, farbige Handlungsaufforderungen. ========================================================================== */ .mitspalte { display: grid; grid-template-columns: 1.5fr .85fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } @media (max-width: 1040px) { .mitspalte { grid-template-columns: 1fr; gap: 3rem; } } .spalte { position: sticky; top: calc(var(--kopf-h-klein) + 1.5rem); display: grid; gap: 0; } @media (max-width: 1040px) { .spalte { position: static; } } .spalte__gruppe { padding-block: clamp(1.4rem, 2vw, 1.8rem); border-top: 1px solid var(--chrom-hell); } .spalte__gruppe:first-child { border-top: 0; padding-top: 0; } .spalte h4, .spalte__titel, .kaside__gruppe .spalte__titel { font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--tinte-weich); margin: 0 0 1rem; } .spalte__punkte { display: flex; flex-direction: column; } .spalte__punkte a { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; text-decoration: none; color: var(--tinte); border-bottom: 1px solid var(--chrom-hell); font-size: var(--text); font-weight: 500; line-height: 1.35; transition: color .2s var(--ease); } .spalte__punkte a:last-child { border-bottom: 0; } .spalte__punkte svg { width: .95rem; height: .95rem; flex: none; color: var(--rot); transition: transform .22s var(--ease); } .spalte__punkte a:hover { color: var(--rot); } .spalte__punkte a:hover svg { transform: translateX(3px); } .spalte__person p { font-size: var(--text); line-height: 1.6; color: var(--tinte-weich); margin: 0; } .spalte__person b { color: var(--tinte); } /* Farbige Handlungsaufforderungen statt Kästchen (Patrick, 07.08.2026) */ .spalte__tun { display: grid; gap: .55rem; margin-top: 1.4rem; } .spalte__tun a { border-radius: var(--rundung); font-size: var(--knopftext); display: flex; align-items: center; gap: .65rem; padding: .95rem 1.1rem; text-decoration: none; font-weight: 600; transition: background-color .22s var(--ease), transform .22s var(--ease); } .spalte__tun a:hover { transform: translateY(-2px); } .spalte__tun svg { width: 1.05em; height: 1.05em; flex: none; } .spalte__tun .tun--rot { background: var(--rot); color: #fff; } .spalte__tun .tun--rot:hover { background: var(--rot-tief); } .spalte__tun .tun--dunkel { background: var(--tinte); color: #fff; } .spalte__tun .tun--dunkel:hover { background: #000; } /* Auf dunkler Fläche — seit die Werbefahrzeug-Seite überwiegend auf Anthrazit läuft (B2B-Ton, 07.08.2026). Ohne diese Regeln steht die Spalte dunkel auf dunkel und ist schlicht nicht lesbar. */ .auf-dunkel .spalte h4 { color: rgba(255,255,255,.62); } .auf-dunkel .spalte__gruppe { border-top-color: rgba(255,255,255,.18); } .auf-dunkel .spalte__punkte a { color: #fff; border-bottom-color: rgba(255,255,255,.16); } .auf-dunkel .spalte__punkte a:hover { color: var(--sand); } .auf-dunkel .spalte__punkte svg { color: var(--sand); } .auf-dunkel .spalte__person p { color: rgba(255,255,255,.78); } .auf-dunkel .spalte__person b { color: #fff; } .auf-dunkel .spalte__tun .tun--dunkel { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); } .auf-dunkel .spalte__tun .tun--dunkel:hover { background: rgba(255,255,255,.18); } .auf-dunkel .khinweis { color: rgba(255,255,255,.78); border-left-color: var(--sand); } .auf-dunkel .khinweis b { color: #fff; } .auf-dunkel .khinweis a { color: var(--sand); } .auf-dunkel .datenblatt__fuss { color: rgba(255,255,255,.7); } .auf-dunkel .lead { color: rgba(255,255,255,.82); } .kdirekt__hinweis { margin: .9rem 0 0; font-size: .85rem; color: var(--tinte-weich); } /* Inhalte, die neben der Spalte weniger Breite haben, ordnen sich um: das Kachelraster wird zweispaltig, das Datenblatt einspaltig. */ .mitspalte .anlaesse { grid-template-columns: repeat(2, 1fr); } .mitspalte .kachel--gross { grid-column: span 2; grid-row: span 1; } /* Vier Kacheln neben der Spalte: die große bleibt groß (sonst entsteht ein Raster aus lauter gleichen Feldern — genau das soll das Kachelraster nicht), dafür läuft die vierte ebenfalls über beide Spalten. Kein Rest, keine angebrochene Reihe. */ .mitspalte .anlaesse:has(> :nth-child(4)) > :last-child { grid-column: span 2; } @media (max-width: 720px) { /* Stapelt die Spalte ohnehin, gilt wieder das normale Mobil-Raster. */ .mitspalte .anlaesse { grid-template-columns: 1fr; } .mitspalte .kachel--gross, .mitspalte .anlaesse:has(> :nth-child(4)) .kachel--gross { grid-column: span 1; } } /* ========================================================================== ANFRAGE-KONFIGURATOR -------------------------------------------------------------------------- Vorbilder waren die Anfrageformulare von STREET-KITCHEN und THE COURT. Übernommen: Gliederung in redaktionelle Gruppen statt Feldnamen, anklickbare Auswahlflächen statt Auswahllisten, eine begleitende Spalte rechts. Bewusst BESSER gemacht, weil beide Vorbilder das nicht haben: - Optionen blenden sich je nach Anlass ein (Hochzeit zeigt Blumenschmuck, Werbung zeigt Folierung) — sonst füllt man Felder aus, die nicht passen - eine LIVE mitlaufende Zusammenfassung rechts: man sieht die eigene Anfrage entstehen, das macht aus dem Formular ein Werkzeug - echter Spamschutz (Honigtopf + Zeitfalle + serverseitige Prüfung) — das ist der eigentliche Auslöser des Projekts, die alte Seite wird geflutet ========================================================================== */ .konfig { display: grid; grid-template-columns: 1fr 380px; gap: clamp(2rem, 4vw, 4rem); align-items: start; } @media (max-width: 1040px) { .konfig { grid-template-columns: 1fr; } } /* ---------- Gruppen ---------- */ .kgruppe { padding-block: clamp(2rem, 3.4vw, 2.8rem); border-top: 1px solid var(--chrom-hell); } .kgruppe:first-of-type { border-top: 0; padding-top: 0; } .kgruppe__kopf { display: block; margin-bottom: .5rem; } .kgruppe__kopf h3 { margin-top: .35rem; } /* Dieselbe Behandlung wie die Sektionsnummer im Rest der Seite (.vor i) — vorher gab es drei verschiedene Nummerierungen für dieselbe Bedeutung „das ist Schritt X". */ .kgruppe__nr { font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; line-height: 1.4; color: var(--rot); flex: none; font-variant-numeric: tabular-nums; } .kgruppe__nr::after { content: ''; display: inline-block; width: 26px; height: 1px; background: var(--chrom); vertical-align: middle; margin: 0 0 .18em .7rem; } .kgruppe h3, .kgruppe h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.15; } .kgruppe__hilfe { font-size: var(--klein); color: var(--tinte-weich); margin: 0 0 1.4rem; max-width: 56ch; } /* ---------- Auswahlflächen ---------- */ .kchips { display: flex; flex-wrap: wrap; gap: .6rem; } .kchip { display: inline-flex; align-items: center; gap: .55rem; padding: .82rem 1.15rem; cursor: pointer; background: var(--weiss); border: 1.5px solid var(--chrom-hell); border-radius: 7px; font-size: var(--text); font-weight: 500; line-height: 1.2; color: var(--tinte); transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .kchip:hover { border-color: var(--tinte); } .kchip input { position: absolute; opacity: 0; width: 0; height: 0; } .kchip:has(input:checked) { background: var(--tinte); border-color: var(--tinte); color: #fff; } .kchip:has(input:focus-visible) { outline: 2px solid var(--rot); outline-offset: 2px; } /* Mehrfachauswahl bekommt ein Kästchen, damit der Unterschied sichtbar ist */ .kchip--mehr::before { content: ''; width: 15px; height: 15px; flex: none; border-radius: 3px; border: 1.5px solid var(--chrom); background: transparent; transition: background-color .2s var(--ease), border-color .2s var(--ease); } .kchip--mehr:has(input:checked)::before { background: var(--rot); border-color: var(--rot); box-shadow: inset 0 0 0 2px var(--tinte); } /* ---------- Eingabefelder ---------- */ .kfeld { display: block; margin-bottom: 1.1rem; } .kfeld > span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .45rem; } .kfeld > span em { font-style: normal; font-weight: 400; color: var(--tinte-weich); } .kfeld > span b { font-weight: 600; color: var(--rot); } .kfeld input, .kfeld select, .kfeld textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--tinte); background: var(--weiss); border: 1.5px solid var(--chrom-hell); padding: .85rem 1rem; /* Leichte Rundung nur an den Eingabefeldern — sie sollen einladend wirken, ohne dass die scharfkantige Formensprache der Seite aufgeweicht wird. */ border-radius: 8px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .kfeld textarea { min-height: 120px; resize: vertical; } .kfeld input:focus, .kfeld select:focus, .kfeld textarea:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(206,74,62,.22); } .kfeld input:user-invalid, .kfeld textarea:user-invalid { border-color: var(--rot); } .kreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } @media (max-width: 620px) { .kreihe { grid-template-columns: 1fr; } } /* Bedingte Blöcke – nur sichtbar, wenn sie zum Anlass passen */ .kbedingt[hidden] { display: none; } /* Hinweis auf den Schwesterbetrieb */ /* Standard auf den Inhaltsseiten: eine ruhige Randnotiz mit roter Kante, KEIN grauer Kasten. Patrick, 07.08.2026 zur Werbefahrzeug-Seite: „diese Fläche darunter, diese graue — was soll das?" Der weiche Kasten war für die Formularfelder gedacht und hatte auf einer Textseite nichts verloren. */ .khinweis { margin-top: 1.6rem; padding: .2rem 0 .2rem 1.2rem; border-left: 2px solid var(--rot); max-width: 38rem; font-size: var(--text); line-height: 1.6; color: var(--tinte-weich); } /* Im Anfrageformular bleibt der weiche Kasten — dort passt er zu den ebenfalls leicht gerundeten Eingabefeldern. */ .kgruppe .khinweis { padding: 1rem 1.15rem; border-left: 0; border-radius: 8px; max-width: none; background: var(--creme-tief); } .khinweis b { color: var(--tinte); font-weight: 600; } .khinweis a { color: var(--rot); font-weight: 600; } /* ---------- Einwilligung ---------- */ .kdsgvo { display: flex; gap: .8rem; align-items: flex-start; margin: 1.6rem 0 0; font-size: var(--klein); line-height: 1.55; color: var(--tinte-weich); } .kdsgvo input { width: 20px; height: 20px; flex: none; margin-top: .18rem; accent-color: var(--rot); } .kdsgvo a { color: var(--rot); } /* ---------- Honigtopf: für Menschen unsichtbar, für Robots verlockend ---------- */ .khonig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------- Begleitspalte ---------- Vorher zwei Kästen übereinander (heller Kasten + dunkler Kasten) — laut Patrick „nicht so schön". Jetzt eine durchgehende Spalte mit Überschrift, feinen Trennlinien und Handlungsaufforderungen am Fuß. Kein Kasten im Kasten. */ .kaside { position: sticky; top: calc(var(--kopf-h-klein) + 1.5rem); } @media (max-width: 1040px) { .kaside { position: static; margin-top: 3rem; } } /* Beide Begleitspalten (.spalte auf den Themenseiten, .kaside auf der Anfrageseite) beginnen gleich: kleine Überzeile, dann Gruppen mit Haarlinie. Vorher eröffnete .kaside mit einer großen Serifenzeile — dadurch verlor die rechte Spalte beim Seitenwechsel ihr Startmuster. */ .kaside h4, .kaside .spalte__titel { font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--tinte-weich); margin: 0 0 1rem; } /* Gleicher senkrechter Rhythmus wie in den Formulargruppen links: gleiche Innenabstände, gleiche Haarlinie. Vorher liefen die beiden Spalten auseinander (Patrick, 07.08.2026: „einfach nicht bündig"). */ .kaside__gruppe { padding-block: clamp(2rem, 3.4vw, 2.8rem); border-top: 1px solid var(--chrom-hell); } .kaside__gruppe:first-child { border-top: 0; padding-top: 0; } /* Der Abschluss mit den Handlungsflächen braucht keine Trennlinie und darf näher an den Text darüber rücken. */ .kaside__gruppe:last-child { border-top: 0; padding-top: .4rem; } .kzusammenfassung { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; font-size: var(--klein); } .kzusammenfassung li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; align-items: baseline; } .kzusammenfassung li span { color: var(--tinte-weich); font-size: .82rem; } .kzusammenfassung li b { font-weight: 600; } .kleer { color: var(--tinte-weich); font-size: var(--klein); line-height: 1.6; margin: 0; } /* ---------- Absenden und Erfolgsmeldung ---------- */ .kabsenden { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .kabsenden .knopf { padding: 1.15rem 2.4rem; } .kfehler { color: var(--rot); font-size: var(--klein); font-weight: 600; margin: .9rem 0 0; } .kfehler[hidden] { display: none; } .kdanke { text-align: center; padding: clamp(2.5rem, 5vw, 4rem) 0; } .kdanke__haken { width: 66px; height: 66px; margin: 0 auto 1.6rem; display: flex; align-items: center; justify-content: center; background: var(--rot); color: #fff; } .kdanke__haken svg { width: 30px; height: 30px; } .kdanke h2 { margin-bottom: .4em; } .kdanke p { max-width: 52ch; margin-inline: auto; color: var(--tinte-weich); } /* ========================================================================== Rechtstexte — Impressum, AGB, Datenschutz Lange Fließtexte brauchen andere Regeln als Verkaufsseiten: kleinere Überschriften, engere Zeilen, klare Abstände. Sonst liest sich eine AGB wie ein Werbeprospekt. ========================================================================== */ .rechtstext h2 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin: clamp(2.2rem, 3.4vw, 3rem) 0 .7rem; } .rechtstext h2:first-child { margin-top: 0; } .rechtstext p { margin-bottom: .95em; color: var(--tinte-weich); max-width: 72ch; } .rechtstext p b { color: var(--tinte); font-weight: 600; } .rechtstext a { color: var(--rot); } .rechtsliste { margin: 0 0 1.1em; padding-left: 1.3rem; color: var(--tinte-weich); max-width: 72ch; } .rechtsliste li { margin-bottom: .45rem; } .rechtsstand { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.4rem; border-top: 1px solid var(--chrom-hell); font-size: .88rem; color: var(--tinte-weich); } /* ========================================================================== GALERIE — Mauerwerk-Raster und Lightbox (07.08.2026) -------------------------------------------------------------------------- Warum kein Grid mit fester Kachelhöhe: Auf der Galerieseite treffen Hoch-, Quer- und quadratische Aufnahmen aufeinander — Hochzeitsfotos, Detailbilder vom Türgriff, Restaurierungsfotos im Rohzustand. Ein Raster mit fester `grid-auto-rows` zwingt jedes Bild auf dasselbe Seitenverhältnis: entweder wird beschnitten, oder es entsteht genau das in Mechanik 2 verbotene Kachelraster aus lauter gleich hohen Feldern. Ein Mehrspalten-Fluss (CSS `columns`) lässt dagegen jedes Bild seine eigene, native Höhe behalten und reiht es einfach in die nächste freie Spalte ein — wie echtes Mauerwerk, ganz ohne JavaScript-Berechnung von Positionen. ========================================================================== */ .mauerwerk { columns: 4 220px; column-gap: clamp(.6rem, 1.2vw, 1rem); margin-top: clamp(1.6rem, 2.6vw, 2.2rem); } .mauerwerk__stueck { display: block; width: 100%; margin: 0 0 clamp(.6rem, 1.2vw, 1rem); break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; position: relative; overflow: hidden; border: 0; padding: 0; background: var(--creme-tief); cursor: zoom-in; } .mauerwerk__stueck img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); } .mauerwerk__stueck:hover img { transform: scale(1.04); } .mauerwerk__stueck:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; } @media (max-width: 980px) { .mauerwerk { columns: 3 190px; } } @media (max-width: 640px) { .mauerwerk { columns: 2 150px; column-gap: .5rem; } .mauerwerk__stueck { margin-bottom: .5rem; } } @media (max-width: 420px) { .mauerwerk { columns: 1; } } /* ---------- Lightbox: Klick vergrößert, Pfeile blättern, Escape schließt ---------- */ .licht { position: fixed; inset: 0; z-index: 300; background: rgba(10,8,5,.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .licht.ist-offen { opacity: 1; visibility: visible; } .licht__bild { max-width: min(90vw, 1400px); max-height: 84vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,.55); } .licht__schliessen, .licht__vor, .licht__zurueck { position: absolute; z-index: 2; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.32); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease), border-color .2s var(--ease); } .licht__schliessen:hover, .licht__vor:hover, .licht__zurueck:hover { background: rgba(255,255,255,.2); border-color: #fff; } .licht__schliessen { top: clamp(1rem,2.4vw,2rem); right: clamp(1rem,2.4vw,2rem); width: 48px; height: 48px; } .licht__schliessen svg { width: 19px; height: 19px; } .licht__vor, .licht__zurueck { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; } .licht__zurueck { left: clamp(.6rem,2.4vw,2rem); } .licht__vor { right: clamp(.6rem,2.4vw,2rem); } .licht__vor svg, .licht__zurueck svg { width: 22px; height: 22px; } .licht__zaehler { position: absolute; bottom: clamp(1rem,3vw,2rem); left: 50%; transform: translateX(-50%); margin: 0; color: rgba(255,255,255,.68); font-size: .8rem; letter-spacing: .12em; } @media (max-width: 640px) { .licht__vor, .licht__zurueck { width: 44px; height: 44px; } .licht__vor svg, .licht__zurueck svg { width: 19px; height: 19px; } .licht__schliessen { width: 40px; height: 40px; } } /* ========================================================================== SEITENKOPF — Bildband für alle Unterseiten -------------------------------------------------------------------------- Patrick, 07.08.2026: Die Unterseiten sahen aus, „als würde was fehlen" — heller Kasten mit kleinem Foto daneben, und die Kopfzeile stand weiß auf Creme, also praktisch unsichtbar. Ein echter Lesbarkeitsfehler. Die alte Seite löst das seit jeher elegant: `header { background-image }` je Seite ein eigenes Motiv, und das Menü liegt buchstäblich auf dem Bild. Hier in unserer Sprache nachgebaut: ein Bildband unter der festen Kopfzeile, flacher als der Hero der Startseite. Damit sieht JEDE Seite aus wie aus einem Guss — Menü immer auf Bild, nie auf leerer Fläche. ========================================================================== */ .seitenkopf { position: relative; display: flex; align-items: flex-end; min-height: clamp(400px, 52vh, 620px); overflow: hidden; background: var(--tinte); } /* Ab Tablet feste Bandhöhe: die Kopfbereiche ALLER Unterseiten sind exakt gleich hoch, egal wie lang Überschrift und Vorspann sind. Vorher schwankten sie zwischen 615 und 878 px — das war der sichtbarste Bruch im Rhythmus. */ @media (min-width: 900px) { .seitenkopf { min-height: 720px; } } .seitenkopf__bild { position: absolute; inset: 0; } .seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; } .seitenkopf__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,5,.58) 0%, rgba(10,8,5,.12) 26%, rgba(10,8,5,.42) 58%, rgba(10,8,5,.80) 100%), linear-gradient(96deg, rgba(10,8,5,.60) 0%, rgba(10,8,5,.18) 46%, rgba(10,8,5,0) 74%); } .seitenkopf__inhalt { position: relative; z-index: 2; width: 100%; color: #fff; padding-top: calc(var(--kopf-h) + clamp(2rem, 4vw, 3.5rem)); padding-bottom: clamp(2.6rem, 4.5vw, 4rem); } .seitenkopf h1 { color: #fff; max-width: 19ch; margin-bottom: .38em; text-shadow: 0 2px 40px rgba(0,0,0,.5); } .seitenkopf h1 em { color: var(--sand); } .seitenkopf .vor { color: rgba(255,255,255,.82); } .seitenkopf .vor i { color: var(--sand); } .seitenkopf .vor i::after { background: rgba(255,255,255,.35); } .seitenkopf .lead { font-size: clamp(1.08rem, 1.35vw, 1.22rem); color: rgba(255,255,255,.92); max-width: 30rem; text-shadow: 0 1px 20px rgba(0,0,0,.6); margin-bottom: 2rem; } .seitenkopf .knopf--linie { color: #fff; } /* Knapper Seitenkopf, z. B. für die Anfrageseite: Dort zählt das Formular, nicht die Bühne (Patrick, 07.08.2026: „da oben Space wegnehmen"). */ .seitenkopf--knapp { min-height: clamp(300px, 34vh, 400px); } .seitenkopf--knapp .seitenkopf__inhalt { padding-bottom: clamp(2rem, 3vw, 2.8rem); } .seitenkopf--knapp h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); max-width: 20ch; } @media (max-width: 560px) { .seitenkopf { min-height: clamp(360px, 58vh, 480px); } .seitenkopf--knapp { min-height: clamp(260px, 40vh, 340px); } .seitenkopf .hero__knoepfe { flex-direction: column; align-items: stretch; } .seitenkopf .hero__knoepfe .knopf { width: 100%; } } /* ========================================================================== MEGA-MENÜ — kompakt, unter dem jeweiligen Punkt -------------------------------------------------------------------------- Erster Versuch ging über die volle Breite und verdeckte das Logo. Patrick: „Es soll nur unter dem jeweiligen Punkt ausklappen, wie bei THE COURT." Dort steht es so im CSS: `.mega { width: min(620px, 88vw) }`, das Panel hängt am Menüpunkt (`position: relative` am Elternelement), innen ein Foto und daneben die Unterpunkte untereinander. Genau diese Mechanik, in unserer Formensprache: scharfe Kanten, Haarlinien, rote Kapitelnummern. ========================================================================== */ .mnu { position: relative; display: flex; align-items: center; } .mnu__panel { position: absolute; top: 100%; left: 50%; z-index: 98; width: min(540px, 88vw); transform: translate(-50%, 8px); background: var(--creme); border-top: 2px solid var(--rot); border-radius: 0 0 var(--rundung) var(--rundung); box-shadow: 0 30px 64px -20px rgba(23,21,15,.5); padding: clamp(1.2rem, 1.8vw, 1.6rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--ease), transform .26s var(--ease), visibility .26s; } /* Unsichtbare Brücke: sonst schließt das Panel, sobald die Maus den Spalt zwischen Menüpunkt und Panel überquert. */ .mnu__panel::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } /* Die äußeren Punkte dürfen nicht aus dem Fenster laufen */ .mnu:first-child .mnu__panel { left: 0; transform: translate(0, 8px); } .mnu:last-of-type .mnu__panel { left: auto; right: 0; transform: translate(0, 8px); } .mnu:hover .mnu__panel, .mnu:focus-within .mnu__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .mnu:first-child:hover .mnu__panel, .mnu:first-child:focus-within .mnu__panel, .mnu:last-of-type:hover .mnu__panel, .mnu:last-of-type:focus-within .mnu__panel { transform: translate(0, 0); } .mnu__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--chrom-hell); } .mnu__kopf span { font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--tinte-weich); } .kopf__nav .mnu__kopf a { font-size: .8rem; font-weight: 600; color: var(--rot); white-space: nowrap; padding: 0; text-decoration: none; } .kopf__nav .mnu__kopf a::after { display: none; } .mnu__inner { display: grid; grid-template-columns: .8fr 1fr; gap: 1.1rem; align-items: stretch; } .mnu__bild { position: relative; overflow: hidden; display: block; min-height: 168px; } .mnu__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .mnu__bild:hover img { transform: scale(1.05); } .mnu__bild .schild { position: absolute; left: .6rem; bottom: .6rem; color: #fff; background: rgba(12,10,6,.55); font-size: .58rem; padding: .3rem .55rem; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .mnu__liste { display: flex; flex-direction: column; } .kopf__nav .mnu__liste a, .mnu__liste a { display: block; padding: .52rem 0; text-decoration: none; color: var(--tinte); border-bottom: 1px solid var(--chrom-hell); transition: color .2s var(--ease), padding-left .22s var(--ease); } .kopf__nav .mnu__liste a::after { display: none; } .mnu__liste a:last-child { border-bottom: 0; } .kopf__nav .mnu__liste a:hover, .mnu__liste a:hover { color: var(--rot); padding-left: .4rem; } .mnu__liste b { display: block; font-size: .92rem; font-weight: 600; color: inherit; } .mnu__liste span { display: none; } /* Zusatztext nur im Überblick, nicht im Menü */ /* ========================================================================== Mega-Menü auf dem Telefon Muss NACH der Grunddefinition stehen — sonst gewinnt bei gleicher Spezifität die spätere Regel und das Panel bleibt versteckt. Auf dem Telefon klappt nichts auf: die Unterpunkte stehen eingerückt direkt unter ihrem Hauptpunkt. ========================================================================== */ @media (max-width: 1240px) { /* Zeilenbreite begrenzen: Auf einem Tablet lag der Menütext bei 62 px und der Aufklapp-Pfeil bei 1130 px — über 1000 px Lücke dazwischen. Dadurch wirkten die Pfeile vom Menü gelöst (Patrick, 08.08.2026). */ .kopf__nav .mnu, .kopf__nav .kopf__tun { max-width: 520px; } .kopf__nav .mnu { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--chrom-hell); } .kopf__nav .mnu > a { display: block; } /* Aufklappschalter rechts neben dem Hauptpunkt */ .kopf__nav .mnu__schalter { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: var(--tinte-weich); align-self: stretch; border-radius: 0; } .kopf__nav .mnu__schalter svg { width: 22px; height: 22px; transition: transform .28s var(--ease); } .kopf__nav .mnu.ist-auf .mnu__schalter svg { transform: rotate(180deg); } .kopf__nav .mnu.ist-auf .mnu__schalter { color: var(--rot); } .kopf__nav .mnu__panel { grid-column: 1 / -1; width: auto; position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; border-radius: 0; /* Padding MUSS 0 sein — sonst belegt das eingeklappte Panel weiter Platz und es bleibt eine leere Lücke mit dem Strich der Unterpunkte stehen. */ padding: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); } .kopf__nav .mnu__panel::before { display: none; } .kopf__nav .mnu.ist-auf .mnu__panel { grid-template-rows: 1fr; } .kopf__nav .mnu__panel > * { overflow: hidden; min-height: 0; } /* Der Panelkopf („HOCHZEITSAUTO · Zur Seite →") ist auf dem Telefon überflüssig: Der Hauptpunkt steht direkt darüber schon groß da, und der Link dorthin ist der erste Unterpunkt. Er brachte nur eine zweite Beschriftung und einen zusätzlichen Strich mit (Patrick, 07.08.2026). */ .kopf__nav .mnu__kopf { display: none; } .kopf__nav .mnu__inner { display: block; padding: 0; } .kopf__nav .mnu__liste { padding: .1rem 0 .9rem; } .kopf__nav .mnu__liste { display: block; } .kopf__nav .mnu__liste a { padding: .5rem 0 .5rem 1.1rem; border-bottom: 0; font-family: var(--sans); font-size: .95rem; font-weight: 500; border-left: 2px solid var(--chrom-hell); } .kopf__nav .mnu__liste a:hover { padding-left: 1.4rem; border-left-color: var(--rot); } .kopf__nav .mnu__liste b { font-size: .95rem; font-weight: 500; } .kopf__nav .mnu__liste span { display: none; } .kopf__nav .mnu__bild { display: none; } } /* ========================================================================== DATENBLATT — technische Angaben neben dem Text statt darunter -------------------------------------------------------------------------- Patrick, 07.08.2026 zur Fahrzeugseite: „Die ganzen Sachen, wie die da aufgeführt sind, gefällt mir nicht. Vielleicht kann man die ja auch rechts daneben machen, neben dem Text." Also: links die Aussage („technisch baugleich, am Gesicht zu unterscheiden"), rechts die harten Zahlen als ruhige Wertetabelle mit Haarlinien — kein Kasten, keine Kacheln. ========================================================================== */ .datenblatt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } @media (max-width: 900px) { .datenblatt { grid-template-columns: 1fr; gap: 2.4rem; } } .datenblatt__werte { list-style: none; margin: 0; padding: 0; } .datenblatt__werte li { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--chrom-hell); } .datenblatt__werte li:first-child { border-top: 1px solid var(--chrom-hell); } /* Serifenlos, eine Größe (Patrick, 07.08.2026: „viel zu große Serifenschrift, warum hast du da einen Mix gemacht? Macht es lieber serifenlos und schick"). Bezeichnung links klein und gesperrt, Wert rechts kräftig — Zahlen mit gleicher Ziffernbreite, damit die Spalte ruhig steht. */ .datenblatt__werte span { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-weich); } .datenblatt__werte b { font-family: var(--sans); font-weight: 600; font-size: var(--text); line-height: 1.35; color: var(--tinte); text-align: right; font-variant-numeric: tabular-nums; } .datenblatt__werte b small { display: block; font-family: var(--sans); font-size: .82em; font-weight: 400; color: var(--tinte-weich); margin-top: .1rem; } .auf-dunkel .datenblatt__werte li { border-color: rgba(255,255,255,.16); } .auf-dunkel .datenblatt__werte span { color: rgba(255,255,255,.62); } .auf-dunkel .datenblatt__werte b { color: #fff; } .datenblatt__fuss { margin-top: 1.3rem; font-size: var(--klein); color: var(--tinte-weich); } /* Steht das Datenblatt neben der Seitenspalte, fehlt die Breite für zwei Blöcke nebeneinander: Text oben, Werte darunter in zwei Textspalten. */ .datenblatt--schmal { display: block; } .datenblatt--schmal .datenblatt__werte { margin-top: clamp(1.8rem, 3vw, 2.6rem); columns: 2; column-gap: clamp(1.8rem, 3vw, 2.8rem); } .datenblatt--schmal .datenblatt__werte li { break-inside: avoid; } .datenblatt--schmal .datenblatt__werte li:nth-child(5) { border-top: 1px solid var(--chrom-hell); } @media (max-width: 900px) { .datenblatt--schmal .datenblatt__werte { columns: 1; } .datenblatt--schmal .datenblatt__werte li:nth-child(5) { border-top: 0; } } /* ========================================================================== ABLAUF ÜBER DIE VOLLE BREITE -------------------------------------------------------------------------- Patrick, 07.08.2026 zur Tourenseite: „sieht sehr lieblos aus". Ursache: Vier Schritte waren in eine halbe Spalte neben ein Bild gequetscht. Ein Ablauf braucht Weite — die Schritte stehen jetzt nebeneinander über die volle Breite, verbunden durch eine durchgehende Haarlinie mit roten Knotenpunkten. Nummern und Linien sind ohnehin unsere Formensprache. ========================================================================== */ .ablaufband { overflow: hidden; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); } .ablaufband img { width: 100%; aspect-ratio: 21/7; object-fit: cover; } @media (max-width: 760px) { .ablaufband img { aspect-ratio: 16/9; } } /* Bild innerhalb einer Textspalte — volle Spaltenbreite, flach. Ersetzt das frühere Nebeneinander von Text und Bild dort, wo rechts die mitlaufende Spalte steht. */ .bildband { overflow: hidden; margin: clamp(1.6rem, 2.6vw, 2.2rem) 0; } .bildband img { width: 100%; aspect-ratio: 16/8; object-fit: cover; } @media (max-width: 760px) { .bildband img { aspect-ratio: 16/10; } } /* ========================================================================== KARTE — vollflächig über der Fußzeile, mit aufliegender Kontaktkarte. Aufbau wie bei THE COURT: Sichtbar sind OpenStreetMap-Kacheln, die auf unserem eigenen Server liegen (site/assets/karte/, erzeugt von tools/karte_kacheln.py). Beim Seitenaufruf geht dadurch keine einzige Anfrage an Google. Ein Klick auf die Fläche tauscht sie gegen die interaktive Google-Karte — das IST die Einwilligung. Die Nennung von OpenStreetMap und CARTO ist Pflicht, nicht entfernen. ========================================================================== */ .karte { position: relative; background: var(--creme-tief); } /* Patrick, 07.08.2026: „Die Kontaktkarte ist jetzt größer als die Karte — mach Google Maps ruhig ein bisschen größer." */ .karte__buehne { position: relative; overflow: hidden; cursor: pointer; height: clamp(380px, 38vw, 520px); } .karte__raster { position: absolute; left: 50%; top: 50%; } .karte__raster img { position: absolute; width: 256px; height: 256px; display: block; } .karte__nadel { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -100%); width: 40px; height: 40px; filter: drop-shadow(0 3px 7px rgba(23,21,15,.4)); } .karte__nadel svg { width: 100%; height: 100%; fill: var(--rot); stroke: var(--creme); stroke-width: 1; } .karte__hinweis { /* rechts unten statt mittig — mittig läge er auf schmaleren Bildschirmen unter der aufliegenden Kontaktkarte */ position: absolute; right: 1.1rem; bottom: 2.4rem; z-index: 4; font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--tinte); background: rgba(245,240,231,.94); padding: .6rem 1.1rem; border-radius: var(--rundung); box-shadow: 0 4px 18px rgba(23,21,15,.16); white-space: nowrap; transition: background-color .25s var(--ease); } .karte__buehne:hover .karte__hinweis { background: var(--rot); color: #fff; } .karte__buehne:focus-visible { outline: 3px solid var(--rot); outline-offset: -3px; } .karte__quelle { position: absolute; right: 8px; bottom: 6px; z-index: 4; font-size: .66rem; color: rgba(23,21,15,.55); background: rgba(245,240,231,.75); padding: .15rem .45rem; } .karte__rahmen { width: 100%; height: 100%; border: 0; display: block; } .karte__buehne--geladen { cursor: default; } /* Die Kontaktkarte liegt auf der Karte auf und ragt unten in die Fußzeile hinein — sie wird an der UNTERKANTE der Karte verankert, nicht über einen negativen Abstand. Dadurch bleibt der Überstand immer gleich, egal wie hoch die Karte gerade ist. */ /* Die Kontaktkarte liegt VOLLSTÄNDIG auf der Karte, sie hängt nicht mehr unten heraus (Patrick, 07.08.2026: „das Kontaktfeld hängt über dem Rand unten von Google Maps, das passt nicht so richtig"). Senkrecht mittig verankert. */ .karte { padding-bottom: 0; } .karte .huelle { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; } .karte__feld { pointer-events: auto; width: min(390px, 100%); background: var(--creme); padding: clamp(1.6rem, 2.4vw, 2rem); box-shadow: 0 30px 64px -22px rgba(23,21,15,.5); } .karte__feld h3 { margin-bottom: .8rem; } /* :not([class]) ist hier der Kern der Sache: Ohne die Einschränkung frisst diese Regel jeden benannten Absatz in der Kachel mit — .karte__marke war dadurch auf 15px gestaucht statt auf die vorgesehenen 32-42px, und .karte__adresse musste sich mit !important dagegen wehren. Die Regel gilt jetzt nur noch für Fließtext ohne eigene Klasse. */ .karte__feld p:not([class]) { font-size: .95rem; line-height: 1.65; color: var(--tinte-weich); } .karte__adresse { font-size: 1.05rem; color: var(--tinte); font-weight: 600; } .karte__feld .spalte__tun { margin-top: 1.5rem; } @media (max-width: 860px) { /* Auf dem Telefon reicht die Breite nicht zum Überlagern. Sauber gestapelt: Karte oben, Kontaktfeld direkt darunter — ohne den halben Überstand, der wie ein Versehen aussah (Patrick, 08.08.2026: „die liegt jetzt unter der Karte"). Die Karte bekommt dafür mehr Höhe, damit sie nicht zum Streifen zusammenschrumpft. */ .karte__buehne { height: clamp(300px, 52vw, 380px); } .karte .huelle { position: static; padding-block: clamp(1.6rem, 4vw, 2.2rem) clamp(2rem, 5vw, 3rem); } .karte__feld { width: 100%; margin-top: 0; box-shadow: none; padding-inline: 0; background: none; } .karte { background: var(--creme); } .karte__hinweis { font-size: .76rem; padding: .5rem .85rem; } } /* Markenzeile auf der Kontaktkarte über der Karte — das Herz kommt aus dem Logo, damit die Karte erkennbar zur Marke gehört und nicht wie ein beliebiger Adressblock aussieht (Patrick, 07.08.2026). */ .karte__marke { display: flex; align-items: center; gap: .22rem; font-family: var(--serif); font-size: clamp(2rem, 2.8vw, 2.6rem); line-height: 1.15; color: var(--tinte); margin: 0 0 .8rem !important; } .karte__herz { width: .78em; height: .78em; color: var(--rot); flex: none; margin-top: -.06em; } /* -------------------------------------------------------------------------- VERBUND — eigenes Band ÜBER der Fußzeile, vier Spalten. Patrick, 08.08.2026: „Das sollte lieber über dem Footer sein, und vielleicht könnte man das nochmal ein bisschen farblich abheben." Deshalb ein eigener Abschnitt auf Sandton statt einer weiteren Zeile im dunklen Fuß — er trennt Inhalt und Fußzeile und liest sich als eigene Aussage. Bewusst ohne Logos: Vier fremde Wortmarken in einer Reihe wären zu laut, und das Hanse-Café-Logo liegt nur als schwarzes JPEG auf Weiß vor. -------------------------------------------------------------------------- */ .verbund { background: var(--creme-tief); border-top: 1px solid var(--chrom-hell); padding-block: clamp(2.2rem, 3.6vw, 3.2rem); } .verbund__titel { font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--tinte-weich); margin: 0 0 clamp(1.2rem, 2vw, 1.7rem); } .verbund__gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.4vw, 2.4rem); } .verbund__gitter a { display: grid; gap: .18rem; align-content: start; text-decoration: none; color: var(--tinte-weich); padding-left: 1rem; border-left: 2px solid var(--chrom); transition: border-color .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease); } .verbund__gitter a:hover { border-left-color: var(--rot); color: var(--tinte); padding-left: 1.25rem; } .verbund__gitter a:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; } .verbund__gitter b { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; color: var(--tinte); line-height: 1.25; } .verbund__gitter span { font-size: var(--klein); } .verbund__gitter em { font-style: normal; font-size: var(--klein); color: var(--chrom-dunkel, #9a9384); } /* Soziale Symbole in der Kontaktspalte der Fußzeile */ .fuss__symbole { display: flex; gap: .55rem; margin-top: 1.3rem; } .fuss__symbole a { /* Ohne Rahmen (Patrick, 12.08.2026). Das Symbol steht für sich; der Kasten drumherum machte aus zwei kleinen Zeichen zwei graue Kacheln. Die Klickfläche bleibt trotzdem 42 px groß — darunter trifft man auf dem Telefon nicht zuverlässig. */ display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: -9px; color: rgba(255,255,255,.72); transition: color .25s var(--ease), transform .25s var(--ease); } .fuss__symbole a:hover { color: #fff; transform: translateY(-2px); } .fuss__symbole svg { width: 1.35rem; height: 1.35rem; } @media (max-width: 980px) { .verbund__gitter { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .verbund__gitter { grid-template-columns: 1fr; gap: 1.1rem; } } /* -------------------------------------------------------------------------- GALERIE-TEASER auf den Themenseiten. Die Galerie hing bisher nur im Menü und im Fuß — Patrick, 08.08.2026: „Die geile Bildergalerie ist mir total entgangen." Jede Themenseite verweist jetzt sichtbar auf ihr Kapitel. -------------------------------------------------------------------------- */ .galteaser__flaeche { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; text-decoration: none; color: inherit; } .galteaser__text .lead { margin-bottom: 1.4rem; } .galteaser__text .textlink { color: var(--rot); font-weight: 600; } .galteaser__text .textlink svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); } .galteaser__flaeche:hover .textlink svg { transform: translateX(4px); } .galteaser__flaeche:focus-visible { outline: 3px solid var(--rot); outline-offset: 6px; } .galteaser__bilder { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem, 1vw, .8rem); } .galteaser__bilder img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .6s var(--ease); } /* Erstes Bild groß über beide Spalten — sonst wirkt es wie vier gleiche Kacheln */ .galteaser__bilder img:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; } .galteaser__flaeche:hover .galteaser__bilder img { transform: scale(1.03); } .galteaser__bilder > * { overflow: hidden; } @media (max-width: 860px) { .galteaser__flaeche { grid-template-columns: 1fr; } } /* Verbund im roten Abschlussblock — er läuft dort ohne Farbwechsel weiter und ist nur durch eine feine Linie abgesetzt. Vorher schob sich ein beiger Streifen zwischen Rot und die schwarze Fußzeile. */ /* Reichlich Luft: oben so viel wie über der Anfrage-Überschrift, unten ebenso. Patrick, 08.08.2026: „Guck mal, wie viel Space wir oben haben — hier unten haben wir gar keinen." */ /* display:flow-root ist hier PFLICHT, nicht Kosmetik: Die Haarlinie in .huelle::before hat margin-top ~79px. Da dieses Band padding-top:0 und keinen oberen Rahmen hat, bricht dieser Abstand nach außen aus und schiebt das Band vom roten Block darüber weg — der cremefarbene Body scheint als Streifen durch (gemessen 10.08.2026: 79px auf 8 Seiten). flow-root erzeugt einen eigenen Formatierungskontext und hält ihn drin. */ .verbund--rot { background: var(--rot); border-top: 0; display: flow-root; padding-block: 0 clamp(3.4rem, 6vw, 5.5rem); } .verbund--rot .huelle { position: relative; } .verbund--rot .huelle::before { /* Nur noch Abstand, keine Linie mehr. Die Haarlinie trennte den Verbund optisch vom Abschlussblock darüber, obwohl beide dieselbe rote Fläche sind — Patrick am 12.08.2026: „Es ist nicht zusammen." Der Abstand allein gliedert ausreichend. */ content: ''; display: block; height: 0; margin-top: clamp(2.4rem, 4vw, 3.4rem); } .verbund--rot .verbund__titel { color: rgba(255,255,255,.72); } .verbund--rot .verbund__gitter a { color: rgba(255,255,255,.8); border-left-color: rgba(255,255,255,.34); } .verbund--rot .verbund__gitter a:hover { color: #fff; border-left-color: #fff; } .verbund--rot .verbund__gitter b { color: #fff; } .verbund--rot .verbund__gitter em { color: rgba(255,255,255,.6); } /* Der rote Block darüber verliert seinen unteren Abstand — beide bilden ein Band. */ main:has(+ .verbund--rot) .block--rot { padding-bottom: 0; } /* Erster Eintrag ohne senkrechten Strich, damit die Reihe bündig unter der Überschrift beginnt (Patrick, 08.08.2026). */ .verbund__gitter a:first-child { border-left: 0; padding-left: 0; } .verbund__gitter a:first-child:hover { padding-left: 0; } /* -------------------------------------------------------------------------- GALERIE-KAPITELMENÜ — schmale Zeile über den Galerien. Bewusst zurückhaltend und modern: kleine Vorschaubilder, Name, Anzahl. Die großen Bildstrecken darunter tragen die Emotion, das hier ist Navigation (Patrick, 08.08.2026: „entweder wirklich kleiner, damit es wie ein Menü aussieht — oder genauso schick wie darunter"). -------------------------------------------------------------------------- */ .block--knapp { padding-block: clamp(1.6rem, 2.6vw, 2.2rem); } .galmenu { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding-bottom: clamp(1.4rem, 2.2vw, 1.9rem); border-bottom: 1px solid var(--chrom-hell); } .galmenu__titel { font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--tinte-weich); margin-right: 1rem; } .galmenu__punkt { display: flex; align-items: center; gap: .85rem; padding: .5rem 1.3rem .5rem .5rem; text-decoration: none; color: var(--tinte); border: 1px solid var(--chrom-hell); border-radius: var(--rundung); transition: border-color .22s var(--ease), background-color .22s var(--ease); } .galmenu__punkt img { width: 62px; height: 62px; object-fit: cover; display: block; border-radius: calc(var(--rundung) - 1px); filter: saturate(.9); transition: filter .22s var(--ease); } .galmenu__punkt span { display: grid; gap: .05rem; line-height: 1.15; } .galmenu__punkt b { font-size: .96rem; font-weight: 600; } .galmenu__punkt em { font-style: normal; font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--tinte-weich); } .galmenu__punkt em::after { content: ' Fotos'; } .galmenu__punkt:hover { border-color: var(--rot); background: var(--creme-tief); } .galmenu__punkt:hover img { filter: saturate(1.05); } .galmenu__punkt:hover em { color: var(--rot); } .galmenu__punkt:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; } @media (max-width: 560px) { .galmenu { gap: .4rem; } .galmenu__titel { width: 100%; margin: 0 0 .3rem; } .galmenu__punkt { flex: 1 1 calc(50% - .4rem); } } /* Erklärender Nachsatz unter einer Auswahl im Anfrageformular. Bewusst leiser als der Fließtext: Er beantwortet eine Rückfrage, er stellt keine. */ .feldhinweis { margin: .9rem 0 0; max-width: 46ch; font-size: var(--klein); line-height: 1.6; color: var(--tinte-weich); } /* Ausstattungsliste des Campers: vier Gruppen nebeneinander. Rutscht auf schmalen Geräten auf zwei und dann eine Spalte — dieselbe Staffelung wie .verbund__gitter, damit der Seitenrhythmus gleich bleibt. */ /* Zeilen- und Spaltenabstand getrennt: Sobald die vier Spalten umbrechen, steht eine Überschrift direkt unter der Liste der Gruppe darüber. Bei gleichem Abstand in beide Richtungen waren das nur 26 px — die Überschrift klebte an der fremden Aufzählung (Patrick, 12.08.2026). Senkrecht braucht es deutlich mehr, waagerecht nicht. */ .ausstattung { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(1.6rem, 2.6vw, 2.6rem); row-gap: clamp(2.6rem, 4.2vw, 3.6rem); margin-top: clamp(2rem, 3vw, 2.8rem); } .ausstattung__gruppe h3 { font-family: var(--sans); font-size: var(--ueberzeile); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--rot); margin: 0 0 1rem; padding-top: .2rem; border-top: 1px solid var(--chrom-hell); padding-top: 1rem; } .ausstattung .haken li { font-size: var(--klein); line-height: 1.55; margin-bottom: .7rem; } .ausstattung .haken svg { width: .95rem; height: .95rem; margin-top: .28rem; } @media (max-width: 980px) { .ausstattung { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ausstattung { grid-template-columns: 1fr; } } /* Verweis mitten im Fließtext: nimmt die Schriftgröße der Umgebung an und trägt nur eine dezente Unterstreichung. Ohne das erbt er die Auszeichnung von .textlink (eigene Zeile, Pfeil, größere Type) und bricht den Satz auf — genau das sah auf hochzeitsauto.html wie ein versehentlicher Block aus. */ /* Im Ruhezustand nur die Farbe, die Unterstreichung kommt erst beim Überfahren. Vorher war beides gleichzeitig da und die Linie verdickte sich nur — das las sich wie eine doppelte Unterstreichung (Patrick, 12.08.2026). */ .textlink--im-satz { display: inline; font-size: inherit; font-weight: 600; color: var(--rot); text-decoration: none; } .textlink--im-satz:hover, .textlink--im-satz:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; } .textlink--im-satz svg { display: none; } /* Einleitender Fließtext oben auf einer Angebotsseite. Bewusst schmal: Zeilen über 70 Zeichen liest niemand mehr freiwillig, und genau diese Absätze sind die, die Suchmaschinen und KI-Antworten auswerten. */ .einleitung { max-width: 68ch; } .einleitung .lead { margin-bottom: 1.2rem; } .einleitung p + p { margin-top: 1.1rem; } .einleitung b { font-weight: 600; color: var(--tinte); } /* Zwei Standorte NEBENEINANDER, nicht untereinander — Patrick am 10.08.2026: Der Footer soll durch die zweite Adresse nicht länger werden. Auf schmalen Geräten rutschen sie doch untereinander; dort ist Höhe kein Problem. */ /* Mit nur einer Adresse gibt es nichts nebeneinanderzustellen. */ .fuss__orte--einzeln { grid-template-columns: 1fr; } .fuss__orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1rem; } .fuss__orte p { margin: 0; font-size: var(--klein); line-height: 1.55; } .fuss__orte b { color: rgba(255,255,255,.92); font-weight: 600; } @media (max-width: 560px) { .fuss__orte { grid-template-columns: 1fr; gap: .9rem; } } /* ---------- Filter der Bildergalerie ---------- Vorbild sind die Referenz-Chips der STREET-KITCHEN-Seite: Textknöpfe ohne Vorschaubild, „Alle" zuerst. Patrick am 12.08.2026: „ausgeschrieben, dann kann man dort segmentieren". */ .galfilter { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .galfilter__knopf { font-family: var(--sans); font-size: var(--klein); font-weight: 600; color: var(--tinte-weich); background: none; cursor: pointer; border: 1.5px solid var(--chrom-hell); border-radius: var(--rundung); padding: .62rem 1.05rem; line-height: 1; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); } .galfilter__knopf span { font-size: .78em; font-weight: 700; letter-spacing: .06em; color: var(--chrom-dunkel, #9a9384); margin-left: .35rem; } .galfilter__knopf:hover { color: var(--tinte); border-color: var(--tinte); } .galfilter__knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; } .galfilter__knopf.ist-aktiv { background: var(--tinte); border-color: var(--tinte); color: #fff; } .galfilter__knopf.ist-aktiv span { color: rgba(255,255,255,.62); } /* Der Zählstand ist für Screenreader gedacht und bleibt sonst unauffällig. */ .galfilter__stand { margin: 1rem 0 0; font-size: var(--klein); color: var(--tinte-weich); } .galfilter__stand:empty { display: none; } @media (max-width: 560px) { .galfilter__knopf { padding: .55rem .85rem; } } /* Adresse im Fuß: jede Zeile für sich, nichts bricht mitten im Straßennamen. Vorher stand alles in einem Absatz mit
    — bei schmaler Spalte brach „Wilhelm-Mauser-Straße 14–16" mitten im Wort um (Patrick, 12.08.2026). */ .fuss__adresse { display: block; font-style: normal; margin-top: 1.1rem; font-size: var(--klein); line-height: 1.75; color: rgba(255,255,255,.72); } .fuss__adresse b { display: block; color: rgba(255,255,255,.92); font-weight: 600; margin-bottom: .2rem; } .fuss__adresse span { display: block; white-space: nowrap; } @media (max-width: 420px) { .fuss__adresse span { white-space: normal; } } /* ---------- Bewertungs-Störer ---------- Schmales Band mit den Google-Sternen. Bewusst zurückhaltend: Es soll die Aussage stützen, nicht den Seitenrhythmus sprengen. */ .bewertung { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); text-decoration: none; color: var(--tinte); padding: clamp(1rem, 1.8vw, 1.3rem) 0; } /* Die Kennzahl trägt den Störer. Vorher standen nur kleine Sterne links und ein nackter Pfeil ganz rechts — dazwischen 623px Leere (gemessen bei 1920px am 13.08.2026). Das las sich wie ein Fehler, nicht wie ein Störer. */ .bewertung__wert { display: grid; gap: .4rem; justify-items: center; flex: none; padding-right: clamp(1rem, 2.4vw, 2rem); border-right: 1px solid rgba(0, 0, 0, .14); } .bewertung__zahl { font-family: var(--serif); font-size: clamp(2.1rem, 3.2vw, 2.9rem); line-height: .9; color: var(--tinte); } .bewertung__sterne { display: flex; gap: .16rem; color: var(--sand); } .bewertung__stern { width: .95rem; height: .95rem; } .bewertung__text { display: grid; gap: .18rem; } .bewertung__text b { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; } .bewertung__text em { font-style: normal; font-size: var(--klein); color: var(--tinte-weich); } /* Statt eines nackten Pfeils ein beschrifteter Verweis — er füllt die rechte Seite und sagt, was beim Klick passiert. */ .bewertung__mehr { margin-left: auto; display: inline-flex; align-items: center; gap: .55rem; flex: none; font-family: var(--sans); font-size: var(--klein); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); padding-bottom: .3rem; border-bottom: 1px solid currentColor; } .bewertung__mehr svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); } .bewertung:hover .bewertung__mehr svg { transform: translateX(4px); } .bewertung:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; } /* Auf dunklen Flächen: Der Hinweistext stand vorher in Dunkelgrau auf Anthrazit und war kaum lesbar. */ .auf-dunkel .bewertung { color: #fff; } .auf-dunkel .bewertung__zahl { color: var(--sand); } .auf-dunkel .bewertung__wert { border-right-color: rgba(255, 255, 255, .2); } .auf-dunkel .bewertung__text em { color: rgba(255, 255, 255, .66); } .auf-dunkel .bewertung__mehr { color: var(--sand); } @media (max-width: 720px) { .bewertung { flex-wrap: wrap; gap: .9rem clamp(1rem, 4vw, 1.6rem); } /* Der Trennstrich stünde hier hinter den Sternen und würde nichts mehr trennen — der Text rutscht ja in die nächste Zeile. */ .bewertung__wert { grid-auto-flow: column; align-items: center; gap: .7rem; justify-content: start; padding-right: 0; border-right: 0; } .bewertung__zahl { font-size: 2rem; } .bewertung__mehr { margin-left: 0; width: 100%; } } } /* Markennamen als Text unter der Logoleiste — unauffällig, aber lesbar. Die Leiste selbst baut JavaScript; ohne diesen Absatz sieht ein KI-System keine einzige Referenz (13.08.2026). */ .laufband__namen { margin: 1.1rem 0 0; font-size: .82rem; line-height: 1.7; color: var(--tinte-weich); max-width: 62ch; }