/* Archivo lokal (14.09.2026, statt Google Fonts; Lizenz assets/fonts/OFL.txt) */
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-VF.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
/* =========================================================================
   WESTWELT – Altbau-Eigentum Weststadt
   Prototyp von VALO Studio, Karlsruhe · Stand 11.08.2026
   Reihenfolge: Grundlagen · Kopfbereich · Abschnitte · Bausteine · Mobil
   ========================================================================= */

/* -------------------------------------------------- 1. Grundlagen */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  /* Farbwelt: Karlsruher Sandstein + badisches Tiefrot */
  --sand: #f6f2ec;
  --sand-2: #ece5da;
  --sand-3: #dcd1c1;
  --sand-4: #c2b39d;
  --tinte: #211a16;
  --tinte-6: rgba(33, 26, 22, 0.62);
  --tinte-4: rgba(33, 26, 22, 0.40);
  --tinte-1: rgba(33, 26, 22, 0.12);
  --rot: #8c2f2a;
  --rot-hell: #a8443c;
  --nacht: #171310;

  /* Kulisse, von fern nach nah dunkler */
  --k-huegel: #d5c3ac;
  --k-stadt: #c0a689;
  --k-marke: #ac9174;
  --k-dach-w: #ab8c66;
  --k-dach-n: #8d6c50;
  --k-strasse: #70543f;
  --k-fassade: #251a14;

  --breite: 1240px;
  --luft: clamp(4rem, 9vw, 9rem);
  --radius: 2px;

  --schrift: "Archivo", "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --mono: "Archivo", ui-monospace, "SF Mono", Menlo, monospace;

  --schwung: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  line-height: 1.55;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

/* Bildflaechen liegen alle im Baustein .platz, siehe Abschnitt 3. */

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
}

p {
  margin: 0;
}

::selection {
  background: var(--rot);
  color: var(--sand);
}

:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}

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

.springmarke {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--tinte);
  color: var(--sand);
  text-decoration: none;
  transition: top 0.2s;
}

.springmarke:focus {
  top: 1rem;
}

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

.kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rot);
}

.gross {
  font-size: clamp(2.4rem, 1.1rem + 5.4vw, 5.4rem);
}

.mittel {
  font-size: clamp(1.8rem, 1rem + 3.2vw, 3.4rem);
}

.zahl-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------- 2. Kopfleiste */

.leiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.2rem, 3vw, 2.4rem);
  color: var(--sand);
  mix-blend-mode: normal;
  transition: background 0.4s var(--schwung), color 0.4s var(--schwung),
    box-shadow 0.4s var(--schwung), padding 0.3s var(--schwung);
}

.leiste--hell {
  background: rgba(246, 242, 236, 0.92);
  backdrop-filter: blur(14px);
  color: var(--tinte);
  box-shadow: 0 1px 0 var(--tinte-1);
  padding-block: 0.85rem;
}

/* Die Marke ist ein eingebettetes SVG und faerbt sich ueber currentColor
   mit der Leiste um — dunkel ueber dem Foto, hell auf hellem Grund. */
.leiste__marke {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

.leiste__marke svg {
  height: clamp(15px, 1.7vw, 19px);
  width: auto;
}

/* Auf schmalen Bildschirmen faellt "IMMOBILIEN" weg, sonst drueckt die
   Marke die Ruecknahme-Schaltflaeche aus der Leiste. */
.marke--kurz {
  display: none;
}

@media (max-width: 620px) {
  .marke--lang {
    display: none;
  }
  .marke--kurz {
    display: block;
  }
  .leiste__marke svg {
    height: 14px;
  }
}

.leiste__nav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  align-items: center;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.leiste__nav a {
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.2s;
}

.leiste__nav a:hover {
  opacity: 1;
}

.leiste__ruf {
  padding: 0.55rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  transition: background 0.25s, color 0.25s;
}

.leiste__ruf:hover {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--sand);
}

/* -------------------------------------------------- 3. Kopfbereich */
/* Variante A: ein bildschirmfuellendes Foto, sehr grosse Schrift davor.
   Der Kopf haengt ueber gut zwei Bildschirmhoehen fest. In dieser Zeit
   waechst das Bild um sechzehn Prozent und wandert leicht nach oben, die
   Schrift laeuft schneller als das Bild und verblasst zum Ende hin.
   Daraus entsteht Tiefe, ohne dass irgendetwas einfliegt oder huepft. */

