/* ==========================================================================
   Jev · System One Modell von TypeSafe AI · deutsche Einzelseite
   Dunkler Kohle- und Glut-Look: Instrumententafel, Haarlinien, Mono-Labels.
   Kein Radius, keine Schatten, keine Gradients außer Raster, Schraffur, Linien.
   Blöcke: tokens · basis · utilities · masthead · hero · call · plate ·
   sections · friction · switch/flow · snippet · prose/arch · race · tables ·
   facts/calc · confidence · doctor · patterns/demos · start · links ·
   footer · breakpoints · reduced motion
   ========================================================================== */

/* --- tokens --- */
:root{
  --coal:#0A0B0C;
  --coal-2:#0E1013;
  --panel:#101216;
  --panel-2:#15181D;
  --line:#23272E;
  --line-2:#2F343C;
  --bone:#EDE9E1;
  --ash:#B7BCC4;
  --flint:#7C838D;
  --ember:#F0803C;
  --ember-dim:#B25F2B;
  --ember-soft:rgba(240,128,60,.12);
  --steel:#7290A3;
  --rust:#C9503F;
  --str:#A8C3D4;
  --sans:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* --- basis / reset --- */
*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background-color:var(--coal);
  background-image:
    linear-gradient(to right, rgba(237,233,225,.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,233,225,.02) 1px, transparent 1px);
  background-size:48px 48px;
  color:var(--ash);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  font-stretch:normal;
  line-height:1.65;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{color:var(--bone);font-weight:700;line-height:1.15}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul,pre,table{margin:0}
ol,ul{list-style:none;padding-left:0}
table{border-collapse:collapse}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:100%;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
input,select{background:none;border:0}
[hidden]{display:none!important}

/* --- utilities --- */
.wrap{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.5rem);
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip{
  position:fixed;
  top:.75rem;
  left:.75rem;
  z-index:10;
  transform:translateY(-250%);
  padding:.6rem 1rem;
  background:var(--ember);
  color:var(--coal);
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.skip:focus{transform:none}

.eyebrow{
  margin-bottom:.9rem;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:.6em;
  background:var(--ember);
}

.display{
  margin-bottom:1.2rem;
  font-family:var(--sans);
  font-size:clamp(2.3rem,5vw,4.3rem);
  font-weight:700;
  font-stretch:expanded;
  letter-spacing:-.015em;
  line-height:.98;
  color:var(--bone);
  text-wrap:balance;
}

.display-2{
  margin-bottom:1rem;
  font-size:clamp(1.9rem,3.6vw,3rem);
  font-weight:700;
  font-stretch:expanded;
  letter-spacing:-.01em;
  line-height:1.02;
  color:var(--bone);
}

.lede{
  max-width:62ch;
  margin-bottom:2.2rem;
  font-size:1.16rem;
  line-height:1.6;
  color:var(--ash);
}

.sub{
  margin:2.8rem 0 .7rem;
  font-size:1.05rem;
  font-weight:600;
  font-stretch:semi-expanded;
  line-height:1.3;
  color:var(--bone);
}
.sub:first-child{margin-top:0}

/* kleingedrucktes in Mono: Hinweise, Achsen, Tabellenfuß */
.note,
.evals__axis,
.evals__hint,
.evals__prompt p{
  max-width:70ch;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  color:var(--flint);
}
.note{margin-top:.9rem}
.evals__axis{margin-top:.8rem}
.evals__prompt p{margin-top:.7rem}
.note--pad{
  margin-top:0;
  padding:.9rem 1rem;
  border-top:1px solid var(--line);
}
.switch > .note,
.race > .note,
.calc > .note,
.conf > .note{padding:0 1.1rem .95rem}

pre{
  margin:0;
  font-family:var(--mono);
  white-space:pre;
}

.code{
  padding:.95rem 1.05rem;
  border:1px solid var(--line);
  background:var(--coal-2);
  color:var(--ash);
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.65;
  overflow-x:auto;
}
.code--json{
  white-space:pre;
  tab-size:2;
}
/* Umbricht im Hero-Panel, weil die Spalte schmal ist */
.code--wrap{
  font-size:11.5px;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
/* Codeblock ohne Rahmen und Außenabstand, z. B. im Confidence-Kasten */
.code--flush{
  margin:0;
  border:0;
}
.code--good{border-color:rgba(240,128,60,.4)}

code{
  font-family:var(--mono);
  font-size:12.5px;
  padding:.08em .34em;
  border:1px solid var(--line);
  background:rgba(237,233,225,.06);
}
pre code{
  padding:0;
  border:0;
  background:none;
  font-size:inherit;
}

.tok-key{color:var(--bone)}
.tok-str{color:var(--str)}
.tok-num{color:var(--ember);font-variant-numeric:tabular-nums}
.tok-bool{color:var(--ember-dim)}
.tok-punct{color:#5E646E}

.tabs{
  display:inline-flex;
  flex:none;
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
}

.tab{
  padding:.42rem .85rem;
  background:var(--panel-2);
  color:var(--flint);
  font-family:var(--mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
.tab:hover{color:var(--bone)}
.tab.is-on{
  color:var(--bone);
  background:#1C1F25;
  box-shadow:inset 0 -2px 0 var(--ember);
}

.btn{
  padding:.55rem 1rem;
  border:1px solid var(--ember);
  background:transparent;
  color:var(--ember);
  font-family:var(--mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background-color .15s ease;
}
.btn:hover{background:var(--ember-soft)}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
}

/* --- masthead --- */
.masthead{
  position:sticky;
  top:0;
  z-index:5;
  border-bottom:1px solid var(--line);
  background:rgba(10,11,12,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.masthead__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:.85rem;
}

.mark{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.mark__name{
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  font-stretch:expanded;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--bone);
}
.mark__sub{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  color:var(--flint);
}

.masthead__nav{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
}
.masthead__nav a{
  font-family:var(--mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--flint);
  transition:color .15s ease;
}
.masthead__nav a:hover{color:var(--bone)}

/* --- hero --- */
.hero{padding-block:clamp(3rem,7vw,5.5rem)}

/* --- call: Instrumententafel des Aufrufs --- */
.call{
  border:1px solid var(--line-2);
  background:var(--panel);
}

.call__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
}

.call__head{
  font-size:1rem;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}

.call__grid{
  display:grid;
  grid-template-columns:0.92fr 1.16fr 1fr;
  gap:1px;
  background:var(--line);
}

.panel{
  min-width:0;
  padding:1.05rem 1.1rem;
  background:var(--panel);
}

.panel--answers{min-width:0}

.panel__tag{
  margin-bottom:.7rem;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.panel__hint{
  margin-left:.4em;
  color:#5E646E;
  text-transform:lowercase;
}

.state{
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.75;
  color:#D6D2CA;
}

.bar{
  display:grid;
  grid-template-columns:minmax(5rem,7rem) minmax(0,1fr) 3.6rem;
  gap:.65rem;
  align-items:center;
  padding:.3rem 0;
}
.bar__label{
  font-family:var(--mono);
  font-size:12px;
  color:var(--flint);
  text-align:right;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.bar__track{
  display:block;
  height:12px;
  border:1px solid var(--line-2);
  background-color:var(--coal-2);
  background-image:repeating-linear-gradient(135deg, rgba(237,233,225,.07) 0 4px, transparent 4px 8px);
}
.bar__fill{
  display:block;
  width:0;
  height:100%;
  background:rgba(183,188,196,.35);
  transition:width .45s ease;
}
.bar__val{
  font-family:var(--mono);
  font-size:12px;
  color:var(--flint);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.bar[data-win="1"] .bar__fill{background:var(--ember)}
.bar[data-win="1"] .bar__label,
.bar[data-win="1"] .bar__val{color:var(--bone)}

.answer-line{
  margin-top:.55rem;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ash);
}
.answer-line__k{
  margin-right:.5em;
  color:var(--flint);
}
.answer-line b{color:var(--bone)}

.legend{
  margin:.7rem 0 0;
  padding-left:0;
  list-style:none;
}
.legend__item{
  position:relative;
  padding-left:1.35rem;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  color:var(--flint);
}
.legend__item::before{
  content:attr(data-level);
  position:absolute;
  left:0;
  top:0;
  color:var(--ember);
  font-variant-numeric:tabular-nums;
}
.legend__item--top{color:var(--bone)}

.noul{padding:.2rem 0}
.noul__val{
  display:block;
  font-family:var(--mono);
  font-size:2.4rem;
  line-height:1;
  color:var(--ember);
  font-variant-numeric:tabular-nums;
}
.noul__track{
  display:block;
  height:12px;
  margin-top:.6rem;
  border:1px solid var(--line-2);
  background-color:var(--coal-2);
  background-image:repeating-linear-gradient(135deg, rgba(237,233,225,.07) 0 4px, transparent 4px 8px);
}
.noul__fill{
  display:block;
  width:0;
  height:100%;
  background:var(--ember);
}

/* --- plate: Typenschild --- */
.plate{
  position:relative;
  margin-top:2rem;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.plate::before,
.plate::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:1px solid var(--ember);
  pointer-events:none;
}
.plate::before{
  top:-1px;
  left:-1px;
  border-right:0;
  border-bottom:0;
}
.plate::after{
  right:-1px;
  bottom:-1px;
  border-left:0;
  border-top:0;
}

.plate__head{
  padding:.6rem 1rem;
  border-bottom:1px solid var(--line-2);
  background-color:var(--panel-2);
  background-image:repeating-linear-gradient(135deg, rgba(237,233,225,.07) 0 4px, transparent 4px 8px);
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--bone);
}

.plate__rows{
  margin:0;
  padding:0;
  list-style:none;
}
.plate__row{
  display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);
  gap:1rem;
  padding:.6rem 1rem;
  border-top:1px solid var(--line);
}
.plate__row:first-child{border-top:0}
.plate__row dt{
  padding-top:.15rem;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.plate__row dd{
  font-size:.95rem;
  color:var(--ash);
}
.plate__note{
  display:block;
  margin-top:.2rem;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--flint);
}

/* --- sections --- */
.section{
  border-top:1px solid var(--line);
  padding-block:clamp(3.2rem,7vw,6rem);
  scroll-margin-top:5rem;
}
.section--end{padding-bottom:clamp(4.5rem,10vw,8rem)}

/* --- friction: vier Reibungspunkte --- */
.friction{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background:var(--line);
}
.friction__item{
  padding:1.1rem;
  background:var(--panel);
  font-size:15px;
  color:var(--ash);
}
.friction__tag{
  margin-bottom:.5rem;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ember);
}

/* --- switch + flow --- */
.switch{
  margin-top:2.2rem;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.switch__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
}
.switch__head{
  font-size:1rem;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}

.flow{
  display:flex;
  gap:0;
  padding:1.15rem 1rem;
  border:1px solid var(--line);
  border-top:0;
  background:var(--panel);
  overflow-x:auto;
}
.flow__node{
  position:relative;
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  gap:.35rem;
  min-width:10.5rem;
  padding:.7rem .75rem;
  border:1px solid var(--line-2);
  background:var(--panel-2);
}
.flow__k{
  font-family:var(--mono);
  font-size:11px;
  color:var(--flint);
}
.flow__node b{
  font-size:14.5px;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}
.flow__d{
  font-size:12.5px;
  line-height:1.5;
  color:var(--flint);
}
.flow__node--warn{border-color:rgba(201,80,63,.55)}
.flow__node--warn::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:7px;
  height:7px;
  background:var(--rust);
}
.flow__node--mine{border-color:rgba(240,128,60,.55)}
.flow__node--mine::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:7px;
  height:7px;
  background:var(--ember);
}
.flow__arrow{
  flex:none;
  align-self:center;
  padding:0 .55rem;
  font-family:var(--mono);
  color:var(--steel);
}

/* --- snippet --- */
.snippet{
  margin:2rem 0 0;
  border:1px solid var(--line);
  background:var(--coal-2);
}
.snippet__cap{
  padding:.55rem .9rem;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--flint);
}
.snippet pre{
  margin:0;
  border:0;
}

/* --- prose + arch --- */
.cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3.5rem;
}
.prose{min-width:0}
.prose h3{margin-bottom:.35rem}
.prose h3::before{
  content:"";
  display:block;
  width:2.5rem;
  height:2px;
  margin-bottom:.8rem;
  background:var(--ember);
}
.prose p{
  margin-top:.8rem;
  max-width:64ch;
}

.arch{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:2.8rem;
  background:var(--line);
}
.arch__col{
  padding:1.1rem;
  background:var(--panel);
}
.arch__col--mine{
  background:#13161B;
  box-shadow:inset 0 2px 0 0 var(--ember);
}
.arch__tag{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.arch__col--mine .arch__tag{color:var(--ember)}
.arch__d{
  margin-top:.45rem;
  font-size:15px;
  color:var(--ash);
}

/* --- race --- */
.race{
  margin-top:2.6rem;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.race__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
}
.race__head{
  font-size:1rem;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}
.race__tracks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
}
.race__track{
  min-width:0;
  padding:1.15rem 1.1rem;
  background:var(--panel);
}
.race__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.race__name{
  font-size:14.5px;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}
.race__track--llm .race__name{color:var(--steel)}
.race__track--jev .race__name{color:var(--ember)}
.race__time{
  font-family:var(--mono);
  font-size:14px;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.race__tokens{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:3px;
  min-height:3.2rem;
  margin:.9rem 0;
}
.race__token{
  padding:0 2px;
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:10.5px;
  color:#6E757F;
  opacity:.16;
}
.race__token.is-on{
  opacity:1;
  color:var(--bone);
  border-color:var(--ember-dim);
  transition:.18s ease;
}
.race__answers{
  display:grid;
  gap:.4rem;
  min-height:3.2rem;
  margin:.9rem 0;
}
.race__answer{
  padding-left:.6rem;
  border-left:2px solid var(--line-2);
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--flint);
  opacity:.35;
  transition:opacity .18s ease, color .18s ease, border-color .18s ease;
}
.race__answer.is-on{
  opacity:1;
  color:var(--bone);
  border-left-color:var(--ember);
}
.race__answer b{color:var(--ember)}
.race__barline{
  height:6px;
  border:1px solid var(--line);
  background:var(--coal-2);
}
.race__barline i{
  display:block;
  width:0;
  height:100%;
  background:var(--steel);
}
.race__track--jev .race__barline i{background:var(--ember)}
.race__result{
  margin-top:.6rem;
  font-family:var(--mono);
  font-size:12px;
  color:var(--flint);
}

/* --- tables --- */
.ptable,
.jtable,
.etable{width:100%}

th,td{
  padding:.6rem .7rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
thead th{
  border-bottom:1px solid var(--line-2);
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--flint);
}
tbody th[scope="row"]{
  font-size:15px;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
  white-space:nowrap;
}
td{
  font-size:14.5px;
  color:var(--ash);
}
.etable{margin-top:1.1rem}
.jtable tbody th[scope="row"]{
  padding-right:1.2rem;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ember);
}
.etable__row--mine{background:rgba(240,128,60,.06)}
.etable__row--mine > th[scope="row"]{
  color:var(--ember);
  box-shadow:inset 2px 0 0 var(--ember);
}
.etable--small th,
.etable--small td{padding:.5rem .6rem}

