/* ============================================================
   seite-webdesign.css — Unterseite „Webdesign" (Baustein)
   Nutzt main.css-Tokens und -Klassen (.hero, .naht, .posten, .faq,
   .finale, .motor-link, .btn-leise ...). Hier nur, was main.css
   nicht schon liefert: Unterseiten-Held mit Geräte-Teaser,
   Vorher/Nachher-Spannung, dunkler Beweis-Akt mit dem Live-
   Schaufenster (Signature), Brücke.

   Bild-Regel (Lehre aus dem Verzerrungs-Bug): Jedes img, dessen
   Breite CSS setzt, bekommt height: auto — sonst bleibt das
   HTML-height-Attribut als fixe Höhe wirksam und streckt das Motiv.
   ============================================================ */

/* ---------- Unterseiten-Held: Scroll-Bühne mit Geräte-Öffnung ----------
   Der Text steht zentriert über dem Ensemble. Das CSS beschreibt den
   ENDZUSTAND (Text oben, Geräte offen darunter) — die Scroll-Choreografie
   (Text startet groß in der Mitte, Deckel klappt mit der Scrollbewegung
   auf) legt webdesign.js per GSAP-Scrub darüber. Ohne JS, bei reduced
   motion, mobil und im ?static-Modus steht einfach dieser Endzustand. */

.unterheld { padding-bottom: clamp(40px, 6vh, 72px); }

.hero-scrub {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Kundenwunsch (Welle 49): Text dichter unter den Site-Header, damit
     das Ensemble darunter größer werden kann — Budget bleibt 100svh */
  padding-top: clamp(64px, 7vh, 88px);
  padding-bottom: 32px;
}

/* Der Hero behält bewusst den grid-fx-Kästchen-Hover (main.js) — kein
   data-spot hier. Der Cursor-Glow sitzt stattdessen in der dunklen
   „Live ausprobieren"-Sektion (.beweis-akt::after, weiter unten). */

/* ZWEISPALTIG ab 1025 px (Welle 59, Jonas): Text links, Geräte rechts. Das ist
   der ENDzustand der Scroll-Choreografie und zugleich der Ruhezustand ohne JS.
   Bis Welle 58 war der Held hier gestapelt und zentriert; die Umstellung ist
   nötig, weil der Laptop „von rechts" hereinkommen soll — dafür braucht er
   eine eigene Spalte.

   1025 und NICHT 861: main.css schaltet `.hero-grid` bei `max-width: 1024px`
   site-weit auf eine Spalte (Tablet-Regel). Mit 861 lief der Scroll-Scrub
   zwischen 861 und 1024 auf einem einspaltigen Layout und schob den Text
   seitwärts ins Nichts — gemessen bei 1000 px: Grid einspaltig, Titel 1233 px
   breit bei 1000 px Viewport. Der Breakpoint hier, der in webdesign.js und der
   von main.css müssen zusammen bleiben; wer einen ändert, ändert alle drei. */
@media (max-width: 1024px) {
  .unterheld .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .unterheld .hero-lead { margin-inline: auto; }
  .unterheld .hero-ctas { justify-content: center; }
  .unterheld .hero-beweis { margin-top: clamp(18px, 2.5vh, 32px); }
  /* Breite MUSS hier zurueck: In der zweispaltigen Fassung ist .hero-geraete
     width:100%, weil es dort seine eigene Spalte fuellt. Einspaltig fuellt es
     damit die ganze Buehne — der Laptop wurde riesig und lief unten aus dem
     Bild (gemessen bei 950 px). Der Wert ist der aus der Fassung vor Welle 59.

     `.unterheld` davor ist NICHT Kosmetik: Dieser Media-Block steht in der Datei
     VOR der Basisregel `.hero-geraete { width: 100% }`. Eine Media Query erhoeht
     die Spezifitaet nicht, also gewinnt bei gleicher Spezifitaet die spaetere
     Regel — die Begrenzung hier waere wirkungslos geblieben. Mit `.unterheld`
     sticht sie. (Gefunden im Review-Lauf zu Welle 59; der erste Fix-Versuch
     ohne Praefix hat nachweislich nichts geaendert.) */
  .unterheld .hero-geraete {
    width: min(80%, 640px);
    margin-inline: auto;
    padding-right: clamp(62px, 8.5vw, 112px);
  }
}

/* Niedrige Fenster im gestapelten Band (861 bis 1024 px). Die Schrumpfregel
   weiter unten greift erst ab 1025 px; ohne diese hier fiel das Band durch
   beide Netze, und Text plus Ensemble sprengten die 100svh-Buehne. */
@media (min-width: 861px) and (max-width: 1024px) and (max-height: 840px) {
  .unterheld .hero-geraete { width: min(70%, 540px); }
}

