/* ==========================================================================
   GSL — Markenvariablen
   Global Shipping & Logistics GmbH, Bremen

   Quelle: 2026-08-19_GSL_Website-Neuaufbau_Masterplan_v1.md, Kapitel 4.3
           ("Gestaltungsrahmen [aus dem Markenkit]")

   Diese Datei gilt fuer den gesamten Website-Neuaufbau, nicht nur fuer die
   Kartenseite. Farben und Schriften werden ausschliesslich hier geaendert.
   Menschenlesbare Fassung: marke/2026-08-23_GSL_Markenkit_v1.html
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,700..900;1,9..40,700..900&family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap");

:root {
  /* --- Farben, belegt ---------------------------------------------------- */
  --gsl-navy:      #00263D;  /* Header-Overlay, Ueberschriften, Footer, Primaerbutton */
  --gsl-rot:       #C74648;  /* NUR Akzent. Faustregel: max. 5 % der Flaeche.        */
  --gsl-flaeche:   #F4F5F7;  /* Hintergrundflaechen                                  */
  --gsl-linie:     #E5E7EB;  /* Trennlinien                                          */
  --gsl-text:      #1A1F2B;  /* Fliesstext                                           */
  --gsl-weiss:     #FFFFFF;

  /* --- Abgeleitet, damit niemand freihaendig aufhellt --------------------- */
  --gsl-navy-800:  #003253;  /* Hover auf Navy-Flaechen        */
  --gsl-navy-060:  rgba(0, 38, 61, .06);   /* zarte Flaeche    */
  --gsl-navy-012:  rgba(0, 38, 61, .12);   /* Rahmen auf Navy  */
  --gsl-rot-hover: #B03B3D;  /* CTA-Hover, dunkler als --gsl-rot */
  --gsl-text-mute: #55607A;  /* Sekundaertext, 4.6:1 auf Weiss   */

  /* --- Schrift ----------------------------------------------------------- */
  --gsl-font-headline: "DM Sans", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gsl-font-text:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gsl-size-text:     17px;
  --gsl-line-text:     1.6;
  --gsl-weight-head:   700;
  --gsl-weight-head-2: 600;
  --gsl-weight-text:   400;
  --gsl-weight-text-2: 500;

  /* --- Raster ------------------------------------------------------------ */
  --gsl-radius:    10px;
  --gsl-radius-sm: 6px;
  --gsl-gap:       clamp(1rem, 4vw, 1.75rem);
  --gsl-maxw:      34rem;   /* Lesebreite auf der Kartenseite */
  --gsl-shadow:    0 1px 2px rgba(0, 38, 61, .08), 0 8px 24px rgba(0, 38, 61, .07);
}

/* Die Seite ist bewusst hell. GSL tritt hell auf; ein halb gepflegter
   Dunkelmodus saehe auf einer Visitenkarten-Seite schlechter aus als keiner.
   Deshalb explizite Hintergrundfarbe statt geerbter. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gsl-weiss);
  color: var(--gsl-text);
  font-family: var(--gsl-font-text);
  font-size: var(--gsl-size-text);
  font-weight: var(--gsl-weight-text);
  line-height: var(--gsl-line-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--gsl-font-headline);
  font-weight: var(--gsl-weight-head);
  color: var(--gsl-navy);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: var(--gsl-navy); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gsl-rot);
  outline-offset: 2px;
  border-radius: var(--gsl-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}