/*!
 * Gastroenterologie am Claraplatz - Angebot Page (REFACTORED v2.0)
 * Mobile-First Responsive Design
 *
 * Architecture Principles (FIGMA_TO_CODE_METHODOLOGY.md Phase 1.5):
 * ✅ Mobile-First (320px base → progressive enhancement)
 * ✅ NO fixed heights (content determines size)
 * ✅ Flexbox/Grid layouts (NO absolute positioning)
 * ✅ Shared components (footer.css imported)
 * ✅ CSS Custom Properties (Design Tokens)
 *
 * Breakpoints:
 * - Mobile:  320px - 767px
 * - Tablet:  768px - 1023px
 * - Desktop: 1024px+
 *
 * Version: 2.0.0
 * Date: 2025-10-03
 * Author: Refactored following best practices
 */

/* ========================================
   IMPORTS - Shared Components
   ======================================== */

@import url('components/navigation.css');
@import url('components/footer.css');

/* ========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ======================================== */

:root {
  /* Colors - Brand Palette */
  --color-primary: #003974;
  --color-secondary: #6dc8bf;
  --color-accent: #bbd976;
  --color-text: #003974;
  --color-background: #ffffff;
  --color-gray-light: #f8f9fa;
  --color-link: #00a88e;
  --color-link-hover: #007a6b;
  --color-error: #dc3545;

  /* Service-specific colors (Figma) */
  --color-service-green: #bbd976;   /* Magenspiegelung, Enddarmspiegelung, Ernährungsberatung */
  --color-service-turquoise: #6dc8bf; /* Darmspiegelung, Ultraschall */
  --color-service-blue: #00698c;    /* Darmkrebs-Screening, Sprechstunde */

  /* Spacing Scale (Mobile base - 320px) */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 5rem;     /* 80px */

  /* Container */
  --container-max: 1440px;
  --container-padding: 1.25rem; /* 20px mobile */

  /* Typography Scale */
  --font-size-xs: 0.875rem;   /* 14px */
  --font-size-sm: 1rem;       /* 16px */
  --font-size-base: 1.125rem; /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.75rem;   /* 28px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */

  /* Font Families */
  --font-primary: 'Roboto', sans-serif;
  --font-heading: 'Dosis', sans-serif;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 40px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  width: 100%;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
  overflow-x: hidden; /* Prevent horizontal scrollbar */
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-sm);
  background: var(--color-primary);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 10000;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-sm);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

/* ========================================
   MAIN CONTAINER (Mobile Base)
   ======================================== */

.angebot {
  background-color: var(--color-background);
  width: 100%;
  min-width: 320px;
  /* NO min-height - content determines height */
  max-width: var(--container-max);
  margin: 0 auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ========================================
   NAVIGATION
   Note: Navigation styles imported from components/navigation.css
   ======================================== */

/* ========================================
   PRACTICE IMAGES (Mobile: 2 images)
   ======================================== */

.group-3 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  overflow: hidden;
  margin-top: 0;
  z-index: 1;
}

.rectangle,
.rectangle-2 {
  position: relative;
  display: block;
  width: 100%;
  height: 172px;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Hide third image on mobile (Figma mobile design: 393px shows 2 images) */
.rectangle:nth-child(3) {
  display: none;
}

/* ========================================
   HERO CONTENT SECTION - 2 Column Layout
   Figma Node-IDs: 191-1300, 191-1302, 191-1301, 401-831, 387-771
   ======================================== */

.hero-wrapper {
  display: flex;
  flex-direction: column; /* Mobile: stacked */
  gap: var(--space-lg);
  padding: 32px var(--container-padding); /* Mobile: 32px vertical (30% of desktop 80px) */
  max-width: var(--container-max);
  margin: 0 auto;
}

.hero-content-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.hero-content-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.unsere-fachgebiete {
  margin: 0; /* Remove margin - container handles spacing */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 40px; /* Figma: 40px (Node 191-1300) */
  line-height: 1.369; /* Figma: 1.369 (Node 191-1300) */
  color: #003974; /* Figma: #003974 */
  text-transform: uppercase;
  letter-spacing: normal;
  text-align: left;
}

.text-wrapper-7 {
  margin: 0; /* Remove margin - container handles spacing */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 36px; /* Figma: 36px (Node 191-1302) */
  line-height: normal; /* Figma: 100% = normal (Node 191-1302) */
  color: #6dc8bf; /* Figma: #6dc8bf */
  text-align: left;
}

.wir-bieten-ein {
  margin: 0; /* Remove margin - container handles spacing */
  font-family: var(--font-primary);
  font-size: 20px; /* Figma: 20px (Node 191-1301) */
  font-weight: 400; /* Figma: Regular 400 */
  line-height: 28px; /* Figma: 28px (Node 191-1301) */
  letter-spacing: 0.2px; /* Figma: 0.2px (Node 191-1301) */
  color: #003974; /* Figma: #003974 */
  text-align: left;
}

/* ========================================
   BUTTONS (Mobile Base)
   Figma Node-ID: 401-831
   ======================================== */

.button-4,
.button-wrapper,
.button-6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* Remove margin - parent container handles spacing */
  padding: 15px 48px; /* Berechnet: 48px Höhe - 18px font-size = 30px / 2 = 15px */
  background-color: #6dc8bf; /* Figma: #6dc8bf */
  border-radius: 999px; /* Vollständige Pillenform für perfekt abgerundete Ecken */
  text-decoration: none;
  transition: all var(--transition-base);
  width: auto; /* Auto width */
  gap: 10px; /* Figma: gap 10px */
}

