/**
 * PixelHobel – Aufklapper (Akkordeon)
 * =====================================================================
 * Ein Standard für alle Komponenten: derselbe Kasten, dieselbe Kopfzeile,
 * dasselbe Chevron rechts. Vorbild ist der Aufklapper der Fahrten-
 * verwaltung; hier ist er von der Komponente gelöst und um einen
 * Hover-Effekt ergänzt.
 *
 * Verwendung:
 *   <details class="phx-klapp">
 *     <summary><i class="fas fa-…"></i> Titel <span class="phx-badge">2</span></summary>
 *     <div class="phx-klapp__inhalt"> … </div>
 *   </details>
 *
 * Farbige Kante links: zusätzlich .phx-klapp--akzent.
 * Warnender Kasten:    zusätzlich .phx-klapp--warnung.
 * Ohne Inhaltsrahmen:  zusätzlich .phx-klapp--gepolstert (holt das seitliche
 *                      Polster nach, wenn der Inhalt nicht in einem
 *                      <div class="phx-klapp__inhalt"> steckt).
 */

.phx-klapp {
  margin: 0 0 .8rem;
  /* Kein Polster am Kasten, sondern an Kopfzeile und Inhalt: Nur so füllt
     die Kopfzeile den Kasten wirklich aus - sonst bliebe beim Überfahren
     links und rechts ein heller Streifen stehen.
     overflow schneidet die Tönung an den runden Ecken sauber ab. */
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ars-border, var(--ph-border, #d9dedf));
  border-radius: 8px;
  background: var(--ars-bg, var(--ph-card-bg, #fff));
  /* Grund UND Schriftfarbe zusammen setzen: Ein Kasten, der nur seinen
     Grund mitbringt, erbt die Schrift von außen - im dunklen Modus stünde
     die Überschrift dann dunkel auf dunkel. */
  color: var(--ars-text, var(--ph-text, inherit));
}

.phx-klapp > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem .9rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease;
}

.phx-klapp > summary::-webkit-details-marker { display: none; }

/* Das Chevron rechts macht den Kasten als Aufklapper erkennbar. Es wird
   gedreht, nicht getauscht: Zwei Symbole per display umzuschalten
   kollidiert mit der Font-Awesome-Regel. */
.phx-klapp > summary::after {
  content: '\f078';
  margin-left: auto;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .8em;
  opacity: .55;
  transition: transform .15s ease;
}

.phx-klapp[open] > summary::after { transform: rotate(180deg); }

/* Hover: Die ganze Kopfzeile hebt sich leicht ab - man sieht, dass sie
   anfassbar ist, ohne dass der Kasten springt. */
/* Getönt statt grau: Ein Grauschleier verschwindet auf hellem Grund fast,
   die Akzentfarbe ist in beiden Modi zu sehen. Die Schriftfarbe bleibt, wie
   sie ist - sonst kämen sich Bereiche mit eigener Kopffarbe (Akte, Warnung)
   und der Hover-Zustand ins Gehege. */
.phx-klapp > summary:hover { background: rgba(0, 150, 155, .09); }

.phx-klapp > summary:hover::after { opacity: .9; }

.phx-klapp:hover { border-color: var(--phk-akzent, var(--ph-secondary, #00969b)); }

/* Der Rahmen der Tastaturmarke liegt innen - außen würde ihn das
   overflow des Kastens abschneiden. */
.phx-klapp > summary:focus-visible {
  outline: 2px solid var(--phk-akzent, var(--ph-secondary, #00969b));
  outline-offset: -2px;
}

.phx-klapp__inhalt { padding: .2rem .9rem .9rem; }
.phx-klapp__inhalt > *:first-child { margin-top: 0; }
.phx-klapp__inhalt > *:last-child { margin-bottom: 0; }

/* Kästen ohne eigenen Inhaltsrahmen: Wo der Inhalt nicht in einem
   <div class="phx-klapp__inhalt"> steckt - etwa ein Formular, das direkt
   unter der Kopfzeile beginnt -, holt diese Variante das seitliche Polster
   nach. Sonst klebte der Inhalt am Rand, weil der Kasten selbst keines hat. */
.phx-klapp--gepolstert > *:not(summary) {
  margin-left: .9rem;
  margin-right: .9rem;
}

.phx-klapp--gepolstert > *:last-child { margin-bottom: .9rem; }

/* Farbige Kante links - für Bereiche, die zusammengehören. */
.phx-klapp--akzent { border-left: 4px solid var(--phk-akzent, var(--ph-secondary, #00969b)); }

.phx-klapp--warnung { border-color: var(--phk-err, var(--ph-primary, #94132f)); }
.phx-klapp--warnung > summary { color: var(--phk-err, var(--ph-primary, #94132f)); }

@media (prefers-reduced-motion: reduce) {
  .phx-klapp > summary,
  .phx-klapp > summary::after { transition: none; }
}