/* =========================================================
   Fundulus Fitness – Stylesheet
   Farben & Schriften zentral hier ändern
   ========================================================= */

@font-face { font-family: "Oswald"; src: url("../fonts/oswald-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --schwarz: #000;
  --dunkel: #252128;
  --weiss: #fff;
  --hellgrau: #f0f0f0;
  --textgrau: #e8e8e8;
  --akzent: #5b9cb0;
  --akzent-hover: #4a8597;
  --kopf: "Oswald", "Arial Narrow", sans-serif;
  --text: "Roboto Condensed", "Arial Narrow", sans-serif;
  --breit: "Montserrat", "Arial Black", sans-serif;
  --max: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--schwarz); color: var(--weiss); font-family: var(--text); font-weight: 300; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 500; line-height: 1.05; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.container { width: min(var(--max), 100% - 40px); margin-inline: auto; }
.section { padding: 90px 0; }
.section-title { font-size: clamp(2.2rem, 9.5vw, 6.5rem); hyphens: manual; overflow-wrap: normal; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .35em; }
.lead { font-size: 1.15rem; color: var(--textgrau); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; background: var(--akzent); color: var(--weiss); font-family: var(--kopf); font-weight: 400; font-size: 1.05rem; text-decoration: none; padding: .55em 1.8em; border-radius: 999px; border: 0; cursor: pointer; transition: background .2s; }
.btn:hover { background: var(--akzent-hover); }
.btn-outline { background: transparent; border: 1px solid var(--weiss); }
.btn-outline:hover { background: var(--weiss); color: var(--schwarz); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 80px; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo img { width: 50px; height: 50px; }
.nav { display: flex; gap: 34px; }
.nav a { font-family: var(--kopf); font-weight: 400; font-size: 1.05rem; text-decoration: none; color: var(--weiss); transition: color .2s; }
.nav a:hover, .nav a.aktiv { color: var(--akzent); }
.nav-toggle { display: none; background: none; border: 0; color: var(--weiss); cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: .2s; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { position: fixed; top: 80px; left: 0; right: 0; flex-direction: column; gap: 0; background: #000; padding: 10px 20px 24px; transform: translateY(-120%); transition: transform .25s; }
  .nav a { padding: 12px 0; font-size: 1.3rem; border-bottom: 1px solid #222; }
  .nav.offen { transform: none; }
}

/* ---------- Hero Startseite ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: url("../images/hero.jpg") center / cover no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.hero-inhalt { position: relative; padding-top: 80px; }
.hero h1 { font-family: var(--breit); font-weight: 800; font-size: clamp(2.6rem, 10vw, 8.5rem); letter-spacing: .06em; line-height: 1; margin: 0; text-transform: uppercase; }
.hero .untertitel { font-family: var(--breit); font-weight: 800; font-size: clamp(1rem, 3.2vw, 2.5rem); letter-spacing: .25em; text-transform: uppercase; margin-top: .3em; }
.hero-logo { position: absolute; right: 6%; top: 18%; width: clamp(140px, 22vw, 300px); opacity: .95; }

/* ---------- Über mich ---------- */
.ueber-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: start; }
.ueber-grid img { width: 100%; border-radius: 2px; position: sticky; top: 110px; }
.ueber-text { color: var(--textgrau); }
.ueber-text strong { color: var(--weiss); font-weight: 700; }
@media (max-width: 860px) { .ueber-grid { grid-template-columns: 1fr; } .ueber-grid img { position: static; } }

/* ---------- Video ---------- */
.video-box { margin: 40px auto 0; max-width: 440px; }
.video-box video { width: 100%; aspect-ratio: 9 / 16; background: #000; object-fit: cover; }

/* ---------- Leistungen ---------- */
.karten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.karte { min-width: 0; hyphens: manual; background: var(--hellgrau); color: var(--schwarz); text-align: center; padding: 36px 14px 32px; display: flex; flex-direction: column; align-items: center; transition: transform .2s; }
.karte:hover { transform: translateY(-4px); }
.karte img { width: 110px; height: 110px; object-fit: contain; margin-bottom: 18px; }
.karte h3 { font-size: 1.5rem; line-height: 1.1; font-weight: 500; margin-bottom: 22px; flex-grow: 1; }
.karte .btn { hyphens: none; white-space: nowrap; font-size: .95rem; padding: .5em 1.3em; }
@media (max-width: 1000px) {
  .karten { display: flex; flex-wrap: wrap; justify-content: center; }
  .karte { flex: 0 1 calc((100% - 32px) / 3); }
}
@media (max-width: 620px) {
  .karten { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  .karte { flex: none; flex-direction: row; text-align: left; padding: 16px 18px; gap: 16px; hyphens: none; }
  .karte:hover { transform: none; }
  .karte img { width: 56px; height: 56px; margin: 0; flex-shrink: 0; }
  .karte h3 { margin: 0; flex: 1; min-width: 0; }
  .karte .btn { font-size: .9rem; padding: .45em 1.1em; }
}

/* ---------- Erstgespräch ---------- */
.erst-liste { list-style: none; padding: 0; margin: 0 0 1.4em; }
.erst-liste li { position: relative; padding-left: 28px; margin-bottom: .4em; }
.erst-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); }

/* ---------- Kundenmeinungen ---------- */
.zitat-box { margin: 0; background: var(--weiss); color: var(--schwarz); padding: 60px clamp(24px, 6vw, 90px); text-align: center; }
.zitat-box blockquote { margin: 0 0 1.2em; font-family: var(--kopf); font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.6; }
.zitat-box cite { font-style: normal; font-family: var(--kopf); font-size: 1.1rem; }

.bildband { height: 500px; background: url("../images/bildband.jpg") center 30% / cover no-repeat; }

/* ---------- Buchungen ---------- */
.buchungen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.buchung { background: #111; display: flex; flex-direction: column; }
.buchung img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.buchung-text { padding: 26px 28px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.buchung h3 { font-size: 1.5rem; font-weight: 400; margin-bottom: .2em; }
.buchung .meta { color: var(--akzent); font-size: .95rem; margin-bottom: .6em; }
.buchung .aktionen { margin-top: auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.buchung .mehr { color: var(--textgrau); font-size: .95rem; }
@media (max-width: 760px) { .buchungen { grid-template-columns: 1fr; } }

/* ---------- Gutschein ---------- */
#gutschein { overflow-x: clip; }
.gutschein-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.gutschein-grid img { width: 100%; max-width: 440px; height: auto; justify-self: center; border-radius: 6px; transform: rotate(-3deg); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
@media (max-width: 760px) {
  .gutschein-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .gutschein-grid img { max-width: 340px; transform: rotate(-2deg); }
}

/* ---------- Formulare ---------- */
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.formular .voll { grid-column: 1 / -1; }
.formular input, .formular textarea, .formular select { width: 100%; background: transparent; border: 1px solid var(--weiss); color: var(--weiss); font-family: var(--kopf); font-weight: 300; font-style: italic; font-size: 1.1rem; padding: 12px 16px; border-radius: 0; }
.formular select option { color: #000; }
.formular textarea { min-height: 140px; resize: vertical; }
.formular input::placeholder, .formular textarea::placeholder { color: #ddd; }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.formular .hinweis { font-size: .85rem; color: #aaa; }
.formular .hinweis a { color: #ccc; }
.versteckt { position: absolute; left: -9999px; }
@media (max-width: 620px) { .formular { grid-template-columns: 1fr; } }
.kontakt-daten { margin-top: 36px; color: var(--textgrau); }
.kontakt-daten a { text-decoration: none; }
.kontakt-daten a:hover { color: var(--akzent); }

/* ---------- Unterseiten ---------- */
.seiten-hero { position: relative; height: 70vh; min-height: 420px; margin-top: 80px; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.seiten-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 60%); }
.seiten-hero h1 { position: relative; font-size: clamp(3rem, 9vw, 6.5rem); text-transform: uppercase; padding-bottom: 30px; margin: 0; }
.inhalt { color: var(--textgrau); }
.inhalt > p, .inhalt > ul, .inhalt > ol { max-width: 900px; }
.inhalt h2 { color: var(--weiss); font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: .2em; }
.inhalt ul { padding-left: 1.2em; }
.inhalt li { margin-bottom: .5em; }
.inhalt strong { color: var(--weiss); font-weight: 700; }

.vorteile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vorteil { min-width: 0; hyphens: manual; overflow-wrap: normal; background: var(--weiss); color: var(--dunkel); text-align: center; padding: 50px 18px 44px; display: flex; flex-direction: column; align-items: center; }
.vorteil img { width: 90px; height: 90px; object-fit: contain; margin-bottom: 26px; opacity: .85; }
.vorteil h3 { font-size: 1.5rem; font-weight: 500; margin: 0; }
@media (max-width: 900px) { .vorteile { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vorteil { padding: 34px 10px 30px; } .vorteil h3 { font-size: 1.2rem; } .karte h3 { font-size: 1.2rem; } }

.weitere { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Service-Seiten ---------- */
.service-kopf { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.service-kopf img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.service-fakten { list-style: none; padding: 0; margin: 0 0 1.4em; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--akzent); font-family: var(--kopf); font-size: 1.15rem; }
.preis { font-family: var(--kopf); font-size: 2.4rem; font-weight: 500; color: var(--weiss); margin-bottom: .4em; }
@media (max-width: 860px) { .service-kopf { grid-template-columns: 1fr; } }

.betraege { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.4em; }
.betraege label { cursor: pointer; }
.formular .betraege input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.betraege span { display: inline-block; border: 1px solid var(--weiss); padding: 10px 22px; font-family: var(--kopf); font-size: 1.2rem; transition: .2s; }
.betraege input:checked + span { background: var(--akzent); border-color: var(--akzent); }
.betraege input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Impressum ---------- */
.rechtstext { color: var(--textgrau); max-width: 900px; font-size: 1rem; overflow-wrap: anywhere; }
.rechtstext h2 { color: var(--weiss); font-size: 2rem; margin-top: 1.6em; }
.rechtstext h3 { color: var(--weiss); font-family: var(--text); font-weight: 700; font-size: 1.1rem; margin: 1.6em 0 .4em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid #1c1c1c; padding: 50px 0 40px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-grid .logo img { width: 60px; height: 60px; }
.badge { width: 90px; }
.footer-links { text-align: right; font-family: var(--kopf); font-size: .95rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--akzent); }
.social { display: inline-flex; width: 34px; height: 34px; margin-bottom: 10px; }
.social svg { width: 100%; height: 100%; fill: var(--weiss); transition: fill .2s; }
.social:hover svg { fill: var(--akzent); }
.copyright { font-size: .85rem; color: #999; margin-top: 4px; }
.nach-oben { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; text-decoration: none; font-size: 1.4rem; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 40; }
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; }

/* Einblend-Animation */
.js .einblenden { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.js .einblenden.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .einblenden { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ---------- Personal-Training-Kopf (Hochformat-Foto) ---------- */
.pt-hero { margin-top: 80px; padding: 50px 0 10px; }
.pt-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pt-hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); text-transform: uppercase; margin-bottom: .3em; }
.pt-hero .lead { margin-bottom: 1.6em; max-width: 30em; }
.pt-hero-bild { width: 100%; max-height: 80vh; aspect-ratio: 1101 / 2000; object-fit: cover; object-position: center top; justify-self: end; max-width: 460px; }
@media (max-width: 860px) {
  .pt-hero { padding-top: 0; }
  .pt-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .pt-hero-bild { order: -1; justify-self: stretch; max-width: none; width: calc(100% + 40px); margin: 0 -20px; aspect-ratio: 4 / 5; max-height: none; object-position: center 8%; }
  .pt-hero-text { padding-top: 28px; }
}

/* ---------- Kundenmeinungen-Karussell ---------- */
.karussell { position: relative; padding-top: 70px; padding-bottom: 44px; }
.zitat-zeichen { position: absolute; top: -10px; right: 22px; font-family: Georgia, "Times New Roman", serif; font-size: 9rem; line-height: 1; color: var(--akzent); pointer-events: none; }
.karussell-folien { display: grid; }
.karussell-folie { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.karussell-folie.aktiv { opacity: 1; visibility: visible; }
.karussell-punkte { display: flex; justify-content: center; gap: 4px; margin-top: 26px; }
.karussell-punkt { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.karussell-punkt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); background: #a5a5a5; transition: background .2s; }
.karussell-punkt.aktiv::after { background: var(--akzent); }
.karussell-punkt:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (max-width: 620px) {
  .karussell { padding-top: 64px; padding-left: 22px; padding-right: 22px; }
  .zitat-zeichen { font-size: 7rem; right: 14px; }
  .zitat-box blockquote { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .karussell-folie { transition: none; } }
@media (max-width: 400px) {
  .karte { padding: 14px 14px; gap: 12px; }
  .karte img { width: 48px; height: 48px; }
  .karte h3 { font-size: 1.1rem; }
  .karte .btn { padding: .45em .9em; }
}
@media (max-width: 340px) { .karte h3 { font-size: 1rem; } .karte img { width: 40px; height: 40px; } }

h1, h2, h3, h4 { hyphens: manual; overflow-wrap: normal; word-break: normal; }
@media (max-width: 350px) { .section-title { font-size: 1.85rem; } }
@media (max-width: 350px) { .seiten-hero h1, .pt-hero h1 { font-size: 2.4rem; } }
.btn-reihe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2em; }
@media (max-width: 620px) {
  .btn-reihe { flex-direction: column; gap: 14px; }
  .btn-reihe .btn { text-align: center; }
}
@media (max-width: 620px) {
  .site-footer { padding: 26px 0 88px; }
  .footer-grid { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo social badge" "impressum impressum impressum" "copy copy copy"; align-items: center; gap: 14px 16px; }
  .footer-grid .logo { grid-area: logo; display: block; line-height: 0; }
  .footer-grid .logo img { width: 46px; height: 46px; }
  .footer-grid .badge { grid-area: badge; width: 62px; }
  .footer-links { display: contents; }
  .footer-links br { display: none; }
  .footer-links .social { grid-area: social; justify-self: center; width: 28px; height: 28px; margin: 0; }
  .footer-links > a[href="impressum.html"] { grid-area: impressum; justify-self: center; font-size: .9rem; padding-top: 12px; border-top: 1px solid #1c1c1c; width: 100%; text-align: center; }
  .footer-links .copyright { grid-area: copy; text-align: center; font-size: .75rem; margin: -6px 0 0; }
}

/* ---- Hero-Zusatz & Button ---- */
.hero h1 .h1-zusatz { display: block; font-family: var(--kopf); font-weight: 400; font-size: clamp(1rem, 2.2vw, 1.6rem); letter-spacing: .22em; margin-bottom: .6em; color: #e8e8e8; }
.hero-btn { margin-top: 2em; font-size: 1.15rem; padding: .7em 2em; }

/* ---- Qualifikationen ---- */
.qualis { background: #111; padding: 26px 0; border-bottom: 1px solid #1c1c1c; }
.quali-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.quali-liste li { display: flex; align-items: center; gap: 10px; font-size: .85rem; line-height: 1.25; color: #bbb; }
.quali-liste svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--akzent); }
.quali-liste strong { display: block; font-family: var(--kopf); font-weight: 500; font-size: 1.05rem; color: var(--weiss); letter-spacing: .02em; }
.quali-liste.hell { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 1.6em; }
.quali-liste.hell li { background: #151515; border: 1px solid #222; padding: 14px 16px; border-radius: 6px; }
.quali-titel { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: .4em 0 .6em; }
@media (max-width: 1000px) { .quali-liste { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .qualis { padding: 20px 0; }
  .quali-liste, .quali-liste.hell { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .quali-liste li { font-size: .78rem; gap: 8px; }
  .quali-liste strong { font-size: .95rem; }
  .quali-liste.hell li { padding: 12px; }
}

/* ---- Vorteile mit Text ---- */
.vorteil p { margin: .7em 0 0; font-size: .98rem; line-height: 1.5; color: #555; }
.vorteil { padding: 40px 20px 34px; }
@media (max-width: 520px) { .vorteil { padding: 26px 12px 22px; } .vorteil p { font-size: .88rem; } .vorteil img { width: 60px; height: 60px; margin-bottom: 16px; } }

/* ---- Sticky Erstgespräch-Button (nur Handy) ---- */
.sticky-cta { display: none; }
@media (max-width: 620px) {
  .sticky-cta { display: flex; align-items: center; justify-content: center; position: fixed; left: 16px; right: 80px; bottom: 16px; height: 50px; border-radius: 999px; background: var(--akzent); color: var(--weiss); font-family: var(--kopf); font-size: 1.05rem; text-decoration: none; z-index: 39; box-shadow: 0 6px 20px rgba(0,0,0,.5); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s; }
  .sticky-cta.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
  .nach-oben { bottom: 18px; right: 18px; width: 46px; height: 46px; }
}
.quali-liste li, .quali-liste span { min-width: 0; }
@media (max-width: 360px) { .quali-liste svg { width: 16px; height: 16px; } .quali-liste li { gap: 6px; } .quali-liste strong { font-size: .85rem; } .quali-liste.hell li { padding: 10px 8px; } }
.karte h3 { padding: 0 8px; max-width: 100%; }