:root{
  --grund:#0b1220;
  --grund-hell:#111c2f;
  --rand:rgba(255,255,255,.09);
  --text:#e9eef5;
  --leise:#9fb0c4;
  --gold:#dca747;
  --gold-hell:#ecc879;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
.huelle{max-width:64rem;margin:0 auto;padding:1.25rem}
a{color:inherit}

/* Kopf */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0 2rem}
.marke{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none}
.marke-zeichen{width:2.1rem;height:2.1rem;display:grid;place-items:center;color:var(--gold);
  border:1px solid var(--rand);border-radius:.7rem;background:rgba(220,167,71,.08)}
.marke-zeichen svg{width:1.25rem;height:1.25rem}
.marke-text{font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.marke-text span{color:var(--gold)}

/* Knoepfe */
.knopf{display:inline-block;padding:.7rem 1.15rem;border-radius:.6rem;text-decoration:none;
  font-weight:600;font-size:.95rem;border:1px solid transparent;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease}
.knopf:hover{transform:scale(1.02)}
.knopf-haupt{background:var(--gold);color:#1a1205}
.knopf-haupt:hover{background:var(--gold-hell)}
.knopf-leise{border-color:var(--rand);color:var(--text);background:rgba(255,255,255,.03)}
.knopf-leise:hover{background:rgba(220,167,71,.14);border-color:rgba(220,167,71,.35)}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Hero */
.hero{padding:2rem 0 3rem;border-bottom:1px solid var(--rand)}
.ueberzeile{margin:0 0 .6rem;color:var(--gold);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em}
.hero h1{margin:0;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.15;letter-spacing:-.01em}
.leitung{max-width:38rem;margin:1rem 0 0;color:var(--leise);font-size:1.06rem}
.hinweis{margin:1rem 0 0;color:var(--leise);font-size:.85rem}

/* Bereiche */
.bereich{padding:3rem 0;border-bottom:1px solid var(--rand)}
.bereich h2{margin:0 0 1.5rem;font-size:1.35rem;letter-spacing:-.01em}
.karten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.karte{margin:0;padding:1.25rem;border:1px solid var(--rand);border-radius:.9rem;
  background:var(--grund-hell);transition:transform .12s ease,border-color .12s ease}
.karte:hover{transform:scale(1.015);border-color:rgba(220,167,71,.35)}
.karte-sinnbild{display:grid;place-items:center;width:2.3rem;height:2.3rem;margin-bottom:.85rem;
  border-radius:.6rem;color:var(--gold);background:rgba(220,167,71,.1)}
.karte-sinnbild svg{width:1.3rem;height:1.3rem}
.karte h3{margin:0 0 .4rem;font-size:1.05rem}
.karte p{margin:0;color:var(--leise);font-size:.94rem}

/* Schritte */
.schritte{margin:0;padding-left:1.2rem;display:grid;gap:.85rem;max-width:44rem}
.schritte li{color:var(--leise)}
.schritte strong{color:var(--text)}

/* Abschluss */
.abschluss{padding:3rem 0 2rem}
.abschluss h2{margin:0 0 .6rem;font-size:1.35rem}
.abschluss p{margin:0;color:var(--leise);max-width:38rem}

/* Fuss */
.fuss{padding:2rem 0 3rem;border-top:1px solid var(--rand);color:var(--leise);font-size:.9rem}
.fuss p{margin:0 0 .4rem}
.fuss a{color:var(--leise);text-decoration:none;margin-right:1.1rem}
.fuss a:hover{color:var(--gold)}
.fuss .klein{font-size:.82rem;opacity:.8}

@media (max-width:520px){
  .kopf{flex-direction:column;align-items:flex-start;gap:.75rem}
  .knoepfe{flex-direction:column;align-items:stretch}
  .knoepfe .knopf{text-align:center}
}