/* ==========================================================================
   iamleti.com · neue Startseite
   Helles Studio: Off-White, Papier, Tinte, Signal Orange-Rot sparsam,
   Petrol für Vertrauen, Nachtblau für die Schilderstrasse, dunkle Videobühne.
   Mobil zuerst. Schriften: Fraunces (Display), Manrope (alles andere).
   ========================================================================== */

/* ﷺ fehlt in Manrope und Fraunces: Teilmenge aus Amiri (OFL), nur dieses Zeichen, 1,6 KB */
@font-face {
  font-family: "Leti Salawat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("saw.woff2") format("woff2");
  unicode-range: U+FDFA;
}

:root {
  /* Farben */
  --grund: #f3eee5;
  --grund-2: #ebe4d7;
  --papier: #fffcf6;
  --tinte: #0a0a0c;
  --tinte-2: #3a3631;
  --tinte-3: #5f5a52;
  --linie: rgba(10, 10, 12, 0.12);
  --linie-stark: rgba(10, 10, 12, 0.24);
  --signal: #e0492b;
  --signal-text: #b0391d;
  --signal-hauch: rgba(224, 73, 43, 0.12);
  --petrol: #0e3a44;
  --petrol-2: #134a56;
  --petrol-linie: rgba(238, 244, 242, 0.16);
  --auf-petrol: #eef4f2;
  --auf-petrol-2: #b7cdcc;
  --nacht: #0a1322;
  --buehne: #0c0e13;
  --buehne-2: #171a21;
  --auf-dunkel: #f3eee5;
  --auf-dunkel-2: #bdb6aa;
  --wa: #13753c;
  --wa-hover: #0d5f30;
  --gruen-an: #178b4d;
  --fokus: #b0391d;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --abschnitt: clamp(80px, 11vw, 152px);
  --rand: 20px;
  --breite: 1320px;

  /* Radien */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 32px;
  --radius-rund: 999px;

  /* Tiefe und Bewegung */
  --schatten-1: 0 1px 2px rgba(38, 28, 14, 0.06), 0 10px 28px -8px rgba(38, 28, 14, 0.14);
  --schatten-2: 0 2px 8px rgba(38, 28, 14, 0.08), 0 32px 70px -24px rgba(38, 28, 14, 0.38);
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
  --kurve-weich: cubic-bezier(0.22, 1, 0.36, 1);

  /* Schrift */
  --serif: "Fraunces", "Leti Salawat", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", "Leti Salawat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kopf-hoehe: 68px;

  color-scheme: light;
}

@media (min-width: 640px) { :root { --rand: 32px; } }
@media (min-width: 1024px) { :root { --rand: 48px; --kopf-hoehe: 78px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 12px);
  scrollbar-color: #b9b0a1 var(--grund);
  background: var(--grund);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 450;
  caret-color: var(--signal);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) { body { font-size: 18px; } }

