@import url('cart.css');

/* =========================================================
   ROOT / THEME TOKENS
   ========================================================= */
:root{
    /* Colors */
    --paper:#F3F1EC;
    --paper2:#EFECE4;
    --ink:#0F1115;
    --muted:rgba(15,17,21,.70);
    --dark:#07080A;
    --gold:#C9A063;

    /* Typography */
    --serif:"Playfair Display", ui-serif, Georgia, serif;
    --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

    /* Layout */
    --navH:72px;
    --radius:22px;

    /* Elevation */
    --shadow: 0 26px 80px rgba(0,0,0,.10);
    --shadow2: 0 14px 36px rgba(0,0,0,.10);

    /* Hero */
    --heroVh: 100svh; /* Steuerung der Hero-Höhe (Default = fullscreen) */

    /* Menu */
    --muted2: rgba(0,0,0,.48);
    --rule: rgba(0,0,0,.12);
    --page: #fbfbfc;
}

/* =========================================================
   BASE / GLOBAL
   ========================================================= */
html,body{height:100%}
html{scroll-behavior:smooth}

body{
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    padding-top:var(--navH);
    font-size:18px;
    line-height:1.85;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

h1,h2,h3,h4{font-family:var(--serif)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* =========================================================
   TYPO UTILITIES
   ========================================================= */
.eyebrow{
    font-size: clamp(1.05rem, 3.8vw, 2.35rem);
    letter-spacing: clamp(.14em, .9vw, .28em);
    text-transform:uppercase;
    font-weight:750;
    color: rgba(255,255,255,.78);
    line-height: 1.15;
    text-wrap: balance;
}
.kicker{
    font-size:.74rem;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:750;
}
.lede{
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.2vw, 1.28rem);
    line-height: 1.65;
    color: rgba(15,17,21,.78);
}
.caps{
    font-size:.78rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    font-weight:800;
    color: rgba(15,17,21,.65);
}
.dropcap{
    font-family: var(--serif);
    float:left;
    font-weight:800;
    font-size: 3.25rem;
    line-height: .9;
    padding: .25rem .6rem 0 0;
    color: rgba(15,17,21,.90);
}

/* Sections */
.section{padding: clamp(3.2rem, 6vw, 6.8rem) 0;}
.section-tight{padding: clamp(2.2rem, 5vw, 4.8rem) 0;}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
    height:var(--navH);
    background:rgba(65,65,63,.78);
    border-bottom:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
}
.navbar .container{height:100%}

.navbar-brand{
    display:flex;
    align-items:center;
    height:var(--navH);
}
.navbar-brand img.logo{
    height: 120px;
    width:auto;
    display:block;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.25));
}

/* Toggler */
.navbar-toggler{
    width:46px;
    height:46px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.16);
    backdrop-filter: blur(10px);
    padding:0;
    display:grid;
    place-items:center;
}
.navbar-toggler:focus{box-shadow:none}

.navbar-toggler-icon{
    width:22px;
    height:22px;
    background-image: none;
    position:relative;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span{
    content:"";
    position:absolute;
    left:0; right:0;
    height:2px;
    border-radius:2px;
    background: rgba(255,255,255,.88);
    margin:auto;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.navbar-toggler-icon::before{top:4px;}
.navbar-toggler-icon span{top:10px;}
.navbar-toggler-icon::after{top:16px;}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before{top:10px; transform: rotate(45deg);}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon span{opacity:0;}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after{top:10px; transform: rotate(-45deg);}

/* Desktop Links */
.nav-link{
    font-size:.76rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(252,195,0,.78)!important;
    padding:.72rem .85rem!important;
    border-radius:999px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
    will-change: transform;
}
.nav-link:hover,
.nav-link.active{
    background:rgba(255,255,255,.08);
    text-decoration:none;
    color:rgba(255,255,255,.92)!important;
    transform: translateY(-1px);
}

/* Buttons */
.btn-pill{
    border-radius:999px;
    padding:.62rem 1.1rem;
    font-size:.92rem;
    font-weight:650;
    letter-spacing:.01em;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-dark.btn-pill{
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
}
.btn-pill:hover{
    transform: translateY(-2px);
    filter: brightness(1.02);
}

/* Mobile Navbar Sheet */
@media (max-width: 991.98px){
    .navbar-collapse{
        position:absolute;
        top: calc(var(--navH) + 10px);
        left: 12px;
        right: 12px;

        background: rgba(31,34,40,.92);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 18px;
        box-shadow: 0 26px 80px rgba(0,0,0,.35);
        backdrop-filter: blur(16px);

        padding: 10px;
        transform-origin: top;
    }

    .navbar-nav{ padding: 8px 6px 6px; }

    .navbar-nav .nav-link{
        width:100%;
        padding: .9rem 1rem !important;
        border-radius: 14px;
        letter-spacing:.20em;
        font-weight: 750;
        color: rgba(252,195,0,.88)!important;
    }
    .navbar-nav .nav-link:hover{
        transform:none;
        background: rgba(255,255,255,.10);
    }

    .navbar .btn-pill{
        width:100%;
        margin: 8px 6px 6px;
        padding: .85rem 1rem;
        border-radius: 14px;
    }

    /* (wird unten durch Overrides ersetzt) */
    .navbar-brand img.logo{height: 36px;}
}

/* =========================================================
   HERO (VIDEO) + EFFECTS
   ========================================================= */
.hero{
    height: calc(100vh - var(--navH));
    height: calc(var(--heroVh) - var(--navH));
    min-height: 620px;

    position:relative;
    overflow:hidden;
    background: #0b0c0e;
    isolation:isolate;
}
.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform: scale(1.03);
    z-index:0;
    filter: saturate(1.08) contrast(1.07) brightness(.95);
}

/* Grain */
.hero::before{
    content:"";
    position:absolute; inset:-60px;
    z-index:1;
    background-image:
            radial-gradient(circle at 20% 10%, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
            radial-gradient(circle at 80% 30%, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
            radial-gradient(circle at 40% 70%, rgba(255,255,255,.04) 0 1px, transparent 1px 3px);
    background-size: 110px 110px, 140px 140px, 160px 160px;
    opacity:.14;
    mix-blend-mode: overlay;
    animation: grainShift 10s steps(2,end) infinite;
    pointer-events:none;
    transform: translateZ(0);
}
@keyframes grainShift{
    0%{transform: translate3d(0,0,0)}
    25%{transform: translate3d(-1%,1%,0)}
    50%{transform: translate3d(1%,-1%,0)}
    75%{transform: translate3d(-1%,-1%,0)}
    100%{transform: translate3d(0,0,0)}
}

/* Overlay */
.hero::after{
    content:"";
    position:absolute; inset:0;
    background:
            radial-gradient(1200px 700px at 50% 30%, rgba(0,0,0,.08), rgba(0,0,0,.65)),
            linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.78));
    z-index:2;
    pointer-events:none;
}

/* Sweep */
.hero-sweep{
    position:absolute;
    inset:-30% -20%;
    z-index:2;
    pointer-events:none;
    background: linear-gradient(110deg,
    transparent 40%,
    rgba(201,160,99,.10) 50%,
    transparent 60%);
    transform: translateX(-35%) rotate(6deg);
    opacity:.55;
    animation: sweep 8s ease-in-out infinite;
    mix-blend-mode: screen;
}
@keyframes sweep{
    0%{transform: translateX(-35%) rotate(6deg)}
    50%{transform: translateX(35%) rotate(6deg)}
    100%{transform: translateX(-35%) rotate(6deg)}
}

.hero-ornament{
    position:absolute;
    inset:auto 0 0 0;
    height: 240px;
    z-index:3;
    pointer-events:none;
    background:
            radial-gradient(700px 180px at 50% 0%, rgba(201,160,99,.26), transparent 60%),
            linear-gradient(180deg, transparent, rgba(0,0,0,.45));
    opacity:.95;
}
.hero-ornament::before{
    content:"";
    position:absolute;
    left:50%;
    top: 34px;
    transform:translateX(-50%);
    width:min(860px, 92vw);
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(201,160,99,.70), transparent);
    box-shadow: 0 0 22px rgba(201,160,99,.22);
}
.hero-ornament svg{
    position:absolute;
    left:50%;
    top: 20px;
    transform:translateX(-50%);
    opacity:.78;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.35));
}

