/* ==========================================================================
   Eisbären Würzburg — Design System
   Global entry point. Consumers link THIS file only.
   Keep this file a list of @imports — no rules here.
   ========================================================================== */
/* ==========================================================================
   Eisbären Würzburg — Webfonts
   SUBSTITUTES: the club's real logo faces (a collegiate/varsity block for
   "ESV / 40 JAHRE" and a baseball script for "Würzburg") are not supplied as
   font files. The wordmark script lives on as image assets; for live type we
   use the closest athletic Google Fonts. Swap in licensed faces when available.
     - Anton        → ultra-bold condensed display (hero, scoreboard impact)
     - Oswald       → condensed headings, nav, labels, stat numerals
     - Barlow       → highly readable body / UI text
   ========================================================================== */
/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/87c87e91-49b1-4367-b60c-b95f95300583.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/f28ccba3-79d7-4d30-8ea3-794b29ac9d4e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/182e0a80-d483-448b-afb0-2ecf5334af84.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/4635d74f-7a27-40f2-abe7-01d7cb360f66.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/f9c2c524-3822-460e-9a50-5bfc718b405e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/47f01d00-3c79-456c-befd-de1f75d4d609.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/2ebc9cfc-33f3-4811-89b0-4e539a97db47.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/06d5e965-4e58-4898-b745-bf2dc3b07439.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/61922c87-fcbe-43ea-916d-43ec75312b84.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/e7f1419b-0e6a-47e5-b778-1cbe2c7db8e0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a4d99ffa-47fd-4866-988d-78cdd5e0ac93.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/22ce6234-5199-4976-aa99-ed8b65e30a66.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/48042fa1-0d8e-4da3-9930-33175798ae3c.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/2b07f240-3d33-4fca-8325-d880bae12185.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/1c97dfe6-4138-4c13-9800-caf26108bbe4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/f7e90482-878c-4593-92f5-2de281691499.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/340ce52b-8e3b-4016-9339-f1f90bbece31.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/63dffc9c-98c5-4eca-9e4e-6796ce03be44.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/07606ece-bd72-4139-b3b1-f25a0b221427.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/3b970739-ff6a-4bc8-8f34-94e642f5079c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/2a44cb6f-d9de-44f1-a270-8126103e58ce.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a6b016b1-9657-43cd-a1e6-3ad081fc3216.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dc347f49-6d19-4d5d-abc5-ed0d3e7045ec.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/6f7f959a-9e58-47d4-a820-6a4b302dd5f7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a639a5be-faf6-4301-a822-e37cfe674f33.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/5cf1186e-5b2e-4798-89fd-a9fd1cca8361.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a6b016b1-9657-43cd-a1e6-3ad081fc3216.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dc347f49-6d19-4d5d-abc5-ed0d3e7045ec.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/6f7f959a-9e58-47d4-a820-6a4b302dd5f7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a639a5be-faf6-4301-a822-e37cfe674f33.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/5cf1186e-5b2e-4798-89fd-a9fd1cca8361.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/a6b016b1-9657-43cd-a1e6-3ad081fc3216.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/dc347f49-6d19-4d5d-abc5-ed0d3e7045ec.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/6f7f959a-9e58-47d4-a820-6a4b302dd5f7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/a639a5be-faf6-4301-a822-e37cfe674f33.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/5cf1186e-5b2e-4798-89fd-a9fd1cca8361.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/a6b016b1-9657-43cd-a1e6-3ad081fc3216.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dc347f49-6d19-4d5d-abc5-ed0d3e7045ec.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/6f7f959a-9e58-47d4-a820-6a4b302dd5f7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/a639a5be-faf6-4301-a822-e37cfe674f33.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/5cf1186e-5b2e-4798-89fd-a9fd1cca8361.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   Eisbären Würzburg — Color System
   "Rink at night": deep blue-black base, logo navy structure,
   logo red as the aggressive accent, social burgundy as its shadow.
   ========================================================================== */
