/* ==========================================================================
   PRAXIS FÜR ZAUBEREI – Haupt-Stylesheet
   ==========================================================================
   Inhaltsverzeichnis:
   1.  Fonts (selbst gehostet)
   2.  Design-Tokens (Farben, Abstände, Schriften)
   3.  Reset & Grundlagen
   4.  Typografie
   5.  Layout-Hilfsklassen
   6.  Navigation (fixiert oben)
   7.  Hero-Bereich
   8.  Newsticker (fixiert unten, nur Startseite)
   9.  Footer
   10. Buttons
   11. Formulare
   12. Termine-Liste
   13. Show-Detailseite
   14. Bildergalerie-Karussell
   15. Bewertungs-Overlay (Testimonials)
   16. Sterne-Bewertung (Animation)
   17. Scroll-Reveal-Animationen
   18. Utilities
   19. Responsive Anpassungen
   20. Reduced Motion
   ========================================================================== */


/* 1. FONTS -------------------------------------------------------------- */

@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nothing You Could Do';
    src: url('/fonts/nothing-you-could-do-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* 2. DESIGN-TOKENS -------------------------------------------------------- */

:root {
    /* Farben – abgeleitet vom Flyer (Kaninchen-Zauberer, Samtvorhang, Goldschrift) */
    --color-ink:        #18130f;   /* tiefes, warmes Schwarz – Nav, Hero-Overlay */
    --color-ink-soft:   #26201a;   /* etwas hellere Variante für Flächen auf Ink */
    --color-cream:      #f7f0e3;   /* warmes Off-White – Hauptfläche */
    --color-cream-dim:  #efe4d0;   /* leicht abgesetzte Fläche auf Cream (Karten) */
    --color-charcoal:   #2c241d;   /* Fließtext auf hellem Grund */
    --color-gold:       #b8863f;   /* Haupt-Akzent: gedecktes Gold */
    --color-gold-light: #e3c27f;   /* helleres Gold für Schimmer/Highlights */
    --color-bordeaux:   #6d1f2c;   /* zweiter Akzent: Samtvorhang-Rot */
    --color-bordeaux-dark: #4a141d;

    /* Schriften */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-script: 'Nothing You Could Do', cursive;

    /* Abstände (an einer 8px-Basis orientiert) */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;
    --space-7: 7rem;

    /* Layout */
    --content-width: 68rem;
    --nav-height: 4.25rem;
    --ticker-height: 2.75rem;
    --radius: 3px;

    /* Schatten */
    --shadow-soft: 0 8px 30px rgba(24, 19, 15, 0.15);
    --shadow-strong: 0 20px 60px rgba(24, 19, 15, 0.35);
}


/* 3. RESET & GRUNDLAGEN --------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-charcoal);
    background: var(--color-cream);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

button {
    font-family: inherit;
    cursor: pointer;
}

/* sichtbarer Fokus-Rahmen für Tastaturnutzung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}


/* 4. TYPOGRAFIE ------------------------------------------------------------ */

h1, h2, h3, .font-display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

p { margin: 0 0 var(--space-2); }

.font-script {
    font-family: var(--font-script);
    font-weight: 400;
    line-height: 1.4;
}

.eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
}

/* Schimmer-Effekt für große Überschriften – dezenter Lichtreflex, der einmal
   beim Erscheinen der Seite über den Text läuft */
