/* =========================================================================
   Café SOY: gemeinsame Gestaltung aller Seiten
   Marke: Hintergrund #f5f4f0, Schrift #373735, DM Sans wie auf dem Etikett.
   DM Sans liegt als variable Schrift vor (alle Stärken, normal und kursiv).
   Produktnamen stehen fett in Großbuchstaben wie "ESPRESSO" auf der Tüte,
   Zwischentitel in Medium. Serifen gibt es nur im Logo.

   Formregel (bewusst so festgelegt):
   - Bedienelemente (Buttons, Navigation, Auswahl) sind Pillen.
   - Rahmen und Karten: außen 28px, innen 22px Radius (Doppelrand).
   - Eingabefelder: 14px Radius.
   ========================================================================= */

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-latin-var-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-latin-var-italic.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Markenfarben */
  --cream: #f5f4f0;
  --paper: #fbfaf7;
  --stone: #e9e6df;
  --ink: #373735;
  --night: #1c1c1b;

  /* Aktive Farben (wechseln im dunklen Espresso-Abschnitt) */
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-muted: #5f5e5a;
  --line: rgba(55, 55, 53, 0.14);
  --line-strong: rgba(55, 55, 53, 0.38);
  --shell: rgba(55, 55, 53, 0.045);
  --shell-ring: rgba(55, 55, 53, 0.08);
  --dot-on: #8d8880;
  --dot-off: #d9d6ce;

  --error: #9f2f2d;
  --error-bg: #fdebec;
  --success: #346538;
  --success-bg: #edf3ec;

  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);

  --container: 1320px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --island-top: 16px;
  --island-h: 70px;

  --r-shell: 28px;
  --r-core: 22px;
  --r-field: 14px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Ebenen */
  --z-island: 20;
  --z-menu: 30;
  --z-grain: 40;
}

body.is-night {
  --bg: var(--night);
  --fg: #f5f4f0;
  --fg-muted: #a9a69f;
  --line: rgba(245, 244, 240, 0.14);
  --line-strong: rgba(245, 244, 240, 0.38);
  --shell: rgba(245, 244, 240, 0.05);
  --shell-ring: rgba(245, 244, 240, 0.1);
  --dot-on: #c9c5bc;
  --dot-off: #3d3c39;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--island-top) + var(--island-h) + 1.5rem);
}
html:not(.lenis) {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 900ms var(--ease-soft), color 900ms var(--ease-soft);
}

/* Filmkorn für eine haptische Papieranmutung (fest, nicht klickbar) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background-image: url("/assets/img/grain.png");
  background-size: 128px;
  opacity: 0.045;
  mix-blend-mode: multiply;
}
body.is-night::after {
  mix-blend-mode: screen;
  opacity: 0.035;
}

img,
svg {
  display: block;
  max-width: 100%;
}
figure {
  margin: 0;
}
img {
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -100px;
  z-index: calc(var(--z-menu) + 1);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
@media (max-width: 760px) {
  .eyebrow {
    font-size: 0.75rem;
  }
}

/* ---------- Buttons: Pille mit Icon im eigenen Kreis ---------- */

.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.4rem 0.4rem 0.4rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 500ms var(--ease-soft), background-color 900ms var(--ease-soft), color 900ms var(--ease-soft);
}
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--btn-fg) 14%, transparent);
  transition: transform 600ms var(--ease-soft), background-color 600ms var(--ease-soft);
}
.btn__icon .icon {
  width: 1.15rem;
  height: 1.15rem;
}
@media (hover: hover) {
  .btn:hover .btn__icon {
    transform: translate(3px, -1px) scale(1.06);
    background: color-mix(in srgb, var(--btn-fg) 22%, transparent);
  }
}
.btn:active {
  transform: scale(0.98);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn--plain {
  padding: 0.4rem 1.6rem;
  justify-content: center;
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
@media (hover: hover) {
  .btn--ghost:hover {
    --btn-bg: var(--shell);
  }
}
.btn--block {
  width: 100%;
}

/* ---------- Schwebende Insel-Navigation ---------- */

.island {
  position: fixed;
  top: var(--island-top);
  left: 50%;
  z-index: var(--z-island);
  transform: translateX(-50%);
  width: min(900px, calc(100% - 2rem));
}
.island__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--island-h);
  padding: 0 0.5rem 0 1.6rem;
  border-radius: 999px;
  /* Fast deckend: klarer Kontrast über dem dunklen Video und auf hellen Abschnitten */
  background: rgba(251, 250, 247, 0.94);
  box-shadow: 0 0 0 1px rgba(55, 55, 53, 0.12), 0 18px 50px -20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  color: var(--ink);
}
.island__logo img {
  width: 96px;
}
.island__nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.island__nav a {
  padding: 0.7rem 1.05rem;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}
