/* =========================================================================
   epd video — redesign layer
   Loads after styles.css + styles-coral.css.
   Goals:
   - Kill the sidebar shell, single full-width main column
   - New three-slot topbar (hamburger + logo | inline nav | search + user)
   - Slide-in drawer (hamburger menu) with featured Rubriken
   - Hero slider (scroll-snap, dots, prev/next)
   - Responsive collapse + scroll auto-hide
   ========================================================================= */

/* ---------- Self-hosted fonts ----------
   No runtime fetch from Google. Files live under /fonts/.
   - Inter Variable (woff2) covers weights 100..900 in a single 350 KB file.
   - DM Serif Display Regular: latin + latin-ext woff2 (~25 KB combined).
   Both licensed under SIL OFL, redistributable.

   We keep the family names ("Inter", "DM Serif Display") matching what
   Google would have served, so CSS authored against the Google names
   keeps working without any per-rule changes. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/DMSerifDisplay-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/DMSerifDisplay-Regular-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Filter chips on /erklaert are now <button>s (clickable) instead of
   <span>s. Reset default button styling so the existing .filter-chip
   rules from styles.css render identically across both element types. */
button.filter-chip {
  font-family: inherit;
  margin: 0;
}

/* Extra-small button variant — used for inline ✨ Vorschlag-buttons next
   to form-field labels in /admin/videos/edit. */
.btn-xs {
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1;
  border-radius: 6px;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent, #e23a2c);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

/* Card tag row — sits beneath the title, outside the wrapping <a> so
   chips can link to /tag/{slug} (nested <a> is invalid HTML). 2–3 chips
   per card, eager-loaded via attach_tags() helper. */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 12px 12px;
}
.card-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(244, 241, 236, 0.62);
  font: 500 11px/1.4 'Inter', system-ui, sans-serif;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.card-tag:hover {
  background: rgba(226, 58, 44, 0.15);
  color: rgba(244, 241, 236, 0.95);
}

/* ---------- Client feedback overrides (Clemens, 2026-05-26) ----------
   These intentionally override rules from styles.css + styles-coral.css.
   Kept in one block so it's obvious what's a design pivot vs. base style. */

/* Row + about-block headlines: coral on dark blue was perceived as visually
   restless ("zu unruhig"). Switch to soft cream/white. */
.theme-coral .row-title,
.theme-coral .about-h,
.theme-coral .popular-title,
.theme-coral .faq-h,
.theme-coral .page-h {
  color: rgba(244, 241, 236, 0.96);
}

/* Row chevron buttons — visible on desktop pointer devices, hidden on touch
   so the user just swipes horizontally (matches mobile reading expectation). */
@media (hover: none), (max-width: 720px) {
  .row-nav { display: none !important; }
}

/* ---------- Layout: kill sidebar offset ---------- */
.shell { display: block; }
.sidebar { display: none !important; }
.shell .main { margin-left: 0 !important; max-width: none; }

/* No horizontal scroll when drawer is open / sliding */
body.drawer-open { overflow: hidden; }

/* ---------- Topbar: two-slot flex (Clemens 2026-05-26 split) ----------
   Left:  logo + general/topic nav (Rubriken, epd erklärt, Service, Über uns)
   Right: search + user (with dropdown for personal items: Mein Bereich,
          Merkliste, Newsletter, Hilfe, Benachrichtigungen, Einstellungen). */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(10, 50, 66, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.topbar.is-hidden { transform: translateY(-100%); }

/* Left slot */
.tb-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.tb-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg, #f4f1ec);
  cursor: pointer;
  transition: background 140ms;
}
.tb-hamburger:hover,
.tb-hamburger:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.tb-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Nav now sits inside .tb-left (after logo), left-aligned. Was: centered
   in its own grid slot — see Clemens 2026-05-26 split. */
.tb-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
  min-width: 0;
}
.tb-link {
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(244, 241, 236, 0.78);
  font: 500 14px/1 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  transition: background 140ms, color 140ms;
}
.tb-link:hover,
.tb-link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--fg, #f4f1ec);
  outline: none;
}
.tb-link.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--fg, #f4f1ec);
}

/* Right slot */
.tb-right {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.tb-search-link,
.tb-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg, #f4f1ec);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms;
  font: 500 14px/1 'Inter', system-ui, sans-serif;
}
.tb-user.is-signed-in { padding: 0; width: 40px; }
.tb-search-link { padding: 0 14px 0 12px; }
.tb-search-label { font: 500 14px/1 'Inter', system-ui, sans-serif; }
.tb-user-anon { padding: 0 14px 0 12px; }
.tb-search-link:hover,
.tb-search-link:focus-visible,
.tb-user:hover,
.tb-user:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* ---- User dropdown menu (Clemens 2026-05-26) ----
   Opens on click of the avatar. Inside: Mein Bereich, Merkliste, Newsletter,
   Hilfe, Benachrichtigungen, Einstellungen, Abmelden. */
.tb-user-wrap { position: relative; display: inline-flex; align-items: center; }
.tb-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: rgba(7, 33, 44, 0.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  padding: 8px;
  z-index: 50;
  backdrop-filter: blur(12px);
}
.tb-user-menu[hidden] { display: none; }
.tb-user-menu-head { padding: 8px 12px 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.tb-user-menu-name { font: 600 14px/1.2 'Inter', system-ui, sans-serif; color: var(--fg); }
.tb-user-menu-mail { font-size: 12px; }
.tb-user-menu-list { list-style: none; margin: 0; padding: 0; }
.tb-user-menu-foot { padding-top: 6px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.tb-user-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--fg-2, rgba(244,241,236,.78));
  text-decoration: none;
  font: 500 14px/1.2 'Inter', system-ui, sans-serif;
}
.tb-user-menu a:hover, .tb-user-menu a:focus-visible {
  background: rgba(255,255,255,.07);
  color: var(--fg);
  outline: none;
}

/* Notification dot on the avatar — replaces a separate bell icon.
   Add data-has-notif="1" / .has-notif on .tb-user to show it. Hookable
   to a real per-user count when we have one. */
/* ---- /notifications inbox ---- */
.page-notifications { max-width: 820px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 56px) 64px; }
.notif-empty { text-align: center; padding: 64px 24px; }
.notif-empty-icon { color: rgba(244,241,236,.35); margin-bottom: 16px; }
.notif-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; }
.notif-item { background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; transition: border-color .14s, background .14s; }
.notif-item.is-unread { border-left: 3px solid var(--accent, #e23a2c); background: rgba(255,255,255,.05); }
.notif-link { display: block; padding: 14px 18px; color: inherit; text-decoration: none; }
.notif-link:hover { background: rgba(255,255,255,.04); }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.notif-kind { font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,241,236,.6); padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.06); }
.notif-kind-broadcast { background: rgba(95,179,56,.18); color: #a5d488; }
.notif-time { font-size: 12px; }
.notif-title { margin: 0 0 4px; font: 600 16px/1.25 'Inter', sans-serif; color: var(--fg); }
.notif-body { margin: 4px 0 0; font-size: 14px; color: rgba(244,241,236,.78); line-height: 1.5; }

.tb-user-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent, #e23a2c);
  color: #fff;
  font: 600 11px/1 'Inter', sans-serif;
}
.tb-user.has-notif::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent, #e23a2c);
  border: 2px solid rgba(10, 50, 66, 1);
  pointer-events: none;
}
.tb-user-wrap .tb-user { position: relative; }
.tb-user.is-signed-in {
  background: var(--accent, #e23a2c);
  color: #fff;
}
.tb-user-initials {
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* (.tb-search inline-form + .topbar.search-open rules removed 2026-05-27.
   The inline-search-toggle was retired when Clemens asked for a dedicated
   /search page; the topbar now exposes a plain link to it.) */

/* ---------- Drawer ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
}
.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 220ms;
}
.drawer.is-open .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: var(--panel, #0a3242);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open .drawer-panel { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.drawer-logo {
  text-decoration: none;
  color: inherit;
}
.drawer-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg, #f4f1ec);
  font-size: 16px;
  cursor: pointer;
}
.drawer-close:hover { background: rgba(255, 255, 255, 0.08); }

.drawer-nav {
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(244, 241, 236, 0.85);
  font: 500 15px/1 'Inter', system-ui, sans-serif;
  transition: background 140ms, color 140ms;
}
.drawer-item:hover,
.drawer-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg, #f4f1ec);
  outline: none;
}
.drawer-item.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--fg, #f4f1ec);
}
.drawer-item-ico {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: rgba(244, 241, 236, 0.65);
}
.drawer-item.is-active .drawer-item-ico { color: var(--accent, #e23a2c); }

.drawer-featured {
  padding: 18px 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 8px;
}
.drawer-featured .eyebrow {
  display: block;
  font: 500 11px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
  margin: 0 0 12px;
}
.drawer-rubriken {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer-rubrik {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 8px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 140ms;
}
.drawer-rubrik:hover,
.drawer-rubrik:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.drawer-rubrik-thumb {
  display: block;
  width: 60px;
  height: 40px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.06);
  background-size: cover;
  background-position: center;
}
.drawer-rubrik-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.drawer-rubrik-body strong {
  font: 600 14px/1.2 'Inter', system-ui, sans-serif;
  color: var(--fg, #f4f1ec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-rubrik-body small {
  font: 500 12px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  color: rgba(244, 241, 236, 0.55);
}

.drawer-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 10px;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: var(--accent, #e23a2c);
  text-decoration: none;
}
.drawer-all-link:hover { text-decoration: underline; }

/* ---------- Popular list (about block): re-grid the inner <a> ---------- */
/* The original CSS made .popular-item the 3-col grid (num | thumb | body),
   but we wrapped the children in <a class="popular-link"> for proper navigation.
   Move the grid onto the link so the columns still apply. */
.popular-item { display: block; padding: 0; border: 0; background: transparent; }
.popular-item:hover { background: transparent; }
.popular-link {
  display: grid;
  grid-template-columns: 28px 168px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-2, rgba(255,255,255,.08));
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.popular-link:hover,
.popular-link:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}
@media (max-width: 720px) {
  .popular-link {
    grid-template-columns: 28px 96px 1fr;
    gap: 10px;
    padding: 10px;
  }
}

/* ---------- Hero slider ----------
   Redesigned 2026-05-27 per Clemens's mockup + Lukas's "make it smaller" ask.
   Old design: full-bleed 16:9 image with overlay text — felt like Netflix/ZDF
   entertainment. New design: split panel — image (≈58%) on the left, structured
   info panel on the right with kicker, title, blurb, meta-grid (Datum/Länge/
   Format) and three CTAs (Jetzt ansehen / Merken / Teilen). Editorial, denser. */
.hero-slider {
  position: relative;
  max-width: var(--content-max);
  margin: 24px auto 32px;
  /* Extra horizontal padding makes room for the chevrons to live in the gutter
     instead of being overlayed on the image (Clemens: arrows outside the slide). */
  padding: 0 clamp(56px, 7vw, 96px);
}
.hero-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.hero-track::-webkit-scrollbar { display: none; }

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  /* No surrounding frame (Lukas/Clemens 2026-05-27) — the image carries its
     own rounded corners; the info panel on the right floats unframed. */
}
/* Left column — clickable image with play affordance. Border-radius lives
   here (not on the parent) so only the image gets rounded corners; the info
   panel stays flush with the page background, matching Clemens's mockup. */
