/**
 * Eckelt Business Talk 2026 — Custom Styles über Eventia Pro
 *
 * Wird NACH main.css geladen → überschreibt Eventia-Defaults.
 * Karten-Optik aus bt2026-einladung-01.jpg / -02.jpg.
 *
 * @since 2026-05-07
 */

/* ===== Schriften — Geogrotesque für Headlines (Kunden-Vorgabe) ===== */
@font-face {
  font-family: 'Geogrotesque';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Geogrotesque-Regular.woff2') format('woff2'),
       url('../fonts/Geogrotesque-Regular.woff')  format('woff');
}
@font-face {
  font-family: 'Geogrotesque';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Geogrotesque-SemiBold.woff2') format('woff2'),
       url('../fonts/Geogrotesque-SemiBold.woff')  format('woff');
}

/* Slab-Variante für Akzent-Headlines (Hero-Tagline, Hero-Meta) */
@font-face {
  font-family: 'Geogrotesque Slab';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/GeogrotesqueSlab-SmBd.woff2') format('woff2'),
       url('../fonts/GeogrotesqueSlab-SmBd.woff')  format('woff');
}

/* Kunden-Klassik-Aliase aus register_templ.css — falls alte CSS-Snippets übernommen werden */
@font-face {
  font-family: 'Geogrotesque Rg';
  font-display: swap;
  src: url('../fonts/Geogrotesque-Regular.woff2') format('woff2'),
       url('../fonts/Geogrotesque-Regular.woff')  format('woff');
}
@font-face {
  font-family: 'Geogrotesque SmBd';
  font-display: swap;
  src: url('../fonts/Geogrotesque-SemiBold.woff2') format('woff2'),
       url('../fonts/Geogrotesque-SemiBold.woff')  format('woff');
}
@font-face {
  font-family: 'Geogrotesque Slab SmBd';
  font-display: swap;
  src: url('../fonts/GeogrotesqueSlab-SmBd.woff2') format('woff2'),
       url('../fonts/GeogrotesqueSlab-SmBd.woff')  format('woff');
}

/* Globale Heading-Familie — !important damit Eventia-Defaults sicher überschrieben werden */
h1, h2, h3, h4, h5, h6,
.heading,
.section-title h2,
#main-header .sitename,
#footer h2, #footer h4 {
  font-family: 'Geogrotesque', 'Kanit', sans-serif !important;
}

/* ===== Farb-Variablen aus der Karte ===== */
:root {
  --bt-petrol-dunkel: #1D7373;
  --bt-petrol-tief:   #073A40;
  --bt-tuerkis:       #5EBFAD;
  --bt-tuerkis-mid:   #378C84;
  --bt-gelb:          #F2E749;
  --bt-gelb-warm:     #F2D649;
  --bt-schwarz:       #040D05;
  --bt-grau:          #B4BBBF;
}

/* ===== Eventia-Override ===== */
body {
  background: var(--bt-petrol-tief);
  color: #fff;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-size: 18px; /* Fließtext-Default (Tanja-Vorgabe 15.05.) */
  line-height: 1.6;
}
p { font-size: inherit; }
.section { background: var(--bt-petrol-tief); color: #fff; }
.section.dark-background { background: var(--bt-petrol-dunkel); color: #fff; }
.section.light-background { background: var(--bt-petrol-tief); color: #fff; }

/* Helle Section-Variante (weißer BG, schwarzer Text, Petrol-Headline) */
.section.light { background: #fff; color: var(--bt-schwarz); }
.section.light h1, .section.light h2, .section.light h3,
.section.light .section-title h2 { color: var(--bt-petrol-tief); }
.section.light p { color: var(--bt-schwarz) !important; }
.section.light .section-title p { color: var(--bt-schwarz); }

.section-title h2 { color: var(--bt-gelb); letter-spacing: 0.05em; }
.section-title p { color: #fff; }

/* Pill-Style Section-Heading (Tanja-PDF 14.05.) — wiederverwendbar */
.section-heading-pill {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 0.65rem 2.5rem;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
/* Filled-Variante (z.B. Agenda über Decorative-Wellen) */
.section-heading-pill.filled {
  background: var(--bt-petrol-dunkel);
}

a { color: var(--bt-tuerkis); }
a:hover { color: var(--bt-gelb); }

/* Header — Tanja-Design 14.05./15.05.: gelbe Bar, 80px hoch, schwarze Caps,
 * Underline nur bei Hover. Sitename + LinkedIn raus (15.05.). */
#header,
#header .header-container {
  background: #eee751 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
#header {
  height: 60px;
  min-height: 60px;
  padding: 0;
}
#header .header-container {
  height: 60px;
}
#navmenu a, #navmenu a:focus {
  color: var(--bt-schwarz) !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-shadow: none;
}
#navmenu a:hover {
  color: var(--bt-schwarz) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
#navmenu .active {
  color: var(--bt-schwarz) !important;
  text-decoration: none;
}
/* Mobile-Nav (Hamburger-Overlay) — gleicher gelber Background */
@media (max-width: 1199.98px) {
  #navmenu ul {
    background: #eee751;
  }
  .mobile-nav-toggle {
    color: var(--bt-schwarz) !important;
  }
  .mobile-nav-active #navmenu,
  .mobile-nav-active #navmenu ul {
    background: #eee751 !important;
  }
}