:root {
  /* --- Neutrals — ice-tinted cool grays / blue-blacks --- */
  --ink-950: #06080F;   /* deepest — page void, full-bleed backdrops   */
  --ink-900: #0B0E1A;   /* base background — the default dark surface   */
  --ink-850: #0F1322;   /* between base and surface                     */
  --ink-800: #151A2C;   /* surface — panels, sections                   */
  --ink-750: #1A2036;   /* surface, slightly raised                     */
  --ink-700: #212842;   /* raised card / input field                    */
  --ink-600: #2C3556;   /* strong border, dividers on raised            */
  --ink-500: #3A4468;   /* border on base                               */
  --steel-500: #565F84; /* faint text, disabled                         */
  --steel-400: #6E7699; /* muted / meta text                            */
  --steel-300: #939BBD; /* secondary text                               */
  --steel-200: #C2C8DE; /* high-contrast secondary                      */
  --frost-100: #E7EAF4; /* primary text on dark                         */
  --white: #FFFFFF;

  /* --- Navy — the logo blue, structural brand color --- */
  --navy-800: #141838;
  --navy-700: #1B2148;
  --navy-600: #242C60;
  --navy-500: #2E376E;  /* LOGO NAVY */
  --navy-400: #3B4788;
  --navy-300: #5460AC;

  /* --- Red ramp — bright logo red down into the social burgundies --- */
  --red-300: #F05860;   /* tint / focus glow                            */
  --red-400: #E63A42;   /* hover-up, brighter                           */
  --red-500: #D21F26;   /* LOGO RED — primary accent / CTA              */
  --red-600: #9E1A1E;   /* SOCIAL dark red — hover / pressed            */
  --red-700: #5D1114;   /* SOCIAL burgundy — deep fills, gradients      */
  --red-800: #3B0B0D;   /* burgundy shadow                              */

  /* --- Ice — cool cyan highlight, used sparingly (frost, live, 2. Mannschaft) --- */
  --ice-500: #4FB6DE;
  --ice-400: #6FC7E8;
  --ice-300: #A6DEF3;

  /* --- Pillar accents (the three departments) --- */
  /* bar.md M1 — ONE accent. The three departments are told apart by their
     numeral and type treatment, never by a second hue. */
  --team-first:  var(--red-500);
  --team-second: var(--steel-200);
  --team-youth:  var(--steel-400);
  --team-youth-deep: var(--ink-700);

  /* --- Result / status semantics (standings, scores) --- */
  /* bar.md M1 — results read as accent / neutral / void, not a traffic light */
  --result-win:  var(--red-500);
  --result-loss: var(--ink-700);
  --result-tie:  var(--steel-500);
  --live:        var(--red-500);
  --success:     var(--frost-100);
  --warning:     var(--steel-300);
  --danger:      var(--red-500);

  /* ======================================================================
     SEMANTIC ALIASES — reference these in product code
     ====================================================================== */
  --bg:              var(--ink-900);
  --bg-void:         var(--ink-950);
  --surface:         var(--ink-800);
  --surface-raised:  var(--ink-700);
  --surface-sunken:  var(--ink-850);
  --surface-hover:   var(--ink-750);

  --border:          var(--ink-500);
  --border-strong:   var(--ink-600);
  --border-subtle:   var(--ink-700);

  --text:            var(--frost-100);
  --text-strong:     var(--white);
  --text-muted:      var(--steel-300);
  --text-faint:      var(--steel-400);
  --text-disabled:   var(--steel-500);
  --text-on-accent:  var(--white);

  --accent:          var(--red-500);
  --accent-hover:    var(--red-400);
  --accent-press:    var(--red-600);
  --accent-deep:     var(--red-700);
  --accent-tint:     rgba(210, 31, 38, 0.14);

  --brand-navy:      var(--navy-500);
  --brand-ice:       var(--ice-400);

  --focus-ring:      var(--red-400);

  /* Signature gradients */
  --grad-burgundy:   linear-gradient(150deg, var(--red-600) 0%, var(--red-800) 100%);
  --grad-red:        linear-gradient(150deg, var(--red-500) 0%, var(--red-700) 100%);
  --grad-navy-night: linear-gradient(160deg, var(--navy-700) 0%, var(--ink-950) 78%);
  --grad-rink:       linear-gradient(180deg, var(--ink-850) 0%, var(--ink-950) 100%);
}

/* ==========================================================================
   Eisbären Würzburg — Typography
   Athletic voice: condensed uppercase headlines with positive tracking,
   ultra-bold display for impact moments, calm readable body.
   ========================================================================== */
