/*
Theme Name: L'epilation auf der Koe
Theme URI: https://blush-revamp-lab.lovable.app/
Description: Pixel-genaue WordPress Block Theme Replikation der Lovable-Seite
Version: 1.0.0
Author: L'epilation auf der Koe
Text Domain: lepilation
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (aus Lovable index.css)
   ============================================================ */
:root {
  --background: #FFFFFF;
  --foreground: #333333;
  --primary: #DFB0A7;
  --primary-foreground: #FFFFFF;
  --secondary: #F7F7F7;
  --secondary-foreground: #737373;
  --muted: #F5F5F5;
  --muted-foreground: #717374;
  --accent: #DFB0A7;
  --accent-foreground: #333333;
  --border: #E5E5E5;
  --input: #E5E5E5;
  --ring: #DFB0A7;
  --destructive: #EF4444;
  --radius: 0.5rem;

  /* Font Stacks */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* ============================================================
   1. TOPBAR
   ============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--primary);
  padding: 8px 0; /* py-2 */
}

.topbar__inner {
  max-width: 1280px; /* max-w-7xl */
  margin: 0 auto;
  padding: 0 24px; /* px-6 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 16px; /* gap-4 */
  font-size: 12px; /* text-xs */
  color: var(--primary-foreground);
}

.topbar__link {
  display: flex;
  align-items: center;
  gap: 4px; /* gap-1 */
  color: var(--primary-foreground);
}

.topbar__separator {
  opacity: 0.5;
}

/* Hide TopBar on mobile */
@media (max-width: 639px) {
  .topbar {
    display: none;
  }
}

/* ============================================================
   2. NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9); /* bg-background/90 */
  backdrop-filter: blur(12px); /* backdrop-blur-md */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 640px) {
  .navbar {
    top: 32px; /* sm:top-[32px] – under TopBar */
  }
}

.navbar__inner {
  max-width: 1280px; /* max-w-7xl */
  margin: 0 auto;
  padding: 0 24px; /* px-6 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 112px; /* h-28 */
}

@media (min-width: 1024px) {
  .navbar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* lg:grid-cols-3 */
  }
}

/* Logo */
.navbar__logo img {
  height: 80px; /* h-20 */
  width: auto;
}

/* Desktop Navigation (centered) */
.navbar__nav {
  display: none;
}

@media (min-width: 1024px) {
  .navbar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px; /* gap-8 */
    list-style: none;
  }
}

.navbar__nav-link {
  font-family: var(--font-display);
  font-size: 14px; /* text-sm */
  color: var(--muted-foreground);
}

/* Dropdown */
.navbar__dropdown {
  position: relative;
}

.navbar__dropdown-trigger {
  font-family: var(--font-display);
  font-size: 14px; /* text-sm */
  color: var(--muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px; /* gap-1 */
}

.navbar__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 256px; /* w-64 */
  padding-top: 8px; /* pt-2 */
  z-index: 50;
}

.navbar__dropdown-list {
  background: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
  border-radius: 0.375rem; /* rounded-md */
  padding: 8px 0; /* py-2 */
  list-style: none;
}

.navbar__dropdown-item {
  font-family: var(--font-display);
  display: block;
  padding: 8px 16px; /* px-4 py-2 */
  font-size: 14px; /* text-sm */
  color: var(--muted-foreground);
}

/* Desktop CTA area */
.navbar__cta {
  display: none;
}

@media (min-width: 1024px) {
  .navbar__cta {
    display: flex;
    align-items: center;
    gap: 12px; /* gap-3 */
    justify-content: flex-end;
  }
}

.navbar__cta-btn {
  font-family: var(--font-sans);
  font-size: 12px; /* text-xs */
  text-transform: uppercase;
  letter-spacing: 0.2em; /* tracking-[0.2em] */
  padding: 8px 20px; /* px-5 py-2 */
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
  margin-left: 8px; /* ml-2 */
  cursor: pointer;
}

/* Mobile toggle */
.navbar__mobile-area {
  display: flex;
  align-items: center;
  gap: 16px; /* gap-4 */
}

@media (min-width: 1024px) {
  .navbar__mobile-area {
    display: none;
  }
}

.navbar__hamburger {
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
  padding: 0;
}

.navbar__mobile-cta {
  display: none;
}

@media (min-width: 640px) {
  .navbar__mobile-cta {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 8px 20px;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
  }
}

.navbar__mobile-social {
  display: none;
}

