/* Hilfeseiten CG-Looper / CG-Vario. Welt: Erste-Schicht-Testdruck (Webseite/DESIGN.md).
   ACHTUNG: Diese Datei und hilfe.js existieren in zwei Tool-Projekten (Looper und Vario). Aenderungen in beiden nachziehen.
   CSP: kein Inline-Style erlaubt, Zustaende laufen ueber Klassen und data-Attribute. */
/* Chakra Petch (SIL OFL 1.1, Lizenz: fonts/OFL.txt), selbst gehostet */
@font-face { font-family: "Chakra Petch"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ChakraPetch-Regular.ttf") format("truetype"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/ChakraPetch-SemiBold.ttf") format("truetype"); }

:root {
  --green: #02301a;
  --white: #ffffff;
  --grey: #bcbcbc;      /* Text auf Gruen: 5.5:1 */
  --grey-deep: #808080; /* nur Deko, nie Text */
  --line: rgba(255, 255, 255, .38);
  --pitch: 32px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--green); color-scheme: dark; scrollbar-color: var(--grey-deep) var(--green); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--white);
  background-color: var(--green);
  background-image:
    linear-gradient(to right, rgba(188, 188, 188, .13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(188, 188, 188, .13) 1px, transparent 1px);
  background-size: var(--pitch) var(--pitch);
  background-position: calc(var(--gutter) - 1px) calc(var(--gutter) - 1px);
  font-family: "Chakra Petch", Bahnschrift, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--white); color: var(--green); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
::highlight(treffer) { background-color: var(--white); color: var(--green); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Funktionen, die JavaScript brauchen, sind ohne JS unsichtbar; der Text bleibt vollstaendig lesbar */
html:not(.js) .js-only { display: none !important; }

/* Rahmen mit Passerkreuzen an den Ecken wie auf dem Testblatt */
.doc-bed { min-height: 100svh; padding: var(--gutter); position: relative; }
.doc-bed::before { content: ""; position: absolute; inset: calc(var(--gutter) / 2); border: 1px solid var(--line); pointer-events: none; }
.doc-bed::after {
  content: ""; position: absolute; inset: calc(var(--gutter) / 2 - 9px); pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) 0 9px / 19px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) 9px 0 / 1px 19px no-repeat,
    linear-gradient(var(--white), var(--white)) 100% 9px / 19px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) calc(100% - 9px) 0 / 1px 19px no-repeat,
    linear-gradient(var(--white), var(--white)) 0 calc(100% - 9px) / 19px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) 9px 100% / 1px 19px no-repeat,
    linear-gradient(var(--white), var(--white)) 100% calc(100% - 9px) / 19px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) calc(100% - 9px) 100% / 1px 19px no-repeat;
}
.doc { max-width: 70ch; margin: 0 auto; padding: clamp(8px, 3vh, 32px) 0 calc(var(--pitch) * 2); position: relative; z-index: 1; }

/* Navigation oben und unten */
.nav { display: flex; flex-wrap: wrap; gap: 4px var(--pitch); margin: 0 0 var(--pitch); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grey); text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.nav.bottom { margin: calc(var(--pitch) * 1.5) 0 0; }

/* Titel */
.doc h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 600; line-height: 1.12; margin: 0 0 12px; text-wrap: balance; overflow-wrap: anywhere; }
.lead { color: var(--grey); margin: 0 0 var(--pitch); max-width: 60ch; text-wrap: pretty; }

.doc h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
.doc h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: var(--pitch) 0 6px; }
.doc p, .doc li { margin: 0 0 12px; overflow-wrap: anywhere; text-wrap: pretty; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 12px; }
.doc a { color: var(--white); text-underline-offset: 3px; }
.doc code { font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; font-size: .9em; background: rgba(255, 255, 255, .1); padding: 1px 5px; overflow-wrap: anywhere; }

/* Suche */
.search { margin: 0 0 20px; }
.search label { display: block; margin: 0 0 6px; color: var(--grey); font-size: .9rem; letter-spacing: .04em; }
.search-field { display: flex; border: 1px solid var(--white); background: rgba(2, 48, 26, .85); }
.search-field input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 0; background: transparent;
  color: var(--white); font: inherit; caret-color: var(--white);
}
.search-field input::placeholder { color: var(--grey); opacity: 1; }
.search-field input:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
.search-field input::-webkit-search-cancel-button { filter: invert(1); }
.search-status { min-height: 1.55em; margin: 8px 0 0; color: var(--grey); font-size: .9rem; }

