/* Explain: Component styles for UI elements, animations, and buffet layouts. */
/* Konsistente, gut lesbare Auswahlfelder (Native Selects) */
select.form-input {
    color-scheme: dark;
    color: var(--text-color);
    background-color: var(--background-color);
}

select.form-input option {
    background-color: var(--surface-color);
    color: var(--text-color);
}

select.form-input option:checked {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* Platzhalter-Option (leere Auswahl) etwas dezenter */
select.form-input option[value=""] {
    color: var(--text-muted);
}

/* Weicher Kanten-Auslauf: Bilder verschmelzen mit dem (schwarzen) Hintergrund */
.img-fade {
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Sanfte Kamerafahrt (Ken Burns) auf dem Hero-Bild */
.hero-kenburns {
    animation: hero-kenburns 6s ease-in-out infinite alternate;
    will-change: transform;
    transform-origin: center center;
}

@keyframes hero-kenburns {
    0% {
        transform: scale(1.02) translate(0, 0);
    }
    100% {
        transform: scale(1.08) translate(-1%, -0.8%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-kenburns {
        animation: none;
        transform: scale(1.05);
    }
}

/* --- Bewegung & Animationen --- */

/* Sanftes Einblenden von oben (beim Laden) */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.animate-fade-up-delay-1 { animation-delay: 0.18s; }
.animate-fade-up-delay-2 { animation-delay: 0.36s; }

/* Hero-Schriftzug: startet gross und fliegt langsam auf die aktuelle Groesse zusammen */
@keyframes hero-fly-in {
    from {
        opacity: 0;
        transform: translateY(90px) scale(4.2);
        filter: blur(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
.hero-fly-in {
    animation: hero-fly-in 5.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: opacity, transform, filter;
}
.hero-fly-in-delay-1 { animation-delay: 0.28s; }
.hero-fly-in-delay-2 { animation-delay: 0.56s; }

/* Hero-Bild: sanftes, dezentes Heranzoomen beim Laden (reduzierter Zoom) */
@keyframes hero-intro {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
}
.hero-intro {
    animation: hero-intro 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hero-Bild ohne Zoom: sanftes Einblenden in Originalgroesse */
@keyframes hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hero-fade {
    animation: hero-fade 1.4s ease-out both;
}

/* Scroll-Reveal: Elemente gleiten beim Scrollen ins Bild */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* Navigations-Links: Unterstreichung wächst beim Hover */
.nav-link { position: relative; }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
}
.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Pulsierendes Leuchten für den Hero-Button */
@keyframes btn-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    50%      { box-shadow: 0 0 28px 3px rgba(255, 255, 255, 0.22); }
}
.btn-glow {
    animation: btn-glow 3.6s ease-in-out infinite;
}

/* Nach-oben-Button */
.to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease,
                background-color 0.3s ease, color 0.3s ease;
}
.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Fingerfood-Fotos: frei schwebende Bewegung ohne Rahmen – jedes Foto in eine andere Richtung */
@keyframes float-dir-1 {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(8px, -18px, 0) rotate(1.6deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes float-dir-2 {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(-16px, -8px, 0) rotate(-1.8deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes float-dir-3 {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(18px, 10px, 0) rotate(1.3deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes float-dir-4 {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(-10px, -20px, 0) rotate(-2.1deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes float-dir-5 {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(14px, -12px, 0) rotate(2deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
.float-dir-1 { animation: float-dir-1 6.4s ease-in-out infinite; will-change: transform; }
.float-dir-2 { animation: float-dir-2 7.2s ease-in-out infinite; will-change: transform; }
.float-dir-3 { animation: float-dir-3 6.8s ease-in-out infinite; will-change: transform; }
.float-dir-4 { animation: float-dir-4 7.6s ease-in-out infinite; will-change: transform; }
.float-dir-5 { animation: float-dir-5 7s ease-in-out infinite; will-change: transform; }

/* Fingerfood-Fotos: sanftes Atmen – werden langsam größer und kleiner */
@keyframes breathe-1 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@keyframes breathe-2 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes breathe-3 {
    0%, 100% { transform: scale(0.97); }
    50%      { transform: scale(1.07); }
}
@keyframes breathe-4 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes breathe-5 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.breathe-1 { animation: breathe-1 7s ease-in-out infinite; will-change: transform; }
.breathe-2 { animation: breathe-2 8.5s ease-in-out infinite; will-change: transform; }
.breathe-3 { animation: breathe-3 9s ease-in-out infinite; will-change: transform; }
.breathe-4 { animation: breathe-4 6.5s ease-in-out infinite; will-change: transform; }
.breathe-5 { animation: breathe-5 8s ease-in-out infinite; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .hero-fly-in,
    .hero-intro,
    .btn-glow,
    .float-dir-1,
    .float-dir-2,
    .float-dir-3,
    .float-dir-4,
    .float-dir-5,
    .breathe-1,
    .breathe-2,
    .breathe-3,
    .breathe-4,
    .breathe-5 {
        animation: none;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Buffet-Baustein Hero: einheitliches, ruhiges Schriftbild --- */
/* Menüfolge (auch aus dem Datenfeld "Inhalt" geladene Listen) und Preiszeilen
   werden zentriert, ohne Punkte und ohne Trennlinien dargestellt. */
.buffet-hero-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.buffet-hero-menu li {
    text-align: center;
    color: var(--text-color);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

/* Fester, gleichmäßiger Abstand zwischen allen Speisen: genau 3 Zeilen – unabhängig von Rand-Zusammenfall */
.buffet-hero-menu li + li {
    margin-top: 5.4em;
}

/* Einheitliche Menüfolge für ALLE Buffet-Bausteine.
   Der Abstand zwischen den Speisen beträgt einheitlich 3 Zeilen
   und kommt aus der Regel ".buffet-hero-menu li + li". */

.buffet-hero-menu li::marker {
    content: none;
}

@media (min-width: 768px) {
    .buffet-hero-menu li {
        font-size: 1.05rem;
    }
}

.buffet-hero-prices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.buffet-hero-prices p {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .buffet-hero-prices p {
        font-size: 1.05rem;
    }
}

/* --- Menüfolge mit Gängen (z. B. Regional Odenwald): Überschrift je Gang --- */
/* Gleicher Abstand zwischen den Speisen wie in allen anderen Buffet-Bausteinen */
.buffet-hero-menu ul.buffet-hero-menu-courses li + li {
    margin-top: 5.4em;
}

.buffet-hero-menu ul.buffet-hero-menu-courses li.buffet-hero-course {
    margin-top: 8.1em;
    color: var(--text-color);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.45em;
}

.buffet-hero-menu ul.buffet-hero-menu-courses li.buffet-hero-course + li {
    margin-top: 2.7em;
}

/* --- Inhalt im Buffet-Baustein-Hero (aus dem Datenfeld geladen) --- */
/* Zeilenumbrüche im Inhalt erzeugen denselben gleichmäßigen Abstand
   (3 Zeilen) zwischen den Speisen wie in den übrigen Menüs. */
.buffet-hero-summary {
    line-height: 1.8;
}

.buffet-hero-summary br,
.buffet-hero-menu br {
    display: block;
    height: 5.4em;
}

/* Aufeinanderfolgende Umbrüche zählen nur einmal */
.buffet-hero-summary br + br,
.buffet-hero-menu br + br {
    height: 0;
}

.buffet-hero-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.buffet-hero-summary li + li {
    margin-top: 5.4em;
}

/* Gleichmäßiger Abstand von zwei Zeilen zwischen allen Speisen im Hero –
   auch wenn die Einträge als <p>, <div>, <ul>/<li> oder als getrennte
   Listen im Datenfeld stehen (z. B. zwischen "Mandelkruste" und
   "Scheiben") und auch wenn sie tiefer verschachtelt sind. */
.buffet-hero-summary :is(p, div, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, table) + :is(p, div, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, table) {
    margin-top: 5.4em;
}

/* Spezieller Abstand für "Fingerfood mediterran": zwei sichtbare Leerzeilen zwischen jedem Satz */
.gap-2-lines .buffet-hero-summary li + li,
.gap-2-lines .buffet-hero-menu li + li {
    margin-top: 5.4em !important;
}
.gap-2-lines .buffet-hero-summary :is(p, div, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, table) + :is(p, div, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, table) {
    margin-top: 5.4em !important;
}
.gap-2-lines .buffet-hero-summary br,
.gap-2-lines .buffet-hero-menu br {
    height: 5.4em !important;
}

/* Leere Absätze/Blöcke (nur ein Umbruch) erzeugen keinen zusätzlichen
   Abstand – so bleibt der gleichmäßige Zwei-Zeilen-Rhythmus erhalten. */
.buffet-hero-summary p:empty,
.buffet-hero-summary p:has(> br:only-child),
.buffet-hero-summary div:empty,
.buffet-hero-summary div:has(> br:only-child) {
    display: none;
}

/* Ein Zeilenumbruch direkt am Ende eines Absatzes oder Blocks erzeugt keinen
   zusätzlichen Abstand. Dadurch bleibt zwischen zwei Speisen – z. B. zwischen
   "Kürbis Stampf" und "Dessert" – genau der gleichmäßige Abstand von zwei
   Zeilen erhalten und wird nicht durch den Umbruch auf vier Zeilen verdoppelt. */
.buffet-hero-summary :is(p, div, li, blockquote) > br:last-child,
.buffet-hero-menu :is(p, div, li, blockquote) > br:last-child {
    display: none;
}

/* --- Nachträglich eingefügte Zeilen im Buffet-Baustein-Hero (z. B. Kalkulation & Preise) --- */
.buffet-hero-inserted-prices p {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.8;
    text-align: center;
}

.buffet-hero-inserted-prices p + p {
    margin-top: 5.4em;
}

@media (min-width: 768px) {
    .buffet-hero-inserted-prices p {
        font-size: 1.05rem;
    }
}

/* --- Schrift über bewegtem Video: kräftiger, mehrstufiger Textschatten --- */
.video-text-shadow {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.95),
        0 2px 12px rgba(0, 0, 0, 0.88),
        0 0 30px rgba(0, 0, 0, 0.65);
}

.video-text-shadow-strong {
    text-shadow:
        0 2px 5px rgba(0, 0, 0, 1),
        0 4px 18px rgba(0, 0, 0, 0.92),
        0 0 44px rgba(0, 0, 0, 0.75);
}