/* ==========================================================================
   SKS GmbH – Design System
   Alle Farben, Abstände und Schriftgrößen sind hier zentral definiert.
   Wird eine Variable in :root geändert, übernimmt die gesamte Website
   die Änderung automatisch.
   ========================================================================== */

/* ---------- Schrift ----------
   Inter, selbst gehostet aus assets/fonts/. Es werden keinerlei Daten an
   Google oder andere Dritte übertragen – das hält die Datenschutzerklärung
   schlank. Lizenz: SIL Open Font License 1.1 (siehe fonts/Inter-LICENSE.txt),
   kostenlos auch für kommerzielle Nutzung.
   Eine Datei deckt alle Schriftstärken von 100 bis 900 ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Markenfarben ----------
     Zwei Hausfarben der SKS GmbH:
       Grün  #00A870  →  --green-500
       Blau  #132E59  →  --blue-800
     Die übrigen Werte sind daraus abgeleitete Aufhellungen und
     Abdunklungen. Sie existieren, weil reines #00A870 auf Weiß nur ein
     Kontrastverhältnis von 3,07 : 1 erreicht – zu wenig für Fließtext
     (Barrierefreiheit verlangt 4,5 : 1). Deshalb steht für Text und Links
     ein dunklerer Grünton bereit, für dunkle Flächen ein hellerer. */

  --blue-900: #0A1931;  /* dunkelster Ton, z. B. Schrift auf Grün      */
  --blue-850: #152F5C;  /* Kopfbereich, obere Leiste und Fußbereich    */
  --blue-800: #132E59;  /* HAUSFARBE BLAU – Hero, Überschriften        */
  --blue-700: #1B3D71;  /* Verlauf im Hero                             */
  --blue-400: #667793;  /* gedämpfter Text                             */
  --blue-100: #DCE0E6;  /* Linien                                      */
  --blue-050: #F1F2F5;  /* getönte Abschnitte                          */

  --green-700: #00764E; /* Links und kleiner Text auf Weiß  (5,67 : 1) */
  --green-600: #008F5F; /* Zwischenton                                 */
  --green-500: #00A870; /* HAUSFARBE GRÜN – Flächen, Buttons, Icons    */
  --green-400: #40BE94; /* Grün auf dunklem Blau            (5,77 : 1) */
  --green-300: #6FE7BF; /* Grün auf hellerem Blau, z. B. im Kopfbereich */
  --green-050: #D9F2EA; /* zarte Grünfläche                            */

  /* Neutrale Töne */
  --ink: #132E59;       /* Überschriften = Hausfarbe Blau              */
  --body: #40506A;      /* Fließtext                        (8,16 : 1) */
  --muted: #667793;
  --line: #DCE0E6;
  --surface: #F1F2F5;
  --white: #FFFFFF;

  /* Typografie */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(19, 46, 89, .06), 0 4px 12px rgba(19, 46, 89, .06);
  --shadow-md: 0 8px 30px rgba(19, 46, 89, .11);
  --shadow-lg: 0 24px 60px rgba(19, 46, 89, .17);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

