@import url("../fonts/fonts.css");

/* ==================================================================
   CWC — Verkaufs-Website, Gestaltungssystem

   Farbwelt und Signaturfarben stammen aus den echten Vorgabewerten
   der Controls (manifest.json), nicht aus einer erfundenen Palette.
   Jede Vitrine setzt --sig und --sig-grad selbst; alles darin folgt.
   ================================================================== */

/* ---------- 1. Grundwerte ---------- */
:root {
  --void: #050b1d;
  --void-2: #080f22;
  --void-3: #0b1329;
  --panel: #151c33;
  --panel-2: #2b3247;
  --edge: #1e2740;
  --edge-2: #3f4a5f;

  --text: #e8ecf3;
  --text-2: #97a3b8;
  --text-3: #5d6b86;

  /* Wird pro Vitrine überschrieben. Grün ist der häufigste
     Vorgabewert in den Manifesten, deshalb der Ausgangswert. */
  --sig: #3ed17a;
  --sig-grad: linear-gradient(135deg, #3ed17a, #2b3247);

  --schrift-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --schrift-text: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --schrift-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --rand: clamp(20px, 5vw, 64px);
  --huelle: 1440px;

  --kurve: 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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Kurze Seiten (z.B. Kontakt) sollen den Fuss an den unteren Rand des
   Sichtfensters drücken, statt ihn mitten auf der Seite stehen zu lassen. */
body > main {
  flex: 1 0 auto;
}

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

a {
  color: inherit;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 2. Typografie ---------- */
/* Silbentrennung ist hier keine Kosmetik: deutsche Komposita wie
   "Bedienelemente" oder "Stufenschalter" sind in einer grossen
   Displaygroesse breiter als ein Telefonbildschirm und haben die Seite
   nachweislich ueber den Viewport hinaus geschoben (gemessen: 460 px
   Inhalt bei 390 px Sichtfeld). Der Browser trennt nur, wenn er die
   Sprache kennt -- die steht im lang-Attribut jeder Seite. */
.display {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.94;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

.augenbraue {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

.typenschild {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.blass {
  color: var(--text-2);
}

/* ---------- 3. Gerüst ---------- */
.huelle {
  width: 100%;
  max-width: var(--huelle);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Ambientes Leuchten: nimmt die Signaturfarbe der Sektion an, in der
   man gerade steht. Dadurch wandert die Seite beim Scrollen durch das
   Farbspektrum des Katalogs, statt monoton zu bleiben. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    62% 48% at 50% 0%,
    color-mix(in srgb, var(--sig) 16%, transparent),
    transparent 72%
  );
  transition: background 900ms var(--kurve);
}

/* ---------- 4. Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--edge);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}

.marke {
  display: flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  margin-right: auto;
}

.marke__wort {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.16rem;
  letter-spacing: 0.02em;
}

.marke__zusatz {
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.9rem;
}

.kopf__nav a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 180ms var(--kurve);
}

.kopf__nav a:hover {
  color: var(--text);
}

/* Sprachumschalter */
.sprache {
  display: flex;
  gap: 1px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.sprache a {
  padding: 3px 11px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-3);
  transition: all 180ms var(--kurve);
}

.sprache a[aria-current="true"] {
  background: var(--panel-2);
  color: var(--text);
}

/* ---------- 5. Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms var(--kurve), box-shadow 200ms var(--kurve),
    background 200ms var(--kurve);
}

.knopf--voll {
  background: var(--sig);
  color: #04101f;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sig) 60%, transparent),
    0 8px 30px color-mix(in srgb, var(--sig) 30%, transparent);
}

.knopf--voll:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--sig),
    0 12px 40px color-mix(in srgb, var(--sig) 45%, transparent);
}

.knopf--rand {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--edge-2);
}

.knopf--rand:hover {
  box-shadow: inset 0 0 0 1px var(--sig);
  color: var(--sig);
}

/* ---------- 6. Titelbereich ---------- */
.held {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 11vh, 112px) clamp(40px, 8vh, 84px);
}

.held__augenbraue {
  margin-bottom: 26px;
}

.held__titel {
  font-size: clamp(2.05rem, 8.2vw, 6.2rem);
  max-width: 15ch;
}

.held__titel em {
  font-style: normal;
  color: var(--sig);
}

.held__text {
  margin: 30px 0 0;
  max-width: 54ch;
  font-size: clamp(1.04rem, 1rem + 0.35vw, 1.22rem);
  color: var(--text-2);
}

.held__tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 30px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
}

.kennzahl {
  flex: 1 1 150px;
  background: var(--void);
  padding: 20px 22px;
}

.kennzahl__wert {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.85rem;
  line-height: 1;
}

.kennzahl__wort {
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
}

/* ---------- 7. Vitrine ---------- */
.katalog {
  position: relative;
  z-index: 1;
}

.vitrine-sektion {
  position: relative;
  padding-block: clamp(64px, 12vh, 132px);
  border-top: 1px solid var(--edge);
  scroll-margin-top: 66px;
}

.vitrine-sektion__gitter {
  display: grid;
  /* Beide Spalten gleich breit. Ungleiche Spalten waeren hier ein
     Fehler: jede zweite Sektion vertauscht per order die Seiten, die
     Buehne landete dann abwechselnd in der breiten und in der schmalen
     Spalte -- gemessen 597 px und 548 px im Wechsel, obwohl alle
     Vitrinen gleich gross sein sollen. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(38px, 6vw, 88px);
  align-items: center;
}

/* Ungerade Nummern zeigen die Bühne rechts, gerade links. Der Wechsel
   ist nicht nur Rhythmus: er hält den Blick beim Scrollen in Bewegung,
   statt sechzehn Mal dieselbe Anordnung zu zeigen. */
.vitrine-sektion:nth-child(even) .vitrine-sektion__buehne {
  order: -1;
}

/* --- Bühne --- */
.vitrine-sektion__buehne {
  /* Kleinerer Wert = staerkere Fluchtpunktwirkung. Zusammen mit den
     groesseren Winkeln in site.js ergibt das eine deutlich sichtbare
     Drehung statt eines Hauchs. */
  perspective: 900px;
  display: flex;
  justify-content: center;
  /* Ohne min-width:0 weigert sich ein Flex-Element, unter die Groesse
     seines Inhalts zu schrumpfen -- die Buehne wuerde die Seite auf
     schmalen Bildschirmen breiter machen als den Viewport. */
  min-width: 0;
  max-width: 100%;
}

/* Die Kantenlaenge steht HIER, nicht weiter innen. Stuende sie an
   .rahmen__innen, muesste sich dessen "100%" auf .rahmen beziehen --
   und .rahmen bekommt seine Breite erst aus eben diesem Kind. Bei so
   einer Zirkularitaet loest der Browser die Prozentangabe nicht wie
   erwartet auf; gemessen kamen 300 px statt 600 heraus. Das Podest
   dagegen sitzt in einer Rasterspalte mit fester Breite, seine
   Prozentangabe hat also einen echten Bezug.
   Muss mit BUEHNE in build/4-baue-seiten.mjs uebereinstimmen. */
.podest {
  position: relative;
  width: min(600px, 100%);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  /* Bewusst KEIN transition: den Winkel fuehrt site.js Bild fuer Bild
     nach. Ein Uebergang auf einer staendig neu gesetzten Eigenschaft
     startet bei jeder Zeigerbewegung neu und wirkt dadurch zaeh. */
  will-change: transform;
}

/* Der Schein: dieselbe Signaturfarbe wie der Rahmen, nur unscharf und
   etwas größer. Liegt als eigenes Element hinter dem Rahmen, nicht als
   ::after darin — ein Pseudoelement mit negativem z-index würde
   innerhalb des durch transform erzeugten Stapelkontexts über dem
   Hintergrund des Elternteils landen und den scharfen Rand zudecken. */
.podest__schein {
  position: absolute;
  inset: -10px;
  border-radius: 26px;
  background: var(--sig-grad);
  filter: blur(30px);
  opacity: 0.5;
  z-index: 0;
  transition: opacity 420ms var(--kurve);
}

.podest:hover .podest__schein {
  opacity: 0.72;
}

.rahmen {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 1.5px;
  border-radius: 22px;
  background: var(--sig-grad);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Bei jedem Control dasselbe Quadrat. Die Kantenlaenge muss mit BUEHNE
   in build/4-baue-seiten.mjs uebereinstimmen -- der Generator rechnet
   die Elementgroesse als Prozentsatz davon aus.

   Hintergrundfarbe wie der Seitenhintergrund und wie demo.css in jeder
   Demo: ein iframe laesst sich nicht wirklich transparent halten, siehe
   Kommentar in build/5-baue-demos.mjs. */
.rahmen__innen {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 20.5px;
  background-color: var(--void);
  /* Standbild des Controls. Sichtbar nur, wenn der iframe nicht laedt --
     dessen Dokument ist deckend und liegt darueber. */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Das Control selbst. --el-w und --el-h sind Prozentangaben der
   Quadratkante, keine Pixel: damit behaelt ein kleines Bedienelement
   sein echtes Groessenverhaeltnis zum Quadrat, und auf einem schmalen
   Bildschirm schrumpfen Quadrat und Control gemeinsam, statt dass das
   Control ueber die Kante haengt. */
.element {
  width: calc(var(--el-w, 60) * 1%);
  height: calc(var(--el-h, 60) * 1%);
}

.demo {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* Standbild, das erscheint, wenn JavaScript aus ist oder die Demo
   nicht lädt. Liegt unter dem iframe im selben Kasten. */
.rahmen__innen .standbild {
  width: 100%;
  height: auto;
}

/* Sockel unter der Bühne — deutet den Boden an, auf dem das Control
   steht, ohne eine echte Spiegelung zu erfordern. */
.podest__sockel {
  position: absolute;
  left: 50%;
  bottom: -26px;
  translate: -50% 0;
  width: 78%;
  height: 26px;
  background: radial-gradient(
    50% 100% at 50% 0%,
    color-mix(in srgb, var(--sig) 34%, transparent),
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}

/* --- Textseite --- */
.vitrine-sektion__nummer {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--sig);
  margin: 0 0 18px;
}

.vitrine-sektion__titel {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-bottom: 18px;
}

/* Gleiches Motiv wie .detail__titel--lang: zwei Zeilen sind bei diesem
   Wortpaar gewollt, nur ohne Bindestrich mitten im Wort. */
.vitrine-sektion__titel--lang {
  hyphens: none;
}

.vitrine-sektion__text {
  color: var(--text-2);
  margin: 0 0 26px;
  max-width: 46ch;
}

.merkmale {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.merkmale li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  color: var(--text-2);
}

.merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 2px;
  background: var(--sig);
}

.vitrine-sektion__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--edge);
}

.mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sig);
  text-decoration: none;
  margin-left: auto;
  transition: gap 200ms var(--kurve);
}

.mehr:hover {
  gap: 14px;
}

/* ---------- 8. Seitenindex ---------- */
/* Sechzehn Punkte in den Signaturfarben der Controls. Die Spalte ist
   damit zugleich das Farbregister des Katalogs — sie zeigt, wie weit
   man ist, und woraus der Katalog besteht. */
.index {
  position: fixed;
  right: 22px;
  top: 50%;
  translate: 0 -50%;
  z-index: 40;
  display: grid;
  gap: 9px;
}

.index__punkt {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--p, var(--text-3));
  opacity: 0.32;
  text-decoration: none;
  transition: opacity 240ms var(--kurve), scale 240ms var(--kurve);
}

.index__punkt:hover,
.index__punkt.ist-aktiv {
  opacity: 1;
  scale: 1.45;
}

.index__punkt.ist-aktiv {
  box-shadow: 0 0 12px var(--p);
}

.index__punkt span {
  position: absolute;
  right: 20px;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--panel);
  border: 1px solid var(--edge-2);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--kurve);
}

