/* ═══════════════════════════════════════════════════════════════════════════
   DAS BLÄTTERDACH — Oberfläche des Verein-Servers

   Der Prüfstein für jede Ansicht:
   Bedient eine 45-jährige Züchterin das nur, um ans Ziel zu kommen — oder
   freut sie sich darauf?

   Zwei Entwürfe sind daran gescheitert:
     1. Geprägtes Messing — beeindruckend, aber kalt und technisch.
     2. Leuchtende Fäden auf Schwarz — die Idee trug, das Material nicht.
        Zu dunkel, zu depressiv, ohne Bezug zu Hunden und ihren Züchterinnen.

   Die Palette ist jetzt nicht geraten, sondern GEMESSEN — auf einer Website,
   die ausschließlich für Hundezüchter gebaut wird (hunde-web.design):
     rgb(233,230,223)  warmes Creme
     rgb(173,166,149)  Taupe
     rgb(245,244,242)  fast Weiß, warm
   Warm, hell, gedeckt, natürlich. Kein Schwarz, keine Buntfarbe. Das ist die
   Welt, in der diese Frauen zuhause sind.

   Was bleibt: die VERZWEIGUNG. Eine Abstammung teilt sich — das ist die Form,
   auf die sie stolz sind, und die einzige Schönheit dieses Produkts, die ohne
   ein einziges Foto auskommt.

   HARTE REGEL: Das Blätterdach trägt keine Information. Jede Angabe steht im
   Text. Wer den Shader abschaltet, verliert Schönheit, nie Bedienbarkeit.

   ── AUF DEN TOKEN-VERTRAG GEZOGEN, 09.08.2026 ─────────────────────────────
   Vorgabe des Auftraggebers: „alle größen farben usw. sind globale variable
   und nicht einzeln coded." Keine Zeile dieser Datei setzt noch einen Grad,
   eine Sperrung oder eine Schriftfamilie selbst; die Palette ganz unten zeigt
   nur noch auf `dz-token.css`.

   DIE EINE AUSNAHME ist `--lg-glut` — ein sichtbarer Farbwechsel an 32
   Stellen, den der Auftraggeber entscheidet. Begründung an Ort und Stelle.

   WAS DAS MÖGLICH GEMACHT HAT: Diese Datei wird von DREI Köpfen geladen, und
   einer davon lud `dz-token.css` lange NICHT:
     · `App.razor:35`                    angemeldet
     · `Program.cs:590` (AuthHead)       /login /join /setup
     · `PublicClubSiteExporter.cs:59`    /public/verein
   Gemessen am 09.08.2026 auf `/public/verein`, VOR dem Eingriff:
   `getComputedStyle(body).getPropertyValue('--dz-tinte')` war LEER. Jede
   `var(--dz-…)` wäre dort ungültig gewesen und auf Vererbung zurückgefallen —
   was in `linie-teile.css` an drei Deklarationen genau so passiert IST
   (Sektionsmarke von 10,5 auf 16px, Zwingername ohne Serife), bevor es
   auffiel. Der Exporter hängt `dz-token.css` seit dem 09.08.2026 mit ein;
   ERST dadurch ist dieser Kopf hier überhaupt umstellbar.
   WER DIE ZEILE IM EXPORTER WIEDER ENTFERNT, macht diese Datei stumm kaputt.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer linie {

/* DIE PALETTE IST KEINE MEHR — sie zeigt nur noch auf den Vertrag.
   Bis zum 09.08.2026 standen hier acht gemessene OKLCH-Werte. `dz-token.css:369-375`
   hängt genau diese Namen unter `.dz-schale` auf die neuen Token um; auf den
   Empfangsseiten und auf `/public/verein` gibt es aber kein `.dz-schale`, und
   dort blieb die alte Welt stehen. Jetzt steht die Zuordnung an der Wurzel und
   gilt überall gleich — ZWECK für ZWECK, nicht Farbe für Farbe, deshalb bleibt
   die Kontrastregel erhalten: `--lg-fein` war der Kleintext-Token der alten
   Sprache (4,9:1), `--dz-fein` ist es in der neuen (6,51:1). */
