/* ═══════════════════════════════════════════════
   Ruben-media — Haupt-Stylesheet
   Basierend auf dem Design-Entwurf (Vorlage)
   ═══════════════════════════════════════════════ */

:root{
  --navy-900:#071634;
  --navy-800:#0b2149;
  --navy-700:#122c5e;
  --navy-600:#1c3a72;
  --ink:#0c1a33;
  --muted:#5c6a86;
  --muted-2:#8794ac;
  --line:#e6eaf2;
  --line-2:#eef2f8;
  --paper:#ffffff;
  --paper-2:#f5f8fd;
  --paper-3:#eef3fb;

  --accent:#2f6bff;
  --accent-600:#1f56e6;
  --accent-050:#eaf1ff;
  --accent-glow:rgba(47,107,255,.30);

  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(12,26,51,.06), 0 2px 6px rgba(12,26,51,.05);
  --shadow-md:0 10px 30px -12px rgba(12,26,51,.18);
  --shadow-lg:0 30px 70px -28px rgba(12,26,51,.35);

  --sans:'Manrope', system-ui, -apple-system, sans-serif;
  --display:'Sora', system-ui, sans-serif;

  --maxw:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0; color:var(--ink);}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}

/* Anker landen nicht unter der Sticky-Navigation */
section[id], a[id]{scroll-margin-top:84px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-600);
}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--accent);}
.lead{color:var(--muted); font-size:19px; line-height:1.65;}
.section{padding:104px 0;}
.section.tight{padding:84px 0;}
.center{text-align:center;}
.center .eyebrow::before{display:none;}
.center .eyebrow{gap:0;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{
  background:var(--accent); color:#fff;
  box-shadow:0 10px 26px -8px var(--accent-glow);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -10px var(--accent-glow); background:var(--accent-600);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-600); transform:translateY(-2px);}
.btn-light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.24);}
.btn-light:hover{background:rgba(255,255,255,.18); transform:translateY(-2px);}
.btn-wa{background:#25D366; color:#0b3d1e;}
.btn-wa:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(37,211,102,.5);}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; background:var(--paper);
  border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.pill svg{width:15px;height:15px; color:var(--accent);}
.pill--plain{box-shadow:none; background:var(--paper-2);}

/* ─── NAV ─── */
header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
header.nav.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(12,26,51,.3);}
.nav-inner{display:flex; align-items:center; gap:20px; height:72px;}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em;}
.logo .mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(150deg, var(--accent), var(--navy-700));
  display:grid; place-items:center; color:#fff; font-size:17px; box-shadow:var(--shadow-sm);
}
.logo b{font-weight:700}
.logo .dot{color:var(--accent)}
.nav-links{display:flex; gap:6px; margin-left:auto;}
.nav-links a{
  padding:9px 14px; border-radius:999px; font-weight:600; font-size:15px; color:var(--muted);
  transition:color .2s, background .2s;
}
.nav-links a:hover{color:var(--ink); background:var(--paper-2);}
.nav-cta{margin-left:8px;}
.nav-burger{display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);}
.nav-burger svg{width:22px;height:22px}

/* mobiles Menü (Dropdown unter der Navigation) */
.mobile-menu{
  display:none;
  position:absolute; left:0; right:0; top:72px;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-md);
  padding:8px 24px 20px;
}
.mobile-menu.open{display:block;}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu nav a{
  padding:14px 8px; font-weight:600; font-size:16px; color:var(--ink);
  border-bottom:1px solid var(--line-2);
}
.mobile-menu nav a:active{color:var(--accent-600);}
.mobile-menu .btn{margin-top:16px; width:100%;}
@media (min-width:961px){ .mobile-menu{display:none !important;} }

