/* styles.css - modernes, responsives Design */
:root{
    --brand: #1DA0DA; /* aus Logo extrahiert */
    --brand-dark: #157fa6;
    --bg: #f6fbff;
    --muted: #4b4d51;
    --max-width: 1100px;
    --radius: 12px;
    --shadow: 0 6px 24px rgba(17,24,39,0.06);
    --glass: rgba(255,255,255,0.6);
    --accent: #0b83bd;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg,var(--bg),#ffffff 60%);
    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
  }
  
  /* Layout container */
  .container{max-width:var(--max-width);margin:0 auto;padding:24px}
  
  /* Header / Nav */
  .header{
    background:transparent;
    padding:18px 0;
  }
  .header .nav{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;
  }
  .logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
  .logo img{height:44px;display:block}
  .logo h1{font-size:20px;margin:0;font-weight:700;letter-spacing:0.4px;color:var(--brand-dark)}
  
  /* Nav links */
  .nav-links{display:flex;gap:18px;align-items:center}
  .nav-links a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px;border-radius:8px}
  .nav-links a:hover{color:var(--brand);background:rgba(29,160,218,0.06)}
  
  /* CTA button */
  .btn{
    background:linear-gradient(90deg,var(--brand),var(--brand-dark));
    color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;
    box-shadow: 0 6px 18px rgba(29,160,218,0.18);
    display:inline-block;
  }
  .btn.secondary{
    background:transparent;color:var(--brand);border:2px solid rgba(29,160,218,0.12);box-shadow:none;font-weight:700;
  }
  
  /* Hero */
  .hero{display:grid;grid-template-columns:1fr 460px;gap:32px;align-items:center;padding:40px 0}
  @media (max-width:980px){.hero{grid-template-columns:1fr;}}
  .hero .lead{font-size:42px;line-height:1.05;margin:0 0 16px;font-weight:800;color:#03112a}
  .hero p{margin:0 0 22px;color:var(--muted);font-size:17px}
  .hero .hero-card{background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.85));padding:22px;border-radius:14px;box-shadow:var(--shadow);border:1px solid rgba(16,24,40,0.04)}
  
  /* Features */
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  @media (max-width:980px){.features{grid-template-columns:repeat(1,1fr)}}
  .feature{background:white;padding:20px;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(16,24,40,0.03)}
  .feature h3{margin:0 0 8px;font-size:18px;color:#07203a}
  
  /* Services section */
  .services{padding:28px 0}
  .service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  @media (max-width:980px){.service-grid{grid-template-columns:1fr}}
  .service{background:white;padding:22px;border-radius:12px;border:1px solid rgba(16,24,40,0.03);box-shadow:var(--shadow)}
  .service h3{margin-top:0}
  
  /* Testimonials */
  .testimonials{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media (max-width:980px){.testimonials{grid-template-columns:1fr}}
  .testimonial{background:linear-gradient(180deg,#fff,#f8fbff);padding:16px;border-radius:12px;border:1px solid rgba(16,24,40,0.03)}
  
  /* Footer */
  .footer{margin-top:48px;padding:28px 0;border-top:1px solid rgba(16,24,40,0.04);color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .footer a{color:var(--muted);text-decoration:none}
  .small{font-size:13px}
  
  /* Contact form */
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:720px){.form-row{grid-template-columns:1fr}}
  input[type="text"], input[type="email"], textarea, select{
    width:100%;padding:12px;border-radius:10px;border:1px solid rgba(16,24,40,0.06);font-size:15px
  }
  textarea{min-height:140px;resize:vertical}
  label{font-weight:600;font-size:14px;color:#0b1220;display:block;margin-bottom:8px}
  
  /* Utilities */
  .kv{display:flex;gap:10px;align-items:center}
  .grid-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media (max-width:900px){.grid-two{grid-template-columns:1fr}}
  .highlight{color:var(--brand);font-weight:800}
  
  /* small helpers */
  .lead-sub{color:var(--muted);font-weight:600}
  .center{text-align:center}
  .padded{padding:28px 22px;border-radius:12px;background:rgba(255,255,255,0.8);box-shadow:var(--shadow)}
  
  /* accessibility focus */
  a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(29,160,218,0.15);outline-offset:2px}
  
  /* small logo in footer */
  .logo-sm img{height:30px}