/* Botinsky Team Experience — Farbwelt: Off-White, Ink, Copper, Sand */
:root {
  --offwhite: #FAFAF7;
  --ink: #0A0A0A;
  --copper: #A66C4A;
  --sand: #F1EDE4;
  --ink-60: rgba(10,10,10,.62);
  --ink-12: rgba(10,10,10,.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--offwhite);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; }
.mono { font-family: "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 12px; letter-spacing: .08em; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }

a { color: var(--copper); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Site-Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; gap: 16px;
  background: rgba(250,250,247,.82); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ink-12);
}
.logo-link { display: inline-flex; align-items: center; }
.logo { height: 30px; width: auto; display: block; }
.header-tag {
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper); background: var(--sand);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Site-Footer ---------- */
.site-footer { background: var(--ink); color: var(--offwhite); margin-top: 0; }
.footer-inner {
  max-width: 1040px; margin: 0 auto; padding: 56px 24px 32px;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.footer-logo { height: 34px; width: auto; display: block; margin-bottom: 16px; opacity: .95; }
.footer-brand p { color: rgba(250,250,247,.6); max-width: 34ch; font-size: 15px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: rgba(250,250,247,.82); font-size: 15px; }
.footer-links a:hover { color: var(--offwhite); text-decoration: none; }
.footer-base {
  max-width: 1040px; margin: 0 auto; padding: 18px 24px 32px;
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid rgba(250,250,247,.12);
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(250,250,247,.5);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: inherit; font-size: 16px; font-weight: 600;
  border: none; cursor: pointer; border-radius: 999px;
  padding: 14px 28px; min-height: 52px;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--ink); color: var(--offwhite); }
.btn.primary:hover { opacity: .88; }
.btn.primary:disabled { opacity: .3; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-12); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.big { padding: 18px 36px; font-size: 17px; min-height: 60px; }

/* ---------- Hero ---------- */
.hero { display: flex; align-items: center; padding: 40px 0 56px; min-height: calc(100svh - 62px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; width: 100%; }
.kicker { font-size: 19px; color: var(--copper); margin-bottom: 16px; max-width: 34ch; }
.hero h1 {
  font-size: clamp(25px, 2.7vw, 35px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.18; margin-bottom: 20px; max-width: 24ch;
}
.hero .sub { font-size: 17px; color: var(--ink-60); max-width: 50ch; margin-bottom: 22px; }
.hero-intro { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.hero-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.hero-list li {
  font-size: 16.5px; color: var(--ink); padding-left: 26px; position: relative; max-width: 46ch;
}
.hero-list li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 12px; height: 2px; background: var(--copper);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.trust {
  color: var(--ink-60); display: inline-flex; align-items: center; gap: 8px;
}
.trust::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }

/* Portrait-Collage */
.hero-collage { position: relative; height: 460px; }
.hero-face {
  position: absolute; width: 172px; border-radius: 16px; overflow: hidden;
  background: var(--sand); box-shadow: 0 18px 40px -18px rgba(10,10,10,.4);
}
.hero-face img {
  width: 100%; height: 218px; object-fit: cover; object-position: center 22%;
  display: block;
}
.hero-face figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 22px 12px 10px; color: #fff;
  background: linear-gradient(to top, rgba(10,10,10,.78), transparent);
}
.hf-name { font-weight: 700; font-size: 14px; }
.hf-role { font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.8); }
.hero-face.f0 { top: 0; left: 6%; transform: rotate(-2deg); z-index: 2; }
.hero-face.f1 { top: 40px; right: 2%; transform: rotate(2deg); z-index: 1; }
.hero-face.f2 { bottom: 18px; left: 0; transform: rotate(1.5deg); z-index: 3; }
.hero-face.f3 { bottom: 0; right: 8%; transform: rotate(-1.5deg); z-index: 2; }

.kicker.mono {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper); font-style: normal; margin-bottom: 18px;
}
.hero-lead { font-size: 24px; color: var(--ink); margin-bottom: 22px; max-width: 26ch; }
.sub.tight { margin-top: -14px; }

