/* =====================================================================
   termine.css — Minimale Ergaenzungen fuer /termine/.
   Die Seite nutzt das bestehende Design-System aus sub-pages.css
   (.bf-section, .bf-location-grid, .bf-location-card, .bf-loc-type,
   .bf-cta, .social-proof-bar, .city-showreel-intro, .yt-facade).
   Hier nur: Hero-Video, Datum-Hervorhebung, Video-Grid, Instagram-Grid.
   Erstellt 2026-06-19, on-brand Rebuild.
   ===================================================================== */

/* ---- HERO 1:1 mit den Landingpages (#hero-Stil): 40vh/max380, Eyebrow Open Sans 13px/800/uppercase, Chevron ---- */
#tm-top { position: relative; min-height: 40vh; max-height: 380px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0f1923; }
#tm-top .hero-poster, #tm-top .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#tm-top .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,25,35,.55) 0%, rgba(15,25,35,.35) 40%, rgba(15,25,35,.66) 100%); }
#tm-top .hero-content { position: relative; z-index: 2; text-align: center; max-width: 1180px; padding: 0 24px; }
/* Eyebrow 1:1 wie Standard-Hero (firmenfeiern): Open Sans 13px/800/uppercase. !important nötig,
   weil termine im Head einen inline .hero-eyebrow{Be-Vietnam clamp !important}-Override hat. */
#tm-top .hero-eyebrow { font-family: 'Open Sans', sans-serif !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--gold) !important; margin: 0 0 16px; }
#tm-top h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.75rem, 4.4vw, 3.75rem); line-height: 1.25; color: #fff; margin: 0 0 10px; text-wrap: balance; }
#tm-top .scroll-indicator { display: flex !important; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,.6); }

/* ---- Counter-Leiste 1:1 im OE-Stil: schlanker schwarzer Strip, inline ---- */
#tm-stats { background: #000 !important; padding: 0 !important; border-top: none !important; }
#tm-stats .proof-grid { display: flex; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
#tm-stats .proof-item { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px; padding: 18px 10px; border-left: 1px solid rgba(255,255,255,.12); }
#tm-stats .proof-item:first-child { border-left: none; }
#tm-stats .proof-icon { display: inline-flex; width: 17px; height: 17px; color: var(--gold); flex: none; margin: 0; }
#tm-stats .proof-icon svg { width: 17px; height: 17px; }
#tm-stats .proof-number { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
#tm-stats .proof-number::before { display: none !important; }
#tm-stats .proof-label { font-size: .69rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0; }
@media (max-width: 600px) {
  #tm-stats .proof-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  #tm-stats .proof-item { flex: none; border-left: none; padding: 14px 8px; }
}

/* Datum-Hervorhebung in den Location-Cards */
.bf-location-card .tm-date {
  font-family: var(--font-head); font-weight: 800; color: var(--teal-accessible);
}
/* Karten-Rhythmus: KEIN min-height-Reserve mehr — verursachte sichtbaren Dead-Space zwischen
   1-zeiligem Titel und Datum (sah lose/unedel aus). Titel jetzt natürlich, Datum sitzt direkt drunter. */
#custom-blog-termine .bf-location-card { justify-content: flex-start; }
#custom-blog-termine .bf-location-card h4 { margin: 0; }
/* Ort als eigene, ausgerichtete Zeile */
#custom-blog-termine .tm-where { color: #5d636e; font-size: .92rem; margin: 0; }

/* Klickbare Event-Karten (Infos/Tickets) — Eck-Badge ohne Hoehen-Aenderung */
#custom-blog-termine .bf-location-card { position: relative; }
#custom-blog-termine a.tm-link { text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
#custom-blog-termine a.tm-link:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.09); }
#custom-blog-termine .tm-go { position: absolute; top: 18px; right: 16px; font-size: .74rem; font-weight: 700; color: var(--teal-accessible, #2A6772); white-space: nowrap; }
#custom-blog-termine .tm-go--ticket { top: 13px; right: 13px; background: #f7eed8; color: #6f5210; padding: 4px 11px; border-radius: 50px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }

/* Content-Window: Fliesstext + Headlines in lesbarer Spalte halten.
   Die Karten-/Video-/IG-Grids bleiben content-wide (1200px). */
#custom-blog-termine > section > h2 { max-width: 860px; }
#custom-blog-termine > section > p { max-width: 900px; }

/* Anker-Sprung nicht hinter der fixen Navbar (inkl. #kontakt für CTA-Pille/Banner) */
#termine, #schiff, #rueckblick, #kontakt { scroll-margin-top: 90px; }

/* Breadcrumb-Separatoren werden bereits vom inline-Head-CSS gestylt (.ma-breadcrumbs .separator, !important) */

