/* ============================================================================
   MATCHDAY-HERO (Komponente) — portiert aus mockups/startseite-matchday.html
   (dort inline im <style>-Block zwischen HERO-MATCHDAY:CSS:START/END, nicht in
   design-v2.css enthalten). Nur auf der Startseite geladen (front-page.php).
   ============================================================================ */
.mh{
  --mh-red:#8c0a2c;--mh-red-deep:#5c0518;--mh-ivory:#f3f1ec;--mh-gold:#c9b264;
  --mh-display:'Anton','Bebas Neue',sans-serif;--mh-display-weight:400;
  --mh-script:'scribo-pro','Scribo Pro','Mrs Saint Delafield','Snell Roundhand',cursive;
  position:relative;isolation:isolate;color:#fff;padding:0;
  container-type:inline-size;container-name:mh;
}
[data-font="smashing"] .mh{--mh-display:'smashing','Bebas Neue',Anton,sans-serif;--mh-display-weight:500;}
.mh-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(85% 135% at 76% 26%,#a91330 0%,#8c0a2c 44%,#650620 100%);}
.mh-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url('../textures/grunge-overlay.jpg') center/cover;}

.mh-stage{position:relative;overflow:hidden;}
.mh-body{position:relative;max-width:1240px;margin:0 auto;padding:clamp(28px,3.4cqw,52px) 32px 0;min-height:clamp(560px,45cqw,650px);}
.mh-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:clamp(30px,3.4cqw,50px);--w:min(22cqw,320px);}

[data-edge]{position:relative;}
.mh-info{display:flex;flex-wrap:wrap;align-items:center;gap:.4em .95em;font-family:var(--font-display);font-size:clamp(15px,1.95cqw,27px);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9);}
.mh-info i{width:2px;height:1.05em;background:currentColor;opacity:.55;}
.mh-word{margin-top:.06em;font-family:var(--mh-display);font-weight:var(--mh-display-weight);text-transform:uppercase;font-size:var(--w);line-height:.84;letter-spacing:.002em;white-space:nowrap;}
.mh-row{display:flex;align-items:center;gap:clamp(22px,3.6cqw,54px);margin-top:clamp(8px,1.2cqw,18px);}
.mh-sub{font-family:var(--mh-display);font-weight:var(--mh-display-weight);text-transform:uppercase;font-size:calc(var(--w) * .5);line-height:.9;white-space:nowrap;}

