/* ClubApp Website
 *
 * Hell statt dunkel: Die App ist dunkel, weil man sie abends am Sportplatz
 * benutzt. Eine Website, die ein Obmann am Bürorechner liest und einem
 * Sponsor zeigt, ist hell besser lesbar und wirkt weniger nach Spielerei.
 *
 * Rot bleibt die Akzentfarbe - dieselbe wie in der App, damit Website und
 * App als ein Produkt erkennbar sind.
 */

:root {
  --rot: #DE1C2E;
  --rot-dunkel: #B01523;
  --rot-blass: #FDECEE;
  --tinte: #14161F;
  --grau: #5B6070;
  --still: #8A8FA0;
  --linie: #E4E6EC;
  --flaeche: #F7F8FA;
  --weiss: #FFFFFF;
  --gold: #C9922B;
  --gruen: #1F8A58;
  --rand: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--weiss);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rot); text-decoration: none; }
a:hover { text-decoration: underline; }

.bahn { max-width: var(--rand); margin: 0 auto; padding: 0 24px; }

/* ---------- Kopf ---------- */

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }

.marke { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 20px;
         letter-spacing: -0.4px; color: var(--tinte); }
.marke:hover { text-decoration: none; }
.marke .zeichen { width: 30px; height: 30px; border-radius: 8px; background: var(--rot);
                  display: grid; place-items: center; color: #fff; font-size: 15px; }
.marke em { font-style: normal; color: var(--rot); }

.kopf nav { display: flex; gap: 24px; align-items: center; }
.kopf nav a { color: var(--grau); font-size: 15px; font-weight: 600; }
.kopf nav a:hover { color: var(--tinte); text-decoration: none; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rot); color: #fff; font-weight: 700; font-size: 16px;
  padding: 14px 26px; border-radius: 10px; border: none; cursor: pointer;
  transition: background 0.15s;
}
.knopf:hover { background: var(--rot-dunkel); text-decoration: none; }
.knopf.hell { background: #fff; color: var(--tinte); border: 1px solid var(--linie); }
.knopf.hell:hover { background: var(--flaeche); }
.knopf.umriss { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.knopf.umriss:hover { background: rgba(255,255,255,0.12); }
.knopf.klein { padding: 10px 18px; font-size: 15px; }

/* ---------- Bühne ---------- */

.buehne {
  position: relative; overflow: hidden; color: #fff;
  background: #10131C;
  /* Legt der Verein ein Foto unter website/bilder/buehne.jpg, erscheint es
     automatisch. Ohne Foto bleibt der Verlauf - keine kaputte Seite. */
  background-image:
    linear-gradient(105deg, rgba(16,19,28,0.96) 0%, rgba(16,19,28,0.72) 55%, rgba(222,28,46,0.42) 100%),
    url('/bilder/buehne.jpg');
  background-size: cover;
  background-position: center;
  padding: 92px 0 84px;
}

.buehne .bahn { position: relative; z-index: 1; }
.marke-oben { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
              letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.65);
              border: 1px solid rgba(255,255,255,0.25); border-radius: 99px; padding: 7px 14px; }

h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.06; font-weight: 900;
     letter-spacing: -1.6px; max-width: 17ch; margin-top: 22px; }
h1 em { font-style: normal; color: #FF5C68; }

.vorspann { margin-top: 20px; font-size: clamp(17px, 2vw, 20px); color: rgba(255,255,255,0.75);
            max-width: 58ch; }
.knopfreihe { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hinweis { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,0.5); }

/* Zahlenband direkt unter der Bühne */
.band { background: var(--tinte); color: #fff; }
.band .bahn { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 26px; }
.band .zelle { flex: 1; min-width: 150px; }
.band b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; }
.band span { display: block; font-size: 13.5px; color: rgba(255,255,255,0.55); margin-top: 3px; }

/* ---------- Abschnitte ---------- */

section { padding: 84px 0; }
section.getoent { background: var(--flaeche); border-block: 1px solid var(--linie); }

.ueber { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
         color: var(--rot); margin-bottom: 14px; }
h2 { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.16; font-weight: 900;
     letter-spacing: -0.9px; max-width: 22ch; }
h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.absatz { margin-top: 18px; color: var(--grau); max-width: 62ch; font-size: 17px; }

.raster { display: grid; gap: 18px; margin-top: 44px;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 26px; }
.karte .symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
                 background: var(--rot-blass); font-size: 20px; margin-bottom: 15px; }