#custom-blog-termine p.tm-note { max-width: 760px; margin: 24px auto 0; text-align: center; color: #5d636e; font-size: .92rem; }

/* Detail-Zeile in den Termin-Cards (Infos aus Booking) */
.bf-location-card .tm-detail { color: #5d636e; font-size: .9rem; margin-top: 4px; }

/* Schiff-Cards: Boot-Marker + maritimer Akzent */
.bf-location-card.tm-ship { border-top: 3px solid var(--teal); }
.bf-loc-type.tm-ship-pill { display: inline-flex; align-items: center; gap: 6px; }
.bf-loc-type.tm-ship-pill svg { width: 15px; height: 15px; flex: none; }
.tm-ship .tm-route { color: #5d636e; font-size: .88rem; margin-top: 4px; }

/* "Special Act auf der" + echtes TUI-Mein-Schiff-Logo (Wikimedia PD-textlogo, Markennutzung
   von Mitchy freigegeben 22.06.2026; M&A treten als Special Act auf, NICHT als feste Bordband).
   Logo via <img> = kein SVG-Script-Risiko. */
.tm-cruise-brand { display: flex; flex-direction: column; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin: 30px auto 28px; background: #fff; border-radius: 16px; padding: 14px 30px; box-shadow: 0 8px 24px rgba(15,25,35,.12); }
.tm-cruise-sub { font-family: 'Open Sans', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5d636e; }
.tm-cruise-logo { display: block; height: 32px; width: auto; max-width: 100%; }
@media (max-width: 480px) { .tm-cruise-brand { padding: 12px 22px; } .tm-cruise-logo { height: 27px; } }

/* ---- Sektions-Spacing (kompakt & einheitlich) + alternierende Hintergruende ----
   bf-cta ist ausgenommen (behaelt dunklen Banner + eigenes Padding). */
#custom-blog-termine > section:not(.bf-cta) {
  padding-top: clamp(36px, 3.4vw, 48px) !important;
  padding-bottom: clamp(36px, 3.4vw, 48px) !important;
}
#custom-blog-termine > section:first-child { padding-top: clamp(24px, 3vw, 36px) !important; }
/* Alternierende Sektions-Hintergruende (sichtbar, on-brand).
   2 IDs (#main #custom-blog-termine) noetig, um sub-pages.min.css '#main [id^=custom-blog] > section.bf-section-wide{background:transparent!important}' (1,2,1) zu schlagen. */
#main #custom-blog-termine > section.tm-sec-cream { background: var(--cream) !important; }
#main #custom-blog-termine > section.tm-sec-teal  { background: linear-gradient(135deg, var(--teal-light) 0%, #dff0ee 30%, rgba(200,150,45,0.06) 100%) !important; }
#main #custom-blog-termine > section.tm-sec-beige { background: var(--gray-bg) !important; }
@media (max-width: 600px) {
  #custom-blog-termine > section:not(.bf-cta) { padding-top: 36px !important; padding-bottom: 36px !important; }
  #custom-blog-termine > section:first-child { padding-top: 24px !important; }
}
/* Rückblick: Robbie-Karte hat einen Link-Titel (<a href="/robbiewilliams/">). Die globale
   Tap-Target-Regel (a{padding:12px;min-height:44px}) blähte ihn auf -> hier neutralisieren,
   damit die Robbie-Karte denselben Titel-Rhythmus wie alle anderen Karten hat. */
#rueckblick .bf-location-card h4 a { padding: 0; min-height: 0; display: inline; line-height: inherit; color: inherit !important; text-decoration: none !important; }
#rueckblick .bf-location-card h4 a:hover { color: var(--teal-accessible) !important; }

/* Kommende-Karten: aufgeräumter Innen-Rhythmus.
   Kein min-height-Dead-Space mehr (Datum saß bei 1-zeiligen Titeln zu tief) ->
   Datum sitzt direkt unter dem Titel; Datum/Ort/Detail bilden einen ruhigen Meta-Block.
   Nur #termine (Schiff-/Rückblick-Karten unberührt). Steht NACH den #custom-blog-termine-Regeln = gewinnt. */
#termine .bf-location-card { gap: 0; }
#termine .bf-location-card .bf-loc-type { margin: 0 0 13px; }
#termine .bf-location-card h4 { min-height: 0; margin: 0 0 11px; }
#termine .bf-location-card h4 + p { margin: 0 0 5px; }   /* Datum -> Ort (Meta-Block eng) */
#termine .bf-location-card .tm-where { margin: 0 0 4px; } /* Ort -> Detail */
#termine .bf-location-card .tm-detail { margin: 0; }

/* Mobile (≤480px): Eyebrow-Laufweite an den Standard-Hero angleichen (0.5px statt 4px). */
@media (max-width: 480px) {
  #tm-top .hero-eyebrow { letter-spacing: 0.5px !important; }
}