/* CyberSinn — shared static-site styles (ersetzt das Claude-Design-Runtime).
   Die seiteneigenen <style>-Blöcke (Responsive, Reveal-Transitions) bleiben inline;
   diese Datei ergänzt nur, was für die eigenständige statische Seite nötig ist. */

/* ==========================================================================
   SEITENWECHSEL
   Ohne Übergang blitzt zwischen zwei Dokumenten kurz der Hintergrund auf und
   die Seite springt — man merkt, dass hier einzelne HTML-Dateien liegen.
   Die View-Transitions-API blendet stattdessen weich über: Der Kopfbereich
   bleibt als fester Anker stehen (eigener view-transition-name, dadurch
   eigene Ebene), nur der Inhalt darunter wird getauscht. Das lässt die Seite
   wie eine zusammenhängende Anwendung wirken statt wie verlinkte Dateien.

   Bewusst knapp gehalten: Ein Seitenwechsel passiert oft, also darf er nicht
   auffallen. Raus schnell (100ms, der Nutzer hat entschieden), rein etwas
   ruhiger (260ms, das System antwortet) — asymmetrisch, nie über 300ms.

   Browser ohne Unterstützung (derzeit Firefox) navigieren wie bisher, ohne
   Übergang. Es geht nichts kaputt, es fehlt nur der Effekt.
   ========================================================================== */
@view-transition { navigation: auto; }

/* Der Kopfbereich ist auf allen Seiten gleich — er bekommt eine eigene Ebene
   und bleibt dadurch beim Wechsel sichtbar stehen, statt mitzublenden. */
header { view-transition-name: cs-header; }