.acc{
  display:inline-block;
  width:5rem;
  height:6px;
  margin-right:.5rem;
  border:1px solid var(--line-2);
  background:var(--coal-2);
  vertical-align:middle;
}
.acc i{
  display:block;
  height:100%;
  background:var(--steel);
}
.cost{
  display:inline-block;
  height:6px;
  width:calc(var(--w) * .72px);
  margin-right:.5rem;
  background:var(--ember);
  vertical-align:middle;
}

/* --- cautions (Grenzen) --- */
.cautions{margin-top:2.5rem}
.cautions__list li{
  max-width:78ch;
  margin-top:1rem;
  padding-left:1rem;
  border-left:2px solid var(--line-2);
  font-size:15.5px;
  color:var(--ash);
}
.cautions__list li b{color:var(--bone)}

/* --- facts + calc --- */
.facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
}
.fact{
  padding:1.05rem;
  background:var(--panel);
}
.fact__n{
  font-family:var(--mono);
  font-size:1.55rem;
  line-height:1.1;
  color:var(--ember);
  font-variant-numeric:tabular-nums;
}
.fact__d{
  margin-top:.3rem;
  font-size:13.5px;
  color:var(--ash);
}

.calc{
  margin-top:2.5rem;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.calc__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
}
.calc__head{
  font-size:1rem;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}