.hero-center{
    position:relative;
    z-index:4;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    padding: 0 1rem;
}
.hero-center .hero-stack{
    max-width: min(34rem, 92vw);
    margin: 0 auto;
    animation: heroIn .9s ease-out both;
}

.hero-title{
    font-family:var(--serif);
    font-weight:800;
    letter-spacing:.22px;
    font-size: clamp(2.2rem, 7.2vw, 4.25rem);
    line-height:1.06;
    text-transform:uppercase;
    margin:.55rem 0 0;
    position:relative;
    display:inline-block;
    text-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.hero-title .gold{
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(201,160,99,.95));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 28px rgba(201,160,99,.10));
}
.hero-sub{
    /*margin-top:.9rem;*/
    font-size: clamp(.78rem, 2.2vw, .95rem);
    letter-spacing:.18em;
    text-transform:uppercase;
    color: rgba(255,255,255,.82);
}
@keyframes heroIn{
    0%{opacity:0; transform: translateY(10px)}
    100%{opacity:1; transform: translateY(0)}
}

/* =========================================================
   SCROLL INDICATOR
   ========================================================= */
.scroll-indicator{
    position:absolute;
    left:50%;
    bottom:22px;
    transform: translateX(-50%);
    z-index:5;
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.34);
    display:grid;
    place-items:center;
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
    transition: background .18s ease, transform .18s ease;
}
.scroll-indicator svg{
    display:block;
    animation: scrollArrowHop 1.25s ease-in-out infinite !important;
    will-change: transform, opacity;
}
@keyframes scrollArrowHop{
    0%   { transform: translateY(0);     opacity:.85; }
    10%  { transform: translateY(10px);  opacity:1;   }
    20%  { transform: translateY(0);     opacity:.95; }
    30%  { transform: translateY(10px);  opacity:1;   }
    40%  { transform: translateY(0);     opacity:.9;  }
    100% { transform: translateY(0);     opacity:.85; }
}
.scroll-indicator::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.26);
    opacity:0;
    transform: scale(.92);
    animation: scrollPing 1.25s ease-out infinite !important;
    pointer-events:none;
}
@keyframes scrollPing{
    0%   { opacity:0;   transform: scale(.92); }
    18%  { opacity:.60; transform: scale(1.05); }
    45%  { opacity:0;   transform: scale(1.20); }
    100% { opacity:0;   transform: scale(1.20); }
}
.scroll-indicator:hover{
    transform: translateX(-50%) translateY(-2px);
    background: rgba(0,0,0,.30);
    text-decoration:none;
}
.scroll-indicator:hover svg,
.scroll-indicator:hover::after{
    animation-play-state: paused;
}

/* =========================================================
   PANELS / CARDS / MEDIA
   ========================================================= */
.panel{
    background: var(--paper2);
    border-top:1px solid rgba(15,17,21,.08);
    border-bottom:1px solid rgba(15,17,21,.08);
}

/* Editorial Card */
.card-editorial{
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(15,17,21,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(2.0rem, 3vw, 3.25rem);
    height:100%;
    position:relative;
    overflow:hidden;
    transition: transform .22s ease, box-shadow .22s ease;
    will-change: transform;
}
.card-editorial::before{
    content:"";
    position:absolute; inset:0;
    border-radius: var(--radius);
    box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
    pointer-events:none;
}
.card-editorial::after{
    content:"";
    position:absolute;
    right:-140px;
    top:-140px;
    width:320px;
    height:320px;
    border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(201,160,99,.18), transparent 62%);
    pointer-events:none;
}
.card-editorial:hover{
    transform: translateY(-4px);
    box-shadow: 0 34px 90px rgba(0,0,0,.12);
}
.card-editorial h2{
    font-size: clamp(1.9rem, 2.5vw, 2.55rem);
    margin: .45rem 0 1.0rem;
    line-height:1.18;
    position:relative;
    z-index:1;
}
.card-editorial p{
    margin:0;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.95;
    position:relative;
    z-index:1;
}

/* Media Box */
.media-box{
    border-radius: var(--radius);
    overflow:hidden;
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow);
    background:
            radial-gradient(900px 520px at 20% 25%, rgba(255,255,255,.10), transparent 55%),
            linear-gradient(135deg, #141518, #0B0C0E);
    height: 100%;
    min-height: 360px;
    position:relative;
}
.media-box img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.02);
    transition: transform .45s ease;
}
.media-box:hover img{transform: scale(1.06);}

/* =========================================================
   TITLE STRIP
   ========================================================= */
.title-strip{
    background: #060708;
    color:#fff;
    text-align:center;
    padding: clamp(4.0rem, 7vw, 6.2rem) 0;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.title-strip::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(900px 380px at 50% 35%, rgba(255,255,255,.05), transparent 65%),
            linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%);
    z-index:0;
}
.title-strip::after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform: translateX(-50%);
    width:min(980px, 94vw);
    height:100%;
    background: radial-gradient(closest-side at 50% 30%, rgba(201,160,99,.10), transparent 70%);
    z-index:1;
    opacity:.65;
    pointer-events:none;
}
.title-strip .script{
    font-family: var(--serif);
    font-style: italic;
    opacity:.9;
    font-size: 1.06rem;
    margin-bottom:.55rem;
    color: rgba(255,255,255,.72);
    position:relative;
    z-index:2;
}
.title-strip h2{
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing:.16em;
    font-weight:850;
    font-size: clamp(2.0rem, 5.2vw, 3.6rem);
    margin:0;
    position:relative;
    z-index:2;
    text-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.title-orn{
    margin: 1.05rem auto 0;
    width:min(760px, 92vw);
    height:28px;
    position:relative;
    z-index:2;
    opacity:.95;
}
.title-orn::before,
.title-orn::after{
    content:"";
    position:absolute;
    top:50%;
    width:42%;
    height:1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(201,160,99,.70));
}
.title-orn::before{left:0;}
.title-orn::after{
    right:0;
    background: linear-gradient(90deg, rgba(201,160,99,.70), transparent);
}
.orn-svg{
    display:block;
    margin:0 auto;
    animation: ornPulse 3.6s ease-in-out infinite;
    filter: drop-shadow(0 10px 28px rgba(201,160,99,.08));
}
@keyframes ornPulse{
    0%,100%{opacity:.82; transform: translateY(0)}
    50%{opacity:1; transform: translateY(-1px)}
}

/* =========================================================
   TILE GRID
   ========================================================= */
.tilegrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.tile{
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid rgba(15,17,21,.10);
    background:#fff;
    box-shadow: var(--shadow2);
    min-height: 175px;
    transform: translateZ(0);
}
.tile img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.03);
    transition: transform .45s ease, filter .45s ease;
}
.tile:hover img{
    transform: scale(1.08);
    filter: contrast(1.02) saturate(1.05);
}
.tile.big{grid-column: span 2; min-height: 230px;}

/* =========================================================
   FEATURE PANEL
   ========================================================= */
.feature-panel{
    background: var(--paper2);
    border-top:1px solid rgba(15,17,21,.08);
    border-bottom:1px solid rgba(15,17,21,.08);
}
.feature-grid-3{
    display:grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 18px;
    align-items: stretch;
}
.feature-img{
    overflow:hidden;
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow2);
    background:#fff;
    min-height: 420px;
}
.feature-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.03);
    transition: transform .5s ease;
}
.feature-img:hover img{transform: scale(1.08);}

.feature-copy{
    background: rgba(255,255,255,.66);
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow);
    padding: clamp(2.0rem, 3vw, 3.2rem);
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    min-height: 420px;
    position:relative;
    overflow:hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}
.feature-copy:hover{
    transform: translateY(-4px);
    box-shadow: 0 34px 90px rgba(0,0,0,.12);
}
.feature-copy::before{
    content:"";
    position:absolute; inset:0;
    box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
    pointer-events:none;
}
.feature-copy::after{
    content:"";
    position:absolute;
    left:-160px;
    bottom:-160px;
    width:360px;
    height:360px;
    border-radius:999px;
    background: radial-gradient(circle at 70% 30%, rgba(201,160,99,.18), transparent 62%);
    pointer-events:none;
}
.feature-overline{
    font-size:.78rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color: rgba(15,17,21,.68);
    font-weight:800;
    margin-bottom: 1.1rem;
    position:relative;
    z-index:1;
}
.feature-title{
    font-family: var(--sans);
    font-weight: 850;
    letter-spacing: .10em;
    text-transform: uppercase;
    line-height: 1.05;
    font-size: clamp(2.05rem, 3.4vw, 3.25rem);
    margin: 0 0 1.25rem;
    color: rgba(20,22,28,.92);
    position:relative;
    z-index:1;
}
.feature-text{
    color: rgba(15,17,21,.68);
    font-size: 1.06rem;
    line-height: 1.95;
    max-width: 36rem;
    margin: 0 auto 1.7rem;
    position:relative;
    z-index:1;
}
.feature-link{
    display:inline-block;
    font-size:.86rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:850;
    color: var(--gold);
    text-decoration:none;
    border-bottom: 2px solid rgba(201,160,99,.55);
    padding-bottom: .35rem;
    transition: border-color .15s ease, transform .15s ease;
    position:relative;
    z-index:1;
}
.feature-link:hover{
    text-decoration:none;
    border-bottom-color: rgba(201,160,99,1);
    transform: translateY(-1px);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer-dark{background:#1F2228;color:rgba(255,255,255,.82);}
.footer-top{padding:3.2rem 0 2.4rem;}
.footer-title{
    font-family:var(--serif);
    font-weight:800;
    font-size:1.7rem;
    margin-bottom:.7rem;
    color:rgba(255,255,255,.92);
}
.footer-head{font-weight:750;letter-spacing:.02em;margin-bottom:.9rem;color:rgba(255,255,255,.92);}
.footer-text{color:rgba(255,255,255,.62);margin:0;max-width:28rem;line-height:1.8;font-size:1rem;}
.footer-list{list-style:none;padding:0;margin:0;}
.footer-list li{margin:.42rem 0;}
.footer-list a{color:rgba(255,255,255,.70);text-decoration:none;transition:color .15s ease, transform .15s ease;}
.footer-list a:hover{color:rgba(255,255,255,.95);text-decoration:none;transform: translateX(2px);}

.footer-contact .footer-phone{font-size:1.25rem;font-weight:800;color:rgba(255,255,255,.95);margin-bottom:.2rem;}
.footer-muted{color:rgba(255,255,255,.60);font-size:.98rem;}

.footer-linkbtn{
    display:inline-flex;align-items:center;gap:.5rem;
    margin-right:.7rem;margin-top:.4rem;
    color:var(--gold);text-decoration:none;
    font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    font-size:.78rem;border-bottom:2px solid rgba(201,160,99,.45);
    padding-bottom:.25rem;
    transition: transform .15s ease, border-color .15s ease;
}
.footer-linkbtn:hover{border-bottom-color:rgba(201,160,99,1);text-decoration:none;transform: translateY(-1px);}

.footer-line{border-top:1px solid rgba(255,255,255,.08);}
.footer-stats{padding:2.5rem 0 2.4rem;}
.stat-number{font-family:var(--sans);font-weight:850;font-size:clamp(2.0rem,3vw,2.6rem);color:rgba(255,255,255,.96);margin-bottom:.35rem;}
.stat-label{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);}

.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.25rem 0 1.6rem;background:rgba(0,0,0,.10);}
.footer-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;}
.footer-country{color:rgba(255,255,255,.65);font-size:.95rem;display:flex;align-items:center;gap:.55rem;}
.footer-country .dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.55);display:inline-block;}

