/* ============================================================================
   01-type-color.css — GLOBAL: Schriften, Typo-Skala, Farb-Token

   QUELLE: _Style Guide-#/typography-style-guide-roboto-green.html
   Die Werte unten sind 1:1 aus dem Stilguide übernommen — gleiche Namen,
   gleiche clamp()-Formeln, gleiche Zeilenhöhen und Laufweiten. Wer den
   Stilguide ändert, ändert diese Datei mit; sonst driften beide auseinander.

   LAYOUT: bleibt Notion — ruhig, geordnet, ein Abschnitt eine Aufgabe.
   Der Stilguide liefert die Schrift, Notion die Ordnung.

   ─────────────────────────────────────────────────────────────────────────
   ZWEI SCHRIFTEN, KLARE GRENZE
   Roboto Condensed  nur H1 und H2 — die grossen Titel.
   Roboto            alles andere: H3 abwärts, Fliesstext, UI, Formulare.

   ZWEI FARBEN, KLARE ROLLEN
   GRÜN  ist der Akzent der Website: Labels, Links, aktive Navigation,
         Titelunterstriche, Wortmarke.
   ROT   erscheint an genau ZWEI Stellen: der Schaltfläche
         „Mitglied werden" und dem Abzeichen „Neu". Mehr nicht — eine
         Akzentfarbe, die überall auftaucht, ist keine mehr.
   ============================================================================ */