.kopf {
  position: relative;
  background: var(--nacht);
}

/* Spur: der Scrollweg, ueber den der Kopf gepinnt bleibt */
.kopf__spur {
  height: 220svh;
  view-timeline-name: --spur;
  view-timeline-axis: block;
}

.kopf__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  animation: fortschritt linear both;
  animation-timeline: --spur;
  animation-range: contain 0% contain 100%;
}

@keyframes fortschritt {
  from {
    --p: 0;
  }
  to {
    --p: 1;
  }
}

.kopf__bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(calc(1 + 0.16 * var(--p))) translate3d(0, calc(-3% * var(--p)), 0);
  transform-origin: 50% 45%;
  will-change: transform;
}

/* Verlauf ueber dem Foto. Oben dunkel fuer die Kopfleiste, unten dunkel
   fuer die Schrift, in der Mitte hell genug, dass man das Motiv sieht. */
.kopf__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(23, 19, 16, 0.72) 0%,
      rgba(23, 19, 16, 0.34) 26%,
      rgba(23, 19, 16, 0.46) 55%,
      rgba(23, 19, 16, 0.92) 100%
    ),
    radial-gradient(120% 80% at 18% 78%, rgba(23, 19, 16, 0.5) 0%, transparent 70%);
}

.kopf__text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.6rem, 5vw, 4.2rem);
  padding-bottom: clamp(4.6rem, 9vw, 6.4rem);
  color: var(--sand);
  transform: translate3d(0, calc(-6svh * var(--p)), 0);
  opacity: clamp(0, calc(1 - 0.45 * (var(--p) - 0.62) / 0.38), 1);
}

.kopf__ort {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sand-4);
}

.kopf__titel {
  font-size: clamp(3.2rem, 14vw, 11rem);
  line-height: 0.84;
  letter-spacing: -0.05em;
  margin-top: 0.7rem;
}

.kopf__titel span {
  display: block;
}

/* Die beiden Zeilen bauen sich beim Laden auf, nicht erst beim Scrollen —
   sonst schaut der Besucher zuerst auf einen leeren Bildschirm. */
.kopf__titel span {
  animation: aufbauen 1s var(--schwung) both;
  animation-delay: var(--verzug, 0s);
}

