/* =========================================================================
   Seiteneigener Regelsatz /sicherheit/

   Uebernommen aus dem <style>-Block im Kopf der freigegebenen statischen
   Fassung (design-v6/70-full-site-v1/sicherheit/index.html). Diese Regeln
   stehen dort NICHT in assets/site.css, sondern gelten nur auf dieser einen
   Seite - deshalb liegen sie hier als eigene Datei und werden ausschliesslich
   auf ihrer Seite geladen (inc/assets.php, scriptomat_page_styles()).

   Sie haengen an 'scriptomat-site' und werden danach ausgeliefert: einige
   Regeln ueberschreiben den gemeinsamen Regelsatz. Genau diese Reihenfolge
   hatte der Master, dort als <link> gefolgt von <style>.
   ========================================================================= */

/* =========================================================================
   /sicherheit/ - Security- und Compliance-Pass

   Diese Seite fuegt keine Art Direction hinzu. Jede Farbe, jeder Grad, jeder
   Radius und jede Schrift stammt aus assets/site.css. Was hier lokal steht,
   sind vier Bauteile, die das Seitensystem noch nicht traegt, gebaut
   ausschliesslich aus den Teilen, die es schon kennt: Randmarkierung,
   Haarlinie, angehobenes Blatt, Abschlussband in Dunkelgruen.

   Farbrollen, unveraendert:
     Graphit      der gegebene Bestand: Betrieb, Infrastruktur, Zugriff
     Mint         die hinzugefuegte Fachlogik: Regeln, Ausfuehrung
     Dunkelgruen  ausschliesslich der belegte, abgeschlossene Zustand
     Orange       ausschliesslich Bedingung, Ausnahme, offener Beleg

   Die inhaltliche Trennung, die diese Seite traegt, ist auch die visuelle:
   technischer Betrieb steht in Graphit, fachliche Governance in Mint. Beide
   muenden in denselben dunkelgruenen Nachweis. Es gibt kein Schloss, kein
   Schild, kein Siegel und keine Zertifikatsgrafik - dieselbe Regel wie auf
   der ganzen Website.

   Bauteile dieser Seite
   ---------------------
   1. .hero-sec   Zweiteilung des Kopfes. Behauptung links, Rahmen rechts.
   2. .frame      Der kontrollierte Rahmen. Was gegeben ist, was ausgefuehrt
                  wird, und was davon belegt bleibt.
   3. .trust      Fuenf Ebenen in zwei Gruppen. Der grosse Abschnitt.
   4. .access     Anmeldung und Berechtigung, zwei Seiten einer Haarlinie.
   5. .evidence   Der Nachweis als Bildmitte, die Zusicherungen daneben.
   6. .residency  Verarbeitungsort und die vier belegten Rechtsangaben.
   7. .modes      Drei Betriebsarten, darunter die Bruecke nach On-Premise.
   8. .specgroup  Technische Angaben, in drei Gruppen statt einer Liste.

   Bewegung: genau eine Sequenz, am Audit-Trail, einmal beim Eintritt ins
   Sichtfeld. Sie sagt dasselbe wie das Bauteil selbst: das hier ist eine
   Reihenfolge. Kein Scroll-Listener, keine Bibliothek, keine Schleife. Der
   Grundzustand ist das fertige Bild.
   ========================================================================= */

/* --- 1. Der zweigeteilte Kopf -------------------------------------------- */
/* Links die Behauptung, rechts der Rahmen, von dem sie handelt.

   Zwei lokale Werte, beide aus einer Messung und nicht aus Geschmack:

   Der H1-Grad steht auf 42 statt 62 px. "Kontrollierte HR-Ausfuehrung" misst
   bei 62 px rund 819 px und bei 46 px noch 607 px; die Zeile wuerde am
   Bindestrich getrennt und der Kopf haette vier statt drei Zeilen. Bei 42 px
   misst sie 555 px.

   Die Spalten stehen deshalb auf 1,06 zu 0,94 statt auf halbe und halbe: bei
   gleicher Teilung traegt die linke Spalte 548 px und die Zeile passt um
   sieben Pixel nicht. Bei dieser Teilung traegt sie 581 px, und der Rahmen
   rechts kommt mit 515 px aus. */