.island__nav a:hover {
  color: var(--ink);
  background: rgba(55, 55, 53, 0.08);
}
.island__cart {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 54px;
  padding: 0 0.55rem 0 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 500ms var(--ease-soft);
}
.island__cart:active {
  transform: scale(0.97);
}
.island__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(245, 244, 240, 0.16);
  font-variant-numeric: tabular-nums;
}
.island__cart--link {
  margin-left: auto;
  padding: 0 1.25rem;
}
.island__cart-icon {
  display: none;
}
.island__menu {
  display: none;
  position: relative;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: rgba(55, 55, 53, 0.06);
  cursor: pointer;
}
.island__menu span:not(.visually-hidden) {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 500ms var(--ease-soft);
}
.island__menu span:nth-child(1) {
  transform: translateY(-4px);
}
.island__menu span:nth-child(2) {
  transform: translateY(4px);
}
.island__menu[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg);
}
.island__menu[aria-expanded="true"] span:nth-child(2) {
  transform: rotate(-45deg);
}

@media (max-width: 760px) {
  :root {
    --island-h: 64px;
  }
  .island__nav,
  .island__cart-label {
    display: none;
  }
  .island__bar {
    padding-left: 1.2rem;
  }
  .island__logo img {
    width: 84px;
  }
  .island__cart {
    margin-left: auto;
    padding: 0 0.45rem 0 0.95rem;
  }
  .island__cart-icon {
    display: block;
  }
  .island__menu {
    display: block;
  }
}

/* Mobiles Vollbild-Menü */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  align-content: center;
  gap: 2.5rem;
  padding: 7rem var(--gutter) 3rem;
  background: rgba(245, 244, 240, 0.86);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-soft), visibility 0s linear 500ms;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--ease-soft);
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.menu nav a {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-decoration: none;
  transform: translateY(2.5rem);
  opacity: 0;
  transition: transform 700ms var(--ease-soft), opacity 700ms var(--ease-soft);
  transition-delay: 80ms;
}
.menu nav li:nth-child(2) a {
  transition-delay: 150ms;
}
.menu nav li:nth-child(3) a {
  transition-delay: 220ms;
}
.menu nav li:nth-child(4) a {
  transition-delay: 290ms;
}
.menu.is-open nav a {
  transform: none;
  opacity: 1;
}
.menu__meta {
  color: #5f5e5a;
  font-size: 0.95rem;
}
.menu-open .island {
  z-index: calc(var(--z-menu) + 1);
}

/* ---------- Doppelrand-Rahmen für Bilder und Karten ---------- */

.frame {
  padding: 7px;
  border-radius: var(--r-shell);
  background: var(--shell);
  box-shadow: 0 0 0 1px var(--shell-ring);
  transition: background-color 900ms var(--ease-soft), box-shadow 900ms var(--ease-soft);
}
.frame__core {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-core);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
  background: var(--stone);
}
.frame__core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Fußbereich ---------- */

.footer {
  position: relative;
  padding-top: clamp(5rem, 10vw, 8rem);
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  gap: 3rem;
}
.footer__claim {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  max-width: 14ch;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  align-content: start;
}
.footer h2 {
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
@media (max-width: 760px) {
  .footer h2 {
    font-size: 0.75rem;
  }
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.footer a {
  text-decoration: none;
}
.footer a:not(.btn):hover {
  text-decoration: underline;
}
.footer .btn {
  margin-top: 1.5rem;
}
.footer__logo {
  display: flex;
  justify-content: center;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-inline: var(--gutter);
}
.footer__logo img {
  width: clamp(200px, 30vw, 420px);
  opacity: 0.92;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem 2rem;
  font-size: 0.85rem;
  color: var(--fg-muted);
}
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.1fr 1.4fr;
  }
}

/* ---------- Warenkorb (immer hell) ---------- */