@keyframes aufbauen {
  from {
    opacity: 0;
    transform: translate3d(0, 0.42em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.kopf__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.4rem 2.4rem;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(246, 242, 236, 0.22);
}

.kopf__satz {
  max-width: 34ch;
  color: rgba(246, 242, 236, 0.82);
}

.kopf__knopf {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.7rem;
  background: var(--sand);
  color: var(--nacht);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}

.kopf__knopf:hover {
  background: var(--rot);
  color: var(--sand);
}

/* --- Bildplaetze ---------------------------------------------------------
   Jedes Foto der Seite sitzt in einem .platz. Fehlt die Datei noch, zeigt
   der Platz eine weiche Farbflaeche und den Dateinamen statt eines
   kaputten Bildsymbols. Sobald die Datei da ist, aendert sich am Aufbau
   nichts — der Platzhalter verschwindet einfach. */

.platz {
  position: relative;
  overflow: hidden;
  background: var(--sand-3);
  isolation: isolate;
}

/* Der Kopf ist der einzige Platz, der ueber die ganze Buehne liegt */
.kopf__bild.platz {
  position: absolute;
  inset: 0;
}

.platz > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platz--leer > img {
  display: none;
}

/* Die Farbflaeche liegt immer da, das geladene Foto deckt sie zu. So gibt
   es kein Aufblitzen, und die Flaeche haengt nicht am JavaScript. */
.platz::before {
  content: "";
  position: absolute;
  inset: -25%;
  filter: blur(26px);
  background:
    radial-gradient(38% 52% at 22% 26%, #f0e8da 0%, transparent 62%),
    radial-gradient(42% 58% at 78% 18%, #c3b096 0%, transparent 66%),
    radial-gradient(55% 62% at 58% 88%, #5c4938 0%, transparent 72%),
    linear-gradient(158deg, #ded2bf 0%, #8a7660 58%, #3c2f25 100%);
}

.platz[data-ton="innen"]::before {
  background:
    radial-gradient(45% 50% at 72% 28%, #fbf6ec 0%, transparent 64%),
    radial-gradient(50% 60% at 20% 70%, #7c6650 0%, transparent 70%),
    linear-gradient(140deg, #e6dbc8 0%, #a08a6e 45%, #4a3b2e 100%);
}

.platz[data-ton="strasse"]::before {
  background:
    radial-gradient(40% 45% at 50% 12%, #efe9dc 0%, transparent 60%),
    radial-gradient(60% 55% at 25% 80%, #4f4032 0%, transparent 70%),
    linear-gradient(172deg, #d3c6b1 0%, #977f66 50%, #2e251d 100%);
}

.platz[data-ton="detail"]::before {
  background:
    radial-gradient(50% 55% at 68% 34%, #f4ecdd 0%, transparent 62%),
    radial-gradient(45% 50% at 18% 62%, #8d7357 0%, transparent 68%),
    linear-gradient(120deg, #cdbda6 0%, #7d6650 60%, #392d23 100%);
}

.platz[data-ton="treppe"]::before {
  background:
    radial-gradient(35% 60% at 30% 22%, #f8f2e6 0%, transparent 60%),
    radial-gradient(55% 65% at 75% 78%, #5a4736 0%, transparent 72%),
    linear-gradient(150deg, #e0d4c0 0%, #93795e 50%, #31261e 100%);
}

/* Im Kopfbereich sitzt unten der Fortschrittsbalken — Fahne hoeher legen */
.kopf__bild.platz::after {
  bottom: 3.4rem;
}

/* Dateiname, damit beim Befuellen klar ist, was wohin gehoert */
.platz--leer::after {
  content: attr(data-datei);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.42rem 0.7rem;
  background: rgba(23, 19, 16, 0.72);
  color: var(--sand);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* --- Hinweis, Fortschritt, Bewegungsschalter --- */

.kopf__hinweis {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: var(--sand);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: clamp(0, calc((0.06 - var(--p)) * 18), 1);
  pointer-events: none;
}

.kopf__maus {
  width: 22px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  position: relative;
}

.kopf__maus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  animation: maus 1.8s var(--schwung) infinite;
}

@keyframes maus {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(11px);
    opacity: 0;
  }
}

.kopf__balken {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(246, 242, 236, 0.16);
  overflow: hidden;
  opacity: clamp(0, calc(var(--p) * 22), 1);
}

.kopf__balken::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: var(--rot-hell);
}

.bewegung {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: 1.8rem;
  z-index: 5;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(246, 242, 236, 0.4);
  border-radius: 100px;
  background: rgba(23, 19, 16, 0.35);
  color: var(--sand);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.25s, border-color 0.25s;
}

.bewegung:hover {
  background: var(--rot);
  border-color: var(--rot);
}

/* -------------------------------------------------- 4. Abschnitte */

.abschnitt {
  padding-block: var(--luft);
  position: relative;
}

.abschnitt--dunkel {
  background: var(--nacht);
  color: var(--sand);
}

.abschnitt--sand {
  background: var(--sand-2);
}

.kappe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--tinte-1);
}

.abschnitt--dunkel .kappe {
  border-color: rgba(246, 242, 236, 0.16);
}

.kappe__num {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--tinte-4);
}

.abschnitt--dunkel .kappe__num {
  color: rgba(246, 242, 236, 0.5);
}

/* --- Einstieg: der grosse Satz --- */

.einstieg {
  padding-block: clamp(5rem, 12vw, 11rem);
}

.einstieg__satz {
  font-size: clamp(2rem, 0.6rem + 4.4vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 21ch;
}

.einstieg__satz em {
  font-style: normal;
  color: var(--rot);
}

.einstieg__fuss {
  margin-top: clamp(2rem, 4vw, 3.4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem 2.4rem;
  max-width: 900px;
  color: var(--tinte-6);
  font-size: 0.98rem;
}

/* --- Leistungen --- */

.leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--tinte-1);
}

.leistung {
  padding: 2.2rem 1.6rem 2.6rem;
  border-bottom: 1px solid var(--tinte-1);
  border-right: 1px solid var(--tinte-1);
  position: relative;
  overflow: hidden;
}

.leistung:last-child {
  border-right: 0;
}

.leistung::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--schwung);
}

.leistung:hover::before {
  transform: scaleX(1);
}

.leistung__num {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--rot);
  margin-bottom: 1.6rem;
  display: block;
}

.leistung h3 {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}

.leistung p {
  color: var(--tinte-6);
  font-size: 0.96rem;
}

/* --- Zahlen --- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(2rem, 3vw, 2.6rem);
}

.zahl__wert {
  font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.zahl__wert span {
  font-size: 0.42em;
  letter-spacing: -0.01em;
  margin-left: 0.12em;
}

.zahl__text {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: rgba(246, 242, 236, 0.66);
  max-width: 22ch;
}

/* --- Objekt-Karussell --- */

.kar {
  position: relative;
}

.kar__bahn {
  display: flex;
  gap: clamp(1rem, 2vw, 1.8rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1.4rem;
  scrollbar-width: none;
}

.kar__bahn::-webkit-scrollbar {
  display: none;
}

.objekt {
  flex: 0 0 min(86vw, 460px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.5s var(--schwung);
}

.objekt:hover {
  transform: translateY(-6px);
}

.objekt__bild {
  aspect-ratio: 4 / 3;
  background: var(--sand-3);
  overflow: hidden;
  position: relative;
}

.objekt__bild img {
  transition: transform 0.7s var(--schwung);
}

.objekt:hover .objekt__bild img {
  transform: scale(1.05);
}

.objekt__stand {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  background: var(--sand);
  color: var(--tinte);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.objekt__stand--weg {
  background: var(--rot);
  color: var(--sand);
}

.objekt__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.2rem;
}

.objekt__ort {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.objekt__preis {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.objekt__daten {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  color: var(--tinte-6);
  font-size: 0.88rem;
}

.kar__steuer {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.6rem;
}

.kar__knopf {
  width: 46px;
  height: 46px;
  border: 1px solid var(--tinte-1);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.kar__knopf:hover {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--sand);
}

.kar__spur {
  flex: 1;
  height: 2px;
  background: var(--tinte-1);
  position: relative;
  margin-left: 1rem;
}

.kar__spur i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: var(--rot);
  transition: width 0.3s var(--schwung), left 0.3s var(--schwung);
}

/* --- Stadtteil-Karte ---
   Gezeichnet von werkzeuge/karte.py aus OpenStreetMap-Daten (karte-daten.json):
   echte Baubloecke als Flaechen auf Sandpapier, Strassen als Luecken, das gewaehlte
   Quartier faerbt seine Bloecke rot. Stand 11.09.2026. */

.karte {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr);
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: start;
}

.karte__flaeche {
  background: var(--sand-2);
  border: 1px solid var(--tinte-1);
  padding: 1rem;
}

.karte__svg {
  width: 100%;
  height: auto;
  font-family: var(--schrift);
}

.karte__grund {
  fill: var(--sand);
}

.park {
  fill: var(--sand-2);
  stroke: var(--sand-4);
  stroke-width: 0.5;
  stroke-dasharray: 1.5 1.5;
}

.block {
  fill: var(--sand-4);
  fill-rule: evenodd;
  transition: fill 0.3s var(--schwung);
}

.karte__kontext .block {
  fill: var(--sand-3);
}

.quartier {
  cursor: pointer;
  outline: none;
}

.quartier__flaeche {
  fill: transparent;
  stroke: none;
  transition: fill 0.3s var(--schwung);
}

.quartier:hover .block,
.quartier.ist-aktiv .block {
  fill: var(--rot);
}

.quartier.ist-aktiv .quartier__flaeche {
  fill: var(--rot);
  fill-opacity: 0.07;
  stroke: var(--rot);
  stroke-width: 0.9;
  stroke-dasharray: 3 2;
}

.karte__leiste {
  stroke: var(--tinte-1);
  stroke-width: 1;
}

.quartier:focus-visible .quartier__flaeche {
  stroke: var(--tinte);
  stroke-width: 1.2;
  stroke-dasharray: 3 2;
}

.karte__tram path {
  stroke: var(--tinte-4);
  stroke-width: 0.6;
  fill: none;
}

.weg {
  fill: var(--tinte-6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 5.6px;
  paint-order: stroke;
  stroke: var(--sand);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.weg--haupt {
  font-size: 7px;
  font-weight: 600;
  fill: var(--tinte);
}

.platz-name {
  font-size: 5.6px;
  fill: var(--tinte-6);
  letter-spacing: 0.06em;
  paint-order: stroke;
  stroke: var(--sand);
  stroke-width: 2px;
}

.karte__label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--tinte);
  pointer-events: none;
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke: var(--sand);
  stroke-width: 4px;
  stroke-linejoin: round;
  transition: fill 0.3s var(--schwung);
}

.karte__label .nr {
  font-weight: 400;
  fill: var(--rot);
  letter-spacing: 0.1em;
}

.karte__label.ist-aktiv,
.karte__label.ist-aktiv .nr {
  fill: var(--rot);
}

.karte__namen--schmal {
  display: none;
}

.karte__namen--schmal .karte__label {
  font-size: 20px;
}

.karte__marke circle {
  fill: var(--rot);
  stroke: var(--sand);
  stroke-width: 1.5;
}

.karte__marke .ring {
  fill: none;
  stroke: var(--rot);
  stroke-width: 1.5;
}

.karte__marke text {
  font-size: 9px;
  font-weight: 600;
  fill: var(--rot);
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: var(--sand);
  stroke-width: 3px;
}

.kontext-name,
.nord-n,
.massstab-text {
  font-size: 7px;
  fill: var(--tinte-4);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nord {
  fill: var(--tinte-4);
}

.massstab {
  stroke: var(--tinte-4);
  stroke-width: 0.8;
  fill: none;
}

/* Wahlleiste unter der Karte */

.karte__wahl {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  border-top: 1px solid var(--tinte-1);
}

.karte__wahl button {
  appearance: none;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  padding: 0.7rem 0 0.2rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinte-6);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}

.karte__wahl button span {
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--rot);
  margin-right: 0.45em;
}

.karte__wahl button:hover,
.karte__wahl button.ist-aktiv {
  color: var(--tinte);
  border-top-color: var(--rot);
}

.karte__hinweis {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--tinte-4);
}

.karte__info h3 {
  font-size: clamp(1.15rem, 0.8rem + 1.4vw, 2.2rem); /* K2: Faktor >= 1,4 zum Sektionstitel, 11.09.2026 */
  margin-bottom: 0.8rem;
}

.karte__preis {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--rot);
  font-variant-numeric: tabular-nums;
}

.karte__preis span {
  font-size: 0.4em;
  color: var(--tinte-6);
  letter-spacing: 0;
}

.karte__info p {
  margin-top: 0.9rem;
  color: var(--tinte-6);
}

.karte__liste {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: 1px solid var(--tinte-1);
}

.karte__liste li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--tinte-1);
  font-size: 0.92rem;
}

.karte__liste span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- Ablauf --- */

.ablauf {
  counter-reset: schritt;
}

.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem 2rem;
  align-items: baseline;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid rgba(246, 242, 236, 0.16);
}

.schritt::before {
  content: "0" counter(schritt);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--rot-hell);
}

.schritt h3 {
  font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem);
}

.schritt p {
  color: rgba(246, 242, 236, 0.66);
  font-size: 0.98rem;
  max-width: 46ch;
}

/* --- Regeln --- */

.regeln {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: regel;
}

.regel {
  counter-increment: regel;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--tinte-1);
}

.regel::before {
  content: "R" counter(regel);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--rot);
  padding-top: 0.7em;
}

.regel p {
  font-size: clamp(1.3rem, 0.85rem + 1.7vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}

/* --- Team --- */

.team {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.team__bild {
  aspect-ratio: 4 / 5;
  background: var(--sand-3);
  overflow: hidden;
}



.team__text p {
  color: var(--tinte-6);
  margin-top: 1.2rem;
  max-width: 46ch;
}

.team__sig {
  margin-top: 2rem;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rot);
}

/* --- Kontakt --- */

.kontakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.4rem);
}

.tuer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.4rem;
  min-height: 340px;
  padding: 2rem;
  border: 1px solid rgba(246, 242, 236, 0.2);
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s;
}