.shimmer-heading {
    background-image: linear-gradient(
        100deg,
        var(--color-ink) 40%,
        var(--color-gold-light) 50%,
        var(--color-ink) 60%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    /* Gesamtzyklus 12,6s = 2,6s Glimmen + 10s Pause, endlos wiederholt -
       so verpasst man's nicht, wenn man beim Laden nicht direkt hinschaut,
       ohne dass es dauerhaft in Bewegung ist und nervt. */
    animation: shimmerSweep 12.6s linear 0.3s infinite;
}
.shimmer-heading--light {
    background-image: linear-gradient(
        100deg,
        var(--color-cream) 40%,
        var(--color-gold-light) 50%,
        var(--color-cream) 60%
    );
}
/* Invertierte Variante für hellere Hero-Bilder: dunkle Schrift statt
   heller, damit sie auch auf helleren Bildstellen gut lesbar bleibt -
   der goldene Glimmer bleibt als heller Lichtstreif erhalten. */
.shimmer-heading--invert {
    background-image: linear-gradient(
        100deg,
        var(--color-ink) 40%,
        var(--color-gold-light) 50%,
        var(--color-ink) 60%
    );
}

@keyframes shimmerSweep {
    0%     { background-position: 130% 0; }
    20.6%  { background-position: -30% 0; }
    100%   { background-position: -30% 0; }
}


/* 5. LAYOUT-HILFSKLASSEN --------------------------------------------------- */

.container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

.section {
    padding: var(--space-6) 0;
}

.section--dim {
    background: var(--color-cream-dim);
}

.section--ink {
    background: var(--color-ink);
    color: var(--color-cream);
}

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

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* 6. NAVIGATION (fixiert oben) --------------------------------------------- */

.site-nav {
    /* Dauerhaft "fixed" statt sticky oder JS-gesteuertem Umschalten -
       genau wie der Newsticker: von der ersten Sekunde an feststehend,
       kein Umschalt-Moment, an dem etwas schiefgehen könnte. Der Platz,
       den die Navigation "eigentlich" einnehmen würde, wird stattdessen
       über einen festen Platzhalter direkt darunter reserviert (siehe
       .site-nav-spacer) - dadurch bleibt der Hero trotzdem komplett
       sichtbar, ganz ohne JavaScript. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background: rgba(24, 19, 15, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(227, 194, 127, 0.2);
}

/* Reserviert dauerhaft die Höhe der Navigation, damit der Inhalt
   darunter (allen voran der Hero) nicht von der fixierten Navigation
   verdeckt wird. */
.site-nav-spacer {
    height: var(--nav-height);
}

.site-nav__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.site-nav__logo {
    display: flex;
    align-items: center;
    height: 2.5rem;
    flex-shrink: 0;
}
.site-nav__logo img { height: 100%; width: auto; }

.site-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
}

.site-nav__link {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-cream);
    padding: 0.4rem 0.1rem;
    position: relative;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.site-nav__link:active {
    background: rgba(227, 194, 127, 0.18);
}
.site-nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--color-gold-light);
    transition: right 0.25s ease;
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
    right: 0;
}

