/*
Theme Name: Hallenboden-Ratgeber (gewerbebodenbeschichtung.de)
Theme URI: https://gewerbebodenbeschichtung.de/
Author: Zurynski, Oezdogan & Co GmbH
Description: Eigenständiges Theme "Hallenboden-Werkstattjournal" für gewerbebodenbeschichtung.de: Topbar, Sticky-Header, Split-Hero mit Suche und Themenkacheln, Vergleichstabelle mit Belastungsampel, Lexikon A–Z, vierspaltiger dunkler Fuß.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: t-gewerbebodenbeschichtung-de
*/

:root{
  --bg:#f6f7f8; --surface:#ffffff; --text:#1c2329; --muted:#5d6b75; --primary:#2f4858; --accent:#e08a1e; --link:#0b6e8a;
  --meta:#434f58;            /* abgedunkelte Stufe von --muted für lesbaren Nebentext (≥ 7:1) */
  --line:#d3d9de; --line-strong:#aeb8bf; --gelb:#f2c200;
  --r:2px;
  --f-head:'Barlow','Arial Narrow',Arial,sans-serif;
  --f-body:'Source Sans 3','Segoe UI',Arial,sans-serif;
  --warn:repeating-linear-gradient(-45deg,var(--gelb) 0 12px,var(--text) 12px 24px);
  --raster:linear-gradient(rgba(47,72,88,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(47,72,88,.06) 1px,transparent 1px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:18px;line-height:1.65;overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--primary);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.18;color:var(--text);margin:0 0 .5em;font-weight:600;letter-spacing:.1px}
p{margin:0 0 1em}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px;top:8px}

/* Disclaimer vom Kern: nur einpassen, nie verstecken */
.ps-disclaimer{font-family:var(--f-body)!important;font-size:16px!important}

