
/* =====================================================================
   Aktuelles, Stil "Label-Katalog", wie die anderen Seiten.

   Leser sind zwischen 45 und 85: Grundschrift 18 px, hoher Kontrast,
   grosse Klickflaechen, nichts unter 0.85 rem.

   Zur Farbe der Kategorien: Die fuenf Farben kommen aus der Datenbank
   und stehen als eingetragener Stil am Element. Sie bleiben, weil sie
   eine echte Unterscheidung tragen. Sie erscheinen aber nur noch als
   Wort in ihrer Farbe, nicht mehr als bunte Pille mit Rahmen. Das
   Tuerkis bleibt trotzdem dem vorbehalten, was irgendwo hinfuehrt.

   WICHTIG: Kein <header>, <footer>, <nav> oder <main> im Seiteninhalt.
   Die globale style.css greift auf das reine Element.
   ===================================================================== */

/* Die alte Regel "main{padding:0}" ist am 23.09.2026 entfallen.
   Der Seitenverlauf soll rundherum sichtbar bleiben. */
.news-page{
  --grund:transparent;
  --text:var(--tf-text,#FFFFFF);
  --leise:var(--tf-leise,#B6C4D4);
  --linie:var(--tf-linie,rgba(255,255,255,.12));
  --kasse:var(--tf-kasse,#00FFFF);
  font-family:var(--tf-schrift,'Poppins',Arial,sans-serif);
  color:var(--text);background:var(--grund);
  font-size:18px;line-height:1.65;text-align:left;letter-spacing:normal;
  width:100%;max-width:100%;margin:0;
  padding:0 0 clamp(3rem,6vw,4.5rem);
  min-height:72vh;
}
.news-page *{letter-spacing:normal;box-sizing:border-box;text-align:inherit}
.news-page h1,.news-page h2,.news-page h3{
  font-family:inherit !important;text-transform:none !important;text-shadow:none !important;
  animation:none !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;letter-spacing:-.01em !important;
}
.news-page header,.news-page footer,.news-page nav{
  position:static !important;z-index:auto !important;top:auto !important;
}

/* Aussen die volle Breite mit Grund, innen die Spalte.
   Grund und Breite gehoeren nie auf dasselbe Element. */
.news-hero,
.news-filters,
.news-grid,
.news-empty,
.news-load-more-wrap{
  max-width:1240px;margin-left:auto;margin-right:auto;
  padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px);
}

/* ================== Kopf ================== */
.news-hero{
  padding-top:clamp(2.5rem,6vw,4.5rem);
  padding-bottom:clamp(1.4rem,3vw,2rem);
  text-align:left;
}
.news-hero h1{
  margin:0;font-size:clamp(2.4rem,6vw,4.2rem);font-weight:500;line-height:1;
  color:var(--text);text-shadow:none;
}
.news-hero p{
  margin:1rem 0 0;font-size:1.08rem;color:#DCE6F2;line-height:1.65;max-width:56ch;
}

/* ================== Filter ================== */
.news-filters{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:flex-start;
  padding-bottom:clamp(1.2rem,2.5vw,1.8rem);margin-bottom:clamp(1.8rem,3.5vw,2.6rem);
  border-bottom:1px solid var(--linie);
}
.news-filter-btn{
  font-size:1rem;font-weight:400;text-decoration:none;white-space:nowrap;
  background:transparent;color:var(--leise);
  border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:.35rem 0;transition:color .2s,border-color .2s;
}
.news-filter-btn:hover{background:transparent;color:var(--text);border-color:transparent}
.news-filter-btn.active{background:transparent;color:var(--text);border-bottom-color:var(--text)}

/* ================== Das Regal ================== */
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,2.4vw,2.2rem);
}
@media (max-width:1099px){ .news-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:639px){ .news-grid{grid-template-columns:1fr} }

.news-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,255,255,.18);
  border-radius:12px;overflow:hidden;cursor:pointer;
  transition:border-color .3s ease,box-shadow .3s ease;
  display:flex;flex-direction:column;
}
.news-card:hover{
  transform:none;
  border-color:rgba(0,255,255,.5);
  box-shadow:0 4px 24px rgba(0,255,255,.12);
}
.news-card.news-card-hidden{display:none}
.news-card:focus-visible{outline:2px solid var(--kasse);outline-offset:3px}