/* Groesser als der Unterseiten-Standard (Welle 59b, Jonas: „sieht alleine
   irgendwie scheisse aus, muss groesser und bessere umbrueche"). Der Titel
   traegt im Startzustand die ganze Buehne allein, dafuer war 3.4rem zu wenig.
   Die Umbrueche stehen von Hand im HTML (<br>), weil der automatische Umbruch
   „Webdesign, das / nicht nur schoen / ist, sondern liefert." ergab — „das"
   haengt am Zeilenende und „ist," wird von „schoen" getrennt. Jetzt:
   „Webdesign, das / nicht nur schoen ist, / sondern liefert." — drei Zeilen,
   jede eine Sinneinheit, die Pointe steht allein.
   Wichtig fuer den Scrub: Er skaliert nur, die Umbrueche sind in beiden
   Zustaenden dieselben. Wer die Zeilen aendert, aendert sie fuer beide. */
.unterheld .hero-text h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  margin-bottom: 20px;
}

.unterheld .hero-lead {
  margin-bottom: 24px;
  max-width: 46ch;
}

.unterheld .hero-ctas { margin-bottom: 0; }

.unterheld .hero-beweis {
  min-height: 0;
  display: block;
  width: 100%;
}

/* Geräte-Ensemble in der rechten Spalte. Klick springt zur bedienbaren Demo
   (#beweis) — das Mockup ist Teaser, nicht Deko. */
/* padding-right ist der Ueberstand, den das Handy nach rechts bekommt: Es liegt
   absolut auf `right: 0` und misst gegen die PADDING-Box, der Laptop endet
   dagegen an der Content-Kante. Der Wert ist also kein Abstand zum Rand,
   sondern die Differenz zwischen Handy- und Laptop-Kante, und er geht direkt
   von der Laptop-Breite ab. Welle 61 von clamp(48,6vw,88) heruntergesetzt: Die
   Spalte allein konnte den Laptop nicht weit genug wachsen lassen, ohne die
   H1-Umbrueche zu brechen (siehe Grid-Kommentar oben), der Ueberstand dagegen
   kostet nichts ausser etwas mehr Ueberlappung von Handy und Laptop. Das Handy
   steht weiterhin ueber, bei 1600 px rund 44 statt vorher 88 px. */
.hero-geraete {
  position: relative;
  display: block;
  width: 100%;
  padding-right: clamp(28px, 3vw, 44px);
  padding-bottom: 26px;
  text-decoration: none;
}

/* Auf niedrigen Fenstern schrumpft das Ensemble, damit die Bühne passt */
@media (min-width: 1025px) and (max-height: 840px) {
  .hero-geraete { width: 92%; }
}

.hg-mac { perspective: 1700px; }

/* will-change gehoert auf das Element, das der Scrub wirklich bewegt: Seit
   Welle 59 tweent GSAP `.hero-beweis` (x + autoAlpha), nicht mehr
   `.hero-geraete`. Auf dem falschen Element kostet der Hinweis nur eine
   Compositing-Ebene, auf jeder Breite und auch im ?static-Modus.
   `.unterheld` scoped es, damit die Startseiten-Variante von `.hero-beweis`
   (main.css) unberuehrt bleibt. */
@media (min-width: 1025px) {
  .unterheld .hero-beweis { will-change: transform, opacity; }

  /* AUSBRUCH NACH RECHTS (Welle 62, Jonas: „mach mal … den Hero aus dem
     Seitenraster ausbrechen lassen").

     Warum nur rechts und nicht der ganze Held: `.wrap` ist 1220 px breit und
     zentriert, bei 1600 px Viewport stehen also links und rechts je 238 px
     ungenutzt. Ein beidseitig breiterer Container haette die H1 nach links aus
     der Flucht mit dem Logo und allen Sektionen darunter geschoben — das liest
     sich als Fehler, nicht als Absicht. Also bleibt die Textspalte auf der
     Site-Flucht, und nur das Ensemble laeuft in den rechten Rand.

     Zwei Dinge bleiben dadurch unberuehrt, beide gemessen und beide waeren bei
     einem breiteren Container kaputtgegangen:
     1. Die Grid-Tracks. Ein negativer Rand aendert die Track-Breite NICHT, das
        Element ragt nur darueber hinaus. Die Textspalte behaelt also ihre
        Breite und die drei handgesetzten H1-Zeilen ihre Reserve.
     2. Die Titel-Choreografie. `mittenVersatz()` in webdesign.js rechnet gegen
        `raster.offsetWidth`; bleibt das Grid gleich breit, startet der Titel
        weiter exakt in der Buehnenmitte.

     Die Rechnung: Abstand von der Viewport-Kante zur Content-Kante ist
     `(100vw - 1220px) / 2 + padding-inline`. Davon wird auf den Zielrand
     heruntergezogen. `min(0px, …)` sorgt dafuer, dass unterhalb von 1220 px
     Viewport, wo es gar keinen Rand zu holen gibt, NICHTS passiert.
     100vw enthaelt die Scrollbar-Breite, der Ausbruch faellt dadurch je nach
     Browser ein paar Pixel zu weit aus; der Zielrand ist mit mindestens 24 px
     gross genug, dass das folgenlos bleibt, und `body { overflow-x: clip }`
     (main.css) verhindert ohnehin jeden horizontalen Scrollbalken.

     `width: auto` ist dabei KEIN Beiwerk, sondern die Bedingung: Die Basisregel
     weiter oben gibt `.unterheld .hero-beweis` ein `width: 100%`, und das
     rechnet gegen die Grid-Spalte. Bei fester Breite verschiebt ein negativer
     Rand gar nichts, das Element bleibt exakt so breit wie sein Track — genau
     das ist beim ersten Versuch passiert (margin-right kam gemessen mit -174px
     an, die Laptop-Breite blieb trotzdem auf 419 px stehen). Erst mit `auto`
     wird aus dem negativen Rand zusaetzliche Breite. */
  .unterheld .hero-beweis {
    width: auto;
    margin-right: min(0px, calc(clamp(24px, 4vw, 72px) - (100vw - 1220px) / 2 - clamp(20px, 4vw, 48px)));
  }

  /* Geräte-Spalte gleich breit wie die Textspalte (Welle 61, Jonas: „mache den
     laptop im webdesign hero noch größer"). main.css gibt `.hero-grid`
     site-weit 1.15fr/0.85fr; auf dieser Seite ist die rechte Spalte aber kein
     Beiwerk, sondern das Beweisstück. Gemessen bei 1280x720 vorher: Spalten
     609/450, Laptop 338 breit bei 114 px ungenutzter Luft rechts.
     `.unterheld` scoped es auf diese Seite, alle anderen Heroes behalten
     1.15/0.85.

     Warum 1.12/0.88 und nicht glatt 1/1: Der Engpass ist die von Hand gesetzte
     H1-Zeile „nicht nur schoen ist,". Bei 1/1 blieb der Textspalte bei 1600 px
     nur 526 px, die Zeile braucht dort 553 px, und die Ueberschrift kippte in
     VIER Zeilen mit einem 86-px-Wortfetzen allein auf Zeile 3. Bei 1.08 hielten
     die drei Zeilen zwar, aber mit 15 px Reserve — zu wenig, solange die
     Clash-Display noch laedt und der breitere Fallback rendert. 1.12 laesst
     rund 36 px Reserve. Der Wert ist also gemessen, nicht geschaetzt: Wer die
     H1-Zeilen oder die Schriftgroesse aendert, misst ihn neu. */
  .unterheld .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}

