/* Einziges Theme: verblasster Supermarkt-Thermobon (warmes Thermopapier, Thermo-Tinte). */
  :root{
    /* --card is EXACTLY the logo's plate colour (#f4eee0, sampled from the icon's corner),
       so the logo dissolves into the paper instead of sitting on a slightly-off rectangle. */
    --paper:#cdc8b7; --desk:#c1bcaa; --card:#f4eee0;
    --ink:#2c2620; --ink-soft:#5f584c; --faint:#948c7b;
    --line:#c6bda6; --green:#3d6a4e; --green-bright:#4c7d5e; --stamp:#9a4034;
    --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
    --shadow:0 2px 0 rgba(0,0,0,.05),0 30px 55px -26px rgba(40,34,26,.62);
  }

  *{box-sizing:border-box}
  .wrap{
    min-height:100%; overflow-x:hidden;
    background:radial-gradient(130% 70% at 50% -10%, rgba(0,0,0,.05), transparent), linear-gradient(#b7b2a1, #c4bfad);
    color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.6;
    padding:clamp(18px,4vw,56px) 16px; display:flex; flex-direction:column; align-items:center; gap:20px;
  }
  .receipt{
    width:100%; max-width:660px; box-shadow:var(--shadow);
    background:
      linear-gradient(90deg,rgba(0,0,0,.05),transparent 7%,transparent 93%,rgba(0,0,0,.05)),
      repeating-linear-gradient(0deg,rgba(0,0,0,.014) 0 2px,transparent 2px 4px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
      var(--card);
    padding:clamp(22px,5vw,46px) clamp(20px,5vw,52px) 0; position:relative; --tooth:14px;
    -webkit-mask:linear-gradient(#000 0 0) padding-box,
      conic-gradient(from -45deg at 50% 0,#0000 0 90deg,#000 0) 0 0/var(--tooth) var(--tooth) repeat-x border-box,
      conic-gradient(from 135deg at 50% 100%,#0000 0 90deg,#000 0) 0 100%/var(--tooth) var(--tooth) repeat-x border-box;
    mask:linear-gradient(#000 0 0) padding-box,
      conic-gradient(from -45deg at 50% 0,#0000 0 90deg,#000 0) 0 0/var(--tooth) var(--tooth) repeat-x border-box,
      conic-gradient(from 135deg at 50% 100%,#0000 0 90deg,#000 0) 0 100%/var(--tooth) var(--tooth) repeat-x border-box;
    -webkit-mask-composite:source-over; mask-composite:add;
    border-top:var(--tooth) solid transparent; border-bottom:var(--tooth) solid transparent;
  }
  /* Eselsohr: umgeknickte Ecke oben links — sitzt auf einem nicht-maskierten Wrapper,
     damit die Zahn-Maske des Bons die Falte nicht wegschneidet. */
  .paper{position:relative; width:100%; max-width:660px}
  .paper::after{
    content:""; position:absolute; top:0; left:0; z-index:2;
    width:clamp(24px,5.2vw,34px); height:clamp(24px,5.2vw,34px);
    clip-path:polygon(0 0,100% 0,0 100%);
    background:linear-gradient(135deg,color-mix(in oklab,var(--ink) 22%,var(--card)),color-mix(in oklab,var(--ink) 4%,var(--card)));
    filter:drop-shadow(1.5px 2px 1.5px rgba(40,34,26,.42));
  }
  .mono{font-family:var(--mono)} .tabnum{font-variant-numeric:tabular-nums}
  .en{display:none} .lang-en .en{display:revert} .lang-en .de{display:none}

  .rhead{text-align:center; font-family:var(--mono); color:var(--ink-soft)}
  .rhead .store{font-size:clamp(15px,2.4vw,18px); letter-spacing:.34em; font-weight:700; color:var(--ink); margin:0 0 8px}
  .rhead .meta{font-size:11px; letter-spacing:.18em; color:var(--faint)}
  .rhead .stars{color:var(--green); letter-spacing:.3em; margin-top:6px}
  .rule{border:0; height:0; border-top:1.5px dashed var(--line); margin:clamp(20px,4vw,30px) 0}

  .hero{position:relative; text-align:center; padding-top:6px}
  h1{font-family:var(--mono); font-weight:800; font-size:clamp(30px,6.4vw,50px); line-height:1.04; letter-spacing:-.015em; margin:2px 0 0; text-wrap:balance}
  h1 .u{color:var(--green); text-decoration:underline; text-decoration-thickness:.09em; text-underline-offset:.14em}
  .lede{max-width:52ch; margin:18px auto 0; color:var(--ink-soft); font-size:clamp(15px,2vw,17px)}
  .stamp{position:absolute; top:-6px; right:-6px; font-family:var(--mono); font-weight:800; font-size:13px; letter-spacing:.16em;
    color:var(--stamp); border:2.5px solid var(--stamp); border-radius:5px; padding:6px 10px; transform:rotate(9deg); opacity:.92;
    box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--stamp) 30%, transparent)}
  @media (max-width:520px){.stamp{position:static; display:inline-block; transform:rotate(-3deg); margin-bottom:14px}}
  .lang-en .stamp .en{display:inline}

  .cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}
  .btn{font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.02em; padding:13px 20px; border:1.5px solid var(--ink);
    color:var(--ink); background:transparent; cursor:pointer; text-decoration:none; display:inline-flex; gap:8px; align-items:center;
    transition:transform .12s ease, background .12s ease, color .12s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn.primary{background:var(--green); border-color:var(--green); color:#fff}
  .btn.primary:hover{background:var(--green-bright); border-color:var(--green-bright)}
  .btn:focus-visible{outline:3px solid var(--green); outline-offset:2px}

  .seclabel{font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--faint); text-align:center; text-transform:uppercase}
  .seclabel .amt{color:var(--green)}

  .items{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:16px}
  .item{display:grid; grid-template-columns:1fr auto; column-gap:10px; row-gap:3px; align-items:baseline}
  .item .name{font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:.02em; display:flex; align-items:baseline; gap:.5ch; min-width:0}
  .item .name::after{content:""; flex:1; height:.75em; margin-left:.4ch; border-bottom:2px dotted var(--line); transform:translateY(-.18em)}
  .item .tag{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--green); white-space:nowrap}
  .item .desc{grid-column:1 / -1; color:var(--ink-soft); font-size:14.5px; margin-top:1px}
  .item .desc b{color:var(--ink); font-weight:600}

  .subtotal{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); margin-bottom:8px}
  .subtotal .k{letter-spacing:.16em; color:var(--faint); font-size:12px}
  .bigline{font-family:var(--mono); font-weight:800; font-size:clamp(22px,4.4vw,32px); letter-spacing:-.01em; margin:2px 0 12px; text-wrap:balance}
  .privacy p{color:var(--ink-soft); margin:0 0 16px}
  .checks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px}
  @media (max-width:480px){.checks{grid-template-columns:1fr}}
  .checks li{font-family:var(--mono); font-size:14px; display:flex; gap:9px; align-items:baseline}
  .checks .ok{color:var(--green); font-weight:800}

  .term{margin-top:16px; border:1.5px solid var(--line); background:color-mix(in oklab,var(--ink) 4%, var(--card)); font-family:var(--mono); font-size:12.5px}
  .term .bar{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1.5px solid var(--line); color:var(--faint); letter-spacing:.1em; font-size:11px}
  .term .dots{display:flex; gap:6px} .term .dots i{width:9px; height:9px; border-radius:50%; background:var(--line); display:block}
  .copybtn{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--green); background:none; border:0; cursor:pointer; padding:0}
  .copybtn:focus-visible{outline:2px solid var(--green); outline-offset:2px}
  .term pre{margin:0; padding:14px; overflow-x:auto; color:var(--ink); line-height:1.55}
  .term pre .c{color:var(--faint)} .term pre .k{color:var(--green)}
  .runline{display:flex; gap:10px; align-items:center; padding:11px 14px; border-top:1.5px dashed var(--line); color:var(--ink); font-size:13px}
  .runline .p{color:var(--green); font-weight:800} .runline .arrow{margin-left:auto; color:var(--faint)}

  .total{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-weight:800; font-size:clamp(18px,3.4vw,24px)}
  .total .r{color:var(--green)}
  /* The end of a real receipt: a double rule above the sum, a single one under it. */
  .totalbox{border-top:3px double var(--ink); border-bottom:1px solid var(--ink); padding:12px 0 10px; margin-top:4px}
  .totalbox .total{margin:0}
  .totalsub{font-family:var(--mono); font-size:clamp(10px,2vw,11.5px); letter-spacing:.14em;
            color:var(--ink-soft); text-align:right; margin-top:7px}
  .tabular{font-variant-numeric:tabular-nums}

  .tabs{margin-top:16px}
  .tablist{display:flex; flex-wrap:wrap; gap:8px; border-bottom:1.5px dashed var(--line); padding-bottom:12px}
  .tab{font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.05em; padding:8px 13px; border:1.5px solid var(--line);
    background:transparent; color:var(--ink-soft); cursor:pointer; transition:color .12s, border-color .12s}
  .tab[aria-selected="true"]{border-color:var(--ink); color:var(--ink); background:color-mix(in oklab,var(--green) 13%, transparent)}
  .tab:hover{color:var(--ink)} .tab:focus-visible{outline:2px solid var(--green); outline-offset:2px}
  .panel[hidden]{display:none} .panel{padding-top:16px}
  .ptag{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--green); text-transform:uppercase; margin:0}
  .pintro{color:var(--ink-soft); margin:8px 0 16px; font-size:14.5px}
  .steps{list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
  .steps li{counter-increment:s; display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start}
  .steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--mono); font-weight:800; font-size:11px; color:var(--green);
    border:1.5px solid var(--line); width:26px; height:26px; display:grid; place-items:center}
  .steps .st{font-size:14.5px; color:var(--ink); align-self:center}
  .steps a,.pintro a{color:var(--green); text-decoration:none; border-bottom:1px solid var(--green)}
  code,.icode{font-family:var(--mono); font-size:12.5px; background:color-mix(in oklab,var(--ink) 6%, var(--card)); padding:2px 6px; border:1px solid var(--line)}
  .note{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); border-left:3px solid var(--green); padding:9px 13px; margin-top:16px; background:color-mix(in oklab,var(--green) 6%, transparent)}
  .note b{color:var(--ink)}
  .price{font-family:var(--mono); font-weight:700; color:var(--green); text-transform:none; letter-spacing:0}

  .fineprint details{border-top:1px dotted var(--line); font-family:var(--mono); font-size:12px}
  .fineprint details:last-of-type{border-bottom:1px dotted var(--line)}
  .fineprint summary{cursor:pointer; padding:11px 2px; color:var(--ink-soft); letter-spacing:.08em; list-style:none; display:flex; justify-content:space-between; align-items:center}
  .fineprint summary::-webkit-details-marker{display:none}
  .fineprint summary::after{content:"+"; color:var(--green); font-weight:800}
  .fineprint details[open] summary::after{content:"–"}
  .fineprint summary:focus-visible{outline:2px solid var(--green); outline-offset:2px}
  .fineprint .body{padding:0 2px 14px; color:var(--ink-soft); line-height:1.7; font-size:12px}
  .fineprint .body b{color:var(--ink)}
  .fineprint .ph{color:var(--stamp)}
  .fineprint a{color:var(--green); text-decoration:none; border-bottom:1px solid var(--green)}

  .cookiebar{position:fixed; left:12px; right:12px; bottom:12px; z-index:6; max-width:636px; margin:0 auto;
    background:var(--card); border:1.5px solid var(--ink); box-shadow:var(--shadow);
    padding:12px 14px; display:flex; gap:14px; align-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-soft)}
  .cookiebar[hidden]{display:none}
  .cookiebar .t{flex:1; line-height:1.5}
  .cookiebar a{color:var(--green); text-decoration:none; border-bottom:1px solid var(--green)}
  .cookiebar button{font-family:var(--mono); font-weight:700; font-size:12px; padding:8px 14px; border:1.5px solid var(--green); background:var(--green); color:#fff; cursor:pointer; white-space:nowrap}
  .cookiebar button:focus-visible{outline:2px solid var(--green); outline-offset:2px}

  .barcode{height:58px; margin:22px auto 4px; max-width:500px; width:100%}
  .barcode svg{display:block; width:100%; height:100%}
  .barcode rect{fill:var(--ink)}
  .foot{font-family:var(--mono); text-align:center; color:var(--faint); font-size:11px; letter-spacing:.14em; padding-bottom:6px}
  .foot a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line)}
  .foot a:hover{color:var(--green); border-color:var(--green)}

  .controls{position:fixed; top:14px; right:14px; z-index:5; display:flex; gap:8px}
  .ctl{font-family:var(--mono); font-size:11px; letter-spacing:.1em; border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft); padding:7px 11px; cursor:pointer}
  .ctl:hover{color:var(--ink); border-color:var(--ink-soft)} .ctl:focus-visible{outline:2px solid var(--green); outline-offset:2px}
  .ctl b{color:var(--green)}

  .rv{opacity:0; transform:translateY(10px)}
  .printed .rv{animation:print .55s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes print{to{opacity:1; transform:none}}

  /* ── Hero: wordmark line, then the logo ────────────────────────────────── */
  .hero .lead-line{font-family:var(--mono); font-weight:800; font-size:clamp(17px,3.1vw,26px); line-height:1.18;
    letter-spacing:-.01em; margin:2px 0 clamp(14px,2.6vw,22px); text-wrap:balance}
  .hero .lead-line .u{color:var(--green); text-decoration:underline; text-decoration-thickness:.09em; text-underline-offset:.14em}
  /* The green underline read as a link but wasn't one; it now IS one (→ /download), so give it
     link affordances instead of removing the styling people already respond to. */
  h1 a.u{cursor:pointer; transition:color .15s ease}
  h1 a.u:hover{color:var(--green-bright)}
  h1 a.u:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:2px}
  /* No radius, no shadow: the logo's plate is now the same colour as the paper, so any edge
     treatment would only reveal the rectangle we are trying to hide. */
  .logo{display:block; margin:0 auto; width:clamp(150px,26vw,236px); height:auto}

  /* ── Receipt positions: NAME · · · · ACTION · · · · PRICE ────────────────── */
  /* A real till line, not a list item: two dotted leaders that stretch, so the price always
     lands hard right no matter how long the label is. */
  .pos{display:flex; align-items:baseline; gap:.55ch; text-decoration:none; color:var(--ink);
       font-family:var(--mono); font-size:clamp(13px,2.5vw,15px); font-weight:700; letter-spacing:.01em;
       padding:9px 0; border:0; background:none; width:100%; cursor:pointer; text-align:left}
  .pos + .pos{border-top:1px dotted var(--line)}
  .pos .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto}
  .pos .ld{flex:1 1 auto; min-width:1.2ch; height:.72em; border-bottom:2px dotted var(--line); transform:translateY(-.2em)}
  .pos .ld.short{flex:0 1 6ch}
  .pos .act{color:var(--green); white-space:nowrap; text-decoration:underline;
            text-decoration-thickness:.08em; text-underline-offset:.18em}
  .pos .pr{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink)}
  .pos:hover .act{color:var(--green-bright)}
  .pos:hover .nm{color:var(--green)}
  .pos:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:2px}
  /* Feature lines reuse the same anatomy but carry a description underneath. */
  .pos.feat{cursor:default; flex-wrap:wrap}
  .pos.feat:hover .nm{color:var(--ink)}
  /* Feature tags are labels, not links — green + underline would promise a click that isn't there. */
  .pos.feat .act{color:var(--ink); text-decoration:none}
  .pos.feat .fd{flex:1 0 100%; font-family:var(--sans); font-weight:400; font-size:14.5px;
                color:var(--ink-soft); letter-spacing:0; margin-top:4px}
  .pos.feat .fd b{color:var(--ink); font-weight:600}
  /* Narrow paper: a long position prints its name on one line and the leader + price on the
     next — exactly what a real till does — instead of ellipsing the product away. */
  @media (max-width:560px){
    .pos{flex-wrap:wrap}
    .pos .nm{white-space:normal; flex:1 0 100%; overflow:visible; text-overflow:clip}
    .pos .ld.short{display:none}
  }

  /* ── GRATIS: the green stamp the download button slams onto the lede ─────── */
  /* top:72% is measured, not guessed: it centres the stamp on the lede (57–84% of the hero) and
     keeps its lower edge clear of the CTA row, which starts at 89%. */
  .stamp2{position:absolute; left:41%; top:72%; z-index:4; pointer-events:none;
    width:max-content; white-space:nowrap;
    font-family:var(--mono); font-weight:800; font-size:clamp(28px,7vw,56px); letter-spacing:.1em;
    color:var(--green); border:5px solid var(--green); border-radius:9px; padding:7px 18px 9px;
    box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--green) 30%, transparent);
    mix-blend-mode:multiply; opacity:0;
    transform:translate(-50%,-50%) rotate(-8deg) scale(2.6)}
  .stamped2 .stamp2{animation:slam2 .42s cubic-bezier(.2,.9,.25,1) forwards}
  @keyframes slam2{
    0%  {opacity:0;   transform:translate(-50%,-50%) rotate(-8deg) scale(2.6)}
    62% {opacity:.98; transform:translate(-50%,-50%) rotate(-8deg) scale(.94)}
    100%{opacity:.90; transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  }

  /* ── Share row (visitors recommending the site) ──────────────────────────── */
  .share{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px}
  .share a,.share button{width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; border:0; cursor:pointer; color:#fff; font-family:var(--mono); font-weight:800; font-size:15px;
    text-decoration:none; transition:transform .12s ease, filter .15s ease}
  .share a:hover,.share button:hover{transform:translateY(-2px); filter:brightness(1.12)}
  .share a:focus-visible,.share button:focus-visible{outline:3px solid var(--green); outline-offset:3px}
  .share .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--faint);
              text-transform:uppercase; width:100%; text-align:center; margin-bottom:2px}

  /* ── Big X sign-off ──────────────────────────────────────────────────────── */
  .xbig{display:flex; flex-direction:column; align-items:center; gap:4px; margin:22px 0 6px;
        text-decoration:none; color:var(--ink)}
  .xbig svg{width:clamp(18px,3.4vw,24px); height:clamp(18px,3.4vw,24px)}
  .xbig .h{font-family:var(--mono); font-weight:800; font-size:clamp(13px,2.4vw,16px); letter-spacing:.06em}
  .xbig:hover{color:var(--green)}
  .xbig:focus-visible{outline:3px solid var(--green); outline-offset:4px; border-radius:4px}

  @media (prefers-reduced-motion:reduce){
    .stamped2 .stamp2{animation:none; opacity:.90; transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  }

  /* ── PRIVAT: a rubber stamp that lands when the reader starts scrolling ─── */
  /* Sits low-right so it crosses the logo's corner and spills onto bare paper — reads as
     stamped ONTO the receipt, without covering the logo it lands next to. */
  .stamp{position:absolute; left:58%; top:64%; z-index:3; pointer-events:none;
    /* width:max-content is load-bearing: an absolutely positioned box with only `left` set
       shrinks to the space remaining on its right, and PRIVAT is a single unbreakable word —
       without this the last letter hangs outside the stamp's own border. */
    width:max-content; white-space:nowrap;
    font-family:var(--mono); font-weight:800; font-size:clamp(34px,8.6vw,68px); letter-spacing:.1em;
    color:var(--stamp); border:5px solid var(--stamp); border-radius:9px; padding:8px 20px 10px;
    box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--stamp) 30%, transparent);
    /* multiply = ink soaking into paper: the lede stays readable through the stamp instead of
       being blotted out, which is both nicer to look at and how a real stamp behaves. */
    mix-blend-mode:multiply;
    opacity:.92; transform:translate(-50%,-50%) rotate(9deg)}
  /* Hidden-until-scrolled ONLY when JS is present to un-hide it. Without JS the stamp and the
     feature rows simply render, rather than being permanently invisible. `.js` is set by a tiny
     script in <head>, so there is no flash of the un-animated state. */
  .js .stamp{opacity:0; transform:translate(-50%,-50%) rotate(9deg) scale(2.6); will-change:transform,opacity}
  /* .js.stamped — no space. Both classes sit on <html>, so a descendant combinator
     (".js .stamped") matches nothing and the stamp never lands. */
  .js.stamped .stamp{animation:slam .42s cubic-bezier(.2,.9,.25,1) forwards}
  @keyframes slam{
    0%  {opacity:0;   transform:translate(-50%,-50%) rotate(9deg) scale(2.6)}
    62% {opacity:.98; transform:translate(-50%,-50%) rotate(9deg) scale(.94)}
    100%{opacity:.92; transform:translate(-50%,-50%) rotate(9deg) scale(1)}
  }
  /* The whole receipt takes the hit. Tiny translations only — no layout, no repaint. */
  .shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}
  @keyframes shake{
    0%,100%{transform:translate3d(0,0,0)}
    12%{transform:translate3d(-3px,1px,0) rotate(-.22deg)}
    26%{transform:translate3d(4px,-2px,0) rotate(.28deg)}
    41%{transform:translate3d(-3px,2px,0) rotate(-.18deg)}
    58%{transform:translate3d(3px,-1px,0) rotate(.14deg)}
    74%{transform:translate3d(-2px,1px,0) rotate(-.08deg)}
    88%{transform:translate3d(1px,0,0)}
  }

  /* ── Feature rows: printed left→right, one after the next, on scroll ───── */
  /* clip-path animates on the compositor, so a fast scroll cannot stutter it. The row
     also lifts very slightly, which reads as paper feeding out of a printer head. */
  /* ⚠️ The resting state must NOT carry the clip-path. An element clipped to zero width
     reports intersectionRatio 0 to IntersectionObserver even while its box is on screen,
     so any non-zero threshold never fires and the row stays hidden forever. Verified in
     Chromium: clipped -> isIntersecting true, ratio 0; unclipped -> ratio 1.
     opacity:0 alone hides it, and the clip lives only inside the keyframes. */
  .js .pos{opacity:0; transform:translateY(6px)}
  .js .pos.fed{animation:feed .52s cubic-bezier(.22,.68,.24,1) forwards}
  /* The download positions must not RESERVE their space while hidden — opacity:0 left a blank
     strip five lines tall between the hero and "Was drin ist". They are absent from the layout
     until asked for, so the paper visibly grows one line at a time as they print. */
  .js #dlRows .pos{display:none}
  .js #dlRows .pos.fed{display:flex}
  @keyframes feed{
    0%  {clip-path:inset(0 100% 0 0); opacity:0; transform:translateY(6px)}
    18% {opacity:1}
    100%{clip-path:inset(0 0 0 0);    opacity:1; transform:translateY(0)}
  }

  @media (prefers-reduced-motion:reduce){
    .printed .rv{animation:none; opacity:1; transform:none}
    .js .pos{clip-path:none; opacity:1; transform:none; animation:none}
    .js .stamp{opacity:.92; transform:translate(-50%,-50%) rotate(9deg); animation:none}
    .shake{animation:none}
  }


/* ── Fliesstext auf Bonpapier ───────────────────────────────────────────────────────────────
   Die Startseite besteht aus Belegzeilen; Unterseiten brauchen zusaetzlich Ueberschriften,
   Absaetze und Code. Bewusst hier und nicht pro Seite: drei Kopien desselben Aussehens driften
   auseinander, und genau das war der Grund, dass die Unterseiten fremd wirkten. */
.receipt .prose{padding:clamp(16px,4vw,30px);font-family:var(--sans);color:var(--ink)}
.receipt .prose h2{font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  margin:30px 0 10px;padding-bottom:6px;border-bottom:1px dashed var(--line);color:var(--ink)}
.receipt .prose h2:first-child{margin-top:0}
.receipt .prose h3{font-family:var(--mono);font-size:13px;letter-spacing:.05em;margin:22px 0 8px;color:var(--ink-soft)}
.receipt .prose p{margin:0 0 12px;line-height:1.65}
.receipt .prose ul,.receipt .prose ol{margin:0 0 14px;padding-left:22px}
.receipt .prose li{margin:0 0 7px;line-height:1.6}
.receipt .prose a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.receipt .prose code{font-family:var(--mono);font-size:.9em;background:rgba(0,0,0,.05);
  padding:1px 5px;border-radius:4px;word-break:break-word}
