*,*::before,*::after{box-sizing:border-box}
:root{
  --blau:#1f4788;
  --blau-tief:#152f58;
  --blau-hell:#3566b4;
  --gips:#f2ede4;
  --gips-tief:#e3dacb;
  --tinte:#15181d;
  --grau:#5b6472;
  --linie:#d9d3c8;
  --weiss:#fff;
  --mass:72rem;
  --r:2px;
}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--weiss);color:var(--tinte);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-underline-offset:.18em}
h1,h2,h3{line-height:1.15;letter-spacing:-.018em;margin:0 0 .6em;font-weight:700}
h1{font-size:clamp(2rem,1.3rem + 2.9vw,3.4rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem)}
h3{font-size:clamp(1.12rem,1rem + .45vw,1.35rem)}
p{margin:0 0 1.1em;max-width:68ch}
.wrap{max-width:var(--mass);margin-inline:auto;padding-inline:clamp(0rem,1.5vw,.75rem)}

.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex:0 0 auto}
.marke img{width:40px;height:auto}
.marke b{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.1}
.marke span{font-size:.72rem;color:var(--grau);letter-spacing:.09em;text-transform:uppercase}
.menu{margin-left:auto;display:flex;gap:.35rem;flex-wrap:wrap}
.menu a{padding:.5rem .8rem;border-radius:var(--r);text-decoration:none;color:var(--tinte);
  font-size:.94rem;font-weight:500;white-space:nowrap}
.menu a:hover{background:var(--gips)}
.menu a[aria-current="page"]{color:var(--blau);box-shadow:inset 0 -2px 0 var(--blau)}
.menu-knopf{display:none;margin-left:auto;background:none;border:1px solid var(--linie);
  border-radius:var(--r);padding:.55rem .8rem;font:inherit;font-size:.9rem;cursor:pointer}

.held{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0f2banner 0%,var(--blau-tief) 42%,#0d2games 100%)}
.held{background:linear-gradient(158deg,#16325e 0%,#1f4788 46%,#122546 100%)}
.held::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(130% 100% at 12% 42%,rgba(86,140,222,.42),transparent 64%)}

.held::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:radial-gradient(circle,#fff .9px,transparent 1px);
  background-size:13px 13px}
.held-in{padding-block:clamp(4rem,10vw,8rem);padding-inline:clamp(1rem,3vw,1.75rem)}
.held h1{max-width:19ch;margin-bottom:.5em}
.held .lead{font-size:clamp(1.06rem,.98rem + .4vw,1.3rem);max-width:54ch;color:#dbe4f3;margin-bottom:2rem}
.augen{display:flex;flex-wrap:wrap;gap:.5rem}
.auge{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.38rem .85rem;
  font-size:.83rem;letter-spacing:.02em;color:#e8eefa}

.bogen{position:absolute;right:-14%;top:50%;translate:0 -50%;width:min(78vw,880px);
  aspect-ratio:1;z-index:-1;opacity:.3;pointer-events:none}
@media(max-width:47.99rem){.bogen{right:-42%;width:140vw;opacity:.22}}
.bogen svg{width:100%;height:100%}

.sek{padding-block:clamp(3rem,7vw,5.5rem);padding-inline:clamp(1rem,3vw,1.75rem)}
.sek--gips{background:var(--gips)}
.sek--linie{border-top:1px solid var(--linie)}
.titel{max-width:60ch;margin-bottom:2.5rem}

.titel .ueber,.prosa .ueber{display:none}

.gitter{display:grid;gap:1.5rem}
@media(min-width:48rem){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:1.6rem;
  display:flex;flex-direction:column;gap:.5rem}
.karte h3{margin:0}
.karte p{margin:0;color:var(--grau);font-size:.97rem}
.karte .zahl{font-variant-numeric:tabular-nums;font-size:2.1rem;font-weight:700;
  color:var(--blau);line-height:1}

.liste{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:.45rem}
.liste li{padding-left:1.45rem;position:relative;color:var(--grau)}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);rotate:-45deg}
.spalten{display:grid;gap:2rem}
@media(min-width:48rem){.spalten{grid-template-columns:repeat(3,1fr)}}

.sek--voll{padding-block:0;padding-inline:0}
.breit{margin:0;position:relative}
.breit img{width:100%;height:clamp(16rem,38vw,30rem);object-fit:cover;display:block}
.breit figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(13,25,46,.82));
  color:#e8eefa;font-size:.88rem;padding:3rem clamp(1rem,4vw,2.5rem) 1.1rem}

.karte--bild{padding:0;overflow:hidden}
.karte--bild figure{margin:0;aspect-ratio:16/10;background:var(--gips-tief)}
.karte--bild figure img{width:100%;height:100%;object-fit:cover}
.karte--bild h3{padding:1.3rem 1.4rem 0}
.karte--bild p{padding:0 1.4rem 1.5rem}

.galerie{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(min-width:48rem){.galerie--drei{grid-template-columns:repeat(3,1fr)}}
.galerie figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--gips-tief);
  aspect-ratio:4/3}
.galerie img{width:100%;height:100%;object-fit:cover;transition:scale .4s ease}
.galerie a:hover img{scale:1.04}

.obj{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:#fff}
.obj + .obj{margin-top:1.1rem}
.obj summary{cursor:pointer;padding:1rem 1.3rem;font-weight:600;display:flex;
  align-items:center;gap:.7rem;list-style:none}
.obj summary::-webkit-details-marker{display:none}
.obj summary::after{content:"";margin-left:auto;width:.55rem;height:.55rem;
  border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);rotate:45deg;
  transition:rotate .2s}
