.elementor-103553 .elementor-element.elementor-element-c3b59ee{--display:flex;}.elementor-103553 .elementor-element.elementor-element-9ad4f9c{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-9ad4f9c *//* ──  ① + ② ─────────────────────────────    In Produktion:
   ① Customizer → @font-face + :root global (Token v3.1 §5+6 by ML2026)
   ② Elementor Seiten-CSS → :root Gold-Override (Token v3.1 §7.2)
   ─────────────────────────────────────────────────────────── */
:root {
    --page-primary:        #D4AF37;
    --page-primary-hell:   #E8C65A;
    --page-primary-text:   #A88520;
    --page-primary-dunkel: #8F6F1F;
    --page-komplementaer:  #2E3A59;
    --page-bg:             #FBF9F3;
    --page-bg-tinted:      #F5F0E8;
    --page-gradient:       linear-gradient(135deg, #D4AF37 0%, #A88520 100%);
    --page-gradient-soft:  linear-gradient(135deg, #FBF9F3 0%, #E8D7B8 100%);
    --font-heading:        'Playfair Display', Georgia, serif;
    --font-body:           'Source Sans 3', Arial, sans-serif;
    --font-deko:           'Allura', cursive;
    --brand-text:          #1A1A1A;
    --brand-text-weich:    #555555;
    --container-max:       clamp(900px, 85vw, 1440px);
    --radius-sm:           6px;
    --radius-md:           12px;
    --radius-lg:           20px;
    --section-padding:     clamp(3rem, 6vw, 5.5rem) 0;
    --transition-fast:     0.2s ease;
    --transition-normal:   0.3s ease;
    --transition-slow:     0.5s ease;
    --touch-target:        44px;
    --z-sticky-menu:       9999;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }




/* ── WIDGET CSS (Layer 3) ─────────────────────────────────────
   Kein :root, kein @font-face, kein body-Reset
   !important: NUR bei dokumentierten Elementor-Kollisionen
   ─────────────────────────────────────────────────────────── */
 
.kb { overflow-x: hidden; }
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
 
/* ── Container & Sektionen ── */
.kb-container {
    max-width: var(--container-max, 1440px);
    margin: 0 auto;
    
    width: 100%;
}
.kb-section     { padding: var(--section-padding, 5rem 0); }
.kb-section--sm { padding: clamp(2rem, 4vw, 3.5rem) 0; }
 
/* ── Sticky Menu ── */
.kb-sticky-menu {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-sticky-menu, 9999);
    background: rgba(16,14,12,0.97);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    border-top: 1px solid rgba(212,175,55,0.18);
}
@supports (backdrop-filter: blur(14px)) {
    .kb-sticky-menu { background: rgba(16,14,12,0.92); backdrop-filter: blur(14px); }
}
.kb-sticky-menu.is-visible { transform: translateY(0); }
.kb-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem clamp(1.25rem, 4vw, 2rem);
    max-width: var(--container-max, 1440px);
    margin: 0 auto;
}
.kb-sticky-left    { display: flex; flex-direction: column; gap: 0.1rem; }
.kb-sticky-rating  { font-family: var(--font-body); font-size: 0.875rem; color: #CCCCCC; }
.kb-sticky-rating strong { color: var(--page-primary); }
.kb-sticky-fomo    { font-size: 0.7rem; color: rgba(255,255,255,0.42); letter-spacing: 0.02em; }
 
/* ── Buttons ── */
.kb-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-fast),
        box-shadow var(--transition-normal);
    white-space: nowrap;
    min-height: var(--touch-target);
}
.kb-btn:focus-visible { outline: 3px solid var(--page-primary); outline-offset: 3px; }
.kb-btn--primary {
    background: var(--page-primary);
    color: #1A1A1A;
    border-color: var(--page-primary);
}
.kb-btn--primary:hover {
    background: var(--page-primary-dunkel);
    border-color: var(--page-primary-dunkel);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    text-decoration: none;
}
.kb-btn--outline {
    background: transparent;
    color: var(--page-primary-text);
    border-color: var(--page-primary);
}
.kb-btn--outline:hover {
    background: var(--page-primary);
    color: #1A1A1A;
    text-decoration: none;
}
.kb-btn--ghost {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.5);
}
.kb-btn--ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.1); text-decoration: none; }
.kb-btn--sm { padding: 0.6rem 1.25rem; font-size: 0.875rem; }
.kb-btn--lg { padding: 1.1rem 2.5rem; font-size: 1.1rem; }
.kb-btn-subtitle { font-size: 0.7rem; font-weight: 400; opacity: 0.75; margin-top: 0.15rem; }
 
