/* ============================================================
   STYLE.CSS — Gruppenpraxis Dr. Ebrahimi & Dr. Sav
   ============================================================

   TABLE OF CONTENTS
   -----------------
   1.  DESIGN TOKENS (colors, spacing, fonts, radii)
   2.  DARK MODE TOKENS
   3.  RESET & BASE
   4.  LAYOUT UTILITIES (.container, .two-col, etc.)
   5.  HEADER & NAVIGATION
   6.  HERO SECTION
   7.  INFO STRIP (Adresse, Öffnungszeiten)
   8.  CARDS & INFO BOXES
   9.  TEAM SECTION
   10. CONTACT & MAP BOX
   11. FOOTER
   12. MODAL (Rezeptbox)
   13. MOBILE BOTTOM BAR
   14. ANIMATIONS
   15. HOVER EFFECTS
   16. RESPONSIVE — tablet (≤960px)
   17. RESPONSIVE — mobile (≤480px)
   18. REDUCED MOTION
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root,
[data-theme="light"] {
  /* --- Typography scale --- */
  --text-xs:   clamp(0.8125rem, 0.75rem  + 0.25vw, 0.9375rem);
  --text-sm:   clamp(1.05rem,   0.975rem + 0.4vw,  1.2rem);
  --text-base: clamp(1.175rem,  1.1rem   + 0.4vw,  1.35rem);
  --text-lg:   clamp(1.25rem,   1.1rem   + 0.75vw, 1.625rem);
  --text-xl:   clamp(1.625rem,  1.3rem   + 1.25vw, 2.5rem);
  --text-2xl:  clamp(2.125rem,  1.3rem   + 2.5vw,  3.75rem);

  /* --- Spacing scale --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* --- Colors --- */
  --color-bg:               #f7f6f2;
  --color-surface:          #fbfaf7;
  --color-surface-2:        #f2efea;
  --color-border:           #d8d2ca;
  --color-divider:          #e5e0d9;
  --color-text:             #26231f;
  --color-text-muted:       #716d66;
  --color-text-faint:       #a39f97;
  --color-primary:          #7a9b6e;   /* <-- main accent: change this to rebrand */
  --color-primary-hover:    #698a5d;
  --color-primary-highlight:#e4ede1;
  --color-text-inverse:     #ffffff;

  /* --- Shadows --- */
  --shadow-sm: 0 2px  10px rgba(38,35,31,.05);
  --shadow-md: 0 12px 32px rgba(38,35,31,.09);

  /* --- Border radii --- */
  --radius-sm:   .375rem;
  --radius-md:   .75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* --- Layout --- */
  --content-wide: 1180px;   /* max page width */

  /* --- Fonts (loaded via assets/fonts/fonts.css) --- */
  --font-body:    'Manrope', Arial, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  /* --- Transition --- */
  --transition: 180ms cubic-bezier(.16,1,.3,1);
}


/* ============================================================
   2. DARK MODE TOKENS
   ============================================================ */

[data-theme="dark"] {
  --color-bg:               #171614;
  --color-surface:          #1d1b18;
  --color-surface-2:        #26231f;
  --color-border:           #3a352f;
  --color-divider:          #2f2b26;
  --color-text:             #ece7e0;
  --color-text-muted:       #b5aea5;
  --color-text-faint:       #8a847b;
  --color-primary:          #96b88a;
  --color-primary-hover:    #aac79f;
  --color-primary-highlight:#2a3328;
  --color-text-inverse:     #151311;
  --shadow-sm: 0 2px  10px rgba(0,0,0,.20);
  --shadow-md: 0 12px 32px rgba(0,0,0,.35);
}

[data-theme="dark"] .card,
[data-theme="dark"] .info-box,
[data-theme="dark"] .contact-card {
  background: rgba(30, 27, 23, 0.92);
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

*, :before, :after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.75; color: var(--color-text); background-color: var(--color-bg); }

