/**
 * Leuchtturm Predigten v1.1.6 - Sidebar layout
 * Netflix-style with left navigation. Blue accent only.
 */

:root { --ltp-accent: #2563eb; --ltp-accent-hover: #1d4ed8; }

/* ── App shell ─────────────────────────────────────────────────── */
.ltp-app { display: flex; font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 600px; position: relative; }
.ltp-app *, .ltp-app *::before, .ltp-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ltp-app a { color: inherit; text-decoration: none; }
.ltp-app button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Light theme ───────────────────────────────────────────────── */
.ltp-light {
  --bg: #f5f5f5; --bg-sidebar: #fff; --bg-card: #fff; --bg-card-hover: #f0f4f8;
  --text: #111827; --text-sec: #4b5563; --border: #d1d5db;
  --search-bg: #fff; --tag-bg: #dbeafe; --tag-text: #1e40af;
  --sb-active: #dbeafe; --sb-hover: #e8edf3; --count-bg: #e2e8f0;
  --shadow: 0 1px 3px rgba(0,0,0,0.06); --shadow-hover: 0 8px 24px rgba(0,0,0,0.08);
  background: var(--bg); color: var(--text);
}

/* ── Dark theme ────────────────────────────────────────────────── */
.ltp-dark {
  --bg: #0c0c10; --bg-sidebar: #111116; --bg-card: #18181f; --bg-card-hover: #1f1f2a;
  --text: #eeeef2; --text-sec: #8b8b9e; --border: #222230;
  --search-bg: #18181f; --tag-bg: #1e293b; --tag-text: #93c5fd;
  --sb-active: #1e293b; --sb-hover: #161620; --count-bg: #1a1a28;
  --shadow: 0 1px 3px rgba(0,0,0,0.2); --shadow-hover: 0 8px 24px rgba(0,0,0,0.4);
  background: var(--bg); color: var(--text);
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.ltp-sidebar {
  width: 0; min-width: 0; overflow: hidden;
  background: var(--bg-sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width 0.3s ease, min-width 0.3s ease;
  z-index: 10;
}
.ltp-sidebar.open { width: 260px; min-width: 260px; }

.ltp-sb-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; display: flex; align-items: center; justify-content: space-between; }
.ltp-sb-head-text { flex: 1; min-width: 0; }
.ltp-sb-title { font-size: 15px; font-weight: 700; color: var(--text); }
.ltp-sb-sub { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.ltp-sb-close {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; color: var(--text-sec);
  transition: background 0.15s; flex-shrink: 0;
}
.ltp-sb-close:hover { background: var(--border); color: var(--text); }

.ltp-sb-tabs { display: flex; border-bottom: 1px solid var(--border); }
.ltp-sb-tab {
  flex: 1; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--text-sec);
  border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap;
}
.ltp-sb-tab:hover { color: var(--text); }
.ltp-sb-tab.active { color: var(--ltp-accent); border-bottom-color: var(--ltp-accent); background: var(--sb-active); }
.ltp-sb-tab svg { width: 16px; height: 16px; }

.ltp-sb-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.ltp-sb-list::-webkit-scrollbar { width: 6px; }
.ltp-sb-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.ltp-sb-item {
  display: flex; align-items: center; width: 100%; padding: 9px 16px; gap: 8px;
  font-size: 13px; text-align: left; color: var(--text);
  border-left: 3px solid transparent; transition: all 0.15s; white-space: nowrap;
}
.ltp-sb-item:hover { background: var(--sb-hover); color: var(--text); }
.ltp-sb-item.active { background: var(--sb-active); border-left-color: var(--ltp-accent); color: #1d4ed8; font-weight: 600; }
.ltp-sb-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ltp-sb-item-count {
  font-size: 11px; font-weight: 500; color: var(--text-sec);
  background: var(--count-bg); padding: 2px 7px; border-radius: 6px; min-width: 20px; text-align: center;
}

/* ── Sidebar section headers (AT / NT) ────────────────────────── */
.ltp-sb-section {
  padding: 10px 16px 5px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ltp-accent); white-space: nowrap;
}
.ltp-sb-divider {
  height: 1px; background: var(--border); margin: 6px 16px;
}

/* ── Main area ─────────────────────────────────────────────────── */
.ltp-main { flex: 1; min-width: 0; }

/* ── Top bar ───────────────────────────────────────────────────── */
.ltp-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 10px 24px; display: flex; align-items: center; gap: 12px;
}

.ltp-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; color: var(--text-sec);
  transition: background 0.15s;
}
.ltp-icon-btn:hover { background: var(--border); }
.ltp-icon-btn svg { width: 20px; height: 20px; }

