/* Salzburg Chauffeur — gemeinsames Stylesheet für beide Stilfassungen. Regel: hier stehen NUR Tokens, keine Ad-hoc-Farben, -Größen oder -Abstände. Die Stilfassung steckt allein in tokens-*.css plus den Modifier-Klassen .v-cards / .v-index am . Mobile-first, Breakpoints 768 / 1024 / 1280. */ /* ── Schriften (self-hosted, keine externen Requests) ─────────────────── */ @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ── Reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Ankersprünge dürfen nicht unter der klebenden Kopfzeile landen. */ scroll-padding-top: calc(var(--header-h) + var(--sp-4)); } body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── Grundlayout ──────────────────────────────────────────────────────── */ body { /* Lange deutsche Komposita dürfen umbrechen. Silbentrennung nur auf schmalen Schirmen — im Desktop-Fließtext sieht „Ab-holzeit" billig aus. */ overflow-wrap: break-word; background: var(--c-bg); color: var(--c-text); font-family: var(--ff-body); font-weight: var(--fw-body); font-size: var(--fs-md); line-height: var(--lh-body); overflow-x: hidden; padding-bottom: calc(var(--tap) + var(--sp-5) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { body { padding-bottom: 0; } } @media (max-width: 640px) { body { hyphens: auto; } } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--alt { background: var(--c-bg-alt); } .prose { max-width: var(--maxw-prose); } /* ── Typografie ───────────────────────────────────────────────────────── */ h1, h2, h3, .display { overflow-wrap: anywhere; font-family: var(--ff-display); font-weight: var(--fw-display); line-height: var(--lh-head); letter-spacing: var(--tracking-display); text-wrap: balance; } h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); } p { text-wrap: pretty; } .eyebrow { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-3); } .lead { font-size: var(--fs-lg); color: var(--c-text-muted); } .muted { color: var(--c-text-muted); } .soft { color: var(--c-text-soft); font-size: var(--fs-sm); } a { color: var(--c-accent); text-underline-offset: .18em; } a:hover { text-decoration-thickness: 2px; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-sm); } .section-head { margin-bottom: var(--sp-8); } .section-head h2 { max-width: 22ch; } .section-head h2.wide { max-width: none; } /* Ab 1024px ist genug Platz — die 22ch-Bremse erzwang dort Umbrüche mitten in kurzen Überschriften („In drei Schritten / unterwegs"). */ @media (min-width: 1024px) { .section-head h2 { max-width: none; } } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--c-accent); color: var(--c-on-accent); padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--r-md) 0; font-weight: var(--fw-bold); text-decoration: none; } .skip-link:focus { left: 0; } .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Raster-Sicherheitsnetz: Grid- und Flex-Kinder haben von Haus aus min-width:auto und werden dadurch von ihrem längsten Wort aufgeblasen. Bei 200 % Schriftgröße oder langen deutschen Komposita sprengt das die Spalte. Beides hier einmal zentral entschärft. */ .services-list > *, .gallery > *, .contact-cards > *, .footer-grid > *, .mobile-bar > *, .hero-grid > *, .vehicle-grid > *, .about-grid > *, .header-inner > *, .price-table td, .price-table th { min-width: 0; } .service, .price-table .route, .mobile-bar a { overflow-wrap: anywhere; } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: var(--sp-3) var(--sp-6); border: var(--border-w) solid transparent; border-radius: var(--r-pill); font-family: var(--ff-body); font-size: var(--fs-base); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .btn--primary { background: var(--c-accent); color: var(--c-on-accent); } .btn--primary:hover { background: var(--c-accent-display); } .btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-border-strong); } .btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); } .btn--sm { min-height: var(--tap); padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); } .btn--block { width: 100%; } .icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ── Kopfzeile ────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--c-header-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: var(--border-w) solid var(--c-border); } .header-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); /* Bezugsrahmen für den mittig gesetzten Schriftzug ab 1024px. */ position: relative; } .brand { display: inline-flex; align-items: center; gap: 11px; min-height: var(--tap); text-decoration: none; margin-right: auto; } /* Markenblock der Kopfzeile: Bildmarke links, Schriftzug zweizeilig daneben. Der Schriftzug ist echter Text in der Hausschrift — bleibt auf jedem Schirm scharf, ist markierbar und für Suchmaschinen lesbar. Das gestapelte Logo-Bild wäre auf 46px Höhe nicht mehr lesbar gewesen. */ /* Auf dem Telefon ist der Schriftzug ausgeblendet, waagrecht wäre bis 110px Platz — begrenzend ist allein die Leistenhöhe. 64px lassen oben und unten je 6px Luft und füllen die Leiste damit so weit aus, wie es ohne Anschneiden geht. */ .brand-mark { display: block; height: 64px; width: auto; } .brand-name { display: flex; flex-direction: column; font-family: var(--ff-display); font-weight: var(--fw-display); font-size: .88rem; letter-spacing: .12em; line-height: 1; text-transform: uppercase; color: var(--c-text); white-space: nowrap; } .brand-name span + span { margin-top: 3px; } /* Unter 480px reicht die Breite nicht für Bildmarke UND Schriftzug — schon mit den früheren 34px überlappte der Schriftzug bei 320 und 360px die Sprachwahl. Statt die Bildmarke zu schrumpfen, weicht dort der Schriftzug: der Name steht direkt darunter in der Überschrift, und der Markenlink trägt ihn im aria-label. */ @media (max-width: 479px) { .brand-name { display: none; } } .brand-tag { display: none; } /* Fassung A: Bildmarke links, Schriftzug exakt in der Mitte der Kopfzeile, rechts Sprachwahl, Anrufen und Menütaste. Die Menüpunkte stecken auf allen Breiten im Klappmenü. Mittig ab 480px — darunter ist der Schriftzug ausgeblendet, weil Bildmarke und Schriftzug dort nicht nebeneinander passen. */ @media (min-width: 480px) { .brand-name { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; } } /* 480–767px: mittig, aber zweizeilig und ohne Zusatzzeile — einzeilig wäre der Schriftzug hier breiter als der Platz zwischen Bildmarke und rechter Gruppe. */ @media (min-width: 480px) and (max-width: 767px) { .brand-mark { height: 64px; } .brand-name { font-size: .95rem; letter-spacing: .11em; } } /* Knapp über 480px liegt der engste Punkt: dort stößt die Bildmarke bei mehr als 64px an den mittigen Schriftzug. Ab 520px ist Platz für die volle Leistenhöhe. */ @media (min-width: 520px) and (max-width: 767px) { .brand-mark { height: 72px; } } @media (min-width: 768px) { .brand-mark { height: 88px; } .brand-name { display: block; font-size: 1.7rem; letter-spacing: .14em; } .brand-name span { display: inline; } .brand-name span + span { margin-top: 0; } .brand-tag { display: block; font-family: var(--ff-body); font-style: normal; font-weight: var(--fw-medium); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-accent); margin-top: 9px; } } /* Zwischen 768 und 1280px wird es enger: der mittige Schriftzug stößt sonst an die rechte Gruppe an — auf Deutsch zuerst, weil „Anrufen" breiter ist als „Call". Marke und Zusatzzeile rücken dort eine Stufe zurück. */ @media (min-width: 768px) and (max-width: 1279px) { .brand-mark { height: 72px; } .brand-name { font-size: 1.24rem; letter-spacing: .1em; } .brand-tag { font-size: 9px; letter-spacing: .18em; margin-top: 7px; } } /* Logo — Löwe+Van-Symbol, zwei Lockups (Header kompakt, Footer mit Tagline). */ /* Nur noch von Dark Luxury benutzt — Light Editorial verwendet .brand-mark. */ .brand-logo { display: block; height: 40px; width: auto; } /* Fußzeile trägt den vollen Auftritt inkl. Tagline. Die Zeile „Premium Private Transfers" nimmt nur 3,7 % der Bildhöhe ein — erst ab rund 280px Logohöhe kommt sie auf lesbare 10px. Der beschreibende Absatz darunter ist dafür entfallen (Ansage Matteo). */ .footer-logo { display: block; height: 220px; width: auto; margin-bottom: 0; } @media (min-width: 768px) { .brand-logo { height: 46px; } .footer-logo { height: 280px; } } .nav-list { display: none; gap: var(--sp-6); align-items: center; } .nav-link { color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); padding-block: var(--sp-3); } .nav-link:hover { color: var(--c-accent); } .lang { display: inline-flex; border: var(--border-w) solid var(--c-border-strong); border-radius: var(--r-pill); overflow: hidden; } .lang a { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .06em; text-decoration: none; color: var(--c-lang-inactive); } .lang a[aria-current="true"] { background: var(--c-accent); color: var(--c-on-accent); } .header-cta { display: none; } .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); background: transparent; border: var(--border-w) solid var(--c-border-strong); border-radius: var(--r-md); color: var(--c-text); cursor: pointer; } .menu-btn .icon { width: 20px; height: 20px; } .mobile-nav { display: none; border-top: var(--border-w) solid var(--c-border); background: var(--c-header-bg); padding-block: var(--sp-3) var(--sp-5); } .mobile-nav[data-open="true"] { display: block; } .mobile-nav a { display: block; padding: var(--sp-3) 0; min-height: var(--tap); color: var(--c-text); text-decoration: none; font-weight: var(--fw-medium); border-bottom: var(--border-w) solid var(--c-border); } @media (min-width: 1024px) { /* .nav-list gibt es in Light Editorial nicht mehr — die Regel bleibt für Dark Luxury stehen, das die waagrechte Navigation weiter verwendet. */ .nav-list { display: flex; } .header-cta { display: inline-flex; } } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { padding-block: var(--sp-9) var(--sp-8); } .hero-grid { display: grid; gap: var(--sp-8); } .hero h1 { max-width: 18ch; } .hero .lead { margin-top: var(--sp-5); } /* Zweiter Hero-Absatz (PDF-Textfassung 03.09.2026): ohne diese Regel klebt er auf 375 px direkt am Lead, weil dort beide fast gleich gross gesetzt sind. */ .hero-copy p + p { margin-top: var(--sp-4); } /* Ohne Schlagschatten — der grosse, versetzte --sh-2 wirkte wie ein zweites, verrutschtes Bild hinter dem Hero. Das Bild traegt sich ueber seinen Radius und die Bildkante allein. --sh-2 ist damit ungenutzt. */ .hero-media { position: relative; border-radius: var(--r-media); overflow: hidden; } .hero-media::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); pointer-events: none; } .hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } @media (min-width: 1024px) { .hero { padding-block: var(--sp-11) var(--sp-10); } .hero-grid { grid-template-columns: 1.08fr .92fr; align-items: center; gap: var(--sp-10); } /* Startwert und Fallback ohne JS. Die Bündigkeit mit der Bildunterkante regelt fitHeroLead() in site.js ein — ein fester Wert hält sie nicht über alle Breiten und beide Sprachen (gemessen 84 px Überhang bei 1024 px). */ .hero .lead { font-size: 1.61rem; line-height: 1.65; } } /* ── Vertrauensleiste ─────────────────────────────────────────────────── */ .trustbar { border-block: var(--border-w) solid var(--c-border); background: var(--c-bg-alt); } .trustbar ul { display: flex; flex-wrap: wrap; justify-content: center; /* Spaltenabstand in em, nicht in rem: er muss mit der Schriftgröße mitschrumpfen, sonst geht die Rechnung unten nicht auf. */ gap: var(--sp-2) 1.6em; /* Ohne Klasse greift der Reset `ul[class]` nicht — die Standard-Einrückung des Browsers von 40px bliebe stehen und schöbe die erste Angabe ein. */ list-style: none; padding: var(--sp-4) 0; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-soft); } .trustbar li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .trustbar li::before { content: "✦"; color: var(--c-accent); font-size: .85em; } /* Einzeilig und bündig statt umbrechend. Die fünf Angaben brauchen bei 12px rund 924px (EN, der längere Satz) plus vier Abstände. Bei 1024px stehen nur 947px zur Verfügung — die Leiste brach also auf zwei Zeilen um, und weil space-between dort schon galt, riss es die zweite Zeile über die volle Breite auseinander (gemessen: letzte Angabe 784px vor der Bildkante). Statt den Umbruch hinzunehmen, schrumpft jetzt die Schrift mit: benötigte Breite = Schriftgrad x 83,4 (77 für die Textlängen, 6,4 für die vier Abstände von 1.6em), also Schriftgrad = Breite / 83,4. Die nutzbare Breite liegt bei etwa 0,92 x Viewport, daraus folgt 1.08vw. Nach oben gedeckelt auf --fs-xs, nach unten auf .6rem — darunter wird die gesperrte Versalschrift unleserlich; dort bricht sie wieder um, dann aber zentriert statt auseinandergerissen. */ @media (min-width: 890px) { .trustbar ul { flex-wrap: nowrap; justify-content: space-between; font-size: clamp(.6rem, 1.08vw, var(--fs-xs)); } .trustbar li { white-space: nowrap; } } /* ── Leistungen ───────────────────────────────────────────────────────── */ .services-list { display: grid; gap: var(--sp-5); } @media (min-width: 768px) { .services-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services-list { grid-template-columns: repeat(3, 1fr); } } .service { display: flex; flex-direction: column; gap: var(--sp-3); } .service h3 { font-size: var(--fs-xl); } .service p { color: var(--c-text-muted); font-size: var(--fs-base); } /* Stilfassung A: Karten */ .v-cards .service { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6); } .v-cards .service::before { content: ""; display: block; width: 34px; height: 2px; background: var(--c-accent); margin-bottom: var(--sp-1); } /* Stilfassung B: Register mit Haarlinien */ .v-index .services-list { gap: 0; } .v-index .service { border-top: var(--rule-weight) solid var(--c-border); padding-block: var(--sp-6); flex-direction: row; align-items: flex-start; gap: var(--sp-5); } .v-index .service > div { display: flex; flex-direction: column; gap: var(--sp-2); } /* Den Spaltenabstand trug bis 15.08.2026 die Ziffer links in jeder Karte; seit sie entfernt ist, stoßen die Textspalten bei `gap: 0` unmittelbar aneinander. Das Polster sitzt deshalb innen statt im Grid-Gap — die Karte behält ihre Breite, also bleiben die Haarlinien ein durchgehendes Register. Steht hinter der Basisregel, weil @media die Spezifität nicht erhöht. */ @media (min-width: 768px) { .v-index .service { padding-right: var(--sp-7); } } /* ── Fahrzeug ─────────────────────────────────────────────────────────── */ /* Überschrift steht seit 10.08.2026 nicht mehr in der rechten Spalte, sondern linksbündig über Bild und Text (Ansage Matteo). */ .vehicle-head { margin-bottom: var(--sp-8); } /* Umbruch fest nach dem Gedankenstrich statt automatisch mitten im ersten Teil. Der zweite Halbsatz beginnt dadurch immer auf einer eigenen Zeile. */ .h2-part { display: block; } .vehicle-grid { display: grid; gap: var(--sp-7); align-items: center; } @media (min-width: 1024px) { .vehicle-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: stretch; } /* Der Textblock spannt über die volle Bildhöhe: erster Absatz schließt oben, letzter unten bündig mit dem Bild ab. Der Zwischenraum nimmt die Differenz auf, statt sie unten als Loch stehen zu lassen. */ .vehicle-copy { display: flex; flex-direction: column; justify-content: space-between; } /* Umgekehrter Fall: ist der Text höher als das 3:2-Bild, wächst das Bild mit, statt den Text unten überstehen zu lassen. Das Seitenverhältnis des Bildes bestimmt weiterhin die Mindesthöhe der Reihe, `object-fit: cover` beschneidet dann statt zu verzerren. Kein `aspect-ratio` am Rahmen — das würde ihn festnageln und das Mitwachsen wieder verhindern. */ .vehicle-media { display: flex; } .vehicle-media img { height: 100%; } } /* Nur noch Rückfallwert für den Fall ohne JS. Die maßgebliche Größe setzt seit 15.08.2026 `fitVehicleCopy()` in site.js als Inline-Stil: eine feste Größe traf immer nur eine Sprache, weil der englische Text deutlich kürzer ist als der deutsche — gemessen blieben 139 px (DE) und 176 px (EN) als Loch zwischen den Absätzen stehen. Erst ab 1280px: bei 1024px ist die Spalte so schmal, dass der deutsche Text das Bild auf Hochformat streckt und der Van seitlich angeschnitten wird. */ @media (min-width: 1280px) { .vehicle-copy p { font-size: var(--fs-lg); line-height: 1.75; } } /* Quadratisch, nicht 3:2. Im Zweispalter streckt `height: 100%` das Bild auf die Hoehe der Textspalte — gemessen h/w 0,74 (EN) bis 1,01 (DE). Ein 3:2-Bild verlor dabei ein Drittel seiner Breite an object-fit: cover, uebrig blieb der Kuehlergrill. 1:1 liegt im gemessenen Bereich, der Zuschnitt bleibt unter 2 %. */ .vehicle-media img { border-radius: var(--r-media); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } .vehicle-copy p + p { margin-top: var(--sp-4); } .vehicle-copy p { color: var(--c-text-muted); } .gallery-title { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-soft); margin: var(--sp-9) 0 var(--sp-4); } /* Galerie als waagrechte Trommel. Wischen und Trackpad laufen rein über CSS, ohne JS bleibt es ein ganz normaler Scroller. Ab 1024px stehen genau drei Bilder im Bild; darunter ragt bewusst ein angeschnittenes viertes herein — das ist auf dem Telefon der deutlichste Hinweis, dass es weitergeht. */ .gallery-shell { position: relative; } .gallery { --cols: 1.35; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--sp-3)) / var(--cols)); gap: var(--sp-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gallery::-webkit-scrollbar { display: none; } /* Zwei Klassen, weil .lightbox-trigger weiter unten `all: unset` setzt und bei gleicher Spezifität gewinnen würde — Schnappen und min-width wären dann weg. */ .gallery-shell .gallery > * { scroll-snap-align: start; min-width: 0; } @media (min-width: 768px) { .gallery { --cols: 2.4; } } @media (min-width: 1024px) { .gallery { --cols: 3; } } .gallery img { border-radius: var(--r-media); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } /* Pfeile sitzen halb über dem Rand der Trommel. Sie werden erst per JS erzeugt — ohne JS gäbe es sonst zwei tote Schaltflächen. */ .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface); color: var(--c-text); border: var(--border-w) solid var(--c-border-strong); border-radius: var(--r-pill); cursor: pointer; box-shadow: var(--sh-1); transition: border-color .18s ease, color .18s ease; } .gallery-nav:hover { border-color: var(--c-accent); color: var(--c-accent); } .gallery-nav .icon { width: 20px; height: 20px; } .gallery-nav--prev { left: calc(var(--tap) / -2); } .gallery-nav--next { right: calc(var(--tap) / -2); } .gallery-nav--next .icon { transform: scaleX(-1); } /* Auf schmalen Schirmen ist kein Platz außerhalb — dort rücken sie nach innen. */ @media (max-width: 900px) { .gallery-nav--prev { left: var(--sp-2); } .gallery-nav--next { right: var(--sp-2); } } .gallery-shell[data-scrollable="false"] .gallery-nav { display: none; } /* ── Preise ───────────────────────────────────────────────────────────── */ .price-card { background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6); } @media (min-width: 768px) { .price-card { padding: var(--sp-8); } } .table-scroll { overflow-x: auto; } .price-table th, .price-table td { text-align: left; padding: var(--sp-4) var(--sp-3); } .price-table thead th { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft); border-bottom: var(--border-w) solid var(--c-border); } .price-table thead th.th-amount { text-align: right; } .price-table tbody tr + tr td { border-top: var(--rule-weight) solid var(--c-border); } .price-table .route { font-weight: var(--fw-medium); color: var(--c-text); } .price-table .amount { text-align: right; white-space: nowrap; font-family: var(--ff-display); font-size: var(--fs-xl); color: var(--c-accent); } /* Die eigene Spalte „Hinweis" ist am 15.08.2026 entfallen — sie trug in vier von fünf Zeilen denselben Text. Der Zusatz steht jetzt klein unter dem Betrag. Eigener Schriftschnitt und eigene Farbe, damit er nicht als Teil der Zahl gelesen wird; `white-space` erbt er NICHT von .amount, weil er als eigene Zeile umbrechen darf. */ .price-table .vat { display: block; white-space: normal; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-body); letter-spacing: 0; color: var(--c-text-soft); } @media (max-width: 639px) { .price-table, .price-table tbody { display: block; } .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .price-table tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-4); align-items: center; padding-block: var(--sp-4); } .price-table tbody tr + tr { border-top: var(--rule-weight) solid var(--c-border); } .price-table tbody tr + tr td { border-top: 0; } .price-table td { padding: 0; } .price-table .route { grid-column: 1; grid-row: 1; } .price-table .amount { grid-column: 2; grid-row: 1; } } .price-note { margin-top: var(--sp-6); color: var(--c-text-muted); } .price-note + .price-note { margin-top: var(--sp-4); } .price-cta { margin-top: var(--sp-7); } /* ── Über mich ────────────────────────────────────────────────────────── */ .about-grid { display: grid; gap: var(--sp-7); align-items: center; } @media (min-width: 1024px) { .about-grid { grid-template-columns: .8fr 1.2fr; gap: var(--sp-10); } } .about-figure { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; } .about-figure img { flex: none; width: 100%; height: auto; border-radius: var(--r-media); object-fit: cover; } .about-figure figcaption { font-size: var(--fs-sm); color: var(--c-text-soft); } /* Bemasst wird der TRIGGER, nicht das Bild: `.about-figure img` (Spezifitaet 0,1,1) verliert gegen `.lightbox-trigger img` (0,2,1) weiter unten, die `width/height: 100%` setzt. Solange die Portraetdatei quadratisch war, fiel das nicht auf — seit sie hochformatig ist (28.08.), bestimmte sie ihre Groesse selbst. Die Hoehe folgt hier bewusst dem Bildverhaeltnis; ein fester Wert wuerde nur wieder zuschneiden. */ .about-figure > picture, .about-figure .lightbox-trigger { display: block; width: 200px; } @media (min-width: 768px) { .about-figure > picture, .about-figure .lightbox-trigger { width: 300px; } } /* Zweispalter, 28.08.2026: Das Portraet stand auf `align-items: center` und schwebte damit 60-114 px unter der Eyebrow-Zeile und 97-151 px ueber dem Textende (gemessen mit measure-about.mjs) — es wirkte deplaziert. Jetzt Oberkante buendig zur Textspalte. Ganz buendig geht unten NICHT: die Textspalte ist 490-570 px hoch, ein quadratisches Bild dieser Hoehe waere breiter als die Spalte, und ein Strecken auf 300x520 wuerde `object-fit: cover` das Gesicht seitlich abschneiden lassen — derselbe Fehler wie am 12.08. beim Fahrzeugbild. Das Bild nimmt stattdessen die Spaltenbreite (gedeckelt auf 400 px), damit die Unterkante naeher an das Textende rueckt. ZWEI Fallen auf einmal, beide schon dokumentiert, beide hier zugeschlagen: (1) Media Queries erhoehen die Spezifitaet nicht — diese Regel MUSS hinter der 768er stehen. (2) `