/* Site-wide enhancements for burri-bernina.ch */

/* Logo image (replaces text-based logo across header & footer) */
.header .logo,
.footer .logo {
  flex-shrink: 0;  /* don't squash the logo when nav is crowded */
  width: max-content;  /* don't let flex-column stretch the anchor */
  max-width: 100%;
}
.logo-img {
  height: 180px;
  width: auto !important;
  max-width: 100%;
  display: block;
  object-fit: contain;
}
.footer .logo-img {
  height: 200px;
  filter: brightness(0) invert(1);  /* white version on dark footer */
}
@media (max-width: 768px) {
  .logo-img { height: 120px; }
  .footer .logo-img { height: 150px; }
}

/* Hamburger menu always visible (desktop + mobile) */
.hamburger-menu { display: block !important; }
.nav-links { display: none !important; }
.nav-links.mobile-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
  z-index: 9998 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2rem !important;
  background: #fff9ee !important;
  padding: 4rem 2rem !important;
  overflow-y: auto;
  margin: 0 !important;
}
.nav-links.mobile-open a {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: #1e1b12;
}
/* Hamburger button stays clickable above the open menu */
.hamburger-menu { position: relative; z-index: 9999; }

/* "Demnächst online" indicator on disabled external links */
[data-coming-soon] {
  cursor: help;
  position: relative;
}

