@font-face{font-family:'Atkinson';src:url('/assets/fonts/atkinson-next-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson';src:url('/assets/fonts/atkinson-next-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage';src:url('/assets/fonts/bricolage-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage';src:url('/assets/fonts/bricolage-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  --papier:#faf7f2;
  --sand:#efe7da;
  --linie:#dcd3c6;
  --tinte:#16283c;
  --tinte-hell:#24405e;
  --text:#2a2e33;
  --text-leise:#5b6068;
  --ocker:#b3651b;
  --ocker-dunkel:#8f4f13;

  --schrift:'Atkinson',ui-sans-serif,sans-serif;
  --schrift-marke:'Bricolage','Atkinson',ui-sans-serif,sans-serif;

  --fs-body:clamp(1.1875rem,1.145rem + 0.19vw,1.3125rem);
  --fs-klein:clamp(1rem,0.97rem + 0.14vw,1.0938rem);
  --fs-mini:clamp(.8125rem,.78rem + 0.16vw,.9375rem);
  --fs-h1:clamp(2.25rem,1.55rem + 3.1vw,4rem);
  --fs-h1-seite:clamp(1.9rem,1.5rem + 1.8vw,2.9rem);
  --fs-h2:clamp(1.6rem,1.36rem + 1.05vw,2.3rem);
  --fs-h3:clamp(1.25rem,1.16rem + 0.42vw,1.5rem);
  --fs-marke:clamp(1.2rem,1.06rem + 0.62vw,1.65rem);

  --raum-sektion:clamp(3.5rem,2.4rem + 4.6vw,6.5rem);
  --raum-block:clamp(1.75rem,1.4rem + 1.5vw,2.75rem);
  --bahn:min(100% - 2.5rem,1180px);
  --bahn-text:min(100% - 2.5rem,44rem);
  --radius:6px;
  --easing:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--text);font-family:var(--schrift);font-size:var(--fs-body);line-height:1.7;font-synthesis-weight:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4{color:var(--tinte);line-height:1.25;text-wrap:balance;margin:0}
h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-0.02em}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-0.01em}
h3{font-size:var(--fs-h3);font-weight:700}
h4{font-size:var(--fs-body);font-weight:700}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--tinte);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ocker-dunkel)}
:focus-visible{outline:3px solid var(--ocker);outline-offset:3px;border-radius:2px}
hr{border:0;border-top:1px solid var(--linie);margin:var(--raum-block) 0}

.bahn{width:var(--bahn);margin-inline:auto}
.bahn-text{width:var(--bahn-text);margin-inline:auto}
.springen{position:absolute;left:-9999px;top:0;background:var(--tinte);color:#fff;padding:.75rem 1.25rem;z-index:20}
.springen:focus{left:1rem;top:1rem;position:fixed}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.byline{font-size:var(--fs-klein);color:var(--text-leise);margin-top:1rem}
.artikel-bild{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--sand);margin:var(--raum-block) 0}
.artikel-bild img{width:100%;height:100%;object-fit:cover;display:block}
.grafik{margin:var(--raum-block) 0}
.grafik img{width:100%;height:auto;display:block;border:1px solid var(--linie);border-radius:var(--radius);background:var(--papier)}
.muster{background:var(--sand);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem 1.3rem;margin:0 0 .9rem}
.muster p{margin:0}
.muster p+p{margin-top:.8rem}
.satzliste{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:.7rem}
.satzliste li{background:var(--sand);border-left:3px solid var(--ocker);border-radius:0 var(--radius) var(--radius) 0;padding:.75rem 1.1rem;margin:0}
.frage{margin-top:2em}
.frage h3{margin-top:0}

.kopf{border-bottom:1px solid var(--linie);background:var(--papier)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1rem}
.marke-block{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.marke{display:inline-flex;align-items:baseline;gap:.4rem;font-family:var(--schrift-marke);font-size:var(--fs-marke);font-weight:700;color:var(--tinte);text-decoration:none;letter-spacing:-0.02em;align-self:flex-start}
.marke:hover{color:var(--tinte)}
.marke-pro{background:var(--ocker);color:var(--papier);padding:.08em .38em .14em;border-radius:var(--radius);letter-spacing:0.02em}
.marke-erklaerung{font-size:var(--fs-mini);line-height:1.45;color:var(--text-leise);margin:0}
.marke-erklaerung span{white-space:nowrap}
.marke-erklaerung b{color:var(--ocker-dunkel);font-weight:700}
.kopf-nav{display:none}
.kopf-knopf{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.55rem .9rem;border:2px solid var(--tinte);border-radius:var(--radius);background:transparent;color:var(--tinte);font:inherit;font-weight:700;font-size:var(--fs-klein);cursor:pointer;transition:background .2s var(--easing),color .2s var(--easing)}
.kopf-knopf:hover{background:var(--tinte);color:var(--papier)}

.brotkrumen{font-size:var(--fs-klein);color:var(--text-leise);padding-block:1rem;border-bottom:1px solid var(--linie)}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin:0;padding:0}
.brotkrumen li{display:flex;align-items:center;gap:.6rem}
.brotkrumen li+li::before{content:"›";color:var(--linie)}
.brotkrumen a{color:var(--text-leise)}
.brotkrumen a:hover{color:var(--ocker-dunkel)}
.brotkrumen [aria-current]{color:var(--tinte);font-weight:700;text-decoration:none}

