/* ═══════════════════════════════════════════════
   CRAFTLEAD.DE — style.css v2
   Hell, warm, handwerklich — für Handwerker gebaut
   Fonts: Plus Jakarta Sans + Nunito
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  --pri:   #0f2d4a;
  --acc:   #00a896;
  --acc-d: #008a7b;
  --acc-l: #e6f7f5;
  --amb:   #f59e0b;
  --amb-l: #fff8e6;
  --warm:  #faf8f5;
  --white: #ffffff;
  --text:  #1a1a2e;
  --muted: #6b7280;
  --border:#e8e4de;
  --rad:   14px;
  --sh:    0 2px 16px rgba(15,45,74,.07);
  --sh-lg: 0 8px 40px rgba(15,45,74,.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;font-size:16px;color:var(--text);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}

h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.15;letter-spacing:-.025em}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:12px}
.eyebrow::before{content:'';display:block;width:22px;height:2px;background:var(--acc);border-radius:2px}
.sec-title{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:800;color:var(--pri);margin-bottom:14px}
.sec-sub{font-size:1rem;color:var(--muted);max-width:520px;margin-bottom:44px;line-height:1.7}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:100px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.93rem;font-weight:700;cursor:pointer;border:2px solid transparent;transition:all .22s;white-space:nowrap}
.btn-pri{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 4px 16px rgba(0,168,150,.25)}
.btn-pri:hover{background:var(--acc-d);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,168,150,.3)}
.btn-out{background:transparent;color:var(--pri);border-color:var(--border)}
.btn-out:hover{border-color:var(--pri);background:var(--warm)}
.btn-full{width:100%;justify-content:center}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:box-shadow .3s}
.nav.scrolled{box-shadow:var(--sh)}
.nav-in{max-width:1080px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:9px}
.nav-dot{width:33px;height:33px;background:var(--acc);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:15px;color:#fff;flex-shrink:0}
.nav-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.02rem;font-weight:800;color:var(--pri)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:.87rem;font-weight:600;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--pri)}
.nav-login{background:var(--pri)!important;color:#fff!important;padding:7px 17px!important;border-radius:100px!important;font-weight:700!important;font-size:.83rem!important}
.nav-login:hover{background:#1a4a6e!important}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--pri);border-radius:2px;transition:all .3s}
.nav-mob{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--border);padding:12px 20px 16px;gap:2px}
.nav-mob a{padding:10px 0;font-size:.95rem;font-weight:600;color:var(--pri);border-bottom:1px solid var(--border)}
.nav-mob.open{display:flex}

/* HERO */
.hero{padding-top:60px;background:var(--warm);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;right:0;width:55%;height:100%;background:linear-gradient(135deg,#e8f5f3 0%,#f0faf8 100%);clip-path:polygon(12% 0%,100% 0%,100% 100%,0% 100%);z-index:0}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:68px 0 76px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--amb-l);border:1.5px solid #fcd34d;color:#92400e;font-size:.8rem;font-weight:800;padding:5px 14px;border-radius:100px;margin-bottom:20px}
.badge-dot{width:7px;height:7px;background:var(--amb);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.hero-title{font-size:clamp(2rem,4.5vw,3rem);font-weight:900;color:var(--pri);margin-bottom:16px;line-height:1.1}
.hero-acc{color:var(--acc);display:block}
.hero-sub{font-size:1.02rem;color:#4b5563;line-height:1.7;margin-bottom:28px;max-width:430px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-checks{display:flex;flex-direction:column;gap:7px}
.hcheck{display:flex;align-items:center;gap:8px;font-size:.87rem;font-weight:700;color:#374151}
.hcheck-ic{width:19px;height:19px;background:var(--acc);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;flex-shrink:0}

/* Hero Cards */
.hero-vis{display:flex;flex-direction:column;gap:13px}
.hero-card{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:var(--sh-lg);border:1px solid var(--border)}
.hc-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.hc-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.hc-ic.g{background:#dcfce7}
.hc-ic.b{background:#dbeafe}
.hc-ic.a{background:#fef9c3}
.hc-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:800;color:var(--pri)}
.hc-sub{font-size:.72rem;color:var(--muted)}
.hc-bar{height:5px;background:#f0f0f0;border-radius:5px;overflow:hidden}
.hc-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc),#00c9b3)}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.stat{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:var(--sh);border:1px solid var(--border);text-align:center}
.stat-n{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.4rem;font-weight:900;color:var(--pri);line-height:1}
.stat-l{font-size:.72rem;color:var(--muted);margin-top:2px;font-weight:700}

/* TRUST */
.trust{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0}
.trust-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.trust-i{display:flex;align-items:center;gap:7px;padding:0 28px;font-size:.84rem;font-weight:700;color:var(--pri);border-right:1px solid var(--border)}
.trust-i:last-child{border-right:none}

/* PROBLEM */
.problem{padding:76px 0;background:#fff}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.prob-card{background:var(--warm);border-radius:var(--rad);padding:24px;border:1px solid var(--border);position:relative;overflow:hidden}
.prob-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ef4444,#f97316)}
.prob-em{font-size:1.9rem;margin-bottom:11px}
.prob-card h3{font-size:.96rem;font-weight:800;color:var(--pri);margin-bottom:7px}
.prob-card p{font-size:.84rem;color:var(--muted);line-height:1.6}

/* FEATURES */
.features{padding:76px 0;background:var(--warm)}
.feat-big{background:#fff;border-radius:20px;padding:36px;margin-bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;border:1px solid var(--border);box-shadow:var(--sh)}
.feat-tag{display:inline-block;background:var(--acc-l);color:var(--acc);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 11px;border-radius:100px;margin-bottom:12px}
.feat-big h3{font-size:1.45rem;font-weight:800;color:var(--pri);margin-bottom:11px}
.feat-big p{font-size:.9rem;color:#4b5563;line-height:1.7;margin-bottom:16px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.feat-list li{display:flex;align-items:flex-start;gap:7px;font-size:.87rem;color:var(--text);font-weight:600}
.feat-list li::before{content:'✓';color:var(--acc);font-weight:900;flex-shrink:0;margin-top:1px}
.dm{background:var(--pri);border-radius:13px;overflow:hidden;box-shadow:0 18px 44px rgba(15,45,74,.2)}
.dm-bar{background:rgba(255,255,255,.06);padding:9px 13px;display:flex;align-items:center;gap:6px}
.dm-d{width:8px;height:8px;border-radius:50%}
.dm-d.r{background:#ef4444}.dm-d.y{background:#f59e0b}.dm-d.g{background:#22c55e}
.dm-url{font-size:.62rem;color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);padding:3px 11px;border-radius:20px;margin-left:4px;font-family:monospace}
.dm-body{padding:20px 16px;display:flex;flex-direction:column;gap:8px}
.dm-l{height:7px;background:rgba(255,255,255,.1);border-radius:5px}
.dm-l.w80{width:80%}.dm-l.w60{width:60%}.dm-l.w40{width:40%;height:11px;background:rgba(0,168,150,.45)}
.dm-tags{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap}
.dm-t{font-size:.6rem;background:rgba(255,255,255,.09);color:rgba(255,255,255,.65);padding:2px 8px;border-radius:20px}
.dm-t.a{background:rgba(0,168,150,.22);color:#00a896}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fc{background:#fff;border-radius:var(--rad);padding:22px;border:1px solid var(--border);transition:all .22s}
.fc:hover{border-color:var(--acc);box-shadow:0 4px 20px rgba(0,168,150,.12);transform:translateY(-2px)}
.fc-ic{font-size:1.5rem;margin-bottom:11px}
.fc h3{font-size:.93rem;font-weight:800;color:var(--pri);margin-bottom:6px}
.fc p{font-size:.83rem;color:var(--muted);line-height:1.6}

/* FLOW */
.flow{padding:76px 0;background:#fff}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;position:relative}
.flow-steps::before{content:'';position:absolute;top:27px;left:12%;right:12%;height:2px;background:var(--border);z-index:0}
.flow-step{text-align:center;position:relative;z-index:1;padding:0 10px}
.flow-n{width:54px;height:54px;background:#fff;border:3px solid var(--acc);border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;font-weight:900;color:var(--acc)}
.flow-step h3{font-size:.88rem;font-weight:800;color:var(--pri);margin-bottom:5px}
.flow-step p{font-size:.79rem;color:var(--muted);line-height:1.55}

/* PREISE */
.pricing{padding:76px 0;background:var(--warm)}
.pricing-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start;margin-top:38px}
.price-card{background:#fff;border-radius:20px;overflow:hidden;border:2px solid var(--acc);box-shadow:var(--sh-lg)}
.price-head{background:var(--pri);padding:26px 26px 22px;color:#fff}
.price-badge{display:inline-block;background:var(--amb);color:var(--pri);font-size:.7rem;font-weight:800;padding:3px 11px;border-radius:100px;margin-bottom:13px;text-transform:uppercase;letter-spacing:.06em}
.price-amt{font-family:'Plus Jakarta Sans',sans-serif;font-size:2.8rem;font-weight:900;line-height:1}
.price-sfx{font-size:.88rem;opacity:.7;margin-top:3px}
.price-aft{font-size:.76rem;opacity:.5;margin-top:4px}
.price-body{padding:22px 26px}
.price-feats{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.price-feats li{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;color:var(--text);font-weight:600}
.price-feats li::before{content:'✓';color:var(--acc);font-weight:900;flex-shrink:0;margin-top:1px}
.price-cancel{text-align:center;font-size:.74rem;color:var(--muted);margin-top:11px;font-weight:600}
.price-info{background:#fff;border-radius:20px;padding:26px;border:1px solid var(--border);box-shadow:var(--sh)}
.price-info h3{font-size:1.1rem;font-weight:800;color:var(--pri);margin-bottom:11px}
.price-info p{font-size:.87rem;color:var(--muted);line-height:1.65;margin-bottom:16px}
.calc{background:var(--warm);border-radius:11px;padding:14px;margin-bottom:14px}
.cr{display:flex;justify-content:space-between;padding:5px 0;font-size:.85rem;border-bottom:1px solid var(--border)}
.cr:last-child{border:none;font-weight:800;font-size:.92rem}
.cv{font-weight:700}
.cv.g{color:#16a34a}.cv.r{color:#ef4444}
.cr.hl{background:#dcfce7;margin:4px -4px;padding:6px 4px;border-radius:7px;border:none}
.price-stern{font-size:.72rem;color:#9ca3af;line-height:1.5}

/* QUOTE */
.quote-sec{padding:60px 0;background:var(--pri)}
.quote-txt{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.05rem,2.5vw,1.4rem);font-weight:700;color:#fff;font-style:italic;max-width:660px;margin:0 auto;text-align:center;line-height:1.5;opacity:.9}

/* KONTAKT */
.contact{padding:76px 0;background:#fff}
.contact-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:52px;align-items:start}
.ci p{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:22px}
.c-details{display:flex;flex-direction:column;gap:13px}
.cd{display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:600}
.cd-i{width:36px;height:36px;background:var(--acc-l);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.cd a{color:var(--pri)}.cd a:hover{color:var(--acc)}
.cf-box{background:var(--warm);border-radius:20px;padding:30px;border:1px solid var(--border)}
.cf{display:flex;flex-direction:column;gap:13px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:.76rem;font-weight:800;color:var(--pri);text-transform:uppercase;letter-spacing:.06em}
.fg input,.fg textarea{padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-family:'Nunito',sans-serif;font-size:.9rem;color:var(--text);background:#fff;transition:border-color .2s;width:100%}
.fg input:focus,.fg textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(0,168,150,.1)}
.fg textarea{resize:vertical;min-height:88px}
.chk{display:flex;align-items:flex-start;gap:9px;font-size:.81rem;color:var(--muted);cursor:pointer;line-height:1.5}
.chk input{width:15px;height:15px;margin-top:2px;flex-shrink:0;accent-color:var(--acc)}
.chk a{color:var(--acc);text-decoration:underline}
.fmsg{padding:9px 13px;border-radius:9px;font-size:.85rem;font-weight:700;display:none}
.fmsg.ok{background:#dcfce7;color:#15803d}
.fmsg.err{background:#fee2e2;color:#991b1b}

/* FOOTER */
.footer{background:var(--pri);padding:34px 0 18px}
.footer-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.fb{display:flex;align-items:center;gap:7px}
.fn{font-family:'Plus Jakarta Sans',sans-serif;font-size:.93rem;font-weight:800;color:#fff}
.fl{display:flex;gap:18px;flex-wrap:wrap}
.fl a{font-size:.83rem;color:rgba(255,255,255,.55);transition:color .2s}
.fl a:hover{color:var(--acc)}
.fleg{display:flex;gap:14px}
.fleg a{font-size:.76rem;color:rgba(255,255,255,.3)}
.fbot{font-size:.74rem;color:rgba(255,255,255,.3)}

/* ANIMATIONEN */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.fade-in.anim{opacity:0;transform:translateY(16px)}
.fade-in.anim.visible{opacity:1;transform:translateY(0)}
.hero-content{animation:fadeUp .6s ease both}
.hero-vis{animation:fadeUp .6s ease .15s both}

/* RESPONSIVE */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .hero-in{grid-template-columns:1fr;padding:44px 0 52px}
  .hero-vis{display:none}
  .prob-grid{grid-template-columns:1fr}
  .feat-big{grid-template-columns:1fr;padding:26px}
  .dm{display:none}
  .feat-grid{grid-template-columns:1fr 1fr}
  .flow-steps{grid-template-columns:1fr 1fr;gap:22px}
  .flow-steps::before{display:none}
  .pricing-wrap{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .trust-i{padding:7px 18px}
}
@media(max-width:600px){
  .feat-grid{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-title{font-size:1.85rem}
  .trust-i{border-right:none;border-bottom:1px solid var(--border);width:100%;justify-content:center}
  .trust-i:last-child{border-bottom:none}
}

/* ══════════════ APP PREVIEW ══════════════ */
.app-preview { padding: 56px 0; background: var(--pri); }
.app-preview .eyebrow { color: rgba(0,168,150,.9); }
.app-preview .eyebrow::before { background: var(--acc); }
.app-preview .sec-title { color: #fff; }
.app-preview .sec-sub { color: rgba(255,255,255,.6); }

.preview-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.4fr;
  gap: 24px;
  align-items: start;
}
.preview-item { display: flex; flex-direction: column; gap: 10px; }
.preview-label {
  font-size: .78rem;
  font-weight: 800;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Browser-Fenster */
.mock-window {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
}
.mock-topbar {
  background: #1e293b;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-dots { display: flex; gap: 5px; }
.md { width: 9px; height: 9px; border-radius: 50%; }
.md.r { background: #ef4444; }
.md.y { background: #f59e0b; }
.md.g { background: #22c55e; }
.mock-title { font-size: .62rem; color: rgba(255,255,255,.4); font-family: monospace; }
.mock-body { padding: 12px; background: #f8fafc; display: flex; flex-direction: column; gap: 8px; }

/* KPI */
.mock-kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.mock-kpi { background: #fff; border-radius: 8px; padding: 8px 6px; text-align: center; border: 1px solid #e2e8f0; }
.mock-kpi.green .mk-num { color: #16a34a; }
.mock-kpi.amber .mk-num { color: #d97706; }
.mk-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .82rem; font-weight: 900; color: #0f2d4a; line-height: 1; }
.mk-lbl { font-size: .55rem; color: #94a3b8; margin-top: 2px; font-weight: 700; text-transform: uppercase; }

/* Alert */
.mock-alert {
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-alert-dot { width: 8px; height: 8px; background: #16a34a; border-radius: 50%; flex-shrink: 0; animation: blink 2s infinite; }
.mock-alert-title { font-size: .68rem; font-weight: 800; color: #15803d; }
.mock-alert-sub { font-size: .6rem; color: #166534; margin-top: 1px; }

/* Pipeline */
.mock-section-title { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; padding: 2px 0; }
.mock-pipeline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.mock-col { display: flex; flex-direction: column; gap: 5px; }
.mock-col-head { font-size: .58rem; font-weight: 800; padding: 4px 7px; border-radius: 6px; display: flex; justify-content: space-between; }
.mock-col-head span { opacity: .7; }
.mock-col-head.neu { background: #ede9fe; color: #6d28d9; }
.mock-col-head.kontakt { background: #fef9c3; color: #92400e; }
.mock-col-head.auftrag { background: #dcfce7; color: #15803d; }
.mock-card { background: #fff; border-radius: 7px; padding: 7px 8px; border: 1px solid #e2e8f0; }
.mock-card.won { border-color: #86efac; }
.mc-name { font-size: .65rem; font-weight: 800; color: #0f2d4a; }
.mc-sub { font-size: .58rem; color: #94a3b8; margin-top: 1px; }
.mc-tag { font-size: .55rem; background: #f1f5f9; color: #64748b; padding: 1px 5px; border-radius: 4px; display: inline-block; margin-top: 3px; font-weight: 700; }
.mc-tag.green { background: #dcfce7; color: #15803d; }

/* Phone */
.mock-phone {
  background: #1e293b;
  border-radius: 36px;
  padding: 12px 8px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  border: 2px solid rgba(255,255,255,.1);
  position: relative;
  max-width: 220px;
  margin: 0 auto;
}
.mock-phone-notch {
  width: 60px; height: 10px;
  background: #0f172a;
  border-radius: 0 0 10px 10px;
  margin: 0 auto 6px;
}
.mock-phone-screen {
  background: #f8fafc;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  min-height: 380px;
}
.mph-nav { background: #0f2d4a; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.mph-nav-icon { color: rgba(255,255,255,.7); font-size: .9rem; }
.mph-nav-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 800; color: #fff; }
.mph-push { background: rgba(15,45,74,.95); margin: 8px; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.mph-push-icon { width: 28px; height: 28px; background: var(--acc); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.mph-push-title { font-size: .62rem; font-weight: 800; color: #fff; }
.mph-push-body { font-size: .58rem; color: rgba(255,255,255,.65); margin-top: 1px; }
.mph-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 0 8px 6px; }
.mph-stat { background: #fff; border-radius: 8px; padding: 7px 5px; text-align: center; border: 1px solid #e2e8f0; }
.mph-stat.green .mps-n { color: #16a34a; }
.mph-stat.amber .mps-n { color: #d97706; }
.mps-n { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 900; color: #0f2d4a; line-height: 1; }
.mps-l { font-size: .52rem; color: #94a3b8; font-weight: 700; }
.mph-card { background: #fff; margin: 0 8px 6px; border-radius: 10px; padding: 9px 10px; border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.mph-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.mph-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mph-dot.neu { background: #6d28d9; }
.mph-dot.kontakt { background: #d97706; }
.mph-card-name { font-size: .7rem; font-weight: 800; color: #0f2d4a; flex: 1; }
.mph-card-time { font-size: .58rem; color: #94a3b8; }
.mph-card-addr { font-size: .6rem; color: #64748b; margin-bottom: 6px; }
.mph-card-actions { display: flex; gap: 5px; }
.mph-btn { font-size: .58rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
.mph-btn.call { background: #dbeafe; color: #1d4ed8; }
.mph-btn.wa   { background: #dcfce7; color: #15803d; }
.mph-fab { position: absolute; bottom: 14px; right: 14px; width: 36px; height: 36px; background: var(--acc); border-radius: 50%; color: #fff; font-size: 1.3rem; font-weight: 300; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,168,150,.4); }

/* Detail Mockup */
.mock-detail-head { display: flex; align-items: flex-start; gap: 10px; background: #fff; border-radius: 8px; padding: 10px; margin-bottom: 4px; }
.mock-detail-avatar { width: 36px; height: 36px; background: #0f2d4a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.mda-name { font-size: .72rem; font-weight: 800; color: #0f2d4a; }
.mda-sub { font-size: .6rem; color: #64748b; }
.mock-status-badge { margin-left: auto; background: #ede9fe; color: #6d28d9; font-size: .58rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.mock-detail-section { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; margin: 4px 0 2px; }
.mock-detail-text { font-size: .65rem; color: #374151; line-height: 1.5; background: #fff; border-radius: 7px; padding: 8px; }
.mock-photo-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.mock-photo { border-radius: 7px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.mock-ki-box { background: linear-gradient(135deg, #e6f7f5, #f0faf8); border: 1.5px solid #99e6dc; border-radius: 8px; padding: 8px 10px; }
.mki-range { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .82rem; font-weight: 900; color: #0f2d4a; }
.mki-sub { font-size: .58rem; color: #64748b; margin-top: 2px; }
.mock-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mock-action-btn { font-size: .62rem; font-weight: 800; padding: 7px 6px; border-radius: 8px; text-align: center; background: #0f2d4a; color: #fff; }
.mock-action-btn:not(.primary) { background: #f1f5f9; color: #374151; }
.mock-action-btn.primary { background: var(--acc); }

@media(max-width:900px) {
  .preview-grid { grid-template-columns: 1fr; }
  .mock-phone { max-width: 280px; }
}