/* 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` (Logo „wdi media“, darunter „Event Management“) -----------------------------
   <a class="marke" href="…"><img src="/assets/brand/logo-wdi-media.svg" alt="WDI Media">
     <span class="marke-zeile">Event Management</span></a>
   Das Logo ist eine SVG (741,47 : 161,41); die Höhe ergibt sich aus dem Seitenverhältnis. Die Zeile beginnt links bündig mit dem
   Logo (kein Einzug) und endet mit dem letzten Buchstaben am rechten Logorand (gemessen, ± 1 px): Die Sperrung ist je Größe
   so gewählt. Farbe: das Schwarz des Logos (`--farbe-logo`). Größen:
     .marke              180 px  Anmeldung (Login); Schrift 10,5 px, Sperrung 4,35 px
     .marke--gast        bis 600 px Breite 148 px  (zusätzlich zu .marke; ohne Verwendung seit Block 95)
     .marke--verwaltung  150 px  Seitenleiste der Verwaltung, Einrichtung; Schrift 9,2 px, Sperrung 3,3 px
     .marke--einlass     128 px  Kopfleiste am Einlass; Schrift 8,5 px, Sperrung 2,35 px                    */
.marke {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: 180px;
  max-width: 100%;
  text-decoration: none;
  color: var(--farbe-logo);
}
.marke img {
  display: block;
  width: 100%;
  height: auto;
}
.marke-zeile {
  display: block;
  padding-left: 0;
  font-family: var(--schrift);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 4.35px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--farbe-logo);
}
/* Steht die Logo-Zeile über einer Überschrift (Login, Einrichtung), bekommt sie Abstand nach unten. */
.marke--ueberschrift { margin-bottom: var(--abstand-6); }
.marke--verwaltung { width: 150px; gap: 5px; }
.marke--verwaltung .marke-zeile { font-size: 9.2px; letter-spacing: 3.3px; }
.marke--einlass { width: 128px; gap: 4px; }
.marke--einlass .marke-zeile { font-size: 8.5px; letter-spacing: 2.35px; }
@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; }
}