/* Herdr Monitor – eigene Projektseite. Welt: Terminal-Multiplexer.
   Eine dunkle Fläche (Anthrazit #121417) teilt sich in Panes; Rahmen in Cyan (aktives Pane) und Magenta (frische Teilung),
   unten eine Statuszeile wie bei tmux, ein Cursor-Block. JetBrains Mono für Codes, Statuszeile und Zahlen,
   Instrument Sans für Überschriften und Lesetext. Statusfarben wie in der Oberfläche: Cyan = in Arbeit,
   Bernstein = braucht mich, Grün = fertig. */

/* ---------- Seitenwechsel: diese Welt fährt von unten herein, die vorige Seite tritt zurück (View Transitions; ohne Unterstützung oder bei reduzierter Bewegung normaler Seitenaufruf) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:#33c3d1}
  ::view-transition-old(root){animation:sw-zurueck .6s cubic-bezier(.5,0,.2,1) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:sw-herein .8s cubic-bezier(.16,1,.3,1) .05s both;mix-blend-mode:normal}
}
@keyframes sw-zurueck{to{transform:translateY(-4%) scale(.9);opacity:.2}}
@keyframes sw-herein{from{transform:translateY(100%)}}

@font-face{font-family:"Instrument Sans";src:url('../fonts/instrument-sans-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url('../fonts/instrument-sans-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url('../fonts/jetbrains-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#121417;--bg-2:#16191d;--pane:#181b20;--pane-2:#1e2228;--line:#2c3239;--line-2:#3b434c;
  --text:#e8ebee;--soft:#bcc3ca;--mist:#929ba4;
  --cyan:#33c3d1;--cyan-dk:#0d3a3f;--mag:#d94f9b;--mag-lt:#f08cc3;
  --run:#5cc8f0;--ask:#f2b84b;--ok:#9fd36f;--err:#ff7b7b;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,"Courier New",monospace;
  --gut:16px;--maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-width:320px;overflow-x:clip;font:400 1.0625rem/1.6 var(--sans);color:var(--text);-webkit-font-smoothing:antialiased;
  background:radial-gradient(90% 520px at 85% -120px,rgba(51,195,209,.09),transparent 70%) no-repeat,radial-gradient(70% 460px at 0% 30%,rgba(217,79,155,.05),transparent 70%) no-repeat,var(--bg)}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem)}
h3{font-size:1.3rem;line-height:1.2}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2 * var(--gut),var(--maxw));margin-inline:auto}
@media (min-width:700px){:root{--gut:32px}}
.skip{position:absolute;left:12px;top:-90px;z-index:30;padding:10px 18px;background:var(--cyan);color:var(--bg);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.kicker{font:400 .8125rem/1.3 var(--mono);letter-spacing:.04em;color:var(--cyan);margin-bottom:12px}
.kicker::before{content:"# " / "";color:var(--mag-lt)}

/* ---------- Kopf: links „← Profil“, rechts „Demo“ und der Name als Weg zur Startseite
   (eine Grammatik für alle Projektseiten, 31.10.2026: volle Breite, gleicher Seitenabstand, jedes Ziel ≥ 44 px) ---------- */
