/* ============================================
   FLOWGINEERING — Mobile Optimizations
   Alle Fixes für Smartphones & kleine Tablets
   ============================================ */

/* ══════════════════════════════════════════
   HEADER — Mobile (alle Fixes)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Fester Hintergrund OHNE backdrop-filter ──
     backdrop-filter auf einem Elternelement erzeugt
     einen neuen Stacking-Context: das darin enthaltene
     Nav-Panel landete dadurch HINTER dem Overlay (→ Blur-Bug).
     Lösung: solide Farbe, kein backdrop-filter.             */
  .header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-sm);
    /* z-index ÜBER dem Overlay (400) → Nav-Panel im
       Header-Stacking-Context erscheint ebenfalls darüber */
    z-index: 500;
  }

  /* ── Header-Innenabstand ── */
  .header__inner {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }

  /* ── Logo-Text: kleiner aber sichtbar ── */
  .header__logo-text {
    display: block;                      /* War fälschlicherweise none */
    font-size: var(--font-size-sm);
    letter-spacing: 0;
  }

  /* ── WICHTIG: Layout.css setzt über Hero weißen Text.
     Auf Mobile hat der Header aber immer einen hellen
     Hintergrund → Text muss dunkel bleiben.             */
  .header:not(.header--scrolled) .header__logo-text {
    color: var(--text-heading);
  }

  /* Logo-Invertierung aufheben (Desktop invertiert für dunklen Hero,
     Mobile hat immer hellen Header) */
  .header:not(.header--scrolled) .header__logo-img {
    filter: none;
  }

  .header:not(.header--scrolled) .nav__link {
    color: var(--text-secondary);
  }

  .header:not(.header--scrolled) .theme-toggle {
    color: var(--text-secondary);
  }

  .header:not(.header--scrolled) .lang-toggle {
    background: var(--color-gray-100);
  }

  .header:not(.header--scrolled) .lang-toggle__btn {
    color: var(--text-tertiary);
  }

  .header:not(.header--scrolled) .lang-toggle__btn--active {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
  }

  .header:not(.header--scrolled) .mobile-toggle span {
    background: var(--text-primary);
  }

  /* Logo-Icon etwas kleiner */
  .header__logo-img {
    height: 26px;
  }

  /* ── Controls: enger zusammen ── */
  .header__controls {
    gap: var(--space-1);
  }

  /* ── Sprachumschalter: kompakt, wieder sichtbar ── */
  .header .lang-toggle {
    display: flex;                        /* War fälschlicherweise none */
    padding: 1px;
  }

  .header .lang-toggle__btn {
    padding: 2px var(--space-2);
    font-size: 10px;
  }

  /* ── CTA-Button versteckt (zu wenig Platz) ── */
  .header__cta {
    display: none;
  }

  /* ── Hamburger: größeres Touch-Target ── */
  .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: var(--space-2);
    /* Höchster z-index im Header */
    z-index: calc(var(--z-fixed) + 20);
    position: relative;
    flex-shrink: 0;
  }

  /* ── Nav-Panel: UNABHÄNGIG vom Header-Stacking-Context ──
     position:fixed + isolation:isolate macht das Panel
     zu einem eigenständigen Layer über allem.               */
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg-surface);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--header-height) + var(--space-6)) var(--space-6) var(--space-6);
    gap: var(--space-1);
    transition: right var(--transition-base);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    border-left: 1px solid var(--border-color);
    /* Über Header (300) UND Overlay (301) */
    z-index: 400;
    /* Eigener Stacking-Context — isoliert von Header */
    isolation: isolate;
  }

  .nav--open {
    right: 0;
  }

  /* Nav-Links */
  .nav__link {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
    /* Im aufgeklappten Menü: normale dunkle Farben */
    color: var(--text-secondary) !important;
    background: transparent !important;
  }

  .nav__link:hover,
  .nav__link--active {
    color: var(--color-primary) !important;
    background: var(--color-primary-50) !important;
  }

  /* ── Overlay: zwischen Seite und Nav-Panel ── */
  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Unter Header (500), damit Nav-Panel sichtbar bleibt */
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
  }

  .mobile-overlay--visible {
    opacity: 1;
    visibility: visible;
  }
}


