body.chrome-site{background:#fff}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:30}
.site-nav{display:flex;align-items:center;gap:18px;min-height:68px}
@media (min-width:1201px){.site-header .site-nav{max-width:1320px}}
.site-menu{display:flex;gap:4px;flex:1;justify-content:center}
.site-menu a{padding:8px 14px;border-radius:var(--radius-sm);color:var(--gray-600);font-weight:500;text-decoration:none!important}
.site-menu a:hover,.site-menu a[aria-current=page]{background:var(--gray-50);color:var(--navy)}
.site-cta{display:flex;gap:8px}
.site-burger{display:none}
.site-menu-konto{display:none}
.site-main{min-height:60vh}
/* Nur oben und unten: Die Kurzschreibweise padding würde den seitlichen Abstand aus .wrap
   überschreiben, und der Text stünde auf schmalen Geräten direkt an der Kante. */
.hero{padding-block:72px 40px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{font-size:2.6rem;line-height:1.12;letter-spacing:-.03em;color:var(--navy)}
.hero .lead{font-size:1.15rem;color:var(--gray-600);margin:20px 0 24px;max-width:540px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:.85rem;color:var(--muted);margin-top:12px}
.preview{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-700) 100%);border-radius:18px;padding:24px;box-shadow:var(--shadow-lg)}
/* minmax(0,1fr) statt 1fr: Sonst waechst die Spalte auf die Mindestbreite ihres Inhalts und
   der Nachbau schiebt sich aus seinem Rahmen – auf dem Telefon um 25 Pixel. */