/* ---------- Story / Übergangs-Sektionen (Landing) ---------- */
.story, .why-quiz { padding: 88px 0; border-top: 1px solid var(--ink-12); }
.why-quiz { background: var(--sand); }
.story .wrap, .why-quiz .wrap { font-size: 19px; }
.story p, .why-quiz p { color: var(--ink-60); margin-bottom: 18px; max-width: 60ch; }
.story-lead {
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.14; color: var(--ink); margin-bottom: 20px; max-width: 20ch;
}
.story-big { font-size: 22px; color: var(--ink) !important; font-weight: 600; margin-bottom: 28px !important; }
.story-neg { font-size: 21px; color: var(--ink-60) !important; line-height: 1.5; margin-bottom: 22px !important; }
.story-pos {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 30px; color: var(--copper) !important; margin-bottom: 30px !important; max-width: 24ch;
}
.story-people { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.story-people li {
  font-size: 19px; color: var(--ink); padding-left: 30px; position: relative;
}
.story-people li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 12px; height: 2px; background: var(--copper);
}
.story-turn {
  font-size: 24px !important; font-weight: 800; color: var(--ink) !important;
  letter-spacing: -.02em; margin: 34px 0 18px !important;
}
.section-cta { margin-top: 40px; }

.transition-box {
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 20px;
  padding: 30px 32px; margin: 30px 0 0;
}
.why-quiz .transition-box p { color: var(--ink); }
.transition-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.transition-list li {
  font-size: 19px; color: var(--ink); font-weight: 600; padding-left: 30px; position: relative;
}
.transition-list li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--copper);
}

/* ---------- Quiz ---------- */
.quiz { min-height: 100svh; padding: 40px 0 80px; }
.progress { margin-bottom: 36px; }
.progress-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.progress-step { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.progress-pct { color: var(--copper); }
.progress-track { height: 6px; background: var(--ink-12); border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--copper); border-radius: 6px; transition: width .3s ease; }

.quiz h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 18px; }
.subq { font-size: 18px; font-weight: 700; margin: 30px 0 12px; }
.hint { color: var(--ink-60); font-size: 15px; margin-bottom: 14px; }

.opts { display: grid; gap: 10px; margin-bottom: 8px; }
.opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  font-family: inherit; font-size: 16.5px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 14px;
  padding: 16px 18px; min-height: 58px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.opt:hover { border-color: var(--copper); }
.opt.selected { border-color: var(--ink); background: var(--sand); }
.opt-check { color: var(--copper); font-size: 14px; flex-shrink: 0; }

.field { display: block; margin: 20px 0; }
.field span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
textarea, input[type=email], input[type=text] {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 12px;
  padding: 14px 16px; resize: vertical;
}
textarea:focus, input:focus { outline: none; border-color: var(--copper); }

.nav-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; }

/* ---------- Ergebnis ---------- */
.result { padding: 64px 0 80px; }
.result-intro { margin-bottom: 64px; }
.result-intro .pill { display: inline-block; margin-bottom: 24px; }
.lede { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.result-intro > p:not(.lede):not(.pill) { font-size: 18px; color: var(--ink-60); }

.first-task { background: var(--sand); border-radius: 18px; padding: 26px 28px; margin-top: 26px; }
.first-task .serif { font-size: 21px; margin-bottom: 12px; color: var(--ink); }
.first-task p:last-child { color: var(--ink-60); font-size: 16px; }

.section-h {
  font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; margin: 80px 0 14px;
}
.section-sub { color: var(--ink-60); margin-bottom: 36px; max-width: 56ch; }

.emp-card {
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 20px;
  padding: 30px; margin-bottom: 22px;
}
.emp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.emp-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--sand); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 24px;
}
.emp-avatar img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
 
}
.emp-head h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.emp-role { color: var(--copper); margin-top: 2px; }
.emp-num { margin-left: auto; font-size: 44px; color: var(--ink-12); }
.emp-card dt { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--copper); margin-top: 18px; }
.emp-card dd { margin-top: 6px; color: var(--ink); }

