/* Gemeinsames Erscheinungsbild aller Seiten, angelehnt an hifiklubben.de:
   Schriften (frei lizenziert, auf dem eigenen Server – die Original-Schrift „Sharp Grotesk“ ist lizenzpflichtig),
   Logo in der Kopfzeile und Farben der Marke (Koralle #f16a52, Schwarz #231f20, Dunkelgrau #4c4c4c, Hellblau #6dafe1). */
@font-face { font-family: "HFK Schmal"; font-style: normal; font-weight: 500; font-display: swap; src: url(/app/schrift/barlow-condensed-500.woff2) format("woff2"); }
@font-face { font-family: "HFK Schmal"; font-style: normal; font-weight: 600; font-display: swap; src: url(/app/schrift/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "HFK Schmal"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/app/schrift/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "HFK Breit"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/app/schrift/archivo-breit-800.woff2) format("woff2"); }

/* Kopfzeile: Logo statt Schriftzug, Seitentitel in der breiten, kräftigen Schrift wie die Überschriften auf hifiklubben.de */
.kopf .marke { display: flow-root; font-family: "HFK Schmal", "Arial Narrow", Arial, sans-serif; font-weight: 500; letter-spacing: 0.5px; opacity: 1; }
.kopf .marke .logo { display: inline-block; height: 24px; width: auto; vertical-align: middle; }
.kopf .marke #angemeldet, .kopf .marke .kopfLink, .kopf .marke a { font-size: 14px; color: #fff; opacity: 0.9; line-height: 24px; }
.kopf h1 { font-family: "HFK Breit", "Arial Black", Arial, sans-serif !important; font-weight: 800 !important; font-stretch: normal !important;
  text-transform: uppercase; letter-spacing: 0 !important; font-size: 22px !important; line-height: 1.15; margin-top: 12px !important; }
@media (min-width: 700px) { .kopf h1 { font-size: 28px !important; } .kopf .marke .logo { height: 32px; } }

/* Markenfarben laut Brandfetch (hifiklubben.de): Koralle #F16A52, Dunkelgrau #4C4C4C, Hellblau #6DAFE1 (Info-Kästen) */
.hint { color: #4c4c4c; }

/* Kopfzeile oben rechts: etwas Luft zwischen Name und „Abmelden“ */
.kopf #angemeldet a { margin-left: 6px; }