/*
Theme Name: energieausweis.tech
Theme URI: https://energieausweis.tech/
Author: Zurynski, Oezdogan & Co GmbH
Description: Technisches Produktkatalog-Theme im Datenblatt-Stil für energieausweis.tech — Filter-Sidebar, H1 mit Trefferzahl statt Bild-Hero, Kennzahlen-Tabellen zu Energieausweis-Pflichten nach dem GModG.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: t-energieausweis-tech
*/

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */
:root{
	--bg:#ffffff;
	--surface:#edeeef;
	--surface-2:#e0e2e4;
	--text:#222426;
	--muted:#667078;
	--primary:#31bbcb;
	--secondary:#26525f;
	--accent:#3b6bbf;
	--link:#14717b;
	--border:#c5cacd;
	--border-strong:#969ea4;
	--header-bg:#ffffff;
	--header-text:#222426;
	--footer-bg:#ffffff;
	--footer-text:#222426;
	--font-heading:'Hind', Arial, Helvetica, sans-serif;
	--font-body:'Assistant', Arial, Helvetica, sans-serif;
	--radius:0;
}

/* -------------------------------------------------------------------------
 * 2. Reset & Grundlagen
 * ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	overflow-x:hidden;
}
h1,h2,h3,h4,p,li,dd,dt,label,figcaption{ overflow-wrap:anywhere; word-break:normal; }
.site-logo, .site-logo *{ overflow-wrap:normal; }
.catalog-layout, .card-grid, .footer-grid, .hero-row, .datenblatt-meta{ min-width:0; }
.catalog-layout > *, .card-grid > *, .footer-grid > *, .filter-sidebar, .schema-card{ min-width:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration-thickness:1px; }
a:hover{ color:var(--accent); }
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:clamp(1.7rem,4vw,2.35rem); }
h2{ font-size:1.4rem; margin-top:2em; }
h3{ font-size:1.15rem; margin-top:1.6em; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left:1.4em; }
li{ margin-bottom:.4em; }
.container{ max-width:1180px; 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; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#ffffff; padding:10px 16px; z-index:200; }
.skip-link:focus{ left:8px; top:8px; }
button{ font-family:inherit; cursor:pointer; }

/* -------------------------------------------------------------------------
 * 3. Buttons
 * ---------------------------------------------------------------------- */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--accent); color:#ffffff; border:1px solid var(--accent);
	font-family:var(--font-heading); font-weight:600; font-size:.95rem;
	padding:.65em 1.2em; border-radius:var(--radius); text-decoration:none;
}
.btn:hover{ background:#2e569c; border-color:#2e569c; color:#ffffff; }
.btn-outline{ background:transparent; color:var(--accent); }
.btn-outline:hover{ background:var(--accent); color:#ffffff; }
.btn-sm{ padding:.45em .9em; font-size:.85rem; }

/* -------------------------------------------------------------------------
 * 4. Header
 * ---------------------------------------------------------------------- */
.site-header{ background:var(--header-bg); color:var(--header-text); border-bottom:1px solid var(--border); }
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }
.site-logo{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--header-text); font-family:var(--font-heading); font-weight:700; font-size:1.35rem; }
.site-logo .mark{ color:var(--secondary); }
.site-logo .dot{ color:var(--accent); }
.site-tagline{ display:block; font-family:var(--font-body); font-weight:400; font-size:.72rem; color:var(--muted); margin-top:2px; letter-spacing:.02em; }
.header-tools{ display:flex; align-items:center; gap:18px; }
.header-phone{ display:flex; align-items:center; gap:7px; color:var(--secondary); font-weight:600; font-size:.92rem; text-decoration:none; white-space:nowrap; }
.header-phone svg{ width:17px; height:17px; flex:none; }
.header-phone:hover{ color:var(--accent); }
.burger-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:30px; background:none; border:1px solid var(--border-strong); padding:0; }
.burger-toggle span{ display:block; height:2px; background:var(--text); }

