/* ═══════════════════════════════════════════════════════════
   LXO STEUERBERATER — Global Stylesheet v2
   lxo-steuerberater.de | Mobile-first, fully audited
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@300;400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:      #080c10;
  --dark:       #0d1520;
  --dark-2:     #111d2e;
  --brand:      #0066ff;
  --brand-l:    #3385ff;
  --brand-t:    #60a5fa;
  --white:      #ffffff;
  --g100:       #f1f5f9;
  --g200:       #e2e8f0;
  --g400:       #94a3b8;
  --g600:       #475569;
  --g900:       #0f172a;
  --r:          12px;
  --rl:         20px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: #fff; color: var(--g900);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5 { font-family: 'Syne', sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }

/* ── LAYOUT ── */
.container    { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.container-sm { max-width: 800px;  margin: 0 auto; padding: 0 2rem; }
section       { padding: 100px 0; }
.s-dark    { background: var(--dark); }
.s-darkest { background: var(--black); }
.s-gray    { background: var(--g100); }
.s-white   { background: #fff; }

/* ── TYPOGRAPHY ── */
.label      { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-t); margin-bottom:1rem; }
.label-dark { color: rgba(255,255,255,.45); }
.label-blue { color: var(--brand); }
em.hi      { font-style:italic; color:var(--brand-t); }
em.hi-blue { font-style:italic; color:var(--brand); }
.sh        { font-size:clamp(1.75rem,3.2vw,2.8rem); font-weight:400; letter-spacing:-.03em; line-height:1.15; color:var(--g900); }
.sh-white  { color:#fff; }
.sh-intro  { font-size:1.05rem; color:var(--g600); max-width:540px; margin:.75rem 0 0; line-height:1.7; }
.sh-intro.wide { max-width:680px; }
.section-hd { margin-bottom:3rem; }
.section-hd.center { text-align:center; }
.section-hd.center .sh-intro { margin:.75rem auto 0; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:9px;
  font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:500;
  text-decoration:none; cursor:pointer; border:none;
  transition:background .15s,transform .1s,box-shadow .15s;
  white-space:nowrap;
}
.btn-p { background:var(--brand); color:#fff; box-shadow:0 4px 20px rgba(0,102,255,.3); }
.btn-p:hover { background:var(--brand-l); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,102,255,.4); }
.btn-g { background:transparent; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.22); }
.btn-g:hover { border-color:rgba(255,255,255,.5); color:#fff; }
.btn-o { background:transparent; color:var(--brand); border:1px solid var(--g200); }
.btn-o:hover { border-color:var(--brand); background:rgba(0,102,255,.04); }
.btn-lg { padding:16px 36px; font-size:16px; border-radius:11px; }
.btn-sm { padding:8px 18px; font-size:13px; }

/* ── NAV ── */
nav.main-nav {
  position:sticky; top:0; z-index:200;
  background:rgba(8,12,16,.94); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner {
  display:flex; align-items:center; gap:1.5rem;
  max-width:1200px; margin:0 auto; padding:0 2rem; height:64px;
}
.nav-logo {
  font-family:'Syne',sans-serif; font-size:18px; font-weight:700;
  color:#fff; text-decoration:none;
  display:flex; align-items:center; gap:9px; flex-shrink:0;
}
.nav-tagline { font-size:13px; font-weight:400; color:rgba(255,255,255,.55); }
.nav-badge {
  background:var(--brand); color:#fff; font-size:12px; font-weight:700;
  padding:3px 9px; border-radius:6px; letter-spacing:.05em; flex-shrink:0;
}
.nav-links {
  display:flex; align-items:center; gap:.15rem; list-style:none; flex:1;
  transition:none;
}
.nav-links a {
  display:block; padding:6px 12px; border-radius:7px;
  font-size:14px; color:rgba(255,255,255,.6); text-decoration:none;
  transition:color .15s,background .15s; white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active { color:#fff; background:rgba(255,255,255,.08); }
.nav-right { display:flex; align-items:center; gap:.75rem; flex-shrink:0; margin-left:auto; }
.nav-phone { font-size:13px; color:rgba(255,255,255,.45); text-decoration:none; white-space:nowrap; }
.nav-phone:hover { color:rgba(255,255,255,.7); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:transparent; border:none; cursor:pointer;
  padding:8px; border-radius:8px; transition:background .15s;
}
.nav-hamburger:hover { background:rgba(255,255,255,.08); }
.nav-hamburger span {
  display:block; width:22px; height:2px; background:rgba(255,255,255,.75);
  border-radius:2px; transform-origin:center;
  transition:transform .25s,opacity .2s,width .2s;
}
.nav-hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity:0; width:0; }
.nav-hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── BREADCRUMB ── */
.breadcrumb { background:var(--g100); border-bottom:1px solid var(--g200); padding:10px 0; }
.breadcrumb nav { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g400); flex-wrap:wrap; }
.breadcrumb a { color:var(--g600); text-decoration:none; }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb span { color:var(--g400); }

/* ── PAGE HERO ── */
.page-hero { background:var(--black); padding:80px 0; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:700px; height:500px; background:radial-gradient(ellipse,rgba(0,102,255,.20) 0%,transparent 70%); pointer-events:none; }
.page-hero-inner { position:relative; z-index:1; max-width:720px; }
.page-hero h1 { font-size:clamp(2rem,4vw,3.2rem); font-weight:400; letter-spacing:-.03em; line-height:1.12; color:#fff; margin-bottom:1rem; }
.page-hero .intro { font-size:1.05rem; color:rgba(255,255,255,.52); line-height:1.7; margin-bottom:2rem; }

/* ── MARQUEE ── */
.marquee-wrap { overflow:hidden; mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%); }
.marquee-track { display:flex; gap:3rem; align-items:center; animation:mqscroll 30s linear infinite; white-space:nowrap; }
@keyframes mqscroll { from{transform:translateX(0);}to{transform:translateX(-50%);} }
.mq-logo { font-family:'Syne',sans-serif; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.25); letter-spacing:.05em; flex-shrink:0; transition:color .2s; }
.mq-sep  { color:rgba(255,255,255,.08); }

/* ── CARDS ── */
.card {
  background:#fff; border:1px solid var(--g200); border-radius:var(--rl); padding:2rem;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card:hover { border-color:rgba(0,102,255,.28); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,102,255,.08); }
.card-dark { background:var(--dark-2); border-color:rgba(255,255,255,.07); }
.card-icon { width:44px;height:44px;border-radius:10px;background:rgba(0,102,255,.1);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:1.25rem; }
.card h3 { font-size:17px;font-weight:600;margin-bottom:.5rem;color:var(--g900); }
.card p  { font-size:14px;color:var(--g600);line-height:1.7; }
.card-dark h3 { color:#fff; }
.card-dark p  { color:rgba(255,255,255,.5); }

/* ── FEATURE LIST ── */
.feat-list { list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.feat-list li { display:flex; gap:.9rem; align-items:flex-start; }
.feat-check { width:22px;height:22px;background:rgba(0,102,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px; }
.feat-check svg { width:13px;height:13px; }
.feat-list strong { display:block;font-size:14.5px;font-weight:500;color:var(--g900);margin-bottom:2px; }
.feat-list span   { font-size:13.5px;color:var(--g600);line-height:1.65; }

/* ── GRID UTILS ── */
.grid-2    { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4    { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--g200); }
.faq-q {
  width:100%; background:none; border:none; text-align:left;
  padding:1.2rem 0; display:flex; justify-content:space-between; align-items:center;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500;
  color:var(--g900); cursor:pointer; gap:1rem;
}
.faq-q:hover { color:var(--brand); }
.faq-icon { width:24px;height:24px;border-radius:50%;border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:var(--g400);transition:transform .25s,background .2s,border-color .2s; }
.faq-item.open .faq-icon { transform:rotate(45deg);background:var(--brand);border-color:var(--brand);color:#fff; }
.faq-a { display:none;padding-bottom:1.25rem;font-size:14.5px;color:var(--g600);line-height:1.75; }
.faq-item.open .faq-a { display:block; }

/* ── CTA BANNER ── */
.cta-bar { background:var(--dark);text-align:center;padding:80px 0;position:relative;overflow:hidden; }
.cta-bar::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(0,102,255,.15) 0%,transparent 70%); }
.cta-bar > * { position:relative; }
.cta-bar h2 { font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:400;color:#fff;margin-bottom:.6rem; }
.cta-bar p  { color:rgba(255,255,255,.45);font-size:15px;margin-bottom:2rem; }

/* ── BENEFITS BAR ── */
.benefits-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.benefit { padding:2.5rem 2rem;background:var(--dark);border:1px solid rgba(255,255,255,.05);transition:background .2s; }
.benefit:hover { background:var(--dark-2); }
.benefit-n { font-family:'Syne',sans-serif;font-size:3rem;font-weight:700;color:rgba(0,102,255,.22);line-height:1;margin-bottom:.5rem; }
.benefit h3 { font-size:16px;font-weight:600;color:#fff;margin-bottom:.4rem; }
.benefit p  { font-size:13px;color:rgba(255,255,255,.4);line-height:1.65; }

/* ── PRICING ── */
.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.price-card { background:#fff;border:1px solid var(--g200);border-radius:var(--rl);padding:2rem;position:relative;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s; }
.price-card:hover { border-color:rgba(0,102,255,.3);box-shadow:0 12px 40px rgba(0,102,255,.08);transform:translateY(-4px); }
.price-card.feat { border-color:var(--brand);border-width:2px;box-shadow:0 8px 32px rgba(0,102,255,.12); }
.price-badge { position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:11px;font-weight:600;padding:3px 14px;border-radius:100px;white-space:nowrap; }
.price-name   { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--g400);margin-bottom:.4rem; }
.price-val    { font-family:'Syne',sans-serif;font-size:2rem;font-weight:700;color:var(--g900);letter-spacing:-.03em;line-height:1.1; }
.price-period { font-size:13px;color:var(--g400);margin-bottom:1rem; }
.price-desc   { font-size:13.5px;color:var(--g600);line-height:1.65;flex:1;margin-bottom:1.5rem; }
.price-feats  { list-style:none;display:flex;flex-direction:column;gap:.45rem; }
.price-feats li { display:flex;gap:8px;font-size:13px;color:var(--g600); }
.price-feats li::before { content:'✓';color:var(--brand);font-weight:700;flex-shrink:0; }
.price-note { font-size:12px;color:var(--g400);text-align:center;margin-top:2rem;line-height:1.65; }

/* ── STATS ── */
.stats-row { display:flex; gap:3rem; flex-wrap:wrap; justify-content:center; }
.stat-val   { font-family:'Syne',sans-serif;font-size:2.8rem;font-weight:700;color:var(--brand-t);letter-spacing:-.03em;line-height:1; }
.stat-label { font-size:13px;color:rgba(255,255,255,.4);margin-top:4px; }

/* ── BLOG CARDS ── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2rem; }
.blog-card { background:#fff;border:1px solid var(--g200);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s; }
.blog-card:hover { border-color:rgba(0,102,255,.28);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,102,255,.07); }
.blog-thumb { background:linear-gradient(135deg,var(--dark) 0%,#1a2d4a 100%);height:180px;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden; }
.blog-thumb::before { content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(0,102,255,.25) 0%,transparent 70%); }
.blog-thumb-label { position:relative;font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.75);text-align:center;line-height:1.4;max-width:240px; }
.blog-body   { padding:1.5rem;flex:1;display:flex;flex-direction:column; }
.blog-cat    { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);margin-bottom:.6rem; }
.blog-title  { font-size:16px;font-weight:600;color:var(--g900);line-height:1.45;margin-bottom:.75rem;text-decoration:none;display:block; }
.blog-title:hover { color:var(--brand); }
.blog-excerpt { font-size:13.5px;color:var(--g600);line-height:1.7;flex:1;margin-bottom:1.25rem; }
.blog-meta    { display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--g400); }
.blog-read-more { color:var(--brand);font-weight:500;text-decoration:none;font-size:13px; }
.blog-read-more:hover { text-decoration:underline; }

/* ── ARTICLE ── */
.article-body { font-size:16px;line-height:1.85;color:var(--g600); }
.article-body h2 { font-size:1.65rem;font-weight:600;color:var(--g900);margin:2.5rem 0 1rem;letter-spacing:-.02em; }
.article-body h3 { font-size:1.2rem;font-weight:600;color:var(--g900);margin:1.75rem 0 .75rem; }
.article-body p  { margin-bottom:1.25rem; }
.article-body ul { list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem; }
.article-body ul li { padding-left:1.5rem;position:relative; }
.article-body ul li::before { content:'→';position:absolute;left:0;color:var(--brand);font-size:13px; }
.article-body strong { color:var(--g900);font-weight:600; }
.article-body a  { color:var(--brand); }
.article-body blockquote { border-left:3px solid var(--brand);padding:1rem 1.5rem;background:rgba(0,102,255,.04);border-radius:0 8px 8px 0;margin:1.5rem 0;font-style:italic;color:var(--g600); }
.article-toc { background:var(--g100);border:1px solid var(--g200);border-radius:var(--r);padding:1.5rem 2rem;margin-bottom:2rem; }
.article-toc h4 { font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--g400);margin-bottom:.75rem; }
.article-toc ol { padding-left:1.25rem;display:flex;flex-direction:column;gap:.4rem; }
.article-toc a  { font-size:14px;color:var(--g600);text-decoration:none; }
.article-toc a:hover { color:var(--brand); }
.article-cta-box { background:var(--dark);border-radius:var(--rl);padding:2rem 2.5rem;margin:2.5rem 0;text-align:center; }
.article-cta-box h3 { color:#fff;font-size:1.3rem;font-weight:500;margin-bottom:.6rem; }
.article-cta-box p  { color:rgba(255,255,255,.5);font-size:14px;margin-bottom:1.5rem; }

/* ── TESTIMONIALS ── */
.testi-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem; }
.testi-card { background:#fff;border:1px solid var(--g200);border-radius:var(--rl);padding:2rem; }
.testi-stars  { color:#f59e0b;font-size:14px;letter-spacing:2px;margin-bottom:1rem; }
.testi-text   { font-size:15px;color:var(--g600);line-height:1.75;font-style:italic;margin-bottom:1.25rem; }
.testi-author { display:flex;align-items:center;gap:.75rem; }
.testi-avatar { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#00c4ff);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:#fff;flex-shrink:0; }
.testi-name { font-size:14px;font-weight:600;color:var(--g900); }
.testi-role { font-size:12px;color:var(--g400); }

/* ── BIG QUOTE / DARK SECTION ── */
.big-quote { background:var(--black);padding:100px 0;text-align:center;position:relative;overflow:hidden; }
.big-quote::before { content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 50%,rgba(0,102,255,.12) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(0,180,255,.07) 0%,transparent 60%); }
.big-quote-inner { position:relative;max-width:760px;margin:0 auto;padding:0 2rem; }
.quote-mark   { font-size:100px;line-height:.8;color:rgba(0,102,255,.25);font-family:'Syne',sans-serif;margin-bottom:1.5rem; }
.quote-text   { font-size:clamp(1.2rem,2.5vw,1.9rem);color:#fff;font-weight:300;line-height:1.5;letter-spacing:-.02em;margin-bottom:2rem; }
.quote-author { display:flex;align-items:center;gap:1rem;justify-content:center; }
.quote-av     { width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#00aaff);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:17px;font-weight:700;color:#fff; }
.quote-name   { font-weight:600;color:#fff;font-size:15px; }
.quote-co     { font-size:13px;color:rgba(255,255,255,.4); }

/* ── CONTACT CHIPS (dark bg only) ── */
.contact-chips { display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem; }
.contact-chip { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 20px;font-size:14px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:10px; }
.contact-chip strong { color:#fff; }

/* ── COMPARISON TABLE ── */
.comp-wrapper { overflow-x:auto;border:1px solid var(--g200);border-radius:var(--rl); }
.comp-table   { width:100%;border-collapse:collapse;font-size:14px; }
.comp-table th { background:var(--dark);color:#fff;padding:1rem 1.25rem;text-align:left;font-size:13px;font-weight:600; }
.comp-table th:not(:first-child) { text-align:center; }
.comp-table td { padding:.9rem 1.25rem;border-bottom:1px solid var(--g200);color:var(--g600);vertical-align:middle; }
.comp-table td:not(:first-child) { text-align:center; }
.comp-table tr:last-child td { border-bottom:none; }
.comp-table tr:hover td { background:rgba(0,102,255,.03); }
.comp-yes  { color:#16a34a;font-size:18px; }
.comp-no   { color:#dc2626;font-size:18px; }
.comp-maybe{ color:#d97706;font-size:14px; }
.comp-table .col-lxo { background:rgba(0,102,255,.04); }

/* ── INTEGRATIONS ── */
.int-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;margin-top:2.5rem; }
.int-chip { background:#fff;border:1px solid var(--g200);border-radius:10px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:border-color .2s,transform .2s,box-shadow .2s; }
.int-chip:hover { border-color:rgba(0,102,255,.28);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,102,255,.07); }
.int-icon { width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px; }
.int-name { font-size:11.5px;font-weight:500;color:var(--g600);text-align:center; }

/* ── CONTACT INFO CARDS (light bg) ── */
.contact-info-card { display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.5rem;background:#fff;border:1px solid var(--g200);border-radius:var(--r);margin-bottom:.75rem;transition:border-color .2s; }
.contact-info-card:hover { border-color:rgba(0,102,255,.25); }
.contact-info-icon { width:44px;height:44px;background:rgba(0,102,255,.08);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.contact-info-card h3 { font-size:14px;font-weight:600;color:var(--g900);margin-bottom:.25rem; }
.contact-info-card p  { font-size:13.5px;color:var(--g600);line-height:1.65; }
.contact-info-card a  { color:var(--brand);text-decoration:none; }
.contact-info-card a:hover { text-decoration:underline; }

/* ── TRUST ITEMS (light bg) ── */
.trust-row  { display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem; }
.trust-item { background:var(--g100);border:1px solid var(--g200);border-radius:var(--r);padding:1rem;text-align:center; }
.trust-val  { font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;color:var(--brand); }
.trust-lbl  { font-size:11px;color:var(--g400);margin-top:3px; }

/* ── PROCESS STEPS (dark) ── */
.proc-grid { display:flex;flex-direction:column; }
.proc-item { display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:2.5rem;padding:3rem 0;border-bottom:1px solid rgba(255,255,255,.06); }
.proc-item:last-child { border-bottom:none; }
.proc-item:nth-child(even) .proc-text   { order:3; }
.proc-item:nth-child(even) .proc-center { order:2; }
.proc-item:nth-child(even) .proc-vis    { order:1; }
.proc-tag { display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,102,255,.18);color:var(--brand-t);border:1px solid rgba(0,102,255,.28);padding:4px 12px;border-radius:100px;margin-bottom:.75rem; }
.proc-text h3 { font-size:1.5rem;font-weight:500;color:#fff;letter-spacing:-.02em;margin-bottom:.75rem; }
.proc-text p  { font-size:14px;color:rgba(255,255,255,.5);line-height:1.75;margin-bottom:1rem; }
.proc-text a  { font-size:13.5px;color:var(--brand-t);text-decoration:none; }
.proc-center  { display:flex;flex-direction:column;align-items:center; }
.step-n { width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,102,255,.4);background:rgba(0,102,255,.1);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--brand-t); }
.proc-vis { background:var(--dark-2);border:1px solid rgba(255,255,255,.07);border-radius:var(--rl);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:1.5rem; }
.pv { width:100%;background:rgba(255,255,255,.04);border-radius:10px;padding:1.25rem;border:1px solid rgba(255,255,255,.06); }
.pv-dots { display:flex;gap:5px;margin-bottom:1rem; }
.pv-dot  { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15); }
.pv-row  { display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem; }
.pv-c    { width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.7;flex-shrink:0; }
.pv-b    { height:7px;border-radius:3px;background:rgba(255,255,255,.12);flex:1; }
.pv-ba   { background:rgba(0,102,255,.4); }
.pv-s    { margin-top:1rem;padding:.6rem;background:rgba(0,102,255,.1);border-radius:7px; }
.pv-sv   { font-family:'Syne',sans-serif;font-size:16px;font-weight:700;color:var(--brand-t); }
.pv-sl   { font-size:10px;color:rgba(255,255,255,.35); }

/* ── IMPRESSUM ── */
.legal-body { font-size:15px;line-height:1.85;color:var(--g600);max-width:720px; }
.legal-body h2 { font-size:1.3rem;font-weight:600;color:var(--g900);margin:2rem 0 .6rem; }
.legal-body h3 { font-size:1.05rem;font-weight:600;color:var(--g900);margin:1.5rem 0 .5rem; }
.legal-body p  { margin-bottom:1rem; }
.legal-body a  { color:var(--brand); }
.legal-body address { font-style:normal;line-height:1.9; }

/* ── FOOTER ── */
footer.site-footer { background:#04080f;border-top:1px solid rgba(255,255,255,.06);padding:60px 0 32px; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem; }
.footer-brand p { font-size:13px;color:rgba(255,255,255,.38);line-height:1.7;max-width:260px;margin-top:.75rem; }
.footer-brand address { font-style:normal;margin-top:1rem;font-size:13px;color:rgba(255,255,255,.3);line-height:1.85; }
.footer-brand address a { color:rgba(255,255,255,.45);text-decoration:none; }
.footer-brand address a:hover { color:#fff; }
.footer-col h4 { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);margin-bottom:1rem;font-family:'DM Sans',sans-serif; }
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:.45rem; }
.footer-col ul a { font-size:13.5px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .15s; }
.footer-col ul a:hover { color:#fff; }
.footer-logo { font-family:'Syne',sans-serif;font-size:17px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:8px;text-decoration:none;margin-bottom:.75rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.28);flex-wrap:wrap;gap:.5rem; }
.footer-bottom a { color:rgba(255,255,255,.28);text-decoration:none; }
.footer-bottom a:hover { color:rgba(255,255,255,.6); }

/* ── ACCESSIBILITY ── */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
:focus-visible { outline:2px solid var(--brand);outline-offset:3px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 960px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:960px) {
  .grid-2    { grid-template-columns:1fr; }
  .grid-3    { grid-template-columns:1fr 1fr; }
  .grid-4    { grid-template-columns:1fr 1fr; }
  .benefits-bar { grid-template-columns:1fr 1fr; }
  .footer-grid  { grid-template-columns:1fr 1fr; }
  .stats-row    { gap:2rem; }

  /* Process: stack vertically on tablet */
  .proc-item { grid-template-columns:1fr; gap:1.5rem; }
  .proc-item:nth-child(even) .proc-text,
  .proc-item:nth-child(even) .proc-center,
  .proc-item:nth-child(even) .proc-vis { order:unset; }
  .proc-center { display:none; }
  .proc-vis { aspect-ratio:unset; min-height:140px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 640px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:640px) {
  section { padding:64px 0; }
  .container, .container-sm { padding:0 1.25rem; }

  /* NAV — show hamburger, hide desktop links */
  .nav-links {
    display:none;
    flex-direction:column; gap:.25rem;
    position:absolute; top:64px; left:0; right:0;
    background:rgba(8,12,16,.98); backdrop-filter:blur(20px);
    padding:1rem 1.25rem 1.5rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    z-index:199;
  }
  .nav-links.nav-open { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a { padding:10px 14px; font-size:15px; border-radius:8px; }
  .nav-hamburger { display:flex; }
  .nav-phone     { display:none; }
  .nav-cta-btn   { display:none; }
  .nav-tagline   { display:none; }
  .nav-inner     { position:relative; }

  /* HERO */
  .page-hero { padding:56px 0 48px; }
  .page-hero h1 { font-size:1.75rem; }

  /* GRIDS */
  .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .benefits-bar { grid-template-columns:1fr; }
  .footer-grid  { grid-template-columns:1fr; }
  .testi-grid   { grid-template-columns:1fr; }
  .blog-grid    { grid-template-columns:1fr; }
  .int-grid     { grid-template-columns:repeat(3,1fr); }

  /* STATS */
  .stats-row    { gap:1.5rem; display:grid; grid-template-columns:1fr 1fr; }
  .stat-val     { font-size:2rem; }

  /* COMPARISON TABLE */
  .comp-table   { font-size:12px; }
  .comp-table th,.comp-table td { padding:.6rem .8rem; }

  /* PROCESS */
  .proc-vis { display:none; }
  .proc-item { padding:2rem 0; }
  .proc-text h3 { font-size:1.25rem; }

  /* BENEFITS */
  .benefit { padding:1.75rem 1.25rem; }
  .benefit-n { font-size:2.5rem; }

  /* PRICING */
  .price-grid { grid-template-columns:1fr; }
  .price-card.feat { margin-top:1rem; }

  /* TABS NAV: scroll horizontal */
  .tabs-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:1px; scrollbar-width:none; }
  .tabs-nav::-webkit-scrollbar { display:none; }
  .tab-content.active { grid-template-columns:1fr !important; }
  .tab-mock { display:none; }

  /* ARTICLE */
  .article-toc { padding:1.25rem; }
  .article-cta-box { padding:1.5rem; }

  /* TRUST ROW */
  .trust-row { grid-template-columns:1fr 1fr; }

  /* FOOTER */
  .footer-grid { gap:2rem; }
  .footer-col h4 { margin-top:1.5rem; }

  /* FOOTER BOTTOM */
  .footer-bottom { flex-direction:column; text-align:center; gap:.5rem; }

  /* BIG QUOTE */
  .big-quote { padding:64px 0; }
  .quote-mark { font-size:60px; }
  .quote-text { font-size:1.15rem; }
  .contact-chips { flex-direction:column; align-items:center; }

  /* CTA BAR */
  .cta-bar { padding:56px 1.25rem; }
  .cta-bar h2 { font-size:1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 380px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:380px) {
  .grid-4   { grid-template-columns:1fr 1fr; }
  .int-grid { grid-template-columns:1fr 1fr; }
  .trust-row { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE OPTIMIERUNG — Comprehensive audit fixes
   ════════════════════════════════════════════════════════════ */

/* ── NAV: mobile hamburger properly positioned ── */
@media(max-width:640px) {
  .nav-inner { padding: 0 1.25rem; gap: 1rem; }
  .nav-logo .nav-tagline { display: none; }
  .nav-right { gap: .5rem; }
}

/* ── HERO: responsive font + spacing ── */
@media(max-width:640px) {
  .page-hero { padding: 52px 0 44px; }
  .page-hero h1 { font-size: 1.75rem; line-height: 1.2; }
  .page-hero .intro { font-size: .95rem; }
}

/* ── TABS: horizontal scroll on mobile ── */
.tabs-nav { 
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 1px; /* prevent border cutoff */
}
.tabs-nav::-webkit-scrollbar { display: none; }
@media(max-width:640px) {
  .tab-btn { padding: 8px 16px; font-size: 13px; }
  .tab-content.active { grid-template-columns: 1fr !important; }
  .tab-mock { display: none !important; }
  .tab-text h3 { font-size: 1.4rem; }
}

/* ── PROCESS STEPS: mobile ── */
@media(max-width:900px) {
  .proc-item { 
    grid-template-columns: 1fr; 
    gap: 1.25rem; 
    padding: 2rem 0; 
  }
  .proc-item:nth-child(even) .proc-text,
  .proc-item:nth-child(even) .proc-center,
  .proc-item:nth-child(even) .proc-vis { order: unset; }
  .proc-center { display: none; }
  .proc-vis { display: none; }
  .proc-text h3 { font-size: 1.25rem; }
}

/* ── BENEFITS BAR: mobile ── */
@media(max-width:640px) {
  .benefits-bar { grid-template-columns: 1fr 1fr; gap: 1px; }
  .benefit { padding: 1.75rem 1.25rem; }
  .benefit-n { font-size: 2rem; }
  .benefit h3 { font-size: 14px; }
  .benefit p { font-size: 12px; }
}

/* ── FLATRATE HERO: mobile ── */
@media(max-width:960px) {
  .flatrate-hero-body { grid-template-columns: 1fr; gap: 1.5rem; }
  .flatrate-price { font-size: 2.8rem; }
}
@media(max-width:640px) {
  .flatrate-hero { padding: 2rem 1.25rem; border-radius: 16px; }
  .flatrate-hero-badge { font-size: 12px; padding: 5px 14px; }
  .flatrate-price { font-size: 2.4rem; }
}

/* ── FURTHER GRID (pricing): mobile ── */
@media(max-width:960px) {
  .further-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
  .further-grid { grid-template-columns: 1fr; }
}

/* ── COMPARISON TABLE: scrollable ── */
.comp-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media(max-width:640px) {
  .comp-table { font-size: 12px; min-width: 540px; }
  .comp-table th, .comp-table td { padding: .65rem .85rem; }
}

/* ── BLOG GRID: mobile ── */
@media(max-width:640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-thumb { height: 140px; }
}

/* ── TESTIMONIALS: mobile ── */
@media(max-width:640px) {
  .testi-grid { grid-template-columns: 1fr; }
}

/* ── WHY GRID 3col: mobile fix ── */
@media(max-width:960px) {
  .why-grid-3col { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
  .why-grid-3col { grid-template-columns: 1fr; }
}

/* ── INTEGRATION FLEX: mobile ── */
@media(max-width:640px) {
  .int-flex .int-chip { width: calc(33.33% - .5rem); }
}
@media(max-width:400px) {
  .int-flex .int-chip { width: calc(50% - .375rem); }
}

/* ── CTA SECTIONS: mobile ── */
@media(max-width:640px) {
  .cta-section-full { padding: 44px 0; }
  .cta-section-inner { flex-direction: column; gap: 1.5rem; }
  .cta-section-inner .btn { width: 100%; justify-content: center; }
  .cta-section-title { font-size: 1.15rem; }
}

/* ── ARTICLE LAYOUT: mobile ── */
@media(max-width:900px) {
  .al { grid-template-columns: 1fr !important; }
  .as { position: static !important; }
}

/* ── BREADCRUMB: mobile ── */
@media(max-width:640px) {
  .breadcrumb nav { font-size: 12px; gap: 5px; }
}

/* ── FOOTER: mobile ── */
@media(max-width:960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media(max-width:640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .4rem; }
}

/* ── BIG QUOTE: mobile ── */
@media(max-width:640px) {
  .big-quote { padding: 60px 0; }
  .quote-mark { font-size: 60px; margin-bottom: 1rem; }
  .quote-text { font-size: 1.15rem; }
  .big-quote-inner { padding: 0 1.25rem; }
  .contact-chips { flex-direction: column; align-items: center; }
}

/* ── FLOATING CTA PILL: mobile ── */
@media(max-width:640px) {
  .floating-cta-pill { right: 16px; bottom: 20px; padding: 11px 16px; font-size: 14px; }
}

/* ── STATS ROW: mobile ── */
@media(max-width:640px) {
  .stats-row { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr; 
    gap: 1.5rem 2rem;
  }
  .stat-val { font-size: 2rem; }
  .stat-label { font-size: 12px; }
}

/* ── PRICE CARDS: prevent overflow ── */
.price-card { overflow: hidden; }
.price-val { word-break: break-word; }

/* ── GENERAL OVERFLOW FIX ── */
*, *::before, *::after { max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }