/* Startseite unter dem Hero (.home-*, Paket D vom 4. Oktober 2026) und Beispiele-Seite (.ex-*, Marke «Klartext» vom 5. Oktober 2026).
   Tokens und Komponenten aus dist/site.css (Vertrag docs/design-system-2026-10-05-klartext.md), Bühnen der Startseite aus
   dist/launch-home.css, Miniaturen aus dist/showcase-previews.css, Lab aus dist/lab.css. Akzentlinien in --q-voll, nie Blau,
   Holz nie als Text. Überfahren zeichnet Linien, nichts hebt sich oder kippt (motion.md). */

/* Startseite: drei Einstiege als Zeilen */
.home-offer-list{border-top:1px solid var(--ink)}
.home-offers .r2-offer,.home-offer-care{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:18px 5%;align-items:start;padding:var(--row) 0;border-bottom:1px solid var(--line)}
.home-offer-name{margin:0 0 10px}
.home-offer-fit{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:26em}
.home-offer-includes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.home-offer-includes li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.home-offer-includes li::before{content:'';position:absolute;left:0;top:.75em;width:12px;height:1.5px;background:var(--q-voll)}
.home-offer-side{display:grid;gap:14px;justify-items:start;min-width:11em}
.home-offer-price{margin:0}
.home-offer-price span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
.home-offer-price strong{display:block;margin-top:2px;font-size:clamp(28px,2.6vw,36px);font-weight:500;letter-spacing:-.04em;line-height:1.1;white-space:nowrap}
/* Betreuung nach dem Start: vierte Zeile im selben Raster, Richtpreis in derselben Grösse, darunter «pro Monat» in 14 px */
.home-offer-care .home-offer-price strong+span{margin-top:4px}
.home-offer-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-top:28px}
.home-note{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:62ch}

/* Startseite: vier Betriebe (die beiden grossen Bühnen stehen in launch-home.css) */
.home-demos>.wrap>.section-head{margin-bottom:clamp(36px,4vw,56px)}
.home-compact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,64px) 6%;align-items:stretch;padding-top:clamp(56px,6vw,88px)}
.home-compact-item{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:22px}
.home-compact-screen{display:flex}
.home-compact-screen .sp-screen{flex:1;height:auto}
.home-compact-copy .kicker{margin-bottom:8px}
.home-compact-copy h3{margin:0 0 10px}
.home-compact-copy p:not(.kicker){margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:32em}
.home-compact .sp-screen{min-height:0;padding:16px}
/* Miniaturen in allen Rahmen: nowrap-Texte (Agenda-Kopf, Serienzeile) dürfen den Bildschirm nicht breiter als den Rahmen machen */
.home-compact-screen .sp-screen,.ex-screen .sp-screen,.r2-example-visual .sp-screen{min-width:0;max-width:100%}
.home-compact-screen .sp-agenda,.ex-screen .sp-agenda,.r2-example-visual .sp-agenda{grid-template-columns:minmax(0,1fr)}
.home-compact-screen .sp-agenda>*,.ex-screen .sp-agenda>*,.r2-example-visual .sp-agenda>*,.home-compact-screen .sp-pane-head>*,.ex-screen .sp-pane-head>*,.r2-example-visual .sp-pane-head>*{min-width:0}
.home-compact-screen .sp-pane-head small,.ex-screen .sp-pane-head small,.r2-example-visual .sp-pane-head small{flex:0 1 auto}
.home-compact .sp-website,.home-compact .sp-shop{grid-template-columns:minmax(0,1fr) 36px minmax(0,1.1fr)}
.home-compact .sp-flow span{display:none}
.home-demo-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 40px;padding-top:clamp(40px,5vw,64px)}
.home-demo-foot p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:40em}

/* Startseite: Ablauf mit Du und Wir (Nummern, weil echte Abfolge) */
.home-steps{list-style:none;counter-reset:home-step;margin:0;padding:clamp(28px,3vw,44px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 5%}
.home-steps li{counter-increment:home-step}
.home-steps li::before{content:counter(home-step);display:block;margin-bottom:18px;font-size:16px;line-height:1;color:var(--muted)}
.home-steps h3{margin:0 0 18px;max-width:12em}
.home-step-part{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:8px;margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.home-step-part strong{color:var(--ink)}

/* Startseite: Ansprechpartner */
.home-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 6%;padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--ink)}
.home-person h3{margin:0 0 8px}
.home-person p{margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:26em}
.home-person-links{display:grid;justify-items:start;gap:2px}
.home-person-links a{display:inline-block;padding:6px 0;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong);transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.home-person-links a:hover{color:var(--text-1);text-decoration-color:var(--q-voll);text-decoration-thickness:2px}
.home-address .text-link{margin-top:6px}

/* Startseite: vier Fragen */
.home-faq-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px;margin-top:32px}

/* ---------------------------------------------------------------- Beispiele (/templates/)
   Vier Betriebe als Zeilen, abwechselnd Bildschirm links und rechts (12er-Raster: Bühne 7 Spalten, eine Spalte Luft, Text 4).
   Bühne = Muster-Rahmen (elemente.md §8): Stein, Kontur 1,5 px Kobalt, 8 px Schraffurkante oben, Etikett «Muster mit fiktiven Daten».
   Darin der Bildschirm als Gerätebild (.screen, Radius 14 px, einziger Schatten). Überfahren: unter der Bühne zieht die Linie
   in --q-voll (480 ms), am Knopf die Knopflinie (240 ms). Eintritt über data-reveal aus site.js (einmal, nur unter dem Falz). */