.site-nav__dropdown { position: relative; }
.site-nav__dropdown-toggle {
    /* Auf Desktop nicht nötig - Untermenü öffnet sich per Hover.
       Wird erst in der mobilen Media Query wieder sichtbar gemacht. */
    display: none;
}
.site-nav__dropdown-panel {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--color-ink-soft);
    border: 1px solid rgba(227, 194, 127, 0.2);
    border-radius: var(--radius);
    padding: 0.5rem;
    min-width: 11rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: var(--shadow-soft);
}
@media (min-width: 861px) {
    .site-nav__dropdown:hover .site-nav__dropdown-panel,
    .site-nav__dropdown:focus-within .site-nav__dropdown-panel {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}
.site-nav__dropdown-panel .site-nav__link {
    display: block;
    padding: 0.55rem 0.8rem;
}
.site-nav__dropdown-panel .site-nav__link::after { display: none; }
.site-nav__dropdown-panel .site-nav__link:hover {
    background: rgba(227, 194, 127, 0.12);
    border-radius: var(--radius);
}

/* Mobiles Menü */
.site-nav__burger {
    display: none;
    background: none;
    border: 0;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}
.site-nav__burger span {
    position: absolute;
    left: 0.5rem; right: 0.5rem;
    top: 50%;
    height: 3px;
    border-radius: 2px;
    background: var(--color-cream);
    transform: translateY(-50%);
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.site-nav__burger span::before,
.site-nav__burger span::after {
    content: '';
    position: absolute;
    /* left/right: 0 statt 0.5rem - bezieht sich auf die Breite des
       mittleren Strichs selbst (sein "Containing Block"), nicht auf den
       Button. Mit 0.5rem hier waren die äußeren Striche vorher nur ein
       Drittel so lang wie der mittlere - das ist jetzt behoben. */
    left: 0; right: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--color-cream);
    transition: transform 0.2s ease, top 0.2s ease;
}
.site-nav__burger span::before { top: -0.55rem; }
.site-nav__burger span::after { top: 0.55rem; }
.site-nav__burger[aria-expanded="true"] span { background: transparent; }
/* X-Zustand: beide Striche zuerst auf dieselbe vertikale Mitte wie der
   (jetzt unsichtbare) mittlere Strich bringen, dann erst rotieren - so
   überlappen sie sich garantiert exakt statt sich zu verfehlen. */
.site-nav__burger[aria-expanded="true"] span::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.site-nav__burger[aria-expanded="true"] span::after {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}


/* 7. HERO ------------------------------------------------------------------ */

.hero {
    position: relative;
    width: 100%;
    line-height: 0; /* verhindert einen Mini-Spalt unter dem Bild */
    overflow: hidden;
}

.hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.hero__content {
    position: absolute;
    z-index: 2;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    padding-bottom: var(--space-4);
    line-height: initial;
}

.hero__eyebrow {
    color: var(--color-gold-light);
}

.hero__title {
    margin-bottom: 0;
    /* Keine feste Farbe hier - die kommt vom Schimmer-Effekt
       (shimmer-heading--light). Eine feste color würde den
       Farbverlauf des Schimmers komplett überdecken. */
}

/* Logo-Overlay oben links (aktuell nur auf Show-Detailseiten genutzt) */
.hero__logo-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 3;
    height: 3.4rem;
}
.hero__logo-link img { height: 100%; width: auto; }


/* 8. NEWSTICKER (nur Startseite, fixiert unten) ----------------------------- */

.newsticker {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    height: var(--ticker-height);
    display: flex;
    align-items: center;
    background: var(--color-bordeaux-dark);
    border-top: 1px solid rgba(227, 194, 127, 0.35);
    overflow: hidden;
}

.newsticker__track {
    display: inline-flex;
    white-space: nowrap;
    animation: tickerScroll 28s linear infinite;
    will-change: transform;
}

.newsticker__item {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 0.92rem;
    color: var(--color-gold-light);
    padding-right: 3.5rem;
}
.newsticker__item--link {
    text-decoration: none;
    cursor: pointer;
}
.newsticker__item--link:hover {
    text-decoration: underline;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* 9. FOOTER ------------------------------------------------------------------ */

.site-footer {
    background: var(--color-ink);
    color: var(--color-cream);
    padding: var(--space-5) 0 var(--space-4);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.site-footer__mark { height: 2.2rem; opacity: 0.85; }

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: 0.88rem;
}
.site-footer__links a:hover { color: var(--color-gold-light); }

.site-footer__copy {
    width: 100%;
    font-size: 0.78rem;
    color: rgba(247, 240, 227, 0.55);
    margin-top: var(--space-2);
}


/* 10. BUTTONS ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.9rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn--primary {
    background: var(--color-bordeaux);
    color: var(--color-cream);
}
.btn--primary:hover { background: var(--color-bordeaux-dark); }

.btn--gold {
    background: var(--color-gold);
    color: var(--color-ink);
}
.btn--gold:hover { background: var(--color-gold-light); }

.btn--outline {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-ink);
}
.btn--outline:hover { background: rgba(184, 134, 63, 0.1); }

.btn--block { width: 100%; }


/* 11. FORMULARE ------------------------------------------------------------------ */

.form-field {
    margin-bottom: var(--space-3);
}

.form-field label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--color-ink);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-charcoal);
    background: #fff;
    border: 1px solid #d9cdb4;
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--color-gold);
}

.form-field textarea { min-height: 8rem; resize: vertical; }

