/* ============================================================
   EINSTIEGSANGEBOTE — „Der Kassenzettel"
   Wir machen dem Golfer die Rechnung auf: ein Beleg, der sich
   beim Scrollen druckt. Erst die Kosten, die Summe klebt am
   unteren Papierrand und wächst — ab der Zwischensumme läuft
   dieselbe Summe zurück, weil dagegensteht, was er bekommt.

   EIN tragender Effekt, mehr nicht. Bauweise wie „Der Radius"
   auf kooperationen.php: klebende Bühne, Beats laufen mit
   margin-top:-100svh darüber, ein requestAnimationFrame liest
   nur die Scrollposition. Kein Scroll-Hijacking.
   Alles eigene mit Präfix ea- (seite.css belegt .cta und .lead).
   ============================================================ */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   FEHLENDE TOKENS UND TYPO-STUFEN
   Wie auf platzreife.php, konditionen.php und kooperationen.php:
   site/ bindet tokens.css nicht ein, seite.css bringt nur die
   Farben mit. Radien, Dauern und die .t-*-Stufen stehen deshalb
   hier — wortgleich aus tokens.css. Gehört zentral nach
   seite.css, sobald das jemand für alle Seiten prüfen kann.
   ============================================================ */
:root{
  --r-pill:999px; --r-karte:14px; --r-flaeche:0px;
  --t-schnell:.25s; --t-mittel:.35s; --t-lang:.8s;
  --schatten-karte:0 28px 60px -28px rgba(11,65,43,.45);
  /* Das Papier. Kein reines Weiß — ein Kassenbon ist wärmer und
     eine Spur grauer, und genau daran erkennt man ihn. */
  --papier:#f7f5ef;
  --papier-linie:#ddd8cb;
  --papier-tinte:#2b2a26;
  --papier-blass:#7d786c;
}

[hidden]{display:none !important}

/* ============================================================
   BÜHNE UND ZAHLENLEITER
   ============================================================ */

