/* ══════════════════════════════════════════
   INDEX.CSS – Styles nur für die Startseite
══════════════════════════════════════════ */

/* ── HERO ── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 120px 5% 80px; position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(71,151,243,.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(24,170,255,.1) 0%, transparent 55%),
    var(--warm-white);
}
.hero-content {
  position: relative; max-width: 600px;
  animation: heroIn .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(71,151,243,.12);
  border: 1px solid rgba(71,151,243,.25);
  color: var(--primary); padding: .35rem 1rem;
  border-radius: 30px; font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.hero-badge::before { content: '●'; font-size: .5rem; }
.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 500; line-height: 1.12;
  color: var(--heading); margin-bottom: 1.2rem;
}
.hero h1 em { font-style: italic; color: var(--primary); }
.hero p {
  font-size: 1.05rem; color: var(--text-light);
  line-height: 1.75; max-width: 480px; margin-bottom: 2.2rem;
}
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-image {
  position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
  width: min(42%, 500px);
  animation: heroImgIn 1.1s .2s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroImgIn {
  from { opacity: 0; transform: translateY(-40%) translateX(40px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.hero-card {
  border-radius: 24px; padding: 2.5rem;
  box-shadow: 0 20px 60px var(--shadow), 0 2px 12px rgba(0,0,0,.04);
  position: relative; overflow: hidden;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.hero-card-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,30,50,0) 35%, rgba(20,30,50,.82) 100%);
}
.hero-card > .hero-card-bg { position: absolute; inset: 0; z-index: 0; }
.hero-card > .card-icon,
.hero-card > h3,
.hero-card > p { position: relative; z-index: 1; }
.card-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 1.2rem;
}
.hero-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: #fff; margin-bottom: .5rem; }
.hero-card p { font-size: .9rem; color: rgba(255,255,255,.85); line-height: 1.65; }

/* ── LEISTUNGEN ── */
#leistungen { background: var(--warm-white); }
.leistungen-header { text-align: center; margin-bottom: 4rem; }
.leistungen-header .section-sub { margin: 0 auto; }
.leistungen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.leistung-card {
  background: #fff; border-radius: 20px; padding: 2rem;
  border: 1px solid var(--sand); transition: transform .3s, box-shadow .3s;
  flex: 1 1 260px;
  max-width: 320px;
}
.leistung-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px var(--shadow); }
.leistung-icon {
  font-size: 2rem; margin-bottom: 1rem; width: 52px; height: 52px;
  background: var(--cream); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.leistung-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--heading); margin-bottom: .5rem; }
.leistung-card p { font-size: .88rem; color: var(--text-light); line-height: 1.7; }

/* ── ÜBER UNS ── */
#ueber { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.ueber-visual { position: relative; }
.ueber-img-box {
  background: linear-gradient(135deg, rgba(71,151,243,.3) 0%, var(--primary) 100%);
  border-radius: 32px; aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; box-shadow: 0 24px 64px rgba(71,151,243,.25);
  overflow: hidden; position: relative;
}
.ueber-floating-badge {
  position: absolute; bottom: -20px; right: -20px;
  background: #fff; border-radius: 20px; padding: 1.2rem 1.5rem;
  box-shadow: 0 12px 40px var(--shadow); text-align: center;
}
.ueber-floating-badge strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--primary); }
.ueber-floating-badge span { font-size: .78rem; color: var(--text-light); }
.ueber-text .section-sub { margin-bottom: 2rem; }
.ueber-list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.ueber-list li {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: .92rem; color: var(--text-light); line-height: 1.6;
}
.ueber-list li::before {
  content: '✓'; min-width: 24px; height: 24px;
  background: rgba(71,151,243,.12); color: var(--primary);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; margin-top: .1rem;
}

/* ── TEAM ── */
#team { background: var(--warm-white); text-align: center; }
.team-header { margin-bottom: 3rem; }
.team-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; color: var(--heading);
  margin-bottom: 1.8rem; font-weight: 500;
}
.team-subtitle span { display: inline-block; border-bottom: 2px solid var(--primary); padding-bottom: .2rem; }
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto 4rem;
}
.team-card {
  background: #fff; border-radius: 24px; padding: 2rem 1.2rem;
  border: 1px solid var(--sand); transition: transform .3s, box-shadow .3s; text-align: center;
  flex: 0 0 220px;
  max-width: 220px;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px var(--shadow); }
