/* ==========================================================================
   Baustein: Zwei Wege
   Datei: css/bausteine/kontakt-wege.css (kein Skript)
   Gebraucht auf: kontakt.html (#termin und #formular), karriere.html (Bewerben oder
   Kennenlernen)
   Bauvorschrift: DESIGN.md, Baustein "Zwei Wege"; docs/site-architecture.md, kontakt.html
   Punkt 1 und karriere.html Punkt 5 (zwei gleichwertige Wege nebeneinander).
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .routes-* */

/* Zwei Karten nebeneinander. Auf kontakt.html ist die rechte breiter, weil sie das Formular
   trägt (5 : 7), auf karriere.html sind beide gleich (.routes--even). Die schmale Karte
   bleibt oben stehen, statt sich auf die Höhe des Formulars zu strecken. */
.routes { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: start; }
.routes--even { grid-template-columns: 1fr 1fr; align-items: stretch; }
/* Unter einem Sektionskopf 72 px Abstand wie jeder Inhalt (DESIGN.md, Regel 5), unter 640 px 48 */
.routes--after-head { margin-top: 72px; }

/* Karte: Hell auf Weiß, auf Hell Weiß (.routes--on-paper), Regel 4. Kein Rahmen, kein Schatten. */
.routes-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--paper); border-radius: var(--r-xl);
  padding: 40px 40px 44px;
  min-width: 0;
}
/* Ausgeblendete Karte (seit 2026-11-10 das Anfrageformular auf kontakt.html): display: flex
   oben würde das Attribut hidden sonst überstimmen. */
.routes-card[hidden] { display: none; }
.routes--on-paper .routes-card { background: var(--white); }

.routes-title { color: var(--ink); max-width: 22em; text-wrap: balance; }
.routes-text { margin-top: 16px; max-width: 520px; }

/* Fakten der Karte als Zeilen mit Haarlinie, Bezeichnung links in .label, Wert rechts */
.routes-facts { width: 100%; margin: 28px 0 0; }
.routes-fact {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.routes-fact:last-child { border-bottom: 1px solid var(--line); }
.routes-fact dt { color: var(--muted); }
.routes-fact dd { margin: 0; color: var(--ink); }

/* Aktion unten in der Karte. In gleich hohen Karten rutscht sie an den unteren Rand. */
.routes-action { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.routes--even .routes-action { margin-top: auto; padding-top: 32px; }
.routes-note { color: var(--muted); }

/* Das Formular in der breiten Karte nutzt die volle Breite */
.routes-card > .form { width: 100%; margin-top: 28px; }

@media (max-width: 980px) {
  .routes, .routes--even { grid-template-columns: 1fr; }
  .routes-card { padding: 32px 28px 36px; }
}

@media (max-width: 640px) {
  .routes--after-head { margin-top: 48px; }
  .routes-card { padding: 28px 20px 32px; }
  .routes-fact { grid-template-columns: 1fr; gap: 4px; }
  .routes-action { width: 100%; }
  .routes-action .button { width: 100%; justify-content: space-between; }
}

/* Schalter "Arbeitsweise aus" (Klasse ff-arbeitsweise-aus am <html>): Die Regel steht in
   css/bausteine/prozess-raster.css, das kontakt.html und karriere.html nicht laden. Sie ist
   hier wiederholt, damit Kopfzeile, Mobil-Menü und Footer auch hier ohne den Link auf
   index.html#arbeitsweise stehen (gleiches Vorgehen wie der Baustein der Rechtsseiten). */
.ff-arbeitsweise-aus a[href$="#arbeitsweise"] { display: none; }