/* =========================================================================
   Seiteneigener Regelsatz /unternehmen/

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

/* --- Lokale Ergaenzungen dieser einen Seite ------------------------------
   Alle Werte stammen aus den Tokens von assets/site.css. Ergaenzt werden
   nur die Bauformen, fuer die das Seitensystem kein Bauteil hat. Die
   gemeinsame site.css bleibt unberuehrt. */

/* --- 1. Der Kopf mit dem Standortbild als Flaeche -----------------------
   Das Bild war zuvor ein kleiner rechteckiger Bildkoerper neben dem Satz.
   Damit war es Beiwerk. Es liegt jetzt als Flaeche ueber die volle
   Kopfhoehe, mit dem Schwerpunkt rechts, und blendet nach links weich in
   die Markenflaeche des Systems aus.

   Zwei Lagen, beide als Pseudoelement, beide hinter dem Satz:

     ::before  das Bild, formatfuellend. Die Datei ist hochformatig
               (1200 x 1600). Bei einer Kopfhoehe von rund 640 px zeigt
               der Ausschnitt das querformatige Mittelband mit Gebaeuden,
               Springbrunnen und Wasserflaeche. Leicht entsaettigt und
               aufgehellt: der Kopf bleibt hell und ruhig, kein dunkler
               Fotohero, keine gruene Volltonauflage.

     ::after   der Verlauf. Waagerecht blendet er das Bild nach links in
               --herofield aus, senkrecht sehr dezent nach oben und unten,
               damit weder zur Kopfzeile noch zur naechsten Flaeche eine
               harte Bildkante entsteht. Die linke Haelfte traegt Satz,
               die rechte Haelfte traegt Bild. */
.pagehead--company {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 84px 92px;
  min-height: 560px;
}
.pagehead--company::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/company/unternehmen-hero.jpg");
  background-size: cover;
  background-position: 50% 54%;
  filter: saturate(0.76) brightness(1.07) contrast(0.95);
}
.pagehead--company::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      var(--herofield) 0%,
      var(--herofield) 44%,
      rgba(242, 250, 246, 0.94) 55%,
      rgba(242, 250, 246, 0.6) 66%,
      rgba(242, 250, 246, 0.2) 77%,
      rgba(242, 250, 246, 0) 87%
    ),
    linear-gradient(
      180deg,
      rgba(242, 250, 246, 0.66) 0%,
      rgba(242, 250, 246, 0) 18%,
      rgba(242, 250, 246, 0) 78%,
      rgba(242, 250, 246, 0.82) 100%
    );
}
/* Der Satz steht in der linken Haelfte und endet dort, wo der Verlauf noch
   deckend ist. Die Behauptung darf breiter laufen als die Erklaerung: sie
   ist der eine laute Satz der Seite. */
.pagehead--company .pagehead__inner { max-width: 720px; }
.pagehead--company .pagehead__title { max-width: 800px; }
.pagehead--company .pagehead__lede { max-width: 56ch; }
.pagehead--company .pagehead__lede + .pagehead__lede { margin-top: 18px; }

/* --- 2. Die beiden Kapitelgrade neben dem Normalfall --------------------
   Der Faden der Seite haengt an zwei Kapiteln: warum wir Scriptomat bauen
   und wie wir Software denken. Nur sie tragen den vollen Kapitelgrad. Die
   beiden Auskunftskapitel am Ende ordnen ein, sie behaupten nicht. */
