/* Tools for Film — movid GmbH
   One stylesheet, no framework, no CDN. The site has to work on a plain
   web server with nothing installed, and it has to still work in five
   years when whatever framework was fashionable today is gone.

   Colours are taken from the logo itself, measured rather than guessed:
   #DF0806 is the red in the middle of the banner, #850605 the deeper red
   at its edges. */

:root {
  --red:        #DF0806;
  --red-deep:   #850605;
  --red-dim:    #7A1210;

  --ink:        #131010;   /* page ground — warm black, not blue-black */
  --ink-2:      #1C1817;   /* raised surfaces */
  --ink-3:      #262120;   /* borders on dark */
  --paper:      #F6F2EE;
  --paper-dim:  #C9C2BD;
  --muted:      #928A86;

  --ok:         #5FC38B;

  --wrap:       1120px;
  --radius:     14px;
  --shadow:     0 18px 50px rgba(0,0,0,.45);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: #fff; padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ── header ─────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(19,16,16,.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--ink-3);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 66px;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; font-weight: 700; letter-spacing: .02em;
  margin-right: auto;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand span { font-size: 1.02rem; }
.brand small {
  display: block; font-size: .64rem; font-weight: 600;
  letter-spacing: .22em; color: var(--muted); text-transform: uppercase;
}

.nav { display: flex; gap: 1.4rem; align-items: center; }
.nav a {
  text-decoration: none; color: var(--paper-dim); font-size: .93rem;
  font-weight: 500; padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--paper); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--ink-3);
  color: var(--paper); border-radius: 9px; padding: .45rem .7rem;
  font-size: .9rem; cursor: pointer;
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--ink-3);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0;
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 1.25rem; border-bottom: none; }
}

/* ── hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(1100px 460px at 50% -12%, var(--red-dim) 0%, transparent 62%),
    var(--ink);
  border-bottom: 1px solid var(--ink-3);
  text-align: center;
}
/* Der quadratische Zuschnitt statt des breiten Banners: das Banner
   bringt dunkelrote Seitenstreifen mit, die auf dunklem Grund wie ein
   Darstellungsfehler aussehen. */
.hero-mark {
  width: clamp(112px, 15vw, 152px); margin: 0 auto 1.8rem;
  border-radius: 26px; box-shadow: var(--shadow);
}
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.3rem); line-height: 1.08;
  margin: 0 0 1rem; letter-spacing: -.02em;
}
.hero p {
  max-width: 62ch; margin: 0 auto; color: var(--paper-dim);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
}
.hero .lede { margin-top: 1.4rem; }

/* ── buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 11px; text-decoration: none;
  font-weight: 650; font-size: .96rem; border: 1px solid transparent;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #F51310; }
.btn-ghost { border-color: var(--ink-3); color: var(--paper); }
.btn-ghost:hover { border-color: var(--muted); background: var(--ink-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .btn-row { justify-content: center; margin-top: 2rem; }

/* ── sections ───────────────────────────────────────────────────────── */

section { padding: clamp(3rem, 7vw, 5rem) 0; }

.section-head { max-width: 60ch; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--red);
  margin: 0 0 .6rem;
}
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 .8rem; letter-spacing: -.01em; }
h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.section-head p { color: var(--paper-dim); margin: 0; }

/* ── app cards ──────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.25rem; }
.grid-apps { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--radius); padding: 1.6rem;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .16s ease, border-color .16s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent, var(--red));
}
.card:hover { transform: translateY(-3px); border-color: var(--muted); }
.card img.appicon {
  width: 74px; height: 74px; border-radius: 17px; margin-bottom: 1.1rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.card h3 { font-size: 1.22rem; margin-bottom: .35rem; }
.card .tag { color: var(--accent, var(--red)); font-weight: 600; font-size: .9rem; margin: 0 0 .7rem; }
.card p.desc { color: var(--paper-dim); font-size: .93rem; margin: 0 0 1.2rem; }
.card .meta {
  margin-top: auto; display: flex; gap: .8rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted);
}
.pill {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--ink-3); font-size: .72rem; letter-spacing: .04em;
}
.pill-free { border-color: var(--ok); color: var(--ok); }

/* ── product page ───────────────────────────────────────────────────── */

