/* =============================================================
   meinebetriebsseite.de — HTML-Fassung
   Ein Stilblatt für alle Seiten. Reines CSS, kein Tailwind,
   kein Build. Farben und Maße stehen ganz oben als Variablen:
   wer dort etwas ändert, ändert es auf allen Seiten.
   ============================================================= */

/* ---------------------------------------------------- Schriften */

@font-face {
  font-family: "Instrument Serif";
  src: url("../schrift/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../schrift/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../schrift/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------ Grundwerte */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist", ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #05060a;
  --bg-elevated: #0c0e14;
  --bg-subtle: #12151d;
  --fg: #e8eef5;
  --muted: #8b93a1;
  --faint: #7f8794;   /* 06.09.2026 angehoben: #5c6472 kam auf 3,06 Kontrast — unter
                          der Lesbarkeitsgrenze. Jetzt 5,0 bis 5,6, und immer noch
                          klar leiser als --muted (5,9 bis 6,5). */
  --line: rgba(232, 238, 245, 0.1);
  --line-strong: rgba(232, 238, 245, 0.2);
  --accent: #67e8f9;
  --accent-dim: #22d3ee;
  --accent-fg: #041016;
  --glow: rgba(103, 232, 249, 0.28);
  --warn: #e9b45f;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;

  --schatten-glow: 0 0 40px rgba(103, 232, 249, 0.22), 0 0 80px rgba(34, 211, 238, 0.12);
  --schatten-glow-weich: 0 0 24px rgba(103, 232, 249, 0.16);

  --breite: 72rem;      /* Standardbreite des Inhalts */
  --breite-weit: 80rem;
  --breite-schmal: 48rem;
  --rand: 1.25rem;      /* Seitenrand auf dem Telefon */

  --film-tshadow: 0 1px 2px rgba(3, 5, 9, 0.95), 0 3px 12px rgba(3, 5, 9, 0.8),
    0 10px 44px rgba(3, 5, 9, 0.82);
}

@media (min-width: 768px) {
  :root {
    --rand: 2rem;
  }
}

/* ---------------------------------------------------------- Basis */

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

html,
body {
  /* clip statt hidden: hidden macht einen Scrollcontainer daraus und
     position: sticky klebt danach an der falschen Stelle. */
  overflow-x: clip;
}

html {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

h1, h2, h3 {
  text-wrap: balance;
  font-weight: 400;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

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

img {
  background-color: var(--bg-subtle);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

::selection {
  background: color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--fg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

:focus:not(:focus-visible) {
  outline: none;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------ Bausteine */

.huelle {
  position: relative;
  z-index: 10;
}

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.bahn-weit { max-width: var(--breite-weit); }
.bahn-schmal { max-width: var(--breite-schmal); }

.block { padding-block: 4rem; }
.block-gross { padding-block: 4rem; }
.oben-linie { border-top: 1px solid var(--line); }
.flaeche-hoch { background: color-mix(in oklab, var(--bg-elevated) 30%, transparent); }
.flaeche-hoch-stark { background: color-mix(in oklab, var(--bg-elevated) 60%, transparent); }
.kopfabstand { padding-top: 7rem; }

@media (min-width: 768px) {
  .block { padding-block: 5rem; }
  .block-gross { padding-block: 6rem; }
  .kopfabstand { padding-top: 9rem; }
}

.kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.kicker-still { color: var(--faint); }

.h-gross {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 0.95;
  color: var(--fg);
}

.h-mittel {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.02;
  color: var(--fg);
}

.h-klein {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  color: var(--fg);
}

.lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 42rem;
}

.text-still { color: var(--muted); }
.text-leise { color: var(--faint); }
.text-akzent { color: var(--accent); }
.klein { font-size: 13px; line-height: 1.65; }
.mini { font-size: 12px; }
.kursiv-akzent { font-style: italic; color: var(--accent); text-shadow: 0 0 24px rgba(103, 232, 249, 0.35); }
.zahlen { font-variant-numeric: tabular-nums; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }
.mt-6 { margin-top: 2.5rem; }
.mt-8 { margin-top: 3.5rem; }

.tafel {
  background: color-mix(in oklab, var(--bg-elevated) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
}

.linie { border-top: 1px solid var(--line); }

/* --------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex;
  height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--schatten-glow-weich);
  transition: filter 150ms ease;
}

.knopf:hover { filter: brightness(1.1); }

.knopf-still {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
  box-shadow: none;
  transition: border-color 200ms ease, color 200ms ease;
}

.knopf-still:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  color: var(--fg);
  filter: none;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-size: 14px;
}

.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }

.pfeil { width: 1rem; height: 1rem; flex: none; }

/* ------------------------------------------------------ Hintergrund */

.koerner {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: koerner-schub 6s steps(4) infinite;
}

@keyframes koerner-schub {
  0% { background-position: 0 0; }
  25% { background-position: -36px 22px; }
  50% { background-position: 24px -28px; }
  75% { background-position: -18px -14px; }
  100% { background-position: 0 0; }
}

.licht {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.licht-kugel {
  position: absolute;
  left: 50%;
  top: -16rem;
  width: 52rem;
  height: 52rem;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: radial-gradient(circle, var(--glow), transparent 62%);
  animation: puls 6s ease-in-out infinite;
}

.licht-kugel-2 {
  position: absolute;
  left: -10rem;
  top: 33%;
  width: 34rem;
  height: 34rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.09), transparent 66%);
}

@keyframes puls {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Lesefortschritt oben am Bildrand. */
.fortschritt {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* -------------------------------------------------------- Kopfleiste */

.kopf {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}

.kopf[data-gescrollt="ja"],
.kopf[data-offen="ja"] {
  border-bottom-color: var(--line);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(20px);
}

.kopf-innen {
  display: flex;
  height: 4rem;
  max-width: var(--breite);
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--rand);
}

.marke { display: flex; align-items: center; gap: 0.75rem; }

.marke-zeichen {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}

.marke-zeichen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--glow), transparent 70%);
}

.marke-zeichen span { position: relative; }

.marke-name { display: flex; flex-direction: column; line-height: 1; }
.marke-name b { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.marke-name small { margin-top: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--faint); }

.hauptmenue { display: none; align-items: center; gap: 1.75rem; }

@media (min-width: 1024px) {
  .hauptmenue { display: flex; }
}

.hauptmenue a {
  position: relative;
  padding-block: 0.25rem;
  font-size: 13px;
  color: var(--muted);
  transition: color 200ms ease;
}

.hauptmenue a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.hauptmenue a:hover { color: var(--fg); }
.hauptmenue a:hover::after,
.hauptmenue a[aria-current="page"]::after { transform: scaleX(1); }
.hauptmenue a[aria-current="page"] { color: var(--fg); }

.kopf-rechts { display: flex; align-items: center; gap: 0.5rem; }

.kopf-knopf {
  display: none;
  height: 2.25rem;
  padding-inline: 1rem;
  align-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--schatten-glow-weich);
}

@media (min-width: 640px) {
  .kopf-knopf { display: inline-flex; }
}

.menue-schalter {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--fg);
}

@media (min-width: 1024px) {
  .menue-schalter { display: none; }
}

.klappmenue {
  display: none;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 95%, transparent);
  backdrop-filter: blur(20px);
  padding: 1.5rem var(--rand);
}

.kopf[data-offen="ja"] .klappmenue { display: block; }

@media (min-width: 1024px) {
  .kopf[data-offen="ja"] .klappmenue { display: none; }
}

.klappmenue a {
  display: block;
  border-radius: var(--r-md);
  padding: 0.75rem;
  font-size: 16px;
  color: var(--fg);
}

.klappmenue .knopf { width: 100%; margin-top: 0.75rem; }

.sprungmarke {
  position: absolute;
  left: -9999px;
}

.sprungmarke:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 70;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.5rem 1rem;
  font-size: 14px;
}

/* ------------------------------------------------------------ Fuß */

.fuss {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg-elevated);
}

.fuss::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 50%, transparent), transparent);
}

.fuss-raster {
  display: grid;
  gap: 2.5rem;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 4rem var(--rand);
}

@media (min-width: 768px) {
  .fuss-raster { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.fuss-spalte p.titel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--faint);
}

.fuss-spalte ul { margin-top: 1rem; display: grid; gap: 0.5rem; }
.fuss-spalte a { font-size: 14px; color: var(--muted); transition: color 200ms ease; }
.fuss-spalte a:hover { color: var(--fg); }

.fuss-adresse { margin-top: 1.5rem; font-style: normal; font-size: 14px; color: var(--muted); display: grid; gap: 0.25rem; }

.fuss-unten { border-top: 1px solid var(--line); }

.fuss-unten-innen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 1.25rem var(--rand);
  font-size: 12px;
  color: var(--faint);
}

@media (min-width: 768px) {
  .fuss-unten-innen { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ------------------------------------------------------- Raster */

.raster { display: grid; gap: 1.25rem; }

@media (min-width: 900px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .raster-hero { grid-template-columns: 0.86fr 1.14fr; align-items: center; }
}
.raster-2 { display: grid; gap: 1.25rem; }
.raster-3 { display: grid; gap: 1.25rem; }
.raster-4 { display: grid; gap: 1.25rem; }

@media (min-width: 640px) {
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zeile-verteilt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.karte {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--bg-elevated) 60%, transparent);
  padding: 1.5rem;
}

.karte-hell { background: var(--bg); }

/* Fugenraster: 1px Linien zwischen den Feldern, wie im Original. */
.fugen {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--line);
}

