/*
  Rams/Braun-Datenblatt-Richtung, gemeinsames Stylesheet fuer alle
  donkeystudio.de-Seiten (index.html, datenschutz.html).
  Kein Hero-Grid, sondern ein technisches Datenblatt / eine Bedienungs-
  anleitung fuer ein fiktives Braun-Geraet "Donkeystudio DS-01".
  Spec-Tabellen, Modellbeschriftung, Lineal-Ticks am Rand, ein
  schematisches Liniendiagramm statt Foto/Illustration. Terrakotta
  (--needle) wird bewusst sparsam wie eine Markierung auf einer Skala
  eingesetzt, nicht als Deko-Farbe.

  Schriften lokal eingebunden (kein Google-Fonts-Request vom Besucher-
  Browser aus) - passend zum eigenen Datenschutzanspruch der Seite.
*/
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-700.woff2') format('woff2');
}

:root{
  --case:#3A332C;        /* Aussenflaeche/Gehaeuse */
  --dial:#EDE7DA;        /* "Papier"-/Zifferblattflaeche des Datenblatts */
  --needle:#C1502E;      /* einzige Signalfarbe */
  --scale-line:#B9AF9C;  /* Skalenstriche/Lineal */
  --text-dim:#8C8371;    /* technische Kleinbeschriftung */
  --status-fresh:#6B8F53;
  --status-stale:#C1502E;
  --hairline:rgba(58,51,44,0.16);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--case);
  color:var(--case);
  font-family:'Space Grotesk', sans-serif;
  line-height:1.55;
}

/* Lineal-Rand links/rechts am Bildschirmrand, wie die Skala am Gehaeuserand
   eines Messgeraets. Rein dekorativ, blendet auf schmalen Screens aus. */
body::before, body::after{
  content:"";
  position:fixed;
  top:0; bottom:0;
  width:22px;
  background-image: repeating-linear-gradient(180deg, var(--scale-line) 0 1px, transparent 1px 22px);
  opacity:0.22;
  pointer-events:none;
  z-index:0;
}
body::before{ left:0; }
body::after{ right:0; }
@media (max-width: 720px){
  body::before, body::after{ display:none; }
}

.page{
  position:relative;
  z-index:1;
  padding: clamp(24px, 5vw, 56px) 22px;
  display:flex;
  justify-content:center;
}

/* Das Datenblatt selbst: helle Zifferblatt-Flaeche auf dunklem Gehaeuse */
.sheet{
  position:relative;
  width:100%;
  max-width:860px;
  background:var(--dial);
  color:var(--case);
  border-radius:4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.35), 0 24px 60px rgba(0,0,0,0.35);
  padding: clamp(28px, 5vw, 56px);
}

/* Registrierkreuze an den Ecken, wie Passermarken auf einem technischen Blatt */
.sheet::before, .sheet::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  pointer-events:none;
}
.sheet::before{ top:-1px; left:-1px; border-top:2px solid var(--needle); border-left:2px solid var(--needle); }
.sheet::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--needle); border-right:2px solid var(--needle); }

/* Skalenstrich-Trenner zwischen Abschnitten */
.tick-rule{
  height:9px;
  margin: 40px 0;
  background-image: repeating-linear-gradient(90deg, var(--scale-line) 0 1px, transparent 1px 18px);
  opacity:0.55;
}

/* ---------- Kopf / Typenschild ---------- */
.nameplate{
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}

.logo-badge{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--case);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
  background:#000;
  flex-shrink:0;
}

.nameplate-text{
  flex:1 1 240px;
  min-width:0;
}

.nameplate-text h1{
  margin:0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight:700;
  letter-spacing:0.01em;
}

.nameplate-text .claim{
  margin:6px 0 0;
  color:var(--text-dim);
  font-size:0.98rem;
}

.nameplate-text .claim a{
  color:var(--needle);
  text-decoration:underline;
  text-decoration-color:rgba(193,80,46,0.4);
}

