/* Seitenspezifische Regeln fuer Ueber uns.
   Gemeinsame Muster stehen in bausteine.css. */

/* 1. Fliesstext-Block ----------------------------------------------------- */

/* Die Vorlage laesst den Text ueber die volle Innenbreite von 1170px laufen; auf
   grossen Schirmen sind das ueber 130 Zeichen pro Zeile. Begrenzt auf 70ch bleibt
   der Text lesbar, ohne die linksbuendige Ausrichtung des Originals aufzugeben.
   Zentriert steht der Block seit Ticket 5aebfed7: Ueber ihm sitzt jetzt ein
   zentrierter .sektion__kopf, ein linksbuendig angeschlagener 70ch-Block darunter
   saehe daneben verrutscht aus. */
.text-block {
  max-width: 70ch;
  margin-inline: auto;
}

/* Die frueheren Regeln .text-block h2 und .text-block h2:first-child sind mit dem
   Umbau entfallen: Seither steht keine h2 mehr in einem Textblock, die
   Abschnittstitel sitzen alle im .sektion__kopf ihrer Sektion. Aus demselben Grund
   sind die Regeln fuer .liste-haken gegangen — die Hakenliste dieser Seite ist zu
   fuenf Kacheln geworden. .text-block gibt es nur hier (kein weiterer Fundort in
   src/), das Loeschen bleibt also lokal. */

/* Der Abschnitt „Wie wir arbeiten" gliedert sich eine Ebene tiefer: Seine
   Ueberschrift steht im .sektion__kopf, die Zwischentitel darunter sind h3. Sie
   brauchen denselben Luftraum wie die h2 der Textbloecke darueber — nur die erste
   nicht, sie steht schon unter der Sektionsueberschrift. */
.text-block h3 {
  margin-top: 2rem;
}

.text-block h3:first-child {
  margin-top: 0;
}

.text-block p {
  margin-top: 0.75rem;
}

/* 2. Motivation mit Bild -------------------------------------------------- */

/* Dasselbe Muster wie .vorstellung in seite-startseite.css: mobil untereinander,
   ab Tablet zwei gleich breite Spalten. */
