/* VERSELO HOME — Sektions-Styles (lädt nach base.css) */

/* ══════════ HERO ══════════
   Der Film wird nicht sofort alles. Zuerst ein Fenster unter der Botschaft, dann
   öffnet er sich auf das ganze Bild und bleibt stehen, während drei Sätze
   durchlaufen. Zwei Werte steuern das, beide setzt js/core.js:
     --p  0…1  wie weit der Film geöffnet ist (erster Bildschirm)
     data-beat 0…3  welcher Satz steht

   Der Laufweg (.hero__rail) gibt der Sektion ihre Höhe; .hero__pin klebt darin.
   Deshalb braucht der Hero kein `overflow: hidden` — das würde sticky töten. */
.hero { position: relative; --p: 0; --hero-open: clamp(300px, 48svh, 470px); }
.hero__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--paper);
  transition: background .5s var(--ease);
}
.hero[data-open="dark"] .hero__pin { background: var(--base); }

/* Die Eröffnungsfläche: hier steht der Text, nicht über dem Film. Sie hebt ab,
   sobald der Film sich öffnet. */
.hero__open {
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(var(--sn-h, 88px) + 1.6rem) var(--pad) 2.4rem;
  /* eingerückt bis hinter den Schriftzug in der Leiste — der Satz sitzt in
     derselben Zeile wie Name, Aktion und Menü, nicht darunter */
  padding-left: max(var(--pad), min(27vw, 430px));
  opacity: calc(1 - var(--p) * 1.9);
  transform: translateY(calc(var(--p) * -38px));
  will-change: opacity, transform;
}
/* Auf der Eröffnungsfläche darf die Zeile nicht so laut sein wie über einem Film —
   sie steht auf Papier und teilt sich die Zeile mit der Leiste. */
.hero__open h1 { font-size: clamp(1.7rem, 2.9vw, 2.7rem); line-height: 1.2; max-width: 28ch; }
.hero__open .lede { max-width: 36rem; margin-top: 1.35rem; font-size: clamp(.95rem, 1.05vw, 1.05rem); }
.hero[data-open="light"] .hero__open { color: rgba(11, 10, 9, .72); }
.hero[data-open="light"] .hero__open h1 { color: #0B0A09; }
.hero[data-open="light"] .hero__open .label { color: var(--gold-deep); }
/* .lede bringt eine eigene helle Farbe mit — auf Papier war sie unsichtbar. */
.hero[data-open="light"] .hero__open .lede { color: rgba(11, 10, 9, .66); }

/* Das Filmfenster. Bei --p 0 sitzt es unter dem Text und läuft unten aus dem Bild;
   bei --p 1 füllt es den Bildschirm. Nur Kanten und Radius bewegen sich. */
.hero__frame {
  position: absolute; z-index: 1;
  top: calc(var(--hero-open) * (1 - var(--p)));
  left: calc(var(--pad) * (1 - var(--p)));
  right: calc(var(--pad) * (1 - var(--p)));
  bottom: calc(var(--pad) * .55 * (1 - var(--p)));
  border-radius: calc(20px * (1 - var(--p)));
  overflow: hidden; background: #06070a;
  box-shadow: 0 calc(30px * (1 - var(--p))) calc(90px * (1 - var(--p))) rgba(0, 0, 0, .34);
}
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Deutlich leichter als vorher: der Film war unter dem alten Schleier kaum als Film
   zu erkennen. Was Text lesbar macht, sitzt jetzt am Text (text-shadow), nicht auf
   dem ganzen Bild. Der Schleier zieht erst an, wenn Sätze darüber laufen. */
.hero__shade {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 10, 9, .34) 0%, transparent 24%),
    linear-gradient(0deg, rgba(11, 10, 9, .52) 0%, transparent 32%),
    radial-gradient(76% 62% at 50% 52%, transparent 44%, rgba(11, 10, 9, .40) 100%);
  opacity: calc(.5 + var(--p) * .5);
}

/* Die Sätze. Einer je Bildschirm, mittig, sonst nichts. */
.hero__beats { position: absolute; inset: 0; display: grid; place-items: center;
  padding: 0 var(--pad); }
/* Ein Schatten NUR unter dem Satzband, statt eines Schleiers über dem ganzen Film.
   Er kommt erst mit dem ersten Satz — solange nur der Film läuft, liegt nichts drauf. */