/* Buttons */
.btn-primary, .btn.btn-primary, button[type="submit"].btn-primary {
  background: var(--bt-gelb);
  border-color: var(--bt-gelb);
  color: var(--bt-schwarz);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.85rem 2.4rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--bt-gelb-warm);
  border-color: var(--bt-gelb-warm);
  color: var(--bt-schwarz);
}

/* ===== Hero ===== */
#hero.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 0 80px;
  background: var(--bt-petrol-dunkel);
}

/* Video-BG */
#hero .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.45;
}

/* Overlay über Video — petrol-türkis-Gradient (oben heller, unten dunkler) */
#hero .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(7, 58, 64, 0.55) 0%,
              rgba(7, 58, 64, 0.70) 60%,
              rgba(4, 13, 5, 0.85) 100%);
  z-index: 1;
}

/* Dots-Grafik oben mittig (Tanja-Vorgabe 15.05.) */
#hero .hero-dots {
  position: absolute;
  top: 60px; /* unter dem fixed-Header (60px) */
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  max-width: 400px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* Hero Content */
#hero .hero-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 280px 24px 0; /* Platz oben für Dots-Grafik */
}
#hero .hero-eyebrow {
  display: inline-block;
  color: #fff;
  letter-spacing: 0.22em;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}
#hero h1.hero-headline {
  margin: 0 auto 2.5rem;
  text-align: center;
  line-height: 0;
}
#hero h1.hero-headline img {
  display: inline-block;
  max-width: min(95%, 760px);
  height: auto;
}
#hero .hero-mission {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 1000px;
  margin: 0 auto 2.75rem;
}
#hero .hero-cta {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Sektion 4 — Agenda (Tanja-PDF 14.05.) ===== */
#agenda {
  position: relative;
  background: #1f7576 url('../../image/bg-section-04-top-element.png') no-repeat center -30px;
  background-size: contain;
  padding: 120px 0 60px;
  overflow: hidden;
}
/* Tablet: BG voll auf Section-Breite */
@media (max-width: 991.98px) {
  #agenda { background-size: 100%; }
}
/* Handy: BG bewusst überdimensioniert (Tanja-Wunsch 16.05.) */
@media (max-width: 767.98px) {
  #agenda { background-size: 140%; }
}
#agenda .section-heading-pill { margin-top: 0; }
#agenda .agenda-date {
  text-align: center;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bt-grau);
  /* Tanja-Wunsch 20.05.: vertikal mittig zwischen Halftone-Kreis und Box.
   * Mehr Top-Padding rueckt die Zeile aus dem Halftone-Bereich (Firefox-
   * Ueberlappung) und gleicht Browser-Unterschiede (Edge vs FF) aus. */
  padding-top: 140px;
  margin: 0 0 70px;
}
/* Tanja-Wunsch 20.05.: bei 1280er-Auflösung sitzt der Halftone-Kreis flacher,
 * deshalb weniger Section-Top-Padding und kürzeres Date-Padding. */
