/* ==========================================================================
   Component Styles — Alle <gs-*> Komponenten
   ========================================================================== */

/* ==========================================================================
   gs-header
   ========================================================================== */

gs-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
}

.gs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 1.75rem clamp(2rem, 5vw, 4.5rem);
  background: rgba(10, 10, 11, 0.6);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out-quart),
    background-color var(--dur-base) var(--ease-out-quart);
}

:root[data-theme="light"] .gs-header {
  background: rgba(250, 250, 249, 0.7);
}

.gs-header[data-scrolled="true"] {
  border-bottom-color: var(--border);
}

.gs-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  text-decoration: none;
}

.gs-header__brand:hover {
  color: var(--fg);
}

/* Logo — wird in Header, Footer und Drawer wiederverwendet.
   Beide Varianten (dark/light) sind im DOM, CSS zeigt nur die passende. */
.gs-brand-logo {
  display: block;
  height: 2.2rem;
  width: auto;
  object-fit: contain;
  object-position: left center;
  user-select: none;
  -webkit-user-drag: none;
}

:root[data-theme="dark"] .gs-brand-logo--on-light,
:root[data-theme="light"] .gs-brand-logo--on-dark {
  display: none;
}

/* Footer- und Drawer-Logo erben die globale Größe (2.5rem) — keine Overrides. */

.gs-header__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--gradient-accent);
  color: var(--accent-fg);
  font-weight: 800;
  font-size: 1.05rem;
}

.gs-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.gs-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.gs-header__nav-link {
  position: relative;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart);
}

.gs-header__nav-link:hover {
  color: var(--fg);
  background: var(--surface-hover);
}

.gs-header__nav-link[aria-current="page"] {
  color: var(--fg);
  background: var(--surface);
}

.gs-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.gs-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  transition: all var(--dur-fast) var(--ease-out-quart);
}

.gs-header__toggle:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.gs-header__toggle svg {
  width: 18px;
  height: 18px;
}

.gs-header__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg);
  transition: all var(--dur-fast) var(--ease-out-quart);
}

.gs-header__lang:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.gs-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
}

.gs-header__menu-btn svg {
  width: 20px;
  height: 20px;
}

/* Mobile nav drawer */
.gs-header__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--container-pad);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out-quart);
  visibility: hidden;
}

.gs-header__drawer[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
}

.gs-header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-7);
}

.gs-header__drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gs-header__drawer-nav a {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.gs-header__drawer-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

@media (max-width: 880px) {
  .gs-header__nav {
    display: none;
  }
  .gs-header__menu-btn {
    display: inline-flex;
  }
}

/* ==========================================================================
   gs-footer
   ========================================================================== */

gs-footer {
  display: block;
  position: relative;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  border-top: 1px solid var(--border);
  margin-top: var(--space-10);
}

/* Perforierter Streifen — wie der Rand eines Filmstreifens vor dem Abspann */
gs-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(var(--accent-gold-rgb), 0.5) 0 6px,
    transparent 6px 16px
  );
}

.gs-footer {
  padding-block: var(--space-9) var(--space-6);
}

.gs-footer__top {
  display: grid;
  /* Desktop: Brand-Spalte + 3 gleichbreite Nav-Spalten in einer Reihe.
     Wenn du eine vierte Spalte ergänzt: "repeat(3,…)" → "repeat(4,…)". */
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  align-items: start;
}

.gs-footer__brand-col {
  max-width: 360px;
}

.gs-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  margin-bottom: var(--space-4);
  color: var(--fg);
}

.gs-footer__tagline {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-5);
}

.gs-footer__social {
  display: flex;
  gap: var(--space-2);
}

.gs-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: all var(--dur-fast) var(--ease-out-quart);
}

.gs-footer__social a:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.gs-footer__social svg {
  width: 18px;
  height: 18px;
}

.gs-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--space-4);
}

