/* ============================================================
   Feine Dienstleistungen — Drohnenaufnahmen München
   Gemeinsames Stylesheet für alle Seiten
   Konzept: Nachtblau (Abendflug) + Messing (Golden Hour)
   Typografie: Space Grotesk (Display) + Inter (Fließtext)
   ============================================================ */

/* ---------- Schriften (lokal gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

/* ---------- Grundgerüst ---------- */
:root {
  /*
   * Schwarz, Weiss, Grau - und das Blau aus dem Betrachter.
   *
   * Vorher war die Seite warm: cremefarbenes Papier, Messinggold, marineblaue
   * Nachtflaechen. Das passte nicht zu dem, was sie zeigt. Wer den Betrachter
   * aufmacht, kommt in eine graue Oberflaeche mit einem einzigen blauen Akzent;
   * die Seite davor sah aus wie ein anderes Haus.
   *
   * Die Zahlen sind deshalb keine neue Erfindung, sondern die des Betrachters:
   * `--nacht` bis `--nacht-3` sind seine drei Flaechentoene, `--messing` sein
   * Akzent, `--grau-hell` seine gedaempfte Schrift. Die Namen bleiben, damit
   * die uebrigen fuenfunddreissig Stellen im Stylesheet unveraendert bleiben.
   */

  /* Flaechen - aus dem Betrachter: --bg, --bg-panel, --bg-elevated */
  --nacht: #0e1116;
  --nacht-2: #151a21;
  --nacht-3: #1b222b;

  /*
   * Der Akzent, in drei Helligkeiten - und die mittlere ist kein Zierrat:
   *
   *  --messing       auf dunklen Flaechen und als Fuellung von Schaltflaechen
   *  --messing-tief  als Schrift auf hellem Grund
   *  --messing-hell  beim Ueberfahren auf dunklem Grund
   *
   * Der Akzent des Betrachters (#4c9aff) hat auf Weiss nur 2,9:1 Kontrast und
   * waere als Text nicht lesbar. Fuer diesen Fall gibt es den tiefen Ton mit
   * 5,1:1 - ueber der Anforderung von 4,5:1 fuer Fliesstext.
   */
  --messing: #4c9aff;
  --messing-tief: #1f6fd0;
  --messing-hell: #8fc0ff;

  --papier: #f4f5f7;
  --weiss: #ffffff;
  --tinte: #171a1f;
  --grau: #5a626d;
  --grau-hell: #8b97a8;
  --linie: #dfe2e7;
  --linie-dunkel: rgba(223, 229, 238, 0.14);
  --radius: 14px;
  --radius-s: 9px;
  --schatten: 0 18px 50px -18px rgba(14, 17, 22, 0.28);
  --uebergang: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --breite: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

img, svg, iframe { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  width: min(var(--breite), 100% - 2.5rem);
  margin-inline: auto;
}

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Kicker / Sektionsköpfe ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--messing-tief);
  margin-bottom: 1rem;
}
.kicker::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--messing);
}
/*
 * Der Akzent auf dunklem Grund - hell statt tief.
 *
 * `.seiten-kopf` gehoert dazu, obwohl er die Klasse `.dunkel` nicht traegt:
 * Er ist eine dunkle Flaeche, und der tiefe Akzentton ist fuer hellen Grund
 * gemacht. Gemessen kam er dort auf 3,82:1 - unter den 4,5:1 fuer Text. Mit
 * dem hellen Ton sind es 9,9:1.
 */
.dunkel .kicker,
.seiten-kopf .kicker { color: var(--messing-hell); }

