@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --tief: #1E3A3A;
  --tief-2: #2B4848;
  --tief-3: #172F2F;
  --sand: #F8F6F0;
  --weiss: #FFFFFF;
  --gold: #C99A5B;
  --gold-dunkel: #8A6A3A;
  --salbei: #7E9E8A;
  --salbei-dunkel: #5E7F6E;
  --nebel: #E9EDE8;
  --text-2: #46605B;
  --hell-auf-dunkel: #C9D6CF;
  --linie: #DCDDD6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tief);
  background: var(--sand);
  line-height: 1.5;
}
a { color: var(--tief); }
a:hover { color: var(--gold-dunkel); }
img, svg { display: block; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; }
.section--weiss { background: var(--weiss); }
.section--dunkel { background: var(--tief); color: var(--sand); }
.eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--salbei-dunkel); margin: 0 0 14px;
}
.section--dunkel .eyebrow { color: var(--gold); }
.kopf { max-width: 760px; margin-bottom: 40px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; font-weight: 800; }
h3 { font-weight: 800; }
.lead { font-size: 19px; color: var(--text-2); margin: 14px 0 0; }
.section--dunkel .lead { color: var(--hell-auf-dunkel); }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  font-size: 17px; padding: 16px 26px; border-radius: 10px; text-align: center;
}
.btn--gold { background: var(--gold); color: var(--tief); }
.btn--gold:hover { background: #D8AC70; color: var(--tief); }
.btn--rand { border: 1px solid #5C7A72; color: var(--sand); font-weight: 600; }
.btn--rand:hover { border-color: var(--sand); color: var(--sand); }

/* Kopfzeile */
.header { background: var(--tief); color: var(--sand); }
.header .wrap {
  padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap;
  gap: 16px 32px; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 12px; color: var(--sand); text-decoration: none; }
.logo:hover { color: var(--sand); }
.logo span { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; font-size: 15px; font-weight: 600; }
.nav a { color: #DCE5DF; text-decoration: none; }
.nav a:hover { color: var(--weiss); }
.nav .btn { padding: 12px 20px; font-size: 15px; }

/* Hero */
.hero { background: var(--tief); color: var(--sand); }
.hero .wrap {
  padding-top: 96px; padding-bottom: 112px; display: flex; flex-wrap: wrap;
  gap: 48px; align-items: flex-end;
}
.hero__text { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__text .eyebrow { color: var(--gold); margin: 0; }
.hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.hero p { margin: 0; font-size: 21px; color: var(--hell-auf-dunkel); max-width: 680px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.kennzahlen { flex: 1 1 380px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kennzahl { background: var(--tief-2); border-radius: 14px; padding: 22px; }
.kennzahl b { display: block; font-size: 40px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.kennzahl b.gold { color: var(--gold); }
.kennzahl span { font-size: 14px; color: var(--hell-auf-dunkel); }

/* Vergleich */
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.karte-gross { border-radius: 18px; padding: 36px; }
.karte-gross--grau { background: var(--nebel); }
.karte-gross--gold { background: var(--weiss); border: 2px solid var(--gold); }
.karte-gross .eyebrow { margin-bottom: 20px; }
.karte-gross--gold .eyebrow { color: var(--gold-dunkel); }
.karte-gross ol { margin: 0; padding-left: 22px; display: grid; gap: 14px; font-size: 17px; }

/* Methodik */
.phasen { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.phase { border: 1px solid var(--linie); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.phase--aktiv { border: 2px solid var(--gold); background: #FFFDF8; }
.phase__nr { font-size: 44px; font-weight: 800; color: var(--salbei); line-height: 1; }
.phase h3 { font-size: 22px; }
.phase__dauer { font-size: 15px; font-weight: 700; color: var(--salbei-dunkel); }
.phase p { margin: 0; font-size: 16px; color: var(--text-2); }
.phase__gate { margin-top: auto; padding-top: 14px; border-top: 1px solid #E3E0D6; font-size: 15px; }
.sprint { background: var(--tief); color: var(--sand); border-radius: 18px; padding: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.sprint .eyebrow { color: var(--gold); margin-bottom: 8px; letter-spacing: 0.14em; }
.sprint h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.sprint p { margin: 0; font-size: 16px; color: var(--hell-auf-dunkel); }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.kachel h3 { font-size: 21px; }
.kachel p { margin: 0; font-size: 16px; color: var(--text-2); }
.kachel__kpi { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--gold-dunkel); }
.kachel--hinweis { background: var(--nebel); border: 0; justify-content: center; }
.kachel--hinweis p { color: var(--tief); font-size: 17px; font-weight: 600; }

/* Rechner */
.rechner-zeile { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.rechner-zeile > div:first-child { flex: 1 1 380px; min-width: 0; }
.rechner-zeile h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; }
.rechner { flex: 1 1 440px; min-width: 0; background: var(--tief-2); border-radius: 20px; padding: 36px; display: grid; gap: 28px; }
.regler { display: grid; gap: 10px; }
.regler label { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; }
.regler output { color: var(--gold); }
.regler input { width: 100%; accent-color: var(--gold); min-height: 28px; }
.ergebnis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 16px; border-top: 1px solid #45625F; }
.ergebnis b { display: block; font-size: 40px; font-weight: 800; line-height: 1.2; }
.ergebnis b.gold { color: var(--gold); }
.ergebnis span { font-size: 14px; color: var(--hell-auf-dunkel); }
.klein { margin: 0; font-size: 13px; color: #A9BDB4; }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.person { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.person__foto { width: 132px; height: 132px; border-radius: 16px; background: #DCE5DF; object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--salbei-dunkel); }
.person > div:not(.person__foto) { flex: 1 1 200px; display: grid; gap: 8px; }
.person h3 { font-size: 22px; }
.person__rolle { font-size: 15px; font-weight: 700; color: var(--gold-dunkel); }
.person p { margin: 0; font-size: 16px; color: var(--text-2); }

/* FAQ */
.faq { max-width: 900px; }
.faq h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 32px; }
.faq details { border-bottom: 1px solid var(--linie); padding: 20px 0; }
.faq summary { font-size: 19px; font-weight: 700; cursor: pointer; }
.faq details p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }

/* Kontakt */
.kontakt { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; justify-content: space-between; }
.kontakt > div:first-child { flex: 999 1 520px; min-width: 0; }
.kontakt h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; }
.kontakt__knoepfe { flex: 1 1 280px; display: grid; gap: 12px; }

/* Fuss */
.footer { background: var(--tief-3); color: #A9BDB4; padding: 40px 0; font-size: 14px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
.footer nav { display: flex; gap: 24px; }
.footer a { color: var(--hell-auf-dunkel); }
.footer a:hover { color: var(--weiss); }

/* Rechtsseiten */
.recht { max-width: 820px; padding: 72px 24px 104px; margin: 0 auto; }
.recht h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 800; margin-bottom: 32px; }
.recht h2 { font-size: 24px; margin: 40px 0 12px; }
.recht p, .recht li { font-size: 17px; color: var(--text-2); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.person__foto--initialen { background: var(--tief); color: var(--gold); font-size: 40px; font-weight: 800; letter-spacing: 0.02em; }