/* ==========================================================================
   physiofit.css — Marken-Theme PhysioFit
   Dunkel, warmes Anthrazit, premium. Akzente: Goldgelb #E4B700.
   Formsprache: weiche Kurven (Bögen), großzügige Weißräume, feine Linien.
   ========================================================================== */

:root {
  --bg: #232326;
  --surface: #2c2c30;
  --ink: #f0efe9;
  --muted: #a8a89e;
  --line: rgba(240, 239, 233, 0.13);

  --accent: #e4b700;
  --accent-ink: #1c1b17;
  --accent-text: #e9c93a;
  --accent-soft: rgba(228, 183, 0, 0.16);

  --footer-bg: #1b1b1e;
  --footer-ink: #f0efe9;
  --footer-muted: #a8a89e;
  --footer-line: rgba(240, 239, 233, 0.12);

  --shadow: 0 1.75rem 4rem -1.75rem rgba(0, 0, 0, 0.5);
}

body {
  background-image:
    radial-gradient(52rem 32rem at 108% -8%, rgba(228, 183, 0, 0.12), transparent 62%),
    radial-gradient(40rem 26rem at -12% 32%, rgba(228, 183, 0, 0.07), transparent 60%);
  background-repeat: no-repeat;
}

/* ---------- Hero ---------- */
.hero-deco {
  position: absolute;
  border: 1px solid rgba(228, 183, 0, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-deco--a {
  width: clamp(16rem, 28vw, 26rem);
  aspect-ratio: 1;
  top: -8%;
  left: -6%;
}

.hero-deco--b {
  width: clamp(11rem, 20vw, 18rem);
  aspect-ratio: 1;
  bottom: -10%;
  right: -4%;
  border-color: rgba(240, 239, 233, 0.1);
}

.hero__content { position: relative; z-index: 1; }

/* ---------- Karten ---------- */
.card { border-radius: calc(var(--radius) + 0.25rem); }

.card__icon { border-radius: 40% 40% 1rem 1rem; }

/* ---------- Über uns ---------- */
.split-layout__media::before {
  content: "";
  position: absolute;
  inset: -7% auto auto -7%;
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid rgba(228, 183, 0, 0.45);
  border-radius: 50%;
  z-index: 0;
}

.split-layout__media img {
  border-radius: var(--radius) 50% var(--radius) var(--radius) / var(--radius) 34% var(--radius) var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Sektions-Dekor: feine Linie ---------- */
.section--lined { position: relative; }

.section--lined::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), var(--container));
  height: 1px;
  background: var(--line);
}

/* ---------- Öffnungszeiten ---------- */
.hours td { color: var(--muted); }

/* ---------- Kontakt ---------- */
.contact-form { box-shadow: var(--shadow); border-color: var(--line); }

/* ---------- Footer (dunkel) ---------- */
.site-footer { border-top: 1px solid var(--line); }