/* Praktische Links button between sections */
.button-wrapper {
  display: flex;
  margin: 40px auto 0; /* Mobile: proportional spacing (30% of desktop 107px ≈ 40px) */
  max-width: max-content;
  padding: 35px 48px; /* Figma Node 383-863: 88px Höhe - 18px font = 70px / 2 = 35px */
}

.button-4:hover {
  background-color: #003974; /* Dunkelblau für hover state */
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 57, 116, 0.4);
}

.button-wrapper:hover,
.button-6:hover {
  background-color: #003974; /* Dunkelblau für hover state */
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 57, 116, 0.4);
}

.button-4:focus,
.button-wrapper:focus,
.button-6:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.button-2,
.button-3 {
  font-family: var(--font-heading);
  font-weight: 600; /* Figma: SemiBold = 600 (Node 401-831) */
  font-size: 18px; /* Figma: 18px (Node 401-831) */
  letter-spacing: 0.72px; /* Figma: 0.72px (Node 401-831) */
  text-transform: uppercase;
  color: #ffffff; /* Figma: white */
  line-height: 1; /* Figma: 100% = 1 für kompakte Darstellung */
}

/* ========================================
   DOWNLOADS (Mobile Base)
   Figma Node-ID: 387-771
   ======================================== */

.downloads-6,
.downloads-5,
.downloads,
.downloads-wrapper,
.downloads-3,
.downloads-4 {
  margin: 0; /* Remove margin - parent container handles spacing */
  display: flex;
  flex-direction: column;
  gap: 12px; /* Figma: gap 12px (Node 387-771) */
}

.downloads-7,
.downloads-2 {
  display: flex;
  align-items: center;
  gap: 12px; /* Figma: gap 12px (Node 387-771) */
  padding: 0; /* Remove padding - Figma has no padding */
  background-color: transparent; /* Remove background */
  border-radius: 0; /* Remove border-radius */
  border-left: none; /* Remove border */
  transition: none;
}

.downloads-7:hover,
.downloads-2:hover {
  background-color: transparent;
}