.form-hint {
    font-size: 0.82rem;
    color: #7a6f5c;
    margin-top: 0.35rem;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
}
.form-checkbox input { margin-top: 0.2rem; }

/* Honeypot-Feld: für Menschen unsichtbar, Bots füllen es versehentlich aus */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Plus/Minus-Steller für die Gästeanzahl */
.guest-counter {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d9cdb4;
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.guest-counter__btn {
    width: 3rem;
    height: 3rem;
    border: 0;
    background: var(--color-cream-dim);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1;
}
.guest-counter__btn:hover { background: var(--color-gold-light); }
.guest-counter__value {
    width: 3.5rem;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
}

.guest-names {
    margin-top: var(--space-2);
    display: grid;
    gap: 0.75rem;
}

/* Bild-Captcha ("Wer bellt?") */
.captcha {
    background: var(--color-cream-dim);
    border-radius: var(--radius);
    padding: var(--space-2);
}
.captcha__options {
    display: flex;
    gap: var(--space-2);
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.captcha__option {
    border: 2px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    width: 5.5rem;
    height: 5.5rem;
    background: #fff;
}
.captcha__option img { width: 100%; height: 100%; object-fit: cover; }
.captcha__option:hover { border-color: var(--color-gold); }
.captcha__option[aria-pressed="true"] { border-color: var(--color-bordeaux); }

.captcha__error {
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-bordeaux);
}

.form-message {
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    font-weight: 600;
}
.form-message--success { background: #e4efe1; color: #2f5233; }
.form-message--error { background: #f6e2df; color: #7c2a20; }


/* 12. TERMINE-LISTE ------------------------------------------------------------------ */

.termine-list {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.termin-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: var(--space-3);
    background: #fff;
    border: 1px solid #e7dcc4;
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    /* Startzustand: nur ausgeblendet, kein Versatz/Skalieren mehr -
       das "Ploppen" übernimmt jetzt allein das Vorschaubild (siehe unten) */
    opacity: 0;
}
.termin-card.is-visible {
    animation: termineCardFade 0.45s ease-out forwards;
}
@keyframes termineCardFade {
    to { opacity: 1; }
}

.termin-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

.termin-card__thumb {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-ink);

    /* Startzustand fürs Boing: unsichtbar klein, bis die Karte
       eingeblendet ist - dann ploppt es verzögert auf */
    transform: scale(0);
}
.termin-card.is-visible .termin-card__thumb {
    animation: thumbBounce 0.5s ease-out 0.25s both;
}
@keyframes thumbBounce {
    0%   { transform: scale(0); }
    55%  { transform: scale(1.18); }
    75%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

.termin-card__date-col {
    text-align: right;
}

.termin-card__date {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-bordeaux);
    font-size: 1.05rem;
    white-space: nowrap;
}
.termin-card__time {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.82rem;
    color: #7a6f5c;
}
.termin-card__time--closed {
    color: var(--color-bordeaux);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}
.show-ausgebucht-hinweis {
    font-weight: 700;
    color: var(--color-bordeaux);
    margin: 0;
}
.termin-card__weekday {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.82rem;
    color: #7a6f5c;
}

.termin-card__info { min-width: 0; }
.termin-card__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
}
.termin-card__artist {
    font-size: 0.88rem;
    color: #7a6f5c;
}

.termine-empty {
    text-align: center;
    padding: var(--space-6) 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: #8a7c62;
}

.back-to-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: var(--space-5) auto 0;
    padding: var(--space-2);
    border: 0;
    background: none;
    color: var(--color-gold);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.back-to-top__bar {
    width: 3.5rem;
    height: 2px;
    background: var(--color-gold);
}
.back-to-top__arrow {
    width: 1.4rem;
    height: 1.4rem;
}
.back-to-top:hover { color: var(--color-bordeaux); }


/* 13. SHOW-DETAILSEITE ------------------------------------------------------------------ */

.show-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--color-bordeaux);
    margin-bottom: var(--space-3);
}
.show-back-link:hover { text-decoration: underline; }

