/* ------------------------------------------------------------------
   pay.gulmiramodehaus.de — exakt efter referensen (bento, staplade block)
   Inter Variable, självhostad (OFL). Enbart ljust tema, medvetet.
   ------------------------------------------------------------------ */
@font-face{
  font-family:"Inter";
  src:url("/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#B9C1EE;
  --white:#FFFFFF;
  --ink:#111111;
  --ink-2:#4B4B4B;
  --muted:#8C8C8C;
  --line:#E6E6E6;
  --yellow:#F3D86B;
  --mint:#AEDDDF;
  --late:#E0462F;
  --soon:#D79A1C;
  --ok:#2E8A5C;
  --r:30px;
  --r2:22px;
  --gap:5px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.35;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;min-height:100dvh;
}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;color:inherit;}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

.shell{
  max-width:480px;margin:0 auto;
  padding:6px 6px calc(84px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:var(--gap);
}

/* ------------------------------------------------------- toppraden */
.top{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px;}
.hero--top .top{padding:0;margin:-8px -6px 44px;}
.top .ib--ink{background:var(--ink);color:#fff;}
.ib{
  width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;
  flex:none;border:0;cursor:pointer;background:var(--white);color:var(--ink);
}
.ib--ink{background:var(--ink);color:#fff;}
.ib--line{background:transparent;border:1.5px solid var(--ink);}
.ib--line.on-ink{border-color:rgba(255,255,255,.9);color:#fff;}
.ib--sm{width:36px;height:36px;}
.ic{width:19px;height:19px;}
.ib--sm .ic{width:17px;height:17px;}
.top .ib:not(.ib--ink){background:transparent;}

/* ----------------------------------------------------------- block */
.blk{border-radius:var(--r);padding:22px 20px;position:relative;}
.blk--white{background:var(--white);}
.blk--yellow{background:var(--yellow);}
.blk--mint{background:var(--mint);}
.blk--ink{background:var(--ink);color:#fff;}

.lbl{
  display:block;font-size:11px;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-bottom:8px;
}
.blk--ink .lbl,.blk--yellow .lbl{color:rgba(17,17,17,.55);}
.blk--ink .lbl{color:rgba(255,255,255,.6);}

/* display-rubrik: regular + bold i samma mening, tight spärrning */
.disp{
  font-size:27px;line-height:1.16;letter-spacing:-.03em;font-weight:400;
  max-width:16ch;
}
.disp b{font-weight:650;}
.disp .em{font-size:.9em;}

/* ------------------------------------------------------------ hero */
.hero{min-height:262px;padding-bottom:74px;}
.hero__foot{
  position:absolute;left:14px;right:14px;bottom:14px;
  display:flex;align-items:center;gap:6px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#F2F2F2;border:0;border-radius:999px;
  padding:9px 12px;font-size:12px;font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.chip .em{font-size:13px;}
.hero__foot .ib{margin-left:auto;width:38px;height:38px;}

/* ------------------------------------------------------ gula kortet */
.yel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.seg{display:inline-flex;background:var(--ink);border-radius:999px;padding:3px;}
.seg__i{
  padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.8);
}
.seg__i.is-on{background:var(--white);color:var(--ink);}
.yel__body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.yel__h{font-size:23px;line-height:1.18;letter-spacing:-.025em;font-weight:400;max-width:11ch;}
.yel__n{
  font-size:52px;font-weight:380;letter-spacing:-.045em;line-height:.95;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.yel__n small{font-size:20px;font-weight:450;letter-spacing:-.02em;margin-left:3px;}

/* ---------------------------------------------------- mint-remsan */
.strip{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px 11px 18px;min-height:58px;
}
.strip__t{flex:1;font-size:13.5px;font-weight:500;}
.strip__t b{font-weight:650;}
.strip .ib{width:36px;height:36px;}
.av{
  width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--yellow);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;
}

/* --------------------------------------------------------- rader */
.sec{padding:16px 16px 6px;display:flex;justify-content:space-between;align-items:baseline;}
.sec__l{font-size:11px;font-weight:500;color:var(--ink-2);}
.sec__a{font-size:11px;font-weight:500;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;}

.row{
  background:var(--white);border-radius:var(--r2);
  padding:11px 11px 11px 12px;display:flex;align-items:center;gap:12px;
}
.badge{
  width:46px;height:46px;border-radius:12px;background:#F2F2F2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;flex:none;
}
.badge__d{font-size:17px;font-weight:650;letter-spacing:-.02em;}
.badge__w{font-size:9.5px;font-weight:500;color:var(--ink-2);margin-top:2px;}
.row--late .badge{background:#FBE5E1;color:var(--late);}
.row--late .badge__w{color:var(--late);}
.row--soon .badge{background:#FBF0D3;color:var(--soon);}
.row--soon .badge__w{color:var(--soon);}
.row--paid .badge{background:#F6F6F6;color:var(--muted);}
.row--paid .badge__w{color:var(--muted);}
.row__m{flex:1;min-width:0;}
.row__v{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row__s{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.row__a{display:flex;gap:5px;flex:none;}
.row__a .ib{width:36px;height:36px;}
.row--paid .row__v{color:var(--muted);text-decoration:line-through;}

.empty{
  background:var(--white);border-radius:var(--r2);padding:26px 18px;
  text-align:center;color:var(--muted);font-size:13px;
}

/* ------------------------------------------------------------ nav */
.nav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;
  width:min(100%,480px);height:calc(72px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--ink);border-radius:var(--r) var(--r) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  padding-left:10px;padding-right:10px;z-index:10;
}
.nav__i{
  justify-self:center;display:grid;place-items:center;
  width:44px;height:42px;border-radius:999px;color:rgba(255,255,255,.88);
}
.nav__i .ic{width:21px;height:21px;}
.nav__i.is-on{background:var(--white);color:var(--ink);width:66px;}
.nav__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------------------------------------------------------- detalj */
.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;}
.kv:first-of-type{border-top:0;}
.kv dt{color:var(--muted);}
.kv dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
.big{font-size:40px;font-weight:400;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;}
.big small{font-size:18px;font-weight:450;margin-left:3px;letter-spacing:-.01em;}
.conf{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:4px 9px;border-radius:999px;background:#F1F1F1;}
.conf--high{background:#DFF0E6;color:#1F6B44;}
.conf--medium{background:#FBEFD2;color:#8A6410;}
.conf--low{background:#F9DBD6;color:#9A2D1E;}

/* ----------------------------------------------------------- auth / form */
.auth{padding:30px 10px 10px;display:flex;flex-direction:column;gap:var(--gap);}
.auth .disp{margin:0 8px 14px;font-size:32px;max-width:12ch;}
.form{display:flex;flex-direction:column;gap:12px;}
.fld{display:flex;flex-direction:column;}
.fld .lbl{margin-bottom:6px;margin-left:4px;}
.fld input{
  background:#F3F3F5;border:1.5px solid transparent;border-radius:16px;
  padding:13px 15px;font-size:16px;width:100%;
}
.fld input:focus{outline:0;border-color:var(--ink);background:#fff;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;border:0;border-radius:999px;
  padding:14px 20px;font-size:14.5px;font-weight:600;cursor:pointer;width:100%;
}
.btn:hover{background:#000;}
.btn--line{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn--yellow{background:var(--yellow);color:var(--ink);}
.alt{font-size:13px;color:var(--ink-2);text-align:center;padding:6px 0;}
.alt a{text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.err,.notice{border-radius:16px;padding:12px 16px;font-size:13.5px;font-weight:500;}
.err{background:#F7DCD8;color:#8E2518;}
.notice{background:var(--mint);color:#0D3B36;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

@media (min-width:520px){
  .disp{font-size:29px;}
  .yel__n{font-size:56px;}
}