/* ==========================================================================
   KIE Engineering — Stylesheet
   Gestaltungsidee: technisches Datenblatt, gedruckt als Blaupause.
   Tiefe Petrolbänder (Titelleiste, Auftakt, ausgewählte Abschnitte,
   Schriftfeld) wechseln sich mit hellem Zeichnungspapier ab. Bernstein/Gold
   ist ausschliesslich Signalfarbe: Preise, Aktionen, Anrisslinien.
   Monospace ausschliesslich für echte technische Daten.
   ========================================================================== */

:root {
  /* Helles Papier — der ruhige Grundzustand */
  --ink:        #16242b;   /* Tiefes Petrol, Zeichnungstinte */
  --ink-weich:  #5c6b71;   /* Nebentext */
  --papier:     #eff1f0;   /* Kühles Zeichnungspapier */
  --papier-neu: #f8f9f8;   /* Aufgehellte Fläche */
  --linie:      #b9c4c7;   /* Hilfslinien, Bemassung */
  --rahmen:     #16242b;   /* Kräftige Konstruktionslinie (Rahmen, Kopfzeile) */
  --signal:     #1b6e9c;   /* Instrumentenblau, Links */
  /* Bernstein auf hellem Papier: bewusst dunkler als der Marken-Ton #b8720a,
     sonst hält Preistext die geforderten 4.5:1 nicht (3.4:1 wären zu wenig). */
  --bernstein:  #9a5f08;   /* Preise, Hervorhebung */

  /* Blaupause — die dunklen Bänder */
  --tief:       #0d1f28;   /* Nachtblau-Petrol, deutlich tiefer als --ink */
  --tief-fuss:  #0a1a22;   /* Schriftfeld sitzt eine Stufe tiefer */
  --kante:      rgba(214, 138, 48, 0.38);  /* Blattkante zwischen den Bändern */

  /* Marken-Gold für Flächen (Aktion). Beide Töne tragen dunklen Text. */
  --gold:       #d68a30;   /* Laub-Gold des Lebensbaums */
  --gold-hell:  #efa94f;

  --mass-inhalt: 62rem;
  --mass-text:   34rem;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.75rem;
  --s-4: 3rem;
  --s-5: 5rem;
  --s-6: 7.5rem;
}

/* --- Dunkel-Kontext ------------------------------------------------------
   Ein Band dreht die Töne um. Alle Bausteine (Spezifikation, Tabelle,
   Ablauf, Aktion, Schriftfeld) lesen dieselben Variablen — deshalb genügt
   es, sie hier neu zu belegen, statt jede Regel ein zweites Mal zu schreiben.
   -------------------------------------------------------------------------- */

.dunkel, .kopf, .fuss {
  --ink:        #eef3f4;   /* 15.1:1 auf --tief */
  --ink-weich:  #93a9b0;   /*  6.9:1 auf --tief */
  --papier:     var(--tief);
  --papier-neu: rgba(255, 255, 255, 0.055);
  --linie:      rgba(255, 255, 255, 0.20);
  --rahmen:     rgba(255, 255, 255, 0.32);
  --signal:     #5fb0ea;   /*  7.1:1 — das Marken-Blau #2f87cc aufgehellt */
  --bernstein:  #e0952f;   /*  6.8:1 — Laub-Gold, trägt hier den Preis */
  color: var(--ink);
  background-color: var(--tief);
}

/* Millimeterpapier: zwei Raster übereinander, fein und sehr zurückhaltend.
   Nur auf den dunklen Flächen, das helle Papier bleibt leer. */
.dunkel {
  background-image:
    /* Licht von oben, damit das Band nicht wie ein toter schwarzer Kasten wirkt */
    linear-gradient(180deg, rgba(95, 176, 234, 0.075), transparent 260px),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: auto, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: 0 0;
  border-top: 1px solid var(--kante);
}

/* Lebendiger Grund (Ivo 10.09.2026: «noch ein animierter Hintergrund»).
   Das Millimeterpapier wandert sehr langsam schraeg durch — 100 px in 90 s,
   also gut eine Rasterzelle pro anderthalb Minuten. Man sieht es kaum, man
   spuert es. Beide Raster legen im selben Takt dieselbe Strecke zurueck,
   darum schliesst die Schleife nahtlos. */
