/* ZYBR Zielbild: Hero der Startseite (Titel, Angebot, Bewertung, Zitate, App-Vorschau). Lädt nur auf der Startseite direkt nach
   r3-basis.css (data-nur-startseite), damit die Reihenfolge zu den übrigen Regeln gleich bleibt. */
/* ---------- Hero aus 03, Titel größer, rechts Beweis, Vorschau weiter unten (Punkte 2 bis 5) ---------- */
/* Abstände oben und zur Vorschau aus den Tokens --hero-oben und --hero-vorschau-abstand */
.hero{padding-top:var(--hero-oben)}
.hero .oben{display:grid;gap:clamp(2.25rem,1.5rem + 2.5vi,3.5rem)}
@media (min-width:64rem){.hero .oben{grid-template-columns:minmax(0,8.4fr) minmax(0,4.6fr);align-items:end;column-gap:clamp(2.5rem,1.25rem + 3.4vi,5.25rem)}}
.hero .copy{text-align:left;max-width:52rem;margin:0}
.hero .z-seitentitel span{display:inline}
.band.hero .lead{margin:1.4rem 0 0}
.hero .cta{gap:.75rem 1.25rem}
.hero .r2-himmel{opacity:1;-webkit-mask:radial-gradient(70% 58% at 80% 18%,#000 0%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.22) 78%,rgba(0,0,0,.08) 100%);mask:radial-gradient(70% 58% at 80% 18%,#000 0%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.22) 78%,rgba(0,0,0,.08) 100%)}
.beweis{position:relative;display:grid;gap:.9rem;max-width:30rem}
@media (min-width:64rem){.beweis{justify-self:end;width:100%;margin-bottom:.35rem}}
.beweis .wert{display:flex;align-items:center;gap:1rem}
.beweis .zahl{font:800 clamp(2.75rem,2.2rem + 1.8vi,3.75rem)/1 var(--head);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.beweis .wert p{margin:0;font-size:var(--text-fein);line-height:1.4;color:var(--mute)}
.beweis .wert p b{display:block;color:var(--ink);font-weight:600;font-size:var(--text-klein)}
/* Plattformen: zwei pro Zeile, Originallogo in Farbe, alle gleich hoch, darunter gleicher Satzbau je Plattform */
.plattformen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin:0;padding:0;list-style:none}
.plattformen a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;height:100%;min-height:var(--hoehe-s);box-sizing:border-box;padding:.3rem .75rem;font-size:var(--text-mini);line-height:1.3;color:var(--mute)}
.plattformen a:hover{color:var(--ink)}
/* Kacheln oben so groß wie die Nachweise unten (Robin 14:54: alles symmetrisch), Logos auf dieselbe Höhe */
.plattformen .logo-zeile img,.plattformen .logo-zeile svg{display:block;height:.85rem;width:auto}
.plattformen b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.logo-zeile{display:flex;align-items:center;gap:.4rem;height:18px;color:var(--ink);font:600 var(--text-mini)/1 var(--font);white-space:nowrap}
.logo-zeile img,.logo-zeile svg{display:block;height:18px;width:auto}
/* Kundenzitate (Punkte 13 und 14): flacher, Name und Logo unten in einer Zeile, Logo fest rechts */
/* die Karten dahinter genau so groß wie die vordere, nur leicht nach unten rechts versetzt */
.zitat-stapel{position:relative;display:grid;margin:0 .7rem .9rem 0}
.zitat-stapel::before,.zitat-stapel::after{content:"";position:absolute;inset:0;z-index:0;border-radius:var(--radius-m);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),rgb(from rgb(12 10 22) calc(r * var(--hell)) calc(g * var(--hell)) calc(b * var(--hell)) / .5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.zitat-stapel::before{transform:translate3d(.35rem,.45rem,0);opacity:.75}
.zitat-stapel::after{transform:translate3d(.7rem,.9rem,0);opacity:.45}
.zitat{grid-area:1/1;position:relative;z-index:1;display:flex;flex-direction:column;margin:0;padding:.7rem 1.4rem .55rem;border-radius:var(--radius-m);
  /* bewusst dunkler als die Kacheln, mit Verlauf nach unten und Schatten: Trenner zwischen Bewertungen und Nachweisen (Robin 14:54) */
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 60%,var(--zitat-unten)),var(--zitat-grund);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16),0 24px 50px -26px rgba(0,0,0,.95);transition:opacity .6s var(--ease),transform .6s var(--ease);-webkit-backdrop-filter:var(--blur-karte);backdrop-filter:var(--blur-karte)}
.zitat[hidden]{display:flex;opacity:0;transform:translate3d(0,.4rem,0);pointer-events:none;visibility:hidden}
.zitat blockquote{margin:0 0 .4rem;font:400 var(--text-xs)/1.5 var(--font);color:var(--mute);text-wrap:pretty}
.zitat figcaption{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;min-height:1.6rem;font-size:var(--text-xs);color:var(--quiet)}
.zitat figcaption b{font-weight:600;color:var(--mute)}
.zitat-wer{min-width:0}
.zitat .quelle{display:inline-flex;align-items:center;min-height:1.6rem;padding:0 .15rem;border-radius:.35rem;opacity:.9;transition:opacity .25s var(--ease)}
.zitat .quelle img,.zitat .quelle svg{display:block;height:13px;width:auto}
.zitat .quelle:hover{opacity:1}
/* von Hand weiterblättern, nur vorwärts, Pfeil rechts auf der Kartenkante */
.zitat-stapel{cursor:pointer;touch-action:pan-y}
/* Pfeile: zentrale Komponente z-rundknopf wie im Kunden-Karussell, hier nur die Lage auf der Kartenkante */
.zitat-stapel .zitat-pfeil{position:absolute;z-index:2;top:50%;right:calc(var(--hoehe-xs) / -2);margin-top:calc(var(--hoehe-xs) / -2)}
.hero .vorschau{max-width:none;margin:var(--hero-vorschau-abstand) 0 0;padding-bottom:clamp(3.5rem,2.5rem + 4vi,6rem);scroll-margin-top:1.5rem}
.hero .vorschau::before{left:-4%;right:30%;top:-6%;height:55%}
/* Rand der Glaskarte dreimal so breit wie vorher (6 auf 18 px), oben und unten derselbe Abstand */
.hero .vorschau>.z-karte{padding:18px}
/* links, rechts und unten je 64 px um die Vorschau; unten sitzen Ansichtslinks und Fortschrittslinie (34 px) mittig darin */
@media (min-width:64rem){.hero .vorschau>.z-karte{padding-inline:4rem;padding-bottom:18px}}
@media not all and (min-width:40rem){.hero .vorschau>.z-karte{padding:12px}}
[data-zybr-app-vorschau]:empty{display:grid;place-items:center;aspect-ratio:16/9;border-radius:calc(var(--r) - .45rem);background:linear-gradient(180deg,var(--platzhalter-a),var(--platzhalter-b))}
/* Platz der App ab Laptopbreite fest freihalten (Seitenverhältnis der fertigen Vorschau), sonst springt sie beim Aufbau über der Falz */
@media (min-width:64rem){.hero [data-zybr-app-vorschau]{aspect-ratio:1152/820}}

