/* ═══════════════════════════════════════════════════════════════════════════
   shortfeed.de – Main Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (Light Theme) ─────────────────────────────────── */
:root {
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --brand-900: #0c4a6e;
  --brand-text-on-dark: #bae6fd;

  --accent:    #f59e0b;
  --accent-red:#ef4444;

  --bg-page:   #f9fafb;
  --bg-card:   #ffffff;
  --bg-nav:    #ffffff;
  --bg-vote:   #f9fafb;
  --bg-muted:  #f3f4f6;
  --bg-input:  #f3f4f6;
  --bg-tag:    #f3f4f6;

  --border:       #e5e7eb;
  --border-vote:  #f3f4f6;
  --border-light: #f9fafb;

  --text-900: #111827;
  --text-800: #1f2937;
  --text-700: #374151;
  --text-600: #4b5563;
  --text-500: #6b7280;
  --text-400: #9ca3af;
  --text-300: #d1d5db;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  --transition: .15s ease;
  --radius:     .75rem;
}

/* ── Dark Theme ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page:   #0f172a;
  --bg-card:   #1e293b;
  --bg-nav:    #1e293b;
  --bg-vote:   #162032;
  --bg-muted:  #263348;
  --bg-input:  #263348;
  --bg-tag:    #263348;
  --border:       #3f526b;
  --border-vote:  #263348;
  --border-light: #263348;
  --text-900: #f1f5f9; --text-800: #e2e8f0; --text-700: #cbd5e1;
  --text-600: #94a3b8; --text-500: #7c8fa5; --text-400: #64748b; --text-300: #334155;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.5);
  --brand-500: #38bdf8; --brand-600: #38bdf8; --brand-700: #7dd3fc;
  --brand-50:  #0c4a6e33; --brand-100: #0c4e7a;
  --brand-text-on-dark: #7dd3fc;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-page:#0f172a; --bg-card:#1e293b; --bg-nav:#1e293b; --bg-vote:#162032;
    --bg-muted:#263348; --bg-input:#263348; --bg-tag:#263348;
    --border:#3f526b; --border-vote:#263348; --border-light:#263348;
    --text-900:#f1f5f9; --text-800:#e2e8f0; --text-700:#cbd5e1;
    --text-600:#94a3b8; --text-500:#7c8fa5; --text-400:#64748b; --text-300:#334155;
    --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 8px rgba(0,0,0,.4); --shadow-lg:0 10px 25px rgba(0,0,0,.5);
    --brand-500:#38bdf8; --brand-600:#38bdf8; --brand-700:#7dd3fc;
    --brand-50:#0c4a6e33; --brand-100:#0c4e7a; --brand-text-on-dark:#7dd3fc;
  }
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-page);
  color: var(--text-800);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background var(--transition), color var(--transition);
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
main { flex: 1; padding: 1.5rem 0 3rem; }

/* ── Navigation ──────────────────────────────────────────────────────────── */
nav#mainNav {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  /* isolation verhindert dass Kinder den Stacking-Context durchbrechen */
  isolation: isolate;
  transition: background var(--transition), border-color var(--transition);
}
.nav-inner {
  display: flex; justify-content: space-between; align-items: center; height: 4rem;
}
.nav-left { display: flex; align-items: center; }
.nav-right { display: flex; align-items: center; gap: .75rem; }

/* Logo */
.logo { display: flex; align-items: center; gap: .5rem; }
.logo-icon {
  background: var(--brand-600); color: #fff;
  border-radius: .5rem;
  transition: background var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.logo-icon-svg {
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="%230284c7"/><path d="M8 10 L16 6 L24 10 L24 14 L20 16 L24 18 L24 22 L16 26 L8 22 L8 18 L12 16 L8 14 Z" fill="none" stroke="white" stroke-width="2" stroke-linejoin="round"/><circle cx="16" cy="16" r="2.5" fill="white"/></svg>');
  background-repeat:no-repeat;
  background-size: cover;
  height: 32px;
  width: 32px;
}
.logo:hover .logo-icon { background: var(--brand-700); }
.logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-900); }
.logo-text .accent { color: var(--brand-600); }
.logo-tld { color: var(--text-400); font-weight: 400; }
.footer-logo .logo-text { font-size: 1.1rem; }

/* Search */
.search-wrap { display: none; position: relative; }
@media (min-width: 768px) { .search-wrap { display: block; } }
.search-wrap input {
  padding: .375rem 1rem .375rem 2.25rem;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid transparent;
  font-size: .875rem; width: 10rem; color: var(--text-800);
  transition: width var(--transition), border-color var(--transition), background var(--transition);
  outline: none;
}
@media (min-width: 1024px) { .search-wrap input { width: 12rem; } .search-wrap input:focus { width: 16rem; } }
.search-wrap input::placeholder { color: var(--text-400); }
.search-wrap input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-50); background: var(--bg-card); }
.search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-400); font-size: .75rem; pointer-events: none; }

