/* Landing-Page-Styles — extrahiert aus dem <style>-Block von index.html (2026-07-05).
   Bewusst in public/ mit absolutem Link (/landing.css?v=N) statt als Vite-Quelldatei:
   Vite hebt verarbeitete CSS-Links ans Ende des <head> — dieser Block muss aber VOR
   main.css/therapeut-builder.css bleiben (Kaskaden-Reihenfolge wie zuvor inline).
   Bei Änderungen: ?v=N im <link> in index.html hochzählen (Cache-Busting). */

    /* Landing Page: Enable scrolling (override style.css overflow:hidden) */
    html, body {
      overflow-x: hidden !important; /* kein seitliches Verschieben (wie auf dem Handy) */
      overflow-y: auto !important;
      height: auto !important;
      background: #f7f7f9 !important; /* Gleicher Hintergrund wie therapeut.html */
    }

    main.container {
      overflow: visible !important;
    }

    /* CSS Custom Properties: Space Scale (from test-games.html) */
    :root {
      /* Fluid Space Scale (Design System) */
      --space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
      --space-xs:  clamp(0.5rem, 1vw, 0.75rem);
      --space-s:   clamp(0.75rem, 1.5vw, 1rem);
      --space-m:   clamp(1rem, 2vw, 1.5rem);
      --space-l:   clamp(1.5rem, 3vw, 2rem);
      --space-xl:  clamp(2rem, 4vw, 3rem);
      --space-2xl: clamp(3rem, 6vw, 5rem);
    }

    /* Game Container Styles */
    .game-container {
      /* Container Query aktivieren */
      container-type: inline-size;
      container-name: game;

      /* Fullscreen overlay */
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      /* Viewport Height: --app-height wird von visualViewport.height gesetzt */
      height: 100vh;                     /* Fallback für uralte Browser */
      height: var(--app-height, 100dvh); /* visualViewport → exakt sichtbar */
      padding-bottom: env(safe-area-inset-bottom, 0px);
      box-sizing: border-box;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      z-index: 9999;
      display: none;

      /* CSS Grid Layout */
      grid-template-areas:
        "content controls"
        "bottom  bottom";
      grid-template-columns: 1fr auto;
      grid-template-rows: 1fr auto;
      gap: 0;
    }

    .game-container.active {
      display: grid;
    }

    /* iOS Fullscreen Mode - CSS-based fullscreen for Safari */
    .game-container.ios-fullscreen {
      /* Ensure full viewport coverage */
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important; /* Dynamic viewport for iOS */
      z-index: 999999 !important;
      /* Prevent any scrolling that could bring Safari UI back */
      overflow: hidden !important;
      touch-action: none;
      overscroll-behavior: none;
    }

    /* Lock body when iOS fullscreen is active */
    body.ios-fullscreen-active {
      overflow: hidden !important;
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
      touch-action: none;
      overscroll-behavior: none;
    }

    /* Grid Areas */
    .game-mount-point {
      grid-area: content;
      width: 100%;
      height: 100%;
      overflow: visible;
      display: flex;
      flex-direction: column;
    }

    .game-controls--vertical {
      grid-area: controls;
      position: relative !important;
      top: auto !important;
      right: auto !important;
      width: auto !important;
      height: auto !important;
      /* Transparent - game-container Gradient durchscheinen lassen */
      background: transparent;
    }

    /* MultiSetDisplay nutzt position:fixed aus MultiSetDisplay.css */

    /* Responsive: Portrait */
    @media (orientation: portrait) {
      .game-container.active {
        grid-template-areas:
          "controls"
          "content"
          "bottom";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
      }

      .game-controls--vertical {
        flex-direction: row;
        justify-content: space-between;
        padding: var(--space-s);
      }
    }

    /* Responsive: Landscape */
    @media (orientation: landscape) {
      .game-container.active {
        grid-template-areas:
          "content controls"
          "bottom  bottom";
        grid-template-columns: 1fr auto;
        grid-template-rows: 1fr auto;
      }

      .game-controls--vertical {
        flex-direction: column;
        align-items: flex-end;
        padding: var(--space-m);
      }
    }

    /* Modal-Styles sind jetzt in game-launch-modal.css */

    /* Settings Modal Styles */
    .settings-group {
      margin-bottom: 1.5rem;
    }

    .settings-label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
      color: #4B5563;
      font-size: 0.875rem;
    }

    .settings-select {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 1rem;
      background: white;
      cursor: pointer;
      transition: border-color 0.2s;
    }

    .settings-select:hover {
      border-color: #cbd5e1;
    }

    .settings-select:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .button-group {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .btn-toggle {
      flex: 1;
      min-width: 100px;
      padding: 0.75rem 1rem;
      border: 2px solid #e2e8f0;
      background: white;
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-toggle:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .btn-toggle.active {
      border-color: #667eea;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    .btn-toggle:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* List Selection Styles - Match test-games.html */
    .list-selection-container {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1rem;
      padding: 0.75rem;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      min-height: 60px;
    }

    .list-selection-row {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .list-select {
      flex: 1;
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      background: white;
      color: #4B5563;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .list-select:hover {
      border-color: #cbd5e1;
    }

    .list-select:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .btn-delete-list {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border: none;
      background: transparent;
      color: #e74c3c;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .btn-delete-list:hover {
      background: rgba(231, 76, 60, 0.1);
      transform: scale(1.05);
    }

    .btn-delete-list:active {
      transform: scale(0.95);
    }

    .btn-add-list {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.65rem 1.25rem;
      border: 2px solid #e2e8f0;
      background: white;
      color: #64748b;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s;
      width: fit-content;
      margin-left: auto;
      display: block;
    }

    .btn-add-list:hover {
      border-color: #667eea;
      color: #667eea;
      background: #f8fafc;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    }

    /* Progress Dots - Force green color (override therapeut-builder.css blue) */
    .progress-dot.active {
      background: #10b981 !important;
      box-shadow: 0 0 0 3px #d1fae5, 0 2px 8px rgba(16, 185, 129, 0.4) !important;
    }

    .progress-dot.completed {
      background: #10b981 !important;
    }

    /* Public Page: Hide Subnav completely */
    .therapeut-subnav,
    .therapeut-sub-subnav {
      display: none !important;
    }

    /* =============================================================
       iOS/MOBILE FIX - Komplett neuer Header-Style für Tablets/Phones
       Diese Styles überschreiben ALLE komplexen CSS-Regeln
       ============================================================= */

    @media (max-width: 900px) {
      /* Blobs auf Mobile komplett ausblenden (Performance + cleanes Design) */
      .welcome-blobs {
        display: none !important;
      }

      /* HEADER: Landing Page - transparent */
      body.landing-page .app-header {
        z-index: 9999 !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
      }
    }

    /* Kompakt-Header-Reconfiguration NUR ≤768px: ab 769px ist der volle Desktop-.app-header
       aktiv (auch iPad 7 Portrait = 810px). Bei ≤768 ist der .app-header ohnehin versteckt
       (mobile-simple-header) -> diese Regeln laufen ins Leere. Frueher lag die Grenze bei
       900px und blendete bei 810px die Wortmarke (.app-header__logo-text) aus -> Logo weg. */
    @media (max-width: 768px) {
      /* LEFT: Logo */
      .app-header__left {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-shrink: 0 !important;
      }

      .app-header__logo {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
      }

      .app-header__logo-img {
        width: 32px !important;
        height: auto !important;
      }

      .app-header__logo-text {
        display: none !important;
      }

      .app-header__brand {
        all: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #4B5563 !important;
        -webkit-text-fill-color: #4B5563 !important;
      }

      .app-header__brand--bold {
        all: unset !important;
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
      }

      /* CENTER: Navigation */
      .app-header__nav {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
      }

      .app-header__nav-tabs {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
      }

      .app-header__nav-link,
      .app-header__dropdown-trigger {
        all: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #64748b !important;
        -webkit-text-fill-color: #64748b !important;
        background: transparent !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        gap: 4px !important;
        box-sizing: border-box !important;
      }

      .app-header__dropdown {
        all: unset !important;
        display: inline-flex !important;
        position: relative !important;
      }

      .app-header__dropdown-menu {
        display: none !important;
      }

      /* RIGHT: Buttons */
      .app-header__right {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        gap: 8px !important;
      }

      .app-header__actions {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
      }

      .app-header__login-button {
        all: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #667eea !important;
        -webkit-text-fill-color: #667eea !important;
        background: white !important;
        border: 1px solid #667eea !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
      }

      .app-header__cta-button {
        all: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: white !important;
        -webkit-text-fill-color: white !important;
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
      }
    }

    /* Public Page: Full-width content */
    .therapeut-main {
      margin-top: 0 !important;
      padding-top: 2rem;
    }

    /* Public Page: Make all-exercises panel visible by default */
    .therapeut-panel[data-subview-panel="all-exercises"] {
      display: block !important;
      visibility: visible !important;
    }

    /* Public Page: Navigation Links */
    .app-header__nav-link {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      color: var(--color-text-secondary, #64748b);
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
      border-radius: 6px;
      transition: all 0.2s;
    }

    .app-header__nav-link:hover {
      color: var(--color-text-primary, #4B5563);
      background: var(--color-surface-hover, #f1f5f9);
    }

    /* Info Dropdown - Container müssen overflow visible haben */
    .app-header,
    .app-header__nav,
    .app-header__nav-tabs,
    .app-header__dropdown {
      overflow: visible !important;
    }

    .app-header__dropdown {
      position: relative !important;
      border: none !important;
      outline: none !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 !important;
      min-width: auto !important;
      width: auto !important;
    }

    /* === TABLET OVERRIDE für Landing Page (769px - 900px) === */
    /* Navigation auf Tablets sichtbar halten, aber auf Phones (≤768px) verstecken */
    @media (min-width: 769px) and (max-width: 900px) {
      .app-header__nav {
        display: flex !important;
      }
      .app-header__nav-tabs {
        display: flex !important;
        gap: 0.25rem;
      }
    }

    @media (max-width: 900px) {
      .app-header__nav-link,
      .app-header__dropdown-trigger {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
        color: #64748b !important;
        -webkit-text-fill-color: #64748b !important; /* iOS Fix! */
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
      }
      .app-header__right {
        display: flex !important;
      }
      .app-header__actions {
        display: flex !important;
        gap: 0.5rem;
      }
      .app-header__login-button {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
        color: #667eea !important;
        -webkit-text-fill-color: #667eea !important; /* iOS Fix! */
        border: 1px solid #667eea !important;
        background: white !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
      .app-header__cta-button {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
        color: white !important;
        -webkit-text-fill-color: white !important; /* iOS Fix! */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
    }

    /* Hamburger standardmäßig verstecken */
    .app-header__hamburger {
      display: none !important;
    }

    /* Pre-JS-Header-Wahl per Media Query — verhindert das Flackern auf Tablet/Handy:
       Ohne diese Regeln blitzt vor updateHeaderVisibility() kurz der volle Desktop-
       Header (#app-header) auf (das Inline-Script misst schon beim Parsen, wenn
       #app-header noch nicht im DOM steht) bzw. beide Header sind kurz gleichzeitig
       sichtbar, und der Inhalt springt vom 96px- auf den 64px-Header-Offset.
       KEIN !important: das JS setzt danach Inline-Styles (gewinnen ueber diese
       Regeln) und verfeinert die Tiers. */
    .mobile-simple-header { display: none; }
    @media (max-width: 768px) {
      #app-header { display: none; }
      .mobile-simple-header { display: flex; }
      body { padding-top: var(--header-total-mobile, 64px); }
    }

    /* Landing-Header behält ab 769px das 3-Spalten-Grid: header.css schaltet .app-header
       ≤1200px auf "1fr auto" (Logo | Hamburger) um (App-Layout). Die Landing-Page zeigt
       aber ihre 3-teilige Nav weiter; ohne Override landet .app-header__right in einer
       impliziten Spalte → alles nach rechts gedrängt / Überlauf. Höhere Spezifität als
       der .app-header-Media-Query → kein !important nötig.
       ≥1025px: zentriert (1fr auto 1fr) wie Desktop. 769–1024px (Tablet-Portrait, iPad 7
       = 810px): "auto 1fr auto" packt statt zu zentrieren — zentriert bräuchte symmetrische
       Seitenspalten (= Button-Breite) und liefe bei 810px über. */
    body.landing-page .app-header {
      grid-template-columns: 1fr auto 1fr;
    }
    @media (min-width: 769px) and (max-width: 1024px) {
      body.landing-page .app-header { grid-template-columns: auto 1fr auto; }
    }

    /* CTA-Label responsiv: kurzes „Testen" im schmalen Band (≤1200px), volles Label nur
       auf dem großen Desktop (>1200px). Sonst ist „Als Therapeut:in testen" der breiteste
       Brocken und die rechte Button-Gruppe läuft im Tablet-Portrait (810px) über. */
    .app-header__cta-button .cta-text-short { display: none; }
    @media (max-width: 1200px) {
      .app-header__cta-button .cta-text-full { display: none; }
      .app-header__cta-button .cta-text-short { display: inline; }
    }

    /* Mobile (≤768px): Hamburger-Menü statt Nav-Links */
    @media screen and (max-width: 768px) {
      .app-header {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
      }
      /* Nav-Links auf Mobile verstecken */
      .app-header__nav {
        display: none !important;
      }
      .app-header__actions {
        display: none !important;
      }
      /* Hamburger auf Mobile ANZEIGEN */
      .app-header__hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        font-size: 24px !important;
        color: #64748b !important;
        -webkit-text-fill-color: #64748b !important;
      }
    }

    /* Mobile Menu: erbt die polierte Basis aus header.css (Slide-in-Animation,
       Backdrop-Fade+Blur, iOS-Safe-Area, linksbündige Items, animierter Hamburger→X).
       Hier nur landing-spezifische Ergänzungen: 64px-Header-Offset, CTA-Buttons,
       eingerückte Sprungmarken, iOS-Textfarbe-Fix. */
    .mobile-menu[hidden] {
      display: none;
    }
    /* Panel sitzt unter dem 64px hohen .mobile-simple-header (header.css nimmt 56px an) */
    .mobile-menu__panel {
      top: calc(64px + var(--safe-area-top, 0px));
      height: calc(100dvh - 64px - var(--safe-area-top, 0px));
      max-height: calc(100dvh - 64px - var(--safe-area-top, 0px));
    }
    /* iOS: verhindert, dass eine Verlaufs-Textfüllung durchschlägt (Items lesbar halten) */
    .mobile-menu__nav-item {
      color: #374151 !important;
      -webkit-text-fill-color: #374151 !important;
    }
    /* Eingerückte Sprungmarken-Unterpunkte (Funktionen, Erfahrungen, …) */
    .mobile-menu__nav-item--sub {
      padding-left: 44px;
      font-size: 0.85rem;
      color: #94a3b8 !important;
      -webkit-text-fill-color: #94a3b8 !important;
    }
    /* Login-/Register-CTAs zentriert */
    .mobile-menu__nav-item--secondary,
    .mobile-menu__nav-item--primary {
      justify-content: center;
      margin-top: 8px;
    }
    .mobile-menu__nav-item--secondary {
      color: #667eea !important;
      -webkit-text-fill-color: #667eea !important;
      border: 2px solid #667eea !important;
    }
    .mobile-menu__nav-item--secondary:hover {
      background: #f0f4ff !important;
    }
    .mobile-menu__nav-item--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
      color: white !important;
      -webkit-text-fill-color: white !important;
    }
    .mobile-menu__nav-item--primary:hover {
      opacity: 0.92;
      background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%) !important;
    }
    .mobile-menu__nav-item--primary i {
      color: white;
    }
    /* Redundanz-frei: stehen die CTAs (Anmelden/Testen) im Header (Tier B der Mess-Routine),
       im Hamburger-Menue ausblenden — nichts doppelt. */
    body.mh-cta-in-bar .mobile-menu__nav-item--secondary,
    body.mh-cta-in-bar .mobile-menu__nav-item--primary {
      display: none !important;
    }

    .app-header__dropdown-trigger {
      background: none !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0.5rem 1rem;
      color: var(--color-text-secondary, #64748b);
      font-size: 0.9rem;
      font-weight: 500;
      border-radius: 6px;
      transition: all 0.2s;
    }

    .app-header__dropdown-trigger:hover {
      color: var(--color-text-primary, #4B5563);
      background: var(--color-surface-hover, #f1f5f9) !important;
    }

    .app-header__dropdown-trigger i {
      font-size: 0.7rem;
      transition: transform 0.2s ease;
    }

    .app-header__dropdown.is-open .app-header__dropdown-trigger i {
      transform: rotate(180deg);
    }

    .app-header__dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
      padding: 8px;
      min-width: 240px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 9999;
    }

    /* Unsichtbare Brücke zwischen Trigger und Menu */
    .app-header__dropdown-menu::before {
      content: '';
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      height: 12px;
    }

    .app-header__dropdown.is-open .app-header__dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .app-header__dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 12px 16px;
      background: none;
      border: none;
      border-radius: 8px;
      font-size: 0.9375rem;
      color: #374151;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
    }

    .app-header__dropdown-item:hover {
      background: #f3f4f6;
      color: #667eea;
    }

    .app-header__dropdown-item i {
      font-size: 1rem;
      width: 20px;
      color: #9ca3af;
    }

    .app-header__dropdown-item:hover i {
      color: #667eea;
    }

    /* Info Modals */
    .info-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      padding: 20px;
    }

    .info-modal.is-open {
      opacity: 1;
      visibility: visible;
    }

    .info-modal__container {
      background: white;
      border-radius: 24px;
      max-width: 600px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateY(20px) scale(0.95);
      transition: transform 0.3s ease;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
      /* Scrollbar verstecken */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
    }

    .info-modal__container::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }

    .info-modal.is-open .info-modal__container {
      transform: translateY(0) scale(1);
    }

    .info-modal__header {
      padding: 28px 28px 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .info-modal__icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: white;
      flex-shrink: 0;
    }

    .info-modal__icon--purple {
      background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    }

    .info-modal__icon--teal {
      background: linear-gradient(135deg, #14b8a6, #0d9488);
    }

    .info-modal__close {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      flex-shrink: 0;
      font-size: 1.5rem;
    }

    .info-modal__close:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #374151;
    }

    .info-modal__body {
      padding: 24px 28px 28px;
    }

    .info-modal__title {
      font-family: 'Nunito', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: #4B5563;
      margin: 16px 0 12px;
    }

    .info-modal__subtitle {
      font-size: 1rem;
      color: #6b7280;
      line-height: 1.6;
      margin: 0 0 20px;
    }

    .info-modal__section-title {
      font-size: 0.875rem;
      font-weight: 700;
      color: #374151;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin: 24px 0 12px;
    }

    .info-modal__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .info-modal__list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.9375rem;
      color: #4b5563;
      line-height: 1.5;
    }

    .info-modal__list li i {
      color: #10b981;
      margin-top: 3px;
      flex-shrink: 0;
    }

    .info-modal__note {
      background: #fef3c7;
      border-radius: 12px;
      padding: 16px;
      margin-top: 20px;
      display: flex;
      gap: 12px;
    }

    .info-modal__note i {
      color: #d97706;
      font-size: 1.125rem;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .info-modal__note p {
      font-size: 0.9375rem;
      color: #92400e;
      line-height: 1.6;
      margin: 0;
    }

    .info-modal__cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      padding: 12px 24px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-weight: 600;
      font-size: 0.9375rem;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .info-modal__cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
      color: white;
      text-decoration: none;
    }

    /* Register Form Styles */
    .register-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 20px 0;
    }

    .register-field {
      position: relative;
    }

    .register-field i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      font-size: 0.95rem;
      pointer-events: none;
    }

    .register-field input {
      width: 100%;
      padding: 12px 14px 12px 42px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      font-size: 1rem;
      background: #f8fafc;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .register-field input:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    }

    .register-field input::placeholder {
      color: #94a3b8;
    }

    .register-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.9rem;
      color: #64748b;
      cursor: pointer;
    }

    .register-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin-top: 2px;
      cursor: pointer;
    }

    .register-checkbox a {
      color: #667eea;
      text-decoration: none;
    }

    .register-checkbox a:hover {
      text-decoration: underline;
    }

    .register-alert {
      padding: 12px 14px;
      border-radius: 10px;
      font-size: 0.9rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      margin-bottom: 8px;
    }

    .register-footer {
      text-align: center;
      font-size: 0.9rem;
      color: #64748b;
      margin-top: 16px;
    }

    .register-footer a {
      color: #667eea;
      text-decoration: none;
      font-weight: 600;
    }

    .register-footer a:hover {
      text-decoration: underline;
    }

    /* Scroll Indicator für Info Modals */
    .info-modal__scroll-indicator {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70px;
      background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0) 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 12px;
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.3s ease;
      z-index: 10;
      margin-top: -70px;
    }

    .info-modal__scroll-indicator.hidden {
      opacity: 0;
    }

    .info-modal__scroll-indicator i {
      color: #94a3b8;
      font-size: 1.25rem;
      animation: infoScrollBounce 2s ease-in-out infinite;
    }

    @keyframes infoScrollBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    /* Public Page: Anmelden Button (sekundär) */
    .app-header__login-button {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      background: transparent;
      border: 1px solid var(--color-border, #e2e8f0);
      color: var(--color-text-primary, #4B5563);
      text-decoration: none;
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .app-header__login-button:hover {
      background: var(--color-surface-hover, #f1f5f9);
      border-color: var(--color-border-hover, #cbd5e1);
    }

    /* Public Page: CTA Button (primär) */
    .app-header__cta-button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.25rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 600;
      transition: all 0.2s;
      box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    }

    .app-header__cta-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
      color: white;
      text-decoration: none;
    }

    .app-header__cta-button:active {
      transform: translateY(0);
    }

    .app-header__cta-button i {
      font-size: 0.75rem;
      transition: transform 0.2s;
    }

    .app-header__cta-button:hover i {
      transform: translateX(2px);
    }

    /* Mobile Menu Enhancements */
    .mobile-menu__divider {
      border: none;
      border-top: 1px solid var(--color-border, #e2e8f0);
      margin: 0.75rem 0;
    }

    .mobile-menu__nav-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
    }

    .mobile-menu__nav-item i {
      width: 1.25rem;
      text-align: center;
      color: var(--color-text-secondary, #64748b);
    }

    .mobile-menu__nav-item--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white !important;
      justify-content: center;
      text-align: center;
    }

    .mobile-menu__nav-item--primary i {
      color: white;
    }

    .mobile-menu__nav-item--primary:hover {
      background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
      color: white !important;
      text-decoration: none;
    }

    /* ============================================
       BENTO GRID HERO SECTION
       ============================================ */
    .bento-hero {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 3rem;
      align-items: center;
      padding: 4rem 2rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
      min-height: calc(100vh - 64px);
    }

    @media (max-width: 480px) {
      .bento-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem 1rem 2rem;
        min-height: auto;
      }
      .bento-hero__content {
        order: 2;
      }
      .hero-visual {
        order: 1;
      }
    }

    /* Content (Links) */
    .bento-hero__content {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .bento-hero__title {
      font-family: 'Nunito', sans-serif;
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      line-height: 1.1;
      margin: 0;
    }

    /* Hero Brand Logo (wie Header, aber größer) */
    .hero-brand {
      display: inline-flex;
      align-items: baseline; /* Automatische Baseline-Ausrichtung */
      font-family: 'Nunito', sans-serif;
      font-size: 1.32em; /* 32% größer (2x 15%) */
    }

    .hero-brand--thin {
      font-weight: 300;
      font-size: 0.6em; /* 60% - 10% kleiner als Header-Verhältnis */
      color: #4B5563;
    }

    .hero-brand--bold {
      font-weight: 800;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Logo Colon - perfekt positioniert relativ zu logobox */
    .hero-brand .logo-colon {
      color: #10b981;
      font-weight: 900;
      margin-left: -0.17em;
      position: relative;
      top: 0.07em;
      font-size: 1.5em;
      line-height: 0;
    }

    .hero-brand-x {
      width: 0.75em;
      height: 0.75em;
      margin-left: -7px;
      position: relative;
      top: calc(0.08em + 0.3px);
      flex-shrink: 0;
    }

    .bento-hero__subtitle {
      font-size: 1.125rem;
      color: #4B5563;
      line-height: 1.7;
      margin: 0;
      max-width: 440px;
    }

    .bento-hero__actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 0.5rem;
    }

    .bento-hero__cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 1.75rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-weight: 600;
      font-size: 1rem;
      border-radius: 12px;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .bento-hero__cta-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
      color: white;
      text-decoration: none;
    }

    .bento-hero__cta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 1.5rem;
      background: white;
      color: #4B5563;
      font-weight: 600;
      font-size: 1rem;
      border: 2px solid #E5E7EB;
      border-radius: 12px;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .bento-hero__cta-secondary:hover {
      border-color: #667eea;
      color: #667eea;
    }

    .bento-hero__trust {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .bento-hero__trust-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: #059669;
      font-weight: 500;
    }

    .bento-hero__trust-item i {
      font-size: 1rem;
    }

    /* ============================================
       HERO VISUAL - Therapeutin & Kind
       ============================================ */
    .hero-visual {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      animation: heroVisualIn 1s ease-out 0.3s forwards;
      /* Bild darf über den Container hinausragen */
      overflow: visible;
      margin-right: -100px; /* Überlappung nach rechts */
      margin-top: 0;
    }

    @keyframes heroVisualIn {
      to {
        opacity: 1;
      }
    }

    .hero-visual__image {
      width: 100%;
      max-width: 900px;
      height: auto;
      object-fit: contain;
      transform: scale(1.14);
      /* Rechteckiger Fade - finale Werte */
      mask-image:
        linear-gradient(to top, transparent 0%, black 14%),
        linear-gradient(to right, transparent 0%, black 8%),
        linear-gradient(to left, transparent 0%, black 9%);
      -webkit-mask-image:
        linear-gradient(to top, transparent 0%, black 14%),
        linear-gradient(to right, transparent 0%, black 8%),
        linear-gradient(to left, transparent 0%, black 9%);
      mask-composite: intersect;
      -webkit-mask-composite: source-in;
    }

    /* Hero Container - overflow visible für Bild-Überlappung */
    .bento-hero {
      overflow: visible;
    }

    /* Content auf gleicher Ebene wie Bild */
    .bento-hero__content {
      position: relative;
      z-index: 2;
    }

    /* Responsive für Hero Visual — auf ≤1024 gezogen (deckungsgleich mit dem einspaltigen
       Hero-Grid), damit das Bild auch bei genau 1024px (iPad Pro 12,9″ Portrait) zentriert
       ist statt im Desktop-Offset (flex-end + margin-right:-100px) links zu haengen. */
    @media (max-width: 1024px) {
      .hero-visual {
        margin-right: 0 !important;
        margin-top: 0 !important;
        justify-content: center !important;
        transform: none !important;
      }
      .hero-visual__image {
        max-width: 500px !important;
      }
    }

    @media (max-width: 640px) {
      /* Hero-Bild auf Mobile: Optimiertes WebP (56KB statt 946KB) */
      .hero-visual__image {
        max-width: 380px !important;
        transform: scale(1) !important;
        margin: 0 auto !important;
      }
    }

    /* Desktop mit geringerer Bildschirmhöhe (z.B. 1600x900 Laptops)
       Werte werden von CSS-Variablen gesteuert, die im Admin-Panel angepasst werden können.
       min-width auf 1201 gehoben, damit dieser Desktop-Offset NICHT auf das iPad-Landscape-Band
       (1025–1200px, Höhe <950) greift — das wird unten separat entzerrt. */
    @media (min-width: 1201px) and (max-height: 950px) {
      .hero-visual {
        margin-top: var(--hero-small-top, 120px) !important;
        margin-right: var(--hero-small-right, -18px) !important;
        transform: translateX(var(--hero-small-offset-x, 0px)) !important;
      }
      .hero-visual__image {
        transform: scale(var(--hero-small-scale, 1.08)) !important;
        mask-image:
          linear-gradient(to bottom, transparent 0%, black var(--hero-small-fade-top, 20%)),
          linear-gradient(to top, transparent 0%, black var(--hero-small-fade-bottom, 29%)),
          linear-gradient(to right, transparent 0%, black var(--hero-small-fade-left, 26%)),
          linear-gradient(to left, transparent 0%, black var(--hero-small-fade-right, 29%)) !important;
        -webkit-mask-image:
          linear-gradient(to bottom, transparent 0%, black var(--hero-small-fade-top, 20%)),
          linear-gradient(to top, transparent 0%, black var(--hero-small-fade-bottom, 29%)),
          linear-gradient(to right, transparent 0%, black var(--hero-small-fade-left, 26%)),
          linear-gradient(to left, transparent 0%, black var(--hero-small-fade-right, 29%)) !important;
      }
    }

    /* iPad-Landscape / schmales Tablet-Band (1025–1200px, u.a. iPad 7 quer = 1080px):
       Hero bleibt ZWEISPALTIG (Text + Bild in einer Zeile, wie auf dem Desktop), aber entzerrt —
       das Bild wird nicht mehr vergrößert (scale 1.14 → 1) und ragt nicht mehr über den rechten
       Rand hinaus (margin-right:-100px → 0), sodass es den Text nicht mehr berührt. Etwas mehr
       Spalten-Abstand. Ab >1200px greift wieder das volle Desktop-Layout. */
    @media (min-width: 1025px) and (max-width: 1200px) {
      .bento-hero {
        gap: var(--hero-tablet-gap, 29px);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      .bento-hero__content {
        transform: scale(var(--hero-tablet-content-scale, 0.74));
        transform-origin: left center;
      }
      .hero-visual {
        margin-right: var(--hero-tablet-right, 100px) !important;
        margin-top: var(--hero-tablet-top, -75px) !important;
        transform: translateX(var(--hero-tablet-offset-x, -103px)) !important;
      }
      .hero-visual__image {
        transform: scale(var(--hero-tablet-scale, 1.95)) !important;
        max-width: var(--hero-tablet-max-width, 353px) !important;
      }
    }

    /* ============================================
       BUBBLE CLUSTER - Organisches Layout (BACKUP)
       ============================================ */
    .bubble-cluster {
      position: relative;
      width: 100%;
      height: 480px;
      opacity: 0;
      animation: bubbleClusterIn 1.2s ease-out 0.3s forwards;
    }

    @keyframes bubbleClusterIn {
      to {
        opacity: 1;
      }
    }

    /* Bubble Base */
    .bubble {
      position: absolute;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
      /* GPU-Beschleunigung für butterweiche Animationen */
      will-change: transform, opacity;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1),
                  opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
      cursor: pointer;
    }

    .bubble img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      will-change: transform;
      transform: translateZ(0);
      transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .bubble:hover img {
      transform: scale(1.05) translateZ(0);
    }

    /* Dark Overlay (erscheint bei Hover) */
    .bubble__overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      will-change: opacity;
      transition: opacity 0.4s ease-out;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .bubble:hover .bubble__overlay {
      opacity: 1;
    }

    /* Floating Labels (außerhalb der Kreise) */
    .floating-label {
      position: absolute;
      background: #ffffff;
      padding: 10px 18px;
      border-radius: 50px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      z-index: 20;
    }

    .floating-label__icon {
      font-size: 1rem;
    }

    .floating-label__text {
      font-size: 0.875rem;
      font-weight: 700;
      color: #333;
      white-space: nowrap;
    }

    /* Label Positionen - Satelliten an den Außenkanten */
    .floating-label--hybrid {
      top: 70px;
      right: 120px;
    }

    .floating-label--therapy {
      top: 220px;
      left: -20px;
    }

    .floating-label--home {
      bottom: 50px;
      right: 300px;
    }

    /* Hover-Text (nur bei Hover sichtbar) */
    .bubble__content {
      text-align: center;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 0.2s,
                  transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
    }

    .bubble:hover .bubble__content {
      opacity: 1;
      transform: translateY(0);
    }

    .bubble__title {
      font-size: 1rem;
      font-weight: 700;
      color: white;
      margin: 0 0 8px 0;
    }

    .bubble__text {
      font-size: 0.8125rem;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.5;
      margin: 0;
    }

    /* Bubble 1: Hybrid (großer Kreis, oben rechts) */
    .bubble--hybrid {
      width: 280px;
      height: 280px;
      top: 30px;
      right: 20px;
      z-index: 2;
      opacity: 0;
      transform: translateY(30px) scale(0.9);
      animation: bubbleIn 1s ease-out 0.5s forwards;
    }

    .bubble--hybrid img {
      object-fit: contain; /* Ganzes Bild zeigen statt zuschneiden */
      object-position: center center;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); /* Hintergrund für leere Bereiche */
    }

    /* Bubble 2: Praxis (links, mehr Abstand) */
    .bubble--therapy {
      width: 200px;
      height: 200px;
      top: 180px;
      left: 20px;
      z-index: 1;
      opacity: 0;
      transform: translateY(30px) scale(0.9);
      animation: bubbleIn 1s ease-out 0.8s forwards;
    }

    /* Bubble 3: Zuhause (unten rechts, mehr Abstand) */
    .bubble--home {
      width: 210px;
      height: 210px;
      bottom: 10px;
      right: 140px;
      z-index: 3;
      opacity: 0;
      transform: translateY(30px) scale(0.9);
      animation: bubbleIn 1s ease-out 1.1s forwards;
    }

    @keyframes bubbleIn {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* ============================================
       SPOTLIGHT EFFECT - Hover-Interaktion
       ============================================ */

    /* Aktives Bild bei Hover: Sanft größer & Vordergrund */
    .bubble:hover {
      z-index: 100 !important;
    }

    /* Floating Labels: Sanft ausblenden bei Hover */
    .floating-label {
      will-change: opacity, transform;
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .bubble-cluster:has(.bubble:hover) .floating-label {
      opacity: 0;
      transform: translateY(-6px);
    }

    /* Bubble Item Wrapper (Desktop: transparent, Mobile: flex column) */
    .bubble-item {
      display: contents; /* Auf Desktop: Kinder direkt im Cluster */
    }

    /* Mobile Text Container (unter den Kreisen) */
    .bubble__mobile-text {
      display: none; /* Nur auf Mobile sichtbar */
    }

    /* Bento Responsive: Tablet & Mobile (< 1024px) */
    @media (max-width: 1024px) {
      .bento-hero {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 1.5rem;
        min-height: auto;
      }

      .bento-hero__content {
        text-align: center;
        align-items: center;
      }

      .bento-hero__subtitle {
        max-width: 100%;
      }

      .bento-hero__actions {
        justify-content: center;
      }

      .bento-hero__trust {
        justify-content: center;
      }

      /* Bubble Cluster: Vertikaler Stack */
      .bubble-cluster {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 20px 0;
      }

      /* Bubble Item Wrapper für Mobile */
      .bubble-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }

      .bubble,
      .bubble--hybrid,
      .bubble--therapy,
      .bubble--home {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
      }

      .bubble--hybrid {
        width: 240px;
        height: 240px;
      }

      .bubble--therapy {
        width: 200px;
        height: 200px;
      }

      .bubble--home {
        width: 220px;
        height: 220px;
      }

      /* Hover-Effekte auf Mobile deaktivieren */
      .bubble__overlay {
        display: none;
      }

      /* Floating Labels auf Mobile ausblenden */
      .floating-label {
        display: none;
      }

      /* Mobile Text Container anzeigen */
      .bubble__mobile-text {
        display: block;
        text-align: center;
        max-width: 280px;
      }

      .bubble__mobile-text .bubble__title {
        font-size: 1rem;
        font-weight: 700;
        color: #4B5563;
        margin: 0 0 6px 0;
      }

      .bubble__mobile-text .bubble__text {
        font-size: 0.875rem;
        color: #4b5563;
        line-height: 1.5;
        margin: 0;
      }
    }

    /* Bento Responsive: Mobile */
    @media (max-width: 600px) {
      .bento-hero {
        padding: 2rem 1rem;
      }

      .bubble-cluster {
        gap: 24px;
      }

      .bubble--hybrid {
        width: 200px;
        height: 200px;
      }

      .bubble--therapy,
      .bubble--home {
        width: 180px;
        height: 180px;
      }

      .bubble__mobile-text {
        max-width: 240px;
      }

      .bubble__mobile-text .bubble__title {
        font-size: 0.9375rem;
      }

      .bubble__mobile-text .bubble__text {
        font-size: 0.8125rem;
      }

      .bento-hero__actions {
        flex-direction: column;
        width: 100%;
      }

      .bento-hero__cta-primary,
      .bento-hero__cta-secondary {
        width: 100%;
        justify-content: center;
      }
    }

    /* ============================================
       HERO SECTION (Original - moved down)
       ============================================ */
    .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
      min-height: calc(100vh - 200px);
    }

    .hero__content {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .hero__title {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 700;
      line-height: 1.1;
      color: #4B5563;
      margin: 0;
    }

    .hero__title-highlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero__subtitle {
      font-size: 1.25rem;
      color: #64748b;
      line-height: 1.6;
      margin: 0;
      max-width: 500px;
    }

    .hero__actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 0.5rem;
    }

    .hero__cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 2rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 1.125rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .hero__cta-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
      color: white;
      text-decoration: none;
    }

    .hero__cta-primary:active {
      transform: translateY(0);
    }

    .hero__cta-primary i {
      font-size: 1rem;
    }

    .hero__cta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 1.5rem;
      background: transparent;
      color: #64748b;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s;
    }

    .hero__cta-secondary:hover {
      border-color: #667eea;
      color: #667eea;
      background: rgba(102, 126, 234, 0.05);
    }

    .hero__trust {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .hero__trust-item {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: #64748b;
    }

    .hero__trust-item i {
      color: #10b981;
    }

    /* Hero Visual - Demo Card */
    .hero__visual {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .hero__demo-card {
      background: white;
      border-radius: 24px;
      padding: 1.5rem;
      box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 20px 50px rgba(102, 126, 234, 0.15);
      text-align: center;
      min-width: 320px;
      max-width: 360px;
      animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .hero__demo-preview {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }

    .hero__demo-option {
      aspect-ratio: 1;
      background: #f8fafc;
      border-radius: 12px;
      border: 3px solid #e2e8f0;
      overflow: hidden;
      transition: all 0.2s;
    }

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

    .hero__demo-option--correct {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
      50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); }
    }

    .hero__demo-sound-btn {
      width: 72px;
      height: 72px;
      margin: 1rem auto 0;
      cursor: pointer;
      transition: all 0.2s;
    }

    .hero__demo-sound-btn img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .hero__demo-sound-btn:hover {
      transform: scale(1.08);
    }

    .hero__demo-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background: #f0fdf4;
      color: #15803d;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
    }

    .hero__demo-badge i {
      font-size: 0.9rem;
    }

    /* Hero Responsive */
    @media (max-width: 900px) {
      .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.5rem;
        min-height: auto;
        gap: 2rem;
      }

      .hero__content {
        align-items: center;
      }

      .hero__subtitle {
        max-width: 100%;
      }

      .hero__actions {
        justify-content: center;
      }

      .hero__trust {
        justify-content: center;
      }

      .hero__visual {
        order: -1;
      }

      .hero__demo-card {
        min-width: auto;
        max-width: 300px;
      }
    }

    @media (max-width: 480px) {
      .hero__actions {
        flex-direction: column;
        width: 100%;
      }

      .hero__cta-primary,
      .hero__cta-secondary {
        width: 100%;
        justify-content: center;
      }

      .hero__trust {
        flex-direction: column;
        gap: 0.5rem;
      }
    }

    /* ============================================
       EXERCISE SLIDESHOW (Hero Visual Replacement)
       ============================================ */

    /* Slideshow-Only Hero Layout */
    .hero--slideshow-only {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 80px 20px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .exercise-slideshow__header {
      text-align: center;
      max-width: 800px;
      margin-bottom: 2rem;
    }

    .exercise-slideshow__title {
      font-family: 'Nunito', sans-serif;
      font-size: 2.5rem;
      font-weight: 700;
      color: #4B5563;
      margin: 0 0 1rem;
      line-height: 1.2;
    }

    .exercise-slideshow__title span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .exercise-slideshow__subtitle {
      font-size: 1.1rem;
      color: #64748b;
      line-height: 1.6;
      margin: 0;
    }

    @media (max-width: 768px) {
      .exercise-slideshow__title {
        font-size: 1.8rem;
      }

      .exercise-slideshow__subtitle {
        font-size: 1rem;
      }
    }

    .exercise-slideshow-wrapper {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 60px;
      box-sizing: border-box;
    }

    .exercise-slideshow {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
      width: 100%;
      gap: 0;
      padding: 1rem 0;
    }

    .exercise-slideshow::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }

    .exercise-slide {
      scroll-snap-align: start;
      flex: 0 0 100%;
      min-width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      justify-items: center;
      padding: 0 2rem;
      box-sizing: border-box;
      min-height: 320px;
    }

    /* .exercise-slide.active: Nicht mehr benötigt für scroll-snap, aber für Dots-Sync */

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

    /* Slide Content (Left) */
    .exercise-slide__content {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .exercise-slide__category {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.25rem 0.6rem;
      border-radius: 4px;
      margin-bottom: 0.5rem;
    }

    .exercise-slide__category--task {
      background: rgba(99, 102, 241, 0.12);
      color: #6366f1;
    }

    .exercise-slide__category--game {
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
    }

    .exercise-slide__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
      width: fit-content;
    }

    .exercise-slide__badge--presentation {
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
      color: white;
    }

    .exercise-slide__badge--memory {
      background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
      color: white;
    }

    .exercise-slide__badge--doppel {
      background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
      color: white;
    }

    .exercise-slide__title {
      font-size: 1.5rem;
      font-weight: 700;
      color: #4B5563;
      margin: 0;
    }

    .exercise-slide__description {
      font-size: 0.95rem;
      color: #64748b;
      line-height: 1.5;
      margin: 0;
    }

    .exercise-slide__features {
      list-style: none;
      padding: 0;
      margin: 0.5rem 0 0;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .exercise-slide__features li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
      color: #475569;
    }

    .exercise-slide__features li i {
      color: #10b981;
      font-size: 0.8rem;
      width: 16px;
    }

    .exercise-slide__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      width: fit-content;
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-size: 0.85rem;
      font-weight: 500;
      border-radius: 6px;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .exercise-slide__cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
      text-decoration: none;
      color: white;
    }

    .exercise-slide__cta i {
      font-size: 0.85rem;
    }

    /* Slide Visual (Right) - Open/Floating Design */
    .exercise-slide__visual {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .exercise-slide__preview {
      position: relative;
      padding: 8px;
    }

    /* Nur für Previews mit Sound-Button/Speech-Bubble */
    .exercise-slide__preview--presentation {
      padding-bottom: 80px;
    }

    .preview-card {
      width: 120px;
      height: 120px;
      border-radius: 12px;
      overflow: hidden;
      background: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border: 3px solid transparent;
      transition: transform 0.2s ease;
    }

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

    .preview-card--correct {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .preview-sound-btn {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .preview-sound-btn img {
      width: 90%;
      height: 90%;
      object-fit: contain;
    }

    .preview-speech-bubble {
      position: absolute;
      bottom: 20px;
      left: calc(50% + 40px);
      display: flex;
      align-items: center;
      gap: 8px;
      background: white;
      padding: 8px 16px;
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      font-family: 'Nunito', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #333;
      white-space: nowrap;
    }

    .preview-speech-bubble i {
      color: var(--primary-color, #4F46E5);
      font-size: 14px;
    }

    /* Presentation Preview */
    .exercise-slide__preview--presentation {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .exercise-slide__preview--presentation .preview-single {
      width: 240px;
      height: 240px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .preview-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .preview-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
    }

    .preview-dot.active {
      background: #94a3b8;
      width: 20px;
      border-radius: 4px;
    }

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

    /* Memory Preview */
    .exercise-slide__preview--memory {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .exercise-slide__preview--memory .preview-memory-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .preview-memory-grid .memory-card {
      width: 95px;
      height: 95px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .preview-memory-grid .memory-card.back {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .preview-memory-grid .memory-card.flipped {
      border: 2px solid #10b981;
      background: white;
    }

    .preview-memory-grid .memory-card img {
      width: 80%;
      height: 80%;
      object-fit: cover;
      margin: 10%;
    }

    /* Doppel Preview */
    .exercise-slide__preview--doppel .preview-doppel-scatter {
      position: relative;
      width: 280px;
      height: 220px;
    }

    .doppel-card {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 10px;
      overflow: hidden;
      background: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      left: var(--x);
      top: var(--y);
      transform: rotate(var(--rot)) scale(var(--scale));
      border: 3px solid transparent;
    }

    .doppel-card.highlight {
      border-color: #f97316;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    }

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

    /* Slideshow Navigation */
    .exercise-slideshow__nav {
      display: flex;
      gap: 1rem;
      justify-content: center;
      align-items: center;
    }

    .slideshow-dots {
      display: flex;
      gap: 8px;
    }

    .slideshow-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: #94a3b8;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      transition: color 0.2s ease;
      z-index: 10;
    }

    .slideshow-arrow--prev {
      left: 0;
    }

    .slideshow-arrow--next {
      right: 0;
    }

    .slideshow-arrow:hover {
      color: #64748b;
    }

    @media (max-width: 900px) {
      .slideshow-arrow {
        display: none; /* Auf Mobile verstecken - Swipen reicht */
      }
    }

    /* Header hide on scroll (only for landing page) */
    .app-header {
      transition: transform 0.3s ease;
      background: rgba(255, 255, 255, 0.85) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    .app-header--hidden {
      transform: translateY(-100%);
    }

    /* Mobile: Keine GPU-intensiven Blur-Effekte */
    @media (max-width: 768px) {
      .app-header,
      body.landing-page .app-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
      }
      .info-modal {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.7);
      }
    }

    /* Reduce gap between slideshow and next section */
    .hero--slideshow-only + #uebungen {
      margin-top: 0;
      padding: 80px 20px;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero--slideshow-only + #uebungen .assignments-shell {
      padding-top: 0;
    }

    .hero--slideshow-only + #uebungen .therapeut-main {
      padding-top: 0;
    }

    .hero--slideshow-only + #uebungen .therapeut-panel {
      padding-top: 0;
    }

    .hero--slideshow-only + #uebungen .all-exercises-container {
      padding: 0;
    }

    .hero--slideshow-only + #uebungen .all-exercises__title {
      font-family: 'Nunito', sans-serif;
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 800;
      color: #4B5563;
      margin: 0 0 12px;
      text-align: center;
    }

    .hero--slideshow-only + #uebungen .all-exercises__subtitle {
      font-size: clamp(1rem, 2vw, 1.125rem);
      color: #6B7280;
      text-align: center;
      margin-bottom: 2rem;
    }

    .hero--slideshow-only + #uebungen .game-library {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    @media (max-width: 900px) {
      .hero--slideshow-only + #uebungen .game-library {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 500px) {
      .hero--slideshow-only + #uebungen .game-library {
        grid-template-columns: 1fr;
      }
    }

    .slideshow-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
    }

    .slideshow-dot:hover {
      background: #94a3b8;
    }

    .slideshow-dot.active {
      background: #667eea;
      width: 28px;
      border-radius: 5px;
    }

    /* Slideshow Responsive */
    @media (max-width: 900px) {
      .exercise-slideshow {
        max-width: 100%;
        margin: 0;
        padding: 1rem;
      }

      .exercise-slide {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
        flex: 0 0 85%;
        max-width: 320px;
      }

      .exercise-slide__content {
        align-items: center;
      }

    }

    @media (max-width: 480px) {
      .hero--slideshow-only {
        padding: 24px 0;
        max-width: 100%;
      }

      .exercise-slideshow-wrapper {
        padding: 0 8px;
        width: 100%;
      }

      .exercise-slideshow {
        padding: 0.5rem 0;
        scroll-padding: 0;
        scroll-snap-type: x proximity;
      }

      .exercise-slide {
        flex: 0 0 85%;
        min-width: 85%;
        max-width: 85%;
        padding: 1.5rem 1rem;
        min-height: auto;
        gap: 1rem;
        margin: 0 0.5rem;
        background: white;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        scroll-snap-align: center;
      }

      .exercise-slide__content {
        gap: 0.5rem;
        padding: 0 0.5rem;
      }

      .exercise-slide__title {
        font-size: 1.1rem;
      }

      .exercise-slide__description {
        font-size: 0.85rem;
        line-height: 1.4;
      }

      .exercise-slide__visual {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .exercise-slide__preview--memory,
      .exercise-slide__preview--doppel {
        display: flex;
        justify-content: center;
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .preview-card {
        width: 70px;
        height: 70px;
      }

      .exercise-slide__preview--presentation .preview-single {
        width: 140px;
        height: 140px;
      }

      .preview-memory-grid .memory-card {
        width: 75px;
        height: 75px;
      }

      .preview-memory-grid {
        gap: 8px !important;
      }

      .doppel-card {
        width: 76px;
        height: 76px;
      }

      .exercise-slide__preview--doppel .preview-doppel-scatter {
        width: 220px;
        height: 180px;
      }

      .preview-speech-bubble {
        padding: 5px 10px;
        font-size: 0.75rem;
        gap: 5px;
      }

      .preview-sound-btn {
        width: 36px;
        height: 36px;
      }
    }

    /* ============================================
       FEATURES SECTION
       ============================================ */
    .features {
      padding: 5rem 2rem;
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }

    .features__header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 4rem;
    }

    .features__title {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 700;
      color: #4B5563;
      margin: 0 0 1rem;
    }

    .features__subtitle {
      font-size: 1.125rem;
      color: #64748b;
      margin: 0;
      line-height: 1.6;
    }

    .features__workflow {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 1rem;
      max-width: 1200px;
      margin: 0 auto;
      flex-wrap: wrap;
    }

    .workflow-step {
      flex: 1;
      min-width: 200px;
      max-width: 250px;
      text-align: center;
      padding: 1.5rem;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.08);
      position: relative;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .workflow-step:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    .workflow-step__number {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 50%;
      font-size: 0.875rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .workflow-step__icon {
      width: 64px;
      height: 64px;
      margin: 0.5rem auto 1rem;
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      color: #667eea;
    }

    .workflow-step__title {
      font-size: 1.125rem;
      font-weight: 600;
      color: #4B5563;
      margin: 0 0 0.5rem;
    }

    .workflow-step__description {
      font-size: 0.9rem;
      color: #64748b;
      line-height: 1.5;
      margin: 0;
    }

    .workflow-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #cbd5e1;
      font-size: 1.5rem;
      padding-top: 3rem;
    }

    .features__cta {
      text-align: center;
      margin-top: 3rem;
    }

    .features__cta-button {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 2rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      text-decoration: none;
      border-radius: 12px;
      font-size: 1.125rem;
      font-weight: 600;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .features__cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
      color: white;
      text-decoration: none;
    }

    .features__cta-note {
      margin-top: 1rem;
      font-size: 0.875rem;
      color: #94a3b8;
    }

    /* Features Responsive */
    @media (max-width: 900px) {
      .features {
        padding: 3rem 1.5rem;
      }

      .features__workflow {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
      }

      .workflow-step {
        max-width: 100%;
        width: 100%;
      }

      .workflow-arrow {
        transform: rotate(90deg);
        padding: 0;
      }
    }

    @media (max-width: 480px) {
      .features__header {
        margin-bottom: 2rem;
      }

      .features__cta-button {
        width: 100%;
        justify-content: center;
      }
    }

    /* ============================================
       SITE FOOTER
       ============================================ */

    /* Reset: globale reset.css/global.css setzen line-heights und
       font-metrics auf h4/p/ul/li/a — im Footer verzerrt das die
       Höhen, der Brand-Block wirkt durch align-items:center vertikal
       verschoben. Hier explizit neutralisieren (analog entdecken.css
       Z.1579-1617). */
    .site-footer *:not(.footer-brand):not(.footer-brand--thin):not(.footer-brand--bold):not(.logo-colon) {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    }
    .site-footer h4 {
      font-size: 0.875rem !important;
      font-weight: 600 !important;
      line-height: normal !important;
      letter-spacing: 0.05em !important;
      margin: 0 0 1rem !important;
      color: #374151 !important;
    }
    .site-footer p { margin-bottom: 0 !important; line-height: normal !important; }
    .site-footer ul { margin: 0 !important; padding: 0 !important; line-height: normal !important; }
    .site-footer li { line-height: normal !important; }
    .site-footer a { line-height: normal !important; }
    .site-footer .footer-brand,
    .site-footer .footer-brand--thin,
    .site-footer .footer-brand--bold,
    .site-footer .footer-brand .logo-colon {
      font-family: 'Nunito', sans-serif !important;
    }

    .site-footer {
      background: transparent;
      color: #64748b;
      padding: 4rem 2rem 2rem;
      margin-top: 4rem;
      position: relative;
      z-index: 10;
      font-size: 16px;
    }

    .site-footer__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .site-footer__top {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 5rem;
      padding-bottom: 2rem;
    }

    .site-footer__brand {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .site-footer__logo {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      color: #374151;
      text-decoration: none;
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .site-footer__logo:hover {
      text-decoration: none;
      color: inherit;
    }

    .footer-brand {
      display: inline-flex;
      align-items: baseline;
      font-family: 'Nunito', sans-serif;
      font-size: 1.85em;
      white-space: nowrap;
    }

    .footer-brand--thin {
      font-weight: 300;
      font-size: 0.65em;
      color: #6b7280;
      background: none;
      -webkit-text-fill-color: #6b7280;
    }

    .footer-brand--bold {
      font-weight: 800;
      color: #6b7280;
      background: none;
      -webkit-text-fill-color: #6b7280;
    }

    /* Logo Colon - perfekt positioniert relativ zu logobox */
    .footer-brand .logo-colon {
      color: #6b7280;
      font-weight: 900;
      margin-left: -0.17em;
      position: relative;
      top: 0.07em;
      font-size: 1.5em;
      line-height: 0;
    }

    .footer-brand-x {
      width: 0.8em;
      height: 0.8em;
      margin-left: -2px;
      position: relative;
      top: 2px;
      color: #6b7280;
    }

    .site-footer__tagline {
      font-size: 0.858rem;
      color: #64748b;
      margin: 0;
      margin-top: -18px;
      line-height: 1.5;
      max-width: 280px;
    }

    .site-footer__nav {
      display: flex;
      gap: 3rem;
      justify-content: flex-end;
    }

    .site-footer__nav-group {
      min-width: 120px;
    }

    .site-footer__nav-title {
      color: #374151;
      font-size: 0.875rem;
      font-weight: 600;
      margin: 0 0 1rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .site-footer__nav-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .site-footer__nav-list a {
      color: #6b7280;
      text-decoration: none;
      font-size: 0.875rem;
      transition: color 0.2s;
    }

    .site-footer__nav-list a:hover {
      color: #6366f1;
    }

    .site-footer__bottom {
      padding: 1.5rem 2rem;
      text-align: center;
      background: transparent;
    }

    .site-footer__copyright {
      font-size: 0.8rem;
      color: #64748b;
      margin: 0;
    }

    .site-footer__copyright a {
      color: #64748b;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .site-footer__copyright a:hover {
      color: white;
    }

    .site-footer__legal {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .site-footer__legal a {
      color: #64748b;
      text-decoration: none;
      font-size: 0.8rem;
      transition: color 0.2s;
    }

    .site-footer__legal a:hover {
      color: white;
    }

    .site-footer__separator {
      color: #475569;
    }

    /* Footer Responsive */
    @media (max-width: 768px) {
      .site-footer {
        padding: 3rem 1.5rem 1.5rem;
      }

      .site-footer__top {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
      }

      .site-footer__nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2rem;
      }

    }

    /* ============================================
       LANDING PAGE TIMELINE
       Vertikale Story: Therapeuten → Patienten → Angehörige
       ============================================ */
    .landing-timeline {
      padding: 80px 20px 100px;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
    }

    /* Header */
    .landing-timeline__header {
      text-align: center;
      margin-bottom: 60px;
    }

    .landing-timeline__title {
      font-family: 'Nunito', sans-serif;
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 800;
      color: #4B5563;
      margin: 0 0 16px;
      line-height: 1.2;
    }

    .landing-timeline__subtitle {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: #6B7280;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Timeline Container */
    .landing-timeline__container {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }

    /* Die durchgehende vertikale Linie (nur Desktop) */
    .landing-timeline__container::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 60px;
      bottom: 60px;
      width: 2px;
      transform: translateX(-50%);
      background-image: linear-gradient(
        to bottom,
        #c7d2fe 50%,
        transparent 50%
      );
      background-size: 2px 12px;
      background-repeat: repeat-y;
      z-index: 0;
    }

    /* Timeline Step */
    .timeline-step {
      display: grid;
      grid-template-columns: 1fr 80px 1fr;
      gap: 24px;
      align-items: center;
      padding: 40px 0;
      position: relative;
    }

    /* Entferne vererbte ::before Pseudo-Elemente */
    .timeline-step::before,
    .timeline-step__content::before {
      display: none !important;
      content: none !important;
    }

    /* Content (Text) */
    .timeline-step__content {
      padding: 0 20px;
      border: none !important; /* Keine Linien am Textblock */
    }

    .timeline-step--left .timeline-step__content {
      text-align: right;
    }

    .timeline-step--right .timeline-step__content {
      text-align: left;
    }

    .timeline-step__label {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .timeline-step__label--purple {
      background: #eef2ff;
      color: #7c3aed;
    }

    .timeline-step__label--teal {
      background: #ccfbf1;
      color: #0d9488;
    }

    .timeline-step__label--blue {
      background: #dbeafe;
      color: #2563eb;
    }

    .timeline-step__title {
      font-family: 'Nunito', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: #4B5563;
      margin: 0 0 12px;
    }

    .timeline-step__text {
      font-size: 1rem;
      color: #4B5563;
      line-height: 1.7;
      margin: 0;
    }

    /* Axis (Linie + Badge) */
    .timeline-step__axis {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .timeline-step__axis-line {
      display: none; /* Die Hauptlinie kommt vom Container */
    }

    .timeline-step__axis-badge {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.25rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border: 4px solid #fff;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .timeline-step__axis-badge:hover {
      transform: scale(1.15);
    }

    .timeline-step__axis-badge--purple {
      background: #eef2ff;
      color: #7c3aed;
    }

    .timeline-step__axis-badge--teal {
      background: #ccfbf1;
      color: #0d9488;
    }

    .timeline-step__axis-badge--blue {
      background: #dbeafe;
      color: #2563eb;
    }

    /* Visual (Card) */
    .timeline-step__visual {
      display: flex;
      justify-content: center;
      padding: 0 20px;
    }

    .timeline-step--left .timeline-step__visual {
      justify-content: flex-start;
    }

    .timeline-step--right .timeline-step__visual {
      justify-content: flex-end;
    }

    .timeline-card {
      background: #fff;
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      min-width: 200px;
      max-width: 260px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .timeline-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    }

    /* Static cards - no hover animation (not clickable) */
    .timeline-card--static {
      cursor: default;
    }

    .timeline-card--static:hover {
      transform: none;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    }

    a.timeline-card--clickable,
    a.timeline-card--clickable:hover,
    a.timeline-card--clickable:focus,
    a.timeline-card--clickable:visited {
      text-decoration: none !important;
      cursor: pointer;
    }

    a.timeline-card--clickable .timeline-card__label,
    a.timeline-card--clickable .timeline-card__icon {
      text-decoration: none !important;
    }

    .timeline-card--clickable:hover {
      transform: translateY(-8px) scale(1.02);
    }

    .timeline-card__icon {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      color: #fff;
    }

    .timeline-card--purple .timeline-card__icon {
      background: linear-gradient(135deg, #8b5cf6, #7c3aed);
      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    }

    .timeline-card--teal .timeline-card__icon {
      background: linear-gradient(135deg, #14b8a6, #0d9488);
      box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4);
    }

    .timeline-card--blue .timeline-card__icon {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    }

    .timeline-card__label {
      font-size: 0.9375rem;
      font-weight: 600;
      color: #374151;
      text-align: center;
    }

    /* Footer */
    .landing-timeline__footer {
      text-align: center;
      margin-top: 60px;
    }

    .landing-timeline__closing {
      font-family: 'Nunito', sans-serif;
      font-size: 1.25rem;
      font-weight: 600;
      color: #6B7280;
      margin: 0 0 24px;
      font-style: italic;
    }

    .landing-timeline__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      font-size: 1.125rem;
      font-weight: 600;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .landing-timeline__cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
      color: white;
      text-decoration: none;
    }

    /* ============================================
       TESTIMONIALS SECTION
       ============================================ */
    .testimonials {
      padding: 80px 20px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .testimonials__header {
      text-align: center;
      margin-bottom: 48px;
    }

    .testimonials__title {
      font-family: 'Nunito', sans-serif;
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 800;
      color: #4B5563;
      margin: 0 0 12px;
    }

    .testimonials__subtitle {
      font-size: clamp(1rem, 2vw, 1.125rem);
      color: #6B7280;
      margin: 0;
      line-height: 1.6;
    }

    .testimonials__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: stretch;
    }

    .testimonial-card {
      background: #fff;
      border-radius: 24px;
      padding: 32px 28px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .testimonial-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }

    .testimonial-card__quote-icon {
      font-size: 2.5rem;
      color: #c7d2fe;
      margin-bottom: 16px;
      line-height: 1;
    }

    .testimonial-card__text {
      font-size: 1rem;
      font-style: italic;
      color: #374151;
      line-height: 1.7;
      margin: 0 0 auto;
      padding-bottom: 24px;
      flex-grow: 1;
    }

    .testimonial-card__profile {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 20px;
      border-top: 1px solid #f3f4f6;
    }

    .testimonial-card__avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .testimonial-card__avatar-icon {
      font-size: 1.5rem;
      color: #6366f1;
    }

    .testimonial-card__info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .testimonial-card__name {
      font-weight: 700;
      font-size: 0.9375rem;
      color: #1F2937;
      margin: 0;
    }

    .testimonial-card__role {
      font-size: 0.8125rem;
      color: #9CA3AF;
      margin: 0;
    }

    /* Testimonials Responsive: Tablet */
    @media (max-width: 900px) {
      .testimonials__grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
      }

      .testimonials {
        padding: 60px 20px;
      }
    }

    /* Testimonials Responsive: Mobile */
    @media (max-width: 600px) {
      .testimonials {
        padding: 50px 16px;
      }

      .testimonial-card {
        padding: 24px 20px;
      }

      .testimonials__header {
        margin-bottom: 32px;
      }
    }

    /* ============================================
       TRUST BADGES (Checkmarks)
       ============================================ */
    .trust-badges {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 32px;
      padding: 32px 20px;
      max-width: 900px;
      margin: 0 auto;
      flex-wrap: wrap;
    }

    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.9375rem;
      color: #4B5563;
      font-weight: 500;
    }

    .trust-badge__icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #d1fae5;
      color: #059669;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      flex-shrink: 0;
    }

    @media (max-width: 600px) {
      .trust-badges {
        flex-direction: column;
        gap: 16px;
        padding: 24px 16px;
      }
    }

    /* ============================================
       RESPONSIVE: Tablet (Timeline)
       ============================================ */
    @media (max-width: 900px) {
      .timeline-step {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center !important;
      }

      .timeline-step__content {
        order: 2;
        text-align: center !important;
      }

      .timeline-step--left .timeline-step__content,
      .timeline-step--right .timeline-step__content {
        text-align: center !important;
      }

      .timeline-step__axis {
        order: 1;
      }

      .timeline-step__visual {
        order: 3;
        justify-content: center !important;
      }

      .timeline-step--left .timeline-step__visual,
      .timeline-step--right .timeline-step__visual {
        justify-content: center !important;
      }

      /* Linie ausblenden auf Tablet/Mobile */
      .landing-timeline__container::before {
        display: none;
      }

      .timeline-step {
        padding: 30px 0;
        border-bottom: 1px solid #e5e7eb;
      }

      .timeline-step:last-child {
        border-bottom: none;
      }
    }

    /* ============================================
       RESPONSIVE: Mobile
       ============================================ */
    @media (max-width: 600px) {
      .landing-timeline {
        padding: 50px 16px 60px;
      }

      .landing-timeline__header {
        margin-bottom: 40px;
      }

      .timeline-card {
        padding: 24px;
        min-width: auto;
        max-width: none;
        width: 100%;
      }

      .timeline-card__icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
      }

      .timeline-step__axis-badge {
        width: 48px;
        height: 48px;
        font-size: 1rem;
      }

      .landing-timeline__cta {
        width: 100%;
        justify-content: center;
      }
    }

    /* Back to Top Button */
    .back-to-top {
      position: fixed;
      left: 24px;
      bottom: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.3s ease;
      z-index: 1000;
    }

    .back-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .back-to-top:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    }

    @media (max-width: 768px) {
      .back-to-top {
        left: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        font-size: 1rem;
      }
    }

    /* ===== Info Sections ===== */
    .info-section {
      padding: 80px 24px;
      max-width: 900px;
      margin: 0 auto;
    }

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

    .info-section__icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .info-section__icon--purple {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
    }

    .info-section__icon--teal {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
    }

    .info-section__label {
      display: inline-block;
      font-family: 'Lexend', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }

    .info-section__label--purple {
      color: #667eea;
    }

    .info-section__label--teal {
      color: #10b981;
    }

    .info-section__title {
      font-family: 'Nunito', sans-serif;
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 800;
      color: #4B5563;
      margin: 0 0 0.75rem;
    }

    .info-section__subtitle {
      font-size: 1.05rem;
      color: #64748b;
      line-height: 1.6;
      margin: 0 0 2.5rem;
    }

    .info-section__columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
      text-align: left;
    }

    .info-section__column-title {
      font-family: 'Lexend', sans-serif;
      font-size: 1.1rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 1rem;
    }

    .info-section__list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .info-section__list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 0.5rem 0;
      font-size: 0.95rem;
      color: #374151;
      line-height: 1.5;
    }

    .info-section__list li i {
      color: #10b981;
      margin-top: 3px;
      flex-shrink: 0;
    }

    .info-section__text {
      font-size: 0.95rem;
      color: #64748b;
      line-height: 1.6;
      margin: 0 0 1.5rem;
    }

    .info-section__note {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 12px;
      padding: 1.25rem;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .info-section__note > i {
      color: #10b981;
      font-size: 1.2rem;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .info-section__note p {
      font-size: 0.9rem;
      color: #374151;
      line-height: 1.5;
      margin: 0;
    }

    .info-section__cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      text-decoration: none;
      border-radius: 10px;
      font-weight: 600;
      font-size: 0.95rem;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .info-section__cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    }

    /* ===== Discover CTA ===== */
    .discover-cta {
      padding: 60px 24px;
      text-align: center;
    }

    .discover-cta__inner {
      max-width: 600px;
      margin: 0 auto;
      background: linear-gradient(135deg, #f5f3ff, #ede9fe);
      border-radius: 20px;
      padding: 3rem 2rem;
    }

    .discover-cta__icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1.25rem;
    }

    .discover-cta__title {
      font-family: 'Lexend', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 0.5rem;
    }

    .discover-cta__subtitle {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.5;
      margin: 0 0 1.5rem;
    }

    .discover-cta__button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      text-decoration: none;
      border-radius: 12px;
      font-weight: 600;
      font-size: 1rem;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .discover-cta__button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    @media (max-width: 640px) {
      .info-section__columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      .info-section__title {
        font-size: 1.4rem;
      }
      .discover-cta__inner {
        padding: 2rem 1.5rem;
      }
    }

    /* ===== FAQ Section ===== */
    .faq-section {
      padding: 80px 24px;
      max-width: 900px;
      margin: 0 auto;
    }

    .faq-section__header {
      text-align: center;
      margin-bottom: 48px;
    }

    .faq-section__title {
      font-family: 'Nunito', sans-serif;
      font-size: clamp(1.75rem, 4vw, 2.25rem);
      font-weight: 800;
      color: #4B5563;
      margin: 0 0 12px 0;
    }

    .faq-section__subtitle {
      font-size: 1.125rem;
      color: #6b7280;
      margin: 0;
    }

    .faq-section__container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .faq-item {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: box-shadow 0.2s ease;
    }

    .faq-item:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .faq-item__question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      font-size: 1.0625rem;
      font-weight: 600;
      color: #374151;
      transition: background 0.2s ease;
    }

    .faq-item__question:hover {
      background: #f9fafb;
    }

    .faq-item__question span {
      flex: 1;
    }

    .faq-item__icon {
      color: #9ca3af;
      font-size: 0.875rem;
      transition: transform 0.3s ease;
      flex-shrink: 0;
    }

    .faq-item.open .faq-item__icon {
      transform: rotate(180deg);
      color: #667eea;
    }

    .faq-item__answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s ease;
    }

    .faq-item.open .faq-item__answer {
      grid-template-rows: 1fr;
    }

    .faq-item__answer-inner {
      overflow: hidden;
    }

    .faq-item__answer p {
      padding: 16px 24px 20px 24px;
      margin: 0;
      font-size: 1rem;
      line-height: 1.7;
      color: #4b5563;
    }

    .faq-item__answer strong {
      color: #374151;
    }

    @media (max-width: 640px) {
      .faq-section {
        padding: 60px 16px;
      }

      .faq-item__question {
        padding: 16px 20px;
        font-size: 1rem;
      }

      .faq-item__answer p {
        padding: 0 20px 16px 20px;
        font-size: 0.9375rem;
      }
    }

    /* ============================================
       FINAL MOBILE OVERRIDE - MUSS ZULETZT STEHEN!
       ============================================ */
    @media screen and (max-width: 768px) {
      .app-header__nav,
      .app-header__nav-tabs,
      nav.app-header__nav,
      .app-header .app-header__nav {
        display: none !important;
        visibility: hidden !important;
      }
      .app-header__hamburger,
      button.app-header__hamburger {
        display: flex !important;
        visibility: visible !important;
      }
    }


