/* ==========================================================================
   TERA TU Graz – Website
   Farben und Schriften folgen dem TERA-Branding aus Canva
   (Sponsoring-Broschüre, Instagram-Posts, Präsentation).
   Alles Zentrale steht in :root.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, keine Anfragen an Google) ----------
   Barlow Italic: Überschriften in Großbuchstaben, wie in Instagram-Posts und Präsentation.
   Kumbh Sans: Fließtext, nah an der runden Schrift der Sponsoring-Broschüre. */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600-italic-latin.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600-italic-latin-ext.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-800-italic-latin.woff2") format("woff2");
  font-weight: 700 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-800-italic-latin-ext.woff2") format("woff2");
  font-weight: 700 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Kumbh Sans";
  src: url("../fonts/kumbh-sans-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kumbh Sans";
  src: url("../fonts/kumbh-sans-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Gestaltungs-Variablen ----------
   Farbwerte direkt aus den Canva-Designs übernommen. */
:root {
  --black: #000000;       /* Seitenhintergrund wie in Broschüre und Poster */
  --night: #10140f;       /* Grün-Schwarz der Broschüren-Innenseiten */
  --card: #171d16;        /* Flächen auf --night */
  --green: #1f9d08;       /* TERA-Grün (Logo, Bänder, Überschriften) */
  --green-hi: #2fe126;    /* Leuchtgrün (Logo, Akzente, Buttons) */
  --green-ink: #167406;   /* Grün für Text auf hellem Grund (Kontrast ≥ 4.5:1) */
  --white: #ffffff;
  --grey: #e1e1e1;        /* Fließtext auf Schwarz, wie in der Broschüre */
  --muted: #9aa396;       /* Nebentext auf Schwarz */
  --paper: #f2f2f2;       /* helle Abschnitte */
  --ink: #0d110c;         /* Text auf hellem Grund */
  --ink-muted: #4b5249;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.32);
  --line-light: rgba(13, 17, 12, 0.14);
  --line-light-strong: rgba(13, 17, 12, 0.32);

  --font-display: "Barlow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --skew: -20deg;         /* Schräge der Parallelogramme wie im Logo */
  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 8rem);
  --header-h: 4.75rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --fs-display: clamp(3rem, 12vw, 9.5rem);
  --fs-h1: clamp(2.6rem, 8vw, 6.25rem);
  --fs-h2: clamp(2.1rem, 5.4vw, 4.25rem);
  --fs-h3: clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-lead: clamp(1.1rem, 1.45vw, 1.28rem);
  --fs-small: 0.875rem;

  --focus: var(--green-hi);
  --ring-gap: var(--black);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--black);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--grey);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;   /* Platz für Umlaute über Großbuchstaben (Ä, Ö, Ü) */
  letter-spacing: -0.005em;
  color: var(--white);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--white); }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--green-hi); }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

::selection { background: var(--green-hi); color: var(--black); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--green-hi);
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* Kleine Kopfzeile über Überschriften – wie "TU GRAZ" im Logo: kursiv, gesperrt */
.kicker {
  display: block;
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-hi);
}

/* ---------- Buttons: Parallelogramme wie im Logo ---------- */
.btn {
  --btn-bg: var(--green-hi);
  --btn-bg-hover: #63ee58;
  --btn-border: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.7rem;
  border: 0;
  background: none;
  color: var(--black);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  transform: skewX(var(--skew));
  transition: background-color 0.2s, border-color 0.2s;
}
.btn:hover::before { background: var(--btn-bg-hover); }
.btn:focus-visible { outline: none; }
.btn:focus-visible::before { box-shadow: 0 0 0 3px var(--ring-gap), 0 0 0 6px var(--focus); }

