/* ==============================================================
   ergaenzung.css  ·  Besitzer: P7 Leistungsseiten  ·  v4 „Passer“ (25.09.2026)
   K44 Ergaenzungen als offene Liste (Plan 8.5). Markup: kh_ergaenzungen()
   in includes/zusatz-bausteine.php.
     <div class="l-ergaenzungen kapitel f-…">
       <section class="erg wrap"> .erg-kopf (.l-platte + H2 + .sub)
         <ul class="erg-liste" data-anzahl="N"> <li class="erg-eintrag"> H3 + p
   Kein Kasten: je Punkt nur der Fehlregister-Strich (Cyan 28x3, Magenta
   2 px versetzt) ueber dem Titel. Alle Abschnitte einer Seite bilden EIN
   Kapitel, getrennt nur durch Abstand (Plan 7: keine Haarlinien).
   Spalten nach Anzahl: 2 -> 2, 3 -> 3, 4 -> 2x2, 5 -> 3+2.

   Rueckbau v3 (25.09.2026): .erg-raster/.erg-punkt (Kaesten auf Box-Grau)
   entfallen, Markup gibt es nicht mehr.
   ============================================================== */
.l-ergaenzungen > .erg + .erg{margin-top:clamp(3.5rem, 2.4rem + 3.5vw, 6rem)}

.erg-kopf{display:flex;align-items:flex-start;gap:clamp(1rem, .8rem + 1vw, 1.5rem);margin:0 0 clamp(1.5rem, 1.2rem + 1vw, 2.25rem)}
.erg-kopf-txt{min-width:0}
.erg-kopf h2{margin:0 0 .5rem}
.erg-kopf .sub{max-width:60ch}
.erg .entwurf-hinweis{margin-bottom:1.5rem}

.erg-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.erg-eintrag{position:relative;min-width:0;padding-top:1.15rem}
.erg-eintrag::before{
  content:"";position:absolute;top:0;left:0;width:28px;height:3px;
  background-color:var(--platte);box-shadow:2px 2px 0 var(--haar);
}
.erg-eintrag h3{margin:0 0 .55rem;overflow-wrap:break-word;hyphens:auto}
.erg-eintrag p{margin:0;color:var(--muted);max-width:60ch}
.ohne-deko .erg-eintrag::before{display:none}

/* ab 48rem zwei Spalten fuer alle Anzahlen */
@media (min-width:48rem){
  .erg-liste{grid-template-columns:repeat(6,minmax(0,1fr))}
  .erg-eintrag{grid-column:span 3}
}
/* ab 64rem: 3 -> drei Spalten, 5 -> drei oben und zwei unten; 2 und 4 bleiben zweispaltig */
@media (min-width:64rem){
  .erg-liste[data-anzahl="3"] .erg-eintrag,
  .erg-liste[data-anzahl="5"] .erg-eintrag:nth-child(-n+3){grid-column:span 2}
}

/* ---- Nachbesserung 25.09.2026 (Jury Befunde 6, 8) --------------------
   H2 buendig auf der Inhaltskante (kein Piktogramm-Kopf, Plan 6).
   Einleitung = Beschriftung des Aufklappers; offen steht sie wie ein .sub. */
.erg-kopf{display:block;margin-bottom:.5rem}
.erg-kopf h2{margin:0}
.erg-summary{
  display:flex;align-items:flex-start;gap:.6rem;list-style:none;cursor:pointer;
  max-width:60ch;margin:0 0 clamp(1.5rem, 1.2rem + 1vw, 2.25rem);padding-block:.35rem;min-height:44px;
}
.erg-summary::-webkit-details-marker{display:none}
/* Pfeil nur, wo der Aufklapper geschlossen startet (unter 48rem) */
.erg-summary::after{
  content:"";flex:0 0 auto;width:.6rem;height:.6rem;margin-top:.45em;
  border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
  rotate:45deg;transition:rotate var(--t-kurz) var(--ease);
}
.erg-klapp[open] > .erg-summary::after{rotate:-135deg;margin-top:.7em}
.erg-klapp:not([open]) > .erg-summary{margin-bottom:0;color:var(--text)}
@media (min-width:48rem){
  .erg-summary{cursor:auto}
  .erg-summary::after{display:none}
  /* fix2: Kapitel mit data-zu klappen auch hier zu (kern.js) -> Pfeil und
     Zeiger zurueck, Abstand zum naechsten Kapitel kleiner, solange zu. */
  .erg-klapp[data-zu] > .erg-summary{cursor:pointer}
  .erg-klapp[data-zu] > .erg-summary::after{display:block}
}
/* fix2 (Jury Befund 9): Inhaber-Kapitel als Zweispalter mit Bild (Plan K61) */
.erg-person-bild{min-width:0;margin-bottom:1.25rem}
.erg-person-bild .bogen-bild img{aspect-ratio:4 / 3;object-fit:cover}
@media (min-width:56rem){
  .erg--person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(1.5rem, 1rem + 3vw, 4rem);align-items:start}
  .erg--person > *{grid-column:2;min-width:0}
  .erg--person > .erg-person-bild{grid-column:1;grid-row:1 / span 4;margin:0}
  /* in der schmaleren Textspalte untereinander statt drei enger Spalten */
  .erg--person .erg-liste{grid-template-columns:minmax(0,1fr)}
  .erg--person .erg-liste .erg-eintrag{grid-column:auto}
}
.l-ergaenzungen > .erg:has(> .erg-klapp:not([open])) + .erg{margin-top:clamp(2.25rem, 1.8rem + 1.5vw, 3rem)}
@media (hover:hover){
  .erg-klapp:not([open]) > .erg-summary:hover{color:var(--accent-text)}
}
@media (max-width:47.99rem){
  .l-ergaenzungen > .erg + .erg{margin-top:2.25rem}
}