#site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.site-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.04);
  transition: opacity 2s ease, filter 2s ease, transform 2s ease;
}
.site-bg-slide.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}
img, svg { display: block; max-width: 100%; height: auto; }
a    { text-decoration: none; color: inherit; transition: all var(--transition); }
button { font: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Skip-to-content link (accessibility) */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--color-surface); padding: .75rem 1rem; z-index: 1000; }

/* Headings */
h1, h2 { font-family: var(--font-display); line-height: 1.05; }
h2 { font-family: var(--font-body); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
h1     { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: var(--space-4); }
.muted { color: var(--color-text-muted); }
.eyebrow {
  font-size: var(--text-sm);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 800;
  margin-bottom: var(--space-3);
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

.container {
  width: 62.5%;     /* tile takes 5/8 of viewport → 18.75% free on each side = 30% of tile width */
  margin-inline: auto;
}

section { padding: clamp(3rem, 7vw, 6rem) 0; }

.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-10); }
.section-head h2 { font-size: var(--text-xl); }
.section-head p  { color: var(--color-text); max-width: 65ch; font-weight: 600; text-shadow: none; }

/* Scroll offset so sticky header doesn't cover sections */
section[id], div[id] { scroll-margin-top: var(--header-h, 200px); }

.two-col    { display: grid; grid-template-columns: 1.1fr .9fr;  gap: var(--space-10); align-items: start; }
.card-grid  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); }
.team-grid  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
.highlight  { background: rgba(242, 239, 234, 0.7); }

/* Generic button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .9rem 1.2rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: .02em;
}
.btn-primary  { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-secondary{ background: var(--color-surface); border: 1px solid var(--color-border); }
.btn-primary:hover { background: var(--color-primary-hover); }


/* ============================================================
   5. HEADER & NAVIGATION
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .container {
  width: min(calc(100% - 3rem), 1600px);
}

.header-top-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}
.site-header.scrolled .header-top-wrap {
  grid-template-rows: 0fr;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  overflow: hidden;
  transition: opacity .4s ease, transform .4s ease;
  opacity: 1;
  transform: translateY(0);
}
.site-header.scrolled .header-row {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Logo / brand area */
.brand       { display: flex; align-items: center; gap: var(--space-6); }
.brand-mark  { width: 220px; height: 220px; color: var(--color-primary); }
.brand-image { object-fit: contain; border-radius: 1.5rem; background: white; padding: .4rem; box-shadow: var(--shadow-sm); }

.brand-copy .brand-names-full {
  display: block;
  font-size: 2rem;
  letter-spacing: .06em;
  line-height: 1.15;
  font-weight: 800;
}
.brand-names-short { display: none; }
.brand-tagline-nowrap { white-space: nowrap; }
.brand-copy span {
  display: block;
  font-size: var(--text-base);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: .55rem;
  line-height: 1.15;
}

/* Header action pills */
.top-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
}
.top-actions .top-pill:first-child {
  grid-row: 1 / 3;
  align-self: center;
  justify-content: center;
  font-size: 1.4rem;
  padding: .65rem 1.1rem;
  min-height: unset;
  background: #a5bda0;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
[data-theme="dark"] .top-actions .top-pill:first-child {
  background: #3d5438;
  color: var(--color-text);
}
.top-actions .top-pill:first-child:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.top-pill,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 700;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
}
.top-pill.secondary {
  background: #cfdacb;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
  min-width: 230px;
  white-space: nowrap;
  justify-content: center;
}
[data-theme="dark"] .top-pill.secondary {
  background: #2a3828;
  color: var(--color-text);
}

[data-theme="dark"] .top-info-card {
  background: rgba(29, 27, 24, 0.92);
}
.top-pill.secondary:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.theme-toggle { padding: .85rem; width: 44px; justify-content: center; }
.top-pill:hover,
.theme-toggle:hover { background: var(--color-primary-hover); }

/* Main nav bar */
.main-nav   { border-top: 1px solid var(--color-divider); }
.nav-list   {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  list-style: none;
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}
.nav-list a {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: .5rem .9rem;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  border: 1px solid transparent;
}
.nav-list a:hover,
.nav-list a.active {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  border-color: var(--color-border);
}