.tuer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rot);
  transform: translateY(101%);
  transition: transform 0.55s var(--schwung);
}

.tuer:hover::before {
  transform: translateY(0);
}

.tuer > * {
  position: relative;
  z-index: 1;
}

.tuer:hover {
  border-color: var(--rot);
}

.tuer__marke {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rot-hell);
  transition: color 0.35s;
}

.tuer:hover .tuer__marke {
  color: rgba(246, 242, 236, 0.8);
}

.tuer h3 {
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem);
  margin-bottom: 0.8rem;
}

.tuer p {
  color: rgba(246, 242, 236, 0.66);
  font-size: 0.95rem;
  max-width: 30ch;
  transition: color 0.35s;
}

.tuer:hover p {
  color: rgba(246, 242, 236, 0.9);
}

.tuer__pfeil {
  align-self: flex-start;
  font-size: 1.6rem;
  transition: transform 0.45s var(--schwung);
}

.tuer:hover .tuer__pfeil {
  transform: translateX(10px);
}

.kontakt__direkt {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  font-size: 0.95rem;
  color: rgba(246, 242, 236, 0.7);
}

.kontakt__direkt a {
  color: var(--sand);
  text-decoration-color: var(--rot);
  text-underline-offset: 4px;
}

/* --- Fussbereich --- */