.footer-legal{color:rgba(255,255,255,.55);font-size:.95rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.footer-legal a{color:rgba(255,255,255,.65);text-decoration:none;}
.footer-legal a:hover{color:#fff;text-decoration:none;}

.footer-social{display:flex;gap:.55rem;}
.footer-social a{
    width:34px;height:34px;border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    display:grid;place-items:center;
    color:rgba(255,255,255,.78);
    text-decoration:none;background:rgba(0,0,0,.18);
    transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover{color:#fff;border-color:rgba(255,255,255,.32);text-decoration:none;transform: translateY(-1px);}
.footer-copy{margin-top:1rem;color:rgba(255,255,255,.45);font-size:.9rem;text-align:center;}

.fa-fw{width:1.25em;text-align:center;}

.footer-head {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-list li {
    margin-bottom: .6rem;
}

.footer-list a {
    color: #fff;
    text-decoration: none;
}

.footer-list a:hover {
    text-decoration: underline;
}

.footer-accordion .accordion-item {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
}

.footer-accordion .accordion-button {
    background: #f3f3f3;
    color: #111;
    font-weight: 600;
    box-shadow: none;
}

.footer-accordion .accordion-button:not(.collapsed) {
    background: #f3f3f3;
    color: #111;
    box-shadow: none;
}

.footer-accordion .accordion-body {
    background: #fff;
    padding: 1rem;
}

.footer-accordion .footer-list a {
    color: #111;
}

@media (max-width: 991.98px) {
    .footer-title {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .footer-title img {
        max-width: 220px;
    }

    .footer-head {
        margin-bottom: .75rem;
    }
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
    opacity:0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
    opacity:1;
    transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
    body{font-size:17px;}
    .hero{min-height:560px;}
    .media-box{min-height:300px;}
    .tilegrid{grid-template-columns:1fr;}
    .tile.big{grid-column:auto;}
    .feature-grid-3{grid-template-columns:1fr;}
    .feature-img{min-height:320px;}
    .feature-copy{min-height:unset;}
    .footer-top{padding:2.4rem 0 1.9rem;}
    .footer-stats{padding:2.0rem 0 2.0rem;}
}

@media (max-width: 576px){
    .scroll-indicator{width:40px;height:40px;bottom:16px;}
}

@media (max-width: 420px){
    .nav-link{letter-spacing:.14em;}
    .hero-sub{letter-spacing:.14em;}
    .hero-title{letter-spacing:.12px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .hero::before, .hero-sweep, .orn-svg, .hero-center .hero-stack{animation:none!important;}
    .reveal{opacity:1;transform:none;transition:none;}
    .btn-pill, .card-editorial, .feature-copy, .tile img, .feature-img img, .nav-link{transition:none;}

    /* Scroll-Indicator NICHT deaktivieren */
}

/* =========================================================
   OVERRIDES (MUSS GANZ AM ENDE STEHEN)
   ========================================================= */
@media (max-width: 991.98px){
    :root{ --navH: 92px; }

    nav.navbar{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    nav.navbar .navbar-brand{
        padding: 0 !important;
        margin-right: .75rem !important;
        height: var(--navH) !important;
        display:flex !important;
        align-items:center !important;
    }

    nav.navbar .navbar-brand img.logo{
        height: 140px !important;
        width: auto !important;
        max-height: none !important;
        display:block !important;
        object-fit: contain !important;

        transform: scale(1.12);
        transform-origin: left center;
    }
}

@media (max-width: 576px){
    :root{ --heroVh: 78svh; }

    header.hero{ min-height: 440px !important; }

    .scroll-indicator{
        width:40px;
        height:40px;
        bottom:16px;
    }
}

@media (max-width: 420px){
    :root{
        --navH: 86px;
        --heroVh: 74svh;
    }

    nav.navbar .navbar-brand img.logo{
        height: 64px !important;
        transform: scale(1.10);
    }

    header.hero{ min-height: 420px !important; }
}

/*
##############################
#
#   Speisekarte
#
#############################
*/

/* =========================================================
   MENU PAGE
   ========================================================= */
.menu-page{  padding:1.25rem 0 3.25rem; }
.menu-shell{ max-width:980px; margin:0 auto; }

/* Hero Section */
#menu-page .heroMenu {
    height: clamp(120px, 92vh, 400px);
    background-color: #0b0c0e; /* Fallback */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    isolation: isolate;
}

/* Background Image + Overlay */
#menu-page .heroMenu::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.78)),
            url("../img/menuHero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.05) contrast(1.05) brightness(0.9);
    transform: scale(1.02);
    z-index: 0;
}

/* Inner Content */
#menu-page .hero-inner {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    width: 100%;
}

/* Title */
#menu-page .hero-title {
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    margin: 0.25rem 0 0.35rem;
    text-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

/* Gold Gradient Text */
#menu-page .hero-title .gold {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(201,160,99,0.95)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Subtitle */
#menu-page .hero-sub {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    margin: 0 auto;
    max-width: 62rem;
}


/* CTA */
.menu-head{ margin-bottom:.9rem; }
.menu-head .hint{ color:var(--muted); font-size:.98rem; line-height:1.35; text-align:center; }
.menu-actions{ display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:.75rem; }
.btn-pill{ border-radius:999px; padding-left:1.05rem; padding-right:1.05rem; }
.btn-quiet{ border:1px solid rgba(0,0,0,.22); background:transparent; color:rgba(0,0,0,.82); }
.btn-quiet:hover{ background:rgba(0,0,0,.03); }

/* Stickybar */
.menu-stickybar{
    position: sticky;
    top: 72px; /* fixed header height anpassen */
    z-index: 1020;
    margin: 0 0 1rem;
}
.menu-stickybar-inner{
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.menu-stickybar-inner.is-stuck{
    /*background: rgba(251,251,252,.92);*/
    /*border-bottom-color: rgba(0,0,0,.10);*/
    /*box-shadow: 0 10px 20px rgba(0,0,0,.05);*/
}
.menu-stickybar-pad{ padding: .7rem 0 .8rem; }

/* Premium Nav Wrap */
.menu-nav-wrap{
    position: relative;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    overflow: hidden;
    padding: .35rem 2.85rem;
}
.menu-nav-wrap::before,
.menu-nav-wrap::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width: 44px;
    pointer-events:none;
    z-index: 2;
}
.menu-nav-wrap::before{
    left: 2.35rem;
    background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.menu-nav-wrap::after{
    right: 2.35rem;
    background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

/* Nav */
.menu-nav{
    display:flex;
    align-items:center;
    gap: .35rem;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.menu-nav::-webkit-scrollbar{ height:0; }

.menu-nav a{
    scroll-snap-align: start;
    text-decoration:none;
    color: rgba(0,0,0,.62);
    font-weight: 700;
    letter-spacing: .06em;
    font-size: .78rem;
    text-transform: uppercase;
    padding: .50rem .76rem;
    border-radius: 999px;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
    flex: 0 0 auto;
}
.menu-nav a:hover{ color: var(--ink); background: rgba(0,0,0,.04); }
.menu-nav a.active{ color: rgba(0,0,0,.88); background: rgba(0,0,0,.08); }
.menu-nav.is-scrollspy a.active{ background: rgba(0,0,0,.10); }

/* Arrows */
.menu-nav-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, opacity .12s ease;
}
.menu-nav-arrow:hover{ transform: translateY(-50%) scale(1.03); }
.menu-nav-arrow:active{ transform: translateY(-50%) scale(.98); }
.menu-nav-arrow[disabled]{ opacity: .35; cursor: default; box-shadow: none; }
.menu-nav-arrow.left{ left: .6rem; }
.menu-nav-arrow.right{ right: .6rem; }

@media (max-width: 420px){
    .menu-nav-arrow{ display:none; }
    .menu-nav-wrap{ padding-left: .9rem; padding-right: .9rem; }
    .menu-nav-wrap::before{ left: .35rem; }
    .menu-nav-wrap::after{ right: .35rem; }
}

/* Mobile dropdown */
.menu-mobile-filter{ display:none; margin-top:.7rem; }
@media (max-width: 991.98px){
    .menu-mobile-filter{ display:block; }
    .menu-nav-wrap{ border-radius: 18px; }
}

/* Sections */
.menu-section{ scroll-margin-top: 150px; padding-top:1.35rem; }
.menu-section-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:.7rem; }
.menu-section-title{ margin:0; font-weight:900; letter-spacing:-0.02em; color:var(--ink); }
.menu-section-rule{ flex:1; height:1px; background:var(--rule); }

/* List */
.menu-list{ background:#fff; border:1px solid var(--rule); border-radius:14px; }
.menu-item{ padding:.95rem 1.05rem; }
.menu-item + .menu-item{ border-top:1px solid rgba(0,0,0,.08); }
.menu-line{ display:flex; align-items:baseline; gap:.75rem; }
.menu-name{ font-weight:750; letter-spacing:-0.01em; color:var(--ink); display:flex; align-items:center; gap:.4rem; min-width: 0; }
.menu-name .name-text{ min-width:0; }
.menu-leader{ flex:1; border-bottom:1px dotted rgba(0,0,0,.28); transform:translateY(-2px); }
.menu-price{ font-weight:900; white-space:nowrap; color:var(--ink); }

/* Icons */
.menu-icons{ display:inline-flex; gap:.35rem; align-items:center; flex: 0 0 auto; }
.menu-ico{
    font-size: .92rem;
    color: rgba(0,0,0,.48);
    transform: translateY(1px);
}
.menu-ico:hover{ color: rgba(0,0,0,.70); }

.menu-desc{ margin-top:.35rem; color:var(--muted); line-height:1.5; }
.menu-allergens{ margin-top:.55rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.menu-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:2rem;
    padding:.10rem .45rem;
    font-size:.72rem;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.14);
    color:rgba(0,0,0,.56);
    background:rgba(0,0,0,.02);
    cursor:help;
}

@media (min-width: 1200px){
    .menu-grid{ display:grid; grid-template-columns:1fr 1fr; }
    .menu-grid .menu-item{ border-top:1px solid rgba(0,0,0,.08); border-right:1px solid rgba(0,0,0,.08); }
    .menu-grid .menu-item:nth-child(-n+2){ border-top:0; }
    .menu-grid .menu-item:nth-child(2n){ border-right:0; }
}

.menu-footnote{ color:var(--muted2); font-size:.88rem; margin-top:1rem; text-align:center; }

/* =========================================================
   RESERVIERUNG PAGE
   ========================================================= */
/* =========================================================
   RESERVIERUNG PAGE
   ========================================================= */
#reservierung-page{
    --paper:#F3F1EC;
    --paper2:#EFECE4;
    --ink:#0F1115;
    --muted:rgba(15,17,21,.70);
    --gold:#C9A063;
    --serif:"Playfair Display", ui-serif, Georgia, serif;
    --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    --radius:22px;
    --shadow:0 26px 80px rgba(0,0,0,.10);
    --shadow2:0 14px 36px rgba(0,0,0,.10);
    font-family:var(--sans);
    color:var(--ink);
    background:var(--paper);
}

#reservierung-page .kicker{
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:850;
}

#reservierung-page .reservationHero.reservationHero--main{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#0b0c0e;
    min-height:clamp(260px,34vh,360px);
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.10);
}

#reservierung-page .reservationHero.reservationHero--main::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.78)), url(../img/reservierungHero.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.05) contrast(1.05) brightness(0.9);
    transform: scale(1.02);
    z-index: 0;
}

#reservierung-page .reservationHero.reservationHero--main::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
}

