/*
Theme Name: iSFP.io Downloads
Theme URI: https://isfp.io/
Author: PSCoat-SEO
Description: Tabellarische Checklisten-/Download-Seite zum individuellen Sanierungsfahrplan (iSFP). Downloads-Übersicht, Förderwege-Kartenpaar, Artikel als nummerierte Checkliste mit linker Themen-Sidebar.
Version: 1.0.0
Text Domain: t-isfp-io
*/

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */
:root{
  --bg:#f7f7f7;
  --surface:#dee1e1;
  --text:#242728;
  --muted:#647075;
  --primary:#38729f;
  --primary-dark:#2c5e84;
  --secondary:#304862;
  --accent:#498ec5;
  --link:#245e8a;
  --border:#ccd2d9;
  --border-strong:#242728;
  --font-heading:"Archivo", Arial, sans-serif;
  --font-body:"Karla", Arial, sans-serif;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--link)}
a:hover{color:var(--primary-dark)}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--text);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .55em;
}
h1{font-size:1.7rem}
h2{font-size:1.3rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:#ffffff;padding:10px 16px;z-index:1000}
.skip-link:focus{left:8px;top:8px}

/* -------------------------------------------------------------------------
 * Layout shell
 * ---------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start}
@media (max-width:880px){
  .layout{display:block}
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.site-header{
  background:var(--header-bg,var(--bg));
  border-bottom:2px solid var(--border-strong);
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
}
.site-branding{display:flex;flex-direction:column;gap:2px;min-width:0}
.site-branding a{color:var(--text);text-decoration:none}
.site-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-.01em;
}
.site-logo .logo-mark{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:34px;height:34px;
  background:var(--primary);
  color:#ffffff;
  font-size:0.95rem;
  font-weight:700;
}
.site-tagline{
  font-size:.85rem;
  color:var(--muted);
  max-width:46ch;
}
.page-kicker{
  margin:0 0 2px;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--secondary);
  font-weight:700;
}
.page-title-block h1{font-size:1.9rem;margin-bottom:.2em}
.page-title-block{margin:26px 0 22px}
.page-intro{color:var(--text);font-size:1.05rem;max-width:70ch}

.main-nav{border-top:1px solid var(--border)}
.main-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:0}
.main-nav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap;
}
.main-nav a{
  display:block;
  padding:13px 16px;
  text-decoration:none;
  color:var(--text);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.95rem;
  border-bottom:3px solid transparent;
}
.main-nav a:hover,.main-nav a.is-active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}
.nav-toggle{
  display:none;
  background:none;
  border:2px solid var(--border-strong);
  color:var(--text);
  font-family:var(--font-heading);
  font-weight:700;
  padding:8px 14px;
  cursor:pointer;
}
.nav-toggle svg{vertical-align:-3px;margin-right:6px}
@media (max-width:700px){
  .nav-toggle{display:inline-flex;align-items:center;margin:10px 0}
  .main-nav ul{display:none;flex-direction:column;padding-bottom:10px}
  .main-nav.is-open ul{display:flex}
  .main-nav a{padding:11px 4px;border-bottom:1px solid var(--border)}
}

/* -------------------------------------------------------------------------
 * Sidebar (linke Kategorie-Navigation)
 * ---------------------------------------------------------------------- */
.sidebar{
  background:var(--surface);
  border:1px solid var(--border);
  padding:20px;
}
.sidebar h2{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--secondary);
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:2px solid var(--border-strong);
}
.sidebar-themen{list-style:none;margin:0 0 22px;padding:0}
.sidebar-themen li{border-bottom:1px solid var(--border)}
.sidebar-themen li:last-child{border-bottom:none}
.sidebar-themen a{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px 2px;
  text-decoration:none;
  color:var(--text);
  font-size:.93rem;
  line-height:1.35;
}
.sidebar-themen a:hover{color:var(--primary)}
.sidebar-themen a.is-current{color:var(--primary);font-weight:700}
.sidebar-themen .num{
  flex:0 0 auto;
  width:22px;height:22px;
  border:2px solid var(--secondary);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:.75rem;
  color:var(--secondary);
}
.sidebar-themen a.is-current .num{background:var(--primary);border-color:var(--primary);color:#ffffff}
.sidebar-icon{flex:0 0 auto;color:var(--accent)}

.sidebar-ad{
  background:var(--primary);
  color:#ffffff;
  padding:16px 16px 18px;
}
.sidebar-ad .ad-label{
  display:inline-block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#ffffff;
  color:var(--primary);
  font-weight:700;
  padding:2px 7px;
  margin-bottom:9px;
}
.sidebar-ad h3{color:#ffffff;font-size:1rem;margin-bottom:6px}
.sidebar-ad p{font-size:.88rem;margin-bottom:12px;color:#f0f4f7}
.sidebar-ad .btn{
  display:inline-block;
  background:#ffffff;
  color:var(--primary);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.85rem;
  padding:9px 14px;
  text-decoration:none;
}
.sidebar-ad .btn:hover{background:var(--secondary);color:#ffffff}

.sidebar-toggle{display:none}
@media (max-width:880px){
  .sidebar-toggle{
    display:block;width:100%;text-align:left;
    background:var(--surface);
    border:1px solid var(--border-strong);
    font-family:var(--font-heading);font-weight:700;
    padding:12px 14px;margin:0 0 2px;cursor:pointer;
    color:var(--text);
  }
  .sidebar-toggle::after{content:"▾";float:right}
  .sidebar-toggle[aria-expanded="true"]::after{content:"▴"}
  .sidebar{display:none;margin-bottom:26px}
  .sidebar.is-open{display:block}
}

/* -------------------------------------------------------------------------
 * Intro
 * ---------------------------------------------------------------------- */
.intro{max-width:74ch;margin:0 0 30px;font-size:1.05rem}
.intro p:last-child{margin-bottom:0}

/* -------------------------------------------------------------------------
 * Downloads-Tabelle
 * ---------------------------------------------------------------------- */
.section-heading{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:38px 0 14px;
}
.section-heading h2{font-size:1.35rem;margin:0}
.section-heading .count{color:var(--muted);font-size:.9rem}

.downloads-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:2px solid var(--border-strong);
  margin-bottom:8px;
}
.downloads-table caption{text-align:left;font-size:.85rem;color:var(--muted);padding:0 0 10px}
.downloads-table th,.downloads-table td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.downloads-table thead th{
  font-family:var(--font-heading);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--secondary);
  border-bottom:2px solid var(--border-strong);
  background:#e6e9ec;
}
.downloads-table tbody tr:last-child td{border-bottom:none}
.downloads-table tbody tr:hover{background:#e7eaee}
.dl-title{font-family:var(--font-heading);font-weight:700;font-size:1rem}
.dl-title a{color:var(--text);text-decoration:none}
.dl-title a:hover{color:var(--primary)}
.dl-topic{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--secondary);
  border:1px solid var(--secondary);
  padding:2px 7px;
  white-space:nowrap;
}
.dl-desc{color:var(--text);font-size:.93rem}
.dl-action a{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-heading);font-weight:700;font-size:.88rem;
  color:var(--primary);text-decoration:none;white-space:nowrap;
}
.dl-action a:hover{color:var(--primary-dark);text-decoration:underline}
.dl-note{
  font-size:.82rem;color:var(--muted);margin:0 0 6px;
}

.download-cards{display:none}
@media (max-width:640px){
  .downloads-table thead{display:none}
  .downloads-table,.downloads-table tbody,.downloads-table tr,.downloads-table td{display:block;width:100%}
  .downloads-table tr{border-bottom:2px solid var(--border-strong);padding:14px 0;margin-bottom:0}
  .downloads-table td{border:none;padding:4px 0}
  .downloads-table td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted);margin-bottom:2px;
  }
}