.sektion { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.sektion-kopf { max-width: 620px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.sektion-kopf h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 0.9rem; }
.sektion-kopf p { color: var(--grau); }
.dunkel .sektion-kopf p { color: var(--grau-hell); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.92rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition: background var(--uebergang), color var(--uebergang),
              border-color var(--uebergang), transform var(--uebergang);
}
.btn:active { transform: translateY(1px); }
.btn-voll {
  background: var(--messing);
  color: var(--nacht);
}
.btn-voll:hover { background: var(--messing-hell); }
.btn-rahmen {
  border-color: rgba(23, 26, 31, 0.28);
  color: var(--tinte);
}
.btn-rahmen:hover { border-color: var(--tinte); }
.dunkel .btn-rahmen,
.hero .btn-rahmen {
  border-color: var(--linie-dunkel);
  color: var(--papier);
}
.dunkel .btn-rahmen:hover,
.hero .btn-rahmen:hover { border-color: var(--messing); color: var(--messing-hell); }

/* ---------- Kopfzeile / Navigation ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 17, 22, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie-dunkel);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 76px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--papier);
}
.marke svg { width: 34px; height: 34px; flex: none; }
.marke-text {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.marke-text small {
  display: block;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--messing);
}

.nav-liste {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}
.nav-liste a {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(223, 229, 238, 0.82);
  text-decoration: none;
  border-radius: 8px;
  /* Zusammengesetzte Einträge wie "Drohnen-Viewer" sollen nicht am
     Bindestrich umbrechen — in der Leiste sieht das wie zwei Punkte aus. */
  white-space: nowrap;
  transition: color var(--uebergang), background var(--uebergang);
}
.nav-liste a:hover { color: var(--weiss); background: rgba(255, 255, 255, 0.07); }
.nav-liste a.aktiv { color: var(--messing-hell); }
.nav-liste .nav-cta {
  margin-left: 0.6rem;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background: var(--messing);
  color: var(--nacht);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
}
.nav-liste .nav-cta:hover { background: var(--messing-hell); color: var(--nacht); }

.menue-knopf {
  display: none;
  background: none;
  border: 1px solid var(--linie-dunkel);
  border-radius: 10px;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--papier);
}
.menue-knopf svg { width: 22px; height: 22px; }
.menue-knopf .icon-zu { display: none; }
.menue-knopf[aria-expanded="true"] .icon-auf { display: none; }
.menue-knopf[aria-expanded="true"] .icon-zu { display: block; }

@media (max-width: 899px) {
  .menue-knopf { display: inline-flex; }
  .hauptnav {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--nacht);
    border-bottom: 1px solid var(--linie-dunkel);
    display: none;
    padding: 0.8rem 1.25rem 1.4rem;
  }
  .hauptnav.offen { display: block; }
  .nav-liste { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav-liste a {
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-liste .nav-cta {
    margin: 0.8rem 0 0;
    justify-content: center;
    display: flex;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--nacht);
  color: var(--papier);
  overflow: hidden;
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem);
}
.hero::before {
  /* Topografische Konturlinien — Anspielung auf Orthofotos & Vermessung */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23dfe5ee' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M150 800c-90-120-110-330 20-450s360-90 470 30 130 320 10 430-410 110-500-10z'/%3E%3Cpath d='M195 760c-72-100-88-272 18-370s295-74 385 25 105 262 8 352-337 90-411-7z'/%3E%3Cpath d='M240 720c-56-80-68-215 15-292s232-58 303 20 83 206 6 277-266 71-324-5z'/%3E%3Cpath d='M285 680c-40-60-48-158 12-214s170-43 222 15 61 151 5 203-196 52-239-4z'/%3E%3Cpath d='M330 640c-25-40-29-100 8-136s108-27 141 9 39 96 3 129-125 33-152-2z'/%3E%3Ccircle cx='680' cy='190' r='110'/%3E%3Ccircle cx='680' cy='190' r='75'/%3E%3Ccircle cx='680' cy='190' r='42'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 65% at 78% 8%, rgba(76, 154, 255, 0.14), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(14, 17, 22, 0.6));
  pointer-events: none;
}
.hero-innen { position: relative; z-index: 1; max-width: 780px; }
.hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.9rem);
  font-weight: 700;
  margin-bottom: 1.4rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--messing);
}
.hero-text {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: rgba(223, 229, 238, 0.78);
  max-width: 580px;
  margin-bottom: 2.3rem;
}
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3rem; }
.hero-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie-dunkel);
}
.hero-fakten div strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  color: var(--messing-hell);
}
.hero-fakten div span { font-size: 0.88rem; color: var(--grau-hell); }