.fugen > * {
  background: color-mix(in oklab, var(--bg-elevated) 60%, var(--bg));
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .fugen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fugen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .fugen-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .fugen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------------------- Auftritte */

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.auftritt { opacity: 0; }

.auftritt[data-sichtbar="ja"] {
  animation: auftauchen 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.verzug-1 { animation-delay: 80ms; }
.verzug-2 { animation-delay: 160ms; }
.verzug-3 { animation-delay: 240ms; }
.verzug-4 { animation-delay: 320ms; }

/* Wenn JavaScript aus ist, muss der Inhalt trotzdem stehen. */
.kein-js .auftritt { opacity: 1; }

/* -------------------------------------------------------- Zähler */

.zaehler-reihe {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .zaehler-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zaehler-wert {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.zaehler-label { margin-top: 0.5rem; font-size: 12px; line-height: 1.5; color: var(--faint); }

/* ---------------------------------------------------- Preiskarten */

.preis-karte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: color-mix(in oklab, var(--bg-elevated) 60%, transparent);
  padding: 1.75rem;
  transition: border-color 300ms ease, transform 300ms ease;
}

.preis-karte:hover { border-color: color-mix(in oklab, var(--accent) 35%, transparent); }

.preis-karte[data-empfohlen="ja"] {
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: var(--schatten-glow-weich);
}

.preis-marke {
  align-self: flex-start;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}

.preis-karte[data-empfohlen="ja"] .preis-marke { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }

.preis-zahl {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.preis-liste { margin-top: 1.5rem; display: grid; gap: 0.5rem; }

.preis-liste li {
  display: flex;
  gap: 0.5rem;
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--fg) 90%, transparent);
}

.haken { flex: none; width: 1rem; height: 1rem; margin-top: 0.2rem; color: var(--accent); }

/* --------------------------------------------------------- Tabelle */

.tabelle-huelle { overflow-x: auto; }

table.tafel-tabelle {
  width: 100%;
  min-width: 44rem;
  text-align: left;
}

table.tafel-tabelle th,
table.tafel-tabelle td {
  padding: 0.85rem 1rem 0.85rem 0;
  vertical-align: top;
  font-weight: 400;
}

table.tafel-tabelle thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}

table.tafel-tabelle tbody tr { border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent); }
table.tafel-tabelle tbody th { font-size: 13px; color: var(--muted); white-space: nowrap; }
table.tafel-tabelle tbody td { font-size: 13px; color: var(--fg); }

/* Magnetspalte: die Spalte unter dem Zeiger hebt sich. */
table.magnet tbody td[data-spalte].heiss,
table.magnet thead th[data-spalte].heiss {
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  color: var(--fg);
}

table.magnet thead th[data-spalte] {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
}

/* ----------------------------------------------------------- FAQ */

.faq { border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: 15px;
  color: var(--fg);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 250ms ease;
}

.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.faq .antwort {
  padding-bottom: 1.25rem;
  max-width: 52rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ------------------------------------------------------ Formulare */

.feld { display: block; font-size: 14px; }
.feld > span { color: var(--muted); }
.feld .pflicht { color: var(--accent); }

.feld input,
.feld textarea {
  margin-top: 0.35rem;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  outline: none;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.feld input {
  height: 3rem;
  border-radius: 999px;
  padding-inline: 1rem;
}

.feld textarea {
  border-radius: var(--r-lg);
  padding: 0.75rem 1rem;
  resize: vertical;
}

.feld input:focus,
.feld textarea:focus {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent);
}

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.zustimmung input {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  flex: none;
  accent-color: var(--accent);
}

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.meldung {
  margin-top: 1rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent);
  background: color-mix(in oklab, var(--warn) 10%, transparent);
  padding: 0.75rem 1rem;
  font-size: 14px;
  color: var(--fg);
}

.meldung-gut {
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* Modellwahl auf der Kaufen-Seite. */
.wahl {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: transparent;
  padding: 1.25rem;
  text-align: left;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 150ms ease;
}

.wahl:active { transform: scale(0.99); }

.wahl[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  background: var(--bg-elevated);
  box-shadow: var(--schatten-glow-weich);
}

/* --------------------------------------------------------- Regler */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: var(--line-strong);
}

input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: var(--line-strong);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.14), 0 0 18px var(--glow);
  transition: box-shadow 200ms ease;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.14), 0 0 18px var(--glow);
}

.regler-marken {
  margin-top: 0.35rem;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}

/* --------------------------------------------------- Vorher/Nachher */

.schieber {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  aspect-ratio: 16 / 10;
  touch-action: pan-y;
  user-select: none;
}

.schieber-seite {
  position: absolute;
  inset: 0;
}

.schieber-oben { clip-path: inset(0 0 0 var(--teiler, 50%)); }

.schieber-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--teiler, 50%);
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--glow);
  cursor: ew-resize;
}

.schieber-griff::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px);
}

/* GEMESSEN 13.09.2026: bei 75 Prozent Deckung schien die helle Haelfte
   des Vergleichs durch, und var(--faint) auf 10 px kam auf 2,5 zu 1.
   Jetzt 92 Prozent Deckung und var(--fg). */
.schieber-marke {
  position: absolute;
  top: 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg);
  backdrop-filter: blur(6px);
}

.schieber-marke-links { left: 1rem; }
.schieber-marke-rechts { right: 1rem; }

/* -------------------------------------------------- Bilderbahn */

.bahnband {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bahnband-spur {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: laufband 42s linear infinite;
}

.bahnband:hover .bahnband-spur { animation-play-state: paused; }

@keyframes laufband {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.bahnband-stueck {
  flex: none;
  width: 15rem;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* -------------------------------------------- Sticky-Ablauf (Tafeln) */

.stapel { position: relative; }

.stapel-buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  align-content: center;
  isolation: isolate;
}

.stapel-schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 20% 40%, rgba(34, 211, 238, 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg-elevated), var(--bg));
}

.stapel-tafeln { display: grid; }

.stapel-tafel {
  grid-area: 1 / 1;
  max-width: 34rem;
  margin-inline: var(--rand);
  opacity: 0;
  transform: translateX(-3rem);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}

.stapel-tafel[data-aktiv="ja"] { opacity: 1; transform: none; pointer-events: auto; }

.stapel-schritte { display: grid; gap: 1px; }

/* Ohne JavaScript stehen alle Tafeln untereinander. */
.kein-js .stapel-buehne { position: static; height: auto; padding-block: 3rem; }
.kein-js .stapel-tafeln { display: grid; gap: 3rem; }
.kein-js .stapel-tafel { grid-area: auto; opacity: 1; transform: none; }

/* ---------------------------------------------- Waagerechte Galerie */

.galerie-bahn {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.galerie-bahn::-webkit-scrollbar { display: none; }

.galerie-stueck {
  flex: none;
  width: min(22rem, 78vw);
  scroll-snap-align: start;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-elevated);
}

/* ------------------------------------------------------- Gerätrahmen */

.geraet { width: 100%; }

.geraet-schirm {
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle);
}

.geraet-laptop .geraet-schirm {
  border: 1px solid var(--line-strong);
  border-radius: 10px 10px 2px 2px;
  aspect-ratio: 16 / 10;
}

.geraet-laptop .geraet-fuss {
  height: 8px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, var(--bg-subtle), var(--bg));
  border: 1px solid var(--line);
  border-top: none;
}

.geraet-telefon .geraet-schirm {
  border: 2px solid var(--line-strong);
  border-radius: 22px;
  aspect-ratio: 9 / 19;
}

.geraet-tablet .geraet-schirm {
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  aspect-ratio: 3 / 4;
}

.geraet-schirm iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 900px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.geraet-unterschrift {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}

/* Vorschau ohne Rahmen (Fallstudien, Vergleich). */
.vorschau {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--bg-subtle);
  aspect-ratio: 16 / 10;
}

.vorschau iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* ------------------------------------------------------- Fallstudien */

.fall {
  display: grid;
  gap: 1.5rem;
  overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-elevated) 60%, transparent);
  transition: border-color 300ms ease;
}

.fall:hover { border-color: color-mix(in oklab, var(--accent) 35%, transparent); }

@media (min-width: 768px) {
  .fall { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

.fall-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--bg-subtle) 60%, transparent);
  padding: 1.75rem;
}

.fall-marke {
  position: absolute;
  left: 1rem;
  top: 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
  backdrop-filter: blur(6px);
}

.fall-text { padding: 1.5rem; }

@media (min-width: 768px) {
  .fall-text { padding: 2rem; }
}

/* ------------------------------------------------------ Musterleiste */

.musterleiste {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.75rem;
  pointer-events: none;
}

/* GEMESSEN 13.09.2026: die Leiste liegt auch ueber der HELLEN
   Standard-Musterseite. Bei 90 Prozent Deckung schien Weiss durch, und
   var(--muted) kam dort auf 4,0 zu 1, var(--faint) auf 3,6 — beides
   unter den 4,5, die WCAG AA fuer 12-px-Text verlangt. Jetzt deckt die
   Leiste 96 Prozent und die Schrift ist eine Stufe heller. Der
   Weichzeichner dahinter bleibt, der Eindruck aendert sich kaum. */
.musterleiste-innen {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 48rem;
  margin-inline: auto;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  padding: 0.5rem 0.75rem;
  backdrop-filter: blur(20px);
  color: var(--fg);
}

