/*
 * Gestaltungssystem, Teil 1: Tokens (Paket R).
 *
 * Alle Farben, Schriften, Abstände, Radien und Schatten der Seite stehen hier und nur hier.
 * Andere Dateien benutzen ausschließlich var(--...). Neue Farbwerte außerhalb dieser Datei sind verboten.
 *
 * Grundfarbe: das Rot des Vereinswappens (gemessen am Logo: rgb(184 0 0) bis rgb(191 0 0)),
 * dazu Papierton, Tinte, Tannengrün (Wald und Warte) und Ocker (Messing, Archivpapier).
 *
 * Themen über html[data-theme]: hell, dunkel, sepia, kontrast. Ohne Wahl gilt die Systemeinstellung
 * (prefers-color-scheme), dafür sorgen color-scheme und light-dark(). Das Thema wird vor dem ersten
 * Zeichnen gesetzt (Skript im Kopf von vorlagen/layout.php).
 */

:root {
  color-scheme: light dark;

  /* Flächen: Papier statt Weiß */
  --papier: light-dark(#f6f0e3, #1b1712);
  --papier-2: light-dark(#ede4d0, #241e17);
  --karte: light-dark(#fbf8f1, #2b241c);
  --karte-2: light-dark(#fffdf8, #332b22);

  /* Schrift und Linien */
  --tinte: light-dark(#261f17, #f1e9da);
  --tinte-2: light-dark(#5c5040, #cbbfa9);
  --rand: light-dark(#d8cbb0, #43392c);       /* feine Trennlinie, trägt keine Information */
  --linie: light-dark(#85755a, #968770);       /* Rand von Bedienelementen, mindestens 3:1 */

  /* Wappenrot: Links und Text (akzent), Flächen mit weißer Schrift (akzent-fl) */
  --akzent: light-dark(#a30d0d, #ff9d93);
  --akzent-fl: light-dark(#b80000, #c01818);
  --auf-akzent: #fff;

  /* Tannengrün und Ocker */
  --gruen: light-dark(#2d5a3d, #8fd0a3);
  --gruen-fl: light-dark(#2d5a3d, #2f6a47);
  --auf-gruen: #fff;
  --ocker: light-dark(#7a5410, #e2b659);
  --ocker-fl: light-dark(#e0b04e, #e0b04e);
  --auf-ocker: #261f17;                         /* dunkle Schrift auf Ocker, in jedem Thema gleich */
  --lichtkasten: #0e0c09;                       /* Hintergrund der Bildansicht */
  --auf-lichtkasten: #f1e9da;

  /* Hinweiskästen und Markierung */
  --info-bg: light-dark(#e6efe4, #1f2f25);
  --achtung-bg: light-dark(#f7e3d9, #3a2420);
  --markierung: light-dark(#f3dc9a, #5a4614);
  --auf-markierung: var(--tinte);

  /* Farben der Bewegung (KONZEPT-MOTION.md 3.4). Licht ist immer warm, Rot ist Auswahl, Grün ist der Weg, Blau ist nur Wasser.
     Die Karte liest diese Werte aus dem Elternfenster, damit es nur eine Herkunft gibt. */
  --glanz-licht: light-dark(#e0b04e, #f0c768);       /* Hervorhebung, leuchtendes Haus, Themenlicht */
  --fenster-warm: #ffc775;                            /* Fenster am Abend (gleich in beiden Themen) */
  --glanz-wasser: light-dark(#4f8fb8, #8cc4e6);       /* Opferbach, Talgraben, Ring im Wasser */
  --spur: var(--gruen-fl);                            /* Fußspur und Weg */
  --glut: light-dark(#d4601a, #ff8c3a);               /* Osterfeuer */
  --nebel: light-dark(rgb(246 240 227 / .86), rgb(27 23 18 / .86));       /* Nebel beim Laden der Karte */
  --schleier-lesen: light-dark(rgb(246 240 227 / .72), rgb(27 23 18 / .72)); /* Die Bühne tritt zurück, solange gelesen wird */
  --daemmerung: light-dark(#7d6a8f, #3a3550);        /* Multiplikationsschleier bei Dämmerung (Welle 2) */
  --poster-punkt: #fff;                                /* Orte auf dem Luftbild-Poster: weißer Rand, Papierfüllung */

  --fokus: light-dark(#1a4fa0, #9dc1ff);
  --schleier: light-dark(rgb(38 31 23 / .55), rgb(0 0 0 / .65));
  --verlauf-kopf: light-dark(rgb(246 240 227 / .92), rgb(27 23 18 / .92));

  /* Schriften: Überschriften Literata (Serife), Text Hanken Grotesk, beide selbst gehostet */
  --schrift-titel: "Literata Variable", Charter, "Iowan Old Style", Georgia, serif;
  --schrift-text: "Hanken Grotesk Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Schriftgrößen (rem, Grundschrift 18 px; html skaliert über --schrift) */
  --t-klein: max(16px, .875rem);   /* kleinste Schrift der Seite: nie unter 16 px (auch bei Schriftgröße klein), sonst zoomt iOS und Älteren fehlt die Lesbarkeit */
  --t-basis: 1rem;
  --t-mittel: 1.125rem;
  --t-gross: 1.3rem;
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-h2: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem);
  --t-h1: clamp(2rem, 1.35rem + 2.8vw, 3.3rem);
  --t-gross-titel: clamp(2.3rem, 1.4rem + 4vw, 4.2rem);
  --zeilenhoehe: 1.62;

  /* Abstandsleiter */
  --r-1: .25rem;
  --r-2: .5rem;
  --r-3: .75rem;
  --r-4: 1rem;
  --r-5: 1.5rem;
  --r-6: 2rem;
  --r-7: 3rem;
  --r-8: 4.5rem;
  --abschnitt: clamp(3rem, 7vw, 5.5rem);
  --rand-seite: max(clamp(1rem, 4.5vw, 2rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* Seitenrand (Gutter), nie unter 16 px, im Querformat neben Notch und Kamera */

  /* Maße */
  --huelle: 74rem;           /* breiter Inhaltsrahmen */
  --spalte: 30rem;           /* Lesespalte: höchstens 66 Zeichen je Zeile, gemessen */
  --tipp: max(44px, 2.5rem); /* Mindestgröße für Tippziele */
  --kopf-h: 4rem;
  --leiste-h: 4.6rem;

  /* Radien */
  --rad-s: .4rem;
  --rad-m: .8rem;
  --rad-l: 1.4rem;
  --rad-pille: 99rem;

  /* Schatten (zwei Stufen) */
  --schatten-1: 0 1px 2px rgb(40 28 10 / .12), 0 2px 8px rgb(40 28 10 / .08);
  --schatten-2: 0 4px 12px rgb(40 28 10 / .16), 0 12px 32px rgb(40 28 10 / .14);

  /* Bewegung (KONZEPT-MOTION.md 3.1 und 3.2): eigene Kurven je Art der Bewegung, sieben Dauerstufen. Ruhe schaltet alles ab (rahmen.css). */
  --kurve-gleiten: cubic-bezier(.45, 0, .15, 1);       /* Kamerafahrten und Fortschritt entlang einer Linie */
  --kurve-schieben: cubic-bezier(.25, .85, .3, 1);     /* Tafeln, Haltepunkte, Rand der Kamera: kein Überschwingen */
  --kurve-setzen: cubic-bezier(.3, .9, .3, 1.18);      /* kleine Dinge, die landen (höchstens 2 rem groß) */
  --kurve-fallen: cubic-bezier(.5, 0, .85, .5);        /* Dinge, die fallen oder aus dem Boden steigen */
  --kurve-atmen: cubic-bezier(.37, 0, .63, 1);         /* Licht, Glut, Dämmerung */
  --kurve-zeichnen: cubic-bezier(.35, .15, .3, 1);     /* Linien, die sich ziehen */
  --d-beruehrung: 120ms;                               /* Ring-Anfang, Tastendruck, Hervorheben */
  --d-teil: 240ms;                                     /* Überblendung von Poster und Tafelinhalt, Schleier raus */
  --d-tafel: 420ms;                                    /* Tafel auf Haltepunkt, Rand der Kamera */
  --d-moment: 700ms;                                   /* Ankunft am Ort */
  --d-wechsel: 1200ms;                                 /* Untergrundwechsel, Dämmerung, Jahreszeit */

  /* Namen, die Paket B und S mit Rückfallwerten benutzen: gleiche Werte unter zweitem Namen */
  --farbe-text: var(--tinte);
  --farbe-text-leise: var(--tinte-2);
  --farbe-papier: var(--papier);
  --farbe-flaeche: var(--karte);
  --farbe-flaeche-2: var(--papier-2);
  --farbe-linie: var(--rand);
  --farbe-akzent: var(--akzent);
  --farbe-auf-akzent: var(--papier);   /* Schrift auf --farbe-akzent (Text-Akzent, im dunklen Thema hell): Papierton hat in jedem Thema Kontrast */
  --farbe-fokus: var(--fokus);
  --farbe-akzent-text: var(--papier);
  --farbe-markiert: var(--markierung);
  --farbe-fehler: var(--akzent);
  --farbe-akzent-2: var(--gruen);
  --farbe-ok: var(--gruen);
  --schrift-ueberschrift: var(--schrift-titel);
  --radius: var(--rad-m);
  --kopf-hoehe: var(--kopf-gesamt, var(--kopf-h));   /* Höhe des klebenden Kopfs */

  --linienstaerke: 1px;
  --schrift: 1;
  --leicht: 1;
}

/* ---- Themen. Bei hell und dunkel genügt color-scheme, die Tokens stehen oben als light-dark(). ---- */
html[data-theme="hell"] { color-scheme: light; }
html[data-theme="dunkel"] { color-scheme: dark; }

/* Rückfall für Browser ohne light-dark() (Safari vor 17.5, also iPhones mit iOS 16 und frühem iOS 17, Chrome vor 123):
   dort wären alle Farben oben ungültig und die Seite stünde ohne Papier, Tinte und Akzent da. Dieselben Werte, nur
   ausgeschrieben; Browser mit light-dark() überspringen den Block. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --papier: #f6f0e3;
    --papier-2: #ede4d0;
    --karte: #fbf8f1;
    --karte-2: #fffdf8;
    --tinte: #261f17;
    --tinte-2: #5c5040;
    --rand: #d8cbb0;
    --linie: #85755a;
    --akzent: #a30d0d;
    --akzent-fl: #b80000;
    --gruen: #2d5a3d;
    --gruen-fl: #2d5a3d;
    --ocker: #7a5410;
    --ocker-fl: #e0b04e;
    --info-bg: #e6efe4;
    --achtung-bg: #f7e3d9;
    --markierung: #f3dc9a;
    --glanz-licht: #e0b04e;
    --glanz-wasser: #4f8fb8;
    --glut: #d4601a;
    --nebel: rgb(246 240 227 / .86);
    --schleier-lesen: rgb(246 240 227 / .72);
    --daemmerung: #7d6a8f;
    --fokus: #1a4fa0;
    --schleier: rgb(38 31 23 / .55);
    --verlauf-kopf: rgb(246 240 227 / .92);
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="hell"]):not([data-theme="sepia"]):not([data-theme="kontrast"]) {
      --papier: #1b1712;
      --papier-2: #241e17;
      --karte: #2b241c;
      --karte-2: #332b22;
      --tinte: #f1e9da;
      --tinte-2: #cbbfa9;
      --rand: #43392c;
      --linie: #968770;
      --akzent: #ff9d93;
      --akzent-fl: #c01818;
      --gruen: #8fd0a3;
      --gruen-fl: #2f6a47;
      --ocker: #e2b659;
      --ocker-fl: #e0b04e;
      --info-bg: #1f2f25;
      --achtung-bg: #3a2420;
      --markierung: #5a4614;
      --glanz-licht: #f0c768;
      --glanz-wasser: #8cc4e6;
      --glut: #ff8c3a;
      --nebel: rgb(27 23 18 / .86);
      --schleier-lesen: rgb(27 23 18 / .72);
      --daemmerung: #3a3550;
      --fokus: #9dc1ff;
      --schleier: rgb(0 0 0 / .65);
      --verlauf-kopf: rgb(27 23 18 / .92);
    }
  }
  html[data-theme="dunkel"] {
    --papier: #1b1712;
    --papier-2: #241e17;
    --karte: #2b241c;
    --karte-2: #332b22;
    --tinte: #f1e9da;
    --tinte-2: #cbbfa9;
    --rand: #43392c;
    --linie: #968770;
    --akzent: #ff9d93;
    --akzent-fl: #c01818;
    --gruen: #8fd0a3;
    --gruen-fl: #2f6a47;
    --ocker: #e2b659;
    --ocker-fl: #e0b04e;
    --info-bg: #1f2f25;
    --achtung-bg: #3a2420;
    --markierung: #5a4614;
    --glanz-licht: #f0c768;
    --glanz-wasser: #8cc4e6;
    --glut: #ff8c3a;
    --nebel: rgb(27 23 18 / .86);
    --schleier-lesen: rgb(27 23 18 / .72);
    --daemmerung: #3a3550;
    --fokus: #9dc1ff;
    --schleier: rgb(0 0 0 / .65);
    --verlauf-kopf: rgb(27 23 18 / .92);
  }
}

html[data-theme="sepia"] {
  color-scheme: light;
  --papier: #efe1c0;
  --papier-2: #e5d3a8;
  --karte: #f6ebd1;
  --karte-2: #faf2de;
  --tinte: #3a2a14;
  --tinte-2: #5b4528;
  --rand: #cdb98a;
  --linie: #7c6840;
  --akzent: #8f1a10;
  --akzent-fl: #9c1d12;
  --gruen: #34502f;
  --gruen-fl: #34502f;
  --ocker: #6a4608;
  --info-bg: #dfe3c6;
  --achtung-bg: #ecd0b8;
  --markierung: #e9cf8a;
  --fokus: #1a3f8a;
  --verlauf-kopf: rgb(239 225 192 / .94);
  --nebel: rgb(239 225 192 / .86);
  --schleier-lesen: rgb(239 225 192 / .72);
}

html[data-theme="kontrast"] {
  color-scheme: dark;
  --papier: #000;
  --papier-2: #0d0d0d;
  --karte: #000;
  --karte-2: #0d0d0d;
  --tinte: #fff;
  --tinte-2: #ececec;
  --rand: #fff;
  --linie: #fff;
  --akzent: #ffe14d;
  --akzent-fl: #ffe14d;
  --auf-akzent: #000;
  --gruen: #9be8ab;
  --gruen-fl: #9be8ab;
  --auf-gruen: #000;
  --ocker: #ffd24a;
  --info-bg: #001a0a;
  --achtung-bg: #2a0000;
  --markierung: #ffe14d;
  --auf-markierung: #000;
  --fokus: #5cc8ff;
  --schleier: rgb(0 0 0 / .85);
  /* Kontrastthema: alle Farben der Bewegung wechseln auf Gelb und Weiß, kein Dämmerungsschleier */
  --glanz-licht: #ffe14d;
  --glanz-wasser: #ffe14d;
  --spur: #ffe14d;
  --glut: #ffe14d;
  --daemmerung: transparent;
  --nebel: rgb(0 0 0 / .86);
  --schleier-lesen: rgb(0 0 0 / .85);
  --verlauf-kopf: #000;
  --linienstaerke: 2px;
  --schatten-1: none;
  --schatten-2: none;
}

/* Schriftgröße in vier Stufen: data-schrift 1 bis 4, Standard 2 (18 px) */
html[data-schrift="1"] { --schrift: .9; }
html[data-schrift="3"] { --schrift: 1.15; }
html[data-schrift="4"] { --schrift: 1.3; }

/* Leichte Sprache: etwas größer, mehr Luft */
html[data-leichte-sprache] {
  --leicht: 1.08;
  --zeilenhoehe: 1.8;
}

@media (min-width: 920px) {
  :root { --kopf-h: 4.4rem; }
}

@media print {
  :root { color-scheme: light; --papier: #fff; --tinte: #000; --tinte-2: #333; --karte: #fff; --papier-2: #fff; }
}

@media (prefers-contrast: more) {
  :root { --linienstaerke: 2px; }
}