/* Theme toggle */
.theme-toggle-wrap { display: none; position: relative; }
@media (min-width: 768px) { .theme-toggle-wrap { display: block; } }
.theme-toggle {
  display: flex; align-items: center; gap: .3rem;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .55rem; font-size: .7rem; font-weight: 600; color: var(--text-600);
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.theme-toggle:hover { color: var(--text-900); background: var(--bg-card); }
.theme-dropdown {
  display: none; position: absolute; top: calc(100% + .375rem); right: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: .5rem; box-shadow: var(--shadow-md); min-width: 8rem; z-index: 200;
  overflow: hidden;
}
.theme-toggle-wrap.open .theme-dropdown { display: block; }
.theme-option {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; font-size: .8rem; font-weight: 600; color: var(--text-700);
  cursor: pointer; width: 100%; text-align: left;
  transition: background var(--transition), color var(--transition);
}
.theme-option:hover { background: var(--bg-muted); color: var(--text-900); }
.theme-option.selected { color: var(--brand-600); }
.theme-option i { width: .875rem; text-align: center; }

/* User pill */
.user-pill-wrap { position: relative; }
.user-pill {
  display: flex; align-items: center; gap: .5rem;
  background: var(--brand-50); padding: .3rem .6rem;
  border-radius: 999px; border: 1px solid var(--brand-100); cursor: pointer;
  transition: background var(--transition);
}
.user-pill:hover { background: var(--brand-100); }
.user-pill-name { font-size: .8rem; font-weight: 600; color: var(--text-700); }
.user-pill-dropdown {
  display: none; position: absolute; top: calc(100% + .375rem); right: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: .5rem; box-shadow: var(--shadow-md); min-width: 11rem; z-index: 200; overflow: hidden;
}
.user-pill-wrap.open .user-pill-dropdown { display: block; }
.user-pill-menu-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .75rem; font-size: .8rem; font-weight: 600; color: var(--text-700);
  cursor: pointer; width: 100%; text-align: left;
  transition: background var(--transition), color var(--transition);
}
.user-pill-menu-item:hover { background: var(--bg-muted); color: var(--text-900); }
.user-pill-menu-item i { width: .875rem; text-align: center; color: var(--text-400); }
.user-pill-menu-item.logout { color: #ef4444; border-top: 1px solid var(--border); }
.user-pill-menu-item.logout i { color: #ef4444; }
.user-pill-menu-item.logout:hover { background: #fee2e2; }

/* Nav buttons */
.btn-primary {
  display: none; align-items: center; gap: .4rem;
  background: var(--brand-600); color: #fff;
  font-size: .8rem; font-weight: 600; padding: .45rem .9rem;
  border-radius: .5rem; box-shadow: var(--shadow-sm);
  transition: background var(--transition);
}
@media (min-width: 640px) { .btn-primary { display: flex; } }
.btn-primary:hover { background: var(--brand-700); }

.btn-nav-secondary {
  display: none; align-items: center; gap: .4rem;
  background: var(--bg-muted); color: var(--text-700);
  font-size: .8rem; font-weight: 600; padding: .45rem .9rem;
  border-radius: .5rem; border: 1px solid var(--border);
  transition: background var(--transition);
}
@media (min-width: 640px) { .btn-nav-secondary { display: flex; } }
.btn-nav-secondary:hover { background: var(--border); }

/* Mobile menu */
.mobile-menu-btn {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-600); font-size: 1.2rem; padding: .35rem;
  border-radius: .375rem; transition: color var(--transition);
}
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }
.mobile-menu-btn:hover { color: var(--text-900); }

.mobile-menu {
  display: none; background: var(--bg-card); border-top: 1px solid var(--border);
  padding: 1rem;
}
.mobile-menu.open { display: block; }

.mobile-search {
  position: relative; margin-bottom: 1rem;
  display: flex; align-items: center;
  background: var(--bg-input); border-radius: .5rem;
  border: 1px solid var(--border); overflow: hidden;
}
.mobile-search i { position: absolute; left: .75rem; color: var(--text-400); font-size: .85rem; }
.mobile-search input {
  width: 100%; padding: .6rem 1rem .6rem 2.25rem;
  background: transparent; border: none; outline: none;
  font-size: .9rem; color: var(--text-800);
}

.mobile-nav-links { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; }
.mobile-nav-links a {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .75rem; border-radius: .375rem;
  font-size: .875rem; font-weight: 600; color: var(--text-700);
  transition: background var(--transition), color var(--transition);
}
.mobile-nav-links a:hover { background: var(--bg-muted); color: var(--text-900); }
.mobile-nav-links a i { width: 1rem; text-align: center; color: var(--text-400); }
.mobile-logout { color: #ef4444 !important; }
.mobile-logout i { color: #ef4444 !important; }

.mobile-theme-row {
  display: flex; align-items: center; gap: .75rem;
  font-size: .8rem; color: var(--text-500); padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.mobile-theme-btns { display: flex; gap: .5rem; }
.mobile-theme-btn {
  padding: .4rem .6rem; border-radius: .375rem;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-600); font-size: .8rem; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.mobile-theme-btn.active, .mobile-theme-btn:hover { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

/* ── Avatar placeholder ─────────────────────────────────────────────────── */
.avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff; font-weight: 700; flex-shrink: 0;
}

/* ── Flash Messages ──────────────────────────────────────────────────────── */
.flash-container {
  position: fixed; top: 4.5rem; right: 1rem; z-index: 999;
  display: flex; flex-direction: column; gap: .5rem; max-width: 24rem;
}
.flash {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: slideIn .2s ease;
}
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-100); }
.flash-close { margin-left: auto; color: inherit; opacity: .6; font-size: .85rem; }
.flash-close:hover { opacity: 1; }
@keyframes slideIn { from { opacity:0; transform: translateX(1rem); } to { opacity:1; transform: none; } }

/* ── Badge (category label) ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: .25rem;
  white-space: nowrap;
}
.badge i {
 margin-right:5px;
}

/* ── News Card ───────────────────────────────────────────────────────────── */
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; gap: 1rem; padding: 1rem;
  transition: box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.news-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-100); }