@media (max-width: 1280px) {
  #agenda { padding-top: 60px; }
  #agenda .agenda-date { padding-top: 90px; }
}
@media (max-width: 991px) {
  #agenda .agenda-date { padding-top: 0; }
}
#agenda .agenda-box {
  position: relative;
  background: var(--bt-petrol-tief);
  border-radius: 28px;
  padding: 3rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
/* Decorative Dot-Pattern — mittig über die Kanten der Agenda-Box gestellt */
#agenda .agenda-dots {
  position: absolute;
  top: 50%;
  width: 200px;
  height: auto;
  pointer-events: none;
  opacity: 0.95;
  z-index: 1;
}
#agenda .agenda-dots-left  { left: -100px;  transform: translateY(-50%); }
#agenda .agenda-dots-right { right: -100px; transform: translateY(-50%) scaleX(-1); }
#agenda .agenda-content {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
#agenda .agenda-list {
  margin: 0 0 1.5rem;
  color: #fff;
  font-size: 18px;
  line-height: 1.85;
}
#agenda .agenda-row {
  display: flex;
  gap: 2rem;
}
#agenda .agenda-row dt {
  flex: 0 0 110px;
  font-weight: 400;
  color: #fff;
}
#agenda .agenda-row dd {
  flex: 1;
  margin: 0;
  color: #fff;
}
#agenda .agenda-note {
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  margin: 2rem 0 0;
}
@media (max-width: 1199px) {
  #agenda .agenda-dots { display: none; }
}

/* ===== Sektion 2 — By Invitation Only (Tanja-PDF 14.05.) ===== */
#invitation {
  position: relative;
  background: var(--bt-petrol-tief) url('../../image/bg-section-02.png') no-repeat center top;
  background-size: contain;
  padding: 0;
  min-height: 760px;
  overflow: hidden;
}
/* Mobile: BG auf cover (Tanja-Test 15.05.) */
@media (max-width: 991px) {
  #invitation { background-size: cover; }
}
#invitation .invitation-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px 80px;
  text-align: center;
}
#invitation .invitation-circle {
  display: block;
  margin: 0 auto 2rem;
  width: 180px;
  height: auto;
}
#invitation .btn-invitation-register {
  display: inline-block;
  background: var(--bt-gelb);
  color: var(--bt-schwarz);
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2.5rem;
  border: 1.5px solid var(--bt-gelb);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  margin-bottom: 2.5rem;
}
#invitation .btn-invitation-register:hover {
  background: var(--bt-petrol-dunkel);
  color: var(--bt-gelb);
  transform: translateY(-2px);
}
#invitation .invitation-meta {
  color: #fff;
  font-size: 18px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}
#invitation .invitation-meta p { margin: 0; }
#invitation .invitation-meta strong {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}
#invitation .invitation-deadline {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin: 0;
}
#invitation .invitation-deadline strong {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Hero-Pills (GALLERY 2025 + FILM CLIP 2025) — Tanja-PDF 14.05. */
.btn-hero-pill {
  display: inline-block;
  padding: 0.7rem 1.8rem;
  border: 1.5px solid var(--bt-gelb);
  border-radius: 999px;
  background: var(--bt-petrol-dunkel);
  color: #fff;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-hero-pill:hover {
  background: var(--bt-gelb);
  color: var(--bt-schwarz);
  transform: translateY(-2px);
}

/* ===== Intro ===== */
#intro {
  position: relative;
  background:
    linear-gradient(rgba(7, 58, 64, 0.55), rgba(7, 58, 64, 0.55)),
    url('../../image/bt2026-bg_001.jpg') center/cover no-repeat;
  padding: 100px 0;
  text-align: center;
}
#intro .eckelt-mark {
  width: 80px; height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(94, 191, 173, 0.12);
  border: 2px solid var(--bt-tuerkis);
  display: flex; align-items: center; justify-content: center;
  color: var(--bt-gelb);
  font-size: 2rem;
}
#intro .eckelt-brand {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bt-tuerkis);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
#intro h2 {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: var(--bt-gelb);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}
#intro .intro-lead {
  max-width: 720px; margin: 0 auto;
  font-size: 1.1rem; line-height: 1.7;
  color: #fff;
}


/* ===== Text Styles ===== */