.ea-hero .hero-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.ea-leiter{background:var(--pine);color:#fff;display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--hairline-dunkel);position:relative;z-index:1}
.ea-leiter a{display:flex;flex-direction:column;gap:6px;padding:26px var(--inset);
  border-right:1px solid var(--hairline-dunkel);color:#fff;
  transition:background var(--t-schnell) var(--ease)}
.ea-leiter a:last-child{border-right:0}
.ea-leiter a:hover{background:rgba(204,255,0,.1);color:#fff}
.ea-leiter .z{font-size:clamp(30px,3.6vw,54px);line-height:.9;color:var(--lime)}
.ea-leiter .w{color:rgba(255,255,255,.62)}

/* ============================================================
   DIE BONROLLE
   ============================================================ */

.ea-bon{position:relative;background:var(--pine);color:#fff}
.ea-bon-kopf{padding-top:var(--luft)}
.ea-bon .kapitel-marke{border-color:var(--hairline-dunkel)}
.ea-bon .kapitel-marke .nr{color:var(--lime)}
.ea-bon .kapitel-marke .was{color:rgba(255,255,255,.5)}
.ea-bon .kapitel-kopf h2{color:#fff}
.ea-bon .kapitel-kopf .lead{color:rgba(255,255,255,.72)}

/* Die klebende Bühne. Das Papier steht still, die Rolle darin fährt. */
.ea-b-strecke{position:relative}
/* Der Beleg liegt auf einem Tisch, nicht im Nichts. Das Bild bekommt einen
   dunklen Schleier in der Hausfarbe: So bleibt die Maserung sichtbar, der
   Abschnitt fügt sich aber weiter in die dunkelgrüne Seite ein — und das
   helle Papier sticht heraus statt mit dem Holz zu konkurrieren. */
.ea-b-klebt{--papier-h:min(78svh,720px);
  position:sticky;top:0;height:100svh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
  background-color:var(--pine);
  background-image:
    radial-gradient(120% 90% at 50% 45%,rgba(7,32,21,.14),rgba(6,24,16,.6)),
    url("img/holztisch.webp");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat}

/* Das Blatt trägt Schatten und Neigung, nicht das Papier selbst: Eine Maske
   schneidet jeden box-shadow mit ab — drop-shadow auf dem Wrapper folgt
   dagegen der Zackenkante. Zwei Schatten: einer hart und nah (das Papier liegt
   auf), einer weit und weich (der Raum darum). */
/* Auf dem Tisch liegt nichts gerade. Der Schatten fällt nach links unten —
   im Bild kommt das Licht von rechts oben, siehe der Schatten des Stifts. */
.ea-b-blatt{filter:drop-shadow(-2px 3px 2px rgba(0,0,0,.4)) drop-shadow(-14px 30px 40px rgba(0,0,0,.55));
  transform:rotate(-1.8deg);
  /* Die Breite gehört auf das Blatt, nicht auf das Papier: Die Bühne ist ein
     Flex-Container, und das Papier hat overflow:hidden — seine
     min-content-Breite ist damit 0. Hing die Breite am Papier, schrumpfte das
     Blatt auf schmalen Fenstern (wo width:100% greift) auf 6 px zusammen. */
  flex:none;width:min(560px,calc(100vw - 2*var(--inset)));max-width:100%}

.ea-b-papier{position:relative;width:100%;
  height:var(--papier-h);color:var(--papier-tinte);overflow:hidden;padding:0;
  /* Kein einheitlicher Farbton: zwei sehr weiche Aufhellungen, dazu ein Hauch
     Schatten an den Längskanten — so wirkt die Bahn leicht gewölbt, wie eine
     Rolle, die sich nicht ganz flach legen will. */
  background-color:var(--papier);
  background-image:
    radial-gradient(120% 55% at 28% 8%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(90% 45% at 78% 96%,rgba(94,80,54,.07),transparent 65%),
    linear-gradient(90deg,rgba(94,80,54,.09) 0,transparent 14px,
                    transparent calc(100% - 14px),rgba(94,80,54,.09) 100%);
  /* ---- Die Abrisskante ----
     Drei Maskenebenen, die sich NICHT überlappen: Zacken oben, Vollfläche in
     der Mitte, Zacken unten. Ebenen werden standardmäßig addiert — deshalb
     scheiterte die frühere Fassung: Dort lag eine volldeckende Ebene über dem
     Zickzack und hat es vollständig aufgefüllt. Sichtbar war ein glatter
     Kasten. (Andreas, 16.08.2026) */
  --zacke-b:15px; --zacke-h:9px;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9'%3E%3Cpath d='M0 9L7.5 0 15 9Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000,#000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9'%3E%3Cpath d='M0 0L7.5 9 15 0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9'%3E%3Cpath d='M0 9L7.5 0 15 9Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000,#000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9'%3E%3Cpath d='M0 0L7.5 9 15 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:var(--zacke-b) var(--zacke-h),100% calc(100% - 2*var(--zacke-h)),var(--zacke-b) var(--zacke-h);
  mask-size:var(--zacke-b) var(--zacke-h),100% calc(100% - 2*var(--zacke-h)),var(--zacke-b) var(--zacke-h);
  -webkit-mask-position:0 0,0 var(--zacke-h),0 100%;
  mask-position:0 0,0 var(--zacke-h),0 100%;
  -webkit-mask-repeat:repeat-x,no-repeat,repeat-x;
  mask-repeat:repeat-x,no-repeat,repeat-x}

/* Zwei Ebenen übereinander, und beide zusammen machen erst Papier daraus:
   ganz fein die Faser (multiply, kaum sichtbar), darüber das Knitterrelief aus
   echter Beleuchtung — helle Grate, dunkle Gegenflanken, ein paar Knickkanten
   (assets/img/papier_knitter.svg). soft-light, damit es die Tinte nicht
   zudeckt: Ein Knick verändert das Licht auf dem Papier, nicht die Schrift. */
.ea-b-papier::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    url("img/papier_knitter.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size:100% 100%,180px 180px;
  background-repeat:no-repeat,repeat;
  mix-blend-mode:overlay;opacity:.62}

/* Der Stift liegt quer über der unteren rechten Ecke: halb auf dem Papier,
   halb auf dem Holz. Genau diese Überlappung macht aus zwei Bildern eine
   Szene. Er darf keine Zahl verdecken — deshalb die Ecke und nicht die Mitte.
   Sein Schatten ist kurz und hart: Er liegt direkt auf, nicht darüber. */
.ea-b-stift{position:absolute;z-index:3;pointer-events:none;user-select:none;
  width:clamp(300px,34vw,430px);height:auto;
  /* Über die untere rechte ECKE, nicht über die Fläche: Dort kreuzt er nur
     Papierrand und Holz und verdeckt keine einzige Zahl. */
  right:calc(50% - min(392px,44vw));
  /* Verankert am PAPIER, nicht an der Bühne. Die Bühne ist immer 100svh hoch,
     das Papier aber bei min(78svh,720px) gedeckelt — auf hohen Fenstern wächst
     also nur der Leerraum darunter. Ein mit bottom gesetzter Stift wanderte
     dadurch relativ zum Beleg nach oben und schob sich über die Zahlen.
     Das Papier ist mittig, deshalb: Bühnenmitte + halbe Papierhöhe = seine
     Unterkante, und von dort aus nach oben gerechnet. */
  top:calc(50% + var(--papier-h)/2 - 232px);bottom:auto;
  transform:rotate(26deg);
  filter:drop-shadow(-3px 6px 5px rgba(0,0,0,.5))}

/* Der Ball liegt links auf dem Tisch. Wie der Stift am PAPIER verankert und
   nicht an der Bühne — sonst wandert er, sobald das Fenster höher wird als das
   Papier (siehe Kommentar beim Stift). Die leichte Drehung sieht man nur am
   Logo, und genau darum geht es: Ein Ball, der exakt aufrecht liegt, wirkt
   platziert. Der Schatten ist rund und kurz — er liegt auf, er schwebt nicht. */
.ea-b-ball{position:absolute;z-index:3;pointer-events:none;user-select:none;
  width:clamp(120px,13vw,190px);height:auto;
  left:calc(50% - min(400px,45vw) - clamp(120px,13vw,190px));
  top:calc(50% + var(--papier-h)/2 - 300px);
  transform:rotate(-14deg);
  /* Drei gestaffelte Schatten: ein fast schwarzer Kontaktpunkt direkt unter
     dem Ball, ein mittlerer, ein weiter Hof. Deutlich kräftiger als beim
     Stift — der liegt zur Hälfte auf hellem Papier, der Ball dagegen nur auf
     dunklem Holz, und dort verschluckt der Untergrund jeden zarten Schatten.
     Eine Kugel wirft ohnehin den härtesten Schatten von allen dreien: Sie
     berührt den Tisch in genau einem Punkt. */
  filter:drop-shadow(-2px 5px 3px rgba(0,0,0,.95))
         drop-shadow(-7px 14px 9px rgba(0,0,0,.8))
         drop-shadow(-16px 30px 26px rgba(0,0,0,.6))}

/* Die Rolle: alle Zeilen, per translateY unter dem Druckkopf durchgezogen. */
.ea-b-rolle{position:absolute;left:0;right:0;top:0;padding:34px clamp(22px,4vw,40px) 120px;
  will-change:transform}

/* Eine Zeile. Vor dem Druck unsichtbar — aber im DOM, vorlesbar und
   crawlbar. Nur opacity und transform bewegen sich. */
.ea-z{opacity:0;transform:translateY(10px);
  transition:opacity var(--t-mittel) var(--ease),transform var(--t-mittel) var(--ease)}
.ea-z.gedruckt{opacity:1;transform:none}
html:not(.js) .ea-z{opacity:1;transform:none}

/* Der Bonkopf. Auf einem echten Kassenzettel steht der Name gross und weit
   gesperrt, die Anschrift klein darunter — nicht alles in einer Groesse.
   Die erste Zeile ist der Name; sie kommt so aus dem Backend-Feld, deshalb
   reicht ::first-line und es braucht kein zweites Feld. */
.ea-b-ort{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.95;text-align:center;
  color:var(--papier-blass)}
.ea-b-ort::first-line{font-weight:700;font-size:14.5px;letter-spacing:.3em;
  color:var(--papier-tinte)}

/* Die Sternchenreihe — auf jedem Kassenbon die Grenze zwischen Kopf und
   Beleg. Als Zeichnung, damit sie sich der Breite anpasst und nicht
   vorgelesen wird. */
.ea-b-sterne{height:9px;margin:13px 0 12px;
  background-image:radial-gradient(circle,var(--papier-linie) 1.1px,transparent 1.3px);
  background-size:11px 9px;background-position:center;background-repeat:repeat-x;
  opacity:.95}

/* Die Art des Belegs, wie „PARAGON FISKALNY" oder „KUNDENBELEG“ — mittig,
   weit gesperrt, das Schwerste im Kopf nach dem Namen. */
.ea-b-belegart{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.34em;text-transform:uppercase;text-align:center;
  color:var(--papier-tinte);margin-bottom:2px}
.ea-b-meta{display:flex;justify-content:space-between;margin-top:12px;padding-bottom:14px;
  border-bottom:1px dashed var(--papier-linie);
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--papier-blass)}

.ea-b-abschnitt{margin-top:26px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gruen)}
.ea-b-abschnitt-klein{margin-top:6px;font-family:'Hanken Grotesk',sans-serif;font-weight:300;
  font-size:13px;line-height:1.5;color:var(--papier-blass)}

/* Die Zeile selbst: Menge, Text, Führungspunkte, Betrag rechtsbündig.
   Die Punkte sind ein wiederholter Verlauf — kein Zeichen, das man
   markieren oder vorgelesen bekommen könnte. */
.ea-b-zeile{display:grid;grid-template-columns:1.6em minmax(0,1fr) auto auto;
  align-items:baseline;gap:8px;margin-top:16px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:16px;line-height:1.35}
.ea-b-menge{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  color:var(--papier-blass)}
.ea-b-text a{color:inherit;border-bottom:1px solid var(--papier-linie)}
.ea-b-text a:hover{border-color:var(--gruen);color:var(--gruen)}
.ea-b-punkte{align-self:end;height:1px;min-width:14px;transform:translateY(-4px);
  background-image:radial-gradient(circle,var(--papier-linie) 1px,transparent 1px);
  background-size:5px 1px;background-repeat:repeat-x}
.ea-b-betrag{font-size:17px;color:var(--papier-tinte);white-space:nowrap}
.ea-b-klein{margin:3px 0 0 calc(1.6em + 8px);font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:13px;line-height:1.45;color:var(--papier-blass)}

/* Storno: der Beleg blendet nichts aus, er streicht durch. */
.ea-z-pos.storniert .ea-b-zeile{color:var(--papier-blass);text-decoration:line-through;
  text-decoration-thickness:1px}
.ea-z-pos.storniert .ea-b-betrag{color:var(--papier-blass)}
.ea-b-storno{margin:4px 0 0 calc(1.6em + 8px);display:inline-block;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:#b4483c;border:1px solid #b4483c;border-radius:2px;
  padding:2px 8px;transform:rotate(-3deg)}

.ea-z-gut .ea-b-betrag{color:var(--gruen)}
.ea-z-gut .ea-b-menge{color:var(--gruen)}

.ea-z-liste ul{list-style:none;margin:8px 0 0 calc(1.6em + 8px)}
.ea-z-liste li{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:13px;
  line-height:1.7;color:var(--papier-blass)}
.ea-z-liste li::before{content:"· ";color:var(--papier-linie)}

/* Diese beiden Zeilen haben keine Menge — ohne eigene Spaltenvorgabe
   landete ihr Text in der 1,6-em-Mengenspalte und brach dreizeilig um. */
.ea-z-zwischen .ea-b-zeile,.ea-z-summe .ea-b-zeile{grid-template-columns:minmax(0,1fr) auto auto}
.ea-z-zwischen .ea-b-zeile{margin-top:20px;padding-top:12px;
  border-top:1px dashed var(--papier-linie);font-weight:600}
.ea-z-summe .ea-b-zeile{margin-top:22px;padding:14px 0;
  border-top:2px solid var(--papier-tinte);border-bottom:2px solid var(--papier-tinte);
  font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:17px}
.ea-z-summe .ea-b-betrag{font-size:clamp(24px,3vw,34px)}

.ea-z-ohne .ea-b-zeile{margin-top:12px;font-weight:400}
.ea-b-ohne{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--papier-blass)}

.ea-b-frist{margin-top:26px;padding-top:16px;border-top:1px dashed var(--papier-linie);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;text-align:center;color:var(--papier-tinte)}
.ea-b-abriss{margin:20px 0;height:1px;
  background-image:radial-gradient(circle,var(--papier-linie) 1.5px,transparent 1.5px);
  background-size:9px 3px;background-repeat:repeat-x}
.ea-b-knopf{display:flex;width:100%;justify-content:center;margin-bottom:8px}

/* Die klebende Summe. Sie sitzt AUF dem Papier und zählt mit — die
   einzige laufende Zahl der Seite, und sie läuft, weil sie eine
   Rechnung ist. */
/* ============================================================
   HANDSCHRIFT AUF DEM BELEG
   Anmerkungen, wie sie jemand mit dem Kuli danebenkritzelt. Sie werden
   gezogen, sobald ihre Zeile gedruckt ist — Strich für Strich über
   stroke-dashoffset. Die Pfadlänge steht je Pfad in --l (siehe
   templates/_ea_hand.php), damit jeder Zug seine ganze Dauer nutzt.
   ============================================================ */
.ea-hand{position:absolute;pointer-events:none;z-index:5;color:var(--gruen)}
.ea-hand svg{display:block;width:100%;height:100%;overflow:visible}
.ea-hand-zug{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.ea-z.gedruckt .ea-hand-zug{animation:ea-schreiben var(--dauer,1.05s) var(--verzug,.3s) cubic-bezier(.4,.1,.3,1) forwards}
@keyframes ea-schreiben{to{stroke-dashoffset:0}}
/* Ohne Skript und bei abgeschalteter Bewegung steht die Notiz einfach da. */
html:not(.js) .ea-hand-zug{stroke-dashoffset:0}

/* „geschenkt" mit Pfeil auf die Null: rechts unter der Zeile, wo Platz ist —
   links steht dort der Kleintext. */
.ea-z-pos{position:relative}
.ea-hand-geschenkt{right:4px;top:calc(100% - 26px);width:152px;height:60px}

/* Der Kringel liegt um den Betrag der Endsumme. */
.ea-z-summe{position:relative}
.ea-hand-kringel{right:-16px;top:6px;width:178px;height:76px;color:var(--gruen)}

/* Der Bonabschluss unter dem Knopf. */
.ea-b-dank{margin-top:22px;text-align:center;font-family:'Hanken Grotesk',sans-serif;
  font-size:13.5px;color:var(--papier-blass)}
.ea-b-code{display:block;height:38px;margin:14px auto 10px;width:min(72%,230px);
  background-image:repeating-linear-gradient(90deg,
    var(--papier-tinte) 0 2px,transparent 2px 5px,var(--papier-tinte) 5px 6px,transparent 6px 11px,
    var(--papier-tinte) 11px 14px,transparent 14px 16px,var(--papier-tinte) 16px 17px,transparent 17px 21px);
  opacity:.72}
.ea-b-stand{text-align:center;font-family:'Space Grotesk',sans-serif;font-size:9.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--papier-blass)}

.ea-b-lauf{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px clamp(22px,4vw,40px) 22px;
  background:linear-gradient(180deg,rgba(247,245,239,0),var(--papier) 42%);
  transition:color var(--t-mittel) var(--ease)}
.ea-b-lauf .l{color:var(--papier-blass)}
.ea-b-lauf .w{font-size:clamp(30px,4.2vw,46px);line-height:1;color:var(--papier-tinte)}
/* Ab der Zwischensumme kippt die Rolle — und die Summe wird grün, weil sie
   ab hier zurückläuft. Das ist der einzige Farbwechsel des Belegs. */
.ea-b-lauf.zurueck .w{color:var(--gruen)}
.ea-b-lauf.fertig .w{color:var(--gruen)}
/* Sobald der Schlussbetrag gedruckt ist, hat die klebende Summe ihre
   Arbeit getan — zweimal dieselbe Zahl übereinander liest sich wie ein
   Fehler. Sie tritt ab, statt zu konkurrieren. */
.ea-b-lauf{transition:opacity var(--t-mittel) var(--ease),color var(--t-mittel) var(--ease)}
@media (prefers-reduced-motion:reduce){.ea-hand-zug{stroke-dashoffset:0;animation:none}}
.ea-b-lauf.fertig{opacity:0;pointer-events:none}
html:not(.js) .ea-b-lauf{display:none}

/* Die Beats: reine Scrollstrecke, unsichtbar. Sie sind das Maß, in dem
   gedruckt wird — je Zeile ein Stück Weg. */
.ea-b-beats{position:relative;margin-top:-100svh;pointer-events:none}
.ea-b-beat{height:46svh}
.ea-b-beat:first-child{height:100svh}
.ea-b-beat:last-child{height:80svh}
html:not(.js) .ea-b-beats{display:none}
html:not(.js) .ea-b-klebt{position:relative;height:auto;padding:var(--luft) var(--inset)}
html:not(.js) .ea-b-papier{height:auto}
html:not(.js) .ea-b-rolle{position:relative;padding-bottom:34px}

/* ============================================================
   DIE ANDEREN WEGE — Zeilen, keine Karten
   ============================================================ */

.ea-tarife{background:var(--weiss);padding-bottom:var(--luft)}
.ea-t-liste{list-style:none;margin:0;padding:0 var(--inset)}
.ea-t-zeile{display:grid;grid-template-columns:minmax(0,auto) minmax(24px,1fr) auto;
  grid-template-areas:"name punkte betrag" "bed bed bed";
  align-items:baseline;gap:0 10px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.ea-t-zeile:first-child{border-top:1px solid var(--hairline)}
.ea-t-name{grid-area:name;font-family:'Space Grotesk',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(16px,1.7vw,20px);color:var(--tinte)}
.ea-t-punkte{grid-area:punkte;align-self:end;height:1px;transform:translateY(-5px);
  background-image:radial-gradient(circle,var(--linie-karte) 1px,transparent 1px);
  background-size:5px 1px;background-repeat:repeat-x}
.ea-t-betrag{grid-area:betrag;font-size:clamp(18px,2vw,24px);color:var(--tinte);white-space:nowrap}
.ea-t-betrag small{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:14px;
  letter-spacing:0;color:var(--sekundaer)}
.ea-t-bedingung{grid-area:bed;margin-top:4px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:15px;line-height:1.5;color:var(--sekundaer);max-width:70ch}
.ea-t-cta{padding:26px var(--inset) 0}

/* ============================================================
   DER KURSKALENDER — der Tagesabschluss
   ============================================================ */

.ea-kalender{background:var(--mint);padding-bottom:var(--luft)}
.ea-kal-leiste{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center;padding:0 var(--inset) 20px}
.ea-kal-filter{display:flex;flex-wrap:wrap;gap:8px}
.ea-kal-chip{display:inline-flex;align-items:center;border-radius:var(--r-pill);
  padding:9px 17px;border:1px solid var(--linie-karte);background:var(--weiss);
  font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:15px;color:var(--text);
  transition:background var(--t-schnell) var(--ease),color var(--t-schnell) var(--ease)}
.ea-kal-chip:hover{color:var(--gruen);border-color:var(--gruen)}
.ea-kal-chip.an{background:var(--gruen);border-color:var(--gruen);color:#fff}
.ea-kal-schalter{margin:0}
.ea-kal-rolle{overflow-x:auto;padding:0 var(--inset)}
.ea-kal-tabelle{width:100%;min-width:760px;border-collapse:collapse;text-align:left;
  background:var(--weiss)}
.ea-kal-tabelle th,.ea-kal-tabelle td{padding:15px 16px;border-bottom:1px solid var(--linie-karte);
  font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:16px;color:var(--text);
  vertical-align:top}
.ea-kal-tabelle thead th{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--tinte);white-space:nowrap}
.ea-kal-tabelle tbody th{font-weight:400;color:var(--tinte);white-space:nowrap}
.ea-kal-tabelle tbody th .t-zahl{font-size:18px}
/* Ausgebucht heißt gedämpft, nicht weg. Kontrast bleibt über 4,5:1. */
.ea-kal-tabelle tr.gedaempft{background:#fafcf9}
.ea-kal-tabelle tr.gedaempft th,.ea-kal-tabelle tr.gedaempft td{color:var(--sekundaer)}
.ea-kal-name{display:block;color:var(--tinte);font-weight:600}
.ea-kal-veranstalter{display:block;margin-top:2px}
.ea-kal-ohne{display:block;color:var(--muted)}
.ea-kal-plaetze{display:inline-block;border-radius:var(--r-pill);padding:5px 13px;
  background:var(--mint);color:var(--tinte);font-weight:600;font-size:15px}
.ea-kal-plaetze.ea-lage-warteliste,.ea-kal-plaetze.ea-lage-ausgebucht,
.ea-kal-plaetze.ea-lage-schluss{background:#eef1ee;color:var(--sekundaer)}
/* --live: der einzige Signaleinsatz der Seite, und er ist eine Tatsache
   aus der Anmeldeverwaltung — drei oder weniger Plätze frei. */
.ea-kal-plaetze.knapp{color:var(--live);background:#fff2f0}
.ea-kal-leer{padding:0 var(--inset);max-width:60ch}
.ea-kal-stand{padding:18px var(--inset) 0;color:var(--muted)}

/* ============================================================
   ABSCHLUSS
   ============================================================ */

.ea-cta{background:var(--pine);color:#fff;padding:var(--luft) var(--inset);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
.ea-cta h2{color:#fff}
.ea-c-text{color:rgba(255,255,255,.78);margin-top:18px;max-width:44ch}
.ea-c-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ea-c-rechts p:first-child{color:var(--lime);margin-bottom:14px}
.ea-c-tel a,.ea-c-mail a{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;color:#fff}
.ea-c-tel a:hover,.ea-c-mail a:hover{color:var(--lime)}
.ea-c-mail a{font-size:clamp(16px,1.6vw,20px)}
.ea-c-personen{list-style:none;margin:20px 0 0;display:grid;gap:8px}
.ea-c-personen li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.ea-c-personen strong{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.ea-c-personen span{color:rgba(255,255,255,.6)}
.ea-c-weiter{list-style:none;margin:30px 0 0;border-top:1px solid var(--hairline-dunkel)}
.ea-c-weiter li{border-bottom:1px solid var(--hairline-dunkel)}
.ea-c-weiter a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;color:rgba(255,255,255,.85);font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:16px;transition:color var(--t-schnell) var(--ease)}
.ea-c-weiter a:hover{color:var(--lime)}
.ea-c-weiter .pf{color:var(--lime)}

/* ============================================================
   SCHMALE FENSTER
   ============================================================ */

@media (max-width:1000px){
  /* Ab hier reicht der Platz neben dem Beleg nicht mehr. Statt den Stift
     kleiner zu machen — dann wirkt er wie ein Spielzeug — läuft er über den
     rechten Rand hinaus und wird angeschnitten. Ein Gegenstand, der aus dem
     Bild ragt, wirkt größer und echter als einer, der hineinpasst. */
  /* Links neben dem Papier bleiben hier nur noch rund 70 px Tisch — zu wenig,
     als dass ein Ball darauf liegen könnte, ohne zu zwei Dritteln aus dem Bild
     zu ragen. Also erst ab 1000 px. */
  .ea-b-ball{display:none}
  /* Hoch genug, dass die mitlaufende Summe am unteren Papierrand frei bleibt —
     sie steht dort absolut und waere sonst halb verdeckt. */
  .ea-b-stift{width:min(420px,62vw);right:-10%;top:calc(50% + var(--papier-h)/2 - 250px);bottom:auto;transform:rotate(21deg)}
  .ea-leiter{grid-template-columns:1fr 1fr}
  .ea-leiter a:nth-child(2){border-right:0}
  .ea-cta{grid-template-columns:1fr}
}

@media (max-width:560px){
  /* Das Papier bekommt die ganze Breite und mehr Höhe — der Beleg ist
     hochkant, das kommt dem Format entgegen. */
  /* Schmal bleibt er sichtbar, aber nur zur Hälfte: groß, tief unten und weit
     über den Rand hinaus. So kreuzt er die untere Ecke des Belegs und verdeckt
     trotzdem keine Zeile. */
  .ea-b-stift{width:min(340px,92vw);right:-28%;top:calc(50% + var(--papier-h)/2 - 215px);bottom:auto;transform:rotate(17deg)}
  /* Schmal: etwas weniger schräg und ein Rand ringsum — sonst schneidet die
     Drehung die Ecken ab und vom Tisch bleibt nichts zu sehen. */
  .ea-b-blatt{width:calc(100% - 26px);transform:rotate(-.9deg)}
  .ea-b-klebt{--papier-h:min(80svh,640px)}
  .ea-b-papier{width:100%;height:var(--papier-h)}
  /* Auf 390 px drängt sich die Notiz sonst in die Zeile darunter. */
  .ea-hand-geschenkt{width:126px;height:52px;top:calc(100% - 22px)}
  .ea-hand-kringel{width:146px;height:64px;right:-12px;top:8px}
  .ea-b-zeile{grid-template-columns:1.4em minmax(0,1fr) auto;gap:6px}
  .ea-b-punkte{display:none}
  .ea-t-zeile{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name betrag" "bed bed"}
  .ea-t-punkte{display:none}
  /* Der Kalender wird von der Tabelle zur Terminliste — ERSETZT, nicht
     geschrumpft. */
  .ea-kal-rolle{overflow:visible}
  .ea-kal-tabelle{min-width:0;background:transparent}
  .ea-kal-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ea-kal-tabelle tr{display:grid;gap:4px;background:var(--weiss);padding:18px 18px 16px;
    margin-bottom:12px;border:1px solid var(--linie-karte)}
  .ea-kal-tabelle th,.ea-kal-tabelle td{padding:0;border:0}
  .ea-kal-tabelle tbody th .t-zahl{font-size:22px}
  .ea-kal-tabelle td[data-spalte="4"]::before{content:"Meldeschluss: ";color:var(--muted)}
}

/* ============================================================
   WENIGER BEWEGUNG
   Kein Druckvorgang: Der Beleg steht fertig da, die Rolle klebt
   nicht, die Summe zeigt sofort den Schlussbetrag. Alles bleibt
   vollständig lesbar und bedienbar.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .ea-z{opacity:1;transform:none;transition:none}
  .ea-b-klebt{position:relative;height:auto;padding:var(--luft) var(--inset)}
  .ea-b-papier{height:auto}
  .ea-b-rolle{position:relative;padding-bottom:34px}
  .ea-b-beats{display:none}
  .ea-b-lauf{display:none}
}