/* geld.css — page layer for /geldgeschenk-vorlage/ on top of /assets/polyatic.css and the money
   card engine's /money-card-maker/money.css (stage, tiles, fonts). Adds the single A4/A3 sheet
   for the Bilderrahmen form, sized so the Download button stays on a phone's first screen. */
.gg-one{margin:0 auto;text-align:center}
.gg-one canvas{display:block;margin:0 auto;max-width:100%;width:auto;height:auto;max-height:min(50svh,34rem);background:#fff;border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.1),10px 16px 28px -12px rgba(0,0,0,.6)}
.gg-one[hidden],.mc-views[hidden]{display:none}
.gg-preview{display:flex;justify-content:center;gap:.5rem;margin:.5rem 0 0;font-size:.8125rem;color:var(--mat-muted)}
.gg-preview input{accent-color:var(--accent)}
.gg-forms button{flex:1 1 45%}
.gg-ages{display:flex;flex-wrap:wrap;gap:.375rem;margin:.375rem 0 .5rem}
.gg-ages button{flex:1 1 2.75rem;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-weight:600;font-size:.875rem;
  padding:.375rem .25rem;border-radius:.4375rem;cursor:pointer}
.gg-ages button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gg-ages button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mc-form .mc-tile[hidden]{display:none}
/* Spruch picker: chips for the sets, then a scrolling list of ready texts */
.gg-spruch-sets{display:flex;flex-wrap:wrap;gap:.375rem;margin:.375rem 0 .5rem}
.gg-spruch-sets button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-weight:600;font-size:.8125rem;
  padding:.3125rem .625rem;border-radius:999px;cursor:pointer}
.gg-spruch-sets button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gg-sprueche{list-style:none;margin:0;padding:.25rem;max-height:17rem;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:.5rem;background:var(--surface-2);display:grid;gap:.25rem}
.gg-spruch{display:block;width:100%;text-align:left;border:1px solid transparent;background:var(--surface);color:var(--ink);font:inherit;
  padding:.5rem .625rem;border-radius:.375rem;cursor:pointer;line-height:1.35}
.gg-spruch b{display:block;font-size:.875rem}
.gg-spruch span{display:block;font-size:.8125rem;color:var(--ink-2)}
.gg-spruch small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.75rem;color:var(--muted);margin-top:.125rem}
.gg-spruch:hover{border-color:var(--line-2)}
.gg-spruch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.gg-spruch:focus-visible,.gg-spruch-sets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gg-spruch-msg:empty{display:none}
.gg-lang{font-size:.9375rem}
@media(min-width:920px){.gg-one canvas{max-height:min(60vh,44rem)}}
/* Geldscheine falten: fold + note pickers, numbered step drawings drawn by falten.js (viewBox in mm) */
.gf{margin-top:2rem}
.gf h2{margin-top:0}
.gf-intro{max-width:64ch;color:var(--ink-2)}
.gf-pick{display:grid;gap:0 1rem}
.gf-pick .modes,.gf-dl .modes{margin-bottom:.75rem}
.gf-legend{font-size:.8125rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0 0 .75rem}
.gf-steps{list-style:none;counter-reset:gf;margin:0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.gf-steps li{counter-increment:gf;border:1px solid var(--line);border-radius:.5rem;background:var(--surface-2);padding:.625rem .75rem;
  display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);align-items:center;gap:.5rem .75rem}
.gf-steps p::before{content:counter(gf) ". ";font-family:var(--mono);font-weight:600;color:var(--accent)}
.gf-fig{display:flex;align-items:center;justify-content:center;min-height:3.5rem}
.gf-fig svg{max-width:100%;height:auto;overflow:visible}
.gf-steps p{margin:0;font-size:.875rem;line-height:1.45}
.gf-svg .gf-paper{fill:var(--surface);stroke:var(--ink);stroke-width:.6;stroke-linejoin:round}
.gf-svg .gf-layer{fill:var(--line);stroke:var(--ink-2);stroke-width:.4;stroke-linejoin:round}
.gf-svg .gf-edge{stroke:var(--muted);stroke-width:.35;fill:none}
.gf-svg .gf-tie{fill:var(--ink)}
.gf-svg .gf-valley{stroke:var(--accent);stroke-width:.7;fill:none}
.gf-svg .gf-mountain{stroke:var(--warn);stroke-width:.7;fill:none}
.gf-svg .gf-arrow{stroke:var(--ink-2);stroke-width:.5;fill:none}
.gf-svg .gf-head{fill:var(--ink-2)}
.gf-fit{font-size:.9375rem;margin:.875rem 0 0;max-width:64ch}
.gf-fit:empty{display:none}
.gf-msg{margin:.5rem 0 0;font-size:.875rem;color:var(--ink-2)}
.gf-msg:empty{display:none}
.gf-dl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 1rem;margin-top:1rem}
.gf-dl .field{flex:1 1 12rem}
.gf-dl .btn{flex:1 1 12rem;margin-bottom:.75rem}
@media(min-width:720px){.gf-pick{grid-template-columns:1fr 1.6fr}.gf-steps li{display:flex;flex-direction:column;align-items:stretch}.gf-fig{min-height:5rem}}
/* Verpacken (inside "Geldscheine falten"): a box with a window or a Geldumschlag, previewed as the printed sheet */
.gv{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.gv h3{margin:0 0 .5rem}
.gv-grid{display:grid;gap:1rem;margin-top:1rem}
.gv-pages{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}
.gv-page{flex:1 1 0;min-width:min(100%,13rem);max-width:26rem;max-height:62svh;height:auto;background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.gv-pages .gv-page:only-child{margin:0 auto}
.gv-sum{font-size:.9375rem;margin:.75rem 0 0;max-width:64ch}
.gv-sum:empty{display:none}
.gv-modes button small{display:block;font-weight:500;font-size:.6875rem;opacity:.8}
.gv-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin:.375rem 0 .75rem}
.gv-chips button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-weight:600;font-size:.8125rem;padding:.4375rem .625rem;border-radius:.4375rem;cursor:pointer}
.gv-chips button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gv-chips button[hidden]{display:none}
.gv-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gv-spruch{margin:.25rem 0 .5rem;font-size:.9375rem;color:var(--ink-2)}
.gv-ctl .field{margin-bottom:.25rem}
.gv-ctl input[type=text]{width:100%}
.gv-ctl > .btn{width:100%;margin-top:.5rem}
@media(max-width:879px){.gv-ctl{order:-1}}
@media(min-width:880px){.gv-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