.product-head {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--ink-3);
  background:
    radial-gradient(760px 320px at 12% -30%, var(--accent-dim, var(--red-dim)) 0%, transparent 70%),
    var(--ink);
}
.product-head .inner {
  display: grid; grid-template-columns: 132px 1fr; gap: 2rem; align-items: start;
}
.product-head img.appicon {
  width: 132px; height: 132px; border-radius: 29px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
.product-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 0 0 .4rem; letter-spacing: -.02em; }
.product-head .tag { color: var(--accent, var(--red)); font-weight: 600; margin: 0 0 1rem; font-size: 1.05rem; }
.product-head p.summary { color: var(--paper-dim); max-width: 62ch; margin: 0 0 1.6rem; }

@media (max-width: 620px) {
  .product-head .inner { grid-template-columns: 1fr; gap: 1.2rem; }
  .product-head img.appicon { width: 96px; height: 96px; border-radius: 22px; }
}

.why {
  border-left: 3px solid var(--accent, var(--red));
  padding: .3rem 0 .3rem 1.2rem; margin: 0 0 2rem;
  color: var(--paper); font-size: 1.06rem; max-width: 60ch;
}

.grid-features { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.feature {
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--radius); padding: 1.4rem;
}
.feature h3 { color: #fff; }
.feature p { margin: 0; color: var(--paper-dim); font-size: .93rem; }

/* ── spec table ─────────────────────────────────────────────────────── */

.specs { width: 100%; border-collapse: collapse; font-size: .93rem; }
.specs th, .specs td { text-align: left; padding: .8rem 0; border-bottom: 1px solid var(--ink-3); vertical-align: top; }
.specs th { color: var(--muted); font-weight: 600; width: 42%; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: none; }

/* ── buy box ────────────────────────────────────────────────────────── */

.buybox {
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--radius); padding: 1.7rem;
}
.buybox .price { font-size: 1.7rem; font-weight: 700; margin: 0 0 .2rem; }
.buybox .price small { font-size: .8rem; font-weight: 500; color: var(--muted); display: block; }
.buybox ul { list-style: none; margin: 1.2rem 0 0; padding: 0; font-size: .9rem; color: var(--paper-dim); }
.buybox li { padding-left: 1.4rem; position: relative; margin-bottom: .5rem; }
.buybox li::before {
  content: "→"; position: absolute; left: 0; color: var(--accent, var(--red));
}

.two-col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ── notes and callouts ─────────────────────────────────────────────── */

.note {
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-left: 3px solid var(--red);
  border-radius: 10px; padding: 1rem 1.2rem; font-size: .92rem;
  color: var(--paper-dim);
}
.note strong { color: var(--paper); }

/* ── footer ─────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--ink-3); background: #0F0C0C;
  padding: 3rem 0 2.5rem; font-size: .88rem; color: var(--muted);
}
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem;
  margin-bottom: 2.2rem;
}
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.site-foot h4 {
  color: var(--paper); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 .9rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .5rem; }
.site-foot a { text-decoration: none; color: var(--muted); }
.site-foot a:hover { color: var(--paper); }
.foot-bottom {
  border-top: 1px solid var(--ink-3); padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ── misc ───────────────────────────────────────────────────────────── */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; }
.prose p, .prose li { color: var(--paper-dim); }
.prose a { color: var(--paper); text-decoration-color: var(--red); }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--ink-2); padding: .1rem .35rem; border-radius: 5px; }

.dl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.dl-list a {
  display: flex; align-items: center; gap: .9rem; text-decoration: none;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: 11px; padding: 1rem 1.2rem;
}
.dl-list a:hover { border-color: var(--muted); }
.dl-list img { width: 34px; height: 34px; border-radius: 8px; }
.dl-list .sub { color: var(--muted); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ── highlights ─────────────────────────────────────────────────────── */
/* Die drei staerksten Punkte, gross. Ein Raster aus sechs gleichen
   Kaesten macht jede Funktion gleich wichtig — und damit keine. */

.highlights {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%),
    var(--ink);
  border-block: 1px solid var(--ink-3);
}
.hl-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.hl {
  position: relative; padding: 2rem 1.7rem 1.8rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-top: 3px solid var(--accent, var(--red));
  border-radius: var(--radius);
}
.hl-num {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .18em;
  color: var(--accent, var(--red)); margin-bottom: .9rem;
}
.hl h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.42rem); line-height: 1.22;
  margin: 0 0 .7rem; color: #fff; letter-spacing: -.01em;
}
.hl p { margin: 0; color: var(--paper-dim); font-size: 1rem; }

