/* ===========================================================================
   ERINNERUNGSWAND 748
   Gast: Dark Blue Grund, Cream Schrift, EIN oranger Button pro Screen.
   Team: Cream Grund, Dark Blue Schrift, Orange nur auf "Freigeben".
   Schriften liegen lokal — nichts wird nachgeladen, von nirgends.
   ========================================================================= */

@font-face{font-family:'Inter';src:url('/fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'League Gothic';src:url('/fonts/LeagueGothic.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'MANIC';src:url('/fonts/MANIC.otf') format('opentype');font-weight:400;font-display:swap}

:root{
  --cream:#fff5e1;
  --blue:#161328;
  --orange:#bf5216;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'League Gothic','Inter',Impact,sans-serif;
  --accent:'MANIC','Bradley Hand',cursive;
  --pad:clamp(22px,6vw,40px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}

/* Die Wortmarke — das Secondary Logo aus dem Kit: SEVEN FOUR EIGHT, horizontal,
   in der Headline-Schrift. Das handschriftliche 748 ist der Short Code; der
   steht auf dem Druck und im Tab, nicht als Absender im Kopf. */
.mark{
  display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:21px;line-height:1;letter-spacing:.07em;color:var(--cream);white-space:nowrap;
}
.mark--dark{color:var(--blue)}

.hl{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(52px,16vw,84px);line-height:.86;letter-spacing:-.005em;
  margin:0;
}
.hl__line{display:block}
.hl--small{font-size:clamp(44px,13vw,68px)}

/* ===================================================== GAST ============== */
.guest{background:var(--blue);color:var(--cream)}
.guest .stage{
  min-height:100svh;display:flex;flex-direction:column;
  padding:var(--pad);padding-top:calc(var(--pad) + env(safe-area-inset-top));
  padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom));
}
.head{flex:0 0 auto;margin-bottom:8px}

/* Ein Screen ist sichtbar — welcher, entscheidet der Server. */
.screen{display:none;flex:1;flex-direction:column;gap:18px}
.guest[data-state='start']   [data-screen='start'],
.guest[data-state='preview'] [data-screen='preview'],
.guest[data-state='wait']    [data-screen='wait'],
.guest[data-state='done']    [data-screen='done'],
.guest[data-state='limit']   [data-screen='limit'],
.guest[data-state='blocked'] [data-screen='blocked'],
.guest[data-state='error']   [data-screen='error']{display:flex}

/* Der Stapel: die letzten Karten, die schon hängen. Liegt wie auf einem Tisch —
   schief, überlappend, die neueste obenauf. Ein einziger Knoten; wo er zu sehen
   ist, entscheidet der Zustand. Er darf den Knopf nie unter die Falz schieben,
   deshalb feste Höhe statt "so hoch wie die Bilder wollen": ob vier Karten
   liegen oder sechs, der Kasten ist derselbe und „Foto machen" rührt sich nie.
   Der Rand über dem Kasten ist der Anflugweg — von dort kommt jede Karte. */
.stack{display:none;position:relative;height:196px;flex:0 0 auto;margin:clamp(24px,6svh,64px) 0 6px}
/* Owner 2026-09-11 17:05: the pile is the picture of the page — bigger, hanging
   at the top right, the headline set lower beneath it. */
.guest[data-state='start'] .stack,
.guest[data-state='limit'] .stack,
.guest[data-state='blocked'] .stack{display:block}
/* Bündig links, auf derselben Achse wie Wortmarke, Headline und Lead. Die
   oberste (neueste) Karte sitzt auf 0, die älteren schauen nach rechts darunter
   hervor. Zentriert schwebte der Stapel neben der Satzkante — die Seite ist
   sonst durchgehend linksbündig.

   Die Haarlinie am Rand ist von der eigenen Seite des Chefs geborgt
   (docs/ref-greatplanet/PhotoCard.astro: border-black/[0.04]): zwei creme
   Karten übereinander brauchen eine Kante, sonst verschwimmen sie zu einer.
   Unsichtbar, bis das Skript sie austeilt — siehe /stack.js. */
.stack__card{
  /* Owner 2026-09-11 16:08: the pile moves to the top RIGHT. Anchored to the
     right edge; the older cards peek out to the LEFT, so the shift is mirrored
     here and in /stack.js. */
  position:absolute;top:50%;right:0;left:auto;height:128px;width:auto;max-width:none;
  transform:translate(calc(-1 * var(--shift,0px)),-50%) rotate(var(--tilt,0deg));
  box-shadow:0 6px 16px rgb(0 0 0 / .45),0 1px 0 rgb(255 245 225 / .12);
  background:var(--cream);
  outline:1px solid rgb(22 19 40 / .09);outline-offset:-1px;
  opacity:0;
}
/* Wer keine Bewegung will, bekommt den fertigen Stapel — ohne Austeilen, ohne
   Mischen. Das Skript hält sich an dieselbe Einstellung und rührt sich nicht. */