/* Inhaltsverzeichnis */
.toc { border: 1px solid var(--line); margin: 0 0 var(--pitch); }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 16px; cursor: pointer; list-style: none; font-weight: 600; }
.toc summary::-webkit-details-marker { display: none; }
.toc ul { list-style: none; padding: 0 16px 8px; margin: 0; }
.toc li { margin: 0; }
.toc a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--white); border-top: 1px solid rgba(255, 255, 255, .14); }
.toc a:hover, .toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Pfeil als gezeichnete Form, kein Zeichen: dreht sich beim Oeffnen */
.chev { width: 10px; height: 10px; flex: none; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); transition: transform .35s var(--ease); }
details[open] > summary .chev { transform: rotate(45deg); }

/* Stepper: Filamentbahn waechst mit dem Schritt (Zustand ueber data-step, kein Inline-Style) */
.stepper { border: 1px solid var(--white); padding: 20px 20px 8px; margin: 0 0 var(--pitch); }
.stepper > h2 { margin: 0 0 4px; }
.step-count { color: var(--grey); font-size: .9rem; letter-spacing: .04em; margin: 0 0 14px; }
.bahn { position: relative; height: 28px; margin: 0 0 18px; }
.bahn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: var(--grey-deep); opacity: .6; }
.bahn::after { content: ""; position: absolute; inset: 6px 0; border-right: 1px solid var(--grey-deep); background: repeating-linear-gradient(to right, var(--grey-deep) 0 1px, transparent 1px 20%); opacity: .8; }
.bahn-fill, .bahn-nozzle { position: absolute; top: 50%; z-index: 1; transition: width .5s var(--ease), left .5s var(--ease); }
.bahn-fill { left: 0; height: 6px; transform: translateY(-50%); background: var(--white); width: 20%; }
.bahn-nozzle { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--white); left: 20%; }
.bahn[data-step="2"] .bahn-fill { width: 40%; } .bahn[data-step="2"] .bahn-nozzle { left: 40%; }
.bahn[data-step="3"] .bahn-fill { width: 60%; } .bahn[data-step="3"] .bahn-nozzle { left: 60%; }
.bahn[data-step="4"] .bahn-fill { width: 80%; } .bahn[data-step="4"] .bahn-nozzle { left: 80%; }
.bahn[data-step="5"] .bahn-fill { width: 100%; } .bahn[data-step="5"] .bahn-nozzle { left: 100%; }

/* Bahn mit 4 Schritten (z. B. Vario): Teilung bei 25 % statt 20 % */
.bahn[data-steps="4"]::after { background: repeating-linear-gradient(to right, var(--grey-deep) 0 1px, transparent 1px 25%); }
.bahn[data-steps="4"][data-step="1"] .bahn-fill { width: 25%; } .bahn[data-steps="4"][data-step="1"] .bahn-nozzle { left: 25%; }
.bahn[data-steps="4"][data-step="2"] .bahn-fill { width: 50%; } .bahn[data-steps="4"][data-step="2"] .bahn-nozzle { left: 50%; }
.bahn[data-steps="4"][data-step="3"] .bahn-fill { width: 75%; } .bahn[data-steps="4"][data-step="3"] .bahn-nozzle { left: 75%; }
.bahn[data-steps="4"][data-step="4"] .bahn-fill { width: 100%; } .bahn[data-steps="4"][data-step="4"] .bahn-nozzle { left: 100%; }

