/* Das schlaflose Orakel – die ganze Seite ist ein Bon.
   Thermopapier, schwarze Tinte, eine einzige Schrift (Martian Mono) – Breite und Stärke tragen die Hierarchie:
   breit + fett = die Stimme des Orakels, schmal + dünn = die Maschine.
   Nur die Lesung selbst findet im Dunkeln statt: im Inneren des Druckers. */
@font-face{font-family:'Martian';font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;src:url('/static/fonts/martian-mono.woff2') format('woff2');}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/courier-prime-700.woff2') format('woff2');}

:root{
  --papier:#F7F6F1;
  --tinte:#111;
  --grau:#77736B;
  --linie:#cfcbc1;
  --nacht:#000;
  --gold:#E9CC7F;
  --bon:'Courier Prime','Courier New',Courier,monospace;
  --rand:clamp(16px,3vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{background:var(--papier);color:var(--tinte);font-family:'Martian',ui-monospace,monospace;font-weight:400;font-stretch:100%;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;}
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:30;background:repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 1px,transparent 1px 3px);}
main{flex:1;}
a{color:inherit;text-underline-offset:.18em;}
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px;}
strong{font-weight:800;}
.sprung{position:absolute;left:-999px;top:8px;background:var(--tinte);color:var(--papier);padding:.4em .8em;z-index:40;}
.sprung:focus{left:8px;}

/* Kopf: Adresse links, Posten rechts */
.kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1.6rem;flex-wrap:wrap;padding:16px var(--rand);font-size:.72rem;font-stretch:75%;border-bottom:2px solid var(--tinte);}
.kopf a{text-decoration:none;}
.kopf nav{display:flex;gap:.3rem 1.4rem;flex-wrap:wrap;}
.kopf nav a[aria-current="page"]{background:var(--tinte);color:var(--papier);padding:0 .35em;margin:0 -.35em;}
.kopf nav a:hover{text-decoration:underline;}

/* Großer Kopf jeder Seite: erste Zeile breit und fett, zweite schmal und dünn, rechtsbündig */
.ueber{padding:3vw var(--rand) 0;}
.ueber h1{font-weight:800;font-stretch:112.5%;font-size:clamp(2.6rem,11.6vw,13rem);line-height:.84;letter-spacing:-.045em;margin-left:-.04em;overflow-wrap:anywhere;}
.ueber h1 span{display:block;}
.ueber h1 span + span{font-stretch:75%;font-weight:200;letter-spacing:-.02em;text-align:right;margin-top:.06em;}
.ueber.mittel h1{font-size:clamp(2.2rem,8vw,8.6rem);}
.zeile{display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;font-size:.72rem;font-stretch:75%;text-transform:uppercase;padding:12px var(--rand);border-top:1px dashed var(--tinte);border-bottom:1px dashed var(--tinte);margin-top:2.4vw;}

/* Stimmen */
.satz{font-weight:300;font-stretch:87.5%;font-size:clamp(1.35rem,.9rem + 1.8vw,2.6rem);line-height:1.12;letter-spacing:-.02em;}
.satz strong{font-weight:800;}
.breit{font-weight:800;font-stretch:112.5%;font-size:clamp(1.5rem,1rem + 2vw,2.6rem);line-height:1.05;letter-spacing:-.03em;}
.text{font-weight:300;font-stretch:87.5%;font-size:1.02rem;line-height:1.7;}
.klein,.kleingedruckt{font-size:.74rem;font-stretch:75%;color:var(--grau);line-height:1.6;}
.meldung{min-height:1.5em;font-weight:700;}
.meldung:empty{min-height:0;}

/* Knöpfe: schwarze Blöcke, beim Drüberfahren umgekehrt */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3.2rem;padding:0 1.4rem;border:2px solid var(--tinte);background:var(--tinte);color:var(--papier);font:inherit;font-weight:700;font-stretch:87.5%;font-size:.95rem;text-decoration:none;cursor:pointer;border-radius:0;}
.knopf:hover{background:var(--papier);color:var(--tinte);}
.knopf.leise{background:none;color:var(--tinte);}
.knopf.leise:hover{background:var(--tinte);color:var(--papier);}
.knopf:disabled{opacity:.35;cursor:not-allowed;background:none;color:var(--tinte);}
.reihe{display:flex;gap:.8rem;flex-wrap:wrap;}