/* ================================================================
   BASIS-UEBERNAHME aus therapeut_style.css (2026-07-05)
   Die Landing laedt therapeut_style.css + therapeut-builder.css nicht mehr
   (Landing-Optimierung Schritt 3). Hier stehen 1:1-Kopien der Regeln, die die
   Landing nachweislich nutzt (CSS-Coverage 4 Viewports). Position am DATEIENDE
   ist Absicht: entspricht der Prod-Reihenfolge (Bundle lud NACH landing.css).
   Quelle jeweils therapeut_style.css — bei Aenderungen dort ggf. hier nachziehen.
   ================================================================
   NACHTRAG Spezifitaet: body/.container/.modal-Kopien sind auf body.landing-page
   gescopet — landing.css laedt im Build VOR main.css, die Originale im Bundle luden
   DANACH; der Scope stellt die alte Gewinner-Reihenfolge positionsunabhaengig her.
   ================================================================ */

/* Scrollbar für gesamte Seite SICHTBAR lassen (Orientierungshilfe) */
/* Die Scrollbar-Pfeile werden weiter unten ausgeblendet für modernes Design */

/* ============================================
   GLOBALE SCROLLBAR-ANPASSUNG
   Pfeile/Stepper-Buttons ausblenden für modernes Design
   Verhindert auch Clipping bei border-radius Containern
   ============================================ */