/* ---------- Leistungs-Kacheln ---------- */
.kacheln {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .kacheln { grid-template-columns: 1fr 1fr; } }

.kachel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.kachel:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten);
  border-color: rgba(76, 154, 255, 0.5);
}
.kachel-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--nacht-2), var(--nacht-3));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--messing);
}
.kachel-icon svg { width: 26px; height: 26px; }
.kachel h3 { font-size: 1.22rem; }
.kachel p { font-size: 0.98rem; color: var(--grau); flex: 1; }
.kachel-geraet {
  font-size: 0.82rem;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.05em;
  color: var(--messing-tief);
  border-top: 1px dashed var(--linie);
  padding-top: 0.85rem;
}
.kachel-geraet strong { color: var(--tinte); font-weight: 600; }

/* ---------- Dunkle Sektionen ---------- */
.dunkel {
  background: var(--nacht);
  color: var(--papier);
}
.dunkel h2, .dunkel h3 { color: var(--papier); }

/* ---------- Equipment ---------- */
.geraete {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .geraete { grid-template-columns: repeat(3, 1fr); } }

.geraet {
  background: var(--nacht-2);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
}
.geraet-nr {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--messing);
  display: block;
  margin-bottom: 1.1rem;
}
.geraet h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.geraet p { font-size: 0.94rem; color: var(--grau-hell); }
.geraet ul {
  list-style: none;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.45rem;
}
.geraet li {
  font-size: 0.88rem;
  color: rgba(223, 229, 238, 0.75);
  padding-left: 1.15rem;
  position: relative;
}
.geraet li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--messing);
}

/* ---------- Ablauf ---------- */
.ablauf {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr;
  counter-reset: schritt;
}
@media (min-width: 760px) { .ablauf { grid-template-columns: repeat(4, 1fr); } }

.schritt {
  counter-increment: schritt;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  position: relative;
}
.schritt::before {
  content: "0" counter(schritt);
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: rgba(76, 154, 255, 0.35);
  display: block;
  margin-bottom: 0.7rem;
  line-height: 1;
}
.schritt h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.schritt p { font-size: 0.92rem; color: var(--grau); }

/* ---------- Matterport-Rundgang (Zwei-Klick-Lösung) ---------- */
.tour-rahmen {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--nacht-2);
  border: 1px solid var(--linie-dunkel);
}
.tour-rahmen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tour-hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(76, 154, 255, 0.1), transparent),
    var(--nacht-2);
}
.tour-hinweis svg { width: 54px; height: 54px; color: var(--messing); }
.tour-hinweis p {
  font-size: 0.9rem;
  color: var(--grau-hell);
  max-width: 460px;
}
.tour-fussnote {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--grau-hell);
}
.tour-fussnote a { color: var(--messing-hell); }

/* ---------- Referenz / Zitat ---------- */
.zitat {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.zitat blockquote p {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinte);
}
.zitat blockquote p::before { content: "\201E"; color: var(--messing); }
.zitat blockquote p::after { content: "\201C"; color: var(--messing); }
.zitat footer {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: var(--grau);
}
.zitat footer strong { display: block; color: var(--tinte); font-weight: 600; }

/* ---------- Kontakt-CTA ---------- */
.kontakt-band {
  background: linear-gradient(150deg, var(--nacht) 0%, var(--nacht-3) 100%);
  border-radius: calc(var(--radius) + 6px);
  color: var(--papier);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 860px) {
  .kontakt-band { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.kontakt-band::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(76, 154, 255, 0.25);
  pointer-events: none;
}
.kontakt-band h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 0.9rem; }
.kontakt-band > div > p { color: var(--grau-hell); max-width: 480px; }
.kontakt-wege { display: grid; gap: 0.9rem; }
.kontakt-weg {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--papier);
  transition: border-color var(--uebergang), background var(--uebergang);
  min-height: 48px;
}
.kontakt-weg:hover { border-color: var(--messing); background: rgba(76, 154, 255, 0.10); }
.kontakt-weg svg { width: 21px; height: 21px; color: var(--messing); flex: none; }
.kontakt-weg span small { display: block; font-size: 0.78rem; color: var(--grau-hell); }

