/* Windsen-Notizbuch (20.10.2026, Jan: „dass es wirklich aussieht wie so ein Windsen-Ads-Notizbuch“).
   Ein Baustein für zwei Stellen: die Anmeldung (geschlossenes Buch in echtem 3D, neigt sich zur Maus) und den
   Deckel der Begrüßung nach dem Login. Nur CSS und ein Leinenfoto (28.10.2026, textur/leinen.jpg): Leineneinband mit gestanzter Marke,
   Gummiband, goldenes Lesebändchen, cremefarbener Seitenschnitt. Farben aus v2.css.
   22.10.2026 (Jan): Einband Schwarz statt Tiefgrün (Marke nie auf großem Grün), Prägung „Windsen │ ADS“
   aus der Wortmarke (marke.svg), richtig gestanzt mit Schatten in der Vertiefung (SVG-Filter #nb-praegung). */

:root {
  /* Alles aus der Windsen-CI (v2.css): Einband Schwarz (--einband), Prägung Papier, Samen und Lesebändchen Gold.
     Hell/dunkel sind nur Licht und Schatten desselben Einbands, keine eigenen Farben. */
  --nb-gruen: var(--einband);
  --nb-gruen-hell: color-mix(in srgb, var(--einband) 84%, white);
  --nb-gruen-dunkel: color-mix(in srgb, var(--einband) 70%, black);
  --nb-gummi: color-mix(in srgb, var(--einband) 55%, black);
  --nb-schnitt: color-mix(in srgb, var(--papier) 60%, var(--flaeche));
  --nb-schnitt-kante: color-mix(in srgb, var(--papier) 88%, var(--schwarz));
  --nb-schnitt-linie: rgba(27, 36, 31, 0.10);
}

/* ---------- Einband (Haut), überall gleich ---------- */
.nb-haut {
  position: relative; overflow: hidden;
  background:
    /* Rillen am Rücken, wo der Einband knickt */
    linear-gradient(to right, rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0) 3.5%, rgba(255, 255, 255, 0.05) 5.2%, rgba(0, 0, 0, 0.16) 6%, rgba(0, 0, 0, 0) 7.5%),
    /* weiches Licht von oben links */
    radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
    /* Leinen: Foto echten Leinens (Poly Haven, CC0; textur/LIZENZ.md), nur die Struktur, Farbe bleibt der Einband */
    url("/static/v2/textur/leinen.jpg") 0 0 / 220px,
    var(--nb-gruen);
  background-blend-mode: normal, normal, overlay;
  border-radius: 3px 12px 12px 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -10px 24px -14px rgba(0, 0, 0, 0.45);
}
/* Prägung (Jan, 20.10.2026: erst „reingestanzt, hochwertiger“, dann „nicht einfach in Grün geprägt, sondern im
   Anmelde-Farbton hinterlegt“): Titel und Zeichen sind mit Papier-Folie in den Einband gedrückt, genau der Ton der
   Schrift auf dem Anmelden-Knopf (--auf-gruen). Oben fällt Schatten in die Vertiefung, unten fängt die Kante Licht.
   Der Rahmen bleibt Blindprägung, der Lesezeichen-Strich Goldfolie. */
.nb-haut::before {
  content: ""; position: absolute; pointer-events: none;
  top: 6.5%; bottom: 6.5%; left: 13%; right: 17%; border-radius: 4px;
  box-shadow: inset 0 1.5px 1.5px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(255, 255, 255, 0.07);
}
.nb-haut .nb-marke { display: grid; justify-items: center; gap: calc(var(--nb-b, 400px) * 0.03); }
.nb-haut .nb-wort {
  display: block; width: calc(var(--nb-b, 400px) * 0.56); height: auto; aspect-ratio: 4482 / 1273; overflow: visible;
  --wm-farbe: var(--auf-gruen); --wm-samen: var(--gold);
  filter: url(#nb-praegung) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35));
}
.nb-haut .nb-zusatz {
  font: 500 calc(var(--nb-b, 400px) * 0.034)/1 var(--sans); letter-spacing: 0.26em; padding-left: 0.26em;
  color: var(--auf-gruen); text-transform: uppercase;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.10);
}
.nb-haut .nb-zusatz::before {
  content: ""; display: block; height: 1.5px; width: 4.6em; margin: 0 auto 0.75em; transform: translateX(-0.13em);
  background: var(--gold); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Gummiband: senkrecht nahe der Kante, mit Rundung und Glanzkante */
.nb-gummi {
  position: absolute; top: 0; bottom: 0; right: 9%; width: 3.4%; min-width: 6px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25)), var(--nb-gummi);
  box-shadow: -2px 0 3px rgba(0, 0, 0, 0.28), 1px 0 0 rgba(255, 255, 255, 0.04);
}

