/* Edlerritter IT-Consulting · Hero-Film der Startseite
   Steuerung: js/hero-film.js. Ob der Film laeuft, entscheidet js/reveal-init.js
   im <head> ueber die Klasse html.er-film (einmal pro Sitzung, nie bei
   reduzierter Bewegung). Ohne diese Klasse steht sofort der Hero da.

   Herkunft: Vorlage "edlerritter-hero-film.html" vom 05.10.2026. Farben, Texte
   und Ablauf sind aus der Vorlage, mit drei Abweichungen:
   - Schrift: nur Poppins 400/500/700 aus style.css. Die Vorlage wollte Inter
     fuer Fliesstext und Poppins SemiBold; beides gibt es auf dieser Seite
     nicht (mit Marvin entschieden: Inter -> Poppins, 600 -> 500).
   - Jeder Selektor haengt an .erh. Die Vorlage hatte kurze Klassen wie .w,
     .r, .no, .panel und .hero; .hero gibt es in style.css schon (404.html),
     der Hero heisst hier deshalb .erh-hero.
   - Layout fuer Handy, Tablet und Querformat (Abschnitte ganz unten). */

.erh {
  --o: #EA4227; --o2: #D3361C; --g: #17281E; --gr: #6E7873; --off: #F1F1F1; --ln: #D9DBDA; --w: #FFFFFF; --gs: #C3CBC7;
  --fd: var(--font); --fb: var(--font);
  /* Filmhoehe = sichtbare Hoehe unter der fixen Kopfzeile. svh statt vh: am
     Handy ist das die Hoehe MIT eingeblendeter Adressleiste, sonst laege der
     untere Rand der Szene hinter der Leiste. 1000px Deckel, damit der Film
     auf sehr hohen Schirmen nicht zur Leinwand wird. */
  --erh-h: min(calc(100vh - var(--header-h)), 1000px);
  /* Freiraum rechts unten fuer den fixen WhatsApp-Knopf (.wa-float, 60px mit
     24px Abstand): Pause und Ueberspringen duerfen nicht darunter liegen. */
  --erh-wa: 96px;
  position: relative; display: grid;
  padding-top: var(--header-h);
  background: var(--off); color: var(--g); font-family: var(--fb);
}
@supports (height: 100svh) {
  .erh { --erh-h: min(calc(100svh - var(--header-h)), 1000px); }
}
.erh * { box-sizing: border-box; }
.erh a { color: inherit; }
/* Film und Hero liegen in derselben Rasterzelle uebereinander. Die Zelle ist
   so hoch wie der hoehere von beiden; der Film klebt darin (sticky) unter der
   Kopfzeile. Folge: Wer waehrend des Films scrollt, sieht keine leere Flaeche,
   und am Uebergang Film -> Hero verschiebt sich nichts auf der Seite. */
.erh > .erh-film, .erh > .erh-hero { grid-area: 1 / 1; }

/* ============ FILM ============ */
.erh-film {
  display: none;
  position: sticky; top: var(--header-h); align-self: start; z-index: 3;
  height: var(--erh-h);
  container: erh-film / size;
  background: var(--off); overflow: hidden; cursor: pointer;
}
html.er-film .erh-film { display: block; }
.erh .fs { position: absolute; inset: 0; visibility: hidden; overflow: hidden; will-change: transform, opacity; }
.erh .fs.off { background: var(--off); color: var(--g); }
.erh .fs.green { background: var(--g); color: var(--off); }
.erh .fs.orange { background: var(--o); color: var(--w); }
.erh .fs .pad {
  position: absolute; inset: 0; display: grid; align-items: center;
  padding-block: clamp(76px, 13cqh, 130px) clamp(84px, 14cqh, 130px);
  padding-inline: max(clamp(20px, 6cqw, 96px), calc((100cqw - 1192px) / 2));
}
.erh .fs .cols { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5cqw, 80px); align-items: center; }
.erh .w { display: inline-block; will-change: transform, opacity; }

/* Logo-Szene */
.erh .f0 .lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(18px, 4cqh, 40px); }
.erh .f0 svg { width: clamp(120px, min(26cqw, 34cqh), 300px); height: auto; overflow: visible; }
.erh .f0 .wm { display: grid; justify-items: center; gap: clamp(6px, 1.2cqh, 12px); }
.erh .f0 .wm b { font: 700 clamp(30px, min(7.2cqw, 9cqh), 104px)/1 var(--fd); letter-spacing: .03em; display: flex; }
.erh .f0 .wm b span { display: inline-block; }
.erh .f0 .wm i { font: 400 clamp(15px, min(2.6cqw, 3.6cqh), 36px)/1 var(--fb); font-style: normal; letter-spacing: .34em; text-transform: uppercase; color: var(--gr); }

