/* X mind – „Unsere Lösung für <Kunde>“ auf der Projektseite (seit 26.10.2026, teile/loesung.php, inc/loesung.php).
   Dunkle Box mit dem Verlauf von „Der Kunde“ (--grad-panel), Breite wie „Was wir umgesetzt haben“ (--container).
   ds-allow-hardcode:start – Weißstufen auf Navy, Ziffernspalte, Pille und Bildschatten sind Geometrie dieses
   Bausteins; Farben, Radien und Abstände sonst aus basis.css. */
.loesung {
  --loesung-linie: rgba(255, 255, 255, 0.18);
  --loesung-text: rgba(255, 255, 255, 0.81);
  --loesung-leise: rgba(255, 255, 255, 0.22);
  display: flex;
  justify-content: center;
  padding: var(--space-100) 0 var(--space-50);
}
.loesung__reihe { width: 100%; padding: 0 var(--seiten-pad-x); }
.loesung__box { position: relative; overflow: hidden; max-width: var(--container); margin: 0 auto; padding: 72px 64px 64px; border-radius: var(--radius-30); background-image: var(--grad-panel); color: var(--white); counter-reset: punkt; }
.loesung__box > * { position: relative; }

/* großes X als Wasserzeichen, angeschnitten */
.loesung__wasser { position: absolute; top: -60px; right: -90px; width: 520px; height: auto; fill: var(--white); opacity: 0.05; pointer-events: none; }

/* Kopf: Titel links, „GETTING THINGS DONE“ mit X-Bildmarke rechts, Einleitung darunter */
.loesung__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-20) var(--space-48); align-items: end; margin-bottom: var(--space-48); }
.loesung__titel { margin: 0; color: var(--white); font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
/* lange Kundennamen („Baugenossenschaft Oberzellerhau eG“) trennen statt aus der Box zu laufen */
.loesung__titel span { display: block; color: var(--orange); hyphens: auto; overflow-wrap: break-word; }
.loesung__gtd { display: inline-flex; grid-column: 2; grid-row: 1; justify-self: end; align-items: center; gap: var(--space-14); margin: 0 0 var(--space-8); padding: var(--space-14) 26px; border: 1px solid var(--loesung-leise); border-radius: var(--radius-pill); white-space: nowrap; }
.loesung__gtd span { font-size: 0.9rem; font-weight: var(--weight-bold); line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; }
.loesung__gtd-x { display: block; width: auto; height: 30px; fill: var(--orange); }
.loesung__intro { grid-column: 1; max-width: 62ch; color: var(--loesung-text); font-size: 1.15rem; line-height: 1.6; }
.loesung__intro p { margin: 0; }
.loesung__intro p + p { margin-top: var(--space-12); }

/* Punkte: nummeriert, zwei Spalten, Zählung über alle Gruppen */
.loesung__gruppe + .loesung__gruppe { margin-top: var(--space-40); }
.loesung__gtitel { margin: 0 0 var(--space-4); color: var(--white); font-size: 1.3rem; font-weight: var(--weight-bold); line-height: 1.3; }
.loesung__punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin: 0; padding: 0; list-style: none; }
.loesung__punkt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-14); padding: var(--space-22) 0; border-top: 1px solid var(--loesung-linie); }
.loesung__punkt::before { counter-increment: punkt; content: counter(punkt, decimal-leading-zero); padding-top: 3px; color: var(--orange); font-size: 0.95rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.loesung__ptitel { display: block; margin-bottom: var(--space-4); color: var(--white); font-size: 1.12rem; font-weight: var(--weight-bold); line-height: 1.3; }
.loesung__ptext { color: var(--loesung-text); line-height: 1.6; }
.loesung__punkt--satz .loesung__ptext { color: var(--white); }
.loesung__ptext > :last-child { margin-bottom: 0; }

/* Ergebnis */
.loesung__ergebnis { position: relative; margin-top: var(--space-40); padding: 32px 0 0 32px; border-top: 1px solid var(--loesung-linie); }
.loesung__ergebnis::before { content: ""; position: absolute; top: 36px; bottom: 6px; left: 0; width: 4px; border-radius: 2px; background: var(--orange); }
.loesung__ergebnis p { max-width: 68ch; margin: 0; color: var(--white); font-size: 1.25rem; line-height: 1.55; }
.loesung__ergebnis p + p { margin-top: var(--space-12); }
.loesung__ergebnis .loesung__marke { margin-bottom: var(--space-8); color: var(--orange); font-size: 0.8rem; font-weight: var(--weight-bold); line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }

/* Links im Text, Medien aus dem Inhalt (Video, Download) */
.loesung__box a:not(.loesung__bild) { color: var(--white); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.2em; }
.loesung__box a:not(.loesung__bild):hover { color: var(--orange); }
.loesung__medien { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-20); margin-top: var(--space-48); }
.loesung__medien > * { margin: 0; }
.loesung__medien video { display: block; width: 100%; border-radius: var(--radius-20); }
.loesung__medien figcaption { margin-top: var(--space-8); color: var(--loesung-text); }
.loesung__medien .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.loesung__box .loesung__medien .wp-block-file__button { padding: var(--space-12) var(--space-24); border-radius: var(--radius-pill); background: var(--orange); color: var(--white); font-weight: var(--weight-bold); text-decoration: none; }