.placeholder{
  color:var(--needle);
}

.nameplate-spec{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  font-family:'Space Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.06em;
  color:var(--text-dim);
  text-transform:uppercase;
  padding-top:6px;
}

/* ---------- Abschnitte ---------- */
.datasheet-section h2{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 18px;
  font-size:1rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.09em;
}

.sec-no{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--dial);
  background:var(--needle);
  padding:3px 8px;
  border-radius:2px;
}

.datasheet-section p{
  max-width:60ch;
  font-size:0.98rem;
  color:var(--case);
}

.datasheet-section p.footnote{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  color:var(--text-dim);
  letter-spacing:0.01em;
  max-width:70ch;
}

.datasheet-section h3{
  margin: 28px 0 8px;
  font-size:0.86rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--case);
}

.datasheet-section ul{
  margin: 0 0 16px;
  padding-left: 1.1em;
  max-width:62ch;
}

.datasheet-section li{
  font-size:0.94rem;
  margin-bottom:6px;
}

/* ---------- Spezifikations-Tabelle ---------- */
.spec-table{
  margin: 22px 0 0;
  display:flex;
  flex-direction:column;
}

.spec-table .row{
  display:grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--hairline);
}

.spec-table .row:first-child{ border-top:1px solid var(--hairline); }

.spec-table dt{
  margin:0;
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  padding-top:2px;
}

.spec-table dd{
  margin:0;
  font-size:0.94rem;
  color:var(--case);
}

.spec-table dd a{
  color:var(--needle);
  text-decoration:underline;
  text-decoration-color:rgba(193,80,46,0.4);
}

@media (max-width:520px){
  .spec-table .row{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- Statusanzeige "Aktuelle Tour" ---------- */
.status-readout{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  background:rgba(58,51,44,0.05);
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:20px 22px;
}

.status-dot{
  width:13px;
  height:13px;
  border-radius:50%;
  flex-shrink:0;
}

.status-readout.is-fresh .status-dot{
  background:var(--status-fresh);
  box-shadow:0 0 0 5px rgba(107,143,83,0.16);
}

.status-readout.is-stale .status-dot{
  background:var(--status-stale);
  box-shadow:0 0 0 5px rgba(193,80,46,0.16);
}

.status-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-right:auto;
}

.status-text .status-label{
  font-family:'Space Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.status-text .status-value{
  font-family:'Space Mono', monospace;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.03em;
}

.status-readout.is-fresh .status-value{ color:var(--status-fresh); }
.status-readout.is-stale .status-value{ color:var(--status-stale); }

.live-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--case);
  color:var(--dial);
  text-decoration:none;
  font-family:'Space Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:11px 18px;
  border-radius:2px;
  white-space:nowrap;
}

.live-link:hover{ background:var(--needle); }

/* ---------- Schematische Liniengrafik ---------- */
.schematic{
  width:100%;
  height:auto;
  margin:26px 0 6px;
  display:block;
}

.schematic text{
  font-family:'Space Mono', monospace;
  font-size:9px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  fill:var(--text-dim);
}

.schematic .node{
  fill:var(--dial);
  stroke:var(--case);
  stroke-width:1.5;
}

.schematic .node-active{
  fill:var(--needle);
  stroke:var(--case);
}

.schematic .wire{
  fill:none;
  stroke:var(--scale-line);
  stroke-width:1.5;
}

.schematic .wire-live{
  stroke:var(--needle);
  stroke-dasharray:4 3;
}

/* ---------- Fusszeile / Colophon ---------- */
.colophon{
  margin-top:44px;
  padding-top:16px;
  border-top:1px dashed var(--hairline);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  font-family:'Space Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.colophon a{
  color:var(--text-dim);
  text-decoration:underline;
  text-decoration-color:var(--hairline);
}

.colophon .rams-quote{
  flex:1 1 100%;
  text-transform:none;
  letter-spacing:0.01em;
  margin-top:10px;
  font-style:italic;
  color:var(--text-dim);
}