/* D&W Fahrzeugtechnik, eine Datei fuer alle Seiten.
   Look nach Nico Gillich: hell, klare Schrift, ein Akzent. Akzent ist Lucas Logo-Blau.
   Bewegung nur beim Scrollen: Ladenfoto mit leichter Parallaxe, auf dem Handy stapeln sich die Bereichskarten
   und die Mietkarten laufen beim Scrollen seitlich durch.
   Bei "Bewegung reduzieren" steht alles still. */

@font-face { font-family: "Archivo"; src: url(../fonts/archivo-var.woff2) format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin.woff2) format("woff2");
  font-weight: 100 900; font-display: swap; }

:root {
  --blau: #07416b;
  --blau-hover: #0a5a92;
  --nacht: #0b1a27;
  --tinte: #161b21;
  --stahl: #56616c;
  --linie: #dfe4e9;
  --papier: #f2f4f6;
  --weiss: #ffffff;
  --wa: #1c7c45;
  --wa-hover: #16653a;
  --fokus: #f2b705;
  --r: 12px;
  --r-klein: 8px;
  --titel: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "Inter", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font: 400 16px/1.6 var(--text); color: var(--tinte); background: var(--weiss);
  -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titel); font-stretch: 84%; font-weight: 720; letter-spacing: -0.005em;
  line-height: 1.06; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(28px, 3vw, 40px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.schmal > * { max-width: 780px; }
p.schmal { max-width: 780px; }
.lead { font-size: 19px; line-height: 1.55; }
.klein { font-size: 14px; color: var(--stahl); margin-top: 16px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--weiss); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px;
  border-radius: var(--r-klein); font: 650 15.5px/1.2 var(--text); text-decoration: none; border: 0;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn-blau { background: var(--blau); color: var(--weiss); }
.btn-blau:hover { background: var(--blau-hover); }
.btn-hell { background: var(--weiss); color: var(--blau); }
.btn-hell:hover { background: #e6eef5; }
.btn-wa { background: var(--wa); color: var(--weiss); }
.btn-wa:hover { background: var(--wa-hover); }
.btn-rand { border: 1.5px solid var(--blau); color: var(--blau); background: transparent; }
.btn-rand:hover { background: var(--blau); color: var(--weiss); }
.btn-voll { width: 100%; margin-top: 10px; }

/* Leiste oben */
.topbar { background: var(--nacht); color: #c8d4df; font-size: 14px; }
.topbar-in { display: flex; gap: 24px; align-items: center; min-height: 38px; }
.topbar a { text-decoration: none; color: var(--weiss); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }
.tb-ort { margin-right: auto; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--linie); }
/* Logo oben auf der Seite gross (Lucas Wunsch 12.10.), alles mittig im 110 px hohen Kopf. Dockt der Kopf beim
   Scrollen an, klebt er 34 px hoeher (sichtbar bleiben 76 px), das Logo schrumpft und alles rutscht 17 px nach unten,
   also wieder mittig. site.js setzt "fest". Bewegt wird nur transform, der Inhalt darunter springt nicht. */
html.js .kopf { top: -34px; }
.kopf-in { display: flex; align-items: center; gap: 28px; min-height: 110px; }
.marke { display: block; flex: none; }
.marke img { height: 88px; width: auto; transform-origin: 0 50%; }
.marke, .marke img, .kopf-tel, .burger, .nav { transition: transform .25s ease; }
html.fest .marke img { transform: scale(.64); }
html.fest .marke, html.fest .kopf-tel, html.fest .burger { transform: translateY(17px); }
@media (min-width: 1121px) { html.fest .nav { transform: translateY(17px); } }
.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav > a, .ngrp > a { display: inline-block; padding: 10px 10px; font-weight: 600; font-size: 15.5px;
  text-decoration: none; border-radius: 6px; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--blau); box-shadow: inset 0 -2px 0 var(--blau); border-radius: 0; }
.nav > a:hover, .ngrp > a:hover { color: var(--blau); }
.ngrp { position: relative; display: flex; align-items: center; }
.ntog { background: none; border: 0; padding: 10px 6px 10px 0; margin-left: -6px; cursor: pointer; color: var(--stahl); }
.ngrp.offen .ntog svg { transform: rotate(180deg); }
.nsub { display: none; position: absolute; top: calc(100% + 12px); left: -8px; min-width: 330px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--r); padding: 8px; box-shadow: 0 18px 40px rgba(11, 26, 39, .14); }
.ngrp.offen .nsub { display: grid; }
/* Seit Wohnmobil & Caravan 9 Unterpunkte hat: auf niedrigen Bildschirmen scrollt das Untermenue statt abgeschnitten zu werden */
@media (min-width: 1121px) { .nsub { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; } }
.nsub a { display: block; padding: 10px 12px; border-radius: var(--r-klein); text-decoration: none; font-weight: 650; font-size: 15px; }
.nsub a span { display: block; font-weight: 400; font-size: 13.5px; color: var(--stahl); }
.nsub a:hover { background: var(--papier); }
.nsub .nsub-alle { color: var(--blau); border-bottom: 1px solid var(--linie); border-radius: 0; margin-bottom: 4px; }
.kopf-tel { padding: 11px 16px; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 10px; }
.burger i { display: block; height: 2px; background: var(--tinte); margin: 5px 0; border-radius: 2px; }

