/* billtoro.de. Schriften liegen lokal (keine fremden Server). Die Ersatzschriften haben dieselben Maße wie Figtree
   und Bricolage Grotesque (size-adjust und Co.), damit beim Laden der Schrift nichts springt. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree Ersatz";font-weight:400;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");size-adjust:98.38%;ascent-override:96.57%;descent-override:25.41%;line-gap-override:0%}
@font-face{font-family:"Figtree Ersatz";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:93.86%;ascent-override:101.22%;descent-override:26.64%;line-gap-override:0%}
@font-face{font-family:"Figtree Ersatz";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:94.93%;ascent-override:100.08%;descent-override:26.34%;line-gap-override:0%}
@font-face{font-family:"Bricolage Ersatz";font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:102.02%;ascent-override:91.16%;descent-override:26.46%;line-gap-override:0%}

/* Marke: Signal-Orange #F26A1B (Knöpfe, Akzente), Anthrazit #1B1F27 (Schrift, dunkle Flächen), Creme #FFF6F0,
   Grün #22A45D nur für „bezahlt“. Kontrast (WCAG AA): Anthrazit auf Orange 5,4:1, Links #C2410C auf Hell ≥ 4,8:1, Marken #A8380D auf Hellorange 5,5:1,
   dunkel #FF8A47 auf Anthrazit 7,1:1. Weiß auf Orange (3,1:1) gibt es nicht. */
