/* Magazin-Uebersicht - Stile (ergaenzend zu main.css) */

  .page-hero {
    background: var(--green-deep);
    padding: 100px 80px 56px;
    margin-top: 60px;
  }
  .page-hero nav { position: static; width: auto; height: auto; background: none; border: none; padding: 0; backdrop-filter: none; display: block; z-index: auto; }
  .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 24px; list-style: none; }
  .breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
  .breadcrumb a:hover { color: rgba(255,255,255,0.9); }
  .breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 8px; }
  .page-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-light); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
  .page-hero h1 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 60px); line-height: 1.07; letter-spacing: -1.2px; color: var(--white); margin-bottom: 18px; }
  .page-hero h1 em { font-style: italic; color: var(--green-light); }
  .page-hero-lead { font-size: 17px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,0.62); max-width: 560px; }

  /* ── FEATURED POST ── */
  .featured-wrap { padding: 0 80px; margin-top: -1px; background: var(--green-deep); padding-bottom: 0; }
  .featured-post {
    text-decoration: none;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 360px;
  }
  .featured-thumb { position: relative; overflow: hidden; background: var(--green-lightest); }
  .featured-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
  .featured-post:hover .featured-thumb img { transform: scale(1.03); }
  .featured-new-badge {
    position: absolute; top: 20px; left: 20px;
    background: var(--green-accent); color: var(--white);
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 4px;
  }
  .featured-body {
    padding: 48px 48px 40px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .featured-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .art-tag {
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--green-accent); padding: 4px 10px; background: var(--green-ultra);
    border-radius: 4px;
  }
  .art-date { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }
  .featured-body h2 { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -0.5px; color: var(--text-dark); margin-bottom: 14px; }
  .featured-body p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--text-mid); margin-bottom: 28px; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green-accent); color: var(--white); border: none;
    padding: 12px 24px; border-radius: var(--radius);
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    cursor: pointer; text-decoration: none; width: fit-content;
    transition: background 0.2s, transform 0.15s;
  }
  .btn-primary:hover { background: var(--green-mid); transform: translateY(-1px); }

  /* ── RUBRIK FILTER BAR ── */
  .filter-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    padding: 16px 80px;
    position: sticky; top: 60px; z-index: 100;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    box-shadow: 0 4px 20px rgba(26,60,46,0.05);
  }
  .filter-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; white-space: nowrap; }
  .rubrik-chip {
    border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 16px;
    font-size: 13px; font-weight: 500; color: var(--text-light);
    background: var(--white); cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center;
  }
  .rubrik-chip:hover { border-color: var(--green-accent); color: var(--green-accent); }
  .rubrik-chip.active { border-color: var(--green-accent); color: var(--green-accent); background: var(--green-ultra); }

  /* ── SECTION WRAPPER ── */
  .section-wrap { padding: 72px 80px; }
  .section-wrap.alt { background: var(--off-white); }
  .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 20px; }
  .section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-accent); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
  .section-title { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.5px; color: var(--text-dark); line-height: 1.2; }
  .section-desc { font-size: 14px; color: var(--text-muted); font-weight: 300; max-width: 440px; margin-top: 4px; }
  .see-all { font-size: 13px; font-weight: 500; color: var(--green-accent); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; }
  .see-all:hover { gap: 8px; }

  /* ── ARTICLE CARDS ── */
  .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .art-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
  }
  .art-card:hover { box-shadow: 0 8px 32px rgba(26,60,46,0.12); transform: translateY(-3px); }
  .art-card-thumb {
    width: 100%; aspect-ratio: 16/9;
    background: var(--green-lightest); overflow: hidden; flex-shrink: 0;
  }
  .art-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
  .art-card:hover .art-card-thumb img { transform: scale(1.05); }
  .art-card-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
  .art-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
  .art-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .art-card h3 { font-size: 15px; font-weight: 600; color: var(--text-dark); line-height: 1.4; margin-bottom: 8px; flex: 1; }
  .art-card p { font-size: 13px; line-height: 1.6; color: var(--text-muted); font-weight: 300; margin-bottom: 14px; }
  .art-card-link { font-size: 12px; font-weight: 500; color: var(--green-accent); letter-spacing: 0.04em; text-transform: uppercase; margin-top: auto; }

  /* RESPONSIVE */
  @media (max-width: 960px) {
    .page-hero { padding: 80px 24px 48px; }
    .featured-wrap { padding: 0 24px; }
    .featured-post { grid-template-columns: 1fr; }
    .featured-thumb { aspect-ratio: 16/9; }
    .featured-body { padding: 28px 24px; }
    .filter-bar { padding: 14px 24px; top: 60px; }
    .section-wrap, .list-section { padding: 48px 24px; }
    .cards-grid { grid-template-columns: 1fr; }
    .list-item { grid-template-columns: 120px 1fr; }
  }