.fuss {
  background: var(--nacht);
  color: rgba(246, 242, 236, 0.6);
  padding: clamp(2.4rem, 5vw, 4rem) 0 2.4rem;
  border-top: 1px solid rgba(246, 242, 236, 0.14);
  font-size: 0.86rem;
}

.fuss__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}

.fuss__marke {
  display: block;
  color: var(--sand);
}

.fuss__marke svg {
  height: 18px;
  width: auto;
}

.fuss__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.fuss__nav a {
  text-decoration: none;
  transition: color 0.2s;
}

.fuss__nav a:hover {
  color: var(--sand);
}

.fuss__valo {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(246, 242, 236, 0.12);
  font-size: 0.78rem;
  color: rgba(246, 242, 236, 0.42);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  justify-content: space-between;
}

.fuss__valo a {
  color: rgba(246, 242, 236, 0.66);
}

/* -------------------------------------------------- 5. Einblendungen */

.zeigt {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.8s var(--schwung), transform 0.8s var(--schwung);
}

.zeigt.ist-da {
  opacity: 1;
  transform: none;
}

.zeigt:nth-child(2) {
  transition-delay: 0.07s;
}
.zeigt:nth-child(3) {
  transition-delay: 0.14s;
}
.zeigt:nth-child(4) {
  transition-delay: 0.21s;
}
.zeigt:nth-child(5) {
  transition-delay: 0.28s;
}

