/* Pro & Con Harz – Stylesheet. Layout über eigene Elemente (hz-*), kaum Klassen. */
@font-face{font-family:"Alegreya";src:url("/assets/schrift/alegreya-latin-wght-normal.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url("/assets/schrift/alegreya-latin-wght-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/assets/schrift/instrument-sans-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --nebel:#e9ebe7;--blatt:#fbfbf8;--tinte:#1b1f22;--grau:#56606a;--linie:#cfd3cd;
  --schiefer:#27313d;--schiefer2:#364453;
  --ochsenblut:#8c2f21;--fichte:#2f5e3f;--messing:#c29a45;--messing-hell:#ecd9a8;
  --w-burg:#8c2f21;--w-kirche:#5a4b84;--w-muehle:#9a6d17;--w-museum:#2b5d78;--w-tage:#3b3b3b;--w-natur:#2f5e3f;
  --serif:"Alegreya",Georgia,serif;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breit:1160px;--text:44rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nebel);color:var(--tinte);font:1.0625rem/1.68 var(--sans);overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:var(--ochsenblut);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--serif);line-height:1.15;color:var(--tinte);font-weight:750;letter-spacing:-.005em}
h1{font-size:clamp(2rem,4.6vw,3.1rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:2.1em 0 .55em}
h3{font-size:1.25rem;margin:1.6em 0 .4em}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--messing);outline-offset:2px}
hz-rahmen{display:block;max-width:var(--breit);margin:0 auto;padding:0 20px}
[hidden]{display:none!important}
hz-sprung a{position:absolute;left:-999px;top:0;background:var(--blatt);padding:.6em 1em;z-index:5}
hz-sprung a:focus{left:12px;top:12px}

