/* ============ /facts + /de/facts — Faktenseite (Grounding Page Standard), Figma F-1 (1412:12) + F-M1 (1423:10) ============
   Aufbau nach der About-Vorlage: Abschnitt = Linie über die Inhaltsbreite, Titel links (740), Inhalt rechts (620, x 790).
   Fakten als Liste Merkmal | Wert (220 | 400), mobil gestapelt. Desktop in Design-Pixeln var(--u), Schriften als Rollen aus typo.css. */
html:not(.js) .reveal{opacity:1;transform:none}
.seitenkopf{padding-left:var(--rand);padding-right:var(--rand)}

/* Lead: 123 unter der H1 in der Spalte ab x 200 (760 breit); Absätze 49 / 25 */
.fa-text{padding:calc(123 * var(--u)) var(--rand) 0 calc(var(--rand) + 170 * var(--u))}
.fa-text > p{max-width:calc(760 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l);color:rgba(26,26,26,.78)}
.fa-text > .fa-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);color:var(--ink)}
.fa-text > p + p{margin-top:calc(25 * var(--u))}
.fa-text > .fa-lead + p{margin-top:calc(49 * var(--u))}

/* Abschnitte: erster 150, sonst 120 unter dem Vorigen; Titel 63 unter der Linie; Inhalt 2 unter der Titeloberkante; 150 bis zum Footer */
.fa-abschnitt{display:grid;grid-template-columns:minmax(0,740fr) minmax(0,620fr);column-gap:calc(20 * var(--u));align-items:start;margin:calc(120 * var(--u)) var(--rand) 0;padding:calc(62 * var(--u)) 0 0;border-top:1px solid rgba(26,26,26,.18)}
.fa-erster{margin-top:calc(150 * var(--u))}
.fa-seite main{padding-bottom:calc(150 * var(--u))} /* Polster statt Rand: der Abstand bleibt im Seiteninhalt (Vorhang über dem Footer) */
.fa-titel{grid-column:1;font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m);text-transform:uppercase}
.fa-inhalt{grid-column:2;min-width:0;margin-top:calc(2 * var(--u))}
.fa-inhalt > .fa-absatz:first-child{margin-top:calc(1 * var(--u))}

/* Fließtext im Inhalt (16/22, Ink 78 %): Absätze 16 auseinander, 32 bis zur Faktenliste */
.fa-absatz{font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(26,26,26,.78)}
.fa-absatz + .fa-absatz{margin-top:calc(16 * var(--u))}
.fa-absatz + .fa-fakten{margin-top:calc(32 * var(--u))}

/* Fakten: Linie, Wert 11 darunter (16/22), Merkmal 15 darunter (Label grau), nächste Linie 9 unter dem Wert */
.fa-fakten{border-top:1px solid rgba(26,26,26,.18)}
.fa-fakten > div{display:grid;grid-template-columns:calc(220 * var(--u)) minmax(0,1fr);padding:calc(10 * var(--u)) 0 calc(9 * var(--u));border-bottom:1px solid rgba(26,26,26,.18)}
.fa-fakten dt{margin-top:calc(4 * var(--u));padding-right:calc(20 * var(--u));color:var(--gedaempft)}
.fa-fakten dd{font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:var(--ink)}
.fa-quellen dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(26,26,26,.35);transition:text-decoration-color .2s ease}
.fa-quellen dd a:hover{text-decoration-color:var(--ink)}
.fa-link{display:flex;width:max-content;margin-top:calc(32 * var(--u))}