.hero__beats::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(68% 30% at 50% 50%, rgba(11, 10, 9, .62) 0%, rgba(11, 10, 9, .34) 55%, transparent 78%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.hero:not([data-beat="0"]) .hero__beats::before { opacity: 1; }
.hero__beat {
  /* positioniert, sonst malt der absolut gesetzte Schatten (::before) ueber den Satz */
  grid-area: 1 / 1; position: relative; z-index: 1;
  max-width: 46rem; text-align: center;
  font-family: var(--display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.55rem, 3.4vw, 2.9rem); line-height: 1.18; letter-spacing: -.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .7s var(--easeOut);
}
.hero[data-beat="1"] .hero__beat[data-beat="1"],
.hero[data-beat="2"] .hero__beat[data-beat="2"],
.hero[data-beat="3"] .hero__beat[data-beat="3"] { opacity: 1; transform: none; }
.hero[data-beat="3"] .hero__beat[data-beat="3"] { pointer-events: auto; }

/* Die Türen: echte Menüpunkte, kein Zierrat. Sie kommen nach dem letzten Satz. */
.hero__doors { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2.2rem; }
.hero__doors a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding: .85rem 1.4rem; border-radius: 999px;
  border: 1px solid rgba(244, 239, 232, .28); background: rgba(11, 10, 9, .42);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .6s var(--easeOut),
              background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.hero[data-beat="3"] .hero__doors a { opacity: 1; transform: none; }
.hero[data-beat="3"] .hero__doors a:nth-child(2) { transition-delay: .07s; }
.hero[data-beat="3"] .hero__doors a:nth-child(3) { transition-delay: .14s; }
.hero[data-beat="3"] .hero__doors a:nth-child(4) { transition-delay: .21s; }
.hero__doors a:hover, .hero__doors a:focus-visible {
  background: var(--gold); border-color: var(--gold); color: #0B0A09; }

.hero__cue {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 2; transform: translateX(-50%);
  color: var(--ink-4); font-size: .58rem; letter-spacing: .3em;
  animation: heroCue 2.6s var(--ease) infinite;
  opacity: calc(1 - var(--p) * 4);
}
/* Der Hinweis liegt auf dem Film, nicht auf dem Papier — er bleibt hell. Und er
   verschwindet, sobald der erste Satz steht: die Keyframes ueberschreiben jede
   statische Deckkraft, also muss die Animation selbst aus. */
.hero__cue { color: rgba(244, 239, 232, .62); text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
  transition: opacity .3s var(--ease); }
.hero:not([data-beat="0"]) .hero__cue { animation: none; opacity: 0; }
@keyframes heroCue { 0%,100% { opacity: .32; transform: translate(-50%, 0); }
                     50%     { opacity: .75; transform: translate(-50%, 5px); } }
@media (prefers-reduced-motion: reduce) { .hero__cue { animation: none; } }

/* Der Laufweg: ein Bildschirm zum Öffnen, dann einer je Satz. Rastpunkte, damit
   das Rad in den nächsten Takt einschnappt statt irgendwo dazwischen zu stehen. */
.hero__rail > i { display: block; height: 100svh; scroll-snap-align: start; }

/* Die beiden Knöpfe der Leiste tragen ihren eigenen Grund und lesen sich auf
   Papier wie auf Schwarz. Nur der Schriftzug erbt die Farbe — der muss wissen,
   worauf er steht. js/core.js setzt die Flagge, solange die Fläche oben liegt. */
html[data-hero-open="1"] .sn { color: #0B0A09; }
.lede { margin-top: 1.8rem; }

.hero__demo {
  position: relative; display: block; text-decoration: none; color: inherit;
  padding: 1.8rem 1.9rem 1.6rem;
  background: linear-gradient(160deg, #1E1B17, var(--raised) 62%);
  border: 1px solid var(--gold-line); border-radius: 14px;
  box-shadow: var(--shadow-deep), 0 0 90px rgba(201, 162, 74, .1);
  overflow: hidden;
  transition: transform .45s var(--easeOut), border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.hero__demo:hover { transform: translateY(-5px); border-color: rgba(231, 194, 109, .6); box-shadow: var(--shadow-deep), 0 0 130px rgba(201, 162, 74, .18); }
.hero__demo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(231, 194, 109, .09) 50%, transparent 68%);
  background-size: 240% 100%; animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0%, 55%, 100% { background-position: 130% 0; } 78% { background-position: -30% 0; } }
.hero__status { color: var(--gold); display: flex; align-items: center; gap: .55rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 12px rgba(231, 194, 109, .9); animation: pulse 2.4s var(--ease) infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.72); } }
.hero__demoline { font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); color: var(--ink); margin-top: 1rem; }
.wave { display: flex; align-items: center; gap: 5px; height: 34px; margin-top: 1.3rem; }
.wave span { width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); height: calc(5px + var(--h, .35) * 26px); transition: height .19s ease; }
.hero__demohint { color: var(--ink-4); margin-top: 1.2rem; font-size: .62rem; }

/* The ticker used to be pinned to the bottom of the hero (position:absolute).
   It now closes the systems section, so it flows in the document instead — left
   absolute it collapsed onto its own label. */
.feed {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 1.4rem;
  padding: .8rem var(--pad); overflow: hidden;
  background: rgba(11, 10, 9, .6); backdrop-filter: blur(6px);
}
.feed__label { flex: none; color: var(--ink-4); font-size: .58rem; position: relative; z-index: 1; background: transparent; }
.feed__track { display: flex; white-space: nowrap; color: var(--ink-3); font-size: .64rem; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.feed__track span { animation: feed 46s linear infinite; }
@keyframes feed { to { transform: translateX(-100%); } }

/* ══════════ TRUST ══════════ */
.trust { background: var(--raised); }
.trust__row {
  max-width: var(--maxw); margin-inline: auto; padding: 1.15rem var(--pad);
  display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; color: var(--ink-3); font-size: .66rem;
}
.trust__row span { cursor: help; transition: color .3s var(--ease); }
.trust__row span:hover { color: var(--gold); }

/* ══════════ PROBLEM ══════════ */
.scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.4rem; }
.scene { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.9rem 1.8rem; box-shadow: var(--shadow-card); }
.scene__time { font-size: 1.9rem; letter-spacing: .02em; color: var(--ink); font-family: var(--mono); }
.scene__p { margin-top: 1.1rem; color: var(--ink-2); }
.scene__inst { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--clay); font-size: .62rem; line-height: 1.7; }
.sec__close { margin-top: 3rem; max-width: 40rem; color: var(--ink-2); font-size: 1.1rem; }
.sec__close strong { color: var(--ink); font-weight: 600; }
.linehint { color: var(--gold); margin-top: 2.2rem; letter-spacing: .2em; }
.linehint i { font-style: normal; display: inline-block; animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* ══════════ SYSTEME ══════════ */
.sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.4rem; }
.sys__card {
  display: flex; flex-direction: column; gap: 1.1rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 2rem 1.8rem;
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--easeOut), border-color .35s var(--ease), box-shadow .4s var(--ease);
}
.sys__card:hover { transform: translateY(-5px); border-color: var(--gold-line); box-shadow: var(--shadow-deep), 0 0 60px rgba(201, 162, 74, .08); }
.sys__no { color: var(--gold); }
.sys__p { color: var(--ink-2); flex: 1; }

