/* Takoma Marken-Grundlage fuer den Lizenzserver.
 *
 * WARUM ES DIESE DATEI GIBT
 * Bis zum 14.08.2026 hatte jede der sieben Seiten ihr eigenes, von Hand
 * erfundenes Dunkel: buy.html und buy_cnc.html liefen auf einem Verlauf von
 * #0a1020 nach #1a2540, danke.html, agb.html und rechtstext.html auf #0B1020,
 * admin.html auf #0a1020. Keines davon ist eine Markenfarbe. Der Kunde lief
 * damit durch drei verschiedene Blautoene, bevor er beim CNC-Rechner ankam,
 * der wieder ganz anders aussieht.
 *
 * WOHER DIE WERTE STAMMEN
 * Nicht nachempfunden, sondern am 14.08.2026 an der laufenden Anwendung
 * gemessen (cnc-rechner.takoma-digital.com, getComputedStyle). Wer sie
 * aendert, misst vorher dort nach. Der Rechner ist die Vorlage, nicht diese
 * Datei.
 *
 * WAS HIER NICHT HINEINGEHOERT
 * Seitenspezifisches. Diese Datei traegt Farben, Schrift, Flaechen und
 * Knoepfe. Das Raster einer einzelnen Seite bleibt in deren eigener
 * <style>-Insel.
 */

:root {
  /* Markenfarben. Deckungsgleich mit dem CNC-Rechner. */
  --brand-blue:        #356692;
  --brand-blue-dark:   #284e72;
  --brand-blue-light:  #add5f4;
  --brand-blue-tint:   rgba(53, 102, 146, .16);
  --brand-deep:        #252525;
  --brand-neutral:     #ededed;
  --brand-orange:      #f2581b;
  --brand-orange-dark: #d44610;
  --brand-orange-tint: rgba(242, 88, 27, .12);

  /* Flaechen und Text. */
  --card:        rgba(255, 255, 255, .06);
  --card-border: rgba(255, 255, 255, .12);
  --muted:       #aeb4bd;
  --text:        #f3f4f6;

  /* Masse, ebenfalls gemessen. */
  --radius-kachel: 14px;
  --radius-karte:  16px;
  --radius-knopf:  9px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Harmonia, Inter, system-ui, -apple-system, sans-serif;

  /* Die drei Farbschleier sind das Erkennungszeichen des Rechners:
   * Orange oben rechts, Blau unten links, ein heller blauer Hauch auf
   * halber Hoehe links. `fixed` sorgt dafuer, dass sie beim Scrollen
   * stehen bleiben, sonst wandert der Verlauf mit dem Inhalt. */
  background-color: var(--brand-deep);
  background-image:
    radial-gradient(1500px 1000px at 100% -10%, rgba(242, 88, 27, .42), rgba(0, 0, 0, 0) 60%),
    radial-gradient(1900px 1300px at   0% 100%, rgba(53, 102, 146, .62), rgba(0, 0, 0, 0) 60%),
    radial-gradient( 700px  600px at   5%  55%, rgba(173, 213, 244, .18), rgba(0, 0, 0, 0) 70%);
  background-attachment: fixed;
}

/* MARKENSCHRIFTEN, selbst ausgeliefert.
 *
 * Gemessen am 14.08.2026: der CNC-Rechner nannte Cy und Harmonia zwar in
 * font-family, lud aber KEINE davon nach (document.fonts.size === 0). Wer
 * die Schriften auf dem eigenen Rechner installiert hat, sah sie; jeder
 * Kunde sah Inter oder die Systemschrift. Auf takoma-digital.com waren sie
 * dagegen von Anfang an echte Webschriften.
 *
 * Ueber Kreuz laden geht nicht: takoma-digital.com liefert zu den
 * Schriftdateien keinen Access-Control-Allow-Origin-Header, und Webschriften
 * verlangen den zwingend. Deshalb liegen hier eigene Kopien.
 *
 * LIZENZ: Cy und Harmonia Sans sind zugekauft. Web-Lizenzen gelten haeufig
 * je Domain. Dass die Dateien auf takoma-digital.com liegen, deckt
 * license.takoma-digital.com nicht automatisch mit ab. Vor einem groesseren
 * Ausrollen beim Anbieter nachlesen.
 *
 * swap: lieber sofort in der Ersatzschrift lesbar als kurz unsichtbar. */
@font-face {
  font-family: "Cy";
  src: url("/static/schriften/Cy-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "CY Bold";   /* Name, unter dem die Website sie fuehrt */
  src: url("/static/schriften/Cy-Bold.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: "Harmonia";
  src: url("/static/schriften/Harmonia-Sans-W01-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Harmonia";
  src: url("/static/schriften/Harmonia-Sans-W01-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* Ueberschriften laufen in Cy, Fliesstext in Harmonia. */
h1, h2, h3, h4, .kachel-titel, .tile strong {
  font-family: Cy, Inter, system-ui, sans-serif;
  font-weight: 700;
}

a { color: var(--brand-orange); }

.gedaempft { color: var(--muted); }

/* Die normale Flaeche. Der Regelfall. */
.tile {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-kachel);
  padding: 18px;
}

/* Die hervorgehobene Flaeche, orange gerahmt. Sparsam einsetzen: sie ist im
 * Rechner genau EINMAL je Seite vergeben, fuer den wichtigsten Hinweis.
 * Zwei davon nebeneinander heben sich gegenseitig auf. */
.karte-betont {
  background: linear-gradient(90deg, rgba(255, 122, 26, .10), rgba(0, 0, 0, 0));
  border: 1px solid rgba(255, 122, 26, .45);
  border-radius: var(--radius-karte);
  padding: 20px 22px;
}

.knopf {
  display: inline-block;
  background: var(--brand-orange);
  color: #fff;
  border: 0;
  border-radius: var(--radius-knopf);
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { background: var(--brand-orange-dark); }

.knopf-still {
  display: inline-block;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-knopf);
  padding: 10px 20px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.knopf-still:hover { border-color: rgba(242, 88, 27, .45); }

/* Kleine Grossbuchstaben-Marke ueber einem Abschnitt, wie in der
 * Seitenleiste des Rechners ("BEARBEITUNGSVERFAHREN"). */
.abschnitts-marke {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-orange);
}