@import url("fonts/fonts.css");

:root {
  --text: #1c2a2f;
  --leise: #53646a;
  --petrol: #0f6e8c;
  --petrol-dunkel: #0b5269;
  --hell: #eff5f6;
  --linie: #dbe6e8;
  --nacht: #0f2a33;
  --laser: #2fd36a;
  --breite: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Figtree", system-ui, sans-serif; font-size: 18px; line-height: 1.6; color: var(--text); background: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--petrol); }
a:hover { color: var(--petrol-dunkel); }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; }
h3 { font-size: 21px; font-weight: 700; }
p { margin: 0 0 1em; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.abschnitt { padding: clamp(64px, 9vw, 112px) 0; }
.hell { background: var(--hell); }
.vorspann { font-size: 20px; color: var(--leise); max-width: 40em; margin-top: 16px; }

.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--petrol); color: #fff; font-weight: 700; text-decoration: none; }
.knopf:hover { background: var(--petrol-dunkel); color: #fff; }
.knopf.rand { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--linie); }
.knopf.rand:hover { box-shadow: inset 0 0 0 2px var(--text); color: var(--text); }

/* Kopf */
.kopf { background: #fff; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 10; }
.kopf .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; min-height: 76px; }
.wortmarke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.wortmarke svg { width: 32px; height: 32px; }
.kopf nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; }
.kopf nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px; padding: 12px 0; }
.kopf nav a.knopf { color: #fff; min-height: 44px; padding: 0 20px; }

/* Bühne */
.buehne { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); }
.buehne .rahmen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.buehne h1 { font-size: clamp(40px, 5.4vw, 70px); font-weight: 800; }
.buehne h1 span { display: block; color: var(--petrol); }
.buehne p { font-size: 20px; color: var(--leise); margin: 24px 0 32px; max-width: 28em; }
.buehne .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.buehne img { border-radius: 28px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.leiste { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.leiste .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px clamp(32px, 6vw, 88px); padding-top: 28px; padding-bottom: 28px; }
.leiste a { display: block; }
.leiste img { height: 48px; width: auto; }
.leiste img.hoch { height: 104px; }

/* Heute */
.heute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.heute img { border-radius: 28px; }
.drei { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.drei li { padding-left: 34px; position: relative; color: var(--leise); }
.drei li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--petrol); }
.drei strong { color: var(--text); display: block; }

/* Szenarien */
.szenarien { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 48px; }
.szenario { background: #fff; border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.szenario svg { width: 40px; height: 40px; }
.szenario p { margin: 0; color: var(--leise); }
.szenario.dunkel { background: var(--nacht); color: #fff; justify-content: center; }
.szenario.dunkel p { color: #c7d7dc; }
.szenario.dunkel a { color: #fff; font-weight: 700; }

/* Ablauf */
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; counter-reset: schritt; }
.schritt { border-top: 3px solid var(--petrol); padding-top: 22px; }
.schritt::before { counter-increment: schritt; content: counter(schritt); display: block; font-size: 48px; font-weight: 800; color: var(--petrol); line-height: 1; margin-bottom: 14px; }
.schritt p { color: var(--leise); margin: 10px 0 0; }

/* Mitmachen */
.mitmachen { background: var(--nacht); color: #e3edf0; }
.mitmachen .rahmen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.mitmachen img { border-radius: 28px; }
.mitmachen h2 { color: #fff; }
.mitmachen ul { margin: 22px 0 30px; padding-left: 22px; display: grid; gap: 10px; }
.mitmachen .knopf { background: var(--laser); color: var(--nacht); }
.mitmachen .knopf:hover { background: #fff; color: var(--nacht); }

/* Projekt */
.projekt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.eckdaten { margin: 28px 0 0; }
.eckdaten div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.eckdaten dt { color: var(--leise); }
.eckdaten dd { margin: 0; font-weight: 600; }
.partner { display: grid; gap: 16px; }
.partnerkarte { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; border: 1px solid var(--linie); border-radius: 20px; text-decoration: none; color: var(--text); }
.partnerkarte:hover { border-color: var(--petrol); }
.partnerkarte img { max-height: 48px; width: auto; }
.partnerkarte p { margin: 4px 0 0; color: var(--leise); font-size: 16px; }
.foerderlogo { padding: 20px; border: 1px solid var(--linie); border-radius: 20px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.foerderlogo img { height: 120px; width: auto; }
.foerderlogo p { flex: 1 1 220px; margin: 0; font-size: 16px; color: var(--leise); }

/* Fragen */
.fragen { max-width: 820px; }
.fragen details { border-bottom: 1px solid var(--linie); padding: 20px 0; }
.fragen summary { font-weight: 700; font-size: 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.fragen summary::after { content: "+"; color: var(--petrol); font-size: 26px; line-height: 1; }
.fragen details[open] summary::after { content: "–"; }
.fragen p { margin: 12px 0 0; color: var(--leise); }

/* Fuß */
.fuss { background: var(--nacht); color: #b7c9cf; font-size: 15px; }
.fuss .rahmen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; padding-top: 44px; padding-bottom: 44px; }
.fuss a { color: #fff; }
.fuss nav { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.fuss .wortmarke { color: #fff; font-size: 22px; }

/* Rechtstexte */
.recht { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 40px); }
.recht h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 800; margin-bottom: 32px; }
.recht h2 { font-size: 22px; margin: 36px 0 10px; }

@media (max-width: 960px) {
  .buehne .rahmen, .heute, .mitmachen .rahmen, .projekt { grid-template-columns: minmax(0, 1fr); }
  .schritte { grid-template-columns: minmax(0, 1fr); }
  .heute img { order: 2; }
}
@media (max-width: 560px) {
  .partnerkarte { grid-template-columns: minmax(0, 1fr); }
  .eckdaten div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .leiste img { height: 38px; }
  .leiste img.hoch { height: 60px; }
}