/* ─────────────────────────────────────────────────────────────
   site-2026.css  –  Vorschau "vorschau-design"
   Umbau der Startseite nach entwurf/startseite-2026.html.

   Zwei Teile in dieser einen Datei:
   1) Sitegerechtes neues Menü-Design – auf JEDER Seite verlinkt,
      wirkt auf die bestehende Nav-Auszeichnung (.nav-accent, nav,
      .nav-logo, .nav-links, .nav-contact-btn, .lang-toggle). Keine
      einzige Zeile Markup wurde dafür angefasst – nur Farben/Form.
   2) Die eigentlichen Startseiten-Abschnitte aus der Vorlage
      (Hero, Schnellsuche, Fahrzeug-Rail, Mosaik, Ankauf,
      Bewertungsband, Kontakt, Handy-Leiste). Auf Seiten ohne diese
      Abschnitte bleibt der Teil einfach ungenutzt.

   Schrift: Archivo, variabel, selbst gehostet (fonts/), kein
   Google-Fonts-Link.
   ───────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-variable.woff2') format('woff2-variations'),
         url('../fonts/archivo-variable.woff2') format('woff2');
    font-weight: 400 800;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    --s26-bg: #0a1222;
    --s26-bg-2: #0f1a30;
    --s26-card: #132139;
    --s26-line: rgba(255,255,255,0.10);
    --s26-fg: #f2f5fa;
    --s26-muted: #9cabc4;
    --s26-navy: #1d3766;
    --s26-accent: #ffb547;
    --s26-accent-ink: #1c1303;
    --s26-good: #63d69e;
    --s26-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --s26-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --s26-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
    --s26-r: 18px;
}

/* Kompatibilität: lang.js hängt seinen EN/DE-Knopf dynamisch an <nav>
   und verweist dabei auf --blue. Bewusst NUR auf nav gesetzt (nicht
   :root!) – sonst würde jedes var(--blue) auf der ganzen restlichen,
   unveränderten Seite (Buttons, Preise, Überschriften) plötzlich
   orange statt navy-blau, weit über das Menü hinaus. */
nav { --blue: var(--s26-accent); }

/* ── 1) Neues Menü-Design (bestehendes Markup, nur umgefärbt) ──────── */

.nav-accent { background: var(--s26-accent) !important; }

body nav {
    background: transparent;
    border-bottom-color: transparent;
    transition: background-color 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}

body nav.s26-solid {
    background: rgba(10,18,34,0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--s26-line);
}

/* Auf hellen Innenseiten (kein dunkler Hero direkt dahinter) steht das
   Glas-Menü von Anfang an auf "solid", damit der Text nie auf Weiß
   verschwindet. */
body:not(.s26-has-hero) nav {
    background: rgba(10,18,34,0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--s26-line);
}

nav .nav-logo-main,
nav .nav-logo-sub,
nav .nav-links a {
    font-family: var(--s26-display);
}

nav .nav-logo-main { color: var(--s26-fg) !important; letter-spacing: 0.1em; }
nav .nav-logo-sub { color: var(--s26-muted) !important; }

nav .nav-links a {
    color: #d9e1ee !important;
    border-color: transparent !important;
    position: relative;
    transition: color 200ms ease;
}