::selection { background: rgba(224, 73, 43, 0.22); color: var(--tinte); }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, output { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
abbr[title] { text-decoration: none; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

/* ﷺ lesbar gross, ohne die Zeile aufzureissen */
.saw { font-family: "Leti Salawat", serif; font-size: 1.5em; line-height: 0; font-weight: 400; vertical-align: -0.12em; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: fixed; z-index: 100; top: 10px; left: 10px;
  padding: 10px 16px; border-radius: var(--radius-rund);
  background: var(--tinte); color: var(--papier); font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform 0.2s var(--kurve);
}
.sprung:focus-visible { transform: none; }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.titel {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.abschnitt-kopf { display: grid; gap: var(--space-4); margin-bottom: clamp(40px, 6vw, 80px); max-width: 46rem; }
.abschnitt-kopf__text { color: var(--tinte-2); font-size: 1.06em; max-width: 40rem; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--radius-rund);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--kurve), box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.knopf:active { transform: scale(0.98); }
.knopf__icon { width: 20px; height: 20px; flex: none; }
.knopf--wa { background: var(--wa); color: #fff; box-shadow: 0 1px 2px rgba(38, 28, 14, 0.12), 0 8px 20px -10px rgba(38, 28, 14, 0.38); }
.knopf--wa:hover { background: var(--wa-hover); }
.knopf--linie { border-color: var(--linie-stark); color: var(--tinte); background: transparent; }
.knopf--linie:hover { border-color: var(--tinte); background: rgba(10, 10, 12, 0.04); }
.knopf--gross { min-height: 54px; padding: 0 26px; font-size: 1.02rem; }
.knopf--riesig { width: 100%; min-height: 64px; padding: 0 18px; font-size: 1.06rem; }
@media (min-width: 560px) { .knopf--riesig { width: auto; padding: 0 32px; font-size: 1.12rem; } }
.knopf--riesig .knopf__icon { width: 24px; height: 24px; }
.knopf--link { min-height: 44px; padding: 8px 18px; font-size: 0.95rem; text-align: left; }
.knopf--link .knopf__icon { width: 16px; height: 16px; }

.rund-knopf {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 1.5px solid rgba(243, 238, 229, 0.35); border-radius: 50%;
  background: transparent; color: var(--auf-dunkel);
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.rund-knopf svg { width: 20px; height: 20px; }
.rund-knopf:hover:not([aria-disabled="true"]) { background: rgba(243, 238, 229, 0.1); border-color: var(--auf-dunkel); }
.rund-knopf[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.rund-knopf--hell { background: rgba(10, 10, 12, 0.6); border-color: rgba(255, 255, 255, 0.4); color: #fff; }

/* ---------- Logo ---------- */
.marke { display: inline-grid; gap: 4px; text-decoration: none; color: var(--tinte); line-height: 1; }
.marke__wort {
  font-family: "Leti Marke", var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72; line-height: 0.9;
}
.marke__i { position: relative; display: inline-block; }
/* Punkt knapp über dem Stamm, Oberkante etwa auf Versalhöhe, Abstand kleiner als der Punkt */
.marke__i::after {
  content: ""; position: absolute; left: 50%; top: var(--punkt-oben, 0.095em);
  width: 0.18em; height: 0.18em; border-radius: 50%;
  background: var(--signal); transform: translateX(-50%);
}
.marke__unter { font-size: 13.5px; font-weight: 650; letter-spacing: 0; color: var(--tinte-2); white-space: nowrap; }

/* ---------- Kopf ---------- */
/* Deckender Grund, gleichbleibende Höhe: beim Scrollen ändert sich nur Linie und Schatten (kein Layout-Sprung) */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--grund);
  border-bottom: 1px solid transparent;
  overflow-anchor: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.kopf.ist-kompakt { border-bottom-color: var(--linie); box-shadow: 0 10px 30px -24px rgba(38, 28, 14, 0.5); }
.kopf__innen {
  display: flex; align-items: center; gap: var(--space-3);
  max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand);
  height: var(--kopf-hoehe);
}
.kopf .marke { margin-right: auto; }

.kopf__nav { display: none; }
.kopf__links a, .sprachen a { text-decoration: none; font-weight: 600; }
.sprachen { display: flex; gap: 2px; }
.sprachen a {
  display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 6px;
  border-radius: var(--radius-rund); font-size: 0.86rem; letter-spacing: 0.04em; color: var(--tinte-3);
}
.sprachen a:hover { color: var(--tinte); background: rgba(10, 10, 12, 0.05); }
.sprachen a[aria-current="page"] { color: var(--tinte); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }

.kopf__wa { min-height: 44px; padding: 0 14px; gap: 8px; }
.kopf__wa .knopf__icon { width: 20px; height: 20px; }
.kopf__wa-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.kopf__menue {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1.5px solid var(--linie-stark); border-radius: 50%; background: transparent;
}
.kopf__menue svg { width: 20px; height: 20px; }

/* Menü offen (Handy) */
.kopf.menue-offen .kopf__nav {
  display: grid; gap: var(--space-5);
  position: absolute; top: 100%; left: 0; right: 0;
  padding: var(--space-5) var(--rand) var(--space-6);
  background: var(--papier); border-bottom: 1px solid var(--linie);
  box-shadow: 0 30px 50px -30px rgba(38, 28, 14, 0.45);
}
.kopf.menue-offen .kopf__links { display: grid; }
.kopf.menue-offen .kopf__links a { display: block; padding: 12px 0; font-size: 1.3rem; border-bottom: 1px solid var(--linie); }

@media (min-width: 560px) { .kopf__wa-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } }

@media (min-width: 1024px) {
  .kopf__menue { display: none; }
  .kopf__nav { display: flex; align-items: center; gap: var(--space-5); }
  .kopf__links { display: flex; gap: var(--space-1); }
  .kopf__links a { display: inline-block; padding: 10px 14px; border-radius: var(--radius-rund); font-size: 0.96rem; color: var(--tinte-2); }
  .kopf__links a:hover { color: var(--tinte); background: rgba(10, 10, 12, 0.05); }
  .kopf__nav .sprachen { padding-left: var(--space-4); border-left: 1px solid var(--linie); }
  .kopf__wa { padding: 0 18px; }
  .marke__wort { font-size: 34px; }
  .marke__unter { font-size: 14.5px; }
}
/* Fünf Menüpunkte (mit «Kanal»): zwischen 1024 und 1199 px etwas enger, damit EN und SQ einzeilig bleiben */
@media (min-width: 1024px) and (max-width: 1199px) {
  .kopf__nav { gap: var(--space-4); }
  .kopf__links a { padding: 10px 8px; font-size: 0.92rem; white-space: nowrap; }
  .kopf__nav .sprachen { padding-left: var(--space-3); }
}

/* ==========================================================================
   Anfang (Held) mit Vorführung
   ========================================================================== */
.held { padding: clamp(20px, 4vw, 48px) 0 var(--abschnitt); }
/* Reihenfolge im DOM = Reihenfolge am Bildschirm: Text, Knöpfe, Vorführung, Vertrauen */
.held__raster {
  display: grid; gap: var(--space-6);
  grid-template-areas: "text" "knoepfe" "demo" "info";
}
.held__text { grid-area: text; }
.held__knoepfe { grid-area: knoepfe; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.held__knoepfe .knopf--wa { flex: 1 1 100%; }
.held__demo { grid-area: demo; min-width: 0; }
.held__info { grid-area: info; }

.held__leistungen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  margin-bottom: var(--space-4);
  font-size: 0.9rem; font-weight: 600; color: var(--tinte-2);
}
.held__leistungen .punkt { color: var(--signal); font-weight: 700; }
.held__titel {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.45rem, 1.5rem + 4.6vw, 5.2rem);
  line-height: 0.98; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
  max-width: 11.5em;
}
/* jeder Satz eine eigene Zeile, Umbruch nur innerhalb des Satzes */
.held__titel .zeile { display: block; text-wrap: balance; }
.held__sub { margin-top: var(--space-5); max-width: 34rem; font-size: 1.06em; color: var(--tinte-2); }
.held__info { display: grid; gap: var(--space-4); max-width: 36rem; }
.held__fuer { color: var(--tinte-2); font-size: 0.98rem; }
.held__vertrauen {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: var(--space-4) var(--space-4); border-radius: var(--radius-m);
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie);
  font-size: 0.96rem; color: var(--tinte-2);
}
.held__vertrauen svg { width: 20px; height: 20px; margin-top: 3px; color: var(--signal-text); }
.held__vertrauen a { color: var(--tinte); font-weight: 650; white-space: nowrap; }

@media (min-width: 560px) {
  .held__knoepfe .knopf--wa { flex: 0 0 auto; }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .held__demo, .held__info { max-width: 46rem; }
}
@media (min-width: 1180px) {
  .held { padding-top: clamp(24px, 3vw, 44px); }
  .held__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "text demo" "knoepfe demo" "info demo";
    column-gap: clamp(40px, 4.5vw, 72px); row-gap: var(--space-6);
    align-items: start;
  }
  .held__text { padding-top: var(--space-6); }
  .held__titel { font-size: clamp(3rem, 0.6rem + 3.9vw, 4.5rem); max-width: none; }
  .branchen { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .branche { min-height: 40px; padding: 0 14px; font-size: 0.88rem; }
}

/* ---------- Vorführung ---------- */
.vorfuehrung { display: grid; gap: var(--space-5); }
.vorfuehrung__wahl { display: grid; gap: var(--space-3); min-width: 0; }

.vorfuehrung__label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.95rem; }
.muster {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
  border-radius: var(--radius-rund); background: var(--signal-hauch); color: var(--signal-text);
  font-size: 0.8rem; font-weight: 700;
}
/* Am Handy seitlich wischbar; die weiche Kante rechts zeigt, dass es weitergeht */
.branchen {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: calc(-1 * var(--rand)); padding: 4px calc(var(--rand) + 28px) 8px var(--rand); scroll-padding-inline: var(--rand);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.branchen::-webkit-scrollbar { display: none; }
.branche {
  flex: none; scroll-snap-align: start;
  min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linie-stark); border-radius: var(--radius-rund);
  background: var(--papier); color: var(--tinte-2); font-weight: 600; font-size: 0.93rem; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.branche:hover { border-color: var(--tinte); color: var(--tinte); }
.branche[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
@media (min-width: 768px) and (max-width: 1179px) {
  .branchen { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
}

/* feste Mindesthöhe, damit der Abschnitt beim Branchenwechsel nicht springt */
.vorfuehrung__fuss { display: grid; gap: var(--space-2); max-width: 40rem; }
.vorfuehrung__wechsel { display: grid; gap: var(--space-2); align-content: start; min-height: 11.6rem; }
.vorfuehrung__nutzen { font-weight: 700; font-size: 1.02rem; }
.vorfuehrung__beleg { color: var(--tinte-2); font-size: 0.95rem; }
@media (min-width: 640px) { .vorfuehrung__wechsel { min-height: 6.9rem; } }
.vorfuehrung__hinweis { display: flex; gap: 10px; align-items: flex-start; color: var(--tinte-3); font-size: 0.88rem; }
.vorfuehrung__hinweis svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* Bühne am Handy: Website in voller Breite oben (Preis frei und lesbar),
   darunter links die grosse Bedienung, rechts das Handy. Keine Überlappung. */
.buehne {
  display: grid; position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-4); row-gap: var(--space-5);
}
.buehne__laptop { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.buehne__steuer { grid-column: 1; grid-row: 2; align-self: center; min-width: 0; }
.buehne__handy { grid-column: 2; grid-row: 2; container-type: inline-size; position: relative; z-index: 2; min-width: 0; }

/* Ab Tablet: Laptop hinten, Handy vorne rechts überlappend; die Bedienung füllt die Fläche unter dem Laptop.
   Zeile 2 ist flexibel: das Handy ragt hinein, die Bedienung beginnt immer erst unter dem Laptop. */
@media (min-width: 640px) {
  .buehne {
    container-type: inline-size;
    grid-template-columns: minmax(0, 1fr) 38%;
    grid-template-rows: auto 1fr;
    column-gap: 0; row-gap: 0;
  }
  .buehne__laptop { grid-column: 1 / -1; grid-row: 1; width: 82%; justify-self: start; }
  .buehne__handy { grid-column: 2; grid-row: 1 / span 2; margin-top: 15cqw; align-self: start; }
  .buehne__steuer { grid-column: 1; grid-row: 2; align-self: start; padding: var(--space-4) var(--space-5) 0 0; }
}
@media (min-width: 1180px) {
  .buehne { grid-template-columns: minmax(0, 1fr) 34%; }
  .buehne__laptop { width: 86%; }
  .buehne__handy { margin-top: 13cqw; }
}

.buehne__label {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 0.86rem; font-weight: 700; color: var(--tinte-2);
}
.buehne__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.buehne__handy .buehne__label { justify-content: center; }

/* ---------- Grosse Bedienung (gleiche Wirkung wie im Handy) ---------- */
.steuer { display: grid; gap: var(--space-3); align-content: start; }
.steuer__titel { font-weight: 700; font-size: 0.98rem; }
.steuer__knoepfe { display: grid; gap: 8px; }
.steuer__knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
  min-height: 46px; padding: 6px 14px; border: 1.5px solid var(--linie-stark); border-radius: var(--radius-m);
  background: var(--papier); color: var(--tinte); font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s var(--kurve);
}
.steuer__knopf:hover { border-color: var(--tinte); }
.steuer__knopf:active { transform: scale(0.98); }
.steuer__knopf svg { width: 18px; height: 18px; flex: none; }
.steuer__schalter {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--gruen-an);
  transition: background-color 0.2s ease;
}
.steuer__schalter::after {
  content: ""; position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform 0.2s var(--kurve);
}
.steuer__knopf[aria-pressed="true"] { border-color: var(--tinte); }
.steuer__knopf[aria-pressed="true"] .steuer__schalter { background: rgba(10, 10, 12, 0.32); }
.steuer__knopf[aria-pressed="true"] .steuer__schalter::after { transform: translateX(-14px); }
.steuer__knopf--speichern { justify-content: center; background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.steuer__knopf--speichern:hover { background: #24221f; }
/* Änderung noch nicht gespeichert: kleiner Signalpunkt */
.steuer__knopf--speichern.ist-offen::after, .save-button.ist-offen::after {
  content: ""; position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 2px var(--tinte);
}
.save-button { position: relative; }
.save-button.ist-offen::after { top: calc(var(--u) * 7); right: calc(var(--u) * 9); width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.steuer__ergebnis { font-size: 0.92rem; line-height: 1.4; color: var(--tinte-2); }
.steuer__ergebnis-label { font-weight: 700; color: var(--tinte); }
.steuer__ergebnis [data-s-ergebnis] { border-radius: 4px; }
.steuer__pause {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  min-height: 44px; padding: 0 4px; border: 0; background: transparent;
  color: var(--tinte-2); font-weight: 650; font-size: 0.9rem;
  text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 0.25em;
}
.steuer__pause:hover { color: var(--tinte); text-decoration-color: currentColor; }
.steuer__pause svg { width: 16px; height: 16px; flex: none; }
.steuer__play-icon { display: none; }
.steuer__pause.ist-pausiert .steuer__pause-icon { display: none; }
.steuer__pause.ist-pausiert .steuer__play-icon { display: block; }
@media (min-width: 640px) {
  .steuer__knoepfe { grid-template-columns: repeat(auto-fit, minmax(9.5rem, max-content)); }
  .steuer__knopf { min-height: 44px; }
}

/* ---------- Laptop mit Muster-Website ---------- */
.laptop__deckel {
  padding: 2.2%; padding-bottom: 2.6%;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(160deg, #2a2a2e, #0d0d0f 60%, #232226);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--schatten-2);
}
.laptop__schirm {
  container: schirm / inline-size;
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px;
  background: #fbf8f2;
}
/* Am Handy etwas höher, damit Produktfoto, Name und Preis Platz haben */
@media (max-width: 639px) {
  .laptop__schirm { aspect-ratio: 3 / 2; }
  .buehne .laptop__fuss { margin: 0 -3%; }
}
.laptop__fuss {
  position: relative; height: 12px; margin: 0 -6%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #e2ddd3 0%, #c6bfb2 60%, #a9a294 100%);
  box-shadow: 0 18px 30px -18px rgba(38, 28, 14, 0.6);
}
.laptop__fuss::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px;
  border-radius: 0 0 8px 8px; background: rgba(10, 10, 12, 0.14); transform: translateX(-50%);
}

.site {
  --w: calc(100cqw / 680);
  height: 100%; display: grid; grid-template-rows: auto auto 1fr;
  color: #16130f; font-family: var(--sans); font-size: calc(var(--w) * 12); line-height: 1.3;
}
.site__leiste {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--w) * 14);
  height: calc(var(--w) * 34); padding: 0 calc(var(--w) * 14);
  background: #efeae1; border-bottom: 1px solid rgba(10, 10, 12, 0.06);
}
.site__punkte { display: flex; gap: calc(var(--w) * 6); }
.site__punkte i { width: calc(var(--w) * 9); height: calc(var(--w) * 9); border-radius: 50%; background: #d5cec2; }
.site__url {
  justify-self: center; min-width: 46%; padding: calc(var(--w) * 4) calc(var(--w) * 14);
  border-radius: var(--radius-rund); background: #fbf8f2; text-align: center;
  font-size: calc(var(--w) * 11); color: #5f5a52;
}
.site__status {
  display: inline-flex; align-items: center; gap: calc(var(--w) * 6);
  padding: calc(var(--w) * 4) calc(var(--w) * 10); border-radius: var(--radius-rund);
  background: #e3f1e7; color: #155b32; font-size: calc(var(--w) * 11); font-weight: 700; white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.site__status-punkt { width: calc(var(--w) * 8); height: calc(var(--w) * 8); border-radius: 50%; background: #1f9a55; }
.site__status.ist-am-laden { background: var(--signal-hauch); color: #8f2c14; }
.site__status.ist-am-laden .site__status-punkt {
  background: transparent; border: calc(var(--w) * 2) solid currentColor; border-right-color: transparent;
  animation: drehen 0.8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

.site__nav {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--w) * 46); padding: 0 calc(var(--w) * 20);
}
.site__logo { font-family: var(--serif); font-weight: 600; font-size: calc(var(--w) * 18); letter-spacing: -0.01em; }
.site__menue { display: flex; gap: calc(var(--w) * 16); font-size: calc(var(--w) * 11); color: #5f5a52; font-weight: 600; }

.site__inhalt {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: calc(var(--w) * 12);
  padding: 0 calc(var(--w) * 20) calc(var(--w) * 18); min-height: 0;
}
.site__karte {
  position: relative; border-radius: calc(var(--w) * 14); background: #fff;
  box-shadow: 0 calc(var(--w) * 1) calc(var(--w) * 2) rgba(38, 28, 14, 0.06), 0 calc(var(--w) * 10) calc(var(--w) * 24) calc(var(--w) * -10) rgba(38, 28, 14, 0.22);
  overflow: hidden;
}
.site__karte--produkt { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.site__foto { position: relative; overflow: hidden; background: #f1ece3; min-height: 0; }
.site__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%);
  transition: filter 0.5s ease, opacity 0.35s ease, transform 0.6s var(--kurve);
}
.site__badge {
  position: absolute; top: calc(var(--w) * 10); left: calc(var(--w) * 10);
  padding: calc(var(--w) * 3) calc(var(--w) * 9); border-radius: var(--radius-rund);
  font-size: calc(var(--w) * 10.5); font-weight: 700;
}
.site__badge--neu { background: #fff; color: #8f2c14; box-shadow: 0 calc(var(--w) * 2) calc(var(--w) * 6) rgba(0, 0, 0, 0.08); }
.site__badge--aus {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: calc(var(--w) * 7) calc(var(--w) * 16); background: #16130f; color: #fff;
  font-size: calc(var(--w) * 13); white-space: nowrap;
}
.site__badge[hidden] { display: none; }
.site__karte.ist-aus .site__foto img { filter: grayscale(1) brightness(0.92); opacity: 0.75; }
.site__info {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: calc(var(--w) * 2) calc(var(--w) * 10);
  padding: calc(var(--w) * 10) calc(var(--w) * 14) calc(var(--w) * 12);
}
.site__name { font-weight: 700; font-size: calc(var(--w) * 13.5); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site__preis { grid-row: 1 / span 2; grid-column: 2; font-weight: 700; font-size: calc(var(--w) * 24); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.site__anfragen { display: inline-flex; align-items: center; gap: calc(var(--w) * 5); color: #155b32; font-weight: 700; font-size: calc(var(--w) * 10.5); }
.site__anfragen svg { width: calc(var(--w) * 12); height: calc(var(--w) * 12); }
.site__entfernt {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #f6f2ea 0 calc(var(--w) * 10), #efe9de calc(var(--w) * 10) calc(var(--w) * 20));
  color: #5f5a52; font-weight: 700; font-size: calc(var(--w) * 13);
}
.site__entfernt[hidden] { display: none; }
.site__seite { display: grid; grid-template-rows: 1fr 1fr; gap: calc(var(--w) * 12); min-height: 0; }
.site__karte--klein { padding: calc(var(--w) * 14); display: grid; align-content: start; gap: calc(var(--w) * 4); font-size: calc(var(--w) * 11); color: #4a453e; }
.site__k-titel { font-weight: 700; font-size: calc(var(--w) * 12.5); color: #16130f; margin-bottom: calc(var(--w) * 2); }
.site__karte--dunkel { background: #16130f; color: #d9d2c5; }
.site__karte--dunkel .site__k-titel { color: #fff; }
.site__wa {
  display: inline-flex; align-items: center; gap: calc(var(--w) * 5); justify-self: start; margin-top: calc(var(--w) * 6);
  padding: calc(var(--w) * 5) calc(var(--w) * 11); border-radius: var(--radius-rund);
  background: var(--wa); color: #fff; font-weight: 700; font-size: calc(var(--w) * 10.5);
}
.site__wa svg { width: calc(var(--w) * 12); height: calc(var(--w) * 12); }

/* Schmale Website (Handy): nur die Produktkarte, grössere Schrift. Preis ab 19 px, Status ab 11 px */
@media (max-width: 639px) {
  .site { --w: calc(100cqw / 380); }
  .site__leiste { height: calc(var(--w) * 30); }
  .site__url { font-size: calc(var(--w) * 12); min-width: 0; }
  .site__status { font-size: calc(var(--w) * 14); }
  .site__nav { height: calc(var(--w) * 34); }
  .site__logo { font-size: calc(var(--w) * 17); }
  .site__menue { display: none; }
  .site__inhalt { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--w) * 12); }
  .site__seite { display: none; }
  .site__name { font-size: calc(var(--w) * 15.5); }
  .site__preis { font-size: calc(var(--w) * 25); }
  .site__anfragen { font-size: calc(var(--w) * 13); }
  .site__anfragen svg { width: calc(var(--w) * 14); height: calc(var(--w) * 14); }
  .site__badge { font-size: calc(var(--w) * 13); }
  .site__badge--aus { font-size: calc(var(--w) * 15.5); }
  .site__entfernt { font-size: calc(var(--w) * 15.5); }
}

/* Aktualisierung: kurzer Lichtstreif über die Karte, danach blinken die geänderten Werte */
.site__karte--produkt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-120%);
}
.site__karte--produkt.ist-am-laden::after { animation: streif 1.1s var(--kurve-weich) infinite; }
@keyframes streif { to { transform: translateX(120%); } }
.ist-neu-gesetzt { animation: aufleuchten 1.6s ease-out; border-radius: 4px; }
@keyframes aufleuchten {
  0%, 25% { background-color: rgba(224, 73, 43, 0.22); box-shadow: 0 0 0 calc(var(--w, 1px) * 3) rgba(224, 73, 43, 0.22); }
  100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Handy (Codex-Komponente, in Einheiten der Handybreite) ---------- */
.phone {
  --u: calc(100cqw / 300);
  --gruen: var(--gruen-an);
  --muted: rgba(10, 10, 12, 0.64);
  --linie-h: rgba(10, 10, 12, 0.1);
  width: 100%;
  color: var(--tinte);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}
.phone__bezel {
  border-radius: calc(var(--u) * 42);
  padding: calc(var(--u) * 9);
  background: linear-gradient(145deg, #202024, #050506 56%, #343238);
  box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, 0.18), 0 calc(var(--u) * 30) calc(var(--u) * 60) calc(var(--u) * -18) rgba(30, 22, 10, 0.5), 0 calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * -10) rgba(30, 22, 10, 0.3);
}
/* Feste Gerätehöhe; der Bearbeitungsteil scrollt, wenn Text grösser oder weiter gesetzt wird (WCAG 1.4.12) */
.phone__screen {
  position: relative; height: calc(var(--u) * 620); overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: calc(var(--u) * 33);
  background: linear-gradient(180deg, #fffdfa 0%, #f8f4ed 100%);
  font-size: calc(var(--u) * 14); line-height: 1.3;
}
.phone__screen > .statusbar, .phone__screen > .appbar { flex: none; }
.phone__screen::before {
  content: ""; position: absolute; z-index: 3; top: calc(var(--u) * 9); left: 50%;
  width: calc(var(--u) * 82); height: calc(var(--u) * 24); border-radius: 999px;
  transform: translateX(-50%); background: #08080a;
}
.statusbar {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--u) * 36); padding: calc(var(--u) * 9) calc(var(--u) * 22) 0;
  font-size: calc(var(--u) * 11); font-weight: 700;
}
.statusbar__icons { display: inline-flex; align-items: flex-end; gap: calc(var(--u) * 3); }
.statusbar__icons span { display: block; width: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: var(--tinte); }
.statusbar__icons span:nth-child(1) { height: calc(var(--u) * 6); opacity: 0.55; }
.statusbar__icons span:nth-child(2) { height: calc(var(--u) * 8); opacity: 0.75; }
.statusbar__icons span:nth-child(3) { width: calc(var(--u) * 18); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 3); }

.appbar {
  position: relative; z-index: 2; display: grid; grid-template-columns: calc(var(--u) * 32) 1fr calc(var(--u) * 32);
  align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 8);
}
.icon-button {
  width: calc(var(--u) * 32); height: calc(var(--u) * 32); display: grid; place-items: center;
  border: 0; border-radius: calc(var(--u) * 12); background: rgba(10, 10, 12, 0.06); color: var(--tinte); padding: 0;
}
.icon-button svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.icon-button--loeschen { color: #a13322; background: rgba(161, 51, 34, 0.08); }
.appbar__store { color: var(--muted); font-size: calc(var(--u) * 10.5); font-weight: 700; }
.appbar__h { font-size: calc(var(--u) * 16); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

.editor {
  position: relative; z-index: 1; display: grid; align-content: start; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12) calc(var(--u) * 12);
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.editor::-webkit-scrollbar { display: none; }
.photo-card, .fields { border-radius: calc(var(--u) * 20); background: var(--papier); box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(50, 39, 24, 0.08); }
.photo-card { padding: calc(var(--u) * 9); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--u) * 7); min-height: calc(var(--u) * 20); }
.section-head__titel { font-size: calc(var(--u) * 11.5); font-weight: 700; }
.chip {
  display: inline-flex; align-items: center; min-height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 8);
  border-radius: 999px; background: rgba(224, 73, 43, 0.1); color: #8f260f; font-size: calc(var(--u) * 9.5); font-weight: 700;
}
.chip[hidden] { display: none; }
.product-photo-wrap { aspect-ratio: 1 / 0.64; display: grid; place-items: center; overflow: hidden; border-radius: calc(var(--u) * 15); background: #f3eee5; }
.product-photo {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%);
  transition: opacity 180ms ease, transform 420ms var(--kurve);
}
.product-photo.is-changing { opacity: 0.22; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 7); margin-top: calc(var(--u) * 7); }
.thumb {
  height: calc(var(--u) * 40); padding: 0; overflow: hidden;
  border: calc(var(--u) * 2) solid transparent; border-radius: calc(var(--u) * 11); background: #f2ede4;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%); }
.thumb.is-active { border-color: var(--signal); }

.fields { display: grid; overflow: hidden; }
.field, .switch-row { display: grid; gap: calc(var(--u) * 5); padding: calc(var(--u) * 8) calc(var(--u) * 12); border-bottom: 1px solid var(--linie-h); }
.switch-row:last-child { border-bottom: 0; }
.field__label { font-size: calc(var(--u) * 10.5); font-weight: 700; }
.field input[type="text"] {
  width: 100%; min-height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 10);
  border: 1px solid rgba(10, 10, 12, 0.12); border-radius: calc(var(--u) * 12); background: #fbf7ef;
  font-size: calc(var(--u) * 13); font-weight: 700; color: var(--tinte);
}
.field--zeile { grid-template-columns: 1fr auto; align-items: center; }
.price-control { display: grid; grid-template-columns: calc(var(--u) * 32) minmax(calc(var(--u) * 96), auto) calc(var(--u) * 32); gap: calc(var(--u) * 6); align-items: center; }
.price-control > button {
  width: calc(var(--u) * 32); height: calc(var(--u) * 32); display: grid; place-items: center; padding: 0;
  border: 0; border-radius: calc(var(--u) * 11); background: var(--tinte); color: var(--papier);
}
.price-control svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.price-input {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6);
  min-height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 10);
  border: 1px solid rgba(10, 10, 12, 0.12); border-radius: calc(var(--u) * 12); background: #fbf7ef;
}
.price-input span { color: var(--muted); font-size: calc(var(--u) * 10.5); font-weight: 700; }
.price-input .price-input__zahl { color: var(--tinte); font-weight: 700; font-size: calc(var(--u) * 14); font-variant-numeric: tabular-nums; }
.switch-row { grid-template-columns: 1fr auto; align-items: center; }
.switch-row small { display: block; margin-top: calc(var(--u) * 2); color: var(--muted); font-size: calc(var(--u) * 10.5); font-weight: 600; }
.switch { position: relative; display: inline-block; width: calc(var(--u) * 44); height: calc(var(--u) * 26); }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(10, 10, 12, 0.18); transition: background 180ms ease; pointer-events: none; }
.switch span::after {
  content: ""; position: absolute; top: calc(var(--u) * 3); left: calc(var(--u) * 3);
  width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%;
  background: var(--papier); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(10, 10, 12, 0.18);
  transition: transform 180ms var(--kurve);
}
.switch input:checked + span { background: var(--gruen); }
.switch--quiet input:checked + span { background: var(--tinte); }
.switch input:checked + span::after { transform: translateX(calc(var(--u) * 18)); }
.switch input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.save-button {
  min-height: calc(var(--u) * 42); border: 0; border-radius: calc(var(--u) * 15);
  background: var(--tinte); color: var(--papier); font-weight: 700; font-size: calc(var(--u) * 14);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(10, 10, 12, 0.2);
  transition: transform 0.15s var(--kurve);
}
.save-button:active, .save-button.ist-getippt { transform: scale(0.97); }
.toast {
  position: absolute; z-index: 8; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 12);
  padding: calc(var(--u) * 11) calc(var(--u) * 13); border-radius: calc(var(--u) * 16);
  background: rgba(10, 10, 12, 0.94); color: var(--papier);
  font-size: calc(var(--u) * 11.5); font-weight: 700; line-height: 1.35;
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(10, 10, 12, 0.28);
  opacity: 0; transform: translateY(calc(var(--u) * 14)); pointer-events: none;
  transition: opacity 180ms ease, transform 220ms var(--kurve);
}
.toast.is-visible { opacity: 1; transform: none; }
.finger {
  position: absolute; z-index: 9; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%;
  background: rgba(224, 73, 43, 0.92);
  box-shadow: 0 0 0 calc(var(--u) * 8) rgba(224, 73, 43, 0.16), 0 calc(var(--u) * 12) calc(var(--u) * 28) rgba(10, 10, 12, 0.22);
  opacity: 0; transform: scale(0.75); pointer-events: none;
  transition: left 380ms var(--kurve), top 380ms var(--kurve), opacity 160ms ease, transform 160ms ease;
}
.finger.is-visible { opacity: 1; transform: scale(1); }