.hg-mac-deckel { position: relative; overflow: hidden; }

/* ---------- Hero-Load-Sequenz (Welle 50): H1 -> Subtext -> CTA -> Geräte
   klappen auf. Einmalig beim Laden, nacheinander, NICHT scrollgebunden.
   Konstruktion: nur from-Keyframes + animation-fill-mode backwards, damit
   nach Ablauf KEIN transform stehen bleibt (Hover-Falle) und der Endzustand
   ohne .js / bei reduced motion / im ?static-Modus sofort dasteht. ---------- */

/* Opacity und Bewegung getrennt: die Bewegung darf punchy bleiben (schneller
   Anlauf, sanftes Ausschwingen), die Opacity fadet aber GLEICHMÄSSIG mit
   ease-out ein — der kombinierte Ease (0.16, 0.84 …) riss die Deckkraft
   sonst fast sofort auf 1, das Element „poppte" hart rein (Jonas Welle 51). */
@keyframes hero-fade {
  from { opacity: 0; }
}

@keyframes hero-move {
  from { transform: translateY(26px); }
}

/* Deckel-Aufklappen als reine Bewegung (rotateX); die Opacity kommt aus
   hero-fade parallel, damit der Laptop NICHT hart zugeklappt erscheint und
   dann aufklappt, sondern fadend UND aufklappend zugleich auftaucht. */
@keyframes hero-deckel-auf {
  from { transform: rotateX(-72deg); }
}

@keyframes hero-schirm-an {
  from { filter: brightness(0.1) saturate(0.4); }
}

/* Opacity separat und mit ease-in-out (Start bei Tempo 0 = sanfter Onset,
   ohne langsam zu wirken); die Bewegung bleibt punchy. */
html.js .hero-scrub .hero-text h1 { animation: hero-fade 0.95s cubic-bezier(0.42, 0, 0.58, 1) 0.15s backwards, hero-move 0.8s cubic-bezier(0.16, 0.84, 0.3, 1) 0.15s backwards; }
html.js .hero-scrub .hero-lead { animation: hero-fade 0.95s cubic-bezier(0.42, 0, 0.58, 1) 0.55s backwards, hero-move 0.8s cubic-bezier(0.16, 0.84, 0.3, 1) 0.55s backwards; }
html.js .hero-scrub .hero-ctas { animation: hero-fade 0.95s cubic-bezier(0.42, 0, 0.58, 1) 0.95s backwards, hero-move 0.8s cubic-bezier(0.16, 0.84, 0.3, 1) 0.95s backwards; }

/* Das Geraete-Ensemble hat hier BEWUSST KEINE Ladeanimation mehr (Welle 59).
   Es erscheint erst beim Scrollen, von rechts hereinwischend — das steuert
   webdesign.js.

   Das ist kein Schoenheitsgrund, sondern eine harte Regel des Browsers: Eine
   laufende CSS-Animation gewinnt gegen Inline-Styles, und GSAP schreibt inline.
   Solange hier eine `animation` stand, hat sie den from-Zustand des Scrubs
   ueberschrieben und das Ensemble war beim Scrollen unbeweglich — gemessen
   blieb es auf opacity 0 haengen, egal wie weit der Scrub lief. Dasselbe gilt
   fuer das Handy, es ist Teil desselben Ensembles.

   Der CSS-Ruhezustand ist damit einfach opacity 1 und kein Transform, also
   genau das, was die Seite ohne JS, bei reduced motion, im ?static und unter
   1025 px braucht. */

