/*
 * Leitfaden: lange Ratgeber-Artikel mit Inhaltsverzeichnis (seit 14.11.2026, erster Einsatz /artikel/pim-implementierung/).
 * Wird nur geladen, wenn der Artikelinhalt die Klasse „apl-leitfaden" enthält (single-article.php).
 * Aufbau im Inhalt: Kopf (apl-buehne--kopf) · Gruppe apl-leitfaden [ nav.apl-lf-inhalt · Gruppe apl-lf-text [ Abschnitte ] ] · Abschluss.
 * Regeln HELL: zwei Schnitte, graphit auf Weiß/Nebel, ein blauer Akzent, linksbündig an der Rasterkante, px statt rem.
 */

/* ---- Raster: Verzeichnis links an der Rasterkante, Text rechts daneben */
.apl .apl-leitfaden{
  padding:clamp(36px,4.5vw,64px) max(20px,calc((100% - var(--apl-breite)) / 2)) clamp(56px,6vw,96px);
  font-size:17px;line-height:1.7;
}
.apl .apl-leitfaden > *{margin-top:0;margin-bottom:0}
.apl .apl-lf-text{min-width:0}
@media (min-width:1100px){
  .apl .apl-leitfaden{display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:clamp(48px,5.5vw,96px);align-items:start}
  .apl .apl-lf-inhalt{position:sticky;top:124px;max-height:calc(100vh - 148px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* ---- Inhaltsverzeichnis */
.apl .apl-lf-inhalt{font-size:14px;line-height:1.35}
.apl .apl-lf-schalter{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;clip-path:inset(50%);overflow:hidden}
.apl .apl-lf-inhalt-titel{display:block;font-size:13px;font-weight:var(--apl-halbfett);letter-spacing:.16em;text-transform:uppercase;color:var(--apl-graphit-62);margin:0 0 14px}
.apl .apl-lf-inhalt ol{list-style:none;margin:0;padding:0}
.apl .apl-lf-inhalt li{display:block;float:none;width:auto;margin:0 !important;padding:0;font-size:inherit;line-height:inherit}
.apl .apl-lf-inhalt li::before{content:none;display:none}
.apl .apl-lf-inhalt a.apl-lf-link{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--apl-linie-zart);color:var(--apl-graphit-72);text-decoration:none}
.apl .apl-lf-inhalt a.apl-lf-link:hover{color:var(--apl-graphit);border-left-color:var(--apl-graphit)}
.apl .apl-lf-inhalt a.apl-lf-link[aria-current]{color:var(--apl-graphit);font-weight:var(--apl-halbfett);border-left-color:var(--apl-blau)}
.apl .apl-lf-inhalt-hinweis{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--apl-linie);font-size:14px;line-height:1.5;color:var(--apl-graphit-72)}
.apl .apl-lf-inhalt-hinweis strong{display:block;color:var(--apl-graphit);margin-bottom:4px}
.apl .apl-lf-inhalt-hinweis a{display:inline-block;margin-top:10px;font-weight:var(--apl-halbfett);color:var(--apl-graphit);text-decoration:none;box-shadow:inset 0 -1.5px 0 var(--apl-blau);padding-bottom:3px}
.apl .apl-lf-inhalt-hinweis a:hover{box-shadow:inset 0 -2.5px 0 var(--apl-blau)}
@media (min-width:1100px) and (max-height:999px){ .apl .apl-lf-inhalt-hinweis{display:none} }
@media (min-width:1100px) and (max-height:839px){ .apl .apl-lf-inhalt{font-size:13.5px} .apl .apl-lf-inhalt a.apl-lf-link{padding:4px 0 4px 14px} .apl .apl-lf-inhalt-titel{margin-bottom:10px} }
@media (max-width:1099px){
  /* schmal: Verzeichnis als aufklappbare Leiste über dem Text (ohne JavaScript, über das Kontrollkästchen) */
  .apl .apl-lf-inhalt{border:1px solid var(--apl-linie);border-radius:var(--apl-radius-klein);margin-bottom:36px;background:#fff}
  .apl .apl-lf-inhalt-titel{display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px 18px;cursor:pointer;color:var(--apl-graphit)}
  .apl .apl-lf-inhalt-titel::after{content:"+";font-size:24px;font-weight:var(--apl-leicht);letter-spacing:0;line-height:1;transition:transform var(--apl-tempo)}
  .apl .apl-lf-schalter:checked + .apl-lf-inhalt-titel::after{transform:rotate(45deg)}
  .apl .apl-lf-schalter:focus-visible + .apl-lf-inhalt-titel{outline:2px solid var(--apl-graphit);outline-offset:3px;border-radius:var(--apl-radius-klein)}
  .apl .apl-lf-inhalt ol{display:none;padding:0 18px 16px}
  .apl .apl-lf-schalter:checked ~ ol{display:block}
  .apl .apl-lf-inhalt a.apl-lf-link{padding:9px 0 9px 14px;font-size:15px}
  .apl .apl-lf-inhalt-hinweis{display:none}
}

/* ---- Abschnitte */
/* Sprungziele: html hat scroll-padding-top:150px (fester Header); Folgeabschnitte tragen oben eigenen Innenabstand */
.apl .apl-lf-abschnitt{margin:0;padding:0;scroll-margin-top:0}
.apl .apl-lf-abschnitt + .apl-lf-abschnitt{scroll-margin-top:-40px}
.apl .apl-lf-abschnitt + .apl-lf-abschnitt{margin-top:clamp(52px,5.5vw,84px);padding-top:clamp(40px,4.5vw,64px);border-top:1px solid var(--apl-linie)}
.apl .apl-lf-abschnitt > :where(p,ul,ol,h2,h3,h4,blockquote,.wp-block-list){max-width:var(--apl-lesebreite)}
.apl .apl-leitfaden :is(h2,h3,h4){margin-top:0}
.apl .apl-lf-abschnitt > h2{margin-bottom:22px}
.apl .apl-lf-abschnitt > h3{margin-top:40px;margin-bottom:14px}
.apl .apl-lf-abschnitt > p{margin:0 0 20px}
.apl .apl-lf-abschnitt > :last-child{margin-bottom:0}
.apl .apl-leitfaden p.apl-nummer{margin:0 0 10px}
.apl .apl-lf-einstieg > p:first-child{font-size:clamp(18px,1.4vw,20px);line-height:1.6}
/* nummerierte Listen: ATLAS zählt über li::before (absolut links) – Platz dafür lassen */
.apl .apl-leitfaden ol.wp-block-list{margin:0 0 28px;padding:0}
.apl .apl-leitfaden ol.wp-block-list li{margin-bottom:10px;padding-left:34px;font-size:inherit;line-height:1.65}
.apl .apl-leitfaden .wp-block-quote{margin:32px 0;max-width:var(--apl-lesebreite);font-size:clamp(19px,1.6vw,23px)}
.apl .apl-leitfaden .wp-block-quote p{margin:0}

/* ---- Das Wichtigste in Kürze, Hinweise */
.apl .apl-lf-kurz{background:var(--apl-nebel);border-radius:var(--apl-radius);padding:clamp(24px,3vw,36px);margin:36px 0 0;max-width:calc(var(--apl-lesebreite) + 72px)}
.apl .apl-lf-kurz h2{font-size:20px;margin-bottom:16px}
.apl .apl-lf-kurz ul.wp-block-list{margin:0;font-size:16px}
.apl .apl-lf-kurz ul.wp-block-list li:last-child{margin-bottom:0}
.apl .apl-lf-hinweis{max-width:var(--apl-lesebreite);margin:28px 0;padding:18px 22px;background:var(--apl-nebel);border-radius:var(--apl-radius-klein);font-size:16px;line-height:1.65}
.apl .apl-lf-hinweis > p{margin:0}

/* ---- Karten (Arbeitspakete, Dimensionen, KI, Regelwerke) */
.apl .apl-lf-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:28px 0}
.apl .apl-lf-karte{background:#fff;border:1px solid var(--apl-linie);border-radius:16px;padding:22px 22px 24px}
.apl .apl-lf-karte > p.is-style-apl-kicker{font-size:12px;margin:0 0 10px;color:var(--apl-graphit-62)}
.apl .apl-lf-karte > h3{font-size:18px;line-height:1.3;margin:0 0 8px}
.apl .apl-lf-karte > p:not(.is-style-apl-kicker){font-size:15px;line-height:1.6;color:var(--apl-graphit-72);margin:0}

/* WordPress gibt Folgeelementen in Gruppen einen oberen Abstand (Fluss-Layout) – in den Rastern verschiebt das die Spalten */
.apl :is(.apl-lf-karten,.apl-lf-phasen,.apl-lf-phase-raster,.apl-lf-checkliste) > *{margin-top:0;margin-bottom:0}

/* ---- Phasen */
.apl .apl-lf-phasen{display:grid;gap:18px;margin:32px 0 0}
.apl .apl-lf-phase{background:#fff;border:1px solid var(--apl-linie);border-radius:var(--apl-radius);padding:clamp(22px,2.6vw,32px)}
.apl .apl-lf-phase > h3{font-size:clamp(19px,1.5vw,22px);margin:0 0 10px}
.apl .apl-lf-phase > p{font-size:16px;line-height:1.65;margin:0;max-width:var(--apl-lesebreite)}
.apl .apl-lf-phase > p.apl-nummer{font-size:13px;line-height:1.4;margin:0 0 10px}
.apl .apl-lf-phase-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 28px;margin:22px 0;padding:20px 0 0;border-top:1px solid var(--apl-linie-zart)}
.apl .apl-lf-phase-raster h4{font-size:13px;line-height:1.4;font-weight:var(--apl-halbfett);letter-spacing:.12em;text-transform:uppercase !important;color:var(--apl-graphit-62);margin:0 0 10px}
.apl .apl-lf-phase-raster ul.wp-block-list{margin:0;font-size:15px}
.apl .apl-lf-phase-raster ul.wp-block-list li{padding-left:20px;margin-bottom:6px;line-height:1.5}
.apl .apl-lf-phase-raster ul.wp-block-list li::before{width:6px;height:6px;top:.6em}
.apl .apl-lf-phase > p.apl-lf-stolperstein{font-size:15px;line-height:1.6;padding:14px 18px;background:var(--apl-nebel);border-radius:var(--apl-radius-klein);max-width:none}

/* ---- Tabellen und Schaubild */
.apl .apl-leitfaden .wp-block-table{margin:28px 0}
.apl .apl-leitfaden .wp-block-table table{font-size:15px;line-height:1.5}
.apl .apl-leitfaden .wp-block-table :is(th,td){padding:12px 14px;text-align:left}
.apl .apl-leitfaden .wp-block-table td:first-child{font-weight:var(--apl-halbfett)}
.apl .apl-leitfaden .wp-block-table td strong{white-space:nowrap}
.apl .apl-leitfaden .wp-block-table td strong::before{content:"";display:inline-block;width:7px;height:7px;margin:0 7px 2px 0;border-radius:50%;background:var(--apl-blau);vertical-align:middle}
@media (max-width:781px){ .apl .apl-leitfaden .wp-block-table td:first-child{min-width:156px} }
.apl .apl-lf-schaubild{margin:32px 0}
.apl .apl-lf-schaubild-flaeche{background:var(--apl-nebel);border-radius:var(--apl-radius);padding:clamp(14px,2.4vw,28px);overflow-x:auto}
.apl .apl-lf-schaubild svg{display:block;width:100%;min-width:640px;height:auto;font-family:inherit}
.apl .apl-lf-schaubild figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--apl-graphit-62);max-width:var(--apl-lesebreite);text-align:left}