/* ==========================================================================
   Angebot
   ========================================================================== */
.angebot { padding-bottom: var(--abschnitt); }
.angebot__karte {
  display: grid; gap: var(--space-7); overflow: hidden;
  padding: clamp(28px, 6vw, 72px); border-radius: var(--radius-xl);
  background: var(--papier); box-shadow: var(--schatten-1), inset 0 0 0 1px var(--linie);
}
.angebot__titel {
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144;
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem); line-height: 1; letter-spacing: -0.03em;
}
.angebot__beschrieb { margin: var(--space-5) 0 var(--space-6); color: var(--tinte-2); max-width: 36rem; }
.angebot__fotos { position: relative; min-height: 270px; }
.angebot__foto {
  position: absolute; width: 52%; aspect-ratio: 1; object-fit: cover;
  border: 7px solid #fff; border-radius: 12px; box-shadow: var(--schatten-2);
}
.angebot__foto--1 { left: 0; top: 10%; transform: rotate(-7deg); }
.angebot__foto--2 { left: 26%; top: 0; transform: rotate(3deg); z-index: 1; }
.angebot__foto--3 { right: 0; top: 18%; transform: rotate(9deg); z-index: 2; }
.angebot__stempel {
  position: absolute; z-index: 3; left: 4%; bottom: 0;
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border-radius: var(--radius-rund); background: var(--signal); color: #fff;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.005em;
  box-shadow: 0 12px 26px -12px rgba(176, 57, 29, 0.9); transform: rotate(-4deg);
}
@media (min-width: 900px) {
  .angebot__karte { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-8); }
  .angebot__fotos { min-height: 380px; }
}