/* Leistungen: 40 unter dem Intro, zwei Spalten 300 | 300; Bereichs-Label (Link) 28 über der Linie, Zeilen 42, Gruppen 48 auseinander */
.fa-leistungen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(20 * var(--u));align-items:start;margin-top:calc(40 * var(--u))}
.fa-gruppe + .fa-gruppe{margin-top:calc(48 * var(--u))}
.fa-bereich{transition:opacity .2s ease}
.fa-bereich:hover{opacity:.6}
.fa-liste{list-style:none;margin-top:calc(14 * var(--u));border-top:1px solid rgba(26,26,26,.18)}
.fa-liste li{border-bottom:1px solid rgba(26,26,26,.18)}
.fa-liste a,.fa-eintrag{display:flex;justify-content:space-between;align-items:center;gap:calc(12 * var(--u));padding:calc(10 * var(--u)) 0 calc(9 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:var(--ink)}
.fa-pfeil{flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.fa-liste a:hover .fa-pfeil{transform:translateX(calc(4 * var(--u)))}
.fa-liste a:focus-visible,.fa-bereich:focus-visible,.fa-quellen dd a:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}

/* Kunden: 40 unter dem Intro; Label, Marken 8 darunter (16/22, 78 %), Gruppen 28 auseinander */
.fa-kunden{margin-top:calc(40 * var(--u))}
.fa-kundengruppe + .fa-kundengruppe{margin-top:calc(28 * var(--u))}
.fa-kundengruppe p{margin-top:calc(8 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(26,26,26,.78)}
/* Marken mit Case-Seite (Text.astro, .textlink): wie die Links in den Quellen (.fa-quellen dd a), Linie 1 px in 35 % Ink, beim Hover voll */
.fa-kundengruppe .textlink{text-decoration-thickness:1px;text-decoration-color:rgba(26,26,26,.35);transition:text-decoration-color .2s ease}
.fa-kundengruppe .textlink:hover{text-decoration-color:var(--ink)}

/* Abgrenzung + FAQ: Linie, Aussage/Frage 22 darunter (22/26), Text 10 darunter (16/22, 78 %), nächste Linie 23 darunter */
.fa-reihen{border-top:1px solid rgba(26,26,26,.18)}
.fa-reihe{padding:calc(21 * var(--u)) 0 calc(23 * var(--u));border-bottom:1px solid rgba(26,26,26,.18)}
.fa-reihe h3{font-family:var(--font-h);font-weight:500;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:var(--ls-zeile)}
.fa-reihe p{margin-top:calc(10 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(26,26,26,.78)}

/* Status: 64 unter den Quellen, 14/20 grau, Zeilen 4 auseinander */
.fa-status{margin-top:calc(64 * var(--u))}
.fa-status p{font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:var(--ls-text-xs);color:var(--gedaempft)}
.fa-status p + p{margin-top:calc(4 * var(--u))}

@media (prefers-reduced-motion:reduce){.fa-pfeil,.fa-bereich{transition:none}.fa-liste a:hover .fa-pfeil{transform:none}}

/* ---------- Tablet (761–1100, nicht eigens designt): Titel über dem Inhalt, Inhalt volle Breite ---------- */
@media (max-width:1100px){
  .fa-text{padding:100px var(--rand) 0}
  .fa-abschnitt{grid-template-columns:minmax(0,1fr);row-gap:32px;margin-top:100px}
  .fa-erster{margin-top:100px}
  .fa-seite main{padding-bottom:100px}
  .fa-titel,.fa-inhalt{grid-column:1}
  .fa-inhalt{margin-top:0}
  .fa-inhalt > .fa-absatz:first-child{margin-top:0}
}

/* ---------- Mobil (F-M1): Lead 64 unter der H1; Abschnitte Linie +80, Titel +33, Inhalt +32; Fakten gestapelt;
   Leistungen einspaltig Strategy → Assortment → Performance → Imagery → Space ---------- */
@media (max-width:760px){
  .fa-text{padding-top:64px}
  .fa-text > p + p{margin-top:20px}
  .fa-text > .fa-lead + p{margin-top:32px}
  .fa-abschnitt{display:block;margin-top:80px;padding-top:32px}
  .fa-erster{margin-top:80px}
  .fa-seite main{padding-bottom:80px}
  .fa-inhalt{margin-top:32px}
  .fa-absatz + .fa-absatz{margin-top:16px}
  .fa-absatz + .fa-fakten{margin-top:32px}
  .fa-fakten > div{display:block;padding:10px 0 11px}
  .fa-fakten dt{margin:0 0 4px;padding-right:0}
  .fa-link{margin-top:32px}
  .fa-leistungen{display:flex;flex-direction:column;gap:32px;margin-top:40px}
  .fa-spalte{display:contents}
  .fa-gruppe{order:var(--mo)}
  .fa-gruppe + .fa-gruppe{margin-top:0}
  .fa-liste a,.fa-eintrag{padding:9px 0 11px}
  .fa-kunden{margin-top:32px}
  .fa-kundengruppe + .fa-kundengruppe{margin-top:24px}
  .fa-kundengruppe p{margin-top:6px}
  .fa-reihe{padding:17px 0 18px}
  .fa-reihe p{margin-top:8px}
  .fa-status{margin-top:40px}
}

/* ============ Einspaltige Rechtstexte (Datenschutz, Figma P-1 1441:4 / P-M1 1441:87) ============
   Lesespalte ab x 200, 760 breit: Linie, Titel 40 darunter (32/35 Versal), Text 24 unter dem Titel (20/28, Ink 78 %), Absätze 20 auseinander,
   Merkmal|Wert-Zeilen 32 unter dem Text; Abschnitte 80 auseinander, erster 123 unter der H1; mobil Titel +33, Text +32 (15/21), Absätze 16 */
.ds-abschnitt{max-width:calc(760 * var(--u));margin:calc(80 * var(--u)) var(--rand) 0 calc(var(--rand) + 170 * var(--u));padding:calc(39 * var(--u)) 0 0;border-top:1px solid rgba(26,26,26,.18)} /* padding 0 seitlich: section hat global Rand-Polster */
.ds-erster{margin-top:calc(123 * var(--u))}
.ds-abschnitt h2{font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m);text-transform:uppercase}
.ds-abschnitt p{font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l);color:rgba(26,26,26,.78)}
.ds-abschnitt h2 + p{margin-top:calc(24 * var(--u))}
.ds-abschnitt p + p{margin-top:calc(20 * var(--u))}
.ds-abschnitt p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(26,26,26,.35)}
.ds-abschnitt p a:hover{text-decoration-color:var(--ink)}
.ds-abschnitt .fa-fakten{margin-top:calc(32 * var(--u))}
@media (max-width:1100px){
  .ds-abschnitt{margin-left:var(--rand);max-width:760px}
  .ds-erster{margin-top:100px}
}
@media (max-width:760px){
  .ds-abschnitt{margin:80px var(--rand) 0;padding:32px 0 0;max-width:none}
  .ds-erster{margin-top:80px}
  .ds-abschnitt h2 + p{margin-top:32px}
  .ds-abschnitt p{font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text)}
  .ds-abschnitt p + p{margin-top:16px}
}