/* ---------- Topbar + Kopf ---------- */
.topbar{background:var(--primary);color:#fff;font-size:15px}
.topbar a{color:#fff}
.topbar-row{display:flex;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px}
.topbar p{margin:0}
.topbar-info{font-family:var(--f-head);letter-spacing:.4px;text-transform:uppercase;font-weight:500}
.site-head{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(28,35,41,.04)}
.admin-bar .site-head{top:32px}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand:hover{color:var(--text)}
.marke{flex:none;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--f-head);font-weight:600;font-size:26px;text-transform:uppercase;letter-spacing:.6px}
.brand-dash{color:var(--accent)}
.brand-sub{font-size:15px;color:var(--meta);margin-top:4px;letter-spacing:.2px}
.hauptnav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.hauptnav a{display:block;padding:24px 14px 20px;font-family:var(--f-head);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.6px;color:var(--text);text-decoration:none;border-bottom:5px solid transparent}
.hauptnav a:hover{border-bottom-color:var(--line-strong);color:var(--text)}
.hauptnav .ist-aktiv a{border-bottom-color:var(--accent)}

/* ---------- Warnstreifen ---------- */
.streifen{height:10px;background:var(--warn)}
.streifen-schmal{height:6px}

/* ---------- Hero ---------- */
.hero{background-color:var(--surface);background-image:var(--raster);background-size:32px 32px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:5fr 6fr;gap:48px;align-items:center;padding-top:48px;padding-bottom:48px;min-height:440px}
.kicker{font-family:var(--f-head);text-transform:uppercase;letter-spacing:1px;font-weight:600;font-size:16px;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:6px;background:var(--accent)}
.hero h1{font-size:46px;margin-bottom:16px}
.hero-lead{font-size:19px;color:var(--text);max-width:560px}
.suche{margin-top:24px;max-width:560px}
.suche label{display:block;font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.6px;font-size:15px;margin-bottom:6px}
.suche-zeile{display:flex;border:2px solid var(--primary);border-radius:var(--r);background:var(--surface)}
.suche input{flex:1;min-width:0;border:0;padding:12px 14px;font:inherit;font-size:17px;color:var(--text);background:transparent;border-radius:0}
.suche input::placeholder{color:var(--meta);opacity:1}
.suche button{border:0;background:var(--primary);color:#fff;font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.6px;font-size:17px;padding:0 22px;cursor:pointer}
.suche button:hover{background:var(--text)}
.hero-kacheln{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-height:360px}
.hk{position:relative;display:block;overflow:hidden;border-radius:var(--r);text-decoration:none;color:var(--text);border:1px solid var(--line-strong);min-height:170px;background:var(--primary)}
.hk-gross{grid-row:1 / span 2}
.hk-muster,.hk-muster svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hk-text{position:absolute;left:12px;right:12px;bottom:12px;background:var(--surface);padding:12px 14px;border-left:6px solid var(--accent);display:flex;flex-direction:column;gap:2px;font-size:16px;line-height:1.4}
.hk-text strong{font-family:var(--f-head);font-size:21px;font-weight:600;line-height:1.15}
.hk-nr{font-family:var(--f-head);font-weight:600;font-size:14px;letter-spacing:1px;color:var(--meta)}
.hk:hover .hk-text{background:var(--text);color:#fff}
.hk:hover .hk-nr{color:#e9edf0}

/* ---------- Sektionen ---------- */
.sektion{padding:64px 0}
.sek-kopf{margin-bottom:28px;max-width:820px}
.sek-nr{display:inline-block;font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:15px;color:var(--text);margin-bottom:8px;padding-left:36px;position:relative}
.sek-nr::before{content:"";position:absolute;left:0;top:50%;width:26px;height:8px;margin-top:-4px;background:var(--warn)}
.sek-nr-hell{color:#fff}
.sek-kopf h2{font-size:36px;margin-bottom:10px}
.sek-lead{color:var(--meta);font-size:18px}
.mehr-link{margin-top:20px;font-weight:600}
.mehr-link a::after{content:" →"}

/* Themenkacheln */
.themen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.thema{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 20px 20px;display:flex;flex-direction:column}
.thema-muster{margin:0 -20px 18px;height:74px;overflow:hidden;border-bottom:4px solid var(--text)}
.thema-muster svg{width:100%;height:100%;display:block}
.thema h3{font-size:25px;text-transform:uppercase;letter-spacing:.5px}
.thema p{font-size:17px;color:var(--text)}
.thema-links{list-style:none;margin:auto 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.thema-links li{padding:6px 0 6px 18px;position:relative;font-size:17px;line-height:1.4}
.thema-links li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;background:var(--accent)}
.soon{color:var(--meta)}
.soon small{display:inline-block;font-size:14px;border:1px solid var(--line-strong);padding:0 5px;margin-left:4px;border-radius:var(--r);white-space:nowrap}
.soon-inline{border-bottom:1px dashed var(--meta)}

/* News-Grid */
.news{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.karte{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.karte-muster{display:block;height:150px;overflow:hidden;border-bottom:4px solid var(--accent)}
.karte-muster svg{width:100%;height:100%;display:block}
.karte-inhalt{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.karte h3{font-size:23px}
.karte h3 a{color:var(--text);text-decoration:none}
.karte h3 a:hover{color:var(--link);text-decoration:underline}
.karte-auszug{font-size:17px}
.karte .meta{margin-top:auto;margin-bottom:0}
.karte-erste{box-shadow:inset 0 0 0 2px var(--primary)}
.karte-geplant{border-style:dashed;border-color:var(--line-strong);background:var(--bg)}
.karte-geplant .karte-muster{opacity:.55;border-bottom-color:var(--line-strong)}
.karte-geplant h3{color:var(--text)}
.soon-badge{display:inline-block;font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.6px;font-size:14px;color:var(--text);border:1px solid var(--text);padding:1px 8px;border-radius:var(--r)}
.etikett{font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.8px;font-size:15px;color:var(--primary);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.etikett::before{content:"";width:12px;height:12px;background:var(--accent);flex:none}
.meta{font-size:16px;color:var(--meta)}

/* Vergleich mit Ampel */
.tabelle-scroll{overflow-x:auto;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.ampel-tabelle{width:100%;border-collapse:collapse;min-width:720px;font-size:17px}
.ampel-tabelle th,.ampel-tabelle td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ampel-tabelle thead th{background:var(--primary);color:#fff;font-family:var(--f-head);font-weight:600;font-size:19px;letter-spacing:.3px}
.ampel-tabelle tbody th{font-family:var(--f-head);font-weight:600;font-size:18px;width:26%;background:#fbfbfc}
.ampel-tabelle tbody tr:nth-child(even) td{background:#fafbfb}
.ampel{display:inline-flex;align-items:center;gap:8px}
.ampel-punkt{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;border:2px solid transparent}
.ampel-gut .ampel-punkt{background:#2e7d32}
.ampel-mittel .ampel-punkt{background:var(--accent)}
.ampel-schwach .ampel-punkt{background:#c0392b}
.ampel-offen .ampel-punkt{background:transparent;border-color:var(--muted)}
.ampel-notiz{display:block;font-size:16px;color:var(--meta);margin-top:2px;line-height:1.4}
.ampel-legende{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:14px 0 0;font-size:16px}
.ampel-legende li{display:flex;align-items:center;gap:6px}
.tabelle-fuss{font-size:16px;color:var(--meta);margin-top:10px}

/* Gebäudehülle */
.huelle{background:var(--primary);color:#fff;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px}
.huelle h2{color:#fff;font-size:36px}
.huelle a{color:#fff}
.huelle-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.gewerke{list-style:none;margin:24px 0 10px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);border:1px solid rgba(255,255,255,.35)}
.gewerke li{padding:12px 10px 14px;font-size:16px;line-height:1.3;border-right:1px dashed rgba(255,255,255,.4);font-family:var(--f-head);font-weight:500}
.gewerke li:last-child{border-right:0}
.gewerke span{display:block;width:30px;height:30px;line-height:30px;text-align:center;background:var(--gelb);color:var(--text);font-weight:600;margin-bottom:8px;font-size:17px}
.huelle-quelle{font-size:16px;color:#e9edf0}
.huelle-links{list-style:none;padding:0;margin:20px 0 0}
.huelle-links li{padding:8px 0;border-top:1px solid rgba(255,255,255,.25);font-size:17px}
.huelle .soon{color:#e9edf0}
.huelle .soon small{border-color:rgba(255,255,255,.6)}

/* Anzeige-Box (einziger Theme-Werbeplatz) */
.ad-box{background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-top:5px solid var(--accent);border-radius:var(--r);padding:18px 20px 16px;position:relative}
.ad-tag{display:inline-block;background:var(--accent);color:var(--text);font-family:var(--f-head);font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:2px 10px 2px 8px;clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);margin-bottom:10px}
.ad-titel{font-family:var(--f-head);font-weight:600;font-size:21px;line-height:1.2;margin-bottom:8px}
.ad-text{font-size:16px;line-height:1.5}
.huelle .ad-box a.ad-knopf,.ad-knopf{display:block;text-align:center;background:var(--text);color:#fff;text-decoration:none;font-family:var(--f-head);font-weight:600;letter-spacing:.4px;font-size:17px;padding:10px 12px;border-radius:var(--r)}
.ad-knopf:hover{background:var(--primary);color:#fff}
.ad-hinweis{font-size:15px;color:var(--meta);margin:10px 0 0;line-height:1.4}

/* Lexikon-Teaser */
.az ol{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.az li a,.az li span{display:block;width:38px;height:38px;line-height:36px;text-align:center;font-family:var(--f-head);font-weight:600;font-size:18px;border:1px solid var(--line-strong);border-radius:var(--r);text-decoration:none}
.az li a{background:var(--surface);color:var(--text);border-color:var(--text)}
.az li a:hover{background:var(--accent)}
.az li span{color:#9aa5ad;border-color:var(--line);background:transparent}
.lex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}
.lex-eintrag{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--primary);padding:16px 18px;border-radius:var(--r)}
.lex-eintrag dt{font-family:var(--f-head);font-weight:600;font-size:20px;margin-bottom:6px}
.lex-eintrag dd{margin:0;font-size:17px;line-height:1.5}

/* Über-Leiste */
.ueber-leiste{background:var(--surface);border-top:1px solid var(--line);padding:36px 0}
.ueber-grid{display:grid;grid-template-columns:280px 1fr auto;gap:32px;align-items:center}
.ueber-grid h2{font-size:24px;margin:0}
.ueber-grid p{margin:0}
.ueber-links{display:flex;gap:16px;font-weight:600;white-space:nowrap}

/* ---------- Fuß ---------- */
.site-foot{background:var(--text);color:#e9edf0;padding:48px 0 0;font-size:16px}
.site-foot a{color:#fff}
.site-foot a:hover{color:#ffd28f}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.foot-col h2{color:#fff;font-size:18px;text-transform:uppercase;letter-spacing:1px;padding-bottom:8px;border-bottom:3px solid var(--accent);display:inline-block}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{padding:4px 0}
.foot-betreiber{line-height:1.5}
.foot-transparenz{border-top:1px solid #3a454e;margin-top:32px;padding-top:20px;padding-bottom:4px}
.foot-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #3a454e;padding-top:16px;padding-bottom:20px;font-size:15px}
.foot-unten p{margin:0}

/* ---------- Artikel ---------- */
.artikel-kopf{background:var(--surface);background-image:var(--raster);background-size:32px 32px;padding:28px 0 32px;border-bottom:1px solid var(--line)}
.brotkrumen{font-size:16px;color:var(--meta);margin-bottom:18px}
.brotkrumen a{color:var(--link)}
.artikel-kopf h1{font-size:44px;max-width:960px}
.artikel-lead{font-size:20px;max-width:860px;color:var(--text)}
.artikel-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding-top:36px;padding-bottom:64px;align-items:start}
.artikel{min-width:0}
.toc-oben{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:18px 22px;margin-bottom:24px}
.toc-titel,.fakten-titel,.sl-titel{font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.8px;font-size:16px;margin-bottom:10px}
.toc-oben ol{margin:0;padding-left:24px;columns:2;column-gap:36px;font-size:17px}
.toc-oben li{break-inside:avoid;padding:3px 0;line-height:1.4}
.fakten{background:#fff6ea;border:1px solid #f0cfa0;border-left:6px solid var(--accent);padding:18px 22px;margin-bottom:32px;border-radius:var(--r)}
.fakten ul{margin:0;padding-left:20px}
.fakten li{margin-bottom:6px}
.inhalt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:36px 44px}
.seite .inhalt{max-width:860px}
.inhalt > *:last-child{margin-bottom:0}
.inhalt h2{font-size:31px;margin-top:1.6em;padding-top:18px;position:relative}
.inhalt h2::before{content:"";position:absolute;top:0;left:0;width:56px;height:6px;background:var(--warn)}
.inhalt > h2:first-child{margin-top:0}
.inhalt h3{font-size:23px;margin-top:1.4em}
.inhalt ul,.inhalt ol{padding-left:24px;margin:0 0 1.2em}
.inhalt li{margin-bottom:6px}
.inhalt li::marker{color:var(--primary);font-weight:600}
.inhalt strong{font-weight:700}
.inhalt figure{margin:1.4em 0}
.wp-block-table{overflow-x:auto;margin:1.4em 0}
.inhalt table{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.45;min-width:560px}
.inhalt th,.inhalt td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.inhalt thead th{background:var(--primary);color:#fff;font-family:var(--f-head);font-weight:600;font-size:17px;border-color:var(--primary)}
.inhalt tbody tr:nth-child(even) td{background:#f8f9fa}
.inhalt tbody td:first-child{font-weight:600}
.anzeige{border:2px solid var(--accent);background:#fffaf3;padding:16px 20px;margin:1.6em 0;border-radius:var(--r);font-size:17px}
.anzeige p{margin:0}
.anzeige-label{display:inline-block;background:var(--accent);color:var(--text);font-family:var(--f-head);font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:2px 10px 2px 8px;margin-bottom:8px;clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%)}
.belegstatus,.inhalt .beleg{font-size:16px;color:var(--meta);border-top:1px dashed var(--line-strong);padding-top:10px}
.quellen{margin-top:32px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--primary);padding:24px 28px;border-radius:var(--r)}
.quellen h2{font-size:24px}
.quellen ol{margin:0 0 12px;padding-left:22px;font-size:17px}
.quellen li{margin-bottom:6px}
.quelle-host{color:var(--meta);font-size:15px;white-space:nowrap}
.quelle-host::before{content:"· "}
.quellen-hinweis{font-size:16px;color:var(--meta);margin:0}
.artikel-fuss{margin-top:24px;font-size:16px;color:var(--meta);border-left:4px solid var(--line-strong);padding-left:14px}
.weitere{margin-top:28px}
.weitere h2{font-size:24px}
.weitere ul{list-style:none;padding:0;margin:0}
.weitere li{border-top:1px solid var(--line);padding:10px 0;font-weight:600}
.weitere-leer{margin-top:24px;font-size:17px}

/* Seitenleiste */
.seitenleiste{min-width:0}
.sl-sticky{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.admin-bar .sl-sticky{top:128px}
.sl-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.sl-toc ol{list-style:none;margin:0;padding:0;font-size:16px;counter-reset:k}
.sl-toc li{counter-increment:k;line-height:1.35}
.sl-toc a{display:block;padding:6px 0 6px 30px;position:relative;color:var(--text);text-decoration:none;border-left:3px solid transparent;margin-left:-18px;padding-left:44px}
.sl-toc a::before{content:counter(k,decimal-leading-zero);position:absolute;left:15px;top:6px;font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--meta)}
.sl-toc a:hover{color:var(--link);text-decoration:underline}
.sl-toc a.ist-aktiv{border-left-color:var(--accent);font-weight:600;background:#fdf3e6}
.sl-lex ul{list-style:none;margin:0 0 10px;padding:0}
.sl-lex li{padding:4px 0;border-bottom:1px dotted var(--line-strong);font-size:16px}
.sl-mehr{font-weight:600;font-size:16px}

/* Lexikon-Seite */
.lex-intro{max-width:820px}
.az-sticky{position:sticky;top:77px;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-top:12px}
.admin-bar .az-sticky{top:109px}
.az-sticky .az ol{margin-bottom:12px}
.lex-wrap{padding-top:28px;padding-bottom:64px}
.lex-gruppe,.lex-hinweis{max-width:1000px}
.lex-gruppe{display:grid;grid-template-columns:80px 1fr;gap:24px;border-top:3px solid var(--text);padding:18px 0 8px;scroll-margin-top:150px}
.lex-buchstabe{font-size:56px;line-height:1;color:var(--primary);margin:0}
.lex-gruppe dl{margin:0}
.lex-zeile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:12px;scroll-margin-top:160px}
.lex-zeile:target{border-color:var(--accent);box-shadow:inset 5px 0 0 var(--accent)}
.lex-zeile dt{font-family:var(--f-head);font-weight:600;font-size:22px;margin-bottom:4px}
.lex-zeile dd{margin:0}
.lex-zeile dd p{margin:0 0 6px}
.lex-quelle{font-size:16px;color:var(--meta)}
.lex-hinweis{font-size:16px;color:var(--meta);margin-top:24px}

/* Seiten, Liste */
.seite-wrap{padding-top:36px;padding-bottom:64px}
.liste-wrap{padding-top:32px;padding-bottom:64px}
.treffer,.leer{max-width:900px}
.treffer{list-style:none;padding:0;margin:0}
.treffer li{background:var(--surface);border:1px solid var(--line);padding:18px 22px;margin-bottom:12px;border-radius:var(--r)}
.treffer h2{font-size:24px}
.treffer h2 a{color:var(--text)}
.knopf{display:inline-block;background:var(--primary);color:#fff;padding:10px 18px;text-decoration:none;font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.6px;border-radius:var(--r);margin-top:16px}
.knopf:hover{background:var(--text);color:#fff}

/* ---------- Responsiv ---------- */
@media (max-width:1100px){
  .themen-grid{grid-template-columns:repeat(2,1fr)}
  .gewerke{grid-template-columns:repeat(4,1fr)}
  .gewerke li{border-bottom:1px dashed rgba(255,255,255,.4)}
  .huelle-grid{grid-template-columns:1fr 320px}
  .ueber-grid{grid-template-columns:1fr}
}
@media (max-width:960px){
  .head-row{flex-direction:column;align-items:flex-start;gap:0;min-height:0;padding-top:10px}
  .hauptnav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hauptnav ul{gap:0}
  .hauptnav a{padding:12px 12px 10px;font-size:16px;white-space:nowrap}
  .hauptnav li:first-child a{padding-left:0}
  .site-head{position:sticky}
  html{scroll-padding-top:120px}
  .az-sticky{top:110px}
  .hero-grid{grid-template-columns:1fr;gap:28px;min-height:0;padding-top:32px;padding-bottom:32px}
  .hero-kacheln{min-height:0}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .lex-grid{grid-template-columns:repeat(2,1fr)}
  .huelle-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .artikel-grid{grid-template-columns:1fr;gap:28px}
  .sl-sticky{position:static}
  .sl-toc{display:none}
}
@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .topbar-info{display:none}
  .topbar-kontakt .tb-extra{display:none}
  .hauptnav ul{justify-content:space-between}
  .hauptnav a{padding:11px 0 9px;font-size:15px;letter-spacing:.3px}
  .hk{min-height:128px}
  .topbar{font-size:14px}
  .brand-name{font-size:21px}
  .brand-sub{font-size:14px}
  .marke{width:34px;height:34px}
  .hero h1{font-size:33px}
  .hero-lead{font-size:18px}
  .hero-kacheln{grid-template-columns:1fr;grid-template-rows:none}
  .hk-gross{grid-row:auto}
  .hk{min-height:128px}
  .suche button{padding:0 14px}
  .sektion{padding:44px 0}
  .sek-kopf h2,.huelle h2{font-size:28px}
  .themen-grid,.news-grid,.lex-grid,.foot-grid{grid-template-columns:1fr}
  .gewerke{grid-template-columns:1fr}
  .gewerke li{display:flex;align-items:center;gap:12px;border-right:0;padding:8px 12px}
  .gewerke span{margin:0}
  .artikel-kopf h1{font-size:31px}
  .artikel-lead{font-size:18px}
  .toc-oben ol{columns:1}
  .inhalt{padding:22px 16px;border-left:0;border-right:0;margin:0 -16px;border-radius:0}
  .inhalt h2{font-size:25px}
  .inhalt h3{font-size:21px}
  .lex-gruppe{grid-template-columns:1fr;gap:8px}
  .tabelle-scroll{overflow:visible;border:0;background:transparent}
  .ampel-tabelle{min-width:0;display:block}
  .ampel-tabelle thead{display:none}
  .ampel-tabelle tbody,.ampel-tabelle tr,.ampel-tabelle th,.ampel-tabelle td{display:block;width:auto}
  .ampel-tabelle tr{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);margin-bottom:12px}
  .ampel-tabelle tbody th{background:var(--primary);color:#fff;width:auto;padding:10px 14px}
  .ampel-tabelle td{padding:10px 14px;display:grid;grid-template-columns:118px 1fr;gap:2px 10px;background:var(--surface)!important}
  .ampel-tabelle td::before{content:attr(data-system);grid-row:1 / span 2;font-weight:600;font-size:16px;line-height:1.35}
  .ampel-tabelle tr td:last-child{border-bottom:0}
  .lex-buchstabe{font-size:40px}
  .az li a,.az li span{width:34px;height:34px;line-height:32px;font-size:16px}
  .az-sticky{position:static}
  .quellen{padding:18px 16px}
  .ueber-links{flex-wrap:wrap}
}

/* === Tabellen-Fix 04.10.2026: keine Umbrueche mitten im Wort, Scroll im Wrapper === */
html[lang^="de"] table th,html[lang^="de"] table td{word-break:normal!important;overflow-wrap:normal!important;hyphens:auto!important;-webkit-hyphens:auto!important}
html[lang^="de"] table td a[href^="http"],html[lang^="de"] table th a[href^="http"]{overflow-wrap:anywhere!important}
figure.wp-block-table,.tablewrap,.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}