/* ======================================================================
   grund.css — was auf JEDER Seite von Neverglade gilt.

   DIE ORDNUNG, seit dem 09.09.2026:

       grund.css      was für alle gilt
       bauteile.css   was auf mehr als einer Seite steht
       seite-*.css    was einer Seite gehört

   Jede Seite lädt genau diese drei, in dieser Reihenfolge. Mehr gibt es
   nicht, und ein <style> im Markup gibt es nicht mehr.

   WAS HIER STEHT: Farben, Schriften, die Linienstärke, box-sizing, der
   Zeiger. Alles davon gilt auf allen fünf Seiten mit demselben Wert.

   WAS HIER NICHT STEHT und warum: Maße, die eine Seite anders führt als
   die andere – die Arbeitsflächen von /intern und dem Musikwerkzeug
   rechnen mit engeren Abständen und kleinerer Schrift als die
   Startseite. Solche Werte gehören der Seite, nicht dem Haus, und
   stehen in ihrer eigenen Datei. Wer sie hierher zöge, müsste einen von
   zwei richtigen Werten zum falschen erklären.

   Ebenfalls nicht hier: Namen, die eine Seite nur LIEST, ohne sie zu
   setzen – etwa --fs-body auf /intern. Die leben vom Rückfallwert im
   var(), und ein Wert an dieser Stelle würde sie still verändern.
   ====================================================================== */

/* ==== Schriften =================================================== */

/* Schriften fuer den Schriftzug, in dieser Reihenfolge versucht.
   Fehlt eine Datei, faellt die Kette still auf die naechste zurueck. */
@font-face {
  font-family: 'Long Shot';
  src: url('/assets/fonts/Long_Shot.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Merchad';
  src: url('/assets/fonts/Merchad.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
/* Trenches: nur fuer das Rekrutierungswort. Der Dateiname hat ein
   Leerzeichen - in url() muss er deshalb in Anfuehrungszeichen. */
@font-face {
  font-family: 'Trenches';
  src: url('/assets/fonts/Trenches Demo.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Babapro';
  src: url('/assets/fonts/BabaPro-Bold.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}


/* ==== Die Werte, aus denen alles andere sich ableitet ============= */

:root {
  /* ---- Farben ------------------------------------------------------ */
  --ink:           #17120F;  /* Seitengrund                          */
  --ink-soft:      #473A32;  /* Flaechen, Content-Boxen  1,70:1      */
  --ink-line:      #7B6555;  /* Trenner und Raender      3,39:1      */
  --copper:        #DE9B72;  /* Leitfarbe                            */
  --copper-bright: #F2C4A2;  /* Hover                                */
  --copper-deep:   #A9683F;  /* gedrueckt                            */
  --outline:       #0C0806;  /* Konturfarbe, aus den Icons           */
  --bone:          #F3F5F6;  /* Logo, grosse Ueberschriften          */
  --text:          #E2D6CD;  /* Fliesstext                           */
  --muted:         #9C8878;  /* Sekundaertext                        */
  --warn:          #F2A98C;  /* Fehler und Warnungen                 */
  /* Die Farbe, in der abgedunkelt wird - als Zahlentripel, damit
     rgba(var(--deckung), .5) daraus werden kann. Alles, was abdunkelt,
     dunkelt in DIESER Farbe ab; sonst wird aus Kupfer auf Braun
     unversehens Kupfer auf Blau. */
  --deckung:       23, 18, 15;
  --linie-leise:   rgba(222, 155, 114, .42);  /* sichtbare Trennlinie */
  --linie-hauch:   rgba(222, 155, 114, .16);  /* eben noch zu ahnen   */

  /* ---- Schriften --------------------------------------------------
     --font-logo ist reserviert: ausschliesslich der Schriftzug.      */
  --font-logo: 'Long Shot', Merchad, Babapro, Anton, Haettenschweiler, Impact, sans-serif;
  --font-head: 'Viaoda Libre', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-btn:  'Cinzel', Georgia, serif;

  /* ---- Grösse ------------------------------------------------------
     Die Fliesstextgrösse --fs-body steht bewusst NICHT hier: /intern
     liest sie, ohne sie zu setzen, und rechnet mit dem Rückfallwert.  */
  --fs-h1:    clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h2:    clamp(1.7rem, 3vw, 2.4rem);
  --fs-h3:    1.4rem;
  --fs-small: .875rem;
  --fs-label: .95rem;
  --line:     1px;         /* Linienstärke, überall dieselbe          */
}

/* ==== Basis ======================================================= */

/* Steht auf allen fünf Seiten wortgleich. */
* { box-sizing: border-box; }

/* ==== Der Zeiger ================================================== */

/* Rey am 08.09.2026: „Dieser Zeiger soll Standard auf allen
   neverglade-Seiten sein." Genau deshalb steht er hier: Was für alle
   gilt, steht in grund.css. Bis zum 09.09. war es eine eigene Datei
   zeiger.css - eine von acht, und niemand konnte am Namen ablesen,
   warum ausgerechnet der Zeiger eine eigene hatte.

   ZWEI BILDER, ZWEI ZUSTÄNDE. mouse.webp gilt überall, mouse_pointer.webp
   auf allem, was sich anklicken lässt - dieselbe Trennung, die ein Browser
   von Haus aus zwischen `default` und `pointer` macht.

   GRÖSSE. Reys Vorlagen sind 80x72 und 90x82 Pixel; das ist für einen
   Cursor zu groß - Browser lehnen Bilder über 128 Pixel ganz ab, und schon
   ab etwa 48 verdeckt der Zeiger, worauf er zeigt. Hier stehen deshalb auf
   36 Pixel Höhe verkleinerte Fassungen (`-36`); die Originale bleiben
   daneben liegen.

   DER PUNKT, AN DEM ER ZEIGT, sind die zwei Zahlen hinter der Adresse.
   Ohne sie nähme der Browser die linke obere Ecke des Bildes - bei einem
   Zeiger mit etwas Luft um die Spitze klickt man dann konsequent daneben.

   DER RÜCKFALL nach `auto` bzw. `pointer` am Ende jeder Zeile ist Pflicht:
   Er greift, wo WebP als Cursor nicht unterstützt wird, und dort sieht man
   dann den gewohnten Zeiger statt gar keinen. */

:root,
body {
  cursor: url('/assets/img/mouse-36.webp') 4 3, auto;
}

/* Alles, was auf einen Klick reagiert. Die Liste bleibt bewusst bei den
   echten Bedienelementen - ein Zeiger, der überall „klickbar" behauptet,
   sagt nichts mehr. */
a[href],
button,
summary,
label[for],
select,
[role="button"],
[role="tab"],
.klickbar,
.tu,
.kachel,
.corner {
  cursor: url('/assets/img/mouse_pointer-36.webp') 6 3, pointer;
}

/* Wo getippt wird, gehört der Textcursor hin - alles andere wäre eine
   Behauptung über das Feld, die nicht stimmt. */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea {
  cursor: text;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}