/* ============================================================
   mahnbescheid - Erfahrungen (/erfahrungen/)

   Seit dem 24.09.2026 nach Entwurf E: Kopf mit den Portalen, die
   Zusammenfassung auf der zweiten Fläche, der Antragskasten, die Liste
   im Wortlaut, darunter Fließtext in der Prosa-Typografie der Seiten
   (.page-prose-body aus landing.css). Wird nur auf der Vorlage
   page-erfahrungen.php geladen.

   Eine Farbe als Akzent, und die sitzt auf Schaltflächen, Balken und
   Eyebrow - keine grüne Fläche, kein Farbbalken über einem Kasten. So
   hält es ratgeber.css beim Antragskasten, und aus demselben Grund: Ein
   eingefärbter Kasten liest sich als Produktkachel.
   ============================================================ */

/* --- Abstände ------------------------------------------------------------
   landing.css setzt `section.section{ padding: 40px 0 }`, und das ist
   spezifischer als eine einzelne Klasse. Deshalb hier mit `section.`: ein
   Takt von 48 px für jeden Abschnitt, 32 px auf dem Telefon. Der Aufruf
   zum Antrag hat keinen eigenen Abstand, er sitzt zwischen zwei Abschnitten
   und nimmt deren Luft. */

section.erf-kopf{ padding: 44px 0 48px; }
section.erf-band, section.erf-mv-band, section.erf-liste-band{ padding: 48px 0; }
/* Der Aufruf hat ein eigenes helles Band: mittig und frei zwischen zwei
   linksbündigen Abschnitten wirkte er unruhig. */
section.erf-antrag-band{
  padding: 40px 0;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft);
}

/* --- Kopf --------------------------------------------------------------- */

.erf-kopf-raster{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px; align-items: start;
}

.erf-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-primary-700);
  margin-bottom: 12px;
}
.erf-eyebrow::before{ content: ""; width: 22px; height: 2px; background: var(--c-primary); }

.erf-kopf h1{
  font-size: 35px; line-height: 1.15; letter-spacing: -.015em; font-weight: 600;
  color: var(--c-ink); margin: 0 0 32px; max-width: none;
}
.erf-lede{ font-size: 17px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 12px; }
.erf-stand{ font-size: 13.5px; color: var(--c-muted); margin: 0; }
.erf-stand a{ color: var(--c-primary-700); }
.erf-trenner{ margin: 0 4px; color: var(--c-line); }

.erf-kopf-aktion{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 20px 0 0; }

