/*
 * Zweck: Eigenständiges Stylesheet NUR für /ueber-uns (lib/seiten/ueber-uns.js) — überarbeitet
 *   zum Marktstart (fachliche Grundlage §9.9, Auftrag "docs/auftraege/2026-10-05-ueber-uns-seite.md").
 *   Historischer Dateiname (ursprünglich gemeinsam mit /community) bleibt bestehen — /community
 *   hat seit dem Auftrag "Community-Seite schlank" ein eigenes Stylesheet
 *   (public/css/seiten-community.css), diese Datei bedient ausschließlich noch /ueber-uns.
 * Hauptverantwortung: Dunkler Hero, Geschichte-Textspalte (max-width: 65ch), vier Werte-Karten
 *   mit Icon (keine Pillen/Buttons mehr), Gründerkarte mit optionalem Bild, Einbettung der
 *   wiederverwendeten Bausteine Fortschritt/Anmeldung, Presse-Abschnitt.
 * Nutzt Design-Tokens (public/css/tokens.css) und Klassen aus public/css/site.css (.section,
 *   .container, .section-title, .btn-primary, .material-symbols-outlined) weiter — site.css
 *   selbst bleibt unangetastet. Eingebunden NACH /css/site.css, /css/startseite/basis.css,
 *   /css/startseite/anmeldung.css und /css/startseite/fortschritt.css (Muster lib/seiten/spieler.js:
 *   Reihenfolge Basis-CSS → wiederverwendete Baustein-CSS → seiteneigenes CSS).
 * Kontext im System: Wird per <link> eingebunden, NACHDEM lib/template.js#page() den
 *   HTML-Rumpf erzeugt hat.
 */

.uu-seite {
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.uu-seite h1,
.uu-seite h2,
.uu-seite h3 {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Abstände zwischen den Sections wie /spieler und /verkaeufer: 48 px, mobil 36 px (Allgemein
   .section hat 80 px oben und unten). */
.uu-seite .section { padding-top: 48px; padding-bottom: 48px; }
@media (max-width: 767px) {
  .uu-seite .section { padding-top: 36px; padding-bottom: 36px; }
}

/* ---------- Hero (dunkel) ---------- */

.uu-hero {
  background: var(--rc-dark, #12222B);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}

@media (max-width: 767px) {
  .uu-hero { padding: 40px 0; }
}

.uu-hero-titel {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
}

.uu-hero-unterzeile {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
}

/* ---------- Unsere Geschichte ---------- */

.uu-geschichte h2 {
  margin-top: 0;
  margin-bottom: 24px;
}

.uu-geschichte-text {
  max-width: 65ch;
  margin-inline: auto;
}

.uu-geschichte-text p {
  margin: 0 0 20px;
  line-height: 1.6;
}

.uu-geschichte-text p:last-child {
  margin-bottom: 0;
}

/* ---------- Wofür wir stehen ---------- */

.uu-werte h2 {
  margin-top: 0;
  margin-bottom: 24px;
  text-align: center;
}

.uu-werte-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .uu-werte-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .uu-werte-grid { grid-template-columns: repeat(4, 1fr); }
}

.uu-werte-karte {
  background: var(--rc-surface-container-low);
  border-radius: var(--r-card);
  padding: 24px;
}

.uu-werte-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rc-primary-container);
  color: var(--rc-on-primary-container);
  font-size: 24px;
  margin-bottom: 16px;
}

.uu-werte-karte h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.uu-werte-karte p {
  margin: 0;
  color: var(--rc-on-surface-variant);
  line-height: 1.5;
}

/* ---------- Der Gründer ---------- */

.uu-gruender h2 {
  margin-top: 0;
  margin-bottom: 24px;
}

.uu-gruender-karte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--rc-surface-container-low);
  border-radius: var(--r-card);
  padding: 24px;
  align-items: center;
}

@media (min-width: 640px) {
  .uu-gruender-karte:has(.uu-gruender-bild) {
    grid-template-columns: 160px 1fr;
  }
}

.uu-gruender-bild {
  border-radius: var(--r-card);
  overflow: hidden;
}

.uu-gruender-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.uu-gruender-name {
  margin: 0 0 4px;
}

.uu-gruender-rolle {
  margin: 0 0 12px;
  color: var(--rc-on-surface-variant);
  font-size: 14px;
}

.uu-gruender-inhalt p {
  margin: 0 0 16px;
  line-height: 1.6;
}

.uu-gruender-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.uu-gruender-aktionen .btn-primary {
  display: inline-block;
}

.uu-gruender-mail {
  color: var(--rc-primary);
  font-weight: 600;
  text-decoration: none;
}

.uu-gruender-mail:hover {
  text-decoration: underline;
}

/* ---------- Wo wir stehen ---------- */

.uu-stand-text-huelle .container {
  max-width: 65ch;
  text-align: center;
}

.uu-stand-text {
  margin: 0;
  line-height: 1.6;
}

/* ---------- Presse und Kooperation ---------- */

.uu-presse h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.uu-presse-text {
  margin: 0;
  line-height: 1.6;
}

.uu-presse-text a {
  color: var(--rc-primary);
  font-weight: 600;
}