@media (min-width: 640px) {
  .navbar__mobile-social {
    display: block;
    color: var(--primary);
  }
}

/* ============================================================
   MOBILE SIDEBAR (in header.html via JS)
   ============================================================ */
/* Styles in custom-animations.css */

.mobile-sidebar__close {
  position: absolute;
  top: 20px; /* top-5 */
  right: 20px; /* right-5 */
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
}

.mobile-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 24px; /* px-6 pt-5 pb-6 */
}

.mobile-sidebar__logo img {
  height: 48px; /* h-12 */
  width: auto;
  margin-bottom: 8px; /* mb-2 */
}

.mobile-sidebar__desc {
  font-size: 12px; /* text-xs */
  color: var(--muted-foreground);
  line-height: 1.625; /* leading-relaxed */
  margin-bottom: 16px; /* mb-4 */
}

.mobile-sidebar__nav {
  margin-bottom: 16px; /* mb-4 */
  list-style: none;
}

.mobile-sidebar__nav-link {
  font-family: var(--font-display);
  font-size: 14px; /* text-sm */
  color: var(--foreground);
  display: block;
  padding: 8px 0; /* py-2 */
  border-bottom: 1px solid rgba(229, 229, 229, 0.4); /* border-border/40 */
}

.mobile-sidebar__sub-item {
  font-family: var(--font-display);
  font-size: 12px; /* text-xs */
  color: var(--muted-foreground);
  display: block;
  padding: 6px 0; /* py-1.5 */
}

.mobile-sidebar__sub-list {
  padding-left: 16px; /* pl-4 */
  padding-top: 6px;
  padding-bottom: 6px;
  list-style: none;
}

.mobile-sidebar__hours-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--foreground);
  margin-bottom: 8px;
}

.mobile-sidebar__hours {
  margin-bottom: 16px;
}

.mobile-sidebar__hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}

.mobile-sidebar__contact {
  margin-bottom: 16px;
}

.mobile-sidebar__contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.mobile-sidebar__contact-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

.mobile-sidebar__divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin-bottom: 12px;
}

.mobile-sidebar__social {
  display: flex;
  align-items: center;
  gap: 20px; /* gap-5 */
}

.mobile-sidebar__social a {
  color: var(--muted-foreground);
}

.mobile-sidebar__bottom {
  padding: 16px 24px; /* px-6 py-4 */
  border-top: 1px solid rgba(229, 229, 229, 0.4);
}

.mobile-sidebar__bottom-btn {
  font-family: var(--font-sans);
  display: block;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 12px 20px; /* px-5 py-3 */
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
  width: 100%;
}

/* ============================================================
   3. HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* bg-black/30 */
}

.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 32px; /* px-8 */
  max-width: 512px; /* max-w-lg */
  margin: 0 auto;
}

.hero__title {
  font-size: 36px; /* text-4xl */
  font-weight: 300; /* font-light */
  color: #FFFFFF;
  margin-bottom: 24px; /* mb-6 */
  line-height: 1.25; /* leading-tight */
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 48px; /* md:text-5xl */
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 60px; /* lg:text-6xl */
  }
}

.hero__text {
  font-size: 16px; /* text-base */
  font-weight: 300; /* font-light */
  color: rgba(255, 255, 255, 0.9); /* text-white/90 */
  margin-bottom: 40px; /* mb-10 */
  line-height: 1.625; /* leading-relaxed */
  font-family: var(--font-sans);
}

@media (min-width: 768px) {
  .hero__text {
    font-size: 18px; /* md:text-lg */
  }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px; /* w-40 */
  height: 160px; /* h-40 */
  border-radius: 9999px; /* rounded-full */
  background: var(--primary);
  color: #FFFFFF;
  font-size: 14px; /* text-sm */
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  text-align: center;
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
}

/* ============================================================
   4. APPOINTMENT BAR
   ============================================================ */
.appointment-bar {
  width: 100%;
  background: var(--primary);
  padding: 20px 0; /* py-5 */
}

.appointment-bar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px; /* px-4 */
}

.appointment-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; /* gap-4 */
  align-items: center;
}

@media (min-width: 768px) {
  .appointment-bar__grid {
    grid-template-columns: repeat(4, 1fr); /* md:grid-cols-4 */
  }
}

.appointment-bar__field {
  position: relative;
}

.appointment-bar__field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px; /* left-3 */
  width: calc(100% - 1.5rem); /* w-[calc(100%-1.5rem)] */
  height: 0.5px; /* h-[0.5px] */
  background: #FFFFFF;
}

.appointment-bar__input,
.appointment-bar__select {
  width: 100%;
  background: transparent;
  color: #FFFFFF;
  padding: 12px; /* px-3 py-3 */
  border: none;
  outline: none;
  font-size: 14px; /* text-sm */
  letter-spacing: 0.025em; /* tracking-wide */
  font-family: var(--font-sans);
}

.appointment-bar__input::placeholder {
  color: rgba(255, 255, 255, 0.7); /* placeholder:text-white/70 */
}

.appointment-bar__select {
  color: rgba(255, 255, 255, 0.7);
  appearance: none;
  cursor: pointer;
}

.appointment-bar__select option {
  background: var(--primary);
  color: #FFFFFF;
}

.appointment-bar__select-wrapper {
  position: relative;
}

.appointment-bar__select-icon {
  position: absolute;
  right: 12px; /* right-3 */
  top: 50%;
  transform: translateY(-50%);
  width: 12px; /* w-3 */
  height: 12px; /* h-3 */
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.appointment-bar__submit {
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  background: transparent;
  padding: 12px 24px; /* px-6 py-3 */
  font-size: 12px; /* text-xs */
  letter-spacing: 0.2em; /* tracking-[0.2em] */
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-sans);
}

/* ============================================================
   5. FACHINSTITUT SECTION
   ============================================================ */
.fachinstitut {
  padding: 96px 24px; /* py-24 px-6 */
}

.fachinstitut__inner {
  max-width: 1152px; /* max-w-6xl */
  margin: 0 auto;
  text-align: center;
}

.fachinstitut__title {
  font-size: 30px; /* text-3xl */
  font-weight: 300; /* font-light */
  letter-spacing: 0.025em; /* tracking-wide */
  margin-bottom: 24px; /* mb-6 */
}

@media (min-width: 768px) {
  .fachinstitut__title {
    font-size: 36px; /* md:text-4xl */
  }
}

.fachinstitut__desc-container {
  max-width: 768px; /* max-w-3xl */
  margin: 0 auto 64px; /* mb-16 */
  text-align: center;
}

.fachinstitut__desc-container p {
  color: var(--muted-foreground);
  line-height: 1.625; /* leading-relaxed */
  margin-bottom: 16px; /* space-y-4 */
  font-size: 16px;
}

.fachinstitut__desc-container p:last-child {
  margin-bottom: 0;
}

.fachinstitut__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px; /* gap-10 */
}

@media (min-width: 768px) {
  .fachinstitut__grid {
    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
  }
}

.fachinstitut__card {
  padding: 32px; /* p-8 */
  border-radius: 1rem; /* rounded-2xl */
  border: 1px solid var(--border);
  background: var(--background);
}

.fachinstitut__icon-wrap {
  width: 56px; /* w-14 */
  height: 56px; /* h-14 */
  border-radius: 9999px;
  background: rgba(223, 176, 167, 0.1); /* bg-primary/10 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px; /* mx-auto mb-6 */
}

.fachinstitut__icon-wrap svg {
  width: 24px; /* w-6 */
  height: 24px; /* h-6 */
  color: var(--primary);
}

.fachinstitut__card-title {
  font-size: 18px; /* text-lg */
  font-weight: 500; /* font-medium */
  color: var(--foreground);
  margin-bottom: 12px; /* mb-3 */
}

.fachinstitut__card-text {
  font-size: 14px; /* text-sm */
  color: var(--muted-foreground);
  line-height: 1.625;
}

.fachinstitut__divider {
  width: 96px; /* w-24 */
  height: 1px;
  background: var(--primary);
  margin: 64px auto 0; /* mt-16 mx-auto */
}

/* ============================================================
   6. INSTITUT SECTION
   ============================================================ */
.institut {
  padding: 96px 24px; /* py-24 px-6 */
  background: rgba(245, 245, 245, 0.5); /* bg-muted/50 */
}

.institut__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.institut__header {
  text-align: center;
  margin-bottom: 64px; /* mb-16 */
}

.institut__title {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.025em;
  margin-bottom: 16px; /* mb-4 */
}

@media (min-width: 768px) {
  .institut__title {
    font-size: 36px;
  }
}

.institut__desc {
  color: var(--muted-foreground);
  max-width: 672px; /* max-w-2xl */
  margin: 0 auto;
  line-height: 1.625;
}

.institut__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px; /* gap-3 */
}

@media (min-width: 768px) {
  .institut__grid {
    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
  }
}

.institut__img-wrap {
  border-radius: 1rem; /* rounded-2xl */
  overflow: hidden;
}

.institut__img-wrap--featured {
  grid-column: span 1;
  grid-row: span 1;
}

@media (min-width: 768px) {
  .institut__img-wrap--featured {
    grid-column: span 2; /* md:col-span-2 */
    grid-row: span 2; /* md:row-span-2 */
  }
}

.institut__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9; /* aspect-video */
}

.institut__img-wrap--featured .institut__img {
  aspect-ratio: auto;
}

.institut__cta {
  text-align: center;
  margin-top: 48px; /* mt-12 */
}

.institut__cta-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 8px 20px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
  cursor: pointer;
  display: inline-block;
}

/* ============================================================
   7. BEHANDLUNGEN SECTION
   ============================================================ */
.behandlungen {
  padding: 96px 24px; /* py-24 px-6 */
}

.behandlungen__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.behandlungen__header {
  text-align: center;
  margin-bottom: 64px; /* mb-16 */
}

.behandlungen__title {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.025em;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .behandlungen__title {
    font-size: 36px;
  }
}

.behandlungen__desc {
  color: var(--muted-foreground);
  max-width: 672px;
  margin: 0 auto;
  line-height: 1.625;
}

.behandlungen__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px; /* gap-6 */
}

@media (min-width: 768px) {
  .behandlungen__grid {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
}

.behandlungen__card {
  border-radius: 1rem; /* rounded-2xl */
  border: 1px solid var(--border);
  background: var(--background);
  overflow: hidden;
}

.behandlungen__img-wrap {
  aspect-ratio: 16 / 9; /* aspect-[16/9] */
  overflow: hidden;
}

.behandlungen__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.behandlungen__content {
  padding: 24px; /* p-6 */
}

.behandlungen__card-title {
  font-size: 18px; /* text-lg */
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 8px; /* mb-2 */
}

.behandlungen__card-text {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.625;
  margin-bottom: 16px; /* mb-4 */
}

.behandlungen__card-link {
  font-size: 14px;
  color: var(--primary);
}

/* ============================================================
   8. TEAM SECTION
   ============================================================ */
.team {
  padding: 64px 16px; /* py-16 px-4 */
  overflow: hidden;
}

@media (min-width: 640px) {
  .team {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .team {
    padding-top: 96px; /* md:py-24 */
    padding-bottom: 96px;
  }
}

.team__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.team__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px; /* gap-6 */
  margin-bottom: 48px; /* mb-12 */
}

@media (min-width: 640px) {
  .team__header {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .team__header {
    margin-bottom: 64px; /* md:mb-16 */
  }
}

.team__subtitle {
  font-size: 12px; /* text-xs */
  text-transform: uppercase;
  letter-spacing: 0.25em; /* tracking-[0.25em] */
  color: var(--muted-foreground);
  margin-bottom: 16px; /* mb-4 */
  font-family: var(--font-sans);
}

.team__title {
  font-size: 24px; /* text-2xl */
  font-weight: 300;
  line-height: 1.4; /* leading-snug */
}

@media (min-width: 640px) {
  .team__title {
    font-size: 30px; /* sm:text-3xl */
  }
}

@media (min-width: 768px) {
  .team__title {
    font-size: 36px; /* md:text-4xl */
  }
}

.team__title-highlight {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--primary);
}

.team__round-btn {
  display: none;
}

@media (min-width: 768px) {
  .team__round-btn {
    display: flex;
    width: 112px; /* w-28 */
    height: 112px; /* h-28 */
    border-radius: 9999px;
    background: var(--primary);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
  }
}

.team__round-btn-text {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em; /* tracking-[0.15em] */
  color: var(--primary-foreground);
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
  font-family: var(--font-sans);
}

/* Team Grid */
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
  gap: 12px; /* gap-3 */
  max-width: 896px; /* max-w-4xl */
  margin: 0 auto;
}

@media (min-width: 640px) {
  .team__grid {
    gap: 16px; /* sm:gap-4 */
  }
}

@media (min-width: 768px) {
  .team__grid {
    gap: 20px; /* md:gap-5 */
  }
}

@media (min-width: 1024px) {
  .team__grid {
    grid-template-columns: repeat(4, 1fr); /* lg:grid-cols-4 */
  }
}

.team__card-img {
  aspect-ratio: 3 / 4; /* aspect-[3/4] */
  background: var(--muted);
  border-radius: 2px; /* rounded-sm */
  overflow: hidden;
}