:root{
  --orange:#F26A1B; --orange-hover:#FF7D33; --auf-orange:#1B1F27; --anthrazit:#1B1F27; --creme:#FFF6F0;
  --bg:#FFFBF8; --band:#FFF6F0; --flaeche:#FFFFFF; --flaeche-2:#FFF0E6; --ink:#1B1F27; --muted:#575C67;
  --linie:#F0DFD3; --linie-stark:#E2CBBB; --link:#C2410C; --orange-soft:#FFE7D8; --tag-text:#A8380D; --fokus:#C2410C;
  --gruen-text:#157A42; --gruen-bg:#E2F5EA; --gruen:#22A45D;
  --schatten:0 1px 2px rgba(27,31,39,.05),0 14px 34px -16px rgba(27,31,39,.22);
  --schatten-gross:0 30px 70px -30px rgba(27,31,39,.45);
  --punkte:rgba(27,31,39,.09);
  /* das Handy zeigt die App im selben Farbschema */
  --a-bg:#F7F6F4; --a-flaeche:#FFFFFF; --a-ink:#1B1F27; --a-muted:#5B616E; --a-linie:#E5E3DF; --a-feld:#FFFFFF; --a-link:#C2410C;
  --display:"Bricolage Grotesque","Bricolage Ersatz",system-ui,sans-serif;
  --body:"Figtree","Figtree Ersatz",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121419; --band:#171A21; --flaeche:#1B1F27; --flaeche-2:#232731; --ink:#ECEEF2; --muted:#A7ADB8;
    --linie:#2B3039; --linie-stark:#3A404B; --link:#FF8A47; --orange-soft:#2E2119; --tag-text:#FF8A47; --fokus:#FF8A47;
    --gruen-text:#5FCF8F; --gruen-bg:#16352A;
    --schatten:0 1px 2px rgba(0,0,0,.3),0 16px 36px -18px rgba(0,0,0,.7);
    --schatten-gross:0 34px 80px -30px rgba(0,0,0,.85);
    --punkte:rgba(255,255,255,.07);
    --a-bg:#121419; --a-flaeche:#1B1F27; --a-ink:#ECEEF2; --a-muted:#A2A8B4; --a-linie:#2D323C; --a-feld:#16191F; --a-link:#FF8A47;
  }
}
:root[data-theme="dark"]{
  --bg:#121419; --band:#171A21; --flaeche:#1B1F27; --flaeche-2:#232731; --ink:#ECEEF2; --muted:#A7ADB8;
  --linie:#2B3039; --linie-stark:#3A404B; --link:#FF8A47; --orange-soft:#2E2119; --tag-text:#FF8A47; --fokus:#FF8A47;
  --gruen-text:#5FCF8F; --gruen-bg:#16352A;
  --schatten:0 1px 2px rgba(0,0,0,.3),0 16px 36px -18px rgba(0,0,0,.7);
  --schatten-gross:0 34px 80px -30px rgba(0,0,0,.85);
  --punkte:rgba(255,255,255,.07);
  --a-bg:#121419; --a-flaeche:#1B1F27; --a-ink:#ECEEF2; --a-muted:#A2A8B4; --a-linie:#2D323C; --a-feld:#16191F; --a-link:#FF8A47;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02}
h3{font-weight:700;font-size:1.14rem;line-height:1.3;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
svg{display:block}
ul,ol{margin:0;padding:0}
b,strong{font-weight:700}
small{font-size:.86em}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:16px}
@media (min-width:600px){.wrap{padding-inline:28px}}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:-60px;z-index:50;background:var(--anthrazit);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.sprung:focus{top:12px}
.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i.gross{width:28px;height:28px}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;border-radius:999px;padding:.8em 1.35em;font:700 1rem/1.2 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease,border-color .18s ease;white-space:nowrap}
.btn .i{width:18px;height:18px;transition:transform .18s ease}
.btn:hover .i{transform:translateX(3px)}
.btn-haupt{background:var(--orange);color:var(--auf-orange);box-shadow:0 10px 26px -12px rgba(242,106,27,.85)}
.btn-haupt:hover{background:var(--orange-hover);transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(242,106,27,.95)}
.btn-zweit{background:var(--flaeche);color:var(--ink);border-color:var(--linie-stark)}
.btn-zweit:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-dunkel{background:var(--anthrazit);color:#fff}
.btn-dunkel:hover{background:#2A303B;transform:translateY(-1px)}
.btn-rand{background:transparent;color:var(--anthrazit);border-color:var(--anthrazit)}
.btn-rand:hover{background:rgba(27,31,39,.08)}
.btn-gross{padding:1em 1.6em;font-size:1.05rem}
.btn-klein{padding:.55em 1.05em;font-size:.92rem}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

.kicker{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin-bottom:14px}
.einleitung{color:var(--muted);font-size:1.08rem;max-width:62ch;margin-top:18px}
.marke-bald{display:inline-flex;align-items:center;font:700 .7rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--link);border:1.5px dashed currentColor;border-radius:999px;padding:.35em .65em;vertical-align:middle;white-space:nowrap}

/* Vorschau-Hinweis (solange anbieter.json nicht vollständig ist) */
.vorschau{background:var(--anthrazit);color:#fff;font-size:.86rem;font-weight:600;text-align:center;padding:7px 16px;display:flex;justify-content:center;align-items:center;gap:10px}
.vorschau .punkt{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(242,106,27,.6);animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(242,106,27,.55)}70%,100%{box-shadow:0 0 0 9px rgba(242,106,27,0)}}

/* Kopf */
.kopf{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid var(--linie)}
@supports not (background:color-mix(in srgb,red 50%,blue)){.kopf{background:var(--bg)}}
.kopf-in{display:flex;align-items:center;gap:20px;min-height:64px}
.marke{display:flex;align-items:center;flex:none;border-radius:8px}
.logo{display:block;height:30px;width:auto}
.logo-bill{fill:var(--ink)}
.kopf-nav{display:none;gap:4px;margin-inline:auto}
.kopf-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;transition:background-color .15s}
.kopf-nav a:hover{background:var(--flaeche-2)}
.kopf-app{display:flex;align-items:center;gap:14px;margin-left:auto}
.kopf-login{color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;display:none}
.kopf-login:hover{text-decoration:underline}
@media (min-width:400px){.kopf-login{display:inline}}
@media (min-width:980px){.kopf-nav{display:flex}.kopf-app{margin-left:0}}

/* Held */
.held{position:relative;overflow:hidden;padding:44px 0 72px}
.held-raster{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--punkte) 1.2px,transparent 0);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 25%,transparent 75%);pointer-events:none}
.held-in{position:relative;display:grid;gap:48px;align-items:center}
@media (min-width:980px){.held{padding:72px 0 96px}.held-in{grid-template-columns:1.08fr .92fr;gap:40px}}
.pille{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:999px;padding:7px 14px 7px 12px;box-shadow:var(--schatten)}
.pille .punkt{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.held h1{font-size:clamp(2.55rem,1.2rem + 6vw,5.3rem);margin-top:22px}
.blase{position:relative;display:inline-block;background:var(--orange);color:var(--auf-orange);padding:0 .2em .06em;margin-top:.06em;border-radius:.26em .26em .26em .06em;transform:rotate(-2.2deg);box-shadow:0 .16em .45em -.18em rgba(242,106,27,.85)}
.blase::before{content:"";position:absolute;left:0;bottom:-.2em;width:.36em;height:.3em;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
.held-unter{font-size:clamp(1.06rem,1rem + .35vw,1.25rem);color:var(--muted);max-width:36em;margin:26px 0 30px}
.held-fakten{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-weight:600;font-size:.94rem}
.held-fakten li{display:flex;align-items:center;gap:8px}
.held-fakten .i{width:18px;height:18px;color:var(--link);stroke-width:2.6}

/* Bühne mit Handy */
.buehne{position:relative;display:flex;justify-content:center;padding:18px 0 26px;isolation:isolate}
.glut{position:absolute;z-index:-1;width:min(560px,120%);aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(242,106,27,.42),rgba(242,106,27,.12) 55%,transparent 72%);filter:blur(10px)}
.handy{--b:286px;width:var(--b);flex:none}
@media (min-width:380px){.handy{--b:300px}}
@media (min-width:980px){.handy{--b:316px;transform:perspective(1600px) rotateY(-9deg) rotateX(3deg) rotate(1deg)}}
.handy-rahmen{position:relative;width:100%;aspect-ratio:9/19.2;background:#0D0F13;border-radius:calc(var(--b)*.15);padding:calc(var(--b)*.032);box-shadow:var(--schatten-gross),inset 0 0 0 1.5px #3A3F49,inset 0 0 0 4px #15181D}
.handy-insel{position:absolute;z-index:3;top:calc(var(--b)*.05);left:50%;transform:translateX(-50%);width:28%;height:calc(var(--b)*.07);background:#000;border-radius:999px}
.app{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--b)*.12);background:var(--a-bg);color:var(--a-ink);font-size:calc(var(--b)*.0365);line-height:1.3;font-family:var(--body)}
.app-status{display:flex;justify-content:space-between;align-items:center;padding:1.05em 2.1em .5em;background:var(--anthrazit);color:#fff;font-weight:700;font-size:.92em}
.app-status-r{display:flex;gap:.3em}
.app-status-r i{display:block;width:.42em;height:.8em;border-radius:.12em;background:#fff;opacity:.9}
.app-status-r i:nth-child(1){height:.45em;align-self:flex-end}.app-status-r i:nth-child(2){height:.62em;align-self:flex-end}
.app-bar{display:flex;align-items:center;gap:.6em;background:var(--anthrazit);padding:.35em 1.1em .55em}
.app-logo{height:2.05em;width:auto;margin-right:auto}
.app-logo .logo-bill{fill:#fff}
.app-plan{border:1.5px solid rgba(242,106,27,.8);color:#fff;border-radius:999px;padding:.28em .8em;font-weight:700;font-size:.85em}
.app-avatar{width:2.2em;height:2.2em;border-radius:50%;background:var(--orange);color:var(--anthrazit);display:grid;place-items:center;font-weight:700;font-size:.82em}
.app-tabs{display:flex;gap:1.15em;background:var(--anthrazit);color:rgba(255,255,255,.72);padding:.45em 1.15em 0;font-weight:600;font-size:.88em;white-space:nowrap;overflow:hidden}
.app-tabs span{padding-bottom:.55em;border-bottom:.2em solid transparent}
.app-tabs .an{color:var(--orange);border-color:var(--orange)}
.app-karte{margin:.8em .75em 0;background:var(--a-flaeche);border:1px solid var(--a-linie);border-radius:1em;padding:.95em .95em 1em;display:flex;flex-direction:column;gap:.55em}
.app-kopf{display:flex;justify-content:space-between;align-items:center}
.app-kopf b{font-family:var(--display);font-weight:800;font-size:1.32em;letter-spacing:-.02em}
.app-knopf-klein{border:1px solid var(--a-linie);border-radius:.6em;padding:.3em .65em;font-weight:700;font-size:.82em}
.app-link{color:var(--a-link);font-weight:600;font-size:.88em;text-decoration:underline;text-underline-offset:.15em}
.app-h{font-weight:700;font-size:1.05em;margin-top:.2em}
.app-chips{display:flex;align-items:center;gap:.7em}
.app-chip{background:var(--orange);color:var(--anthrazit);border-radius:999px;padding:.32em .9em;font-weight:700;font-size:.88em}
.app-feld{display:flex;flex-direction:column;gap:.22em;min-width:0}
.app-feld small{font-size:.8em;font-weight:600;color:var(--a-muted)}
.app-feld span{display:block;background:var(--a-feld);border:1px solid var(--a-linie);border-radius:.55em;padding:.48em .65em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;min-height:2.2em}
.app-zwei{display:grid;grid-template-columns:.8fr 1.2fr;gap:.55em}
.app-drei{display:grid;grid-template-columns:.75fr 1fr 1.1fr;gap:.5em}
.app-pos{border:1px solid var(--a-linie);border-radius:.8em;padding:.6em;display:flex;flex-direction:column;gap:.5em}
.app-eingabe span{border-color:var(--orange);box-shadow:0 0 0 .18em rgba(242,106,27,.22)}
.app-eingabe span::after{content:"";display:inline-block;width:.08em;height:1.05em;margin-left:.06em;vertical-align:-.15em;background:var(--orange);animation:blinken 1s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.app-ust{font-size:.82em;color:var(--a-muted);font-weight:600}
.app-ust b{color:var(--a-ink);border:1px solid var(--a-linie);border-radius:.45em;padding:.15em .5em;margin-left:.3em}
.app-mehr{border-top:1px dashed var(--a-linie);padding-top:.6em;display:flex;flex-direction:column;gap:.15em}
.app-mehr b{font-size:.95em}
.app-mehr small{color:var(--a-muted);font-size:.8em}
.app-mehr u{color:var(--a-link)}
.app-leiste{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.6em;background:var(--a-flaeche);border-top:1px solid var(--a-linie);padding:.75em .9em 1.5em;box-shadow:0 -10px 20px -14px rgba(0,0,0,.35)}
.app-leiste div{display:flex;flex-direction:column;line-height:1.15}
.app-leiste small{color:var(--a-muted);font-size:.78em;font-weight:600}
.app-leiste b{font-size:1.28em;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.app-schreiben{background:var(--orange);color:var(--anthrazit);font-weight:700;border-radius:.75em;padding:.75em 1em;white-space:nowrap;font-size:.95em}
.app [data-feld]{transition:opacity .25s ease}
.app.wechsel [data-feld]:not([data-feld="leistung"]){opacity:.15}
.app.tippt [data-feld="summe"]{opacity:.35}

.schwebe{position:absolute;z-index:2;background:var(--flaeche);color:var(--ink);border:1px solid var(--linie);border-radius:18px;box-shadow:var(--schatten),0 24px 50px -24px rgba(27,31,39,.4);font-size:.86rem;line-height:1.3}
.schwebe small{display:block;color:var(--muted);font-size:.8rem}
.schwebe-e{top:6%;left:0;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px}
.schwebe-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--orange);color:var(--anthrazit)}
.schwebe-icon .i{width:18px;height:18px;stroke-width:3}
.schwebe-teilen{right:0;top:40%;display:flex;flex-direction:column;gap:4px;padding:12px;width:208px}
.schwebe-teilen>b{font-size:.84rem;padding:0 4px 4px}
.schwebe-teilen .zeile{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;border:1px solid var(--linie);font-weight:600;font-size:.82rem}
.schwebe-teilen .zeile .i{width:16px;height:16px}
.schwebe-teilen .zeile.an{background:var(--orange);border-color:var(--orange);color:var(--anthrazit)}
.schwebe-bezahlt{left:2%;bottom:7%;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px}
.bezahlt{display:inline-flex;align-items:center;gap:6px;background:var(--gruen-bg);color:var(--gruen-text);font-weight:700;font-size:.78rem;border-radius:999px;padding:5px 10px}
.bezahlt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen)}
@media (max-width:979px){.buehne{padding:62px 0 60px}.schwebe-e{top:0;left:0}.schwebe-bezahlt{left:0;bottom:6px}}
@media (max-width:440px){.schwebe{font-size:.78rem}.schwebe-teilen{width:176px;top:46%}}
@media (min-width:980px){.buehne{padding:18px 0 52px}.schwebe-e{left:-14%;top:2%}.schwebe-teilen{right:-6%}.schwebe-bezahlt{left:-4%;bottom:0}}
@media (prefers-reduced-motion:no-preference){
  .schwebe-e{animation:schweben 7s ease-in-out infinite}
  .schwebe-teilen{animation:schweben 8s ease-in-out -2s infinite}
  .schwebe-bezahlt{animation:schweben 6.5s ease-in-out -4s infinite}
}
@keyframes schweben{50%{transform:translateY(-8px)}}

/* Abschnitte */
.abschnitt{padding:clamp(64px,9vw,116px) 0}
.abschnitt-band{background:var(--band)}
.abschnitt h2{font-size:clamp(2rem,1.25rem + 3vw,3.45rem);max-width:20ch}

/* Schritte */
.schritte{list-style:none;display:grid;gap:18px;margin-top:44px}
@media (min-width:860px){.schritte{grid-template-columns:repeat(3,1fr);gap:24px}}
.schritt{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:24px;padding:26px 26px 28px;box-shadow:var(--schatten)}
.schritt-nr{display:block;font:800 4.4rem/1 var(--display);color:var(--orange);letter-spacing:-.04em;margin-bottom:14px}
@supports (-webkit-text-stroke:2px red){.schritt-nr{color:transparent;-webkit-text-stroke:2.5px var(--orange)}}
.schritt h3{font-size:1.25rem}
.schritt p{color:var(--muted);margin-top:8px}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:44px}
.kachel{min-width:0}
@media (min-width:720px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}.kachel-breit{grid-column:span 2;grid-row:span 2}.kachel:last-child{grid-column:span 2}}
.kachel{display:flex;flex-direction:column;gap:12px;background:var(--flaeche);border:1px solid var(--linie);border-radius:24px;padding:24px;box-shadow:var(--schatten);transition:transform .2s ease,border-color .2s ease}
.kachel:hover{transform:translateY(-3px);border-color:var(--linie-stark)}
.kachel p{color:var(--muted)}
.kachel-kopf{display:flex;flex-direction:column;gap:14px}
.kachel-kopf .i{width:44px;height:44px;padding:10px;border-radius:14px;background:var(--orange-soft);color:var(--link)}
.kachel-breit{background:linear-gradient(160deg,var(--flaeche) 40%,var(--flaeche-2));justify-content:flex-start}
.kachel-breit h3{font:800 clamp(1.6rem,1.2rem + 1.2vw,2.2rem)/1.08 var(--display);letter-spacing:-.03em}
.kachel-breit>p:not(.kachel-tag){font-size:1.06rem}
.kachel-tag{margin-top:auto;align-self:flex-start;background:var(--orange-soft);color:var(--tag-text)!important;font-weight:700;font-size:.8rem;border-radius:999px;padding:5px 11px}
.kette{list-style:none;margin:22px 0 8px;padding:0;display:flex;flex-direction:column;gap:10px;position:relative}
.kette::before{content:"";position:absolute;left:15px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(var(--linie-stark) 0 6px,transparent 6px 11px)}
.kette li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:11px 14px 11px 44px;box-shadow:var(--schatten)}
.kette li::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--flaeche);border:2.5px solid var(--orange)}
.kette li:first-child::before{background:var(--orange)}
.kette b{font-weight:700;font-size:.98rem;line-height:1.25;hyphens:auto;overflow-wrap:anywhere}
.kette small{grid-column:1;color:var(--muted);font-size:.86rem;line-height:1.35}
.kette-marke{grid-column:2;grid-row:1/span 2;justify-self:end;max-width:9.5em;text-align:center;font-weight:700;font-size:.76rem;border-radius:999px;padding:5px 10px;background:var(--band);color:var(--ink);border:1px solid var(--linie-stark);white-space:nowrap}
.kette-marke.gruen{background:var(--gruen-bg);color:var(--gruen-text);border-color:transparent}
.kette-marke.orange{background:var(--orange);color:var(--auf-orange);border-color:transparent}


/* Versandwege */
.wege{display:grid;gap:16px;margin-top:40px}
@media (min-width:860px){.wege{grid-template-columns:repeat(3,1fr)}}
.weg{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:24px;padding:26px;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:12px}
.weg .i.gross{width:54px;height:54px;padding:13px;border-radius:50%;background:var(--orange);color:var(--anthrazit)}
.weg h3{display:flex;align-items:center;gap:10px;font:800 1.5rem/1.1 var(--display);letter-spacing:-.02em}
.weg p{color:var(--muted)}
.weg-teilen{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),var(--schatten)}
.weg.ist-bald{background:transparent;border-style:dashed;border-color:var(--linie-stark);box-shadow:none}
.weg.ist-bald .i.gross{background:var(--flaeche-2);color:var(--muted)}

/* Branchen */
.branchen{list-style:none;display:grid;gap:14px;margin-top:40px}
@media (min-width:640px){.branchen{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.branchen{grid-template-columns:repeat(4,1fr)}}
.branche{background:var(--flaeche);border:1px solid var(--linie);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--schatten)}
.branche-kopf{display:flex;align-items:center;gap:12px}
.branche-kopf .i.gross{width:42px;height:42px;padding:9px;border-radius:12px;background:var(--orange-soft);color:var(--link)}
.branche-kopf h3{font:800 1.3rem/1.1 var(--display);letter-spacing:-.02em}
.branche>p{color:var(--muted);font-size:.96rem}
.posten{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:2px 12px;border-top:1.5px dashed var(--linie-stark);padding-top:12px;font-size:.86rem;font-variant-numeric:tabular-nums}
.posten span:first-child{grid-column:1/-1;font-weight:600;color:var(--ink)}
.posten span:nth-child(2){color:var(--muted)}
.posten b{text-align:right}
.branchen-weitere{margin-top:26px;color:var(--muted);max-width:70ch}

/* E-Rechnung und GoBD (immer dunkel) */
.abschnitt-dunkel{position:relative;overflow:hidden;background:var(--anthrazit);color:#F4F1EE;--muted:#B9BEC8;--link:#FF8A47;--fokus:#FF8A47}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .abschnitt-dunkel{background:#0C0E12;border-block:1px solid #22262E}}
:root[data-theme="dark"] .abschnitt-dunkel{background:#0C0E12;border-block:1px solid #22262E}
.abschnitt-dunkel::before{content:"";position:absolute;width:760px;aspect-ratio:1;right:-260px;top:-320px;background:radial-gradient(closest-side,rgba(242,106,27,.33),transparent 70%);pointer-events:none}
.e-raster{position:relative;display:grid;gap:44px}
@media (min-width:980px){.e-raster{grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}}
.e-text{font-size:1.14rem;margin-top:20px;max-width:56ch;color:#E6E2DE}
.zeitstrahl{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;position:relative}
.zeitstrahl::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.25),var(--orange))}
.zeitstrahl li{position:relative;padding-top:30px;padding-right:10px;display:flex;flex-direction:column;gap:4px}
.zeitstrahl li::before{content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--anthrazit);border:3px solid rgba(255,255,255,.55)}
.zeitstrahl li:last-child::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 6px rgba(242,106,27,.25)}
.zeitstrahl b{font:800 clamp(1.6rem,1.2rem + 1.4vw,2.3rem)/1 var(--display);letter-spacing:-.03em}
.zeitstrahl span{color:var(--muted);font-size:.92rem;line-height:1.35}
.formate{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.formate span{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 13px;font-weight:600;font-size:.88rem}
.gobd{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:28px}
.gobd h3{font:800 clamp(1.5rem,1.2rem + 1vw,2rem)/1.1 var(--display);letter-spacing:-.03em}
.fakten{list-style:none;display:flex;flex-direction:column;gap:20px;margin-top:22px}
.fakten li{display:flex;gap:14px;align-items:flex-start}
.fakten .i{width:42px;height:42px;padding:10px;border-radius:12px;background:rgba(242,106,27,.16);color:#FF8A47}
.fakten b{display:block;font-size:1.05rem}
.fakten span{color:var(--muted);font-size:.96rem}

/* Steuerbüro */
.stb-raster{display:grid;gap:40px;align-items:center}
@media (min-width:980px){.stb-raster{grid-template-columns:1.1fr .9fr;gap:64px}}
.stb-raster .kachel-tag{display:inline-block;margin-top:22px}
.stb-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:24px;padding:22px;box-shadow:var(--schatten-gross);max-width:440px;justify-self:center;width:100%;transform:rotate(-1.5deg)}
.stb-kopf{display:flex;gap:14px;align-items:center}
.stb-kopf b{display:block}
.stb-kopf small{color:var(--muted)}
.stb-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--orange);color:var(--anthrazit)}
.stb-zeile{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--linie);margin-top:18px;padding-top:14px;font-weight:600;font-size:.94rem}
.stb-ok{color:var(--gruen-text)}
.stb-dateien{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px}
.stb-dateien li{display:flex;align-items:center;gap:10px;background:var(--flaeche-2);border-radius:12px;padding:10px 12px;font-size:.92rem;font-weight:600}
.stb-dateien li::before{content:"";width:14px;height:17px;border-radius:2px 6px 2px 2px;border:2px solid var(--link)}

/* Demnächst */
.bald-raster{display:grid;gap:32px}
@media (min-width:980px){.bald-raster{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}}
.bald-liste{list-style:none;display:flex;flex-direction:column;gap:10px}
.bald-liste li{display:flex;align-items:center;gap:14px;background:var(--flaeche);border:1.5px dashed var(--linie-stark);border-radius:18px;padding:16px 18px;font-weight:600}
.bald-liste li>span:not(.marke-bald){flex:1}
.bald-liste small{display:block;font-weight:500;color:var(--muted)}
.bald-liste .i{color:var(--muted)}

/* Preise */
.preise h2{max-width:none}
.intervall{display:inline-flex;margin:34px 0 0;padding:5px;border:1px solid var(--linie-stark);border-radius:999px;background:var(--flaeche);gap:4px}
.intervall legend{position:absolute}
.intervall input{position:absolute;opacity:0;width:1px;height:1px}
.intervall label{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-weight:700;font-size:.95rem;cursor:pointer;color:var(--ink)}
.intervall input:checked+label{background:var(--anthrazit);color:#fff}
.intervall input:focus-visible+label{outline:3px solid var(--fokus);outline-offset:2px}
.spar{background:var(--orange);color:var(--auf-orange);border-radius:999px;padding:3px 8px;font-size:.74rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .intervall input:checked+label{background:var(--orange);color:var(--auf-orange)}:root:not([data-theme="light"]) .intervall input:checked+label .spar{background:var(--anthrazit);color:#fff}}
:root[data-theme="dark"] .intervall input:checked+label{background:var(--orange);color:var(--auf-orange)}
:root[data-theme="dark"] .intervall input:checked+label .spar{background:var(--anthrazit);color:#fff}
.tarife{display:grid;gap:22px;margin-top:30px;filter:drop-shadow(0 22px 26px rgba(27,31,39,.13))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tarife{filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}}
:root[data-theme="dark"] .tarife{filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
@media (min-width:980px){.tarife{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.tarif{--z:9px;position:relative;display:flex;flex-direction:column;background:var(--flaeche);border-radius:26px 26px 0 0;padding:28px 26px calc(30px + var(--z));-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x}
.tarif h3{font:800 1.9rem/1 var(--display);letter-spacing:-.03em}
.tarif-text{color:var(--muted);margin-top:8px;min-height:3.2em}
.tarif-marke{position:absolute;top:22px;right:22px;background:var(--orange);color:var(--auf-orange);font-weight:700;font-size:.78rem;border-radius:999px;padding:5px 11px}
.preis{border-block:1.5px dashed var(--linie-stark);margin:22px 0;padding:18px 0}
.preis-zeile{display:flex;align-items:baseline;gap:8px}
.betrag{font:800 3.2rem/1 var(--display);letter-spacing:-.04em}
.je{color:var(--muted);font-weight:600}
.preis-extra{color:var(--muted);font-size:.92rem;margin-top:6px}
.p-jahr{display:none}
.preise:has(#iv-jahr:checked) .p-monat,.preise.ist-jahr .p-monat{display:none}
.preise:has(#iv-jahr:checked) .preis-zeile.p-jahr,.preise.ist-jahr .preis-zeile.p-jahr{display:flex}
.preise:has(#iv-jahr:checked) .preis-extra.p-jahr,.preise.ist-jahr .preis-extra.p-jahr{display:block}
.preis-hinweis{color:var(--muted);font-size:.85rem;line-height:1.45;margin-top:12px}
.merkmale{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.merkmale li{display:flex;gap:10px;align-items:flex-start}
.merkmale .i{width:20px;height:20px;margin-top:2px;color:var(--link);stroke-width:2.6}
.tarif-knopf{margin-top:auto;width:100%}
.tarif-fuss{color:var(--muted);font-size:.85rem;text-align:center;margin-top:12px}
/* Start hervorgehoben: dunkle Karte */
.tarif-start{background:var(--anthrazit);color:#F4F1EE;--muted:#BAC0CA;--link:#FF8A47;--linie-stark:rgba(255,255,255,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tarif-start{background:#2A2F39}}
:root[data-theme="dark"] .tarif-start{background:#2A2F39}
.tarif-start .btn-haupt{box-shadow:none}
.preise-fuss{color:var(--muted);margin-top:28px;max-width:70ch;font-size:.96rem}

/* Fragen */
.fragen-raster{display:grid;gap:30px}
@media (min-width:980px){.fragen-raster{grid-template-columns:.7fr 1.3fr;gap:64px}.fragen-raster>div:first-child{position:sticky;top:110px;align-self:start}}
.fragen{border-top:1px solid var(--linie-stark)}
.frage{border-bottom:1px solid var(--linie-stark)}
.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 2px;font-weight:700;font-size:1.08rem}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--flaeche) center/14px no-repeat;border:1px solid var(--linie-stark);background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:12px 2px,2px 12px;transition:transform .2s ease}
.frage[open] summary::after{transform:rotate(45deg)}
.antwort{padding:0 2px 22px;color:var(--muted);max-width:66ch}

/* Schluss: Bon in Orange */
.schluss{padding:0 0 clamp(64px,9vw,110px)}
.abschnitt-band+.schluss{padding-top:clamp(64px,9vw,110px);background:var(--band)}
.schluss-bon{--z:12px;position:relative;background:var(--orange);color:var(--anthrazit);border-radius:4px;padding:calc(56px + var(--z)) clamp(22px,5vw,72px);text-align:center;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--z)) var(--z) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--z)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--z)) var(--z) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--z)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x}
.schluss-bon h2{font-size:clamp(2.1rem,1.2rem + 3.6vw,4rem);max-width:16ch;margin:0 auto}
.schluss-bon p{font-size:1.12rem;font-weight:600;margin:18px auto 28px;max-width:40ch}
.schluss-bon .knoepfe{justify-content:center}
.schluss-bon :focus-visible{outline-color:var(--anthrazit)}

/* Rechtstexte */
.recht{padding:44px 0 90px}
.recht-in{max-width:820px}
.recht h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.4rem);margin-top:10px;overflow-wrap:break-word}
.stand{color:var(--muted);margin-top:10px;font-weight:600}
.entwurf-hinweis{display:flex;gap:10px;align-items:center;background:var(--orange-soft);border:1.5px dashed var(--link);color:var(--ink);border-radius:14px;padding:12px 16px;font-weight:700;margin:6px 0 18px}
.entwurf-hinweis::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.inhalt{background:var(--flaeche);border:1px solid var(--linie);border-radius:18px;padding:18px 22px;margin:28px 0 8px}
.inhalt>p{font-weight:700;margin-bottom:8px}
.inhalt ol{padding-left:1.4em;columns:2 16em;column-gap:28px}
.inhalt li{padding:2px 0;break-inside:avoid}
.text h2{font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;margin:2.2em 0 .6em;line-height:1.15}
.text h3{margin:1.6em 0 .5em}
.text p,.text li{line-height:1.72}
.text p+p{margin-top:.9em}
.text ul{padding-left:1.3em;margin:.7em 0}
.text li+li{margin-top:.35em}
.text>p:first-child{margin-top:1.4em}
.recht-fuss{margin-top:44px;padding-top:20px;border-top:1px solid var(--linie);color:var(--muted)}
.offen{background:var(--orange-soft);color:var(--ink);border-bottom:2px dashed var(--link);padding:0 .3em;border-radius:4px;font-weight:600}
.angaben{margin:1.4em 0 0;display:grid;gap:0;border-top:1px solid var(--linie)}
.angabe{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--linie)}
@media (min-width:640px){.angabe{grid-template-columns:220px 1fr;gap:20px}}
.angabe dt{font-weight:700}
.angabe dd{margin:0}
.tabelle-rahmen{margin:1.2em 0}
.tabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--linie)}
.tabelle thead th{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:2px solid var(--linie-stark)}
.tabelle tbody th small{display:block;font-weight:400;color:var(--muted);margin-top:4px}
@media (max-width:719px){
  .tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle th,.tabelle td{display:block}
  .tabelle tr{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:14px 16px;margin-bottom:12px}
  .tabelle th,.tabelle td{border:0;padding:4px 0}
  .tabelle td::before{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
  .tabelle td:nth-of-type(1)::before{content:"Leistung"}
  .tabelle td:nth-of-type(2)::before{content:"Ort der Verarbeitung"}
  .tabelle td:nth-of-type(3)::before{content:"Einsatz"}
}

/* Fuß (immer dunkel) */
.fuss{background:var(--anthrazit);color:#C9CDD5;padding:64px 0 30px;font-size:.95rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fuss{background:#0C0E12;border-top:1px solid #22262E}}
:root[data-theme="dark"] .fuss{background:#0C0E12;border-top:1px solid #22262E}
.fuss .logo-bill{fill:#fff}
.fuss :focus-visible{outline-color:#FF8A47}
.fuss-oben{display:grid;gap:34px}
@media (min-width:860px){.fuss-oben{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.fuss-marke p{margin-top:16px;max-width:34ch}
.fuss-anbieter{color:#A9AFB9}
.fuss-spalte{display:flex;flex-direction:column;gap:10px}
.fuss-spalte h2{font:700 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#FF8A47;margin-bottom:6px}
.fuss a{color:#F1EEEA;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;color:#A9AFB9;font-size:.88rem}

/* Beim Scrollen einblenden: nur mit Scroll-Animationen des Browsers, ohne JavaScript, sonst sofort sichtbar */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .zeigen{animation:auftauchen linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes auftauchen{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media print{
  .kopf,.fuss,.vorschau,.sprung,.inhalt{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .recht{padding:0}
  a{color:#000}
}