.section-title { font-size: 44px; }
.section-title--lead {
  font-size: var(--h-section);
  letter-spacing: -0.03em;
}
.section-title--quiet {
  font-size: 33px;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

/* --- 3. Die Erzaehlung mit Randspalte -----------------------------------
   Sektion 2 ist der einzige Fliesstext der Seite: von aurixus zu
   Scriptomat. Die Jahreszahlen stehen daneben in einer schmalen
   Randspalte. Wer die Herleitung liest, liest sie; wer nur die Stationen
   sucht, findet sie rechts. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  align-items: start;
  margin-top: 44px;
}
.story__text > p { margin: 20px 0 0; font-size: 20px; line-height: 1.6; color: var(--ink-body); }
.story__text > p:first-child { margin-top: 0; }
.rail { margin: 4px 0 0; }
.rail__title {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.rail dl { margin: 18px 0 0; border-top: 1px solid var(--line-cool); }
.rail dl > div { padding: 15px 0; border-bottom: 1px solid var(--line-cool); }
.rail dt {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--brand-text);
}
.rail dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-body); }

/* --- 4. Die vier Grundsaetze --------------------------------------------
   Ein Satz, keine Folge: die vier Grundsaetze gelten gleichzeitig. Sie
   tragen deshalb die Ordnungszahl als leise Beschriftung, aber keine
   verbindende Linie. Die drei Werte der Ueber-uns-Seite stehen nicht mehr
   als zweite Wand darunter, ihre Aussagen sind in diese vier eingearbeitet. */
.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px 72px;
  margin: 52px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.principles li { position: relative; padding-left: 20px; }
.principles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}
.principles__no {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.principles h3 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.principles p { margin: 12px 0 0; font-size: 19px; line-height: 1.55; color: var(--ink-body); }

/* --- 5. Gruender und Haltung --------------------------------------------
   Der eine persoenliche Moment der Seite, und der einzige Bereich auf
   warmem Papier. Portrait und Zuordnung links, Zitat und kurzes
   Gruenderstueck daneben. Eine redaktionelle Anlage, keine Karte, kein
   Testimonial-Bauteil. Das Portrait ist die unveraenderte Live-Datei, ein
   runder Freisteller: die minte Kante traegt deshalb das Zitat. */
.stance {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line-warm);
}
.stance__person { margin: 0; }
.stance__person img { display: block; width: 200px; height: 200px; }
.stance__person figcaption { margin-top: 22px; }
.stance__name {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.stance__role { display: block; margin-top: 4px; font-size: 17px; line-height: 1.4; color: var(--ink-body); }
.stance__body { min-width: 0; }
.stance__quote { margin: 0; }
.stance__quote p {
  margin: 0;
  padding-left: 24px;
  border-left: 3px solid var(--brand);
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.026em;
  color: var(--ink);
  text-wrap: pretty;
}
.stance__story p { margin: 22px 0 0; max-width: 70ch; font-size: 19px; line-height: 1.6; color: var(--ink-body); }

/* --- 6. Die Eckdaten ----------------------------------------------------
   Vorher eine neunzeilige Angabenliste ueber die volle Breite. Jetzt sechs
   Angaben in zwei ruhigen Reihen: Beschriftung leise, Angabe im
   Displayschnitt. Pflicht- und Registerangaben stehen im Impressum und
   nicht hier. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 36px 0 0;
  border-top: 1px solid var(--line-cool);
}
.facts > div {
  padding: 22px 40px 22px 0;
  border-bottom: 1px solid var(--line-cool);
}
.facts dt { font-size: 17px; line-height: 1.4; color: var(--ink-quiet); }
.facts dd {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.016em;
  color: var(--ink);
}

/* --- 7. Das Vorgehensmodell ---------------------------------------------
   Anders als die Grundsaetze ist dies eine echte Folge: Schritt zwei setzt
   Schritt eins voraus. Die Reihenfolge ist hier die Aussage, deshalb traegt
   dieses Bauteil als einziges die durchgehende Linie und die Ordnungszahl
   auf der Linie. */
.method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}
.method li { position: relative; padding-top: 32px; border-top: 3px solid var(--brand); }
.method__no {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  min-width: 34px;
  padding-right: 12px;
  background: var(--ground);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-text);
}
.method h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.method p { margin: 12px 0 0; font-size: 19px; line-height: 1.55; color: var(--ink-body); }

/* --- 8. Das Vertrauenssignal --------------------------------------------
   Sicherheit war eine eigene Grosssektion mit sechs Nennungen. Bei einer
   Unternehmensseite ist sie kein Kapitel, sondern eine Zusage innerhalb
   der Arbeitsweise. Sie steht deshalb als eine Zeile unter dem
   Vorgehensmodell, mit dem Weg auf die Sicherheitsseite daneben. Die
   ausfuehrliche Erklaerung steht auf /sicherheit/. */
.trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 56px;
  align-items: baseline;
  margin: 52px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-cool);
}
.trust p { margin: 0; max-width: 76ch; font-size: 18px; line-height: 1.56; color: var(--ink-body); }

/* --- 9. Das Produktportfolio --------------------------------------------
   Zwei Produkte, zwei Spalten, eine Haarlinie dazwischen. Je Produkt der
   Name, ein Satz und ein Weg: DigitalCheckIn bekommt hier den Platz einer
   Auskunft, nicht den einer zweiten Produktseite. */
