/* Ermeth Paket C, Marke «Klartext» (5. Oktober 2026): Angebot (.ang-*), Team (.team-*), Rechtsseiten (.legal*), Weiterleitungen (.redir*).
   Kontakt steht in dist/contact.css. Nur Markentokens und Rollen aus dist/site.css (docs/design-system-2026-10-05-klartext.md):
   Linien statt Kästchen, Holz nur als Linie über --q-voll, Newsreader nur für h1, h2 und Preise, sonst Schibsted Grotesk.
   Bewegung über die Dauer-Tokens; Pause und reduzierte Bewegung setzen sie auf 0 und der Stopp-Block in site.css hält alles an. */

/* ---------------------------------------------------------------- Gemeinsam: Schluss mit einem Primärknopf */
.ang-schluss,.team-schluss{border-top:1px solid var(--linie-ton)}
.ang-schluss h2,.team-schluss h2{max-width:18ch;margin-bottom:var(--space-4)}
.ang-schluss .lead,.team-schluss .lead{margin:0}

/* ---------------------------------------------------------------- Angebot: Produktkette im Seitenkopf */
.ang-kette-wrap{margin-top:var(--space-8)}
.ang-kette-titel{margin:0 0 var(--space-3)}
html.js .page-head .ang-kette-wrap{animation:ph-auf var(--dauer-auftritt) var(--kurve-praezise) 500ms both}

/* Angebot: drei Einstiege als Stufen. Zeile in zwölf Spalten: Kopf mit Richtpreis, Umfang, Mitwirkung, darunter die Abnahme. */
.ang-stufen{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.ang-stufe{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-6);padding:var(--space-7) 0;border-bottom:1px solid var(--linie-ton)}
.ang-stufe::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);pointer-events:none}
.ang-stufe:hover::after,.ang-stufe:focus-within::after{transform:scaleX(1)}
.ang-kopf{grid-column:1/span 4;grid-row:1/span 2;display:grid;align-content:start;justify-items:start;gap:var(--space-2);padding-right:var(--space-5)}
.ang-kopf .meta{margin:0}
.ang-kopf h3{margin:0;font-size:clamp(22px, 21.26px + .19vw, 24px)}
.ang-fuer{margin:0 0 var(--space-4);max-width:24em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}
.ang-preis-zeile{display:grid;gap:2px;margin:0}
.ang-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)}
.ang-preis small{font:400 17px/1.3 var(--sans);letter-spacing:0;color:var(--text-2)}
.ang-kopf .text-link{margin-top:var(--space-2)}
.ang-teil{display:grid;align-content:start;gap:var(--space-3);min-width:0}
.ang-teil h4{margin:0;padding-bottom:var(--space-3);border-bottom:1px solid var(--linie-ton);font:500 var(--fs-text-klein)/1.4 var(--sans);color:var(--text-2)}
.ang-teil p,.ang-teil li{margin:0;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}
.ang-teil ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.ang-teil li{position:relative;padding-left:20px}
.ang-teil li::before{content:'';position:absolute;left:0;top:12px;width:10px;height:2px;background:var(--linie-kraeftig)}
.ang-teil.is-umfang{grid-column:5/span 4}
.ang-teil.is-mitwirkung{grid-column:9/span 4}
.ang-teil.is-abnahme{grid-column:5/-1}
.ang-teil.is-abnahme p{max-width:var(--lesebreite)}
.ang-teil.is-breit{grid-column:5/-1;grid-row:1/span 2}
.ang-teil.is-breit p{max-width:var(--lesebreite)}
.ang-stufe.is-betreuung .ang-kopf h3{font-size:var(--fs-h3)}
.ang-stufe.is-betreuung .ang-preis-zeile{margin-top:var(--space-3)}
.ang-hinweis{margin:var(--space-5) 0 0;max-width:var(--lesebreite);font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}