/* ── screenshots ────────────────────────────────────────────────────── */
/* Volle Breite, weil ein Bildschirmfoto einer Drei-Spalten-Oberflaeche
   in einer Kachel unlesbar ist. */

.shots { background: var(--ink-2); border-block: 1px solid var(--ink-3); }
/* Die Breite setzt der Generator je Bild aus dessen echter Pixelzahl.
   Hier steht nur, dass die Figur mittig sitzt und das Bild sie fuellt. */
.shot { margin: 0 auto 2.8rem; }
.shot:last-child { margin-bottom: 0; }
.shot img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--ink-3);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.shot figcaption {
  margin-top: .9rem; color: var(--muted); font-size: .9rem;
  border-left: 3px solid var(--accent, var(--red)); padding-left: .9rem;
}

/* ── demo clip ──────────────────────────────────────────────────────── */
/* Ein Film je Programm, selbst gehostet. Gleiche Rahmung wie die
   Bildschirmfotos, damit beides wie aus einem Guss wirkt. */

.demo { background: var(--ink-2); border-block: 1px solid var(--ink-3); }
.clip { margin: 0 auto; max-width: 1100px; }
.clip video {
  display: block; width: 100%; height: auto; background: #000;
  border-radius: var(--radius); border: 1px solid var(--ink-3);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.clip figcaption {
  margin-top: .9rem; color: var(--muted); font-size: .9rem;
  border-left: 3px solid var(--accent, var(--red)); padding-left: .9rem;
}

/* ── Videos page ────────────────────────────────────────────────────── */
/* Ein Film je App, untereinander, jeder in seiner Akzentfarbe. Der Kopf
   ist Icon plus Name plus ein Satz — der Film selbst spricht den Rest. */

.video-entry + .video-entry { border-top: 0; }
.video-meta {
  display: flex; gap: 1.1rem; align-items: flex-start;
  max-width: 62ch; margin-bottom: 1.6rem;
}
.video-meta .appicon { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.video-meta .eyebrow { color: var(--accent, var(--red)); margin-bottom: .3rem; }
.video-meta h2 { margin-bottom: .4rem; }
.video-meta p:last-child { color: var(--paper-dim); margin: 0; }
.yt-links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin: 1rem auto 0; max-width: 1100px; font-size: .92rem;
}
.yt-links a { color: var(--paper-dim); text-decoration: none;
  border-bottom: 1px solid var(--ink-3); }
.yt-links a:hover { color: var(--paper); border-color: var(--accent, var(--red)); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
/* Zugeklappt, ein Klick oeffnet; ohne JavaScript steht alles offen
   lesbar da. Die Akzentfarbe der App markiert die offene Frage. */

.faq-list { max-width: 72ch; }
.faq-item {
  border-top: 1px solid var(--ink-3); padding: .2rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--ink-3); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: .9rem 2.2rem .9rem 0;
  font-weight: 650; position: relative; color: var(--paper);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: .2rem; top: .75rem;
  font-size: 1.3rem; color: var(--muted); transition: transform .15s;
}
.faq-item[open] summary::after { content: "\2212"; color: var(--accent, var(--red)); }
.faq-item[open] summary { color: var(--accent, var(--red)); }
.faq-item p { margin: 0 0 1rem; color: var(--paper-dim); max-width: 66ch; }

/* ── free / trial ───────────────────────────────────────────────────── */
/* „Kostenlos" gehoert nicht ins Kleingedruckte, und der Weg zum
   Ausprobieren darf nicht nur ein Satz in der Kaufbox sein. */

.freeline {
  margin: 1.1rem 0 0; color: var(--ok); font-weight: 650; font-size: .95rem;
}
.freeline.publisher {
  margin-top: .6rem; color: var(--paper-dim); font-weight: 500; font-size: .88rem;
}
/* Die zweite gruene Zeile (EULA, Terms) dicht unter die erste — beide
   gehoeren zusammen; die helle Herausgeber-Zeile steht darunter. */
.freeline.legal-links { margin-top: .3rem; }
.freeline.legal-links a { color: inherit; text-decoration: underline; }
.card .cardnote {
  margin: .8rem 0 0; font-size: .8rem; color: var(--muted);
}
.card .cardnote::before { content: "↓ "; color: var(--accent, var(--red)); }
.buybox .price small { margin-top: .3rem; }
.price-free { color: var(--ok); }

/* ── das Karussell auf der Startseite ──────────────────────────────────
   Die Folien liegen uebereinander in derselben Rasterzelle, damit die
   Flaeche so hoch ist wie die groesste Folie und beim Wechsel nichts
   springt. Sichtbar ist immer genau eine; ohne JavaScript bleibt es die
   erste, die der Generator bereits als `is-on` ausliefert. */
.carousel { background: var(--ink-2); border-block: 1px solid var(--ink-3); }
.slides { display: grid; }
.slide {
  grid-area: 1 / 1;
  display: grid; gap: 2.6rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease;
}
.slide.is-on { opacity: 1; visibility: visible; }
.slide-copy h2 { margin: .2rem 0 .3rem; }
.slide-copy .tag { color: var(--accent, var(--red)); font-weight: 600; margin: 0 0 .8rem; }
.slide-shot { margin: 0; }
.slide-shot img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--ink-3); box-shadow: var(--shadow);
}
.dots { display: flex; gap: .6rem; justify-content: center; margin-top: 2.2rem; }
.dot {
  width: .7rem; height: .7rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink-3); cursor: pointer;
}
.dot.is-on { background: var(--red); }
.dot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 820px) {
  .slide { grid-template-columns: 1fr; gap: 1.6rem; }
}
/* Wer Bewegung abbestellt hat, bekommt keine: das Skript schaltet den
   Selbstlauf ab, und auch die Blende entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* ── „On location" — die Bilder von unterwegs ──────────────────────────
   Zwei Bilder nebeneinander, auf schmalen Schirmen untereinander. Die
   Bildunterschrift traegt die Aussage, nicht das Bild allein. */
