/* Gestaltung der Unterseiten. Erzeugt von unterseite_teile.py -
   nicht von Hand aendern, sonst ist die Aenderung beim naechsten
   Bauen weg. */

/* ===================================================================
   Unterseite Knowledge - eigene Regeln. main.css bleibt unberuehrt.
   Werte aus dem Stand der Startseite: Container 1290, Rand 75,
   Satzspiegel 1080, Lauftext 21 px, Radien 8 px, Pillen 999 px.
   =================================================================== */
/* Das Mass kommt aus main.css (Teil 64/65): ein Satzspiegel fuer die
   ganze Seite, Logo- bis Knopfkante der Navileiste. 1200 px ist nur
   der Notwert, falls das Blatt einmal allein geladen wird. */
.us, .kopf { --satz: var(--satzspiegel, 1200px); --ink: #0d0d12; --body: rgba(0,0,0,.78);
             --rand: rgba(0,0,0,.12); --hell: #F8F9FA;
             --verlauf: linear-gradient(90deg,#FF36A0 0%,#FF6F00 100%); }
.us { background: #FFFFFF; padding: 0 0 110px; }
.us-container { max-width: 1290px; margin: 0 auto; padding: 0 75px; }

/* Rubriken: Mono, gesperrt, im Verlauf ausgeschnitten */
.us-rubrik { margin: 0 0 16px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; display: inline-block;
  background-image: var(--verlauf); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
/* Auf dem Verlauf steht Schrift immer auf 100 % Weiss (Regel 03.09.);
   abgestufte Weisstoene waren am 09.09. auf dem Verlauf zu schwach
   gemessen (2,26:1). */
.us-rubrik-weiss { background-image: none; color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF; }

.us-h1 { margin: 0; font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: 58px; line-height: 1.07; letter-spacing: -2.2px; color: var(--ink); }
.us-h1 span { display: inline; }
.us-h1-weiss, .us-h1-weiss span { color: #FFFFFF; }
/* !important und mit .us davor: main.css setzt h2 fuer die dunkle Welt auf
   Weiss und gewinnt sonst - beim ersten Bauen waren alle Gruppentitel
   unsichtbar (gemessen: color rgb(255,255,255) auf weissem Grund). */
.us .us-h2 { margin: 0; max-width: var(--satz);
  font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: 34px; line-height: 1.12; letter-spacing: -1.3px;
  color: var(--ink) !important; }
.us .us-h1, .kopf .us-h1 { color: var(--ink) !important; }
.kopf .us-h1-weiss, .kopf .us-h1-weiss span { color: #FFFFFF !important; }

.us-lead { margin: 0; max-width: var(--satz); font-size: 26px; line-height: 1.5;
  color: var(--ink); }
.us-fliess { margin: 22px 0 0; max-width: var(--satz); font-size: 21px; line-height: 1.62;
  color: var(--body); }
/* Antworten sind Lauftext, also 21 px wie auf der Startseite (Entscheidung
   10.09.). 18 px waren beim ersten Bauen eine stille Ausnahme von der
   eigenen Regel. */
.us-antwort { margin: 0 0 14px; max-width: 900px; font-size: 21px; line-height: 1.62;
  color: var(--body); }
.us-antwort:last-child { margin-bottom: 0; }

.us-einstieg { padding: 64px 0 0; }
.us-formate { padding: 54px 0 0; }

/* Stichwort- und Leistungspillen */
.us-pillen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 30px 0 0; padding: 0; }
.us-pillen li { border: 1px solid var(--rand); border-radius: 999px; padding: 9px 17px;
  font-size: 15px; color: var(--ink); background: #FFFFFF; }
.us-pillen-gross li { font-size: 16px; padding: 11px 20px; background: var(--hell); }

/* Fragen: <details>, ohne JavaScript */
.us-gruppe { padding: 76px 0 0; }
.us-gruppe-kopf { border-bottom: 1px solid var(--rand); padding-bottom: 18px;
  margin-bottom: 22px; max-width: var(--satz); }
.us-liste { display: flex; flex-direction: column; gap: 10px; max-width: var(--satz); }
.us-frage { border: 1px solid var(--rand); border-radius: 8px; background: #FFFFFF; }
.us-frage[open] { background: var(--hell); }
.us-frage > summary { list-style: none; cursor: pointer; display: flex;
  align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 22px; font-family: "Sora", system-ui, sans-serif; font-size: 22px;
  line-height: 1.32; letter-spacing: -.5px; color: var(--ink); }
/* Die Frage war mit 19 px kleiner als ihre eigene Antwort mit 21 px -
   verdrehte Hierarchie. Jetzt steht die Frage einen Schritt darueber,
   der Unterschied zur Antwort kommt aus Schnitt und Farbe. */
.us-frage > summary::-webkit-details-marker { display: none; }
.us-frage > summary::marker { content: ""; }
.us-plus { flex: 0 0 auto; color: #FF4A78; transition: transform .18s ease; margin-top: 1px; }
.us-frage[open] .us-plus { transform: rotate(45deg); }
.us-antworten { padding: 0 22px 22px; }

/* ── die eine hervorgehobene Sektion ─────────────────────────────────
   Masse und Wellen kommen aus main.css (.ins-sektion). Hier nur die
   Schrift. Auf dem Verlauf steht die Zeile in Weiss - genau wie
   "Own the insights." auf der Startseite (dort inline #FFFFFF). */
.us-verlauf { margin: 30px 0; }
.us-verlauf .us-container { position: relative; z-index: 20; }
.us-verlauf-claim { margin: 22px 0 0; max-width: var(--satz);
  font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: 44px; line-height: 1.16; letter-spacing: -1.6px;
  color: #FFFFFF !important; }

/* Kapitelmarke: Verlaufskante ueber der Rubrik (Variante C, 11.09.) */
.us-kante { display: block; width: 132px; height: 4px; border-radius: 2px;
  background: var(--verlauf); margin: 0 0 24px; }

/* ── Bloecke der Solutions-Seite ─────────────────────────────────────
   Fuenf Technologieblocks, unterschiedlich gewichtet: einmal Text mit
   Bild daneben, einmal Text mit Grafik darunter, einmal volle Bildbreite.
   Alles auf dem Satzspiegel 1080, damit die Kanten uebereinander stehen. */
.us-block { padding: 100px 0 0; }
.us-block-kopf { max-width: var(--satz); }
/* mit .us davor, sonst gewinnt die allgemeine h2-Regel (.us .us-h2) mit
   ihren 34 px - gemessen war der Blocktitel genau so gross wie eine
   Gruppenueberschrift. */
.us .us-blocktitel { margin: 14px 0 0; max-width: 860px;
  font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: 40px; line-height: 1.12; letter-spacing: -1.5px; color: var(--ink); }
.us-zwei { display: flex; gap: 48px; align-items: flex-start; max-width: var(--satz);
  margin: 30px 0 0; }
.us-zwei-text { flex: 1 1 0; min-width: 0; }
.us-zwei-bild { flex: 0 0 480px; }
.us-zwei-links .us-zwei-bild { order: -1; }
.us-bild { border-radius: 8px; overflow: hidden; background: var(--hell); }
.us-bild img { display: block; width: 100%; height: auto; }
.us-bild-breit { max-width: var(--satz); margin: 34px 0 0; }
.us-bildnotiz { margin: 10px 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .04em; color: rgba(0,0,0,.5); }
/* Business Value steht im Word als eigene Zeile am Ende eines Blocks.
   Erste Fassung war ein hellgrauer Kasten mit rosa Balken links und
   Mono-Marke - Jonas 11.09.: "das ist AI Slob". Stimmt: ein Callout-
   Kasten, wie ihn jedes Template hat, und er behauptet Wichtigkeit,
   ohne sie zu gestalten.
   Jetzt eine Faktenzeile: Haarlinie ueber den Satzspiegel, links die
   Marke klein in Mono, rechts der Satz gross in Sora. Kein Kasten,
   keine Farbflaeche, kein Radius - dieselben Mittel, mit denen die
   Startseite arbeitet (Haarlinien, Mono-Rubriken, Sora-Zeilen). */
/* Business Value, Stand 15.09.: nicht mehr zwei Spalten mit grauer
   Marke links, sondern dasselbe Muster wie ein Kapitelanfang - Marke
   oben in Mono auf dem Verlauf, Satz darunter. Jonas 15.09.: "Diese Art
   von Subhead wollten wir doch aendern ... Bitte wie Digitaler
   Produktpass z. B." Die Haarlinie darueber bleibt: sie trennt den
   Abschluss vom Text des Kapitels; die Verlaufskante bekommt er nicht,
   die markiert weiter nur Kapitelanfaenge.
   Der Satz steht auf 30 px - eine Stufe ueber dem Lauftext (21) und
   deutlich unter der Blockueberschrift (40), also dieselbe Stufe wie
   die Claimzeilen. */
.us-bv { max-width: var(--satz); margin: 40px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--rand); }
.us-bv p.us-fakt { margin: 0; font-family: "Sora", system-ui, sans-serif;
  font-weight: 400; font-size: 30px; line-height: 1.24; letter-spacing: -1.1px;
  color: var(--ink); }
/* ── Karten, Punkte, Formel: die Bausteine der uebrigen Unterseiten ──
   Cases, Insights und Trusted Partner bestehen im Word grossenteils aus
   Aufzaehlungen mit Ueberschrift. Als Absaetze untereinander waeren das
   Textwuesten, als Kasten mit Schatten waere es Dekor. Also: Haarlinie,
   Piktogramm im CI-Verlauf, Titel, Satz - dieselbe Sprache wie die
   Kettengrafiken. */
.us-karten { display: grid; gap: 20px; margin: 34px 0 0; max-width: var(--satz);
  grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); }
.us-karte { border: 1px solid var(--rand); border-radius: 8px; background: #FFFFFF;
  padding: 24px 24px 26px; }
.us-karte-ikon { display: block; margin: 0 0 16px; }
.us-karte h3 { margin: 0 0 8px; font-family: "Sora", system-ui, sans-serif;
  font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -.6px;
  color: var(--ink); }
.us-karte p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }

.us-faelle { display: grid; gap: 24px; margin: 34px 0 0; max-width: var(--satz);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* Teil 176: vier Cases, 2 x 2 */
.us-fall-bild { position: relative; }
.us-fall-bild { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--hell); }
.us-fall-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-fall h3 { margin: 16px 0 6px; font-family: "Sora", system-ui, sans-serif;
  font-weight: 400; font-size: 21px; letter-spacing: -.6px; color: var(--ink); }
.us-fall p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(0,0,0,.55); }
.us-unterzeile { margin-top: 18px; }

/* Ein Satz, der eine Liste ankuendigt ("Moegliche Fragestellungen:"),
   gehoert zu ihr - also ruecken Liste und Pillen dichter an den Absatz
   davor. Jonas 17.09.: "Bitte achte darauf, dass Fliesstext keinen zu
   grossen ZAB hat." */
.us-fliess + .us-punkte { margin-top: 14px; }
.us-fliess + .us-pillen { margin-top: 16px; }
.us-fliess + .us-formel { margin-top: 26px; }

.us-punkte { list-style: none; margin: 26px 0 0; padding: 0; max-width: var(--satz);
  display: flex; flex-direction: column; gap: 12px; }
.us-punkte li { position: relative; padding-left: 34px; font-size: 19px;
  line-height: 1.7; color: var(--body); }
.us-punkte li::before { content: ""; position: absolute; left: 0; top: .78em;
  width: 20px; height: 3px; border-radius: 2px; background: var(--verlauf); }

/* Die Formel aus dem Word ("Behavior + Feedback = Better Consumer
   Understanding.") steht als Zeile aus Pillen: die beiden Groessen
   umrandet, das Ergebnis auf dem Verlauf. */
.us-formel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 34px 0 0; max-width: var(--satz); }
.us-formel-teil { border: 1px solid var(--rand); border-radius: 999px;
  padding: 12px 22px; font-family: "Sora", system-ui, sans-serif; font-size: 20px;
  letter-spacing: -.4px; color: var(--ink); }
.us-formel-op { font-family: "Sora", system-ui, sans-serif; font-size: 24px;
  background-image: var(--verlauf); -webkit-background-clip: text;
  background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.us-formel-summe { border: 0; border-radius: 999px; padding: 13px 24px;
  background: var(--verlauf); color: #FFFFFF;
  font-family: "Sora", system-ui, sans-serif; font-size: 20px; letter-spacing: -.4px; }

/* Teil 106: Formelgrafik Behavior + Feedback = Better Consumer
   Understanding. Eine Zeile wie eine Rechnung; unter 768 px eine Spalte. */
.us-zf { margin: 48px 0 0; }
.fg-grafik { margin: 0; display: grid; align-items: center;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.55fr);
  column-gap: clamp(12px, 2.4vw, 32px); }
.fg-teil { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0; }
.fg-kreis { width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid #FFFFFF; display: flex; align-items: center;
  justify-content: center; flex: none; }
.fg-kreis svg { width: 32px; height: 32px; display: block; }
.fg-begriff { margin-top: 18px; font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.8px; color: #FFFFFF;
  line-height: 1.15; }
.fg-zeile { margin-top: 6px; font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 16px; color: rgba(255,255,255,.85); }
.fg-op { font-family: "Sora", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(40px, 4.4vw, 60px); line-height: 1; color: #FFFFFF;
  padding-bottom: 46px; }
.fg-ergebnis { background: #FFFFFF; border-radius: 24px;
  padding: 30px clamp(20px, 2.4vw, 34px); display: flex; align-items: center;
  gap: 22px; box-shadow: 0 18px 40px rgba(120, 20, 40, .18); }
.fg-kreis-farbe { border: 2px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              linear-gradient(135deg, #FF36A0, #FF6F00) border-box; }
.fg-summe { font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.8px; line-height: 1.2;
  color: #0d0d12; }
@media (max-width: 767px) {
  .fg-grafik { grid-template-columns: 1fr; row-gap: 14px; justify-items: center; }
  .fg-op { padding-bottom: 0; font-size: 44px; }
  .fg-ergebnis { width: 100%; margin-top: 4px; }
}

/* Teil 108: Stoerer am Kapitel und die Grafik Today -> Tomorrow. */
.us-mit-stoerer { position: relative; }
/* Teil 134: right 14px - gedreht ragte der Stoerer 14 px ueber den Satzspiegel. */
.us-stoerer { position: absolute; right: 14px; top: 0; width: clamp(150px, 15vw, 210px);
  transform: rotate(8deg); transition: transform .3s ease; z-index: 2; }
.us-stoerer:hover { transform: rotate(4deg) scale(1.04); }
.us-stoerer img { display: block; width: 100%; height: auto; }
.us-mit-stoerer .us-block-kopf:first-of-type { padding-right: clamp(170px, 17vw, 240px); }
@media (max-width: 767px) {
  .us-stoerer { position: static; display: block; width: 150px; margin: 0 0 18px auto; }
  .us-mit-stoerer .us-block-kopf:first-of-type { padding-right: 0; }
}
.us-hm { margin: 40px 0 0; display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap; max-width: var(--satz); }
.hm-name { margin: 0 0 10px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase;
  color: rgba(0,0,0,.55); }
.hm-pillen { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hm-pille { border: 1px solid var(--rand); border-radius: 999px; padding: 10px 20px;
  font-family: "Sora", system-ui, sans-serif; font-size: 18px; letter-spacing: -.4px;
  color: var(--ink); background: #FFFFFF; }
.hm-morgen .hm-pille { border-color: transparent; background: var(--verlauf); color: #FFFFFF; }
.hm-plus { font-family: "Sora", system-ui, sans-serif; font-size: 22px; color: #FF4F64; }
.hm-pfeil { padding-top: 26px; display: flex; }
@media (max-width: 767px) {
  .us-hm { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hm-pfeil { padding-top: 0; transform: rotate(90deg); margin-left: 14px; }
  .hm-pille { font-size: 16px; padding: 9px 16px; }
}

/* Teil 115, Jonas 01.10.: Spiegelstriche auf dem Verlauf weiss
   ("Nicht nur beobachten. Auch fragen."). */
.us-verlauf-kapitel .us-punkte li::before { background: #FFFFFF; }

/* Teil 117: Case-Kacheln als Link; Sprungziele unter der festen Navigation. */
a.us-fall-link { display: block; text-decoration: none; color: inherit; }
a.us-fall-link .us-fall-bild img { transition: transform .5s ease; }
a.us-fall-link:hover .us-fall-bild img { transform: scale(1.04); }
a.us-fall-link:hover h3 { background-image: var(--verlauf); -webkit-background-clip: text;
  background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.us-block[id] { scroll-margin-top: 110px; }

/* Teil 157: Kopf ohne Foto (Impressum). Verlauf ueber die ganze
   Breite, Text auf der linken Satzspiegelkante, niedriger als der
   Kopf mit Motiv. */
.kopf-split.kopf-ohne-foto { height: auto; }
.kopf-split.kopf-ohne-foto .kopf-verlauf { width: 100%; }
.navi-fest .kopf-split.kopf-ohne-foto .kopf-verlauf { padding: 190px 0 110px 0; }
.kopf-split.kopf-ohne-foto .kopf-verlauf-innen {
  margin-left: max(20px, calc(50% - var(--satz) / 2)); margin-right: 20px;
  max-width: var(--satz); }
@media (max-width: 1023px) {
  .navi-fest .kopf-split.kopf-ohne-foto .kopf-verlauf { padding: 130px 20px 56px 20px; }
  .kopf-split.kopf-ohne-foto .kopf-verlauf-innen { margin-left: 0; }
}

/* Teil 157: Angaben im Impressum - Anschriften und Kontakte als Raster
   im Satzspiegel, je Feld eine Rubrik und kurze Zeilen. */
.us-angaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 40px; margin: 44px 0 0; max-width: var(--satz); }
.us-angabe .us-rubrik { margin: 0 0 12px; }
.us-angabe p.us-angabe-text { margin: 0; font-size: 19px; line-height: 1.6; color: var(--body); }
.us-angabe a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .us-angaben { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .us-angaben { grid-template-columns: 1fr; gap: 30px; } }
/* Rechtstexte: ein Kapitel, darin Zwischentitel in Sora, kleiner als H2 */
.us-recht h3 { margin: 48px 0 0; max-width: var(--satz); overflow-wrap: break-word; hyphens: auto; font-family: "Sora", system-ui, sans-serif;
  font-weight: 400; font-size: 28px; line-height: 1.24; letter-spacing: -1px; color: var(--ink); }
.us-recht h3 + .us-fliess { margin-top: 14px; }
@media (max-width: 767px) { .us-recht h3 { font-size: 22px; letter-spacing: -.6px; margin-top: 36px; } }

/* Teil 158: Datenschutz - Zwischenstufen und Listen im Rechtstext */
.us-recht h4 { margin: 30px 0 0; max-width: var(--satz); font-family: "Sora", system-ui, sans-serif;
  font-weight: 400; font-size: 21px; line-height: 1.3; letter-spacing: -.4px; color: var(--ink);
  overflow-wrap: break-word; hyphens: auto; }
.us-recht h4 + .us-fliess { margin-top: 10px; }
.us-recht .us-fliess, .us-recht .us-angabe-text { overflow-wrap: anywhere; }
.us-recht .us-angabe-text { margin: 22px 0 0; font-size: 21px; line-height: 1.62; color: var(--body); }
.us-recht-liste { margin: 18px 0 0; padding-left: 24px; max-width: var(--satz); }
.us-recht-liste li { font-size: 19px; line-height: 1.6; color: var(--body); margin: 8px 0 0; }
.us-recht-liste li::marker { color: #FF36A0; }
.us-recht + .us-recht { margin-top: 20px; }

/* Teil 158: Kontaktseite - Angaben links, Formular rechts, im Satzspiegel */
.us-kontakt { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 40px 72px; margin: 44px 0 0; max-width: var(--satz); }
.us-kontakt .us-angaben { grid-template-columns: 1fr; margin: 0; gap: 30px; align-content: start; }
.us-formular { display: flex; flex-direction: column; gap: 16px; }
.us-feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.us-feld label { display: block; margin: 0 0 6px; font-size: 15px; color: var(--body); }
.us-feld input, .us-feld textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--rand);
  border-radius: 8px; background: #FFFFFF; padding: 14px 16px; font: 19px/1.4 "Inter Tight", system-ui, sans-serif;
  color: var(--ink); resize: vertical; }
.us-feld input:focus, .us-feld textarea:focus { outline: none; border-color: #FF36A0;
  box-shadow: 0 0 0 3px rgba(255,54,160,.15); }
.us-formular .formular-einwilligung { display: flex; gap: 12px; align-items: flex-start;
  font-size: 17px; line-height: 1.5; color: var(--body); }
.us-formular .formular-einwilligung input { margin-top: 4px; width: 18px; height: 18px; accent-color: #FF36A0; flex: none; }
.us-formular a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.us-formular .formular-pflicht, .us-formular .formular-hinweis { margin: 0; font-size: 15px; color: var(--body); }
.us-formular .formular-status { margin: 0; font-size: 17px; color: var(--ink); }
.us-formular .us-btn { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.us-versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1023px) { .us-kontakt { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .us-feld-reihe { grid-template-columns: 1fr; } }

/* Teil 161: Case-Detailseite (Vorschlag C, Jonas 02.10.). Links der
   Case-Text und der Steckbrief, rechts das Target gross (halbe Breite,
   laeuft beim Scrollen mit), darunter Anleitung und App-Links. */
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; margin: 40px 0 0; max-width: var(--satz); align-items: start; }
.cs-text h3 { margin: 34px 0 0; font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: 26px; line-height: 1.24; letter-spacing: -.8px; color: var(--ink); }
.cs-text h3 span { display: block; margin: 0 0 8px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; color: #FF36A0; }
.cs-text p { margin: 10px 0 0; font-size: 19px; line-height: 1.6; color: var(--body); }
.cs-rechts { position: sticky; top: 110px; }
/* Teil 169: Case-Video ueber dem Target; mit Video ist die Spalte zu hoch zum Mitlaufen */
.cs-rechts.cs-mit-video { position: static; }
.cs-video { display: flex; justify-content: center; margin: 0 0 24px; padding: 24px; border-radius: 8px; background: #F1F2F4; }
.cs-video video { display: block; width: min(100%, calc(min(70vh, 640px) * var(--vb, 9) / var(--vh, 16))); height: auto;
  aspect-ratio: var(--vb, 9) / var(--vh, 16);  /* Teil 173: Seitenverhaeltnis je Video */
  border-radius: 14px; background: #000000; }
.cs-target { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; margin: 0;
  border: 0; padding: 0; border-radius: 8px; background: #F1F2F4; overflow: hidden; cursor: zoom-in; }
.cs-target img { display: block; width: 100%; height: 100%; object-fit: contain; background: #FFFFFF;
  box-sizing: border-box; padding: var(--rand, 14%); }  /* Teil 170: Target kleiner im Rahmen, Abstand zu den Ecken */
.cs-target-leer { cursor: default; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 17px; color: rgba(0,0,0,.5); padding: 40px; }
.cs-target i { position: absolute; width: 48px; height: 48px; border: 4px solid #FF36A0; pointer-events: none; }
.cs-target i:nth-of-type(1) { left: 14px; top: 14px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.cs-target i:nth-of-type(2) { right: 14px; top: 14px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; border-color: #FF6F00; }
.cs-target i:nth-of-type(3) { left: 14px; bottom: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.cs-target i:nth-of-type(4) { right: 14px; bottom: 14px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; border-color: #FF6F00; }
.cs-lupe { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px;  /* Teil 171: mittig zwischen den unteren Ecken */
  background: rgba(13,13,18,.72); color: #FFFFFF;
  font-size: 13px; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
.cs-rechts h3 { margin: 28px 0 0; font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: 30px; letter-spacing: -1px; color: var(--ink); }
.cs-rechts > p { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--body); }
.cs-schritte { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.cs-schritte li { counter-increment: s; position: relative; padding-left: 38px; margin: 10px 0 0;
  font-size: 17px; line-height: 1.5; color: var(--body); }
.cs-schritte li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--verlauf); color: #FFFFFF; font-size: 14px;
  display: flex; align-items: center; justify-content: center; }
.cs-stores { display: flex; gap: 10px; margin: 22px 0 0; flex-wrap: wrap; }
.cs-store { display: inline-flex; align-items: center; gap: 10px; background: #000000; color: #FFFFFF !important;
  border-radius: 10px; padding: 9px 16px; text-decoration: none; }
.cs-store small { display: block; font-size: 11px; opacity: .8; line-height: 1; }
.cs-store b { display: block; font-weight: 500; font-size: 17px; line-height: 1.2; }
.cs-store[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.cs-tabelle { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: 17px; }
.cs-tabelle th, .cs-tabelle td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--rand); vertical-align: top; }
.cs-tabelle th { width: 42%; padding-right: 12px; padding-top: 16px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: #FF36A0; }
.cs-tabelle td { color: var(--ink); }
.cs-aktion { margin-top: 56px; }
/* Vollbild fuer das Target */
.cs-vollbild { position: fixed; inset: 0; z-index: 100000; background: rgba(8,8,12,.96);
  display: flex; align-items: center; justify-content: center; padding: 4vmin; cursor: zoom-out; }
.cs-vollbild[hidden] { display: none; }
.cs-vollbild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-vollbild button { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 28px; line-height: 1; cursor: pointer; }
@media (max-width: 1023px) { .cs-grid { grid-template-columns: 1fr; gap: 44px; } .cs-rechts { position: static; } }

/* Teil 124: drei Claimsaetze nebeneinander (Knowledge, Owned Media).
   Jeder Satz mit der Verlaufskante darueber - wie drei kleine Kapitel. */
.us-claim-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px; margin: 40px 0 0; max-width: var(--satz); }
.us-claim-reihe .us-claim { margin: 0; padding-top: 20px; position: relative; text-wrap: balance; }
.us-claim-reihe .us-claim::before { content: ""; position: absolute; left: 0; top: 0;
  width: 56px; height: 3px; border-radius: 2px; background: var(--verlauf); }
@media (max-width: 767px) { .us-claim-reihe { grid-template-columns: 1fr; gap: 22px; } }

/* Der eigene Punkt in der Navigation: voll deckend statt 70 Prozent. */
header nav.nav-leiste a.nav-hier { color: #FFFFFF !important; opacity: 1 !important; }

.us-aktion { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; }
.us-nebenlink { font-size: 17px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rand); padding-bottom: 2px; }
.us-nebenlink:hover { border-bottom-color: #FF36A0; }

.us-claimzeilen { margin: 34px 0 0; max-width: var(--satz);
  font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: 30px; line-height: 1.24; letter-spacing: -1.1px; color: var(--ink); }

/* Claims und Ketten */
.us-claim { margin: 34px 0 0; max-width: var(--satz);
  font-family: "Sora", system-ui, sans-serif; font-size: 28px; line-height: 1.24;
  letter-spacing: -1px; color: var(--ink); }
.us-kette { margin: 40px 0 0; max-width: var(--satz); }

/* Knopf */
.us-aktion { margin-top: 32px; }
.us-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px;
  border-radius: 999px; background: var(--verlauf); color: #FFFFFF !important;
  font-family: "Inter Tight", sans-serif; font-size: 16px; font-weight: 500;
  text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.us-btn:hover { filter: brightness(1.08); }
.us-btn-weiss { background: #FFFFFF; color: #000000 !important; text-shadow: none; }
.us-winkel { display: inline-flex; }

/* ── Kopf 14 Bild pur ───────────────────────────────────────────── */
.kopf { position: relative; overflow: hidden; }
.kopf-foto { position: absolute; inset: 0; background-size: cover;
  background-position: center; z-index: 0; }
.kopf-bildpur { height: 760px; }
/* neutraler Schleier nur oben, damit die weisse Navigation lesbar bleibt */
.kopf-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,10,14,.46) 0%, rgba(8,10,14,.12) 16%,
              rgba(8,10,14,0) 26%); }
/* Blend-Welle: gedreht, harte Kante unten auf der Bildkante */
.kopf-welle { position: absolute; left: 0; bottom: 0; width: 100%; height: 170px;
  display: block; object-fit: fill; z-index: 5; pointer-events: none;
  transform: scaleY(-1); filter: brightness(0) invert(1); }
/* Die Karte haengt am Container, nicht am Fensterrand. Beim ersten Bauen
   sass sie auf left:75 und stand damit 111 px links neben dem Textblock
   (gemessen: Karte 75, Lauftext 186). */
.kopf-karten-lage { position: absolute; left: 0; right: 0; bottom: 200px; z-index: 20;
  max-width: 1290px; margin: 0 auto; padding: 0 75px; }
/* Die Karte wird um ihr eigenes Innenmass nach links geschoben, damit die
   Schriftkante der Ueberschrift auf dem Satzspiegel sitzt (186 px im
   1512er Fenster) und nicht 48 px daneben - gemessen: vorher 234. */
.kopf-karte { max-width: 640px; background: #FFFFFF; border-radius: 8px;
  padding: 44px 48px; margin-left: -48px; box-shadow: 0 26px 60px rgba(16,24,40,.22); }
/* Lange Ueberschrift: eine Stufe kleiner und die Karte breiter, sonst
   bricht sie in vier Zeilen und erschlaegt das Motiv dahinter
   ("The technology behind your connected product."). */
.kopf .us-h1-lang { font-size: 48px; letter-spacing: -1.8px; }
.kopf-karte-breit { max-width: 760px; }
/* Karte auf Verlauf: Schatten in der Markenfarbe statt in Grau - ein
   grauer Schlagschatten unter einer farbigen Flaeche sieht schmutzig aus.
   Die Schrift steht weiss, die Rubrik nimmt dieselbe weisse Fassung wie
   auf der Verlaufshaelfte in 12 Split. */
.kopf-karte-verlauf { background: var(--verlauf);
  box-shadow: 0 26px 60px rgba(255, 54, 160, .28); }
/* Weiss kommt nicht aus einer neuen Regel, sondern aus den Klassen, die
   die Verlaufshaelfte in 12 Split schon benutzt: us-h1-weiss,
   us-rubrik-weiss, kopf-sub-weiss. Eine eigene Farbregel haette gegen
   .kopf .us-h1 (mit !important) ohnehin verloren. */

.kopf-sub { margin: 22px 0 0; font-size: 20px; line-height: 1.55; color: var(--body);
  max-width: 520px; }
.kopf-sub-weiss { color: rgba(255,255,255,.92); }

/* ── Kopf 12 Split ──────────────────────────────────────────────────
   Die Navigation ist ein Balken ueber die ganze Fensterbreite (Teil 32),
   oben transparent, ab dem ersten Scrollen deckend schwarz (Teil 41).
   Ueber dem geteilten Kopf lief sie also quer durch die Kante bei 52 %.
   Jonas 11.09.: Kante wieder ueber die ganze Hoehe, dafuer die Navi
   schon beim Ankommen schwarz hinterlegt - "aber nur den Teil
   hinterlegen, in dem Text steht".
   Umgesetzt als Flaeche hinter dem Inhalt, nicht als neue Navigation:
   der Balken selbst bleibt unberuehrt, die Flaeche sitzt genau auf
   seinem Innenmass (links und rechts derselbe Ausdruck wie sein
   Innenabstand in main.css: max(20px, (100% - 1080px) / 2)), unten
   abgerundet, damit sie als angehaengter Reiter liest und nicht als
   schwebende Pille an der Fensterkante.
   Beim Scrollen greift .nav-gescrollt und damit wieder genau das
   Verhalten der Startseite - deshalb das :not(). */
.kopf-split { height: 680px; display: flex; box-sizing: border-box; position: relative; }
.kopf-split .kopf-verlauf { width: 52%; background: var(--verlauf); position: relative;
  display: flex; flex-direction: column; justify-content: center; z-index: 2;
  /* unten Platz fuer die Welle, sonst steht der Text im Ausfaden */
  padding: 150px 60px 210px 0; }
/* Linke Kante des Textes auf dem Satzspiegel. Gerechnet wird aus der
   Breite der Verlaufshaelfte, nicht aus vw: die Haelfte ist 52 % der
   Seitenbreite, also ist die Seite 100/52 = 1,923 mal so breit, und die
   linke Satzspiegelkante liegt bei (Seite - Mass) / 2 = 96,154 % der
   Haelfte minus dem halben Mass. Der Umweg lohnt sich, weil 50vw die
   Bildlaufleiste mitzaehlt und die Kopfzeile dann auf Windows ein paar
   Pixel neben dem Inhalt darunter staende.
   ACHTUNG: die 96,154 % haengen an den 52 % der Haelfte. Wird der Split
   geaendert, muss dieser Wert mit. */
.kopf-split .kopf-verlauf-innen {
  margin-left: max(20px, calc(96.1538% - var(--satz) / 2));
  margin-right: 60px;
  max-width: 560px; }
/* Das Motiv steht als Bild in der Haelfte, nicht als Hintergrund. Grund:
   nur so kann es auf schmalen Stufen in seinem eigenen Seitenverhaeltnis
   ganz gezeigt werden, statt auf eine feste Hoehe beschnitten zu werden.
   Auf dem Rechner fuellt es die Haelfte (cover), der Bildausschnitt wird
   ueber object-position je Seite gesetzt. */
.kopf-split .kopf-foto { position: relative; inset: auto; width: 48%;
  overflow: hidden; }
/* !important, weil das Theme-Blatt img global auf height:auto setzt -
   ohne das steht das Querformat nur 487 px hoch in einer 680 px hohen
   Haelfte und darunter klafft Weiss (gemessen am 17.09.). */
.kopf-split .kopf-foto .kopf-bild { display: block; width: 100%;
  height: 100% !important; object-fit: cover; }
/* Die Welle liegt ueber beiden Haelften, darum ein hoeherer z-Index als
   die Verlaufshaelfte (2). Sonst faedet nur das Foto aus. */
.kopf-welle-split { z-index: 6; }

/* Die Flaeche sitzt auf dem Satzspiegel der Seite, nicht auf dem
   Innenmass der Navigation. Gemessen: die Navigation steht in main.css
   auf 1080 px mittig im Fenster (216 bis 1296), der Lauftext dagegen auf
   1080 px ab dem Containerrand plus Rand 75 (186 bis 1266) - 30 px
   Versatz, den man an der schwarzen Flaeche sofort sieht. Jonas 11.09.:
   "bitte den Schwarzraum in der Nav Bar auf Breite des Satzspiegels
   ziehen." Also wird auf dieser Seite auch der Inhalt der Navigation auf
   denselben Satzspiegel gelegt, sonst haengt der Demo-Knopf 30 px aus
   der Flaeche heraus.
   Rechts 60 px mehr als links, weil der Satzspiegel mit 1080 px im
   1290er Container linksbuendig sitzt (186 bis 1266) und nicht mittig. */
/* Der Inhalt sitzt nicht auf der Kante der Flaeche, sondern mit Luft
   darin: Jonas 11.09. "aktuell kleben die Elemente zu sehr an der
   Kante". Die Flaeche bleibt auf dem Satzspiegel (186 bis 1266 im
   1512er Fenster), der Inhalt rueckt beidseitig um --navi-luft ein. */
.navi-kasten { --navi-luft: 30px; }
.navi-kasten header nav.nav-leiste {
  padding-left: calc(max(20px, calc((100% - 1290px) / 2 + 75px))
                     + var(--navi-luft)) !important;
  padding-right: calc(max(20px, calc((100% - 1290px) / 2 + 135px))
                      + var(--navi-luft)) !important; }
.navi-kasten header nav.nav-leiste:not(.nav-gescrollt)::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: max(20px, calc((100% - 1290px) / 2 + 75px));
  right: max(20px, calc((100% - 1290px) / 2 + 135px));
  background: #000000; border-radius: 0 0 8px 8px; z-index: -1;
  pointer-events: none; }

/* Weg "fest" (Stand 14.09., von Jonas bestellt): keine schwarze Flaeche
   auf dem Satzspiegel mehr, sondern die Leiste durchgehend deckend -
   genau das Bild, das sonst erst beim Scrollen entsteht (.nav-gescrollt
   aus Teil 41). Damit steht beim Ankommen und beim Scrollen dasselbe da,
   und die Kante des Splits laeuft nicht mehr durch die Navigation.
   Jonas 14.09.: "Du kannst dann auch die Navi Leiste von Anfang an
   durchlaufen lassen ... wie wenn man weiter runterscrollt."
   Kein Eingriff in die Navigation selbst: dieselbe Deklaration wie im
   gescrollten Zustand, nur ohne die Bedingung. */
.navi-fest header nav.nav-leiste {
  background: #000000 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, .10) !important; }
/* Ohne Welle faedet der Kopf nicht mehr aus, er endet auf einer Kante.
   Jonas 14.09.: "Nimm bitte bei der Version 12_Split den Verlauf unten am
   Hero-Rand wieder raus." Der Innenabstand unten war nur der Platz fuer
   das Ausfaden - ohne Welle steht der Text sonst zu hoch. */
.navi-fest .kopf-welle-split { display: none; }
/* Die rechte Luft steht am inneren Block, nicht an der Haelfte:
   sonst rechnen die Prozente der Kopfzeile auf einer um 60 px
   verkuerzten Breite und die Zeile stuende zu weit links. */
.navi-fest .kopf-split .kopf-verlauf { padding: 170px 0 140px 0; }

/* Weg "band" (Stand 10.09., zum Vergleich behalten): kein schwarzer
   Kasten, dafuer bleibt oben ein voller Verlaufsstreifen frei und das
   Foto beginnt erst darunter. Dann traegt der Kopf den Verlauf, nicht
   die linke Haelfte - sonst laeuft die Rampe im Streifen ueber 1512 px
   und in der Haelfte ueber 786 px und an der Kante stehen zwei
   verschiedene Orangetoene. */
.navi-band .kopf-split { padding-top: 124px; background: var(--verlauf); height: 700px; }
.navi-band .kopf-split .kopf-verlauf { background: none; padding: 26px 0 60px 0; }
.navi-band .kopf-split .kopf-foto::after { content: ""; position: absolute;
  left: 0; right: 0; top: 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,14,.30) 0%, rgba(8,10,14,0) 100%); }
.kopf-split .us-h1 { font-size: 52px; letter-spacing: -2px; }

/* Zwischenstufe des Kopfes: zwischen 1024 und 1199 px ist die
   Verlaufshaelfte nur noch rund 400 px breit. Bei 52 px bricht dort jede
   laengere Kopfzeile ein zweites Mal um - gemessen am 23.09.: Cases und
   Solutions vier Zeilen statt drei, Insights zwei statt einer, Trusted
   Partner drei statt zwei bis 1239 px. Eine
   Schriftstufe kleiner, und jeder Satz steht wieder auf seiner Zeile. */
@media (min-width: 1024px) and (max-width: 1239px) {
  .kopf-split .us-h1 { font-size: 40px; letter-spacing: -1.5px; }
}

/* Zwischenstufe: auf dem Tablet zwei Spalten statt drei - drei Karten
   auf 700 px Textbreite waeren 220 px breit, da bricht jede Zeile. */
@media (min-width: 768px) and (max-width: 1099px) {
  .us-karten { --spalten: 2 !important; }
  .us-faelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .us-container { padding: 0 32px; }
  .us-h1 { font-size: 40px; letter-spacing: -1.4px; }
  .kopf .us-h1-lang { font-size: 34px; letter-spacing: -1.2px; }
  .us-h2 { font-size: 27px; letter-spacing: -.9px; }
  .us-lead { font-size: 21px; }
  .us-fliess, .us-antwort { font-size: 18px; }
  .us-claim { font-size: 22px; letter-spacing: -.7px; }
  /* 44 px ergaben auf 326 px Textbreite fuenf Zeilen - zu viel fuer
     zwei Saetze. */
  .us-verlauf-claim { font-size: 30px; letter-spacing: -1px; }
  .us .us-blocktitel { font-size: 28px; letter-spacing: -1px; }
  .us-kante { width: 104px; height: 3px; margin-bottom: 18px; }
  .us-claimzeilen { font-size: 22px; letter-spacing: -.7px; }
  .us-block { padding-top: 64px; }
  /* Zweispalter auf dem Handy untereinander, Bild zuerst */
  .us-zwei { flex-direction: column; gap: 26px; }
  .us-zwei-bild { flex: 1 1 auto; width: 100%; order: -1; }
  .us-bv { flex-direction: column; gap: 10px; padding-top: 18px; margin-top: 30px; }
  .us-bv-mark { flex: 0 0 auto; padding-top: 0; }
  .us-bv p { font-size: 21px; letter-spacing: -.5px; }
  .kopf-bildpur { height: 620px; }
  /* Auf dem Handy sitzt die Karte fast randlos, damit die Schriftkante
     wieder auf dem Satzspiegel steht (32 px = 10 Rand + 22 Innenmass).
     Gemessen war die Ueberschrift vorher bei 103 px. */
  .kopf-karten-lage { bottom: 130px; padding: 0 10px; }
  .kopf-karte { margin-left: 0; padding: 28px 22px; max-width: none; }
  .kopf-split { height: auto; flex-direction: column; padding-top: 0; }
  /* Auf dem Handy stehen die Haelften untereinander - eine Welle quer
     ueber die Unterkante wuerde nur das Foto anschneiden. */
  .kopf-welle-split { display: none; }
  .navi-kasten { --navi-luft: 14px; }
  .navi-kasten header nav.nav-leiste:not(.nav-gescrollt)::before { border-radius: 0; }
  .kopf-split .kopf-verlauf,
  /* gleiche Spezifitaet wie die Regel fuer den Rechner, sonst faellt auf
     dem Handy der linke Rand von 32 auf 0 zurueck */
  .navi-fest .kopf-split .kopf-verlauf { width: 100%; padding: 130px 20px 56px 20px; }
  .kopf-split .kopf-verlauf-innen { margin-left: 0; max-width: none; }
  .kopf-split .us-h1 { font-size: 40px; letter-spacing: -1.4px; }
  /* Jonas 17.09.: "Der Inhalt der Bilder soll in allen responsiven
     Stufen klar erkennbar sein." Sobald die beiden Haelften
     untereinander stehen, wird das Motiv deshalb nicht mehr
     beschnitten: es behaelt sein Seitenverhaeltnis 3:2 und ist ganz zu
     sehen. Vorher stand da eine feste Hoehe von 320 px - auf dem Tablet
     waren das 2,6:1 und damit war vom Kopf des Motivs die Haelfte weg. */
  .kopf-split .kopf-foto { width: 100%; height: auto; }
  .kopf-split .kopf-foto .kopf-bild { height: auto !important; }
  .kopf-split .kopf-foto::after { height: 0; }
  /* v4: Verhalten der Kettengrafiken steht einheitlich in main.css
     (Abschnitt "v4: Ablauf- und Kettengrafiken"). */
  .us-karten { --spalten: 1 !important; gap: 14px; }
  .us-faelle { grid-template-columns: 1fr; gap: 20px; }
  .us-karte { padding: 20px 20px 22px; }
  .us-karte h3 { font-size: 19px; }
  .us-punkte li { font-size: 17px; padding-left: 28px; }
  .us-formel { gap: 10px; }
  .us-formel-teil, .us-formel-summe { font-size: 17px; padding: 10px 18px; }
  .us-frage > summary { font-size: 20px; padding: 18px 18px; }
  .us-antworten { padding: 0 18px 18px; }
}

/* ── Typografie und Rubrikgroesse, seit 16.09. fuer alle Unterseiten ──
   Stand der Datei Runde3_Solutions_12_Split, die Jonas abgenommen hat.
   Vorher lag das als seiteneigenes Blatt nur auf Solutions. */
.us .us-rubrik, .kopf .us-rubrik { font-size: 15px; letter-spacing: .14em; }
.us .us-bv .us-rubrik { margin-bottom: 12px; }

/* ── Typografie auf den Stand der Startseite ────────────────────────
   Jonas 16.09.: "selbe ZAB, Schriftgroessen in Copytext HL etc. wie auf
   Homepage." Gemessen am 16.09. in index.html, 1512 px Fenster:
     Sektionsueberschrift  Sora 48 / 57,6 (1,2) / -2,4 px
     Lauftext auf 1080     Inter Tight 19 / 32,3 (1,7)   (.t55-fliess)
     Lead in einer Sektion Inter Tight 18 / 27 (1,5), Schnitt 500
     Claimzeile            Sora 30 / 36,6 (1,22) / -1,1 px  (.t55-claim)
     Hero-Ueberschrift     Sora 76 / 79,8 (1,05) / -3,8 px = -0,05 em
   Auf 390 px: H2 32 / 35,2 (1,1), Lauftext 17 / 28,9, Claim 23 / 28,06.

   Uebernommen wird alles, was eine Entsprechung hat. Zwei Stellen
   brauchen eine Entscheidung, beide unten begruendet. */

/* Blockueberschrift = Sektionsueberschrift der Startseite. Vorher 40 px. */
/* Mit 48 px brach die Zeile im alten Mass 860 schon nach vier Woertern.
   Auf der Startseite steht die Sektionsueberschrift ueber die ganze
   Breite, hier also auf dem Satzspiegel 1080 wie der Lauftext. */
.us .us-blocktitel { font-size: 48px; line-height: 1.2; letter-spacing: -2.4px;
  max-width: var(--satz); }

/* Lauftext: 19 / 1,7 statt 21 / 1,62. Genommen ist .t55-fliess, weil das
   auf der Startseite der Lauftext auf demselben Satzspiegel 1080 ist -
   der Text in den mittigen Bloecken steht dort auf 1250 und ist 16 px. */
.us .us-fliess { font-size: 19px; line-height: 1.7; }

/* ENTSCHEIDUNG 1 - Lead: eine Entsprechung fuer "26 px" hat die
   Startseite nicht. Dort ist der Lead kein eigener Grad, sondern
   Lauftext einen Schritt groesser und im Schnitt 500 (18 zu 16, also
   Faktor 1,125). Dasselbe Verhaeltnis auf 19 angewandt: 21 px, Medium.
   Damit ist der Lead nicht mehr das zweitgroesste Element der Seite. */
.us .us-lead { font-size: 21px; line-height: 1.7; font-weight: 500; }

/* Claim und Business-Value-Satz stehen schon auf 30 px; angeglichen wird
   nur der Zeilenabstand (1,24 -> 1,22). */
.us .us-claimzeilen, .us .us-bv p.us-fakt { line-height: 1.22; }

/* ENTSCHEIDUNG 2 - Ueberschrift im Kopf: 76 px wie im Hero der
   Startseite gehen hier nicht, die Karte ist 760 px breit und die linke
   Haelfte im Split 560 - die Zeile braeche vier- bis fuenfmal.
   Uebernommen sind darum die Verhaeltnisse: Zeilenabstand 1,05 und
   Sperrung -0,05 em, gerechnet auf die jeweilige Groesse (48 bzw. 52). */
.kopf .us-h1 { line-height: 1.05; }
.kopf .us-h1-lang { letter-spacing: -2.4px; }
.kopf-split .us-h1 { letter-spacing: -2.6px; }

@media (max-width: 1023px) {
  .us .us-blocktitel { font-size: 32px; line-height: 1.1; letter-spacing: normal; }
  .us .us-fliess { font-size: 17px; line-height: 1.7; }
  .us .us-lead { font-size: 19px; line-height: 1.7; }
  .us .us-claimzeilen, .us .us-bv p.us-fakt { font-size: 23px; line-height: 1.22;
    letter-spacing: -.7px; }
  .kopf .us-h1 { line-height: 1.1; }
}

/* ══ Lauftext der Unterseiten, Stand 30.09.2026 ══════════════════
   Jonas 30.09.: "Uebernimm bitte fuer die Rollen auf den Unterseiten fuer
   die Kapitel-Fliesstexte die selbe Schriftgroesse und Zeilenabstand wie
   auf der Startseite. Gib ausserdem bitte die regel mit, dass auch hier
   nichts im text gefettet wird und absaetze grundlegend schoene und
   sinnvolle umbrueche beinhalten. Es sollen keine einzelnen woerter zB in
   der letzen Reihe stehen. Minimum 3 woerter in einer letzten reihe.
   ansonsten anders umbrechen."

   GEMESSEN VORHER, alle fuenf Seiten, fuenf Breiten:

       us-fliess    19 / 1,70     ab 1023 px: 17 / 1,70
       us-lead      21 / 1,70 / 500   ab 1023 px: 19
       us-antwort   21 / 1,62     ab 1023 px: 18

   Die Startseite steht seit Teil 75 auf EINEM Mass fuer allen laufenden
   Text: 19 / 1,62, ab 767 px 18, ab 639 px 17 / 1,60. Genau das gilt ab
   jetzt auch hier - und zwar fuer Lead, Fliesstext und Q&A-Antwort
   gemeinsam. Das ist dieselbe Entscheidung wie damals: zwei Grade bei
   gleicher Satzbreite lesen sich als Fehler, nicht als Stufe.

   Der Lead verliert damit seine 21 px und sein Gewicht 500. Soll er
   seine Stufe zurueck, ist es eine Zeile - siehe die Notiz unten.

   NICHT ANGEFASST: die Satzbreite. Der Lauftext der Unterseiten laeuft
   ueber die ganzen 1200 px, die Startseite haelt ihn bei 920 px
   (Entscheidung 29.09., "Lesbarkeit vor Kante"). Das ist eine eigene
   Frage, sie steht in der Antwort an Jonas. */

.us .us-lead,
.us .us-fliess,
.us .us-antwort {
  font-size: 19px;
  line-height: 1.62;
  font-weight: 400;
  /* Schoene Umbrueche: der Browser rechnet den ganzen Absatz durch
     statt Zeile fuer Zeile und vermeidet dabei kurze Schlusszeilen und
     zerrissene Flattersatzkanten. Wo es das nicht kann, greift die
     Bindung der letzten drei Woerter aus schlusszeile(). */
  text-wrap: pretty;
  hyphens: none;
}
@media (max-width: 767px) {
  .us .us-lead, .us .us-fliess, .us .us-antwort { font-size: 18px; }
}
@media (max-width: 639px) {
  .us .us-lead, .us .us-fliess, .us .us-antwort {
    font-size: 17px; line-height: 1.6;
  }
}

/* Keine Fettungen im Lauftext - dieselbe Regel wie auf der Startseite
   (Teil 81). Heute steht in keinem us-Lauftext ein <strong>; die Regel
   steht hier, damit das so bleibt, wenn jemand einen Absatz ergaenzt. */
.us .us-lead strong, .us .us-lead b,
.us .us-fliess strong, .us .us-fliess b,
.us .us-antwort strong, .us .us-antwort b,
.us .us-einstieg strong, .us .us-einstieg b {
  font-weight: inherit;
}

/* Hat der Einstieg eine Headline (Cases, seit 30.09.), braucht der
   Lead darunter Luft - er steht auf margin 0, weil er sonst immer das
   erste Element im Container ist. Gemessen: ohne diese Regel klebt
   "Entdecke, wie Marken ..." direkt unter der Ueberschrift. 22 px ist
   derselbe Abstand, den us-fliess von sich aus mitbringt. */
.us .us-block-kopf + .us-lead { margin-top: 22px; }


/* ══ Ein ganzes Kapitel auf dem Verlauf ════════════════════════
   Jonas 30.09.: "Texte die auf verlauf stehen muessen weiss sein."
   Das ist die Regel vom 03.09. ("im Header steht alles auf 100 % Weiss")
   und aus Teil 76 auf der Startseite (dunkler Grund -> Lauftext weiss),
   hier auf ein Kapitel der Unterseiten angewandt.

   Die Karten verlieren dabei ihre weisse Fuellung. Eine weisse Karte auf
   dem Verlauf waere eine weisse Flaeche mit dunkler Schrift - genau das
   Gegenteil der Regel. Stattdessen stehen sie als Umrisse: durchsichtig,
   weisse Kontur, weisse Schrift. */

.us-verlauf-kapitel .us-block { padding-top: 0; }
.us-verlauf-kapitel .us-h2,
.us-verlauf-kapitel .us-blocktitel,
.us-verlauf-kapitel .us-claimzeilen,
.us-verlauf-kapitel .us-unterzeile,
.us-verlauf-kapitel .us-lead,
.us-verlauf-kapitel .us-fliess,
.us-verlauf-kapitel .us-fliess strong {
  color: #FFFFFF !important;
}
.us-verlauf-kapitel .us-bildnotiz { color: rgba(255,255,255,.72) !important; }

/* Karten auf dem Verlauf: schwarz gefuellt (Teil 144, Jonas 01.10.:
   "Boxen bitte in schwarz auf dem Verlaufshintergrund"). Vorher weisse
   Umrisse. Texte weiss, Piktogramme im Verlauf. */
.us-verlauf-kapitel .us-karte {
  background: #000000 !important;
  border-color: #000000 !important;
}
.us-verlauf-kapitel .us-karte h3 { color: #FFFFFF !important; }
.us-verlauf-kapitel .us-karte p { color: rgba(255,255,255,.88) !important; }
/* Die Piktogramme tragen den Verlauf als stroke="url(...)". Auf den
   schwarzen Karten (Teil 144) bleibt er sichtbar - Jonas 01.10.: "bitte
   Icons mit Farbverlauf wie gehabt". Bis Teil 143 wurden sie hier weiss
   ueberschrieben, weil die Karten durchsichtig auf dem Verlauf standen. */

/* Aufzaehlungen und Pillen, falls ein solches Kapitel sie mitbringt */
.us-verlauf-kapitel .us-punkte li { color: #FFFFFF !important; }
.us-verlauf-kapitel .us-pille {
  background: transparent !important; color: #FFFFFF !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* Wenn der Lead seine eigene Stufe zurueckbekommen soll, reicht:
     .us .us-lead { font-size: 21px; }
   Das Gewicht bleibt in jedem Fall bei 400. */
/* ── Teil 96: GF-Feedback 30.09. ── */
/* Aktiver Menuepunkt: der Hover-Zustand des Themes steht dauerhaft */
header .nav-aktiv .nav-item-line { width: 10.5rem !important; }
header .nav-aktiv .nav-item-gradient { opacity: .8 !important; }
header .nav-aktiv .nav-item-text { color: #FFFFFF !important; }
/* KI-Hinweis auf KI-Bildern, in der snoop it! Schrift */
.us-bild, .kopf-split .kopf-foto { position: relative; }
.ki-hinweis { position: absolute; left: 12px; bottom: 12px; z-index: 7;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 12px; line-height: 1;
  font-weight: 500; letter-spacing: .02em; color: #FFFFFF; background: rgba(13,13,18,.62);
  padding: 6px 9px; border-radius: 999px; pointer-events: none; }
@media (max-width: 767px) { .ki-hinweis { font-size: 11px; left: 8px; bottom: 8px; } }