/*
Theme Name: innopark24 Selfservice
Theme URI: https://selfservice.innopark24.de
Author: SH Digits GmbH
Author URI: https://www.shdigits.com
Description: Landingpage-Theme für die innopark24 Selfservice-App (selfservice.innopark24.de). Nutzer:innen melden Parkverstöße per App und erhalten dafür eine Auszahlung.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: innopark24-selfservice
*/

:root{
  --dark:#001E5E;
  --dark-2:#0A2C74;
  --accent:#19A0F9;
  --accent-dark:#0C7ECC;
  --accent-tint:#D1ECFE;
  --ink-soft:#4A5C78;
  --ink-faint:#8B98AC;
  --white:#FFFFFF;
  --grey:#F5F8FC;
  --border:#DCE6F2;
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Fira Sans', sans-serif;
  color:var(--dark);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:17px;
}
h1,h2,h3,.display{
  font-family:'Fira Sans Condensed', sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
}
h1{font-size:52px;}
h2{font-size:42px;}
h3{font-size:22px;}
@media (max-width:600px){
  h1{font-size:34px;}
  h2{font-size:28px;}
  h3{font-size:19px;}
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
section{position:relative;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--white); color:var(--dark); padding:12px 20px; z-index:1000;}
.skip-link:focus{left:16px; top:16px;}
.screen-reader-text{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}

/* ===== HEADER ===== */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 32px; max-width:1160px; margin:0 auto;}
.logo{
  display:inline-flex; align-items:center;
  line-height:0;
}
.logo-img{height:28px; width:auto; display:block;}
.site-header .logo-img{height:68px;}
.foot-logo .logo-img{height:32px;}
.nav-links{display:flex; gap:32px; align-items:center; list-style:none;}
.nav-links a{color:var(--dark); font-size:20px; font-weight:400;}
.nav-links a:hover{color:var(--accent-dark);}
.nav-cta{
  background:var(--accent); color:var(--dark) !important; padding:10px 20px; border-radius:8px;
  font-weight:700 !important; font-size:20px !important; transition:background .15s;
}
.nav-cta:hover{background:var(--accent-dark); color:var(--white) !important;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;}
.burger span{width:22px; height:2px; background:var(--dark);}

/* ===== HERO ===== */
.hero{background:var(--dark); color:var(--white); padding:80px 0 0; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:end;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(25,160,249,0.14);
  border:1px solid rgba(25,160,249,0.35); color:var(--accent); font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:20px; margin-bottom:24px;
}
.hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}
.hero h1{margin-bottom:20px;}
.hero h1 .money{color:var(--accent);}
.hero p{font-size:18px; color:#B7C0D4; max-width:480px; margin-bottom:32px;}
.store-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.store-btn{
  display:flex; align-items:center; gap:10px; background:var(--white); color:var(--dark);
  padding:12px 20px; border-radius:10px; font-weight:700; font-size:14px;
  transition:transform .15s;
}
.store-btn:hover{transform:translateY(-2px);}
.store-btn svg{width:20px; height:20px;}
.store-btn.outline{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.25);}
.hero-social{font-size:13.5px; color:var(--ink-faint); display:flex; align-items:center; gap:10px;}
.stars{color:var(--accent); letter-spacing:1px; font-size:14px;}