.musterleiste a {
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  color: var(--fg);
  transition: color 200ms ease;
}

/* Die Preiszeile in der Leiste erbt sonst text-leise (--faint) und
   faellt damit ebenfalls unter die Grenze. */
.musterleiste-innen .text-leise,
.musterleiste-innen .mini { color: var(--muted); }

.musterleiste a:hover { color: var(--accent); }
.musterleiste a[aria-current="page"] { background: var(--accent); color: var(--accent-fg); }
.musterleiste a.stark { background: var(--accent); color: var(--accent-fg); font-weight: 500; padding-inline: 1rem; }

/* ============================================================
   Scrollfilm "Durch die Leitung" — 1:1 aus der App-Fassung.
   Die Regeln darin sind teuer erkauft, nicht anfassen:
   die Hülle braucht overflow-x: clip, nicht hidden.
   ============================================================ */

.film { position: relative; }
.film[data-film="an"] { height: 620vh; }
.film[data-film="aus"] { min-height: 100svh; }

.film-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.film[data-film="aus"] .film-buehne { position: relative; }

.film-video,
.film-standbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transform: translateZ(0);
}

.film-video { z-index: 1; opacity: 0; transition: opacity 600ms ease; }
.film-buehne.film-bereit .film-video { opacity: 1; }
.film-buehne.film-fehlt .film-video,
.film[data-film="aus"] .film-video { display: none; }

.film-schleier {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 92% at 50% 44%, rgba(5, 6, 10, 0) 34%, rgba(5, 6, 10, 0.64) 100%),
    linear-gradient(to bottom, rgba(5, 6, 10, 0.5) 0%, rgba(5, 6, 10, 0) 22%),
    linear-gradient(to bottom, rgba(5, 6, 10, 0) 74%, var(--bg) 100%);
}

.film-band {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 7rem 1.5rem 6rem;
  text-align: center;
  pointer-events: none;
}

.film-band::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  pointer-events: none;
  opacity: calc(0.3 + 0.7 * var(--k, 1));
  background: radial-gradient(ellipse 78% 44% at 50% 50%,
    rgb(4 6 12 / calc(var(--scrim, 0.62) * 100%)) 0%,
    rgb(4 6 12 / calc(var(--scrim, 0.62) * 62%)) 46%,
    rgb(4 6 12 / 0%) 76%);
}

.film-band-4 { align-content: center; padding-bottom: 26vh; pointer-events: auto; }

.film-band-4::before {
  background: radial-gradient(ellipse 80% 40% at 50% 37%,
    rgb(4 6 12 / calc(var(--scrim, 0.5) * 100%)) 0%,
    rgb(4 6 12 / calc(var(--scrim, 0.5) * 60%)) 48%,
    rgb(4 6 12 / 0%) 78%);
}

/* Ohne Film gibt es keinen Scrollfortschritt, der die Auftritte treibt.
   Ohne diese Zeile stehen alle Buchstaben auf Deckkraft null. */
.film[data-film="aus"] .film-band { --k: 1; opacity: 1; visibility: visible; }

.film[data-film="aus"] .film-band-1,
.film[data-film="aus"] .film-band-2,
.film[data-film="aus"] .film-band-3 { display: none; }

.film-zeile {
  max-width: 17ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  color: var(--fg);
  text-shadow: var(--film-tshadow);
}

.film-zeile-leise {
  max-width: 26ch;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  line-height: 1.4;
  color: rgba(232, 238, 245, 0.82);
  margin-top: 0.9rem;
}

.film-zeile-gross { max-width: 14ch; font-size: clamp(2.6rem, 7.4vw, 6rem); }

.film-h1 {
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  line-height: 0.98;
  color: var(--fg);
  text-shadow: var(--film-tshadow);
}

.film-sub {
  max-width: 44ch;
  margin-top: 1.35rem;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  color: rgba(232, 238, 245, 0.78);
  text-shadow: var(--film-tshadow);
}

.film-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.1rem; }
.film-knoepfe a { text-shadow: none; }

.film[data-film="aus"] .film-anschalter[data-zeigen="ja"] { display: inline; }

.film-anschalter {
  display: none;
  margin-top: 1.4rem;
  background: none;
  border: 0;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fb-wort { display: inline-block; white-space: nowrap; margin-right: 0.26em; }
.fb-wort:last-child { margin-right: 0; }
.fb-zeichen { display: inline-block; will-change: transform, opacity; }

.fb-sinken .fb-zeichen {
  --kc: clamp(0, (var(--k, 0) - var(--off, 0) - var(--th, 0)) * 2.4, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * -0.5em));
}

.fb-tiefe .fb-zeichen {
  --kc: clamp(0, (var(--k, 0) - var(--off, 0) - var(--th, 0)) * 2.6, 1);
  opacity: var(--kc);
  transform: scale(calc(0.7 + 0.3 * var(--kc))) translateY(calc((1 - var(--kc)) * 0.25em));
}

.fb-oben {
  --kc: clamp(0, var(--k, 0) * 1.7, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 0.75em));
}

.fb-unten {
  --kc: clamp(0, (var(--k, 0) - 0.12) * 1.7, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * -0.75em));
}

.fb-heben {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.2, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 0.6em));
}

/* ---- Partikelschrift im Scrollfilm (13.09.2026) -----------------
   Scotts Auftrag: "der text der waehrend den scroll films
   eingeblendet wird muss sich aus den partikeln formen."

   filmschrift.js setzt data-schrift="partikel" am Abschnitt, sobald
   der Film wirklich scrubbt. Dann uebernehmen die Teilchen den
   Auftritt. Die echte Schrift bleibt dabei im Dokument stehen —
   Layout, Vorleser und Markieren bleiben unangetastet —, sie ist nur
   unsichtbar, bis sich die Teilchen gesetzt haben. Ab --k 0,78
   blendet sie ein und ist am Ende scharf. So ist die BILDUNG
   Teilchenarbeit, der Ruhezustand aber echter Text und kein Bild
   davon.

   Zwei Dinge, die hier nicht weich werden duerfen:
   1. transform MUSS neutral sein. filmschrift.js liest die Zielpunkte
      aus getBoundingClientRect der Buchstabenkaesten; eine laufende
      Verschiebung baute die Schrift daneben.
   2. Die Regeln haengen an data-film="an". Auf dem Standbild (Handy,
      "weniger Bewegung", kein Film) laeuft keine Leinwand, und dann
      muss der Text wie bisher einfach dastehen. */
.film[data-film="an"][data-schrift="partikel"] .film-zeile,
.film[data-film="an"][data-schrift="partikel"] .film-h1,
.film[data-film="an"][data-schrift="partikel"] .film-sub {
  --kt: clamp(0, (var(--k, 0) - 0.78) / 0.22, 1);
  opacity: var(--kt);
  transform: none;
}
.film[data-film="an"][data-schrift="partikel"] .fb-zeichen,
.film[data-film="an"][data-schrift="partikel"] .fb-wort,
.film[data-film="an"][data-schrift="partikel"] .fs-teil {
  opacity: 1;
  transform: none;
}

/* Zeilen ohne eigene Kaesten (Band 3, die Unterzeile) bekommen von
   filmschrift.js einen Kasten je Wort — sonst gibt es nichts
   auszumessen. */
.fs-teil { display: inline-block; white-space: nowrap; }

/* Die Leinwand liegt UEBER den Baendern (die stehen auf 3), damit der
   dunkle Hof der Baender die Teilchen nicht schluckt. Zeiger nimmt sie
   nicht an, die Knoepfe in Band 4 bleiben also anklickbar. */
.film-schrift {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .film-schrift { display: none; }
}

.film-ring {
  position: absolute;
  z-index: 4;
  right: 1.75rem;
  bottom: 1.75rem;
  width: 34px;
  height: 34px;
  color: var(--accent);
  opacity: 0.5;
  transform: rotate(-90deg);
  transition: opacity 400ms ease;
}

.film-buehne.film-bereit .film-ring,
.film-buehne.film-fehlt .film-ring,
.film[data-film="aus"] .film-ring { opacity: 0; }

.film-leitung {
  position: absolute;
  z-index: 4;
  left: 2.25rem;
  top: 7rem;
  bottom: 4.5rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(232, 238, 245, 0.16), rgba(232, 238, 245, 0.05));
}

.film-leitung-fuellung {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(to bottom, transparent, var(--accent));
  box-shadow: 0 0 12px var(--glow);
}

.film-leitung-knoten {
  position: absolute;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(232, 238, 245, 0.28);
}

.film-hinweis {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: clamp(0, 1 - var(--p, 0) * 22, 1);
}

.film-hinweis-strich { width: 1px; height: 2.5rem; background: linear-gradient(to bottom, var(--accent), transparent); }

.film[data-film="aus"] .film-leitung,
.film[data-film="aus"] .film-hinweis { display: none; }

@media (max-width: 1023px) {
  .film-leitung { display: none; }
}