/* Hamburger (shown only on mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: .6rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.is-open span:nth-child(1) { transform: rotate(45deg)  translate(5px,5px);  }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0);              }
.hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }




.parallax-banner {
  width: 100%;
  line-height: 0;
}
.parallax-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   6. HERO SECTION + SLIDESHOW
   ============================================================ */

/* Mobile-only practice name banner */
.mobile-brand-strip {
  display: none;
}

.hero {
  position: relative;
  min-height: 0;
  display: grid;
  align-items: end;
  overflow: hidden;
}

/* Team section — same slideshow pattern as hero */
.team-section {
  position: relative;
  min-height: 60vh;
  padding: clamp(3rem, 7vw, 6rem) 0;
  overflow: hidden;
}

/* Ensure section content sits above the slides */
.hero .container,
.team-section .container { position: relative; z-index: 1; }

/* ── Slideshow: background container ── */
.slideshow-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ── Slideshow: each individual slide ──
   Change fade speed here (transition: opacity/filter Xs) */
.slideshow-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.04);
  transition: opacity 2s ease-in-out, filter 2s ease-in-out, transform 2s ease-in-out;
}
.slideshow-slide.is-active { opacity: 1; filter: blur(0px); transform: scale(1); }

/* ── Slideshow: dark overlay for text legibility ── */
.slideshow-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Hero overlay: subtle gradient */
.hero .slideshow-bg::after {
  background: linear-gradient(0deg, rgba(26,24,21,.52), rgba(26,24,21,.18));
}

/* Team overlay: uniform dark */
.team-section .slideshow-bg::after {
  background: transparent;
}

/* Fade gradient at the very bottom of the hero */
.hero::after {
  content: none;
}

.hero-panel {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(10px);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  max-width: 520px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  transform: translateY(0);
  animation: floatIn .9s ease both;
}

.hero p   { max-width: 58ch; color: var(--color-text-muted); }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }


/* ============================================================
   7. INFO STRIP (Adresse & Öffnungszeiten)
   ============================================================ */

.top-info-strip { background: transparent; }

.top-info-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-4);
  padding: var(--space-6) 0 0;
  position: relative;
  align-items: stretch;
}

.top-info-card {
  background: rgba(247, 246, 242, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 1.75rem;
  padding: var(--space-6);
  box-shadow: 0 18px 40px rgba(38,35,31,.08);
  backdrop-filter: blur(8px);
}

/* Opening-hours grid inside the card */
.times {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.times li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.times li:last-child { border-bottom: 0; padding-bottom: 0; }

.compact-times { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem 1.25rem; margin-top: .35rem; }
.compact-times li { border-bottom: 0; padding-bottom: 0; }


/* ============================================================
   8b. EVENTS GRID
   ============================================================ */

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
  min-width: 0;
  overflow: hidden;
}

.event-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: rgba(247,246,242,0.60);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}

[data-theme="dark"] .event-card {
  background: rgba(30, 27, 23, 0.92);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  padding: .4rem .5rem;
  line-height: 1.1;
  flex-shrink: 0;
}
.event-day   { font-size: 1.5rem; font-weight: 800; }
.event-month { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.event-body { min-width: 0; flex: 1; }
.event-body h3 { font-size: var(--text-sm); margin-bottom: .25rem; overflow-wrap: break-word; }

/* ── Flyer card ── */
.flyer-card {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 3px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #96b88a, #e8c46a, #e07b7b, #7ab3d4) border-box;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  padding: 0;
}
[data-theme="dark"] .flyer-card {
  background:
    linear-gradient(#1d1b18, #1d1b18) padding-box,
    linear-gradient(135deg, #96b88a, #e8c46a, #e07b7b, #7ab3d4) border-box;
}

/* Decorative confetti dots */
.flyer-deco { position: absolute; inset: 0; pointer-events: none; }
.flyer-dot  { position: absolute; border-radius: 50%; opacity: .55; }
.fd1 { width: 120px; height: 120px; background: #5cb85c; top: -30px; right: 60px; }
.fd2 { width:  80px; height:  80px; background: #f0ad4e; bottom: -20px; left: 40px; }
.fd3 { width:  60px; height:  60px; background: #e05555; top: 20px; left: -15px; }
.fd4 { width:  90px; height:  90px; background: #3a9fd4; bottom: -30px; right: 20px; }
.fd5 { width:  40px; height:  40px; background: #a855d4; top: 50%; left: 45%; }

.flyer-ribbon {
  background: linear-gradient(90deg, #96b88a, #7ab3d4);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .4rem 1.5rem;
  text-align: center;
}

.flyer-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
}

.flyer-title-wrap { flex: 1 1 180px; }
.flyer-super {
  font-size: var(--text-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e07b7b;
  font-weight: 800;
  margin-bottom: .2rem;
}
.flyer-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 !important;
  background: linear-gradient(135deg, #96b88a, #7ab3d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.flyer-date-badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, #e8c46a, #e07b7b);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: .75rem 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(232,196,106,.4);
}
.flyer-date-day  { font-size: 2.8rem; font-weight: 900; line-height: 1; }
.flyer-date-rest { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.flyer-date-time {
  font-size: .8rem; font-weight: 800; letter-spacing: .08em;
  border-left: 2px solid rgba(255,255,255,.5);
  padding-left: .6rem; margin-left: .2rem;
}

.flyer-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
  flex: 1 1 220px;
}
.flyer-highlights li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--text-sm);
  font-weight: 500;
}
.flyer-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: #96b88a;
}

@media (max-width: 600px) {
  .flyer-body { padding: var(--space-5) var(--space-4); gap: var(--space-4); }
  .flyer-date-badge { width: 100%; justify-content: center; }
}



/* ============================================================
   8. CARDS & INFO BOXES
   ============================================================ */

.card,
.info-box,
.contact-card {
  background: rgba(247, 246, 242, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  overflow-wrap: break-word;
  word-break: break-word;
}
.card h3,
.info-box h3,
.contact-card h3 { margin-bottom: var(--space-3); font-size: 1.3rem; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }

.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.doctor-row {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}

.feature-list,
.contact-list { list-style: none; display: grid; gap: var(--space-3); }
.feature-list li,
.contact-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.feature-list li:last-child,
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list a { color: var(--color-text); }


/* ============================================================
   9. TEAM SECTION
   ============================================================ */

.person-card {
  background: rgba(247, 246, 242, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.person-card--centered {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - var(--space-3));
}
.portrait {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #dfe6ee, #eef2f6);
  overflow: hidden;
  position: relative;
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38,35,31,.45) 0%, rgba(38,35,31,.05) 60%);
  pointer-events: none;
}
.portrait svg      { width: 84px; height: 84px; opacity: .8; }
.person-content    { padding: var(--space-6); }
.person-role {
  font-size: var(--text-sm);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 800;
  margin-bottom: var(--space-2);
}
.person-content h3 { font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-1); }


/* ============================================================
   10. CONTACT & MAP BOX
   ============================================================ */

.contact-layout { display: grid; grid-template-columns: 1fr .9fr; gap: var(--space-6); }
.kontakt-grid   { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); text-align: center; }

.oeffnungszeiten-woche {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  text-align: center;
}

.map-box {
  min-height: 100%;
  background: linear-gradient(135deg, var(--color-primary-highlight), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
}
.map-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
.map-grid span {
  display: block;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.4);
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.35);
}


/* ============================================================
   11. FOOTER
   ============================================================ */

footer { padding: var(--space-8) 0 var(--space-12); }
.footer-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(247,246,242,.8);
}


/* ============================================================
   12. MODAL (Rezeptbox, Vitamin C, Hausapotheke)
      — JS in assets/main.js toggles .is-open on .modal-overlay
      — .modal-overlay.is-open { display: flex } (see below)
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(38,35,31,.55);
  backdrop-filter: blur(4px);
}
.modal-overlay.is-open { display: flex; }

.modal-box {
  background: var(--color-surface);
  border-radius: 1.5rem;
  box-shadow: 0 24px 64px rgba(38,35,31,.25);
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  width: 100%;
  padding: 2.5rem;
  position: relative;
  animation: floatIn .3s ease both;
}

.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin: 0 auto var(--space-4);
  display: none;
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.modal-label {
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 800;
  margin-bottom: .5rem;
}

.modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 1rem;
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  letter-spacing: .01em;
}

.modal-body   { color: var(--color-text); line-height: 1.7; margin-bottom: 1rem; }

.modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.modal-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.modal-list li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: .1em;
  font-size: .9em;
}
.modal-list li span { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.modal-list a { color: var(--color-primary); font-weight: 700; white-space: nowrap; }

.modal-note {
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: 1rem;
  background: var(--color-surface-2);
  border-radius: .75rem;
  border: 1px solid var(--color-border);
}
.modal-note a { color: var(--color-primary); font-weight: 700; white-space: nowrap; }

.modal-confirm { width: 100%; margin-top: 1.5rem; justify-content: center; }


/* ============================================================
   13. MOBILE BOTTOM BAR
      — hidden on desktop, shown on mobile via media query
   ============================================================ */

.mobile-cta-bar { display: none; }

.mcta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .5rem;
  border-radius: var(--radius-md);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  min-height: 52px;
  transition: all var(--transition);
}
.mcta-btn:hover              { color: var(--color-primary); background: var(--color-primary-highlight); }
.mcta-btn.primary-cta        { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.mcta-btn.primary-cta:hover  { background: var(--color-primary-hover); }


/* ============================================================
   14. ANIMATIONS
   ============================================================ */

@keyframes floatIn    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }


/* ============================================================
   15. HOVER EFFECTS
   ============================================================ */

.card,
.info-box,
.contact-card,
.person-card,
.top-info-card {
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), border-color var(--transition);
}
.card:hover,
.info-box:hover,
.contact-card:hover,
.person-card:hover,
.top-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(38,35,31,.11);
  background: var(--color-primary-highlight) !important;
  border-color: var(--color-primary);
}