/* Phone mockup */
.phone-wrap{display:flex; justify-content:center; position:relative; padding-top:20px;}
.phone{width:280px; background:var(--white); border-radius:34px; padding:14px; box-shadow:0 30px 70px rgba(0,0,0,0.5); position:relative; z-index:2;}
.phone-screen{background:var(--grey); border-radius:22px; overflow:hidden; padding-bottom:18px;}
.phone-status{display:flex; justify-content:space-between; padding:14px 18px 6px; font-size:11px; color:var(--ink-faint); font-weight:600;}
.phone-app-header{padding:6px 18px 14px; display:flex; justify-content:space-between; align-items:center;}
.phone-app-header strong{font-family:'Fira Sans Condensed',sans-serif; font-size:16px;}
.phone-earn-card{margin:0 18px 14px; background:var(--dark); color:var(--white); border-radius:14px; padding:18px;}
.phone-earn-card .label{font-size:11px; color:#9AA5BC; margin-bottom:4px;}
.phone-earn-card .amount{font-family:'Fira Sans Condensed',sans-serif; font-weight:800; font-size:30px; color:var(--accent);}
.phone-list{margin:0 18px; display:flex; flex-direction:column; gap:8px;}
.phone-list-item{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px;}
.phone-list-item .pill{background:var(--accent-tint); color:var(--accent-dark); font-weight:700; font-size:11.5px; padding:3px 8px; border-radius:6px;}
.phone-float{position:absolute; background:var(--white); border-radius:12px; padding:10px 14px; font-size:12px; font-weight:700; box-shadow:0 12px 24px rgba(0,0,0,0.2); display:flex; align-items:center; gap:8px; z-index:3;}
.phone-float.top{top:40px; left:-10px; color:var(--accent-dark);}
.phone-float.bottom{bottom:60px; right:-16px; color:var(--dark);}
.phone-float .fdot{width:8px; height:8px; border-radius:50%; background:var(--accent);}
.hero-glow{position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(25,160,249,0.18), transparent 70%); top:-100px; right:-200px; z-index:0;}

/* ===== AUDIENCE (Privatkunde / Gewerbekunde) ===== */
.audience{padding:80px 0;}
.audience-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.audience-card{
  display:block; background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:34px; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.audience-card:hover{border-color:var(--accent); box-shadow:0 16px 32px rgba(0,30,94,0.08); transform:translateY(-2px);}
.audience-icon{width:52px; height:52px; border-radius:12px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.audience-icon svg{width:26px; height:26px; color:var(--accent-dark);}
.audience-card h3{margin-bottom:10px;}
.audience-card p{color:var(--ink-soft); font-size:15px; margin-bottom:18px;}
.audience-link{font-weight:600; font-size:15px; color:var(--accent-dark); display:inline-flex; gap:6px; align-items:center;}
@media (max-width:700px){
  .audience-grid{grid-template-columns:1fr;}
}

/* ===== VIOLATION TYPES (4-Punkte-Liste) ===== */
.violation-types{padding:80px 0;}
.vt-list{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.vt-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  background:var(--grey); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 18px;
}
.vt-item svg{width:32px; height:32px; color:var(--accent-dark); flex-shrink:0;}
.vt-item span{font-weight:600; font-size:15.5px; color:var(--dark);}
@media (max-width:900px){
  .vt-list{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .vt-list{grid-template-columns:1fr;}
}

/* ===== PAYOUTS ===== */
.payouts{padding:96px 0 80px;}
.section-head{max-width:620px; margin:0 auto 52px; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--accent-dark); background:var(--accent-tint); padding:7px 14px; border-radius:20px; margin-bottom:18px;}
.section-head h2{margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:16px;}
.payout-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.payout-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:22px 18px; text-align:center; transition:transform .15s, box-shadow .15s;}
.payout-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,23,41,0.08);}
.payout-amount{font-family:'Fira Sans Condensed',sans-serif; font-weight:800; font-size:26px; color:var(--accent-dark); margin-bottom:8px;}
.payout-label{font-size:13.5px; color:var(--ink-soft); font-weight:500;}