.drawer {
  --fg: var(--ink);
  --bg: var(--paper);
  --fg-muted: #5f5e5a;
  --line: rgba(55, 55, 53, 0.12);
  --line-strong: rgba(55, 55, 53, 0.38);
  position: fixed;
  inset: 10px 10px 10px auto;
  width: min(460px, calc(100vw - 20px));
  max-width: none;
  height: calc(100dvh - 20px);
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-shell);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(55, 55, 53, 0.08), 0 40px 80px -30px rgba(28, 28, 27, 0.45);
  transform: translateX(calc(100% + 20px));
  transition: transform 650ms var(--ease-soft), display 650ms allow-discrete, overlay 650ms allow-discrete;
}
.drawer[open] {
  display: flex;
  flex-direction: column;
  transform: translateX(0);
}
@starting-style {
  .drawer[open] {
    transform: translateX(calc(100% + 20px));
  }
}
.drawer::backdrop {
  background: rgba(28, 28, 27, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1rem 1.1rem 1.75rem;
}
.drawer__head h2 {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 999px;
  background: rgba(55, 55, 53, 0.06);
  color: var(--ink);
  cursor: pointer;
  transition: transform 500ms var(--ease-soft), background-color 300ms var(--ease);
}
@media (hover: hover) {
  .icon-btn:hover {
    transform: rotate(90deg);
    background: rgba(55, 55, 53, 0.1);
  }
}
.icon-btn:active {
  background: rgba(55, 55, 53, 0.12);
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.75rem;
}
.drawer__foot {
  display: grid;
  gap: 1rem;
  margin: 0.5rem;
  padding: 1.25rem 1.25rem 1.25rem;
  border-radius: var(--r-core);
  background: var(--cream);
}
.cart-empty {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding-block: 2rem;
  color: var(--fg-muted);
}
.cart-empty p {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ink);
}
.cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
}
.cart-item img {
  width: 72px;
  height: 90px;
  padding: 8px 14px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--cream);
}
.cart-item__name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.cart-item__meta {
  font-size: 0.875rem;
  color: var(--fg-muted);
}
.cart-item__price {
  font-variant-numeric: tabular-nums;
}
.qty {
  display: inline-flex;
  align-items: center;
  margin-top: 0.7rem;
  padding: 3px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
@media (hover: hover) {
  .qty button:hover {
    background: rgba(55, 55, 53, 0.07);
  }
}
.qty button:active {
  background: rgba(55, 55, 53, 0.12);
}
/* Mit dem Finger: Mengen-Knöpfe groß genug zum Treffen */
@media (pointer: coarse) {
  .qty button {
    width: 2.6rem;
    height: 2.6rem;
  }
}
.qty button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.qty output {
  min-width: 2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cart-item__sold-out {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--error);
}
.cart-item__remove {
  position: relative;
  display: block;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.cart-item__remove::after {
  content: "";
  position: absolute;
  inset: -0.5rem -0.6rem;
}
.summary {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.summary dt {
  color: var(--fg-muted);
}
.summary dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.summary .summary__total {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
}
.summary .summary__total dt {
  color: var(--ink);
}
.drawer__note {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-muted);
}
@media (max-height: 760px) {
  .drawer__head {
    padding: 1rem 0.75rem 0.75rem 1.5rem;
  }
  .drawer__head h2 {
    font-size: 1.7rem;
  }
  .drawer__body {
    padding-inline: 1.5rem;
  }
  .cart-item {
    padding-block: 0.85rem;
  }
  .drawer__foot {
    gap: 0.7rem;
    padding: 1rem 1.1rem;
  }
  /* Versand ist immer kostenlos: Die Zwischensumme ist gleich der Summe. */
  .summary .summary__sub {
    display: none;
  }
  .drawer__note {
    font-size: 0.76rem;
  }
}

.alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-field);
  font-size: 0.95rem;
}
.alert--error {
  background: var(--error-bg);
  color: var(--error);
}
.alert--success {
  background: var(--success-bg);
  color: var(--success);
}
.alert[hidden] {
  display: none;
}

/* ---------- Textseiten (Rechtliches, Danke, Widerruf) ---------- */

.page {
  padding-block: calc(var(--island-top) + var(--island-h) + clamp(3rem, 8vw, 6rem)) clamp(4rem, 8vw, 7rem);
}
.page__inner > * {
  max-width: 46rem;
}
.page h1 {
  margin-bottom: 2.25rem;
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.045em;
  /* Lange Wörter wie "Geschäftsbedingungen" dürfen auf dem Handy umbrechen. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.prose h2 {
  margin: 2.75rem 0 0.75rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.prose h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1rem;
}
.prose ul,
.prose ol {
  padding-left: 1.25rem;
}
.prose li + li {
  margin-top: 0.35rem;
}
.prose address {
  margin-bottom: 1rem;
  font-style: normal;
}
.notice {
  margin-bottom: 2.25rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-field);
  background: var(--stone);
  font-size: 0.95rem;
}
.box {
  padding: 1.35rem 1.6rem;
  border-radius: var(--r-core);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.actions {
  margin-top: 2.25rem;
}
.section-gap {
  margin-top: 3rem;
}

/* ---------- Formulare ---------- */

.form {
  display: grid;
  gap: 1.35rem;
  max-width: 36rem;
}
.field {
  display: grid;
  gap: 0.45rem;
}
.field label {
  font-weight: 500;
}
.field__hint {
  font-size: 0.875rem;
  color: var(--fg-muted);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: var(--r-field);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: inherit;
}
.field textarea {
  min-height: 8rem;
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.field input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--error);
}
.field__error {
  font-size: 0.875rem;
  color: var(--error);
}
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Bewegung ---------- */

/* Startzustände nur, wenn JavaScript-Animationen aktiv sind (Klasse von boot.js). */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}