::view-transition-old(root) {
  animation: cs-page-out 100ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: cs-page-in 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes cs-page-out { to { opacity: 0; } }
@keyframes cs-page-in { from { opacity: 0; transform: translateY(8px); } }

/* Reveal: ohne JS ist alles sichtbar. Erst wenn JS die Klasse .js setzt,
   starten Elemente versteckt (.is-out) und werden per IntersectionObserver
   eingeblendet (.is-in). So bleibt die Seite auch ohne JavaScript lesbar. */
.js [data-reveal].is-out,
.js [data-reveal-item].is-out { opacity: 0; transform: translateY(18px); }
[data-reveal], [data-reveal-item] { opacity: 1; }

/* ==========================================================================
   BEWEGUNG NACHSCHÄRFEN
   Die Seiten bringen aus dem Export 500ms lange Einblendungen mit 20px
   Versatz mit. Das liest sich träge und ist das erste, was eine Seite
   generisch wirken lässt. Kürzer und kleiner wirkt teurer: Man nimmt die
   Bewegung kaum bewusst wahr, der Inhalt ist einfach da.
   ========================================================================== */
[data-reveal] { transition-duration: 380ms !important; }
[data-reveal-item] { transition-duration: 320ms !important; }
.js [data-reveal].is-out { transform: translateY(10px); }
.js [data-reveal-item].is-out { transform: translateY(7px); }

/* Tastenrückmeldung: Eine Schaltfläche muss auf den Druck reagieren, sonst
   fühlt sie sich tot an. Gilt auch für Touch — dort ist es die einzige
   Rückmeldung, die es überhaupt gibt. */
a[data-card]:active { transform: scale(0.985) !important; transition-duration: 100ms !important; }

/* Zeigergeräte ohne Hover (Touch): Der Hover-Zustand bleibt nach dem Tippen
   kleben — die Karte sähe dauerhaft angehoben aus. Dort keine Anhebung. */
@media (hover: none), (pointer: coarse) {
  .scp6:hover, .scp7:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   WEBINARREIHE (Startseite)
   Die Fläche ist kein Videostandbild, sondern eine Abspielfläche: Sie gibt
   vor, was einen erwartet, statt einen Ausschnitt vorzutäuschen, den es so
   nicht gibt. Führt auf den Vimeo-Kanal.

   Farbwahl: Blau statt Orange. Orange heisst auf dieser Seite "hier
   abschliessen" — Hero und Schluss-Aufruf. Die Reihe ist Wissen, kein
   Verkauf, und Blau ist bereits die Farbe der präventiven Disziplinen.
   So konkurriert der Block nicht mit den beiden Haupt-Handlungen.
   ========================================================================== */
.cs-webinar__panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(62, 134, 209, 0.20), transparent 62%),
    linear-gradient(160deg, #14171c 0%, #0d0f11 70%);
  transition: border-color var(--dur-base) var(--ease-out);
}
/* Feines Raster als Anklang an die Netz-Motive der Leistungsgrafiken —
   sehr leise, es soll die Schrift nicht stören. */
.cs-webinar__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 78% 18%, #000 10%, transparent 70%);
}
.cs-webinar__label {
  position: relative;
  font-size: var(--fs-13); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--cs-blue);
}
.cs-webinar__title {
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(24px, 3.1vw, 38px); line-height: 1.08;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.cs-webinar__credit {
  position: relative;
  font-size: var(--fs-14); color: rgba(255, 255, 255, 0.42);
}
/* Abspielzeichen oben rechts — die einzige Stelle, an der die Fläche laut ist. */
.cs-webinar__play {
  position: absolute; top: 26px; right: 28px;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cs-blue); color: #0B1016;
  box-shadow: 0 0 0 0 rgba(62, 134, 209, 0.42);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cs-webinar__panel:hover { border-color: rgba(62, 134, 209, 0.55); }
  .cs-webinar__panel:hover .cs-webinar__play {
    transform: scale(1.08);
    box-shadow: 0 0 0 12px rgba(62, 134, 209, 0.12);
  }
}
.cs-webinar__cta {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  font-size: var(--fs-16); font-weight: var(--fw-bold);
  padding: 15px 30px; border-radius: var(--r-pill);
  background: var(--cs-blue); color: #0B1016;
  transition: background var(--dur-fast) var(--ease-out),
              transform 160ms var(--ease-out);
}
.cs-webinar__cta:hover { background: #4f97e0; color: #0B1016; }
.cs-webinar__cta:active { transform: scale(0.97); }

@media (max-width: 768px) {
  .cs-webinar__panel { padding: 20px 20px; aspect-ratio: 4 / 3; }
  .cs-webinar__play { width: 46px; height: 46px; top: 18px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-webinar__panel, .cs-webinar__play, .cs-webinar__cta { transition: none; }

  /* Weniger und sanfter, nicht gar nichts: Die Überblendung bleibt, die
     Verschiebung entfällt. */
  ::view-transition-old(root) { animation-duration: 80ms; }
  ::view-transition-new(root) { animation: cs-page-in-flat 140ms ease-out both; }
  a[data-card]:active { transform: none !important; }
}
@keyframes cs-page-in-flat { from { opacity: 0; } }

/* ==========================================================================
   TASTATURBEDIENUNG — SICHTBARER FOKUS
   Wer die Seite mit der Tabulatortaste bedient, muss sehen, wo er steht.
   :focus-visible zeigt den Ring nur bei Tastatur-Navigation — wer mit der
   Maus klickt, sieht ihn nie. Der Browser-Standardring ist auf diesem
   dunklen Hintergrund zu kontrastarm, deshalb ein eigener in Markenorange.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--cs-orange);
  outline-offset: 3px;
}
/* Auf orangem Grund (Haupt-Handlungsschaltflächen) wäre ein oranger Ring
   unsichtbar — dort heller Ring, direkt an der Kante. */
[style*="background: var(--cs-orange)"]:focus-visible {
  outline-color: var(--white, #fff);
  outline-offset: 2px;
}
/* Der Ring folgt der Rundung des Elements; bei den Listenzeilen der
   Startseite sonst als scharfe Ecke sichtbar. */
a[data-card]:focus-visible { outline-offset: 2px; }

/* Die Leistungskarten der Startseite tragen zwei Beschreibungen: die
   ausführliche fürs breite Layout, eine Kurzfassung für die Listenzeilen auf
   dem Handy. Standardmässig gilt die lange; die Mobile-Schicht tauscht. */
[data-desc-short] { display: none; }

/* Monogramm-Avatar als Ersatz für die fehlenden Testimonial-Fotos.
   (Siehe Offene-Punkte im README: echte Portraits können hier eingesetzt werden.) */
.cs-avatar {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, #2a2320 0%, #171918 70%);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cs-avatar > span {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold, 800);
  letter-spacing: -0.02em;
  color: var(--cs-orange);
  line-height: 1;
}
.cs-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover-Zustände der neu aufgebauten Slider-/Switcher-Steuerelemente
   (im Original vom Runtime als :hover-Regeln erzeugt). */
#cs-ts-prev:hover, #cs-ts-next:hover {
  border-color: var(--cs-orange) !important;
  background: var(--cs-orange) !important;
  color: #17120A !important;
}
#cs-ts-prev:active, #cs-ts-next:active { transform: scale(0.94); }
/* Überblenden beim Referenzwechsel (gesteuert in site.js). */
#cs-ts-quote, #cs-ts-author, #cs-ts-role, #cs-ts-tag {
  transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
#cs-ts-cta:hover { border-color: var(--cs-orange) !important; color: var(--cs-orange) !important; }
#cs-sv-cta:hover { border-color: var(--cs-orange) !important; color: var(--cs-orange) !important; }
#cs-sv-page:hover { color: var(--text-primary) !important; }
[data-tab] { transition: background var(--dur-fast, .15s) var(--ease-out, ease); }

/* ==========================================================================
   BETRIEBSRHYTHMUS
   Statt fünf farbiger Etiketten ("Quartalsweise", "24/7" …) zeigt der Block
   die Kadenz als Spur über ein Betriebsjahr: Punkte = einzelne Termine,
   durchgezogene Linie = Dauerbetrieb, gestrichelt = auf Abruf. Die Grafik
   trägt die Information, der Text daneben benennt sie im Klartext.
   ========================================================================== */
.cs-rhythm {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  padding: 30px 32px 12px;
}
.cs-rhythm__head {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 1.9fr);
  gap: 28px;
  align-items: end;
  padding-bottom: 18px;
}
.cs-rhythm__eyebrow {
  font-size: var(--fs-13); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-secondary);
}
.cs-rhythm__intro {
  margin: 8px 0 0; max-width: 34ch;
  font-size: var(--fs-14); line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.44);
}
.cs-rhythm__scale {
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-size: var(--fs-12); letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.28);
  /* mittig, damit jedes Quartalslabel über seinem Termin steht */
  text-align: center;
}
.cs-rhythm__list { list-style: none; margin: 0; padding: 0; }
.cs-rhythm__row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 1.9fr);
  gap: 28px; align-items: center;
  padding: 17px 0;
  border-top: 1px solid var(--border);
}
.cs-rhythm__label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-rhythm__name { font-size: var(--fs-15, 15px); font-weight: var(--fw-semibold); }
.cs-rhythm__cadence { font-size: var(--fs-13); color: rgba(255, 255, 255, 0.42); }