.receipt .prose pre{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.05);
  border:1px dashed var(--line);border-radius:6px;padding:10px 12px;overflow-x:auto;margin:0 0 14px}
.receipt .prose pre code{background:none;padding:0}
.receipt .prose .lede{font-size:15px;color:var(--ink-soft);margin-bottom:18px}
.receipt .prose .hinweis{border:1px dashed var(--line);border-radius:6px;padding:11px 13px;margin:0 0 14px;
  background:rgba(0,0,0,.025);font-size:14px}
.receipt .prose .achtung{border:1px solid var(--stamp);border-radius:6px;padding:11px 13px;margin:0 0 14px;
  background:rgba(154,64,52,.06);font-size:14px}
.receipt .prose .toc{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 22px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.receipt .prose label{display:block;font-size:13px;margin-bottom:3px;color:var(--ink-soft)}
.receipt .prose input,.receipt .prose textarea{width:100%;max-width:460px;font:inherit;
  padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.5);color:var(--ink)}
.receipt .prose button{font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  padding:10px 18px;border:0;border-radius:6px;background:var(--green);color:#f4eee0;cursor:pointer}
.receipt .prose button:hover{background:var(--green-bright)}


/* ── Bauteile, die nur Unterseiten brauchen ────────────────────────────────────────────────
   Karten, Kopierblöcke und KI-Prompts stammen aus der Selber-hosten-Seite. Sie ziehen hier ein,
   damit es das Aussehen weiterhin nur EINMAL gibt. */
.receipt .prose .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.receipt .prose .sub{color:var(--ink-soft);font-size:14px;margin:-6px 0 14px}
.receipt .prose .reassure{border:1px dashed var(--line);border-radius:6px;padding:12px 14px;margin:0 0 16px;background:rgba(61,106,78,.06)}
.receipt .prose .cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:0 0 16px}
.receipt .prose .card{display:block;border:1px dashed var(--line);border-radius:8px;padding:12px 14px;
  background:rgba(0,0,0,.02);color:var(--ink);text-decoration:none}
