/* =========================================================================
   BERATUNGSFÄLLE — gemeinsame Komponente

   -------------------------------------------------------------------------
   WARUM ES DIESE DATEI GIBT

   Die Fallbeispiele standen bis eben in css/start.css. Das war richtig,
   solange sie nur auf der Startseite vorkamen.

   Seit sie auch auf der Beratungsseite stehen, war es falsch: Dort wird
   start.css nicht geladen. Das Markup war da, das JavaScript lief, die
   Regeln existierten — nur eben in einer Datei, die diese Seite nie
   sieht. Ergebnis: bildschirmfüllende Fotos und Text, der in einer Zeile
   zusammenlief.

   Dieselbe Fehlerklasse wie zuletzt zweimal: Die Regel ist da, sie gilt
   nur nicht. Diesmal nicht wegen der Kaskade, sondern weil die Datei
   fehlte.

   -------------------------------------------------------------------------
   REGEL

   Wer diese Karten auf einer Seite verwendet, muss diese Datei einbinden.
   Der Mobiltest prüft das: Findet er .ct-karte im Markup, ohne dass
   faelle.css geladen wird, schlägt er an.

   Die Reihenfolge der Regeln ist unverändert aus start.css übernommen —
   bei CSS entscheidet sie mit.
   ========================================================================= */

/* ---------------------------------------------------------
   BERATUNGSFÄLLE
   --------------------------------------------------------- */

.case-tabs-neu {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 44px 0 34px;
}

.ct-karte {
  background: var(--white);
  border: 1.5px solid rgba(90,60,35,0.12);
  border-radius: var(--r-sm);
  padding: 0; margin: 0; cursor: pointer;
  text-align: left; font-family: var(--sans);
  overflow: hidden;
  display: flex; flex-direction: column;
  /* Browser-Vorgaben für <button> abschalten, sonst entsteht oben ein Rand */
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.ct-karte:hover { transform: translateY(-4px); border-color: var(--orange); }

.ct-karte[aria-selected="true"] { border-color: var(--orange); border-width: 2px; box-shadow: var(--shadow-card); }

/* Profilbild — bündig am oberen und an den seitlichen Kartenrändern */
.ct-avatar {
  display: block;                 /* als <span> sonst inline, dadurch weißer Rand */
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  line-height: 0;                 /* kein Zeilenabstand unter dem Bild */
  font-size: 0;
  background: linear-gradient(150deg, var(--cream), var(--beige));
  border-radius: 0;
}

.ct-avatar img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;       /* Gesicht leicht oberhalb der Mitte */
  margin: 0; border: 0;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

.ct-karte:hover .ct-avatar img { transform: scale(1.04); }

.ct-body { padding: 16px 17px 19px; display: block; }

.ct-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.06rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.25;
  margin-bottom: 6px;
}

.ct-kurz {
  display: block;
  font-family: var(--sans);
  font-size: 0.79rem; font-weight: 400;
  color: var(--warm-grey); line-height: 1.45;
}

.ct-karte[aria-selected="true"] .ct-kurz { color: var(--orange-dark); }


@media (min-width: 1001px) and (max-width: 1200px) {

  .case-tabs-neu { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

/* Case-Inhalt */
.case-neu {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.case-neu[hidden] { display: none; }

.cn-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px; align-items: start;
  padding: clamp(26px, 3vw, 42px) clamp(24px, 3vw, 44px);
  border-bottom: 1px solid rgba(90,60,35,0.09);
}

.cn-stufe {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 12px;
}

.cn-name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.05rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.2; margin-bottom: 10px;
}

.cn-zitat {
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem);
  color: #5F4E42; line-height: 1.55; max-width: 56ch;
  margin-bottom: 14px;
}

