/* ============================================================================
   project.css — Tennisschule Momentum
   ----------------------------------------------------------------------------
   Brand-Tokens: Welle 1 bleibt monochrom (Starter-Defaults greifen). Sobald
   Logo + Farben vom Trainer da sind, hier --brand-* setzen. Siehe Layer 07.

   Projekt-Komponenten: trainer-teaser, testimonials, news-teaser sind
   projekt-spezifisch und leben in dieser Datei (nicht im Starter-
   components.css), damit der Starter sauber bleibt.
   ========================================================================== */

/* ============================================================================
   Grid-Overlay (Debug)
   ========================================================================== */
.grid-overlay-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 700;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  opacity: 0.85;
}

.grid-overlay {
  position: fixed;
  inset: 0;
  padding-inline: var(--wrap-padding);
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  z-index: 99;
  opacity: 0;
}

.grid-overlay span {
  background: rgba(255, 0, 100, 0.08);
  border-left: 1px solid rgba(255, 0, 100, 0.35);
  border-right: 1px solid rgba(255, 0, 100, 0.35);
}

.is-grid-on .grid-overlay { opacity: 1; }

/* Brand-Welt A: Hell-Petrol + Neon-Grün (abgeleitet aus Hero-Bild) */
:root {
  --brand-bg:         oklch(98% 0.008 220);
  --brand-surface:    oklch(94% 0.018 220);
  --brand-text:       oklch(22% 0.04 235);
  --brand-muted:      oklch(55% 0.03 230);
  --brand-line:       oklch(85% 0.025 220);
  --brand-accent:     oklch(82% 0.18 130);
  --brand-accent-ink: oklch(22% 0.04 235);
  --brand-on-dark:    oklch(98% 0.008 220);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg-dark:         oklch(22% 0.04 235);
    --brand-surface-dark:    oklch(28% 0.045 235);
    --brand-text-dark:       oklch(95% 0.01 220);
    --brand-muted-dark:      oklch(65% 0.03 230);
    --brand-line-dark:       oklch(35% 0.045 235);
    --brand-accent-dark:     oklch(85% 0.2 130);
    --brand-accent-ink-dark: oklch(22% 0.04 235);
  }
}

/* ============================================================================
   Nav — projektspezifisches Verhalten
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  z-index: 50;
}

/* FIX: Brand links, Burger rechts */
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.site-nav-toggle{ margin-left: auto; }

/* Default (Sub-Pages): dunkle Nav auf hellem Page-Hero */
.site-header,
.site-header__brand,
.site-nav__link { color: var(--color-text); }

/* Startseite (Template: blocks): helle Nav/Logo auf Bild-Hero */
.page--blocks .site-header,
.page--blocks .site-header__brand,
.page--blocks .site-nav__link { color: var(--color-on-dark); }

.site-header.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ---------- Logo ---------- */
.site-header__brand-logo {
  display: inline-block;
  width: 11rem;
  max-width: 40vw;
  color: inherit;
}

.site-header__brand-logo svg {
  width: 100%;
  height: auto;
  display: block;
  color: currentColor; /* SVG nutzt fill=currentColor */
  opacity: 1;
  visibility: visible;
}

/* ---------- Burger ---------- */
.site-nav-toggle {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
  z-index: 60;
  cursor: pointer;
  color: inherit;
}

.site-nav-toggle__bar {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast);
}

.site-nav-toggle__bar:nth-child(1) { top: 0.9rem; }
.site-nav-toggle__bar:nth-child(2) { bottom: 0.9rem; }

[aria-expanded="true"].site-nav-toggle .site-nav-toggle__bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
[aria-expanded="true"].site-nav-toggle .site-nav-toggle__bar:nth-child(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ---------- Fullscreen-Nav-Overlay ---------- */
.site-nav {
  position: fixed;
  inset: 0;

  /* helles Overlay im Seiten-Blau */
  background: var(--brand-bg);
  color: var(--brand-text);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 8vw, 6rem);
  text-align: center;
  transform: translateY(-100%);
  transition: transform 700ms cubic-bezier(0.625, 0.05, 0, 1);
  z-index: 55;
}

.site-nav__link {
  color: var(--brand-text);
  opacity: 1;
}

.site-nav__link:hover,
.site-nav__link.is-current {
  opacity: 0.65;
}

.is-nav-open .site-nav { transform: translateY(0); }
.is-nav-open { overflow: hidden; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__item { overflow: hidden; }

.site-nav__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 7rem);
  font-weight: var(--weight-bold);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--brand-text);
  padding-block: 0;
  text-decoration: none;
  transform: translateY(110%);
  transition: transform 800ms cubic-bezier(0.625, 0.05, 0, 1);
}

.site-nav__link::after { display: none; }
.is-nav-open .site-nav__link { transform: translateY(0); }

.site-nav__link:hover,
.site-nav__link.is-current { opacity: 0.6; }

.is-nav-open .site-nav-toggle { color: var(--color-on-dark); }

/* ============================================================================
   Startseite: Header-Overlay und Hero-Abstand
   ========================================================================== */
/* Header liegt auf dem Hero (wie vorher) */
.page--blocks .site-header {
  position: absolute;
}

