/* About: oben Foto links und Beschreibung rechts, darunter zwei Spalten unter einer Linie */
.ueber {
  padding: calc(var(--rand) + 8em) var(--rand) clamp(32px, 4vw, 56px);
  font-size: 14px;
  line-height: 1.4;
}
.ueber-oben,
.ueber-unten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--rand);
}
.ueber-oben { align-items: start; }

/* Foto: Hochformat-Ausschnitt, bündig mit dem linken Seitenrand wie die Fotos der Startseite */
.ueber-bild {
  width: min(100%, 460px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 53% center;
}

.ueber-text { max-width: 54ch; }
.ueber-text p + p { margin-top: 0.6em; }
/* Blocksatz mit Silbentrennung, letzte Zeile links */
.ueber-text [data-lang] p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.ueber-text [data-lang] { margin-top: 1.6em; }
.ueber a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Sprachwahl: klein, fett, Großbuchstaben wie die Navigation; die aktive Sprache ist unterstrichen */
.sprache { display: flex; gap: 0.5em; font-size: 12px; font-weight: 700; }
.sprache button {
  font: inherit;
  color: var(--grau);
  background: none;
  border: 0;
  cursor: pointer;
  /* große Klickfläche, gleiches Aussehen */
  padding: 20px 12px;
  margin: -20px -12px;
}
.sprache button[aria-pressed="true"] { color: var(--schwarz); text-decoration: underline; text-underline-offset: 2px; }
.sprache button:hover { color: var(--schwarz); }
.sprache span { color: var(--grau); }

.ueber-unten {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: var(--rand);
  border-top: 1px solid var(--schwarz);
}
.ueber-unten h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 1.6em; }
.ueber-unten p + p { margin-top: 1em; }
.ueber-unten span { color: var(--grau); }

@media (max-width: 700px) {
  .ueber { padding-top: 96px; }
  .ueber-oben, .ueber-unten { grid-template-columns: 1fr; row-gap: 32px; }
  .ueber-bild { width: 100%; }
}

/* Fußzeile der About-Seite: zwei Hälften wie der Rest der Seite; E-Mail-Adresse klein geschrieben */
.fuss.zwei { grid-template-columns: 1fr 1fr; }
.fuss .klein-schrift { text-transform: none; }
@media (max-width: 700px) { .fuss.zwei { grid-template-columns: 1fr; } }
/* Impressum / Datenschutz ganz rechts am Seitenrand */
.fuss.zwei > :last-child { justify-self: end; text-align: right; }
@media (max-width: 700px) { .fuss.zwei > :last-child { justify-self: start; text-align: left; } }
/* E-Mail auf Höhe der zweiten Zeile (Datenschutz) */
.fuss.zwei { align-items: end; }