:root {
  --navy: #16243f; --navy-soft: #223353; --ink: #1f2937; --slate: #55647a; --slate-light: #626e82;
  --blue: #1f8fd4; --blue-dark: #0f5c96; --blue-fill: #e8f1fc;
  --green: #1f936a; --green-ink: #156c3f; --green-fill: #e9f6ef; --green-line: #a7d9c2;
  --red: #c0392b; --red-fill: #fbe9e9; --amber: #d9930a; --amber-ink: #8f5e09; --amber-fill: #fbf1e0; --violet: #563590;
  --card: #ffffff; --line: #e6ebf3; --line-strong: #d3dce8;
  --g-blue: linear-gradient(135deg, #eef4fc 0%, #f3f1fb 52%, #fdf3f6 100%);
  --g-green: linear-gradient(135deg, #ecf7f1 0%, #f4f8f5 60%, #eef5fb 100%);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  --wrap: 1160px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--sans); background: var(--card); color: var(--ink); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }
@media (max-width: 520px) { .wrap { padding: 0 20px; } }

h1, h2, h3 { color: var(--navy); letter-spacing: -0.025em; text-wrap: balance; font-weight: 800; }
h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.03; }
h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.07; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.lede { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--slate); max-width: 46ch; }

.plabel { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 17px; font-weight: 700; font-size: 14px; color: var(--navy); box-shadow: 0 3px 12px rgba(20,36,63,0.05); }
.plabel .d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.plabel--dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; box-shadow: none; }

.pbtn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 28px; font-weight: 600; font-size: 15.5px; cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, background .15s, border-color .15s; }
.pbtn:active { transform: translateY(1px); }
.pbtn--navy { background: var(--navy); color: #fff; }
.pbtn--navy:hover { background: #0f1b30; }

.pbtn--light { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.pbtn--light:hover { border-color: var(--slate-light); }
.pbtn--sm { padding: 9px 18px; font-size: 14px; }
.pbtn--white { background: #fff; color: var(--navy); }
.pbtn--white:hover { background: #eef2f8; }
.pbtn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.pbtn--ghost:hover { border-color: #fff; }
a.pbtn:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(20,36,63,0.06); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; color: var(--navy); white-space: nowrap; }
.brand svg { flex: 0 0 auto; }
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a:not(.pbtn) { font-size: 14.5px; color: var(--slate); font-weight: 500; }
.nav__links a:not(.pbtn):hover { color: var(--navy); }
@media (max-width: 1040px) { .nav__links a:not(.pbtn) { display: none; } }
@media (max-width: 420px) { .brand span { font-size: 14px; } }

.browser { background: #fff; border-radius: 15px; box-shadow: 0 44px 90px -34px rgba(20,36,63,0.42), 0 8px 24px -12px rgba(20,36,63,0.18); overflow: hidden; border: 1px solid rgba(20,36,63,0.06); min-width: 0; }
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: #f6f8fc; border-bottom: 1px solid var(--line); }
.browser__bar .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.browser__bar .url { margin: 0 auto; font-size: 12.5px; color: var(--slate-light); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 18px; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser__bar .url::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--slate-light); border-radius: 2px; flex: 0 0 auto; }
.browser__body { padding: 20px; overflow-x: auto; }
@media (max-width: 520px) { .browser__body { padding: 14px; } .browser__bar .url { padding: 4px 10px; } }

.band { padding: 100px 0; }
@media (max-width: 720px) { .band { padding: 62px 0; } }
.band--blue { background: var(--g-blue); }
.band--green { background: var(--g-green); }

.show { display: grid; grid-template-columns: 1fr 1.12fr; gap: 60px; align-items: center; }
.show.rev { grid-template-columns: 1.12fr 1fr; }
.show.rev .show__txt { order: 2; }
@media (max-width: 900px) { .show, .show.rev { grid-template-columns: 1fr; gap: 36px; } .show.rev .show__txt { order: 0; } }
.show__txt .plabel { margin-bottom: 22px; }
.show__txt h2 { margin-bottom: 18px; }
.show__txt .lede { max-width: 42ch; }
.show__cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.show > * { min-width: 0; }

.blist { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.blist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; color: var(--slate); line-height: 1.55; }
.blist li b { color: var(--navy); font-weight: 700; }
.blist .ck { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* hero */
.hero { background: var(--g-blue); padding: 86px 0 92px; overflow: hidden; }
@media (max-width: 720px) { .hero { padding: 56px 0 64px; } }
.hero__grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 52px; align-items: center; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }
.hero__grid > * { min-width: 0; }
.hero .plabel { margin-bottom: 24px; }
.hero h1 { max-width: 14ch; }
.hero h1 .u { color: var(--green); }
.hero__sub { margin-top: 22px; }
.hero__cta { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }

.statstrip { margin-top: 50px; }
.scards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1140px) { .scards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .scards { grid-template-columns: 1fr; } }
.scard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); }
.scard__n { font-size: 23px; font-weight: 800; color: var(--navy); letter-spacing: -0.025em; line-height: 1.18; }
.scard__l { font-size: 12.5px; color: var(--slate); display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.scard__l .d { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* partner account mock */
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f4f9; min-width: 0; }
.mrow:last-child { border-bottom: none; padding-bottom: 0; }
.mrow__k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-light); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__v { font-family: var(--mono); font-size: 13.5px; color: var(--navy); font-weight: 600; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow__v.in { font-weight: 400; color: var(--slate); }
.mrow > div:first-child { min-width: 0; flex: 1; }
.mbtn { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--navy); background: #fff; white-space: nowrap; }
.mbtn--g { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.mtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; }
.mtabs span { font-size: 12.5px; font-weight: 600; color: var(--slate-light); padding: 6px 12px 9px; white-space: nowrap; }
.mtabs span.on { color: var(--navy); border-bottom: 2px solid var(--green); margin-bottom: -1px; }

/* flow */
.flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: nowrap; margin-top: 8px; position: relative; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: var(--line-strong); }
.flownode { position: relative; background: #fff; border: 1px solid var(--line-strong); border-radius: 15px; padding: 21px 20px 22px; flex: 1 1 0; min-width: 0; box-shadow: 0 8px 24px -14px rgba(20,36,63,0.24); display: flex; flex-direction: column; justify-content: flex-start; }
.flownode__n { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--green-ink); line-height: 1.5; }
.flownode__t { font-weight: 800; color: var(--navy); font-size: 17px; line-height: 1.3; margin-top: 11px; letter-spacing: -0.015em; min-height: 22px; }
.flownode__s { font-size: 12.5px; color: var(--slate); margin-top: 7px; line-height: 1.5; }
@media (max-width: 1040px) and (min-width: 901px) { .flownode__t { min-height: 44px; } }
@media (max-width: 900px) {
  .flow { flex-direction: column; align-items: stretch; gap: 12px; }
  .flow::before { display: none; }
  .flownode { width: 100%; }
  .flownode__t { min-height: 0; }
}
.flownote { text-align: center; margin: 30px auto 0; color: var(--slate); font-size: 15px; max-width: 64ch; }
.flownote b { color: var(--navy); font-weight: 700; }

/* tables */
.mtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mtbl th { text-align: left; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-light); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mtbl td { padding: 10px 12px; border-bottom: 1px solid #f1f4f9; color: var(--slate); white-space: nowrap; }
.mtbl tr:last-child td { border-bottom: none; }
.mtbl .r { text-align: right; }
.mtbl .c { text-align: center; }

.mn { font-family: var(--mono); color: var(--ink); }
.tg { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.tg--r { background: var(--red-fill); color: var(--red); }
.tg--b { background: var(--blue-fill); color: var(--blue-dark); }
.tg--a { background: var(--amber-fill); color: var(--amber-ink); }
.tg--g { background: var(--green-fill); color: var(--green-ink); }
.warn { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; flex: 0 0 auto; }

/* section heads, feature cards */
.fhead { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.fhead .plabel { margin-bottom: 18px; }
.fhead .lede { margin: 14px auto 0; max-width: 56ch; }
.fgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .fgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }
.fgrid.two { grid-template-columns: repeat(2,1fr); }
@media (max-width: 600px) { .fgrid.two { grid-template-columns: 1fr; } }
.fc { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 26px 24px 22px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); display: flex; flex-direction: column; min-width: 0; }
.fc__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; background: var(--blue-fill); }
.fc.g .fc__ic { background: var(--green-fill); }
.fc.a .fc__ic { background: var(--amber-fill); }
.fc h3 { margin-bottom: 7px; }
.fc p { font-size: 14px; color: var(--slate); line-height: 1.55; }
.fc p + p { margin-top: 8px; }
/* align-self: flex-start gibt dem Block seine Fit-Content-Breite, und die ist
   die Max-Content-Breite: alle Marken auf einer Zeile, 310px in einem 305px
   Fenster. max-width deckelt den Block. Die Marken stehen im HTML ohne
   Leerzeichen aneinander, es gibt also keine Umbruchstelle - deshalb
   zusaetzlich flex-wrap, wie es die Variante unter #stellschrauben schon hat. */
.fc__tag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; align-self: flex-start; max-width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue-dark); }
.fc__tag span { background: var(--blue-fill); padding: 4px 11px; border-radius: 999px; }
.fc.g .fc__tag span { background: var(--green-fill); color: var(--green-ink); }
.fc.a .fc__tag span { background: var(--amber-fill); color: var(--amber-ink); }
.codebox { font-family: var(--mono); font-size: 12.5px; color: var(--navy); background: #f6f8fc; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; margin: 12px 0 4px; overflow-wrap: anywhere; }
.codebox b { color: var(--green-ink); }
.fc > .codebox:last-child { margin-top: auto; margin-bottom: 0; }
.fc p:has(+ .codebox) { margin-bottom: 12px; }

/* two cases */

.case__k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--slate-light); }
.case__k .d { width: 8px; height: 8px; border-radius: 50%; }

