/* ============================================================================
   PROJEKT FOHL - Mitglieder-App: Gestaltung
   Quelle: design/app_entwurf_v1.html (Navy #041E42, Montserrat + Open Sans).
   Schriften liegen lokal in assets/fonts (nichts wird bei Google geladen).
   ============================================================================ */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/montserrat-latin.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 600;font-stretch:100%;font-display:swap;src:url(assets/fonts/opensans-latin.woff2) format("woff2");}

:root{--navy:#041E42;--navy-d:#031835;--navy-h:#0a2c5c;--grau:#585b5f;--hell:#EEEFEF;--weiss:#fff;--schwarz:#18191A;--linie:#dee2e6;--gruen:#28a745;--rot:#dc3545;--orange:#e8a33d;
  --oben:env(safe-area-inset-top,0px);--unten:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Open Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;color:var(--schwarz);background:#dfe3e8;line-height:1.5;-webkit-text-size-adjust:100%;overflow:hidden}
h1,h2,h3{font-family:"Montserrat","Segoe UI",Arial,sans-serif;color:var(--navy);margin:0 0 .35em;font-weight:700}
button{font:inherit;cursor:pointer;color:inherit}
a{color:var(--navy)}
.versteckt{display:none!important}

/* Rahmen: auf dem Handy der ganze Bildschirm, am Computer eine schmale Mitte */
.app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;background:var(--hell);position:relative;display:flex;flex-direction:column;overflow:hidden}
@media (min-width:520px){.app{box-shadow:0 0 40px rgba(4,30,66,.25)}}
.scr{display:flex;flex-direction:column;height:100%;min-height:0;position:relative}
.start-laden{margin:auto;text-align:center;color:var(--grau)}
.noscript{padding:20px;text-align:center}

