/* ============================================================================
   PROBLEM UND MUSTER ALS GEPINNTE SEQUENZ

   Drei Schritte, die nacheinander an derselben Stelle stehen:

     1. Im Tagesgeschaeft   die Symptome, die der Leser wiedererkennt
     2. Das Muster dahinter die Diagnose, die erst nach den Symptomen wirkt
     3. Genau dort setzen wir an   der Schlusssatz, der ueberleitet

   Die Reihenfolge ist der Inhalt: Die Diagnose trifft nur, wenn die Symptome
   vorher gesetzt haben. Als zwei Kaesten nebeneinander liest man beides
   gleichzeitig und die Dramaturgie geht verloren.

   Grundsatz wie bei ablauf.css: Ohne .pin-aktiv passiert hier nichts, dann ist
   es das gewohnte Zweispalten-Layout mit dem Satz darunter. Gesetzt wird die
   Klasse von pin-sequence.js.
   ============================================================================ */

/* Der Schlusssatz steht jetzt im Raster statt darunter, damit die drei
   Schritte Geschwister sind. In der Listenansicht laeuft er wie zuvor ueber
   beide Spalten. */
.problem-solution-grid > .ps-bridge {
    grid-column: 1 / -1;
}

/* ── Eingerastet ──────────────────────────────────────────────────────────── */
.problem-solution-section.pin-aktiv {
    /* Ein Bildschirm pro Schritt, plus Vorlauf zum Einrasten. */
    height: calc(var(--schritte, 3) * 92vh + 50vh);
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

.problem-solution-section.pin-aktiv .pin-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-8);
    /* Freiraum fuer den klebenden Kopfbereich, gemessen in pin-sequence.js. */
    padding-block: calc(var(--kopf-hoehe, 90px) + var(--space-8)) var(--space-12);
}

/* Die Ueberschrift bleibt ueber alle drei Schritte stehen. Sie ist die Frage,
   auf die die Sequenz antwortet. */
.problem-solution-section.pin-aktiv h2 {
    margin-bottom: 0;
}

/* Alle Schritte in dieselbe Rasterzelle, damit sie sich abloesen statt
   nebeneinander zu stehen. Die Hoehe richtet sich nach dem laengsten Schritt,
   dadurch springt beim Wechsel nichts. */
.problem-solution-section.pin-aktiv .problem-solution-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 62rem;
    align-items: center;
}

.problem-solution-section.pin-aktiv .problem-solution-grid > [data-pin-step] {
    grid-area: 1 / 1;
    opacity: 0;
    /* Die Listenansicht schiebt die Kaesten von links und rechts herein.
       Hier loesen sie einander an derselben Stelle ab, deshalb nur ein kurzer
       Weg nach oben. */
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
    pointer-events: none;
    /* Sonst werden alle Schritte auf die Hoehe des laengsten gestreckt und
       der kuerzere steht halb leer in seiner Flaeche. Die Listenansicht setzt
       dafuer height 100 Prozent, damit die zwei Spalten gleich weit
       herunterlaufen. Nebeneinander ist das richtig, uebereinander nicht. */
    align-self: center;
    height: auto;
}

/* Hoehere Spezifitaet als .problem-column.visible aus style.css, sonst wuerde
   die Einblendung des Scroll-Reveals alle drei Schritte sichtbar lassen. */
.problem-solution-section.pin-aktiv .problem-solution-grid > [data-pin-step].schritt-aktiv {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ── Schritt 3: der Schlusssatz ───────────────────────────────────────────
   Er ist keine Karte, sondern die Ueberleitung. Deshalb steht er gross und
   frei, ohne Flaeche, und traegt als einziger den Markenakzent. */
.problem-solution-section.pin-aktiv .ps-bridge {
    margin: 0;
    text-align: center;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--accent);
    text-wrap: balance;
}

/* ── Schrittanzeige ───────────────────────────────────────────────────────
   Drei Punkte statt der beschrifteten Leiste des Projektablaufs: Hier tragen
   die Schritte keine Namen, die sich beschriften liessen. */
.problem-solution-section.pin-aktiv .pin-punkte {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}
.pin-punkt {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--border-subtle);
    transition: background var(--duration-base) var(--ease-out);
}
.pin-punkt[data-status="aktiv"]  { background: var(--accent); }
.pin-punkt[data-status="fertig"] { background: rgba(255, 201, 71, .45); }

