/* Basis-Stylesheet (Block 94, #258): Schrift, Grundgrößen der Überschriften, Fokusring und die Logo-Zeile `.marke`.
   Lädt nach tokens.css und vor style.css. Spätere Blöcke ändern diese Datei nicht. */

/* --- Schrift: Nunito, selbst gehostet (Untermenge „latin“, OFL), keine Anfrage an Dritte -------------- */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/nunito-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2'); }

body {
  font-family: var(--schrift);
}

/* Bedienelemente erben die Schrift nicht von selbst. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* --- Überschriften: h1 leicht (300); die übrigen Gewichte und Größen setzen die Seiten bzw. style.css ---- */
h1 {
  font-weight: 300;
}

/* --- Fokusring: immer sichtbar (Navy, 3 px, mit Abstand); style.css verfeinert ihn für Navy-Flächen ------ */
:focus-visible {
  outline: 3px solid var(--farbe-navy);
  outline-offset: 2px;
}

/* --- Logo-Zeile `.marke` (Schriftzug ohne Hahn, darunter „Event Management“) ----------------------------
   <a class="marke" href="…"><img src="/assets/brand/logo-schriftzug.png" alt="Hamburger Klönschnack">
     <span class="marke-zeile">Event Management</span></a>
   Die Zeile beginnt unter dem „K“ (15,4 % der Logobreite) und endet am Logoende. Größen:
     .marke              196 px  Gastseiten, Anmeldung (Login)
     .marke--gast        bis 600 px Breite 148 px  (zusätzlich zu .marke auf den Gastseiten)
     .marke--verwaltung  172 px  Seitenleiste der Verwaltung
     .marke--einlass     146 px  Kopfleiste am Einlass                                                    */
.marke {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: 196px;
  max-width: 100%;
  text-decoration: none;
  color: var(--farbe-navy);
}
.marke img {
  display: block;
  width: 100%;
  height: auto;
}
.marke-zeile {
  display: block;
  padding-left: 15.4%;
  font-family: var(--schrift);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 3.1px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--farbe-navy);
}
/* Steht die Logo-Zeile über einer Überschrift (Login, Einrichtung), bekommt sie Abstand nach unten. */
.marke--ueberschrift { margin-bottom: var(--abstand-6); }
.marke--verwaltung { width: 172px; gap: 5px; }
.marke--verwaltung .marke-zeile { font-size: 9.2px; letter-spacing: 2.7px; }
.marke--einlass { width: 146px; gap: 4px; }
.marke--einlass .marke-zeile { font-size: 8.5px; letter-spacing: 2.3px; }
@media (max-width: 600px) {
  .marke--gast { width: 148px; gap: 5px; }
  .marke--gast .marke-zeile { font-size: 8.5px; letter-spacing: 2.3px; }
}

/* Kopfzeile der Gastseiten: einfache weiße Zeile mit Haarlinie, Logo-Zeile oben links. Den Inhalt darunter baut Block 95. */
.gast-kopf {
  background: var(--gast-karte);
  border-bottom: 1px solid var(--gast-rand);
}
.gast-kopf-innen {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 40px;
}
@media (max-width: 600px) {
  .gast-kopf-innen { padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}