/* Einstieg Startseite */
.hero { position: relative; min-height: clamp(520px, 72vh, 740px); display: flex; align-items: flex-end;
  color: var(--weiss); background: var(--nacht); overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 18, 29, .86) 0%, rgba(7, 18, 29, .6) 42%, rgba(7, 18, 29, .12) 78%),
              linear-gradient(0deg, rgba(7, 18, 29, .55) 0%, rgba(7, 18, 29, 0) 45%); }
.hero-in { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(36px, 4.6vw, 66px); max-width: 20ch; }
.hero-unter { font-size: 19px; max-width: 46ch; margin: 20px 0 28px; color: #e3eaf1; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Wegweiser */
.wege { padding: 16px 0 8px; }
.wege-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.weg { border-radius: var(--r); overflow: hidden; }
.weg-caravan { grid-column: span 6; background: var(--blau); color: var(--weiss); padding: 34px 34px 28px; min-height: 420px;
  display: flex; flex-direction: column; }
.weg-caravan h2 { font-size: clamp(30px, 3.2vw, 44px); }
.weg-caravan h2 a { text-decoration: none; }
.weg-caravan h2 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.weg-caravan > p { color: #d6e2ec; margin: 12px 0 18px; max-width: 44ch; }
.weg-caravan ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.weg-caravan li a { display: block; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .2); text-decoration: none;
  font-weight: 650; font-size: 16.5px; }
.weg-caravan li a:hover { color: #bfe0ff; }
.weg-caravan .weg-reimo { margin: auto 0 0; padding-top: 18px; font-size: 14px; color: #b9cbda; }
.weg-foto { position: relative; display: block; min-height: 260px; color: var(--weiss); text-decoration: none; background: var(--nacht); grid-column: span 4; }
.weg-foto.weg-gross { grid-column: span 6; min-height: 420px; }
.weg-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.weg-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 18, 29, .82) 0%, rgba(7, 18, 29, .1) 58%); }
.weg-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 24px; }
.weg-txt b { display: block; font: 720 30px/1.05 var(--titel); font-stretch: 84%; }
.weg-txt span { display: block; margin-top: 6px; font-size: 14.5px; color: #e1e8ef; }
.weg-foto:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

.weg-pfeil { display: none; }

/* Offen-Status (fuellt site.js) */
.offen-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-weight: 650; font-size: 15px; }
.offen-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #d14b3d; flex: none; }
.offen-status.ist-offen::before { background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .22); }
.offen-status[hidden] { display: none; }
.kurz { display: none; }
.k-status { margin-top: 14px; }
.k-aktionen { display: none; }
.daten .heute dt, .daten .heute dd { color: var(--blau); }
.daten .heute dt { font-weight: 650; }

/* Abschnitte */
.sek { padding: 72px 0; }
.sek-grau { background: var(--papier); }
.sek-kopf { max-width: 720px; margin-bottom: 28px; }
.sek-kopf h2 { margin-bottom: 10px; }
.sek-kopf p { color: var(--stahl); margin: 0; }
.mehr { margin: 28px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips a { padding: 9px 14px; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--weiss);
  text-decoration: none; font-weight: 600; font-size: 15px; }
.chips a:hover { border-color: var(--blau); color: var(--blau); }
.sek-weiter { padding: 48px 0; border-top: 1px solid var(--linie); }
.sek-weiter h2 { font-size: 26px; }

/* Bestand */
.bestand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bk { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.bk-bild { position: relative; aspect-ratio: 4 / 3; background: var(--weiss); border-bottom: 1px solid var(--linie); overflow: hidden; }
.bk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-bild img.frei { object-fit: contain; padding: 14px; }
.bk-bild img.foto { object-fit: cover; object-position: 50% 68%; }
.bk[hidden] { display: none; }
.bk-haupt { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.bk-haupt > span { display: block; }
.bk-txt { padding: 14px 16px 6px; display: flex; flex-direction: column; flex: 1; }
.bk-txt > span, .bk-txt > b { display: block; }
.bk-kat { font-size: 13px; font-weight: 600; color: var(--stahl); margin: 0 0 4px; }
.bk-titel { font: 650 16.5px/1.3 var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bk-haupt:hover .bk-titel { color: var(--blau); text-decoration: underline; }
.bk-unter { font-size: 14px; color: var(--stahl); margin-top: 4px; }
.bk-preis { font: 720 25px/1.1 var(--titel); font-stretch: 84%; color: var(--tinte); margin: 12px 0 8px; }
.bk-mehr { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--blau); }
.bk-preise { margin: 12px 0 10px; border-top: 1px solid var(--linie); }
.bk-preise > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--linie); }
.bk-preise i { font-style: normal; font-size: 14px; color: var(--stahl); }
.bk-preise b { font: 720 19px/1.1 var(--titel); font-stretch: 84%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-bild .ohne-bild { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--papier); color: var(--stahl); font-size: 14px; }
.vk-gross .ohne-bild { display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  color: var(--stahl); font-size: 14px; }
.vk-gross.leer .ohne-bild { display: flex; }
.vk-preise { margin: 4px 0 16px; }
.gzw { margin-top: 32px; max-width: 760px; }
.gzw h2 { font-size: 24px; margin-bottom: 8px; }
.chips-klein { margin-top: 18px; }
.chips-klein a { font-size: 14.5px; padding: 8px 12px; }
.bk-link { display: inline-flex; align-items: center; gap: 6px; color: var(--wa); font-weight: 650; font-size: 15px;
  text-decoration: none; padding: 8px 16px 16px; }