/* Zwei Ebenen, eine Quelle je Ebene (Review-Fund zu Welle 59): Das aeussere
   <p> traegt Position und den GSAP-Scrub, der innere Span das Layout und die
   CSS-Ladeeinblendung. Lagen beide auf dem <p>, uebersteuerte die laufende
   CSS-Animation den Inline-Wert von GSAP — dieselbe Falle wie beim Ensemble,
   nur unauffaelliger: Wer sofort scrollte (also genau das tat, wozu der Hinweis
   auffordert), sah ihn in den ersten gut 3 Sekunden nicht ausblenden. */
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  color: var(--ink-leise);
}

.hc-inhalt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Nur Opacity, kein hero-move: Der Cue traegt translateX(-50%) als
   Basis-Transform, eine Bewegungsanimation wuerde die Zentrierung waehrend des
   Einblendens ueberschreiben. Die Regel sitzt auf dem inneren Span, damit das
   aeussere <p> allein dem Scrub gehoert. */
html.js .hero-scrub .hc-inhalt { animation: hero-fade 0.7s cubic-bezier(0.42, 0, 0.58, 1) 2.4s backwards; }

.hero-cue svg { animation: cue-bob 1.6s ease-in-out infinite; }

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue svg { animation: none; }
  /* Nur noch die Texte und der Cue tragen ueberhaupt eine Ladeanimation; das
     Ensemble haengt seit Welle 59 am Scroll und wird vom JS gar nicht erst
     angefasst, wenn reduced motion gilt. */
  html.js .hero-scrub .hero-text h1,
  html.js .hero-scrub .hero-lead,
  html.js .hero-scrub .hero-ctas,
  html.js .hero-scrub .hc-inhalt { animation: none; }
}

@media (max-width: 860px) {
  .hero-cue { display: none; }
  .hero-scrub { min-height: 0; }
}

.hg-mac { display: block; }