/* Hero beginnt unter dem Header, damit nichts "drunter" verschwindet */
.page--blocks .b-hero {
  padding-top: 96px; /* bei Bedarf: 88px oder 104px */
  position: relative;
  z-index: 1;
}

/* ============================================================================
   news-teaser (Fragment safe)
   ========================================================================== */
.news-teaser { padding-block: var(--section-padding-block); }
.news-teaser__inner { display: flex; flex-direction: column; gap: var(--space-m); }
.news-teaser__eyebrow { font-size: inherit; color: var(--color-text); }
.news-teaser__headline { margin: 0; }

/* ============================================================================
   Kursangebote — Grid (max. 3 nebeneinander)
   ========================================================================== */
.courses-grid{
  list-style: none;
  padding: 0;
  margin:  0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px){
  .courses-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .courses-grid{ grid-template-columns: 1fr; }
}

/* ============================================================================
   Kursdetail: Fakten links, Ziele rechts
   ========================================================================== */
.course-detail-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 900px){
  .course-detail-grid{ grid-template-columns: 1fr; }
}

/* Ziele-Block: Heading soll "wie Auf einen Blick" wirken */
.course-detail-grid__goals h2,
.course-detail-grid__goals h3{
  margin-top: 0;
  margin-bottom: 1rem;
}

/* ============================================================================
   Kursdetail: Galerie
   ========================================================================== */
.course-gallery{
  display: grid;
  gap: 1rem;
}

/* Mobile default: 1 Spalte */
.course-gallery__item{
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-surface);
}

.course-gallery__item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ab Tablet: 2 Spalten */
@media (min-width: 720px){
  .course-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .course-gallery__item{
    aspect-ratio: 4 / 3;
  }
}

/* ab Desktop: 3 Spalten */
@media (min-width: 900px){
  .course-gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================================
   Buttons — Outline-Variante für CTA
   ========================================================================== */
.btn.btn--outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font-weight: var(--weight-medium);
  line-height: 1;

  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
  text-decoration: none;

  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.btn.btn--outline:hover{
  opacity: 0.95;
  transform: translateY(-1px);
  background: color-mix(in oklch, currentColor 10%, transparent);
}

.btn.btn--outline:active{
  transform: translateY(0);
}

.btn.btn--outline:focus-visible{
  outline: 3px solid color-mix(in oklch, currentColor 35%, transparent);
  outline-offset: 3px;
}

/* ============================================================================
   Trainer-Seite
   ========================================================================== */
.trainer-card{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1.5rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  background: color-mix(in oklch, var(--color-surface) 65%, transparent);
}

.trainer-card__media{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
}

.trainer-card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.trainer-card__label{
  margin: 0 0 .5rem;
  opacity: .8;
}

.trainer-card__name{
  margin: 0 0 1rem;
}

.trainer-card__section + .trainer-card__section{
  margin-top: 1rem;
}

.trainer-card__section-title{
  margin: 0 0 .5rem;
  font-size: inherit;
  opacity: .9;
  font-weight: var(--weight-bold);
}

.trainer-card__list{
  margin: 0;
  padding-left: 1.2rem;
}

.trainer-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 1024px){
  .trainer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .trainer-card{ grid-template-columns: 1fr; }
  .trainer-grid{ grid-template-columns: 1fr; }
}

/* Trainer: Listen (Kurzvita/Schwerpunkte) sauber darstellen */
.trainer-card__content ul{
  list-style: disc !important;
  list-style-position: outside;
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
}

.trainer-card__content li{
  margin: 0.25rem 0;
}
/* Block: tiles3 (3 Kacheln) */
.home-tiles3 .home-tiles3__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

/* klickbare Karte stabilisieren (a.tile3) */
.home-tiles3 .tile3--link {
  display: grid;
  grid-template-rows: auto 1fr;
  color: inherit;
  text-decoration: none;

  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.home-tiles3 .tile3--link:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.home-tiles3 .tile3--link:focus-visible {
  outline: 3px solid color-mix(in oklch, currentColor 35%, transparent);
  outline-offset: 4px;
}

.home-tiles3 .tile3__media {
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.06);
}

.home-tiles3 .tile3__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-tiles3 .tile3__body {
  padding: 0.9rem 1rem 1.05rem;
  display: grid;
  gap: 0.5rem;
}

.home-tiles3 .tile3__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); /* max = 32px */
  line-height: 1.08;
}

.home-tiles3 h3.tile3__title {
  display: block;
}

.home-tiles3 .tile3__text {
  margin: 0;
  opacity: 0.85;
  max-width: 55ch;
}

.home-tiles3 .tile3__cta {
  justify-self: start;
  margin-top: 0.25rem;
  white-space: nowrap;
}

/* responsive */
@media (max-width: 900px) {
  .home-tiles3 .home-tiles3__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .home-tiles3 .home-tiles3__grid {
    grid-template-columns: 1fr;
  }
}
/* Nav Overlay (offen): helle Fläche, dunkle Schrift */
.is-nav-open .site-nav {
  background: var(--brand-bg);
  color: var(--brand-text);
}

.is-nav-open .site-nav__link {
  color: var(--brand-text);
  opacity: 1;
}

.is-nav-open .site-nav__link:hover,
.is-nav-open .site-nav__link.is-current {
  opacity: 0.65;
}