/* Weisse Bahn. Beim Aufbau von /kontakt/ neu einsortieren: dort folgt die
   Sektion nicht mehr auf Karriere. Die weissen Karten stehen dann ohne
   Flaechenunterschied auf dem Grund; sie tragen ein 3px breites Goldband
   links, das sie unabhaengig von der Bahn markiert. */
.kontakt {
  background: var(--bg-page);
  padding-block: var(--sp-sektion);
}

.kontakt__head {
  max-width: 42rem;
  margin: 0 0 clamp(var(--sp-6), 4vw, var(--sp-7));
}
.kontakt__label {
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  margin: 0 0 var(--sp-4);
}

/* Zwei direkte Wege gross, darunter die drei Zielgruppen als Zeilen. */
.kontakt__direct {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-5));
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
}
@media (max-width: 46rem) {
  .kontakt__direct { grid-template-columns: 1fr; }
}

.kontakt__way {
  position: relative;
  display: flex;
  /* Icons oben buendig mit der Label-Zeile, nicht vertikal zentriert. */
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  /* Hellgrau, nicht weiss. Die Sektion steht auf weisser Bahn - eine weisse
     Karte hatte dort keine Flaeche und ging unter, gemeldet am 28.08.2026.
     Damit dreht sich das ueblich Muster um: sonst stehen weisse Karten auf
     grauer Bahn, hier graue auf weisser. */
  background: var(--bg-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-karte);
  transition: transform var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
/* Kein Goldband an der linken Kante. Entscheidung vom 28.08.2026: generell
   keine linksseitige Outline. Die Karte grenzt sich ueber ihre weisse
   Flaeche und den Schatten ab, das reicht auf der grauen Bahn.
   overflow: hidden bleibt stehen - es haelt die Rundung fuer Kindelemente. */
.kontakt__way:hover,
.kontakt__way:focus-visible {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-2);
}
.kontakt__way__icon {
  width: var(--zeichen-xl); height: var(--zeichen-xl);
  flex: 0 0 auto;
  /* Gemessen: ohne Korrektur sitzt die Icon-Oberkante 4px ueber der
     Textoberkante der Label-Zeile. */
  margin-top: 0.125rem;
  color: var(--toem-blau);
}
.kontakt__way__icon svg { width: 100%; height: 100%; }
.kontakt__way__text { min-width: 0; }
.kontakt__way__label {
  display: block;
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  margin-bottom: 0.15rem;
}
.kontakt__way__value {
  display: block;
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--toem-blau);
  overflow-wrap: break-word;
}

/* Zielgruppen: wer wohin. Verhindert, dass alle im gleichen Postfach landen. */
.kontakt__who {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-5));
}
@media (max-width: 56rem) {
  .kontakt__who { grid-template-columns: 1fr; }
}
.kontakt__target {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.kontakt__target h3 {
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--toem-blau);
  margin: 0 0 var(--sp-2);
}
.kontakt__target p {
  font-size: var(--fs-200);
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}
.kontakt__target a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.5rem;
  margin-top: auto;
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.kontakt__target a:hover,
.kontakt__target a:focus-visible { color: var(--toem-gold); }
.kontakt__target a svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.kontakt__target a:hover svg,
.kontakt__target a:focus-visible svg { transform: translateX(3px); }

/* Die Schreibschriftzeilen sind unterschiedlich lang - "Sprechen wir
   darueber" und "alles in eigener Hand" sind die laengsten. Damit keine
   davon umbricht, sinkt die Groesse ab 30rem fuer alle gemeinsam. Getrennte
   Werte pro Sektion hatten hier zuvor dafuer gesorgt, dass die Zeilen auf
   schmalen Schirmen unterschiedlich gross waren. */