.hg-mac-deckel {
  display: block;
  border-radius: 12px;
  padding: 7px;
  background: linear-gradient(175deg, #3b454e 0%, #1e262b 55%, #141a1e 100%);
  box-shadow:
    0 30px 70px rgba(9, 34, 37, 0.35),
    0 8px 22px rgba(9, 34, 37, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hg-mac-deckel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.hg-mac-basis {
  display: block;
  height: 9px;
  margin-inline: -16px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(#49535b 0%, #2c343a 45%, #191f24 100%);
  box-shadow: 0 14px 30px rgba(9, 34, 37, 0.3);
}

.hg-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(104px, 13vw, 142px);
  border-radius: 24px;
  padding: 5px;
  background: linear-gradient(200deg, #3d4750 0%, #1a2126 60%, #10161a 100%);
  box-shadow:
    0 26px 60px rgba(9, 34, 37, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hg-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 375 / 780;
  object-fit: cover;
  object-position: top;
  border-radius: 19px;
}

.hg-insel {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 12px;
  border-radius: 999px;
  background: #060d0f;
}

.hg-chip {
  position: absolute;
  left: 14px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(6, 23, 25, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(6, 23, 25, 0.35);
  transition: transform 0.3s, background 0.3s;
}

.hg-chip svg { color: var(--mint-hell); }

.hero-geraete:hover .hg-chip,
.hero-geraete:focus-visible .hg-chip {
  transform: translateY(-3px);
  background: var(--petrol);
}

/* ============================================================
   DREI WERKZEUGE: die drei CSS-Motion-Grafiken nebeneinander.

   Bis Welle 64 war das ein Karussell mit Buehne, Pfeilen und
   Ziehen. Es ist am 24.07.2026 ersatzlos ausgebaut (Jonas: „sieht
   absolut scheisse aus ... ueberleg dir ein neues konzept"). Der
   Grund war nicht Geschmack allein, sondern ein Widerspruch in der
   Sektion selbst: Die Ueberschrift verspricht DREI Werkzeuge,
   sichtbar war eins. Die anderen zwei lagen hinter einer
   Interaktion, die auf einer Marketingseite kaum jemand ausloest,
   und der Platz, den sie belegten, blieb als Leerraum stehen.

   Jetzt: drei gleichrangige Karten nebeneinander, alles sofort
   lesbar, ohne JS, ohne Bedienung. Mobil ein Stapel.
   Regel fuer jede Grafik bleibt: Grundzustand steht komplett ohne
   Animation, Keyframes bewegen nur Akzente.
   ============================================================ */

.bauen {
  background: var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.bauen-kopf {
  max-width: 640px;
  margin-bottom: clamp(36px, 5vh, 60px);
}

.bauen-kopf h2 { font-size: var(--fs-h2); }

.bauen-intro {
  margin-top: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
}
/* Der Kopf bleibt einspaltig und linksbuendig (Welle 64).

   Welle 63 hatte ihn zweispaltig gemacht, damit die Einleitung rechts neben
   der Ueberschrift steht und die Leerflaeche oben rechts schliesst. Mit dem
   Karussell darunter war das richtig gerechnet, sah aber falsch aus: Der Satz
   hing oben rechts allein in der Luft (Jonas: „sieht absolut scheisse aus mit
   dem text oben rechts"). Mit den drei Karten darunter braucht es den Trick
   ohnehin nicht mehr — sie fuellen die Breite, und ein linker Kopf darueber
   ist die ruhige, uebliche Form. */

/* Drei gleichrangige Karten. `auto-fit` waere hier falsch: Es sind genau drei
   Werkzeuge, und die Ueberschrift nennt sie. Eine feste Dreierteilung sagt das
   Gleiche auch dann, wenn spaeter jemand eine Karte ergaenzt — dann faellt auf,
   dass die Ueberschrift nicht mehr stimmt, statt dass das Raster es kaschiert. */
.bau-reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.bau-karte {
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: 20px;
  padding: clamp(16px, 1.8vw, 24px);
  box-shadow: var(--karte-schatten);
  /* Die Karten sind unterschiedlich lang (der Karriereseiten-Text ist der
     laengste). Ohne diese beiden Zeilen stuenden die Grafiken zwar auf einer
     Linie, die Karten haetten aber verschieden hohe Unterkanten. */
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

/* Dezent, weil die Karten nichts verlinken: Der Hover bestaetigt nur, dass man
   die richtige Spalte liest. Keine Klick-Erwartung wecken, die ins Leere geht. */
.bau-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(9, 34, 37, 0.12);
}

.bau-karte h3 {
  margin-top: clamp(16px, 1.6vw, 22px);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.bau-karte p {
  margin-top: 10px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.98rem;
}

/* Gestaffeltes Einblenden beim Scrollen, rein per CSS: Die drei Karten kommen
   nacheinander statt als Block. Nur ein from-Keyframe plus backwards, damit
   nach Ablauf kein transform stehen bleibt (sonst kollidiert es mit dem
   Hover oben — die dokumentierte Falle aus Welle 38). */
@keyframes bau-karte-rein {
  from { opacity: 0; transform: translateY(22px); }
}

html.js .bau-karte {
  animation: bau-karte-rein 0.7s cubic-bezier(0.16, 0.84, 0.3, 1) backwards;
}

html.js .bau-karte:nth-child(2) { animation-delay: 0.09s; }
html.js .bau-karte:nth-child(3) { animation-delay: 0.18s; }
/* Gemeinsame Bühne der Grafiken */
.bau-grafik {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background:
    radial-gradient(320px 200px at 80% 0%, rgba(103, 205, 198, 0.14), transparent 70%),
    linear-gradient(180deg, #f4fafa 0%, #e9f3f3 100%);
  border: 1px solid var(--linie);
  overflow: hidden;
}

/* ---------- Grafik 1: Websites — lebendes Interface ---------- */

.bw-browser {
  position: absolute;
  inset: 12% 10%;
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(9, 34, 37, 0.1);
}

.bw-kopf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16%;
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8%;
}

.bw-kopf i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(14, 94, 99, 0.25);
}

.bw-kopf i:first-child { background: var(--mint); }

.bw-nav {
  position: absolute;
  top: 22%;
  left: 8%;
  width: 34%;
  height: 5%;
  border-radius: 999px;
  background: rgba(14, 94, 99, 0.16);
}

.bw-zeile {
  position: absolute;
  left: 8%;
  height: 7%;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.85;
}

.bw-zeile-1 { top: 34%; width: 56%; }
.bw-zeile-2 { top: 45%; width: 42%; }

@keyframes bw-cta-puls {
  0%, 62%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 94, 99, 0.3); }
  70% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(14, 94, 99, 0.3); }
  82% { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(14, 94, 99, 0); }
}

.bw-cta {
  position: absolute;
  top: 57%;
  left: 8%;
  width: 26%;
  height: 9%;
  border-radius: 999px;
  background: var(--petrol);
  animation: bw-cta-puls 5s ease-in-out infinite;
}

@keyframes bw-karte-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6%); }
}

.bw-karte {
  position: absolute;
  bottom: 8%;
  height: 16%;
  width: 38%;
  border-radius: 6px;
  border: 1px solid var(--linie);
  background: linear-gradient(180deg, #ffffff 0%, #eff6f6 100%);
  animation: bw-karte-lift 5s ease-in-out infinite;
}

.bw-karte-1 { left: 8%; }
.bw-karte-2 { right: 8%; animation-delay: 2.5s; }

/* ---------- Grafik 2: Landingpages — Trichter mit Termin ---------- */

.bf-stufe {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 9%;
  border-radius: 999px;
  border: 1.5px solid rgba(14, 94, 99, 0.4);
  background: rgba(255, 255, 255, 0.75);
}

.bf-stufe-1 { top: 18%; width: 64%; }
.bf-stufe-2 { top: 37%; width: 44%; }
.bf-stufe-3 { top: 56%; width: 26%; }

@keyframes bf-fallen {
  0% { transform: translate(-50%, 0) scale(1); opacity: 0; }
  8% { opacity: 1; }
  76% { opacity: 1; }
  92%, 100% { transform: translate(-50%, 460%) scale(0.55); opacity: 0; }
}

.bf-punkt {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mint);
  transform: translateX(-50%);
  animation: bf-fallen 4.5s cubic-bezier(0.5, 0, 0.7, 1) infinite;
}

.bf-punkt-1 { margin-left: -14%; animation-delay: 0s; }
.bf-punkt-2 { margin-left: 0; animation-delay: 1.5s; }
.bf-punkt-3 { margin-left: 13%; animation-delay: 3s; }

@keyframes bf-chip-puls {
  0%, 78%, 100% { transform: translateX(-50%) scale(1); }
  88% { transform: translateX(-50%) scale(1.09); }
}

.bf-chip {
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--petrol);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(14, 94, 99, 0.35);
  animation: bf-chip-puls 4.5s ease-in-out infinite;
}