nav .nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1.5px;
    background: var(--s26-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms var(--s26-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    nav .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
}

nav .nav-links .nav-active a {
    color: var(--s26-accent) !important;
    font-weight: 600;
}

nav .nav-contact-btn {
    background: var(--s26-accent) !important;
    color: var(--s26-accent-ink) !important;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 160ms var(--s26-ease-out), background 200ms ease;
}

nav .nav-contact-btn:hover { background: #ffc877 !important; }
nav .nav-contact-btn:active { transform: scale(0.97); }

nav .lang-toggle {
    border-color: rgba(255,255,255,0.3) !important;
    color: var(--s26-fg) !important;
}
nav .lang-toggle:hover { background: var(--s26-accent) !important; color: var(--s26-accent-ink) !important; }

/* Vorbestehender Fehler auf mehreren Seiten (u. a. Fahrzeug-Detailseiten
   und agb.html): .nav-links hat dort keine oder keine ausreichende
   Mobil-Regel und läuft bei schmalen Bildschirmen über den Rand hinaus
   (mit Playwright bei 390px nachgewiesen, auch ganz ohne diese Datei).
   Da das neue Menü-Design laut Auftrag ohnehin auf jeder Seite verlinkt
   ist, wird die Kollaps-Regel hier zentral nachgezogen – ohne
   build.js oder die Seiteninhalte selbst anzufassen. */
@media (max-width: 820px) {
    nav .nav-links { gap: 0; }
    nav .nav-links li:not(:last-child) { display: none; }
}

/* ── Gemeinsame Bausteine ─────────────────────────────────────────── */

.press { transition: transform 160ms var(--s26-ease-out); }
.press:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
    .s26-home *, .s26-home *::before, .s26-home *::after {
        animation: none !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
    .s26-home .reviews { overflow-x: auto; }
    .s26-home .intro-veil { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   2) Startseiten-Abschnitte (nur innerhalb von .s26-home aktiv)
   ═══════════════════════════════════════════════════════════════════ */

.s26-home { background: var(--s26-bg); color: var(--s26-fg); font-family: var(--s26-display); }
.s26-home .container { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.s26-home h1, .s26-home h2, .s26-home h3 { font-family: var(--s26-display); margin: 0; text-wrap: balance; }
.s26-home p { margin: 0; }
.s26-home a { color: inherit; text-decoration: none; }
.s26-home img { display: block; max-width: 100%; }
.s26-home button, .s26-home input, .s26-home select { font: inherit; }

.s26-home .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 14px 24px; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; white-space: nowrap; font-family: inherit; }
.s26-home .btn-acc { background: var(--s26-accent); color: var(--s26-accent-ink); }
.s26-home .btn-glass { background: rgba(255,255,255,0.10); color: var(--s26-fg); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.s26-home .btn-sm { padding: 10px 18px; font-size: 14px; }
.s26-home .btn .arr { transition: transform 250ms var(--s26-ease-out); }
@media (hover: hover) and (pointer: fine) { .s26-home .btn:hover .arr { transform: translateX(4px); } }

/* Hero */
.s26-hero { position: relative; min-height: 100dvh; display: grid; align-items: end; overflow: hidden; isolation: isolate; margin-top: -3px; }
.s26-hero-bg { position: absolute; inset: 0; z-index: -2; }
.s26-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms ease; }
.s26-slide.on { opacity: 1; }
.s26-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(1.12); }
.ready .s26-slide.on img { animation: s26kb 7s linear both; }
@keyframes s26kb { from { transform: scale(1.12) translate(1%, 0); } to { transform: scale(1.0) translate(-1%, -1%); } }
.s26-dots { position: absolute; right: 24px; bottom: 28px; z-index: 2; display: flex; gap: 6px; }
.s26-dots button { width: 34px; height: 4px; border-radius: 2px; border: 0; padding: 0; background: rgba(255,255,255,0.25); cursor: pointer; position: relative; overflow: hidden; }
.s26-dots button::after { content: ''; position: absolute; inset: 0; background: var(--s26-accent); transform: scaleX(0); transform-origin: left; }
.s26-dots button.on::after { animation: s26fill 6s linear both; }
.s26-dots button.past::after { transform: scaleX(1); background: rgba(255,255,255,0.7); }
@keyframes s26fill { to { transform: scaleX(1); } }
@media (max-width: 960px) { .s26-dots { top: 88px; bottom: auto; right: 16px; } }
.s26-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(10,18,34,0.55) 0%, rgba(10,18,34,0.15) 30%, rgba(10,18,34,0.55) 62%, rgba(10,18,34,0.97) 100%),
  linear-gradient(90deg, rgba(10,18,34,0.75) 0%, rgba(10,18,34,0.1) 60%); }