/* ══════════ TELEFON ══════════ */
.tel { background: var(--raised); position: relative; }
.tel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 38% at 28% 18%, rgba(201, 162, 74, .09), transparent 70%);
}
.tel__inner { position: relative; max-width: var(--maxw); margin-inline: auto; padding: clamp(5.5rem, 12vh, 9rem) var(--pad); }
.tel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.6rem; align-items: start; }

.panel {
  background: linear-gradient(165deg, #1E1B17, var(--card) 65%);
  border: 1px solid var(--gold-line); border-radius: 14px; padding: 2rem 1.9rem;
  box-shadow: var(--shadow-deep), 0 0 80px rgba(201, 162, 74, .07);
}
.panel__label { color: var(--gold); }
.panel__number { display: block; font-family: var(--display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); color: var(--ink); text-decoration: none; margin-top: 1rem; letter-spacing: .01em; transition: color .3s var(--ease); }
.panel__number:hover { color: var(--gold-bright); }
.panel__es { color: var(--clay); margin-top: .5rem; font-size: .62rem; }
.panel__or { color: var(--ink-4); text-align: center; margin: 1.6rem 0 1.3rem; font-size: .6rem; letter-spacing: .2em; }
.panel__formtitle { font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin-bottom: 1rem; }
.panel__form input {
  width: 100%; background: rgba(11, 10, 9, .6); border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--ink); font-family: var(--body); font-size: .95rem; padding: .85rem 1rem; margin-bottom: .7rem;
}
.panel__form input:focus { outline: none; border-color: var(--gold); }
.panel__form .btn { width: 100%; justify-content: center; margin-top: .3rem; }
.panel__note { color: var(--ink-4); font-size: .8rem; line-height: 1.55; margin-top: .9rem; }
.panel__toast { margin-top: .9rem; color: var(--gold-bright); font-size: .64rem; line-height: 1.7; }

.scenario { min-width: 0; }
.scenario__label { color: var(--ink-3); margin-bottom: 1rem; }
.scenario__tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.scenario__tab {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  background: transparent; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .55rem 1.1rem; cursor: pointer; transition: all .3s var(--ease);
}
.scenario__tab.is-on { background: var(--gold); border-color: var(--gold); color: var(--base); }
.scenario__tab:not(.is-on):hover { border-color: var(--gold-line); color: var(--ink); }
.scenario__script {
  margin-top: 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.7rem 1.8rem; min-height: 21rem; box-shadow: var(--shadow-card);
}
.scenario__script .who { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; color: var(--ink-4); margin: 1.2rem 0 .35rem; }
.scenario__script .who--ki { color: var(--gold); }
.scenario__script .who:first-child { margin-top: 0; }
.scenario__script .say { color: var(--ink-2); }
.scenario__script .say .caret { display: inline-block; width: 2px; height: 1em; background: var(--gold-bright); vertical-align: text-bottom; animation: caret .8s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.feats { margin-top: 3rem; }
.feats__title { color: var(--ink-3); margin-bottom: 1.2rem; }
.feats__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: .8rem 2.4rem; }
.feats__list li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.feats__list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

.calc {
  margin-top: 3.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1.8rem, 3.5vw, 3rem); box-shadow: var(--shadow-card);
}
.calc__intro { color: var(--ink-3); margin: .8rem 0 1.8rem; }
.calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 2rem; margin-bottom: 2rem; }
.calc__in label { display: block; color: var(--ink-2); font-size: .92rem; margin-bottom: .8rem; }
.calc__val { color: var(--gold-bright); font-size: 1rem; margin-bottom: .5rem; }
.calc__help { color: var(--ink-4); font-size: .78rem; margin-top: .7rem; }
input[type="range"] { width: 100%; accent-color: var(--gold); }
.calc__money { display: flex; align-items: center; gap: .6rem; }
.calc__money input {
  width: 100%; background: rgba(11, 10, 9, .6); border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--ink); font-family: var(--mono); font-size: 1.1rem; padding: .8rem 1rem;
}
.calc__money input:focus { outline: none; border-color: var(--gold); }
.calc__money span { color: var(--ink-3); font-family: var(--mono); }
.calc__out { border-left: 1px solid var(--gold-line); padding-left: 1.8rem; }
.calc__way { color: var(--ink-4); font-size: .64rem; }
.calc__res { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--ink); margin-top: .7rem; line-height: 1.25; overflow-wrap: anywhere; }
.calc__res b { color: var(--gold-bright); font-weight: 500; }
.calc__note { color: var(--ink-4); font-size: .8rem; margin-top: 1rem; line-height: 1.6; }

/* ══════════ DER WEG ══════════ */
.way { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1.6rem; padding-top: 1.4rem; }
/* Draht läuft exakt durch die Punkt-Mitten (Steps starten bei padding-top 1.4rem, Punkt bei -4px) */
.way__wire { position: absolute; top: calc(1.4rem + .5px); left: 2%; right: 2%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line) 12%, var(--gold-line) 88%, transparent); }
.way__step { padding-top: 1.4rem; position: relative; }
.way__step::before { content: ''; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(201, 162, 74, .7); }
.way__no { color: var(--gold); margin-bottom: .8rem; }
.way__step p:not(.way__no) { color: var(--ink-2); margin-top: .7rem; }
#weg > p[data-reveal] { margin-top: 3rem; }