.calc__hint{
  font-family:var(--mono);
  font-size:12px;
  color:var(--flint);
}
.calc__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
}
.calc__fields{
  min-width:0;
  padding:1.1rem;
  background:var(--panel);
}
.calc__out{
  min-width:0;
  background:var(--panel-2);
}
.calc__row{
  padding:.9rem 1.1rem;
  border-top:1px solid var(--line);
}
.calc__row:first-child{border-top:0}
.calc__k{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.calc__v{
  margin-top:.35rem;
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.8;
  color:var(--ash);
}
.calc__v b{color:var(--bone)}
.calc__row--jev{background:rgba(240,128,60,.07)}
.calc__row--jev .calc__k{color:var(--ember)}
.calc__row--save .calc__v b{color:var(--ember)}

/* --- evals --- */
.evals{margin-top:3rem}
.evals__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line-2);
}
.evals__head{
  font-size:1rem;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}
.evals__hint{flex:1 1 20rem}
.evals__prompt{margin-top:2.2rem}

/* --- Felder (Bereiche, Zahlen, Auswahl) --- */
.field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.5rem .8rem;
  align-items:center;
  padding:.5rem 0;
}
.field > label{
  grid-row:1;
  font-family:var(--mono);
  font-size:12px;
  color:var(--flint);
}
.field > output{
  grid-row:1;
  grid-column:2;
  min-width:3.4rem;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--bone);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.field input[type="range"]{
  grid-row:2;
  grid-column:1 / -1;
}
.field--num{grid-template-columns:minmax(0,1fr) 8rem}
.field--select{grid-template-columns:minmax(0,1fr)}
.field input[type="number"],
.field select{
  width:100%;
  padding:.45rem .6rem;
  border:1px solid var(--line-2);
  background:var(--coal-2);
  color:var(--bone);
  font-family:var(--mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.field--select select{
  grid-row:2;
  grid-column:1 / -1;
  padding-right:1.6rem;
}

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:26px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border:1px solid var(--line-2);
  background:var(--coal-2);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  margin-top:-5px;
  border:0;
  background:var(--ember);
}
input[type="range"]::-moz-range-track{
  height:4px;
  border:1px solid var(--line-2);
  background:var(--coal-2);
}
input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border:0;
  border-radius:0;
  background:var(--ember);
}

