/* artikel.css — geteilt von allen Wissens-Seiten (Hub /rad/ und Spokes wie /wind/).
   Hiess bis zum 18.08.2026 wind.css und lag im Spoke-Ordner. Mit dem zweiten
   Nutzer war klar: eine Seiten-eigene CSS-Datei skaliert nicht, sonst driften
   Hub und Spoke auseinander wie damals Blaetter und Slideshow.
   Erbt saemtliche Farben, Radien und Motion-Token aus style.css. Hier stehen
   ausschliesslich Dinge, die es auf der Startseite nicht gibt: der Rechner und
   die zwei Zeitbalken. Keine neuen Farbwerte, keine neuen Radien.

   Warum eine eigene Datei und kein <style>-Block: style.css ist das
   Design-Gesetz in Code. Eine Seite, die sich lokale Ausnahmen einbaut, faengt
   genau so an. Getrennte Datei heisst: man sieht auf einen Blick, was diese
   Seite zusaetzlich braucht — und was davon irgendwann zurueck ins Gesetz muss. */

.w-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 6rem 1.25rem 5rem;
}

/* style.css gibt jedem <section> den Rhythmus der Startseite mit:
   clamp(72px,10vw,132px) Innenabstand oben und unten. Das ist fuer
   vollbreite Buehnensektionen gedacht. In einem Fliesstext addiert es sich
   mit unseren Abstaenden zu Luecken von ueber 300 px -- der Text zerfaellt
   in Inseln. Hier zaehlt Lesefluss, also setzen wir den Rhythmus zurueck
   und steuern die Abstaende selbst. */
.w-wrap section { padding: 0; }

/* ---- Kopf ------------------------------------------------------------- */

.w-eyebrow {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}

/* Zwei Saetze, zwei Bloecke. Ein <br> haette hier nicht gereicht: der zweite
   Satz ist laenger als die Zeile und waere mit einem verwaisten "ein" am
   Zeilenende gebrochen. Als eigener Block bricht jeder Satz fuer sich. */
.w-hero h1 .z { display: block; }

.w-hero h1 {
  font-size: clamp(1.9rem, 5.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 1.4rem;
  color: var(--ink);
}

.w-lead {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink2);
  margin: 0 0 1.1rem;
  max-width: 46ch;
}

.w-punch {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 44ch;
}
.w-punch em { color: var(--accent); font-style: normal; }

/* ---- Textabschnitte ---------------------------------------------------- */

.w-sec { margin-top: 3.6rem; }

.w-sec h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.w-sec p {
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--ink2);
  margin: 0 0 .95rem;
}
.w-sec p:last-child { margin-bottom: 0; }
.w-sec strong { color: var(--ink); }
.w-sec em { color: var(--accent); font-style: normal; }

/* ---- Der Rechner ------------------------------------------------------- */

.w-tool {
  margin-top: 3.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
}

.w-tool h2 {
  font-size: 1.25rem;
  margin: 0 0 1.5rem;
  color: var(--ink);
}

.w-ctl {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .35rem .9rem;
  margin: 0 0 1.1rem;
}

.w-ctl-l {
  font-size: .95rem;
  color: var(--ink2);
  grid-column: 1;
}

.w-ctl output {
  grid-column: 2;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}

.w-ctl input[type=range] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
  /* 44 px Trefferflaeche fuer den Daumen, ohne den sichtbaren Regler
     aufzublasen. */
  min-height: 44px;
}

/* Ohne JS bewegt der Regler nichts. Dann ist er kein Bedienelement, sondern
   eine Luege — also weg, und das Beispiel bleibt als Rechnung stehen. */
html:not(.js) .w-ctl input[type=range],
html:not(.js) .w-ctl output { display: none; }
html:not(.js) .w-ctl-l::after { content: ": wie im Beispiel unten"; }

.w-fixed {
  font-size: .9rem;
  color: var(--muted);
  margin: 1.2rem 0 0;
}

/* ---- Die zwei Balken --------------------------------------------------- */

.w-bars { margin: 1.9rem 0 1.6rem; }
.w-bar + .w-bar { margin-top: 1.3rem; }