/* ---------- Preise ---------- */
.seiten-kopf {
  background: var(--nacht);
  color: var(--papier);
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
  position: relative;
  overflow: hidden;
}
.seiten-kopf::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 90% at 85% 0%, rgba(76, 154, 255, 0.12), transparent 55%);
  pointer-events: none;
}
.seiten-kopf .container { position: relative; }
.seiten-kopf h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin-bottom: 1rem; max-width: 720px; }
.seiten-kopf p { color: rgba(223, 229, 238, 0.75); max-width: 620px; }

.preis-gruppe { margin-bottom: clamp(3rem, 7vw, 4.5rem); }
.preis-gruppe-kopf { margin-bottom: 1.8rem; max-width: 680px; }
.preis-gruppe-kopf h2 { font-size: clamp(1.45rem, 2.8vw, 1.9rem); margin-bottom: 0.5rem; }
.preis-gruppe-kopf .geraet-tag {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  background: var(--nacht);
  color: var(--messing-hell);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 0.9rem;
}
.preis-gruppe-kopf p { color: var(--grau); font-size: 0.98rem; }

.preis-karten {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .preis-karten { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .preis-karten.vierer { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .preis-karten.vierer { grid-template-columns: repeat(4, 1fr); } }

.preis-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.preis-karte.hervor {
  border-color: var(--messing);
  box-shadow: 0 16px 44px -18px rgba(76, 154, 255, 0.4);
}
.beliebt {
  position: absolute;
  top: -0.85rem;
  left: 1.5rem;
  background: var(--messing);
  color: var(--nacht);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
}
.preis-karte h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.preis-karte .umfang { font-size: 0.88rem; color: var(--grau); margin-bottom: 1.2rem; }
.preis {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--nacht);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.preis small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--grau);
}
.preis-zusatz { font-size: 0.82rem; color: var(--grau); margin-bottom: 1.2rem; }
.preis-karte ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  flex: 1;
}
.preis-karte li {
  font-size: 0.92rem;
  color: var(--tinte);
  padding-left: 1.5rem;
  position: relative;
}
.preis-karte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4em;
  width: 0.85rem; height: 0.5rem;
  border-left: 2px solid var(--messing);
  border-bottom: 2px solid var(--messing);
  transform: rotate(-45deg);
}
.preis-fussnote {
  border-top: 1px dashed var(--linie);
  padding-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--grau);
}

.preis-info {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--messing);
  border-radius: var(--radius-s);
  padding: 1.3rem 1.5rem;
  font-size: 0.94rem;
  color: var(--grau);
  margin-top: 1.4rem;
}
.preis-info strong { color: var(--tinte); }

/* Anfahrts-Tabelle */
.tabelle-rahmen { overflow-x: auto; }
table.preistabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.preistabelle th, .preistabelle td {
  text-align: left;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.96rem;
}
.preistabelle th {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--nacht);
  color: var(--papier);
  border-bottom: none;
}
.preistabelle tr:last-child td { border-bottom: none; }
.preistabelle td.wert {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 780px; }
.rechtstext h2 {
  font-size: 1.35rem;
  margin: 2.6rem 0 0.9rem;
}
.rechtstext h3 { font-size: 1.08rem; margin: 1.8rem 0 0.6rem; }
.rechtstext p, .rechtstext li { color: var(--grau); font-size: 0.99rem; }
.rechtstext p { margin-bottom: 0.9rem; }
.rechtstext ul { margin: 0.4rem 0 1rem 1.3rem; }
.rechtstext li { margin-bottom: 0.35rem; }
.rechtstext a { color: var(--messing-tief); }
.rechtstext address { font-style: normal; margin-bottom: 0.9rem; color: var(--grau); }
.rechtstext strong { color: var(--tinte); }

