/* ═══════════════════════════════════════════════════════════════
   LXO Steuerberater — Unterseiten (Leistungen, Ratgeber, Rechtliches)
   Ergänzt lxo.css. Übersetzt die bestehenden Inhaltsbausteine
   in das neue Design, ohne Texte oder Überschriften anzufassen.
   ═══════════════════════════════════════════════════════════════ */

/* Alte Variablennamen, die noch in Inline-Stilen der Inhalte stehen */
:root{
  --g50:#F7F9FC;--g100:#EEF2F8;--g200:#E1E7F0;--g300:#C9D2DF;--g400:#7D8A9C;--g500:#5B6879;--g600:#46546A;--g800:#1F2B3D;--g900:var(--ink);
  --black:var(--navy);--dark:var(--navy-2);--dark-2:#13254A;--dark-3:#1A3060;
  --brand-d:var(--brand-ink);--brand-l:#3385FF;--brand-t:#7FB2FF;
  --rx:var(--r-l);--rl:var(--r);
}

.container{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.container-sm{width:100%;max-width:calc(860px + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
main > section,main > .cta-bar{position:relative}
.s-white,.s-gray{padding:clamp(48px,6vw,88px) 0}
.s-gray{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 20%,rgba(255,255,255,.55) 80%,rgba(255,255,255,0))}

/* ── Seitenkopf ─────────────────────────────────────────────── */
.phero{position:relative;isolation:isolate;padding:clamp(120px,12vw,160px) 0 clamp(40px,5vw,64px);overflow:hidden}
.phero .aurora i:nth-child(3){display:none}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.4}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
.page-hero-inner{display:grid;gap:20px;justify-items:start;max-width:860px!important}
.phero h1{font-size:clamp(34px,2.8vw + 16px,58px);font-weight:600;letter-spacing:-.035em;line-height:1.06}
.phero .intro{font-size:clamp(17px,.4vw + 15px,20px);color:var(--ink-2);line-height:1.6;max-width:62ch}
.phero .page-hero-inner > div[style*="display:flex"],.phero .page-hero-inner > .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.phero .page-hero-inner > .btn{margin-top:4px}

/* Hervorhebungen in Überschriften */
em.hi,em.hi-blue{font-style:normal}
.phero em.hi,.cta-bar em.hi{background:linear-gradient(100deg,var(--brand) 10%,var(--cyan) 60%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-bar em.hi{background:linear-gradient(100deg,#7FE0FF,#B9A8FF);-webkit-background-clip:text;background-clip:text}
em.hi-blue{color:var(--brand)}

/* Etiketten und Abschnittsköpfe */
.label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--brand);text-transform:none}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(0,102,255,.14)}
.label-dark{color:#7FE0FF}
.section-hd{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:760px}
.section-hd.center{margin-inline:auto;text-align:center;justify-items:center}
.sh{font-size:clamp(28px,1.8vw + 16px,42px);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin-top:6px}
.sh-intro{font-size:18px;color:var(--muted);max-width:62ch}

/* Schaltflächen der Inhalte */
.btn-p{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-p:hover{color:#fff;background:#0A6CFF;transform:translateY(-1px)}
.btn-g,.btn-o{background:var(--glass);color:var(--ink);box-shadow:var(--glass-edge),var(--shadow-1);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.btn-g:hover,.btn-o:hover{color:var(--ink);transform:translateY(-1px)}
.btn:not([class*="btn-lg"]):not([class*="btn-sm"]){font-size:15px}

/* ── Raster und Karten ──────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)!important;align-items:start}
.grid-3,.why-grid-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-l);background:var(--surface);
  box-shadow:0 0 0 1px var(--line),var(--shadow-1);color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
a.card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-2),var(--shadow-2);color:var(--ink)}
.card h3{font-size:19px;letter-spacing:-.02em}
.card p{font-size:15.5px;color:var(--muted);line-height:1.6}
.card-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);margin-bottom:4px}
.card-icon svg{width:22px;height:22px}
.card-icon:empty{display:none}
a.card::after{content:"";position:absolute;right:22px;top:24px;width:30px;height:30px;border-radius:50%;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1322' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .4s var(--ease),background-color .3s}
a.card:hover::after{transform:rotate(-45deg);background-color:var(--brand-soft)}
.card .price-name{font-size:13px!important;font-weight:600;letter-spacing:.04em;color:var(--muted)!important}

/* Merkmalslisten */
.feat-list{display:grid;gap:16px;margin:8px 0 0}
.feat-list li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.feat-check{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft)}
.feat-check svg{width:13px;height:13px}
.feat-list strong{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.feat-list span{display:block;font-size:15.5px;color:var(--muted);line-height:1.6;margin-top:2px}
.price-feats{display:grid;gap:10px;font-size:15px;color:var(--ink-2)}
.price-feats li{display:flex;gap:10px;align-items:flex-start}
.price-feats li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── Handlungsaufforderung ──────────────────────────────────── */
.cta-bar{padding:clamp(24px,4vw,48px) 0 clamp(48px,6vw,88px)}
.cta-bar > .container{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;gap:14px;text-align:center;
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);border-radius:36px;color:#fff;max-width:calc(var(--wrap));
  background:radial-gradient(70% 100% at 50% 0%,#1E5BFF 0%,#0B2A7A 48%,var(--navy) 92%);box-shadow:0 40px 80px -32px rgba(0,60,200,.5)}
.cta-bar > .container::before{content:"";position:absolute;inset:auto -10% -70% 40%;height:120%;background:radial-gradient(circle,rgba(127,224,255,.3),transparent 60%);z-index:-1;filter:blur(24px)}
.cta-bar h2{color:#fff;font-size:clamp(26px,1.8vw + 16px,40px);max-width:22ch}
.cta-bar p{color:rgba(255,255,255,.75);max-width:56ch;font-size:17px}
.cta-bar .btn-p{background:#fff;color:var(--navy);margin-top:10px;box-shadow:0 10px 30px -8px rgba(255,255,255,.35)}
.cta-bar .btn-p:hover{color:var(--navy);background:#fff}
@media (max-width:720px){.cta-bar > .container{margin:0 var(--gutter);width:auto;border-radius:28px}}

/* ── Fragen und Antworten ───────────────────────────────────── */
.faq-list,.faq-section .faq{margin-top:8px}
.faq .a p+p{margin-top:10px}

/* ── Artikel ────────────────────────────────────────────────── */
.al,.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,64px)!important;align-items:start}
.as,.article-sidebar{position:sticky!important;top:100px!important;display:grid;gap:14px}
.sc,.sidebar-card{padding:22px!important;border-radius:var(--r)!important;margin:0!important;background:var(--surface)!important;box-shadow:0 0 0 1px var(--line),var(--shadow-1);border:0!important}
.sc[style*="--dark"],.sidebar-card[style*="--dark"]{background:radial-gradient(100% 100% at 100% 0%,#1E5BFF,#0B2A7A 50%,var(--navy))!important;box-shadow:0 20px 40px -20px rgba(0,60,200,.5)}
.sc h3,.sidebar-card h3{font-size:15px!important;letter-spacing:-.01em;margin-bottom:12px!important}
.sc .btn,.sidebar-card .btn{width:100%;justify-content:center}
.sc[style*="--dark"] .btn-p,.sidebar-card[style*="--dark"] .btn-p{background:#fff;color:var(--navy)}
.sl,.sidebar-links{display:grid;gap:2px}
.sl a,.sidebar-links a{display:block;padding:8px 0!important;font-size:14.5px!important;color:var(--ink-2)!important;border-bottom:1px solid var(--line)!important;line-height:1.4}
.sl li:last-child a,.sidebar-links li:last-child a{border-bottom:0!important}
.sl a:hover,.sidebar-links a:hover{color:var(--brand)!important}

.article-body{font-size:17.5px;line-height:1.75;color:var(--ink-2);max-width:72ch}
.article-body > * + *{margin-top:18px}
.article-body h2{font-size:clamp(24px,1vw + 18px,31px);letter-spacing:-.025em;line-height:1.2;margin-top:52px!important;scroll-margin-top:110px}
.article-body h3{font-size:20px;letter-spacing:-.015em;margin-top:34px!important;scroll-margin-top:110px}
.article-body h4{font-size:17px;margin-top:24px}
.article-body p{margin:0}
.article-body ul,.article-body ol{padding-left:0;display:grid;gap:10px;list-style:none}
.article-body ul > li{position:relative;padding-left:26px}
.article-body ul > li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.article-body ol{counter-reset:o}
.article-body ol > li{position:relative;padding-left:36px;counter-increment:o}
.article-body ol > li::before{content:counter(o);position:absolute;left:0;top:.15em;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:700;display:grid;place-items:center}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a:not(.btn){color:var(--brand);text-decoration:underline;text-decoration-color:rgba(0,102,255,.3);text-underline-offset:3px}
.article-body a:not(.btn):hover{text-decoration-color:currentColor}
.article-body blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:3px solid var(--brand);font-size:19px;color:var(--ink)}

/* Inhaltsverzeichnis */
.article-toc{padding:22px 24px;border-radius:var(--r);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--shadow-1)}
.article-body .article-toc{margin:0 0 8px}
.toc-title{font-size:13px!important;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)!important;margin-bottom:12px!important}
.article-toc ol,.article-toc ul{display:grid;gap:4px;font-size:15.5px}
.article-toc li{padding-left:34px!important}
.article-toc li::before{width:22px!important;height:22px!important;font-size:12px!important}
.article-toc a{color:var(--ink-2)!important;text-decoration:none!important}
.article-toc a:hover{color:var(--brand)!important}

/* Hinweisboxen */
.info-box,.hint-box,.warn-box{position:relative;padding:18px 20px 18px 54px!important;border-radius:var(--r)!important;border:0!important;font-size:16px!important;line-height:1.65!important;color:var(--ink-2)!important;margin:24px 0!important}
.info-box,.hint-box{background:linear-gradient(180deg,#EEF4FF,#E6EFFF)!important;box-shadow:inset 0 0 0 1px rgba(0,102,255,.14)}
.warn-box{background:linear-gradient(180deg,#FFF8EB,#FFF3DC)!important;box-shadow:inset 0 0 0 1px rgba(214,140,0,.22)}
.info-box::before,.hint-box::before,.warn-box::before{content:"";position:absolute;left:18px;top:19px;width:22px;height:22px;border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center/14px no-repeat}
.warn-box::before{background-color:#E08A00;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E")}
.info-box strong,.hint-box strong{color:var(--ink)!important}

/* Abschluss-Kasten im Artikel */
.article-cta-box{position:relative;overflow:hidden;isolation:isolate;margin-top:40px!important;padding:clamp(24px,3vw,36px);border-radius:var(--r-l);color:#fff;
  background:radial-gradient(90% 120% at 100% 0%,#1E5BFF 0%,#0B2A7A 48%,var(--navy) 92%);box-shadow:0 30px 60px -28px rgba(0,60,200,.5);display:grid;gap:10px;justify-items:start}
.article-cta-box h3{color:#fff;font-size:22px;margin:0!important}
.article-cta-box p{color:rgba(255,255,255,.78);font-size:16px}
.article-cta-box .btn-p{background:#fff;color:var(--navy);margin-top:8px}
.article-cta-box .btn-p:hover{color:var(--navy);background:#fff}

/* Tabellen */
main table{width:100%;border-collapse:separate!important;border-spacing:0;font-size:15px!important;margin:0!important}
main table th{background:var(--bg)!important;color:var(--ink)!important;font-size:13.5px!important;font-weight:600;text-align:left;padding:12px 16px!important;border-bottom:1px solid var(--line-2)}
main table td{padding:12px 16px!important;border-bottom:1px solid var(--line)!important;color:var(--ink-2)!important;vertical-align:top;background:transparent}
main table tr:last-child td{border-bottom:0!important}
main table .hl{color:var(--ink)!important;font-weight:600}
main table .feat td,main table .brand-row td{background:rgba(0,102,255,.05)!important}
main div[style*="overflow-x:auto"]{border:0!important;border-radius:var(--r)!important;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-1);margin:24px 0}
.article-body > table{display:block;overflow-x:auto;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),var(--shadow-1);background:var(--surface);margin:24px 0!important}

/* Checkliste und Zeitleiste */
.checklist-item{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-1);margin-bottom:10px}
.checklist-num{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:14px;font-weight:700;box-shadow:var(--shadow-brand)}
.checklist-content h4{font-size:17px;margin:0 0 4px!important}
.checklist-content p{font-size:15.5px;color:var(--muted);line-height:1.6}
.timeline-item{display:flex;gap:18px;margin-bottom:18px;align-items:flex-start}
.timeline-dot{flex:none;width:14px;height:14px;margin-top:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}

/* Rechtstexte */
.legal-body{max-width:780px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.legal-body h2{font-size:21px;letter-spacing:-.02em;margin:44px 0 12px;padding-top:28px;border-top:1px solid var(--line-2)}
.legal-body h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal-body h3{font-size:17px;margin:26px 0 8px}
.legal-body p,.legal-body address,.legal-body ul{margin:0 0 12px;font-style:normal}
.legal-body ul{padding-left:20px;list-style:disc}

/* ── Ratgeber-Übersicht ─────────────────────────────────────── */
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.blog-filter button{height:40px;padding:0 16px;border-radius:var(--r-pill);border:0;cursor:pointer;font:500 14.5px/1 'Inter',sans-serif;color:var(--ink-2);
  background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:background .2s,color .2s,box-shadow .2s}
.blog-filter button:hover{box-shadow:0 0 0 1px var(--line-2)}
.blog-filter button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.blog-filter small{opacity:.6;margin-left:6px;font-size:12.5px}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.blog-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-2),var(--shadow-2)}
.blog-card[hidden]{display:none}
.blog-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blog-card:hover .blog-thumb img{transform:scale(1.04)}
.blog-thumb-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.blog-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.blog-cat{font-size:12.5px;font-weight:600;color:var(--brand);letter-spacing:.02em}
.blog-title{font-size:18.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.blog-title::after{content:"";position:absolute;inset:0}
.blog-title:hover{color:var(--ink)}
.blog-excerpt{font-size:15px;color:var(--muted);line-height:1.55}
.blog-meta{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.blog-read-more{font-weight:600;font-size:14px;position:relative;z-index:1}

/* Lesefortschritt im Artikel */
.progress{position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--cyan));transform-origin:left;transform:scaleX(var(--p,0))}

/* ── Responsiv ──────────────────────────────────────────────── */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .al,.article-layout{grid-template-columns:minmax(0,1fr)}
  .as,.article-sidebar{position:static!important}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .grid-3,.why-grid-3col{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .grid-3,.why-grid-3col,.grid-4,.blog-grid{grid-template-columns:minmax(0,1fr)}
  .article-body{font-size:16.5px}
  .phero{padding-top:108px}
}
.article-body ul > li.ck::before{left:0;top:.28em;width:18px;height:18px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.article-body ul > li.ck{padding-left:30px}
.article-body .faq{margin-top:20px}
.article-body .faq summary{font-size:16.5px}

/* ── Kontakt ────────────────────────────────────────────────── */
.contact-head .btns{align-items:center}
.contact-head .hours{font-size:14.5px;color:var(--muted);padding:0 6px}
.contact-head .btn svg{width:17px;height:17px}
.contact-main{padding:0 0 clamp(48px,6vw,88px)}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.form-card{border-radius:32px;overflow:hidden}
.form-card-header{padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px) 8px;display:grid;gap:8px;justify-items:start}
.form-card-header .badge{width:auto;height:auto;display:inline-flex;font-size:12.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);padding:6px 12px;border-radius:var(--r-pill);box-shadow:none}
.form-card-header h2{font-size:clamp(24px,1vw + 18px,30px)}
.form-card-header p{color:var(--muted);font-size:16px}
.form-card-body{padding:16px clamp(22px,3vw,40px) clamp(24px,3vw,36px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:grid;gap:6px;margin-bottom:14px}
.form-group label{font-size:14px;font-weight:600;color:var(--ink)}
.req{color:var(--brand)}
.form-group input,.form-group select,.form-group textarea{width:100%;height:50px;padding:0 16px;border-radius:14px;border:0;font:400 16px/1.4 'Inter',sans-serif;color:var(--ink);
  background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.form-group textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6879' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--brand),0 0 0 4px rgba(0,102,255,.12)}
.form-group .is-invalid{box-shadow:inset 0 0 0 2px #D92D20}
.privacy-row{display:flex;gap:12px;align-items:flex-start;margin:6px 0 18px;font-size:14px;color:var(--muted);line-height:1.55}
.privacy-row input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--brand)}
.btn-submit{width:100%}
.btn-submit:disabled{opacity:.7;cursor:wait}
.btn-submit.is-error{background:#D92D20;box-shadow:none}
.form-note{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}
.form-success{display:none;text-align:center;padding:24px 8px 8px}
.success-check{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(18,183,106,.12);color:#067647}
.success-check svg{width:30px;height:30px}
.form-success h3{font-size:22px;margin-bottom:8px}
.form-success p{color:var(--muted)}
.contact-side{display:grid;gap:12px;position:sticky;top:100px}
.info-block{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-1)}
.info-icon{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.info-icon svg{width:20px;height:20px}
.info-block h3{font-size:15px;margin-bottom:2px}
.info-block p{font-size:14.5px;color:var(--muted);line-height:1.55}
.info-block a{font-weight:600}
.expect-card{padding:20px 22px;border-radius:var(--r);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-1)}
.expect-card h3{font-size:15px;margin-bottom:12px}
.expect-list{display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.expect-list li{display:flex;gap:10px;align-items:flex-start}
.expect-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trust-cell{padding:16px;border-radius:var(--r);text-align:center;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--shadow-1)}
.trust-val{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--brand);line-height:1.1}
.trust-lbl{font-size:12.5px;color:var(--muted);margin-top:4px}
@media (max-width:960px){.contact-layout{grid-template-columns:minmax(0,1fr)}.contact-side{position:static}}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

/* ── Neue Landingpages (Branchen, Preise) ───────────────────── */
.phero .ticks{margin-top:6px}
.phero .btns .btn svg{width:17px;height:17px}
.prose{max-width:none}
.tbl{border-radius:var(--r);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-1);overflow-x:auto}
.tbl table th[scope="row"]{background:transparent!important;font-size:15px!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;font-weight:600}
.tbl table tr:last-child th[scope="row"]{border-bottom:0!important}
.tbl-note{margin-top:14px;font-size:14px;color:var(--muted)}
.s-gray .steps .num{box-shadow:0 0 0 1px var(--line-2),0 0 0 6px #F7F9FC}
/* Branchen-Übersicht */
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:960px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.hub{grid-template-columns:minmax(0,1fr)}}
/* Preisseite */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.price-grid .card .p{font-size:clamp(30px,1.4vw + 18px,40px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.price-grid .card .u{font-size:14px;color:var(--muted);margin-top:-4px}
.price-grid .card .price-feats{margin-top:6px}
.price-grid .card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:720px){.price-grid{grid-template-columns:minmax(0,1fr)}}

/* ═══ Branchen-Grafiken: Szene im Seitenkopf, Belegfluss, Illustrationen ═══ */
.phero.has-visual .container{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:center}
.phero.has-visual .crumbs{grid-column:1/-1;margin-bottom:-8px}
.scene{position:relative;padding:28px 10px 34px 26px;justify-self:end;width:100%;max-width:470px}
.scene .card-main{position:relative;padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px}
.scene-art{position:relative;height:170px;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 120% at 100% 0%,#E3EEFF 0%,#F4F8FF 55%,#FFFFFF 100%);box-shadow:inset 0 0 0 1px rgba(0,102,255,.08)}
.scene-art svg{position:absolute;inset:0;width:100%;height:100%}
.scene .ck-head{padding:2px 4px 0}
.scene .ck-list{gap:8px}
.scene .ck-item{padding:10px 12px}
.scene .chip-a{left:0;top:4px}
@media (max-width:960px){.phero.has-visual .container{grid-template-columns:minmax(0,1fr)}.scene{justify-self:center;max-width:460px}}
@media (max-width:420px){.scene{padding:26px 0 30px}}

/* Belegfluss */
.flowline{display:grid;grid-template-columns:auto minmax(28px,1fr) auto minmax(28px,1fr) auto minmax(28px,1fr) auto minmax(28px,1fr) auto;align-items:center;gap:0;padding:clamp(20px,3vw,32px);border-radius:var(--r-l)}
.fl-node{display:grid;justify-items:center;text-align:center;gap:8px;width:clamp(120px,13vw,160px)}
.fl-node .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:#fff;color:var(--brand);box-shadow:0 0 0 1px var(--line),var(--shadow-1);transition:transform .5s var(--ease)}
.fl-node .ic svg{width:26px;height:26px}
.fl-node.fl-hub .ic{background:linear-gradient(135deg,var(--brand),#2E86FF);color:#fff;box-shadow:var(--shadow-brand)}
.fl-node b{font-size:15px;line-height:1.25;letter-spacing:-.01em}
.fl-node small{font-size:13px;color:var(--muted);line-height:1.4}
.fl-rail{position:relative;height:2px;min-width:28px;width:auto;margin-inline:6px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);margin-top:-46px}
.fl-rail b{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(0,102,255,.15);animation:flrun 2.8s var(--ease) infinite}
.fl-rail b:nth-child(2){animation-delay:1.4s;background:var(--cyan)}
@keyframes flrun{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.in .fl-node .ic,.flowline.in .fl-node .ic{animation:popin .7s var(--ease) both;animation-delay:calc(var(--n,0) * 160ms)}
@keyframes popin{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:960px){
  .flowline{grid-template-columns:1fr;justify-items:center;gap:6px}
  .fl-node{width:auto;max-width:280px}
  .fl-rail{width:2px;height:34px;min-width:0;margin:0;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px)}
  .fl-rail b{left:-4px!important;animation-name:flrunv}
}
@keyframes flrunv{0%{top:0;opacity:0}15%,85%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}

/* Illustrationen (Strichgrafik im Markenverlauf) */
.ill .s{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ill .f{stroke:none}
.ill *{transform-box:fill-box}
.a-float{animation:ilFloat 5s ease-in-out infinite}
.a-lift{animation:ilLift 2.4s ease-in-out infinite}
.a-trolley{animation:ilTrolley 6s ease-in-out infinite alternate}
.a-cable{transform-origin:50% 0;animation:ilCable 3s ease-in-out infinite alternate}
.a-drop{animation:ilDrop 6s var(--ease) infinite both;animation-delay:var(--d,0s)}
.a-move{animation:ilMove var(--t,6s) linear infinite;animation-delay:var(--d,0s)}
.a-spin{transform-origin:50% 50%;animation:ilSpin 14s linear infinite}
.a-spin-r{transform-origin:50% 50%;animation:ilSpin 9s linear infinite reverse}
.a-tap{transform-origin:85% 85%;animation:ilTap 1.6s ease-in-out infinite}
.a-twinkle{transform-origin:50% 50%;animation:ilTwinkle 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.a-type{transform-origin:0 50%;animation:ilType 6s var(--ease) infinite both;animation-delay:var(--d,0s)}
.a-blink{animation:ilBlink 1s steps(1) infinite}
.a-draw{stroke-dasharray:100;animation:ilDraw 5s var(--ease) infinite both;animation-delay:var(--d,0s)}
.a-pulse{transform-origin:50% 50%;animation:ilPulse 1.2s ease-in-out infinite}
.a-wipe{animation:ilWipe 4s ease-in-out infinite alternate}
.a-rise{animation:ilRise 5s var(--ease) infinite}
.a-flame{transform-origin:50% 0;animation:ilFlame .35s ease-in-out infinite alternate}
.a-dash{stroke-dasharray:4 7;animation:ilDash 1.6s linear infinite}
@keyframes ilFloat{50%{transform:translateY(-6px)}}
@keyframes ilLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes ilTrolley{from{transform:translateX(0)}to{transform:translateX(56px)}}
@keyframes ilCable{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@keyframes ilDrop{0%{transform:translateY(-40px);opacity:0}12%,80%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
@keyframes ilMove{0%{transform:translateX(0);opacity:0}10%,85%{opacity:1}100%{transform:translateX(var(--x,150px));opacity:0}}
@keyframes ilSpin{to{transform:rotate(360deg)}}
@keyframes ilTap{0%,100%{transform:rotate(-28deg)}45%{transform:rotate(4deg)}55%{transform:rotate(0)}}
@keyframes ilTwinkle{0%,100%{transform:scale(.3);opacity:0}50%{transform:scale(1);opacity:1}}
@keyframes ilType{0%{transform:scaleX(0)}15%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes ilBlink{50%{opacity:0}}
@keyframes ilDraw{0%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ilPulse{50%{transform:scale(1.18)}}
@keyframes ilWipe{from{transform:translateX(0)}to{transform:translateX(74px)}}
@keyframes ilRise{0%{transform:translate(0,0)}100%{transform:translate(70px,-80px)}}
@keyframes ilFlame{from{transform:scaleY(.7)}to{transform:scaleY(1.15)}}
@keyframes ilDash{to{stroke-dashoffset:-22}}

/* Branchen-Übersicht: Illustration als Kartenmotiv */
.card-art{height:132px;margin:-8px -8px 6px;border-radius:18px;overflow:hidden;position:relative;
  background:radial-gradient(120% 120% at 100% 0%,#E3EEFF 0%,#F4F8FF 55%,#FFFFFF 100%);box-shadow:inset 0 0 0 1px rgba(0,102,255,.08)}
.card-art svg{position:absolute;inset:0;width:100%;height:100%}
.hub a.card::after{top:22px;right:22px;bottom:auto;box-shadow:var(--shadow-1)}
@media (prefers-reduced-motion:reduce){.ill *,.fl-rail b,.fl-node .ic{animation:none!important}}

/* ═══ Rechner ═══ */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}
.calc-in{padding:clamp(22px,3vw,32px);border-radius:28px}
.calc-in h2{font-size:20px;margin-bottom:16px}
.calc-in .form-group input[type=text],.calc-in .form-group input[inputmode],.calc-in .form-group select{font-variant-numeric:tabular-nums}
.calc-in .unit{position:relative}
.calc-in .unit input{padding-right:44px}
.calc-in .unit::after{content:attr(data-unit);position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--muted);pointer-events:none}
.calc-in .help{font-size:13px;color:var(--muted);margin-top:2px}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);gap:4px;flex-wrap:wrap}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:9px 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.seg input:checked + span{background:var(--ink);color:#fff}
.seg input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);margin:6px 0 14px;cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand)}
.calc-out{padding:clamp(22px,3vw,32px);border-radius:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-2);position:sticky;top:100px;min-height:220px}
.calc-kpi{display:grid;gap:4px;padding:20px 22px;border-radius:20px;color:#fff;margin-bottom:18px;
  background:radial-gradient(100% 140% at 100% 0%,#1E5BFF 0%,#0B2A7A 55%,var(--navy) 100%);box-shadow:0 20px 40px -20px rgba(0,60,200,.5)}
.calc-kpi span{font-size:14px;color:rgba(255,255,255,.75)}
.calc-kpi b{font-size:clamp(30px,2vw + 18px,42px);font-weight:600;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.calc-kpi b.pos{color:#7DF5B6}.calc-kpi b.neg{color:#FFC2B8}
.calc-kpi small{font-size:13.5px;color:rgba(255,255,255,.7)}
.calc-table{width:100%;border-collapse:collapse;font-size:15px}
.calc-table th,.calc-table td{padding:10px 0!important;border-bottom:1px solid var(--line)!important;text-align:left;vertical-align:top;background:none!important;font-size:15px!important}
.calc-table th[scope=row]{font-weight:400;color:var(--ink-2)!important;padding-right:16px!important}
.calc-table td{text-align:right!important;font-variant-numeric:tabular-nums;color:var(--ink)!important;white-space:nowrap;font-weight:600}
.calc-table thead th{font-size:13px!important;color:var(--muted)!important;font-weight:600}
.calc-table thead th:last-child{text-align:right}
.calc-table tr.strong th,.calc-table tr.strong td{font-weight:700;color:var(--ink)!important}
.calc-note,.calc-hint{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.55}
.calc-hint{margin:0}
.cbars{display:grid;gap:10px;margin-bottom:16px}
.cbar{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;font-size:14px}
.cbar-l{color:var(--ink-2);line-height:1.3}
.cbar-t{height:12px;border-radius:6px;background:var(--bg);overflow:hidden}
.cbar-t i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--cyan));transition:width .6s var(--ease)}
.cbar.b1 .cbar-t i{background:linear-gradient(90deg,#9AA6B8,#C6CEDA)}
.cbar.b3 .cbar-t i{background:linear-gradient(90deg,#7B61FF,#B9A8FF)}
.cbar b{font-variant-numeric:tabular-nums;font-size:14.5px}
.disclaimer{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:16px;background:linear-gradient(180deg,#FFF8EB,#FFF3DC);box-shadow:inset 0 0 0 1px rgba(214,140,0,.22);font-size:14.5px;color:var(--ink-2);margin-bottom:18px}
.disclaimer strong{color:var(--ink)}
@media (max-width:960px){.calc{grid-template-columns:minmax(0,1fr)}.calc-out{position:static}}
@media (max-width:480px){.cbar{grid-template-columns:1fr auto}.cbar-t{grid-column:1/-1;grid-row:2}}

.calc-sub{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px}
/* Angebotsanfrage neben/unter dem Rechner */
.offer{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start;margin-top:20px}
.offer-info{padding:clamp(22px,3vw,32px);border-radius:28px;color:#fff;background:radial-gradient(100% 140% at 100% 0%,#1E5BFF 0%,#0B2A7A 55%,var(--navy) 100%);box-shadow:0 30px 60px -28px rgba(0,60,200,.5);display:grid;gap:12px}
.offer-info h2{color:#fff;font-size:clamp(22px,1vw + 16px,28px)}
.offer-info p{color:rgba(255,255,255,.8);font-size:15.5px}
.offer-info ul{display:grid;gap:8px;font-size:15px;color:rgba(255,255,255,.88)}
.offer-info li{display:flex;gap:10px}
.offer-info li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FE0FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.offer .form-card-body{padding:clamp(22px,3vw,32px)}
@media (max-width:960px){.offer{grid-template-columns:minmax(0,1fr)}}
.a-swing{animation:ilSwing 4s ease-in-out infinite alternate}
@keyframes ilSwing{from{transform:rotate(-24deg)}to{transform:rotate(30deg)}}

/* ═══════════ Preisseite v2: Flatrate-Band, Preis-Kacheln mit Animationen, Rechner-Band ═══════════ */
[hidden]{display:none!important}
/* Animationen laufen erst, wenn der Block sichtbar ist (.in von lxo.js) */
.js .rv:not(.in) .pp-viz *,.js .rv:not(.in) .pp-flat-viz *,.js .rv:not(.in) .pp-calc-viz *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.pp-viz *,.pp-flat-viz *,.pp-calc-viz *,.pp-hero *{animation:none!important}}

/* Flatrate als breites, kompaktes Band */
.pp-flat{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(22px,3vw,44px);align-items:center;
  padding:clamp(26px,3.2vw,44px);border-radius:32px;color:#fff;overflow:hidden;margin-bottom:22px;
  background:radial-gradient(80% 140% at 100% 0%,#1E5BFF 0%,#0B2A7A 46%,var(--navy) 88%);box-shadow:0 30px 60px -28px rgba(0,60,200,.55)}
.pp-flat::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(127,224,255,.22),transparent);pointer-events:none}
.pp-flat .eyebrow{color:#7FE0FF}
.pp-flat h3{color:#fff;font-size:clamp(22px,1vw + 16px,28px);margin-top:8px}
.pp-flat-price{display:flex;align-items:flex-end;gap:12px;margin:14px 0 10px}
.pp-flat-price .ab{font-size:20px;color:rgba(255,255,255,.7);padding-bottom:12px}
.pp-flat-price b{font-size:clamp(52px,3vw + 30px,76px);font-weight:600;letter-spacing:-.05em;line-height:.95}
.pp-flat-price .per{font-size:14px;line-height:1.35;color:rgba(255,255,255,.72);padding-bottom:8px}
.pp-flat-save{font-size:14.5px;color:rgba(255,255,255,.75)}
.pp-flat-save b{color:#7DF5B6;font-weight:600}
.pp-flat-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.pp-btn-w{background:#fff;color:var(--navy);box-shadow:0 10px 30px -8px rgba(255,255,255,.35)}
.pp-btn-w:hover{color:var(--navy);background:#fff;transform:translateY(-1px)}
.pp-flat-calc{color:#fff;font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
.pp-flat-calc:hover{color:#7FE0FF;border-color:#7FE0FF}
.pp-flat-list{display:grid;gap:12px;position:relative;z-index:1}
.pp-flat-list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.92)}
.pp-flat-list svg{width:20px;height:20px;flex:none;color:#7DF5B6;margin-top:1px}
/* Monats-Zeitstrahl mit wanderndem Punkt */
.pp-flat-viz{position:relative;z-index:1}
.pp-tl{position:relative;display:grid;gap:18px;padding-left:30px}
.pp-tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(127,224,255,.6),rgba(185,168,255,.4))}
.pp-tl-dot{position:absolute;left:3px;top:4px;width:12px;height:12px;border-radius:50%;background:#7FE0FF;box-shadow:0 0 0 6px rgba(127,224,255,.18),0 0 18px #7FE0FF;animation:pp-dot 8s cubic-bezier(.65,0,.35,1) infinite}
.pp-tl span{position:relative;display:block;font-size:13px;line-height:1.35;color:rgba(255,255,255,.62);animation:pp-node 8s infinite;animation-delay:calc(var(--k) * 2s)}
.pp-tl span::before{content:"";position:absolute;left:-26px;top:4px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.pp-tl b{display:block;font-size:15px;color:#fff;font-weight:600}
@keyframes pp-dot{0%,6%{transform:translateY(0)}25%,31%{transform:translateY(calc(100% * 0 + 54px))}50%,56%{transform:translateY(108px)}75%,92%{transform:translateY(162px)}100%{transform:translateY(0)}}
@keyframes pp-node{0%,22%{opacity:1}30%,100%{opacity:.55}}

/* Sechs Preis-Kacheln, gleich hoch, mit kleiner Animation */
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pp-card{display:flex;flex-direction:column;gap:10px;padding:22px clamp(20px,2vw,26px) 24px;border-radius:var(--r-l);background:var(--surface);
  box-shadow:0 0 0 1px var(--line),var(--shadow-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pp-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
.pp-viz{height:96px;margin:-4px -6px 4px;border-radius:18px;background:linear-gradient(180deg,#F5F8FE,#EDF3FD);display:grid;place-items:center;overflow:hidden}
.pp-viz svg{width:160px;height:90px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pp-name{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.pp-price{display:grid;gap:2px}
.pp-price b{font-size:clamp(28px,1.2vw + 18px,36px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.pp-price span{font-size:13.5px;color:var(--muted)}
.pp-card p{font-size:15px;color:var(--muted);line-height:1.6}
.pp-feats{display:grid;gap:7px;margin:2px 0 6px}
.pp-feats li{display:flex;gap:8px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.pp-feats svg{width:18px;height:18px;flex:none;color:var(--brand);margin-top:1px}
.pp-card .link{margin-top:auto}
@media (max-width:1060px){.pp-flat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pp-flat-viz{display:none}.pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.pp-flat{grid-template-columns:minmax(0,1fr);border-radius:26px}.pp-grid{grid-template-columns:minmax(0,1fr)}}

/* Grafiken in den Kacheln – Grundformen */
.pp-viz rect,.pp-viz circle,.pp-viz path{stroke:#0066FF;stroke-width:2}
.v-tray{fill:#fff;stroke:#9DBDF5!important}
.v-rc rect{fill:#fff}.v-rc path{stroke:#9DBDF5!important}
.v-rc{animation:v-drop 4.5s cubic-bezier(.5,0,.3,1) infinite;opacity:0}
.v-rc2{animation-delay:1.5s}.v-rc3{animation-delay:3s}
@keyframes v-drop{0%{transform:translateY(-34px);opacity:0}12%{opacity:1}34%{transform:translateY(20px);opacity:1}44%,100%{transform:translateY(26px);opacity:0}}
.v-ok circle{fill:#12B76A;stroke:#12B76A!important}.v-ok path{stroke:#fff!important;stroke-width:2.4!important}
.pp-viz-fibu .v-ok{transform-origin:118px 58px;animation:v-pop 1.5s ease-out infinite}
@keyframes v-pop{0%,30%{transform:scale(.6);opacity:.5}45%{transform:scale(1.12);opacity:1}60%,100%{transform:scale(1);opacity:1}}
.v-doc{fill:#fff;stroke:#C7D8F5!important}
.v-line,.v-eq,.v-axis{stroke:#C7D8F5!important}
.v-bars-l rect,.v-bars-r rect{fill:rgba(0,102,255,.12);stroke:none!important}
.v-bars-l rect{animation:v-grow 4s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
.v-bars-r rect{fill:rgba(123,97,255,.16);animation:v-grow 4s ease-in-out infinite .4s;transform-box:fill-box;transform-origin:left center}
.v-bars-l rect:nth-child(2){animation-delay:.15s}.v-bars-l rect:nth-child(3){animation-delay:.3s}
@keyframes v-grow{0%,8%{transform:scaleX(.15)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(.15)}}
.pp-viz-ja .v-ok{transform-origin:120px 16px;animation:v-pop2 4s ease-out infinite}
@keyframes v-pop2{0%,38%{transform:scale(0);opacity:0}48%{transform:scale(1.15);opacity:1}56%,88%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
.v-p circle,.v-p path{stroke:#7B9FE0!important}
.v-p{animation:v-hl 4.5s infinite}.v-p2{animation-delay:1.5s}.v-p3{animation-delay:3s}
@keyframes v-hl{0%,25%{opacity:1}35%,100%{opacity:.45}}
.v-slip rect{fill:#fff;stroke:#0066FF!important}
.v-slip{animation:v-slip 4.5s cubic-bezier(.3,0,.2,1) infinite;opacity:0}
.v-s2{animation-delay:1.5s}.v-s3{animation-delay:3s}
@keyframes v-slip{0%{transform:translateY(8px);opacity:0}10%,26%{transform:translateY(-4px);opacity:1}36%,100%{transform:translateY(-4px);opacity:0}}
.v-b{fill:rgba(0,102,255,.16);stroke:none!important;transform-box:fill-box;transform-origin:bottom;animation:v-bar 4s cubic-bezier(.3,0,.2,1) infinite}
.v-b2{animation-delay:.12s}.v-b3{animation-delay:.24s}.v-b4{animation-delay:.36s;fill:rgba(0,102,255,.32)}
@keyframes v-bar{0%,5%{transform:scaleY(.1)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(.1)}}
.v-seal circle{fill:rgba(18,183,106,.12);stroke:#12B76A!important}.v-seal path{stroke:#12B76A!important;stroke-width:2.4!important}
.v-seal{transform-origin:122px 24px;animation:v-stamp 4s cubic-bezier(.2,0,.2,1) infinite}
@keyframes v-stamp{0%,40%{transform:scale(1.6) rotate(-14deg);opacity:0}52%{transform:scale(.95) rotate(-8deg);opacity:1}60%,88%{transform:scale(1) rotate(-8deg);opacity:1}100%{opacity:0}}
.v-q rect{fill:#fff;stroke:#C7D8F5!important}.v-q path{stroke:#9DBDF5!important}
.v-a rect{fill:#0066FF;stroke:#0066FF!important}.v-a circle{fill:#fff;stroke:none!important}
.v-q{animation:v-in 5s ease-out infinite}
.v-a{animation:v-in 5s ease-out infinite 1.2s;opacity:0}
.v-a circle{animation:v-typ 1s ease-in-out infinite}.v-a circle:nth-of-type(2){animation-delay:.15s}.v-a circle:nth-of-type(3){animation-delay:.3s}
@keyframes v-in{0%{transform:translateY(8px);opacity:0}12%,80%{transform:none;opacity:1}92%,100%{opacity:0}}
@keyframes v-typ{0%,100%{opacity:.4}50%{opacity:1}}
.v-rows path{stroke:#C7D8F5!important;stroke-width:3!important}
.v-ticks path{stroke:#12B76A!important;stroke-width:2.6!important;opacity:0;animation:v-tick 5s infinite}
.v-ticks .t2{animation-delay:.9s}.v-ticks .t3{animation-delay:1.8s}.v-ticks .t4{animation-delay:2.7s}
@keyframes v-tick{0%,8%{opacity:0}14%,86%{opacity:1}100%{opacity:0}}
.v-lens circle{fill:rgba(255,255,255,.6)}
.v-lens{animation:v-lens 5s cubic-bezier(.6,0,.3,1) infinite}
@keyframes v-lens{0%{transform:translate(-26px,-6px)}18%{transform:translate(-26px,8px)}36%{transform:translate(-26px,22px)}54%{transform:translate(-26px,36px)}72%,100%{transform:translate(-26px,-6px)}}

/* Rechner-Band */
.pp-calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:32px;
  background:radial-gradient(70% 120% at 0% 0%,rgba(90,162,255,.22),transparent 60%),radial-gradient(60% 120% at 100% 100%,rgba(185,168,255,.24),transparent 60%),var(--surface);
  box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
.pp-calc h2{font-size:clamp(28px,1.6vw + 18px,42px);margin:10px 0 14px}
.pp-calc p{color:var(--muted);font-size:17px;line-height:1.6;max-width:56ch}
.pp-calc-steps{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.pp-calc-steps li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;color:var(--ink-2)}
.pp-calc-steps span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:12.5px}
.pp-calc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.pp-calc-note{font-size:13.5px;color:var(--muted)}
.pp-calc-viz{display:grid;place-items:center}
.pp-mini{width:min(100%,380px);padding:22px;border-radius:24px;transform:rotate(-1.5deg)}
.pp-mini-h{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px}
.pp-sl{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;margin-bottom:14px;font-size:14px;color:var(--ink-2)}
.pp-sl i{position:relative;height:6px;border-radius:6px;background:#E3EAF6}
.pp-sl b{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--brand),0 4px 10px rgba(0,102,255,.35);animation:pp-knob 4.2s ease-in-out infinite;animation-delay:var(--a)}
@keyframes pp-knob{0%,100%{left:22%}50%{left:78%}}
.pp-mini-res{margin-top:18px;padding:14px 16px;border-radius:16px;color:#fff;background:radial-gradient(100% 140% at 100% 0%,#1E5BFF,#0B2A7A 55%,var(--navy))}
.pp-mini-res span{font-size:12.5px;color:rgba(255,255,255,.75)}
.pp-seg{display:flex;gap:4px;margin-top:10px;height:10px}
.pp-seg i{border-radius:4px;background:#7FE0FF;animation:pp-seg 4.2s ease-in-out infinite}
.pp-seg i:nth-child(1){flex:4;background:#5AA2FF}.pp-seg i:nth-child(2){flex:2;background:#7FE0FF;animation-delay:-1s}.pp-seg i:nth-child(3){flex:1.5;background:#B9A8FF;animation-delay:-2s}.pp-seg i:nth-child(4){flex:1;background:#7DF5B6;animation-delay:-3s}
@keyframes pp-seg{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.7)}}
.pp-mini-btn{display:inline-flex;margin-top:14px;padding:9px 16px;border-radius:999px;background:var(--brand);color:#fff;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-brand)}
@media (max-width:900px){.pp-calc{grid-template-columns:minmax(0,1fr)}.pp-calc-viz{display:none}}

/* Kopfgrafik Preisseite */
.pp-hero{position:relative;display:grid;place-items:center;min-height:360px}
.pp-offer{width:min(100%,360px);padding:22px;border-radius:26px}
.pp-offer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--ink)}
.pp-offer-h i{font-style:normal;font-size:12px;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:999px}
.pp-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-bottom:8px;border-radius:12px;background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;color:var(--ink-2);animation:pp-row 7s cubic-bezier(.2,0,.2,1) infinite;animation-delay:calc(var(--k) * .45s)}
.pp-row em{width:22px;height:22px;border-radius:50%;background:#12B76A;color:#fff;display:grid;place-items:center}
.pp-row em svg{width:15px;height:15px}
@keyframes pp-row{0%{opacity:0;transform:translateX(-10px)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.pp-total{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding:14px 16px;border-radius:16px;color:#fff;background:radial-gradient(100% 140% at 100% 0%,#1E5BFF,#0B2A7A 55%,var(--navy))}
.pp-total span{font-size:14px;color:rgba(255,255,255,.7)}
.pp-total b{font-size:32px;font-weight:600;letter-spacing:-.04em}
.pp-total small{font-size:12.5px;color:rgba(255,255,255,.7)}
.pp-chip{position:absolute;right:0;bottom:6px;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;animation:pp-float 6s ease-in-out infinite}
.pp-chip-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff}
.pp-chip-ic svg{width:20px;height:20px}
.pp-chip b{display:block;font-size:13.5px}.pp-chip small{display:block;font-size:12px;color:var(--muted)}
@keyframes pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:960px){.pp-hero{min-height:0;margin-top:8px}.pp-chip{position:static;margin-top:14px;animation:none}}

/* ═══════════ Honorarrechner v2 ═══════════ */
.hr{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:start;margin-top:18px}
.hr-in{padding:clamp(20px,2.6vw,30px);border-radius:28px;display:grid;gap:22px}
.hr-step{border:0;margin:0;padding:0;min-width:0}
.hr-step legend{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:12px;padding:0}
.hr-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:13px}
.hr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hr-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hr-card{position:relative;cursor:pointer}
.hr-card input{position:absolute;opacity:0;pointer-events:none}
.hr-card-in{display:grid;gap:4px;height:100%;padding:14px 14px 16px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .2s,background .2s,transform .2s}
.hr-card:hover .hr-card-in{box-shadow:inset 0 0 0 1.5px #9DBDF5}
.hr-card input:checked + .hr-card-in{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.hr-card input:focus-visible + .hr-card-in{outline:2px solid var(--brand);outline-offset:3px}
.hr-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--bg);color:var(--brand);margin-bottom:4px;transition:background .2s,color .2s}
.hr-ic svg{width:20px;height:20px}
.hr-card input:checked + .hr-card-in .hr-ic{background:var(--brand);color:#fff}
.hr-card b{font-size:14.5px;line-height:1.3;color:var(--ink)}
.hr-card small{font-size:12.5px;line-height:1.4;color:var(--muted)}
.hr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.hr .unit{position:relative}.hr .unit input{padding-right:46px;font-variant-numeric:tabular-nums}
.hr .unit::after{content:attr(data-unit);position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--muted);pointer-events:none}
.hr .help{font-size:12.5px;color:var(--muted);margin-top:2px}
.hr-switch{display:flex;align-items:center;gap:12px;margin-top:12px;cursor:pointer}
.hr-switch input{position:absolute;opacity:0;pointer-events:none}
.hr-sw{position:relative;width:46px;height:28px;border-radius:999px;background:#D5DDEA;flex:none;transition:background .2s}
.hr-sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(10,19,34,.2);transition:transform .25s var(--ease)}
.hr-switch input:checked + .hr-sw{background:var(--brand)}
.hr-switch input:checked + .hr-sw::after{transform:translateX(18px)}
.hr-switch input:focus-visible + .hr-sw{outline:2px solid var(--brand);outline-offset:3px}
.hr-switch b{display:block;font-size:14.5px}.hr-switch small{display:block;font-size:12.5px;color:var(--muted)}
.hr-out{position:sticky;top:100px;display:grid;gap:14px}
.hr-out .calc-out{position:static}
.hr-cta{display:grid;gap:8px;justify-items:stretch}
.hr-offer{width:100%;justify-content:center}
.hr-cta-note{font-size:13px;color:var(--muted);text-align:center}
.hr-bar{display:flex;gap:3px;height:10px;margin:2px 0 16px;border-radius:6px;overflow:hidden}
.hr-bar i{display:block;height:100%;border-radius:3px;transition:flex-grow .5s var(--ease)}
.hr-legend{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;vertical-align:1px}
@media (max-width:960px){.hr{grid-template-columns:minmax(0,1fr)}.hr-out{position:static}}
@media (max-width:620px){.hr-cards{grid-template-columns:minmax(0,1fr)}.hr-cards-2{grid-template-columns:minmax(0,1fr)}.hr-grid{grid-template-columns:minmax(0,1fr)}
  .hr-card-in{grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.hr-ic{grid-row:span 2;margin:0}}

/* Pop-up */
.hrd{width:min(1180px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:30px;background:var(--bg);color:var(--ink);
  box-shadow:0 40px 100px -20px rgba(7,16,31,.5);overflow:hidden}
.hrd[open]{display:flex;flex-direction:column;animation:hrd-in .35s var(--ease)}
.hrd::backdrop{background:rgba(7,16,31,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes hrd-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.hrd-head{display:flex;align-items:center;gap:20px;padding:18px clamp(18px,3vw,32px);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.hrd-title{flex:1;min-width:0}
.hrd-title h2{font-size:clamp(18px,1vw + 12px,24px);margin-top:4px}
.hrd-steps{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.hrd-steps li{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--bg)}
.hrd-steps span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#D5DDEA;color:#fff;font-size:12px}
.hrd-steps li.on{color:var(--ink);background:var(--brand-soft)}.hrd-steps li.on span{background:var(--brand)}
.hrd-x{width:42px;height:42px;border-radius:50%;border:0;background:var(--bg);display:grid;place-items:center;cursor:pointer;flex:none}
.hrd-x svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.hrd-x:hover{background:#E3EAF6}
.hrd-body{overflow:auto;padding:clamp(16px,2.4vw,28px) clamp(16px,3vw,32px) clamp(20px,3vw,32px);overscroll-behavior:contain}
.hrd .hr{margin-top:14px}.hrd .hr-out{top:0}
.hrd-offer{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start}
.hrd-back{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;font:600 14.5px/1 'Inter',sans-serif;color:var(--brand);cursor:pointer;margin-bottom:16px}
.hrd-back svg{width:16px;height:16px;transform:rotate(180deg)}
.hrd-sum-box{display:grid;gap:4px;padding:20px 22px;border-radius:20px;color:#fff;background:radial-gradient(100% 140% at 100% 0%,#1E5BFF,#0B2A7A 55%,var(--navy))}
.hrd-sum-box span{font-size:13.5px;color:rgba(255,255,255,.75)}
.hrd-sum-box b{font-size:clamp(28px,1.6vw + 16px,38px);font-weight:600;letter-spacing:-.04em}
.hrd-sum-box small{font-size:13px;color:rgba(255,255,255,.72);line-height:1.5}
.hrd-sum-list{display:grid;gap:8px;margin-top:16px}
.hrd-sum-list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2)}
.hrd-sum-list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#12B76A}
.hrd-form{padding:clamp(18px,2.4vw,28px);border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-1)}
html.hrd-lock{overflow:hidden}
@media (max-width:860px){.hrd-steps{display:none}.hrd-offer{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.hrd{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}}
@media (max-width:700px){.pp-hero{display:none}}