/* Startseite, Marke «Klartext» (5. Oktober 2026, Entscheid brand/07-umsetzung/entscheid.md, Vertrag docs/design-system-2026-10-05-klartext.md).
   1. Film-Hero: Fläche und Abtönung (.r2-hero, .r2-tint) sind Medienebene und bleiben; darüber die Markenebene in Newsreader und Schibsted:
      Titel, Lead, ein Primärknopf in Holz, Filmknopf mit Kennzeichnung, Ablaufleiste «Kennenlernen, Gespräch, Offerte», Pausenknopf.
      Auftritt einmal beim Laden (nur CSS, Endzustand ist der Grundzustand), nie beim Scrollen; bei Pause und Reduktion steht alles (Stopp-Block in site.css).
   2. Unter dem Hero: Einstiege als Zeilen, fiktive Betriebe, Ablauf, Ansprechpartner, Fragen. Nur Tokens und Komponenten aus site.css. */

/* ---------------------------------------------------------------- 1. Film-Hero: Fläche und Abtönung (Medienebene, unverändert) */
.clean-home{background:var(--papier);color:var(--tinte)}
.clean-home .r2-hero{height:auto;min-height:max(640px,100svh);max-height:none;background:var(--nacht);display:grid;grid-template-rows:1fr auto;padding:0 var(--raster-rand);color:var(--papier)}
.clean-home .r2-hero .cinema-backdrop>img{animation-duration:40s}
.clean-home .r2-tint{background:linear-gradient(180deg,#0e1a2466 0%,#0e1a2400 30%,#0e1a2433 55%,#0e1a24e6 100%),linear-gradient(90deg,#0e1a24a6 0%,#0e1a2400 70%)}

/* Markenebene: Text unten links im Raster der Kopfzeile, darunter der Fuss mit Ablaufleiste */
.r2-hero-copy,.r2-hero-foot{position:relative;z-index:1;width:100%;max-width:var(--inhalt-max);margin:0 auto}
.r2-hero-copy{align-self:end;padding:calc(var(--header-h) + var(--space-8)) 0 var(--space-6)}
/* Titel: Newsreader 500, höchstens 80 px (bei 88 px fiel «Anfrage» über dem hellen Fenster im Film unter 3:1, pruefung/hero-kontrast.md im Markenpaket). */
.clean-home .r2-hero .r2-hero-title{margin:0;max-width:8.4em;color:var(--papier);font:var(--fw-display) min(var(--fs-display),80px)/var(--lh-display) var(--serif);letter-spacing:var(--ls-display);font-optical-sizing:auto;text-wrap:balance}
.r2-hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.r2-hero-title .w>span{display:inline-block}
.clean-home .r2-hero .r2-hero-lead{margin:var(--space-5) 0 var(--space-6);max-width:30em;color:var(--papier);font:var(--fw-lead) var(--fs-lead)/var(--lh-lead) var(--sans);letter-spacing:var(--ls-lead)}
/* Ab 801 px steht jeder Satz des Leads auf einer eigenen Zeile. */
@media (min-width:801px){.r2-hero-lead>span{display:block}}
.r2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-7)}
.r2-hero .filmknopf,.r2-hero .filmknopf .fk-unter{color:var(--papier)}
.r2-hero .filmknopf .fk-titel{font-weight:600}
/* Fuss: Haarlinie, Ablaufleiste links, «Beispiele ausprobieren» und Pausenknopf rechts */
.r2-hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5) var(--space-7);padding:20px 0 24px}
.r2-hero-foot::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:color-mix(in srgb,var(--papier) 24%,transparent);transform-origin:left center}
.r2-hero-foot .ablauf{flex:0 1 520px;min-width:0}
.r2-hero .ablauf .ab-zustand{color:var(--papier)}
.r2-hero-foot-links{display:flex;align-items:center;gap:var(--space-2) var(--space-6);flex-shrink:0}
.r2-hero .r2-foot-link{color:var(--papier)}
.r2-hero .r2-motion-control{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;color:var(--papier);font:500 16px/1.2 var(--sans);white-space:nowrap;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:transparent;transition:text-decoration-color var(--dauer-kurz) linear}
.r2-hero .r2-motion-control::before{content:'';flex:none;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.r2-hero .r2-motion-control[aria-pressed=true]::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.r2-hero .r2-motion-control:hover{text-decoration-color:currentColor}

/* Auftritt beim Laden (Choreografie aus anwendungen/web/film-hero.html): Wörter steigen gestaffelt, dann Lead, Knöpfe, Linie, Quadrate, Fuss. */
@keyframes hm-steigen{from{transform:translateY(108%)}}
@keyframes hm-auf{from{opacity:0;transform:translateY(10px)}}
@keyframes hm-linie{from{transform:scaleX(0)}}
@keyframes hm-quadrat{from{opacity:0;transform:scale(.2)}}
html.js .r2-hero-title .w>span{animation:hm-steigen var(--dauer-auftritt) var(--kurve-praezise) 120ms both}
html.js .r2-hero-title .w:nth-child(2)>span{animation-delay:180ms}
html.js .r2-hero-title .w:nth-child(3)>span{animation-delay:240ms}
html.js .r2-hero-title .w:nth-child(4)>span{animation-delay:300ms}
html.js .r2-hero-title .w:nth-child(5)>span{animation-delay:360ms}
html.js .r2-hero-title .w:nth-child(n+6)>span{animation-delay:420ms}
html.js .r2-hero-lead{animation:hm-auf var(--dauer-auftritt) var(--kurve-praezise) 420ms both}
html.js .r2-actions{animation:hm-auf var(--dauer-auftritt) var(--kurve-praezise) 540ms both}
html.js .r2-hero-foot::before{animation:hm-linie var(--dauer-linie) var(--kurve-linie) 660ms both}
html.js .r2-hero-foot .ablauf>li::before{animation:hm-quadrat var(--dauer-mittel) var(--kurve-praezise) 820ms both}
html.js .r2-hero-foot .ablauf>li:nth-child(2)::before{animation-delay:880ms}
html.js .r2-hero-foot .ablauf>li:nth-child(3)::before{animation-delay:940ms}
html.js .r2-hero-foot .ablauf>li::after{transform-origin:left center;animation:hm-linie var(--dauer-linie) var(--kurve-linie) 860ms both}
html.js .r2-hero-foot .ablauf>li:nth-child(2)::after{animation-delay:940ms}
html.js .r2-hero-foot :is(.ab-name,.ab-zustand,.r2-hero-foot-links){animation:hm-auf var(--dauer-auftritt) var(--kurve-praezise) 900ms both}

/* ---------------------------------------------------------------- 2. Unter dem Hero */
/* Einstiege: Produktkette, dann Zeilen mit Umfang, Abnahme und Richtpreis (wie anwendungen/web/website-desktop.html) */
.hm-kette{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-4);margin:0 0 var(--space-8)}
.hm-kette-title{grid-column:1/span 3;margin:0;padding-top:14px;font:600 var(--fs-text-klein)/1.4 var(--sans);letter-spacing:0}
.hm-kette .kette{grid-column:4/-1}
.home-offer-list{border-top:var(--linie-kontur) solid var(--text-1)}
.home-offer-list>article{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-5);padding:var(--space-6) 0 var(--space-7);border-bottom:1px solid var(--linie-ton)}
.home-offer-list>article::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:var(--linie-betont);background:var(--q-voll);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-linie) var(--kurve-linie)}
.home-offer-list>article:is(:hover,:focus-within)::after{transform:scaleX(1)}
.hm-offer-head{grid-column:1/span 3;display:grid;gap:10px;align-content:start}
.hm-offer-head .kicker{margin:0}
.hm-offer-name{margin:0;font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3)}
.hm-offer-fit{margin:0;max-width:22em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}
.hm-offer-col{display:grid;gap:12px;align-content:start}
.hm-offer-col.is-scope{grid-column:4/span 3}
.hm-offer-col.is-check{grid-column:7/span 3}
.hm-offer-col h4{margin:0;padding-bottom:10px;border-bottom:1px solid var(--linie-ton);font:var(--fw-status) var(--fs-status)/var(--lh-status) var(--sans);color:var(--text-2)}
.hm-offer-col p{margin:0;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans)}
.hm-offer-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hm-offer-items li{font:400 var(--fs-text-klein)/1.45 var(--sans)}
.hm-offer-side{grid-column:10/span 3;display:grid;justify-items:end;align-content:start;gap:var(--space-2);text-align:right}
.hm-price{margin:0;display:grid;justify-items:inherit;gap:2px}
.hm-price span{font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--text-2)}
.hm-price .preis{font:500 clamp(32px, 26.4px + 1.43vw, 44px)/1.05 var(--serif);letter-spacing:-.02em;font-optical-sizing:auto;font-variant-numeric:lining-nums;white-space:nowrap;color:var(--text-1)}
.home-offer-list>.home-offer-care{padding-top:var(--space-7)}
.hm-offers-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3) var(--space-7);margin-top:var(--space-6)}
.hm-note{margin:0;max-width:62ch;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}

/* Fiktive Betriebe: zwei grosse Bühnen im Wechsel, zwei kompakte nebeneinander; Gerätebild als Miniatur der Demo */
.hm-demo-mark{margin:0 0 var(--space-7)}
.hm-demo-list{display:grid;gap:var(--space-9)}
.hm-demo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-6);align-items:center}
.hm-demo-copy{grid-column:1/span 4;min-width:0}
.hm-demo-screen{grid-column:6/span 7;min-width:0}
.hm-demo.is-flipped .hm-demo-copy{grid-column:9/span 4;grid-row:1}
.hm-demo.is-flipped .hm-demo-screen{grid-column:1/span 7;grid-row:1}
.hm-demo-copy .kicker{margin:0 0 var(--space-3)}
.hm-demo-copy h3{margin:0 0 var(--space-4);font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:var(--ls-h2);font-optical-sizing:auto}
.hm-demo-text{margin:0 0 var(--space-5);max-width:30em;font:400 var(--fs-text)/var(--lh-text) var(--sans)}
.hm-facts{list-style:none;margin:0 0 var(--space-4);padding:0;border-top:1px solid var(--linie-ton)}
.hm-facts li{padding:10px 0;border-bottom:1px solid var(--linie-ton);font:400 var(--fs-text-klein)/1.45 var(--sans);color:var(--text-1)}
.hm-demo-screen .sp-screen{min-height:380px}
.hm-demo-screen .sp-screen.sp-buchhaltung{min-height:0;align-content:start;gap:16px}
.hm-demo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8);row-gap:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--linie-ton)}
.hm-demo.is-compact{grid-template-columns:minmax(0,1fr);align-items:start}
.hm-demo.is-compact .hm-demo-copy,.hm-demo.is-compact .hm-demo-screen{grid-column:1/-1}
.hm-demo.is-compact .hm-demo-screen{grid-row:1}
.hm-demo.is-compact h3{font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3);margin-bottom:var(--space-2)}
.hm-demo.is-compact .hm-demo-text{margin-bottom:var(--space-2);font-size:var(--fs-text-klein);line-height:var(--lh-text-klein);color:var(--text-2)}
.hm-demo.is-compact .hm-demo-screen .sp-screen{min-height:340px}
.hm-demo-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3) var(--space-7);margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--linie-ton)}
.hm-demo-foot p{margin:0;max-width:62ch;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}