.lg {
  --lg-papier:  var(--dz-papier);
  --lg-creme:   var(--dz-grund);
  --lg-taupe:   var(--dz-stein);
  --lg-tinte:   var(--dz-tinte);
  --lg-still:   var(--dz-still);   /* Nebeninformation ab 18px               */
  --lg-fein:    var(--dz-fein);    /* KLEINTEXT unter 18px. Nie mit Alpha.   */
  --lg-sonne:   var(--dz-lehm-sanft);

  /* `--lg-glut` BLEIBT der alte Wert, und das ist eine Entscheidung, kein
     Vergessen. Er trägt 32 Stellen (aktiver Reiter, Handlungsknöpfe,
     Zeitleistenpunkte, jeder Trennstrich); ihn auf `--dz-lehm-tief` zu
     hängen ist ein SICHTBARER Farbwechsel und liegt beim Auftraggeber.
     Begründung im Volltext: `dz-token.css:377-395`. */
  --lg-glut:    oklch(54% 0.160 42);

  position: relative;
  min-height: 100vh;
  background: var(--lg-creme);
  color: var(--lg-tinte);
  font-family: var(--dz-sans);
  overflow-x: hidden;
}

/* Das Blätterdach liegt hinter allem. */
.lg-flaeche {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Ohne WebGL bleibt ein warmer Lichtverlauf — ruhiger, nie kaputt. */
.lg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 26% 4%, oklch(from var(--lg-sonne) l c h / 0.30), transparent 62%),
    radial-gradient(80% 60% at 88% 88%, oklch(from var(--lg-taupe) l c h / 0.18), transparent 60%);
}
.lg:has(.lg-flaeche)::before { display: none; }

/* ── Der Kopf ──────────────────────────────────────────────────────────────
   Ein Name. Eine Zahl. Sonst nichts.
   Dichte gemessen: Alfa Giulia 387 Zeichen je 1000px Seitenhöhe, VW Passat
   1.639. Der Passat argumentiert und bietet an; die Giulia nennt ihren Namen
   und schweigt. Hier gilt die Giulia.                                      */
.lg-kopf { padding: clamp(56px, 12vh, 152px) clamp(24px, 7vw, 120px) clamp(28px, 5vh, 64px); }

.lg-marke {
  font-family: var(--dz-sans);
  font-size: var(--dz-mikro);
  letter-spacing: var(--dz-sperr-weit);
  text-transform: uppercase;
  color: var(--lg-fein);
  margin: 0 0 clamp(16px, 2.4vh, 30px);
}

/* Der Titel der Seite. Für DIESE Rolle kennt der Vertrag zwei Grenzen —
   `--dz-titel-klein` (34px, Boden) und `--dz-titel-gross` (120px, Deckel).
   Sie tragen sonst die gerechnete Kurve des Seitenkopfes (`dz-hero.css`), die
   `--dzh-langwort` aus `LinieHero.razor` braucht; das gibt es auf
   `/public/verein` nicht. Deshalb hier als clamp-Grenzen: die Zahlen kommen
   aus dem Vertrag, nur die Steigung dazwischen ist Satz.
   Die Laufweite fällt ersatzlos weg — das negative Kerning gehört dem
   gerechneten Kopftitel, wo es eine Geste ist; hier war es kopiert. */
.lg-name {
  font-family: var(--dz-display);
  font-weight: 300;   /* bleibt stehen: Head of Design sammelt das getrennt   */
  font-size: clamp(var(--dz-titel-klein), 8vw, var(--dz-titel-gross));
  line-height: var(--dz-titel-zeilen);
  margin: 0;
  max-width: 14ch;
  color: var(--lg-tinte);
}

