/* ki|partner: App-Navigation unten (iPad hochkant und kleiner, alle Seiten).
   Schwebende Glas-Leiste. Oben bleibt nur das Logo, Burger und Vollbild-Menü entfallen. */
.tabbar { display: none; }

@media (max-width: 1075px) {
  .nav-right, .burger, .mobile-menu { display: none !important; }

  .tabbar {
    --spring: cubic-bezier(.34, 1.4, .64, 1);
    display: block; position: fixed; z-index: 290;
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, calc(env(safe-area-inset-bottom) - 6px));
    max-width: 520px; margin: 0 auto;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(250, 248, 245, .86));
    backdrop-filter: blur(22px) saturate(190%); -webkit-backdrop-filter: blur(22px) saturate(190%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 0 0 1px rgba(15, 30, 46, .07),
      0 2px 6px -2px rgba(15, 30, 46, .12),
      0 18px 40px -16px rgba(15, 30, 46, .38);
    animation: tabbar-in .6s var(--spring) backwards;
  }
  .tabbar-inner { position: relative; display: flex; padding: 6px; }

  /* Gleitende Markierung hinter dem aktiven Tab (per JS positioniert) */
  .tab-ind {
    position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; z-index: 0;
    border-radius: 20px; background: rgba(15, 30, 46, .065);
    box-shadow: inset 0 0 0 1px rgba(15, 30, 46, .04);
    opacity: 0; pointer-events: none;
    transition: transform .45s var(--spring), width .45s var(--spring), opacity .2s;
  }
  .tab-ind.no-anim { transition: none; }

  .tab {
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 54px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border-radius: 20px;
    font: 500 .66rem/1 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap;
    color: #6b6b74; text-decoration: none;
    -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;
    transition: color .2s, transform .35s var(--spring);
  }
  .tab svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .35s var(--spring), stroke-width .2s;
  }
  .tab:hover { color: #141414; }
  .tab:active { transform: scale(.9); }
  .tab:focus-visible { outline: 2px solid #e8470a; outline-offset: -2px; }

  /* Aktiver Tab: dunkel, Icon leicht kräftiger, darunter der orange Punkt der Marke */
  .tab[aria-current="page"] { color: #141414; font-weight: 600; }
  .tab[aria-current="page"] svg { stroke-width: 2; transform: translateY(-1px); }
  .tab[aria-current="page"] svg .tab-ac { stroke: #e8470a; }
  /* Ohne JS: Markierung direkt am Tab */
  .tabbar:not(.is-ready) .tab[aria-current="page"]:not(.tab-cta) { background: rgba(15, 30, 46, .065); }

  /* Kontakt: der eine orange Knopf */
  .tab-cta { color: #141414; font-weight: 600; }
  .tab-cta svg {
    box-sizing: content-box; width: 16px; height: 16px; padding: 7px; margin-top: -8px;
    border-radius: 14px; color: #fff; stroke-width: 2;
    background: linear-gradient(160deg, #ff6a33, #e8470a 55%, #d23f08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -5px rgba(232, 71, 10, .75);
  }
  .tab-cta:hover svg, .tab-cta[aria-current="page"] svg { background: linear-gradient(160deg, #e8470a, #b8380a); transform: none; }
  .tab-cta:active svg { transform: scale(.92); }

  /* Platz unter dem Footer, damit die Leiste nichts verdeckt */
  footer::after { content: ""; display: block; height: calc(48px + env(safe-area-inset-bottom)); }

  /* iPhone quer: Inhalt nicht unter die Kamera-Aussparung */
  @media (orientation: landscape) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } }
}

@keyframes tabbar-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* Beim Tippen in ein Formular blendet sich die Leiste aus (Tastatur) */
@media (max-width: 1075px) and (hover: none) {
  body:has(input:focus, textarea:focus, select:focus) .tabbar { opacity: 0; visibility: hidden; transform: translateY(20px); }
  .tabbar { transition: opacity .2s, visibility .2s, transform .3s; }
}

/* Leiste nur beim ersten Seitenaufruf der Sitzung einfliegen lassen */
.tabbar.no-intro { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .tabbar, .tab, .tab svg, .tab-ind { animation: none; transition: none; }
  .tab:active, .tab-cta:active svg { transform: none; }
}
@media print { .tabbar { display: none !important; } }