.news-card-img-wrap{aspect-ratio:16/9;overflow:hidden;width:100%;background:#131A26}
.news-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.news-card:hover .news-card-img{transform:scale(1.03)}
.news-card-img-placeholder{
  width:100%;aspect-ratio:16/9;background:#131A26;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#8195A9;
}

.news-card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}

/* Kategorie: Wort in seiner Farbe, keine Pille */
.news-card-cat{
  display:inline-block;margin:0 0 .6rem;padding:0 !important;
  background:transparent !important;border:0 !important;border-radius:0 !important;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.news-card-title{
  font-size:1.12rem;font-weight:500;line-height:1.35;color:var(--text);margin-bottom:.5rem;
}
.news-card-teaser{
  font-size:.98rem;color:#B6C4D4;line-height:1.65;margin-bottom:1rem;
}

/* Kurzlinks: auffaellig genug, aber ohne Pulsieren */
.news-card-links{text-align:left;margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.news-card-link-btn{
  display:inline-block;margin:0;
  font-size:.95rem;font-weight:500;text-decoration:none;
  background:transparent;color:var(--text);
  border:1px solid var(--linie);border-radius:0;padding:.5rem 1.2rem;
  animation:none !important;transition:border-color .2s,color .2s;
}
.news-card-link-btn:hover{
  background:transparent;transform:none;
  border-color:var(--kasse);color:var(--kasse);
}

.news-card-meta{
  margin-top:auto;padding-top:.8rem;border-top:1px solid var(--linie);
  color:var(--leise);font-size:.88rem;
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between;
  font-variant-numeric:tabular-nums;
}

/* ================== Leer und Nachladen ================== */
.news-empty{padding:4rem 0;color:var(--leise);text-align:left;max-width:60ch}
.news-empty i{font-size:2rem;display:block;margin-bottom:1rem;color:#8195A9}
.news-empty p{margin:0;font-size:1.05rem;line-height:1.7}

.news-load-more-wrap{text-align:left;margin:clamp(2rem,4vw,3rem) auto 0}
.news-load-more-btn{
  font:inherit;font-size:1.02rem;font-weight:500;
  background:transparent;color:var(--text);
  border:1px solid var(--linie);border-radius:0;padding:.7rem 1.8rem;cursor:pointer;
  transition:border-color .2s;
}
.news-load-more-btn:hover{border-color:var(--text)}
.news-load-more-btn:focus-visible{outline:2px solid var(--kasse);outline-offset:3px}

/* ================== Fenster ================== */
.news-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(6,6,9,.92);
}
.news-overlay.active{display:flex;align-items:center;justify-content:center;padding:clamp(0px,2vw,1.5rem)}
.news-modal{
  position:relative;width:100%;max-width:820px;max-height:92vh;overflow-y:auto;
  background:#131A26;border:1px solid var(--linie);border-radius:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.7);padding:0;
  animation:none;
  font-family:var(--tf-schrift,'Poppins',Arial,sans-serif);
  color:var(--text);font-size:18px;line-height:1.65;text-align:left;
}
.news-modal-close{
  position:absolute;top:.8rem;right:.8rem;z-index:5;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:1.5rem;line-height:1;
  background:rgba(11,11,15,.75);color:var(--text);
  border:1px solid var(--linie);border-radius:0;cursor:pointer;
  transition:border-color .2s,color .2s,transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.news-modal-close:hover{border-color:var(--kasse);color:var(--kasse);transform:rotate(90deg)}

.news-modal-img{width:100%;height:auto;display:block;background:#131A26}
.news-modal-body{padding:clamp(1.4rem,3vw,2.2rem)}
.news-modal-body h2{
  margin:0 0 .6rem;font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:500;
  line-height:1.2;color:var(--text);
}
.news-modal-meta{
  font-size:.92rem;color:var(--leise);margin-bottom:1.4rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--linie);
  font-variant-numeric:tabular-nums;
}
/* Der Beitragstext kommt als fertiges HTML aus dem Redaktionswerkzeug */
.news-modal-content{font-size:1.05rem;line-height:1.75;color:#DCE6F2;overflow-wrap:anywhere}
.news-modal-content > *{max-width:100%}
.news-modal-content p{margin:0 0 1.1rem;max-width:72ch}
.news-modal-content h1,.news-modal-content h2,.news-modal-content h3{
  margin:1.8rem 0 .7rem;color:var(--text);font-weight:500;line-height:1.25;
}
.news-modal-content h1{font-size:1.7rem}
.news-modal-content h2{font-size:1.4rem}
.news-modal-content h3{font-size:1.15rem}
.news-modal-content a{color:var(--kasse);text-decoration:none;border-bottom:1px solid currentColor}
.news-modal-content a:hover{color:var(--text)}
.news-modal-content img{height:auto;display:block;margin:1.3rem 0;border-radius:8px}
.news-modal-content ul,.news-modal-content ol{margin:0 0 1.1rem 1.3rem;max-width:72ch}
.news-modal-content li{margin-bottom:.45rem}
.news-modal-content blockquote{
  margin:1.3rem 0;padding-left:1.1rem;border-left:2px solid var(--linie);color:var(--leise);
}
.news-modal-content hr{border:0;border-top:1px solid var(--linie);margin:1.8rem 0}
.news-modal-loading{padding:3rem clamp(1.4rem,3vw,2.2rem);color:var(--leise);font-size:1rem}

/* ================== Kommentare ================== */
.news-comments-section{
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--linie);
}
.news-comments-section h3{
  margin:0 0 1rem;font-size:.8rem;font-weight:600;
  letter-spacing:.14em !important;text-transform:uppercase;color:var(--leise);
}
.news-comment-item{padding:1rem 0;border-bottom:1px solid var(--linie)}
.news-comment-item:last-child{border-bottom:none}
.news-comment-user{color:var(--text);font-weight:500;font-size:.98rem}
.news-comment-date{color:#8195A9;font-size:.85rem;margin-left:.7rem;font-variant-numeric:tabular-nums}
.news-comment-text{
  color:#B6C4D4;font-size:1rem;margin-top:.45rem;line-height:1.7;overflow-wrap:anywhere;
}
.news-comment-form{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.3rem}
.news-comment-input{
  flex:1 1 240px;min-width:0;font:inherit;font-size:1rem;color:var(--text);
  background:transparent;border:1px solid var(--linie);border-radius:0;
  padding:.7rem .8rem;resize:vertical;
}
.news-comment-input:focus{border-color:var(--kasse);outline:none}
.news-comment-submit{
  font:inherit;font-size:1rem;font-weight:500;white-space:nowrap;
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);border-radius:0;
  padding:.68rem 1.5rem;cursor:pointer;transition:background .2s,color .2s;
}
.news-comment-submit:hover{background:transparent;color:var(--kasse)}
.news-comment-submit:disabled{opacity:.45;cursor:default}
.news-comment-login{color:var(--leise);font-size:.98rem;margin-top:1.2rem}
.news-comment-login a{color:var(--kasse);text-decoration:none;border-bottom:1px solid currentColor}
.news-comment-success{color:var(--kasse);font-size:.98rem;margin-top:.8rem}

@media (max-width:639px){
  .news-overlay.active{padding:0}
  .news-modal{max-width:100%;max-height:100vh;border-radius:0;border:0}
  .news-comment-form{flex-direction:column}
  .news-comment-submit{width:100%}
  .news-load-more-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .news-page *,.news-modal *{transition:none !important;animation:none !important}
}

/* =====================================================================
   Am 23.09.2026 auf die Tafel umgestellt, Grundlage assets/css/tafel.css.
   Der blaue Seitenverlauf bleibt sichtbar, der Inhalt sitzt auf einer
   dunklen Tafel, Poppins als Schrift, Farbe ist erlaubt. Der Aufbau
   der Seite ist unveraendert geblieben.
   ===================================================================== */
main.news-main{
  padding:clamp(10px,2vw,22px) clamp(10px,2vw,20px) clamp(28px,4vw,48px) !important;
  align-items:stretch !important;max-width:100% !important;text-align:left !important;
}
.news-page{
  /* box-sizing ist hier noetig: ohne das rechnet der Browser das
     Polster auf die 100 Prozent Breite drauf und die Tafel laeuft
     rechts aus dem Fenster. Gefunden am 23.09.2026. */
  box-sizing:border-box;
  width:100%;max-width:1280px;margin:0 auto;
  padding:clamp(26px,4vw,48px) clamp(18px,3vw,44px) clamp(30px,5vw,52px);
  background:linear-gradient(180deg, var(--tf-tafel-1,rgba(10,16,28,.72)) 0%, var(--tf-tafel-2,rgba(6,10,18,.82)) 100%);
  border:1px solid var(--tf-rand,rgba(0,255,255,.16));
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  font-size:17px;line-height:1.7;
}
@media (max-width:600px){
  .news-page{padding:22px 16px 28px;border-radius:16px}
}
