/* Nosentis Vorabauftritt: Ergänzungen zum kompilierten site.css der Hauptwebsite.
   Nur Komponenten, die es auf der Hauptseite nicht gibt. Tokens kommen aus site.css. */

/* ---- Hero: sichtbar auch ohne JavaScript ------------------------------------
   Die Hauptseite blendet Hero-Elemente per JS-Klasse ein. Hier laufen sie als
   CSS-Animation: kein Observer, kein requestAnimationFrame, kein leerer Hero. */
@keyframes ph-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ph-word{from{transform:translateY(110%)}to{transform:none}}
.hero-in{animation:ph-rise .9s var(--ease-out-expo) both;animation-delay:var(--d,0s)}
.word>span,html.js .word>span,html.js.loaded .word>span{transform:none;transition:none;animation:ph-word 1s var(--ease-out-expo) both;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.hero-in,.word>span,html.js .word>span{animation:none}}

/* ---- Utilities, die im kompilierten site.css fehlen ---------------------------- */
@media (min-width:64rem){.lg\:col-start-9{grid-column-start:9}}

/* ---- Leistungszeilen: Icon statt Nummer ---------------------------------------- */
.row-link .row-glyph{grid-column:span 12;align-self:start;width:28px;height:28px;color:var(--color-ink);transition:color .35s var(--ease-out-expo)}
@media (min-width:48rem){.row-link .row-glyph{grid-column:span 1;width:34px;height:34px;margin-top:.05em}}
.row-link .row-glyph svg{display:block;width:100%;height:100%}
.row-link a:hover .row-glyph{color:var(--color-signal)}

/* ---- Statuszeile (einmaliger Hinweis auf die kommende Website) ---------------- */
.status{display:flex;gap:12px;align-items:flex-start;max-width:68ch;border-top:1px solid var(--color-line);padding-top:16px;font-size:13px;line-height:1.5;color:var(--color-stone)}
.status .dot{flex:none;margin-top:6px;width:8px;height:8px;background:var(--color-signal)}
.status b{font-weight:500;color:var(--color-ink)}

/* ---- Kontaktkarte auf Ink ---------------------------------------------------- */
.contact-card{border:1px solid var(--color-line-inverse);background:var(--color-ink-2);padding:28px}
@media (min-width:48rem){.contact-card{padding:32px}}
.contact-mail{display:inline-block;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.1vw,30px);line-height:1.15;letter-spacing:-.01em;font-variation-settings:"opsz" 36;color:var(--color-paper);overflow-wrap:anywhere}
.contact-mail:hover{color:var(--color-signal)}
.btn-ghost{position:relative;display:inline-flex;align-items:center;gap:12px;padding:14px 24px;font-size:15px;line-height:1;font-weight:500;border:1px solid var(--color-line-inverse);color:var(--color-paper);background:transparent;cursor:pointer;transition:border-color .35s var(--ease-out-expo),color .35s var(--ease-out-expo)}
.btn-ghost:hover{border-color:var(--color-paper)}
.btn-ghost .sq{display:inline-block;flex-shrink:0;width:9px;height:9px;border:1px solid currentColor;transition:background-color .35s var(--ease-out-expo),transform .45s var(--ease-out-expo)}
.btn-ghost.is-copied{border-color:var(--color-paper)}
.btn-ghost.is-copied .sq{background:var(--color-signal);border-color:var(--color-signal);transform:rotate(90deg) scale(1.2)}
.contact-note{font-size:13px;color:var(--color-stone-2)}

/* ---- 404 --------------------------------------------------------------------- */
.e404-code{font-family:var(--font-display);font-weight:300;font-size:clamp(96px,18vw,220px);line-height:.9;letter-spacing:-.04em;color:var(--color-line);font-variation-settings:"opsz" 72;font-variant-numeric:tabular-nums}

/* ---- Rechtsseiten: offene Angaben sichtbar markieren --------------------------
   Felder mit class="ph" sind noch auszufüllen (siehe README). Damit sie auf der
   Live-Seite nicht wie fertiger Text wirken, werden sie leicht abgesetzt. */
.prose-legal .ph{color:var(--color-stone);border-bottom:1px dashed var(--color-line)}