/* ==========================================================================
   Standortförderung Zürioberland — Corporate Design für den BILDSCHIRM

   ⚠️ ABGELEITET, NICHT ABGESEGNET.
   Das CD Manual v2.1 regelt Print und Office. Für Web sagt es nichts —
   der Skill szo-brand hält das ausdrücklich als Lücke fest («Farbgeltung
   ausserhalb von Office: ungeklärt», «Social-Media-Layouts: nur Icons
   geregelt»). Alles hier ist aus den Print-Regeln übertragen, nicht
   bestätigt. Vor einem produktiven Einsatz mit der SZO gegenlesen.

   Was übernommen wurde, mit Quelle:
   - Die Marke ist schwarzweiss. Farbe nur als Akzent in Daten.   (Manual S. 2)
   - Titelschrift ausschliesslich Versalien, Laufweite 40,
     Wortabstände −100.                                          (Manual S. 13)
   - Logo nur 100 % Schwarz oder Weiss, nie eingefärbt.           (Manual S. 4)
   - Hyperlinks bleiben schwarz, nie farbig ausgezeichnet.        (PPT-Theme)
   - Schriftrollen: Zürioberland für Titel, Frutiger für Lauftext,
     Tiempos nur für Lead und Zitat.                       (szo-brand SKILL.md)

   Was neu entschieden werden musste (steht so nirgends):
   - Mobile-First. Gescannt wird mit dem Handy, nicht am Desktop.
   - Schriftgrössen in rem statt pt, weil ein Bildschirm kein Papier ist.
   - Ein Datenblock mit Linien statt einer Tabelle — Tabellen sind auf
     360 px Breite unlesbar.
   ========================================================================== */