/* -------------------------------------------------------------------------
 * Förderwege-Kartenpaar
 * ---------------------------------------------------------------------- */
.foerderwege{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:2px solid var(--border-strong);
  margin-bottom:8px;
}
@media (max-width:640px){.foerderwege{grid-template-columns:1fr}}
.foerderweg-card{
  background:var(--surface);
  padding:22px 22px 24px;
  border-right:1px solid var(--border-strong);
}
.foerderweg-card:last-child{border-right:none}
@media (max-width:640px){
  .foerderweg-card{border-right:none;border-bottom:1px solid var(--border-strong)}
  .foerderweg-card:last-child{border-bottom:none}
}
.foerderweg-card .fw-kicker{
  display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#ffffff;background:var(--secondary);padding:3px 9px;margin-bottom:10px;
}
.foerderweg-card:nth-child(2) .fw-kicker{background:var(--primary)}
.foerderweg-card h3{font-size:1.15rem;margin-bottom:10px}
.foerderweg-card dl{margin:0 0 12px;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.92rem}
.foerderweg-card dt{color:var(--muted);white-space:nowrap}
.foerderweg-card dd{margin:0;font-weight:600}
.foerderweg-card p{font-size:.9rem;color:var(--text)}
.foerderweg-card a{font-weight:700}

