/* Developed by Enjyn Gruppe — https://enjyn.de */

/* Alle Farben laufen über Rollen, nie über feste Werte: eine neue Farbwelt ist damit
   dieser eine Block statt einer Suche durch die Stilblätter.

   Die Welt heißt Werkstatt: warmes Leinenpapier statt kühlem Weiß, bräunliche Tinte,
   das Markengrün satt als Siegelfarbe. Zwei weitere Entwürfe (hell-kühl und dunkel)
   liegen im Entwurfsordner, falls wir sie noch einmal brauchen. */
:root {
  --grund:        #F3EFE8;
  --grund-tief:   #E8E2D6;
  --karte:        #FCFAF6;
  --karte-hervor: #F8F4EC;
  --text:         #1F1C17;
  --text-weich:   #4C4438;
  --text-fein:    #574F42;
  --linie:        #DED5C6;
  --linie-stark:  #BCB2A0;
  --siegel:       #15624A;
  --siegel-tief:  #0F4E3A;
  --siegel-fein:  rgba(21,98,74,.08);
  --auf-siegel:   #FFFFFF;
  --achtung:      #96450F;
  --auf-achtung:  #FFFFFF;
  --achtung-fein: rgba(150,69,15,.09);
  --alarm:        #92241E;
  --alarm-fein:   rgba(146,36,30,.09);
  --kehr-grund:   #221F19;
  --kehr-text:    #F7F3EB;
  --kehr-weich:   #C0B6A4;
  --kehr-linie:   #3B352B;
  --kehr-akzent:  #86CCA8;
  --raster:       rgba(34,31,25,.1);
  --raster-fein:  rgba(34,31,25,.05);
  --schatten:     0 1px 2px rgba(34,31,25,.05), 0 10px 28px -14px rgba(34,31,25,.2);
  color-scheme: light;
}

/* Dunkel, aber nicht als Neon auf Schwarz: gedämpftes Blaugrün, Flächen mit Abstufung
   statt Leuchträndern. Der Nachweis-Abschnitt kehrt sich hier ins Helle um. */

:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --disp: "Bricolage Grotesque", "Manrope", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--grund); color: var(--text);
  font-family: "Manrope", system-ui, sans-serif; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}
.bahn { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px) { .bahn { padding: 0 18px; } }

/* Werkstatt bei Nacht. Nicht Schwarz mit Neon, sondern dieselbe Werkstatt bei Lampenlicht:
   warmes Dunkelbraun statt Blauschwarz, das Grün etwas heller, damit es trägt. Der
   Nachweis-Abschnitt kehrt sich um und liegt hell im Dunkeln, wie ein Blatt unter der Lampe.

   Gilt nach der Einstellung des Geräts, oder wenn jemand im Kopf der Seite umschaltet. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:        #15120D;
    --grund-tief:   #100E09;
    --karte:        #1E1A14;
    --karte-hervor: #262118;
    --text:         #F3EEE4;
    --text-weich:   #C2B8A6;
    --text-fein:    #ADA390;
    --linie:        #2F2A22;
    --linie-stark:  #4A4337;
    --siegel:       #5BBE93;
    --siegel-tief:  #74D0A8;
    --siegel-fein:  rgba(91,190,147,.14);
    --auf-siegel:   #0A2318;
    --achtung:      #E0A061;
    --auf-achtung:  #241403;
    --achtung-fein: rgba(224,160,97,.15);
    --alarm:        #EC8278;
    --alarm-fein:   rgba(236,130,120,.15);
    --kehr-grund:   #F3EFE8;
    --kehr-text:    #1F1C17;
    --kehr-weich:   #4C4438;
    --kehr-linie:   #DED5C6;
    --kehr-akzent:  #15624A;
    --raster:       rgba(243,238,228,.07);
    --raster-fein:  rgba(243,238,228,.035);
    --schatten:     0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-thema="dunkel"] {
  --grund:        #15120D;
  --grund-tief:   #100E09;
  --karte:        #1E1A14;
  --karte-hervor: #262118;
  --text:         #F3EEE4;
  --text-weich:   #C2B8A6;
  --text-fein:    #ADA390;
  --linie:        #2F2A22;
  --linie-stark:  #4A4337;
  --siegel:       #5BBE93;
  --siegel-tief:  #74D0A8;
  --siegel-fein:  rgba(91,190,147,.14);
  --auf-siegel:   #0A2318;
  --achtung:      #E0A061;
  --auf-achtung:  #241403;
  --achtung-fein: rgba(224,160,97,.15);
  --alarm:        #EC8278;
  --alarm-fein:   rgba(236,130,120,.15);
  --kehr-grund:   #F3EFE8;
  --kehr-text:    #1F1C17;
  --kehr-weich:   #4C4438;
  --kehr-linie:   #DED5C6;
  --kehr-akzent:  #15624A;
  --raster:       rgba(243,238,228,.07);
  --raster-fein:  rgba(243,238,228,.035);
  --schatten:     0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.7);
  color-scheme: dark;
}