@layer pages{
  :root{
    --page-image-sm:url("/assets/site/pages/news-hero-1280.webp");
    --page-image-md:url("/assets/site/pages/news-hero.webp");
    --page-image-lg:url("/assets/site/pages/news-hero.webp");
    --ground-edge:url("/assets/site/masks/news-hero.svg");
  }
  .news-column{--news-width:calc(var(--reading-width) + var(--space-4) * 2);
    width:min(100%,var(--news-width));margin-inline:auto;display:grid;gap:var(--space-4)}
  .news-list{display:grid;gap:var(--space-4)}
  .news-add{position:fixed;z-index:25;right:var(--space-5);bottom:var(--space-5);
    --fab-size:68px;
    --button-min-width:0;--button-pad-x:0;--button-height:var(--fab-size);
    width:var(--fab-size);height:var(--fab-size);padding:0;
    border-radius:50%;corner-shape:round}
  .news-add::before{inset:0}
  .news-add i{display:block;width:26px;height:26px;position:relative}
  .news-add i::before,.news-add i::after{content:"";position:absolute;inset:50% 0 auto;
    height:3px;margin-top:-1.5px;border-radius:2px;
    background:linear-gradient(90deg,var(--gold),var(--gold-highlight) 50%,var(--gold));
    box-shadow:0 1px 2px rgba(0,0,0,.6)}
  .news-add i::after{rotate:90deg}
  @media (max-width:900px){
    .news-add{--fab-size:60px;right:var(--space-4);bottom:var(--space-4)}
  }
  .news-item .panel-head{flex-wrap:wrap}
  .news-item .panel-head h2{font-size:26px;letter-spacing:.04em}
  .news-item .panel-head .tag{margin-left:auto}
  .news-item .tag.is-closed{--tag-color:var(--art-leitungsbesprechung)}
  .news-item .meta{margin:var(--space-3) 0 0}
  .news-text{margin-top:var(--space-2);display:grid;gap:var(--space-2)}
  .news-text p{margin:0;font-size:17px;line-height:1.7;color:var(--text)}
  .news-text a{color:var(--gold);text-decoration:underline;
    text-decoration-color:var(--rule-line);text-underline-offset:3px}
  .news-text a:hover{color:var(--gold-light);text-decoration-color:currentColor}
  .news-item:has(.news-actions){--panel-pad-bottom:var(--space-2)}
  .news-actions{display:flex;justify-content:flex-end;gap:var(--space-4);
    margin-top:var(--space-2);padding-top:var(--space-2)}
  .news-item:target{--ring-fill:linear-gradient(90deg,var(--gold-dark),var(--gold) 50%,var(--gold-dark))}
  @media (max-width:620px){
    .news-item .panel-head h2{font-size:20px}
    .news-text p{font-size:16px}
    .news-lead .button{width:100%}
  }
}