.text-muted {
    --bs-text-opacity: 1;
    color: #efefef !important;
}




/* ===== Schedule (Agenda) ===== */
#schedule { background: var(--bt-petrol-dunkel); padding: 100px 0; }
#schedule .agenda-list {
  max-width: 720px; margin: 0 auto;
  list-style: none; padding: 0;
}
#schedule .agenda-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(94, 191, 173, 0.25);
  align-items: baseline;
}
#schedule .agenda-list li:last-child { border-bottom: 0; }
#schedule .agenda-time {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: var(--bt-gelb);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}
#schedule .agenda-text { font-size: 18px; color: #fff; }

/* ===== Speakers (Tanja-PDF 14.05./15.05.) ===== */
#speakers { background: var(--bt-petrol-tief); padding: 100px 0; }
#speakers .speaker-card {
  text-align: center;
  padding: 0 0.5rem;
}
#speakers .speaker-avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0 auto 1.5rem;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #d8d8d8 0%, #b8b8b8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--bt-petrol-dunkel);
  letter-spacing: 0.05em;
}
#speakers .speaker-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#speakers .speaker-name {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
#speakers .speaker-role {
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}
#speakers .speaker-role strong { font-weight: 400; }

/* Speaker-Carousel (Swiper) — gelbe Kreis-Pfeile mit schwarzem Icon.
 * Pfeile liegen im Outer-Wrapper (außerhalb von .swiper, sonst clippt overflow:hidden).
 * Shade-Verlauf links/rechts (Tanja-Wunsch 15.05., „wie bei unternehmertag"). */
#speakers .speakers-swiper-wrap {
  position: relative;
  max-width: calc(100% - 140px);
  margin: 0 auto;
  padding: 1rem 0 3rem;
}
#speakers .speakers-swiper-wrap::before,
#speakers .speakers-swiper-wrap::after {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 3rem;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  #speakers .speakers-swiper-wrap::before,
  #speakers .speakers-swiper-wrap::after { display: none; }
}
#speakers .speakers-swiper-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bt-petrol-tief) 10%, rgba(7, 58, 64, 0) 100%);
}
#speakers .speakers-swiper-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--bt-petrol-tief) 10%, rgba(7, 58, 64, 0) 100%);
}
@media (max-width: 767.98px) {
  #speakers .speakers-swiper-wrap::before,
  #speakers .speakers-swiper-wrap::after { display: none; }
}
#speakers .speakers-swiper-wrap > .swiper-button-prev,
#speakers .speakers-swiper-wrap > .swiper-button-next {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  background: var(--bt-gelb);
  border-radius: 50%;
  color: var(--bt-schwarz);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
#speakers .speakers-swiper-wrap > .swiper-button-prev { left: -70px; }
#speakers .speakers-swiper-wrap > .swiper-button-next { right: -70px; }
#speakers .speakers-swiper-wrap > .swiper-button-prev::after,
#speakers .speakers-swiper-wrap > .swiper-button-next::after {
  font-family: 'swiper-icons';
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--bt-schwarz);
}
#speakers .speakers-swiper-wrap > .swiper-button-prev::after { content: 'prev'; }
#speakers .speakers-swiper-wrap > .swiper-button-next::after { content: 'next'; }
#speakers .speakers-swiper-wrap > .swiper-button-prev:hover,
#speakers .speakers-swiper-wrap > .swiper-button-next:hover {
  background: #fff;
  transform: scale(1.05);
}

/* ===== Venue — Tanja-PDF 14.05./15.05. ===== */
#venue { background: var(--bt-petrol-tief); padding: 100px 0; text-align: center; }
#venue .venue-headline {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}
#venue .venue-address {
  color: #fff;
  font-family: 'Geogrotesque Slab', 'Geogrotesque', serif;
  font-style: normal;
  line-height: 1.7;
  font-size: 18px;
  margin: 0 auto 2.5rem;
}
#venue .venue-address strong {
  font-weight: 700;
}
#venue .venue-parking {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

/* ===== CTA ===== */
/* background kommt aus .section / .section.light (Cascade), nicht hardcoded */
#cta { padding: 100px 0; text-align: center; }
#cta h2 {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: var(--bt-gelb);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
#cta p { color: #fff; max-width: 600px; margin: 0 auto 2rem; font-size: 1.1rem; }