/* Vote column */
.vote-side {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  min-width: 2.75rem; flex-shrink: 0;
}
.vote-btn-v {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .375rem;
  font-size: .8rem; color: var(--text-500);
  background: var(--bg-vote); border: 1px solid var(--border-vote);
  transition: all var(--transition);
}
.vote-btn-v:hover { color: var(--brand-600); border-color: var(--brand-500); background: var(--brand-50); }
.vote-btn-v.voted-up   { color: var(--brand-600); background: var(--brand-50); border-color: var(--brand-500); }
.vote-btn-v.voted-down { color: #ef4444; background: #fee2e2; border-color: #fca5a5; }
.vote-count { font-size: .8rem; font-weight: 700; color: var(--text-700); }

/* Card content */
.card-content { flex: 1; min-width: 0; }
.card-meta-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.card-time { font-size: .72rem; color: var(--text-500); }

.card-headline { font-size: 1rem; font-weight: 700; color: var(--text-900); line-height: 1.35; margin-bottom: .5rem; }
.card-headline a:hover { color: var(--brand-600); }

.card-summary { font-size: .85rem; color: var(--text-600); line-height: 1.55; margin-bottom: .65rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* TL;DR Stichpunkte in der Card */
.card-tldr {
  list-style: none; margin-bottom: .65rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.card-tldr li {
  font-size: .8rem; color: var(--text-600); line-height: 1.45;
  display: flex; align-items: flex-start; gap: .4rem;
  /* max 2 Zeilen pro Punkt */
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.card-tldr li::before {
  content: ''; margin-right: 8px; display: inline-block; width: .3rem; height: .3rem; border-radius: 50%;
  background: var(--brand-500); margin-top: .45rem; flex-shrink: 0;
}

.card-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.card-author { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--text-500); }
.card-author-name { font-weight: 600; color: var(--text-700); }
.card-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.card-action-btn {
  display: flex; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--text-400); padding: .25rem .5rem;
  border-radius: .375rem; transition: color var(--transition), background var(--transition);
}
.card-action-btn:hover { color: var(--brand-600); background: var(--brand-50); }
.card-action-btn.saved { color: var(--brand-600); }

/* Card icon placeholder */
.card-icon-wrap {
  flex-shrink: 0; width: 3.5rem; height: 3.5rem;
  border-radius: .5rem; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); font-size: 1.2rem;
  align-self: flex-start;
}
.card-icon-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Mobile: vote-side on top, smaller icon */
@media (max-width: 540px) {
  .news-card { flex-wrap: wrap; gap: .6rem; }

  .vote-side {
    flex-direction: row; align-items: center;
    min-width: 0; width: 100%; order: 2;
    gap: .4rem;
  }

  .card-icon-wrap {
    width: 2.75rem; height: 2.75rem; font-size: 1rem;
    order: 1; align-self: flex-start;
  }

  .card-content { order: 1; }
}

/* ── Feed layout ─────────────────────────────────────────────────────────── */
.main-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 1024px) { .main-grid { grid-template-columns: 2fr 1fr; } }

.feed { display: flex; flex-direction: column; gap: 1rem; }

/* Filter bar */
.filter-bar {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; padding-bottom: .75rem;
  border-bottom: 1px solid var(--border); margin-bottom: .75rem;
}
.filter-btn {
  padding: .35rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--text-600);
  background: var(--bg-muted); border: 1px solid transparent;
  transition: all var(--transition); cursor: pointer;
}
.filter-btn:hover { color: var(--text-900); background: var(--bg-card); border-color: var(--border); }
.filter-btn.active { background: var(--brand-600); color: #fff; }

/* Category scroll */
.cat-scroll { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .25rem; margin-bottom: 1rem; }
.cat-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-600); cursor: pointer;
  transition: all var(--transition);
}
.cat-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.cat-btn.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.cat-btn i { font-size: .7rem; }

/* Load more */
.load-more {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .75rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; font-weight: 600; color: var(--text-600);
  cursor: pointer; transition: all var(--transition); margin-top: .5rem;
}
.load-more:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-600); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.widget {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem;
  transition: background var(--transition), border-color var(--transition);
}
.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.widget-header h3 { font-size: .9rem; font-weight: 700; color: var(--text-900); }
.widget-header a { font-size: .75rem; color: var(--brand-600); }
.widget-header a:hover { text-decoration: underline; }