.film-diag {
  position: absolute;
  z-index: 5;
  left: 5rem;
  bottom: 1rem;
  max-width: 24rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: rgba(8, 8, 15, 0.74);
  border: 1px solid rgba(96, 96, 126, 0.35);
  backdrop-filter: blur(10px);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.film-diag button {
  margin-top: 0.35rem;
  background: none;
  border: 0;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Der Balken unter dem Film: der frühere Hero, jetzt Beweisstrecke. */
.letterbox {
  pointer-events: none;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 48px 80px rgba(5, 6, 10, 0.55), inset 0 -80px 90px rgba(5, 6, 10, 0.85);
}

.branchen {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-block: 0.5rem 1rem;
  scrollbar-width: none;
}

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

.branchen li {
  flex: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}

/* =============================================================
   Tropfenwellen und Partikelfeld
   ============================================================= */

/* Die Wasserfläche liegt über dem Inhalt, aber unter Kopfleiste (50)
   und Fortschrittsbalken (60), damit die Navigation scharf bleibt.
   Sie nimmt keine Zeiger an — gehört wird am Dokument. */
.tropfen-flaeche {
  position: fixed;
  inset: 0;
  z-index: 45;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 420ms ease;
}

html[data-tropfen="an"] .tropfen-flaeche { opacity: 1; }
html[data-tropfen="aus"] .tropfen-flaeche { display: none; }

/* Der Regler */
.tropfen-regler {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.55rem;
  font-family: var(--font-sans);
}

.tropfen-griff {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(12, 14, 20, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.tropfen-griff svg { width: 15px; height: 15px; }
.tropfen-griff:hover,
.tropfen-griff:focus-visible {
  color: var(--fg);
  border-color: var(--line-strong);
  box-shadow: var(--schatten-glow-weich);
}
.tropfen-regler[data-offen="ja"] .tropfen-griff { color: var(--accent); border-color: var(--line-strong); }

.tropfen-tafel {
  width: min(19rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(9, 11, 16, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.9);
}

.tropfen-kopf { margin-bottom: 0.9rem; }
.tropfen-titel { font-family: var(--font-display); font-size: 1.15rem; color: var(--fg); }
.tropfen-hinweis { margin-top: 0.2rem; font-size: 0.78rem; line-height: 1.45; color: var(--faint); }

.tropfen-schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--fg);
  cursor: pointer;
}
.tropfen-schalter input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-dim); cursor: pointer; }

.tropfen-zeile { display: block; margin-top: 0.85rem; cursor: pointer; }
.tropfen-marke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.tropfen-wert { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent); }

.tropfen-schieber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.9rem;
  margin-top: 0.15rem;
  background: transparent;
  cursor: pointer;
}
.tropfen-schieber::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-dim), rgba(232, 238, 245, 0.14));
}
.tropfen-schieber::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-dim), rgba(232, 238, 245, 0.14));
}
.tropfen-schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.16);
}
.tropfen-schieber::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.16);
}
.tropfen-schieber:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.tropfen-glaetten {
  width: 100%;
  height: 2.4rem;
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.tropfen-glaetten:hover { color: var(--fg); border-color: var(--line-strong); }

.tropfen-diag {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--faint);
  word-break: break-word;
}
.tropfen-diag:empty { display: none; }

/* Einmaliger Hinweis neben der Pille. Ein Effekt, den man nur durch
   Klicken findet, wird sonst nie gefunden. */
.tropfen-tipp {
  max-width: min(17rem, calc(100vw - 2rem));
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(9, 11, 16, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: right;
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.9);
  animation: tropfen-tipp-auf 520ms ease both;
  transition: opacity 420ms ease, transform 420ms ease;
}
.tropfen-tipp[data-weg="ja"] { opacity: 0; transform: translateY(6px); }

@keyframes tropfen-tipp-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tropfen-tipp { animation: none; }
}

@media (max-width: 640px) {
  .tropfen-griff span { display: none; }
  .tropfen-griff { padding: 0 0.8rem; }
}

@media print {
  .tropfen-flaeche,
  .tropfen-regler { display: none !important; }
}

/* Das Partikelfeld sitzt als Hintergrund in seiner Bahn. */
.partikel-flaeche {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
  /* Links steht der Text. Dort tritt das Feld zurueck, sonst liest sich
     die Schlusszeile nicht mehr. */
  -webkit-mask-image: linear-gradient(96deg, transparent 4%, rgba(0, 0, 0, 0.28) 30%, #000 70%);
  mask-image: linear-gradient(96deg, transparent 4%, rgba(0, 0, 0, 0.28) 30%, #000 70%);
}

[data-partikel] { position: relative; overflow: hidden; }
[data-partikel] > *:not(.partikel-flaeche) { position: relative; z-index: 1; }

/* =============================================================
   Kopfleiste, zweite Fassung — 05.09.2026

   Vorher stand das Menü als graue Kleinschrift auf durchsichtigem
   Grund; auf hellen Stellen des Films war es kaum zu finden. Jetzt
   trägt die Leiste immer einen eigenen Grund, jeder Menüpunkt ist
   ein eigener Knopf, und die aktive Seite ist als solche zu sehen.
   Die HTML-Dateien bleiben dabei unangetastet — alles hier.
   ============================================================= */

.kopf {
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.kopf[data-gescrollt="ja"],
.kopf[data-offen="ja"] {
  border-bottom-color: var(--line-strong);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 12px 34px -26px rgba(0, 0, 0, 0.95);
}

.kopf-innen { height: 4.5rem; gap: 1rem; }

/* Marke etwas kräftiger — sie ist der Anker der Leiste. */
.marke-zeichen {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 20px;
  border-color: var(--line-strong);
  box-shadow: var(--schatten-glow-weich);
}
.marke-name b { font-size: 14px; font-weight: 600; }
.marke-name small { color: var(--muted); }

/* --------------------------------------------- Menü als Knöpfe */

.hauptmenue { gap: 0.25rem; }

.hauptmenue a {
  display: inline-flex;
  align-items: center;
  height: 2.3rem;
  padding: 0 0.72rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease,
              transform 180ms ease;
}

/* Der alte Unterstrich wird von der Pille abgelöst. */
.hauptmenue a::after { display: none; }

.hauptmenue a:hover,
.hauptmenue a:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--line-strong);
  color: var(--fg);
  transform: translateY(-1px);
}

.hauptmenue a[aria-current="page"] {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 10%, transparent),
              0 0 18px -6px var(--glow);
}

@media (min-width: 1280px) {
  .hauptmenue { gap: 0.35rem; }
  .hauptmenue a { height: 2.4rem; padding: 0 0.95rem; font-size: 14px; }
}

/* ------------------------------------------------- Der Hauptknopf */

.kopf-rechts { gap: 0.6rem; }

.kopf-knopf {
  height: 2.5rem;
  padding-inline: 1.15rem;
  gap: 0.45rem;
  background: linear-gradient(135deg, #8df0ff 0%, var(--accent) 42%, var(--accent-dim) 100%);
  color: var(--accent-fg);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, white 12%);
  box-shadow: 0 0 0 1px rgba(5, 6, 10, 0.4), 0 8px 26px -12px var(--glow),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 180ms ease, box-shadow 220ms ease, filter 180ms ease;
}

.kopf-knopf::after {
  content: "→";
  font-size: 15px;
  line-height: 1;
  transition: transform 220ms ease;
}

.kopf-knopf:hover,
.kopf-knopf:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(5, 6, 10, 0.4), 0 14px 34px -12px var(--glow),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.kopf-knopf:hover::after { transform: translateX(3px); }
.kopf-knopf:active { transform: translateY(0); }

/* Der Menüschalter auf schmalen Fenstern bekommt dieselbe Sprache. */
.menue-schalter {
  width: 2.5rem;
  height: 2.5rem;
  border-color: var(--line-strong);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.menue-schalter:hover,
.menue-schalter:focus-visible {
  background: var(--bg-subtle);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--accent);
}

/* ----------------------------------------- Klappmenü auf dem Telefon */

.klappmenue { padding-block: 1rem 1.25rem; }

.klappmenue nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.klappmenue a {
  display: flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elevated);
  font-size: 14px;
  font-weight: 500;
}

.klappmenue a[aria-current="page"] {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
  color: var(--accent);
}

.klappmenue .knopf {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 0.35rem;
  border: 0;
}