.btn--ghost { --btn-bg: transparent; --btn-bg-hover: rgba(255, 255, 255, 0.08); --btn-border: rgba(255, 255, 255, 0.6); color: var(--white); }
.btn--ghost:hover::before { border-color: var(--white); }
.btn--dark { --btn-bg: var(--black); --btn-bg-hover: #1d251b; color: var(--white); }
.btn--small { min-height: 2.6rem; padding: 0.55rem 1.25rem; font-size: 0.98rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; margin-top: 2.2rem; padding-left: 0.5rem; }

.link {
  font-weight: 700;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--green-hi);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.link:hover { text-decoration-thickness: 3px; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--white);
}
.js .site-header { position: fixed; }
/* Hintergrund auf einem Pseudo-Element, damit das mobile Menü nicht vom Blur eingesperrt wird */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.site-header.is-solid::before { background: rgba(0, 0, 0, 0.94); box-shadow: 0 1px 0 var(--line); }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-solid::before { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); }
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { position: relative; z-index: 2; display: inline-flex; flex-shrink: 0; text-decoration: none; }
.brand img { width: 7.6rem; height: auto; }

.site-nav { display: flex; align-items: center; gap: 2.2rem; }
.site-nav ul { display: flex; gap: 1.8rem; list-style: none; }
.site-nav ul a {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
}
.site-nav ul a:hover { color: var(--white); }
.site-nav ul a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 4px;
  background: var(--green-hi);
  transform: skewX(var(--skew)) scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.site-nav ul a:hover::after,
.site-nav ul a[aria-current="page"]::after,
[data-page="projekt"] [data-nav="projekt"]::after,
[data-page="team"] [data-nav="team"]::after,
[data-page="geschichte"] [data-nav="geschichte"]::after,
[data-page="mitmachen"] [data-nav="mitmachen"]::after,
[data-page="kontakt"] [data-nav="kontakt"]::after { transform: skewX(var(--skew)) scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 23em) {
  .header-inner { gap: 0.75rem; }
  .brand img { width: 6.6rem; }
  .nav-toggle { gap: 0.5rem; padding-left: 0.25rem; }
}

@media (max-width: 64em) {
  .nav-toggle { display: inline-flex; position: relative; z-index: 2; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.5rem;
    padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
    background: var(--black);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0s 0.3s;
  }
  .nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0s;
  }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--white);
  }
  .site-nav ul a::after { bottom: -2px; }
  .nav-cta { align-self: flex-start; margin-left: 0.5rem; }
  .nav-open { overflow: hidden; }
  .nav-open .site-header::before { background: var(--black); box-shadow: none; }
}

