/* ═══════════════════════════════════════════════════════
   Dr. Becker Karriere-Landingpages — Shared Styles
   CI/CD: Open Sans, Manual S.21/23/39/43/78
   Brand-Farbe pro Page über --brand / --brand-dark overridden
═══════════════════════════════════════════════════════ */
:root {
  /* Manual S.21 — Hausfarben */
  --db-yellow: #ffcc00;
  --db-blue: #009fe3;
  --db-green: #00a13a;
  --db-green-light: #a2c748;
  /* Manual S.23 — Akzentfarben */
  --db-yellow-dark: #e5b000;
  --db-grey-light: #e1e8ec;
  /* Manual S.78 — Text 85% Schwarz */
  --db-text: #262626;
  --db-text-light: #6b6b6b;
  --db-line: #e5e5e5;
  --db-bg: #ffffff;
  --db-bg-soft: #f7f7f7;
  /* Default Brand (PhysioGym = Blau) — pro Page überschreibbar */
  --brand: #009fe3;
  --brand-dark: #0077a8;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Open Sans', sans-serif;
  color:var(--db-text); background:var(--db-bg);
  -webkit-font-smoothing:antialiased;
  font-size:16px; line-height:1.6;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

/* CI-Bar (Manual S.39) */
.ci-bar { display:flex; height:6px; width:100%; }
.ci-bar > div { flex:1; }
.ci-bar .c1 { background:var(--db-yellow); }
.ci-bar .c2 { background:var(--db-blue); }
.ci-bar .c3 { background:var(--db-green-light); }
.ci-bar .c4 { background:var(--db-green); }

/* Header */
.site-header {
  position:sticky; top:0; z-index:50; background:var(--db-bg);
  border-bottom:1px solid var(--db-line);
}
.site-header-inner {
  max-width:1180px; margin:0 auto; padding:1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.site-logo img { height:42px; }
.site-nav { display:flex; gap:1.8rem; align-items:center; }
.site-nav a { color:var(--db-text); font-weight:600; font-size:0.9rem; }
.site-nav .btn-primary {
  background:var(--db-yellow-dark); color:#fff; padding:0.6rem 1.1rem;
  border-radius:6px; font-weight:700;
}
.site-nav .btn-primary:hover { text-decoration:none; background:var(--brand-dark); }
@media (max-width:720px) {
  .site-nav { gap:1rem; }
  .site-nav a:not(.btn-primary) { display:none; }
}

/* Hero */
.hero {
  background:linear-gradient(135deg, #fdfdfd, var(--db-bg-soft));
  padding:5rem 1.5rem 4rem;
}
.hero-inner {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center;
}
@media (max-width:880px) { .hero-inner { grid-template-columns:1fr; } }
.hero-eyebrow {
  display:inline-block; background:var(--db-yellow); color:var(--db-text);
  padding:0.4rem 0.9rem; border-radius:99px;
  font-weight:700; font-size:0.78rem; letter-spacing:0.04em;
  text-transform:uppercase; margin-bottom:1.2rem;
}
.hero h1 {
  font-size:clamp(2rem, 4vw, 2.9rem); line-height:1.1; font-weight:700;
  margin-bottom:1.2rem; letter-spacing:-0.01em;
}
.hero h1 em { font-style:normal; color:var(--brand); }
.hero .sub {
  font-size:1.05rem; color:var(--db-text-light); max-width:520px; margin-bottom:1.8rem;
}
.hero .claim {
  font-style:italic; color:var(--db-text-light); margin-top:1.5rem; font-size:0.95rem;
}
.hero-actions { display:flex; gap:0.85rem; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 1.5rem; border-radius:6px;
  font-weight:700; font-size:0.95rem;
  border:none; cursor:pointer; text-decoration:none;
}
.btn-primary { background:var(--db-yellow-dark); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); text-decoration:none; }
.btn-secondary {
  background:transparent; color:var(--brand); border:2px solid var(--brand);
}
.btn-secondary:hover { background:var(--brand); color:#fff; text-decoration:none; }
.hero-image {
  border-radius:10px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,0.08);
  aspect-ratio:4/5;
}
.hero-image img { width:100%; height:100%; object-fit:cover; }

/* Section base */
section { padding:4rem 1.5rem; scroll-margin-top:96px; }
.container { max-width:1180px; margin:0 auto; }
.section-head { text-align:center; margin-bottom:3rem; }
.section-eyebrow {
  display:inline-block; padding:0.35rem 0.85rem; border-radius:99px;
  background:var(--brand); color:#fff; font-weight:700;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:1rem;
}
.section-head h2 {
  font-size:clamp(1.7rem, 3vw, 2.2rem); line-height:1.15; font-weight:700;
  letter-spacing:-0.01em; margin-bottom:0.75rem;
}
.section-head p { color:var(--db-text-light); max-width:620px; margin:0 auto; }

/* Vakanzen */
#vakanzen { background:var(--db-bg-soft); }
.vakanzen-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
}
.vakanzen-grid.vakanzen-grid--2 { max-width:760px; margin:0 auto; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.vakanz-card {
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  display:flex; flex-direction:column;
  transition:transform 0.2s, box-shadow 0.2s;
}
.vakanz-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.vakanz-card .vc-img { aspect-ratio:4/3; overflow:hidden; background:var(--db-grey-light); }
.vakanz-card .vc-img img { width:100%; height:100%; object-fit:cover; }
.vakanz-card .vc-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.vakanz-card .vc-eyebrow {
  font-size:0.7rem; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.5rem;
}
.vakanz-card h3 { font-size:1.15rem; font-weight:700; line-height:1.25; margin-bottom:0.7rem; }
.vakanz-card .vc-sub { color:var(--db-text-light); font-size:0.92rem; margin-bottom:1rem; flex:1; }
.vakanz-card .vc-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.2rem; }
.vakanz-card .vc-tag {
  font-size:0.7rem; color:var(--db-text); background:var(--db-bg-soft);
  padding:0.3rem 0.6rem; border-radius:4px;
}
.vakanz-card .vc-cta {
  background:var(--db-yellow-dark); color:#fff;
  padding:0.7rem 1rem; border-radius:6px;
  font-weight:700; font-size:0.88rem;
  border:none; cursor:pointer; width:100%;
}
.vakanz-card .vc-cta:hover { background:var(--brand-dark); }

/* Becker Benefits */
#benefits { background:#fff; }
.benefits-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem;
}
@media (max-width:980px) { .benefits-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px) { .benefits-grid { grid-template-columns:1fr; } }
.benefit-card {
  padding:1.6rem; border-radius:10px; background:var(--db-bg-soft);
  text-align:left; display:flex; flex-direction:column; gap:0.6rem;
}
.benefit-icon {
  width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:700;
}
.benefit-card h3 { font-size:1.05rem; font-weight:700; }
.benefit-card p { color:var(--db-text-light); font-size:0.9rem; }

