/* Team- und Kontaktseite. Kopf, Fusszeile und Grundtypografie kommen aus
   home.css; hier steht nur, was es dort nicht schon gibt. */

.team-main {
  padding: clamp(60px, 11vh, 120px) 0 clamp(70px, 13vh, 140px);
}

.team-intro {
  max-width: 620px;
  margin: 0 0 clamp(40px, 6vh, 64px);
}
.team-intro h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.team-intro p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  margin: 0;
}

/* Beide Mitglieder bekommen bewusst dieselbe Karte, dieselbe Groesse und
   dieselbe Schrift. Sobald eines der beiden eine Sonderbehandlung bekaeme,
   waere es ein Gag statt einer Aussage. */
.team-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.member {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 28px 26px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.member-role {
  font: 500 8px/1.5 var(--mono);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: #a9a4ce;
  margin: 0 0 18px;
}
.member h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.member p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin: 14px 0 0;
}
/* Die zweite Karte traegt nur den Namen. "von Anthropic" belegt dieselbe
   Zeile wie drueben die Rolle - sonst saesse der Name 41px hoeher als
   nebenan und das sieht nach Fehler aus statt nach Absicht. Es steht da,
   damit niemand Claude fuer eine erfundene Figur dieser Marke haelt. */
.member-origin {
  font: 500 8px/1.5 var(--mono);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: #959db0;
  margin: 0 0 18px;
}

/* Folgt jetzt direkt auf das Kartenraster, deshalb mehr Abstand als zuvor. */
.team-fineprint {
  margin: clamp(34px, 5vh, 52px) 0 0;
  font: 9px/1.7 var(--mono);
  letter-spacing: 0.6px;
  color: #959db0;
  max-width: 640px;
}


/* Kontaktbereich. Steht bewusst nach den Karten: erst wer dahintersteckt,
   dann wie man denjenigen erreicht. */
.kontakt {
  margin: clamp(48px, 7vh, 80px) 0 0;
  padding: clamp(28px, 4vh, 40px) clamp(24px, 4vw, 36px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  max-width: 640px;
}
.kontakt h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.kontakt > p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 24px;
}
/* min-height 44px: Mindestgroesse, damit der Knopf auf dem Handy sicher
   zu treffen ist. */
.kontakt-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.kontakt-hinweis {
  margin: 26px 0 0;
  font: 9px/1.7 var(--mono);
  letter-spacing: 0.6px;
  color: #959db0;
}


/* Kontaktseite: dieselbe Kachelform wie die Mitglieder, damit beide Seiten
   zusammengehoeren. */
.wege {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.weg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.weg-art {
  font: 500 8px/1.5 var(--mono);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: #a9a4ce;
  margin: 0 0 18px;
}
.weg h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.weg p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin: 14px 0 24px;
}
/* Haelt beide Knoepfe unten buendig, auch wenn ein Text laenger ist.
   Der Abstand darueber kommt aus dem margin des Absatzes - paddingvergroessert
   sonst den Knopf selbst, statt Luft davor zu schaffen. */
.weg .button {
  margin-top: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.button-ruhig {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  word-break: break-all;
}