/* 100octane.de – Gestaltung „à la Apple“: Schwarz/Weiß/Hellgrau, große Fotos, ruhige Typografie (SF Pro auf Apple-Geräten,
   sonst Inter), Glas-Navigation, sanfte Scroll-Wirkung. Keine Querscroll-Flächen außer dem bewussten News-Scroller. */
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --schrift: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --schwarz: #000; --nacht: #101012; --text: #1d1d1f; --text2: #6e6e73; --linie: #d2d2d7; --grau: #f5f5f7;
  --blau: #1d1d1f; --blau-hell: #f5f5f7; --rand: max(22px, 4vw); --max: 1240px; --kopf: 131px; --kopf-klein: 68px;
  --radius: 18px; --schatten: 0 10px 40px rgba(0, 0, 0, .12);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--schrift); font-size: calc((17px) * var(--gs, 1)); line-height: 1.47; letter-spacing: -0.01em; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.dunkel { background: var(--schwarz); color: #f5f5f7; }
/* Überschriften und Menü in der Titelschrift aus dem Admin (Gestaltung) */
h1, h2, h3, h4, .menue-punkt, .flyout a, .mobil-menue > ul > li > a, .mobil-menue summary { font-family: var(--schrift-titel, var(--schrift)); }
img { max-width: 100%; height: auto; display: block; }
/* Links ohne eigene Farbe (Board: kein Blau, keine Fremdfarbe) – erkennbar an der Unterstreichung bzw. am Pfeil. */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fliess a, .meta a, .unterzeile a, .hinweis-klein a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.fliess a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; hyphens: manual; overflow-wrap: normal; word-break: normal; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }
.wrap.breit { max-width: 1680px; }
.wrap.schmal { max-width: calc(820px + 2 * var(--rand)); } /* Inhalt bleibt 820 px breit, auch wenn der Rand auf großen Bildschirmen wächst */
.wrap.schmal-breit { max-width: 1000px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: 2px; border-radius: 4px; }

/* ---------- Kopf: Glas-Navigation wie apple.com ---------- */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #000; color: #e8e8ed; --h: var(--kopf); }
/* Board 24.10.2026: Kopf schwarz, Logo groß; beim Scrollen wird der Kopf niedriger und das Logo kleiner (site.js setzt .klein).
   Der Kopf ist fest positioniert und der Seiteninhalt um die volle Höhe eingerückt – so springt beim Verkleinern nichts. */
.kopf.klein { --h: var(--kopf-klein); }
body { padding-top: var(--kopf); }
.kopf-leiste { max-width: 1440px; margin: 0 auto; height: var(--h); transition: height .3s ease; display: flex; align-items: center; gap: 8px; padding: 0 var(--rand); }
.marke { display: inline-flex; align-items: center; gap: 14px; color: #f5f5f7 !important; text-decoration: none !important; white-space: nowrap; }
.marke img { border-radius: 50%; width: calc(var(--h) - 16px); height: calc(var(--h) - 16px); transition: width .3s ease, height .3s ease; }
.wortmarke { display: block; height: 24px; width: auto; flex: none; }
.kopf-leiste .marke { margin-right: 64px; flex: none; } /* Schriftzug in Magneto als SVG-Kontur (src/wortmarke.mjs) */
@media (max-width: 560px) { .marke { gap: 10px; } .wortmarke { height: 21px; } }
.menue { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; }
.menue-punkt { display: flex; align-items: center; padding: 0 13px; height: var(--h); font: inherit; font-size: calc((15px) * var(--gt, 1)); font-weight: 500; line-height: 1; letter-spacing: 0; color: #e8e8ed !important; background: none; border: 0; cursor: pointer; opacity: .88; white-space: nowrap; text-decoration: none !important; }
.menue-punkt:hover, .menue-punkt[aria-current], .menue-punkt[data-aktiv], .menue-punkt[aria-expanded="true"] { opacity: 1; color: #fff !important; }
.menue-punkt[aria-current], .menue-punkt[data-aktiv] { box-shadow: inset 0 -3px 0 #f5f5f7; }
.menue-punkt:hover { box-shadow: inset 0 -3px 0 rgba(245, 245, 247, .45); }
.suche-knopf { display: grid; place-items: center; width: 40px; height: var(--h); color: #e8e8ed !important; }
.suche-knopf svg { width: 17px; height: 17px; }
.flyout { position: absolute; left: 0; right: 0; top: var(--h); background: #161617; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .24s ease, transform .24s ease, visibility .24s; }
.hat-kinder.offen .flyout { opacity: 1; visibility: visible; transform: none; }
.flyout-innen { max-width: 1240px; margin: 0 auto; padding: 36px var(--rand) 48px; }
.flyout-titel { color: #86868b; font-size: calc((12px) * var(--gt, 1)); margin: 0 0 14px; }
.flyout ul { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 40px; }
.flyout li { break-inside: avoid; }
.flyout a { display: inline-block; color: #e8e8ed !important; font-size: calc((24px) * var(--gt, 1)); font-weight: 600; letter-spacing: -0.02em; padding: 4px 0; text-decoration: none !important; }
.flyout a:hover, .flyout a[aria-current] { color: #fff !important; }
.flyout .alle a { color: #86868b !important; font-size: calc((17px) * var(--gs, 1)); font-weight: 500; }
.burger { display: none; margin-left: auto; width: 44px; height: var(--h); background: none; border: 0; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: #e8e8ed; transition: transform .25s ease; }
.burger span:first-child { top: calc(var(--h) / 2 - 4px); } .burger span:last-child { top: calc(var(--h) / 2 + 4px); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobil-menue { background: #161617; padding: 8px var(--rand) 40px; max-height: calc(100dvh - var(--h)); overflow-y: auto; }
.mobil-menue ul { list-style: none; margin: 0; padding: 0; }
.mobil-menue > ul > li > a, .mobil-menue summary { display: block; color: #e8e8ed !important; font-size: calc((26px) * var(--gs, 1)); font-weight: 600; letter-spacing: -0.02em; padding: 8px 0; cursor: pointer; list-style: none; text-decoration: none !important; }
.mobil-menue summary::-webkit-details-marker { display: none; }
.mobil-menue details ul { padding: 0 0 10px 14px; }
.mobil-menue details a { display: block; color: #a1a1a6 !important; font-size: calc((18px) * var(--gs, 1)); padding: 5px 0; }
.mobil-suche input { width: 100%; margin: 6px 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid #424245; background: #1d1d1f; color: #fff; font: inherit; }
/* Menüsymbol, sobald Wortmarke und Menü nicht mit 64 px Abstand nebeneinander passen – site.js misst das je Schrift und Gerät
   und setzt .eng; ohne JavaScript greift die feste Grenze. */
.kopf.eng .menue, .kopf.eng .suche-knopf { display: none; } .kopf.eng .burger { display: block; }
.kopf:not(.eng) .mobil-menue { display: none !important; }
@media (max-width: 1000px) { .menue, .suche-knopf { display: none; } .burger { display: block; } }
@media (max-width: 560px) { :root { --kopf: 98px; --kopf-klein: 60px; } }

/* ---------- Knöpfe, Pillen ---------- */
.knopf { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 980px; background: #1d1d1f; color: #fff !important; font-size: calc((17px) * var(--gs, 1)); font-weight: 400; border: 0; cursor: pointer; text-decoration: none !important; transition: background .2s; font-family: inherit; }
.knopf:hover { background: #3a3a3c; }
.dunkel .knopf, .band.dunkel .knopf, .held .knopf, .buehne .knopf { background: #f5f5f7; color: #1d1d1f !important; }
.dunkel .knopf:hover, .band.dunkel .knopf:hover, .held .knopf:hover { background: #fff; }
.knopf.hell { background: transparent !important; color: inherit !important; box-shadow: inset 0 0 0 1px currentColor; }
.knopf svg { width: 20px; height: 20px; }
.dunkel .knopf.hell, .band.dunkel .knopf.hell, .held .knopf.hell { color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.hellgrau .knopf.hell, body:not(.dunkel) .band:not(.dunkel) .knopf.hell { color: #1d1d1f !important; }
.knopf.klein { padding: 7px 16px; font-size: calc((14px) * var(--gs, 1)); }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pillen a { padding: 7px 16px; border-radius: 980px; font-size: calc((14px) * var(--gs, 1)); color: #f5f5f7 !important; background: rgba(255, 255, 255, .1); text-decoration: none !important; }
.pillen a:hover { background: rgba(255, 255, 255, .18); }
.pillen a[aria-current] { background: #f5f5f7; color: #000 !important; }
.pillen.hell a { color: var(--text) !important; background: #e8e8ed; }
.pillen.hell a:hover { background: #dcdce1; }
.pillen.hell a[aria-current] { background: var(--text); color: #fff !important; }
.pillen.klein { margin-top: 12px; } .pillen small { opacity: .6; margin-left: 2px; }

/* ---------- Held (Startseite) ---------- */
.held { position: relative; min-height: calc(100svh - var(--kopf)); display: flex; align-items: flex-end; overflow: hidden; background: #000; color: #fff; }
.held-bild { position: absolute; inset: 0; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; animation: held-zoom 1.8s cubic-bezier(.2, .7, .2, 1) both; }
.held::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .75) 100%); }
.held-text { position: relative; z-index: 1; padding-bottom: clamp(70px, 12vh, 140px); }
.held h1 { font-size: calc((clamp(42px, 7.2vw, 96px)) * var(--gt, 1)); max-width: 14ch; letter-spacing: -0.035em; animation: einblenden 1.1s .2s cubic-bezier(.2, .7, .2, 1) both; }
.held .unterzeile { font-size: calc((clamp(19px, 2vw, 26px)) * var(--gs, 1)); color: rgba(255, 255, 255, .86); max-width: 38ch; margin-top: 18px; animation: einblenden 1.1s .35s cubic-bezier(.2, .7, .2, 1) both; }
.held .knopf-zeile { animation: einblenden 1.1s .5s cubic-bezier(.2, .7, .2, 1) both; }
.dachzeile { font-size: calc((14px) * var(--gs, 1)); font-weight: 600; letter-spacing: .02em; color: #86868b; margin: 0 0 10px; text-transform: none; }
.dachzeile a { color: inherit !important; }
.held .dachzeile { color: rgba(255, 255, 255, .7); }
.held-weiter { position: absolute; z-index: 1; left: 50%; bottom: 22px; translate: -50% 0; color: #fff !important; opacity: .7; animation: wippen 2.4s ease-in-out infinite; }
@keyframes held-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes wippen { 50% { transform: translateY(6px); } }
@supports (animation-timeline: scroll()) {
  .held-bild img { animation: held-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes held-parallax { from { transform: scale(1.04); filter: brightness(1); } to { transform: scale(1.18) translateY(6%); filter: brightness(.45); } }
}

/* ---------- Bühne (Seitenkopf mit Foto) ---------- */
.buehne { position: relative; min-height: clamp(380px, 75vh, 1000px); display: flex; align-items: flex-end; overflow: hidden; background: #000; color: #fff; }
.buehne.hoch { min-height: clamp(420px, 80vh, 900px); }
.buehne.ohne-foto { min-height: 260px; }
.buehne-bild { position: absolute; inset: 0; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.buehne::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .78) 100%); }
.buehne-text { position: relative; z-index: 1; padding-bottom: clamp(36px, 7vh, 80px); }
.buehne h1 { font-size: calc((clamp(36px, 6vw, 80px)) * var(--gt, 1)); letter-spacing: -0.03em; max-width: 18ch; }
.buehne .unterzeile { color: rgba(255, 255, 255, .8); font-size: calc((clamp(17px, 1.8vw, 22px)) * var(--gs, 1)); margin: 12px 0 0; }
.buehne .dachzeile { color: rgba(255, 255, 255, .75); }
@supports (animation-timeline: view()) {
  .buehne-bild img { animation: buehne-parallax linear both; animation-timeline: view(); animation-range: exit; }
  @keyframes buehne-parallax { to { transform: translateY(18%) scale(1.06); } }
}

/* ---------- Bänder ---------- */
.band { padding: clamp(64px, 9vw, 120px) 0; }
.band.eng { padding: clamp(36px, 5vw, 64px) 0; }
.band.dunkel { background: #000; color: #f5f5f7; }
.band.hellgrau { background: var(--grau); color: var(--text); }
.band-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.band-kopf h2 { font-size: calc((clamp(30px, 4vw, 52px)) * var(--gt, 1)); letter-spacing: -0.03em; }
.band-kopf h2 a { color: inherit !important; }
.mehr { display: inline-flex; align-items: center; gap: 2px; font-size: calc((17px) * var(--gs, 1)); white-space: nowrap; }
.mehr svg { width: 16px; height: 16px; }
.kopfband { padding: clamp(56px, 8vw, 110px) 0 clamp(24px, 4vw, 48px); }
.kopfband.dunkel { background: #000; color: #f5f5f7; }
.kopfband h1 { font-size: calc((clamp(40px, 6.5vw, 88px)) * var(--gt, 1)); letter-spacing: -0.035em; }
.kopfband .unterzeile { font-size: calc((clamp(18px, 2vw, 24px)) * var(--gs, 1)); color: var(--text2); margin: 14px 0 0; max-width: 46ch; }
.kopfband.dunkel .unterzeile { color: #a1a1a6; }
.abschnitt-titel { font-size: calc((clamp(24px, 3vw, 34px)) * var(--gt, 1)); margin: 40px 0 18px; }
.abschnitt-titel:first-child { margin-top: 0; }
.leer { color: var(--text2); }
.hinweis-klein { font-size: calc((13px) * var(--gs, 1)); color: var(--text2); margin-top: 18px; }
.dunkel .hinweis-klein { color: #86868b; }

/* Einblenden beim Scrollen (site.js setzt .sichtbar) */
.js .zeigen { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--v, 0) * 90ms); }
.js .zeigen.sichtbar { opacity: 1; transform: none; }

/* ---------- Kacheln „Neueste Fotos“ ---------- */
.kacheln-neu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.kacheln-neu li:first-child { grid-row: span 2; }
.kacheln-neu a { position: relative; display: block; height: 100%; min-height: 240px; border-radius: var(--radius); overflow: hidden; color: #fff !important; text-decoration: none !important; background: #1d1d1f; }
.kachel-bild { position: absolute; inset: 0; }
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.kacheln-neu a:hover img { transform: scale(1.05); }
.kacheln-neu a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .75)); }
.kachel-text { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 20px; }
.kachel-text h3 { font-size: calc((clamp(20px, 2.2vw, 30px)) * var(--gt, 1)); }
.kacheln-neu li:first-child .kachel-text h3 { font-size: calc((clamp(26px, 3.4vw, 44px)) * var(--gt, 1)); }
.kachel-text p { margin: 6px 0 0; color: rgba(255, 255, 255, .75); font-size: calc((15px) * var(--gs, 1)); }
@media (max-width: 860px) { .kacheln-neu { grid-template-columns: 1fr; grid-template-rows: none; } .kacheln-neu li:first-child { grid-row: auto; } .kacheln-neu a { min-height: 0; aspect-ratio: 3 / 2; } }

/* ---------- Karten ---------- */
.raster-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px 22px; }
.karte a { display: block; color: inherit !important; text-decoration: none !important; }
.karte-bild { aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #1d1d1f; }
.band:not(.dunkel) .karte-bild { background: #e8e8ed; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.karte a:hover .karte-bild img { transform: scale(1.04); }
.karte-leer { width: 100%; height: 100%; background: linear-gradient(135deg, #2c2c2e, #000); }
.karte-text { padding: 14px 2px 0; }
.karte-text h3 { font-size: calc((21px) * var(--gt, 1)); letter-spacing: -0.02em; line-height: 1.2; }
.karte-text p { margin: 6px 0 0; font-size: calc((15px) * var(--gs, 1)); color: var(--text2); }
.dunkel .karte-text p, .band.dunkel .karte-text p { color: #86868b; }
.news-karte .meta { margin: 0 0 6px; font-size: calc((13px) * var(--gs, 1)); }
.news-karte .auszug { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* News-Scroller (Startseite) – bewusst horizontal, wie auf apple.com */
.scroller { position: relative; }
.scroller-spur { list-style: none; margin: 0 calc(var(--rand) * -1); padding: 4px var(--rand) 8px; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--rand); scrollbar-width: none; overscroll-behavior-x: contain; }
.scroller-spur::-webkit-scrollbar { display: none; }
.scroller-spur > li { scroll-snap-align: start; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); }
.scroller-spur .karte-bild { border-radius: 0; }
.scroller-spur .karte-text { padding: 18px 20px 24px; }
.scroller-knoepfe { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.scroller-knoepfe button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #e8e8ed; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.scroller-knoepfe button:disabled { opacity: .4; cursor: default; }
.scroller-knoepfe svg { width: 18px; height: 18px; }

/* ---------- Galerie: drei Spalten auf 80 % der Bildschirmbreite, Live-Reihenfolge links → rechts (Board 23.10.2026) ---------- */
.galerie .wrap.breit { max-width: none; width: 80vw; padding: 0; }
@media (max-width: 1000px) { .galerie .wrap.breit { width: auto; padding: 0 var(--rand); } }
.justiert { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 2px; column-gap: 10px; }
/* Mauerwerk (Board 23.10.2026): jedes Foto im eigenen Seitenverhältnis, Hochkant nicht beschnitten. site.js setzt --s = Zeilen je Foto. */
.justiert > a { position: relative; display: block; aspect-ratio: var(--r); align-self: start; grid-row-end: span var(--s, 120); background: #111; border-radius: 6px; z-index: 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.justiert > a > i { display: none; }
.justiert > a > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Überfahren: Foto wächst auf doppelte Größe über die Nachbarn; Klick öffnet die Großansicht. Außenspalten wachsen nach innen. */
@media (hover: hover) and (pointer: fine) {
  .justiert > a { cursor: zoom-in; }
  .justiert > a:nth-child(3n+1) { transform-origin: left center; }
  .justiert > a:nth-child(3n) { transform-origin: right center; }
  .justiert > a:hover { transform: scale(2); z-index: 5; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
}
/* Einblenden beim Scrollen */
.js .justiert > a.kommt { opacity: 0; translate: 0 26px; }
.js .justiert > a.da { opacity: 1; translate: 0 0; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
@media (max-width: 560px) { .justiert { column-gap: 4px; } }
.band:not(.dunkel) .justiert > a { background: #e8e8ed; }
.galerie-seite .zurueck, .zurueck { margin: 8px 0 0; }
.zurueck a { display: inline-flex; align-items: center; gap: 4px; }
.zurueck svg { width: 16px; height: 16px; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .96); display: grid; grid-template-rows: auto 1fr auto; color: #f5f5f7; opacity: 0; transition: opacity .25s; touch-action: pan-y pinch-zoom; }
.lb.offen { opacity: 1; }
.lb-kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: calc((14px) * var(--gs, 1)); color: #a1a1a6; }
.lb-flaeche { position: relative; display: grid; place-items: center; overflow: hidden; }
.lb-flaeche img { max-width: 100vw; max-height: calc(100dvh - 110px); width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .2s; }
.lb button { background: rgba(255, 255, 255, .1); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.lb button:hover { background: rgba(255, 255, 255, .2); }
.lb button svg { width: 22px; height: 22px; }
.lb-zurueck, .lb-vor { position: absolute; top: 50%; translate: 0 -50%; }
.lb-zurueck { left: 14px; } .lb-vor { right: 14px; }
.lb-fuss { text-align: center; padding: 10px; font-size: calc((13px) * var(--gs, 1)); color: #86868b; min-height: 40px; }
@media (max-width: 700px) { .lb-zurueck, .lb-vor { display: none !important; } }

/* ---------- Fließtext ---------- */
.fliess { font-size: calc((17px) * var(--gs, 1)); line-height: 1.6; }
.fliess.gross { font-size: calc((clamp(19px, 1.7vw, 22px)) * var(--gs, 1)); line-height: 1.55; }
.fliess h2 { font-size: calc((clamp(26px, 3vw, 36px)) * var(--gt, 1)); margin: 1.4em 0 .5em; }
.fliess h3, .fliess h4 { font-size: calc((21px) * var(--gt, 1)); margin: 1.3em 0 .4em; }
.fliess > :first-child { margin-top: 0; }
.fliess ul, .fliess ol { padding-left: 1.3em; margin: 0 0 1em; }
.fliess li { margin: .25em 0; }
.fliess a { overflow-wrap: anywhere; }
.fliess blockquote { margin: 1.2em 0; padding-left: 18px; border-left: 3px solid var(--linie); color: var(--text2); }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 40px 0; }
.recht { font-size: calc((15px) * var(--gs, 1)); }
.recht h2 { font-size: calc((24px) * var(--gt, 1)); } .recht h3 { font-size: calc((19px) * var(--gt, 1)); }
.recht p, .recht li { overflow-wrap: anywhere; }

/* Blöcke (Startseite-Abschnitt, Beiträge) */
.block-bild { margin: 28px 0; }
.block-bild img { border-radius: 14px; width: 100%; }
.block-bild figcaption { margin-top: 10px; font-size: calc((14px) * var(--gs, 1)); color: var(--text2); }
.block-bild figcaption strong { display: block; color: var(--text); font-size: calc((17px) * var(--gs, 1)); }
.abschnitt .block-bild { margin: 22px 0; }
.abschnitt .fliess:first-child h2 { margin-top: 0; }
.abschnitt .wrap > .fliess:first-child { font-size: calc((clamp(30px, 4vw, 52px)) * var(--gs, 1)); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.abschnitt .wrap > .fliess:first-child p { margin: 0 0 .3em; }

/* ---------- Artikel ---------- */
.artikel { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); }
.artikel-kopf h1 { font-size: calc((clamp(32px, 5vw, 56px)) * var(--gt, 1)); letter-spacing: -0.03em; line-height: 1.1; }
.artikel-kopf .meta { color: var(--text2); font-size: calc((15px) * var(--gs, 1)); margin: 16px 0 0; }
.artikel-bild { margin: 36px auto; }
.artikel-bild img { border-radius: var(--radius); width: 100%; }
.artikel-text { margin-top: 30px; }
.artikel-text .fliess { font-size: calc((19px) * var(--gs, 1)); line-height: 1.6; }
.artikel-text .block-bild:first-child { margin-top: 0; }
.schlagworte { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.schlagworte a { font-size: calc((14px) * var(--gs, 1)); background: var(--grau); color: var(--text) !important; padding: 5px 12px; border-radius: 980px; }
.nachbarn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--linie); }
.nachbarn a { display: block; color: var(--text) !important; font-weight: 600; font-size: calc((17px) * var(--gs, 1)); line-height: 1.3; }
.nachbarn a small { display: block; font-weight: 400; color: var(--text2); font-size: calc((13px) * var(--gs, 1)); margin-bottom: 4px; }
.nachbarn .rechts { text-align: right; }
@media (max-width: 640px) { .nachbarn { grid-template-columns: 1fr; } .nachbarn .rechts { text-align: left; } }
.seiten { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 48px; font-size: calc((15px) * var(--gs, 1)); color: var(--text2); }
.seiten a { display: inline-flex; align-items: center; gap: 4px; }
.seiten svg { width: 16px; height: 16px; }

/* ---------- Termine ---------- */
.termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.termin a { display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linie); color: var(--text) !important; text-decoration: none !important; }
.termin a:hover strong { text-decoration: underline; }
.termin-datum { text-align: center; }
.termin-datum b { display: block; font-size: calc((34px) * var(--gs, 1)); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.termin-datum span { font-size: calc((13px) * var(--gs, 1)); color: var(--text2); }
.termin-text strong { display: block; font-size: calc((19px) * var(--gs, 1)); letter-spacing: -0.01em; }
.termin-text span { font-size: calc((14px) * var(--gs, 1)); color: var(--text2); }
.termin-bild img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.termine.vergangen .termin a { opacity: .62; }
@media (max-width: 560px) { .termin a { grid-template-columns: 60px 1fr; } .termin-bild { display: none; } }

/* ---------- Videos ---------- */
.videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 36px 26px; }
.video { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #111; }
.video button { all: unset; cursor: pointer; display: block; position: relative; width: 100%; height: 100%; }
.video button img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.video button:hover img { transform: scale(1.03); }
.video .play { position: absolute; inset: 0; display: grid; place-items: center; }
.video .play svg { width: 76px; height: 76px; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.videos h3 { font-size: calc((19px) * var(--gt, 1)); margin-top: 14px; line-height: 1.3; }

/* ---------- Team, Logos, Produkt, Kontakt ---------- */
.personen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 48px 32px; max-width: 900px; margin: 0 auto; text-align: center; }
.person-bild { aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: var(--grau); margin-bottom: 20px; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; }
.personen h2 { font-size: calc((28px) * var(--gt, 1)); }
.personen p { color: var(--text2); margin: 6px 0 0; }
.partner { background: #fff; text-align: center; }
.partner h2 { font-size: calc((clamp(22px, 2.4vw, 30px)) * var(--gt, 1)); color: var(--text2); font-weight: 500; margin-bottom: 36px; }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 48px; }
.logos li { flex: 0 0 auto; }
.logos img { max-height: 64px; max-width: 170px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.logos li:hover img { filter: none; opacity: 1; }
.logos.gross { margin-top: 56px; gap: 36px 56px; }
.logos.gross img { max-height: 90px; max-width: 220px; }
.produkt { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.produkt h1 { font-size: calc((clamp(30px, 4vw, 48px)) * var(--gt, 1)); }
.produkt h2 { font-size: calc((21px) * var(--gt, 1)); margin: 28px 0 12px; }
.preis { font-size: calc((22px) * var(--gs, 1)); margin: 10px 0 20px; color: var(--text2); }
.produkt .justiert { --zh: 170px; }
.varianten { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.varianten li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: calc((19px) * var(--gs, 1)); }
@media (max-width: 900px) { .produkt { grid-template-columns: 1fr; } }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; } }
.sozial { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sozial a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(127, 127, 127, .14); color: inherit !important; }
.sozial svg { width: 20px; height: 20px; }
.sozial.gross a { width: 48px; height: 48px; }
.formular { display: grid; gap: 16px; background: var(--grau); padding: clamp(22px, 4vw, 40px); border-radius: 24px; }
.formular label { display: grid; gap: 6px; font-size: calc((14px) * var(--gs, 1)); font-weight: 500; color: var(--text2); }
.formular input, .formular textarea { font: inherit; font-size: calc((17px) * var(--gs, 1)); padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; color: var(--text); width: 100%; }
.formular input:focus, .formular textarea:focus { outline: none; border-color: #1d1d1f; box-shadow: 0 0 0 4px rgba(0, 0, 0, .1); }
.formular .knopf { justify-self: start; }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 12px 16px; border-radius: 12px; margin: 0; }
.meldung.ok { background: #e3f6e8; color: #0b6b2a; }
.meldung.fehler { background: #fde8e8; color: #9b1c1c; }
.karte-osm { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--grau); }
.karte-osm iframe { width: 100%; height: 100%; border: 0; display: block; }
.karte-laden { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--text); }
.karte-laden svg { width: 44px; height: 44px; }
.karte-laden span { font-size: calc((19px) * var(--gs, 1)); font-weight: 600; }
.karte-laden small { color: var(--text2); max-width: 36ch; font-size: calc((13px) * var(--gs, 1)); }
.suchfeld { display: flex; gap: 10px; margin-top: 24px; max-width: 640px; }
.suchfeld input { flex: 1; min-width: 0; font: inherit; font-size: calc((19px) * var(--gs, 1)); padding: 12px 18px; border-radius: 980px; border: 1px solid var(--linie); background: #fff; color: var(--text); }

/* ---------- Fuß ---------- */
.fuss { background: var(--grau); color: var(--text2); font-size: calc((13px) * var(--gs, 1)); padding: 44px 0 26px; }
.dunkel .fuss { background: #161617; color: #86868b; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--linie); }
.dunkel .fuss-raster { border-color: #424245; }
.fuss .marke { color: var(--text) !important; font-size: calc((18px) * var(--gs, 1)); }
.dunkel .fuss .marke { color: #f5f5f7 !important; }
.fuss .marke img { width: 64px; height: 64px; }
.fuss h2 { font-size: calc((13px) * var(--gt, 1)); font-weight: 600; color: var(--text); margin: 0 0 10px; letter-spacing: 0; }
.dunkel .fuss h2 { color: #f5f5f7; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin: 6px 0; }
.fuss a { color: inherit !important; }
.fuss-marke p { margin: 12px 0 0; }
.fuss-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 860px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 420px) { .fuss-raster { grid-template-columns: 1fr; } }

/* Handy */
@media (max-width: 560px) {
  body { font-size: calc((16px) * var(--gs, 1)); }
  .knopf { font-size: calc((16px) * var(--gs, 1)); padding: 10px 18px; }
  .band-kopf { margin-bottom: 22px; }
  .flyout a { font-size: calc((20px) * var(--gt, 1)); }
}

/* Startseiten-Abschnitt (Kalender): Fotos paarweise nebeneinander, Texte und Knöpfe über die ganze Breite */
.abschnitt .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.abschnitt .wrap > .fliess, .abschnitt .wrap > .knopf-zeile, .abschnitt .wrap > .trenner, .abschnitt .wrap > .justiert { grid-column: 1 / -1; }
@media (max-width: 640px) { .abschnitt .wrap { grid-template-columns: 1fr; } }

/* ---------- Änderungen nach Board-Durchsicht 23.10.2026 ---------- */
/* Beiträge, Cars in Detail, Vita: breit lesen statt „langer Schlauch“ */
.artikel .wrap, .artikel-kopf, .artikel-text, .nachbarn { max-width: var(--max); }
.artikel-kopf h1 { max-width: 28ch; }
.artikel-text .fliess { font-size: calc((20px) * var(--gs, 1)); line-height: 1.6; }
.artikel-text .block-bild img { border-radius: var(--radius); }
.wrap.breit-inhalt { max-width: 1320px; }
/* Kalender-Abschnitt: Foto · Text · Foto nebeneinander, danach Kalender 3 je Reihe, letzte Reihe zentriert */
.abschnitt .wrap { display: block; }
.abschnitt .wrap > .fliess:first-child { text-align: center; margin-bottom: 28px; }
.drei-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: center; margin: 0 0 32px; }
.drei-spalten .block-bild { margin: 0; }
.drei-spalten .fliess { font-size: calc((16px) * var(--gs, 1)); line-height: 1.6; text-align: justify; text-justify: inter-word; text-wrap: pretty; letter-spacing: -0.015em; }
.drei-spalten .fliess p:last-child { margin-bottom: 0; }
.drei-spalten .knopf-zeile { margin-top: 20px; justify-content: center; }
.bilder-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 0 0 32px; }
.bilder-reihe .block-bild { margin: 0; flex: 0 1 calc((100% - 56px) / 3); }
.block-bild img { box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.abschnitt .wrap > .fliess:last-child { text-align: center; max-width: 820px; margin: 8px auto 0; }
@media (max-width: 900px) { .drei-spalten { grid-template-columns: 1fr; } .bilder-reihe .block-bild { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 560px) { .bilder-reihe .block-bild { flex-basis: 100%; } }
/* Referenzen: Logos auf gleich großen weißen Kacheln – weiße Logo-Hintergründe fallen nicht mehr auf */
.logo-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.logo-kacheln li { height: 140px; overflow: hidden; background: #fff; border-radius: 16px; display: grid; place-items: center; padding: 18px 22px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.logo-kacheln li:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.logo-kacheln img { max-width: 100%; max-height: 100px; width: auto; height: auto; object-fit: contain; }
/* Karte direkt sichtbar */
.karte-osm { aspect-ratio: 4 / 3; }
/* Videos: großer Player + alle Videos des Kanals */
.player { display: grid; gap: 20px; }
.video.gross { aspect-ratio: 16 / 9; border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.video .play svg { width: 96px; height: 96px; }
.player-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.player-text h2 { font-size: calc((clamp(22px, 2.6vw, 34px)) * var(--gt, 1)); max-width: 40ch; }
.video-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 22px; }
.video-raster a { display: block; color: #f5f5f7 !important; text-decoration: none !important; }
.video-bild { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1d1d1f; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.video-bild img { width: 100%; height: 100%; object-fit: cover; }
.video-bild .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: .85; transition: opacity .3s; }
.video-bild .play svg { width: 54px; height: 54px; }
.video-raster a:hover .video-bild { transform: scale(1.04); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
.video-raster a[aria-current] .video-bild { outline: 3px solid #f5f5f7; outline-offset: 3px; }
.video-titel { display: block; margin-top: 12px; font-size: calc((17px) * var(--gt, 1)); font-weight: 600; line-height: 1.3; }
.video-meta { display: block; margin-top: 4px; font-size: calc((14px) * var(--gs, 1)); color: #a1a1a6; }
.video-bild .dauer { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-size: calc((13px) * var(--gs, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.video-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin: 40px 0 24px; }
.video-kopf .abschnitt-titel { margin: 0; }
.video-kopf .suchfeld { margin: 0; flex: 1 1 240px; min-width: 0; max-width: 520px; }
.suchfeld.dunkel input { background: #1d1d1f; border-color: #424245; color: #f5f5f7; font-size: calc((17px) * var(--gs, 1)); }
.video-seite .seiten { color: #a1a1a6; }
.video-seite .seiten a { color: #f5f5f7; }
.video-seite .leer { color: #a1a1a6; }
.player { grid-template-columns: minmax(0, 1fr); }
.video.gross { width: 100%; }
/* Knöpfe auf hellen Bändern immer dunkel – auch auf Seiten mit dunklem Grund */
.band.hellgrau .knopf:not(.hell), .band.partner .knopf:not(.hell), .formular .knopf { background: #1d1d1f; color: #fff !important; }
.band.hellgrau .knopf:not(.hell):hover { background: #3a3a3c; }
/* Termine auf dunklem Grund (Startseite) lesbar */
body.dunkel .band:not(.hellgrau):not(.partner) .termin a { color: #f5f5f7 !important; border-color: #424245; }
body.dunkel .band:not(.hellgrau):not(.partner) .termine { border-color: #424245; }
body.dunkel .band:not(.hellgrau):not(.partner) .termin-datum span, body.dunkel .band:not(.hellgrau):not(.partner) .termin-text span { color: #a1a1a6; }
/* Kontakt (Board 23.10.2026): breiter, großes Formular, Mobilnummer vorn */
.kontakt-raster { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .kontakt-raster { grid-template-columns: 1fr; } }
.kontakt-wege { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 18px; }
.kontakt-wege li { display: grid; gap: 2px; font-size: calc((19px) * var(--gs, 1)); }
.kontakt-wege span { font-size: calc((13px) * var(--gs, 1)); color: #a1a1a6; text-transform: uppercase; letter-spacing: .06em; }
.kontakt-wege a { font-size: calc((clamp(22px, 2.4vw, 30px)) * var(--gs, 1)); font-weight: 600; letter-spacing: -0.02em; text-decoration: none !important; overflow-wrap: anywhere; }
.kontakt-wege a:hover { text-decoration: underline !important; }
.formular.gross { gap: 20px; padding: clamp(24px, 4vw, 48px); border-radius: 28px; color: var(--text); }
.formular.gross h2 { margin: 0 0 4px; font-size: calc((clamp(26px, 3vw, 36px)) * var(--gt, 1)); color: var(--text); }
.formular-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
@media (max-width: 640px) { .formular-zwei { grid-template-columns: 1fr; } }
.formular.gross label { font-size: calc((15px) * var(--gs, 1)); }
.formular.gross input, .formular.gross textarea { font-size: calc((18px) * var(--gs, 1)); padding: 15px 16px; border-radius: 14px; }
.formular.gross textarea { min-height: 220px; resize: vertical; }
.knopf.gross { font-size: calc((18px) * var(--gs, 1)); padding: 15px 34px; }
/* Termin-Details von dtm.com */
.dtm-info { max-width: 1320px; margin-top: 32px; }
.dtm-foto img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 22px; }
.dtm-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 56px); margin-top: 36px; align-items: start; }
@media (max-width: 900px) { .dtm-raster { grid-template-columns: 1fr; } }
.dtm-raster h2 { font-size: calc((clamp(26px, 3vw, 38px)) * var(--gt, 1)); margin: 6px 0 14px; }
.dtm-fakten { background: var(--grau); border-radius: 22px; padding: 24px; }
.dtm-plan { width: 100%; height: auto; max-height: 260px; object-fit: contain; margin-bottom: 16px; }
.dtm-fakten dl { margin: 0 0 20px; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: calc((15px) * var(--gs, 1)); }
.dtm-fakten dt { color: var(--text2); }
.dtm-fakten dd { margin: 0; font-weight: 600; }
.dtm-zeitplan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.dtm-zeitplan h3 { font-size: calc((19px) * var(--gt, 1)); margin: 0 0 10px; }
.dtm-zeitplan ul { list-style: none; margin: 0; padding: 0; }
.dtm-zeitplan li { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: calc((15px) * var(--gs, 1)); }
.dtm-zeitplan time { color: var(--text2); font-variant-numeric: tabular-nums; }
/* Startvideo (Board 24.10.2026): Schleife ohne Ton über dem Foto; bei „Bewegung reduzieren“ bleibt das Foto */
.held-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .held-video { display: none; } }
/* Startseite (Board 24.10.2026, wie weichert.at): Logo und Menü liegen durchsichtig auf dem Startfoto/-video, das den ganzen
   Bildschirm füllt; beim Scrollen wird der Kopf schwarz und kleiner (site.js setzt .klein). Oben ein leichter Verlauf für die Lesbarkeit. */
body.start { padding-top: 0; }
body.start .kopf { transition: background .3s ease; }
body.start .kopf:not(.klein) { background: transparent; }
body.start .kopf:not(.klein):has(.burger[aria-expanded="true"]) { background: #000; }
body.start .held { min-height: 100svh; }
body.start .held::after { background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 240px), linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .75) 100%); }
/* Startseite News & Blog (Board 24.10.2026): zwei Zeilen statt einer – sechs Beiträge auf einen Blick, weiter seitlich scrollbar. */
@media (min-width: 700px) { .start .scroller-spur { grid-template-rows: repeat(2, auto); } }
/* Über 100octane.de: Faktenleiste und häufige Fragen */
.fakten { list-style: none; margin: 0 0 clamp(32px, 5vw, 56px); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.fakten li { background: #f5f5f7; border-radius: var(--radius); padding: 20px 22px; }
.fakten b { display: block; font-size: calc((clamp(26px, 3vw, 36px)) * var(--gs, 1)); letter-spacing: -0.02em; line-height: 1.1; }
.fakten span { color: #6e6e73; font-size: calc((15px) * var(--gs, 1)); }
.faq { margin-top: 18px; border-top: 1px solid #d2d2d7; }
.faq details { border-bottom: 1px solid #d2d2d7; padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: calc((19px) * var(--gs, 1)); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; font-weight: 400; color: #6e6e73; }
.faq details[open] summary::after { content: '–'; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: 10px 0 0; color: #424245; }
.faq-titel { margin-top: clamp(40px, 6vw, 72px); }