/* ═══════════════════════════════════════════════════════════════
   Softwareentwicklung — seiteneigene Bausteine
   Setzt css/basis.css voraus; die Seite lädt BEIDE Dateien in dieser
   Reihenfolge. Hier stehen nur die Teile, die es sonst nirgends gibt:
   Seitenkopf, Problemkarten, Leistungen, Referenzprojekte, Technik,
   Ablauf und „Warum ich".
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════ Kopf der Seite ═══════════════════════════ */

.sw-seite { padding-top: calc(var(--kopf-hoehe) + clamp(48px, 7vw, 96px)); }

.sw-vorspann { max-width: 62ch; color: var(--text-dim); margin-bottom: clamp(32px, 4vw, 48px); }
.sw-vorspann strong { color: var(--text); font-weight: var(--w-halb); }

/* Kennzahlen-Karten: gleiche Machart wie das Ziffernband der Startseite. */
.sw-fakten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: clamp(32px, 4vw, 44px);
}
.sw-fakt {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
}
.sw-fakt-zahl {
  display: block;
  font-family: var(--schrift-display);
  font-size: var(--t-xl);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
  line-height: 1;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.sw-fakt-text { display: block; margin-top: 10px; font-size: var(--t-xs); color: var(--text-dim); }

.sw-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

/* Der Hinweis auf die nebenberufliche Tätigkeit — ruhig, nicht als Warnung. */
.sw-hinweis {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 62ch;
  padding: 14px 18px;
  border: 1px solid var(--kante);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font-size: var(--t-xs);
  color: var(--text-dim);
}
.sw-hinweis svg { flex: none; margin-top: 2px; color: var(--akzent); }

/* ═══════════════════════════ Blöcke ═══════════════════════════ */

.sw-block { padding-top: clamp(72px, 9vw, 120px); }
.sw-block-vorspann { max-width: 62ch; color: var(--text-dim); margin-bottom: clamp(28px, 3.4vw, 40px); }

/* ── „Kommt Ihnen das bekannt vor?" ── */
/* Der Container heißt im HTML .sw-problem-liste. Beim Umbau am 20.08.2026
   stand hier .sw-probleme — die Regel lief ins Leere, die Karten hatten
   deshalb GAR KEINEN Abstand zueinander (Founder-Befund 21.08.2026). */
.sw-problem-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.sw-problem {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  /* Vorher trug jede Karte eine eigene farbige Linie (rot, orange, …) —
     vier zusätzliche Töne, die nichts erklären. Jetzt eine gemeinsame
     Kante in der Marken-Farbe. */
  border-left: 2px solid var(--akzent-kante);
}
.sw-problem h3 {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
  line-height: 1.15;
  margin-bottom: 10px;
}
.sw-problem p { font-size: var(--t-s); color: var(--text-dim); }

/* ── Leistungen ── */
.sw-leistungen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sw-leistung {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.sw-leistung:hover { border-color: var(--kante-stark); background: var(--flaeche-stark); }
.sw-leistung-icon {
  /* Feste Kachel mit fester Symbolgröße: Ohne diese Maße dehnt sich das
     SVG auf die volle Kartenbreite — beim ersten Livegang standen dort
     riesige Symbole (20.08.2026 im Chrome gesehen). */
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-klein);
  background: var(--akzent-flaeche);
  border: 1px solid var(--akzent-kante);
  color: var(--akzent);
}
.sw-leistung-icon svg { width: 22px; height: 22px; }
.sw-leistung h3 {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
  margin-bottom: 8px;
}
.sw-leistung p { font-size: var(--t-s); color: var(--text-dim); }
.sw-leistung-beispiel {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--kante);
  font-size: var(--t-xs);
  color: var(--text-dim);
}

/* ── Referenzprojekte ── */
/* Ausgangslage · Lösung · Ergebnis stehen NEBENeinander — so waren sie
   gedacht und so liest man sie als Dreischritt. Untereinander mit dem
   großen Blockabstand rissen sie den Projektblock auseinander. */
.sw-projekt-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.sw-projekt-raster h4 {
  margin: 0 0 6px;
  font-size: var(--t-mikro);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
}
.sw-projekt-raster p { font-size: var(--t-xs); }
.sw-projekt {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  padding-bottom: clamp(34px, 4.4vw, 56px);
  border-bottom: 1px solid var(--kante);
}
.sw-projekt:last-child { border-bottom: 0; padding-bottom: 0; }
.sw-projekt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.sw-projekt-art {
  font-size: var(--t-mikro);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 11px;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.sw-projekt h3 {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
}
.sw-projekt p { font-size: var(--t-s); color: var(--text-dim); max-width: 72ch; }
.sw-projekt p + p { margin-top: 12px; }
.sw-projekt strong { color: var(--text); font-weight: var(--w-halb); }

.sw-bild {
  margin: 0;
  border-radius: var(--radius);
  overflow: clip;
  border: 1px solid var(--kante-stark);
  box-shadow: var(--schatten-gross);
}
.sw-bild img { width: 100%; height: auto; display: block; }
.sw-bild figcaption,
.sw-bild-tipp {
  padding: 10px 14px;
  font-size: var(--t-xs);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.02);
}
/* position: relative — Bezugspunkt für den Vergrößerungs-Knopf. */
.sw-film { position: relative; background: #05080f; }
.sw-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #05080f;
}
.sw-bild-lupe { display: block; }
/* Hochformatige Bildschirmfotos laufen sonst über die volle Spaltenbreite. */
.sw-bild--schmal { max-width: 483px; margin-inline: auto; }

