/* ueber-mich — ruhige Unterseite, ohne Höhenlinien-Hero.
   Nutzt die Bausteine aus style.css (wrap, gross, mittel, stack, punkt),
   ergänzt nur, was die Seite zusätzlich braucht. */

/* Mast läuft hier im normalen Fluss (kein Full-Screen-Hero darunter). */
.mast {
  position: static;
  background: var(--papier);
  border-bottom: 1px solid var(--haarlinie);
}
.mast__nav a[aria-current="page"] {
  color: var(--tinte);
  font-weight: 600;
  border-bottom-color: var(--tinte);
}

main, .fuss { position: relative; z-index: 1; }

/* ---------- Seitenkopf ---------- */

.kopf {
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.25rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--linie);
}
.kopf__h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: -.04em;
  line-height: .98;
  margin: 0 0 1rem;
}
.kopf__claim {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--gedaempft);
  max-width: 42ch;
}

/* ---------- Brücke: Alleinstellungssatz mit Marker-Highlight ----------
   Technik wie im v2-Entwurf (Wunsch Moritz): em bekommt Marke-Tönung als
   Textmarker-Fläche, box-decoration-break für sauberen Zeilenumbruch. */

.marker {
  font-style: normal;
  color: var(--k-marke);
  background: var(--t-marke);
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Drei Felder — kurze Selbstbeschreibung als Liste,
   bewusst kein Card-Grid: eine Zeile pro Feld, Farbe nur als Punkt/Label. */

.felder-liste {
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
}
.feld-kurz {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: .5rem clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: baseline;
  border-top: 1px solid var(--haarlinie);
  padding-block: clamp(1.25rem, 2.75vw, 2rem);
  margin: 0;
}
.feld-kurz:last-child { border-bottom: 1px solid var(--haarlinie); }
.feld-kurz[data-farbe="energie"] { --kf: var(--k-energie); --ff: var(--f-energie); }
.feld-kurz[data-farbe="netz"]    { --kf: var(--k-netz);    --ff: var(--f-netz); }
.feld-kurz[data-farbe="ki"]      { --kf: var(--k-ki);      --ff: var(--f-ki); }
.feld-kurz dt {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: -.02em;
  color: var(--kf);
}
.feld-kurz dt::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  background: var(--ff);
  flex: none;
  transform: translateY(-.05em);
}
.feld-kurz dd {
  margin: 0;
  max-width: 56ch;
  color: var(--tinte);
}

/* ---------- Verfügbarkeit / Standort ---------- */

.verfuegbar-zeile {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 .6rem;
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--k-fertig);
}
.standort-zeile {
  margin: 0 0 1.75rem;
  color: var(--gedaempft);
}
.kontakt-link { margin: 0; }
.kontakt-link a {
  font-weight: 600;
  text-decoration: underline 1px var(--haarlinie);
  text-underline-offset: .25em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.kontakt-link a:hover { color: var(--k-marke); text-decoration-color: var(--f-marke); }

/* ---------- Schmale Viewports ---------- */

@media (max-width: 700px) {
  .feld-kurz { grid-template-columns: 1fr; gap: .4rem; }
}