
:root{
  --paper:#F5F7FA; --surface:#FFFFFF; --ink:#18233A; --muted:#55607A;
  --blue:#1F3558; --rose:#A3313A; --gold:#B48A22; --line:#D9DFE9;
  --land:#E4EAF3; --land-edge:#FFFFFF; --hl:#F3E7C8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1626; --surface:#162036; --ink:#E7ECF5; --muted:#9AA6BE;
    --blue:#9DB5DE; --rose:#E0636B; --gold:#D9B24E; --line:#28334C;
    --land:#1E2A44; --land-edge:#0F1626; --hl:#2C2A1E;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1626; --surface:#162036; --ink:#E7ECF5; --muted:#9AA6BE;
  --blue:#9DB5DE; --rose:#E0636B; --gold:#D9B24E; --line:#28334C;
  --land:#1E2A44; --land-edge:#0F1626; --hl:#2C2A1E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 "Alegreya Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* Kopf */
header.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.brand{display:flex;align-items:center;gap:10px;font:600 1.05rem "Alegreya",serif;color:var(--ink);text-decoration:none}
.brand svg{width:28px;height:28px}
nav.top a{margin-left:20px;color:var(--muted);text-decoration:none;font-weight:500}
nav.top a:hover{color:var(--ink)}
@media (max-width:600px){nav.top{display:none}}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:24px 0 56px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:16px}}
.hero h1{font:800 clamp(2.4rem,5.4vw,4.1rem)/1.04 "Alegreya",serif;letter-spacing:-.015em;margin:0 0 20px;color:var(--blue)}
.hero p.lead{font:400 1.25rem/1.55 "Alegreya",serif;color:var(--ink);max-width:34em;margin:0 0 28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--blue)}
.btn.primary{background:var(--blue);color:var(--paper)}
.btn.ghost{color:var(--blue)}
.mapbox{position:relative}
.mapbox svg{width:100%;height:auto;max-height:640px;display:block}
.state{fill:var(--land);stroke:var(--land-edge);stroke-width:1.4}
.pin{cursor:pointer}
.pin circle.dot{fill:var(--rose);stroke:var(--paper);stroke-width:3;transition:r .2s}
.pin circle.halo{fill:var(--rose);opacity:.18}
.pin text{font:600 20px "Alegreya Sans",sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.pin.ghost circle.dot{fill:var(--paper);stroke:var(--muted);stroke-width:2.5}
.pin.ghost text{fill:var(--muted);font-weight:500}
.pin:hover circle.dot,.pin.on circle.dot{r:13}
.maplegend{display:flex;gap:18px;font-size:.92rem;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.maplegend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.maplegend .l1::before{background:var(--rose)}
.maplegend .l2::before{border:2px solid var(--muted);width:8px;height:8px}

/* Verzeichnis */
section.dir{padding:16px 0 64px}
.dirhead{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;border-bottom:2px solid var(--blue);padding-bottom:14px;margin-bottom:8px}
h2{font:800 2rem/1.15 "Alegreya",serif;margin:0;color:var(--blue)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:500 .95rem "Alegreya Sans",sans-serif;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.count{color:var(--muted);font-size:.95rem;margin:10px 0 0}

article.school{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px 48px;padding:36px 0;border-bottom:1px solid var(--line);scroll-margin-top:20px;transition:background .4s}
article.school.flash{background:var(--hl)}
@media (max-width:820px){article.school{grid-template-columns:1fr}}
.school h3{font:800 1.65rem/1.15 "Alegreya",serif;margin:0 0 6px}
.school .where{color:var(--muted);margin:0 0 14px}
.school .since{font:italic 400 1.05rem "Alegreya",serif;color:var(--rose);margin:0 0 18px}
.school .text p{margin:0 0 14px;max-width:62ch}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 18px;font-size:.98rem}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0}
.school .links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.school .links a.btn{padding:8px 16px;font-size:.95rem}
.school .links a.addr{font-size:.95rem;color:var(--muted)}

/* Grenzfälle */
section.near{padding:8px 0 64px}
section.near .intro{max-width:62ch;color:var(--muted);margin:12px 0 24px}
.ogroup{margin:28px 0 0}
.ogroup h3{font:800 1.3rem "Alegreya",serif;color:var(--blue);margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--blue)}
.orow{display:grid;grid-template-columns:minmax(0,1.3fr) 150px minmax(0,1.2fr) auto;gap:6px 24px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);scroll-margin-top:20px;transition:background .4s}
.orow.flash{background:var(--hl)}
.orow .n{font:600 1.1rem "Alegreya",serif}
.orow .n small{display:block;font:400 .95rem "Alegreya Sans",sans-serif;color:var(--muted)}
.orow .f{font-size:.9rem;font-weight:700;color:var(--blue);border:1.5px solid var(--blue);border-radius:999px;padding:1px 10px;justify-self:start;white-space:nowrap}
.orow .i{color:var(--muted);font-size:.95rem}
.orow .w{font-weight:700;font-size:.95rem;white-space:nowrap}
.orow .w.none{font-weight:400;color:var(--muted)}
@media (max-width:760px){.orow{grid-template-columns:1fr auto}.orow .i{grid-column:1/-1}.orow .w{grid-column:1/-1}}
.pin.other circle.dot{fill:var(--blue);stroke:var(--paper);stroke-width:2;r:6}
.pin.other:hover circle.dot,.pin.other:focus circle.dot{r:9}
.maplegend .l2::before{background:var(--blue);border:none;width:8px;height:8px}