/* --- confidence + gauge --- */
.conf{
  border:1px solid var(--line-2);
  background:var(--panel);
}
.conf__grid{
  display:grid;
  grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:1px;
  background:var(--line);
}
.conf__controls{
  min-width:0;
  padding:1.2rem;
  background:var(--panel);
}
.conf__read{
  min-width:0;
  padding:1.2rem;
  background:var(--panel);
}
.conf__legend{
  margin-bottom:.5rem;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.conf__verdict{
  margin-top:1rem;
  padding-left:.9rem;
  border-left:3px solid var(--steel);
  font-family:var(--mono);
  font-size:13px;
  color:var(--bone);
}
.conf__verdict[data-state="act"]{border-color:var(--ember)}
.conf__verdict[data-state="confirm"]{border-color:var(--str)}
.conf__verdict[data-state="human"]{border-color:var(--steel)}

.bars{display:grid;align-content:start}

.gauge{
  margin-top:1.2rem;
  padding:1rem;
  border:1px solid var(--line-2);
  background:var(--panel-2);
}
.gauge__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.gauge__label{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.gauge__value{
  font-family:var(--mono);
  font-size:2rem;
  line-height:1;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.gauge__scale{
  position:relative;
  height:16px;
  margin:1.5rem 0 .45rem;
  background:repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 10%);
}
.gauge__zones{position:absolute;inset:0}
.gauge__zone{
  position:absolute;
  top:0;
  bottom:0;
  border-left:1px solid var(--line-2);
}
.gauge__needle{
  position:absolute;
  top:-7px;
  bottom:-7px;
  left:0;
  width:2px;
  background:var(--bone);
  transition:left .35s ease;
}
.gauge__needle::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  margin-left:-4px;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-bottom:6px solid var(--bone);
}
.gauge__ticks{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--flint);
  font-variant-numeric:tabular-nums;
}
.gauge__markers{
  margin-top:.7rem;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--flint);
}

