@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/sourceserif4-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/sourceserif4-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/sourceserif4-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibmplexsans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibmplexsans-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url("/assets/fonts/cinzel-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --papier:#fbfaf7;
  --papier-tief:#f2efe9;
  --tinte:#1f2328;
  --tinte-weich:#575e66;
  --akzent:#9b2d26;
  --akzent-dunkel:#7a231d;
  --akzent-hell:#f7ebe9;
  --ocker:#b8893a;
  --linie:#ddd8cf;

  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;

  --sans:"IBM Plex Sans","Segoe UI",Corbel,sans-serif;
  --serif:"Source Serif 4",Georgia,Constantia,serif;
  --capitalis:"Cinzel","Palatino Linotype","Book Antiqua",Georgia,serif;

  --fs-label:clamp(12.5px,.09vw + 12.15px,13.5px);
  --fs-klein:clamp(14.5px,.09vw + 14.15px,15.5px);
  --fs-ui:clamp(15px,.14vw + 14.48px,16.5px);
  --fs-text:clamp(16.5px,.19vw + 15.8px,18.5px);
  --fs-def:clamp(18px,.23vw + 17.14px,20.5px);
  --fs-h3:clamp(17px,.19vw + 16.3px,19px);
  --fs-h2:clamp(21px,.56vw + 18.9px,27px);
  --fs-h1:clamp(29px,1.22vw + 24.4px,42px);
  --fs-zahl:clamp(36px,.94vw + 32.48px,46px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--serif);
  font-size:var(--fs-text);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--akzent-dunkel)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

.versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-9999px;background:var(--akzent);color:#fff;padding:var(--s2);z-index:50}
.sprung:focus{left:var(--s2);top:var(--s2)}

.wrap{max-width:1340px;margin:0 auto;padding:0 var(--s3)}

.leiste{background:var(--papier-tief);border-bottom:1px solid var(--linie);font-family:var(--sans);font-size:var(--fs-klein)}
.leiste .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:11px var(--s3);flex-wrap:wrap}
.marke{font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);letter-spacing:-.01em;color:var(--tinte);text-decoration:none;white-space:nowrap}
.marke span{color:var(--akzent)}

.hauptnav ul{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.hauptnav a{color:var(--tinte-weich);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.hauptnav a:hover{color:var(--akzent)}
.hauptnav a[aria-current]{color:var(--akzent);border-color:var(--akzent)}

.suche{display:flex;gap:6px}
.suche input{font-family:var(--sans);font-size:var(--fs-klein);padding:7px 10px;border:1px solid var(--linie);background:#fff;min-width:150px;color:var(--tinte)}
.suche button{font-family:var(--sans);font-size:var(--fs-klein);padding:7px 14px;border:1px solid var(--linie);background:#fff;cursor:pointer;color:var(--tinte);transition:background .25s,border-color .25s}
.suche button:hover{background:var(--akzent-hell);border-color:var(--akzent)}

.raster{display:grid;grid-template-columns:1fr;gap:var(--s4);padding:var(--s4) 0 var(--s6)}
@media(min-width:1060px){
  .raster{grid-template-columns:236px minmax(0,1fr) 330px;gap:var(--s5)}
  .raster-schmal{grid-template-columns:236px minmax(0,1fr)}
}

.inhalt-nav{font-family:var(--sans);font-size:var(--fs-klein);line-height:1.55}
@media(min-width:1060px){.inhalt-nav{position:sticky;top:var(--s3);align-self:start;max-height:88vh;overflow:auto}}
.inhalt-nav h2{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.11em;color:var(--tinte-weich);
  border-bottom:1px solid var(--linie);padding-bottom:7px;margin:0 0 var(--s2)}
.inhalt-nav ol{margin:0;padding-left:1.5em}
.inhalt-nav li{margin-bottom:9px}
.inhalt-nav a{text-decoration:none}
.inhalt-nav a:hover{text-decoration:underline}
.inhalt-nav ol ol{margin-top:9px;padding-left:1.2em}
.inhalt-nav ol ol a{color:var(--tinte-weich)}

article h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);line-height:1.18;
  margin:0 0 6px;border-bottom:2px solid var(--akzent);padding-bottom:var(--s2)}
.unterzeile{font-family:var(--sans);font-size:var(--fs-label);color:var(--tinte-weich);margin:0 0 var(--s4)}
article h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);margin:var(--s5) 0 var(--s2);
  border-bottom:1px solid var(--linie);padding-bottom:6px;scroll-margin-top:var(--s3)}
article h3{font-family:var(--sans);font-weight:600;font-size:var(--fs-h3);margin:var(--s4) 0 var(--s1);scroll-margin-top:var(--s3)}
article p{margin:0 0 var(--s2);max-width:72ch}
article ul,article ol{max-width:72ch}
.def{font-size:var(--fs-def)}
sup a{font-size:.7em;text-decoration:none;padding:0 1px}
.rom{font-family:var(--capitalis);letter-spacing:.09em}

