/* Blatt 2 bis 4: gleiche Grammatik wie Blatt 1. Text links auf Papier, rechts eine blaue Tafel mit
   Zonenrahmen (blaetter.js), Kopfzeile und Schriftfeld. Inhalt plottet beim Einscrollen ein (.geplottet) */
.blattseite { position: relative; display: grid; grid-template-columns: 564px minmax(0, 1fr); min-height: calc(100 * var(--svh)); background: var(--seite); }
.spalte { padding: 104px 48px 56px 72px; }
.spalte-innen { position: sticky; top: 104px; }
.spalte h2 { font: 400 var(--t-display)/.9 var(--titel); text-transform: uppercase; text-wrap: balance; }
.spalte .unter { max-width: 40ch; }
.spalte .daten.gross { margin-top: 40px; grid-template-columns: 1fr; border-top: 2px solid var(--text); }
.daten.gross > div { padding: 14px 0; border-bottom: 1px solid var(--tabelle-linie); }
.daten.gross > div + div { padding-left: 0; border-left: 0; }
.daten.gross dd { font: 500 var(--t-text)/1.45 var(--schrift); }
.daten.gross a { color: var(--text); }

.tafel-blatt { position: relative; margin: 16px 16px 16px 0; padding: 112px 72px 56px; background: var(--papier); color: var(--linie);
  display: flex; flex-direction: column; gap: 48px; }
.tafel-blatt > .rahmen-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.tafel-kopf { position: absolute; z-index: 2; top: 62px; left: 56px; right: 56px; display: flex; justify-content: space-between;
  font: 600 var(--t-label) var(--schrift); letter-spacing: .22em; text-transform: uppercase; padding: 6px 12px 5px; background: var(--markierung-flaeche); color: var(--auf-farbe); }
.tafel-kopf span + span { font-family: var(--zahl); letter-spacing: .08em; }
.tafel-blatt > .schriftfeld { position: relative; z-index: 3; width: 420px; max-width: 100%; margin-top: auto; align-self: flex-end; }
:where(.tafel-blatt > :not(.rahmen-svg)) { position: relative; z-index: 3; }

/* Stempel: doppelter Rand, leicht schraeg, Farbe zieht ins Papier (multiply). Auf Blau: screen, sonst verschwindet er */
.stempel { position: absolute; z-index: 4; display: grid; justify-items: center; padding: 6px 12px 5px; transform: rotate(-8deg);
  color: var(--tinte); border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--seite), inset 0 0 0 3.5px currentColor;
  font: 700 var(--t-ui)/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; mix-blend-mode: multiply; opacity: .9; }
.stempel b { margin-top: 4px; font-size: var(--t-label); letter-spacing: .18em; }

/* Blatt 1: Schriftfeld in der Tafel, an Halt 11 schlaegt der Freigabe-Stempel ein. Letzte Zeile = Ansicht-Knoepfe (nur an Halt 0 aktiv) */
/* Mittig unter der Zeichnung (Marlon 29.09.: rechts unten wirkte wie abgestellt, die Bedienung gehoert in die Mitte) */
.strecke .tafel > .schriftfeld { position: absolute; z-index: 3; left: 50%; translate: -50% 0; bottom: 40px; width: 480px; }
/* Eigenes Freigabe-Feld wie im echten Schriftfeld: der Stempel landet dort und verdeckt keine Angaben */
/* Die anderen Felder sind je 30 % breit (stil.css), sonst bleibt fuers Freigabe-Feld kaum Platz */
.strecke .schriftfeld td.klein { width: auto; }
.strecke .schriftfeld td.feld-freigabe { position: relative; width: 150px; }
.strecke .schriftfeld td.zeile-ansicht { padding: 6px 10px; vertical-align: middle; }
.schriftfeld .stempel b { display: block; margin-top: 4px; font: 700 var(--t-label)/1 var(--schrift); letter-spacing: .18em; color: inherit; }
.strecke .tafel > .schriftfeld .gross { font-size: var(--t-zahl); }
.stempel.freigabe { left: 50%; top: 58%; translate: -50% -50%; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 3.5px currentColor;
  mix-blend-mode: normal; background: rgba(12, 52, 112, .55); color: var(--linie); font-size: var(--t-label); opacity: 0; transform: rotate(-7deg) scale(1.7); }
