/* ============================================================
   AK Luxy Beauty – Balingen
   Dunkle Basis mit Goldakzent, abgeleitet aus Logo und Preistafeln.
   ============================================================ */

:root {
    /* Gold – der einzige Farbakzent der Seite */
    --gold: #C9A227;
    --gold-light: #F2DFA4;
    --gold-pale: #FBF0D2;
    --gold-dark: #8C6B22;
    --gold-gradient: linear-gradient(120deg, #8C6B22 0%, #F2DFA4 38%, #C9A227 62%, #F7E9BE 100%);
    --gold-line: rgba(201, 162, 39, 0.28);
    --gold-glow: rgba(201, 162, 39, 0.16);

    /* Dunkle Flächen */
    --bg-dark: #08080A;
    --bg-section: #0C0C0F;
    --bg-elevated: #121116;
    --bg-card: linear-gradient(158deg, rgba(201, 162, 39, 0.07) 0%, rgba(18, 17, 22, 0) 46%), #121116;

    /* Typografie */
    --text-color: #F1ECE3;
    --text-muted: #ADA69B;
    --text-dim: #7E7871;
    --white: #ffffff;

    --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
    --radius: 18px;
    --transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-accent: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: var(--bg-dark);
    color: var(--text-color);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--gold); color: #0A0A0C; }

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--gold);
    color: #0A0A0C;
    padding: 12px 20px;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

/* ---------- Typografie-Bausteine ---------- */

h1, h2, h3, h4,
.badge-title {
    font-variant-numeric: lining-nums;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: 0;
}

.shimmer-text {
    background: var(--gold-gradient);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
    to { background-position: 220% center; }
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}

.section-header h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.85rem);
    margin-bottom: 18px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.02rem;
}

/* Feine Goldlinie unter Überschriften */
.section-header h2::after,
.owner-headline::after {
    content: '';
    display: block;
    width: 68px;
    height: 1px;
    margin: 22px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.owner-headline::after { margin-left: 0; margin-right: auto; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary,
.btn-booking {
    background: var(--gold-gradient);
    background-size: 200% auto;
    color: #0A0A0C;
    font-weight: 600;
    box-shadow: 0 8px 26px rgba(201, 162, 39, 0.22);
}

.btn-primary:hover,
.btn-booking:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(201, 162, 39, 0.34);
}

.btn-outline {
    border-color: var(--gold-line);
    color: var(--gold-light);
    background: rgba(201, 162, 39, 0.04);
}

.btn-outline:hover {
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.12);
    transform: translateY(-2px);
}

/* ---------- Bokeh & Goldstaub ----------
   Beide Ebenen liegen ueber den Abschnitten und nehmen keine Klicks an. Hinter
   den Abschnitten waere nichts davon zu sehen, und sie dafuer durchscheinend zu
   machen kostet Textkontrast. Gearbeitet wird nur mit transform und opacity,
   ohne filter: blur() – ein grossflaechiger Blur ist auf dem iPhone sonst der
   teuerste Posten im Bild.
   ---------------------------------------- */

.bokeh-layer,
.glitter-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bokeh-layer { z-index: 4; }
.glitter-layer { z-index: 5; }

.bokeh {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    opacity: var(--o);
    background: radial-gradient(circle,
        rgba(214, 170, 60, 0.34) 0%,
        rgba(201, 162, 39, 0.18) 38%,
        rgba(201, 162, 39, 0.06) 62%,
        transparent 76%);
    animation: bokeh-drift var(--t) ease-in-out var(--d) infinite alternate;
}

/* Die Kugeln: innen flach, aussen ein hellerer Rand – so liest das Auge einen
   unscharfen Lichtpunkt und keinen Farbfleck. */
.bokeh.ball {
    background: radial-gradient(circle,
        rgba(214, 170, 60, 0.10) 0%,
        rgba(226, 190, 104, 0.16) 56%,
        rgba(255, 233, 176, 0.62) 76%,
        rgba(201, 162, 39, 0.20) 86%,
        transparent 91%);
    animation-name: bokeh-float;
}

.bokeh.ball--soft {
    background: radial-gradient(circle,
        rgba(214, 170, 60, 0.08) 0%,
        rgba(226, 190, 104, 0.12) 62%,
        rgba(255, 233, 176, 0.34) 80%,
        transparent 92%);
}