.show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid #e7dcc4;
}
.show-meta__item { }
.show-meta__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.show-meta__value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-ink);
}

.show-description {
    font-size: 1.08rem;
    max-width: 42rem;
    white-space: pre-line;
}

.show-artist-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-3);
    font-weight: 700;
    color: var(--color-bordeaux);
    border-bottom: 1px solid var(--color-bordeaux);
}
.show-artist-link:hover { color: var(--color-gold); border-color: var(--color-gold); }


/* 14. BILDERGALERIE-KARUSSELL ------------------------------------------------------------------ */

.gallery-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.gallery-viewport {
    position: relative;
    flex: 1;
    border-radius: var(--radius);
    overflow: hidden;
}

/* Das eigentliche Scrollen passiert auf dieser inneren Ebene, nicht mehr
   direkt am Viewport - dadurch bleibt die Vignette (siehe weiter unten,
   liegt auf .gallery-viewport) am sichtbaren Rand stehen, statt mit dem
   Bilderstreifen mitzuscrollen. Bei einem Element, das selbst scrollt,
   werden absolut positionierte Kind-Elemente nämlich relativ zur
   GESAMTEN scrollbaren Fläche einsortiert, nicht relativ zum sichtbaren
   Ausschnitt - genau das wollen wir für die Vignette vermeiden. */
.gallery-scroll {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gallery-scroll::-webkit-scrollbar {
    display: none;
}

.gallery-track {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* Luft links/rechts als echte (unsichtbare) Platzhalter-Elemente statt
   Padding - Padding am Ende eines scrollbaren Flex-Containers wird von
   manchen Browsern nicht zur scrollbaren Fläche gezählt, ein echtes
   Element dagegen zuverlässig schon. Muss zur Bildbreite passen: bei
   56% Bildbreite bleiben 44% übrig, also 22% pro Seite. */
.gallery-track::before,
.gallery-track::after {
    content: '';
    flex: 0 0 10%;
}

.gallery-slide {
    position: relative;
    flex: 0 0 auto;
    width: 56%;
    max-width: 40rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-ink);
    scroll-snap-align: center;
}
.gallery-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.gallery-slide__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.6rem 1.2rem 0.9rem;
    background: linear-gradient(to top, rgba(24,19,15,0.85), transparent);
    color: var(--color-cream);
    font-family: var(--font-script);
    font-size: 1.3rem;
}

/* Vignette: die angeschnittenen Nachbarbilder verdunkeln sich zum Rand hin,
   als würden sie im Schwarz verschwinden */
.gallery-viewport::before,
.gallery-viewport::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 18%;
    z-index: 2;
    pointer-events: none;
}
.gallery-viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--color-cream) 0%, transparent 100%);
}
.gallery-viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--color-cream) 0%, transparent 100%);
}

.gallery-arrow {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-gold);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.gallery-arrow:hover { background: var(--color-gold); }
.gallery-arrow svg { width: 1.2rem; height: 1.2rem; }
/* Wird per JavaScript ausgeblendet, wenn Anfang/Ende der Galerie
   erreicht ist - kein Rundherum-Sprung mehr, stattdessen einfach kein
   Pfeil mehr in die Richtung, in der nichts mehr kommt. */
.gallery-arrow[hidden] {
    visibility: hidden;
    opacity: 0;
}


/* 15. BEWERTUNGSBEREICH (Testimonials, unter dem Hero) ------------------------------------------------------------------ */

.testimonial-section {
    text-align: center;
}

.testimonial-box {
    max-width: 34rem;
    margin: 0 auto;
    min-height: 9.5rem; /* verhindert Layout-Sprung beim Wechsel zwischen kurzen/langen Zitaten */
    color: var(--color-cream);
}

.testimonial-box .star-row {
    justify-content: center;
}

.testimonial-box__text {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.testimonial-box__name {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--color-gold-light);
}