.kopf{background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:calc(var(--oben) + 10px) 16px 12px;flex:none;box-shadow:0 1px 3px rgba(4,30,66,.2);z-index:3}
.plate{background:#fff;border-radius:8px;padding:3px 7px;height:44px;display:flex;align-items:center}.plate img{height:36px;width:auto;display:block}
.plate.big{height:96px;padding:6px 14px;border-radius:14px}.plate.big img{height:84px}
.kt{font:700 1.08rem Montserrat,sans-serif;letter-spacing:.2px;min-width:0}.kt small{display:block;font:400 .72rem "Open Sans",sans-serif;color:#b9c6d8;letter-spacing:0}
.bk{background:rgba(255,255,255,.1);border:0;color:#fff;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none}
.ic{width:22px;height:22px;flex:none}
main.inh{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 14px 22px;scrollbar-width:none}
main.inh::-webkit-scrollbar{display:none}
.tabs{background:#fff;display:flex;border-top:1px solid var(--linie);flex:none;padding-bottom:var(--unten)}
.tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0 4px;color:#7b8794;position:relative;font:600 .68rem Montserrat,sans-serif;letter-spacing:.2px;min-height:56px;justify-content:center}
.tabs button.on{color:var(--navy)}.tabs button.on::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--navy)}
.bdg{position:absolute;top:4px;left:calc(50% + 6px);background:var(--rot);color:#fff;font:700 .62rem Montserrat,sans-serif;border-radius:9px;min-width:17px;height:17px;display:grid;place-items:center;font-style:normal;padding:0 4px}

/* Bausteine */
.karte{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(4,30,66,.10),0 6px 18px rgba(4,30,66,.06);padding:14px 16px;margin-bottom:14px}
.karte h3{font-size:.95rem;margin-bottom:8px}
.mut{color:var(--grau)}.small{font-size:.8rem}.ctr{text-align:center}.rot{color:var(--rot)}
.lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--grau);font-weight:600}
.num{font:700 1.7rem/1.2 Montserrat,sans-serif;color:var(--navy);margin-top:2px;overflow-wrap:anywhere}.zus{font-size:.8rem;color:var(--grau)}
.kpi{border-top:4px solid var(--navy)}.kpi.warn{border-top-color:var(--rot)}.kpi.rotk{border-top-color:var(--rot)}.kpi.gut{border-top-color:var(--gruen)}
.kpi.warn .num{color:var(--navy)}
.kpi2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.kpi2 .karte{margin-bottom:12px;padding:12px 14px}.kpi2 .num{font-size:1.35rem}
.row2{margin-top:10px}
.pill{display:inline-block;font:600 .7rem Montserrat,sans-serif;padding:3px 9px;border-radius:12px;letter-spacing:.2px;white-space:nowrap}
.pill.navy{background:#eaf2fb;color:var(--navy)}.pill.rot{background:#fdecea;color:#b02a37}.pill.gruen{background:#e6f4ea;color:#1e7e34}.pill.coin{background:#fff4dc;color:#b8791b}.pill.grau{background:#e9ebee;color:#454b54}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:10px;border:1px solid transparent;font:700 .92rem Montserrat,sans-serif;letter-spacing:.2px;margin-bottom:10px;padding:10px 16px;text-decoration:none;text-align:center}
.btn.pri{background:var(--navy);color:#fff}.btn.pri:active{background:var(--navy-d)}
.btn.sec{background:#e4e9f1;color:var(--navy)}
.btn.link{background:none;color:var(--navy);text-decoration:underline;font-weight:600}
.btn.sm{min-height:44px;width:auto;display:inline-flex;font-size:.82rem;margin:0}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.coin{background:linear-gradient(135deg,#fff7e3,#fde7b3);border-color:#ecc56f;color:var(--navy);justify-content:flex-start;text-align:left;padding:8px 14px;min-height:62px}
.btn.coin .coinimg{width:44px;height:44px;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.btn.coin span{display:flex;flex-direction:column}.btn.coin small{font:400 .76rem "Open Sans",sans-serif;color:#6b5a2a}
.btn.coin.gesperrt{background:#f1f2f4;border-color:#d3d7dd;color:#3c4350;cursor:default}
.info{background:#eaf2fb;border:1px solid #c3d9f0;border-left:5px solid var(--navy);border-radius:10px;padding:11px 14px;font-size:.84rem;color:#243a58;margin-bottom:14px;display:flex;gap:10px;position:relative}
.info b{color:var(--navy)}.info .ii{color:var(--navy);flex:none;margin-top:1px}
.info.fehler{background:#fdecea;border-color:#f1b8bf;border-left-color:var(--rot);color:#7a1d27}.info.fehler .ii{color:var(--rot)}
.info.gut{background:#e6f4ea;border-color:#b9dfc3;border-left-color:var(--gruen);color:#1d5b2c}.info.gut .ii{color:var(--gruen)}
.install .xb{position:absolute;top:2px;right:2px;border:0;background:none;color:#5b7191;width:44px;height:44px;display:grid;place-items:center}.install .xb .ic{width:16px;height:16px}.install{padding-right:40px}
.install .btn{margin:8px 0 0}
h2.sec{font-size:.95rem;margin:4px 2px 8px}
label{display:block;font-size:.8rem;font-weight:600;color:var(--navy);margin-bottom:12px}
input{display:block;width:100%;margin-top:5px;height:48px;border:1px solid #c9d0da;border-radius:10px;padding:0 14px;font:400 1rem "Open Sans",sans-serif;color:var(--schwarz);background:#fff}
input:focus{outline:2px solid #6fa8dc;border-color:#6fa8dc}
.pw{position:relative;display:block}.pw input{padding-right:52px}.eyebtn{position:absolute;right:2px;top:5px;width:44px;height:44px;border:0;background:none;color:#7b8794;display:grid;place-items:center}
.meter{height:6px;border-radius:3px;background:#e4e9f1;margin-top:8px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:var(--gruen);transition:width .15s}
.meter i.s0{background:var(--rot)}.meter i.s1{background:var(--orange)}
.staerke{font-size:.78rem;margin-top:4px;color:var(--grau);min-height:1.2em;font-weight:400}
.fmsg{font-size:.82rem;font-weight:600;margin:0 0 10px;min-height:0}.fmsg.err{color:#b02a37}.fmsg.ok{color:#1e7e34}
.fmsg:empty{display:none}

/* Banner oben (offline / Update) */
.banner{flex:none;z-index:2;display:flex;gap:10px;align-items:center;font-size:.8rem;padding:8px 14px;background:#f1f2f4;color:#3c4350;border-bottom:1px solid #d3d7dd}
.banner.upd{background:#eaf2fb;color:#243a58;border-color:#c3d9f0}
.banner.ok{background:#e6f4ea;color:#1d5b2c;border-color:#b9dfc3}
.banner .btn{margin:0;min-height:36px;padding:4px 12px;width:auto;font-size:.78rem;flex:none}
.banner span{flex:1;min-width:0}

/* Login */
.login{background:var(--hell);overflow-y:auto}
.lg-top{background:var(--navy);color:#fff;text-align:center;padding:calc(var(--oben) + 24px) 20px 70px;margin-top:0}
.lg-top .plate{margin:0 auto 14px;width:max-content}
.lg-top h1{color:#fff;font-size:1.35rem;margin:0}.lg-top p{margin:2px 0 0;color:#b9c6d8;font-size:.85rem}
.lg-card{background:#fff;margin:-48px 16px 0;border-radius:14px;padding:20px 18px 12px;box-shadow:0 6px 24px rgba(4,30,66,.18)}
.lg-card h2{font-size:1.15rem;margin-bottom:14px}
.lg-card p.hinweis{margin:0 0 14px;font-size:.88rem;color:var(--grau)}
.lg-foot{margin:auto 0 0;text-align:center;color:var(--grau);font-size:.76rem;padding:18px 20px calc(var(--unten) + 14px)}

/* Start */
.hello h1{font-size:1.4rem;margin:0}.hello p{margin:2px 0 12px;color:var(--grau);font-size:.84rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.coincard{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2c5c 0%,#041E42 70%);color:#fff;border-radius:16px;padding:18px 18px;min-height:150px;margin-bottom:14px;box-shadow:0 8px 22px rgba(4,30,66,.28)}
.coincard .coinimg{position:absolute;right:-34px;top:50%;width:180px;height:180px;margin-top:-90px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.coincard::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 50%,rgba(232,163,61,.22),transparent 55%);pointer-events:none}
.cc-t{display:flex;flex-direction:column;position:relative;z-index:1;max-width:62%}
.cc-t .lab{color:#b9c6d8}.cc-t .big{font:700 3.3rem/1.05 Montserrat,sans-serif;margin:2px 0 4px}
.cc-t .sub{font-size:.88rem;color:#e8eef7}.cc-t .dim{font-size:.76rem;color:#b9c6d8}
.cc-t .keine{font-size:.95rem;margin:6px 0}
.mv{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:10px 0;border-bottom:1px solid #eef0f3}.mv:last-child{border-bottom:0}
.mv b{display:block;font-size:.88rem}.mv span{font-size:.78rem;color:var(--grau)}.mv em{font:700 1.05rem Montserrat,sans-serif;font-style:normal;align-self:center;grid-row:1;grid-column:2}
.mv .plus{color:var(--gruen)}.mv .minus{color:var(--rot)}.mv time{font-size:.72rem;color:#7b8794;grid-column:1/3;margin-top:-2px}
.karte.list{padding:4px 16px}
.leer{padding:14px 0;color:var(--grau);font-size:.88rem;text-align:center}

/* Rechnungen */
.seg{display:flex;background:#e0e5ec;border-radius:10px;padding:3px;margin:2px 0 12px}
.seg button{flex:1;border:0;background:none;border-radius:8px;min-height:40px;font:600 .82rem Montserrat,sans-serif;color:var(--grau)}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(4,30,66,.18)}
.rr{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:#fff;border:0;border-radius:12px;padding:12px 12px 12px 16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(4,30,66,.10),0 6px 18px rgba(4,30,66,.05);border-left:4px solid var(--navy)}
.rr .l{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}.rr .l b{font:700 .85rem Montserrat,sans-serif;color:var(--navy)}.rr .l span{font-size:.84rem;overflow-wrap:anywhere}.rr .l small{font-size:.74rem;color:var(--grau)}
.rr .r{display:flex;align-items:center;gap:2px;color:#a2acb8;flex:none}.rr .r strong{font:700 .95rem Montserrat,sans-serif;color:var(--navy)}
.rr.rotl{border-left-color:var(--rot)}.rr.gruenl{border-left-color:var(--gruen)}

/* Rechnung */
.rk .rk-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px}.rk h2{font-size:1rem;margin:2px 0 6px}
.qrk{text-align:center;padding:16px}.qrbox{width:224px;height:224px;margin:0 auto 8px;border:1px solid var(--linie);border-radius:8px;padding:8px;background:#fff}.qr{width:100%;height:100%;display:block}
.zd dl,.dl2 dl,.calc dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
.calc dl{column-gap:0;row-gap:6px}.calc dt{padding-right:12px}
.zd dt,.dl2 dt{font-size:.76rem;color:var(--grau);padding-top:2px}.zd dd,.dl2 dd{margin:0;font-size:.86rem;text-align:right;overflow-wrap:anywhere}
.cp{display:flex;justify-content:flex-end;gap:4px;align-items:center;font-variant-numeric:tabular-nums}.cp button{border:0;background:none;color:var(--navy);padding:0;width:36px;height:36px;display:grid;place-items:center;flex:none}.cp .ic{width:18px;height:18px}
.cp .kopiert{font-size:.72rem;color:#1e7e34;font-weight:600}
.mahn{background:#fdecea;border:1px solid #f1b8bf;border-left:5px solid var(--rot);border-radius:10px;padding:12px 14px;display:flex;gap:10px;color:#7a1d27;font-size:.84rem;margin-bottom:14px}
.mahn .ic{color:var(--rot);flex:none;margin-top:1px}.mahn b{display:block;font:700 .88rem Montserrat,sans-serif}.mahn span{font-size:.74rem;opacity:.85}.mahn p{margin:6px 0 0}
.offl{background:#f1f2f4;border:1px solid #d3d7dd;border-left:5px solid #7b8794;border-radius:10px;padding:10px 14px;display:flex;gap:10px;font-size:.82rem;color:#3c4350;margin-bottom:14px}.offl .ic{flex:none;color:#5b6573}

/* Coins einsetzen */
.cn{padding:16px;text-align:center}
.cn-top{display:flex;gap:12px;align-items:center;text-align:left;padding-bottom:12px;border-bottom:1px solid #eef0f3}.cn-top .coinimg{width:56px;height:56px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.cn-top b{display:block;font:700 1.1rem Montserrat,sans-serif;color:var(--navy)}.cn-top small{color:var(--grau);font-size:.78rem}
.stp{display:flex;align-items:center;justify-content:center;gap:22px;padding:16px 0 6px}
.sb-btn{width:56px;height:56px;border-radius:28px;border:2px solid var(--navy);background:#fff;color:var(--navy);display:grid;place-items:center}.sb-btn:active{background:#eaf2fb}.sb-btn .ic{width:26px;height:26px}
.stp-n{min-width:84px}.stp-n b{display:block;font:700 3.2rem/1 Montserrat,sans-serif;color:var(--navy)}.stp-n span{font-size:.8rem;color:var(--grau)}
.msg{min-height:22px;font-size:.82rem;color:#b02a37;font-weight:600;padding-top:6px}.msg.shake{animation:sh .35s}
@keyframes sh{20%{transform:translateX(-5px)}50%{transform:translateX(5px)}80%{transform:translateX(-3px)}}
.calc dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.calc dt{font-size:.86rem}.calc dd.red{color:var(--rot)}
.calc dt.tot,.calc dd.tot{border-top:1px solid var(--linie);padding-top:8px;margin-top:2px;font:700 1rem Montserrat,sans-serif;color:var(--navy)}
.done{text-align:center;padding:6px 8px 14px}.done .ok{width:56px;height:56px;border-radius:28px;background:var(--gruen);color:#fff;display:grid;place-items:center;margin:0 auto 10px}.done .ok .ic{width:30px;height:30px;stroke-width:2.6}
.done h2{font-size:1.25rem;margin-bottom:4px}.done p{margin:0;color:var(--grau);font-size:.88rem}

/* Meldungen */
.nr{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #eef0f3;padding:12px 0}.nr:last-child{border-bottom:0}
.nr .dot{width:10px;height:10px;border-radius:5px;background:transparent;margin-top:6px;flex:none}.nr.un .dot{background:var(--rot)}
.nr b{display:block;font:700 .88rem Montserrat,sans-serif;color:var(--navy)}.nr span{display:block;font-size:.84rem}.nr small{font-size:.72rem;color:#7b8794}
.optin b{font:700 .95rem Montserrat,sans-serif;color:var(--navy)}.optin p{margin:4px 0 10px}.optin .btn{margin-bottom:0}

/* Profil */
.prof{display:flex;gap:14px;align-items:center;margin-bottom:14px}.av{width:60px;height:60px;border-radius:30px;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 1.2rem Montserrat,sans-serif;flex:none}
.prof h1{margin:0;font-size:1.25rem;overflow-wrap:anywhere}.prof p{margin:2px 0 0;font-size:.82rem;color:var(--grau);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.menu{padding:0 16px}.mi{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #eef0f3;padding:13px 0;min-height:52px;color:var(--schwarz)}.mi:last-child{border-bottom:0}
.mi b{font-size:.92rem;display:block}.mi span{font-size:.76rem;color:var(--grau);display:block}.mi>.ic{color:#a2acb8}
.tg{width:50px;height:30px;border-radius:15px;background:#c9d0da;border:0;position:relative;padding:0;flex:none;transition:background .15s}.tg i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.tg.on{background:var(--gruen)}.tg.on i{left:23px}
.dl2 dd{font-size:.86rem}
.fuss{text-align:center;color:var(--grau);font-size:.76rem;margin:8px 0 0}
.text-seite h3{margin-top:14px}.text-seite h3.erste,p.erste{margin-top:0}
.copyhelper{position:fixed;left:-9999px;top:0;opacity:0}.text-seite p,.text-seite li{font-size:.88rem}.text-seite ul,.text-seite ol{padding-left:20px;margin:4px 0 8px}
.dialog-bg{position:absolute;inset:0;background:rgba(4,30,66,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.dialog{background:#fff;border-radius:16px 16px 0 0;padding:20px 18px calc(var(--unten) + 18px);width:100%}
.dialog h2{font-size:1.1rem}.dialog p{font-size:.9rem;color:var(--grau)}

.toast{position:absolute;left:50%;bottom:calc(var(--unten) + 80px);transform:translateX(-50%);background:var(--navy);color:#fff;padding:9px 16px;border-radius:20px;font-size:.84rem;z-index:30;max-width:86%;text-align:center;box-shadow:0 6px 18px rgba(4,30,66,.3)}

/* Offline-Seite */
.offline-seite{display:grid;place-items:center;overflow:auto}
.off-wrap{max-width:360px;padding:30px 24px;text-align:center}.off-wrap .plate{margin:0 auto 18px;width:max-content;background:#fff;box-shadow:0 2px 8px rgba(4,30,66,.15)}

.posk h3{font-size:.95rem;margin:0 0 8px}.posk dt{overflow-wrap:anywhere}

/* Druck: nur die Rechnung (PDF speichern) - A4, Kopf mit Logo links und Vereinsadresse rechts, Empfaenger darunter */
.druck{display:none}
@media print{
  @page{size:A4;margin:0}
  body{overflow:visible;background:#fff;height:auto}
  .app,.dialog-bg,.toast{display:none!important}
  .druck{display:block!important;position:relative;width:210mm;min-height:296mm;font-family:"Open Sans",Arial,sans-serif;color:#18191A;font-size:10pt;line-height:1.45;padding:0}
  .druck address{font-style:normal}
  .d-kopf{position:relative;height:50mm}
  .d-wave{position:absolute;left:0;top:0;width:210mm;height:50mm}
  .d-wave path{fill:#eeefef;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .d-logo{position:absolute;left:18mm;top:9mm;height:28mm;width:auto;mix-blend-mode:multiply}
  .d-abs{position:absolute;right:18mm;top:11mm;text-align:right;font-size:11pt;line-height:1.55}
  .d-empf{margin:7mm 18mm 0;font-size:11pt;line-height:1.45}
  .d-titel{margin:14mm 18mm 4mm;font-size:17pt}
  .d-meta{display:grid;grid-template-columns:34mm 1fr;gap:1mm 4mm;margin:0 18mm 8mm}.d-meta dt{color:#585b5f}.d-meta dd{margin:0}
  .d-pos{border-collapse:collapse;width:174mm;margin:0 18mm}
  .d-pos th{text-align:left;font-size:9pt;color:#585b5f;font-weight:600;border-bottom:1px solid #18191A;padding:2mm 0}
  .d-pos td{padding:2.2mm 0;border-bottom:1px solid #dee2e6;vertical-align:top}
  .d-pos .r{text-align:right;white-space:nowrap;padding-left:6mm}.d-pos th.r{text-align:right}
  .d-pos tr.sum td{font-weight:700;border-top:1px solid #18191A;border-bottom:0;font-size:11pt}
  .d-zahl{display:flex;gap:8mm;margin:10mm 18mm 0;align-items:flex-start;break-inside:avoid}
  .d-zahl .qrp{width:46mm;height:46mm;flex:0 0 46mm}.d-zahl .qrp svg{width:100%;height:100%}
  .d-zahl p{margin:1mm 0 3mm;font-size:9.5pt;color:#585b5f}.d-zahl dl{display:grid;grid-template-columns:24mm 1fr;gap:1mm 3mm;margin:0}.d-zahl dt{color:#585b5f}.d-zahl dd{margin:0;overflow-wrap:anywhere}
  .d-fuss{position:fixed;left:0;right:0;bottom:9mm;text-align:center;font-size:9pt;color:#585b5f}
}