.cn-ziel { font-family: var(--sans); font-size: 0.93rem; color: #6B5B4F; line-height: 1.65; max-width: 60ch; }

.cn-zahlen { display: flex; flex-wrap: wrap; gap: 0; }

.cn-zahl {
  padding: 10px 20px; border-left: 1px solid rgba(90,60,35,0.12);
  text-align: right; min-width: 120px;
}

.cn-zahl:first-child { border-left: none; }

.cn-zahl .cnz-label {
  font-family: var(--sans); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 5px;
}

.cn-zahl .cnz-wert { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--charcoal); line-height: 1; }

.cn-body { padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(28px, 3vw, 42px); }

.cn-label {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--orange-dark); margin: 32px 0 16px;
  display: flex; align-items: center;
}

.cn-label:first-child { margin-top: 0; }

/* Grafikfläche */
.cn-grafik { margin-top: 8px; }

.cn-grafik svg { width: 100%; height: auto; display: block; overflow: visible; }


@media (max-width: 700px) {

  .cn-kopf { grid-template-columns: 1fr; }

  .cn-zahlen { width: 100%; }

  .cn-zahl { flex: 1 1 110px; text-align: left; padding: 10px 14px; }

  .cn-zahl:first-child { padding-left: 0; }

}

/* Vorher / Nachher im Case */
.cn-wandel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center; margin-top: 8px;
}


@media (max-width: 760px) {

  .cn-wandel { grid-template-columns: 1fr; }

}

.cn-schluss {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.8rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.32; letter-spacing: -0.01em;
  margin: 30px 0 26px;
}

.cn-fuss { font-family: var(--sans); font-size: 0.8rem; color: var(--warm-grey); margin-top: 12px; }


@media (prefers-reduced-motion: reduce) {

  .cn-grafik svg .wachs { animation: none !important; stroke-dashoffset: 0 !important; }

}

/* Begründung statt Vorher/Nachher */
.cn-begruendung {
  font-family: var(--sans); font-size: 0.97rem;
  color: #5F4E42; line-height: 1.7;
  background: var(--cream); border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 20px 24px; margin: 0;
  max-width: 74ch;
}

/* Ehrliche Einordnung */
.cn-ehrlich {
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.22rem);
  color: var(--charcoal); line-height: 1.6;
  padding-left: 20px; border-left: 3px solid var(--orange);
  margin: 26px 0 0; max-width: 70ch;
}

/* ---------------------------------------------------------
   BERATUNGSFÄLLE — Auswahl statt Vorauswahl
   --------------------------------------------------------- */

.case-aufforderung { margin: clamp(26px, 3vw, 40px) 0 clamp(16px, 1.8vw, 24px); }

/* Karte reagiert auf Hover, ohne den Fall zu wechseln */
.ct-karte { cursor: pointer; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }

.ct-karte:hover { border-color: var(--orange-light); }

.ct-karte .ct-avatar img { transition: transform 0.4s cubic-bezier(.4,0,.2,1); }

.ct-karte:hover .ct-avatar img { transform: scale(1.03); }

.ct-karte:hover .ct-kurz { color: var(--orange-dark); }

.ct-karte:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Kopfzeile und Satz gehören der mobilen Karte. Auf dem Desktop stehen
   fünf Karten nebeneinander — dort bleibt der kurze Text von früher. */
.ct-kopf, .ct-satz { display: none; }

.ct-mehr {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.76rem; font-weight: 600;
  color: var(--orange-dark);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ct-karte:hover .ct-mehr,
.ct-karte:focus-visible .ct-mehr,
.ct-karte[aria-selected="true"] .ct-mehr { opacity: 1; transform: none; }

.ct-karte[aria-selected="true"] .ct-mehr { color: var(--white); }

/* Detailbereich sanft einblenden */
.case-neu {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.4,0,.2,1);
}

.case-neu.ist-da { opacity: 1; transform: none; }

.case-neu[hidden] { display: none; }

/* Leiste über dem Fall: blättern und schließen */
.cn-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid rgba(90,60,35,0.12);
}