/* Luther */
section.luther{padding:64px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.luther .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;margin-top:24px}
@media (max-width:860px){.luther .grid{grid-template-columns:1fr}}
.luther .prose p{margin:0 0 16px;max-width:60ch;font:400 1.12rem/1.65 "Alegreya",serif}
.luther blockquote{margin:28px 0;padding:0 0 0 20px;border-left:4px solid var(--gold);font:italic 400 1.35rem/1.45 "Alegreya",serif;color:var(--blue);max-width:30em}
.luther blockquote cite{display:block;font:400 .95rem "Alegreya Sans",sans-serif;font-style:normal;color:var(--muted);margin-top:8px}
ol.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
ol.timeline li{position:relative;padding:0 0 18px 24px}
ol.timeline li::before{content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--rose)}
ol.timeline .y{font:800 1.1rem "Alegreya",serif;color:var(--rose);margin-right:8px}
ol.timeline .p{color:var(--muted)}
.tag{display:inline-block;font-size:.85rem;font-weight:700;padding:2px 10px;border-radius:999px;margin:0 0 10px;border:1.5px solid currentColor}
.tag.gym{color:var(--rose)}
.tag.other{color:var(--blue)}

/* Lesetipps */
section.shelf{padding:64px 0}
.shelfhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ad{font-size:.85rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 8px}
section.shelf .intro{color:var(--muted);max-width:62ch;margin:10px 0 28px}
.shelfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px 40px;border-top:2px solid var(--blue);padding-top:24px}
.shelfcol h3{font:800 1.25rem "Alegreya",serif;margin:0 0 2px;color:var(--blue)}
.shelfcol p{margin:0 0 10px;color:var(--muted);font-size:.95rem}
.shelfcol ul{list-style:none;margin:0;padding:0}
.shelfcol li{border-bottom:1px solid var(--line)}
.shelfcol li a{display:block;padding:7px 0;color:var(--ink);text-decoration:none;font-weight:500}
.shelfcol li a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.disclosure{font-size:.88rem;color:var(--muted);max-width:70ch;margin:24px 0 0}

