/* ==========================================================================
   Home (Video-Akademie) – neu aufgebaut, responsive, ohne Bild-Cropping
   Ziel:
   - Saubere 16:9 Thumbs ohne Abschneiden (object-fit: contain)
   - Karten/Grid stabil (keine Layout-Sprünge)
   - Moderne Filter-/Search-UI
   ========================================================================== */

/* ---------- Layout ---------- */
:root{
  --ink: #102544;
  --ink-2: #5d6a83;
  --bg: #f6f8ff;
  --card: #ffffff;
  --line: #e5e8f0;
  --blue: #2b4f9a;
  --accent: #f3c94e;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 14px;

  --shadow-1: 0 14px 40px rgba(15,35,60,.08);
  --shadow-2: 0 22px 60px rgba(15,35,60,.12);
}

.home-wrap { padding: 26px 0 34px 0; }
.home-container { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

.hero-title { font-size: 42px; font-weight: 900; color: var(--ink); margin: 0; letter-spacing: -.02em; }
.hero-sub { margin: 8px 0 22px 0; color: var(--ink-2); font-size: 18px; line-height: 1.5; max-width: 920px; }

/* ---------- Search Card ---------- */
.search-card{
  background: var(--blue);
  border-radius: 18px;
  padding: 22px;
  color:#fff;
  box-shadow: var(--shadow-2);
}

.search-card h3{
  margin:0 0 14px 0;
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.search-row{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}

.search-select { flex: 1 1 220px; min-width: 220px; }
.search-input-wrap { flex: 2 1 420px; min-width: 280px; position:relative; }

.search-input{
  width:100%;
  border-radius: 999px;
  border: none;
  padding: 14px 16px;
  font-size: 16px;
  outline:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.search-input:focus{
  box-shadow: 0 0 0 4px rgba(243,201,78,.35), 0 10px 30px rgba(0,0,0,.10);
}

.search-btn{
  border:none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 900;
  padding: 12px 22px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.search-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15,35,60,.18);
}

.search-hint{ margin-top: 10px; opacity:.92; font-size: 14px; }

/* ---------- Shared Select styling ---------- */
.ui-select{
  width:100%;
  border-radius: 999px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background:#fff;
  font-weight: 900;
  outline:none;
  color: var(--ink);
}

/* ---------- Live suggestions dropdown ---------- */
.suggest-box{
  position:absolute; left:0; right:0; top: calc(100% + 8px);
  background:#fff; border:1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 18px 44px rgba(15,35,60,.18);
  overflow:hidden; display:none; z-index: 50;
}

.suggest-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 11px 12px;
  text-decoration:none;
  color: var(--ink);
  font-weight:800;
}

.suggest-item small{ color:#7a869a; font-weight:700; }
.suggest-item:hover{ background:#f5f7fd; }

/* ---------- Tabs (modern) ---------- */
.tabs-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0 10px 0; }

.tabs-modern .tab-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border:1px solid #e6eaf5;
  color: var(--ink);
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 8px 26px rgba(15,35,60,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}

.tabs-modern .tab-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(15,35,60,.10);
}

.tabs-modern .tab-chip.active{
  background: var(--ink);
  color:#fff;
  border-color: var(--ink);
}

/* ---------- Filterbar compact + modern ---------- */
.filterbar-modern{ margin: 8px 0 18px 0; }

.filter-grid{
  display:grid;
  grid-template-columns: 180px 1fr 1fr auto;
  gap: 12px;
  align-items:end;
}

.filteritem label{
  display:block;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 6px 2px;
  font-size: 12px;
  opacity:.92;
}

.filteritem .ui-select{
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-weight: 800;
}

.filteractions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.applybtn{
  border:none;
  border-radius: var(--r-sm);
  background: var(--ink);
  color:#fff;
  font-weight: 900;
  padding: 10px 14px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.applybtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15,35,60,.18);
}

.resetbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--r-sm);
  border:1px solid var(--line);
  background:#fff;
  color: var(--ink);
  font-weight: 900;
  padding: 10px 12px;
  text-decoration:none;
  transition: background .12s ease;
}

.resetbtn:hover{ background:#f5f7fd; }

/* ---------- Grid + Sidebar ---------- */
.content-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items:start;
  margin-top: 10px;
}

/* Cards Grid */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.card{
  background: var(--card);
  border-radius: var(--r-md);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow: var(--shadow-1);
  text-decoration:none;
  color:inherit;
  display:block;
  transition: transform .12s ease, box-shadow .12s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(15,35,60,.12);
}

/* IMPORTANT: Thumbnail ohne Abschneiden */
.card-thumb{
  aspect-ratio: 16 / 9;
  background: #eaf0fb; /* Fallback */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Wenn du immer Vollfläche willst: object-fit: cover.
   Da du "nicht abschneiden" willst: contain. */
.card-thumb img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  background: #eaf0fb;
}

/* Optional: wenn dir Letterboxing nicht gefällt, dann cover:
.card-thumb img{ object-fit: cover; }
*/

.card-body{ padding: 12px 12px 14px 12px; }

.card-tag{
  display:inline-block;
  background:#eef3ff;
  color: var(--ink);
  font-weight:900;
  font-size: 12px;
  padding: 4px 10px;
  border-radius:999px;
}

.card-title{
  margin: 8px 0 8px 0;
  font-size: 18px;
  line-height:1.25;
  font-weight: 900;
  color: var(--ink);
}

.card-desc{
  color: var(--ink-2);
  font-size: 14px;
  line-height:1.45;
  max-height: 3.0em;
  overflow:hidden;
}

/* ---------- Quick overview (Sidebar) ---------- */
.side-card{
  background: var(--card);
  border-radius: var(--r-md);
  border:1px solid var(--line);
  box-shadow: var(--shadow-1);
  padding: 14px;
  position: sticky;
  top: 120px;
}

.side-title{
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 10px 0;
}

.side-tabs{
  display:flex;
  gap:10px;
  background:#f1f3fb;
  border-radius: 999px;
  padding: 6px;
}

.side-tab{
  flex:1;
  border:none;
  background:transparent;
  padding: 9px 10px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  color: var(--ink-2);
  transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}

.side-tab.active{
  background:#fff;
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(15,35,60,.10);
}

.side-list{
  margin-top: 12px;
  max-height: 420px;
  overflow:auto;
  padding-right: 6px;
}

.side-link{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--ink);
  font-weight:800;
}

.side-link:hover{ background:#f5f7fd; }

/* ---------- Mobile ---------- */
@media (max-width: 1060px){
  .content-grid { grid-template-columns: 1fr; }
  .side-card { position: relative; top:auto; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-grid{ grid-template-columns: 1fr 1fr; }
  .filteractions{ grid-column: 1 / -1; justify-content:stretch; }
  .applybtn, .resetbtn{ width:100%; }
}

@media (max-width: 620px){
  .hero-title { font-size: 32px; }
  .search-card { padding: 16px; }
  .cards { grid-template-columns: 1fr; }
  .filter-grid{ grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .card, .search-btn, .tabs-modern .tab-chip, .applybtn{ transition: none; }
  .card:hover, .search-btn:hover, .tabs-modern .tab-chip:hover, .applybtn:hover{ transform:none; }
}