/* Die Spur: Grundlinie über die volle Breite, darauf das Muster. */
.cs-rhythm__track { position: relative; height: 18px; }
.cs-rhythm__track::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%;
  height: 1px; transform: translateY(-50%); background: var(--border);
}
/* Einzelne Termine: Punkt in Monatsmitte (--m = 1…12). */
.cs-rhythm__track[data-pattern="periodic"] > span {
  position: absolute; top: 50%;
  left: calc((var(--m) - 0.5) / 12 * 100%);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--rt);
  box-shadow: 0 0 0 4px var(--rt-soft);
}
/* Dauerbetrieb: durchgezogener Balken, an den Rändern ausblendend. */
.cs-rhythm__track[data-pattern="continuous"]::after {
  content: ""; position: absolute; inset-inline: 0; top: 50%;
  height: 3px; transform: translateY(-50%); border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rt) 10%, var(--rt) 90%, transparent);
  opacity: 0.9;
}
/* Auf Abruf: gestrichelt — kein fixer Termin im Jahr. */
.cs-rhythm__track[data-pattern="event"]::after {
  content: ""; position: absolute; inset-inline: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--rt) 0 7px, transparent 7px 16px);
  opacity: 0.55;
}

/* ==========================================================================
   REFERENZ-PORTRAITS
   Die drei Portraitfelder (Startseite, Dienstleistungen, Referenzen) sind
   Monogramm-Platzhalter ("LH") — es gibt keine echten Fotos. Sie belegen
   jeweils eine ganze Rasterspalte, ohne etwas zu zeigen. Sie entfallen auf
   allen Breiten; das Zitat rückt auf die volle Breite und bekommt ein
   lesbares Zeilenmass.
   (Sobald echte Portraits vorliegen: diesen Block entfernen.)
   ========================================================================== */