.lg-zahl {
  font-family: var(--dz-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--dz-klein);
  letter-spacing: var(--dz-sperr-eng);
  /* War `--lg-still` bei 13px — nach der Kontrastrechnung im Kopf von
     `dz-token.css` ein AA-Verstoss (4,01:1 unter 18px). Kleintext nimmt
     `--lg-fein` (= `--dz-fein`, 6,51:1). */
  color: var(--lg-fein);
  margin: clamp(22px, 3.6vh, 40px) 0 0;
  /* Lesegrenze, 25.08.2026. `.lg-zahl` traegt nicht nur die Ziffer, sondern
     auch den Satz daneben — auf /verein/lizenz steht dort „Enthalten: alles
     aus Basis, dazu Formular-Kontingente, oeffentliche Vereinsseite …".
     Gemessen bei 1600px Fensterbreite mit `Range.getClientRects()`: EINE Zeile,
     907px breit, 144 Zeichen. WCAG 2.2 · 1.4.8 nennt 80 als Obergrenze, und
     144 ist keine Zeile mehr, deren Anfang das Auge wiederfindet.
     NACHTRAG desselben Tages: `1ch` ist die Vorschubbreite der Null, nicht die
     mittlere Zeichenbreite — in Mona Sans VF passen in 66ch rund 87 Zeichen,
     nicht 66. Gemessen im Zuechter-Kopf: 641,58px (= 68ch) trugen 87 Zeichen,
     Verhaeltnis 0,76. Deshalb 58ch: rund 76 Zeichen, sicher unter 80. Dieser
     Satz steht in 12px Grotesk unter einer inszenierten Ziffer, nicht im
     Satzspiegel — er ist Beiwerk und darf enger stehen als Fliesstext. */
  max-width: 58ch;
}
/* Die Zahl darin ist inszeniert, nicht abgelesen — deshalb Serife. Grad auf
   `--dz-anzeige`: der Vertrag nennt sie „Zwischenüberschrift, Abschnitt", und
   genau das ist diese Ziffer im Kopf. */
.lg-zahl b {
  font-family: var(--dz-display);
  font-size: var(--dz-anzeige);
  color: var(--lg-glut);
}

/* ── Die Namen ─────────────────────────────────────────────────────────────
   Das Herzstück. Keine Tabelle, keine Karte: die Namen stehen frei, jeder in
   der Größe, die er verdient. Ein Zwingername ist das, worauf eine Züchterin
   stolz ist — keine Tabellenzelle.                                         */
.lg-namen {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 1vh, 12px);
  padding: clamp(20px, 4vh, 56px) clamp(24px, 7vw, 120px) clamp(80px, 14vh, 180px);
  max-width: 92ch;
}

.lg-eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: clamp(14px, 2.2vh, 24px) 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  border-top: 1px solid oklch(from var(--dz-stein) l c h / 0.34);
  transition: padding-left 0.55s cubic-bezier(.16,1,.3,1);
}
.lg-eintrag:first-child { border-top: 0; }

/* Beim Zeigen rückt der Name ein — als zöge man ihn heran. Ein Zweig wächst
   von links mit. */
.lg-eintrag::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--lg-glut), transparent);
  transition: width 0.6s cubic-bezier(.16,1,.3,1);
}
.lg-eintrag:hover, .lg-eintrag:focus-visible {
  padding-left: clamp(18px, 3vw, 44px);
  outline: none;
}
.lg-eintrag:hover::before,
.lg-eintrag:focus-visible::before { width: clamp(12px, 2.4vw, 34px); }

.lg-eintrag-name {
  font-family: var(--dz-display);
  font-weight: 300;
  /* Vorlagenwert `.reg h2` (01-uebersicht…html:169). Das fruehere
     clamp(27px,4.4vw,56px) war eine Erfindung — bei 3440px stand der
     Zwingername ein Drittel groesser da als in der Vorlage. Die Laufweite
     faellt ersatzlos weg: negatives Kerning gehoert dem Kopftitel. */
  font-size: var(--dz-anzeige-gross);
  line-height: 1.02;
  color: var(--dz-tinte);
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color 0.35s ease;
}
.lg-eintrag:hover .lg-eintrag-name,
.lg-eintrag:focus-visible .lg-eintrag-name { color: var(--lg-glut); }

/* Nummer und Datum stehen UNTER dem Namen. Nebeneinander zwingt den Namen zum
   Umbruch und schiebt die Nummer ins Leere — und ein Zwingername, der
   umbricht, verliert genau die Würde, um die es hier geht. */
.lg-kennung {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--dz-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--dz-klein);
  letter-spacing: var(--dz-sperr-eng);
}
.lg-eintrag-nr  { color: var(--lg-glut); white-space: nowrap; }
.lg-eintrag-sub { color: var(--dz-fein); }

/* Frisch eingetragen: ein warmer Punkt am linken Rand, der über 30 Tage
   verblasst. Man sieht, was zuletzt geschah — auch von anderen — ohne dass es
   dafür einen Aktivitäts-Feed braucht. */
