/* ==========================================================================
   IMMO.EXPERT — Design-System
   Immo Expert GmbH · Zeltingen-Rachtig

   Aufbau
   ------
   Diese Datei ist nach KAPITELN sortiert, nicht nach Bauteilen — weil die
   Seite so gebaut ist. Eine Apple-Produktseite ist keine Abschnittsliste mit
   Kopfzeile, sondern eine Abfolge von Momenten: ein Bild, eine Aussage, eine
   Bewegung. Jedes Kapitel macht genau einen Punkt.

   Gestaltung
   ----------
     · EINE neutrale Grotesk (Inter), sehr gross, sehr eng, halbfett.
       Die Laufweite wird mit der Groesse enger — das ist der Kern des
       Apple-Satzbildes: Schlagzeile −3,5 %, Fliesstext −1,2 %, Zahlen 0.
     · Reines Weiss, EIN Grau (#F5F5F7), reines Schwarz. Sonst nichts.
     · Runde Formen: Pillen, Kacheln mit 28 px Radius, Medien mit 22 px.
     · Bewegung: Bilder fahren beim Eintreten von 94 % auf 100 %. Kurz,
       einmalig, mit einer Kurve, die spaet abbremst.

   Marken-Orange #e73f0c ist Kundenvorgabe und ersetzt das Apple-Blau. Es
   traegt Links, Schaltflaechen, Eyebrows und Marken — sonst keine Farbe.

   Klassenvertrag
   --------------
   Die Klassennamen von style.css bleiben erhalten (.header, .nav, .hero__video,
   .prop__loc, .prop__title, .prop__price, .prop__facts, .cookie, .fab,
   [data-reveal] …), damit main.js und beide Python-Generatoren unveraendert
   weiterlaufen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schrift — lokal gehostet (DSGVO: keine Requests an Google)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --ink:      #1D1D1F;
  --ink-2:    #424245;
  --muted:    #6E6E73;    /* 5,3:1 auf Weiss */
  --muted-d:  #A1A1A6;    /* auf Schwarz: 7,1:1 */
  --paper:    #FFFFFF;
  --grau:     #F5F5F7;
  --schwarz:  #000000;
  --line:     #D2D2D7;
  --line-d:   rgba(255, 255, 255, .16);

  --accent:      #E73F0C;   /* Kundenvorgabe, fix */
  --accent-deep: #B92F08;   /* Flaeche mit weisser Schrift: 6,05:1 */
  --accent-dark: #9E2705;
  --accent-ink:  #8F2407;   /* kleine Schrift auf hell: 8,67:1 */

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  --breit:   1440px;
  --schmal:  1024px;
  --rand:    clamp(1.375rem, 4vw, 2.5rem);
  --kapitel: clamp(5.5rem, 10vw, 10rem);

  --r-kachel: 28px;
  --r-medium: 22px;
  --pill:     980px;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --kopf-h: 52px;
}

/* --------------------------------------------------------------------------
   Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Ohne diese Zeile laeuft `element.hidden = true` ins Leere, sobald eine Regel
   ein display setzt. Aus style.css uebernommen, weil der Fehler sonst
   zurueckkommt. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: rgba(231, 63, 12, .22); }
a, button, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: .85rem 1.4rem; font-size: .9rem;
}
.skip-link:focus { left: 0; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0; color: var(--ink); font-weight: 600;
  line-height: 1.06; letter-spacing: -.028em; text-wrap: balance;
  /* Deutsche Komposita sprengen schmale Schirme: „Immobilienpraesentation"
     lief bei 375 px 78 px aus der Seite. `hyphens: auto` greift, weil die
     Seiten `lang="de"` tragen; break-word ist der Notnagel dahinter. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Kurze Schlagzeilen sollen nicht getrennt werden — dort passt der Satz. */
.aussage, .hero__inner h1 { hyphens: manual; }

/* Die Schlagzeile eines Kapitels. Gross genug, dass sie den Moment traegt. */
.aussage {
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  line-height: 1.05; letter-spacing: -.034em; font-weight: 600;
}
.aussage--gross { font-size: clamp(2.75rem, 7vw, 6.4rem); letter-spacing: -.038em; }

h3 { font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.18; letter-spacing: -.022em; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.bei {
  font-size: clamp(1.2rem, 1.55vw, 1.55rem);
  line-height: 1.38; letter-spacing: -.02em;
  color: var(--muted); max-width: 42ch; text-wrap: pretty;
}
.bei--mitte { margin-inline: auto; }
.bei--klein { font-size: 1.0625rem; line-height: 1.5; }

/* Eyebrow im Apple-Sinn: kein Versal-Sperrsatz, sondern eine normale,
   halbfette Zeile in der Akzentfarbe. */
.eyebrow {
  display: block; font-size: clamp(1rem, 1.15vw, 1.25rem); font-weight: 600;
  letter-spacing: -.018em; color: var(--accent-ink); margin-bottom: .55rem;
}
.eyebrow--hell { color: #fff; opacity: .9; }

.tnum { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Kapitel-Geruest
   -------------------------------------------------------------------------- */
.bahn { width: 100%; max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.bahn--schmal { max-width: var(--schmal); }

.kapitel { padding-block: var(--kapitel); position: relative; }
.kapitel--knapp { padding-block: clamp(3.5rem, 6vw, 6rem); }
.kapitel--grau  { background: var(--grau); }
.kapitel--dunkel { background: var(--schwarz); color: var(--muted-d); }
.kapitel--dunkel h1, .kapitel--dunkel h2, .kapitel--dunkel h3,
.kapitel--dunkel .aussage { color: #F5F5F7; }
.kapitel--dunkel .bei { color: var(--muted-d); }

/* Der Kapitelkopf: mittig, Eyebrow, Aussage, ein Satz darunter. */
.kopfsatz { max-width: 860px; margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); text-align: center; }
.kopfsatz .bei { margin: 1rem auto 0; }

.mitte { text-align: center; }
.links { text-align: left; }
.randlos { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* --------------------------------------------------------------------------
   Schaltflaechen und Links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem; border: 1px solid transparent; border-radius: var(--pill);
  /* Weiss auf dem reinen Marken-Orange traegt nur 4,11:1 — unter den 4,5:1,
     die diese Groesse braucht. Die Flaeche nimmt den dunkleren Ton. */
  background: var(--accent-deep); color: #fff;
  font-family: inherit; font-size: 1.0625rem; font-weight: 500;
  letter-spacing: -.015em; text-decoration: none; cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: scale(.97); }

.btn--rand { background: transparent; color: var(--accent-ink); border-color: currentColor; }
.btn--rand:hover { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }

.btn--rand-hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--rand-hell:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
@media (max-width: 560px) { .btn-reihe .btn { flex: 1 1 100%; } }
.btn-reihe--mitte { justify-content: center; }

/* Der Apple-Textlink: Akzentfarbe, Chevron, Unterstrich erst beim Hover */
.mehr {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: 1.0625rem; letter-spacing: -.015em;
  color: var(--accent-ink); text-decoration: none;
}
.mehr::after { content: "\203A"; font-size: 1.3em; line-height: 0; transform: translateY(-.04em); }
.mehr:hover { text-decoration: underline; text-underline-offset: .22em; }
.mehr--hell { color: #fff; }

.link-reihe { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin-top: 1.5rem; }
.link-reihe--mitte { justify-content: center; }

/* --------------------------------------------------------------------------
   Kopfzeile — flach, milchig, wie Apples globale Leiste
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--kopf-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
/* Ueber dem Video liegt sie dunkel-milchig, bis gescrollt wird */
.header--ueber:not(.is-stuck) {
  background: rgba(22, 22, 23, .5);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.header__inner {
  width: 100%; max-width: var(--breit); margin-inline: auto;
  padding-inline: var(--rand); display: flex; align-items: center; gap: 1.5rem;
}

.brand { margin-right: auto; display: block; }
.brand img { height: 30px; width: auto; }
.header--ueber:not(.is-stuck) .brand img { filter: brightness(0) invert(1); }

.nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: block; padding: .5rem .78rem; font-size: .8125rem; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover { opacity: .62; }
.nav__link[aria-current="page"] { color: var(--accent-ink); }
.header--ueber:not(.is-stuck) .nav__link { color: #F5F5F7; }
.header--ueber:not(.is-stuck) .nav__link[aria-current="page"] { color: #fff; font-weight: 500; }

.nav__phone {
  margin-left: .5rem; padding: .42rem 1rem; border-radius: var(--pill);
  background: var(--accent-deep); color: #fff;
  font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums;
  text-decoration: none; white-space: nowrap;
  transition: background .28s var(--ease);
}
.nav__phone:hover { background: var(--accent-dark); }

.nav__sub {
  position: absolute; top: calc(100% + 6px); left: -.4rem; min-width: 250px;
  list-style: none; margin: 0; padding: .5rem;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-medium);
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .22);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__item:hover > .nav__sub, .nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .58rem .85rem; border-radius: 10px; font-size: .95rem;
  color: var(--ink); text-decoration: none; transition: background .2s var(--ease);
}
.nav__sub a:hover { background: rgba(0, 0, 0, .05); }
.nav__sub .count { font-variant-numeric: tabular-nums; color: var(--muted); }

.burger {
  display: none; width: 34px; height: 34px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease), opacity .25s; }
.header--ueber:not(.is-stuck) .burger span { background: #fff; }
body.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
body.nav-open .header--ueber .burger span { background: var(--ink); }

@media (max-width: 1080px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: var(--kopf-h) 0 0 0;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 1.5rem var(--rand) 3rem; overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item + .nav__item { border-top: 1px solid var(--line); }
  .nav__link, .header--ueber:not(.is-stuck) .nav__link {
    color: var(--ink); padding: 1rem .2rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -.024em;
  }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none; padding: 0 0 .8rem .2rem; display: none;
  }
  .nav__item.is-open > .nav__sub { display: block; }
  .nav__sub a { font-size: 1.05rem; padding: .55rem .2rem; }
  .nav__phone { margin: 1.6rem 0 0; display: inline-flex; font-size: 1rem; padding: .75rem 1.5rem; }
}

/* ==========================================================================
   KAPITEL 0 — Hero
   ========================================================================== */
.hero {
  position: relative; min-height: min(100svh, 940px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: var(--schwarz);
}
.hero__bg { position: absolute; inset: 0; background: var(--schwarz); }
.hero__bg img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Das Standbild liegt fest unter dem Video. Das Video blendet erst auf, wenn
   es laeuft (main.js setzt .is-laeuft beim playing-Ereignis) — sonst zeigt der
   Browser bei blockiertem Autoplay das erste Bild, und das ist schwarz. */
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-laeuft { opacity: 1; }

.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.40) 0%, rgba(0,0,0,.06) 24%, rgba(0,0,0,0) 44%),
    linear-gradient(to top,    rgba(0,0,0,.44) 0%, rgba(0,0,0,0) 56%),
    rgba(0, 0, 0, .28);
}

.hero__inner {
  position: relative; width: 100%; max-width: 940px; margin-inline: auto;
  padding: calc(var(--kopf-h) + 2rem) var(--rand) 2rem; color: #fff;
}
.hero__inner .aussage { color: #fff; }
.hero__bei {
  margin: 1.1rem auto 0; font-size: clamp(1.2rem, 1.55vw, 1.55rem);
  line-height: 1.38; letter-spacing: -.02em; color: rgba(255,255,255,.94); max-width: 30ch;
}

/* Scroll-Hinweis: eine Linie, die langsam durchlaeuft */
.hero__cue {
  position: absolute; left: 50%; bottom: 2.6rem; transform: translateX(-50%);
  width: 2px; height: 82px; border-radius: 2px;
  overflow: hidden; background: rgba(255,255,255,.28);
}
.hero__cue::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: translateY(-100%); animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); }
}
@media (max-width: 680px) { .hero__cue { display: none; } }

/* ==========================================================================
   KAPITEL 1 — Im Angebot (Objektgalerie)
   Apple zeigt Produkte in einer Galerie, die auf schmalen Schirmen seitlich
   schnappt. Ab 1100 px wird daraus ein Raster.
   ========================================================================== */
.galerie { position: relative; }

.props {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 400px);
  gap: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  padding-inline: var(--rand); padding-block: .5rem 1.5rem;
  margin-inline: calc(var(--rand) * -1);
  scrollbar-width: none;
  /* In der Schnappgalerie sieht man eine Kachel — dort darf jede ihrer eigenen
     Hoehe folgen. Sonst zieht das auto-Margin der Objektnummer eine Luecke
     mitten in die kurze Kachel. Im Raster ab 1100 px wird wieder gestreckt,
     damit die Preise fluchten. */
  align-items: start;
}
.props::-webkit-scrollbar { display: none; }
.prop { scroll-snap-align: start; }

