/* =========================================================================
   Seiteneigener Regelsatz /integrationen/

   Uebernommen aus dem <style>-Block im Kopf der freigegebenen statischen
   Fassung (design-v6/70-full-site-v1/integrationen/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>.
   ========================================================================= */

/* =========================================================================
   /integrationen/ - Integration in die bestehende Systemlandschaft

   Die Seite beantwortet genau eine Frage: wie fuegt sich Scriptomat in eine
   HR-Landschaft ein, die es schon gibt. Fachliche Einheit ist die Anbindung
   und die Richtung, in der sie arbeitet - nicht das angebundene Produkt.

   Ausdruecklich kein App Marketplace: keine Logowand, keine Kacheln je
   Anbieter, keine Konnektorenzahl, keine Integrationsgalerie. Produkt- und
   Firmennamen stehen ausschliesslich als Beispiele einer Systemart und
   tragen den Markenhinweis der Live-Seite unveraendert mit.

   Es entsteht keine neue Art Direction. Farbe, Schrift, Radius, Raster und
   Abstaende stammen unveraendert aus dem Master und aus /produkt/ V4 sowie
   /loesungen/. Kein neues Token.

   Farbrollen, unveraendert aus dem System:
     Graphit      gegebener Bestand: Ihre Systeme, Ihre Daten
     Mint         angewandte Fachlogik: die Ausfuehrung durch Scriptomat
     Orange       Bedingung und Ausnahme, und sonst nichts
     Dunkelgruen  ausschliesslich der kontrolliert abgeschlossene Vorgang

   Bauteile dieser Seite
   ---------------------
   1. .hero-int   Zweiteilung des Kopfes. Behauptung links, Austausch rechts.
                  Die Szene zeigt bewusst zwei Richtungen: Ihre Daten hinein,
                  Ergebnisse zurueck. Keine Logos, keine Konnektorwolke.
   2. .layers     Was in Ihren Systemen bleibt gegen das, was Scriptomat
                  ergaenzt. Das Bauteil ist die Gegenueberstellung .matrix
                  aus dem Seitensystem; einzige lokale Aenderung ist die
                  Farbrolle der linken Spalte: der Bestand ist hier kein
                  ueberholter Zustand, sondern der richtige Ort.
   3. .arch       Der grosse Produktmoment: Eingang, Ausfuehrung, Ausgang,
                  Status und Nachweis. Der senkrechte Balken laeuft ohne
                  Unterbrechung durch alle vier Stufen und wechselt genau
                  dort die Farbe, wo die Zustaendigkeit wechselt. Deshalb
                  traegt die Grafik keine Pfeile - dieselbe Entscheidung wie
                  in der Einwandbehandlung der Startseite.
                  Die einzige orange Stelle der Seite steht hier: nicht jede
                  Anbindung uebertraegt dasselbe.
   4. .dirs       Drei Richtungen als Triptychon. Bewusst klein und ruhig:
                  eine Legende zum Bauteil darueber, kein zweiter
                  Produktmoment und keine API-Dokumentation.
   5. .cats       Die vier Systemarten als Zeilen auf Haarlinien. Links die
                  Art und ihre Rolle im Vorgang, rechts Beispiele. Die
                  Beispiele stehen als gesetzte Namen ohne Flaeche, Rahmen
                  oder Logo - sie belegen die Systemart, sie werben nicht.
   6. .nosys      Die Live-Aussage "Ihr System ist nicht dabei" in der
                  Fassung, die sie halten kann: Auswahl statt Garantie.
   7. .itq        Fuenf Fragen der IT als senkrechter Stapel. Jede Antwort
                  sagt, woran die Antwort haengt. Keine SLA-, Security- oder
                  Protokollaussage, die die Live-Seite nicht traegt.

   Bewegung: eine einzige Sequenz. Der Architekturmoment fuehrt seine vier
   Stufen einmal ein, wenn er ins Sichtfeld kommt, und sagt damit dasselbe
   wie die Grafik: das hier ist eine Reihenfolge. Sonst bewegt sich nichts.
   Kein Scroll-Listener, keine Bibliothek, keine Schleife.
   ========================================================================= */