.conf__code{border-top:1px solid var(--line)}
.conf__code-tag{
  padding:.8rem 1.1rem 0;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
[data-branch]{
  display:block;
  padding-left:.6rem;
  opacity:.28;
}
[data-branch].is-on{
  opacity:1;
  color:var(--bone);
  box-shadow:inset 2px 0 0 var(--ember);
}

/* --- doctor --- */
.doctor{
  margin-top:2.8rem;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.doctor__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
}
.doctor__head{
  font-size:1rem;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
}
.doctor__hint{
  font-family:var(--mono);
  font-size:12px;
  color:var(--flint);
}
.doctor__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--line);
}
.doctor__case{
  min-width:0;
  padding:1.2rem;
}
.doctor__label{
  margin:.9rem 0 .5rem;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--flint);
}
.doctor__label:first-child{margin-top:0}
.doctor__why{
  margin:.9rem 0;
  padding-left:.8rem;
  border-left:3px solid var(--rust);
  font-size:14.5px;
  color:var(--ash);
}
.doctor__why b{color:var(--bone)}

/* --- patterns + demos --- */
.patterns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.5rem 3rem;
}
.pattern{
  min-width:0;
  padding-top:1.1rem;
  border-top:1px solid var(--line-2);
  font-size:15px;
  color:var(--ash);
}
.pattern::before{
  content:"";
  display:block;
  width:2.5rem;
  height:2px;
  margin-bottom:.9rem;
  background:var(--ember);
}
.pattern__tag{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ember);
}
.pattern__head{margin:.45rem 0 .6rem}
.pattern p{margin-top:.6rem}
.pattern__fact{
  margin-top:.9rem;
  padding-left:.8rem;
  border-left:2px solid var(--line-2);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  color:var(--flint);
}
.pattern .code{margin-top:.9rem}