@media (max-width: 380px) {
  .klappmenue nav { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hauptmenue a,
  .kopf-knopf,
  .kopf-knopf::after { transition: none; }
  .hauptmenue a:hover,
  .kopf-knopf:hover { transform: none; }
}

/* =============================================================
   Schwarm, Globus, Physik — die drei neuen Ebenen und ihr Regler
   ============================================================= */

/* Alle drei liegen wie die Wasserfläche über dem Inhalt, aber unter
   Kopfleiste (50) und Fortschrittsbalken (60). "screen" sorgt dafür,
   dass dunkle Stellen der Leinwand nichts verdecken — der Text bleibt
   in jedem Fall lesbar. Zeiger nehmen sie nicht an. */
.fx-flaeche {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 520ms ease;
}

/* Die Motion-Grafiken sind Rahmen, keine Leinwaende — sie teilen
   sich aber Lage, Mischung und Ueberblendung mit ihnen.

   GESCHICHTE, damit das nicht zum dritten Mal umgebaut wird:

   1. Erst lagen sie UEBER dem Inhalt, gemischt mit "screen", ohne
      Schutz fuer die Schrift. Befund: "die motion grafiken machen
      dass wo sie hinter sind kaum lesbar."
   2. Dann hinter dem Inhalt (z-index -2) mit einem Schleier von
      62 Prozent davor. Der Text war lesbar — aber der Effekt
      verschwand. GEMESSEN am 13.09.2026: er war nur noch auf 14 bis
      35 Prozent der Seitenflaeche ueberhaupt zu sehen und nur auf
      2 bis 22 Prozent deutlich, weil jede Tafel, jede Karte und der
      Fuss davor liegen. Scotts Befund: "die effekte wirken nicht auf
      die ganze seite sondern nur in dem bereich der groesse des
      effekts" — und weil man die Bewegung kaum sah, sah man auch die
      Maus-Reaktion nicht.
   3. Jetzt wieder oben, aber mit dem, was beim ersten Mal fehlte:
      einem Hof in der Grundfarbe um jede Schrift (weiter unten im
      Nachtrag). Der faengt das Licht ab, das "screen" auf den Text
      legt.

   GEMESSEN mit dieser Fassung, Deckkraft 70: der Effekt ist auf 80
   bis 83 Prozent der Flaeche sichtbar (vorher 24 bis 34) und der
   Kontrast des Fliesstextes liegt bei 4,56 bis 4,81 zu 1 — ueber der
   Grenze von 4,5. Bei voller Deckkraft faellt er auf 3,9; deshalb
   ist 70 die Werkseinstellung und nicht 100.

   z-index 46: ueber dem Inhalt (der liegt auf 10), aber UNTER der
   Kopfleiste (50) und den beiden Reglertafeln (55). Die muessen
   scharf bleiben. */
.fx-motion {
  z-index: 46;
  border: 0;
  background: transparent;
  color-scheme: dark;
  /* "screen" ist ab 13.09.2026 wieder die Regel, und das ist die
     Umkehr der Entscheidung vom Vormittag. Grund, kurz:

     "color" nimmt Farbton und Saettigung aus dem EFFEKT. Wo der
     Effekt grau ist — bei einem Teilchen- oder Linieneffekt fast
     ueberall —, ist seine Saettigung null, und die Seite bekommt
     ihre eigene Helligkeit in "keine Farbe". Also Graustufen. Genau
     Scotts Befund: "einige effekte machen die seite schwarz weiss."

     GEMESSEN (Verfahren und Zahlen stehen ausfuehrlich in
     effektliste.js): die Farbigkeit der Seite — mittlere Chroma in
     Oklab — liegt ohne Effekt bei 0,0163. Unter "color" fiel sie bei
     acht Effekten darauf oder darunter, bei Schleppe, Scrollkino und
     Punktwolke auf ein Fuenftel. Unter "screen" steigt sie bei 24 von
     28.

     "screen" legt dafuer Licht auf den Text. Das faengt jetzt eine je
     Effekt gemessene Werksdeckkraft ab (Feld deck in effektliste.js):
     die groesste, bei der der Kontrast des Fliesstextes ueber 5,0 zu 1
     bleibt. Kein Effekt liegt unter 4,95.

     Vier Effekte laufen weiter mit "color" — Fluessiger Rauch,
     Prisma, Prisma weit, Glaslinse. Sie sind farbig genug, dass die
     Mischung der Seite mehr Farbe laesst als "screen" bei sicherer
     Deckkraft koennte. Sie stehen mit mischung: "color" in der Liste. */
  mix-blend-mode: screen;
}

/* Der Schleier von Fassung 2 ist weg: er lag zwischen Ebene und
   Inhalt und hat genau das gedaempft, was man sehen soll. Die Regel
   bleibt nur stehen, damit alte Staende nichts Sichtbares erben. */
.fx-motion-schleier { display: none; }

/* ---- Der Scrollfilm oben bleibt frei (13.09.2026) ---------------
   Scotts Befund: "wenn man die effekte anstellt sollte dieser effekt
   nicht oben im scrollfilm angezeigt werden nur auf dem rest der
   seite."

   Die Effektebenen sind bildschirmgross und fest — sie liegen also
   zwangslaeufig auch ueber dem Film. Sie waehrend des Films ganz
   abzuschalten hiesse, jeden Rahmen neu zu laden, sobald man unten
   ankommt (WebGL neu aufbauen, sichtbares Ruckeln). Stattdessen
   werden sie oben abgeschnitten: --fx-oben sagt, ab welcher Bildhoehe
   sie ueberhaupt malen duerfen. effekte.js setzt den Wert beim
   Scrollen auf die Unterkante der Filmbuehne. Solange der Film das
   Bild fuellt, ist das die ganze Hoehe — es kommt oben nichts an.
   Das Attribut data-fx-kopf steht nur auf Seiten mit Film; ueberall
   sonst gibt es keinen Zuschnitt und damit auch keine Kosten. */
html[data-fx-kopf] .fx-flaeche,
html[data-fx-kopf] .fx-motion {
  clip-path: inset(var(--fx-oben, 0px) 0 0 0);
}

/* Rueckfall fuer den Doppelklick aus dem Ordner: dort kann effekte.js
   den Zeiger nicht in die Rahmen hineinreichen (Chrome sperrt bei
   file:// den Zugriff). Dann nehmen die Rahmen selbst Zeiger an, und
   der Inhalt wird durchlaessig — ausser allem, was man anfassen muss.
   Preis: kein Markieren von Text. Deshalb nur in diesem Fall. */
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] .fx-motion { pointer-events: auto; }
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] body > *:not(.fx-motion):not(.fx-motion-schleier) {
  pointer-events: none;
}
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] a,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] button,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] input,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] select,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] textarea,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] label,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] summary,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] details,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] .fx-regler,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] .tropfen-regler,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] .kopf,
html[data-fx-zeiger="durchlassen"][data-fx-motion="an"] iframe:not(.fx-motion) {
  pointer-events: auto;
}

.fx-globus { z-index: 41; }
.fx-schwarm { z-index: 42; }
.fx-physik { z-index: 44; }

html[data-fx-globus="an"] .fx-globus,
html[data-fx-schwarm="an"] .fx-schwarm,
html[data-fx-physik="an"] .fx-physik { opacity: 1; }

/* Der Regler sitzt in der linken unteren Ecke — rechts steht der
   Wasserregler, so kommen sich die beiden Tafeln nie ins Gehege. */
.fx-regler {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: var(--font-sans);
}

.fx-griff {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(12, 14, 20, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.fx-griff svg { width: 15px; height: 15px; }
.fx-griff:hover,
.fx-griff:focus-visible {
  color: var(--fg);
  border-color: var(--line-strong);
  box-shadow: var(--schatten-glow-weich);
}
.fx-regler[data-offen="ja"] .fx-griff { color: var(--accent); border-color: var(--line-strong); }

/* ---- Solange der Knopf noch nie benutzt wurde -------------------
   Scotts Befund 13.09.2026: "ich habe nicht gesehen wo man darauf
   hingewiesen wird das da unten der knopf fuer effekte ist."
   Ein grauer Knopf in der Ecke geht neben einer bewegten Seite
   unter. Beim ersten Besuch traegt er deshalb Akzentfarbe, einen
   Punkt und einen ruhigen Puls; nach dem ersten Klick nie wieder
   (effekte.js merkt das dauerhaft). */
.fx-regler[data-frisch="ja"] .fx-griff {
  color: var(--fg);
  border-color: color-mix(in oklab, var(--accent) 62%, transparent);
  animation: fx-puls 3.4s ease-in-out infinite;
}
.fx-regler[data-frisch="ja"] .fx-griff::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 0.1rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
  animation: fx-punkt 2.2s ease-out infinite;
}
@keyframes fx-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(103, 232, 249, 0); }
  45%      { box-shadow: 0 0 0 7px rgba(103, 232, 249, 0.14); }
  70%      { box-shadow: 0 0 0 12px rgba(103, 232, 249, 0); }
}
@keyframes fx-punkt {
  0%       { box-shadow: 0 0 0 0 rgba(103, 232, 249, 0.55); }
  70%,100% { box-shadow: 0 0 0 9px rgba(103, 232, 249, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-regler[data-frisch="ja"] .fx-griff,
  .fx-regler[data-frisch="ja"] .fx-griff::after { animation: none; }
}

.fx-tafel {
  width: min(19rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 6rem));
  overflow-y: auto;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(9, 11, 16, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.9);
  overscroll-behavior: contain;
}

.fx-kopf { margin-bottom: 0.9rem; }
.fx-titel { font-family: var(--font-display); font-size: 1.15rem; color: var(--fg); }
.fx-hinweis { margin-top: 0.2rem; font-size: 0.78rem; line-height: 1.45; color: var(--faint); }

.fx-teil {
  border-top: 1px solid var(--line);
  padding: 0.55rem 0 0.75rem;
}

.fx-summe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.fx-summe::-webkit-details-marker { display: none; }

.fx-teil-name { font-weight: 500; }

.fx-lage {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.fx-teil[data-an="ja"] .fx-lage { color: var(--accent); }

.fx-teil-text {
  margin: 0.15rem 0 0.6rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--faint);
}

.fx-schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--fg);
  cursor: pointer;
}
.fx-schalter input,
.fx-kaestchen input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-dim); cursor: pointer; }

.fx-kaestchen {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.15rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}

.fx-zeile { display: block; margin-top: 0.7rem; cursor: pointer; }

.fx-marke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.fx-wert { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent); }

.fx-schieber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.75rem;
  margin-top: 0.1rem;
  background: transparent;
  cursor: pointer;
}
.fx-schieber::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-dim), rgba(232, 238, 245, 0.14));
}
.fx-schieber::-moz-range-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-dim), rgba(232, 238, 245, 0.14));
}
.fx-schieber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -6px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.16);
}
.fx-schieber::-moz-range-thumb {
  width: 15px; height: 15px; border: 0;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.16);
}
.fx-schieber:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.fx-knopf {
  width: 100%;
  height: 2.3rem;
  margin-top: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.fx-knopf:hover { color: var(--fg); border-color: var(--line-strong); }

.fx-diag {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--faint);
  word-break: break-word;
}
.fx-diag:empty { display: none; }

