/* ==========================================================================
   corelay - Unterseiten "Ueber uns" und "Kontakt"
   (ueber-uns.html, kontakt.html)
   --------------------------------------------------------------------------
   Diese Datei enthaelt ausschliesslich die Bausteine, die es nur auf diesen
   beiden Seiten gibt: den Story-Block, das Werte-Raster, den Team-Block und
   das Zahlen-Band der Seite "Ueber uns" sowie das Kontakt-Raster aus
   Formularkarte und Info-Karte und den einspaltigen FAQ-Block der Seite
   "Kontakt".

   Flaechen, Sektionsabstaende, Typo-Skala, Karten, Raster, Icon-Kacheln,
   Haekchenliste, Formularbausteine, Sektionskopf und CTA-Band kommen
   unveraendert aus css/tokens.css, css/base.css und css/layout.css. Das
   Akkordeon der Seite "Kontakt" nutzt vollstaendig css/sections/faq.css -
   hier wird nur die Spaltenzahl geaendert.

   Alle Selektoren tragen die Praefixe .ueber- bzw. .kontakt-, damit es keine
   Kollision mit den Sektionsdateien der Startseite gibt.

   Inhalt
     1. Sektionsgeruest und Story-Block (ueber-uns.html)
     2. Werte-Raster (ueber-uns.html)
     3. Team-Raster (ueber-uns.html)
     4. Zahlen-Band (ueber-uns.html)
     5. Kontakt - Raster aus Formular und Info-Karte
     6. Kontakt - Formularkarte
     7. Kontakt - Info-Karte
     8. Kontakt - FAQ einspaltig
     9. Staffelung des Einblendens
    10. Breakpoint 1024px
    11. Breakpoint 900px - einspaltig
    12. Breakpoint 640px
    13. Breakpoint 480px
    14. Breakpoint 380px
    15. Reduzierte Bewegung
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest und Story-Block (ueber-uns.html)
   --------------------------------------------------------------------------
   Flaeche (.bg-paper, .bg-paper-50, .bg-paper-100) und vertikaler Abstand
   (.section) stehen im Markup - die Sektionsklassen setzen nur den eigenen
   Stapelkontext fuer die dekorativen Ebenen darin.

   Story-Block: zwei gleich breite Spalten, vertikal zentriert, links der
   Text, rechts die Illustration img/ill-beratung.svg. minmax(0, 1fr)
   verhindert, dass lange Woerter oder die Grafik die Spalte aufblaehen -
   Grundlage dafuer, dass ab 320px nichts waagerecht scrollt.
   -------------------------------------------------------------------------- */

.ueber-story,
.ueber-werte,
.ueber-team,
.ueber-zahlen,
.kontakt {
  position: relative;
}

.ueber-story-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.ueber-story-text {
  max-width: 560px;
}

.ueber-story-text .eyebrow {
  color: var(--blue-500);
  margin-bottom: var(--sp-3);
}

.ueber-story-text .h2 {
  margin-bottom: var(--sp-5);
}

.ueber-story-text p {
  color: var(--t-on-light-soft);
}

.ueber-story-text p + p {
  margin-top: var(--sp-4);
}

.ueber-story-list {
  margin-top: var(--sp-6);
}

.ueber-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

/* Bildspalte mit weichem Blauschein hinter der Illustration */
.ueber-story-media {
  position: relative;
  isolation: isolate;
}

.ueber-story-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(105%, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(47, 128, 255, .11), rgba(47, 128, 255, 0) 70%);
  pointer-events: none;
}

.ueber-story-img {
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   2. Werte-Raster (ueber-uns.html)
   --------------------------------------------------------------------------
   Sechs Karten im .grid-3 (ab 1024px zwei Spalten, ab 640px eine). Aufbau je
   Karte von oben: Icon-Kachel 46x46, Titel, Text 14px.
   -------------------------------------------------------------------------- */

.ueber-wert-tile {
  margin-bottom: var(--sp-5);
}


/* --------------------------------------------------------------------------
   3. Team-Raster (ueber-uns.html)
   --------------------------------------------------------------------------
   Drei Karten im .grid-3. Der Avatar ist im SVG bereits kreisrund
   beschnitten; border-radius und der feine Rahmen sind nur Absicherung.
   -------------------------------------------------------------------------- */

.ueber-team-avatar {
  width: 72px;
  height: 72px;
  flex: none;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--paper-200);
  background-color: var(--paper-100);
}

.ueber-team-name {
  margin-bottom: 4px;
}

.ueber-team-role {
  color: var(--blue-500);
  margin-bottom: var(--sp-3);
}


/* --------------------------------------------------------------------------
   4. Zahlen-Band (ueber-uns.html)
   --------------------------------------------------------------------------
   Schlankes Band auf --paper-100 mit vier Kennzahlen, getrennt durch feine
   senkrechte Linien. Die Zahl steht in der Display-Schrift und in
   --blue-500, das Label darunter klein in --t-on-light-soft.
   -------------------------------------------------------------------------- */

.ueber-zahlen-eyebrow {
  margin-bottom: var(--sp-8);
  text-align: center;
  color: var(--t-on-light-mute);
}