:root {
  /* Families */
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif; /* huge impact */
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;          /* titles, nav, labels */
  --font-body:    'Barlow', system-ui, 'Segoe UI', sans-serif;   /* copy, UI */
  --font-stat:    'Oswald', 'Barlow', sans-serif;                /* scores, tabular numerals */

  /* Fluid display sizes (hero / scoreboard) */
  --text-mega:  clamp(3.5rem, 8vw, 7rem);      /* 56 → 112 */
  --text-giant: clamp(2.75rem, 6vw, 5rem);     /* 44 → 80  */
  --text-hero:  clamp(2.25rem, 4.5vw, 3.5rem); /* 36 → 56  */

  /* Static type scale */
  --text-4xl: 2.75rem;   /* 44 */
  --text-3xl: 2.125rem;  /* 34 */
  --text-2xl: 1.625rem;  /* 26 */
  --text-xl:  1.3125rem; /* 21 */
  --text-lg:  1.125rem;  /* 18 */
  --text-md:  1rem;      /* 16 — base body */
  --text-sm:  0.875rem;  /* 14 */
  --text-xs:  0.75rem;   /* 12 — labels, meta */
  --text-2xs: 0.6875rem; /* 11 — eyebrow micro */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* Line heights */
  --lh-solid:   1;      /* @kind font */
  --lh-tight:   1.1;    /* @kind font */
  --lh-snug:    1.28;   /* @kind font */
  --lh-normal:  1.55;   /* @kind font */

  /* Letter spacing — condensed athletic type wants air when uppercased */
  --tracking-tightest: -0.02em; /* @kind font */
  --tracking-tight:    -0.01em; /* @kind font */
  --tracking-normal:   0;       /* @kind font */
  --tracking-wide:     0.04em;  /* @kind font */
  --tracking-wider:    0.09em;  /* eyebrows, small caps labels @kind font */
  --tracking-widest:   0.16em;  /* micro eyebrow @kind font */
}

/* Reusable heading recipe — condensed, uppercase, chiselled */
.wb-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  color: var(--accent);
}
.wb-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-solid);
  letter-spacing: var(--tracking-tight);
}
.wb-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   Eisbären Würzburg — Spacing & Layout
   4px base grid.
   ========================================================================== */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Layout */
  --container:      1200px; /* @kind spacing */
  --container-wide: 1360px; /* @kind spacing */
  --container-text: 720px;  /* @kind spacing */
  --gutter:         clamp(1rem, 4vw, 2.5rem); /* @kind spacing */
  --section-y:      clamp(3.5rem, 8vw, 7rem);  /* @kind spacing */
}

/* ==========================================================================
   Eisbären Würzburg — Effects: radii, chamfers, borders, shadows, motion
   Direction: SHARP & CHISELLED. Corners are near-square; signature shapes use
   an angled clip (a shaved corner) for the "ice-shard / jersey-cut" look.
   ========================================================================== */
:root {
  /* Radii — kept tight; the brand is angular, not pill-soft */
  /* bar.md M7 — the brand is a hard rectangle. Nothing is rounded but the CTA. */
  --radius-0: 0px;
  --radius-1: 0px;   /* default control radius */
  --radius-2: 0px;   /* cards, inputs */
  --radius-3: 0px;   /* large panels */
  --radius-cta: 2px; /* the single permitted soft corner */
  --radius-pill: 999px; /* reserved: live dot only */

  /* Chamfer size for clip-path corner shaves */
  --chamfer:    10px;
  --chamfer-lg: 18px;

  /* Signature clip-paths (top-right + bottom-left shave — a moving-forward cut) */
  --clip-shard:  polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  --clip-tab:    polygon(0 0, 100% 0, 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  --clip-ticket: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;
  --hairline: 1px solid var(--border);

  /* Shadows — on dark UI, elevation is glow + depth, not soft gray drop */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px -6px rgba(0,0,0,0.55);
  --shadow-lg: 0 18px 44px -12px rgba(0,0,0,0.7);
  --shadow-xl: 0 30px 70px -20px rgba(0,0,0,0.78);
  --shadow-accent: 0 8px 30px -6px rgba(210,31,38,0.45); /* red glow, CTAs/live */
  --shadow-ice:    0 8px 30px -8px rgba(111,199,232,0.35);
  --ring-accent:   0 0 0 3px rgba(230,58,66,0.35);
  --ring-inset:    inset 0 0 0 1px rgba(255,255,255,0.05);

  /* Overlays / scrims for imagery */
  --scrim-bottom: linear-gradient(180deg, transparent 0%, rgba(6,8,15,0.15) 40%, rgba(6,8,15,0.92) 100%); /* @kind other */
  --scrim-left:   linear-gradient(90deg, rgba(6,8,15,0.94) 0%, rgba(6,8,15,0.55) 55%, transparent 100%); /* @kind other */
  --scrim-flat:   linear-gradient(0deg, rgba(6,8,15,0.6), rgba(6,8,15,0.6)); /* @kind other */

  /* Texture — subtle ice grain (used at low opacity over big fills) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='%75rl(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */

  /* Motion — quick, punchy, no bounce; like a puck snap */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.6, 0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

@keyframes wb-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.45; transform: scale(0.82); }
}

/* ==========================================================================
   Eisbären Würzburg — Base element styling & utilities
   Opt-in: apply .wb-root to a wrapper to get the dark rink surface + type.
   ========================================================================== */
.wb-root, .wb-root *, .wb-root *::before, .wb-root *::after { box-sizing: border-box; }

