/* ============================================
   HANDYANSICHT - MOBILE OPTIMIERUNG WRAPPER
   Alle Mobile-Optimierungen nur in dieser Datei!
   ============================================ */

/* Basis-Wrapper Styles */
.handy-ansicht {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.handy-ansicht__container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.handy-ansicht__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  overflow-x: hidden;
}

/* ============================================
   MOBILE OPTIMIERUNGEN (nur < 768px)
   ============================================ */

@media (max-width: 767px) {
  /* === BASIS-OPTIMIERUNGEN === */
  .handy-ansicht {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .handy-ansicht__content * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .handy-ansicht__content img,
  .handy-ansicht__content video,
  .handy-ansicht__content iframe,
  .handy-ansicht__content embed,
  .handy-ansicht__content object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Verhindere horizontales Scrollen */
  .handy-ansicht * {
    overflow-x: hidden;
  }

  /* === TOUCH-OPTIMIERTE INTERAKTIVE ELEMENTE === */
  
  /* Buttons - Mindestgröße 48px für Touch, aber proportional kleiner */
  .handy-ansicht button,
  .handy-ansicht [role="button"]:not(input),
  .handy-ansicht [onclick],
  .handy-ansicht [tabindex="0"]:not(input):not(textarea) {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.875rem, 3vw, 1rem) !important;
    font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Links - Mindestgröße 44px */
  .handy-ansicht a {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Input-Felder - 48px Höhe, 16px Schrift (verhindert iOS-Zoom) */
  .handy-ansicht input[type="text"],
  .handy-ansicht input[type="email"],
  .handy-ansicht input[type="tel"],
  .handy-ansicht input[type="password"],
  .handy-ansicht input[type="number"],
  .handy-ansicht input[type="search"],
  .handy-ansicht input[type="url"],
  .handy-ansicht input[type="date"],
  .handy-ansicht input[type="time"],
  .handy-ansicht textarea,
  .handy-ansicht select {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 0.875rem !important;
    width: 100% !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
  }

  /* Checkboxen und Radio-Buttons größer */
  .handy-ansicht input[type="checkbox"],
  .handy-ansicht input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }

  /* Labels für Touch-Targets */
  .handy-ansicht label {
    min-height: 44px !important;
    display: flex;
    align-items: center;
    padding: 0.5rem 0 !important;
    touch-action: manipulation;
  }

  /* === LAYOUT-OPTIMIERUNGEN === */

  /* Grid-Layouts zu 1 Spalte */
  .handy-ansicht [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Flex-Layouts optimieren */
  .handy-ansicht [class*="flex"] {
    flex-wrap: wrap;
  }

  /* Sections - Reduzierte Paddings */
  .handy-ansicht section,
  .handy-ansicht [class*="section"] {
    padding: clamp(2rem, 5vw, 2.5rem) clamp(0.75rem, 3vw, 1rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Container max-width anpassen */
  .handy-ansicht [class*="max-w"] {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Abstände zwischen Elementen */
  .handy-ansicht [class*="gap"] {
    gap: clamp(0.5rem, 2vw, 0.75rem) !important;
  }

  .handy-ansicht [class*="space-y"] > * + * {
    margin-top: clamp(0.75rem, 2.5vw, 1rem) !important;
  }

  /* Margin Bottom für bessere Lesbarkeit */
  .handy-ansicht p + p {
    margin-top: clamp(0.75rem, 2vw, 1rem) !important;
  }

  /* === TYPOGRAFIE-OPTIMIERUNGEN === */
  /* Responsive Schriftgrößen mit clamp() - skaliert automatisch */

  .handy-ansicht h1 {
    font-size: clamp(1.5rem, 5vw, 1.75rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  .handy-ansicht h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.5rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.875rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .handy-ansicht h3 {
    font-size: clamp(1.125rem, 4vw, 1.25rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
    word-wrap: break-word !important;
  }

  .handy-ansicht h4 {
    font-size: clamp(1rem, 3.5vw, 1.125rem) !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
  }

  .handy-ansicht h5 {
    font-size: clamp(0.875rem, 3vw, 1rem) !important;
    line-height: 1.4 !important;
  }

  .handy-ansicht h6 {
    font-size: clamp(0.75rem, 2.5vw, 0.875rem) !important;
    line-height: 1.4 !important;
  }

  .handy-ansicht p {
    font-size: clamp(0.9375rem, 2.5vw, 1rem) !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .handy-ansicht li {
    font-size: clamp(0.9375rem, 2.5vw, 1rem) !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
  }

  /* === UI-KOMPONENTEN === */

  /* Cards */
  .handy-ansicht [class*="card"],
  .handy-ansicht [class*="Card"] {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Forms */
  .handy-ansicht form {
    width: 100%;
  }

  .handy-ansicht form > * {
    margin-bottom: 1rem;
  }

  /* Navigation / PillNav */
  .handy-ansicht nav,
  .handy-ansicht [role="navigation"],
  .handy-ansicht [class*="pill-nav"],
  .handy-ansicht [class*="PillNav"] {
    padding: 0.5rem 0.25rem !important;
    width: 100% !important;
  }

  /* Modals / Dialogs */
  .handy-ansicht [role="dialog"],
  .handy-ansicht [class*="dialog"],
  .handy-ansicht [class*="Dialog"],
  .handy-ansicht [class*="modal"],
  .handy-ansicht [class*="Modal"] {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 1rem auto !important;
    padding: 1rem !important;
  }

  /* Dropdowns / Select-Menüs */
  .handy-ansicht [role="menu"],
  .handy-ansicht [role="listbox"] {
    max-height: 50vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .handy-ansicht [role="menuitem"],
  .handy-ansicht [role="option"] {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
    touch-action: manipulation;
  }

  /* Drawer / Sheet */
  .handy-ansicht [class*="drawer"],
  .handy-ansicht [class*="Drawer"],
  .handy-ansicht [class*="sheet"],
  .handy-ansicht [class*="Sheet"] {
    max-width: 100vw !important;
  }

  /* Tooltips / Popover */
  .handy-ansicht [data-radix-popper-content-wrapper],
  .handy-ansicht [role="tooltip"] {
    max-width: 90vw !important;
    font-size: 0.875rem !important;
  }

  /* Badges - Proportional kleiner */
  .handy-ansicht [class*="badge"],
  .handy-ansicht [class*="Badge"] {
    padding: clamp(0.25rem, 1.5vw, 0.375rem) clamp(0.5rem, 2.5vw, 0.75rem) !important;
    font-size: clamp(0.6875rem, 2vw, 0.75rem) !important;
    min-height: clamp(28px, 8vw, 32px) !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    border-radius: clamp(0.375rem, 2vw, 0.5rem) !important;
  }

  /* Icons - Mindestgrößen */
  .handy-ansicht svg {
    min-width: 16px;
    min-height: 16px;
    flex-shrink: 0;
  }

  .handy-ansicht button svg,
  .handy-ansicht a svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Accordion / Collapsible */
  .handy-ansicht [class*="accordion"],
  .handy-ansicht [class*="Accordion"],
  .handy-ansicht [class*="collapsible"],
  .handy-ansicht [class*="Collapsible"] button {
    min-height: 48px !important;
    padding: 1rem !important;
    width: 100% !important;
  }

  /* Tabs */
  .handy-ansicht [role="tablist"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .handy-ansicht [role="tablist"]::-webkit-scrollbar {
    display: none !important;
  }

  .handy-ansicht [role="tab"] {
    min-height: 48px !important;
    min-width: 80px !important;
    padding: 0.75rem 1rem !important;
    flex-shrink: 0 !important;
  }

  /* === SPEZIELLE KOMPONENTEN === */

  /* Hero-Section */
  .handy-ansicht [id="hero"],
  .handy-ansicht [class*="hero"] {
    padding: 5rem 1rem 3rem !important;
    min-height: auto !important;
  }

  /* Footer */
  .handy-ansicht footer {
    padding: 2rem 1rem !important;
  }

  .handy-ansicht footer [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Fixed Position Elemente */
  .handy-ansicht [class*="fixed"] {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Video / iframe responsive */
  .handy-ansicht iframe,
  .handy-ansicht embed,
  .handy-ansicht object {
    aspect-ratio: 16 / 9;
  }

  /* Toast / Notifications */
  .handy-ansicht [class*="toast"],
  .handy-ansicht [class*="Toast"],
  .handy-ansicht [class*="notification"] {
    min-width: auto !important;
    width: calc(100vw - 2rem) !important;
    max-width: 400px !important;
    margin: 0.5rem !important;
    padding: 1rem !important;
  }

  /* Calendar / Date Picker */
  .handy-ansicht [class*="calendar"],
  .handy-ansicht [class*="Calendar"],
  .handy-ansicht [class*="date-picker"] {
    width: 100% !important;
  }

  .handy-ansicht [class*="calendar"] button,
  .handy-ansicht [class*="Calendar"] button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Tables zu Cards auf Mobile */
  .handy-ansicht table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .handy-ansicht thead {
    display: none;
  }

  .handy-ansicht tbody {
    display: block;
  }

  .handy-ansicht tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 0.75rem;
  }

  .handy-ansicht td {
    display: block;
    text-align: right;
    padding: 0.5rem;
    border: none;
  }

  .handy-ansicht td::before {
    content: attr(data-label) ": ";
    float: left;
    font-weight: bold;
  }

  /* Slider / Range Input */
  .handy-ansicht input[type="range"] {
    height: 8px !important;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
  }

  .handy-ansicht input[type="range"]::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .handy-ansicht input[type="range"]::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Scroll-Container */
  .handy-ansicht [class*="scroll"],
  .handy-ansicht [class*="Scroll"] {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Progress Bars */
  .handy-ansicht [role="progressbar"],
  .handy-ansicht [class*="progress"],
  .handy-ansicht [class*="Progress"] {
    height: 8px !important;
    min-height: 8px !important;
  }

  /* List Items */
  .handy-ansicht li {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
  }

  /* Code Blocks */
  .handy-ansicht pre,
  .handy-ansicht code {
    font-size: 0.875rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Skeleton / Loading */
  .handy-ansicht [class*="skeleton"],
  .handy-ansicht [class*="Skeleton"] {
    min-height: 20px !important;
  }

  /* Spacing zwischen Elementen */
  .handy-ansicht > * + * {
    margin-top: 1rem;
  }

  .handy-ansicht section + section {
    margin-top: 2rem;
  }

  /* ============================================
     SPEZIFISCHE MOBILE-OPTIMIERUNGEN FÜR HAUPTSEITE
     ============================================ */

  /* Hero-Section - Überschrift verkleinern */
  .handy-ansicht [id="hero"] h1,
  .handy-ansicht [class*="hero"] h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.5rem !important;
  }

  .handy-ansicht [id="hero"] h1 span,
  .handy-ansicht [class*="hero"] h1 span {
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Hero-Section Container - Padding anpassen */
  .handy-ansicht [id="hero"] > div[class*="relative"][class*="z-20"],
  .handy-ansicht [id="hero"] > div:last-child,
  .handy-ansicht [id="hero"] > *:last-child {
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero-Section selbst - Höhe anpassen */
  .handy-ansicht [id="hero"],
  .handy-ansicht [id="hero"][class*="h-screen"] {
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding-bottom: 2rem !important;
  }

    /* Container für die Buttons - Wrap in 2-3 Zeilen */
    .handy-ansicht [id="hero"] .flex.flex-wrap,
    .handy-ansicht [class*="hero"] .flex.flex-wrap,
    .handy-ansicht [id="hero"] .flex:has(span[class*="rounded-full"]) {
      justify-content: center !important;
      align-items: center !important;
      gap: 0.4rem 0.3rem !important;
      margin-bottom: 2rem !important;
      margin-top: 1.5rem !important;
      max-width: 100% !important;
      flex-wrap: wrap !important;
      padding: 0 0.5rem !important;
      width: 100% !important;
    }
  
    /* Buttons (Strategieberatung, UX/UI Design, etc.) - Text passt exakt */
    .handy-ansicht [id="hero"] .flex.flex-wrap > span,
    .handy-ansicht [id="hero"] span[class*="rounded-full"],
    .handy-ansicht [class*="hero"] span[class*="rounded-full"],
    .handy-ansicht [id="hero"] .flex > span[class*="rounded-full"] {
      font-size: clamp(0.7rem, 2.5vw, 0.8rem) !important;
      padding: 0.4rem 0.6rem !important;
      margin: 0 !important;
      white-space: nowrap !important;
      text-align: center !important;
      line-height: 1.2 !important;
      min-height: auto !important;
      height: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 1 auto !important; /* Größe basierend auf Inhalt */
      width: auto !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      border-radius: 9999px !important;
      overflow: visible !important; /* Text soll sichtbar sein */
      text-overflow: clip !important;
    }
  
    /* Falls Buttons zu breit sind, erst dann umbrechen oder kleiner werden */
    @media (max-width: 360px) {
      .handy-ansicht [id="hero"] span[class*="rounded-full"] {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.5rem !important;
      }
    }

  /* CTA-Button Container - Zentriert, vollbreit */
  .handy-ansicht [id="hero"] .flex.flex-col,
  .handy-ansicht [id="hero"] .flex[class*="flex-col"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* CTA-Button - Vollbreit, mittig, mit Rundungen */
  .handy-ansicht [id="hero"] button:has(svg),
  .handy-ansicht [id="hero"] button[class*="rounded-full"]:has(svg),
  .handy-ansicht [id="hero"] .flex[class*="flex-col"] > button,
  .handy-ansicht [class*="hero"] button[class*="rounded-full"]:has(svg) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: clamp(0.875rem, 3vw, 1rem) clamp(1.25rem, 4vw, 1.5rem) !important;
    border-radius: 9999px !important;
    font-size: clamp(0.875rem, 3vw, 0.9375rem) !important;
    font-weight: 600 !important;
    min-height: clamp(48px, 12vw, 56px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Icons im CTA-Button */
  .handy-ansicht [id="hero"] button svg,
  .handy-ansicht [class*="hero"] button svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    margin-right: 0.75rem !important;
  }

  /* LogoLoop / Partner Logos - Unter CTA, zentriert untereinander */
  .handy-ansicht [id="hero"] .logo-loop-container,
  .handy-ansicht [id="hero"] [class*="logo-loop-container"],
  .handy-ansicht .logo-loop-container {
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 1rem !important;
  }

  .handy-ansicht .logo-loop-inner,
  .handy-ansicht [class*="logo-loop-inner"] {
    height: 110px !important;
    max-height: 110px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-bottom: 1rem !important;
  }

  /* LogoLoop SVG/Logos kleiner auf Mobile */
  .handy-ansicht .logo-loop-container svg,
  .handy-ansicht [class*="logo-loop"] svg {
    max-width: 80px !important;
    max-height: 80px !important;
  }

  /* Navigation - Mobile zusammenklappbar, schmaler */
  .handy-ansicht [class*="fixed"][class*="z-40"][class*="top"] {
    top: 0.5rem !important; /* ⭐ Abstand von oben - ÄNDERE HIER */
    left: 1rem !important; /* ⭐ Abstand links - ÄNDERE HIER für Breite */
    right: 1rem !important; /* ⭐ Abstand rechts - ÄNDERE HIER für Breite */
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: calc(100% - 2rem) !important;
  }

  /* GlassSurface Größe - HIER DIE GRÖSSE ÄNDERN */
  .handy-ansicht .glass-surface,
  .handy-ansicht [class*="glass-surface"],
  .handy-ansicht [class*="GlassSurface"] {
    min-height: 10px !important; /* Kompakter - ÄNDERE DIESEN WERT FÜR DIE HÖHE */
    padding: 0.375rem 1rem !important; /* Weniger Padding oben/unten = kompakter */
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* PillNav - Kompakt auf Mobile, Logo sichtbar, Menu versteckt */
  .handy-ansicht [class*="pill-nav-container"] {
    width: 100% !important;
  }

  .handy-ansicht .pill-nav-items,
  .handy-ansicht [class*="pill-nav-items"] {
    display: none !important;
  }

  .handy-ansicht .pill-logo {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .handy-ansicht .pill-logo img {
    width: 100% !important;
    height: 100% !important;
  }

  /* Kontakt-Button in Nav verstecken auf Mobile */
  .handy-ansicht [class*="hidden"][class*="md:block"] {
    display: none !important;
  }

  /* Navigation Container schmaler */
  .handy-ansicht [class*="fixed"][class*="z-40"] > div {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Glass Navbar gezielt ausblenden (nur die fixe Top-Bar) und GooeyNav einblenden */
  .handy-ansicht .fixed.left-0.right-0.z-40,
  .handy-ansicht .fixed.left-0.right-0.z-40 .glass-surface,
  .handy-ansicht .fixed.left-0.right-0.z-40 [class*="glass-surface"],
  .handy-ansicht .fixed.left-0.right-0.z-40 [class*="GlassSurface"] {
    display: none !important;
  }

  .handy-ansicht__nav-wrapper {
    position: fixed; /* Fixed statt Sticky für sicheren Halt */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    padding: 1rem 0.75rem 0.5rem;
    background: transparent !important;
    pointer-events: none; /* Klicks gehen durch leere Bereiche durch */
  }

  .gooey-nav-container {
    pointer-events: auto; /* Buttons wieder klickbar machen */
    width: 100%;
    max-width: 100%;
  }

  /* Platzhalter für Content, damit er nicht hinter der Fixed Nav verschwindet */
  .handy-ansicht__content {
    padding-top: 0; /* Nav ist transparent, Content darf dahinter scrollen */
  }

  /* GooeyNav Styles (nur Mobile) - Original Snippet angepasst für Mobile */
  :root {
    --linear-ease: linear(
      0, 0.068, 0.19 2.7%, 0.804 8.1%, 1.037, 1.199 13.2%, 1.245, 1.27 15.8%,
      1.274, 1.272 17.4%, 1.249 19.1%, 0.996 28%, 0.949, 0.928 33.3%, 0.926,
      0.933 36.8%, 1.001 45.6%, 1.013, 1.019 50.8%, 1.018 54.4%, 1 63.1%,
      0.995 68%, 1.001 85%, 1
    );
  }

  .gooey-nav-container {
    position: relative;
    width: 100%;
    pointer-events: auto;
  }

  .gooey-nav-container nav {
    display: flex;
    position: relative;
    transform: translate3d(0, 0, 0.01px);
    width: 100%;
    justify-content: center;
    padding: 0 0.5rem; /* Kleiner Abstand zum Rand */
  }

  .gooey-nav-container nav ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0.5rem 0.5rem; 
    margin: 0;
    position: relative;
    z-index: 50; /* Z-Index hoch setzen damit es über dem Overlay ist */
    color: white;
    text-shadow: 0 1px 1px hsl(205deg 30% 10% / 0.2);
    justify-content: space-between; 
    width: 94%; 
    max-width: 400px; 
    
    /* Glass Bar Container Styles (wie PC Ansicht) */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
    border-radius: 9999px !important;

    overflow-x: visible; /* Wichtig für Shadow/Glow */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gooey-nav-container nav ul::-webkit-scrollbar {
    display: none;
  }

  .gooey-nav-container nav ul li {
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 0.5px 1.5px transparent;
    color: white;
    flex: 1 1 0px; /* Erzwingt exakt gleiche Breite für alle */
    width: 0; /* Wichtig für flex: 1 Verteilung */
    min-width: 0; /* Überschreibt fit-content, damit Text die Breite nicht diktiert */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Padding im Link */
    margin: 0;
  }

  .gooey-nav-container nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem; /* Weniger seitliches Padding */
    font-size: clamp(0.75rem, 2.5vw, 0.9rem); /* Standardgröße etwas kleiner als vorher */
    font-weight: 600; /* Dickerer Text für bessere Lesbarkeit */
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Text abschneiden falls zu lang */
    text-overflow: ellipsis;
    transition: font-size 0.3s ease;
  }

  /* Logo Image Styles */
  .nav-logo-img {
    height: 24px; /* Fixe Höhe für Logo */
    width: auto;
    object-fit: contain;
  }
  
  /* Logo Item Specifics */
  .gooey-nav-container nav ul li.nav-item-menu {
    flex: 0 0 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2); /* Hellerer Hintergrund für Ball-Look */
    border-radius: 50%; /* Sicherstellen dass es ein Kreis ist */
    backdrop-filter: blur(4px);
  }

  .gooey-nav-container nav ul li.nav-item-menu a {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  /* Overlay Menu */
  .mobile-menu-items {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Full screen overlay */
    background: rgba(0, 0, 0, 0.6); /* Dim background */
    backdrop-filter: blur(4px);
    padding: 7rem 1rem 2rem; /* ⭐ MEHR PLATZ OBEN: Von 5rem auf 7rem erhöht */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    z-index: -1; /* Hinter der Nav-Bar */
    pointer-events: auto;
  }

  .mobile-menu-items.open {
    display: flex;
    animation: fadeIn 0.3s ease-out forwards;
  }
  
  .mobile-menu-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 300px; /* Nicht zu breit */
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .mobile-menu-items li {
    /* Base style */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    padding: 1rem;
    text-align: center;
    color: white; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateX(100vw);
    opacity: 0;
    animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Feld-zu-Feld Farbverlauf (Branding Farben) */
  .mobile-menu-items li:nth-child(1) {
    background: #819067; 
    animation-delay: 0.1s;
  }
  .mobile-menu-items li:nth-child(2) {
    background: #819067;
    animation-delay: 0.15s;
  }
  .mobile-menu-items li:nth-child(3) {
    background: #819067;
    animation-delay: 0.2s;
  }
  .mobile-menu-items li:nth-child(4) {
    background: #819067;
    animation-delay: 0.25s;
  }
  
  .mobile-menu-items li:active {
    transform: scale(0.96) translateX(0);
    filter: brightness(1.1); /* Beim Klicken etwas aufhellen */
  }

  /* Grüne Felder mit Verlauf - Cleanup duplicate block */
  /* (Dieser Block wurde entfernt, da er oben integriert ist) */

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(100vw); /* Start außerhalb */
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Verstecke Gooey Effekte für den neuen Modus */
  .gooey-nav-container .effect {
    display: none !important;
  }

  .gooey-nav-container nav ul li:focus-within:has(:focus-visible) {
    box-shadow: 0 0 0.5px 1.5px white;
  }

  .gooey-nav-container nav ul li::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: white;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    z-index: -1;
  }

  .gooey-nav-container nav ul li.active {
    color: black;
    text-shadow: none;
  }

  .gooey-nav-container nav ul li.active::after {
    opacity: 1;
    transform: scale(1);
  }

  .gooey-nav-container .effect {
    display: none !important; /* Gooey-Effekt deaktiviert, da "shitty"/uneven */
  }

  /* Aktiver State - einfacher weißer Hintergrund-Pill */
  .gooey-nav-container nav ul li.active {
    color: #0f172a; /* Dunkler Text für Kontrast */
    text-shadow: none;
    font-weight: 600;
  }

  .gooey-nav-container nav ul li::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.95);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: -1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .gooey-nav-container nav ul li.active::after {
    opacity: 1;
    transform: scale(1);
  }

  /* Inaktive Items */
  .gooey-nav-container nav ul li:not(.active) {
    background: rgba(0, 0, 0, 0.2); /* Leichter Hintergrund für Lesbarkeit */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @keyframes pill {
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .particle,
  .point {
    display: block;
    opacity: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    transform-origin: center;
  }

  .particle {
    --time: 5s;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    animation: particle calc(var(--time)) ease 1 -350ms;
  }

  .point {
    background: var(--color);
    opacity: 1;
    animation: point calc(var(--time)) ease 1 -350ms;
  }

  @keyframes particle {
    0% {
      transform: rotate(0deg) translate(calc(var(--start-x)), calc(var(--start-y)));
      opacity: 1;
      animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }

    70% {
      transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
      opacity: 1;
      animation-timing-function: ease;
    }

    85% {
      transform: rotate(calc(var(--rotate) * 0.66)) translate(calc(var(--end-x)), calc(var(--end-y)));
      opacity: 1;
    }

    100% {
      transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
      opacity: 1;
    }
  }

  @keyframes point {
    0% {
      transform: scale(0);
      opacity: 0;
      animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }

    25% {
      transform: scale(calc(var(--scale) * 0.25));
    }

    38% {
      opacity: 1;
    }

    65% {
      transform: scale(var(--scale));
      opacity: 1;
      animation-timing-function: ease;
    }

    85% {
      transform: scale(var(--scale));
      opacity: 1;
    }

    100% {
      transform: scale(0);
      opacity: 0;
    }
  }

  /* ============================================
     GLASSURFACE & NAVIGATION - KOMPLETT STEUERBAR
     Höhere Spezifität überschreibt alles!
     Alle Werte mit ⭐ können angepasst werden
     ============================================ */

  /* GLASSURFACE HÖHE & PADDING (überschreibt inline styles!) */
  .handy-ansicht [class*="fixed"][class*="z-40"] .glass-surface[style],
  .handy-ansicht [class*="fixed"][class*="z-40"] [class*="glass-surface"][style],
  .handy-ansicht [class*="fixed"][class*="z-40"] .glass-surface.glass-surface--svg {
    min-height: 50px !important; /* ⭐ GLASSURFACE HÖHE - ÄNDERE HIER (40px, 50px, 60px, 70px) */
    padding-top: 0.375rem !important; /* ⭐ Padding oben - ÄNDERE HIER */
    padding-bottom: 0.375rem !important; /* ⭐ Padding unten - ÄNDERE HIER */
    padding-left: 1rem !important; /* ⭐ Padding links - ÄNDERE HIER */
    padding-right: 1rem !important; /* ⭐ Padding rechts - ÄNDERE HIER */
    box-sizing: border-box !important;
  }

  /* PILL NAV CONTAINER - Abstand zwischen Elementen */
  .handy-ansicht [class*="fixed"][class*="z-40"] [class*="pill-nav-container"],
  .handy-ansicht [class*="fixed"][class*="z-40"] .pill-nav-container {
    gap: 0.5rem !important; /* ⭐ Abstand Logo ↔ Menu Button - ÄNDERE HIER */
  }

  /* LOGO - BREITE & HÖHE */
  .handy-ansicht [class*="fixed"][class*="z-40"] .pill-logo,
  .handy-ansicht [class*="fixed"][class*="z-40"] [class*="pill-logo"] {
    width: 40px !important; /* ⭐ LOGO BREITE - ÄNDERE HIER (30px, 35px, 40px, 45px) */
    height: 40px !important; /* ⭐ LOGO HÖHE - ÄNDERE HIER (30px, 35px, 40px, 45px) */
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 6px !important; /* ⭐ Logo Padding - ÄNDERE HIER */
  }

  /* LOGO BILD */
  .handy-ansicht [class*="fixed"][class*="z-40"] .pill-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* MENU BUTTON (Hamburger) - BREITE & HÖHE */
  .handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button,
  .handy-ansicht [class*="fixed"][class*="z-40"] [class*="mobile-menu-button"],
  .handy-ansicht [class*="fixed"][class*="z-40"] .pill-nav > button:last-child,
  .handy-ansicht [class*="fixed"][class*="z-40"] button[aria-label*="menu" i] {
    width: 40px !important; /* ⭐ MENU BUTTON BREITE - ÄNDERE HIER (35px, 40px, 45px) */
    height: 40px !important; /* ⭐ MENU BUTTON HÖHE - ÄNDERE HIER (35px, 40px, 45px) */
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 8px !important; /* ⭐ Button Padding - ÄNDERE HIER */
  }

  /* HAMBURGER ICON (SVG) */
  .handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button svg,
  .handy-ansicht [class*="fixed"][class*="z-40"] [class*="mobile-menu-button"] svg {
    width: 20px !important; /* ⭐ ICON BREITE - ÄNDERE HIER */
    height: 20px !important; /* ⭐ ICON HÖHE - ÄNDERE HIER */
  }

  /* Footer - Unten mit Icon, kompakt */
  .handy-ansicht footer {
    position: relative !important;
    padding: 2rem 1rem 3rem !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    border-top-width: 1px !important;
  }

  .handy-ansicht footer [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }

  .handy-ansicht footer h4 {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .handy-ansicht footer ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .handy-ansicht footer li {
    width: 100% !important;
    text-align: center !important;
  }

  /* Hero-Section Video/Background - Mobile optimiert */
  .handy-ansicht [id="hero"] video,
  .handy-ansicht [id="hero"] [class*="absolute"][class*="inset-0"] {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Sections allgemein - Abstände optimieren */
  .handy-ansicht section {
    margin-bottom: 1.5rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Rounded corners für Sections reduzieren */
  .handy-ansicht section[class*="rounded"] {
    border-radius: 1.5rem !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  /* About Section - Text nicht mehrspaltig */
  .handy-ansicht section[class*="columnCount"],
  .handy-ansicht [style*="column-count"] {
    column-count: 1 !important;
    column-gap: 0 !important;
  }

  /* Cookie Button Position */
  .handy-ansicht button[class*="fixed"][class*="bottom"] {
    bottom: 1rem !important;
    left: 1rem !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
  }

  /* Verhindere Overlaps */
  .handy-ansicht * {
    max-width: 100vw !important;
  }

  /* Zentrierung für wichtige Elemente */
  .handy-ansicht [class*="text-center"],
  .handy-ansicht [style*="text-align: center"] {
    text-align: center !important;
  }

  /* Flex-Center auf Mobile */
  .handy-ansicht [class*="flex"][class*="items-center"],
  .handy-ansicht [class*="flex"][class*="justify-center"] {
    justify-content: center !important;
    align-items: center !important;
  }

  /* Mobile-Menü Popover optimieren */
  .handy-ansicht .mobile-menu-popover {
    left: 0.5rem !important;
    right: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  /* Mobile-Menü Links */
  .handy-ansicht .mobile-menu-link {
    min-height: 48px !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
  }

  /* Services/About/Process Sections - Kompakt */
  .handy-ansicht section[id*="about"],
  .handy-ansicht section[id*="services"],
  .handy-ansicht section[id*="process"],
  .handy-ansicht section[id*="references"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* SpinningNumbers kleiner auf Mobile */
  .handy-ansicht [class*="spinning-number"],
  .handy-ansicht .spinning-number {
    min-height: 250px !important;
    font-size: 0.7em !important;
  }

  /* Timeline kompakt */
  .handy-ansicht [class*="timeline"] {
    padding: 1rem !important;
  }

  /* HoverEffect Cards - Mobile Stack */
  .handy-ansicht [class*="hover-effect"],
  .handy-ansicht [class*="HoverEffect"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* BackgroundBeams reduzieren */
  .handy-ansicht [class*="background-beams"],
  .handy-ansicht [class*="BackgroundBeams"] {
    opacity: 0.5 !important;
  }

  /* HeroScrollDemo kompakt */
  .handy-ansicht [class*="container-scroll"] {
    height: auto !important;
    min-height: auto !important;
    padding: 1rem !important;
  }
}

/* ============================================
   OPTIMIERUNG FÜR SEHR KLEINE GERÄTE (max-width: 480px)
   iPhone SE, kleine Android-Geräte
   ============================================ */

@media (max-width: 480px) {
  /* === EXTRA KOMPAKTE TYPOGRAFIE === */
  
  .handy-ansicht h1 {
    font-size: clamp(1.375rem, 6vw, 1.625rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.875rem !important;
    padding: 0 0.5rem !important;
  }

  .handy-ansicht h2 {
    font-size: clamp(1.125rem, 5vw, 1.375rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }

  .handy-ansicht h3 {
    font-size: clamp(1rem, 4vw, 1.125rem) !important;
    line-height: 1.3 !important;
  }

  .handy-ansicht p {
    font-size: clamp(0.875rem, 3vw, 0.9375rem) !important;
    line-height: 1.5 !important;
  }

  /* === KOMPAKTE BUTTONS & BADGES === */
  
  .handy-ansicht button,
  .handy-ansicht [role="button"]:not(input) {
    min-height: 42px !important;
    min-width: 42px !important;
    padding: 0.625rem 0.875rem !important;
    font-size: clamp(0.8125rem, 3vw, 0.9375rem) !important;
  }

  .handy-ansicht [class*="badge"],
  .handy-ansicht [class*="Badge"] {
    padding: 0.25rem 0.5rem !important;
    font-size: clamp(0.625rem, 2.5vw, 0.6875rem) !important;
    min-height: 26px !important;
  }

  /* === HERO SECTION - EXTRA KOMPAKT === */
  
  .handy-ansicht [id="hero"],
  .handy-ansicht [class*="hero"] {
    padding: 4rem 0.75rem 2.5rem !important;
  }

  .handy-ansicht [id="hero"] h1 {
    font-size: clamp(1.25rem, 7vw, 1.5rem) !important;
    margin-bottom: 1rem !important;
    padding: 0 0.25rem !important;
  }

  /* Hero Buttons (Strategieberatung, etc.) - Extra kompakt */
  .handy-ansicht [id="hero"] span[class*="rounded-full"] {
    font-size: clamp(0.625rem, 3vw, 0.75rem) !important;
    padding: 0.375rem 0.625rem !important;
    min-height: 32px !important;
    flex: 0 1 100% !important; /* 1 Button pro Zeile auf sehr kleinen Screens */
    max-width: 100% !important;
    min-width: 100% !important;
  }

  /* CTA Button - Extra kompakt */
  .handy-ansicht [id="hero"] button[class*="rounded-full"]:has(svg),
  .handy-ansicht [id="hero"] button:has(svg) {
    padding: 0.875rem 1.25rem !important;
    font-size: clamp(0.875rem, 3.5vw, 0.9375rem) !important;
    min-height: 48px !important;
  }

  /* === NAVIGATION - EXTRA SCHMAL === */
  
  .handy-ansicht [class*="fixed"][class*="z-40"][class*="top"] {
    left: 0.5rem !important;
    right: 0.5rem !important;
    top: 0.375rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .handy-ansicht [class*="fixed"][class*="z-40"] .glass-surface[style],
  .handy-ansicht [class*="fixed"][class*="z-40"] [class*="glass-surface"][style] {
    min-height: 44px !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Logo & Menu Button - Kleiner */
  .handy-ansicht [class*="fixed"][class*="z-40"] .pill-logo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 5px !important;
  }

  .handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button,
  .handy-ansicht [class*="fixed"][class*="z-40"] button[aria-label*="menu" i] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px !important;
  }

  .handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* === SECTIONS - REDUZIERTE ABSTÄNDE === */
  
  .handy-ansicht section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* === ICONS - KOMPAKT & ZENTRIERT === */
  
  .handy-ansicht svg {
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 100% !important;
  }

  .handy-ansicht button svg,
  .handy-ansicht a svg {
    width: clamp(1rem, 4vw, 1.125rem) !important;
    height: clamp(1rem, 4vw, 1.125rem) !important;
    margin: 0 auto !important;
  }

  /* === CONTAINER & SPACING === */
  
  .handy-ansicht [class*="max-w"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .handy-ansicht [class*="gap"] {
    gap: 0.5rem !important;
  }

  .handy-ansicht [class*="space-y"] > * + * {
    margin-top: 0.75rem !important;
  }

  /* === CARDS & CONTAINERS === */
  
  .handy-ansicht [class*="card"],
  .handy-ansicht [class*="Card"] {
    padding: 0.875rem !important;
    margin-bottom: 0.875rem !important;
    border-radius: clamp(0.75rem, 3vw, 1rem) !important;
  }

  /* === FORMS === */
  
  .handy-ansicht input[type="text"],
  .handy-ansicht input[type="email"],
  .handy-ansicht textarea,
  .handy-ansicht select {
    min-height: 44px !important;
    padding: 0.75rem !important;
    font-size: 16px !important; /* Wichtig: verhindert iOS-Zoom */
  }

  /* === FOOTER - KOMPAKT === */
  
  .handy-ansicht footer {
    padding: 1.5rem 0.75rem 2rem !important;
  }

  .handy-ansicht footer h4 {
    font-size: clamp(0.9375rem, 3vw, 1rem) !important;
    margin-bottom: 0.75rem !important;
  }

  /* === MODALS & POPOVERS === */
  
  .handy-ansicht [role="dialog"],
  .handy-ansicht [class*="modal"],
  .handy-ansicht [class*="Modal"] {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    margin: 0.5rem auto !important;
    padding: 0.875rem !important;
  }

  .handy-ansicht .mobile-menu-popover {
    left: 0.25rem !important;
    right: 0.25rem !important;
    max-width: calc(100vw - 0.5rem) !important;
  }

  /* === TABLES === */
  
  .handy-ansicht tr {
    margin-bottom: 0.75rem !important;
    padding: 0.625rem !important;
  }

  .handy-ansicht td {
    padding: 0.375rem !important;
    font-size: clamp(0.8125rem, 3vw, 0.875rem) !important;
  }

  /* === LOGO LOOP / PARTNER LOGOS === */
  
  .handy-ansicht .logo-loop-container {
    margin-top: 2rem !important;
    padding: 0 0.75rem !important;
  }

  .handy-ansicht .logo-loop-inner {
    height: 90px !important;
    max-height: 90px !important;
  }

  .handy-ansicht .logo-loop-container svg {
    max-width: 60px !important;
    max-height: 60px !important;
  }

  /* === VERHINDERE HORIZONTALES SCROLLEN === */
  
  .handy-ansicht * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === ROUNDED ELEMENTS - PROPORTIONAL KLEINER === */
  
  .handy-ansicht [class*="rounded-full"] {
    border-radius: 9999px !important; /* Behält runde Form */
    padding: clamp(0.375rem, 2vw, 0.5rem) clamp(0.625rem, 3vw, 0.75rem) !important;
  }

  .handy-ansicht [class*="rounded-lg"],
  .handy-ansicht [class*="rounded-xl"] {
    border-radius: clamp(0.5rem, 2vw, 0.75rem) !important;
  }

  /* === ZENTRIERUNG VERBESSERN === */
  
  .handy-ansicht [class*="flex"][class*="items-center"] {
    align-items: center !important;
    justify-content: center !important;
  }

  .handy-ansicht [class*="text-center"] {
    text-align: center !important;
  }

  /* === TOUCH TARGETS - OPTIMIERT === */
  
  .handy-ansicht a,
  .handy-ansicht [role="menuitem"],
  .handy-ansicht [role="option"] {
    min-height: 42px !important;
    padding: 0.5rem !important;
  }

  /* === ACCORDION & TABS === */
  
  .handy-ansicht [class*="accordion"] button,
  .handy-ansicht [role="tab"] {
    min-height: 44px !important;
    padding: 0.75rem !important;
    font-size: clamp(0.8125rem, 3vw, 0.9375rem) !important;
  }

  /* === PROGRESS BARS === */
  
  .handy-ansicht [role="progressbar"],
  .handy-ansicht [class*="progress"] {
    height: 6px !important;
    min-height: 6px !important;
  }

  /* === SPINNING NUMBERS === */
  
  .handy-ansicht [class*="spinning-number"] {
    min-height: 200px !important;
    font-size: 0.6em !important;
  }

  /* === BACKGROUND ELEMENTS === */
  
  .handy-ansicht [class*="background-beams"] {
    opacity: 0.3 !important; /* Weniger aufdringlich auf kleinen Screens */
  }
}

/* Desktop - Wrapper transparent (nur für Struktur) */
@media (min-width: 768px) {
  .handy-ansicht {
    display: block;
  }

  .handy-ansicht__container {
    display: block;
  }

  .handy-ansicht__content {
    display: block;
  }
}