/* ============================================================
   Slipac Systems – Seite „Über mich“
   Stand: 4. Oktober 2026

   Setzt tokens.css, base.css und seite.css voraus.
   ============================================================ */

/* ---- Grundsätze -------------------------------------------- */

.grundsaetze {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: grundsatz;
}

.grundsaetze li {
  counter-increment: grundsatz;
  position: relative;
  display: grid;
  /* Nummer links, Überschrift und Text rechts daneben.
     minmax(0, 1fr): Lange Wörter wie „Sicherheitsversprechen“
     dürfen die Spalte auf schmalen Handys nicht aufdrücken. */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--abstand-5);
  padding-block: var(--abstand-6);
  border-bottom: var(--linie);
}

.grundsaetze li:first-child {
  border-top: var(--linie);
}

.grundsaetze li::before {
  content: counter(grundsatz, decimal-leading-zero);
  grid-row: span 2;
  font-size: var(--groesse-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--aktion);
  background: linear-gradient(180deg, var(--farbe-systemblau), #0E3C9C);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grundsaetze h3,
.grundsaetze p {
  grid-column: 2;
}

.grundsaetze h3 {
  margin-bottom: var(--abstand-2);
  font-size: var(--groesse-lead);
}

.grundsaetze p {
  margin-bottom: 0;
  hyphens: auto;
  color: var(--text-leise);
  font-size: var(--groesse-klein);
}

/* Blaue Linie unter jedem Grundsatz, die sich beim Scrollen füllt
   (DECISIONS.md P-070) – wie die Schritte auf der Startseite. Nur mit
   scrollgebundenen Animationen und ohne reduzierte Bewegung. */
.grundsaetze li::after {
  content: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grundsaetze li::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, var(--farbe-systemblau), var(--farbe-hellblau));
      transform-origin: left center;
      animation: grundsatz-linie linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 55%;
    }
  }
}

@keyframes grundsatz-linie {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Übergabe: Kacheln mit Symbol ---------------------------- */

.abschnitt--ruhig .karte .symbolkachel {
  margin-bottom: var(--abstand-4);
}

/* ---- Porträt ----------------------------------------------------
   Kommt beim Laden einmal sanft herein; eine versetzte blaue Fläche
   dahinter gibt Tiefe (rein dekorativ). */

.seitenkopf .bildraster__bild {
  position: relative;
  overflow: visible;
  box-shadow: none;
}

.seitenkopf .bildraster__bild::before {
  content: "";
  position: absolute;
  inset: 6% -5% -5% 6%;
  z-index: -1;
  border-radius: var(--rundung-gross);
  background: linear-gradient(145deg, rgba(21, 94, 239, 0.16), rgba(56, 189, 248, 0.10));
}

.seitenkopf .bildraster__bild img {
  border-radius: var(--rundung-gross);
  box-shadow: var(--schatten-gross);
}

@media (prefers-reduced-motion: no-preference) {
  .seitenkopf .bildraster__bild {
    animation: portraet-herein 900ms var(--kurve-weich) 150ms both;
  }
}

@keyframes portraet-herein {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: 0.97;
  }
}