/* Solvergon — Stylesheet
   Ein einziges Stylesheet für alle Seiten. Keine externen Schriften,
   keine externen Skripte: die Seite lädt nichts von fremden Servern. */

:root {
  --bg:         #fdfcfa;
  --bg-alt:     #f4f2ee;
  --bg-deep:    #1b2a23;
  --ink:        #1c1c1a;
  --ink-soft:   #57554f;
  --ink-faint:  #8a877f;
  --line:       #e4e0d9;
  --accent:     #17543a;
  --accent-alt: #e9f1ec;
  --maxw:       64rem;
  --prose:      42rem;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Grundtypografie ---------- */

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

/* Obergrenze so gewählt, dass auch die längsten Überschriften auf breiten
   Bildschirmen einzeilig bleiben (gemessen: 902 px bei 976 px Spaltenbreite). */
h1 { font-size: clamp(1.8rem, 3.9vw, 2.4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 0.97rem; }

/* Satzbreiten:
   Überschriften und die kurzen Einleitungen darunter laufen auf die volle
   Spaltenbreite — sie stehen bündig mit den Karten-Rastern.
   Mehrabsätziger Fließtext bleibt schmaler (.prose), sonst werden die Zeilen
   zu lang zum Lesen. */
main h1,
main h2 { max-width: none; }

main > section > .wrap > p.lead,
main > .page-head > .wrap > p.lead { max-width: none; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

strong { font-weight: 600; }

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }
li:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.muted { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.small { font-size: 0.9rem; }

/* Die Zeile über der Überschrift. Bewusst klein, aber im Akzentton statt in
   hellem Grau: Der frühere Grauwert lag mit 3,5:1 unter dem Kontrastminimum
   für kleine Schrift und wurde leicht überlesen. */
.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}
.band-deep .eyebrow { color: #9fd0b4; }

/* ---------- Layout ---------- */

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

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

section { padding: 3.6rem 0; }
section.tight { padding: 2.4rem 0; }

.band-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.band-deep { background: var(--bg-deep); color: #eceae4; }
.band-deep h2, .band-deep h3 { color: #fff; }
.band-deep .lead, .band-deep .muted { color: #b5bfb8; }
.band-deep a { color: #9fd0b4; }
.band-deep a:hover { color: #fff; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.6rem 0;
}

/* ---------- Kopfzeile ---------- */

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.6rem;
  padding-block: 0.85rem;
}

.brand {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand span { color: var(--accent); }

/* Wortbildmarke aus Logo/solvergon-wortmarke.svg. Im Kopf nur der
   Schriftzug, die Zeile darunter wäre dort unleserlich klein; im Fuß die
   vollständige Marke mit Strich und Zeile. Die Buchstaben sind Pfade, sie
   sehen deshalb auf jedem System gleich aus, anders als die frühere
   Textfassung in der Systemschrift. */
.brand img { display: block; height: 24px; width: auto; }
/* 250 px ist die kleinste Breite, bei der die Zeile der Marke noch mit
   rund 13 px Schriftgröße steht und lesbar bleibt. */
.foot-logo { display: block; width: 250px; max-width: 100%; height: auto; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  font-size: 0.93rem;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Menüpunkt mit Unterebene (Produkte). Öffnet per Maus und per Tastatur,
   ohne JavaScript. */
.nav-group { position: relative; }
.nav-label {
  color: var(--ink-soft);
  cursor: default;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav-group:hover .nav-label,
.nav-group:focus-within .nav-label { color: var(--ink); }
.nav-label[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + 0.55rem);
  left: -0.9rem;
  z-index: 20;
  min-width: 11rem;
  padding: 0.5rem 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub { display: block; }
.nav-sub a {
  display: block;
  padding: 0.35rem 0.9rem;
  border-bottom: 0;
  white-space: nowrap;
}
.nav-sub a:hover { background: var(--accent-alt); color: var(--accent); }
.nav-sub a[aria-current="page"] { color: var(--accent); border-bottom: 0; }

/* Auf schmalen Bildschirmen bricht die Navigation um und braucht viel Höhe —
   dort klebt der Kopf deshalb nicht mit, und die Unterebene steht offen. */
@media (max-width: 700px) {
  .site-head { position: static; }
  .site-nav { font-size: 0.88rem; gap: 0.35rem 1.1rem; }
  .nav-group { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; align-items: baseline; }
  .nav-label { display: none; }
  .nav-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-sub a { padding: 0; }
  .nav-sub a:hover { background: none; }
}

/* ---------- Auftakt ---------- */

.hero { padding: 4.2rem 0 3.2rem; }

.page-head {
  padding: 3.2rem 0 2rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- Schaltflächen ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

.btn {
  display: inline-block;
  padding: 0.62rem 1.15rem;
  border-radius: 3px;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.btn:hover { background: #114029; border-color: #114029; color: #fff; }

.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-alt); color: var(--accent); }

.band-deep .btn { background: #eceae4; border-color: #eceae4; color: var(--bg-deep); }
.band-deep .btn:hover { background: #fff; border-color: #fff; color: var(--bg-deep); }
.band-deep .btn-ghost { background: transparent; border-color: #7f9c8a; color: #cfe3d5; }
.band-deep .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }

/* ---------- Raster ---------- */

.grid { display: grid; gap: 1.4rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
  background: #fff;
}
.card h3 { margin-bottom: 0.45rem; }
.card p { font-size: 0.95rem; color: var(--ink-soft); }

.band-alt .card { background: var(--bg); }

/* schlichte Aufzählung ohne Rahmen */
.plain { border: 0; padding: 0; background: none; }
.band-alt .plain { background: none; }
.plain h3 {
  padding-top: 0.9rem;
  border-top: 2px solid var(--accent);
  margin-bottom: 0.45rem;
}

/* ---------- Vier-Felder-Matrix (KI-Ready) ----------
   Anordnung wie im KI-Readiness-Check: Mensch & Organisation auf der
   Waagerechten, Technik & Prozess auf der Senkrechten. */

.matrix {
  display: grid;
  grid-template-columns: auto auto 1fr 1fr;
  gap: 1.1rem 1.3rem;
  margin-top: 2rem;
}

.matrix-y {
  grid-row: 1 / 3;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.matrix-level {
  align-self: center;
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.matrix-x {
  grid-column: 3 / 5;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.matrix-x b {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Auf schmalen Bildschirmen trägt die Matrix nicht mehr. Dann stehen die
   vier Felder untereinander und jedes nennt seine Position selbst. */
.matrix-pos { display: none; }

@media (max-width: 820px) {
  .matrix { display: block; }
  .matrix-y, .matrix-level, .matrix-x { display: none; }
  .matrix .card + .card { margin-top: 1.3rem; }
  .matrix-pos {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
  }
}

/* ---------- Tabellen ---------- */

.table-scroll { overflow-x: auto; margin: 1.8rem 0 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 38rem;
  font-size: 0.92rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1.2rem 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
th {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--ink-faint);
}
td { color: var(--ink-soft); }
td.rowhead { font-weight: 600; color: var(--ink); padding-right: 1.6rem; }

/* Auf dem grauen Band liegt die Zeilenlinie dichter an der Fläche und
   verliert sich. Etwas dunkler gleicht das aus, damit Tabellen auf beiden
   Untergründen gleich schwer wirken. */
.band-alt td { border-bottom-color: #d8d3ca; }

/* ---------- Text mit Faktenkasten daneben ---------- */
/* Zahlen stehen als schmaler Kasten rechts neben dem Fließtext, nicht als
   breite Grafik darunter. Die Textspalte behält damit ihre Satzbreite von
   42 rem, und der Kasten bricht selbst um, statt auf feste Koordinaten
   angewiesen zu sein wie ein SVG. Unterhalb von 900 px steht er unter dem
   Text. */

.mit-fakten { display: grid; gap: 2rem; align-items: start; margin-top: 1.4rem; }
@media (min-width: 900px) {
  .mit-fakten { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; }
}

.fakten {
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.band-alt .fakten { background: var(--bg); }

.fakten h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

/* Die Stufen stehen untereinander, damit die Steigerung im schmalen Kasten
   dieselbe Reihenfolge hat wie im Text daneben. */
.stufe { padding-top: 0.9rem; margin-top: 0.9rem; border-top: 1px solid var(--line); }
.stufe:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

.stufe-lage {
  margin: 0 0 0.15rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.stufe-zahl {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stufe-zahl small { font-size: 0.62rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.stufe-final .stufe-zahl { color: var(--accent); }

/* Einordnung am Fuß des Kastens, deutlich zurückgenommen: Sie vergleicht,
   sie behauptet nichts über das Produkt. */
.fakten-fuss {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- Schemata ---------- */
/* Zeichnungen liegen als SVG direkt im Markup statt als Bilddatei: Sie
   skalieren verlustfrei, übernehmen die Seitenfarben und laden nichts nach.
   Auf schmalen Schirmen scrollt das Schema waagerecht im eigenen Rahmen,
   dieselbe Lösung wie bei den Tabellen. */

.schema { margin-top: 2rem; }
.schema svg { display: block; width: 100%; height: auto; min-width: 44rem; }
.schema text { font-family: inherit; }
/* Die Bildunterschrift bleibt auf einer Zeile: keine Satzbreitenbegrenzung,
   und der Text ist kurz genug, dass er auch in der schmalen Spalte passt.
   Auf Telefonen bricht er zwangsläufig um, das ist dort in Ordnung. */
.schema-legende {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
}

/* ---------- Fallbeispiele ---------- */

.case {
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
  margin-top: 2.6rem;
}
/* Das erste Projekt braucht keine eigene Trennlinie: Die Kopfzone endet
   bereits mit einer. Sonst stehen zwei Linien mit Leerraum dazwischen. */
.case:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.case h3 { font-size: 1.35rem; letter-spacing: -0.02em; }

/* Drei Felder je Projekt, links nach rechts als Abfolge lesbar:
   Ausgangslage, was gebaut wurde, Ergebnis. */
.case-body { display: grid; gap: 1.6rem; }
@media (min-width: 640px) { .case-body { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .case-body { grid-template-columns: repeat(3, 1fr); } }
.case-body h4 { padding-top: 0.7rem; border-top: 2px solid var(--accent); }
.case-body h4 { margin-bottom: 0.35rem; color: var(--ink); }
.case-body p, .case-body ul { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Personen ---------- */

.people { display: grid; gap: 2.4rem; margin-top: 1.5rem; }
@media (min-width: 780px) { .people { grid-template-columns: 1fr 1fr; gap: 3rem; } }
/* Drei Personen nebeneinander. Unterhalb von 900 px bleibt es beim Zweier-
   Raster, dort stünde die dritte Spalte zu eng. */
@media (min-width: 900px) { .people-3 { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }

/* Porträt: zeigt „Foto folgt", solange keine Bilddatei hinterlegt ist.
   Sobald ein <img> im Rahmen liegt, deckt es den Platzhalter ab. */
.portrait {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-alt);
  overflow: hidden;
}
.portrait::after {
  content: "Foto folgt";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Einzelporträt mit Bild links und Text daneben. Auf `ueber-uns.html` stehen
   zwei Personen nebeneinander, dort liegt das Bild über dem Text (.people).
   Hier steht eine Person allein, dafür mit mehr Text: Nebeneinander nutzt den
   Platz besser und hält die Zeilenlänge auf Satzbreite. */
.bio { display: grid; gap: 1.3rem; margin-top: 1.5rem; }
@media (min-width: 620px) {
  .bio { grid-template-columns: 220px minmax(0, 42rem); gap: 2.2rem; align-items: start; }
}
.bio .portrait { margin-bottom: 0; }

.person h3 { margin-bottom: 0.15rem; }
.person .role {
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 500;
}

/* ---------- Kontakt ---------- */

.contact-grid { display: grid; gap: 2.4rem; }
@media (min-width: 780px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: 1.1rem; }
.contact-list b {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.1rem;
}

form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
form .field { margin-bottom: 1rem; }
input[type="text"], input[type="email"], textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea { min-height: 8rem; resize: vertical; }

.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; color: var(--ink-soft); }
.check input { margin-top: 0.35rem; }

.note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  border-left: 2px solid var(--line);
  padding-left: 0.85rem;
  margin-top: 1.4rem;
}

/* ---------- Fußzeile ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 2.6rem 0 2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.foot-inner { display: grid; gap: 1.8rem; }
@media (min-width: 700px) { .foot-inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot h4 {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 0.3rem; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-bottom {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
  color: var(--ink-faint);
}

/* ---------- Platzhalterseiten ---------- */

.placeholder {
  border: 1px dashed var(--ink-faint);
  border-radius: 4px;
  padding: 1.3rem 1.5rem;
  background: var(--accent-alt);
  font-size: 0.95rem;
}