.week { border-left: 3px solid var(--copper); }
.week-row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 16px 0 16px 24px; border-bottom: 1px solid var(--ink-12); }
.week-row:last-child { border-bottom: none; }
.week-day { color: var(--copper); padding-top: 4px; }
.week-body { display: flex; align-items: flex-start; gap: 14px; }
.week-thumb {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 22%;
  flex-shrink: 0; background: var(--sand);
}

.build-order { list-style: none; padding: 0; display: grid; gap: 10px; }
.build-order li {
  display: flex; align-items: center; gap: 16px; font-size: 17px;
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 14px; padding: 12px 18px;
}
.bo-num { color: var(--copper); font-size: 13px; width: 18px; flex-shrink: 0; }
.bo-thumb {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 22%;
  flex-shrink: 0; background: var(--sand);
}

.infra { display: grid; gap: 18px; }
.infra-card { background: var(--sand); border-radius: 18px; padding: 26px 28px; }
.infra-card h4 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.infra-card p + p { margin-top: 10px; }

.realism-card { background: #fff; border: 1.5px solid var(--ink-12); border-radius: 18px; padding: 24px 26px; margin-bottom: 16px; }
.realism-card h4 { font-size: 18px; margin-bottom: 16px; }
.realism-card h4 .mono { color: var(--copper); }
.realism-cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.realism-cols h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-60); margin-bottom: 8px; }
.realism-cols ul { padding-left: 18px; }
.realism-cols li { font-size: 15px; margin-bottom: 6px; }

.offer ul { padding-left: 22px; margin: 12px 0 20px; }
.offer li { padding: 4px 0; }
.offer h4 { margin-top: 20px; font-size: 17px; }
.offer-close { font-size: 21px; color: var(--copper); margin-top: 8px; }

.price-box {
  background: var(--ink); color: var(--offwhite); border-radius: 24px;
  padding: 44px 36px; margin-top: 64px; text-align: center;
}
.price-box h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.price-box p { color: rgba(250,250,247,.75); max-width: 54ch; margin: 0 auto 8px; }
.price { font-size: 64px; color: var(--offwhite); margin: 18px auto !important; }
.price-cta { margin-top: 26px; }
.price-box .btn.primary { background: var(--copper); color: var(--offwhite); }
.price-box .opt { background: rgba(250,250,247,.06); border-color: rgba(250,250,247,.2); color: var(--offwhite); text-align: left; }
.price-box .opt.selected { background: rgba(166,108,74,.25); border-color: var(--copper); }
.price-box h4 { margin: 28px 0 12px; font-size: 17px; }
#qualify-block { text-align: left; max-width: 520px; margin: 0 auto; }
#qual-result { text-align: center; margin-top: 28px; }
#qual-result p { margin-bottom: 16px; }

.save-box { background: var(--sand); border-radius: 20px; padding: 34px 30px; margin-top: 28px; }
.save-box h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.save-box > p { color: var(--ink-60); margin-bottom: 18px; }
.save-form { display: grid; gap: 10px; }
.save-form .btn { justify-self: start; }

