/* ==========================================================================
   Fläming swingt — Stylesheet (v5, Google Fonts + responsive)
   ========================================================================== */

:root {
  /* Original-Palette aus den OnePage-Rohdaten (customColor) */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light: #f6f4f1;   /* Original "light" */
  --color-dark: #363636;    /* Original "dark" */
  --color-key1: #9aa79a;    /* Original "key1" — Salbei */
  --color-key2: #c6a24a;    /* Original "key2" — Gold */

  --color-bg: var(--color-light);
  --color-surface: var(--color-white);
  --color-ink: var(--color-dark);
  --color-ink-soft: #56534d;
  --color-ink-faint: #8a867d;
  --color-border: rgba(54, 54, 54, 0.14);

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Caveat', 'Segoe Script', cursive;
  --max-width: 1100px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 20px 45px -25px rgba(54, 54, 54, 0.35);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* Live-Check der echten Seite (getComputedStyle): Überschriften sind Caveat,
   Weight 700, GROSSGESCHRIEBEN (text-transform: uppercase) und mit
   letter-spacing -0.4px — das macht Caveat in Großbuchstaben viel kompakter/
   kantiger als die fließende Kleinbuchstaben-Kursive. */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 480px) {
  .container { padding-inline: 18px; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* Der handgezeichnete Original-Unterstreicheffekt lässt sich aus den Daten
   nicht rekonstruieren; eine einheitliche CSS-Wellenlinie wirkte zu
   gleichförmig. Die Hervorhebung bleibt daher nur über die volle Tintenfarbe
   (siehe #mitmachen/.prose-Regeln, die den übrigen Text abdunkeln) erhalten,
   ohne zusätzliche Unterstreichung. */
.hl {
  color: var(--color-dark);
}

/* Der normale Fließtext in "Mitmachen" ist auf 50% Deckkraft abgesetzt, nur
   die .hl-Passagen stehen in voller Tintenfarbe. In "Über Swing" ist es der
   zweite Absatz (Herkunft/Historie), der schwächer und etwas kleiner gesetzt
   ist als der erste. In "Über mich" bleibt der Text komplett in voller
   Farbe. Der Termin-Card (schedule-card) ist davon bewusst ausgenommen, da
   sie die wichtigste, konkrete Information der Section ist. */
#mitmachen .prose p { color: rgba(54, 54, 54, 0.5); }
#ueber-swing .prose p:nth-of-type(2) {
  color: rgba(54, 54, 54, 0.48);
  font-size: 0.91em;
}

/* -------------------- Header -------------------- */

.site-header {
  background: var(--color-light);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}

/* Live-Check: Logo ist fix 90px hoch, unabhängig von der Viewportbreite. */
.brand img {
  height: 90px;
  width: auto;
  display: block;
}

.main-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { border-color: var(--color-key2); }

/* -------------------- Buttons -------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }

/* Live-Check der echten Seite (getComputedStyle) ergab die exakten Button-Farben:
   Hero-Button = key1 (Salbei) mit weißem Text + Ripple-Animation, radius 8px.
   Absenden-Button = dark (#363636) mit weißem Text, kein Ripple, radius 4px.
   Kein Gold (key2) wird für Buttons verwendet. */
.btn-primary {
  position: relative;
  background: var(--color-key1);
  color: var(--color-white);
  border-radius: 8px;
  isolation: isolate;
}
.btn-primary:hover,
.btn-primary:focus-visible { background: #8b9a8b; }

/* Ripple-Effekt wie im Original-Button (first_link_infinite_animation: "ripple") */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(154, 167, 154, 0.55);
  animation: ripple 2.4s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { animation: none; }
}
@keyframes ripple {
  0%   { box-shadow: 0 0 0 0 rgba(154, 167, 154, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(154, 167, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(154, 167, 154, 0); }
}

.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: 4px;
}
.btn-dark:hover, .btn-dark:focus-visible { background: #4a4a4a; }

.btn-block { width: 100%; }

/* -------------------- Hero (Deckblatt) -------------------- */

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  color: #fdfbf6;
  overflow: hidden;
  background: var(--color-black);
}

/* Responsive Header-Bild: hochkantiges Motiv auf Mobilgeräten,
   querformatiges Motiv ab Tablet/Desktop-Breite. */
.hero-bg {
  position: absolute;
  inset: -6% -6%;
  background-image: url('../img/hero-bg-mobile.jpg');
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
}
@media (min-width: 780px) {
  .hero-bg {
    background-image: url('../img/hero-bg-desktop.jpg');
    background-position: center 56%;
  }
}

/* Original-Overlay: gradient key2 49% -> dark 74% über dem Bild */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(198, 162, 74, 0.49) 0%, rgba(54, 54, 54, 0.74) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-block: 96px;
  /* Per Live-Check der echten Seite (getComputedStyle -> textAlign: "center")
     ist der Hero-Text zentriert — meine vorherige "Korrektur" auf linksbündig
     war falsch. */
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.hero h1 {
  /* Live-Check bei 568px -> 50.4px, bei 1440px -> 68px: entspricht ~2.43rem + 2.02vw */
  font-size: clamp(2.1rem, 2.43rem + 2.02vw, 4.5rem);
  margin: 0 0 18px;
}

.hero p {
  font-size: 1.375rem;
  margin: 0 0 32px;
  color: rgba(253, 251, 246, 0.92);
}

.hero-actions { display: flex; justify-content: center; }

@media (max-width: 600px) {
  .hero { min-height: 520px; }
  .hero-content { padding-block: 64px; }
}

/* -------------------- Sections -------------------- */

section { padding-block: 88px; }

@media (max-width: 600px) {
  section { padding-block: 56px; }
  .section-head { margin-bottom: 28px; }
}

/* Per Live-Check der echten Seite (getComputedStyle auf .con-kit-organism-background):
   Die Idee/Über Swing/Über mich = weiß, Kontaktformular = key1 (Salbei) rgb(154,167,154),
   Header/Footer = light (Creme). Keine Sektion ist dunkel (#363636). */
.section-white { background: var(--color-white); }
.section-key1 { background: var(--color-key1); color: var(--color-white); }
.section-key1 .contact-intro p { color: rgba(255, 255, 255, 0.88); }

.section-head { max-width: 640px; margin-bottom: 40px; }
/* Live-Check bei 568px -> 50.4px, bei 1440px -> 68px (identisch zum Hero) */
.section-head h2 { font-size: clamp(2.1rem, 2.43rem + 2.02vw, 4.5rem); margin: 0; }
/* Über mich: Live-Check ergab eine kleinere Überschrift als die übrigen
   Sections (568px -> 39.4px, 1440px -> 52px). */
.about-card .section-head h2 { font-size: clamp(1.8rem, 1.95rem + 1.45vw, 3.4rem); }

.prose p { margin: 0 0 1.2em; white-space: pre-line; }
.prose p:last-child { margin-bottom: 0; }
/* Live-Check: Fließtext ist deutlich größer als vorher angenommen (22px bei
   16px Basisschrift = 1.375rem), nicht 1.05rem. */
.prose { max-width: 72ch; font-size: 1.375rem; }

/* -------------------- Termin-Card (Mitmachen) -------------------- */

.schedule-card {
  background: #f2f2f2;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 8px 0 32px;
}
.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.schedule-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.schedule-label {
  font-weight: 700;
  color: var(--color-ink);
}
.schedule-value {
  color: var(--color-ink);
}
@media (min-width: 620px) {
  .schedule-list li {
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: baseline;
  }
}

/* -------------------- Über Swing: Text + Video-Grid -------------------- */

/* Mobil/schmal (< 880px, per Live-Check bei ~800px bestätigt): Text oben in
   voller Breite, darunter ein 2-spaltiges Video-Grid.
   Ab 880px (Desktop, per Screenshot-Vorgabe): Text links, Videos rechts als
   eigene, gestapelte Spalte — siehe .swing-grid unten. */
.swing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .swing-grid {
    /* Live-Check: Text- zu Video-Spalte ~54.2% / 45.8% (775.7px : 656.3px bei
       1432px Zeilenbreite), kein 50/50-Grid. */
    grid-template-columns: 6fr 5fr;
    gap: 32px;
    align-items: start;
  }
  .swing-grid .video-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 0;
  }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 780px) {
  .video-grid { grid-template-columns: 1fr; }
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #1c1c1c;
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
  width: 100%;
}
.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.4s ease;
}
.video-frame:hover img { opacity: 1; transform: scale(1.03); }
.video-frame .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video-frame .play span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.video-frame .play svg { width: 20px; height: 20px; margin-left: 3px; }
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -------------------- About me -------------------- */