.bk-link:hover { text-decoration: underline; }
.filterleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter { font: 600 15px/1.2 var(--text); color: var(--tinte); padding: 10px 14px; border-radius: var(--r-klein);
  border: 1px solid var(--linie); background: var(--weiss); cursor: pointer; }
.filter span { color: var(--stahl); font-weight: 500; margin-left: 4px; }
.filter:hover { border-color: var(--blau); }
.filter[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.filter[aria-pressed="true"] span { color: #cfe0ee; }

/* Detailfenster im Verkauf */
.vk-dialog { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
  border-radius: var(--r); color: var(--tinte); overflow: hidden; }
.vk-dialog::backdrop { background: rgba(7, 18, 29, .62); }
.vk-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); max-height: calc(100vh - 32px); }
.vk-galerie { background: var(--papier); padding: 16px; overflow: auto; max-height: calc(100vh - 32px); }
.vk-gross { position: relative; aspect-ratio: 4 / 3; background: var(--weiss); border-radius: var(--r-klein); overflow: hidden; }
.vk-gross img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vk-daumen { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.vk-daumen button { flex: 0 0 76px; height: 57px; padding: 0; border: 2px solid transparent; border-radius: 6px;
  overflow: hidden; background: var(--weiss); cursor: pointer; }
.vk-daumen button[aria-current="true"] { border-color: var(--blau); }
.vk-daumen img { width: 100%; height: 100%; object-fit: cover; }
.vk-info { padding: 30px 28px 24px; overflow: auto; max-height: calc(100vh - 32px); overscroll-behavior: contain; }
.vk-info .vk-titel { font: 720 30px/1.06 var(--titel); font-stretch: 84%; letter-spacing: -0.005em; margin: 0; text-wrap: balance;
  overflow-wrap: break-word; padding-right: 36px; }
.vk-unter { color: var(--stahl); margin: 6px 0 0; }
.vk-preis { font: 720 32px/1 var(--titel); font-stretch: 84%; margin: 16px 0 14px; }
.vk-daten { margin-bottom: 14px; }
.vk-text { color: #2d343c; margin: 0; padding-top: 16px; border-top: 1px solid var(--linie); white-space: pre-line; overflow-wrap: break-word; }
.vk-aktion { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px; }
.vk-ka { margin: 14px 0 0; }
.vk-zu { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--weiss); color: var(--tinte); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  display: flex; align-items: center; justify-content: center; }
.vk-zu:hover { color: var(--blau); }

/* Mieten */
.miete-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
/* Desktop: Ueberschrift ueber beide Spalten, darunter Karten und Preistabelle auf gleicher Hoehe (sonst hing die
   Tabelle oben rechts und darunter blieb eine leere Flaeche). Am Handy bleibt der Aufbau fuer das Anpinnen. */
@media (min-width: 821px) {
  .miete-grid { row-gap: 0; }
  .miete-grid > .mk-buehne, .miete-grid .mk-buehne > .sek-kopf { display: contents; }
  .miete-grid .sek-kopf > h2, .miete-grid .sek-kopf > p { grid-column: 1 / -1; max-width: 720px; }
  .miete-grid .sek-kopf > p { margin-bottom: 28px; }
  .miete-grid .mk-liste { grid-column: 1; grid-row: 3; margin-top: 0; }
  .miete-grid .miete-tab { grid-column: 2; grid-row: 3; align-self: stretch; height: 100%; }
}
.miete-tab { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden; font-size: 15.5px; }
.miete-tab th, .miete-tab td { padding: 14px 16px; border-bottom: 1px solid var(--linie); text-align: left; }
.miete-tab tbody tr:last-child th, .miete-tab tbody tr:last-child td { border-bottom: 0; }
.miete-tab thead th { font-size: 13.5px; font-weight: 600; color: var(--stahl); background: #fafbfc; }
.miete-tab td { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.miete-tab th a { font-weight: 600; text-decoration: none; }
.miete-tab th a:hover { color: var(--blau); text-decoration: underline; }

/* Mietbereiche als Karten. Desktop: Liste mit Vorschaubild, Handy: zum Wischen */
.mk-liste { display: grid; gap: 10px; margin-top: 22px; }
.mk { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 16px 10px 10px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); text-decoration: none;
  transition: border-color .15s ease; }
.mk:hover { border-color: var(--blau); }
.mk:hover b { color: var(--blau); }
.mk-bild { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-klein); overflow: hidden; background: var(--weiss); }
.mk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-bild img.foto { object-fit: cover; }
.mk-bild img.frei { object-fit: contain; padding: 6px; }
.mk-txt b { display: block; font: 720 21px/1.15 var(--titel); font-stretch: 84%; }
.mk-preis { display: block; margin-top: 4px; font-weight: 650; font-size: 15px; color: var(--tinte); }
.mk-zahl { display: block; font-size: 14px; color: var(--stahl); }
.mk-pfeil { color: var(--blau); display: flex; }
.mk-punkte { display: none; }

/* Betrieb: Foto links bis an den Rand, Text rechts endet auf der Kante von .wrap */
.betrieb { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); background: var(--weiss); }
.betrieb-bild { position: relative; margin: 0; min-height: 560px; background: var(--nacht); }
.betrieb-bild { overflow: hidden; }
.betrieb-rahmen { position: absolute; inset: 0; overflow: hidden; }
.betrieb-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
  transform: translate3d(0, calc(var(--q, 0) * 4%), 0) scale(1.1); will-change: transform; }
