/*
Theme Name: Fassadendrohne.com Fachmagazin
Theme URI: https://fassadendrohne.com/
Author: PSCoat-SEO
Description: Redaktionell wirkendes Fachmagazin-Theme mit Newsgrid, Kategorie-Farbchips und dunklem Footer-Band fuer fassadendrohne.com.
Version: 1.0.0
Text Domain: t-fassadendrohne-com
*/

/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root{
  --bg:#f8f9f9;
  --surface:#eceeef;
  --surface-2:#dcdfe5;
  --text:#253231;
  --muted:#3d5957; /* gegenueber Brief-Hex #5f7f7c abgedunkelt: 7:1-Kontrast auf --bg fuer Fliesstext-Nutzung (Teaser, Meta) */
  --primary:#244e97;
  --secondary:#2c446d;
  --accent:#0c6776;      /* gegenueber Brief-Hex #1fb2c9 abgedunkelt: 6.2:1-Weiss-Kontrast auf Chip/Rahmen */
  --accent-bg:#1fb2c9;   /* Original-Hex aus dem Brief, als Referenz erhalten */
  --link:#154598;
  --link-visited:#123675;
  --header-bg:#f8f9f9;
  --header-text:#253231;
  --footer-bg:#16272c;
  --footer-text:#d7dadb;
  --footer-text-muted:#a8b0b4;
  --border:#cfd4de;
  --radius:6px;
  --font-head:'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:'Noto Sans', -apple-system, Segoe UI, Arial, sans-serif;
  --maxw:1220px;
}

/* ==========================================================================
   1. Reset & Basis
   ========================================================================== */