/* Postenliste: Menüs und Angaben wie Kassenposten */
.liste{width:100%;border-collapse:collapse;font-size:.85rem;font-stretch:87.5%;}
.liste td{padding:.6rem 0;border-bottom:1px dotted var(--tinte);vertical-align:baseline;}
.liste td:last-child{text-align:right;padding-left:1rem;white-space:nowrap;}
.liste a{text-decoration:none;font-weight:700;display:block;}
.liste tr:hover td{background:var(--tinte);color:var(--papier);}
.liste tr:hover td:first-child{padding-left:.4rem;}
.liste tr:hover td:last-child{padding-right:.4rem;}

.zacken{height:14px;background:linear-gradient(-45deg,var(--tinte) 7px,transparent 0) 0 0/14px 14px repeat-x,linear-gradient(45deg,var(--tinte) 7px,transparent 0) 0 0/14px 14px repeat-x;}
.strichcode{height:46px;background:repeating-linear-gradient(90deg,var(--tinte) 0 2px,transparent 2px 5px,var(--tinte) 5px 9px,transparent 9px 11px,var(--tinte) 11px 12px,transparent 12px 16px);}
.summe{display:flex;justify-content:space-between;gap:1rem;border-top:2px solid var(--tinte);border-bottom:2px solid var(--tinte);padding:.8rem 0;font-weight:800;font-size:1.2rem;}

/* START */
.druck{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3vw;padding:3vw var(--rand);}
.druck .bild{position:relative;aspect-ratio:1;}
.druck .bild img,.druck .bild canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.posten{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;}
.rede{max-width:44rem;margin:0 auto;padding:7vw var(--rand) 4vw;display:grid;gap:1.4rem;}
.rede .breit{margin:1.4rem 0;}
.ausstellung{display:grid;grid-template-columns:auto 1fr;gap:.4rem 2rem;align-items:baseline;border-top:2px solid var(--tinte);border-bottom:2px solid var(--tinte);padding:1.2rem 0;}
.ausstellung b{font-weight:800;font-stretch:112.5%;font-size:clamp(1.8rem,1rem + 3vw,3.4rem);letter-spacing:-.04em;line-height:.9;}
.danke{text-align:center;font-size:.78rem;font-stretch:75%;margin-top:.6rem;}

/* Spalten für Unterseiten: links die Tasse, rechts der Bon */
.zweispaltig{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3vw;padding:3vw var(--rand);align-items:start;}
.spalte{display:grid;gap:1.6rem;align-content:start;}
.ritual{list-style:none;counter-reset:s;border-top:2px solid var(--tinte);}
.ritual li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px dotted var(--tinte);font-stretch:87.5%;font-weight:300;font-size:.92rem;}
.ritual li::before{content:counter(s,decimal-leading-zero);font-weight:800;}
.ritual strong{font-weight:800;display:block;}

/* Die Tasse (Ablage für das Foto / Datensatz-Feld): Kreis mit Tintenrand auf Papier */
.tasse{position:relative;aspect-ratio:1;border-radius:50%;width:100%;}
.tasse canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%;}
.tasse-ablage{border:2px dashed var(--tinte);display:grid;place-items:center;cursor:pointer;overflow:hidden;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(0,0,0,.035) 22px 23px);}
.tasse-ablage input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.tasse-ablage:focus-within{outline:2px solid var(--tinte);outline-offset:8px;}
.tasse-ablage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);}
.ablage-text{position:relative;font-weight:800;font-stretch:112.5%;font-size:clamp(1rem,.8rem + 1vw,1.6rem);text-align:center;padding:2rem;letter-spacing:-.02em;pointer-events:none;}
.tasse-ablage.hat-foto .ablage-text{align-self:end;margin-bottom:10%;font-size:.75rem;font-stretch:75%;background:var(--tinte);color:var(--papier);padding:.3em .8em;}
.tasse-ablage.zieht{border-style:solid;background:#ece9e0;}
.tasse-spur{border:2px solid var(--tinte);box-shadow:0 0 0 10px var(--papier),0 0 0 11px var(--tinte);touch-action:none;}
.tasse-spur canvas{cursor:crosshair;}
.tasse-spur canvas:focus-visible{outline:none;}
.tasse-spur:has(canvas:focus-visible){outline:2px solid var(--tinte);outline-offset:18px;}
.fortschritt{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);pointer-events:none;transform:rotate(-90deg);}
.fortschritt circle{fill:none;stroke-width:1.4;}
.fortschritt circle:first-child{stroke:transparent;}
#fortschritt{stroke:var(--tinte);stroke-dasharray:0 100;stroke-width:3;transition:stroke-dasharray .3s linear;}

