:root{--bg:#fff7ea;--karte:#ffffff;--tinte:#1b1b1b;--leise:#5c5347;--linie:#ecdcc0;--orange:#FF6F00;--gelb:#FAAC06;--hell:#ffe2b0;--gruen:#1f7a3a;--rot:#b3261e;--dunkel:#1b1b1b}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tinte);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:720px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 96px)}
main.breit{max-width:1040px}
h1{font-size:26px;line-height:1.15;margin:0 0 4px;font-weight:650;text-wrap:balance}
h2{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--leise);margin:22px 2px 8px;font-weight:700;display:flex;justify-content:space-between;gap:8px}
p{margin:0 0 10px}
.leise{color:var(--leise);font-size:14px}
.leer{color:var(--leise);padding:8px 2px}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.kopf img{height:64px;width:auto;display:block}
.kopf .wer{text-align:right;font-size:13px;color:var(--leise);min-width:0}
.kopf .wer b{display:block;color:var(--tinte);font-size:14px;overflow-wrap:anywhere}
.logo-gross{display:block;width:min(280px,70%);height:auto;margin:18px auto 10px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:14px 16px;margin-bottom:10px}
button.karte{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.zeile{display:flex;justify-content:space-between;align-items:center;gap:10px}
.titel{font-size:17px;font-weight:700;overflow-wrap:anywhere;margin:4px 0 2px}
.marken{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.marke{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--hell);color:var(--tinte);white-space:nowrap}
.marke.dunkel{background:var(--dunkel);color:#fff}.marke.gruen{background:#d9f0df;color:#0f4f24}.marke.rot{background:#fde3e0;color:#7d1a14}
.paar{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--linie);font-size:15px}
.paar:first-child{border-top:0}.paar span{color:var(--leise);flex:none}.paar b{text-align:right;min-width:0;overflow-wrap:anywhere}
label.feld{display:block;font-size:13px;font-weight:600;color:var(--leise);margin:10px 0 0}
input,select,textarea{display:block;width:100%;min-height:50px;margin-top:5px;padding:10px 12px;border:1.5px solid #a8997f;border-radius:12px;background:#fff;color:var(--tinte);font:inherit;font-size:16px}
textarea{min-height:92px;resize:vertical}
input[type=checkbox]{display:inline-block;width:24px;height:24px;min-height:0;margin:0;flex:none;accent-color:var(--orange)}
input[type=file]{display:none}
:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:8px 16px;border-radius:12px;border:1.5px solid var(--tinte);background:#fff;color:var(--tinte);font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.knopf.voll{background:var(--orange);border-color:var(--orange)}
.knopf.klein{min-height:38px;padding:4px 12px;font-size:14px}
.knopf[disabled]{opacity:.5;cursor:default}
.haupt{display:flex;width:100%;min-height:56px;margin:16px 0 8px;border:0;border-radius:16px;background:linear-gradient(90deg,var(--orange),var(--gelb));color:var(--tinte);font:inherit;font-size:17px;font-weight:700;align-items:center;justify-content:center;cursor:pointer}
.reihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.zurueck{min-height:44px;background:none;border:0;padding:0;color:var(--tinte);font:inherit;font-weight:700;cursor:pointer}
.link{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px;padding:12px 16px;margin-bottom:10px;background:var(--karte);border:1px solid var(--linie);border-radius:16px;color:var(--tinte);font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-align:left}
.link small{color:var(--leise);font-weight:400}
.platz{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--linie)}
.platz:first-child{border-top:0}
.platz .t{flex:1 1 55%;min-width:0;font-weight:600}
.punkt{width:12px;height:12px;border-radius:50%;background:#b9ad99;flex:none}.punkt.da{background:var(--gruen)}
.bilder{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.bilder img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--linie)}
.haken{display:flex;align-items:center;gap:12px;min-height:50px;border-top:1px solid var(--linie);font-size:15px;font-weight:600}
.haken:first-child{border-top:0}
canvas.sig{display:block;width:100%;height:auto;aspect-ratio:640/220;margin:8px 0;border:1.5px solid #a8997f;border-radius:12px;background:#fff;touch-action:none}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;letter-spacing:.06em;background:var(--hell);border-radius:10px;padding:10px 12px;overflow-wrap:anywhere;user-select:all}
nav.leiste{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:safe center;gap:4px;background:var(--dunkel);padding:8px 8px calc(env(safe-area-inset-bottom,0px) + 8px);overflow-x:auto}
nav.leiste button{flex:0 1 auto;min-height:44px;padding:6px 14px;border:0;border-radius:10px;background:transparent;color:#d9cfc0;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
nav.leiste button[aria-current=page]{background:var(--orange);color:var(--tinte)}
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.zahlen .karte{margin:0}.zahlen b{display:block;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 12px}
#hinweis{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 74px);z-index:9;width:min(680px,calc(100vw - 32px));padding:12px 14px;border-radius:12px;background:var(--dunkel);color:#fff;font-size:15px}
#hinweis:empty{display:none}#hinweis.fehler{background:var(--rot)}
@media (prefers-reduced-motion:no-preference){.knopf,.haupt,.link,button.karte{transition:transform .08s}.knopf:active,.haupt:active,.link:active,button.karte:active{transform:scale(.985)}}