/* ============================================================
   16. RESPONSIVE — tablet (≤ 960px)
   ============================================================ */

@media (max-width: 960px) {
  .container            { width: calc(100% - 2rem); }

  .two-col,
  .contact-layout,
  .kontakt-grid,
  .top-info-grid        { grid-template-columns: 1fr !important; }
  .team-grid,
  .card-grid,
  .staff-grid           { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .doctor-row           { flex-wrap: wrap; }
  .doctor-row .person-card { flex: 1 1 100% !important; }
  .leistungen-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .oeffnungszeiten-woche { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-3); }
  .oe-mittwoch           { grid-column: 1 / -1 !important; justify-self: center; }
  .person-card          { width: 100% !important; }
  .person-card--centered { width: 100% !important; justify-self: stretch !important; grid-column: auto !important; }

  .hero                 { min-height: 52vh; }
  .brand-mark           { width: 140px; height: 140px; }
  .brand                { gap: var(--space-4); }
  .brand-copy           { min-width: 0; flex-shrink: 1; }
  .brand-copy > span    { display: none; }
  .brand-names-full     { display: none; }
  .brand-names-short    { display: block; font-size: 1rem; white-space: nowrap; }
  .brand-tagline-nowrap { white-space: normal; }

  .mobile-brand-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .3rem;
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(6px);
  }
  [data-theme="dark"] .mobile-brand-strip {
    background: rgba(30,27,23,0.88);
  }
  .mobile-brand-strip strong {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text);
    line-height: 1.25;
  }
  .mobile-brand-strip span {
    font-size: var(--text-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .map-box              { min-height: auto; }

  /* iOS Safari: background-attachment:fixed is not supported and causes glitches */
  body { background-attachment: scroll; }

  /* Header: hide pills, show hamburger */
  .top-actions           { display: flex; align-items: center; }
  .top-actions .top-pill { display: none; }
  .hamburger             { display: flex; }

  /* Secondary pills in content cards: full width, text wraps */
  .top-pill.secondary    { min-width: 0; white-space: normal; width: 100%; word-break: break-all; justify-content: center; padding: 1rem 1.4rem; font-size: 1rem; }

  /* Collapsible nav */
  .main-nav              { display: none; }
  .main-nav.is-open      { display: block; animation: slideDown .2s ease; }
  .nav-list              { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .nav-list li           { width: 100%; }
  .nav-list a {
    display: block;
    padding: var(--space-4);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--color-divider);
    letter-spacing: .06em;
    border-radius: 0;
    border-left: 0; border-right: 0; border-top: 0;
  }
  .nav-list li:last-child a { border-bottom: none; }

  /* Sticky bottom CTA bar */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mobile-cta-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    box-shadow: 0 -4px 24px rgba(38,35,31,.1);
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    gap: .4rem;
  }

  section[id], div[id] { scroll-margin-top: 148px; }
  .section-head        { margin-bottom: var(--space-6); }
}