.gs-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gs-footer__col-list a {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.gs-footer__col-list a:hover {
  color: var(--fg);
}

.gs-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.gs-footer__copy {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.gs-footer__legal {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.gs-footer__legal a {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.gs-footer__legal a:hover {
  color: var(--fg);
}

@media (max-width: 720px) {
  .gs-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .gs-footer__brand-col {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* ==========================================================================
   gs-hero
   ========================================================================== */

gs-hero {
  display: block;
  position: relative;
}

.gs-hero {
  position: relative;
  padding-block: calc(var(--space-11) + 2rem) var(--space-9);
  overflow: hidden;
  text-align: center;
  min-height: 720px;
}

.gs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  pointer-events: none;
}

/* Spotlight-Kegel — wie ein Bühnenscheinwerfer statt eines SaaS-Blobs.
   Kommt bewusst von AUSSERHALB der Hero-Box (negatives top, abgeschnitten
   vom overflow:hidden der Hero) — wie Licht, das von oben ins Bild fällt,
   ohne dass die Quelle selbst sichtbar ist. Kein Lampen-Kreis, kein
   zusätzlicher Glow-Layer, statisch (keine Rotation/Animation). */
.gs-hero__shape {
  position: absolute;
  top: -22%;
  left: 50%;
  width: clamp(26rem, 34vw, 46rem);
  height: clamp(30rem, 40vw, 54rem);
  transform: translateX(-58%);
  clip-path: polygon(44% 0%, 56% 0%, 92% 100%, 8% 100%);
  background: linear-gradient(180deg,
    rgba(var(--accent-gold-rgb), 0.4) 0%,
    rgba(var(--accent-rgb), 0.2) 55%,
    transparent 85%);
  filter: blur(10px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
}

/* Auf hellem Theme wirkt "screen" gegen eine fast-weiße Fläche unsichtbar
   (screen mit Weiß ergibt immer Weiß) — dort stattdessen normale
   Alpha-Überblendung, das zeigt die Farbe zuverlässig. */
:root[data-theme="light"] .gs-hero__shape {
  mix-blend-mode: normal;
  opacity: 0.6;
}

/* Feiner Staub im Lichtkegel */
.gs-hero__shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.gs-hero__inner {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  z-index: 2;
  display: grid;
  gap: var(--space-5);
}

.gs-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: var(--space-2);
  padding: calc(var(--space-1) + 0.1rem);
  padding-right: calc(var(--space-1) + 0.6rem);
  padding-left: var(--space-3);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.28);
  border: 1px dashed rgba(var(--accent-gold-rgb), 0.4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: var(--space-4);
  width: max-content;
  transform: rotate(-1.1deg);
}

:root[data-theme="light"] .gs-hero__eyebrow {
  background: rgba(255, 255, 255, 0.55);
}

.gs-hero--sm .gs-hero__eyebrow {
  justify-self: start;
}

/* "Rec"-Punkt — pulsiert wie eine Kamera-Aufnahmeanzeige */
.gs-hero__eyebrow-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 8px 2px rgba(var(--accent-gold-rgb), 0.7);
  animation: gs-rec-pulse 1.8s ease-in-out infinite;
}

@keyframes gs-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .gs-hero__eyebrow-dot { animation: none; }
}

.gs-hero__title {
  font-size: clamp(3.75rem, 6vw, 8.5rem);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  text-transform: none;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.gs-hero__title .accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gs-hero__title[data-text-reveal-ready] .accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: inherit;
}

.gs-hero__title[data-text-reveal-ready] .accent .word {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline;
  overflow: visible;
}

.gs-hero__title .italic {
  font-style: italic;
  font-family: var(--font-sans);
  font-weight: 400;
}

.gs-hero__subtitle {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
  letter-spacing: 0.01em;
  font-weight: 500;
}

.gs-hero__cta-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  z-index: 2;
}

.gs-hero__meta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: var(--space-5);
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
}

.gs-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  position: relative;
  padding: var(--space-2) var(--space-4);
}

/* Klappen-Streifen zwischen den Kennzahlen — wie die Markierungen einer Filmklappe */
.gs-hero__meta-item + .gs-hero__meta-item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-5) / -2);
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: repeating-linear-gradient(
    180deg,
    var(--border-strong) 0 6px,
    transparent 6px 12px
  );
}

/* Passt nebeneinander nicht mehr sauber rein (z.B. lange Übersetzungen,
   schmale Viewports) → komplett gestapelt statt halb umgebrochen.
   Trennstreifen wird von vertikal auf horizontal gedreht. */
