@import 'basis.css';

/* =====================================================================
   Werk 9 — Training, Zug
   Haltung: direkt, ohne Zirkus, messbar. Wer ein Studio sucht, will
   wissen: wann kann ich, was kostet es, komme ich hier wieder raus.
   Paradigma: DER STUNDENPLAN IST DER HERO. Nicht ein Foto von jemandem
   mit Hantel, sondern die Tabelle, die tatsächlich über den Beitritt
   entscheidet. Schwarz trägt, Limette markiert das, was heute läuft.
   ===================================================================== */

:root {
  --grund: oklch(0.145 0.004 260);
  --flaeche: oklch(0.2 0.005 260);
  --flaeche-2: oklch(0.26 0.006 260);
  --tinte: oklch(0.97 0.002 260);
  --leise: oklch(0.73 0.006 260);
  --linie: oklch(0.31 0.006 260);
  --akzent: oklch(0.885 0.2 122);
  --auf-akzent: oklch(0.2 0.05 122);
  --hell: oklch(0.96 0.003 260);
  --hell-tinte: oklch(0.16 0.006 260);

  --serif: 'Figtree', system-ui, sans-serif;
  --grotesk: 'Figtree', system-ui, sans-serif;
  --anzeige: 'Anton', 'Figtree', system-ui, sans-serif;

  --mass: 80rem;
  --luft: clamp(3.25rem, 7vw, 6rem);
  --rand: clamp(1.25rem, 5vw, 3rem);
  --rundung: 0px;
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --balken: oklch(0.1 0.004 260);
  --vorhang-grund: oklch(0.12 0.004 260);
  --vorhang-tinte: var(--tinte);
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1rem);
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(3rem, 1.9rem + 5vw, 6rem);
}
h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
}
h3 {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.24rem);
  letter-spacing: 0;
  text-transform: none;
}

.marke {
  font-family: var(--anzeige);
  font-size: 1.45rem;
  text-transform: uppercase;
  line-height: 0.95;
}
.marke small {
  margin-top: 0.32rem;
  font-family: var(--grotesk);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--akzent);
}
.merk {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* ---------- Auftritt: Satz links, Plan rechts ------------------------- */

.auftritt {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--linie);
}
.auftritt-in {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
.auftritt h1 {
  margin-top: 0.9rem;
  max-width: 12ch;
}
.auftritt h1 em {
  font-style: normal;
  color: var(--akzent);
}
.auftritt .lauf {
  max-width: 42ch;
  margin-top: 1.3rem;
  color: var(--leise);
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.16rem);
}
.auftritt-tun {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.7rem;
}
.auftritt-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
  color: var(--leise);
}
.auftritt-fakten b {
  color: var(--akzent);
}

/* ---------- Stundenplan ------------------------------------------------ */

.plan-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.plan {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.plan caption {
  padding: 0.9rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
  border-bottom: 1px solid var(--linie);
}
.plan th,
.plan td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
.plan th:last-child,
.plan td:last-child {
  border-right: 0;
}
.plan thead th {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
}
.plan tbody th {
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--tinte);
}
.plan td b {
  display: block;
  font-weight: 700;
}
.plan td span {
  display: block;
  margin-top: 0.15rem;
  color: var(--leise);
  font-size: 0.78rem;
}
.plan td[data-voll] {
  background: color-mix(in oklch, var(--akzent) 16%, transparent);
}
.plan td.leer {
  color: color-mix(in oklch, var(--leise) 45%, transparent);
}

/* ---------- Kursliste --------------------------------------------------- */