.karte p { margin-top: 9px; color: var(--grau); font-size: 15.5px; }

/* ---------- Gegenüberstellung ---------- */

.vergleich { display: grid; gap: 18px; margin-top: 44px;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.spalte { border-radius: 16px; padding: 28px; border: 1px solid var(--linie); background: #fff; }
.spalte.nachher { border-color: rgba(222,28,46,0.3); box-shadow: 0 10px 30px rgba(222,28,46,0.07); }
.spalte h3 { margin-bottom: 16px; }
.spalte ul { list-style: none; display: grid; gap: 13px; }
.spalte li { display: flex; gap: 11px; color: var(--grau); font-size: 15.5px; line-height: 1.5; }
.spalte li::before { content: "✕"; color: var(--still); font-weight: 900; flex-shrink: 0; }
.spalte.nachher li::before { content: "✓"; color: var(--gruen); }

/* ---------- Ablauf ---------- */

.schritte { display: grid; gap: 18px; margin-top: 44px;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.schritt { position: relative; padding-top: 14px; }
.schritt .nummer { font-size: 13px; font-weight: 900; color: #fff; background: var(--rot);
                   width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
                   margin-bottom: 13px; }
.schritt p { color: var(--grau); font-size: 15.5px; margin-top: 7px; }

/* ---------- Fragen ---------- */

.fragen { margin-top: 40px; border-top: 1px solid var(--linie); }
details { border-bottom: 1px solid var(--linie); }
summary { cursor: pointer; padding: 20px 40px 20px 0; font-weight: 700; font-size: 17px;
          list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 17px; font-size: 24px;
                 font-weight: 400; color: var(--rot); line-height: 1; }
details[open] summary::after { content: "–"; }
details p { padding: 0 0 22px; color: var(--grau); max-width: 68ch; }

/* ---------- Schluss ---------- */

.schluss { background: var(--tinte); color: #fff; text-align: center; }
.schluss h2 { margin: 0 auto; color: #fff; }
.schluss .ueber { color: #FF5C68; }
.schluss .absatz { margin: 18px auto 0; color: rgba(255,255,255,0.7); }
.schluss .knopfreihe { justify-content: center; }

/* ---------- Fuß ---------- */

footer { border-top: 1px solid var(--linie); padding: 44px 0; color: var(--still); font-size: 14.5px; }
.fussreihe { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: var(--grau); }

/* ---------- Rechtstexte ---------- */

.text { padding: 56px 0 84px; }
.text .bahn { max-width: 740px; }
.text h1 { font-size: clamp(29px, 4.4vw, 42px); letter-spacing: -1px; max-width: none;
           margin-top: 0; color: var(--tinte); }
.text h2 { font-size: 21px; margin-top: 40px; letter-spacing: -0.3px; max-width: none; }
.text h3 { margin-top: 26px; }
.text p { margin-top: 14px; color: var(--grau); }
.text ul, .text ol { margin-top: 14px; padding-left: 22px; color: var(--grau); }
.text li { margin-top: 7px; }
.text strong { color: var(--tinte); }
.text blockquote { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--gold);
                   background: var(--flaeche); border-radius: 0 12px 12px 0; color: var(--grau); }

/* ---------- Schmale Geräte ---------- */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .kopf nav { display: none; }
  .buehne { padding: 62px 0 56px; }
  section { padding: 58px 0; }
  .knopfreihe { flex-direction: column; }
  .knopf { width: 100%; }
  .band .bahn { gap: 18px; }
}