/* ==========================================================================
   GESTALTUNG · grafikkarl.de
   Alle Farben, Schriften, Größen und Abstände an einer Stelle.
   Wert ändern, Datei hochladen, fertig.

   Schriftgrößen in "cqw" wachsen mit der Rahmenbreite (1cqw = 1 % der
   Rahmenbreite). clamp(min, ideal, max) setzt die Grenzen in Pixeln.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Farben ------------------------------------------------------------ */
  --grund: #f5f4f0;            /* Fläche außerhalb des Rahmens */
  --flaeche: #edece6;          /* Fläche im Rahmen */
  --weiss: #ffffff;
  --panel: #dcdbd6;            /* graue Flächen rechts, solange kein Bild da ist */
  --violett: #3d2799;          /* Akzent, Überschriften, Labels */
  --nacht: #1b1832;
  --halbkreis: linear-gradient(120deg, #3d2799 0%, #2b1f66 40%, #1b1832 100%);
  --linie: #7f7ba3;            /* Rahmen und Outlines */
  --linie-hell: #d3d0e3;       /* Trennlinien, leere Tiefenlinie */
  --text: #1d1d1d;
  --text-leise: #4a4858;
  --text-auf-violett: #e6e3f5;
  --lavendel: #c4bdf0;
  --regler-verlauf: linear-gradient(90deg, #c4bff0, #3d2799);  /* hell links, dunkel am Punkt */
  --regler-spur: #dedcd5;      /* leerer Teil der Regler */
  --regler-schrift: #4a4870;   /* Beschriftung unter den Reglern */
  --punkt: #f0647d;            /* Punkt in Tiefenlinie und Reglern */

  /* --- Schriften --------------------------------------------------------- */
  --schrift-titel: 'Raleway', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --schrift-text: 'Manrope', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* --- Rahmen und Leiste -------------------------------------------------- */
  --rand: 24px;                /* Abstand Rahmen zum Fensterrand */
  --leiste: 44px;              /* Höhe der Navigationsleiste oben */
  --fuss: 30px;                /* Platz unter dem Rahmen (Impressum auf Start- und Endseite) */
  --radius-rahmen: 10px;
  --radius-box: 8px;
  --linie-staerke: 1px;

  /* --- Schriftgrößen Desktop --------------------------------------------- */
  /* Maß ist das PDF: 1cqw entspricht dort 18,5 pt. Titel 68 pt = 3.68cqw,
     Überschrift 22 pt = 1.19cqw, Fließtext 16 bis 18 pt = 0.9cqw. */
  --t-fliesstext: clamp(12px, 0.97cqw, 17px);
  --t-zeilenhoehe: 1.58;
  --t-ueberschrift: clamp(14px, 1.3cqw, 21px);
  --t-meta: clamp(9px, 0.8cqw, 12px);
  --t-scope: clamp(11px, calc(0.8cqw + 2px), 14px);  /* Scope, Zeitraum, Rolle */
  --g-scope: 400;
  --t-unterschrift: clamp(10px, 0.82cqw, 13px);
  --t-halbkreis-name: clamp(28px, 3.68cqw, 72px);   /* Kapiteltitel im Halbkreis, INHALT */
  --t-inhalt: clamp(11px, 0.87cqw, 16px);           /* Text im Inhalt-Halbkreis */
  --t-cover-titel: clamp(34px, min(4.3cqw, 7.2cqh), 72px);
  --t-cover-unter: clamp(9px, 0.9cqw, 13px);
  --t-kontakt-titel: clamp(28px, 3.68cqw, 72px);
  --t-kontakt: clamp(15px, 1.52cqw, 28px);          /* E-Mail, Telefon, LinkedIn */
  --t-download: clamp(10px, 0.82cqw, 14px);         /* Portfolio und Lebenslauf als PDF */
  --t-zahl: clamp(30px, 3.68cqw, 68px);
  --t-zahl-text: clamp(10px, 1.19cqw, 22px);
  --t-pill: clamp(9.5px, 0.85cqw, 12px);
  --t-leiste: 7.5px;           /* Kapitelnamen in der Leiste */
  --t-leiste-knopf: 8px;       /* PDF und E-Mail */

  /* --- Regler ------------------------------------------------------------- */
  --r-dicke: clamp(5px, 0.5cqw, 9px);
  --r-punkt: clamp(12px, 0.95cqw, 17px);
}

/* --- Mobil (Hochformat) ---------------------------------------------------- */
@media (max-aspect-ratio: 1/1) {
  :root {
    --rand: 12px;
    --t-fliesstext: 13px;
    --t-zeilenhoehe: 1.6;
    --t-ueberschrift: 14px;
    --t-meta: 8px;
    --t-scope: 10px;
    --g-scope: 600;
    --fuss: 28px;
    --r-dicke: 8px;
    --r-punkt: 15px;
    --t-unterschrift: 10.5px;
    --t-halbkreis-name: 26px;
    --t-inhalt: 12px;
    --t-kontakt: 15px;
    --t-cover-titel: 44px;
    --t-cover-unter: 8px;
    --t-kontakt-titel: 24px;
    --t-zahl: 30px;
    --t-pill: 8.5px;
  }
}