/* ---- Schriften. Liegen bei, niemand muss etwas installieren. ------------- */
@font-face {
  font-family: 'Zuerioberland';
  src: url('fonts/Zuerioberland-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Frutiger LT Pro 47 Light Cn';
  src: url('fonts/frutiger-47-light-cn.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frutiger LT Pro 47 Light Cn';
  src: url('fonts/frutiger-67-bold-cn.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text Regular';
  src: url('fonts/tiempos-text-regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  --szo-titel: 'Zuerioberland', Arial, Helvetica, sans-serif;
  --szo-text:  'Frutiger LT Pro 47 Light Cn', Arial, Helvetica, sans-serif;
  --szo-serif: 'Tiempos Text Regular', 'Times New Roman', Times, serif;

  --szo-schwarz: #000;
  --szo-weiss:   #fff;
  --szo-linie:   #595959;   /* 65 % Schwarz, der einzige erlaubte Linienton */
  --szo-grau:    #808080;
  --szo-grau-hell: #b9b9b9;

  /* Akzente in Theme-Reihenfolge — nur für Daten, nie für Flächen oder Text */
  --szo-akzent-1: #c9d2c0;  --szo-akzent-2: #dcafac;  --szo-akzent-3: #f8e6ae;
  --szo-akzent-4: #bac1d1;  --szo-akzent-5: #ae92a0;  --szo-akzent-6: #cbe2f8;

  --rand: 22px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--szo-text);
  letter-spacing: .015em;
  font-size: 1rem; line-height: 1.5;
  color: var(--szo-schwarz);
  background: var(--szo-weiss);
  -webkit-text-size-adjust: 100%;
}

.huelle { max-width: 640px; margin: 0 auto; padding: 0 var(--rand) 64px; }

/* ---- Kopf: schwarze Fläche, Logo negativ -------------------------------- */
.kopf {
  background: var(--szo-schwarz);
  padding: 20px var(--rand) 22px;
  margin-bottom: 28px;
}
.kopf__innen { max-width: 640px; margin: 0 auto; }
.kopf__logo  { width: 74px; display: block; filter: invert(1); }
.kopf__zeile {
  color: var(--szo-weiss); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; margin-top: 14px;
}

/* ---- Titel: nur Versalien, das ist die härteste Regel des CI ------------- */
h1, h2, .titel {
  font-family: var(--szo-titel); font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em; word-spacing: -.1em;
  line-height: 1; margin: 0;
}
h1 { font-size: clamp(2rem, 9vw, 3rem); }
h2 { font-size: 1.15rem; margin: 36px 0 14px; }

.menge {
  font-family: var(--szo-text); font-size: 1rem; letter-spacing: .015em;
  text-transform: none; color: var(--szo-grau); margin-top: 10px;
}

/* ---- Lead: die einzige Stelle für Tiempos ------------------------------- */
.lead {
  font-family: var(--szo-serif);
  font-size: 1.2rem; line-height: 1.45; letter-spacing: .01em;
  margin: 20px 0 0;
}

p { margin: 0 0 14px; }
a { color: var(--szo-schwarz); }           /* Links nie farbig */

hr {
  border: 0; border-top: 1px solid var(--szo-linie);
  margin: 26px 0;
}

/* ---- Der Datenblock aus dem Code ----------------------------------------
   Das Herzstück der Seite: hier steht, was der gescannte Code mitgebracht
   hat. Bewusst keine Tabelle — auf 360 px Breite bricht sie auseinander. */
.daten { margin: 4px 0 0; }
.daten__zeile {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--szo-grau-hell);
}
.daten__zeile:first-child { border-top: 1px solid var(--szo-grau-hell); }
.daten__titel { color: var(--szo-grau); flex: 0 0 auto; }
.daten__wert  { font-weight: 700; text-align: right; }
.daten__wert--warnung { color: var(--szo-schwarz); }
.daten__code {
  font-size: .7rem; color: var(--szo-grau-hell); letter-spacing: .04em;
  display: block; font-weight: 400;
}

.hinweis {
  border-left: 3px solid var(--szo-linie);
  padding: 10px 0 10px 14px; margin: 20px 0;
  font-size: .875rem;
}
.hinweis--warnung { border-left-color: var(--szo-schwarz); }

/* ---- Simulator ---------------------------------------------------------- */
.feld { margin-bottom: 22px; }
.feld > label {
  display: block; font-weight: 700; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}
input[type="text"] {
  width: 100%; font-family: var(--szo-text); font-size: 1.05rem;
  letter-spacing: .015em; padding: 11px 12px;
  border: 1px solid var(--szo-linie); border-radius: 0;
  background: var(--szo-weiss); color: var(--szo-schwarz);
}
input[type="range"] { width: 100%; accent-color: var(--szo-schwarz); }
select {
  width: 100%; font-family: var(--szo-text); font-size: 1.05rem;
  padding: 11px 12px; border: 1px solid var(--szo-linie);
  border-radius: 0; background: var(--szo-weiss);
}
.reglerwert { font-weight: 700; margin-top: 8px; }

.qr {
  text-align: center; padding: 26px 0 10px;
  border: 1px solid var(--szo-grau-hell); margin-top: 8px;
}
.qr img, .qr canvas, .qr table { width: min(260px, 70vw); height: auto; image-rendering: pixelated; }
.qr__link {
  font-size: .7rem; color: var(--szo-grau); word-break: break-all;
  padding: 14px var(--rand) 0; line-height: 1.4;
}

.knopf {
  display: inline-block; font-family: var(--szo-titel); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; word-spacing: -.1em;
  background: var(--szo-schwarz); color: var(--szo-weiss);
  border: 1px solid var(--szo-schwarz); padding: 13px 22px;
  text-decoration: none; cursor: pointer; font-size: .9rem;
}
.knopf--hell { background: var(--szo-weiss); color: var(--szo-schwarz); }

/* ---- Fuss: nennt Betreiber und Auftraggeber -----------------------------
   Pflicht, nicht Kür. Eine unbekannte Domain in der Adresszeile ist
   ausgerechnet bei einer Rückverfolgbarkeits-Demo heikel — hier steht,
   wer dahinter steht, bevor jemand fragen muss. */
.fuss {
  margin-top: 44px; padding-top: 18px;
  border-top: 1px solid var(--szo-grau-hell);
  font-size: .75rem; color: var(--szo-grau); line-height: 1.6;
}
.fuss strong { color: var(--szo-schwarz); }

/* ---- Druck: der Flyer zum Mitnehmen ------------------------------------- */
@media print {
  @page { size: A4; margin: 18mm 20mm; }
  .kopf { background: none; padding: 0 0 8mm; }
  .kopf__logo { filter: none; width: 20mm; }
  .kopf__zeile { color: var(--szo-schwarz); }
  .nicht-drucken { display: none !important; }
  .huelle { max-width: none; padding: 0; }
  body { font-size: 10pt; line-height: 14pt; }
  h1 { font-size: 38pt; }
  .qr { border: 0; }
  .qr img, .qr canvas, .qr table { width: 45mm; }
}