/* Cteam Akademie – Farben und Schrift angelehnt an cteam.com */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-700.woff2) format("woff2"); }

:root {
  --blau: #1f67cc;          /* Akzent, Links, Buttons */
  --blau-dunkel: #1b5bb4;
  --navy: #063b79;          /* Logo-Blau, Kacheln */
  --navy-hell: #244382;     /* Verlauf oben */
  --navy-tief: #1b1e2e;     /* Verlauf unten */
  --text: #1e252e;
  --text-weich: #434c59;
  --grau: #667080;
  --linie: #dfe7f2;
  --hell: #f0f4fa;
  --gelb: #f9b122;          /* „c“ im Logo */
  --radius: 14px;
  --breite: 1180px;
  --schatten: 0 1px 2px rgba(30, 37, 46, .06), 0 8px 24px rgba(30, 37, 46, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
svg { width: 1.2em; height: 1.2em; flex: none; }
h1, h2, h3 { line-height: 1.2; font-weight: 700; }

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

.kopf {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.kopf__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.kopf__logo img { height: 46px; width: auto; }
.kopf__titel {
  font-weight: 600; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--navy);
  padding-left: 14px; border-left: 1px solid var(--linie);
}
.kopf__nav { display: flex; align-items: center; gap: 8px; }
.kopf__nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  font-weight: 500; font-size: .95rem;
  color: var(--text); text-decoration: none;
  transition: background .2s, color .2s;
}
.kopf__nav a:hover { background: var(--hell); color: var(--blau); }
.kopf__sprache { border: 1px solid var(--linie); }
.kopf__sprache-code { font-size: .8rem; font-weight: 600; letter-spacing: .06em; }

/* ---------------------------------------------------------------- Allgemein */

.bereich { max-width: var(--breite); margin: 0 auto; padding: 56px 24px 88px; }

.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 10px;
  background: var(--blau); color: #fff;
  font-weight: 600; text-decoration: none;
  transition: background .2s, transform .2s;
}
.knopf:hover { background: var(--blau-dunkel); }
.knopf:hover svg { transform: translateX(3px); }
.knopf svg { transition: transform .2s; }
.knopf--weiss { background: #fff; color: var(--blau); padding: 12px 20px; font-size: .95rem; }
.knopf--weiss:hover { background: var(--hell); }

/* Dunkler Verlauf wie auf cteam.com */
.buehne, .seitenkopf, .fuss {
  background: linear-gradient(180deg, var(--navy-hell) 0%, var(--navy-tief) 100%);
  color: #fff;
}

/* ---------------------------------------------------------------- Startseite */

.buehne__innen { max-width: var(--breite); margin: 0 auto; padding: 64px 24px 120px; text-align: center; }
.buehne__kicker {
  margin: 0 0 10px; font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.buehne h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 3rem); }

.start .bereich { padding-top: 0; }
.sprachen {
  margin-top: -76px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.sprache {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 32px 16px 28px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten);
  text-decoration: none; color: var(--navy);
  transition: transform .25s, box-shadow .25s;
}
a.sprache:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(30,37,46,.06), 0 16px 36px rgba(30,37,46,.14); }
.sprache__flagge {
  width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--linie);
  display: grid; place-items: center; background: var(--hell);
}
.sprache__flagge img { width: 100%; height: 100%; object-fit: cover; }
.sprache__platzhalter { font-weight: 700; font-size: 1.6rem; color: var(--navy); }
.sprache__name { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sprache--bald { color: var(--grau); }
.sprache--bald .sprache__flagge { filter: grayscale(1); opacity: .45; }
.sprache__bald {
  position: absolute; top: 14px; right: 14px;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--hell); color: var(--grau); padding: 3px 9px; border-radius: 99px;
}

