/* A quiet frame for Annie's photographs and showreel. */
@import url("fonts/fonts.css");
.rv { opacity: 1; transform: none; transition: none; }
.glow, .wave-line { display: none; }
.chip, .wave-line i { animation: none; }
.video .play::before { display: none; }
.portrait .frame { will-change: auto; }
.hero .eyebrow { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink); }
.hero h1 em { font: inherit; color: inherit; }
.chip b, .chip .ic, .back-link, .back-link:visited { color: var(--ink); }
.quote cite, .logos small { color: var(--ink); }
.refs { background: #526858; box-shadow: none; }
.refs .col { background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; padding: 0 20px; }
.refs .col + .col { border-left: 1px solid #a8b6ac; }
.refs li span { color: #fff; white-space: normal; text-align: right; }
.refs h3 { font-size: 17px; text-transform: none; letter-spacing: 0; }
.btn:hover { transform: none; }
.nav .btn, .mbar .btn, .mfoot .btn, .btn.sage, .chips button.on { background: #8FA394; color: #202a24; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; padding: 12px 20px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:where(a,button,input,textarea,[tabindex]):focus-visible { outline: 3px solid #344e3c; outline-offset: 5px; }
.refs :focus-visible { outline-color: white; }
main:focus { outline: none; }
section[id] { scroll-margin-top: 105px; }
.menu a, .menu button.dd { min-height: 44px; display: inline-flex; align-items: center; }
.lang { min-height: 44px; }
.sedcard-link { display: inline-block; margin-top: 28px; text-decoration: underline; text-underline-offset: 5px; }
.form-note { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.form-note a { text-decoration: underline; }
fieldset { border: 0; min-width: 0; }
legend { margin-bottom: 8px; font-size: 14px; }
.honeypot { position: absolute; left: -10000px; }
#form-status { font-size: 14px; }
#form-status:empty { display: none; }
.btn:disabled { opacity: .65; cursor: wait; }
.logo-track { display: contents; }
.logos .row img[aria-hidden] { display: none; }
@media (max-width: 900px) {
  /* Portrait and text occupy separate space, even on small or short phones. */
  .hero { min-height: 0; padding: 24px 0 48px; display: block; }
  .hero .wrap { display: flex; flex-direction: column; padding-bottom: 0; gap: 24px; }
  .hero .portrait { order: -1; position: relative; inset: auto; width: 100%; height: min(64svh, 520px); }
  .hero .portrait .frame { height: 100%; border-radius: 14px; }
  .hero .portrait .frame::after { display: none; }
  .hero .portrait .photo { object-position: 50% 20%; }
  .hero .wrap > .rv:first-child { width: 100%; }
  .hero h1 { font-size: clamp(42px, 12vw, 64px); }
  .bio .stack { max-width: 360px; width: 100%; margin: auto; padding: 0; }
  .bio .stack .small { display: none; }
  .bio .stack .main { transform: none; }
  .bio .stack .main .photo { aspect-ratio: 4/3; }
  .bio .wrap { gap: 32px; }
  .nw { white-space: normal; }
  .mbar { left: auto; right: 16px; padding: 0; width: auto; border: 0; background: none; backdrop-filter: none; visibility: hidden; }
  .mbar.show { visibility: visible; }
  .mbar .btn { padding: 12px 24px; min-height: 44px; font-size: 12px; }
  .mbar-mail { display: none; }
  .refs .col + .col { border-left: 0; border-top: 1px solid #a8b6ac; }
  .refs .cols { gap: 0; }
  .refs .col { padding: 0; }
  .logos { margin-top: 0; }
  .logos .card { background: transparent; border-radius: 0; box-shadow: none; padding: 8px 0; align-items: start; overflow: hidden; }
  .logos .row { display: flex; flex-wrap: nowrap; overflow: hidden; width: 100%; zoom: 1; gap: 0; justify-content: start; }
  .logo-track { display: flex; gap: 36px; align-items: center; flex: none; padding: 30px 36px 30px 0; animation: annie-logos 32s linear infinite; }
  .logos .row img { flex: none; max-width: 130px; object-fit: contain; }
  .logos .row img[aria-hidden] { display: block; }
  .logos .row:hover .logo-track, .logos .row:focus-within .logo-track { animation-play-state: paused; }
  .msheet { overflow-y: auto; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
  .mlinks a, .msub > span { font-size: clamp(26px, 5svh, 40px); }
  .mlinks a.on { color: #4c6253; }
  .mfoot a { overflow-wrap: anywhere; }
  .direct a { max-width: 100%; overflow-wrap: anywhere; }
  footer nav { flex-wrap: wrap; }
}
@keyframes annie-logos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .logo-track { overflow-x: auto; width: 100%; }
  .logos .row img[aria-hidden] { display: none; }
}
.photo { height: auto; }
.portrait .photo { aspect-ratio: 4 / 5; }
.quote blockquote em { color: #5E7465; }
.grid figcaption, .masonry figcaption { background: rgba(20,24,21,.78); padding: 3px 6px; border-radius: 3px; }
@media (max-width: 900px) { .hero .portrait .photo { height: 100%; aspect-ratio: auto; } }
.video .slot video { width: 100%; height: 100%; object-fit: cover; }
.video.on .slot video { object-fit: cover; }
form[hidden] { display: none; }
.contact-fallback { align-self: center; padding: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-fallback h3 { font-size: 24px; font-weight: 500; margin-bottom: 12px; }
.contact-fallback .btn { margin-top: 24px; }
.refs li span { white-space: nowrap; flex-shrink: 0; }
/* Visibility must change immediately so focus can enter the menu. */
@media (max-width: 900px) { .msheet { transition: opacity .2s, transform .2s; } }

/* Annies transparentes Original-Logo. */
.nav .logo { flex: 0 0 auto; min-height: 44px; }
.nav .brand-logo { display: block; width: 180px; height: 60px; object-fit: contain; }
@media (max-width: 900px) {
  .nav .brand-logo { width: clamp(120px, 38vw, 156px); height: auto; }
  .nav { gap: 12px; }
  .nav .right { gap: 10px; }
}

/* Sprachschalter: feste Breite und zentrierter Knopf bei 44px Touchfläche. */
.nav .right { flex-shrink: 0; }
.lang { flex: 0 0 70px; width: 70px; height: 44px; }
.lang .knob { top: 50%; transform: translateY(-50%); }
@media (min-width: 901px) and (max-width: 1100px) {
  .nav { gap: 16px; }
  .nav .brand-logo { width: 150px; height: 50px; }
  .menu { gap: 16px; letter-spacing: .08em; }
  .nav .right { gap: 12px; }
}

/* Galerie: Kacheln bleiben stehen, nur das Foto folgt der Maus. */
.gal .grid figure:hover, .masonry figure:hover { transform: none; box-shadow: var(--sh-md); }
.gal .grid figure img, .masonry figure img { transition: transform .35s ease-out; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gal .grid figure.photo-moving img, .masonry figure.photo-moving img {
    transform: translate(var(--photo-x, 0px), var(--photo-y, 0px)) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gal .grid figure img, .masonry figure img { transform: none !important; }
}

/* Keep the same crop when sound is enabled; never expose the poster behind playback. */
.video .slot video { display: block; position: absolute; inset: 0; background: #25272b; }
.video.on .poster, .video.muted .poster { visibility: hidden; }