/* Edlerritter IT-Consulting · Angebotskarte mit Film (Startseite, #angebot)
   Steuerung: js/angebot-film.js. Der Film laeuft einmal pro Browser-Sitzung
   in der dunklen Karte, nie bei reduzierter Bewegung. Ohne JavaScript und
   danach steht die normale Angebotskarte da.

   Herkunft: Vorlage "edlerritter-angebot-film.html" vom 06.10.2026. Szenen,
   Texte und Zeitachse sind aus der Vorlage, mit diesen Abweichungen:
   - Ruhezustand = die bisherige Angebotskarte aus style.css (.angebot,
     .angebot__card, .angebot__fakt, .btn--on-dark). Die Vorlage brachte eine
     eigene Karte mit eigenem Knopf und eigenen Grautoenen mit; mit Marvin
     entschieden: Design, Farben und Schrift der Seite.
   - Farben auf die Tokens aus style.css. Auf dunklem Grund Weiss in den
     Deckkraeften der Karte (.85 Lead, .7 Nebentext, .2 Linien), kleiner
     Akzenttext auf dem weissen Plan-Blatt in --accent-ink (AA).
   - Schrift: nur Poppins 400/500/700. Die Vorlage nutzte 600; ohne diese
     Datei haette der Browser Bold genommen (600 -> 500, wie beim Hero-Film).
   - Jeder Selektor haengt an .ers. Die Vorlage hatte kurze Klassen wie
     .cols, .big, .w und .st, die es im Hero-Film schon gibt. .steps heisst
     hier .schritte: style.css hat eine globale .steps-Regel (Ablauf-Abschnitt),
     die sonst auch die Schrittleiste im Film getroffen haette.
   - Die Filmbuehne klebt unter der Kopfzeile, wenn die Karte hoeher ist als
     der sichtbare Bereich (Handy hochkant und quer). Sonst laege die Haelfte
     der Szene oder die Steuerleiste ausserhalb des Bildschirms. */

.ers {
  --o: var(--accent); --o2: var(--accent-hover); --g: var(--dark);
  --tx: #fff; --lead: rgba(255, 255, 255, .85); --mu: rgba(255, 255, 255, .7); --rl: rgba(255, 255, 255, .2);
  /* Innenabstand des Films = Innenabstand der Karte: "Das Angebot" steht im
     Film und in der Karte an derselben Kante. */
  --ers-px: calc(48px * var(--space-scale));
  /* Freiraum rechts unten fuer den fixen WhatsApp-Knopf (.wa-float, 60px mit
     24px Abstand), gerechnet vom rechten Bildschirmrand. */
  --ers-wa: 96px;
}
/* clip statt hidden: overflow: hidden macht die Karte zum Scroll-Container,
   die Filmbuehne klebte dann an der Karte statt unter der Kopfzeile und
   stand am Handy halb ausserhalb des Bildschirms. clip schneidet genauso an
   den runden Ecken ab, ohne Scroll-Container. hidden bleibt als Rueckfall
   fuer Browser ohne clip (Safari vor 16). */
.ers-card { position: relative; overflow: hidden; overflow: clip; }

/* ============ Ruhezustand ============ */
/* Die Karte soll nach dem Film ganz auf einen Handy-Bildschirm passen
   (Marvin, 06.10.2026, iPhone 14 Pro). Dafuer ist der Lead-Satz weg, und
   "Ablauf ansehen" steht in der Kopfzeile neben "Das Angebot" statt in einer
   eigenen Zeile unter dem Knopf. */
.ers .ers-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.ers .ers-kopf .eyebrow { margin: 0; }
.ers .angebot__card .h2 { margin-bottom: 28px; }
.ers .ers-rep {
  appearance: none; background: none; border: 0; padding: 6px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  margin-block: -6px; color: var(--tx); font: 500 15px/1 var(--font);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rl);
}
.ers .ers-rep:hover { text-decoration-color: var(--o); }
.ers .ers-rep svg { width: 14px; height: 14px; }
/* Ohne JavaScript gibt es keinen Film zum Ansehen. */
html:not(.js) .ers .ers-rep { display: none; }
/* Die drei Schlagworte fliegen am Ende aus dem Film auf ihre Zeilen
   (js/angebot-film.js), skaliert von der linken oberen Ecke aus. */