/* ---- Readiness-Check */
.apl .apl-lf-check{margin:28px 0 0;padding:0;border:0}
.apl .apl-lf-frage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center;margin:0;padding:16px 0;border:0;border-top:1px solid var(--apl-linie-zart);min-width:0}
.apl .apl-lf-frage:first-of-type{border-top-color:var(--apl-linie)}
.apl .apl-lf-frage legend{float:left;width:100%;padding:0;font-size:16px;line-height:1.5;font-weight:var(--apl-halbfett);color:var(--apl-graphit)}
.apl .apl-lf-frage legend small{display:block;font-size:14px;font-weight:var(--apl-leicht);color:var(--apl-graphit-62)}
.apl .apl-lf-antworten{display:flex;gap:6px;flex-wrap:nowrap}
.apl .apl-lf-antworten input{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;clip-path:inset(50%)}
.apl .apl-lf-antworten label{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1.5px solid var(--apl-linie);border-radius:var(--apl-pill);font-size:14px;font-weight:var(--apl-halbfett);line-height:1;color:var(--apl-graphit);background:#fff;cursor:pointer;white-space:nowrap;transition:background-color var(--apl-tempo),color var(--apl-tempo),border-color var(--apl-tempo)}
.apl .apl-lf-antworten label:hover{border-color:var(--apl-graphit)}
.apl .apl-lf-antworten input:checked + label{background:var(--apl-graphit);border-color:var(--apl-graphit);color:#fff}
.apl .apl-lf-antworten input:focus-visible + label{outline:2px solid var(--apl-graphit);outline-offset:3px}
.apl .apl-lf-ergebnis{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:center;margin:24px 0 0;padding:clamp(22px,2.6vw,32px);background:var(--apl-nebel);border-radius:var(--apl-radius)}
.apl .apl-lf-ergebnis p.apl-lf-punkte{font-size:clamp(40px,4vw,56px);line-height:1;font-weight:var(--apl-halbfett);letter-spacing:-.02em;color:var(--apl-graphit);margin:0}
.apl .apl-lf-ergebnis p.apl-lf-punkte small{font-size:.42em;font-weight:var(--apl-leicht);color:var(--apl-graphit-62);letter-spacing:0}
.apl .apl-lf-ergebnis h3{font-size:20px;margin:0 0 6px}
.apl .apl-lf-ergebnis p{font-size:16px;line-height:1.6;margin:0;color:var(--apl-graphit-72)}
.apl .apl-lf-balken{height:6px;margin-top:14px;border-radius:var(--apl-pill);background:var(--apl-linie-zart);overflow:hidden}
.apl .apl-lf-balken span{display:block;height:100%;width:0;border-radius:inherit;background:var(--apl-blau);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.apl .apl-lf-check + p{margin-top:28px}
.apl .apl-lf-ohne-js{font-size:15px;color:var(--apl-graphit-62);margin:16px 0 0}
.apl .apl-lf-aktiv .apl-lf-ohne-js{display:none}
@media (max-width:700px){
  .apl .apl-lf-frage{grid-template-columns:1fr}
  .apl .apl-lf-ergebnis{grid-template-columns:1fr}
}

/* ---- Checkliste */
.apl .apl-lf-checkliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0 0}
@media (max-width:700px){ .apl .apl-lf-checkliste{grid-template-columns:1fr} }
.apl .apl-lf-liste{background:#fff;border:1px solid var(--apl-linie);border-radius:16px;padding:22px 22px 24px}
.apl .apl-lf-liste h3{font-size:18px;margin:0 0 14px}
.apl .apl-lf-liste ul.wp-block-list{margin:0;font-size:15px}
.apl .apl-lf-liste ul.wp-block-list li{padding-left:28px;margin-bottom:9px;line-height:1.5}
.apl .apl-lf-liste ul.wp-block-list li:last-child{margin-bottom:0}
.apl .apl-lf-liste ul.wp-block-list li::before{left:0;top:.28em;width:14px;height:14px;border-radius:4px;background:none;border:1.5px solid var(--apl-graphit-62)}
.apl .apl-lf-kopieren{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:24px 0 0}
.apl .apl-lf-kopieren .apl-button{min-height:46px;padding:0 24px;font-size:15px}
.apl .apl-lf-kopieren [role="status"]{font-size:14px;color:var(--apl-graphit-72)}
.apl .apl-leitfaden:not(.apl-lf-aktiv) .apl-lf-kopieren{display:none}

/* ---- Fragen und Abschluss */
.apl .apl-leitfaden details.wp-block-details{max-width:var(--apl-lesebreite)}
.apl .apl-leitfaden details.wp-block-details summary{font-size:17px}
.apl .apl-leitfaden details.wp-block-details > p{font-size:16px;line-height:1.65;margin-bottom:0}
.apl .page-content--article .page-entry > .apl-sektion.apl-lf-abschluss{padding-left:max(20px,calc((100% - var(--apl-breite)) / 2));padding-right:max(20px,calc((100% - var(--apl-breite)) / 2))}
.apl .apl-lf-abschluss > :where(h2,p){max-width:var(--apl-lesebreite)}
.apl .apl-lf-abschluss .wp-block-buttons{margin:28px 0 0}
.apl .apl-lf-kopieren + p{margin-top:28px}
.apl .apl-lf-abschluss p.apl-lf-kontakt{font-size:15px;color:var(--apl-graphit-72);margin:14px 0 0 !important}
.apl .apl-lf-abschluss p.apl-lf-kontakt a{text-decoration:underline;text-decoration-color:var(--apl-blau);text-underline-offset:4px}

@media print{
  .apl .apl-lf-inhalt,.apl .apl-lf-kopieren{display:none}
  .apl .apl-leitfaden{display:block}
}