/* Bilder in der Box: leicht schattiert; beim Überfahren ein kleines Anheben und orange Schnittmarken an den vier Ecken
   (kein oranger Rahmen, Inhaber 26.10.2026) */
.loesung__bilder { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--space-20); margin-top: var(--space-48); }
.loesung__bild { position: relative; display: block; border-radius: var(--radius-20); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease-out; }
.loesung__bild img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-20); }
.loesung__bilder[style*="--n:1"] .loesung__bild img { aspect-ratio: 16 / 9; }
.loesung__bild::before {
  content: "";
  position: absolute;
  inset: -19px;
  opacity: 0;
  background-image: linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: left 0 top 19px, left 19px top 0, right 0 top 19px, right 19px top 0, left 0 bottom 19px, left 19px bottom 0, right 0 bottom 19px, right 19px bottom 0;
  transform: scale(1.06);
  transition: opacity 0.25s ease-out, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.loesung__bild:hover, .loesung__bild:focus-visible { z-index: 1; transform: translateY(-4px); box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06); outline: none; }
.loesung__bild:hover::before, .loesung__bild:focus-visible::before { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .loesung { padding: var(--space-50) 0; }
  .loesung__reihe { padding: 0 var(--seiten-pad-x-tablet); }
  .loesung__box { padding: 48px 40px; }
}
@media (max-width: 767px) {
  .loesung { padding: var(--space-40) 0 var(--space-30); }
  .loesung__reihe { padding: 0 var(--seiten-pad-x-mobil); }
  .loesung__box { padding: 40px 24px 28px; border-radius: var(--radius-20); }
  .loesung__wasser { top: -30px; right: -70px; width: 300px; }
  .loesung__kopf { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
  .loesung__gtd { grid-column: 1; grid-row: auto; justify-self: start; gap: var(--space-10); padding: var(--space-10) var(--space-16); }
  .loesung__gtd span { font-size: 0.78rem; }
  .loesung__gtd-x { height: 24px; }
  .loesung__punkte { grid-template-columns: minmax(0, 1fr); }
  .loesung__punkt { grid-template-columns: 32px minmax(0, 1fr); padding: var(--space-18) 0; }
  .loesung__ergebnis { padding: 24px 0 0 20px; }
  .loesung__ergebnis::before { top: 28px; }
  .loesung__ergebnis p { font-size: 1.1rem; }
  .loesung__bilder { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .loesung__bild { transition: box-shadow 0.2s ease-out; }
  .loesung__bild::before { transform: none; transition: opacity 0.2s ease-out; }
  .loesung__bild:hover, .loesung__bild:focus-visible { transform: none; }
}
/* ds-allow-hardcode:end */