/* Die Auswahl der Motion-Grafiken: viele kleine Knoepfe, gleiche
   Bedienung wie im Konfigurator unter "Bewegung", damit man es
   nicht zweimal lernen muss. */
.fx-motionwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0 0.75rem;
}

.fx-chip {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.34em 0.66em;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}
.fx-chip:hover,
.fx-chip:focus-visible { color: var(--fg); border-color: var(--fg); }
.fx-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 500;
}

/* Bei vier Gruppen wird die Tafel sonst zu hoch fuer kleine Schirme. */
.fx-tafel { max-height: min(38rem, calc(100vh - 5rem)); }

@media (max-width: 640px) {
  .fx-griff span { display: none; }
  .fx-griff { padding: 0 0.8rem; }
}

@media print {
  .fx-flaeche,
  .fx-motion,
  .fx-motion-schleier,
  .fx-regler { display: none !important; }
}

/* Nachtrag zur Kopfleiste: die Menüpunkte tragen auch im Ruhezustand
   eine leise Kante. Ohne sie sieht man erst beim Überfahren, dass es
   Knöpfe sind — und der Sinn war, dass man es vorher sieht. */
.hauptmenue a {
  border-color: color-mix(in oklab, var(--line) 60%, transparent);
  background: color-mix(in oklab, var(--bg-elevated) 55%, transparent);
}

/* Im Klappmenü ist "Website kaufen" derselbe leuchtende Knopf wie oben. */
.klappmenue .knopf {
  height: 3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #8df0ff 0%, var(--accent) 42%, var(--accent-dim) 100%);
  color: var(--accent-fg);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 26px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


/* =============================================================
   NACHTRAG 06.09.2026 — Schaukasten (koennen.html)

   Alles, was nur die Schaukasten-Seite und die drei neuen Effekte
   brauchen. Steht bewusst am Ende: der Generator fasst dieses
   Stilblatt nicht an, und so bleibt der Nachtrag beim Neubauen
   erhalten.
   ============================================================= */

/* ---------- Kachelraster ---------- */

.kachelfeld {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.kachel {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kachel-buehne {
  position: relative;
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-subtle), var(--bg));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.kachel-buehne iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  color-scheme: dark;
  /* Unsichtbar, bis die kleine Seite wirklich steht. Ohne das steht
     dort ein weisses Rechteck, solange der Rahmen leer ist — genau
     das sah beim Scrollen falsch aus. */
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.kachel-buehne iframe[data-bereit="ja"] { opacity: 1; }

/* Solange die Kachel nicht laeuft, steht hier eine ruhige Flaeche
   mit einem Wort — kein leeres schwarzes Loch. */
.kachel-ruhe {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.75rem;
  align-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--faint);
  font-size: 13px;
  pointer-events: none;
}

.kachel-ruhe { transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.kachel-buehne iframe[data-bereit="ja"] + .kachel-ruhe,
.kachel-buehne iframe[data-bereit="ja"] ~ .kachel-ruhe { opacity: 0; }

.kachel-start {
  pointer-events: auto;
  border: 1px solid var(--line-strong);
  background: rgba(232, 238, 245, 0.06);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}

.kachel-start:hover { border-color: var(--accent); color: var(--accent); }
.kachel-start:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kachel[data-laeuft="ja"] .kachel-start { display: none; }
.kachel:not([data-ruhig="ja"]) .kachel-start { display: none; }

.kachel { transition: border-color 420ms ease; }
.kachel[data-laeuft="ja"] { border-color: rgba(103, 232, 249, 0.34); }

.kachel-text { padding: 1rem 1.15rem 1.15rem; }
.kachel-titel { font-size: 15px; font-weight: 600; margin: 0; }
.kachel-satz { font-size: 13.5px; color: var(--muted); margin: 0.35rem 0 0; line-height: 1.5; }

.kachel-stufen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }

.stufe-marke {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--faint);
}

.stufe-marke[data-an="ja"] {
  border-color: rgba(103, 232, 249, 0.45);
  color: var(--accent);
  background: rgba(103, 232, 249, 0.08);
}

/* ---------- Die Demo-Seiten selbst ---------- */

body.demo {
  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-subtle), var(--bg));
}

.demo-mitte {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
}

.demo-mitte p { color: var(--muted); font-size: 14px; max-width: 26rem; margin: 0; }

/* ---------- Ladezeit alt gegen neu (P-69) ---------- */

.ladezeit { display: grid; gap: 0.9rem; }

.ladezeit-zeile {
  display: grid;
  grid-template-columns: 8.5rem 1fr 4.5rem;
  gap: 0.85rem;
  align-items: center;
}

.ladezeit-name { font-size: 13.5px; color: var(--muted); }

.ladezeit-balken {
  position: relative;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(232, 238, 245, 0.07);
  overflow: hidden;
}

.ladezeit-balken i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--warn), #d97a45);
}

.ladezeit-zeile[data-gut="ja"] .ladezeit-balken i {
  background: linear-gradient(90deg, var(--accent), var(--accent-dim));
}

.ladezeit-zahl {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-align: right;
  color: var(--fg);
}

@media (max-width: 30rem) {
  .ladezeit-zeile { grid-template-columns: 1fr 3.8rem; grid-template-areas: "name zahl" "balken balken"; }
  .ladezeit-name { grid-area: name; }
  .ladezeit-zahl { grid-area: zahl; }
  .ladezeit-balken { grid-area: balken; }
}

/* ---------- Jahreszeiten-Partikel (P-58) ---------- */

.jahreszeiten-flaeche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

[data-jahreszeiten] > *:not(.jahreszeiten-flaeche) { position: relative; z-index: 1; }

/* ---------- Kippende Karten (P-66) ---------- */

.kippkarte {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  padding: 1.1rem 1.2rem;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms;
  transform-style: preserve-3d;
  will-change: transform;
}

.kippkarte:hover { border-color: var(--line-strong); }

.kippkarte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms;
  background: radial-gradient(18rem 12rem at var(--glanz-x, 50%) var(--glanz-y, 50%),
    rgba(103, 232, 249, 0.14), transparent 70%);
}

.kippkarte:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kippkarte { transition: none; }
  .kippkarte::after { display: none; }
}


/* =============================================================
   NACHTRAG II 06.09.2026 — Lesbarkeit und Daumen

   Gemessen auf 390×844: 564 Textstellen unter dem Kontrastwert 4,5
   und 276 Links, die kleiner als 40 Pixel hoch waren. Der Brief
   fuehrt ueber einen QR-Code — der Meister oeffnet die Seite auf
   dem Telefon, oft mit Lesebrille und in der Sonne. Beides ist
   deshalb kein Schoenheitsfehler, sondern ein Verkaufsfehler.
   ============================================================= */

/* Am groben Zeiger (Finger) bekommt alles, was angetippt wird,
   eine ordentliche Flaeche. Am Mauszeiger bleibt das Layout wie es
   war — dort schadet zusaetzliche Hoehe der Dichte. */
@media (pointer: coarse) {
  .hauptmenue a,
  .klappmenue nav a,
  .fuss-spalte ul a,
  .fuss-adresse a,
  .wegweiser a,
  .textlink,
  .fall .textlink {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .fuss-spalte ul { gap: 0.15rem; }
  .fuss-adresse { gap: 0.15rem; }

  /* Anruf und E-Mail sind die wichtigsten Griffe der ganzen Seite.
     inline-flex ist noetig: an einem reinen Inline-Element tut
     min-height nichts. */
  a[href^="tel:"],
  a[href^="mailto:"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  /* Der Markenknopf oben links fuehrt zur Startseite und war 38 Pixel hoch. */
  .marke { min-height: 44px; }

  /* Kurze Menuewoerter wie "Preise" waren 39 Pixel breit. */
  .hauptmenue a,
  .klappmenue nav a { padding-inline: 0.65rem; }
}

/* Sichtbarer Fokus auch dort, wo bisher keiner definiert war —
   wer mit der Tastatur geht, muss sehen, wo er steht. */
.fuss-spalte ul a:focus-visible,
.fuss-adresse a:focus-visible,
.textlink:focus-visible,
.kachel-start:focus-visible,
.schieber:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Die Geräte-Unterschriften und die Fallmarke standen auf 10 und
   11 Pixel. Unter 12 wird auf einem Telefon niemand mehr lesen. */
.geraet-unterschrift { font-size: 12px; }
.fall-marke { font-size: 11px; }


/* ---------- Live-Messleiste (P-71) ---------- */

.messleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.messwert { background: var(--bg-elevated); padding: 1.25rem 1.35rem; }

.messwert-zahl {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.messwert-label {
  margin: 0.6rem 0 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mess-urteil {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--faint);
}

.mess-urteil:empty { display: none; }
.mess-urteil[data-gut="ja"] { border-color: rgba(103, 232, 249, 0.45); color: var(--accent); background: rgba(103, 232, 249, 0.08); }
.mess-urteil[data-gut="nein"] { border-color: rgba(233, 180, 95, 0.45); color: var(--warn); background: rgba(233, 180, 95, 0.08); }


/* ---------- Zwei Befunde aus der Messung vom 06.09.2026 ---------- */

/* GEFUNDEN: Auf kaufen.html standen alle drei Leistungslisten gleichzeitig
   da. seite.js setzt liste.hidden = true, aber die Listenregel
   (display: grid) hat das ueberstimmt — das Attribut hidden ist im
   Browser nur eine sehr schwache Voreinstellung. Wer Premium waehlte,
   las trotzdem auch Basic und Cinematic. */
[hidden] { display: none !important; }

/* Ein Ankreuzfeld von 16 Pixeln trifft mit dem Daumen niemand. */
.zustimmung input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  min-width: 1.4rem;
  accent-color: var(--accent);
}

.zustimmung { align-items: center; gap: 0.65rem; }

/* Die Vorschauleiste unter den Musterseiten: 31 Pixel hohe Griffe. */
@media (pointer: coarse) {
  .musterleiste-innen a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 0.7rem;
  }
}

/* Das Ankreuzfeld auf 24 Pixel — die Untergrenze, die sich mit dem
   Daumen zuverlaessig treffen laesst. */
.zustimmung input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; }