/* Keine eigene Trennlinie: die Karussell-Flaeche darueber
   bringt bereits eine mit. */
.onlocation { }
.grid-two {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.onloc { margin: 0; }
.onloc img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--ink-3);
  box-shadow: var(--shadow);
}
.onloc figcaption {
  margin-top: .8rem; color: var(--muted); font-size: .95rem; line-height: 1.5;
}

/* Drei Bilder nebeneinander, ohne Unterschriften. Auf schmalen Schirmen
   bricht das Raster von selbst um; unter 640px steht eines unter dem
   anderen, statt sie auf Briefmarkengroesse zu quetschen. */
.grid-three {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid-three .onloc img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Dritter Knopf in einer Reihe, bewusst leise: kaufen ist laut, testen
   ist mittel, nachlesen ist ein Link, der sich als solcher zu erkennen
   gibt. Drei gleich starke Knoepfe nebeneinander sagen dem Auge nicht,
   womit es anfangen soll. */
.btn-plain {
  background: none; border-color: transparent; padding-inline: .4rem;
  color: var(--paper-dim); text-decoration: underline;
  text-underline-offset: .25em;
}
.btn-plain:hover { color: var(--paper); }

/* ── YouTube-Video, Zwei-Klick ─────────────────────────────────────────
   Ein Vorschaubild von HIER, ein Abspielzeichen, und erst der Klick holt
   den Player von youtube-nocookie.com. Vorher wird nichts von YouTube
   geladen — das ist das Versprechen der Impressumsseite. */
.clip.yt + .clip, .demo h3 { margin-top: 2.4rem; }
.demo h3 { margin-bottom: .8rem; }
.yt-poster {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--ink-3); box-shadow: var(--shadow);
  background: #000;
}
.yt-poster img { display: block; width: 100%; height: auto; }
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 5.5rem; height: 5.5rem;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--red); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .15s ease, background .15s ease;
}
.yt-play::after {
  content: ""; position: absolute; left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 1.1rem 0 1.1rem 1.9rem;
  border-color: transparent transparent transparent #fff;
}
.yt-poster:hover .yt-play, .yt-poster:focus-visible .yt-play {
  transform: translate(-50%, -50%) scale(1.06); background: var(--red-deep);
}
.yt-note {
  position: absolute; right: .9rem; bottom: .8rem; padding: .3rem .6rem;
  border-radius: 999px; font-size: .78rem; letter-spacing: .02em;
  background: rgba(0,0,0,.62); color: var(--paper-dim);
}
.clip.yt iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Parallax & Einblenden (Steuerung in site.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
figure.onloc { overflow: hidden; }
figure.onloc img { will-change: transform; }
.hero-mark { will-change: transform; }