@media (prefers-reduced-motion:reduce){.stack__card{opacity:1}}
@media (max-height:700px){.stack{height:132px}.stack__card{height:88px}}

.screen__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0}
/* Owner 2026-09-11 17:05, the composition: the pile hangs top right, the words
   follow right beneath it, the free air collects above the button. */
.guest[data-state='start'] .screen__body{justify-content:flex-start;padding-top:clamp(8px,2svh,24px)}

.screen__act{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:14px}

.lead{margin:0;font-size:17px;line-height:1.45;color:rgb(255 245 225 / .68);max-width:22em}
.status{margin:0;font-size:15px;letter-spacing:.02em;color:rgb(255 245 225 / .5)}
.hint{margin:0;text-align:center;font-size:12px;letter-spacing:.02em;color:rgb(255 245 225 / .4)}
.aside{
  font-family:var(--accent);font-size:clamp(26px,7.5vw,34px);line-height:1;
  margin:2px 0 0;transform:rotate(-3.5deg);transform-origin:left center;
  color:rgb(255 245 225 / .9);
}
.noscript{margin:0;padding:14px var(--pad);background:var(--orange);color:var(--cream);font-size:14px}

/* Der eine orange Button. */
.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:62px;padding:0 24px;border:0;border-radius:0;
  font-weight:600;font-size:15px;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;position:relative;
}
.btn--go{background:var(--orange);color:var(--cream)}
.btn--go:active{background:#a8460f}
.btn--go[disabled]{opacity:.55}
.btn--text{
  background:none;color:rgb(255 245 225 / .72);min-height:46px;
  text-decoration:underline;text-underline-offset:5px;letter-spacing:.09em;font-weight:500;
}
.pick{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* Die Vorschau IST die Karte: gleiche Proportion, gleicher Fuß, gleicher
   Ausschnitt (object-fit:cover, mittig) wie der Druck. */
.card{
  container-type:inline-size;
  width:100%;max-width:min(100%,62svh);margin:0 auto;
  aspect-ratio:3/2;background:var(--cream);display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgb(0 0 0 / .45);
}
.card[data-orient='portrait']{aspect-ratio:2/3;max-width:min(100%,40svh)}
.card__photo{flex:1;min-height:0;background:#0d0b17;overflow:hidden}
.card__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.card__foot{
  height:7%;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 4.3cqw;gap:8px;
}
.card__line{
  font-family:var(--sans);font-weight:500;color:var(--blue);white-space:nowrap;
  font-size:max(7px,1.45cqw);letter-spacing:0;
}
.card__code{
  font-family:var(--accent);color:var(--orange);line-height:1;
  font-size:max(13px,2.9cqw);
}
.card[data-orient='portrait'] .card__foot{padding:0 2.9cqw}
.card[data-orient='portrait'] .card__line{font-size:max(7px,1cqw)}
.card[data-orient='portrait'] .card__code{font-size:max(13px,2cqw)}

.toggle{display:flex;gap:10px;justify-content:center}
.toggle__opt{
  background:none;border:1px solid rgb(255 245 225 / .35);color:rgb(255 245 225 / .75);
  padding:9px 20px;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
.toggle__opt.is-on{background:var(--cream);border-color:var(--cream);color:var(--blue)}

/* Das Häkchen. Cream auf Dark Blue — der orange Knopf bleibt der einzige
   Farbfleck des Screens. Steht von selbst auf JA. */
.consent{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:2px auto 0;
  font-size:13px;line-height:1.35;color:rgb(255 245 225 / .72);max-width:27em;
}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{
  flex:0 0 auto;width:20px;height:20px;position:relative;margin-top:1px;
  border:1px solid rgb(255 245 225 / .5);transition:background .12s ease,border-color .12s ease;
}
.consent__box::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--blue);border-width:0 2px 2px 0;
  transform:rotate(43deg) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease;
}
.consent input:checked + .consent__box{background:var(--cream);border-color:var(--cream)}
.consent input:checked + .consent__box::after{opacity:1;transform:rotate(43deg) scale(1)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--cream);outline-offset:3px}

.pulse{
  display:block;width:9px;height:9px;border-radius:50%;background:var(--cream);
  margin:0 auto 20px;animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;opacity:.6}}