.ers .angebot__fakt dt { transform-origin: 0 0; }
/* Ab 1500px waechst die Schrift der Begriffe mit --h2-scale, die Spalte aus
   style.css (280px) aber nicht: "Ein Massnahmenplan" brach auf 1920px schon
   vor dem Film in zwei Zeilen um. Unter 961px stapeln sich Begriff und Wert
   (style.css, flex-basis 100%), dort gilt diese Regel nicht. */
@media (min-width: 961px) {
  .ers .angebot__fakt dt { flex-basis: calc(280px * var(--h2-scale)); }
}

/* Waehrend der Film laeuft, liegt die Karte unsichtbar darunter und haelt
   die Hoehe. opacity statt visibility, damit Screenreader die Ueberschrift
   und den Link trotzdem finden. Wer per Tastatur hineinspringt, beendet den
   Film (js/angebot-film.js). */
.ers.is-film .ers-rest { opacity: 0; pointer-events: none; }

/* Auftritt der Karte nach dem Film */
.ers.is-reveal .rv { animation: ers-up .7s cubic-bezier(.2, .8, .2, 1) both; }
.ers.is-reveal .rv1 { animation-delay: .05s; }
.ers.is-reveal .rv2 { animation-delay: .12s; }
.ers.is-reveal .rv3 { animation-delay: .2s; }
.ers.is-reveal .rv4 { animation-delay: .75s; }
.ers.is-reveal .rv5 { animation-delay: .9s; }
.ers.is-reveal .angebot__fakt dd { animation: ers-up .6s cubic-bezier(.2, .8, .2, 1) both; }
.ers.is-reveal .angebot__fakt:nth-child(1) dd { animation-delay: .55s; }
.ers.is-reveal .angebot__fakt:nth-child(2) dd { animation-delay: .65s; }
.ers.is-reveal .angebot__fakt:nth-child(3) dd { animation-delay: .75s; }
.ers.is-reveal .angebot__fakt { animation: ers-line .8s ease .3s both; }
@keyframes ers-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ers-line { from { border-color: transparent; } }

/* ============ Film ============ */
.ers-film { position: absolute; inset: 0; z-index: 2; background: var(--g); color: var(--tx); cursor: pointer; }
.ers-stage {
  position: sticky; top: var(--header-h);
  height: min(100%, calc(100vh - var(--header-h)));
  overflow: hidden; container: ersf / size;
}
@supports (height: 100svh) {
  .ers-stage { height: min(100%, calc(100svh - var(--header-h))); }
}
.ers .sc {
  position: absolute; inset: 0; visibility: hidden; display: grid; align-items: start;
  padding: clamp(24px, 7cqh, 56px) var(--ers-px) clamp(80px, 13cqh, 96px);
}
/* Senkrecht mittig ueber automatische Raender statt align-items: center.
   Passt eine Szene nicht ganz, werden die Raender 0 und sie steht oben,
   statt oben und unten gleichmaessig abgeschnitten zu werden. */
.ers .sc > * { min-width: 0; width: 100%; margin-block: auto; }
.ers .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 5cqw, 64px); align-items: center; }
.ers .cols > * { min-width: 0; }
.ers .w { display: inline-block; will-change: transform, opacity; }
/* Kapitel-Etikett = .eyebrow--soft aus style.css */
.ers .k { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); }
/* 4.4cqw: "Massnahmenplan" in einem Wort passt so in die linke Spalte. Mit
   5cqw (Vorlage) lief es auf 880 und 1165px Kartenbreite 33px ins Plan-Blatt. */
