@font-face{font-family:"Hanken Grotesk";src:url("schrift/HankenGrotesk.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Lato";src:url("schrift/Lato-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  --blau:#05668D; --tief:#0A3F59; --grund:#FBFAF8; --karte:#F1EFEA;
  --linie:#DCD8D2; --text:#1C2529; --grau:#57636D; --aufhell:#B9D2E0;

  --breite:680px; --rand:32px; --aussen:calc(var(--breite) + var(--rand)*2);
  --leiste:64px;

  /* sieben Schriftstufen, keine Werte daneben */
  --t1:52px; --t2:38px; --t3:28px; --t4:23px; --t5:19px; --t6:16px; --t7:15px;

  /* Raster: 8 px, halbe Stufe 4 px */
  --a0:4px;   --a1:8px;   --a2:16px;  --a3:24px;  --a4:32px;
  --a5:40px;  --a6:56px;  --a7:80px;  --a8:112px; --a9:160px;

  --r1:4px; --r2:8px;

  --siegel:168px;      /* Kopf, Bildschirm */
  --siegel-klein:128px;/* Kopf, Telefon */
  --wortmarke:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:var(--leiste)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{background:var(--grund);color:var(--text);
  font-family:"Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--t5);line-height:1.7;-webkit-font-smoothing:antialiased}

h1,h2,h3{font-family:"Hanken Grotesk","Segoe UI",Roboto,Arial,sans-serif;font-weight:600;color:var(--tief);letter-spacing:-.018em}
h1{font-size:var(--t1);line-height:1.08;margin-bottom:var(--a3)}
h2{font-size:var(--t2);line-height:1.15;margin:0 0 var(--a3)}
h3{font-size:var(--t3);line-height:1.25;margin:0 0 var(--a1)}
p{margin-bottom:var(--a3)}
p:last-child{margin-bottom:0}
a{color:var(--blau)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--linie);background:var(--grund)}
.kopf .in{max-width:var(--aussen);margin:0 auto;padding:var(--a5) var(--rand) var(--a4);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--a3)}
.marke{display:flex;align-items:center;gap:var(--a3);text-decoration:none;white-space:nowrap}
.marke img{width:var(--siegel)}
.marke .wort b{font-family:"Hanken Grotesk",sans-serif;font-size:var(--wortmarke);font-weight:600;color:var(--tief);display:block;line-height:1.08}
.marke .wort span{font-size:var(--t5);color:var(--grau);display:block;margin-top:var(--a0)}
.nav{display:flex;gap:var(--a1);margin-left:-8px}
.nav a{font-size:var(--t6);text-decoration:none;color:var(--tief);padding:var(--a1) var(--a2);border-radius:var(--r1);white-space:nowrap}
.nav a:hover{background:#E7E3DD}
.nav a[aria-current="page"]{color:var(--blau);font-weight:700}

/* ---------- Mitlaufende Leiste ---------- */
.leiste{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--leiste);
  background:rgba(251,250,248,.95);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linie);transform:translateY(-100%)}
@media (prefers-reduced-motion: no-preference){ .leiste{transition:transform .2s ease} }
.leiste.an{transform:none}
.leiste .in{max-width:var(--aussen);margin:0 auto;height:100%;display:flex;align-items:center;padding:0 var(--rand)}
.leiste b{font-family:"Hanken Grotesk",sans-serif;font-size:var(--t5);font-weight:600;color:var(--tief);white-space:nowrap}
.leiste .nav{margin-left:auto}
.leiste .nav a{padding:var(--a1) var(--a2)}
.leiste .kurz{display:none}

/* ---------- Inhalt ---------- */
main{max-width:var(--aussen);margin:0 auto;padding:var(--a6) var(--rand) var(--a8)}
section + section{margin-top:var(--a8)}
.vorspann{font-size:var(--t4);color:var(--grau);line-height:1.55;margin-bottom:var(--a6)}

/* ---------- Denkmaltag ---------- */
#denkmaltag{padding-bottom:48px}   /* zusammen mit dem Abschnittsabstand: 160 px unter dem Kasten */
.denkmal{background:var(--tief);color:#fff;border-radius:var(--r2);overflow:hidden}
.denkmal .oben{padding:var(--a6) var(--a6) var(--a5)}
.denkmal .vorzeile{font-family:"Hanken Grotesk",sans-serif;font-size:var(--t6);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--aufhell);margin-bottom:var(--a2)}
.denkmal h1{color:#fff;margin-bottom:var(--a2)}
.denkmal .wann{font-size:var(--t5);color:var(--aufhell);margin-bottom:0}
.denkmal img{width:100%}
.denkmal .unten{padding:var(--a5) var(--a6) var(--a6)}
.denkmal .unten p{color:#E4EEF4;margin-bottom:var(--a3)}
.denkmal .unten p:last-child{margin-bottom:0}
.denkmal .unten strong{color:#fff}
.denkmal .unten p.anreise{font-size:var(--t6);color:var(--aufhell);
  border-top:1px solid rgba(255,255,255,.18);padding-top:var(--a3);margin-top:var(--a5)}

/* ---------- Bild, Zitat, Merksatz ---------- */
figure{margin:var(--a6) 0 var(--a5)}
figcaption{font-size:var(--t7);color:var(--grau);margin-top:var(--a1);line-height:1.5}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--a2);margin:var(--a6) 0 var(--a1)}
.zwei img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r1)}
p.bu{font-size:var(--t7);color:var(--grau);line-height:1.5;margin-bottom:var(--a4)}

