/* 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 > *, .steps > *, .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, .step, .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); } /* 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); } .service .num { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); color: var(--c-accent); /* Die Ziffernpaare dürfen nicht umbrechen — sonst steht „0" über „1". */ white-space: nowrap; overflow-wrap: normal; } /* 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 .num { display: none; } .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); } .v-index .service .num { padding-top: .45em; } /* ── 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%; } } /* Größer und luftiger gesetzt (Ansage Matteo): der Text füllt die Bildhöhe dadurch von sich aus weitgehend aus, statt die Differenz als Loch zwischen den beiden Absätzen stehen zu lassen. Betrifft besonders Englisch — der Text ist dort deutlich kürzer als im Deutschen. 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 .note { color: var(--c-text-soft); font-size: var(--fs-sm); } .price-table .amount { text-align: right; white-space: nowrap; font-family: var(--ff-display); font-size: var(--fs-xl); color: var(--c-accent); } @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 .note { grid-column: 1; grid-row: 2; } .price-table .amount { grid-column: 2; grid-row: 1 / span 2; } } .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: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-border-strong); } .about-figure figcaption { font-size: var(--fs-sm); color: var(--c-text-soft); } @media (min-width: 768px) { .about-figure img { width: 300px; height: 300px; } } .about-copy p + p { margin-top: var(--sp-4); } .about-copy p { color: var(--c-text-muted); } /* ── Ablauf ───────────────────────────────────────────────────────────── */ .steps { display: grid; gap: var(--sp-6); counter-reset: step; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } } .step { display: flex; flex-direction: column; gap: var(--sp-3); } .step .marker { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: var(--border-w) solid var(--c-border-strong); color: var(--c-accent); font-family: var(--ff-display); font-size: var(--fs-lg); } .step h3 { font-size: var(--fs-lg); } .step p { color: var(--c-text-muted); font-size: var(--fs-base); } .steps-note { margin-top: var(--sp-7); color: var(--c-text-soft); font-size: var(--fs-sm); } /* ── Kontakt ──────────────────────────────────────────────────────────── */ /* Nur noch von Dark Luxury benutzt — Light Editorial führt den Kontakt seit 10.08.2026 einspaltig: Text, dann die drei Wege als Reihe, dann das Formular. */ .contact-grid { display: grid; gap: var(--sp-8); } @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } } .contact-intro { max-width: 60ch; } .contact-cards { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); } /* Trennzeile: markiert den Übergang vom schnellen Weg zum langen Formular. */ .contact-or { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-9); color: var(--c-text-soft); font-size: var(--fs-sm); } .contact-or::before, .contact-or::after { content: ""; flex: 1; height: 1px; background: var(--c-border); } .contact-form-wrap { margin-top: var(--sp-6); max-width: 720px; margin-inline: auto; } /* Die Trennzeile ist bereits die Überschrift des Formulars — die Legende stünde als zweite Überschrift für dieselbe Sache da. Sie verschwindet nur optisch. */ .contact-form-wrap legend { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-card { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; min-height: var(--tap); border: var(--border-w) solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); text-decoration: none; color: var(--c-text); background: var(--c-surface); } .contact-card:hover { border-color: var(--c-accent); } .contact-card .icon { width: 22px; height: 22px; color: var(--c-accent); } .contact-card .k { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft); } .contact-card .v { font-weight: var(--fw-medium); overflow-wrap: anywhere; } .contact-card .n { font-size: var(--fs-sm); color: var(--c-text-soft); } /* Drei gleichwertige Wege nebeneinander: nebeneinander liest sich das als Wahl, untereinander als Rangliste. Unter 768px stapelt es ohnehin. */ @media (min-width: 768px) { .contact-cards { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .contact-card { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } } .contact-address { margin-top: var(--sp-6); font-style: normal; color: var(--c-text-muted); font-size: var(--fs-sm); } .contact-note { margin-top: var(--sp-6); color: var(--c-text-soft); font-size: var(--fs-sm); } /* Formular */ .form { display: grid; gap: var(--sp-5); } .form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-5); } .form legend { font-family: var(--ff-display); font-size: var(--fs-xl); margin-bottom: var(--sp-4); } .field { display: grid; gap: var(--sp-2); } .field label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); } .field .req { color: var(--c-accent); } .field input, .field select, .field textarea { min-height: var(--tap); width: 100%; background: var(--c-surface); color: var(--c-text); border: var(--border-w) solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); } .field textarea { min-height: calc(var(--tap) * 2.4); resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--c-text-soft); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); } .field .err { font-size: var(--fs-sm); color: var(--c-accent); min-height: 0; } .field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--c-accent); border-width: 2px; } @media (min-width: 640px) { .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } } .consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-text-muted); } .consent input { width: 24px; height: 24px; min-height: 24px; flex: none; margin-top: .2em; accent-color: var(--c-accent); } .form-hint { font-size: var(--fs-sm); color: var(--c-text-soft); } .form-status { font-size: var(--fs-base); color: var(--c-accent); font-weight: var(--fw-medium); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .faq-list { border-top: var(--rule-weight) solid var(--c-border); } .faq-item { border-bottom: var(--rule-weight) solid var(--c-border); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-width: 0; overflow-wrap: anywhere; min-height: var(--tap); padding-block: var(--sp-5); cursor: pointer; list-style: none; font-family: var(--ff-display); font-size: var(--fs-lg); color: var(--c-text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(45deg) translateY(-25%); transition: transform .2s ease; } .faq-item[open] summary::after { transform: rotate(225deg) translateY(-25%); } .faq-item .answer { padding-bottom: var(--sp-6); color: var(--c-text-muted); max-width: var(--maxw-prose); } /* ── Fußzeile ─────────────────────────────────────────────────────────── */ .site-footer { border-top: var(--border-w) solid var(--c-border); background: var(--c-bg-alt); padding-block: var(--section-y) var(--sp-7); } /* Vier Spalten: Marke · Kontakt · Leistungen · Rechtliches. Auf mittleren Schirmen zweispaltig gestapelt — vier nebeneinander würden dort die Zeilen umbrechen lassen. */ .footer-grid { display: grid; gap: var(--sp-8); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-9); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(0, 1fr) repeat(3, max-content); column-gap: var(--sp-10); row-gap: var(--sp-9); } } .footer-grid p, .footer-grid li, .footer-grid address { font-size: var(--fs-sm); color: var(--c-text-muted); font-style: normal; } .footer-grid h2 { 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-bottom: var(--sp-4); } /* Beide Fußzeilen-Listen tragen dasselbe Format: Aufzählungspunkt sitzt bündig unter dem ersten Buchstaben der Überschrift, der Text hängt eingerückt daneben. Das Padding steht in em, damit die Einrückung an der Schriftgröße hängt. */ .footer-grid ul { display: grid; gap: var(--sp-2); list-style: disc; padding-left: 1.05em; } .footer-grid li::marker { color: var(--c-text-soft); } /* Die Rechtliches-Liste hat 44px hohe Klickflächen — ohne eigenen Abstand ergibt das denselben Zeilenrhythmus wie die Leistungsliste daneben. */ .footer-grid .footer-links { gap: 0; } .footer-grid a { color: var(--c-text-muted); text-decoration: none; } .footer-grid a:hover { color: var(--c-accent); text-decoration: underline; } /* Klickflächen in der Fußzeile auf Fingergröße bringen. Inline-Links mitten im Fließtext bleiben davon ausgenommen (WCAG 2.5.8, Ausnahme „in Sentence"). */ .footer-grid .footer-links a { min-height: var(--tap); display: inline-flex; align-items: center; } .footer-grid address a { display: inline-flex; align-items: center; min-height: var(--tap); } .footer-bottom { margin-top: var(--sp-9); padding-top: var(--sp-5); border-top: var(--border-w) solid var(--c-border); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-xs); color: var(--c-text-soft); } .credits { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--c-text-soft); max-width: var(--maxw-prose); } /* ── Mobile Aktionsleiste ─────────────────────────────────────────────── */ .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(3, 1fr); background: color-mix(in srgb, var(--c-bg) 94%, transparent); backdrop-filter: blur(10px); border-top: var(--border-w) solid var(--c-border); padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-bar a { min-height: var(--tap); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text); text-decoration: none; padding-block: var(--sp-3); } .mobile-bar a + a { border-left: var(--border-w) solid var(--c-border); } .mobile-bar a:last-child { color: var(--c-on-accent); background: var(--c-accent); } .mobile-bar .icon { width: 18px; height: 18px; } @media (min-width: 768px) { .mobile-bar { display: none; } } /* ── Rechtsseiten ─────────────────────────────────────────────────────── */ .legal-page { padding-block: var(--sp-9) var(--section-y); } .legal-page h1 { font-size: var(--fs-3xl); } .legal-page .lead { margin-top: var(--sp-4); } .legal-block { margin-top: var(--sp-8); max-width: var(--maxw-prose); } .legal-block h2 { font-size: var(--fs-lg); font-family: var(--ff-body); font-weight: var(--fw-medium); margin-bottom: var(--sp-3); } .legal-block p, .legal-block li, .legal-block dd { color: var(--c-text-muted); font-size: var(--fs-base); } .legal-block p + p { margin-top: var(--sp-4); } .legal-block ul { padding-left: var(--sp-5); display: grid; gap: var(--sp-2); } .legal-address { font-style: normal; color: var(--c-text-muted); } .legal-dl dt { font-weight: var(--fw-medium); color: var(--c-text); margin-top: var(--sp-4); font-size: var(--fs-sm); } .legal-dl dd { margin-left: 0; } mark.todo { background: var(--c-accent-tint); color: var(--c-text); border: 1px dashed var(--c-accent); border-radius: var(--r-sm); padding: .1em .45em; font-size: var(--fs-sm); } .back-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); margin-top: var(--sp-9); } /* ── Lightbox — alle Content-Bilder klickbar/vergrößerbar ──────────────── Progressive Enhancement: Bilder sind ohne JS ganz normal sichtbar, der Zoom-Cursor/Trigger entsteht erst zur Laufzeit (site.js). */ .lightbox-trigger { all: unset; display: block; cursor: zoom-in; position: relative; border-radius: inherit; } .lightbox-trigger:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; } .lightbox-trigger picture, .lightbox-trigger img { display: block; width: 100%; height: 100%; } .lightbox-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(17, 15, 13, .94); display: flex; align-items: center; justify-content: center; padding: var(--sp-6) clamp(3.5rem, 4vw + 2rem, 6rem); } .lightbox-overlay[hidden] { display: none; } .lightbox-figure { max-width: 1200px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } .lightbox-figure img { max-width: 100%; max-height: 76vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-media); } .lightbox-caption { color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); text-align: center; max-width: 62ch; } .lightbox-count { color: rgba(255, 255, 255, .55); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; } .lightbox-btn { position: fixed; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: #fff; cursor: pointer; } .lightbox-btn:hover { background: rgba(255, 255, 255, .18); } .lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lightbox-btn .icon { width: 22px; height: 22px; } .lightbox-close { top: var(--sp-5); right: var(--sp-5); } .lightbox-prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); } .lightbox-next { right: var(--sp-4); top: 50%; transform: translateY(-50%); } @media (min-width: 640px) { .lightbox-prev { left: var(--sp-6); } .lightbox-next { right: var(--sp-6); } } @media (prefers-reduced-motion: no-preference) { .lightbox-figure img { transition: opacity .12s ease; } }