/* ============================================================
   Datei:        assets/css/startseite/ueber-mich.css
   Seite:        Startseite (index.html)
   Zweck:        Über-mich-Bereich: Text, Technikliste und Kontakt
   Abhängig von: assets/css/shared/variablen.css, assets/css/shared/badge.css, assets/css/shared/button.css
   Genutzt von:  index.html (Inhalt baut assets/js/startseite/ueber-mich.js)
   ============================================================ */

/* --- 1. Layout --- */
.ueber-mich {
  display: grid;
  gap: var(--abstand-4);
}

.ueber-mich__inhalt {
  display: grid;
  gap: var(--abstand-4);
}

.ueber-mich__text {
  display: grid;
  gap: var(--abstand-3);
  align-content: start;
}

/* --- 2. Foto oder Monogramm --- */
.ueber-mich__foto {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--farbe-rahmen);
}

.ueber-mich__monogramm {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--akzent-1), var(--farbe-wein));
  border: 0;
  color: var(--farbe-text-auf-wein);
  font-size: 2.4rem;
  font-weight: 700;
}

/* --- 3. Fähigkeiten in Gruppen --- */
.ueber-mich__technik {
  display: grid;
  gap: var(--abstand-3);
  align-content: start;
  padding: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius);
}

.ueber-mich__kopf {
  font-size: 1.1rem;
}

.ueber-mich__gruppe {
  display: grid;
  gap: var(--abstand-2);
}

.ueber-mich__untertitel {
  color: var(--farbe-text-gedaempft);
  font-family: var(--schrift-mono);
  font-size: var(--schrift-klein);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- 4. Desktop (ab 1024 px): zwei Spalten --- */
@media (min-width: 1024px) {
  .ueber-mich__inhalt {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--abstand-5);
  }
}