/* ── Niedrige Fenster ─────────────────────────────────────────────────────
   Gleiche Ueberlegung wie in ablauf.css: kompakter statt abschalten. */
@media (min-width: 901px) and (max-height: 820px) {
    .problem-solution-section.pin-aktiv .pin-stage {
        gap: var(--space-4);
        padding-block: calc(var(--kopf-hoehe, 90px) + var(--space-4)) var(--space-6);
    }
    .problem-solution-section.pin-aktiv .problem-column,
    .problem-solution-section.pin-aktiv .solution-column { padding: var(--space-6); }
}

/* Unterhalb dieser Breite wird nicht eingerastet, siehe pin-sequence.js.
   Der Block bleibt als Sicherung, falls die Klasse doch gesetzt ist. */
@media (max-width: 900px) {
    .problem-solution-section.pin-aktiv { height: auto; padding-block: var(--space-section); }
    .problem-solution-section.pin-aktiv .pin-stage { position: static; min-height: 0; }
    .problem-solution-section.pin-aktiv .problem-solution-grid > [data-pin-step] {
        grid-area: auto;
        opacity: 1;
        transform: none;
    }
    .problem-solution-section.pin-aktiv .pin-punkte { display: none; }
}

/* ── Schritt 1: die Symptome als Kacheln ──────────────────────────────────
   Vier gleichrangige Aussagen untereinander in einem breiten Kasten sind
   schwer zu erfassen: Das Auge muss vier lange Zeilen lesen, bevor es weiss,
   ob etwas davon zutrifft. Als Raster erkennt man sein eigenes Unternehmen
   im Vorbeischauen. */
.ps-symptome {
    display: grid;
    /* min(100%, 16rem) statt 16rem: Eine feste Mindestbreite von 256 px plus
       Innenabstand ergab auf 320 px breiten Telefonen eine Spur von 322 px in
       einem 272 px breiten Container. Der Kasten wurde dadurch abgeschnitten.
       Mit min() darf die Kachel unter die Wunschbreite schrumpfen, wenn der
       Platz kleiner ist. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
}
.ps-symptome > li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "symbol titel"
        "symbol text";
    column-gap: var(--space-4);
    row-gap: 4px;
    align-items: start;

    margin: 0;
    padding: var(--space-6);
    background: rgba(10, 25, 49, .55);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
/* Der Strich der Listenansicht entfaellt, das Symbol uebernimmt seine Rolle. */
.ps-symptome > li::before { content: none; }

.ps-symptome .icon {
    grid-area: symbol;
    font-size: 1.35rem;
    color: var(--accent);
    opacity: .85;
    margin-top: 2px;
}
.ps-symptome strong {
    grid-area: titel;
    color: var(--text-strong);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    line-height: 1.25;
}
.ps-symptome span {
    grid-area: text;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

/* ── Schritt 2: die Diagnose ──────────────────────────────────────────────
   Bewusst anders gebaut als Schritt 1. Dort viele kleine Flaechen, hier ein
   zusammenhaengender Gedanke. Der Wechsel im Aufbau macht den Unterschied
   zwischen Beobachtung und Schlussfolgerung sichtbar. */
.problem-solution-section.pin-aktiv .solution-column {
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
    /* Kein Kasten: Schritt 1 sind vier Flaechen, Schritt 2 ist ein
       zusammenhaengender Gedanke. Der Wechsel vom Raster zum freien Satz
       macht den Unterschied zwischen Beobachtung und Schlussfolgerung
       sichtbar, ohne ihn zu behaupten. */
    background: none;
    border: 0;
    padding: 0;
}
.problem-solution-section.pin-aktiv .ps-leitsatz {
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    color: var(--text-body);
    margin-bottom: var(--space-6);
}
/* Die Folgerung ist der Satz, auf den die Sektion hinauslaeuft. Sie steht
   abgesetzt und schwerer als der Leitsatz darueber. */
.problem-solution-section.pin-aktiv .ps-folge {
    margin: 0;
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 201, 71, .3);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    color: var(--text-strong);
    text-wrap: balance;
}