/* ── Typografie ── */
.kb-overline {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--page-primary-text);
    display: block;
    margin-bottom: 0.85rem;
}
.kb-overline--light { color: var(--page-primary); }
 
.kb-hero-h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    color: var(--brand-text);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}
.kb-hero-h1 em { font-style: italic; color: var(--page-primary-text); }
 
.kb-section-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    color: var(--brand-text);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: 1.1rem;
}
.kb-section-h2 em { font-style: italic; color: var(--page-primary-text); }
.kb-h2--light     { color: #FFFFFF; }
.kb-h2--light em  { color: var(--page-primary); }
 
.kb-section-intro {
    font-family: var(--font-body);
    font-size: 1.02rem;
    color: var(--brand-text-weich);
    line-height: 1.78;
    max-width: 620px;
    margin-bottom: 1rem;
}
.kb-text--light { color: rgba(255,255,255,0.82); }
 
.kb-section-header { margin-bottom: 2.75rem; }
 
/* ── Sektions-Hintergrund-Typen ──────────────────────────────
 
   RHYTHMUS dieser Seite:
   Hero (D) → Buffet (A + Logo) → Strip (full-bleed) →
   Kuchen (E Schiefer) → Bar (C Dunkel full-bleed) →
   Schnapsi (B Gradient) → Erlebnisse (A2 Weiß) → CTA (D + Logo)
   ─────────────────────────────────────────────────────────── */
 
/* Typ A: Creme */
.kb-section--a {
    background: var(--page-bg);
    position: relative;
    overflow: hidden;
}
.kb-section--a > .kb-container { position: relative; z-index: 1; }
 
/* Typ A2: Weiß */
.kb-section--a2 { background: #FFFFFF; }
 
/* Typ B: Soft-Gradient */
.kb-section--b { background: var(--page-gradient-soft); }
 
/* Typ C: Dunkel + sichtbarer Bokeh (FULL BLEED) */
.kb-section--c {
    background: #0E0C0A;
    position: relative;
    overflow: hidden;
}
.kb-section--c::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(14,12,10,0.8) 35%, rgba(14,12,10,0.6) 50%, rgba(14,12,10,0.15) 100%),
        repeating-linear-gradient(
            158deg,
            transparent 0px, transparent 6px,
            rgba(255,255,255,0.030) 6px, rgba(255,255,255,0.030) 7px,
            transparent 7px, transparent 14px,
            rgba(255,255,255,0.020) 14px, rgba(255,255,255,0.020) 15px
        ),
        repeating-linear-gradient(
            242deg,
            transparent 0px, transparent 18px,
            rgba(255,255,255,0.014) 18px, rgba(255,255,255,0.014) 19px
        ),
        radial-gradient(ellipse 700px 400px at 20% 55%, rgba(60,52,40,0.55) 0%, transparent 65%),
        radial-gradient(ellipse 600px 500px at 85% 35%, rgba(40,36,28,0.50) 0%, transparent 65%),
        radial-gradient(ellipse 800px 300px at 50% 100%, rgba(30,26,20,0.40) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
    z-index: 0;
}
.kb-section--c::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 42px at 14% 32%,  rgba(255,218,70,0.22) 0%, transparent 100%),
        radial-gradient(circle 28px at 87% 20%,  rgba(255,218,70,0.18) 0%, transparent 100%),
        radial-gradient(circle 56px at 64% 74%,  rgba(255,218,70,0.16) 0%, transparent 100%),
        radial-gradient(circle 36px at 36% 86%,  rgba(255,218,70,0.20) 0%, transparent 100%),
        radial-gradient(circle 22px at 71% 44%,  rgba(255,218,70,0.15) 0%, transparent 100%),
        radial-gradient(circle 18px at 24% 62%,  rgba(255,218,70,0.17) 0%, transparent 100%),
        radial-gradient(circle 30px at 91% 56%,  rgba(255,218,70,0.14) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
 
/* Typ E: CSS-Schiefer (sichtbare Textur) */
.kb-section--e {
    background-color: #141618;
    position: relative;
    overflow: hidden;
}
.kb-section--e::before {
    content: '';
    position: absolute;
    inset: 0;
    background:

        repeating-linear-gradient(
            158deg,
            transparent 0px, transparent 6px,
            rgba(255,255,255,0.030) 6px, rgba(255,255,255,0.030) 7px,
            transparent 7px, transparent 14px,
            rgba(255,255,255,0.020) 14px, rgba(255,255,255,0.020) 15px
        ),
        repeating-linear-gradient(
            242deg,
            transparent 0px, transparent 18px,
            rgba(255,255,255,0.014) 18px, rgba(255,255,255,0.014) 19px
        ),
        radial-gradient(ellipse 700px 400px at 20% 55%, rgba(60,52,40,0.55) 0%, transparent 65%),
        radial-gradient(ellipse 600px 500px at 85% 35%, rgba(40,36,28,0.50) 0%, transparent 65%),
        radial-gradient(ellipse 800px 300px at 50% 100%, rgba(30,26,20,0.40) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}
.kb-section--e::after {
    content: '';
    position: absolute;
    inset: 0;
    background:

        radial-gradient(ellipse 500px 350px at 28% 72%, rgba(168,133,32,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 400px 280px at 78% 18%, rgba(168,133,32,0.10) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}
.kb-section--e > * { position: relative; z-index: 1; }
 
/* Typ D: Parallax-Foto */
.kb-section--parallax { position: relative; overflow: hidden; }
.kb-parallax-bg {
    position: absolute;
    inset: -20% 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}
.kb-parallax-overlay {
    position: absolute; inset: 0; z-index: 1;
}
.kb-parallax-overlay--gold {
    background: linear-gradient(135deg, rgba(143,111,31,0.55) 0%, rgba(14,12,10,0.72) 45%, rgba(14,12,10,0.82) 100%);
}
.kb-parallax-overlay--dark { background: rgba(14,12,10,0.76); }
.kb-section--parallax .kb-container { position: relative; z-index: 2; }
 
/* ── HERO ─────────────────────────────────────────────────── */
.kb-hero {
    position: relative;
    min-height: 88vh;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
}
.kb-hero-bg {
    position: absolute;
    inset: -20% 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}
/* Overlay: heller creme-gold Gradient — dein Stil */
.kb-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(250,248,243,0.97) 0%,
        rgba(250,248,243,0.88) 42%,
        rgba(250,248,243,0.30) 100%
    );
    z-index: 1;
}
.kb-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: var(--container-max, 1440px);
    margin: 0 auto;
    padding: clamp(5rem, 7vw, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 5vw, 5rem);
    width: 100%;
}
 
/* Hero-Textbox */
.kb-hero-content {
    background: rgba(255,255,255,0.97);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3vw, 3rem);
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
.kb-hero-sub {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--brand-text-weich);
    line-height: 1.72;
    margin-bottom: 1.5rem;
}
.kb-proof-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.kb-proof-item { display: flex; flex-direction: column; }
.kb-proof-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--page-primary-text);
    line-height: 1;
}
.kb-proof-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--brand-text-weich);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.2rem;
}
.kb-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
 