/* ---------- Bühne: Startseite ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: max(36rem, 100vh);
  min-height: max(36rem, 100svh);
  color: var(--white);
  background: var(--black);
  overflow: hidden;
}
.hero-media, .page-hero-media { position: absolute; inset: 0; z-index: -3; margin: 0; }
.hero-media img, .hero-media video,
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Optionales Video liegt über dem Foto. Bei "Bewegung reduzieren" bleibt nur das Foto sichtbar. */
.hero-media video { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}
.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.15) 70%);
}
.hero-content {
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: clamp(3rem, 9vh, 6.5rem);
}
.hero-title {
  margin: 0 0 1.75rem;
  font-size: var(--fs-display);
  line-height: 0.9;
}
.hero-title .line { display: block; }
.hero-lead {
  max-width: 36rem;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

/* Parallelogramm-Motiv aus dem Logo, groß im Hintergrund */
.hero-motif {
  position: absolute;
  z-index: -1;
  right: max(-8vw, -9rem);
  top: 14%;
  width: min(62vw, 46rem);
  pointer-events: none;
}
@media (max-width: 52em) {
  .hero-motif { width: 92vw; right: -30vw; top: 10%; opacity: 0.55; }
}
@media (max-width: 52em) and (max-height: 50em) {
  .hero-motif { top: 6%; width: 70vw; right: -24vw; }
}
/* Der eine große Moment: die Parallelogramme fahren beim Laden ein */
@media (prefers-reduced-motion: no-preference) {
  .hero-motif .p { animation: tera-drive 0.9s var(--ease) both; }
  .hero-motif .p:nth-child(2) { animation-delay: 0.08s; }
  .hero-motif .p:nth-child(3) { animation-delay: 0.16s; }
  .hero-motif .p:nth-child(4) { animation-delay: 0.24s; }
  .hero-motif .p:nth-child(5) { animation-delay: 0.32s; }
  .hero-title .line { animation: tera-slide 0.8s 0.15s var(--ease) both; }
  .hero-title .line + .line { animation-delay: 0.27s; }
}
@keyframes tera-drive {
  from { transform: translateX(-90px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes tera-slide {
  from { transform: translateX(-0.4em); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- Bühne: Unterseiten ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 64vh, 40rem);
  color: var(--white);
  background: var(--black);
  overflow: hidden;
}
.page-hero--compact { min-height: clamp(18rem, 44vh, 26rem); }
.page-hero-content {
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.page-hero h1 { max-width: 15ch; }
.page-hero h1 + p { margin-top: 1.25rem; }
.page-hero .hero-lead { max-width: 40rem; }
.page-hero .hero-motif { width: min(44vw, 30rem); top: 18%; opacity: 0.9; }
@media (max-width: 52em) {
  .page-hero .hero-motif { display: none; }
}

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--section); }
.section--black { background: var(--black); }
.section--night { background: var(--night); }
.section--light { --focus: var(--ink); --ring-gap: var(--paper); background: var(--paper); color: var(--ink); }
.section--green { --focus: var(--black); --ring-gap: var(--green-hi); background: var(--green-hi); color: var(--black); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.section--light h2, .section--light h3, .section--light strong,
.section--green h2, .section--green h3, .section--green strong { color: var(--ink); }
.section--light .link { color: var(--ink); text-decoration-color: var(--green-ink); }
.section--light .kicker { color: var(--green-ink); }
.section--green p { color: rgba(0, 0, 0, 0.84); }
.section--green .kicker { color: var(--black); }

.section-head { max-width: 50rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 + p { margin-top: 1.25rem; }
.section-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; max-width: none; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--white); }
.section--light .lead { color: var(--ink); }
.muted { color: var(--muted); }
.section--light .muted { color: var(--ink-muted); }

/* ---------- Aktuell (wie die News beim TU Graz Racing Team) ---------- */
.news {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  list-style: none;
}
.news-item {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem 1.6rem;
  background: var(--card);
  border-top: 3px solid var(--green);
}
.news-item h3 { margin: 1.1rem 0 0.7rem; font-size: 1.3rem; }
.news-item p { color: var(--grey); }
.news-item .link { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }
.tag {
  position: relative;
  isolation: isolate;
  align-self: flex-start;
  display: inline-block;
  padding: 0.3rem 0.85rem;
  margin-left: 0.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}
.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green-hi);
  transform: skewX(var(--skew));
}
@media (max-width: 60em) {
  .news { grid-template-columns: 1fr; }
}

/* ---------- Startseite: Effizienz-Aussage ---------- */
.statement-figure { margin: 0 0 clamp(2rem, 4vw, 3.5rem); max-width: none; }
.statement-figure .big {
  display: block;
  font-size: clamp(3.4rem, 15vw, 12rem);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.statement-figure .rest {
  display: block;
  margin-top: 0.3em;
  font-size: clamp(1.7rem, 4.6vw, 3.8rem);
  color: var(--green-hi);
}
.statement-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem var(--gutter);
}
.statement-body > div { grid-column: 6 / span 7; }
@media (max-width: 52em) { .statement-body > div { grid-column: 1 / -1; } }

/* ---------- Datenblatt (Projekt) ---------- */
.spec {
  position: relative;
  padding: 1.5rem 1.6rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green-hi);
}
.section--black .spec { background: var(--night); }
.spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-strong);
}
.spec-head img { width: 2rem; height: auto; }
.spec-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.spec-data { margin: 0; }
.spec-data div {
  display: grid;
  grid-template-columns: minmax(7rem, 38%) 1fr;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}
.spec-data dt { font-size: 0.9rem; color: var(--muted); }
.spec-data dd { margin: 0; font-weight: 700; color: var(--white); }
.spec-foot { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); max-width: none; }
@media (max-width: 30em) {
  .spec { padding-inline: 1.2rem; }
  .spec-data div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------- Raster ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4rem) var(--gutter);
  align-items: center;
}
.split-media { grid-column: 1 / span 7; margin: 0; }
.split-text { grid-column: 8 / span 5; }
.split-media img { width: 100%; }
.split-text h2 + p, .split-text h2 + .lead { margin-top: 1.25rem; }
@media (max-width: 52em) {
  .split-media, .split-text { grid-column: 1 / -1; }
}