@media (max-width: 800px) {
  .gs-hero__meta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .gs-hero__meta-item + .gs-hero__meta-item::before {
    left: 10%;
    right: 10%;
    top: calc(var(--space-4) / -2);
    bottom: auto;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(
      90deg,
      var(--border-strong) 0 6px,
      transparent 6px 12px
    );
  }
}

.gs-hero__meta-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--fg);
}

/* Hero — small variant for inner pages */
.gs-hero--sm {
  padding-block: var(--space-9) var(--space-7);
  text-align: left;
}

.gs-hero--sm .gs-hero__inner {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
}

.gs-hero--sm .gs-hero__title {
  font-size: var(--fs-5xl);
}

.gs-hero--sm .gs-hero__subtitle {
  margin-inline: 0;
  max-width: 640px;
}

.gs-hero--sm .gs-hero__cta-row {
  justify-content: flex-start;
}

/* ==========================================================================
   gs-feature-cards (Editorial Manifesto Edition)
   ========================================================================== */

gs-feature-cards { display: block; }

.gs-features {
  padding-block: calc(var(--section-pad-y) + 2rem);
  position: relative;
  overflow: hidden;
}

.gs-features::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-2), 0.16), transparent 56%);
  pointer-events: none;
}

.gs-features::after {
  content: "";
  position: absolute;
  bottom: 12%;
  left: -4%;
  width: 420px;
  height: 420px;
  border-radius: 44%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12), transparent 58%);
}

.gs-features__head {
  max-width: 800px;
  margin-bottom: var(--space-10);
}

.gs-features__title {
  font-size: var(--fs-5xl);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}

.gs-features__title::first-line {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
}

.gs-features__intro {
  color: var(--fg-muted);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  max-width: 660px;
}

.gs-features__grid {
  display: flex;
  flex-direction: column;
  max-width: 1120px;
  margin-inline: auto;
  border-bottom: 1px solid var(--border-subtle);
}

.gs-manifesto-row {
  display: grid;
  grid-template-columns: 140px 1.5fr 3fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  align-items: baseline;
  transition: all var(--dur-slow) var(--ease-out-expo);
  position: relative;
}

.gs-manifesto-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.03), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-quart);
  pointer-events: none;
  z-index: -1;
}

.gs-manifesto-row:hover {
  padding-left: var(--space-4);
  border-top-color: var(--accent);
}

.gs-manifesto-row:hover::before {
  opacity: 1;
}

.gs-manifesto-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-style: italic;
}

/* Nummer als Filmklappe — kleiner Streifen mit Diagonal-Muster, wie am Kopf einer Klappe */
.gs-manifesto-row__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  transform: rotate(-2.5deg);
  transition: transform var(--dur-base) var(--ease-out-quart);
}

.gs-manifesto-row__num::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -2px;
  right: -2px;
  height: 6px;
  border-radius: 2px 2px 0 0;
  background: repeating-linear-gradient(
    45deg,
    var(--fg) 0 4px,
    var(--accent-gold) 4px 8px
  );
}

.gs-manifesto-row:hover .gs-manifesto-row__num {
  transform: rotate(0deg);
}

/* Icon neben der Klappen-Nummer ausgeblendet — passte optisch nicht zum
   Rest der Karte. */
.gs-manifesto-row__icon {
  display: none;
}

.gs-manifesto-row__title {
  font-size: var(--fs-2xl);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.gs-manifesto-row__body {
  color: var(--fg-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

/* Responsiveness */
@media (max-width: 880px) {
  .gs-manifesto-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding-block: var(--space-5);
  }
  
  .gs-manifesto-row:hover {
    padding-left: 0;
  }
  
  .gs-manifesto-row__body {
    font-size: var(--fs-base);
    color: var(--fg-muted);
  }
  
  .gs-manifesto-row__title {
    font-size: var(--fs-xl);
  }
}

/* ==========================================================================
   gs-projects-grid (Cinematic Magazine Grid)
   ========================================================================== */

gs-projects-grid { display: block; }

.gs-projects {
  padding-block: var(--section-pad-y);
}

.gs-projects__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.gs-projects__title {
  font-size: var(--fs-4xl);
  max-width: 720px;
}

.gs-projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7);
}

.gs-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--dur-slow) var(--ease-out-expo);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
}

.gs-project-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