:root {

    /* --- Schriften (Stilguide) ---------------------------------------- */
    --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-display: "Roboto Condensed", "Roboto", system-ui, Arial, sans-serif;

    /* --- Schriftgrössen (Stilguide, unverändert) ----------------------- */
    --fs-h1:      clamp(2.5rem,    1.62rem + 4.20vw, 4.5000rem);  /* 40 → 72 */
    --fs-h2:      clamp(1.875rem,  1.40rem + 2.10vw, 2.7500rem);  /* 30 → 44 */
    --fs-h3:      clamp(1.375rem,  1.16rem + 0.90vw, 1.7500rem);  /* 22 → 28 */
    --fs-h4:      clamp(1.125rem,  1.06rem + 0.28vw, 1.2500rem);  /* 18 → 20 */
    --fs-lead:    clamp(1.1875rem, 1.06rem + 0.58vw, 1.4375rem);  /* 19 → 23 */
    --fs-body:    clamp(1.0625rem, 1.00rem + 0.28vw, 1.1875rem);  /* 17 → 19  ANKER */
    --fs-body-sm: clamp(1.0000rem, 0.97rem + 0.15vw, 1.0625rem);  /* 16 → 17 */
    --fs-btn:     var(--fs-body-sm);
    --fs-meta:    var(--fs-body-sm);
    /* UNTERGRENZE: 14px (--fs-meta), die Groesse von .x262-chip.
       Darunter gibt es nichts mehr. Vorher waren --fs-date 13px und
       --fs-label 12px — Etiketten, Datumszeilen und Menue-Ueberschriften
       fielen damit unter die Lesegroesse. Wer eine kleinere Stufe
       braucht, braucht in Wahrheit weniger Text. */
    --fs-date:    var(--fs-body-sm);
    --fs-caption: var(--fs-body-sm);
    --fs-label:   var(--fs-body-sm);

    /* Alias: Bausteine benutzen --fs-small. Zeigt auf die Guide-Grösse. */
    --fs-small:   var(--fs-body-sm);
    /* Alias: der grosse Seitentitel heisst im Guide schlicht h1. */

    /* --- Zeilenhöhen (Stilguide) --------------------------------------- */
    --lh-display: 1.06;
    --lh-h2:      1.14;
    --lh-h3:      1.26;
    --lh-h4:      1.38;
    --lh-lead:    1.55;
    --lh-body:    1.65;
    --lh-tight:   1.35;
    --lh-ui:      1.2;
    --lh-hero:    var(--lh-display);   /* Alias */

    /* --- Laufweiten (Stilguide) ---------------------------------------- */
    --tr-display: -0.012em;   /* gelockert: leichter Schnitt braucht weniger Enge */
    --tr-h2:      -0.010em;
    --tr-h3:      -0.006em;
    --tr-body:     0em;
    --tr-label:    0.14em;
    --tr-hero:    var(--tr-display);   /* Alias */
    --tr-h1:      var(--tr-h2);        /* Alias */

    /* --- Schriftschnitte — GENAU DREI MUSTER, mehr gibt es nicht ---------
       Die ganze Website kommt mit drei Schriftmustern aus. Wer ein viertes
       braucht, braucht in Wahrheit mehr Abstand oder eine andere Grösse.

         A  Display     Roboto Condensed 400  → H1, H2, Hero
         B  Titel / UI  Roboto 500            → H3–H6, Schaltflächen, Namen,
                                                Etiketten, Daten, Kategorien
         C  Fliesstext  Roboto 400            → Text, Lead, Meta, Bildlegende

       Hierarchie entsteht aus GRÖSSE, FARBE und ABSTAND — nicht aus Fettung.
       Fette Titel hatten den Inhalt überstrahlt: Wer die Seite überflog, sah
       zuerst die Überschriften und erst danach das, worum es geht.

       Es gibt kein 300, 600, 700 und 900 mehr — alles ist auf 400 oder 500
       gefaltet. Zum Nachschärfen genügt EIN Regler: --w-heading auf 700.   */
    --w-display: 400;   /* A — H1, H2 in Roboto Condensed */
    --w-heading: 500;   /* B — H3–H6, UI, Etiketten       */
    --w-body:    400;   /* C — Fliesstext                 */

    /* --- Zeilenlänge (Stilguide) ---------------------------------------
       Drei Zeilenlängen für Text, zwei für Überschriften. Vorher lagen
       neun verschiedene Werte verstreut in den Bausteinen (70/66/64/58/
       56/52/46/42ch) — Unterschiede, die niemand sieht, die aber jede
       Änderung zur Suchaufgabe machen.                                   */
    --measure:      68ch;   /* Fliesstext, lange Prosa   */
    --measure-mid:  56ch;   /* Einleitung, Profiltext    */
    --measure-lead: 46ch;   /* Lead, Teaser, Kartentext  */
    --measure-h1:   17ch;
    --measure-h2:   22ch;

    /* --- Farben: Neutrale Töne (Stilguide) ------------------------------
       Warme Grautöne, kein kaltes Grau. #14171a ist fast schwarz, aber
       nicht rein — das nimmt der Seite die Härte.

       DREI Textgrau — je eines pro Schriftmuster, mehr braucht die Seite
       nicht. --faint ist KEINE Schriftfarbe: es ist der Konturton beim
       Überfahren mit der Maus und steht nirgends als color.              */
    --ink:     #14171a;   /* Überschriften und Fliesstext */
    --ink-2:   #3d4247;   /* Zweitrang: Kartentext, Lead  */
    --muted:   #6d7278;   /* Meta, Daten, Bildlegenden    */

    --faint:   #a4a8ac;   /* nur Kontur bei :hover        */
    --paper:   #ffffff;
    --paper-2: #f4f2ee;   /* warmer Sandton               */
    --line:    #dfdbd4;
    --line-2:  #eceae5;

    /* --- Farben: GRÜN — der Akzent der Website ------------------------- */
    --green-800: #0f5427;   /* Initialen auf Grünfläche */
    --green-700: #15703a;   /* Hover, Text auf Weiss    */
    --green-600: #1e8a3b;   /* Akzent, aus dem Logo     */
    --green-100: #e6f2dc;
    --green-050: #f3f8ed;

    /* --- Farben: ROT — die Ausnahme, genau zwei Stellen ---------------- */
    --red-800: #8f0b20;
    --red-600: #c8102e;
    --red-050: #fcf0f1;

    /* --- Farben: RUBRIKEN --------------------------------------------
       Vier Rubriken, vier Farbpaare, uebernommen aus ds-svp-community V1
       (assets/css). Sie faerben AUSSCHLIESSLICH das Etikett .label--chip:
       an einer Karte erkennt man dadurch auf einen Blick, ob es um Politik,
       einen Anlass, das Vereinsleben oder „il Paese" geht.

       Anlass benutzt das vorhandene Gruen — eine fuenfte Gruenvariante
       waere Farbe ohne Aussage. */
    --cat-politik-fg:      #a8261c;
    --cat-politik-bg:      #fbf0ee;
    --cat-anlass-fg:       var(--green-700);
    --cat-anlass-bg:       var(--green-050);
    --cat-vereinsleben-fg: #8a6a00;
    --cat-vereinsleben-bg: #fdf4d6;
    --cat-ilpaese-fg:      #4a5568;
    --cat-ilpaese-bg:      #f1f3f5;

    /* --- Semantische Rollen ------------------------------------------- */
    --accent:       var(--green-600);
    --accent-ink:   var(--green-700);
    --brand:        var(--green-600);
    --brand-strong: var(--green-700);
    --brand-tint:   var(--green-050);
    --brand-tint-2: var(--green-100);

    /* NUR „Mitglied werden" und „Neu". Nirgends sonst. */
    --alert:      var(--red-600);
    --alert-ink:  var(--red-800);

    --text:        var(--ink);
    --text-2:      var(--ink-2);
    --text-muted:  var(--muted);
    --surface:     var(--paper);
    --surface-2:   var(--paper-2);
    --border:      var(--line);
    --border-soft: var(--line-2);
    --link:        var(--green-700);

    /* --- Form — Stilguide: keine Rundungen ----------------------------- */
    --radius:      0;
    --radius-lg:   0;
}

