/* C&C Chess Club — Website
   Statisch, ohne Framework, ohne Schriften von fremden Servern, ohne Tracking.
   Farben stammen aus dem App-Symbol: dunkles Blau, Orange als einziger Akzent. */

:root {
  --blau-tief:   #0c2740;
  --blau:        #123a5c;
  --orange:      #f5821f;
  --orange-dun:  #d96d0c;

  --grund:       #ffffff;
  --grund-2:     #f4f6f8;
  --karte:       #ffffff;
  --rand:        #dde3e9;
  --text:        #1b2733;
  --text-leise:  #5a6875;
  --link:        #0b5fa5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:      #0f1720;
    --grund-2:    #16212c;
    --karte:      #1e2b3a;
    --rand:       #263441;
    --text:       #e6edf3;
    --text-leise: #9aa9b7;
    --link:       #6cb6ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.mitte { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 22px; }
.schmal { max-width: 760px; }

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

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

/* ---------- Kopfleiste ---------- */

.leiste {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rand);
}
.leiste .mitte {
  display: flex; align-items: center; gap: 12px;
  height: 62px;
}
.leiste .marke {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--text); text-decoration: none;
  letter-spacing: -.01em;
}
.leiste .marke img { width: 30px; height: 30px; border-radius: 7px; }
.leiste nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
.leiste nav a { color: var(--text-leise); text-decoration: none; }
.leiste nav a:hover { color: var(--text); }
@media (max-width: 640px) { .leiste nav { display: none; } }

/* ---------- Kopfbereich ---------- */

.kopf {
  background: linear-gradient(160deg, var(--blau-tief) 0%, var(--blau) 100%);
  color: #fff;
  padding: 68px 0 76px;
  text-align: center;
}
.kopf img.symbol {
  width: 116px; height: 116px; margin: 0 auto 26px;
  border-radius: 26px;
  box-shadow: 0 10px 34px rgba(0,0,0,.42);
}
.kopf h1 {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 6vw, 3.15rem);
  line-height: 1.12; letter-spacing: -.022em; font-weight: 800;
}
.kopf .claim {
  margin: 0 auto 32px; max-width: 33ch;
  font-size: clamp(1.06rem, 2.6vw, 1.28rem);
  color: #c3d5e6;
}
.kopf .fein {
  margin-top: 22px; font-size: 14.5px; color: #8fa9c1;
}

.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: #14232f;
  font-weight: 700; font-size: 17px;
  padding: 14px 30px; border-radius: 11px;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(245,130,31,.34);
}
.knopf:hover { background: var(--orange-dun); color: #fff; }

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

section { padding: 68px 0; }
section.getoent { background: var(--grund-2); }

h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  letter-spacing: -.018em; line-height: 1.22;
}
.vorspann {
  margin: 0 0 40px; max-width: 62ch;
  color: var(--text-leise); font-size: 17.5px;
}
section > .mitte > h2, section > .mitte > .vorspann { text-align: center; margin-inline: auto; }

/* ---------- Bildschirmfotos ---------- */

.galerie {
  display: flex; gap: 22px;
  overflow-x: auto; padding: 6px 22px 26px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.galerie figure {
  margin: 0; flex: 0 0 auto; width: 244px;
  scroll-snap-align: center;
}
.galerie img {
  width: 244px; border-radius: 17px;
  border: 1px solid var(--rand);
  box-shadow: 0 7px 22px rgba(10,25,40,.16);
  background: #000;
}
.galerie figcaption {
  margin-top: 12px; text-align: center;
  font-size: 14.5px; color: var(--text-leise);
}

/* ---------- Funktionen ---------- */

.raster {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 15px;
  padding: 26px 24px 28px;
}
.karte h3 {
  margin: 0 0 10px; font-size: 1.16rem; letter-spacing: -.012em;
}
.karte h3 .zeichen {
  color: var(--orange); margin-right: 9px; font-size: 1.1em;
}
.karte p { margin: 0; color: var(--text-leise); font-size: 16px; }

/* ---------- Video ---------- */

.film {
  max-width: 760px; margin: 0 auto;
  border-radius: 15px; overflow: hidden;
  border: 1px solid var(--rand);
  box-shadow: 0 8px 28px rgba(10,25,40,.18);
  background: #000;
}
.film video { width: 100%; display: block; }

/* ---------- Konto-Hinweis ---------- */

.hinweis {
  max-width: 760px; margin: 0 auto;
  background: var(--karte); border: 1px solid var(--rand);
  border-left: 4px solid var(--orange);
  border-radius: 12px; padding: 26px 28px;
}
.hinweis h2 { text-align: left; font-size: 1.3rem; }
.hinweis p { color: var(--text-leise); }
.hinweis p:last-child { margin-bottom: 0; }

/* ---------- Fusszeile ---------- */

footer {
  background: var(--blau-tief); color: #a9c0d4;
  padding: 46px 0 40px; font-size: 15px;
}
footer a { color: #dce8f2; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .reihen { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 22px; }
footer .klein { color: #7b95ac; font-size: 13.5px; line-height: 1.6; }

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

.rechtstext { padding: 52px 0 74px; }
.rechtstext h1 {
  font-size: clamp(1.7rem, 4.4vw, 2.2rem);
  letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.2;
}
.rechtstext .stand {
  color: var(--text-leise); font-size: 15px; margin: 0 0 38px;
}
.rechtstext h2 {
  text-align: left; margin: 44px 0 12px;
  font-size: 1.32rem; padding-top: 14px;
  border-top: 1px solid var(--rand);
}
.rechtstext h3 {
  margin: 30px 0 8px; font-size: 1.09rem;
}
.rechtstext p { margin: 0 0 17px; }
.rechtstext ul { margin: 0 0 17px; padding-left: 22px; }
.rechtstext li { margin-bottom: 7px; }
.rechtstext .zurueck {
  display: inline-block; margin-bottom: 30px;
  font-size: 15px; text-decoration: none;
}
.rechtstext .zurueck:hover { text-decoration: underline; }

@media print {
  .leiste, footer, .zurueck { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .rechtstext h2 { border-top: 1px solid #999; }
}