.mh-vs{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(6px,.9cqw,12px);}
.mh-crests{display:flex;align-items:center;gap:clamp(14px,2.1cqw,30px);}
.mh-crests img{height:clamp(58px,7.6cqw,108px);width:auto;}
.mh-x{font-family:var(--font-display);font-size:clamp(18px,2.2cqw,32px);letter-spacing:.1em;opacity:.8;}
[data-crest="chip"] .mh-crest-opp{background:#fff;padding:.4em;height:clamp(58px,7.6cqw,108px);aspect-ratio:1;object-fit:contain;}
.mh-crest-opp{height:clamp(58px,7.6cqw,108px);width:auto;max-width:clamp(90px,14cqw,170px);object-fit:contain;}
.mh-sign{font-family:var(--mh-script);color:#d9c47c;font-size:clamp(32px,3.3cqw,48px);line-height:1;transform:rotate(-2deg);transform-origin:left center;white-space:nowrap;margin-top:2px;}

.mh-actions{position:relative;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:20px clamp(22px,3cqw,44px);margin-top:clamp(20px,2.6cqw,36px);}
/* Buttons: Diagonalschnitt (zwei gegenueberliegende Ecken abgeschraegt) + versetzte dunkelrote Rueckebene; Bebas Neue in Versalien wie die Infozeile */
.mh-btn{
  --fs:23px;--o:6px;--c:calc(var(--fs) * .62);--t:2px;--k:calc(var(--t) * .4142);
  --shape:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:400;font-size:var(--fs);letter-spacing:.09em;text-transform:uppercase;line-height:1;
  padding:17px 32px 14px;border:none;cursor:pointer;
  color:var(--mh-red);background:transparent;white-space:nowrap;
  transition:transform .16s ease;
}
.mh-btn::after,.mh-btn::before{content:"";position:absolute;inset:0;clip-path:var(--shape);}
.mh-btn::after{z-index:-1;background:var(--mh-ivory);}
.mh-btn::before{z-index:-2;background:var(--mh-red-deep);transform:translate(var(--o),var(--o));transition:transform .16s ease;}
.mh-btn:hover{transform:translate(calc(var(--o) * -.4),calc(var(--o) * -.4));}
.mh-btn:hover::before{transform:translate(calc(var(--o) * 1.4),calc(var(--o) * 1.4));}
.mh-btn:active{transform:translate(calc(var(--o) * .6),calc(var(--o) * .6));}
.mh-btn:active::before{transform:translate(calc(var(--o) * .4),calc(var(--o) * .4));}
.mh-btn svg{width:1.05em;height:1.05em;flex:none;margin-top:-.08em;}

.mh-count{display:flex;gap:10px;}
.mh-count div{min-width:clamp(52px,5cqw,72px);padding:8px 10px 7px;border:1.5px solid rgba(255,255,255,.38);text-align:center;background:rgba(92,5,24,.28);}
.mh-count b{display:block;font-family:var(--font-numerals);font-weight:400;font-size:clamp(24px,2.9cqw,38px);line-height:1.05;font-variant-numeric:tabular-nums;}
.mh-count span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75;}

.mh-player{position:absolute;z-index:2;right:-1%;bottom:-4.4cqw;height:min(51cqw,740px);width:auto;max-width:none;filter:drop-shadow(-16px 12px 26px rgba(50,0,12,.4));pointer-events:none;}

/* Sponsorenband: weisser Balken ueber die volle Breite, Logos farbig ohne Kasten, Endlos-Loop nur in der Breite des Layouts (max 1240px) */
.mh-strip{display:block;position:relative;background:#fff;padding:clamp(14px,1.7cqw,22px) 0;}
.mh-strip-box{max-width:1240px;margin:0 auto;padding:0 32px;}
.mh-track-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);}
.mh-track{display:flex;align-items:center;width:max-content;animation:mh-sponsor-scroll 100s linear infinite;}
.mh-strip:hover .mh-track{animation-play-state:paused;}
.mh-logo{flex:none;display:flex;align-items:center;padding:0 clamp(22px,2.7cqw,40px);}
.mh-logo img{height:clamp(24px,2.5cqw,34px);width:auto;max-width:150px;object-fit:contain;mix-blend-mode:multiply;}
@keyframes mh-sponsor-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.mh-track{animation:none;}}

/* Hochformat (Mobil) — entspricht der Grafik-Komposition */
@container mh (max-width:760px){
  .mh-body{padding:22px 20px 0;min-height:118cqw;}
  .mh-copy{--w:31.5cqw;height:100%;min-height:calc(118cqw - 22px);padding-bottom:22px;}
  .mh-info{font-size:14.5px;gap:.35em .7em;letter-spacing:.11em;}
  .mh-word{margin-top:.2em;}
  .mh-row{flex-direction:column;align-items:flex-start;gap:12px;margin-top:6px;}
  .mh-sub{font-size:calc(var(--w) * .5);}
  .mh-crests img{height:58px;}
  [data-crest="chip"] .mh-crest-opp{height:58px;}
  .mh-crest-opp{height:58px;}
  .mh-sign{font-size:30px;white-space:normal;max-width:44cqw;line-height:.95;}
  .mh-actions{margin-top:auto;padding-top:18px;gap:14px;flex-direction:column;align-items:flex-start;}
  .mh-btn{--fs:19px;--o:4px;padding:13px 24px 11px;}
  .mh-count{gap:2px;}
  .mh-count div{min-width:0;padding:0 9px 0 0;border:0;background:none;text-align:left;}
  .mh-count b{font-size:24px;}
  .mh-count span{font-size:8px;}
  .mh-player{width:70cqw;height:auto;right:-9cqw;bottom:-6cqw;}
  .mh-strip{padding:14px 0;}
  .mh-strip-box{padding:0 20px;}
  .mh-logo{padding:0 20px;}
  .mh-logo img{height:24px;}
}