.ex-hinweis{margin:0}
.ex-list.section{padding-top:0}
.ex-items{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.ex-items>li{margin:0;padding:clamp(40px, 28px + 3vw, 72px) 0;border-bottom:1px solid var(--linie-ton)}
.ex-items>li:last-child{border-bottom:0;padding-bottom:0}
.ex-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-6);align-items:center}
.ex-stage{grid-column:1/span 7;grid-row:1;position:relative;display:block;padding:60px clamp(24px, 1vw + 16px, 40px) clamp(24px, 1vw + 16px, 40px);background:var(--stein);box-shadow:inset 0 0 0 var(--linie-kontur) var(--muster);color:var(--tinte);text-decoration:none}
.ex-stage::before{content:'';position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(135deg,var(--muster) 0 1.5px,transparent 1.5px 7px)}
.ex-stage::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:var(--linie-betont);background:var(--q-voll);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-linie) var(--kurve-linie)}
.ex-stage:hover::after{transform:scaleX(1)}
.ex-stage>.muster-etikett{position:absolute;top:20px;left:clamp(24px, 1vw + 16px, 40px)}
.ex-screen{position:relative}
.ex-screen .sp-screen{min-height:400px}
/* Auf breiten Bühnen die Miniatur in der Grösse zeigen, für die sie gezeichnet ist (etwa 600 px Satzbreite), statt sie auszudünnen. */
@media(min-width:1101px){.ex-screen .sp-screen{zoom:1.12;min-height:360px}}
.ex-copy{grid-column:9/-1;grid-row:1;min-width:0}
.ex-items>li:nth-child(even) .ex-stage{grid-column:6/-1}
.ex-items>li:nth-child(even) .ex-copy{grid-column:1/span 4}
.ex-copy .kicker{margin:0 0 var(--space-3)}
.ex-title{margin:0 0 var(--space-4);max-width:12em}
.ex-text{margin:0 0 var(--space-5);font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1);max-width:34em}
.ex-text strong{font-weight:600}
.ex-facts{list-style:none;margin:0 0 var(--space-6);padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.ex-facts li{padding:10px 0;border-bottom:1px solid var(--linie-ton);font:400 var(--fs-text-klein)/1.5 var(--sans);color:var(--text-1)}
/* Bühne und Knopf öffnen dieselbe Demo: Überfahren der Bühne zeichnet auch die Knopflinie. */
.ex-item:has(.ex-stage:hover) .ex-copy .button.is-secondary{box-shadow:inset 0 0 0 1.5px var(--text-1)}
.ex-item:has(.ex-stage:hover) .ex-copy .button.is-secondary::after{transform:scaleX(1)}
/* Regeln in jeder Demo */
.ex-row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.ex-row .row-text{max-width:38em}
/* Einordnung zu den Richtpreisen: eine Linie, Titel und Text links, Knopf und Textlink rechts unten. */
.ex-close-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-6);align-items:end;padding-top:var(--space-6);border-top:var(--linie-kontur) solid var(--text-1)}
.ex-close-grid>div:first-child{grid-column:1/span 7}
.ex-close-grid h2{margin:0 0 var(--space-4);max-width:14em}
.ex-close-text{margin:0;max-width:var(--lesebreite);color:var(--text-1)}
.ex-close-actions{grid-column:8/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4) var(--space-6)}

@media(max-width:1100px){
 .home-offers .r2-offer,.home-offer-care{grid-template-columns:1fr 1fr;gap:24px}
 .home-offer-side{grid-column:1/-1;grid-auto-flow:column;justify-content:space-between;align-items:end;width:100%}
 .home-steps{gap:32px 4%}
 .ex-stage,.ex-items>li:nth-child(even) .ex-stage{grid-column:1/-1}
 .ex-copy,.ex-items>li:nth-child(even) .ex-copy{grid-column:1/span 8;grid-row:2}
 .ex-close-grid>div:first-child,.ex-close-actions{grid-column:1/-1}
 .ex-close-actions{justify-content:flex-start}
}
@media(max-width:800px){
 .home-offers .r2-offer,.home-offer-care{grid-template-columns:1fr;gap:20px}
 .home-offer-side{grid-auto-flow:row;gap:12px}
 .home-compact{grid-template-columns:1fr;gap:48px}
 .home-compact .sp-website,.home-compact .sp-shop{grid-template-columns:1fr}
 .home-compact-item{grid-template-rows:auto auto}
 .home-steps{grid-template-columns:1fr;gap:36px}
 .home-team-grid{grid-template-columns:1fr;gap:32px}
 .ex-item{row-gap:var(--space-5)}
 .ex-copy,.ex-items>li:nth-child(even) .ex-copy{grid-column:1/-1}
 .ex-screen .sp-screen{min-height:0}
 .ex-row{grid-template-columns:1fr}
}
@media(max-width:640px){
 .ex-stage{padding:52px 12px 12px}
 .ex-stage>.muster-etikett{top:18px;left:12px}
 .ex-stage::after{bottom:-10px}
 .ex-copy .button{width:100%}
}
@media(max-width:450px){
 .home-offer-price strong{font-size:28px}
 .home-step-part{grid-template-columns:1fr;gap:2px}
 .ex-close-actions .button{width:100%}
}