.w-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .95rem;
  color: var(--ink2);
  margin: 0 0 .5rem;
}
.w-bar-head b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.w-track {
  height: 14px;
  border-radius: 999px;
  background: var(--paper2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.w-fill {
  height: 100%;
  border-radius: 999px;
  transition: width var(--dur-moderate) var(--ease-standard);
}
/* Flaechen, also die dunkle Petrol-Variante — die helle waere auf dieser
   Groesse ein Leuchtstreifen (DESIGN-LAW: Akzent hell nur fuer Text/Linien). */
.w-fill-tail { background: var(--accent-fill); opacity: .45; }
.w-fill-head { background: var(--signature); }

.w-bar-sub {
  font-size: .85rem;
  color: var(--muted);
  margin: .45rem 0 0;
  font-variant-numeric: tabular-nums;
}

.w-result {
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 1.6rem 0 .5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.w-result b {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.w-result-sub {
  font-size: .97rem;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0;
}

/* ---- Die Formel -------------------------------------------------------- */

.w-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1rem;
  margin: 1.3rem 0;
  text-align: center;
}
.w-eq { color: var(--muted); }
.w-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.35;
}
.w-num { border-bottom: 1px solid var(--accent); padding: 0 .5rem .2rem; }
.w-den { padding: .2rem .5rem 0; }

/* ---- Abschluesse ------------------------------------------------------- */

.w-honest {
  border-left: 2px solid var(--accent-fill);
  padding-left: 1.25rem;
}

.w-tip h2 { color: var(--ink); }

.w-share {
  font-size: 1.05rem;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  margin-top: 1.3rem;
}

.w-app {
  background: var(--d-paper);
  border: 1px solid var(--d-line);
  border-radius: var(--radius);
  padding: 1.9rem 1.5rem;
  margin-top: 4rem;
}
.w-stores { color: var(--ink2); }
.w-stores b { color: var(--ink); }
.w-app .btn { margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .w-fill { transition: none; }
}

/* ---- Brotkrumen ------------------------------------------------------- */
/* Ohne Pfad ist jede Unterseite eine Waise: Der Leser weiss nicht, wo er
   gelandet ist, und die Suchmaschine sieht keine Hierarchie. */

.krumen {
  font-size: .88rem;
  color: var(--muted);
  margin: 0 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.krumen a { color: var(--ink2); text-decoration: none; }
.krumen a:hover { color: var(--accent); }
/* --line waere hier 1,28:1 und damit unsichtbar -- der Kontrast-Pruefer hat es
   am 18.08. abgefangen. Ein Trenner, den man nicht sieht, trennt auch nichts. */
.krumen span[aria-hidden] { color: var(--muted); }

/* ---- Hub: die Liste der Spokes ---------------------------------------- */

.spokes { display: grid; gap: 1rem; margin: 1.8rem 0 0; }

.spoke {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.3rem;
  text-decoration: none;
  transition: border-color var(--dur-normal) var(--ease-standard);
}
.spoke:hover { border-color: var(--accent-fill); }

.spoke h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.spoke p { font-size: .98rem; line-height: 1.6; color: var(--ink2); margin: 0; }

/* Die Zahl, die den Klick wert ist — das Versprechen der Unterseite. */
.spoke .zahl {
  display: block;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: .8rem 0 0;
}

/* Noch nicht gebaut: als Text, nicht als toter Link. Ein Link ins Nichts
   ist schlimmer als kein Link. */
/* Frueher stand hier opacity: .62 fuer die ganze Karte. Das drueckt JEDEN
   Kontrast darin mit runter -- Lighthouse hat die Seite dafuer am 18.08. auf
   94 gesetzt. Zurueckhaltung geht ueber Farbe und Rahmen, nicht ueber
   Transparenz: die Karte tritt zurueck, der Text bleibt lesbar. */
.spoke-offen { background: var(--paper2); border-style: dashed; }
.spoke-offen h3 { color: var(--ink2); }
.spoke-offen .zahl { color: var(--muted); }

/* ---- Rechner mit Eingabefeldern (z. B. /rennzeit/) --------------------- */
/* Der Wind-Rechner arbeitet mit Reglern, weil dort ein Bereich interessant
   ist. Wo ein exakter Wert eingegeben wird -- eine gelaufene Zeit --, waere
   ein Regler falsch: man kennt die Zahl, man schaetzt sie nicht. */

.r-form { display: grid; gap: 1.1rem; margin: 0 0 1.6rem; }

.r-feld { display: grid; gap: .4rem; }
.r-feld label { font-size: .95rem; color: var(--ink2); }

.r-feld select,
.r-feld input {
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: .7rem .8rem;
  min-height: 44px;
  width: 100%;
}
.r-feld input { font-variant-numeric: tabular-nums; }
.r-feld select:focus-visible,
.r-feld input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.r-hinweis { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---- Die Ergebnistabelle ---------------------------------------------- */

.r-tabelle { width: 100%; border-collapse: collapse; margin: 0; }
.r-tabelle caption { text-align: left; font-size: .9rem; color: var(--muted); padding: 0 0 .7rem; }
.r-tabelle th,
.r-tabelle td { padding: .75rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.r-tabelle th { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.r-tabelle td { color: var(--ink2); font-variant-numeric: tabular-nums; }
.r-tabelle td:first-child { color: var(--ink); }
.r-tabelle .zeit { font-size: 1.15rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Die Zeile, die der Leser eingegeben hat -- sie ist gemessen, nicht gerechnet.
   Der Unterschied gehoert sichtbar gemacht. */
/* Der Name ist historisch: Die Zeile hebt die interessante Zeile hervor,
   nicht eine "gemessene" im Gegensatz zu einer geschaetzten. Auf
   /einheit-verpasst/ steht dort schlicht der Ausfall-Fall. Umbenennen
   wuerde vier Seiten anfassen, ohne dass sich etwas aendert. */
.r-tabelle tr.gemessen td { color: var(--accent); }
.r-tabelle tr.gemessen .zeit { color: var(--accent); }

/* Die unsicherste Zeile ehrlich markieren, statt sie wie die anderen zu zeigen. */
.r-tabelle tr.unsicher td::after { content: ""; }
.r-marke {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--caution);
  border: 1px solid var(--caution);
  border-radius: 999px;
  padding: .1rem .5rem;
  margin-left: .5rem;
  vertical-align: middle;
}

@media (max-width: 30rem) {
  .r-tabelle th:nth-child(3), .r-tabelle td:nth-child(3) { display: none; }
}

/* ---- Formkurve: das Diagramm ------------------------------------------ */
/* Drei Linien in einem SVG statt eines Bildes. Ein PNG haette hier drei
   Nachteile: es skaliert nicht, es kennt das helle Thema nicht, und der
   Text darin waere fuer niemanden auslesbar. */

.f-chart {
  margin: 1.8rem 0 1.2rem;
  overflow-x: auto;
}
.f-chart svg { display: block; width: 100%; min-width: 460px; height: auto; }

.f-grid { stroke: var(--line); stroke-width: 1; }
.f-null { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 4 4; }

.f-linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.f-fit { stroke: var(--ink2); }
.f-erm { stroke: var(--muted); stroke-dasharray: 6 4; }
.f-form { stroke: var(--accent); stroke-width: 3.5; }

.f-marke { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.f-punkt { fill: var(--accent); }

.f-tick { fill: var(--muted); font-size: 15px; font-family: inherit; }

/* Die Legende gehoert nicht ins SVG: als HTML ist sie vorlesbar, umbrechbar
   und uebersetzbar. */
.f-legende {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  color: var(--ink2);
}
.f-legende li { display: flex; align-items: center; gap: .5rem; }
.f-legende i {
  width: 22px;
  height: 0;
  border-top: 3px solid currentColor;
  flex: none;
}
.f-l-fit { color: var(--ink2); }
.f-l-erm { color: var(--muted); border-top-style: dashed; }
.f-l-form { color: var(--accent); }
.f-legende .f-l-erm i { border-top-style: dashed; }

/* Die drei Werte unter dem Regler. */
.f-werte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
}
.f-wert { margin: 0; }
.f-wert b {
  display: block;
  font-size: 1.7rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.f-wert.f-hebt b { color: var(--accent); }
.f-wert span {
  display: block;
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
}

@media (max-width: 520px) {
  .f-werte { grid-template-columns: 1fr; gap: .8rem; }
  .f-wert b { font-size: 1.4rem; }
}

/* ---- Der Pflicht-Hinweis auf den Erholungsseiten ----------------------- */
/* Fliesstextgroesse, nichts Aufklappbares, ohne JS sichtbar. Bewusst NICHT
   .w-honest: das ist die "benannte Schwaeche" und hat eine andere Funktion. */

.w-arzt {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink2);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem;
  margin-top: 3rem;
}
.w-arzt h2 { margin-top: 0; }
.w-arzt p { color: var(--ink2); }
.w-arzt p:last-child { margin-bottom: 0; }

/* Ohne JS bewegt der Regler nichts und wird ausgeblendet -- das erledigt
   schon die Regel bei .w-ctl weiter oben. Nur ihr Zusatz ": wie im Beispiel
   unten" passt hier nicht: das Beispiel steht ueber dem Regler, nicht darunter,
   und es hat eine Wochennummer. */
html:not(.js) .f-ctl-l::after { content: ": 11 von 16, im Diagramm markiert"; }

/* ---- Aufzaehlung im Artikel ------------------------------------------- */
/* Die Artikelseiten kamen bis jetzt ohne Liste aus. Auf /ruhepuls/ ist die
   Messanleitung aber genau das: vier gleichrangige Punkte. Als Fliesstext
   waere sie eine Kette aus "und ausserdem". */

.w-liste {
  margin: 1.2rem 0 1.4rem;
  padding-left: 1.2rem;
  color: var(--ink2);
  line-height: 1.7;
}
.w-liste li { margin-bottom: .5rem; }
.w-liste li::marker { color: var(--accent); }
.w-liste strong { color: var(--ink); }

/* ---- Kurz gefragt ------------------------------------------------------ */
/* Was hier steht, steht wortgleich im FAQPage-Knoten. Strukturierte Daten,
   die etwas anderes behaupten als die sichtbare Seite, sind ein Verstoss --
   und faellt es niemandem auf, ist es trotzdem eine Luege gegenueber der
   Maschine, die es weitertraegt. */

.w-faq { margin: 1.6rem 0 0; }
.w-faq > div {
  border-top: 1px solid var(--line);
  padding: 1.3rem 0;
}
.w-faq dt {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .45rem;
}
.w-faq dd {
  margin: 0;
  color: var(--ink2);
  line-height: 1.7;
}