.s26-hero-in { padding-block: 140px 40px; display: grid; gap: 40px; width: 100%; }
.s26-hero-top { display: grid; gap: 22px; max-width: 760px; }
.s26-rating { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.s26-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; }
.s26-pill b { font-variant-numeric: tabular-nums; }
.s26-stars { color: var(--s26-accent); letter-spacing: 1px; font-size: 13px; }
.s26-h1 { font-size: clamp(42px, 7.2vw, 96px); line-height: 0.96; font-weight: 800; font-stretch: 115%; letter-spacing: -0.02em; }
.s26-h1 .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.s26-h1 .ln > span { display: inline-block; }
.s26-h1 em { font-style: normal; color: var(--s26-accent); }
.s26-lead { font-size: clamp(17px, 1.6vw, 20px); color: #d5deec; max-width: 46ch; }
.s26-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Schnellsuche */
.s26-search { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; padding: 8px; border-radius: 22px; background: rgba(15,26,48,0.62); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 30px 80px rgba(0,0,0,0.35); }
.s26-field { display: grid; gap: 2px; padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,0.06); min-width: 0; }
.s26-field label { font-size: 12px; color: var(--s26-muted); font-weight: 500; }
.s26-field select { appearance: none; background: transparent; border: 0; color: var(--s26-fg); font-size: 16px; font-weight: 600; padding: 0; cursor: pointer; width: 100%; }
.s26-field select option { color: #111; }
.s26-search .btn { border-radius: 14px; padding-inline: 28px; font-size: 16px; }
.s26-count { font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; text-align: right; }

/* Intro-Vorhang (nur mit JS, sonst nicht sichtbar) */
.js:not(.ready) .s26-h1 .ln > span { transform: translateY(105%); }
.js:not(.ready) .s26-rise { opacity: 0; transform: translateY(18px); }
.s26-h1 .ln > span { transition: transform 1000ms var(--s26-ease-out); transition-delay: calc(500ms + var(--l, 0) * 110ms); }
.s26-rise { transition: opacity 800ms var(--s26-ease-out), transform 800ms var(--s26-ease-out); transition-delay: calc(800ms + var(--i, 0) * 90ms); }
.intro-veil { position: fixed; inset: 0; z-index: 100; background: var(--s26-bg); display: none; place-items: center; transition: clip-path 900ms var(--s26-ease-io); clip-path: inset(0 0 0 0); pointer-events: none; }
.js .intro-veil { display: grid; }
.ready .intro-veil { clip-path: inset(0 0 100% 0); }
.intro-veil b { font-family: var(--s26-display); font-stretch: 125%; font-weight: 800; letter-spacing: 0.3em; font-size: clamp(16px, 2.4vw, 24px); color: var(--s26-fg); }
.intro-veil i { display: block; height: 2px; background: var(--s26-accent); margin-top: 12px; transform-origin: left; animation: s26bar 500ms var(--s26-ease-out) both; }
@keyframes s26bar { from { transform: scaleX(0); } }
.gone .intro-veil { display: none; }

/* Abschnitte */
.s26-home section { padding-block: 110px; }
/* Falls Lenis (smooth-scroll.js) einmal nicht laedt (z. B. durch einen
   Blocker) und der Browser stattdessen nativ zum Anker springt, soll
   die Überschrift trotzdem nicht unter dem fest stehenden Menü
   verschwinden. */
.s26-home section[id] { scroll-margin-top: 90px; }
.s26-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.s26-h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1; font-weight: 800; font-stretch: 112%; letter-spacing: -0.015em; }
.s26-sec-head p { color: var(--s26-muted); max-width: 46ch; }
.s26-reveal { transition: opacity 900ms var(--s26-ease-out), transform 900ms var(--s26-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .s26-reveal:not(.seen) { opacity: 0; transform: translateY(28px); }

/* Fahrzeuge */
.s26-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.s26-car { scroll-snap-align: start; background: var(--s26-card); border-radius: var(--s26-r); overflow: hidden; border: 1px solid var(--s26-line); display: grid; transition: transform 300ms var(--s26-ease-out), border-color 300ms ease, box-shadow 300ms var(--s26-ease-out); }
.s26-car .s26-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0d1628; }
.s26-car .s26-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--s26-ease-out); }
.s26-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(10,18,34,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.s26-badge.new { background: var(--s26-accent); color: var(--s26-accent-ink); }
.s26-car-b { padding: 18px 20px 20px; display: grid; gap: 12px; }
.s26-car h3 { font-size: 19px; font-weight: 700; font-stretch: 105%; }
.s26-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.s26-specs span { font-size: 13px; color: #cfd8e7; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); }
.s26-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--s26-line); padding-top: 14px; }
.s26-price { font-size: 26px; font-weight: 800; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.s26-price-row small { color: var(--s26-muted); font-size: 13px; }
.s26-more { background: linear-gradient(160deg, var(--s26-navy), #0f1f3d); display: grid; place-content: center; text-align: center; gap: 14px; padding: 30px; }
.s26-more .big { font-size: 64px; font-weight: 800; font-stretch: 120%; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .s26-car:hover { transform: translateY(-6px); border-color: rgba(255,181,71,0.45); box-shadow: 0 24px 50px rgba(0,0,0,0.4); }
  .s26-car:hover .s26-img img { transform: scale(1.06); }
}
.s26-note { color: var(--s26-muted); font-size: 13px; margin-top: 14px; }

/* Mosaik */
.s26-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(200px, auto); gap: 18px; }
.s26-tile { border-radius: var(--s26-r); background: var(--s26-card); border: 1px solid var(--s26-line); padding: 28px; display: grid; align-content: end; gap: 8px; position: relative; overflow: hidden; min-width: 0; }
.s26-tile h3 { font-size: 24px; font-weight: 750; font-stretch: 108%; }
.s26-tile p { color: var(--s26-muted); }
.s26-t-photo { grid-column: span 7; grid-row: span 2; min-height: 460px; isolation: isolate; background: transparent; }
.s26-t-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 900ms var(--s26-ease-out); }
.s26-t-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,18,34,0.95) 10%, rgba(10,18,34,0.2) 70%); }
.s26-t-photo p { color: #d5deec; max-width: 42ch; }
@media (hover: hover) and (pointer: fine) { .s26-t-photo:hover img { transform: scale(1.04); } }
.s26-t-year { grid-column: span 5; background: var(--s26-accent); color: var(--s26-accent-ink); border: 0; }
.s26-t-year p { color: #4a3510; }
.s26-t-year .big { font-size: clamp(64px, 8vw, 110px); font-weight: 800; font-stretch: 120%; line-height: 0.9; font-variant-numeric: tabular-nums; }
.s26-t-fast { grid-column: span 5; }
.s26-t-s { grid-column: span 4; }
.s26-tile .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,181,71,0.14); color: var(--s26-accent); margin-bottom: 10px; }
.s26-tile .ico svg { width: 22px; height: 22px; }