.demos{
  margin-top:3rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line-2);
}
.demos__list li{
  display:grid;
  grid-template-columns:4.5rem minmax(0,1fr);
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  color:var(--ash);
}
.demos__n{
  font-family:var(--mono);
  font-size:15px;
  color:var(--ember);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* --- rules + steps --- */
.rules,
.steps{
  counter-reset:schritt;
}
.rules li,
.steps li{
  position:relative;
  margin-top:.8rem;
  padding-left:2.6rem;
  color:var(--ash);
}
.rules li::before,
.steps li::before{
  counter-increment:schritt;
  content:counter(schritt);
  position:absolute;
  left:0;
  top:.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.6rem;
  height:1.6rem;
  border:1px solid var(--line-2);
  font-family:var(--mono);
  font-size:12px;
  line-height:1;
  color:var(--ember);
  font-variant-numeric:tabular-nums;
}
.rules li b,
.steps li b{color:var(--bone)}
.steps a{
  border-bottom:1px solid var(--line-2);
  color:var(--bone);
  transition:color .15s ease, border-color .15s ease;
}
.steps a:hover{
  color:var(--ember);
  border-bottom-color:var(--ember);
}

/* --- start: zwei Code-Spalten --- */
.start-code{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:2.5rem;
  background:var(--line);
}
.start-code__col{
  min-width:0;
  padding:1.1rem;
  background:var(--panel);
}

/* --- links + glossar + sources --- */
.links{margin-top:2.5rem}
.links__list li{
  display:grid;
  grid-template-columns:13rem minmax(0,1fr);
  gap:1.5rem;
  align-items:baseline;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
}
.links__list a{
  border-bottom:1px solid var(--line-2);
  font-size:15.5px;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
  transition:color .15s ease, border-color .15s ease;
}
.links__list span{
  font-family:var(--mono);
  font-size:12px;
  color:var(--flint);
}
.links__list a:hover{
  color:var(--ember);
  border-bottom-color:var(--ember);
}

.glossar{
  margin-top:1.8rem;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.glossar summary{
  padding:.9rem 1.1rem;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--bone);
  cursor:pointer;
  list-style:none;
}
.glossar summary::-webkit-details-marker{display:none}
.glossar summary::marker{content:""}
.glossar summary::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:.7rem;
  background:var(--ember);
}
.glossar__list{padding:0 1.1rem 1.1rem}
.glossar__list div{
  display:grid;
  grid-template-columns:9rem minmax(0,1fr);
  gap:1rem;
  padding:.7rem 0;
  border-top:1px solid var(--line);
}
.glossar__list dt{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ember);
}
.glossar__list dd{
  font-size:15px;
  color:var(--ash);
}