/* ─── HERO ─── */
.hero{position:relative; overflow:hidden; padding:76px 0 96px;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 82% -8%, var(--accent-050) 0%, rgba(234,241,255,0) 55%),
    radial-gradient(90% 70% at 6% 8%, #f2f6fe 0%, rgba(242,246,254,0) 60%);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px;}
.hero h1{font-size:clamp(38px, 5.4vw, 62px); margin-bottom:22px;}
.hero h1 .hl{position:relative; white-space:nowrap;}
.hero h1 .hl::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:.08em; height:.34em; z-index:-1;
  background:var(--accent); opacity:.22; border-radius:4px;
}
.hero .lead{max-width:33ch; margin-bottom:32px;}
/* Mini-Visual im Hero: nur auf dem Handy sichtbar (siehe Media-Query) */
.hero-mini{display:none;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.hero-note{margin-top:22px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14.5px;}
.hero-note .stars{color:#f5a623; letter-spacing:2px; font-size:15px;}
.hero-note .avatars{display:flex;}
.hero-note .avatars span{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px; background:var(--paper-3); display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--navy-700);}
.hero-note .avatars span:first-child{margin-left:0}

/* hero visual — stacked browser + phone mock */
.hero-visual{position:relative;}
.mock-browser{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; transform:rotate(-1deg);
}
.mock-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line-2); background:var(--paper-2);}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:#d7deea; display:block}
.mock-bar i:nth-child(1){background:#ff9c9c} .mock-bar i:nth-child(2){background:#ffd479} .mock-bar i:nth-child(3){background:#8fe3a6}
.mock-url{margin-left:10px; flex:1; height:22px; border-radius:999px; background:#fff; border:1px solid var(--line);}
.mock-body{padding:22px;}
.mock-hero{height:96px; border-radius:14px; background:linear-gradient(120deg,var(--navy-800),var(--accent)); position:relative; overflow:hidden; margin-bottom:16px;}
.mock-hero::after{content:""; position:absolute; left:20px; top:26px; width:46%; height:12px; border-radius:6px; background:rgba(255,255,255,.55); box-shadow:0 22px 0 rgba(255,255,255,.35), 0 -12px 0 rgba(255,255,255,.75);}
.mock-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.mock-card{height:74px; border-radius:12px; background:var(--paper-2); border:1px solid var(--line-2);}
.mock-lines{margin-top:16px; display:flex; flex-direction:column; gap:9px;}
.mock-lines i{height:9px; border-radius:5px; background:var(--paper-3); display:block}
.mock-lines i:nth-child(1){width:82%} .mock-lines i:nth-child(2){width:64%} .mock-lines i:nth-child(3){width:72%}

.mock-phone{
  position:absolute; right:-14px; bottom:-30px; width:132px;
  background:#fff; border:1px solid var(--line); border-radius:26px; padding:9px;
  box-shadow:var(--shadow-lg); transform:rotate(4deg);
}
.mock-phone .scr{border-radius:18px; overflow:hidden; background:var(--paper-2);}
.mock-phone .scr .top{height:44px; background:linear-gradient(120deg,var(--accent),var(--navy-700));}
.mock-phone .scr .bd{padding:10px; display:flex; flex-direction:column; gap:7px;}
.mock-phone .scr .bd i{height:7px;border-radius:4px;background:var(--paper-3); display:block}
.mock-phone .scr .bd i:nth-child(2){width:70%} .mock-phone .scr .bd i:nth-child(3){width:85%}
.mock-phone .scr .btn-mini{height:22px;border-radius:7px;background:var(--accent);margin-top:4px}

.float-badge{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-md); padding:11px 14px; display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:14px;
}
.float-badge .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;}
.float-badge small{display:block; font-weight:600; color:var(--muted); font-size:12px;}
.fb-calls{left:-26px; top:34px;}
.fb-calls .ic{background:var(--accent-050); color:var(--accent-600);}
.fb-rating{right:6px; top:-22px;}
.fb-rating .ic{background:#fff4e0; color:#f5a623;}

/* logo strip */
.trustbar{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2);}
.trustbar .wrap{display:flex; align-items:center; gap:32px; padding-top:22px; padding-bottom:22px; flex-wrap:wrap; justify-content:center;}
.trustbar span.lbl{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);}
.trustbar .logos{display:flex; gap:36px; flex-wrap:wrap; align-items:center; opacity:.62;}
.trustbar .logos b{font-family:var(--display); font-weight:700; font-size:19px; color:var(--navy-700); letter-spacing:-.02em;}