/* ==========================================================================
   Petrol-Bänder: So zahlst du, Dir gehört alles
   ========================================================================== */
.band { padding: var(--abschnitt) 0; }
.band--petrol {
  --fokus: #ffc2b1;
  background: radial-gradient(120% 90% at 85% 0%, var(--petrol-2) 0%, var(--petrol) 60%);
  color: var(--auf-petrol);
}
.band--petrol ::selection { background: rgba(255, 194, 177, 0.35); color: #fff; }

.zahlen__raster { display: grid; gap: var(--space-7); }
.zahlen__intro { margin-top: var(--space-4); color: var(--auf-petrol-2); max-width: 26rem; font-size: 1.06em; }
.zusagen { display: grid; border-top: 1px solid var(--petrol-linie); }
.zusage {
  display: grid; grid-template-columns: 28px 1fr; column-gap: var(--space-4); row-gap: 4px;
  padding: var(--space-5) 0; border-bottom: 1px solid var(--petrol-linie);
}
.zusage__icon { grid-row: 1 / span 2; width: 24px; height: 24px; margin-top: 2px; color: #8fd3b0; }
.zusage__titel { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.zusage__text { color: var(--auf-petrol-2); }
@media (min-width: 900px) {
  .zahlen__raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
  .zahlen__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 40px); }
  .zusage { grid-template-columns: 28px minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--space-5); }
  .zusage__icon { grid-row: auto; }
}