/* Alle Scrollbar-Button-Varianten komplett ausblenden */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:start,
*::-webkit-scrollbar-button:end,
*::-webkit-scrollbar-button:vertical,
*::-webkit-scrollbar-button:horizontal,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:start:increment,
*::-webkit-scrollbar-button:end:decrement,
*::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Scrollbar Track mit Abstand für abgerundete Container */
*::-webkit-scrollbar-track {
  margin: 8px 0;
  border-radius: 4px;
}

/* Body/HTML Scrollbar: Track ab Oberkante Header (nur Safe-Area berücksichtigen) */
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  margin-top: var(--safe-area-top, 0px);
  margin-bottom: var(--safe-area-bottom, 0px);
}

/* Scrollbar Thumb dezent gestalten */
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}


/* Variablen-Fallbacks — AUFGELOESTE Production-Werte statt der rohen
   therapeut_style-:root-Kopie: im alten Bundle (therapeut_style → builder) gewann
   der builder-:root als letzte Definition und setzte die Scales auf 1 zurueck;
   die tatsaechlichen Font-/Dichte-Scales injiziert apply-display-settings.js zur
   Laufzeit inline auf <html> und uebersteuert diese Fallbacks — wie zuvor.
   Namen kollidieren nicht mit den main.css-Tokens (dort nicht definiert). */
