/*
  SCARATEC — Gestaltung.

  Die Corporate Identity der Vorgängerseite bleibt erhalten: Wortmarke in
  Versalien, das blaue Signet, Deep Blue #0000b2 als einzige Akzentfarbe,
  Raleway für Überschriften und Roboto für den Fließtext.

  Geändert wurde nur, was sachlich falsch war: Der Fließtext der alten Seite
  stand in #8d939b auf hellgrauem Grund, ein Kontrast von etwa 2,9:1. Das ist
  unter dem Mindestwert von 4,5:1 und auf einem Notebook im Tageslicht kaum
  lesbar. Fließtext steht jetzt in #2f353d.
*/

:root {
  --blue: #0000b2;
  --blue-deep: #000080;
  --ink: #16181c;
  --body: #2f353d;
  --muted: #5b626c;
  --line: #dfe2e6;
  --line-soft: #eceef1;
  --surface: #f6f6f6;
  --white: #fff;

  /*
    Die Farbe der Fokusmarkierung. Auf hellem Grund ist das die Akzentfarbe;
    auf den dunklen Flächen wird sie weiter unten überschrieben, weil ein
    dunkelblauer Rahmen auf beinahe schwarzem Grund nicht zu sehen ist. Wer
    die Seite mit der Tastatur bedient, verliert dort sonst die Orientierung.
  */
  --focus: #0000b2;

  --font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --wrap: 68rem;
  --prose: 40rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 178, 0.25);
}

a:hover,
a:focus-visible { border-bottom-color: var(--blue); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border: 0;
}

.skip-link:focus { left: 0; }

/* ---------- Kopfbereich ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  color: var(--ink);
}

.brand-mark { width: 2.25rem; height: 2.25rem; }

.brand-word {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}

.brand-word sup {
  font-size: 0.5em;
  font-weight: 400;
  top: -0.9em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--muted);
  border: 0;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--ink); }

.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--blue);
}

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 300;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 600;
}

p { margin: 0 0 1.25rem; }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--body);
}

.prose { max-width: var(--prose); }

/*
  „wrap prose" heißt: der übliche Seitenrand, darin eine schmale Textspalte —
  nicht eine schmale Spalte in der Seitenmitte. Ohne diese Regel gewinnt die
  Breitenangabe von .prose gegen die von .wrap, und der Absatz rutscht in die
  Mitte, während alles darüber und darunter links steht.
*/
.wrap.prose { max-width: var(--wrap); }

.wrap.prose > * { max-width: var(--prose); }

/*
  Eine Zwischenüberschrift mitten in einer Textspalte braucht oben Abstand,
  sonst klebt sie an dem Absatz, der noch zum vorigen Thema gehört. Die erste
  Überschrift einer Spalte ist ausgenommen, sonst entsteht dort eine Lücke.
*/
.prose > h2:not(:first-child),
.prose > h3:not(:first-child) { margin-top: 2.75rem; }

/* Nach einer abgesetzten Liste braucht die nächste Überschrift mehr Luft. */
.prose > .deflist + h2 { margin-top: 4.5rem; }

.prose ul,
.prose ol { padding-left: 1.25rem; margin: 0 0 1.5rem; }

.prose li { margin-bottom: 0.6rem; }

strong { font-weight: 500; color: var(--ink); }

/* ---------- Abschnitte ---------- */

section { padding: 4.5rem 0; }

/* Eine Gruppierung ohne eigene Überschrift ist kein Abschnitt und heißt
   deshalb div, nicht section. Damit sie trotzdem denselben Abstand hält wie
   ein Abschnitt, steht sie hier daneben. */
section.tight,
div.tight { padding: 3rem 0; }

section.shaded { background: var(--surface); }

section.bordered { border-top: 1px solid var(--line); }

.section-head { max-width: var(--prose); margin-bottom: 2.5rem; }

/* ---------- Aufmacher ---------- */

.hero { padding: 6rem 0 3.5rem; }

.hero h1 { max-width: 22ch; }

.hero .lead { max-width: 46rem; margin-top: 1.5rem; }

.hero-rule {
  width: 4rem;
  height: 3px;
  background: var(--blue);
  margin: 2.5rem 0 0;
}

/*
  Aufmacher mit Bild.

  Die drei Aufmacherbilder sind dunkel und lassen die linke Hälfte frei. Der
  Verlauf darüber ist trotzdem nötig: Auf schmalen Geräten rückt das Motiv in
  den Textbereich, und ohne Abdeckung sinkt der Kontrast unter den Grenzwert.
*/

.hero-dark {
  --focus: #ffffff;
  position: relative;
  isolation: isolate;
  background-color: #0b0d12;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  color: rgba(255, 255, 255, 0.82);
  padding: 7rem 0 6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    98deg,
    #0b0d12 0%,
    rgba(11, 13, 18, 0.97) 42%,
    rgba(11, 13, 18, 0.86) 58%,
    rgba(11, 13, 18, 0.34) 88%,
    rgba(11, 13, 18, 0.16) 100%
  );
}

/*
  Enger als im hellen Aufmacher: Die Textspalte muss vor dem Bildmotiv enden,
  sonst laufen Zeilen in die Strichzeichnung hinein.
*/
.hero-dark h1 { color: var(--white); max-width: 23ch; }

.hero-dark .lead {
  color: rgba(255, 255, 255, 0.8);
  max-width: 36rem;
}

.hero-dark .eyebrow { color: #7f8dff; }

.hero-dark .hero-rule { background: #2b3fd4; }

.hero-dark a {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

.hero-home { background-image: url("/static/img/hero-home.webp"); }
.hero-observability { background-image: url("/static/img/hero-observability.webp"); }
.hero-integration { background-image: url("/static/img/hero-integration.webp"); }

@media (max-width: 60rem) {
  .hero-home { background-image: url("/static/img/hero-home-sm.webp"); }
  .hero-observability { background-image: url("/static/img/hero-observability-sm.webp"); }
  .hero-integration { background-image: url("/static/img/hero-integration-sm.webp"); }

  .hero-dark::before {
    background: linear-gradient(
      170deg,
      rgba(11, 13, 18, 0.97) 0%,
      rgba(11, 13, 18, 0.9) 55%,
      rgba(11, 13, 18, 0.72) 100%
    );
  }
}

/* ---------- Karten ---------- */

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.card h3 { margin-bottom: 0.6rem; }

.card p { color: var(--body); }

.card p:last-of-type { margin-bottom: 1.25rem; }

.card .more { margin-top: auto; }

.section-more { margin-top: 2rem; }

.card-number {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--blue);
  display: block;
  margin-bottom: 0.75rem;
}

/* ---------- Auslöserliste ---------- */

.triggers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.triggers li {
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.triggers .num {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.triggers p { margin: 0; }

.triggers .quote {
  font-size: 1.1rem;
  font-weight: 300;
  font-family: var(--font-display);
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* ---------- Zweispaltiges Textraster ---------- */

.split {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.stack { display: grid; gap: 2rem; }

.reasons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.75rem;
}

.reasons li { padding-left: 1.5rem; border-left: 2px solid var(--line); }

.reasons li strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 0.25rem; }

.reasons li p { margin: 0; }

/* ---------- Abgrenzungstabelle ---------- */

.table-plain {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.table-plain th,
.table-plain td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: 1px solid var(--line);
}

.table-plain th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  width: 34%;
}

/* ---------- Handlungsaufforderung ---------- */

.cta {
  --focus: #ffffff;
  background: var(--blue);
  color: var(--white);
}

.cta h2,
.cta .eyebrow { color: var(--white); }

.cta p { color: rgba(255, 255, 255, 0.86); }

.cta a {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.cta a:hover { border-bottom-color: var(--white); }

.contact-lines {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  font-size: 1.2rem;
  font-family: var(--font-display);
}

/* ---------- Nachweise ohne Kundenbezug ---------- */

.facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.facts dt,
.facts .fact-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--blue);
  line-height: 1.1;
  display: block;
  margin-bottom: 0.4rem;
}

.facts .fact-label { color: var(--muted); font-size: 0.95rem; line-height: 1.5; display: block; }

/* ---------- Definitionsliste ---------- */

.deflist { margin: 0; }

.deflist > div + div { margin-top: 1.5rem; }

.deflist dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.deflist dd { margin: 0.4rem 0 0; }

/*
  Im Impressum stehen längere Rechtstexte in der Definitionsliste; dort darf
  zwischen den Einträgen mehr Luft sein als in einer Karte.
*/
.deflist.legal { max-width: var(--prose); }

.deflist.legal > div + div {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-soft);
}

/*
  Quelltext statt Referenzen.

  Nebeneinander gestellte Karten funktionieren hier nicht: Die Projekte
  beschreiben sich unterschiedlich lang, und drei schmale Spalten erzwingen
  entweder gekürzte Texte oder eine Karte mit halbem Leerraum. Stattdessen
  untereinander, mit den Kennzahlen rechts neben der Beschreibung.
*/

.projects {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.projects > li {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 1rem 4rem;
  align-items: start;
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
}

.projects h3 { font-size: 1.5rem; font-weight: 300; margin-bottom: 1rem; }

.projects .project-main > p:last-child { margin-bottom: 0; }

.projects .deflist { font-size: 0.95rem; }

.projects .deflist > div + div { margin-top: 1rem; }

.projects .deflist dt {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.projects .deflist dd { color: var(--body); }

.projects .more { margin-top: 1.75rem; }

.card-kicker {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

/* ---------- Kontaktangaben ---------- */

/* Der Einzug von .prose ul gilt für Aufzählungen im Fließtext, nicht hier. */
.contact-block,
.prose .contact-block {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.contact-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.contact-value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1.3;
  word-break: break-word;
}

.address {
  font-style: normal;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.muted-note {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: var(--prose);
}

/* ---------- Seite nicht gefunden ---------- */

.notfound-links {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* ---------- Fußbereich ---------- */

.site-footer {
  --focus: #ffffff;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding: 4rem 0 0;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-bottom: 3rem;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }

.footer-col li { margin-bottom: 0.5rem; }

.site-footer a {
  color: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.site-footer a:hover { color: var(--white); border-bottom-color: var(--white); }

.footer-brand {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.footer-head {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.footer-base p { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }

/* ---------- Schmale Darstellungen ---------- */

@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  /*
    Auf schmalen Geräten läuft die Navigation über zwei Zeilen. Bliebe der
    Kopf dabei klebend, nähme er ein Fünftel des Bildschirms dauerhaft weg.
    Also scrollt er hier mit — statt ein Klappmenü mit Skript einzuführen.
  */
  .site-header { position: static; }
  .header-inner { min-height: auto; padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .site-nav ul { gap: 1rem 1.25rem; }
  .hero { padding: 3.5rem 0 3rem; }
  section { padding: 3.5rem 0; }
  .triggers li { grid-template-columns: 1fr; gap: 0.35rem; }
  .table-plain th { width: auto; }
  .projects > li { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 0; }
  .contact-value { font-size: 1.25rem; }
  .notfound-links { gap: 1.25rem; }
}

/*
  Auf Telefonbreite passt die zweispaltige Tabelle nicht mehr: Wörter wie
  „Arbeitnehmerüberlassung" halten die erste Spalte auf und schieben die zweite
  über den Rand hinaus. Deshalb stehen Stichwort und Erklärung hier untereinander.
*/
@media (max-width: 34rem) {
  .table-plain tr,
  .table-plain th,
  .table-plain td { display: block; }
  .table-plain th { padding: 1rem 0 0.35rem; border-bottom: 0; }
  .table-plain td { padding: 0 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; border: 0; }
}