.obj[open] summary::after{rotate:-135deg}
.obj summary:hover{background:var(--gips)}
.obj .anz{font-size:.8rem;color:var(--grau);font-weight:400}
.tab{width:100%;border-collapse:collapse;font-size:.92rem}
.tab th,.tab td{text-align:left;padding:.7rem 1.3rem;border-top:1px solid var(--linie);
  vertical-align:top}
.tab th{background:var(--gips);font-weight:600;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grau)}
.tab td:first-child{font-weight:500}
.tab-roll{overflow-x:auto}

.fuss{background:var(--blau-tief);color:#c3cee2;padding-block:3rem;margin-top:4rem;font-size:.92rem}
.fuss a{color:#fff}
.fuss-in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:start}
.fuss-nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.fuss-nav a{text-decoration:none}
.fuss-nav a:hover{text-decoration:underline}

.vhidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.lead-text{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);color:#2b3340;max-width:60ch}
.prosa .liste{margin-block:1.2em 1.8em}
.prosa .liste + p{margin-top:0}
.prosa h2{margin-top:2.2em}
.prosa p:first-of-type{font-size:1.1rem;color:#2b3340}

@media(max-width:47.99rem){
  .menu{position:fixed;inset:4.5rem 0 auto;background:#fff;flex-direction:column;
    padding:1rem clamp(1rem,4vw,2.5rem) 1.5rem;border-bottom:1px solid var(--linie);
    gap:.2rem;display:none;box-shadow:0 14px 30px rgba(0,0,0,.09)}
  .menu.auf{display:flex}
  .menu a{padding:.7rem .3rem;font-size:1rem}
  .menu-knopf{display:block}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.artikel h1{font-size:clamp(1.85rem,1.25rem + 2.3vw,2.85rem);max-width:26ch;text-wrap:balance;margin-bottom:.45em}
.prosa p.stand{margin:0 0 1.6rem;font-size:.9rem;color:var(--grau)}
.prosa p.vorspann{font-size:1.1rem;color:#2b3340}
.artikel h2{margin-top:2.4em;max-width:34ch}
.artikel h3{margin:1.8em 0 .5em;font-size:clamp(1.08rem,1rem + .35vw,1.25rem)}
.artikel h2 + h3{margin-top:1em}

.artikel p,.artikel .faq,.artikel .normen,.schema figcaption > p{max-width:56ch}

.artikel ul:not([class]),.artikel ol:not([class]){max-width:56ch;margin:0 0 1.3em;padding-left:1.3em}
.artikel ul:not([class]) li,.artikel ol:not([class]) li{margin-bottom:.45em;padding-left:.15em}
.artikel ul:not([class]) li::marker,.artikel ol:not([class]) li::marker{color:var(--blau);font-weight:600}

.tabelle{margin:.6rem 0 1.8rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linie);border-radius:var(--r);background:#fff}
.tabelle:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.datentabelle{width:100%;border-collapse:collapse;font-size:.93rem;line-height:1.5;hyphens:auto}
.datentabelle caption{caption-side:top;text-align:left;padding:.85rem 1.1rem .75rem;font-size:.88rem;
  color:var(--tinte);background:var(--gips);border-bottom:1px solid var(--linie)}
.datentabelle th,.datentabelle td{text-align:left;vertical-align:top;padding:.65rem 1.1rem;border-top:1px solid var(--linie)}
.datentabelle thead th{font-weight:600;font-size:.86rem;color:var(--grau);border-top:0}
@media(max-width:47.99rem){.datentabelle th,.datentabelle td{padding:.6rem .75rem}}
.datentabelle tbody th{font-weight:600}
.datentabelle td{font-variant-numeric:tabular-nums}

.schema{margin:1.4rem 0 2rem;max-width:46rem}
.schema svg{display:block;width:100%;height:auto;background:#fff;
  border:1px solid var(--linie);border-radius:var(--r)}
.schema figcaption{margin-top:.8rem;font-size:.92rem;line-height:1.55;color:var(--grau)}
.schema figcaption > p{margin:0 0 .6rem;color:var(--tinte);font-weight:600;font-size:.92rem}
.legende{list-style:none;margin:0;padding:0;counter-reset:pos;display:grid;gap:.3rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.legende li{position:relative;padding-left:1.9rem}
.legende li::before{counter-increment:pos;content:counter(pos);position:absolute;left:0;top:.12em;
  width:1.3rem;height:1.3rem;border-radius:50%;background:var(--blau);color:#fff;
  font-size:.74rem;font-weight:700;line-height:1.3rem;text-align:center}

.faq{max-width:56ch}
.faq h3{margin:1.5em 0 .4em}
.faq h3:first-child{margin-top:.4em}
.artikel .normen{list-style:none;margin:0 0 1rem;padding:0;max-width:56ch;font-size:.94rem;border-top:1px solid var(--linie)}
.artikel .normen li{padding:.7rem 0;border-bottom:1px solid var(--linie);color:var(--grau)}
.artikel .normen a{font-weight:600}

.weiter .titel{margin-bottom:1.4rem}
.karte--link{max-width:36rem;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease}
.karte--link h3{color:var(--blau)}
.karte--link:hover{border-color:var(--blau);box-shadow:0 6px 18px rgba(21,47,88,.08)}
.karte--link:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.karte--link .mehr{margin-top:.4rem;color:var(--blau);font-weight:600;font-size:.95rem}

.liste li > a{display:block;position:relative;margin-block:-.55rem;padding-block:.55rem;
  color:var(--blau);text-decoration:underline;text-decoration-color:var(--linie);
  text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .18s ease}
.liste li > a:hover,.liste li > a:focus-visible{text-decoration-color:var(--blau)}