/*
Theme Name: bmx4u
Theme URI: https://bmx4u.ch
Author: Benno Gwerder
Description: One-Pager-Theme fuer bmx4u.ch - Koni Hofer, BMX Service. Aufgebaut aus der Design-Vorschau v2 (24.07.2026). Inhalte werden ueber Custom Fields gepflegt.
Version: 0.1.5
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL v2 or later
Text Domain: bmx4u
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --orange: #FF5C00;
      --orange-dark: #cc4900;
      --black: #0a0a0a;
      --dark: #111111;
      --dark2: #1a1a1a;
      --dark3: #222222;
      --grey: #888888;
      --light: #f5f5f5;
      --white: #ffffff;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Barlow', sans-serif;
      background: var(--black);
      color: var(--white);
      overflow-x: hidden;
    }

    /* ─── NAVBAR ─── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5%;
      height: 70px;
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .nav-logo {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.6rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--white);
      text-decoration: none;
    }

    .nav-logo span { color: var(--orange); }

    .nav-links {
      display: flex;
      gap: 2.4rem;
      list-style: none;
    }

    .nav-links a {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.65);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--orange); }

    .nav-cta {
      background: var(--orange);
      color: var(--white) !important;
      padding: 0.5rem 1.2rem;
      border-radius: 3px;
      transition: background 0.2s !important;
    }

    .nav-cta:hover { background: var(--orange-dark) !important; color: var(--white) !important; }

    /* ─── HERO ─── */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(105deg, rgba(10,10,10,0.88) 40%, rgba(10,10,10,0.3) 100%),
        url('assets/images/slider/slide1.jpg') center/cover no-repeat;
    }

    .hero-content {
      position: relative;
      padding: 0 5%;
      max-width: 700px;
    }

    .hero-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 1rem;
    }

    .hero h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(3.5rem, 8vw, 6.5rem);
      font-weight: 900;
      line-height: 0.95;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      margin-bottom: 1.4rem;
    }

    .hero h1 span { color: var(--orange); }

    .hero p {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.6;
      max-width: 480px;
      margin-bottom: 2.4rem;
    }

    .btn-primary {
      display: inline-block;
      background: var(--orange);
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.9rem 2.2rem;
      border-radius: 3px;
      transition: background 0.2s, transform 0.15s;
    }

    .btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); }

    .btn-ghost {
      display: inline-block;
      background: transparent;
      border: 2px solid rgba(255,255,255,0.3);
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.9rem 2.2rem;
      border-radius: 3px;
      margin-left: 1rem;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }

    .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

    .hero-scroll {
      position: absolute;
      bottom: 2rem;
      left: 5%;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
    }

    .hero-scroll::before {
      content: '';
      display: block;
      width: 30px;
      height: 1px;
      background: rgba(255,255,255,0.35);
    }

    /* ─── SECTION BASE ─── */
    section { padding: 6rem 5%; }

    .section-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 0.8rem;
    }

    .section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.0;
      margin-bottom: 1.2rem;
    }

    .section-sub {
      font-size: 1rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.65;
      max-width: 520px;
    }

    /* ─── SERVICES ─── */
    .services { background: var(--dark); }

    .services-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3.5rem;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
    }

    .service-card {
      background: var(--dark2);
      position: relative;
      overflow: hidden;
      transition: background 0.25s;
      cursor: default;
    }

    .service-img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
      filter: grayscale(20%) brightness(0.75);
      transition: filter 0.4s, transform 0.4s;
    }

    .service-card:hover .service-img {
      filter: grayscale(0%) brightness(0.9);
      transform: scale(1.04);
    }

    .service-img-wrap { overflow: hidden; }

    .service-body {
      padding: 2.2rem 2.4rem;
    }

    .service-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 3px;
      background: var(--orange);
      transition: width 0.35s ease;
    }

    .service-card:hover { background: var(--dark3); }
    .service-card:hover::before { width: 100%; }

    .service-number {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 4rem;
      font-weight: 900;
      color: rgba(255,255,255,0.05);
      line-height: 1;
      margin-bottom: 1.2rem;
    }

    .service-icon {
      font-size: 2rem;
      margin-bottom: 1.2rem;
    }

    .service-card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.8rem;
    }

    .service-card p {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.65;
    }

    /* ─── ABOUT ─── */
    .about {
      background: var(--dark2);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      padding: 0;
      min-height: 520px;
    }

    .about-image {
      position: relative;
      overflow: hidden;
      min-height: 420px;
    }

    .about-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .about-img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 420px;
      background: var(--dark3);
      border: 2px dashed rgba(255,255,255,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      color: rgba(255,255,255,0.2);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-align: center;
    }

    .about-img-placeholder span { font-size: 3rem; }

    .about-content {
      padding: 5rem 5%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .about-text {
      font-size: 1rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.75;
      margin-top: 1.2rem;
    }

    /* ─── TOUR ─── */
    .tour {
      background: var(--black);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      padding: 0;
      min-height: 560px;
    }

    .tour-image {
      background:
        linear-gradient(to right, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0) 100%),
        url('assets/images/bmx4u-ontour.jpg') center/cover no-repeat;
      min-height: 480px;
    }

    .tour-content {
      background: var(--dark2);
      padding: 5rem 5%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .race-list {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .race-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .race-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }

    .race-month {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--orange);
      width: 50px;
    }

    .race-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      flex: 1;
      padding: 0 1rem;
    }

    .race-badge {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.2rem 0.55rem;
      border-radius: 2px;
      background: rgba(255,92,0,0.15);
      color: var(--orange);
      border: 1px solid rgba(255,92,0,0.3);
    }

    .tour-cta { margin-top: 2.2rem; }

    /* ─── BRANDS ─── */
    .brands { background: var(--black); text-align: center; }

    .brands-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 700;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
      margin-bottom: 3rem;
      letter-spacing: 0.06em;
    }

    .brands-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0;
    }

    .brand-item {
      padding: 1.4rem 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      cursor: default;
    }

    .brand-item img {
      height: 56px;
      width: auto;
      max-width: 170px;
      object-fit: contain;
      filter: brightness(0) invert(1);
      opacity: 0.5;
      transition: opacity 0.25s, filter 0.25s, transform 0.25s;
    }

    .brand-item:hover img {
      filter: none;
      opacity: 1;
      transform: scale(1.35);
    }

    /* ─── MODAL SHARED ─── */
    @keyframes lightbox-in {
      from { transform: scale(0.85); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }

    .lightbox-close {
      position: absolute;
      top: 1.6rem;
      right: 1.8rem;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      background: transparent;
      color: var(--white);
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }

    .lightbox-close:hover {
      border-color: var(--orange);
      color: var(--orange);
      background: rgba(255,92,0,0.08);
    }

    .brands-note {
      margin-top: 3rem;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.3);
    }

    .brands-note span { color: var(--orange); }

    /* ─── BUILDS / PREISKLASSEN ─── */
    .builds { background: var(--dark); }

    .builds-header {
      text-align: center;
      max-width: 620px;
      margin: 0 auto 3.5rem;
    }

    .builds-header .section-sub {
      margin: 1rem auto 0;
    }

    .builds-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .build-card {
      position: relative;
      background: var(--dark2);
      padding: 2.6rem 2rem 2.2rem;
      border: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-direction: column;
      transition: border-color 0.25s, transform 0.25s, background 0.25s;
    }

    .build-card:hover {
      border-color: rgba(255,92,0,0.4);
      transform: translateY(-4px);
      background: var(--dark3);
    }

    .build-card.featured {
      border-color: rgba(255,92,0,0.55);
      background: linear-gradient(180deg, rgba(255,92,0,0.07) 0%, var(--dark2) 55%);
    }

    .build-card.featured::before {
      content: 'Empfohlen';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--orange);
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 0.32rem 0.9rem;
      border-radius: 2px;
    }

    .build-tier {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 0.8rem;
    }

    .build-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 1.4rem;
      line-height: 1;
    }

    .build-price {
      font-family: 'Barlow Condensed', sans-serif;
      margin-bottom: 1.8rem;
      display: flex;
      align-items: baseline;
      gap: 0.4rem;
    }

    .build-price .currency {
      font-size: 1.05rem;
      font-weight: 700;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.08em;
    }

    .build-price .amount {
      font-size: 3rem;
      font-weight: 900;
      letter-spacing: 0.01em;
      line-height: 1;
    }

    .build-price .from {
      font-size: 0.75rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-left: 0.4rem;
    }

    .build-features {
      list-style: none;
      padding: 0;
      margin: 0 0 2rem 0;
      flex: 1;
    }

    .build-features li {
      font-size: 0.92rem;
      line-height: 1.55;
      color: rgba(255,255,255,0.65);
      padding: 0.7rem 0 0.7rem 1.4rem;
      position: relative;
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .build-features li:first-child { border-top: 0; padding-top: 0.4rem; }
    .build-features li:first-child::before { top: 0.85rem; }

    .build-features li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1.15rem;
      width: 7px;
      height: 7px;
      background: var(--orange);
      border-radius: 50%;
    }

    .build-cta {
      display: inline-block;
      text-align: center;
      background: transparent;
      border: 2px solid rgba(255,255,255,0.2);
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.85rem 1.5rem;
      border-radius: 3px;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
    }

    .build-cta:hover {
      border-color: var(--orange);
      background: var(--orange);
      color: var(--white);
    }

    .build-card.featured .build-cta {
      background: var(--orange);
      border-color: var(--orange);
    }

    .build-card.featured .build-cta:hover {
      background: var(--orange-dark);
      border-color: var(--orange-dark);
    }

    .builds-footer {
      text-align: center;
    }

    .builds-footer .btn-ghost { margin-left: 0; }

    .builds-footer-note {
      margin-top: 1.4rem;
      font-size: 0.85rem;
      color: rgba(255,255,255,0.4);
    }

    /* ─── SIZE MODAL ─── */
    .size-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 5%;
      opacity: 0;
      transition: opacity 0.25s;
    }

    .size-modal.is-open { display: flex; opacity: 1; }

    .size-modal-inner {
      background: var(--dark2);
      border: 1px solid rgba(255,255,255,0.08);
      max-width: 720px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding: 3rem;
      position: relative;
      animation: lightbox-in 0.3s ease;
    }

    .size-modal-inner h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 2rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 0.8rem;
      line-height: 1;
    }

    .size-modal-inner .label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 0.6rem;
    }

    .size-modal-inner .intro {
      color: rgba(255,255,255,0.6);
      line-height: 1.6;
      font-size: 0.95rem;
      margin-bottom: 1.6rem;
    }

    .size-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
    }

    .size-table thead th {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--orange);
      text-align: left;
      padding: 0.75rem 0.85rem;
      border-bottom: 2px solid rgba(255,92,0,0.3);
    }

    .size-table tbody td {
      padding: 0.85rem;
      color: rgba(255,255,255,0.75);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .size-table tbody tr:hover td { background: rgba(255,255,255,0.03); }

    .size-table tbody td:first-child {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--white);
      text-transform: uppercase;
    }

    .size-modal-note {
      margin-top: 1.4rem;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.35);
      font-style: italic;
    }

    /* ─── NEWS / INSTAGRAM EMBED ─── */
    .news { background: var(--black); }

    .news-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
    }

    .ig-embed {
      position: relative;
      background: var(--white);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.45);
      transition: transform 0.25s, box-shadow 0.25s;
    }

    .ig-embed:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.6);
    }

    .ig-embed iframe {
      display: block;
      width: 100%;
      height: 680px;
      border: 0;
      background: var(--white);
    }

    .news-footer {
      margin-top: 2.8rem;
      text-align: center;
    }

    .news-footer a {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.95rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      transition: color 0.2s;
    }

    .news-footer a:hover { color: var(--orange); }
    .news-footer a span { color: var(--orange); }

    /* ─── CONTACT BANNER ─── */
    .contact-banner {
      background:
        linear-gradient(135deg, rgba(10,10,10,0.92) 0%, rgba(255,92,0,0.18) 100%),
        url('assets/images/slider/slide3.jpg') center/cover no-repeat;
      padding: 7rem 5%;
      text-align: center;
    }

    .contact-banner h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(2.8rem, 6vw, 5rem);
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .contact-banner p {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.65);
      margin-bottom: 2.8rem;
    }

    .contact-options {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
    }

    .contact-pill {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 0.8rem 1.6rem;
      border-radius: 3px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-decoration: none;
      color: var(--white);
      transition: border-color 0.2s, background 0.2s;
    }

    .contact-pill:hover { border-color: var(--orange); background: rgba(255,92,0,0.1); }
    .contact-pill-icon { font-size: 1.1rem; }

    /* ─── FOOTER ─── */
    footer {
      background: var(--dark);
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 3rem 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .footer-logo {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.4rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .footer-logo span { color: var(--orange); }

    .footer-links {
      display: flex;
      gap: 1.8rem;
      list-style: none;
    }

    .footer-links a {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-links a:hover { color: var(--white); }

    .footer-copy {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.2);
    }

    /* ─── DIVIDER ─── */
    .divider {
      height: 1px;
      background: rgba(255,255,255,0.06);
      margin: 0;
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .service-grid { grid-template-columns: 1fr; gap: 1px; }
      .about { grid-template-columns: 1fr; }
      .about-image { min-height: 300px; }
      .tour { grid-template-columns: 1fr; }
      .tour-image { min-height: 280px; }
      .builds-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
      .news-grid { grid-template-columns: 1fr; }
      .ig-embed iframe { height: 720px; }
      .footer { flex-direction: column; text-align: center; }
      .footer-links { justify-content: center; }
    }

    @media (max-width: 600px) {
      section { padding: 4rem 5%; }
      .services-header, .news-header { flex-direction: column; align-items: flex-start; }
      .size-modal-inner { padding: 2rem 1.4rem; }
      .size-table { font-size: 0.82rem; }
      .size-table thead th, .size-table tbody td { padding: 0.55rem 0.4rem; }
    }

/* ══════════════════════════════════════════════════════════════════
   THEME-ERGÄNZUNGEN gegenüber der Vorschau v2
   Alles darüber ist unverändert aus Vorschau_Kunde_v2 übernommen.
   Alles ab hier ist beim WordPress-Umbau dazugekommen.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. BURGER-MENÜ (fehlte in der Vorschau komplett) ─── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* Überschreibt bewusst das "display:none" der Vorschau */
  .nav-links {
    display: flex;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0 5%;
    max-height: 0;
    overflow: hidden;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: max-height 0.32s ease, padding 0.32s ease;
  }

  .nav-links.is-open {
    max-height: calc(100vh - 70px);
    padding: 0.5rem 5% 1.6rem;
    overflow-y: auto;
  }

  .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .nav-links li:last-child { border-bottom: 0; margin-top: 1rem; }
  .nav-links a { display: block; padding: 1.05rem 0; font-size: 1.15rem; }
  .nav-links .nav-cta { display: inline-block; padding: 0.7rem 1.6rem; }
}

/* ─── 2. BUILDS: vier Karten statt drei ─── */
/* Wichtig: jede Regel in einer Media Query. Ohne Einschränkung würde sie
   die Handy-Regel weiter oben in der Datei überstimmen (gleiche
   Spezifität, spätere Stelle gewinnt). */

@media (min-width: 1181px) {
  .builds-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .builds-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}

@media (min-width: 901px) {
  .build-card { padding: 2.4rem 1.6rem 2rem; }
}

/* Handy: waagrecht wischbar statt gestapelt.
   Der Streifen reicht bis an beide Bildschirmränder, damit die Karten
   breit sein können und die nächste trotzdem angeschnitten sichtbar
   bleibt — das ist der Hinweis, dass es weitergeht. */
@media (max-width: 900px) {
  .builds-grid {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    gap: 1rem;

    /* aus dem 5%-Innenabstand des Abschnitts ausbrechen … */
    margin-left: -5%;
    margin-right: -5%;
    /* … und ihn innen wieder herstellen, damit die erste Karte bündig steht */
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 14px;      /* Platz für das «Empfohlen»-Fähnchen */
    padding-bottom: 1.2rem;

    overflow-x: auto;
    overscroll-behavior-x: contain;   /* das Wischen bleibt im Abschnitt */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .builds-grid > .build-card {
    flex: 0 0 clamp(260px, 84vw, 380px);
    scroll-snap-align: start;
    padding: 2.4rem 1.6rem 2rem;
  }

  /* Beim Wischen soll sich nichts anheben — das ruckelt sonst */
  .builds-grid > .build-card:hover { transform: none; }
}

/* Preis als freier Text (erlaubt "ab 500", "1'300 – 2'200", "auf Anfrage") */
.build-price-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--white);
  margin: 0.2rem 0 0.4rem;
}