/* -------------------------------------------------- 6. Detailseite */

.detail {
  padding-top: clamp(6rem, 12vw, 9rem);
}

.detail__zurueck {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--tinte-6);
  margin-bottom: 2rem;
}

.detail__zurueck:hover {
  color: var(--rot);
}

.detail__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--tinte-1);
}

.detail__preis {
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--rot);
  font-variant-numeric: tabular-nums;
}

.detail__buehne {
  margin-top: clamp(1.6rem, 4vw, 3rem);
  aspect-ratio: 21 / 9;
  background: var(--sand-3);
  overflow: hidden;
}



/* Drei Raumbilder unter der grossen Aufnahme */
.raeume {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
}

.raum {
  aspect-ratio: 3 / 2;
}

@media (max-width: 640px) {
  .raeume {
    grid-template-columns: 1fr 1fr;
  }
  .raum:last-child {
    grid-column: span 2;
  }
}

.eck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--tinte-1);
  border: 1px solid var(--tinte-1);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.eck > div {
  background: var(--sand);
  padding: 1.4rem 1.2rem;
}

.eck dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-4);
  margin-bottom: 0.6rem;
}

.eck dd {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.detail__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.6rem, 6vw, 5rem);
  align-items: start;
}

.detail__text p + p {
  margin-top: 1.2rem;
}

.detail__text p {
  color: var(--tinte-6);
  max-width: 60ch;
}

.merkmale {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}

.merkmale li {
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
  break-inside: avoid;
  font-size: 0.94rem;
}

.merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 8px;
  height: 1px;
  background: var(--rot);
}

.karteikarte {
  border: 1px solid var(--tinte-1);
  padding: 1.8rem;
  position: sticky;
  top: 6rem;
  background: var(--sand-2);
}

.karteikarte h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.karteikarte p {
  color: var(--tinte-6);
  font-size: 0.92rem;
}

.knopf-voll {
  display: block;
  width: 100%;
  margin-top: 1.4rem;
  padding: 1rem 1.4rem;
  border: 0;
  background: var(--rot);
  color: var(--sand);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s;
}

