/*
Theme Name: WirSanierenDeutschland.com
Theme URI: https://wirsanierendeutschland.com/
Author: PSCoat-SEO Redaktion
Description: Vergleichsportal-Optik für die PSCoat-Kampagnenseite "Wir sanieren Deutschland" – Methoden-/Gebäudetyp-Vergleich statt Anbietervergleich.
Version: 1.0.0
Text Domain: t-wirsanierendeutschland-com
*/

/* -------------------------------------------------------------------------
   Grundlagen / Design-Tokens
   ---------------------------------------------------------------------- */
:root{
  --bg:#fafafa;
  --surface:#e7e7e9;
  --text:#242628;
  --muted:#43474c; /* dunkler als Brief-Wert, damit auch auf --surface ≥7:1 Kontrast bleibt */
  --primary:#117770; /* dunkler als Brief-Primary für ausreichenden Textkontrast */
  --primary-bright:#3bb5ad;
  --secondary:#36736f;
  --accent:#2e60b5;
  --link:#1d625e; /* dunkler als Brief-Wert für sicheren ≥4.5:1-Kontrast auf --surface */
  --border:#d8dadc;
  --header-bg:#fafafa;
  --header-text:#242628;
  --footer-bg:#202224;
  --footer-text:#eff0f1;
  --radius:4px;
  --maxw:1180px;
  --font-heading:'Roboto', Arial, sans-serif;
  --font-body:'Nunito Sans', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--link);}
a:hover{text-decoration-thickness:2px;}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--text);
  line-height:1.25;
  font-weight:700;
  margin:0 0 .55em;
}
h1{font-size:clamp(1.9rem,4vw,2.7rem);}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.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;}
button{font-family:inherit;}

/* Disclaimer-Banner: Kern liefert Grundgestaltung, wir passen nur Optik an */
.ps-disclaimer{
  background:#d7e5fe !important;
  color:#112039 !important;
  border-bottom:1px solid #7a9fdf !important;
  font-family:var(--font-body) !important;
}
.ps-disclaimer__inner{max-width:var(--maxw) !important;}

/* -------------------------------------------------------------------------
   Topbar + Header
   ---------------------------------------------------------------------- */