[data-coming-soon]::after {
  content: "Demnächst";
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(30, 27, 18, 0.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* Don't show the badge on small inline links (footer lists etc.) */
ul li > a[data-coming-soon]::after,
nav a[data-coming-soon]::after {
  display: none;
}

ul li > a[data-coming-soon],
nav a[data-coming-soon] {
  opacity: 0.6;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Toast for coming-soon click */
.coming-soon-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e1b12;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  max-width: calc(100% - 40px);
  text-align: center;
}

.coming-soon-toast.visible {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   COOKIE BANNER (DSG/DSGVO-konform)
   ═══════════════════════════════════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  color: #1e1b12;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(30, 27, 18, 0.18);
  z-index: 10000;
  font-family: 'Lexend', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  display: none;
  border: 1px solid #efe7d8;
}

.cookie-banner.visible { display: block; animation: cookie-in 0.3s ease; }

@keyframes cookie-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cookie-banner h3 {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e1b12;
  margin-bottom: 8px;
}

.cookie-banner p {
  color: #605e5e;
  margin-bottom: 16px;
}

.cookie-banner a {
  color: #ba0100;
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-btn {
  flex: 1;
  min-width: 120px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cookie-btn-primary {
  background: linear-gradient(135deg, #ba0100, #e90000);
  color: #fff;
}
.cookie-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(186, 1, 0, 0.25);
}

.cookie-btn-secondary {
  background: transparent;
  color: #1e1b12;
  border: 1px solid #946e68;
}
.cookie-btn-secondary:hover { background: #faf3e3; }

.cookie-btn-text {
  flex: 0 0 auto;
  background: transparent;
  color: #605e5e;
  text-decoration: underline;
  padding: 12px 8px;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
}
.cookie-btn-text:hover { color: #ba0100; }

.cookie-banner-details {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #efe7d8;
}
.cookie-banner-details.visible { display: block; }

.cookie-cat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f5edde;
}
.cookie-cat:last-child { border-bottom: none; }

.cookie-cat-text { flex: 1; }
.cookie-cat-text strong { display: block; color: #1e1b12; margin-bottom: 2px; }
.cookie-cat-text small { color: #605e5e; font-size: 0.8rem; }

.cookie-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background: #946e68;
  border-radius: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cookie-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.cookie-toggle.on { background: #ba0100; }
.cookie-toggle.on::after { transform: translateX(18px); }
.cookie-toggle.disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
  .cookie-banner { padding: 18px; bottom: 8px; left: 8px; right: 8px; }
  .cookie-btn { min-width: 0; padding: 10px 14px; font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER SHOP-CTA — prominenter Verkaufs-Pfad in der Hauptnav
   ═══════════════════════════════════════════════════════════════════ */
.nav-shop-cta {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.15rem !important;
  background: linear-gradient(135deg, #ba0100, #e90000) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.nav-shop-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(186, 1, 0, .28);
  color: #fff !important;
}
.nav-shop-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 768px) {
  .nav-shop-cta { padding: .5rem .75rem !important; font-size: .7rem !important; }
  .nav-shop-cta-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-END SHOP-CTA — auf news.html, service.html etc.
   ═══════════════════════════════════════════════════════════════════ */
.bb-shop-promo {
  padding: 5rem 0;
  background: linear-gradient(135deg, #1c2530 0%, #0f1620 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bb-shop-promo::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(186, 1, 0, .25) 0%, transparent 70%);
  pointer-events: none;
}
.bb-shop-promo-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2.5rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.bb-shop-promo .label {
  color: #e90000 !important;
  display: block;
  margin-bottom: .75rem;
}
.bb-shop-promo h2 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
}
.bb-shop-promo p {
  color: rgba(255, 255, 255, .8);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.bb-shop-promo .btn-primary {
  font-size: .9rem;
  padding: 1rem 2.5rem;
}
.bb-shop-promo-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.bb-shop-promo-stat {
  text-align: center;
}
.bb-shop-promo-stat strong {
  display: block;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 2rem;
  color: #e90000;
  line-height: 1;
  margin-bottom: .25rem;
}
.bb-shop-promo-stat span {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}
@media (max-width: 600px) {
  .bb-shop-promo { padding: 3.5rem 0; }
  .bb-shop-promo-stats { gap: 1.5rem; }
  .bb-shop-promo-stat strong { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER SHOP CTA — replaces the old "Maschinen" + "Zubehör" columns
   ═══════════════════════════════════════════════════════════════════ */
.footer-shop-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(135deg, #ba0100, #e90000);
  border-radius: 8px;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
  height: 100%;
  min-height: 120px;
}
.footer-shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(186, 1, 0, .35);
  color: #fff !important;
}
.footer-shop-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-shop-icon svg {
  width: 30px;
  height: 30px;
  color: #fff;
}
.footer-shop-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.footer-shop-label {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.01em;
}
.footer-shop-sub {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  opacity: .92;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.footer-shop-sub svg { width: 14px; height: 14px; }
@media (max-width: 1024px) {
  .footer-shop-card { padding: 1.25rem; gap: 1rem; min-height: 0; }
  .footer-shop-icon { width: 48px; height: 48px; }
  .footer-shop-icon svg { width: 24px; height: 24px; }
  .footer-shop-label { font-size: 1.35rem; }
}
@media (max-width: 768px) {
  .footer-shop-card { padding: 1.5rem; }
  .footer-shop-label { font-size: 1.5rem; }
}

/* ════════════════════════════════════════════════════
   Lesbarkeit: Standorte (Top-Bar) + Telefonnummer (Header)
   bewusst grösser als der ursprüngliche Inline-Style
   ════════════════════════════════════════════════════ */
.top-bar { font-size: 0.95rem; padding: 0.65rem 0; }
.top-bar-locs { gap: 1.75rem; }
.top-bar-locs a {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.top-bar .dealer-badge {
  font-size: 0.85rem;
  font-weight: 700;
}

.nav-actions a[href^="tel:"] {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.75rem;
  color: var(--on-background);
}
.nav-actions a[href^="tel:"]:hover {
  color: var(--primary);
}

@media (max-width: 768px) {
  .top-bar { font-size: 0.85rem; }
  .top-bar-locs { gap: 1rem; }
  .top-bar-locs a { font-size: 0.85rem; }
  .top-bar .dealer-badge { font-size: 0.78rem; }
}

/* ════════════════════════════════════════════════════
   MOBILE-FIX: Header-Überlauf verhindern
   Telefonnummer auf Mobile als Hörer-Icon (Tap-to-Call bleibt)
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header-inner { gap: 0.25rem; }
  .nav-actions { gap: 0.35rem; }
  .nav-actions a[href^="tel:"] {
    font-size: 0 !important;
    line-height: 0;
    color: transparent !important;
    padding: 0.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-actions a[href^="tel:"]::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1b12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* ════════════════════════════════════════════════════
   MOBILE-FIX: Footer-Bottom (Copyright + Links) stapeln
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
  }
}

/* ════════════════════════════════════════════════════
   MOBILE-FIX: Cookie-Banner – "Einstellungen" eigene Zeile
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cookie-banner-actions { gap: 6px; }
  .cookie-btn-text { flex: 1 1 100%; order: 99; padding: 8px; text-align: center; }
}

/* ════════════════════════════════════════════════════
   Tabellen scrollbar machen, statt die Seite zu sprengen
   (z. B. Drittanbieter-Tabelle auf datenschutz.html)
   ════════════════════════════════════════════════════ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}
.table-scroll table { margin: 0; }

/* ════════════════════════════════════════════════════
   Site-wide Search Overlay
   ════════════════════════════════════════════════════ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 18, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 2rem;
  overflow-y: auto;
}
.search-overlay.open { display: flex; }
body.search-open { overflow: hidden; }

.search-overlay-inner {
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 6rem);
}

.search-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #efe7d8;
  background: #fff9ee;
}
.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #946e68;
}
.search-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: #1e1b12;
  padding: 0.5rem 0;
  -webkit-appearance: none;
}
.search-input-wrap input::placeholder { color: #946e68; }

.search-close {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #5e3f39;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-close:hover { color: #ba0100; }

.search-results {
  overflow-y: auto;
  max-height: 70vh;
  padding: 0.5rem 0;
}

.search-hint {
  padding: 1.5rem 1.25rem;
  color: #605e5e;
  font-size: 0.95rem;
  text-align: center;
}

.search-result {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  color: #1e1b12;
  border-bottom: 1px solid #f5edde;
  transition: background 0.15s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover,
.search-result:focus {
  background: #faf3e3;
  outline: none;
}

.search-cat {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  background: #ba0100;
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  white-space: nowrap;
}
.search-title {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.search-excerpt {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.85rem;
  color: #605e5e;
  line-height: 1.4;
}
.search-extras {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.search-meta {
  font-size: 0.75rem;
  color: #946e68;
  font-weight: 600;
}
.search-result mark {
  background: rgba(186, 1, 0, 0.15);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .search-overlay { padding: 0.5rem; }
  .search-overlay-inner { max-height: calc(100vh - 1rem); border-radius: 6px; }
  .search-result { padding: 0.75rem 1rem; }
  .search-title { font-size: 0.95rem; }
}