.two-col {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem var(--gutter);
  align-items: center;
}
.two-col > :first-child { grid-column: 1 / span 6; }
.two-col > :last-child { grid-column: 8 / span 5; }
.two-col h2 + p, .two-col h2 + .address { margin-top: 1.25rem; }
@media (max-width: 52em) {
  .two-col > :first-child, .two-col > :last-child { grid-column: 1 / -1; }
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  align-items: start;
}
.project-text { grid-column: 1 / span 6; }
.project-text h2 + p { margin-top: 1.25rem; }
.project-spec { grid-column: 8 / span 5; }
.project-media { grid-column: 1 / -1; margin: 0; }
.project-media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
@media (max-width: 60em) {
  .project-text, .project-spec { grid-column: 1 / -1; }
  .project-spec { max-width: 34rem; }
}

/* ---------- MotoStudent-Phasen ---------- */
.phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.phase { padding: 2rem clamp(1.25rem, 3vw, 2.5rem) 0 0; }
.phase + .phase { padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--line); }
.phase .tag { font-size: clamp(1.5rem, 3vw, 2rem); padding: 0.35rem 1rem; margin-bottom: 1.4rem; }
.phase h3 { margin-bottom: 0.75rem; }
.phases-note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--white);
  max-width: none;
}
@media (max-width: 44em) {
  .phases { grid-template-columns: 1fr; }
  .phase { padding-right: 0; }
  .phase + .phase { margin-top: 2rem; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Kurzlisten ---------- */
.facts { list-style: none; margin-top: 1.75rem; border-top: 1px solid var(--line); }
.facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.facts li span:first-child { color: var(--muted); }
.facts li span:last-child { font-weight: 700; text-align: right; color: var(--white); }
.section--night > .wrap > .facts, .section--black > .wrap > .facts { max-width: 48rem; margin-top: 3rem; }
@media (max-width: 40em) {
  .facts li { flex-direction: column; gap: 0.1rem; }
  .facts li span:last-child { text-align: left; }
}
.source-note { margin-top: 2rem; font-size: var(--fs-small); color: var(--muted); }

/* ---------- Partner (Logowand, heller Abschnitt) ---------- */
.partners {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem var(--gutter);
  align-items: start;
}
.partners-text { grid-column: 1 / span 5; }
.partners-text h2 + p { margin-top: 1.25rem; }
.partners-wall { grid-column: 7 / span 6; }
@media (max-width: 60em) {
  .partners-text, .partners-wall { grid-column: 1 / -1; }
}
.logo-wall {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}
.logo-wall--4 { --cols: 4; }
.logo-wall--2 { --cols: 2; }
@media (max-width: 40em) {
  .logo-wall, .logo-wall--4 { --cols: 2; }
  .partners-wall .is-free:nth-child(n+5) { display: none; }
}
.logo-wall li { display: flex; }
.logo-wall a, .logo-wall .logo-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  padding: 1.25rem;
  text-align: center;
  text-decoration: none;
}
.logo-wall--lg a, .logo-wall--lg .logo-text { min-height: 10rem; }
.logo-wall .is-partner a, .logo-wall .is-partner .logo-text { background: var(--white); border: 1px solid var(--line-light); }
.logo-wall .is-partner img { max-height: 3.5rem; width: auto; object-fit: contain; }
.logo-text { font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.logo-wall .is-free a {
  flex-direction: column;
  gap: 0.25rem;
  border: 1.5px dashed var(--line-light-strong);
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.logo-wall .is-free a:hover { border-color: var(--green-ink); color: var(--green-ink); background: rgba(47, 225, 38, 0.06); }
.logo-wall .is-free small { font-size: 0.8rem; font-weight: 500; }

/* ---------- Band (grün, wie das "We are hiring"-Poster) ---------- */
.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem var(--gutter);
  align-items: end;
}
.cta-band-text { grid-column: 1 / span 8; }
.cta-band-text h2 + p { margin-top: 1.25rem; }
.cta-band-actions { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; justify-content: flex-end; padding-right: 0.5rem; }
@media (max-width: 60em) {
  .cta-band-text, .cta-band-actions { grid-column: 1 / -1; }
  .cta-band-actions { justify-content: flex-start; padding-left: 0.5rem; }
}

/* ---------- Themenraster (Technik, Bereiche, Vorteile) ---------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 0 var(--gutter);
  list-style: none;
}
.topic-grid--2 { --cols: 2; }
.topic-grid > li, .topic-grid > div {
  padding: 1.6rem 0 2.2rem;
  border-top: 3px solid var(--green);
}
.topic-grid h3 { margin-bottom: 0.65rem; }
.topic-grid p { color: var(--grey); }
.section--light .topic-grid > li, .section--light .topic-grid > div { border-top-color: var(--green-ink); }
.section--light .topic-grid p { color: var(--ink-muted); }
@media (max-width: 60em) { .topic-grid { --cols: 2; } }
@media (max-width: 40em) { .topic-grid, .topic-grid--2 { --cols: 1; } }

/* Departments (Mitmachen) */
.departments {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}
.departments li {
  padding: 1.25rem 1.2rem 1.4rem;
  background: var(--card);
  border-left: 3px solid var(--green-hi);
}
.departments h3 {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1;
}
.departments p { font-size: 0.95rem; color: var(--grey); }
@media (max-width: 72em) { .departments { --cols: 3; } }
@media (max-width: 48em) { .departments { --cols: 2; } }
@media (max-width: 30em) { .departments { --cols: 1; } }

/* ---------- Ablauf (nummerierte Schritte) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--gutter);
  list-style: none;
  counter-reset: step;
}
.steps li { counter-increment: step; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.8rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--green-hi);
}
.steps h3 { margin-bottom: 0.6rem; }
@media (max-width: 60em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--gutter); } }
@media (max-width: 36em) { .steps { grid-template-columns: 1fr; } }

/* ---------- Entwicklungsfahrplan ---------- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}
.roadmap li { position: relative; padding: 2.4rem 1.25rem 0 0; }
.roadmap li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0.65rem;
  height: 2px;
  background: var(--line-strong);
}
.roadmap li::after {
  content: "";
  position: absolute;
  left: 0.2rem; top: 0.05rem;
  width: 1.5rem; height: 1.25rem;
  border: 2px solid var(--grey);
  background: var(--night);
  transform: skewX(var(--skew));
}
.roadmap li.is-done::before { background: var(--green); }
.roadmap li.is-done::after { background: var(--green); border-color: var(--green); }
.roadmap li.is-current::after { background: var(--green-hi); border-color: var(--green-hi); box-shadow: 0 0 0 5px rgba(47, 225, 38, 0.25); }
.roadmap h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.roadmap p { font-size: 0.95rem; }
.roadmap .now { display: inline-block; margin-top: 0.9rem; }
@media (max-width: 60em) {
  .roadmap { grid-template-columns: 1fr; }
  .roadmap li { padding: 0 0 2rem 2.6rem; }
  .roadmap li::before { left: 0.9rem; right: auto; top: 1.2rem; bottom: 0; width: 2px; height: auto; }
  .roadmap li:last-child::before { display: none; }
  .roadmap li::after { top: 0.1rem; }
}

/* ---------- Organigramm ---------- */
.org { max-width: 62rem; }
.org-node {
  padding: 1rem 1.25rem;
  background: var(--card);
  border-left: 4px solid var(--green);
}
.org-node strong { display: block; font-size: 1.05rem; }
.org-node span { display: block; font-size: 0.9rem; color: var(--muted); }
.org-node--lead { border-left-color: var(--green-hi); max-width: 22rem; margin-inline: auto; }
.org-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: 3rem;
  list-style: none;
}
.org-branches::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: calc((100% - 2 * var(--gutter)) / 6);
  right: calc((100% - 2 * var(--gutter)) / 6);
  height: 2px;
  background: var(--line-strong);
}
.org-lead-wrap { position: relative; }
.org-lead-wrap::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1.5rem;
  width: 2px; height: 1.5rem;
  background: var(--line-strong);
}
.org-branches > li { position: relative; display: grid; gap: 1.25rem; align-content: start; }
.org-branches > li::before {
  content: "";
  position: absolute;
  top: -1.5rem; left: 50%;
  width: 2px; height: 1.5rem;
  background: var(--line-strong);
}
.org-node--sub { position: relative; margin-left: 1.5rem; border-left-color: var(--muted); }
.org-node--sub::before {
  content: "";
  position: absolute;
  left: -1.5rem; top: -1.25rem; bottom: 50%;
  width: 1.2rem;
  border-left: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
}
@media (max-width: 52em) {
  .org-node--lead { margin-inline: 0; }
  .org-lead-wrap::after { left: 1.5rem; }
  .org-branches { grid-template-columns: 1fr; gap: 1rem; margin-left: 1.5rem; padding-left: 1.5rem; }
  .org-branches::before { top: -1.5rem; bottom: 2rem; left: 0; right: auto; width: 2px; height: auto; }
  .org-branches > li::before { top: 1.6rem; left: -1.5rem; width: 1.5rem; height: 2px; }
}

