/* Nur Typografie und Bedienelemente; Szenen und Scrollablauf bleiben erhalten. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/instrument-sans-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/gloock-latin.woff2") format("woff2");
}

:root, .theme-scope {
  --font-display: "Gloock", Georgia, serif;
  --font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

body { font-weight: 400; }
.nav__brand, .hero__brand, .logbook__brand {
  font-style: normal;
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: -.045em;
}
.nav__brand, .hero__brand {
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-kerning: normal;
  font-synthesis: none;
  letter-spacing: -.035em;
}
.hero__brand {
  font-size: clamp(4.25rem, 1rem + 11vw, 12rem);
  line-height: 1.12;
}
.nav__brand { font-size: 1.5rem; }
.hero__title, .support__title, .frame__name, .close__title, .beat__time {
  font-weight: 400;
  font-synthesis: none;
  font-variation-settings: normal;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.logbook__brand, .nav__time {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
}
.hero__lead, .support__text, .beat__text, .frame__text {
  font-weight: 400;
  font-variation-settings: normal;
  line-height: 1.5;
  letter-spacing: -.015em;
}
.nav__time { letter-spacing: 0; }
.field__label { font-weight: 500; }

/* Deckende Flächen halten den Schriftkontrast unabhängig vom Foto stabil. */
.button, .nav__cta, .textlink, .showcase-back {
  --control-bg: #14252d;
  --control-ink: #fffaf0;
  --control-hover: #263e49;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 24px;
  border: 1px solid #14252d;
  border-radius: 2px;
  background: var(--control-bg);
  color: var(--control-ink);
  font-family: var(--font-text);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .025em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease;
}
.textlink {
  --control-bg: #f5f1e8;
  --control-ink: #14252d;
  --control-hover: #ffffff;
  border-color: #657178;
}
.theme-scope .button, html[data-theme="night"] .nav__cta {
  --control-bg: #f5f1e8;
  --control-ink: #14252d;
  --control-hover: #ffffff;
  border-color: #f5f1e8;
}
.nav__cta {
  min-height: 40px;
  padding: 10px 16px;
  font-size: .75rem;
  letter-spacing: .06em;
}
.button::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 9px;
  margin-left: 22px;
  background: currentColor;
  clip-path: polygon(0 43%, 85% 43%, 67% 5%, 72% 0, 100% 50%,
    72% 100%, 67% 95%, 85% 57%, 0 57%);
  transition: transform .2s ease;
}
.button:hover::after { transform: translateX(3px); }
.button:disabled::after, .button[aria-disabled="true"]::after { transform: none; }
.showcase-back {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-color: #f5f1e8;
  border-radius: 2px;
  font-size: 1.125rem;
}
.button:hover, .nav__cta:hover, .textlink:hover, .showcase-back:hover {
  background: var(--control-hover);
  transform: none;
  box-shadow: none;
}
.button:active, .nav__cta:active, .textlink:active, .showcase-back:active {
  transform: translateY(1px);
  box-shadow: none;
}
.button:focus-visible, .nav__cta:focus-visible,
.textlink:focus-visible, .showcase-back:focus-visible {
  outline: 2px solid #14252d;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fffaf0;
}
.button:disabled, .button[aria-disabled="true"] {
  background: #d5dadd;
  color: #45515a;
  border-color: #849198;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.hero__actions { gap: 12px; }

@media (max-width: 420px) {
  .nav__brand { font-size: 1.15rem; padding-left: 48px; padding-right: 5px; }
  .nav__cta { padding-inline: 10px; font-size: .6875rem; letter-spacing: .025em; }
  .nav__clock { gap: 5px; }
  .nav__time { font-size: .8125rem; }
  .hero__actions .button, .hero__actions .textlink {
    padding-inline: 14px;
    font-size: .8125rem;
    letter-spacing: .01em;
  }
  .hero__actions .button::after { flex-basis: 16px; width: 16px; margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .button::after { transition: none; }
  .button:hover::after { transform: none; }
  .button, .nav__cta, .textlink, .showcase-back { transition: none; }
  .button:hover, .nav__cta:hover, .textlink:hover, .showcase-back:hover,
  .button:active, .nav__cta:active, .textlink:active, .showcase-back:active {
    transform: none;
  }
}