/* Felder */
.felder{display:grid;gap:1.3rem;}
.feld{display:grid;gap:.4rem;border:0;}
.feld > span,.feld legend{font-size:.72rem;font-stretch:75%;text-transform:uppercase;}
.feld input[type=text]{font:inherit;font-weight:700;font-size:1.3rem;font-stretch:87.5%;color:var(--tinte);background:none;border:0;border-bottom:2px solid var(--tinte);padding:.3rem 0;width:100%;border-radius:0;}
.feld input[type=text]::placeholder{color:#a9a49a;font-weight:300;font-size:.95rem;}
.feld input[type=text]:focus{outline:none;background:#ece9e0;}
.sprachen{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;}
.sprachen legend{margin-bottom:.5rem;width:100%;}
.sprachen label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-stretch:87.5%;}
.sprachen input{appearance:none;width:1.05rem;height:1.05rem;border:2px solid var(--tinte);margin:0;display:grid;place-items:center;}
.sprachen input:checked::after{content:'';width:.45rem;height:.45rem;background:var(--tinte);}
.sprachen input:focus-visible{outline:2px solid var(--tinte);outline-offset:3px;}

/* Datensatz */
.angaben{display:grid;border-top:2px solid var(--tinte);}
.angaben div{display:grid;grid-template-columns:8.5rem 1fr auto;gap:.8rem;padding:.42rem 0;border-bottom:1px dotted var(--tinte);font-size:.8rem;font-stretch:87.5%;align-items:baseline;}
.angaben dt{font-stretch:75%;text-transform:uppercase;font-size:.68rem;}
.angaben dd{font-weight:700;overflow-wrap:anywhere;}
.angaben .zeichen{font-weight:300;font-stretch:75%;text-align:right;}
.angaben .neu{animation:auftauchen .35s steps(4) both;}
@keyframes auftauchen{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.messung{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.2rem 1.4rem;font-size:.74rem;font-stretch:75%;border-top:1px dashed var(--tinte);border-bottom:1px dashed var(--tinte);padding:.7rem 0;}
.messung div{display:flex;justify-content:space-between;gap:.6rem;}
.messung dt{text-transform:uppercase;}
.messung dd{font-weight:700;font-variant-numeric:tabular-nums;}

/* LESUNG: im Inneren des Druckers – schwarz, dann kommt der Bon */
.lesung{position:fixed;inset:0;z-index:20;background:var(--nacht);color:var(--papier);overflow-y:auto;display:flex;flex-direction:column;align-items:center;}
.analyse{position:fixed;inset:0;transition:opacity .6s;}
.analyse canvas{position:absolute;inset:0;width:100%;height:100%;}
.ticker{position:absolute;bottom:6vh;z-index:2;width:min(40vw,20rem);font-size:.66rem;font-stretch:75%;color:#9aa3a9;display:flex;flex-direction:column;gap:.35rem;}
.ticker.links{left:var(--rand);}
.ticker.rechts{right:var(--rand);}
.tk-kopf,.tk-legende{color:var(--gold);}
.tk-zeile{display:grid;grid-template-columns:2rem 1fr 3rem;gap:.5rem;align-items:center;opacity:.25;transition:opacity .3s;}
.tk-zeile.an{opacity:1;}
.tk-zeile.jetzt .tk-h{color:var(--gold);}
.tk-balken{height:3px;background:#1d2125;overflow:hidden;}
.tk-fuell{display:block;height:100%;background:var(--gold);transform-origin:left;}
.tk-wert{text-align:right;}
.tk-mess{display:flex;justify-content:space-between;opacity:0;transition:opacity .4s;}
.tk-mess.an{opacity:1;}
.tk-v{color:var(--papier);}
.lesung-status{position:fixed;top:10vh;left:0;right:0;text-align:center;z-index:3;font-weight:800;font-stretch:112.5%;letter-spacing:-.03em;font-size:clamp(1.3rem,1rem + 1.6vw,2.2rem);color:var(--papier);padding:0 var(--rand);}
.lesung-status.puls{animation:puls 1.2s steps(2) infinite;}
@keyframes puls{50%{opacity:.35}}
.ausgabe{position:relative;z-index:4;width:100%;display:flex;flex-direction:column;align-items:center;padding:3rem var(--rand) 4rem;}
.schlitz{width:min(92vw,26rem);height:12px;background:#000;box-shadow:inset 0 3px 4px #000,0 0 0 2px #333;position:relative;z-index:2;}
.ausgabe .bon{margin-top:-4px;animation:druck 2.4s steps(24) both;}
@keyframes druck{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0 0 0 0);}}
.bon-knoepfe{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;}
.lesung .knopf{background:var(--papier);color:var(--tinte);border-color:var(--papier);}
.lesung .knopf:hover{background:none;color:var(--papier);}
.lesung .knopf.leise{background:none;color:var(--papier);}
.lesung .knopf.leise:hover{background:var(--papier);color:var(--tinte);}

/* BON – der gedruckte, wie am Automaten (Courier Prime) */
.bon{width:min(88vw,23rem);background:#fff;color:var(--tinte);font-family:var(--bon);font-weight:700;font-size:.92rem;line-height:1.42;padding:1.4rem 1.3rem 2rem;
  --zacke:8px;-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--zacke)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(var(--zacke) * 2) var(--zacke) repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--zacke)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(var(--zacke) * 2) var(--zacke) repeat-x;}
.bon a{color:var(--tinte);}
.bon-kopf{text-align:center;font-size:1.15rem;letter-spacing:.12em;}
.bon-unter{text-align:center;font-size:.82rem;font-style:italic;}
.bon-linie{border:0;border-top:2px solid var(--tinte);margin:.7rem 0;}
.bon-strich{border:0;border-top:1px dashed var(--tinte);margin:.9rem 0 .6rem;}
.bon-foto{display:block;width:84%;aspect-ratio:1;margin:.6rem auto .9rem;object-fit:cover;}
.bon p + p{margin-top:.6rem;}
.bon-schluss{font-size:1.02rem;}
.bon-meta{text-align:center;font-size:.76rem;}
.bon-daten{font-size:.76rem;}

/* KAFFEE: die Quittung groß */
.quittung{max-width:40rem;margin:0 auto;padding:4vw var(--rand) 2rem;display:grid;gap:1.6rem;}
.posten-gross{width:100%;border-collapse:collapse;font-stretch:87.5%;}
.posten-gross td{padding:.7rem 0;border-bottom:1px dotted var(--tinte);vertical-align:baseline;font-size:1.05rem;}
.posten-gross td:last-child{text-align:right;white-space:nowrap;padding-left:1rem;font-weight:800;}
.posten-gross .klein td{font-size:.78rem;color:var(--grau);}

/* WER: Stationen als Bons auf dem Papier, nebeneinander */
.wer-text .text p + p{margin-top:1rem;}
.wer-text{max-width:44rem;margin:0 auto;padding:4vw var(--rand) 1rem;display:grid;gap:1.2rem;}
.stationen{padding:3vw 0 2rem;}
.stationen h2{padding:0 var(--rand);margin-bottom:1rem;}
.bonreihe{display:flex;gap:1.6rem;overflow-x:auto;padding:1rem var(--rand) 3rem;scroll-snap-type:x mandatory;align-items:flex-start;scrollbar-color:var(--tinte) transparent;}
.bonreihe .bon{flex:0 0 min(80vw,19rem);scroll-snap-align:center;font-size:.85rem;border:1px solid var(--linie);box-shadow:4px 4px 0 var(--tinte);}
.bonreihe .bon:nth-child(odd){transform:rotate(.8deg) translateY(10px);}
.bonreihe .bon:nth-child(even){transform:rotate(-.7deg);}
.station.jetzt{background:var(--tinte);color:var(--papier);}
.station.jetzt a{color:var(--papier);}
.station.jetzt .bon-linie,.station.jetzt .bon-strich{border-color:var(--papier);}

/* RECHTLICHES */
.rechtliches{max-width:44rem;margin:0 auto;padding:4vw var(--rand) 2rem;}
.rechtliches h2{font-weight:800;font-stretch:112.5%;font-size:1rem;letter-spacing:-.01em;margin:2rem 0 .5rem;padding-top:.8rem;border-top:2px solid var(--tinte);}
.rechtliches p{font-weight:300;font-stretch:87.5%;font-size:.9rem;line-height:1.7;}
.rechtliches p + p{margin-top:.8rem;}

/* Fuß: schwarz, wie das Ende der Rolle */
.fuss{background:var(--tinte);color:var(--papier);padding:2.6rem var(--rand);display:flex;justify-content:space-between;gap:.6rem 2rem;flex-wrap:wrap;font-size:.74rem;font-stretch:75%;margin-top:4rem;}
.fuss-links{display:flex;gap:1.4rem;}
.fuss a{color:var(--papier);}

@media (max-width:760px){
  .druck,.zweispaltig{grid-template-columns:1fr;}
  .ticker{width:calc(50vw - var(--rand) - .5rem);font-size:.58rem;bottom:3vh;}
  .angaben div{grid-template-columns:6.5rem 1fr auto;}
  .ausstellung{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
.ausstellung + .summe{margin-top:1rem;}
.lesung-status.fertig{position:relative;top:auto;margin-top:8vh;}