.portfolio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 36px 0 0;
  border-top: 1px solid var(--line-cool);
}
.portfolio__item { padding: 32px 56px 0 0; }
.portfolio__item + .portfolio__item { padding: 32px 0 0 56px; border-left: 1px solid var(--line-cool); }
/* Der Markenname steht auf derselben Oberkante wie das Logo daneben. Die
   Regel traegt deshalb zwei Klassen: sonst gewinnt .portfolio__item p mit
   seinem Abstand nach oben und die beiden Spalten stuenden versetzt. */
.portfolio__item .portfolio__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.portfolio__mark { display: block; width: auto; height: 32px; }
.portfolio__item p { margin: 18px 0 0; max-width: 50ch; font-size: 18px; line-height: 1.58; color: var(--ink-body); }
.portfolio__link { display: inline-block; margin-top: 18px; }

/* --- 10. Der Ansprechpartner mit Portrait -------------------------------
   Dasselbe Bauteil .person wie auf allen Unterseiten, ergaenzt um das
   Portrait. Es steht hier eine Stufe kleiner als im Bereich Verantwortung:
   dort ist es der Moment, hier nur die Auskunft, mit wem man spricht. */
.person--portrait { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 22px; }
.person--portrait .person__label { grid-column: 1 / -1; }
.person--portrait img { display: block; width: 64px; height: 64px; margin-top: 14px; }
.person--portrait .person__body { min-width: 0; }

/* --- 11. Nachgeordnete Auskunft -----------------------------------------
   Ein Nachsatz unter den Eckdaten. Er traegt Verweisangaben, nicht
   Einordnung, und steht deshalb leiser. */
.aside-note {
  margin: 26px 0 0;
  max-width: 84ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-quiet);
}

/* --- 12. Der reduzierte Fuss --------------------------------------------
   Der Fuss ist keine Eigenheit dieser Seite mehr. Er gilt fuer die ganze
   Website und steht deshalb vollstaendig in assets/site.css unter
   .sitefoot--v2 - hier bleibt kein Regelsatz zurueck. */

@media (max-width: 1180px) {
  .pagehead--company { min-height: 520px; }
  .pagehead--company .pagehead__inner { max-width: 600px; }
  .section-title { font-size: 36px; }
  .section-title--lead { font-size: 40px; }
  .section-title--quiet { font-size: 28px; }
  .story { grid-template-columns: minmax(0, 1fr) 250px; gap: 48px; margin-top: 36px; }
  .principles { gap: 40px 52px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method { gap: 36px; }
  .stance { grid-template-columns: 180px minmax(0, 1fr); gap: 44px; }
  .stance__person img { width: 150px; height: 150px; }
  .stance__quote p { font-size: 27px; letter-spacing: -0.022em; }
  .trust { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .portfolio__item { padding-right: 40px; }
  .portfolio__item + .portfolio__item { padding-left: 40px; }
}

/* Unterhalb von 980 px traegt keine Spalte mehr Bild: der Verlauf dreht
   sich von waagerecht auf senkrecht. Das Bild bleibt als Band am unteren
   Rand des Kopfes sichtbar, der Satz steht vollstaendig auf ruhiger
   Flaeche. Die Verlaufsstufen rechnen deshalb vom unteren Rand aus und
   nicht in Prozent: nur so bleibt das Band gleich hoch, egal wie viele
   Zeilen der Satz auf einem schmalen Geraet braucht. */
@media (max-width: 980px) {
  .pagehead--company { min-height: 0; padding-block: 64px 190px; }
  .pagehead--company::before { background-position: 50% 62%; }
  .pagehead--company::after {
    background: linear-gradient(
      180deg,
      var(--herofield) 0%,
      var(--herofield) calc(100% - 230px),
      rgba(242, 250, 246, 0.82) calc(100% - 150px),
      rgba(242, 250, 246, 0.42) calc(100% - 60px),
      rgba(242, 250, 246, 0.3) 100%
    );
  }
  .pagehead--company .pagehead__inner,
  .pagehead--company .pagehead__title,
  .pagehead--company .pagehead__lede { max-width: 100%; }
}

@media (max-width: 860px) {
  .section-title { font-size: 32px; }
  .section-title--lead { font-size: 34px; }
  .section-title--quiet { font-size: 26px; }
  .story { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div { padding-right: 0; }
  .method { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .stance { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stance__person img { width: 128px; height: 128px; }
  .stance__quote p { font-size: 25px; }
  .portfolio { grid-template-columns: minmax(0, 1fr); }
  .portfolio__item { padding: 30px 0 0; }
  .portfolio__item + .portfolio__item { padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--line-cool); }
}