.build-price-text .currency {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 0.15rem;
}

/* Karte "CUSTOM" ohne Preis */
.build-card.is-custom .build-price-text { font-size: 1.55rem; color: var(--orange); }

/* Button, der das Bild-Popup öffnet */
.build-preview {
  /* Die Merkmalsliste darüber hat flex:1 und schiebt alles nach unten —
     der Abstand muss deshalb nach UNTEN, nicht nach oben. */
  margin-top: 0;
  margin-bottom: 1.2rem;
  /* Nur so breit wie der Text: sonst liegt eine unsichtbare Klickfläche
     über die ganze Kartenbreite direkt über dem Anfragen-Button. */
  align-self: center;
  padding: 0.2rem 0.4rem;
  background: none;
  border: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: color 0.2s;
}

.build-preview:hover { color: var(--orange); }
.build-preview::after { content: ' →'; }

/* ─── 3. NEWS: Konis eigene Meldungen + eine Instagram-Einbettung ─── */
.news-grid { grid-template-columns: 1.15fr 1fr; align-items: start; }

.news-list { display: flex; flex-direction: column; gap: 1.2rem; }

.news-card {
  background: var(--dark2);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 1.8rem 1.7rem;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}

.news-card:hover {
  border-color: rgba(255,92,0,0.4);
  transform: translateY(-3px);
  background: var(--dark3);
}