.strecke .tafel.freigegeben .stempel.freigabe { animation: stempeln .32s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.strecke .tafel.freigegeben > .schriftfeld { animation: ruck .32s .12s ease-out; }
@keyframes stempeln { from { opacity: 0; transform: rotate(var(--dreh, -7deg)) scale(1.7); } 60% { opacity: .95; } to { opacity: var(--deck, .92); transform: rotate(var(--dreh, -7deg)) scale(1); } }
@keyframes ruck { 35% { transform: translateY(2px); } }

/* Blattwechsel: Blatt 2 legt sich ueber die stehende Scroll-Tafel (strecke.js haelt dafuer eine Bildschirmhoehe frei) */
#bestand { margin-top: calc(-100 * var(--svh)); z-index: 4; box-shadow: 0 -2px 0 rgba(255, 255, 255, .5), 0 -30px 60px -6px rgba(2, 8, 20, .7); }
@supports (animation-timeline: view()) {
  body { timeline-scope: --auflegen; }
  #bestand { view-timeline: --auflegen block; transform-origin: 0 0; animation: auflegen linear both; animation-timeline: --auflegen; animation-range: entry 0% entry 100%; }
  .strecke .tafel > canvas, .strecke .tafel > svg { animation: zuruecktreten linear both; animation-timeline: --auflegen; animation-range: entry 0% entry 100%; }
  .strecke .seite-text { animation: ausblenden linear both; animation-timeline: --auflegen; animation-range: entry 0% entry 25%; }
}
@keyframes auflegen { from { transform: translateX(24px) rotate(2.4deg); } to { transform: none; } }
@keyframes zuruecktreten { to { opacity: .55; } }
@keyframes ausblenden { to { opacity: 0; } }

/* Blatt 2: Karteikarten auf der Tafel, Reiter versetzt wie im echten Kasten. Rechts klemmt ein Laborabzug (Marlon 29.09.:
   Fotos nur dort, wo sie in echt liegen), der Stempel greift ueber Rand und Bildecke, nicht aufs Foto: dort verschwindet die Tinte */
.kartei-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 32px; padding-top: 16px; }
.kartei { position: relative; padding: 18px 20px 18px; background: var(--seite); color: var(--text);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(29, 91, 214, .16) 27px 28px); background-position: 0 102px; background-size: 100% calc(100% - 102px); background-repeat: no-repeat; }
.kartei .reiter { position: absolute; bottom: 100%; left: calc(16px + var(--i) * 12%); padding: 5px 12px 3px; background: var(--markierung-flaeche); border-radius: 4px 4px 0 0;
  font: 700 var(--t-label) var(--zahl); letter-spacing: .06em; color: var(--auf-farbe); }