.akademie-karte {
  max-width: 900px; margin: 28px auto 0;
  display: flex; align-items: center; gap: 22px;
  padding: 20px 26px;
  background: var(--hell); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: background .2s;
}
.akademie-karte:hover { background: var(--linie); }
.akademie-karte__icon { width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.akademie-karte__icon img { width: 64px; height: 64px; object-fit: contain; }
.akademie-karte__platzhalter svg { width: 48px; height: 48px; color: var(--navy); }
.akademie-karte__text { display: flex; flex-direction: column; flex: 1; }
.akademie-karte__text strong { font-size: 1.15rem; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; }
.akademie-karte__text span { color: var(--text-weich); }
.akademie-karte__pfeil svg { width: 28px; height: 28px; color: var(--blau); transition: transform .2s; }
.akademie-karte:hover .akademie-karte__pfeil svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- Urheberrechtsvermerk */

.willkommen {
  padding: 72px 24px 96px;
  background: linear-gradient(180deg, #fff 0%, var(--hell) 45%, var(--linie) 100%);
}
.willkommen__karte {
  max-width: 820px; margin: 0 auto; text-align: center;
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 56px 48px;
}
.willkommen__karte h1 { margin: 0 0 24px; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--text); }
.willkommen__karte p { color: var(--text-weich); margin: 0 0 16px; }
.willkommen__karte .knopf { margin-top: 20px; }

/* ---------------------------------------------------------------- Seitenkopf + Brotkrumen */

.seitenkopf__innen { max-width: var(--breite); margin: 0 auto; padding: 28px 24px 48px; }
.seitenkopf--gross .seitenkopf__innen { padding-bottom: 64px; }
.seitenkopf h1 { margin: 6px 0 0; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.seitenkopf__kicker {
  margin: 28px 0 0; font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gelb);
}
.seitenkopf__kicker + h1 { margin-top: 4px; }
.seitenkopf__unter { margin: 10px 0 0; font-size: 1.15rem; color: rgba(255, 255, 255, .8); }

.krumen ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .88rem; }
.krumen li { color: rgba(255, 255, 255, .9); }
.krumen li + li::before { content: "/"; margin: 0 10px; color: rgba(255, 255, 255, .4); }
.krumen a { color: rgba(255, 255, 255, .65); text-decoration: none; }
.krumen a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- Kategorien */

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.kachel {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--navy); color: #fff;
  border-radius: var(--radius); overflow: hidden;
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.kachel:hover { transform: translateY(-4px); background: var(--navy-hell); box-shadow: 0 16px 36px rgba(6, 59, 121, .3); }
.kachel__bild { aspect-ratio: 2 / 1; display: grid; place-items: center; padding: 18px 10px 0; }
.kachel__bild img { width: 100%; height: 100%; object-fit: contain; }
.kachel__platzhalter { width: 100%; height: 100%; }
.kachel__text { padding: 14px 24px 26px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.kachel__staffel { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gelb); }
.kachel__titel { font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.kachel__anzahl {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; font-weight: 600;
  background: rgba(255, 255, 255, .14); padding: 3px 10px 3px 6px; border-radius: 99px;
}
.kachel__anzahl svg { width: 1em; height: 1em; }
.kachel--leer { opacity: .55; }

/* ---------------------------------------------------------------- Filme */

.filme { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
.film { min-width: 0; }
.video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: var(--navy-tief);
  box-shadow: var(--schatten);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__text { padding: 14px 4px 0; }
.film__folge { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blau); }
.film__titel { margin: 2px 0 0; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.leer { text-align: center; color: var(--grau); padding: 40px 0; }

.blaettern {
  margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.blaettern__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none;
}
.blaettern__link:last-child { justify-self: end; }
.blaettern__mitte {
  padding: 10px 20px; border-radius: 10px; background: var(--hell);
  font-weight: 600; text-decoration: none; color: var(--navy);
}
.blaettern__mitte:hover { background: var(--linie); }

/* ---------------------------------------------------------------- Akademie */

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.intro__kicker { font-size: 1.6rem; font-weight: 700; color: var(--text); margin: 0 0 16px; line-height: 1.25; }
.intro__text p:not(.intro__kicker) { color: var(--text-weich); font-size: 1.1rem; }
.intro__bild { margin: 0; }
.intro__bild img { border-radius: var(--radius); box-shadow: var(--schatten); }
.akademie-video { max-width: 960px; margin: 64px auto 0; }
.hinweis-untertitel { text-align: center; color: var(--grau); margin-top: 16px; font-size: .95rem; }

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

.fliesstext { max-width: 820px; }
.fliesstext h2 { font-size: 1.5rem; margin: 48px 0 12px; }
.fliesstext h2:first-of-type { margin-top: 0; }
.fliesstext h3 { font-size: 1.1rem; margin: 28px 0 6px; }
.fliesstext p, .fliesstext li { color: var(--text-weich); }
.fliesstext .stand { margin-top: 40px; font-size: .9rem; color: var(--grau); }

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

.fuss__innen {
  max-width: var(--breite); margin: 0 auto; padding: 64px 24px 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.fuss h2 { font-size: 1.2rem; margin: 0 0 18px; }
.fuss__adresse { margin: 0 0 18px; color: rgba(255, 255, 255, .72); }
.fuss__kontakt { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.fuss__kontakt svg { color: rgba(255, 255, 255, .72); }
.fuss a { color: #fff; font-weight: 600; }
.fuss__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fuss .knopf--weiss { color: var(--blau); }
.fuss__sozial { display: flex; gap: 12px; margin-top: 40px; }
.fuss__sozial a {
  width: 46px; height: 46px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  transition: background .2s;
}
.fuss__sozial a:hover { background: rgba(255, 255, 255, .22); }
.fuss__copy {
  max-width: var(--breite); margin: 0 auto; padding: 18px 24px 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .85rem; color: rgba(255, 255, 255, .5);
}

/* ---------------------------------------------------------------- Tablet & Handy */

@media (max-width: 900px) {
  .filme { grid-template-columns: 1fr; gap: 36px; }
  .intro { grid-template-columns: 1fr; gap: 32px; }
  .fuss__innen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .kopf__innen { padding: 10px 16px; }
  .kopf__logo img { height: 38px; }
  .kopf__titel { font-size: .95rem; padding-left: 10px; }
  .kopf__logo { gap: 10px; }
  .kopf__nav a { padding: 8px 10px; }
  .kopf__nav a:first-child span { display: none; }
  .bereich { padding: 36px 16px 64px; }
  .buehne__innen { padding: 44px 16px 100px; }
  .sprachen { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sprache { padding: 24px 10px 20px; gap: 12px; }
  .sprache__flagge { width: 84px; height: 84px; }
  .sprache__name { font-size: .9rem; }
  .sprache__bald { top: 8px; right: 8px; font-size: .62rem; }
  .akademie-karte { padding: 16px; gap: 14px; }
  .akademie-karte__icon, .akademie-karte__icon img { width: 48px; height: 48px; }
  .willkommen { padding: 36px 16px 56px; }
  .willkommen__karte { padding: 36px 22px; }
  .seitenkopf__innen { padding: 20px 16px 36px; }
  .kacheln { grid-template-columns: 1fr; gap: 16px; }
  .kachel__titel { font-size: 1.2rem; }
  .blaettern { grid-template-columns: 1fr 1fr; }
  .blaettern__mitte { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .fuss__innen { grid-template-columns: 1fr; gap: 36px; padding: 48px 16px 32px; }
  .fuss__copy { padding: 16px; }
}