/* ===========================================================================
   ablauf.css — Benker WP-Theme
   HANDGESCHRIEBEN. Wird NACH components.css geladen.

   Projektablauf: sechs Stationen an einer Linie, darunter je eine Karte.

   ENTWICKLUNG (alles am 22.07.2026)
   1. Scroll-Fortschritt -> verworfen: Der Abschnitt ist kompakt, man steht
      davor statt hindurchzuscrollen.
   2. Ausklapper je Station -> verworfen: verschob bei sechs Spalten das ganze
      Layout.
   3. Schwebende Glasbox bei Hover -> verworfen: brauchte 190px Leerraum
      darunter, den man immer sah, auch wenn nichts aufging.
   4. JETZT: Karten wie in der Wischansicht, immer sichtbar, in beiden Groessen
      dieselbe Bauform. Hover fuellt weiterhin die Linie und hebt die Karte an.

   Das Ergebnis ist ruhiger: Es gibt nichts, was erst erscheinen muss, und die
   Seite hat keine Luecke mehr fuer etwas, das gerade nicht da ist.

   VOLLE BREITE ab 900px: Sechs Karten mit lesbarem Detailtext passen nicht in
   das Textband. Der Ablauf steht deshalb ausserhalb (siehe weg.php) und nutzt
   die Fensterbreite mit eigenem Seitenabstand.
   ---------------------------------------------------------------------------

   KORREKTUR 22.07.2026: Der Ablauf steht wieder IM Textband, also so breit wie
   Hero und uebriger Inhalt. Die volle Fensterbreite brach mit der Breite, an
   der sich die ganze Website orientiert.

   Damit sechs Karten im Textband nicht zu schmal werden, zeigen sie ab 900px
   nur Nummer, Titel und einen Satz. Der Detailtext steht in der Wischansicht,
   wo eine Karte fast die ganze Breite hat.
   =========================================================================== */

.ablauf {
  --ablauf-fortschritt: 0;
  --ablauf-punkt: 18px;
  --ablauf-linie: 2px;
  --ablauf-anzahl: 6;

  position: relative;
}

/* ---------------------------------------------------------------------------
   Schiene
   --------------------------------------------------------------------------- */

.ablauf__schiene {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.ablauf__linie,
.ablauf__linie-fuellung {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
}

.ablauf__linie {
  background-color: var(--color-bg-muted);
}

.ablauf__linie-fuellung {
  background-color: var(--color-primary-800);
  transform-origin: left center;
  transform: scaleX(var(--ablauf-fortschritt));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   Karte
   --------------------------------------------------------------------------- */

.ablauf__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.ablauf__station {
  position: relative;
  display: flex;
  flex-direction: column;
  outline: none;
}

.ablauf__punkt {
  width: var(--ablauf-punkt);
  height: var(--ablauf-punkt);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background-color: var(--color-bg);
  border: var(--ablauf-linie) solid var(--color-primary-800);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ablauf__punkt-kern {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-800);
}

.ablauf__karte {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-subtle);
  border: 1px solid rgba(8, 8, 8, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}

.ablauf__nr {
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-800);
  margin: 0 0 var(--space-2);
}

.ablauf__titel {
  font-family: var(--font-heading);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading-3xs);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  text-wrap: pretty;
}

.ablauf__kurz {
  font-size: var(--fs-body-s);
  line-height: 1.45;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
  text-wrap: pretty;
}

.ablauf__box {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(8, 8, 8, 0.1);
}