.wb-root {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wb-root h1, .wb-root h2, .wb-root h3, .wb-root h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--text-strong);
  margin: 0;
}
.wb-root a { color: inherit; text-decoration: none; }
.wb-root ::selection { background: var(--accent); color: #fff; }

/* Container helpers */
.wb-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wb-container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Scrollbar (dark) */
.wb-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.wb-root ::-webkit-scrollbar-track { background: var(--ink-950); }
.wb-root ::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 999px; }
.wb-root ::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

/* Focus visibility */
.wb-root :focus-visible { outline: none; box-shadow: var(--ring-accent); }

/* Live dot */
.wb-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--live); box-shadow: 0 0 0 0 rgba(255,59,68,0.6);
  animation: wb-pulse 1.4s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wb-live-dot { animation: none; }
}


/* ==========================================================================
   Eisbären Würzburg — POSTER LAYER
   Added for the redesign. Each block implements one mechanism from bar.md.
   Product code should reach for these before inventing local styles.
   ========================================================================== */
:root {
  /* M2 — three type sizes per screen and nothing between them.
     Ratio display:label is ~7x at every viewport width. */
  --type-display: clamp(4rem, 10.5vw, 9.5rem); /* the only large size   */
  --type-sub:     clamp(1rem, 1.35vw, 1.1875rem); /* the only body size */
  --type-label:   0.75rem;                     /* the only small size   */
  --type-micro:   0.625rem;                    /* eyebrows only         */

  /* M5 — the hairline scaffold */
  --hairline-accent: 1px solid var(--accent);
  --hairline-frost:  1px solid rgba(231,234,244,0.22);

  /* M6 — ghost layer */
  --ghost-opacity: 0.055;
  --type-ghost: clamp(20rem, 62vh, 42rem); /* the ghost is a graphic, not type.
      Anton's digits cap at ~0.72em, so 62vh of font-size yields a glyph about
      45% of the viewport — the floor M6 asks for. */
  --lh-poster: 0.92;  /* Anton's ascenders collide below this when lines stack */

  /* Surfaces that sit over photography */
  --scrim-panel: rgba(6, 8, 15, 0.86); /* floating panel over a cut-out   */
  --scrim-bar:   rgba(6, 8, 15, 0.90); /* sticky nav over anything        */
  --glow-rink:   radial-gradient(120% 80% at 68% -10%, rgba(84,96,172,0.30) 0%, rgba(6,8,15,0) 62%);

  /* A cut-out needs a heavier, tighter shadow than a card does, plus a small
     push in contrast so keyed edges read against the void. One token, one filter. */
  --shadow-cutout: drop-shadow(0 30px 70px rgba(0,0,0,0.78));
  --filter-cutout: drop-shadow(0 30px 70px rgba(0,0,0,0.78)) contrast(1.06) saturate(1.05);

  /* A panel that sits directly on a jersey needs more cover than one on the void */
  --scrim-panel-solid: rgba(6, 8, 15, 0.97);
}

/* M2 — the display size, used for every headline on the page.
   Scoped under .wb-root so it outranks the base `.wb-root h1` heading recipe,
   which would otherwise win on specificity and render this in Oswald 700. */
.wb-root .wb-poster,
.wb-poster {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--type-display);
  line-height: var(--lh-poster);
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin: 0;
}

/* M3 — the second treatment of the same headline: contour only */
.wb-poster-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  paint-order: stroke fill;
}
@supports not ((-webkit-text-stroke: 1px red)) {
  .wb-poster-outline { color: var(--accent); }
}
/* M3 — the third treatment: solid accent */
.wb-poster-accent { color: var(--accent); }

/* M2 — the only small type on the page: micro, uppercase, wide */
.wb-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wider);
  line-height: 1;
  color: var(--text-muted);
}
.wb-label-accent { color: var(--accent); }
.wb-micro {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-widest);
  line-height: 1;
  color: var(--text-faint);
}

/* M5 — a hairline rectangle that carries no content and overlaps what it crosses */
.wb-frame {
  position: absolute;
  border: var(--hairline-accent);
  pointer-events: none;
}
.wb-frame-frost { border: var(--hairline-frost); }

/* M6 — the huge, barely-there graphic behind the subject */
.wb-ghost {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: var(--ghost-opacity);
  color: var(--text-strong);
  font-family: var(--font-display);
  line-height: 0.72;
  z-index: 0;
}

/* M7 — the one soft corner left on the page */
.wb-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  border-radius: var(--radius-cta);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wider);
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wb-cta:hover { background: var(--accent-hover); }
.wb-cta:active { transform: translateY(1px); }
.wb-cta-ghost {
  background: transparent;
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.wb-cta-ghost:hover { background: rgba(255,255,255,0.04); }

/* M4 — a photo that is allowed to leave its box */
.wb-breakout { position: relative; z-index: 2; overflow: visible; }