/* ------------------------------------------------------------------
   Grundgestaltung für alle Seiten: Farben, Schriften, Blatt,
   Schriftfeld, Bemaßungslinie, Fußbereich.

   Warum eine eigene Datei: Startseite und Rechtstexte hatten bis dahin
   je eine eigene Kopie derselben Farbwerte. Zwei Kopien laufen
   auseinander, und man merkt es erst, wenn eine Seite anders aussieht
   als die andere. Was hier steht, gilt überall; was nur eine Seite
   betrifft, steht dort.

   Der Gedanke der Gestaltung ist unverändert: geschriebene Software
   und gedrucktes Bauteil haben gemeinsam, dass sie genau passen
   müssen. Also kein Werbelayout mit Kacheln, sondern ein technisches
   Blatt mit Schriftfeld, Bemaßung und Positionen. Die Farben kommen
   aus der Werkstatt, Graphit und Messing.
   ------------------------------------------------------------------ */

:root {
  /* Minimal ins Warme gezogene Neutraltöne, damit das Messing wie aus
     derselben Familie wirkt und nicht aufgeklebt. */
  --grund:      #EDEBE5;
  --flaeche:    #F8F7F4;
  --tinte:      #17181C;
  --tinte-weich:#54555D;
  --tinte-fein: #8A8B92;
  --linie:      #D4D1C7;
  --linie-fein: #E3E0D8;
  --akzent:     #8A5A12;
  --akzent-hg:  #F1E8D6;
  --auf-akzent: #FFFFFF;
  --warn:       #8C3A1B;

  /* Der Name steht in einer kräftigen Grotesk, der Fließtext in einer
     Serif - umgekehrt zur Gewohnheit bei Technikseiten und der Grund,
     warum die Seite nicht wie eine Vorlage aussieht. */
  --grotesk: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif:   ui-serif, "Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Ein Randmaß für alles: Schriftfeld, Inhalt und Fußbereich stehen
     dadurch auf derselben senkrechten Linie - das ist der halbe
     Unterschied zwischen "gestaltet" und "zusammengesetzt". */
  --rand: clamp(1.25rem, 4vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund:      #131418;
    --flaeche:    #1A1B20;
    --tinte:      #E9E7E1;
    --tinte-weich:#A8A9B0;
    --tinte-fein: #74757D;
    --linie:      #2E2F37;
    --linie-fein: #24252B;
    --akzent:     #D9A441;
    --akzent-hg:  #2A2318;
    --auf-akzent: #131418;
    --warn:       #E08A62;
  }
}

:root[data-theme="dark"] {
  --grund:      #131418;
  --flaeche:    #1A1B20;
  --tinte:      #E9E7E1;
  --tinte-weich:#A8A9B0;
  --tinte-fein: #74757D;
  --linie:      #2E2F37;
  --linie-fein: #24252B;
  --akzent:     #D9A441;
  --akzent-hg:  #2A2318;
  --auf-akzent: #131418;
  --warn:       #E08A62;
}

* { box-sizing: border-box; }

/* Das Blatt füllt mindestens den Bildschirm. `svh` statt `vh`, weil auf
   dem Telefon sonst die eingeblendete Adressleiste mitgerechnet wird
   und unten ein Stück Seite abgeschnitten ist. */
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Der Inhaltsbereich nimmt den Platz, der zwischen Schriftfeld und
   Fußbereich übrig bleibt - damit steht der Fußbereich auf einem
   großen Schirm unten und nicht in der Mitte der Fläche. */
.blatt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 4vw, 3.5rem) var(--rand) 0;
}

/* ---------- Schriftfeld ----------
   Wie der Kopf einer technischen Zeichnung: Bezeichnung links, Angaben
   in der Mitte, Handlung rechts. */

.schriftfeld {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem 2.5rem;
  padding-bottom: 1.5rem;
}

h1 {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

.taetigkeit {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--tinte-weich);
  margin: .7rem 0 0;
  max-width: 34ch;
}