.cn-blaettern, .cn-schliessen {
  background: none; border: none; padding: 4px 0;
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.cn-blaettern { color: #5F4E42; }

.cn-blaettern:hover { color: var(--orange-dark); border-bottom-color: var(--orange); }

.cn-schliessen { color: var(--warm-grey); }

.cn-schliessen:hover { color: var(--charcoal); border-bottom-color: rgba(90,60,35,0.3); }

.cn-blaettern:focus-visible, .cn-schliessen:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px;
}


@media (min-width: 1001px) {

  .case-tabs-neu.ist-kompakt { margin-bottom: clamp(20px, 2.2vw, 30px); }

}


@media (max-width: 1000px) {

  .case-tabs-neu {
      display: grid;
      /* DIESE ZEILE IST DER GANZE PUNKT.

         Die Grundregel oben setzt grid-template-columns: repeat(5, …).
         Solange die steht, wird grid-auto-columns IGNORIERT — und aus dem
         Slider werden wieder fünf gequetschte Spalten.

         Ich hatte genau diesen Fehler weiter oben in dieser Datei schon
         einmal beschrieben und bin trotzdem hineingelaufen. Deshalb steht
         er jetzt hier, an der Stelle, an der er zählt. */
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 84%;
      gap: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--rand, 20px);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* über die Containerkante hinaus, damit rechts angeschnitten wird */
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: 4px var(--rand, 20px) 14px;
    }

  .case-tabs-neu::-webkit-scrollbar { display: none; }

  .case-tabs-neu .ct-karte { scroll-snap-align: start; }

  .ct-mehr { opacity: 1; transform: none; }

  /* -----------------------------------------------------------------
       EINE KARTE, NICHT FÜNF

       Fünf Karten nebeneinander sind eine Desktop-Form. Auf 390 px blieben
       davon rund 259 px pro Karte — der Name brach um, die Beschreibung
       zerfiel in Wortfetzen. Das sah nicht nach Auswahl aus, sondern nach
       einem Layout, das nicht mitgekommen ist.

       Jetzt liegt eine große Karte vorn und rechts sind rund 11 % der
       nächsten zu sehen. Der Anschnitt ist kein Zufall: Er ist der Grund,
       warum man wischt, ohne dass es jemand hinschreiben muss.

       85 % Breite plus 12 px Abstand ergibt auf einem 390-px-Gerät:
         Spalte 350 px · Karte 297 px · nächste ab 309 px → 41 px sichtbar
       ----------------------------------------------------------------- */
    .case-tabs-neu { grid-auto-columns: 85%; }

  .ct-karte {
      border-radius: var(--r);
      border-width: 1px;
    }

  .ct-karte[aria-selected="true"] { border-width: 1.5px; }

  /* Großes Querformat. Es trägt die Karte — man erkennt eine Person,
       bevor man ein Wort gelesen hat. */
    .ct-avatar { aspect-ratio: 16 / 9; }

  .ct-body { padding: 18px 20px 20px; }

  /* Wer. Klein und zurückhaltend, es ist die Zuordnung, nicht die
       Aussage. */
    .ct-name {
      font-family: var(--sans);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--orange-dark);
      margin-bottom: 8px;
    }

  /* Der Kurztext des Desktops entfällt — die Kopfzeile sagt dasselbe
       konkreter. */
    .ct-kurz { display: none; }

  .ct-kopf {
      display: block;
      font-family: var(--serif);
      font-size: 1.16rem;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.015em;
      color: var(--charcoal);
      margin-bottom: 8px;
    }

  .ct-satz {
      display: block;
      font-family: var(--sans);
      font-size: 0.87rem;
      line-height: 1.55;
      color: #5F4E42;
    }

  /* Auf dem Handy gibt es kein Hover. „Fall ansehen" muss deshalb von
       Anfang an dastehen, sonst sieht die Karte aus wie ein Bild mit Text. */
    .ct-mehr {
      opacity: 1;
      transform: none;
      margin-top: 14px;
      font-size: 0.82rem;
    }

  .ct-karte[aria-selected="true"] .ct-kopf,
    .ct-karte[aria-selected="true"] .ct-satz { color: inherit; }

}


@media (max-width: 380px) {

  .case-tabs-neu { grid-auto-columns: 87%; }

  .ct-body { padding: 16px 17px 18px; }

  .ct-kopf { font-size: 1.08rem; }

}


@media (prefers-reduced-motion: reduce) {

  .case-neu { transition: none; opacity: 1; transform: none; }

  .ct-karte .ct-avatar img { transition: none; }

  .ct-karte:hover .ct-avatar img { transform: none; }

}

/* =========================================================================
   BERATUNGSFÄLLE — mobiler Slider
   -------------------------------------------------------------------------
   Die Nutzerin muss auf einen Blick sehen, dass es mehr als eine Karte
   gibt. Dafür sorgen drei Dinge zusammen: der Anschnitt der nächsten
   Karte, ein Zähler und Punkte.
   ========================================================================= */

.case-slider-leiste {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 clamp(18px, 2vw, 26px);
}


@media (max-width: 1000px) {

  .case-slider-leiste { display: flex; }

}

.csl-zaehler {
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600;
  color: var(--warm-grey);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.csl-zaehler b { color: var(--charcoal); }

.csl-punkte { display: flex; gap: 7px; align-items: center; }

.csl-punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(90,60,35,0.22);
  border: none; padding: 0; cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
  position: relative;
}

/* Die Punkte sind klein, die Klickfläche ist es nicht. */
.csl-punkt::before {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

.csl-punkt[aria-current="true"] { background: var(--orange); width: 22px; border-radius: 100px; }

.csl-wisch {
  font-family: var(--sans); font-size: 0.76rem; color: var(--warm-grey);
  display: inline-flex; align-items: center; gap: 6px; flex: none;
}


@media (max-width: 420px) {

  .csl-wisch { display: none; }

}


@media (prefers-reduced-motion: reduce) {

  .csl-punkt { transition: none; }

}

/* =========================================================================
   DESKTOP: DREI SICHTBAR, DER REST ZUM WISCHEN

   Fünf Karten nebeneinander waren auf der Startseite in Ordnung — dort
   ist die Sektion breit und die Karten sind die Hauptsache.

   Auf der Beratungsseite stehen sie zwischen anderen Abschnitten. Fünf
   Spalten machen daraus Miniaturen: Bei 1140 px Containerbreite bleiben
   pro Karte 216 px, und ein Foto von 216 px ist keine Person mehr,
   sondern ein Icon.

   Deshalb dort drei sichtbare Karten und ein vierter Anschnitt. Der
   Slider ist derselbe wie auf dem Handy, nur mit anderer Kartenbreite —
   kein zweiter Mechanismus.
   ========================================================================= */

@media (min-width: 1001px) {
  body[data-seite="beratung"] .case-tabs-neu {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 16px) / 3.25);
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: none;
    padding-bottom: 10px;
  }
  body[data-seite="beratung"] .case-tabs-neu::-webkit-scrollbar { display: none; }
  body[data-seite="beratung"] .case-tabs-neu .ct-karte { scroll-snap-align: start; }

  /* Auf der Beratungsseite steht die längere Kopfzeile statt des
     Kurztexts — es ist Platz dafür, und sie sagt mehr. */
  body[data-seite="beratung"] .ct-kurz { display: none; }
  body[data-seite="beratung"] .ct-kopf {
    display: block;
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--charcoal);
    margin-bottom: 8px;
  }
  body[data-seite="beratung"] .ct-satz {
    display: block;
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.55;
    color: #5F4E42;
  }
  body[data-seite="beratung"] .ct-mehr { opacity: 1; transform: none; margin-top: 12px; }
  body[data-seite="beratung"] .ct-avatar { aspect-ratio: 16 / 10; }

  /* Zähler und Punkte sind dort auch auf dem Desktop nützlich. */
  body[data-seite="beratung"] .case-slider-leiste { display: flex; }
}