.bf-chip svg { color: var(--mint-hell); }

/* ---------- Grafik 3: Karriereseiten — Stellenstapel mit Haken ---------- */

.bj-karte {
  position: absolute;
  left: 50%;
  width: 62%;
  height: 44%;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--linie);
}

.bj-karte-3 { top: 12%; transform: translateX(-50%) scale(0.86); opacity: 0.45; }
.bj-karte-2 { top: 19%; transform: translateX(-50%) scale(0.93); opacity: 0.7; }

@keyframes bj-schweben {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4%); }
}

.bj-karte-1 {
  top: 27%;
  transform: translateX(-50%);
  box-shadow: 0 18px 40px rgba(9, 34, 37, 0.14);
  animation: bj-schweben 5s ease-in-out infinite;
}

.bj-titel {
  position: absolute;
  top: 16%;
  left: 10%;
  width: 52%;
  height: 12%;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.85;
}

.bj-zeile {
  position: absolute;
  left: 10%;
  width: 66%;
  height: 8%;
  border-radius: 999px;
  background: rgba(14, 94, 99, 0.16);
}

.bj-zeile { top: 40%; }
.bj-zeile-kurz { top: 58%; width: 44%; }

@keyframes bj-haken-puls {
  0%, 70%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(70, 184, 177, 0.4); }
  82% { transform: scale(1.16); box-shadow: 0 6px 22px rgba(70, 184, 177, 0.6); }
}

.bj-haken {
  position: absolute;
  right: -7%;
  top: -12%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mint);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(70, 184, 177, 0.4);
  animation: bj-haken-puls 5s ease-in-out infinite;
}