.kartei h3 { padding: 0 150px 12px 0; min-height: 96px; border-bottom: 1.5px solid rgba(29, 91, 214, .55); font: 400 var(--t-zahl)/1 var(--titel); text-transform: uppercase; text-wrap: balance; }
.kartei .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 4px; }
.kartei .felder div { padding: 8px 0 3px; }
.kartei dt { font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.kartei dd { margin-top: 2px; font: 400 var(--t-ui) var(--zahl); }
.kartei .preis { font-weight: 700; font-size: var(--t-zahl); }
.kartei.reserviert .preis { color: var(--text-2); }
.kartei .stempel { top: var(--o, 14px); right: var(--r, 12px); transform: rotate(var(--dreh)); opacity: var(--deck, .9); }
.kartei:nth-child(1) .stempel { --dreh: -9deg; --o: 70px; --r: 132px; }
.kartei:nth-child(2) .stempel { --dreh: -3deg; --o: 72px; --r: 130px; --deck: .82; }
.kartei:nth-child(3) .stempel { --dreh: -10deg; --o: 68px; --r: 134px; }
.kartei:nth-child(4) .stempel { --dreh: -6deg; --o: 72px; --r: 130px; --deck: .86; }
.kartei:nth-child(5) .stempel { --dreh: -11deg; --o: 70px; --r: 132px; }
.abzug { position: absolute; z-index: 3; top: 10px; right: 12px; width: 132px; margin: 0; padding: 6px; background: var(--linie); transform: rotate(var(--abzug-dreh, 2deg));
  box-shadow: 0 1px 1px color-mix(in srgb, var(--text) 22%, transparent), 0 9px 14px -8px color-mix(in srgb, var(--text) 55%, transparent); }
.abzug img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
/* Bueroklammer ueber der Oberkante: haelt Abzug und Karte zusammen */
.klammer { position: absolute; top: -28px; left: 68%; width: 15px; height: 52px; overflow: visible; filter: drop-shadow(0 1.5px 1px color-mix(in srgb, var(--text) 35%, transparent)); }
.klammer path { fill: none; stroke-linecap: round; }
.klammer .draht { stroke: color-mix(in srgb, var(--text) 58%, var(--linie)); stroke-width: 1.9; }
.klammer .licht { stroke: var(--linie); stroke-width: .6; opacity: .8; }
.symbole { position: absolute; }

/* Einplotten: Linien ziehen sich (pathLength 1), Flaechen und Schrift folgen, Karten schieben sich nacheinander rein */
.tafel-blatt:not(.fertig) .rahmen-svg :is(line, path, rect, circle, polyline):not(.strichpunkt) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tafel-blatt:not(.fertig) :is(.rahmen-svg text, .kartei, .schriftfeld, .tafel-kopf) { opacity: 0; }
.geplottet:not(.fertig) .rahmen-svg :is(line, path, rect, circle, polyline):not(.strichpunkt) { animation: ziehen .9s calc(var(--i, 0) * 70ms) cubic-bezier(.2, .7, .2, 1) forwards; }
.geplottet:not(.fertig) :is(.rahmen-svg text, .tafel-kopf, .schriftfeld) { animation: auf .4s calc(.5s + var(--i, 0) * 70ms) both; }
.geplottet:not(.fertig) .kartei { animation: einplotten .55s calc(.15s + var(--i) * 120ms) cubic-bezier(.2, .7, .2, 1) both; }
.tafel-blatt:not(.fertig) .kartei .stempel { opacity: 0; }
.geplottet:not(.fertig) .kartei .stempel { animation: stempeln .3s calc(.75s + var(--i) * 120ms) cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes einplotten { from { opacity: 0; clip-path: inset(-32px 0 100% 0); } to { opacity: 1; clip-path: inset(-32px 0 0 0); } }

@media (max-width: 1099px) {
  .blattseite { grid-template-columns: 44% minmax(0, 1fr); } .spalte { padding-left: 48px; }
  .tafel-blatt { padding: 104px 48px 48px; }
}
@media (max-width: 799px) {
  .blattseite { grid-template-columns: 1fr; min-height: 0; }
  .spalte { padding: 88px 28px 32px; } .spalte-innen { position: static; }
  .tafel-blatt { margin: 0; padding: 76px 36px 36px; gap: 32px; }
  .tafel-kopf { top: 36px; left: 32px; right: 32px; letter-spacing: .16em; }
  /* Mobil liefen Titel und Nummer im Band auf 4 px zusammen: nur der Titel bleibt */
  .tafel-kopf span + span { display: none; }
  .tafel-blatt > .schriftfeld { width: 100%; }
  .kartei-raster { grid-template-columns: 1fr; gap: 36px; }
  .abzug { width: 124px; }
  .kartei h3 { padding-right: 136px; min-height: 92px; }
  .kartei { background-position: 0 98px; background-size: 100% calc(100% - 98px); }
  .kartei:nth-child(n) .stempel { --o: 66px; --r: 124px; }
  .strecke .tafel > .schriftfeld { bottom: 12px; width: min(340px, calc(100% - 24px)); } .strecke .schriftfeld td.feld-freigabe { width: 126px; }
  /* Zellen statt Zeile ausblenden: ohne die Zeile rutschte die zweizeilige Freigabe-Zelle samt Stempel auf die Ansicht-Knoepfe */
  .strecke .tafel > .schriftfeld tr:nth-child(2) > td { display: none; }
  .strecke .schriftfeld td.zeile-ansicht { padding: 5px 7px; }
  .strecke .tafel > .schriftfeld td { padding: 5px 7px; }
  /* Freigabe-Zelle mobil nur eine Zeile hoch: Stempel kleiner und tiefer, sonst deckt er den Zellentitel */
  .stempel.freigabe { padding: 4px 7px 3px; letter-spacing: .08em; top: 73%; scale: .72; } .schriftfeld .stempel.freigabe b { margin-top: 2px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .tafel-blatt * { animation: none !important; } .tafel-blatt :is(line, path, rect, circle, polyline) { stroke-dashoffset: 0 !important; }
  .tafel-blatt .kartei, .tafel-blatt .schriftfeld, .tafel-blatt text, .tafel-blatt .stempel, .tafel-kopf { opacity: 1 !important; }
  #bestand { animation: none; }
}