.sw-weitere {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  font-size: var(--t-s);
  color: var(--text-dim);
}
.sw-weitere strong { color: var(--text); font-weight: var(--w-halb); }

/* ── Technik ── */
/* .sw-technik ist die Chip-Reihe UNTER einem Projekt (Python · FastAPI …).
   Sie stand versehentlich als dreispaltiges Raster — daher die weit
   auseinandergezogene Anordnung. */
.sw-technik {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--kante);
}
.sw-technik li {
  font-size: var(--t-mikro);
  color: var(--text-dim);
  padding: 5px 12px;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}
.sw-technik li::before { display: none; }

/* .sw-stack fasst die Technik-GRUPPEN (Backend, Oberfläche, Daten …). */
.sw-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sw-stack-gruppe {
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
}
.sw-stack-gruppe h3 {
  font-size: var(--t-mikro);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.sw-stack-gruppe ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-stack-gruppe li {
  font-size: var(--t-xs);
  color: var(--text-dim);
  padding: 6px 13px;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}
.sw-stack-gruppe li::before { display: none; }

/* ── Ablauf und „Warum ich" ── */
/* list-style: none — sonst zeichnet der Browser seine eigene Nummer
   NEBEN die gestaltete („1" neben „01", 21.08.2026 im Bild gesehen). */
.sw-ablauf {
  display: grid;
  gap: 16px;
  counter-reset: schritt;
  max-width: 74ch;
  list-style: none;
}
.sw-ablauf li {
  position: relative;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) 68px;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
}
.sw-ablauf li::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: clamp(18px, 2.2vw, 26px);
  top: clamp(18px, 2.2vw, 26px);
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.sw-ablauf h3 {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
  margin-bottom: 6px;
}
.sw-ablauf p { font-size: var(--t-s); color: var(--text-dim); }

/* Die Regeln standen bis zum 22.08.2026 auf .sw-warum li — das HTML
   liefert aber div-Blöcke. Nachgemessen: kein Hintergrund, kein Rahmen,
   kein Radius. Der Abschnitt lief als reiner Fließtext zwischen lauter
   Karten. Jetzt dieselbe Machart wie die Problemkarten weiter oben — erst
   damit ist der gestaffelte Auftritt überhaupt als Choreografie lesbar. */
.sw-warum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.sw-warum > div {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  border-left: 2px solid var(--akzent-kante);
}
.sw-warum h3 {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
  line-height: 1.15;
  margin-bottom: 10px;
}
.sw-warum p { font-size: var(--t-s); color: var(--text-dim); }
.sw-warum strong { color: var(--text); font-weight: var(--w-halb); }

/* ═══════════════════════════ Umbrüche der Seite ═══════════════════════════ */

@media (max-width: 960px) {
  .sw-technik { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .sw-fakten { grid-template-columns: 1fr; }
  .sw-problem-liste { grid-template-columns: 1fr; }
  .sw-warum { grid-template-columns: 1fr; }
  .sw-projekt-raster { grid-template-columns: 1fr; gap: 18px; }
  .sw-leistungen { grid-template-columns: 1fr; }
  .sw-ablauf li { padding-left: clamp(18px, 2.2vw, 26px); padding-top: 54px; }
}

/* ── Feinschliff nach der ersten Sichtprüfung (20.08.2026) ──
   Überschriften klebten an ihrem Folgetext: Auf der Startseite sorgt der
   Rahmen um Nummer und Titel für den Abstand, hier stehen sie einzeln. */
.sw-titel { margin-bottom: clamp(18px, 2.2vw, 26px); }
.sw-block > .sektion-titel { margin-bottom: clamp(16px, 2vw, 22px); }
/* Zwischenüberschriften in den Projekten („Ausgangslage", „Lösung",
   „Ergebnis") brauchen Luft nach oben, sonst reihen sich die Absätze
   gleichförmig aneinander. */
.sw-projekt h4 {
  margin-top: 20px;
  margin-bottom: 4px;
  font-size: var(--t-s);
  font-weight: var(--w-halb);
  color: var(--text);
}
.sw-projekt-kopf { margin-bottom: 6px; }


/* ═════════════ Anker der Choreografie (22.08.2026) ═════════════ */

/* Der Seitentitel steigt Wort für Wort auf. SplitText legt die Wort-Spans
   INNERHALB des em an — und background-clip: text auf dem Eltern-em malt in
   transformierte Kind-Spans hinein NICHTS. Genau daran war „Austausch?“ auf
   der Startseite unsichtbar (opacity 1, 287 px breit, trotzdem nicht da).
   Deshalb bekommt der Wort-Span den Verlauf selbst. */
.sw-titel .wort { display: inline-block; will-change: transform; }
.sw-titel em .wort {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.04em;
}

/* Bild- und Filmbühnen wachsen beim Einscrollen (Scrub, kein Pin).
   Der Drehpunkt steht hier statt im Skript: Die breiten Bühnen wachsen von
   der linken Textkante aus, das hochformatige Bild aus seiner Mitte — es
   steht mittig und würde sonst beim Wachsen nach rechts wandern. */
.sw-bild { will-change: transform; transform-origin: left center; }
.sw-bild--schmal { transform-origin: center center; }

/* Ortsangabe unter dem Formular: Das Symbol sitzt in der mittig gesetzten
   Kontaktkarte inline neben dem Text. */
.kontakt-ort svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 5px;
  color: var(--akzent);
}