@media (min-width: 1100px) {
  .props {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-columns: auto; overflow: visible;
    padding-inline: 0; margin-inline: 0; gap: 1.5rem;
    align-items: stretch;
  }
}

/* Blaetterknoepfe — nur sichtbar, wenn die Galerie wirklich ueberlaeuft.
   szenen.js setzt .is-scrollbar. */
.galerie__nav { display: none; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.galerie.is-scrollbar .galerie__nav { display: flex; }
.galerie__knopf {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .06); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.galerie__knopf:hover { background: rgba(0, 0, 0, .12); }
.galerie__knopf[disabled] { opacity: .3; cursor: default; }
.galerie__knopf svg { width: 16px; height: 16px; }

.prop {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--paper); border-radius: var(--r-kachel); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.kapitel--grau .prop { background: var(--paper); }
.prop:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -18px rgba(0,0,0,.18); }

.prop__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grau); }
.prop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.prop:hover .prop__media img { transform: scale(1.04); }

.prop__badge {
  position: absolute; top: .9rem; left: .9rem; padding: .3rem .75rem;
  border-radius: var(--pill); background: rgba(0,0,0,.58);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; font-size: .75rem; font-weight: 500;
}
.prop__badge--res  { background: var(--accent-deep); }
.prop__badge--sold { background: rgba(110,110,115,.85); }

.prop__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.prop__body p { margin: 0; }
.prop__loc { font-size: .875rem; font-weight: 500; color: var(--accent-ink); margin-bottom: .45rem; }
.prop__title { font-size: 1.28rem; font-weight: 600; line-height: 1.2; letter-spacing: -.024em; color: var(--ink); margin: 0; }
/* Spezifitaet bewusst erhoeht: `.prop__body p { margin: 0 }` schlaegt sonst das
   auto-Margin, und die Preise fluchten nicht mehr. */
.prop__body .prop__nr { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: .9rem; }
.prop__price { font-size: 1.55rem; font-weight: 600; letter-spacing: -.028em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: .35rem; }
.prop__facts {
  display: flex; flex-wrap: wrap; gap: .4rem 1.3rem;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.prop__facts span { display: inline-flex; align-items: center; gap: .4rem; }
.prop__facts svg { width: 15px; height: 15px; flex: none; opacity: .5; }

/* ==========================================================================
   KAPITEL 2 — Der Preis (Wertermittlung)
   ========================================================================== */
/* Ein grosses Bild, das beim Eintreten auffaehrt. szenen.js setzt .is-da. */
.buehne { border-radius: var(--r-kachel); overflow: hidden; background: var(--grau); }
.buehne img { width: 100%; height: 100%; object-fit: cover; }
.buehne--breit { aspect-ratio: 16 / 9; }
.buehne--hoch  { aspect-ratio: 4 / 5; }

[data-szene] { opacity: 0; transform: scale(.94); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
[data-szene].is-da { opacity: 1; transform: none; }

/* Drei Punkte nebeneinander, ohne Kasten */
.punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.punkt h3 { margin-bottom: .55rem; }
.punkt p { color: var(--muted); font-size: 1rem; margin: 0; }
.punkt__marke {
  display: block; width: 28px; height: 28px; color: var(--accent); margin-bottom: 1rem;
}
.punkt__marke svg { width: 100%; height: 100%; stroke-width: 1.5; }

/* ==========================================================================
   KAPITEL 3 — 360°, Vollbild-Moment
   ========================================================================== */
.moment { position: relative; min-height: min(86svh, 780px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--schwarz); }
.moment__bg { position: absolute; inset: 0; }
.moment__bg img { width: 100%; height: 100%; object-fit: cover; }
.moment__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.35) 100%);
}
.moment__inner { position: relative; max-width: 780px; padding: clamp(3rem,6vw,5rem) var(--rand); color: #fff; }
.moment__inner .aussage { color: #fff; }
.moment__inner .bei { color: rgba(255,255,255,.9); margin: 1.1rem auto 0; }

/* ==========================================================================
   KAPITEL 4 — Zweispalter Text/Bild
   ========================================================================== */
.zwei { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items: center; }
.zwei--bildlinks .zwei__bild { order: -1; }
@media (max-width: 900px) {
  .zwei { grid-template-columns: 1fr; }
  .zwei--bildlinks .zwei__bild { order: 0; }
}

.liste { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.liste li { position: relative; padding-left: 1.75rem; margin-bottom: .8rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.liste li::before { content: ""; position: absolute; left: 0; top: .56em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-d); }
.kapitel--dunkel .liste li::before { background: rgba(255,255,255,.45); }
.kapitel--dunkel .liste li { color: var(--muted-d); }

/* ==========================================================================
   KAPITEL 5 — Der Mensch
   ========================================================================== */
.mensch { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem,5vw,5rem); align-items: center; }
@media (max-width: 900px) { .mensch { grid-template-columns: 1fr; } }
.mensch__bild { aspect-ratio: 4/5; overflow: hidden; background: var(--grau); border-radius: var(--r-kachel); }
.mensch__bild img { width: 100%; height: 100%; object-fit: cover; }
.mensch__name { margin-top: 1.1rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.022em; color: var(--ink); }
.kapitel--dunkel .mensch__name { color: #F5F5F7; }
.mensch__rolle { font-size: .9375rem; color: var(--muted); margin-top: .15rem; }
.kapitel--dunkel .mensch__rolle { color: var(--muted-d); }

.zitat { font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 600; line-height: 1.24; letter-spacing: -.03em; color: var(--ink); max-width: 22ch; text-wrap: balance; }
.kapitel--dunkel .zitat { color: #F5F5F7; }

/* ==========================================================================
   KAPITEL 6 — In Zahlen
   ========================================================================== */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem); }
/* Auf dem Telefon passen keine 180px-Spalten mehr nebeneinander — der Browser
   stellt dann alle vier Zahlen untereinander, und aus einem Band wird eine
   Bildschirmlaenge. Zwei mal zwei bleibt ein Band. */
@media (max-width: 640px) {
  .zahlen { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1rem; }
}
.zahl { text-align: center; }
.zahl__wert {
  display: block; font-size: clamp(3rem, 5vw, 4.6rem); font-weight: 600;
  line-height: 1; letter-spacing: -.042em; color: #F5F5F7;
  font-variant-numeric: tabular-nums; margin-bottom: .6rem;
}
.zahl__text { display: block; font-size: .9375rem; color: var(--muted-d); line-height: 1.45; letter-spacing: -.012em; }

/* ==========================================================================
   KAPITEL 7 — Orte
   ========================================================================== */
.orte { columns: 4; column-gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
@media (max-width: 1000px) { .orte { columns: 3; } }
@media (max-width: 700px)  { .orte { columns: 2; } }
/* Erst unter 320px eine Spalte. Bei 390px — der haeufigsten Telefonbreite —
   ergaben 49 Orte untereinander sonst 2400px reines Scrollen. */
@media (max-width: 320px)  { .orte { columns: 1; } }
@media (max-width: 700px)  { .orte a { padding: .45rem .5rem; font-size: .875rem; } }
.orte li { break-inside: avoid; }
/* Ort und Entfernung stehen zusammen IM Link. Lagen sie nebeneinander —
   Link als Block, km als Geschwister —, rutschte die Kilometerangabe in die
   naechste Zeile und stand um den Innenabstand des Links versetzt da. Ausserdem
   war sie nicht anklickbar, obwohl sie wie ein Teil der Zeile aussah. */
.orte a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem .7rem; border-radius: 10px; font-size: .9375rem;
  color: var(--ink-2); text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.orte__ort { min-width: 0; overflow-wrap: anywhere; }
.orte__km  {
  margin-left: auto; flex: none;
  font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease);
}
.orte a:hover .orte__km { color: var(--accent-ink); }
.orte a:hover { background: rgba(0,0,0,.05); color: var(--accent-ink); }

/* ==========================================================================
   KAPITEL 8 — Gut zu wissen (Apples „Technische Daten")
   Zeilen mit Label links, Werten rechts, getrennt durch Haarlinien.
   ========================================================================== */
.daten { border-top: 1px solid var(--line); }
.daten__zeile {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: .5rem clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.4rem, 2.2vw, 2rem) 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .daten__zeile { grid-template-columns: 1fr; } }
.daten__label { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.daten__wert { color: var(--muted); font-size: 1.0625rem; }
.daten__wert ul { list-style: none; margin: 0; padding: 0; }
.daten__wert li { margin-bottom: .45rem; }
.daten__wert li:last-child { margin-bottom: 0; }
.daten__wert strong { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Fusszeile
   ========================================================================== */
.footer { background: var(--grau); color: var(--muted); padding-block: 2.6rem 2rem; font-size: .75rem; line-height: 1.6; }
.footer .bahn { max-width: var(--breit); }
.footer__grid {
  display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  gap: 1.75rem 2rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo { height: 26px; width: auto; margin-bottom: 1rem; opacity: .75; }
.footer p { font-size: .75rem; max-width: 34ch; }
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin-bottom: .55rem; }
.footer__links a { color: var(--muted); text-decoration: none; transition: color .25s var(--ease); }
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.footer address { font-size: .75rem; line-height: 1.9; font-style: normal; }
.footer address a { color: var(--muted); text-decoration: none; }
.footer address a:hover { color: var(--ink); text-decoration: underline; }
.socials { display: flex; gap: .6rem; margin-top: 1.2rem; }
.socials a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); transition: color .25s var(--ease), background .25s var(--ease); }
.socials a:hover { color: var(--ink); background: rgba(0,0,0,.06); }
.socials svg { width: 16px; height: 16px; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.6rem; padding-top: 1.4rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.footer__legal a { color: var(--muted); text-decoration: none; }
.footer__legal a:hover { color: var(--ink); text-decoration: underline; }
.gebaut-von { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); text-decoration: none; }
.gebaut-von img { width: 18px; height: 18px; }
.gebaut-von:hover { color: var(--ink); }

/* ==========================================================================
   Schwebender Anruf-Knopf + Cookie-Hinweis
   ========================================================================== */
.fab {
  position: fixed;
  right: calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-right));
  bottom: calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom));
  z-index: 90; display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.3rem; border-radius: var(--pill);
  background: rgba(29,29,31,.8);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: #fff; text-decoration: none; font-size: .9375rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s, background .3s;
}
.fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab:hover { background: var(--accent-deep); }
.fab svg { width: 17px; height: 17px; }