.ers .big { margin: clamp(8px, 1.6cqh, 14px) 0 0; font-size: clamp(28px, min(4.4cqw, 11cqh), 66px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.ers .sub { margin: clamp(10px, 2.2cqh, 20px) 0 0; font-size: clamp(15px, min(1.8cqw, 3cqh), 21px); line-height: 1.5; color: var(--mu); max-width: 30ch; text-wrap: pretty; }
.ers .sub b { color: var(--tx); font-weight: 500; }

/* S1: Ueberblick mit vier Schritten */
.ers .s1 .tt { margin: clamp(8px, 1.6cqh, 14px) 0 0; font-size: clamp(32px, min(5.6cqw, 10cqh), 70px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.ers .s1 .tt span { display: inline-block; }
/* Wortstuecke bleiben zusammen, umbrechen darf die Zeile nur nach "IT-" und
   zwischen "Standort" und "bestimmung" (js/angebot-film.js). Den Strich
   dort setzt das Skript selbst (.trenn): Safari zeigt das weiche
   Trennzeichen zwischen einzeln animierten Buchstaben nicht an, auf dem
   iPhone stand "Standort" ohne Strich am Zeilenende. Absolut positioniert,
   damit er die Zeilenbreite nicht veraendert. Ein- und ausgeblendet ueber
   display, nicht visibility: visibility: visible haette ihn auch in den
   anderen Szenen gezeigt, die Szene selbst ist nur per visibility versteckt. */
.ers .s1 .tt .wd { display: inline; white-space: nowrap; }
.ers .s1 .tt .trenn { position: absolute; display: none; }
.ers .s1 .tt .trenn.an { display: inline-block; }
.ers .schritte { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 7cqh, 64px); }
.ers .schritte .line { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--rl); }
.ers .schritte .line i { position: absolute; inset: 0; background: var(--o); transform-origin: left; transform: scaleX(0); }
.ers .schritte .dot { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 6px rgba(234, 66, 39, .22); }
.ers .st { position: relative; padding-top: 38px; display: grid; gap: 6px; align-content: start; }
.ers .st::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--g); border: 2px solid var(--rl); box-sizing: border-box; }
.ers .st.on::before { border-color: var(--o); background: var(--o); }
.ers .st b { font-size: clamp(15px, min(1.7cqw, 2.8cqh), 20px); font-weight: 700; line-height: 1.25; }
.ers .st small { font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--accent-soft); }
/* Zielflagge am letzten Schritt statt Kreis (Marvin, 06.10.2026). Der Fuss
   der Stange steht auf der Mitte, wo sonst der Kreis saesse; erreicht der
   Punkt sie, wird sie farbig und wackelt (js/angebot-film.js). Gedreht wird
   um den Fuss der Stange, das Tuch zusaetzlich um seine Kante an der Stange. */