/* Klickbare Kacheln (alle ausser der reinen 2010-Statistik-Kachel):
   kleiner Pfeil unten rechts, leichtes Anheben nur bei echten
   Zeigegeraeten (Maus), auf Touch bleibt die Kachel ruhig. */
.s26-tile-link { cursor: pointer; transition: transform 300ms var(--s26-ease-out), border-color 300ms ease, box-shadow 300ms var(--s26-ease-out); }
.s26-tile-arr { position: absolute; right: 18px; bottom: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); color: var(--s26-fg); font-size: 15px; transition: transform 250ms var(--s26-ease-out), background 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .s26-tile-link:hover { transform: translateY(-4px); border-color: rgba(255,181,71,0.4); box-shadow: 0 16px 36px rgba(0,0,0,0.3); }
  .s26-tile-link:hover .s26-tile-arr { transform: translateX(3px); background: var(--s26-accent); color: var(--s26-accent-ink); }
}

/* Ankauf */
.s26-sell { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.s26-sell ol { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.s26-sell li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.s26-sell li span { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,181,71,0.5); display: grid; place-items: center; font-weight: 700; color: var(--s26-accent); }
.s26-sell li b { display: block; font-size: 17px; }
.s26-sell li small { color: var(--s26-muted); font-size: 15px; }
.s26-form { background: var(--s26-card); border: 1px solid var(--s26-line); border-radius: 24px; padding: 30px; display: grid; gap: 16px; }
.s26-form h3 { font-size: 22px; }
.s26-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s26-in { display: grid; gap: 6px; }
.s26-in label { font-size: 14px; font-weight: 600; }
.s26-in input { background: var(--s26-bg-2); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; color: var(--s26-fg); padding: 13px 14px; font-size: 16px; width: 100%; transition: border-color 160ms ease; font-family: inherit; }
.s26-in input::placeholder { color: #6f7f9a; }
.s26-in input:focus { outline: none; border-color: var(--s26-accent); }
.s26-form .btn { width: 100%; }
.s26-form small { color: var(--s26-muted); font-size: 13px; }

/* Bewertungen */
.s26-reviews { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.s26-track { display: flex; gap: 18px; width: max-content; animation: s26slide 60s linear infinite; }
@media (hover: hover) and (pointer: fine) { .s26-reviews:hover .s26-track { animation-play-state: paused; } }
@keyframes s26slide { to { transform: translateX(-50%); } }
.s26-rv { width: 360px; flex: none; background: var(--s26-card); border: 1px solid var(--s26-line); border-radius: var(--s26-r); padding: 24px; display: grid; gap: 14px; margin: 0; }
.s26-rv blockquote { margin: 0; font-size: 17px; line-height: 1.5; }
.s26-rv figcaption { display: flex; justify-content: space-between; color: var(--s26-muted); font-size: 14px; }
.s26-rv figcaption b { color: var(--s26-fg); font-weight: 600; }
.s26-scores { display: flex; gap: 40px; flex-wrap: wrap; }
.s26-score { display: grid; }
.s26-score .n { font-size: 56px; font-weight: 800; font-stretch: 115%; line-height: 1; font-variant-numeric: tabular-nums; }
.s26-score small { color: var(--s26-muted); }

/* Kontakt */
.s26-contact { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; }
.s26-c-card { background: var(--s26-card); border: 1px solid var(--s26-line); border-radius: var(--s26-r); padding: 28px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.s26-c-card h3 { font-size: 18px; }
.s26-c-card p, .s26-c-card td { color: #cfd8e7; }
.s26-c-card table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.s26-c-card td { padding: 4px 16px 4px 0; }
.s26-c-card .sel { user-select: all; font-weight: 600; color: var(--s26-fg); }
.s26-open { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--s26-good); }
.s26-open i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s26-foot { border-top: 1px solid var(--s26-line); padding-block: 28px 100px; color: var(--s26-muted); font-size: 14px; }
.s26-foot .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.s26-foot nav { display: flex; gap: 20px; }

/* Handy-Leiste (nur Startseite) */
.s26-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: none; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; padding: 8px; border-radius: 20px; background: rgba(15,26,48,0.8); border: 1px solid var(--s26-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.s26-dock .btn { padding: 12px 10px; font-size: 14px; border-radius: 14px; }

@media (max-width: 960px) {
  .s26-home .nav-links, .s26-home .tel { display: none; }
  .s26-search { grid-template-columns: 1fr 1fr; }
  .s26-search .btn { grid-column: 1 / -1; }
  .s26-bento { grid-template-columns: 1fr 1fr; }
  .s26-t-photo { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .s26-t-year, .s26-t-fast, .s26-t-s { grid-column: span 1; }
  .s26-sell, .s26-contact { grid-template-columns: 1fr; }
  .s26-dock { display: grid; }
  /* Cookie-Banner (#ckBanner, position:fixed, bottom:0) und
     WhatsApp-Button (.wa-float, position:fixed) duerfen die
     Handy-Leiste nicht ueberdecken – beide werden auf der
     Startseite auf Mobilgroessen um die Hoehe der Handy-Leiste
     nach oben versetzt. Hoehere Spezifitaet (.s26-home davor)
     gewinnt unabhaengig von der Ladereihenfolge der Skripte. */
  .s26-home #ckBanner { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  .s26-home .wa-float { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 560px) {
  .s26-home .container { padding-inline: 16px; }
  .s26-search { grid-template-columns: 1fr; }
  .s26-bento { grid-template-columns: 1fr; }
  .s26-t-year, .s26-t-fast, .s26-t-s { grid-column: 1 / -1; }
  .s26-grid2 { grid-template-columns: 1fr; }
  .s26-home section { padding-block: 80px; }
  .s26-rv { width: 290px; }
  .s26-hero-in { padding-block: 120px 28px; }
}