/* ---------- Design-Variablen ---------- */
:root{
  --bg: #f6f9f8;
  --card: #ffffff;
  --text: #1f2a2e;
  --muted:#5a6a72;
  --brand:#1fbf74;
  --brand-2:#1aa7a1;
  --border:#e4eaee;
  --radius:18px;
  --shadow:0 10px 30px rgba(16,36,40,.08);
  --container: 1160px;
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px}

/* ===== Header & Nav ===== */
/* ===== HEADER & NAVBAR ===== */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
  z-index: 100;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.header[data-elevate="1"] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .4px;
  color: #1f2a2e;
  text-decoration: none;
  white-space: nowrap;
}

/* NAVBAR DESKTOP */
.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}
.nav-links a {
  text-decoration: none;
  color: #1f2a2e;
  opacity: 0.9;
  transition: color .2s ease, opacity .2s ease;
}
.nav-links a:hover {
  opacity: 1;
  color: #16a34a; /* Grün aus Camper.css */
}

/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 22px;
  background: #1f2a2e;
}

/* MOBILE */
@media (max-width: 880px) {
  .hamburger { display: flex; }

  .navbar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .navbar.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .nav-links a {
    padding: 10px;
    border-radius: 8px;
  }
  .nav-links a:hover {
    background: #f4f7f8;
  }
}

/* Visible Theme Toggle */
.theme-toggle{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:var(--bg-soft); border:2px solid color-mix(in oklab, var(--border) 70%, var(--text) 5%);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  color: color-mix(in oklab, var(--text) 86%, #ffaa00 14%);
}
.theme-toggle:hover{ transform:scale(1.08); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent); }
html[data-theme="dark"] .theme-toggle{ background:#f4f7ff; color:#111; border-color:#cfd6ff; }

/* ---------- Hero ---------- */
.hero{ padding: 24px 0 12px; }
.hero h1{
  font-size: clamp(28px, 4vw, 42px);
  margin: 8px 0 6px;
}
.hero .tagline{ color:var(--muted); margin:0 }

/* ---------- Abschnittstitel ---------- */
.section-title{
  font-size: clamp(22px, 3vw, 30px);
  margin: 18px 0 14px;
  padding-left:12px;
  border-left:4px solid var(--brand);
}

/* ---------- Steps Grid ---------- */
.steps{ padding: 8px 0 20px; }
.steps-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){
  .steps-grid{ grid-template-columns: 1fr; }
}

/* Step Card */
.step-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  display:grid;
  grid-template-columns: 56px minmax(0,1fr); /* Icon | Inhalt */
  gap:14px;
  align-items:start;
}

/* Icon-Panel */
.step-icon{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 10px 20px rgba(49,196,141,.20);
  color:#08100f;
}
.ic{width:22px;height:22px;fill:currentColor;opacity:.9}

/* Titel & Text sauber in Spalte 2 */
.step-card > .step-icon{ grid-column:1; grid-row:1 / -1; }
.step-card > h3,
.step-card > p,
.step-card > ul,
.step-card > ol{ grid-column:2; }

/* Typografie: normales Umbrechen (gegen „jeder Buchstabe in eigener Zeile“) */
.step-card *{
  white-space: normal;
  word-break: normal;         /* keine harten Umbrüche */
  overflow-wrap: break-word;  /* weiche Umbrüche bei langen Wörtern/URLs */
  hyphens: auto;
}
.step-card h3{ margin:2px 0 6px; line-height:1.3; }
.step-card p{ margin:0; }

/* ---------- Hinweise ---------- */
.notes{ padding: 8px 0 36px; }
.notes-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .notes-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .notes-grid{ grid-template-columns: 1fr; } }

.note-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
}
.note-card h3{ margin:2px 0 8px; line-height:1.3; }
.note-card p{ margin:0; color:var(--text); }

/* ===== Footer wie auf den anderen Seiten (standalone) ===== */
.site-footer{
  margin-top: 40px;
  background: color-mix(in oklab, #ffffff 92%, transparent);
  border-top: 1px solid var(--border);
}

.footer-grid{
  display: grid;
  gap: 28px;
  padding: 28px 0;
  grid-template-columns: 1.2fr 1fr 1fr;  /* Zahlungen | Social | Rechtliches */
}
@media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr; } }

.site-footer h2{
  margin: 0 0 12px;
  font-size: clamp(18px, 2.4vw, 22px);
}

/* Zahlungslogos im gleichen Stil */
.payment-logos{
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.payment-logos img{
  max-height: 44px; width: auto; object-fit: contain;
  padding: 6px 10px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}

/* Social-Pills */
.social-links{ display:flex; align-items:center; gap:12px; }
.social-links .pill{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:12px;background:var(--card);
  border:1px solid var(--border); color:#0b1114;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.social-links .pill:hover{ transform: translateY(-2px); }
.social-links .pill svg{ width:20px;height:20px; }
.social-links .pill img{ max-height:24px; width:auto; display:block; }

/* Rechts-Links */
.footer-links ul{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:8px 0; }
.footer-links a{ text-decoration:none; opacity:.9; }
.footer-links a:hover{ opacity:1; color: var(--brand); }

/* Bottom-Zeile */
.footer-bottom{ border-top:1px solid var(--border); }
.footer-bottom p{ margin:0; padding:14px 0; color:#66747a; font-size:14px; }