#cs-ts > div:first-child,
[data-quote] > .cs-avatar,
[data-case] > [data-portrait] { display: none !important; }

#cs-ts, [data-quote], [data-case] { grid-template-columns: 1fr !important; }
/* Ohne die Portraitspalte würde das Zitat sonst über die volle Blattbreite
   laufen — deutlich mehr als eine angenehm lesbare Zeile. */
#cs-ts > div:last-child,
[data-quote] > div:last-child,
[data-case] > div:last-child { max-width: 820px; }
/* Die Mindesthöhe glich früher die Höhe der Portraitspalte aus. Ohne
   Portrait riss sie eine leere Fläche zwischen Zitat und Slider-Steuerung. */
/* Die Höhe setzt site.js: gemessen am längsten der sechs Zitate, damit der
   Block beim Durchklicken nicht springt. Ohne JS bleibt es bei 0 — dann wird
   auch nicht umgeschaltet, also kann nichts springen. */
#cs-ts > div:last-child { min-height: var(--cs-ts-h, 0px) !important; }
/* Der reservierte Platz sammelt sich sonst als Loch zwischen Zitat und
   Bedienelementen. Zwei automatische Aussenabstände teilen ihn: Der Text
   steht mittig, die Bedienelemente bleiben unten. Beim längsten Zitat gibt
   es keinen freien Raum — dann fallen beide auf null zurück. */
#cs-ts-quote { margin-top: auto !important; }

/* ==========================================================================
   EINKLAPPGRUPPEN (Fusszeilen-Spalten auf dem Handy)
   Aufgebaut in site.js, damit alle Seiten dieselbe Umsetzung teilen.
   ========================================================================== */
.cs-fold { border-top: 1px solid var(--border); }
.cs-fold__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 15px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-13); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-primary);
}
.cs-fold__summary::-webkit-details-marker { display: none; }
.cs-fold__summary::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cs-fold[open] > .cs-fold__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.cs-fold__panel { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 18px; }

/* Ab Tablet-Breite ist nichts eingeklappt: Gruppen verhalten sich wie zuvor. */
@media (min-width: 769px) {
  .cs-fold { border-top: 0; }
  .cs-fold__summary { padding: 0 0 12px; cursor: default; pointer-events: none; }
  .cs-fold__summary::after { display: none; }
  .cs-fold__panel { padding: 0; }
}

/* ==========================================================================
   MOBILE-LAYER
   Der Claude-Design-Export legt Spaltenraster, Abstände und Schriftgrössen als
   INLINE-Styles auf die Elemente. Inline-Styles schlagen jede normale
   Stylesheet-Regel — darum arbeiten die folgenden Regeln bewusst mit
   !important bzw. über die CSS-Variablen, die die Inline-Styles referenzieren.
   Diese Datei wird als letztes Stylesheet geladen und gewinnt daher.
   ========================================================================== */

/* --- Schriftgrössen: greifen über die Variablen, die die Seiten inline
       per var(--fs-XX) benutzen. Dadurch ist kein !important nötig und es
       muss keine einzelne Überschrift angefasst werden.
       Grund: Lange deutsche Komposita ("Sicherheitslage") erzeugen bei 48px
       eine min-content-Breite von ~340px und sprengen jedes Raster. --- */
@media (max-width: 768px) {
  :root {
    --fs-64: clamp(30px, 8.4vw, 44px);
    --fs-48: clamp(26px, 7.2vw, 36px);
    --fs-32: clamp(22px, 5.6vw, 28px);
    --fs-24: clamp(19px, 4.8vw, 23px);
  }
}

/* --- Kopfzeile: unterhalb 940px werden die Navigationslinks ausgeblendet und
       die Menütaste eingeblendet. Logo + Kontakt-Button + Menütaste + 64px
       Innenabstand ergaben zusammen 439px und damit mehr als der Viewport —
       die Menütaste lag ausserhalb des Bildschirms und war nicht antippbar. --- */