#reservierung-page .reservationHero-inner{
    position:relative;
    z-index:3;
    width:100%;
    text-align:center;
    color:#fff;
    padding:2rem 0;
}

#reservierung-page .reservationHero-title{
    font-family:var(--serif);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:clamp(1.8rem,3.3vw,2.8rem);
    margin:.35rem 0;
    text-shadow:0 18px 60px rgba(0,0,0,.55);
}

#reservierung-page .reservationHero-title .gold{
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(201,160,99,.95));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

#reservierung-page .reservationHero-sub{
    font-size:.78rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.84);
    max-width:62rem;
    margin:0 auto;
}
#reservierung-page .shell{max-width: 920px;margin:-56px auto 0;padding:0 16px 84px;}
#reservierung-page .cardx{background:rgba(255,255,255,.76);border:1px solid rgba(15,17,21,.10);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;backdrop-filter:blur(12px);margin-bottom:18px;position:relative;overflow:hidden;}
#reservierung-page .cardx::before{content:"";position:absolute;inset:0;box-shadow:0 1px 0 rgba(255,255,255,.55) inset;pointer-events:none;}
#reservierung-page label{font-size:.74rem;letter-spacing:.20em;text-transform:uppercase;font-weight:900;color:var(--muted);margin-bottom:.35rem;}
#reservierung-page .form-control,#reservierung-page .form-select{border-radius:14px;padding:12px 14px;border-color:rgba(15,17,21,.12);}
#reservierung-page .form-control:focus,#reservierung-page .form-select:focus{border-color:rgba(201,160,99,.70);box-shadow:0 0 0 .22rem rgba(201,160,99,.18);}
#reservierung-page .stephead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
#reservierung-page .stepno{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:#0b0c0e;color:#fff;font-weight:900;box-shadow:var(--shadow2);flex:0 0 auto;}
#reservierung-page .help{margin:.15rem 0 0;color:rgba(15,17,21,.70);font-size:1.02rem;line-height:1.7;}
#reservierung-page .btn-pill{border-radius:999px;padding:.78rem 1.2rem;font-weight:750;letter-spacing:.02em;transition:transform .15s ease, filter .15s ease;}
#reservierung-page .btn-pill:hover{transform:translateY(-2px);filter:brightness(1.02);}

#reservierung-page .statusbox{
    border:1px solid rgba(15,17,21,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.85);
    padding: 12px 14px;
    display:flex; align-items:flex-start; gap:10px;
    color: rgba(15,17,21,.78);
}
#reservierung-page .statusdot{width:10px;height:10px;border-radius:99px;margin-top:6px;background: rgba(15,17,21,.30);}
#reservierung-page .statusdot.ok{background: rgba(34,197,94,.85);}
#reservierung-page .statusdot.bad{background: rgba(239,68,68,.85);}
#reservierung-page .statussmall{font-size:.9rem;color: rgba(15,17,21,.65);}

/* Modal */
#reservationSuccessModal .modal-content{
    border-radius: 18px;
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow);
}
#reservationSuccessModal .modal-header{
    border-bottom: 1px solid rgba(15,17,21,.08);
}

/* =========================================================
   KEGELBAHN PAGE
   ========================================================= */
#kegelbahn-page{
    --paper:#F3F1EC;
    --paper2:#EFECE4;
    --ink:#0F1115;
    --muted:rgba(15,17,21,.70);
    --gold:#C9A063;

    --serif:"Playfair Display", ui-serif, Georgia, serif;
    --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

    --radius:22px;
    --r2:18px;
    --r3:14px;

    --shadow: 0 26px 80px rgba(0,0,0,.10);
    --shadow2: 0 14px 36px rgba(0,0,0,.10);

    font-family: var(--sans);
    color: var(--ink);
}
#kegelbahn-page a{color:inherit;text-decoration:none}
#kegelbahn-page a:hover{text-decoration:none}