.cookie {
  position: fixed; inset: auto 0 0 0; z-index: 120;
  background: rgba(245,245,247,.95);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line); color: var(--muted);
  padding-block: 1.1rem; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .55s var(--ease);
}
.cookie.is-open { transform: none; }
.cookie__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cookie h4 { color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: -.018em; margin: 0 0 .3rem; }
.cookie p { font-size: .8125rem; max-width: 70ch; margin: 0; line-height: 1.5; }
.cookie a { color: var(--accent-ink); }
.cookie .btn-reihe { margin-top: 0; }
.cookie .btn { padding: .6rem 1.3rem; font-size: .9375rem; }

/* ==========================================================================
   Bewegung
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
/* Ohne JavaScript setzt niemand .is-in — dann bliebe die gesamte Seite
   unsichtbar, denn jedes Kapitel traegt data-reveal. In dem Fall gibt es
   eben keine Bewegung, aber eine Seite. */
@media (scripting: none) {
  [data-reveal], [data-szene] { opacity: 1; transform: none; }
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], [data-szene] { opacity: 1; transform: none; }
  .props { scroll-snap-type: none; }
}

/* ==========================================================================
   UNTERSEITEN-BAUTEILE
   --------------------------------------------------------------------------
   Die Unterseiten sind in derselben Sprache gebaut wie die Startseite:
   Kapitel, grosse Typo, runde Kacheln, Bild als Traeger. Sie benutzen
   deshalb dieselben Namen (.bahn, .kapitel, .aussage, .bei) plus die
   Bauteile hier.

   Wichtig: diese Ebene ist nach der TATSAECHLICHEN Markup-Struktur der
   Seiten gebaut, nicht geraten. Ein frueherer Versuch hat Platzhalter
   erfunden und dabei doppelte Bilder und unlesbaren Text produziert.
   ========================================================================== */

/* -------- Seitenkopf: dunkles Bild, grosse Zeile ---------------------------
   Der Gegenpart zum Video-Hero der Startseite. Kuerzer, aber gleiche
   Anmutung: Bild bis an die Raender, Verlauf, weisse Schrift. */
.seitenkopf {
  position: relative;
  min-height: min(62vh, 620px);
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--schwarz);
}
.seitenkopf__bild { position: absolute; inset: 0; }
.seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf__bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.44) 0%, rgba(0,0,0,.10) 26%, rgba(0,0,0,0) 48%),
    linear-gradient(to top,    rgba(0,0,0,.78) 0%, rgba(0,0,0,.24) 58%, rgba(0,0,0,.10) 100%),
    rgba(0, 0, 0, .26);
}
.seitenkopf__inner {
  position: relative; width: 100%; max-width: var(--breit);
  margin-inline: auto; padding: calc(var(--kopf-h) + 3rem) var(--rand) clamp(2.5rem, 5vw, 4rem);
  color: #fff;
}
.seitenkopf h1 {
  color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.09; letter-spacing: -.034em; font-weight: 600; hyphens: manual;
}
.seitenkopf__bei {
  margin-top: 1rem; font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.4; letter-spacing: -.02em; color: rgba(255,255,255,.9);
  max-width: 46ch; text-wrap: pretty;
}

/* Brotkrumen — klein, hell, ueber der Zeile */
.krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  font-size: .875rem; color: rgba(255,255,255,.72);
}
.krumen li + li::before { content: "\203A"; margin-right: .4rem; opacity: .6; }
.krumen a { color: inherit; text-decoration: none; }
.krumen a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* -------- Aufklapper -------------------------------------------------------
   main.js animiert die Hoehe des Panels und setzt .is-offen am Item. */
.akk { border-top: 1px solid var(--line); }
.akk__item { border-bottom: 1px solid var(--line); }
.akk__item h3 { margin: 0; font-size: inherit; letter-spacing: normal; }
.akk__knopf {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: clamp(1.15rem, 1.9vw, 1.5rem) 0;
  border: 0; background: transparent; font-family: inherit;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 600;
  letter-spacing: -.022em; color: var(--ink); text-align: left; cursor: pointer;
  transition: color .25s var(--ease);
}
.akk__knopf:hover { color: var(--accent-ink); }
.akk__zeichen { position: relative; width: 15px; height: 15px; flex: none; }
.akk__zeichen::before, .akk__zeichen::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 15px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.akk__zeichen::after { transform: rotate(90deg); }
.akk__item.is-offen .akk__zeichen::after { transform: none; opacity: 0; }
.akk__panel { overflow: hidden; height: 0; }
.akk__text { padding-bottom: clamp(1.1rem, 1.8vw, 1.6rem); color: var(--muted); max-width: 72ch; }
.akk__text p { margin-bottom: .9em; }
.akk__text ul { margin: .6rem 0 1em 1.1rem; padding: 0; }
.akk__text li { margin-bottom: .4rem; }

/* -------- Datenblatt (Objekt-Eckdaten) ------------------------------------- */
.datenblatt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem); margin: 0; border-top: 1px solid var(--line);
}
.datenblatt > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.datenblatt dt { color: var(--muted); font-size: .9375rem; }
.datenblatt dd {
  margin: 0; font-weight: 500; font-size: .9375rem; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* -------- Objektbühne: grosses Bild + Miniaturen --------------------------- */
.buehne__haupt {
  border-radius: var(--r-kachel); overflow: hidden; background: var(--grau);
  cursor: zoom-in; aspect-ratio: 3 / 2;
}
.buehne__haupt img { width: 100%; height: 100%; object-fit: cover; }
.buehne__mini {
  display: flex; gap: .6rem; margin-top: .75rem;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.buehne__mini::-webkit-scrollbar { display: none; }
.buehne__mini button {
  flex: none; width: 88px; aspect-ratio: 3/2; padding: 0; border: 0;
  border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--grau);
  opacity: .5; outline: 2px solid transparent; outline-offset: 2px;
  transition: opacity .3s var(--ease), outline-color .3s var(--ease);
}
.buehne__mini img { width: 100%; height: 100%; object-fit: cover; }
.buehne__mini button:hover { opacity: .8; }
.buehne__mini button.is-aktiv { opacity: 1; outline-color: var(--accent); }

.preis {
  font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 600; letter-spacing: -.034em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hinweis {
  background: var(--grau); border-radius: var(--r-medium);
  padding: 1.1rem 1.4rem; font-size: .9375rem; color: var(--muted); margin-top: 1.5rem;
}
.kapitel--grau .hinweis { background: #fff; }
.hinweis a { color: var(--accent-ink); }

/* -------- Grossansicht (main.js baut sie zur Laufzeit) --------------------- */
.lupe { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0,0,0,.94); }
body.lupe-offen { overflow: hidden; }
.lupe img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--r-medium); }
.lupe__zu, .lupe__pfeil {
  position: absolute; display: grid; place-items: center; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer; font-size: 1.6rem; line-height: 1;
  transition: background .25s var(--ease);
}
.lupe__zu:hover, .lupe__pfeil:hover { background: rgba(255,255,255,.28); }
.lupe__zu { top: 1.2rem; right: 1.2rem; }
.lupe__pfeil--links { left: 1.2rem; }
.lupe__pfeil--rechts { right: 1.2rem; }
.lupe__pfeil svg { width: 22px; height: 22px; }
.lupe__zaehler {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-size: .875rem; font-variant-numeric: tabular-nums;
}

/* -------- Referenzen ------------------------------------------------------- */
.referenzen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: clamp(1.25rem,2vw,1.75rem); }
.referenz { background: var(--grau); border-radius: var(--r-kachel); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.kapitel--grau .referenz { background: #fff; }
.referenz:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -18px rgba(0,0,0,.16); }
.referenz__bild { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--grau); }
.referenz__bild img { width: 100%; height: 100%; object-fit: cover; }
.referenz__marke {
  position: absolute; top: .8rem; left: .8rem; padding: .28rem .7rem;
  border-radius: var(--pill); background: rgba(0,0,0,.58);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; font-size: .72rem; font-weight: 500;
}
.referenz__text { padding: 1.1rem 1.25rem 1.4rem; }
.referenz__ort { font-size: .8125rem; font-weight: 500; color: var(--accent-ink); margin: 0 0 .35rem; }
.referenz__titel { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); margin: 0; }

