/* Oliver Adam – Basis-Styles (Layout-Styles stehen inline im HTML) */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0F1110; }

a { color: #F2F2F2; text-decoration: none; }
a:hover { color: #B8693D; }

/* Markenband: läuft von links nach rechts */
@keyframes oa-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.oa-track { animation: oa-marquee 60s linear infinite; }
.oa-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.oa-marquee:hover .oa-track { animation-play-state: paused; }

/* Navigation: Desktop-Menü ab 820 px, darunter Burger-Menü rechts */
[hidden] { display: none !important; }
.oa-burger:hover { border-color: #B8693D !important; color: #B8693D !important; }
.oa-burger:focus-visible { outline: 2px solid #B8693D; outline-offset: 3px; }
@media (max-width: 819px) {
  .oa-nav-desktop { display: none !important; }
  .oa-burger { display: inline-flex !important; }
}
@media (min-width: 820px) {
  .oa-mobile-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oa-track { animation: none; }
}

/* Expertise- und Portfolio-Karten: immer drei nebeneinander, auf dem Handy untereinander */
@media (max-width: 719px) {
  .oa-portfolio-grid { grid-template-columns: 1fr !important; }
}

/* Scroll-Effekte (wie Drosdeck Digital): Fortschrittsbalken, fester Kopf, Überschriften-Reveal, Linien, Uhr */
.oa-fortschritt{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform-origin:left;transform:scaleX(0);pointer-events:none}
.oa-kopf{transition:background-color .4s cubic-bezier(.22,.61,.2,1),border-color .4s cubic-bezier(.22,.61,.2,1)}
.oa-kopf.fest{background:rgba(15,17,16,.82) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.oa-reveal{display:block;overflow:hidden;padding:0 .1em .14em 0;margin-bottom:-.14em}
.oa-reveal>span{display:block}
.oa-js .oa-reveal>span{transform:translateY(105%);transition:transform 1.1s cubic-bezier(.22,.61,.2,1)}
.oa-js .oa-reveal.sichtbar>span{transform:none}
.oa-zeile::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#2E3330;transform-origin:left}
.oa-js .oa-zeile::before{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.22,.61,.2,1);transition-delay:var(--oa-d,0s)}
.oa-js .oa-zeile.sichtbar::before{transform:scaleX(1)}
.oa-uhr{will-change:transform}
.oa-js .oa-ring{stroke-dasharray:1;stroke-dashoffset:1}
.oa-js .oa-uhr.gezeichnet .oa-ring{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.22,.61,.2,1)}
.oa-js .oa-uhr.gezeichnet .oa-ring+.oa-ring{transition-delay:.35s}
@media (prefers-reduced-motion: reduce){
.oa-js .oa-reveal>span{transform:none;transition:none}
.oa-js .oa-zeile::before{transform:none;transition:none}
.oa-js .oa-ring{stroke-dasharray:none;stroke-dashoffset:0}
}