.top{display:flex;align-items:center;gap:12px;padding:16px clamp(16px,3vw,40px)}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 18px 9px 14px;border:1px solid var(--line-2);border-radius:4px;background:var(--pane);color:var(--text);font-weight:600;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.back:hover{background:var(--cyan);border-color:var(--cyan);color:var(--bg)}
.back.demo{margin-left:auto;white-space:nowrap;gap:0;border-color:rgba(217,79,155,.6)} /* Bedien-Demo mit Fantasiedaten (demo-herdr.html), steht direkt vor dem Namen */
.back.demo:hover{background:var(--mag);border-color:var(--mag);color:#121417}
@media (max-width:599px){.demo-zusatz{display:none}}
.back span[aria-hidden]{font-size:1.15em;line-height:1}
.brand{display:inline-flex;align-items:center;min-height:44px;font:400 .8125rem/1 var(--mono);letter-spacing:.06em;text-decoration:none;white-space:nowrap;color:var(--mist)}
.brand::before{content:"@" / "";color:var(--mag-lt)}
.brand:hover{color:var(--text)}
/* schmale Handys: alle drei Ziele in einer Zeile, der Name ungekürzt */
@media (max-width:399.98px){
  .top{gap:8px}
  .top .back{gap:6px;padding:9px 12px;font-size:.9375rem}
}
@media (max-width:359.98px){
  .top .back{padding:9px 10px}
  .brand{font-size:.75rem;letter-spacing:.02em}
}

/* ---------- Terminalfenster, Pane-Beschriftung, Statuszeile ---------- */
.term{position:relative;border:2px solid var(--cyan);border-radius:6px;background:var(--pane);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.pane-label{display:inline-block;font:400 .8125rem/1.4 var(--mono);color:var(--soft)}
.pane-label::before{content:"┤ ";color:var(--line-2)}
.pane-label::after{content:" ├";color:var(--line-2)}
.term > .pane-label{position:absolute;left:18px;top:-.8em;padding:0 6px;background:var(--bg);color:var(--cyan)}
.status{display:flex;align-items:stretch;flex-wrap:nowrap;gap:0;min-height:30px;overflow:hidden;font:400 .8125rem/30px var(--mono);white-space:nowrap;background:#0b0d0f;color:var(--soft);border-top:1px solid var(--line);border-radius:0 0 4px 4px}
.st-sess{padding:0 10px;background:var(--cyan);color:#06191b}
.st-win{padding:0 10px;color:var(--soft)}
.st-win--on{color:var(--text);background:var(--line)}
.st-fill{flex:1 1 auto;min-width:8px}
.st-right{padding:0 10px;color:var(--mist);border-left:1px solid var(--line)}
.st-right--hi{background:var(--mag);color:#121417;border-left:0} /* dunkel auf Magenta: 5:1 statt 3,8:1 mit Weiß */
@media (max-width:520px){.status .st-n,.status .st-right:not(.st-right--hi){display:none}.st-win{padding:0 8px}} /* schmal: Fenster nur mit Nummer, wie tmux bei wenig Platz */

/* ---------- Einstieg ---------- */
.hero{padding:28px var(--gut) 56px;max-width:calc(var(--maxw) + 2 * var(--gut));margin:0 auto}
.term--hero{display:flex;flex-direction:column;min-height:min(78vh,720px)}
.hero__in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:48px clamp(18px,5vw,72px) 40px}
.eyebrow{font:400 .875rem/1.4 var(--mono);color:var(--mist)}
.eyebrow::before{content:"$ " / "";color:var(--cyan)}
h1{display:flex;flex-direction:column;gap:14px}
.h1-name{display:block;font-size:clamp(2.75rem,1.4rem + 6.4vw,6.5rem);line-height:.98;letter-spacing:-.035em;color:var(--cyan)}
.nw{white-space:nowrap}
.cursor{display:inline-block;width:.42em;height:.74em;margin-left:.12em;vertical-align:-.02em;background:var(--text)}
@media (prefers-reduced-motion:no-preference){.cursor{animation:blink 1.1s steps(1) 0s 3}} /* blinkt dreimal, dann steht er */
@keyframes blink{50%{opacity:0}}
.h1-q{font-size:clamp(1.4rem,1rem + 1.8vw,2.25rem);line-height:1.15;font-weight:600;color:var(--text);max-width:22em}
.lead{max-width:38em;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--soft)}
.cue{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:8px 16px;border:1px dashed var(--line-2);border-radius:4px;font:400 .9375rem/1.3 var(--mono);color:var(--text);text-decoration:none}
.cue:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- Ausgangslage ---------- */
.sit{display:grid;gap:20px 64px;padding-block:72px}
.sit__text{display:grid;gap:18px;max-width:40em;color:var(--soft)}
.sit__text p:first-child{color:var(--text)}
@media (min-width:900px){.sit{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}

/* ---------- Übersicht: vier Panes ---------- */
.split{padding-block:40px 72px;overflow-x:clip}
.split__head{display:grid;gap:14px;margin-bottom:34px}
.split__head p:last-child{max-width:40em;color:var(--soft)}
.split__note{margin-top:14px;font:400 .8125rem/1.5 var(--mono);color:var(--mist)}
.term--split{overflow:hidden}
.panes{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.panes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pane{position:relative;min-height:220px;padding:22px clamp(18px,2.4vw,30px) 26px}
.pane__in{display:grid;gap:10px;align-content:start}
.pane__in > p:not(.pane-label){color:var(--soft);max-width:34em}
.pane h3{color:var(--text)}
.pane__ring{position:absolute;inset:3px;border:2px solid var(--cyan);border-radius:3px;opacity:0;pointer-events:none}
.pane--1 .pane__ring{opacity:1}
/* Teilungslinien: frisch gezogen in Magenta */
.cut{position:absolute;left:0;top:0;right:0;height:2px;background:var(--mag)}
@media (min-width:760px){.pane--2 .cut{right:auto;bottom:0;width:2px;height:auto}.pane--4 .cut{left:-2px}}

/* Schemata in den Panes (keine Messwerte) */
.sch{display:grid;gap:8px;margin-top:8px}
.sch .row{display:flex;align-items:center;gap:10px;min-height:26px}
.bar{display:block;height:8px;flex:0 1 46%;border-radius:2px;background:var(--line-2)}
.bar--m{flex-basis:34%}.bar--s{flex-basis:24%}
.tag{font:400 .8125rem/1.4 var(--mono);padding:1px 8px;border:1px solid currentColor;border-radius:3px;white-space:nowrap}
.tag--run{color:var(--run)}.tag--ask{color:var(--ask)}.tag--ok{color:var(--ok)}
.ok{font:400 .9375rem/1 var(--mono);color:var(--ok);width:1.2em}
.lv{font:400 .8125rem/1.4 var(--mono);width:5.6em;color:var(--run)}
.lv--err{color:var(--err)}.lv--warn{color:var(--ask)}
.meter{position:relative;display:block;height:14px;border:1px solid var(--line-2);border-radius:2px;background:var(--bg-2);max-width:340px}
.meter__fill{position:absolute;left:0;top:0;bottom:0;width:62%;background:repeating-linear-gradient(90deg,var(--cyan) 0 8px,#2aa6b2 8px 10px);transform-origin:0 50%}
.meter__limit{position:absolute;right:-1px;top:-6px;bottom:-6px;width:2px;background:var(--mag)}
.meter__k{display:flex;justify-content:space-between;max-width:340px;font:400 .8125rem/1.4 var(--mono);color:var(--mist)}
.sch--wide .meter,.sch--wide .meter__k{max-width:none}

/* ---------- Live ---------- */
.live{display:grid;gap:36px;padding-block:64px;align-items:center}
.live__text{display:grid;gap:18px;max-width:40em}
.live__text > p{color:var(--soft)}
.states{display:grid;gap:10px}
.state{display:grid;gap:2px;padding:10px 14px 10px 16px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:4px;background:var(--pane)}
.state--run{--c:var(--run)}.state--ask{--c:var(--ask)}.state--ok{--c:var(--ok)}
.state__k{font:400 .875rem/1.4 var(--mono);color:var(--c)}
.state__v{color:var(--text)}
@media (min-width:900px){.live{grid-template-columns:460px minmax(0,1fr);gap:64px}}

/* Abbildungen der Demo */
.shot{display:grid;gap:10px;max-width:460px;width:100%}
.shot a{display:block;border:2px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--bg-2);transition:border-color .2s}
.shot a:hover{border-color:var(--cyan)}
.shot img{width:100%}
.shot figcaption{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:1rem;line-height:1.4;color:var(--soft)}
.shot figcaption strong{color:var(--text);font-weight:600}
.badge{font:400 .8125rem/1.4 var(--mono);padding:1px 8px;border:1px solid var(--mag);border-radius:3px;color:var(--mag-lt)}

/* ---------- Im Detail ---------- */
.detail{padding-block:64px}
.detail__head{margin-bottom:30px}
.cards{display:grid;gap:18px}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:grid;gap:12px;align-content:start;padding:20px 22px 24px;border:1px solid var(--line-2);border-radius:6px;background:var(--pane)}
.card > p:not(.pane-label){color:var(--soft)}
.card .pane-label{color:var(--cyan)}
.perm{display:grid;gap:6px;margin-top:6px;font:400 .875rem/1.5 var(--mono)}
.perm__row{display:flex;justify-content:space-between;gap:12px;padding:4px 10px;border:1px solid var(--line);border-radius:3px;color:var(--soft)}
.perm__row i{font-style:normal;color:var(--mist)}
.perm__row .perm__on{color:var(--ok)}
.tl{display:grid;gap:10px;margin-top:6px}
.tl__row{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:center;gap:10px;font:400 .8125rem/1.4 var(--mono);color:var(--run)}
.tl__row--err{color:var(--err)}.tl__row--warn{color:var(--ask)}
.tl__row b{font-weight:400}
.tl__track{position:relative;display:block;height:16px;border-bottom:1px solid var(--line-2)}
.tk{position:absolute;bottom:0;left:calc(var(--x) * 100%);width:3px;height:14px;background:currentColor;border-radius:1px}
.tk--a{--x:.12}.tk--b{--x:.58}.tk--c{--x:.55}.tk--d{--x:.33}.tk--e{--x:.81}
.detail .split__note{margin-top:16px}

/* ---------- Ergebnis ---------- */
.result{display:grid;gap:32px;padding-block:64px}
.result__text{display:grid;gap:16px;max-width:40em}
.result__text p{color:var(--soft)}
.sizes{display:grid;gap:10px}
.size{display:flex;align-items:center;height:42px;width:calc(var(--w) * 100%);min-width:84px;padding:0 10px;border:2px solid var(--line-2);border-radius:4px;background:var(--pane)}
.size:last-child{border-color:var(--cyan)}
.size b{font:400 .8125rem/1 var(--mono);color:var(--text);white-space:nowrap}
.size--390{--w:.203}.size--820{--w:.427}.size--1440{--w:.75}.size--1920{--w:1}
.figures{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:4px;background:#0b0d0f;overflow:hidden}
.figures li{display:flex;align-items:baseline;gap:10px;padding:12px 18px;border-right:1px solid var(--line);flex:1 1 auto}
.figures li:last-child{border-right:0}
.fig__n{font:400 2rem/1 var(--mono);color:var(--cyan)}
.figures li:nth-child(2) .fig__n{color:var(--mag-lt)}
.figures li:nth-child(3) .fig__n{color:var(--ok)}
.fig__k{color:var(--text)}
@media (min-width:900px){.result{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}.figures{grid-column:1 / -1}}

/* ---------- Demo ---------- */
.demo-sec{display:grid;gap:36px;padding-block:64px;align-items:center}
.demo-sec__text{display:grid;gap:18px;max-width:40em}
.demo-sec__text > p{color:var(--soft)}
.btn{justify-self:start;display:inline-flex;gap:10px;align-items:center;min-height:48px;padding:10px 22px;border-radius:4px;background:var(--cyan);color:#06191b;font-weight:700;text-decoration:none;transition:background-color .2s}
.btn:hover{background:#7fe0ea}
@media (min-width:900px){.demo-sec{grid-template-columns:minmax(0,1fr) 460px;gap:64px}}

/* ---------- Zusammenspiel ---------- */
.rel{padding-block:56px;display:grid;gap:14px}
.rel__lead{max-width:40em;color:var(--soft)}
.rel__card{justify-self:start;display:grid;gap:4px;min-width:min(100%,360px);margin-top:8px;padding:16px 20px;border:2px solid var(--mag);border-radius:6px;background:var(--pane);text-decoration:none;transition:border-color .2s,background-color .2s}
.rel__card:hover{border-color:var(--cyan);background:var(--pane-2)}
.rel__name{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.rel__go{font:400 .875rem/1.4 var(--mono);color:var(--cyan)}

/* ---------- Technik & Rolle ---------- */
.tech{padding-block:56px}
.term--tech{border-color:var(--line-2)}
.term--tech > .pane-label{color:var(--soft)}
.tech__in{padding:34px clamp(18px,4vw,48px) 30px}
.tech h2{margin-bottom:22px}
.cfg{display:grid;gap:0;border-top:1px solid var(--line)}
.cfg__row{display:grid;gap:2px 24px;padding:12px 0;border-bottom:1px solid var(--line)}
.cfg__row dt{font:400 .875rem/1.5 var(--mono);color:var(--cyan)}
.cfg__row dd{color:var(--text)}
@media (min-width:640px){.cfg__row{grid-template-columns:11em minmax(0,1fr);align-items:baseline}}

/* ---------- Weitere Projekte ---------- */
.more{padding-block:56px 40px}
.more__list{display:grid;gap:14px}
@media (min-width:760px){.more__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.more__card{display:grid;gap:4px;height:100%;padding:18px 20px;border:1px solid var(--line-2);border-radius:6px;background:var(--pane);text-decoration:none;transition:border-color .2s,background-color .2s}
.more__card:hover{border-color:var(--cyan);background:var(--pane-2)}
.more__card--next{text-align:right}
.more__dir{font:400 .8125rem/1.4 var(--mono);color:var(--mist)}
.more__code{font:400 .875rem/1.4 var(--mono);color:var(--mag-lt)}
.more__name{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.more__hook{color:var(--soft)}
.more__all{display:inline-flex;gap:8px;align-items:center;min-height:44px;margin-top:16px;font:400 .9375rem/1.3 var(--mono);color:var(--cyan)}

/* ---------- Fuß: Statuszeile ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px;padding:18px var(--gut) 22px;border-top:2px solid var(--cyan);background:#0b0d0f}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font:400 .9375rem/1.3 var(--mono);color:var(--text)}
.foot nav a:hover{color:var(--cyan)}
.foot__sig{margin-left:auto;font:400 .8125rem/1.4 var(--mono);color:var(--mist)}

/* ---------- Druck ---------- */
@media print{
  :root{--text:#15181b;--soft:#33393f;--mist:#4a525a;--cyan:#0b6f79;--mag:#a3246a;--mag-lt:#a3246a;--run:#0b5f8a;--ask:#8a5a00;--ok:#2f6b12;--err:#a32222;--pane:#fff;--pane-2:#fff;--bg-2:#f3f4f5;--line:#c9ced3;--line-2:#a8afb6}
  html,body{background:#fff}
  body{zoom:.8}
  .skip,.top,.cue,.foot .back,.cursor{display:none}
  .hero{padding-bottom:24px}
  .term--hero{min-height:0}
  .term > .pane-label{background:#fff}
  .status,.figures,.foot{background:#fff;color:var(--soft)}
  .st-sess,.st-right--hi{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sit,.split,.live,.detail,.result,.demo-sec,.rel,.tech,.more{padding-block:28px}
  .pane__ring{opacity:0}
  .pane,.card,.shot,.state,.cfg__row,.more__card,.rel__card,.figures,.sizes{break-inside:avoid}
  h2,h3,.kicker{break-after:avoid}
  .meter__fill,.st-sess,.st-right--hi,.tk,.bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}