@font-face {
      font-family: 'Berylium';
      src: url('/beryliumrg.otf') format('opentype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'Berylium';
      src: url('/beryliumbd.otf') format('opentype');
      font-weight: bold;
    }

    :root {
      --bg-main: #C4B9A8;
      --bg-header: #D5CEBE;
      --bg-card: #F8F4EC;
      --bg-card-hover: #FFFFFF;
      --bg-card-changed: #FFF4E5;
      --border-dark: #2F2F2F;
      --border-light: rgba(47, 47, 47, 0.2);
      --text-main: #2F2F2F;
      --text-muted: #6B655C;
      --accent-brown: #8B4513;
      --accent-orange: #E65100;
      --accent-red: #C62828;
      --accent-blue: #1565C0;
      --accent-green: #2E7D32;
      --card-width: 290px;
      --card-height: 86px;
      --card-gap-x: 16px;
      --card-gap-y: 10px;
      --time-axis-width: 80px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Berylium', Georgia, serif;
      background: var(--bg-main);
      color: var(--text-main);
      min-height: 100vh;
      overflow-x: auto;
      overflow-y: scroll;
    }

    /* Top Header */
    .header {
      background: var(--bg-header);
      padding: 0.8rem 2rem;
      border-bottom: 2px solid var(--border-dark);
      position: relative;
      z-index: 500;
    }

    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1600px;
      margin: 0 auto;
    }

    .logo {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--text-main);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .logo .mirror {
      display: inline-block;
      transform: scaleX(-1);
    }

    .logo-badge {
      font-size: 0.75rem;
      font-weight: normal;
      background: var(--accent-brown);
      color: #FFF;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
      letter-spacing: 1px;
      vertical-align: middle;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      gap: 1.2rem;
      align-items: center;
    }

    .nav-links a {
      color: var(--text-main);
      text-decoration: none;
      padding: 0.35rem 0.75rem;
      border-radius: 4px;
      transition: all 0.2s;
      font-size: 0.95rem;
      font-weight: bold;
    }

    .nav-links a:hover, .nav-links a.active {
      background: rgba(0,0,0,0.12);
      color: #000;
    }

    /* Sticky Control & Filter Bar */
    .control-bar {
      position: sticky;
      top: 0;
      z-index: 400;
      background: rgba(229, 222, 209, 0.96);
      backdrop-filter: blur(8px);
      border-bottom: 2px solid var(--border-dark);
      padding: 0.35rem 1rem;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

    .control-container {
      max-width: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 0.4rem 0.5rem;
      width: 100%;
    }

    /* Search input */
    .search-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .search-icon {
      position: absolute;
      left: 9px;
      font-size: 0.9rem;
      pointer-events: none;
      opacity: 0.7;
    }

    .search-input {
      padding: 0.3rem 1.6rem 0.3rem 1.9rem;
      font-family: 'Berylium', Georgia, serif;
      font-size: 0.85rem;
      border: 1.5px solid var(--border-dark);
      border-radius: 5px;
      background: #EFE8DC;
      color: var(--text-main);
      width: 175px;
      transition: all 0.2s ease;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--accent-brown);
      background: #FFF;
      box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
      width: 230px;
    }

    .search-clear-btn {
      position: absolute;
      right: 6px;
      background: none;
      border: none;
      font-size: 0.9rem;
      cursor: pointer;
      color: var(--text-muted);
      display: none;
      padding: 2px 4px;
      border-radius: 50%;
    }

    .search-clear-btn:hover {
      color: var(--accent-red);
    }

    /* Highlight mark */
    mark.highlight-word {
      background: #FFD54F;
      color: #1A1A1A;
      padding: 0 2px;
      border-radius: 2px;
      font-weight: 800;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

    /* Minute Height Slider */
    .slider-wrapper {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(0, 0, 0, 0.05);
      padding: 0.22rem 0.5rem;
      border-radius: 5px;
      border: 1px solid rgba(47, 47, 47, 0.2);
      flex-shrink: 0;
    }

    .slider-label {
      font-size: 0.78rem;
      font-weight: bold;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 0.2rem;
    }

    .slider-input {
      appearance: none;
      -webkit-appearance: none;
      width: 75px;
      height: 5px;
      background: #BBB09D;
      border-radius: 3px;
      outline: none;
      cursor: pointer;
    }

    .slider-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent-brown);
      border: 2px solid #FFF;
      cursor: pointer;
      transition: transform 0.15s ease;
    }

    .slider-input::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }

    .slider-value {
      font-size: 0.78rem;
      font-weight: bold;
      color: var(--accent-brown);
      min-width: 42px;
    }

    /* Start Time Picker */
    .start-time-wrapper {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background: rgba(0, 0, 0, 0.05);
      padding: 0.2rem 0.45rem;
      border-radius: 5px;
      border: 1px solid rgba(47, 47, 47, 0.2);
      flex-shrink: 0;
    }

    .start-time-label {
      font-size: 0.78rem;
      font-weight: bold;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 0.2rem;
      color: var(--text-main);
    }

    .datetime-input {
      font-family: inherit;
      font-size: 0.76rem;
      font-weight: bold;
      padding: 0.18rem 0.3rem;
      border: 1.5px solid var(--border-dark);
      border-radius: 4px;
      background: var(--bg-card);
      color: var(--text-main);
      outline: none;
      cursor: pointer;
      max-width: 145px;
    }

    .datetime-input:focus {
      border-color: var(--accent-brown);
      box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
    }

    .reset-time-btn {
      padding: 0.18rem 0.4rem;
      font-family: inherit;
      font-size: 0.74rem;
      font-weight: bold;
      background: #D5CEBE;
      border: 1px solid var(--border-dark);
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .reset-time-btn:hover {
      background: var(--accent-brown);
      color: #FFF;
      border-color: var(--accent-brown);
    }

    /* Quick time-range preset buttons (1h / 6h / 24h / 7d) */
    .time-preset-group {
      display: flex;
      gap: 0.2rem;
    }

    .time-preset-btn {
      padding: 0.18rem 0.4rem;
      font-family: 'Berylium', Georgia, serif;
      font-size: 0.72rem;
      font-weight: bold;
      background: #D5CEBE;
      border: 1px solid var(--border-dark);
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .time-preset-btn:hover {
      background: var(--accent-brown);
      color: #FFF;
      border-color: var(--accent-brown);
    }

    /* Newspaper & Group Filter Button */
    .filter-drawer-toggle-btn {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.65rem;
      font-family: 'Berylium', Georgia, serif;
      font-size: 0.8rem;
      font-weight: bold;
      border: 1.5px solid var(--border-dark);
      border-radius: 5px;
      background: #EFE8DC;
      color: var(--text-main);
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .filter-drawer-toggle-btn:hover, .filter-drawer-toggle-btn.active {
      background: #FFF;
      border-color: var(--accent-brown);
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    .filter-drawer-toggle-btn .badge {
      background: var(--accent-brown);
      color: #FFF;
      padding: 1px 5px;
      border-radius: 10px;
      font-size: 0.7rem;
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.8rem;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
      background: rgba(0, 0, 0, 0.05);
      padding: 0.26rem 0.5rem;
      border-radius: 5px;
      border: 1px solid rgba(47, 47, 47, 0.2);
      transition: background 0.2s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .checkbox-label:hover {
      background: rgba(0, 0, 0, 0.09);
    }

    .checkbox-label input {
      accent-color: var(--accent-brown);
      cursor: pointer;
    }

    /* Stats info badge */
    .stats-info {
      font-size: 0.78rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-left: auto;
      flex-wrap: wrap;
    }

    .badge-pill {
      background: #E1D8CA;
      border: 1px solid rgba(47, 47, 47, 0.25);
      padding: 0.18rem 0.5rem;
      border-radius: 12px;
      font-weight: bold;
      color: var(--text-main);
      font-size: 0.74rem;
      white-space: nowrap;
    }

    .badge-pill.highlight {
      background: #FFE8D6;
      border-color: var(--accent-brown);
      color: var(--accent-brown);
    }

    /* ============================================
       FILTER DRAWER PANEL (GROUPS & NEWSPAPERS)
       ============================================ */
    .filter-drawer {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      max-height: 78vh;
      overflow-y: auto;
      background: #EFE7DA;
      border-bottom: 2px solid var(--border-dark);
      box-shadow: 0 16px 36px rgba(0,0,0,0.22);
      z-index: 450;
      padding: 1.2rem 2rem 1.8rem 2rem;
      animation: drawerSlideDown 0.2s ease-out;
    }

    @keyframes drawerSlideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .filter-drawer.open {
      display: block;
    }

    .drawer-content {
      max-width: 1600px;
      margin: 0 auto;
    }

    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      border-bottom: 1px solid rgba(47, 47, 47, 0.2);
      padding-bottom: 0.8rem;
      margin-bottom: 1rem;
    }

    .drawer-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .drawer-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .action-btn {
      padding: 0.35rem 0.75rem;
      font-family: 'Berylium', Georgia, serif;
      font-size: 0.8rem;
      font-weight: bold;
      background: #D5CEBE;
      border: 1px solid var(--border-dark);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .action-btn:hover {
      background: var(--accent-brown);
      color: #FFF;
      border-color: var(--accent-brown);
    }

    .action-btn.close-btn {
      background: #C4B9A8;
      margin-left: 0.5rem;
    }

    .action-btn.close-btn:hover {
      background: var(--accent-red);
      color: #FFF;
    }

    /* Group Cards Grid */
    .drawer-section-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--accent-brown);
      margin: 0.8rem 0 0.5rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .groups-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 0.6rem;
      margin-bottom: 1.2rem;
    }

    .group-card {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: #FFFDF9;
      border: 1.5px solid rgba(47, 47, 47, 0.2);
      border-radius: 6px;
      padding: 0.5rem 0.7rem;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
    }

    .group-card:hover {
      border-color: var(--accent-brown);
      background: #FFF;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .group-card.is-active {
      border-color: var(--accent-brown);
      background: #FFF9F2;
    }

    .group-card input[type="checkbox"] {
      accent-color: var(--accent-brown);
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .group-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .group-name {
      font-size: 0.85rem;
      font-weight: 800;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .group-meta {
      font-size: 0.68rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Individual Newspapers Section */
    .np-search-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.6rem;
    }

    .np-search-input {
      padding: 0.4rem 0.8rem;
      font-family: 'Berylium', Georgia, serif;
      font-size: 0.85rem;
      border: 1px solid var(--border-dark);
      border-radius: 4px;
      background: #FFF;
      width: 220px;
    }

    .np-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 0.45rem;
      max-height: 280px;
      overflow-y: auto;
      padding: 0.5rem;
      background: #FFFDF9;
      border: 1.5px solid rgba(47, 47, 47, 0.2);
      border-radius: 6px;
    }

    .np-checkbox-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.3rem 0.5rem;
      border-radius: 4px;
      background: rgba(0,0,0,0.02);
      border: 1px solid transparent;
      cursor: pointer;
      user-select: none;
      font-size: 0.8rem;
      transition: all 0.12s;
    }

    .np-checkbox-item:hover {
      background: #F2ECE1;
      border-color: rgba(47,47,47,0.15);
    }

    .np-checkbox-item input[type="checkbox"] {
      accent-color: var(--accent-brown);
      width: 15px;
      height: 15px;
      cursor: pointer;
    }

    .np-badge-inline {
      font-size: 0.72rem;
      font-weight: bold;
      padding: 1px 5px;
      border-radius: 3px;
      border: 1px solid rgba(47,47,47,0.2);
      background: #E5DEC9;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 110px;
    }

    .np-article-count {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-left: auto;
    }

    /* Legend Bar */
    .legend-bar {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      padding: 0.3rem 2rem;
      background: #CCC1AF;
      border-bottom: 1px solid rgba(47, 47, 47, 0.15);
      max-width: 100%;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .legend-box {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      border: 1px solid var(--border-dark);
      background: var(--bg-card);
    }

    .legend-box.changed {
      background: var(--bg-card-changed);
      border-color: var(--accent-orange);
    }

    .legend-line-sample {
      width: 20px;
      height: 2px;
      background: var(--accent-orange);
      position: relative;
    }
    .legend-line-sample::after {
      content: '';
      position: absolute;
      right: 0;
      top: -3px;
      border: 4px solid transparent;
      border-left-color: var(--accent-orange);
    }

    /* Main Timeline Canvas */
    .timeline-outer {
      position: relative;
      margin: 0 auto;
      padding: 1rem 1rem 4rem 1rem;
      max-width: 100%;
    }

    .timeline-layout {
      position: relative;
      display: flex;
      min-height: 800px;
    }

    /* Time Axis (Left side) */
    .time-axis {
      width: var(--time-axis-width);
      min-width: var(--time-axis-width);
      position: relative;
      border-right: 2px solid var(--border-dark);
      user-select: none;
    }

    .time-marker {
      position: absolute;
      right: 12px;
      font-size: 0.75rem;
      font-weight: bold;
      color: var(--text-muted);
      transform: translateY(-50%);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .time-marker.hour-marker {
      color: var(--text-main);
      font-size: 0.85rem;
      font-weight: 800;
    }

    .time-marker::after {
      content: '';
      position: absolute;
      right: -14px;
      top: 50%;
      width: 8px;
      height: 2px;
      background: var(--border-dark);
    }

    .time-marker.hour-marker::after {
      width: 14px;
      height: 2.5px;
      background: var(--accent-brown);
    }

    /* Now Marker */
    .now-indicator {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: var(--accent-red);
      z-index: 30;
      pointer-events: none;
    }

    .now-tag {
      position: absolute;
      left: 4px;
      top: -10px;
      background: var(--accent-red);
      color: #FFF;
      font-size: 0.65rem;
      font-weight: bold;
      padding: 1px 6px;
      border-radius: 3px;
      letter-spacing: 0.5px;
    }

    /* Horizontal grid hour lines across canvas */
    .grid-lines-layer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }

    .grid-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(47, 47, 47, 0.08);
    }

    .grid-line.hour-line {
      background: rgba(47, 47, 47, 0.2);
      border-bottom: 1px dashed rgba(47, 47, 47, 0.15);
    }

    /* Canvas where cards are positioned */
    .cards-canvas {
      flex: 1;
      position: relative;
      margin-left: 12px;
      min-height: 100%;
    }

    /* SVG Connections Layer */
    .connections-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 15;
      transition: z-index 0.1s ease;
    }

    /* When an arrow thread is active, elevate SVG above regular cards so it renders in the foreground */
    .cards-canvas.has-highlighted-thread .connections-svg {
      z-index: 50;
    }

    .version-arrow {
      fill: none;
      stroke: var(--accent-orange);
      stroke-width: 2.5;
      stroke-dasharray: 4 2;
      opacity: 0.65;
      transition: opacity 0.2s, stroke-width 0.2s, stroke 0.2s;
    }

    .version-arrow.highlighted {
      stroke: #E64A19;
      stroke-width: 4.5;
      stroke-dasharray: none !important; /* Durchgezogener Pfeil im Vordergrund */
      opacity: 1 !important;
      filter: drop-shadow(0 3px 8px rgba(230, 74, 25, 0.7));
    }

    /* Article Card */
    .article-card {
      position: absolute;
      width: var(--card-width);
      height: var(--card-height);
      background: var(--bg-card);
      border: 1.5px solid var(--border-dark);
      border-radius: 6px;
      padding: 0.45rem 0.65rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      cursor: default;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 20;
      /* Fluid reflow animation */
      transition: left 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
                  top 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
                  opacity 0.25s ease,
                  transform 0.25s ease,
                  box-shadow 0.2s ease,
                  border-color 0.2s ease;
      will-change: left, top, opacity;
    }

    .article-card:hover {
      background: var(--bg-card-hover);
      box-shadow: 0 6px 16px rgba(0,0,0,0.18);
      border-color: var(--accent-brown);
      z-index: 25;
    }

    .article-card.changed {
      background: var(--bg-card-changed);
      border-color: var(--accent-orange);
      border-left-width: 4px;
    }

    .article-card.filtered-out {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: scale(0.92) translateY(5px);
    }

    .article-card.highlight-connected {
      border-color: #D84315 !important;
      box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.3), 0 6px 20px rgba(0,0,0,0.2) !important;
      background: #FFF9F2 !important;
      z-index: 35 !important;
    }

    /* Semantic event cluster (same story across different newspapers) */
    .article-card.cluster-connected {
      border-color: var(--accent-blue) !important;
      box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.28), 0 6px 20px rgba(0,0,0,0.2) !important;
      background: #F2F8FF !important;
      z-index: 34 !important;
    }

    /* All cards NOT part of the currently focused cluster */
    .article-card.cluster-dimmed {
      opacity: 0.22;
      filter: grayscale(0.7);
    }

    .cluster-badge {
      font-weight: bold;
      padding: 1px 6px;
      border-radius: 3px;
      background: #E3F2FD;
      color: var(--accent-blue);
      border: 1px solid #90CAF9;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90px;
      font-size: 0.68rem;
      flex-shrink: 0;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .cluster-badge:hover {
      background: #BBDEFB;
      border-color: var(--accent-blue);
    }

    .cluster-badge.pinned {
      background: var(--accent-blue);
      color: #FFF;
      border-color: var(--accent-blue);
    }

    /* Card body row with optional thumbnail */
    .card-body-row {
      display: flex;
      gap: 0.55rem;
      align-items: flex-start;
      flex: 1;
      min-height: 0;
      margin-bottom: 0.35rem;
    }

    .card-main-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    /* Card title - takes full vertical space with ample room for 2 full lines */
    .card-title {
      font-size: 0.83rem;
      line-height: 1.34;
      font-weight: bold;
      color: var(--text-main);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
      cursor: pointer;
    }

    /* Small miniature thumbnail next to headline */
    .card-thumb-container {
      width: 68px;
      height: 48px;
      border-radius: 4px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(47, 47, 47, 0.2);
      flex-shrink: 0;
      display: none;
    }

    .cards-canvas.with-images .article-card.has-thumb .card-thumb-container {
      display: block;
    }

    .card-thumb-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.2s ease;
    }

    .article-card:hover .card-thumb-img {
      transform: scale(1.08);
    }

    /* Card footer: [1. Datum/Uhrzeit] [2. Zeitung] ... [3. Pfeil (grün/rot)] */
    .card-footer {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin-top: auto;
      font-size: 0.72rem;
      overflow: hidden;
    }

    .card-time {
      font-size: 0.7rem;
      color: var(--text-muted);
      font-weight: bold;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .newspaper-badge {
      font-weight: bold;
      padding: 1px 6px;
      border-radius: 3px;
      background: #E5DEC9;
      color: var(--text-main);
      border: 1px solid rgba(47, 47, 47, 0.2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px;
      font-size: 0.69rem;
      flex-shrink: 0;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .newspaper-badge:hover {
      box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.35);
      filter: brightness(0.95);
    }

    /* Newspaper specific color highlights */
    .np-spiegel { background: #FFDED6; color: #B71C1C; border-color: #FFAB91; }
    .np-bild { background: #FFCDD2; color: #B71C1C; border-color: #EF9A9A; }
    .np-zeit { background: #ECEFF1; color: #263238; border-color: #CFD8DC; }
    .np-faz { background: #E1F5FE; color: #01579B; border-color: #B3E5FC; }
    .np-sueddeutsche { background: #E8F5E9; color: #1B5E20; border-color: #C8E6C9; }
    .np-welt { background: #E3F2FD; color: #0D47A1; border-color: #BBDEFB; }
    .np-tagesschau { background: #EDE7F6; color: #311B92; border-color: #D1C4E9; }
    .np-taz { background: #FBE9E7; color: #BF360C; border-color: #FFCCBC; }
    .np-nzz { background: #E0F2F1; color: #004D40; border-color: #80CBC4; }
    .np-merkur { background: #FFF3E0; color: #E65100; border-color: #FFE0B2; }
    .np-hna { background: #E0F7FA; color: #006064; border-color: #B2EBF2; }
    .np-tz { background: #FCE4EC; color: #C2185B; border-color: #F8BBD0; }
    .np-hanauer { background: #F3E5F5; color: #4A148C; border-color: #E1BEE7; }
    .np-fr { background: #E8EAF6; color: #1A237E; border-color: #C5CAE9; }
    .np-waz { background: #EFEBE9; color: #3E2723; border-color: #D7CCC8; }
    .np-morgenpost { background: #FFF8E1; color: #F57F17; border-color: #FFECB3; }
    .np-abendblatt { background: #E0F2F1; color: #004D40; border-color: #B2DFDB; }
    .np-standard { background: #FDEED9; color: #BF360C; border-color: #FFCCBC; }
    .np-kurier { background: #FFEBEE; color: #C62828; border-color: #FFCDD2; }
    .np-independent { background: #F5F5F5; color: #C62828; border-color: #E0E0E0; }
    .np-nypost { background: #FFEBEE; color: #D32F2F; border-color: #FFCDD2; }

    /* Expand arrow button: dezent grün wenn original, dezent rot wenn geändert */
    .expand-btn {
      margin-left: auto;
      border-radius: 4px;
      cursor: pointer;
      padding: 2px 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      flex-shrink: 0;
      border: 1px solid transparent;
    }

    .expand-btn.original {
      background: rgba(46, 125, 50, 0.12);
      border-color: rgba(46, 125, 50, 0.35);
      color: #2E7D32;
    }

    .expand-btn.original:hover {
      background: #C8E6C9;
      border-color: #2E7D32;
      color: #1B5E20;
      box-shadow: 0 1px 4px rgba(46, 125, 50, 0.25);
    }

    .expand-btn.changed {
      background: rgba(198, 40, 40, 0.12);
      border-color: rgba(198, 40, 40, 0.35);
      color: #C62828;
    }

    .expand-btn.changed:hover {
      background: #FFCDD2;
      border-color: #C62828;
      color: #B71C1C;
      box-shadow: 0 1px 4px rgba(198, 40, 40, 0.25);
    }

    .expand-btn svg {
      width: 12px;
      height: 12px;
      fill: currentColor;
      transition: transform 0.2s ease;
    }

    .article-card.is-expanded .expand-btn svg {
      transform: rotate(180deg);
    }

    /* Non-displacing Expand Overlay */
    .card-expand-overlay {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: 100%;
      min-width: 340px;
      max-width: 90vw;
      background: #FFFDF9;
      border: 2px solid var(--border-dark);
      border-radius: 6px;
      padding: 0.9rem 1rem;
      box-shadow: 0 14px 36px rgba(0,0,0,0.28);
      z-index: 1000;
      display: none;
      cursor: default;
      animation: popoverFadeIn 0.18s ease-out;
    }

    /* Large image in expand popover */
    .expand-image-container {
      width: 100%;
      max-height: 185px;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 0.75rem;
      background: rgba(0,0,0,0.06);
      border: 1px solid var(--border-dark);
      display: none;
    }

    .expand-image-container.visible {
      display: block;
    }

    .expand-large-img {
      width: 100%;
      height: 100%;
      max-height: 185px;
      object-fit: cover;
      display: block;
    }

    @keyframes popoverFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .article-card.is-expanded {
      z-index: 1001 !important;
      border-color: var(--accent-brown);
    }

    .article-card.is-expanded .card-expand-overlay {
      display: block;
    }

    .expand-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(47, 47, 47, 0.15);
      padding-bottom: 0.4rem;
      margin-bottom: 0.6rem;
    }

    .expand-source {
      font-size: 0.75rem;
      font-weight: bold;
      color: var(--accent-brown);
    }

    .expand-close {
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--text-muted);
      padding: 0 4px;
      border-radius: 3px;
      line-height: 1;
    }

    .expand-close:hover {
      color: var(--accent-red);
      background: rgba(0,0,0,0.05);
    }

    .expand-title {
      font-size: 0.95rem;
      line-height: 1.35;
      font-weight: bold;
      color: var(--text-main);
      margin-bottom: 0.5rem;
    }

    .expand-desc {
      font-size: 0.82rem;
      line-height: 1.4;
      color: #444;
      margin-bottom: 0.8rem;
      max-height: 150px;
      overflow-y: auto;
    }

    .expand-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-bottom: 0.8rem;
      font-size: 0.72rem;
    }

    .meta-tag {
      background: #F0EAE1;
      padding: 2px 6px;
      border-radius: 3px;
      border: 1px solid rgba(47, 47, 47, 0.15);
    }

    .meta-tag.highlight {
      background: #FFE0B2;
      color: #BF360C;
      border-color: #FFB74D;
      font-weight: bold;
    }

    .expand-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      border-top: 1px solid rgba(47, 47, 47, 0.15);
      padding-top: 0.5rem;
    }

    .open-article-link {
      color: var(--accent-brown);
      text-decoration: none;
      font-weight: bold;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.3rem 0.6rem;
      border-radius: 4px;
      background: rgba(139, 69, 19, 0.08);
      transition: background 0.15s;
    }

    .open-article-link:hover {
      background: rgba(139, 69, 19, 0.18);
      text-decoration: underline;
    }

    .highlight-thread-btn {
      background: none;
      border: 1px solid var(--accent-orange);
      color: var(--accent-orange);
      padding: 0.3rem 0.6rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.15s;
    }

    .highlight-thread-btn:hover {
      background: var(--accent-orange);
      color: #FFF;
    }

    /* Infinite Scroll Trigger & Loader */
    .infinite-scroll-trigger {
      padding: 2rem;
      text-align: center;
      color: var(--text-muted);
      font-weight: bold;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
    }

    .spinner {
      width: 20px;
      height: 20px;
      border: 3px solid rgba(47, 47, 47, 0.2);
      border-top-color: var(--accent-brown);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Floating Scroll to Top button */
    .scroll-top-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--accent-brown);
      color: #FFF;
      border: 2px solid #FFF;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
      z-index: 500;
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s ease;
      font-size: 1.2rem;
    }

    .scroll-top-btn.visible {
      opacity: 1;
      visibility: visible;
    }

    .scroll-top-btn:hover {
      background: #5C2D0C;
      transform: translateY(-3px);
    }

    /* Floating "new articles" banner (live auto-refresh notice) */
    .new-articles-banner {
      display: none;
      position: fixed;
      top: 116px;
      left: 50%;
      transform: translateX(-50%);
      align-items: center;
      gap: 0.4rem;
      background: var(--accent-brown);
      color: #FFF;
      border: 2px solid #FFF;
      padding: 0.45rem 1rem;
      border-radius: 20px;
      font-family: 'Berylium', Georgia, serif;
      font-size: 0.85rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
      z-index: 490;
      animation: newArticlesPop 0.25s ease-out;
    }

    .new-articles-banner:hover {
      background: #5C2D0C;
    }

    @keyframes newArticlesPop {
      from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* No search results overlay */
    .no-results-message {
      display: none;
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: #FFFDF9;
      border: 2px solid var(--border-dark);
      border-radius: 8px;
      padding: 1.5rem 2.5rem;
      text-align: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      z-index: 100;
    }

    .no-results-message h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      color: var(--accent-brown);
    }

    /* Versions-Badge im Karten-Footer: fixiert die Pfeile eines Artikels.
       Gegenstueck zum blauen .cluster-badge, in der Pfeilfarbe Orange. */
    .version-badge {
      font-weight: bold;
      padding: 1px 6px;
      border-radius: 3px;
      background: #FFF3E0;
      color: var(--accent-orange);
      border: 1px solid #FFCC80;
      white-space: nowrap;
      font-size: 0.68rem;
      flex-shrink: 0;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .version-badge:hover {
      background: #FFE0B2;
      border-color: var(--accent-orange);
    }

    .version-badge.pinned {
      background: var(--accent-orange);
      color: #FFF;
      border-color: var(--accent-orange);
    }

    /* Fixierter Pfeil-Thread: alles ausserhalb des Threads tritt zurueck. */
    .cards-canvas.thread-pinned .article-card:not(.highlight-connected) {
      opacity: 0.25;
      filter: grayscale(0.65);
    }

    /* Zaehler in der Kopfleiste: schaltet die Spaltenbegrenzung um. */
    .badge-pill.overflow-pill {
      background: #FFF3E0;
      border-color: var(--accent-orange);
      color: var(--accent-orange);
      cursor: pointer;
      font-family: inherit;
      align-items: center;
      transition: all 0.15s ease;
    }

    .badge-pill.overflow-pill:hover {
      background: var(--accent-orange);
      color: #FFF;
    }

    /* Hinweis in der Zeitachse: hier passen Karten nicht in die Fensterbreite. */
    .overflow-chip {
      position: absolute;
      left: 4px;
      transform: translateY(-50%);
      z-index: 5;
      padding: 0 4px;
      border-radius: 3px;
      border: 1px solid var(--accent-orange);
      background: #FFF3E0;
      color: var(--accent-orange);
      font-family: inherit;
      font-size: 0.62rem;
      font-weight: bold;
      line-height: 1.4;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .overflow-chip:hover {
      background: var(--accent-orange);
      color: #FFF;
    }

    /* 3.15 - Legendenfelder sind Filter, keine reine Beschriftung. */
    .legend-filter {
      background: none;
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 2px 6px;
      margin: -2px 0;
      cursor: pointer;
      font: inherit;
      color: inherit;
      transition: all 0.15s ease;
    }

    .legend-filter:hover {
      background: rgba(0, 0, 0, 0.06);
      border-color: rgba(47, 47, 47, 0.25);
    }

    .legend-filter.is-active {
      background: rgba(47, 47, 47, 0.14);
      border-color: var(--border-dark);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    .legend-chip {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 0.68rem;
      font-weight: bold;
    }

    .legend-chip.original {
      background: rgba(46, 125, 50, 0.12);
      border: 1px solid rgba(46, 125, 50, 0.35);
      color: #2E7D32;
    }

    .legend-chip.changed {
      background: rgba(198, 40, 40, 0.12);
      border: 1px solid rgba(198, 40, 40, 0.35);
      color: #C62828;
    }

    /* 3.14 - Vom Live-Poll frisch eingefuegte Karten. */
    @keyframes card-fresh-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.55); }
      70%  { box-shadow: 0 0 0 12px rgba(21, 101, 192, 0); }
      100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
    }

    .article-card.card-fresh {
      border-color: var(--accent-blue) !important;
      animation: card-fresh-pulse 1.8s ease-out 2;
    }

    /* 3.9 - Per Deep-Link angesprungene Karte. */
    @keyframes card-focus-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.25); }
      70%  { box-shadow: 0 0 0 16px rgba(230, 81, 0, 0), 0 8px 24px rgba(0, 0, 0, 0.25); }
      100% { box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25); }
    }

    .article-card.card-focus {
      border-color: var(--accent-orange) !important;
      box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
      z-index: 40 !important;
      animation: card-focus-pulse 1.5s ease-out 3;
    }

    @media (prefers-reduced-motion: reduce) {
      .article-card.card-fresh,
      .article-card.card-focus {
        animation: none;
      }
    }