.icon-file-6,
.icon-file-5,
.icon-file,
.icon-file-2,
.icon-file-3,
.icon-file-4 {
  width: 36px; /* Figma: ~35.333px width (Node 387-771) */
  height: 40px; /* Figma: 40px height (Node 387-771) */
  background-image: url('/assets/images/icons/pdf-document.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  position: relative;
  flex-shrink: 0;
}

.icon-file-6::after,
.icon-file-5::after,
.icon-file::after,
.icon-file-2::after,
.icon-file-3::after,
.icon-file-4::after {
  content: ''; /* Remove text - use actual PDF icon image */
  display: none;
}

.zuweiserformular-PDF,
.zuweiserformular-PDF-2 {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #003974;
  text-decoration: none;
  transition: color var(--transition-base);
  white-space: normal;
  word-wrap: break-word;
}

.zuweiserformular-PDF:hover,
.zuweiserformular-PDF-2:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* ========================================
   SERVICE SECTIONS (Mobile Base - Stacked)
   ======================================== */

.icon-box-txt-r,
.icon-box-txt-l,
.frame,
.frame-8,
.frame-6,
.frame-10,
.frame-12 {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: var(--space-xl) var(--container-padding);
  padding: 24px; /* Mobile: 24px padding for breathing room */
  background-color: transparent;
  /* Removed: border-radius and box-shadow for cleaner look */
}

/* Mobile: Icon über Text für Sprechstunde und Enddarm */
.frame-8,
.frame-10 {
  flex-direction: column-reverse;
}

/* First service section - Magenspiegelung */
.icon-box-txt-r {
  margin-top: 60px; /* Mobile: 60px spacing from hero (proportional to desktop) */
}

.frame-3,
.frame-4,
.frame-2,
.frame-9,
.frame-7,
.frame-11,
.frame-13 {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.img-2 {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  overflow: visible;
  margin: 0 auto;
}

.img-2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.text-wrapper-9,
.text-wrapper-10,
.text-wrapper-4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-xl);
  line-height: 1.2;
  color: var(--color-service-green); /* Default: hellgrün #bbd976 (Magenspiegelung, Enddarmspiegelung, Ernährungsberatung) */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

/* Service-specific title colors */
.icon-box-txt-l .text-wrapper-10 {
  color: var(--color-service-turquoise); /* Darmspiegelung: #6dc8bf */
}

.frame .text-wrapper-4 {
  color: var(--color-service-blue); /* Darmkrebs-Screening: #00698c */
}

.frame-6 .text-wrapper-10 {
  color: var(--color-service-turquoise); /* Ultraschall: #6dc8bf */
}

.frame-10 .text-wrapper-4 {
  color: var(--color-service-blue); /* Sprechstunde: #00698c */
}

.p,
.text-wrapper-12 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-align: left; /* Changed from center to left */
}

/* Darmkrebs Screening Special */
.darmkrebs-screening {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  margin: 0 auto;
}

.text-wrapper-5 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-text);
}

.text-wrapper-6 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-link);
  text-decoration: underline;
  font-weight: 600;
  transition: color var(--transition-base);
}

.text-wrapper-6:hover {
  color: var(--color-link-hover);
}

/* Special layouts for specific services */
.small-intestine,
.enddarm,
.vector-8 {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

/* ========================================
   CONTACT CALL-TO-ACTION (Mobile Base)
   Figma Node-ID: 387-925, 387-926
   ======================================== */

.cta-contact-wrapper {
  margin: var(--space-3xl) 0; /* Top margin, no side margins */
  margin-bottom: 60px; /* Mobile: 60px spacing to footer (30% of desktop 197px) */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--container-padding); /* Padding instead of margin for mobile */
}

.cta-contact-container {
  background-color: #003974; /* Figma: dunkelblau (Node 387-926) */
  border-radius: 100px; /* Figma: stark abgerundet (Node 387-926) */
  padding: 26px 48px 38px; /* Mobile: kompakt */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 818px; /* Figma: W Fixed 818px (Node 387-926) */
  min-height: 173px; /* Figma: H Fixed 173px (Node 387-926) */
}

.cta-contact-title {
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
  font-size: 20px; /* Mobile: kleiner */
  line-height: 1.2;
  color: white;
  text-align: center;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

.cta-contact-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 48px; /* Figma: 20px vertical, 48px horizontal */
  background-color: #6dc8bf; /* Figma: türkis */
  border-radius: 40px; /* Figma: 40px */
  text-decoration: none;
  transition: all var(--transition-base);
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
  font-size: 18px; /* Figma: 18px */
  letter-spacing: 0.72px; /* Figma: 0.72px */
  color: white;
  line-height: normal;
  cursor: pointer;
}

.cta-contact-phone:hover {
  background-color: #5ab3aa; /* Darker türkis for hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(109, 200, 191, 0.4);
}

.cta-contact-phone:focus {
  outline: 2px solid white;
  outline-offset: 4px;
}

/* ========================================
   TABLET (768px+)
   ======================================== */