.hero-sec { padding-block: 56px 64px; }
.hero-sec .pagehead__inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 0 56px;
  align-items: center;
}
.hero-sec .pagehead__title {
  max-width: none;
  font-size: 42px;
  letter-spacing: -0.03em;
  text-wrap: initial;
}
.hero-sec .pagehead__lede { margin-top: 24px; font-size: 20px; max-width: 46ch; }
.hero-sec .pagehead__actions { margin-top: 32px; gap: 28px; }
.hero-sec .crumb { margin-bottom: 22px; }
.hero-sec .pagehead__kicker { margin-bottom: 18px; }

/* --- 2. Der kontrollierte Rahmen ----------------------------------------- */
/* Drei Lagen auf einem Blatt. Oben, in Graphit, was das Unternehmen ohnehin
   hat: Daten und Zugriffe. In der Mitte, mint, was Scriptomat hinzufuegt:
   Regeln, Freigaben, Ausfuehrung. Unten, dunkelgruen, was davon belegt
   bleibt. Kein Fensterrahmen, keine Schaltflaeche, kein Dashboard: gesetzter
   Text auf Papier. */
.frame {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 14px 44px rgba(20, 21, 31, 0.10);
}
.frame__layer {
  position: relative;
  padding: 24px 30px 26px;
}
.frame__layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}
.frame__layer--held::before { background: var(--ink); }
.frame__layer--run::before { background: var(--brand); }
.frame__layer--run { background: var(--brandfield); }
/* Der Winkel: der Balken biegt in die neue Zustaendigkeit ein. Deshalb
   braucht der Rahmen keinen Pfeil. */
.frame__layer--run::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 4px;
  background: var(--brand);
}
.frame__label {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.frame__layer--run .frame__label { color: var(--brand-text); }
.frame__rows {
  margin: 14px 0 0;
  display: grid;
  gap: 12px 0;
}
.frame__rows > div {
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 20px;
}
.frame__rows dt {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.frame__rows dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-body);
}
.frame__done {
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 20px;
  margin: 0;
  padding: 22px 30px;
  background: var(--secured);
}
.frame__done .frame__name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: #FFFFFF;
}
.frame__done .frame__value {
  font-size: 18px;
  line-height: 1.4;
  color: #CDE4DA;
}
.frame__note { margin-top: 20px; max-width: 640px; font-size: 17px; }

/* Der Kopf fuehrt seine drei Lagen einmal ein. Der Endzustand ist der
   Grundzustand: faellt die Animation aus, steht der Rahmen vollstaendig da. */