/* ===== Contact — Tanja-PDF 14.05./15.05. ===== */
#contact { background: var(--bt-petrol-tief); padding: 100px 0; }
@media (max-width: 991px) {
  #contact { padding-bottom: 0; }
}
#contact .contact-subtitle {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  margin: 0 auto 3rem;
  max-width: 900px;
}
#contact .contact-row { row-gap: 2.5rem; margin-bottom: 3rem; }

/* Portrait links (analog Host) — 20px Radius + LinkedIn-Badge in der Ecke */
#contact .contact-figure {
  position: relative;
  margin: 0 auto;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bt-schwarz);
}
#contact .contact-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#contact .contact-portrait-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #d8d8d8 0%, #b8b8b8 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-size: 3rem; font-weight: 700;
  color: var(--bt-petrol-dunkel);
}
#contact .contact-linkedin-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 34px; height: 34px;
  background: #fff;
  color: var(--bt-petrol-dunkel);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease;
}
#contact .contact-linkedin-badge:hover {
  transform: scale(1.1);
  color: #0a66c2;
}

/* Form-Panel rechts — heller Türkis-Hintergrund */
#contact .contact-form-panel {
  background: #1d7274;
  border-radius: 24px;
  padding: 2.5rem 2rem;
}
#contact .contact-form-panel .form-control,
#contact .contact-form-panel textarea.form-control {
  background: var(--bt-petrol-tief);
  border: 1px solid transparent;
  color: #fff;
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  font-size: 18px;
}
#contact .contact-form-panel textarea.form-control {
  border-radius: 24px;
  resize: vertical;
}
#contact .contact-form-panel .form-control:focus {
  background: var(--bt-petrol-tief);
  border-color: var(--bt-gelb);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(242, 231, 73, 0.18);
}
#contact .contact-form-panel .form-control::placeholder {
  color: #fff;
  opacity: 0.85;
}
#contact .contact-form-panel .form-control.is-invalid {
  border-color: #ff6b6b;
}
#contact .contact-form-panel .invalid-feedback {
  color: #ffcccc;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  padding-left: 1.5rem;
}

/* SEND MESSAGE Button — gelber Pill mittig */
#contact .btn-contact-send {
  display: inline-block;
  background: var(--bt-gelb);
  color: var(--bt-schwarz);
  border: 1.5px solid var(--bt-gelb);
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 2.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#contact .btn-contact-send:hover {
  background: transparent;
  color: var(--bt-gelb);
  transform: translateY(-2px);
}

/* Info-Block unten (3 Spalten: Tanja-Meta | Adresse | E-Mail+Tel) */
#contact .contact-info-row { row-gap: 1.5rem; margin-top: 1.5rem; }
#contact .contact-meta {
  color: #fff;
  line-height: 1.6;
  font-size: 18px;
}
#contact .contact-meta strong {
  display: block;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#contact .contact-address {
  color: #fff;
  font-style: normal;
  line-height: 1.7;
  font-size: 18px;
}
#contact .contact-address a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contact .contact-address a:hover { color: var(--bt-gelb); }

/* Adress-Block direkt unter dem Form-Kasten, gleiche Breite (Tanja 15.05.) */
#contact .contact-address-row {
  margin: 1.5rem 0 0;
  --bs-gutter-x: 0;
}
#contact .contact-address-row .contact-address {
  padding: 0 1rem;
}

/* Privacy-Hint unter dem Send-Button */
#contact .contact-privacy-hint {
  margin: 1rem 0 0;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
}
#contact .contact-privacy-hint a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contact .contact-privacy-hint a:hover { color: var(--bt-gelb); }

/* Success-Bestätigung nach Submit */
#contact .contact-success {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: #1d7274;
  border: 2px solid var(--bt-gelb);
  border-radius: 16px;
  padding: 3rem 2rem;
  color: #fff;
}
#contact .contact-success h3 {
  color: var(--bt-gelb);
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  margin-bottom: 0.75rem;
}

