/* ==========================================================================
   site-v3.css — gemeinsame Bausteine im Stil der neuen Eventseiten (26.09.2026)
   Gilt fuer die ganze Website ab 769px. Unter 768px gehoert alles mobil-neu.css.
   Was hier steht: Knoepfe, Kopfzeile, Event-Karten, Preis-/Saison-Badges,
   Klebelasche. Alles andere (Layout je Seitentyp) kommt in Schritt 3.
   Regeln stehen absichtlich mit !important — sie sollen die Sonderfaelle in
   style.min.css (26 verschiedene .btn-Regeln) sauber ueberstimmen.
   ========================================================================== */
@media (min-width: 769px) {

/* --- Knoepfe: EIN System ------------------------------------------------
   Hauptaktion orange, Nebenaktion Rahmen in Umfeldfarbe, gleiche Hoehe/
   Rundung/Schrift, Hover nur eine Nuance, kein Springen, kein Farbwechsel
   im Text. */
.btn,
.nav .btn-primary,
.newsletter-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px !important;
    border: 2px solid transparent;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    transform: none !important;
    box-shadow: none !important;
    width: auto !important;
    margin: 0;
    white-space: nowrap;
}
.btn-large { height: 52px; padding: 0 30px !important; font-size: 1.05rem !important; }
.btn-small, .btn-sm { height: 40px; padding: 0 18px !important; font-size: .92rem !important; }
.nav .btn-primary { height: 42px; padding: 0 20px !important; font-size: .95rem !important; }

.btn-primary, .btn-accent, .newsletter-submit {
    background: #FF9933 !important; border-color: #FF9933 !important; color: #fff !important;
}
.btn-primary:hover, .btn-accent:hover, .newsletter-submit:hover {
    background: #F08A1F !important; border-color: #F08A1F !important; color: #fff !important;
}
.btn-secondary {
    background: #2D5A5C !important; border-color: #2D5A5C !important; color: #fff !important;
}
.btn-secondary:hover { background: #244A4C !important; border-color: #244A4C !important; color: #fff !important; }
.btn-outline {
    background: transparent !important; border-color: #2D5A5C !important; color: #2D5A5C !important;
}
.btn-outline:hover { background: rgba(45, 90, 92, .10) !important; color: #2D5A5C !important; }

/* Auf dunklem Grund: Nebenaktion weiss umrandet. Erkannt an den Sektionen,
   die selbst dunkel sind (Farbverlaeufe, Footer, Hero, Weihnachtskarte). */
[style*="gradient"] .btn-outline, [style*="gradient"] .btn-secondary,
.footer .btn-outline, .footer .btn-secondary,
.mag-hero .btn-outline, .hero .btn-outline, .hero .btn-secondary,
.xmas-snow .btn-outline, .xmas-cta .btn-outline, .xh .btn-outline {
    background: transparent !important; border-color: rgba(255, 255, 255, .85) !important; color: #fff !important;
}
[style*="gradient"] .btn-outline:hover, [style*="gradient"] .btn-secondary:hover,
.footer .btn-outline:hover, .footer .btn-secondary:hover,
.mag-hero .btn-outline:hover, .hero .btn-outline:hover, .hero .btn-secondary:hover,
.xmas-snow .btn-outline:hover, .xmas-cta .btn-outline:hover, .xh .btn-outline:hover {
    background: rgba(255, 255, 255, .14) !important; color: #fff !important;
}
/* Google-Bewerten-Knopf im Footer bleibt weiss mit dunkler Schrift */
.footer .footer-review-btn { background: #fff !important; border-color: #fff !important; color: #1a3a3c !important; }
.footer .footer-review-btn:hover { background: #F3F4F6 !important; border-color: #F3F4F6 !important; }

/* Telefonnummer im Titelbild: Text mit Hoerer statt zweitem Knopf */
.mag-hero-cta a[href^="tel:"], .hero-cta a[href^="tel:"] {
    background: transparent !important; border: 0 !important; color: #fff !important;
    padding: 0 4px !important; font-weight: 600; text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.mag-hero-cta a[href^="tel:"]::before, .hero-cta a[href^="tel:"]::before {
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mag-hero-cta a[href^="tel:"]:hover, .hero-cta a[href^="tel:"]:hover { color: #FF9933 !important; }
/* Telefonnummer in der Kopfzeile: nur Orange beim Hover, kein grauer Kasten */
.nav .nav-link[href^="tel:"] { background: transparent !important; transition: color .18s ease; }
.nav .nav-link[href^="tel:"]:hover { background: transparent !important; color: #FF9933 !important; }

/* --- Kopfzeile: wie auf den Eventseiten ------------------------------- */
.header-content { padding: 4px 0 !important; }
.logo { height: 68px !important; max-width: 220px !important; }

/* --- Klebelasche rechts: weg (Anfrage steht in Kopfzeile und Titelbild) -- */
.sticky-cta-tab:not(.sticky-cta-bottombar) { display: none !important; }

/* --- Event-Karten ------------------------------------------------------- */
.card { border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important; }
a.card:hover, .card:has(a):hover { transform: none !important; box-shadow: 0 10px 28px rgba(26, 43, 60, .14) !important; }
.card .card-image { transition: transform .5s ease; }
a.card:hover .card-image, .card:has(a):hover .card-image { transform: scale(1.03); }
.card > div[style*="position: relative"], .card > div[style*="position:relative"] { overflow: hidden; }
.card-title { font-family: 'Montserrat', sans-serif; font-weight: 700; }
/* Preis-Badge: weisse Pille mit dunkler Schrift statt Blau; Saison-Badge bleibt orange */
.price-badge, .price-badge-city {
    background: rgba(255, 255, 255, .94) !important; color: #1a2b3c !important;
    padding: 6px 12px !important; border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif; font-weight: 700 !important; font-size: .92rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
}
.seasonal-badge {
    background: #FF9933 !important; color: #fff !important;
    padding: 6px 12px !important; border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif; font-weight: 700 !important; font-size: .82rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
}
/* Karten-Meta: Emoji werden per site-v3.js durch Linien-Icons ersetzt */
.card-meta-item .cm-ico { width: 16px; height: 16px; color: #2D5A5C; flex: 0 0 16px; }
.card-meta-item .cm-ico svg { width: 16px; height: 16px; display: block; }

} /* /min-width 769 */