@keyframes bokeh-float {
    from { transform: translate3d(0, 24px, 0) scale(0.92); }
    to   { transform: translate3d(-34px, -40px, 0) scale(1.12); }
}

@keyframes bokeh-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(60px, -70px, 0) scale(1.25); }
}

.glitter {
    position: absolute;
    left: var(--x);
    top: 0;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle, #FFF6DC 0%, var(--gold-light) 45%, rgba(201, 162, 39, 0.5) 70%, transparent 76%);
    box-shadow: 0 0 7px rgba(242, 223, 164, 0.75);
    opacity: 0;
    animation: glitter-fall var(--t) linear var(--d) infinite;
}

/* Nur jedes dritte Koernchen blinkt – flaechendeckend waere es unruhig. */
.glitter.twinkles {
    animation: glitter-fall var(--t) linear var(--d) infinite,
               glitter-twinkle 2.4s ease-in-out infinite;
}

@keyframes glitter-fall {
    0%   { transform: translate3d(0, -8vh, 0) scale(0.55); opacity: 0; }
    10%  { opacity: 0.95; }
    80%  { opacity: 0.6; }
    100% { transform: translate3d(var(--drift), 108vh, 0) scale(1); opacity: 0; }
}

@keyframes glitter-twinkle {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.9); }
}

/* ---------- Top Bar ---------- */

.top-bar {
    position: relative;
    z-index: 100;
    background: #050506;
    border-bottom: 1px solid rgba(201, 162, 39, 0.12);
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 9px 0;
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.top-bar i { color: var(--gold); margin-right: 7px; }

.top-bar-right {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.top-bar-link {
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.3s;
}

.top-bar-link:hover { color: var(--gold-light); }

/* ---------- Header ---------- */

header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(8, 8, 10, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background 0.4s, border-color 0.4s, padding 0.4s;
    padding: 14px 0;
}

header.scrolled {
    background: rgba(5, 5, 6, 0.94);
    border-bottom-color: rgba(201, 162, 39, 0.16);
    padding: 8px 0;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo { display: inline-block; line-height: 0; }

.logo-image {
    height: 58px;
    width: auto;
    transition: height 0.4s;
}

header.scrolled .logo-image { height: 46px; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-links a:not(.btn) {
    font-family: var(--font-accent);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
    position: relative;
    padding: 6px 0;
    transition: color 0.3s;
}

.nav-links a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.35s ease;
}

.nav-links a:not(.btn):hover { color: var(--gold-light); }
.nav-links a:not(.btn):hover::after { width: 100%; }

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--gold-light);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 6px 10px;
}

/* ---------- Mobile Navigation ---------- */

.mobile-nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 84vw;
    height: 100vh;
    background: #0A0A0C;
    border-left: 1px solid rgba(201, 162, 39, 0.2);
    z-index: 1100;
    padding: 96px 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: right 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow-y: auto;
}

.mobile-nav.active { right: 0; }

.mobile-nav a {
    font-family: var(--font-accent);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav a:hover { color: var(--gold-light); }

.mobile-booking-item {
    margin-top: 22px;
    border: 1px solid var(--gold-line) !important;
    border-radius: 999px;
    text-align: center;
    color: var(--gold-light) !important;
    padding: 15px 18px !important;
    font-size: 0.8rem !important;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s;
    z-index: 1050;
}

.nav-overlay.active { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    z-index: 1;
    padding: 96px 0 110px;
    background:
        radial-gradient(ellipse 70% 60% at 80% 0%, rgba(201, 162, 39, 0.10), transparent 70%),
        var(--bg-dark);
}

.hero .container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
}

.hero-headline {
    font-size: clamp(2.3rem, 4.7vw, 3.9rem);
    line-height: 1.1;
    margin-bottom: 26px;
}

.hero-lead { display: block; color: var(--text-color); }

.hero-words {
    display: block;
    position: relative;
    min-height: 1.15em;
}