/* ══════════ BEWEIS ══════════ */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.4rem; }
.proof__b { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 2rem 1.9rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 1rem; }
.proof__no { color: var(--gold); }
.proof__b p:not(.proof__no) { color: var(--ink-2); flex: 1; }

/* ══════════ VERGLEICH ══════════ */
.cmp {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card);
  /* Scroll-Schatten: Kanten dunkeln ab, solange seitlich Inhalt verborgen ist */
  background:
    linear-gradient(90deg, var(--card), rgba(26, 24, 21, 0)) left / 36px 100% no-repeat local,
    linear-gradient(270deg, var(--card), rgba(26, 24, 21, 0)) right / 36px 100% no-repeat local,
    linear-gradient(90deg, rgba(0, 0, 0, .78), transparent) left / 26px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(0, 0, 0, .78), transparent) right / 26px 100% no-repeat scroll,
    var(--card);
}
.cmp__table { width: 100%; min-width: 900px; border-collapse: collapse; }
.cmp__table th, .cmp__table td { text-align: left; vertical-align: top; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.cmp__table thead th { font-size: .64rem; letter-spacing: .13em; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.cmp__table tbody th { font-family: var(--body); font-weight: 600; color: var(--ink); font-size: .95rem; width: 13%; }
.cmp__table tbody tr:last-child th, .cmp__table tbody tr:last-child td { border-bottom: none; }
.cmp__us { background: rgba(201, 162, 74, .07); color: var(--ink) !important; border-left: 1px solid var(--gold-line); }
thead .cmp__us { color: var(--gold) !important; }

/* ══════════ PORTALE ══════════ */
.portals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1.6rem; }
.portal {
  position: relative; display: flex; flex-direction: column; gap: 1rem; overflow: hidden;
  text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 2.3rem 2.1rem;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--easeOut), border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.portal:hover { transform: translateY(-5px); border-color: var(--gold-line); box-shadow: var(--shadow-deep), 0 0 70px rgba(201, 162, 74, .09); }
.portal__no { color: var(--gold); }
.portal__p { color: var(--ink-2); flex: 1; }
.portal__hint, .portal__mods { color: var(--ink-4); font-size: .6rem; }
/* Websites: der Rahmen zeichnet sich beim Hover */
.portal__frame { position: absolute; inset: 12px; border-radius: 10px; pointer-events: none; }
.portal__frame::before, .portal__frame::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px; border: 1px solid transparent;
}
.portal--web:hover .portal__frame::before {
  border-top-color: var(--gold-line); border-right-color: var(--gold-line);
  transition: border-color .01s, clip-path .6s var(--ease);
  animation: frameDraw .9s var(--easeOut) forwards;
}
@keyframes frameDraw {
  0% { clip-path: inset(0 100% 100% 0); border-color: var(--gold); }
  100% { clip-path: inset(0 0 0 0); border-color: var(--gold-line); }
}
/* Workspace: die Knoten leuchten */
.portal__nodes { position: absolute; top: 1.6rem; right: 1.8rem; display: flex; gap: 8px; }
.portal__nodes b { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.portal--ws:hover .portal__nodes b { background: var(--gold-bright); box-shadow: 0 0 10px rgba(231, 194, 109, .8); }
.portal--ws:hover .portal__nodes b:nth-child(1) { transition-delay: 0s; }
.portal--ws:hover .portal__nodes b:nth-child(2) { transition-delay: .09s; }
.portal--ws:hover .portal__nodes b:nth-child(3) { transition-delay: .18s; }
.portal--ws:hover .portal__nodes b:nth-child(4) { transition-delay: .27s; }
.portal--ws:hover .portal__nodes b:nth-child(5) { transition-delay: .36s; }

/* ══════════ STUDIO ══════════ */
.studio { position: relative; overflow: hidden; text-align: center; padding: clamp(6rem, 16vh, 11rem) var(--pad); border-top: 1px solid var(--line); background: var(--base); }
.studio__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 55% at 50% 60%, rgba(201, 162, 74, .13), transparent 70%),
    radial-gradient(30% 40% at 72% 30%, rgba(201, 122, 76, .09), transparent 70%);
}
.studio__inner { position: relative; max-width: 52rem; margin-inline: auto; }
.studio__p { color: var(--ink-2); margin: 1.6rem auto 2.4rem; max-width: 40rem; }
.studio__cta {
  background: linear-gradient(100deg, var(--gold), var(--clay)); color: var(--base);
  font-family: var(--display); font-size: 1.05rem; text-transform: none; letter-spacing: 0;
  box-shadow: 0 14px 44px rgba(201, 162, 74, .3);
}
.studio__cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 60px rgba(201, 162, 74, .42); }
.studio__sub { color: var(--ink-4); margin-top: 1.4rem; font-size: .6rem; letter-spacing: .22em; }

/* ══════════ FAQ ══════════ */
#faq .sec__head { max-width: 46rem; }
.faq { max-width: 52rem; border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem;
  padding: 1.45rem 0; font-family: var(--display); font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink);
  transition: color .3s var(--ease);
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--gold-bright); }
.faq__i summary i { font-style: normal; color: var(--gold); font-family: var(--mono); transition: transform .35s var(--easeOut); flex: none; }
.faq__i[open] summary i { transform: rotate(45deg); }
.faq__i p { color: var(--ink-2); padding: 0 0 1.5rem; max-width: 46rem; }
/* Weiches Auf/Zu, wo der Browser es kann (Chromium); sonst instant wie bisher */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__i::details-content {
    opacity: 0; block-size: 0; overflow: clip;
    transition: content-visibility .4s allow-discrete, opacity .35s var(--ease), block-size .4s var(--easeOut);
  }
  .faq__i[open]::details-content { opacity: 1; block-size: auto; }
}