.ueber-zahlen-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ueber-zahl {
  padding-inline: var(--sp-3);
  border-left: 1px solid var(--paper-200);
  text-align: center;
}

.ueber-zahl:first-child {
  border-left: 0;
}

.ueber-zahl-value {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--blue-500);
}

.ueber-zahl-label {
  margin-top: 8px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--t-on-light-soft);
}

/* Hinweiszeile unter Team- und Zahlen-Raster (Platzhalter- und Beispielwerte) */
.ueber-hinweis {
  margin-top: var(--sp-8);
  text-align: center;
  color: var(--t-on-light-mute);
}


/* --------------------------------------------------------------------------
   5. Kontakt - Raster aus Formular und Info-Karte
   --------------------------------------------------------------------------
   Links die breitere weisse Formularkarte, rechts die dunkle Info-Karte.
   align-items: start haelt die Info-Karte oben, sie waechst nicht auf die
   Hoehe des Formulars mit.
   -------------------------------------------------------------------------- */

.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 22px;
  align-items: start;
}

/* Beide Karten sind Flaechen und keine Schalter - der Hover-Hub der
   Basisklassen .card und .card-dark wird deshalb zurueckgenommen. */
.card.kontakt-card:hover {
  transform: none;
  box-shadow: var(--sh-card);
  border-color: var(--paper-200);
}

.card-dark.kontakt-card:hover {
  background-color: var(--ink-850);
}

.kontakt-card {
  padding: clamp(24px, 3vw, 34px);
}


/* --------------------------------------------------------------------------
   6. Kontakt - Formularkarte
   --------------------------------------------------------------------------
   Feld, Label, Eingabe, Fehlerzeile und Checkbox-Reihe kommen vollstaendig
   aus Abschnitt 18 von css/layout.css. Hier stehen nur der Kopf der Karte,
   die zweispaltige Reihe fuer Telefon und Betreff sowie die
   Einwilligungs-Zeile mit eigener Fehlerausgabe.
   -------------------------------------------------------------------------- */

.kontakt-form-title {
  margin-bottom: var(--sp-2);
}

.kontakt-form-lead {
  margin-bottom: var(--sp-7);
  color: var(--t-on-light-soft);
}

/* Telefon und Betreff stehen nebeneinander */
.kontakt-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.kontakt-row .field + .field {
  margin-top: 0;
}

/* Die Reihe unterbricht die Geschwister-Regel .field + .field aus
   css/layout.css - der Abstand zum folgenden Feld wird deshalb hier gesetzt. */
.kontakt-row + .field {
  margin-top: var(--sp-4);
}

/* Einwilligung: Checkbox-Reihe plus eigene Fehlerzeile darunter */
.kontakt-consent {
  display: grid;
  gap: 8px;
  margin-top: var(--sp-5);
}

.kontakt-submit {
  margin-top: var(--sp-6);
}

/* .card faerbt und verkleinert saemtliche Absaetze der Karte
   (.card p, 14px in --t-on-light-soft). Fehlerzeile und Fusshinweis des
   Formulars muessen sich davon zurueckholen, was ihnen zusteht. */
.kontakt-form-card .field-error {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--danger);
}

.kontakt-form-card .kontakt-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--t-on-light-mute);
}


/* --------------------------------------------------------------------------
   7. Kontakt - Info-Karte
   --------------------------------------------------------------------------
   Dunkle Karte (.card-dark) mit Icon-Kacheln in der dunklen Variante. Die
   Werte sind bewusst heller als der Fliesstext der Karte - sie tragen die
   eigentliche Information.
   -------------------------------------------------------------------------- */

/* .card-dark setzt Kartentitel auf 15px - die Karte traegt hier aber die
   Ueberschrift eines ganzen Blocks und darf etwas groesser stehen. */
.kontakt-info .kontakt-info-title {
  font-size: var(--fs-card-title);
  margin-bottom: var(--sp-2);
}

.kontakt-info-lead {
  margin-bottom: var(--sp-6);
}

.kontakt-list {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kontakt-item-body {
  min-width: 0;
}

.kontakt-item-label {
  display: block;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-on-dark-mute);
  margin-bottom: 5px;
}

.kontakt-info .kontakt-item-value {
  display: block;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--t-on-dark);
  overflow-wrap: anywhere;
}

.kontakt-item-value a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.kontakt-item-value a:hover {
  color: var(--blue-400);
  text-decoration: underline;
}

/* Abschluss der Karte: Trennlinie, Ueberschrift, drei runde Social-Buttons */
.kontakt-social {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--ink-border);
}

.kontakt-social-title {
  margin: 0 0 var(--sp-4);
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--t-on-dark);
}


/* --------------------------------------------------------------------------
   8. Kontakt - FAQ einspaltig
   --------------------------------------------------------------------------
   Das Akkordeon ist markup- und stilgleich zur Startseite (siehe
   css/sections/faq.css). Auf der Kontaktseite stehen alle acht Fragen
   untereinander in einer Spalte, zentriert und auf 860px begrenzt.
   Weil die Zeilen dadurch breiter sind, reicht eine kleinere Aufklapphoehe -
   sie waechst in den Breakpoints unten wieder mit, sobald die Zeile schmaler
   wird und die Antwort mehr Zeilen braucht.
   -------------------------------------------------------------------------- */