/* Einstieg */
.erh .f1 .hook { max-width: 22ch; margin: 0; font: 500 clamp(32px, min(6.6cqw, 10cqh), 104px)/1.08 var(--fd); letter-spacing: -.02em; }
.erh .f1 .hook .drei { position: relative; color: var(--o); }

/* Problem-Szenen */
.erh .ph .num { font: 700 clamp(64px, min(15cqw, 22cqh), 220px)/.85 var(--fd); color: var(--o); letter-spacing: -.05em; display: block; }
.erh .ph .ttl { margin: clamp(10px, 2.4cqh, 26px) 0 0; font: 500 clamp(26px, min(4.4cqw, 7cqh), 66px)/1.1 var(--fd); letter-spacing: -.015em; text-wrap: balance; }
/* Jeder Satz (oder jede Sinnzeile) auf eigener Zeile: Szene 03 ("Alle reden
   von KI." / "Und wo faengt man an?"), Karte 03, die Schlussszene und die
   Hero-H1 ("Wenn Sie hier sind," / "ist es vermutlich" / "eines von drei
   Dingen."). Ohne das brach der Text nur nach der Breite um, am grossen
   Schirm stand etwa "KI und" allein in einer Zeile. */
.erh .satz { display: block; }
/* Wortgruppen, die nicht auseinanderbrechen sollen. Ein &nbsp; hilft in
   Filmueberschriften nicht: hero-film.js zerlegt sie in Woerter und macht aus
   jedem Leerraum, auch dem geschuetzten, ein normales Leerzeichen. */