#kegelbahn-page .kicker{
    font-size:.74rem;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:850;
}
#kegelbahn-page .caps{
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:900;
    color: rgba(15,17,21,.62);
}
#kegelbahn-page .lede{
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.1vw, 1.22rem);
    line-height: 1.65;
    color: rgba(15,17,21,.78);
    margin: 0;
}

/* ===== HERO (menu.tpl) ===== */
/* Hero Section */
#kegelbahn-page .heroMenu {
    height: clamp(120px, 92vh, 400px);
    background-color: #0b0c0e; /* Fallback */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    isolation: isolate;
}

/* Background Image + Overlay */
#kegelbahn-page .heroMenu::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.78)),
            url("../img/kegelbahnHero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.05) contrast(1.05) brightness(0.9);
    transform: scale(1.02);
    z-index: 0;
}

/* Inner Content */
#kegelbahn-page .hero-inner {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    width: 100%;
}

/* Title */
#kegelbahn-page .hero-title {
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    margin: 0.25rem 0 0.35rem;
    text-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

/* Gold Gradient Text */
#kegelbahn-page .hero-title .gold {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(201,160,99,0.95)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Subtitle */
#kegelbahn-page .hero-sub {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    margin: 0 auto;
    max-width: 62rem;
}
#kegelbahn-page .btn-pill{
    border-radius:999px;
    padding:.62rem 1.1rem;
    font-size:.92rem;
    font-weight:650;
    letter-spacing:.01em;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
#kegelbahn-page .btn-pill:hover{transform: translateY(-2px); filter: brightness(1.02);}

@media (max-width: 992px){
    #kegelbahn-page .menu-hero{min-height: 480px;}
}

/* ===== Layout ===== */
#kegelbahn-page .shell{max-width:1180px;margin:0 auto;padding:0 16px;}

#kegelbahn-page .navstrip-wrap{margin-top:-30px; position:relative; z-index:8;}
#kegelbahn-page .navstrip{
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,17,21,.10);
    border-radius: 999px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    padding: 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
}
#kegelbahn-page .navstrip-left{
    display:flex; gap:8px; align-items:center;
    overflow:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#kegelbahn-page .navstrip-left::-webkit-scrollbar{display:none;}
#kegelbahn-page .pilltab{
    border: 1px solid rgba(15,17,21,.10);
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    padding: .52rem .9rem;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 950;
    color: rgba(15,17,21,.78);
    white-space: nowrap;
    transition: transform .15s ease, background .15s ease;
    cursor:pointer;
    user-select:none;
}
#kegelbahn-page .pilltab:hover{transform: translateY(-1px); background:#fff;}
#kegelbahn-page .pilltab.active{
    background: rgba(15,17,21,.92);
    color: rgba(255,255,255,.92);
    border-color: rgba(15,17,21,.20);
}
#kegelbahn-page .navstrip-right{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
#kegelbahn-page .status{
    display:none;
    align-items:center;
    gap:.55rem;
    border-radius:999px;
    padding:.45rem .75rem;
    border: 1px solid rgba(15,17,21,.10);
    background: rgba(255,255,255,.92);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:950;
    color: rgba(15,17,21,.74);
}
#kegelbahn-page .status .dot{width:10px;height:10px;border-radius:999px;background:rgba(201,160,99,.90);box-shadow:0 0 18px rgba(201,160,99,.18);}
@media (min-width: 992px){ #kegelbahn-page .status{display:inline-flex;} }

#kegelbahn-page .panel{
    background: var(--paper2);
    border-top: 1px solid rgba(15,17,21,.08);
    border-bottom: 1px solid rgba(15,17,21,.08);
    padding: clamp(2.4rem, 5vw, 4.0rem) 0;
}
#kegelbahn-page .section{padding: clamp(2.4rem, 4vw, 3.4rem) 0;}
#kegelbahn-page .section:first-child{padding-top:0;}

#kegelbahn-page .intro{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items:stretch;
}
@media (max-width: 992px){ #kegelbahn-page .intro{grid-template-columns:1fr;} }

#kegelbahn-page .card{
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(15,17,21,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.6rem, 2.5vw, 2.25rem);
    position:relative;
    overflow:hidden;
}
#kegelbahn-page .card::before{
    content:"";
    position:absolute; inset:0;
    box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
    pointer-events:none;
}
#kegelbahn-page .card-soft{
    background: rgba(255,255,255,.86);
    border-radius: var(--radius);
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow2);
    overflow:hidden;
}
#kegelbahn-page .h2{
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    line-height: 1.15;
    margin: .45rem 0 1.0rem;
}
#kegelbahn-page .leadtext{color: rgba(15,17,21,.68); font-size: 1.02rem; line-height: 1.85; margin:0;}

#kegelbahn-page .valuegrid{
    margin-top: 1.25rem;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px){ #kegelbahn-page .valuegrid{grid-template-columns:1fr;} }
#kegelbahn-page .value{
    border: 1px solid rgba(15,17,21,.10);
    background: rgba(255,255,255,.86);
    border-radius: var(--r2);
    padding: 14px;
    box-shadow: var(--shadow2);
}
#kegelbahn-page .value .t{margin:0 0 .35rem; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:950; color: rgba(15,17,21,.72);}
#kegelbahn-page .value .d{margin:0; color: rgba(15,17,21,.66); font-size: .98rem; line-height: 1.65;}

/* Galerie tiles */
#kegelbahn-page .collage{
    height:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
#kegelbahn-page .shot{
    border-radius: var(--radius);
    overflow:hidden;
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow2);
    background:#fff;
    cursor:pointer;
    position:relative;
    min-height: 180px;
    z-index: 1;
    pointer-events: auto;
}
#kegelbahn-page .shot.big{grid-column: span 2; min-height: 260px;}
#kegelbahn-page .shot img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.03);
    transition: transform .45s ease, filter .45s ease;
    filter: saturate(1.04) contrast(1.06);
    pointer-events: none;
}
#kegelbahn-page .shot:hover img{transform: scale(1.08); filter: saturate(1.08) contrast(1.08);}
#kegelbahn-page .shot .cap{
    position:absolute;
    left:14px; right:14px; bottom:14px;
    color:#fff;
    z-index:3;
    text-shadow: 0 18px 60px rgba(0,0,0,.55);
    pointer-events:none;
}
#kegelbahn-page .shot .cap .t{margin:0; font-family: var(--serif); font-weight:900; font-size: 1.15rem;}
#kegelbahn-page .shot .cap .s{margin:.3rem 0 0; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.82);}

#kegelbahn-page .shot::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
    opacity:.50;
    pointer-events:none;
    z-index:2;
}

