/* ============ RESET & SCOPE ============ */
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      overflow-x: hidden; /* verhindert horizontales Scrollen */
    }

    #vrb {
      --bg:#0e0f12; --fg:#f5f7fb; --muted:#9aa3b2; --acc:#E6B35A; --acc2:#54D2D2; --card:#151821; --line:#232735;
      --shadow:0 10px 30px rgba(0,0,0,.35); --radius:14px;
      font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--fg); background:var(--bg);
      width: 100%;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    #vrb * { box-sizing: border-box; }
    #vrb a { color: inherit; text-decoration: none; }
    #vrb img, #vrb video { display:block; max-width:100%; }
    #vrb .container { width:min(1200px, 92vw); margin:0 auto; }
    #vrb .btn { display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:999px; background:var(--acc);
      color:#1a1a1a; font-weight:700; transition:.25s transform, .25s box-shadow; box-shadow:0 8px 20px rgba(230,179,90,.3); }
    #vrb .btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(230,179,90,.45); }
    #vrb .chip {
      padding: .35rem .7rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: .85rem;
      float: right;   /* Chip rechts */
    }

    /* ============ NAV ============ */
:root {
      --fg: #fff;
      --muted: #aaa;
      --acc2: #5bbcff;
      --line: rgba(255,255,255,0.15);
    }

    /* ============ NAV ============ */
    #vrb .nav {
      position:fixed;
      top:0;
      z-index:50;
      width: 100%;              
      margin: 0;
      backdrop-filter:saturate(160%) blur(8px);
      background:linear-gradient(180deg, rgba(14,15,18,.85), rgba(14,15,18,.55));
      border-bottom:1px solid var(--line);
      box-sizing: border-box;
    }
    #vrb .nav .inner { 
      display:flex; 
      align-items:center; 
      justify-content:space-between; 
      padding:.85rem 1rem; 
    }
    #vrb .brand { 
      display:flex; 
      align-items:center; 
      gap:.6rem; 
      font-weight:800; 
      letter-spacing:.4px; 
      color:var(--fg);
    }
    #vrb .brand .dot { 
      width:10px; 
      height:10px; 
      border-radius:50%; 
      background:var(--acc2); 
      box-shadow:0 0 18px var(--acc2); 
    }
    #vrb .links { 
      display:flex; 
      gap:1.2rem; 
    }
    #vrb .links a { 
      padding:.5rem .75rem; 
      border-radius:8px; 
      color:var(--muted); 
      font-weight:600; 
      text-decoration:none;
    }
    #vrb .links a.active, 
    #vrb .links a:hover { 
      color:var(--fg); 
      background:#1b2030; 
    }

    /* ============ Hamburger ============ */
    #vrb .hamburger {
      display: none;
      width: 30px;
      height: 22px;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
    }
    #vrb .hamburger span {
      display:block;
      height: 3px;
      background: var(--fg);
      border-radius: 3px;
      transition: all 0.3s ease;
    }

    /* Animation zum X */
    #vrb .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    #vrb .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    #vrb .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* ============ Responsive ============ */
    @media (max-width: 768px) {
      #vrb .links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background: rgba(14,15,18,.95);
        padding: 1rem;
        border-left: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        width: 200px;
      }
      #vrb .links.active {
        display: flex;
      }
      #vrb .hamburger {
        display: flex;
      }
    }

    /* ============ HERO ============ */
    #vrb .hero {
      width: 100%;
      height: 100vh; /* genau Bildschirmhöhe */
      min-height:560px;
      margin: 0;
      padding: 0;
      position:relative;
      overflow:hidden;
      background:url("/wp-content/uploads/2025/06/Aussenansicht.png") center center / cover no-repeat;
    }
    #vrb .hero::before { content:none; } /* entfernt das alte Background-Duplikat */

    #vrb .hero .overlay { position:absolute; inset:0; background:
      radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.0), rgba(0,0,0,.55) 70%),
      linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.75));
      mix-blend:normal; }
    #vrb .hero .content { position:relative; z-index:2; height:100%; display:grid; place-items:center; text-align:center; padding:0 1rem; }
    #vrb .title { font-size:clamp(2rem, 3.4vw + 1rem, 4rem); line-height:1.05; font-weight:900; letter-spacing:.3px; }
    #vrb .subtitle { margin-top:.8rem; color:var(--muted); font-size:clamp(1rem, .5vw + .9rem, 1.1rem);}
    #vrb .hero-ctas { margin-top:1.2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;}
    #vrb .pill { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:999px; background:#121521aa; border:1px solid var(--line); color:var(--muted); font-weight:600;}

    .badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
    .badge{background:rgba(255,255,255,.9); color:#1b160d; padding:8px 14px; border-radius:999px; font-weight:700; box-shadow:0 10px 20px rgba(0,0,0,.15)}
    .scroll-indicator{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:#f1ebe4}
    .mouse{width:26px; height:40px; border:2px solid #f1ebe4; border-radius:18px; position:relative}
    .wheel{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:#f1ebe4; border-radius:2px; animation:wheel 1.6s infinite}
    @keyframes wheel{0%{opacity:0; transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0; transform:translate(-50%,10px)}}
    
    /* Parallax hint element */
    #vrb .parallax { transform:translateY(var(--pY, 0px)); will-change:transform; transition:transform .1s linear; }

    /* ============ REVEAL ============ */
    #vrb .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
    #vrb .reveal.show { opacity:1; transform:translateY(0); }


    /* ============ FACTS SECTION ============ */
    #facts {
    background: var(--bg);
    padding: 6rem 2rem;
    }

    #facts .facts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 pro Reihe */
    gap: 6rem 3rem;  /* ⬅︎ kleinerer Abstand: vertikal 2rem, horizontal 1rem */
    text-align: center;
    justify-items: center;
    max-width: 900px;   /* ⬅︎ zusätzlich: gesamte Breite begrenzen */
    margin: 0 auto;     /* mittig ausrichten */
    }

    #facts .fact-value {
    font-size: 4rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 0.3rem; /* Zahl näher am Label */
    }

    #facts .fact-label {
    font-size: 1rem;
    color: var(--text-light);
    letter-spacing: .02em;
    }


    #facts .fact-value .unit {
    font-size: 1rem;
    font-weight: 400;
    opacity: .75;
    margin-left: .25rem;
    }

    /* sichtbar wenn im Viewport */
    #facts .fact.visible .fact-value,
    #facts .fact.visible .fact-label {
    opacity: 1;
    transform: translateY(0);
    }



    /* ============ STATS / COUNTERS ============ */
    #vrb .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
    @media (max-width:900px){ #vrb .stats{ grid-template-columns:repeat(2,1fr);} }
    #vrb .stat { padding:1.1rem 1.2rem; text-align:center; }
    #vrb .stat .num { font-size:clamp(1.6rem, 2vw + 1.2rem, 2.6rem); font-weight:900; }
    #vrb .stat .cap { color:var(--muted); margin-top:.3rem; }

    /* ============ FLOATING CTA & MODAL ============ */
    #vrb .fab { position:fixed; right:20px; bottom:20px; z-index:60; }
    #vrb .fab .btn { background:var(--acc2); box-shadow:0 8px 20px rgba(84,210,210,.28); }
    #vrb .modal { position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.6); z-index:80; }
    #vrb .modal.open { display:grid; }
    #vrb .modal .box { width:min(720px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow);}
    #vrb .modal .box h3 { margin:0 0 .4rem; }
    #vrb .modal .box .row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
    @media (max-width:760px){ #vrb .modal .box .row{ grid-template-columns:1fr;} }
    #vrb .modal input, #vrb .modal textarea { width:100%; padding:.8rem; background:#0f131d; color:var(--fg);
      border:1px solid var(--line); border-radius:10px; }
    #vrb .modal .actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.8rem;}

    /* ============ About Text ============ */

    #about {
        padding: 100px 20px;
        text-align: center;
        position: relative;
        font-family: sans-serif;
    }

    .container {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
    }

    .small-title {
        text-transform: uppercase;
        font-size: 14px;
        color: #888;
        margin-bottom: 10px;
        letter-spacing: 2px;
    }

    .main-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .main-title {
        font-size: 48px;
        font-weight: 700;
        margin: 0 20px;
        position: relative;
    }

    .line.vertical {
        width: 2px;
        height: 100px;
        background-color: var(--acc);
    }

    .about-text {
        font-size: 18px;
        line-height: 1.6;
        color: #555;
        max-width: 900px;

    }

    .show-more {
        font-size: 16px;
        background: none;
        border: none;
        border-bottom: 2px solid var(--acc); /* Trennlinie unten */
        padding: 10px 20px;
        cursor: pointer;
        color: var(--acc);
        display: inline-flex;
        align-items: center;
        justify-content: flex-start; /* linksbündig innerhalb des Buttons */
        transition: all 0.3s ease;
    }


    .show-more .arrow {
        display: inline-block;
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .show-more.active .arrow {
        transform: rotate(90deg);
    }

    .show-more:hover {
        opacity: 0.8;
    }

    /* ============ GALLERY + LIGHTBOX ============ */


    #vrb .grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
    #vrb .g1 { grid-column:span 6; } #vrb .g2 { grid-column:span 3; } #vrb .g3 { grid-column:span 3;}
    @media (max-width:900px){ #vrb .g1, #vrb .g2, #vrb .g3 { grid-column:span 12; } }
    #vrb .gal img { border-radius:12px; cursor:pointer; }
    #vrb .lightbox { position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.8); z-index:70; }
    #vrb .lightbox.open { display:grid; }
    #vrb .lightbox img { max-width:90vw; max-height:82vh; border-radius:14px; box-shadow:var(--shadow); }
    #vrb .lightbox .close, #vrb .lightbox .prev, #vrb .lightbox .next {
      position:absolute; top:50%; transform:translateY(-50%); background:#111928cc; border:1px solid var(--line);
      padding:.7rem .9rem; border-radius:12px; cursor:pointer; }
    #vrb .lightbox .close { top:6%; right:4%; transform:none; }
    #vrb .lightbox .prev { left:3%; } #vrb .lightbox .next{ right:3%; }

    #location {
        padding: 80px 20px;
        font-family: sans-serif;
    }

    .section-title {
        font-size: 36px;
        font-weight: 700;
        text-align: left;
        margin-bottom: 40px;
    }

    .split {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 24px;
        align-items: start;
    }

    .location-text .lead {
        font-size: 18px;
        line-height: 1.6;
        color: #555;
        margin-bottom: 20px;
    }

    .distance-list {
        display: grid;
        gap: 12px;
    }

    .badge {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 14px;
        background: #fff;
        font-weight: 700;
        box-shadow: 0 10px 20px rgba(0,0,0,.15);
        transition: transform 0.3s ease;
    }

    .badge:hover {
        transform: translateY(-3px);
    }

    .pin {
        color: var(--acc); /* Akzentfarbe */
        font-size: 18px;
        flex-shrink: 0;
    }

    .map-embed {
        border: 0;
        width: 100%;
        height: 420px;
        border-radius: 18px;
        box-shadow: var(--shadow);
    }

    @media (max-width: 900px) {
        .split {
        grid-template-columns: 1fr;
        }
        .distance-list {
        gap: 10px;
        }
    }

    .lightbox .caption {
      margin-top: 12px;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }

    .lightbox .thumbnails {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 10px;
      padding: 10px;
      overflow-x: auto;
      max-width: 90vw;
    }

    .lightbox .thumbnails img {
      width: 100px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
      cursor: pointer;
      opacity: 0.6;
      transition: transform 0.2s, opacity 0.2s;
    }

    .lightbox .thumbnails img.active {
      opacity: 1;
      transform: scale(1.1);
      border: 2px solid var(--acc, #fff);
    }


    /* ============ TESTIMONIALS CAROUSEL ============ */
    #vrb .t-wrap { 
    position: relative; 
    overflow: hidden; 
    }

    #vrb .t-track { 
    display: flex; 
    transition: transform .5s ease; 
    }

   #vrb .t-card { 
    min-width: 100%; /* nur eine Karte pro Ansicht */
    padding: 1.1rem 1.2rem; 
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertikal zentrieren */
    align-items: center;     /* horizontal zentrieren */
    text-align: center;      /* Text zentrieren */
    }


    #vrb .t-card .msg { 
    color: #e6e9f3; 
    font-size: 1.05rem; 
    line-height: 1.55;
    margin-bottom: 1rem;
    }

    #vrb .t-card .muted {
    color: #aaa;
    font-size: 0.9rem;
    }


    #vrb .t-nav { 
    display: flex; 
    gap: .6rem; 
    justify-content: center; /* Buttons mittig unter der Karte */
    margin-top: .6rem;
    }

    #vrb .t-btn { 
    background: var(--acc); 
    border: 1px solid var(--line); 
    padding: .5rem .7rem; 
    border-radius: 10px; 
    cursor: pointer;
    }

    /* ========== Floating Social Sidebar CSS ========== */
    .social-floating {
      position: fixed;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 16px;
      z-index: 1000;
    }

    .social-floating .social-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 55px;       /* größer */
      height: 55px;      /* größer */
      border-radius: 50%;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .social-floating .social-icon svg {
      width: 35px;   /* größere Icons */
      height: 35px;
      fill: #000;    /* schwarz */
    }

    .social-floating .social-icon:hover {
      transform: scale(1.1);
      opacity: 0.9;
    }

    /* Plattform-spezifische Hintergrundfarben */
    .social-floating .social-icon.fb { background: #1877f2; }   /* Facebook Blau */
    .social-floating .social-icon.wa { background: #25d366; }   /* WhatsApp Grün */
    .social-floating .social-icon.ig { background: #d6249f; }   /* Instagram Violett */

    #vrb .section-head {
      display: flex;
      justify-content: space-between; /* Titel links, Chip rechts */
      align-items: center;            /* vertikal zentriert */
      margin-bottom: 40px;            /* Abstand zum darunterliegenden Inhalt */
      flex-wrap: wrap;                /* Zeilenumbruch, wenn nötig */
    }

    #vrb .section-head h3 {
      margin: 0;
      flex: 1 1 auto;                 /* Überschrift kann wachsen */
    }

    #vrb .section-head .chip {
      flex: 0 0 auto;                 /* Chip bleibt minimalgröße rechts */
      margin-left: 10px;              /* kleiner Abstand zur Überschrift */
    }

    #vrb .chip {
      padding: .35rem .7rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: .85rem;
      cursor: pointer;
    }

    #floorplan {
      margin-bottom: 80px;
    }



    #floorplan .intro {
      max-width: 700px;
      margin: 0 auto 30px;
      font-size: 1.1rem;
      color: var(--muted);
      line-height: 1.6;
      text-align: center;
    }

    section {
      padding: 5rem 0;   /* viel Luft oben & unten */
    }

    @media (max-width: 768px) {
      section {
        padding: 3rem 0; /* auf Handy etwas kompakter */
      }
    }

    h3 {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 2.5rem;
      text-align: center !important;  /* erzwingt Mittig */
      letter-spacing: 0.04em;
      color: #fff;
      position: relative;
    }

    h3::after {
      content: "";
      display: block;
      width: 60px;
      height: 3px;
      background: var(--acc);  /* Akzentfarbe deiner Seite */
      margin: 1rem auto 0;     /* mittig unter der Überschrift */
      border-radius: 2px;
    }


    /*==================Contact Section==================== */
    .contact-card {
      text-align: center;
      padding: 2rem;
    }
    .contact-icons {
      display: flex;
      justify-content: center;
      gap: 2rem; /* Abstand zwischen Icons */
      margin-top: 1rem;
    }


    /* Kontakt-Icons rund hinterlegen */
    .contact-icons .social-icon {
      display: inline-flex;           /* damit das SVG zentriert wird */
      align-items: center;
      justify-content: center;
      width: 80px;                    /* Größe des Kreises */
      height: 60px;
      border-radius: 50%;             /* rund */
      background: #333;               /* Standard-Hintergrund, kann überschrieben werden */
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .contact-icons .social-icon svg {
      width: 40px;
      height: 40px;
      fill: #000000ff;                     /* Icon-Farbe */
      transition: transform 0.3s ease, fill 0.3s ease;
    }

    .contact-icons .social-icon:hover {
      transform: scale(1.2);
    }

    /* Plattform-spezifische Farben */
    .contact-icons .social-icon.fb { background: #1877f2; }
    .contact-icons .social-icon.wa { background: #25d366; }
    .contact-icons .social-icon.ig { background: #d6249f; }


    /* Nur für die Contact-Sektion */
    #contact .section-head {
      display: flex;
      flex-direction: column;  /* alles untereinander */
      align-items: center; /* linksbündig */
      margin-bottom: 40px;     /* Abstand zum Inhalt darunter */
      gap: 10px;               /* Abstand zwischen H3 und Subtitel */
    }

    #contact .section-head h3 {
      margin: 0;
      flex: 1 1 auto;                 /* Überschrift kann wachsen */
      font-weight: bold;
    }

    #contact .section-head p {
      margin: 0;
      font-size: 1.7rem;       /* Subtitel etwas kleiner, aber im gleichen Stil */
      opacity: 0.8;            /* leicht abgesetzt */
      font-weight: bold;
    }

    /* page-wrapper nimmt die gesamte Höhe ein */
    html, body {
        height: 100%;
        margin: 0;
    }

    .page-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* mind. Fensterhöhe */
    }

    /* Hauptinhalt füllt den Rest */
    .content {
        flex: 1;
    }


    /* Footer */
    #footer {
      background: #111;
      color: #eee;
      padding: 3rem 2rem;
      border-top: 2px solid var(--acc);
      font-family: 'Arial', sans-serif;
    }

    #footer a {
      color: var(--acc);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    #footer a:hover {
      color: #fff;
    }

    .footer-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-section h4 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
    }

    .footer-section p {
      margin: 0.3rem 0;
      line-height: 1.4;
    }

    .footer-socials {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }

    .footer-socials .social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #333;
      color: #fff;
      font-weight: bold;
      font-size: 1.2rem;
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .footer-socials .social-icon.fb { background: #1877f2; }
    .footer-socials .social-icon.ig { background: #d6249f; }
    .footer-socials .social-icon.wa { background: #25d366; }

    .footer-socials .social-icon:hover {
      transform: scale(1.2);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }

    /* Body und html auf volle Höhe */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Wrapper für die gesamte Seite */
.page-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Inhalt wächst und nimmt restlichen Platz ein */
.content {
    flex: 1;
}

/* Footer bleibt unten */
footer {
    background-color: #222; /* Beispielfarbe */
    color: #fff;
    padding: 20px;
    text-align: left;
}