@media (max-width: 860px) {
  /* Drei Karten werden mobil ein Stapel. Eine Karte pro Zeile, weil zwei
     nebeneinander die Grafiken auf unter 160 px druecken wuerden und die
     Details darin dann nicht mehr lesbar sind. */
  .bau-reihe { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Aktiver Dropdown-Eintrag (diese Seite) */
.dd-zeile[aria-current="page"] {
  background: rgba(14, 94, 99, 0.1);
  color: var(--petrol);
  font-weight: 600;
}

.mobilnav-neben a[aria-current="page"] {
  color: var(--petrol) !important;
  font-weight: 700 !important;
}

/* ============================================================
   WARUM: Vorher/Nachher-Spannung im .posten-Muster
   ============================================================ */

.warum {
  background: var(--bg);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.warum-kopf { margin-bottom: clamp(32px, 5vh, 52px); }

.warum-kopf h2 {
  font-size: var(--fs-h2);
  max-width: 20ch;
}

.spannung {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}

/* Vorher: die austauschbare Seite — bewusst blass, gestrichelt, entsättigt */
.spannung .posten-fremd {
  border: 1.5px dashed rgba(61, 84, 87, 0.35);
  background: transparent;
  box-shadow: none;
}

.spannung .posten-fremd .posten-art { color: var(--ink-leise); }

.spannung .posten-fremd .spann-satz { color: var(--ink-soft); }

/* Nachher: der Motor — satter Petrol-Slab mit Schimmer-Kante (aus main.css) */
.spannung .posten-zeus .spann-satz { color: rgba(255, 255, 255, 0.94); }

.spann-satz {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

/* Der Pfeil zwischen den Slabs: vorher wird nachher */
.spann-pfeil {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--linie);
  box-shadow: var(--karte-schatten);
  display: grid;
  place-items: center;
}

.spann-pfeil::before {
  content: '→';
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--petrol);
}

.warum-zitat {
  margin-top: clamp(32px, 5vh, 52px);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 56ch;
}

.warum-zitat::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 6s linear infinite;
  margin-bottom: 22px;
}

/* ---------- Beweis: der eine dunkle Voll-Bleed-Akt ---------- */

.beweis-akt {
  position: relative;
  background: var(--bg-deep);
  color: var(--dunkel-ink);
  padding-block: clamp(60px, 8.5vh, 108px);
  overflow: clip;
}

/* Cursor-Glow (Welle 51): weicher Mint-Schein folgt dem Zeiger auf der
   dunklen Bühne, statt der grid-fx-Kästchen (für [data-spot] in main.js
   gesperrt). JS setzt --mx/--my (data-spot-Zweig). Liegt über der Aurora
   (z-orb), unter dem Inhalt (.sl-wrap ist z-inhalt). */
.beweis-akt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(560px 560px at var(--mx, 50%) var(--my, 50%),
    rgba(103, 205, 198, 0.12), transparent 66%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.beweis-akt:hover::after { opacity: 1; }

.beweis-aurora {
  position: absolute;
  inset: -10% -20%;
  z-index: var(--z-orb);
  background:
    radial-gradient(820px 460px at 20% 10%, rgba(20, 120, 124, 0.32), transparent 65%),
    radial-gradient(700px 400px at 85% 85%, rgba(103, 205, 198, 0.14), transparent 60%);
  filter: blur(10px);
  animation: orb-drift 28s ease-in-out infinite alternate;
}

/* ---------- Schaufenster live: echte Kundenprojekte im Gerät ---------- */

.sl-wrap {
  position: relative;
  z-index: var(--z-inhalt);
}

/* Intro-Choreografie: Der Kopf steht anfangs allein in der Bühnenmitte,
   fährt beim Sichtbarwerden (.ist-dran per IO in webdesign.js) nach oben,
   dann erscheinen die Geräte — der Deckel klappt auf, die Schirme gehen an.
   Nur unter html.js; bei ?static/reduced motion setzt webdesign.js die
   Klasse sofort und .ist-static (animation:none) zeigt den Endzustand. */
html.js .beweis-akt:not(.ist-dran) .sl-kopf {
  transform: translateY(clamp(140px, 26vh, 300px));
}

html.js .beweis-akt:not(.ist-dran) .sl-tabs,
html.js .beweis-akt:not(.ist-dran) .sl-buehne,
html.js .beweis-akt:not(.ist-dran) .sl-fuss {
  opacity: 0;
}

.sl-kopf { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
.sl-buehne { transition: opacity 0.7s ease 0.65s; }
.sl-tabs { transition: opacity 0.6s ease 0.8s; }
.sl-fuss { transition: opacity 0.6s ease 1.8s; }

.sl-mac { perspective: 1900px; }

@keyframes sl-aufklappen {
  from { transform: rotateX(-70deg); }
}

@keyframes sl-schirm-an {
  from { filter: brightness(0.1) saturate(0.4); }
}

html.js .beweis-akt.ist-dran .sl-mac-deckel {
  transform-origin: 50% 100%;
  animation: sl-aufklappen 1.25s cubic-bezier(0.16, 0.84, 0.3, 1) 0.8s backwards;
}

html.js .beweis-akt.ist-dran .sl-schirm-desktop {
  animation: sl-schirm-an 0.9s ease-out 1.15s backwards;
}

html.js .beweis-akt.ist-dran .sl-phone .sl-schirm {
  animation: sl-schirm-an 0.7s ease-out 2s backwards;
}

@media (prefers-reduced-motion: reduce) {
  html.js .beweis-akt:not(.ist-dran) .sl-kopf { transform: none; }
  html.js .beweis-akt:not(.ist-dran) .sl-tabs,
  html.js .beweis-akt:not(.ist-dran) .sl-buehne,
  html.js .beweis-akt:not(.ist-dran) .sl-fuss { opacity: 1; }
}

.sl-kopf {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.sl-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-hell);
  margin-bottom: 14px;
}

.sl-kopf h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  color: #ffffff;
}

.sl-kopf h2 em {
  font-style: normal;
  color: var(--mint-hell);
}

.sl-intro {
  margin-top: 16px;
  color: rgba(233, 244, 243, 0.78);
  line-height: 1.65;
}

/* Tabs: minimalistischer Text-Umschalter, aktiver Name mit
   Schimmer-Linie (Duktus der Seite: --shimmer + schimmer-lauf) */
.sl-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(22px, 4vw, 44px);
  margin-top: 30px;
}

.sl-tab {
  position: relative;
  padding: 6px 2px 11px;
  border: 0;
  background: none;
  color: rgba(233, 244, 243, 0.55);
  font-family: inherit;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.35s;
}

.sl-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 200% 100%;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}

.sl-tab:hover { color: rgba(233, 244, 243, 0.85); }

.sl-tab[aria-selected="true"] { color: #ffffff; }

.sl-tab[aria-selected="true"]::after {
  transform: scaleX(1);
  opacity: 1;
  animation: schimmer-lauf 5s linear infinite;
}

/* Bühne: MacBook + iPhone als Ensemble — bekommt den Raum, den die
   gestrichenen Zeilen freigeben */
.sl-buehne {
  position: relative;
  max-width: 1120px;
  margin: 54px auto 0;
  padding-right: clamp(0px, 14vw, 150px);
}

.sl-mac { position: relative; }

.sl-mac-deckel {
  border-radius: clamp(12px, 1.6vw, 18px);
  padding: clamp(8px, 1.1vw, 12px);
  background: linear-gradient(175deg, #37414a 0%, #1c2429 55%, #12181c 100%);
  box-shadow:
    0 42px 110px rgba(3, 14, 16, 0.65),
    0 10px 32px rgba(3, 14, 16, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.sl-mac-basis {
  height: clamp(9px, 1.2vw, 13px);
  margin-inline: clamp(-18px, -2vw, -26px);
  border-radius: 0 0 clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px);
  background: linear-gradient(#454f57 0%, #2a3238 45%, #171d21 100%);
  box-shadow: 0 18px 44px rgba(3, 14, 16, 0.5);
  position: relative;
}

.sl-mac-basis::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(90px, 12vw, 150px);
  height: clamp(4px, 0.55vw, 6px);
  border-radius: 0 0 10px 10px;
  background: rgba(6, 23, 25, 0.55);
}

/* Schirm: iframe in Originalbreite, per JS auf Containermaß skaliert */
.sl-schirm {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep-2);
  border-radius: clamp(6px, 0.9vw, 10px);
  aspect-ratio: 1280 / 800;
}

.sl-schirm iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform-origin: 0 0;
  background: #ffffff;
}

.sl-schirm-mobil iframe { width: 375px; height: 812px; }

/* Poster liegt über dem iframe, bis die Demo geladen hat */
.sl-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 2;
  transition: opacity 0.6s ease;
}