/* ============================================================
   17. RESPONSIVE — mobile (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {
  .brand-mark            { width: 120px; height: 120px; }
  .brand                 { gap: var(--space-3); min-width: 0; flex-shrink: 1; }
  .brand-copy            { display: none; }
  .header-row            { gap: var(--space-3); }
  .brand-copy span       { letter-spacing: .1em; font-size: var(--text-xs); }
  .brand-tagline-nowrap  { white-space: normal; }

  .hero                  { min-height: 38vh; }

  .hero-panel {
    margin-inline: 0;
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    max-width: 100%;
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  }
  .hero-panel h1             { font-size: 1.15rem; margin-bottom: .4rem; }
  .hero-panel .eyebrow       { font-size: .75rem; margin-bottom: .3rem; }
  .hero-panel > p            { display: none; }
  .hero-cta              { flex-direction: column; margin-top: .6rem; gap: .4rem; }
  .hero-cta .btn         { width: 100%; }

  /* Öffnungszeiten: stack badge below opening hours */
  .oeffnungszeiten-inner { flex-direction: column !important; align-items: stretch !important; }
  .oeffnungszeiten-badge {
    border-left: none !important;
    border-top: 1px solid var(--color-divider) !important;
    padding: var(--space-4) 0 0 !important;
    align-items: center !important;
  }

  /* Opening hours: allow times to wrap naturally */
  #oeffnungszeiten .times { max-width: none !important; }
  #oeffnungszeiten .times li { flex-wrap: wrap; }
  #oeffnungszeiten .times li strong { min-width: 100px !important; }

  .map-grid              { grid-template-columns: repeat(2,1fr); }
  .contact-list a        { overflow-wrap: break-word; word-break: break-all; }

  /* Kontakt opening hours: 1 column on small phones */
  .oeffnungszeiten-woche { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .oe-mittwoch           { grid-column: 1 / -1; justify-self: center; }

  /* Cards: less padding on small phones for more content width */
  .top-info-card         { padding: var(--space-4); }
  .event-card            { padding: var(--space-3); gap: var(--space-3); }
  .staff-grid            { grid-template-columns: 1fr !important; }
  .leistungen-grid       { grid-template-columns: 1fr !important; }


  /* Modal: less padding on small phones */
  .modal-box             { padding: 1.5rem; }

  /* Modal as bottom sheet on mobile */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-box {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 1.5rem 1.5rem 0 0;
    animation: slideUpSheet .3s ease both;
  }
  .modal-handle { display: block; }

  section[id], div[id]   { scroll-margin-top: 95px; }
  .section-head          { margin-bottom: var(--space-5); }
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ============================================================
   18. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *    { transition: none !important; animation: none !important; }
}