/* Ablauf: fünf Schritte als echte Abfolge in zwei Phasen, Spalten gemeinsam ausgerichtet (subgrid) */
.hm-phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-7)}
.hm-phase{display:grid;grid-template-columns:subgrid;align-content:start;min-width:0}
.hm-phase.is-before{grid-column:1/span 3}
.hm-phase.is-after{grid-column:4/span 2}
.hm-phase-label{grid-column:1/-1;margin:0 0 var(--space-3);font:500 var(--fs-text-klein)/1.45 var(--sans);color:var(--text-2)}
.hm-phase-line{grid-column:1/-1}
.hm-steps{grid-column:1/-1;display:grid;grid-template-columns:subgrid;list-style:none;margin:0;padding:0;counter-reset:hm-schritt}
.hm-phase.is-after .hm-steps{counter-reset:hm-schritt 3}
.hm-steps>li{display:grid;align-content:start;gap:var(--space-2);min-width:0;padding-top:var(--space-5);counter-increment:hm-schritt}
.hm-steps>li::before{content:counter(hm-schritt);font:500 var(--fs-meta)/var(--lh-meta) var(--sans);color:var(--text-2);font-variant-numeric:tabular-nums}
.hm-step-name{margin:0;font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3)}
.hm-steps p{margin:0;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1);max-width:24em}
.hm-steps .hm-step-link{margin-top:var(--space-1)}

/* Ansprechpartner als Zeilen */
.hm-people{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.hm-person{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-2);align-items:baseline;padding:var(--space-5) 0;border-bottom:1px solid var(--linie-ton)}
.hm-person h3{grid-column:1/span 4;margin:0}
.hm-person-role{grid-column:5/span 4;margin:0;font:400 var(--fs-text)/1.5 var(--sans)}
.hm-person-links{grid-column:9/span 4;margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 var(--space-5);font:400 var(--fs-text-klein)/1.4 var(--sans)}
.hm-person-links a{padding:12px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;background:linear-gradient(var(--q-voll),var(--q-voll)) left bottom/0% 2px no-repeat;background-clip:content-box;transition:background-size var(--dauer-mittel) var(--kurve-praezise),text-decoration-color var(--dauer-kurz) linear}
.hm-person-links a:hover{background-size:100% 2px;text-decoration-color:transparent}
.hm-team-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3) var(--space-7);margin-top:var(--space-5)}
.hm-address{margin:0;max-width:62ch;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}

/* Fragen */
.hm-faq-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-7)}