/* Packages */
#kegelbahn-page .pkgs{display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;}
@media (max-width: 992px){ #kegelbahn-page .pkgs{grid-template-columns:1fr;} }
#kegelbahn-page .pkg{
    border-radius: var(--radius);
    border: 1px solid rgba(15,17,21,.10);
    background: rgba(255,255,255,.82);
    box-shadow: var(--shadow2);
    padding: 16px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#kegelbahn-page .pkg:hover{transform: translateY(-2px); background: rgba(255,255,255,.92); box-shadow: 0 18px 42px rgba(0,0,0,.11);}
#kegelbahn-page .pkg .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
#kegelbahn-page .pkg .name{margin:0; font-size:.92rem; font-weight:950; letter-spacing:.06em; text-transform: uppercase; color: rgba(15,17,21,.92);}
#kegelbahn-page .pkg .price{font-weight:950; letter-spacing:.06em; white-space: nowrap; color: rgba(15,17,21,.92); font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;}
#kegelbahn-page .pkg .desc{margin:.55rem 0 0; color: rgba(15,17,21,.68); font-size: .98rem; line-height:1.65;}
#kegelbahn-page .chips{margin-top:.9rem; display:flex; gap:8px; flex-wrap:wrap; font-size:.70rem; letter-spacing:.18em; text-transform:uppercase; font-weight:950; color: rgba(15,17,21,.55);}
#kegelbahn-page .chip{border:1px solid rgba(15,17,21,.10); border-radius:999px; padding:.12rem .55rem; background: rgba(255,255,255,.85);}

/* Booking */
#kegelbahn-page .booking{display:grid; grid-template-columns: 1fr 360px; gap: 18px; align-items:start;}
@media (max-width: 992px){ #kegelbahn-page .booking{grid-template-columns:1fr;} }
#kegelbahn-page .aside{position: sticky; top: 96px;}
@media (max-width: 992px){ #kegelbahn-page .aside{position: static;} }

#kegelbahn-page label{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:950; color: rgba(15,17,21,.66); margin-bottom:.35rem;}
#kegelbahn-page .hint{font-size:.92rem; color: rgba(15,17,21,.62); line-height:1.6;}
#kegelbahn-page .form-control, #kegelbahn-page .form-select{
    border-radius: 16px;
    border: 1px solid rgba(15,17,21,.12);
    padding: .82rem .95rem;
    box-shadow: none;
    background: rgba(255,255,255,.92);
}
#kegelbahn-page .form-control:focus, #kegelbahn-page .form-select:focus{
    border-color: rgba(201,160,99,.65);
    box-shadow: 0 0 0 4px rgba(201,160,99,.14);
}

#kegelbahn-page .sidecard{
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,17,21,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    padding: 18px;
}
#kegelbahn-page .sidecard h4{margin:0 0 .5rem; font-family: var(--serif); font-weight:900;}
#kegelbahn-page .sidecard p{margin:0; color: rgba(15,17,21,.68); font-size:.96rem; line-height:1.65;}
#kegelbahn-page .line{height:1px; background: rgba(15,17,21,.10); margin: 14px 0;}

/* Calendar */
#kegelbahn-page .cal-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
#kegelbahn-page .cal-btn{
    width:42px;height:42px;
    border-radius: 999px;
    border: 1px solid rgba(15,17,21,.12);
    background: rgba(255,255,255,.92);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition: transform .15s ease, background .15s ease;
    user-select:none;
}
#kegelbahn-page .cal-btn:hover{transform: translateY(-1px); background:#fff;}
#kegelbahn-page .cal{display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top:10px;}
#kegelbahn-page .dow{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:950; color: rgba(15,17,21,.56); text-align:center;}
#kegelbahn-page .day{
    border: 1px solid rgba(15,17,21,.10);
    border-radius: 12px;
    background: rgba(255,255,255,.90);
    padding: 10px 0;
    text-align:center;
    font-weight: 950;
    color: rgba(15,17,21,.82);
    cursor:pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    user-select:none;
}
#kegelbahn-page .day:hover{transform: translateY(-1px); background:#fff;}
#kegelbahn-page .day.muted{opacity:.35; cursor: default;}
#kegelbahn-page .day.muted:hover{transform:none;background: rgba(255,255,255,.90);}
#kegelbahn-page .day.busy{
    background: rgba(15,17,21,.92);
    color: rgba(255,255,255,.92);
    border-color: rgba(15,17,21,.25);
    cursor:not-allowed;
}
#kegelbahn-page .day.busy:hover{transform:none;background: rgba(15,17,21,.92);}
#kegelbahn-page .day.selected{
    border-color: rgba(201,160,99,.75);
    box-shadow: 0 0 0 4px rgba(201,160,99,.16);
    background: rgba(255,255,255,.98);
    color: rgba(15,17,21,.92);
}

/* Reveal */
#kegelbahn-page .reveal{opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease;}
#kegelbahn-page .reveal.in-view{opacity:1; transform: translateY(0);}

@media (prefers-reduced-motion: reduce){
    #kegelbahn-page .reveal{opacity:1;transform:none;transition:none;}
    #kegelbahn-page .menu-hero .sweep{animation:none!important;}
    #kegelbahn-page .shot img, #kegelbahn-page .pkg, #kegelbahn-page .pilltab, #kegelbahn-page .day, #kegelbahn-page .btn-pill{transition:none;}
}

#kegelbahn-page .kb-reservation-btn,
#kegelbahn-page .kb-reservation-btn:visited {
    color: #111;
    border-color: #111;
    background: transparent;
}

#kegelbahn-page .kb-reservation-btn:hover,
#kegelbahn-page .kb-reservation-btn:focus,
#kegelbahn-page .kb-reservation-btn:active {
    color: #fff !important;
    background-color: #111 !important;
    border-color: #111 !important;
    box-shadow: none;
}

#kegelbahn-page .kb-reservation-btn:focus-visible {
    color: #fff !important;
    background-color: #111 !important;
    border-color: #111 !important;
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(17,17,17,.15);
}

/* =========================================================
   KONTAKT PAGE
   ========================================================= */
#kontakt-page{
    --paper:#F3F1EC;
    --paper2:#EFECE4;
    --ink:#0F1115;
    --muted:rgba(15,17,21,.70);
    --gold:#C9A063;

    --serif:"Playfair Display", ui-serif, Georgia, serif;
    --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

    --radius:22px;
    --r2:18px;
    --r3:14px;

    --shadow: 0 26px 80px rgba(0,0,0,.10);
    --shadow2: 0 14px 36px rgba(0,0,0,.10);

    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
}

#kontakt-page a{
    color:inherit;
    text-decoration:none;
}
#kontakt-page a:hover{
    text-decoration:none;
}

#kontakt-page .kicker{
    font-size:.74rem;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:850;
}

#kontakt-page .caps{
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:900;
    color: rgba(15,17,21,.62);
}

#kontakt-page .lede{
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.1vw, 1.22rem);
    line-height: 1.65;
    color: rgba(15,17,21,.78);
    margin: 0;
}

/* ===== HERO ===== */
#kontakt-page .heroKontakt{
    height: clamp(220px, 60vh, 400px);
    background-color: #0b0c0e;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    isolation: isolate;
}

#kontakt-page .heroKontakt::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.78)),
            url("../img/reservierungHero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.05) contrast(1.05) brightness(0.9);
    transform: scale(1.02);
    z-index: 0;
}

