/* nav.css — merged from nav-compact-v2.css + nav-override.css. Always link AFTER inline <style>. */
/**

 * Tischweb header: single source for responsive nav (marketing + legal).

 * - Desktop (≥1024px): 3-column grid; hide menu button; center links shrink (overflow hidden); no header clipping.

 * - Compact (≤1023px): flex row; bar links + CTA hidden; hamburger in .nav-actions.

 */



/* ── Desktop ───────────────────────────────────────────────────────────── */



@media (min-width: 1024px) {

  #nav {

    overflow-x: visible;

    overflow: visible;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    background: rgba(253,250,246,.92);

  }



  #nav > .ni {

    overflow-x: visible;

    min-width: 0;

  }



  #nav > .ni > .nav-links {

    min-width: 0;

    overflow-x: hidden;

    overflow-y: visible;

    justify-content: center;

  }



  #nav > .ni > .nav-links > .nav-link {

    min-width: 0;

    flex-shrink: 1;

  }



  #nav .ni > .nav-actions {

    min-width: max-content;

    flex-shrink: 0;

  }



  #nav .ni > .nav-actions > button.nav-toggle,

  #nav .ni > .nav-actions > #navToggle {

    display: none !important;

  }

}



@media (min-width: 1024px) and (max-width: 1600px) {

  #nav > .ni > .nav-links {

    gap: clamp(8px, 0.9vw, 20px);

  }



  #nav > .ni > .nav-links > .nav-link {

    font-size: clamp(11px, 1.05vw, 14px);

  }



  #nav > .ni > .nav-links > a[data-nav-section='rechner'] {

    display: none;

  }

}



@media (min-width: 1024px) and (max-width: 1240px) {

  #nav > .ni > .nav-links > a[data-nav-section='wie-es-funktioniert'] {

    display: none;

  }

}



@media (min-width: 1024px) and (max-width: 1400px) {

  #nav {

    padding-left: max(20px, env(safe-area-inset-left));

    padding-right: max(20px, env(safe-area-inset-right));

  }



  #nav > .ni {

    gap: 12px 16px;

  }

}



/* ── Compact (hamburger through 1023px) ─────────────────────────────────── */



@media (max-width: 1023px) {

  #nav {

    z-index: 9999;

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    max-width: 100vw !important;

    width: 100vw !important;

    padding-left: max(16px, env(safe-area-inset-left));

    padding-right: max(16px, env(safe-area-inset-right));

    overflow: visible;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

  }



  #nav.dark-nav {

    background: rgba(12, 9, 8, 0.96) !important;

    border-bottom-color: rgba(255, 255, 255, 0.15) !important;

  }



  #nav.sc:not(.dark-nav),

  #nav:not(.dark-nav) {

    background: rgba(253, 250, 246, 0.97) !important;

  }



  body.legal-page #nav .ni--legal-minimal,

  #nav > .ni {

    display: flex !important;

    flex-flow: row nowrap !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 12px !important;

    grid-template-columns: unset !important;

    grid-template-rows: unset !important;

    width: 100%;

    max-width: var(--mw, 1160px);

    min-width: 0;

    overflow: visible !important;

  }



  body.legal-page #nav .ni--legal-minimal {

    justify-content: space-between;

  }



  #nav .ni > .nl {

    flex: 0 0 auto !important;

    min-width: 0 !important;

    max-width: min(176px, calc(100vw - 120px)) !important;

    grid-column: unset !important;

    grid-row: unset !important;

  }



  #nav .ni > .nav-links {

    display: none !important;

  }



  #nav .ni > .nav-actions {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 0 !important;

    flex: 0 0 auto !important;

    flex-shrink: 0 !important;

    min-width: 48px !important;

    overflow: visible !important;

    grid-column: unset !important;

    grid-row: unset !important;

    position: static !important;

    right: auto !important;

    top: auto !important;

    transform: none !important;

    z-index: auto !important;

  }



  #nav .ni > .nav-actions .nc {

    display: none !important;

  }



  #nav .ni > .nav-actions > button.nav-toggle,

  #nav .ni > .nav-actions > #navToggle {

    display: inline-flex !important;

    flex: 0 0 auto !important;

    width: 44px !important;

    height: 44px !important;

    min-width: 44px !important;

    min-height: 44px !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

    align-items: center !important;

    justify-content: center !important;

    margin: 0 !important;

    pointer-events: auto !important;

    border: none !important;

    border-radius: 10px !important;

    background: transparent !important;

  }



  #nav .nav-toggle > span {

    display: block !important;

  }



  #nav:not(.dark-nav) .nav-toggle > span {

    background: var(--ink, #1c1714) !important;

  }



  #nav.dark-nav .nav-toggle > span {

    background: #fff !important;

  }



  #nav:not(.dark-nav) .nav-toggle:hover {

    background: rgba(28, 23, 20, 0.06) !important;

  }



  #nav.dark-nav .nav-toggle:hover {

    background: rgba(255, 255, 255, 0.08) !important;

  }

}

/**

 * Loaded last in <head> — wins over inline page styles. Build: 20260528e

 */

@media (max-width: 1023px) {

  #nav {

    z-index: 9999 !important;

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

  }



  #nav:not(.dark-nav) {

    background: rgba(253, 250, 246, 0.97) !important;

  }



  #nav.dark-nav {

    background: rgba(12, 9, 8, 0.96) !important;

    border-bottom-color: rgba(255, 255, 255, 0.15) !important;

  }



  #nav > .ni {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    overflow: visible !important;

  }



  #nav .nav-actions {

    position: static !important;

    display: flex !important;

    flex: 0 0 auto !important;

  }



  #nav #navToggle,

  #nav .nav-toggle {

    display: inline-flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 44px !important;

    height: 44px !important;

    min-width: 44px !important;

    min-height: 44px !important;

    overflow: visible !important;

    pointer-events: auto !important;

    position: relative !important;

    border: none !important;

    background: transparent !important;

  }

}



@media (min-width: 1024px) {

  #nav #navToggle,

  #nav .nav-toggle {

    display: none !important;

  }

}