/* Jahresgerüst statt Fettungen im Fließtext */
.jahre{margin:var(--a5) 0 var(--a5);border-top:1px solid var(--linie)}
.jahre div{display:flex;gap:var(--a3);padding:var(--a1) 0;border-bottom:1px solid var(--linie)}
.jahre div:last-child{border-bottom:none}
.jahre b{font-family:"Hanken Grotesk",sans-serif;font-size:var(--t5);font-weight:600;color:var(--tief);
  flex:0 0 72px;line-height:1.5}
.jahre span{font-size:var(--t5);line-height:1.5}

/* Begriffsliste: Begriff links, Erklaerung rechts */
.liste{margin:var(--a5) 0 var(--a5);border-top:1px solid var(--linie)}
.liste div{display:flex;gap:var(--a3);padding:var(--a2) 0;border-bottom:1px solid var(--linie)}
.liste div:last-child{border-bottom:none}
.liste b{font-family:"Hanken Grotesk",sans-serif;font-size:var(--t5);font-weight:600;color:var(--tief);
  flex:0 0 240px;line-height:1.5}
.liste span{font-size:var(--t5);line-height:1.6}

/* Fremdes Zitat: eingezogen, ohne Randstrich */
blockquote{margin:var(--a5) 0;padding-left:var(--a5);font-size:var(--t5);line-height:1.6;color:var(--text)}
blockquote cite{display:block;font-style:normal;font-size:var(--t7);color:var(--grau);margin-top:var(--a1)}

/* Eigener Merksatz: Randstrich, Hanken Grotesk */
.satz{font-family:"Hanken Grotesk",sans-serif;font-size:var(--t4);line-height:1.45;color:var(--tief);
  border-left:3px solid var(--blau);padding-left:var(--a3);margin:var(--a5) 0}

video{width:100%;border-radius:var(--r2);background:#000}

.knopf{display:inline-block;background:var(--tief);color:#fff;text-decoration:none;
  padding:var(--a2) var(--a5);border-radius:var(--r1);font-weight:700;font-size:var(--t5);
  font-family:"Hanken Grotesk",sans-serif;margin-top:var(--a6)}
.knopf:hover{background:#083248}
.weiter{display:inline-block;margin-top:var(--a6);font-size:var(--t4);
  font-family:"Hanken Grotesk",sans-serif;font-weight:600}

/* ---------- Facetten ---------- */
.facette{margin-top:var(--a4);padding-top:var(--a4)}
.facette.gruppe{border-top:1px solid var(--linie);margin-top:var(--a6);padding-top:var(--a6)}
.hart{background:var(--karte);border-radius:var(--r2);padding:var(--a5) var(--a6);
  margin:var(--a5) 0 var(--a7)}

/* ---------- Fuss ---------- */
footer{border-top:1px solid var(--linie);background:#F4F2EE;margin-top:var(--a8)}
footer .in{max-width:var(--aussen);margin:0 auto;padding:var(--a6) var(--rand) var(--a7);
  font-size:var(--t6);color:var(--grau);line-height:1.65}
footer a{color:var(--tief)}
footer .reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5);margin-bottom:var(--a5)}
footer .fein{font-size:var(--t7);line-height:1.6;margin-bottom:var(--a1)}

/* ---------- Zustimmung ---------- */
#zu{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--tief);color:#fff;
  padding:var(--a3) var(--rand);display:none}
#zu .in{max-width:var(--aussen);margin:0 auto;display:flex;gap:var(--a3);align-items:center;
  flex-wrap:wrap;font-size:var(--t6)}
#zu p{margin:0;flex:1;min-width:300px;line-height:1.55}
#zu a{color:#CFE3EE}
#zu .knoepfe{display:flex;gap:var(--a2)}
#zu button{font:inherit;font-size:var(--t6);font-weight:700;padding:var(--a1) var(--a3);
  border:1px solid #fff;border-radius:var(--r1);cursor:pointer;background:transparent;color:#fff}

/* ---------- Telefon ---------- */
@media(max-width:820px){
  :root{--t1:36px;--t2:28px;--t3:23px;--t4:20px;--t5:18px;--t6:16px;--t7:15px;
        --rand:24px;--leiste:56px;--siegel:var(--siegel-klein);--wortmarke:23px}
  .kopf .in{gap:var(--a3);padding:var(--a3) var(--rand) var(--a2)}
  .marke{gap:var(--a2);white-space:normal}
  .marke img{flex:0 0 auto}
  .marke .wort span{font-size:var(--t6);line-height:1.3}
  .nav{flex-wrap:wrap;gap:var(--a0)}
  .nav a{padding:10px var(--a2)}
  .leiste b{display:none}
  .leiste .nav{margin-left:0;width:100%;justify-content:space-between;flex-wrap:nowrap;gap:0}
  .leiste .nav a{font-size:var(--t7);padding:12px var(--a1)}
  .leiste .lang{display:none}
  .leiste .kurz{display:inline}
  .denkmal .oben{padding:var(--a5) var(--a4) var(--a4)}
  .denkmal .unten{padding:var(--a4)}
  .hart{padding:var(--a4)}
  .jahre b{flex:0 0 60px}
  .liste div{flex-direction:column;gap:var(--a0)}
  .liste b{flex:none}
  footer .reihe{grid-template-columns:1fr;gap:var(--a3)}
  #zu .knoepfe{width:100%}
  #zu button{flex:1}
}
@media(max-width:560px){
  .zwei{grid-template-columns:1fr;gap:var(--a2)}
  .zwei img{aspect-ratio:4/3}
}