/* ========= Design-Variablen ========= */
    :root{
      --bg: #0f1115;
      --card: #151923;
      --muted: #8ea1b2;
      --text: #e7edf3;
      --text-dim: #b9c6d0;
      --primary: #4f7bd9;
      --primary-600:#3f63ad;
      --accent: #2aa198;
      --ok: #4caf50;
      --warn:#f4a261;
      --danger:#c44550;
      --shadow: 2px 2px 10px rgba(0,0,0,.15);
      --shadow-strong: 2px 2px 15px rgba(0,0,0,.3);
      --radius: 16px;
      --radius-lg: 20px;
      --maxw: 1200px;
      --glow: rgba(255,255,255,.14);
      --spot: rgba(79,123,217,.35);
      --nav-h: 70px;
    }

    /* ========= Reset / Base ========= */
    *{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,Inter,Helvetica,Arial,sans-serif;
      line-height:1.55;
      text-align:left
    }

    img,svg{
      display:block;
      max-width:100%;
      height:auto}

    a{color:var(--primary);text-decoration:none}
    .wrap{max-width:var(--maxw);margin-inline:auto;padding:clamp(16px,3vw,28px)}

    /* ========= Utilities ========= */
    .grid{display:grid;gap:clamp(16px,2.5vw,24px)}
    .grid-3{grid-template-columns: repeat(3,1fr)}
    .grid-2{grid-template-columns: repeat(2,1fr)}
    @media (max-width:1000px){.grid-3{grid-template-columns: repeat(2,1fr)}}
    @media (max-width:700px){.grid-3,.grid-2{grid-template-columns: 1fr}}
    .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(16px,2.4vw,22px);position:relative;overflow:hidden}
    .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong);transition:.2s ease}
    .caps{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-size:.78rem}
    .muted{color:var(--text-dim)}
    .badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:#1b2230;color:var(--text-dim);font-size:.78rem}
    .kpi{font-size:1.8rem;font-weight:700}
    .accent{color:var(--accent)}
    .ok{color:var(--ok)}
    .warn{color:var(--warn)}
    .danger{color:var(--danger)}
    .section{padding-block:clamp(28px,6vw,64px)}
    .section-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,2.5vw,28px)}
    h1,h2,h3{margin:0 0 .6rem;text-align:left}
    h1{font-size:clamp(1.8rem,2.6vw,3rem);line-height:1.15}
    h2{font-size:clamp(1.4rem,2vw,2.2rem)}
    h3{font-size:clamp(1.1rem,1.5vw,1.3rem)}
    p{margin:.2rem 0 .9rem;text-align:justify}

    /* ========= Buttons ========= */
    .btn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid transparent;border-radius:999px;padding:.8rem 1.1rem;font-weight:600;cursor:pointer;transition:.2s ease;user-select:none;text-decoration:none}
    .btn-primary{background:var(--primary);color:white;border-color:transparent}
    .btn-primary:hover{background:var(--primary-600);transform:translateY(-1px)}
    .btn-ghost{background:transparent;border-color:#2d3750;color:var(--text)}
    .btn-ghost:hover{border-color:var(--primary);transform:translateY(-1px)}
    .btn-icon{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:999px;border:1px solid #2b3853;background:#161d2c}
    .btn-icon:hover{border-color:var(--primary)}

    /* ========= Hero ========= */
    .hero{position:relative;overflow:hidden}
    .hero .banner{background:linear-gradient(135deg, rgba(79,123,217,.22), transparent 40%), radial-gradient(60rem 60rem at 100% -10%, rgba(42,161,152,.16), transparent 40%), linear-gradient(180deg, #111522, #0f1115 60%)}
    .hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(16px,3vw,28px);align-items:center}
    @media (max-width:900px){.hero-inner{grid-template-columns:1fr}}
    .pill{display:inline-flex;gap:.5rem;align-items:center;background:#172035;border:1px solid #223154;padding:.4rem .7rem;border-radius:999px;color:var(--text-dim);font-size:.85rem}
    .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}

    /* ========= Kacheln ========= */
    .tile{position:relative;isolation:isolate;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);transition:transform .2s ease, box-shadow .2s ease}
    .tile:hover{transform: scale(1.05);box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);}
    .tile .arrow{position:absolute;inset:auto 16px 16px auto;opacity:.6;transition:.2s}
    .tile:hover .arrow{transform:translateX(4px);opacity:.9}

    /* ========= Modelle ========= */
    .wheel{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    @media (max-width:900px){.wheel{grid-template-columns:1fr}}
    .legend{display:grid;gap:10px}
    .legend .row{display:flex;align-items:center;gap:10px;padding:4px;border-radius:8px;transition:box-shadow .2s ease}
    .legend .row.active{box-shadow:0 0 0 1px var(--glow), inset 0 0 12px var(--glow), 0 0 18px var(--spot)}
    .legend .row .label{transition:text-shadow .2s ease}
    .legend .row.active .label{text-shadow:0 0 8px var(--spot)}
    .swatch{width:14px;height:14px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
    .legend .row.active .swatch{box-shadow:0 0 0 2px rgba(255,255,255,.75), 0 0 10px var(--spot)}

    /* Legendenfarben */
    .swatch.lr1{background:#457B9D} .swatch.lr2{background:#2A9D8F} .swatch.lr3{background:#6A4C93}
    .swatch.lr4{background:#264653} .swatch.lr5{background:#F4A261} .swatch.lr6{background:#8D99AE} .swatch.lr7{background:#C44550}
    .swatch.br1{background:#3e6ae1} .swatch.br2{background:#2f4aa2} .swatch.br3{background:#2aa198}
    .swatch.br4{background:#ff9f43} .swatch.br5{background:#ff7f50} .swatch.br6{background:#8899aa} .swatch.br7{background:#6ccf9c}
    .swatch.or1{background:#5b8def} .swatch.or2{background:#36b3a8} .swatch.or3{background:#9b6bd6}
    .swatch.or4{background:#ffb057} .swatch.or5{background:#ff7a70} .swatch.or6{background:#97a6b8} .swatch.or7{background:#6ed0a6}

    /* SVG-Segmente (größere Hit-Area + States) */
    .wheel svg .seg{transition:.2s ease;cursor:pointer; stroke:transparent; stroke-width:8;}
    .wheel svg .seg:hover{filter:brightness(1.15)}
    .wheel svg .seg.active{filter:brightness(1.25);stroke:rgba(255,255,255,.22);stroke-width:1}

    /* Infobox neben/unter dem Rad */
    .info-box{
		margin-top:12px;
		border:1px solid #223154;
		background:linear-gradient(180deg,#131a2a,#101622);
		border-radius:12px;
		padding:12px;
		display:grid;
		grid-template-columns:40px 1fr 40px 40px; /* Icon | Text | Prev | Next */
		align-items:center;
		gap:12px;
		width: 100%;
		min-height:64px; 
		box-sizing: border-box;
		transition: box-shadow .2s ease, background .2s ease;
	}
		  
    .info-box .q{
		grid-column:2/3;
		color:var(--text);
		font-size:.98rem;
		line-height: 1.4;
        word-break: break-word;
        overflow-wrap: anywhere;
        min-height: 1em;       /* verhindert "Zucken" bei sehr kurzen Texten */
			}
		  
    .info-box .hint{
		grid-column:2/3;
		color:var(--text-dim);
		font-size:.9rem}
		  
    .info-box .btn-icon{
		grid-column:auto/auto;   width:40px;
        height:40px;
        display:grid;
        place-items:center;}
		  
    .info-empty{opacity:.8}
		  
    .info-box:not(.info-empty){ box-shadow: 0 0 0 1px rgba(79,123,217,.25), 0 6px 18px rgba(0,0,0,.25); }

@media (max-width: 640px){
  .info-box{
    grid-template-columns: 32px 1fr 32px 32px;
    max-width: 100%;
    min-height: 56px;
  }
  .info-box .btn-icon{
    width:32px; height:32px;
  }
}
		  
		  
    /* Motion preference */
    @media (prefers-reduced-motion: reduce){
      .card:hover{ transform:none; box-shadow:var(--shadow); }
      .wheel svg .seg, .legend .row{ transition:none; }
    }

    /* ========= Trust / FAQ ========= */
    details{background:#131827;border:1px solid #24304a;border-radius:12px;padding:14px}
    summary{cursor:pointer;font-weight:600;margin:-6px -6px 6px}
    .trust-grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
    @media (max-width:1000px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:600px){.trust-grid{grid-template-columns:1fr}}

    /* ========= Sticky CTA ========= */
    .sticky-cta{position:sticky;bottom:14px;z-index:50;display:flex;justify-content:center;pointer-events:none}
    .sticky-cta .bar{pointer-events:auto;background:linear-gradient(180deg, #1a2134, #141a29);border:1px solid #2b3853;border-radius:999px;padding:8px 10px;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center}
    .hide-on-desktop{display:none}
    @media (max-width:800px){.hide-on-mobile{display:none}.hide-on-desktop{display:inline-flex}}

.cta-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}


    /* ========= Footer ========= */
    footer{border-top:1px solid #212a40;color:var(--text-dim)}
    small{color:var(--text-dim)}

/* Navigation */
.navbar {
  background: var(--card);
  border-bottom: 1px solid #2b3853;
  position: fixed;
  height: var(--nav-h);
  line-height: var(--nav-h);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
body {
  padding-top: var(--nav-h);
}

.nav-container {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0px 20px;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--text);
  font-weight: 500;
  transition: color .2s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
}
/* Burger Button (nur Mobile sichtbar) */
/* Burger Button standardmäßig verstecken */
.burger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
}

/* Desktop */
.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

/* Mobile: Burger sichtbar, Nav-Links versteckt */
@media (max-width: 900px) {
  .burger {
    display: block;
  }

  .nav-links {
    display: none; /* versteckt, bis Burger geöffnet */
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    right: 0;
    background: var(--card);
    width: 220px;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
    z-index: 1000;
  }

  .nav-links.open {
    display: flex; /* sichtbar, wenn JS .open setzt */
  }

  .nav-links li {
    margin-bottom: 12px;
  }
}

/* Kontaktformular */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label {
  font-weight: 600;
  color: var(--text);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #2d3750;
  border-radius: var(--radius);
  background: #111622;
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(42,161,152,0.4);
  outline: none;
}

.contact-form button {
  align-self: flex-start;
}

/* Footer */
.footer {
  background: var(--card);
  border-top: 1px solid #2b3853;
  padding: 40px 20px;
}
.footer-container {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 20px;
}
.footer-col h4 {
  margin-bottom: 12px;
  color: var(--accent);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 6px;
}
.footer-col ul li a {
  color: var(--text-dim);
  font-size: .9rem;
}
.footer-col ul li a:hover {
  color: var(--accent);
}


/* Logo in der Navigation */
.logo-img {
  height: 40px;       /* Höhe bleibt fix */
  width: auto;        /* Breite automatisch */
  max-width: 160px;   /* optional – maximale Breite begrenzen */
  display: block;
  object-fit: contain; /* falls SVG oder PNG mit viel Rand */
}
@media (max-width: 480px) {
  .logo-img {
    height: 32px;
    max-width: 120px;
  }
}