/* 16. STERNE-BEWERTUNG (Animation) ------------------------------------------------------------------ */
/* Angepasst nach einer Vorlage des Nutzers, ursprünglich für interaktive
   Eingabe gedacht - hier auf reine, automatische Anzeige umgebaut. */

.star-row {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.star {
    width: 1.5rem;
    height: 1.5rem;
    overflow: visible;
}
.star-ring {
    /* Sternförmiger "Geister-Puls": ploppt größer als der Zielstern auf
       und wird dabei transparent - statt eines dazu unpassenden runden
       Rings (wie in der ursprünglichen Vorlage) */
    fill: var(--color-gold-light);
    stroke: none;
    opacity: 0;
    transform: scale(1);
    transform-origin: center;
    transform-box: fill-box;
}
.star-fill {
    fill: var(--color-gold-light);
    transform: scale(0);
    transform-origin: center;
}
.star-stroke {
    /* Standard: dunkler, dezenter Umriss - passend für helle Flächen
       (Rezensionskarten, Bewertungsformular) */
    fill: none;
    stroke: rgba(24, 19, 15, 0.3);
    stroke-width: 2;
}
/* Im dunklen Bewertungsbereich (Startseite) muss der Umriss hell sein,
   sonst verschwindet er vor dem dunklen Hintergrund */
.testimonial-box .star-stroke {
    stroke: rgba(247, 240, 227, 0.4);
}
.star-line {
    stroke: var(--color-gold-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 12 13;
    stroke-dashoffset: -13;
}

/* Wird per JavaScript zeitversetzt gesetzt, sobald ein Stern "aufploppen" soll */
.star.is-active .star-ring {
    animation: starRing 0.7s ease-out forwards;
}
.star.is-active .star-fill {
    animation: starFill 0.8s ease-in-out forwards;
}
.star.is-active .star-stroke {
    animation: starStroke 0.8s ease-in-out forwards;
}
.star.is-active .star-line {
    animation: starLine 0.8s ease-in-out forwards;
}

@keyframes starRing {
    from   { opacity: 0.9; transform: scale(0.5); }
    60%    { opacity: 0.5; transform: scale(1.3); }
    to     { opacity: 0; transform: scale(1.9); }
}
@keyframes starFill {
    from, 40% { transform: scale(0); }
    60% { transform: scale(1.2); }
    80% { transform: scale(0.9); }
    to { transform: scale(1); }
}
@keyframes starStroke {
    from { opacity: 1; }
    20%, to { opacity: 0; }
}
@keyframes starLine {
    from, 40% { stroke-dasharray: 1 23; stroke-dashoffset: 1; }
    60%, to { stroke-dasharray: 12 13; stroke-dashoffset: -13; }
}

/* -- Alternative Anzeige-Animation (nur Startseite + Rezensionsliste) --
   Der "Geister-Stern" wächst aus der Mitte von 0% auf 115%. Von 0% bis
   55% Größe wächst er sichtbar auf (Transparenz folgt der Größe), von
   55% bis 100%-Größe (=115% Gesamtgröße) wird er wieder unsichtbar.
   Genau bei 55% (= 100% Größe, volle Deckkraft) "schaltet" der echte
   Stern von leer auf gefüllt um - der Geister-Stern liegt in dem Moment
   exakt darüber und verdeckt den Wechsel. */

.star-row .star.is-active .star-ring {
    animation: starRingPop 0.9s linear forwards;
}
.star-row .star.is-active .star-fill {
    transform: scale(1); /* keine eigene Wachstumsanimation mehr - das übernimmt der Geister-Stern */
    animation: starFillPop 0.9s linear forwards;
}
.star-row .star.is-active .star-stroke {
    animation: none; /* bleibt einfach durchgehend sichtbar, bis der Fill ihn abdeckt */
}

@keyframes starRingPop {
    0%   { transform: scale(0)    rotate(270deg) ;   opacity: 0; }
    40%  { transform: scale(1)    rotate(360deg) ; opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: scale(2)  rotate(400deg); opacity: 0; }
}
@keyframes starFillPop {
    0%, 54.9% { opacity: 0; }
    55%, 100% { opacity: 1; }
}

/* -- Interaktive Sterne-Eingabe (Bewertungsformular) ------------------- */
/* Gleiche SVG-Bausteine wie oben, aber klickbar. Angelehnt an eine
   Formular-Vorlage des Nutzers, hier auf unsere Farben umgestellt. */

.rating-input {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-3);
}
.rating-input legend {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding: 0;
}
.rating-input__stars {
    display: flex;
    gap: 0.3rem;
}
.rating-input__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.rating-input__label {
    cursor: pointer;
    padding: 0.15rem;
    display: block;
}
.rating-input__label .star {
    width: 2.1rem;
    height: 2.1rem;
}
.rating-input__radio:focus-visible + .rating-input__label {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Kurzer Hover-Hinweis auf dem einzelnen Stern unter dem Mauszeiger */
.rating-input__label:hover .star-fill {
    fill: var(--color-gold-light);
    transform: scale(1);
}

/* Endzustand nach Auswahl: Sterne 1 bis N gefüllt (funktioniert auch ohne JavaScript) */
.rating-input__radio:nth-of-type(1):checked ~ .rating-input__label:nth-of-type(-n+1) .star-fill,
.rating-input__radio:nth-of-type(2):checked ~ .rating-input__label:nth-of-type(-n+2) .star-fill,
.rating-input__radio:nth-of-type(3):checked ~ .rating-input__label:nth-of-type(-n+3) .star-fill,
.rating-input__radio:nth-of-type(4):checked ~ .rating-input__label:nth-of-type(-n+4) .star-fill,
.rating-input__radio:nth-of-type(5):checked ~ .rating-input__label:nth-of-type(-n+5) .star-fill {
    fill: var(--color-gold);
    transform: scale(1);
}


/* -- Rezensionsliste (Impressionen-Seite) ------------------------------ */

.reviews-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.review-card.is-paginated-hidden {
    display: none;
}

.review-card {
    background: #fff;
    border: 1px solid #e7dcc4;
    border-radius: var(--radius);
    padding: var(--space-3);
    box-shadow: var(--shadow-soft);
}

.review-card__text {
    font-style: italic;
    margin: 0.6rem 0;
}

.review-card__name {
    text-align: right;
    font-style: italic;
    color: #7a6f5c;
    margin: 0;
}


/* 17. SCROLL-REVEAL-ANIMATIONEN ------------------------------------------------------------------ */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* 18. UTILITIES ------------------------------------------------------------------ */

/* Fest positionierter Scroll-Hinweis unten rechts (z.B. Terminseite):
   erscheint, sobald der erste Termin sichtbar ist, verschwindet wieder,
   sobald das Ende der Liste erreicht ist (siehe initScrollHint() in
   main.js). Zwei übereinander liegende Chevrons, die "nicken": langsam
   runter, kurz halten, zackig hoch, zackig wieder runter - dazu ein
   Hell-Dunkel-Puls. */
.scroll-hint {
    position: fixed;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    pointer-events: none;
}
.scroll-hint.is-visible {
    opacity: 1;
    visibility: visible;
}
.scroll-hint__chevron {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: -0.5rem;
    animation: scrollHintNick 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.scroll-hint__chevron--2 {
    animation-delay: 0.12s;
}
@keyframes scrollHintNick {
    0%   { transform: translateY(0);   opacity: 0.55; }
    35%  { transform: translateY(7px); opacity: 1; }
    45%  { transform: translateY(7px); opacity: 1; }
    55%  { transform: translateY(-2px); opacity: 0.7; }
    65%  { transform: translateY(7px); opacity: 1; }
    100% { transform: translateY(0);   opacity: 0.55; }
}


.stack > * + * { margin-top: var(--space-3); }
.mt-0 { margin-top: 0; }


/* 19. RESPONSIVE ANPASSUNGEN ------------------------------------------------------------------ */

@media (max-width: 860px) {
    /* Weichzeichner-Effekt hinter der Navigation auf Mobilgeräten
       abschalten: In Kombination mit "position: sticky" verursacht
       backdrop-filter auf manchen mobilen Browsern (u.a. beobachtet bei
       Samsung Internet) Render-Fehler - ein Teil der Leiste wird an
       falscher Stelle gezeichnet, bleibt aber an der richtigen Stelle
       klickbar. Stattdessen einfach deckender machen. */
    .site-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(24, 19, 15, 0.97);
    }

    .site-nav__menu {
        position: fixed;
        top: var(--nav-height);
        right: var(--space-3);
        left: auto;
        min-width: 12rem;
        z-index: 100;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        background: var(--color-ink);
        border: 1px solid rgba(227, 194, 127, 0.2);
        border-radius: var(--radius);
        padding: 0.5rem;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s 0.3s;
    }
    .site-nav__menu.is-open {
        max-height: min(34rem, 80vh);
        overflow-y: auto;
        visibility: visible;
        opacity: 1;
        transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s;
    }
    .site-nav__link {
        display: block;
        padding: 1rem var(--space-3);
        text-align: right;
    }
    .site-nav__link::after { display: none; }
    .site-nav__dropdown-panel {
        position: static;
        transform: none;
        opacity: 1; visibility: visible;
        box-shadow: none;
        border: 0;
        background: rgba(0,0,0,0.2);
        display: none;
    }
    .site-nav__dropdown.is-open .site-nav__dropdown-panel { display: block; }
    .site-nav__burger { display: block; margin-left: auto; }

    .site-nav__dropdown { position: relative; }
    .site-nav__dropdown-toggle {
        display: block;
        position: absolute;
        width: 2.75rem;
        height: 2.75rem;
        top: 0; right: 0;
        margin: 0; padding: 0;
        background: none;
        border: 0;
        color: var(--color-cream);
        font-size: 1.1rem;
    }
    .site-nav__dropdown-toggle::after { content: '▾'; }
    .site-nav__dropdown.is-open .site-nav__dropdown-toggle::after { content: '▴'; }

    .termin-card {
        grid-template-columns: 4rem 1fr;
    }
    .termin-card__thumb { width: 4rem; height: 4rem; }
    .termin-card__date-col { grid-column: 1 / -1; order: 3; }

    .gallery-slide { width: 70%; }
    .gallery-track::before,
    .gallery-track::after { flex-basis: 15%; }
    .gallery-viewport::before,
    .gallery-viewport::after { width: 10%; }
}


/* 20. REDUCED MOTION ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Der Newsticker läuft bewusst IMMER weiter, auch bei "Bewegung
       reduzieren" - er transportiert die zentrale Information (nächster
       Termin) und läuft nur auf der Startseite. */
    .shimmer-heading { animation: none; background-position: 0 0; }
    .scroll-hint__chevron { animation: none; opacity: 0.85; transform: none; }
    .termin-card, .reveal {
        transition: none;
        animation: none;
        opacity: 1;
        transform: none;
    }
    .termin-card__thumb {
        animation: none;
        transform: scale(1);
    }
    .star.is-active .star-ring,
    .star.is-active .star-fill,
    .star.is-active .star-stroke,
    .star.is-active .star-line {
        animation: none;
    }
    .star.is-active .star-fill { transform: scale(1); }

    /* Die Anzeige-Sterne (Startseite/Rezensionsliste) nutzen eine eigene,
       spezifischere Animation (siehe Abschnitt 16, .star-row-Regeln) -
       die muss hier zusätzlich gezielt abgeschaltet werden, sonst würde
       sie die allgemeine Regel oben wegen höherer Spezifität überstimmen. */
    .star-row .star.is-active .star-ring,
    .star-row .star.is-active .star-fill {
        animation: none;
    }
    .star-row .star.is-active .star-fill {
        opacity: 1;
        transform: scale(1);
    }
    .star-row .star.is-active .star-ring {
        opacity: 0;
    }
}