/*
 * Die Gestaltung von nori-nutrition.app — genommen aus dem Pitch-Deck (November 2026) und der App:
 * Salbei als Grund, Waldgrün für kräftige Flächen, Papierweiß für Karten, Nunito wie in der App, kräftig und eng gesetzt.
 *
 * Diese Datei gilt für alle Seiten (Kopf, Fuß, Knöpfe, Felder, die Mail-Seiten, Rechtstexte). Was nur die Startseite
 * braucht, steht in ihren Bausteinen und wird von Astro als Datei unter /_astro/ gebündelt — die CSP lässt nichts
 * Eingebettetes zu.
 */

@font-face {
  font-family: "Nunito";
  src: url("/schrift/nunito-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/schrift/nunito-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/schrift/nunito-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/schrift/nunito-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Aus dem Deck gemessen */
  --salbei: #e9eee0;
  --salbei-tief: #dde5d2;
  --blatt: #c4d8b5;
  --trieb: #9bc184;
  --moos: #4a6b40;
  --wald: #32492d;
  --wald-tief: #24361f;
  --papier: #fbfcfa;
  --tinte: #1c2119;
  --gold: #e8b547;
  --glut: #eaa04a;
  --himmel: #87b7e5;

  /* Rollen */
  --text: var(--tinte);
  --gedaempft: #56634f;
  --rand: #d3dcc8;
  --rot: #b3402e;
  --frisch: var(--trieb);
  --flaeche: var(--papier);
  --schatten: 0 1px 2px rgb(36 54 31 / 6%), 0 8px 24px rgb(36 54 31 / 7%);
  --schatten-hoch: 0 2px 4px rgb(36 54 31 / 8%), 0 24px 48px rgb(36 54 31 / 14%);
  --todo: #8f5f1a;
  --todo-flaeche: #f2e9d8;

  /* Bewegung wie in der App: schnell raus, weich rein; die Feder schießt kurz über */
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --feder: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Maße */
  --rand-seite: clamp(16px, 4vw, 48px);
  --breite: 1200px;
  --kopf-hoehe: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--salbei);
  color: var(--text);
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Der Schein und die Bänder ragen absichtlich über den Rand. Am body allein reicht das Abschneiden nicht: Handys
   machen den Viewport dann so breit wie das Breiteste (566 statt 390 px), zoomen heraus und schieben den
   mitlaufenden Knopf aus dem Bild. Auf main hält es, und clip lässt position: sticky heil. */
main {
  overflow-x: clip;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
}
h2 {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
}
h3 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--wald);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--trieb);
}
a:hover {
  text-decoration-color: currentColor;
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.springen {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--wald);
  color: var(--papier);
  font-weight: 800;
}
.springen:focus {
  top: 12px;
}

.huelle {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand-seite));
  margin: 0 auto;
  padding: 0 var(--rand-seite);
}

/* ---------------------------------------------------------------- Knöpfe und Felder */

.knopf,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--wald);
  color: var(--papier);
  font: inherit;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--feder),
    background-color 0.2s linear;
}
.knopf:hover,
button:hover {
  background: var(--wald-tief);
}
.knopf:active,
button:active {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.knopf.hell {
  background: var(--papier);
  color: var(--wald);
}
.knopf.hell:hover {
  background: #fff;
}
.knopf.klein {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.9375rem;
}

label {
  display: block;
  font-weight: 800;
  font-size: 0.9375rem;
  margin: 0 0 6px;
}
input[type="email"],
input[type="password"],
input[type="text"] {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 2px solid var(--rand);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color 0.15s linear;
}
input:focus {
  outline: none;
  border-color: var(--wald);
}

/* ---------------------------------------------------------------- Kopf */

.kopf {
  /* Nicht fixiert (Nils 12.11.2026): die Marke steht oben und scrollt mit weg */
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--kopf-hoehe);
}
.kopf-innen {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wald);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.logo img {
  width: 30px;
  height: auto;
}
/* ---------------------------------------------------------------- Fuß */