.index__punkt:hover span {
  opacity: 1;
}

/* ---------- 9. Paket-Abschnitt ---------- */
.paket {
  position: relative;
  z-index: 1;
  padding-block: clamp(70px, 13vh, 140px);
  border-top: 1px solid var(--edge);
}

.paket__karte {
  position: relative;
  padding: clamp(32px, 5vw, 62px);
  border-radius: 22px;
  background: linear-gradient(160deg, var(--panel), var(--void-2));
  box-shadow: inset 0 0 0 1px var(--edge-2), 0 30px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.paket__karte::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 100% at 100% 0%,
    color-mix(in srgb, var(--sig) 15%, transparent),
    transparent 65%
  );
  pointer-events: none;
}

.paket__gitter {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: start;
}

.paket__titel {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 18px;
}

.enthalten {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.enthalten li {
  position: relative;
  padding-left: 30px;
  color: var(--text-2);
}

.enthalten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 16px;
  height: 9px;
  border-left: 2px solid var(--sig);
  border-bottom: 2px solid var(--sig);
  rotate: -45deg;
}

/* Die Systemvoraussetzung ist beim Verkauf die wichtigste Einschraenkung:
   wer WinCC Comfort oder Advanced einsetzt, kann mit dem Paket nichts
   anfangen. Deshalb steht sie im Angebot selbst, nicht im Kleingedruckten. */