.ltp-search-wrap { flex: 1; max-width: 500px; position: relative; }
.ltp-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-sec); display: flex; pointer-events: none; z-index: 2; }
.ltp-search-icon svg { width: 16px; height: 16px; }
.ltp-search {
  width: 100%; padding: 10px 14px 10px 44px;
  background: var(--search-bg); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s;
}
.ltp-search::placeholder { color: var(--text-sec); }
.ltp-search:focus { border-color: var(--ltp-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }

.ltp-active-filter {
  display: flex; align-items: center; gap: 6px;
  background: var(--tag-bg); color: var(--ltp-accent); padding: 6px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ltp-filter-x { display: flex; color: var(--ltp-accent); padding: 0; }

.ltp-view-toggle {
  display: flex; gap: 2px;
  background: var(--count-bg); border-radius: 8px; padding: 2px;
}
.ltp-vt-btn {
  padding: 6px 10px; border-radius: 6px; display: flex; align-items: center;
  color: var(--text-sec); transition: all 0.2s;
}
.ltp-vt-btn.active { background: var(--ltp-accent); color: #fff; }

/* ── Top bar right group ──────────────────────────────────────── */
.ltp-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Theme toggle button (single sun/moon icon) ──────────────── */
.ltp-theme-btn-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--text-sec); transition: all 0.2s; flex-shrink: 0;
}
.ltp-theme-btn-toggle:hover { background: var(--count-bg); color: var(--text); }
.ltp-theme-btn-toggle svg { width: 18px; height: 18px; }

/* ── Sort button ──────────────────────────────────────────────── */
.ltp-sort-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--count-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; color: var(--text-sec); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.ltp-sort-btn:hover { color: var(--text); background: var(--sb-hover); border-color: var(--ltp-accent); }
.ltp-sort-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Content ───────────────────────────────────────────────────── */
.ltp-content { padding: 0 24px 32px; }

/* ── Section title ─────────────────────────────────────────────── */
.ltp-section-title { font-size: 18px; font-weight: 700; margin: 24px 0 14px; }

/* ── Featured ──────────────────────────────────────────────────── */
.ltp-featured-scroll {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: none; margin-bottom: 32px;
}
.ltp-featured-scroll::-webkit-scrollbar { display: none; }

.ltp-feat-card {
  min-width: 300px; max-width: 340px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden; display: block;
  transition: transform 0.2s;
}
.ltp-feat-card:hover { transform: scale(1.03); }

.ltp-feat-img {
  position: relative; aspect-ratio: 16/9;
  background: var(--bg-card); background-size: cover; background-position: center;
  overflow: hidden;
}
.ltp-feat-img::before {
  content: ''; position: absolute; inset: -20px;
  background: inherit; background-size: cover; background-position: center;
  filter: blur(20px); z-index: 0;
}
.ltp-feat-gradient {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 100%);
}
.ltp-feat-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  border-radius: 999px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0.9;
}
.ltp-feat-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; color: #fff; z-index: 2; }
.ltp-feat-serie { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.ltp-feat-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ltp-feat-meta { font-size: 12px; color: rgba(255,255,255,0.6); }

/* ── Results header ────────────────────────────────────────────── */
.ltp-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; margin-top: 0; }
.ltp-rh-title { font-size: 17px; font-weight: 700; }
.ltp-rh-sort { font-size: 12px; color: var(--text-sec); }

/* ── Grid view ─────────────────────────────────────────────────── */
.ltp-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.ltp-card {
  display: block; border-radius: 18px; overflow: hidden;
  transition: transform 0.25s cubic-bezier(.22,.68,0,1.2), box-shadow 0.25s;
}
.ltp-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 28px 56px rgba(0,0,0,0.5); }

/* Organic gradient card */
.ltp-card-bg {
  position: relative; aspect-ratio: 4/3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px; overflow: hidden;
}
/* subtle film-grain noise */
.ltp-card-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055;
}
.ltp-card-top-row {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.ltp-card-serie-chip {
  background: rgba(255,255,255,0.18); backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  color: rgba(255,255,255,0.93); font-size: 10px; font-weight: 700;
  padding: 4px 11px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.06em;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.18);
}
.ltp-card-video-badge {
  background: rgba(255,255,255,0.18); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px; padding: 4px 10px; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  color: #fff; font-size: 10px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.18);
}
.ltp-card-body {
  position: relative; z-index: 1;
}
.ltp-card-title {
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45); margin-bottom: 8px;
}
.ltp-card-prediger {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.88);
  margin-bottom: 5px; text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.ltp-card-meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.ltp-card-bibelref {
  font-size: 11px; color: rgba(255,255,255,0.68); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ltp-card-date {
  font-size: 11px; color: rgba(255,255,255,0.45); flex-shrink: 0;
}

/* Keep old .ltp-tag for list view */
.ltp-tag {
  display: inline-block; background: var(--tag-bg); color: var(--tag-text);
  border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 600;
}

/* ── List view ─────────────────────────────────────────────────── */
.ltp-list-view { display: flex; flex-direction: column; gap: 6px; }

.ltp-li {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  background: var(--bg-card); border-radius: 10px; border: 1px solid var(--border);
  transition: background 0.15s;
}
.ltp-li:hover { background: var(--bg-card-hover); }

.ltp-li-thumb {
  width: 80px; height: 45px; border-radius: 6px; flex-shrink: 0;
  background-size: cover; background-position: center; position: relative;
}
.ltp-li-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3); color: #fff; border-radius: 6px;
}
.ltp-li-content { flex: 1; min-width: 0; }
.ltp-li-title { font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ltp-li-meta { font-size: 11.5px; color: var(--text-sec); margin-top: 2px; }
.ltp-li-tags { display: flex; gap: 4px; flex-shrink: 0; }
.ltp-li-date { font-size: 11px; color: var(--text-sec); flex-shrink: 0; white-space: nowrap; }

/* ── Empty state ───────────────────────────────────────────────── */
.ltp-empty { text-align: center; padding: 60px 20px; color: var(--text-sec); grid-column: 1/-1; }
.ltp-empty-icon { font-size: 36px; margin-bottom: 10px; }
.ltp-empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.ltp-empty-sub { font-size: 13px; margin-top: 4px; }
.ltp-empty-reset { margin-top: 12px; }

/* ── Buttons ───────────────────────────────────────────────────── */
.ltp-btn-primary {
  display: inline-block; padding: 12px 32px;
  background: #2563eb; color: #ffffff !important; border: 2px solid #2563eb;
  border-radius: 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(37,99,235,0.4);
  text-decoration: none;
}
.ltp-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; box-shadow: 0 6px 20px rgba(37,99,235,0.5); }

/* ── Pagination ────────────────────────────────────────────────── */
.ltp-pagination { display: flex; justify-content: center; padding: 24px 0 8px; }

/* ── Loading ───────────────────────────────────────────────────── */
.ltp-loading { opacity: 0.4; pointer-events: none; }

/* ── Mobile overlay ────────────────────────────────────────────── */
.ltp-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 99; opacity: 0; transition: opacity 0.3s;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ltp-sidebar.open { width: 220px; min-width: 220px; }
}
@media (max-width: 768px) {
  .ltp-sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; }
  .ltp-sidebar.open { width: 260px; min-width: 260px; box-shadow: 4px 0 24px rgba(0,0,0,0.3); }
  .ltp-sb-close { display: flex; }
  .ltp-overlay.active { display: block; opacity: 1; }
  .ltp-topbar { padding: 10px 16px; }
  .ltp-content { padding: 0 16px 24px; }
  .ltp-grid-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
  .ltp-feat-card { min-width: 260px; }
  .ltp-li-tags { display: none; }
}
@media (max-width: 480px) {
  .ltp-grid-cards { grid-template-columns: 1fr; }
  .ltp-feat-card { min-width: 240px; }
  .ltp-view-toggle { display: none; }
}

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
  .ltp-sidebar, .ltp-topbar, .ltp-pagination, .ltp-featured-scroll { display: none; }
  .ltp-card, .ltp-li { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ── Focus ─────────────────────────────────────────────────────── */
.ltp-app *:focus-visible { outline: 2px solid var(--ltp-accent); outline-offset: 2px; }