.kurse {
  border-top: 2px solid var(--akzent);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.kurs {
  display: grid;
  gap: 0.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--linie);
}
.kurs .stufe {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
}
.kurs p {
  margin: 0;
  color: var(--leise);
  max-width: 62ch;
}
.kurs .wann {
  font-family: var(--anzeige);
  font-size: 1.1rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Helles Band --------------------------------------------------- */

.hell {
  background: var(--hell);
  color: var(--hell-tinte);
  --tinte: var(--hell-tinte);
  --leise: oklch(0.42 0.008 260);
  --linie: oklch(0.85 0.004 260);
  --flaeche: oklch(0.91 0.004 260);
  --feld-grund: #fff;
  --feld-tinte: var(--hell-tinte);
}
.hell .merk,
.hell .kurs .stufe {
  color: oklch(0.45 0.15 128);
}
.hell p {
  color: var(--leise);
}

/* ---------- Mitgliedschaften ----------------------------------------------- */

.stufen {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--linie);
  border: 1px solid var(--linie);
}
.stufe-karte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--flaeche);
}
.stufe-karte[data-beliebt] {
  background: color-mix(in oklch, var(--akzent) 12%, var(--flaeche));
}
.stufe-karte h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: 1.7rem;
  text-transform: uppercase;
}
.stufe-karte .betrag {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.9rem 0 0.3rem;
  font-family: var(--anzeige);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem);
  line-height: 1;
  color: var(--akzent);
}
.stufe-karte .betrag span {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leise);
}
.stufe-karte ul {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--leise);
}
.stufe-karte li {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.6rem;
}
.stufe-karte li::before {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.32rem;
  background: var(--akzent);
  clip-path: polygon(14% 46%, 6% 58%, 40% 90%, 96% 22%, 86% 12%, 39% 68%);
}
.stufe-karte .knopf {
  margin-top: auto;
  width: 100%;
}

/* ---------- Personen, Karten, Zahlen ---------------------------------------- */

.leute {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.person h3 {
  margin-top: 1rem;
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
}
.person .rolle {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent);
}
.person p {
  margin-top: 0.7rem;
  color: var(--leise);
  font-size: 0.95rem;
}
.karte {
  padding: clamp(1.4rem, 3.5vw, 1.9rem);
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.zeiten {
  display: grid;
  margin: 0.9rem 0 0;
}
.zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
}
.zeiten div:last-child {
  border-bottom: 0;
}
.zeiten dd {
  margin: 0;
  color: var(--leise);
  text-align: right;
}
.reihe {
  display: grid;
  gap: 1.4rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.reihe > div {
  padding-top: 0.9rem;
  border-top: 3px solid var(--akzent);
}
.reihe dt {
  font-family: var(--anzeige);
  font-size: clamp(2.1rem, 1.7rem + 1.5vw, 2.9rem);
  line-height: 1;
}
.reihe dd {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  color: var(--leise);
}
.satz {
  font-family: var(--anzeige);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 0.98;
  text-transform: uppercase;
  max-width: 18ch;
}

.seitenkopf {
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.6rem, 3.5vw, 2.25rem);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf p {
  max-width: 58ch;
  margin-top: 1.1rem;
  color: var(--leise);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
}
.brotkrume {
  margin-bottom: 0.8rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}
.brotkrume a {
  color: var(--akzent);
  text-decoration: none;
}

/* ---------- Pakete ------------------------------------------------------------ */

.pakete {
  background: oklch(0.11 0.004 260);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.pakete-kopf {
  max-width: 46rem;
}
.pakete-kopf p {
  margin-top: 1rem;
  color: var(--leise);
}
.paketreihe {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--linie);
  border: 1px solid var(--linie);
}
.paket {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2rem);
  background: oklch(0.145 0.004 260);
}
.paket[data-beliebt] {
  background: oklch(0.2 0.006 260);
}
.paket-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.paket h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
}
.marke-beliebt {
  padding: 0.2rem 0.6rem;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.paket .preis {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1rem 0 0.4rem;
  font-family: var(--anzeige);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.7rem);
  line-height: 1;
  color: var(--akzent);
}
.paket .preis span {
  font-family: var(--grotesk);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leise);
}
.paket > p {
  color: var(--leise);
  font-size: 0.93rem;
}
.paket ul {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.91rem;
  color: var(--leise);
}
.paket li {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.6rem;
}
.paket li::before {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.32rem;
  background: var(--akzent);
  clip-path: polygon(14% 46%, 6% 58%, 40% 90%, 96% 22%, 86% 12%, 39% 68%);
}
.paket .knopf {
  margin-top: auto;
  width: 100%;
}
.pakete-fuss {
  margin-top: 1.5rem;
  max-width: 60ch;
  font-size: 0.85rem;
  color: var(--leise);
}

