/* =========================================================================
   QUADRONET Layout - Marke: Farben, Tokens, Grundtypografie
   -------------------------------------------------------------------------
   Quelle: Projektinformationen/quadronet-eisberg-2spalter.html (05.09.2026).
   Alles in qn.theme - gewinnt gegen das Fundament ohne !important.

   Zwei Arten von Variablen:
   - die Markenwerte (--orange, --paper ...) unter ihren Namen aus dem
     Entwurf, damit man Entwurf und Theme nebeneinanderlegen kann;
   - die Tokens von qn_base (--qn-...), die hier auf die Marke zeigen.
     Darauf baut alles aus dem Fundament auf (Reset, Inhaltselemente).
   ========================================================================= */

@layer qn.theme {

  :root {
    /* ----- Markenwerte ------------------------------------------------- */
    --orange:      #FF8800;   /* Markenorange aus dem Logo (seit 21.10.2026, vorher #E8651A) - 5,3:1 auf Carbon */
    --orange-hell: #FFA94D;   /* kleine Akzente auf Dunkel - 6,6:1 auf Carbon */
    --orange-ink:  #A35700;   /* Schrift/Akzent auf Papier - 4,9:1 (gleiche Farbrichtung wie #FF8800) */
    --link:        #FF8800;   /* Textlinks auf Dunkel = Markenorange (5,3:1 auf #333, 5,6:1 auf Anthrazit) */
    --auf-orange:  #141A1F;   /* Schrift auf Orange - 7,3:1 auf #FF8800 */
    --rot:         #E5372C;   /* Zielmarke im Eisberg */

    --carbon:      #333333;   /* Grund aller dunklen Flaechen */
    --anthrazit:   #1F3140;   /* zweites Dunkel, trennt Abschnitte */
    --ink:         #16242F;   /* Schrift auf Papier */
    --paper:       #F7F5F2;   /* helle Abschnitte */

    --hell:        #EAF4FF;   /* Schrift auf Dunkel */
    --hell-2:      #9FC0D8;   /* leise Schrift auf Dunkel (6,6:1) */
    --dunkel-2:    #4C6072;   /* leise Schrift auf Papier (6,0:1) */

    /* Schatten: weit gestreut, wenig Deckkraft, NEGATIVER Streuwert - der
       Unterschied zwischen "edel" und "Word-Schlagschatten". */
    --sch-nah:   0 1px 3px rgba(0, 0, 0, .30);
    --sch-blatt: 0 10px 30px -14px rgba(0, 0, 0, .66);
    --sch-tief:  0 26px 60px -26px rgba(0, 0, 0, .78);

    /* Formensprache: die 8-Grad-Achse. --tan = tan(8deg); damit rechnen die
       Polster unter den Keilen (Hoehe des Keils = Breite x tan). */
    --winkel: 8deg;
    --tan:    .1405;

    /* ----- Tokens des Fundaments ------------------------------------- */
    --qn-flaeche:        var(--carbon);
    --qn-flaeche-sanft:  #3A3A3A;
    --qn-flaeche-betont: var(--orange);
    --qn-schrift:        var(--hell);
    --qn-schrift-leise:  var(--hell-2);
    --qn-schrift-invers: var(--auf-orange);
    --qn-schrift-link:   var(--link);
    --qn-linie-fein:     rgba(190, 215, 235, .18);
    --qn-linie:          rgba(190, 215, 235, .28);
    --qn-linie-stark:    rgba(190, 215, 235, .5);
    --qn-fokus:          #FFD9A8;

    --qn-schriftfamilie: "IBM Plex Sans", system-ui, sans-serif;
    --qn-schriftfamilie-ueberschrift: "Bebas Neue", "IBM Plex Sans", sans-serif;

    --qn-groesse-text: clamp(1rem, .96rem + .2vw, 1.1rem);
    --qn-groesse-h1:   clamp(2.1rem, 4.4vw, 3.5rem);
    --qn-groesse-h2:   clamp(1.9rem, 4.2vw, 3.1rem);
    --qn-groesse-h3:   clamp(1.15rem, 2vw, 1.45rem);
    --qn-groesse-h4:   1rem;
    --qn-zeile-normal: 1.62;

    /* Breiter als das Fundament (65rem): der Entwurf rechnet mit 1280 px.
       Muss zu styles.content.textmedia.maxW (settings.yaml) passen. */
    --qn-breite: 80rem;
    --qn-rand:   clamp(18px, 4.4vw, 64px);
  }

  /* ----- Seite --------------------------------------------------------- */
  html { color-scheme: dark; }
  body { overflow-x: clip; }

  /* ----- Ueberschriften: Bebas Neue in Versalien ----------------------
     font-synthesis:none - Bebas gibt es nur in einem Schnitt; ohne das
     wuerde der Browser bei <strong> eine falsche Fette dazurechnen. */
  h1, h2, h3 {
    font-family: var(--qn-schriftfamilie-ueberschrift);
    font-weight: 400;
    font-synthesis: none;
    text-transform: uppercase;
    letter-spacing: .012em;
    line-height: .95;
  }
  h3 { line-height: 1.05; letter-spacing: .015em; }

  /* h4 bis h6 in der Textschrift - Bebas wird in klein schnell unleserlich. */
  h4, h5, h6 {
    font-family: var(--qn-schriftfamilie);
    font-size: var(--qn-groesse-h4);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .02em;
  }

  p { hyphens: auto; }

  a { color: var(--qn-schrift-link); }
  a:hover { text-decoration-thickness: 2px; }

  strong, b { font-weight: 600; }

  ::selection { background: var(--orange); color: var(--auf-orange); }

  :focus-visible { outline-offset: 3px; }

  /* ----- Sprunglink im Markenton --------------------------------------- */
  .qn-sprunglink {
    background: var(--orange);
    color: var(--auf-orange);
    font-weight: 600;
    padding: .9em 1.4em;
  }
}