/* Fokus-Klammern — wie ein Kamera-Sucher, der beim Hover einrastet.
   Echte Elemente statt Gradient-Hack, damit die innere Ecke sauber gerundet
   werden kann und zur Kartenrundung passt (border-radius: var(--radius-xl),
   minus 14px Inset ≈ 18px). */
.gs-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border: 0 solid var(--accent-gold);
  transition: opacity var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart);
}

.gs-project-card:hover .gs-corner {
  opacity: 0.9;
}

.gs-corner--tl {
  top: 14px;
  left: 14px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-radius: 18px 0 0 0;
  transform: translate(4px, 4px) scale(0.9);
  transform-origin: top left;
}

.gs-corner--tr {
  top: 14px;
  right: 14px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-radius: 0 18px 0 0;
  transform: translate(-4px, 4px) scale(0.9);
  transform-origin: top right;
}

.gs-corner--bl {
  bottom: 14px;
  left: 14px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-radius: 0 0 0 18px;
  transform: translate(4px, -4px) scale(0.9);
  transform-origin: bottom left;
}

.gs-corner--br {
  bottom: 14px;
  right: 14px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-radius: 0 0 18px 0;
  transform: translate(-4px, -4px) scale(0.9);
  transform-origin: bottom right;
}

.gs-project-card:hover .gs-corner--tl,
.gs-project-card:hover .gs-corner--tr,
.gs-project-card:hover .gs-corner--bl,
.gs-project-card:hover .gs-corner--br {
  transform: translate(0, 0) scale(1);
}

/* Featured Project: Full Width split screen on desktop */
.gs-projects__grid a.gs-project-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.04) 100%);
}

.gs-projects__grid a.gs-project-card:first-child .gs-project-card__media {
  aspect-ratio: auto;
  height: 100%;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.gs-projects__grid a.gs-project-card:first-child .gs-project-card__body {
  padding: var(--space-8) var(--space-7);
  justify-content: center;
}

.gs-projects__grid a.gs-project-card:first-child .gs-project-card__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
}

.gs-projects__grid a.gs-project-card:first-child .gs-project-card__desc {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-4);
}

.gs-project-card__media {
  aspect-ratio: 16 / 11;
  background: var(--bg-elev-2);
  overflow: hidden;
  position: relative;
}

/* Parallax-Ebene — deckungsgleich mit ihrem Rahmen (gleiches Seitenverhältnis,
   keine Verzerrung), mit gleichmäßigem Zoom als Bewegungsspielraum für GSAP.
   Wichtig: "inset" mit ungleichen Werten (z.B. oben/unten größer als
   links/rechts) verzerrt das Seitenverhältnis dieser Ebene, wodurch object-fit
   das <img> auf ein falsches (zu hohes) Format zuschneidet — sichtbar als
   "zu stark reingezoomt". Ein gleichmäßiges scale() vermeidet das, weil es
   Breite und Höhe im selben Verhältnis vergrößert. Sitzt zwischen Rahmen und
   <img>, damit der bestehende Hover-Zoom auf dem <img> selbst unabhängig
   davon weiterläuft (kein Transform-Konflikt). */
.gs-parallax-layer {
  position: absolute;
  inset: 0;
  transform: scale(1.12);
  will-change: transform;
}

.gs-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}

/* Beautiful gloss shine overlay effect on hover */
.gs-project-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.04), transparent);
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
}

.gs-project-card:hover::after {
  left: 125%;
  transition: all 0.75s var(--ease-out-quart);
}

.gs-project-card:hover .gs-project-card__media img {
  transform: scale(1.04);
}

.gs-project-card__media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--fs-5xl);
  font-weight: 400;
  color: var(--accent);
  background: linear-gradient(135deg, var(--bg-elev-2), var(--surface));
}

.gs-project-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.gs-project-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.gs-project-card__title {
  font-size: var(--fs-2xl);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.gs-project-card__desc {
  color: var(--fg-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  flex: 1;
}

.gs-project-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  margin-top: var(--space-2);
}

.gs-project-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-out-quart);
}

.gs-project-card:hover .gs-project-card__more svg {
  transform: translateX(4px);
}