/* Die Schieberegler des Rechners waren 22 Pixel hoch — mit dem Daumen
   auf einem Telefon eine Zumutung. Am groben Zeiger bekommen sie Luft. */
@media (pointer: coarse) {
  input[type="range"] { height: 44px; }
}

/* =============================================================
   GEFUNDEN am Telefon, 06.09.2026: Auf kaufen.html lagen die beiden
   Reglertafeln und der Wasser-Hinweis mitten auf dem Bestellformular.
   Auf 390 Pixeln ist dafür kein Platz, und wer gerade seine
   Telefonnummer eintippt, will keine Bedienelemente für Spielereien
   im Weg haben.

   Am groben Zeiger verschwinden deshalb beide Tafeln und der Hinweis.
   Die Effekte selbst laufen weiter — das Wasser antwortet auf jeden
   Tipp, es ist nur nichts mehr zum Einstellen im Bild. Eingestellt
   wird am Schreibtisch.
   ============================================================= */
@media (pointer: coarse) {
  .tropfen-regler,
  .fx-regler,
  .tropfen-tipp { display: none !important; }
}

/* =============================================================
   NACHTRAG 06.09.2026 (2) — Schaukasten laedt alles sofort

   Scotts Befund: "die sachen laden nicht richtig, die muessen alle
   sofort laden". Seither startet jede Kachel beim Seitenaufbau.
   Zwei Folgen fuer den Stil:

   1. Der Akzentrahmen markierte frueher die EINE laufende Kachel.
      Jetzt laufen alle — zwoelf leuchtende Rahmen sind Unruhe, kein
      Hinweis. Der Rahmen bleibt ruhig.
   2. Der Startknopf war ausgeblendet, solange nicht "weniger
      Bewegung" eingestellt war. Er ist jetzt die Rueckfallebene fuer
      eine Kachel, die nicht durchgekommen ist (data-haengt), und
      erscheint nur dann.
   ============================================================= */

.kachel[data-laeuft="ja"] { border-color: var(--line); }

.kachel .kachel-start { display: none; }
.kachel[data-haengt="ja"] .kachel-start { display: inline-block; }
.kachel[data-haengt="ja"] .kachel-ruhe { opacity: 1; }

/* =============================================================
   NACHTRAG 06.09.2026 (3) — "Groß ansehen"

   Eine Kachel ist rund 350 Pixel breit. Darin ist ein Schwarm ein
   Gekrissel und der Globus eine Murmel — man erkennt nicht, was
   man kauft. Also unter jeder Kachel ein Knopf, der dieselbe
   Demo-Seite randlos über die ganze Seite legt. Dort ist Platz für
   die Reglertafeln (?regler=1), und dort sieht der Effekt aus wie
   auf der späteren Kundenseite.
   ============================================================= */

/* ---------- Der Knopf unter der Kachel ---------- */

.kachel-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}

.kachel-fuss .kachel-stufen { margin-top: 0; }

.kachel-gross {
  flex: none;
  border: 1px solid var(--line-strong);
  background: rgba(232, 238, 245, 0.06);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.kachel-gross:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(103, 232, 249, 0.08);
}

.kachel-gross:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Die Schicht über der Seite ---------- */

html[data-grossbild="offen"] { overflow: hidden; }

.grossbild {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
}

.grossbild[hidden] { display: none !important; }

.grossbild-rahmen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
  color-scheme: dark;
}

/* Die Leiste liegt über dem Beispiel, nicht daneben — der Effekt soll
   die ganze Fläche bekommen. Der Verlauf darunter hält den Text
   lesbar, egal was im Rahmen gerade hell wird. */
.grossbild-leiste {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem 1.6rem;
  background: linear-gradient(to bottom, rgba(5, 6, 10, 0.86), rgba(5, 6, 10, 0));
  pointer-events: none;
}

.grossbild-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

.grossbild-tipp {
  margin: 0;
  font-size: 12px;
  color: var(--faint);
  margin-left: auto;
}

.grossbild-zu {
  pointer-events: auto;
  border: 1px solid var(--line-strong);
  background: rgba(5, 6, 10, 0.72);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.grossbild-zu:hover { border-color: var(--accent); color: var(--accent); }
.grossbild-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 560px) {
  .grossbild-tipp { display: none; }
  .grossbild-name { font-size: 13px; }
}


/* =============================================================
   NACHTRAG 12.09.2026 — Der Ladefilm

   Der Vorhang beim ersten Aufruf der Startseite: der ASCII-Effekt
   als Hintergrund, davor eine Prozentzahl von 0 auf 100 in drei
   Sekunden. Gesteuert von assets/js/ladefilm.js.

   Sichtbar wird er NUR durch html.lade-an, und diese Klasse setzt
   allein das Skript. Ohne JavaScript erscheint er also nicht — eine
   Seite, die hinter einem hängenden Vorhang verschwindet, wäre
   schlimmer als gar kein Vorhang.

   Der Notausgang ist die Animation "lade-notaus": egal was das
   Skript tut, nach 6 Sekunden ist der Vorhang weg und nimmt keine
   Klicks mehr an.
   ============================================================= */
.ladefilm { display: none; }

html.lade-an { overflow: hidden; }
html.lade-an .ladefilm {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05060a;
  animation: lade-notaus 0s linear 6s forwards;
}

.ladefilm[data-zu="ja"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

@keyframes lade-notaus {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}

.ladefilm-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0.55;
  pointer-events: none;
}

.ladefilm-mitte {
  position: relative;
  z-index: 2;
  isolation: isolate;
  text-align: center;
  padding: 1.5rem;
  max-width: min(100%, 34rem);
}
/* Ohne eigenen Schleier verschwindet die kleine Schrift im
   Zeichenfeld dahinter — dieselbe Lösung wie bei den Textbändern
   im Scrollfilm: ein weicher, runder Schatten direkt hinter dem
   Text, kein Kasten mit Kante. */
.ladefilm-mitte::before {
  content: "";
  position: absolute;
  inset: -34% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 68% 58% at 50% 50%,
    rgba(5, 6, 10, 0.94) 0%, rgba(5, 6, 10, 0.76) 46%, rgba(5, 6, 10, 0) 78%);
}

.ladefilm-marke {
  margin: 0 0 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

.ladefilm-zahl {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(3.5rem, 14vw, 7rem);
  line-height: 1;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 42px color-mix(in oklab, var(--accent) 45%, transparent);
}
.ladefilm-zahl span {
  font-size: 0.34em;
  color: var(--accent);
  margin-left: 0.15em;
  vertical-align: super;
}

.ladefilm-balken {
  margin: 1.1rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.5rem, 2.1vw, 0.85rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--accent);
  word-break: break-all;
}

.ladefilm-wort {
  margin: 1.1rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(5, 6, 10, 0.95), 0 3px 14px rgba(5, 6, 10, 0.8);
}

.ladefilm-weg {
  margin-top: 1.4rem;
  background: rgba(5, 6, 10, 0.72);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.45em 1em;
  color: var(--faint);
}
.ladefilm-weg:hover,
.ladefilm-weg:focus-visible { color: var(--fg); border-color: var(--fg); }

@media print { .ladefilm { display: none !important; } }

/* ================================================================
   NACHTRAG 12.09.2026 (4) — die Filmkacheln im Schaukasten
   ================================================================
   Gehoert zu assets/js/filmkachel.js. Eine Kachel je Musterfilm.
   In der kleinen Kachel laeuft der Film in der Schleife, im
   Grossbild (?regler=1) wird er mit dem Scrollen gescrubbt — dann
   setzt das Skript die Hoehe der Bahn auf die Filmlaenge.          */