@keyframes raster-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 100px 100px, 100px 100px, 100px 100px, 100px 100px; }
}
.dunkel { animation: raster-drift 90s linear infinite; }

/* Die Leinwand mit den aufsteigenden Nullen und Einsen liegt hinter dem
   Inhalt; sie faengt keine Klicks ab und traegt keine Information. */
.band-auftakt { position: relative; isolation: isolate; }
.band-auftakt > .huelle { position: relative; z-index: 1; }
.datenfluss {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Auftaktband zusaetzlich: der blaue Schein hinter dem Baum wandert ueber
   90 s ein Stueck nach links und wieder zurueck — als atme das Licht. Eigene
   Schleife, weil hier fuenf Ebenen mit einem Verlauf davor liegen. */
@keyframes raster-drift-auftakt {
  0%   { background-position: 0 0,      0 0,           0 0,           0 0,           0 0; }
  50%  { background-position: -34px 9px, 50px 50px,    50px 50px,     50px 50px,     50px 50px; }
  100% { background-position: 0 0,      100px 100px,  100px 100px,   100px 100px,   100px 100px; }
}
.band-auftakt { animation: raster-drift-auftakt 90s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .dunkel, .band-auftakt { animation: none; }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
}

/* --- Grundtypografie ---------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.2vw, 4.1rem); font-weight: 700; letter-spacing: -0.018em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.24rem; }
h4 { font-size: 1.02rem; font-weight: 600; }

/* Anrisslinie über jedem Abschnittstitel — der Bernstein wiederholt sich
   als kurzer Strich und hält Hell und Dunkel zusammen. */
h2::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--bernstein);
  margin-bottom: 0.85rem;
}

p, li { max-width: var(--mass-text); }
p { margin: 0 0 var(--s-2); }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

strong { font-weight: 600; }

.daten {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--ink-weich);
}

.fuehrend { font-size: 1.15rem; line-height: 1.55; color: var(--ink); max-width: 40rem; }

/* --- Gerüst ------------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--mass-inhalt);
  margin: 0 auto;
  padding: 0 var(--s-3);
}

section { padding: var(--s-5) 0; }
section + section { border-top: 1px solid var(--linie); }

/* --- Kopfzeile: die Titelleiste der Zeichnung --------------------------- */

.kopf {
  border-bottom: none;
  background: var(--tief);
  position: sticky;
  top: 0;
  z-index: 20;
}

.kopf-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}

.marke {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
/* Lebensbaum: das Firmenzeichen. Blau, Grün und Bernstein des Baums sind
   dieselben Töne wie --signal und --bernstein — auf dem tiefen Petrol steht
   er frei und leuchtet, statt auf dem hellen Papier zu verblassen. */
.marke-baum { width: 34px; height: 34px; display: block; flex: none; }
/* Zwei Spannen im Markenblock: die Regel .marke span (Mono, klein) gilt fuer
   den Zusatz «Einzelfirma, Thurgau» — der Firmenname holt sich die Schrift
   der Marke zurueck (hoehere Spezifitaet, sonst gewinnt .marke span). */
.marke .marke-name {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.marke span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ink-weich);
  letter-spacing: 0.02em;
}