.preview .mock{background:#fff;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:120px minmax(0,1fr);min-height:300px;font-size:.72rem}
.mock-side{background:var(--navy);padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.mock-side i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}
.mock-side i.on{background:var(--akzent)}
.mock-main{padding:14px;display:flex;flex-direction:column;gap:10px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-kpi{border:1px solid var(--line);border-radius:8px;padding:8px}
.mock-kpi small{display:block;color:var(--muted);font-size:.62rem}
.mock-kpi b{font-size:.9rem}
.mock-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:6px}
.mock-row .badge{font-size:.6rem;padding:2px 6px}
.section{padding:56px 0}
.section-alt{background:var(--bg)}
.section h2{font-size:1.8rem;letter-spacing:-.02em;color:var(--navy);margin-bottom:8px}
.section .sub{color:var(--gray-600);font-size:1.05rem;max-width:min(640px,75ch);margin-bottom:28px}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* Die Kopfleiste klebt (68 Pixel, nach dem Scrollen 58). Ohne diesen Abstand landet das Ziel
   eines Sprungs dahinter: Die Ueberschrift der Gruppe staende dann unter der Leiste. 84 Pixel,
   weil der Sprung beim Laden mit Raute stattfindet, bevor das Skript die Leiste zusammenzieht. */
.feature[id]{scroll-margin-top:84px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.feature .fi{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--akzent-50);color:var(--akzent-600);margin-bottom:12px}
.feature h3{font-size:1.02rem;margin-bottom:6px}
.feature p{margin:0;color:var(--gray-600);font-size:.92rem}
.feature a{display:inline-block;margin-top:10px;font-weight:600}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:flow}
.flow-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.flow-step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 16px;position:relative}
.flow-step::before{counter-increment:flow;content:counter(flow);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:.85rem;margin-bottom:10px}
.flow-step h3{font-size:.98rem;margin-bottom:4px}
.flow-step p{margin:0;font-size:.86rem;color:var(--gray-600)}
.cta-box{background:var(--navy);color:#fff;border-radius:18px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-box h2{color:#fff;margin:0 0 6px}
.cta-box p{margin:0;color:rgba(255,255,255,.8)}
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line)}
.detail:last-child{border-bottom:0}
.detail h2{font-size:1.5rem;color:var(--navy);margin-bottom:8px}
.detail ul{padding-inline-start:18px;color:var(--gray-600)}
.detail li{margin-bottom:6px}
.detail .card{margin:0}
.faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.faq summary{padding:14px 16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--akzent-600);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq .faq-body{padding:0 16px 14px;color:var(--gray-600);font-size:.95rem;max-width:75ch}
.glossar dt{font-weight:600;margin-top:16px;color:var(--navy)}
.glossar dd{margin:4px 0 0;color:var(--gray-600)}
.legal{max-width:min(820px,75ch);font-size:.98rem;line-height:1.6}
.legal h2{font-size:1.3rem;margin:28px 0 8px;color:var(--navy)}
.legal h3{font-size:1.05rem;margin:18px 0 6px}
.placeholder{background:var(--amber-50);border:1px dashed #d9a441;border-radius:8px;padding:8px 12px;color:#7a5200;font-size:.9rem;display:inline-block}
.placeholder-box{background:var(--amber-50);border:1px dashed #d9a441;border-radius:10px;padding:14px 16px;color:#7a5200;margin:16px 0}
.site-footer{border-top:1px solid var(--line);background:#fff;padding:40px 0 20px;margin-top:40px}
.site-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.site-footer h4{margin-bottom:10px;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.site-footer a{display:block;color:var(--gray-600);padding:3px 0;font-size:.92rem}
/* Sprachwahl der Fußzeile: eigene Zeile, Schalter statt Fließtext. display:inline-flex hebt die
   blockweise Darstellung der übrigen Fußzeilen-Links wieder auf. */
.site-footer-langs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.site-footer-langs>span{font-size:.82rem;color:var(--muted);margin-inline-end:6px}
.site-footer a.footer-lang{display:inline-flex;align-items:center;padding:5px 11px;border-radius:99px;font-size:.82rem;line-height:1.2;color:var(--gray-600);border:1px solid var(--line);background:var(--panel);transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.site-footer a.footer-lang:hover{border-color:var(--akzent);color:var(--navy);text-decoration:none}
.site-footer a.footer-lang[aria-current=true]{background:var(--akzent-50);border-color:var(--akzent-100);color:var(--akzent-600);font-weight:600}
/* Der Strich steckt jetzt in der Sprachzeile darüber. */
.site-footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:.85rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.site-footer a.footer-lang{transition:none}}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}
.price-toggle{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:3px;margin-bottom:24px;background:#fff}
.price-toggle a{padding:7px 16px;border-radius:99px;font-weight:600;color:var(--gray-600);text-decoration:none!important}
.price-toggle a.active{background:var(--navy);color:#fff}
.compare{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.compare th,.compare td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:start}
.compare th{background:#f8fafc}
.compare td.c{text-align:center;color:var(--akzent-600);font-weight:700}
.compare td.n{text-align:center;color:var(--muted-2)}
@media (max-width:900px){
  /* Die Leiste auf dem Telefon: Marke, „Anmelden“, Menueknopf. Der Rest – Kostenlos starten,
     Sprache – steht unten im Klappmenue (site-menu-konto). Vorher war der Anmelde-Knopf unter
     1200 Pixeln ausgeblendet und fehlte auch im Klappmenue: Wer schon ein Konto hatte, fand
     vom Telefon aus keinen Weg hinein. Angemeldete sehen statt „Anmelden“ den Weg zur Anwendung. */
  .site-menu{display:none}
  .site-cta{margin-inline-start:auto;gap:4px}
  .site-cta .lang-switch{display:none}
  /* Nur das direkte Kind zaehlt: Der Sprachumschalter ist ein <details> mit einem .btn-ghost darin.
     Die Regel blendete angemeldeten Besuchern sonst die Schaltflaeche der Kopfleiste ganz aus. */
  .site-cta:has(>a.btn-ghost) .btn-primary{display:none}
  .site-cta .btn-ghost{display:inline-flex;padding:9px 12px;font-weight:600;min-height:44px}
  .site-burger{display:inline-flex;min-width:44px;min-height:44px}
  /* Auf 360 Pixeln brauchten Marke, Schaltflaeche und Menueknopf zusammen 368 Pixel: Mit dem
     Rand von 24 Pixeln ragte der Menueknopf aus dem Bildschirm. Der Rand der Kopfleiste ist
     deshalb so breit wie der des Inhalts darunter. */
  .site-header .wrap{padding-inline:14px}
  .site-header.open .site-menu>.site-menu-konto{display:flex;flex-direction:column;gap:10px;padding:14px 0 6px}
  .site-menu-konto .btn{justify-content:center;min-height:46px;font-size:1rem}
  /* Die Linkregeln des Menues (Farbe, Innenabstand) gelten sonst auch fuer die Knoepfe hier. */
  .site-header .site-menu-konto .btn-primary{background:var(--grad-brand);color:#fff;border-color:transparent;padding:10px 16px}
  .site-header .site-menu-konto .btn:not(.btn-primary){background:#fff;color:var(--navy);border:1px solid var(--line-strong);padding:10px 16px}
  .site-header .site-menu-konto .btn .ico{width:18px;height:18px;display:inline-flex}
  .site-menu-konto .lang-menu{align-self:flex-start}
  /* minmax(0,1fr) statt 1fr: Eine Spalte darf nie breiter werden als der Bildschirm, auch wenn
     ein Kind darin nicht schmaler wird. Sonst schiebt sich der Text über den rechten Rand. */
  .hero{grid-template-columns:minmax(0,1fr);padding-block:40px 24px}
  .hero h1{font-size:2rem}
  /* Der Hinweis über der Überschrift ist eine einzige lange Zeile und darf umbrechen */
  .eyebrow{flex-wrap:wrap;max-width:100%}
  .features,.flow,.detail,.contact-grid{grid-template-columns:1fr}
  .site-footer-grid{grid-template-columns:1fr 1fr}
  .section{padding:36px 0}
  /* Tippflaechen im Klappmenue und in der Kopfleiste. Die Verweise des Menues waren 26 Pixel
     hoch, die Schaltflaechen 36 – darunter trifft ein Daumen daneben. */
  .site-header.open .site-menu a{min-height:44px;display:flex;align-items:center;padding:10px 14px}
  .site-cta .btn,.site-burger,.lang-switch>summary{min-height:44px}
  .brand-site{min-height:44px;display:inline-flex;align-items:center}
  /* Das Suchfeld traegt seinen Innenabstand jetzt selbst (siehe .help-search input) und ist in
     jeder Breite 48 Pixel hoch – eine Mindesthoehe am Kasten braucht es dafuer nicht mehr. Der
     alte Kommentar stimmte ausserdem nicht: Die Huelle ist ein <div>, kein <label>; angetippt
     wurde nie die Zeile, sondern nur die 24 Pixel des Feldes. */
}

:lang(ka) .site-footer h4{text-transform:none}

/* ---------- Design 2: Website ---------- */
.site-header{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-menu a[aria-current=page]{background:var(--akzent-50);color:var(--akzent-600)}
.site-main{overflow-x:clip}
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:-72px 0 0 0;background:radial-gradient(720px 380px at 72% 0%,rgba(99,102,241,.16),transparent 65%),radial-gradient(600px 320px at 8% 100%,rgba(22,58,102,.10),transparent 65%);z-index:-1;pointer-events:none}
.hero h1{background:linear-gradient(120deg,#0f2a4a 0%,#173f6e 55%,#4f46e5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.preview{background:var(--grad-brand);box-shadow:0 30px 60px -20px rgba(15,42,74,.45);transform:rotate(-1deg);transition:transform .25s}
.preview:hover{transform:rotate(0)}
.feature{transition:transform .15s,box-shadow .15s}
.feature:hover{transform:translateY(-3px);box-shadow:0 16px 32px -14px rgba(15,42,74,.28)}
.feature .fi{background:linear-gradient(135deg,var(--akzent-50),var(--akzent-100));color:var(--akzent-600);box-shadow:inset 0 0 0 1px rgba(99,102,241,.25)}
.flow-step::before{background:var(--grad-brand)}
.section-alt{background:linear-gradient(180deg,#f6f8fb,#eef3f8)}
.cta-box{background:var(--grad-brand);position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;width:340px;height:340px;right:-110px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(94,234,212,.35),transparent 65%);pointer-events:none}
.cta-box>*{position:relative}
.plan{transition:transform .15s,box-shadow .15s}
.plan:hover{transform:translateY(-3px);box-shadow:0 16px 32px -14px rgba(15,42,74,.22)}
.site-footer{background:linear-gradient(180deg,#fff,#f6f8fb)}
/* ---------- Design 2b: Startseite ---------- */
.brand-site .brand-mark svg{width:30px;height:30px}
.brand-site{font-size:1.28rem}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:99px;background:#fff;border:1px solid var(--akzent-100);color:var(--akzent-600);font-size:.82rem;font-weight:600;margin-bottom:18px;box-shadow:var(--shadow)}
.eyebrow svg{border-radius:5px}
.eyebrow-plain{background:none;border:0;box-shadow:none;padding:0;margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:#0d7d72}
.mock-brand{display:flex;align-items:center;gap:5px;color:#fff;font-weight:700;font-size:.62rem;letter-spacing:-.02em;margin-bottom:8px}
.mock-brand svg{border-radius:4px}
.mock-brand i{color:#c7d2fe;font-style:normal}
.highlights{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:8px auto 44px}
.highlights>div{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:.9rem;color:var(--navy);box-shadow:var(--shadow)}
.highlights .ico{color:var(--akzent-600);width:20px;height:20px;flex:none}
.cta-mark{position:absolute;right:-30px;top:50%;transform:translateY(-50%) rotate(-8deg);opacity:.16;pointer-events:none}
.cta-mark svg{filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.cta-box .hero-cta{position:relative;z-index:1}
.hero .lead{font-size:1.2rem}
.hero-cta .btn-lg{padding:13px 22px}
@media (max-width:900px){.highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.highlights>div{font-size:.84rem}.cta-mark{display:none}}
@media (max-width:600px){.highlights{grid-template-columns:1fr}}

/* Das Vorschaubild auf dem Telefon.
   Der Nachbau des Programms braucht 370 Pixel, hat aber nur 283 – rechts wurde die Haelfte
   jeder Kennzahl abgeschnitten. Schmalere Seitenleiste, zwei Kennzahlen statt drei, und die
   Belegzeilen brechen nicht mehr um. Es ist ein Bild, kein Bedienfeld: Es soll zeigen, wie
   das Programm aussieht, und dafuer muss es ganz zu sehen sein. */
@media (max-width:600px){
  .preview{padding:14px}
  .preview .mock{grid-template-columns:58px minmax(0,1fr);font-size:.66rem;min-height:0}
  .mock-side{padding:10px 7px}
  .mock-brand{font-size:.54rem;gap:3px}
  .mock-main{padding:10px;gap:8px}
  .mock-kpis{grid-template-columns:repeat(2,1fr)}
  .mock-kpi:nth-child(3){display:none}
  .mock-row{gap:6px}
  /* min-width:0 gehoert dazu: Ein Flex-Element schrumpft sonst nie unter seinen Text,
     und die Zeile schiebt den Nachbau breiter als das Telefon. */
  .mock-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}
/* ---------- Design 3: Website ---------- */
.hero h1,.section h2,.cta-box h2,.detail h2{font-family:var(--font-display);font-weight:800}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(15,42,74,.12) 1px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 70% at 75% 25%,#000,transparent);mask-image:radial-gradient(70% 70% at 75% 25%,#000,transparent);z-index:-1;pointer-events:none}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;font-size:.82rem;color:var(--gray-600)}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust .ico{color:var(--akzent-600)}
.mock-chart{display:flex;align-items:flex-end;gap:5px;height:56px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fbfcfe}
.mock-chart i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--akzent),var(--akzent-600))}
.mock-chart i:nth-child(odd){background:linear-gradient(180deg,#1e4f85,#0f2a4a)}
.features .feature:nth-child(3n+2) .fi{background:linear-gradient(135deg,#e8eefc,#d9e5fa);color:#1e4f85;box-shadow:inset 0 0 0 1px rgba(30,79,133,.2)}
.features .feature:nth-child(3n) .fi{background:linear-gradient(135deg,#fff4dc,#ffe6b8);color:#b45309;box-shadow:inset 0 0 0 1px rgba(180,83,9,.2)}
.feature h3{font-family:var(--font-display)}
.flow-step::before{box-shadow:0 4px 10px rgba(15,42,74,.25)}
.site-footer .brand-site .brand-mark svg{width:34px;height:34px}
.highlights>a{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:.9rem;color:var(--navy);box-shadow:var(--shadow);text-decoration:none!important}
.highlights>a:hover{border-color:var(--akzent);box-shadow:0 8px 20px -10px rgba(15,42,74,.3)}

/* ---------- Schwebende Hinweise über der App-Darstellung ---------- */
.preview{position:relative}
.float-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:.78rem;font-weight:600;color:var(--text);box-shadow:var(--shadow-lg);white-space:nowrap}
.float-chip .ico{color:var(--akzent)}
.chip-1{top:8%;left:-14px;animation:schweben 6s ease-in-out infinite}
.chip-2{bottom:16%;left:-6px;animation:schweben 7.5s ease-in-out infinite .8s}
.chip-3{top:24%;right:-10px;animation:schweben 6.8s ease-in-out infinite .4s}
.chip-3 .ico{color:var(--green)}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:900px){.float-chip{display:none}}
@media (prefers-reduced-motion:reduce){.float-chip{animation:none}}

/* ---------- Mitmach-Vorschau ---------- */
.try{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.try-doc{display:flex;justify-content:center}
.try-sheet{width:100%;max-width:380px;background:#fff;color:#172033;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:22px 24px}
.try-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--akzent);padding-bottom:8px;margin-bottom:14px}
.try-head b{font-size:1.15rem}
.try-head span{font-size:.8rem;color:#5f6b7a}
.try-to{margin-bottom:16px}
.try-to small{display:block;color:#5f6b7a;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.try-to b{font-size:1rem}
.try-table{width:100%;border-collapse:collapse;font-size:.88rem}
.try-table td{padding:7px 0;border-bottom:1px solid #e2e7ee}
.try-table .num{text-align:end;font-variant-numeric:tabular-nums}
/* Auch auf der oeffentlichen Seite tragen nur die Zahlenflaechen tabellarische Ziffern; der
   Fliesstext behaelt die gewoehnlichen, weil er gelesen und nicht verglichen wird. */
.compare,.try-table,.try-head b,.try-to b,.mock-kpi,.plan .price,.plan .price-alt{font-variant-numeric:tabular-nums}
.try-table tfoot td{border-bottom:0;border-top:2px solid #172033;padding-top:9px;font-size:1rem}
.try-foot{display:flex;align-items:center;gap:6px;margin-top:16px;font-size:.78rem;color:#0f6b46}
@media (max-width:860px){.try{grid-template-columns:1fr;gap:22px}}

/* ---------- Sanftes Einblenden beim Scrollen ---------- */
.will-reveal{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.is-revealed{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.will-reveal{opacity:1;transform:none;transition:none}}

/* Hilfebereich: Suche und Themenkarten */
.help-search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 16px;box-shadow:var(--shadow);max-width:560px;margin:0 0 20px}
.help-search .ico{color:var(--muted)}
/* 1rem sind hier 14,5 Pixel – Safari zoomt beim Antippen hinein; deshalb fest in Pixeln. */
/* Der Innenabstand gehoert an das Feld, nicht an den Kasten: Sonst ist der Kasten 50 Pixel hoch
   und das Ziel darin 24. Gemessen danach: Feld 48 Pixel in jeder Breite, Kasten 50. */
.help-search input{flex:1;border:0;background:none;font:inherit;font-size:16px;color:var(--text);outline:none;padding:12px 0}
.help-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:28px}
.help-card{display:flex;flex-direction:column;gap:3px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);text-decoration:none!important;color:var(--text);transition:box-shadow .16s,transform .16s,border-color .16s}
.help-card:hover{box-shadow:var(--shadow-lg);border-color:var(--akzent);transform:translateY(-2px)}
.help-card .ico{color:var(--akzent);margin-bottom:4px}
.help-card b{font-size:.98rem}
.help-card span{font-size:.86rem;color:var(--muted)}
.help-card em{font-style:normal;font-size:.76rem;color:var(--muted-2);margin-top:4px}
.help-empty{margin:0 0 20px}
@media (prefers-reduced-motion:reduce){.help-card{transition:none}.help-card:hover{transform:none}}

/* ---------- Vertrauensleiste unter dem ersten Bildschirm ---------- */
.trustbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px auto 40px;padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.trustbar>div{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--gray-600)}
.trustbar .ico{color:var(--akzent);flex:none}

/* ---------- Kernfunktionen mit Illustration ---------- */
.corefeatures{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
.corefeature{display:flex;flex-direction:column;padding:22px 22px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);text-decoration:none!important;color:var(--text);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.corefeature:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--akzent)}
.corefeature .illu{width:104px;height:84px;margin:0 0 10px}
.corefeature h3{font-size:1.05rem;margin-bottom:6px}
.corefeature p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;flex:1}
.corefeature .more{display:inline-flex;align-items:center;gap:5px;margin-top:12px;color:var(--navy-700);font-weight:600;font-size:.88rem}
.corefeature:hover .more{color:var(--akzent-600)}
/* „Außerdem dabei": eine Reihe kleiner Kärtchen mit Symbol unter den Funktionskarten. */
.features-more{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fm-label{flex-basis:100%;color:var(--muted);font-size:.88rem;font-weight:600;margin-bottom:-2px}
a.fm-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:99px;background:#fff;
  border:1px solid var(--line);color:var(--navy);font-size:.88rem;font-weight:600;text-decoration:none;
  box-shadow:var(--shadow-xs);transition:transform .15s,box-shadow .15s,border-color .15s}
a.fm-chip .ico{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:linear-gradient(135deg,var(--akzent-50),var(--akzent-100));color:var(--akzent-600)}
a.fm-chip:nth-of-type(5n+2) .ico{background:linear-gradient(135deg,#e8eefc,#d9e5fa);color:#1e4f85}
a.fm-chip:nth-of-type(5n+3) .ico{background:linear-gradient(135deg,#fff4dc,#ffe6b8);color:#b45309}
a.fm-chip:nth-of-type(5n+4) .ico{background:linear-gradient(135deg,#fde8ef,#fbd3e0);color:#be185d}
a.fm-chip:hover{transform:translateY(-2px);border-color:var(--akzent-100);box-shadow:0 10px 22px -12px rgba(15,42,74,.35);color:var(--akzent-600)}
a.fm-chip:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
@media (max-width:900px),(pointer:coarse){a.fm-chip{min-height:44px}}
@media (prefers-reduced-motion:reduce){a.fm-chip{transition:none}}

/* ---------- Ablauf zum Anklicken ---------- */
.flow-i{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.flow-i .flow-step{padding:0}
.flow-i .flow-step::before{content:none}
.flow-i .flow-step{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.flow-i .flow-step.on{border-color:var(--akzent);box-shadow:var(--shadow)}
.flow-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;background:none;border:0;font:inherit;text-align:start;cursor:pointer;color:var(--text)}
.flow-nr{width:34px;height:34px;border-radius:10px;background:var(--navy-50);color:var(--navy);display:grid;place-items:center;flex:none;transition:background .18s,color .18s}
.flow-i .flow-step.on .flow-nr{background:var(--akzent);color:#fff}
.flow-head h3{font-size:1rem;margin:0}
.flow-head::after{content:"";width:8px;height:8px;border-inline-end:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);margin-inline-start:auto;transition:transform .18s}
.flow-i .flow-step.on .flow-head::after{transform:rotate(-135deg)}
.flow-i .flow-step p{margin:0;padding:0 18px 16px 64px;color:var(--muted);font-size:.93rem;line-height:1.6;display:none}
.flow-i .flow-step.on p{display:block}
.chip-4{bottom:34%;right:-16px;animation:schweben 7.2s ease-in-out infinite .2s}
.chip-5{top:52%;left:-18px;animation:schweben 6.4s ease-in-out infinite .6s}
@media (max-width:900px){.chip-4,.chip-5{display:none}}
@media (prefers-reduced-motion:reduce){.corefeature,.flow-i .flow-step,.flow-nr,.flow-head::after{transition:none}.corefeature:hover{transform:none}.chip-4,.chip-5{animation:none}}

/* ---------- Ratgeber ---------- */
/* Pfadzeile ueber der Ueberschrift: zeigt, wo man ist, und verlinkt zurueck zur Uebersicht. */
.breadcrumb{font-size:.86rem;color:var(--muted);margin:0 0 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--akzent)}
/* Ganze Karte anklickbar: die Uebersicht besteht nur aus Verweisen. */
a.card-link{display:block;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.card-link:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,42,74,.10)}
/* --ink gab es nie: Eine Farbe aus einer unbekannten Variablen ist ungueltig, und color faellt
   dann auf den geerbten Wert zurueck - also auf die Linkfarbe. Die Ueberschrift der Karte soll
   aber Text sein, nicht Link; die ganze Karte ist der Verweis. */
a.card-link h2{color:var(--text)}

/* ================= Design 3: Kopfleiste ================= */

/* Die Menuepunkte brachen bei 1280 Pixeln auf drei Zeilen um – „Brutto-Netto-Rechner“ passte nicht
   in die Luecke zwischen Marke und Schaltflaechen (640 Pixel noetig, 617 vorhanden). Kein Umbruch,
   engere Abstaende, und bis 1200 Pixel uebernimmt das Klappmenue – ein gemeinsamer Umschaltpunkt fuer alle Sprachen:
   Georgisch, Ukrainisch und Bulgarisch liefen auf Laptop-Breiten (1280, 1366) ueber, weil ihre
   Menuepunkte laenger sind. Darueber bekommt die Leiste mehr Breite als der Seiteninhalt (1140). */
.site-menu{gap:2px}
.site-menu a .ico{display:none}
.site-menu a{position:relative;white-space:nowrap;padding:8px 12px;background:none;transition:color var(--t-fast) var(--ease)}
.site-menu a:hover,.site-menu a[aria-current=page]{background:none;color:var(--navy)}
/* Strich statt Pille: waechst aus der Mitte und bleibt bei der geoeffneten Seite stehen. */
.site-menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;background:var(--grad-accent);transform:scaleX(0);transform-origin:center;transition:transform var(--t-normal) var(--ease)}
.site-menu a:hover::after,.site-menu a:focus-visible::after,.site-menu a[aria-current=page]::after{transform:scaleX(1)}

/* Beim Scrollen rueckt die Leiste zusammen und bekommt einen Schatten: der Inhalt gewinnt Platz,
   und man sieht, dass die Leiste ueber der Seite liegt. */
.site-header{transition:box-shadow var(--t-normal) var(--ease),background-color var(--t-normal) var(--ease)}
.site-nav{transition:min-height var(--t-normal) var(--ease)}
body.gescrollt .site-header{background:rgba(255,255,255,.94);box-shadow:0 6px 22px -12px rgba(15,42,74,.30)}
body.gescrollt .site-nav{min-height:58px}
body.gescrollt .brand-site .brand-mark svg{width:26px;height:26px}
.brand-site .brand-mark svg{transition:width var(--t-normal) var(--ease),height var(--t-normal) var(--ease)}

/* Der Haken der Marke zeichnet sich beim Laden einmal selbst. Laenge des Pfades rund 18 Einheiten. */
@keyframes pxy-haken{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
.site-header .brand-mark .pxy-haken,.bare-top .brand-mark .pxy-haken{stroke-dasharray:18;animation:pxy-haken .75s var(--ease) .1s both}

/* Klappmenue auf schmalen Geraeten: die Punkte bekommen Luft und eine erkennbare Reihenfolge. */
@media (max-width:1200px){
  .site-menu{display:none}
  .site-cta{margin-inline-start:auto}
  .site-burger{display:inline-flex}
  .site-header.open .site-menu{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 16px 14px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(15,42,74,.35)}
  .site-header.open .site-menu>a{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line)}
  .site-header.open .site-menu>a .ico{display:inline-flex;width:18px;height:18px;color:var(--akzent-600);flex:none}
  .site-header.open .site-menu>a[aria-current=page] .ico{color:var(--navy)}
  .site-header.open .site-menu>a::after{display:none}
  .site-header.open .site-menu>a:last-child{border-bottom:0}
}

/* Die eine Schaltflaeche, auf die es ankommt, traegt die Markenfarben statt schlichtem Navy.
   Nur hier in der Kopfleiste – in der Anwendung bleibt die ruhige Fassung. */
.site-cta .btn-primary{background:var(--grad-brand);border-color:transparent}
.site-cta .btn-primary .ico{transition:transform var(--t-normal) var(--ease)}
.site-cta .btn-primary:hover .ico{transform:translateX(3px)}
[dir="rtl"] .site-cta .btn-primary:hover .ico{transform:translateX(-3px)}

/* ================= Design 3: Startseite ================= */

/* Die Teile des Textblocks kommen nacheinander herein. Kurz und flach – eine Startseite soll
   wirken, als sei sie schon da, nicht als baue sie sich erst auf. */
@keyframes pxy-auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero>div:first-child>*{animation:pxy-auf .5s var(--ease) both}
.hero>div:first-child>*:nth-child(1){animation-delay:.02s}
.hero>div:first-child>*:nth-child(2){animation-delay:.08s}
.hero>div:first-child>*:nth-child(3){animation-delay:.14s}
.hero>div:first-child>*:nth-child(4){animation-delay:.20s}
.hero>div:first-child>*:nth-child(5){animation-delay:.26s}
.hero>div:first-child>*:nth-child(6){animation-delay:.32s}
.hero .preview{animation:pxy-auf .6s var(--ease) .18s both}

/* Punkt an der Kopfzeile: zeigt, dass hier etwas laeuft, ohne zu blinken. */
.eyebrow .puls{width:7px;height:7px;border-radius:50%;background:var(--akzent);flex:none;position:relative}
.eyebrow .puls::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--akzent);animation:pxy-puls 2.4s ease-out infinite}
@keyframes pxy-puls{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.8);opacity:0}}

/* Zahlen in der Vorschau zaehlen beim ersten Anblick einmal hoch (app.js). */
.mock-kpi b{font-variant-numeric:tabular-nums}

/* Vertrauenszeile: Symbole in eingefaerbten Kreisen statt nackter Striche. */
.trustbar>div{gap:11px}
.trustbar .ico{width:18px;height:18px;padding:8px;border-radius:10px;background:linear-gradient(135deg,var(--akzent-50),var(--akzent-100));color:#0b6f66;box-sizing:content-box;transition:transform var(--t-fast) var(--ease)}
.trustbar>div:hover .ico{transform:translateY(-2px) rotate(-4deg)}

/* Ueber jeder Abschnitts-Ueberschrift ein kurzer Strich in den Markenfarben. */
/* Rubrikzeile bekommt einen kurzen Strich in den Markenfarben davor. Das ordnet den Abschnitt,
   ohne eine zweite Auszeichnung ueber der Ueberschrift zu stapeln. */
.eyebrow-plain{display:inline-flex;align-items:center;gap:10px}
.eyebrow-plain::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--grad-accent);flex:none}

/* Die Karten der Funktionen heben sich staerker ab und ihr Symbol dreht sich leicht mit. */
.feature .fi{transition:transform var(--t-normal) var(--ease)}
.feature:hover .fi{transform:rotate(-6deg) scale(1.06)}

/* Schaltflaechen: ein kurzer Lichtstreifen wandert beim Zeigen darueber. */
.btn-primary,.btn-accent{position:relative;overflow:hidden}
.btn-primary::after,.btn-accent::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .55s var(--ease)}
/* Nur mit Maus: Auf dem Telefon kostete der Streifen den ersten Tipp – Safari wertet einen Inhalt,
   der beim Zeigen in den Knopf läuft, als Hover-Menü und löst erst beim zweiten Tipp aus. */
@media (hover:hover){.btn-primary:hover::after,.btn-accent:hover::after{left:130%}}
@media (hover:none){.btn-primary::after,.btn-accent::after{display:none}}

/* Feine Linie an der Oberkante der Karte, die beim Zeigen aufzieht. */
.feature{position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-normal) var(--ease)}
.feature:hover::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .site-menu a::after,.site-header,.site-nav,.brand-site .brand-mark svg,.feature .fi,.feature::before,.trustbar .ico,.btn-primary::after,.btn-accent::after,.site-cta .btn-primary .ico{transition:none}
  .site-header .brand-mark .pxy-haken,.bare-top .brand-mark .pxy-haken,.hero>div:first-child>*,.hero .preview,.eyebrow .puls::after{animation:none}
  .hero>div:first-child>*,.hero .preview{opacity:1;transform:none}
}

/* Ratgeber und andere Textseiten: Der Seitentitel stand kleiner da (1.4rem) als jede
   Zwischenueberschrift (1.8rem) – die Hierarchie stand Kopf. */
.section h1{font-size:2rem;letter-spacing:-.02em;color:var(--navy);margin-bottom:8px;font-family:var(--font-display);font-weight:800}
.section .lead{font-size:1.15rem;color:var(--gray-600);margin:10px 0 22px;max-width:75ch}

/* ================= Design 4: Website =================
   Der Hintergrund des ersten Bildschirms reicht ueber die volle Breite. Vorher endete er an den
   Kanten des Inhaltsbereichs: links unten stand ein graues Rechteck, rechts brach der Schimmer ab. */
.hero::before{inset:-72px calc(50% - 50vw) 0;background:radial-gradient(900px 440px at 80% 0%,rgba(99,102,241,.13),transparent 70%),radial-gradient(700px 360px at 10% 100%,rgba(22,58,102,.06),transparent 70%)}
/* Die Vertrauensleiste direkt darunter nennt dieselben Punkte – einmal genuegt. */
.site-main:has(.trustbar) .hero-trust{display:none}
/* Der Chip lag ueber dem Schriftzug der Beispielanwendung. */
.chip-1{top:1%}
/* Auf dem Telefon stand die Kennzeile in zwei Teilen: Zeichen und Punkt allein in der ersten Zeile,
   der Text darunter. Jetzt bricht nur der Text um, Zeichen und Punkt bleiben davor. */
@media (max-width:700px){
  .eyebrow{flex-wrap:nowrap;align-items:flex-start;border-radius:14px;line-height:1.35}
  .eyebrow svg,.eyebrow .puls{margin-top:2px}
  .eyebrow .puls{margin-top:6px}
}
/* Der Schriftzug in der Beispielanwendung brach in „project“ und „xy“ um. */
.mock-brand b{white-space:nowrap;overflow:hidden}

/* Verweise im Fliesstext der Website: farbig und unterstrichen, wie in der Anwendung. Vorher waren
   sie dunkelblau ohne Linie und von der Schrift daneben kaum zu unterscheiden – die Verweise von
   der Startseite in den Ratgeber sahen aus wie eine Aufzaehlung. Knoepfe, Reiter und der dunkle
   Schlusskasten sind ausgenommen. */
.section :where(p,.checklist li) a:not(.btn):not(.pill):not(.badge){
  color:var(--akzent-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
}
.section :where(p,.checklist li) a:not(.btn):not(.pill):not(.badge):hover{text-decoration-thickness:2px}
.section .cta-box :where(p,.checklist li) a:not(.btn):not(.pill):not(.badge){color:inherit}

/* Tippflaechen im Seitenfuss und im Pfad ueber dem Beitrag: Die Verweise waren 26 bzw. 19 Pixel
   hoch und standen ohne Abstand untereinander – auf dem Telefon trifft man den Nachbarn. */
@media (max-width:900px),(pointer:coarse){
  .site-footer-grid a{display:flex;align-items:center;min-height:44px;padding:0}
  .breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  /* Die Sprachwahl: zwoelf Pillen von 26 Pixeln Hoehe im Abstand von sechs. */
  .site-footer a.footer-lang{min-height:44px;padding:0 14px}
  .site-footer-langs{gap:8px}
}

/* Funktionsseiten: „So geht es" in nummerierten Schritten und die häufigen Fragen darunter.
   Die Ziffer steht in einem Kreis vor dem Text; die Breite ist die eines Beitrags, damit die
   Zeilen lesbar bleiben. */
.fn-mehr{margin-top:40px;max-width:820px}
.fn-mehr h2{font-size:1.2rem}
.fn-mehr .faq{margin-top:28px}
.schritte{list-style:none;counter-reset:schritt;padding:0;margin:14px 0 0}
.schritte li{counter-increment:schritt;position:relative;padding:0 0 14px 44px;color:var(--gray-600);line-height:1.6}
.schritte li::before{content:counter(schritt);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--akzent-50);color:var(--akzent-600);font-weight:700;font-size:.9rem}
/* Lange Verweislisten (Ratgeber auf der Startseite, „Weitere Beiträge") in zwei Spalten. */
@media (min-width:900px){
  .checklist-2{columns:2;column-gap:40px}
  .checklist-2 li{break-inside:avoid}
}
/* ---------- Startseite: Kleinunternehmer (§ 19) ----------
   Links der Text mit drei Punkten und zwei Verweiskarten, rechts ein Rechnungsausschnitt, auf dem
   der Hinweis dort steht, wo sonst die Umsatzsteuer stünde. Auf dem Telefon untereinander. */
.ku-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.ku .sub{margin-bottom:18px}
.ku-punkte{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.ku-punkte li{display:flex;gap:12px;align-items:flex-start;color:var(--gray-600);font-size:.95rem;line-height:1.55}
.ku-punkte li b{color:var(--navy)}
.ku-punkte .ico{flex:none;width:22px;height:22px;padding:4px;margin-top:1px;border-radius:50%;background:var(--akzent-50);color:var(--akzent-600)}

.ku-beleg{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;
  box-shadow:0 24px 48px -24px rgba(15,42,74,.35);font-size:.86rem;transform:rotate(1.2deg)}
.ku-beleg::before{content:"";position:absolute;inset:0 0 auto;height:6px;border-radius:16px 16px 0 0;background:var(--grad-accent)}
.kb-kopf{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.kb-kopf span{text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:var(--muted);font-weight:700}
.kb-kopf b{font-family:var(--font-display);color:var(--navy)}
.kb-zeile{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:var(--gray-600);border-bottom:1px dashed var(--line)}
.kb-summe{border-bottom:0;padding-top:10px;color:var(--navy);font-weight:700}
.kb-hinweis{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--akzent-50);border:1px solid var(--akzent-100);color:var(--navy);font-weight:600;line-height:1.45}
.kb-marke{display:inline-block;margin:0 0 6px;padding:2px 8px;border-radius:99px;background:#fff;border:1px solid var(--akzent-100);
  color:var(--akzent-600);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.kb-hinweis .kb-marke{display:table}
.kb-fuss{display:flex;gap:8px;margin-top:16px}
.kb-fuss i{display:block;height:6px;border-radius:3px;background:var(--line);flex:1}
.kb-fuss i:nth-child(2){flex:.6}.kb-fuss i:nth-child(3){flex:.8}

/* ---------- Startseite: Ratgeber nach Themen ---------- */
.rg-themen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rg-thema{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 10px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.rg-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rg-kopf h3{font-family:var(--font-display);font-size:1rem;margin:0;color:var(--navy);line-height:1.25}
.rg-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--akzent-50),var(--akzent-100));color:var(--akzent-600)}
.rg-thema:nth-child(4n+2) .rg-ico{background:linear-gradient(135deg,#e8eefc,#d9e5fa);color:#1e4f85}
.rg-thema:nth-child(4n+3) .rg-ico{background:linear-gradient(135deg,#fff4dc,#ffe6b8);color:#b45309}
.rg-thema:nth-child(4n) .rg-ico{background:linear-gradient(135deg,#fde8ef,#fbd3e0);color:#be185d}
.rg-thema ul{list-style:none;margin:0;padding:0}
.rg-thema li+li{border-top:1px solid var(--line)}
.rg-thema a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px;min-height:44px;
  color:var(--text);text-decoration:none;font-size:.9rem;line-height:1.35;border-radius:8px;transition:background .12s,color .12s}
.rg-thema a .ico{flex:none;width:16px;height:16px;color:var(--line-strong);transition:transform .15s,color .15s}
.rg-thema a:hover{color:var(--akzent-600);background:var(--akzent-50)}
.rg-thema a:hover .ico{color:var(--akzent-600);transform:translateX(3px)}
.rg-thema a:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
.rg-alle{margin:24px 0 0;text-align:center}
.rg-alle .btn{display:inline-flex;align-items:center;gap:8px}

@media (max-width:1060px){.rg-themen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .ku-grid{grid-template-columns:1fr;gap:32px}
  .ku-beleg{max-width:440px;width:100%;margin-inline:auto;transform:none}
}
@media (max-width:640px){
  .rg-themen{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .rg-thema a,.rg-thema a .ico,.vk,.vk-pfeil,.ak,.mega{transition:none;animation:none}
}
/* ---------- Kostenloser Rechnungsersteller (/de/rechnung-erstellen) ----------
   Links das Formular in vier nummerierten Karten, rechts die Summe mit dem Knopf, die beim Scrollen
   mitläuft. Auf dem Telefon steht die Summe unter dem Formular – direkt über dem Knopf. */
.rf h1{font-family:var(--font-display);font-weight:800;color:var(--navy);letter-spacing:-.02em}
.rf-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.rf-teile{display:grid;gap:18px;min-width:0}
fieldset.rf-teil{margin:0;padding:0;min-width:0}
.rf-kopf{display:flex;align-items:center;gap:10px;padding:16px 20px 0;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--navy);float:left;width:100%}
.rf-kopf+*{clear:both}
.rf-nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--akzent-50);color:var(--akzent-600);font-size:.88rem;font-weight:800}
.rf-teil .card-body{padding-top:14px}
.rf-zwei{display:grid;grid-template-columns:minmax(80px,.38fr) minmax(0,1fr);gap:8px}
.rf-zeitraum .rf-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.rf-mehr{margin-top:6px;border-top:1px solid var(--line);padding-top:10px}
.rf-mehr summary{cursor:pointer;font-weight:600;color:var(--navy-700);font-size:.92rem;min-height:36px;display:flex;align-items:center}
.rf-mehr .form-grid{margin-top:8px}
.rf-fehler{color:#b42318;font-size:.84rem;margin-top:4px;font-weight:600}
.has-error input,.has-error textarea,.has-error select{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.12)}
.rf-meldung{border:1px solid #f4c7c7;background:#fff5f5;color:#7a1f1f;border-radius:var(--radius);padding:14px 18px;margin:0 0 20px}
.rf-meldung ul{margin:6px 0 0;padding-left:20px}
.rf-meldung a{color:#7a1f1f;text-decoration:underline}
.rf-meldung:focus{outline:2px solid #e5484d;outline-offset:2px}

.rf-ku{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--akzent-100);background:var(--akzent-50);border-radius:12px;margin-bottom:14px;cursor:pointer;font-size:.92rem;color:var(--gray-600)}
.rf-ku input{margin-top:3px;width:18px;height:18px;flex:none}
.rf-ku b{color:var(--navy)}
.rf-posliste{display:grid;gap:12px}
.rf-pos{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;background:#fbfcfe}
.rf-pos.has-error{border-color:#f4c7c7;background:#fff8f8}
.rf-pos-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.rf-pos-nr{font-size:.76rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.rf-pos-nr::before{content:"Position "}
.rf-weg{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.rf-weg:hover{background:#fdeaea;color:#b42318}
.rf-weg[hidden]{display:none}
.rf-weg .ico{width:16px;height:16px}
.rf-pos-felder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 10px}
.rf-pos-felder .field{margin-bottom:6px}
.rf-pos-felder label{font-size:.8rem}
.rf-bez{grid-column:span 7}.rf-besch{grid-column:span 5}
.rf-menge{grid-column:span 3}.rf-einheit{grid-column:span 3}.rf-preis{grid-column:span 4}.rf-ust{grid-column:span 2}
.rf-ohne-ust .rf-ust{display:none}
.rf-ohne-ust .rf-preis{grid-column:span 6}
.rf-neu{margin-top:12px;display:inline-flex;align-items:center;gap:8px}
.rf-neu[hidden]{display:none}
.rf-label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--text)}
.rf-wahl{display:flex;flex-wrap:wrap;gap:8px}
.rf-chip{position:relative;cursor:pointer}
.rf-chip input,.rf-farbe input{position:absolute;opacity:0;width:1px;height:1px}
.rf-chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:99px;font-weight:600;font-size:.9rem;background:#fff;color:var(--navy)}
.rf-chip input:checked+span{border-color:var(--akzent);background:var(--akzent-50);color:var(--akzent-600);box-shadow:inset 0 0 0 1px var(--akzent)}
.rf-chip input:focus-visible+span,.rf-farbe input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:2px}
.rf-farbe{cursor:pointer;display:inline-grid;place-items:center;width:44px;height:44px}
.rf-farbe span{display:block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-strong)}
.rf-farbe input:checked+span{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--akzent)}

.rf-seite{position:sticky;top:84px;display:grid;gap:14px}
.rf-summe h2{font-family:var(--font-display);font-size:1.1rem;margin:0 0 10px;color:var(--navy)}
.rf-zahlen{margin:0 0 16px}
.rf-zahlen>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.rf-zahlen>div[hidden]{display:none}
.rf-zahlen dt{color:var(--muted)}
.rf-zahlen dd{margin:0;font-variant-numeric:tabular-nums;color:var(--navy)}
.rf-zahlen .rf-gesamt{border-bottom:0;padding-top:10px;font-weight:800;font-size:1.05rem}
.rf-zahlen .rf-gesamt dt{color:var(--navy)}
.rf-los{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px}
.rf-hinweise{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:.84rem;color:var(--muted)}
.rf-hinweise li{display:flex;gap:8px;align-items:flex-start}
.rf-hinweise .ico{flex:none;width:16px;height:16px;margin-top:2px;color:var(--akzent-600)}
.rf-kontingent b{color:var(--text)}
.rf-kontingent.is-leer{color:#7a1f1f}
.rf-kontingent.is-leer .ico{color:#e5484d}
.rf-meldung-weiter{margin:6px 0 0}
.rf-mehrwert{border-radius:var(--radius);padding:18px;background:var(--grad-brand);color:#fff}
.rf-mehrwert b{display:block;font-family:var(--font-display);font-size:1rem;margin-bottom:6px}
.rf-mehrwert p{margin:0 0 12px;color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.5}
.rf-mehrwert .btn{display:inline-flex;align-items:center;gap:6px}

.rf-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.rf-schritte>div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.rf-schritte span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--akzent-50),var(--akzent-100));color:var(--akzent-600);font-weight:800;margin-bottom:10px}
.rf-schritte h3{font-family:var(--font-display);font-size:1rem;margin:0 0 6px;color:var(--navy)}
.rf-schritte p{margin:0;color:var(--gray-600);font-size:.92rem;line-height:1.55}
.rf-text{max-width:820px}
.rf-text>p{color:var(--gray-600);line-height:1.65}

@media (max-width:980px){
  .rf-grid{grid-template-columns:1fr}
  .rf-seite{position:static}
}
@media (max-width:640px){
  .rf-schritte{grid-template-columns:1fr}
  .rf-bez,.rf-besch{grid-column:span 12}
  .rf-menge,.rf-einheit{grid-column:span 6}
  .rf-preis{grid-column:span 8}.rf-ust{grid-column:span 4}
  .rf-ohne-ust .rf-preis{grid-column:span 12}
  .rf-kopf{padding:14px 16px 0}
}
@media (max-width:900px),(pointer:coarse){
  .rf-weg{width:44px;height:44px}
  .rf-mehr summary{min-height:44px}
  .rf-chip span{min-height:44px}
}
.rf-mehr summary{list-style:none;gap:8px}
.rf-mehr summary::-webkit-details-marker{display:none}
.rf-mehr summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--akzent-50);color:var(--akzent-600);font-weight:800;flex:none}
.rf-mehr[open] summary::before{content:"–"}
/* Grund für 0 % Umsatzsteuer: erscheint, sobald eine Position 0 % hat (ohne Kleinunternehmerregelung). */
.rf-null{margin-top:16px;padding:14px 16px;border:1px solid #f3dfae;background:#fffaf0;border-radius:12px}
.rf-null[data-zu],.rf-null[hidden]{display:none}
.rf-null-kopf{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;color:#7a5200;margin-bottom:10px}
.rf-null-kopf .ico{flex:none;width:18px;height:18px;margin-top:1px}
.rf-null-kopf b{color:#5c3d00}

/* ================= Design 5: Bausteine für alle Seiten (4.10.2026) =================
   Ziel: Jede Unterseite beginnt gleich (Seitenkopf mit Bild), jeder weiterführende Verweis sieht
   gleich aus (Verweiskarte), Links im Text sind als Links erkennbar. Farben nur aus dem Indigo-
   Satz plus sechs ruhigen Tönen für Zeichenkacheln; das letzte Türkis der Bausteine ist ersetzt. */

/* ---------- Töne für Zeichenkacheln ---------- */
.ton-1{--ton-bg:#eef2ff;--ton-fg:#4f46e5}
.ton-2{--ton-bg:#e0f2fe;--ton-fg:#0369a1}
.ton-3{--ton-bg:#fef3c7;--ton-fg:#b45309}
.ton-4{--ton-bg:#ffe4e6;--ton-fg:#be123c}
.ton-5{--ton-bg:#dcfce7;--ton-fg:#15803d}
.ton-6{--ton-bg:#f3e8ff;--ton-fg:#7e22ce}
.ton-7{--ton-bg:#f1f5f9;--ton-fg:#334155}
:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+1){--ton-bg:#eef2ff;--ton-fg:#4f46e5}
:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+2){--ton-bg:#e0f2fe;--ton-fg:#0369a1}
:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+3){--ton-bg:#fef3c7;--ton-fg:#b45309}
:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+4){--ton-bg:#dcfce7;--ton-fg:#15803d}
:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+5){--ton-bg:#ffe4e6;--ton-fg:#be123c}
:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+6){--ton-bg:#f3e8ff;--ton-fg:#7e22ce}
:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+7){--ton-bg:#f1f5f9;--ton-fg:#334155}

/* ---------- Seitenkopf ---------- */
.seitenkopf{position:relative;overflow:hidden;padding:52px 0 48px;border-bottom:1px solid var(--line);
  background:radial-gradient(900px 380px at 88% -10%,#e0e7ff 0%,rgba(224,231,255,0) 70%),radial-gradient(600px 300px at -5% 110%,#f5f3ff 0%,rgba(245,243,255,0) 70%),#fbfbff}
.seitenkopf::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(79,70,229,.10) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%);pointer-events:none}
.sk-innen{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.sk-schmal .sk-innen{grid-template-columns:minmax(0,1fr)}
.sk-text>.breadcrumb{margin-bottom:16px}
.sk-kennzeile{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;background:#fff;border:1px solid var(--akzent-100);
  color:var(--akzent-600);font-size:.8rem;font-weight:700;letter-spacing:.02em;margin-bottom:14px;box-shadow:0 1px 2px rgba(30,27,75,.06)}
.sk-kennzeile .ico{width:14px;height:14px}
.seitenkopf h1{font-size:clamp(1.75rem,1.15rem + 2vw,2.55rem);line-height:1.14;letter-spacing:-.025em;color:var(--navy);margin:0 0 14px;text-wrap:balance}
.sk-lead{font-size:1.08rem;line-height:1.65;color:var(--gray-600);margin:0;max-width:62ch}
.sk-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.sk-meta span{display:inline-flex;align-items:center;gap:6px}
.sk-meta .ico{width:15px;height:15px;color:var(--akzent-600)}
.sk-aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sk-aktionen .btn{min-height:44px}
.sk-buehne{position:relative;display:grid;place-items:center;aspect-ratio:5/4;max-width:420px;margin-inline-start:auto;border-radius:28px;
  background:linear-gradient(150deg,#eef2ff 0%,#e0e7ff 45%,#f5f3ff 100%);border:1px solid #e0e7ff;box-shadow:0 30px 60px -36px rgba(30,27,75,.45)}
.sk-buehne::before,.sk-buehne::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.sk-buehne::before{width:46%;aspect-ratio:1;right:-8%;top:-10%;background:radial-gradient(circle,rgba(99,102,241,.22),transparent 68%)}
.sk-buehne::after{width:30%;aspect-ratio:1;left:6%;bottom:8%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%)}
.illu.sk-illu{position:relative;width:72%;height:auto;margin:0}

/* ---------- Verweiskarten ---------- */
.vk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.vk-raster.vk-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vk{display:flex;align-items:center;gap:14px;min-height:68px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;
  color:inherit;text-decoration:none!important;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.vk-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--ton-bg,#eef2ff);color:var(--ton-fg,#4f46e5)}
.vk-ico .ico{width:21px;height:21px}
.vk-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vk-text small{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--akzent-600)}
.vk-text b{font-size:.97rem;font-weight:650;color:var(--navy);line-height:1.32}
.vk-text>span{font-size:.86rem;color:var(--muted);line-height:1.45}
.vk-pfeil{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f5f6fb;color:var(--akzent-600);transition:transform .15s var(--ease),background-color .15s var(--ease)}
.vk:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.vk:active{transform:scale(.99)}
@media (hover:hover){
  .vk:hover{border-color:#c7d2fe;box-shadow:0 14px 28px -18px rgba(30,27,75,.4);transform:translateY(-2px)}
  .vk:hover .vk-pfeil{background:var(--akzent-600);color:#fff;transform:translateX(2px)}
}
.vk-titel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.vk-titel h2{margin:0;font-size:1.25rem;color:var(--navy)}
.vk-titel a{font-size:.9rem;font-weight:600;white-space:nowrap}
.vk-block{margin-top:44px}

/* ---------- Links im Text: als Link erkennbar ---------- */
.site-main :is(p,li,dd,.faq-body,td) a:not(.btn):not(.vk):not(.pill):not(.fm-chip){color:var(--akzent-600);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(79,70,229,.35);text-decoration-thickness:1.5px;text-underline-offset:3px}
.site-main :is(p,li,dd,.faq-body,td) a:not(.btn):not(.vk):not(.pill):not(.fm-chip):hover{text-decoration-color:currentColor;color:#3730a3}

/* ---------- Kopfleiste: Klappmenü „Funktionen“ ---------- */
.site-nav{position:relative}
.site-menu .nav-mega{position:static;display:block}
.nav-mega>summary{list-style:none;display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--radius-sm);color:var(--gray-600);font-weight:500;cursor:pointer;position:relative;white-space:nowrap;user-select:none}
.nav-mega>summary::-webkit-details-marker{display:none}
.nav-mega>summary>.ico:first-child{display:none}
.nav-mega .mega-pfeil{width:14px;height:14px;transition:transform .2s var(--ease)}
.nav-mega[open] .mega-pfeil{transform:rotate(180deg)}
.nav-mega>summary::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;background:var(--grad-accent);transform:scaleX(0);transition:transform var(--t-normal) var(--ease)}
.nav-mega.is-aktiv>summary,.nav-mega[open]>summary{color:var(--navy)}
.nav-mega.is-aktiv>summary::after,.nav-mega[open]>summary::after{transform:scaleX(1)}
.nav-mega>summary:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.mega{position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%);width:min(780px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:14px;box-shadow:0 28px 60px -24px rgba(30,27,75,.38),0 2px 6px rgba(16,24,40,.05);z-index:40;animation:pxy-auf .18s var(--ease) both}
.mega-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.site-menu .mega a{white-space:normal;color:inherit}
.site-menu .mega a::after{display:none}
.site-menu .mega a .ico{display:inline-flex}
.site-menu .mega-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;transition:background-color .12s}
.mega-item:hover,.mega-item:focus-visible{background:#f6f7fd}
.mega-item .vk-ico{width:40px;height:40px;border-radius:12px}
.mega-item .vk-ico .ico{width:19px;height:19px}
.mega-text{display:flex;flex-direction:column;min-width:0;gap:1px}
.mega-text b{font-size:.93rem;font-weight:650;color:var(--navy)}
.mega-text small{font-size:.8rem;color:var(--muted);line-height:1.35}
.mega-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px;padding:12px 12px 2px;border-top:1px solid var(--line)}
.site-menu .mega-fuss a{padding:6px 0;font-size:.9rem;font-weight:600}
.site-menu .mega-alle{color:var(--akzent-600)}
.site-menu .mega-gratis{display:inline-flex;align-items:center;gap:6px;color:var(--navy)}
@media (max-width:1200px){
  .site-header.open .site-menu>.nav-mega{border-bottom:1px solid var(--line)}
  .site-header.open .nav-mega>summary{gap:12px;padding:12px 8px;color:var(--gray-600)}
  .site-header.open .nav-mega>summary>.ico:first-child{display:inline-flex;width:18px;height:18px;color:var(--akzent-600);flex:none}
  .site-header.open .nav-mega .mega-pfeil{margin-inline-start:auto}
  .site-header.open .nav-mega>summary::after{display:none}
  .site-header.open .mega{position:static;transform:none;width:auto;border:0;box-shadow:none;border-radius:0;padding:0 0 10px;animation:none}
  .site-header.open .mega-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px}
  .site-header.open .mega-item{padding:8px}
  .site-header.open .mega-text small{display:none}
  .site-header.open .mega-fuss{padding:10px 8px 0}
  /* Das offene Menü darf auf dem Telefon nicht über den Bildschirm hinauswachsen. */
  .site-header.open .site-menu{max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain}
}
@media (max-width:520px){.site-header.open .mega-raster{grid-template-columns:minmax(0,1fr)}}
@media (hover:none){.site-menu a::after{display:none}}

/* ---------- Funktionsseite ---------- */
.beispiel-beleg{position:relative;max-width:440px;margin-inline-start:auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;
  box-shadow:0 30px 60px -34px rgba(30,27,75,.45)}
.beispiel-beleg::before{content:"";position:absolute;inset:-14px -14px auto auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%);z-index:-1}
.bb-kopf{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:12px;border-bottom:2px solid var(--akzent-100)}
.bb-kopf .vk-ico{width:40px;height:40px}
.bb-kopf b{display:block;font-size:1rem;color:var(--navy)}
.bb-kopf small{font-size:.78rem;color:var(--muted)}
.beispiel-beleg .dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;font-size:.9rem}
.beispiel-beleg .dl dt{color:var(--muted)}
.beispiel-beleg .dl dd{margin:0;color:var(--text);font-weight:500;text-align:end}
.bb-fuss{margin:14px 0 0;font-size:.78rem;color:var(--muted)}
.vorteile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.vorteile li{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;line-height:1.55;color:var(--gray-600);font-size:.95rem}
.vorteile li .ico{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:#dcfce7;color:#15803d;margin-top:1px}
.block-titel{font-size:1.35rem;color:var(--navy);margin:0 0 6px;letter-spacing:-.01em}
.block-sub{color:var(--muted);margin:0 0 18px}
.abschnitt{padding:52px 0;border-bottom:1px solid var(--line)}
.abschnitt:last-of-type{border-bottom:0}
.abschnitt-alt{background:#f8f9fd}
.schritte-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0;counter-reset:schritt}
.schritte-raster li{counter-increment:schritt;position:relative;padding:54px 18px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--gray-600);line-height:1.6;font-size:.95rem}
.schritte-raster li::before{content:counter(schritt);position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;font-weight:700;font-size:.9rem}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.faq-neu details{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px;transition:border-color .15s,box-shadow .15s}
.faq-neu details[open]{border-color:#c7d2fe;box-shadow:0 10px 24px -18px rgba(30,27,75,.35)}
.faq-neu summary{min-height:52px;padding:14px 16px;align-items:center;gap:12px}
.faq-neu summary::after{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f5f6fb}
.faq-neu .faq-body{line-height:1.65;max-width:72ch}

/* ---------- Abschluss-Band ---------- */
.band{position:relative;overflow:hidden;border-radius:24px;padding:36px 40px;background:var(--grad-brand);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.band::after{content:"";position:absolute;width:380px;height:380px;right:-120px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(165,180,252,.45),transparent 65%);pointer-events:none}
.band>*{position:relative}
.band h2{color:#fff;margin:0 0 8px;font-size:1.45rem}
.band p{margin:0;color:rgba(255,255,255,.82);max-width:60ch;line-height:1.6}
.band p a{color:#fff!important;text-decoration-color:rgba(255,255,255,.6)!important}
.band .sk-aktionen{margin:0;justify-content:flex-end}
.band .btn:not(.btn-primary){background:#fff;color:var(--navy);border-color:#fff}
.band .btn-primary{background:#fff;color:#312e81;border-color:#fff}
.band .btn-primary::after{display:none}

/* ---------- Ratgeber: Übersicht ---------- */
.thema-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.thema{scroll-margin-top:90px;margin-top:40px}
.thema-kopf{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.thema-kopf .vk-ico{width:40px;height:40px}
.thema-kopf h2{margin:0;font-size:1.3rem;color:var(--navy)}
.thema-kopf span.anzahl{margin-inline-start:auto;font-size:.82rem;color:var(--muted);font-weight:600}
.artikel-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.ak{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;color:inherit;text-decoration:none!important;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.ak b{font-size:1.02rem;line-height:1.35;color:var(--navy);font-weight:650}
.ak p{margin:0;font-size:.9rem;line-height:1.55;color:var(--muted)}
.ak-meta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px;font-size:.78rem;color:var(--muted-2)}
.ak-meta .ico{width:14px;height:14px}
.ak-meta span{display:inline-flex;align-items:center;gap:5px}
.ak-meta .weiter{margin-inline-start:auto;color:var(--akzent-600);font-weight:700}
.ak:active{transform:scale(.99)}
.ak:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
@media (hover:hover){.ak:hover{border-color:#c7d2fe;box-shadow:0 16px 30px -20px rgba(30,27,75,.4);transform:translateY(-2px)}}
.ak-hervor{background:linear-gradient(150deg,#eef2ff,#fff 60%);border-color:#c7d2fe}

/* ---------- Ratgeber: Beitrag ---------- */
.artikel-raster{display:grid;grid-template-columns:minmax(0,720px) 300px;gap:64px;justify-content:center;align-items:start;padding:44px 24px 20px}
.artikel{font-size:1.04rem;line-height:1.78;color:#273246;max-width:70ch}
.artikel>h2{font-size:1.45rem;line-height:1.25;color:var(--navy);margin:44px 0 12px;scroll-margin-top:90px;letter-spacing:-.015em}
.artikel>h2:first-child{margin-top:0}
.artikel>p{margin:0 0 16px}
.artikel .checklist{margin:6px 0 20px;padding:16px 18px;border-radius:16px;background:#f8f9fd;border:1px solid var(--line)}
.artikel .checklist li{line-height:1.55;font-size:.97rem}
.artikel-seite{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.inhalt{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff}
.inhalt h2,.inhalt summary{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px;font-weight:700}
.inhalt ol{list-style:none;margin:0;padding:0;counter-reset:inh}
.inhalt li{counter-increment:inh}
.inhalt a{display:flex;gap:10px;padding:7px 8px;border-radius:10px;font-size:.9rem;line-height:1.4;color:var(--gray-600);text-decoration:none!important}
.inhalt a::before{content:counter(inh);flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:#eef2ff;color:var(--akzent-600);font-size:.72rem;font-weight:700;margin-top:1px}
.inhalt a:hover{background:#f6f7fd;color:var(--navy)}
.seite-karte{border-radius:18px;padding:20px;background:var(--grad-brand);color:#fff}
.seite-karte b{display:block;font-size:1.02rem;margin-bottom:6px}
.seite-karte p{margin:0 0 14px;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.82)}
.seite-karte .btn{width:100%;justify-content:center;background:#fff;color:#312e81;border-color:#fff;min-height:44px}
.seite-karte .btn::after{display:none}
.seite-karte .btn+.btn{margin-top:8px;background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.inhalt-mobil{display:none}
.hinweis-recht{display:flex;gap:10px;align-items:flex-start;margin-top:28px;padding:14px 16px;border-radius:14px;background:#f8f9fd;color:var(--muted);font-size:.86rem;line-height:1.55}
.hinweis-recht .ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--akzent-600)}

/* ---------- Fußzeile ---------- */
.site-footer.fuss{margin-top:0;padding:56px 0 22px;border-top:0;background:radial-gradient(800px 300px at 90% 0%,rgba(99,102,241,.22),transparent 70%),linear-gradient(180deg,#141a3a 0%,#0c1024 100%);color:#b9c0d8}
.fuss-oben{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:48px}
.brand-fuss{display:inline-flex;align-items:center;gap:10px;text-decoration:none!important}
.brand-fuss .brand-name{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.brand-fuss .brand-name b{background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.fuss-marke p{margin:14px 0 18px;color:#b9c0d8;line-height:1.6;max-width:36ch}
.fuss-vertrauen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fuss-vertrauen li{display:flex;align-items:center;gap:9px;font-size:.88rem;color:#d4d9ea}
.fuss-vertrauen .ico{flex:none;width:26px;height:26px;padding:6px;border-radius:8px;background:rgba(165,180,252,.14);color:#c7d2fe}
.fuss-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.site-footer.fuss h4{margin:0 0 12px;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:#fff;font-weight:700}
.site-footer.fuss .fuss-spalten a{display:block;padding:5px 0;font-size:.9rem;color:#b9c0d8;text-decoration:none;transition:color .12s}
.site-footer.fuss .fuss-spalten a:hover{color:#fff}
.fuss-unten{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:#8f97b3}
.fuss-hinweis{flex:1 1 280px;color:#8f97b3}
.fuss-unten .lang-fuss{margin-inline-start:auto}
.fuss-unten .lang-fuss>summary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e6e9f5;min-height:40px}
.fuss-unten .lang-fuss>summary:hover{background:rgba(255,255,255,.1);color:#fff}
.fuss-unten .lang-fuss .dd-menu{top:auto;bottom:calc(100% + 8px);right:0;max-height:min(420px,70vh);overflow:auto}
.site-footer.fuss a:focus-visible,.fuss-unten summary:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}

/* ---------- Startseite: Bausteine im neuen Satz ---------- */
a.fm-chip .ico{background:var(--ton-bg,#eef2ff);color:var(--ton-fg,#4f46e5)}
a.fm-chip:nth-of-type(n) .ico{background:var(--ton-bg,#eef2ff);color:var(--ton-fg,#4f46e5)}
.features-more>a.fm-chip:nth-of-type(6n+1){--ton-bg:#eef2ff;--ton-fg:#4f46e5}
.features-more>a.fm-chip:nth-of-type(6n+2){--ton-bg:#e0f2fe;--ton-fg:#0369a1}
.features-more>a.fm-chip:nth-of-type(6n+3){--ton-bg:#fef3c7;--ton-fg:#b45309}
.features-more>a.fm-chip:nth-of-type(6n+4){--ton-bg:#ffe4e6;--ton-fg:#be123c}
.features-more>a.fm-chip:nth-of-type(6n+5){--ton-bg:#dcfce7;--ton-fg:#15803d}
.features-more>a.fm-chip:nth-of-type(6n+6){--ton-bg:#f3e8ff;--ton-fg:#7e22ce}
.rg-thema:nth-child(4n+1){--ton-bg:#eef2ff;--ton-fg:#4f46e5}
.rg-thema:nth-child(4n+2){--ton-bg:#fef3c7;--ton-fg:#b45309}
.rg-thema:nth-child(4n+3){--ton-bg:#e0f2fe;--ton-fg:#0369a1}
.rg-thema:nth-child(4n+4){--ton-bg:#ffe4e6;--ton-fg:#be123c}
@media (hover:hover){a.fm-chip:hover{transform:translateY(-2px)}}
@media (hover:none){a.fm-chip:hover{transform:none}}

/* ---------- Mittlere Breiten und Telefon ---------- */
@media (max-width:980px){
  .artikel-raster{grid-template-columns:minmax(0,1fr);gap:0;padding-top:28px}
  .artikel-seite{display:none}
  .inhalt-mobil{display:block;margin:0 0 26px}
  .inhalt-mobil summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0}
  .inhalt-mobil summary::-webkit-details-marker{display:none}
  .inhalt-mobil summary::after{content:"+";font-size:1.1rem;color:var(--akzent-600)}
  .inhalt-mobil[open] summary::after{content:"–"}
  .fuss-oben{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:900px){
  .sk-innen{grid-template-columns:minmax(0,1fr);gap:28px}
  .seitenkopf{padding:32px 0 30px}
  .sk-buehne{display:none}
  .beispiel-beleg{margin-inline:0;max-width:none}
  .zwei-spalten{grid-template-columns:minmax(0,1fr);gap:24px}
  .schritte-raster{grid-template-columns:minmax(0,1fr)}
  .schritte-raster li{padding:16px 16px 16px 58px}
  .schritte-raster li::before{top:16px}
  .abschnitt{padding:36px 0}
  .band{grid-template-columns:minmax(0,1fr);padding:26px 22px;border-radius:20px}
  .band .sk-aktionen{justify-content:flex-start}
  .fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .site-footer.fuss .fuss-spalten a{padding:9px 0;min-height:40px}
}
@media (max-width:640px){
  .vk-raster.vk-2,.vorteile{grid-template-columns:minmax(0,1fr)}
  .seitenkopf h1{font-size:1.7rem}
  .sk-lead{font-size:1rem}
  .sk-aktionen .btn{flex:1 1 auto;justify-content:center}
  .vk{padding:12px 14px;gap:12px}
  .vk-ico{width:40px;height:40px}
  .artikel{font-size:1rem;line-height:1.72}
  .artikel>h2{font-size:1.28rem;margin-top:34px}
  .fuss-unten{flex-direction:column;align-items:flex-start}
  .fuss-unten .lang-fuss{margin-inline-start:0}
  .fuss-unten .lang-fuss .dd-menu{right:auto;left:0}
}
.sk-unterzeile{font-weight:650;color:var(--navy);font-size:1.1rem;line-height:1.45;margin:0 0 10px;max-width:56ch}

/* ---------- Design 5: Feinschliff Übersicht und Startseite ---------- */
.features>.feature:nth-child(8n+1){--ton-bg:#eef2ff;--ton-fg:#4f46e5}
.features>.feature:nth-child(8n+2){--ton-bg:#e0f2fe;--ton-fg:#0369a1}
.features>.feature:nth-child(8n+3){--ton-bg:#dcfce7;--ton-fg:#15803d}
.features>.feature:nth-child(8n+4){--ton-bg:#ffe4e6;--ton-fg:#be123c}
.features>.feature:nth-child(8n+5){--ton-bg:#fef3c7;--ton-fg:#b45309}
.features>.feature:nth-child(8n+6){--ton-bg:#f3e8ff;--ton-fg:#7e22ce}
.features>.feature:nth-child(8n+7){--ton-bg:#e0f2fe;--ton-fg:#0369a1}
.features>.feature:nth-child(8n+8){--ton-bg:#f1f5f9;--ton-fg:#334155}
.features .feature .fi{background:var(--ton-bg,#eef2ff);color:var(--ton-fg,#4f46e5);box-shadow:none;border-radius:12px;width:44px;height:44px}
.features .feature{border-radius:18px}
.corefeature{border-radius:18px}
@media (hover:hover){.corefeature:hover{border-color:#c7d2fe}}
@media (hover:none){.corefeature:hover,.feature:hover{transform:none}}

/* Telefon: Die sieben Funktionskarten als Wischband statt einer Liste von sieben Bildschirmhöhen.
   Die nächste Karte schaut am Rand hervor – so sieht man, dass es weitergeht. */
@media (max-width:640px){
  .corefeatures{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-24px;padding:4px 24px 14px;scroll-padding-inline:24px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .corefeatures::-webkit-scrollbar{display:none}
  .corefeature{flex:0 0 82%;scroll-snap-align:start}
  .hero-cta .btn,.sk-aktionen .btn{flex:1 1 100%;justify-content:center;min-height:48px}
  .trustbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;padding:14px}
  .trustbar>div{align-items:flex-start;font-size:.82rem;line-height:1.35}
  .features-more{gap:8px}
  .section h2{font-size:1.5rem}
}
/* Grenze des kostenlosen Rechnungserstellers: unter der Positionsliste, vor dem Absenden sichtbar. */
.rf-grenze{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#f5f6fb;border:1px solid var(--line);font-size:.88rem;line-height:1.5;color:var(--gray-600)}
.rf-grenze .ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--akzent-600)}

/* ---------- Newsletter-Anmeldung (Fußzeile, Ratgeber; marketing_newsletter_formular()) ---------- */
.nl-form{margin-top:18px;max-width:380px;position:relative}
.nl-titel{display:block;font-weight:600;margin-bottom:6px}
.nl-zeile{display:flex;gap:6px}
.nl-zeile input{flex:1;min-width:0;min-height:40px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);font:inherit;font-size:1rem}
.nl-hinweis{font-size:.78rem;line-height:1.45;margin:8px 0 0;color:var(--gray-600)}
.fuss .nl-titel{color:#fff}
.fuss .nl-hinweis,.fuss .nl-hinweis a{color:#b9c0d8}
.fuss .nl-zeile input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.fuss .nl-zeile input::placeholder{color:#b9c0d8}
.rf-nl{margin-top:12px}
.fuss-marke .nl-hinweis{max-width:none;margin:8px 0 0;font-size:.78rem;line-height:1.45}
.fuss .nl-form .btn-primary{background:#4f46e5;border-color:#4f46e5;color:#fff}
.fuss .nl-hinweis a{text-decoration:underline}

/* ================= Design 6: Betriebsprogramm (21.10.2026) =================
   Die Website trägt jetzt die Farben der Marke – Navy #0f2a4a und Türkis #2fd4c0 aus dem Zeichen – statt des
   Indigo aus der Anwendung. Die Variablen gelten nur hier (body.chrome-site); die Anwendung bleibt, wie sie ist.
   Dazu vier Bereichsfarben (Geld Navy, Team Grün, Organisation Türkis, Überall Amber), dieselben wie im Kalender
   der Anwendung. Danach: Startseite, Funktionsübersicht, Funktionsseiten, Kopf und Fuß, zuletzt der Dunkelmodus. */
body.chrome-site{
  --tuerkis:#2fd4c0;--tuerkis-600:#0b8177;--tuerkis-700:#0a6b63;--tuerkis-50:#e8faf6;--tuerkis-100:#c9f1ea;
  --akzent:#0b8177;--akzent-600:#0a6b63;--akzent-50:#e8faf6;--akzent-100:#c9f1ea;
  --grad-brand:linear-gradient(135deg,#0b2038 0%,#0f2a4a 50%,#174a7c 100%);
  --grad-accent:linear-gradient(135deg,#2fd4c0,#0b8177);
  --ton-bg:#e9eef5;--ton-fg:#163a66;
  --flaeche-alt:#f5f8fb;--kopf-glanz:rgba(47,212,192,.14);--kopf-glanz2:rgba(15,42,74,.07);--illu-accent:#0b8177;
  --bt-geld:#163a66;--bt-geld-bg:#e9eef5;--bt-team:#0f7a4f;--bt-team-bg:#e3f6ec;
  --bt-organisation:#0a6b63;--bt-organisation-bg:#e3f7f3;--bt-ueberall:#9a5a06;--bt-ueberall-bg:#fdf1dc;
}
.bt-geld{--bt:var(--bt-geld);--bt-bg:var(--bt-geld-bg)}
.bt-team{--bt:var(--bt-team);--bt-bg:var(--bt-team-bg)}
.bt-organisation{--bt:var(--bt-organisation);--bt-bg:var(--bt-organisation-bg)}
.bt-ueberall{--bt:var(--bt-ueberall);--bt-bg:var(--bt-ueberall-bg)}

/* ---------- Markenfarben statt Indigo in den bestehenden Bausteinen ---------- */
.site-main :is(p,li,dd,.faq-body,td) a:not(.btn):not(.vk):not(.pill):not(.fm-chip){text-decoration-color:rgba(11,129,119,.4)}
.site-main :is(p,li,dd,.faq-body,td) a:not(.btn):not(.vk):not(.pill):not(.fm-chip):hover{color:var(--navy)}
.hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--navy)}
.seitenkopf{background:radial-gradient(900px 380px at 88% -10%,var(--kopf-glanz) 0%,transparent 70%),radial-gradient(600px 300px at -5% 110%,var(--kopf-glanz2) 0%,transparent 70%),var(--flaeche-alt)}
.seitenkopf::before{background-image:radial-gradient(rgba(15,42,74,.10) 1px,transparent 1.2px)}
.sk-buehne{background:linear-gradient(150deg,#e9eef5 0%,#e3f7f3 55%,#f5f8fb 100%);border-color:#d3dde9}
.sk-buehne::before{background:radial-gradient(circle,rgba(47,212,192,.25),transparent 68%)}
.beispiel-beleg::before{background:radial-gradient(circle,rgba(47,212,192,.22),transparent 70%)}
.ton-1,:is(.vk-raster,.mega-raster,.fm-reihe)>:nth-child(7n+1){--ton-bg:#e9eef5;--ton-fg:#163a66}
@media (hover:hover){.vk:hover{border-color:var(--tuerkis-100)}}
.vk-pfeil{background:#f1f5f9}
.faq-neu details[open]{border-color:var(--tuerkis-100)}
.faq-neu summary::after{background:#f1f5f9}
.band::after,.cta-box::after{background:radial-gradient(circle,rgba(47,212,192,.32),transparent 65%)}
.band .btn-primary,.seite-karte .btn{color:var(--navy)}
.mega-item:hover,.mega-item:focus-visible,.inhalt a:hover{background:#f1f5f9}
.inhalt a::before{background:var(--tuerkis-50)}
.ak-hervor{background:linear-gradient(150deg,var(--tuerkis-50),#fff 60%);border-color:var(--tuerkis-100)}
@media (hover:hover){.ak:hover{border-color:var(--tuerkis-100)}}
.abschnitt-alt{background:var(--flaeche-alt)}
.section-alt{background:var(--flaeche-alt)}
.feature .fi{box-shadow:none}
.site-footer.fuss{background:radial-gradient(800px 300px at 90% 0%,rgba(47,212,192,.16),transparent 70%),linear-gradient(180deg,#0f2a4a 0%,#0a1a2e 100%);color:#bfcbdb}
.brand-fuss .brand-name b{background-image:linear-gradient(135deg,#7fe7da,#2fd4c0)}
.fuss-vertrauen .ico{background:rgba(47,212,192,.14);color:#7fe7da}
.site-footer.fuss a:focus-visible,.fuss-unten summary:focus-visible{outline-color:#7fe7da}
.fuss .nl-form .btn-primary{background:var(--tuerkis-600);border-color:var(--tuerkis-600)}
/* Sechs Spalten in zwei Reihen: Geld, Team, Organisation – Produkt, Hilfe, Rechtliches. */
.fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 28px}
@media (max-width:900px){.fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Kopfleiste: Klappmenü in vier Bereichen ---------- */
.mega{width:min(880px,calc(100vw - 32px))}
.mega-bereiche{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:6px 14px}
.mega-spalte{display:flex;flex-direction:column;gap:2px;min-width:0}
.site-menu .mega-bereich{padding:6px 10px 8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--akzent-600)}
.site-menu .mega-bereich:hover{color:var(--navy)}
.site-menu .mega-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px}
.mega-item .vk-ico{width:34px;height:34px;border-radius:10px;background:var(--bt-bg,#e9eef5);color:var(--bt,#163a66)}
.mega-item .vk-ico .ico{width:17px;height:17px}
.mega-item b{font-size:.9rem;font-weight:600;color:var(--navy);line-height:1.25}
.mega-spalte:nth-child(1){--bt:var(--bt-geld);--bt-bg:var(--bt-geld-bg)}
.mega-spalte:nth-child(2){--bt:var(--bt-team);--bt-bg:var(--bt-team-bg)}
.mega-spalte:nth-child(3){--bt:var(--bt-organisation);--bt-bg:var(--bt-organisation-bg)}
.mega-spalte:nth-child(4){--bt:var(--bt-ueberall);--bt-bg:var(--bt-ueberall-bg)}
@media (max-width:1200px){
  .site-header.open .mega-bereiche{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
  .site-header.open .mega-item{padding:6px 4px;min-height:44px}
  .site-header.open .mega-bereich{padding:10px 4px 4px;min-height:0}
}
@media (max-width:520px){.site-header.open .mega-bereiche{grid-template-columns:minmax(0,1fr)}}

/* ---------- Startseite: erster Bildschirm ---------- */
.hero-b{padding-block:64px 36px;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px}
.hero-b::before{background:radial-gradient(900px 460px at 82% 0%,var(--kopf-glanz),transparent 70%),radial-gradient(700px 360px at 6% 100%,var(--kopf-glanz2),transparent 70%)}
.hero-b::after{background-image:radial-gradient(rgba(15,42,74,.10) 1px,transparent 1.6px)}
.hero-b h1{font-size:clamp(2rem,1.3rem + 2.4vw,3.05rem);line-height:1.08;letter-spacing:-.035em;margin:0;text-wrap:balance}
.hero-b h1 span{display:block;margin-top:10px;font-size:.58em;line-height:1.25;letter-spacing:-.02em;font-weight:700;color:var(--tuerkis-700)}
.hero-b .lead{font-size:1.14rem;line-height:1.6;margin:20px 0 26px;max-width:560px}
.hero-b .eyebrow{border-color:var(--tuerkis-100);color:var(--tuerkis-700)}
.hero-b .eyebrow .puls,.hero-b .eyebrow .puls::after{background:var(--tuerkis)}
.hero-b .hero-cta .btn-primary{background:var(--grad-brand);border-color:transparent}
.hero-zweit{background:transparent;border-color:var(--line-strong);color:var(--navy);font-weight:600}
.hero-zweit:hover{border-color:var(--navy);background:transparent}
.hero-b .hero-note{max-width:520px}
/* Ein Tag im Betrieb als kleines Fenster der Anwendung. */
.hero-bild{position:relative;padding:22px;border-radius:24px;background:var(--grad-brand);box-shadow:0 34px 70px -28px rgba(15,42,74,.55);transform:rotate(-1deg);animation:pxy-auf .6s var(--ease) .18s both}
.hero-bild::after{content:"";position:absolute;inset:auto -30px -40px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(47,212,192,.35),transparent 68%);pointer-events:none}
.hb-fenster{position:relative;z-index:1;display:grid;grid-template-columns:92px minmax(0,1fr);min-height:300px;border-radius:14px;overflow:hidden;background:#fff;color:#172033;font-size:.8rem}
.hb-leiste{background:#0f2a4a;padding:12px 10px;display:flex;flex-direction:column;gap:8px}
.hb-leiste>i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.22)}
.hb-leiste>i:first-of-type{background:var(--tuerkis)}
.hb-inhalt{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.hb-kopf{display:flex;justify-content:space-between;align-items:baseline}
.hb-kopf b{font-family:var(--font-display);font-size:1.1rem;color:#0f2a4a}
.hb-kopf small{color:#5c6572}
.hb-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hb-kpis>div{border:1px solid #e2e7ee;border-radius:10px;padding:8px 10px}
.hb-kpis small{display:block;font-size:.66rem;color:#5c6572;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-kpis b{font-size:.95rem;font-variant-numeric:tabular-nums;color:#0f2a4a}
.hb-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hb-liste li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#f5f8fb;border-inline-start:3px solid var(--bt)}
.hb-liste .ico{flex:none;width:16px;height:16px;color:var(--bt)}
.hb-liste span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3a4656}
.hb-liste b{color:#0f2a4a}
.hb-liste em{font-style:normal;font-variant-numeric:tabular-nums;color:#5c6572}
.hero-bild .chip-1{top:-14px;left:-18px}
.hero-bild .chip-2{bottom:22px;left:-26px}
.hero-bild .chip-3{top:auto;bottom:-12px;right:28px}
.hero-bild .float-chip .ico{color:var(--tuerkis-600)}
.trust-schmal{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto 8px}
@media (max-width:900px){
  .hero-b{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px 20px}
  .hero-b .lead{font-size:1.02rem;margin:14px 0 20px}
  .trust-schmal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Auf dem Telefon nur Text und Knopf: Der erste Bildschirm soll ohne Scrollen zum Aufruf führen. */
@media (max-width:700px){
  .hero-bild{display:none}
  .hero-b .eyebrow{font-size:.76rem;margin-bottom:12px}
  .hero-b h1 span{font-size:.62em;margin-top:8px}
  .hero-b .hero-note{font-size:.8rem}
}

/* ---------- Startseite: vier Bereiche ---------- */
.bereich-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.bereich{position:relative;display:flex;flex-direction:column;padding:22px 20px 18px;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:hidden}
.bereich::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--bt)}
.bereich-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bereich-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--bt-bg);color:var(--bt)}
.bereich-ico .ico{width:22px;height:22px}
.bereich-kopf small{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--bt)}
.bereich-kopf h3{margin:2px 0 0;font-family:var(--font-display);font-size:1.04rem;line-height:1.3;color:var(--navy)}
.bereich-punkte{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:2px;flex:1}
.bereich-punkte a{display:flex;align-items:flex-start;gap:9px;padding:7px 6px;margin-inline:-6px;border-radius:10px;color:var(--gray-600);font-size:.92rem;line-height:1.45;text-decoration:none!important;min-height:44px}
.bereich-punkte a .ico{flex:none;width:18px;height:18px;margin-top:1px;padding:3px;border-radius:50%;background:var(--bt-bg);color:var(--bt)}
.bereich-punkte a:hover{background:var(--flaeche-alt);color:var(--navy)}
/* Gegen die Linkregel des Fließtexts (.site-main :is(p,li,…) a, Gewicht 0,6,1): Die Punkte sind Text mit Ziel, kein unterstrichener Verweis. */
.site-main .bereich .bereich-punkte li a.bp:not(.btn):not(.vk):not(.pill){color:var(--gray-600);font-weight:500;text-decoration:none}
.site-main .bereich .bereich-punkte li a.bp:not(.btn):not(.vk):not(.pill):hover{color:var(--navy)}
.bereich-mehr{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:.88rem;color:var(--bt);text-decoration:none!important;border-top:1px solid var(--line);padding-top:10px}
.bereich-mehr .ico{transition:transform var(--t-fast) var(--ease)}
.bereich-mehr:hover .ico{transform:translateX(3px)}
@media (max-width:1100px){.bereich-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bereich-raster{grid-template-columns:minmax(0,1fr)}.bereich{padding:18px 16px 14px}.trust-schmal{margin-inline:16px}}

/* ---------- Startseite: drei Abläufe ---------- */
.ablauf-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ablauf-karte{display:flex;flex-direction:column;padding:18px 20px 20px;background:var(--panel);border:1px solid var(--line);border-radius:20px}
.ablauf-karte h3{font-family:var(--font-display);font-size:1.08rem;margin:16px 0 10px}
.ablauf-karte h3 a{color:var(--navy);text-decoration:none!important}
.ablauf-karte h3 a:hover{color:var(--akzent-600)}
.ablauf-karte ol{list-style:none;counter-reset:ab;margin:0;padding:0;display:grid;gap:10px}
.ablauf-karte li{counter-increment:ab;position:relative;padding-inline-start:36px;color:var(--gray-600);font-size:.93rem;line-height:1.5}
.ablauf-karte li::before{content:counter(ab);position:absolute;inset-inline-start:0;top:-1px;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--grad-brand);color:#fff;font-size:.78rem;font-weight:700}
/* Kleine Szenen aus CSS: Beleg mit KI-Marke, Wochenraster, Satz mit Ergebnis. */
.szene{position:relative;height:118px;border-radius:14px;background:var(--flaeche-alt);border:1px solid var(--line);overflow:hidden}
.szene-beleg{display:grid;place-items:center}
.sz-papier{width:96px;padding:12px 12px 10px;background:#fff;border:1px solid #e2e7ee;border-radius:8px;box-shadow:0 10px 22px -12px rgba(15,42,74,.4);transform:rotate(-4deg);display:grid;gap:6px}
.sz-papier i{display:block;height:5px;border-radius:3px;background:#d3dde9}
.sz-papier i:nth-child(2){width:70%}.sz-papier i:nth-child(3){width:85%}
.sz-papier b{font-size:.78rem;color:#0f2a4a;text-align:end;font-variant-numeric:tabular-nums}
.sz-ki{position:absolute;top:16px;inset-inline-end:calc(50% - 86px);display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:99px;background:var(--grad-accent);color:#fff;font-size:.72rem;font-weight:700;box-shadow:0 6px 14px -6px rgba(11,129,119,.7)}
.szene-woche{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:16px 18px;align-content:center}
.szene-woche i{display:block;height:20px;border-radius:6px;background:#fff;border:1px dashed #c9d2de}
.szene-woche .sz-f{background:#d9f3e6;border:0;border-inline-start:3px solid #0f7a4f}
.szene-woche .sz-s{background:#e9eef5;border:0;border-inline-start:3px solid #163a66}
.szene-satz{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px 16px}
.szene-satz p{margin:0;padding:9px 12px;border-radius:12px 12px 12px 4px;background:#fff;border:1px solid #e2e7ee;font-size:.82rem;line-height:1.4;color:#273246;box-shadow:0 6px 16px -12px rgba(15,42,74,.5)}
.szene-satz span{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:#0f2a4a;color:#fff;font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:900px){.ablauf-raster{grid-template-columns:minmax(0,1fr)}.szene{height:104px}}

/* ---------- Startseite: für wen ---------- */
.zielgruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin-top:22px}
.zielgruppe{padding:20px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.zg-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--tuerkis-50);color:var(--tuerkis-700);margin-bottom:12px}
.zielgruppe h3{font-family:var(--font-display);font-size:1rem;margin:0 0 6px;color:var(--navy)}
.zielgruppe p{margin:0;font-size:.9rem;line-height:1.55;color:var(--gray-600)}
@media (max-width:640px){.zielgruppe{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:16px}.zg-ico{grid-row:span 2;margin:0}}

/* ---------- Startseite: Vertrauen (dunkles Band) ---------- */
.vertrauen{background:radial-gradient(800px 320px at 85% 0%,rgba(47,212,192,.16),transparent 70%),linear-gradient(180deg,#0f2a4a,#0b2038);color:#dbe4ef}
.vertrauen h2{color:#fff}
.vertrauen .eyebrow-plain{color:#7fe7da}
.vertrauen-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.vt{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.vt-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(47,212,192,.14);color:#7fe7da}
.vt h3{margin:0 0 4px;font-size:.98rem;color:#fff}
.vt p{margin:0;font-size:.88rem;line-height:1.55;color:#bfcbdb}
@media (max-width:900px){.vertrauen-raster{grid-template-columns:minmax(0,1fr)}}

/* ---------- Startseite: Handy & App ---------- */
.app-teil{padding-block:48px 24px}
@media (prefers-reduced-motion:reduce){.hero-bild{animation:none}.bereich-mehr .ico{transition:none}}
.app-band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;padding:30px 36px;border-radius:24px;background:var(--panel);border:1px solid var(--line)}
.app-band h2{margin:0 0 8px}
.app-band p{margin:0 0 12px;color:var(--gray-600);line-height:1.6;max-width:62ch}
.app-band .btn{min-height:44px}
.app-sprachen{display:flex;gap:8px;align-items:flex-start;font-size:.86rem}
.app-sprachen .ico{flex:none;margin-top:3px;color:var(--tuerkis-600)}
.app-handy,.bb-handy{width:150px;padding:9px;border-radius:26px;background:#0f2a4a;box-shadow:0 24px 44px -24px rgba(15,42,74,.7)}
.ah-bild,.bb-bild{display:flex;flex-direction:column;gap:7px;min-height:220px;padding:16px 10px 12px;border-radius:19px;background:#fff;color:#172033;font-size:.7rem}
.ah-bild b,.bb-bild b{font-family:var(--font-display);font-size:.95rem;color:#0f2a4a}
.ah-bild span,.bb-bild span{padding:7px 8px;border-radius:8px;background:#f5f8fb;border-inline-start:3px solid #0f7a4f}
.ah-bild span+span,.bb-bild span+span{border-inline-start-color:#0b8177}
.ah-bild i,.bb-bild i{margin-top:auto;padding:9px;border-radius:10px;background:var(--grad-accent);color:#fff;font-style:normal;font-weight:700;text-align:center}
@media (max-width:640px){.app-band{grid-template-columns:minmax(0,1fr);padding:22px 18px;gap:20px}.app-handy{display:none}}

/* ---------- Startseite: häufige Fragen ---------- */
.faq-start{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:40px;align-items:start}
.faq-start .sub a{font-weight:600}
@media (max-width:900px){.faq-start{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ---------- Startseite: kostenloser Rechnungsersteller (nur Deutsch) ---------- */
.frei-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 26px;margin-bottom:48px;border-radius:20px;background:var(--tuerkis-50);border:1px solid var(--tuerkis-100)}
.frei-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff;color:var(--tuerkis-700)}
.frei-band h2{font-size:1.25rem;margin:0 0 4px}
.frei-band p{margin:0;color:var(--gray-600);line-height:1.55}
.frei-band .btn{min-height:44px}
@media (max-width:760px){.frei-band{grid-template-columns:minmax(0,1fr);padding:20px 18px}.frei-ico{display:none}.frei-band .btn{justify-content:center}}

/* ---------- Funktionsübersicht: Sprungleiste und Bereiche ---------- */
.bereich-sprung{display:flex;flex-wrap:wrap;gap:8px;padding-block:22px 0}
.bs-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 10px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--navy);font-weight:600;text-decoration:none!important}
.bs-chip .ico{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--bt-bg);color:var(--bt)}
.bs-chip:hover{border-color:var(--bt)}
.bereich-abschnitt{scroll-margin-top:70px}
.ba-kopf{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.ba-kopf .bereich-ico{width:54px;height:54px;border-radius:16px}
.ba-label{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--bt)}
.ba-kopf h2{margin:2px 0 6px;font-size:1.6rem;color:var(--navy);letter-spacing:-.02em;font-family:var(--font-display)}
.ba-kopf p{margin:0;color:var(--gray-600);max-width:70ch;line-height:1.6}
.ba-gruppen{margin-top:22px}
.ba-gruppen .feature ul{padding-inline-start:18px;margin:8px 0 0;color:var(--gray-600);font-size:.92rem}
.ba-gruppen .feature li{margin-bottom:4px}
.ba-gruppen .feature h3 a{color:var(--navy);text-decoration:none;display:inline;margin:0}
.ba-gruppen .feature h3 a:hover{color:var(--akzent-600)}
.bereich-abschnitt .vk-ico,.bereich-abschnitt .features .feature .fi{background:var(--bt-bg);color:var(--bt)}
.bereich-abschnitt .feature{display:flex;flex-direction:column}
.bereich-abschnitt .feature ul{flex:1}
.ba-kurz{margin:0 0 4px!important;font-weight:600;color:var(--navy)!important}
.ba-mehr{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-weight:600;font-size:.88rem;color:var(--bt)!important;text-decoration:none!important}

/* ---------- Funktionsseite: Problem, Lösung, drei Vorteile ---------- */
.pl-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pl-karte{padding:22px 24px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.pl-karte p{margin:8px 0 0;line-height:1.65;color:var(--gray-600)}
.pl-marke{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#9a5a06}
.pl-marke::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pl-loesung{border-color:var(--tuerkis-100);background:linear-gradient(160deg,var(--tuerkis-50),var(--panel) 70%)}
.pl-loesung .pl-marke{color:var(--tuerkis-700)}
.pl-loesung p{color:var(--text)}
.drei-vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.drei-vorteile>div{padding:20px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.dv-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--grad-accent);color:#fff;margin-bottom:12px}
.dv-ico .ico{width:18px;height:18px}
.drei-vorteile h3{font-family:var(--font-display);font-size:1rem;margin:0 0 6px;color:var(--navy)}
.drei-vorteile p{margin:0;font-size:.92rem;line-height:1.55;color:var(--gray-600)}
.vorteile li .ico{background:var(--tuerkis-50);color:var(--tuerkis-700)}
@media (max-width:900px){.pl-raster,.drei-vorteile{grid-template-columns:minmax(0,1fr)}}

/* ---------- Funktionsseite: Beispiele der neuen Seiten ---------- */
.bb-woche{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:5px;font-size:.74rem;align-items:center}
.bb-woche b{text-align:center;color:var(--muted);font-weight:600}
.bb-wer{padding-inline-end:6px;color:var(--text);font-weight:600}
.bb-s{display:block;padding:6px 2px;border-radius:6px;text-align:center;font-style:normal;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-s-f{background:#d9f3e6;color:#0f5c3c}
.bb-s-s{background:#e9eef5;color:#163a66}
.bb-s-u{background:#fdf1dc;color:#7a4a05}
.bb-s-leer{border:1px dashed var(--line-strong);min-height:26px}
.bb-liste,.bb-stopps{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.88rem}
.bb-liste li{display:grid;grid-template-columns:auto 72px minmax(0,1fr);gap:10px;align-items:center}
.bb-liste span{color:var(--muted);font-variant-numeric:tabular-nums}
.bb-liste b{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-p{width:10px;height:10px;border-radius:50%}
.bb-p-geld{background:#163a66}.bb-p-team{background:#0f7a4f}.bb-p-termin{background:#0b8177}.bb-p-unterwegs{background:#c47d06}
.bb-stopps{counter-reset:st;margin-bottom:12px}
.bb-stopps li{counter-increment:st;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:8px 10px 8px 40px;border-radius:10px;background:var(--flaeche-alt)}
.bb-stopps li::before{content:counter(st);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e2e7ee;color:#3a4656;font-size:.74rem;font-weight:700}
.bb-stopps li.on{outline:2px solid var(--tuerkis)}
.bb-stopps li.on::before{background:var(--tuerkis-600);color:#fff}
.bb-stopps b{color:var(--text)}
.bb-stopps span{color:var(--muted);font-size:.8rem}
.bb-stopps .ico{margin-inline-start:auto;color:#0f7a4f}
.bb-ok{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:9px 12px;border-radius:10px;background:#e3f6ec;color:#0f5c3c;font-size:.86rem;font-weight:600}
.bb-ki{background:var(--tuerkis-50);color:var(--tuerkis-700)}
.bb-ki span{margin-inline-start:auto;padding:3px 10px;border-radius:99px;background:var(--tuerkis-600);color:#fff;font-size:.78rem}
.bb-satz{margin:0 0 12px;padding:10px 12px;border-radius:12px 12px 12px 4px;background:var(--flaeche-alt);border:1px solid var(--line);font-size:.9rem;line-height:1.45}
.bb-handy{margin:0 auto 4px}

/* ---------- Scroll-Einblenden: nur mit Bewegung (app.js setzt will-reveal nicht bei reduzierter Bewegung) ---------- */
.reveal.will-reveal{transition-duration:.5s}

/* ================= Dunkelmodus der Website =================
   Folgt der Einstellung des Systems. Flächen und Schrift über die Variablen; was hart auf Weiß stand, wird
   hier umgestellt. Papier bleibt Papier: Beispielbelege, Rechnungsausschnitte und das Fenster im ersten
   Bildschirm behalten ihre hellen Farben, wie eine gedruckte Rechnung auch auf dunklem Tisch weiß ist. */
@media (prefers-color-scheme:dark){
  html:has(>body.chrome-site){color-scheme:dark}
  body.chrome-site{
    --bg:#0a1424;--panel:#111e31;--line:#22324a;--line-strong:#33476a;--text:#e6ecf4;--muted:#a3b2c6;--muted-2:#8b9bb0;
    --navy:#e3ebf6;--navy-700:#b9cde6;--navy-50:#18263b;--navy-100:#22324a;--gray-50:#18263b;--gray-600:#b7c3d3;
    --akzent:#2fd4c0;--akzent-600:#5fe0d0;--akzent-50:#10302f;--akzent-100:#1d4a47;
    --tuerkis-600:#2fbfae;--tuerkis-700:#6fe3d5;--tuerkis-50:#0f2b2c;--tuerkis-100:#1d4a47;
    --green-50:#12301f;--red-50:#3a1c1c;--amber-50:#3a2c12;
    --st-offen:#9cc2ff;--st-offen-bg:#1b2740;--st-ok:#8fe0b5;--st-ok-bg:#12301f;--st-warn:#f3c777;--st-warn-bg:#3a2c12;--st-err:#f3a7a7;--st-err-bg:#3a1c1c;--st-neutral:#b4bfcd;--st-neutral-bg:#1b2537;
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 3px rgba(0,0,0,.45);--shadow-lg:0 12px 32px rgba(0,0,0,.55);
    --flaeche-alt:#0d1a2b;--kopf-glanz:rgba(47,212,192,.10);--kopf-glanz2:rgba(80,120,180,.10);
    --illu-paper:#1b2a40;--illu-line:#3a4d6b;--illu-soft:#22324a;--illu-ground:rgba(0,0,0,.35);
    --bt-geld:#9cc2ff;--bt-geld-bg:#18273f;--bt-team:#7fd8a8;--bt-team-bg:#11301f;--bt-organisation:#6fe3d5;--bt-organisation-bg:#0f2b2c;--bt-ueberall:#f0c069;--bt-ueberall-bg:#33270f;
    --ton-bg:#18273f;--ton-fg:#9cc2ff;
    background:var(--bg);color:var(--text)
  }
  /* Kopfleiste, Klappmenüs, Sprachwahl */
  .site-header,body.gescrollt .site-header{background:rgba(10,20,36,.9);border-bottom-color:var(--line)}
  :is(.brand-site,.eyebrow) svg>path:first-of-type{fill:#8fc4ff}
  :is(.brand-site,.eyebrow) svg>path:nth-of-type(2){stroke:#12406e;opacity:.55}
  .site-header.open .site-menu,.mega,.dd-menu{background:var(--panel);border-color:var(--line-strong)}
  .mega-item:hover,.mega-item:focus-visible,.inhalt a:hover,.dd-item:hover{background:#18263b}
  .dd-item.is-current{background:var(--akzent-50)}
  .site-header .site-menu-konto .btn:not(.btn-primary){background:var(--panel);color:var(--text);border-color:var(--line-strong)}
  /* Schaltflächen: Navy als Fläche bleibt dunkel genug für weiße Schrift */
  .btn{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
  .btn:hover{background:#18263b}
  .btn-primary,.btn-primary:hover,.consent-btn,.consent-btn:hover,.skip,.pill.active{background:#1d4f86;border-color:#1d4f86;color:#fff}
  .site-cta .btn-primary,.hero-b .hero-cta .btn-primary,.site-header .site-menu-konto .btn-primary{background:linear-gradient(135deg,#1d4f86,#0b8177);color:#fff}
  .btn-accent,.btn-accent:hover{background:#0b8177;border-color:#0b8177;color:#fff}
  .btn-ghost{background:transparent;border-color:transparent;color:var(--gray-600)}
  .btn-ghost:hover{background:#18263b;color:var(--text)}
  .hero-zweit{background:transparent;border-color:var(--line-strong);color:var(--text)}
  .band .btn:not(.btn-primary),.band .btn-primary,.seite-karte .btn,.cta-box .btn-lg[style]{background:#fff!important;color:#0f2a4a!important;border-color:#fff!important}
  /* Felder und Tabellen */
  :is(input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],input[type=time],select,textarea){background:#0c1828;color:var(--text);border-color:var(--line-strong)}
  input[readonly],.input-group .addon{background:#142236;color:var(--muted)}
  .table th,.table tfoot td,.compare th{background:#142236;color:var(--muted)}
  .compare,.plan,.explain,.card{background:var(--panel);border-color:var(--line)}
  .flash-success{background:#12301f;color:#a8e6c4;border-color:#1f4d33}
  .flash-error{background:#3a1c1c;color:#f3b4b4;border-color:#5a2a2a}
  .flash-info,.banner-info{background:var(--navy-50);color:#c7d8f2;border-color:var(--navy-100)}
  .notice,.banner-warn,.placeholder,.placeholder-box,.rf-null{background:#3a2c12;border-color:#5a4520;color:#f3d9a4}
  .rf-null-kopf,.rf-null-kopf b{color:#f3d9a4}
  .rf-meldung{background:#3a1c1c;border-color:#5a2a2a;color:#f3b4b4}
  .rf-meldung a{color:#f3b4b4}
  /* Flächen der Website, die auf Weiß standen */
  .eyebrow-plain{color:var(--tuerkis-700)}
  .eyebrow,.sk-kennzeile{background:var(--panel);border-color:var(--akzent-100);color:var(--akzent-600)}
  .feature,.vk,.faq details,.faq-neu details,.vorteile li,.schritte-raster li,.beispiel-beleg,.rg-thema,.ak,.inhalt,a.fm-chip,.highlights>div,.highlights>a,.price-toggle,.rf-schritte>div,.rf-chip span,.trustbar,.help-search,.help-card,.corefeature,.flow-step,.flow-i .flow-step,.try-sheet{border-color:var(--line)}
  .feature,.vk,.faq details,.faq-neu details,.vorteile li,.schritte-raster li,.beispiel-beleg,.rg-thema,.ak,.inhalt,a.fm-chip,.highlights>div,.highlights>a,.price-toggle,.rf-schritte>div,.rf-chip span{background:var(--panel)}
  .rf-pos{background:#0e1a2c}
  .flow-step,.rf-grenze{background:var(--panel);border-color:var(--line)}
  .rf-grenze{color:var(--gray-600)}
  .rf-pos.has-error{background:#2a1618;border-color:#5a2a2a}
  .rf-weg:hover{background:#3a1c1c}
  .vk-pfeil,.faq-neu summary::after{background:#18263b}
  .kb-marke,.frei-ico{background:var(--panel)}
  .seitenkopf{border-bottom-color:var(--line)}
  .seitenkopf::before,.hero-b::after{background-image:radial-gradient(rgba(160,190,230,.10) 1px,transparent 1.4px)}
  .sk-buehne{background:linear-gradient(150deg,#13223a,#0f2b2c 60%,#0d1a2b);border-color:var(--line)}
  .ak-hervor{background:linear-gradient(150deg,var(--tuerkis-50),var(--panel) 60%)}
  .ku-beleg::before{opacity:.9}
  .hb-fenster{box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  .hero-bild{background:linear-gradient(135deg,#13294a,#0f2a4a 50%,#0b4f55)}
  .mock-side{background:#1d4f86}
  .flow-step::before{background:#1d4f86}
  .price-toggle a.active{background:#1d4f86;color:#fff}
  .hero h1,.hero-b h1{color:var(--navy)}
  .vertrauen{background:radial-gradient(800px 320px at 85% 0%,rgba(47,212,192,.12),transparent 70%),linear-gradient(180deg,#0d1d33,#081322);border-block:1px solid var(--line)}
  .pl-marke{color:#f0c069}
  .bb-ok{background:#12301f;color:#a8e6c4}
  .bb-ki{background:var(--tuerkis-50);color:var(--tuerkis-700)}
  .bb-s-f{background:#12301f;color:#a8e6c4}.bb-s-s{background:#18273f;color:#c7d8f2}.bb-s-u{background:#33270f;color:#f3d9a4}
  .bb-stopps li::before{background:#22324a;color:var(--text)}
  .szene-woche i{background:transparent;border-color:var(--line-strong)}
  .szene-woche .sz-f{background:#12301f;border-color:#7fd8a8}.szene-woche .sz-s{background:#18273f;border-color:#9cc2ff}
  .szene-satz span{background:#1d4f86}
  .app-handy,.bb-handy{background:#1d3456;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  .frei-band{background:var(--tuerkis-50);border-color:var(--tuerkis-100)}
  .glossar dt{color:var(--navy)}
  .artikel{color:#d4dce8}
  .artikel .checklist,.hinweis-recht{background:#0e1a2c;border-color:var(--line)}
  .rg-thema a .ico{color:var(--muted-2)}
  .rg-thema a:hover{background:#18263b}
  /* Papier bleibt hell: Beispielrechnung im Mitmach-Kasten, Rechnungsausschnitt § 19, Fenster und Handy der Startseite,
     Kundenlink-Beleg. Die Variablen gelten darin wieder in ihrer hellen Fassung. */
  :is(.try-sheet,.ku-beleg,.hb-fenster,.ah-bild,.bb-bild,.sz-papier,.szene-satz p,.preview .mock){
    --bg:#f3f6fb;--panel:#fff;--line:#e2e7ee;--line-strong:#c9d2de;--text:#172033;--muted:#55616f;--muted-2:#66727f;
    --navy:#0f2a4a;--navy-700:#163a66;--gray-600:#5c6572;--akzent-50:#e8faf6;--akzent-100:#c9f1ea;--akzent-600:#0a6b63;
    --bt-geld:#163a66;--bt-team:#0f7a4f;--bt-organisation:#0a6b63;--bt-ueberall:#9a5a06;
    color:#172033;background-color:#fff
  }
  .szene-satz p{border-color:#e2e7ee}
  .ah-bild span,.bb-bild span{background:#f5f8fb}
}
@media (prefers-color-scheme:dark) and (max-width:1200px){
  .site-header.open .site-menu{background:var(--panel);border-bottom-color:var(--line)}
}
/* Tippziele (21.10.2026): Überschriften-Verweise und „Alle Funktionen“ waren 20 Pixel hoch. */
@media (max-width:900px),(pointer:coarse){
  .ablauf-karte h3 a,.ba-gruppen .feature h3 a,.vk-titel a{display:inline-flex;align-items:center;min-height:44px}
  .ablauf-karte h3{margin-block:8px 4px}
}
/* Klappmenü „Funktionen“: Die Einblendung endete mit transform:none und hob damit translateX(-50%) auf – das
   Menü stand um seine halbe Breite nach rechts versetzt und ragte bei 1366 Pixeln 200 Pixel aus dem Bild.
   Eigene Keyframes behalten die Verschiebung; bei reduzierter Bewegung gar keine Einblendung. */
@keyframes pxy-mega{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}
.mega{animation-name:pxy-mega}
@media (max-width:1200px){.site-header.open .mega{animation:none;transform:none}}
@media (prefers-reduced-motion:reduce){.mega{animation:none}}
/* Die Vertrauensleiste unter dem ersten Bildschirm stand unter 1180 Pixeln Breite randlos an den Kanten. */
@media (max-width:1180px){.trust-schmal{margin-inline:16px}}
/* Pakete & Preise auf der Startseite (nur mit „Preise zeigen“) und die Knöpfe im Handy-Abschnitt (21.10.2026). */
.preis-teil{padding-block:8px 40px}
.preis-band{margin-bottom:0}
.app-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.app-knoepfe .btn{min-height:44px}
@media (max-width:640px){.app-knoepfe .btn{flex:1 1 100%;justify-content:center}}