/* Sportheim-Quiz · gemeinsame Basis (Schriften, Farben, Bausteine) */

@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: block; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-800.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-900.woff2') format('woff2'); font-weight: 900; font-display: block; }

:root {
  --azure: #007fff;
  --azure-hi: #2b95ff;
  --azure-lo: #0068dc;
  --azure-deep: #0050b4;
  --sky: #cfe6ff;
  --navy: #0a1f44;
  --navy-2: #12305f;
  --sun: #ffd43b;
  --sun-deep: #f5bf00;
  --bollen: #ff3d55;   /* Bollenhut-Rot: nur als kleiner Akzent */
  --mint: #2ed59b;
  --white: #ffffff;

  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* Klebeband-Überschriften im IU-Stil */
.tape {
  display: inline-block;
  font-family: var(--cond);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .005em;
  padding: .14em .3em .08em;
  background: var(--navy);
  color: var(--white);
  white-space: nowrap;
}
.tape.sun { background: var(--sun); color: var(--navy); }
.tape.white { background: var(--white); color: var(--navy); }
.tape.azure { background: var(--azure); color: var(--white); }
.tape.red { background: var(--bollen); color: var(--white); }
.tape.wrap { white-space: normal; }

/* Icons */
.icon { display: block; width: 100%; height: 100%; overflow: visible; }
.icon .fa { fill: var(--sun); }
.icon .fb { fill: var(--bollen); }
.icon .fc { fill: var(--sky); }
.icon .fw { fill: var(--white); }
.icon .fk { fill: currentColor; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }