/* ============================================
   Esther Grosz - Mobile Responsive Styles
   Breakpoint: max-width 768px
   Target: 390px mobile width
   ============================================ */

@media (max-width: 768px) {

  /* === Header / Navigation === */
  .header {
    padding: 16px 20px;
  }

  .header-logo img {
    display: none;
  }

  .header-logo .mobile-logo-text {
    display: block;
  }

  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* === Section Padding === */
  .section-padding {
    padding: 32px 20px;
  }

  .section-padding-sm {
    padding: 24px 20px;
  }

  /* === Typography === */
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }

  p {
    font-size: 14px;
  }

  /* === Hero Section (Homepage) === */
  .hero {
    flex-direction: column-reverse;
    padding: 0;
    gap: 0;
  }

  .hero-portrait {
    width: 100%;
    height: 300px;
  }

  .hero-text {
    padding: 24px 20px;
    gap: 16px;
  }

  .hero-text h1 {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-cta {
    flex-direction: column;
    gap: 12px;
  }

  .hero-cta .btn-primary,
  .hero-cta .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* === Statement Section === */
  .statement {
    padding: 32px 20px;
    gap: 20px;
  }

  .statement p {
    font-size: 16px;
  }

  /* === Behandlungskonzept === */
  .behandlungskonzept {
    padding: 32px 20px;
    gap: 16px;
  }

  .behandlungskonzept .body-text {
    font-size: 14px;
  }

  /* === CTA Banner === */
  .cta-banner {
    padding: 40px 20px;
    gap: 16px;
  }

  .cta-banner h2 {
    font-size: 24px;
  }

  /* === Professional Background / Timeline === */
  .professional-bg {
    padding: 32px 20px;
    gap: 24px;
  }

  .timeline-item {
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
  }

  .timeline-year {
    font-size: 12px;
  }

  .oda-badge {
    position: relative;
    right: auto;
    top: auto;
    align-self: center;
  }

  .oda-badge img {
    width: 160px;
    height: 160px;
  }

  /* === Leitmotiv / Quote === */
  .leitmotiv {
    padding: 40px 20px;
    gap: 24px;
  }

  .leitmotiv .quote-mark {
    font-size: 48px;
  }

  .leitmotiv blockquote {
    font-size: 22px;
  }

  /* === Testimonials === */
  .testimonials {
    padding: 40px 20px;
    gap: 24px;
  }

  .testimonials-grid {
    flex-direction: column;
    gap: 16px;
  }

  .testimonial-card {
    padding: 24px;
  }

  /* === Nature Image === */
  .nature-image {
    height: 200px;
  }

  /* === Footer === */
  .footer {
    padding: 32px 20px;
    gap: 16px;
  }

  .footer-top {
    flex-direction: column;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .footer-badges {
    justify-content: center;
  }

  /* === Page Hero (Sub-pages) === */
  .page-hero {
    padding: 32px 20px;
  }

  .page-hero h1 {
    font-size: 28px;
  }

  /* === Image Banner === */
  .image-banner {
    height: 200px;
  }

  .image-banner-sm {
    height: 180px;
  }

  /* === About - Mein Ansatz === */
  .mein-ansatz {
    padding: 32px 20px;
    gap: 24px;
  }

  .ansatz-icons {
    flex-direction: column;
    gap: 24px;
  }

  .ansatz-quote {
    font-size: 16px;
  }

  /* === About - Privat === */
  .privat-section {
    flex-direction: column;
    padding: 32px 20px;
    gap: 24px;
  }

  .privat-section .image-side {
    width: 100%;
  }

  /* === About - Was mich antreibt === */
  .antreibt-section {
    padding: 32px 20px;
    gap: 24px;
  }

  .antreibt-cards {
    flex-direction: column;
    gap: 24px;
  }

  /* === Leistungen - Wert Intro === */
  .wert-intro {
    flex-direction: column;
    padding: 32px 20px;
    gap: 24px;
  }

  .wert-intro .image-side {
    width: 100%;
  }

  /* === Ablauf Steps === */
  .ablauf-section {
    padding: 32px 20px;
    gap: 24px;
  }

  .ablauf-steps {
    flex-direction: column;
    gap: 24px;
  }

  /* === Pricing Cards === */
  .pricing-section {
    flex-direction: column;
    padding: 16px 20px;
    gap: 16px;
  }

  .pricing-card {
    padding: 24px;
  }

  /* === Additional Info === */
  .additional-info {
    padding: 24px 20px;
    gap: 20px;
  }

  .additional-info h2 {
    font-size: 22px;
  }

  /* === Kontakt - Warm Intro === */
  .kontakt-warm-intro {
    flex-direction: column;
    padding: 32px 20px;
    gap: 24px;
  }

  .kontakt-warm-intro .image-side {
    width: 100%;
    height: 200px;
  }

  /* === Kontakt Content (Form) === */
  .kontakt-content {
    flex-direction: column;
    padding: 16px 20px;
    gap: 32px;
  }

  .kontakt-sidebar {
    width: 100%;
  }

  .form-row {
    flex-direction: column;
    gap: 20px;
  }

  /* === Termin Section === */
  .termin-section {
    padding: 24px 20px;
    gap: 16px;
  }

  .termin-section h2 {
    font-size: 24px;
  }

  .cal-embed-container {
    padding: 12px;
  }

  /* === Patienteninfos === */
  .patienteninfo-hero {
    padding: 32px 0;
    gap: 32px;
  }

  .patienteninfo-hero .hero-top {
    flex-direction: column;
    padding: 0 20px;
    gap: 24px;
  }

  .patienteninfo-hero .hero-image {
    width: 100%;
    height: 200px;
  }

  .tab-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    padding: 12px 20px;
    font-size: 13px;
    white-space: nowrap;
  }

  .tab-content {
    padding: 0 20px;
  }

  .quote-box {
    padding: 32px 20px;
  }

  .quote-box blockquote {
    font-size: 18px;
  }

  /* === Accordion === */
  .accordion {
    padding: 0 20px;
  }

  .accordion-header h3 {
    font-size: 18px;
  }

  .accordion-body-inner {
    padding: 0 0 16px 0;
  }

  /* === Legal Pages === */
  .legal-content {
    padding: 0 20px 32px;
  }

  .legal-content section {
    padding: 24px 0;
  }

  .legal-content .two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .legal-stand {
    padding: 24px 20px;
  }
}

@media (max-width: 768px) {
  /* === Hidden on Mobile === */
  .hide-mobile {
    display: none !important;
  }
}

  /* === Full-width Buttons on Mobile === */
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* === Simplified footer on mobile === */
  .footer-logo img {
    height: 32px;
  }

  .footer-badges img {
    height: 40px;
  }

  /* === Cookie Banner === */
  #cookieConsent {
    padding: 20px;
  }

  .cookie-content {
    flex-direction: column;
    gap: 16px;
  }

  .cookie-buttons {
    flex-direction: column;
    width: 100%;
  }

  .cookie-btn {
    width: 100%;
    text-align: center;
  }

/* === Extra Small (< 480px) === */
@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 24px;
  }

  .leitmotiv blockquote {
    font-size: 18px;
  }

  .pricing-card .price {
    font-size: 28px;
  }
}