.result-footer { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.result-footer .mono { color: var(--ink-60); }

.hidden { display: none !important; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { min-height: auto; padding: 40px 0 56px; }
  .hero h1 { max-width: 22ch; }
  .hero-collage { height: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .hero-face { position: relative; width: auto; transform: none !important; }
  .hero-face img { height: 180px; }
}

/* ---------- Mobile: Vollbild-Ansichten, große Touch-Targets ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-header { padding: 12px 18px; }
  .logo { height: 26px; }
  .hero { padding: 28px 0 44px; }
  .hero-cta .btn { width: 100%; }
  .hero-collage {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -24px; padding: 4px 24px 8px; -webkit-overflow-scrolling: touch;
  }
  .hero-face { scroll-snap-align: start; }
  .hero-face img { height: 200px; }
  .nav-row { position: sticky; bottom: 0; background: var(--offwhite); padding: 14px 0; border-top: 1px solid var(--ink-12); }
  .nav-row .btn { flex: 1; }
  .week-row { grid-template-columns: 1fr; gap: 8px; }
  .price-box { padding: 32px 20px; }
  .save-form .btn { justify-self: stretch; width: 100%; }
  .footer-inner { flex-direction: column; gap: 28px; padding: 40px 24px 24px; }
  .footer-base { flex-direction: column; gap: 6px; }
}

/* ==========================================================
   Ergebnisseite v2 (Costa-Brief 2026-07-20)
   ========================================================== */
.result-h1 {
  font-size: clamp(28px, 4vw, 42px); font-weight: 900; letter-spacing: -.03em;
  line-height: 1.1; margin: 14px 0 14px; max-width: 20ch;
}
.result-intro .lede { font-size: 20px; color: var(--ink); font-weight: 600; margin-bottom: 16px; }
.intro-summary { color: var(--ink-60); font-size: 17px; margin-bottom: 26px; }

.team-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.team-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  background: var(--sand); border-radius: 14px; padding: 16px 20px;
}
.team-list .tl-role { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.team-list .tl-name { color: var(--copper); }

.why-team { margin: 64px 0; }
.why-team p { font-size: 18px; color: var(--ink); max-width: 62ch; }

/* Mitarbeiterkarten */
.emp-card {
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 20px;
  padding: 30px; margin-bottom: 22px;
}
.emp-card.primary { border-color: var(--copper); box-shadow: 0 20px 50px -30px rgba(166,108,74,.6); }
.emp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.emp-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sand); }
.emp-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.emp-id h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.emp-role { color: var(--copper); margin-top: 2px; }
.emp-num { margin-left: auto; font-size: 44px; color: var(--ink-12); line-height: 1; }
.primary-badge {
  display: inline-block; margin: 4px 0 4px; color: var(--copper);
  background: var(--sand); border-radius: 999px; padding: 5px 12px;
  font-size: 11px; letter-spacing: .12em;
}
.emp-card dl { margin-top: 14px; }
.emp-card dt { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--copper); margin-top: 18px; }
.emp-card dd { margin-top: 6px; color: var(--ink); }
.tasklist { padding-left: 20px; margin-top: 4px; }
.tasklist li { padding: 2px 0; }

.future { margin: 72px 0; background: var(--sand); border-radius: 22px; padding: 40px 36px; }
.future .section-h { margin-top: 0; }
.future-text { font-size: 20px; color: var(--ink); max-width: none; }

.principle { margin: 104px 0; }
.principle .section-h { text-align: center; margin-bottom: 44px; }
.principle-list {
  counter-reset: pr; list-style: none; padding: 0;
  display: grid; gap: 14px; max-width: 620px; margin: 0 auto;
}
.principle-list li {
  counter-increment: pr;
  display: flex; align-items: center; gap: 24px;
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 18px;
  padding: 26px 30px; font-size: 20px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em; transition: border-color .15s, transform .15s;
}
.principle-list li:hover { border-color: var(--copper); transform: translateY(-2px); }
.principle-list li::before {
  content: counter(pr, decimal-leading-zero);
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 34px; line-height: 1; color: var(--copper); min-width: 46px; flex-shrink: 0;
}

.just-start { margin: 72px 0; }
.just-start p { font-size: 18px; color: var(--ink-60); max-width: 62ch; }