@media (min-width: 768px) {
  :root {
    --container-padding: 2.5rem; /* 40px */
  }

  /* Practice Images - Show all 3 */
  .group-3 {
    grid-template-columns: repeat(3, 1fr);
    height: 300px;
  }

  .rectangle,
  .rectangle-2 {
    height: 100%;
  }

  .rectangle:nth-child(3) {
    display: block;
  }

  /* Hero Content - Tablet: 2-Column Layout */
  .hero-wrapper {
    flex-direction: row; /* Side-by-side layout */
    gap: var(--space-lg); /* Initial gap for tablet */
    align-items: flex-start;
  }

  .hero-content-left {
    flex: 1; /* Take available space */
    max-width: 823px; /* Figma: text width */
  }

  .hero-content-right {
    flex-shrink: 0;
    width: auto;
    align-items: flex-start;
  }

  /* Typography - Tablet maintains desktop Figma values */
  .unsere-fachgebiete {
    font-size: 40px; /* Figma: 40px (consistent across breakpoints) */
    line-height: 1.369;
    text-align: left;
  }

  .text-wrapper-7 {
    font-size: 36px; /* Figma: 36px (consistent across breakpoints) */
    line-height: normal;
    text-align: left;
  }

  .wir-bieten-ein {
    font-size: 20px; /* Figma: 20px (consistent across breakpoints) */
    line-height: 28px;
    letter-spacing: 0.2px;
  }

  /* Buttons - Tablet */
  .button-4,
  .button-wrapper,
  .button-6 {
    width: auto;
    padding: 15px 48px; /* 48px Gesamt-Höhe aus Figma */
  }

  /* Praktische Links button - Tablet */
  .button-wrapper {
    margin: 100px auto 0; /* Spacing between sections on tablet */
    padding: 35px 48px; /* Figma: 88px Höhe */
  }

  /* Service Sections - 2 Column Layout (Icon + Text Side-by-Side) */
  /* Icon LEFT, Text RIGHT */
  .icon-box-txt-r,   /* Magenspiegelung */
  .frame,            /* Darmkrebs-Screening */
  .frame-6,          /* Ultraschall */
  .frame-12 {        /* Ernährungsberatung */
    flex-direction: row;
    align-items: center; /* Figma: items-center for vertical centering */
  }

  /* Service-specific gaps (Figma) */
  .icon-box-txt-r {
    gap: 89px; /* Magenspiegelung */
  }

  .frame {
    gap: 35px; /* Darmkrebs-Screening */
  }

  .frame-6 {
    gap: 127px; /* Ultraschall */
  }

  .frame-12 {
    gap: 118px; /* Ernährungsberatung */
  }

  /* Icon LEFT, Text RIGHT (row-reverse) */
  .icon-box-txt-l {  /* Darmspiegelung */
    flex-direction: row-reverse;
    align-items: center; /* Figma: items-center for vertical centering */
  }

  /* Icon RIGHT, Text LEFT (normal row) */
  .frame-8,          /* Enddarmspiegelung */
  .frame-10 {        /* Sprechstunde - Icon rechts wie in Figma */
    flex-direction: row;
    align-items: center;
  }

  .icon-box-txt-l {
    gap: 56px; /* Darmspiegelung */
  }

  .frame-8 {
    gap: 125px; /* Enddarmspiegelung */
  }

  .frame-10 {
    gap: 91px; /* Sprechstunde */
  }

  .img-2 {
    width: 180px;
    height: 180px;
    margin: 0;
  }

  .text-wrapper-9,
  .text-wrapper-10,
  .text-wrapper-4 {
    text-align: left;
  }

  .p,
  .text-wrapper-12 {
    text-align: left;
  }

  /* Contact CTA - Tablet */
  .cta-contact-wrapper {
    margin: var(--space-3xl) auto 0;
  }

  .cta-contact-title {
    font-size: 24px; /* Tablet: medium font */
  }

  .cta-contact-phone {
    font-size: 18px;
  }
}

/* ========================================
   DESKTOP (1024px+)
   ======================================== */