/* Angebot: Was nicht im Richtpreis steckt, Regeln */
.ang-rows .row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.ang-rows .row-text{max-width:36em}

/* Angebot: Dein Weg bis zur Offerte (Ablaufleiste mit einem Absatz je Stufe; Bewegung aus site.js) */
.ang-weg .section-head{margin-bottom:var(--space-8)}
.ang-weg-leiste>li{gap:6px}
.ang-weg-text{margin:var(--space-3) 0 0;padding-right:var(--space-7);max-width:30em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}
.ang-weg-link{margin:var(--space-1) 0 0}

/* Angebot: Nach der Offerte (echte Abfolge, darum Nummern; ohne Statusquadrat, weil es der Ablauf eines Projekts ist) */
.ang-nach{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1);counter-reset:nach}
.ang-nach>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-3);padding:var(--row) 0;border-bottom:1px solid var(--linie-ton);counter-increment:nach}
.ang-nach>li::before{content:counter(nach);grid-column:1;font:500 var(--fs-text-klein)/var(--lh-h3) var(--sans);color:var(--text-2);font-variant-numeric:tabular-nums}
.ang-nach h3{grid-column:2/span 4;margin:0}
.ang-nach-spalten{grid-column:7/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--raster-steg)}
.ang-nach-spalten .meta{margin:0 0 var(--space-1)}
.ang-nach-spalten p:not(.meta){margin:0;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}

/* ---------------------------------------------------------------- Team */
.team-personen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-8);padding-top:var(--space-6);border-top:var(--linie-kontur) solid var(--text-1)}
.team-person{grid-column:span 6;display:grid;align-content:start;justify-items:start;min-width:0;padding-right:var(--space-6)}
/* Echtes, freigegebenes Porträt (4:5), nur wenn beide eines haben (scripts/pages/team.mjs). Ohne Foto keine Platzhalterfläche:
   die beiden stehen als Textzeilen (Korrektur vor dem Livegang, 5. Oktober 2026). */
.team-bild{width:min(100%, 360px);aspect-ratio:4/5;margin:0 0 var(--space-6);background:var(--stein);overflow:hidden}
.team-bild img{display:block;width:100%;height:100%;object-fit:cover}
.team-person h2{margin:0 0 var(--space-2)}
.team-rolle{margin:0 0 var(--space-4);max-width:24em;font:500 var(--fs-lead)/1.4 var(--sans);color:var(--text-1)}
.team-text{margin:0 0 var(--space-3);max-width:34em;color:var(--text-1)}
.team-kontakt{display:flex;flex-wrap:wrap;gap:0 var(--space-6);margin:0}
.team-wer{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-6);align-items:start}
.team-wer>:first-child{grid-column:1/span 5}
.team-wer h2{margin:0}
.team-wer-text{grid-column:7/-1;display:grid;gap:var(--space-7);min-width:0}
.team-wer .lead{margin-bottom:var(--space-5)}
.team-fakten,.legal-facts{margin:0;border-top:var(--linie-kontur) solid var(--text-1)}
.team-fakten>div,.legal-facts>div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--space-1) var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--linie-ton)}
.team-fakten dt,.legal-facts dt{font:500 var(--fs-text-klein)/1.5 var(--sans);color:var(--text-2)}
.team-fakten dd,.legal-facts dd{margin:0;font:400 var(--fs-text-klein)/1.5 var(--sans);color:var(--text-1)}
.team-fakten .text-link{padding:0}
.team-regeln .row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.team-regeln-link{margin:var(--space-5) 0 0}