/* ---------------------------------------------------------------- Responsiv */
@media (max-width:1100px){
 .hm-offer-head{grid-column:1/span 8}
 .hm-offer-side{grid-column:9/span 4}
 .hm-offer-col.is-scope{grid-column:1/span 6}
 .hm-offer-col.is-check{grid-column:7/span 6}
 .hm-demo-copy{grid-column:1/span 5}
 .hm-demo.is-flipped .hm-demo-copy{grid-column:8/span 5}
 .hm-person h3{grid-column:1/span 5}
 .hm-person-role{grid-column:6/span 7}
 .hm-person-links{grid-column:6/span 7;justify-content:flex-start}
}
@media (max-width:900px){
 .hm-kette-title,.hm-kette .kette{grid-column:1/-1}
 .hm-kette-title{padding-top:0}
 .hm-demo-copy,.hm-demo-screen,.hm-demo.is-flipped .hm-demo-copy,.hm-demo.is-flipped .hm-demo-screen{grid-column:1/-1}
 .hm-demo-screen,.hm-demo.is-flipped .hm-demo-screen{grid-row:1}
 .hm-demo-copy,.hm-demo.is-flipped .hm-demo-copy{grid-row:2}
 .hm-demo-list{gap:var(--space-8)}
 .hm-demo-pair{grid-template-columns:minmax(0,1fr);row-gap:var(--space-8)}
 .hm-phases{grid-template-columns:minmax(0,1fr)}
 .hm-phase.is-before,.hm-phase.is-after{grid-column:1/-1}
 .hm-steps>li{grid-template-columns:28px minmax(0,1fr);column-gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--linie-ton)}
 .hm-steps>li::before{grid-row:1/span 3;padding-top:.3em}
 .hm-steps>li>*{grid-column:2}
 .hm-steps>li:last-child{border-bottom:0}
}
@media (max-width:800px){
 .r2-hero-copy{padding:calc(var(--header-h) + var(--space-7)) 0 var(--space-5)}
 /* Mobil liegt der Text über Gesicht und Fenster im Film. Ein weicher Verlauf in Nacht hinter dem Textblock (Markenebene, Abtönung des Films
    unverändert) hält Titel und Lead über 3:1 und 4.5:1 im ungünstigsten Pixel (Messung 5. Oktober 2026, Poster und Standbilder, 390 und 320 px). */
 .r2-hero-copy::before{content:'';position:absolute;z-index:-1;left:calc(-1 * var(--raster-rand));right:calc(-1 * var(--raster-rand));top:0;bottom:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--nacht) 42%,transparent) calc(var(--header-h) + 40px),color-mix(in srgb,var(--nacht) 50%,transparent) 100%)}
 .r2-hero-foot{flex-direction:column;align-items:stretch;gap:var(--space-2);padding:16px 0 12px}
 .r2-hero-foot .ablauf{flex:none;width:100%;max-width:520px}
 .r2-hero-foot-links{justify-content:space-between}
}
@media (max-width:640px){
 .home-offer-list>article{padding:var(--space-5) 0 var(--space-6);row-gap:var(--space-4)}
 .hm-offer-head,.hm-offer-side,.hm-offer-col.is-scope,.hm-offer-col.is-check{grid-column:1/-1}
 .hm-offer-side{grid-row:2;justify-items:start;text-align:left;gap:0}
 .hm-price{grid-template-columns:auto auto;align-items:baseline;column-gap:var(--space-3);justify-content:start}
 .hm-price span:first-child{grid-column:1/-1}
 .hm-demo-screen .sp-screen,.hm-demo.is-compact .hm-demo-screen .sp-screen{min-height:0}
 .hm-facts{display:none}
 .hm-demo-text{margin-bottom:var(--space-2)}
 .hm-person{grid-template-columns:minmax(0,1fr)}
 .hm-person h3,.hm-person-role,.hm-person-links{grid-column:1/-1}
 .hm-faq-foot{flex-direction:column;align-items:stretch}
 .hm-faq-foot .text-link{align-self:flex-start}
}
@media (max-width:520px){
 .r2-hero-copy{padding-bottom:var(--space-2)}
 .clean-home .r2-hero .r2-hero-title{font-size:40px}
 .clean-home .r2-hero .r2-hero-lead{margin:var(--space-4) 0 var(--space-5);font-size:18px}
 .r2-actions{gap:var(--space-3) var(--space-5)}
 .r2-actions .button{width:100%}
 .r2-hero .r2-foot-link{display:none}
 .r2-hero-foot-links{justify-content:flex-start}
 .r2-hero-foot .ablauf{--ab-luecke:10px;column-gap:10px}
 .r2-hero-foot .ablauf .ab-name{font-size:16px}
 .r2-hero-foot .ablauf .ab-zustand{line-height:1.3}
}
@media (max-width:360px){
 .clean-home .r2-hero .r2-hero-title{font-size:36px}
 .r2-hero-foot .ablauf .ab-name{font-size:15px}
}