/* ==========================================================================
   Projekte
   ========================================================================== */
.projekte { padding: var(--abschnitt) 0 calc(var(--abschnitt) * 0.6); }
.projekt {
  display: grid; gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "medien" "inhalt";
  padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--linie);
}
.projekt__kopf { grid-area: kopf; }
.projekt__medien { grid-area: medien; min-width: 0; }
.projekt__inhalt { grid-area: inhalt; }
.projekt:first-of-type { border-top: 0; padding-top: 0; }
.projekt__marken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: var(--space-4); }
.kennzeichen {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px;
  border-radius: var(--radius-rund); font-size: 0.84rem; font-weight: 700;
}
.kennzeichen--projekt { background: #e2ecf5; color: #1b3a5b; }
.kennzeichen--kundin { background: #f6e1e7; color: #7b2d4f; }
.kennzeichen--familie { background: #e9e4f3; color: #4b3a78; }
.kennzeichen--eigen { background: #e2efe6; color: #1d5a36; }
.projekt__ort { display: inline-flex; align-items: center; gap: 6px; color: var(--tinte-3); font-size: 0.92rem; font-weight: 600; }
.projekt__ort svg { width: 16px; height: 16px; }
.projekt__name {
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144;
  font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); line-height: 1; letter-spacing: -0.03em;
}
.projekt__fakten { display: grid; gap: var(--space-4); margin: 0 0 var(--space-6); }
.projekt__fakten dt { font-size: 0.9rem; font-weight: 700; color: var(--tinte); margin-bottom: 2px; }
.projekt__fakten dd { max-width: 36rem; }
.projekt__fakten div:first-child dd { color: var(--tinte-2); }
.projekt__kann-titel { font-weight: 700; margin-bottom: var(--space-3); }
.haken-liste { display: grid; gap: 10px; max-width: 36rem; }
.haken-liste li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.haken-liste svg {
  width: 26px; height: 26px; padding: 5px; margin-top: 1px; border-radius: 50%;
  background: var(--tinte); color: var(--papier);
}
.projekt__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-6); }

@media (min-width: 1024px) {
  .projekt {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". medien" "kopf medien" "inhalt medien" ". medien";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 0;
  }
  .projekt__medien { align-self: center; }
  .projekt__fakten { margin-top: var(--space-5); }
}

/* Weitere Aufnahmen eines Projekts (Startseite, Produktseite, Wohnzimmer-Test) */
.ansichten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.ansicht {
  min-height: 40px; padding: 0 15px; border: 1.5px solid var(--linie-stark); border-radius: var(--radius-rund);
  background: transparent; color: var(--tinte-2); font-weight: 600; font-size: 0.88rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ansicht:hover { border-color: var(--tinte); color: var(--tinte); }
.ansicht[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }

/* Geräte-Rahmen für echte Aufnahmen: Laptop hinten, Handy vorne rechts;
   die Knöpfe für weitere Aufnahmen stehen in der freien Fläche unter dem Laptop */
.geraete {
  display: grid; position: relative; padding-bottom: 6px; container-type: inline-size;
  grid-template-columns: minmax(0, 1fr) 42%; grid-template-rows: auto 1fr;
}
.geraete__laptop { grid-column: 1 / -1; grid-row: 1; width: 88%; justify-self: start; align-self: start; container-type: inline-size; }
.geraete__handy { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 18cqw; container-type: inline-size; z-index: 2; }
.geraete .ansichten { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--space-4); padding-right: var(--space-3); }
@media (min-width: 640px) {
  .geraete { grid-template-columns: minmax(0, 1fr) 31%; }
  .geraete__handy { margin-top: 15cqw; }
}

.rahmen-laptop__deckel {
  padding: 2.2cqw 2.2cqw 2.6cqw; border-radius: 2.4cqw 2.4cqw 1cqw 1cqw;
  background: linear-gradient(160deg, #2a2a2e, #0d0d0f 60%, #232226);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--schatten-2);
}
.rahmen-laptop__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.6cqw; background: #fbf8f2; }
.rahmen-laptop__fuss {
  position: relative; height: 2.2cqw; margin: 0 -6cqw;
  border-radius: 0 0 2.4cqw 2.4cqw;
  background: linear-gradient(180deg, #e2ddd3 0%, #c6bfb2 60%, #a9a294 100%);
  box-shadow: 0 3cqw 5cqw -3cqw rgba(38, 28, 14, 0.6);
}
.rahmen-laptop__fuss::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 16cqw; height: 0.9cqw;
  border-radius: 0 0 1.4cqw 1.4cqw; background: rgba(10, 10, 12, 0.14); transform: translateX(-50%);
}
.rahmen-handy {
  padding: 3cqw; border-radius: 14cqw;
  background: linear-gradient(145deg, #202024, #050506 56%, #343238);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10cqw 20cqw -6cqw rgba(30, 22, 10, 0.5);
}
/* Statusleiste mit Dynamic Island über der Aufnahme: die Insel verdeckt nichts mehr */
.rahmen-handy__schirm { overflow: hidden; border-radius: 11cqw; background: #f6f2ea; }
.rahmen-handy__status {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 14cqw; padding: 0 9cqw 0 10cqw;
  font-family: var(--sans); font-size: 4.4cqw; font-weight: 700; color: var(--tinte);
}
.rahmen-handy__status::before {
  content: ""; position: absolute; top: 3.2cqw; left: 50%; width: 27cqw; height: 7.6cqw;
  border-radius: 999px; background: #08080a; transform: translateX(-50%);
}
.rahmen-handy__status i { width: 7cqw; height: 3.4cqw; border-radius: 1.2cqw; background: var(--tinte); opacity: 0.85; }
.rahmen-handy__bild { position: relative; aspect-ratio: 540 / 1168; overflow: hidden; background: #fbf8f2; }

/* Medium: Standbild unten, Video darüber, sobald es läuft */
.medium { position: relative; }
.medium__standbild, .medium__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
}
.medium__video { opacity: 0; transition: opacity 0.45s ease; }
.medium.ist-am-laufen .medium__video { opacity: 1; }
.medium.ist-fehler .medium__video { display: none; }
/* Ersatz-Bildschirmfoto scrollt langsam von oben nach unten */
.medium.ist-ersatz .medium__standbild { animation: ersatz-scrollen 22s ease-in-out infinite alternate; animation-play-state: paused; }
.medium.ist-ersatz.ist-sichtbar:not(.ist-angehalten) .medium__standbild { animation-play-state: running; }
@keyframes ersatz-scrollen {
  0%, 8% { object-position: 50% 0%; }
  92%, 100% { object-position: 50% 100%; }
}

/* Knopf liegt innerhalb der Bildfläche: 32 px sichtbar, 44 px Trefferfläche, halbtransparent */
.medium__knopf {
  position: absolute; z-index: 4; right: 6px; bottom: 6px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
}
.medium__knopf::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(10, 10, 12, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.2s ease;
}
.medium__knopf:hover::before { background: rgba(10, 10, 12, 0.78); }
.medium__knopf:focus-visible { outline-offset: -2px; }
.medium__knopf svg { position: relative; width: 13px; height: 13px; }
.medium__pause { display: none; }
.medium.ist-am-laufen:not(.ist-angehalten) .medium__pause,
.medium.ist-ersatz.ist-sichtbar:not(.ist-angehalten) .medium__pause { display: block; }
.medium.ist-am-laufen:not(.ist-angehalten) .medium__play,
.medium.ist-ersatz.ist-sichtbar:not(.ist-angehalten) .medium__play { display: none; }
/* unten links in der Bildfläche: die WhatsApp-Knöpfe der Aufnahmen (rechts unten) bleiben frei */
.geraete__laptop .medium__knopf { right: auto; left: calc(2.2cqw + 2px); bottom: calc(4.8cqw + 2px); }
.geraete__handy .medium__knopf { right: auto; left: calc(3cqw + 2px); bottom: calc(3cqw + 2px); }
/* Knopf sitzt im Handy-Rahmen, damit der Hinweis darunter ihn nicht verschiebt */
.rahmen-handy { position: relative; }
/* Hinweis unter dem Handy, solange die App läuft (z. B. «Arbeits-App mit Demo-Daten») */
.geraete__hinweis {
  display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin-top: 12px;
  font-size: 0.82rem; font-weight: 700; line-height: 1.3; color: var(--tinte-2);
}
.geraete__hinweis i { flex: none; width: 7px; height: 7px; margin-top: 0.4em; border-radius: 50%; background: var(--signal); }
.geraete__hinweis[hidden] { display: none; }

/* ==========================================================================
   Kanal: Drita e Besimit als Vorzeigemodell (dunkle Bühne in den Farben
   des Kanals: Nachtblau und Gold). Moment: das Licht im Bild geht an.
   ========================================================================== */
.kanal {
  --fokus: #ffc2b1;
  --kanal-grund: #060a14;
  --kanal-gold: #e8c677;
  --kanal-linie: rgba(232, 198, 119, 0.22);
  --auf-kanal-2: #b6bdcb;
  position: relative; overflow: hidden;
  padding: 0 0 var(--abschnitt);
  background:
    radial-gradient(90% 40% at 72% 0%, rgba(232, 198, 119, 0.08), transparent 70%),
    linear-gradient(180deg, #08101f 0%, var(--kanal-grund) 42%, #05070d 100%);
  color: var(--auf-dunkel);
}
.kanal ::selection { background: rgba(232, 198, 119, 0.32); color: #fff; }

/* Bild des Kanals: am Handy oben als Band, das nach unten in die Bühne ausläuft (Maske statt Überlagerung: keine Kante) */
.kanal__licht { position: relative; margin-bottom: calc(-1 * clamp(48px, 15vw, 110px)); }
.kanal__bild {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 60%;
  -webkit-mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, 0.35) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, 0.35) 76%, transparent 100%);
  transition: opacity 1.8s var(--kurve), filter 1.8s var(--kurve);
}
/* mit Skript wartet das Bild gedämpft, bis der Abschnitt ins Bild kommt; ohne Skript ist es an */
.kanal.wartet .kanal__bild { opacity: 0.35; filter: brightness(0.55) saturate(0.6); }

.kanal__raster { position: relative; z-index: 1; display: grid; gap: var(--space-7); }
.kanal__raster > * { min-width: 0; }
.kanal__kopf { display: grid; gap: var(--space-4); align-content: start; max-width: 40rem; }
.kanal__absender {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.9rem; font-weight: 650; line-height: 1.35; color: var(--auf-kanal-2);
}
.kanal__logo {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(232, 198, 119, 0.5), 0 10px 24px -10px rgba(0, 0, 0, 0.9);
}
.kanal__art { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.kanal__punkt { color: var(--kanal-gold); font-weight: 700; }
.kanal__titel {
  margin-top: var(--space-2);
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144;
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em;
}
.kanal__titel-name { display: block; color: var(--kanal-gold); }
.kanal__text { max-width: 34rem; font-size: 1.06em; color: var(--auf-kanal-2); }

/* Zahlen: eine grosse Leitzahl in Gold, darunter die drei Belege als Zeilen */
.kanal__beleg { display: grid; gap: var(--space-4); }
.kanal__zahlen {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5);
  border-top: 1px solid var(--kanal-linie);
}
.kanal__zahl {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--kanal-linie);
}
.kanal__wert {
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144;
  font-size: 2.05rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; color: var(--auf-dunkel);
}
.kanal__was { font-size: 0.95rem; line-height: 1.4; color: var(--auf-kanal-2); }
.kanal__zahl--haupt { display: block; padding: var(--space-5) 0; }
.kanal__zahl--haupt .kanal__wert { display: block; font-size: clamp(3.6rem, 1.7rem + 8vw, 6rem); letter-spacing: -0.035em; color: var(--kanal-gold); }
.kanal__zahl--haupt .kanal__was { display: block; margin-top: var(--space-3); font-size: 1.06rem; font-weight: 650; color: var(--auf-dunkel); }
.kanal__stand { font-size: 0.86rem; color: var(--auf-kanal-2); }

/* Kanäle: je eine Zeile mit Plattform-Zeichen, Name, Zahl und Link */
.kanal__aktion { display: grid; gap: var(--space-5); }
.kanal__kanaele { display: grid; gap: 10px; }
.kanal__link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px;
  grid-template-areas: "icon name pfeil" "icon anzahl pfeil";
  column-gap: 14px; align-items: center;
  min-height: 64px; padding: 10px 18px 10px 10px; border-radius: var(--radius-m);
  background: rgba(243, 238, 229, 0.04); box-shadow: inset 0 0 0 1px var(--kanal-linie);
  color: var(--auf-dunkel); text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--kurve);
  -webkit-tap-highlight-color: transparent;
}
.kanal__link:hover { background: rgba(232, 198, 119, 0.08); box-shadow: inset 0 0 0 1px rgba(232, 198, 119, 0.6); }
.kanal__link:active { transform: scale(0.985); }
.kanal__icon {
  grid-area: icon; width: 44px; height: 44px; padding: 11px; border-radius: 50%;
  background: rgba(232, 198, 119, 0.12); color: var(--kanal-gold);
}
.kanal__plattform { grid-area: name; align-self: end; font-weight: 700; line-height: 1.25; }
.kanal__anzahl { grid-area: anzahl; align-self: start; font-size: 0.92rem; line-height: 1.35; color: var(--auf-kanal-2); font-variant-numeric: tabular-nums; }
.kanal__extern { grid-area: pfeil; width: 18px; height: 18px; color: var(--auf-kanal-2); transition: transform 0.2s var(--kurve), color 0.2s ease; }
.kanal__link:hover .kanal__extern { color: var(--kanal-gold); transform: translate(2px, -2px); }
.kanal__knopf { justify-self: start; }
@media (max-width: 559px) { .kanal__knopf { width: 100%; padding-inline: 18px; text-wrap: balance; } }
.kanal__reihe { margin-top: var(--space-6); }

@media (min-width: 640px) {
  .kanal__kanaele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kanal { padding-top: var(--abschnitt); }
  /* Bild rechts oben hinter dem Text, läuft nach links und unten in die Bühne aus */
  .kanal__licht {
    position: absolute; top: 0; right: 0; width: min(78%, 1240px); margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 24%, #000 58%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 24%, #000 58%);
  }
  .kanal__bild {
    aspect-ratio: auto; height: clamp(460px, 44vw, 680px); object-position: 62% 55%;
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  }
  .kanal__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-8); }
  .kanal__raster > * { grid-column: 1 / -1; }
  .kanal__raster > .kanal__kopf { grid-column: 1 / span 6; min-height: clamp(280px, 24vw, 380px); }
  /* Zahlen in einer Reihe: Leitzahl breit, die drei Belege daneben; Zahlen unten bündig, Texte oben bündig */
  .kanal__zahlen {
    grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
    column-gap: var(--space-6);
  }
  .kanal__zahl {
    grid-column: auto; grid-row: span 2; grid-template-columns: none; grid-template-rows: subgrid;
    row-gap: var(--space-3); align-items: end; padding: var(--space-6) 0 0; border-bottom: 0;
  }
  .kanal__zahl .kanal__was { align-self: start; }
  .kanal__zahl--haupt { display: grid; }
  .kanal__zahl--haupt .kanal__was { margin-top: 0; }
  .kanal__wert { font-size: 2.6rem; }
  .kanal__reihe { margin-top: 0; }
}
@media (min-width: 1180px) {
  .kanal__kanaele { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kanal__raster > .kanal__kopf { grid-column: 1 / span 7; }
}

/* ==========================================================================
   Schilderstrasse
   ========================================================================== */
.strasse {
  --fokus: #ffc2b1;
  position: relative; overflow: hidden;
  padding: clamp(64px, 9vw, 120px) 0 0;
  background: linear-gradient(180deg, #08101d 0%, #0d1d35 38%, #1d3a62 70%, #4f6f96 92%, #7b95b5 100%);
  color: var(--auf-dunkel);
}
.strasse__innen { position: relative; z-index: 2; padding-bottom: clamp(100px, 12vw, 180px); }
.strasse__kopf { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); max-width: 40rem; }
.strasse__text { color: #c9d3e2; }
/* Silhouette in zwei Tiefen mit einzelnen warmen Fenstern und einer Strassenkante */
.strasse__skyline { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(84px, 11vw, 160px); }
.skyline__hinten { fill: #16294a; }
.skyline__vorne { fill: #070c17; }
.skyline__fenster { fill: #f2c879; opacity: 0.78; }
.skyline__strasse { fill: #04070d; }

.schilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.schild-platz { position: relative; }
.schild {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 78px; height: 100%; padding: 12px 10px; border-radius: 10px;
  text-align: center; text-decoration: none; line-height: 1.05;
  transition: filter 0.7s ease, box-shadow 0.9s ease, transform 0.3s var(--kurve);
}
/* ohne Skript sind die Schilder an; mit Skript warten sie dunkel, bis die Strasse ins Bild kommt */
.strasse.wartet .schild { filter: saturate(0.2) brightness(0.42); }
.schild:hover { transform: translateY(-2px); }
.schild__wort { font-size: 1.15rem; font-weight: 700; }
.schild__klein { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

.schild--swisstv { flex-direction: row; gap: 8px; background: #fff; color: #1b3a5b; --glut: rgba(186, 230, 255, 0.55); }
.schild__tv { width: 30px; height: 24px; fill: none; stroke: #5cb82e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.schild--teuta { background: #f7dfe7; color: #7b2d4f; --glut: rgba(255, 170, 205, 0.6); }
.schild--teuta .schild__wort { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; font-variation-settings: "opsz" 144; letter-spacing: 0.01em; }
.schild--teuta .schild__klein { letter-spacing: 0.14em; font-size: 0.7rem; }
.schild--diamond { flex-direction: row; gap: 10px; background: #121a23; color: #e7eef4; box-shadow: inset 0 0 0 1px rgba(231, 238, 244, 0.45); --glut: rgba(200, 225, 255, 0.4); }
.schild--diamond .schild__wort { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; text-align: left; line-height: 1.3; font-weight: 600; }
.schild__diamant { width: 22px; height: 20px; fill: none; stroke: #cfe1f2; stroke-width: 1.4; stroke-linejoin: round; }
.schild--haramain { background: #0f3d2c; color: #e2c475; box-shadow: inset 0 0 0 2px #c9a84c, inset 0 0 0 4px #0f3d2c, inset 0 0 0 5px rgba(201, 168, 76, 0.6); --glut: rgba(226, 196, 117, 0.5); }
.schild--haramain .schild__wort { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; }
.schild--haramain .schild__klein { font-size: 0.7rem; letter-spacing: 0.22em; }
.schild--dija { flex-direction: row; gap: 8px; background: #1f4fd1; color: #fff; --glut: rgba(110, 160, 255, 0.6); }
.schild--dija .schild__wort { font-size: 1.45rem; letter-spacing: -0.02em; }
.schild__dija-icon {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: #fff; color: #1f4fd1; font-weight: 700; font-size: 0.95rem;
}
.schild--dein {
  background: rgba(7, 13, 24, 0.62); color: var(--auf-dunkel);
  box-shadow: inset 0 0 0 1.5px rgba(243, 238, 229, 0.5); --glut: rgba(243, 238, 229, 0.18);
}
.schild--dein .schild__wort { font-size: 0.95rem; font-weight: 600; line-height: 1.25; }

/* Schilder gehen an (gestaffelt, kurzes Neon-Flackern) */
.strasse.ist-an .schild {
  transition-delay: calc(var(--i, 0) * 140ms);
  animation: anschalten 0.9s steps(1, end) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}
.strasse:not(.wartet) .schild:not(.schild--dein) { box-shadow: var(--rand-schatten, 0 0 0 0 transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.6), 0 0 36px -4px var(--glut); }
.strasse:not(.wartet) .schild--diamond { --rand-schatten: inset 0 0 0 1px rgba(231, 238, 244, 0.45); }
.strasse:not(.wartet) .schild--haramain { --rand-schatten: inset 0 0 0 2px #c9a84c; }
@keyframes anschalten {
  0% { opacity: 0.45; }
  18% { opacity: 1; }
  26% { opacity: 0.55; }
  40% { opacity: 1; }
  100% { opacity: 1; }
}

@media (min-width: 900px) {
  .schilder { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .schild-platz { padding-top: 46px; }
  .schild-platz::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 46px;
    background: linear-gradient(#56657a, #2c3646);
  }
  .schild-platz:nth-child(2n) { padding-top: 76px; }
  .schild-platz:nth-child(2n)::before { height: 76px; }
  .schild-platz:nth-child(3) { padding-top: 26px; }
  .schild-platz:nth-child(3)::before { height: 26px; }
  .schild { min-height: 112px; padding: 16px 12px; }
  .schild__wort { font-size: 1.35rem; }
  .schild--teuta .schild__wort { font-size: 2rem; }
  .schild--haramain .schild__wort { font-size: 1.6rem; }
  .schild--dija .schild__wort { font-size: 1.8rem; }
}

/* ==========================================================================
   Videos (dunkle Bühne)
   ========================================================================== */
.videos {
  --fokus: #ffc2b1;
  padding: var(--abschnitt) 0; background: var(--buehne); color: var(--auf-dunkel);
}
.videos ::selection { background: rgba(255, 194, 177, 0.35); color: #fff; }
.abschnitt-kopf--hell .abschnitt-kopf__text { color: var(--auf-dunkel-2); }
.reihe + .reihe { margin-top: var(--space-9); }
.reihe__kopf { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.reihe__titel { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.reihe__text { color: var(--auf-dunkel-2); max-width: 44rem; }
.reihe__pfeile { display: none; gap: 10px; }
@media (min-width: 900px) {
  .reihe__kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-7); }
  .reihe__titel { grid-column: 1; }
  .reihe__text { grid-column: 1; }
  .reihe__pfeile { display: flex; grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

.kacheln {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--rand);
  margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 18px;
  scrollbar-width: thin; scrollbar-color: #3a3f4b transparent;
}
.kachel { flex: none; width: min(62vw, 250px); scroll-snap-align: start; }
@media (min-width: 900px) { .kachel { width: 236px; } .reihe--kunden .kachel { width: 300px; } }
.reihe.ohne-ueberlauf .reihe__pfeile { display: none; }
.kachel__rahmen {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px;
  background: var(--buehne-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.kachel__oeffnen {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; padding: 12px;
  border: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.55));
}
.kachel__oeffnen:focus-visible { outline-offset: -4px; }
.kachel__ton {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 10px;
  border-radius: var(--radius-rund); background: rgba(255, 255, 255, 0.92); color: var(--tinte);
  font-weight: 700; font-size: 0.82rem;
  transition: transform 0.2s var(--kurve);
}
.kachel__ton svg { width: 18px; height: 18px; }
.kachel__oeffnen:hover .kachel__ton { transform: scale(1.04); }
/* Pause unten rechts, nicht mehr über dem Kanal-Logo oben */
.medium__knopf--kachel { top: auto; right: 4px; bottom: 7px; }
.kachel__titel { margin-top: 12px; font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--auf-dunkel); }

/* Kino: Video mit Ton */
.kino {
  --fokus: #ffc2b1;
  width: min(92vw, 460px); max-width: none; max-height: none; padding: 0; margin: auto;
  border: 0; background: transparent; color: #fff; overflow: visible;
}
.kino::backdrop { background: rgba(4, 5, 8, 0.95); }
.kino__innen { position: relative; }
.kino__video { width: 100%; max-height: 82vh; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; object-fit: contain; }
.kino__titel { margin-top: 12px; font-weight: 600; text-align: center; color: var(--auf-dunkel); }
.kino__zu { position: absolute; top: 10px; right: 10px; z-index: 2; }
.kino[open] { animation: kino-auf 0.35s var(--kurve); }
@keyframes kino-auf { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* ==========================================================================
   So entsteht ein Video
   ========================================================================== */
.werkstatt { padding: var(--abschnitt) 0; }
/* Handy: vier Karten zum Wischen (spart drei Bildschirmhöhen); Titel stehen immer über dem Material */
.schritte-video {
  display: flex; gap: var(--space-4); align-items: start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--rand);
  margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) var(--space-4);
  scrollbar-width: thin; scrollbar-color: #b9b0a1 transparent;
}
.schritt-video { flex: none; width: min(84vw, 340px); scroll-snap-align: start; display: grid; gap: var(--space-3); align-content: start; }
.schritt-video > p { color: var(--tinte-2); }
.schritt-video__titel { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.schritt-video__nr {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tinte); color: var(--papier); font-size: 0.9rem; font-weight: 700;
}
.schritt-video__bild { border-radius: var(--radius-l); overflow: hidden; }

.schritt-video__bild--drehbuch { padding: var(--space-5); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.drehbuch { display: grid; gap: 14px; counter-reset: none; }
.drehbuch li { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; }
.drehbuch__nr { grid-row: 1 / span 2; font-size: 0.75rem; font-weight: 700; color: var(--signal-text); padding-top: 3px; font-variant-numeric: tabular-nums; }
.drehbuch__zeile { font-weight: 600; font-size: 0.95rem; line-height: 1.4; }
.drehbuch__uebersetzung { margin-top: 2px; font-size: 0.86rem; line-height: 1.4; color: var(--tinte-3); }
.drehbuch li.ist-stimme { margin: -8px -10px; padding: 8px 10px; border-radius: 12px; background: var(--signal-hauch); }
.drehbuch li.ist-stimme .drehbuch__uebersetzung { color: var(--tinte-2); }
/* ausgelassene Zeile (Auszug) */
.drehbuch li.drehbuch__luecke .drehbuch__nr, .drehbuch li.drehbuch__luecke .drehbuch__zeile { color: var(--tinte-3); font-weight: 600; }

.schritt-video__bild--bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.schritt-video__bild--bilder img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }

.schritt-video__bild--stimme {
  display: grid; align-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-5);
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie);
}
.stimme__zitat { display: grid; gap: 10px; margin: 0 0 var(--space-2); }
.stimme__label { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; color: var(--tinte-2); }
.stimme__nr {
  display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 7px;
  border-radius: var(--radius-rund); background: var(--signal-hauch); color: var(--signal-text); font-size: 0.8rem;
}
.stimme__zeile {
  margin: 0; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 72;
  font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.012em; color: var(--tinte);
}
.stimme__uebersetzung { font-size: 0.92rem; line-height: 1.45; color: var(--tinte-3); }
.stimme__knopf {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  min-height: 52px; padding: 0 22px 0 8px; border: 0; border-radius: var(--radius-rund);
  background: var(--tinte); color: var(--papier); font-weight: 700;
}
.stimme__knopf svg { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--signal); color: #fff; }
.stimme__pause { display: none; }
.stimme__knopf.ist-an .stimme__play { display: none; }
.stimme__knopf.ist-an .stimme__pause { display: block; }
.stimme__welle {
  position: relative; height: 64px;
  -webkit-mask: url("media/werkstatt/stimme-welle.png") center / 100% 100% no-repeat;
  mask: url("media/werkstatt/stimme-welle.png") center / 100% 100% no-repeat;
  background: rgba(10, 10, 12, 0.22);
}
.stimme__fortschritt { position: absolute; inset: 0 auto 0 0; width: var(--fortschritt, 0%); background: var(--tinte); }
.stimme__info { font-size: 0.86rem; color: var(--tinte-3); }

.schritt-video__bild--fertig { aspect-ratio: 9 / 16; width: 100%; max-width: 300px; background: #0c0e13; }
.schritt-video__bild--fertig .medium__knopf { right: 4px; bottom: 4px; }

@media (min-width: 700px) {
  .schritte-video {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6);
    overflow: visible; margin-inline: 0; padding: 0;
  }
  .schritt-video { width: auto; }
}
@media (min-width: 1180px) {
  .schritte-video { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: 0; }
  /* Zeilen: Titel, Material, Text, über alle vier Schritte gleich hoch */
  .schritt-video { grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-3); }
  .schritt-video__bild { height: 100%; }
  .schritt-video__bild--drehbuch { padding: var(--space-5); }
  /* Bilder, Stimme und fertige Folge richten sich nach der Höhe des Drehbuchs */
  .schritt-video__bild--bilder, .schritt-video__bild--fertig { contain: size; }
  .schritt-video__bild--fertig { max-width: none; aspect-ratio: auto; }
  .schritt-video__bild--bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .schritt-video__bild--bilder img { aspect-ratio: auto; height: 100%; min-height: 0; }
  .stimme__zeile { font-size: 1.28rem; }
}

/* ==========================================================================
   Leistungen
   ========================================================================== */
.leistungen { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.leistungen__haupt { display: grid; gap: var(--space-6); margin-top: clamp(40px, 6vw, 72px); }
.leistung { padding-top: var(--space-5); border-top: 2px solid var(--tinte); }
.leistung__titel { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: var(--space-3); }
.leistung p { color: var(--tinte-2); max-width: 26rem; }
.leistungen__unten { display: grid; gap: var(--space-7); margin-top: clamp(56px, 8vw, 104px); }
.klein-titel { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-4); }
.strich-liste { display: grid; border-top: 1px solid var(--linie); }
.strich-liste li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--linie); position: relative; }
.strich-liste li::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--signal); transform: translateY(-50%);
}
.einstieg { padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-l); background: var(--papier); box-shadow: var(--schatten-1), inset 0 0 0 1px var(--linie); }
.einstieg__titel { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-5); }
.einstieg__liste { display: grid; gap: var(--space-5); }
.einstieg__punkt { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.einstieg__liste p { color: var(--tinte-2); }
.einstieg__knopf { margin-top: var(--space-6); }
@media (min-width: 900px) {
  .leistungen__haupt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .leistungen__unten { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
}

/* ==========================================================================
   Dir gehört alles
   ========================================================================== */
.eigentum__punkte { display: grid; gap: var(--space-5); margin-top: clamp(40px, 6vw, 72px); }
.eigentum__punkt { padding-top: var(--space-4); border-top: 1px solid var(--petrol-linie); }
.eigentum__punkt h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.eigentum__punkt p { color: var(--auf-petrol-2); }
.eigentum__person {
  margin-top: clamp(48px, 7vw, 96px); max-width: 30em;
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1.22; letter-spacing: -0.015em;
}
@media (min-width: 900px) { .eigentum__punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }

/* ==========================================================================
   So läuft es
   ========================================================================== */
.ablauf { padding: var(--abschnitt) 0; }
.ablauf__raster { display: grid; gap: var(--space-7); }
/* Ablauf als WhatsApp-Verlauf: Ein Mensch, ein Gespräch */
.ablauf__chat {
  max-width: 40rem; padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-l); background: #ece5da; box-shadow: inset 0 0 0 1px var(--linie);
}
.ablauf__schritte { display: grid; gap: var(--space-3); }
.ablauf__schritt {
  position: relative; max-width: 86%; padding: 12px 16px 13px;
  border-radius: 16px; box-shadow: 0 1px 1px rgba(38, 28, 14, 0.1);
}
.ablauf__schritt--du { justify-self: end; background: #d8f3d0; border-bottom-right-radius: 5px; }
.ablauf__schritt--ich { justify-self: start; background: var(--papier); border-bottom-left-radius: 5px; }
.ablauf__schritt--ich + .ablauf__schritt--ich, .ablauf__schritt--du + .ablauf__schritt--du { margin-top: -4px; }
.ablauf__schritt h3 { display: flex; align-items: center; gap: 8px; font-size: 1.04rem; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.ablauf__nr {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10, 10, 12, 0.08); font-size: 0.78rem; font-weight: 700; color: var(--tinte-2);
}
.ablauf__schritt p { color: var(--tinte-2); font-size: 0.98rem; line-height: 1.5; }
.ablauf__treffen {
  display: flex; gap: 12px; align-items: flex-start; max-width: 40rem;
  padding: var(--space-5); border-radius: var(--radius-m); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie);
  font-weight: 600;
}
.ablauf__treffen svg { width: 22px; height: 22px; flex: none; color: var(--signal-text); margin-top: 2px; }
@media (min-width: 1024px) {
  .ablauf__raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: var(--space-8); row-gap: var(--space-6); align-items: start; }
  .ablauf__raster .titel { grid-column: 1; grid-row: 1; }
  .ablauf__treffen { grid-column: 1; grid-row: 2; align-self: start; }
  .ablauf__chat { grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: 100%; }
}

/* ==========================================================================
   Fragen
   ========================================================================== */
.fragen { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.fragen__raster { display: grid; gap: var(--space-6); }
.fragen__liste { max-width: 52rem; }
.fragen__liste { border-top: 1px solid var(--linie-stark); }
.frage { border-bottom: 1px solid var(--linie-stark); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.08rem; line-height: 1.35;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary svg { width: 22px; height: 22px; flex: none; transition: transform 0.3s var(--kurve); }
.frage[open] summary svg { transform: rotate(45deg); }
.frage summary:hover span { text-decoration: underline; text-decoration-color: var(--linie-stark); }
.frage summary span { text-wrap: pretty; }
.frage__antwort { padding: 0 0 var(--space-5); max-width: 42rem; color: var(--tinte-2); }
.frage__antwort a { color: var(--tinte); font-weight: 600; }


/* ==========================================================================
   Kontakt
   ========================================================================== */
.kontakt { padding: 0 0 var(--abschnitt); }
.kontakt__karte {
  display: grid; gap: var(--space-7);
  padding: clamp(28px, 6vw, 80px); border-radius: var(--radius-xl);
  background: var(--papier); box-shadow: var(--schatten-1), inset 0 0 0 1px var(--linie);
}
.kontakt__titel {
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 5.6rem); line-height: 0.95; letter-spacing: -0.035em;
}
.kontakt__beschrieb { margin: var(--space-5) 0 var(--space-6); max-width: 32rem; color: var(--tinte-2); font-size: 1.06em; }
.kontakt__daten { display: grid; border-top: 1px solid var(--linie); align-self: end; }
.kontakt__daten > div { display: grid; gap: 2px; padding: var(--space-4) 0; border-bottom: 1px solid var(--linie); }
.kontakt__daten dt { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: var(--tinte-2); }
.kontakt__daten dt svg { width: 16px; height: 16px; }
.kontakt__daten dd { font-size: 1.12rem; font-weight: 600; }
.kontakt__daten a { text-decoration-color: var(--linie-stark); }
.kontakt__daten a:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .kontakt__karte { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); }
}

/* ==========================================================================
   Fusszeile
   ========================================================================== */
.fuss { padding: var(--space-8) 0 var(--space-7); background: var(--grund-2); border-top: 1px solid var(--linie); font-size: 0.95rem; }
.fuss__raster { display: grid; gap: var(--space-6); }
.marke--fuss .marke__wort { font-size: 30px; }
.fuss__rechte { margin-top: var(--space-4); color: var(--tinte-2); }
.fuss__titel { font-size: 0.95rem; font-weight: 700; color: var(--tinte); margin-bottom: var(--space-3); }
.fuss__liste { display: grid; gap: 4px; }
.fuss__liste a { display: inline-block; padding: 6px 0; text-decoration-color: var(--linie-stark); }
.fuss__liste a:hover { text-decoration-color: currentColor; }
.fuss__liste a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.fuss__liste--zeile { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fuss__rechtliches { margin-top: var(--space-4); }
@media (min-width: 900px) { .fuss__raster { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-7); } }

/* ==========================================================================
   Leistung: Abschnitte unterhalb des Anfangs werden erst gerendert, wenn sie
   in die Nähe kommen (kürzt den ersten langen Task am Handy stark)
   ========================================================================== */
.angebot, .zahlen, .projekte, .kanal, .strasse, .videos, .werkstatt, .leistungen, .eigentum, .ablauf, .fragen, .kontakt, .fuss {
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}

/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .finger { display: none; }
  .medium.ist-ersatz .medium__standbild { animation: none !important; }
  .kanal__link:hover .kanal__extern { transform: none; }
  .site__status.ist-am-laden .site__status-punkt { animation: none !important; }
}