/* ==========================================================================
   SEASIDE CAPITAL - CUSTOM STYLES
   Alle eigenen Anpassungen, die das Standard-Template überschreiben
   ========================================================================== */


/* ==========================================================================
   GLOBALE SCHRIFTART FÜR DIE GESAMTE WEBSITE
   ========================================================================== */

/* Fließtext, Links und allgemeine Container */
body, p, a, span, div, li, input, button {
    /* Ändere 'Outfit' hier zu 'Poppins', 'Nunito' etc., falls dir eine andere besser gefiel */
    font-family: 'Outfit', sans-serif !important; 
}

/* Alle Überschriften */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4 {
    font-family: 'Outfit', sans-serif !important;
}

   /* --- ABSTANDSHALTER --- */
.abstandshalter {
    height: 50px; /* Hier die gewünschte Höhe eintragen */
    width: 100%;
}

/* --- RECENT PROJECTS SLIDER (Swiper Pagination Overrides) --- */
.hero-portfolio-slider .swiper-pagination { 
    background: transparent !important; 
    border-radius: 0 !important;
    padding: 10px 0;
}

.hero-portfolio-slider .swiper-pagination-bullet { 
    background-color: #000000 !important; 
    opacity: 0.3 !important; 
}

.hero-portfolio-slider .swiper-pagination-bullet-active { 
    background-color: #000000 !important;
    opacity: 1 !important; 
}

/* --- LATEST NEWS / BLOG CARDS (DARK MODE OVERRIDE) --- */
body.bg-dark .blog-card {
    background-color: #222224 !important;
    border-color: #1e293b !important;
    border-style: solid !important;
    border-width: 1px !important;
}
/* --- MAIN HEADER (SEASIDE BLUE) --- */
.header.header-color-dark {
    background-color: #222224 !important;
}
/* --- NEWS & PRICE TICKER --- */

.ticker-trennband {
    background-color: #0a0a0a;
    border-top: 1px solid #1a1a1a;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: block;
}

/* Das untere Band bekommt nur einen unteren Rand */
.news-ticker {
    border-bottom: 1px solid #1a1a1a;
    padding: 8px 0; /* Etwas schmaler als das obere */
}

.price-ticker {
    padding: 12px 0;
}

/* --- CSS FIX FÜR RETRO SCHRIFT --- */
.oldskool-ticker {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}

/* Zwingt alle Texte und Links im Ticker strikt zur Retro-Schrift */
.oldskool-ticker,
.oldskool-ticker a,
.oldskool-ticker span {
    font-family: 'Courier New', Courier, monospace !important;
    text-transform: uppercase !important;
    font-weight: normal !important;
}

/* Geschwindigkeiten */
/* Kleinere Sekundenzahl = schneller. Faustregel: halbieren = doppeltes Tempo. */
.ticker-speed-fast {
    animation: ticker-scroll 120s linear infinite;
    color: #2dd4bf;
    font-size: 1.1rem;
}

.ticker-speed-slow {
    animation: ticker-scroll 180s linear infinite; /* etwas ruhiger als Band 1 */
    color: #14b8a6; /* Etwas dunkleres Türkis */
    font-size: 0.9rem;
    opacity: 0.8;
}

.ticker-item {
    display: inline-flex;      /* Hält Name und Preis in einer Zeile zusammen */
    align-items: center;       /* Zentriert die Schrift vertikal */
    padding: 0 3rem;
    white-space: nowrap;       /* Doppelter Schutz gegen Umbrüche im Text */
}

/* News-spezifisches Styling */
.news-tag {
    color: #f59e0b; /* Bernstein/Orange für "BREAKING" oder "NEWS" */
    margin-right: 10px;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Zweites Laufband läuft in die Gegenrichtung */
@keyframes ticker-scroll-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Muss nach den Speed-Klassen stehen, damit der animation-name überschrieben wird */
.ticker-reverse {
    animation-name: ticker-scroll-reverse;
}

/* Zwei gestapelte Bänder: dünne Trennlinie dazwischen */
.news-ticker + .news-ticker {
    border-top: 1px solid #1a1a1a;
}

/* Ticker anhalten, wenn der Nutzer darüber ist – erleichtert das Anklicken */
.ticker-trennband:hover .oldskool-ticker {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .oldskool-ticker {
        animation: none !important;
    }
}

.ticker-up { color: #00ff00; text-shadow: 0 0 5px rgba(0,255,0,0.5); }
.ticker-down { color: #ff3333; text-shadow: 0 0 5px rgba(255,51,51,0.5); }
.ticker-neutral { color: #aaaaaa; }

/* --- EVENT-KÄSTCHEN (Glassmorphism) --- */
.event-card-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card-glass:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
    border-color: rgba(45, 212, 191, 0.55);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px rgba(45, 212, 191, 0.15);
}

.event-card-date {
    color: #2dd4bf;
    letter-spacing: 0.5px;
}

/* ===========================================================
   Projekt-Mega-Menü (Evolution)
   =========================================================== */

.mega-menu-projects {
    background: #111827 !important;
    border: 1px solid #1e293b;
    border-radius: 10px !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65) !important;
}

.mega-menu-projects .mega-menu-heading {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #64748b;
    margin: 0.35rem 0 0.9rem 0.35rem;
}

.mega-menu-projects .mega-card {
    display: block;
    height: 100%;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mega-menu-projects .mega-card:hover,
.mega-menu-projects .mega-card:focus {
    background: rgba(45, 212, 191, 0.06);
    border-color: rgba(45, 212, 191, 0.45);
    transform: translateY(-2px);
}

.mega-menu-projects .mega-card-img {
    display: block;
    width: 100%;
    max-width: 190px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #1e293b;
    margin: 0 0 0.55rem;
}

.mega-menu-projects .mega-card-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0 0 0.5rem;
}

.mega-menu-projects .mega-card:hover .mega-card-title {
    color: #2dd4bf !important;
}

.mega-menu-projects .mega-card-text {
    display: block;
    font-size: 0.79rem;
    line-height: 1.5;
    color: #94a3b8 !important;
    margin: 0;
}

/* Desktop: schmaler und rechtsbündig statt volle Breite */
@media (min-width: 992px) {
    .header .header-menu .nav .nav-item .mega-menu-content.mega-menu-projects {
        right: 0;
        left: auto;
        width: 700px;
        max-width: calc(100vw - 4em);
        padding: 1rem 1.15rem 1.2rem;
    }
}

/* Mobile: kompakter, Bild kleiner */
@media (max-width: 991.98px) {
    .mega-menu-projects {
        border: none;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0.5rem 0 0 !important;
    }
    .mega-menu-projects .mega-menu-heading {
        display: none;
    }
    .mega-menu-projects .mega-card {
        padding: 0.5rem 0;
    }
    .mega-menu-projects .mega-card-img {
        max-width: 140px;
    }
}