.hero-word {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    background: var(--gold-gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}

.hero-word.is-on { opacity: 1; transform: translateY(0); }

.hero-word.is-flicker { animation: flicker 0.7s ease; }

@keyframes flicker {
    0%, 100% { filter: brightness(1); }
    30% { filter: brightness(1.55); }
    55% { filter: brightness(0.85); }
}

.hero-subtitle {
    font-size: 1.06rem;
    color: var(--text-muted);
    max-width: 540px;
    margin-bottom: 36px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.hero-facts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.hero-facts li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.hero-facts i {
    color: var(--gold);
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
}

/* Hero-Collage */

.hero-collage {
    position: relative;
    height: 560px;
}

.collage-img {
    position: absolute;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.collage-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 162, 39, 0.24);
    border-radius: var(--radius);
    pointer-events: none;
}

.collage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.collage-img:hover img { transform: scale(1.06); }

.img-1 { width: 68%; height: 74%; top: 0; right: 0; }
.img-2 { width: 52%; height: 50%; bottom: 0; left: 0; }

.hero-badge {
    position: absolute;
    right: 4%;
    bottom: 6%;
    background: rgba(8, 8, 10, 0.9);
    border: 1px solid var(--gold-line);
    border-radius: 14px;
    padding: 16px 26px;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
}

.badge-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1.15;
}

.badge-subtitle {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}

.scroll-hint {
    display: block;
    width: 22px;
    height: 36px;
    margin: 70px auto 0;
    border: 1px solid var(--gold-line);
    border-radius: 12px;
    position: relative;
}

.scroll-hint span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--gold);
    animation: scrolldot 1.9s ease-in-out infinite;
}

@keyframes scrolldot {
    0% { opacity: 0; transform: translateY(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateY(13px); }
}

/* ---------- Karten ---------- */

.gold-card {
    position: relative;
    background: var(--bg-card);
    background-color: #121116;
    border: 1px solid rgba(201, 162, 39, 0.16);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

/* ---------- Über uns ---------- */

.about {
    position: relative;
    z-index: 1;
    padding: 110px 0;
    background: var(--bg-section);
}

.about-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: stretch;
    padding: 52px;
}

/* Das Bild waechst auf die Hoehe der Textspalte mit, statt ueber ein festes
   Seitenverhaeltnis eine zweite Hoehe in die Karte zu bringen. */
.about-image {
    position: relative;
    min-height: 460px;
}

.owner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    filter: saturate(0.92);
}

.about-image::after {
    content: '';
    position: absolute;
    inset: 14px -14px -14px 14px;
    border: 1px solid var(--gold-line);
    border-radius: 14px;
    z-index: -1;
}

.owner-title {
    display: block;
    font-family: var(--font-accent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}

.owner-headline {
    font-size: clamp(1.7rem, 3.1vw, 2.5rem);
    margin-bottom: 8px;
}

.owner-greeting {
    font-size: 1.3rem;
    color: var(--text-color);
    font-weight: 400;
    margin: 18px 0 10px;
}

.owner-name-italic { font-style: italic; color: var(--gold-light); }

.owner-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.16rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--gold-pale);
    border-left: 2px solid var(--gold);
    padding-left: 22px;
    margin: 26px 0;
}

.owner-text-wrapper p { color: var(--text-muted); margin-bottom: 16px; }

.about-usps {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.usp {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.93rem;
    color: var(--text-color);
}

.usp i {
    color: var(--gold);
    width: 22px;
    text-align: center;
}

/* ---------- Preise ---------- */

.services {
    position: relative;
    z-index: 1;
    padding: 110px 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(201, 162, 39, 0.07), transparent 70%),
        var(--bg-dark);
}

.service-accordion {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.accordion-item {
    background: var(--bg-elevated);
    border: 1px solid rgba(201, 162, 39, 0.14);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.4s, box-shadow 0.4s;
}

.accordion-item.active {
    border-color: var(--gold-line);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 28px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.accordion-header h3 {
    font-family: var(--font-accent);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-color);
    transition: color 0.3s;
}

.accordion-item.active .accordion-header h3 { color: var(--gold-light); }

.accordion-header i {
    color: var(--gold);
    font-size: 0.8rem;
    transition: transform 0.4s;
}

.accordion-item.active .accordion-header i { transform: rotate(180deg); }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.accordion-item.active .accordion-content { max-height: 900px; }

.service-list { padding: 0 28px 26px; }

.service-note {
    font-size: 0.84rem;
    color: var(--gold);
    font-style: italic;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.service-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 0.94rem;
}

.service-item:last-child { border-bottom: none; }

.service-item > span:first-child {
    color: #C6BFB4;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.service-price {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.01em;
    color: var(--gold-light);
    white-space: nowrap;
}

.services-cta {
    max-width: 880px;
    margin: 48px auto 0;
    text-align: center;
}

.services-cta p { color: var(--text-muted); margin-bottom: 22px; }

.services-cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ---------- Galerie ---------- */

.gallery {
    position: relative;
    z-index: 1;
    padding: 110px 0;
    background: var(--bg-section);
}

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

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.6s;
}