/* Hero: genau ein Hauptknopf (Punkt 21), darunter Vertrauen */
.hero .vertrauen{margin-top:var(--hero-vertrauen-abstand)}
/* Die Zeile schreibt r3-effekte.js aus der Angebotsfassung (eine Quelle); bis dahin hält der Platz, damit nichts springt */
.hero .vertrauen:empty{display:block;min-height:1.2rem}
@media not all and (min-width:40rem){.hero .vertrauen:empty{min-height:2.8rem}}

/* Himmel wie Variante 08, überall gleich hell, keine Abdunklung links */
.hero .r2-himmel.r3-himmel-sterne{-webkit-mask:none;mask:none}
.hero .r2-himmel.r3-himmel-bilder{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.7) 40%,#000 62%),linear-gradient(180deg,#000 75%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.7) 40%,#000 62%),linear-gradient(180deg,#000 75%,transparent);mask-composite:intersect}

/* Hero: Titel höchstens drei Zeilen, rechte Spalte mit Bewertung und Zitatkarte oben bündig mit der Dachzeile,
   neben Titel und Unterzeile, gleichmäßig verteilt. Titelgröße an die linke Spalte gebunden. Handy: 2rem, ebenfalls drei Zeilen.
   Das h1 fasst Dachzeile und Titel nur für die Suche zusammen (display: contents), beide behalten ihre Boxen wie als p und h1 */