.ers .st.ende::before { display: none; }
.ers .ziel {
  /* --zw: Breite der Flagge, waechst mit der Karte. Die Stange steht bei 10
     Prozent der Breite; ihr Fuss sitzt auf der Mitte der Marke (7px / 10px). */
  --zw: clamp(24px, 2.6cqw, 32px);
  position: absolute; width: var(--zw); height: calc(var(--zw) * 1.3);
  left: calc(7px - var(--zw) * .1); top: calc(10px - var(--zw) * 1.3);
  overflow: visible; transform-origin: 10% 100%;
}
.ers .ziel .stange { fill: var(--rl); }
.ers .ziel .rahmen { fill: var(--g); stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.ers .ziel .feld { fill: rgba(255, 255, 255, .45); }
.ers .ziel .tuch { transform-box: view-box; transform-origin: 3px 6.5px; }
.ers .ziel.an .stange { fill: var(--o); }
.ers .ziel.an .rahmen { stroke: #fff; }
.ers .ziel.an .feld { fill: #fff; }

/* S2: Ein Tag */
.ers .day { background: rgba(255, 255, 255, .05); border: 1px solid var(--rl); border-radius: 20px; corner-shape: squircle; padding: clamp(18px, 3.4cqh, 32px) clamp(18px, 2.6cqw, 32px); }
/* Seitliche Luft: Uhr und Stundenzahl stehen mittig ueber ihrem Strich und
   ragten bei 08:00 und 17:00 sonst ueber den Rand des Kastens. */
.ers .ruler { position: relative; height: clamp(54px, 9cqh, 74px); margin: 0 22px clamp(14px, 3cqh, 26px); }
.ers .ruler .base { position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; background: var(--rl); }
.ers .ruler .fill { position: absolute; left: 0; bottom: 22px; height: 2px; background: var(--o); width: 0; }
.ers .ruler .tk { position: absolute; bottom: 22px; width: 1px; height: 10px; background: rgba(255, 255, 255, .3); transform: translateX(-.5px); }
.ers .ruler .hr { position: absolute; bottom: 0; font-size: 12px; font-weight: 500; color: var(--mu); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.ers .ruler .sweep { position: absolute; bottom: 14px; left: 0; width: 2px; height: clamp(40px, 7cqh, 58px); background: var(--o); transform: translateX(-1px); }
.ers .ruler .clock { position: absolute; top: 0; left: 0; transform: translateX(-50%); background: var(--accent-surface); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 9px; border-radius: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Einspaltig: in zwei Spalten lief "Geschaeftsprozesse" auf jeder Karte bis
   1165px aus seinem Kaestchen. Zwei Spalten nur quer (unten). */
.ers .tags { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(6px, 1.2cqh, 10px); }
.ers .tag { display: flex; align-items: center; gap: 10px; padding: clamp(8px, 1.6cqh, 12px) 14px; border: 1px solid var(--rl); border-radius: 12px; corner-shape: squircle; font-size: clamp(14px, 2.4cqh, 17px); font-weight: 500; line-height: 1.25; color: var(--mu); }
.ers .tag i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); display: grid; place-items: center; }
.ers .tag i svg { width: 12px; height: 12px; opacity: 0; }
.ers .tag.on { border-color: var(--o); color: var(--tx); background: rgba(234, 66, 39, .08); }
.ers .tag.on i { background: var(--o); border-color: var(--o); }
.ers .tag.on i svg { opacity: 1; }

/* S3: Massnahmenplan */
/* --stempel: wie weit der Stempel unter dem Blatt haengt. Das Blatt haelt
   dafuer unten Abstand, damit die Szene beim Zentrieren mit ihm rechnet. */
.ers .paper { --stempel: 34px; margin-bottom: var(--stempel); position: relative; background: var(--paper); color: var(--ink); border-radius: 14px; corner-shape: squircle; padding: clamp(18px, 3.2cqh, 30px) clamp(18px, 2.6cqw, 30px); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.ers .paper .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: clamp(10px, 2cqh, 16px); border-bottom: 2px solid var(--ink); }
.ers .paper .hd b { font-size: clamp(17px, min(2cqw, 3.4cqh), 24px); font-weight: 700; letter-spacing: -.01em; }
.ers .paper .hd span { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ers .cl, .ers .rw { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px 78px; gap: 12px; }
.ers .cl { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 0 6px; }
.ers .rws { position: relative; height: calc(var(--rh, 44px) * 3); }
.ers .rw { position: absolute; left: 0; right: 0; top: 0; height: var(--rh, 44px); align-items: center; border-bottom: 1px solid var(--line); }
.ers .rw .n { font-weight: 700; font-size: 20px; color: var(--o); font-variant-numeric: tabular-nums; }
.ers .sk { display: grid; gap: 6px; }
.ers .sk i { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.ers .sk i:nth-child(2) { width: 62%; background: var(--surface); }
.ers .dots { display: flex; gap: 4px; }
.ers .dots b { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.ers .dots b.f { background: var(--ink); }
.ers .eur { font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ers .eur em { font-style: normal; color: var(--line); }
.ers .sortlab { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.ers .notneed { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; padding-top: clamp(10px, 2cqh, 16px); }
.ers .notneed .x { font-weight: 700; font-size: 18px; color: var(--accent-ink); }
.ers .notneed .t { position: relative; font-size: clamp(13px, min(1.4cqw, 2.4cqh), 15px); font-weight: 500; color: var(--ink); }
/* Auf der Unterkante des Blatts statt ueber der letzten Zeile: dort
   verdeckte er "Was Sie nicht brauchen", am iPhone fast ganz. */
.ers .stamp { position: absolute; right: clamp(14px, 2cqw, 26px); top: calc(100% - 10px); padding: 9px 14px; border: 3px solid var(--accent-ink); border-radius: 10px; background: var(--paper); color: var(--accent-ink); font-size: clamp(14px, min(1.7cqw, 2.8cqh), 19px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); }

/* S4: Fester Preis. Farben der SVG hier statt als Attribute, damit sie an
   den Tokens haengen; Schrift erbt Poppins (die Vorlage hatte dafuer ein
   style-Attribut, das die CSP verbietet). */
.ers .priceart { display: grid; gap: clamp(14px, 3cqh, 26px); justify-items: center; }
.ers .tagsvg { width: min(100%, clamp(220px, 32cqw, 380px)); height: auto; overflow: visible; }
.ers .tagp { fill: none; stroke: var(--o); stroke-width: 5; stroke-linejoin: round; }
.ers .hole { fill: none; stroke: var(--o); stroke-width: 5; }
.ers .tagt { fill: var(--tx); font-family: inherit; font-size: 40px; font-weight: 700; letter-spacing: -.5px; }
.ers .tags2 { fill: var(--mu); font-family: inherit; font-size: 18px; font-weight: 500; }
.ers .chain { display: flex; align-items: center; gap: 16px; }
.ers .chain svg { flex: none; width: clamp(96px, 15cqw, 170px); height: auto; overflow: visible; }
.ers .chain rect { fill: none; stroke-width: 8; }
.ers .chain .r1 { stroke: var(--mu); }
.ers .chain .r2 { stroke: var(--o); }
.ers .chain span { min-width: 0; font-size: clamp(15px, min(1.8cqw, 3cqh), 21px); font-weight: 700; line-height: 1.25; hyphens: auto; }

/* S5: Zusammenfassung. Jede Zeile bleibt einzeilig: von hier fliegen die
   Woerter auf ihre Zeilen in der Karte, skaliert nach der Hoehe. Eine
   umbrochene Zeile landete doppelt so gross. */
/* Mittig in der Buehne, wie eine Schlusstafel (Marvin, 06.10.2026). */
.ers .s5 { text-align: center; }
.ers .s5 .stack { display: grid; gap: clamp(4px, 1.2cqh, 10px); }
.ers .s5 .sl { white-space: nowrap; font-size: clamp(24px, min(5.4cqw, 9cqh), 66px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.ers .s5 .sl span { color: var(--o); }

/* Film-Rahmen: Fortschritt und Steuerung */
.ers .fr-bar {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 14px;
  left: var(--ers-px);
  /* Abstand vom rechten Kartenrand, mindestens so viel, dass der WhatsApp-
     Knopf nicht ueber "Ueberspringen" liegt: (100vw - 100cqw) / 2 ist der
     Abstand zwischen Karte und Bildschirmrand. */
  right: max(var(--ers-px), calc(var(--ers-wa) - (100vw - 100cqw) / 2));
  bottom: clamp(16px, 4cqh, 32px);
}
.ers .fr-track { flex: 1; display: flex; gap: 6px; }
/* Jedes Segment ist ein Knopf: Klick springt an den Anfang der Szene
   (js/angebot-film.js), wie beim Hero-Film. Sichtbar bleibt die 3px-Linie,
   der Knopf darum ist die Trefferflaeche. */
.ers .fr-track .seg { flex: 1; display: flex; align-items: center; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.ers .fr-track .seg:hover span { height: 5px; }
.ers .fr-track .seg:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
.ers .fr-track span { flex: 1; transition: height .15s; height: 3px; border-radius: 2px; background: var(--rl); position: relative; overflow: hidden; }
.ers .fr-track i { position: absolute; inset: 0; background: var(--o); transform-origin: left; transform: scaleX(0); }
.ers .ers-fbtn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
  background: transparent; color: var(--lead); font: 500 13px/1 var(--font); white-space: nowrap;
}
.ers .ers-fbtn:hover { border-color: var(--o); color: #fff; }
.ers .ers-fbtn svg { width: 10px; height: 10px; fill: currentColor; }

/* Tippflaechen ab 44 x 44 px */
@media (pointer: coarse), (max-width: 900px) {
  .ers .ers-fbtn { min-height: 44px; min-width: 44px; font-size: 14px; }
  .ers .fr-track .seg { height: 44px; }
  /* 44px Trefferflaeche, die negativen Raender halten die Kopfzeile trotzdem
     so hoch wie das Etikett (gleiches Muster wie .link-more, f-14) */
  .ers .ers-rep { min-height: 44px; margin-block: -13px; }
}
@media (max-width: 640px) {
  .ers { --ers-px: 24px; --ers-wa: 84px; }   /* Karte hat hier 24px Innenabstand, .wa-float 56px mit 16px Rand */
  /* Kompakter, damit die ganze Karte auf einen Bildschirm passt: auf dem
     iPhone 14 Pro (393 x 690, davon 575px frei, wenn unten die Safari-
     Leiste liegt) 571 statt 601px. */
  .ers .angebot__card { padding-block: 28px; }
  .ers .angebot__card .h2 { margin-bottom: 16px; }
  .ers .angebot__fakt { padding-block: 11px; }
  .ers .angebot__fakten { margin-bottom: 24px; }
  .ers .angebot__actions { row-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ers .rv, .ers .angebot__fakt, .ers .angebot__fakt dd { animation: none !important; }
  .ers .ers-rep { 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: jede Szene ganz in der Buehne, nichts unter Steuerleiste
   oder WhatsApp-Knopf, Fliesstext ab 15px, Knoepfe ab 44 x 44 px. Farben und
   Texte bleiben, hier aendern sich nur Abstaende, Groessen und Anordnung. */
@container ersf (max-width: 780px) {
  .ers .fr-bar .txt { display: none; }
}
/* Handy hochkant: Neben Pause, Ueberspringen und dem Freiraum fuer den
   WhatsApp-Knopf blieben fuer den Fortschritt 24px. Er wird deshalb zur
   Linie unter den Knoepfen, ueber die ganze Breite der Leiste. Die Segmente
   sind hier 24px hohe Trefferflaechen mit der Linie am unteren Rand (wie beim
   Hero-Film); 44px haetten die Leiste 20px in die Szenen wachsen lassen. */
@container ersf (max-width: 640px) {
  .ers .fr-bar { flex-wrap: wrap; row-gap: 4px; bottom: 4px; }
  .ers .fr-track { order: 2; flex: 1 0 100%; gap: 4px; }
  .ers .fr-track .seg { height: 24px; align-items: flex-end; padding-bottom: 4px; }
  .ers .chain { gap: 12px; }
}
/* Einspaltig auf schmalen Buehnen, ausser im Handy-Querformat (Buehne bis
   etwa 370px hoch): dort bekaeme eine Spalte nur gut 300px Hoehe. Bis zum
   06.10.2026 hing das an orientation: portrait wie beim Hero-Film. Seit die
   Karte ohne Lead auskommt, ist die Buehne am Tablet hochkant 704 x 669, also
   "quer", und bekam das Zweispalten-Layout fuers Handy. */
@container ersf (max-width: 780px) and (min-height: 441px) {
  .ers .sc { padding-top: clamp(26px, 6cqh, 44px); }
  .ers .cols { grid-template-columns: minmax(0, 1fr); align-content: start; gap: clamp(16px, 3.4cqh, 28px); }
  .ers .big { font-size: clamp(28px, 9.2cqw, 52px); }
  .ers .sub { font-size: 16px; max-width: none; }
  .ers .schritte { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 3cqh, 24px); padding-left: 36px; margin-top: clamp(18px, 4cqh, 32px); }
  .ers .schritte .line { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .ers .schritte .line i { transform-origin: top; }
  .ers .schritte .dot { left: 0; top: 0; }
  /* Senkrechte Leiste: Ziffer vor dem Titel statt darueber */
  .ers .st { display: block; padding-top: 0; }
  .ers .st small { margin-right: 8px; }
  .ers .st::before { left: -36px; top: 3px; }
  /* Senkrecht kommt die Linie von oben: Die Flagge haengt hier nach unten,
     die Linie laeuft in die Stange, das Tuch steht auf Hoehe von
     "Uebergabe". Aufrecht ragte sie bis zum Schritt davor hinauf. 36px
     Einzug statt 30: beim Hupfer stiess das Tuch sonst an die "4". */
  .ers .ziel { left: calc(-29px - var(--zw) * .1); top: 0; }
  .ers .s1 .tt { font-size: clamp(23px, 7.4cqw, 48px); }
  .ers .tag { font-size: 14px; padding: 9px 12px; }
  .ers .tag i { width: 18px; height: 18px; }
  .ers .cl, .ers .rw { grid-template-columns: 22px minmax(0, 1fr) 58px 52px; gap: 8px; }
  .ers .cl { font-size: 10px; letter-spacing: .02em; }
  .ers .eur { font-size: 13px; }
  .ers .s5 .sl { font-size: min(9cqh, 7.6cqw); }
}

/* Niedrige Buehnen: Handy und Tablet hochkant (schmal, bis 700px hoch) und
   Handy quer.
   Kompaktere Masse fuer Tag-Liste und Plan-Blatt; auf 360 x 640 liefen sie
   sonst bis zu 110px unter die Steuerleiste. */
@container ersf ((max-height: 700px) and (max-width: 780px)) or (max-height: 440px) {
  .ers .sc { padding-top: 24px; }
  .ers .schritte { margin-top: 16px; gap: 12px; }
  .ers .day { padding: 14px 16px; }
  .ers .ruler { height: 46px; margin-bottom: 10px; }
  .ers .ruler .sweep { height: 34px; }
  .ers .tags { gap: 6px; }
  .ers .tag { padding: 7px 12px; font-size: 14px; }
  .ers .paper { padding: 14px 16px; }
  .ers .paper .hd { padding-bottom: 8px; }
  .ers .cl { padding: 6px 0 4px; }
  .ers .sortlab { margin-top: 6px; }
  .ers .notneed { padding-top: 8px; }
  .ers .paper { --stempel: 30px; }
  .ers .stamp { padding: 6px 10px; font-size: 14px; }
}

/* Handy quer (844 x 390: 330px Buehne): zwei Spalten, links nur Etikett und
   Ueberschrift, rechts der breitere Kasten. Unten Platz fuer den WhatsApp-
   Knopf (84px vom unteren Rand), der hier ueber der rechten Spalte liegt. */
/* 440 statt 520px: die Desktop-Karte ist ohne Lead nur noch gut 500px hoch
   und bekam sonst dieses Handy-Layout. */
@container ersf (max-height: 440px) {
  .ers .sc { padding-top: 12px; padding-bottom: 88px; }
  .ers .schritte { margin-top: 28px; }   /* Platz fuer die aufrechte Zielflagge ueber der Leiste */
  .ers .cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4cqw, 40px); }
  .ers .big { font-size: clamp(26px, min(4.4cqw, 9cqh), 40px); }
  .ers .sub { margin-top: 8px; font-size: 15px; }
  .ers .day { padding: 10px 14px; }
  .ers .ruler { height: 38px; margin-bottom: 8px; }
  .ers .ruler .base, .ers .ruler .fill, .ers .ruler .tk { bottom: 18px; }
  .ers .ruler .sweep { bottom: 12px; height: 26px; }
  .ers .ruler .clock { padding: 3px 7px; font-size: 12px; }
  .ers .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .ers .tag { padding: 5px 10px; font-size: 13px; gap: 8px; }
  .ers .tag i { width: 16px; height: 16px; }
  .ers .tag i svg { width: 10px; height: 10px; }
  .ers .paper { padding: 10px 14px; }
  .ers .paper .hd b { font-size: 16px; }
  .ers .paper .hd { padding-bottom: 6px; }
  .ers .cl, .ers .rw { grid-template-columns: 22px minmax(0, 1fr) 58px 52px; gap: 8px; }
  .ers .cl { padding: 4px 0 2px; font-size: 10px; letter-spacing: .02em; }
  .ers .rw .n { font-size: 17px; }
  .ers .sortlab { margin-top: 4px; }
  .ers .notneed { padding-top: 4px; }
  .ers .paper { --stempel: 22px; }
  .ers .stamp { padding: 4px 8px; font-size: 13px; border-width: 2px; }
}