/* ── Bento Grid (deine exakte Struktur) ── */
.kb-hero-bento {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: clamp(200px, 30vh, 320px) clamp(130px, 19vh, 200px);
    gap: 0.75rem;
}
.kb-bento-img {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.kb-bento-main {
    grid-column: 1 / -1;
}
.kb-bento-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform var(--transition-slow);
}
.kb-bento-img:hover img { transform: scale(1.04); }
/* Zarter Gold-Rand auf Bento-Bildern */
.kb-bento-img::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--radius-md);
    border: 1px solid rgba(212,175,55,0.20);
    pointer-events: none;
}
.kb-location-badge {
    position: absolute;
    bottom: 1rem; left: 1rem;
    background: rgba(255,255,255,0.95);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-text);
    z-index: 2;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(212,175,55,0.18);
}
 
/* Carousel */
 /* Full-bleed AutoScroll Carousel */
.kb-strip-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: clamp(120px, 14vw, 260px);
}

.kb-strip-track {
    display: flex;
    width: max-content;
    animation: kb-strip-scroll 90s linear infinite;
}

.kb-strip-item {
    flex: 0 0 auto;
    width: 11vw; /* 4 Bilder pro View */
    height: 1;
    overflow: hidden;
}

.kb-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.86) saturate(1.1);
    transition: transform 0.7s ease;
}