.knopf-voll:hover {
  background: var(--tinte);
}

.knopf-leer {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--tinte-1);
  background: transparent;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.knopf-leer:hover {
  border-color: var(--rot);
  color: var(--rot);
}

/* -------------------------------------------------- 7. Hinweis-Fenster */

.fenster {
  border: 0;
  padding: 0;
  max-width: min(92vw, 460px);
  background: var(--sand);
  color: var(--tinte);
  box-shadow: 0 30px 90px rgba(23, 19, 16, 0.35);
}

.fenster::backdrop {
  background: rgba(23, 19, 16, 0.6);
  backdrop-filter: blur(3px);
}

.fenster__inhalt {
  padding: 2.2rem;
}

.fenster h3 {
  font-size: 1.6rem;
  margin-bottom: 0.9rem;
}

.fenster p {
  color: var(--tinte-6);
  font-size: 0.95rem;
}

.fenster__zu {
  margin-top: 1.6rem;
  padding: 0.8rem 1.6rem;
  border: 0;
  background: var(--tinte);
  color: var(--sand);
  cursor: pointer;
  font-weight: 600;
}

/* -------------------------------------------------- 8. Mobil */

@media (max-width: 640px) {
  .karte__wege,
  .karte__namen--breit,
  .karte__marke text,
  .karte__plaetze,
  .karte__rand text {
    display: none;
  }

  .karte__namen--schmal {
    display: block;
  }
}

@media (max-width: 900px) {
  .karte,
  .team,
  .detail__spalten {
    grid-template-columns: 1fr;
  }

  .schritt {
    grid-template-columns: 3.4rem minmax(0, 1fr);
  }

  .schritt p {
    grid-column: 2;
  }

  .merkmale {
    columns: 1;
  }

  .karteikarte {
    position: static;
  }

  .leiste__nav {
    display: none;
  }
}

@media (max-width: 620px) {
  .leistung {
    border-right: 0;
  }

  .regel {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .regel::before {
    padding-top: 0;
  }

  .kopf__hinweis {
    bottom: 4.6rem;
  }
}

/* Kopfbereich auf kleinen Geraeten: gleiche Idee, kuerzerer Weg und
   weniger Zoom — auf dem Handy wirkt jede Vergroesserung staerker. */
@media (max-width: 760px) {
  .kopf__spur {
    height: 180svh;
  }

  .kopf__bild {
    transform: scale(calc(1 + 0.10 * var(--p))) translate3d(0, calc(-2% * var(--p)), 0);
  }

  .kopf__unten {
    flex-direction: column;
    align-items: stretch;
  }

  .kopf__knopf {
    margin-left: 0;
    justify-content: center;
  }
}

/* -------------------------------------------------- 9. Ausstiege */

/* Ausstieg 1: Systemeinstellung des Besuchers */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .kopf__spur {
    height: 100svh;
  }

  .kopf__buehne {
    position: relative;
    animation: none;
    --p: 0;
  }

  .kopf__titel span,
  .kopf__maus::after {
    animation: none;
  }

  .zeigt {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .kar__bahn {
    scroll-behavior: auto;
  }
}

/* Ausstieg 2 und 3: Schalter im Kopf, automatische Notbremse bei Ruckeln */
html.ruhig .kopf__spur {
  height: 100svh;
}

html.ruhig .kopf__buehne {
  position: relative;
  animation: none;
  --p: 0;
}

html.ruhig .kopf__titel span,
html.ruhig .kopf__maus::after {
  animation: none;
}

html.ruhig .zeigt {
  opacity: 1;
  transform: none;
  transition: none;
}

html.ruhig .kopf__hinweis {
  display: none;
}

html.ruhig * {
  transition-duration: 0.01ms !important;
}

/* Prototyp-Leiste (15.09.2026, TODO V190): dieselbe Kennzeichnung wie bei den anderen vier
   Prototypen, als heller Streifen unter dem dunklen Fuß. */
.prototyp-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem clamp(1.25rem, 5vw, 5.5rem);
  background: var(--sand-2);
  color: var(--tinte);
  font-size: 0.82rem;
  line-height: 1.6;
}

.prototyp-fuss b {
  font-weight: 600;
}

.prototyp-fuss a {
  color: var(--tinte);
  text-decoration-color: var(--rot);
  text-underline-offset: 3px;
}