:root{
  --fcn-red:#ab1923;
  --fcn-red-deep:#7c101b;
  --fcn-red-card:#8c131e;
  --fcn-red-card2:#6d0e17;
  --black:#0d0d0d;
  --white:#ffffff;
  --accent:#ff2d3f;
  --gold:#ffcf4a;
  --line:rgba(255,255,255,.20);
  --muted:rgba(255,255,255,.72);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:#ffffff;
  color:#0d0d0d;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---------- Header (diagonaler Rot/Schwarz-Split) ---------- */
header{
  position:relative;
  overflow:hidden;
  background:var(--fcn-red);
  color:#ffffff;
  padding:38px 22px 34px;
  border-bottom:4px solid var(--black);
}
header .pill{color:#ffffff}
header::before{
  content:"";position:absolute;inset:0;
  background:var(--black);
  clip-path:polygon(64% 0,100% 0,100% 100%,42% 100%);
}
header::after{
  content:"";position:absolute;inset:0;opacity:.05;
  background:repeating-linear-gradient(45deg,#fff 0 16px,transparent 16px 32px);
  pointer-events:none;
}
.head-inner{max-width:960px;margin:0 auto;position:relative;z-index:1}
.crest{display:flex;align-items:center;gap:20px}
.crest .logo-link{display:inline-flex;flex:none;line-height:0}
.crest .logo{
  width:104px;height:104px;flex:none;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.crest .badge{
  width:96px;height:96px;border-radius:50%;
  background:var(--white);color:var(--fcn-red);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:30px;letter-spacing:-1px;flex:none;
}
h1{
  font-size:clamp(30px,6vw,48px);font-weight:900;color:#ffffff;
  letter-spacing:.5px;line-height:1;text-transform:uppercase;
  text-shadow:0 3px 10px rgba(0,0,0,.35);
}
.sub{font-size:15px;color:rgba(255,255,255,.9);margin-top:6px;font-weight:600}
.meta-bar{
  max-width:960px;margin:20px auto 0;position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;
}
.pill{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.35);
  padding:7px 14px;border-radius:999px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
.dot.live{background:#37d67a;animation:livePulse 2.6s ease-in-out infinite}
@keyframes livePulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(55,214,122,.55)}
  50%{opacity:.45;transform:scale(.8);box-shadow:0 0 0 6px rgba(55,214,122,0)}
}

/* Spenden-Banner zwischen Header und Feed */
.spende{display:block;text-align:center;margin:50px auto 0;padding:0 16px}
.spende img{width:310px;max-width:100%;height:auto;display:inline-block;transform-origin:center;animation:spendePulse 5s ease-in-out infinite}
.spende img:hover{animation-play-state:paused}
@keyframes spendePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* ---------- Main ---------- */
/* Feed-Section: weißer Hintergrund, nur Rot & Weiß */
main{
  max-width:960px;margin:0 auto;padding:26px 16px 32px;
  background:#fff;
}

/* Überschrift über der Status-Leiste */
.pressespiegel-title{
  text-align:center;color:#000;
  font-weight:400;font-size:clamp(20px,4.4vw,30px);
  text-transform:uppercase;letter-spacing:1px;
  margin:0 0 20px;
}

/* Status-/Zähler-Leiste (rote Bar auf Weiß) */
.status{
  background:var(--fcn-red);
  border:1px solid var(--fcn-red);
  border-radius:12px;
  padding:14px 18px;
  font-size:14px;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
  box-shadow:0 8px 20px rgba(171,25,35,.28);
}
.status{flex-wrap:wrap}
.status-text{display:inline-flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.status-refresh{
  flex:none;margin-left:auto;
  background:#fff;color:var(--fcn-red);
  border:none;cursor:pointer;
  font-weight:800;font-size:12px;letter-spacing:.2px;
  padding:6px 13px;border-radius:999px;white-space:nowrap;
  transition:background .15s,color .15s;
}
.status-refresh:hover{background:var(--black);color:#fff}
.spinner{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;flex:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toolbar mit Refresh-Button (über & unter der Liste) */
.toolbar{display:flex;justify-content:center;margin:6px 0 18px}
.toolbar.bottom{margin:22px 0 6px}
.refresh-btn{
  background:var(--fcn-red);color:#fff;
  border:2px solid var(--fcn-red);cursor:pointer;
  font-weight:800;font-size:14px;letter-spacing:.4px;
  padding:13px 28px;border-radius:999px;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
  box-shadow:0 8px 20px rgba(171,25,35,.28);
}
.refresh-btn:hover{background:var(--fcn-red-deep);color:#fff;border-color:var(--fcn-red-deep)}
.refresh-btn:active{transform:translateY(1px)}

/* "Zurück zu Clubfans Reunited"-Link unter dem unteren Button */
.back-link-wrap{text-align:center;margin-top:26px}
.back-link{
  display:inline-block;
  color:var(--fcn-red);font-weight:800;font-size:20px;
  text-decoration:underline;text-underline-offset:4px;
  padding:6px 4px;
  transition:color .15s;
}
.back-link:hover{color:var(--fcn-red-deep)}

/* Fan-Bild über dem Footer */
.zweifans-wrap{text-align:center;margin:26px auto 30px;padding:0 16px}
.zweifans{width:320px;max-width:100%;height:auto;display:inline-block;border-radius:15px}
@media (max-width:560px){
  .zweifans{width:100%}
}

/* Nachrichten-Liste */
ul.news{list-style:none}
li.item{
  background:#fff;
  border:1px solid #eccace;
  border-left:5px solid var(--fcn-red);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:14px;
  box-shadow:0 8px 20px rgba(171,25,35,.12);
  transition:transform .13s ease,box-shadow .13s ease,border-left-color .13s;
}
li.item:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(171,25,35,.24);
  border-left-color:var(--fcn-red-deep);
}
.item-top{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:11px}
.medium{
  background:var(--fcn-red);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 11px;border-radius:0;white-space:nowrap;
  border:1px solid var(--fcn-red);
}
.date{font-size:12.5px;color:#b23640;font-weight:700}
.fresh{
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;
  color:var(--fcn-red);background:#fff;border:1px solid var(--fcn-red);
  padding:2px 8px;border-radius:5px;
}
h2.headline{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:19px;font-weight:700;line-height:1.32;color:#000000;
  margin-bottom:14px;
}
a.read{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--fcn-red);font-weight:700;font-size:13.5px;text-decoration:none;
  background:none;border:none;padding:0;
  transition:gap .15s,color .15s;
}
a.read:hover{color:var(--fcn-red-deep);text-decoration:underline;gap:9px}
a.read .arrow{transition:transform .15s}
a.read:hover .arrow{transform:translateX(3px)}

.empty{
  text-align:center;padding:50px 20px;color:var(--fcn-red);
  background:#fff;border:1px dashed var(--fcn-red);border-radius:12px;
}

/* Footer */
footer{
  text-align:center;font-size:12.5px;color:#fff;
  padding:26px 16px 46px;margin:0;
  background:var(--fcn-red);
}
footer b{color:#fff}
.footer-text{margin:0}
.to-top{
  display:block;width:fit-content;margin:0 0 18px auto;
  background:#fff;color:var(--fcn-red);
  border:none;cursor:pointer;
  font-weight:800;font-size:12px;letter-spacing:.2px;
  padding:6px 13px;border-radius:999px;white-space:nowrap;
  transition:background .15s,color .15s,transform .1s;
}
.to-top:hover{background:var(--black);color:#fff}
.to-top:active{transform:translateY(1px)}

@media (max-width:560px){
  .crest{gap:14px}
  .crest .logo{width:78px;height:78px}
  header::before{clip-path:polygon(72% 0,100% 0,100% 100%,55% 100%)}
}