.werkzeug{border:1px solid var(--linie);border-left:4px solid var(--akzent);background:#fff;padding:var(--s3);margin:var(--s4) 0}
.werkzeug h2,.werkzeug h3{font-family:var(--sans);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.12em;
  color:var(--akzent);margin:0 0 var(--s2);border:0;padding:0}
.feldreihe{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2);align-items:center}
@media(max-width:560px){.feldreihe{grid-template-columns:1fr;text-align:center}}
.feldreihe input{width:100%;font-family:var(--serif);font-size:clamp(22px,.56vw + 19.9px,28px);text-align:center;padding:11px;
  border:1px solid var(--linie);background:var(--papier);color:var(--tinte);transition:border-color .25s,box-shadow .25s}
.feldreihe input:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(155,45,38,.14)}
.feldreihe input.rom{font-family:var(--capitalis)}
.pfeil{font-size:21px;color:var(--tinte-weich);background:none;border:1px solid transparent;cursor:pointer;padding:var(--s1) var(--s2);
  transition:color .25s,border-color .25s}
.pfeil:hover{color:var(--akzent);border-color:var(--linie)}
.hinweis{font-family:var(--sans);font-size:var(--fs-label);color:var(--tinte-weich);margin:var(--s2) 0 0;text-align:center}
.hinweis.warnung{color:var(--akzent)}

.infobox{border:1px solid var(--linie);background:var(--papier-tief);font-family:var(--sans);font-size:var(--fs-klein);line-height:1.55}
@media(min-width:1060px){.infobox{position:sticky;top:var(--s3);align-self:start}}
.infobox .kopf{background:var(--akzent);color:#fff;padding:11px var(--s2);font-weight:600;font-size:var(--fs-ui);text-align:center;margin:0}
.infobox .gross{font-family:var(--capitalis);font-size:var(--fs-zahl);letter-spacing:.09em;text-align:center;
  padding:var(--s3) var(--s2) var(--s2);color:var(--akzent);margin:0;word-break:break-word}
.infobox table{width:100%;border-collapse:collapse}
.infobox th{text-align:left;font-weight:600;color:var(--tinte-weich);padding:9px var(--s2);width:44%;
  border-top:1px solid var(--linie);vertical-align:top}
.infobox td{padding:9px var(--s2);border-top:1px solid var(--linie)}
.infobox td.rom{color:var(--tinte);font-size:var(--fs-ui)}
.infobox .fuss{padding:var(--s2);border-top:1px solid var(--linie);font-size:var(--fs-klein)}
.infobox .fuss a{display:block;margin-bottom:7px}

.datentabelle{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-family:var(--sans);font-size:var(--fs-klein)}
.datentabelle caption{font-family:var(--sans);font-size:var(--fs-label);color:var(--tinte-weich);text-align:left;padding-bottom:7px}
.datentabelle th{background:var(--papier-tief);text-align:left;font-weight:600;font-size:var(--fs-label);letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinte-weich);padding:9px var(--s2);border:1px solid var(--linie)}
.datentabelle td{padding:9px var(--s2);border:1px solid var(--linie)}
.datentabelle td.rom{font-family:var(--capitalis);font-size:var(--fs-def);color:var(--akzent)}
.datentabelle tfoot td{background:var(--akzent-hell);font-weight:600}
.datentabelle tbody tr:hover td{background:var(--akzent-hell)}

.kasten{border:1px solid var(--linie);background:#fff;padding:var(--s2) var(--s3);margin:var(--s3) 0;
  font-family:var(--sans);font-size:var(--fs-klein);border-left:4px solid var(--ocker)}
.kasten b{display:block;margin-bottom:4px;font-size:var(--fs-ui)}
.kasten p{margin:0;max-width:none}

.belege{font-family:var(--sans);font-size:var(--fs-klein);color:var(--tinte-weich)}
.belege li{margin-bottom:9px}
.siehe{font-family:var(--sans);font-size:var(--fs-ui)}
.siehe ul{columns:2;column-gap:var(--s4);padding-left:1.2em;margin:0}
@media(max-width:600px){.siehe ul{columns:1}}
.siehe li{margin-bottom:7px;break-inside:avoid}

.zahlbild{margin:var(--s4) 0;max-width:72ch}
.zahlbild img{display:block;width:100%;height:auto;border:1px solid var(--linie)}
.zahlbild figcaption{font-family:var(--sans);font-size:var(--fs-label);color:var(--tinte-weich);margin-top:var(--s1)}

.zahlgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:1px;margin:var(--s3) 0;
  font-family:var(--sans);font-size:var(--fs-klein)}
.zahlgitter a{background:#fff;box-shadow:0 0 0 1px var(--linie);padding:11px var(--s2);text-decoration:none;color:var(--tinte);
  transition:background .25s}
.zahlgitter a:hover{background:var(--akzent-hell)}
.zahlgitter .rom{display:block;color:var(--akzent);font-size:var(--fs-def)}

.werbung{min-height:106px;margin:var(--s4) 0;overflow:hidden}
.werbung-seite{min-height:600px;margin-top:var(--s3)}
.werbung ins{display:block}

footer{border-top:1px solid var(--linie);background:var(--papier-tief);padding:var(--s4) 0;
  font-family:var(--sans);font-size:var(--fs-klein);color:var(--tinte-weich)}
.fuss-links{display:flex;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s1)}
.fuss-zeile{margin:0}

@media(max-width:600px){
  .datentabelle{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .leiste .wrap{gap:var(--s2)}
  .suche{width:100%}
  .suche input{flex:1;min-width:0}
}
