/* WiA Akkordeon.
   Optik 1:1 vom bisherigen Xpro-Akkordeon uebernommen (gemessen am
   24.08.2026 auf /seniorengerechtes-quartiersmanagement/), damit der
   Austausch auf den Seiten optisch nicht auffaellt:

     Abstand zwischen Eintraegen   13px, innerhalb eines Eintrags 0
     Kopf zu                       #efefef, Radius 8px rundum
     Kopf auf                      var(--primary-light), Radius nur oben
     Rahmen                        2px solid var(--primary), Kopf rundum,
                                   Inhalt ohne Oberkante (bildet eine Karte)
     Titel                         var(--text-l), Gewicht 400, var(--base-dark)
     Inhalt                        Padding 5px 15px 15px, var(--text-m), 1.7

   Kontrast geprueft: #404040 auf #efefef 9,0:1, auf #f7e1bb 8,1:1.
   Abweichungen gegenueber dem Original sind ausschliesslich die
   Barrierefreiheitszutaten: echter Knopf, Fokusring, Mindesthoehe. */

.wia-akkordeon {
  display: flex;
  flex-direction: column;
  gap: 13px;
  /* Fuellt den Container auch dann, wenn er ein Flex-Container mit
     align-items:flex-start ist. Ohne das schrumpft das Akkordeon auf die
     Breite seines Inhalts und wird beim Aufklappen sichtbar breiter. */
  inline-size: 100%;
  /* Und die Eintraege fuellen das Akkordeon: Bricks setzt auf seinen
     Elementhuellen align-items, sonst ist jeder Eintrag nur so breit
     wie sein Titel. */
  align-items: stretch;
}

/* Kopf und Inhalt bilden zusammen eine Karte, deshalb kein Abstand. */
.wia-akkordeon__eintrag {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: 100%;
}

.wia-akkordeon__titel {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.wia-akkordeon__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  inline-size: 100%;
  /* Zielgroesse: 15px Padding plus Zeilenhoehe ergibt rund 56px */
  min-block-size: 44px;
  padding: 15px;
  background: #efefef;
  border: 2px solid var(--primary, #906111);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  /* Der Titel steht in einer Ueberschrift, soll aber nicht die
     Ueberschriftenschrift (Lora) erben: das Original setzt hier
     ausdruecklich SchibstekGrotesk. */
  font-family: SchibstekGrotesk, Inter, system-ui, sans-serif;
  font-size: var(--text-l, 2.025rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--base-dark, #404040);
}

.wia-akkordeon__knopf[aria-expanded="true"] {
  background: var(--primary-light, #f7e1bb);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Hover: gefuelltes Braun mit weisser Schrift, wie die Filter auf
   /beratungsschwerpunkte/steckbriefe-der-guten-ideen/. Steht bewusst NACH
   der Auf-Regel, damit ein aufgeklappter Eintrag beim Zeigen ebenfalls
   umschlaegt. Weiss auf --primary ergibt 5,4:1, also AA erfuellt;
   --primary-hover waere mit 4,2:1 zu hell. */
.wia-akkordeon__knopf:hover {
  background: var(--primary, #906111);
  color: #fff;
}

.wia-akkordeon__knopf:hover .wia-akkordeon__zeichen {
  color: #fff;
}


/* Der Fokusring liegt innen, damit er den 2px-Rahmen nicht verdeckt. */
.wia-akkordeon__knopf:focus-visible {
  outline: 3px solid var(--base-ultra-dark, #1a1a1a);
  outline-offset: -6px;
}

.wia-akkordeon__titeltext {
  /* Lange Titel brechen um statt auszubrechen (Reflow 320 px) */
  overflow-wrap: anywhere;
}

.wia-akkordeon__zeichen {
  flex: 0 0 auto;
  inline-size: 25px;
  block-size: 25px;
  color: var(--base-dark, #404040);
}

@media (prefers-reduced-motion: no-preference) {
  .wia-akkordeon__zeichen {
    transition: transform 0.2s ease;
  }
}

.wia-akkordeon__knopf[aria-expanded="true"] .wia-akkordeon__zeichen {
  transform: rotate(180deg);
}

/* Setzt die Karte nach unten fort: Rahmen ohne Oberkante. */
.wia-akkordeon__inhalt {
  border: 2px solid var(--primary, #906111);
  border-block-start: 0;
  border-end-start-radius: 8px;
  border-end-end-radius: 8px;
}

/* Zugeklappt darf der Rahmen nicht sichtbar bleiben: hidden="until-found"
   haelt den Kasten im Layout (Hoehe 0), seine Seitenrahmen wuerden sonst als
   Strich unter dem Kopf stehen. */
.wia-akkordeon__inhalt[hidden] {
  border-width: 0;
}

.wia-akkordeon__inhalt[hidden=""] {
  display: none;
}

/* hidden="until-found" laesst der Browser als content-visibility stehen;
   display:none wuerde die Browsersuche wieder aushebeln. */
.wia-akkordeon__inhalt[hidden="until-found"] {
  display: block;
}

.wia-akkordeon__innen {
  padding: 5px 15px 15px;
  font-size: var(--text-m, 1.8rem);
  line-height: 1.7;
  color: var(--base-dark, #404040);
}

.wia-akkordeon__innen > :first-child {
  margin-block-start: 0;
}

.wia-akkordeon__innen > :last-child {
  margin-block-end: 0;
}

.wia-akkordeon__innen a {
  overflow-wrap: anywhere;
}