.team__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team__card-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(229, 229, 229, 0.4); /* bg-border/40 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.team__card-placeholder span {
  color: rgba(113, 115, 116, 0.3); /* text-muted-foreground/30 */
  font-size: 14px;
}

.team__card-info {
  background: rgba(245, 245, 245, 0.8); /* bg-muted/80 */
  padding: 12px 8px; /* py-3 px-2 */
  text-align: center;
}

@media (min-width: 640px) {
  .team__card-info {
    padding: 16px 12px; /* sm:py-4 sm:px-3 */
  }
}

.team__card-name {
  font-size: 12px; /* text-xs */
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 4px; /* mb-1 */
  word-break: break-word;
}

@media (min-width: 640px) {
  .team__card-name {
    font-size: 14px; /* sm:text-sm */
  }
}

@media (min-width: 768px) {
  .team__card-name {
    font-size: 16px; /* md:text-base */
  }
}

.team__card-role {
  font-size: 7px; /* text-[7px] */
  text-transform: uppercase;
  letter-spacing: 0.08em; /* tracking-[0.08em] */
  color: var(--primary);
  word-break: break-word;
  font-family: var(--font-sans);
}

@media (min-width: 640px) {
  .team__card-role {
    font-size: 8px; /* sm:text-[8px] */
    letter-spacing: 0.12em; /* sm:tracking-[0.12em] */
  }
}

@media (min-width: 768px) {
  .team__card-role {
    font-size: 10px; /* md:text-[10px] */
  }
}

/* ============================================================
   9. REVIEWS SECTION
   ============================================================ */
.reviews {
  padding: 96px 24px; /* py-24 px-6 */
}

.reviews__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.reviews__header {
  text-align: center;
  margin-bottom: 64px; /* mb-16 */
}

.reviews__title {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.025em;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .reviews__title {
    font-size: 36px;
  }
}

.reviews__subtitle {
  color: var(--muted-foreground);
}

.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px; /* gap-8 */
}

@media (min-width: 768px) {
  .reviews__grid {
    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
  }
}

.reviews__card {
  padding: 32px; /* p-8 */
  border-radius: 1rem; /* rounded-2xl */
  border: 1px solid var(--border);
  background: var(--background);
}

.reviews__stars {
  display: flex;
  gap: 4px; /* gap-1 */
  margin-bottom: 16px; /* mb-4 */
}

.reviews__star {
  width: 16px; /* w-4 */
  height: 16px; /* h-4 */
  color: var(--primary);
  fill: var(--primary);
}

.reviews__text {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.625;
  margin-bottom: 24px; /* mb-6 */
  font-style: italic;
}

.reviews__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
}

/* ============================================================
   10. INSTAGRAM SECTION
   ============================================================ */
.instagram {
  width: 100%;
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
}

@media (min-width: 768px) {
  .instagram__grid {
    grid-template-columns: repeat(6, 1fr); /* md:grid-cols-6 */
  }
}

.instagram__item {
  aspect-ratio: 1 / 1; /* aspect-square */
  overflow: hidden;
  display: block;
}

.instagram__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.footer {
  color: var(--foreground);
}

.footer__main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .footer__main {
    flex-direction: row; /* lg:flex-row */
  }
}

/* Left grey area */
.footer__left {
  flex: 1;
  background: #F5F5F5; /* bg-[#f5f5f5] */
  padding: 56px 32px; /* px-8 py-14 */
}

.footer__left-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px; /* gap-10 */
  max-width: 1024px; /* max-w-5xl */
  margin: 0 auto;
}

@media (min-width: 768px) {
  .footer__left-grid {
    grid-template-columns: auto 1fr 1fr 1fr; /* md:grid-cols-[auto_1fr_1fr_1fr] */
  }
}

.footer__logo img {
  height: 80px; /* h-20 */
  object-fit: contain;
}

.footer__col-title {
  font-size: 12px; /* text-xs */
  font-weight: 600; /* font-semibold */
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  color: var(--muted-foreground);
  margin-bottom: 16px; /* mb-4 */
  font-family: var(--font-sans);
}

.footer__col-list {
  list-style: none;
}

.footer__col-list li {
  margin-bottom: 10px; /* space-y-2.5 */
  font-size: 14px; /* text-sm */
}

.footer__col-list li:last-child {
  margin-bottom: 0;
}

.footer__contact-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__contact-icon svg {
  width: 16px; /* w-4 */
  height: 16px; /* h-4 */
  color: var(--primary);
  flex-shrink: 0;
}