.kb-strip-item:hover img {
    transform: scale(1.06);
    filter: brightness(1) saturate(1.2);
}

/* AutoScroll Animation */
@keyframes kb-strip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Optional: Pause on hover */
.kb-strip-carousel:hover .kb-strip-track {
    animation-play-state: paused;
}

 
 
 
/* ── Buffet-Karten (Typ A) ── */
.kb-logo-bg {
    position: absolute;
    bottom: -100px; right: -80px;
    width: clamp(280px, 33vw, 480px);
    height: auto;
    opacity: 0.055;
    pointer-events: none;
    z-index: 0;
}
.kb-buffet-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.kb-buffet-card {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.kb-buffet-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,0.13); }
.kb-buffet-card__img {
    height: clamp(155px, 17vw, 210px);
    overflow: hidden;
}
.kb-buffet-card__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--transition-slow);
}
.kb-buffet-card:hover .kb-buffet-card__img img { transform: scale(1.05); }
.kb-buffet-card__body {
    padding: 1.4rem 1.5rem;
    border-top: 3px solid var(--page-primary);
}
.kb-buffet-card__body h3 {
    font-family: var(--font-heading);
    font-size: 1.08rem; font-weight: 700;
    color: var(--brand-text); margin-bottom: 0.4rem;
}
.kb-buffet-card__body p {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--brand-text-weich); line-height: 1.6;
}
.kb-trust-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--page-bg-tinted);
    border-left: 3px solid var(--page-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--brand-text-weich);
    line-height: 1.65;
    font-style: italic;
}
.kb-trust-box svg { flex-shrink: 0; margin-top: 2px; color: var(--page-primary-text); }
 
/* ── Kuchen Split (Typ E Schiefer) ── */
.kb-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.kb-split-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    position: relative;
}
.kb-split-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--transition-slow);
}
.kb-split-img:hover img { transform: scale(1.04); }
/* Gold-Akzentrahmen */
.kb-split-img::before {
    content: '';
    position: absolute;
    bottom: -10px; right: -10px;
    width: 65%; height: 65%;
    border-right: 2px solid rgba(212,175,55,0.4);
    border-bottom: 2px solid rgba(212,175,55,0.4);
    border-radius: 0 0 var(--radius-lg) 0;
    pointer-events: none; z-index: 2;
}
.kb-split-img::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(212,175,55,0.22);
    pointer-events: none;
}
.kb-highlight-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(212,175,55,0.28);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    font-style: italic;
}
.kb-highlight-box svg { flex-shrink: 0; margin-top: 2px; color: rgba(212,175,55,0.8); }
 
/* ── Bar & Cocktails (Typ C full-bleed) ── */
.kb-bar-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    z-index: 1;
}
.kb-bar-left {
    padding-top:    clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
    padding-right:  clamp(1.25rem, 4vw, 3rem);
    padding-left: max(
        clamp(1.25rem, 4vw, 3rem),
        calc((100vw - var(--container-max, 1440px)) / 2 + clamp(1.25rem, 4vw, 3rem))
    );
    max-width: calc(var(--container-max, 1440px) / 2 + 2rem);
}
.kb-bar-right {
    padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 4vw, 3rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}
.kb-cocktail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-top: 1.75rem;
}
.kb-cocktail-card {
    padding: 0.875rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(212,175,55,0.14);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.kb-cocktail-card:hover {
    background: rgba(212,175,55,0.09);
    border-color: rgba(212,175,55,0.4);
    transform: translateY(-2px);
}
.kb-cocktail-card--hl {
    grid-column: 1 / -1;
    background: rgba(212,175,55,0.11);
    border-color: rgba(212,175,55,0.42);
    border-left: 3px solid var(--page-primary);
}
.kb-cocktail-name {
    font-family: var(--font-heading);
    font-size: 0.9rem; font-weight: 700; color: #FFFFFF; margin-bottom: 0.2rem;
}
.kb-cocktail-card--hl .kb-cocktail-name { color: var(--page-primary); font-size: 0.95rem; }
.kb-cocktail-desc { font-family: var(--font-body); font-size: 0.75rem; color: rgba(255,255,255,0.5); line-height: 1.4; }
 
.kb-bar-meta {
    padding: 1rem 1.25rem;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: var(--radius-sm);
    margin-top: 1.25rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.65;
}
.kb-bar-meta strong { color: var(--page-primary); }
 
/* Getränkekarte schräg — korrekter realistischer Schatten */
.kb-karte-outer {
    position: sticky;
    top: 5rem;
    padding-top: 0.5rem;
}
.kb-karte {
    background: #FAFAF5;
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    max-width: 295px;
    width: 100%;
    transform: rotate(5.5deg);
    transform-origin: top line-height;
    /* Realistischer Schatten: einheitliche Richtung unten-rechts */
    box-shadow:
        5px 10px 35px rgba(0,0,0,0.52),
        2px 4px 10px rgba(0,0,0,0.32);
    outline: 1px solid rgba(212,175,55,0.18);
}
.kb-karte-title {
    font-family: var(--font-deko);
    font-size: 2.75rem; color: #1A1A1A; line-height: 1.05; margin-bottom: 0.3rem;
}
.kb-karte-sub {
    font-family: var(--font-body);
    font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: #AAA; padding-bottom: 1.1rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(0,0,0,0.09);
}
.kb-karte-section { margin-bottom: 0.9rem; }
.kb-karte-cat {
    font-family: var(--font-body);
    font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--page-primary-text); font-weight: 700; margin-bottom: 0.35rem;
}
.kb-karte-items { list-style: none; font-family: var(--font-body); font-size: 0.78rem; color: #444; line-height: 1.8; }
.kb-karte-items li::before { content: '·  '; color: var(--page-primary); }
 
/* ── Schnapsi-Taxi (Typ B) ── */
.kb-taxi-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.kb-taxi-img-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
    position: relative;
    max-height: clamp(380px, 52vh, 580px);
}
.kb-taxi-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-taxi-img-wrap::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(14,12,10,0.75) 0%, transparent 52%);
    z-index: 1;
}
.kb-taxi-label { position: absolute; bottom: 1.5rem; left: 1.5rem; z-index: 2; color: #FFFFFF; }
.kb-taxi-label-main { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; display: block; line-height: 1.05; }
.kb-taxi-label-sub  { font-family: var(--font-body); font-size: 0.68rem; opacity: 0.62; letter-spacing: 0.1em; text-transform: uppercase; }
.kb-taxi-deko {
    position: absolute;
    top: 1rem; right: -0.5rem;
    transform: rotate(3deg);
    background: var(--page-gradient);
    color: #1A1A1A;
    font-family: var(--font-body);
    font-size: 0.65rem; font-weight: 800;
    padding: 0.4rem 0.85rem;
    border-radius: 4px; z-index: 3;
    letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.kb-schnapsi-grid {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.75rem;
}
.kb-schnapsi-card {
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding: 0.875rem 1.1rem;
    background: #FFFFFF;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform var(--transition-fast);
}
.kb-schnapsi-card:hover { transform: translateX(5px); }
.kb-pg-badge {
    background: var(--page-gradient);
    color: #1A1A1A;
    font-family: var(--font-body);
    font-size: 0.62rem; font-weight: 800;
    padding: 0.22rem 0.5rem;
    border-radius: 4px; flex-shrink: 0; letter-spacing: 0.06em; margin-top: 0.2rem;
}
.kb-pg-name    { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--brand-text); margin-bottom: 0.15rem; }
.kb-pg-spirits { font-family: var(--font-body); font-size: 0.78rem; color: var(--brand-text-weich); line-height: 1.45; }
 
 /* Container der neuen Bildkarte */
/* Standard: Desktop */
.kb-bildkarte-outer {
    position: absolute;
    top: 9rem;
    right: 29rem;
    width: 40%;
    transform: rotate(-8deg);
    z-index: 5;
}

/* Tablet: Karte ganz rechts */
@media (max-width: 1024px) {
    .kb-bildkarte-outer {
        right: 0;
        top: 0;
        width: 38%;
        transform: rotate(-6deg);
    }
}

/* Mobile: EINSPALTIG */
@media (max-width: 767px) {

    /* Container auf Spalte umstellen */
    .kb-bar-right {
        flex-direction: column;
        align-items: center;
    }

    /* Bildkarte in normalen Flow holen */
    .kb-bildkarte-outer {
        position: static;     /* absolute deaktiviert */
        width: 100%;          /* volle Breite */
        margin-top: 1.5rem;   /* Abstand */
        transform: none;      /* gerade */
    }

    /* Getränkekarte auch volle Breite */
    .kb-karte {
        max-width: 100%;
        transform: none;      /* optional: gerade für mobile */
    }
}

/* Die Bildkarte selbst */
.kb-bildkarte {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Bild */
.kb-bildkarte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

 
 
/* ── Erlebnisse (Typ A2) ── */
.kb-erlebnisse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem; margin-top: 2.5rem;
}
.kb-erlebnis-card {
    background: var(--page-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.kb-erlebnis-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,0.13); }
.kb-erlebnis-card__img {
    height: clamp(148px, 17vw, 195px); overflow: hidden;
}
.kb-erlebnis-card__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--transition-slow);
}
.kb-erlebnis-card:hover .kb-erlebnis-card__img img { transform: scale(1.06); }
.kb-erlebnis-card__body { padding: 1.2rem; }
.kb-erlebnis-card__body h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--brand-text); margin-bottom: 0.4rem; }
.kb-erlebnis-card__body p  { font-family: var(--font-body); font-size: 0.84rem; color: var(--brand-text-weich); line-height: 1.6; }
 
/* ── CTA Parallax ── */
.kb-cta-inner {
    text-align: center;
    padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.kb-cta-logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(260px, 48vw, 560px);
    height: auto;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    filter: brightness(2) saturate(0);
}
.kb-cta-inner > * { position: relative; z-index: 1; }
.kb-cta-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.72;
    max-width: 560px;
    margin: 1rem auto 2.25rem;
}
.kb-cta-subtext {
    margin-top: 1.25rem;
    font-family: var(--font-body);
    font-size: 0.76rem;
    color: rgba(255,255,255,0.42);
    letter-spacing: 0.07em;
}
.kb-cta-subtext span + span::before { content: ' · '; }
 
/* ── Scroll-to-Top ── */
.kb-scroll-top {
    position: fixed;
    bottom: 5rem; right: 1.5rem;
    z-index: 9998;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--page-primary);
    color: #1A1A1A; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal), background var(--transition-fast);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.kb-scroll-top.is-visible { opacity: 1; transform: translateY(0); }
.kb-scroll-top:hover { background: var(--page-primary-dunkel); color: #FFFFFF; transform: translateY(-2px); }
 
/* ── Scroll-Reveal ── */
.kb-buffet-card,
.kb-cocktail-card,
.kb-schnapsi-card,
.kb-erlebnis-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease, box-shadow var(--transition-normal);
}
.kb-buffet-card.kb-animate-in,
.kb-cocktail-card.kb-animate-in,
.kb-schnapsi-card.kb-animate-in,
.kb-erlebnis-card.kb-animate-in {
    opacity: 1;
    transform: translateY(0);
}
.kb-buffet-card:nth-child(2)   { transition-delay: 0.1s; }
.kb-buffet-card:nth-child(3)   { transition-delay: 0.2s; }
.kb-cocktail-card:nth-child(2) { transition-delay: 0.05s; }
.kb-cocktail-card:nth-child(3) { transition-delay: 0.10s; }
.kb-cocktail-card:nth-child(4) { transition-delay: 0.15s; }
.kb-cocktail-card:nth-child(5) { transition-delay: 0.20s; }
.kb-cocktail-card:nth-child(6) { transition-delay: 0.25s; }
.kb-cocktail-card:nth-child(7) { transition-delay: 0.30s; }
.kb-cocktail-card:nth-child(8) { transition-delay: 0.35s; }
.kb-schnapsi-card:nth-child(2) { transition-delay: 0.10s; }
.kb-schnapsi-card:nth-child(3) { transition-delay: 0.20s; }
.kb-schnapsi-card:nth-child(4) { transition-delay: 0.30s; }
.kb-schnapsi-card:nth-child(5) { transition-delay: 0.40s; }
.kb-erlebnis-card:nth-child(2) { transition-delay: 0.10s; }
.kb-erlebnis-card:nth-child(3) { transition-delay: 0.20s; }
.kb-erlebnis-card:nth-child(4) { transition-delay: 0.30s; }
 
 
 