.betrieb-txt { align-self: center; padding: 96px max(24px, calc(50vw - 596px)) 96px 80px; }
.betrieb-txt > * { max-width: 480px; }
.betrieb-txt h2 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 22px; }
.betrieb-txt p { margin: 0 0 16px; font-size: 18px; color: #3a434c; }
.betrieb-txt .btn { margin-top: 18px; }

/* Laufband mit Partnerlogos: dunkler Streifen direkt unter dem Startbild, jedes Logo auf einer gleich grossen Kachel.
   Bewegt wird nur transform. Bei "Bewegung reduzieren" steht es still. */
.marken { background: var(--nacht); padding: 26px 0; overflow: hidden; }
.marken-in { display: flex; align-items: center; gap: 40px; max-width: 1240px; margin: 0 auto; padding-left: 24px; }
.marken-tit { flex: 0 0 150px; font: 720 19px/1.15 var(--titel); font-stretch: 84%; color: var(--weiss); margin: 0; }
.marken-lauf { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.marken-spur { display: flex; width: max-content; animation: marken 48s linear infinite; will-change: transform; }
.marken-lauf:hover .marken-spur { animation-play-state: paused; }
.marken-liste { display: flex; align-items: center; gap: 14px; padding: 0 14px 0 0; margin: 0; list-style: none; }
.marken-liste li { flex: none; width: 168px; height: 76px; display: flex; align-items: center; justify-content: center;
  background: var(--weiss); border-radius: 10px; padding: 10px 16px; }
.marken-liste li.m-kramp { background: #9b0000; }
.marken-liste li.m-reimo { background: #f3cd22; padding: 4px 8px; }
.marken-liste img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
@keyframes marken { to { transform: translateX(-50%); } }

/* Karte und Daten */
.karte-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 36px; margin-top: 24px; align-items: start; }
.karte { margin: 0; }
.karte a { position: relative; display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--linie); }
.karte img { width: 100%; }
.karte-pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--blau); border: 4px solid var(--weiss); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.karte figcaption { font-size: 12.5px; color: var(--stahl); margin-top: 6px; }
.daten { margin: 0; }
.daten div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.daten dt { color: var(--stahl); font-size: 14.5px; }
.daten dd { margin: 0; font-weight: 600; }
.daten a { color: var(--blau); }

/* Partnershop (Ersatzteile) */
.sek-shop { padding-top: 0; }
.shop-box { max-width: 880px; background: var(--blau); color: var(--weiss); border-radius: var(--r); padding: 40px 44px; }
.shop-box h2 { margin-bottom: 14px; }
.shop-box p { color: #d6e2ec; }
.shop-box .entwurf-hinweis { margin: 0 0 20px; color: #4a3d0c; }
.shop-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.shop-klein { font-size: 14px; margin: 16px 0 0; }
@media (max-width: 820px) { .shop-box { padding: 28px 20px; } }

/* Formular */
.sek-form { background: var(--blau); color: var(--weiss); }
.form-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.sek-form .lead { color: #d6e2ec; margin-top: 14px; }
.form-direkt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sek-form .btn-blau { background: var(--weiss); color: var(--blau); }
.sek-form .btn-blau:hover { background: #e6eef5; }
.anfrage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.anfrage label span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #dbe6ef; }
.anfrage input, .anfrage select, .anfrage textarea { width: 100%; font: 400 16px/1.4 var(--text); color: var(--tinte);
  background: var(--weiss); border: 2px solid transparent; border-radius: var(--r-klein); padding: 12px 13px; }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus { outline: none; border-color: var(--fokus); }
.anfrage label:first-of-type { grid-column: 1 / -1; }
.anfrage .voll { grid-column: 1 / -1; }
.form-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-hinweis { font-size: 13.5px; color: #c4d4e2; margin: 0; flex: 1; min-width: 220px; }
.form-hinweis a { color: var(--weiss); }
.form-status { margin: 0; font-weight: 600; min-height: 1.6em; }
.form-status p { margin: 0 0 10px; }
.form-status a { color: var(--weiss); }
.form-status textarea { width: 100%; font: 400 15px/1.4 var(--text); color: var(--tinte); border-radius: var(--r-klein); padding: 10px 12px; }

/* Brotkrumen und Buehne */
.krumen { font-size: 14px; color: var(--stahl); padding: 12px 0; border-bottom: 1px solid var(--linie); }
.krumen a { text-decoration: none; }
.krumen a:hover { color: var(--blau); text-decoration: underline; }
.krumen span { margin: 0 8px; color: #a9b3bd; }
.krumen b { color: var(--tinte); font-weight: 600; }
.buehne { position: relative; color: var(--weiss); background: var(--blau); }
.buehne-foto { min-height: clamp(300px, 44vh, 460px); display: flex; align-items: flex-end; background: var(--nacht); overflow: hidden; }
.buehne-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buehne-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7, 18, 29, .85) 0%, rgba(7, 18, 29, .25) 60%, rgba(7, 18, 29, .1) 100%); }
.buehne-in { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 44px; }
.buehne h1 { font-size: clamp(32px, 4.4vw, 58px); max-width: 22ch; }

/* Bereich: Leistungsliste */
.lz-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.lz { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); text-decoration: none; }
.lz:hover { border-color: var(--blau); }
.lz:hover b { color: var(--blau); }
.lz-bild img { width: 104px; height: 78px; object-fit: cover; border-radius: var(--r-klein); }
.lz-txt b { display: block; font: 720 22px/1.15 var(--titel); font-stretch: 84%; }
.lz-txt span { display: block; color: var(--stahl); font-size: 15px; margin-top: 3px; }

/* Leistungsseite */
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.haupt { max-width: 760px; }
.block { margin-top: 40px; }
.block h2 { font-size: 27px; margin-bottom: 14px; }
.lz-h2 { font-size: 27px; margin: 8px 0 18px; }
.haken { list-style: none; padding: 0; margin: 0; }
.haken li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--linie); }
.haken li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 11px; height: 6px;
  border-left: 2.5px solid var(--blau); border-bottom: 2.5px solid var(--blau); transform: rotate(-45deg); }