*, *::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.65;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
a:visited{ color:var(--link-visited); }
a:hover{ color:var(--primary); }
a.no-underline, .card-teaser a, .site-logo a, nav a, .btn, .footer-col a, .topbar a{ text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.25; color:var(--text); margin:1.4em 0 .55em; }
h1{ font-size:2rem; }
h2{ font-size:1.5rem; }
h3{ font-size:1.2rem; }
p{ margin:0 0 1.05em; }
ul, ol{ padding-left:1.3em; margin:0 0 1.1em; }
li{ margin-bottom:.35em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
button{ font-family:inherit; }
main{ display:block; }

/* ==========================================================================
   2. Disclaimer-Banner Feinschliff (Kern gibt Markup vor, nie ausblenden)
   ========================================================================== */
.ps-disclaimer{ font-size:14px !important; }
.ps-disclaimer a{ color:#0e2f2d; text-decoration:underline; }

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header{ background:var(--header-bg); color:var(--header-text); border-bottom:3px solid var(--text); }

.topbar{
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--muted);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar__kicker{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__tools{ display:flex; align-items:center; gap:4px; }
.tool-btn{
  background:none; border:none; cursor:pointer; color:var(--text);
  display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:4px; position:relative;
  font-size:13px;
}
.tool-btn:hover{ background:var(--surface); }
.tool-btn svg{ width:18px; height:18px; flex:none; }
.tool-badge{
  position:absolute; top:1px; right:1px; background:var(--primary); color:#ffffff; border-radius:50%;
  min-width:15px; height:15px; font-size:10px; line-height:15px; text-align:center; padding:0 2px; font-weight:700;
}
.tool-badge[hidden]{ display:none; }

.branding{ padding:16px 0; }
.branding__inner{ display:flex; align-items:center; gap:14px; }
.site-logo{ display:flex; align-items:center; gap:10px; }
.site-logo__mark{ width:42px; height:42px; flex:none; }
.site-logo__text{ display:flex; flex-direction:column; line-height:1.15; }
.site-logo__name{ font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:var(--text); }
.site-logo__claim{ font-size:12.5px; color:var(--muted); font-family:var(--font-body); margin-top:2px; max-width:46ch; }

.burger{
  margin-left:auto; display:none; background:none; border:2px solid var(--text); border-radius:4px; padding:8px 10px; cursor:pointer;
}
.burger svg{ width:22px; height:22px; display:block; }

/* Mega-Menue Navigation */
.site-nav{ background:var(--text); }
.site-nav__list{ list-style:none; margin:0; padding:0; display:flex; }
.site-nav__list > li{ position:relative; }
.site-nav__list > li > a, .site-nav__list > li > .nav-toplink{
  display:block; width:100%; text-align:left; padding:13px 18px; color:#fafbfd; font-weight:600; font-size:14.5px; letter-spacing:.01em; text-decoration:none;
  border:none; border-right:1px solid rgba(255,255,255,.12); background:none; margin:0; cursor:pointer; font-family:var(--font-body); appearance:none; -webkit-appearance:none;
}
.site-nav__list > li > a:hover, .site-nav__list > li:hover > .nav-toplink, .site-nav__list > li.is-open > .nav-toplink{ background:var(--primary); color:#ffffff; }

.mega{
  position:absolute; left:0; top:100%; width:340px; background:#ffffff; border:1px solid var(--border); border-top:3px solid var(--primary);
  box-shadow:0 14px 28px rgba(0,0,0,.16); padding:14px; display:none; z-index:40;
}
.site-nav__list > li:hover .mega, .site-nav__list > li.is-open .mega{ display:block; }
.mega__eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; font-weight:700; }
.mega__card{ display:flex; gap:12px; text-decoration:none; color:var(--text); }
.mega__card img{ width:96px; height:72px; object-fit:cover; border-radius:4px; flex:none; }
.mega__card h4{ margin:0 0 4px; font-size:15px; color:var(--text); font-family:var(--font-head); }
.mega__card p{ margin:0; font-size:13px; color:var(--muted); line-height:1.4; }
.mega__card:hover h4{ color:var(--primary); }

/* Suchformular im Topbar-Popover */
.search-popover{
  display:none; position:absolute; right:0; top:100%; background:#ffffff; border:1px solid var(--border); box-shadow:0 10px 24px rgba(0,0,0,.15);
  padding:12px; z-index:50; width:280px; border-radius:4px;
}
.search-popover.is-open{ display:block; }
.search-popover form{ display:flex; gap:6px; }
.search-popover input[type=search]{ flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:4px; font-size:14px; }
.search-popover button{ background:var(--primary); color:#ffffff; border:none; border-radius:4px; padding:0 12px; cursor:pointer; font-weight:600; }

/* ==========================================================================
   4. Kategorie-Chips
   ========================================================================== */
.chip{
  display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:4px 9px; border-radius:3px; color:#ffffff; text-decoration:none; line-height:1.4;
}
.chip--ablauf{ background:var(--primary); }
.chip--einsatzfaelle{ background:var(--accent); }
.chip--kosten{ background:var(--secondary); }

/* ==========================================================================
   5. Hero / Featured
   ========================================================================== */
.hero{
  position:relative; margin:20px 0 32px; border-radius:var(--radius); overflow:hidden; background:var(--text);
  min-height:380px; display:flex; align-items:flex-end;
}
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,23,22,.92) 0%, rgba(15,23,22,.55) 45%, rgba(15,23,22,.08) 100%);
}
.hero__content{ position:relative; z-index:2; padding:28px 30px 30px; color:#ffffff; max-width:760px; }
.hero__eyebrow{ margin-bottom:10px; }
.hero__title{ font-family:var(--font-head); font-size:2.1rem; line-height:1.2; margin:0 0 12px; color:#ffffff; }
.hero__title a{ color:#ffffff; text-decoration:none; }
.hero__excerpt{ font-size:1.02rem; color:#e6e9ef; max-width:64ch; margin:0 0 12px; }
.hero__meta{ font-size:13px; color:#cbd0d9; display:flex; gap:14px; flex-wrap:wrap; }

.section-title{
  display:flex; align-items:baseline; gap:12px; margin:0 0 16px; padding-bottom:8px; border-bottom:3px solid var(--text);
}
.section-title h2{ margin:0; font-size:1.3rem; }
.section-title span{ font-size:13px; color:var(--muted); font-family:var(--font-body); font-weight:400; }

/* News-Grid */
.news-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-bottom:40px; }
.card{
  background:#ffffff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .15s ease, transform .15s ease;
}
.card:hover{ box-shadow:0 10px 22px rgba(10,17,20,.1); transform:translateY(-2px); }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__chip{ position:absolute; left:12px; top:12px; }
.card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.card__title{ font-family:var(--font-head); font-size:1.15rem; margin:4px 0 8px; line-height:1.3; }
.card__title a{ color:var(--text); text-decoration:none; }
.card__title a:hover{ color:var(--primary); }
.card__excerpt{ font-size:.94rem; color:var(--muted); margin:0 0 12px; flex:1; }
.card__meta{ font-size:12.5px; color:var(--muted); display:flex; gap:12px; border-top:1px solid var(--border); padding-top:10px; }

/* Themenbloecke */
.themenbloecke{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:44px; }
.themenblock{ background:var(--surface); border-radius:var(--radius); padding:20px 22px; border-top:5px solid var(--muted); }
.themenblock--ablauf{ border-top-color:var(--primary); }
.themenblock--einsatzfaelle{ border-top-color:var(--accent); }
.themenblock--kosten{ border-top-color:var(--secondary); }
.themenblock h3{ margin:10px 0 6px; font-size:1.1rem; }
.themenblock p{ font-size:.93rem; color:var(--muted); margin-bottom:12px; }
.themenblock ul{ list-style:none; padding:0; margin:0 0 14px; font-size:.93rem; }
.themenblock ul li{ padding:7px 0; border-top:1px solid var(--border); }
.themenblock ul li:first-child{ border-top:none; }
.themenblock ul a{ color:var(--text); font-weight:600; }
.themenblock ul a:hover{ color:var(--primary); }
.themenblock .btn{ font-size:.85rem; }

.btn{
  display:inline-block; background:var(--primary); color:#ffffff !important; padding:9px 16px; border-radius:4px; font-weight:700;
  font-size:.9rem; text-decoration:none !important;
}
.btn:hover{ background:var(--secondary); }
.btn--ghost{ background:transparent; color:var(--text) !important; border:2px solid var(--text); }
.btn--ghost:hover{ background:var(--text); color:#ffffff !important; }

/* ==========================================================================
   6. Artikel
   ========================================================================== */
.breadcrumb{ font-size:13px; color:var(--muted); margin:16px 0; }
.breadcrumb a{ color:var(--muted); text-decoration:underline; }
.article-head{ max-width:820px; margin:0 auto 20px; }
.article-head .chip{ margin-bottom:12px; }
.article-head h1{ font-size:1.9rem; margin:0 0 14px; }
.article-meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:10px 0; margin-bottom:22px; }
.article-figure{ max-width:920px; margin:0 auto 30px; }
.article-figure img{ width:100%; border-radius:var(--radius); }
.article-figure figcaption{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.article-excerpt-lead{ max-width:820px; margin:0 auto 6px; font-size:1.08rem; color:var(--text); }

.entry-content{ max-width:820px; margin:0 auto; }
.entry-content h2{ margin-top:1.7em; }
.entry-content h2:first-child{ margin-top:0; }
.entry-content ul, .entry-content ol{ margin-bottom:1.2em; }
.entry-content blockquote{
  border-left:4px solid var(--primary); margin:1.4em 0; padding:.4em 0 .4em 1.1em; color:var(--muted); font-style:italic; font-size:1.02rem;
}
.entry-content table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.95rem; }
.entry-content th, .entry-content td{ border:1px solid var(--border); padding:10px 12px; text-align:left; }
.entry-content th{ background:var(--text); color:#ffffff; font-family:var(--font-head); font-weight:700; }
.entry-content tr:nth-child(even) td{ background:var(--surface); }
.entry-content code{ background:var(--surface); padding:.15em .4em; border-radius:3px; font-size:.9em; }
.entry-content figure{ margin:1.4em 0; }
.entry-content figure img{ border-radius:var(--radius); }

/* Belegstatus (letzte <ul> nach einer Belegstatus-Ueberschrift) optisch als Faktenbox */
.entry-content h2:last-of-type:not(:first-of-type) + ul{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--muted); border-radius:0 4px 4px 0;
  padding:14px 18px 14px 30px; font-size:.9rem; color:var(--muted); list-style:disc;
}

.anzeige-block, .anzeige{
  background:#f5f6f9; border:1px solid #c4d1e6; border-left:5px solid var(--primary); border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px; margin:2em 0;
}
.anzeige-label, .anzeige-block .anzeige-label{
  display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:#ffffff;
  background:var(--primary); padding:3px 9px; border-radius:3px; margin:0 0 10px;
}
.anzeige-block h3{ margin-top:0; font-size:1.1rem; }
.anzeige-block p:last-child{ margin-bottom:0; }
.anzeige-block a{ font-weight:600; }

.related{ background:var(--surface); padding:36px 0 40px; margin-top:52px; }
.related .section-title{ border-bottom-color:var(--muted); }

.bookmark-btn{
  display:inline-flex; align-items:center; gap:8px; background:#ffffff; border:2px solid var(--text); border-radius:5px;
  padding:9px 15px; font-weight:700; font-size:.9rem; cursor:pointer; color:var(--text); margin:0 0 28px;
}
.bookmark-btn svg{ width:18px; height:18px; }
.bookmark-btn.is-active{ background:var(--primary); border-color:var(--primary); color:#ffffff; }

/* ==========================================================================
   7. Statische Seiten
   ========================================================================== */
.page-head{ background:var(--surface); padding:34px 0; margin-bottom:34px; border-bottom:3px solid var(--text); }
.page-head h1{ margin:0; max-width:820px; }
.page-content{ max-width:760px; margin:0 auto 60px; }
.page-content h2{ margin-top:1.6em; }
.contact-box{ background:var(--surface); border-radius:var(--radius); padding:22px 24px; margin:1.6em 0; }
.contact-box dt{ font-weight:700; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin-top:12px; }
.contact-box dt:first-child{ margin-top:0; }
.contact-box dd{ margin:2px 0 0; font-size:1.02rem; }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer{ background:var(--footer-bg); color:var(--footer-text); margin-top:50px; }
.footer-cols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; padding:44px 0 30px; }
.footer-col h3{ color:#ffffff; font-family:var(--font-head); font-size:1rem; margin:0 0 14px; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:8px; font-size:.92rem; }
.footer-col a{ color:var(--footer-text); }
.footer-col a:hover{ color:#ffffff; text-decoration:underline; }
.footer-col p{ font-size:.9rem; color:var(--footer-text-muted); margin:0 0 10px; }

.footer-ad{ border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.footer-ad__inner{ display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 0; flex-wrap:wrap; }
.footer-ad .anzeige-label{ background:var(--footer-text-muted); color:var(--footer-bg); flex:none; }
.footer-ad__text{ font-size:.87rem; color:var(--footer-text-muted); flex:1 1 320px; }
.footer-ad__text strong{ color:#ffffff; }
.footer-ad a.btn{ flex:none; padding:7px 14px; font-size:.82rem; }

.footer-legal{ padding:20px 0 30px; font-size:.83rem; color:var(--footer-text-muted); }
.footer-legal p{ margin:0 0 8px; }
.footer-legal a{ color:var(--footer-text); }
.footer-legal a:hover{ color:#ffffff; }
.footer-legal__links{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.footer-credits{ font-size:.78rem; color:var(--footer-text-muted); opacity:.85; }

.to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%; background:var(--text); color:#ffffff;
  border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; }
.to-top svg{ width:20px; height:20px; }

/* ==========================================================================
   9. 404 & Suche
   ========================================================================== */
.error-404{ max-width:640px; margin:60px auto; text-align:center; padding:0 20px; }
.error-404 h1{ font-size:2.4rem; }
.search-results-head{ max-width:820px; margin:0 auto 20px; }

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 960px){
  .news-grid{ grid-template-columns:1fr; }
  .themenbloecke{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:repeat(2, 1fr); }
  .hero{ min-height:320px; }
}

@media (max-width: 700px){
  .topbar__kicker{ display:none; }
  .site-logo__claim{ display:none; }
  .burger{ display:block; }
  .site-nav{ display:none; }
  .site-nav.is-open{ display:block; }
  .site-nav__list{ flex-direction:column; }
  .site-nav__list > li > a, .site-nav__list > li > .nav-toplink{ border-right:none; border-bottom:1px solid rgba(255,255,255,.12); }
  .mega{ position:static; width:auto; box-shadow:none; border:none; border-top:2px solid var(--primary); display:none; }
  .site-nav__list > li:hover .mega{ display:none; }
  .site-nav__list > li.is-open .mega{ display:block; }
  .search-popover{ right:0; left:0; width:auto; margin:0 16px; }
  .hero__title{ font-size:1.5rem; }
  .hero__content{ padding:20px 18px 22px; }
  .footer-cols{ grid-template-columns:1fr; padding:34px 0 20px; }
  h1{ font-size:1.55rem; }
  h2{ font-size:1.28rem; }
  .article-head h1{ font-size:1.5rem; }
}

/* ==========================================================================
   99. Waermebild-Landingpage-Umbau (24.09.2026) — eigenstaendiger wbc-Praefix,
   greift ausschliesslich in die neue Startseiten-Sektion, keine bestehende
   Regel ueberschrieben.
   ========================================================================== */
.wbc-hero{ max-width:820px; margin:0 auto 1.2em; padding-top:8px; }
.wbc-kicker{ text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:var(--accent); font-weight:700; margin:0 0 .4em; }
.wbc-hero h1{ margin-top:0; }
.wbc-lead{ font-size:1.08rem; }
.wbc-block{
  max-width:820px;
  margin:0 auto 2.4em;
  padding:1.5em 1.6em;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.wbc-messwert{ display:flex; align-items:center; justify-content:center; gap:1.4em; margin:1.2em 0 .6em; flex-wrap:wrap; }
.wbc-messwert__pol{ display:flex; flex-direction:column; align-items:center; padding:.7em 1.3em; border-radius:var(--radius); background:var(--bg); border:1px solid var(--border); }
.wbc-messwert__pol--vorher{ border-color:#b3522f; }
.wbc-messwert__pol--nachher{ border-color:var(--accent); }
.wbc-messwert__label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.wbc-messwert__wert{ font-family:var(--font-head); font-size:1.6rem; font-weight:700; }
.wbc-messwert__pfeil{ font-size:1.4rem; color:var(--muted); }
.wbc-quelle{ font-size:.86rem; color:var(--muted); }
.wbc-kennzahl{ display:flex; align-items:baseline; gap:1em; margin:1.4em 0; padding-top:1.2em; border-top:1px dashed var(--border); flex-wrap:wrap; }
.wbc-kennzahl__wert{ font-family:var(--font-head); font-size:2rem; font-weight:700; color:var(--accent); flex:0 0 auto; }
.wbc-kennzahl__label{ font-size:.9rem; color:var(--text); margin:0; }
.wbc-anzeige-box{ margin-top:1.4em; padding:.9em 1.1em; background:var(--bg); border:1px dashed var(--border); border-radius:var(--radius); font-size:.9rem; }
.wbc-anzeige-tag{ display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.1em .6em; margin-right:.5em; }
.wbc-anzeige-box a{ font-weight:600; margin-left:.3em; }
@media (max-width:600px){
  .wbc-block{ padding:1.1em; }
  .wbc-messwert{ gap:.8em; }
}