.cta-final {
  background: var(--ink); color: var(--offwhite); border-radius: 24px;
  padding: 48px 40px; margin-top: 64px; text-align: center;
}
.cta-final h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 24px; }
.cta-sub { color: rgba(250,250,247,.7); margin-bottom: 14px; }
.deliverables { list-style: none; padding: 0; max-width: 360px; margin: 0 auto 28px; display: grid; gap: 10px; text-align: left; }
.deliverables li { position: relative; padding-left: 30px; color: var(--offwhite); font-size: 16px; }
.deliverables li::before {
  content: "✓"; position: absolute; left: 4px; top: 0; color: var(--copper); font-weight: 800;
}
.invest-label { color: rgba(250,250,247,.55); margin-bottom: 4px; }
.cta-final .price { font-size: 52px; color: var(--offwhite); margin: 0 0 26px; }
.cta-final .btn.primary { background: var(--copper); color: #fff; }
.cta-final .btn.primary:hover { opacity: .9; text-decoration: none; }

.result-footer { margin-top: 40px; text-align: center; }

@media (max-width: 640px) {
  .team-list li { flex-direction: column; gap: 2px; }
  .future, .cta-final { padding: 32px 22px; }
  .emp-card { padding: 24px 20px; }
}

/* ---------- „Warum diese Fragen?" (Landing) ---------- */
.why-questions { padding: 88px 0; border-top: 1px solid var(--ink-12); background: var(--sand); }
.why-questions .story-lead { margin-bottom: 22px; }
.why-questions p { font-size: 18px; color: var(--ink-60); margin-bottom: 16px; max-width: 62ch; }
.why-questions .wq-lead { font-size: 21px; color: var(--ink); font-weight: 600; }

/* ---------- Mitarbeiter-Stepper (einzeln durchklicken) ---------- */
.member-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.member-tab {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid var(--ink-12); border-radius: 999px;
  padding: 5px 16px 5px 5px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--ink-60);
  transition: border-color .12s, color .12s, background .12s;
}
.member-tab img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.member-tab:hover { border-color: var(--copper); }
.member-tab.active { border-color: var(--ink); background: var(--sand); color: var(--ink); }
.member-count { color: var(--ink-60); margin: 12px 0 16px; }
.member-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.member-done { color: var(--copper); }

@media (max-width: 640px) {
  .member-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px -24px 4px; padding: 2px 24px 8px; }
  .member-tab { flex-shrink: 0; }
  .member-nav { flex-direction: column-reverse; align-items: stretch; }
  .member-nav .btn { width: 100%; }
}

/* ---------- Terminbuchung Cal.com-Modal ---------- */
.book-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.book-modal.hidden { display: none; }
.book-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.62); backdrop-filter: blur(3px); }
.book-panel {
  position: relative; z-index: 1; width: 100%; max-width: 940px;
  height: 86vh; max-height: 900px; background: #fff; border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 40px 90px -24px rgba(10,10,10,.6);
}
.book-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 16px 22px; border-bottom: 1px solid var(--ink-12);
  font-weight: 700; font-size: 16px;
}
.book-close {
  background: var(--sand); border: none; width: 42px; height: 42px; border-radius: 50%;
  font-size: 17px; line-height: 1; cursor: pointer; color: var(--ink); flex-shrink: 0;
}
.book-close:hover { background: var(--ink); color: var(--offwhite); }
.book-body { flex: 1; background: var(--offwhite); }
.book-body iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 640px) {
  .book-modal { padding: 0; }               /* Handy: Vollbild, kein kleines Modal */
  .book-panel { max-width: none; height: 100svh; max-height: none; border-radius: 0; }
  .book-head { padding: 14px 12px 14px 18px; }
}

.cta-note { margin-top: 14px; color: rgba(250,250,247,.55); text-transform: none; letter-spacing: .04em; }

/* ---------- Sprach-Umschalter + Legal ---------- */
.header-right { display: flex; align-items: center; gap: 14px; }
.lang-switch { display: inline-flex; border: 1.5px solid var(--ink-12); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--ink-60);
  transition: background .12s, color .12s;
}
.lang-switch button.active { background: var(--ink); color: var(--offwhite); }

.footer-link-btn {
  font-family: inherit; font-size: 15px; color: rgba(250,250,247,.82);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.footer-link-btn:hover { color: var(--offwhite); }

#legal-modal .book-panel { height: auto; max-height: 86vh; max-width: 620px; }
.legal-content { padding: 30px 32px; overflow-y: auto; max-height: calc(86vh - 66px); }
.legal-content p { margin-bottom: 14px; color: var(--ink); }
.legal-content p:last-child { margin-bottom: 0; }
.legal-status { color: var(--copper) !important; font-size: 14px; }
.legal-copy { color: var(--ink-60) !important; font-size: 13px; }

@media (max-width: 640px) {
  #legal-modal { padding: 18px; }
  #legal-modal .book-panel { height: auto; max-height: 90svh; border-radius: 18px; }
  .header-right { gap: 8px; }
  .header-tag { display: none; }   /* Platz sparen auf dem Handy */
}