/* ===========================================================================
   CrateSync — gemeinsame Grundlage
   ---------------------------------------------------------------------------
   Bis hierher trug jede der sechs Seiten ihren eigenen <style>-Block mit einer
   eigenen Kopie derselben Werte. Den Orangeton zu aendern hiess: sechs Dateien
   anfassen und hoffen, keine zu vergessen. Kopfleiste und Fuss waren dabei
   bereits auseinandergelaufen — es gab drei Fassungen von "footer" und drei
   von ".footer-logo".

   Hier steht jetzt genau das, was auf allen sechs Seiten gleich ist. Was eine
   Seite anders braucht, steht weiterhin bei ihr und ueberschreibt von hier —
   die Startseite haelt ihre Kopfleiste zum Beispiel fest am oberen Rand, die
   Unterseiten lassen sie mitlaufen.
   =========================================================================== */

:root {
  /* --- Gemeinsamer Wertesatz beider Seiten --------------------------------
     Dieselben Werte stehen in der style.css von bornd-fono.de. Wird hier
     etwas geaendert, gehoert es auch dorthin.

     Ein Orange in drei Rollen statt Toenen ohne Zustaendigkeit. Alle drei
     haben denselben Farbwinkel (23 Grad). Die Zahlen dahinter sind
     Kontrastverhaeltnisse: 4,5 ist die Schwelle fuer normale Schrift,
     3,0 genuegt bei grosser fetter Schrift ab 18,66 Pixel.                 */
  --orange:      #E8600A;   /* Akzent und grosse Flaechen
                               5,65 auf --bg,  3,44 mit weisser Schrift     */
  --orange-fill: #C04A00;   /* Flaechen mit kleiner weisser Schrift
                               4,98 mit Weiss                               */
  --orange-ink:  #F7843B;   /* Verweise und Kleintext auf dunklem Grund
                               7,70 auf --bg                                */

  --bg:          #0d0d0d;
  --bg-card:     #141414;
  --bg-card2:    #1a1a1a;
  --border:      rgba(255,255,255,0.07);
  --text:        #f0efed;   /* warmes Gebrochenweiss, 16,9 auf --bg         */
  --muted:       #888;
  --orange-glow: rgba(232,96,10,0.35);

  --font:        Verdana, Geneva, Tahoma, sans-serif;

  /* Rundungen in drei Stufen 4/8/12. Dasselbe Prinzip wie
     auf bornd-fono.de — eine kleine Stufe fuer Bedienelemente, eine grosse
     fuer Flaechen. Die Zahlen sind kleiner, weil diese Seite mit 16px
     Grundgroesse laeuft und die andere mit 18,7px.                       */
  --radius-s:    4px;       /* kleine Marken: Abzeichen, Farbfelder          */
  --radius-m:    8px;       /* Knoepfe und Bedienelemente                    */
  --radius-l:    12px;      /* Karten und Kaesten                            */
}

/* Nullstellung */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* --- Kopfleiste ---------------------------------------------------------- */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.nav-wordmark {
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.nav-wordmark span {
  color: var(--orange);
}

.nav-back {
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.nav-back:hover {
  color: var(--orange);
}

/* --- Fussbereich --------------------------------------------------------- */
footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
}

.footer-logo span:not(.footer-by) {
  color: var(--orange);
}

.footer-by {
  font-weight: 400;
  color: #999;
}

/* Der Verweis auf die Seite des Entwicklers traegt dieselbe Zeichnung wie die
   Wortmarke daneben: erster Teil hell, zweiter orange. Die feine Linie darunter
   macht ihn als Verweis erkennbar.                                          */
.footer-by a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(232,96,10,0.35);
  transition: border-color 0.2s;
}

.footer-by a span {
  color: var(--orange);
}

.footer-by a:hover {
  border-bottom-color: var(--orange);
}

.footer-credit {
  font-size: 0.9rem;
  color: #999;
  max-width: 560px;
  line-height: 1.7;
  border-top: 1px solid rgba(232,96,10,0.35);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.footer-credit em {
  font-style: italic;
  color: #aaa;
}

.footer-legal {
  font-size: 0.72rem;
  color: var(--muted);
}

.footer-legal a {
  color: var(--muted);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--orange);
}