/* -------------------------------------------------------------------------
 * Kontakt-Hinweis
 * ---------------------------------------------------------------------- */
.kontakt-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--secondary);
  padding:20px 22px;
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  justify-content:space-between;
  align-items:center;
}
.kontakt-box h2{font-size:1.1rem;margin-bottom:4px}
.kontakt-box p{margin:0;font-size:.92rem;color:var(--text)}
.kontakt-links{display:flex;gap:16px;flex-wrap:wrap}
.kontakt-links a{
  font-family:var(--font-heading);font-weight:700;font-size:.92rem;
  color:var(--text);text-decoration:none;
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}
.kontakt-links a:hover{color:var(--primary);border-color:var(--primary)}

/* -------------------------------------------------------------------------
 * Artikel / Checkliste
 * ---------------------------------------------------------------------- */
.breadcrumb{font-size:.82rem;color:var(--muted);margin:18px 0 6px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--primary);text-decoration:underline}
.breadcrumb .sep{margin:0 6px}

.article-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--secondary);
  border:1px solid var(--secondary);
  padding:4px 10px;
  margin-bottom:14px;
}
.article-header h1{font-size:1.7rem;margin-bottom:10px}
.article-meta{
  display:flex;gap:14px;flex-wrap:wrap;
  font-size:.85rem;color:var(--muted);
  padding-bottom:16px;margin-bottom:22px;
  border-bottom:2px solid var(--border-strong);
}
.article-meta span{display:inline-flex;align-items:center;gap:5px}

