/* ============================================================
   G.H. Web-Solutions — Designsystem
   Dunkle Fassung ab 14.08.2026.

   Grund: die Logo-Animation lebt von Lichtern und einem blauen
   Schein. Auf hellem Papier verschwinden beide. Auf Schwarz
   kommen sie zur Geltung — und die Flaechenfilme ebenso.
   ============================================================ */

:root {
  /* --- Die Flaechen ------------------------------------------ */
  --grund:      #070809;  /* die ganze Seite                     */
  --grund-hoch: #101215;  /* angehobene Abschnitte               */
  --grund-tief: #000000;  /* Plakatflaechen, tiefer als der Rest */

  /* --- Schrift ----------------------------------------------- */
  --tinte:       #F2F3F5;  /* Ueberschriften und Fliesstext      */
  --tinte-leise: #A9ADB5;  /* Nebeninfo                          */
  --tinte-dunkel:#050505;  /* Schrift auf hellen Flaechen        */
  --linie:       #2C313A;  /* Haarlinien. Deko, kein Text.       */

  /* --- Das Markenblau ----------------------------------------
     #1A60EB, aus der Logovorlage gemittelt.                     */
  --blau:       #1A60EB;
  --blau-hell:  #6494FF;  /* auf dunklem Grund, wenn Text gefragt ist */
  --auf-blau:   #FFFFFF;

  --radius:     4px;
  --uebergang:  200ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --rand:       clamp(18px, 4.5vw, 68px);
  --breite:     72rem;
}

/* ============================================================
   Kontraste — im Browser nachgerechnet, nicht geschaetzt
   ------------------------------------------------------------
   Tinte     #F2F3F5 auf Grund      #070809 ..... 18,1 : 1  ok
   Leise     #A9ADB5 auf Grund      #070809 .....  8,9 : 1  ok
   Leise     #A9ADB5 auf Hoch       #101215 .....  8,3 : 1  ok
   Blau-hell #6494FF auf Grund      #070809 .....  6,9 : 1  ok
   Weiss     #FFFFFF auf Blau       #1A60EB .....  5,4 : 1  ok

   Blau      #1A60EB auf Grund      #070809 .....  3,7 : 1  nur gross
   ============================================================

   DREI REGELN, die aus diesen Messungen folgen:

   1. Auf blauer Flaeche steht WEISSE Schrift (5,4:1).

   2. Auf dunklem Grund ist --blau als Schriftfarbe zu dunkel.
      Dort gilt --blau-hell. --blau bleibt Flaechenfarbe.

   3. --linie ist Dekoration, niemals Text: 1,4:1.

   Und weil Farbe allein nie eine Information tragen darf:
   jede Markierung hebt etwas hervor, das auch ohne sie im Satz
   verstaendlich bleibt.                                          */

.knopf-blau {
  background: var(--blau);
  color: var(--auf-blau);
  border: 0;
}

/* ============================================================
   Das wiederkehrende Element: der Markierungsstrich
   ------------------------------------------------------------
   Ein von Hand gezogener Textmarker. Steckt als Daten-URL in
   einer Variablen: keine zusaetzliche Datei, keine zusaetzliche
   Anfrage, und die Form steht an genau einer Stelle.
   ============================================================ */
:root {
  --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2 38.6c23.6 3.4 51.4-2.1 77.8 1.2 25.1 3.1 52.4-2.6 78.1.6 14.2 1.8 30.8-1.1 40.4-2.9l-.6-31.4c-22.4 3.6-49.6-2.4-75.2.7-26.6 3.2-54.8-2.8-81.6.5C26.7 8.6 12.4 5.9 2.4 4.2z' fill='%231A60EB'/%3E%3C/svg%3E");

  --strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1.8 8.9c15.7-2.9 32.4 1.4 48.6-.7 17.4-2.2 35.2 1.9 52.6-.2 16.1-1.9 32.9 1.5 48.9-.6 12-1.6 34.2 1.2 45.9-1.6l1.4 5.6c-12.6 3-35.3.2-47.8 1.8-16.4 2.1-33.4-1.2-49.7.7-17.7 2.1-35.7-1.9-53.3.3-15.7 2-31.9-2.1-47.3.5z' fill='%236494FF'/%3E%3C/svg%3E");

  --strich-hoch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 200' preserveAspectRatio='none'%3E%3Cpath d='M4.6 1.6c-2.2 15.7 1.1 32.4-.5 48.6-1.7 17.4 1.4 35.2-.2 52.6-1.4 16.1 1.1 32.9-.5 48.9-1.2 12 .9 34.2-1.2 45.9l4.2 1.4c2.2-12.6.2-35.3 1.4-47.8 1.6-16.4-.9-33.4.5-49.7 1.6-17.7-1.4-35.7.2-53.3 1.5-15.7-1.6-31.9.4-47.3z' fill='%236494FF'/%3E%3C/svg%3E");
}

/* Textmarker hinter einem Wort. Weisse Schrift darauf. */
.markiert {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--auf-blau);
}
.markiert::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.1em;
  right: -0.12em;
  top: 0.02em;
  bottom: -0.02em;
  background: var(--marker) center / 100% 100% no-repeat;
}

/* Unterstreichung. Auf Dunkel im helleren Blau, sonst verschwindet
   der Strich im Grund. */
.unterstrichen {
  background: var(--strich) left bottom / 100% 0.28em no-repeat;
  padding-bottom: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; }
}