/* ---------- Fußzeile ---------- */
.fuss {
  background: var(--nacht);
  color: var(--grau-hell);
  padding: clamp(3rem, 6vw, 4.2rem) 0 2rem;
  border-top: 1px solid var(--linie-dunkel);
}
.fuss-oben {
  display: grid;
  gap: 2.2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--linie-dunkel);
}
@media (min-width: 760px) { .fuss-oben { grid-template-columns: 1.6fr 1fr 1fr; } }
.fuss h4 {
  color: var(--papier);
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
  letter-spacing: 0.04em;
}
.fuss p { font-size: 0.9rem; max-width: 340px; }
.fuss ul { list-style: none; display: grid; gap: 0.5rem; }
.fuss a {
  color: var(--grau-hell);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color var(--uebergang);
}
.fuss a:hover { color: var(--messing-hell); }
.fuss-marke { margin-bottom: 1rem; }
.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  font-size: 0.82rem;
}

/* ---------- Vorfuehrungsvideo ---------- */
.vorfuehrung {
  /*
   * Schmaler als der Textbereich, nicht breiter.
   *
   * Ueber die volle Containerbreite gerechnet waren es 1140 x 641 Punkte - das
   * Video war damit das groesste Element der Seite und drueckte alles andere
   * an den Rand. Ein Vorfuehrvideo ist aber die Einleitung, nicht der Inhalt.
   * 820 Punkte sind etwa die Breite, in der man ein Video am Schreibtisch
   * anschaut, ohne dass es die Seite uebernimmt.
   */
  max-width: 820px;
  margin: 0 auto;
}

.vorfuehrung-video {
  display: block;
  width: 100%;
  height: auto;
  /*
   * Das Seitenverhaeltnis steht hier und nicht nur in den width/height-Angaben
   * am Element: So haelt der Browser den Platz schon frei, bevor das
   * Vorschaubild da ist. Sonst springt beim Laden alles darunter nach unten.
   */
  aspect-ratio: 16 / 9;
  background: #0e1116;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  /*
   * Ohne das ragen die abgerundeten Ecken nicht ueber das Standbild - Safari
   * zeichnet den Videoinhalt sonst rechteckig ueber den Rahmen hinaus.
   */
  overflow: hidden;
}

.vorfuehrung figcaption {
  margin-top: 0.9rem;
  color: var(--grau);
  font-size: 0.92rem;
  line-height: 1.55;
}

.dunkel .vorfuehrung figcaption { color: var(--grau-hell); }
.dunkel .vorfuehrung-video { border-color: var(--linie-dunkel); }

/* ---------- Galerie ---------- */
.galerie {
  display: grid;
  /*
   * **Eine Spalte, volle Breite.** Zwei Spalten waren der Fehler: Eine
   * Bildschirmaufnahme ist 1920 Punkte breit und steht dann in 552 - also auf
   * 29 Prozent geschrumpft. Die Beschriftungen im Bild, ohnehin die kleinste
   * Schrift der Oberflaeche, waren damit unlesbar, und genau die sind der
   * Grund, warum die Aufnahme ueberhaupt dasteht.
   *
   * Untereinander sind es 1140 Punkte. Wer es genau sehen will, klickt das
   * Bild an und bekommt die volle Aufloesung.
   */
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}

.galerie-bild {
  margin: 0;
}

/* Das ganze Bild ist der Schalter zum Vergroessern. */
.galerie-lupe {
  display: block;
  border-radius: var(--radius);
}

.galerie-lupe:hover img {
  border-color: var(--messing);
}

.galerie-bild img {
  transition: border-color var(--uebergang);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0e1116;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.galerie-bild figcaption {
  margin-top: 0.8rem;
  color: var(--grau);
  font-size: 0.9rem;
  line-height: 1.55;
}

.galerie-bild figcaption strong {
  display: block;
  color: inherit;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.dunkel .galerie-bild figcaption { color: var(--grau-hell); }
.dunkel .galerie-bild img { border-color: var(--linie-dunkel); }

/* ---------- Fokus-Sichtbarkeit & Bewegungsreduktion ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}