/* ========================================================================== Sterk VIP Services GmbH — Design system -------------------------------------------------------------------------- Concept: "Departure board precision" — the split-flap (flip-board) boards of an arrivals/departures hall, reframed as an editorial, Swiss-precise chauffeur brand. Warm asphalt black + paper white + one sharp antique-gold signal color (matched to swissgeneralservices.com, Mehmet's brand-colour reference). Display serif (Fraunces) for editorial voice, architectural grotesk (Archivo) for structure and UI. One orchestrated motion signature — the split-flap flip — used deliberately, not scattered fades on every element. ========================================================================== */ :root { /* Color tokens ----------------------------------------------------- */ --ink: #12160f; /* warm asphalt black — primary background */ --deep: #080b07; /* deepest black — footer, overlays */ --panel: #1a1f16; /* raised panel / card background on ink */ --paper: #f3efe6; /* warm paper white — primary text on ink, light bg */ --paper-dim: #c9c4b8; /* muted paper — secondary text on ink */ --steel: #8a8781; /* quiet tertiary text / meta */ --signal: #b98a4e; /* warm antique gold — the ONE sharp accent (from swissgeneralservices.com reference) */ --signal-dim: #9c723f; /* pressed/hover state of signal */ --line: rgba(243, 239, 230, 0.14); /* hairline borders on ink */ --line-strong:rgba(243, 239, 230, 0.28); /* Schleier über dem Sternenhimmel: Flächen, die Text tragen, brauchen einen halbtransparenten Grund — sonst funkelt es durch die Schrift. Hier zentral einstellbar statt an 8 Stellen verstreut. */ --veil: rgba(18, 22, 15, 0.58); /* Text tragende Flächen */ --veil-strong: rgba(18, 22, 15, 0.82); /* dichter Fliesstext, Recht */ --veil-panel: rgba(26, 31, 22, 0.62); /* "angehobene" Panels */ /* Type ---------------------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Archivo", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; --radius: 3px; --max-width: 1220px; --gutter: 28px; } /* --- Reset --------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; color: var(--paper); font-family: var(--font-body); scroll-behavior: smooth; } /* Die Grundfarbe sitzt auf , NICHT auf body oder auf dem Sternen- Wrapper: so stimmt die Farbe schon bevor initStarfield() läuft (und auch wenn JS ganz ausfällt), und das Einblenden des Sternenhimmels animiert nur die Sterne, nicht den Seitenhintergrund. body muss transparent sein, sonst verdeckt es den Himmel bei z-index:-1 komplett. */ html { background: var(--ink); } body { background: transparent; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font-family: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } /* --- Type scale ------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 0.4em; color: var(--paper); } h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 500; } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } p { line-height: 1.6; } .sterk-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--signal); margin-bottom: 18px; } .sterk-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--signal); } .sterk-lede { color: var(--paper-dim); font-size: 1.08rem; max-width: 46ch; line-height: 1.65; } /* --- Layout ------------------------------------------------------------ */ .sterk-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .sterk-section { padding: 108px 0; border-bottom: 1px solid var(--line); position: relative; } .sterk-section-tight { padding: 72px 0; } .sterk-section-head { max-width: 640px; margin-bottom: 56px; } .sterk-section-light { background: var(--paper); color: var(--ink); border-bottom: none; } .sterk-section-light h1, .sterk-section-light h2, .sterk-section-light h3 { color: var(--ink); } .sterk-section-light .sterk-lede { color: #55524a; } /* --- Buttons ------------------------------------------------------------ */ .sterk-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); color: var(--paper); background: transparent; padding: 13px 22px; border-radius: var(--radius); text-decoration: none; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease; white-space: nowrap; } .sterk-btn:hover { border-color: var(--signal); color: var(--signal); } .sterk-btn:active { transform: translateY(1px); } .sterk-btn-solid { background: var(--signal); border-color: var(--signal); color: var(--deep); } .sterk-btn-solid:hover { background: var(--signal-dim); border-color: var(--signal-dim); color: var(--deep); } .sterk-btn-ghost-light { border-color: rgba(18,22,15,0.22); color: var(--ink); } .sterk-btn-ghost-light:hover { border-color: var(--signal); color: var(--signal-dim); } /* --- Header / nav --------------------------------------------------------- */ .sterk-header { position: sticky; top: 0; z-index: 80; background: rgba(18, 22, 15, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .sterk-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--gutter); max-width: var(--max-width); margin: 0 auto; } .sterk-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; color: var(--paper); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; } .sterk-logo span { color: var(--signal); } /* flex-shrink:0 ist hier kein Detail, sondern Pflicht: die Sperrung ist 3.89:1 breit, und als Flex-Kind würde der Header ihre BREITE kürzen, während die height-Regel die Höhe hält — das Logo würde schmalgequetscht statt kleiner gezeichnet. object-fit ist das zweite Netz, falls doch einmal eine Breite erzwungen wird. */ .sterk-logo { flex: 0 0 auto; } /* 42px: die Wortmarke ist zweizeilig ("STERK" über "EXECUTIVE VIP SERVICES"), die Unterzeile braucht die Höhe. Die Kopfzeile wächst dadurch NICHT — ihre Höhe bestimmt der CTA-Knopf mit 43px. */ .sterk-logo img { height: 42px; width: auto; display: block; object-fit: contain; } .sterk-nav { display: flex; align-items: center; gap: 30px; } .sterk-nav a { text-decoration: none; color: var(--paper-dim); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; position: relative; padding: 4px 0; } .sterk-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--signal); transition: right 0.25s ease; } .sterk-nav a:hover, .sterk-nav a.is-active { color: var(--paper); } .sterk-nav a:hover::after, .sterk-nav a.is-active::after { right: 0; } .sterk-header-actions { display: flex; align-items: center; gap: 14px; } /* Warnung unter der Uhrzeit, wenn Datum + Zeit in der Vergangenheit liegen. Bewusst dieselbe Signalfarbe wie die übrigen Formularfehler, damit sie sofort als Problem gelesen wird — nicht als beiläufiger Hinweis. */ .sterk-date-warning { margin: 10px 0 0; font-size: 0.85rem; line-height: 1.45; color: #ff8a65; } /* "Dieses Fahrzeug wählen" unter jedem Fahrzeug auf der Flottenseite. inline-block statt Blockbreite: der Knopf soll sich an seinen Text anpassen, nicht über die ganze Textspalte laufen. */ .sterk-vehicle-cta { margin: 28px 0 0; } .sterk-vehicle-cta .sterk-btn { display: inline-block; } /* ========================================================================== Art der Fahrt (Ein Weg / Hin- und Rückfahrt) ========================================================================== */ .sterk-triptype { display: flex; gap: 8px; } .sterk-triptype-btn { flex: 1; background: var(--deep); border: 1px solid var(--line); color: var(--paper-dim); padding: 12px 14px; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .sterk-triptype-btn:hover { border-color: var(--line-strong); color: var(--paper); } .sterk-triptype-btn.is-active { border-color: var(--signal); color: var(--signal); background: rgba(185, 138, 78, 0.08); } /* ========================================================================== Buchungsseite (booking.html) ========================================================================== */ .sterk-booking-page { border-bottom: none; } .sterk-booking-layout { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; margin-top: 28px; } .sterk-booking-h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 8px; } .sterk-booking-empty { max-width: 560px; padding: 40px 0 60px; } /* Linke Spalte: Transferdetails. position:sticky hält sie beim Scrollen durch die Fahrzeugliste im Blick — der Kunde soll jederzeit sehen, wofür er gerade einen Preis vergleicht. */ .sterk-trip-card { background: var(--veil); box-shadow: 0 0 0 1px var(--line); border-radius: 6px; overflow: hidden; position: sticky; top: 96px; /* Mit dem gewählten Fahrzeug wird die Karte deutlich höher. Wäre sie höher als der Bildschirm, bliebe ihr unteres Ende beim Scrollen unerreichbar — sticky klebt ja oben fest. Darum eine Obergrenze und notfalls ein eigener Scrollbereich. */ max-height: calc(100vh - 120px); overflow-y: auto; } .sterk-trip-card-title { font-size: 1.05rem; padding: 20px 22px 14px; margin: 0; } .sterk-trip-map { height: 210px; background: var(--deep); } .sterk-trip-facts { display: grid; /* auto-fit statt "1fr 1fr": ist nur eine der beiden Angaben bekannt, füllt sie die ganze Breite statt eine leere Hälfte zu hinterlassen. */ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); background: var(--signal); color: var(--ink); } .sterk-trip-facts[hidden] { display: none; } .sterk-trip-facts > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; } .sterk-trip-facts span { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; } .sterk-trip-facts strong { font-size: 0.95rem; font-weight: 700; } .sterk-trip-list { list-style: none; margin: 0; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; } .sterk-trip-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--paper-dim); font-size: 0.9rem; } .sterk-trip-list li::before { content: "◦"; color: var(--signal); font-size: 1rem; line-height: 1.3; } .sterk-trip-list li.is-pin::before { content: "⌖"; } .sterk-trip-list li.is-arrow::before { content: "→"; } .sterk-trip-list li.is-cal::before { content: "▦"; } /* Das gewählte Fahrzeug, unten in der Transferkarte. Gleiche Bildbehandlung wie in der Fahrzeugliste rechts (freigestellte PNGs auf einem weichen Lichtkegel), nur kompakter. */ .sterk-trip-vehicle { border-top: 1px solid var(--line); padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; } .sterk-trip-vehicle[hidden] { display: none; } .sterk-trip-vehicle img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; display: block; border-radius: 4px; background: radial-gradient(ellipse at 50% 64%, rgba(185,138,78,0.12), transparent 62%); } .sterk-trip-vehicle-meta { display: flex; flex-direction: column; gap: 2px; } .sterk-trip-vehicle-meta strong { font-size: 1rem; color: var(--paper); } .sterk-trip-vehicle-meta span { font-size: 0.82rem; color: var(--paper-dim); } .sterk-trip-vehicle-price { font-family: var(--font-display); font-size: 1.35rem; color: var(--signal); } /* Rechte Spalte: eine Karte je Fahrzeug */ .sterk-vehicle-list { display: flex; flex-direction: column; gap: 2px; margin-top: 28px; } .sterk-vehicle-option { display: grid; /* 220px für die Preisspalte: "Dieses Fahrzeug wählen" ist im Deutschen deutlich länger als im Englischen und lief bei 180px aus dem Knopf heraus. Die Bildspalte gibt die Breite dafür ab. */ grid-template-columns: 200px 1fr 220px; gap: 24px; align-items: center; background: var(--veil); box-shadow: 0 0 0 1px var(--line); padding: 22px 24px; } .sterk-vehicle-option-media { background: radial-gradient(ellipse at 50% 64%, rgba(185,138,78,0.12), transparent 62%); border-radius: 4px; } .sterk-vehicle-option-media img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; display: block; } .sterk-vehicle-option-body h3 { font-size: 1.05rem; margin: 6px 0 10px; } .sterk-vehicle-option-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sterk-vehicle-option-specs li { color: var(--paper-dim); font-size: 0.86rem; line-height: 1.5; } .sterk-vehicle-option-price { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; } .sterk-vehicle-price { font-family: var(--font-display); font-size: 1.8rem; color: var(--paper); white-space: nowrap; } .sterk-vehicle-price small { font-size: 0.8rem; color: var(--steel); font-family: var(--font-body); } .sterk-vehicle-price.is-request { font-size: 1rem; color: var(--signal); font-family: var(--font-body); } .sterk-vehicle-option-price .sterk-btn { width: 100%; text-align: center; } @media (max-width: 1000px) { .sterk-booking-layout { grid-template-columns: 1fr; } /* Nicht mehr sticky -> die Höhenbremse von oben muss weg, sonst würde die Karte hier mittendrin abgeschnitten statt einfach mitzuscrollen. */ .sterk-trip-card { position: static; max-height: none; overflow-y: hidden; } .sterk-vehicle-option { grid-template-columns: 180px 1fr; } /* Preis und Knopf rutschen unter Bild und Text, statt die Spalte immer schmaler zu quetschen. */ .sterk-vehicle-option-price { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; } .sterk-vehicle-option-price .sterk-btn { width: auto; } } @media (max-width: 560px) { .sterk-vehicle-option { grid-template-columns: 1fr; gap: 16px; } .sterk-vehicle-option-price { flex-direction: column; align-items: stretch; gap: 14px; } .sterk-vehicle-option-price .sterk-btn { width: 100%; } .sterk-vehicle-price { text-align: left; } } /* Honeypot-Feld im Buchungsformular. Bewusst NICHT display:none — manche Bots überspringen offensichtlich versteckte Felder. Es wird stattdessen aus dem sichtbaren Bereich geschoben: im DOM vorhanden und für einen Bot ausfüllbar, für Menschen nicht erreichbar. `position:absolute` hält es ausserdem aus dem Formularfluss heraus, damit kein Leerraum entsteht. */ .sterk-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .sterk-lang-switch { display: flex; gap: 4px; } /* Kopie im Klappmenü — erst unter 420px sichtbar (siehe unten). */ .sterk-lang-switch--nav { display: none; } .sterk-lang-btn { background: none; border: 1px solid var(--line); color: var(--steel); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; padding: 9px 12px; min-height: 40px; border-radius: var(--radius); cursor: pointer; } .sterk-lang-btn.is-active { color: var(--signal); border-color: var(--signal); } .sterk-whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: #06210f; flex-shrink: 0; transition: transform 0.15s ease, box-shadow 0.2s ease; } .sterk-whatsapp:hover { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(37,211,102,0.15); } .sterk-whatsapp svg { width: 20px; height: 20px; } .sterk-nav-toggle { display: none; background: none; border: none; color: var(--paper); cursor: pointer; width: 40px; height: 40px; padding: 8px; } .sterk-nav-toggle span { display: block; height: 2px; background: var(--paper); margin: 5px 0; transition: transform 0.2s ease, opacity 0.2s ease; } /* Floating WhatsApp button (persistent, all pages) */ .sterk-whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #25d366; color: #06210f; box-shadow: 0 10px 28px rgba(0,0,0,0.4); transition: transform 0.18s ease; } .sterk-whatsapp-float:hover { transform: scale(1.07); } .sterk-whatsapp-float svg { width: 28px; height: 28px; } /* ========================================================================== Split-flap component — the signature motion moment. Each character/word is stacked front/back like a physical flap; a single orchestrated flip on load (staggered by --i) reveals the real content. ========================================================================== */ .sterk-flapline { display: flex; flex-wrap: wrap; } .sterk-flap { position: relative; display: inline-block; perspective: 240px; } .sterk-flap .sterk-flap-face { display: inline-block; animation: sterkFlap 0.7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); transform-origin: 50% 100%; } @keyframes sterkFlap { 0% { transform: rotateX(70deg); opacity: 0; filter: blur(1px); } 60% { transform: rotateX(-8deg); opacity: 1; } 100% { transform: rotateX(0deg); opacity: 1; } } /* Stat / number flap used for "13 years", "2 classes", etc. */ .sterk-stat-flap { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 600; color: var(--signal); display: inline-block; animation: sterkFlap 0.8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); } /* --- Hero (home) --------------------------------------------------------- */ .sterk-hero { padding: 88px 0 132px; background: radial-gradient(1100px 480px at 82% -10%, rgba(185,138,78,0.14), transparent 60%), radial-gradient(1200px 760px at 18% 42%, rgba(18,22,15,0.80), rgba(18,22,15,0.30) 55%, transparent 78%); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; } .sterk-hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 60px; align-items: end; } .sterk-hero h1 { margin-bottom: 26px; } /* Emphasized headline word on every hero: styled as the one "flap" that reveals itself on load — the site's single signature motion moment, reused consistently instead of scattering effects everywhere else. */ h1 em, h2 em { color: var(--signal); font-style: normal; display: inline-block; transform-origin: 50% 100%; animation: sterkFlap 0.9s cubic-bezier(.2,.7,.2,1) both; animation-delay: 0.28s; } .sterk-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .sterk-hero-panel { border-left: 1px solid var(--line); padding-left: 44px; } .sterk-hero-panel-item { padding: 18px 0; border-bottom: 1px solid var(--line); } .sterk-hero-panel-item:first-child { padding-top: 0; } .sterk-hero-panel-item:last-child { border-bottom: none; } .sterk-hero-panel-item .k { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); display: block; margin-bottom: 6px; } .sterk-hero-panel-item .v { font-family: var(--font-display); font-size: 1.15rem; color: var(--paper); } /* --- Stat ticker (departure-board row) ----------------------------------- */ .sterk-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .sterk-stat { padding: 30px 26px; border-right: 1px solid var(--line); background: var(--veil-panel); } .sterk-stat:last-child { border-right: none; } .sterk-stat .label { display: block; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); margin-top: 8px; } /* --- Card grids ----------------------------------------------------------- */ .sterk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: transparent; border: 1px solid var(--line); } .sterk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: transparent; border: 1px solid var(--line); } .sterk-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: transparent; border: 1px solid var(--line); } /* Haarlinie zwischen den Karten: früher der Container-Hintergrund, der durch die 2px-Lücke schien. Da die Karten jetzt durchscheinend sind, trägt sie jede Karte selbst als 1px-Aussenring. */ .sterk-card, .sterk-dest-card, .sterk-fleet-photo-card, .sterk-contact-item { box-shadow: 0 0 0 1px var(--line); } .sterk-card { background: var(--veil); padding: 34px 28px; position: relative; } .sterk-card .num { font-family: var(--font-display); color: var(--signal); font-size: 0.85rem; display: block; margin-bottom: 22px; } .sterk-card h3 { font-size: 1.15rem; margin-bottom: 10px; } .sterk-card p { color: var(--paper-dim); font-size: 0.94rem; margin: 0; } /* --- Destination cards ------------------------------------------------- */ .sterk-dest-card { background: var(--veil); overflow: hidden; } .sterk-dest-media { aspect-ratio: 4/3; position: relative; overflow: hidden; background: linear-gradient(160deg, #1f2318, #0d100b); } .sterk-dest-media svg { width: 100%; height: 100%; } .sterk-dest-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sterk-dest-body { padding: 22px 24px 28px; } .sterk-dest-body .place { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); display: block; margin-bottom: 8px; } .sterk-dest-body h3 { font-size: 1.15rem; margin-bottom: 8px; } .sterk-dest-body p { color: var(--paper-dim); font-size: 0.9rem; margin: 0; } /* --- Fleet page ------------------------------------------------------------ */ .sterk-vehicle { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding: 80px 0; border-bottom: 1px solid var(--line); } .sterk-vehicle:last-child { border-bottom: none; } /* Fahrzeugnamen enthalten Bindestriche ("Mercedes-Maybach S-Klasse"), an denen der Browser bevorzugt umbricht — das trennte "S-" von "Klasse". balance verteilt die Zeilen stattdessen gleichmässig und bricht lieber an Leerzeichen. Ältere Browser ignorieren die Eigenschaft folgenlos. */ .sterk-vehicle h2 { text-wrap: balance; } .sterk-vehicle.is-reverse { grid-template-columns: 0.9fr 1.1fr; } .sterk-vehicle.is-reverse .sterk-vehicle-media { order: 2; } .sterk-vehicle-media { position: relative; background: linear-gradient(160deg, #1f2318, #0d100b); border: 1px solid var(--line); border-radius: 6px; padding: 28px; overflow: hidden; } .sterk-vehicle-media svg { width: 100%; height: auto; } /* Freigestellte Aussenaufnahmen: der Wagen hat keinen eigenen Hintergrund, also darf NICHT beschnitten werden (object-fit:cover würde Räder und Stossstangen abschneiden). Stattdessen einpassen, mit etwas Luft und dem goldenen Schein darunter — sonst schwebt das Auto im Nichts. */ .sterk-vehicle-media.has-cutout { padding: 22px; background: radial-gradient(ellipse at 50% 64%, rgba(185,138,78,0.12), transparent 62%), var(--ink); } .sterk-vehicle-media.has-cutout img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; } .sterk-vehicle-media.has-photo { padding: 0; } .sterk-vehicle-media.has-photo img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .sterk-vehicle-interior { margin-top: 18px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); } .sterk-vehicle-interior img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .sterk-vehicle-interior-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; background: var(--panel); font-size: 0.72rem; color: var(--steel); text-transform: uppercase; letter-spacing: 0.05em; } .sterk-photo-credit { display: block; margin-top: 8px; font-size: 0.68rem; color: var(--steel); opacity: 0.75; } .sterk-photo-credit a { color: inherit; text-decoration: underline; } /* Homepage fleet-teaser: photo + text card */ .sterk-fleet-photo-card { background: var(--veil); overflow: hidden; } .sterk-fleet-photo-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } /* Transparent cutouts (no background of their own) — let the card's own dark background show through instead of cropping into the car. */ .sterk-fleet-photo-card img.is-cutout { object-fit: contain; padding: 28px; box-sizing: border-box; background: radial-gradient(ellipse at 50% 62%, rgba(185,138,78,0.10), transparent 60%), var(--ink); } .sterk-fleet-photo-card .body { padding: 24px 26px 26px; } .sterk-fleet-photo-card h3 { font-size: 1.1rem; margin-bottom: 8px; } .sterk-fleet-photo-card p { color: var(--paper-dim); font-size: 0.92rem; margin: 0; } .sterk-vehicle-specs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .sterk-vehicle-specs li { border-top: 1px solid var(--line); padding-top: 12px; } .sterk-vehicle-specs .k { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--steel); margin-bottom: 5px; } .sterk-vehicle-specs .v { font-family: var(--font-display); font-size: 1.15rem; } .sterk-vehicle-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; } .sterk-vehicle-thumbs .thumb { background: linear-gradient(160deg, #1f2318, #0d100b); border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 10px; } .sterk-vehicle-thumbs svg { width: 100%; height: 100%; } /* --- About / story page --------------------------------------------------- */ .sterk-story-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; } .sterk-story-figure { position: sticky; top: 100px; } .sterk-pull { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--paper); border-left: 2px solid var(--signal); padding-left: 24px; margin: 40px 0; max-width: 52ch; } .sterk-story-grid p { color: var(--paper-dim); max-width: 62ch; } .sterk-contact-block { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: transparent; border: 1px solid var(--line); margin-top: 56px; } .sterk-contact-item { background: var(--veil); padding: 26px 24px; } .sterk-contact-item span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--steel); margin-bottom: 8px; } .sterk-contact-item a, .sterk-contact-item p { font-family: var(--font-display); font-size: 1.15rem; margin: 0; text-decoration: none; } .sterk-contact-item a:hover { color: var(--signal); } /* --- WEF / editorial page --------------------------------------------------- */ .sterk-wef-hero { background: linear-gradient(180deg, rgba(22,25,18,0.88), rgba(18,22,15,0.5)); padding: 96px 0 80px; border-bottom: 1px solid var(--line); } .sterk-wef-badge { display: inline-block; border: 1px solid var(--line-strong); color: var(--paper-dim); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; margin-bottom: 22px; } .sterk-editorial { display: grid; grid-template-columns: 220px 1fr; gap: 48px; } .sterk-editorial-index { font-family: var(--font-display); font-size: 4.5rem; color: var(--line-strong); line-height: 1; } .sterk-editorial-block { padding: 64px 0; border-bottom: 1px solid var(--line); } .sterk-editorial-block:last-child { border-bottom: none; } .sterk-editorial-block h3 { font-size: 1.4rem; } .sterk-editorial-block p { color: var(--paper-dim); max-width: 64ch; } /* --- Price / quote page (calculator) --------------------------------------- */ .sterk-quote-hero { padding: 72px 0 96px; background: linear-gradient(180deg, rgba(18,22,15,0.5), rgba(13,16,11,0.85)); border-bottom: 1px solid var(--line); } .sterk-quote-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; } .sterk-price-box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 32px; } .sterk-price-box h2 { font-size: 1.3rem; margin-bottom: 22px; } .sterk-quote-tabs { display: flex; gap: 2px; margin-bottom: 24px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .sterk-quote-tab { flex: 1; background: var(--deep); border: none; color: var(--steel); font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; padding: 13px 10px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .sterk-quote-tab:hover { color: var(--paper-dim); } .sterk-quote-tab.is-active { background: var(--signal); color: var(--deep); } .sterk-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; } .sterk-field[hidden] { display: none; } .sterk-field label { font-size: 0.76rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--steel); } .sterk-field input, .sterk-field > select, .sterk-field textarea { background: var(--deep); border: 1px solid var(--line); color: var(--paper); padding: 13px 14px; border-radius: var(--radius); font-size: 0.95rem; font-family: var(--font-body); } .sterk-field textarea { resize: vertical; min-height: 44px; } .sterk-field input:focus, .sterk-field > select:focus, .sterk-field textarea:focus { outline: none; border-color: var(--signal); } .sterk-time-row { display: flex; align-items: center; gap: 8px; } .sterk-time-row select { flex: 1; background: var(--deep); border: 1px solid var(--line); color: var(--paper); /* 14px links wie beim Datumsfeld: vorher waren es 10px, wodurch die Uhrzeit 4px weiter links stand als das Datum direkt darüber. */ padding: 13px 14px; border-radius: var(--radius); font-size: 0.95rem; font-family: var(--font-body); /* Feste Höhe statt der Eigenhöhe des Browsers: ein und wurde dadurch 46px hoch, während das Datumsfeld 44px misst. Sichtbar als leichter Versatz. */ height: 44px; line-height: 1.2; /* Wie das Datumsfeld: signalisiert "hier kann man klicken". */ cursor: pointer; } .sterk-time-row select:focus { outline: none; border-color: var(--signal); } .sterk-time-sep { color: var(--steel); } .sterk-price-form button { width: 100%; margin-top: 8px; border: none; cursor: pointer; padding: 15px 22px; } .sterk-price-result { margin-top: 24px; } .sterk-route-info { background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .sterk-route-endpoints { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.92rem; color: var(--paper); font-weight: 600; } .sterk-route-arrow { color: var(--signal); } .sterk-route-stats { font-size: 0.78rem; color: var(--steel); margin-top: 6px; } .sterk-price-cards { display: flex; gap: 14px; flex-wrap: wrap; } .sterk-price-card { flex: 1; min-width: 160px; background: rgba(185,138,78,0.07); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .sterk-price-card-photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .sterk-price-card-body { padding: 16px; } .sterk-price-card-label { font-size: 0.85rem; color: var(--paper); } .sterk-price-card-sub { font-size: 0.72rem; color: var(--steel); margin-bottom: 8px; } .sterk-price-card-amount { font-size: 1.6rem; color: var(--signal); font-family: var(--font-display); } .sterk-price-card-waiting { font-size: 0.72rem; color: var(--paper-dim); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .sterk-price-meta { font-size: 0.78rem; color: var(--steel); margin-top: 12px; } .sterk-price-error { color: #ff8a65; font-size: 0.9rem; } .sterk-btn-select { width: 100%; margin-top: 12px; padding: 11px 14px; font-size: 0.8rem; justify-content: center; } .sterk-quote-note { border-left: 2px solid var(--signal); padding-left: 22px; margin-top: 30px; color: var(--paper-dim); max-width: 46ch; } /* --- Buchungsformular ("Fahrzeug wählen" -> Kontaktdaten) --------------- */ .sterk-booking-wrap { margin-top: 24px; } .sterk-booking-back { background: none; border: none; color: var(--steel); font-family: var(--font-body); font-size: 0.82rem; cursor: pointer; padding: 0; margin-bottom: 18px; } .sterk-booking-back:hover { color: var(--signal); } .sterk-booking-wrap h2, .sterk-booking-wrap h3 { font-size: 1.15rem; margin-bottom: 16px; } .sterk-booking-summary { margin-bottom: 22px; } .sterk-booking-summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.86rem; } .sterk-booking-summary-row span { color: var(--steel); } .sterk-booking-summary-row strong { color: var(--paper); text-align: right; } .sterk-booking-success { text-align: center; padding: 20px 0; } .sterk-booking-success h3 { color: var(--signal); margin-bottom: 10px; } .sterk-booking-success p { color: var(--paper-dim); max-width: 42ch; margin: 0 auto; } /* --- Cookie-Banner (alle Seiten) -------------------------------------------- */ .sterk-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--panel); border-top: 1px solid var(--line-strong); padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .sterk-cookie-banner[hidden] { display: none; } .sterk-cookie-text { color: var(--paper-dim); font-size: 0.86rem; max-width: 60ch; margin: 0; } .sterk-cookie-text a { color: var(--signal); } .sterk-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; } .sterk-cookie-actions .sterk-btn { padding: 10px 18px; font-size: 0.82rem; white-space: nowrap; } /* Banner sitzt am unteren Rand — solange sie offen ist, weicht der schwebende WhatsApp-Button (auch unten rechts) ihr aus. */ body:has(#sterk-cookie-banner:not([hidden])) .sterk-whatsapp-float { display: none; } /* --- Buchungsformular: Abschnitte und Zweispalter --------------------------- Das Formular fragt jetzt zwei getrennte Dinge ab — alles zur Fahrt und die Kontaktdaten. Getrennt beschriftet wird beides vollständiger ausgefüllt als in einer durchlaufenden Liste. */ .sterk-form-section { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); font-weight: 700; margin: 26px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .sterk-form-section:first-child { margin-top: 0; } /* Zwei Felder nebeneinander, solange Platz ist. Auf dem Telefon untereinander — nebeneinander wären die Eingaben dort zu schmal. */ .sterk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } @media (max-width: 560px) { .sterk-field-row { grid-template-columns: 1fr; } } /* Erklärung unter einem Feld: sagt, WARUM wir fragen. Beim Flugfeld ist das der Unterschied zwischen "noch ein Pflichtfeld" und "die wissen, dass mein Flug Verspätung haben kann". */ .sterk-field-hint { display: block; margin-top: 6px; font-size: 0.78rem; line-height: 1.5; color: var(--steel); } .sterk-field[hidden] { display: none; } /* --- Preisseite (preise.html) ------------------------------------------------ Die Tabellen werden von tools/build-preise.js aus js/config.js erzeugt. Breite Tabellen bekommen ihren EIGENEN Scrollbereich (.sterk-table-scroll), damit auf dem Telefon die Tabelle wandert und nicht die ganze Seite. */ .sterk-preise-wrap { max-width: 980px; } .sterk-preise-wrap h2 { font-size: 1.5rem; margin: 0 0 10px; } .sterk-preise-wrap .sterk-lede { margin-bottom: 24px; } .sterk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 6px; } .sterk-preise-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; } .sterk-preise-table thead th { background: var(--veil); color: var(--paper); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; text-align: right; padding: 12px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .sterk-preise-table thead th:first-child { text-align: left; } .sterk-preise-table tbody th { text-align: left; font-weight: 500; color: var(--paper); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } .sterk-preise-table tbody td { text-align: right; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--paper-dim); white-space: nowrap; } .sterk-preise-table tbody tr:last-child th, .sterk-preise-table tbody tr:last-child td { border-bottom: 0; } .sterk-preise-table tbody tr:hover th, .sterk-preise-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); } .sterk-preise-table small { color: var(--steel); font-size: 0.76rem; } /* Die Staffelungsspalte ist die einzige mit Fliesstext — sie darf umbrechen, sonst zwingt sie die Tabelle unnötig in die Breite. */ .sterk-preise-table .sterk-preise-step { white-space: normal; min-width: 200px; } .sterk-preise-included { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 26px; } .sterk-preise-included li { color: var(--paper-dim); font-size: 0.92rem; padding-left: 22px; position: relative; } .sterk-preise-included li::before { content: "✓"; position: absolute; left: 0; color: var(--signal); } .sterk-preise-included strong { color: var(--paper); } .sterk-preise-notes { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .sterk-preise-notes li { color: var(--steel); font-size: 0.84rem; line-height: 1.6; padding-left: 18px; position: relative; } .sterk-preise-notes li::before { content: "•"; position: absolute; left: 4px; color: var(--signal); } @media (max-width: 560px) { .sterk-preise-table { font-size: 0.84rem; } .sterk-preise-table thead th, .sterk-preise-table tbody th, .sterk-preise-table tbody td { padding: 10px 11px; } } /* --- Sprachhinweis ---------------------------------------------------------- Band für Besucher, deren Browser die andere Sprache bevorzugt. Bewusst ein HINWEIS und keine Weiterleitung: jede Sprache hat ihre eigene Adresse, und automatisches Umschalten würde Suchmaschinen unter einer deutschen Adresse englischen Inhalt zeigen. Sitzt oben, damit es nicht mit dem Cookie-Banner (unten) kollidiert. */ .sterk-lang-hint { /* BEWUSST im normalen Fluss, nicht fixiert: fixiert lag es über dem klebenden Kopf und verdeckte ausgerechnet den Sprachumschalter, auf den es hinweist. So schiebt es die Seite einmal nach unten und scrollt dann weg — der Kopf klebt danach wie gewohnt oben. */ background: var(--signal); color: var(--ink); padding: 10px var(--gutter); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; } .sterk-lang-hint-go { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .sterk-lang-hint-close { background: none; border: 0; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0.7; } .sterk-lang-hint-close:hover { opacity: 1; } /* Das Band schiebt den klebenden Kopf nicht weg — es liegt darüber und verschwindet beim ersten Wegklicken wieder. */ @media (max-width: 560px) { .sterk-lang-hint { font-size: 0.8rem; gap: 10px; padding: 8px 12px; } } /* --- FAQ-Akkordeon (faq.html) ----------------------------------------------- */ .sterk-faq-list { margin-top: 8px; } .sterk-faq-item { border-bottom: 1px solid var(--line-strong); } .sterk-faq-item:first-child { border-top: 1px solid var(--line-strong); } .sterk-faq-question { list-style: none; cursor: pointer; padding: 22px 0; font-family: var(--font-display); font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .sterk-faq-question::-webkit-details-marker { display: none; } .sterk-faq-question::after { content: "+"; color: var(--signal); font-size: 1.5rem; line-height: 1; flex-shrink: 0; transition: transform 0.2s ease; } .sterk-faq-item[open] .sterk-faq-question::after { transform: rotate(45deg); } .sterk-faq-answer { color: var(--paper-dim); padding: 0 0 24px; max-width: 64ch; font-size: 0.95rem; } /* --- Footer ---------------------------------------------------------------- */ .sterk-footer { background: linear-gradient(180deg, rgba(8,11,7,0.55), rgba(8,11,7,0.88)); padding: 64px 0 30px; } .sterk-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .sterk-footer-brand .sterk-logo { display: inline-block; margin-bottom: 14px; } .sterk-footer-brand p { color: var(--steel); font-size: 0.88rem; max-width: 32ch; } /* Spaltentitel im Fuss sind jetzt

statt

. Grund: der Inhalt endet bei h2, der Fuss sprang danach auf h4 — eine Lücke in der Überschriftenfolge, die Screenreader-Navigation stört. Die Gestaltung bleibt unverändert klein; nur die Ebene ist korrekt. */ .sterk-footer-col h2.sterk-footer-h, .sterk-footer-col h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel); margin: 0 0 16px; font-family: var(--font-body); font-weight: 700; } .sterk-footer-col a, .sterk-footer-col p { display: block; color: var(--paper-dim); text-decoration: none; font-size: 0.9rem; margin: 0 0 10px; } .sterk-footer-col a:hover { color: var(--signal); } .sterk-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--steel); font-size: 0.8rem; } .sterk-footer-bottom a { color: var(--steel); text-decoration: underline; } /* --- flatpickr theming ------------------------------------------------- */ .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--signal); border-color: var(--signal); color: var(--deep); } .flatpickr-day.today { border-color: var(--signal); } .flatpickr-day:hover { background: rgba(185,138,78,0.22); } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: rgba(185,138,78,0.15); } .numInputWrapper span.arrowUp:after { border-bottom-color: var(--signal); } .numInputWrapper span.arrowDown:after { border-top-color: var(--signal); } /* --- Impressum / simple legal page -------------------------------------- */ .sterk-legal { background: var(--veil-strong); } .sterk-legal p { color: var(--paper-dim); } .sterk-legal strong { color: var(--paper); } /* --- Amenity pill list (Fleet page) --------------------------------------- */ .sterk-amenities { margin-top: 22px; } .sterk-amenities .amenities-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--steel); margin-bottom: 10px; } .sterk-amenity-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .sterk-amenity-list li { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.82rem; color: var(--paper-dim); } /* --- Über uns: zentrierter Fliesstext statt Bild-links/Text-rechts ------- Die frühere zweispaltige Anordnung drückte den Text in eine schmale Spalte am rechten Rand. Ein mittiger Satzspiegel mit begrenzter Zeilen- länge liest sich ruhiger und wirkt redaktioneller. */ .sterk-about-story .sterk-container { max-width: 760px; } .sterk-about-story p { margin-bottom: 22px; } .sterk-about-lead { font-size: 1.12rem; line-height: 1.75; color: var(--paper); } /* --- About page story slideshow: logo, then real vehicle photos, on loop --- */ .sterk-story-slideshow { position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); } .sterk-story-slide { position: absolute; inset: 0; opacity: 0; animation: sterkStorySlide 15s infinite; } .sterk-story-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .sterk-story-slide-logo { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 55%, rgba(185,138,78,0.14), transparent 60%), var(--ink); } /* 78%: die Bühne ist 3:4 hochkant, die Wortmarke 3.59:1 breit. Bei den früheren 58% wäre sie in dem hohen Rahmen verloren. */ .sterk-story-slide-logo img { width: 78%; height: auto; object-fit: contain; } .sterk-story-slide:nth-child(1) { animation-delay: 0s; } .sterk-story-slide:nth-child(2) { animation-delay: 5s; } .sterk-story-slide:nth-child(3) { animation-delay: 10s; } @keyframes sterkStorySlide { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sterk-story-slide { animation: none; opacity: 0; } .sterk-story-slide:first-child { opacity: 1; } } /* --- WEF page photography -------------------------------------------------- */ .sterk-wef-hero-photo { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; } .sterk-wef-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sterk-wef-banner { aspect-ratio: 21/9; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sterk-wef-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== Page-entry intro — a short (~3.5s) "globe spins in to Switzerland" beat, used only on the Destinations page. Pure SVG/CSS, no video. Respects reduced-motion (skipped outright) and is click/tap-skippable. ========================================================================== */ .sterk-intro-active { overflow: hidden; } .sterk-intro { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: radial-gradient(circle at 50% 42%, #1b1f17, var(--deep) 72%); cursor: pointer; animation: sterkIntroOut 0.6s ease forwards; animation-delay: 3s; } @keyframes sterkIntroOut { to { opacity: 0; visibility: hidden; pointer-events: none; } } .sterk-intro-globe { width: min(46vw, 240px); height: auto; overflow: visible; transform-origin: 58.75% 43.75%; /* the pin's position within the 400x400 viewBox */ animation: sterkGlobeZoom 1.05s cubic-bezier(.6,0,.85,0) 1.95s forwards; } @keyframes sterkGlobeZoom { 0% { transform: scale(1); opacity: 1; } 65% { transform: scale(3); opacity: 1; } 100% { transform: scale(4.4); opacity: 0; } } .sterk-globe-outline { fill: none; stroke: var(--line-strong); stroke-width: 1.2; } .sterk-globe-lat { fill: none; stroke: var(--paper-dim); stroke-width: 1; opacity: 0.55; } .sterk-globe-lon { fill: none; stroke: var(--paper-dim); stroke-width: 1.1; transform-origin: 200px 200px; animation: sterkLonSpin 1.9s linear infinite; } .sterk-globe-lon.l2 { animation-delay: -0.63s; } .sterk-globe-lon.l3 { animation-delay: -1.26s; } @keyframes sterkLonSpin { 0% { rx: 118; opacity: 0.18; } 50% { rx: 3; opacity: 0.85; } 100% { rx: 118; opacity: 0.18; } } .sterk-globe-pin { fill: var(--signal); } .sterk-globe-pin-ring { fill: none; stroke: var(--signal); stroke-width: 1.6; opacity: 0; transform-origin: 235px 175px; animation: sterkPinPulse 1s ease-out 1.5s 2; } @keyframes sterkPinPulse { 0% { r: 4; opacity: 0.85; } 100% { r: 24; opacity: 0; } } .sterk-intro-label { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; animation: sterkLabelIn 0.7s ease 0.25s forwards; } /* Globus-Variante (Ziele): Die Schrift muss verschwunden sein, BEVOR der Globus heranzoomt. transform:scale() verändert das Layout nicht — der wachsende Globus legt sich also über die darunter stehende Beschriftung. Auf dem Desktop fiel das kaum auf, auf dem schmalen Handy-Display überdeckte die Kugel den Text vollständig. */ .sterk-intro--globe .sterk-intro-label { animation: sterkLabelInOut 2.1s ease 0.25s forwards; } @keyframes sterkLabelInOut { 0% { opacity: 0; } 28% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } } .sterk-intro-eyebrow { font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); } .sterk-intro-country { font-family: var(--font-display); font-size: 1.7rem; color: var(--signal); } @keyframes sterkLabelIn { to { opacity: 1; } } /* Homepage variant: the full logo lockup flaps into view (the site's usual signature move, reused here) instead of the globe, then a shorter hold. 1.6s statt 2.6s — auf Wunsch eine Sekunde kürzer: der Splash soll die Seite ankündigen, nicht aufhalten. */ .sterk-intro--logo { animation-delay: 1.6s; } .sterk-intro-logo-img { /* Die Wortmarke ist breit und flach (3.59:1), nicht quadratisch: bei 560px Breite ist sie nur 156px hoch. Deshalb darf sie deutlich breiter stehen als die frühere quadratische Sperrung, ohne den Splash zu überladen. */ width: min(78vw, 560px); height: auto; animation: sterkFlap 0.9s cubic-bezier(.2,.7,.2,1) both; } /* WEF page variant: a real Davos photo instead of the globe/logo. */ .sterk-intro--wef { animation-delay: 3.4s; } .sterk-intro-wef-photo { position: absolute; inset: 0; z-index: 0; } .sterk-intro-wef-photo img { width: 100%; height: 100%; object-fit: cover; animation: sterkWefPhotoIn 3s ease forwards; } @keyframes sterkWefPhotoIn { 0% { transform: scale(1.1); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .sterk-intro-wef-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,11,7,0.55), rgba(8,11,7,0.8) 65%, var(--deep) 100%); } /* --- Flotte: fünf Balken, die nacheinander aufsteigen --------------------- Abstrakt statt bebildert: fünf Striche stehen für die fünf Klassen, von der Limousine bis zum Minibus. Das liest sich in 1.6 Sekunden, ein Foto oder eine Silhouette nicht. */ .sterk-intro--fleet { animation-delay: 1.6s; } .sterk-intro-bars { display: flex; align-items: flex-end; gap: 10px; height: 92px; } .sterk-intro-bars span { width: 3px; background: linear-gradient(180deg, var(--signal), rgba(185,138,78,0.15)); border-radius: 2px; height: 0; animation: sterkBarRise 0.62s cubic-bezier(.2,.75,.25,1) both; } /* Unterschiedliche Endhöhen ergeben eine Silhouette statt eines Blocks. */ .sterk-intro-bars span:nth-child(1) { --h: 42px; animation-delay: 0.05s; } .sterk-intro-bars span:nth-child(2) { --h: 66px; animation-delay: 0.14s; } .sterk-intro-bars span:nth-child(3) { --h: 92px; animation-delay: 0.23s; } .sterk-intro-bars span:nth-child(4) { --h: 70px; animation-delay: 0.32s; } .sterk-intro-bars span:nth-child(5) { --h: 50px; animation-delay: 0.41s; } @keyframes sterkBarRise { from { height: 0; opacity: 0; } to { height: var(--h); opacity: 1; } } /* --- Preise: drei Tarifzeilen, die einrasten ----------------------------- Kein Preisschild und kein Währungszeichen: ein Etikett wirkt nach Rabatt, und darum geht es hier nicht. Stattdessen drei Zeilen, die von links einlaufen und deren Beträge rechts bündig stehen bleiben — das liest sich als Tarifübersicht, noch bevor die Seite da ist, und bleibt so zurückhaltend wie die übrigen Intros. */ .sterk-intro--preise { animation-delay: 1.6s; } .sterk-intro-rows { display: flex; flex-direction: column; gap: 14px; width: min(74vw, 260px); } .sterk-intro-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; opacity: 0; animation: sterkRowIn 0.5s cubic-bezier(.2,.75,.25,1) both; } .sterk-intro-rows > div:nth-child(1) { animation-delay: 0.10s; } .sterk-intro-rows > div:nth-child(2) { animation-delay: 0.24s; } .sterk-intro-rows > div:nth-child(3) { animation-delay: 0.38s; } /* Linke Hälfte = die Strecke (gedämpft), rechte = der Betrag (Signal). */ .sterk-intro-rows .k { height: 2px; border-radius: 1px; background: rgba(201, 196, 184, 0.22); flex: 0 0 auto; } .sterk-intro-rows > div:nth-child(1) .k { width: 108px; } .sterk-intro-rows > div:nth-child(2) .k { width: 138px; } .sterk-intro-rows > div:nth-child(3) .k { width: 86px; } .sterk-intro-rows .v { height: 2px; border-radius: 1px; background: var(--signal); flex: 0 0 auto; transform-origin: right center; animation: sterkAmountIn 0.42s cubic-bezier(.2,.75,.25,1) both; } /* Unterschiedliche Breiten sind hier nicht Zierde, sondern nötig: drei gleich lange goldene Striche übereinander lesen sich als Hamburger-Menü, nicht als Beträge. */ .sterk-intro-rows > div:nth-child(1) .v { width: 52px; } .sterk-intro-rows > div:nth-child(2) .v { width: 38px; } .sterk-intro-rows > div:nth-child(3) .v { width: 46px; } .sterk-intro-rows > div:nth-child(1) .v { animation-delay: 0.34s; } .sterk-intro-rows > div:nth-child(2) .v { animation-delay: 0.48s; } .sterk-intro-rows > div:nth-child(3) .v { animation-delay: 0.62s; } @keyframes sterkRowIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes sterkAmountIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* --- Über uns: ein Ring, der sich schliesst ------------------------------ Ein geschlossener Kreis als Siegel — passt zu „seit 2013" und trägt die Aussage ohne Bild. */ .sterk-intro--about { animation-delay: 1.6s; } .sterk-intro-seal { width: 96px; height: 96px; overflow: visible; } .sterk-intro-seal circle { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; /* Umfang bei r=46: 2·π·46 ≈ 289 */ stroke-dasharray: 289; stroke-dashoffset: 289; transform: rotate(-90deg); transform-origin: 50% 50%; animation: sterkSealDraw 1.05s cubic-bezier(.4,0,.2,1) 0.1s forwards; } @keyframes sterkSealDraw { to { stroke-dashoffset: 0; } } .sterk-intro-seal-year { font-family: var(--font-display); font-size: 1.45rem; fill: var(--paper); opacity: 0; animation: sterkSealYear 0.6s ease 0.55s forwards; } @keyframes sterkSealYear { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sterk-intro { display: none; } } /* ========================================================================== Seitenübergänge Beim Klick auf einen internen Link legt sich kurz ein Schleier über die Seite, danach erst wird navigiert; die neue Seite blendet ihn wieder weg. Ohne JavaScript (oder bei reduced motion) passiert schlicht nichts — der Link funktioniert dann wie immer. ========================================================================== */ .sterk-veil { position: fixed; inset: 0; z-index: 290; /* unter dem Intro (300), über allem anderen */ background: var(--deep); opacity: 0; pointer-events: none; transition: opacity 260ms ease; } body.sterk-leaving .sterk-veil { opacity: 1; } /* Ankunft: Inhalt hebt sich leicht an, statt hart zu erscheinen. */ body.sterk-arriving main, body.sterk-arriving > section, body.sterk-arriving > .sterk-wef-banner, body.sterk-arriving > footer { animation: sterkArrive 420ms cubic-bezier(.22,.7,.3,1) both; } @keyframes sterkArrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sterk-veil { display: none; } body.sterk-arriving main, body.sterk-arriving > section, body.sterk-arriving > .sterk-wef-banner, body.sterk-arriving > footer { animation: none; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 980px) { .sterk-hero-grid, .sterk-quote-grid, .sterk-story-grid { grid-template-columns: 1fr; } .sterk-hero-panel { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 30px; } .sterk-story-figure { position: static; } .sterk-vehicle, .sterk-vehicle.is-reverse { grid-template-columns: 1fr; } .sterk-vehicle.is-reverse .sterk-vehicle-media { order: 0; } .sterk-grid-4 { grid-template-columns: repeat(2, 1fr); } .sterk-grid-3 { grid-template-columns: repeat(2, 1fr); } .sterk-footer-grid { grid-template-columns: 1fr 1fr; } .sterk-editorial { grid-template-columns: 1fr; } .sterk-editorial-index { font-size: 2.6rem; } } @media (max-width: 860px) { /* Der Header hat auf schmalen Bildschirmen nicht genug Platz für Logo + Sprachumschalter + WhatsApp-Icon + CTA-Button + Menü-Button in einer Zeile. Das WhatsApp-Icon im Header ist auf Mobile ohnehin redundant zur schwebenden WhatsApp-Schaltfläche unten rechts — hier ausblenden, statt den Header umbrechen zu lassen (verursachte horizontalen Overflow der ganzen Seite). */ .sterk-header-actions .sterk-whatsapp { display: none; } .sterk-header-actions { gap: 8px; } .sterk-nav { display: none; position: fixed; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px var(--gutter) 26px; border-bottom: 1px solid var(--line); max-height: calc(100vh - 60px); overflow-y: auto; z-index: 70; } .sterk-nav a { padding: 12px 0; width: 100%; } .sterk-nav.is-open { display: flex; } .sterk-nav-toggle { display: block; } .sterk-stats { grid-template-columns: repeat(2, 1fr); } .sterk-stat:nth-child(2) { border-right: none; } .sterk-stat:nth-child(3) { border-top: 1px solid var(--line); grid-column: 1 / -1; border-right: none; } .sterk-contact-block { grid-template-columns: 1fr; } } @media (max-width: 640px) { :root { --gutter: 16px; } .sterk-section { padding: 72px 0; } .sterk-grid-4, .sterk-grid-3, .sterk-grid-2 { grid-template-columns: 1fr; } .sterk-stats { grid-template-columns: 1fr; } .sterk-stat { border-right: none !important; border-top: 1px solid var(--line); } .sterk-stat:first-child { border-top: none; } .sterk-footer-grid { grid-template-columns: 1fr; } .sterk-header-inner { gap: 10px; } .sterk-logo { font-size: 1.25rem; } /* 32px statt 34: die Wortmarke ist 3.59:1 breit, jedes Pixel Höhe kostet 3.6px Breite. Bei 32px sind es 115px — das passt auch auf 320px-Geräten noch neben Knopf und Burger. */ .sterk-logo img { height: 32px; } .sterk-header-inner .sterk-btn.sterk-btn-solid { padding: 10px 12px; font-size: 0.76rem; } .sterk-whatsapp-float { width: 50px; height: 50px; right: 16px; bottom: 16px; } } @media (max-width: 420px) { /* Unter ~420px ist die Kopfzeile ein Nullsummenspiel: Sprachumschalter (73px) + Knopf (109px) + Burger (40px) + Abstände belegen 238px. Auf einem 320px-Gerät blieben dem Logo damit 40px — Flexbox quetschte es früher auf ein Drittel seiner Breite zusammen. Der Umschalter weicht deshalb ins Klappmenü aus und gibt 81px frei; erreichbar bleibt er, nur einen Tipp weiter. */ .sterk-header-actions .sterk-lang-switch { display: none; } .sterk-nav .sterk-lang-switch--nav { display: flex; width: 100%; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); } .sterk-lang-switch { gap: 3px; } .sterk-lang-btn { padding: 8px 10px; font-size: 0.72rem; min-height: 38px; } } /* ========================================================================== Sternenhimmel — der durchgehende, feststehende Hintergrund der Seite. -------------------------------------------------------------------------- Vier gestapelte 2D-Canvas in einem fixierten Wrapper (js/starfield.js): 1. statische Sterne — genau EINMAL gezeichnet 2./3. zwei Funkel-Ebenen — ebenfalls einmal gezeichnet; das Funkeln entsteht allein daraus, dass CSS die opacity der GANZEN Ebene animiert (Compositor, kostet pro Frame nichts) 4. Sternschnuppen — einzige Ebene mit rAF-Schleife z-index: -1 ist der Kern des Ganzen: damit malt der Himmel unter JEDEN Inhaltshintergrund, ohne dass irgendein Element ein eigenes z-index braucht. Die Grundfarbe liegt auf (siehe Reset oben). ========================================================================== */ .sterk-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: layout paint style; opacity: 0; transition: opacity 900ms ease; } .sterk-sky.is-ready { opacity: 1; } .sterk-sky canvas { position: absolute; inset: 0; display: block; } /* Die Basis-opacity muss gesetzt sein, weil die globale reduced-motion-Regel ganz oben (animation-duration: 0.001ms) die Keyframes praktisch abschaltet und die Ebenen ohne fill-mode auf genau diesen Wert zurückfallen. */ .sterk-sky-twinkle-a { opacity: 0.72; animation: sterkTwinkleA 7.3s cubic-bezier(.3,0,.8,.15) infinite alternate; } .sterk-sky-twinkle-b { opacity: 0.78; animation: sterkTwinkleB 11.1s cubic-bezier(.3,0,.8,.15) -3.4s infinite alternate; } @keyframes sterkTwinkleA { from { opacity: 0.42; } to { opacity: 1; } } @keyframes sterkTwinkleB { from { opacity: 1; } to { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { /* Die Sternschnuppen-Ebene wird bei reduced motion gar nicht erst erzeugt (siehe starfield.js) — die Regel hier ist die Absicherung. */ .sterk-sky-comets { display: none; } .sterk-sky-twinkle-a, .sterk-sky-twinkle-b { animation: none; } } @media print { .sterk-sky { display: none; } }