#kontakt-page .hero-inner{
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    width: 100%;
}

#kontakt-page .hero-title{
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    margin: 0.25rem 0 0.35rem;
    text-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

#kontakt-page .hero-title .gold{
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(201,160,99,0.95)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#kontakt-page .hero-sub{
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    margin: 0 auto;
    max-width: 62rem;
}

/* ===== Layout ===== */
#kontakt-page .shell{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

#kontakt-page .panel{
    background: var(--paper2);
    border-top: 1px solid rgba(15,17,21,.08);
    border-bottom: 1px solid rgba(15,17,21,.08);
    padding: clamp(2.4rem, 5vw, 4rem) 0;
}

#kontakt-page .section{
    padding: clamp(2.4rem, 4vw, 3.4rem) 0;
}

#kontakt-page .section:first-child{
    padding-top: 0;
}

#kontakt-page .card{
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(15,17,21,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.6rem, 2.5vw, 2.25rem);
    position: relative;
    overflow: hidden;
}

#kontakt-page .card::before{
    content:"";
    position:absolute;
    inset:0;
    box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
    pointer-events:none;
}

#kontakt-page .card-soft{
    background: rgba(255,255,255,.86);
    border-radius: var(--radius);
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow2);
    overflow:hidden;
}

#kontakt-page .h2{
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    line-height: 1.15;
    margin: .45rem 0 1rem;
}

#kontakt-page .leadtext{
    color: rgba(15,17,21,.68);
    font-size: 1.02rem;
    line-height: 1.85;
    margin: 0;
}

/* ===== Kontakt Layout ===== */
#kontakt-page .contact-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    align-items:start;
}

@media (max-width: 992px){
    #kontakt-page .contact-grid{
        grid-template-columns:1fr;
    }
}

/* ===== Kontaktinfos ===== */
#kontakt-page .info-list{
    display:grid;
    gap: 12px;
    margin-top: 1.2rem;
}

#kontakt-page .info-item{
    border: 1px solid rgba(15,17,21,.10);
    background: rgba(255,255,255,.86);
    border-radius: var(--r2);
    padding: 14px 16px;
    box-shadow: var(--shadow2);
}

#kontakt-page .info-item .label{
    margin:0 0 .35rem;
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:950;
    color: rgba(15,17,21,.58);
}

#kontakt-page .info-item .value{
    margin:0;
    font-size:1rem;
    line-height:1.7;
    color: rgba(15,17,21,.82);
}

/* ===== Formular ===== */
#kontakt-page label{
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:950;
    color: rgba(15,17,21,.66);
    margin-bottom:.35rem;
    display:block;
}

#kontakt-page .hint{
    font-size:.92rem;
    color: rgba(15,17,21,.62);
    line-height:1.6;
}

#kontakt-page .form-group{
    margin-bottom: 1rem;
}

#kontakt-page .form-control,
#kontakt-page .form-select,
#kontakt-page textarea{
    width:100%;
    border-radius: 16px;
    border: 1px solid rgba(15,17,21,.12);
    padding: .82rem .95rem;
    box-shadow: none;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    font-family: var(--sans);
    font-size: .98rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#kontakt-page textarea{
    min-height: 160px;
    resize: vertical;
}

#kontakt-page .form-control:focus,
#kontakt-page .form-select:focus,
#kontakt-page textarea:focus{
    outline:none;
    border-color: rgba(201,160,99,.65);
    box-shadow: 0 0 0 4px rgba(201,160,99,.14);
    background:#fff;
}

/* ===== Buttons ===== */
#kontakt-page .btn-pill{
    border-radius:999px;
    padding:.82rem 1.25rem;
    font-size:.92rem;
    font-weight:700;
    letter-spacing:.03em;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:none;
}

#kontakt-page .btn-pill:hover{
    transform: translateY(-2px);
    filter: brightness(1.02);
}

#kontakt-page .btn-gold{
    background: var(--gold);
    color:#fff;
    box-shadow: 0 14px 30px rgba(201,160,99,.22);
}

#kontakt-page .btn-dark{
    background: rgba(15,17,21,.92);
    color:#fff;
    box-shadow: 0 14px 30px rgba(15,17,21,.18);
}

/* ===== Map / Zusatzkarte ===== */
#kontakt-page .map-box{
    min-height: 420px;
    border-radius: var(--radius);
    overflow:hidden;
    border: 1px solid rgba(15,17,21,.10);
    box-shadow: var(--shadow2);
    background: rgba(255,255,255,.9);
}

#kontakt-page .map-box iframe{
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
    display:block;
}

/* ===== Öffnungszeiten / Zusatzinfos ===== */
#kontakt-page .sidecard{
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,17,21,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    padding: 18px;
}

#kontakt-page .sidecard h4{
    margin:0 0 .5rem;
    font-family: var(--serif);
    font-weight:900;
    font-size: 1.2rem;
}

#kontakt-page .sidecard p{
    margin:0;
    color: rgba(15,17,21,.68);
    font-size:.96rem;
    line-height:1.65;
}

#kontakt-page .line{
    height:1px;
    background: rgba(15,17,21,.10);
    margin: 14px 0;
}

/* ===== Reveal ===== */
#kontakt-page .reveal{
    opacity:0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
}

#kontakt-page .reveal.in-view{
    opacity:1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
    #kontakt-page .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

    #kontakt-page .btn-pill{
        transition:none;
    }
}

/* =========================================================
   MENU RESPONSIVE FEINSCHLIFF
   ========================================================= */
@media (max-width: 991.98px){
    .hero--menu{ min-height: 34vh; }
    .hero--menu .hero-inner{ padding: 2.5rem 0 2.25rem; }
    .menu-wrap{ padding: 2rem 0 3.5rem; }
    .menu-links{ gap: .75rem; }
    .menu-item{ padding: .95rem 1rem; }
}

@media (max-width: 575.98px){
    .menu-line{ gap: .75rem; }
    .menu-price{ font-weight: 700; }
    .scroll-indicator{ width:40px; height:40px; }
}

/* Current eazyCMS navigation/account integration */
.navbar .nav-actions .btn {
    white-space: nowrap;
}

.navbar .account-link {
    border-color: rgba(255,255,255,.45);
}

.navbar .account-link.active,
.navbar .btn-dark.active {
    box-shadow: 0 0 0 2px var(--gold);
}

.footer-opening-hours {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}

.footer-opening-hours > span {
    display: inline-block;
}

#menu-page .menu-order-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .9rem;
}

#menu-page .menu-order-row label {
    min-width: min(100%, 220px);
}

#menu-page .menu-variant-select {
    border-radius: 999px;
    border-color: rgba(15,17,21,.16);
}

#menu-page .menu-add-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
}

#menu-page .menu-order-note {
    margin: .75rem 0 0;
    color: var(--muted);
    font-size: .85rem;
}

@media (max-width: 991.98px) {
    .navbar .nav-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        padding: 0 6px 12px;
    }

    .navbar .nav-actions .btn {
        width: 100%;
        margin: 0;
    }
}