.fuss {
  background: oklch(0.1 0.004 260);
  color: var(--leise);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.6rem;
}
.fuss .marke {
  display: inline-flex;
  flex-direction: column;
  color: var(--tinte);
  margin-bottom: 0.9rem;
}
.fuss a:hover {
  color: var(--tinte);
}

@media (min-width: 46rem) {
  .reihe {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .stufen {
    grid-template-columns: repeat(3, 1fr);
  }
  .paketreihe {
    grid-template-columns: repeat(3, 1fr);
  }
  .leute {
    grid-template-columns: repeat(3, 1fr);
  }
  .kurs {
    grid-template-columns: 1fr 11rem;
    column-gap: 1.5rem;
    row-gap: 0.4rem;
    align-items: baseline;
  }
  .kurs .stufe,
  .kurs h3,
  .kurs p {
    grid-column: 1;
  }
  .kurs .wann {
    grid-column: 2;
    grid-row: 1 / span 3;
    text-align: right;
  }
  .zweispalt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }
}

@media (min-width: 62rem) {
  .auftritt-in {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.5rem;
  }
  .kontaktraster {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: start;
  }
}


/* =====================================================================
   Feinschliff — ui-ux-pro-max (Kontrast) + impeccable (Craft)
   Gemessene Werte und Begründung: _SKILLS-ANGEWENDET.md
   Feldrand   1.50:1 → 3.23:1  (WCAG 1.4.11, Bedienelement-Rand ≥3:1)
   Platzhalter          → 8.29:1  (WCAG 1.4.3, Fliesstext ≥4.5:1)
   Akzent als Text 14.63:1 → 14.63:1
   Knopfbeschriftung 13.32:1 → 13.32:1
   ===================================================================== */
:root {
  --feld-linie: oklch(0.494 0.012 260);
  --platzhalter: oklch(0.730 0.006 260);
  --akzent-text: var(--akzent);
}

/* Ein Formularfeld muss man sehen, bevor man hineinklickt. */
.feld input,
.feld select,
.feld textarea {
  border-color: var(--feld-linie);
}
.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--platzhalter);
  opacity: 1;
}
.feld > label {
  font-size: 0.9rem;
}

/* Sichtbarer Fokus auf allem, was man bedienen kann. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Kein Inhalt darf auf ein Skript warten, um sichtbar zu werden. */
@media (prefers-reduced-motion: reduce) {
  [data-auftritt],
  [data-auftritt] > *,
  [data-schnitt] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}


/* ---------- Navigation auf schmalen Schirmen --------------------------
   Kein Hamburger: die Abschnitte stehen als eigene Zeile unter der Marke,
   immer sichtbar und immer klickbar. Fünf Links hinter zwei Klicks zu
   verstecken kostet Aufrufe der Unterseiten.

   Diese Regeln stehen bewusst in stil.css: sie wird nach basis.css
   geladen und hat damit das letzte Wort.
   ---------------------------------------------------------------------- */
@media (max-width: 55.99rem) {
  .kopf-in {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .menue {
    display: flex;
    order: 3;
    width: 100%;
    gap: 0.15rem;
    margin: 0 calc(var(--rand, 1.25rem) * -1);
    padding: 0 var(--rand, 1.25rem);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--linie, rgba(128, 128, 128, 0.25));
  }
  .menue::-webkit-scrollbar {
    display: none;
  }
  .menue a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    font-family: var(--grotesk, system-ui, sans-serif);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--leise, currentColor);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    opacity: 1;
  }
  .menue a:first-child {
    padding-left: 0;
  }
  .menue a[aria-current='page'] {
    color: var(--akzent, currentColor);
    font-weight: 600;
    border-bottom-color: currentColor;
  }
}


/* Der Kursplan ist breiter als ein Handy und liegt deshalb in einem
   Scroll-Rahmen. Ohne Hinweis sieht man die Spalten rechts nie —
   eine waagerecht scrollbare Tabelle verrät sich auf dem Handy nicht
   von selbst. */
@media (max-width: 46rem) {
  .plan-rahmen {
    position: relative;
  }
  .plan-rahmen::after {
    content: 'seitlich wischen für Do – Sa →';
    position: sticky;
    left: 0;
    display: block;
    padding: 0.5rem 1rem 0.6rem;
    font-family: var(--grotesk, system-ui);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--leise);
    border-top: 1px solid var(--linie);
  }
}


/* ---------- Wegweiser zwischen den Abschnitten --------------------------- */
/* Eine kurze Linie mit Spitze, die sich zeichnet, wenn die Grenze zwischen
   zwei Abschnitten in Sicht kommt. Sie sitzt in einem Kasten ohne eigene
   Höhe, mitten auf der Grenze — die Seite verschiebt sich dadurch nicht.
   Der Kasten steht nicht im HTML; wegweiser.js baut ihn. */

.wegweiser {
  position: relative;   /* eigener Bezug, damit kein Abschnitt umgestellt wird */
  height: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}
.wegweiser svg {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  display: block;
  overflow: visible;
}
.wegweiser-linie {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.05s cubic-bezier(.22, .61, .36, 1);
}
.wegweiser-spitze {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  translate: 0 -5px;
  transition: opacity 0.4s ease-out 0.75s, translate 0.5s cubic-bezier(.22, .61, .36, 1) 0.75s;
}
.wegweiser[data-an] .wegweiser-linie { stroke-dashoffset: 0 !important; }
.wegweiser[data-an] .wegweiser-spitze { opacity: 1; translate: 0 0; }

/* Die Naht ist gestrichelt — dafür zeichnet nicht der Strich, sondern die
   Deckkraft, sonst frisst die Strichelung den dashoffset. */
.wegweiser[data-art="naht"] .wegweiser-linie {
  stroke-dasharray: 5 4 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.wegweiser[data-art="naht"][data-an] .wegweiser-linie { opacity: 1; }

@media (max-width: 45.99rem) { .wegweiser svg { width: 18px; height: 52px; } }


/* ---------- Gezeichneter Rahmen und antwortende Zeilen ------------------- */
/* Beim Überfahren zeichnet sich ein Rahmen: erst laufen die waagrechten
   Linien aus der Mitte nach aussen, dann wachsen die senkrechten dazu. Zwei
   Pseudoelemente, kein SVG. Der Rahmen liegt 5 px ausserhalb und fängt
   keine Zeiger ab — das Trefferfeld bleibt, wie es war. */

.knopf { position: relative; }
.knopf::before,
.knopf::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 7px;
  pointer-events: none;
  border: 1.5px solid transparent;
}
.knopf::before {
  border-top-color: var(--akzent);
  border-bottom-color: var(--akzent);
  transform: scaleX(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1);
}
.knopf::after {
  border-left-color: var(--akzent);
  border-right-color: var(--akzent);
  transform: scaleY(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1) 0.14s;
}
.knopf:hover::before, .knopf:focus-visible::before { transform: scaleX(1); }
.knopf:hover::after,  .knopf:focus-visible::after  { transform: scaleY(1); }

/* Die Zeilen der Preiskarte antworten nacheinander, nicht alle zugleich —
   45 ms Abstand liest sich als Bewegung, gleichzeitig wäre es ein Ruck. */
.paket li { transition: transform 0.34s cubic-bezier(.22, .61, .36, 1); }
.paket:hover li { transform: translateX(4px); }
.paket:hover li:nth-child(1) { transition-delay: 0s; }
.paket:hover li:nth-child(2) { transition-delay: 0.045s; }
.paket:hover li:nth-child(3) { transition-delay: 0.09s; }
.paket:hover li:nth-child(4) { transition-delay: 0.135s; }
.paket:hover li:nth-child(5) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .knopf::before, .knopf::after { display: none; }
  .paket li, .paket:hover li { transform: none; transition: none; }
}