.held{padding-block:var(--raum-sektion) 0}
.held-raster{display:grid;gap:var(--raum-block)}
.held-medien{position:relative}
.held-bild{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.held-bild img{width:100%;height:100%;object-fit:cover;display:block}
.held-text>p{max-width:38ch;color:var(--text);margin-top:1.2rem}

.knopf{display:inline-flex;align-items:center;min-height:52px;margin-top:1.6rem;padding:.8rem 1.6rem;border-radius:var(--radius);background:var(--tinte);color:var(--papier);text-decoration:none;font-weight:700;transition:background .2s var(--easing),transform .2s var(--easing)}
.knopf:hover{background:var(--tinte-hell);color:var(--papier);transform:translateY(-1px)}

.sektion{padding-block:var(--raum-sektion)}
.sektion-kopf{margin-bottom:var(--raum-block)}
.sektion-kopf p{color:var(--text-leise);max-width:56ch;margin-top:.7rem}

.bereiche{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bereich{border-top:1px solid var(--linie)}
.bereich:last-child{border-bottom:1px solid var(--linie)}
.bereich-link{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.4rem 1rem;padding:1.4rem .75rem;text-decoration:none;color:inherit;min-height:48px;transition:background .18s var(--easing)}
.bereich-link:hover{background:var(--sand);color:inherit}
.bereich-name{font-size:var(--fs-h3);font-weight:700;color:var(--tinte);letter-spacing:-0.01em}
.bereich-text{grid-column:1/-1;color:var(--text-leise);font-size:var(--fs-klein);max-width:52ch}
.bereich-zahl{color:var(--ocker-dunkel);font-weight:700;font-size:var(--fs-klein);white-space:nowrap}
.bereich-bald{color:var(--text-leise);font-size:var(--fs-klein);white-space:nowrap}

.band{background:var(--sand);border-block:1px solid var(--linie)}
.band .sektion-kopf p{color:var(--text)}

.beitraege{list-style:none;margin:0;padding:0;display:grid;gap:0}
.beitrag{border-top:1px solid var(--linie)}
.beitrag:last-child{border-bottom:1px solid var(--linie)}
.beitrag-link{display:block;padding:1.3rem .75rem;text-decoration:none;color:inherit;transition:background .18s var(--easing)}
.beitrag-link:hover{background:rgba(22,40,60,.05);color:inherit}
.beitrag-rubrik{font-size:var(--fs-klein);color:var(--ocker-dunkel);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:0}
.beitrag-titel{font-size:var(--fs-h3);font-weight:700;color:var(--tinte);margin:.3rem 0 0;letter-spacing:-0.01em;line-height:1.25}
.beitrag-text{color:var(--text-leise);font-size:var(--fs-klein);margin:.4rem 0 0;max-width:60ch}

.person{display:grid;gap:var(--raum-block);align-items:start}
.person-text p{max-width:58ch}
.person-bild{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--sand);max-width:320px}
.person-bild img{width:100%;height:100%;object-fit:cover;display:block}
.portraet{width:min(100%,26rem);margin:var(--raum-block) auto;padding:clamp(.7rem,.5rem + 0.9vw,1.15rem);background:var(--sand);border:1px solid var(--linie);border-radius:var(--radius)}
.portraet img{width:100%;height:auto;display:block;border-radius:2px;box-shadow:0 1px 3px rgba(22,40,60,.16)}
.portraet figcaption{font-size:var(--fs-klein);color:var(--text-leise);text-align:center;margin-top:.75rem}
.lupe{display:block;position:relative;border-radius:2px}
.lupe img{transition:transform .25s var(--easing)}
.lupe:hover img{transform:scale(1.015)}
.lupe::after{content:"";position:absolute;right:.6rem;bottom:.6rem;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--tinte) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf7f2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 L21 21'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/1.25rem no-repeat;opacity:.9}

.leuchtkasten{border:0;padding:0;background:transparent;max-width:96vw;max-height:96dvh;overflow:visible}
.leuchtkasten::backdrop{background:rgba(22,40,60,.86)}
.leuchtkasten img{display:block;max-width:96vw;max-height:82dvh;width:auto;height:auto;border-radius:var(--radius);background:var(--papier)}
.leuchtkasten figcaption{color:var(--papier);text-align:center;font-size:var(--fs-klein);margin-top:.8rem}
.leuchtkasten-zu{position:absolute;top:-.5rem;right:-.5rem;min-width:48px;min-height:48px;border-radius:50%;border:2px solid var(--papier);background:var(--tinte);color:var(--papier);font:inherit;font-size:1.4rem;line-height:1;cursor:pointer}
.leuchtkasten-zu:hover{background:var(--ocker-dunkel)}
.leuchtkasten figure{margin:0;position:relative}

.seite{padding-block:var(--raum-block) var(--raum-sektion)}
.seite h1{font-size:var(--fs-h1-seite)}
.seite-intro{font-size:calc(var(--fs-body) * 1.06);color:var(--text);margin-top:1rem;max-width:60ch}

.inhalt h2{margin-top:2.4em}
.inhalt h3{margin-top:1.9em}
.inhalt h2+p,.inhalt h3+p{margin-top:.7em}
.inhalt ul,.inhalt ol{margin:0 0 1.1em;padding-left:1.4em}
.inhalt li{margin-bottom:.5em}
.inhalt li:last-child{margin-bottom:0}
.inhalt a{color:var(--tinte);text-decoration:underline}
.inhalt a:hover{color:var(--ocker-dunkel)}

.sprungliste{background:var(--sand);border:1px solid var(--linie);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:var(--raum-block) 0}
.sprungliste h2{font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.06em;color:var(--ocker-dunkel);margin:0 0 .7rem}
.sprungliste ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sprungliste a{color:var(--tinte);text-decoration:underline;text-underline-offset:4px}
.sprungliste a:hover{color:var(--ocker-dunkel)}

.tabelle-rahmen{overflow-x:auto;margin:var(--raum-block) 0}
.tabelle{border-collapse:collapse;width:100%;font-size:var(--fs-klein)}
.tabelle th,.tabelle td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle th{color:var(--tinte);font-weight:700;border-bottom:2px solid var(--linie)}

.hinweis{background:var(--sand);border-left:4px solid var(--ocker);border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.3rem;margin:var(--raum-block) 0;font-size:var(--fs-klein);color:var(--text)}

.teilen{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:var(--raum-block) 0;padding-block:var(--raum-block) 0;border-top:1px solid var(--linie)}
.teilen p{margin:0;font-weight:700;color:var(--tinte)}
.teilen-knopf{display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.2rem;border:2px solid var(--tinte);border-radius:var(--radius);background:transparent;color:var(--tinte);font:inherit;font-weight:700;font-size:var(--fs-klein);cursor:pointer;transition:background .2s var(--easing),color .2s var(--easing)}
.teilen-knopf:hover{background:var(--tinte);color:var(--papier)}

.zurueck{display:inline-block;margin-top:var(--raum-block);font-weight:700}

.fuss{background:var(--tinte);color:#e6ebf1;padding-block:var(--raum-block)}
.fuss a{color:#fff;text-decoration-thickness:1px}
.fuss a:hover{color:#f3cf9e}
.fuss-raster{display:grid;gap:1.5rem}
.fuss h2{color:#fff;font-size:var(--fs-h3)}
.fuss ul{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.55rem}
.fuss-klein{font-size:var(--fs-klein);color:#b6c2d0;margin-top:1.5rem}

@media (min-width:56rem){
  .kopf-knopf{display:none}
  .kopf-nav{display:flex;gap:1.6rem;font-size:var(--fs-klein);font-weight:700}
  .kopf-nav a{text-decoration:none}
  .kopf-nav a:hover{text-decoration:underline;text-underline-offset:5px}
  .held-raster{grid-template-columns:5fr 6fr;align-items:center;gap:clamp(2rem,4vw,4rem)}
  .held-text{order:1}
  .held-medien{order:2}
  .bereiche{grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .bereich:nth-last-child(2){border-bottom:1px solid var(--linie)}
  .person{grid-template-columns:320px 1fr;gap:2.5rem}
  .fuss-raster{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .sprungliste ol{grid-template-columns:1fr 1fr;column-gap:2rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .knopf:hover{transform:none}
}