.erh .nw { white-space: nowrap; }
.erh .panel { background: var(--w); padding: clamp(18px, 3.4cqh, 40px) clamp(18px, 2.6cqw, 40px); position: relative; box-shadow: 0 30px 60px -40px rgba(23, 40, 30, .5); }
.erh .panel .cap { font: 500 clamp(11px, min(1.2cqw, 1.8cqh), 14px)/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--gr); }
.erh .calc { display: grid; gap: clamp(6px, 1.4cqh, 14px); margin-top: clamp(10px, 2.4cqh, 22px); }
.erh .calc .r { display: flex; align-items: baseline; gap: 14px; font: 400 clamp(16px, min(2cqw, 3.1cqh), 26px)/1.2 var(--fb); }
.erh .calc .r .op { width: 1.1em; color: var(--o); font: 700 1em/1 var(--fd); }
.erh .calc .r b { font: 500 1.15em/1 var(--fd); font-variant-numeric: tabular-nums; }
.erh .calc .rule { height: 2px; background: var(--g); transform-origin: left; }
.erh .calc .sum b { color: var(--g); }
.erh .total { margin-top: clamp(12px, 2.6cqh, 26px); display: grid; gap: 6px; container-type: inline-size; }
.erh .total .big { white-space: nowrap; font: 700 clamp(38px, min(17cqw, 13cqh), 124px)/.95 var(--fd); color: var(--o); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Die Ziffern der Poppins-Teilmenge sind proportional (kein tnum). Beim
   Hochzaehlen wuerde das Euro-Zeichen deshalb wackeln; hero-film.js gibt den
   Zaehlern ihre Endbreite als min-width, rechtsbuendig. */
.erh .cnt-h, .erh .cnt-e { display: inline-block; text-align: right; }
/* .total ist selbst ein Container (fuer die grosse Zahl), cqw meint hier also
   die Panelbreite, nicht den Film. Die Fussnote haengt deshalb nur an der
   Filmhoehe; in der Vorlage blieb sie so auf jedem Schirm bei 11px haengen. */
.erh .total small { font: 400 clamp(13px, 1.9cqh, 14px)/1.4 var(--fb); color: var(--gr); }

.erh .checks { display: grid; gap: clamp(8px, 1.6cqh, 16px); margin-top: clamp(10px, 2.4cqh, 22px); }
.erh .ck { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: clamp(8px, 1.6cqh, 14px); border-bottom: 1px solid var(--ln); font: 500 clamp(16px, min(2cqw, 3.1cqh), 26px)/1.2 var(--fd); }
.erh .ck svg { width: clamp(22px, min(2.6cqw, 4cqh), 34px); height: auto; flex: none; }
.erh .ck.no { color: var(--o); border-bottom: 0; }
.erh .ck.no .lbl { position: relative; }
.erh .ck.no .lbl::after { content: ""; position: absolute; left: 0; top: 55%; height: 3px; background: var(--o); width: var(--strike, 0%); }
.erh .punch { margin-top: clamp(14px, 3cqh, 30px); display: grid; gap: 6px; }
.erh .punch b { font: 700 clamp(28px, min(4.6cqw, 7cqh), 68px)/1.02 var(--fd); color: var(--o); letter-spacing: -.02em; }

/* Begriffswolke. Bis zum 05.10.2026 lag darin ein Panel ("4 Fragen vor jeder
   Investition"), das die Hoehe mitbestimmte; mit Marvin gestrichen. Jetzt hat
   die Wolke eine feste Hoehe, die Begriffe verteilen sich absolut darueber
   (Positionen in hero-film.js, Szene f4). */
.erh .cloud { position: relative; height: clamp(240px, 52cqh, 520px); }
.erh .bz { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 clamp(15px, min(2.2cqw, 3.4cqh), 30px)/1 var(--fd); padding: 10px 16px; background: var(--w); border: 1px solid var(--ln); }
.erh .bz.hot { background: var(--g); color: var(--off); border-color: var(--g); }

/* CTA-Szene */
.erh .f5 .inner { display: grid; gap: clamp(14px, 3cqh, 30px); justify-items: start; }
.erh .f5 .eb { font: 500 clamp(12px, min(1.4cqw, 2cqh), 16px)/1 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: #FFE0D9; }
.erh .f5 .ttl { margin: 0; max-width: 20ch; font: 500 clamp(32px, min(6cqw, 9cqh), 96px)/1.05 var(--fd); letter-spacing: -.02em; text-wrap: balance; }
/* Ohne Breitendeckel (Vorlage: 44ch): der Satz steht, wo der Platz reicht, in
   einer Zeile. Am Handy bricht er, "zwischen beidem" haelt ein &nbsp; zusammen. */
.erh .f5 p { margin: 0; font: 400 clamp(16px, min(2cqw, 3cqh), 26px)/1.45 var(--fb); color: #FFE7E1; }
.erh .f5 .fcta { display: inline-flex; align-items: center; gap: 12px; background: var(--w); color: var(--g); text-decoration: none; font: 500 clamp(16px, min(2cqw, 3cqh), 24px)/1 var(--fd); padding: clamp(16px, 2.6cqh, 24px) clamp(22px, 2.4cqw, 34px); border-radius: 2px; margin-top: clamp(4px, 1cqh, 10px); }
.erh .f5 .fcta svg { width: 1em; height: 1em; }

/* Film-Rahmen: Marke oben, Kapitel, Fortschritt, Steuerung */
.erh .bug { position: absolute; z-index: 5; left: max(clamp(20px, 6cqw, 96px), calc((100cqw - 1192px) / 2)); top: clamp(22px, 5cqh, 48px); display: flex; align-items: center; gap: 14px; opacity: 0; pointer-events: none; }
.erh .bug svg { width: clamp(34px, min(4cqw, 6cqh), 54px); height: auto; }
.erh .bug .arm { transition: opacity .4s; }
.erh .bug .lbl { font: 500 clamp(11px, min(1.2cqw, 1.8cqh), 14px)/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.erh .fbar {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 16px;
  left: max(clamp(20px, 6cqw, 96px), calc((100cqw - 1192px) / 2));
  right: max(clamp(20px, 6cqw, 96px), calc((100cqw - 1192px) / 2), var(--erh-wa));
  bottom: clamp(22px, 4.4cqh, 44px);
}
.erh .track { flex: 1; display: flex; gap: 6px; }
/* Jedes Segment ist ein Knopf: Klick springt an den Anfang der Szene
   (hero-film.js). Sichtbar bleibt die 3px-Linie, der Knopf darum ist die
   Trefferflaeche. */
.erh .track .seg { flex: 1; display: flex; align-items: center; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.erh .track .seg:hover span { height: 5px; }
.erh .track .seg:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
.erh .track span { flex: 1; height: 3px; background: rgba(110, 120, 115, .28); position: relative; overflow: hidden; transition: height .15s; }
.erh .track span i { position: absolute; inset: 0; background: var(--o); transform-origin: left; transform: scaleX(0); transition: background-color .4s; }
/* Auf der orangen Schlussszene ginge die orange Fuellung unter: dort
   Dunkelgruen, und der ungefuellte Rest und der Fokusring ebenfalls dunkel. */
.erh-film.is-orange .track span { background: rgba(23, 40, 30, .25); }
.erh-film.is-orange .track span i { background: var(--g); }
.erh-film.is-orange .track .seg:focus-visible, .erh-film.is-orange .fbtn:focus-visible { outline-color: var(--g); }
.erh-film.is-orange .fbtn:hover { border-color: var(--g); }
.erh .fbtn { appearance: none; border: 1px solid rgba(110, 120, 115, .45); background: rgba(255, 255, 255, .08); color: inherit; font: 500 13px/1 var(--fb); padding: 9px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; backdrop-filter: blur(6px); }
.erh .fbtn svg { width: 10px; height: 10px; fill: currentColor; }
.erh .fbtn:hover { border-color: var(--o); }
.erh .fbtn:focus-visible, .erh .f5 .fcta:focus-visible, .erh .hcta:focus-visible, .erh .hcard:focus-visible, .erh .hrep:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
@container erh-film (max-width: 900px) {
  .erh .fbar .txt { display: none; }
}
/* Einspaltig nur im Hochformat. Die Vorlage schaltete allein nach der Breite
   um; ein Handy quer (844 x 390) bekam dadurch eine Spalte in 330px Hoehe. */
@container erh-film (max-width: 900px) and (orientation: portrait) {
  .erh .fs .cols { grid-template-columns: 1fr; gap: clamp(14px, 3cqh, 28px); align-content: center; }
}

/* ============ HERO (Endzustand) ============ */
.erh-hero {
  position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto;
  min-height: var(--erh-h); align-content: center;
  padding-inline: clamp(16px, 5vw, 64px); padding-block: clamp(48px, 7vw, 96px);
  display: grid; gap: clamp(32px, 5vw, 60px);
}
/* Waehrend der Film laeuft, liegt der Hero unsichtbar darunter. opacity statt
   visibility, damit Screenreader die h1 und die Karten trotzdem finden. Wer
   per Tastatur hineinspringt, beendet den Film (hero-film.js). */
html.er-film .erh:not(.is-hero) .erh-hero { opacity: 0; pointer-events: none; }
/* 3fr/1fr statt 7fr/4fr der Vorlage: die H1 steht in drei Sinnzeilen bei
   voller Groesse, dafuer ist die Bildmarke schmaler (mit Marvin, 06.10.2026). */
.erh .htop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.erh .htext { min-width: 0; display: grid; gap: 22px; justify-items: start; }
.erh .heb { margin: 0; font: 500 13px/1.3 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--o); }
.erh .hh1 { margin: 0; font: 500 clamp(34px, 5.2vw, 66px)/1.08 var(--fd); letter-spacing: -.015em; text-wrap: balance; }
.erh .hact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.erh .hcta { display: inline-flex; align-items: center; gap: 10px; background: var(--o); color: var(--w) !important; text-decoration: none; font: 500 16px/1 var(--fd); padding: 17px 24px; border-radius: 2px; transition: background .2s; transform-origin: 0 0; }
.erh .hcta:hover { background: var(--o2); }
.erh .hcta svg, .erh .hmore svg { width: 16px; height: 16px; transition: transform .2s; }
.erh .hcta:hover svg { transform: translateX(3px); }
.erh .hnote { font: 400 15px/1.4 var(--fb); color: var(--gr); }
.erh .hrep { appearance: none; background: none; border: 0; padding: 4px 0; color: var(--g); font: 500 15px/1 var(--fb); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ln); }
.erh .hrep:hover { text-decoration-color: var(--o); }
.erh .hrep svg { width: 14px; height: 14px; }
/* Ohne JavaScript gibt es keinen Film zum Ansehen. */
html:not(.js) .erh .hrep { display: none; }
.erh .hmark { width: 100%; max-width: 400px; justify-self: end; height: auto; overflow: visible; }
.erh .hmark .arm, .erh .hmark .stem { transition: opacity .4s; }
.erh-hero.focus .hmark .arm, .erh-hero.focus .hmark .stem { opacity: .22; }
.erh-hero.focus[data-k="0"] .hmark .a0, .erh-hero.focus[data-k="1"] .hmark .a1, .erh-hero.focus[data-k="2"] .hmark .a2,
.erh-hero.focus[data-k="1"] .hmark .stem, .erh-hero.focus[data-k="2"] .hmark .stem { opacity: 1; }
.erh .hcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.erh .hcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; height: 100%; padding: 28px 26px 24px; background: var(--w); text-decoration: none; border-top: 2px solid var(--ln); }
.erh .hcard::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--o); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.erh .hcard:hover::before, .erh .hcard:focus-visible::before, .erh .hcard:active::before { transform: scaleX(1); }
.erh .hn { font: 700 44px/1 var(--fd); color: var(--o); letter-spacing: -.02em; }
.erh .hcard h2 { margin: 0; font: 500 clamp(19px, 1.7vw, 23px)/1.25 var(--fd); text-wrap: balance; }
.erh .hmore { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--fb); color: var(--g); }
.erh .hcard:hover .hmore, .erh .hcard:focus-visible .hmore { color: var(--o); }
.erh .hcard:hover .hmore svg, .erh .hcard:focus-visible .hmore svg { transform: translateX(3px); }

