/* The Folding Point – ein Blatt Papier auf dem Schreibtisch.
   Farben und Schrift wie in den Videos: Papier, Tinten-Navy, Stempelrot, Inter. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 900; font-display: swap; src: url("/assets/fonts/Inter-Black.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 900; font-display: swap; src: url("/assets/fonts/InterDisplay-Black.woff2") format("woff2"); }

:root {
  --desk: #2b221d;
  --desk-light: #46372e;
  --paper: #faf6ec;
  --band: #fffcf4;
  --ink: #24324a;
  --muted: #566070;
  --stamp: #c23b2e;
  --tail: #e2d3b6;
  --tail-fold: #b9a584;
  --line: #cdbf9f;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .32  0 0 0 0 .18  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
  background: radial-gradient(ellipse 90% 70% at 50% 25%, var(--desk-light), var(--desk) 70%) var(--desk);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Inter", system-ui, sans-serif;
  font-feature-settings: "kern", "liga", "calt";
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 4px; border-radius: 2px; }

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

/* ---------- das Blatt ---------- */
.sheet {
  position: relative;
  margin: 0 auto;
  background-color: var(--paper);
  background-image: var(--grain);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 48px -12px rgba(0, 0, 0, .55);
}
/* Startseite: ein Brief, zweimal gefaltet und wieder geöffnet (Falze bei einem und zwei Dritteln) */
.sheet--letter {
  max-width: 31rem;
  padding: clamp(2.25rem, 8vw, 3.5rem) clamp(1.5rem, 7vw, 3rem) 2rem;
  background-image:
    var(--grain),
    linear-gradient(to bottom,
      transparent calc(33.33% - 14px), rgba(120, 90, 50, .09) calc(33.33% - 1px), rgba(255, 255, 255, .85) calc(33.33% + 1px), transparent calc(33.33% + 16px),
      transparent calc(66.66% - 14px), rgba(120, 90, 50, .09) calc(66.66% - 1px), rgba(255, 255, 255, .85) calc(66.66% + 1px), transparent calc(66.66% + 16px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(120, 90, 50, .035) 33.33% 66.66%, transparent 66.66%);
}
.sheet--doc { max-width: 46rem; padding: clamp(1.5rem, 6vw, 3.5rem) clamp(1.25rem, 6vw, 3.5rem) 2rem; }

/* ---------- Startseite ---------- */
.lang { position: absolute; top: 1rem; right: 1.25rem; font-size: .9375rem; }
.lang a { color: var(--muted); }

.stamp { margin: 0 auto; width: min(68vw, 17.5rem); }
.stamp img { width: 100%; transform: rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) {
  .stamp img { animation: press .55s cubic-bezier(.22, 1.2, .36, 1) .2s both; }
  @keyframes press {
    from { opacity: 0; transform: scale(1.5) rotate(-16deg); }
    55% { opacity: 1; }
    to { opacity: 1; transform: scale(1) rotate(-4deg); }
  }
}

.lede {
  margin: 1.5rem auto 0;
  font: 900 clamp(2rem, 8.4vw, 2.75rem)/1.04 "Inter Display", "Inter", sans-serif;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}
.lede span { white-space: nowrap; }
.lede--long { font-size: clamp(1.5rem, 7.6vw, 2.5rem); }
.sub { margin: .75rem auto 0; max-width: 30ch; color: var(--muted); text-align: center; text-wrap: balance; }

/* Links als Papierbänder wie die Untertitel in den Videos: Band, Schwänze mit Kerbe, Faltecken */
.ribbons { list-style: none; margin: 2.25rem auto 0; padding: 0 1.5rem; max-width: 21rem; display: grid; gap: 1.25rem; }
.ribbons li:nth-child(odd) .ribbon { transform: rotate(-.8deg); }
.ribbons li:nth-child(even) .ribbon { transform: rotate(.7deg); }
.ribbon { position: relative; display: block; isolation: isolate; color: var(--ink); text-decoration: none; transition: transform .15s ease; }
.ribbon .band {
  position: relative; z-index: 2; display: block;
  padding: .9rem 1rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .45) 0 46%, transparent 46%) var(--band);
  font: 900 1.25rem/1 "Inter", sans-serif;
  text-align: center;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .25), 0 6px 12px -6px rgba(60, 40, 20, .35);
}
.ribbon::before, .ribbon::after { content: ""; position: absolute; z-index: 0; top: .35rem; bottom: -.35rem; width: 1.9rem; background: var(--tail); }
.ribbon::before { left: -1.35rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.ribbon::after { right: -1.35rem; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.ribbon .fold { position: absolute; z-index: 1; bottom: -.35rem; width: .55rem; height: .35rem; background: var(--tail-fold); }
.ribbon .fold--l { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ribbon .fold--r { right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ribbons li .ribbon:hover, .ribbons li .ribbon:focus-visible { transform: translateY(-2px) rotate(0deg); }
.ribbon:hover .band { box-shadow: 0 2px 3px rgba(60, 40, 20, .25), 0 10px 18px -6px rgba(60, 40, 20, .4); }
.ribbon:focus-visible { outline-offset: 8px; }

.legal { margin-top: 2.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; font-size: .9375rem; color: var(--muted); }

/* ---------- Rechtstexte und Kontakt ---------- */
.doc-head { margin-bottom: 2rem; }
.home { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font: 900 1.0625rem/1 "Inter", sans-serif; }
.home img { width: 3rem; transform: rotate(-4deg); }

.doc h1 { margin: 0 0 .5rem; font: 900 clamp(2rem, 7vw, 2.75rem)/1.05 "Inter Display", "Inter", sans-serif; letter-spacing: -.015em; }
.doc h2 { margin: 2.25rem 0 .5rem; font: 900 1.25rem/1.25 "Inter", sans-serif; }
.doc h3 { margin: 1.5rem 0 .25rem; font: 900 1.0625rem/1.3 "Inter", sans-serif; }
.doc p, .doc ul, .doc address { margin: 0 0 1rem; max-width: 40rem; }
.doc address { font-style: normal; }
.doc ul { padding-left: 1.25rem; }
.doc li { margin-bottom: .35rem; }
.intro { color: var(--muted); }
.todo { background: #fbe3a6; padding: 0 .25rem; border-radius: 2px; }
.doc .legal { justify-content: flex-start; border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* Kontaktformular */
.form { display: grid; gap: 1.25rem; max-width: 34rem; margin-top: 1.5rem; }
.field label { display: block; margin-bottom: .35rem; font: 900 .9375rem/1.3 "Inter", sans-serif; }
.field .hint { font: 400 .875rem/1.3 "Inter", sans-serif; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: .75rem .85rem;
  font: inherit; color: var(--ink);
  background: var(--band); border: 1.5px solid var(--line); border-radius: 2px;
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(36, 50, 74, .18); }
.field .error { margin: .35rem 0 0; color: var(--stamp); font-size: .9375rem; }
.field [aria-invalid="true"] { border-color: var(--stamp); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send {
  justify-self: start;
  padding: .85rem 1.4rem;
  border: 0; border-radius: 3px;
  background: var(--stamp); color: var(--band);
  font: 900 1.0625rem/1 "Inter", sans-serif;
  transform: rotate(-1deg);
  box-shadow: 0 2px 0 #8f2a20, 0 6px 14px -6px rgba(60, 20, 10, .5);
  cursor: pointer;
}
.send:hover { background: #ad3428; }
.send:active { transform: rotate(-1deg) translateY(2px); box-shadow: 0 0 0 #8f2a20; }
.notice { padding: 1rem 1.25rem; border-left: 4px solid var(--stamp); background: rgba(194, 59, 46, .06); }
.notice--ok { border-color: var(--ink); background: rgba(36, 50, 74, .06); }

/* 404 */
.lost { text-align: center; }
.lost .stamp { width: min(50vw, 11rem); opacity: .9; }
.lost .stamp img { transform: rotate(14deg); }
.lost .stamp img { animation: none; }