/* assets/styles.css — KulTour Conversion Theme */

/* ===== Farbwelt (Logo-Blau + Akzent-Gelb) ===== */
:root{
  --brand:#1789ca;
  --brand-700:#116da3;
  --accent:#f3c546;
  --accent-700:#e0b233;
  --ink:#0e2230;
  --muted:#6b7b88;
  --bg:#ffffff;
  --soft:#f6f8fb;
  --soft-2:#eef5fb;
}

/* ===== Basis ===== */
html{scroll-behavior:smooth}
body{color:var(--ink); background:var(--bg)}
a{color:var(--brand)}
a:hover{color:var(--brand-700)}
.navbar{backdrop-filter:saturate(120%) blur(6px)}
.navbar .nav-link{font-weight:500}
.navbar .nav-link.active{color:var(--brand)!important}
.brand-logo{display:flex;align-items:center;gap:.5rem;font-weight:800;}
.brand-logo img{height:34px;width:auto}

/* zarte farbige Top-Border unter Navbar */
.navbar.border-bottom{box-shadow:0 2px 0 0 rgba(23,137,202,.15)}

/* ===== Hero (Foto + Farbe) ===== */
.hero{
  position:relative; min-height:68vh; display:flex; align-items:center;
  color:#fff; background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient( to bottom right, rgba(23,137,202,.65), rgba(243,197,70,.45) ),
    linear-gradient( to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55) );
}
.hero .container{position:relative; z-index:2}
.hero h1{font-weight:850; line-height:1.04; letter-spacing:.2px; text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hero .lead{font-size:1.18rem}

/* ===== Buttons ===== */
.btn-brand{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-700); --bs-btn-hover-border-color:var(--brand-700);
  --bs-btn-color:#fff;
}
.btn-accent{
  --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent-700); --bs-btn-hover-border-color:var(--accent-700);
  --bs-btn-color:#1a1a1a; font-weight:700;
}
.btn-outline-brand{
  --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.7);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:rgba(255,255,255,.12);
  --bs-btn-hover-border-color:#fff;
}

/* ===== Sektionen & Akzente ===== */
.section-soft{background:var(--soft)}
.section-soft-2{background:var(--soft-2)}
.section-title{font-weight:800}
.section-kicker{color:var(--brand); font-weight:700; letter-spacing:.08em; text-transform:uppercase}

/* schmale Akzentlinie */
.akzent-line{height:4px; width:64px; background:linear-gradient(90deg,var(--accent),var(--brand)); border-radius:8px}

/* ===== Karten (Events) ===== */
.card{
  border:1px solid #e9edf3; border-radius:1rem; transition:transform .2s ease, box-shadow .2s ease;
  background:linear-gradient(180deg,#fff, #fff), radial-gradient(1200px 300px at 0% -10%, rgba(23,137,202,.06), transparent 60%);
  background-clip:padding-box, border-box;
}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.08)}
.card .top-ribbon{
  position:absolute; top:12px; left:12px; background:var(--brand); color:#fff; font-weight:700;
  padding:.28rem .55rem; border-radius:.5rem; font-size:.8rem; box-shadow:0 6px 14px rgba(23,137,202,.25);
}
.card-img-top{object-fit:cover; max-height:230px; border-top-left-radius:1rem; border-top-right-radius:1rem}

/* Badges */
.badge.text-bg-primary{background-color:var(--brand)!important}
.badge-accent{background:var(--accent); color:#1a1a1a; font-weight:700}

/* ===== CTA-Band ===== */
.cta-band{
  background:
    radial-gradient(1000px 300px at 0% 0%, rgba(23,137,202,.12), transparent 60%),
    linear-gradient(90deg, rgba(23,137,202,.08), rgba(243,197,70,.14));
  border:1px solid rgba(23,137,202,.18); border-radius:1.25rem;
}

/* ===== Feature-Icons ===== */
.feature{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem 1.1rem; border-radius:.9rem; background:#fff; border:1px solid #e9edf3;
}
.feature .icon{
  width:42px; height:42px; display:grid; place-items:center; border-radius:.7rem;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff; font-size:1.2rem; box-shadow:0 10px 20px rgba(23,137,202,.25);
}

/* ===== Partnerband ===== */
.partner-band{
  display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; opacity:.9
}
.partner-band img{height:34px; filter:grayscale(40%); transition:filter .2s}
.partner-band img:hover{filter:none}

/* ===== Footer ===== */
footer{background:#fff}
footer a{text-decoration:none}
footer .separator{opacity:.25}

/* Container: keine fixe Höhe mehr, nur Polster */
.coop-logo{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.35rem .55rem; border-radius:.75rem;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  filter:grayscale(40%) contrast(1.05) brightness(1.02) opacity(.9);
  background:#fff; border:1px solid #e9edf3;
  line-height:0; /* verhindert vertikale Zentrier-Zitterei */
}
/* Bild: nur max-height begrenzen, Breite automatisch -> keine Verzerrung */
.coop-logo img{
  display:block;
  max-height:40px;   /* einheitliche optische Höhe */
  height:auto;       /* Ratio bleibt erhalten */
  width:auto;        /* Ratio bleibt erhalten */
}
.coop-logo:hover{
  filter:none; transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(23,137,202,.15);
}

/* ===== Modals: Mobile korrekt einpassen ===== */
.modal-content{ max-height: 100vh; }

/* Standard: auf Desktop/Tablets */
.modal-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;     /* nie höher als Viewport */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.modal-body{
  overflow: auto;            /* falls Text länger ist */
}

/* Phones: Header (~56px) + Footer-Reserve (~56px) + Innenabstand (~16px*2) abziehen */
@media (max-width: 576px) {
  .modal-body {
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Beschreibung auf Karten & im Modal */
.poster-desc{
  text-align: center;
  margin: .75rem auto 0;
  color:#344654;
  max-width: 46ch;
  line-height: 1.45;
}

/* Abstände zwischen erlaubten HTML-Elementen harmonisieren */
.poster-desc p{ margin: .5rem 0; }
.poster-desc ul, .poster-desc ol{ 
  display: inline-block; /* zentriert wirken lassen */
  text-align: left;      /* Lesbarkeit bei Listen */
  margin: .5rem auto; padding-left: 1.2rem;
}
.poster-desc li{ margin: .15rem 0; }

/* Karten-Beschreibung visuell kürzen, ohne HTML zu zerstören */
.poster-desc{
  display: -webkit-box;
  -webkit-line-clamp: 6;     /* Anzahl Zeilen auf Karten */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Im Modal die Klammerung aufheben – volle Beschreibung */
.modal .poster-desc{
  display: block;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
  overflow: visible;
  max-width: 60ch;      /* im Modal etwas breiter, aber zentriert */
  margin: 0 auto 0;
}

.poster-desc h3, .poster-desc h4, .poster-desc h5{
  text-align:center; margin:.6rem 0 .35rem; line-height:1.25;
}