@media (min-width: 1024px) {
  :root {
    --container-padding: 6rem; /* 96px */
  }

  /* Navigation - Desktop */
  .logo-text-line1,
  .logo-text-line2 {
    font-size: 14px;
    letter-spacing: 1.4px;
  }

  .nav-button {
    font-size: var(--font-size-base);
    padding: var(--space-md);
  }

  /* Practice Images - Desktop height */
  .group-3 {
    height: 416px;
  }

  /* Hero Content - Desktop (pixel-perfect Figma layout) */
  .hero-wrapper {
    padding-top: var(--space-3xl); /* More top spacing on desktop */
    gap: 30px; /* Figma: exact gap between columns (949 - 919 = 30px) */
    align-items: flex-start; /* Align to top */
  }

  .hero-content-left {
    max-width: 823px; /* Figma: exact width (Node 191-1301) */
  }

  .unsere-fachgebiete {
    font-size: 40px; /* Figma: 40px (Node 191-1300) */
    line-height: 1.369;
    margin-bottom: 0;
  }

  .text-wrapper-7 {
    font-size: 36px; /* Figma: 36px (Node 191-1302) */
    line-height: normal;
    margin-bottom: 61px; /* Figma: gap between subtitle end (785px) and text start (846px) = 61px */
  }

  .hero-content-right {
    width: 395px; /* Figma: exact width (Node 387-771) */
    gap: 72px; /* Figma: gap between button (859+48=907) and downloads (979) = 72px */
    padding-top: 210px; /* Figma: Button position 859px - section start 684px = 175px */
  }

  .wir-bieten-ein {
    font-size: 20px; /* Figma: 20px (Node 191-1301) */
    line-height: 28px;
    letter-spacing: 0.2px;
  }

  /* Praktische Links button - Desktop */
  .button-wrapper {
    margin: 107px auto 0; /* Figma: exact 107px spacing after Darmspiegelung downloads */
    width: 740px; /* Figma: Fixed width for desktop */
    max-width: 740px;
  }

  /* Service Sections - Larger icons (Figma: 250px) */
  .img-2 {
    width: 250px;
    height: 250px;
  }

  /* Service Sections - Individual padding per section (from Figma screenshots) */
  .icon-box-txt-r {
    padding: 46px 82px; /* Magenspiegelung: top/bottom 46px, left/right 82px */
    margin: 0 auto;
    max-width: var(--container-max);
    gap: 89px; /* Magenspiegelung gap */
  }

  .icon-box-txt-l {
    padding: 59px 82px 51px 82px; /* Darmspiegelung: top 59px, right/left 82px, bottom 51px */
    margin: 96px auto 0; /* 96px spacing between sections */
    max-width: var(--container-max);
    gap: 56px; /* Darmspiegelung gap - keep from tablet */
  }

  /* Darmkrebs-Screening Section */
  .frame {
    padding: 0 80px; /* Figma: Left/Right 80px, no top/bottom padding (handled by margin) */
    margin: 125px auto 0; /* Figma: 292px total - 107px (to button) - 60px (button height) = 125px */
    max-width: var(--container-max);
    gap: 35px; /* Darmkrebs-Screening: gap between image and text */
  }

  /* Darmkrebs-Screening Text Container */
  .frame .frame-2 {
    gap: 48px; /* Figma: gap between title and text */
    max-width: 802px; /* Figma: text container width */
  }

  /* Darmkrebs-Screening Image */
  .frame .img-2 {
    width: 405px; /* Figma: Darmkrebs-Screening image width */
    height: 115px; /* Figma: Darmkrebs-Screening image height (16:9 aspect) */
  }

  /* Darmkrebs-Screening Title */
  .frame .text-wrapper-4 {
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: 36px; /* Figma: 36px */
    line-height: normal;
    color: #00698c; /* Figma: blue */
  }

  /* Darmkrebs-Screening Text */
  .frame .p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px; /* Figma: 20px */
    line-height: 28px; /* Figma: 28px */
    letter-spacing: 0.2px;
    color: #003974;
  }

  /* Darmkrebs-Screening Link */
  .frame .text-wrapper-6 {
    color: #00698c;
    text-decoration: underline;
    font-weight: 400;
  }

  .frame-8,
  .frame-6,
  .frame-10,
  .frame-12 {
    padding: 46px 82px;
    margin: 96px auto 0;
    max-width: var(--container-max);
  }

  .frame-6 {
    gap: 127px; /* Ultraschall */
    margin: 208px auto 0; /* Figma: spacing from Enddarmspiegelung to Ultraschall section */
  }

  .frame-8 {
    gap: 125px; /* Enddarmspiegelung */
    margin: 136px auto 0; /* Figma: spacing from Darmkrebs-Screening download to Enddarm section (135.68px) */
  }

  .frame-10 {
    gap: 91px; /* Sprechstunde */
  }

  .frame-12 {
    gap: 118px; /* Ernährungsberatung */
  }

  /* Darmspiegelung specific - Text container width */
  .icon-box-txt-l .frame-4 {
    max-width: 790px; /* Figma: exact width for Darmspiegelung text */
    gap: 48px; /* Figma: gap between title and text */
  }

  /* Darmspiegelung Icon - smaller than default */
  .icon-box-txt-l .img-2 {
    width: 236px; /* Figma: Darmspiegelung icon size */
    height: 236px;
  }

  /* Enddarmspiegelung (Proktoskopie) - Specific Styles */
  .frame-8 .img-2 {
    width: 235.35px; /* Figma: Enddarmspiegelung icon size */
    height: 235.35px;
  }

  .frame-8 .frame-9 {
    gap: 48px; /* Figma: gap between title and text */
    max-width: 802px; /* Figma: text container width */
  }

  /* Ultraschall des Bauches - Specific Styles */
  .frame-6 .img-2 {
    width: 250px; /* Figma: Ultraschall icon size */
    height: 250px;
  }

  .frame-6 .frame-7 {
    gap: 48px; /* Figma: gap between title and text */
    max-width: 802px; /* Figma: text container width */
  }

  /* Darmspiegelung Title */
  .icon-box-txt-l .text-wrapper-10 {
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: 36px; /* Figma: 36px */
    line-height: normal;
    color: #6dc8bf; /* Figma: türkis */
  }

  /* Darmspiegelung Text */
  .icon-box-txt-l .p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px; /* Figma: 20px */
    line-height: 28px; /* Figma: 28px */
    letter-spacing: 0.2px;
    color: #003974;
  }

  .text-wrapper-9,
  .text-wrapper-10,
  .text-wrapper-4 {
    font-size: var(--font-size-3xl);
  }

  .p,
  .text-wrapper-12 {
    font-size: 20px;
  }

  /* Sprechstunde & Ernährungsberatung - Exact Figma Values (Node-ID: 191-1156) */
  .frame-10 .text-wrapper-4,
  .frame-12 .text-wrapper-9 {
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: normal;
    text-transform: none; /* Figma shows "Sprechstunde", not "SPRECHSTUNDE" */
    letter-spacing: normal;
  }

  .frame-10 .text-wrapper-4 {
    color: #00698c; /* Sprechstunde: Blue */
  }

  .frame-12 .text-wrapper-9 {
    color: #bbd976; /* Ernährungsberatung: Green */
  }

  .frame-10 .p,
  .frame-12 .p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.2px;
    color: #003974;
  }

  /* Icon Sizing - Figma: 250x250px */
  .frame-10 .img-2,
  .frame-12 .img-2 {
    width: 250px;
    height: 250px;
  }

  /* Text Container Widths - Exact Figma */
  .frame-10 .frame-11 {
    width: 824px;
    gap: 48px;
  }

  .frame-12 .frame-13 {
    width: 762px;
    gap: 48px;
  }

  /* Gaps - Exact Figma */
  .frame-10 {
    gap: 91px; /* Sprechstunde */
  }

  .frame-12 {
    gap: 118px; /* Ernährungsberatung */
  }

  /* Contact CTA - Desktop (nach Ernährungsberatung, vor Footer) */
  .cta-contact-wrapper {
    margin-top: 96px; /* Figma: spacing from Ernährungsberatung to CTA */
    margin-bottom: 197px; /* Figma: spacing to Footer */
    margin-left: auto;
    margin-right: auto;
    padding: 0; /* Remove mobile padding for desktop */
  }

  .cta-contact-container {
    width: 818px; /* Figma: Fixed width 818px for desktop */
    max-width: none; /* Override mobile max-width */
    padding: 26px 48px 38px; /* Figma: exact padding */
    gap: 20px; /* Figma: gap between title and button */
  }

  .cta-contact-title {
    font-size: 26px; /* Desktop: larger font */
    line-height: 1.2;
  }

  .cta-contact-phone {
    font-size: 20px; /* Desktop: larger button text */
  }

  /* Sprechstunde Section - Normal margin */
  .frame-10 {
    gap: 91px; /* Sprechstunde */
  }
}

/* ========================================
   LARGE DESKTOP (1440px+)
   ======================================== */

@media (min-width: 1440px) {
  .angebot {
    max-width: var(--container-max);
  }
}

/* ========================================
   ACCESSIBILITY - Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .navigation,
  .mobile-menu-toggle,
  .button-4,
  .button-wrapper,
  .button-6,
  .cta-contact-wrapper {
    display: none;
  }

  .angebot {
    max-width: 100%;
  }

  .group-3 {
    height: auto;
  }
}

/* ========================================
   FOCUS VISIBLE (Enhanced Accessibility)
   ======================================== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.nav-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}