/* Über */
section.about{background:var(--blue);color:var(--paper);padding:56px 0}
section.about h2{color:var(--paper)}
section.about .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:20px}
@media (max-width:760px){section.about .cols{grid-template-columns:1fr}}
section.about p{margin:0 0 14px;max-width:58ch}
section.about a{color:var(--paper)}
footer{padding:28px 0 40px;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--muted)}

/* ===== Mehrseitige Struktur ===== */
nav.top a[aria-current="page"]{color:var(--ink);font-weight:700}
.mapsvg{width:100%;height:auto;display:block}
.mapsvg.mini{max-width:320px;margin:0 auto}
.pin.gym circle.dot{fill:var(--rose)}
.pin.gym.on circle.dot{r:13}
.pin.gym:not(.on) circle.halo{opacity:.12}
a.pin:focus-visible{outline:none}
a.pin:focus-visible circle.dot{stroke:var(--gold);stroke-width:4}

.block{padding:24px 0 48px}
.block h2{margin-bottom:6px}
.sub{color:var(--muted);margin:0 0 20px;max-width:62ch}

ul.gymlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--blue)}
ul.gymlist li a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:4px 24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
ul.gymlist .gn{font:800 1.25rem/1.2 "Alegreya",serif;color:var(--blue)}
ul.gymlist .go{color:var(--muted)}
ul.gymlist .gs{font:italic 400 1rem "Alegreya",serif;color:var(--rose)}
ul.gymlist li a:hover .gn{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){ul.gymlist li a{grid-template-columns:1fr}}

ul.landlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
ul.landlist a{display:block;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink)}
ul.landlist a:hover{border-color:var(--blue)}
ul.landlist .ln{display:block;font:600 1.1rem "Alegreya",serif;color:var(--blue)}
ul.landlist .lc{font-size:.92rem;color:var(--muted)}