/* Standort */
#standort {
  background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff;
}
.standort-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
}
@media (max-width:880px) { .standort-inner { grid-template-columns:1fr; } }
.standort h2 { color:#fff; }
.standort-text p { color:rgba(255,255,255,0.92); margin-bottom:1rem; }
.standort-text .claim {
  font-style:italic; opacity:0.85; margin-top:1.5rem; font-size:1.1rem;
}
.standort-image {
  border-radius:10px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.standort-image img { width:100%; height:100%; object-fit:cover; }

/* CTA-Banner */
#cta-banner {
  background:var(--db-yellow); color:var(--db-text);
  padding:3rem 1.5rem; text-align:center;
}
#cta-banner h2 { font-size:clamp(1.5rem, 3vw, 2rem); margin-bottom:1rem; font-weight:700; }
#cta-banner p { margin-bottom:1.5rem; }
#cta-banner .btn-primary { background:var(--db-text); color:#fff; }
#cta-banner .btn-primary:hover { background:#000; }

/* Footer */
footer { background:var(--db-text); color:#fff; padding:3rem 1.5rem 2rem; }
.footer-inner {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem;
}
@media (max-width:720px) { .footer-inner { grid-template-columns:1fr; gap:1.5rem; } }
.footer-logo {
  background:#fff; display:inline-block;
  padding:0.55rem 0.9rem; border-radius:6px; margin-bottom:1rem;
}
.footer-logo img { height:30px; display:block; }
footer h4 { font-size:0.9rem; font-weight:700; margin-bottom:0.8rem; text-transform:uppercase; letter-spacing:0.06em; }
footer p, footer li { font-size:0.88rem; color:rgba(255,255,255,0.78); }
footer ul { list-style:none; }
footer ul li { margin-bottom:0.4rem; }
footer a { color:rgba(255,255,255,0.85); }
footer a:hover { color:#fff; }
.footer-bottom {
  max-width:1180px; margin:2.5rem auto 0; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:0.8rem; color:rgba(255,255,255,0.6);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}

/* Modal */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.5);
  display:none; align-items:flex-start; justify-content:center;
  z-index:100; padding:2rem 1rem; overflow-y:auto;
}
.modal-backdrop.is-open { display:flex; }
.modal {
  background:#fff; max-width:540px; width:100%; border-radius:12px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.25);
  margin:auto;
}
.modal-head {
  padding:1.8rem 1.8rem 1rem;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
}
.modal-head h3 { font-size:1.35rem; font-weight:700; margin-bottom:0.4rem; }
.modal-head p { color:var(--db-text-light); font-size:0.9rem; }
.modal-close {
  background:transparent; border:none; cursor:pointer;
  font-size:1.5rem; color:var(--db-text-light); line-height:1; padding:0.25rem;
}
.modal-body { padding:1rem 1.8rem 1.8rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:480px) { .form-grid { grid-template-columns:1fr; } }
.form-row { margin-bottom:1rem; }
.form-row label {
  display:block; font-size:0.82rem; font-weight:600; margin-bottom:0.35rem;
  color:var(--db-text);
}
.form-row label .req { color:var(--brand); }
.form-row input, .form-row select, .form-row textarea {
  width:100%; padding:0.7rem 0.85rem;
  border:1.5px solid var(--db-line); border-radius:6px;
  font-family:inherit; font-size:0.95rem; color:var(--db-text);
  background:#fff; transition:border-color 0.15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline:none; border-color:var(--brand);
}
.form-row textarea { resize:vertical; min-height:80px; }
.form-checkbox {
  display:flex; gap:0.6rem; align-items:flex-start; margin-bottom:1.3rem;
  font-size:0.83rem; color:var(--db-text-light); line-height:1.5;
}
.form-checkbox input { margin-top:0.18rem; flex-shrink:0; }
.form-checkbox a { color:var(--brand); text-decoration:underline; }

.modal.is-success .modal-body,
.modal.is-success .modal-head,
.modal.is-success .quiz-progress,
.modal.is-success .quiz-nav { display:none; }
.modal-success { display:none; padding:3rem 1.8rem; text-align:center; }
.modal.is-success .modal-success { display:block; }
.modal-success .check {
  width:64px; height:64px; border-radius:50%; background:var(--db-green);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin:0 auto 1rem; font-weight:700;
}
.modal-success h3 { font-size:1.4rem; margin-bottom:0.6rem; }
.modal-success p { color:var(--db-text-light); margin-bottom:1.5rem; }
.modal-success button {
  background:var(--db-text); color:#fff;
  padding:0.75rem 1.4rem; border:none; border-radius:6px;
  font-weight:700; cursor:pointer;
}

.error-msg {
  background:#fff0f0; color:#a01a1a; border:1px solid #f5c5c5;
  padding:0.7rem 0.9rem; border-radius:6px; font-size:0.85rem;
  margin-bottom:1rem; display:none;
}
.error-msg.is-visible { display:block; }

/* Funnel */
.quiz-progress { display:flex; gap:0.4rem; padding:0 1.8rem 0.4rem; }
.quiz-progress .dot {
  flex:1; height:4px; background:var(--db-line); border-radius:2px; transition:background 0.2s;
}
.quiz-progress .dot.done, .quiz-progress .dot.active { background:var(--brand); }
.quiz-step { display:none; }
.quiz-step.is-current { display:block; }
.quiz-context {
  display:flex; align-items:center; gap:0.7rem;
  padding:0 0 1rem; border-bottom:1px solid var(--db-line); margin-bottom:1.2rem;
}
.quiz-context img {
  width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0;
}
.quiz-context .qc-meta { display:flex; flex-direction:column; }
.quiz-context .qc-eyebrow {
  font-size:0.7rem; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:0.08em;
}
.quiz-context .qc-title { font-size:0.95rem; font-weight:700; color:var(--db-text); }
.quiz-question { font-size:1.15rem; font-weight:700; line-height:1.3; margin-bottom:1.1rem; }
.quiz-options { display:flex; flex-direction:column; gap:0.55rem; }
.quiz-option {
  display:block; width:100%; text-align:left;
  padding:0.9rem 1.1rem; background:#fff;
  border:1.5px solid var(--db-line); border-radius:8px;
  font-family:inherit; font-size:0.95rem; color:var(--db-text);
  cursor:pointer; transition:border-color 0.15s, background 0.15s;
}
.quiz-option:hover { border-color:var(--brand); background:var(--db-bg-soft); }
.quiz-option.is-selected {
  border-color:var(--brand); background:var(--brand); color:#fff;
}
.quiz-nav {
  display:flex; gap:0.7rem; justify-content:space-between;
  padding:1.2rem 1.8rem; background:var(--db-bg-soft);
  border-top:1px solid var(--db-line);
}
.btn-back, .btn-next {
  padding:0.75rem 1.2rem; border-radius:6px;
  font-weight:700; font-size:0.9rem; cursor:pointer; border:none;
}
.btn-back {
  background:transparent; color:var(--db-text-light); border:1.5px solid var(--db-line);
}
.btn-back:hover { color:var(--db-text); border-color:var(--db-text-light); }
.btn-back:disabled { opacity:0; pointer-events:none; }
.btn-next {
  background:var(--db-yellow-dark); color:#fff; flex:1; max-width:240px;
}
.btn-next:hover { background:var(--brand-dark); }
.btn-next:disabled { background:var(--db-line); cursor:not-allowed; }

/* Cookie-Banner (blockierendes Overlay mit Blur bis zur Auswahl) */
.cookie-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(8,20,30,0.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.cookie-overlay[hidden] { display:none !important; }
.cookie-banner {
  width:100%; max-width:580px;
  background:#fff; color:var(--db-text);
  border:1px solid var(--db-line); border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  padding:1rem 1.2rem;
  display:flex; flex-wrap:wrap; gap:0.7rem; align-items:center;
  font-size:0.83rem; line-height:1.5;
}
.cookie-banner[hidden] { display:none !important; }
.cookie-banner p { flex:1; min-width:240px; margin:0; }
.cookie-banner a { color:var(--brand); text-decoration:underline; }
.cookie-banner .cookie-actions { display:flex; gap:0.5rem; }
.cookie-banner button {
  padding:0.55rem 1rem; border-radius:6px; border:1.5px solid var(--db-line);
  background:#fff; color:var(--db-text);
  font-family:inherit; font-weight:700; font-size:0.82rem; cursor:pointer;
}
.cookie-banner button.primary {
  background:var(--db-yellow-dark); color:#fff; border-color:var(--db-yellow-dark);
}
.cookie-banner button:hover { border-color:var(--db-text); }
.cookie-banner button.primary:hover { background:var(--db-text); border-color:var(--db-text); }