/* ==========================================================================
   Design-Tokens — Website Dietmar Fischer
   Quelle: Fischer_Webdesign_final.pdf (Seite 1920 × 5700 pt, 1 Seite)

   Diese Fassung ersetzt die Schaetzwerte aus docs/tokens.css. Alle Werte sind
   am echten PDF nachgemessen (Renderaufloesung 4042 px Breite = 2,105 px/pt),
   nicht aus einem Vorschaubild hochgerechnet:

     Farben       → Pixelwerte aus der Flaeche, exakt
     Typografie   → Montserrat, aus der Fontebene des PDF ausgelesen
     Geometrie    → Kantenverlauf spaltenweise getrackt
     Pixelmasse   → PDF-Punkte × 0,75 (Designbreite 1920 → Referenz 1440)
   ========================================================================== */

:root {

  /* --- Farben ----------------------------------------------------------- */

  /* Gemessen: #111539 (nicht #111255 wie im Manifest geschaetzt) */
  --c-navy:         #111539;
  --c-navy-hover:   #1C2153;
  --c-navy-deep:    #0C1030;

  /* Gelb ist im Entwurf NIE eine Flaechenfarbe, sondern immer ein Verlauf
     von Gold nach Hellgelb, waagerecht. Gemessen an Band, Spaltenkoepfen,
     Buttons und Footer — ueberall dieselben zwei Endpunkte. */
  --c-yellow-1:     #E9B353;   /* Verlaufsanfang links  */
  --c-yellow-2:     #F1EB72;   /* Verlaufsende rechts   */
  --c-yellow:       #EFD463;   /* Mittelwert, fuer Ornamente ohne Flaeche */
  --grad-yellow:    linear-gradient(90deg, var(--c-yellow-1) 0%, var(--c-yellow-2) 100%);
  --grad-yellow-hover: linear-gradient(90deg, #DCA33F 0%, #E8DF52 100%);

  --c-grey:         #F1EEEB;   /* Sektionshintergrund, warm — nicht #EDEFEB */
  --c-row:          #FDFCFB;   /* Terminzeilen auf dem grauen Grund */
  --c-white:        #FFFFFF;

  /* Fliesstextfarbe: im Entwurf tatsaechlich Schwarz (gemessen #000105),
     kein warmes Grau. Fuer den Bildschirm minimal aufgehellt. */
  --c-text:         #14141A;
  --c-text-muted:   #4A4A52;
  --c-border:       #DEDBD7;

  /* Semantische Aliase — im Markup diese verwenden, nicht die Rohfarben */
  --bg-page:        var(--c-white);
  --bg-section:     var(--c-grey);
  --bg-inverse:     var(--c-navy);

  --fg-default:     var(--c-text);
  --fg-heading:     var(--c-navy);
  --fg-inverse:     var(--c-white);
  --fg-on-accent:   var(--c-navy);   /* Navy auf dem Gelbverlauf: 9,3:1 bis 12,0:1 */

  /* Gelb ist NIE Textfarbe auf hellem Grund (1,3:1). Nur Flaeche oder Ornament. */

  --focus-ring:         var(--c-navy);
  --focus-ring-inverse: var(--c-yellow-2);


  /* --- Typografie ------------------------------------------------------- */
  /* Aus der Fontebene des PDF: Montserrat (github.com/JulietaUla/Montserrat,
     SIL OFL 1.1). Lokal gehostet, kein CDN — siehe assets/fonts/README.md. */

  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Fluide Skala. Der Maximalwert entspricht dem Entwurf bei 1440 px. */
  --fs-hero:     clamp(2.75rem, 6vw,    5.375rem);  /* "Dietmar" / "Fischer" */
  --fs-quote:    clamp(1.375rem, 2.1vw, 1.875rem);  /* Zitatbloecke          */
  --fs-badge:    clamp(1.5rem, 2.5vw,   2.25rem);   /* AKTUELLE TERMINE      */
  --fs-subline:  clamp(1.0625rem, 1.5vw, 1.375rem); /* Sublines, Hero-Lead   */
  --fs-colhead:  clamp(1rem, 1.35vw,    1.25rem);   /* INFORMATIONSABENDE    */
  --fs-date:     clamp(1.25rem, 1.6vw,  1.5rem);    /* 02.08.                */
  --fs-week:     0.875rem;                          /* So.                   */
  --fs-item:     1.125rem;                          /* Termin-Titel          */
  --fs-body:     1.125rem;                          /* Fliesstext            */
  --fs-nav:      1.0625rem;
  --fs-small:    0.9375rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --ls-caps:  0.075em;   /* Versalien-Laufweite: Badges, Spaltenkoepfe */


  /* --- Raster und Abstaende --------------------------------------------- */

  --container:      1060px;   /* Inhaltsbreite, gemessen 189…1250 @1440 */
  --container-wide: 1200px;   /* Header und Footer laufen breiter       */

  /* Schmalere Spalte fuer durchlaufenden Fliesstext: Rechtstextseiten (.page)
     und Mitteilungsseiten (.mitteilung). Ab etwa 90 Zeichen je Zeile wird
     Fliesstext muehsam; 760 px halten rund 85. Beide Bausteine holen sich den
     Wert von hier, damit sie nicht auseinanderlaufen. */
  --container-text: 760px;
  --container-pad:  clamp(1.25rem, 5vw, 3rem);
  --col-gap:        clamp(2rem, 5vw, 4.5rem);   /* 72 px zwischen den Terminspalten */

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --section-py: clamp(2.75rem, 5.5vw, 4.5rem);
  --header-h:   clamp(64px, 5.8vw, 84px);


  /* --- Unterseiten ------------------------------------------------------- */
  /* Gemessen an Fischer_Unterseite.pdf (1920 × 4100 pt, Seite "Ueber mich"). */

  /* Hoehe des Bildbands im Hero. Anders als auf der Startseite reicht es
     NICHT bis zum unteren Fensterrand: der Entwurf gibt 602 pt bei 1920 pt
     Breite vor, also 31,35 % der Breite (Seitenverhaeltnis 3,19 : 1).
     Nach oben gedeckelt, damit es auf breiten Schirmen nicht ausufert,
     nach unten, damit das ueberlagerte Zitat Platz behaelt. */
  --hero-sub-h: clamp(320px, 31.35vw, 620px);

  /* Ueberschrift in einer Text-Bild-Reihe, gemessen 25 px @1440 */
  --fs-titel: clamp(1.25rem, 1.8vw, 1.5625rem);

  /* Seitentitel im Hero einer Unterseite.

     Wichtig ist nicht die absolute Groesse, sondern das Verhaeltnis zum
     Bildband: der Titel ist durchgehend 13,1 % der Bandhoehe. Deshalb
     dieselbe Rechnung wie bei --hero-sub-h — 4,1 vw statt 31,35 vw — und
     ein Deckel, der bei derselben Fensterbreite greift (rund 1980 px).
     Sonst steht auf grossen Schirmen ein kleiner Titel in einem hohen Band.

     Bleibt kleiner als der Name auf der Startseite (--fs-hero, 86 px):
     dort steht der Kandidat, hier nur der Seitenname. */
  --fs-seitentitel: clamp(2rem, 4.1vw, 5.0625rem);

  /* Dieselbe Ueberschrift auf einer Seite ohne Hero (Impressum, Datenschutz,
     Transparenz). Kleiner, weil sie dort nicht gegen ein Bildband anstehen
     muss, sondern auf Weiss allein am Seitenanfang steht. */
  --fs-seitentitel-klein: clamp(1.75rem, 3.4vw, 3rem);

  /* Text-Bild-Reihe: Abstand zwischen Textspalte und Bild (139 pt = 7,24 %) */
  --textbild-gap: clamp(1.75rem, 7.24vw, 6.5rem);

  /* Bildleiste: Abstand zwischen den Bildern. Im Entwurf schwanken die drei
     Abstaende zwischen 21 und 57 pt — hier auf den Mittelwert von 40 pt
     vereinheitlicht (2,08 % der Breite). */
  --leiste-gap: clamp(10px, 2.08vw, 30px);


  /* --- Unterseiten "Erfahrung" und "Amtszeit" ---------------------------- */
  /* Gemessen an Fischer_Webdesign.pdf, Seite 3 (1920 × 4200 pt) und
     Seite 4 (1920 × 3400 pt). */

  /* Akkordeon-Balken: Navy-Kachel 78 × 79 pt, also praktisch quadratisch */
  --akkordeon-h: clamp(44px, 4.1vw, 59px);

  /* Zielkarte: Icon-Kachel 128 pt quadratisch, Karte 713 pt breit */
  --zielkarte-h: clamp(68px, 6.6vw, 95px);

  /* Listenbox auf Seite 4: gelber Kopf 76 pt, Knopf 55 pt */
  --listenbox-kopf-h: clamp(2.75rem, 4vw, 3.55rem);
  --listenbox-pad:    clamp(1.1rem, 2.5vw, 2.25rem);

  /* Projektstreifen: Bild 462 × 392 pt, Unterschriftbalken 56 pt,
     Abstand zwischen den Kacheln 24 pt */
  --streifen-gap:    clamp(8px, 1.25vw, 18px);
  --streifen-text-h: clamp(30px, 2.9vw, 42px);

  /* Verlauf der neuen Anfuehrungszeichen-Grafik (anfuehrungsstriche.png,
     je Zeichen waagerecht ausgemessen) — kraeftiger als --grad-yellow */
  --c-zitat-1: #FBCB27;
  --c-zitat-2: #FBE43E;


  /* --- Unterseiten "Meine Ziele", "Aktuelles", "Kontakt" ----------------- */
  /* Gemessen an Fischer_Webdesign.pdf, Seiten 5 bis 7. */

  /* Kopfleiste eines Themenblocks: Icon-Kachel 85 pt quadratisch,
     Leiste zusammen 802 pt breit */
  --zielblock-kopf-h: clamp(48px, 4.4vw, 64px);

  /* Bildreihe eines Beitrags: die Fotos stehen auf gleicher Hoehe bei
     unterschiedlicher Breite, Abstand 20 pt */
  --reihe-gap: clamp(6px, 1.05vw, 15px);


  /* --- Hinweis-Popup ----------------------------------------------------- */
  /* Nicht aus dem Entwurf abgeleitet — den gibt es dafuer nicht. Die drei
     Ueberschriftgroessen sind so gestaffelt, dass sie sich im Kasten
     eindeutig unterscheiden (Faktor rund 1,4 und 1,25) und die groesste
     unter der Badge-Groesse der Seite bleibt: das Popup ist ein Hinweis,
     keine zweite Startseite. */

  --hinweis-breite:  46rem;                        /* 736 px Lesebreite     */
  --hinweis-pad:     clamp(1.6rem, 4vw, 3.25rem);  /* Innenabstand          */
  --hinweis-overlay: rgb(17 21 57 / 0.74);         /* Navy, halbtransparent */

  --fs-hinweis-1: clamp(1.5rem, 2.6vw, 2.125rem);      /* 34 px */
  --fs-hinweis-2: clamp(1.1875rem, 1.9vw, 1.5rem);     /* 24 px */
  --fs-hinweis-3: clamp(1.0625rem, 1.45vw, 1.1875rem); /* 19 px */


  /* --- Form ------------------------------------------------------------- */

  --radius: 0px;   /* Der Entwurf ist durchgehend rechtwinklig */

  /* Der 30°-Diagonalkeil — das Signaturelement des Entwurfs.
     Nachgemessen an der Unterkante der Hero-Flaeche: die Kante laeuft bis
     81,5 % der Breite waagerecht und steigt dann mit Steigung 0,577 an.
     0,185 × Breite × tan(30°) = 0,1068 × Breite. */
  --wedge-start: 81.5%;
  --wedge-rise:  min(10.68vw, 260px);

  /* Gelbes Band unter dem Hero: sichtbare Hoehe links */
  --band-h:      clamp(2.5rem, 4.7vw, 4.25rem);

  /* Navy-Splitter, der ueber dem Band parallel mitlaeuft */
  --sliver-h:    clamp(9px, 1.4vw, 20px);
  --sliver-gap:  clamp(7px, 1vw, 14px);

  /* Der schraege Strich unter den Navy-Flaechen.
     Zwei Grafiken vom Gestalter, beide mit waagerechter Oberkante und
     diagonaler Unterkante, mit Farbverlauf:
       strich.svg    dick links  → laeuft nach rechts auf null aus
       strich_2.svg  null links  → laeuft nach rechts dick zu
     Einfache Hoehe unter Ueberschriften, doppelte unter Zitatflaechen. */
  --strich-h:  clamp(5px, 0.56vw, 8px);
  --strich-h2: calc(var(--strich-h) * 2);


  /* --- Bewegung --------------------------------------------------------- */

  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      250ms;
}


/* Ab Tablet abwaerts flacht der Keil ab — bei schmalen Viewports wird
   der 30°-Anstieg sonst unverhaeltnismaessig hoch. */
@media (max-width: 48rem) {
  :root {
    --wedge-start: 62%;
    --wedge-rise:  min(7vw, 60px);
  }
}


/* --- Qualitaetsboden ----------------------------------------------------- */

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.on-inverse :where(a, button, input, textarea, select):focus-visible {
  outline-color: var(--focus-ring-inverse);
}

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