.fuss {
  background: var(--wald-tief);
  color: var(--blatt);
  padding: 64px 0 32px;
  font-size: 0.9375rem;
}
.fuss a {
  color: var(--papier);
  text-decoration: none;
}
.fuss a:hover {
  text-decoration: underline;
}
.fuss-innen {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.fuss .logo {
  color: var(--papier);
}
.fuss-marke p {
  margin-top: 12px;
  max-width: 30ch;
}
.fuss-spalte {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fuss-titel {
  color: var(--trieb);
  font-weight: 800;
}
.kanaele {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.kanaele a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(251 252 250 / 10%);
  transition: background-color 0.15s linear;
}
.kanaele a:hover {
  background: rgb(251 252 250 / 20%);
}
.kanaele svg {
  width: 20px;
  height: 20px;
  fill: var(--papier);
}
.fuss-unten {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgb(196 216 181 / 18%);
  color: var(--trieb);
}
@media (max-width: 700px) {
  .fuss-innen {
    grid-template-columns: 1fr 1fr;
  }
  .fuss-marke {
    grid-column: 1 / -1;
  }
}
/* Handy: in einer halben Spalte bräche die Mailadresse mitten im Wort */
@media (max-width: 480px) {
  .fuss-innen {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------------------------------------------------------------- Schmale Seiten: Mail-Links, Einladung, 404, Rechtstexte */

main.eng {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 48px) var(--rand-seite) 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
main.eng > h1 {
  font-size: clamp(2.25rem, 7vw, 3rem);
}
main.eng.text {
  max-width: 760px;
}
main.eng .nori {
  width: 120px;
  align-self: flex-start;
}
.karte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 28px;
  background: var(--papier);
  box-shadow: var(--schatten);
}
.karte h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.karte ul {
  margin: 0;
  padding-left: 22px;
}
.karte button {
  align-self: flex-start;
  margin-top: 6px;
}
.karte label {
  margin-top: 4px;
}
.code {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--salbei);
  font-weight: 700;
  word-break: break-all;
}
.meldung {
  color: var(--moos);
  font-weight: 800;
}
.fehler {
  color: var(--rot);
  font-weight: 700;
}
.stand {
  color: var(--gedaempft);
  font-size: 0.9375rem;
}

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

/* ---------------------------------------------------------------- Nur lokal (make web): offene Punkte */

.todo-knopf {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--todo);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  box-shadow: var(--schatten-hoch);
}

[data-todo] {
  position: relative;
}

.todo-marke {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--todo);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

mark.todo-text {
  background: var(--todo-flaeche);
  color: var(--todo);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 700;
}

.todo-liste h2 {
  font-size: 30px;
  margin-top: 24px;
}

.todo-liste h3 {
  font-size: 18px;
  margin-top: 8px;
}

.todo-liste hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--rand);
}

.todo-liste li {
  margin: 4px 0;
}

.todo-liste input[type="checkbox"] {
  width: auto;
  margin: 0 8px 0 0;
  accent-color: var(--blatt);
}

.todo-liste ul {
  padding-left: 22px;
}

.todo-liste blockquote {
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--frisch);
  background: var(--flaeche);
  border-radius: 0 12px 12px 0;
}

/* ---------------------------------------------------------------- Bewegung nur, wenn erwünscht */

/* „+10 XP“ steigt von einer Quest auf (Startseite und Vorab-Seite; das Element hängt am body) */
.xp-flug {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  font-weight: 900;
  font-size: 18px;
  color: #f6c34a;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: xp-steigt 0.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes xp-steigt {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translateY(-46px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- Hereinfliegen (start/einfliegen.ts) */

.flug [data-flug] {
  transition:
    opacity 0.7s var(--weich),
    transform 1s var(--feder);
  transition-delay: var(--verz, 0s);
}
.flug [data-flug]:not(.da) {
  opacity: 0;
}
.flug [data-flug="unten"]:not(.da) {
  transform: translateY(56px);
}
.flug [data-flug="links"]:not(.da) {
  transform: translateX(-80px) rotate(-6deg);
}
.flug [data-flug="rechts"]:not(.da) {
  transform: translateX(80px) rotate(6deg);
}
.flug [data-flug="pop"]:not(.da) {
  transform: scale(0.6) rotate(-10deg);
}

/* ---------------------------------------------------------------- Nori antippen (start/antippen.ts) */

[data-antippen-bild] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transform-origin: 50% 92%;
  transition: scale 0.16s var(--weich);
}
[data-antippen-bild].nori-gedrueckt {
  scale: 1.07 0.86;
}
[data-antippen-bild].nori-huepf {
  animation: nori-huepf 0.75s var(--weich);
}
@keyframes nori-huepf {
  0% {
    translate: 0 0;
    scale: 1.08 0.86;
  }
  28% {
    translate: 0 -22%;
    scale: 0.92 1.1;
  }
  52% {
    translate: 0 0;
    scale: 1.1 0.88;
  }
  70% {
    translate: 0 -5%;
    scale: 0.97 1.03;
  }
  100% {
    translate: 0 0;
    scale: 1 1;
  }
}
.tipp-funke {
  position: fixed;
  z-index: 80;
  pointer-events: none;
}