.gallery-item::after {
    content: '\f00e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 10, 0.55);
    color: var(--gold-light);
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s;
}

.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after { opacity: 1; }

.gallery-cta { text-align: center; margin-top: 44px; }

/* Lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(4, 4, 5, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s;
    z-index: 2000;
    padding: 30px;
}

.lightbox.active { opacity: 1; visibility: visible; }

.lightbox-content {
    max-width: 90vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--gold-line);
}

.lightbox-close {
    position: absolute;
    top: 22px;
    right: 32px;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--gold-light);
    cursor: pointer;
}

/* ---------- Bewertungen ---------- */

.testimonials {
    position: relative;
    z-index: 1;
    padding: 110px 0;
    background:
        radial-gradient(ellipse 55% 50% at 85% 20%, rgba(201, 162, 39, 0.07), transparent 70%),
        var(--bg-dark);
}

.testimonials-slider {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    min-height: 330px;
}

.testimonial-card {
    position: absolute;
    inset: 0;
    padding: 52px 48px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-card.active { opacity: 1; visibility: visible; transform: translateY(0); }

.quote-icon {
    position: absolute;
    top: 26px;
    right: 32px;
    font-size: 2.6rem;
    color: rgba(201, 162, 39, 0.16);
}

.testimonial-stars {
    color: var(--gold);
    letter-spacing: 0.22em;
    font-size: 0.86rem;
    margin-bottom: 22px;
}

.testimonial-text {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 30px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gold-gradient);
    color: #0A0A0C;
    font-family: var(--font-accent);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.author-info { text-align: left; }

.author-info h4 {
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--text-color);
}

.author-info span {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
}

.slider-dots .dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.slider-dots .dot.active {
    background: var(--gold);
    border-color: var(--gold);
    transform: scale(1.25);
}

.reviews-cta { text-align: center; margin-top: 40px; }

/* ---------- Anfahrt / Kontakt ---------- */

.visit {
    position: relative;
    z-index: 1;
    padding: 110px 0;
    background: var(--bg-section);
}

.visit-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: stretch;
}

.visit-image {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 420px;
}

.visit-image a { display: block; height: 100%; }

.visit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.visit-image:hover img { transform: scale(1.05); }

.visit-image-label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    background: rgba(8, 8, 10, 0.86);
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--gold-light);
    backdrop-filter: blur(6px);
}

.visit-image-label i { margin-right: 8px; }

.visit-info { padding: 44px 40px; }

.visit-info h3 {
    font-size: 1.6rem;
    color: var(--gold-light);
    margin-bottom: 22px;
}

.visit-info p {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.visit-info p i {
    color: var(--gold);
    width: 18px;
    margin-top: 6px;
    text-align: center;
    font-size: 0.85rem;
}

.visit-info a { color: inherit; text-decoration: none; transition: color 0.3s; }
.visit-info a:hover { color: var(--gold-light); }

.opening-hours {
    margin: 26px 0;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.opening-hours strong {
    display: block;
    font-family: var(--font-accent);
    font-size: 0.72rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
    font-weight: 600;
}

.opening-hours p {
    display: block;
    color: var(--text-color);
    font-size: 0.93rem;
    margin-bottom: 5px;
}

.location-social {
    display: flex;
    gap: 12px;
    margin-bottom: 26px;
}

.location-social a,
.footer-social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    color: var(--gold-light);
    font-size: 1rem;
    transition: var(--transition);
}

.location-social a:hover,
.footer-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #0A0A0C;
    transform: translateY(-3px);
}

.visit-booking { width: 100%; }

.visit-note {
    display: block !important;
    font-size: 0.78rem !important;
    color: var(--text-dim) !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    text-align: center;
}

.visit-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */

footer {
    position: relative;
    z-index: 1;
    background: #050506;
    border-top: 1px solid rgba(201, 162, 39, 0.14);
    padding: 80px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.3fr 1fr;
    gap: 48px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-logo-image { height: 62px; width: auto; margin-bottom: 20px; }

.footer-logo p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.85;
}

