@font-face{font-family:Public Sans;src:url("bilder/public-sans.woff") format("woff");font-display:swap}
@font-face{font-family:Public Sans;src:url("bilder/public-sans-bold.woff") format("woff");font-weight:700;font-display:swap}
:root{--ink:#242424;--black:#1e1e1e;--paper:#eee;--gold:#985d0a;--button:#d88a09;--line:#d9cbb6;--width:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4rem}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 "Public Sans",Arial,sans-serif}
img{display:block;width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid #9c6500;outline-offset:4px}
h1,h2,h3,p,figure{margin:0}
p+p{margin-top:.8rem}
.wrap{width:min(var(--width),calc(100% - 3rem));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-5rem;z-index:10;background:white;padding:.6rem}
.skip:focus{top:.5rem}
.brand{display:grid;place-items:center;min-height:200px;padding:1.7rem}
.logo{display:block;position:relative;width:100px;aspect-ratio:480/682;overflow:hidden;background:#000}
.logo img{position:absolute;width:147.7%;max-width:none;left:-23.75%;top:-23.6%}
nav{position:sticky;top:0;z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:0 .4rem;background:var(--black);color:#eee;padding:.2rem .5rem}
nav a{padding:.36rem .55rem;text-transform:uppercase;text-decoration:none;font-size:.9rem;line-height:1.45}
nav a:hover,footer a:hover{color:#f6b647}
.hero{background:linear-gradient(#0002,#0002),url("bilder/hintergrund.jpg") center 30% / cover;padding:clamp(2rem,5vw,4.5rem) 0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.8rem)}
.tile{position:relative;isolation:isolate;display:grid;place-items:center;min-height:235px;aspect-ratio:1.53;text-align:center;overflow:hidden;color:white;text-decoration:none;box-shadow:0 5px 15px #0004;background:#272420}
.tile img,.tile::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.tile img{object-fit:cover;transition:transform .25s ease}
.tile::after{content:"";background:#0009}
.tile:hover img{transform:scale(1.05)}
.tile div{padding:1rem}
.tile h2{font-size:clamp(1.05rem,2.4vw,1.65rem);text-transform:uppercase;line-height:1.15}
.tile p{margin:.5rem 0 .9rem;line-height:1.35}
.button{display:inline-block;background:var(--button);color:#18130a;font-size:.8rem;font-weight:700;text-transform:uppercase;padding:.55rem .95rem}
.intro{padding:2.1rem clamp(0px,4vw,3.15rem) 1.5rem}
h1,h3{color:var(--gold);font-size:1.14rem;line-height:1.35;margin-bottom:.5rem}
h1{text-transform:uppercase;letter-spacing:.025em}
.status{margin-top:.85rem;font-size:.92rem}
.section{margin:1.25rem 0 2.75rem}
.ruled{display:flex;align-items:center;gap:0;color:var(--gold);font-size:1.22rem;line-height:1.3;text-transform:uppercase;margin-bottom:1.35rem;text-align:center}
.ruled::before,.ruled::after{content:"";height:1px;background:var(--line);flex:1}
.ruled span{border:1px solid var(--line);padding:.6rem 1.05rem}
.panel,.feature,.chronik{background:#fff}
.panel{padding:clamp(1.15rem,3vw,2.1rem)}
.feature{display:grid;grid-template-columns:1.6fr 1fr;align-items:start}
.feature-main img{height:100%;object-fit:cover}
.feature-main,.feature-main a{height:100%;display:block}
.feature-copy{padding:clamp(1rem,3vw,2rem)}
.feature-copy figure{margin-top:1.2rem}
figcaption{font-size:.81rem;color:#595959;margin-top:.45rem}
.chronik{list-style:none;margin:0;padding:0 clamp(1rem,4vw,3rem)}
.chronik li{display:grid;grid-template-columns:4rem 1fr;gap:1.15rem;padding:1.25rem 0}
.chronik li+li{border-top:1px solid #e8e0d5}
.chronik time{font-weight:700;color:var(--gold)}
.chronik h3{margin-bottom:.25rem}
footer{background:var(--black);color:#f4f4f4;padding:2.4rem 0}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem}
.foot strong{text-transform:uppercase;font-size:.88rem}
.foot p,.legal{font-size:.9rem}
.legal{display:flex;gap:1.1rem;align-items:start}
.draft{max-width:48rem;padding-block:2rem 4rem}
.draft a{color:var(--gold)}
@media(max-width:800px){.tiles{gap:.8rem}.tile{min-height:190px;aspect-ratio:auto}.tile p{font-size:.88rem}.feature{grid-template-columns:1fr}.feature-main img{height:auto}.brand{min-height:160px}.logo{width:78px}}
@media(max-width:560px){.wrap{width:calc(100% - 2rem)}.tiles{grid-template-columns:1fr}.tile{min-height:175px}.hero{padding:1.1rem 0}.chronik li{gap:.6rem;grid-template-columns:3rem 1fr}nav{gap:0}nav a{font-size:.74rem;padding:.42rem .36rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}