/* ==========================================================================
   components.css — Wiederverwendbare Komponenten
   Skibi IT GmbH — www.skibi-it.com

   Inhalt:
   1.  Skip-Link
   2.  Header und Logo
   3.  Hauptnavigation (Desktop, Dropdown, Mobil)
   4.  Buttons
   5.  Eyebrow und Section-Header
   6.  Hero
   7.  Breadcrumbs
   8.  Karten (Leistungen, Probleme, Modelle)
   9.  Leistungszeilen (Startseite)
   10. Listen (Quadrat-Bullets, Situationen)
   11. Technik- und Metazeilen
   12. Kontaktformular
   13. Hinweis-Boxen / Platzhalter
   14. Footer
   ========================================================================== */

/* ---- 1. Skip-Link ------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--color-ink);
  color: var(--color-inverse-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-s);
}

.skip-link:focus {
  top: 1rem;
}

/* ---- 2. Header und Logo ------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  width: auto;
  height: 2.375rem;
}

/* ---- 3. Hauptnavigation ------------------------------------------------ */

.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--color-ink);
  transition: background var(--transition-fast);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--transition-base), top var(--transition-base);
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__link {
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.5rem 0;
}

.site-nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

.site-nav__link[aria-current="page"],
.site-nav__link[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 2px;
}

.site-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Dropdown-Umschalter neben dem Link „Leistungen" */
.site-nav__subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.125rem;
  border-radius: var(--radius-s);
  color: var(--color-ink);
}

.site-nav__subtoggle:hover {
  background: var(--color-surface);
}

.site-nav__subtoggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.site-nav__subtoggle svg {
  transition: transform var(--transition-fast);
}

.site-nav__subtoggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.site-nav__sub {
  display: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 22rem;
  padding: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.site-nav__sub.is-open {
  display: block;
}

.site-nav__sub a {
  display: block;
  padding: 0.625rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-s);
}

.site-nav__sub a:hover {
  background: var(--color-surface);
}

.site-nav__sub a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.site-nav__sub a[aria-current="page"] {
  background: var(--color-surface);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-nav__sub-label {
  display: block;
  padding: 0.625rem 0.875rem 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Mobile Navigation */
@media (max-width: 56.25em) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Logo bleibt bei geöffnetem Menü über dem Overlay sichtbar */
  .brand {
    position: relative;
    z-index: 115;
  }

  .site-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--color-bg);
    padding: calc(var(--header-height) + 1rem) var(--container-pad) 2.5rem;
    overflow-y: auto;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__item {
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-line);
  }

  .site-nav__link {
    flex: 1;
    padding: 1.125rem 0;
    font-size: 1.25rem;
  }

  .site-nav__subtoggle {
    width: 3rem;
    height: 3rem;
    align-self: center;
  }

  .site-nav__sub {
    display: none;
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 0 0 1rem;
  }

  .site-nav__sub.is-open {
    display: block;
  }

  .site-nav__sub a {
    padding: 0.625rem 0;
    font-size: var(--text-base);
  }

  .site-nav__sub-label {
    padding-left: 0;
  }

  /* Hintergrundscrollen bei geöffnetem Menü verhindern */
  body.nav-open {
    overflow: hidden;
  }
}

/* ---- 4. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.8125rem 1.625rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-ink);
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}

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

.btn__arrow {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* Primär: schwarz gefüllt */
.btn--primary {
  background: var(--color-ink);
  color: var(--color-inverse-ink);
}

.btn--primary:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}

/* Sekundär: Outline */
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
}

.btn--ghost:hover {
  background: var(--color-surface);
}

/* Button-Gruppe */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

/* ---- 5. Eyebrow und Section-Header -------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-m);
}

.section-head {
  max-width: var(--content-narrow);
  margin-bottom: var(--space-xl);
}

/* Verdichteter Kopf für Abschluss-Sektionen („Weitere Leistungen", „Direkt
   weiter"). Bewusst ein Modifier und keine Kontextregel über `.section--tight`:
   Der Zusammenarbeit-Abschnitt auf /leistungen/ liegt ebenfalls in einer
   `.section--tight-bottom`, soll aber den vollen Abstand behalten. */
.section-head--tight {
  margin-bottom: var(--space-m);
}

/* Zweispaltiger Kopf: Akzent links, Text rechts (wie „Gründer" auf /unternehmen/) */
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-l) var(--space-xl);
  align-items: start;
  max-width: none;
}