:root {
  --bg: #f7f7f9;
  --fg: #222;
  --card: #fff;
  --muted: #666;
  --accent: #2a7ae2;
  --border: #e5e7eb;
  --app-font-scale: 1;
  --app-density-scale: 1;
  --app-control-scale: 1;
  --layout-scale: 1;
}

/* Builder-:root-Literale (therapeut-builder.css Z.2099): gewannen im alten Bundle als
   LETZTE Definition gegen die gleichnamigen main.css-Tokens. body-Scope stellt genau
   diesen Gewinner wieder her. Die --app-*-Scales stehen BEWUSST NICHT hier: die setzt
   apply-display-settings.js inline auf <html>, was ein body-Scope uebersteuern wuerde. */
body.landing-page {
  --space-4: 1rem;
  --space-3: 0.75rem;
  --space-2: 0.5rem;
  --space-6: 1.5rem;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #60a5fa;
  --color-text-secondary: #64748b;
  --color-border: #e2e8f0;
  --control-padding-y: 0.625rem;
  --control-padding-x: 1rem;
  --radius-md: 0.5rem;
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --transition-fast: 0.15s ease;
}
*{box-sizing:border-box}

/* ===========================================
   FULL VIEWPORT WEB-APP LAYOUT (Desktop)
   - Desktop >= 992px: Kein Body-Scrolling, internes Scrollen in Panels
   - Mobile < 992px: normales Seiten-Scrolling
   =========================================== */