/* Stagger cards on desktop to create a beautiful magazine rhythm */
@media (min-width: 1024px) {
  .gs-projects__grid a.gs-project-card:nth-child(even):not(:first-child) {
    transform: translateY(var(--space-8));
  }
  .gs-projects {
    padding-bottom: clamp(6rem, 12vw, 12rem);
  }
}

@media (max-width: 880px) {
  .gs-projects__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .gs-projects__grid a.gs-project-card:first-child {
    grid-template-columns: 1fr;
  }
  .gs-projects__grid a.gs-project-card:first-child .gs-project-card__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .gs-projects__grid a.gs-project-card:first-child .gs-project-card__body {
    padding: var(--space-5);
  }
}

/* ==========================================================================
   gs-project-detail
   ========================================================================== */

gs-project-detail { display: block; }

.gs-project-detail {
  padding-block: var(--space-8) var(--space-9);
}

.gs-project-detail__inner {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.gs-project-detail__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.gs-project-detail__title {
  font-size: var(--fs-5xl);
  margin-bottom: var(--space-5);
}

.gs-project-detail__lead {
  font-size: var(--fs-xl);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-8);
}

.gs-project-detail__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.gs-project-detail__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-project-detail__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-8);
  align-items: start;
}

.gs-project-detail__body p {
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.gs-project-detail__sidebar {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.gs-project-detail__sidebar dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--space-2);
}

.gs-project-detail__sidebar dd {
  margin-bottom: var(--space-4);
  color: var(--fg);
  font-weight: 500;
}

.gs-project-detail__sidebar dd:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 880px) {
  .gs-project-detail__body {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   gs-team-grid
   ========================================================================== */

gs-team-grid { display: block; }

.gs-team {
  padding-block: var(--section-pad-y);
}

.gs-team__head {
  margin-bottom: var(--space-8);
}

.gs-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.gs-team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-out-quart);
}

.gs-team-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
}

.gs-team-card__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gs-team-card__photo {
  aspect-ratio: 1 / 1;
  background: var(--bg-elev-2);
  overflow: hidden;
  position: relative;
}

.gs-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

.gs-team-card:hover .gs-team-card__photo img {
  transform: scale(1.05);
}

.gs-team-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--fg-subtle);
  background: linear-gradient(135deg, var(--bg-elev-2), var(--accent-muted));
}

.gs-team-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gs-team-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--space-1);
}

.gs-team-card__role {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}

.gs-team-card__links {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}

.gs-team-card__links a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-elev-2);
  color: var(--fg-muted);
  transition: all var(--dur-fast) var(--ease-out-quart);
}

.gs-team-card__links a:hover {
  background: var(--accent);
  color: var(--accent-fg);
}

.gs-team-card__links svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   gs-member-detail
   ========================================================================== */

gs-member-detail { display: block; }

.gs-member-detail {
  padding-block: var(--space-8) var(--space-9);
}

.gs-member-detail__inner {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.gs-member-detail__header {
  display: flex;
  gap: var(--space-7);
  align-items: flex-end;
  margin-bottom: var(--space-9);
  flex-wrap: wrap;
}

.gs-member-detail__photo {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elev-2);
}

.gs-member-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-member-detail__photo .gs-team-card__initials {
  position: absolute;
  inset: 0;
}

.gs-member-detail__intro {
  flex: 1;
  min-width: 260px;
}

.gs-member-detail__name {
  font-size: var(--fs-4xl);
  margin-bottom: var(--space-2);
}

.gs-member-detail__role {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
}

.gs-member-detail__quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
  margin-bottom: var(--space-4);
}

.gs-member-detail__links {
  display: flex;
  gap: var(--space-2);
}

.gs-member-detail__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: all var(--dur-fast) var(--ease-out-quart);
}

.gs-member-detail__links a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.gs-member-detail__links svg {
  width: 15px;
  height: 15px;
}

.gs-member-detail__body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-8);
  align-items: start;
}

.gs-member-detail__bio p {
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.gs-member-detail__skills {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.gs-member-detail__skills-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--space-5);
}

.gs-skill {
  margin-bottom: var(--space-4);
}

.gs-skill:last-child {
  margin-bottom: 0;
}

.gs-skill__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
}

.gs-skill__label span:first-child {
  color: var(--fg);
  font-weight: 500;
}

.gs-skill__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.gs-skill__track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-elev-2);
  overflow: hidden;
}