/* -------- Filterleiste ----------------------------------------------------- */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.filter button {
  padding: .5rem 1.15rem; border: 0; border-radius: var(--pill);
  background: rgba(0,0,0,.06); color: var(--ink);
  font-family: inherit; font-size: .9375rem; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.filter button:hover { background: rgba(0,0,0,.12); }
.filter button.is-aktiv { background: var(--accent-deep); color: #fff; }
.filter-hinweis { text-align: center; color: var(--muted); margin-top: 1.5rem; }

/* -------- Formular --------------------------------------------------------- */
.formular { max-width: 680px; }
.feldreihe { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.feldreihe--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 640px) { .feldreihe, .feldreihe--3 { grid-template-columns: 1fr; } }

.feld { margin-bottom: 1.1rem; }
.feld label { display: block; font-size: .9375rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 1rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(231,63,12,.18);
}
.feld.is-fehler input, .feld.is-fehler select, .feld.is-fehler textarea { border-color: var(--accent-deep); }
.pflicht { color: var(--accent-ink); }

.haken { display: flex; align-items: flex-start; gap: .7rem; font-size: .9375rem; color: var(--muted); margin-bottom: 1.2rem; }
.haken input { width: 18px; height: 18px; flex: none; margin-top: .15rem; accent-color: var(--accent-deep); }
.haken a { color: var(--accent-ink); }

/* Falle fuer Formular-Roboter — unsichtbar, aber nicht display:none */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formular__fussnote { font-size: .8125rem; color: var(--muted); margin-top: 1rem; }
/* Der Name ist von main.js vorgegeben — nicht umbenennen, sonst bleibt die
   Rueckmeldung nach dem Absenden stumm. */
.form__status { margin-top: 1rem; font-size: .9375rem; color: #157347; }
.form__status--fehler { color: var(--accent-deep); }

/* -------- Kontaktdaten als Liste ------------------------------------------- */
.kontaktliste { list-style: none; margin: 0; padding: 0; }
.kontaktliste li { display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.kontaktliste li:first-child { border-top: 1px solid var(--line); }
.kontaktliste svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: .15rem; }
.kontaktliste b { display: block; font-size: .8125rem; font-weight: 400; color: var(--muted); }
.kontaktliste span { display: block; font-weight: 500; color: var(--ink); }
.kontaktliste a { color: inherit; text-decoration: none; }
.kontaktliste a:hover { color: var(--accent-ink); }

/* -------- 360°-Rundgang ----------------------------------------------------
   main.js schaltet .is-live (Rundgang laeuft) und .is-locked (Radschutz). */
.tour { position: relative; border-radius: var(--r-kachel); overflow: hidden; background: var(--schwarz); aspect-ratio: 16/9; }
.tour--flach { aspect-ratio: 16/10; }
.tour__still { position: absolute; inset: 0; background: center/cover no-repeat; }
.tour__still::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.tour__tor {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: var(--rand); color: #fff;
}
.tour.is-live .tour__tor { display: none; }
.tour__tor h1, .tour__tor h2 { color: #fff; font-size: clamp(1.8rem,3.4vw,3rem); letter-spacing: -.032em; }
.tour__tor p { color: rgba(255,255,255,.9); max-width: 46ch; margin: 0; }
.tour__klein { font-size: .8125rem; color: rgba(255,255,255,.7); max-width: 48ch; }
/* Scroll-Schutz. Die Ebene liegt ueber dem Rundgang und faengt das Mausrad
   ab, damit ein Scrollen ueber der Karte die SEITE bewegt und nicht die
   Tour. Ein Klick uebergibt die Steuerung, `pointerleave` stellt sie wieder
   scharf.

   Sie ist standardmaessig AKTIV. Vorher war die Regel umgedreht — der Schutz
   erschien erst mit .is-locked, und das wurde erst beim Verlassen gesetzt.
   Wer den Rundgang startete, konnte deshalb gar nicht mehr an der Seite
   vorbeiscrollen. */
.tour__schutz { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.tour.is-frei .tour__schutz { display: none; }
.tour:not(.is-live) .tour__schutz { display: none; }
.tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Hinweis auf dem Schutz: ohne ihn klickt niemand. */
.tour.is-live .tour__schutz::after {
  content: "Zum Steuern einfach ins Bild klicken"; position: absolute;
  left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  background: rgba(0,0,0,.62); color: #fff; font-size: .8125rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: var(--pill); white-space: nowrap;
  backdrop-filter: blur(6px); pointer-events: none;
}
/* Links halten, damit der Hinweis nicht unter dem Schliessen-Knopf liegt. */
@media (min-width: 560px) {
  .tour.is-live .tour__schutz::after { left: 1.1rem; transform: none; }
}
/* In der kleinen Kachel (Vorher/Nachher) ist unten kein Platz fuer beides.
   Der Hinweis stand dort in derselben Zeile wie Vollbild und Schliessen,
   schob die Knoepfe aus dem Bild und machte den Ausweg unerreichbar — man
   kam aus dem zweiten Rundgang nicht mehr heraus. Hier wandert er nach oben
   und wird kuerzer. */
.tour--klein.is-live .tour__schutz::after {
  content: "Ins Bild klicken zum Steuern";
  left: .85rem; right: auto; top: .85rem; bottom: auto; transform: none;
  font-size: .75rem; padding: .4rem .8rem;
}

/* Zurueck zum Standbild — der Ausweg aus dem Rundgang. */
.tour__leiste {
  position: absolute; bottom: .85rem; right: .85rem; z-index: 4;
  display: none; align-items: center; gap: .5rem; flex-wrap: wrap;
  justify-content: flex-end; max-width: calc(100% - 1.7rem);
}
/* Enge Kachel: kleinere Knoepfe, damit beide nebeneinander hineinpassen. */
.tour--klein .tour__zu, .tour--klein .tour__voll {
  font-size: .75rem; padding: .42rem .75rem; gap: .3rem;
}
.tour.is-live .tour__leiste, .tourhero.is-live .tour__leiste { display: flex; }

.tour__zu {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .8125rem; font-weight: 550;
  padding: .5rem .95rem; border-radius: var(--pill); cursor: pointer;
  border: 0; background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(6px);
  transition: background .25s var(--ease);
}
.tour__zu:hover { background: rgba(0,0,0,.82); }
.tour__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9375rem; color: rgba(255,255,255,.82); }

/* -------- Vorher/Nachher-Schieber ------------------------------------------ */
.schieber { position: relative; border-radius: var(--r-kachel); overflow: hidden; background: var(--grau); }
.schieber__platzhalter { display: grid; place-items: center; min-height: 300px; padding: clamp(1.5rem,4vw,3rem); text-align: center; color: var(--muted); }
.schieber__platzhalter p { max-width: 52ch; margin: 0; }

/* -------- Siegel ----------------------------------------------------------- */
.siegel { display: flex; flex-wrap: wrap; gap: clamp(1.5rem,3vw,2.5rem); align-items: center; justify-content: center; }
.siegel img { height: clamp(88px, 9vw, 120px); width: auto; }
.siegel figure { margin: 0; text-align: center; }
.siegel figcaption { font-size: .8125rem; color: var(--muted); margin-top: .7rem; max-width: 22ch; }

/* -------- Ortsverzeichnis nach Landschaft ---------------------------------- */
.ortgruppe + .ortgruppe { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.ortgruppe h3 { margin-bottom: 1.2rem; }

/* -------- Punkte mit laufender Nummer (Ablauf-Kapitel) --------------------- */
.punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: clamp(2rem,3.5vw,3rem); }
/* Vier Schritte brachen bei mittlerer Breite in 3 + 1 um — die vierte Karte
   stand allein in einer zweiten Zeile neben zwei Luecken. Zwei mal zwei ist
   dort ruhiger; ab 1040px passen alle vier nebeneinander. */
@media (min-width: 620px) and (max-width: 1039px) {
  .punkte--vier { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .punkte--vier { grid-template-columns: repeat(4, 1fr); }
}
.punkt__nr {
  display: block; font-size: .8125rem; font-weight: 600; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; margin-bottom: .9rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.punkt h3 { margin-bottom: .5rem; }
.punkt p { color: var(--muted); font-size: 1rem; margin: 0; }
.punkt__marke { display: block; width: 28px; height: 28px; color: var(--accent); margin-bottom: 1rem; }
.punkt__marke svg { width: 100%; height: 100%; stroke-width: 1.5; }

/* -------- Kacheln mit Symbol ---------------------------------------------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px,1fr)); gap: clamp(1rem,1.6vw,1.5rem); }
/* Sechs Kacheln sollen zwei volle Reihen bilden. Ohne diese Regel legt der
   Browser bei 1440px vier in die erste Reihe und zwei in die zweite — das
   sieht aus wie ein Fehler, nicht wie ein Raster. */
@media (min-width: 1000px) { .kacheln--3 { grid-template-columns: repeat(3, 1fr); } }
.kachel {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--grau); border-radius: var(--r-kachel);
  padding: clamp(1.75rem,2.4vw,2.25rem);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.kapitel--grau .kachel { background: #fff; }
.kachel:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -18px rgba(0,0,0,.16); }
.kachel__symbol { display: block; width: 34px; height: 34px; color: var(--accent); margin-bottom: 1.3rem; }
.kachel__symbol svg { width: 100%; height: 100%; stroke-width: 1.4; }
.kachel h3 { margin-bottom: .6rem; hyphens: manual; }
.kachel p { color: var(--muted); font-size: .9375rem; margin: 0 0 1.1rem; }
.kachel .mehr { margin-top: auto; pointer-events: none; }
.kachel:hover .mehr { text-decoration: underline; text-underline-offset: .22em; }

/* Vier Felder in einer Reihe (Objektdaten im Formular) */
.feldreihe--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 860px) { .feldreihe--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .feldreihe--4 { grid-template-columns: 1fr; } }

/* Brotkrumen auf hellem Grund (Seiten ohne Bildkopf) */
.krumen--dunkel { color: var(--muted); margin-bottom: 1.8rem; }
.krumen--dunkel a:hover { color: var(--accent-ink); }

/* -------- Fliesstext-Seiten (Impressum, Datenschutz) ---------------------- */
.prosa h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.028em; margin: 2.5rem 0 .9rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin: 1.8rem 0 .6rem; }
.prosa p, .prosa li { color: var(--muted); }
.prosa ul, .prosa ol { margin: .8rem 0 1.2rem 1.2rem; padding: 0; }
.prosa li { margin-bottom: .45rem; }
.prosa a { color: var(--accent-ink); }
.prosa address { font-style: normal; color: var(--muted); line-height: 1.9; }

/* ==========================================================================
   GENERATOR-KLASSEN
   --------------------------------------------------------------------------
   Die 49 Ortsseiten und 4 Objektseiten erzeugen orte-bauen.py und
   seiten-bauen.py. Deren Markup ist bekannt und vollstaendig ausgelesen —
   hier stehen genau die Klassen, die sie ausgeben, und nichts sonst.

   Das ist NICHT dasselbe wie ein frueherer Versuch, in dem Bauteile geraten
   wurden, die nie geprueft waren. Jede Regel hier gehoert zu einer Struktur,
   die ich gelesen habe.
   ========================================================================== */

/* -------- Huelle ----------------------------------------------------------- */
.container        { width: 100%; max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.container--narrow { max-width: var(--schmal); }
.section          { padding-block: var(--kapitel); position: relative; }
.section--tight   { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section--off     { background: var(--grau); }
.text-center      { text-align: center; }
.lead             { font-size: clamp(1.2rem,1.55vw,1.55rem); line-height: 1.38; letter-spacing: -.02em; color: var(--muted); max-width: 42ch; text-wrap: pretty; }
.text-center .lead { margin-inline: auto; }
.btn-row          { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.btn-row--center  { justify-content: center; }
@media (max-width: 560px) { .btn-row .btn { flex: 1 1 100%; } }
.btn--ghost       { background: transparent; color: var(--accent-ink); border-color: currentColor; }
.btn--ghost:hover { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }
.btn--light       { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: #E8E8ED; border-color: #E8E8ED; }
/* Die Zierlinie der alten Fassung: getrennt wird jetzt durch Abstand. */
hr.rule           { border: 0; height: 0; margin: 1.2rem 0 0; }

/* -------- Seitenkopf mit Hintergrundbild (Ortsseiten) ---------------------- */
.pagehero {
  position: relative; min-height: min(56vh, 560px);
  display: flex; align-items: flex-end;
  background: var(--schwarz) center/cover no-repeat; color: #fff; overflow: hidden;
}
.pagehero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.44) 0%, rgba(0,0,0,.10) 26%, rgba(0,0,0,0) 48%),
    linear-gradient(to top,    rgba(0,0,0,.78) 0%, rgba(0,0,0,.24) 58%, rgba(0,0,0,.10) 100%),
    rgba(0, 0, 0, .26);
}
.pagehero__inner {
  position: relative; z-index: 1; width: 100%; max-width: var(--breit);
  margin-inline: auto; padding: calc(var(--kopf-h) + 3rem) var(--rand) clamp(2.5rem, 5vw, 4rem);
}
.pagehero h1 {
  color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.09; letter-spacing: -.034em; font-weight: 600; hyphens: manual;
}
.pagehero p {
  color: rgba(255,255,255,.9); font-size: clamp(1.15rem,1.45vw,1.45rem);
  line-height: 1.4; letter-spacing: -.02em; max-width: 46ch; margin-top: 1rem; text-wrap: pretty;
}

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  font-size: .875rem; color: rgba(255,255,255,.72);
}
.breadcrumb li + li::before { content: "\203A"; margin-right: .4rem; opacity: .6; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.breadcrumb--dunkel { color: var(--muted); margin-bottom: 1.8rem; }
.breadcrumb--dunkel a:hover { color: var(--accent-ink); }

/* -------- Aufklapper — main.js bindet an .acc__btn, deshalb dieser Name ----- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item h3 { margin: 0; font-size: inherit; letter-spacing: normal; }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: clamp(1.15rem,1.9vw,1.5rem) 0; border: 0; background: transparent;
  font-family: inherit; font-size: clamp(1.05rem,1.35vw,1.3rem); font-weight: 600;
  letter-spacing: -.022em; color: var(--ink); text-align: left; cursor: pointer;
  transition: color .25s var(--ease);
}
.acc__btn:hover { color: var(--accent-ink); }
.acc__btn::after {
  content: ""; position: relative; width: 15px; height: 15px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center/15px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 15px no-repeat;
  transition: transform .4s var(--ease);
}
.acc__item.is-offen .acc__btn::after {
  background: linear-gradient(currentColor, currentColor) center/15px 1.5px no-repeat;
  transform: rotate(180deg);
}
.acc__icon { display: none; }
.acc__panel { overflow: hidden; height: 0; }
/* Ohne JavaScript setzt niemand die Hoehe — der Text waere dauerhaft weg.
   In dem Fall bleibt alles aufgeklappt. */
@media (scripting: none) { .acc__panel { height: auto; } }
.acc__panel > p, .acc__inhalt {
  padding-bottom: clamp(1.1rem,1.8vw,1.6rem); color: var(--muted); max-width: 72ch; margin: 0;
}
.acc__inhalt p { margin-bottom: .9em; }
.acc__inhalt p:last-child { margin-bottom: 0; }
.acc--objekt .acc__btn { font-size: 1.1rem; }

/* -------- Eckdaten --------------------------------------------------------- */
.fakten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 0 clamp(1.5rem,3vw,2.5rem); margin: 0; border-top: 1px solid var(--line);
}
.fakten > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.fakten dt { color: var(--muted); font-size: .9375rem; }
.fakten dd { margin: 0; font-weight: 500; font-size: .9375rem; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

/* -------- Leistungskacheln der Ortsseiten ---------------------------------- */
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px,1fr)); gap: clamp(1rem,1.6vw,1.5rem); }
.weg {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--grau); border-radius: var(--r-kachel);
  padding: clamp(1.75rem,2.4vw,2.25rem);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.section--off .weg { background: #fff; }
.weg:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -18px rgba(0,0,0,.16); }
.weg__icon { display: block; width: 34px; height: 34px; color: var(--accent); margin-bottom: 1.3rem; }
.weg__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.weg h3 { margin-bottom: .6rem; hyphens: manual; }
.weg p { color: var(--muted); font-size: .9375rem; margin: 0 0 1.1rem; }
.weg__mehr {
  display: inline-flex; align-items: center; gap: .28rem; margin-top: auto;
  font-size: 1.0625rem; letter-spacing: -.015em; color: var(--accent-ink);
}
.weg__mehr svg { display: none; }
.weg__mehr::after { content: "\203A"; font-size: 1.3em; line-height: 0; transform: translateY(-.04em); }
.weg:hover .weg__mehr { text-decoration: underline; text-underline-offset: .22em; }

/* -------- Zweispalter ------------------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__text, .split__media { min-width: 0; }

/* -------- Schlussband der erzeugten Seiten --------------------------------- */
.cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem,4vw,3rem); flex-wrap: wrap;
  background: var(--schwarz); color: var(--muted-d);
  border-radius: var(--r-kachel); padding: clamp(2.25rem,4vw,3.5rem);
}
.cta-band h2 { color: #F5F5F7; font-size: clamp(1.8rem,3vw,2.6rem); letter-spacing: -.032em; }
.cta-band p { color: var(--muted-d); margin: .7rem 0 0; }
.cta-band .btn-row { margin-top: 0; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* -------- Objektseite ------------------------------------------------------ */
.objekt { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (max-width: 960px) { .objekt { grid-template-columns: 1fr; } }
.objekt__medien { min-width: 0; }
.objekt__bild { border-radius: var(--r-kachel); overflow: hidden; background: var(--grau); cursor: zoom-in; }
.objekt__bild img { width: 100%; height: auto; display: block; }
.objekt__mini-reihe { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.objekt__mini-reihe::-webkit-scrollbar { display: none; }
.objekt__mini {
  flex: none; width: 88px; aspect-ratio: 3/2; padding: 0; border: 0;
  border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--grau);
  opacity: .5; outline: 2px solid transparent; outline-offset: 2px;
  transition: opacity .3s var(--ease), outline-color .3s var(--ease);
}
.objekt__mini img { width: 100%; height: 100%; object-fit: cover; }
.objekt__mini:hover { opacity: .8; }
.objekt__mini.is-aktiv { opacity: 1; outline-color: var(--accent); }
.objekt__text { min-width: 0; }
.objekt__text h2 { font-size: clamp(1.6rem,2.4vw,2.2rem); letter-spacing: -.028em; }
.objekt__preis { font-size: clamp(1.9rem,2.8vw,2.5rem); font-weight: 600; letter-spacing: -.034em; color: var(--ink); font-variant-numeric: tabular-nums; margin: .9rem 0 1.6rem; }
.objekt__liste { margin: .6rem 0 1em 1.2rem; padding: 0; color: var(--muted); }
.objekt__liste li { margin-bottom: .4rem; }
.objekt__tourhinweis, .objekt__kleingedruckt { font-size: .875rem; color: var(--muted); margin-top: 1.2rem; }
.notice {
  background: var(--grau); border-radius: var(--r-medium);
  padding: 1.1rem 1.4rem; font-size: .9375rem; color: var(--muted); margin-top: 1.5rem;
}
.notice a { color: var(--accent-ink); }
.objekt .prop__badge { position: static; display: inline-block; margin-bottom: 1rem; }

/* -------- 360°-Rundgang der Objektseiten ----------------------------------- */
.tourhero { position: relative; border-radius: var(--r-kachel); overflow: hidden; background: var(--schwarz); aspect-ratio: 16/9; }
.tourhero--objekt { aspect-ratio: 16/10; }
.tourhero__still { position: absolute; inset: 0; background: center/cover no-repeat; }
.tourhero__still::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.tourhero__gate {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: var(--rand); color: #fff;
}
.tourhero.is-live .tourhero__gate { display: none; }
.tourhero__inhalt { max-width: 46ch; }
.tourhero__gate h1, .tourhero__gate h2 {
  color: #fff; font-size: clamp(1.5rem,2.6vw,2.3rem); letter-spacing: -.032em;
  /* Objekttitel sind lang; Silbentrennung zerlegte sie in „PHOTO-VOLTAIK". */
  hyphens: manual; max-width: 22ch; margin-inline: auto;
}
.tourhero__gate p { color: rgba(255,255,255,.9); margin: .8rem 0 0; }
.tourhero__fine { font-size: .8125rem; color: rgba(255,255,255,.7); max-width: 48ch; }
.tourhero__guard { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.tourhero.is-frei .tourhero__guard { display: none; }
.tourhero:not(.is-live) .tourhero__guard { display: none; }
.tourhero.is-live .tourhero__guard::after {
  content: "Zum Steuern einfach ins Bild klicken"; position: absolute;
  left: 1.1rem; bottom: 1.1rem;
  background: rgba(0,0,0,.62); color: #fff; font-size: .8125rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: var(--pill); white-space: nowrap;
  backdrop-filter: blur(6px); pointer-events: none;
}

.tourhero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tourhero__next { margin-top: 1rem; }
/* Solange ein Rundgang laeuft, wird der Header deckend: sonst schiebt sich
   beim Scrollen das Logo des Tour-Anbieters durch die milchige Leiste, und
   beides liegt uebereinander.

   Hier stand frueher `overflow: hidden` auf dem body. Das loeste dasselbe
   Problem, indem es die ganze Seite einfror — wer einen Rundgang startete,
   konnte nicht mehr scrollen und kam nicht mehr weg. */
body.tour-laeuft .header {
  background: var(--paper);
  border-bottom-color: var(--line);
}
body.tour-laeuft .header--ueber .nav__link,
body.tour-laeuft .header--ueber .burger span { color: var(--ink); }
.tour__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9375rem; color: rgba(255,255,255,.82); }


/* ==========================================================================
   GEBIETSKARTE
   --------------------------------------------------------------------------
   Erzeugt von orte-karte.py. Die Faerbung ist eine addierte Dichte, keine
   gemalte Flaeche: jeder Ort setzt einen weichen Fleck, ueberlappende Flecken
   summieren sich. Die Filterknoepfe blenden nicht aus, sie daempfen — sonst
   verliert man beim Umschalten die Orientierung im Bild.
   ========================================================================== */
/* Einspaltig statt neben einem Textblock: Je breiter die Karte dargestellt
   wird, desto groesser erscheinen die Ortsnamen — sie sind in SVG-Einheiten
   gesetzt und skalieren mit. Nebeneinander blieb fuer die Karte nur gut die
   Haelfte der Bahn, und damit waren die Namen rund 8 Pixel hoch. */
.karte {
  display: grid; justify-items: center;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
/* Der Rahmen muss die volle Breite bekommen, sonst hat die SVG darin keinen
   Bezugswert fuer width:100% und faellt auf ihre Mindestbreite zusammen. */
.karte__rahmen { width: 100%; }
.karte__rahmen {
  background: var(--grau); border-radius: var(--r-kachel);
  padding: clamp(1rem, 2vw, 1.75rem); overflow: hidden;
}
.karte__bild { display: block; width: 100%; height: auto; max-height: 82vh; margin-inline: auto; }

.karte__punkt {
  fill: var(--accent-deep); stroke: #fff; stroke-width: 1.6;
  transition: r .25s var(--ease), fill .25s var(--ease), opacity .35s var(--ease);
}
.karte__ziel { cursor: pointer; }
.karte__ziel:hover .karte__punkt,
.karte__ziel:focus-visible .karte__punkt { r: 9; fill: var(--accent-dark); }
.karte__ziel:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 50%; }

/* Der Name ist derselbe Link wie der Punkt — und die groessere Trefferflaeche. */
.karte__schildziel { cursor: pointer; }
.karte__schildziel:hover .karte__schild { fill: var(--accent-ink); }

.karte__schild {
  font-family: var(--font); font-size: 11px; font-weight: 550;
  fill: var(--ink); letter-spacing: -.01em; paint-order: stroke;
  stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
  transition: opacity .35s var(--ease);
}
.karte__gebiet {
  font-family: var(--font); font-size: 30px; font-weight: 700;
  fill: var(--accent-ink); opacity: .17; letter-spacing: .12em;
  text-transform: uppercase; transition: opacity .35s var(--ease);
}
.karte__hitze circle { transition: opacity .35s var(--ease); }

/* Der Moselverlauf. Kein Kartenwerk, sondern die Linie durch die Uferorte —
   sie gibt dem Bild die Orientierung, die eine Punktwolke nicht hat. */
.karte__fluss {
  stroke: url(#flusslauf); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85; transition: opacity .35s var(--ease);
}
.karte[data-aktiv] .karte__fluss { opacity: .3; }
.karte[data-aktiv="mosel"] .karte__fluss { opacity: .85; }

/* Gedaempft wird alles, was nicht zur gewaehlten Landschaft gehoert.
   CSS kann Attributwerte nicht vergleichen — daher je Gebiet eine Regel. */
/* Zwei Saetze Namen: der Gesamtsatz und je einer pro Region. Sichtbar ist
   immer genau einer — sonst laegen Namen doppelt uebereinander. */
.karte__schild[data-satz]:not([data-satz="alle"]),
.karte__faden[data-satz]:not([data-satz="alle"]) { display: none; }
.karte[data-aktiv] [data-satz="alle"] { display: none; }
.karte[data-aktiv="mosel"] [data-satz="mosel"],
.karte[data-aktiv="eifel"] [data-satz="eifel"],
.karte[data-aktiv="hunsrueck"] [data-satz="hunsrueck"] { display: block; }

/* Duenne Linie vom Punkt zu einem abgerueckten Namen. */
.karte__faden { stroke: var(--muted-d); stroke-width: 1; opacity: .55; }

.karte[data-aktiv] .karte__punkt,
.karte[data-aktiv] .karte__hitze circle { opacity: .1; }
.karte[data-aktiv] .karte__gebiet { opacity: .05; }
.karte[data-aktiv="mosel"] [data-land="mosel"],
.karte[data-aktiv="eifel"] [data-land="eifel"],
.karte[data-aktiv="hunsrueck"] [data-land="hunsrueck"] { opacity: 1; }
.karte[data-aktiv="mosel"] .karte__gebiet[data-land="mosel"],
.karte[data-aktiv="eifel"] .karte__gebiet[data-land="eifel"],
.karte[data-aktiv="hunsrueck"] .karte__gebiet[data-land="hunsrueck"] { opacity: .34; }

.karte__satz {
  color: var(--muted); font-size: .9375rem; margin: 0 0 1.5rem;
  max-width: 62ch; text-align: center; line-height: 1.6;
}
.karte__filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.75rem; }
.karte__knopf {
  font: inherit; font-size: .875rem; font-weight: 550; letter-spacing: -.01em;
  padding: .5rem 1rem; border-radius: var(--pill); cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.karte__knopf span { color: var(--muted); font-variant-numeric: tabular-nums; }
.karte__knopf:hover { border-color: var(--muted-d); }
.karte__knopf[aria-pressed="true"] { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.karte__knopf[aria-pressed="true"] span { color: rgba(255,255,255,.72); }
.karte__stand {
  margin: 1.25rem 0 0; font-size: .875rem; color: var(--muted);
  min-height: 1.6em; text-align: center;
}

/* Suchfeld — es ersetzt das Ortsverzeichnis, das frueher unter der Karte
   stand. Wer seinen Ort sucht, tippt drei Buchstaben, statt 49 Eintraege
   zu ueberfliegen. Ohne JavaScript fuehrt der Link darunter zum Ziel. */
.karte__suche { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.karte__suche label { position: absolute; left: -9999px; }
.karte__suche input {
  width: min(100%, 320px); padding: .75rem 1.1rem; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: .9375rem;
}
.karte__suche input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-color: transparent; }
.karte__alle { display: block; text-align: center; margin-top: 1.4rem; }
.karte__ueberschrift {
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.25rem; font-size: 1rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--muted);
}

@media (max-width: 900px) {
  .karte { grid-template-columns: 1fr; }
  .karte__bild { max-height: none; }
  .karte__satz { max-width: none; }
}
/* Auf dem Telefon ist die Karte rund ein Drittel so breit. Alle 49 Namen
   waeren dort sechs Pixel hoch. Deshalb greift der Satz "wenig" mit den
   Ankerorten, in SVG-Einheiten deutlich groesser gesetzt — auf dem
   Bildschirm landet er damit bei lesbaren 13 bis 14 Pixeln. Den gesuchten
   Ort findet man auf dem Telefon ueber das Suchfeld. */
@media (max-width: 620px) {
  .karte__schild, .karte__faden { font-size: 22px; stroke-width: 5px; }
  .karte__schild[data-satz="alle"], .karte__faden[data-satz="alle"] { display: none; }
  .karte:not([data-aktiv]) .karte__schild[data-satz="wenig"],
  .karte:not([data-aktiv]) .karte__faden[data-satz="wenig"] { display: block; }
  .karte__gebiet { font-size: 46px; }
  .karte__punkt { r: 9; stroke-width: 2.6; }
  .karte__rahmen { padding: .6rem; }
}
/* Auf groesseren Bildschirmen bleibt der reduzierte Satz aus. */
.karte__schild[data-satz="wenig"], .karte__faden[data-satz="wenig"] { display: none; }

/* ==========================================================================
   REITER (2D / 3D)
   ========================================================================== */
.reiter__leiste {
  display: inline-flex; gap: .25rem; padding: .25rem;
  background: rgba(0,0,0,.05); border-radius: var(--pill); margin-bottom: clamp(1.5rem,3vw,2.25rem);
}
.kapitel--dunkel .reiter__leiste { background: rgba(255,255,255,.1); }
/* Der nicht gewaehlte Reiter stand in var(--muted) auf grauem Grund und sah
   damit aus wie abgeschaltet — Hubert fragte beim Durchsehen, was dort
   ueberhaupt passiert. Er ist jetzt dunkler, bekommt beim Zeigen eine eigene
   Flaeche und hebt sich leicht an. Dass er anklickbar ist, muss man sehen,
   bevor man klickt. */
.reiter__knopf {
  font: inherit; font-size: .9375rem; font-weight: 550; letter-spacing: -.01em;
  padding: .55rem 1.35rem; border-radius: var(--pill); border: 0; cursor: pointer;
  background: transparent; color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease),
              box-shadow .3s var(--ease), transform .3s var(--ease);
}
.reiter__knopf:hover {
  color: var(--ink); background: rgba(255,255,255,.62); transform: translateY(-1px);
}
.kapitel--dunkel .reiter__knopf:hover { background: rgba(255,255,255,.18); }
.reiter__knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reiter__knopf[aria-selected="true"] {
  background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -2px rgba(0,0,0,.14);
}
.reiter__blatt { animation: blatt .5s var(--ease) both; }
@keyframes blatt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reiter__blatt { animation: none; } }

/* Knopf unter einer eingeklappten Liste */
.mehr-knopf { display: block; margin: clamp(1.75rem,3vw,2.5rem) auto 0; }


/* ==========================================================================
   FORMULARE IN SCHRITTEN
   --------------------------------------------------------------------------
   Erzeugt von formulare.py, gefuehrt von formular.js. Ohne JavaScript
   stehen alle Schritte untereinander — dann duerfen Fortschrittsbalken und
   Blaetterknoepfe nicht sichtbar sein, sie wuerden nichts tun. Beide
   erscheinen deshalb erst mit der Klasse .is-schritte, die das Skript setzt.
   ========================================================================== */
.formular--schritte { max-width: 760px; margin-inline: auto; }
.formular--schritte .fortschritt,
.formular--schritte [data-zurueck],
.formular--schritte [data-weiter] { display: none; }
.formular--schritte.is-schritte .fortschritt { display: block; }
.formular--schritte.is-schritte [data-zurueck],
.formular--schritte.is-schritte [data-weiter] { display: inline-flex; }

.fortschritt {
  height: 4px; border-radius: 4px; background: rgba(0,0,0,.13);
  margin-bottom: clamp(2rem, 4vw, 3rem); overflow: hidden;
}
.fortschritt__balken {
  height: 100%; width: 0; border-radius: 4px; background: var(--accent-deep);
  transition: width .55s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .fortschritt__balken { transition: none; } }

.schritt__kopf { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.schritt__zahl {
  display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  color: var(--accent-ink); margin-bottom: .55rem;
}
.schritt__titel {
  font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 600; letter-spacing: -.028em;
  line-height: 1.12; color: var(--ink); margin: 0;
}
.schritt__titel:focus-visible { outline: none; }
.schritt__satz { color: var(--muted); font-size: .9375rem; margin: .7rem 0 0; max-width: 54ch; }

/* Auswahl als Kacheln statt als Klappliste: sichtbar, mit dem Daumen
   treffbar, und man sieht ohne Klick, was zur Wahl steht. */
.feld--wahl { border: 0; padding: 0; margin: 0 0 1.6rem; }
.feld--wahl legend {
  padding: 0; font-size: .9375rem; font-weight: 500; color: var(--ink); margin-bottom: .6rem;
}
.feld__hinweis { display: block; font-size: .8125rem; color: var(--muted); margin: -.25rem 0 .6rem; }
.wahlen { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl { position: relative; }
.wahl input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.wahl span {
  display: block; padding: .7rem 1.2rem; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.wahl:hover span { border-color: var(--muted-d); }
.wahl input:checked + span {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
}
.wahl input:focus-visible + span { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.wahl input:active + span { transform: scale(.97); }
.kapitel--grau .wahl span { background: var(--paper); }

.formular__steuerung { margin-top: clamp(1.75rem, 3vw, 2.5rem); flex-wrap: wrap; }


/* ==========================================================================
   TIPPGEBERPRAEMIE
   Eine einzelne grosse Zahl, wie im Zahlenband — nur allein und deshalb
   lauter. Steht keine Zahl fest, traegt das Wort "Prämie" die Stelle; das
   Format bleibt gleich, damit spaeter nur der Text getauscht werden muss.
   ========================================================================== */
.liste--gross li { font-size: 1.0625rem; padding-block: .45rem; }

.praemie { display: grid; gap: .6rem; justify-items: center; }
.praemie__wert {
  font-size: clamp(3.5rem, 9vw, 6.5rem); font-weight: 700;
  letter-spacing: -.045em; line-height: .95; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.praemie__text { font-size: 1.0625rem; color: var(--muted); max-width: 34ch; line-height: 1.45; }


/* ==========================================================================
   SPRACHSCHALTER
   Das Ziel setzt uebersetzen.py je Seite: von der deutschen Wertermittlung
   soll man auf der englischen Bewertungsseite landen, nicht auf der
   englischen Startseite.
   ========================================================================== */
.sprachschalter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; padding: .35rem .7rem; border-radius: var(--pill);
  border: 1px solid currentColor; font-size: .75rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; opacity: .82;
  transition: opacity .25s var(--ease), background .25s var(--ease);
}
.sprachschalter:hover { opacity: 1; background: rgba(127,127,127,.14); }
@media (max-width: 1000px) { .sprachschalter { min-width: 3.4rem; padding: .6rem 1rem; } }


/* ==========================================================================
   VORHER / NACHHER
   Zwei begehbare Rundgänge nebeneinander. Absichtlich nicht als Schieber:
   die beiden Aufnahmen blicken in unterschiedliche Richtungen, ein Schieber
   würde Verschiedenes übereinanderlegen und damit etwas behaupten, das nicht
   stimmt. Nebeneinander sieht man den Unterschied ohne einen einzigen Klick.
   ========================================================================== */
.vergleich {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.vergleich__seite { margin: 0; }
.vergleich__seite figcaption {
  margin-top: 1rem; font-size: .9375rem; line-height: 1.55; color: var(--muted);
}
.vergleich__seite figcaption b { color: var(--ink); font-weight: 600; }
.vergleich__fuss {
  margin: clamp(2rem, 3.5vw, 3rem) auto 0; max-width: 60ch; text-align: center;
  font-size: .875rem; color: var(--muted); line-height: 1.6;
}

/* Der kleine Rundgang trägt kein Kapitel, nur eine Marke und einen Knopf. */
.tour--klein .tour__tor { padding: clamp(1.25rem, 3vw, 2rem); gap: 1rem; }
/* Weniger Schleier als beim grossen Rundgang: hier ist das Bild die Aussage,
   nicht der Hintergrund einer Überschrift. Der Knopf traegt seinen Kontrast
   selbst. */
.tour--klein .tour__still::after { background: rgba(0,0,0,.26); }
.tour--klein [data-tour-start] { box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); }
.tour--klein .tour__meta {
  font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
}

@media (max-width: 760px) {
  .vergleich { grid-template-columns: 1fr; }
}


/* Quittung unter einer Auswahl — eine kurze Antwort auf das, was jemand
   angeklickt hat. Traegt die Auswahl eine Sperre, wird daraus ein Hinweis
   in Akzentfarbe, und das Formular geht nicht weiter. */
.wahl__echo {
  margin: .9rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--muted);
  animation: echo .4s var(--ease) both;
}
.wahl__echo--halt {
  color: var(--ink); background: rgba(231,63,12,.07); border-left: 3px solid var(--accent-deep);
  padding: .85rem 1.1rem; border-radius: 0 12px 12px 0; max-width: 62ch;
}
@keyframes echo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wahl__echo { animation: none; } }


/* ==========================================================================
   KUNDENSTIMMEN
   Erzeugt von bewertungen-bauen.py. Der Abschnitt erscheint nur, wenn in
   bewertungen.json wirklich Bewertungen stehen.
   ========================================================================== */
.stimmen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(1rem,1.6vw,1.5rem); margin-top: clamp(2.25rem,4vw,3.5rem);
}
.stimme {
  margin: 0; background: var(--paper); border-radius: var(--r-kachel);
  padding: clamp(1.4rem,2.4vw,2rem); display: flex; flex-direction: column; gap: 1rem;
}
.sterne { display: inline-flex; gap: .15rem; }
.sterne svg { width: 17px; height: 17px; fill: var(--accent-deep); }
.stimme blockquote {
  margin: 0; font-size: 1.0625rem; line-height: 1.55; letter-spacing: -.012em; color: var(--ink);
}
.stimme figcaption { margin-top: auto; font-size: .875rem; color: var(--muted); }
.stimmen__fuss {
  margin: clamp(1.75rem,3vw,2.5rem) auto 0; max-width: 68ch; text-align: center;
  font-size: .8125rem; color: var(--muted); line-height: 1.6;
}

/* Eine einzelne Stimme: groß gesetzt, mittig, wie ein Zitat. */
.stimmen--einzeln { grid-template-columns: minmax(0, 68ch); justify-content: center; }
.stimme--gross { align-items: center; text-align: center; gap: 1.4rem; padding: clamp(2rem,4vw,3.25rem); }
.stimme--gross .sterne svg { width: 21px; height: 21px; }
.stimme--gross blockquote {
  font-size: clamp(1.125rem, 1.9vw, 1.4rem); line-height: 1.5; letter-spacing: -.018em;
}
.stimme--gross figcaption { margin-top: 0; }

/* Ein Ort, in dem gerade etwas zu haben ist. Gefüllter, größer, mit Ring —
   das ist die Frage, mit der jemand auf die Karte schaut. */
.karte__punkt--angebot { fill: var(--accent); stroke: #fff; stroke-width: 2.4; }
.karte__ziel:hover .karte__punkt--angebot { fill: var(--accent-dark); }
@media (max-width: 620px) { .karte__punkt--angebot { r: 11; stroke-width: 3; } }

/* Ein Ring, der vom Punkt wegläuft. Kräftig genug, dass er auffällt, und
   langsam genug, dass er nicht nervt — die Karte zeigt 52 Orte, von denen
   nur eine Handvoll gerade etwas zu bieten hat. */
.karte__puls {
  fill: none; stroke: var(--accent); stroke-width: 3;
  transform-box: fill-box; transform-origin: center;
  animation: kartePuls 2.6s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events: none;
}
@keyframes kartePuls {
  0%   { transform: scale(1);   opacity: .9; stroke-width: 3; }
  70%  { transform: scale(3.4); opacity: 0;  stroke-width: 1; }
  100% { transform: scale(3.4); opacity: 0;  stroke-width: 1; }
}
/* Versetzt, damit nicht alle gleichzeitig schlagen. */
.karte__ziel:nth-of-type(even) .karte__puls { animation-delay: .85s; }
@media (prefers-reduced-motion: reduce) {
  .karte__puls { animation: none; opacity: .45; }
}

/* ==========================================================================
   KARTE — die drei Zustände eines Ortes
   Gepflegt wird das in Propstack, nicht hier: "Vermarktung" ergibt einen
   orangen Punkt, "abgeschlossen" einen dunklen, "potenzieller Aktionsort"
   einen grünen. Ohne Legende wären drei Farben nur Dekoration.
   ========================================================================== */
.karte__punkt--angebot    { fill: var(--accent);     stroke: #fff; stroke-width: 2.4; }
.karte__punkt--verkauft   { fill: var(--ink);        stroke: #fff; stroke-width: 1.8; }
.karte__punkt--aktionsort { fill: #2F7D55;           stroke: #fff; stroke-width: 2.4; }
.karte__ziel:hover .karte__punkt--angebot    { fill: var(--accent-dark); }
.karte__ziel:hover .karte__punkt--aktionsort { fill: #1F5C3C; }

.karte__legende {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem 1.6rem; list-style: none; margin: 1rem 0 0; padding: 0;
  font-size: .8125rem; color: var(--muted);
}
.karte__legende li { display: flex; align-items: center; gap: .5rem; }
.karte__legende b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.karte__marke { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.karte__marke--angebot    { background: var(--accent); }
.karte__marke--verkauft   { background: var(--ink); }
.karte__marke--aktionsort { background: #2F7D55; }

@media (max-width: 620px) {
  .karte__punkt--angebot, .karte__punkt--aktionsort { r: 11; stroke-width: 3; }
  .karte__punkt--verkauft { r: 8; }
}

/* Vollbild-Knopf, links neben „Rundgang schließen". */
.tour__voll {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .8125rem; font-weight: 550;
  padding: .5rem .95rem; border-radius: var(--pill); cursor: pointer;
  border: 0; background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(6px);
  transition: background .25s var(--ease);
}
.tour__voll:hover { background: rgba(0,0,0,.82); }
/* Im Vollbild füllt der Rundgang den Schirm — das Seitenverhältnis muss weg. */
.tour.is-voll, .tourhero.is-voll { aspect-ratio: auto; border-radius: 0; }



/* Der Hinweis auf der Schutzebene steht im CSS und geht damit am
   Übersetzungskatalog vorbei. Für die englische Fassung eine eigene Regel. */
html[lang="en"] .tour.is-live .tour__schutz::after,
html[lang="en"] .tourhero.is-live .tourhero__guard::after {
  content: "Tap the image to take control";
}

/* Auf einem Gerät ohne Maus steht "klicken" falsch da — und die meisten
   sehen sich einen Rundgang auf dem Telefon an, nicht am Schreibtisch.
   Der Browser weiss selbst, was er ist: (hover: none) und (pointer: coarse)
   treffen Finger, nicht Mauszeiger. Zwei Fassungen desselben Satzes, keine
   Zeile JavaScript. */
@media (hover: none) and (pointer: coarse) {
  .tour.is-live .tour__schutz::after,
  .tourhero.is-live .tourhero__guard::after {
    content: "Zum Steuern einfach ins Bild tippen";
  }
  .tour--klein.is-live .tour__schutz::after { content: "Ins Bild tippen zum Steuern"; }
  html[lang="en"] .tour.is-live .tour__schutz::after,
  html[lang="en"] .tourhero.is-live .tourhero__guard::after {
    content: "Tap the image to take control";
  }
}