/* ─── PROBLEM (ranking list) ─── */
.problem{background:var(--paper);}
.problem h2, .sec-h2{font-size:clamp(30px,3.6vw,44px); margin:14px 0 16px;}
.problem-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center;}
.problem-head{max-width:460px;}
.problem-cta{margin-top:26px; display:inline-flex; align-items:center; gap:12px; background:var(--navy-900); color:#fff; padding:13px 18px 13px 16px; border-radius:14px; box-shadow:var(--shadow-md); font-weight:600; font-size:15px;}
.problem-cta .arw{width:30px;height:30px;flex:none;border-radius:9px;background:var(--accent);display:grid;place-items:center;}
.problem-cta .arw svg{width:16px;height:16px;color:#fff}

.rank-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:14px;}
.rank-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 8px 14px; border-bottom:1px solid var(--line-2);}
.rank-search{display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); font-size:15px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:9px 16px;}
.rank-search svg{width:16px;height:16px;color:var(--muted-2);}
.rank-tag{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap;}
.rank-list{display:flex; flex-direction:column;}
.rank-row{display:flex; align-items:center; gap:14px; padding:15px 10px; border-bottom:1px solid var(--line-2);}
.rank-row:last-child{border-bottom:0;}
.rank-no{width:20px; flex:none; text-align:center; font-family:var(--display); font-weight:700; font-size:15px; color:var(--muted-2);}
.rank-avatar{width:46px;height:46px;flex:none;border-radius:50%; background:var(--paper-3); display:grid;place-items:center; color:var(--navy-700);}
.rank-avatar svg{width:23px;height:23px;}
.rank-info{flex:1; min-width:0;}
.rank-info b{display:block; font-size:15.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rank-info span{display:block; font-size:13.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rank-rating{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:1px;}
.rank-rating .rv{display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:16px; color:var(--ink);}
.rank-rating .rv .star{color:#f5a623;}
.rank-rating small{font-weight:600; color:var(--muted-2); font-size:11.5px;}
.you-tag{display:inline-block; margin-left:8px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#c0392b; background:#fdeceb; border-radius:999px; padding:2px 8px; vertical-align:middle;}
.rank-row.is-you{background:#fdf2f1; border:1px solid #f6d5d0; border-radius:14px; margin-top:6px;}
.rank-row.is-you .rank-no{color:#e04a3a;}
.rank-row.is-you .rank-avatar{background:#fbe0dc; color:#c0392b;}
.rank-row.is-you .rank-rating .rv{color:#c0392b;}
.rank-row.is-you .rank-rating .rv .star{color:#e6a9a0;}

/* ─── SOLUTION ─── */
.solution{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sol-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.feature{display:flex; gap:16px; padding:20px 0; border-bottom:1px dashed var(--line);}
.feature:last-child{border-bottom:0;}
.feature .fic{width:50px;height:50px;flex:none;border-radius:14px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--accent-600); box-shadow:var(--shadow-sm);}
.feature .fic svg{width:24px;height:24px}
.feature h3{font-size:19px; margin-bottom:4px;}
.feature p{color:var(--muted); font-size:15.5px;}
.sol-panel{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  border-radius:var(--radius-lg); padding:38px; color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.sol-panel::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.5;}
.sol-panel .k{position:relative; z-index:1;}
.sol-panel .eyebrow{color:#8fb0ff;}
.sol-panel .eyebrow::before{background:var(--accent);}
.sol-panel h3{color:#fff; font-size:26px; margin:14px 0 12px;}
.sol-panel p{color:rgba(255,255,255,.72); font-size:15.5px;}
.sol-sub{margin-top:26px; display:flex; align-items:center; gap:16px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);}
.sol-sub .price{font-family:var(--display); font-weight:700; font-size:38px; color:#fff;}
.sol-sub .price small{font-size:15px; color:rgba(255,255,255,.6); font-weight:600;}
.sol-sub .txt{color:rgba(255,255,255,.72); font-size:14.5px;}

/* ─── PRICING ─── */
.pricing{background:var(--paper);}
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:900px; margin:52px auto 0; align-items:stretch;}
.card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:34px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.card .plan{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.card .price{font-family:var(--display); font-weight:700; font-size:52px; margin:14px 0 2px; letter-spacing:-.03em;}
.card .price small{font-size:18px; color:var(--muted); font-weight:600; letter-spacing:0;}
.card .ptag{color:var(--muted); font-size:15px; min-height:24px;}
.card ul{list-style:none; padding:0; margin:24px 0 28px; display:flex; flex-direction:column; gap:14px;}
.card li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink);}
.card li svg{width:20px;height:20px;flex:none;color:var(--accent-600); margin-top:1px;}
.card li.muted{color:var(--muted-2);}
.card li.muted svg{color:var(--muted-2);}
.card .btn{margin-top:auto; width:100%;}

/* Partner card — gradient fade border */
.card.featured{
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.card.featured::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius-lg); padding:1.8px;
  background:linear-gradient(150deg, var(--accent), rgba(47,107,255,.15) 42%, rgba(255,255,255,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.card.featured::after{
  content:""; position:absolute; left:50%; top:-40%; transform:translateX(-50%);
  width:120%; height:80%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  opacity:.55; filter:blur(6px); pointer-events:none;
}
.ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-weight:700; font-size:13px; letter-spacing:.04em;
  padding:7px 16px; border-radius:999px; box-shadow:0 8px 20px -8px var(--accent-glow); white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
.ribbon svg{width:14px;height:14px}
.price-note{text-align:center; margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ─── RESULTS ─── */
.results{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:40px;}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center; box-shadow:var(--shadow-sm);}
.stat .n{font-family:var(--display); font-weight:700; font-size:44px; letter-spacing:-.03em; color:var(--navy-800);}
.stat .n .u{color:var(--accent-600);}
.stat .l{color:var(--muted); font-size:14.5px; margin-top:4px;}
.quote-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; margin:0;}
.quote .stars{color:#f5a623; letter-spacing:2px; font-size:16px;}
.quote p{color:var(--ink); font-size:15.5px; line-height:1.6;}
.quote .who{display:flex; align-items:center; gap:12px; margin-top:auto;}
.quote .who .av{width:42px;height:42px;border-radius:50%; background:var(--paper-3); display:grid;place-items:center; font-weight:700; color:var(--navy-700); flex:none;}
.quote .who b{display:block; font-size:15px;}
.quote .who span{color:var(--muted); font-size:13.5px;}
.quote .gbadge{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted);}
.quote .gbadge .g{width:18px;height:18px}

/* ─── ABOUT ─── */
.about{background:var(--paper);}
.about-grid{display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center;}
.portrait{
  position:relative; aspect-ratio:1/1.08; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--paper-3),#dfe8f7); border:1px solid var(--line); box-shadow:var(--shadow-md);
  display:grid; place-items:center;
}
.portrait .ph{color:var(--muted-2); font-size:14px; font-weight:600; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;}
.portrait .ph svg{width:52px;height:52px; opacity:.5}
/* Foto füllt den Rahmen formatfüllend, ohne zu verzerren.
   object-position steuert den sichtbaren Ausschnitt:
   1. Wert = links↔rechts (0% = ganz links, 100% = ganz rechts)
   2. Wert = oben↔unten  (0% = ganz oben, 100% = ganz unten)
   Kleinere Zahlen holen den Fokus nach links bzw. oben. */
.portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 100%; display:block;
  /* In den unteren, linken Bereich reinzoomen — dort sitzt Rubens Gesicht.
     transform-origin = Ankerpunkt (35% von links, ganz unten). */
  transform:scale(1.75); transform-origin:35% 100%;
}
/* Weicher Verlauf unten, damit die Signatur über hellen Fotos lesbar bleibt */
.portrait:has(img)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, rgba(7,22,52,.55), transparent); pointer-events:none;}
.portrait:has(img) .sig{color:#fff;}
.portrait .sig{position:absolute; left:20px; bottom:18px; z-index:1; font-family:var(--display); font-weight:700; font-size:22px; color:var(--navy-800);}
.about h2{font-size:clamp(28px,3.4vw,42px); margin:14px 0 20px;}
.about p + p{margin-top:16px;}
.about .lead{color:var(--muted);}
.about-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}

/* ─── CONTACT ─── */
.contact{background:linear-gradient(165deg,var(--navy-800),var(--navy-900)); color:#fff; position:relative; overflow:hidden;}
.contact::before{content:"";position:absolute; right:-8%; top:-30%; width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 68%); opacity:.35;}
.contact::after{content:"";position:absolute; left:-10%; bottom:-40%; width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,#1b3f86,transparent 70%); opacity:.5;}
.contact .wrap{position:relative; z-index:1;}
.contact-grid{display:grid; grid-template-columns:1fr 1.02fr; gap:56px; align-items:center;}
.contact h2{color:#fff; font-size:clamp(30px,3.8vw,46px); margin:16px 0 16px;}
.contact .eyebrow{color:#8fb0ff;} .contact .eyebrow::before{background:var(--accent);}
.contact .lead{color:rgba(255,255,255,.76); max-width:44ch;}
.contact-points{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:14px;}
.contact-points li{display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.86); font-weight:600;}
.contact-points li svg{width:20px;height:20px;color:#8fe3a6; flex:none;}
.wa-row{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}

.form{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:30px; backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.form h3{color:#fff; font-size:21px; margin-bottom:4px;}
.form .sub{color:rgba(255,255,255,.6); font-size:14.5px; margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.75); margin-bottom:7px;}
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:13px 15px; color:#fff; font-family:var(--sans); font-size:15.5px;
  transition:border-color .2s, background .2s;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.4);}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); background:rgba(255,255,255,.12);}
.field textarea{resize:vertical; min-height:96px;}
/* Dropdown „Dein Anliegen" — gleiche Optik wie die Inputs, eigener Pfeil */
.field select{
  width:100%; background-color:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:13px 42px 13px 15px; color:#fff; font-family:var(--sans); font-size:15.5px;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aebedd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  transition:border-color .2s, background-color .2s;
}
.field select:focus{outline:none; border-color:var(--accent); background-color:rgba(255,255,255,.12);}
/* Options-Liste lesbar (heller Hintergrund, dunkle Schrift) */
.field select option{color:var(--ink); background:#fff;}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form .btn{width:100%; margin-top:6px;}
.form .btn:disabled{opacity:.6; cursor:wait; transform:none;}
.form .fineprint{margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.5); text-align:center;}
.form-error{display:none; margin-top:14px; text-align:center; font-size:14px; color:#ffb4a8;}
.form-error.show{display:block;}
.form-error a{text-decoration:underline; color:#fff;}
.form-success{display:none; text-align:center; padding:26px 10px;}
.form-success.show{display:block;}
.form-success .ok{width:64px;height:64px;border-radius:50%; background:rgba(143,227,166,.16); border:1px solid rgba(143,227,166,.4); display:grid;place-items:center; margin:0 auto 16px; color:#8fe3a6;}
.form-success .ok svg{width:32px;height:32px}
.form-success h3{color:#fff; font-size:22px; margin-bottom:8px;}
.form-success p{color:rgba(255,255,255,.7); font-size:15px;}

/* ─── FOOTER ─── */
footer.ft{background:var(--navy-900); color:rgba(255,255,255,.62); padding:52px 0 30px;}
.ft-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1);}
.ft .logo{color:#fff;}
.ft-about{max-width:300px;}
.ft-about p{margin-top:14px; font-size:14.5px; line-height:1.6;}
.ft-cols{display:flex; gap:56px; flex-wrap:wrap;}
.ft-col h4{color:#fff; font-family:var(--sans); font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; font-weight:700;}
.ft-col a{display:block; padding:5px 0; font-size:14.5px; transition:color .2s;}
.ft-col a:hover{color:#fff;}
.ft-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; font-size:13.5px;}
.ft-bottom a:hover{color:#fff;}

/* ─── Rechtsseiten (Impressum / Datenschutz) ─── */
.legal{max-width:760px; margin:0 auto; padding:72px 24px 104px;}
.legal h1{font-size:clamp(32px,4vw,44px); margin-bottom:28px;}
.legal h2{font-size:22px; margin:36px 0 12px;}
.legal p{color:var(--muted); margin-bottom:12px;}
.legal .hint{
  background:var(--accent-050); border:1px solid #d6e3ff; border-radius:var(--radius);
  padding:16px 20px; color:var(--navy-700); font-size:15px; margin-bottom:32px;
}

/* ─── reveal animation ─── */
@media (prefers-reduced-motion: no-preference){
  html.anim [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
  html.anim [data-reveal].in{opacity:1; transform:none;}
  html.anim [data-reveal][data-d="1"]{transition-delay:.08s}
  html.anim [data-reveal][data-d="2"]{transition-delay:.16s}
  html.anim [data-reveal][data-d="3"]{transition-delay:.24s}
}

/* ─── responsive ─── */
@media (max-width:960px){
  /* minmax(0,1fr) statt 1fr: verhindert, dass breite Inhalte
     (z. B. nowrap-Texte) die Spalte über den Viewport hinaus aufspannen */
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:44px;}
  .hero-visual{width:100%; max-width:440px; margin:0 auto;}
  .sol-grid, .about-grid, .contact-grid{grid-template-columns:minmax(0,1fr); gap:36px;}
  .problem-grid{grid-template-columns:minmax(0,1fr); gap:36px;}
  .problem-head{max-width:none;}
  .about-grid .portrait{max-width:320px;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-burger{display:flex;}
}
@media (max-width:760px){
  .section{padding:72px 0;}
  body{font-size:16px;}
  .price-grid{grid-template-columns:minmax(0,1fr); max-width:440px;}
  .card.featured::after{width:100%;} /* Glow nicht über den Viewport hinaus */
  .stat-row, .quote-row{grid-template-columns:minmax(0,1fr);}
  .form .row2{grid-template-columns:minmax(0,1fr);}
  .hero-note .stars{font-size:14px;}
  /* Das große Hero-Visual (Browser + Handy nebeneinander) bleibt auf dem
     Handy aus; stattdessen zeigen wir ein kompaktes Mini-Visual im Textfluss. */
  .hero{padding:52px 0 60px;}
  .hero-grid{gap:0;}
  .hero-visual{display:none;}

  /* Mini-Visual: nur das „Mehr Anrufe"-Badge — dezent, rechts, etwas höher
     und leicht nach rechts gedreht. Reine Deko im Hintergrund (reduzierte
     Deckkraft, weicher Schatten), pointer-events:none für Klicks dahinter. */
  .hero-mini{
    display:flex; justify-content:flex-end;
    position:relative; z-index:0; pointer-events:none;
    margin:-34px 6px 14px 0;
  }
  .hero-mini .float-badge{
    position:relative; left:auto; top:auto; /* Offsets aus .fb-calls neutralisieren */
    transform:rotate(10deg);
    opacity:.62;
    box-shadow:0 10px 24px -14px rgba(12,26,51,.22);
    padding:9px 12px; font-size:13px; border-radius:12px;
  }
  .hero-mini .float-badge .ic{width:28px;height:28px;}

  /* „Als Abo"-Panel in der Lösung auf dem Handy ausblenden */
  .solution .sol-panel{display:none;}
  .sol-grid{gap:0;}
  /* Ranking-Zeilen kompakter */
  .rank-head{flex-direction:column; align-items:stretch; gap:8px;}
  .rank-search{justify-content:center;}
  .rank-tag{text-align:center;}
  .rank-row{gap:11px; padding:13px 6px;}
  .rank-avatar{width:40px;height:40px;}
}
@media (max-width:440px){
  .wrap{padding:0 18px;}
  .card, .sol-panel, .form{padding:24px;}
  .hero-cta .btn{width:100%;}
  .wa-row .btn{width:100%;}
}