.footer-links h4 {
    font-family: var(--font-accent);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
}

.footer-links ul { list-style: none; }

.footer-links li { margin-bottom: 11px; }

.footer-links a,
.footer-contact-block a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover,
.footer-contact-block a:hover { color: var(--gold-light); }

.footer-contact-block {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-contact-block i {
    color: var(--gold);
    width: 17px;
    margin-right: 9px;
    text-align: center;
    font-size: 0.82rem;
}

.footer-hours {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.83rem;
    color: var(--text-dim);
}

.footer-social { display: flex; gap: 10px; margin-top: 22px; }

.footer-bottom {
    padding-top: 28px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.footer-credit {
    text-decoration: none;
    font-size: 0.8rem;
}

/* ---------- Schwebender Buchungs-Button ---------- */

.booking-float {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 24px;
    border-radius: 999px;
    background: var(--gold-gradient);
    background-size: 200% auto;
    color: #0A0A0C;
    font-family: var(--font-accent);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 162, 39, 0.3);
    transition: var(--transition);
}

.booking-float:hover {
    background-position: right center;
    transform: translateY(-3px);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
    .hero .container { grid-template-columns: 1fr; gap: 56px; }
    .hero-collage { height: 440px; max-width: 520px; margin: 0 auto; }
    .hero-subtitle { max-width: none; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
    .about-image::after { display: none; }
    .about-image { min-height: 0; }
    .owner-image { position: static; aspect-ratio: 16 / 10; height: auto; }
    .visit-grid { grid-template-columns: 1fr; }
    .visit-image { min-height: 320px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
    .desktop-only { display: none !important; }
    .menu-toggle { display: block; }
    .top-bar-left { display: none; }
    .top-bar .container { justify-content: center; }
}

@media (max-width: 680px) {
    .container { padding: 0 20px; }

    /* Auf dem kleinen Schirm bleibt die Deko sichtbar, wird aber ausgeduennt:
       weniger Koerner, dafuer etwas groesser und heller, und die Abschnitte
       lassen mehr durch – sonst geht der Effekt auf dem iPhone unter. */
    .glitter:nth-child(2n) { display: none; }
    .glitter { width: calc(var(--s) + 1px); height: calc(var(--s) + 1px); }
    .bokeh { opacity: calc(var(--o) * 1.2); }

    /* Auf dem Handy passen Adresse und Telefon nicht nebeneinander in die
       obere Leiste. Sie wird dort zur reinen Anruf-Zeile – die Adresse steht
       ohnehin in der Hero-Plakette und im Kontaktabschnitt. */
    .top-bar { font-size: 0.74rem; }
    .top-bar-right { gap: 0; justify-content: center; width: 100%; }
    .top-bar-right .top-bar-link:not([href^="tel:"]) { display: none; }
    html { scroll-padding-top: 74px; }

    .hero { padding: 62px 0 80px; }
    .hero-collage { height: 330px; margin-bottom: 34px; }
    .hero-badge {
        left: 50%;
        right: auto;
        bottom: -22px;
        transform: translateX(-50%);
        padding: 12px 22px;
    }
    .badge-title { font-size: 1.25rem; }
    .hero-buttons .btn { width: 100%; }
    .scroll-hint { display: none; }

    .about, .services, .gallery, .testimonials, .visit { padding: 76px 0; }
    .about-grid { padding: 28px 22px; }
    .owner-quote { font-size: 1.04rem; padding-left: 16px; }

    .section-header { margin-bottom: 44px; }

    .accordion-header { padding: 18px 20px; }
    .service-list { padding: 0 20px 20px; }
    .service-item { font-size: 0.88rem; gap: 12px; }
    .service-item > span:first-child { font-size: 0.85rem; }
    .service-price { font-size: 0.95rem; }
    .services-cta-buttons .btn { width: 100%; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .testimonials-slider { min-height: 420px; }
    .testimonial-card { padding: 34px 24px; }
    .testimonial-text { font-size: 1.02rem; }
    .quote-icon { display: none; }

    .visit-info { padding: 30px 24px; }

    .footer-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .footer-logo-image { margin-left: auto; margin-right: auto; }
    .footer-contact-block { align-items: center; }
    .footer-social, .location-social { justify-content: center; }

    .booking-float {
        right: 16px;
        bottom: 16px;
        padding: 14px 18px;
        font-size: 0.72rem;
    }
    .booking-float span { display: none; }
    .booking-float i { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero-word { opacity: 0; }
    .hero-word.is-on { opacity: 1; transform: none; }
}

/* ============================================================
   Mikro-Animationen
   Alles hier ist Zierde – der prefers-reduced-motion-Block am
   Ende der Datei schaltet es geschlossen wieder ab.
   ============================================================ */

/* Lesefortschritt als feine Goldkante oben */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 1200;
    background: var(--gold-gradient);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.55);
    transition: width 0.12s linear;
}

/* Treibende Goldpunkte */
.sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-light);
    opacity: 0;
    box-shadow: 0 0 8px rgba(242, 223, 164, 0.85);
    animation: sparkle-rise linear infinite;
}

@keyframes sparkle-rise {
    0%   { opacity: 0; transform: translateY(20px) scale(0.6); }
    15%  { opacity: 0.85; }
    70%  { opacity: 0.55; }
    100% { opacity: 0; transform: translateY(-160px) scale(1.15); }
}

.sparkle-1 { left: 8%;  top: 72%; animation-duration: 15s; animation-delay: -1s; }
.sparkle-2 { left: 19%; top: 88%; animation-duration: 19s; animation-delay: -6s; }
.sparkle-3 { left: 31%; top: 64%; animation-duration: 13s; animation-delay: -3s; }
.sparkle-4 { left: 44%; top: 92%; animation-duration: 21s; animation-delay: -11s; }
.sparkle-5 { left: 57%; top: 70%; animation-duration: 16s; animation-delay: -8s; }
.sparkle-6 { left: 69%; top: 86%; animation-duration: 18s; animation-delay: -2s; }
.sparkle-7 { left: 78%; top: 60%; animation-duration: 14s; animation-delay: -9s; }
.sparkle-8 { left: 88%; top: 90%; animation-duration: 20s; animation-delay: -5s; }
.sparkle-9 { left: 95%; top: 75%; animation-duration: 17s; animation-delay: -13s; }

/* Logo bekommt beim Überfahren einen Lichtstreifen */
.logo { position: relative; overflow: hidden; border-radius: 6px; }

.logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

.logo:hover::after { animation: logo-shine 0.9s ease; }

@keyframes logo-shine {
    0%   { left: -60%; opacity: 0.9; }
    100% { left: 120%; opacity: 0; }
}

/* Die Goldlinie unter Überschriften wächst beim Einblenden auf */
.section-header h2::after {
    width: 0;
    transition: width 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s;
}

.section-header.aos-animate h2::after,
.section-header h2.is-revealed::after { width: 68px; }

/* Hero-Fakten laufen nacheinander ein */
.hero-facts li {
    opacity: 0;
    transform: translateX(-12px);
    animation: fact-in 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.hero-facts li:nth-child(1) { animation-delay: 0.9s; }
.hero-facts li:nth-child(2) { animation-delay: 1.05s; }
.hero-facts li:nth-child(3) { animation-delay: 1.2s; }

@keyframes fact-in {
    to { opacity: 1; transform: translateX(0); }
}

.hero-facts i { transition: transform 0.35s ease; }
.hero-facts li:hover i { transform: scale(1.25) rotate(-8deg); }

/* Adress-Plakette schwebt leicht */
.hero-badge { animation: badge-float 7s ease-in-out infinite; }

@keyframes badge-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}

/* Collage kippt sanft mit dem Mauszeiger (Werte setzt script.js) */
.hero-collage {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    perspective: 1000px;
}

.collage-img {
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s;
}

.collage-img:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); }