.hero-slide-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #07212c;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
}
.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
.hero-slide-media:hover .hero-slide-img { transform: scale(1.02); }
.hero-slide-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0a3242;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.94;
  transition: transform 180ms, opacity 180ms;
}
.hero-slide-media:hover .hero-slide-play {
  transform: translate(-50%, -50%) scale(1.06);
  opacity: 1;
}

/* Right column — info panel. */
.hero-slide-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 28px 22px 4px;
  min-width: 0; /* prevents long titles from overflowing the grid track */
  color: var(--fg, #f4f1ec);
}
.hero-slide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.85);
  margin: 0 0 10px;
}
.hero-slide-kicker .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent, #e23a2c);
}
.hero-slide-title {
  margin: 0 0 10px;
  /* Clemens: DM Serif Display in Regular for titles. 600 was too bold for the
     editorial tone; 400 (Regular) is the typeface's intended weight. */
  font: 400 30px/1.15 'DM Serif Display', Georgia, serif;
  letter-spacing: -0.005em;
}
.hero-slide-title a {
  color: inherit;
  text-decoration: none;
}
.hero-slide-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero-slide-blurb {
  margin: 0 0 16px;
  font: 400 15px/1.5 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.78);
  /* Cap to ~3 lines so meta-grid + CTAs always fit in the viewport. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-slide-meta {
  display: flex;
  gap: 28px;
  margin: 4px 0 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hero-slide-meta > div { display: flex; flex-direction: column; gap: 4px; }
.hero-slide-meta dt {
  margin: 0;
  font: 500 10.5px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
}
.hero-slide-meta dd {
  margin: 0;
  font: 500 14px/1.2 'Inter', system-ui, sans-serif;
  color: var(--fg, #f4f1ec);
}
.hero-slide-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Bookmark "is-on" → coral fill so users can read state at a glance. Mirrors
   the same affordance used on card bookmarks. */
.hero-bookmark.is-on {
  background: var(--accent, #e23a2c);
  color: #fff;
  border-color: transparent;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 180ms, background 180ms;
  z-index: 2;
}
.hero-slider:hover .hero-nav,
.hero-nav:focus-visible { opacity: 1; }
/* The previous hover rule set `display: inline-block` which dropped the
   button out of flex layout and made the chevron SVG jump up by ~6 px.
   Keep the layout intact; switch backdrop + add a soft ring + slight
   icon scale for affordance without geometric jitter. */
.hero-nav:hover {
  background: rgba(0, 0, 0, 0.78);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}
.hero-nav svg { transition: transform 160ms ease; }
.hero-nav:hover svg { transform: scale(1.12); }
.hero-nav-prev:hover svg { transform: scale(1.12) translateX(-1px); }
.hero-nav-next:hover svg { transform: scale(1.12) translateX(1px); }
/* Chevrons sit centered in the gutter (outside the slide), matching Clemens's
   mockup. We bumped the slider's horizontal padding above so this room exists. */
.hero-nav-prev { left: 8px; }
.hero-nav-next { right: 8px; }
/* Chevrons are visible by default on the new hero (not just on hover), because
   they live in the gutter — they're not covering the image, so showing them
   continuously is a clearer affordance for autoplay-pause/navigation. */
.hero-nav { opacity: 1; background: rgba(0, 0, 0, 0.38); }

.hero-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
/* Pagination indicator — horizontal strokes (not dots), per Clemens's mockup.
   Active stroke is white (coral stays reserved for actual CTAs / brand hits). */
.hero-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 160ms, width 160ms;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.45); }
.hero-dot.is-on {
  background: #fff;
}

/* ---------- Responsive collapse ---------- */
/* > 1100px: everything visible (default) */

/* 920–1100: drop Newsletter inline (priority 4) */
@media (max-width: 1100px) {
  .tb-link-p4 { display: none; }
}

/* 760–920: drop Über uns (priority 3) too */
@media (max-width: 920px) {
  .tb-link-p3 { display: none; }
  .topbar { padding: 10px 18px; }
}

/* Below ~860px the side-by-side hero would crush the info column —
   collapse to image-on-top, info-below (stacked). */
@media (max-width: 860px) {
  .hero-slide { grid-template-columns: 1fr; gap: 0; }
  .hero-slide-info { padding: 18px 20px 22px; }
  .hero-slide-meta { gap: 20px; }
}

/* < 760: hide the entire centre nav; only hamburger + logo + search/user */
@media (max-width: 760px) {
  .tb-nav { display: none; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .hero-slide-title { font-size: 22px; }
  .hero-slide-blurb { -webkit-line-clamp: 2; }
  .hero-slide-play { width: 52px; height: 52px; }
  .hero-slider { margin: 14px 0 24px; padding: 0 14px; }
  .hero-nav { display: none; } /* keep dots; chevrons would crowd the small screen */
}

/* < 480: even tighter */
@media (max-width: 480px) {
  .tb-logo .epd-video { display: none; }
  .hero-slide-title { font-size: 19px; }
  .hero-slide-meta { flex-wrap: wrap; gap: 14px 22px; }
}

/* =========================================================================
   Auth pages (login / register / magic-link)
   ========================================================================= */

.auth-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 56px) 64px;
  min-height: 60vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.auth-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 32px clamp(20px, 4vw, 36px) 28px;
}
.auth-head {
  margin-bottom: 22px;
}
.auth-head .eyebrow {
  display: block;
  font: 500 11px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
  margin: 0 0 8px;
}
.auth-head h1 {
  font: 400 28px/1.15 'DM Serif Display', Georgia, serif;
  margin: 0 0 6px;
  color: var(--fg, #f4f1ec);
}
.auth-lead {
  font: 400 14px/1.55 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.72);
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Form field — shared by auth views (.auth-field) and admin/account forms (.form-field).
   Same selector list applied to every rule so renaming a view between contexts is safe. */
.auth-field, .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
/* First field in any container doesn't need top margin — the container's
   own padding handles the breathing room. Use :first-child rather than
   :first-of-type so labels/divs/etc. all behave the same. */
.auth-field:first-child, .form-field:first-child {
  margin-top: 0;
}
.auth-field > span, .form-field > span {
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.7);
}
.auth-field input, .form-field input,
.auth-field select, .form-field select,
.auth-field textarea, .form-field textarea {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--fg, #f4f1ec);
  font: 500 15px/1.2 'Inter', system-ui, sans-serif;
  outline: none;
  transition: border-color 140ms, background 140ms;
}
.auth-field input:focus, .form-field input:focus,
.auth-field select:focus, .form-field select:focus,
.auth-field textarea:focus, .form-field textarea:focus {
  border-color: var(--accent, #e23a2c);
  background: rgba(255, 255, 255, 0.08);
}
.auth-field input::placeholder, .form-field input::placeholder,
.auth-field textarea::placeholder, .form-field textarea::placeholder {
  color: rgba(244, 241, 236, 0.35);
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 13px/1.2 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.78);
  cursor: pointer;
  margin-top: 2px;
}
.auth-check input { accent-color: var(--accent, #e23a2c); }

.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  margin-top: 6px;
}

/* "oder"-Trenner + Google-Login-Button */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px;
  color: rgba(244,241,236,0.45);
  font: 500 12px/1 'Inter', system-ui, sans-serif;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.12);
}
.auth-google {
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid rgba(0,0,0,0.12);
  font-weight: 600;
}
.auth-google:hover { background: #f3f3f3; }

.auth-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.65);
}
.auth-links-centered { justify-content: center; }
.auth-links a {
  color: var(--accent, #e23a2c);
  text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }
.auth-links-sep { opacity: 0.4; }

.auth-alert {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font: 500 13px/1.5 'Inter', system-ui, sans-serif;
}
.auth-alert-error {
  background: rgba(226, 58, 44, 0.12);
  border: 1px solid rgba(226, 58, 44, 0.35);
  color: #ffd9d3;
}
.auth-alert-ok {
  background: rgba(120, 200, 130, 0.10);
  border: 1px solid rgba(120, 200, 130, 0.30);
  color: #d6f0db;
}

.auth-body {
  font: 400 14px/1.6 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.85);
  margin: 0 0 16px;
}
.auth-body p { margin: 0 0 10px; }
.auth-body p:last-child { margin-bottom: 0; }