.motivation {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.motivation__text > * + * {
  margin-top: 1rem;
}

/* Auf schmalen Geraeten zentriert (Ticket d14bd1fa, ab Tablet unten
   zurueckgenommen). Der Zwilling dieses Blocks ist .vorstellung__text auf der
   Startseite: dieselbe Bauform (Text neben Bild, mobil untereinander), dort seit
   Ticket 197dea4c zentriert und abgenommen. Dass ausgerechnet die Motivation
   linksbuendig anschlug, war der auffaelligste Bruch der beiden Seiten
   gegeneinander. */
.motivation__text {
  text-align: center;
}

/* Ohne border-radius: Das Motiv ist freigestellt (die WebP-Datei traegt einen
   Alphakanal), der Seitengrund scheint rings um Welpe und Kaetzchen durch. Eine
   Rundung an einer Kante, an der ohnehin nichts steht, waere eine tote Angabe. */
.motivation__bild {
  width: 100%;
  height: auto;
}

/* 3. Vorteilskacheln ------------------------------------------------------ */

/* „Warum check4vet?" traegt als einzige Sektion zwei Unterzeilen. p{margin:0} aus
   basis.css laesst sie sonst mit 0px aneinanderkleben und als ein Fliessblock
   lesen. Bewusst hier und NICHT in bausteine.css: Dort veraenderte die Regel auch
   die bereits abgenommene und deployte Startseite, die dasselbe Doppelmuster
   benutzt. */
.sektion__kopf .sektion__unterzeile + .sektion__unterzeile {
  margin-top: 0.5rem;
}

/* Dasselbe zentrierte Muster wie .trust__eintrag, .produkt, .schritt und .stimme
   auf der Startseite: Symbol ueber der Mitte, Text darunter zentriert. align-items
   braucht es zusaetzlich zu text-align, weil das Symbol als Flex-Kind von .karte
   sonst links am Kartenrand klebt. */
.vorteil {
  align-items: center;
  text-align: center;
}

/* Bewusst eine eigene Klasse in dieser Datei und keine Umbenennung von
   .trust__symbol nach bausteine.css: Drei gedoppelte Zeilen sind billiger als ein
   Eingriff in Startseite und Bausteine, den sonst niemand braucht. */
.vorteil__symbol {
  width: 40px;
  height: 40px;
  color: var(--primaer);
}

/* 4. Abschluss-CTA -------------------------------------------------------- */

/* Kein margin-top: Die Knopfreihe steht direkt hinter dem .sektion__kopf, dessen
   margin-bottom von 2rem den kleineren Rand ohnehin verschluckt (Randkollaps).
   Gemessen sind es auf jeder Breite genau diese 2rem. */
.abschluss__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* 5. Team ----------------------------------------------------------------- */

/* Die vier Portraets kommen mit unterschiedlichen Seitenverhaeltnissen aus der
   Vorlage; live stehen die Namen deshalb auf verschiedenen Hoehen. Ein festes
   Format plus Beschnitt bringt sie auf eine Linie. */
.team__person img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Auf schmalen Geraeten zentriert (Ticket d14bd1fa, ab Tablet unten
   zurueckgenommen). Die Team-Eintraege sehen aus wie Kacheln, tragen aber bewusst
   keine .karte — sie haben weder Flaeche noch Schatten. Die Zentrierung aus
   bausteine.css erreicht sie deshalb nicht, und genau daran standen sie
   linksbuendig neben den zentrierten Vorteilskacheln derselben Seite. Gemeint
   sind Portraet, Name und Rollenzeile; die mehrzeilige Kurzbeschreibung bleibt
   linksbuendig (siehe .team__text weiter unten). */
.team__person {
  text-align: center;
}

.team__person h3 {
  margin-top: 1rem;
}

.team__person p {
  color: var(--text-gedaempft);
}

/* Die Kurzbeschreibung ist Fliesstext und keine Bildunterschrift: Sie bleibt in
   der normalen Textfarbe. Der gedaempfte Grauton der Rollenzeile darueber haelt
   auf der grauen Sektionsflaeche (--flaeche-grau, dort steht das Team seit
   Ticket 5aebfed7) 5,45:1 — fuer eine Zeile Beiwerk genug, fuer drei Zeilen Text
   bleibt es beim vollen Ton.
   Die Anker stehen unter dem klebenden Kopf: Ohne diesen Abstand landet der Sprung
   aus einer Autorenzeile oder einem Quellenblock genau hinter der Kopfleiste —
   dieselbe Angabe traegt #inhalt in layout.css. */
.team__person,
#wie-wir-arbeiten {
  scroll-margin-top: 5rem;
}

/* Der Selektor braucht die Elternklasse: .team__person p daneben ist eine Klasse
   plus ein Element und schluege ein blosses .team__text sonst. */
/* Die Kurzbeschreibung ist die eine Ausnahme im sonst zentrierten Team-Eintrag:
   Portraet, Name und Rollenzeile zentriert (das macht .team__person weiter oben in
   DIESER Datei, nicht .karte aus bausteine.css — die Eintraege tragen bewusst
   keine .karte), der mehrzeilige Fliesstext darunter linksbuendig — zentriert
   stuenden vier bis sieben Zeilen mit flatterndem Anschlag auf beiden Seiten. Die
   Angabe gilt auf jeder Breite; ab 768px stellt der @media-Block dieser Datei
   .team__person ohnehin auf links, dort ist sie also wirkungslos und aendert
   nichts am Bestand. */
.team__person .team__text {
  color: var(--text);
  margin-top: 0.5rem;
  text-align: left;
}

/* 6. Ab Tablet ------------------------------------------------------------ */

@media (min-width: 768px) {
  /* minmax(0, 1fr) statt 1fr aus demselben Grund, der beim Kartenraster in
     bausteine.css ausgeschrieben steht: Ein blosses 1fr nimmt den laengsten
     unteilbaren Inhalt als Mindestbreite und schiebt die Spalte damit ueber ihren
     Anteil hinaus. Hier stehen deutsche Komposita links und ein 772px breites Bild
     rechts — die Null als Minimum bindet beide Spalten an ihren Anteil. */
  .motivation {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }

  /* Ab hier steht das Bild neben dem Text — zentrierter Text zwischen zwei
     Spalten liest sich schlechter als linksbuendiger. Gleiche Ruecknahme wie bei
     .vorstellung__text in seite-startseite.css. Die Team-Eintraege stehen ab hier
     zu zweit und zu viert nebeneinander und schliessen mit dem Portraetrand ab —
     dieselbe Begruendung, derselbe Umschaltpunkt. */
  .motivation__text,
  .team__person {
    text-align: left;
  }
}