/* ───────────────────────────────────────────────
   GRUNDSTRUKTUR
─────────────────────────────────────────────── */
.ft-section--c {
    background: #0E0C0A;
    position: relative;
    overflow: hidden;
}
.ft-section--c::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 620px 480px at 5% 20%, rgba(212,175,55,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 500px 400px at 93% 12%, rgba(212,175,55,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 420px 550px at 76% 88%, rgba(212,175,55,0.16) 0%, transparent 60%),
        radial-gradient(ellipse 350px 280px at 18% 90%, rgba(212,175,55,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.ft-section--c::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle 42px at 14% 32%, rgba(255,218,70,0.22) 0%, transparent 100%),
        radial-gradient(circle 28px at 87% 20%, rgba(255,218,70,0.18) 0%, transparent 100%),
        radial-gradient(circle 56px at 64% 74%, rgba(255,218,70,0.16) 0%, transparent 100%),
        radial-gradient(circle 36px at 36% 86%, rgba(255,218,70,0.20) 0%, transparent 100%),
        radial-gradient(circle 18px at 24% 62%, rgba(255,218,70,0.17) 0%, transparent 100%);
    pointer-events: none;
}
.ft-section--c > * { position: relative; z-index: 1; }

.ft-section--a2 {
    background: #FFFFFF;
    padding: clamp(3rem, 6vw, 5.5rem) 0;
}

/* ───────────────────────────────────────────────
   JA-MOMENT LAYOUT
─────────────────────────────────────────────── */
.ft-moment-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(3rem, 5vw, 5.5rem) clamp(1.25rem, 4vw, 3rem);
    max-width: var(--container-max, 1440px);
    margin: 0 auto;
}

.ft-moment-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    position: relative;
}
.ft-moment-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.ft-moment-img::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(212,175,55,0.22);
    pointer-events: none;
}

@media (max-width: 768px) {
    .ft-moment-layout {
        grid-template-columns: 1fr !important; /* 1 Spalte */
    }

    .ft-moment-img {
        order: 2; /* Bild unter den Text */
    }

    .ft-moment-layout > div:first-child {
        order: 1; /* Text oben */
    }
}


/* ───────────────────────────────────────────────
   TYPOGRAFIE
─────────────────────────────────────────────── */
.ft-overline {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: grey !important;
    display: block;
    margin-bottom: 0.85rem;
}
.ft-overline--light { color: var(--page-primary); }