@media (max-width: 56.25em) {
  .section-head--split {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

.section-head h2 {
  margin-bottom: var(--space-m);
}

.section-head p {
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
}

.section-head p + p {
  margin-top: var(--space-s);
}

/* Fließtext im geteilten Kopf beginnt bündig unter der Überschrift
   (Positionierung auf /unternehmen/) mit etwas Abstand zur Headline. */
.section-head--split h2 + .prose {
  margin-top: var(--space-m);
}

/* Schwarzes Quadrat als Marken-Akzent (dekorativ) */
.mark-square {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-ink);
  margin-bottom: var(--space-l);
}

/* Blinkender Cursor als Marken-Motiv (dekorativ) */
.cursor {
  display: inline-block;
  width: 0.045em;
  min-width: 3px;
  height: 0.9em;
  margin-left: 0.08em;
  background: var(--color-ink);
  vertical-align: baseline;
  transform: translateY(0.08em);
  animation: cursor-blink 1.2s steps(2, start) infinite;
}

@keyframes cursor-blink {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}

/* ---- 6. Hero ------------------------------------------------------------- */

/* Einheitlicher Abstand vom Header zum ersten Text auf ALLEN Seiten. Vorher gab
   es dafür drei verschiedene Werte (Basis 112 px, Startseite 61 px, Kontakt
   58 px), was den Seitenkopf je nach Seite unterschiedlich tief beginnen ließ.
   Seiten mit Brotkrume tragen ihre H1 weiterhin tiefer, das ist Inhalt und kein
   Abstandsunterschied. */
.hero {
  padding-top: clamp(3rem, 2rem + 2vw, 4rem);
  padding-bottom: var(--space-section);
}

.hero h1 {
  max-width: 18em;
  margin-bottom: var(--space-l);
}

.hero__lead {
  max-width: var(--content-narrow);
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-l);
}

.hero__lead + .hero__lead {
  margin-top: calc(-1 * var(--space-s));
}

.hero__meta {
  margin-top: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

/* Kompetenzen als nummerierte Spalten (01–05) über die volle Inhaltsbreite
   (Startseite). Randbündig wie der schwarze Block, luftig und editorial.
   Bricht auf schmaleren Screens von 5 auf weniger Spalten um. */
.hero__meta--cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-m) var(--space-l);
  align-items: start;
  counter-reset: cap;
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
}

.hero__meta--cols li {
  counter-increment: cap;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-ink);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Ab Desktop sind die Spalten breit genug: lange Begriffe werden dort nicht
   getrennt, sondern rutschen als ganzes Wort in die nächste Zeile.
   Auf schmalen Screens bleibt die Silbentrennung aktiv, sonst laufen sie über. */
@media (min-width: 64em) {
  .hero__meta--cols li {
    hyphens: none;
  }
}

.hero__meta--cols li::before {
  content: counter(cap, decimal-leading-zero);
  display: block;
  margin-bottom: 0.625rem;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ---- 7. Breadcrumbs -------------------------------------------------------- */

.breadcrumbs {
  margin-bottom: var(--space-m);
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.breadcrumbs a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--color-line-strong);
  opacity: 0.35;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-ink);
}

/* Auf Smartphones etwas kleiner und enger gesetzt. Grund: Die längsten Pfade
   („Startseite / Leistungen / Business Analyse" und „… / Projektsteuerung")
   brauchten 328 px, verfügbar sind bei 375 px Fensterbreite aber nur 320 px.
   Sie brachen deshalb zweizeilig um und schoben Eyebrow und H1 um 30 px nach
   unten, während die Schwesterseiten einzeilig blieben. Gemessener Spielraum
   danach: 15 px bei 360 px, 30 px bei 375 px, 45 px bei 390 px Fensterbreite. */
@media (max-width: 30em) {
  .breadcrumbs ol {
    font-size: 0.75rem;
    gap: 0.25rem;
  }

  .breadcrumbs li:not(:last-child)::after {
    margin-left: 0.25rem;
  }
}

/* ---- 8. Karten -------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.card-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

/* Symmetrisches 2x2-Raster („Projektsituationen" auf der Startseite).
   Zwei Spalten erst ab 64em, damit Tablets im Hochformat einspaltig bleiben. */
.card-grid--2x2 {
  grid-template-columns: 1fr;
}

@media (min-width: 64em) {
  .card-grid--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Drei gleichwertige Karten (z. B. Rollen auf der Projektsteuerungs-Seite):
   auf Desktop nebeneinander, auf Tablet und Smartphone untereinander. */
.card-grid--3 {
  grid-template-columns: 1fr;
}

/* Gruppe im Raster ohne Kartenrahmen: Überschrift plus eigene Liste, genutzt
   für die gruppierten Leistungslisten auf erp-beratung und business-analyse.
   H3 trägt projektweit keinen Standardabstand, nur `.card h3` setzt einen. */
.card-grid__group h3 {
  margin-bottom: var(--space-s);
}

@media (min-width: 64em) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background: var(--color-bg);
}

.card--surface {
  background: var(--color-surface);
  border-color: transparent;
}

.card__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-s);
}

.card h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-xs);
}

.card p {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.card .square-list {
  margin-top: var(--space-s);
}

.card__link {
  margin-top: auto;
  padding-top: var(--space-m);
}

/* ---- 9. Leistungszeilen (editoriale Liste, z. B. Startseite) ---------------- */

.service-rows {
  border-top: 1px solid var(--color-line);
}

.service-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: var(--space-m) var(--space-l);
  padding: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--color-line);
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  padding-top: 0.4em;
}

.service-row h3 {
  font-size: var(--text-h3);
  max-width: 16em;
}

.service-row__body p {
  color: var(--color-ink-soft);
}