.sources{
  margin-top:2rem;
  padding:0;
  list-style:none;
}
.sources li{
  display:grid;
  grid-template-columns:15rem minmax(0,1fr);
  gap:1.5rem;
  align-items:baseline;
  padding:.7rem 0;
  border-top:1px solid var(--line);
}
.sources a{
  border-bottom:1px solid var(--line-2);
  font-size:15px;
  font-weight:600;
  font-stretch:semi-expanded;
  color:var(--bone);
  transition:color .15s ease, border-color .15s ease;
}
.sources span{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  color:var(--flint);
}
.sources a:hover{
  color:var(--ember);
  border-bottom-color:var(--ember);
}

/* --- footer --- */
.footer{
  margin-top:4rem;
  padding-block:1.6rem;
  border-top:1px solid var(--line);
}
.footer__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
}
.footer p{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--flint);
}
.footer__mono{
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* --- 1200 --- */
@media (max-width:1200px){
  .cols{gap:2.6rem}
  .patterns{gap:2.2rem 2.4rem}
  .conf__grid{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}
}

/* --- 1000 --- */
@media (max-width:1000px){
  .call__grid{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 900 --- */
@media (max-width:900px){
  .masthead__nav{display:none}
  .cols{grid-template-columns:minmax(0,1fr)}
  .patterns{grid-template-columns:minmax(0,1fr)}
  .friction{grid-template-columns:repeat(2,minmax(0,1fr))}
  .race__tracks{grid-template-columns:minmax(0,1fr)}
  .conf__grid{grid-template-columns:minmax(0,1fr)}
  .calc__grid{grid-template-columns:minmax(0,1fr)}
  .start-code{grid-template-columns:minmax(0,1fr)}
}

/* --- 820 --- */
@media (max-width:820px){
  .arch{grid-template-columns:minmax(0,1fr)}
}

/* --- 720: Tabellen scrollen in sich selbst --- */
@media (max-width:720px){
  .ptable,
  .jtable,
  .etable{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:normal;
  }
}

/* --- 700 --- */
@media (max-width:700px){
  .flow{flex-direction:column}
  .flow__node{min-width:0}
  .flow__arrow{
    align-self:center;
    padding:.4rem 0;
    transform:rotate(90deg);
  }
  .facts{grid-template-columns:minmax(0,1fr)}
  .links__list li{
    grid-template-columns:minmax(0,1fr);
    gap:.3rem;
  }
}

/* --- 640 --- */
@media (max-width:640px){
  .plate__row{
    grid-template-columns:minmax(0,1fr);
    gap:.25rem;
  }
  .glossar__list div{
    grid-template-columns:minmax(0,1fr);
    gap:.25rem;
  }
}

/* --- 560 --- */
@media (max-width:560px){
  .friction{grid-template-columns:minmax(0,1fr)}
}

/* --- 360 --- */
@media (max-width:360px){
  .panel{padding:.9rem}
  .start-code__col{padding:.9rem}
  .race__track{padding:1rem .9rem}
  .calc__fields{padding:.95rem}
  .calc__row{padding:.8rem .9rem}
  .plate__row{padding:.55rem .85rem}
  .field--num{grid-template-columns:minmax(0,1fr) 6.5rem}
  .demos__list li{
    grid-template-columns:3.6rem minmax(0,1fr);
    gap:.8rem;
  }
  .note--pad{padding:.9rem}
  .switch > .note,
  .race > .note,
  .calc > .note,
  .conf > .note{padding:0 .9rem .9rem}
}

/* ==========================================================================
   Bewegung aus, wenn gewünscht
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none}
  .bar__fill,
  .gauge__needle,
  .race__token.is-on,
  .race__answer,
  .tab,
  .btn,
  .masthead__nav a,
  .links__list a,
  .sources a,
  .steps a{transition-duration:.001ms}
}