/* X mind – „Was wir umgesetzt haben“ (seit 26.10.2026, inc/umgesetzt.php).
   Projektseite: Abschnitt .umgesetzt (teile/umgesetzt.php) zwischen „Der Kunde / Die Herausforderung“ und „Unsere Lösung“.
   Leistungsseiten: kompakte Zeilen .pzeile (teile/leistung/projektzeile.php), auf dem Handy Haken untereinander.
   ds-allow-hardcode:start – Bild-, Haken- und Spaltenmaße sind Geometrie dieser Bausteine; Farben und Abstände aus basis.css. */

/* Haken: oranger Kreis, weißer Haken (xm-haken: „.haken“ ist auf den Leistungsseiten schon eine Liste) */
.xm-haken { flex: none; width: 20px; height: 20px; }
.xm-haken circle { fill: var(--orange); }
.xm-haken path { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Projektseite */
.umgesetzt { padding: var(--space-50) 0 0; }
.umgesetzt__innen { max-width: var(--container); margin: 0 auto; padding: var(--space-60); border-radius: var(--radius-30); background: var(--mist); color: var(--navy); }
.umgesetzt__titel { margin: 0 0 var(--space-32); }
.umgesetzt__gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-16) var(--space-48); }
/* subgrid: alle Spaltenköpfe enden auf einer Linie, die Listen beginnen gleich hoch, auch wenn ein Name umbricht */
.umgesetzt__gruppe { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: var(--space-16); }
.umgesetzt__leistung { display: block; align-self: end; padding-bottom: var(--space-8); border-bottom: 2px solid var(--orange); font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: inherit; text-decoration: none; }
.umgesetzt__leistung:hover, .umgesetzt__leistung:focus-visible { color: var(--orange); }
.umgesetzt__liste { display: grid; align-content: start; gap: var(--space-12); margin: 0 0 var(--space-20); padding: 0; list-style: none; }
.umgesetzt__gruppen--eins .umgesetzt__liste { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-14) var(--space-32); }
.umgesetzt__liste li { display: flex; gap: var(--space-10); align-items: center; font-size: 1.05rem; }
/* zwei Leistungen, mehr als vier Haken: zwei Spalten, von oben nach unten (--zeilen setzt teile/umgesetzt.php) */
.umgesetzt__liste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--zeilen, 4), auto); grid-auto-flow: column; column-gap: var(--space-32); }

/* Leistungsseiten: eine Zeile je Projekt */
.pzeilen { max-width: var(--container); margin: 0 auto; padding: 0; list-style: none; }
.pzeile { margin: 0; }
.pzeile__a { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: var(--space-28); align-items: center; padding: var(--space-18) 0; border-bottom: 1px solid var(--navy-32); color: var(--navy); text-decoration: none; }
.pzeile__bild img, .pzeile__ohne { display: block; width: 176px; height: 118px; border-radius: var(--radius-16); object-fit: cover; }
.pzeile__ohne { display: grid; place-items: center; background: var(--mist); font-size: 2rem; font-weight: 700; }
.pzeile__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-14); }
.pzeile__name { font-size: 1.3rem; font-weight: 600; line-height: 1.25; transition: color var(--dauer-kurz) ease-out; }
.pzeile__unter { color: var(--navy-81); }
.pzeile__auszug { display: -webkit-box; max-width: 72ch; margin-top: var(--space-4); overflow: hidden; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pzeile__haken { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-18); margin-top: var(--space-10); font-size: 0.92rem; font-weight: 500; }
.pzeile__haken > span { display: inline-flex; gap: var(--space-6); align-items: center; }
.pzeile__haken .xm-haken { width: 16px; height: 16px; }
.pzeile__pfeil { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-round); background: var(--orange); color: var(--white); transition: transform var(--dauer-kurz) ease-out; }
.pzeile__pfeil .icon { width: 18px; height: 18px; }
.pzeile__a:hover .pzeile__name, .pzeile__a:focus-visible .pzeile__name { color: var(--orange); }
.pzeile__a:hover .pzeile__pfeil, .pzeile__a:focus-visible .pzeile__pfeil { transform: translateX(4px); }

@media (max-width: 767px) {
  .umgesetzt__innen { padding: var(--space-45) var(--space-24); }
  .umgesetzt__liste--zwei { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .pzeile__a { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-16); align-items: start; }
  .pzeile__bild img, .pzeile__ohne { width: 96px; height: 72px; border-radius: var(--radius-10); }
  .pzeile__name { font-size: 1.1rem; }
  /* auf dem Handy untereinander, sonst flattern die Zeilen (Inhaber 26.10.2026) */
  .pzeile__haken { flex-direction: column; gap: var(--space-6); }
  .pzeile__pfeil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pzeile__name, .pzeile__pfeil { transition: none; }
}
/* ds-allow-hardcode:end */