/* ══════════ FINAL + FOOTER ══════════ */
.final { text-align: center; padding: clamp(6rem, 15vh, 10rem) var(--pad); background: var(--raised); }
.final__inner { max-width: 50rem; margin-inline: auto; }
.final__p { color: var(--ink-2); margin: 1.6rem auto 2.4rem; max-width: 40rem; }
.final__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.final__sub { color: var(--ink-4); margin-top: 1.6rem; font-size: .6rem; letter-spacing: .2em; }

.foot { border-top: 1px solid var(--line); padding: 3.5rem var(--pad) 2.5rem; max-width: none; }
.foot__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 2rem; }
.foot__h { color: var(--ink-4); margin-bottom: 1rem; font-size: .6rem; }
.foot nav { display: flex; flex-direction: column; gap: .55rem; }
.foot a { color: var(--ink-3); text-decoration: none; font-size: .9rem; transition: color .3s var(--ease); }
.foot a:hover { color: var(--ink); }
.foot__base {
  max-width: var(--maxw); margin: 2.8rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--ink-4); font-size: .85rem;
}
.foot__note { color: rgba(244, 239, 232, .22); font-size: .6rem; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 980px) {
  .tel__grid { grid-template-columns: minmax(0, 1fr); }
  .calc__out { border-left: none; padding-left: 0; border-top: 1px solid var(--gold-line); padding-top: 1.4rem; }
}
@media (max-width: 760px) {
  .feed__label { display: none; }
  .way__wire { display: none; } /* einspaltig gibt es keine Linie zum Verbinden */
}
@media (prefers-reduced-motion: reduce) {
  .feed__track span, .dot, .linehint i, .hero__demo::after { animation: none; }
  .wave span { height: 14px; }
  .faq__i::details-content { transition: none; }
}

/* Links in Karten-Spalten: Unterstrich nur unter dem Text, nicht kartenbreit */
.sys__card .link, .proof__b .link, .portal .link { align-self: flex-start; }

/* ══════════ MEDIA-EBENE (Perfektions-Pass) ══════════ */
.sys__media { margin: -2rem -1.8rem 1.4rem; overflow: hidden; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--line); }
.sys__media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform .6s var(--easeOut); }
.sys__card:hover .sys__media img { transform: scale(1.04); }

.proof__media { margin: 0 0 .6rem; }
.proof__media img { width: 100%; border-radius: 8px; border: 1px solid var(--gold-line); box-shadow: var(--shadow-card); }
.proof__media figcaption { color: var(--ink-4); font-size: .58rem; margin-top: .6rem; letter-spacing: .16em; }

.portal__media { margin: .4rem 0 .6rem; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.portal__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: top; transition: transform .6s var(--easeOut); }
.portal:hover .portal__media img { transform: scale(1.03); }

.studio__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.studio__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--base), transparent 26%, transparent 76%, var(--base)),
  radial-gradient(55% 50% at 50% 50%, rgba(11, 10, 9, .55), transparent 100%); }

/* Nav-Alignment: Brand und Links auf eine Baseline, Dropdown-Link exakt wie Geschwister */
.nav { align-items: center; }
.nav__brand { line-height: 1; transform: translateY(-1px); }
.nav__links { align-items: center; }
.nav__links a, .nav__drop > a { display: inline-flex; align-items: center; line-height: 1; }
.nav__cta { padding: .8rem 1.4rem; }

