/* ============================================================
   Termynal — Terminal-Animation Styles
   (kompatibel zu termynal.js, an JHC-Farbsystem angepasst)
   ============================================================ */

[data-termynal]{
  background:var(--jhc-ink);
  color:var(--jhc-cream);
  font-family:var(--font-mono);
  font-size:.95rem;
  line-height:1.9;
  border-radius:12px;
  padding:3.25rem 2rem 2rem;
  position:relative;
  min-height:240px;
  box-shadow:0 30px 70px -30px rgba(15,42,46,.5);
  overflow:hidden;
}

/* macOS-Window-Hint (rote, gelbe, grüne Punkte oben links) */
[data-termynal]::before{
  content:'';
  position:absolute;
  top:1.25rem;
  left:1.5rem;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff5f56;
  box-shadow:
    20px 0 0 #ffbd2e,
    40px 0 0 #27c93f;
}

[data-termynal] [data-ty]{
  display:block;
  white-space:pre-wrap;
  line-height:1.9;
  color:var(--jhc-cream);
}

/* Prompt-Zeichen ($, (y/n) ...) in Orange vor der Zeile */
[data-termynal] [data-ty-prompt]::before{
  content:attr(data-ty-prompt);
  margin-right:.6em;
  color:var(--jhc-orange);
  font-weight:600;
}

/* Progress-Punkte und Prozent-Anzeige in Teal-Soft */
[data-termynal] [data-ty="progress"]{
  color:var(--jhc-teal-soft);
}

/* E-Mail-Link in Orange */
[data-termynal] a{
  color:var(--jhc-orange);
  border-bottom:1px solid rgba(240,138,28,.4);
  text-decoration:none;
  transition:color .2s ease, border-color .2s ease;
}
[data-termynal] a:hover{
  color:var(--jhc-white);
  border-bottom-color:var(--jhc-white);
}

/* Blinkender Cursor während Typing */
[data-termynal] .ty-cursor::after{
  content:'▋';
  margin-left:.15em;
  color:var(--jhc-cream);
  animation:ty-blink 1s step-end infinite;
}
@keyframes ty-blink{
  50%{ opacity:0; }
}