/* CTA widget */
.widget-cta {
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
  border-color: transparent; position: relative; overflow: hidden;
}
.widget-cta-bg-icon {
  position: absolute; right: -.5rem; top: 50%; transform: translateY(-50%);
  font-size: 6rem; color: rgba(255,255,255,.06);
}
.widget-cta h3 { color: #fff; font-size: 1rem; margin-bottom: .4rem; }
.widget-cta p  { color: var(--brand-text-on-dark); font-size: .825rem; line-height: 1.5; margin-bottom: 1rem; }
.cta-btn {
  display: block; width: 100%; padding: .6rem;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: .5rem; color: #fff; font-size: .85rem; font-weight: 700;
  text-align: center; cursor: pointer;
  transition: background var(--transition);
}
.cta-btn:hover { background: rgba(255,255,255,.25); }
.widget-cta-footer { display: flex; gap: 1rem; margin-top: .75rem; }
.widget-cta-footer span { font-size: .72rem; color: var(--brand-text-on-dark); }
.text-accent { color: var(--accent); }

/* Reporter list */
.reporter-list { display: flex; flex-direction: column; gap: .85rem; }
.reporter { display: flex; align-items: center; gap: .75rem; }
.reporter-avatar { position: relative; }
.reporter-avatar img, .reporter-avatar .avatar-placeholder { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.rank-badge {
  position: absolute; bottom: -.15rem; right: -.15rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  font-size: .55rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg-card);
}
.rank-1 { background: #f59e0b; color: #fff; }
.rank-2 { background: #9ca3af; color: #fff; }
.rank-3 { background: #92400e; color: #fff; }
.reporter-info h4 { font-size: .825rem; font-weight: 700; color: var(--text-900); }
.reporter-info p  { font-size: .72rem; color: var(--text-500); }

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.tag {
  padding: .25rem .65rem; border-radius: 999px;
  background: var(--bg-tag); border: 1px solid var(--border);
  font-size: .75rem; font-weight: 600; color: var(--text-600);
  transition: all var(--transition);
}
.tag:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-600); }

/* Ad box */
.ad-box {
  background: var(--bg-card); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; color: var(--text-400); font-size: .8rem; text-align: center;
  min-height: 7rem;
}
.ad-box i { font-size: 1.5rem; }
.ad-box-label { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Article page ─────────────────────────────────────────────────────────── */
.article-card {
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  /* overflow:hidden entfernt – verursachte sticky/stacking-context Konflikt */
  overflow: visible;
}

.article-vote-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.5rem;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .article-vote-bar { padding: .6rem 1rem; gap: .6rem; }
  .vote-bar-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
}
.vote-group { display: flex; align-items: center; gap: .4rem; }
.vote-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .375rem;
  font-size: .85rem; color: var(--text-500);
  background: var(--bg-card); border: 1px solid var(--border);
  transition: all var(--transition);
}
.vote-btn:hover { color: var(--brand-600); border-color: var(--brand-500); background: var(--brand-50); }
.vote-btn.voted-up   { color: var(--brand-600); background: var(--brand-50); border-color: var(--brand-500); }
.vote-btn.voted-down { color: #ef4444; background: #fee2e2; border-color: #fca5a5; }
.vote-score { font-size: .9rem; font-weight: 700; color: var(--text-900); min-width: 2rem; text-align: center; }
.vote-bar-divider { width: 1px; height: 1.25rem; background: var(--border); }
.vote-bar-meta { font-size: .78rem; color: var(--text-500); display: flex; align-items: center; gap: .35rem; }
.vote-bar-actions { margin-left: auto; display: flex; gap: .5rem; }
.action-btn {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: .375rem;
  font-size: .78rem; font-weight: 600; color: var(--text-600);
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--transition);
}
.action-btn:hover { color: var(--brand-600); border-color: var(--brand-500); background: var(--brand-50); }
.action-btn.active { color: var(--brand-600); border-color: var(--brand-500); }

.article-body { padding: 2rem 1.5rem 1.5rem; }
@media (max-width: 640px) { .article-body { padding: 1.25rem 1rem 1rem; } }

.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--text-500);
  margin-bottom: 1rem;
  flex-wrap: wrap;
  /* Eigener Hintergrund = Seitenfarbe, damit er nicht transparent wirkt */
  background: var(--bg-page);
  padding: .35rem 0;
  /* Kein position, kein sticky, kein z-index */
}
.breadcrumb a { color: var(--brand-600); transition: color var(--transition); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb i { font-size: .6rem; color: var(--text-300); }

.article-meta-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }
.meta-time { font-size: .75rem; color: var(--text-500); display: flex; align-items: center; gap: .25rem; }
.meta-via  { font-size: .75rem; color: var(--text-400); }

.article-title { font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: var(--text-900); margin-bottom: 1rem; }
@media (min-width: 768px) { .article-title { font-size: 1.85rem; } }

.article-hero {
  width: 100%; aspect-ratio: 16/7; object-fit: cover;
  border-radius: .5rem; margin-bottom: 1.25rem;
}
.article-hero-placeholder {
  width: 100%; aspect-ratio: 16/7; border-radius: .5rem; margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 60%, #38bdf8 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; color: rgba(255,255,255,.6);
}
.article-hero-placeholder i { font-size: 3rem; opacity: .5; }
.article-hero-placeholder span { font-size: .8rem; font-weight: 600; opacity: .5; }

