/* =====================================================================
   APG Ratgeber-Beitrag  ·  APG-05  ·  hand-codiert
   ---------------------------------------------------------------------
   Reuse: Tokens (--ink/--accent/--tint/--line/--wrap/--sec-pad), .apg-hub__wrap,
   .apg-hub__sec(--tint), .apg-hub__sec-title, .apg-hub__band, .apg-partner__faq
   kommen aus hub-lueftungssysteme.css bzw. partner.css und werden hier NICHT
   wiederholt. Der Wrapper ist .apg-hub.apg-art, damit die Tokens greifen.

   Wirklich neu ist nur .apg-art__prose: eine Typo-Schicht fuer FREMDES HTML
   aus dem post_content. Alle anderen Seiten des Themes bringen ihr Markup
   selbst mit — hier kommt es aus der Datenbank und muss von aussen gebaendigt
   werden (Median 12 h2, 97 % mit Tabelle, gemessen 09.09.2026).
   ===================================================================== */

.apg-art { background: var(--panel); }

/* ---- R1 Brotkrume ---- */
.apg-art__crumb { padding: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.apg-art__crumb a { color: var(--muted); text-decoration: none; }
.apg-art__crumb a:hover { color: var(--accent-ink); }
.apg-art__crumb span { opacity: .5; margin: 0 2px; }

/* ---- R2 Bildband, gerandet wie vor dem full-bleed-Versuch (Tim, 10.09.):
       gleiche Breite wie der uebrige Inhalt (--wrap 1200 minus 2x28 Innenabstand),
       Hoehe der fruehen Fassung + 20 %:
         130px -> 156px | 17vw -> 20.4vw | 230px -> 276px   (jeweils x 1,2)
       Daraus: 1440 px Viewport -> Band 1144 x 276 = 4,14:1
               375 px Viewport -> Band  319 x 156 = 2,04:1
       Die groesste Anzeigebreite ist damit 1144 px, unabhaengig vom Viewport —
       das ist die Zahl, an der die Bildschaerfe haengt.
       Kein Scrim, kein Verlauf, keine Schrift im Bild; `object-position` je Bild. ---- */
.apg-art__band { margin: 18px auto 0; max-width: var(--wrap); padding: 0 28px; }
.apg-art__band img { display: block; width: 100%; height: clamp(156px, 20.4vw, 276px);
  object-fit: cover; border-radius: var(--radius-lg); }
/* Herkunftszeile steht UNTER dem Bild, nie darauf. */
.apg-art__band figcaption { margin: 8px 0 0; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.apg-art__band.is-rubrik img { filter: saturate(.92); }

/* ---- R2 Beitragskopf (typografisch, kein Bild-Hero) ---- */
.apg-art__head { padding: 20px 0 clamp(24px, 3vw, 34px); border-bottom: 1px solid var(--line); }
.apg-art__pill { display: inline-block; margin: 0 0 14px; padding: 5px 13px; border-radius: var(--radius-pill);
  background: var(--tint); color: var(--accent-dk); font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; }
.apg-art h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 16px; max-width: 20ch; max-width: 24ch; }
.apg-art__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; max-width: 68ch; }
.apg-art__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 13.5px; color: var(--muted); }
.apg-art__meta span { position: relative; }
.apg-art__meta span + span::before { content: "·"; position: absolute; left: -11px; opacity: .5; }

/* ---- Zweispalter. minmax(0,1fr) ist Pflicht: 1fr allein laesst breite
       Tabellen die Spur sprengen (Fund 08.09. auf /partner/werden/bewerbung/). ---- */
.apg-art__grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(28px, 4vw, 56px); padding-top: clamp(28px, 3.5vw, 44px); padding-bottom: var(--sec-pad); }
/* Explizite Spalten: im Quelltext steht die Seitenspalte VOR dem Artikel (damit
   Tastatur und Screenreader die Sprungmarken vor dem Text bekommen, WCAG 1.3.2/2.4.3),
   am Desktop soll sie trotzdem rechts stehen. */