/* --- 1. Der zweigeteilte Kopf -------------------------------------------- */
/* Dieselbe Anlage wie der Kopf von /loesungen/. Der H1-Grad ist lokal von 62
   auf 44 px gesetzt: die laengste gesetzte Zeile "Systemen, die Sie" misst
   dabei rund 347 px und steht mit Rand in der 471 px breiten linken Spalte.
   Die rechte Spalte traegt deutlich mehr Flaeche als in /loesungen/: die
   Szene dort hat drei Zonen nebeneinander - Bestand, Austausch, Ausfuehrung -
   und steht erst ab rund 625 px so, dass in ihr kein Grad unter 17 px
   gerendert wird. */
.hero-int { padding-block: 56px 64px; }
.hero-int .pagehead__inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 0 56px;
  align-items: center;
}
.hero-int .pagehead__title {
  max-width: none;
  font-size: 44px;
  letter-spacing: -0.03em;
  text-wrap: initial;
}
.hero-int .pagehead__lede { margin-top: 24px; font-size: 20px; max-width: 46ch; }
.hero-int .pagehead__actions { margin-top: 32px; gap: 28px; }
.hero-int .crumb { margin-bottom: 22px; }
.hero-int .pagehead__kicker { margin-bottom: 18px; }
.hero-int .scene { margin-top: 0; }
.hero-int .plate-note { margin-top: 22px; max-width: 62ch; font-size: 17px; }

/* --- 2. Was bleibt, was dazukommt ---------------------------------------- */
/* Das Bauteil ist .matrix aus dem Seitensystem. Dort traegt die linke Spalte
   den ueberholten Zustand und steht deshalb in der leisen Farbrolle. Hier
   traegt sie den Bestand, der bleiben soll - der bekommt die volle
   Graphitrolle, genau wie die Quelle in jeder Szene der Website. Sonst
   liest die Seite ihre eigene Aussage falsch herum. */
.layers .matrix__was { color: var(--ink); }
.layers .matrix__was::before { background: var(--ink); }
/* Der Schlusssatz des Bereichs steht weiter von der Gegenueberstellung ab
   als eine Lede von ihrer Ueberschrift. Der Selektor traegt drei Stufen,
   weil .band .section-lede:first-of-type aus dem Seitensystem denselben
   Absatz bereits auf 26 px setzt. */
.band .section-lede.layers__line { margin-top: 46px; }

/* --- 3. Der Architekturmoment -------------------------------------------- */
/* Vier Stufen in einer ununterbrochenen Senkrechten. Jede Stufe traegt
   denselben 7-px-Balken links; er wechselt die Farbe genau an den
   Zustaendigkeitsgrenzen: Graphit im Eingang, Mint in der Ausfuehrung,
   wieder Graphit im Ausgang, Dunkelgruen im Abschluss. Zwischen den Stufen
   steht kein Abstand, damit der Balken durchlaeuft - die Reihenfolge ist
   die Aussage, nicht ein Pfeil.

   Nur die mittlere Stufe liegt auf einem angehobenen Blatt: dort und nur
   dort arbeitet Scriptomat. Eingang und Ausgang liegen auf der Flaeche des
   Bereichs, weil sie Ihre Systeme sind. */