.absch { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.absch > div { border-top: 3px solid var(--blau); padding-top: 14px; }
.absch h2 { font-size: 22px; margin-bottom: 8px; }
.absch p { margin: 0; color: #2d343c; }
.schritte { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 4px; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 12px 0; }
.schritte li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: #e3edf5;
  color: var(--blau); font: 720 17px/34px var(--titel); text-align: center; }
.schritte b { font-weight: 650; }
.schritte span { color: var(--stahl); }
.textlink { color: var(--blau); font-weight: 650; }
.partner { display: flex; align-items: center; gap: 16px; margin-top: 32px; font-weight: 600; color: var(--stahl); }
.partner img { height: 40px; width: auto; }
.kbox { position: sticky; top: 100px; background: var(--papier); border-radius: var(--r); padding: 26px 24px; }
.kbox .kbox-tit { font: 720 24px/1.1 var(--titel); font-stretch: 84%; margin-bottom: 8px; color: var(--tinte); }
.kbox p { color: var(--stahl); font-size: 15px; }
.kbox-dl { margin: 18px 0 0; font-size: 14.5px; }
.kbox-dl div { padding: 9px 0; border-top: 1px solid var(--linie); }
.kbox-dl dt { color: var(--stahl); }
.kbox-dl dd { margin: 0; font-weight: 600; }

/* Mietgeraete */
.geraete { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.geraet { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; display: grid;
  grid-template-columns: 2fr 3fr; }
.g-bild { position: relative; background: var(--weiss); border-right: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: hidden; }
.g-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-bild img.frei { object-fit: contain; padding: 18px; }
.g-bild img.foto { object-fit: cover; }
.ohne-bild { color: var(--stahl); font-size: 14px; }
.g-txt { padding: 20px 22px 22px; display: flex; flex-direction: column; }
.g-txt h3 { font-size: 23px; margin-bottom: 10px; }
.g-daten { margin: 0; font-size: 14px; }
.g-daten div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.g-daten dt { color: var(--stahl); }
.g-daten dd { margin: 0; font-weight: 600; text-align: right; }
.g-preise { width: 100%; border-collapse: collapse; margin: 14px 0 18px; }
.g-preise caption { text-align: left; font-size: 13px; font-weight: 600; color: var(--stahl); padding-bottom: 4px; }
.g-preise th, .g-preise td { padding: 8px 0; border-top: 1px solid var(--linie); }
.g-preise th { text-align: left; font-weight: 500; font-size: 14.5px; }
.g-preise td { text-align: right; font: 720 21px/1 var(--titel); font-stretch: 84%; font-variant-numeric: tabular-nums; }
.g-txt .btn { margin-top: auto; align-self: flex-start; }

/* Anhaenger kaufen */
.typen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.typ { margin: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); padding: 18px 18px 14px; }
.typ img { height: 130px; width: 100%; object-fit: contain; }
.typ figcaption { margin-top: 10px; font-weight: 650; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.schluss { margin-top: 28px; font-size: 18px; font-weight: 600; }
.entwurf-hinweis { border: 1px solid #ead58a; background: #fff8e1; color: #4a3d0c; padding: 12px 16px;
  border-radius: 6px; font-size: 14.5px; margin-bottom: 24px; }

/* Galerie: Fotos in Gruppen, Vorher-Nachher als Paar, Foto gross im Fenster */
.gal-gruppe { margin-top: 48px; }
.gal-gruppe h2 { margin-bottom: 20px; }
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.gal-bild { margin: 0; }
.gal-bild figcaption { margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.gal-link { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-klein); overflow: hidden; background: var(--papier); }
.gal-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gal-link:hover img { transform: scale(1.03); }
.vn-liste { display: grid; gap: 40px; }
.vn { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; align-items: center;
  padding-bottom: 40px; border-bottom: 1px solid var(--linie); }
.vn:last-child { padding-bottom: 0; border-bottom: 0; }
.vn-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vn-paar .gal-link { aspect-ratio: 3 / 4; }
.vn-paar b { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 6px; font-size: 13.5px;
  background: var(--weiss); color: var(--tinte); }
.vn-paar .gal-link + .gal-link b { background: var(--blau); color: var(--weiss); }
.vn-txt h3 { font-size: 26px; margin-bottom: 10px; }
.vn-txt p { color: #2d343c; }
.vn-mehr-tit { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--stahl); }
.vn-mehr { display: grid; grid-template-columns: repeat(3, 96px); gap: 8px; }
.vn-mehr .gal-link { aspect-ratio: 1 / 1; border-radius: 6px; }
.ab-liste { display: grid; gap: 40px; }
.ab { padding-bottom: 40px; border-bottom: 1px solid var(--linie); }
.ab:last-child { padding-bottom: 0; border-bottom: 0; }
.ab h3 { font-size: 26px; margin-bottom: 8px; }
.ab > p { color: #2d343c; max-width: 720px; margin-bottom: 18px; }
.ab-fotos { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.ab-fotos .gal-link { aspect-ratio: 3 / 4; }
.gal-dialog { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
  border-radius: var(--r); background: var(--nacht); color: var(--weiss); overflow: hidden; }
.gal-dialog::backdrop { background: rgba(7, 18, 29, .82); }
.gal-gross { background: #000; }
.gal-gross img { width: 100%; height: calc(100vh - 110px); object-fit: contain; }
.gal-leiste { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.gal-text { flex: 1; margin: 0; font-weight: 600; text-align: center; }
.gal-leiste button { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: var(--weiss); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gal-leiste button:hover { border-color: var(--weiss); }

/* Rechtstexte */
.rechtstext h2 { font-size: 22px; margin: 28px 0 8px; }

/* Fuss */
.fuss { background: var(--nacht); color: #b8c6d3; padding: 56px 0 28px; font-size: 14.5px; }
.f-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.fuss a, .fuss span { display: block; text-decoration: none; line-height: 1.5; padding: 4px 0; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.f-tit { margin: 0 0 8px; }
.f-tit a { font: 720 19px/1.2 var(--titel); font-stretch: 84%; color: var(--weiss); }
p.f-tit { font: 720 19px/1.2 var(--titel); font-stretch: 84%; color: var(--weiss); }
.f-grp summary { list-style: none; cursor: default; }
.f-grp summary::-webkit-details-marker { display: none; }
.f-grp summary span, .f-grp summary svg, .f-alle, .f-logo { display: none !important; }
.f-mehr { display: contents; }
.f-unten { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; }
.f-unten .f-osm { margin-left: auto; }
.mobbar { display: none; }

/* Tablet */
@media (max-width: 1120px) {
  .burger { display: block; }
  .kopf-in { gap: 12px; }
  .kopf-tel { margin-left: auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--weiss); border-bottom: 1px solid var(--linie);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; max-height: calc(100vh - 120px); overflow: auto;
    box-shadow: 0 18px 30px rgba(11, 26, 39, .12); }
  body.nav-offen .nav { display: flex; }
  .nav > a, .ngrp > a { padding: 14px 0; border-bottom: 1px solid var(--linie); border-radius: 0; flex: 1; }
  .ngrp { flex-wrap: wrap; }
  .ntog { padding: 14px 4px; margin: 0; border-bottom: 1px solid var(--linie); }
  .nsub { position: static; min-width: 0; width: 100%; box-shadow: none; border: 0; padding: 4px 0 8px 12px; }
  .bestand { grid-template-columns: repeat(2, 1fr); }
  .geraete { grid-template-columns: 1fr; }
  .spalten { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  .tb-ort { display: none; }
  .tb-zeit { margin-right: auto; }
  .betrieb-txt { padding-left: 48px; }
}

/* Handy */
@media (max-width: 820px) {
  .wrap { padding: 0 16px; }
  .topbar { display: none; }
  .kopf { box-shadow: 0 1px 0 var(--linie); border-bottom: 0; }
  html.js .kopf { top: -16px; }
  .kopf-in { min-height: 80px; }
  .marke img { height: 66px; }
  html.fest .marke img { transform: scale(.7); }
  html.fest .marke, html.fest .kopf-tel, html.fest .burger { transform: translateY(8px); }
  .lang { display: none; }
  .kurz { display: inline; }
  .kopf-tel span { display: none; }
  .kopf-tel { padding: 11px 13px; }
  /* Startbild fuellt den Bildschirm zwischen Kopf und unterer Leiste, oben bleibt das Foto frei */
  .hero { min-height: 560px; min-height: calc(100svh - 80px - 56px - env(safe-area-inset-bottom)); }
  /* Foto groesser und nach oben geschoben: weniger Wand ueber der Kappe, Haende und Flex ueber dem Text */
  .hero > img { top: -12%; bottom: auto; height: 114%; object-position: 46% 50%; }
  .hero::after { background: linear-gradient(0deg, rgba(7, 18, 29, .94) 0%, rgba(7, 18, 29, .8) 34%, rgba(7, 18, 29, .35) 50%, rgba(7, 18, 29, 0) 70%); }
  .hero-in { padding-bottom: 28px; }
  .hero h1 { font-size: 34px; }
  .hero-unter { font-size: 16px; line-height: 1.5; margin: 14px 0 22px; }
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta .btn { flex: 1 1 0; padding: 14px 10px; }
  /* Kartenstapel: jede Karte bleibt unter dem Kopf stehen, die naechste schiebt sich darueber */
  .wege { padding: 12px 0 28px; }
  .wege-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 14px; }   /* alle Karten so hoch wie die hoechste */
  .weg-caravan, .weg-foto, .weg-foto.weg-gross { grid-column: auto; min-height: 0; }
  .weg { position: sticky; top: calc(76px + var(--i, 0) * 10px); transform-origin: 50% 0;
    transform: scale(calc(1 - var(--p, 0) * .07)); box-shadow: 0 -10px 30px rgba(7, 18, 29, .16); }
  .weg::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #07121d; pointer-events: none;
    opacity: calc(var(--p, 0) * .5); border-radius: inherit; }
  .weg-caravan { padding: 26px 20px 22px; }
  .weg-caravan h2 { font-size: 30px; }
  .weg-caravan > p { margin: 10px 0 14px; font-size: 15.5px; line-height: 1.5; }
  .weg-caravan ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .weg-caravan li a { padding: 10px 0; font-size: 15px; line-height: 1.3; }
  .weg-caravan .weg-reimo { font-size: 13px; line-height: 1.45; padding-top: 14px; }
  .weg-foto, .weg-foto.weg-gross { height: auto; min-height: 340px; }
  .weg-txt { padding: 20px 64px 20px 20px; }
  .weg-txt b { font-size: 32px; }
  .weg-pfeil { display: flex; align-items: center; justify-content: center; position: absolute; right: 16px; bottom: 20px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; background: var(--weiss); color: var(--blau); }
  .sek { padding: 52px 0; }
  .bestand { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bk-txt { padding: 12px 12px 14px; }
  .shop-miete { grid-template-columns: 1fr; }
  .shop-miete .bk-txt { padding: 14px 16px 6px; }
  .shop-miete .bk-bild { aspect-ratio: 16 / 10; }
  .bk-txt .bk-preis { font-size: 21px; }
  .miete-grid, .karte-grid, .form-grid, .spalten, .lz-liste, .absch { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .betrieb { grid-template-columns: 1fr; }
  .betrieb-bild { min-height: 0; aspect-ratio: 4 / 3; }
  .betrieb-txt { padding: 40px 16px 52px; }
  .betrieb-txt h2 { font-size: 32px; }
  .betrieb-txt p { font-size: 17px; }
  .mk-liste { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px -16px 0;
    padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; }
  .mk-liste::-webkit-scrollbar { display: none; }
  .mk { flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0; position: relative; overflow: hidden; }
  .mk-bild { aspect-ratio: 4 / 3; border-radius: 0; border-bottom: 1px solid var(--linie); }
  .mk-bild img.frei { padding: 16px; }
  .mk-txt { padding: 14px 16px 16px; }
  .mk-txt b { font-size: 23px; padding-right: 44px; }
  .mk-pfeil { position: absolute; right: 14px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%; background: var(--blau);
    color: var(--weiss); align-items: center; justify-content: center; }
  .mk-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .mk-punkte i { width: 7px; height: 7px; border-radius: 4px; background: #c3ccd5; transition: width .25s ease, background-color .25s ease; }
  .mk-punkte i.an { width: 22px; background: var(--blau); }
  /* Durchscrollen: die Buehne bleibt stehen, die Karten laufen mit dem Scrollen nach links */
  .pin-an .mk-buehne { height: calc(100svh - 120px + 120vh); }
  .pin-an .mk-buehne > .sek-kopf { position: sticky; top: 64px; height: calc(100svh - 120px); margin: 0 -16px; padding: 0 16px;
    display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .pin-an .mk-liste { position: relative; overflow: visible; scroll-snap-type: none; margin: 22px 0 0; padding: 0; will-change: transform; }
  .pin-an .mk { flex-basis: 84%; }
  .miete-tab { font-size: 14.5px; }
  .miete-tab th, .miete-tab td { padding: 11px 8px; }
  .miete-tab thead th { font-size: 12.5px; }
  .vk-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; overflow: auto; }
  .vk-in { grid-template-columns: minmax(0, 1fr); max-height: none; }
  .vk-galerie { padding: 0 0 10px; overflow: visible; max-height: none; }
  .vk-gross { border-radius: 0; }
  .vk-daumen { padding: 0 12px 4px; }
  .vk-info { padding: 18px 16px 28px; overflow: visible; max-height: none; }
  .vk-info .vk-titel { font-size: 26px; }
  .vk-zu { position: fixed; top: 12px; right: 12px; }
  .kbox { position: static; }
  .marken { padding: 20px 0 22px; }
  .marken-in { display: block; padding: 0; }
  .marken-tit { font-size: 16px; padding: 0 16px; margin: 0 0 14px; }
  .marken-lauf { -webkit-mask-image: none; mask-image: none; }
  .marken-liste { gap: 10px; padding-right: 10px; }
  .marken-liste li { width: 128px; height: 60px; padding: 8px 12px; border-radius: 8px; }
  .marken-liste li.m-reimo { padding: 3px 6px; }
  .marken-spur { animation-duration: 34s; }
  .geraet { grid-template-columns: 1fr; }
  .g-bild { border-right: 0; border-bottom: 1px solid var(--linie); min-height: 0; aspect-ratio: 4 / 3; }
  .typen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .typ img { height: 90px; }
  .anfrage { grid-template-columns: 1fr; }
  /* Kontakt: Status, drei grosse Knoepfe, Karte, dann Adresse und Zeiten */
  .k-aktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .k-akt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 6px 14px;
    background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); text-decoration: none; color: var(--blau); }
  .k-akt svg { width: 22px; height: 22px; margin-bottom: 4px; }
  .k-akt b { font-size: 15px; color: var(--tinte); }
  .k-akt span { font-size: 12px; color: var(--stahl); line-height: 1.3; overflow-wrap: anywhere; }
  .k-akt-wa { color: var(--wa); }
  .karte-grid { margin-top: 16px; gap: 18px; }
  .daten { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); padding: 4px 16px; }
  .daten div { grid-template-columns: 124px minmax(0, 1fr); }
  .daten div:last-child { border-bottom: 0; }
  .daten .d-direkt { display: none; }
  .daten .heute { background: #eef4f9; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .form-direkt { display: none; }

  /* Fuss: Kontakt oben, Linkgruppen zum Aufklappen */
  .fuss { padding: 40px 0 96px; }
  .f-grid { grid-template-columns: 1fr; gap: 0; }
  .f-kontakt { order: -1; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .f-logo { display: block !important; width: 92px; height: auto; background: var(--weiss); border-radius: var(--r-klein);
    padding: 6px 10px; margin-bottom: 20px; }
  .f-kontakt .f-tit { display: none; }
  .fuss .f-tel { font: 720 30px/1.1 var(--titel); font-stretch: 84%; color: var(--weiss); padding: 0 0 8px; }
  .f-mehr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .fuss .f-mehr a { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: var(--weiss); }
  .f-grp { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .f-grp summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin: 0; cursor: pointer; }
  .f-grp summary a { display: none; }
  .f-grp summary span { display: block !important; font: 720 20px/1.2 var(--titel); font-stretch: 84%; color: var(--weiss); padding: 0; }
  .f-grp summary svg { display: block !important; color: #b8c6d3; transition: transform .2s ease; }
  .f-grp[open] summary svg { transform: rotate(180deg); }
  .f-links { padding: 0 0 14px; }
  .fuss .f-links a { padding: 7px 0; }
  .fuss .f-links .f-alle { display: block !important; color: var(--weiss); font-weight: 600; }
  .f-unten { margin-top: 28px; }
  .f-unten .f-osm { margin-left: 0; }
  .mobbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--weiss); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
  .mobbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px; font-size: 13px;
    font-weight: 650; color: var(--blau); text-decoration: none; }
  .mobbar .mb-wa { color: var(--wa); }
}

/* Galerie am Handy und Tablet */
@media (max-width: 820px) {
  .gal-gruppe { margin-top: 36px; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .gal-bild:first-child:nth-last-child(odd) { grid-column: span 2; }
  .ab-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-fotos .gal-bild:first-child:nth-last-child(odd) .gal-link { aspect-ratio: 4 / 3; }
  .ab h3 { font-size: 22px; }
  .gal-bild figcaption { font-size: 13.5px; }
  .vn { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 32px; }
  .vn-liste { gap: 32px; }
  .vn-txt h3 { font-size: 22px; }
  .vn-mehr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vn-mehr .gal-link { aspect-ratio: 4 / 3; }
  .gal-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0;
    display: flex; flex-direction: column; }
  .gal-dialog:not([open]) { display: none; }
  .gal-gross { flex: 1; min-height: 0; display: flex; align-items: center; }
  .gal-gross img { height: auto; max-height: 100%; }
  .gal-leiste { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
}

/* Kleine Handys: Mietkarten flacher, damit die Buehne zwischen Kopf und unterer Leiste passt */
@media (max-width: 820px) and (max-height: 760px) {
  .pin-an .mk-bild { aspect-ratio: 16 / 10; }
  .pin-an .mk-buehne .sek-kopf > p { font-size: 15px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .weg { position: relative; top: auto; transform: none; }
  .weg::before { display: none; }
  .betrieb-bild img { transform: none; }
  .marken-spur { animation: none; width: auto; justify-content: center; }
  .marken-kopie, .marken-liste li[aria-hidden="true"] { display: none; }
  .marken-liste { flex-wrap: wrap; justify-content: center; gap: 28px 48px; padding: 0 24px; }
  .marken-lauf { -webkit-mask-image: none; mask-image: none; }
}