/* ---------- Hilfsklassen ---------- */
.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tint { background: var(--surface); }
.section--dark { background: var(--blue-800); color: #C2CEE1; }
.section--dark h2, .section--dark h3 { color: #fff; }
/* Weiße Karten in einem dunklen Abschnitt behalten ihre eigenen Farben –
   sonst erbten Überschrift und Text das Weiß und verschwänden auf der Karte. */
.section--dark .card { color: var(--body); }
.section--dark .card h2, .section--dark .card h3 { color: var(--ink); }
.lead { font-size: 1.15rem; color: var(--body); }
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: .9rem;
}
.section--dark .eyebrow { color: var(--green-400); }
.measure { max-width: 62ch; }
/* auch dann mittig, wenn beide Klassen am selben Element stehen */
.center .measure, .center.measure { margin-inline: auto; }

/* Platzhalter-Markierung: zeigt Stellen, die noch mit echten Inhalten
   gefüllt werden müssen. Klasse einfach entfernen, wenn Text final ist. */
.ph {
  background: #FFF3CD;
  color: #7A5C00;
  border-bottom: 2px dotted #E0A800;
  padding: 0 .15em;
  border-radius: 3px;
}
.ph-box {
  border: 2px dashed #E0A800;
  background: #FFFBEF;
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  color: #7A5C00;
  font-size: .95rem;
}
.ph-box strong { color: #7A5C00; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--phone { white-space: nowrap; }
/* Primärer Button: reines Hausgrün mit sehr dunkler Schrift.
   Das ist Absicht – weiße Schrift auf #00A870 käme nur auf 3,07 : 1 und wäre
   nicht barrierefrei, dunkles Blau darauf erreicht 5,71 : 1. */
.btn--primary { background: var(--green-500); color: var(--blue-900); box-shadow: 0 6px 20px rgba(0,168,112,.30); }
.btn--primary:hover { background: #17BE83; }
.btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.65); }
.btn--outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: var(--green-500); color: var(--green-700); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.center .btn-row { justify-content: center; }

/* ---------- Kopfbereich / Navigation ---------- */
/* Die obere Leiste nimmt den grünen Lichtschein aus dem Kopfbereich auf, so
   als schiene er durch die weiße Navigation hindurch. Das Licht sitzt rechts
   unten und ist bewusst schwach; die Schrift steht in Weiß, damit sie auch
   auf der aufgehellten Stelle klar lesbar bleibt. */
.topbar {
  position: relative; overflow: hidden;
  background: var(--blue-850); color: #C2CEE1;
  font-size: .85rem;
}
.topbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(120% 320% at 84% 130%, rgba(0,168,112,.34), transparent 62%),
    radial-gradient(60% 200% at 99% 140%, rgba(64,190,148,.22), transparent 55%);
}
.topbar__inner {
  position: relative; z-index: 1;
  display: flex; justify-content: flex-end; gap: 1.6rem; padding: .5rem 0; flex-wrap: wrap;
}
.topbar a { color: #FFFFFF; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.topbar svg { width: 15px; height: 15px; flex: none; }
.topbar a:hover { color: #fff; }
/* Die Fernwartung ist keine Kontaktangabe, sondern eine Handlung – sie steht
   deshalb abgesetzt in einer eigenen Fläche. Der kurze Weg ist im Störungsfall
   genau das, was jemand sucht. */
.topbar__fern {
  background: rgba(255,255,255,.14); border-radius: 999px;
  padding: .18rem .8rem; font-weight: 600;
}
.topbar__fern:hover { background: rgba(255,255,255,.24); text-decoration: none; }
@media (max-width: 620px) {
  .topbar__inner { justify-content: center; gap: .9rem 1.1rem; }
  /* Auf schmalen Bildschirmen zählt die kurze Zeile mehr als die vollständige
     Adresse – die steht ohnehin auf der Kontaktseite. Die Auszeichnung muss
     `.topbar a` überstimmen, deshalb beide Klassen. */
  .topbar a.topbar__mail { display: none; }
  /* Verkürzt auf „Fernwartung“, damit Telefonnummer und Schaltfläche in eine
     Zeile passen. */
  .topbar__lang { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; }

.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo__mark {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  background: var(--green-500);
  color: var(--blue-900); font-weight: 800; font-size: 1.02rem; letter-spacing: .02em;
  display: grid; place-items: center;
}
/* Echtes Logo: wird angezeigt, sobald LOGO in build.py gesetzt ist.
   Die Breite ergibt sich aus der Höhe – das Seitenverhältnis bleibt erhalten. */
.logo__img { height: 46px; width: auto; max-width: 260px; }
@media (max-width: 480px) { .logo__img { height: 38px; } }

.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name { font-weight: 800; color: var(--ink); font-size: 1.22rem; letter-spacing: -.02em; }
.logo__tag { font-size: .74rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  color: var(--ink); font-weight: 500; font-size: .97rem;
  padding: .55rem .85rem; border-radius: 8px;
}
.nav a:hover { background: var(--green-050); color: var(--green-700); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--green-700); font-weight: 600; }
/* ---------- Untermenü „Leistungen" ----------
   Klappt auf, sobald der Mauszeiger darüber liegt oder ein Element darin den
   Tastaturfokus hat. Ohne JavaScript, damit es auch ohne Skript funktioniert. */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__caret { display: inline-flex; margin-left: .15rem; }
.nav__caret svg { width: 14px; height: 14px; transition: transform .18s ease; }
.nav__group:hover .nav__caret svg,
.nav__group:focus-within .nav__caret svg { transform: rotate(180deg); }
.nav__group > a { display: inline-flex; align-items: center; }
.nav__group > a.is-parent { color: var(--green-700); font-weight: 600; }

.nav__sub {
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 250px; margin: 0; padding: .5rem;
  list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub li { margin: 0; }
.nav__sub a { display: block; padding: .6rem .8rem; font-size: .94rem; border-radius: 7px; }

.nav .btn { margin-left: .6rem; padding: .65rem 1.25rem; font-size: .95rem; }
/* muss die Farbregel von ".nav a" überschreiben, sonst landet die
   Überschrift-Farbe auf dem grünen Button und der Kontrast reicht nicht */
.nav a.btn--primary { color: var(--blue-900); }
.nav a.btn--primary:hover { color: var(--blue-900); }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px; cursor: pointer; padding: 0;
  place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-2px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: grid; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: .8rem 1.5rem 1.4rem; box-shadow: var(--shadow-md);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem .6rem; border-radius: 8px; }
  .nav .btn { margin: .5rem 0 0; justify-content: center; }

  /* Auf dem Handy steht das Untermenü dauerhaft eingerückt darunter –
     ein zweites Aufklapp-Element wäre auf Touch nur im Weg. */
  .nav__group { display: block; }
  .nav__caret { display: none; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 .4rem .9rem; margin: 0;
    border-left: 2px solid var(--line);
  }
  .nav__sub a { padding: .55rem .6rem; color: var(--body); }
}

/* ---------- Kopfbereich der Seiten ----------
   Aufbau in drei Ebenen:
     1. gleichmäßiges Hausblau als Grundfläche
     2. ::before – grüner Lichtschein, rechts stärker als links
     3. ::after  – das Bildzeichen aus dem Logo, angeschnitten am rechten Rand
   Der Text liegt darüber und steht bewusst links, wo es dunkel und ruhig
   bleibt. Das Licht fällt rechts auf das Motiv, dort steht kein Text. */
.hero {
  position: relative; overflow: hidden;
  background: var(--blue-850);
  color: #D2DCEA;
  padding: clamp(2.4rem, 5.5vw, 4rem) 0 clamp(2.4rem, 5.5vw, 3.6rem);
}
/* grünes Licht */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 76% 50%, rgba(0,168,112,.46), transparent 52%),
    radial-gradient(circle at 96% 18%, rgba(64,190,148,.30), transparent 44%);
}
/* Bildzeichen. Die Transparenz steht hier und nicht in der SVG-Datei,
   damit sie sich an einer Stelle verändern lässt. */
