/* Erzwingt auf iOS die typografische statt der Emoji-Darstellung der Pfeile. */
.round-link b,.skill-list article>b,.contact>a b{font-family:Arial,Helvetica,sans-serif;font-variant-emoji:text;font-style:normal}

@media (max-width:800px){.hero .eyebrow{flex-wrap:wrap;row-gap:8px;font-size:9px}}

.skills-head h2 span i{color:#fff;font-style:normal}
br.mobile-break{display:none}

/*
 * Enge Display-Typografie mit genug Luft für Punkte und Umlaute.
 * Die Unterüberschriften bleiben bewusst kompakt, ohne dass Glyphen kollidieren.
 */
.hero-title{line-height:.8}
.intro-copy h2,.skills-head h2,.proof-title h2,.process-intro h2{line-height:1.08}
.skill-list h3,.cert-grid h3,.steps h3{line-height:1.12}
.contact h2{line-height:.8}

@media (max-width:800px){
  .hero-title{
    font-size:clamp(70px,22vw,108px);
    line-height:.82;
  }

  .intro-copy h2,.proof-title h2,.process-intro h2{
    font-size:clamp(31px,10.3vw,44px);
    line-height:1.1;
    white-space:normal;
  }

  .skills-head h2{
    font-size:clamp(21px,6.8vw,31px);
    line-height:1.1;
    white-space:normal;
  }
  .skills-head h2 span{display:block}

  .skill-list article{
    grid-template-columns:36px minmax(0,1fr) 28px;
    gap:14px;
  }

  .skill-list h3{
    font-size:clamp(22px,6.5vw,30px);
    line-height:1.12;
    white-space:normal;
  }

  br.mobile-break{display:initial}
  .skill-list article>b{font-size:24px}

  .cert-grid h3{
    font-size:clamp(25px,7.5vw,31px);
    line-height:1.08;
  }

  .steps h3{
    font-size:clamp(29px,8.5vw,35px);
    line-height:1.08;
  }

  .contact h2{
    font-size:clamp(46px,15.5vw,70px);
    line-height:.88;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .reference-card:hover,.reference-card:focus-within,.post-card:hover,.post-card:focus-within,.portrait:hover img,.skill-list article:hover,.cert-grid article:hover,.back-to-top:hover,.back-to-top:focus-visible,.footer-social-icon:hover,.footer-social-icon:focus-visible{transform:none!important}
}