.doc .steps { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.doc .steps > li { counter-increment: schritt; margin: 0; padding: 0 0 4px; }
.doc .steps > li > h3 { margin-top: 0; }
.doc .steps > li > h3::before { content: counter(schritt) ". "; color: var(--grey); font-weight: 400; }
.js .steps > li:not(.is-current) { display: none; }
.stepper-nav { display: flex; gap: 12px; padding: 8px 0 16px; }

/* Schalter: eckig, weisse Kontur, beim Hover gefuellt wie die Kacheln der Startseite */
.btn { min-height: 44px; padding: 0 20px; border: 1px solid var(--white); border-radius: 0; background: transparent; color: var(--white); font: inherit; cursor: pointer; transition: background-color .2s, color .2s; }
.btn:hover:not(:disabled), .btn:focus-visible:not(:disabled) { background: var(--white); color: var(--green); }
.btn:disabled { color: var(--grey); opacity: .55; cursor: not-allowed; }
.btn.solid { background: var(--white); color: var(--green); font-weight: 600; }
.btn.solid:hover:not(:disabled) { background: transparent; color: var(--white); }
.btn.solid:disabled { background: transparent; color: var(--grey); }

/* Abschnitte zum Nachschlagen */
.topics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.topics-head p { margin: 0; color: var(--grey); font-size: .9rem; letter-spacing: .04em; }
.topic { border-top: 1px solid var(--line); }
.topic:last-of-type { border-bottom: 1px solid var(--line); }
.topic > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; cursor: pointer; list-style: none; }
.topic > summary::-webkit-details-marker { display: none; }
.topic > summary:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.topic-body { padding: 4px 0 var(--pitch); }
.topic-body > :first-child { margin-top: 0; }