/* TLDR */
.tldr-box {
  background: var(--brand-50); border: 1.5px solid var(--brand-100);
  border-left: 4px solid var(--brand-600);
  border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.tldr-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-600); margin-bottom: .5rem;
  display: flex; align-items: center; gap: .35rem;
}
.tldr-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.tldr-list li {
  font-size: .875rem; color: var(--text-700);
  display: flex; align-items: flex-start; gap: .5rem; line-height: 1.5;
}
.tldr-list li::before {
  content: ''; display: block; width: .35rem; height: .35rem;
  border-radius: 50%; background: var(--brand-600); margin-top: .5rem; flex-shrink: 0;
}

/* Table of contents */
.toc-box {
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.toc-title { font-size: .8rem; font-weight: 700; color: var(--text-700); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: .3rem; counter-reset: toc; }
.toc-list li { counter-increment: toc; display: flex; align-items: flex-start; gap: .5rem; }
.toc-list li::before { content: counter(toc) "."; font-size: .75rem; font-weight: 700; color: var(--text-400); margin-top: .05rem; }
.toc-list a { font-size: .825rem; color: var(--brand-600); line-height: 1.4; }
.toc-list a:hover { text-decoration: underline; }

/* Prose */
.article-prose { font-size: .9375rem; color: var(--text-700); line-height: 1.7; }
.article-prose p { margin-bottom: 1rem; }
.article-prose p:last-child { margin-bottom: 0; }
.article-prose strong { color: var(--text-900); font-weight: 700; }
.article-prose a { color: var(--brand-600); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--transition); }
.article-prose a:hover { text-decoration-color: var(--brand-600); }
.article-prose h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-900); margin: 1.5rem 0 .75rem; padding-top: .5rem; }
.article-prose h3 { font-size: 1rem; font-weight: 700; color: var(--text-900); margin: 1.25rem 0 .5rem; }
.article-prose ul { margin: .75rem 0 1rem 1.25rem; list-style: disc; }
.article-prose li { font-size: .9375rem; color: var(--text-700); line-height: 1.6; margin-bottom: .25rem; }
.article-prose blockquote {
  border-left: 3px solid var(--brand-500); padding: .75rem 1rem;
  background: var(--brand-50); border-radius: 0 .375rem .375rem 0;
  margin: 1rem 0; font-style: italic; color: var(--text-600);
}

/* Tags row */
.article-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

/* Sources */
.sources-box { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--bg-muted); border-radius: .5rem; }
.sources-title { font-size: .78rem; font-weight: 700; color: var(--text-600); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }
.sources-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.sources-list li a { font-size: .82rem; color: var(--brand-600); display: flex; align-items: center; gap: .4rem; }
.sources-list li a:hover { text-decoration: underline; }
.sources-list li a i { font-size: .7rem; }

/* Author box */
.author-box {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem; background: var(--bg-muted); border-radius: .5rem; margin-top: 1.5rem;
}
.author-box img, .author-box .avatar-placeholder { width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0; }
.author-box-info h4 { font-size: .9rem; font-weight: 700; color: var(--text-900); }
.author-box-info p  { font-size: .78rem; color: var(--text-500); }
.author-box-info a  { font-size: .78rem; color: var(--brand-600); display: block; margin-top: .25rem; }