/* Mobil/schmal: hellgraue Karte (rgb(242,242,242), radius 16px) mit
   Überschrift+Bio-Text, darunter — als eigenes Element, nicht beschnitten —
   das Porträtfoto in voller Breite und im Original-Seitenverhältnis.
   Ab 880px (Desktop, per Screenshot-Vorgabe): Text links, Bild rechts,
   nebeneinander. */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .about-grid {
    /* Live-Check: Text- zu Bild-Spalte ~62.5% / 37.5% (870px : 522px bei
       1392px Zeilenbreite) — kein 50/50-Grid. Kein align-items:center: die
       Bild-Spalte streckt sich (Grid-Default "stretch") auf die Höhe der
       Text-Karte, das Foto füllt diese Höhe per object-fit:cover aus. */
    grid-template-columns: 5fr 3fr;
    gap: 16px;
  }
}
.about-card {
  background: #f2f2f2;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 0;
}
.about-media img {
  border-radius: 16px;
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 880px) {
  .about-media img {
    height: 100%;
    object-fit: cover;
    /* Motiv steht im rechten Bilddrittel — Ausschnitt entsprechend nach
       rechts verschoben, damit er nicht abgeschnitten wird. */
    object-position: 78% center;
  }
}

/* -------------------- Contact form -------------------- */

.contact-wrap { max-width: 720px; margin-inline: auto; }
/* Per Live-Check der echten Seite (getComputedStyle -> textAlign: "center")
   sind Überschrift + beide Einleitungs-Absätze zentriert — meine vorherige
   "Korrektur" auf linksbündig war falsch. */
.contact-intro { text-align: center; margin-bottom: 40px; }
.contact-intro h2 { font-size: clamp(2.1rem, 2.43rem + 2.02vw, 4.5rem); margin: 0 0 12px; }
.contact-intro p { margin: 0 0 12px; }

.form-card {
  /* Im Original liegen die Formularfelder direkt auf dem grünen Sektions-
     hintergrund, ohne eigene Karte/Schatten. */
  padding: 0;
}

.form-row { margin-bottom: 18px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .form-row-split { grid-template-columns: 1fr; } }

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-white);
}

input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font: inherit;
  color: var(--color-ink);
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 1px;
}
textarea { resize: vertical; min-height: 100px; }
.form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* "Tanzerfahrung" ist im Original kein <select>-Dropdown, sondern drei
   auswählbare Karten (Radio-Buttons, als Boxen gestylt). */
.experience-label {
  text-align: center;
  font-style: italic;
  color: var(--color-white);
  margin: 0 0 16px;
}
.experience-options { display: flex; flex-direction: column; gap: 12px; }
.experience-option {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  color: var(--color-white);
}
.experience-option input { position: absolute; opacity: 0; pointer-events: none; }
.experience-option:has(input:checked) {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--color-white);
}
.experience-option:has(input:focus-visible) { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* Erfolgs-Ansicht ersetzt das Formular (Original: eigener "Finish"-Schritt mit Animation) */
.form-success {
  text-align: center;
  padding: 24px 8px;
}
.form-success .check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-dark);
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.form-success h3 { margin: 0 0 6px; font-size: 1.6rem; color: var(--color-white); }
.form-success[hidden] { display: none; }

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-error { background: rgba(180, 76, 42, 0.12); color: #8a3a20; }

/* -------------------- Footer -------------------- */

.site-footer {
  background: var(--color-light);
  border-top: 1px solid var(--color-border);
  padding-block: 28px;
}
/* Per Live-Check der echten Seite: Logo oben, Impressum-Link darunter,
   beides zentriert — kein Nebeneinander in einer Zeile. */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.footer-inner img { height: 56px; width: auto; }
.footer-inner a {
  text-decoration: underline;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
}
.footer-inner a:hover { color: var(--color-key1); }

/* -------------------- Legal page -------------------- */

.legal { padding-block: 64px 96px; }
.legal h1 { font-size: 2.6rem; margin-bottom: 8px; }
.legal .prose { max-width: 68ch; }
.legal .prose h2 { font-size: 1.5rem; margin: 2em 0 0.5em; }
.legal .prose h2:first-of-type { margin-top: 1.4em; }