/* ===== Host (Dr. Eckelt) — Tanja-PDF 14.05./15.05. ===== */
#host { background: var(--bt-petrol-tief); padding: 100px 0; }
#host .host-tagline {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: 0.01em;
  margin: 0 auto 3rem;
  max-width: 900px;
}
#host .host-row { row-gap: 2rem; }
#host .host-figure {
  position: relative;
  margin: 0 auto 1.5rem;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #d8d8d8 0%, #b8b8b8 100%);
}
#host .host-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
#host .host-linkedin-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 34px; height: 34px;
  background: #fff;
  color: var(--bt-petrol-dunkel);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease;
}
#host .host-linkedin-badge:hover {
  transform: scale(1.1);
  color: #0a66c2;
}
#host .host-meta {
  color: #fff;
  line-height: 1.65;
  font-size: 18px;
}
#host .host-meta strong {
  display: block;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#host .host-bio p {
  color: #fff;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
  font-size: 18px;
}

/* ===== Hotel (Nestor) — Tanja-PDF 14.05./15.05. ===== */
#hotel { background: #1d7274; padding: 100px 0; }
#hotel .hotel-row { row-gap: 2.5rem; }
#hotel .hotel-figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
#hotel .hotel-figure img { display: block; width: 100%; height: auto; }
#hotel .hotel-content {
  color: #fff;
  padding: 0 0.5rem;
}
#hotel .hotel-name {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
#hotel .hotel-desc {
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
#hotel .hotel-code-hint {
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}
#hotel .hotel-code-hint strong { font-weight: 700; }
#hotel .hotel-address {
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}
#hotel .hotel-address a {
  color: #fff;
  text-decoration: underline;
}
#hotel .hotel-address a:hover { color: var(--bt-gelb); }
#hotel .hotel-cta {
  margin-top: 3rem;
}
#hotel .btn-hotel-book {
  display: inline-block;
  background: var(--bt-gelb);
  color: var(--bt-schwarz);
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2.5rem;
  border: 1.5px solid var(--bt-gelb);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#hotel .btn-hotel-book:hover {
  background: transparent;
  color: var(--bt-gelb);
  transform: translateY(-2px);
}

/* ===== Gallery — Tanja-PDF 14.05./15.05. (2 Reihen × 3 Spalten) ===== */
#gallery { background: #1d7274; padding: 100px 0; }
#gallery .gallery-subtitle {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em;
  margin: 0 auto 3rem;
  max-width: 900px;
}
#gallery .gallery-swiper-wrap {
  position: relative;
  max-width: calc(100% - 140px);
  margin: 0 auto;
  padding: 1rem 0 3rem;
}
#gallery .gallery-figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #000;
  cursor: pointer;
  transition: transform 0.3s ease;
}
#gallery .gallery-figure:hover { transform: translateY(-4px); }
#gallery .gallery-figure a { display: block; width: 100%; height: 100%; }
#gallery .gallery-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Swiper-Grid braucht Höhen-Konsistenz auf swiper-slide */
#gallery .gallery-swiper .swiper-slide { height: auto; }

/* Pfeile (analog Speakers): gelbe Kreis-Pfeile außerhalb */
#gallery .gallery-swiper-wrap > .swiper-button-prev,
#gallery .gallery-swiper-wrap > .swiper-button-next {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  background: var(--bt-gelb);
  border-radius: 50%;
  color: var(--bt-schwarz);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
#gallery .gallery-swiper-wrap > .swiper-button-prev { left: -70px; }
#gallery .gallery-swiper-wrap > .swiper-button-next { right: -70px; }
#gallery .gallery-swiper-wrap > .swiper-button-prev::after,
#gallery .gallery-swiper-wrap > .swiper-button-next::after {
  font-family: 'swiper-icons';
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--bt-schwarz);
}
#gallery .gallery-swiper-wrap > .swiper-button-prev::after { content: 'prev'; }
#gallery .gallery-swiper-wrap > .swiper-button-next::after { content: 'next'; }
#gallery .gallery-swiper-wrap > .swiper-button-prev:hover,
#gallery .gallery-swiper-wrap > .swiper-button-next:hover {
  background: #fff;
  transform: scale(1.05);
}