.lg-eintrag[data-frisch]::after {
  content: "";
  position: absolute;
  left: -16px; top: calc(50% - 3px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lg-glut);
  opacity: calc(var(--waerme, 0) * 0.9);
}

/* ── Der leere Zustand ─────────────────────────────────────────────────────
   Ein Satz, die Handlung darin. Kein Kasten, kein Titel, kein Knopf.       */
.lg-leer {
  font-family: var(--dz-display);
  font-size: var(--dz-anzeige);
  font-weight: 300;
  line-height: 1.32;
  color: var(--dz-still);
  max-width: 26ch;
  margin: 0;
}
.lg-leer a {
  color: var(--lg-glut);
  text-decoration: none;
  border-bottom: 1px solid oklch(from var(--lg-glut) l c h / 0.35);
}
.lg-leer a:hover { border-bottom-color: var(--lg-glut); }

.lg-wege {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 30px);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* 15px, nicht 11 — und aufrecht. Ein Wort, das man lesen muss, um es zu
   finden, ist keine Navigation. Die Linie darunter markiert den Ort. */
.lg-weg {
  position: relative;
  font-family: var(--dz-sans);
  font-size: clamp(0.8333rem, 1.05vw, 0.9333rem);
  letter-spacing: var(--dz-sperr-eng);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dz-fein);
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.lg-weg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--lg-glut);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(.16,1,.3,1);
}
.lg-weg:hover { color: var(--dz-tinte); }
.lg-weg:hover::after { transform: scaleX(1); opacity: 0.45; }
.lg-weg[aria-current="page"] { color: var(--lg-glut); }
.lg-weg[aria-current="page"]::after { transform: scaleX(1); }
.lg-weg:focus-visible { outline: 1px solid var(--lg-glut); outline-offset: 5px; }

/* Zweite Zeile: die Bereiche der offenen Sektion. Sie erscheint nur dann —
   aber wenn, dann vollständig und ohne Scrollen im Verborgenen. */
.lg-kranz-unten {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.8vw, 28px);
  padding: 0 clamp(20px, 4vw, 56px) clamp(11px, 1.5vh, 16px);
  border-top: 1px solid oklch(from var(--dz-stein) l c h / 0.22);
  padding-top: clamp(10px, 1.4vh, 14px);
}
.lg-unterweg {
  position: relative;
  font-size: clamp(0.8667rem, 1.05vw, 0.9667rem);
  text-decoration: none;
  color: var(--dz-fein);
  padding: 3px 0;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.lg-unterweg:hover { color: var(--dz-tinte); }
.lg-unterweg[aria-current="page"] {
  color: var(--lg-glut);
  border-bottom: 1px solid var(--lg-glut);
}
.lg-unterweg:focus-visible { outline: 1px solid var(--lg-glut); outline-offset: 4px; }

/* Der Ausgang sitzt am rechten Ende derselben Zeile. */
.lg-ausgang {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 0 auto;
  flex: none;
}
/* Der Kopf einer Arbeitsseite steht dichter unter dem Kranz — die Leiste hat
   den Abstand schon geliefert. */
.lg-kopf-knapp { padding-top: clamp(28px, 5vh, 64px); }

/* ── Kleiner Bildschirm ────────────────────────────────────────────────────
   Der Kranz bleibt oben und bleibt vollständig; er darf umbrechen. Eine Leiste,
   in der Wörter unsichtbar seitlich herausragen, ist derselbe Fehler wie eine,
   die man nicht als Navigation erkennt.                                     */
@media (max-width: 860px) {
  .lg-kranz-unten { gap: 10px 16px; padding-left: 16px; padding-right: 16px; }
  .lg-wege { gap: 10px 16px; }
  .lg-weg { font-size: var(--dz-klein); letter-spacing: var(--dz-sperr-eng); }
  .lg-unterweg { font-size: var(--dz-klein); }
  .lg-ausgang { margin-left: 0; }
  .lg-kopf { padding-top: clamp(28px, 5vh, 56px); }
}

/* ── Ruhe ──────────────────────────────────────────────────────────────────
   Ohne Bewegung bleibt das Blätterdach stehen, statt zu verschwinden. Die
   Schönheit geht nicht verloren, nur der Wind.                             */
@media (prefers-reduced-motion: reduce) {
  .lg-eintrag, .lg-eintrag::before, .lg-eintrag-name { transition: none; }
}

}