.voraussetzung {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--edge-2);
}

.voraussetzung ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.voraussetzung li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--text-3);
}

.voraussetzung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--edge-2);
}

.preis {
  padding: 26px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--void) 60%, transparent);
  border: 1px solid var(--edge-2);
  text-align: center;
}

.preis__zahl {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
}

.preis__notiz {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 10px;
}

.preis .knopf {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
}

/* ---------- 10. Detailseite ---------- */
.detail {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 7vh, 76px);
}

.brotkrume {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 26px;
}

.brotkrume a {
  color: var(--text-3);
  text-decoration: none;
}

.brotkrume a:hover {
  color: var(--sig);
}

.detail__kopf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  padding-bottom: clamp(40px, 7vh, 76px);
}

.detail__titel {
  /* Untergrenze bewusst niedrig: "Schieberegler senkrecht" ist das
     laengste Wortpaar im Katalog und lief bei 320 px sonst um wenige
     Pixel ueber. */
  font-size: clamp(1.85rem, 5vw, 3.6rem);
  margin-bottom: 16px;
}

/* Die beiden Schieberegler-Titel ("Schieberegler senkrecht/waagerecht")
   sind die einzigen zweiwoertigen Titel im Katalog und brechen bei der
   oberen Klammer zwischen den Woertern um -- zwei Zeilen sind hier
   gewollt (jedes Wort passt einzeln bequem in die Spalte). Das globale
   "hyphens: auto" auf .display (siehe dort) ist fuer lange Komposita auf
   schmalen Bildschirmen gedacht, greift zusammen mit "text-wrap:balance"
   aber manchmal genau in diesem Wortpaar und trennt eines der beiden
   Woerter mit einem Bindestrich mitten durch -- unerwuenscht, der
   Umbruch soll ausschliesslich an der Wortgrenze passieren. Automatisch
   angewendet ab 20 Zeichen, siehe build/4-baue-seiten.mjs. */
.detail__titel--lang {
  hyphens: none;
}

.detail__text {
  color: var(--text-2);
  max-width: 48ch;
}

/* Datenblatt: die Zahlen kommen unverändert aus dem Manifest. */
/* Gleiche Begruendung wie bei .kennzahlen. */
.datenblatt {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 30px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
}

.datenblatt > div {
  flex: 1 1 128px;
  background: var(--void);
  padding: 16px 18px;
}

.datenblatt dt {
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}

.datenblatt dd {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: 0.94rem;
  color: var(--text);
}

.datenblatt__zusatz {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--sig);
}

.detail__skalierbar {
  margin: 18px 0 0;
  font-size: 0.9rem;
  color: var(--text-3);
  max-width: 52ch;
}

.abschnitt {
  padding-block: clamp(40px, 7vh, 74px);
  border-top: 1px solid var(--edge);
}

.abschnitt__titel {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  margin-bottom: 8px;
}

.abschnitt__hinweis {
  color: var(--text-3);
  font-size: 0.9rem;
  margin: 0 0 28px;
  max-width: 62ch;
}

/* Eigenschaftstabelle */
.tabelle-rolle {
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: 12px;
}

.eigenschaften {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 620px;
}

.eigenschaften th {
  text-align: left;
  padding: 13px 18px;
  background: var(--panel);
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}