.fk{ position:relative; width:100%; height:100vh; background:#05060a; }
.fk-buehne{ position:sticky; top:0; height:100vh; overflow:hidden; background:#05060a; }
.fk[data-zustand="scrubben"]{ height:320vh; }
.fk-bild, .fk-video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; }
.fk-video{ opacity:0; transition:opacity 500ms ease;
  filter:brightness(1.08) contrast(1.05) saturate(1.06); }
.fk-video.da{ opacity:1; }
.fk[data-zustand="standbild"] .fk-video{ display:none; }

/* Nur unten gedunkelt, damit der Film selbst vorn steht. */
.fk-unten{ position:absolute; left:0; right:0; bottom:0; height:42%;
  pointer-events:none;
  background:linear-gradient(to top, rgba(5,6,10,.86) 0%, rgba(5,6,10,.4) 46%, rgba(5,6,10,0) 100%); }

.fk-marke{ position:absolute; z-index:3; left:1rem; right:1rem; bottom:1rem; margin:0;
  color:#f4efe6; font-size:.82rem; line-height:1.45;
  text-shadow:0 1px 3px rgba(5,6,10,.95), 0 4px 18px rgba(5,6,10,.8); }
.fk-marke b{ display:block; font-size:1.15rem; margin-bottom:.15rem; }
.fk-zeit{ position:absolute; z-index:3; right:1rem; top:1rem; margin:0;
  font-size:.72rem; letter-spacing:.14em; color:#e8e0d2;
  background:rgba(5,6,10,.55); border:1px solid rgba(244,239,230,.2);
  border-radius:999px; padding:.3em .8em; }
.fk[data-zustand="schleife"] .fk-zeit{ display:none; }

@media (prefers-reduced-motion: reduce){
  .fk, .fk[data-zustand="scrubben"]{ height:100vh; }
  .fk-video{ display:none; }
}

/* ================================================================
   NACHTRAG 12.09.2026 (5) — Regler je Motion-Grafik
   ================================================================
   Gehoert zu assets/js/effekte.js, Gruppe "Motion-Grafiken". Wer
   einen Namen antippt, bekommt darunter die Regler genau dieses
   Effekts: Dichte, Tempo, Farbton, Saettigung, Deckkraft.          */

.fx-motiontafel{
  margin-top:.75rem; padding:.75rem .85rem;
  border:1px solid var(--linie); border-radius:10px;
  background:color-mix(in srgb, var(--papier) 88%, var(--tinte) 12%); }
.fx-motiontafel-name{
  margin:0 0 .4rem; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); }
.fx-motiontafel .fx-zeile{ margin-block:.35rem; }
.fx-motiontafel .fx-knopf{ margin-top:.6rem; }

/* Der Farbton-Schieber zeigt, was er tut. */
.fx-motiontafel .fx-zeile:nth-of-type(3) .fx-schieber{
  background:linear-gradient(to right,
    hsl(0 70% 55%), hsl(60 70% 55%), hsl(120 70% 55%),
    hsl(180 70% 55%), hsl(240 70% 55%), hsl(300 70% 55%), hsl(360 70% 55%)); }

/* ================================================================
   NACHTRAG 12.09.2026 (6) — der Hinweis auf die beiden Schalter
   ================================================================
   Gehoert zu assets/js/hinweis.js. Er erscheint einmal je Sitzung,
   sobald der Scrollfilm durch ist, und geht von selbst wieder weg. */

.hinweis{
  position:fixed; z-index:60;
  left:50%; bottom:max(1rem, env(safe-area-inset-bottom));
  transform:translate(-50%, 14px);
  display:flex; align-items:center; gap:.75rem;
  max-width:min(92vw, 34rem);
  padding:.6rem .7rem .6rem 1rem;
  border:1px solid var(--line-strong, var(--linie));
  border-radius:999px;
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  opacity:0; pointer-events:none;
  transition:opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1); }
.hinweis[data-an="ja"]{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.hinweis-satz{ margin:0; font-size:13px; line-height:1.45; color:var(--muted, inherit); }
.hinweis-zu{
  flex:0 0 auto; width:28px; height:28px; min-height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linie); border-radius:999px;
  background:transparent; color:inherit; font-size:16px; line-height:1;
  cursor:pointer; }
.hinweis-zu:hover, .hinweis-zu:focus-visible{ border-color:var(--accent); color:var(--accent); }

.hinweis-zeiger{
  position:fixed; z-index:60; display:flex; flex-direction:column;
  gap:.3rem; pointer-events:none;
  opacity:0; transform:translateY(8px);
  transition:opacity 600ms ease 160ms, transform 600ms cubic-bezier(.22,1,.36,1) 160ms; }
.hinweis-zeiger[data-an="ja"]{ opacity:1; transform:none; }
.hinweis-zeiger--links{ left:max(1rem, env(safe-area-inset-left)); align-items:flex-start; }
.hinweis-zeiger--rechts{ right:max(1rem, env(safe-area-inset-right)); align-items:flex-end; }
.hinweis-wort{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  background:color-mix(in srgb, var(--papier) 86%, transparent);
  border-radius:999px; padding:.25em .7em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hinweis-strich{
  width:1px; height:16px; background:var(--accent); opacity:.7;
  margin-inline:1.1rem; }
.hinweis-zeiger--rechts .hinweis-strich{ align-self:flex-end; }

/* Am groben Zeiger blendet die Seite beide Tafeln aus — dann darf
   auch kein Hinweis darauf stehen. hinweis.js prueft das zusaetzlich
   selbst, das hier ist der Guertel zum Hosentraeger. */
@media (pointer: coarse){
  .hinweis, .hinweis-zeiger{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .hinweis, .hinweis-zeiger{ transition:none; }
}

/* Nachtrag (5b): der ehrliche Hinweis, wenn ein Effekt einen Regler
   nicht hat. Gemessen wurde Effekt fuer Effekt — siehe effektliste.js. */
.fx-motiontafel-fehlt{
  margin:0 0 .5rem; font-size:11px; line-height:1.45; color:var(--faint); }

/* ================================================================
   NACHTRAG 12.09.2026 (7) — die Motion-Ebene wird sichtbarer
   ================================================================
   GEMESSEN: die Effekte reagieren auf die Maus, auf beiden Wegen
   (Server und Doppelklick) — aber schwach. Das Signal lag nur 11 bis
   62 Prozent ueber dem Grundrauschen des Effekts selbst. Ursache war
   nicht die Maus, sondern der Schleier: 62 Prozent Grundfarbe ueber
   der Ebene, dazu 45 Prozent Werksdeckkraft. Was so gedaempft ist,
   sieht man sich nicht reagieren.

   Der Schleier gibt es her: gemessen wurde die Startseiten-
   ueberschrift ueber laufendem Fluessigmetall mit 16,2 zu 1 — WCAG
   AA verlangt 4,5 zu 1 fuer Fliesstext. Deshalb jetzt 46 statt 62
   Prozent. Die Nachmessung steht in claude/effekt-regler-stand.md.  */

.fx-motion-schleier {
  background: color-mix(in oklab, var(--bg) 62%, transparent);
}

/* ---- Und der Text bekommt seinen eigenen Grund -----------------
   GEMESSEN 12.09.2026, und der Fund ist aelter als diese Runde:
   mit laufender Motion-Ebene faellt der Kontrast des Fliesstextes
   auf 2,3 bis 4,4 zu 1. WCAG AA verlangt 4,5. Die letzte Runde hatte
   16,2 zu 1 gemessen — aber an der grossen Ueberschrift der
   Startseite, nicht am Fliesstext. Der Schleier allein loest das
   nicht: erst bei ueber 80 Prozent haelt der Kontrast, und dann
   sieht man von der Bewegung nichts mehr.

   Deshalb kein dickerer Schleier, sondern ein weicher Hof in der
   Grundfarbe direkt um die Schrift. Er ist unsichtbar, solange
   nichts dahinter laeuft, kostet nichts und hebt genau dort an, wo
   gelesen wird. Kein Kasten, keine Kante. */
html[data-fx-motion="an"] p,
html[data-fx-motion="an"] li,
html[data-fx-motion="an"] dd,
html[data-fx-motion="an"] dt,
html[data-fx-motion="an"] td,
html[data-fx-motion="an"] th,
html[data-fx-motion="an"] h1,
html[data-fx-motion="an"] h2,
html[data-fx-motion="an"] h3,
html[data-fx-motion="an"] summary,
html[data-fx-motion="an"] label,
html[data-fx-motion="an"] figcaption {
  text-shadow:
    0 0 3px var(--bg), 0 0 3px var(--bg),
    0 0 6px var(--bg), 0 0 6px var(--bg),
    0 0 14px var(--bg), 0 0 24px var(--bg);
}

/* ---- Tabellen in den Rechtstexten (13.09.2026) --------------------
   Die Datenschutzerklärung führt jeden Browserspeicher einzeln auf. Eine
   Liste im Fließtext wäre unlesbar, eine Tabelle ohne eigenen Rollbereich
   würde auf dem Telefon die ganze Seite querscrollen lassen — deshalb
   rollt hier der Kasten, nicht die Seite. */
.tabelle-rollt {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
}

.rechtstabelle {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.55;
}

.rechtstabelle th,
.rechtstabelle td {
  padding: 0.62rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.rechtstabelle thead th {
  color: var(--fg);
  font-weight: 600;
  background: color-mix(in oklab, var(--bg-elevated) 60%, transparent);
  position: sticky;
  top: 0;
}

.rechtstabelle tbody tr:last-child th,
.rechtstabelle tbody tr:last-child td { border-bottom: 0; }

.rechtstabelle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}

/* ---- Wegweiserliste (404) — 13.09.2026 --------------------------
   GEMESSEN: die Verweise waren 18 px hoch. WCAG 2.2 verlangt unter
   2.5.8 mindestens 24 x 24 CSS-Pixel fuer alles, was man treffen
   muss; die Ausnahme fuer Verweise mitten im Satz greift bei einer
   Liste nicht. Die Fingerregel weiter unten hebt sie am groben
   Zeiger ohnehin auf 44 px — hier geht es um den Mausbetrieb im
   schmalen Fenster. */
.wegweiser {
  display: grid;
  gap: 0.15rem;
  font-size: 14px;
  line-height: 1.7;
}
.wegweiser a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}