/* ---------------------------------------------------------------- Rechtsseiten: Text links, Übersicht rechts */
.legal{padding:clamp(48px, 30px + 4.6vw, 96px) 0 var(--section)}
.legal-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-7);align-items:start}
.legal-haupt{grid-column:1/span 8;min-width:0}
.legal-seite{grid-column:10/-1;position:sticky;top:calc(var(--header-h) + var(--space-5))}
html.js .legal .kicker{animation:ph-auf var(--dauer-auftritt) var(--kurve-praezise) 40ms both}
.legal-copy{max-width:var(--lesebreite)}
.legal-copy h1{margin:0 0 var(--space-6)}
.legal-copy .lead{margin:0 0 var(--space-7)}
.legal-copy h2{margin:var(--space-8) 0 var(--space-3);font-size:clamp(26px, 23.77px + .57vw, 32px)}
.legal-copy p{color:var(--text-1)}
.legal-copy a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:currentColor;overflow-wrap:anywhere;background:linear-gradient(var(--q-voll),var(--q-voll)) left bottom/0% 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--dauer-mittel) var(--kurve-praezise),text-decoration-color var(--dauer-kurz) linear}
.legal-copy a:hover{background-size:100% 2px;text-decoration-color:transparent}
.legal-copy .legal-facts dd a{display:inline-block;padding:6px 0;margin:-6px 0}
.legal-toc .meta{margin:0 0 var(--space-3)}
.legal-toc ol{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.legal-toc li{border-bottom:1px solid var(--linie-ton)}
.legal-toc a{position:relative;display:block;padding:12px 0;font:500 var(--fs-text-klein)/1.4 var(--sans);color:var(--text-1)}
.legal-toc a::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)}
.legal-toc a:hover::after,.legal-toc a:focus-visible::after{transform:scaleX(1)}

/* ---------------------------------------------------------------- Weiterleitung */
.redir{padding:clamp(48px, 30px + 4.6vw, 96px) 0 var(--section);min-height:56vh}
.redir h1{max-width:16em;margin-bottom:var(--space-5)}
.redir .lead{margin:0 0 var(--space-5)}
.redir-link{margin:0}

/* ---------------------------------------------------------------- Responsiv */
@media (max-width:1100px){
 .ang-kopf{grid-column:1/span 5}
 .ang-teil.is-umfang{grid-column:6/-1}
 .ang-teil.is-mitwirkung{grid-column:6/-1}
 .ang-teil.is-abnahme,.ang-teil.is-breit{grid-column:6/-1}
 .ang-kopf{grid-row:1/span 3}
 .legal-haupt{grid-column:1/span 9}
 .legal-seite{grid-column:10/-1}
}
@media (max-width:900px){
 .ang-stufe{row-gap:var(--space-5);padding:var(--space-6) 0}
 .ang-kopf,.ang-teil.is-umfang,.ang-teil.is-mitwirkung,.ang-teil.is-abnahme,.ang-teil.is-breit{grid-column:1/-1;grid-row:auto}
 .ang-kopf{padding-right:0}
 .ang-rows .row,.team-regeln .row{grid-template-columns:1fr}
 .ang-nach>li{grid-template-columns:28px minmax(0,1fr)}
 .ang-nach h3,.ang-nach-spalten{grid-column:2}
 .team-person{grid-column:1/-1;padding-right:0}
 .team-personen{row-gap:var(--space-7)}
 .team-person+.team-person{padding-top:var(--space-6);border-top:var(--linie-haar) solid var(--linie-ton)}
 .team-wer>:first-child,.team-wer-text{grid-column:1/-1}
 .legal-haupt{grid-column:1/-1}
 .legal-seite{display:none}
}
@media (max-width:640px){
 .ang-kette-wrap{margin-top:var(--space-7)}
 .ang-nach-spalten{grid-template-columns:1fr}
 .ang-weg-text{padding-right:0}
 .team-fakten>div,.legal-facts>div{grid-template-columns:1fr;gap:2px}
 .team-bild{width:min(100%, 220px);margin-bottom:var(--space-5)}
}
@media (max-width:520px){
 .ang-weg-leiste>li>p{flex-basis:100%}
 .ang-weg-leiste>li{padding-bottom:var(--space-6)}
}