/* ===== CALCULATOR ===== */
.calc{background:var(--dark); color:var(--white); padding:90px 0;}
.calc-box{max-width:680px; margin:0 auto; background:var(--dark-2); border-radius:24px; padding:44px; border:1px solid rgba(255,255,255,0.08);}
.calc-box h2{margin-bottom:6px; text-align:center;}
.calc-box .sub{text-align:center; color:#9AA5BC; font-size:14.5px; margin-bottom:32px;}
.calc-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:14px;}
.calc-row strong{font-family:'Fira Sans Condensed',sans-serif; color:var(--accent);}
input[type=range]{width:100%; accent-color:var(--accent); margin:14px 0 30px; height:6px;}
.calc-result{background:var(--dark); border-radius:14px; padding:24px; text-align:center; margin-top:10px;}
.calc-result .label{font-size:13px; color:#9AA5BC; margin-bottom:6px;}
.calc-result .value{font-family:'Fira Sans Condensed',sans-serif; font-weight:800; font-size:44px; color:var(--accent);}

/* ===== HOW IT WORKS ===== */
.how{padding:96px 0;}
.how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.step{background:var(--grey); border-radius:var(--radius); padding:28px 22px; position:relative;}
.step-num{font-family:'Fira Sans Condensed',sans-serif; font-weight:800; font-size:34px; color:var(--accent); opacity:0.9; margin-bottom:14px;}
.step h3{margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft);}

/* ===== SOCIAL PROOF ===== */
.proof{background:var(--grey); padding:96px 0;}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:60px; text-align:center;}
.stat-num{font-family:'Fira Sans Condensed',sans-serif; font-weight:800; font-size:36px; color:var(--dark);}
.stat-num .accent-txt{color:var(--accent-dark);}
.stat-label{font-size:13.5px; color:var(--ink-soft); margin-top:4px;}
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.quote-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
.quote-card .stars{margin-bottom:14px; display:block;}
.quote-card p{font-size:14.5px; margin-bottom:18px;}
.quote-attr{display:flex; align-items:center; gap:10px;}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--dark); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Fira Sans Condensed',sans-serif; font-weight:700; font-size:13px;}
.quote-attr strong{display:block; font-size:13.5px;}
.quote-attr span{font-size:12px; color:var(--ink-faint);}

/* ===== CTA BAND ===== */
.cta-band{margin:96px auto; max-width:1096px; padding:0 32px;}
.cta-inner{background:var(--dark); border-radius:26px; padding:70px 48px; text-align:center; color:var(--white); position:relative; overflow:hidden;}
.cta-inner h2{margin-bottom:14px; color:var(--white);}
.cta-inner p{font-size:16px; margin-bottom:30px; color:#B7C0D4; opacity:1; max-width:460px; margin-left:auto; margin-right:auto;}
.cta-inner .store-row{justify-content:center;}
.cta-inner .store-btn{background:var(--white); color:var(--dark);}
.cta-inner .store-btn.outline{background:transparent; border:1px solid rgba(255,255,255,0.3); color:var(--white);}

/* ===== FAQ ===== */
.faq{padding:0 0 100px;}
.faq-item{border-bottom:1px solid var(--border); padding:22px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:16.5px; font-weight:600; font-family:'Fira Sans Condensed',sans-serif; background:none; border:none; width:100%; text-align:left; color:var(--dark);}
.faq-q .plus{font-size:20px; color:var(--accent-dark); transition:transform .2s; font-weight:400;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:15px; color:var(--ink-soft);}
.faq-item.open .faq-a{max-height:300px; padding-top:14px;}

/* ===== FOOTER ===== */
.site-footer{background:var(--dark); color:#8B93A5; padding:56px 0 28px; font-size:15px;}
.site-footer h3, .site-footer h4, .foot-heading{font-size:18px; color:var(--white); margin-bottom:16px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:36px; align-items:center;}
.foot-logo{display:inline-flex; align-items:center; line-height:0;}
.foot-links{display:flex; gap:24px; flex-wrap:wrap; font-size:15px; list-style:none;}
.foot-links a:hover{color:var(--white);}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.08); padding-top:22px; font-size:15px;}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-links.is-open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--white); padding:20px 32px; gap:18px; border-top:1px solid var(--border);
    box-shadow:0 12px 24px rgba(0,30,94,0.08);
  }
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr; align-items:center;}
  .payout-grid{grid-template-columns:repeat(2,1fr);}
  .how-grid{grid-template-columns:1fr 1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .quote-grid{grid-template-columns:1fr;}
}