/* USP-Zeilen rücken beim Überfahren auf */
.usp {
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.35s;
}

.usp:hover { transform: translateX(8px); color: var(--gold-light); }
.usp i { transition: transform 0.35s ease; }
.usp:hover i { transform: scale(1.2); }

/* Preiszeilen: beim Öffnen der Kategorie nacheinander einblenden */
.accordion-item.active .service-item {
    animation: row-in 0.5s ease backwards;
    animation-delay: calc(var(--row, 0) * 55ms + 120ms);
}

@keyframes row-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Preiszeile beim Überfahren: Goldhauch und wanderndes Preisschild */
.service-item {
    position: relative;
    padding-left: 0;
    transition: padding-left 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-item::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--gold);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s, transform 0.3s;
}

.service-item:hover { padding-left: 10px; }
.service-item:hover::before { opacity: 1; transform: translateX(0); }
.service-item:hover > span:first-child { color: var(--text-color); }

.service-item > span:first-child,
.service-price { transition: color 0.3s, transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); }

.service-item:hover .service-price { transform: scale(1.07); }

/* Akkordeon-Kopf reagiert auf Berührung */
.accordion-header { transition: background 0.35s; }
.accordion-header:hover { background: rgba(201, 162, 39, 0.05); }
.accordion-header:hover h3 { color: var(--gold-light); }

