/* passonce.de — Landing-Styles (integrisec-CI: Navy/Cyan/Outfit, alles lokal).
   Definiert auch die :root-Tokens, die secret-tool.css nutzt. */

@font-face { font-family:'Outfit'; font-style:normal; font-weight:300; font-display:swap; src:url('/assets/fonts/outfit-300.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/outfit-800.woff2') format('woff2'); }

:root {
  --bg:#ffffff; --bg2:#f4f7fb; --bg3:#eaeff7;
  --navy:#0e1e3d; --navy2:#172f5e;
  --blue:#1a4fd6; --blue-lt:#e8effc;
  --cyan:#00c896; --cyan-dark:#007a5e; --cyan-lt:#e0faf3;
  --text:#18243a; --muted:#5e738a; --light:#94a3b8; --border:#dde4f0;
  --font:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sh:0 2px 8px rgba(14,30,61,.07), 0 12px 32px rgba(14,30,61,.06);
  --sh-lg:0 4px 12px rgba(14,30,61,.08), 0 24px 48px rgba(14,30,61,.12);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--blue); }

.ph-wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .ph-wrap{ padding:0 16px; } }

/* Header */
.ph-header { background:var(--navy); }
.ph-header .ph-wrap { display:flex; align-items:center; justify-content:space-between; height:60px; }
.ph-logo { font-size:21px; font-weight:800; letter-spacing:-.4px; color:#fff; text-decoration:none; }
.ph-logo span { color:var(--cyan); }
.ph-header nav a { color:rgba(255,255,255,.7); text-decoration:none; font-size:14px; font-weight:500; margin-left:22px; }
.ph-header nav a:hover { color:#fff; }
@media (max-width:520px){ .ph-header nav { display:none; } }

/* Hero */
.ph-hero { background:var(--navy); background-image:radial-gradient(ellipse 70% 60% at 60% 30%,rgba(26,79,214,.38) 0%,transparent 55%),radial-gradient(ellipse 30% 40% at 90% 80%,rgba(0,200,150,.12) 0%,transparent 50%); padding:60px 0 40px; }
.ph-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,200,150,.12); border:1px solid rgba(0,200,150,.3); color:#6ee7c7; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:20px; }
.ph-hero h1 { font-size:clamp(30px,4.4vw,46px); font-weight:800; color:#fff; line-height:1.1; letter-spacing:-1.2px; max-width:760px; }
.ph-hero p.sub { font-size:clamp(16px,2vw,19px); color:rgba(255,255,255,.62); max-width:620px; margin-top:16px; font-weight:300; }

/* Tool-Einbettung: Karte ueberlappt das Hero-Ende */
.ph-tool { margin:-24px 0 0; padding-bottom:8px; }
.ph-tool .tool-card { max-width:640px; margin:0 auto; }
.ph-tool .tool-hint { max-width:640px; margin:14px auto 0; text-align:center; font-size:13px; color:var(--muted); }

/* Sektionen */
.ph-section { padding:64px 0; }
.ph-section--alt { background:var(--bg2); }
.ph-section h2 { font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.5px; line-height:1.2; margin-bottom:16px; }
.ph-section .eyebrow { color:var(--cyan-dark); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; }
.ph-section p { max-width:760px; margin-bottom:14px; color:#33445e; }
.ph-section p.lead { font-size:18px; color:var(--text); }

/* 3 Schritte */
.ph-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
@media (max-width:760px){ .ph-steps{ grid-template-columns:1fr; } }
.ph-step { background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:24px; box-shadow:var(--sh); }
.ph-step .num { width:34px; height:34px; border-radius:9px; background:var(--blue-lt); color:var(--blue); font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.ph-step h3 { font-size:17px; font-weight:700; margin-bottom:8px; }
.ph-step p { font-size:14.5px; color:var(--muted); margin:0; }

/* Vertrauen / Punkte-Liste */
.ph-points { display:grid; grid-template-columns:repeat(2,1fr); gap:18px 28px; margin-top:28px; max-width:860px; }
@media (max-width:680px){ .ph-points{ grid-template-columns:1fr; } }
.ph-point { display:flex; gap:12px; }
.ph-point .ic { flex:0 0 auto; width:26px; height:26px; border-radius:7px; background:var(--cyan-lt); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.ph-point h3 { font-size:15.5px; font-weight:700; margin-bottom:3px; }
.ph-point p { font-size:14px; color:var(--muted); margin:0; }

/* FAQ */
.ph-faq { max-width:820px; margin-top:28px; }
.ph-faq details { border:1px solid var(--border); border-radius:12px; background:var(--bg); margin-bottom:12px; overflow:hidden; }
.ph-faq summary { list-style:none; cursor:pointer; padding:18px 20px; font-weight:600; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.ph-faq summary::-webkit-details-marker { display:none; }
.ph-faq summary::after { content:'+'; color:var(--blue); font-weight:700; font-size:22px; line-height:1; }
.ph-faq details[open] summary::after { content:'–'; }
.ph-faq .answer { padding:0 20px 18px; color:#33445e; font-size:15px; }

/* Footer */
.ph-footer { background:var(--navy); color:rgba(255,255,255,.6); padding:40px 0; font-size:14px; }
.ph-footer .ph-wrap { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
.ph-footer a { color:rgba(255,255,255,.75); text-decoration:none; }
.ph-footer a:hover { color:#fff; }
.ph-footer .links a { margin-left:20px; }
@media (max-width:560px){ .ph-footer .ph-wrap{ flex-direction:column; align-items:flex-start; } .ph-footer .links a{ margin:0 20px 0 0; } }

/* Vergleich E-Mail/Chat vs. Einmal-Link */
.ph-compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
@media (max-width:640px){ .ph-compare{ grid-template-columns:1fr; } }
.ph-compare-col { border-radius:14px; padding:22px; border:1px solid var(--border); }
.ph-compare-col h3 { font-size:16px; font-weight:700; margin-bottom:12px; }
.ph-compare-col ul { list-style:none; }
.ph-compare-col li { font-size:14.5px; color:#33445e; padding:5px 0 5px 26px; position:relative; }
.ph-compare-col li::before { position:absolute; left:0; top:4px; font-weight:700; }
.ph-compare-col.bad { background:#fff6f6; border-color:#f6d5d5; }
.ph-compare-col.bad h3 { color:#a11212; }
.ph-compare-col.bad li::before { content:'\2715'; color:#cf4a4a; }
.ph-compare-col.good { background:var(--cyan-lt); border-color:#bfeede; }
.ph-compare-col.good h3 { color:var(--cyan-dark); }
.ph-compare-col.good li::before { content:'\2713'; color:var(--cyan-dark); }