/* ── Comments ──────────────────────────────────────────────────────────────── */
.comments-section { margin-top: 2rem; }
.comments-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .75rem; margin-bottom: 1.25rem;
}
.comments-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--text-900); }
.comment-sort { display: flex; align-items: center; gap: .5rem; }
.sort-btn {
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; color: var(--text-600);
  background: var(--bg-muted); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--transition);
}
.sort-btn.active, .sort-btn:hover { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

.comment-form-wrap {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);
}
.comment-form-wrap h3 { font-size: .9rem; font-weight: 700; margin-bottom: .75rem; color: var(--text-900); }
.comment-textarea {
  width: 100%; padding: .75rem 1rem; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: .5rem;
  font-size: .875rem; color: var(--text-800); line-height: 1.5;
  resize: vertical; min-height: 5rem; outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.comment-textarea:focus { border-color: var(--brand-500); background: var(--bg-card); }
.comment-form-footer { display: flex; justify-content: flex-end; margin-top: .75rem; }

.btn-submit {
  padding: .5rem 1.25rem; background: var(--brand-600); color: #fff;
  border-radius: .5rem; font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: background var(--transition);
  border: none;
}
.btn-submit:hover { background: var(--brand-700); }

.comment { display: flex; gap: .75rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .75rem; }
.comment-avatar img, .comment-avatar .avatar-placeholder { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.comment-author { font-size: .825rem; font-weight: 700; color: var(--text-900); }
.comment-time { font-size: .72rem; color: var(--text-500); }
.comment-text { font-size: .875rem; color: var(--text-700); line-height: 1.6; }
.comment-actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.comment-action {
  display: flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; color: var(--text-400);
  cursor: pointer; transition: color var(--transition);
}
.comment-action:hover { color: var(--brand-600); }
.comment-action.voted { color: var(--brand-600); }

/* Comment vote group – inline wrapper damit vote() den Counter findet */
.comment-vote-group {
  display: flex; align-items: center; gap: .3rem;
}
.comment-vote-count {
  font-size: .8rem; font-weight: 700; color: var(--text-600);
  min-width: 1.2rem; text-align: center;
}
.comment-vote-group .up.voted-up   { color: var(--brand-600); }
.comment-vote-group .down.voted-down { color: #ef4444; }

.comment-replies { margin-left: 3rem; border-left: 2px solid var(--border); padding-left: 1rem; }
.comment-reply-form { margin-top: .75rem; }
.comment-reply-form .comment-textarea { min-height: 3.5rem; }

/* ── Similar articles (sidebar) ─────────────────────────────────────────── */
.similar-article {
  display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}
.similar-article:last-child { border-bottom: none; }
.similar-icon {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
  border-radius: .375rem; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8); font-size: .9rem;
}
.similar-title { font-size: .8rem; font-weight: 600; color: var(--text-800); line-height: 1.4; }
.similar-title:hover { color: var(--brand-600); }
.similar-meta { font-size: .7rem; color: var(--text-500); margin-top: .2rem; }

/* ── Auth pages ──────────────────────────────────────────────────────────── */
.auth-wrap { max-width: 28rem; margin: 0 auto; padding: 2rem 1rem; }
.auth-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 2rem;
}
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-title { font-size: 1.3rem; font-weight: 700; color: var(--text-900); margin-bottom: .25rem; text-align: center; }
.auth-subtitle { font-size: .85rem; color: var(--text-500); text-align: center; margin-bottom: 1.5rem; }
.auth-link { color: var(--brand-600); }
.auth-link:hover { text-decoration: underline; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; font-size: .825rem; font-weight: 600; color: var(--text-700); margin-bottom: .35rem; }
.form-input {
  display: block; width: 100%; padding: .6rem .9rem;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: .5rem; font-size: .9rem; color: var(--text-800); outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.form-input:focus { border-color: var(--brand-500); background: var(--bg-card); box-shadow: 0 0 0 2px var(--brand-50); }
.form-input::placeholder { color: var(--text-400); }
.form-hint { font-size: .75rem; color: var(--text-500); margin-top: .3rem; }
.form-error { font-size: .75rem; color: #ef4444; margin-top: .3rem; }
.form-textarea { min-height: 8rem; resize: vertical; }

.btn-block {
  display: block; width: 100%; padding: .65rem 1rem;
  background: var(--brand-600); color: #fff;
  border-radius: .5rem; font-size: .9rem; font-weight: 700;
  text-align: center; cursor: pointer;
  transition: background var(--transition); border: none;
}
.btn-block:hover { background: var(--brand-700); }

select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.1rem; padding-right: 2.5rem; }

/* Tags input */
.tags-input-wrap { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem .75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: .5rem; cursor: text; transition: border-color var(--transition); }
.tags-input-wrap:focus-within { border-color: var(--brand-500); background: var(--bg-card); }
.tag-chip { display: flex; align-items: center; gap: .3rem; padding: .2rem .5rem; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px; font-size: .75rem; color: var(--brand-700); }
.tag-chip button { color: var(--brand-500); font-size: .65rem; }
.tags-input-wrap input { border: none; outline: none; background: transparent; font-size: .85rem; color: var(--text-800); min-width: 8rem; flex: 1; }

/* Icon picker */
.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .5rem; max-height: 12rem; overflow-y: auto; padding: .5rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: .5rem; }
.icon-picker-item { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .375rem; cursor: pointer; font-size: 1rem; color: var(--text-600); transition: all var(--transition); border: 1.5px solid transparent; }
.icon-picker-item:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-100); }
.icon-picker-item.selected { background: var(--brand-600); color: #fff; border-color: var(--brand-700); }

/* Sources dynamic */
.sources-entry { display: flex; gap: .5rem; margin-bottom: .5rem; align-items: center; }
.sources-entry input { flex: 1; }
.btn-remove-source { color: #ef4444; padding: .3rem; font-size: .9rem; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }

.stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.stat-icon {
  width: 3rem; height: 3rem; border-radius: .75rem;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-600); font-size: 1.2rem; flex-shrink: 0;
}
.stat-val { font-size: 1.5rem; font-weight: 700; color: var(--text-900); }
.stat-label { font-size: .78rem; color: var(--text-500); }

/* Badges */
.badge-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.badge-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border-radius: 999px;
  background: var(--bg-muted); border: 1px solid var(--border);
}
.badge-item i { font-size: .9rem; }
.badge-item span { font-size: .78rem; font-weight: 700; color: var(--text-700); }