.topbar{
  background:var(--secondary);
  color:#ffffff;
  font-size:14px;
}
.topbar .container{
  display:flex;justify-content:flex-end;align-items:center;gap:20px;
  padding-top:7px;padding-bottom:7px;
}
.topbar a{color:#ffffff;text-decoration:none;font-weight:600;}
.topbar a:hover{text-decoration:underline;}
.topbar__phone{color:#e5f3f2;font-weight:400;}

.site-header{
  background:var(--header-bg);
  color:var(--header-text);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px;gap:16px;
}
.site-branding{display:flex;flex-direction:column;gap:2px;min-width:0;}
.site-title{margin:0;font-size:1.3rem;font-weight:700;}
.site-title a{color:var(--text);text-decoration:none;}
.site-tagline{margin:0;font-size:.82rem;color:var(--muted);font-family:var(--font-body);max-width:38ch;}

.burger{
  display:none;background:none;border:2px solid var(--text);border-radius:var(--radius);
  width:44px;height:40px;position:relative;cursor:pointer;flex:0 0 auto;
}
.burger span,.burger::before,.burger::after{
  content:"";position:absolute;left:9px;right:9px;height:2px;background:var(--text);
}
.burger::before{top:12px;}
.burger span{top:19px;}
.burger::after{top:26px;}

.main-nav{display:block;}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px;}
.main-nav li{position:relative;}
.main-nav a{
  display:block;padding:10px 14px;color:var(--text);text-decoration:none;font-weight:600;
  font-family:var(--font-heading);font-size:.97rem;border-radius:var(--radius);
}
.main-nav a:hover,.main-nav a:focus{background:var(--surface);color:var(--primary);}

/* Mega-Menü */
.main-nav .has-mega{position:relative;}
.mega{
  display:none;position:absolute;left:0;top:100%;background:#ffffff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 12px 28px rgba(0,0,0,.12);padding:16px;
  min-width:520px;grid-template-columns:repeat(3,1fr);gap:4px;z-index:60;
}
.main-nav .has-mega:hover .mega,.main-nav .has-mega:focus-within .mega{display:grid;}
.mega a{padding:8px 10px;font-weight:400;font-size:.92rem;}
.mega__col-title{font-family:var(--font-heading);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 10px 2px;}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.hero{background:var(--surface);border-bottom:1px solid var(--border);}
.hero .container{padding-top:44px;padding-bottom:44px;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;}
.hero__eyebrow{display:none;} /* Brief verbietet Eyebrow-Labels */
.hero h1{margin-bottom:.5em;}
.hero__lead{font-size:1.08rem;color:var(--text);max-width:56ch;margin-bottom:1.3em;}
.hero__figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.hero__figure img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.hero__cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.6em;}
.btn{
  display:inline-block;padding:13px 24px;border-radius:var(--radius);font-weight:700;
  font-family:var(--font-heading);text-decoration:none;font-size:.98rem;border:2px solid transparent;
}
.btn--primary{background:var(--primary);color:#ffffff;}
.btn--primary:hover{background:#18524e;}
.btn--outline{background:transparent;border-color:var(--text);color:var(--text);}
.btn--outline:hover{background:var(--text);color:#ffffff;}
.btn--cta{background:var(--accent);color:#ffffff;}
.btn--cta:hover{background:#244b8e;}

/* Schnellauswahl-Buttons je Gebäudetyp */
.quickselect{display:flex;flex-wrap:wrap;gap:10px;}
.quickselect a{
  display:flex;align-items:center;gap:8px;background:#ffffff;border:1.5px solid var(--border);
  border-radius:999px;padding:9px 16px 9px 10px;text-decoration:none;color:var(--text);
  font-family:var(--font-heading);font-weight:600;font-size:.92rem;
}
.quickselect a:hover{border-color:var(--primary);color:var(--primary);background:#f1f7f7;}
.quickselect svg{width:20px;height:20px;flex:0 0 auto;color:var(--primary);}

/* -------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------- */
.section{padding:52px 0;}
.section--alt{background:var(--surface);}
.section__head{max-width:70ch;margin-bottom:28px;}
.section__head p{color:var(--muted);}

/* Themenkarten */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.topic-card{
  background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:10px;
}
.topic-card__icon{width:44px;height:44px;color:var(--primary);}
.topic-card h3{margin-bottom:.2em;}
.topic-card p{color:var(--muted);font-size:.96rem;margin-bottom:0;flex:1;}
.topic-card__link{font-family:var(--font-heading);font-weight:700;color:var(--primary);text-decoration:none;font-size:.92rem;}
.topic-card__link:hover{text-decoration:underline;}

/* Vergleichskarten Gebäudetyp/Kostenklasse */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.compare-card{
  background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;
}
.compare-card--highlight{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);}
.compare-card__icon{width:38px;height:38px;color:var(--primary);margin-bottom:6px;}
.compare-card__tag{
  display:inline-block;font-family:var(--font-heading);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--secondary);background:var(--surface);
  border-radius:999px;padding:4px 11px;margin-bottom:12px;
}
.compare-card h3{margin-bottom:.3em;}
.compare-card__sub{color:var(--muted);font-size:.9rem;margin-bottom:14px;}
.compare-card ul{margin:0 0 6px;padding-left:1.15em;}
.compare-card li{margin-bottom:7px;font-size:.95rem;}
.compare-card__note{font-size:.82rem;color:var(--muted);margin-top:12px;margin-bottom:0;}

/* Ratgeber / Artikel-Feature */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.post-card{
  background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
}
.post-card__meta{padding:16px 20px 0;font-size:.8rem;color:var(--muted);font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.03em;}
.post-card__body{padding:8px 20px 20px;flex:1;display:flex;flex-direction:column;}
.post-card h3{margin-bottom:.4em;font-size:1.08rem;}
.post-card h3 a{color:var(--text);text-decoration:none;}
.post-card h3 a:hover{color:var(--primary);}
.post-card p{color:var(--muted);font-size:.94rem;flex:1;}
.post-card__link{font-family:var(--font-heading);font-weight:700;color:var(--primary);text-decoration:none;font-size:.9rem;}

/* Offene Fragenliste (kein Akkordeon) */
.question-list{max-width:78ch;}
.question-item{border-bottom:1px solid var(--border);padding:18px 0;}
.question-item:first-child{padding-top:0;}
.question-item h3{font-size:1.02rem;margin-bottom:.4em;display:flex;gap:10px;align-items:baseline;}
.question-item h3 span.qmark{color:var(--primary);font-family:var(--font-heading);}
.question-item p{color:var(--text);margin-bottom:0;font-size:.97rem;}

/* PSCoat-Hinweisblock (Marken-/Kampagnendomain: CTA statt Anzeige-Label) */
.pscoat-cta{
  background:var(--secondary);color:#ffffff;border-radius:var(--radius);
  padding:34px 32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
}
.pscoat-cta h2,.pscoat-cta p{color:#ffffff;}
.pscoat-cta__text{max-width:56ch;}
.pscoat-cta p{color:#ddeeed;margin-bottom:0;}

/* -------------------------------------------------------------------------
   Artikel / Seiteninhalt
   ---------------------------------------------------------------------- */
.entry-header{background:var(--surface);border-bottom:1px solid var(--border);padding:34px 0;}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:12px;}
.breadcrumb a{color:var(--muted);}
.entry-meta{font-size:.85rem;color:var(--muted);font-family:var(--font-heading);display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;}
.entry-content{max-width:78ch;margin:0 auto;padding:40px 20px 60px;}
.entry-content h2{margin-top:1.5em;}
.entry-content h2:first-child{margin-top:0;}
.entry-content h3{margin-top:1.2em;}
.entry-content p,.entry-content ul,.entry-content ol{margin-bottom:1.1em;}
.entry-content ul,.entry-content ol{padding-left:1.4em;}
.entry-content li{margin-bottom:.4em;}
.entry-content a{text-decoration-thickness:1.5px;}
.entry-content blockquote{
  border-left:4px solid var(--primary);margin:1.6em 0;padding:.3em 0 .3em 1.3em;
  color:var(--muted);font-style:italic;
}
.entry-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.94rem;}
.entry-content th,.entry-content td{border:1px solid var(--border);padding:10px 12px;text-align:left;}
.entry-content th{background:var(--surface);font-family:var(--font-heading);font-weight:700;}
.entry-content tr:nth-child(even) td{background:#fafafb;}
.entry-content figure{margin:1.6em 0;}
.entry-content figcaption{font-size:.82rem;color:var(--muted);margin-top:6px;}
.entry-content code{background:var(--surface);padding:.15em .4em;border-radius:3px;font-size:.9em;}

/* Anzeige-Kennzeichnung im Content */
.entry-content .anzeige,
.entry-content .anzeige-block{
  border:1.5px solid var(--secondary);
  background:#f0f7f6;
  border-radius:var(--radius);
  padding:20px 22px;
  margin:1.8em 0;
}
.entry-content .anzeige p:last-child,
.entry-content .anzeige-block p:last-child{margin-bottom:0;}
.entry-content .anzeige-label,
.entry-content .anzeige strong:first-child{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#ffffff;
  background:var(--secondary);
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
/* Nur der allererste <p class="anzeige-label"> ganz oben im Artikel wird
   nicht als Kasten gestylt (kein zweiter "Kasten" direkt über der Einleitung),
   aber das Label selbst bleibt sichtbar. */
p.anzeige-label{margin-bottom:.6em;}

.belegstatus{}
.entry-content h2:has(+ ul)+ul{}

/* Belegstatus-Abschnitt optisch absetzen: der h2 "Belegstatus" + folgende Liste */
.entry-footer-note{
  max-width:78ch;margin:0 auto;padding:0 20px 40px;color:var(--muted);font-size:.88rem;
}

/* Vergleichstabelle im Artikel (Signature-Komponente) */
.entry-content .methodenvergleich{margin:1.8em 0;}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
.site-footer{background:var(--footer-bg);color:var(--footer-text);margin-top:20px;}
.footer-top{padding:44px 0 30px;border-bottom:1px solid #36393d;}
.footer-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;}
.footer-col h4{color:#ffffff;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.footer-col p{color:#c2c5c9;font-size:.9rem;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:9px;}
.footer-col a{color:#dcdee0;text-decoration:none;font-size:.92rem;}
.footer-col a:hover{color:#ffffff;text-decoration:underline;}
.footer-transparenz a{color:#a1e1dd;}
.footer-bottom{padding:18px 0;font-size:.83rem;color:#9fa5ac;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;}
.footer-bottom a{color:#9fa5ac;}
.footer-credit{font-size:.78rem;color:#808892;}

/* Nach-oben */
.to-top{
  position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;
  background:var(--text);color:#ffffff;border:none;display:none;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:80;
}
.to-top.is-visible{display:flex;}
.to-top svg{width:20px;height:20px;}

/* 404 */
.error-404{padding:80px 0;text-align:center;}
.error-404 h1{font-size:3rem;}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width:920px){
  .hero .container{grid-template-columns:1fr;}
  .hero__figure{order:-1;}
  .card-grid,.compare-grid,.post-grid{grid-template-columns:repeat(2,1fr);}
  .footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .burger{display:block;}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:#ffffff;
    border-bottom:1px solid var(--border);box-shadow:0 10px 20px rgba(0,0,0,.08);z-index:70;
  }
  .main-nav.is-open{display:block;}
  .site-header .container{position:relative;flex-wrap:wrap;}
  .main-nav ul{flex-direction:column;gap:0;padding:8px 0;}
  .main-nav a{padding:12px 20px;border-radius:0;}
  .main-nav .mega{
    display:none !important;position:static;box-shadow:none;border:none;padding:0 0 0 20px;
    min-width:0;grid-template-columns:1fr;
  }
  .main-nav .has-mega.is-expanded .mega{display:grid !important;}
  .card-grid,.compare-grid,.post-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr;gap:26px;}
  .pscoat-cta{flex-direction:column;align-items:flex-start;}
  .topbar .container{justify-content:center;}
}
@media (max-width:480px){
  body{font-size:16px;}
  .section{padding:38px 0;}
  .hero .container{padding-top:30px;padding-bottom:30px;}
}