.team-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sand), var(--primary));
  margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; overflow: hidden;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--heading); margin-bottom: .25rem; }
.team-card p { font-size: .8rem; color: var(--primary); font-weight: 600; }
.staff-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}
.staff-card {
  background: #fff; border-radius: 18px; padding: 1.3rem 1rem;
  border: 1px solid var(--sand); text-align: center;
  transition: transform .3s, box-shadow .3s;
  flex: 0 0 150px;
  max-width: 150px;
}
.staff-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--shadow); }
.staff-emoji {
  font-size: 2rem; width: 56px; height: 56px;
  background: linear-gradient(135deg, rgba(71,151,243,.15), rgba(24,170,255,.1));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto .7rem;
}
.staff-card h4 { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: var(--heading); margin-bottom: .2rem; }
.staff-card p { font-size: .75rem; color: var(--text-light); font-weight: 500; }

/* ── ÖFFNUNGSZEITEN ── */
#zeiten { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.zeiten-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.zeiten-table tr { border-bottom: 1px solid var(--sand); }
.zeiten-table td { padding: .9rem .5rem; font-size: .92rem; }
.zeiten-table td:first-child { color: var(--text-light); }
.zeiten-table td:last-child { color: var(--heading); font-weight: 600; text-align: right; }
.zeiten-table tr.closed td { color: var(--sand); }
.kontakt-box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 28px; padding: 2.5rem; color: #fff;
}
.kontakt-box h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; margin-bottom: 1.5rem; }
.kontakt-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.kontakt-item .icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(255,255,255,.15); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.kontakt-item p { font-size: .88rem; opacity: .9; line-height: 1.6; }
.kontakt-item strong { display: block; font-size: .95rem; opacity: 1; margin-bottom: .1rem; }

/* ── RESPONSIVE INDEX ── */
@media (max-width: 1024px) {
  .hero { padding: 100px 5% 60px; min-height: auto; }
  .hero-image { display: none; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: .95rem; }
  .hero-buttons { flex-direction: column; gap: .8rem; }
  .btn-primary, .btn-secondary { text-align: center; }

  /* Leistungen: einspaltig gestapelt und zentriert (Karten-Look wie am Desktop) */
  .leistungen-grid { flex-direction: column; align-items: center; gap: 1rem; }
  .leistung-card { width: 100%; max-width: 480px; flex: none; }

  #ueber { grid-template-columns: 1fr; gap: 2.5rem; }
  .ueber-img-box { aspect-ratio: auto; width: 100%; height: 220px; border-radius: 20px; }
  .ueber-floating-badge { bottom: -15px; right: -10px; }

  /* Team & Praxisteam: echtes Grid statt unkontrolliertem Flex-Umbruch */
  .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 480px; }
  .team-card { max-width: none; flex: none; }
  .staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; max-width: 560px; }
  .staff-card { max-width: none; flex: none; }

  #zeiten { grid-template-columns: 1fr; gap: 2.5rem; }
  .zeiten-table td { font-size: .82rem; padding: .7rem .3rem; }
  .kontakt-box { padding: 1.8rem; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: 1.6rem; }
}

/* Tablet im Querformat (z.B. iPad 1024px breit, aber niedrig) –
   nutzt die zusätzliche Breite mit mehrspaltigen Layouts statt einer schmalen Einzelspalte. */
@media (max-width: 1024px) and (min-width: 800px) and (orientation: landscape) {
  .leistungen-grid { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .leistung-card { width: auto; max-width: 320px; flex: 1 1 280px; }
  #ueber { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .ueber-img-box { height: 260px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); max-width: 720px; }
  .staff-grid { grid-template-columns: repeat(4, 1fr); max-width: 720px; }
  #zeiten { grid-template-columns: 1fr 1fr; gap: 3rem; }
}