Wabenhain/src/app/globals.css

@import "tailwindcss";

:root {
  --color-forest: #24352b;
  --color-cream: #f4efe5;
  --color-honey: #b88a44;
  /* WCAG-AA-taugliche Textvarianten (4.5:1): #b88a44 selbst besteht auf
     keinem der beiden Hintergruende zuverlaessig. -dark fuer Text auf
     hellem Grund (Hintergrund/Cream), -light fuer Text auf bg-forest. */
  --color-honey-dark: #8a6531;
  --color-honey-light: #c9a468;
  /* Fuer Text ueber BILDERN statt ueber einer Volltonflaeche. -light besteht
     4.5:1 nur gegen deckendes bg-forest; im Hero liegt der Text aber auf einem
     Foto mit halbdurchlaessiger Abdunklung, und je nach Motiv (helles Holz,
     Himmel) sank der Kontrast dort auf 1,34:1 — die Zeile war praktisch
     unsichtbar. -pale haelt bei der im Hero gesetzten Abdunklung 4,8:1 bis
     7,0:1 und behaelt den Honigton. */
  --color-honey-pale: #e4cfa4;
  --color-background: #faf8f3;
  --color-ink: #242424;
  --color-sage: #788774;
}

@theme inline {
  --color-forest: var(--color-forest);
  --color-cream: var(--color-cream);
  --color-honey: var(--color-honey);
  --color-honey-dark: var(--color-honey-dark);
  --color-honey-light: var(--color-honey-light);
  --color-honey-pale: var(--color-honey-pale);
  --color-background: var(--color-background);
  --color-ink: var(--color-ink);
  --color-sage: var(--color-sage);

  --font-serif: var(--font-cormorant), Georgia, serif;
  --font-sans: var(--font-inter), system-ui, sans-serif;

  /* Eine Bewegungssprache fuer die ganze Seite: selbstbewusstes Ankommen,
     schnelles Gehen (siehe impeccable animate: exit faster than entrance). */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);
}

html {
  scroll-behavior: smooth;
  /* Browserflaechen tragen die Marke mit: Scrollbar im Waldton statt Grau. */
  scrollbar-color: color-mix(in oklab, var(--color-forest) 45%, transparent) transparent;
  accent-color: var(--color-forest);
}

body {
  background: var(--color-background);
  color: var(--color-ink);
  font-family: var(--font-sans);
  caret-color: var(--color-honey-dark);
}

/* Feine Papierkoernung ueber allem: bricht die digitale Glaette der
   Cremeflaechen, wie Etikettenpapier auf dem Glas. Fest, klickdurchlaessig,
   sehr leise — auf dunklen Flaechen kaum, auf hellen gerade spuerbar. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

:focus-visible {
  outline: 2px solid var(--color-honey-dark);
  outline-offset: 3px;
}

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

/* Preise, Mengen, Datumsangaben: gleich breite Ziffern, damit Spalten und
   wechselnde Summen nicht springen. */
.tabular-nums,
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.tracking-wide-caps {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

::selection {
  /* Honig auf Creme erreichte nur ~2,6:1 — markierter Text war kaum lesbar. */
  background: var(--color-honey-pale);
  color: var(--color-forest);
}

/* Unterstrich, der beim Hover von links "einlaeuft" — fuer Textlinks in
   Fliesstext und Navigation. */
.link-draw {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 350ms var(--ease-arrive);
}
.link-draw:hover,
.link-draw:focus-visible {
  background-size: 100% 1px;
}
/* Aktive Seite: kraeftigerer Unterstrich in Honig statt in Textfarbe. */
.link-draw[aria-current="page"] {
  background-image: linear-gradient(var(--color-honey), var(--color-honey));
  background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
  .link-draw {
    transition: none;
  }
}

/* Knopf eines gerade laufenden Server-Action-Formulars (components/
   submit-feedback.tsx): sichtbar "arbeitet", gegen Doppelklick gesperrt. */
[data-pending="true"] {
  cursor: progress;
  opacity: 0.6;
}

[data-pending="true"]::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: wh-spin 0.7s linear infinite;
}

@keyframes wh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pending="true"]::after {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.5;
  }
}

/* Hero: das Bild "atmet" kaum merklich (langsamer Zoom hin und zurueck). */
@keyframes wh-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.07) translate(-1%, -1%);
  }
}

/* Scroll-Hinweis im Hero: ein Honigtropfen loest sich und faellt. */
@keyframes wh-drip {
  0%,
  15% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  30% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  75% {
    transform: translateY(26px) scale(0.9, 1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(34px) scale(0.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-drift,
  .motion-drip {
    animation: none !important;
  }
}

/* Konto: erledigte Abschnitte der Statusleiste "fliessen" nacheinander voll. */
@keyframes wh-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Aktueller Schritt / laufender Status: sanfter Puls um die Wabe. */
@keyframes wh-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-honey) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}

/* Sechseck als Form fuer Icon-Flaechen (gleiche Geometrie wie Logomark). */
.clip-hex {
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

@media (prefers-reduced-motion: reduce) {
  .motion-grow,
  .motion-pulse {
    animation: none !important;
  }
}

/* Formularfelder: weicher Honig-Schein beim Fokus statt nur einer
   Randfarbe — auf allen Formularen einheitlich, ohne jedes einzeln
   anzufassen. Viele Felder setzen focus:outline-none; der Schein
   (box-shadow) bleibt davon unberuehrt. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  transition:
    border-color 200ms var(--ease-arrive),
    box-shadow 250ms var(--ease-arrive);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-honey) 22%, transparent);
}
input::placeholder,
textarea::placeholder {
  color: color-mix(in oklab, var(--color-ink) 45%, transparent);
}

/* Chargen-Seite: das Echtheitssiegel "stempelt" sich beim Oeffnen ein. */
@keyframes wh-stamp {
  0% {
    transform: scale(1.6) rotate(-18deg);
    opacity: 0;
  }
  60% {
    transform: scale(0.94) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-stamp {
    animation: none !important;
  }
}