.arch { margin: 58px 0 0; }
.arch__stage {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}
.arch__label {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.arch__stage--in  { padding: 0 44px 46px 48px; border-left: 7px solid var(--ink); }
.arch__stage--out { padding: 46px 44px 48px 48px; border-left: 7px solid var(--ink); }

.arch__sheet {
  border-left: 7px solid var(--brand);
  background: var(--brandfield);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 22px 64px rgba(20, 21, 31, 0.13);
}
.arch__sheet .arch__stage { padding: 52px 60px 54px 48px; }
.arch__sheet .arch__label { color: var(--brand-text); }

/* Die Systeme im Eingang und im Ausgang. Zwei Spalten und nicht vier: die
   laengsten Eintraege ("E-Signatur und Kommunikation") brauchen bei 24 px
   rund 350 px und wuerden in einer Viertelspalte umbrechen. */
.arch__systems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arch__systems li {
  position: relative;
  padding-left: 21px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.arch__systems li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 21px;
  background: var(--ink);
}
.arch__note {
  margin: 26px 0 0;
  max-width: 78ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}

/* Was Scriptomat aus dem Eingang macht. Der lauteste Grad des Bauteils:
   diese vier Stationen sind der Grund, aus dem die Seite den Umweg ueber
   eine Architekturgrafik nimmt. */
.arch__work {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arch__work li {
  position: relative;
  padding-left: 23px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.arch__work li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 24px;
  background: var(--brand);
}
.arch__control {
  margin: 30px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #CBE8DA;
  max-width: 80ch;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* Die einzige orange Stelle der Seite. Orange traegt im ganzen System die
   Rolle Bedingung und Ausnahme - hier meint es: was ein Zielsystem
   bekommt, steht nicht fuer alle Anbindungen gleich fest. */
.arch__conditional {
  position: relative;
  margin: 28px 0 0;
  max-width: 78ch;
  padding-left: 19px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-body);
}
.arch__conditional::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 19px;
  background: var(--exception);
}
.arch__conditional b { font-weight: 700; color: var(--ink); }

.arch__done {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 0 40px;
  align-items: baseline;
  margin: 0;
  padding: 44px 60px 44px 48px;
  background: var(--secured);
  border-left: 7px solid var(--secured);
}
.arch__done .arch__label { color: #A9D6C3; margin-top: 0; }
.arch__result {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.026em;
  color: #FFFFFF;
}

/* Die Sequenz. Der Grundzustand ist das fertige Bild: das Skript setzt
   data-sequence erst, wenn es auch wieder einblenden kann. Ohne Skript und
   bei reduzierter Bewegung steht die Grafik vollstaendig da. */
@media (prefers-reduced-motion: no-preference) {
  .arch[data-sequence="armed"] .arch__stage--in,
  .arch[data-sequence="armed"] .arch__sheet,
  .arch[data-sequence="armed"] .arch__stage--out,
  .arch[data-sequence="armed"] .arch__done { opacity: 0; }
  .arch[data-sequence="running"] .arch__stage--in,
  .arch[data-sequence="running"] .arch__sheet,
  .arch[data-sequence="running"] .arch__stage--out,
  .arch[data-sequence="running"] .arch__done {
    animation: arch-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .arch[data-sequence="running"] .arch__stage--in  { animation-delay: 0s; }
  .arch[data-sequence="running"] .arch__sheet      { animation-delay: 0.16s; }
  .arch[data-sequence="running"] .arch__stage--out { animation-delay: 0.32s; }
  .arch[data-sequence="running"] .arch__done       { animation-delay: 0.48s; }
}
@keyframes arch-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- 4. Die drei Richtungen ---------------------------------------------- */
/* Ein Triptychon auf Haarlinien, bewusst deutlich leiser als der
   Architekturmoment darueber. Es ordnet, was das Bauteil darueber zeigt,
   und erklaert kein Protokoll. Der Winkel zwischen den beiden Seiten ist
   derselbe, den die Regelzeilen der Startseite tragen. */
.dirs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 52px 0 0;
  border-top: 1px solid var(--line-cool);
}
.dirs > div { padding: 32px 40px 0 0; }
.dirs > div + div { padding-left: 40px; border-left: 1px solid var(--line-cool); }
.dirs__label {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.dirs__pair {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.dirs__pair span { margin-inline: 12px; font-weight: 600; color: var(--brand-text); }
.dirs__what {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}
.dirs__note { margin-top: 34px; }

/* --- 5. Die vier Systemarten --------------------------------------------- */
/* Zeilen auf Haarlinien, keine Kacheln, keine Logos, kein Raster gleicher
   Flaechen. Links die Systemart und ihre Rolle im Vorgang, rechts
   Beispiele. Die Beispiele stehen als gesetzte Namen mit viel Weissraum:
   sie sind Beleg fuer die Systemart und kein Angebot. */
.cats { margin: 56px 0 0; border-top: 1px solid var(--line-cool); }
.cats > div {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: 0 56px;
  padding: 32px 0 34px;
}
.cats > div + div { border-top: 1px solid var(--line-cool); }
.cats__name {
  position: relative;
  margin: 0;
  padding-left: 20px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.cats__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 4px;
  height: 23px;
  background: var(--brand);
}
.cats__role {
  margin: 14px 0 0 20px;
  max-width: 40ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}
.cats__label {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.cats__names {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.cats__names li {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* --- 6. Ihr System ist nicht dabei ---------------------------------------- */
/* Die Live-Aussage bleibt, ihre Ueberdehnung nicht: aus "fast
   ausgeschlossen, welches System Sie auch nutzen" wird die Zusage, die
   tatsaechlich gehalten werden kann. */
.nosys {
  max-width: 84ch;
  margin: 46px 0 0;
  padding-top: 34px;
  border-top: 1px solid var(--line-cool);
}
.nosys h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nosys p {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.58;
  color: var(--ink-body);
}

/* --- 7. Was die IT wissen will ------------------------------------------- */
/* Ein senkrechter Stapel, kein Raster und keine Klappliste: die fuenf
   Fragen sollen zusammen gelesen werden, weil sie zusammen den Weg durch
   die Grafik oben beschreiben. Jede Antwort sagt, woran sie haengt. */
.itq {
  max-width: 92ch;
  margin: 52px 0 0;
  border-top: 1px solid var(--line-cool);
}
.itq > div { padding: 28px 0 30px; }
.itq > div + div { border-top: 1px solid var(--line-cool); }
.itq__q {
  position: relative;
  margin: 0;
  padding-left: 22px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.itq__q::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 21px;
  background: var(--brand);
}
.itq__a {
  margin: 12px 0 0 22px;
  max-width: 76ch;
  font-size: 19px;
  line-height: 1.58;
  color: var(--ink-body);
}

/* Die Frage im Abschluss steht zweizeilig und braucht dafuer etwas mehr
   Breite als die 22ch des Grundbauteils. */
.close .close__title { max-width: 900px; }

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

  .arch__stage,
  .arch__done { grid-template-columns: 150px minmax(0, 1fr); gap: 0 32px; }
  .arch__sheet .arch__stage { padding: 40px 34px 42px 32px; }
  .arch__stage--in { padding: 0 34px 36px 32px; }
  .arch__stage--out { padding: 36px 34px 38px 32px; }
  .arch__done { padding: 34px 34px 34px 32px; }
  .arch__systems li { font-size: 22px; }
  .arch__work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch__work li { font-size: 24px; }
  .arch__control { font-size: 22px; }
  .arch__result { font-size: 28px; }

  .dirs > div { padding-right: 32px; }
  .dirs > div + div { padding-left: 32px; }

  .cats > div { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0 40px; }
  .cats__name { font-size: 24px; }

  .itq__q { font-size: 22px; }
}

/* Der Kopf wird einspaltig, sobald die Szenenspalte unter ihre eigene
   Breite faellt. Bei 1080 px misst sie rund 545 px, die Szene stuende dann
   auf 0,87 und traege Grade unter 15 px. Einspaltig steht sie wieder bei
   1:1. Das ist frueher als bei den uebrigen Bauteilen dieser Seite, deshalb
   eine eigene Stufe. */
@media (max-width: 1080px) {
  .hero-int .pagehead__inner { grid-template-columns: minmax(0, 1fr); gap: 44px 0; }
  .hero-int .pagehead__lede { max-width: 60ch; }
  .hero-int .scene { max-width: 630px; }
}

@media (max-width: 1000px) {
  .dirs { grid-template-columns: minmax(0, 1fr); }
  .dirs > div { padding: 28px 0 30px; }
  .dirs > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-cool); }
}

@media (max-width: 860px) {
  .hero-int { padding-block: 44px 52px; }
  .hero-int .pagehead__title { font-size: 38px; }
  .hero-int .scene { max-width: none; }

  /* Eingang, Ausfuehrung, Ausgang und Abschluss stellen ihre Beschriftung
     ueber den Inhalt. Der senkrechte Balken bleibt und traegt weiter die
     Zustaendigkeit. */
  .arch__stage,
  .arch__done { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
  .arch__label { margin-top: 0; }
  .arch__systems { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .arch__work { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .cats > div { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .cats__role { max-width: 56ch; }
  .cats__label { margin-top: 0; }
}

@media (max-width: 560px) {
  .hero-int .pagehead__title { font-size: 31px; }

  .arch__sheet .arch__stage { padding: 24px 20px 26px 22px; }
  .arch__stage--in { padding: 0 20px 26px 22px; }
  .arch__stage--out { padding: 26px 20px 28px 22px; }
  .arch__done { padding: 24px 20px 24px 22px; }
  .arch__systems li { font-size: 20px; }
  .arch__work li { font-size: 21px; }
  .arch__control { font-size: 20px; }
  .arch__result { font-size: 24px; }

  .cats__name { font-size: 22px; }
  .cats__names { gap: 10px 24px; }
  .cats__names li { font-size: 18px; }
  .itq__q { font-size: 20px; }
  .nosys h3 { font-size: 22px; }
}