.kontakt-faq {
  --faq-open-h: 300px;
}

.kontakt-faq .faq-list {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   9. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible auf jedem .reveal, die Verzoegerung steuert
   --reveal-delay. Die Werte folgen der Lesereihenfolge des jeweiligen
   Rasters.
   -------------------------------------------------------------------------- */

.ueber-wert-card:nth-child(3n+1) { --reveal-delay: 60ms; }
.ueber-wert-card:nth-child(3n+2) { --reveal-delay: 140ms; }
.ueber-wert-card:nth-child(3n+3) { --reveal-delay: 220ms; }

.ueber-team-card:nth-child(1) { --reveal-delay: 60ms; }
.ueber-team-card:nth-child(2) { --reveal-delay: 140ms; }
.ueber-team-card:nth-child(3) { --reveal-delay: 220ms; }

.ueber-zahl:nth-child(1) { --reveal-delay: 0ms; }
.ueber-zahl:nth-child(2) { --reveal-delay: 80ms; }
.ueber-zahl:nth-child(3) { --reveal-delay: 160ms; }
.ueber-zahl:nth-child(4) { --reveal-delay: 240ms; }

.kontakt-form-card { --reveal-delay: 0ms; }
.kontakt-info { --reveal-delay: 120ms; }

/* Einspaltig aufgeklappt braucht das Akkordeon keine Staffelung mehr */
.kontakt-faq .faq-item { --reveal-delay: 0ms; }


/* --------------------------------------------------------------------------
   10. Breakpoint 1024px
   --------------------------------------------------------------------------
   Das Werte-Raster faellt ueber .grid-3 auf zwei Spalten - die Staffelung
   wird entsprechend paarweise gesetzt.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .kontakt-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ueber-wert-card:nth-child(2n+1) { --reveal-delay: 60ms; }
  .ueber-wert-card:nth-child(2n+2) { --reveal-delay: 140ms; }

  .kontakt-info { --reveal-delay: 0ms; }
}


/* --------------------------------------------------------------------------
   11. Breakpoint 900px - einspaltig
   --------------------------------------------------------------------------
   Story-Block untereinander: zuerst der Text, darunter die Illustration in
   begrenzter Breite und zentriert.
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .ueber-story-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  .ueber-story-text {
    max-width: none;
  }

  .ueber-story-media {
    max-width: 520px;
    margin-inline: auto;
  }

  .ueber-zahlen-list {
    gap: var(--sp-5);
  }

  .kontakt-faq {
    --faq-open-h: 380px;
  }
}


/* --------------------------------------------------------------------------
   12. Breakpoint 640px
   --------------------------------------------------------------------------
   Zahlen-Band auf zwei Spalten: die Trennlinie links faellt in der ersten
   Spalte weg, dafuer bekommt die zweite Zeile einen Abstand nach oben.
   Team- und Werte-Raster stehen ueber .grid-3 bereits einspaltig.
   -------------------------------------------------------------------------- */

@media (max-width: 639.98px) {

  .ueber-zahlen-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-4);
  }

  .ueber-zahl {
    padding-inline: var(--sp-2);
  }

  .ueber-zahl:nth-child(odd) {
    border-left: 0;
  }

  .kontakt-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-faq {
    --faq-open-h: 480px;
  }

  .ueber-wert-card:nth-child(n),
  .ueber-team-card:nth-child(n),
  .ueber-zahl:nth-child(n) {
    --reveal-delay: 0ms;
  }
}


/* --------------------------------------------------------------------------
   13. Breakpoint 480px
   --------------------------------------------------------------------------
   Wie im CTA-Band stehen die Buttons hier ueber die volle Breite.
   -------------------------------------------------------------------------- */

@media (max-width: 479.98px) {

  .ueber-story-actions .btn {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   14. Breakpoint 380px
   --------------------------------------------------------------------------
   Ab hier zaehlt jeder Pixel Breite - kein waagerechtes Scrollen ab 320px.
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .kontakt-card {
    padding: 20px;
  }

  .kontakt-item {
    gap: 12px;
  }

  .ueber-team-avatar {
    width: 64px;
    height: 64px;
  }

  /* Zweispaltig bleiben knapp 130px je Kennzahl - „4 Wochen“ passt nur in
     einer Stufe kleiner sicher in die Spalte. */
  .ueber-zahl-value {
    font-size: 1.75rem;
  }

  .kontakt-faq {
    --faq-open-h: 640px;
  }
}


/* --------------------------------------------------------------------------
   15. Reduzierte Bewegung
   --------------------------------------------------------------------------
   base.css schaltet bereits alle Uebergaenge ab. Hier faellt zusaetzlich der
   dekorative Schein hinter der Illustration weg, damit beim Scrollen nichts
   mehr flimmert.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .ueber-story-media::before {
    display: none;
  }
}