.cat-nav{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cat-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0; }
.cat-nav li{ margin:0; }
.cat-nav a{ display:block; padding:11px 16px; color:var(--text); text-decoration:none; font-size:.88rem; font-weight:600; border-right:1px solid var(--border); }
.cat-nav a:hover, .cat-nav a.is-active{ background:var(--secondary); color:#ffffff; }

.breadcrumb-bar{ padding:12px 0; }
.breadcrumb{ list-style:none; display:flex; flex-wrap:wrap; gap:0; margin:0; padding:0; font-size:.82rem; color:var(--muted); }
.breadcrumb li{ margin:0; display:flex; align-items:center; }
.breadcrumb li + li::before{ content:"›"; margin:0 8px; color:var(--border-strong); }
.breadcrumb a{ color:var(--accent); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .is-current{ color:var(--text); font-weight:600; }

/* -------------------------------------------------------------------------
 * 5. Hero (H1 + Trefferzahl statt Foto)
 * ---------------------------------------------------------------------- */
.catalog-hero{ padding:6px 0 26px; border-bottom:1px solid var(--border); }
.catalog-hero h1{ margin-bottom:.4em; }
.hero-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.hits-badge{
	display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:var(--text);
	font-family:var(--font-heading); font-weight:700; font-size:.85rem;
	padding:.5em 1em; border:1px solid #21a3b1; white-space:nowrap;
}
.hero-lead{ max-width:66ch; color:var(--muted); font-size:1.02rem; margin:.4em 0 0; }

/* -------------------------------------------------------------------------
 * 6. Katalog-Layout: Filter-Sidebar + Grid
 * ---------------------------------------------------------------------- */
.catalog-layout{ display:grid; grid-template-columns:260px 1fr; gap:34px; padding:30px 0 56px; align-items:start; }

.filter-sidebar{ background:var(--surface); border:1px solid var(--border); }
.filter-sidebar summary{
	list-style:none; cursor:default; display:flex; align-items:center; justify-content:space-between;
	padding:14px 16px; font-family:var(--font-heading); font-weight:700; font-size:.95rem;
	border-bottom:1px solid var(--border); background:var(--secondary); color:#ffffff;
}
.filter-sidebar summary::-webkit-details-marker{ display:none; }
.filter-sidebar summary .chev{ display:none; }
.filter-body{ padding:16px; }
.filter-group{ margin-bottom:20px; }
.filter-group:last-of-type{ margin-bottom:0; }
.filter-group h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--secondary); margin:0 0 10px; font-weight:700; }
.filter-option{ display:flex; align-items:flex-start; gap:8px; font-size:.9rem; margin-bottom:9px; cursor:pointer; }
.filter-option input{ margin-top:3px; accent-color:var(--accent); width:15px; height:15px; flex:none; }
.filter-count{ color:var(--muted); font-size:.82rem; }
.filter-reset{
	width:100%; background:#ffffff; border:1px solid var(--border-strong); color:var(--text);
	font-weight:600; font-size:.85rem; padding:.6em; margin-top:6px;
}
.filter-reset:hover{ border-color:var(--accent); color:var(--accent); }
.filter-empty-note{ display:none; font-size:.85rem; color:var(--muted); padding:14px 16px 0; border-top:1px dashed var(--border); margin-top:14px; }
.filter-sidebar.has-empty .filter-empty-note{ display:block; }