.ft-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    color: white !important;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: 1.1rem;
}
.ft-h2--light { color: #FFFFFF; }
.ft-h2--light em { color: var(--page-primary); }

.ft-lead {
    font-family: var(--font-body);
    font-size: 1.02rem;
    color: #fffff2 !important;
    line-height: 1.78;
    max-width: 640px;
    margin-bottom: 1rem;
}
.ft-lead--light { color: rgba(255,255,255,0.82); }

/* Zitat */
.ft-quote-big {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.2rem, 1.3vw, 2.4rem) !important;
    color: #ffffe2 !important;
    line-height: 2.5 !important;
    margin-bottom: 0.75rem !important;
    font-weight: 700 !important;
}
.ft-quote-attribution {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em;
    color: #fffff2 !important;
    text-transform: uppercase;
    margin-bottom: 2rem;
}



/* ───────────────────────────────────────────────
   BUTTON
─────────────────────────────────────────────── */
.ft-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s ease;
}
.ft-btn--primary {
    background: var(--page-primary);
    color: #1A1A1A;
    border-color: var(--page-primary);
}
.ft-btn--primary:hover {
    background: var(--page-primary-dunkel);
    border-color: var(--page-primary-dunkel);
    color: #FFFFFF;
    transform: translateY(-2px);
}
.ft-btn-sub {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.75;
    margin-top: 0.15rem;
}

/* ───────────────────────────────────────────────
   REVIEWS
─────────────────────────────────────────────── */
.ft-container {
    max-width: var(--container-max, 1440px);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.ft-section-header { margin-bottom: 2.75rem; }

.ft-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.ft-review-card {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 1.75rem;
    border-left: 3px solid var(--page-primary) ;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ft-review-stars {
    color: var(--page-primary);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}
.ft-review-text {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--brand-text-weich);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
}
.ft-review-author {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--page-primary-text);
}
.ft-review-date {
    font-size: 0.72rem;
    color: #AAA;
    margin-top: 0.1rem;
}

@media (max-width: 768px) {
    .ft-reviews-grid {
        grid-template-columns: 1fr !important; /* 1 Spalte */
        gap: 1.25rem !important;
    }
}
 
 
 
 
/* ── Responsive ── */
@media (max-width: 1099px) {
    .kb-hero-bento      { display: none; }
    .kb-hero-container  { grid-template-columns: 1fr; }
    .kb-bar-layout      { grid-template-columns: 1fr; }
    .kb-bar-left        { padding-right: clamp(1.25rem, 4vw, 3rem); max-width: 100%; }
    .kb-bar-right       { justify-content: flex-start; padding-top: 0; }
    .kb-karte-outer     { position: static; }
    .kb-taxi-layout     { grid-template-columns: 1fr; }
    .kb-erlebnisse-grid { grid-template-columns: repeat(2, 1fr); }
    .kb-buffet-cards    { grid-template-columns: repeat(2, 1fr); }
    .kb-split           { grid-template-columns: 1fr; gap: 2.5rem; }
    .kb-strip           { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .kb-section         { padding: clamp(2rem, 5vw, 3rem) 0; }
    .kb-container       { padding: 0 1.25rem; }
    .kb-hero-h1         { font-size: clamp(2rem, 7vw, 2.8rem); }
    .kb-hero-content    { padding: 1.75rem; }
    .kb-hero-ctas       { flex-direction: column; }
    .kb-hero-ctas .kb-btn { width: 100%; }
    .kb-buffet-cards    { grid-template-columns: 1fr; }
    .kb-cocktail-grid   { grid-template-columns: 1fr; }
    .kb-erlebnisse-grid { grid-template-columns: 1fr; }
    .kb-strip           { grid-template-columns: repeat(2, 1fr); height: clamp(120px, 28vw, 190px); }
    .kb-karte           { transform: rotate(0deg); }
    .kb-sticky-left     { display: none; }
    .kb-sticky-inner .kb-btn { width: 100%; }
    .kb-scroll-top      { bottom: 4.5rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .kb-buffet-card, .kb-cocktail-card, .kb-schnapsi-card, .kb-erlebnis-card {
        opacity: 1; transform: none; transition: none;
    }
    .kb-bento-img img, .kb-buffet-card__img img, .kb-split-img img,
    .kb-erlebnis-card__img img, .kb-strip-item img { transition: none; }
}/* End custom CSS */