/* ===================================================== TEAM ============== */
.staff{background:var(--cream);color:var(--blue)}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px var(--pad) 14px;border-bottom:1px solid rgb(22 19 40 / .16);
}
.bar__left{display:flex;align-items:baseline;gap:16px}
.bar__right{display:flex;align-items:center;gap:18px}
.bar__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:34px;line-height:1;margin:0;letter-spacing:.005em}
.bar__hint{margin:0;padding:10px var(--pad) 0;font-size:12px;color:rgb(22 19 40 / .5)}
.staff .bar__left .mark{font-size:19px}
.staff--login .mark{font-size:19px;margin-bottom:2px}
.btn--dark{color:rgb(22 19 40 / .6);min-height:34px;padding:0}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:500}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__box{
  width:46px;height:26px;border:1px solid rgb(22 19 40 / .35);position:relative;flex:0 0 auto;
  transition:background .15s ease;
}
.switch__box::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--blue);
  transition:transform .15s ease,background .15s ease;
}
.switch input:checked + .switch__box{background:var(--blue);border-color:var(--blue)}
.switch input:checked + .switch__box::after{transform:translateX(20px);background:var(--cream)}
.switch input:focus-visible + .switch__box{outline:2px solid var(--blue);outline-offset:2px}

.counts{display:flex;gap:30px;flex-wrap:wrap;padding:16px var(--pad) 4px}
.count{display:flex;flex-direction:column}
.count__n{font-family:var(--display);font-size:38px;line-height:1}
.count__l{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgb(22 19 40 / .55)}

.queue{
  display:grid;gap:16px;padding:20px var(--pad);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.job{border:1px solid rgb(22 19 40 / .16);display:flex;flex-direction:column;background:#fffaf0}
.job--blocked{opacity:.55}
.job__thumb{aspect-ratio:3/2;background:#e8dcc4;display:block;overflow:hidden}
.job__thumb img{width:100%;height:100%;object-fit:contain}
/* Die Datei ist nach der Frist weg. Kein kaputtes Bild, sondern eine Notiz. */
.job__thumb--gone{display:flex;align-items:center;justify-content:center;background:#efe6d2}
.job__gone{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgb(22 19 40 / .45)}
.job__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px 4px;font-size:11px;color:rgb(22 19 40 / .55)}
.chip{
  border:1px solid rgb(22 19 40 / .4);padding:2px 7px;font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.chip--printed{background:var(--blue);color:var(--cream);border-color:var(--blue)}
/* „nicht zeigen" — eine Notiz, kein Alarm. Gedruckt wurde die Karte trotzdem. */
.chip--hidden{border-style:dashed;border-color:rgb(22 19 40 / .45);color:rgb(22 19 40 / .6)}
.chip--failed{border-color:var(--orange);color:var(--orange)}
.job__tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.job__err{padding:0 11px;font-size:10px;color:var(--orange)}
.job__acts{display:flex;gap:6px;padding:8px 11px 11px;margin-top:auto;flex-wrap:wrap}
.act{
  border:1px solid rgb(22 19 40 / .35);background:none;padding:8px 11px;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;flex:1 1 auto;
}
.act--go{background:var(--orange);border-color:var(--orange);color:var(--cream)}
.act[disabled]{opacity:.3;cursor:default}

.empty{margin:0;padding:40px var(--pad);color:rgb(22 19 40 / .5);font-size:15px;grid-column:1/-1}

.tags{padding:8px var(--pad) 48px}
.tags__title{font-family:var(--display);text-transform:uppercase;font-size:24px;font-weight:400;margin:0 0 10px;letter-spacing:.01em}
/* Der Hintergrund ist der 1-px-Strich zwischen den Zeilen. Ohne Zeilen wäre er
   ein grauer Kasten — dann trägt die leere Meldung die Fläche selbst. */
.tags__list{display:flex;flex-direction:column;gap:1px;background:rgb(22 19 40 / .16);border:1px solid rgb(22 19 40 / .16)}
.tags__list .empty{background:var(--cream);padding:26px var(--pad)}
.tagrow{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--cream);font-size:13px;flex-wrap:wrap}
.tagrow__id{font-weight:600;font-variant-numeric:tabular-nums;flex:1 1 120px;overflow:hidden;text-overflow:ellipsis}
.tagrow__n{color:rgb(22 19 40 / .55);font-size:12px}
.tagrow__lim{width:58px;padding:6px 8px;border:1px solid rgb(22 19 40 / .35);background:none;text-align:center}
.tagrow__save{border:1px solid rgb(22 19 40 / .35);background:none;padding:6px 12px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* Login */
.staff--login{display:flex;min-height:100svh;align-items:center;justify-content:center}
.login{width:min(340px,86vw);display:flex;flex-direction:column;gap:14px}
.login .hl--dark{font-size:56px}
.login__form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.login__label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgb(22 19 40 / .55)}
.login__input{
  border:1px solid rgb(22 19 40 / .35);background:none;padding:15px 14px;
  font-size:20px;letter-spacing:.3em;text-align:center;
}
.login__wrong{margin:0;font-size:13px;color:var(--orange)}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}