.schema-card{ border:1px solid var(--border); padding:16px; margin-top:18px; background:#ffffff; }
.schema-card h3{ font-size:.85rem; margin:0 0 10px; color:var(--secondary); }
.schema-card svg{ width:100%; height:auto; }
.schema-legend{ list-style:none; margin:10px 0 0; padding:0; font-size:.78rem; color:var(--muted); }
.schema-legend li{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.schema-legend span.sw{ width:11px; height:11px; flex:none; display:inline-block; }

/* -------------------------------------------------------------------------
 * 7. Produktkarten-Grid
 * ---------------------------------------------------------------------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:44px; }
.article-card{
	background:#ffffff; border:1px solid var(--border); display:flex; flex-direction:column;
	transition:border-color .15s, box-shadow .15s;
}
.article-card:hover{ border-color:var(--accent); box-shadow:0 2px 0 var(--accent); }
.article-card.is-hidden{ display:none; }
.card-tag-row{ display:flex; flex-wrap:wrap; gap:6px; padding:14px 16px 0; }
.card-tag{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.3em .6em; background:var(--surface); color:var(--secondary); border:1px solid var(--border); }
.card-body{ padding:12px 16px 16px; display:flex; flex-direction:column; flex:1; }
.card-body h2{ font-size:1.08rem; margin:0 0 .5em; }
.card-body h2 a{ color:var(--text); text-decoration:none; }
.card-body h2 a:hover{ color:var(--accent); }
.card-excerpt{ font-size:.92rem; color:var(--text); flex:1; margin-bottom:14px; }
.card-meta{ display:flex; flex-wrap:wrap; gap:5px 14px; font-size:.78rem; color:var(--muted); border-top:1px solid var(--border); padding-top:10px; margin-bottom:12px; }
.card-meta strong{ color:var(--text); }
.card-cta{ align-self:flex-start; }

/* -------------------------------------------------------------------------
 * 8. Kennzahlen-Tabelle (Startseite)
 * ---------------------------------------------------------------------- */
.kennzahlen-modul{ border:1px solid var(--border); background:#ffffff; margin-bottom:10px; }
.kennzahlen-modul .kz-head{ background:var(--secondary); color:#ffffff; padding:14px 18px; }
.kennzahlen-modul .kz-head h2{ color:#ffffff; margin:0; font-size:1.1rem; }
.kennzahlen-modul .kz-head p{ margin:.35em 0 0; font-size:.85rem; color:#d2e2e7; }
.kz-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

table.datentabelle{ width:100%; border-collapse:collapse; font-size:.92rem; white-space:normal; }
table.datentabelle caption{ text-align:left; font-size:.8rem; color:var(--muted); padding:10px 18px 0; caption-side:top; }
table.datentabelle th, table.datentabelle td{ border:1px solid var(--border); padding:10px 14px; text-align:left; vertical-align:top; }
table.datentabelle thead th{ background:var(--surface-2); color:var(--text); font-family:var(--font-heading); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.02em; }
table.datentabelle tbody tr:nth-child(even){ background:var(--surface); }
table.datentabelle td.num, table.datentabelle th.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.kz-source{ font-size:.78rem; color:var(--muted); padding:10px 18px 16px; }

/* -------------------------------------------------------------------------
 * 9. Artikel / Datenblatt (single.php, kein Sidebar)
 * ---------------------------------------------------------------------- */
.datenblatt-header{ border-bottom:1px solid var(--border); padding-bottom:22px; margin-bottom:0; }
.datenblatt-header h1{ margin-bottom:.5em; }
.datenblatt-meta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.datenblatt-meta .dm-field{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); padding:10px 14px; min-width:170px; }
.datenblatt-meta .dm-label{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:3px; }
.datenblatt-meta .dm-value{ font-weight:700; font-size:.92rem; color:var(--text); }

.article-body{ max-width:76ch; padding:34px 0 10px; font-size:1.02rem; }
.article-body h2:first-child{ margin-top:0; }
.article-body table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.92rem; }
.article-body th, .article-body td{ border:1px solid var(--border); padding:9px 12px; text-align:left; vertical-align:top; }
.article-body thead th{ background:var(--secondary); color:#ffffff; font-family:var(--font-heading); font-size:.82rem; }
.article-body tbody tr:nth-child(even){ background:var(--surface); }
.article-body blockquote{ margin:1.4em 0; padding:.9em 1.2em; border-left:4px solid var(--accent); background:var(--surface); font-style:italic; color:var(--text); }
.article-body figure{ margin:1.4em 0; }
.article-body figcaption{ font-size:.82rem; color:var(--muted); margin-top:.5em; }
.article-body code{ background:var(--surface); border:1px solid var(--border); padding:.1em .4em; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.article-body a{ color:var(--link); }
.article-body a:hover{ color:var(--accent); }

.article-body .anzeige, .article-body .anzeige-block{
	background:#ebf4f4; border:1px solid var(--primary); border-left:4px solid var(--primary);
	padding:16px 18px; margin:1.8em 0;
}
.article-body .anzeige p:first-child, .article-body .anzeige-block p:first-child{ margin-bottom:.6em; }
.article-body .anzeige strong:first-child, .article-body .anzeige-block strong:first-child{
	display:inline-block; background:var(--primary); color:var(--text); font-family:var(--font-heading);
	font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.25em .6em; margin-bottom:.4em;
}
.article-body .anzeige a, .article-body .anzeige-block a{ color:#1a5359; font-weight:600; }

.belegstatus{ margin:2em 0 0; padding:16px 18px; background:var(--surface); border:1px solid var(--border); font-size:.85rem; color:var(--muted); }
.belegstatus h2{ font-size:.95rem; margin-top:0; color:var(--text); }
.belegstatus ul{ margin-bottom:0; }

.article-nav{ border-top:1px solid var(--border); margin-top:12px; padding:26px 0 50px; }
.article-nav h2{ margin-top:0; font-size:1.05rem; }
.article-nav .card-grid{ margin-bottom:0; }

/* -------------------------------------------------------------------------
 * 10. Statische Seiten (page.php)
 * ---------------------------------------------------------------------- */
.page-header{ border-bottom:1px solid var(--border); padding-bottom:18px; }
.page-body{ max-width:72ch; padding:30px 0 56px; font-size:1.02rem; }
.page-body h2{ font-size:1.2rem; }
.page-body a{ color:var(--link); }
.page-body a:hover{ color:var(--accent); }
.kontakt-box{ border:1px solid var(--border); background:var(--surface); padding:20px 22px; margin-top:20px; }
.kontakt-box dt{ font-weight:700; color:var(--secondary); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; margin-top:14px; }
.kontakt-box dt:first-child{ margin-top:0; }
.kontakt-box dd{ margin:2px 0 0; }
.kontakt-box a{ color:var(--accent); }

/* -------------------------------------------------------------------------
 * 11. Footer
 * ---------------------------------------------------------------------- */
.site-footer{ background:var(--footer-bg); color:var(--footer-text); border-top:2px solid var(--secondary); margin-top:20px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; padding:40px 0 26px; }
.footer-col h4{ font-family:var(--font-heading); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--secondary); margin:0 0 12px; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:8px; font-size:.92rem; }
.footer-col a{ color:var(--footer-text); text-decoration:none; }
.footer-col a:hover{ color:var(--accent); text-decoration:underline; }
.footer-about p{ font-size:.9rem; color:var(--muted); margin:0 0 10px; }
.footer-bottom{ border-top:1px solid var(--border); padding:18px 0 28px; }
.footer-legal-line{ font-size:.82rem; color:var(--muted); margin:0 0 8px; }
.footer-transparency{ font-size:.85rem; margin:0 0 14px; }
.footer-transparency a{ color:var(--accent); }
.footer-bottom-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--muted); }
.footer-bottom-links a{ color:var(--muted); margin-left:16px; }
.footer-bottom-links a:first-child{ margin-left:0; }
.footer-bottom-links a:hover{ color:var(--accent); }

.back-to-top{
	position:fixed; right:18px; bottom:18px; width:42px; height:42px;
	background:var(--secondary); color:#ffffff; border:none; display:none; align-items:center; justify-content:center;
	z-index:80;
}
.back-to-top svg{ width:18px; height:18px; }
.back-to-top.is-visible{ display:flex; }
.back-to-top:hover{ background:var(--accent); }

/* -------------------------------------------------------------------------
 * 12. 404
 * ---------------------------------------------------------------------- */
.error-404{ padding:60px 0 70px; max-width:64ch; }
.error-404 .code{ font-family:var(--font-heading); font-size:.85rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }

/* -------------------------------------------------------------------------
 * 13. Mobil (< 900px)
 * ---------------------------------------------------------------------- */
@media (max-width:899px){
	.catalog-layout{ grid-template-columns:1fr; }
	.card-grid{ grid-template-columns:1fr 1fr; }
	.footer-grid{ grid-template-columns:1fr 1fr; }
	.filter-sidebar summary{ cursor:pointer; }
	.filter-sidebar summary .chev{ display:inline-block; font-size:1.1rem; }
}

@media (max-width:640px){
	table.datentabelle{ min-width:560px; }
	.article-body table{ min-width:480px; }
	.container{ padding:0 16px; }
	.burger-toggle{ display:flex; }
	.cat-nav{ display:none; }
	.cat-nav.is-open{ display:block; }
	.cat-nav ul{ flex-direction:column; }
	.cat-nav a{ border-right:none; border-bottom:1px solid var(--border); }
	.header-phone span.txt{ display:none; }
	.site-tagline{ display:none; }
	.header-top{ flex-wrap:nowrap; }
	.site-logo{ flex-shrink:0; }
	.card-grid{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns:1fr; padding:32px 0 18px; }
	.datenblatt-meta{ flex-direction:column; }
	.datenblatt-meta .dm-field{ min-width:0; }
	.footer-bottom-row{ flex-direction:column; }
	.footer-bottom-links a{ margin-left:0; margin-right:14px; }
	h1{ font-size:1.5rem; }
}