/* Burger */
.nav__burger { display: none; background: none; border: 1px solid var(--line-2); border-radius: 8px; width: 42px; height: 38px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.nav__burger i { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 55; background: rgba(11, 10, 9, .97); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav__links { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.mnav__links a:not(.btn) { font-family: var(--display); font-size: 1.6rem; color: var(--ink); text-decoration: none; }
.mnav__links .btn { justify-content: center; margin-top: 1rem; }
/* Muss zum .nav__links-Breakpoint in base.css passen (880px) */
@media (max-width: 880px) {
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
}

/* ══════════ TELEFON-TEASER (Home → Unterseite) ══════════ */
.telteaser {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0; text-decoration: none; color: inherit; overflow: hidden;
  background: linear-gradient(165deg, #1E1B17, var(--card) 65%);
  border: 1px solid var(--gold-line); border-radius: 14px;
  box-shadow: var(--shadow-deep), 0 0 90px rgba(201, 162, 74, .08);
  transition: transform .45s var(--easeOut), border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.telteaser:hover { transform: translateY(-5px); border-color: rgba(231, 194, 109, .6); box-shadow: var(--shadow-deep), 0 0 130px rgba(201, 162, 74, .16); }
.telteaser__media { margin: 0; overflow: hidden; }
.telteaser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--easeOut); }
.telteaser:hover .telteaser__media img { transform: scale(1.04); }
.telteaser__body { padding: 2.2rem 2.2rem 2.4rem; display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; }
.telteaser__status { color: var(--gold); display: flex; align-items: center; gap: .55rem; }
.telteaser .feats__list { grid-template-columns: 1fr; gap: .7rem; }
@media (max-width: 860px) { .telteaser { grid-template-columns: 1fr; } .telteaser__media img { aspect-ratio: 16 / 7; } }

/* ── Bühnen-Hintergrund: volle Breite hinter einer begrenzten .sec ── */
.sec--stage { isolation: isolate; }
.stagebg {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1; overflow: hidden; pointer-events: none;
}
.stagebg img {
  width: 100%; height: 100%; object-fit: cover; opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 76%, transparent);
}
.sec--stage .scene { background: rgba(26, 24, 21, .82); backdrop-filter: blur(6px); }

/* ── Hero, kleine Bildschirme: der Text braucht mehr Fläche, der Film weniger ── */
@media (max-width: 880px) {
  .hero { --hero-open: clamp(340px, 56svh, 520px); }
  .hero__open { padding-top: 5.5rem; }
  .hero__beat { font-size: clamp(1.3rem, 5.4vw, 1.7rem); }
  .hero__doors { margin-top: 1.8rem; gap: .55rem; }
  .hero__doors a { padding: .75rem 1.05rem; font-size: .62rem; }
  /* Auf dem Handy bricht der Satz auf drei Zeilen und die Türen kommen darunter —
     ein runder Fleck trägt das nicht mehr, es braucht ein Band. */
  .hero__beats::before {
    background: linear-gradient(180deg, transparent 4%, rgba(11, 10, 9, .66) 24%,
      rgba(11, 10, 9, .66) 78%, transparent 98%);
  }
}

/* ── Ohne Bewegung: kein Feststellen, kein Öffnen. Der Film steht als ein Bild da,
      alle drei Sätze untereinander, die Türen sofort sichtbar. ── */
@media (prefers-reduced-motion: reduce) {
  .hero__pin { position: static; height: auto; }
  .hero__rail { display: none; }
  .hero__open { position: static; height: auto; opacity: 1; transform: none; }
  .hero__frame { position: relative; top: auto; left: auto; right: auto; bottom: auto;
    border-radius: 0; box-shadow: none;
    background: url('../img/hero-nacht-poster.jpg') center/cover; }
  .hero__video { display: none; }
  .hero__beats { position: static; display: flex; flex-direction: column; gap: 1.6rem;
    padding: 3rem var(--pad); }
  .hero__beat { opacity: 1; transform: none; pointer-events: auto; }
  .hero__doors a { opacity: 1; transform: none; }
  .hero__cue { display: none; }
}

/* ══════════ DAS PROBLEM — Das Protokoll ══════════
   Der Vorwurf liegt im Beleg, nicht im Satz. Deshalb darf der Satz leise sein.
   (Zur Abnahme stand hier eine zweite Fassung, "Der Tag war voll" — ein
   Tagesplan mit aufleuchtenden Bloecken. Verworfen: der Plan war erfunden,
   die Belege hier sind ueberpruefbar.) */
.prot { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.prot__row {
  position: relative;
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 23rem);
  gap: clamp(1.2rem, 2.2vw, 2.2rem); align-items: start;
  padding: clamp(2.4rem, 5vh, 4rem) 0; border-bottom: 1px solid var(--line);
}
/* Nichts blendet mehr aus. Vorher lag die ganze Zeile bei .52 und hellte erst
   auf, wenn sie in der Mitte stand — wer schnell scrollte, hatte den Satz schon
   hinter sich, waehrend die Zeile hinter ihm erst anging. Jetzt steht alles
   sofort; nur die goldene Zeile kommt dazu, und die kommt einmal. */
/* Der Eintrag schreibt sich. Die Linie laeuft von der Uhrzeit bis zum Beleg —
   damit ist es ein Protokoll und keine Tabelle mit drei gleichen Reihen. */
.prot__row::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--gold), rgba(201, 162, 74, 0));
  transition: width 1.15s var(--ease) .12s;
}
.prot__row.is-seen::after { width: 100%; }
.prot__time { color: var(--gold); font-size: clamp(1rem, 1.5vw, 1.24rem); letter-spacing: .16em; padding-top: .35rem; }
.prot__line { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  line-height: 1.2; color: var(--ink); }
.prot__after { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  line-height: 1.2; margin-top: .3rem;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .35s, transform .6s var(--easeOut) .35s; }
.prot__row.is-seen .prot__after { opacity: 1; transform: none; }

/* ── Die drei Vignetten ──
   Vorher standen hier drei identische Karten mit Text drin: gleicher Rahmen,
   gleiche Balken, gleiche Schrift — man musste sie lesen, um einen Unterschied
   zu finden. Jetzt zeigt jede Zeile ihren Vorgang, statt ihn zu beschriften.

   Drei Regeln, die alle drei teilen:
   — Kein Rahmen und kein eigener Grund. Die Szene steht auf demselben Schwarz wie
     die Seite; ein aufgehellter Kasten las sich wieder als Karte.
   — EINE Akzentfarbe: --clay. Gold bleibt links bei der Uhrzeit; zwei Warmtoene
     nebeneinander waren der Grund, warum die Sektion unruhig wirkte.
   — Reines CSS. Die Szene ist immer sichtbar; nur die Bewegung haelt an, wenn die
     Zeile den mittleren Band verlaesst (components.js, FEATURE 5). */
.pv { margin: 0; }
/* Zwei Formate statt einem: die beiden waagerechten Vorgaenge (Anruf, Anfrage)
   liegen flach, das Handy braucht Hoehe. Mit einem gemeinsamen 4:3 stand bei den
   ersten beiden oben und unten nur Leere. */
