/* =====================================================================
   Mystery Evening — gemeinsame Design-Ebene (Feinschliff + Hero)
   Wird NACH dem seiteneigenen <style> eingebunden und wertet die
   bestehende viktorianische Gestaltung konsistent auf.
   Selbst gehostete Schriften (DSGVO-konform, kein externer Request).
   ===================================================================== */
@import url('../fonts/fonts.css');

/* ---------- Typografie: Cinzel für Überschriften, EB Garamond für Text ---------- */
body {
    font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.step-title, .section-header h2 {
    font-family: 'Cinzel', Georgia, serif;
}

/* Kursive Taglines/Untertitel wirken in Garamond eleganter */
.tagline, .subtitle, .section-header p, .hero__tagline {
    font-family: 'EB Garamond', Georgia, serif;
}

/* Inhalt stets über der Hintergrund-Ebene */
.container, .hero, header, footer, main {
    position: relative;
    z-index: 1;
}

/* ---------- Hintergrund-Textur + Vignette (vereinheitlicht alle Seiten) ---------- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    /* Dunkler Schleier über der Textur — hält das Damast-Muster dezent und den Text lesbar */
    background:
        linear-gradient(rgba(13, 11, 9, 0.58), rgba(13, 11, 9, 0.58)),
        url('../bg.jpg') center center / cover no-repeat fixed;
    pointer-events: none;
    z-index: 0;
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 5%, rgba(0, 0, 0, 0.99) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Zierrahmen (falls die Seite ihn nicht selbst definiert) ---------- */
.page-border {
    position: fixed;
    inset: 0;
    border: 3px solid #D4A855;
    pointer-events: none;
    z-index: 1000;
}
.page-border::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(212, 168, 85, 0.4);
}
.corner {
    position: fixed;
    width: 60px;
    height: 60px;
    z-index: 1001;
    background: url('../border_corner.png') no-repeat center center;
    background-size: contain;
}
.corner-tl { top: 8px; left: 8px; transform: rotate(0deg); }
.corner-tr { top: 8px; right: 8px; transform: rotate(90deg); }
.corner-bl { bottom: 8px; left: 8px; transform: rotate(-90deg); }
.corner-br { bottom: 8px; right: 8px; transform: rotate(180deg); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    border-bottom: 2px solid #D4A855;
    background:
        linear-gradient(180deg,
            rgba(13, 11, 9, 0.55) 0%,
            rgba(13, 11, 9, 0.72) 55%,
            rgba(13, 11, 9, 0.97) 100%),
        url('../hero.jpg') center 32% / cover no-repeat;
}

/* Sanfter Goldschimmer am oberen Rand */
.hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 85, 0.8), transparent);
    z-index: 3;
}

/* Kleines Zier-Rhombus mittig am unteren Rand (statt der eckigen Kerbe) */
.hero::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #D4A855;
    z-index: 3;
    box-shadow: 0 0 12px rgba(212, 168, 85, 0.6);
}

.hero > * {
    position: relative;
    z-index: 2;
}

.hero--home {
    padding: clamp(64px, 12vh, 128px) 20px clamp(48px, 8vh, 80px);
}

.hero--slim {
    padding: clamp(48px, 9vh, 90px) 20px clamp(32px, 5vh, 56px);
}

.hero--home h1 {
    font-size: clamp(2.1em, 6vw, 3.8em);
}

.hero--slim h1 {
    font-size: clamp(1.8em, 5vw, 2.8em);
}

/* Einblend-Animation der Hero-Inhalte */
.hero .logo,
.hero h1,
.hero .tagline,
.hero .subtitle,
.hero .divider,
.hero .cta-section,
.hero .back-link,
.hero .hero-scroll {
    opacity: 0;
    animation: heroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .back-link { animation-delay: 0.05s; }
.hero .logo { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.25s; }
.hero .tagline,
.hero .subtitle { animation-delay: 0.4s; }
.hero .divider { animation-delay: 0.5s; }
.hero .cta-section { animation-delay: 0.6s; }
.hero .hero-scroll { animation-delay: 0.9s; }

@keyframes heroIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero .logo {
    animation-name: heroLogoIn;
}
@keyframes heroLogoIn {
    from { opacity: 0; transform: translateY(22px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dezenter Schwebe-Effekt des Logos nach dem Einblenden */
@media (prefers-reduced-motion: no-preference) {
    .hero .logo {
        will-change: transform;
    }
}

/* Scroll-Hinweis unter dem Home-Hero */
.hero-scroll {
    margin-top: 34px;
    color: #D4A855;
    text-decoration: none;
    font-size: 1.6em;
    line-height: 1;
    display: inline-block;
    animation: heroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards, bob 2.2s ease-in-out 1.4s infinite;
}
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ---------- Feinschliff: Karten & interaktive Flächen ---------- */
.card,
.game-mode,
.feature,
.basic-card,
.overview-card,
.occasion,
.krimi-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Blur hinter Karten — hält Text auch vor der Textur klar lesbar */
.card, .game-mode, .feature, .basic-card, .overview-card, .occasion, .krimi-card {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.card:hover,
.game-mode:hover,
.feature:hover,
.basic-card:hover,
.overview-card:hover,
.occasion:hover,
.krimi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 168, 85, 0.5);
    border-color: rgba(212, 168, 85, 0.85);
}

/* ---------- Buttons ---------- */
.btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    position: relative;
}
.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 26px rgba(212, 168, 85, 0.35);
}
.btn:active {
    transform: translateY(0);
}

/* ---------- Section-Header: kleine Zierlinie unter dem Titel ---------- */
.section-header h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
}
.section-header h2::after {
    content: '✦';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    font-size: 0.55em;
    color: rgba(212, 168, 85, 0.7);
    -webkit-text-fill-color: rgba(212, 168, 85, 0.7);
}

/* ---------- Scroll-Reveal (per reveal.js aktiviert) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Barrierefreiheit: Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero .logo,
    .hero h1,
    .hero .tagline,
    .hero .divider,
    .hero .cta-section,
    .hero .back-link,
    .hero .subtitle,
    .hero-scroll { opacity: 1; animation: none; }
    .card:hover, .game-mode:hover, .feature:hover,
    .basic-card:hover, .overview-card:hover,
    .occasion:hover, .krimi-card:hover { transform: none; }
}

/* ---------- Feinschliff Mobile ---------- */
@media (max-width: 768px) {
    body { font-size: 1rem; }
    .hero { background-position: center 40%; }
}