/* ── Profile ─────────────────────────────────────────────────────────────── */
.profile-header {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 2rem;
  display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
}
.profile-avatar-wrap { position: relative; }
.profile-avatar-wrap img, .profile-avatar-wrap .avatar-placeholder { width: 5rem; height: 5rem; border-radius: 50%; font-size: 2rem; }
.profile-info h1 { font-size: 1.4rem; font-weight: 700; color: var(--text-900); }
.profile-info .profile-role { font-size: .78rem; color: var(--text-500); margin-top: .15rem; }
.profile-stats { display: flex; gap: 1.5rem; margin-top: .75rem; flex-wrap: wrap; }
.profile-stat { text-align: center; }
.profile-stat .val { font-size: 1.2rem; font-weight: 700; color: var(--text-900); }
.profile-stat .lbl { font-size: .72rem; color: var(--text-500); }

/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-layout { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .admin-layout { grid-template-columns: 1fr; } }

.admin-sidebar {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1rem; position: sticky; top: 5rem;
}
.admin-nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem; border-radius: .375rem;
  font-size: .825rem; font-weight: 600; color: var(--text-700);
  transition: all var(--transition); margin-bottom: .15rem;
}
.admin-nav a:hover, .admin-nav a.active { background: var(--brand-50); color: var(--brand-600); }
.admin-nav a i { width: 1rem; text-align: center; }
.admin-nav-divider { border: none; border-top: 1px solid var(--border); margin: .5rem 0; }

.admin-badge {
  margin-left: auto; background: #ef4444; color: #fff;
  font-size: .65rem; font-weight: 700; padding: .1rem .4rem;
  border-radius: 999px;
}

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: .75rem 1rem; font-size: .75rem; font-weight: 700; text-align: left; color: var(--text-500); border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: .75rem 1rem; font-size: .825rem; color: var(--text-700); border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-muted); }