/* Portale: eine Karte je Portal */
.erf-portale{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.erf-portal{
  background: #fff; border: 1px solid var(--c-line);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.erf-portal-name{ font-size: 13.5px; font-weight: 600; color: var(--c-ink); }
/* Zahl und Sterne untereinander, in jeder Kachel: Nebeneinander brach
   „4,93" um und „3,8" nicht - drei Kacheln, zwei Anordnungen. */
.erf-portal-note{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.erf-portal-zahl{ font-size: 32px; line-height: 1; letter-spacing: -.015em; font-weight: 600; color: var(--c-ink); }
.erf-portal-anzahl{ font-size: 14px; color: var(--c-ink-soft); }
.erf-portal-link{
  margin-top: auto; padding-top: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--c-primary-700);
}
.erf-portal-link::after{ content: " →"; font-weight: 400; }
.erf-portal-link:hover{ text-decoration: underline; }

/* Sterne: zwei Reihen übereinander, die volle auf den Anteil beschnitten */
.erf-sterne{ position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.erf-sterne-leer, .erf-sterne-voll{ display: inline-flex; gap: 3px; }
.erf-sterne-leer{ color: var(--c-line); }
.erf-sterne-voll{
  position: absolute; left: 0; top: 0;
  overflow: hidden; white-space: nowrap;
  color: var(--c-star);
}
.erf-sterne svg{ display: block; flex: 0 0 16px; }

/* --- Überschriften und Erläuterung -------------------------------------- */

.erf-h2{
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; line-height: 1.25; letter-spacing: -.005em; font-weight: 600;
  color: var(--c-ink); margin: 0 0 20px;
}

/* Das „i": dasselbe Zeichen wie die Hilfe im Bestellformular (/beantragen/),
   eine Grafik in der Akzentfarbe ohne Fläche. Die Blase öffnet
   erfahrungen.js auf Klick; ohne Skript beim Fokus. */
.erf-tipp{ position: relative; display: inline-flex; align-items: center; }
.erf-tipp-mark{
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--c-primary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.erf-tipp-mark svg{ display: block; width: 16px; height: 16px; }
/* Überschrift und Zeichen teilen sich eine Zeile, das Zeichen steht aber
   neben dem <h2>, nicht darin: Bis zum 04.10.2026 gehörte der Text der Blase
   zur Überschrift („Was Gläubiger hervorheben Erläuterung Die Zuordnung …").
   Die Blase hängt an der Zeile, nicht am Zeichen: Das steht am Zeilenende,
   und von dort lief sie auf dem Telefon bis zu 230 px rechts aus dem Bild
   (bis zum 25.09.2026). */
.erf-h2-zeile{ position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.erf-h2-zeile .erf-h2{ margin: 0; }
.erf-h2-zeile .erf-tipp{ position: static; }
.erf-h2-zeile .erf-tipp-text{ width: auto; max-width: 420px; right: 0; }
.erf-tipp-mark:hover{ color: var(--c-primary-700); }
.erf-tipp-mark:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--c-primary-100); }
.erf-tipp-text{
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 10;
  width: 300px; max-width: calc(100vw - 32px); padding: 12px 14px;
  background: #fff; color: var(--c-ink-soft); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(0,0,0,.18);
  font-size: 13px; line-height: 1.55; font-weight: 400; letter-spacing: 0;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .15s, visibility 0s linear .15s;
}
.erf-tipp-mark[aria-expanded="true"] + .erf-tipp-text,
.erf-tipp:not(.is-js) .erf-tipp-mark:focus + .erf-tipp-text{
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .15s, visibility 0s;
}

/* --- Zusammenfassung ---------------------------------------------------- */

.erf-band{
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.erf-themen{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.erf-thema{
  background: #fff; border: 1px solid var(--c-line);
  padding: 24px; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.erf-thema-titel{ font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--c-ink); margin: 0; }
.erf-thema-zahl{ font-size: 14px; color: var(--c-ink-soft); margin: -6px 0 0; }
.erf-thema-zahl strong{ font-weight: 600; color: var(--c-ink); }
.erf-balken{ height: 6px; background: var(--c-line-soft); }
.erf-balken span{ display: block; height: 6px; background: var(--c-primary); }
.erf-zitat{ margin: 0; padding-left: 14px; border-left: 3px solid var(--c-primary-100); }
.erf-zitat blockquote{ margin: 0 0 6px; padding: 0; border: 0; font-size: 15px; line-height: 1.55; color: var(--c-ink); overflow-wrap: anywhere; }
.erf-zitat figcaption{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--c-muted); }
.erf-zitat figcaption .erf-sterne svg{ width: 13px; height: 13px; flex-basis: 13px; }

/* --- Wer dahinter steht: drei Nachweise nebeneinander ------------------ */

/* Unter den Kästen zum Mahnverfahren: Die nehmen die Luft oben mit. */
section.erf-serioes-band{ padding: 0 0 48px; }
.erf-serioes-text{ max-width: 72ch; margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }
.erf-nachweise{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.erf-nachweis{
  background: #fff; border: 1px solid var(--c-line); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.erf-nachweis-etikett{ font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.erf-nachweis-wert{ font-size: 16px; font-weight: 600; color: var(--c-ink); }
.erf-nachweis-quelle{ font-size: 13.5px; line-height: 1.5; color: var(--c-ink-soft); overflow-wrap: anywhere; }
.erf-nachweis-kennung{ white-space: nowrap; }
.erf-serioes-mehr{ margin: 16px 0 0; font-size: 14px; }
.erf-serioes-mehr a{ font-weight: 600; color: var(--c-primary-700); text-decoration: none; }
.erf-serioes-mehr a::after{ content: " →"; font-weight: 400; }
.erf-serioes-mehr a:hover{ text-decoration: underline; }

/* --- Mahnverfahren: vier Kästen, Linie in Tinte oben wie die Kapitel ---- */

.erf-mv{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px;
}
.erf-mv-punkt{ border-top: 1px solid var(--c-line); padding-top: 18px; min-width: 0; }
/* Das Zeichen steht vor der Überschrift, in ihrer Zeile - allein darüber
   wirkte es losgelöst. */
.erf-mv-zeichen{
  flex: 0 0 30px; display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r-md); background: var(--c-primary-050); color: var(--c-primary);
}
.erf-mv-zeichen svg{ width: 18px; height: 18px; }
.erf-mv-punkt h3{ display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--c-ink); margin: 0 0 10px; }
.erf-mv-punkt p{ font-size: 15.5px; line-height: 1.6; color: var(--c-ink-soft); margin: 0; }

/* --- Antragskasten: wie .rg-cta ----------------------------------------- */

/* Die Grundform kommt aus landing.css (.section-cta, .section-cta-zeile):
   zentriert, ohne Kasten, wie der Aufruf unter den Abschnitten der
   Startseite. Hier nur der Satz darunter und Abstand. */
.erf-antrag{ margin: 0; gap: 10px; }
.erf-antrag-text{ margin: 0 0 6px; max-width: 60ch; text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-soft); }
.erf-antrag-text a{ color: var(--c-primary-700); }

/* --- Liste im Wortlaut -------------------------------------------------- */

.erf-liste-band .erf-h2-zeile{ margin-bottom: 12px; }
.erf-liste-leiste{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  border-bottom: 1px solid var(--c-ink);
}
.erf-filter{ display: flex; gap: 4px; }
.erf-filter[hidden]{ display: none; }
.erf-filter-knopf{
  font: 500 14.5px/1.2 "IBM Plex Sans", sans-serif;
  min-height: 44px; padding: 12px 12px 10px; margin-bottom: -1px; cursor: pointer;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: none; color: var(--c-ink-soft);
}
.erf-filter-knopf:first-child{ padding-left: 0; }
.erf-filter-knopf span{ font-weight: 400; color: var(--c-muted); }
.erf-filter-knopf:hover{ color: var(--c-ink); }
.erf-filter-knopf[aria-pressed="true"]{ border-bottom-color: var(--c-primary); color: var(--c-ink); }
.erf-filter-knopf:focus-visible{ outline: none; box-shadow: inset 0 0 0 3px var(--c-primary-100); }

.erf-aufklappen{
  background: none; border: 0; cursor: pointer; padding: 12px 0; min-height: 44px; white-space: nowrap;
  font: 500 13.5px/1.2 "IBM Plex Sans", sans-serif; color: var(--c-primary-700);
}
.erf-aufklappen[hidden]{ display: none; }

.erf-liste{ list-style: none; margin: 0; padding: 0; }
.erf-zeile{ border-bottom: 1px solid var(--c-line-soft); }
.erf-zeile[hidden]{ display: none; }
.erf-z-kopf{
  display: grid; grid-template-columns: 100px 150px 140px minmax(0, 1fr) 180px 20px;
  gap: 16px; align-items: center;
  padding: 14px 0; min-height: 48px;
  font-size: 14px; line-height: 1.4; color: var(--c-ink);
}
summary.erf-z-kopf{ cursor: pointer; list-style: none; }
summary.erf-z-kopf::-webkit-details-marker{ display: none; }
summary.erf-z-kopf::after{ content: "+"; font-size: 18px; font-weight: 600; color: var(--c-primary); text-align: right; }
details[open] > summary.erf-z-kopf::after{ content: "−"; }
summary.erf-z-kopf:focus-visible{ outline: none; box-shadow: inset 0 0 0 3px var(--c-primary-100); }
.erf-z-datum, .erf-z-portal{ color: var(--c-muted); }
.erf-z-sterne{ white-space: nowrap; }
.erf-z-sterne .erf-sterne svg{ width: 14px; height: 14px; flex-basis: 14px; }
.erf-z-note{ font-size: 13px; color: var(--c-ink-soft); margin-left: 4px; }
.erf-z-titel{ font-weight: 600; overflow-wrap: anywhere; }
.erf-z-kopf.is-ohne-text .erf-z-titel{ font-weight: 400; font-style: italic; color: var(--c-muted); }
.erf-z-name{ color: var(--c-ink-soft); overflow-wrap: anywhere; }
.erf-z-text{
  margin: 0 0 18px calc(100px + 150px + 140px + 48px);
  max-width: 64ch; padding: 0; border: 0;
  font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); overflow-wrap: anywhere;
}

/* Unsere Antwort unter der Bewertung, eingerückt wie der Text und hinter
   einer Linie in der Akzentfarbe - eine Erwiderung, kein zweiter Kasten. */
.erf-z-antwort{
  margin: 0 0 18px calc(100px + 150px + 140px + 48px);
  max-width: 64ch; padding-left: 14px; border-left: 3px solid var(--c-primary);
}
.erf-z-antwort-label{
  margin: 0 0 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-primary-700);
}
.erf-z-antwort p:last-child{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); overflow-wrap: anywhere; }
.erf-z-beantwortet{ margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--c-muted); white-space: nowrap; }