/* ===== Sponsors (schwarzer Balken unter Agenda, Tanja-PDF 14.05.) ===== */
#sponsors { background: var(--bt-schwarz); padding: 22px 0; }
#sponsors h3 {
  text-align: center;
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 18px;
  margin: 0;
}
#sponsors .sponsor-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 2rem;
  margin-top: 0;
}
#sponsors .sponsor-placeholder {
  display: none; /* TODO: einblenden sobald Logos kommen */
}

/* Scroll-to-Top: Icon bei Hover weiß (Tanja-Wunsch 15.05.) */
.scroll-top:hover i { color: #fff !important; }

/* ===== Registrierungsseite (preview/register.php) — Tanja-Anpassungen 15.05. ===== */
/* Page-Title-Balken ist raus → main bekommt Abstand zur fixen Header-Nav.
 * Auf .main (nicht auf #register), damit's für alle Subpages (Register, Imprint,
 * Privacy) gleichermaßen wirkt. */
body.register-page .main {
  padding-top: 100px;
}
/* Radio-Buttons + Checkboxen vertikal mittig zum Label (Tanja-Wunsch) */
#register .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
#register .form-check-input {
  margin: 0;
  flex-shrink: 0;
}
#register .form-check-label {
  margin: 0;
  line-height: 1.3;
  margin-top: 4px;
}
/* Consent-Blöcke (Code of Conduct, GDPR, Privacy) bekommen sichtbaren Block
 * mit Checkbox links + längerem Text rechts — vertikal mittig zueinander. */
#register .consent-block.form-check {
  align-items: flex-start;
  gap: 0.75rem;
}
#register .consent-block .form-check-input {
  margin-top: 0.35rem;
  width: 1.25em;
  height: 1.25em;
  background-color: #dc3545;
  border-color: #dc3545;
}
#register .consent-block .form-check-input:checked {
  background-color: #fff;
  border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23073940' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8l3 3L12 5'/%3E%3C/svg%3E");
}
#register .consent-block .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.35);
}
#register .consent-block .form-check-label {
  line-height: 1.55;
}

/* ===== Content-Pages (Imprint, Privacy) — Tanja-Drop 15.05. ===== */
.content-page {
  background: var(--bt-petrol-tief);
  padding: 140px 0 100px;
  min-height: 60vh;
}
.content-page .container { max-width: 880px; }
.content-page .section-heading-pill { margin-bottom: 3rem; }
.content-page .content-prose {
  color: #fff;
  font-size: 18px;
  line-height: 1.75;
}
.content-page .content-prose h3 {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: var(--bt-gelb);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.content-page .content-prose h4 {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.content-page .content-prose p {
  color: #fff;
  margin: 0 0 1rem;
}
.content-page .content-prose strong { font-weight: 700; }
.content-page .content-prose ul,
.content-page .content-prose ol {
  margin: 0 0 1.25rem 1.5rem;
  padding: 0;
}
.content-page .content-prose ul li,
.content-page .content-prose ol li {
  margin-bottom: 0.5rem;
}
.content-page .content-prose a {
  color: var(--bt-gelb);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content-page .content-prose a:hover { color: #fff; }
.content-page .content-meta-date {
  margin-top: 2.5rem;
  color: var(--bt-grau);
  font-size: 0.95rem;
  font-style: italic;
}

/* ===== Footer — Tanja-PDF 14.05./15.05.: schmale gelbe Bar ===== */
#footer.footer-bar {
  background: #eee751 !important;
  color: var(--bt-schwarz);
  padding: 18px 0;
  border-top: 4px solid var(--bt-petrol-tief);
}
#footer.footer-bar .footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#footer.footer-bar .footer-copyright {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: var(--bt-schwarz);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
#footer.footer-bar .footer-links {
  display: flex;
  gap: 2rem;
}
#footer.footer-bar .footer-links a {
  font-family: 'Geogrotesque', 'Kanit', sans-serif;
  color: var(--bt-schwarz);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
}
#footer.footer-bar .footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
/* Tablet + Mobile: Footer-Texte zentriert untereinander */
@media (max-width: 991px) {
  #footer.footer-bar .footer-row {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  #footer.footer-bar .footer-copyright,
  #footer.footer-bar .footer-links {
    width: 100%;
    justify-content: center;
  }
}