.gs-skill__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--gradient-accent);
}

@media (max-width: 880px) {
  .gs-member-detail__body {
    grid-template-columns: 1fr;
  }
  .gs-member-detail__header {
    align-items: center;
    text-align: center;
    flex-direction: column;
  }
  .gs-member-detail__links {
    justify-content: center;
  }
}

/* ==========================================================================
   gs-journal-list & gs-journal-post
   ========================================================================== */

gs-journal-list { display: block; }

.gs-journal {
  padding-block: var(--section-pad-y);
}

.gs-journal__head {
  margin-bottom: var(--space-8);
}

.gs-journal__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}

.gs-journal__empty {
  padding: var(--space-7) 0;
  color: var(--fg-muted);
  font-size: var(--fs-lg);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.gs-journal-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-base) var(--ease-out-quart);
}

.gs-journal-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  color: inherit;
}

.gs-journal-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev-2);
  overflow: hidden;
}

.gs-journal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

.gs-journal-card:hover .gs-journal-card__media img {
  transform: scale(1.05);
}

.gs-journal-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gs-journal-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.gs-journal-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.gs-journal-card__excerpt {
  color: var(--fg-muted);
  font-size: var(--fs-base);
}

/* Journal Post Detail */
.gs-journal-post {
  padding-block: var(--space-8) var(--space-9);
}

.gs-journal-post__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.gs-journal-post__meta {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--space-4);
}

.gs-journal-post__title {
  font-size: var(--fs-5xl);
  margin-bottom: var(--space-6);
}

.gs-journal-post__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.gs-journal-post__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-journal-post__body {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.gs-journal-post__body p {
  margin-bottom: var(--space-5);
  color: var(--fg-muted);
}

.gs-journal-post__body h2 {
  font-size: var(--fs-3xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--fg);
}

.gs-journal-post__body h3 {
  font-size: var(--fs-2xl);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  color: var(--fg);
}

.gs-journal-post__body ul,
.gs-journal-post__body ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-5);
  list-style: disc;
  color: var(--fg-muted);
}

.gs-journal-post__body ol {
  list-style: decimal;
}

.gs-journal-post__body li {
  margin-bottom: var(--space-2);
}

.gs-journal-post__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.gs-journal-post__body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-5);
  margin-block: var(--space-6);
  font-style: italic;
  color: var(--fg);
}

.gs-journal-post__body code {
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 0.9em;
}

.gs-journal-post__body pre {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.gs-journal-post__body pre code {
  padding: 0;
  border: none;
  background: transparent;
}

/* Bilder im Body (aus Markdown ![alt](url) und <figure>/<img>) */
.gs-journal-post__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-block: var(--space-7);
  background: var(--bg-elev-2);
}

.gs-journal-post__body p > img:only-child {
  margin-inline: auto;
}

.gs-journal-post__body figure {
  margin-block: var(--space-7);
}

.gs-journal-post__body figure img {
  margin-block: 0;
}

.gs-journal-post__body figcaption,
.gs-journal-post__body p > img[title] + em {
  display: block;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
  text-align: center;
  margin-top: var(--space-3);
  font-style: italic;
}

/* Größen-Modifier via Klassen (für Raw-HTML im Markdown) */
.gs-journal-post__body img.is-narrow,
.gs-journal-post__body figure.is-narrow img {
  max-width: 480px;
  margin-inline: auto;
}

.gs-journal-post__body img.is-wide,
.gs-journal-post__body figure.is-wide img {
  width: calc(100% + var(--space-8));
  max-width: none;
  margin-inline: calc(var(--space-8) * -0.5);
}

/* Horizontale Regel */
.gs-journal-post__body hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin-block: var(--space-8);
}

/* Tabellen (GFM) */
.gs-journal-post__body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-6);
  font-size: var(--fs-sm);
}

.gs-journal-post__body th,
.gs-journal-post__body td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.gs-journal-post__body th {
  font-weight: 600;
  color: var(--fg);
  background: var(--surface);
}

/* ==========================================================================
   gs-text-block
   ========================================================================== */

gs-text-block { display: block; }

.gs-text-block {
  padding-block: var(--section-pad-y);
}

.gs-text-block__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.gs-text-block--wide .gs-text-block__inner {
  max-width: 980px;
}