/* =========================================================================
   Topbar: signed-in user + logout
   ========================================================================= */

.tb-user-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.tb-user-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
  text-decoration: none;
  color: rgba(244, 241, 236, 0.55);
  font-size: 14px;
  border-radius: 8px;
  transition: color 140ms, background 140ms;
}
.tb-user-logout:hover {
  color: var(--fg, #f4f1ec);
  background: rgba(255, 255, 255, 0.06);
}

/* =========================================================================
   Drawer: foot (logout) when signed in
   ========================================================================= */

.drawer-foot {
  margin-top: auto;
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.drawer-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(244, 241, 236, 0.72);
  font: 500 14px/1 'Inter', system-ui, sans-serif;
  transition: background 140ms, color 140ms;
}
.drawer-logout:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg, #f4f1ec);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .auth-card { padding: 24px 18px 22px; }
  .auth-head h1 { font-size: 24px; }
  .tb-user-logout { display: none; } /* hide on mobile — drawer has the link */
}

/* Account page: admin role badge in the page-head meta line */
.account-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent, #e23a2c);
  color: #fff;
  font: 600 11px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================================
   Admin area
   ========================================================================= */

.page-admin {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px clamp(20px, 4vw, 56px) 64px;
}
.admin-head { margin-bottom: 24px; }
.admin-head-inner > .eyebrow {
  display: block;
  font: 500 11px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
}
.admin-head-inner > h1 {
  font: 400 28px/1.15 'DM Serif Display', Georgia, serif;
  margin: 6px 0 16px;
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-nav-link {
  padding: 8px 14px;
  border-radius: 9px 9px 0 0;
  text-decoration: none;
  color: rgba(244, 241, 236, 0.65);
  font: 500 14px/1 'Inter', system-ui, sans-serif;
  transition: background 140ms, color 140ms;
}
.admin-nav-link:hover { color: var(--fg, #f4f1ec); background: rgba(255, 255, 255, 0.04); }
.admin-nav-link.is-active {
  color: var(--fg, #f4f1ec);
  background: rgba(255, 255, 255, 0.08);
}

/* ---- grouped nav dropdowns ---- */
.admin-dd { position: relative; }
.admin-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.admin-dd > summary::-webkit-details-marker { display: none; }
.admin-dd-caret { font-size: 10px; opacity: 0.6; transition: transform 140ms; }
.admin-dd[open] > summary .admin-dd-caret { transform: rotate(180deg); }
.admin-dd[open] > summary { color: var(--fg, #f4f1ec); background: rgba(255, 255, 255, 0.04); }
.admin-dd-menu {
  position: absolute; top: 100%; left: 0; z-index: 40;
  margin-top: 4px; min-width: 190px;
  display: flex; flex-direction: column;
  background: #16242e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.40);
}
.admin-dd-item {
  padding: 8px 12px; border-radius: 7px; text-decoration: none;
  color: rgba(244, 241, 236, 0.78);
  font: 500 13.5px/1.2 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.admin-dd-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.admin-dd-item.is-active { background: rgba(255, 255, 255, 0.10); color: #fff; }
@media (max-width: 700px) {
  /* On narrow screens let the dropdown flow inline instead of overlapping. */
  .admin-dd-menu { position: static; box-shadow: none; margin: 2px 0 4px 12px; min-width: 0; }
}
.admin-nav-link.is-disabled {
  color: rgba(244, 241, 236, 0.30);
  cursor: not-allowed;
}

.admin-flash {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font: 500 13px/1.5 'Inter', system-ui, sans-serif;
}
.admin-flash-ok  { background: rgba(120, 200, 130, .10); border: 1px solid rgba(120, 200, 130, .30); color: #d6f0db; }
.admin-flash-err { background: rgba(226, 58, 44, .12); border: 1px solid rgba(226, 58, 44, .35); color: #ffd9d3; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-stat {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: var(--fg, #f4f1ec);
  transition: background 140ms;
}
.admin-stat:hover { background: rgba(255, 255, 255, 0.07); }
.admin-stat-num {
  font: 400 32px/1 'DM Serif Display', Georgia, serif;
  margin-bottom: 4px;
}
.admin-stat-label {
  font: 500 12px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.65);
}

.admin-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.admin-card h2 { margin: 0 0 14px; font: 400 18px/1.2 'DM Serif Display', Georgia, serif; }
.admin-card h3 { margin: 0 0 12px; font: 600 16px/1.2 'Inter', system-ui, sans-serif; }
.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-back {
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.65);
  text-decoration: none;
}
.admin-back:hover { color: var(--fg, #f4f1ec); }

.admin-quicklinks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.admin-quicklinks a { color: var(--accent, #e23a2c); text-decoration: none; }
.admin-quicklinks a:hover { text-decoration: underline; }
.admin-quicklinks .muted { color: rgba(244, 241, 236, 0.45); }

/* Search bar inside the users card */
.admin-search {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-search input,
.admin-search select {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--fg, #f4f1ec);
  font: 500 14px/1 'Inter', system-ui, sans-serif;
  outline: none;
}
.admin-search input:focus,
.admin-search select:focus { border-color: var(--accent, #e23a2c); }
.admin-search-clear {
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.55);
  text-decoration: none;
}
.admin-search-clear:hover { color: var(--fg, #f4f1ec); }

/* User table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 14px/1.4 'Inter', system-ui, sans-serif;
}
.admin-table th,
.admin-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.admin-table th {
  font: 500 11px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
}
.admin-table-sub {
  font: 500 12px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  color: rgba(244, 241, 236, 0.45);
  margin-top: 2px;
}
.admin-table-titlelink { color: inherit; text-decoration: none; }
.admin-table-titlelink:hover { color: var(--accent, #ef5c4c); }
.admin-empty {
  padding: 32px 0;
  text-align: center;
  color: rgba(244, 241, 236, 0.55);
}
.admin-pager {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.admin-pager ul { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0; }
.admin-pager a, .admin-pager span {
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.65);
  background: rgba(255, 255, 255, 0.04);
}
.admin-pager .active span { background: var(--accent, #e23a2c); color: #fff; }
.admin-pager a:hover { background: rgba(255, 255, 255, 0.10); color: var(--fg, #f4f1ec); }

.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 11px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.role-admin  { background: var(--accent, #e23a2c); color: #fff; }
.role-client { background: rgba(255, 255, 255, 0.08); color: rgba(244, 241, 236, 0.78); }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 4px;
  vertical-align: middle;
}
.status-on  { background: #6dcb84; }
.status-off { background: #5b6b74; }

.btn-sm { padding: 6px 12px; font-size: 13px; }

/* User detail two-column-ish grid */
.admin-user-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 920px) {
  .admin-user-grid { grid-template-columns: 1fr 1fr; }
  .admin-user-grid > section:first-child { grid-column: 1 / -1; }
}
.admin-user-head {
  display: flex;
  gap: 16px;
  align-items: center;
}
.admin-user-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font: 500 13px/1.4 'Inter', system-ui, sans-serif;
  color: rgba(244, 241, 236, 0.72);
  margin: 4px 0 4px;
}
.admin-user-sub {
  font: 500 12px/1.4 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  color: rgba(244, 241, 236, 0.45);
  margin: 0;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-form-inline {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.muted { color: rgba(244, 241, 236, 0.50); }

/* =========================================================================
   Card pills — small "info chip" on every card communicating that there's
   also a vertical version and/or a text article. Sits in the top-left of
   the media area so it doesn't fight with the duration in the top-right.
   ========================================================================= */

.card-pills {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
  pointer-events: none; /* don't block the card-link */
}
.card-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font: 600 10px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.04em;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}
.card-pill-vertical { background: rgba(226, 58, 44, 0.85); }
.card-pill-article  { background: rgba(46, 110, 132, 0.85); }
.card-pill svg { display: block; }

/* Bildformat overlay — "Segmented Micro-Preview" (Lukas mockup 2026-05-29):
   a FULL-WIDTH bar across the whole bottom of the thumbnail. Format segments
   (landscape/portrait icon + label) are left-aligned and split by thin
   dividers; the duration is folded into the right end of the same bar. A
   bottom-anchored gradient scrim covers the whole bottom area and keeps the
   labels legible over any image. Bottom corners rounded to match the thumb. */
.card-formats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 14px 6px 5px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%);
  border-radius: 0 0 10px 10px;
}
.card-format {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  color: #fff;
  font: 600 10px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.04em;
}
/* divider between format segments only — not before the duration */
.card-format + .card-format:not(.card-format-dur) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.30); }
.card-format svg { display: block; opacity: 0.92; }
/* duration pinned to the right end of the bar */
.card-format-dur { margin-left: auto; opacity: 0.95; }

/* Admin form helpers used by rubrics/panels forms */
.admin-form fieldset {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 18px 18px;
  margin: 0;
}
.admin-form fieldset > legend {
  padding: 0 8px;
  font: 500 12px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,241,236,.6);
}
.admin-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
/* Inside a horizontal row, every field must hug the row top. The shared
   `.form-field { margin-top: 20px }` rule only makes sense for vertically
   stacked forms (login etc.) — applied here it drops every sibling 20px
   below the first child, breaking label alignment. See PA-filter screenshot
   2026-05-27. */
.admin-form-row > .form-field,
.admin-form-row > .auth-field {
  margin-top: 0;
}
.panel-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  padding: 8px 0;
}
.panel-checks-tight {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.admin-assign {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 18px;
}
/* Toolbar (filter + only-assigned) stays fixed; only the row list scrolls. */
.admin-assign-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0 10px;
}
.admin-assign-filter {
  flex: 1 1 240px; min-width: 0; padding: 7px 11px; font-size: 13px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: inherit;
}
.admin-assign-onlysel {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap;
  color: var(--fg-2, rgba(244,241,236,.78)); cursor: pointer;
}
.admin-assign-onlysel input { accent-color: var(--accent, #e23a2c); }
.admin-assign-list { max-height: 340px; overflow-y: auto; }
.admin-assign-empty { padding: 8px 4px; font-size: 13px; }
.admin-assign-row {
  display: flex;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 6px;
}
.admin-assign-row:hover { background: rgba(255,255,255,.04); }
.admin-assign-row input { accent-color: var(--accent, #e23a2c); }

.panel-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.panel-preview-list li {
  padding: 6px 8px;
  border-radius: 6px;
  font: 500 13px/1.4 'Inter', system-ui, sans-serif;
}
.panel-preview-list li:nth-child(odd) { background: rgba(255,255,255,.03); }

select {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--fg, #f4f1ec);
  font: 500 14px/1 'Inter', system-ui, sans-serif;
}

/* Quick-toggle pills in the video list */
.vid-toggle-form { display: inline-block; margin: 0; }
.vid-toggle {
  border: 0;
  cursor: pointer;
  font: 600 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  padding: 4px 10px;
  letter-spacing: 0.04em;
  transition: filter 120ms;
}
.vid-toggle:hover { filter: brightness(1.1); }

.vid-table th:nth-child(n+4):nth-child(-n+8) { text-align: center; }
.vid-table td:nth-child(n+4):nth-child(-n+8) { text-align: center; }

textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--fg, #f4f1ec);
  font: 400 14px/1.5 'Inter', system-ui, sans-serif;
  outline: none;
  resize: vertical;
  min-height: 64px;
}
textarea:focus { border-color: var(--accent, #e23a2c); }

/* Rubric page: move "X Beiträge" pill to bottom-right + prevent wrap.
   The placeholder's title text sits top-left of the thumb, so bottom-right
   keeps the two visually separate. */
.rub-count {
  left: auto !important;
  right: 10px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.72);
  display: inline-block;
}

/* The rub-link wraps both .rub-thumb and .rub-body. As an inline <a> it
   collapses to zero width, dragging the children with it. Make it block. */
.rub-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Topbar "Backend" link, shown only when the logged-in user is admin */
.tb-admin-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin-right: 4px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg, #f4f1ec);
  background: rgba(255, 255, 255, 0.08);
  font: 600 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 140ms;
}
.tb-admin-link:hover {
  background: rgba(255, 255, 255, 0.16);
}
@media (max-width: 760px) {
  /* on narrow screens hide it from the topbar — it's still in the drawer */
  .tb-admin-link { display: none; }
}

/* =========================================================================
   Pipelines dashboard
   ========================================================================= */
.pipelines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.pipeline-card {
  display: block;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: background 140ms, border-color 140ms;
}
a.pipeline-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.pipeline-card.is-placeholder {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
  color: rgba(244, 241, 236, 0.55);
}
.pipeline-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.pipeline-card-head h3 {
  margin: 0;
  font: 400 18px/1.2 'DM Serif Display', Georgia, serif;
  color: var(--fg, #f4f1ec);
}
.pipeline-card-badge {
  font: 600 10px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(120, 200, 130, 0.18);
  color: #b9e8c2;
}
.pipeline-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 0;
}
.pipeline-stats > div {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}
.pipeline-stats b {
  font: 400 18px/1 'DM Serif Display', Georgia, serif;
  display: block;
  margin-bottom: 2px;
}
.pipeline-stats span {
  font: 500 10px/1.3 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
}

/* PA dashboard: status colours + clamps */
.pa-status-bad  { background: rgba(226, 58, 44, 0.18); color: #ffd9d3; }
.pa-status-warn { background: rgba(212, 145, 30, 0.18); color: #ffd99a; }
.pa-entry-id {
  font: 600 11px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--fg, #f4f1ec);
}
.pa-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 320px;
  font-size: 12px;
  color: rgba(244, 241, 236, 0.7);
}
.pa-table td { vertical-align: top; }

/* ---- Bookmark icon states ---------------------------------------------- */
/* The base .card-bookmark style lives in styles.css; here we layer on the
   "active" (in Merkliste) and "disabled" (no real video id) states. */
.card-bookmark { cursor: pointer; }
.card-bookmark.is-on {
  background: var(--accent, #e23a2c);
  color: #fff;
  opacity: 1;
  transform: translateY(0);
}
.card:hover .card-bookmark.is-on { background: var(--accent, #e23a2c); }
.card-bookmark.is-on:hover { background: #b82d22; }
.card-bookmark-disabled {
  cursor: default;
  opacity: 0.35;
  pointer-events: none;
}
.card-bookmark:focus-visible {
  outline: 2px solid var(--accent, #e23a2c);
  outline-offset: 2px;
}

/* ---- Merkliste (saved) page -------------------------------------------- */
.merk-item { display: flex; flex-direction: column; gap: 8px; }
.merk-actions { display: flex; gap: 8px; }
.merk-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font: 500 12.5px/1 'Inter', system-ui, sans-serif;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(244,241,236,0.85);
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.merk-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
.merk-btn-remove:hover {
  border-color: var(--accent, #e23a2c);
  color: var(--accent, #e23a2c);
}
.merk-btn-remove svg { transform: rotate(45deg); /* plus → cross visual cue */ }
.merk-empty {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 14px;
}
.merk-empty-icon { color: rgba(244,241,236,0.4); margin-bottom: 12px; }
.merk-empty h2 { margin: 0 0 8px; font: 400 22px 'DM Serif Display', Georgia, serif; }
.merk-empty p { margin: 0 0 20px; color: rgba(244,241,236,0.7); }

/* Transient toast for "Link kopiert" etc. */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 16px;
  background: rgba(20,20,20,0.95);
  color: #fff;
  font: 500 14px/1.4 'Inter', system-ui, sans-serif;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms, transform 180ms;
  z-index: 9999;
}
/* Only re-enable pointer events when the toast is actually visible — otherwise
   it'd block clicks on whatever's under it while invisible. Inline links inside
   (e.g. "Bitte anmelden") need pointer-events to work. */
.site-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.site-toast a { color: var(--accent-2, #f1735f); text-decoration: underline; }
.site-toast a:hover { color: #fff; }

/* ---- Account additions ------------------------------------------------- */
.acc-tab { /* override anchor → button: keep visual parity */
  background: none;
  border: 0;
  padding: 12px 18px;
  font: 500 14px/1 "Inter", sans-serif;
  color: var(--fg-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  text-decoration: none;
}
.acc-empty {
  text-align: center;
  padding: 30px 20px;
  color: rgba(244,241,236,0.6);
  font: 400 14px/1.5 'Inter', sans-serif;
}
.acc-stats-hint {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(244,241,236,0.5);
}
.acc-edit-readonly {
  margin-top: 24px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.acc-edit-readonly dt { color: rgba(244,241,236,0.55); }
.acc-edit-hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(244,241,236,0.6);
}
.acc-sub-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 14px;
  font: 500 14px/1.3 'Inter', sans-serif;
}
.acc-sub-on      { background: rgba(46, 160, 110, 0.14); color: #6ee7b7; }
.acc-sub-pending { background: rgba(229, 167, 0, 0.14); color: #fcd34d; }

/* ---- Rubrics admin: drag-to-reorder + featured switch ------------------ */
.rubrics-table tr[draggable="true"] { cursor: grab; }
.rubrics-table tr[draggable="true"]:active { cursor: grabbing; }
.rubrics-table tr.is-dragging {
  opacity: 0.5;
  background: rgba(255,255,255,0.04);
}
.rubrics-table tr.is-drop-target {
  outline: 2px dashed var(--accent, #e23a2c);
  outline-offset: -2px;
}
.rubrics-drag-handle {
  width: 30px;
  text-align: center;
  color: rgba(244,241,236,0.4);
  font-size: 18px;
  user-select: none;
  letter-spacing: -3px;
  cursor: grab;
}
.rubrics-drag-handle:active { cursor: grabbing; }
.rubrics-order-num {
  font: 500 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  color: rgba(244,241,236,0.55);
  width: 36px;
}

/* iOS-style toggle, isolated to this view so it doesn't bleed onto other
   admin checkbox usages. */
.rubric-featured-switch { display: inline-block; position: relative; cursor: pointer; }
.rubric-featured-switch input { position: absolute; opacity: 0; pointer-events: none; }
.rubric-featured-track {
  display: inline-block;
  width: 40px;
  height: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.12);
  position: relative;
  transition: background 160ms;
}
.rubric-featured-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms;
}
.rubric-featured-switch input:checked + .rubric-featured-track {
  background: var(--accent, #e23a2c);
}
.rubric-featured-switch input:checked + .rubric-featured-track .rubric-featured-knob {
  transform: translateX(18px);
}
.rubric-featured-switch input:focus-visible + .rubric-featured-track {
  outline: 2px solid var(--accent, #e23a2c);
  outline-offset: 2px;
}

/* ---- Video variant tabs (admin edit) ---------------------------------- */
.variant-tabs { border: 0; padding: 0; }
.variant-tabnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 16px;
}
.variant-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(244,241,236,0.65);
  font: 500 13.5px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.variant-tab:hover { color: #fff; }
.variant-tab.is-on {
  color: #fff;
  border-bottom-color: var(--accent, #e23a2c);
}
.variant-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}
.variant-tab-dot.is-filled { background: #6ee7b7; }
.variant-panel { animation: fadein 180ms ease-out; }

/* Migration hint — appears when PA scraped a source_url for this variant
   but Bunny upload hasn't happened yet. */
.variant-migrate-banner {
  background: rgba(229, 167, 0, 0.12);
  border: 1px solid rgba(229, 167, 0, 0.35);
  color: #fcd34d;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 0 0 16px;
}
.variant-migrate-banner strong { display: block; margin-bottom: 6px; }
.variant-migrate-banner p { margin: 0 0 8px; color: rgba(244, 241, 236, 0.85); font-size: 13.5px; line-height: 1.5; }
.variant-migrate-banner a { color: #fcd34d; text-decoration: underline; font-weight: 500; }
@keyframes fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Quill on the dark admin chrome — match form-field colors */
.article-quill-editor { color: var(--fg, #f4f1ec); }
.ql-toolbar.ql-snow {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10) !important;
  border-radius: 10px 10px 0 0;
}
.ql-container.ql-snow {
  border-color: rgba(255,255,255,0.10) !important;
  border-radius: 0 0 10px 10px;
}
.ql-toolbar.ql-snow .ql-stroke { stroke: rgba(244,241,236,0.75); }
.ql-toolbar.ql-snow .ql-fill   { fill:   rgba(244,241,236,0.75); }
.ql-toolbar.ql-snow .ql-picker-label { color: rgba(244,241,236,0.75); }
.ql-editor.ql-blank::before { color: rgba(244,241,236,0.35) !important; font-style: normal; }

/* ---- Public /beitrag variant + content tabs --------------------------- */
.beitrag-variants {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.beitrag-variant {
  background: none;
  border: 0;
  color: rgba(244,241,236,0.65);
  padding: 8px 14px;
  border-radius: 7px;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.beitrag-variant:hover { color: #fff; }
.beitrag-variant.is-on {
  background: var(--accent, #e23a2c);
  color: #fff;
}

.beitrag-content-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin: 0 0 18px;
}
.beitrag-content-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 16px;
  color: rgba(244,241,236,0.65);
  font: 500 14px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.beitrag-content-tab:hover { color: #fff; }
.beitrag-content-tab.is-on {
  color: #fff;
  border-bottom-color: var(--accent, #e23a2c);
}

/* Format/Download info aside beside the capped player (Lukas 2026-05-28). */
.beitrag-formats {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 16px 18px;
  /* Top-aligned beside the player; renders at full natural height (no internal
     scroll/clip) so the whole cart incl. the Download-Paket button is reachable. */
  align-self: flex-start;
}
.beitrag-formats-h {
  margin: 0 0 12px;
  font: 400 20px/1.2 'DM Serif Display', Georgia, serif;
  color: var(--accent, #ef5c4c);
}
.beitrag-formats-intro { margin: 0 0 12px; font: 400 13px/1.5 'Inter', system-ui, sans-serif; color: var(--fg-2, rgba(244,241,236,.78)); }
.beitrag-fassungen { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.beitrag-fassungen li { display: flex; gap: 8px; font: 400 13px/1.4 'Inter', system-ui, sans-serif; color: var(--fg-2, rgba(244,241,236,.78)); }
.beitrag-fassungen li.is-off { opacity: .45; }
.beitrag-fassung-mark { flex: 0 0 16px; text-align: center; font-weight: 700; color: rgba(244,241,236,.4); }
.beitrag-fassungen li.is-on .beitrag-fassung-mark { color: #5fb338; }
.beitrag-fassungen strong { color: var(--fg, #f4f1ec); }
.beitrag-dl-hint {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
/* logged-in: single clean line, no flex-scatter (text wrapped in one <span>) */
.beitrag-dl-line {
  margin: 0; display: flex; gap: 8px; align-items: flex-start;
  font: 400 13.5px/1.5 'Inter', system-ui, sans-serif;
  color: var(--fg-2, rgba(244,241,236,.78));
}
.beitrag-dl-line svg { flex: 0 0 auto; margin-top: 2px; color: #5fb338; }
.beitrag-dl-line strong { color: var(--fg, #f4f1ec); }
/* logged-out: bold title + a real "Jetzt anmelden" button — clear CTA */
.beitrag-dl-cta-title {
  margin: 0 0 10px; display: flex; gap: 8px; align-items: center;
  font: 600 14.5px/1.3 'Inter', system-ui, sans-serif;
  color: var(--fg, #f4f1ec);
}
.beitrag-dl-cta-title svg { flex: 0 0 auto; }
.beitrag-dl-cta-btn { display: inline-flex; }

/* ===== Fassungen matrix (Lukas 2026-05-29): versions × features, ✓/grey-✗ ===== */
.beitrag-matrix { width: 100%; border-collapse: collapse; font: 400 12.5px/1.3 'Inter', system-ui, sans-serif; }
.beitrag-matrix th, .beitrag-matrix td { padding: 8px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.beitrag-matrix thead th { font: 600 10.5px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .03em; color: rgba(244,241,236,.55); text-transform: uppercase; padding-bottom: 6px; }
.beitrag-matrix tbody th[scope="row"] { text-align: left; padding-right: 8px; }
.beitrag-matrix-name { display: block; font-weight: 600; color: var(--fg, #f4f1ec); }
.beitrag-matrix-sub  { display: block; font-size: 11px; color: rgba(244,241,236,.5); margin-top: 1px; }
.beitrag-matrix tr, .beitrag-matrix tbody tr.is-unavailable { }
.beitrag-matrix tbody tr.is-unavailable { opacity: .42; }
.beitrag-matrix .mx-yes { color: #5fb338; font-weight: 700; }
.beitrag-matrix .mx-no  { color: rgba(244,241,236,.32); font-weight: 700; }

/* ===== Prominent download box (own card) ===== */
.beitrag-downloadbox {
  margin: 26px 0 0;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2, rgba(255,255,255,.10));
  border-radius: 14px;
  padding: 18px 20px;
}
.beitrag-downloadbox-h {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  font: 400 18px/1.2 'DM Serif Display', Georgia, serif;
  color: var(--fg, #f4f1ec);
}
.beitrag-downloadbox-h svg { color: var(--accent, #ef5c4c); }
.beitrag-dl-group + .beitrag-dl-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.beitrag-dl-group-label { display: block; font: 600 10.5px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: rgba(244,241,236,.5); margin-bottom: 9px; }
.beitrag-dl-row { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
  /* Stacked under the player column. */
  .beitrag-formats { max-width: 100% !important; flex-basis: 100% !important; }
  .beitrag-col { max-width: 100% !important; }
}

.beitrag-article {
  /* Left-aligned to match the blurb, variant pills, and content tabs above.
     720px keeps the line length readable; auto-margin on the right means the
     section ends naturally without forcing the article to be visually pulled
     to the centre with empty space on both sides. */
  max-width: 720px;
  margin: 0;
  padding: 8px 0;
  font: 400 16.5px/1.6 'Inter', system-ui, sans-serif;
  color: rgba(244,241,236,0.92);
}
.beitrag-article-byline {
  font-size: 13.5px;
  color: rgba(244,241,236,0.55);
  margin: 0 0 18px;
}
.beitrag-article-body h2,
.beitrag-article-body h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  margin: 28px 0 10px;
  color: #fff;
}
.beitrag-article-body h2 { font-size: 24px; }
.beitrag-article-body h3 { font-size: 19px; }
.beitrag-article-body p  { margin: 0 0 14px; }
.beitrag-article-body a  { color: var(--accent, #e23a2c); }
.beitrag-article-body blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--accent, #e23a2c);
  color: rgba(244,241,236,0.85);
  font-style: italic;
}
.beitrag-article-body ul, .beitrag-article-body ol { padding-left: 22px; margin: 0 0 14px; }
.beitrag-article-body li { margin-bottom: 6px; }

/* Smooth aspect transition when switching landscape ↔ vertical */
.beitrag-player { transition: aspect-ratio 240ms ease, max-width 240ms ease; }
/* The left column's width (= player width) drives where the download panel sits;
   animating its max-width makes the panel glide to/from the player on 16:9 ↔ 9:16. */
.beitrag-col { transition: max-width 320ms cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .beitrag-player, .beitrag-col { transition: none; }
}

/* ============================================================
   LEGAL PAGE — /agb (and shape-compatible /datenschutz, /impressum)
   Numbered § cards on the right, sticky table-of-contents on the left.
   Mobile collapses to single column with TOC above the cards.
   ============================================================ */
.page-legal { max-width: 1180px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 56px) 80px; }

.legal-hero {
  padding: 32px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 36px;
}
.legal-hero-title {
  font: 400 clamp(32px, 4vw, 44px)/1.1 'DM Serif Display', Georgia, serif;
  margin: 6px 0 14px; color: #fff;
}
.legal-hero-lead {
  font: 400 17px/1.55 'Inter', system-ui, sans-serif;
  color: rgba(244,241,236,0.82); max-width: 700px; margin: 0 0 14px;
}
.legal-hero-lead a { color: var(--accent, #e23a2c); }
.legal-hero-meta {
  font: 500 13px/1.4 'Inter', system-ui, sans-serif;
  color: rgba(244,241,236,0.50); margin: 0;
  letter-spacing: 0.01em;
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .legal-layout { grid-template-columns: 1fr; gap: 28px; }
}

.legal-toc {
  position: sticky; top: 24px;
  font: 500 14px/1.4 'Inter', system-ui, sans-serif;
}
.legal-toc-label {
  font: 600 11px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: rgba(244,241,236,0.45);
  margin: 0 0 12px;
}
.legal-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-toc-list a {
  display: grid; grid-template-columns: 38px 1fr;
  align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  color: rgba(244,241,236,0.78); text-decoration: none;
  transition: background 140ms, color 140ms;
}
.legal-toc-list a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.legal-toc-num { color: var(--accent, #e23a2c); font-variant-numeric: tabular-nums; }

.legal-body { display: flex; flex-direction: column; gap: 18px; }

.legal-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 26px 28px 26px 88px;
}
.legal-card-num {
  position: absolute;
  top: 26px; left: 24px;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(226,58,44,0.20), rgba(226,58,44,0.06));
  color: var(--accent, #e23a2c);
  display: flex; align-items: center; justify-content: center;
  font: 400 18px/1 'DM Serif Display', Georgia, serif;
  letter-spacing: 0.02em;
}
.legal-card h2 {
  font: 400 20px/1.25 'DM Serif Display', Georgia, serif;
  margin: 4px 0 10px; color: #fff;
  scroll-margin-top: 90px; /* anchor scroll lands below sticky header */
}
.legal-card p {
  font: 400 15.5px/1.65 'Inter', system-ui, sans-serif;
  color: rgba(244,241,236,0.88); margin: 0;
}
/* Intro/preamble card has no letter badge — drop the reserved left gutter and
   space its stacked paragraphs. */
.legal-card-intro { padding-left: 28px; }
.legal-card-intro .legal-card-body > p + p { margin-top: 12px; }
/* Numbered sub-points within a lettered section (verbatim AGB). <ol> supplies
   the 1·2·3 numbering; marker tinted with the accent to echo the letter badge. */
.legal-points {
  margin: 0; padding-left: 1.5em;
  display: flex; flex-direction: column; gap: 12px;
  font: 400 15.5px/1.65 'Inter', system-ui, sans-serif;
  color: rgba(244,241,236,0.88);
}
.legal-points li { padding-left: 4px; }
.legal-points li::marker { color: var(--accent, #e23a2c); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .legal-card { padding: 22px 20px 22px 20px; }
  .legal-card-num { position: static; margin-bottom: 12px; }
}

.legal-footer {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font: 400 13.5px/1.55 'Inter', sans-serif;
  color: rgba(244,241,236,0.55);
}
.legal-footer p { margin: 0 0 6px; }
.legal-footer a { color: var(--accent, #e23a2c); }

/* ============================================================
   CONTACT PAGE — /kontakt
   Form left, contact aside right. Aside has people cards with
   accent stripes per role + an address card.
   ============================================================ */
.page-contact { max-width: 1180px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 56px) 80px; }

.contact-hero {
  padding: 32px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 36px;
}
.contact-hero-title {
  font: 400 clamp(32px, 4vw, 44px)/1.1 'DM Serif Display', Georgia, serif;
  margin: 6px 0 14px; color: #fff;
}
.contact-hero-lead {
  font: 400 17px/1.55 'Inter', system-ui, sans-serif;
  color: rgba(244,241,236,0.82); max-width: 700px; margin: 0;
}

.contact-alert {
  max-width: 880px; margin: 0 auto 22px;
  padding: 12px 16px; border-radius: 8px;
  font: 500 14px/1.4 'Inter', sans-serif;
}
.contact-alert-ok    { background: rgba(64,180,120,0.12); color: #aef1c8; border: 1px solid rgba(64,180,120,0.30); }
.contact-alert-error { background: rgba(226,58,44,0.12); color: #ffc6bf; border: 1px solid rgba(226,58,44,0.30); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 920px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

.contact-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.contact-form-intro {
  margin: 0 0 4px;
  font: 400 14px/1.5 'Inter', sans-serif;
  color: rgba(244,241,236,0.62);
}
.contact-row.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 540px) {
  .contact-row.two { grid-template-columns: 1fr; }
}
.contact-check {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 14px/1.5 'Inter', sans-serif;
  color: rgba(244,241,236,0.78);
  margin-top: 4px;
}
.contact-check input { margin-top: 3px; }
.contact-check a { color: var(--accent, #e23a2c); }
.contact-submit { align-self: flex-start; margin-top: 6px; }

.contact-aside {
  display: flex; flex-direction: column; gap: 22px;
}
.contact-aside-title {
  font: 400 18px/1.2 'DM Serif Display', Georgia, serif;
  margin: 0; color: #fff;
}
.contact-aside-lead {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: rgba(244,241,236,0.62);
  margin: -8px 0 0;
}

.contact-people { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-person {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  transition: background 140ms, border-color 140ms;
}
.contact-person:hover {
  background: rgba(255,255,255,0.05);
  border-left-color: var(--accent, #e23a2c);
}
.contact-person-redaktion { border-left-color: #e23a2c; }
.contact-person-vertrieb  { border-left-color: #f3a738; }
.contact-person-technik   { border-left-color: #5cc6ff; }

.contact-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: rgba(244,241,236,0.92);
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.contact-person-redaktion .contact-avatar { background: rgba(226,58,44,0.18); color: #ffb6ad; }
.contact-person-vertrieb  .contact-avatar { background: rgba(243,167,56,0.18); color: #ffd99a; }
.contact-person-technik   .contact-avatar { background: rgba(92,198,255,0.18); color: #a8e2ff; }

.contact-person-body { display: flex; flex-direction: column; gap: 2px; }
.contact-person-role {
  font: 600 10.5px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: rgba(244,241,236,0.50);
}
.contact-person-name { font: 600 15px/1.3 'Inter', sans-serif; color: #fff; }
.contact-person-title { font: 400 13px/1.4 'Inter', sans-serif; color: rgba(244,241,236,0.65); }
.contact-person-email {
  margin-top: 4px;
  font: 500 13.5px/1.3 'Inter', sans-serif;
  color: var(--accent, #e23a2c);
  text-decoration: none;
  word-break: break-word;
}
.contact-person-email:hover { text-decoration: underline; }

.contact-address {
  padding: 18px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
.contact-address h3 {
  font: 600 11px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: rgba(244,241,236,0.50);
  margin: 0 0 10px;
}
.contact-address p {
  margin: 0 0 8px;
  font: 400 14px/1.55 'Inter', sans-serif;
  color: rgba(244,241,236,0.85);
}
.contact-address a {
  color: var(--accent, #e23a2c); text-decoration: none;
}
.contact-address a:hover { text-decoration: underline; }

/* Download dropdown — one per kind. Native <details>/<summary> for zero-JS
   toggle. The summary looks like a button; opening it shows the resolution
   list anchored below. */
.beitrag-download-menu {
  position: relative;
  display: inline-block;
}
.beitrag-download-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.beitrag-download-menu > summary::-webkit-details-marker { display: none; }
.beitrag-download-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  transition: transform 0.15s ease;
}
.beitrag-download-menu[open] .beitrag-download-caret { transform: rotate(180deg); }
.beitrag-download-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  background: #0f2533;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.beitrag-download-option {
  display: block;
  padding: 8px 12px;
  border-radius: 5px;
  color: rgba(244,241,236,0.92);
  font: 500 13px/1.3 'Inter', system-ui, sans-serif;
  text-decoration: none;
  transition: background 100ms;
}
.beitrag-download-option:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}

/* Download bar — one row of small buttons under the player */
.beitrag-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  max-width: 720px;
}
.beitrag-downloads .btn { padding: 6px 12px; font-size: 12.5px; }
.beitrag-downloads .btn svg { transform: rotate(90deg); /* chev → down arrow */ margin-right: 4px; }

/* Migration dashboard variant chips */
.migration-variants { display: flex; flex-direction: column; gap: 6px; }
.migration-variant-link {
  display: inline-flex;
  flex-direction: column;
  padding: 6px 10px;
  border: 1px solid rgba(229, 167, 0, 0.35);
  background: rgba(229, 167, 0, 0.08);
  color: #fcd34d;
  border-radius: 8px;
  text-decoration: none;
  font: 500 12.5px/1.3 'Inter', system-ui, sans-serif;
  width: max-content;
  max-width: 100%;
}
.migration-variant-link:hover {
  background: rgba(229, 167, 0, 0.18);
  border-color: rgba(229, 167, 0, 0.6);
}
.migration-variant-kind { font-weight: 600; }

/* ---- Admin notification bell + unread row highlight ------------------- */
.admin-nav-bell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.admin-nav-bell-count {
  background: var(--accent, #e23a2c);
  color: #fff;
  font: 600 10px/1 'Inter', system-ui, sans-serif;
  border-radius: 999px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}
.notif-unread td { background: rgba(229, 167, 0, 0.05); }
.notif-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent, #e23a2c); }

/* Bulk action bar on /admin/videos */
.vid-bulkbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font: 500 13px/1.2 'Inter', system-ui, sans-serif;
  position: sticky;
  top: 0;
  z-index: 2;
}
.vid-bulkbar select {
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--fg, #f4f1ec);
}
.vid-bulkbar #vid-bulk-count { color: var(--accent, #e23a2c); font-weight: 600; }

/* Tag chips (cloud on /tags, inline on /beitrag) */
.tag-cloud {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(244,241,236,0.85);
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.tag-chip:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.20); }
.tag-chip-name { font-weight: 500; }
.tag-chip-count {
  font-size: 11px;
  color: rgba(244,241,236,0.55);
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 999px;
}
.tag-chip-sm { padding: 4px 10px; font-size: 12px; }
.beitrag-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

/* ---- epd-Wissens-Assistent (/search) --------------------------------- */
.srch-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  margin: 16px 0 12px;
}
.srch-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg, #f4f1ec);
  font: 500 17px/1.3 'Inter', sans-serif;
}
.srch-input input::placeholder { color: rgba(244,241,236,0.4); }
.srch-mic {
  background: none;
  border: 0;
  color: rgba(244,241,236,0.6);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.srch-mic:hover { color: var(--accent, #e23a2c); }
.srch-mic.is-listening { color: var(--accent, #e23a2c); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

.srch-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; }
.srch-chip-quick {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font: 400 12px/1.2 'Inter', sans-serif;
  color: rgba(244,241,236,0.7);
  text-decoration: none;
}
.srch-chip-quick:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ---- Filter block on /search (Clemens 2026-05-26) ----
   Three composable filter rows: Format / Rubrik / Tag. URL-param driven so
   filters are linkable and shareable. Active chips lift visually (border +
   color); removable chips in the "active filter" strip carry an × icon. */
.srch-filters { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 22px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.srch-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.srch-filter-label { font: 500 12px/1 'Inter', sans-serif; letter-spacing: .04em; color: rgba(244,241,236,.55); margin-right: 4px; min-width: 52px; }
.srch-filter-chip {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font: 500 13px/1.2 'Inter', sans-serif;
  color: var(--fg);
  text-decoration: none;
  background: rgba(255,255,255,.04);
  transition: background .14s, border-color .14s, color .14s;
}
.srch-filter-chip:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.srch-filter-chip.is-on { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.38); color: #fff; }
.srch-filter-chip-tag { font-size: 12px; padding: 5px 10px; }
.srch-filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 6px; }
.srch-filter-active .is-active { background: var(--accent); border-color: transparent; color: #fff; }
.srch-filter-active .is-active:hover { background: var(--accent); filter: brightness(1.08); }
.srch-filter-reset { font: 500 12px/1.2 'Inter', sans-serif; color: rgba(244,241,236,.7); text-decoration: underline; margin-left: 6px; }
.srch-filter-reset:hover { color: var(--fg); }

/* Browse-mode result grid — reuses the rubric grid layout. */
.srch-browse-results { margin: 22px 0 64px; }
.srch-browse-head { margin: 0 0 14px; }
.srch-browse-head h2 { margin: 0 0 4px; font: 400 22px/1.2 'DM Serif Display', Georgia, serif; color: var(--fg); }

.srch-narrative {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(226,58,44,0.10), rgba(226,58,44,0));
  border-left: 3px solid var(--accent, #e23a2c);
  border-radius: 0 10px 10px 0;
  margin: 18px 0 22px;
  font: 500 15.5px/1.45 'Inter', sans-serif;
  color: rgba(244,241,236,0.92);
}
/* Narrative spinner — three dots that bounce in a wave while the LLM is
   composing the "Ich verstehe das als …" sentence. The previous attempt
   tried to animate the CSS `content` property (which browsers don't actually
   tween), so it appeared static. Real dots, real keyframes. */
.srch-narrative-spinner {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 16px;
  padding-top: 2px;
}
.srch-narrative-spinner .srch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #e23a2c);
  animation: srch-bounce 1.05s infinite cubic-bezier(0.4, 0.0, 0.2, 1) both;
}
.srch-narrative-spinner .srch-dot:nth-child(2) { animation-delay: 0.14s; }
.srch-narrative-spinner .srch-dot:nth-child(3) { animation-delay: 0.28s; }

.srch-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
/* `display: grid` above outranks the UA [hidden] { display:none } rule, so
   results.hidden=true silently failed to hide the container — the quick
   "Sofort-Treffer" cards lingered even after the AI replaced/rejected them.
   This restores [hidden] for the results grid. */
.srch-results[hidden] { display: none; }
.srch-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; transition: border-color 140ms, transform 140ms; }
.srch-card:hover { border-color: rgba(255,255,255,0.20); transform: translateY(-2px); }
.srch-card-link { display: block; text-decoration: none; color: inherit; }
.srch-card-thumb {
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.4) center/cover no-repeat;
}
.srch-card-body { padding: 14px 16px 16px; }
.srch-card-kicker {
  display: block;
  font: 500 11.5px/1 'Inter', sans-serif;
  color: rgba(244,241,236,0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.srch-card-title { font: 400 17px/1.3 'DM Serif Display', Georgia, serif; margin: 0 0 10px; color: #fff; }
.srch-card-why { margin: 0; font: 400 13px/1.5 'Inter', sans-serif; min-height: 18px; }
.srch-card-why-spinner { color: rgba(244,241,236,0.4); }
.srch-card-why-text { display: inline; }

/* "Maybe" tier — faded card + label so the user sees we're being honest
   that this is a tangential hit, not a direct match. */
.srch-card-maybe { opacity: 0.72; }
.srch-card-maybe:hover { opacity: 1; }
.srch-card-maybe-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(229, 167, 0, 0.92);
  color: #1d1d1d;
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
}
.srch-card-thumb { position: relative; }

/* Collapsed "Weniger relevant" section — keeps maybe-rated hits accessible
   without diluting the perceived quality of the main result list. Hidden
   behind a single click; default-closed. */
.srch-maybe-wrap {
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
}
.srch-maybe-wrap > .srch-maybe-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 600 13px/1.4 'Inter', sans-serif;
  color: rgba(255,255,255,0.72);
  user-select: none;
  padding: 6px 0;
}
.srch-maybe-wrap > .srch-maybe-summary::-webkit-details-marker { display: none; }
.srch-maybe-wrap > .srch-maybe-summary:hover { color: #fff; }
.srch-maybe-icon {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.15s ease;
}
.srch-maybe-wrap[open] .srch-maybe-icon { transform: rotate(180deg); }
.srch-maybe-hint { font-weight: 400; font-size: 12px; }
.srch-results-maybe { margin-top: 16px; }

/* "Sofort-Treffer" tier — visible while the LLM is still thinking. Slightly
   subdued so the user understands these will be refined. */
.srch-card-instant {
  opacity: 0.92;
  outline: 1px solid rgba(255,255,255,0.08);
}
.srch-card-instant-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(255,255,255,0.92);
  color: #1d1d1d;
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
}
.srch-card-why-instant { font-style: italic; }

/* Assistent-status throbber sits between narrative and results while the
   LLM is reranking. Three dots breathe in sequence — visible enough that
   the user knows something is happening, calm enough not to nag. */
.srch-assistant-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(226, 58, 44, 0.10);
  color: rgba(244, 241, 236, 0.85);
  border-radius: 999px;
  font: 500 13px/1 'Inter', sans-serif;
  margin: 0 0 16px;
}
/* HTML's [hidden] attribute defaults to display:none, but our class rule
   above sets display:inline-flex with higher specificity. Reassert hidden. */
.srch-assistant-status[hidden] { display: none; }
/* Assistant-status dots — share the bounce-wave animation with the narrative
   spinner so both loading states feel like they belong to the same product. */
.srch-thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #e23a2c);
  animation: srch-bounce 1.05s infinite cubic-bezier(0.4, 0.0, 0.2, 1) both;
}
.srch-thinking-dot:nth-child(2) { animation-delay: 0.14s; }
.srch-thinking-dot:nth-child(3) { animation-delay: 0.28s; }

/* Bounce wave: dots drop low + dim, then pop up + bright. Slight overshoot
   on the scale gives them a tactile feel without being noisy. */
@keyframes srch-bounce {
  0%, 60%, 100% {
    opacity: 0.30;
    transform: translateY(0) scale(0.65);
  }
  30% {
    opacity: 1.0;
    transform: translateY(-5px) scale(1.15);
  }
}
/* Respect users who asked the OS to dial down motion — keep the indicator
   visible but skip the bounce. */
@media (prefers-reduced-motion: reduce) {
  .srch-thinking-dot,
  .srch-narrative-spinner .srch-dot {
    animation: srch-pulse 1.4s infinite ease-in-out both;
  }
  @keyframes srch-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1.0;  }
  }
}

/* Smooth swap between quick → curated. When the dataset attribute flips
   from "quick" to "curated" the cards already animate via the existing
   transition on .srch-card; this is just a subtle reflow indicator. */
.srch-results[data-tier="curated"] .srch-card { animation: fadeIn 240ms ease-out; }
@keyframes fadeIn { from { opacity: 0.2; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.srch-empty-state { padding: 60px 20px; text-align: center; }
.srch-empty-state h3 { margin: 0 0 8px; font: 400 22px 'DM Serif Display', Georgia, serif; }

/* ---- "Ähnliche Beiträge" rail on /beitrag ---------------------------- */
.similar-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-width: 100%;
}
.similar-card {
  display: block;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms, transform 140ms;
}
.similar-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }
.similar-thumb { aspect-ratio: 16 / 9; background: rgba(0,0,0,0.4) center/cover no-repeat; }
.similar-body { padding: 10px 12px 12px; }
.similar-kicker {
  display: block;
  font: 500 10.5px/1 'Inter', sans-serif;
  color: rgba(244,241,236,0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.similar-title { font: 500 13.5px/1.35 'Inter', sans-serif; color: #fff; display: block; }

/* ===== Beitrag Download-Paket cart (Phase A, 2026-06-02) ===== */
.beitrag-dl-intro {
  margin: -6px 0 14px;
  font: 400 13px/1.5 'Inter', system-ui, sans-serif;
  color: rgba(244,241,236,0.62);
}
.beitrag-dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.beitrag-dl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.beitrag-dl-item:hover { background: rgba(255,255,255,0.055); }
.beitrag-dl-check { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; cursor: pointer; min-width: 0; }
.beitrag-dl-check input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent, #ef5c4c); cursor: pointer; }
.beitrag-dl-name { font: 500 13.5px/1.3 'Inter', system-ui, sans-serif; color: var(--fg, #f4f1ec); }
.beitrag-dl-name small { font-weight: 400; color: rgba(244,241,236,0.45); }
.beitrag-dl-res {
  flex: 0 0 auto;
  font: 400 12px/1 'Inter', system-ui, sans-serif;
  color: var(--fg, #f4f1ec);
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 5px 7px;
}
.beitrag-dl-pkg {
  margin: 16px 0 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  border: 1px dashed rgba(255,255,255,0.16);
}
.beitrag-dl-pkg-label {
  display: block;
  font: 600 10px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent, #ef5c4c);
  margin-bottom: 4px;
}
.beitrag-dl-pkg-body { font: 400 13px/1.45 'Inter', system-ui, sans-serif; color: rgba(244,241,236,0.85); }
.beitrag-dl-btn { width: 100%; justify-content: center; }
.beitrag-dl-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.beitrag-dl-note { margin: 10px 0 8px; font: 400 11.5px/1.5 'Inter', system-ui, sans-serif; color: rgba(244,241,236,0.55); }

/* Fassung rows merged into the right-side panel (mock1/mock3 + mock5 synthesis) */
.beitrag-formats-h { display: flex; align-items: center; gap: 8px; }
.beitrag-formats-h svg { color: var(--accent, #ef5c4c); }
.beitrag-fassung-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.beitrag-fassung {
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
}
.beitrag-fassung.is-unavailable { opacity: 0.5; }
.beitrag-fassung-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.beitrag-fassung-name { font: 600 14.5px/1.2 'Inter', system-ui, sans-serif; color: var(--fg, #f4f1ec); }
.beitrag-fassung-sub { font: 400 11.5px/1.3 'Inter', system-ui, sans-serif; color: rgba(244,241,236,0.5); }
.beitrag-fassung-attrs { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-bottom: 9px; }
.beitrag-attr { font: 500 11px/1.3 'Inter', system-ui, sans-serif; display: inline-flex; align-items: center; gap: 3px; }
.beitrag-attr.is-yes { color: #6cc24a; }
.beitrag-attr.is-no  { color: rgba(244,241,236,0.30); }
.beitrag-fassung-unavail { font: 500 12px/1.3 'Inter', system-ui, sans-serif; color: rgba(244,241,236,0.45); font-style: italic; }
.beitrag-fassung-formats { display: flex; flex-wrap: wrap; gap: 8px; }
.beitrag-fmt-pick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 8px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
}
.beitrag-fmt-pick:hover { border-color: var(--accent, #ef5c4c); }
.beitrag-fmt-pick input { width: 15px; height: 15px; accent-color: var(--accent, #ef5c4c); cursor: pointer; }
.beitrag-fmt-tag { font: 600 12px/1 'Inter', system-ui, sans-serif; color: var(--fg, #f4f1ec); }
.beitrag-fmt-pick .beitrag-dl-res { margin-left: 2px; padding: 3px 5px; font-size: 11px; }

/* Download queue (Option B — direct downloads, status per file) */
.beitrag-dlq { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.beitrag-dlq-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  font: 400 12px/1.3 'Inter', system-ui, sans-serif;
}
.beitrag-dlq-name { color: var(--fg, #f4f1ec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beitrag-dlq-status { flex: 0 0 auto; color: rgba(244,241,236,0.55); }
.beitrag-dlq-item.is-done { border-color: rgba(108,194,74,0.4); }
.beitrag-dlq-item.is-done .beitrag-dlq-status { color: #6cc24a; }
.beitrag-dlq-hint { margin: 9px 0 0; font: 400 11.5px/1.45 'Inter', system-ui, sans-serif; color: rgba(244,241,236,0.5); }

/* ============================================================================
   Hilfe & Glossar (/help) — the page classes had NO styling (browser-default
   dl/dt/dd), so the explained terms didn't stand out. Definition layout: the
   TERM pops in the accent colour on the left, the explanation sits to the right.
   ========================================================================== */
.page-help { max-width: 940px; margin: 0 auto; padding: 0 0 64px; }
.page-help .page-head { margin-bottom: 6px; }

.help-faqs { display: flex; flex-direction: column; gap: 38px; margin-top: 30px; }

.help-faq-block > h2 {
  font: 400 26px/1.2 'DM Serif Display', Georgia, serif;
  color: var(--fg, #f4f1ec);   /* near-white headline (the terms keep the accent) */
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.help-faq-block > p.muted { font: 400 14px/1.6 'Inter', system-ui, sans-serif; }

.help-faq-list { margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.help-faq-list:last-child { margin-bottom: 0; }

/* Each explained expression: a 2-column row (term | explanation). The accent
   term + the left accent bar on hover make it clearly "stick out". */
.help-faq-item {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 6px 24px;
  align-items: baseline;
  padding: 13px 14px 13px 16px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.help-faq-item + .help-faq-item { border-top: 1px solid rgba(255,255,255,.06); }
.help-faq-item:hover { background: rgba(255,255,255,.035); border-left-color: var(--accent, #ef5c4c); }

.help-faq-item dt {
  font: 700 15.5px/1.4 'Inter', system-ui, sans-serif;
  color: var(--accent, #ef5c4c);
  letter-spacing: .005em;
}
.help-faq-item dd {
  margin: 0;
  font: 400 15px/1.62 'Inter', system-ui, sans-serif;
  color: var(--fg, #f4f1ec);
}
.help-faq-item dd strong { font-weight: 700; color: #fff; }
.help-faq-item dd a { color: var(--accent, #ef5c4c); text-decoration: underline; text-underline-offset: 2px; }

.help-cta {
  margin-top: 44px;
  padding: 26px 28px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  text-align: center;
}
.help-cta h3 { font: 400 22px/1.25 'DM Serif Display', Georgia, serif; margin: 0 0 8px; }
.help-cta p  { font: 400 14px/1.6 'Inter', system-ui, sans-serif; color: var(--fg-2, rgba(244,241,236,.78)); margin: 0 0 16px; }

@media (max-width: 640px) {
  /* Stack term over explanation on narrow screens. */
  .help-faq-item { grid-template-columns: 1fr; gap: 3px; }
  .help-faq-item dt { font-size: 16px; }
}