@media (max-width: 940px) {
  header > div { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }
  header > div > div { gap: 10px !important; }
  header a[href="kontakt.html"] { padding: 10px 18px !important; font-size: var(--fs-14) !important; }
  .cs-logo__word { font-size: 20px !important; }
  .cs-logo img { height: 26px !important; }
  [data-mobile-nav] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Sehr schmale Geräte (iPhone SE): Logo-Schriftzug weicht dem Menü. */
@media (max-width: 360px) {
  .cs-logo__word { display: none !important; }
}

@media (max-width: 768px) {
  /* --- Jedes mehrspaltige Raster bricht auf eine Spalte um.
         Trifft alle inline gesetzten Grids (Deliverables, "Leistungen im
         Detail", "Weitere Disziplinen", Footer, Stats, Hero, CTA …). --- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Elemente, die über mehrere Spalten gehen, würden im Einspalten-Raster eine
     implizite zweite Spalte erzeugen und dadurch überlaufen. */
  [style*="grid-column"] { grid-column: auto !important; }

  /* CTA-Buttons untereinander stapeln, Zitat-Layout einspaltig. */
  [data-cta] > div:last-child { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  [data-quote] { display: block !important; }

  /* --- Seitenränder und Innenabstände verkleinern --- */
  section, main, footer > div { padding-left: 20px !important; padding-right: 20px !important; }
  [data-cta] { padding: 26px !important; }

  /* --- Leistungs-Auswahl: untereinander, nie horizontal scrollend.
         (Die Seite selbst regelt das ab 1080px — hier nur die Absicherung,
         falls ein Inline-Style dazwischenfunkt.) --- */
  [data-tab-list] { flex-direction: column !important; overflow-x: visible !important; }
  [data-tab-list] > [data-tab] { width: 100% !important; }
  /* Raster-/Flexkinder dürfen schmaler werden als ihr Inhalt breit ist —
     sonst drückt langer Text (min-width: auto) das Raster über den Rand
     (sichtbar ab ~330px Viewportbreite). */
  [style*="grid-template-columns"] > *, [data-tab] { min-width: 0 !important; }
  [data-tab] > span { min-width: 0; }

  /* --- Referenzen-Slider auf der Startseite: Punkte, Zähler und die beiden
         Pfeiltasten passen zusammen nicht mehr in eine Zeile — die Pfeile
         ragten rechts aus der Karte. Sie rutschen jetzt in eine zweite Zeile. --- */
  #cs-ts [style*="space-between"] { flex-wrap: wrap !important; row-gap: 14px !important; }
  #cs-ts-prev, #cs-ts-next { width: 40px !important; height: 40px !important; }

  /* --- Kartenzeilen "Titel + Rhythmus-Badge" ("Weitere Disziplinen"):
         das Badge (white-space: nowrap) darf in die nächste Zeile rutschen,
         statt rechts aus der Karte zu ragen (kleine Geräte, ~320px). --- */
  div[style*="border-top"][style*="space-between"] { flex-wrap: wrap !important; }

  /* --- "Fünf Probleme, die wir täglich lösen": am Desktop stehen Problem und
         Lösung nebeneinander — das Paar ist sichtbar. Gestapelt wurde daraus
         eine flache Liste aus zehn gleich aussehenden Kacheln, in der die
         Zuordnung verloren geht ("Problem – Lösung – Problem – Lösung …").
         Jedes Paar wird deshalb zu EINER durchgehenden Karte: kein Abstand
         innerhalb des Paares, eine Trennlinie in der Mitte, echter Abstand
         erst zum nächsten Paar. --- */
  [data-challenges] {
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-top: 28px !important;
  }
  [data-challenges] > div { padding: 17px 19px !important; gap: 7px !important; }
  /* Problem: Kopf des Paares */
  [data-challenges] > div:nth-child(odd) {
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
  }
  /* Lösung: Fuss des Paares, durch die Trennlinie sichtbar angehängt */
  [data-challenges] > div:nth-child(even) {
    border: 1px solid var(--border);
    border-radius: 0 0 14px 14px;
    margin-bottom: 16px;
  }
  [data-challenges] > div:last-child { margin-bottom: 0 !important; }

  /* --- Fusszeile: die eingeklappten Gruppen schliessen direkt aneinander an,
         statt durch den 40px-Rasterabstand auseinandergerissen zu werden. --- */
  [data-foot] { row-gap: 0 !important; }
  [data-foot] > *:nth-child(2) { margin-top: 26px; }

  /* --- Betriebsrhythmus: Name und Kadenz in eine Zeile, die Spur darunter
         über die volle Breite. So bleibt die Grafik auch bei 320px lesbar. --- */
  .cs-rhythm { padding: 24px 22px 8px; }
  .cs-rhythm__head { grid-template-columns: 1fr; gap: 14px; }
  .cs-rhythm__intro { max-width: none; }
  .cs-rhythm__row { grid-template-columns: 1fr; gap: 12px; padding: 16px 0 18px; }
  .cs-rhythm__label { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .cs-rhythm__cadence { text-align: right; flex: none; }

  /* --- Startseite, "Die fünf Säulen": auf dem Handy werden aus den fünf
         hohen Karten kompakte Listenzeilen — Symbol, Titel, zwei Zeilen
         Kurzbeschreibung, Chevron. Vorher waren es ~250px pro Karte und
         damit über 1400px reine Scrollstrecke für eine Übersicht, die man
         auf einen Blick erfassen können sollte. --- */
  [data-services] > div:last-child { gap: 34px !important; margin-top: 34px !important; }
  [data-services] [data-stagger] { gap: 10px !important; }

  [data-services] [data-stagger] > a[data-card] {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) 12px;
    column-gap: 15px; row-gap: 3px;
    align-items: center;
    padding: 15px 16px !important;
  }
  /* Symbol steht in der Titelzeile, nicht zwischen den beiden Textzeilen. */
  [data-services] [data-stagger] > a[data-card] > div {
    grid-column: 1; grid-row: 1; align-self: center;
  }
  [data-services] [data-stagger] > a[data-card] svg { width: 24px; height: 24px; }
  [data-services] [data-stagger] > a[data-card] > h3 {
    grid-column: 2; grid-row: 1;
    font-size: 17px !important; line-height: 1.25;
  }
  /* Beschreibung: eigene Kurzfassung statt eines abgeschnittenen Satzes,
     eingerückt unter dem Titel — das Symbol bleibt die einzige Marke links. */
  [data-services] [data-stagger] > a[data-card] > [data-desc-long] { display: none !important; }
  [data-services] [data-stagger] > a[data-card] > [data-desc-short] {
    display: block !important;
    grid-column: 2 / -1; grid-row: 2;
    font-size: var(--fs-14); line-height: 1.4;
  }
  /* Die "… im Detail →"-Zeile entfällt: die ganze Zeile ist bereits der Link. */
  [data-services] [data-stagger] > a[data-card] > span:last-of-type { display: none !important; }
  [data-services] [data-stagger] > a[data-card]::after {
    content: ""; grid-column: 3; grid-row: 1;
    justify-self: end; align-self: center;
    width: 7px; height: 7px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.32);
    border-top: 1.5px solid rgba(255, 255, 255, 0.32);
    transform: rotate(45deg);
  }

  /* Gruppenkopf: Etikett über dem Titel — beide Gruppen brechen gleich um,
     statt je nach Textlänge mal ein-, mal zweizeilig zu sein.
     Die Beizeile ("Wir nehmen die Perspektive des Angreifers ein ·
     2 Disziplinen") entfällt: Sie sagt dasselbe wie die Überschrift, und die
     Anzahl steht ohnehin als Liste direkt darunter. */
  [data-services] [data-group-head] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    padding-bottom: 12px !important;
  }
  [data-services] [data-group-head] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
  }
  [data-services] [data-group-head] > span:last-child { display: none !important; }

  /* Der Abstand zwischen Vorspann und Liste folgt der Lesegrösse, nicht dem
     Desktop-Raster (96px oben und unten sind auf dem Handy eine Leerseite). */
  [data-services] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* --- Grundsicherungen gegen horizontalen Überlauf --- */
  img, svg, video, image-slot { max-width: 100% !important; }
  blockquote { max-width: 100% !important; }
  h1, h2, h3, blockquote, p, a, span, li { overflow-wrap: break-word; }
  /* Lange, nicht umbrechbare Zeichenketten (E-Mail-Adressen, URLs). */
  a[href^="mailto:"], a[href^="http"] { word-break: break-word; }
}