.gs-text-block__title {
  font-size: var(--fs-4xl);
  margin-bottom: var(--space-6);
}

.gs-text-block__body {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.gs-text-block__body p {
  margin-bottom: var(--space-4);
}

.gs-text-block__body h2,
.gs-text-block__body h3 {
  color: var(--fg);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.gs-text-block__body h2 {
  font-size: var(--fs-2xl);
}

.gs-text-block__body h3 {
  font-size: var(--fs-xl);
  margin-top: var(--space-6);
}

.gs-text-block__body a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.gs-text-block__body ul,
.gs-text-block__body ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
}

.gs-text-block__body ol {
  list-style: decimal;
}

.gs-text-block__body li {
  margin-bottom: var(--space-2);
}

.gs-text-block__body address {
  font-style: normal;
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   gs-cta
   ========================================================================== */

gs-cta { display: block; }

.gs-cta {
  padding-block: var(--section-pad-y);
}

.gs-cta__inner {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.gs-cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: -1;
}

.gs-cta__title {
  font-size: var(--fs-4xl);
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.gs-cta__subtitle {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.gs-cta__row {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   gs-contact-form
   ========================================================================== */

gs-contact-form { display: block; }

.gs-form {
  padding-block: var(--section-pad-y);
}

.gs-form__inner {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.gs-form__intro {
  margin-bottom: var(--space-6);
}

.gs-form__intro h2 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
}

.gs-form__intro p {
  color: var(--fg-muted);
}

.gs-form form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gs-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .gs-form__row {
    grid-template-columns: 1fr;
  }
}

.gs-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gs-form__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
}

.gs-form__label .req {
  color: var(--accent);
}

.gs-form__input,
.gs-form__textarea,
.gs-form__select {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  transition: all var(--dur-fast) var(--ease-out-quart);
}

.gs-form__input:focus-visible,
.gs-form__textarea:focus-visible,
.gs-form__select:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-muted);
}

.gs-form__textarea {
  resize: vertical;
  min-height: 140px;
}

.gs-form__consent {
  display: flex;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.gs-form__consent input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--accent);
}

.gs-form__submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.gs-form__status {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.gs-form__status[data-state="success"] { color: var(--success); }
.gs-form__status[data-state="error"] { color: var(--danger); }

/* ==========================================================================
   gs-marquee
   ========================================================================== */

gs-marquee { display: block; }

.gs-marquee {
  position: relative;
  padding-block: var(--space-7);
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2));
}

/* Lichterkette oben/unten — wie die Glühbirnen-Reihe an einem Kino-Vorbau */
.gs-marquee::before,
.gs-marquee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background-image: repeating-radial-gradient(
    circle at 6px 50%,
    rgba(var(--accent-gold-rgb), 0.85) 0 2px,
    transparent 2.5px 24px
  );
  background-size: 24px 100%;
  animation: gs-marquee-chase 1.1s linear infinite;
  opacity: 0.7;
}

.gs-marquee::before { top: 0; }
.gs-marquee::after { bottom: 0; }

.gs-marquee__track {
  display: flex;
  gap: var(--space-9);
  width: max-content;
  animation: gs-marquee-scroll 40s linear infinite;
}

.gs-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.gs-marquee__item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 6px 2px rgba(var(--accent-gold-rgb), 0.55);
  animation: gs-bulb-blink 2.6s ease-in-out infinite;
}

.gs-marquee__item:nth-child(2n) .gs-marquee__item-dot { animation-delay: 0.4s; }
.gs-marquee__item:nth-child(3n) .gs-marquee__item-dot { animation-delay: 0.9s; }
.gs-marquee__item:nth-child(5n) .gs-marquee__item-dot { animation-delay: 1.3s; }

@keyframes gs-marquee-scroll {
  to { transform: translateX(-50%); }
}

@keyframes gs-marquee-chase {
  to { background-position: 24px 0; }
}

@keyframes gs-bulb-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-marquee__track {
    animation: none;
  }
  .gs-marquee::before,
  .gs-marquee::after,
  .gs-marquee__item-dot {
    animation: none;
  }
}

/* ==========================================================================
   gs-section (generic wrapper)
   ========================================================================== */

gs-section { display: block; }