/* Auftritt des Heros: nach dem Film (is-reveal) und bei jedem Besuch ohne
   Film (html ohne er-film), dann gleich ab dem ersten Bild. */
:is(.erh.is-reveal, html:not(.er-film) .erh) .rv { animation: er-up .8s cubic-bezier(.2, .8, .2, 1) both; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .d1 { animation-delay: .12s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .d3 { animation-delay: .5s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hcards li:nth-child(1) .rv { animation-delay: .45s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hcards li:nth-child(2) .rv { animation-delay: .57s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hcards li:nth-child(3) .rv { animation-delay: .69s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hmark .g { animation: er-sl 1s cubic-bezier(.2, .8, .2, 1) both; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hmark .g1 { animation-delay: .2s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hmark .g2 { animation-delay: .32s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hmark .g3 { animation-delay: .44s; }
:is(.erh.is-reveal, html:not(.er-film) .erh) .hmark .gr { animation: er-r 1.1s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes er-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes er-sl { from { opacity: 0; transform: translateX(-140px); } to { opacity: 1; transform: none; } }
@keyframes er-r { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .erh .htop { grid-template-columns: 1fr; }
  .erh .hmark { order: -1; max-width: 92px; justify-self: start; }
  .erh .hcards { grid-template-columns: 1fr; }
  .erh .hcard { padding: 22px 20px 20px; gap: 10px; }
  .erh .hn { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .erh .rv, .erh .hmark .g, .erh .hmark .gr { animation: none !important; }
  .erh .hrep { display: none; }
}

/* ============ Handy, Tablet, Querformat ============
   Gemessen mit Playwright auf 360x640 bis 1920x1080 und 844x390 (Handy quer),
   jede Szene im eingeschwungenen Zustand, gegen das echte Apache-Image.
   Vorgaben: alles in der sichtbaren Hoehe, Fliesstext am Handy ab 15px,
   Bedienknoepfe ab 44 x 44 px, nichts unter Steuerleiste oder WhatsApp-Knopf.
   Farben, Texte und Ablauf bleiben, hier aendern sich nur Abstaende, Groessen
   und Anordnung. */

/* Tippflaechen: Pause und Ueberspringen waren 30px hoch, "Film ansehen" 23px. */
@media (pointer: coarse), (max-width: 900px) {
  .erh .fbtn { min-height: 44px; min-width: 44px; padding-inline: 15px; }
  .erh .hrep { min-height: 44px; }
  .erh .track .seg { height: 44px; }
}
@media (max-width: 640px) {
  .erh { --erh-wa: 84px; }            /* .wa-float ist hier 56px gross, 16px vom Rand */
}

/* Lesbarkeit auf Handy und Tablet: Fliesstext ab 15px, Etiketten ab 12px.
   In der Vorlage gingen die Etiketten bis auf 11px herunter. */
@container erh-film (max-width: 900px) or (max-height: 500px) {
  .erh .total small { font-size: 15px; }
  .erh .panel .cap, .erh .bug .lbl { font-size: 12px; }
  .erh .fbtn { font-size: 14px; }
}

/* Handy hochkant: Rechts unten sitzt der WhatsApp-Knopf, daneben blieben fuer
   den Fortschritt nur gut 30px. Der Fortschritt wird deshalb zur Linie an der
   Unterkante des Films (wie bei einem Video), die Knoepfe stehen links. Die
   Segmente sind dort 24px hohe Trefferflaechen mit der Linie am unteren Rand,
   die Knoepfe sitzen direkt darueber. */
@container erh-film (max-width: 640px) {
  .erh .fbar { right: auto; bottom: 24px; }
  .erh .track {
    position: absolute; bottom: -24px; left: calc(-1 * clamp(20px, 6cqw, 96px));
    width: 100cqw; gap: 3px;
  }
  .erh .track .seg { height: 24px; align-items: flex-end; }
  .erh .fs .pad { padding-bottom: max(80px, 14cqh); }
}

/* Kleine Handys hochkant (360 x 640: 576px Film). Die Szenen 02 und 03 liefen
   hier 70 und 92px in die Steuerleiste. */
@container erh-film (max-width: 640px) and (max-height: 620px) {
  .erh .fs .pad { padding-top: 58px; }
  .erh .bug { top: 16px; }
  .erh .bug svg { width: 30px; }
  .erh .fs .cols { gap: 12px; }
  .erh .ph .num { font-size: 48px; }
  .erh .ph .ttl { margin-top: 6px; font-size: 23px; }
  .erh .panel { padding: 14px 16px; }
  .erh .calc { margin-top: 8px; gap: 5px; }
  .erh .total { margin-top: 10px; }
  .erh .checks { margin-top: 8px; gap: 5px; }
  .erh .ck { padding-bottom: 5px; font-size: 15px; }
  .erh .punch { margin-top: 10px; }
  .erh .punch b { font-size: 24px; }
  .erh .cloud { height: 50cqh; }
}

/* Handy quer (844 x 390: 330px Film) und niedrige Fenster: zwei Spalten statt
   einer, alles kompakter. Rechts bleibt die Spalte frei vom WhatsApp-Knopf. */
@container erh-film (max-height: 500px) and (orientation: landscape) {
  .erh .fs .pad {
    padding-block: 48px 64px;
    padding-inline-end: max(clamp(20px, 6cqw, 96px), calc((100cqw - 1192px) / 2), var(--erh-wa));
  }
  .erh .fs .cols { gap: clamp(20px, 4cqw, 48px); }
  .erh .bug { top: 12px; gap: 10px; }
  .erh .bug svg { width: 26px; }
  .erh .fbar { bottom: 12px; }
  .erh .ph .num { font-size: clamp(40px, 15cqh, 64px); }
  .erh .ph .ttl { margin-top: 6px; font-size: clamp(20px, 6.5cqh, 26px); }
  .erh .panel { padding: 12px 16px; }
  .erh .calc { margin-top: 6px; gap: 3px; }
  .erh .calc .r { font-size: 15px; }
  .erh .total { margin-top: 8px; gap: 2px; }
  .erh .total .big { font-size: clamp(30px, 11cqh, 44px); }
  .erh .checks { margin-top: 6px; gap: 4px; }
  .erh .ck { padding-bottom: 4px; font-size: 15px; }
  .erh .ck svg { width: 20px; }
  .erh .punch { margin-top: 8px; gap: 2px; }
  .erh .punch b { font-size: clamp(20px, 6.5cqh, 26px); }
  .erh .cloud { height: calc(100cqh - 112px); }   /* volle Hoehe zwischen Marke und Steuerleiste */
  .erh .bz { padding: 7px 12px; }
  .erh .f5 .inner { gap: 10px; }
  .erh .f5 .ttl { font-size: clamp(24px, 8cqh, 30px); max-width: 26ch; }
  .erh .f5 .fcta { padding: 12px 20px; }
}

/* Hero nach dem Film: Der CTA-Knopf fliegt an seinen Platz und soll dort auch
   zu sehen sein. Auf kleinen Handys lag er halb unter dem Bildrand und unter
   dem WhatsApp-Knopf, quer komplett ausserhalb. */
@media (max-width: 640px) and (max-height: 700px) {
  .erh-hero { padding-block: 16px 40px; gap: 32px; }
  .erh .htop { gap: 12px; }
  .erh .hmark { max-width: 64px; }
  .erh .htext { gap: 12px; }
  .erh .hh1 { font-size: 30px; }
  .erh .hact { row-gap: 6px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .erh-hero { padding-block: 20px 32px; gap: 24px; }
  .erh .htop { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .erh .hmark { order: 0; max-width: 120px; justify-self: end; align-self: start; }
  .erh .htext { gap: 12px; }
  .erh .hh1 { font-size: clamp(26px, 8vh, 34px); max-width: 24ch; }
  .erh .hact { margin-top: 2px; }
}