.erf-profile{ margin: 18px 0 0; font-size: 14px; color: var(--c-ink-soft); }
.erf-profile a{ color: var(--c-primary-700); }

/* --- Text --------------------------------------------------------------- */

.erf-textband{ padding: 40px 0 8px; }
.erf-text{ max-width: 72ch; }
.erf-text h2:first-child{ margin-top: 0; }
/* Sprungziel unter dem mitlaufenden Kopf frei halten */
.erf-text h2[id], .erf-h2[id]{ scroll-margin-top: 24px; }

/* --- Schmal ------------------------------------------------------------- */

@media (max-width: 1024px){
  .erf-kopf-raster{ grid-template-columns: 1fr; gap: 28px; }
  .erf-z-kopf{ grid-template-columns: 96px 130px minmax(0, 1fr) 20px; }
  .erf-z-portal, .erf-z-name{ display: none; }
  .erf-z-text, .erf-z-antwort{ margin-left: 0; }
}
@media (max-width: 900px){
  .erf-themen, .erf-mv, .erf-nachweise{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  section.erf-kopf{ padding: 28px 0 32px; }
  section.erf-band, section.erf-mv-band, section.erf-liste-band{ padding: 32px 0; }
  section.erf-serioes-band{ padding: 0 0 32px; }
  .erf-kopf h1{ font-size: 26px; margin-bottom: 20px; }
  .erf-lede{ font-size: 16px; }
  .erf-portale{ grid-template-columns: 1fr; gap: 0; }
  .erf-portal{ padding: 14px 16px; border-top-width: 0; }
  .erf-portal:first-child{ border-top-width: 1px; }
  .erf-portal-zahl{ font-size: 24px; }
  .erf-thema{ padding: 18px; }
  .erf-liste-leiste{ flex-direction: column; align-items: stretch; gap: 0; }
  .erf-filter{ overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
  .erf-filter-knopf{ white-space: nowrap; }
  .erf-aufklappen{ align-self: flex-end; order: -1; padding: 0 0 4px; min-height: 32px; }
  /* Die Zeile stapelt: Sterne, Titel, dann Name · Portal · Datum */
  .erf-z-kopf{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; padding: 14px 28px 14px 0; position: relative; }
  .erf-z-sterne{ order: 1; flex: 0 0 100%; }
  .erf-z-titel{ order: 2; flex: 0 0 100%; font-size: 15px; }
  .erf-z-name, .erf-z-portal, .erf-z-datum{ display: inline; font-size: 12.5px; color: var(--c-muted); }
  .erf-z-name{ order: 3; }
  .erf-z-portal{ order: 4; }
  .erf-z-datum{ order: 5; }
  .erf-z-portal::before, .erf-z-datum::before{ content: "·"; margin: 0 6px; color: var(--c-line); }
  summary.erf-z-kopf::after{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .erf-textband{ padding: 32px 0 4px; }
}