/* ============================================================================
   GRUNDLAGEN
   ============================================================================ */

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

/* Das hidden-Attribut muss jede display-Regel schlagen. Ohne diese Zeile
   gewinnt ein `display: grid` einer Komponente — daran ist die
   Anmelde-Schranke zuerst gescheitert. */
[hidden] { display: none !important; }

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

/* Hervorhebung im Fliesstext: Muster B (500), nicht der Browser-Standard
   700. Wichtig, sobald Redaktorinnen im ProcessWire-Editor <strong>
   setzen — ohne diese Regel käme über jeden fett gesetzten Satz ein
   viertes Schriftmuster zurück in die Seite. */
strong, b, th, dt, legend, summary { font-weight: var(--w-heading); }
em, i, cite { font-style: italic; font-weight: inherit; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--w-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* H1 und H2: Roboto Condensed. Die einzigen zwei Ebenen mit der
   zweiten Schrift — so steht es im Stilguide. */
h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--w-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    color: var(--ink);
    max-width: var(--measure-h1);
    text-wrap: balance;
}

h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--w-display);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
    color: var(--ink);
    max-width: var(--measure-h2);
    text-wrap: balance;
}

/* Ab H3 abwärts: Roboto. */
h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: var(--w-heading);
    line-height: var(--lh-h3);
    letter-spacing: var(--tr-h3);
    color: var(--ink);
    text-wrap: balance;
}

h4 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-h4);
    font-weight: var(--w-heading);
    line-height: var(--lh-h4);
    letter-spacing: 0;
    color: var(--ink);
}

h5, h6 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: var(--w-heading);
    line-height: var(--lh-tight);
    color: var(--ink);
}

p, ul, ol, dl, figure, blockquote, table { margin: 0; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: var(--brand-tint-2); color: var(--ink); }

/* ============================================================================
   TYPO-HILFSKLASSEN (Stilguide-Namen)
   ============================================================================ */

.t-hero {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--w-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
}

.t-lead {
    font-size: var(--fs-lead);
    font-weight: var(--w-body);
    line-height: var(--lh-lead);
    color: var(--ink-2);
    max-width: var(--measure-lead);
}
.t-lead--wide { max-width: 58ch; }

.t-small { font-size: var(--fs-body-sm); }

.t-meta {
    font-size: var(--fs-meta);
    font-weight: var(--w-body);
    line-height: 1.5;
    color: var(--muted);
}
.t-meta strong { font-weight: var(--w-heading); color: var(--ink-2); }

.t-caption {
    font-size: var(--fs-caption);
    line-height: 1.5;
    color: var(--muted);
    max-width: 52ch;
}

.t-date {
    font-size: var(--fs-date);
    font-weight: var(--w-heading);
    line-height: var(--lh-ui);
    letter-spacing: .04em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Etikett — Stilguide: 12px, Versalien, 0.14em gesperrt, fett. */
.t-label {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: var(--w-heading);
    line-height: var(--lh-ui);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--accent);
}
.t-label--ink     { color: var(--ink); }
.t-label--muted   { color: var(--muted); }
.t-label--boxed   { color: var(--paper); background: var(--accent); padding: 5px 9px 4px; }
.t-label--outline { color: var(--ink); border: 1px solid var(--line); padding: 5px 9px 4px; }

/* Das EINE rote Abzeichen. Nur „Neu". */
.t-badge-new {
    display: inline-block;
    padding: 4px 8px 3px;
    font-size: var(--fs-label);
    font-weight: var(--w-heading);
    line-height: var(--lh-ui);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--paper);
    background: var(--alert);
}

.t-muted   { color: var(--muted); }
.t-brand   { color: var(--accent-ink); }
.t-tabular { font-variant-numeric: tabular-nums; }

/* Titelunterstrich — Stilguide-Signatur, jetzt in Grün. */
.t-ruled {
    box-shadow: inset 0 -1px 0 var(--accent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

code {
    font-family: var(--font-body);
    font-size: .9em;
    background: var(--paper-2);
    padding: 1px 5px;
    color: var(--ink-2);
}

.u-hidden { display: none !important; }
.u-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001s !important;
        animation-duration: .001s !important;
    }
}