/* ---------- Personen ---------- */
.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem var(--gutter);
  list-style: none;
}
.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--card);
  margin-bottom: 1.1rem;
}
.person h3 { margin-bottom: 0.2rem; }
.person .role {
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--green-hi);
}
.person p { font-size: 0.975rem; }
.person a { color: var(--white); }
@media (max-width: 60em) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) {
  .people { gap: 2rem 1rem; }
  .person h3 { font-size: 1.05rem; }
  .person .role { font-size: 0.92rem; }
  .person p { font-size: 0.9rem; }
}
@media (max-width: 22em) { .people { grid-template-columns: 1fr; } }

/* ---------- Zeitleiste (Geschichte) ---------- */
.timeline { list-style: none; border-top: 1px solid var(--line-strong); }
.timeline li {
  display: grid;
  grid-template-columns: minmax(7rem, 3fr) 9fr;
  gap: 0.5rem var(--gutter);
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}
.timeline .year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.timeline h3 { margin-bottom: 0.5rem; }
.timeline li.is-next .year { color: var(--green-hi); }
@media (max-width: 40em) { .timeline li { grid-template-columns: 1fr; } }

/* ---------- Fahrzeuge (Geschichte) ---------- */
.vehicle {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem var(--gutter);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.vehicle:first-of-type { border-top: 0; padding-top: 0; }
.vehicle figure { grid-column: 1 / span 6; margin: 0; }
.vehicle figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vehicle-text { grid-column: 8 / span 5; }
.vehicle:nth-of-type(even) figure { grid-column: 7 / span 6; grid-row: 1; }
.vehicle:nth-of-type(even) .vehicle-text { grid-column: 1 / span 5; grid-row: 1; }
.vehicle-text h3 {
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}
@media (max-width: 52em) {
  .vehicle figure, .vehicle-text,
  .vehicle:nth-of-type(even) figure, .vehicle:nth-of-type(even) .vehicle-text { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Auszeichnungen ---------- */
.awards { list-style: none; }
.awards li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem var(--gutter);
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.awards li:last-child { border-bottom: 1px solid var(--line); }
.awards .year { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--green-hi); }
.awards strong { display: block; font-size: 1.1rem; }
.awards span { color: var(--muted); }

/* ---------- Sponsoring-Pakete ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}
.tier-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem 1.4rem;
  background: var(--card);
  border-top: 4px solid var(--green);
}
.tier-card--top { border-top-color: var(--green-hi); background: #1b2519; }
.tier-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
}
.tier-card .tier-note { margin: 0.45rem 0 0; font-size: 0.88rem; color: var(--muted); }
.tier-card ul { margin-top: 1.1rem; }
.tier-card ul { list-style: none; border-top: 1px solid var(--line); }
.tier-card li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.3rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
  line-height: 1.45;
}
.tier-card li::before {
  content: "";
  position: absolute;
  left: 0.1rem; top: 1.02rem;
  width: 0.7rem; height: 0.4rem;
  background: var(--green-hi);
  transform: skewX(var(--skew));
}
@media (max-width: 75em) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 52em) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .tiers { grid-template-columns: 1fr; } }

.note {
  margin-top: 2rem;
  padding: 1.15rem 1.5rem;
  border-left: 4px solid var(--green-hi);
  background: var(--card);
  max-width: 52rem;
}
.note p { max-width: none; }

.tier + .tier { margin-top: 3rem; }
.tier h3 { margin-bottom: 1rem; }

/* ---------- Kontakt ---------- */
.contact-list { list-style: none; border-top: 1px solid var(--line-strong); }
.contact-list li {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr;
  gap: 0.5rem var(--gutter);
  align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-list h3 { font-size: 1.2rem; }
.contact-list a { justify-self: end; }
@media (max-width: 52em) {
  .contact-list li { grid-template-columns: 1fr; }
  .contact-list a { justify-self: start; }
}

.address { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; margin-bottom: 1.25rem; color: var(--white); }
.section--light .address { color: var(--ink); }

.contacts { display: grid; gap: 1rem; }
.contact-person {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem;
  background: var(--card);
  border-left: 3px solid var(--green-hi);
}
.contact-person img { width: 5.5rem; aspect-ratio: 4 / 5; object-fit: cover; }
.contact-person strong { display: block; font-size: 1.1rem; }
.contact-person span { display: block; color: var(--muted); }
.contact-person a { color: var(--white); overflow-wrap: anywhere; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 1.35rem 3rem 1.35rem 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem; top: 50%;
  width: 1rem; height: 3px;
  background: var(--green-hi);
  transition: transform 0.25s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--green-hi); }
.faq .answer { padding: 0 0 1.5rem; }

/* ---------- Fließtext (Impressum, Datenschutz) ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2.75rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1em; }
.prose li { margin-bottom: 0.35rem; }
.prose dl { margin: 0 0 1.5rem; }
.prose dt { font-weight: 700; color: var(--white); margin-top: 0.75rem; }
.prose dd { margin: 0.1rem 0 0; }
.todo { background: var(--green-hi); color: var(--black); font-weight: 700; padding: 0 0.25em; }

/* ---------- Fußzeile ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  background: var(--black);
  border-top: 1px solid var(--line);
  color: var(--grey);
}
.footer-grid {
  display: grid;
  grid-template-columns: 5fr 3fr 3fr;
  gap: 2.5rem var(--gutter);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand img { width: 10rem; margin-bottom: 1.4rem; }
.footer-brand p { color: var(--muted); max-width: 30rem; }
.footer-col h2 {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--green-hi);
}
.footer-col ul { list-style: none; }
.footer-col li + li { margin-top: 0.4rem; }
.footer-col a { text-decoration: none; color: var(--grey); }
.footer-col a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--green-hi); }
.footer-col address { font-style: normal; }
.footer-col address a { text-decoration: underline; text-decoration-color: var(--line-strong); }
.footer-social-title { margin-top: 1.75rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--muted);
}
.footer-bottom p { margin: 0; max-width: none; }
.footer-bottom a { color: var(--muted); }
.footer-legal { display: flex; gap: 1.5rem; list-style: none; }
.footer-claim {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--white) !important;
}
@media (max-width: 52em) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 30em) {
  .footer-grid { grid-template-columns: 1fr; }
  #footer-nav ul { columns: 2; column-gap: var(--gutter); }
  #footer-nav li { break-inside: avoid; padding-bottom: 0.4rem; }
  #footer-nav li + li { margin-top: 0; }
}

/* ---------- Fehlerseite ---------- */
.error-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; margin-top: 2rem; padding-left: 0.5rem; }

/* ---------- Druck ---------- */
@media print {
  .site-header, .nav-toggle, .cta-band-actions, .btn-row, .skip-link, .hero-motif { display: none !important; }
  html, body { background: #fff; color: #000; }
  .hero, .page-hero, .section, .site-footer { min-height: 0; background: none !important; color: #000; }
  .hero::before, .page-hero::before, .hero-media, .page-hero-media { display: none; }
  h1, h2, h3, strong { color: #000 !important; }
}