.navi { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.navi a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.97rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.navi a:hover { color: var(--ink); border-bottom-color: var(--linie); }
/* Aktuelle Seite in Bernstein — dieselbe Signalfarbe wie Preis und Aktion. */
.navi a[aria-current="page"] { border-bottom-color: var(--bernstein); }

/* --- Auftakt ------------------------------------------------------------ */

.band-auftakt {
  /* Schein hinter dem Baum: das Marken-Blau als Lichtquelle über dem Raster. */
  background-image:
    radial-gradient(115% 85% at 78% 12%, rgba(47, 135, 204, 0.20), transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: auto, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* Nur oben und unten setzen: die Kurzform «padding» hat vorher die seitliche
   Polsterung von .huelle geloescht — die Schlagzeile stand dadurch 28 px
   neben der Flucht aller anderen Abschnitte und auf dem Handy an der Kante. */
.auftakt { padding-top: var(--s-6); padding-bottom: var(--s-5); position: relative; }
/* Grosser Baum als stiller Begleiter der Schlagzeile — auf schmalen
   Bildschirmen weg, damit der Text die Fläche behält. */
.auftakt-baum {
  position: absolute;
  right: 0;
  top: calc(var(--s-5) * 0.6);
  width: min(30vw, 300px);
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 0 34px rgba(47, 135, 204, 0.30));
  pointer-events: none;
}
@media (max-width: 62rem) { .auftakt-baum { display: none; } }
.auftakt h1 { max-width: 18ch; margin-bottom: var(--s-3); }

/* Bemassungslinie: das eine auffällige Element der Seite. Auf dem tiefen
   Grund liegt sie hell, wie mit Silberstift gezogen. */
.bemassung {
  margin: var(--s-3) 0 var(--s-4);
  max-width: 40rem;
}
.bemassung svg { display: block; width: 100%; height: 26px; overflow: visible; }
.bemassung line, .bemassung path { stroke: var(--linie); stroke-width: 1; }
.dunkel .bemassung line, .dunkel .bemassung path { stroke: rgba(255, 255, 255, 0.55); }
.bemassung text {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  fill: var(--ink-weich);
}
.dunkel .bemassung text { fill: #b9cbd1; }   /* 10.1:1 — Mass-Text bleibt lesbar */
.bemassung .zug { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: zeichnen 1.1s ease-out 0.15s forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

/* --- Spezifikationsliste ------------------------------------------------ */

.spezifikation { border-top: 1px solid var(--rahmen); margin: 0; }
.spezifikation > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0 var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--linie);
  align-items: start;
}
/* Positionsnummern und Feldnamen in Instrumentenblau — so trägt auch das
   helle Papier eine Markenfarbe, ohne dass Fliesstext bunt wird. */
.spezifikation dt { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; color: var(--signal); padding-top: 0.35rem; }
.spezifikation dd { margin: 0; }
.spezifikation dd p:last-child { margin-bottom: 0; }
.spezifikation h3 { margin-bottom: 0.4rem; }

@media (max-width: 40rem) {
  .spezifikation > div { grid-template-columns: 1fr; gap: 0.4rem; }
  .spezifikation dt { padding-top: 0; }
}

/* --- Tabellen ----------------------------------------------------------- */

.tabelle { width: 100%; border-collapse: collapse; margin: var(--s-3) 0; font-size: 0.97rem; }
.tabelle caption { text-align: left; color: var(--ink-weich); font-size: 0.86rem; padding-bottom: var(--s-1); max-width: var(--mass-text); }
.tabelle th, .tabelle td { text-align: left; padding: 0.85rem var(--s-2) 0.85rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-family: "IBM Plex Sans Condensed", sans-serif; font-weight: 600; border-bottom-color: var(--rahmen); }
.tabelle td:last-child, .tabelle th:last-child { padding-right: 0; }
/* Der Preis ist die Signalstelle der Seite — auf dem dunklen Band bekommt
   das Gold erst seine Leuchtkraft. */
.preis { font-family: "IBM Plex Mono", monospace; font-size: 0.94rem; font-weight: 500; color: var(--bernstein); white-space: nowrap; }

.tabelle-rollbar { overflow-x: auto; }

/* --- Referenzeintrag ---------------------------------------------------- */

.werk { padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); }
.werk:first-of-type { border-top: 1px solid var(--rahmen); }
.werk h3 { margin-bottom: 0.3rem; }
.werk .daten { display: block; margin-bottom: var(--s-1); }
.werk ul { margin: var(--s-1) 0 0; padding-left: 1.1rem; }
.werk li { margin-bottom: 0.25rem; }
.werk li::marker { color: var(--bernstein); }

/* --- Ablauf (echte Reihenfolge, daher nummeriert) ----------------------- */

.ablauf { counter-reset: schritt; list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.ablauf li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--linie);
  max-width: none;
}
.ablauf li::before {
  content: counter(schritt);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--signal);
  padding-top: 0.28rem;
}
.ablauf p { margin: 0; }

