@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --flaeche: #FFFFFF;
  --linie: #E2E8F0;

  --text: #0F2B46;
  --text-2: #475569;
  --akzent: #1677FF;

  --schrift-mini: 12px;
  --schrift-klein: 13px;
  --schrift-neben: 14px;
  --schrift-text: 15px;
  --schrift-feld: 16px;
  --schrift-gross: 18px;
  --schrift-titel: 20px;
  --schrift-kopf: 26px;
  --schrift-seite: 32px;
  --schrift-preis: 40px;
  --schrift-held: 52px;

  --schrift-buehne: 72px;
}

.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf__innen { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 20px; min-height: 64px; }

.marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 31px; line-height: 1; letter-spacing: -0.03em; color: var(--text); text-decoration: none; }
.marke__bild { width: 38px; height: 38px; flex: none; display: block; }
.marke__wort span { color: var(--akzent); }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: var(--schrift-neben); }
.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); }

.fuss__innen { max-width: 1200px; margin: 0 auto; padding: 40px 16px 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 28px 40px; font-size: var(--schrift-klein); color: var(--text-2); }
.fuss__marke { display: flex; flex-direction: column; gap: 4px; }
.fuss__marke b { color: var(--text); font-size: var(--schrift-neben); }
.fuss__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fuss__spalten div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fuss__spalten b { color: var(--text); font-weight: 700; margin-bottom: 2px; }
.fuss__spalten a { color: var(--text-2); text-decoration: none; }
.fuss__spalten a:hover { color: var(--text); }
@media (max-width: 640px) {
  .fuss__innen { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 28px; }
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .kopf__innen { gap: 12px; }
  .marke { font-size: 27px; gap: 8px; }
  .marke__bild { width: 32px; height: 32px; }
}