.service-row__body .square-list {
  margin-top: var(--space-s);
}

.service-row__link {
  margin-top: var(--space-m);
}

@media (max-width: 47.9em) {
  .service-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .service-row__num {
    padding-top: 0;
  }
}

/* Pfeil-Textlink */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.arrow-link svg {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.arrow-link:hover svg {
  transform: translateX(4px);
}

.arrow-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hell abgesetzte Fläche für kompakte Inhalte (z. B. Ergebnislisten der
   Leistungs-Unterseiten). Bewusst schmal gehalten, damit sie nicht wie eine
   zweite Leistungsübersicht wirkt. */
.panel {
  max-width: var(--content-narrow);
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
}

.panel > :first-child {
  margin-top: 0;
}

.panel .square-list li:last-child {
  margin-bottom: 0;
}

/* ---- 10. Listen -------------------------------------------------------------------- */

/* Liste mit schwarzen Quadrat-Bullets */
.square-list li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.625rem;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.square-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-ink);
}

.square-list--cols {
  display: grid;
  gap: 0 var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.square-list--base li {
  font-size: var(--text-base);
}

/* ---- 11. Technik- und Metazeilen ------------------------------------------------------ */

.tech-line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
}

/* ---- 12. Kontaktformular ------------------------------------------------------------------ */

.form {
  display: grid;
  gap: var(--space-m);
}

/* Spamfalle (netlify-honeypot). Muss vollständig aus Darstellung UND
   Zugänglichkeitsbaum verschwinden, deshalb `display: none` und NICHT
   `.visually-hidden`: die bliebe für Screenreader lesbar und fokussierbar.
   Wird diese Regel entfernt, ist das Feld für echte Besucher sichtbar. */
.form__trap {
  display: none;
}

/* Minimum bewusst bei 13rem: Bei 16rem brachen die zweispaltigen Zeilen im
   Bereich von rund 900 bis 1150 px Fensterbreite auf eine Spalte um, weil die
   Formularspalte dort nur etwa 460 bis 515 px breit ist. Das Formular wurde
   dadurch 174 px höher und der Absende-Button rutschte unter den Falz. */
.form__row {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

/* Dreispaltige Zeile (z. B. Anrede | Vorname | Nachname) mit schmalerem Minimum,
   damit drei Felder auch in der schmaleren Formularspalte nebeneinander passen. */
.form__row--triple {
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.field label {
  font-weight: 500;
  font-size: var(--text-sm);
}

.field__optional {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  font-size: var(--text-base);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  color: var(--color-ink);
}

.field textarea {
  resize: vertical;
  min-height: 9rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-ink);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field__error {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-error);
}

.field__error.is-visible {
  display: block;
}

.form__hint {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Statusmeldung des Formulars */
.form__status {
  display: none;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-s);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.form__status.is-visible {
  display: block;
}

.form__status--info {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}

.form__status--error {
  background: #fdf3f2;
  border: 1px solid #e8c5c2;
  color: var(--color-error);
}

.form__status--success {
  background: #f1f7f1;
  border: 1px solid #c9dfc9;
  color: #1e5c2e;
}

/* ---- 13. Hinweis-Boxen / Platzhalter -------------------------------------------------------- */

.notice {
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border-left: 3px solid var(--color-ink);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.notice strong {
  color: var(--color-ink);
}

/* ---- 14. Footer (schwarze, abgerundete Karte) ------------------------------------------------ */

.site-footer {
  /* v1.3: Oberkante von --space-section auf --space-xl reduziert, damit der
     Abstand zum schwarzen Footer-Block auf allen Seiten einheitlich wirkt. */
  padding: var(--space-xl) 0 var(--space-m);
}

.site-footer__card {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-ink);
  border-radius: var(--radius-l);
  padding: clamp(2.25rem, 2rem + 3vw, 4rem);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl) var(--space-l);
}

@media (max-width: 47.9em) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

.site-footer__brand img {
  height: 2rem;
  width: auto;
  margin-bottom: var(--space-m);
}

.site-footer__brand p {
  max-width: 24rem;
  color: var(--color-inverse-muted);
  line-height: 1.7;
}

.site-footer__heading {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-inverse-muted);
  margin-bottom: var(--space-s);
}

.site-footer__list li {
  margin-bottom: 0.5rem;
}

.site-footer__list a {
  color: var(--color-inverse-ink);
  text-decoration: none;
}

.site-footer__list a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer__list a:focus-visible {
  outline: 2px solid var(--color-inverse-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer address {
  font-style: normal;
  line-height: 1.9;
  color: var(--color-inverse-muted);
}

.site-footer address a {
  color: var(--color-inverse-ink);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer address a:focus-visible {
  outline: 2px solid var(--color-inverse-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-inverse-line);
  font-size: var(--text-xs);
  color: var(--color-inverse-muted);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-m);
}

.site-footer__legal a {
  color: var(--color-inverse-ink);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer__legal a:focus-visible {
  outline: 2px solid var(--color-inverse-ink);
  outline-offset: 3px;
  border-radius: 2px;
}