/* --- Aktion ------------------------------------------------------------- */

/* Gold als Handlungsfarbe, dunkler Text darauf (6.1:1). Gleich in beiden
   Kontexten, damit «hier klicken» überall dasselbe Zeichen hat. */
.aktion {
  display: inline-block;
  background: var(--gold);
  color: var(--tief);
  text-decoration: none;
  padding: 0.78rem 1.5rem;
  /* Schrift ausdruecklich erben: als <button> im Kontaktformular nahm die
     Klasse sonst die Schrift des Systems (gemessen Arial 13.3 px gegen
     IBM Plex 17 px bei den gleich aussehenden Knoepfen daneben). */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 500;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear;
}
.aktion:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--tief); }
.aktion.leer { background: transparent; color: var(--ink); border-color: var(--rahmen); }
.aktion.leer:hover { background: var(--ink); color: var(--papier); border-color: var(--ink); }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* --- Formular ----------------------------------------------------------- */

.formular { max-width: 34rem; margin-top: var(--s-3); }
.feld { margin-bottom: var(--s-2); }
.feld label { display: block; font-size: 0.9rem; margin-bottom: 0.3rem; font-weight: 500; }
.feld input, .feld textarea, .feld select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--linie);
  border-bottom: 2px solid var(--signal);
  background: var(--papier-neu);
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  border-radius: 0;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.hinweis { font-size: 0.85rem; color: var(--ink-weich); }

/* --- Schriftfeld (Fusszeile) -------------------------------------------- */

.fuss {
  border-top: 1px solid var(--kante);
  background: var(--tief-fuss);
  --papier: var(--tief-fuss);
  margin-top: 0;
  padding-bottom: var(--s-4);
}

.schriftfeld {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rahmen);
  border-bottom: none;
  margin-top: var(--s-4);
  background: rgba(255, 255, 255, 0.04);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
}
.schriftfeld > div { border-bottom: 1px solid var(--rahmen); border-right: 1px solid var(--rahmen); padding: 0.6rem 0.75rem; }
.schriftfeld > div:nth-child(4n) { border-right: none; }
.schriftfeld b { display: block; font-weight: 400; color: var(--ink-weich); font-size: 0.7rem; margin-bottom: 0.15rem; }

.fuss-navi { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding-top: var(--s-3); font-size: 0.9rem; }
.fuss-navi a { color: var(--ink-weich); }
.fuss-navi a:hover { color: var(--ink); }

/* Handy: das Auftaktband darf nicht die halbe Anzeige mit leerem Raster
   füllen, und die zweizeilige Kopfzeile bleibt besser stehen als kleben. */
@media (max-width: 44rem) {
  .auftakt { padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .kopf { position: static; }
  section { padding: var(--s-4) 0; }
  .schriftfeld { grid-template-columns: repeat(2, 1fr); }
  .schriftfeld > div:nth-child(4n) { border-right: 1px solid var(--rahmen); }
  .schriftfeld > div:nth-child(2n) { border-right: none; }
}

/* --- Kleinkram ---------------------------------------------------------- */

/* Spaltenriss: die feine Linie links macht aus den Textblöcken Felder,
   wie in einer Stückliste. */
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-3) var(--s-4); }
.zwei-spalten p, .zwei-spalten li { max-width: none; }
.zwei-spalten > div { border-left: 1px solid var(--linie); padding-left: var(--s-2); }

.merker { background: var(--papier-neu); border-left: 3px solid var(--bernstein); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; }
.merker p:last-child { margin-bottom: 0; }

.ueberspringen {
  position: absolute; left: -9999px;
}
.ueberspringen:focus { left: var(--s-3); top: var(--s-1); background: var(--gold); color: var(--tief); padding: 0.5rem 1rem; z-index: 50; }

/* --- Bewegung nur, wenn gewünscht --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bemassung .zug { animation: none; stroke-dashoffset: 0; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}