.apg-art__main { grid-column: 1; grid-row: 1; min-width: 0; }
/* WICHTIG: der Wrapper bleibt `stretch` (Gitter-Standard) und ist damit so hoch wie
   der Artikel — nur deshalb hat das sticky-Verzeichnis darin einen Weg. `align-content:
   start` haelt die Kinder trotzdem oben. Ein `align-self: start` HIER wuerde den
   Wrapper auf Inhaltshoehe schrumpfen und das Mitlaufen sofort abschalten. */
/* Die Spalte laeuft als Ganzes mit. Sie passt wieder ins Fenster, seit das Formular
   heraus ist: Verzeichnis + Telefonkarte statt Verzeichnis + Telefon + Formular.
   `align-self: start` ist Pflicht — ein gestrecktes Gitterkind ist so hoch wie die
   Zeile und hat dann keinen Weg; sticky waere gesetzt und wirkungslos.
   Keine max-height, kein overflow: die Spalte braucht keinen Eigenscroll. */
.apg-art__side { grid-column: 2; grid-row: 1; display: grid; align-content: start; gap: 18px;
  position: sticky; top: 24px; align-self: start; }

/* ---- R3 Kurz gesagt ---- */
.apg-art__kurz { max-width: 68ch; background: var(--tint); border: 1px solid var(--tint-line); border-radius: var(--radius-lg);
  padding: 22px 24px; margin: clamp(24px, 3vw, 34px) 0 0; }
/* Entwurfshinweis ist ein schmales Band, KEINE Flaechenfarbe. Faellt der Hinweis
   weg, sieht der Block genauso aus wie jetzt — die Farbe haengt nicht daran. */
.apg-art__kurz-draft { display: block; margin: -22px -24px 16px; padding: 7px 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: #f3d9a0; color: #6b4c00;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.apg-art__kurz-t { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-dk); }
.apg-art__kurz ul { margin: 0; padding: 0 0 0 20px; }
.apg-art__kurz li { margin: 0 0 7px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.apg-art__kurz li:last-child { margin-bottom: 0; }

/* ---- R5 Typo-Schicht fuer Fremd-HTML ---- */
.apg-art__prose { font-size: 17px; line-height: 1.72; color: var(--ink-soft); }
.apg-art__prose > * { max-width: 68ch; }
.apg-art__prose h2 { max-width: 30ch; font-size: clamp(23px, 2.4vw, 29px); font-weight: 800; line-height: 1.25;
  color: var(--ink); margin: 44px 0 14px; scroll-margin-top: 24px; }
.apg-art__prose h3 { max-width: 40ch; font-size: 19px; font-weight: 800; color: var(--ink); margin: 28px 0 10px; scroll-margin-top: 24px; }
.apg-art__prose p { margin: 0 0 18px; }
.apg-art__prose strong, .apg-art__prose b { color: var(--ink); font-weight: 700; }
.apg-art__prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.apg-art__prose a:hover { color: var(--accent-dk); }
.apg-art__prose ul, .apg-art__prose ol { margin: 0 0 20px; padding-left: 22px; }
.apg-art__prose li { margin: 0 0 8px; }
.apg-art__prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent);
  color: var(--ink); font-size: 18px; }
.apg-art__prose code { background: var(--page); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: .92em; }
.apg-art__prose img { height: auto; border-radius: var(--radius); }  /* HTML-height schlaegt aspect-ratio */
.apg-art__prose figure { margin: 24px 0; max-width: 100%; }
.apg-art__prose figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
/* <hr> steht 461x im Bestand als reiner Trenner (S3). Bis das Regelwerk greift:
   leise ausrichten statt laut streichen. */
.apg-art__prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

/* ---- R5 Tabellen: Scroll im eigenen Rahmen, nie in der Seite ---- */
.apg-art__prose .apg-art__tblwrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius); }
.apg-art__prose figure.wp-block-table { margin: 22px 0; overflow: visible; }
.apg-art__tblwrap table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
.apg-art__tblwrap th, .apg-art__tblwrap td { padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); }
.apg-art__tblwrap th { background: var(--page); color: var(--ink); font-weight: 800; font-size: 13.5px; }
.apg-art__tblwrap tr:last-child td { border-bottom: 0; }

/* ---- R6 FAQ (Akkordeon = Reuse .apg-partner__faq) ---- */
.apg-art__faq { margin: 48px 0 0; }
.apg-art__faq h2 { font-size: clamp(23px, 2.4vw, 29px); font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.apg-art__faq .apg-partner__faq { max-width: none; margin: 0; }

/* ---- R7 Quellen · R8 Autor ---- */
.apg-art__src { margin: 44px 0 0; padding: 22px 24px; background: var(--page); border-radius: var(--radius); }
.apg-art__src h2 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.apg-art__src ul { margin: 0 0 12px; padding-left: 20px; font-size: 14.5px; color: var(--ink-soft); }
.apg-art__src-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.apg-art__author { display: flex; gap: 16px; align-items: flex-start; margin: 24px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line); }
.apg-art__author-ph { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tint);
  color: var(--accent-dk); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.apg-art__author-n { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.apg-art__author-d { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

/* ---- R4 Inhaltsverzeichnis ---- */
.apg-art__toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.apg-art__toc summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; }
.apg-art__toc summary::-webkit-details-marker { display: none; }
.apg-art__toc summary span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.apg-art__toc nav { max-height: 58vh; overflow-y: auto; padding: 0 16px 14px; }
.apg-art__toc ol { margin: 0; padding-left: 20px; }
.apg-art__toc li { margin: 0 0 9px; }
.apg-art__toc a { font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-decoration: none; }
.apg-art__toc a:hover { color: var(--accent-ink); }

/* ---- R9 Kontaktkarte in der Spalte ---- */
.apg-art__help { border: 1px solid var(--tint-line); border-radius: var(--radius); background: var(--tint); padding: 18px 16px; }
.apg-art__help-t { margin: 0 0 8px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.apg-art__help-tel { display: inline-block; font-size: 19px; font-weight: 800; color: var(--accent-dk); text-decoration: none; }
.apg-art__help-h { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* ---- R9 Kontaktformular in der Sektion am Artikelfuss. Vier Felder wie zuvor,
       jetzt in voller Breite statt in 290 px. ---- */
.apg-art__form { display: block; margin: 0; }
.apg-art__form label { display: block; margin: 0 0 5px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.apg-art__form input[type="text"], .apg-art__form input[type="email"], .apg-art__form textarea {
  width: 100%; margin: 0 0 14px; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--panel); border: 1px solid var(--tint-line);
  border-radius: 8px; }
.apg-art__form textarea { min-height: 120px; resize: vertical; }
.apg-art__form input:focus-visible, .apg-art__form textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }
.apg-art__form .apg-hub__form-check { margin: 0 0 14px; font-size: 13px; line-height: 1.5; }
.apg-art__form .sendbtn { min-width: 200px; min-height: 46px; padding: 11px 16px; border: 0;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.apg-art__form .sendbtn:hover { background: var(--accent-ink); }
.apg-art__form .note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.apg-art__form .note a, .apg-art__form .apg-hub__form-check a { color: var(--accent-ink); }
.apg-art__form .req { color: #dc2626; }

/* ---- R9 Kontaktsektion, zweispaltig — NUR im Ratgeber (.apg-art-contact).
       Feldbreite gedeckelt: eine 700 px lange Eingabezeile liest sich schlechter
       als eine von 440. ---- */
.apg-art-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px); align-items: start; text-align: left; }
.apg-art-contact__links h2 { margin: 0 0 12px; }
.apg-art-contact .apg-partner__contact-lead { margin: 0 0 20px; max-width: 46ch; }
.apg-art-contact .apg-partner__contact-hours { margin: 6px 0 0; }
.apg-art-contact .apg-partner__contact-mail { margin: 14px 0 0; }
.apg-art-contact__rechts { max-width: 520px; }

/* ---- R10/R11 ---- */
.apg-art__rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Zwei Zustaende, beide fertig. Der Unterschied ist die Innenaufteilung, NICHT ein
   Platzhalter: ohne Bild steht kein <img> im Markup und keine reservierte Flaeche im
   Layout — die Karte beginnt einfach mit dem Titel. Nebeneinander lesen sie sich als
   Foto-Karte und Text-Karte, nicht als „eine ist kaputt". */
.apg-art__rel-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  text-decoration: none; transition: transform var(--t), box-shadow var(--t); }
.apg-art__rel-card em { margin-top: auto; }
.apg-art__rel-img { display: block; width: calc(100% + 40px); margin: -20px -20px 4px; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; }
/* Ohne Bild ist die Karte eine TEXTKARTE, keine Bildkarte mit fehlendem Bild:
   der Titel steht mittig und traegt die Flaeche, „Weiterlesen" schliesst direkt an.
   Ohne das Zentrieren zieht der gemeinsame Zeilenhoehen-Ausgleich (Gitter streckt
   alle Karten auf die hoechste) den Abschluss nach unten — und die Luecke dazwischen
   liest sich als fehlendes Bild. Gemessen 10.09.: Bildkarte und Textkarte je 325 px. */
.apg-art__rel-card--text { justify-content: center; gap: 8px; padding: 26px 22px; }
.apg-art__rel-card--text span { font-size: 18px; line-height: 1.35; }
.apg-art__rel-card--text em { margin-top: 2px; }
.apg-art__rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hov); }
.apg-art__rel-card span { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.apg-art__rel-card em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.apg-art__more { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 28px 0 0; }
.apg-art__more a { font-size: 15.5px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.apg-art__more a:hover { text-decoration: underline; }

/* ---- Mobil ---- */
@media (max-width: 1023px) {
  /* Eine Spalte. `display: contents` loest den Spalten-Wrapper auf, dann sind
     Verzeichnis und Kontaktblock eigene Gitterkinder und lassen sich einzeln um den
     Artikel herum ordnen: Verzeichnis davor, Formular dahinter. Kein sticky. */
  .apg-art__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* Der Wrapper loest sich auf; die Quelltext-Reihenfolge (Verzeichnis, Artikel)
     ist hier schon die richtige — `order` wird nicht mehr gebraucht. */
  /* Die Desktop-Platzierung zuruecknehmen: `grid-row: 1` am Artikel wuerde ihn hier
     in die erste Zeile nageln und Verzeichnis wie Kontaktkarte dahinter schieben —
     die richtige Quelltext-Reihenfolge waere dann sichtbar wieder falsch. */
  .apg-art__main { grid-column: auto; grid-row: auto; }
  .apg-art__side { display: contents; position: static; }
  .apg-art__toc  { position: static; }
  /* Telefonkarte mobil raus: sie staende hinter dem Artikel, zwei bis drei
     Bildschirme vor der Kontaktsektion, die dieselbe Nummer plus Formular traegt. */
  .apg-art__help { display: none; }
  /* Kontaktsektion einspaltig: Telefon ueber Formular. */
  .apg-art-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .apg-art-contact__rechts { max-width: none; }
  .apg-art__rel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .apg-art__prose { font-size: 16.5px; }
  .apg-art h1 { max-width: none; }
  .apg-art__help-tel { min-height: 44px; display: flex; align-items: center; }  /* Tippziel */
  .apg-art__more a { min-height: 44px; display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .apg-art__rel-card { transition: none; }
  .apg-art__rel-card:hover { transform: none; }
}