/* Kopf */
hz-kopf{display:block;background:var(--schiefer);color:#eef0ec}
hz-kopf hz-rahmen{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:16px;padding-bottom:14px;flex-wrap:wrap}
hz-marke a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
hz-marke svg{width:46px;height:46px;flex:none}
hz-marke b{display:block;font:800 1.55rem/1 var(--serif);letter-spacing:.01em}
hz-marke small{display:block;font-size:.78rem;color:#c7ccd2;letter-spacing:.04em;margin-top:4px}
hz-kopf nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 18px;flex-wrap:wrap}
hz-kopf nav a{color:#e6e8e4;text-decoration:none;font-size:.9rem}
hz-kopf nav a:hover,hz-kopf nav a[aria-current]{color:var(--messing-hell);text-decoration:underline}
hz-themen{display:block;background:var(--schiefer2);border-top:1px solid #45535f}
hz-themen ul{list-style:none;margin:0 auto;padding:0 20px;max-width:var(--breit);display:flex;overflow-x:auto;gap:2px;scrollbar-width:thin}
hz-themen a{display:flex;align-items:center;gap:8px;padding:11px 14px 10px;color:#f2f2ee;text-decoration:none;font-size:.9rem;white-space:nowrap;border-bottom:3px solid transparent}
hz-themen a:hover,hz-themen a[aria-current]{border-bottom-color:var(--messing);background:rgba(255,255,255,.05)}

/* Wegzeichen: weißes Feld mit farbiger Form, wie eine Wandermarkierung */
hz-zeichen{display:inline-grid;place-items:center;width:20px;height:20px;background:#fff;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
hz-zeichen i{display:block;width:12px;height:12px;background:var(--f,#333)}
hz-zeichen[data-t=burgen-schloesser] i{--f:var(--w-burg)}
hz-zeichen[data-t=kirchen-kloester] i{--f:var(--w-kirche);width:4px;height:13px;box-shadow:0 0 0 0 transparent;position:relative}
hz-zeichen[data-t=kirchen-kloester] i::after{content:"";position:absolute;left:-4px;top:3px;width:12px;height:4px;background:var(--w-kirche)}
hz-zeichen[data-t=muehlen] i{--f:var(--w-muehle);border-radius:50%}
hz-zeichen[data-t=museen] i{--f:var(--w-museum);transform:rotate(45deg);width:10px;height:10px}
hz-zeichen[data-t=unter-tage] i{--f:var(--w-tage);clip-path:polygon(50% 0,100% 100%,0 100%)}
hz-zeichen[data-t=natur-freizeit] i{--f:var(--w-natur);height:5px;width:14px}
hz-zeichen[data-gross]{width:34px;height:34px}
hz-zeichen[data-gross] i{transform:scale(1.6)}
hz-zeichen[data-gross][data-t=museen] i{transform:rotate(45deg) scale(1.6)}

/* Startseite */
hz-auftakt{display:block;padding:44px 0 26px}
hz-auftakt hz-rahmen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:34px;align-items:center}
hz-auftakt p[data-dach]{font:600 .8rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--ochsenblut);margin:0}
hz-auftakt h1{margin-top:.25em}
hz-auftakt p[data-lead]{font-size:1.16rem;color:#2d3338}
hz-karte{display:block;background:var(--blatt);border:1px solid var(--linie);border-radius:6px;padding:10px 10px 6px}
hz-karte figcaption{font-size:.78rem;color:var(--grau);padding:4px 6px 0}
hz-karte a text{fill:var(--tinte)}
hz-karte a:hover circle,hz-karte a:focus circle{fill:var(--ochsenblut)}
hz-schritte{display:block;background:var(--blatt);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:34px 0}
hz-schritte ol{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
hz-schritte li{counter-increment:s;padding-left:54px;position:relative}
hz-schritte li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;border:2px solid var(--schiefer);display:grid;place-items:center;font:700 1.15rem/1 var(--serif)}
hz-schritte h2{margin:0}
hz-schritte strong{display:block;font-family:var(--serif);font-size:1.15rem}
hz-abschnitt{display:block;padding:40px 0}
hz-abschnitt > hz-rahmen > h2:first-child{margin-top:0}
hz-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
hz-thema{display:block;background:var(--blatt);border:1px solid var(--linie);border-radius:6px;padding:20px 20px 16px;position:relative}
hz-thema h3{display:flex;align-items:center;gap:10px;margin:0 0 .5em}
hz-thema h3 a{color:var(--tinte);text-decoration:none}
hz-thema h3 a::after{content:"";position:absolute;inset:0}
hz-thema:hover{border-color:var(--schiefer)}
hz-thema p{margin:0 0 .6em;font-size:.97rem}
hz-thema small{color:var(--grau);font-size:.82rem}
hz-tabelle{display:block;overflow-x:auto;background:var(--blatt);border:1px solid var(--linie);border-radius:6px}
hz-tabelle table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
hz-tabelle th,hz-tabelle td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid #e3e5e0}
hz-tabelle thead th{background:var(--schiefer);color:#fff;font-weight:600;font-size:.85rem;letter-spacing:.03em}
hz-tabelle tbody tr:last-child td{border-bottom:0}
hz-tabelle td:nth-child(2)::before{content:"+ ";color:var(--fichte);font-weight:700}
hz-tabelle td:nth-child(3)::before{content:"– ";color:var(--ochsenblut);font-weight:700}
hz-wetter{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
hz-wetter section{border-left:4px solid var(--messing);padding:4px 0 4px 16px}
hz-wetter h3{margin-top:0}
hz-empfehlung{display:block;margin-top:26px;padding:16px 18px;border:1px dashed var(--linie);border-radius:6px;background:var(--blatt);font-size:.95rem}

/* Artikel */
hz-pfad{display:block;font-size:.84rem;color:var(--grau);padding:18px 0 0}
hz-pfad ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
hz-pfad li+li::before{content:"›";margin-right:5px;color:#8a9199}
hz-pfad a{color:var(--grau)}
hz-seite{display:grid;grid-template-columns:minmax(0,var(--text)) minmax(0,1fr);gap:40px;padding:6px 0 30px}
hz-seite > article{min-width:0}
hz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:.86rem;color:var(--grau);margin-bottom:1.1em}
hz-meta span{display:inline-flex;align-items:center;gap:7px}
p[data-lead]{font-size:1.18rem;line-height:1.6;color:#2b3136}
figure{margin:1.6em 0}
figure img{display:block;width:100%;border-radius:4px;background:#d8dbd5}
figure[data-hoch] img{max-width:420px;margin:0 auto}
figcaption{font-size:.82rem;color:var(--grau);margin-top:.5em;line-height:1.45}
figure[data-svg]{background:var(--blatt);border:1px solid var(--linie);border-radius:6px;padding:14px}
hz-steckbrief{display:block;background:var(--blatt);border:1px solid var(--linie);border-top:5px solid var(--schiefer);border-radius:4px;padding:16px 18px;font-size:.93rem;position:sticky;top:18px}
hz-steckbrief h2{font-size:1.15rem;margin:0 0 .6em;display:flex;align-items:center;gap:9px}
hz-steckbrief dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
hz-steckbrief dt{color:var(--grau);font-size:.82rem;padding-top:2px}
hz-steckbrief dd{margin:0}
hz-steckbrief p{font-size:.8rem;color:var(--grau);margin:.9em 0 0}
hz-seite aside{min-width:0}
hz-seite aside nav{margin-top:22px;font-size:.92rem}
hz-seite aside nav h2{font-size:1rem;margin:0 0 .5em}
hz-seite aside nav ul{margin:0;padding-left:1.1em}
article ul,article ol{padding-left:1.25em;margin:0 0 1.1em}
article li{margin-bottom:.35em}
hz-merk{display:block;background:#f3eedf;border-left:4px solid var(--messing);padding:14px 18px;margin:1.5em 0;border-radius:0 4px 4px 0;font-size:.98rem}
hz-merk b:first-child{display:block;font-family:var(--serif);font-size:1.08rem;margin-bottom:.2em}
hz-merk p:last-child{margin-bottom:0}
hz-waage{display:block;margin:2.2em 0 1.6em;background:var(--blatt);border:1px solid var(--linie);border-radius:6px;overflow:hidden}
hz-waage > h2{margin:0;padding:14px 18px;font-size:1.3rem;background:var(--schiefer);color:#fff;display:flex;align-items:center;gap:10px}
hz-waage > h2 svg{width:30px;height:30px}
hz-waage > div{display:grid;grid-template-columns:1fr 1fr}
hz-waage section{padding:14px 18px 8px}
hz-waage section + section{border-left:1px solid var(--linie)}
hz-waage h3{margin:0 0 .5em;font-size:1.05rem}
hz-waage section:first-child h3{color:var(--fichte)}
hz-waage section:last-child h3{color:var(--ochsenblut)}
hz-waage ul{list-style:none;padding:0;margin:0}
hz-waage li{position:relative;padding-left:26px;margin-bottom:.6em;font-size:.95rem;line-height:1.5}
hz-waage li::before{position:absolute;left:0;top:.05em;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 .85rem/1 var(--sans);color:#fff}
hz-waage section:first-child li::before{content:"+";background:var(--fichte)}
hz-waage section:last-child li::before{content:"–";background:var(--ochsenblut)}
hz-waage > p{margin:0;padding:12px 18px;border-top:1px solid var(--linie);background:#f1f2ee;font-size:.95rem}
hz-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2.4em 0 0}
hz-blaettern a{display:block;padding:12px 16px;border:1px solid var(--linie);border-radius:6px;background:var(--blatt);text-decoration:none;color:var(--tinte)}
hz-blaettern a:hover{border-color:var(--schiefer)}
hz-blaettern small{display:block;color:var(--grau);font-size:.78rem}
hz-blaettern a[rel=next]{text-align:right;grid-column:2}
hz-verwandt{display:block;border-top:1px solid var(--linie);padding:30px 0 10px;margin-top:10px}
hz-verwandt h2{margin-top:0}
hz-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
hz-karten a{display:block;background:var(--blatt);border:1px solid var(--linie);border-radius:6px;overflow:hidden;text-decoration:none;color:var(--tinte)}
hz-karten a:hover{border-color:var(--schiefer)}
hz-karten img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
hz-karten span{display:block;padding:10px 14px 12px}
hz-karten b{display:block;font:700 1.08rem/1.25 var(--serif)}
hz-karten small{display:flex;align-items:center;gap:7px;color:var(--grau);font-size:.8rem;margin-top:6px}
hz-liste{display:block}
hz-liste > a{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;padding:16px 0;border-bottom:1px solid var(--linie);color:var(--tinte);text-decoration:none}
hz-liste > a:first-child{border-top:1px solid var(--linie)}
hz-liste img{width:150px;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
hz-liste b{display:block;font:700 1.2rem/1.25 var(--serif);color:var(--ochsenblut)}
hz-liste span{font-size:.95rem}
hz-liste small{display:block;color:var(--grau);font-size:.8rem;margin-top:4px}
hz-seite[data-schmal]{grid-template-columns:minmax(0,var(--text))}

/* Fuß */
hz-fuss{display:block;margin-top:40px;background:#dfe2dc;color:#2c3237;font-size:.92rem}
hz-fuss > svg{display:block;width:100%;height:34px;background:var(--nebel)}
hz-fuss hz-rahmen{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding-top:22px;padding-bottom:30px}
hz-fuss h2{font-size:1rem;margin:0 0 .5em;font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--grau)}
hz-fuss ul{list-style:none;padding:0;margin:0}
hz-fuss li{margin-bottom:.3em}
hz-fuss a{color:#2c3237}
hz-fuss p{margin:0 0 .6em}
hz-fuss small{display:block;border-top:1px solid #c6cac3;padding:12px 20px 18px;text-align:center;color:var(--grau);max-width:var(--breit);margin:0 auto}

@media (max-width:980px){
  hz-seite{grid-template-columns:minmax(0,1fr);gap:10px}
  hz-steckbrief{position:static}
  hz-auftakt hz-rahmen{grid-template-columns:minmax(0,1fr)}
  hz-schritte ol{grid-template-columns:minmax(0,1fr)}
  hz-fuss hz-rahmen{grid-template-columns:1fr 1fr}
  hz-fuss hz-rahmen > section:first-child{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:1rem}
  hz-rahmen{padding:0 16px}
  hz-themen ul{padding:0 8px}
  hz-kopf nav{width:100%}
  hz-waage > div{grid-template-columns:minmax(0,1fr)}
  hz-waage section + section{border-left:0;border-top:1px solid var(--linie)}
  hz-blaettern{grid-template-columns:minmax(0,1fr)}
  hz-blaettern a[rel=next]{grid-column:1}
  hz-liste > a{grid-template-columns:96px minmax(0,1fr);gap:12px}
  hz-liste img{width:96px}
  hz-fuss hz-rahmen{grid-template-columns:minmax(0,1fr)}
}
@media print{hz-kopf nav,hz-themen,hz-fuss,hz-blaettern,hz-verwandt{display:none}}