.hero .hero-h1{display:contents}
.hero .hero-angebot{display:none}
/* Angebot als Glaskarte mit Glow unten und dunkler Innenkarte wie die übrigen Karten (Robin 02.10. 13:55, 14:17 zurück auf diese Fassung),
   nicht klickbar, so hoch wie Knopf plus Häkchen, Pfeil in Strichstärke der Schrift */
.hero .hero-angebot{padding:var(--glas-rand)}
.hero .hero-angebot__innen{display:flex;align-items:center;gap:1rem;height:100%;margin:0;padding:1rem 1.5rem;
  font:600 clamp(1.125rem,1rem + .45vi,1.375rem)/1.25 var(--head);letter-spacing:-.01em;color:var(--ink)}
.hero-angebot__pfeil{flex:none;width:1em;height:1em;color:var(--k,#C4B5FD);animation:angebot-pfeil 1.8s var(--ease) infinite}
@keyframes angebot-pfeil{0%,60%,100%{transform:none}30%{transform:translateX(-4px)}}
@media (prefers-reduced-motion:reduce){.hero-angebot__pfeil{animation:none}}
/* Dachzeile wie die Kapitelzeile der Abschnitte, Strich in der Abschnittsfarbe */
.hero .z-dach{font:700 calc(var(--text-mini) + 2px)/1 var(--font);letter-spacing:.01em;color:var(--mute)}
.hero .z-dach>i{background:var(--c);box-shadow:0 0 6px color-mix(in srgb,var(--c) var(--folio-schein),transparent)}
@media (min-width:64rem){
  /* linke Spalte so breit wie der Titel, rechte rund 10 % schmaler als am 01.10. (Robin 02.10. 17:01) */
  .hero .oben{grid-template-columns:minmax(0,7.75fr) minmax(0,4.45fr);grid-template-rows:auto auto auto 1fr;align-items:start;row-gap:0}
  .hero .copy{display:contents}
  .hero .z-dach,.hero .z-seitentitel,.band.hero .copy>.lead,.hero .copy>.knopf-block{grid-column:1}
  /* Unterzeile so breit wie der Titel, damit sie drei Zeilen bleibt */
  .band.hero .copy>.lead{margin-top:clamp(1.25rem,1rem + .8vi,1.75rem);max-width:none}
  /* Angebot unter dem Bewertungsblock auf Höhe des Hauptknopfs, gleich hoch (Robin 02.10. 13:10) */
  .hero .hero-angebot{display:block;grid-column:2;grid-row:4;align-self:stretch;justify-self:stretch;margin-top:3.5rem}
  .hero .z-dach{align-self:center}
  .hero .beweis{grid-column:2;grid-row:1/span 3;align-self:end;display:flex;flex-direction:column;justify-content:flex-end;gap:1rem;margin:0}
}
/* Abstand Unterzeile bis Knopf doppelt */
.hero .knopf-block{margin-top:var(--hero-knopf-abstand)}

/* Plattformen im Hero (Punkt 26): Schnitt mit Stern und Anzahl statt Satz */
.p-wert{display:inline-flex;align-items:center;gap:.3rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-wert b{font-weight:700;color:var(--ink)}
.p-wert small{margin-left:.2rem;font-size:var(--text-xs);color:var(--quiet)}

/* Titel als Stapel (Robin 20:46, Entwurf 5; 23:06 ohne Punkte, alle drei gleich groß in der Größe der längsten Zeile),
   „Jetzt spielt alles zusammen“ läuft senkrecht an der rechten Kante, die Bewertung bleibt rechts daneben.
   23:48 Robins Werte: Stapel stapel/6,2 bei 0,04rem Laufweite, senkrechte Zeile -0,04em, Abstand 1rem; senkrechte Zeile so hoch wie der Stapel (Trennwand).
   Messwerte (01.10.2026, Inter Tight 800, Versalien): „ANALYSEN“ 5,2966 em breit, „KI GANZHEITLICH GEDACHT“ 13,056 em lang (Inter 700).
   31.64: senkrecht ist die Zeile 13,61 em lang, die sichtbaren Buchstaben aber 3 % kürzer (Foto 00:10); beide mittig ausgerichtet, sichtbar gleich hoch wie der Stapel.
   00:07 Robin: die drei Wörter so groß, dass ihre sichtbare Höhe der Trennwand gleicht. Der Stapel wird mit text-box auf Versalhöhe oben
   und Grundlinie unten beschnitten, sichtbare Höhe = (2 × 0,86 + 0,74 Versalhöhe) em = 2,46 em; 5.911 = 2,46 / 0,4162.
   0.9328 = 5,2966 / 5,911 + 1,2 / 32,7 (seit 31,64 rund 0,1 % mehr, vernachlässigt) (Stapelbreite plus Zeilendicke je stapel): der Titel füllt genau die linke Spalte, die Unterzeile ist so breit wie der Titel.
   Neuer Text oder neue Laufweite braucht neue Faktoren. */
.hero .z-seitentitel{container-type:inline-size;max-width:none;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
/* --stapel am Titel, die senkrechte Zeile braucht denselben Wert. cqw statt cqi: in der senkrechten Zeile zeigt die Inline-Achse nach unten,
   cqi fiel dort auf die Fensterhöhe zurück (gemessen 23:10, Schrift 23,7 statt 21 px) */
.hero .z-seitentitel{--stapel:100cqw}
.hero h1 .h1-stapel{display:block;text-box:trim-both cap alphabetic}
.hero h1 .h1-stapel .h1-zeile{display:block;width:fit-content;white-space:nowrap;font-weight:800;letter-spacing:.04rem;line-height:.86;text-transform:uppercase}
.hero h1 .h1-stapel .h1-zeile{font-size:calc(var(--stapel) / 5.911)}
/* links vom Stapel (Robin 02.10. 00:33: KI ganzheitlich gedacht zuerst, die drei Wörter rechts daneben) */
.hero h1 .h1-senkrecht{order:-1;display:block;width:fit-content;font:700 clamp(.875rem,.7rem + .5vi,1.25rem)/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase}
@media (min-width:64rem){
  .hero .z-seitentitel{flex-direction:row;align-items:center;gap:1rem}
  .hero .z-seitentitel{--stapel:calc((100cqw - 1rem) / .9328)}
  .hero h1 .h1-senkrecht{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:-.06em;white-space:nowrap;font-size:calc(var(--stapel) / 37.2);position:relative;top:-.12em}
}

@media (width < 36rem){
  .hero{--hero-mobile-gap:20px;--hero-mobile-side-font:calc((100vw - 2 * (clamp(1.25rem,.9rem + 1.6vw,3rem) - 2px) - 1.125rem) / 28 - .25px)}
  .hero .z-dach{margin-bottom:var(--hero-mobile-gap);font-size:var(--hero-mobile-side-font);flex-wrap:nowrap}
  .hero .z-dach>span{text-box:trim-both cap alphabetic}
  .hero .z-seitentitel{--stapel:calc(100cqw - 1.125rem);display:flex;flex-direction:row;align-items:flex-start;gap:var(--hero-mobile-gap)}
  .hero h1 .h1-stapel .h1-zeile{font-size:calc(var(--stapel) / 5.55 + 2px);letter-spacing:-.025em;line-height:1.06}
  .hero h1 .h1-senkrecht{flex:none;font-family:var(--head);font-size:var(--hero-mobile-side-font);letter-spacing:-.025em;word-spacing:.18em;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);text-box:trim-both cap alphabetic;padding:0;margin:0}
  .band.hero .lead{margin-top:45px;font-size:calc(var(--unterzeile-hero) - 1px);line-height:1.5}
}
/* Schrift der App-Vorschau (zybr-app-vorschau.js, FONT_CSS) schon im Stylesheet: zur Laufzeit eingefügt machte sie die Stile der ganzen
   Seite ungültig, das Einhängen der Vorschau kostete am Handy ein Layout über rund 4.900 Objekte (17.10.2026). Geladen wird sie erst, wenn die Vorschau sie nutzt */
@font-face{font-family:"ZAV Public Sans";src:url(/_bausteine/schriften/zav-public-sans.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}