/* config mock */
.cfg { display: flex; flex-direction: column; gap: 10px; }
.cfg__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: #f6f8fc; border: 1px solid var(--line); border-radius: 11px; font-size: 13.5px; }
.cfg__row span:first-child { color: var(--slate); }
.cfg__row b { color: var(--navy); font-weight: 700; white-space: nowrap; }
.cfg__hd { font-size: 12.5px; font-weight: 700; color: var(--navy); margin: 6px 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.chain span { font-size: 11.5px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px; }
.chain i { color: var(--slate-light); font-style: normal; font-size: 12px; }
.chain span.hi { background: var(--green-fill); border-color: var(--green-line); color: var(--green-ink); }

/* vergütung */

.payc__mock { margin-top: auto; background: #f6f8fc; border: 1px solid var(--line); border-radius: 12px; padding: 14px; overflow-x: auto; }
.payc__mock .mtbl td, .payc__mock .mtbl th { padding: 8px 10px; }
.payc__mock .mtbl tr:last-child td { border-bottom: none; }

.paynote { text-align: center; margin: 22px auto 0; font-size: 14.5px; color: var(--slate); max-width: 62ch; }
.paynote b { color: var(--navy); }
.acct { margin-top: 44px; }

/* privacy */
.privacy { background: linear-gradient(150deg, #223353 0%, var(--navy) 58%, #101b30 100%); border-radius: 22px; padding: 56px 48px; box-shadow: 0 44px 96px -44px rgba(15,28,51,0.55); }
@media (max-width: 720px) { .privacy { padding: 42px 24px; } }
.privacy__hd { text-align: center; max-width: 620px; margin: 0 auto 38px; }
.privacy__hd .plabel { margin-bottom: 18px; }
.privacy__hd h2 { color: #fff; margin-bottom: 14px; }
.privacy__hd p { color: #aebfd6; font-size: 16px; }
.pcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 720px) { .pcards { grid-template-columns: 1fr; } }
.pcard { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 15px; padding: 26px 24px; }
.pcard__ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.pcard h3 { color: #fff; margin-bottom: 8px; }
.pcard p { color: #aebfd6; font-size: 14px; line-height: 1.55; }

/* pricing */

/* faq */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 13px; margin-bottom: 12px; box-shadow: 0 3px 12px -8px rgba(20,36,63,0.1); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 52px 20px 22px; font-weight: 700; font-size: 16px; color: var(--navy); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(calc(-50% - 2.5px)); color: var(--green); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 22px 22px; color: var(--slate); font-size: 15px; line-height: 1.62; }

.cta { background: linear-gradient(150deg, #223353 0%, var(--navy) 60%, #101b30 100%); color: #dbe4f2; text-align: center; padding: 108px 0; }
@media (max-width: 720px) { .cta { padding: 70px 0; } }
.cta h2 { color: #fff; max-width: 22ch; margin: 0 auto; }
.cta .lede { color: #aebfd6; margin: 18px auto 0; max-width: 48ch; }
.cta__b { display: flex; gap: 13px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

.footer { background: #fff; border-top: 1px solid var(--line); padding: 46px 0 40px; }
.footer__top { display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--slate); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 13.5px; color: var(--slate-light); }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__by { padding-top: 20px; font-size: 13.5px; color: var(--slate); }
.footer__by a { color: var(--blue-dark); font-weight: 600; }
.footer a:hover { color: var(--navy); }
.dvimg { display: block; width: 173px; height: 44px; }

.spark { width: 100%; height: auto; display: block; }
.chartleg { display: flex; gap: 12px; }
.chartleg .cl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--slate); }
.chartleg .cl i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dash__hd { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

@media (max-width: 520px) {
  .hide-s { display: none; }
  .mtbl { font-size: 11px; }
  .mtbl th { padding: 7px 5px; font-size: 9px; letter-spacing: 0.03em; }
  .mtbl td { padding: 8px 5px; }
  
  .mrow__v.wr { white-space: normal; text-overflow: clip; }
  
  .mtabs { flex-wrap: wrap; overflow-x: visible; }
  .mtabs span { padding: 6px 9px 8px; }
  .mrow { flex-wrap: wrap; }
  .mrow > div:first-child { flex: 1 1 100%; }
  .mrow .mbtn { margin-left: auto; margin-top: 9px; }
}

/* zwei Welten, in beiden Bloecken gleich markiert */

.band--split { background: #f6f8fb; border-top: 1px solid var(--line); }

#stellschrauben .fc__tag { display: flex; flex-wrap: wrap; gap: 6px; align-self: stretch; padding-top: 16px; }
#stellschrauben .fc__tag span { background: var(--blue-fill); color: var(--blue-dark); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
#stellschrauben .fc__tag span { font-size: 10.5px; padding: 4px 10px; }
/* Die Marken tragen white-space: nowrap. Bei 320px ist "Minimum turnover"
   damit 4px breiter als die Kachel und schob die englische Startseite ueber
   den Rand. Dort duerfen sie in sich umbrechen; bei 360px passt alles. */
@media (max-width: 359px) { #stellschrauben .fc__tag span { white-space: normal; } }

.subhead { text-align: center; max-width: 620px; margin: 74px auto 0; }
.subhead .plabel { margin-bottom: 14px; }
.subhead h3 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.16; }
.subhead .lede { margin: 12px auto 0; font-size: 16px; max-width: 52ch; }

@media (max-width: 820px) { .subhead { margin-top: 52px; } .subhead h3 { font-size: 25px; } }

/* Hero: die Kette */
.chain-hero {display:flex;flex-direction:column}
.chstep {background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px;display:flex;gap:13px;align-items:center;box-shadow:0 10px 28px -18px rgba(20,36,63,.34)}
.chstep i {width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:11.5px}
.chstep b {display:block;font-size:15px;color:var(--navy)}
.chstep span {display:block;font-size:13px;color:var(--slate);margin-top:2px}
.chamt {margin-left:auto;font-family:var(--mono);font-weight:700;white-space:nowrap;font-size:15px}
.chain-hero {--chgap:10px;--chrail:#c3cede}
.chjoin {position:relative;height:26px}
.chjoin::before {content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:var(--chrail);transform:translateX(-50%)}
.chjoin::after {content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--chrail)}
.chsplit {position:relative;height:44px}
.chsplit i {position:absolute;background:var(--chrail);display:block}
.chs__stem {left:50%;top:0;width:2px;height:15px;transform:translateX(-50%)}
.chs__bar {left:calc(25% - var(--chgap) / 4);right:calc(25% - var(--chgap) / 4);top:15px;height:2px}
.chs__arm {top:15px;width:2px;height:29px;transform:translateX(-50%)}
.chs__arm--l {left:calc(25% - var(--chgap) / 4)}
.chs__arm--r {left:calc(75% + var(--chgap) / 4)}
.chs__arm::after {content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--chrail)}
.chfork {display:grid;grid-template-columns:1fr 1fr;gap:var(--chgap);position:relative}
@media(max-width:520px){
  .chsplit {height:30px}
  .chsplit .chs__bar,.chsplit .chs__arm {display:none}
  .chsplit .chs__stem {height:100%}
  .chs__stem::after {content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--chrail)}
}
.chf {border-radius:12px;padding:13px 15px;border:1px solid;background:#fff}
.chf--g {border-color:var(--green-line);background:linear-gradient(180deg,#f2faf6,#fff)}
.chf--b {border-color:#93c9ec;background:linear-gradient(180deg,#eef5fc,#fff)}
.chf b {display:block;font-size:13.5px}
.chf--g b {color:var(--green-ink)} .chf--b b {color:var(--blue-dark)}
.chf span {display:block;font-size:12.5px;color:var(--slate);margin-top:3px}
@media(max-width:520px){.chfork {grid-template-columns:1fr}}

/* Netzwerk */
.netgrid {display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:900px){.netgrid {grid-template-columns:1fr}}
.net {background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 10px 30px -18px rgba(20,36,63,.3);min-width:0}
.net__hub {background:var(--navy);color:#fff;border-radius:14px;padding:15px 18px;text-align:center;margin:0 auto;max-width:250px}
.net__hub b {display:block;font-size:16px}
.net__hub span {display:block;font-size:11.5px;color:#9fb3d4;margin-top:3px}
.net__ring {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
@media(max-width:560px){.net__ring {grid-template-columns:repeat(2,1fr)}}
.net__n {background:#f6f8fc;border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;min-width:0}
.net__n i {display:block;width:26px;height:26px;border-radius:50%;margin:0 auto 8px;color:#fff;font-style:normal;font-size:10.5px;font-weight:800;line-height:26px}
.net__n b {display:block;font-size:12.5px;color:var(--navy);overflow-wrap:anywhere}
.net__n span {display:block;font-family:var(--mono);font-size:12px;color:var(--green-ink);margin-top:3px;white-space:nowrap}
.net__n--more {border-style:dashed;background:#fff}
.net__n--more i {background:var(--line-strong);color:var(--slate)}
.net__n--more span {color:var(--slate);font-family:var(--sans)}
.net__sum {margin-top:16px;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.net__sum span {font-size:13.5px;color:var(--slate)}
.net__sum b {font-family:var(--mono);font-size:22px;color:var(--green-ink);white-space:nowrap}
/* Die englischen Beschriftungen sind laenger als die deutschen und tragen
   white-space: nowrap: "with no upper limit" braucht 105px in einer 83px
   breiten Kachel und schob /en/ bei 320px 4px ueber den Rand. Unter 360px
   duerfen sie umbrechen. */
@media (max-width: 359px) { .net__n span, .net__sum b { white-space: normal; } }
.netlist {list-style:none;margin:0;padding:0}
.netlist li {font-size:15px;color:var(--slate);line-height:1.6;position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--line)}
.netlist li:first-child {border-top:1px solid var(--line)}
.netlist li::before {content:"";position:absolute;left:2px;top:22px;width:9px;height:9px;border-radius:3px;background:var(--green)}
.netlist b {color:var(--navy);font-weight:800}

/* Navigation: nie umbrechen, nie ueberlaufen */
.nav__in {flex-wrap:nowrap}
.nav__links {gap:20px;flex-wrap:nowrap;white-space:nowrap}
.nav__links a {white-space:nowrap}
.brand {white-space:nowrap}
@media (max-width:1180px){ .nav__links {gap:15px} .nav__links a:not(.pbtn) {font-size:14px} }

.scard__n {font-size:17px;line-height:1.28}
.scard {padding:17px 18px}
.scard__l {margin-top:6px;align-items:flex-start}
.scard__l .d {margin-top:5px}

@media (max-width:620px){
  .brand {font-size:15px;min-width:0;overflow:hidden}
  .brand span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav__links .pbtn--sm {padding:8px 13px;font-size:13.5px}
}
@media (max-width:430px){ .brand span {display:none} }

.scard {min-width:0}
/* Kein nowrap mit Ellipse: die englischen Ueberschriften sind laenger als die
   deutschen und wurden mitten im Wort abgeschnitten. Stattdessen zwei Zeilen
   reserviert, dann beginnt der Fliesstext in allen Karten auf derselben Linie. */
.scard__n {font-size:17px;line-height:1.25;min-height:calc(2 * 1.25em)}
.scard__l {margin-top:7px;align-items:flex-start;line-height:1.45}
@media (max-width:1180px){ .scard__n {font-size:16px} }

/* Vollflaechige Zwei-Welten-Reihe */
.splitgrid {display:grid;grid-template-columns:1fr 1fr;position:relative;margin-top:40px}
.sh {padding:54px 0 54px;min-width:0}
.sh--g {background:linear-gradient(180deg,#edf7f2 0%,#f8fcfa 100%)}
.sh--b {background:linear-gradient(180deg,#e9f2fb 0%,#f7fbff 100%)}
.shin {max-width:calc(var(--wrap) / 2);padding:0 30px 0 24px;margin-left:auto;min-width:0}
.sh--b .shin {margin-left:0;margin-right:auto;padding:0 24px 0 30px}
.sh h3 {font-size:23px;font-weight:800;letter-spacing:-.02em;margin:10px 0 10px}
.sh--g h3 {color:var(--green-ink)} .sh--b h3 {color:var(--blue-dark)}
.sh > .shin > p {font-size:15px;color:var(--slate);line-height:1.6;margin-bottom:20px}
.sh .payc__mock {background:rgba(255,255,255,.78);border:1px solid rgba(20,36,63,.09);border-radius:12px;padding:14px;overflow-x:auto}
.shlist {list-style:none;margin:20px 0 0;padding:0}
.shlist li {position:relative;padding:11px 0 11px 22px;font-size:14.5px;color:var(--slate);line-height:1.55;border-bottom:1px solid rgba(20,36,63,.08)}
.shlist li:last-child {border-bottom:0}
.shlist li::before {content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%}
.sh--g .shlist li::before {background:var(--green)} .sh--b .shlist li::before {background:var(--blue)}
@media (max-width:900px){
  .splitgrid {grid-template-columns:1fr}
  .shin,.sh--b .shin {max-width:none;margin:0;padding:0 24px}
  .sh {padding:34px 0 38px}
}

/* beide Haelften starten auf gleicher Hoehe */
.sh > .shin > p {min-height:4.8em}
.sh .payc__mock {min-height:300px;display:flex;flex-direction:column;justify-content:flex-start}
@media (max-width:900px){ .sh > .shin > p {min-height:0} .sh .payc__mock {min-height:0} }

/* Mockups in der Split-Reihe: gleicher Aufbau links wie rechts */
.sh .payc__mock {padding:0;overflow:hidden}
.mkhd {display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:13px 15px;border-bottom:1px solid rgba(20,36,63,.09)}
.mkhd span {font-size:13px;font-weight:800;color:var(--navy)}
.mkhd em {font-style:normal;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-light)}
.sh .payc__mock .chain {margin:14px 15px 4px}
.sh .payc__mock .mtbl {margin-top:10px}
.sh .payc__mock .mtbl th {padding:8px 15px;border-bottom:1px solid rgba(20,36,63,.09)}
.sh .payc__mock .mtbl td {padding:10px 15px;border-bottom:1px solid rgba(20,36,63,.06)}
.sh .payc__mock .mtbl tr:last-child td {border-bottom:0}
.sh--g .chain span.hi {background:var(--green-fill);border-color:var(--green-line);color:var(--green-ink)}
.sh--b .chain span.hi {background:var(--blue-fill);border-color:#93c9ec;color:var(--blue-dark)}

.sh .payc__mock .chain {flex-wrap:wrap;gap:6px}
.sh .payc__mock .chain .all {margin-left:auto;background:#f6f8fc}
@media (max-width:1080px){ .sh .payc__mock .chain .all {margin-left:0} }

/* Gegenueberstellung mit Mittelachse */
.vgl {display:grid;grid-template-columns:1fr 178px 1fr;align-items:stretch;grid-auto-flow:row dense}
.vgl__hd {padding:0 30px 22px}
.vgl__hd--g {grid-column:1;text-align:center;border-bottom:3px solid var(--green)}
.vgl__hd--sp {grid-column:2;border-bottom:3px solid var(--line)}
.vgl__hd--b {grid-column:3;text-align:center;border-bottom:3px solid var(--blue)}
.vgl__k {display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700}
.vgl__hd--g .vgl__k {color:var(--green-ink)}
.vgl__hd--b .vgl__k {color:var(--blue-dark)}
.vgl__k .d {width:8px;height:8px;border-radius:50%}
.vgl__hd h3 {font-size:25px;font-weight:800;letter-spacing:-.022em;margin:9px 0 11px}
.vgl__hd--g h3 {color:var(--green-ink)} .vgl__hd--b h3 {color:var(--blue-dark)}
.vgl__hd p {font-size:14.5px;color:var(--slate);line-height:1.58;max-width:44ch;margin:0 auto}
.vgl__mn {display:none}
.vgl__l,.vgl__m,.vgl__r {padding:15px 30px;font-size:14.5px;border-bottom:1px solid #eef1f6;
  display:flex;align-items:center}
.vgl__l {grid-column:1;justify-content:flex-end;text-align:right;color:var(--navy);font-weight:600;
  background:rgba(233,246,239,.5)}
.vgl__m {grid-column:2;justify-content:center;text-align:center;color:var(--slate-light);font-size:13px;
  font-weight:600;padding:15px 12px;background:#fbfcfe}
.vgl__r {grid-column:3;color:var(--navy);font-weight:600;background:rgba(232,241,252,.5)}
.vgl > div:nth-last-child(-n+3) {border-bottom:0}
@media (max-width:880px){
  .vgl {grid-template-columns:1fr 1fr;column-gap:10px}
  .vgl__hd {padding:0 0 18px}
  .vgl__hd--g,.vgl__hd--b {border-bottom:0}
  .vgl__hd--g {grid-column:1 / -1}
  .vgl__hd--g,.vgl__hd--b {text-align:left}
  .vgl__hd p {max-width:none;margin:0}
  .vgl__hd--sp {display:none}
  .vgl__hd--b {grid-column:1 / -1;margin-top:26px}
  .vgl__mn {display:flex;align-items:flex-end;font-size:12px;font-weight:800;line-height:1.3;
    padding:20px 12px 8px}
  .vgl__mn--g {grid-column:1;color:var(--green-ink);border-bottom:2px solid var(--green)}
  .vgl__mn--b {grid-column:2;color:var(--blue-dark);border-bottom:2px solid var(--blue)}
  .vgl__m {grid-column:1 / -1;justify-content:flex-start;text-align:left;padding:18px 0 6px;
    border-bottom:0;background:none;color:var(--slate-light);font-size:12.5px}
  .vgl__l,.vgl__r {padding:11px 12px;align-items:flex-start;font-size:14px;border-bottom:0;border-radius:8px}
  .vgl__l {grid-column:1;justify-content:flex-start;text-align:left}
  .vgl__r {grid-column:2}
}

/* Vollbreiten-Flaeche hinter der Gegenueberstellung */
.vglband {background:#f6f8fb;padding:52px 0 50px;margin-top:6px}
@media (max-width:720px){ .vglband {padding:30px 0 30px} }
.vglband .vgl__l {background:#eaf6f0}
.vglband .vgl__r {background:#e7f1fc}
.vglband .vgl__m {background:transparent}
.vglband .vgl__l,.vglband .vgl__r,.vglband .vgl__m {border-bottom-color:rgba(20,36,63,.07)}

/* Anmeldung: zwei Wege nebeneinander, Bedingungen darunter fuer beide */
.zwei {display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;min-width:0}
.zwei__s {display:flex;flex-direction:column;min-width:0}
.zwei .browser {box-shadow:0 18px 44px -26px rgba(20,36,63,.4)}
.zwei .mrow__v.wr {white-space:normal;overflow:visible}
.zwei__c {margin-top:auto;padding-top:16px}
.zwei__c b {display:block;font-size:14px;color:var(--navy);font-weight:800}
.zwei__c span {display:block;font-size:12.5px;color:var(--slate);line-height:1.5;margin-top:3px}
.zwei .mrow:last-child {justify-content:flex-end}
.mbtn--b {background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
@media (max-width:900px){ .zwei {grid-template-columns:1fr;gap:26px} .zwei__c {margin-top:14px} }
.ilink {color:var(--blue-dark);border-bottom:1px solid rgba(15,92,150,.35);padding-bottom:1px}
.ilink:hover {border-bottom-color:var(--blue-dark)}

/* Ansatzpunkte fuer eigene Provisionssaetze */
.anker {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.ank {background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px 18px;min-width:0;
  box-shadow:0 4px 16px -10px rgba(20,36,63,.14);display:flex;flex-direction:column}
.ank__k {font-size:12.5px;font-weight:700;color:var(--slate-light);line-height:1.35;min-height:34px;text-transform:uppercase;letter-spacing:.06em}
.ank__v {font-size:26px;font-weight:800;color:var(--blue-dark);letter-spacing:-.02em;line-height:1.1;margin:2px 0 8px}
.ank__s {font-size:13px;color:var(--slate);line-height:1.5}
@media (max-width:900px){ .anker {grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .anker {grid-template-columns:1fr} .ank__k {min-height:0} }

/* Kennzahlen im Partnerkonto */
.kpis {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 16px}
.kpi {background:#f6f8fc;border:1px solid var(--line);border-radius:9px;padding:8px 10px;min-width:0}
.kpi span {display:block;font-size:9px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  color:var(--slate-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b {display:block;font-family:var(--mono);font-size:13px;color:var(--navy);margin-top:2px;white-space:nowrap}
.kpi b.g {color:var(--green-ink)}
@media (max-width:560px){ .kpis {grid-template-columns:1fr 1fr} }

/* Admin-Mockup mit Navigation */
.adm__split {display:grid;grid-template-columns:136px 1fr;min-height:0}
.adm__rail {background:var(--navy);padding:12px 0;display:flex;flex-direction:column;gap:1px}
.adm__rail span {font-size:11px;color:#9fb3d4;padding:6px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm__rail .grp {color:#fff;font-weight:700;font-size:11.5px;margin-bottom:4px}
.adm__rail .sub {padding-left:20px;font-size:11px;padding-right:8px;color:#c3d2e8}
.adm__rail .sub.on {color:#fff;font-weight:700;background:rgba(255,255,255,.09)}
.adm__rail .sub2 {padding-left:34px;padding-right:8px;font-size:10px;color:#8ba1c2}
.adm__main {padding:14px 16px 18px;min-width:0}
.adm__main {overflow-x:auto;overflow-y:hidden}
.mtbl--l {font-size:13.5px}
.mtbl--l th {font-size:10px;padding:10px 6px}
.mtbl--l td {padding:12px 6px}
@media (max-width:700px){ .adm__split {grid-template-columns:1fr} .adm__rail {flex-direction:row;flex-wrap:wrap;padding:8px 6px} .adm__rail .sub2 {display:none} .adm__rail span {padding:5px 9px} .adm__rail .sub {padding-left:9px} }

.tg .warn {width:8px;height:8px;margin-right:6px;vertical-align:0}
.warn--a {margin-right:0;margin-left:6px}

/* Partnerliste: Spalten gleichmaessig verteilen */
.mtbl--pl {table-layout:fixed}
.mtbl--pl th:nth-child(1),.mtbl--pl td:nth-child(1) {width:36%}
.mtbl--pl th:nth-child(2),.mtbl--pl td:nth-child(2) {width:15%}
.mtbl--pl th:nth-child(3),.mtbl--pl td:nth-child(3) {width:25%}
.mtbl--pl th:nth-child(4),.mtbl--pl td:nth-child(4) {width:24%}

/* Datenschutz als randloses helles Band */
.privband {padding:74px 0}
@media (max-width:720px){ .privband {padding:54px 0} }
.privband .privacy {background:none;border-radius:0;padding:0;box-shadow:none}
.privband .privacy__hd h2 {color:var(--navy)}
.privband .privacy__hd p {color:var(--slate)}
.privband .plabel--dark {background:#fff;border-color:var(--line);color:var(--navy);
  box-shadow:0 2px 10px -6px rgba(20,36,63,.3)}
.privband .pcard {background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px -14px rgba(20,36,63,.24)}
.privband .pcard__ic {background:var(--green-fill)}
.privband .pcard h3 {color:var(--navy)}
.privband .pcard p {color:var(--slate)}

/* MLM: Baum mit Ebenen-Legende */
.treewrap {background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 18px 16px;
  box-shadow:0 14px 40px -28px rgba(20,36,63,.4)}
.tree__g {display:grid;grid-template-columns:1fr 168px;gap:16px}
.tree {width:100%;height:auto;display:block}
.tree__leg {position:relative}
.tree__leg > div {position:absolute;left:0;right:0;transform:translateY(-50%);
  display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:8px}
.tree__leg b {font-size:12.5px;font-weight:800;color:var(--navy)}
.tree__leg em {font-style:normal;font-size:12.5px;font-weight:800;color:var(--blue-dark);text-align:right}
.tree__leg span {grid-column:1 / -1;font-size:10.5px;color:var(--slate-light);margin-top:2px}
.tree__leg > div + div::before {content:"";position:absolute;left:0;right:0;top:-16px;height:1px;background:var(--line)}
.tree__note {font-size:11px;color:var(--slate-light);margin-top:10px;text-align:center}
@media (max-width:620px){
  .tree__g {grid-template-columns:1fr;gap:18px}
  .tree__leg > div {position:static;transform:none;padding:9px 0;border-top:1px solid var(--line)}
  .tree__leg > div:first-child {border-top:0}
  .tree__leg > div + div::before {display:none}
}

/* ============ Preise ============ */
.prc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .prc { grid-template-columns: 1fr; } }
.prc__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.12); }
.prc__card--lead { border-color: var(--navy); box-shadow: 0 14px 34px -16px rgba(22,36,63,0.3); }
.prc__n { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.prc__p { font-size: 38px; font-weight: 800; color: var(--navy); letter-spacing: -0.025em; margin: 12px 0 4px; }
.prc__p small { font-size: 14px; font-weight: 500; color: var(--slate-light); margin-left: 7px; }
.prc__alt { font-size: 13.5px; color: var(--slate); }
.prc__list { list-style: none; margin: 20px 0 26px; display: flex; flex-direction: column; gap: 10px; }
.prc__list li { font-size: 14px; color: var(--slate); padding-left: 24px; position: relative; line-height: 1.5; }
.prc__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 8px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.prc__card .pbtn { margin-top: auto; align-self: flex-start; }
.prc__note { text-align: center; font-size: 13px; color: var(--slate-light); margin: 26px auto 0; max-width: 60ch; }

/* Farbpunkt im Sektionslabel, ersetzt Inline-Stile */
.plabel .d--green { background: var(--green); }
.plabel .d--navy { background: var(--navy); }
.plabel .d--blue { background: var(--blue); }

/* ============ Seitenverlauf (Unterseiten) ============ */
.crumb { padding: 96px 0 0; font-size: 13.5px; color: var(--slate-light); }
.crumb .wrap { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.crumb a:hover { color: var(--navy); }
.crumb__sep { color: var(--line-strong); }
.crumb__here { color: var(--navy); font-weight: 600; }


/* ============ Rechtstexte, 404 ============ */
.sect { padding: 96px 0 40px; }
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.12; margin-bottom: 18px; letter-spacing: -0.025em; color: var(--navy); }
.legal h2 { font-size: 20px; margin: 34px 0 10px; color: var(--navy); }
.legal h3 { font-size: 16px; margin: 24px 0 6px; color: var(--navy); }
.legal h4 { font-size: 14px; font-weight: 600; margin: 16px 0 4px; color: var(--navy); }
.legal p { color: var(--slate); margin-bottom: 12px; font-size: 15px; line-height: 1.65; }
.legal ul { margin: 0 0 12px 20px; color: var(--slate); font-size: 15px; line-height: 1.65; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--blue-dark); word-break: break-word; }
.legal h1, .legal h2, .legal h3 { overflow-wrap: anywhere; }
.legal__src { font-size: 12.5px; color: var(--slate-light); margin-top: 24px; }
.legal__back { margin-top: 34px; font-weight: 700; }
body.short { min-height: 100vh; display: flex; flex-direction: column; }
body.short main { flex: 1 0 auto; }
body.short .footer { flex-shrink: 0; }


/* uebernommen aus website-shop-bundles: Belege, Sprachschalter, Handbuch-Verweise */
/* Sprachschalter in der Fusszeile */
.footer__lang { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 4px 12px 4px 10px; }
.footer__lang svg { opacity: .7; flex: 0 0 auto; }
.footer__lang:hover { border-color: rgba(255,255,255,0.45); }
/* ---- Belege aus dem Shopware Store (Bewertung, Shops, Auszeichnungen) ----
   Bewusst eine umbrechende Liste: als Fliesstext brach die Zeile mitten in
   "Gold zertifiziert". Jeder Eintrag ist unteilbar und wandert als Ganzes in
   die naechste Zeile. Trennpunkte gibt es keine - die wuerden beim Umbruch am
   Zeilenanfang stehen. */
.belege { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 20px;
          margin: 20px 0 0; padding: 0; list-style: none;
          font-size: 14px; color: var(--slate); }
.belege__i { white-space: nowrap; }
.belege__i b { color: var(--navy); font-weight: 700; }
.belege__i--aus { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
                  background: #fff; font-size: 13px; font-weight: 600; color: var(--navy); }
.belege__st { display: inline-flex; gap: 1px; vertical-align: -2px; margin-right: 5px; }
.belege__st svg { fill: #e6a700; }
/* ---- Verweise von den Beispielseiten ins Handbuch ----
   Gleiche Mechanik wie .belege: umbrechende Liste, unteilbare Eintraege. */
.hbv { padding: 0 0 8px; }
.hbv__l { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
          text-transform: uppercase; color: var(--slate); }
.hbv__ls { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.hbv__a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
          background: #fff; font-size: 14px; font-weight: 600; color: var(--navy);
          white-space: nowrap; text-decoration: none; }
.hbv__a:hover { border-color: var(--navy); }


/* uebernommen aus website-shop-bundles: Rechnungsblock, Positionstabelle,
   Fallgegenueberstellung - Bausteine der Szenario-Seiten */
.erp { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); }
.erp__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line-strong); }
.erp__hd b { font-size: 15px; color: var(--navy); letter-spacing: -0.015em; }
.erp__hd span { font-size: 12.5px; color: var(--slate-light); }
.erp__c1 { width: 30%; }
.erp .mtbl--g code { font-family: var(--mono); font-size: 11.5px; color: var(--slate); letter-spacing: -0.02em; }
.erp__b { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; }
.erp__r--dc th, .erp__r--dc td, .erp__r--dc .erp__b { color: var(--red); }
.erp .mtbl--g .erp__r--dc code { color: var(--red); }
.erp__note { padding: 14px 18px 16px; font-size: 13.5px; color: var(--slate); line-height: 1.6; border-top: 1px solid var(--line); }
.erp__note b { color: var(--navy); font-weight: 700; }
.erp__note code { font-family: var(--mono); font-size: 12px; }
.erp--klein .erp__hd { padding: 13px 16px; }
.erp__z { display: flex; flex-direction: column; gap: 5px; padding: 13px 16px; border-bottom: 1px solid #f2f5f9; }
.erp__l { font-size: 11.5px; color: var(--slate); }
.erp__z code { font-family: var(--mono); font-size: 12.5px; color: var(--navy); background: #f4f6f9; border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; overflow-wrap: anywhere; }
/* Durchgerechnete Beispiele auf den Szenario-Seiten */
.rechnung { border-top: 1px solid var(--line-strong); }
.rechnung__z { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 18px; font-size: 14px; color: var(--slate); border-bottom: 1px solid #f2f5f9; }
.rechnung__z b { color: var(--navy); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.rechnung__z--ab, .rechnung__z--ab b { color: var(--red); }
.rechnung__z--sum { background: #fbfdfc; border-bottom: none; }
.rechnung__z--sum span { color: var(--navy); font-weight: 700; }
.rechnung__z--sum b { font-size: 19px; letter-spacing: -0.02em; }
.rechnung__z--warn { background: var(--amber-fill); border-bottom: none; }
.rechnung__z--warn, .rechnung__z--warn b { color: var(--amber-ink); }
/* Gegenueberstellung zweier Rechnungen */
.ggue { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 26px; }
.ggue__s { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); }
.ggue__s--on { border-color: var(--green-line); }
.ggue__k { display: block; padding: 13px 18px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-light); }
.ggue__s--on .ggue__k { color: var(--green-ink); }
.ggue__pfeil { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--slate-light); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
/* Die Falle: Rechnung plus Erklaerung */
.fall { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: center; }
.fall > * { min-width: 0; }
.fall__s { background: #fff; border: 1px solid var(--amber-fill); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); }
.fall__k { display: block; padding: 13px 18px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--amber-ink); }
.fall__t p { font-size: 15.5px; color: var(--slate); line-height: 1.62; }
.fall__t p + p { margin-top: 14px; }
.fall__t b { color: var(--navy); font-weight: 700; }


/* uebernommen aus website-shop-bundles: Kopf der Unterseiten und Verweiskarten.
   Steht bewusst NACH dem alten .crumb-Block, der eine andere Verschachtelung
   erwartet (.crumb .wrap) und bei dieser Seitenstruktur nie greift. */
.crumb { font-size: 13px; color: var(--slate); }
.crumb a { color: var(--blue-dark); font-weight: 600; }
.crumb a:hover { color: var(--navy); }
.crumb__sep { color: var(--line-strong); }
.crumb__here { color: var(--navy); font-weight: 600; }
header.sub h1 { font-size: clamp(30px, 3.6vw, 42px); margin-top: 14px; }
header.sub .lede { margin-top: 18px; max-width: 62ch; }
.crumb__sep { margin: 0 8px; color: var(--slate-light); }
.crumb__here { color: var(--slate-light); }
.mehr { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--blue-dark); }
.mehr:hover { color: var(--navy); }
.mehr--end { display: block; margin-top: 32px; text-align: center; }
.fc--link:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 14px 34px -22px rgba(20,36,63,0.42); }
.fc__ex { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: 9px; display: block; }
.fc__go { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--blue-dark); }
.fc--link:hover .fc__go { color: var(--navy); }
header.sub { background: var(--g-blue); padding: 54px 0 44px; }
.fc--link { text-decoration: none; transition: border-color .15s, transform .12s, box-shadow .15s; }


/* uebernommen aus website-shop-bundles: Einordnungstabelle mit Gruppen,
   Zustandssymbolen und eigener Spalte */
.mtbl__co { background: #f2f9f5; }
.mtbl--g thead th.mtbl__oh { color: var(--green-ink); }
.mtbl--g .mtbl__g > th { padding: 9px 16px; font-size: 10.5px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--navy); background: #eef2f8; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.mtbl--g tbody:first-of-type .mtbl__g > th { border-top: none; }
/* Zustand: das Symbol traegt die Farbe, der Text bleibt ruhig */
.st { display: inline-flex; align-items: flex-start; gap: 7px; color: var(--slate); line-height: 1.45; }
.st__i { flex: 0 0 auto; margin-top: 2px; }
.st--y { color: var(--slate); }
.st--p { color: var(--slate); }
.st--n { color: var(--slate-light); }
.vc--own .st { color: var(--navy); font-weight: 600; }
.vlegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0 0 20px; font-size: 12.5px; }
.vlegend .st { color: var(--slate-light); }
.mtbl--g .mtbl__g > th { padding: 8px 8px; font-size: 9.5px; letter-spacing: 0.05em; }
.st { gap: 5px; }
/* Hero-Darstellung: Paket aus drei Artikeln */



/* Vergleichstabelle: waagerecht scrollbar statt Seitenüberlauf */
.tblwrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 10px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); }
.tblwrap--flush { padding: 0; }


/* uebernommen aus website-shop-bundles: Handbuch-Bausteine, Zustand "ohne Wertung",
   Nummern in Karten und die fehlenden Modifier. Beim ersten Portieren vergessen -
   die zwoelf Handbuchseiten waren dadurch live ohne jede Gestaltung. */
.st--i { color: var(--slate); }
.kbr .fc__nr { color: var(--blue); font-variant-numeric: tabular-nums; }
/* ============ Bundle-Seite: eigene Bausteine ============ */
.band--sm { padding: 44px 0; }
.blist--tight { margin-top: 20px; gap: 12px; }
.blist--tight li { font-size: 14.5px; }
/* ---- Handbuch: Referenzseiten unter /handbuch und /en/manual ---- */
.hb { max-width: 860px; margin: 0 auto; }
.hb h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.12; margin-bottom: 18px; }
.hb .lede { font-size: 17px; color: var(--slate); margin-bottom: 14px; }
.hb__wo { font-size: 14.5px; color: var(--slate); background: var(--blue-fill); border-radius: 10px; padding: 14px 16px; margin-bottom: 36px; }
.hb__toc { border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 8px; margin-bottom: 48px; background: var(--card); }
.hb__toc { overflow-x: auto; }
.hb__toch { font-size: 17px; margin: 0 0 14px; }
/* Die Tabelle war auf einem 320px-Telefon 528px breit. body traegt
   overflow-x: hidden, der Ueberhang wurde also abgeschnitten und war nicht
   erreichbar - rund 200px Inhalt. Sie rollt jetzt in ihrem eigenen
   Behaelter. Ohne min-width, damit sie schrumpft, wo sie kann. */
.tab__wrap { overflow-x: auto; }
.hb__tab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hb__tab th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-light); font-weight: 700; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.hb__tab td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); color: var(--slate); vertical-align: top; }
.hb__tab tr:last-child td { border-bottom: 0; }
.hb__tab a { color: var(--blue-dark); font-weight: 600; }
.hb__tab a:hover { color: var(--navy); }
.hb__karte { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark); margin: 52px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.hb__karte.faq__h { max-width: 760px; margin-left: auto; margin-right: auto; }
/* jeder Block steht fuer sich: eigener Anker, eigene Antwort, zitierbar */
.hb__e { border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; scroll-margin-top: 90px; }
.hb__eh { font-size: 18px; margin: 0 0 10px; line-height: 1.35; }
.hb__was { font-size: 15.5px; color: var(--ink); margin: 0 0 16px;  max-width: 66ch; }
.hb__mehr { font-size: 14.5px; color: var(--slate); margin: 12px 0 0; }
.hb__sub { font-size: 13px; font-weight: 700; color: var(--navy); margin: 16px 0 6px; }
.hb__opt { margin: 0 0 0 18px; padding: 0; font-size: 14.5px; color: var(--slate); }
.hb__opt li { margin-bottom: 6px; }
.hb__opt b { color: var(--navy); }
/* 1fr heisst minmax(auto, 1fr), und auto ist die Min-Content-Breite. Ein
   Standardwert wie %s%s%d%d... hat keine Umbruchstelle und ist 319px breit -
   die Spalte wuchs auf 319px in einem 267px-Behaelter und schob die Seite auf
   dem Telefon 68px ueber den Rand. minmax(0, 1fr) deckelt die Spalte, der
   Umbruch bricht den Wert. */
.hb__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0; padding: 14px 16px; background: #f7f9fc; border-radius: 10px; font-size: 13.5px; }
.hb__meta dt { color: var(--slate-light); font-weight: 600; }
.hb__meta dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.hb__meta code { font-family: var(--mono); font-size: 12.5px; color: var(--blue-dark); overflow-wrap: anywhere; }
/* Protokollzeilen im Handbuch sind lange Ketten ohne Leerzeichen und schoben
   /handbuch/rechenweg 16px ueber den Rand. Gleiche Behandlung wie .codebox. */
.hb__was code, .hb__e dd code, .hb__e p code { overflow-wrap: anywhere; }
.hb__quelle { font-size: 12.5px; color: var(--slate-light); margin-top: 34px; }
@media (max-width: 620px) {
  /* Tippziele auf dem Telefon: die Fusszeilenlinks waren 22-23px hoch bei
     unter 24px Abstand und verfehlten damit WCAG 2.5.8. Das Polster ist
     unsichtbar und vergroessert nur die Flaeche. */
  .footer__links a { display: inline-block; padding: 4px 0; }
  .footer__legal a { display: inline-block; padding: 4px 0; }
  .hb__tab { font-size: 13.5px; }
  .hb__tab th:nth-child(2), .hb__tab td:nth-child(2) { display: none; }
  .hb__e { padding: 18px 18px; }
  .hb__meta { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hb__meta dt { margin-top: 8px; }
}

/* Nachsatz unter einem Handbuch-Eintrag: eigene Klasse dieser Seite, in der
   Bundle-Fassung gibt es sie nicht. Liest sich wie hb__was, nur etwas ruhiger. */
.hb__rest { margin-top: 10px; font-size: 14px; color: var(--slate); line-height: 1.62;  max-width: 66ch; }
.hb__rest b { color: var(--navy); font-weight: 700; }

/* Das Rechenprotokoll: eine woertliche Ausgabe des Plugins. Bewusst
   monospaced, scrollbar statt umbrechend - die Einrueckung mit Strichen
   traegt die Verschachtelung und geht beim Umbrechen verloren. */
.hb__log { margin-top: 14px; padding: 16px 18px; background: #f4f6f9; border: 1px solid var(--line);
  border-radius: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--navy);
  overflow-x: auto; white-space: pre; }

/* Kapitel-Ueberschriften im Handbuch sind Links, sahen aber aus wie normale
   Ueberschriften - nichts signalisierte, dass man klicken kann. */
.hb__eh a { color: var(--blue-dark); text-decoration: none; }
.hb__eh a:hover { color: var(--navy); text-decoration: underline; }
.hb__mehr a, .legal__back a { color: var(--blue-dark); font-weight: 600; }
.hb__mehr a:hover, .legal__back a:hover { color: var(--navy); }
.hb__rest a, .lede a { color: var(--blue-dark); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(21,86,160,0.34); }
.hb__rest a:hover, .lede a:hover { color: var(--navy); text-decoration-color: currentColor; }
.hb__e:has(.hb__eh a) { transition: border-color .15s, box-shadow .15s; }
.hb__e:has(.hb__eh a):hover { border-color: var(--line-strong);
  box-shadow: 0 14px 34px -22px rgba(20,36,63,0.42); }