.eigenschaften td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
  color: var(--text-2);
}

.eigenschaften tr:last-child td {
  border-bottom: 0;
}

.eigenschaften tr:hover td {
  background: color-mix(in srgb, var(--sig) 4%, transparent);
}

.eigenschaften code {
  font-family: var(--schrift-mono);
  font-size: 0.86rem;
  color: var(--text);
}

.marke-typ {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--edge-2);
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  color: var(--text-2);
  white-space: nowrap;
}

.farbtupfer {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid var(--edge-2);
  vertical-align: -1px;
  margin-right: 7px;
}

/* Ereignis-Protokoll der Demo */
.protokoll {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--void-2);
  border: 1px solid var(--edge);
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  color: var(--text-2);
  max-height: 170px;
  overflow-y: auto;
}

.protokoll p {
  margin: 0 0 6px;
}

.protokoll b {
  color: var(--sig);
  font-weight: 500;
}

.protokoll__leer {
  color: var(--text-3);
}

/* Weitere Controls */
.nachbarn {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.nachbar {
  display: block;
  padding: 20px;
  border-radius: 12px;
  background: var(--void-2);
  border: 1px solid var(--edge);
  text-decoration: none;
  transition: border-color 220ms var(--kurve), transform 220ms var(--kurve);
}

.nachbar:hover {
  border-color: var(--n, var(--sig));
  transform: translateY(-3px);
}

.nachbar__name {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.nachbar__text {
  font-size: 0.84rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* ---------- 11. Einfache Textseiten ---------- */
.text-seite {
  position: relative;
  z-index: 1;
  padding-block: clamp(46px, 8vh, 92px);
  max-width: 760px;
}

.text-seite h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 30px;
}

.text-seite h2 {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-stretch: 115%;
  font-size: 1.25rem;
  margin: 42px 0 12px;
}

.text-seite p {
  color: var(--text-2);
  margin: 0 0 16px;
}

.text-seite a {
  color: var(--sig);
}

/* Lücke, die vor der Veröffentlichung gefüllt werden muss. Bewusst
   auffällig: eine übersehene Pflichtangabe ist ein rechtliches
   Problem, kein Schönheitsfehler. */
.luecke {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 4px;
  background: rgba(230, 35, 41, 0.16);
  border: 1px dashed #e62329;
  color: #ff8b8f;
  font-family: var(--schrift-mono);
  font-size: 0.8rem;
}

.hinweiskasten {
  padding: 18px 22px;
  border-radius: 10px;
  background: var(--void-2);
  border: 1px solid var(--edge-2);
  border-left: 3px solid var(--sig);
  margin: 26px 0;
}

.hinweiskasten p:last-child {
  margin-bottom: 0;
}

/* Formular */
.formular {
  display: grid;
  gap: 16px;
  max-width: 520px;
  margin-top: 30px;
}

/* Ohne das gewinnt ".formular{display:grid}" gegen das eingebaute
   "[hidden]{display:none}" des Browsers -- beide haben dieselbe
   Spezifitaet (eine Klasse/ein Attribut), und Autoren-CSS schlaegt bei
   Gleichstand immer das User-Agent-Stylesheet. site.js setzt
   form.hidden nach erfolgreichem Versand; ohne diese Regel bliebe das
   Formular trotzdem sichtbar -- per Kontaktbogen-Test gefunden. */
.formular[hidden] {
  display: none;
}

.feld {
  display: grid;
  gap: 7px;
}

.feld label {
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.feld input,
.feld textarea {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--void-2);
  border: 1px solid var(--edge-2);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 0.95rem;
}

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--sig);
}