/* ---------- Anmeldung: das Buch als Körper ---------- */
.nb-buehne { position: relative; perspective: 1900px; perspective-origin: 50% 40%; width: var(--nb-b); height: calc(var(--nb-b) * 1.32); }
.nb {
  --nb-t: calc(var(--nb-b) * 0.06);          /* Dicke */
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(9deg) rotateY(-24deg) rotateZ(-1.5deg);
  transition: transform 650ms cubic-bezier(0.23, 1, 0.32, 1);   /* folgt der Maus weich, retargetet bei jeder Bewegung */
}
.nb > * { position: absolute; }
.nb-vorn { inset: 0; display: grid; place-content: center; justify-items: center; gap: 7%; transform: translateZ(calc(var(--nb-t) / 2)); }
.nb-hinten { inset: 0; border-radius: 12px 3px 3px 12px; background: var(--nb-gruen-dunkel); transform: rotateY(180deg) translateZ(calc(var(--nb-t) / 2)); }
/* Seitenschnitt rechts, oben, unten: cremefarbene Blätter mit feinen Linien, etwas eingerückt hinter dem Einband */
.nb-schnitt {
  background: repeating-linear-gradient(var(--nb-richtung, 90deg), var(--nb-schnitt) 0 2px, var(--nb-schnitt-kante) 2px 3px);
  box-shadow: inset 0 0 0 1px var(--nb-schnitt-linie);
}
.nb-rechts { top: 1.6%; bottom: 1.6%; width: calc(var(--nb-t) * 0.9); left: calc(100% - var(--nb-t) * 0.45 - 4px); transform: rotateY(90deg); --nb-richtung: 90deg; }
.nb-oben { left: 2%; right: 2.5%; height: calc(var(--nb-t) * 0.9); top: calc(var(--nb-t) * -0.45 + 3px); transform: rotateX(90deg); --nb-richtung: 0deg; }
.nb-unten { left: 2%; right: 2.5%; height: calc(var(--nb-t) * 0.9); top: calc(100% - var(--nb-t) * 0.45 - 3px); transform: rotateX(-90deg); --nb-richtung: 0deg; }
/* das Gummiband läuft über Ober- und Unterkante weiter */
.nb-oben::after, .nb-unten::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(9% - 2.5%); width: 3.4%; min-width: 6px; background: var(--nb-gummi); }
.nb-ruecken {
  top: 0; bottom: 0; width: var(--nb-t); left: calc(var(--nb-t) * -0.5); transform: rotateY(-90deg);
  border-radius: 6px; background: linear-gradient(to right, var(--nb-gruen-dunkel), var(--nb-gruen-hell) 45%, var(--nb-gruen-dunkel));
}
/* Lesebändchen: hängt unten aus dem Buch, Ende mit Kerbe */
.nb-lesebaendchen {
  left: 66%; width: 3%; min-width: 6px; top: 96%; height: 13%;
  background: linear-gradient(to right, var(--gold-dunkel), color-mix(in srgb, var(--gold) 85%, white) 50%, var(--gold-dunkel));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  transform: translateZ(calc(var(--nb-t) * 0.1)) rotateZ(3deg); transform-origin: top center;
}
/* Schatten auf dem Tisch */
.nb-schatten {
  position: absolute; left: 8%; right: -4%; bottom: -7%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(27, 36, 31, 0.32), rgba(27, 36, 31, 0)); filter: blur(6px);
  transform: translateX(var(--nb-schatten-x, 0)); transition: transform 650ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) { .nb, .nb-schatten { transition: none; } }