/* ══════════════════════════════════════════
   HERO — Mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-12);
    text-align: center;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__badge {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero__title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    margin-bottom: var(--space-4);
  }

  .hero__subtitle {
    font-size: var(--font-size-base);
    max-width: 100%;
    text-align: center;
  }

  .hero__stats {
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-8);
  }

  .hero__stat-value {
    font-size: var(--font-size-2xl);
  }

  .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════
   ABOUT HERO — Mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .about-hero {
    gap: var(--space-8);
  }

  .about-info__name {
    font-size: var(--font-size-2xl);
  }

  .about-info__title {
    font-size: var(--font-size-base);
  }
}

/* ══════════════════════════════════════════
   PAGE HEADER — Mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-header {
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8);
  }

  .page-header__title {
    font-size: var(--font-size-2xl);
  }

  .page-header__subtitle {
    font-size: var(--font-size-sm);
  }
}

/* ══════════════════════════════════════════
   CARDS & GRIDS — Mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .card {
    padding: var(--space-5);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: var(--space-6);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ══════════════════════════════════════════
   CTA-SEKTION — Mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .cta-section__title {
    font-size: var(--font-size-xl);
  }

  .cta-section__text {
    font-size: var(--font-size-base);
    padding: 0 var(--space-2);
  }
}

/* ══════════════════════════════════════════
   FOOTER — Mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer {
    padding: var(--space-12) 0 var(--space-8);
  }

  .footer__grid {
    gap: var(--space-8);
  }

  .footer__brand {
    max-width: 100%;
    text-align: center;
  }

  .footer__logo {
    justify-content: center;
  }
}

/* ══════════════════════════════════════════
   EXTRA KLEIN — unter 480px
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
  .header__inner {
    padding: 0 var(--space-3);
  }

  .hero__title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .section {
    padding: var(--space-10) 0;
  }

  /* Blog-Grid: Mindestbreite anpassen */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons nicht overflow-hidden auf sehr kleinen Screens */
  .btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
  }

  /* Toast: volle Breite */
  .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    transform: translateY(200%);
    max-width: none;
    width: auto;
  }

  .toast--visible {
    transform: translateY(0);
  }

  /* Back-to-top etwas kleiner */
  .back-to-top {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 38px;
    height: 38px;
  }

  /* Cert-Grid: eine Spalte */
  .cert-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════
   DARK MODE + MOBILE KOMBINIERT
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-theme="dark"] .header {
    background: rgba(10, 22, 40, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  [data-theme="dark"] .nav {
    background: var(--bg-surface);
    border-left-color: rgba(255, 255, 255, 0.06);
  }

  /* Theme-Toggle im Dark Mode sichtbar machen */
  [data-theme="dark"] .header .theme-toggle,
  [data-theme="dark"] .header:not(.header--scrolled) .theme-toggle {
    color: rgba(255, 255, 255, 0.85);
  }

  [data-theme="dark"] .header .theme-toggle:hover,
  [data-theme="dark"] .header:not(.header--scrolled) .theme-toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }

  /* Lang-Toggle im Dark Mode sichtbar */
  [data-theme="dark"] .header:not(.header--scrolled) .lang-toggle {
    background: rgba(255, 255, 255, 0.1);
  }

  [data-theme="dark"] .header:not(.header--scrolled) .lang-toggle__btn {
    color: rgba(255, 255, 255, 0.7);
  }

  [data-theme="dark"] .header:not(.header--scrolled) .lang-toggle__btn--active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }

  /* Hamburger im Dark Mode sichtbar */
  [data-theme="dark"] .header:not(.header--scrolled) .mobile-toggle span {
    background: rgba(255, 255, 255, 0.9);
  }

  /* ── Light Mode Reset (gleiche Spezifität wie Dark-Regeln) ──
     Nötig weil data-theme="light" gesetzt wird, nicht entfernt.
     Ohne diesen Block "gewinnen" die Dark-Regeln bei erneutem Wechsel. */
  [data-theme="light"] .header .theme-toggle,
  [data-theme="light"] .header:not(.header--scrolled) .theme-toggle {
    color: var(--text-secondary);
  }

  [data-theme="light"] .header .theme-toggle:hover,
  [data-theme="light"] .header:not(.header--scrolled) .theme-toggle:hover {
    color: var(--color-primary);
    background: var(--color-primary-50);
  }

  [data-theme="light"] .header:not(.header--scrolled) .lang-toggle {
    background: var(--color-gray-100);
  }

  [data-theme="light"] .header:not(.header--scrolled) .lang-toggle__btn {
    color: var(--text-tertiary);
  }

  [data-theme="light"] .header:not(.header--scrolled) .lang-toggle__btn--active {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
  }

  [data-theme="light"] .header:not(.header--scrolled) .mobile-toggle span {
    background: var(--text-primary);
  }

  [data-theme="light"] .header:not(.header--scrolled) .header__logo-img {
    filter: none;
  }
}