/* Die Größe hängt an der Höhe des Bereichs, nicht an der Breite. Sonst würde
   das Motiv auf der hohen Startseite riesig und auf den flachen Unterseiten
   winzig – so bleibt das Verhältnis überall gleich. */
.hero::after {
  content: ""; position: absolute; top: 44%; right: 5%;
  height: 74%; aspect-ratio: 143 / 126; transform: translateY(-50%);
  background: url("motiv.svg?v=87") right center / contain no-repeat;
  opacity: .15; pointer-events: none; z-index: 1;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero p { font-size: 1.2rem; max-width: 56ch; }
.hero .eyebrow { color: var(--green-300); }
.hero--sub { padding: clamp(2.2rem, 4.6vw, 3.4rem) 0; }
.hero--sub h1 { max-width: 22ch; }
/* Auf den Unterseiten ist der Bereich flacher – dort wirkt das Motiv
   kleiner und etwas weiter außen ruhiger. */
/* Der Kopfbereich der Unterseiten ist flacher. Das Motiv wird deshalb an der
   Höhe gemessen kleiner gehalten und wieder mittig gesetzt – bei top:44% aus
   der Regel darüber wäre es oben angeschnitten worden. */
.hero--sub::after { top: 50%; height: 84%; right: 4%; opacity: .16; }

/* Zahl und Beschriftung stehen mittig übereinander. Sonst klebt eine kurze
   Zahl wie „4" am linken Rand einer breiten Beschriftung. */
.hero-stats {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 2rem; padding-top: 1.5rem;
}
/* Die Trennlinie läuft nicht durch bis zum Rand, sondern blendet nach rechts
   aus – sonst schneidet sie durch das Bildzeichen im Hintergrund. */
.hero-stats::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.30) 22%,
    rgba(255,255,255,0) 54%);
}
.hero-stats div { text-align: center; }
.hero-stats div strong { display: block; font-size: 1.9rem; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.hero-stats div span { font-size: .9rem; color: #C2CEE1; }

/* Auf schmalen Bildschirmen steht der Text über die volle Breite. Licht und
   Motiv wandern deshalb nach unten rechts, damit der Bereich hinter der
   Überschrift dunkel und gut lesbar bleibt. */
@media (max-width: 760px) {
  /* Auf kleinen Bildschirmen fällt der Kopfbereich sonst zu wuchtig aus –
     weniger Luft, etwas kleinere Schrift, engere Kennzahlenleiste. */
  .hero { padding: 2.1rem 0 2.1rem; }
  .hero h1 { font-size: clamp(1.8rem, 7.6vw, 2.2rem); }
  .hero p { font-size: 1rem; line-height: 1.55; }
  .hero .btn-row { margin-top: 1.25rem !important; gap: .7rem; }
  .hero .btn { padding: .68rem 1.25rem; font-size: .93rem; }
  .hero-stats { margin-top: 1.6rem; padding-top: 1.1rem; gap: .9rem 1.1rem; }
  .hero-stats div strong { font-size: 1.3rem; }
  .hero-stats div span { font-size: .78rem; line-height: 1.4; }
  .hero--sub { padding: 1.9rem 0 2rem; }

  .hero::before {
    background-image:
      radial-gradient(circle at 86% 96%, rgba(0,168,112,.30), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(64,190,148,.16), transparent 42%);
  }
  /* Das Zeichen sitzt vollständig im Bild, nicht angeschnitten am unteren
     Rand – deshalb an der Breite gemessen und mit Abstand zur Kante. */
  .hero::after,
  .hero--sub::after {
    top: auto; bottom: 5%; right: 4%;
    height: auto; width: 44%; aspect-ratio: 143 / 126;
    transform: none; opacity: .085;
  }
  /* Die untere Kennzahl sitzt auf dem Handy genau über dem Motiv –
     etwas heller, damit der Kontrast auch dort stimmt. */
  .hero-stats div span { color: #D8E0EC; }
}
.hero-stats strong.ph { color: #7A5C00; display: block; width: fit-content; }
@media (max-width: 620px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.5rem; }
}

/* Breadcrumb */
.crumbs { font-size: .88rem; color: #AFC0D6; margin-bottom: 1.2rem; }
.crumbs a { color: #CFDBEB; }

/* ---------- Raster & Karten ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Vier gleichwertige Elemente: nebeneinander, dann 2 × 2, dann untereinander.
   Ein automatisches Raster ergäbe sonst je nach Fensterbreite 3 + 1. */
/* Drei gleichwertige Elemente: nebeneinander, sonst untereinander. Ein
   automatisches Raster ergäbe zwischendurch 2 + 1, was unruhig wirkt. */
.grid--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--drei { grid-template-columns: 1fr; } }
.grid--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1060px) { .grid--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid--vier { grid-template-columns: 1fr; } }
/* Die vier Leistungsbereiche als großes Zweierraster */
.grid--bereiche { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
@media (max-width: 760px) { .grid--bereiche { grid-template-columns: 1fr; } }
/* Zehn Personen ergeben so zwei gleich volle Reihen zu fünf Kacheln. */
/* Zehn Personen gehen in fünf Spalten glatt auf – das ist die Grundform.
   Darunter vier (4 + 4 + 2) und zwei (fünf volle Reihen). Drei Spalten sind
   bewusst ausgelassen: Dabei bliebe in der letzten Reihe eine einzelne
   Kachel stehen. */
.grid--team { grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
@media (max-width: 1120px) { .grid--team { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .grid--team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid--team { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link { color: var(--body); display: block; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-400); text-decoration: none; }
.card--link:hover h3 { color: var(--green-700); }
.card__more svg { width: 16px; height: 16px; transition: transform .18s ease; }
.card--link:hover .card__more svg { transform: translateX(3px); }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  background: var(--green-050); color: var(--green-700); margin-bottom: 1.1rem;
}
.card__icon svg { width: 25px; height: 25px; }
.card__icon--accent { background: var(--green-050); color: var(--green-400); }
/* Kachel für die vier Bereichs-Symbole aus der Messewand-Vorlage.
   Die Symbole sind zweifarbig für grünen Grund gestaltet – die Kachel liefert
   diesen Grund, damit sie genauso wirken wie auf der Messewand. */
/* Die vier Bereichs-Symbole stehen frei, ohne Kachel. Ihre Linien sind im
   Hausgrün eingefärbt, die Flächen im Hausblau – so wie auf der Messewand,
   nur für hellen Grund umgefärbt. */
.card__icon--marke {
  width: auto; height: 56px; border-radius: 0; background: none; padding: 0;
  display: block; margin-bottom: 1.1rem;
}
.card__icon--marke img { height: 56px; width: auto; max-width: 100%; }
.card__more { font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; }
/* Gleiche Stelle, gleiche Größe wie „Zur Seite" – aber grau und ohne Pfeil,
   weil hier (noch) nichts anzuklicken ist. */
.card__more--bald { color: #5A6982; font-weight: 500; }

/* Kacheln mit zwei Zielen: die ganze Fläche führt auf die Seite, das
   Datenblatt lässt sich zusätzlich direkt herunterladen. Ein Verweis im
   Verweis ist nicht erlaubt – deshalb legt sich der Hauptverweis unsichtbar
   über die Kachel und der PDF-Verweis darüber. */
.kachel-aktionen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
  margin-top: auto; padding-top: .9rem;
}
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.kachel-pdf {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .86rem; font-weight: 600; color: var(--green-700);
  padding: .2rem .6rem; border-radius: 999px; background: var(--green-050);
}
.kachel-pdf:hover { background: #C7EADC; text-decoration: none; }
.kachel-pdf svg { width: 15px; height: 15px; flex: none; }

/* Split-Layout Bild/Text */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--reverse > *:first-child { order: 2; }
@media (max-width: 700px) { .split--reverse > *:first-child { order: 0; } }

.media-placeholder {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: linear-gradient(135deg, #EFF2F6, #DFE9EC);
  border: 2px dashed #A7BBC4;
  display: grid; place-items: center; text-align: center;
  color: #4B6273; font-size: .92rem; padding: 1.5rem;
}
.media-placeholder svg { width: 44px; height: 44px; opacity: .55; margin: 0 auto .7rem; display: block; }

/* Checkliste */
.checks { list-style: none; padding: 0; }
/* Längere Aufzählungen in einem breiten Kasten laufen zweispaltig, damit die
   Zeilen nicht quer über die ganze Seite gehen. */
.checks--zwei { columns: 2; column-gap: 2.5rem; }
.checks--zwei li { break-inside: avoid; }
@media (max-width: 700px) { .checks--zwei { columns: 1; } }
.checks li { position: relative; padding-left: 2rem; margin-bottom: .75rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--green-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300764E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.section--dark .checks li::before { background-color: rgba(64,190,148,.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340BE94' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* Prozess-Schritte */
.steps { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { position: relative; padding-top: 3.4rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--green-500); color: var(--blue-900); font-weight: 700;
  display: grid; place-items: center; font-size: 1.05rem;
}
.step h3 { font-size: 1.08rem; }
.step p { font-size: .96rem; margin-bottom: 0; }

/* Herstellerleiste auf Start- und Übersichtsseite. Gleich große Kacheln,
   damit Logos unterschiedlicher Form ruhig nebeneinander stehen. */
.marken-leiste {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) { .marken-leiste { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .marken-leiste { grid-template-columns: repeat(2, 1fr); } }
.marke {
  display: grid; place-items: center; min-height: 76px; padding: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--blue-800); font-weight: 700; font-size: .95rem; text-align: center;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.marke:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--green-500); box-shadow: var(--shadow-sm);
}
.marke .brand-logo { max-height: 34px; max-width: 100%; }

/* Kachelraster auf der Hersteller-Übersicht */
.grid--marken { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 860px) { .grid--marken { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--marken { grid-template-columns: 1fr; } }
.marke-kachel { position: relative; display: flex; flex-direction: column; }
.marke-kachel__logo {
  min-height: 58px; display: flex; align-items: center; margin-bottom: .9rem;
}
.marke-kachel__logo .brand-logo { max-height: 40px; }
.marke-kachel p:last-child { margin-bottom: 0; }

/* Hersteller- und Partner-Karten.
   Der Kopf nimmt entweder ein Logo oder – solange keines vorliegt – den Namen
   als Schriftzug auf. Die feste Höhe sorgt dafür, dass die Karten in einer
   Reihe bündig bleiben, egal wie hoch das jeweilige Logo ist. */
/* Logoplatz auf Partner- und Herstellerkarten. Feste Höhe, damit die Karten
   in einer Reihe bündig bleiben – unabhängig davon, wie hoch das Logo ist. */
/* Die iTeam-Kooperation steht über die volle Breite: Logo links, Text rechts.
   Auf schmalen Geräten rutscht das Logo über den Text. */
.partner-kopf {
  display: grid; grid-template-columns: minmax(150px, 210px) 1fr;
  gap: clamp(1.4rem, 4vw, 3rem); align-items: center; margin-bottom: 1.6rem;
}
.partner-kopf__logo { display: flex; align-items: center; }
/* Der erste Satz steht als Überschrift. Etwas kleiner als eine normale
   Abschnittsüberschrift – er ist ein Satz, keine Schlagzeile. */
.partner-kopf__titel {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.35;
  margin-bottom: .8rem;
}
.partner-kopf .brand-logo { max-height: 78px; max-width: 100%; }
.partner-kopf p:last-of-type { margin-bottom: 0; }
@media (max-width: 760px) {
  .partner-kopf { grid-template-columns: 1fr; gap: 1.4rem; }
  .partner-kopf .brand-logo { max-height: 58px; }
}

.brand-card__head {
  min-height: 62px; display: flex; align-items: center;
  margin-bottom: 1rem;
}
.brand-card__head--leer {
  border: 2px dashed #C6D0DC; border-radius: var(--radius-sm);
  background: #FBFCFD; padding: .6rem 1rem; justify-content: center;
}
.brand-card__aktion {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
}
.brand-card__aktion .card__more svg { width: 15px; height: 15px; }
.brand-name {
  font-size: 1.25rem; font-weight: 800; color: var(--blue-800);
  letter-spacing: -.02em;
}
.brand-name--klein { font-size: 1rem; text-align: center; line-height: 1.3; }
.brand-logo { max-height: 42px; width: auto; max-width: 170px; object-fit: contain; }
/* Logos, die es nur in Weiß gibt – etwa 3CX –, bekommen eine dunkle Fläche
   unterlegt. Ohne sie wären sie auf der weißen Karte praktisch unsichtbar. */
.brand-logo--dunkel {
  background: var(--blue-900); border-radius: 8px;
  padding: .4rem .65rem; box-sizing: content-box;
}
/* Zweizeilige Logos – etwa MailStore – dürfen höher stehen, sonst wirken sie
   neben einzeiligen Schriftzügen viel zu klein. */
.brand-logo--hoch { max-height: 56px; }
.marke .brand-logo--hoch { max-height: 46px; }
.marke-kachel__logo .brand-logo--hoch { max-height: 54px; }

/* Nur für Screenreader sichtbar – wenn ein Logo den Namen ersetzt,
   braucht die Karte trotzdem eine lesbare Überschrift. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Anfahrt */
.route {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: var(--shadow-sm);
  max-width: 46rem; margin-inline: auto; text-align: center;
}
.route__adresse {
  display: inline-flex; gap: .9rem; text-align: left;
  align-items: flex-start; margin-bottom: 1.6rem;
}
.route__adresse svg { width: 26px; height: 26px; color: var(--green-500); flex: none; }
.route__adresse strong { display: block; color: var(--ink); font-size: 1.1rem; }
.route .btn-row { justify-content: center; }
.route__hinweis {
  font-size: .88rem; color: var(--muted); margin: 1.4rem 0 0;
}

/* Produktblock: Inhalt eines OnePagers als Seiteninhalt */
.produkt {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.8rem); box-shadow: var(--shadow-sm);
}
.produkt + .produkt { margin-top: 2rem; }
.produkt__kopf {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center;
  padding-bottom: 1.4rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.produkt__kopf h3 { margin: 0; font-size: 1.5rem; }
.produkt__kopf .brand-logo { max-height: 46px; }
.produkt__zeile { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.produkt__name { font-size: 1.2rem; color: var(--ink); }
.produkt__preis {
  background: var(--blue-800); color: #fff; font-weight: 600; font-size: .95rem;
  padding: .35rem 1rem; border-radius: 999px;
}
.produkt h4 { font-size: 1.05rem; margin-bottom: .8rem; }
.produkt__zusatz {
  margin-top: 2rem; padding: 1.6rem 1.8rem;
  background: var(--surface); border-radius: var(--radius);
}
.produkt__zusatz .eyebrow { margin-bottom: .5rem; }

/* Stellenanzeigen */
.job { display: flex; flex-direction: column; }
.job__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
  font-size: .87rem; color: var(--muted); margin-bottom: 1rem;
}
.job__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.job__meta svg { width: 15px; height: 15px; color: var(--green-700); flex: none; }
.job__tag {
  background: var(--green-050); color: var(--green-700);
  font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 999px;
}
.job__sub {
  font-size: .88rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 1.4rem 0 .8rem;
}
.job .btn { margin-top: auto; align-self: flex-start; }

/* Bedeutung der drei Buchstaben */
.namens-karte { position: relative; padding-top: 2.2rem; }
.namens-karte__buchstabe {
  display: block; font-size: 3.4rem; line-height: 1; font-weight: 800;
  color: var(--green-500); letter-spacing: -.04em; margin-bottom: .6rem;
}
.namens-karte h3 { font-size: 1.25rem; }

/* Team */
/* ---------- Fotos ----------
   Breite und Höhe stehen im Quelltext, damit der Browser den Platz schon vor
   dem Laden kennt und der Text beim Nachladen nicht wegspringt. */
.foto {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.bild { margin: 0; }
/* Kleines Bild neben Text: Es soll die Spalte nicht ausfüllen, sondern als
   Detailaufnahme wirken. */
.bild--klein { max-width: 300px; }
@media (max-width: 860px) { .bild--klein { max-width: 62%; } }
.bild figcaption {
  margin-top: .8rem; font-size: .88rem; color: #5A6982; line-height: 1.5;
}

/* Dankeseite: ein großer Haken als Bestätigung */
.danke-zeichen {
  width: 84px; height: 84px; margin: 0 auto 1.6rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-050); color: var(--green-700);
}
.danke-zeichen svg { width: 46px; height: 46px; stroke-width: 1.6; }

/* ---------- Formulare ---------- */
/* Falle für automatische Ausfüller: für Menschen unsichtbar, für Programme
   ein ganz normales Feld. Bewusst nicht display:none – manche Programme
   erkennen das und lassen das Feld dann leer. */
.falle {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
.hinweis-fehler {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem;
  border-left: 5px solid #C2410C; background: #FEF3EC;
  border-radius: var(--radius-sm); color: #7A3A12; font-size: .95rem;
}
.hinweis-fehler strong { color: #7A3A12; }
.hinweis-fehler a { color: #7A3A12; text-decoration: underline; }

/* ---------- Anfahrtsskizze ----------
   Selbst gezeichnet statt eingebundene Karte – lädt nichts von fremden
   Servern nach. Begründung siehe anfahrtsskizze() in build.py. */
.skizze { margin: 0; }
.skizze svg {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.skizze text { font-family: var(--font); font-weight: 700; }
.skizze__ort {
  font-size: 19px; fill: var(--ink); text-anchor: middle;
  letter-spacing: .02em;
}
.skizze__wir {
  font-size: 13px; fill: var(--green-700); text-anchor: middle;
  letter-spacing: .05em; text-transform: uppercase;
}
.skizze__ab { font-size: 14px; fill: #fff; text-anchor: middle; }
.skizze__ziel { font-size: 11px; fill: #5A6982; text-anchor: start;
  font-weight: 600; }
.skizze__nachbar { font-size: 12px; fill: #46586F; font-weight: 600; }
.skizze__nachbar--links { text-anchor: end; }
.skizze figcaption {
  margin-top: .8rem; font-size: .88rem; color: #5A6982; line-height: 1.5;
}

/* ---------- Personenkacheln ----------
   Statt eines Porträts trägt jede Kachel ein farbiges Band mit dem Kürzel der
   Person. Das Kürzel ist zugleich ihre E-Mail-Adresse – der Hinweis dazu steht
   über dem Raster. Gezeichnet wird es nicht als Schrift, sondern als fertige
   Silhouette; die Begründung steht in build.py bei kuerzel_zeichnung(). */
.person {
  padding: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.person__band {
  position: relative; overflow: hidden; height: 92px;
  background: linear-gradient(var(--winkel, 140deg), var(--von, #00764E), var(--bis, #132E59));
  display: flex; align-items: center; padding: 0 1.2rem;
}
/* Das Bildzeichen liegt zart im Hintergrund und wird am rechten Rand
   angeschnitten – wie im Kopfbereich der Seiten. */
.person__band::after {
  content: ""; position: absolute; right: -18%; top: 50%; height: 155%;
  aspect-ratio: 143 / 126; transform: translateY(-50%);
  background: url("motiv.svg?v=87") center / contain no-repeat; opacity: .11;
}
.person__kuerzel {
  position: relative; z-index: 1; display: block;
  height: 2.9rem; width: auto; max-width: 100%;
}
/* Ersatz, falls für ein Kürzel keine Zeichnung hinterlegt ist. */
.person__ersatz {
  position: relative; z-index: 1; color: #fff; font-weight: 800;
  font-size: 1.9rem; letter-spacing: .12em;
}
.person__text {
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; flex: 1;
}
.person h3 { margin-bottom: .15rem; font-size: 1.05rem; }
.person__role {
  color: var(--green-700); font-weight: 600; font-size: .88rem;
  margin-bottom: .6rem;
}
.person p { font-size: .9rem; }
/* Ein Schlagwort je Zeile. Ohne diese Vorgabe rücken zwei kurze Wörter
   nebeneinander; die Kachel braucht dann eine Zeile weniger, und die
   Schlagworte stehen nicht mehr auf einer Höhe mit denen der Nachbarn. */
.person .tags {
  margin-top: auto; padding-top: .5rem;
  flex-direction: column; align-items: flex-start;
}

/* Schlagworte zu den Schwerpunkten */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  background: var(--green-050); color: var(--green-700);
  font-size: .76rem; font-weight: 700; padding: .24rem .7rem;
  border-radius: 999px;
}
/* Noch nicht ausgefüllt – bewusst sichtbar in der Platzhalterfarbe. */
.tag--offen {
  background: #FFF3CD; color: #7A5C00;
  border: 1px dotted #E0A800; font-weight: 600;
}

/* Kontaktdaten-Liste */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.contact-list svg { width: 22px; height: 22px; color: var(--green-700); flex: none; margin-top: .25rem; }
.contact-list strong { display: block; color: var(--ink); font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; }

/* Formular */
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; padding: .8rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-050);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--check { flex-direction: row; align-items: flex-start; gap: .7rem; }
.field--check input { width: auto; margin-top: .3rem; }
.field--check label { font-weight: 400; font-size: .92rem; color: var(--body); }
/* Kleiner Hinweis unter einem Feld, etwa der Verweis aufs Bewerbungsformular. */
.field__hinweis { margin: 0; font-size: .88rem; color: var(--muted); }

/* CTA-Band */
.cta-band {
  background: linear-gradient(120deg, var(--blue-800), var(--blue-700));
  color: #C2CEE1; border-radius: var(--radius); padding: clamp(2.2rem, 5vw, 3.4rem);
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between;
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { margin-bottom: 0; }

/* Zurückhaltender Pflichthinweis am Seitenende. Muss dabeistehen, soll aber
   nicht mit dem eigentlichen Inhalt konkurrieren. */
.hinweis-band { background: var(--surface); border-top: 1px solid var(--line); }
.hinweis {
  max-width: 74ch; margin-inline: auto;
  padding: 2.2rem 0; font-size: .92rem;
  /* etwas dunkler als --muted: zurückhaltend, aber noch gut lesbar
     (5,0 : 1 auf der getönten Fläche; --muted käme nur auf 4,1) */
  color: #5A6982;
}
.hinweis h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .09em;
  color: #5A6982; margin-bottom: .6rem; font-weight: 700;
}
.hinweis p { margin-bottom: 0; }

/* Kleingedrucktes innerhalb einer Karte – etwa der Hinweis auf Nettopreise.
   Gleiche Farbe wie beim Pflichthinweis, damit es sich einheitlich liest. */
.feinheit { font-size: .88rem; color: #5A6982; }

/* Karte mit dem Datenblatt eines Herstellers */
.datenblatt__marke {
  display: flex; align-items: center; min-height: 46px; margin-bottom: 1.2rem;
}
.datenblatt__marke .brand-logo { max-height: 40px; }
.datenblatt__marke .brand-name { font-size: 1.4rem; }
.datenblatt .btn-row { margin-top: 1.4rem; }

/* Themenkachel auf einer Leistungsseite: Thema groß, Hersteller klein darunter,
   darunter die beiden Verweise. Bewusst enger als die übrigen Karten – sie
   trägt nur vier kurze Zeilen, und neun davon stehen untereinander. */
.thema {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem 1.6rem;
}
.thema .card__icon {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: .8rem;
}
.thema .card__icon svg { width: 21px; height: 21px; }
.thema h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.thema p:last-child { margin-bottom: .3rem; }
.thema__marke {
  font-size: .85rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--green-700);
  margin-top: 0; margin-bottom: .5rem;
}
.thema .kachel-aktionen { padding-top: .6rem; }

/* Ein einzelner breiter Kasten – etwa eine Aufzählung ohne Kartenraster. */
.grid--1 { grid-template-columns: minmax(0, 74ch); justify-content: center; }

/* Fließtext-Seiten (Impressum, Datenschutz).
   Der Textblock ist schmaler als der übrige Inhalt, beginnt aber an derselben
   Kante – sonst schwebt er in der Fenstermitte und flüchtet nach rechts weg
   vom Logo und von den Überschriften aller anderen Seiten. */
.prose { max-width: 76ch; }
.wrap.prose {
  margin-inline: max(1.5rem, (100% - var(--wrap)) / 2) auto;
}
.prose h2 { font-size: 1.45rem; margin-top: 2.6rem; }
.prose h3 { font-size: 1.1rem; margin-top: 1.8rem; }
.prose p, .prose li { font-size: 1rem; }

/* ---------- Fußbereich ---------- */
/* Der Fußbereich nimmt dasselbe Blau auf wie der Kopfbereich und wiederholt
   Lichtschein und Bildzeichen – so rahmen beide die Seite gemeinsam ein. */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--blue-850); color: #C2CEE1;
  padding: 4rem 0 0; font-size: .95rem;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 96% 88%, rgba(0,168,112,.20), transparent 52%);
}
/* Das Motiv wird hier an der Breite gemessen. Über die Höhe zu rechnen ginge
   schief: Auf dem Handy stapeln sich die Spalten, der Fußbereich wird über
   1000 Pixel hoch und das Zeichen entsprechend riesig. */
.site-footer::after {
  content: ""; position: absolute; top: 50%; right: 3%;
  width: min(34%, 340px); aspect-ratio: 143 / 126; transform: translateY(-50%);
  background: url("motiv.svg?v=87") right center / contain no-repeat;
  opacity: .07; pointer-events: none;
}
@media (max-width: 760px) {
  .site-footer::after {
    top: auto; bottom: 2%; right: -8%; transform: none;
    width: 54%; opacity: .06;
  }
}
.site-footer .wrap { position: relative; z-index: 2; }
.site-footer a { color: #C2CEE1; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.7fr 1fr 1fr 1.15fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer .logo__name { color: #fff; }
.site-footer .logo__tag { color: #9AA9C0; }
.footer-bottom {
  margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.4rem 0; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .88rem;
}
.social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social a {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.08);
}
.social a:hover { background: var(--green-500); color: var(--blue-900); }
.social svg { width: 18px; height: 18px; }
/* Dieselbe Reihe auf hellem Grund, etwa auf der Karriere-Seite. */
.social--hell a { background: var(--blue-050); color: var(--ink); }
.social--hell a:hover { background: var(--green-500); color: var(--blue-900); }

/* Sprungmarke für Tastaturnutzer */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green-500); color: var(--blue-900); padding: .8rem 1.3rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}