/* Kontaktformular: Sperrfalle fuer simple Bots (siehe dienst/kontakt-dienst.mjs).
   Bewusst nicht display:none -- manche Bots ueberspringen unsichtbare Felder
   gezielt, andere fuellen blind alles im DOM aus. Fuer echte Nutzer unsichtbar
   und unerreichbar: aus dem Sichtfeld geschoben, nicht per Tab erreichbar,
   Screenreader ueberspringt es per aria-hidden am Elternelement. */
.feld--hp {
  position: absolute;
  left: -5000px;
  top: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__datenschutz {
  margin-top: -4px;
  font-size: 0.82rem;
  color: var(--text-3);
}

.formular__datenschutz a {
  color: var(--text-3);
  text-decoration: underline;
}

/* Rueckmeldung nach dem Absenden. Funktioniert OHNE JavaScript: der
   Versanddienst schickt nach einem echten <form>-POST per 303-Redirect auf
   "...#formular-ok" bzw. "...#formular-fehler" zurueck, ":target" zeigt genau
   den passenden Kasten. site.js (Abschnitt 8) schaltet bei vorhandenem
   JavaScript stattdessen per Klasse "ist-sichtbar" um, ohne Seitensprung --
   deshalb rueckt beides denselben Kasten in den Vordergrund. */
.formular-status {
  display: none;
  max-width: 520px;
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: 10px;
  background: var(--void-2);
  border: 1px solid var(--edge-2);
  border-left: 3px solid var(--sig);
}

.formular-status:target,
.formular-status.ist-sichtbar {
  display: block;
}

.formular-status p:last-child {
  margin-bottom: 0;
}

.formular-status--fehler {
  border-left-color: #e62329;
}

/* ---------- 12. Fußzeile ---------- */
.fuss {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--edge);
  padding-block: 46px;
  color: var(--text-3);
  font-size: 0.88rem;
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: center;
}

.fuss a {
  color: var(--text-3);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--text);
}

.fuss__rechts {
  margin-left: auto;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* ---------- 13. Einblenden beim Scrollen ---------- */
.zeigt {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 700ms var(--kurve), translate 700ms var(--kurve);
}

.zeigt.ist-sichtbar {
  opacity: 1;
  translate: 0 0;
}

/* ---------- 14. Schmalere Bildschirme ---------- */
@media (max-width: 1100px) {
  .index {
    display: none;
  }
}

/* Frueh genug umbrechen: nebeneinander teilen sich Text und Buehne
   den Platz, und unterhalb von rund 1150 px bleibt fuer die Buehne so
   wenig uebrig, dass das Control kleiner wird als noetig. Untereinander
   bekommt sie die volle Breite. Gemessen bei 1024 px: 420 px
   nebeneinander gegenueber 597 px untereinander. */
@media (max-width: 1150px) {
  .vitrine-sektion__gitter,
  .paket__gitter,
  .detail__kopf {
    grid-template-columns: 1fr;
  }

  /* Auf einer Spalte steht die Bühne immer oben — abwechselnd wirkt
     nur nebeneinander, untereinander wäre es bloß eine unerklärliche
     Reihenfolge. */
  .vitrine-sektion:nth-child(even) .vitrine-sektion__buehne {
    order: 0;
  }

  .podest {
    --rx: 0deg;
    --ry: 0deg;
  }
}

@media (max-width: 720px) {
  .kopf__nav .verstecken-klein {
    display: none;
  }

  .held__tasten .knopf {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 15. Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .podest {
    --rx: 0deg !important;
    --ry: 0deg !important;
  }

  .zeigt {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- 16. Ohne JavaScript ---------- */
/* Die Einblend-Animation darf den Inhalt nicht verschlucken, wenn der
   Beobachter nie läuft. */
.kein-js .zeigt {
  opacity: 1;
  translate: 0 0;
}