/* =========================================================
   navbar_Vitrinen.css — Layout wie in Vitrine_1
   (Hell: #eae6dd | Rotbraun: #8b3f3f)
========================================================= */
:root{
  --nav-bg: #eae6dd;
  --nav-fg: #8b3f3f;
  --nav-fg-strong: #333333;
  --nav-border: #8b3f3f;

  --font-mono: var(--font-ui);

  --radius: 6px;

  
  /* Spacing wie in navbar.css */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;

  /* Muted/Divider wie in navbar.css, aber Vitrinen-Farbwelt */
  --brand-muted: rgba(139, 63, 63, 0.7);
  --brand-divider: rgba(139, 63, 63, 0.35);
}

/* =========================================================
   1) Navbar Basis
========================================================= */
.site-navbar{
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  position: relative; /* nötig für den mittigen Titel (absolute) */
  z-index: 1050;
  font-family: var(--font-mono);
}

/* Links/Buttons in der Navbar */
.site-navbar .nav-link,
.site-navbar .navbar-brand{
  color: var(--nav-fg) !important;
  font-family: var(--font-mono);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-navbar .nav-link:hover,
.site-navbar .navbar-brand:hover{
  color: var(--nav-fg-strong) !important;
}

/* =========================================================
   2) “UNBELASTET?” Button + Split-Dropdown wie in Vitrine_1
========================================================= */
.site-brand-btn{
  color: var(--nav-fg) !important;
  border-color: var(--nav-border) !important;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: var(--radius);
  background-color: transparent !important;
}


.site-brand-btn:hover{
  color: var(--nav-fg-strong) !important;
  border-color: var(--nav-fg-strong) !important; /* oder: var(--nav-border) */
}


/* Split-Button soll nicht “schwarz” werden */
.site-brand-btn:focus,
.site-brand-btn:focus-visible,
.site-brand-btn:active,
.btn-group .site-brand-btn.show{
  color: var(--nav-fg) !important;
  border-color: var(--nav-border) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.btn-group .site-brand-btn,
.btn-group .site-brand-btn.dropdown-toggle-split {
  font-weight: 500 !important;
}


/* Dropdown-Menü */
.site-navbar .dropdown-menu{
  font-family: var(--font-mono);
}

.site-navbar .dropdown-item{
  color: var(--nav-fg) !important;
  font-family: var(--font-mono);
}

.site-navbar .dropdown-item:active{
  background-color: transparent !important; /* wie in Vitrine_1 */
  color: var(--nav-fg) !important;
}

/* =========================================================
   3) Mittiger Titel (wie position-absolute start-50 …)
   -> du gibst dem Titel im HTML einfach class="site-title"
========================================================= */
.site-title{
  color: #8b3f3f;
  font-family: "IBM Plex Mono", monospace;
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
  cursor: default;
}

/* Desktop/Tablet: kleiner Abstand nach oben (wie bei dir) */
@media (max-width: 991.98px){
  .site-title{ margin-top: var(--space-2); }
}

/* Tablet quer: Titel etwas kompakter */
@media (min-width: 992px) and (max-width: 1199.98px){
  .site-title{
    font-size: 0.9rem;
    line-height: 1.3;
    white-space: normal; /* darf umbrechen */
  }
}

@media (min-width: 992px) and (max-width: 1199.98px){
  .site-navbar .container-fluid{
    position: relative;
  }

  /* der Tablet-Titelblock (d-xl-none) soll in der Mitte sitzen */
  .site-navbar .site-title-wrapper.d-xl-none{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 60%;
    pointer-events: none; /* damit Burger/Link rechts klickbar bleiben */
  }

  .site-navbar .site-title-wrapper.d-xl-none .site-title{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* =========================================================
   4) Pagination – exakt wie in Vitrine_1
========================================================= */

.site-navbar .vitrine-pagination {
  margin-bottom: 0 !important;
}

/* Standard-Seiten */
.site-navbar .vitrine-pagination .page-link {
  color: #8b3f3f !important;
  background-color: #eae6dd !important;
  border-color: #8b3f3f !important;
  font-family: var(--font-mono);
  box-shadow: none !important;
}

/* Hover */
.site-navbar .vitrine-pagination .page-link:hover {
  background-color: #d9d3c8 !important;
  color: #8b3f3f !important;
  
}


/* Aktive Seite (Bootstrap-konform!) */
.site-navbar .vitrine-pagination .page-item.active .page-link {
  color: #eae6dd !important;
  background-color: #8b3f3f !important;
  border-color: #8b3f3f !important;
}

/* Disabled (optional, sauberer Look) */
.site-navbar .vitrine-pagination .page-item.disabled .page-link {
  opacity: 0.5;
  pointer-events: none;
}

/* =========================================================
   5) Toggler (falls du navbar-expand-lg + collapse nutzt)
========================================================= */
.site-navbar .navbar-toggler{
  border: 1px solid var(--nav-border);
  border-radius: 0.4rem;
}

.site-navbar .navbar-toggler:focus,
.site-navbar .navbar-toggler:active{
  box-shadow: none !important;
  outline: none !important;
}

.site-navbar .navbar-toggler-icon{
  filter: none; /* auf hellem Grund nicht invertieren */
}

/* =========================================================
   Offcanvas – harmonisiert mit navbar.css
========================================================= */

.offcanvas.site-offcanvas{
  --bs-offcanvas-width: clamp(260px, 66.6667vw, 360px);
  z-index: 1060;
}

.site-offcanvas{
  background-color: var(--nav-bg);
  color: var(--nav-fg);
  font-family: var(--font-mono);

  width: clamp(260px, 66.6667vw, 360px);
}

/* Header: Divider wie im anderen Offcanvas */
.site-offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--brand-divider);
}

/* Body: exakt gleiche Kompaktheit */
.site-offcanvas .offcanvas-body{
  padding: var(--space-3);
}

/* Abschnittstitel */
.site-offcanvas-section-title{
  color: var(--brand-muted);
  font-weight: 700;
  margin: var(--space-1) 0 var(--space-2) 0;
}

/* Divider */
.site-divider{
  border: 0;
  border-top: 1px solid var(--brand-divider);
  margin: var(--space-2) 0;
}

/* Links */
.site-offcanvas-link{
  color: var(--nav-fg) !important;
  text-decoration: none !important;
  padding: 0.25rem 0;
}
.site-offcanvas-link:hover{
  color: var(--nav-fg-strong) !important;
}

/* Disabled wie im anderen Offcanvas */
.site-offcanvas-link.is-disabled,
.site-offcanvas-link.is-disabled[aria-disabled="true"]{
  color: rgba(139, 63, 63, 0.5) !important;
  font-weight: 400 !important;
  pointer-events: none;
}

/* Close-Button auf hellem Grund */
.site-offcanvas .btn-close{
  filter: none;
}

/* Backdrop-Opacity wie in navbar.css */
.offcanvas-backdrop.show{
  opacity: 0.20;
}

.site-navbar,
.site-navbar * ,
.site-offcanvas,
.site-offcanvas * {
  font-family: var(--font-mono) !important;
}

/* =========================================================
   Vitrinen-Navigation: robuste Umschaltung
   - Desktop/Laptop (auch schmale Fenster): Seitenpfeile
   - Touch-Only Phones/Tablets: Bottom-Pill
========================================================= */

/* Default (Desktop/Laptop): Seitenpfeile an, Bottom-Bar aus */
.vitrine-nav{ display: block; }
.vitrine-nav{ z-index: 2000; }
.vitrine-nav-mobile{ display: none; }

/* Touch-Only (vom JS gesetzt): Seitenpfeile aus, Bottom-Bar an */
/* Touch: nur auf kleinen Screens (Phone) Bottom-Pill, ab Tablet/Laptop Side-Bar */
/* Fallback nur für Phones: Bottom-Bar an, Seitenpfeile aus */
@media (max-width: 991.98px) and (hover: none) and (pointer: coarse){
  .vitrine-nav{
    display: none !important;
  }
  .vitrine-nav-mobile{
    display: flex !important;
  }
}


@media (min-width: 992px){
  html.is-touch .vitrine-nav{ display: block !important; }
  html.is-touch .vitrine-nav-mobile{ display: none !important; }
}


html.is-touch .vitrine-nav-mobile{
  display: flex !important;
  position: fixed;

  /* mittig im Viewport */
  left: 50%;
  transform: translateX(-50%);

  /* leicht oberhalb des Bildschirmrandes + safe-area */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);

  /* Pill-Layout statt full width */
  width: fit-content;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--nav-border);
  border-radius: 999px;

  z-index: 1065;
  background: var(--nav-bg);

  padding: 0.45rem 0.65rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  /* optional, hilft gegen "abgeschnitten"-Gefühl und hebt sie ab */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* =========================================================
   Mobile Pill Nav: erst nach Scroll einblenden, beim Footer ausblenden
   Gesteuert über Klassen am Element:
   - .is-visible         -> darf sichtbar sein
   - .is-footer-overlap  -> ausblenden (Footer im Viewport)
========================================================= */

/* Basiszustand auf Touch: unsichtbar, aber layout-stabil */
html.is-touch .vitrine-nav-mobile{
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

/* Nach Scroll: sichtbar */
html.is-touch .vitrine-nav-mobile.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Wenn Footer erscheint: wieder ausblenden */
html.is-touch .vitrine-nav-mobile.is-footer-overlap{
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}

/* Mobile Pill: Buttons komplett ausblenden (ohne Platz) */
.vnm-hidden { display: none !important; }

/* Fallback nur für Phones: auf Tablets/Laptops soll die Sidebar bleiben */
@media (max-width: 991.98px) and (hover: none) and (pointer: coarse){
  .vitrine-nav{ display: none !important; }
  .vitrine-nav-mobile{ display: flex !important; }
}