/* ====== Farben (an Logo angepasst) ====== */
:root{
  --bg: #0d2533;            /* Navy Hintergrund */
  --card: #123347;          /* Kartenhintergrund */
  --line: #15445b;
  --text: #e6f4ff;          /* Primärer Text auf dunkel */
  --muted: #b8d4e6;
  --primary: #23c3ff;       /* Akzent (Schein/Glanz) */
  --primary-strong: #12aee7;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;line-height:1.5;}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--white)}

.site-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:16px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);
  position:sticky;top:0;background:linear-gradient(0deg, rgba(13,37,51,.6), rgba(13,37,51,.9));
  backdrop-filter: blur(6px); z-index:10;
}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--white);font-weight:700;font-size:1.2rem}
.brand img{width:36px;height:36px}
.top-nav a{margin-inline:.5rem;color:var(--muted)}
.top-nav .btn-outline{margin-left:.5rem}

.hero{
  position:relative; padding:72px 0; background:
    radial-gradient(1000px 400px at 20% -10%, rgba(35,195,255,.25), transparent),
    radial-gradient(800px 300px at 90% -20%, rgba(35,195,255,.18), transparent);
}
.hero-inner{max-width:1100px;margin:0 auto;padding:0 24px;text-align:center}
.hero h1{font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .5rem}
.lead{color:var(--muted);font-size:clamp(1rem,2.2vw,1.2rem);margin-bottom:1.2rem}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.badges{display:flex;gap:.8rem;justify-content:center;list-style:none;padding:0;margin:.3rem 0 0}
.badges li{border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;color:var(--muted)}

.section{max-width:1100px;margin:0 auto;padding:56px 24px}
.section h2{margin:0 0 1rem;font-size:clamp(1.4rem,2.6vw,2rem)}
.section-contrast{background:linear-gradient(180deg, rgba(18,51,71,.6), rgba(18,51,71,.3));border-block:1px solid var(--line)}

.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;margin-top:16px;
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;box-shadow:var(--shadow);transition:.2s transform,.2s box-shadow;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.33)}
.card h3{margin:.2rem 0 .35rem}
.card p{color:var(--muted);margin:.2rem 0 0}

.price-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin-top:14px;
}
.price-box{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:.6rem;box-shadow:var(--shadow);
}

.contact-grid{
  display:grid;grid-template-columns:1.2fr 1.8fr;gap:20px;
}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }

.contact-form{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);
}
.contact-form label{display:block;font-weight:600;margin-top:.4rem}
.contact-form input,.contact-form textarea{
  width:100%;margin-top:.3rem;margin-bottom:.6rem;background:#0f2a3a;border:1px solid var(--line);
  color:var(--text);padding:.7rem .8rem;border-radius:10px;outline:none;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(35,195,255,.15)}

.site-footer{
  border-top:1px solid var(--line);display:flex;gap:1rem;justify-content:space-between;align-items:center;
  padding:20px clamp(16px,4vw,40px);color:var(--muted)
}
.foot-links a{color:var(--muted);margin-left:.6rem}
.foot-links a:hover{color:var(--white)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.05rem;border-radius:12px;font-weight:700;border:1px solid transparent;
  transition:.18s background,.18s color,.18s border,.18s transform; text-align:center;
}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-strong));color:var(--bg)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--text);background:transparent}
.btn-outline:hover{border-color:var(--primary);color:var(--white)}
.btn-ghost{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.btn-ghost:hover{color:var(--white);border-color:var(--primary)}

.muted{color:var(--muted)}

/* Fix Impressum spacing (kept) */
#impressum p { margin: 6px 0; font-size: 1.05rem; line-height: 1.55; }
#impressum strong { display: inline-block; margin-bottom: 4px; }
#impressum br { line-height: 1.4; }

/* =========================
   NEW: Kontakt & Impressum alignment
   ========================= */
.kontakt-card,
.legal-card{
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.kontakt .row,
.legal .row{
  display: grid;
  grid-template-columns: 180px 1fr;   /* label column + value column */
  gap: 12px 18px;
  align-items: start;                  /* value starts at the top */
  margin: 8px 0;
}

.kontakt .label,
.legal .label{
  font-weight: 600;
  opacity: .85;
  text-align: right;
  white-space: nowrap;
}

.kontakt .value,
.legal .value{
  display: block;      /* ensures multi-line values align under the label */
  font-style: normal;  /* no italics */
  margin: 0;
}

.kontakt .row a,
.legal .row a{ text-decoration: none; }
.kontakt .row a:hover,
.legal .row a:hover{ text-decoration: underline; }

/* neutralize browser default italics on <address> anywhere */
address{font-style: normal; margin: 0; padding: 0;}

@media (max-width: 640px){
  .kontakt .row, .legal .row{ grid-template-columns: 1fr; }
  .kontakt .label, .legal .label{ text-align: left; }
}

/* Optional: legal body readability */
.legal { max-width: 900px; margin: 0 auto; line-height: 1.6; color:#e9f5ff; }
.legal h2 { margin: 0 0 10px; }
.legal h3 { margin: 20px 0 8px; font-size: 1.05rem; }
.legal p, .legal li { color:#cfe7f6; }
.legal a { color:#7cd3ff; text-decoration:none; border-bottom:1px dashed rgba(124,211,255,.5); }
.legal a:hover { border-bottom-color:#7cd3ff; }

/* ===== MOBILE FIX (FINAL VERSION) ===== */
@media (max-width: 768px) {

  /* show hamburger */
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 32px;
    color: var(--text);
    cursor: pointer;
    z-index: 20;
  }

  /* hide desktop nav */
  .top-nav {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 15px;
    border-radius: 12px;
    flex-direction: column;
    gap: 20px;
    width: 200px;
    z-index: 15;
  }

  .top-nav.open {
    display: flex;
  }

  /* fix header spacing */
  .site-header {
    padding: 12px 20px;
    position: relative;
  }

  /* bigger logo on mobile */
  .brand .logo {
    width: 42px;
    height: 42px;
  }

  .brand span {
    font-size: 1.3rem;
  }

}

/* Desktop: hide hamburger */
.nav-toggle {
  display: none;
}