.article-content{max-width:74ch;counter-reset:sect}
.article-content h2{
  counter-increment:sect;
  font-size:1.28rem;
  margin-top:2.1em;
  padding-top:.15em;
  display:flex;gap:12px;align-items:baseline;
}
.article-content h2::before{
  content:counter(sect,decimal-leading-zero);
  font-family:var(--font-heading);
  font-size:.85rem;
  color:#ffffff;
  background:var(--primary);
  padding:3px 8px;
  flex:0 0 auto;
}
.article-content h3{font-size:1.08rem;margin-top:1.6em;color:var(--secondary)}
.article-content p{font-size:1.01rem}
.article-content > ol{
  list-style:none;margin:0 0 1.3em;padding:0;
  counter-reset:pt;
  border:1px solid var(--border);
}
.article-content > ol > li{
  counter-increment:pt;
  position:relative;
  padding:12px 16px 12px 52px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.article-content > ol > li:nth-child(even){background:#e9ecef}
.article-content > ol > li:last-child{border-bottom:none}
.article-content > ol > li::before{
  content:counter(pt);
  position:absolute;left:14px;top:12px;
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--secondary);color:#ffffff;
  font-family:var(--font-heading);font-weight:700;font-size:.85rem;
}
.article-content ul{padding-left:0;list-style:none}
.article-content ul li{
  position:relative;padding:4px 0 4px 26px;font-size:.98rem;
}
.article-content ul li::before{
  content:"";position:absolute;left:4px;top:12px;
  width:9px;height:9px;background:var(--accent);
}
.article-content table{width:100%;border-collapse:collapse;margin:0 0 1.4em;border:2px solid var(--border-strong)}
.article-content th,.article-content td{border:1px solid var(--border);padding:10px 12px;text-align:left;font-size:.92rem;vertical-align:top}
.article-content thead th{background:#e6e9ec;font-family:var(--font-heading);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary);border-bottom:2px solid var(--border-strong)}
.article-content tbody tr:nth-child(even){background:var(--surface)}
.article-content strong{color:var(--secondary)}
.article-content em{color:var(--text)}
.article-content blockquote{
  margin:0 0 1.3em;padding:12px 18px;
  border-left:4px solid var(--primary);
  background:var(--surface);font-style:italic;
}
.article-content code{background:var(--surface);padding:1px 5px;font-size:.9em;border:1px solid var(--border)}
.article-content figure{margin:0 0 1.3em}
.article-content figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}

/* Anzeige-Block innerhalb des Artikels */
.article-content .anzeige,
.article-content .anzeige-block{
  border:2px solid var(--primary);
  background:#f1f5f8;
  padding:18px 20px;
  margin:2em 0;
  position:relative;
}
.article-content .anzeige p:first-child,
.article-content .anzeige-block p:first-child{margin-bottom:8px}
.article-content .anzeige strong,
.article-content .anzeige-label{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#ffffff;
  background:var(--primary);
  padding:3px 9px;
  margin-bottom:8px;
}
.article-content .anzeige a,
.article-content .anzeige-block a{font-weight:700}

/* Belegstatus */
.article-content h2:has(+ ul):last-of-type{}
.belegstatus{
  margin-top:3em;
  border-top:2px dashed var(--border-strong);
  padding-top:18px;
}
.belegstatus-inner h2{
  font-size:1rem;
  color:var(--secondary);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.belegstatus-inner h2::before{background:var(--secondary)}
.belegstatus-inner ul{
  list-style:none;padding:0;margin:0;
}
.belegstatus-inner ul li{
  font-size:.85rem;color:var(--muted);
  padding:8px 0 !important;border-bottom:1px solid var(--border);
}
.belegstatus-inner ul li::before{content:none}
.belegstatus-inner ul li:last-child{border-bottom:none}

.other-articles{
  margin-top:3em;padding-top:22px;border-top:1px solid var(--border);
}
.other-articles h2{font-size:1.05rem;margin-bottom:12px}
.other-articles ul{list-style:none;margin:0;padding:0}
.other-articles li{border-bottom:1px solid var(--border)}
.other-articles a{
  display:block;padding:12px 2px;text-decoration:none;color:var(--text);font-weight:600;
}
.other-articles a:hover{color:var(--primary)}

/* -------------------------------------------------------------------------
 * Generic page content (Impressum, Datenschutz, Über)
 * ---------------------------------------------------------------------- */
.page-header{margin:20px 0 18px}
.page-header h1{font-size:1.7rem}
.page-content{max-width:70ch;font-size:1.02rem}
.page-content h2{font-size:1.25rem;margin-top:1.6em}
.page-content ul{padding-left:1.2em}

/* -------------------------------------------------------------------------
 * 404
 * ---------------------------------------------------------------------- */
.error-404{max-width:60ch}
.error-404 h1{font-size:1.8rem}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.site-footer{
  background:var(--footer-bg,var(--bg));
  color:var(--footer-text,var(--text));
  border-top:2px solid var(--border-strong);
  margin-top:56px;
  font-size:.86rem;
}
.footer-inner{padding:28px 0 24px}
.footer-nav{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 14px;padding:0}
.footer-nav li{margin:0}
.footer-nav a{
  color:var(--text);text-decoration:none;font-weight:700;
  font-family:var(--font-heading);font-size:.86rem;
  padding:4px 14px;border-right:1px solid var(--border);
}
.footer-nav li:last-child a{border-right:none}
.footer-nav a:hover{color:var(--primary)}
.footer-meta{color:var(--muted);max-width:76ch;margin:0 0 8px}
.footer-meta a{color:var(--muted)}
.footer-meta a:hover{color:var(--primary)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--border);
  color:var(--muted);font-size:.8rem;
}

/* -------------------------------------------------------------------------
 * Back to top
 * ---------------------------------------------------------------------- */
.back-to-top{
  position:fixed;right:18px;bottom:18px;
  width:44px;height:44px;
  background:var(--secondary);color:#ffffff;
  border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
  z-index:50;
}
.back-to-top.is-visible{opacity:1;pointer-events:auto}
.back-to-top:hover{background:var(--primary)}

/* -------------------------------------------------------------------------
 * ps-disclaimer Anpassung (nie verstecken/verkleinern!)
 * ---------------------------------------------------------------------- */
.ps-disclaimer{
  background:var(--secondary) !important;
  color:#f3f5f8 !important;
  border-bottom:2px solid var(--border-strong) !important;
  font-family:var(--font-body) !important;
}
.ps-disclaimer__inner{font-size:14px}
.ps-disclaimer strong{color:#ffffff}

@media (max-width:480px){
  .page-title-block h1{font-size:1.5rem}
  .article-header h1{font-size:1.35rem}
  .foerderweg-card dl{grid-template-columns:1fr}
}