.news-card-date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.5rem;
}

.news-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 0.7rem;
}

.news-card-img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 0.9rem;
}

.news-card p {
  color: rgba(255,255,255,0.6);
  font-size: 0.94rem;
  line-height: 1.65;
  margin: 0;
}

.news-more {
  margin-top: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  cursor: pointer;
}

.news-more::after { content: ' →'; }

.news-empty {
  background: var(--dark2);
  border: 2px dashed rgba(255,255,255,0.1);
  padding: 2.6rem 1.7rem;
  text-align: center;
  color: rgba(255,255,255,0.28);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ─── 4. POPUP, allgemein nutzbar (Bilder + lange News) ─── */
/* Nutzt dieselbe Optik wie das Grössentabellen-Popup der Vorschau. */
.bmx-modal-img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 3px;
  margin-bottom: 1.4rem;
  background: var(--dark3);
}

.bmx-modal-body {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
}

.bmx-modal-body p { margin-bottom: 1rem; }
.bmx-modal-body p:last-child { margin-bottom: 0; }

.bmx-modal-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  background: var(--dark3);
  border: 2px dashed rgba(255,255,255,0.12);
  border-radius: 3px;
  margin-bottom: 1.4rem;
  color: rgba(255,255,255,0.25);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem;
}

/* ─── 5. FOOTER: Pflichtlinks nach nDSG ─── */
.footer-legal {
  margin-top: 0.9rem;
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-legal a {
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal a:hover { color: var(--orange); }

/* ─── 6. Unterseiten (Impressum / Datenschutz) ─── */
.legal-page { padding: 9rem 5% 5rem; max-width: 780px; margin: 0 auto; }

.legal-page h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 1.8rem;
}

.legal-page h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 2.2rem 0 0.8rem;
}

.legal-page p,
.legal-page li { color: rgba(255,255,255,0.65); line-height: 1.75; margin-bottom: 1rem; }
.legal-page ul { padding-left: 1.2rem; }
.legal-page a { color: var(--orange); }

/* Ohne Instagram-Einbettung nutzt die News-Liste die volle Breite */
.news-grid.is-single { grid-template-columns: 1fr; }
.news-grid.is-single .news-list { max-width: 780px; }

/* ─── 7. Hero-Buttons: sauberer Umbruch auf schmalen Bildschirmen ─── */
/* Vorher standen sie als inline-block nebeneinander. Beim Umbruch entstand
   kein vertikaler Abstand, und der feste margin-left des zweiten Buttons
   blieb auch am Zeilenanfang stehen. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.hero-actions .btn-ghost { margin-left: 0; }

@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    text-align: center;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}