html{
  height: 100%;
  overflow: hidden; /* DESKTOP: Kein Seiten-Scrolling */
}

body.landing-page{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:calc(13px*var(--app-font-scale));
  line-height:1.3;
  height: 100%; /* DESKTOP: Exakt Viewport-Hoehe, kein Wachsen */
  overflow: hidden; /* DESKTOP: Kein Seiten-Scrolling */
  /* DESKTOP: Flex-Container für App-Layout */
  display: flex;
  flex-direction: column;
  /* PWA: Header + iOS Safe-Area berücksichtigen */
  padding-top: var(--header-total-desktop, 96px);
  padding-bottom: var(--safe-area-bottom, 0px);
}

/* MOBILE: Normales Seiten-Scrolling wiederherstellen (unter 992px) */
@media (max-width: 991px) {
  html {
    height: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  body.landing-page {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    display: block; /* Kein Flex auf Mobile */
    padding-top: var(--header-total-mobile, 64px);
  }
}

/* Breiter nutzbarer Arbeitsbereich - FLUID LAYOUT */
body.landing-page .container{
  position:relative;
  /* FLUID: Volle Breite mit Padding statt max-width */
  width: 100%;
  max-width: none; /* Keine Breitenbeschränkung */
  margin: 0;
  padding: 0 0 0 2rem; /* DESKTOP: Nur links Padding, rechts uebernimmt Panel (Scrollbar am Rand) */
  /* DESKTOP: Nimmt restlichen Platz ein */
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* MOBILE: Container-Anpassungen (unter 992px) */
@media (max-width: 991px) {
  body.landing-page .container {
    width: min(96vw, 1800px);
    max-width: 1800px;
    margin: calc(10px*var(--layout-scale)) auto;
    padding: 0 clamp(16px,2.6vw,40px);
    padding-bottom: calc(16px*var(--layout-scale));
    flex: none;
    overflow: visible;
    display: block;
  }
}

h1{font-size:20px;margin:0 0 16px}

body.landing-page .modal{position:fixed;inset:0;z-index:3200;font-size:14px;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vh,48px);opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .18s ease,transform .18s ease}
body.landing-page .modal.hidden{display:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px)}
.app-has-modal, .app-has-modal body{overflow:hidden}
body.landing-page .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:0}
body.landing-page .modal-dialog{position:relative;margin:0 auto;background:#fff;width:clamp(320px,92vw,1180px);max-height:92vh;border-radius:12px;box-shadow:0 18px 54px -22px rgba(15,23,42,.55);display:flex;flex-direction:column;overflow:hidden;animation:fadeSlide .18s ease;z-index:1}
@keyframes fadeSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
body.landing-page .modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 8px;border-bottom:1px solid #e5e7eb;background:linear-gradient(#f9fafb,#f1f5f9)}
body.landing-page .modal-header h2{font-size:1.1rem;margin:0;font-weight:600}
body.landing-page .modal-close{border:none;background:transparent;font-size:1.2rem;line-height:1;cursor:pointer;padding:4px 8px;border-radius:6px;color:#444}
body.landing-page .modal-close:hover,.modal-close:focus{background:#e2e8f0;outline:none}
body.landing-page .modal-body{padding:12px 18px 28px;overflow:auto}

.hidden{display:none !important}

/* ================================================================
   TIMELINE — umgezogen aus therapeut-builder.css (einziger Konsument
   ist diese Landing). Davor die 3 Basis-Regeln aus therapeut_style.css
   (Original-Reihenfolge: style-Basis vor Builder-Neutralisierung). */

.timeline-step{position:relative;padding-left:30px;color:#475569;}
.timeline-step::before{content:"";position:absolute;left:10px;top:0;width:2px;height:100%;background:rgba(148,163,184,.35);}
.timeline-step:last-child::before{display:none;}

.timeline-step {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  position: relative;
}

/* Entferne vererbte ::before Pseudo-Elemente */
.timeline-step::before,
.timeline-step__content::before {
  display: none !important;
  content: none !important;
}

/* Content (Text + Buttons) */
.timeline-step__content {
  padding: 0 16px;
  border: none !important;
}

.timeline-step--left .timeline-step__content {
  text-align: right;
}

.timeline-step--right .timeline-step__content {
  text-align: left;
}

/* Step Number Label */
.timeline-step__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.timeline-step__label--purple {
  background: #eef2ff;
  color: #7c3aed;
}

.timeline-step__label--green {
  background: #ecfdf5;
  color: #059669;
}

.timeline-step__label--orange {
  background: #fffbeb;
  color: #d97706;
}

.timeline-step__label--teal {
  background: #ecfeff;
  color: #0891b2;
}

/* Title */
.timeline-step__title {
  font-family: 'Nunito', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #4B5563;
  margin: 0 0 8px;
}

/* Description */
.timeline-step__text {
  font-size: 0.9375rem;
  color: #4B5563;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* Buttons Container */
.timeline-step__buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.timeline-step--left .timeline-step__buttons {
  justify-content: flex-end;
}

.timeline-step--right .timeline-step__buttons {
  justify-content: flex-start;
}

/* Button Styles */
.timeline-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.timeline-btn--primary {
  color: white;
}

.timeline-btn--primary:hover:not(:disabled) {
  transform: translateY(-2px);
}

.timeline-btn--secondary {
  background: white;
  border: 2px solid #e2e8f0;
  color: #64748b;
}

.timeline-btn--secondary:hover:not(:disabled) {
  border-color: #6366f1;
  color: #6366f1;
  background: #f8fafc;
}

.timeline-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Step-specific button colors */
.timeline-step--patient .timeline-btn--primary {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.timeline-step--patient .timeline-btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.timeline-step--exercise .timeline-btn--primary {
  background: linear-gradient(135deg, #10b981, #059669);
}

.timeline-step--exercise .timeline-btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.timeline-step--logobox .timeline-btn--primary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.timeline-step--logobox .timeline-btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.timeline-step--progress .timeline-btn--primary {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.timeline-step--progress .timeline-btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

/* Warning Badge */
.timeline-step__badge {
  display: block;
  color: #d97706;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 10px;
}

.timeline-step__badge::before {
  content: "⚠️ ";
  font-size: 0.75rem;
}

/* Disabled state */
.timeline-step--disabled .timeline-btn {
  opacity: 0.5;
  cursor: not-allowed;
}

.timeline-step--disabled .timeline-btn:hover {
  transform: none;
  box-shadow: none;
}

/* Axis (Badge in der Mitte) */
.timeline-step__axis {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.timeline-step__axis-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 4px solid #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-step__axis-badge:hover {
  transform: scale(1.15);
}

.timeline-step__axis-badge--purple {
  background: #eef2ff;
  color: #7c3aed;
}

.timeline-step__axis-badge--green {
  background: #ecfdf5;
  color: #059669;
}

.timeline-step__axis-badge--orange {
  background: #fffbeb;
  color: #d97706;
}

.timeline-step__axis-badge--teal {
  background: #ecfeff;
  color: #0891b2;
}

/* Visual (Card) */
.timeline-step__visual {
  display: flex;
  padding: 0 16px;
}

.timeline-step--left .timeline-step__visual {
  justify-content: flex-start;
}

.timeline-step--right .timeline-step__visual {
  justify-content: flex-end;
}

.timeline-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 160px;
  max-width: 200px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.timeline-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
}

.timeline-card--purple .timeline-card__icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.timeline-card--green .timeline-card__icon {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.timeline-card--orange .timeline-card__icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.timeline-card--teal .timeline-card__icon {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}

.timeline-card__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
}

/* Disabled card state */
.timeline-step--disabled .timeline-card {
  opacity: 0.6;
}

/* ============================================
   DASHBOARD TIMELINE - Responsive
   ============================================ */

/* Tablet */
@media (max-width: 900px) {
  .dashboard-timeline {
    padding: 30px 16px 40px;
  }

  .timeline-step {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center !important;
    padding: 24px 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .timeline-step:last-child {
    border-bottom: none;
  }

  .timeline-step__content {
    order: 2;
    text-align: center !important;
  }

  .timeline-step--left .timeline-step__content,
  .timeline-step--right .timeline-step__content {
    text-align: center !important;
  }

  .timeline-step__axis {
    order: 1;
  }

  .timeline-step__visual {
    order: 3;
    justify-content: center !important;
  }

  .timeline-step--left .timeline-step__visual,
  .timeline-step--right .timeline-step__visual {
    justify-content: center !important;
  }

  .timeline-step__buttons {
    justify-content: center !important;
  }

  /* Linie ausblenden auf Tablet/Mobile */
  .dashboard-timeline__container::before {
    display: none;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .dashboard-timeline {
    padding: 20px 12px 30px;
  }

  .dashboard-timeline__header {
    margin-bottom: 24px;
  }

  .dashboard-timeline__title {
    font-size: 1.75rem;
  }

  .timeline-card {
    padding: 20px;
    min-width: auto;
    max-width: none;
    width: 100%;
  }

  .timeline-card__icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .timeline-step__axis-badge {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .timeline-step__buttons {
    flex-direction: column;
  }

  .timeline-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   Wrapper-Kopien aus therapeut-builder.css, gescopet auf den Landing-
   Modifier .welcome-dashboard--landing (App-Originale bleiben im Builder). */

.welcome-dashboard--landing {
  --wd-pad-x: 2rem;
  /* Gemeinsamer Innen-Gutter ALLER Full-Bleed-Abschnitte (Teaser, Start-Hub, Start-Content,
     Seitentitel): bestimmt, wie weit deren Inhalt/Überschriften von der (Full-Bleed-)Kante
     eingerückt sind → die eine Stellschraube für den seitlichen „Rand". Unabhängig von
     --wd-pad-x (das ist das Eigen-Padding der .welcome-dashboard, das die Abschnitte per
     Negativ-Marge wieder ausgleichen). Auf dem Handy unten reduziert. */
  --wd-bleed-x: 1.25rem;
  padding: 1.5rem var(--wd-pad-x);
  /* Kein max-width mehr: der Entdecken-Teaser soll als Full-Bleed-Karussell die volle
     Breite nutzen (vorher kappte die 1100px-Spalte ALLES, inkl. der breiten Strips).
     Die Lese-Inhalte (Header, Tab-Panels) werden einzeln auf das 1100px-Lesefenster
     re-zentriert; die Tab-Leiste zentriert sich ohnehin selbst (max-width:520px). */
  margin: 0 auto;
  /* WICHTIG: .therapeut-panel ist ein Flex-Container → .welcome-dashboard ist ein Flex-Item
     mit min-width:auto. Ohne die alte max-width:1100 würde das Item auf die INTRINSISCHE
     Breite seines Inhalts wachsen (befüllter Listen-Strip → mehrere 1000 px) und die
     zentrierten Pills/Timeline aus dem Viewport schieben. width:100% + min-width:0 pinnt
     das Dashboard auf die Panel-Breite (Full-Bleed bleibt) und erlaubt das Schrumpfen,
     sodass overflow-x:hidden am Teaser den Strip wieder intern eindämmt. */
  width: 100%;
  min-width: 0;
  /* Auf sehr breiten Schirmen nicht ganz randlos, sondern etwas schmaler — ruhiger,
     weniger überfüllt. Weiterhin deutlich breiter als das 1100px-Lesefenster. Tunbar. */
  max-width: 1800px;
  position: relative;
  z-index: 1;
}

.welcome-dashboard--landing .start-content {
  /* Full-Bleed wie Teaser/Start-Hub: das seitliche --wd-pad-x der .welcome-dashboard per
     Negativ-Marge ausgleichen, dann 1.25rem Innen-Padding → die linke Kante der Überschrift
     „In der Logobox verfügbar" fluchtet mit allen anderen Abschnitts-Überschriften. */
  /* Top-Margin = gemessene Lücke über „Weitere Bereiche" (~70px desktop). Begründung: über
     .start-hub liefert nur dessen margin-bottom:0 — über „Weitere Bereiche" dagegen steuert der
     Teaser darüber sein Padding-unten + das Übungstypen-Strip-Margin + sein Margin-unten bei
     (~70px gesamt). Damit „In der Logobox" denselben Abschnitts-Abstand bekommt, trägt .start-content
     die volle Lücke selbst (kein Collapse-Partner darüber). Per Playwright gemessen. */
  margin: 4.4rem calc(-1 * var(--wd-pad-x, 2rem)) 0;
  padding: 0 var(--wd-bleed-x, 1.25rem); /* gemeinsamer Gutter — mobil via --wd-bleed-x reduziert */
}

@media (max-width: 640px) {
  .welcome-dashboard--landing .start-content { margin-top: 4rem; }
}

@media (max-width: 768px) {
  .welcome-dashboard--landing {
    --wd-pad-x: 1.25rem; /* schmaler als Desktop → der Teaser gewinnt seitlich Platz für die Karten */
    --wd-bleed-x: 0; /* Handy: randlos — Hero + Karten laufen bündig an die Bildschirmkante (← DER Regler) */
    /* Kein Top-Padding mehr: oben trägt jetzt die fixe Mobile-Titelleiste den Abstand (wie bei
       Marktplatz, dessen Panel ebenfalls kein Top-Padding hat). Der Teaser sitzt damit tight
       unter der Leiste; sein eigenes 1rem-Padding gibt etwas Luft. */
    padding: 0 var(--wd-pad-x) 1.5rem;
  }
}

/* === Praxis-Verifizierung im Registrierungs-Modal (ADR-060) === */
.register-verify {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.register-verify__hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #64748b;
}

.register-verify__toggle {
  margin: 0;
}

.register-verify__phone-hint {
  margin: -0.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4f46e5;
}

.register-verify__phone-hint i {
  margin-right: 0.35rem;
}