.ist-live .sl-poster { opacity: 0; pointer-events: none; }

/* Glanz-Reflex über dem MacBook-Schirm */
.sl-glanz {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 42%);
  opacity: 0.8;
  transition: opacity 0.5s;
}

.sl-schirm:hover .sl-glanz,
.ist-live .sl-glanz { opacity: 0.25; }

/* iPhone: überlappt die rechte MacBook-Kante, schwebt leicht */
.sl-phone {
  position: absolute;
  right: 0;
  bottom: clamp(-26px, -3vw, -38px);
  width: clamp(150px, 21vw, 218px);
  z-index: 4;
  border-radius: clamp(28px, 4vw, 40px);
  padding: clamp(5px, 0.7vw, 8px);
  background: linear-gradient(200deg, #3d4750 0%, #1a2126 60%, #10161a 100%);
  box-shadow:
    0 34px 80px rgba(3, 14, 16, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  animation: sl-schweben 7s ease-in-out infinite alternate;
}

@keyframes sl-schweben {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .sl-phone { animation: none; }
}

.ist-static .sl-phone { animation: none; }

.sl-phone .sl-schirm {
  aspect-ratio: 375 / 812;
  border-radius: clamp(23px, 3.4vw, 33px);
}

/* Dynamic-Island-Pille */
.sl-insel {
  position: absolute;
  top: clamp(7px, 1vw, 10px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(44px, 6.4vw, 66px);
  height: clamp(13px, 1.9vw, 20px);
  border-radius: 999px;
  background: #060d0f;
  z-index: 3;
  pointer-events: none;
}

/* Mobil-Zünder: erst laden, wenn der Besucher es will */
.sl-lade {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(103, 205, 198, 0.45);
  background: rgba(6, 23, 25, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(3, 14, 16, 0.6);
}

/* Fuß: EINE ruhige Zeile — Kennzahl-Chip plus kleiner Demo-Hinweis */
.sl-fuss {
  margin-top: clamp(44px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  text-align: center;
}

.sl-fakt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(10, 33, 36, 0.6);
  border: 1px solid rgba(103, 205, 198, 0.25);
  color: rgba(233, 244, 243, 0.9);
  font-size: 0.95rem;
}

.sl-fakt svg { color: var(--mint-hell); flex-shrink: 0; }
.sl-fakt strong { color: #ffffff; }

.sl-fakt a {
  color: var(--mint-hell);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(103, 205, 198, 0.45);
  transition: border-color 0.3s;
}

.sl-fakt a:hover { border-color: var(--mint-hell); }

.sl-hinweis {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(233, 244, 243, 0.55);
}

/* Schmale Viewports: das iPhone wird zur Hauptbühne */
@media (max-width: 700px) {
  .sl-buehne { padding-right: 0; }
  .sl-mac { display: none; }
  .sl-phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(78vw, 300px);
    margin-inline: auto;
    animation: none;
  }
}

/* ---------- Brücke zu den Motoren: getönte Bühne, zwei große Zeilen ---------- */

.bruecke {
  background: var(--bg-tint);
  padding-block: clamp(48px, 7vh, 84px);
}

.bruecke-intro {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.motor-links {
  display: flex;
  flex-direction: column;
}

.motor-links .motor-link {
  margin-top: 0;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(18px, 2.6vh, 26px);
  border-bottom: 1px solid var(--linie);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.3s ease;
}

.motor-links .motor-link svg { width: 20px; height: 20px; flex: none; }

/* Hover: Farbe kippt petrol, der Pfeil gleitet (transform, aus main.css) */
.motor-links .motor-link:hover { color: var(--petrol); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .spannung { grid-template-columns: minmax(0, 1fr); }

  /* Pfeil zeigt jetzt nach unten: vorher oben, nachher darunter */
  .spann-pfeil::before { content: '↓'; }
}

@media (max-width: 720px) {
  .hero.unterheld { padding-top: 108px; }
  .unterheld .hero-ctas .btn-gross { width: 100%; justify-content: center; }
  /* `.unterheld` noetig, seit die 1024er-Regel oben zwei Klassen hat: Ohne das
     Praefix verliert diese Regel trotz spaeterer Position die Kaskade, und das
     Ensemble bliebe auf min(80%, 640px) statt auf den schmalen 380 px. */
  .unterheld .hero-geraete { width: min(92%, 380px); margin-inline: auto; }
}