:root{
  --nio-ink: #333333;
  --nio-ink-soft: #444444;
  --nio-ink-deep: #262626;
  --nio-slate: #6a6a6a;
  --nio-silver: #a0a0a0;
  --nio-brand-gray: #6e6e6e;
  --nio-brand-gray-soft: #808080;
  --nio-line: #e8e2d2;
  --nio-line-soft: #efe9db;
  --nio-cream: #f3ecda;
  --nio-cream-2: #e6ddc4;
  --nio-paper: #fbf8f1;
  --nio-warm-white: #fdfaf3;
  --nio-white: #ffffff;
  --nio-accent: #c9a876;
  --nio-accent-soft: #d8bf8e;
  --nio-bronze: #7a3a2e;
  --nio-metal-1: #b4bac4;
  --nio-metal-2: #d6d9df;

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-accent: 'Instrument Serif', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --maxw: 1320px;
  --radius: 12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--nio-ink);
  background:var(--nio-paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;margin:0;color:var(--nio-ink);line-height:1.08}
h1{font-size:clamp(36px, 4.4vw, 64px); font-weight:500}
h2{font-size:clamp(34px, 3.6vw, 58px);font-weight:500}
h3{font-size:clamp(22px,1.8vw,28px);font-weight:600;letter-spacing:-.015em}
em.accent{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1em 0}
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nio-slate);font-weight:600;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:20px;height:6px;background:var(--nio-bronze);display:inline-block;border-radius:1px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  background:var(--nio-brand-gray);color:var(--nio-paper);
  font-family:var(--font-body);font-weight:500;font-size:14px;
  letter-spacing:.01em;
  border:1px solid var(--nio-brand-gray);border-radius:999px;
  cursor:pointer;transition:all .2s ease;
}
.btn:hover{background:var(--nio-brand-gray-soft);border-color:var(--nio-brand-gray-soft);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--nio-brand-gray);border-color:var(--nio-brand-gray)}
.btn.ghost:hover{background:var(--nio-brand-gray);color:var(--nio-paper)}
.btn.light{background:var(--nio-paper);color:var(--nio-brand-gray);border-color:var(--nio-paper)}
.btn.light:hover{background:var(--nio-white);color:var(--nio-brand-gray);border-color:var(--nio-white)}
.btn.glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(10px)}
.btn.glass:hover{background:rgba(255,255,255,.22)}
.btn svg{width:14px;height:14px}

/* Hide scrollbar on horizontal scrollers */
.ba-scroller::-webkit-scrollbar { display: none; }
.ba-scroller { -ms-overflow-style: none; scrollbar-width: none; }

/* Service tiles: 4-up on desktop, 2-up on tablet, 1-up on mobile */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ===== Mobile-first responsive ===== */
@media (max-width: 1024px) {
  :root { --maxw: 100%; }
  .container { padding: 0 24px; }
  h1 { font-size: clamp(30px, 5vw, 48px) !important; }
  h2 { font-size: clamp(28px, 4.5vw, 44px) !important; }
  section { padding-top: 80px !important; padding-bottom: 80px !important; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  h1 { font-size: 30px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; line-height: 1.15 !important; }
  h3 { font-size: 18px !important; }
  p { font-size: 15px; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Subpage header sections (with "Zurück zur Startseite" link): keep clearance under fixed nav */
  section[style*="padding-top: 180"] { padding-top: 110px !important; }

  /* Kontakt page: phone-name rows — stack tightly so name sits directly under its number */
  div[style*="grid-template-columns: 230px 1fr"] {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }

  /* Referenzen section: paragraph has hardcoded width: 760px — let it shrink on mobile */
  p[style*="width: 760px"] { width: 100% !important; max-width: 100% !important; }
  /* And ensure long words / hyphens in headings wrap */
  h1, h2, h3 { overflow-wrap: anywhere !important; word-break: break-word !important; }

  .btn { padding: 14px 22px !important; font-size: 15px !important; }

  /* Stack ALL multi-column grids on mobile */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Hero overrides */
  section#top {
    min-height: 100vh !important;
  }
  section#top h1 { font-size: 28px !important; }
  section#top > div:nth-child(1) {
    height: 55vh !important;
  }
  section#top > div:nth-child(2) {
    top: 50vh !important;
    background: linear-gradient(180deg,
      rgba(243,236,218,0) 0%,
      rgba(243,236,218,0.95) 18%,
      rgba(243,236,218,1) 30%) !important;
  }
  section#top > div:nth-child(3) {
    padding-top: 52vh !important;
    padding-bottom: 24px !important;
  }
  section#top div[style*="backdrop-filter"] {
    max-width: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Navigation: hide menu, keep logo */
  nav[style*="position: fixed"] {
    padding: 10px 0 !important;
  }
  nav img[alt="NIO LIVING"] {
    height: 44px !important;
  }
  nav a[href="#top"] > div > span:first-child {
    font-size: 16px !important;
  }
  nav a[href="#top"] > div > span:last-child {
    display: none !important;
  }
  /* Subpage nav: hide "NIO LIVING" text next to logo on mobile (link points to index.html) */
  nav a[href="index.html"] > div {
    display: none !important;
  }
  /* Only target the inner header row (first direct div child of nav),
     NOT the fixed mobile-menu overlay (also a direct div child). */
  nav > div:first-child > div:last-child > a {
    display: none !important;
  }
  nav > div:first-child > div:last-child > a:last-child {
    display: inline-flex !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
  /* Make sure the mobile-menu overlay items always show */
  nav > div[style*="position: fixed"] a {
    display: inline-flex !important;
  }

  /* Hero card: full width on mobile */
  .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
  }

  /* Hero background on mobile: use original image, shift focal point so the new
     visible center sits at 25% from the right edge of the source (= 75% from left) */
  .hero-bg {
    background-position: 80% 0% !important;
    background-size: auto 110% !important;
    background-repeat: no-repeat !important;
  }

  /* Footer */
  footer .container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  footer > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }
}

@media (max-width: 380px) {
  .container { padding: 0 14px; }
  h1 { font-size: 26px !important; }
}

/* ===== Print / PDF export ===== */
@page { size: A4 landscape; margin: 0; }
@media print {
  html, body {
    margin: 0 !important; padding: 0 !important;
    background: var(--nio-paper) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  nav[style*="fixed"] { display: none !important; }
  section, footer {
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: always;
    break-after: page;
  }
  footer { page-break-after: auto; break-after: auto; }
  section#top {
    min-height: auto !important;
    height: 190mm !important;
    padding-top: 20mm !important;
  }
  section { padding-top: 20mm !important; padding-bottom: 20mm !important; }
  .container { padding-left: 15mm !important; padding-right: 15mm !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}