.ablauf__detail {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.55;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ===========================================================================
   AB 900px: sechs Karten nebeneinander, volle Breite
   =========================================================================== */

@media (min-width: 900px) {

  /* Schiene laeuft von Punktmitte der ersten bis Punktmitte der letzten
     Station. Die Punkte sitzen am linken Rand ihrer Spalte. */
  .ablauf__schiene {
    top: calc(var(--ablauf-punkt) / 2 - var(--ablauf-linie) / 2);
    left: calc(var(--ablauf-punkt) / 2);
    right: calc(var(--ablauf-punkt) / 2);
    height: var(--ablauf-linie);
  }

  .ablauf__liste {
    display: grid;
    grid-template-columns: repeat(var(--ablauf-anzahl), 1fr);
    gap: var(--space-3);
    align-items: stretch;
  }

  .ablauf__punkt {
    margin-bottom: var(--space-5);
  }

  /* 20.08.2026: etwas Bodenfreiheit, damit die eingeblendete Box nicht in die
     naechste Ueberschrift laeuft. Bewusst KLEIN gehalten (28px statt der 190px
     aus dem ersten Entwurf): Die Box ist seit der Verbreiterung auf 380px nur
     noch rund 140px hoch, den Rest deckt der Abstand ab, den der naechste
     Abschnitt ohnehin mitbringt. Ein Rest Ueberlappung bleibt moeglich und ist
     bei einem schwebenden Overlay auch in Ordnung. */
  .ablauf {
    padding-bottom: 28px;
  }

  /* --- Detail als schwebende Box ----------------------------------------- */

  /*
   * Die Karte selbst bleibt kompakt (Nummer, Titel, ein Satz). Das Detail
   * erscheint beim Zeigen als Box darunter.
   *
   * WICHTIG: Sie ist absolut positioniert und ueberlagert, was unter ihr liegt.
   * Kein reservierter Leerraum — genau der war beim ersten Versuch das Problem:
   * 190px Luecke, die man dauerhaft sah, auch wenn nichts eingeblendet war.
   * Ein Hover-Overlay darf ueber den Abschnitt hinausragen, das ist bei
   * schwebenden Elementen erwartbar und faellt nicht auf, weil es nur so lange
   * da ist, wie der Zeiger auf der Karte steht.
   *
   * Zweistufig ueber visibility, entsprechend der Projektregel: nichts geht
   * abrupt auf oder zu.
   */
  .ablauf__box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 0;
    border-radius: var(--radius-card);
    background-color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(8, 8, 8, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(8, 8, 8, 0.12);
    text-align: left;

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.28s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.28s;
    z-index: 3;
  }

  /* Kleiner Zeiger nach oben, damit die Box zu ihrer Karte gehoert. */
  .ablauf__box::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--space-5);
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background-color: inherit;
    border-left: 1px solid rgba(8, 8, 8, 0.08);
    border-top: 1px solid rgba(8, 8, 8, 0.08);
  }

  .ablauf__station:hover .ablauf__box,
  .ablauf__station:focus-visible .ablauf__box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Die aktive Karte und ihre Box gehoeren zusammen und liegen ueber den
     Nachbarn. */
  .ablauf__station:hover,
  .ablauf__station:focus-visible {
    z-index: 2;
  }

  /* Damit die schmale Spalte nicht zur Textwurst wird, darf die Box breiter
     sein als ihre Karte. Bei den Randstationen zur Mitte hin ausbrechen, damit
     nichts aus dem Textband laeuft. */
  /* 20.08.2026: von 260 auf 380px verbreitert. Die Box war so schmal, dass der
     laengste Text (Schritt 01) acht Zeilen hoch wurde und bis in die naechste
     Ueberschrift reichte. Breiter heisst flacher — das loest den Konflikt
     groesstenteils, ohne dauerhaft Leerraum zu reservieren.
     Bei left:0 und right:0 gleichzeitig gewinnt width, die Box haengt also an
     der linken Kante ihrer Karte. Die beiden rechten Stationen brechen ueber
     left:auto zur Mitte hin aus, damit nichts aus dem Textband laeuft. */
  .ablauf__box {
    width: 380px;
  }

  .ablauf__station:first-child .ablauf__box,
  .ablauf__station:nth-child(2) .ablauf__box {
    right: auto;
    width: 380px;
  }

  .ablauf__station:last-child .ablauf__box,
  .ablauf__station:nth-last-child(2) .ablauf__box {
    left: auto;
    width: 380px;
  }

  .ablauf__station:last-child .ablauf__box::before,
  .ablauf__station:nth-last-child(2) .ablauf__box::before {
    left: auto;
    right: var(--space-5);
  }

  /* --- Zeigen oder Tastaturfokus ----------------------------------------- */

  .ablauf__station:hover .ablauf__punkt,
  .ablauf__station:focus-visible .ablauf__punkt {
    transform: scale(1.4);
  }

  .ablauf__station:hover .ablauf__karte,
  .ablauf__station:focus-visible .ablauf__karte {
    transform: translateY(-4px);
    border-color: rgba(0, 91, 168, 0.25);
    box-shadow: 0 14px 32px rgba(8, 8, 8, 0.08);
  }

  .ablauf__station:focus-visible .ablauf__karte {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .ablauf__hinweis {
    display: none;
  }
}

/* ===========================================================================
   BIS 899px: wischbarer Streifen
   =========================================================================== */

@media (max-width: 899px) {

  .ablauf__schiene {
    display: none;
  }

  .ablauf__liste {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-4);
  }

  .ablauf__liste::-webkit-scrollbar {
    display: none;
  }

  .ablauf__station {
    flex: 0 0 82%;
    max-width: 340px;
    scroll-snap-align: start;
  }

  /* Der Punkt wird zur Kopfzeile der Karte. */
  .ablauf__punkt {
    margin-bottom: var(--space-4);
  }

  .ablauf__hinweis {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-body-xs);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-muted);
  }
}

/* ---------------------------------------------------------------------------
   Bewegung reduzieren
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ablauf__linie-fuellung,
  .ablauf__punkt,
  .ablauf__karte {
    transition: none;
  }
}