/* ============================================================
   FV Rot-Weiß Erpel 1919 e.V. — Startseite
   Design-Tokens
   ============================================================ */
:root{
  --fve-rot:        #D6001C;   /* Vereinsrot */
  --fve-rot-tief:   #7A0512;   /* Bordeaux, Text & Overlays */
  --fve-tinte:      #17161A;   /* Basalt (Erpeler Ley) */
  --fve-tinte-70:   #55535A;
  --fve-papier:     #F0EEE9;   /* heller Seitengrund */
  --fve-weiss:      #FFFFFF;
  --fve-rasen:      #0E6B3C;   /* Kunstrasen – sparsamer Akzent */
  --fve-linie:      rgba(23,22,26,.14);

  --fve-display: "Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --fve-text:    "Newsreader",Georgia,serif;
  --fve-mono:    "IBM Plex Mono",ui-monospace,Menlo,monospace;

  --fve-breit: 1180px;
  --fve-luft: clamp(56px, 8vw, 112px);
}

.fve *, .fve *::before, .fve *::after{box-sizing:border-box}


.fve img{max-width:100%; display:block}
.fve a{color:inherit}

/* --- Die Binde: rot-weiß gestreiftes Band (Signature) --- */
.fve .binde{
  height:10px;
  background:repeating-linear-gradient(115deg,
    var(--fve-rot) 0 16px, var(--fve-weiss) 16px 32px);
  border-block:1px solid rgba(0,0,0,.12);
}

.fve .wrap{width:min(100% - 40px, var(--fve-breit)); margin-inline:auto}

