/* apollo consulting: Zuordnung der CI-Token an den Baustein.
   Der Baustein selbst ist CI-neutral (Skill website-bauen,
   assets/bausteine/einklapper.css) — hier bekommt er die Farben dieses
   Projekts. Uebernommen am 21.08.2026 beim Bau von /klimaneutralitaet/,
   weil dort die erste FAQ-Liste mit mehr als sechs Fragen steht. */
.ek-block {
  --ek-grund: var(--surface-page);
  --ek-linie: var(--border-default);
  --ek-text: var(--color-brand);
}
.section-light .ek-block { --ek-grund: var(--surface-subtle); }
.section-dark .ek-block {
  --ek-grund: var(--surface-dark);
  --ek-linie: var(--border-on-dark);
  --ek-text: var(--color-accent-hi);
}

/* ===========================================================================
   EINKLAPPER — lange Bloecke auf Mobil kuerzen, ohne Inhalt zu verlieren
   ---------------------------------------------------------------------------
   Verwendung: ein Attribut am Block, sonst nichts.

     <div data-einklapper>  … langer Fliesstext …  </div>
     <div data-einklapper="faq">  … viele <details> …  </div>
     <div data-einklapper="immer"> … immer kuerzen, egal wie lang … </div>
     <div data-einklapper="aus">  … Laenge ist gewollt, Gate schweigt … </div>

   Den Schalter erzeugt einklapper.js selbst. Wer den Block schreibt, muss
   nichts weiter tun — genau daran ist das alte Muster gescheitert.

   Zwei Regeln, die den Unterschied machen:
   1. Gekuerzt wird per max-height, NICHT per display:none. Der Text laeuft
      unten weich aus und zeigt dadurch, dass mehr kommt. Das ist ein
      Bedienungs-Argument: hart abgeschnittener Text sieht aus wie zu Ende.
      (Fuer Google ist beides unkritisch, solange der Text im Quelltext
      steht — was zaehlt, ist: nichts per JS nachladen.)
   2. Ohne JavaScript passiert gar nichts: der Block steht vollstaendig da.
      Kein Zustand, in dem Inhalt unerreichbar ist.

   CI-neutral. Alle Farben kommen aus Custom Properties mit Fallback.
   =========================================================================== */

.ek-block {
  --ek-hoehe: 22rem;                                    /* sichtbarer Rest */
  --ek-grund: var(--color-bg, #fff);                    /* Farbe des Auslaufs */
  --ek-linie: var(--color-neon-1, currentColor);
  --ek-text: var(--color-dark-1, inherit);
}

/* Nur der eingeklappte Zustand kuerzt. Ohne die Klasse (kein JS, Desktop,
   zu kurzer Block) ist der Block voellig unangetastet. */
.ek-block.is-eingeklappt:not([data-einklapper="faq"]) > .ek-inhalt {
  max-height: var(--ek-hoehe);
  overflow: hidden;
  position: relative;
}

/* Der weiche Auslauf. Sitzt im Inhalt, nicht am Block — sonst legt er sich
   ueber den Schalter. Bei der FAQ-Variante gibt es keinen: dort werden ganze
   Fragen zurueckgehalten, nicht Text angeschnitten. */
.ek-block.is-eingeklappt:not([data-einklapper="faq"]) > .ek-inhalt::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 5.5rem;
  background: linear-gradient(to bottom, transparent, var(--ek-grund) 92%);
  pointer-events: none;
}

.ek-schalter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  padding: .6rem 1.15rem;
  min-height: 44px;                                     /* Touch-Target */
  background: transparent;
  border: 1.5px solid var(--ek-linie);
  border-radius: 999px;
  color: var(--ek-text);
  font: inherit;
  /* 16 px, nicht .95rem: unter 16 px meldet das Mobil-Gate Bedientext als
     zu klein — und ein Schalter, den man antippen soll, ist genau das. */
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.ek-schalter:hover { background: var(--ek-linie); }
.ek-schalter:focus-visible { outline: 2px solid var(--ek-linie); outline-offset: 3px; }

.ek-schalter .ek-pfeil { transition: transform .18s ease; }
.ek-block:not(.is-eingeklappt) .ek-schalter .ek-pfeil { transform: rotate(180deg); }

/* FAQ-Variante: ueberzaehlige Fragen ruhen, bis der Schalter sie holt.
   display:none ist hier richtig — eine halb angeschnittene Frage waere
   Unsinn, und der Text bleibt im Quelltext. */
.ek-block[data-einklapper="faq"].is-eingeklappt .ek-rest { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ek-schalter, .ek-schalter .ek-pfeil { transition: none; }
}