/* Galerie: Lupe fährt beim Überfahren hoch statt nur einzublenden */
.gallery-item::after {
    transform: scale(0.85);
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item:hover::after { transform: scale(1); }

.gallery-item {
    transition: box-shadow 0.45s, transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* Sterne funkeln nacheinander auf */
.testimonial-card.active .testimonial-stars i {
    animation: star-pop 0.5s ease backwards;
}

.testimonial-card.active .testimonial-stars i:nth-child(1) { animation-delay: 0.15s; }
.testimonial-card.active .testimonial-stars i:nth-child(2) { animation-delay: 0.25s; }
.testimonial-card.active .testimonial-stars i:nth-child(3) { animation-delay: 0.35s; }
.testimonial-card.active .testimonial-stars i:nth-child(4) { animation-delay: 0.45s; }
.testimonial-card.active .testimonial-stars i:nth-child(5) { animation-delay: 0.55s; }

@keyframes star-pop {
    from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* Avatar dreht sich beim Überfahren der Karte leicht */
.author-avatar { transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.testimonial-card:hover .author-avatar { transform: rotate(-6deg) scale(1.06); }

/* Kontaktzeilen: Symbol rückt mit */
.visit-info p i,
.footer-contact-block i { transition: transform 0.35s ease; }
.visit-info p:hover i,
.footer-contact-block a:hover i { transform: translateX(3px) scale(1.15); }

/* Fußzeilen-Links bekommen einen mitwachsenden Strich */
.footer-links ul a {
    position: relative;
    display: inline-block;
}

.footer-links ul a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.35s ease;
}

.footer-links ul a:hover::after { width: 100%; }

/* Schwebender Button: ruhiger Pulsring, damit er nicht übersehen wird */
.booking-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--gold-light);
    opacity: 0;
    animation: float-ring 3.6s ease-out infinite;
    pointer-events: none;
}

@keyframes float-ring {
    0%   { transform: scale(1); opacity: 0.6; }
    70%  { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}

.booking-float i { transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.booking-float:hover i { transform: rotate(-10deg) scale(1.12); }

/* Buttons bekommen einen kurzen Lichtstreifen */
.btn-primary, .btn-booking { position: relative; overflow: hidden; }

.btn-primary::after,
.btn-booking::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-18deg);
    opacity: 0;
}

.btn-primary:hover::after,
.btn-booking:hover::after { animation: logo-shine 0.8s ease; }

/* Sozial-Symbole wippen kurz */
.location-social a:hover i,
.footer-social a:hover i { animation: icon-wiggle 0.5s ease; }

@keyframes icon-wiggle {
    0%, 100% { transform: rotate(0); }
    30%      { transform: rotate(-12deg); }
    65%      { transform: rotate(8deg); }
}

/* Karten-Bild: Hinweisplakette fährt beim Überfahren hoch */
.visit-image-label {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.4s;
}

.visit-image:hover .visit-image-label {
    transform: translateY(-4px);
    background: rgba(201, 162, 39, 0.92);
    color: #0A0A0C;
}

/* Karten heben sich leicht an */
.gold-card { transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s; }
.visit-info.gold-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) {
    .bokeh, .hero-badge, .booking-float::before { animation: none; }
    /* Der fallende Staub verschwindet ganz – ein stehendes Koernchen mitten
       im Text waere schlechter als gar keines. */
    .glitter-layer { display: none; }
    .hero-facts li { opacity: 1; transform: none; animation: none; }
    .section-header h2::after { width: 68px; transition: none; }
    .collage-img { transform: none; }
}

/* Aktiver Navigationspunkt (von script.js gesetzt) */
.nav-links a:not(.btn).is-current { color: var(--gold-light); }
.nav-links a:not(.btn).is-current::after { width: 100%; }