@media (prefers-reduced-motion: no-preference) {
  .frame > * { animation: frame-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .frame > *:nth-child(1) { animation-delay: 0.08s; }
  .frame > *:nth-child(2) { animation-delay: 0.26s; }
  .frame > *:nth-child(3) { animation-delay: 0.44s; }
}
@keyframes frame-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- 3. Die fuenf Ebenen -------------------------------------------------- */
/* Der grosse Abschnitt der Seite. Zwei Gruppen, weil die Seite genau das
   trennen soll: technischer Betrieb und fachliche Ausfuehrung sind nicht
   dasselbe und werden hier nicht vermischt.

   Die Gruppenbeschriftung steht ausserhalb des Blattes, die Ebenen liegen
   darin. Der Balken am linken Rand laeuft durch beide Gruppen und wechselt
   dort die Farbe, wo die Zustaendigkeit wechselt: Graphit fuer das, was
   Infrastruktur und Benutzerverwaltung ohnehin regeln, Mint fuer das, was
   Scriptomat an Fachlogik hinzufuegt, Dunkelgruen fuer den Nachweis. */
.trust { margin: 58px 0 0; }
.trust__group + .trust__group { margin-top: 46px; }
.trust__grouplabel {
  margin: 0 0 18px;
  padding-left: 34px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.trust__group--run .trust__grouplabel { color: var(--brand-text); }
.trust__sheet {
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 16px 48px rgba(20, 21, 31, 0.10);
}
.trust__group--held .trust__sheet { border-left: 6px solid var(--ink); }
.trust__group--run .trust__sheet { border-left: 6px solid var(--brand); }
.trust__layer {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
  padding: 30px 44px 32px 34px;
}
.trust__layer + .trust__layer { border-top: 1px solid var(--line-cool); }
.trust__layer--rules { background: var(--brandfield); }
.trust__layer--rules + .trust__layer { border-top-color: #CBE8DA; }
.trust__name {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.trust__group--run .trust__name { color: var(--brand-text); }
.trust__q {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.trust__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.trust__items li {
  position: relative;
  padding-left: 17px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}
.trust__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 17px;
  background: var(--ink);
}
.trust__group--run .trust__items li::before { background: var(--brand); }
/* Der Nachweis laeuft unter dem Blatt heraus: er entsteht aus allem
   darueber und steht deshalb nicht daneben. */
.trust__proof {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
  margin: 0;
  padding: 28px 44px 30px 34px;
  background: var(--secured);
  border-left: 6px solid var(--secured);
}
.trust__proof .trust__name { color: #A9D6C3; }
.trust__proof .trust__q { display: block; color: #FFFFFF; }
.trust__answer {
  display: block;
  margin: 14px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: #CDE4DA;
}

/* --- 4. Anmeldung und Berechtigung --------------------------------------- */
/* Zwei Seiten, eine Haarlinie dazwischen. Links, was aus Ihrer bestehenden
   Landschaft kommt, rechts, was innerhalb von Scriptomat geregelt ist. */
.access {
  display: grid;
  /* 0,86 zu 1,14: links stehen zwei belegte Angaben, rechts drei. Gleich
     breite Spalten liessen die linke Seite leer wirken. */
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  /* Drei feste Zeilen: Beschriftung, Aussage, Liste. Nimmt eine der beiden
     Aussagen zwei Zeilen und die andere drei, beginnen die Listen trotzdem
     auf derselben Hoehe. */
  grid-template-rows: auto auto auto;
  align-items: start;
  margin-top: 52px;
  border-top: 1px solid var(--line-cool);
}
.access__side {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 32px 0 0;
}
.access__side--id { padding-right: 64px; }
.access__side--perm { padding-left: 64px; border-left: 1px solid var(--line-cool); }
.access__label {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.access__side--perm .access__label { color: var(--brand-text); }
.access__claim {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.access__list {
  display: grid;
  /* Die Liste ist eine Zeile des Subgrids und waere sonst so hoch wie die
     laengere der beiden Listen. Ihre Punkte sollen oben stehen, nicht sich
     ueber die ganze Hoehe verteilen. */
  align-content: start;
  grid-auto-rows: min-content;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.access__list li {
  position: relative;
  padding-left: 18px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
}
.access__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 18px;
  background: var(--ink);
}
.access__side--perm .access__list li::before { background: var(--brand); }

/* --- 5. Der Nachweis als Bildmitte --------------------------------------- */
/* Der Nachweis traegt rund zwei Drittel der Breite, die Zusicherungen stehen
   daneben. Der Vorgang ist abgeschlossen, deshalb traegt die Spur
   durchgehend Mint: es gibt keinen Wechsel der Zustaendigkeit mehr zu
   zeigen. */
.evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 0 64px;
  align-items: start;
  margin-top: 56px;
}
.runthrough--trail {
  max-width: none;
  margin: 0;
}
.runthrough__title {
  margin: 0;
  padding: 20px 32px 18px;
  border-bottom: 1px solid var(--line-cool);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.runthrough__title span { margin-inline: 8px; color: var(--brand-text); }
.runthrough--trail .runthrough__steps::after { background: var(--brand); }
.runthrough--trail .runthrough__steps { padding: 20px 34px 20px 62px; }
.runthrough--trail .runthrough__steps::before,
.runthrough--trail .runthrough__steps::after { left: 34px; top: 20px; bottom: 20px; }
.runthrough--trail .runthrough__step { padding: 9px 0; }
.runthrough--trail .runthrough__step,
.runthrough--trail .runthrough__done { grid-template-columns: 172px minmax(0, 1fr); gap: 0 22px; }
.runthrough--trail .runthrough__actor { font-size: 16px; color: var(--ink-quiet); }
.runthrough--trail .runthrough__event { font-size: 20px; }
.runthrough--trail .runthrough__done { padding: 20px 34px 20px 62px; }
.runthrough--trail .runthrough__done .runthrough__actor { color: #A9D6C3; }
.runthrough--trail .runthrough__done .runthrough__event { font-size: 20px; }
.runthrough--trail .runthrough__marker { left: -36px; }
.runthrough--trail .runthrough__done .runthrough__marker { left: 28px; }

.assure {
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.assure li { position: relative; padding-left: 20px; }
.assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}
.assure h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.assure p {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}
.evidence .plate-note { margin-top: 22px; }

/* Die eine Sequenz der Seite. Das Skript setzt data-sequence erst, wenn
   animiert werden darf - ohne Skript und bei reduzierter Bewegung steht der
   Nachweis vollstaendig da. */
@media (prefers-reduced-motion: no-preference) {
  [data-sequence="armed"] .runthrough__step,
  [data-sequence="armed"] .runthrough__done { opacity: 0; }
  [data-sequence="running"] .runthrough__step,
  [data-sequence="running"] .runthrough__done {
    animation: trail-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  [data-sequence="running"] .runthrough__step:nth-child(1) { animation-delay: 0.00s; }
  [data-sequence="running"] .runthrough__step:nth-child(2) { animation-delay: 0.10s; }
  [data-sequence="running"] .runthrough__step:nth-child(3) { animation-delay: 0.20s; }
  [data-sequence="running"] .runthrough__step:nth-child(4) { animation-delay: 0.30s; }
  [data-sequence="running"] .runthrough__step:nth-child(5) { animation-delay: 0.40s; }
  [data-sequence="running"] .runthrough__step:nth-child(6) { animation-delay: 0.50s; }
  [data-sequence="running"] .runthrough__step:nth-child(7) { animation-delay: 0.60s; }
  [data-sequence="running"] .runthrough__done { animation-delay: 0.72s; }
}
@keyframes trail-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- 6. Verarbeitungsort und Rechtsangaben ------------------------------- */
/* Vier Angaben auf einer Haarlinie. Die Artikelnummern stehen dabei, weil
   sie die Angabe pruefbar machen - sie sind der Grund fuer diese Zeile und
   keine Verzierung. Wo es keinen Artikel gibt, steht auch keiner. */
.residency {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Drei feste Zeilen, damit "Datentransfer ausserhalb der EU" seine zweite
     Beschriftungszeile nehmen kann, ohne den Wert der Spalte gegen die
     Nachbarn zu verschieben. */
  grid-template-rows: auto auto auto;
  margin: 50px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.residency > li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 30px 32px 6px 0;
}
.residency > li + li { padding-left: 32px; border-left: 1px solid var(--line-cool); }
.residency__field {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-quiet);
}
.residency__value {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.residency__anchor {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--brand-text);
}

/* --- 7. Betriebsarten und die Bruecke ------------------------------------ */
/* Drei Betriebsarten, kurz gehalten. Die Bruecke darunter wiederholt den
   On-Premise-Vertrieb nicht, sie verweist auf ihn. */
.modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  margin: 48px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.modes h3 {
  position: relative;
  margin: 0;
  padding-left: 19px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.modes h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}
.modes p {
  margin: 14px 0 0;
  padding-left: 19px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}
.bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 56px;
  margin: 52px 0 0;
  padding: 32px 40px 34px;
  background: var(--brandfield);
  border-left: 6px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bridge h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.bridge p {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}

/* --- 8. Technische Angaben in Gruppen ------------------------------------ */
/* Zwoelf Zeilen mit je einer Haarlinie waeren eine Wand. Drei Gruppen mit
   je einer Beschriftung sind dieselbe Auskunft, nur lesbar. */
.specgroup + .specgroup { margin-top: 46px; }
.specgroup__label {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.specgroup .specs { margin-top: 16px; }
/* Nicht :first-of-type - der Kapitelkopf ist ebenfalls ein div und stuende
   dann als erster Typ im Weg. */
.band__head + .specgroup { margin-top: 52px; }

/* --- Schmale Fenster ----------------------------------------------------- */
/* Jede mehrspaltige Anlage erklaert ihren Rueckfall selbst. Die Reihenfolge
   im Quelltext ist ueberall schon die Lesefolge. */
@media (max-width: 1180px) {
  .hero-sec .pagehead__inner { gap: 0 44px; }
  .hero-sec .pagehead__title { font-size: 42px; }

  .trust__layer,
  .trust__proof { grid-template-columns: 150px minmax(0, 1fr); gap: 0 32px; }
  .trust__layer { padding: 26px 30px 28px 28px; }
  .trust__proof { padding: 24px 30px 26px 28px; }
  .trust__q { font-size: 23px; }

  .evidence { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 48px; }
  .runthrough--trail .runthrough__event,
  .runthrough--trail .runthrough__done .runthrough__event { font-size: 19px; }
  .runthrough--trail .runthrough__step,
  .runthrough--trail .runthrough__done { grid-template-columns: 148px minmax(0, 1fr); }

  .access__side--id { padding-right: 44px; }
  .access__side--perm { padding-left: 44px; }

  .residency > li { padding-right: 24px; }
  .residency > li + li { padding-left: 24px; }
  .residency__value { font-size: 22px; }

  .modes { gap: 34px; }
  .bridge { gap: 0 40px; padding: 28px 32px 30px; }
  .bridge h3 { font-size: 25px; }
}

@media (max-width: 1000px) {
  /* Der Kopf wird einspaltig: erst die Behauptung, dann der Rahmen. */
  .hero-sec .pagehead__inner { grid-template-columns: minmax(0, 1fr); gap: 44px 0; }
  .hero-sec .pagehead__lede { max-width: 60ch; }
  .frame { max-width: 620px; }

  .residency { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .residency > li { padding-bottom: 28px; }
  .residency > li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .residency > li:nth-child(n+3) { border-top: 1px solid var(--line-cool); padding-top: 28px; }

  /* Der Nachweis traegt die volle Breite, die Zusicherungen stehen darunter
     in drei Spalten. */
  .evidence { grid-template-columns: minmax(0, 1fr); gap: 46px 0; }
  .assure { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

  .modes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bridge { grid-template-columns: minmax(0, 1fr); gap: 24px 0; }
  .bridge .textlink { justify-self: start; }
}

@media (max-width: 860px) {
  .hero-sec { padding-block: 44px 52px; }
  .hero-sec .pagehead__title { font-size: 36px; max-width: none; }
  .frame { max-width: none; }
  .frame__rows > div,
  .frame__done { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }

  /* Der Ebenenname steht ueber der Ebene statt daneben. */
  .trust__layer,
  .trust__proof { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .trust__name { margin-top: 0; }
  .trust__q { font-size: 22px; }
  .trust__items { grid-template-columns: minmax(0, 1fr); }
  .trust__grouplabel { padding-left: 28px; }

  .access { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .access__side { display: block; grid-row: auto; }
  .access__side--id { padding-right: 0; padding-bottom: 8px; }
  .access__side--perm {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid var(--line-cool);
  }

  .assure { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .residency { grid-template-columns: minmax(0, 1fr); }
  .residency > li,
  .residency > li + li {
    padding: 26px 0 0;
    border-left: 0;
  }
  .residency > li + li { border-top: 1px solid var(--line-cool); }
}

@media (max-width: 560px) {
  /* "Sicherheitsanforderungen pruefen" misst bei 19 px rund 297 px und
     sprengt mit den Innenraendern der Schaltflaeche die 335 px Satzbreite
     dieser Stufe. Die Beschriftung bleibt, der Grad gibt nach: die
     Schaltflaeche ist ueberall auf der Website dieselbe Form, und ein
     zweizeiliger Weg waere schlechter als ein Grad kleiner. */
  .pagehead__actions .cta,
  .close__actions .cta { font-size: 18px; padding-inline: 22px; }

  .hero-sec .pagehead__title { font-size: 30px; }
  .frame__layer { padding: 20px 22px 22px 24px; }
  .frame__done { padding: 18px 22px 20px 24px; }

  .trust__layer { padding: 24px 20px 26px 22px; }
  .trust__proof { padding: 22px 20px 24px 22px; }

  /* Auf der schmalsten Stufe traegt die Zeile die Rolle ueber der Handlung:
     nebeneinander bliebe fuer die Handlung kein Satzraum mehr. */
  .runthrough--trail .runthrough__step,
  .runthrough--trail .runthrough__done { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .runthrough--trail .runthrough__event { overflow-wrap: break-word; }

  .bridge { padding: 24px 22px 26px; }
  .bridge h3 { font-size: 22px; }
}