/* Right appointment block */
.footer__right {
  width: 100%;
  background: var(--primary);
  padding: 56px 32px; /* px-8 py-14 */
  color: var(--primary-foreground);
}

@media (min-width: 1024px) {
  .footer__right {
    width: 420px; /* lg:w-[420px] */
    flex-shrink: 0;
  }
}

.footer__right-title {
  font-size: 24px; /* text-2xl */
  font-weight: 300;
  letter-spacing: 0.025em;
  margin-bottom: 32px; /* mb-8 */
  color: var(--primary-foreground);
}

.footer__form {
  display: flex;
  flex-direction: column;
  gap: 16px; /* space-y-4 */
}

.footer__form-row {
  display: grid;
  gap: 12px; /* gap-3 */
}

.footer__form-row--2col {
  grid-template-columns: 1fr 1fr; /* grid-cols-2 */
}

.footer__form-row--3col {
  grid-template-columns: 1fr auto auto; /* grid-cols-[1fr_auto_auto] */
}

.footer__form-input,
.footer__form-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.1); /* bg-primary-foreground/10 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* border-primary-foreground/20 */
  border-radius: 4px; /* rounded */
  padding: 10px 12px; /* px-3 py-2.5 */
  font-size: 14px; /* text-sm */
  color: rgba(255, 255, 255, 0.8); /* text-primary-foreground/80 */
  outline: none;
  font-family: var(--font-sans);
}

.footer__form-input::placeholder {
  color: rgba(255, 255, 255, 0.6); /* placeholder:text-primary-foreground/60 */
}

.footer__form-select option {
  background: var(--primary);
  color: #FFFFFF;
}

.footer__form-submit {
  width: 100%;
  margin-top: 16px; /* mt-4 */
  background: rgba(255, 255, 255, 0.9); /* bg-white/90 */
  color: var(--foreground); /* text-foreground → #333333 */
  padding: 12px; /* py-3 */
  font-size: 14px; /* text-sm */
  font-weight: 600; /* font-semibold */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

/* Bottom bar */
.footer__bottom {
  background: #2A2A2A; /* bg-[#2a2a2a] */
  padding: 24px 32px; /* px-8 py-6 */
}

.footer__bottom-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px; /* gap-4 */
}

@media (min-width: 768px) {
  .footer__bottom-inner {
    flex-direction: row;
  }
}

.footer__bottom-social {
  display: flex;
  align-items: center;
  gap: 24px; /* gap-6 */
}

.footer__bottom-social a svg {
  width: 20px; /* w-5 */
  height: 20px; /* h-5 */
}

.footer__copyright {
  font-size: 12px; /* text-xs */
  color: rgba(255, 255, 255, 0.5); /* text-white/50 */
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.section-title {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.025em;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 36px;
  }
}

.text-muted {
  color: var(--muted-foreground);
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.text-center {
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   WORDPRESS BLOCK OVERRIDES
   ============================================================ */

/* Remove default WordPress block margins */
.wp-site-blocks > * + * {
  margin-top: 0;
}

.wp-block-group {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

/* wp-block-group inherits our custom classes – no extra wrappers needed */
.wp-block-group.hero,
.wp-block-group.fachinstitut,
.wp-block-group.institut,
.wp-block-group.behandlungen,
.wp-block-group.team,
.wp-block-group.reviews,
.wp-block-group.instagram-section,
.wp-block-group.appointment-bar {
  max-width: none;
}

/* wp-block-heading: reset WP defaults */
.wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* wp-block-image: reset figure wrapper */
.wp-block-image {
  margin: 0;
}

.wp-block-image img {
  display: block;
}

/* wp-block-image within specific sections */
.hero .wp-block-image,
.hero .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.institut__img .wp-block-image,
.institut__img .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.behandlungen__card .wp-block-image {
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.behandlungen__card .wp-block-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.team__card .wp-block-image {
  overflow: hidden;
}

.team__card .wp-block-image img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/* wp-block-paragraph: reset defaults */
.wp-block-paragraph {
  margin-top: 0;
  margin-bottom: 0;
}

/* wp-block-separator */
.wp-block-separator {
  margin: 0;
  border: none;
}

/* wp-block-buttons / wp-block-button */
.wp-block-buttons {
  margin: 0;
}

.wp-block-button {
  margin: 0;
}

/* Ensure full-width sections work */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* Fix WP adding padding to template parts */
.wp-block-template-part {
  margin: 0;
  padding: 0;
}