.receipt .prose .card:hover{background:rgba(61,106,78,.07)}
.receipt .prose .card .big{font-size:26px;line-height:1}
.receipt .prose .card .t{font-weight:700;margin-top:4px}
.receipt .prose .card .d{font-size:13px;color:var(--ink-soft);margin-top:2px}
.receipt .prose .card .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--green);margin-top:6px}
.receipt .prose .ic{margin-right:.45em}
.receipt .prose .note{border:1px dashed var(--line);border-radius:6px;padding:11px 13px;margin:0 0 14px;background:rgba(0,0,0,.025);font-size:14px}
.receipt .prose .code,.receipt .prose .prompt{position:relative}
.receipt .prose .copy{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.5);color:var(--ink-soft);cursor:pointer}
.receipt .prose .copy:hover{border-color:var(--green);color:var(--green)}
.receipt .prose .bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 6px}
.receipt .prose .h{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.receipt .prose .inl{font-family:var(--mono);font-size:.9em;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px}
.receipt .prose .ai{border:1px dashed var(--green);border-radius:6px;padding:11px 13px;margin:0 0 14px;background:rgba(61,106,78,.06)}
.receipt .prose hr{border:0;border-top:1.5px dashed var(--line);margin:26px 0}

/* ⚠️ Die Zeile, die zur Plattform des Besuchers passt, pulsiert kurz — sonst geht sie in fünf
   gleich aussehenden Positionen unter. Endlich, nicht endlos: eine Dauerschleife im Blickfeld
   ist Werbung, kein Hinweis. */
@keyframes vdspulse{
  0%,100%{box-shadow:0 0 0 0 rgba(61,106,78,0)}
  35%{box-shadow:0 0 0 4px rgba(61,106,78,.22)}
}
.pos.mine{animation:vdspulse 1.15s ease-in-out 3; border-radius:6px}
@media (prefers-reduced-motion:reduce){ .pos.mine{animation:none; background:rgba(61,106,78,.07)} }