.teasers{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:8px 0 64px}
@media (max-width:760px){.teasers{grid-template-columns:1fr}}
a.teaser{display:block;padding:28px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
a.teaser h2{font-size:1.6rem;margin-bottom:8px}
a.teaser p{margin:0 0 14px;color:var(--muted);max-width:42ch}
a.teaser span{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
a.teaser:hover{border-color:var(--blue)}

.btn.light{background:var(--paper);color:var(--blue);border-color:var(--paper)}

.crumbs{font-size:.95rem;color:var(--muted);margin:8px 0 20px}
.crumbs a{color:var(--muted)}

article.detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 56px;padding:8px 0 32px}
@media (max-width:860px){article.detail{grid-template-columns:1fr}}
.detail h1{font:800 clamp(2rem,4.4vw,3.2rem)/1.08 "Alegreya",serif;color:var(--blue);margin:0 0 10px;letter-spacing:-.01em}
.detail .where{color:var(--muted);margin:0 0 6px;font-size:1.1rem}
.detail .since{font:italic 400 1.15rem "Alegreya",serif;color:var(--rose);margin:0 0 24px}
.detail .text p{font:400 1.15rem/1.65 "Alegreya",serif;margin:0 0 16px;max-width:60ch}
.detail .links{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:24px}
.detail .links a.addr{color:var(--muted);font-size:.95rem}
.dside dl.facts{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.landhint{color:var(--muted);margin:0 0 8px}

.adbox{margin:24px 0 16px;padding:24px 28px;border:1px dashed var(--line);border-radius:14px;background:var(--surface)}
.adhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.adhead h2{font-size:1.35rem}
.adbox ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.adbox li a{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:500}
.adbox li a:hover{border-color:var(--blue);color:var(--blue)}
.adfoot{margin:14px 0 0;font-size:.85rem;color:var(--muted)}
.adfoot a{font-weight:700}

ul.morelist{list-style:none;margin:0;padding:0;columns:2 280px;column-gap:40px}
ul.morelist li{padding:6px 0;border-bottom:1px solid var(--line);break-inside:avoid}
ul.morelist a{font:600 1.05rem "Alegreya",serif}
ul.morelist span{color:var(--muted);font-size:.92rem;margin-left:6px}

.landhead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px 48px;align-items:center;padding:0 0 16px}
@media (max-width:760px){.landhead{grid-template-columns:1fr}}
.landhead h1{font:800 clamp(2rem,4.4vw,3rem)/1.08 "Alegreya",serif;color:var(--blue);margin:0 0 12px}
.lead.small{font:400 1.2rem/1.55 "Alegreya",serif;margin:0;max-width:40ch}
.block > h2 + .gymlist{margin-bottom:32px}

ul.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
ul.chips a{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none}
ul.chips a:hover{border-color:var(--blue)}

section.luther.page{background:transparent;border:none;padding:16px 0 32px}
section.luther.page h1{font:800 clamp(2rem,4.4vw,3.2rem)/1.08 "Alegreya",serif;color:var(--blue);margin:0}

.shelf h1{font:800 clamp(2rem,4.4vw,3.2rem)/1.08 "Alegreya",serif;color:var(--blue);margin:0}
section.shelf{padding:8px 0 64px}
.shelfcol h2{font:800 1.25rem "Alegreya",serif;margin:0 0 2px;color:var(--blue)}
.shelfcol{scroll-margin-top:20px}
.mapsvg.mini .pin text{font-size:34px;stroke-width:6px}
@media (max-width:600px){
  header.top{flex-wrap:wrap;gap:8px 0}
  nav.top{display:flex!important;width:100%;gap:18px}
  nav.top a{margin-left:0}
}

/* ===== Artikel ===== */
article.essay{max-width:720px;margin:0 auto;padding:8px 0 48px}
.essay h1{font:800 clamp(2.1rem,4.8vw,3.4rem)/1.06 "Alegreya",serif;color:var(--blue);margin:0 0 16px;letter-spacing:-.01em}
.essay .dek{font:400 1.3rem/1.5 "Alegreya",serif;color:var(--muted);margin:0 0 32px}
.essay h2{font:800 1.7rem/1.2 "Alegreya",serif;color:var(--blue);margin:44px 0 12px}
.essay p{font:400 1.16rem/1.7 "Alegreya",serif;margin:0 0 18px}
.essay figure{margin:28px 0 32px}
.essay figure .mapsvg{max-width:420px;margin:0 auto}
.essay figcaption{font-size:.92rem;color:var(--muted);text-align:center;margin-top:8px}
.essay aside.fact{margin:28px 0;padding:18px 22px;border-left:4px solid var(--gold);background:var(--surface);border-radius:0 10px 10px 0}
.essay aside.fact p{font:400 1.05rem/1.6 "Alegreya Sans",sans-serif;margin:0}
.essay aside.fact strong{color:var(--blue)}
.essay table.counts{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:1rem}
.essay table.counts th,.essay table.counts td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.essay table.counts td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.essay table.counts th{color:var(--muted);font-weight:500}
.essay .sources{margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
.essay .sources h2{font-size:1.2rem;margin:0 0 10px}
.essay .sources ol{margin:0;padding-left:20px;font-size:.92rem;color:var(--muted)}
.essay .sources li{margin:0 0 6px;overflow-wrap:anywhere}
.essay sup a{text-decoration:none;font-size:.75em;font-family:"Alegreya Sans",sans-serif}
.essay .related{margin-top:36px}
.mapsvg .pin.dim circle.dot{opacity:.35}
.teasers{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.essay blockquote.q{margin:28px 0;padding:0 0 0 20px;border-left:4px solid var(--gold);font:italic 400 1.45rem/1.45 "Alegreya",serif;color:var(--blue)}
.essay blockquote.q cite{display:block;font:400 .95rem "Alegreya Sans",sans-serif;font-style:normal;color:var(--muted);margin-top:8px}
.essay .related a.teaser h2{margin-top:0}
.essay table.counts th:not(:first-child){text-align:right}