/* --- Typo-Bausteine --- */
.fve .eyebrow{
  font-family:var(--fve-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fve-rot-tief); margin:0 0 10px;
}
.fve .h-sektion{
  font-family:var(--fve-display); font-weight:800;
  font-size:clamp(34px,5.2vw,58px); line-height:.92;
  text-transform:uppercase; letter-spacing:-.005em; margin:0 0 8px;
}
.fve .lead{max-width:60ch; color:var(--fve-tinte-70); margin:0}
.fve .sektion{padding-block:var(--fve-luft)}
.fve .sektion--dunkel{background:var(--fve-tinte); color:#EDEBE7}
.fve .sektion--dunkel .lead{color:#A9A6A1}
.fve .sektion--dunkel .eyebrow{color:#FF6B78}
.fve .kopf{display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-end; justify-content:space-between; margin-bottom:38px}

/* --- Buttons --- */
.fve .btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fve-display); font-weight:700; font-size:19px;
  text-transform:uppercase; letter-spacing:.03em; text-decoration:none;
  padding:13px 24px 11px; border:2px solid var(--fve-tinte); background:transparent;
  color:var(--fve-tinte); cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.fve .btn:hover{transform:translateY(-2px)}
.fve .btn--rot{background:var(--fve-rot); border-color:var(--fve-rot); color:#fff}
.fve .btn--rot:hover{background:var(--fve-rot-tief); border-color:var(--fve-rot-tief)}
.fve .btn--hell{border-color:#fff; color:#fff}
.fve .btn--hell:hover{background:#fff; color:var(--fve-tinte)}
.fve :focus-visible{outline:3px solid var(--fve-rot); outline-offset:3px}

/* ============================================================
   Kopfzeile
   ============================================================ */
.fve .skip{position:absolute; left:-9999px}
.fve .skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:10px 16px}

.fve header.top{position:sticky; top:0; z-index:50; background:rgba(240,238,233,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--fve-linie)}
.fve .topbar{display:flex; align-items:center; gap:20px; padding:12px 0; }
.fve .marke{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.fve .marke img{width:46px; height:auto}
.fve .marke b{font-family:var(--fve-display); font-weight:800; font-size:22px; line-height:.95; text-transform:uppercase; display:block}
.fve .marke span{font-family:var(--fve-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fve-tinte-70)}
.fve .nav{display:flex; gap:26px; align-items:center}
.fve .nav a{
  font-family:var(--fve-display); font-weight:600; font-size:19px; text-transform:uppercase;
  letter-spacing:.02em; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent;
}
.fve .nav a:hover{border-bottom-color:var(--fve-rot)}
.fve .nav ul{display:contents}
.fve .nav li{list-style:none; margin:0}
.fve .nav .btn{font-size:17px; padding:9px 18px 7px}
.fve .burger{display:none; background:none; border:2px solid var(--fve-tinte); padding:8px 10px; cursor:pointer}
.fve .burger span{display:block; width:22px; height:2px; background:var(--fve-tinte); margin:4px 0}

/* ============================================================
   Hero
   ============================================================ */
.fve .hero{position:relative; background:var(--fve-tinte); color:#fff; overflow:hidden}
.fve .hero img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.42; filter:grayscale(.35) contrast(1.05);
}
.fve .hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,22,26,.55) 0%, rgba(23,22,26,.25) 45%, rgba(23,22,26,.92) 100%);
}
.fve .hero-inhalt{position:relative; z-index:2; padding-top:clamp(70px,11vw,130px); padding-bottom:clamp(40px,6vw,70px)}
.fve .hero .jahr{
  font-family:var(--fve-display); font-weight:800; font-size:clamp(70px,15vw,190px); line-height:.8;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.28); margin:0 0 -.18em;
  letter-spacing:.02em;
}
.fve .hero h1{
  font-family:var(--fve-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(46px,10vw,124px); line-height:.86; margin:0; letter-spacing:-.01em;
}
.fve .hero h1 em{font-style:normal; color:var(--fve-rot); text-shadow:0 0 30px rgba(214,0,28,.35)}
.fve .hero .claim{
  font-family:var(--fve-mono); font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  margin:22px 0 0; color:#fff;
}
.fve .hero .satz{max-width:52ch; margin:16px 0 30px; color:#D9D6D1}
.fve .hero .aktionen{display:flex; flex-wrap:wrap; gap:14px}

/* --- Spieltagskarte (überlappend) --- */
.fve .spieltag{
  position:relative; z-index:3; margin-top:-58px; margin-bottom:0;
  background:var(--fve-weiss); border:1px solid var(--fve-linie);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.5);
  display:grid; grid-template-columns:12px 1fr; overflow:hidden;
}
.fve .spieltag .band{background:repeating-linear-gradient(115deg,var(--fve-rot) 0 12px,#fff 12px 24px)}
.fve .spieltag-innen{display:grid; grid-template-columns:1.35fr 1fr; gap:0}
.fve .naechstes{padding:28px 30px}
.fve .naechstes .zeile{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.fve .tag-badge{
  font-family:var(--fve-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--fve-rasen); color:#fff; padding:4px 9px;
}
.fve .tag-badge.aus{background:var(--fve-tinte-70)}
.fve .paarung{
  font-family:var(--fve-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,40px); line-height:1; margin:12px 0 6px;
}
.fve .paarung .vs{color:var(--fve-rot); margin:0 10px}
.fve .meta{font-family:var(--fve-mono); font-size:12.5px; color:var(--fve-tinte-70); letter-spacing:.04em}
.fve .counter{display:flex; gap:18px; margin-top:18px}
.fve .counter div{text-align:center; min-width:56px}
.fve .counter b{font-family:var(--fve-display); font-weight:800; font-size:36px; line-height:1; display:block}
.fve .counter small{font-family:var(--fve-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fve-tinte-70)}
.fve .ergebnisse{border-left:1px solid var(--fve-linie); padding:28px 30px; background:#FAF9F7}
.fve .ergebnisse h3{font-family:var(--fve-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px; color:var(--fve-tinte-70)}
.fve .erg{display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--fve-linie); font-size:15px}
.fve .erg:first-of-type{border-top:0}
.fve .pkt{width:20px; height:20px; display:grid; place-items:center; font-family:var(--fve-mono); font-size:11px; font-weight:600; color:#fff}
.fve .pkt.s{background:var(--fve-rasen)} .fve .pkt.u{background:#9A8F00} .fve .pkt.n{background:var(--fve-rot-tief)}
.fve .erg b{font-family:var(--fve-mono); font-weight:600}

/* ============================================================
   Aktuelles
   ============================================================ */
.fve .news{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.fve .karte{background:var(--fve-weiss); border:1px solid var(--fve-linie); display:flex; flex-direction:column; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease}
.fve .karte:hover{transform:translateY(-4px); box-shadow:0 22px 40px -28px rgba(0,0,0,.45)}
.fve .karte .bild{aspect-ratio:16/10; overflow:hidden; background:#DDD9D3}
.fve .karte .bild img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.fve .karte:hover .bild img{transform:scale(1.04)}
.fve .karte .inhalt{padding:20px 22px 24px}
.fve .karte h3{font-family:var(--fve-display); font-weight:700; text-transform:uppercase; font-size:25px; line-height:1.02; margin:8px 0 8px}
.fve .karte p{margin:0; font-size:15.5px; color:var(--fve-tinte-70)}
.fve .datum{font-family:var(--fve-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fve-rot-tief)}

/* ============================================================
   Mannschaften
   ============================================================ */
.fve .teams{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14)}
.fve .team{background:var(--fve-tinte); padding:30px 28px 34px; position:relative}
.fve .team .nr{font-family:var(--fve-display); font-weight:800; font-size:15px; letter-spacing:.2em; color:var(--fve-rot); text-transform:uppercase}
.fve .team h3{font-family:var(--fve-display); font-weight:800; text-transform:uppercase; font-size:32px; line-height:1; margin:10px 0 14px}
.fve .team dl{margin:0; font-size:15px}
.fve .team dt{font-family:var(--fve-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#8E8B86; margin-top:14px}
.fve .team dd{margin:2px 0 0}
.fve .team .mehr{display:inline-block; margin-top:20px; font-family:var(--fve-display); font-weight:700; font-size:18px; text-transform:uppercase; text-decoration:none; border-bottom:2px solid var(--fve-rot); padding-bottom:2px}

/* ============================================================
   Verein / Zahlen
   ============================================================ */
.fve .verein{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:center}
.fve .verein-bild{position:relative}
.fve .verein-bild img{border:1px solid var(--fve-linie)}
.fve .verein-bild .stempel{
  position:absolute; right:-14px; bottom:-18px; background:var(--fve-rot); color:#fff;
  font-family:var(--fve-display); font-weight:800; text-transform:uppercase; line-height:.9;
  padding:16px 18px 13px; font-size:26px; text-align:center;
}
.fve .verein-bild .stempel small{display:block; font-family:var(--fve-mono); font-size:10px; letter-spacing:.14em; font-weight:400; margin-top:6px}
.fve .zahlen{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px; border-top:2px solid var(--fve-tinte)}
.fve .zahl{padding:20px 16px 0; border-right:1px solid var(--fve-linie)}
.fve .zahl:last-child{border-right:0}
.fve .zahl b{display:block; font-family:var(--fve-display); font-weight:800; font-size:clamp(38px,5vw,58px); line-height:.9}
.fve .zahl small{font-family:var(--fve-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--fve-tinte-70)}

/* ============================================================
   Termine
   ============================================================ */
.fve .termine{display:grid; gap:0; border-top:1px solid var(--fve-linie)}
.fve .termin{display:grid; grid-template-columns:104px 1fr auto; gap:22px; align-items:center; padding:20px 6px; border-bottom:1px solid var(--fve-linie); text-decoration:none; transition:background .15s ease, padding .15s ease}
.fve .termin:hover{background:var(--fve-weiss); padding-inline:16px}
.fve .termin .kal{border:2px solid var(--fve-tinte); text-align:center; padding:8px 4px 6px}
.fve .termin .kal b{display:block; font-family:var(--fve-display); font-weight:800; font-size:30px; line-height:.9}
.fve .termin .kal small{font-family:var(--fve-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase}
.fve .termin h3{font-family:var(--fve-display); font-weight:700; text-transform:uppercase; font-size:26px; margin:0 0 3px; line-height:1}
.fve .termin p{margin:0; font-size:15px; color:var(--fve-tinte-70)}
.fve .termin .zeit{font-family:var(--fve-mono); font-size:13px; white-space:nowrap}

/* ============================================================
   Mitmachen / Shop
   ============================================================ */
.fve .cta{background:var(--fve-rot); color:#fff}
.fve .cta-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center}
.fve .cta h2{font-family:var(--fve-display); font-weight:800; text-transform:uppercase; font-size:clamp(38px,6vw,74px); line-height:.9; margin:0 0 16px}
.fve .cta p{max-width:46ch; color:#FFE0E4; margin:0 0 26px}
.fve .cta .aktionen{display:flex; flex-wrap:wrap; gap:14px}
.fve .cta .btn{border-color:#fff; color:#fff}
.fve .cta .btn:hover{background:#fff; color:var(--fve-rot)}
.fve .cta .btn--weiss{background:#fff; color:var(--fve-rot)}
.fve .cta .btn--weiss:hover{background:var(--fve-tinte); border-color:var(--fve-tinte); color:#fff}
.fve .vorteile{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.35)}
.fve .vorteile li{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.35); display:flex; gap:14px; align-items:baseline; font-size:16px}
.fve .vorteile span{font-family:var(--fve-mono); font-size:12px; opacity:.75}

/* ============================================================
   Partner
   ============================================================ */
.fve .partner{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.fve .partner div{
  border:1px solid var(--fve-linie); background:var(--fve-weiss); padding:20px 30px; min-width:170px; text-align:center;
  font-family:var(--fve-display); font-weight:700; text-transform:uppercase; font-size:20px; color:var(--fve-tinte-70);
}

/* ============================================================
   Anfahrt / Kontakt
   ============================================================ */
.fve .kontakt{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px)}
.fve .kontakt-block h3{font-family:var(--fve-display); font-weight:800; text-transform:uppercase; font-size:26px; margin:0 0 10px}
.fve .kontakt dl{display:grid; grid-template-columns:120px 1fr; gap:8px 16px; margin:0; font-size:16px}
.fve .kontakt dt{font-family:var(--fve-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fve-tinte-70); padding-top:5px}
.fve .kontakt dd{margin:0}
.fve .karte-map{border:1px solid var(--fve-linie); background:var(--fve-weiss); min-height:260px; height:100%; display:grid; place-items:center; text-align:center; padding:30px}
.fve .karte-map .eyebrow{margin-bottom:4px}

/* ============================================================
   Fußzeile
   ============================================================ */
.fve footer{background:var(--fve-tinte); color:#B7B4AF; padding-block:56px 30px; font-size:15px}
.fve .fuss{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.fve .fuss h4{font-family:var(--fve-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin:0 0 14px}
.fve .fuss ul{list-style:none; margin:0; padding:0}
.fve .fuss li{margin-bottom:8px}
.fve .fuss a{text-decoration:none}
.fve .fuss a:hover{color:#fff; text-decoration:underline}
.fve .fuss .marke b{color:#fff}
.fve .fuss .marke span{color:#8E8B86}
.fve .fussleiste{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); font-family:var(--fve-mono); font-size:11.5px; letter-spacing:.05em}

/* ============================================================
   Bewegung & Responsive
   ============================================================ */
.fve .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.fve .reveal.da{opacity:1; transform:none}

@media (max-width:960px){
  .fve .nav{
    position:fixed; inset:64px 0 auto; background:var(--fve-papier); flex-direction:column;
    align-items:flex-start; gap:0; padding:12px 20px 24px; border-bottom:1px solid var(--fve-linie);
    display:none;
  }
  .fve .nav.offen{display:flex}
  .fve .nav a{width:100%; padding:12px 0; border-bottom:1px solid var(--fve-linie); font-size:22px}
  .fve .nav li{width:100%}
  .fve .nav .btn{margin-top:14px; width:100%; justify-content:center; border-bottom:2px solid var(--fve-rot)}
  .fve .burger{display:block}
  .fve .spieltag-innen{grid-template-columns:1fr}
  .fve .ergebnisse{border-left:0; border-top:1px solid var(--fve-linie)}
  .fve .news, .fve .teams{grid-template-columns:1fr}
  .fve .verein, .fve .cta-grid, .fve .kontakt{grid-template-columns:1fr}
  .fve .zahlen{grid-template-columns:repeat(2,1fr)}
  .fve .zahl:nth-child(2){border-right:0}
  .fve .fuss{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .fve .spieltag{margin-top:-30px}
  .fve .termin{grid-template-columns:76px 1fr; row-gap:6px}
  .fve .termin .zeit{grid-column:2}
  .fve .fuss{grid-template-columns:1fr}
  .fve .verein-bild .stempel{right:0}
}
@media (prefers-reduced-motion:reduce){
  .fve *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .fve .reveal{opacity:1; transform:none}
}