:root{
  --acc:#3b6cf6; --acc2:#7aa5ff; --acc-dark:#2553e0; --zap:#ffd43b;
  --ink:#141b2e; --dim:#5b6478; --line:#e7eaf2;
  --bg:#f6f7fb; --card:#ffffff;
  --navy:#070c1b; --navy2:#0d1530;
  --ok:#16a06d;
  --sheet-acc:#3b6cf6;
  --r:16px;
  --w-wide:1240px; --w-narrow:780px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 6px 24px -6px rgba(16,24,40,.12);
  --shadow-lg:0 24px 60px -18px rgba(7,12,27,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;font-family:var(--font);
  color:var(--ink);background:var(--bg);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acc)}
::selection{background:var(--acc);color:#fff}
.wrap{max-width:var(--w-wide);margin:0 auto;padding:0 22px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.hero{position:relative;color:var(--ink);padding:76px 0 84px;overflow:hidden;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(59,108,246,.10), transparent 60%),
    radial-gradient(760px 460px at 95% 5%, rgba(122,165,255,.16), transparent 60%),
    linear-gradient(180deg,#fbfcff 0%,#eef2fa 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(20,27,46,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,27,46,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 30%, #000 30%, transparent 100%);
  mask-image:radial-gradient(75% 65% at 50% 30%, #000 30%, transparent 100%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#0d7a52;
  background:#e9f8f1;border:1px solid #cdeede;padding:7px 14px;border-radius:99px;margin-bottom:22px;
  letter-spacing:.01em}
.hero h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;margin:0 0 20px;
  letter-spacing:-.035em;font-weight:800}
.hero h1 .grad{background:linear-gradient(92deg,var(--acc-dark) 0%,var(--acc) 55%,#7aa5ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:var(--dim);font-size:clamp(16px,1.9vw,19px);max-width:560px;margin:0 0 30px;line-height:1.6}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hero-stats{display:flex;gap:38px;flex-wrap:wrap}
.hero-stats b{display:block;font-size:24px;letter-spacing:-.02em}
.hero-stats span{font-size:13px;color:var(--dim)}

.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;inset:-12% -8%;
  background:radial-gradient(60% 60% at 50% 45%, rgba(59,108,246,.35), transparent 70%);
  filter:blur(10px)}
.mock{position:relative;background:#fff;color:var(--ink);border-radius:18px;
  padding:26px 26px 22px;box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08);
  max-width:400px;margin-left:auto}
.mock-accbar{position:absolute;top:0;left:0;right:0;height:6px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--acc),var(--acc2))}
.mock-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px}
.mock-name{font-weight:800;font-size:16px;letter-spacing:-.01em}
.mock-chip{font-size:11.5px;font-weight:700;color:var(--acc);background:#eef3ff;
  border:1px solid #dbe6ff;padding:4px 10px;border-radius:99px}
.sk{height:9px;border-radius:5px;background:#edf0f6;margin-bottom:8px}
.sk.w60{width:60%}.sk.w40{width:40%;margin-bottom:18px}
.mock-table{border-top:1px solid #eef0f5;margin-top:4px}
.mock-tr{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;
  border-bottom:1px solid #f1f3f8;color:#3c4661}
.mock-tr.total{font-weight:800;font-size:15.5px;color:var(--ink);
  border-bottom:none;border-top:2px solid var(--acc);margin-top:2px;padding-top:10px}
.mock-ok{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--ok);
  background:#e9f8f1;border:1px solid #c9ecdc;border-radius:9px;padding:8px 12px;text-align:center}

.app{padding-top:44px;padding-bottom:10px}
.toolbar{position:sticky;top:62px;z-index:30;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-bottom:20px;padding:10px 12px;background:rgba(246,247,251,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.toolbar .spacer{flex:1}
.toolbar .btn{padding:8px 13px;font-size:14px}
.toolbar{gap:8px}
.grid{display:grid;grid-template-columns:minmax(360px,460px) 1fr;gap:28px;align-items:start}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:16px;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, border-color .2s ease}
.card:hover{border-color:#d7ddeb;box-shadow:var(--shadow-md)}
.forms > :last-child{margin-bottom:0}

.card > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:15px 20px;border-radius:var(--r);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.card > summary::-webkit-details-marker{display:none}
.card > summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.card > summary > h3{flex:1;min-width:0;margin:0}
.card > summary .chev{width:16px;height:16px;flex:0 0 auto;color:#9aa3b8;
  transition:transform .3s cubic-bezier(.22,.9,.3,1), color .15s}
.card > summary:hover .chev{color:var(--acc)}
.card[open]:not([data-want]) > summary .chev,
.card[data-want="open"] > summary .chev{transform:rotate(180deg);color:var(--acc)}
.card-body{padding:0}
.card-body.animating{overflow:hidden}
.card-inner{padding:0 20px 16px}
.card-inner > :first-child{margin-top:0}
.card-t{flex:1;min-width:0}
.card-sum{display:block;margin-top:1px;font-size:12.5px;font-weight:500;
  color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sum:empty{display:none}
.card-warn{display:block;margin-top:2px;font-size:12px;font-weight:700;color:#a35a00}
.card-warn:empty{display:none}
.card-meta{display:block;overflow:hidden}
.card[data-want="open"] .card-meta{height:0}
.card h3{font-size:15px;letter-spacing:-.005em;display:flex;align-items:center;gap:9px}
.card h3 .ci{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:linear-gradient(135deg,#eef3ff,#e2ebff);
  border:1px solid #dde7fb;border-radius:9px}
.card .hint{font-size:12.5px;color:var(--dim);margin:2px 0 14px}
.card:has(.cl){border-color:#cfdff9;background:linear-gradient(180deg,#fbfdff,#f5f9ff)}
.frow{display:flex;gap:10px}
.frow > *{flex:1;min-width:0}
label.f{display:block;margin-bottom:11px;font-size:12.5px;font-weight:600;color:var(--dim)}
label.f span{display:block;margin-bottom:5px}
input[type=text],input[type=date],input[type=email],select,textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  border:1px solid #d8deea;border-radius:10px;padding:9px 11px;outline:none;
  transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3.5px rgba(59,108,246,.14)}
textarea{resize:vertical;min-height:64px}

/* Kundenstamm-Vorschläge */
.ac{position:relative;margin-bottom:11px}
.ac > label.f{margin-bottom:0}
.ac-list{position:absolute;z-index:45;top:calc(100% + 5px);left:0;right:0;
  margin:0;padding:5px;list-style:none;max-height:262px;overflow-y:auto;
  border-radius:13px;background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 48px -16px rgba(7,12,27,.34),0 2px 8px rgba(16,24,40,.08)}
.ac-list[hidden]{display:none}
.ac-row{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:9px;cursor:pointer}
.ac-row.on,.ac-row:hover{background:#eef3ff}
.ac-txt{flex:1;min-width:0}
.ac-name{display:block;font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-name mark{background:none;color:var(--acc);font-weight:800}
.ac-adr{display:block;font-size:12px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-del{flex:0 0 auto;width:24px;height:24px;padding:0;border:none;border-radius:7px;
  background:none;color:var(--dim);font-size:17px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .12s,background .12s,color .12s}
.ac-row:hover .ac-del,.ac-row.on .ac-del{opacity:.65}
.ac-del:hover{opacity:1;background:#fee2e2;color:#b91c1c}
@media (hover:none){.ac-del{opacity:.65}}

.check{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;cursor:pointer;margin-bottom:10px}
.card-inner > .check:first-child{margin-top:0;margin-bottom:16px}
.check input{width:17px;height:17px;accent-color:var(--acc)}

/* Zustimmung zum sofortigen Beginn, direkt ueber jedem Knopf, der zu Stripe
   fuehrt. Ohne Haken ist der Knopf sichtbar stumpf und nicht ausloesbar; ein
   Klick darauf laesst stattdessen die Zeile blinken, damit klar wird, woran es
   haengt. Alle Haken auf der Seite meinen dasselbe. */
/* Zeile und Knopf teilen sich einen Block und damit dieselbe Breite. Vorher
   hatte jedes eine eigene: der Knopf so breit wie sein Text, die Zeile 52ch,
   und in vier verschiedenen Umgebungen lief das jedes Mal anders auseinander. */
.kauf-block{max-width:400px;margin:0 auto;text-align:left}
.kauf-block.wide{max-width:460px}
/* Im Modal und im Aufklapper laeuft alles andere ueber die volle Breite –
   ein eingerueckter Block faellt dort als Fehler auf, nicht als Absicht. */
.modal .kauf-block,.pro-teaser .kauf-block{max-width:none}
/* Dreiteilig, damit die Regel spaeter stehende Ausnahmen wie
   `.pro-teaser .btn{margin-top:2px}` sicher schlaegt – sonst haette der
   Aufklapper im Generator 14px Abstand und alle anderen 12px. */
.kauf-block .kauf-gate .btn{width:100%;margin:0}
.widerruf{display:flex;align-items:flex-start;gap:10px;text-align:left;
  margin:0 0 12px;font-size:13.5px;line-height:1.5;cursor:pointer;color:var(--dim)}
.widerruf input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--acc);cursor:pointer}
.pro-box .widerruf{color:#ddd5f6}
.pro-box .widerruf input{accent-color:#7ef2c0}
.kauf-gate{display:block}
.kauf-gate .btn[disabled],.kauf-gate .btn[aria-disabled="true"]{
  opacity:.45;filter:saturate(.4);box-shadow:none;transform:none;pointer-events:none}
.widerruf.blink{animation:wd-blink .8s ease}
@keyframes wd-blink{0%,100%{opacity:1}30%,70%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.widerruf.blink{animation:none;outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}}

.item-row{position:relative;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;
  background:linear-gradient(180deg,#fbfcfe,#f7f9fc)}
.item-row .frow{margin-top:8px}
.item-row .rm{position:absolute;top:-9px;right:-9px;width:26px;height:26px;padding:0;
  display:grid;place-items:center;background:#fdeeec;border:1px solid #f2c7c1;border-radius:50%;
  color:#c0392b;cursor:pointer;font-size:13px;line-height:1;
  box-shadow:0 1px 3px rgba(16,24,40,.10);transition:color .15s, border-color .15s, background .15s}
.item-row .rm:hover{background:#fadbd7;border-color:#e8a89f;color:#a93226}
.item-row .rm:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mini{font-size:11.5px;color:var(--dim);display:block;margin-bottom:3px;font-weight:600}
.netnote{display:block;margin-top:7px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.netnote b{font-weight:700;color:var(--ink)}
.netnote.warn{color:#a35a00}
.netnote.warn b{color:#a35a00}

.cl{list-style:none;margin:0;padding:0;font-size:13.5px}
.cl li{display:flex;gap:9px;align-items:center;padding:4px 0;color:var(--dim);transition:color .2s}
.cl li::before{content:"○";color:#c8ccd6;font-size:15px;width:16px}
.cl li.ok{color:var(--ink)}
.cl li.ok::before{content:"●";color:var(--ok)}

.locked{position:relative;opacity:.65}
.locked input{pointer-events:none}
.locked::after{content:"KOMPLETT";position:absolute;top:-2px;right:0;font-size:9.5px;font-weight:800;color:#6d28d9;
  letter-spacing:.02em;background:#f3edff;border:1px solid #e2d5fb;border-radius:6px;padding:1px 6px}

.opt-row{padding:13px 0;border-top:1px solid var(--line)}
.card-inner > .opt-row:first-child{border-top:none;padding-top:2px}
.opt-row:last-child{padding-bottom:2px}
.opt-lab,.opt-row label.f span{display:block;margin:0 0 8px;
  font-size:12.5px;font-weight:600;color:var(--dim)}
.opt-row label.f,.opt-row .check{margin:0}
.opt-row .seg,.opt-row .swatches,.opt-row .upl{margin-bottom:0}
.opt-row .logo-prev{margin:10px 0 0}
.card .opt-row .hint{margin:7px 0 0}
.card .opt-row .check ~ .hint{margin-left:28px}
.card .hint.warn{color:#a35a00;font-weight:600}
.opt-row.locked{opacity:.7}
.opt-row.locked::after{display:none}
.card h3 .mini-pro{margin-left:auto}

.sheet-outer{position:sticky;top:128px}
@media (max-width:980px){.sheet-outer{position:static}}
/* Echter Scrollcontainer: die Leiste zeigt, dass hier etwas zu holen ist,
   und Schwung, Tastatur und Ziehen kommen gratis vom Browser. */
.sheet-wrap{overflow-y:auto;overflow-x:hidden;border-radius:6px;position:relative;
  scroll-behavior:auto;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:#c3cbdd transparent}
.sheet-wrap:focus{outline:none}
.sheet-wrap::-webkit-scrollbar{width:11px}
.sheet-wrap::-webkit-scrollbar-track{background:transparent}
.sheet-wrap::-webkit-scrollbar-thumb{background:#c3cbdd;border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
.sheet-wrap::-webkit-scrollbar-thumb:hover{background:#a7b1c8;background-clip:content-box}
.sheet-scale{position:relative}
/* Unter 980px steht die Vorschau in voller Hoehe unter dem Formular - dort
   scrollt nur die Seite, also auch keine Rinne fuer eine Leiste freihalten. */
@media (max-width:980px){
  .sheet-wrap{overflow:hidden;scrollbar-gutter:auto}
  .sheet-outer.has-more::after{display:none}
}
.sheet-outer.has-more::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40px;
  pointer-events:none;border-radius:0 0 6px 6px;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.93))}
.sheet{width:794px;min-height:1123px;background:#fff;box-shadow:var(--shadow-lg);
  border-radius:5px;transform-origin:top left;padding:56px 62px 40px;position:relative;
  display:flex;flex-direction:column;font-family:var(--font);font-size:13.5px;color:#222;
  line-height:1.5;font-variant-numeric:tabular-nums}
.sheet .accbar{position:absolute;top:0;left:0;right:0;height:6px;background:var(--sheet-acc);border-radius:5px 5px 0 0}
.sh-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:34px}
.sh-name{font-size:21px;font-weight:800;color:var(--sheet-acc);letter-spacing:-.01em}
.sh-logo{max-height:64px;max-width:220px;object-fit:contain}
.sh-addr-row{display:flex;justify-content:space-between;margin-bottom:30px}
.sh-return{font-size:9.5px;color:#888;border-bottom:1px solid #ddd;padding-bottom:3px;margin-bottom:10px;min-height:14px}
.sh-to{white-space:pre-line;min-height:66px}
.sh-meta{font-size:12.5px;color:#333;text-align:right;border-collapse:collapse}
.sh-meta td{padding:1px 0 1px 18px}
.sh-meta td:first-child{color:#777}
.sh-title{font-size:19px;font-weight:800;margin:6px 0 16px}
table.sh-items{width:100%;border-collapse:collapse;margin-bottom:14px}
.sh-items th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#666;
  border-bottom:2px solid var(--sheet-acc);padding:6px 8px 6px 0}
.sh-items td{padding:7px 8px 7px 0;border-bottom:1px solid #eee;vertical-align:top}
.sh-items .r{text-align:right;white-space:nowrap}
.sheet.no-vat .col-vat{display:none}
.sh-totals{margin-left:auto;width:290px;margin-bottom:8px;border-collapse:collapse}
.sh-totals td{padding:3px 0}
.sh-totals td.r{text-align:right}
.sh-totals tr.grand td{border-top:2px solid var(--sheet-acc);font-weight:800;font-size:15px;padding-top:7px}
.sh-kb{font-size:12px;color:#555;margin:2px 0 12px}
.sh-notes{white-space:pre-line;margin:10px 0 0;font-size:12.5px}
.sh-pay{margin-top:16px;font-size:12.5px}
.sh-foot{margin-top:auto;padding-top:14px;border-top:1px solid #ddd;display:flex;gap:20px;
  font-size:10.5px;color:#666;line-height:1.6}
.sh-foot > div{flex:1}
.sh-giro{flex:0 0 auto !important;text-align:center;line-height:1.25}
.sh-giro svg{width:84px;height:84px;display:block}
.sh-giro span{display:block;margin-top:4px;font-size:8px;color:#777}
.sh-brand{margin-top:14px;padding-top:9px;border-top:1px solid #e8ebf2;font-size:11.5px;color:#76829c;text-align:center;letter-spacing:.01em}
.sh-brand a{color:#999}
.sh-brand svg{width:13px;height:13px;vertical-align:-2px;margin-right:6px;fill:currentColor}

.section{padding:88px 0}
.section h2{font-size:clamp(26px,3.2vw,36px);margin:0 0 10px;letter-spacing:-.025em;text-align:center}
.section .lead{text-align:center;color:var(--dim);max-width:var(--w-narrow);margin:0 auto 44px;font-size:16.5px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .25s ease, border-color .2s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d3dcf3}
.feat .ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:23px;
  background:linear-gradient(135deg,#eef3ff,#e2ebff);border:1px solid #dde7fb;border-radius:13px;margin-bottom:14px}
.feat h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em}
.feat p{margin:0;font-size:14px;color:var(--dim);line-height:1.55}

.faq{max-width:var(--w-narrow);margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:10px;
  padding:0 22px;transition:border-color .2s;box-shadow:var(--shadow-sm)}
.faq details:hover{border-color:#d3dcf3}
.faq details[open]{border-color:#c8d6f7}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:16px 0;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-size:21px;font-weight:400;
  transition:transform .25s ease;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:#3a445c;font-size:14.5px;line-height:1.6}
.faq details ol{margin:0 0 18px;padding-left:20px;color:#3a445c;font-size:14.5px;line-height:1.6}
.faq details ol li{margin-bottom:5px}

.pro-box{position:relative;max-width:var(--w-narrow);margin:0 auto;color:#fff;border-radius:22px;
  padding:42px 44px;text-align:center;border:1px solid transparent;
  background:
    linear-gradient(165deg,#150c33,#28154f) padding-box,
    linear-gradient(135deg,rgba(167,139,250,.95),rgba(109,40,217,.75)) border-box;
  box-shadow:0 30px 70px -25px rgba(35,13,80,.6)}
.pro-box::before{content:"";position:absolute;inset:-40px;z-index:-1;
  background:radial-gradient(50% 55% at 50% 50%, rgba(124,58,237,.28), transparent 70%);filter:blur(8px)}
.pro-box h2{color:#fff}
.pro-box ul{list-style:none;padding:0;margin:22px 0 28px;text-align:left;display:inline-block}
.pro-box li{padding:5px 0;color:#ddd5f6;font-size:15.5px}
.pro-box li::before{content:"✓  ";color:#7ef2c0;font-weight:700}
.pro-price{font-size:42px;font-weight:800;margin:6px 0 2px;letter-spacing:-.02em}
.pro-price small{font-size:15px;font-weight:500;color:#b6a8dc;letter-spacing:0}

.modal{position:fixed;inset:0;background:rgba(7,12,27,.6);display:none;align-items:flex-start;
  justify-content:center;padding:7vh 16px;z-index:80;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal.open{display:flex}
body.modal-open{overflow:hidden}
.modal .box{background:#fff;border-radius:18px;max-width:560px;width:100%;padding:28px 28px 24px;
  max-height:82vh;overflow:auto;position:relative;box-shadow:var(--shadow-lg)}
.modal .x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:21px;
  cursor:pointer;color:var(--dim);width:32px;height:32px;border-radius:9px}
.modal .x:hover{background:#f0f2f8}
.modal h3{margin:0 0 14px;font-size:19px}
.arch-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:14px}
.arch-row .grow{flex:1;min-width:0}
.arch-row .nr{font-weight:700}
.arch-row .sub{color:var(--dim);font-size:12.5px}
.arch-row button{font-size:12.5px;padding:5px 11px}
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--navy2);color:#fff;padding:11px 22px;border-radius:99px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:99;
  box-shadow:var(--shadow-lg)}
#toast.show{opacity:1;transform:translateX(-50%)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:960px){
  .hero{padding:60px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{display:none}
  .toolbar{top:8px}
}
@media (max-width:560px){
  .hero-stats{gap:24px}
  .hero .btn.xl{width:100%}
  .foot-grid{padding:40px 22px 24px}
}

html, body{overflow-x:clip}
.grid > *{min-width:0}
.sheet-wrap{max-width:100%}

.card h3 .ci .ic{width:15px;height:15px;color:var(--acc)}
.feat .ico .ic{width:22px;height:22px;color:var(--acc)}
.kicker .ic{width:14px;height:14px}
.modal h3{display:flex;align-items:center;gap:9px}
.modal h3 .ic{color:#7c3aed}

.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;
  font-weight:600;color:var(--dim);user-select:none}
.toolbar .switch{margin-right:14px;white-space:nowrap}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{position:relative;width:36px;height:20px;border-radius:99px;background:#c6cddd;
  transition:background .2s;flex:0 0 auto}
.switch .track::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .track{background:var(--acc)}
.switch input:checked + .track::before{transform:translateX(16px)}

.pro-feats{list-style:none;margin:12px 0 16px;padding:0}
.pro-feats li{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:14.5px;color:#2c3550}
.pro-feats .ic{color:var(--pro);width:16px;height:16px}
.pro-feats.compact li{font-size:13.5px;padding:3px 0}
.pro-teaser{border-color:#e2d5fb;background:linear-gradient(180deg,#fdfcff,#f6f1ff)}
.pro-teaser:hover{border-color:#d0bcf5}
.pro-teaser h3 .ic{color:#7c3aed}
.pt-price{margin-left:auto;font-size:12px;color:#6d28d9;background:#f3edff;
  border:1px solid #e2d5fb;padding:2px 9px;border-radius:99px;font-weight:700}
.pro-teaser .btn{width:100%;margin-top:2px}

.arch-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.arch-actions .btn{font-size:13px;padding:7px 12px}
.data-actions{display:flex;flex-wrap:wrap;gap:8px}
.data-actions .btn{font-size:13px;padding:7px 11px}
.mini-pro{font-size:9px;font-weight:800;color:#6d28d9;background:#f3edff;
  border:1px solid #e2d5fb;border-radius:5px;padding:1px 5px;margin-left:4px}
.mini-lock{background:none;border:0;padding:0;margin-left:6px;display:inline-flex;align-items:center}
.mini-lock .ic{width:13px;height:13px;stroke-width:2.4;color:#7c3aed}
.mock{border:1px solid #e3e8f2}
.hero-visual::before{background:radial-gradient(60% 60% at 50% 45%, rgba(59,108,246,.15), transparent 70%)}

/* Rechnungsvorlagen ---------------------------------------------------------
   Eine Vorlage soll auf den ersten Blick als eigenes Dokument durchgehen und
   nicht als dieselbe Rechnung in anderer Schrift. Jede aendert deshalb mehr
   als eine Kleinigkeit: Kopf, Tabelle, Summenblock, Weissraum.
   Dieselben Regeln stehen ein zweites Mal in zackrechnung-server/app/
   pdf-template.js - dort heissen die Klassen nur anders (.sh-name -> .name,
   .sh-title -> h1) und die Maße sind in mm. Wer hier etwas aendert, aendert
   es dort mit, sonst sieht die fertige PDF anders aus als die Vorschau. */

/* Klassisch: Briefbogen. Serifen, keine Akzentfarbe, Kopf zentriert. */
.tpl-klassisch{font-family:Georgia,'Iowan Old Style','Times New Roman',serif}
.tpl-klassisch .accbar{display:none}
.tpl-klassisch .sh-head{flex-direction:column-reverse;align-items:center;text-align:center;
  border-bottom:3px double #111;padding-bottom:16px;margin-bottom:30px}
.tpl-klassisch .sh-logo{margin:0 0 12px}
.tpl-klassisch .sh-name{color:#111;font-size:23px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.tpl-klassisch .sh-meta td:first-child{color:#333}
.tpl-klassisch .sh-title{font-size:17px;font-weight:600;letter-spacing:.06em}
.tpl-klassisch .sh-items th{border-bottom:1px solid #111;color:#111;
  font-size:10.5px;letter-spacing:.1em}
.tpl-klassisch .sh-items td{border-bottom:1px solid #e7e3da}
.tpl-klassisch .sh-totals tr.grand td{border-top:3px double #111;color:#111}
.tpl-klassisch .sh-foot{border-top:1px solid #111}

/* Kompakt: moeglichst viele Positionen auf eine Seite. */
.tpl-kompakt{font-size:11.5px;padding:40px 48px 30px}
.tpl-kompakt .accbar{height:3px}
.tpl-kompakt .sh-head{margin-bottom:16px}
.tpl-kompakt .sh-name{font-size:16px}
.tpl-kompakt .sh-logo{max-height:44px}
.tpl-kompakt .sh-addr-row{margin-bottom:14px}
.tpl-kompakt .sh-to{min-height:52px}
.tpl-kompakt .sh-meta{font-size:11px}
.tpl-kompakt .sh-meta td{padding:0 0 0 14px}
.tpl-kompakt .sh-title{font-size:15px;margin:0 0 10px}
.tpl-kompakt .sh-items th{font-size:9.5px;padding:3px 6px 3px 0;border-bottom-width:1px}
.tpl-kompakt .sh-items td{padding:3px 6px 3px 0}
.tpl-kompakt .sh-totals{width:250px}
.tpl-kompakt .sh-totals td{padding:1px 0}
.tpl-kompakt .sh-totals tr.grand td{font-size:13px;border-top-width:1px;padding-top:4px}
.tpl-kompakt .sh-notes,.tpl-kompakt .sh-pay{font-size:11.5px}
.tpl-kompakt .sh-pay{margin-top:10px}
.tpl-kompakt .sh-foot{font-size:9.5px;padding-top:10px}

/* Balken: farbiger Kopfstreifen ueber die volle Breite. Der Streifen ist die
   ohnehin vorhandene .accbar, nur hoch genug, dass der Kopf darin steht. */
.tpl-balken .accbar{height:120px}
.tpl-balken .sh-head{position:relative;z-index:1;align-items:center;margin-bottom:62px}
.tpl-balken .sh-name{color:#fff;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.tpl-balken .sh-logo{max-height:46px;background:#fff;border-radius:5px;padding:5px}
.tpl-balken .sh-title{color:var(--sheet-acc);font-size:22px}
.tpl-balken .sh-items th{background:var(--sheet-acc);color:#fff;border-bottom:none;padding:7px 8px}
.tpl-balken .sh-items th:first-child{border-radius:4px 0 0 4px}
.tpl-balken .sh-items th:last-child{border-radius:0 4px 4px 0}
.tpl-balken .sh-items td{padding:7px 8px;border-bottom:1px solid #edf0f6}
.tpl-balken .sh-items tbody tr:nth-child(even) td{background:#f6f8fd;
  background:color-mix(in srgb,var(--sheet-acc) 6%,#fff)}
.tpl-balken .sh-totals td{padding:3px 10px}
.tpl-balken .sh-totals tr.grand td{border-top:none;color:var(--sheet-acc);padding:9px 10px;
  background:#eef2fc;background:color-mix(in srgb,var(--sheet-acc) 11%,#fff)}

/* Linie: viel Weissraum, kaum Striche, Farbe nur als kurze Linie ueber dem
   Titel. Fuer Leute, denen alles andere zu nach Formular aussieht. */
.tpl-linie{padding:70px 72px 44px}
.tpl-linie .accbar{display:none}
.tpl-linie .sh-head{margin-bottom:56px}
.tpl-linie .sh-name{color:#111;font-size:27px;font-weight:400;letter-spacing:-.005em}
.tpl-linie .sh-addr-row{margin-bottom:44px}
.tpl-linie .sh-return{border-bottom:none;color:#aaa}
.tpl-linie .sh-meta td:first-child{text-transform:uppercase;font-size:9.5px;
  letter-spacing:.12em;color:#999}
/* align-self, nicht inline-block: .sheet ist ein Flex-Container, dort wird
   inline-block zu block und der Farbstrich liefe ueber die volle Breite. */
.tpl-linie .sh-title{align-self:flex-start;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.28em;color:#666;
  border-top:2px solid var(--sheet-acc);padding-top:12px;margin:14px 0 22px}
.tpl-linie .sh-items th{border-bottom:1px solid #ddd;color:#999;
  font-size:9.5px;letter-spacing:.12em;padding-bottom:8px}
.tpl-linie .sh-items td{border-bottom:none;padding:9px 8px 9px 0}
.tpl-linie .sh-items tbody tr:not(:last-child) td{border-bottom:1px solid #f2f2f2}
.tpl-linie .sh-totals tr.grand td{border-top:1px solid #ddd;color:var(--sheet-acc);
  font-size:17px;padding-top:10px}
.tpl-linie .sh-foot{border-top:1px solid #eee;color:#999}

/* Rahmen: Formular-Optik. Alles steht in Kaesten, Zahlen dicktengleich. */
.tpl-rahmen{border:1.5px solid var(--sheet-acc);padding:34px 38px 26px}
.tpl-rahmen .accbar{display:none}
.tpl-rahmen .sh-head{align-items:center;border-bottom:1.5px solid var(--sheet-acc);
  padding-bottom:14px;margin-bottom:20px}
.tpl-rahmen .sh-name{color:#111;font-size:19px;letter-spacing:.02em}
.tpl-rahmen .sh-addr-row{margin-bottom:22px;gap:22px}
.tpl-rahmen .sh-meta td{border:1px solid #c9c9c9;padding:4px 9px}
.tpl-rahmen .sh-meta td:first-child{background:color-mix(in srgb,var(--sheet-acc) 7%,#fff);color:#333;text-align:left}
.tpl-rahmen .sh-title{background:var(--sheet-acc);color:#fff;font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 10px;margin:0 0 12px}
.tpl-rahmen .sh-items th{background:color-mix(in srgb,var(--sheet-acc) 7%,#fff);color:#222;border:1px solid #c9c9c9;padding:5px 8px}
.tpl-rahmen .sh-items td{border:1px solid #d8d8d8;padding:5px 8px}
.tpl-rahmen .sh-items td.r,.tpl-rahmen .sh-totals td.r{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tpl-rahmen .sh-totals td{border:1px solid #d8d8d8;padding:4px 9px}
.tpl-rahmen .sh-totals tr.grand td{border:1.5px solid var(--sheet-acc);background:color-mix(in srgb,var(--sheet-acc) 7%,#fff);
  color:#111;padding:7px 9px}
.tpl-rahmen .sh-foot{border-top:1.5px solid var(--sheet-acc)}

:root{--pro:#7c3aed;--pro-dark:#6d28d9;--pro-soft:#f3edff;--pro-border:#e2d5fb}

select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

input[type=checkbox]{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:0 0 auto;
  border:1.5px solid #c6cddd;border-radius:6px;background:#fff;cursor:pointer;margin:0;
  display:inline-grid;place-content:center;transition:background .15s,border-color .15s}
input[type=checkbox]::before{content:"";width:11px;height:11px;transform:scale(0);transition:transform .12s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.8 2.8L10 3' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
input[type=checkbox]:checked::before{transform:scale(1)}

.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid #fff;cursor:pointer;padding:0;flex:0 0 auto;
  box-shadow:0 0 0 1.5px #d8deea;transition:transform .15s,box-shadow .15s}
.sw:hover{transform:scale(1.12)}
.sw.on{box-shadow:0 0 0 2.5px var(--acc)}

/* Eigene Farbe – Komplett-Feature, darf glänzen */
@property --sw-a{syntax:"<angle>";inherits:false;initial-value:0deg}
#pro_color_wrap{position:relative}
.sw-own{position:relative;width:30px;height:30px;margin-left:6px;border-color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from var(--sw-a),
    #ff4d4d,#ff9f1c,#ffe14d,#3ddc84,#00c2d1,#3b6cf6,#8b5cf6,#ff4dbe,#ff4d4d);
  animation:sw-spin 7s linear infinite;
  transition:transform .15s,box-shadow .15s}
@keyframes sw-spin{to{--sw-a:360deg}}
.sw-own .sw-core{width:15px;height:15px;border-radius:50%;background:var(--pick,#fff);
  color:var(--pick-ink,var(--dim));display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(16,24,40,.18);
  transition:width .2s cubic-bezier(.22,.9,.3,1),height .2s cubic-bezier(.22,.9,.3,1)}
.sw-own .ic{width:9px;height:9px;stroke-width:3.4}
.sw-own .sw-lock{display:none}
.sw-own:hover{box-shadow:0 0 0 1.5px #cfd7e8,0 5px 16px -3px rgba(124,58,237,.55);
  animation-duration:1.8s}
.sw-own:hover .sw-core{width:12px;height:12px}
.sw-own:active{transform:scale(.96)}
.sw-own.on{box-shadow:0 0 0 2.5px var(--acc),0 4px 14px -4px rgba(124,58,237,.5)}
.locked .sw-own{animation-duration:12s}
.locked .sw-own .sw-plus{display:none}
.locked .sw-own .sw-lock{display:block;width:10px;height:10px;stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.sw-own{animation:none}}

/* Farbwähler-Panel */
.cp{position:absolute;z-index:45;top:100%;left:0;margin-top:8px;width:252px;max-width:100%;
  padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 48px -16px rgba(7,12,27,.34),0 2px 8px rgba(16,24,40,.08);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:20px 0;
  transition:opacity .16s ease,transform .16s cubic-bezier(.22,.9,.3,1)}
.cp[hidden]{display:none}
.cp.in{opacity:1;transform:none}
.cp-sv{position:relative;height:132px;border-radius:11px;cursor:crosshair;
  background:linear-gradient(to top,#000,rgba(0,0,0,0)),
             linear-gradient(to right,#fff,var(--cp-hue,#3b6cf6));
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)}
.cp-dot{position:absolute;width:15px;height:15px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);background:var(--cp-col,#3b6cf6);
  border:2.5px solid #fff;box-shadow:0 1px 4px rgba(7,12,27,.45)}
.cp-sv.grab .cp-dot,.cp-hue.grab .cp-dot{transform:translate(-50%,-50%) scale(1.15)}
.cp-mid{display:flex;align-items:center;gap:10px;margin-top:11px}
.cp-prev{width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:var(--cp-col,#3b6cf6);
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.14),0 3px 10px -3px var(--cp-col,#3b6cf6)}
.cp-ctrl{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.cp-hue{position:relative;height:11px;border-radius:99px;cursor:ew-resize;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)}
.cp-hue .cp-dot{top:50%;width:17px;height:17px}
.cp-hex{display:flex;align-items:center;gap:2px;border:1px solid #d8deea;border-radius:8px;
  padding:3px 8px;font-size:12.5px;font-weight:700;color:var(--dim);
  transition:border-color .15s,box-shadow .15s}
.cp-hex:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,108,246,.14)}
.cp-hex input{border:0;padding:0;font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;color:var(--ink);text-transform:uppercase;background:none;width:100%}
.cp-hex input:focus{border:0;box-shadow:none}
.cp-foot{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line)}
.cp-note{flex:1;min-width:0;font-size:11.5px;font-weight:600;color:#9aa3b8}
.cp-drop{flex:1;min-width:0;text-align:left;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:700;color:#9aa3b8;text-decoration:underline;
  text-underline-offset:2px;transition:color .15s}
.cp-drop:hover{color:#c02535}
.cp-done{border:0;padding:5px 13px;border-radius:8px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:700;color:#fff;background:var(--ink);
  transition:background .15s,transform .1s}
.cp-done:hover{background:#232d47}
.cp-done:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.cp{transition:none}}

.upl{display:flex;align-items:center;gap:10px;border:1.5px dashed #c6cddd;border-radius:11px;
  padding:13px 15px;color:var(--dim);cursor:pointer;font-size:13.5px;font-weight:600;margin-bottom:10px;
  transition:border-color .15s,color .15s,background .15s}
.upl:hover{border-color:var(--acc);color:var(--acc);background:#f8faff}
.logo-prev{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.logo-prev img{max-height:44px;max-width:150px;border:1px solid var(--line);border-radius:9px;padding:4px;background:#fff}
.logo-prev .btn{font-size:12.5px;padding:6px 11px}

.seg{display:inline-flex;background:#eef1f7;border-radius:11px;padding:3px;gap:2px;margin-bottom:12px}
.seg button{font:inherit;font-size:13px;font-weight:600;border:none;background:transparent;
  color:var(--dim);padding:7px 15px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
/* Sechs Vorlagen passen nicht nebeneinander in die Seitenspalte, also
   zwei Reihen zu dritt statt einer Reihe, die irgendwo umbricht. */
#tpl_seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
#tpl_seg button{padding:7px 8px}

.cl-progress{margin-left:auto;font-size:12px;font-weight:800;color:var(--dim);
  background:#eef1f7;padding:2px 10px;border-radius:99px}
.cl-progress.done{color:#0d7a52;background:#e9f8f1}
.cl-bar{height:5px;background:#e8ecf4;border-radius:99px;margin:0 0 12px;overflow:hidden}
.cl-bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--acc-dark),#7aa5ff);
  border-radius:99px;transition:width .4s ease}

.urgency{max-width:var(--w-narrow);margin:0 auto;text-align:center;background:#fff;
  border:1px solid var(--pro-border);border-radius:22px;padding:46px 44px;box-shadow:var(--shadow-md)}
.urg-badge{display:inline-block;font-size:12px;font-weight:800;color:#b42318;background:#fee4e2;
  border:1px solid #fecdca;padding:5px 14px;border-radius:99px;margin-bottom:16px;
  letter-spacing:.04em;text-transform:uppercase}
.urgency h2{margin-bottom:12px}
.urgency p{color:#3a445c;font-size:15.5px;margin:0 auto 26px;line-height:1.65}

.anchor-line{font-size:13px;color:#8a94a8;margin:0 0 4px}

@media (prefers-reduced-motion: no-preference){
  .modal.open{animation:zr-fade .18s ease}
  .modal.open .box{animation:zr-pop .26s cubic-bezier(.2,.9,.3,1.15)}
  .faq details[open] p{animation:zr-slide .28s ease}
  .btn:active{transform:translateY(0) scale(.98)}
  .toolbar .btn:hover{transform:translateY(-1px)}
  .item-row{animation:zr-slide .2s ease}
}
@keyframes zr-fade{from{opacity:0}}
@keyframes zr-pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes zr-slide{from{opacity:0;transform:translateY(-4px)}}

input.iban-ok{border-color:#16a06d !important;box-shadow:0 0 0 3px rgba(22,160,109,.13) !important}
input.iban-bad{border-color:#d13438 !important;box-shadow:0 0 0 3px rgba(209,52,56,.11) !important}

.pv-hi{outline:2.5px solid rgba(59,108,246,0);outline-offset:5px;border-radius:3px;
  animation:pv-flash 1.3s ease}
@keyframes pv-flash{0%{outline-color:rgba(59,108,246,.7)}70%{outline-color:rgba(59,108,246,.35)}100%{outline-color:rgba(59,108,246,0)}}
.sh-items tr.pv-row td{background:rgba(59,108,246,.09)}
.sh-items tr.pv-row td:first-child{box-shadow:inset 2px 0 0 var(--sheet-acc)}
@media print{
  .sh-items tr.pv-row td,.sh-items tr.pv-row td:first-child{background:none;box-shadow:none}
  .pv-hi{outline:none;animation:none}
}

.appstage{position:relative;isolation:isolate;padding:60px 0 54px;
  border-top:1px solid #d7deee;border-bottom:1px solid #d7deee;
  background:
    radial-gradient(1000px 460px at 12% -8%, rgba(59,108,246,.12), transparent 62%),
    radial-gradient(860px 460px at 90% 6%, rgba(124,58,237,.08), transparent 60%),
    linear-gradient(180deg,#e8edf8 0%,#dee6f5 46%,#e8edf8 100%);
  box-shadow:inset 0 12px 26px -22px rgba(16,24,40,.45),
    inset 0 -12px 26px -22px rgba(16,24,40,.35)}

.stage-head{position:relative;text-align:center;max-width:var(--w-narrow);margin-bottom:30px}
.appstage h2{margin:0;font-size:clamp(28px,3.6vw,42px);line-height:1.08;
  letter-spacing:-.032em;font-weight:800;color:var(--ink)}

.appwin{position:relative;background:var(--bg);border-radius:20px;
  box-shadow:0 34px 64px -30px rgba(16,24,40,.5), 0 6px 18px -10px rgba(16,24,40,.16),
    0 0 0 1px rgba(16,24,40,.08)}
.appwin-bar{position:relative;display:flex;align-items:center;height:46px;padding:0 16px;
  border-radius:20px 20px 0 0;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff,#f1f4fb)}
.appwin-bar .dots{display:flex;gap:6px;flex:0 0 auto}
.appwin-bar .dots i{width:10px;height:10px;border-radius:50%}
.appwin-bar .dots i:nth-child(1){background:#ff5f57}
.appwin-bar .dots i:nth-child(2){background:#febc2e}
.appwin-bar .dots i:nth-child(3){background:#28c840}
.appwin-title{position:absolute;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--dim)}
.appwin-title .ic{width:14px;height:14px;color:var(--acc)}
.stage-canvas{max-width:calc(var(--w-wide) + 56px)}
.app{padding:18px 18px 22px}
.stage-foot{position:relative;text-align:center;margin:24px auto 0;max-width:620px;
  font-size:13.5px;color:var(--dim)}

@media (max-width:960px){
  .appstage{padding:48px 0 44px}
  .appwin{border-radius:16px}
  .appwin-bar{border-radius:16px 16px 0 0}
  .app{padding:12px 12px 16px}
}
@media (max-width:560px){
  .appwin-title{display:none}
}

.mbar{display:none}
.only-narrow{display:none}
@media (max-width:980px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(16,24,40,.10);
    transform:translateY(110%);visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.9,.3,1), visibility 0s linear .28s}
  .mbar.on{transform:none;visibility:visible;
    transition:transform .28s cubic-bezier(.22,.9,.3,1), visibility 0s}
  .mbar-prog{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;
    font-size:12.5px;color:var(--dim);line-height:1.25}
  .mbar-prog b{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
  .mbar-prog.done b,.mbar-prog.done .mbar-lab{color:#0d7a52}
  .mbar-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mbar .btn{padding:9px 13px;font-size:13.5px;flex:0 0 auto}
  .toolbar #btn_print{display:none}
  .only-wide{display:none}
  .only-narrow{display:inline}
  .stage-foot{padding-bottom:64px}
}
@media (max-width:560px){
  .toolbar .btn{padding:8px 10px;font-size:13px}
  .card-sum{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media (max-width:380px){
  .mbar-lab{display:none}
}
@media (prefers-reduced-motion: reduce){
  .mbar{transition:none}
}

@media (max-width:768px){
  input[type=text],input[type=date],input[type=email],select,textarea{font-size:16px}
}

#print-slot{display:none}
@media print{
  body.printing > :not(#print-slot){display:none !important}
  body.printing #print-slot{display:block}
  body{background:#fff}
  @page{size:A4;margin:0}
  #print-slot .sheet{width:210mm;min-height:auto;box-shadow:none;border-radius:0;
    transform:none !important;padding:16mm 17mm 12mm;display:block}
  #print-slot .sh-foot{margin-top:16mm}
  #print-slot .sh-brand{margin-top:5mm}
  .sheet .accbar{border-radius:0}
  /* Die Vorlagen, die ueber den Rand leben, brauchen ihr eigenes Mass -
     die Regel oben setzt sonst alle auf denselben Seitenrand zurueck. */
  #print-slot .sheet.tpl-kompakt{padding:12mm 14mm 10mm}
  #print-slot .sheet.tpl-linie{padding:20mm 20mm 14mm}
  #print-slot .sheet.tpl-rahmen{padding:10mm 12mm 9mm}
  #print-slot .sheet.tpl-balken .accbar{height:32mm}
  #print-slot .sheet.tpl-balken .sh-head{margin-bottom:16mm}
}