/* Codebloecke: horizontal scrollbar im Block, nie die Seite */
.doc pre { overflow-x: auto; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.doc pre code { display: block; padding: 0; background: none; font-size: .9rem; line-height: 1.6; overflow-wrap: normal; white-space: pre; }

/* Tabellen */
.table-wrap { overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
th { color: var(--grey); font-weight: 400; font-size: .9rem; letter-spacing: .04em; }

/* Hinweiskasten fuer Grenzen */
.note { border: 1px solid var(--white); padding: 14px 18px; margin: 0 0 16px; }
.note > :last-child { margin-bottom: 0; }
.note h3 { margin-top: 0; }

/* Rechner */
.calc { border: 1px solid var(--white); padding: 20px; margin: 0 0 16px; }
.calc-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc legend { padding: 0; margin: 0 0 14px; font-weight: 600; }
.calc-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.calc label { display: block; margin: 0 0 6px; color: var(--grey); font-size: .9rem; letter-spacing: .04em; }
.calc input { width: 9ch; min-height: 48px; padding: 0 12px; border: 1px solid var(--white); border-radius: 0; background: transparent; color: var(--white); font: inherit; font-variant-numeric: tabular-nums; caret-color: var(--white); }
.calc input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.calc output { display: block; min-height: 48px; font-size: 1.75rem; font-weight: 600; line-height: 48px; font-variant-numeric: tabular-nums; }
.calc-note { margin: 12px 0 0; color: var(--grey); font-size: .9rem; }
.calc-row > div { min-width: 0; }
.calc-row > .grow { flex: 1 1 220px; }
.calc select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; padding: 0 40px 0 12px; border: 1px solid var(--white); border-radius: 0; background: var(--green); color: var(--white); font: inherit; }
.calc select { background-image: linear-gradient(45deg, transparent 50%, var(--white) 50%), linear-gradient(135deg, var(--white) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.calc select:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.calc-row + .calc-row { margin-top: 14px; }
.calc-check { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.calc-check input { -webkit-appearance: none; appearance: none; display: grid; place-content: center; width: 24px; height: 24px; min-height: 0; flex: none; padding: 0; border: 1px solid var(--white); border-radius: 0; background: transparent; cursor: pointer; }
.calc-check input::after { content: ""; width: 12px; height: 12px; background: var(--white); transform: scale(0); transition: transform .15s ease; }
.calc-check input:checked::after { transform: scale(1); }
.calc-check label { margin: 0; color: var(--white); font-size: 1rem; letter-spacing: 0; min-height: 44px; display: flex; align-items: center; }
.calc-result { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.calc-label { margin: 0; color: var(--grey); font-size: .9rem; letter-spacing: .04em; }
.calc-detail { margin: 2px 0 0; color: var(--grey); font-size: .9rem; }
/* Fehler in der Signalfarbe des Tools (Orange), nie allein durch Farbe: der Text beginnt mit "Hinweis:" */
.calc-error { margin: 12px 0 0; color: #f5b96e; min-height: 0; }
.calc-error:empty { display: none; }

/* Demo-Rahmen: Schema, nie ein Abbild */
.demo { margin: 0 0 16px; border: 1px solid var(--white); }
/* Bühne: links Draufsicht (2 Teile), rechts Z-Bewegung (1 Teil), gleiche Hoehe durch passende viewBox 160x160 und 80x160 */
.demo-stage { display: grid; grid-template-columns: 2fr 1fr; gap: 0; border-bottom: 1px solid var(--line); background-image: linear-gradient(to right, rgba(188, 188, 188, .12) 1px, transparent 1px), linear-gradient(to bottom, rgba(188, 188, 188, .12) 1px, transparent 1px); background-size: var(--pitch) var(--pitch); }
.demo-panel { min-width: 0; padding: 10px 12px 12px; }
.demo-panel + .demo-panel { border-left: 1px solid var(--line); }
.demo-title { margin: 0 0 6px; color: var(--grey); font-size: .9rem; letter-spacing: .04em; }
.demo-panel svg { display: block; width: 100%; height: auto; }
.demo svg text { fill: var(--grey); font-family: inherit; font-size: 9px; }
@media (min-width: 640px) { .demo svg text { font-size: 6px; } }
.s-bed { fill: none; stroke: var(--line); stroke-width: 1; }
.s-plan { fill: none; stroke: var(--grey-deep); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .8; }
.s-done { fill: none; stroke: #7ad9a6; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.s-leg { fill: none; stroke: #f5b96e; stroke-width: 3; stroke-linecap: round; }
.s-start { stroke: var(--white); stroke-width: 1; opacity: .7; }
.s-head { fill: var(--white); }
.s-axis { stroke: var(--grey-deep); stroke-width: 1.2; opacity: .8; }
.s-level { stroke: var(--grey-deep); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.s-zdot { fill: #72cfeb; }

.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.seg { display: flex; }
.seg .btn { padding: 0 14px; min-width: 52px; }
.seg .btn + .btn { margin-left: -1px; }
.seg .btn[aria-pressed="true"] { background: var(--white); color: var(--green); }
.demo-seek { flex: 1 1 100%; display: block; }
.demo-controls input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--white); }
.demo-hint { flex: 1 1 100%; color: var(--grey); font-size: .9rem; order: 5; }
.demo-phase { margin: 0; padding: 10px 16px 0; font-weight: 600; min-height: 2.4em; }
.demo-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 12px 16px 0; font-size: .9rem; color: var(--grey); }
.demo-legend li { display: flex; align-items: center; gap: 8px; margin: 0; }
/* Signalfarben wie in der Vorschau des Tools selbst (gefahren, aktuell, Z-Position) */
.demo-legend i { width: 18px; height: 4px; background: #7ad9a6; }
.demo-legend .l-orange { background: #f5b96e; } .demo-legend .l-blue { background: #72cfeb; }
.demo figcaption { padding: 8px 16px 14px; color: var(--grey); font-size: .9rem; }

/* Ton-Demo (Vario): Schema mit Regler, Pulsmuster und Text, ohne Ton voll lesbar */
.ton { border: 1px solid var(--white); padding: 20px; margin: 0 0 16px; }
.ton-title { margin: 0 0 14px; font-weight: 600; }
.ton label { display: block; margin: 0 0 6px; color: var(--grey); font-size: .9rem; letter-spacing: .04em; }
.ton input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--white); }
.ton-rate { margin: 4px 0 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ton-readout { margin: 6px 0 14px; min-height: 3.1em; }
.ton-muster { display: block; width: 100%; height: auto; margin: 0 0 14px; border: 1px solid var(--line); }
.s-line { stroke: var(--grey-deep); stroke-width: 1; opacity: .8; }
.s-puls { fill: var(--white); }
.ton-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ton-hint { color: var(--grey); font-size: .9rem; margin: 12px 0 0; }

/* Regler im Stil der Welt: eckiger Griff auf einer Linie, keine Rundungen */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--grey-deep); border-radius: 0; }
input[type="range"]::-moz-range-track { height: 4px; background: var(--grey-deep); border-radius: 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 28px; margin-top: -12px; background: var(--white); border: 0; border-radius: 0; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 28px; background: var(--white); border: 0; border-radius: 0; }
input[type="range"]:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chev, .bahn-fill, .bahn-nozzle, .btn { transition: none; }
}
@media (max-width: 420px) {
  .stepper { padding: 16px 16px 4px; }
  .calc { padding: 16px; }
  .stepper-nav .btn { flex: 1; }
}