/*
Theme Name: Nano-Fassadenwissen (nanoprotection.de)
Description: Labor-Notizbuch-Magazin fuer nanoprotection.de - Themenwelten, Faktenbox mit Quellen-Ampel, Glossar-Tooltips.
Version: 1.0.0
Text Domain: t-nanoprotection-de
*/
:root{
  --bg:#f6fafb; --surface:#ffffff; --text:#12262d; --muted:#5c727a; --muted-text:#3f545c;
  --primary:#0b6e7f; --primary-d:#07525f; --accent:#f2a81d; --link:#0a7c91; --link-d:#07606f;
  --line:#d3e1e5; --tint:#e6f2f5; --dark:#0c2a32; --radius:10px;
  --f-head:'Manrope','Segoe UI',Arial,sans-serif; --f-body:'Source Sans 3','Segoe UI',Arial,sans-serif;
}
*,*::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:400 1.125rem/1.65 var(--f-body);overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.15em}
a:hover{color:var(--link-d)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,.gl:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--text);line-height:1.2;margin:0 0 .6em;font-weight:800}
p{margin:0 0 1.1em}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wrap--breit{max-width:1340px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--text);padding:.6em 1em;z-index:100}
.skip:focus{left:8px;top:8px}

/* Disclaimer des Kerns: gestylt, nie versteckt */
.ps-disclaimer{background:#fff6dc!important;color:var(--text)!important;border-bottom:1px solid #e9cf86!important;border-left:6px solid var(--accent);font:400 .98rem/1.5 var(--f-body)!important;padding:10px 0!important}
.ps-disclaimer__inner{max-width:1340px!important;margin:0 auto;padding:0 24px}

/* Topbar */
.topbar{background:var(--primary-d);color:#fff;font:600 .875rem/1.4 var(--f-body)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 18px;flex-wrap:wrap}
.topbar li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px}
.topbar__r{color:#d9edf1}

/* Kopf */
.kopf{background:var(--surface);border-bottom:1px solid var(--line)}
.kopf__row{display:flex;align-items:center;gap:28px;min-height:68px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font:800 1.35rem/1 var(--f-head);letter-spacing:-.01em;white-space:nowrap}
.logo:hover{color:var(--text)}
.logo svg{flex:none}
.logo b{color:var(--primary-d);font-weight:800}
.hnav{flex:1}
.hnav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:nowrap}
.hnav a{white-space:nowrap;display:block;padding:.55em .7em;border-radius:8px;text-decoration:none;color:var(--text);font:600 1rem var(--f-head)}
.hnav a:hover{background:var(--tint);color:var(--primary-d)}
.hnav a[aria-current="page"]{background:var(--tint);color:var(--primary-d);box-shadow:inset 0 -3px 0 var(--accent)}
.suche{display:flex;border:1px solid #9bb4bb;border-radius:999px;background:#fff;overflow:hidden}
.suche input{border:0;background:transparent;padding:.5em 1em;font:inherit;font-size:1rem;color:var(--text);width:150px;min-width:0}
.suche input:focus-visible{outline-offset:-3px}
.suche button{border:0;background:var(--primary-d);color:#fff;padding:0 1em;cursor:pointer;font:600 .95rem var(--f-head)}
.suche button:hover{background:var(--text)}
.navbtn{display:none;margin-left:auto;border:1px solid #9bb4bb;background:#fff;color:var(--text);border-radius:8px;padding:.5em .8em;font:700 .95rem var(--f-head);cursor:pointer}
.band{display:block;width:100%;height:34px}

/* Hero */
.hero{background:linear-gradient(180deg,#fff 0,var(--bg) 100%);border-bottom:1px solid var(--line);padding:56px 0 48px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.kicker{display:inline-block;font:700 .85rem/1 var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--primary-d);margin-bottom:16px;padding-bottom:6px;border-bottom:3px solid var(--accent)}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.02em;margin-bottom:.45em}
.kurz{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:var(--radius);padding:18px 22px;margin:0 0 24px;max-width:40em}
.kurz strong{font-family:var(--f-head);color:var(--primary-d)}
.kurz p{margin:0}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:.75em 1.35em;border-radius:999px;font:700 1rem var(--f-head);text-decoration:none;border:2px solid var(--primary-d);background:var(--primary-d);color:#fff}
.btn:hover{background:var(--text);border-color:var(--text);color:#fff}
.btn--leer{background:transparent;color:var(--primary-d)}
.btn--leer:hover{background:var(--primary-d);color:#fff;border-color:var(--primary-d)}
.btn--gelb{background:var(--accent);border-color:var(--accent);color:var(--text)}
.btn--gelb:hover{background:#ffc247;border-color:#ffc247;color:var(--text)}
.hero__bild{justify-self:center;width:100%;max-width:440px}
.hero__bild svg{display:block;width:100%;height:auto}

/* Sektionen */
.sek{padding:56px 0}
.sek--weiss{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sek__kopf{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.sek__kopf h2{font-size:clamp(1.55rem,2.6vw,2.1rem);margin:0}
.sek__kopf p{margin:0;color:var(--muted-text);max-width:34em}
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.kachel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:6px;scroll-margin-top:16px}
.kachel__ico{width:56px;height:56px;border-radius:50%;background:var(--tint);display:grid;place-items:center;margin-bottom:10px;border:1px solid #b9d6dd}
.kachel h3{font-size:1.3rem;margin:0}
.kachel p{margin:0 0 8px;color:var(--text)}
.kachel__mehr{margin-top:auto;font:700 1rem var(--f-head);color:var(--link-d)}
.kachel__bald{margin-top:auto;font:600 .95rem var(--f-body);color:var(--muted-text)}
.kachel__num{font:700 .8rem var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--primary-d)}

.zwei{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}
.seite{display:flex;flex-direction:column;gap:22px}

.karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:44px}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:8px}
.karte h3{font-size:1.2rem;margin:0}
.karte h3 a{color:var(--text);text-decoration:none}
.karte h3 a:hover{color:var(--link-d);text-decoration:underline}
.karte p{margin:0;color:var(--muted-text);font-size:1rem}
.karte__meta{font-size:.9rem;color:var(--muted-text);margin-top:auto;padding-top:8px}
.karte--bald{background:transparent;border:1px dashed #8fa9b1}
.tag{display:inline-block;align-self:flex-start;font:700 .78rem/1 var(--f-head);letter-spacing:.05em;text-transform:uppercase;padding:.45em .75em;border-radius:999px;background:var(--tint);color:var(--primary-d);border:1px solid #b9d6dd}
.tag--bald{background:#fff6dc;border-color:#e9cf86;color:#4a3a05}

/* Tabellen */
.tabwrap{overflow-x:auto;margin:0 0 1.5em;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tabwrap table,.entry-content table{border-collapse:collapse;width:100%;min-width:620px;font-size:1rem}
.tabwrap th,.tabwrap td,.entry-content th,.entry-content td{padding:.75em .9em;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);word-break:normal;overflow-wrap:normal;hyphens:manual}
.tabwrap thead th,.entry-content thead th{background:var(--tint);font:700 .95rem var(--f-head);color:var(--text);border-bottom:2px solid var(--primary)}
.tabwrap tbody th{font-weight:700;background:#fafdfd}
.tabwrap tr:last-child td,.tabwrap tr:last-child th,.entry-content tr:last-child td{border-bottom:0}
.tabnote{font-size:.95rem;color:var(--muted-text);margin:-.6em 0 0}

/* Ampel-Pillen */
.amp{display:inline-flex;align-items:center;gap:6px;font:700 .78rem/1.1 var(--f-head);padding:.35em .65em;border-radius:999px;border:1px solid;white-space:nowrap;vertical-align:middle}
.amp::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.amp--behoerde{color:#0b5a2e;background:#e4f5ea;border-color:#8fcca6}
.amp--norm{color:var(--primary-d);background:var(--tint);border-color:#9fc9d2}
.amp--hersteller{color:#6a4300;background:#fff1cf;border-color:#e6b84f}

/* Seitenleiste */
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.box h2,.box h3{font-size:1.1rem;margin:0 0 .6em}
.box ul{margin:0;padding:0;list-style:none}
.box li{padding:.5em 0;border-bottom:1px solid var(--line);font-size:1rem}
.box li:last-child{border-bottom:0}
.box a{font-weight:600}
.box--anz{border:2px solid var(--accent);background:#fffaf0;padding:20px;position:relative}
.anz-label,.anzeige-label{display:inline-block;font:700 .78rem/1 var(--f-head);letter-spacing:.07em;text-transform:uppercase;background:var(--accent);color:var(--text);padding:.4em .7em;border-radius:6px;margin-right:.4em}
.box--anz h2{margin-top:12px;font-size:1.2rem}
.box--anz p{font-size:1rem;margin:0 0 .8em}
.box--anz .klein{font-size:.92rem;color:var(--muted-text)}
.box--glossar dt{font:700 1rem var(--f-head);color:var(--primary-d)}
.box--glossar dd{margin:0 0 .8em;font-size:1rem}

/* Glossar-Raster Home */
.gl-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0}
.gl-raster>div{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:var(--radius);padding:16px 18px}
.gl-raster dt{font:800 1.05rem var(--f-head);margin-bottom:.35em}
.gl-raster dd{margin:0;font-size:1rem;line-height:1.55}

/* FAQ */
.faq{max-width:52em}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}
.faq summary{cursor:pointer;padding:15px 20px;font:700 1.08rem var(--f-head);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--primary-d)}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 20px 6px}

/* Kontaktband */
.kontaktband{background:var(--primary-d);color:#fff;padding:38px 0}
.kontaktband .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.kontaktband h2{color:#fff;font-size:1.5rem;margin:0 0 .3em}
.kontaktband p{margin:0;color:#e3f1f4;max-width:38em}
.kontaktband a:not(.btn){color:#fff}

/* Seitenkopf (Artikel/Seiten) */
.seitenkopf{background:var(--surface);border-bottom:1px solid var(--line)}
.seitenkopf .wrap{padding-top:36px;padding-bottom:6px}
.seitenkopf h1{font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.02em;max-width:22em;margin:.4em 0 .35em}
.seitenkopf--schmal h1{max-width:none}
.kette{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;color:var(--muted-text);font-size:1rem;margin-bottom:22px}
.kette span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted);margin-right:16px;vertical-align:middle}
.brotkrumen{font-size:.95rem;color:var(--muted-text)}
.brotkrumen a{color:var(--link-d)}

/* Artikel-Layout */
.inhalt{padding:40px 0 64px}
.beitrag__grid{display:grid;grid-template-columns:200px minmax(0,720px) 290px;grid-template-areas:"toc main side";gap:40px;justify-content:center;align-items:start}
.toc{grid-area:toc;position:sticky;top:20px;font-size:.98rem}
.toc h2{font:700 .8rem var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--primary-d);margin:0 0 .8em}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li a{display:block;padding:.4em 0 .4em 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted-text);text-decoration:none;line-height:1.35}
.toc li a:hover{color:var(--primary-d)}
.toc li a.aktiv{border-left-color:var(--accent);color:var(--text);font-weight:700}
.main{grid-area:main;min-width:0}
.side{grid-area:side}
.fakten{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:var(--radius);padding:22px 24px;margin-bottom:34px}
.fakten h2{font-size:1.2rem;margin:0 0 .8em;display:flex;align-items:center;gap:10px}
.fakten ul{list-style:none;margin:0 0 14px;padding:0}
.fakten li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 14px;padding:.65em 0;border-top:1px solid var(--line);align-items:start;font-size:1.02rem;line-height:1.55}
.fakten li:first-child{border-top:0}
.fakten__leg{font-size:.92rem;color:var(--muted-text);margin:0;padding-top:12px;border-top:1px dashed #9bb4bb}
.fakten__leg .amp{margin:2px 4px 2px 0}
.quellen{margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.quellen h2{font-size:1.25rem}
.quellen ol{margin:0;padding-left:1.3em}
.quellen li{margin-bottom:.5em;font-size:1rem}
.quellen small{color:var(--muted-text)}
.weitere{margin-top:36px}

/* Fliesstext */
.entry-content{font-size:1.125rem}
.entry-content h2{font-size:clamp(1.5rem,2.6vw,1.85rem);margin:1.9em 0 .55em;padding-top:.2em;scroll-margin-top:20px}
.entry-content h3{font-size:1.28rem;margin:1.5em 0 .5em}
.entry-content ul,.entry-content ol{padding-left:1.3em;margin:0 0 1.2em}
.entry-content li{margin-bottom:.45em}
.entry-content li::marker{color:var(--primary);font-weight:700}
.entry-content .wp-block-table{margin:1.4em 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.entry-content .wp-block-table table{margin:0}
.entry-content blockquote{margin:1.4em 0;padding:.2em 1.2em;border-left:4px solid var(--accent);background:var(--tint);border-radius:0 var(--radius) var(--radius) 0}
.entry-content .anzeige{background:#fffaf0;border:2px solid var(--accent);border-radius:var(--radius);padding:20px 22px;margin:1.8em 0;font-size:1.05rem;line-height:1.6}
.entry-content .anzeige-label{margin-right:.6em}
.entry-content .wp-block-heading+p{margin-top:0}

/* Glossar-Tooltips */
.gl{all:unset;cursor:help;border-bottom:2px dotted var(--primary);color:inherit;font:inherit;padding:0 1px;box-sizing:border-box}
.gl:hover,.gl[aria-expanded="true"]{background:var(--tint)}
#nfw-tip{position:absolute;z-index:60;max-width:320px;background:var(--dark);color:#fff;font:400 .98rem/1.5 var(--f-body);padding:12px 15px;border-radius:var(--radius);box-shadow:0 8px 28px rgba(12,42,50,.3);display:none}
#nfw-tip strong{display:block;font-family:var(--f-head);color:var(--accent);margin-bottom:3px}
#nfw-tip a{color:#9fe0ee}

/* Lesefortschritt */
.ring{position:fixed;right:18px;bottom:18px;width:58px;height:58px;z-index:50;border:0;padding:0;background:var(--surface);border-radius:50%;box-shadow:0 4px 16px rgba(12,42,50,.25);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.ring.sichtbar{opacity:1;pointer-events:auto}
.ring svg{display:block;width:58px;height:58px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .bahn{stroke:var(--line)}
.ring .fort{stroke:var(--primary);stroke-linecap:round;transition:stroke-dashoffset .1s}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font:800 .8rem var(--f-head);color:var(--text)}

/* Seiten, Suche */
.seiteninhalt{max-width:760px}
.seiteninhalt--breit{max-width:none}
.suchtreffer{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.page-glossar-liste .buchst{font:800 2rem var(--f-head);color:var(--primary-d);border-bottom:2px solid var(--accent);display:inline-block;margin:1em 0 .4em;padding-right:1em;scroll-margin-top:16px}
.abc{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px}
.abc a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);font:700 1rem var(--f-head);text-decoration:none}
.abc a:hover{background:var(--tint)}
.abc span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#6d8087;font:700 1rem var(--f-head)}
.begriff{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-bottom:14px;scroll-margin-top:16px}
.begriff h3{font-size:1.2rem;margin:0 0 .35em}
.begriff p{margin:0 0 .5em}
.begriff .quelle{font-size:.95rem;color:var(--muted-text);margin:0}

/* Fuss */
.fuss{background:var(--dark);color:#d7e6ea;margin-top:0;font-size:1rem;line-height:1.6}
.fuss a{color:#a9e3f0}
.fuss a:hover{color:#fff}
.fuss__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;padding:52px 24px 36px}
.fuss h2{font:800 .85rem var(--f-head);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 1em}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.45em}
.fuss p{margin:0 0 .8em}
.fuss__abgr{background:rgba(255,255,255,.07);border-left:4px solid var(--accent);padding:12px 14px;border-radius:0 8px 8px 0;color:#fff}
.fuss__unten{border-top:1px solid rgba(255,255,255,.18)}
.fuss__unten .wrap{padding-top:18px;padding-bottom:22px;font-size:.92rem;color:#c3d6db}
.fuss__unten p{margin:0 0 .35em}

/* Responsiv */
@media (max-width:1320px){
  .beitrag__grid{grid-template-columns:190px minmax(0,720px);grid-template-areas:"toc main" ". side"}
  .side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .side>*{margin:0}
}
@media (max-width:1100px){
  .zwei{grid-template-columns:1fr}
  .seite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .kopf__row{flex-wrap:wrap;gap:10px 16px;padding-top:12px;padding-bottom:12px}
  .navbtn{display:block}
  .js .hnav,.js .kopf .suche{display:none}
  .js .kopf.offen .hnav{display:block;flex-basis:100%}
  .js .kopf.offen .suche{display:flex;flex-basis:100%}
  .hnav ul{flex-direction:column;gap:0;flex-wrap:wrap}
  .hnav a{padding:.75em .6em;border-bottom:1px solid var(--line);border-radius:0}
  .suche input{width:100%;flex:1}
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .hero__bild{max-width:300px}
  .kacheln{grid-template-columns:1fr}
  .beitrag__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"toc" "main" "side"}
  .toc{position:static;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}
  .side{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  .wrap{padding:0 16px}
  .ps-disclaimer__inner{padding:0 16px}
  .hero{padding:32px 0 36px}
  .sek{padding:40px 0}
  .karten,.seite,.gl-raster,.fuss__grid{grid-template-columns:1fr}
  .fuss__grid{padding:40px 16px 28px;gap:28px}
  .fakten{padding:18px}
  .fakten li{grid-template-columns:1fr}
  .logo{font-size:1.15rem}
  .topbar__r{display:none}
  .kontaktband .wrap{display:block}
  .kontaktband .btn{margin-top:16px}
  .quellen{padding:18px}
  .ring{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ring .fort,.ring{transition:none}}