/* ============================================================
   WindmillBay – Terminal-Stil
   Gemeinsames Stylesheet für Landingpage und Unterseiten.
   Schrift liegt lokal (kein Google-Fonts-Request).
   ============================================================ */

@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root{
  --bg:#0A0E14;
  --panel:#0D1420;
  --panel-top:#101A2A;
  --line:#1B2534;
  --line-soft:#223047;
  --text:#BFCBD9;
  --dim:#566270;
  --green:#5CCFA3;
  --amber:#E6B450;
  --cyan:#59C2FF;
  --red:#F07178;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:"JetBrains Mono","Cascadia Code",Consolas,Menlo,monospace;
  padding:48px 20px 80px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Terminal-Fenster ---------- */
.t-win{
  max-width:900px;margin:0 auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.t-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;
  background:var(--panel-top);border-bottom:1px solid var(--line);
}
.t-dot{width:11px;height:11px;border-radius:50%}
.t-dot.r{background:var(--red)}
.t-dot.y{background:var(--amber)}
.t-dot.g{background:var(--green)}
.t-bar-title{
  margin-left:10px;font-size:12px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.t-body{padding:26px 26px 34px;font-size:14px;line-height:1.75;overflow-x:auto}
.t-block{margin-bottom:20px}

/* ---------- Prompt & Typing ---------- */
.t-cmd{white-space:nowrap}
.t-prompt{color:var(--green);font-weight:700}
.t-path{color:var(--cyan)}
.t-type{
  display:inline-block;vertical-align:bottom;
  white-space:pre;overflow:hidden;
  width:0;
  animation:t-type var(--t,.8s) forwards;
  animation-delay:var(--d,0s);
}
.t-s8{animation-timing-function:steps(8,end)}
.t-s14{animation-timing-function:steps(14,end)}
.t-s24{animation-timing-function:steps(24,end)}
@keyframes t-type{from{width:0}to{width:var(--w)}}
.t-out{
  opacity:0;
  animation:t-in .4s ease forwards;
  animation-delay:var(--d,0s);
}
@keyframes t-in{to{opacity:1}}
.t-dim{color:var(--dim)}
.t-green{color:var(--green)}
.t-amber{color:var(--amber)}
.t-cyan{color:var(--cyan)}
.t-hr{border:0;border-top:1px dashed var(--line-soft);margin:26px 0}

/* ---------- Loading (ls apps/) ---------- */
.t-spin{position:relative;display:inline-block;width:1ch;color:var(--amber)}
.t-spin span{
  position:absolute;left:0;top:0;opacity:0;
  animation:t-spinf .72s steps(1,end) infinite;
  animation-delay:var(--sd,0s);
}
@keyframes t-spinf{0%,24.9%{opacity:1}25%,100%{opacity:0}}
.t-dots{
  display:inline-block;width:3ch;overflow:hidden;white-space:pre;
  vertical-align:bottom;
  animation:t-dotsa 1.4s steps(4,end) infinite;
}
@keyframes t-dotsa{from{width:0}to{width:4ch}}
.t-progress{position:relative;display:inline-block;vertical-align:bottom}
.t-barbase{color:var(--line-soft)}
.t-barfill{
  position:absolute;left:0;top:0;
  width:0;overflow:hidden;white-space:pre;
  color:var(--green);
  animation:t-bara 2.6s steps(17,end) forwards;
  animation-delay:var(--d,0s);
}
@keyframes t-bara{to{width:85%}}
.t-pct{opacity:0;animation:t-in .3s ease forwards;animation-delay:var(--d,0s)}

/* ---------- Windmühle ---------- */
.t-mill{opacity:0;animation:t-in .5s ease forwards;animation-delay:var(--d,0s)}
.t-mill svg{
  color:var(--green);
  filter:drop-shadow(0 0 10px rgba(92,207,163,.35));
}
@keyframes millspin{to{transform:rotate(360deg)}}

/* ---------- Cursor & Links ---------- */
.t-cursorline{opacity:0;animation:t-in .3s ease forwards;animation-delay:var(--d,0s)}
.t-cursor{
  display:inline-block;width:9px;height:18px;
  background:var(--text);vertical-align:text-bottom;margin-left:2px;
  animation:t-blink 1.05s steps(2,start) infinite;
}
@keyframes t-blink{to{visibility:hidden}}
.t-links{margin-top:28px;font-size:13px}
.t-links a{
  color:var(--cyan);text-decoration:none;
  border-bottom:1px solid rgba(89,194,255,.35);
  margin-right:22px;
}
.t-links a:hover{color:#BFE6FF;border-bottom-color:#BFE6FF}
.t-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

/* ---------- Dokumentseiten (Impressum, Datenschutz) ---------- */
.t-doc{max-width:72ch}
.t-doc h1{
  font-size:16px;font-weight:700;color:var(--text);
  margin:6px 0 20px;
}
.t-doc h1::before{content:"# ";color:var(--amber)}
.t-doc h2{
  font-size:14px;font-weight:700;color:var(--amber);
  margin:28px 0 8px;
}
.t-doc h2::before{content:"## "}
.t-doc p{margin:0 0 12px}
.t-doc address{font-style:normal;margin:0 0 12px}
.t-doc a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(89,194,255,.35)}
.t-doc a:hover{color:#BFE6FF;border-bottom-color:#BFE6FF}
.t-doc a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.t-list{list-style:none;margin:0 0 12px;padding:0}
.t-list li{padding-left:2ch;position:relative}
.t-list li::before{content:"- ";position:absolute;left:0;color:var(--dim)}
.t-backlink{
  color:var(--green);text-decoration:none;
  border-bottom:1px solid rgba(92,207,163,.4);
}
.t-backlink:hover{color:#9FE8CD;border-bottom-color:#9FE8CD}
.t-backlink:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

@media(max-width:640px){
  body{padding:24px 12px 48px}
  .t-body{padding:18px 14px 26px;font-size:12.5px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}