.angaben {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.9;
  color: var(--tinte-fein);
  text-align: right;
  white-space: nowrap;
}
.angaben b {
  display: block;
  font-weight: 400;
  color: var(--tinte-weich);
  letter-spacing: .04em;
}
.angaben span {
  color: var(--tinte-fein);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .64rem;
}

/* Rückweg auf den Unterseiten - oben links, wo auf der Startseite
   nichts steht. Unten wäre er erst nach dem ganzen Text erreichbar. */
.rueck {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
}
.rueck a { color: var(--tinte-fein); text-decoration: none; }
.rueck a:hover { color: var(--akzent); }

/* ---------- Bemaßungslinie ----------
   Dünner Strich mit Endmarken, wie eine Maßangabe in einer Zeichnung.
   Trägt die Seite optisch, ohne Dekor zu sein. Die Beschriftung sitzt
   links, weil rechts die Angaben des Schriftfelds stehen. */

.mass {
  position: relative;
  height: 1px;
  background: var(--linie);
  margin: 1.4rem 0 2.5rem;
  flex: none;
}
.mass::before,
.mass::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--linie);
}
.mass::before { left: 0; }
.mass::after  { right: 0; }
.mass b {
  position: absolute;
  left: 0;
  top: -1.45rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent);
}

a { color: var(--akzent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.klein { font-size: .85rem; color: var(--tinte-fein); }
.mono  { font-family: var(--mono); font-size: .9em; }

/* ---------- Schaltflächen und Wege ---------- */

.weg {
  font-family: var(--grotesk);
  font-size: .9rem;
  font-weight: 560;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.weg svg { width: 1.05em; height: 1.05em; flex: none; }
.weg:hover { border-color: var(--akzent); color: var(--akzent); }
.weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.weg.haupt {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--grund);
  padding: .8rem 1.3rem;
}
.weg.haupt:hover { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

.weg .pfeil { transition: transform .2s; }
[aria-expanded="true"] .pfeil { transform: rotate(180deg); }

/* ---------- Fußbereich ----------
   Vorher eine Zeile mit drei Verweisen, die auf einem breiten Schirm
   wie ein Rest aussah. Jetzt ein eigener Block über die volle Breite,
   der die Seite unten abschließt: Spalten mit Feldbeschriftungen, so
   wie das Schriftfeld oben. */

.fuss {
  flex: none;
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  padding: clamp(2rem, 4vw, 3rem) var(--rand) clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}

.fussraster {
  display: grid;
  /* Die Spalten legen sich selbst um, wenn der Platz nicht reicht -
     keine Zwischenschritte je Bildschirmgröße nötig. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem clamp(2rem, 4vw, 4rem);
}

.fusstitel {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 .8rem;
}

.fussblock ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fussblock li { margin-bottom: .45rem; }
.fussblock a {
  font-family: var(--grotesk);
  font-size: .9rem;
  color: var(--tinte-weich);
  text-decoration: none;
}
.fussblock a:hover { color: var(--akzent); }
.fussblock a[aria-current="page"] { color: var(--akzent); }
/* `:not(.fusstitel)`, weil `.fussblock p` sonst gewichtiger ist als
   `.fusstitel` (Klasse + Element schlaegt Klasse allein) und die
   Spaltentitel ihr Messing verlieren wuerden. */
.fussblock p:not(.fusstitel) { margin: 0 0 .45rem; font-size: .9rem; color: var(--tinte-weich); }

/* p.name statt .name: dieselbe Gewichtung wie die Regel oben, und weil sie
   danach steht, gewinnt sie. */
.fussmarke p.name {
  font-family: var(--grotesk);
  font-weight: 660;
  font-size: 1rem;
  color: var(--tinte);
  letter-spacing: -.015em;
}

/* Die Schlusszeile sitzt unter den Spalten, abgesetzt durch eine feine
   Linie - sie gehört zum Fußbereich, ist aber keine Spalte. */
.fussschluss {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie-fein);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--tinte-fein);
}
.fussschluss .rechts { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

@media (max-width: 40rem) {
  .schriftfeld { grid-template-columns: 1fr; align-items: start; }
  .angaben { text-align: left; }
}