.pv__stage { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.pv--phone .pv__stage { aspect-ratio: 4 / 3; }

/* Szene 1 — die Anrufliste (7.2s)
   Vorher liefen hier zwei Striche aus einem Telefon. Das war eine Metapher, die
   man erst uebersetzen musste; ausserdem war es dieselbe Bewegung wie in Szene 2
   (etwas wandert nach rechts). Eine Liste ist eine dritte Sprache und sagt den
   Satz daneben woertlich. */
/* Zwei Ebenen, nicht eine: `.pv1` zentriert nur, `.pv1__list` ist genau so hoch
   wie die drei Zeilen. Der Marker misst gegen die Liste — gegen den zentrierenden
   Container gemessen sass er am Buehnenrand und auf Hoehe null. */
.pv1 { position: absolute; inset: 0; display: grid; place-items: center; }
.pv1__list { position: relative; width: 82%; display: flex;
  flex-direction: column; gap: .55rem; }
.pv1__row { position: relative; height: 2.5rem; display: grid;
  grid-template-columns: 1fr auto 1.7rem; align-items: center; gap: .7rem;
  padding-left: 1rem; border-bottom: 1px solid var(--line); }
.pv1__num { font-size: .82rem; letter-spacing: .08em; color: var(--ink-3); }
.pv1__tag { font-size: .5rem; letter-spacing: .16em; color: var(--ink-4); }
.pv1__st { position: relative; height: 1.1rem; }
.pv1__st > * { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* Der Marker springt genau eine Zeilenhoehe: 2.5rem Zeile + .55rem Abstand. */
.pv1__mark { position: absolute; left: 0; top: 0; width: 2px; height: 2.5rem;
  background: var(--clay); opacity: 0; animation: pvMark 7.2s var(--ease) infinite; }
@keyframes pvMark {
  0%       { transform: translateY(0); opacity: 0; }
  4%, 34%  { transform: translateY(0); opacity: 1; }
  40%, 88% { transform: translateY(3.05rem); opacity: 1; }
  94%, 100% { transform: translateY(3.05rem); opacity: 0; }
}
/* Es waehlt. Drei Punkte, einer nach dem anderen. */
.pv1__dots { display: flex; gap: 3px; align-items: center; opacity: 0; }
.pv1__dots b { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.pv1__row--a .pv1__dots { animation: pvDial1 7.2s var(--ease) infinite; }
.pv1__row--b .pv1__dots { animation: pvDial2 7.2s var(--ease) infinite; }
@keyframes pvDial1 { 0%, 3% { opacity: 0; } 6%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes pvDial2 { 0%, 41% { opacity: 0; } 44%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
.pv1__row--a .pv1__dots b { animation: pvBlink 1.1s var(--ease) infinite; }
.pv1__row--b .pv1__dots b { animation: pvBlink 1.1s var(--ease) infinite; }
.pv1__dots b:nth-child(2) { animation-delay: .18s; }
.pv1__dots b:nth-child(3) { animation-delay: .36s; }
@keyframes pvBlink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Ihre Zeile bekommt ein Kreuz und verliert danach an Farbe. */
.pv1__x { width: .8rem; height: .8rem; opacity: 0; animation: pvXin 7.2s var(--ease) infinite; }
.pv1__x::before, .pv1__x::after { content: ''; position: absolute; left: 50%; top: 0;
  width: 1px; height: 100%; background: var(--clay); }
.pv1__x::before { transform: translateX(-50%) rotate(45deg); }
.pv1__x::after  { transform: translateX(-50%) rotate(-45deg); }
@keyframes pvXin { 0%, 25% { opacity: 0; } 30%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.pv1__row--a .pv1__num { animation: pvFade 7.2s var(--ease) infinite; }
@keyframes pvFade { 0%, 25% { color: var(--ink-3); } 34%, 100% { color: var(--ink-4); } }

/* Die naechste Zeile wird angenommen. Ein Haken aus zwei Kanten. */
.pv1__ok { width: .55rem; height: .95rem; opacity: 0;
  border-right: 1px solid var(--clay); border-bottom: 1px solid var(--clay);
  animation: pvOk 7.2s var(--ease) infinite; }
@keyframes pvOk {
  0%, 63%  { opacity: 0; transform: translateY(-50%) rotate(45deg) scale(.7); }
  69%, 92% { opacity: 1; transform: translateY(-58%) rotate(45deg) scale(1); }
  98%, 100% { opacity: 0; transform: translateY(-58%) rotate(45deg) scale(1); }
}
.pv1__row--b .pv1__num { animation: pvLit 7.2s var(--ease) infinite; }
@keyframes pvLit { 0%, 63% { color: var(--ink-4); } 69%, 100% { color: var(--ink); } }
.pv1__row--c .pv1__num { color: var(--ink-4); opacity: .5; }

/* Szene 2 — hin ja, zurueck nie (8.4s) */
.pv2__panel { position: absolute; top: 22%; width: 28%; height: 34%;
  border: 1px solid var(--line-2); border-radius: 6px; background: rgba(0, 0, 0, .22);
  display: grid; place-items: center; }
.pv2__panel--from { left: 7%; }
.pv2__panel--to { right: 7%; }
.pv2__panel span { font-size: .55rem; letter-spacing: .14em; color: var(--ink-3); }
.pv2__wire { position: absolute; left: 35%; right: 35%; top: 39%; height: 1px; background: var(--line-2); }
.pv2__msg { position: absolute; top: 39%; margin-top: -5px; width: 14px; height: 10px;
  border: 1px solid var(--ink-3); border-radius: 1px; background: var(--base); opacity: 0; }
.pv2__msg { animation: pvSend 8.4s var(--ease) infinite; }
@keyframes pvSend {
  0%   { left: 34%; opacity: 0; }
  6%   { left: 36%; opacity: 1; }
  26%  { left: 62%; opacity: 1; }
  32%, 100% { left: 63%; opacity: 0; }
}
.pv2__unread { position: absolute; top: .35rem; right: .35rem; width: 5px; height: 5px;
  border-radius: 50%; background: var(--clay); opacity: 0; }
.pv2__unread { animation: pvUnread 8.4s var(--ease) infinite; }
@keyframes pvUnread { 0%, 28% { opacity: 0; } 34% { opacity: 1; }
  56% { opacity: .28; } 78% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv2__days { position: absolute; left: 0; right: 0; bottom: 16%;
  display: flex; justify-content: center; gap: 1.3rem; }
.pv2__days span { font-size: .6rem; letter-spacing: .18em; color: var(--ink-3); opacity: .16; }
.pv2__days span:last-child { color: var(--clay); }
.pv2__days span { animation: pvDay 8.4s var(--ease) var(--d) infinite; }
@keyframes pvDay { 0%, 6% { opacity: .16; } 14%, 92% { opacity: 1; } 100% { opacity: .16; } }

/* Szene 3 — sieben Sekunden, woertlich (7.8s) */
.pv3__phone { position: absolute; left: 50%; top: 5%; transform: translateX(-50%);
  width: 34%; height: 88%; border: 1px solid var(--ink-3); border-radius: 13px;
  background: rgba(244, 239, 232, .03);
  padding: .85rem .6rem .6rem; overflow: hidden; }
/* Der Ladebalken schiesst los und bleibt dann stehen. Das ist die ganze Aussage. */
.pv3__bar { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--clay); }
.pv3__bar { animation: pvLoad 7.8s var(--ease) infinite; }
@keyframes pvLoad { 0% { width: 0; opacity: .8; } 16% { width: 33%; }
  58%, 76% { width: 40%; opacity: .8; } 84%, 100% { width: 40%; opacity: 0; } }
.pv3__url { display: block; text-align: center; font-size: .5rem; letter-spacing: .1em;
  color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .24rem .3rem; margin-bottom: .7rem; }
.pv3__sk { display: block; height: 7px; border-radius: 3px; margin-bottom: .5rem;
  background: rgba(244, 239, 232, .17); opacity: 0; }
/* Laeuft ueber die rechte Kante hinaus und wird vom `overflow: hidden` des
   Geraets hart abgeschnitten — genau so, wie eine zu breite Zeile auf einer
   kaputten Seite aussieht. Der negative Aussenabstand hebt die Polsterung auf,
   sonst bliebe ein Rand stehen und es saehe nach Absicht aus. */
.pv3__sk--over { width: 135%; margin-right: -.6rem; }
.pv3__sk--wait { width: 44%; opacity: .1; }
.pv3__sk { animation: pvSk 7.8s var(--ease) var(--d) infinite; }
/* Die dritte laedt und laedt. Sie kommt nie. */
.pv3__sk--wait { animation: pvWait 1.9s var(--ease) infinite; }
@keyframes pvSk { 0% { opacity: 0; } 9%, 74% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes pvWait { 0%, 100% { opacity: .07; } 50% { opacity: .26; } }
.pv3__count { position: absolute; right: .6rem; bottom: .5rem; width: 1.4rem; height: 1.2rem; }
.pv3__count span { position: absolute; right: 0; bottom: 0; font-size: 1rem;
  color: var(--ink-2); opacity: 0; }
.pv3__count span:last-child { color: var(--clay); }
.pv3__count span { animation: pvTick 7.8s steps(1) var(--d) infinite; }
@keyframes pvTick { 0% { opacity: 0; } 0.5%, 9.5% { opacity: 1; } 10%, 100% { opacity: 0; } }
/* Bei 7 geht der Bildschirm aus — er ist weg. */
.pv3__dim { position: absolute; inset: 0; background: var(--base); opacity: 0; }
.pv3__dim { animation: pvDim 7.8s var(--ease) infinite; }
@keyframes pvDim { 0%, 80% { opacity: 0; } 88%, 95% { opacity: .82; } 100% { opacity: 0; } }

/* Bewegung an- und abschalten. Zwei Dinge muessen hier stimmen, sonst greift es
   nicht: die Regel steht NACH allen Szenen (die Kurzform `animation: …` setzt
   animation-play-state auf ihren Anfangswert zurueck), und sie wiegt schwerer als
   jede Szenenregel — `.pv3__count span` (Klasse + Element) haette ein blosses
   `.pv *` sonst ueberstimmt und die sieben Ziffern weiterlaufen lassen. */
.prot__row .pv *, .prot__row .pv *::before,
.prot__row .pv *::after { animation-play-state: paused; }
.prot__row.is-live .pv *, .prot__row.is-live .pv *::before,
.prot__row.is-live .pv *::after { animation-play-state: running; }

.prot__row:last-child { border-bottom: 0; }
.prot__row:last-child .prot__line,
.prot__row:last-child .prot__after { font-size: clamp(1.5rem, 2.8vw, 2.35rem); }

@media (max-width: 980px) {
  .prot__row { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .pv { grid-column: 1 / -1; margin-top: 1.2rem; max-width: 22rem; }
}
/* Ohne Bewegung bleibt jede Szene in dem Zustand stehen, der die Aussage traegt:
   der Anruf beim Naechsten, die ungelesene Anfrage, der abgebrochene Ladebalken. */
@media (prefers-reduced-motion: reduce) {
  .prot__after { opacity: 1; transform: none; transition: none; }
  .prot__row::after { width: 100%; transition: none; }
  .pv2__msg { display: none; }
  .pv1__dots { display: none; }
  .pv1__x, .pv1__ok, .pv2__unread { opacity: 1; }
  .pv1__mark { opacity: 1; transform: translateY(3.05rem); }
  .pv1__row--a .pv1__num { color: var(--ink-4); }
  .pv1__row--b .pv1__num { color: var(--ink); }
  .pv2__days span { opacity: 1; }
  .pv3__sk { opacity: 1; }
  .pv3__sk--wait { opacity: .12; }
  .pv3__bar { width: 40%; }
  .pv3__count span:last-child { opacity: 1; }
  .pv, .pv * { animation: none !important; }
}