@font-face{font-family:"Fira Sans";src:url(/assets/fonts/fira-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(/assets/fonts/fira-sans-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(/assets/fonts/fira-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(/assets/fonts/fira-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans Condensed";src:url(/assets/fonts/fira-sans-condensed-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Mono";src:url(/assets/fonts/fira-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Mono";src:url(/assets/fonts/fira-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --papier:#F5F7F4;--weiss:#FFFFFF;--tinte:#17283B;--blau:#164273;--blau-tief:#0F2E52;
  --gruen:#0B7A36;--gruen-tief:#09662D;--band:#E4F0E4;--linie:#D3DCD5;--grau:#566573;
  --rot:#B42318;--rot-hell:#FBE9E7;--ocker:#8A5A00;--ocker-hell:#FFF4D6;--marker:#FFE39A;
  --mass:68ch;--breit:1080px;
  --f-text:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-kopf:"Fira Sans Condensed","Fira Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --f-mono:"Fira Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.125rem/1.6 var(--f-text);font-kerning:normal;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
strong{font-weight:600}
p,ul,ol,dl,table,figure,pre{margin:0 0 1.1em}
ul,ol{padding-left:1.3em}
li{margin:0 0 .35em}
h1,h2,h3{font-family:var(--f-kopf);font-weight:600;color:var(--blau);line-height:1.15;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.125rem,1.45rem + 2.9vw,3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,1.35rem + 1.5vw,2.25rem);margin-top:2.2em}
h3{font-size:1.375rem;margin-top:1.7em}
h2[id],h3[id],section[id]{scroll-margin-top:1rem}
code,kbd,samp{font-family:var(--f-mono);font-size:.9em}
p code,li code,td code{background:var(--weiss);border:1px solid var(--linie);border-radius:3px;padding:.05em .3em;white-space:nowrap}
.wrap{max-width:var(--breit);margin:0 auto;padding:0 1.25rem}
.text{max-width:var(--mass)}
.klein{font-size:.9375rem;color:var(--grau)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--blau);color:#fff;padding:.55em 1em;z-index:20;border-radius:4px}
.skip:focus{left:1rem}

/* Kopf */
.kopf{background:var(--weiss);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.marke{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--blau);font:600 1.3rem/1 var(--f-kopf);white-space:nowrap}
.marke svg{width:34px;height:34px;flex:none}
.nav-breit ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-breit li{margin:0}
.nav-breit a,.nav-schmal a{color:var(--tinte);text-decoration:none;font-weight:500;font-size:1rem}
.nav-breit a:hover,.nav-schmal a:hover{color:var(--blau);text-decoration:underline}
.nav-breit a[aria-current=page],.nav-schmal a[aria-current=page]{color:var(--blau);box-shadow:inset 0 -2px 0 var(--gruen)}
.nav-schmal{display:none;position:relative}
.nav-schmal summary{list-style:none;cursor:pointer;font-weight:500;font-size:1rem;color:var(--blau);padding:.5rem .8rem;border:1px solid var(--linie);border-radius:6px;background:var(--weiss)}
.nav-schmal summary::-webkit-details-marker{display:none}
.nav-panel{position:absolute;right:0;top:calc(100% + .4rem);z-index:10;background:var(--weiss);border:1px solid var(--linie);border-radius:6px;min-width:15rem;box-shadow:0 12px 28px -14px rgba(23,40,59,.35)}
.nav-panel nav ul{list-style:none;margin:0;padding:.5rem 0}
.nav-panel nav li{margin:0}
.nav-panel nav li a{display:block;padding:.6rem 1rem}
.sprachen{display:flex;gap:.15rem;list-style:none;margin:0 0 0 1.2rem;padding:0}
.sprachen li{margin:0}
.sprachen a{display:block;font:600 .8125rem/1 var(--f-text);color:var(--grau);text-decoration:none;padding:.4rem .45rem;border-radius:4px;letter-spacing:.02em}
.sprachen a:hover{color:var(--blau);background:var(--band)}
.sprachen a[aria-current=true]{color:var(--blau);box-shadow:inset 0 0 0 1px var(--linie)}
.kopf-rechts{display:flex;align-items:center}
.nav-panel .sprachen{margin:0;padding:.5rem .6rem;border-top:1px solid var(--linie)}
.nav-panel .sprachen a{padding:.55rem .7rem;font-size:.875rem}
@media (max-width:860px){.nav-breit{display:none}.kopf-rechts>.sprachen{display:none}.nav-schmal{display:block}}

/* Startseite: Kopfbereich mit Werkzeug */
.held{padding:2.4rem 0 1.25rem}
.held h1{margin-bottom:.35em}
.lead{font-size:clamp(1.125rem,1rem + .5vw,1.25rem);line-height:1.55;max-width:58ch;margin-bottom:1.4rem}
.tool{max-width:860px}
#bbk-sepa{min-height:300px}
.tool-hinweis{font-size:.9375rem;color:var(--grau);margin:.9rem 0 0;max-width:72ch}
.fakten{display:flex;flex-wrap:wrap;gap:.35rem 1.75rem;list-style:none;padding:0;margin:1.1rem 0 0;font-size:1rem}
.fakten li{display:flex;align-items:baseline;gap:.5rem;margin:0}
.fakten li::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--gruen);transform:translateY(-.05em)}

/* Abschnitte */
.abschnitt{padding:.5rem 0 1rem}
.abschnitt>h2:first-child{margin-top:2.2em}
.zwei{padding-top:3.2rem}
.zwei>div>h2:first-child{margin-top:0}
.zwei{display:grid;gap:2rem}
@media (min-width:920px){.zwei{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3.25rem;align-items:start}.zwei .rechts{position:sticky;top:1.5rem}}
.pruefliste{list-style:none;padding:0;margin:0 0 1.2em}
.pruefliste li{padding:.8rem 0;border-top:1px solid var(--linie);margin:0}
.pruefliste li:last-child{border-bottom:1px solid var(--linie)}
.pruefliste b{display:block;font:600 1.125rem/1.3 var(--f-kopf);color:var(--blau);margin-bottom:.15rem}

/* Prüfprotokoll auf Endlospapier */
.protokoll{margin:0}
.papier{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;background:var(--weiss);border-top:1px dashed #B9C6BC;border-bottom:1px dashed #B9C6BC;box-shadow:0 22px 44px -30px rgba(23,40,59,.45);font:400 .9375rem/1.6 var(--f-mono);color:var(--tinte)}
.papier .rand{background:radial-gradient(circle,var(--papier) 0 4.5px,#C3CEC6 5px 5.6px,transparent 6.2px) 50% 14px/28px 30px repeat-y}
.papier .rand:first-child{border-right:1px dashed #C3CEC6}
.papier .rand:last-child{border-left:1px dashed #C3CEC6}
.papier ol{list-style:none;margin:0;padding:.5rem 0}
.papier li{display:grid;grid-template-columns:7.6em minmax(0,1fr) auto;gap:.2rem .9rem;align-items:baseline;padding:.32rem 1rem;margin:0;min-height:2.1rem}
.papier li:nth-child(4n+3),.papier li:nth-child(4n+4){background:var(--band)}
.papier .nr{color:var(--grau)}
.papier .st{font-weight:500;white-space:nowrap}
.papier .st-fehler{color:var(--rot)}
.papier .st-hinweis{color:var(--ocker)}
.papier .st-ok{color:var(--gruen)}
.papier .voll{grid-column:1/-1}
.papier .kopfzeile{display:block;font-weight:500;color:var(--blau)}
.papier .ergebnis{display:block;font-weight:500;border-top:1px solid var(--tinte);margin-top:.3rem;padding-top:.5rem}
.papier .ergebnis b{color:var(--rot);font-weight:500}
.protokoll figcaption{font-size:.9375rem;color:var(--grau);margin-top:.8rem}
@media (max-width:560px){.papier{font-size:.8125rem;grid-template-columns:18px minmax(0,1fr) 18px}.papier .rand{background-size:18px 26px;background-image:radial-gradient(circle,var(--papier) 0 3px,#C3CEC6 3.5px 4px,transparent 4.5px)}.papier li{grid-template-columns:minmax(0,1fr) auto;padding:.32rem .6rem}.papier li .nr{grid-column:1/-1}}

/* Preisliste */
.preise{width:100%;max-width:780px;border-collapse:collapse;background:var(--weiss);font-size:1.0625rem}
.preise caption{text-align:left;font-size:.9375rem;color:var(--grau);padding:0 0 .5rem}
.preise th,.preise td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--linie);vertical-align:top}
.preise thead th{font-weight:600;font-size:.9375rem;color:var(--grau);border-bottom:2px solid var(--blau)}
.preise .betrag{text-align:right;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.preise td small{display:block;color:var(--grau);font-size:.9375rem;font-weight:400}

/* Ablauf */
.ablauf{list-style:none;counter-reset:schritt;padding:0;max-width:var(--mass)}
.ablauf li{counter-increment:schritt;position:relative;padding:.1rem 0 .9rem 3.1rem;margin:0}
.ablauf li::before{content:counter(schritt);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--blau);color:#fff;font:600 1.1rem/2.1rem var(--f-kopf);text-align:center}

/* Knöpfe und Werkzeughinweis */
.knopf{display:inline-block;background:var(--gruen);color:#fff;font:600 1.0625rem/1.2 var(--f-text);padding:.85rem 1.4rem;border-radius:6px;text-decoration:none;white-space:nowrap}
.knopf:hover{background:var(--gruen-tief);color:#fff}
.knopf:focus-visible{outline-color:var(--tinte)}
.knopf-zweit{display:inline-block;background:var(--weiss);color:var(--blau);font:600 1.0625rem/1.2 var(--f-text);padding:calc(.85rem - 2px) 1.4rem;border:2px solid var(--blau);border-radius:6px;text-decoration:none;white-space:nowrap}
.knopf-zweit:hover{background:var(--band);color:var(--blau)}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.2rem 0 1rem}
.toolblock{display:flex;gap:1.25rem;align-items:center;justify-content:space-between;background:var(--blau);color:#fff;border-radius:8px;padding:1.2rem 1.4rem;margin:1.8rem 0;max-width:860px}
.toolblock p{margin:0;color:#E2EAF3}
.toolblock .tb-t{font:600 1.25rem/1.25 var(--f-kopf);color:#fff;margin-bottom:.25rem}
.toolblock .knopf{flex:none}
.toolblock .knopf:focus-visible{outline-color:#fff}
@media (max-width:640px){.toolblock{flex-direction:column;align-items:stretch}.toolblock .knopf{text-align:center}}

/* Überblick, Hinweise */
.ueberblick{background:var(--weiss);border-left:4px solid var(--gruen);padding:1.1rem 1.4rem .3rem;margin:1.6rem 0;max-width:var(--mass)}
.ueberblick h2{font-size:1.25rem;margin:0 0 .5rem}
.ueberblick ul{margin-bottom:.8rem}
.hinweis{background:var(--ocker-hell);border-left:4px solid var(--ocker);padding:.9rem 1.2rem;margin:1.4rem 0;max-width:var(--mass)}
.hinweis p:last-child{margin-bottom:0}

/* Tabellen */
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em}
.tabelle{width:100%;border-collapse:collapse;background:var(--weiss);font-size:1rem}
.tabelle th,.tabelle td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle thead th{font-weight:600;color:var(--blau);border-bottom:2px solid var(--blau);white-space:nowrap}
.tabelle tbody tr:nth-child(even){background:var(--band)}
.tabelle td:first-child{font-weight:600;white-space:nowrap}
.tabelle td.cd{font-family:var(--f-mono);font-weight:500;color:var(--blau)}
@media (max-width:640px){
  .tabelle.stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabelle.stapel,.tabelle.stapel tbody,.tabelle.stapel tr,.tabelle.stapel td{display:block;width:100%}
  .tabelle.stapel tr{border:1px solid var(--linie);border-radius:6px;margin:0 0 .8rem;background:var(--weiss)!important;overflow:hidden}
  .tabelle.stapel td{border-bottom:1px solid #EEF2EF;white-space:normal}
  .tabelle.stapel td:first-child{background:var(--band)}
  .tabelle.stapel td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-weight:600;color:var(--blau);font-size:.875rem}
}

/* Code */
.code{background:var(--blau-tief);color:#E6EDF5;font:400 .875rem/1.65 var(--f-mono);padding:1rem 1.15rem;border-radius:6px;overflow-x:auto;white-space:pre;tab-size:2}
.code mark{background:#FFE39A;color:#17283B;border-radius:2px;padding:0 .1em}
.code mark.alt{background:#F6C9C2}
.code-titel{font:600 1rem/1.3 var(--f-text);color:var(--blau);margin:1.2rem 0 .35rem}
.vergleich{display:grid;gap:0 1.25rem}
.vergleich>div{min-width:0}
@media (min-width:860px){.vergleich{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.vergleich.drei{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Kontoauszug */
.auszug{margin:1.6rem 0 1.8rem;max-width:760px}
.auszug .blatt{background:var(--weiss);border:1px solid var(--linie);box-shadow:0 18px 36px -28px rgba(23,40,59,.45)}
.auszug .blatt-kopf{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem;border-bottom:2px solid var(--blau);font-weight:600;color:var(--blau)}
.auszug table{width:100%;border-collapse:collapse;font-size:.9688rem}
.auszug th,.auszug td{padding:.6rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid #EEF2EF}
.auszug th{font-weight:500;color:var(--grau);font-size:.875rem}
.auszug td.betrag,.auszug th.betrag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.auszug .rl{background:var(--band)}
.auszug .zeile2{display:block;color:var(--grau);font-size:.9063rem}
.auszug mark{background:var(--marker);color:var(--tinte);font-family:var(--f-mono);font-weight:500;padding:0 .2em;border-radius:2px;box-shadow:0 0 0 2px var(--marker)}
.auszug figcaption{font-size:.9375rem;color:var(--grau);margin-top:.7rem}

/* Anschrift mit Feldnamen */
.anschrift{margin:1.6rem 0;max-width:620px}
.anschrift .feld{background:var(--weiss);border:1px solid var(--linie);padding:1.3rem 1.5rem 1.1rem;font-size:1.25rem;line-height:1.3}
.anschrift .z{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0 0 1.15rem}
.anschrift .z:last-child{margin-bottom:0}
.anschrift .t{display:inline-flex;flex-direction:column;align-items:flex-start}
.anschrift .t span{border-bottom:3px solid var(--gruen);padding:0 .05em .1rem}
.anschrift .t code{font-size:.8125rem;color:var(--blau);background:none;border:0;padding:.25rem 0 0;white-space:nowrap}
.anschrift figcaption{font-size:.9375rem;color:var(--grau);margin-top:.7rem}

/* Zeitleiste */
.zeitleiste{list-style:none;padding:0;margin:1.2rem 0 1.6rem;max-width:var(--mass);border-left:2px solid var(--linie)}
.zeitleiste li{position:relative;padding:0 0 1.1rem 1.4rem;margin:0}
.zeitleiste li::before{content:"";position:absolute;left:-7px;top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--weiss);border:2px solid var(--blau)}
.zeitleiste li.offen::before{border-style:dashed;border-color:var(--ocker)}
.zeitleiste .wann{display:block;font:600 1.0625rem/1.3 var(--f-kopf);color:var(--blau)}

/* FAQ */
.faq{max-width:var(--mass);margin:0 0 1.5rem}
.faq details{border-top:1px solid var(--linie)}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:.95rem 2.4rem .95rem 0;font-weight:600;color:var(--blau)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.35rem;top:.75rem;font:500 1.5rem/1 var(--f-text);color:var(--gruen)}
.faq details[open] summary::after{content:"\2013"}
.faq .antwort{padding:0 0 1rem}
.faq .antwort p:last-child{margin-bottom:0}

/* Unterseiten */
.brotkrumen{font-size:.9375rem;color:var(--grau);padding:1.2rem 0 0}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin:0}
.brotkrumen li{margin:0}
.brotkrumen li+li::before{content:"/";margin-right:.3rem;color:#9AA8A0}
.artikel{padding:1rem 0 2rem}
.artikel .stand{font-size:.9375rem;color:var(--grau);margin:-.3rem 0 1.2rem}
.artikel>.wrap>*:not(.breit){max-width:var(--mass)}
.quellen{font-size:.9375rem;max-width:var(--mass)}
.quellen li{margin-bottom:.4rem}
.weiter{list-style:none;padding:0;max-width:var(--mass)}
.weiter li{border-top:1px solid var(--linie);padding:.75rem 0;margin:0}
.weiter li:last-child{border-bottom:1px solid var(--linie)}
.weiter a{font-weight:600}

/* Rechtstexte */
.recht h2{font-size:1.5rem;margin-top:1.9em}
.recht h3{font-size:1.1875rem;margin-top:1.4em}
.recht ol.abs{padding-left:1.6em}
.recht dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem}
.recht dt{font-weight:600}
.recht dd{margin:0}
@media (max-width:560px){.recht dl{grid-template-columns:1fr}.recht dd{margin-bottom:.5rem}}

/* Fuß */
.fuss{background:var(--weiss);border-top:1px solid var(--linie);margin-top:3rem;padding:2rem 0 2.4rem;font-size:.9375rem;color:var(--grau)}
.fuss .spalten{display:grid;gap:1.4rem}
@media (min-width:760px){.fuss .spalten{grid-template-columns:2fr 1fr 1fr}}
.fuss h2{font:600 1rem/1.3 var(--f-text);color:var(--tinte);margin:0 0 .5rem}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin:0 0 .35rem}
.fuss a{color:var(--blau)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.kopf nav,.toolblock,.fuss,.skip{display:none}body{background:#fff}}