.status-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
}
.status-pending  { background: #fef9c3; color: #92400e; }
.status-approved { background: #dcfce7; color: #166534; }
.status-rejected { background: #fee2e2; color: #991b1b; }
.status-open     { background: #fee2e2; color: #991b1b; }
.status-resolved { background: #dcfce7; color: #166534; }

.btn-sm {
  padding: .3rem .7rem; border-radius: .375rem;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: all var(--transition); border: 1px solid transparent;
}
.btn-sm-primary { background: var(--brand-600); color: #fff; }
.btn-sm-primary:hover { background: var(--brand-700); }
.btn-sm-success { background: #22c55e; color: #fff; }
.btn-sm-danger  { background: #ef4444; color: #fff; }
.btn-sm-secondary { background: var(--bg-muted); color: var(--text-700); border-color: var(--border); }
.btn-sm-secondary:hover { background: var(--border); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 30rem; max-height: 90vh; overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 1rem; font-weight: 700; color: var(--text-900); display: flex; align-items: center; gap: .5rem; }
.modal-close { color: var(--text-400); font-size: 1rem; padding: .25rem; transition: color var(--transition); }
.modal-close:hover { color: var(--text-900); }
.modal-body { padding: 1.5rem; }

/* Report modal */
.report-reason-list { display: flex; flex-direction: column; gap: .5rem; }
.report-reason-item { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1.5px solid var(--border); border-radius: .5rem; cursor: pointer; transition: all var(--transition); }
.report-reason-item:hover, .report-reason-item.selected { border-color: var(--brand-500); background: var(--brand-50); }
.report-reason-item input[type=radio] { accent-color: var(--brand-600); }
.report-reason-label { font-size: .875rem; font-weight: 600; color: var(--text-700); }
.report-detail-area { margin-top: .75rem; }
.report-submit-row { margin-top: 1rem; display: flex; justify-content: flex-end; gap: .5rem; }

/* Share */
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.share-btn {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .75rem .5rem; border-radius: .5rem; border: 1px solid var(--border);
  font-size: .72rem; font-weight: 600; color: var(--text-700);
  cursor: pointer; transition: all var(--transition);
}
.share-btn i { font-size: 1.1rem; }
.share-btn:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-600); }
.share-copy-row { display: flex; gap: .5rem; }
.share-url-input { flex: 1; padding: .5rem .75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: .375rem; font-size: .8rem; color: var(--text-700); outline: none; }
.btn-copy { padding: .5rem .85rem; background: var(--brand-600); color: #fff; border-radius: .375rem; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--transition); }
.btn-copy:hover { background: var(--brand-700); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; padding: 1.5rem 0; }
.pagination ul { display: flex; gap: .3rem; flex-wrap: wrap; }
.pagination li a, .pagination li span {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .375rem;
  font-size: .825rem; font-weight: 600; color: var(--text-600);
  background: var(--bg-card); border: 1px solid var(--border);
  transition: all var(--transition);
}
.pagination li a:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-600); }
.pagination li.active a { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* ── Sitemap / Static pages ──────────────────────────────────────────────── */
.static-wrap { max-width: 860px; margin: 0 auto; }
.page-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2rem; }
.page-card h1 { font-size: 1.7rem; font-weight: 700; color: var(--text-900); margin-bottom: .5rem; }
.page-card h2 { font-size: 1.15rem; font-weight: 700; color: var(--text-900); margin: 1.5rem 0 .5rem; }
.page-card h3 { font-size: .95rem; font-weight: 700; color: var(--text-800); margin: 1rem 0 .35rem; }
.page-card p { font-size: .9rem; color: var(--text-700); line-height: 1.7; margin-bottom: .75rem; }
.page-card ul { list-style: disc; margin: .5rem 0 .75rem 1.25rem; }
.page-card li { font-size: .9rem; color: var(--text-700); line-height: 1.6; margin-bottom: .2rem; }
.page-card a { color: var(--brand-600); }
.page-card a:hover { text-decoration: underline; }

.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
.sitemap-section h3 { font-size: .85rem; font-weight: 700; color: var(--text-600); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .6rem; }
.sitemap-links { display: flex; flex-direction: column; gap: .35rem; }
.sitemap-links a { font-size: .875rem; color: var(--brand-600); display: flex; align-items: center; gap: .4rem; }
.sitemap-links a:hover { text-decoration: underline; }

/* ── Search page ─────────────────────────────────────────────────────────── */
.search-header { margin-bottom: 1.5rem; }
.search-header h1 { font-size: 1.4rem; font-weight: 700; color: var(--text-900); }
.search-header p { font-size: .875rem; color: var(--text-500); margin-top: .25rem; }

/* ── Tag page ─────────────────────────────────────────────────────────────── */
.tag-hero {
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
  border-radius: var(--radius); padding: 2rem; color: #fff; margin-bottom: 2rem;
}
.tag-hero h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; }
.tag-hero p { font-size: .875rem; opacity: .8; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  background: var(--bg-nav); border-top: 1px solid var(--border);
  padding: 2.5rem 0 1.5rem;
  transition: background var(--transition), border-color var(--transition);
}
.footer-inner {
  display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.footer-brand { flex: 0 0 100%; }
@media (min-width: 640px) { .footer-brand { flex: 0 0 auto; } }

.footer-tagline { font-size: .8rem; color: var(--text-500); margin-top: .4rem; }
.footer-cols {
  display: flex; gap: 2rem; flex-wrap: wrap; flex: 1;
  width: 100%;
}
@media (max-width: 639px) {
  .footer-cols { flex-direction: column; gap: 1.5rem; }
}
.footer-col { display: flex; flex-direction: column; gap: .5rem; min-width: 8rem; }
.footer-col h4 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-600); margin-bottom: .25rem;
}
.footer-col a { font-size: .82rem; color: var(--text-500); transition: color var(--transition); }
.footer-col a:hover { color: var(--brand-600); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  padding-top: 1.5rem; border-top: 1px solid var(--border);
}
@media (max-width: 639px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .75rem; }
}
.footer-copy { font-size: .78rem; color: var(--text-500); }
.footer-social { display: flex; gap: .85rem; }
.footer-social a { color: var(--text-400); font-size: 1rem; transition: color var(--transition); }
.footer-social a:hover { color: var(--brand-600); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-500); }
.empty-state i { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; display: block; }
.empty-state h3 { font-weight: 700; color: var(--text-700); margin-bottom: .35rem; }

.notice-box {
  padding: 1rem 1.25rem; border-radius: .5rem; font-size: .875rem; margin-bottom: 1rem;
  display: flex; align-items: flex-start; gap: .75rem; line-height: 1.5;
}
.notice-info    { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-800); }
.notice-warning { background: #fef9c3; border: 1px solid #fef08a; color: #92400e; }
.notice-danger  { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Captcha ─────────────────────────────────────────────────────────────── */
.captcha-wrap {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Box um die ASCII-Art-Grafik - background: var(--bg-muted); disabled */
.captcha-art-wrap {
  flex-shrink: 0;
  background:#f3f4f6;
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .6rem .9rem;
  font-family: 'Courier New', Courier, monospace;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  line-height: 1;
  filter: contrast(1.05) saturate(1.1);
  transition: filter var(--transition);
}
.captcha-art { display: flex; flex-direction: column; gap: 1px; }
.cap-noise-band {
  display: flex; flex-wrap: nowrap; gap: 1px;
  color: var(--text-400); font-size: 5px; line-height: 1; letter-spacing: .5px;
}
.cap-digits-row {
  display: flex; align-items: flex-start; gap: 4px; margin: 2px 0;
}
.cap-digit { display: inline-flex; flex-direction: column; gap: 1px; }
.cap-row { display: flex; gap: 1px; line-height: 1; }
.cap-px {
  display: inline-block; width: 9px;
  text-align: center; line-height: 0.55; font-weight: 700;
}
.cap-noise { color: var(--text-500); }
.cap-sep {
  display: flex; flex-direction: column; gap: 1px;
  color: var(--text-400); font-size: 5px; line-height: 1.1;
  align-self: center; width: 6px; text-align: center;
}

/* Reload-Button */
.captcha-reload {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--text-600);
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap; align-self: flex-start;
}
.captcha-reload:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-500); }
.captcha-reload:disabled { opacity: .5; cursor: default; }
.captcha-reload i { font-size: .8rem; }

/* Dark-Mode Kontrast-Boost */
[data-theme="dark"] .captcha-art-wrap { filter: contrast(1.1) brightness(1.15) saturate(1.2); }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .captcha-art-wrap { filter: contrast(1.1) brightness(1.15) saturate(1.2); }
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); border-top-color: var(--brand-600); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }