/* ===== Glas-Schicht für den Sprit-Tracker (Liquid-Glass-Look, nur CSS) ===== */
:root{
  --g-fill:rgba(255,255,255,.68);--g-fill-strong:rgba(255,255,255,.84);--g-chip:rgba(255,255,255,.58);
  --g-line:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.25) 38%,rgba(40,70,140,.14));
  --g-edge:rgba(255,255,255,.75);--g-shadow:0 12px 34px rgba(36,56,120,.13),0 2px 6px rgba(36,56,120,.06);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(36,56,120,.06);
  --g-bar:rgba(255,255,255,.55);--g-solid:#fff;--g-text-muted:#555b61;
  --bg1:rgba(52,120,246,.46);--bg2:rgba(0,196,168,.34);--bg3:rgba(150,92,255,.32);--bg4:rgba(255,160,70,.22);
}

/* Untergrund */
body.bg-light{background-color:transparent!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(62rem 40rem at 6% -6%,var(--bg1),transparent 62%),
  radial-gradient(52rem 38rem at 98% 4%,var(--bg2),transparent 62%),
  radial-gradient(58rem 42rem at 62% 108%,var(--bg3),transparent 62%),
  radial-gradient(40rem 30rem at -4% 78%,var(--bg4),transparent 64%),#f4f6fa}

/* Karten: Milchglas mit Lichtrand */
.card{border:1px solid transparent;border-radius:22px;
  background:linear-gradient(var(--g-fill),var(--g-fill)) padding-box,var(--g-line) border-box;
  box-shadow:var(--g-hi),var(--g-shadow)}
.card-header.bg-white,.card-header{background:transparent!important;border-bottom:1px solid var(--g-edge);border-radius:22px 22px 0 0!important}
.card.metric-card{border-left:4px solid #0d6efd;border-top-left-radius:22px;border-bottom-left-radius:22px}
.table{--bs-table-bg:transparent;--bs-table-color:#212529}
.table-light,.table-light>th,.table thead.table-light th{--bs-table-bg:rgba(255,255,255,.35);background:rgba(255,255,255,.35)}
.table>:not(caption)>*>*{border-bottom-color:rgba(120,130,150,.22)}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:rgba(255,255,255,.45)}
.list-group-item{background:transparent}

/* Eingaben und Knöpfe */
.form-control,.form-select{background-color:rgba(255,255,255,.74);border:1px solid rgba(120,130,150,.32);border-radius:12px}
.form-control:focus,.form-select:focus{background-color:#fff;border-color:#0d6efd;box-shadow:0 0 0 .22rem rgba(13,110,253,.20)}
.btn{border-radius:999px}
.btn-outline-primary,.btn-outline-secondary,.btn-outline-danger,.btn-outline-success{background:var(--g-chip);box-shadow:var(--g-hi);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-outline-danger:hover,.btn-outline-success:hover{background:var(--bs-btn-hover-bg)}
.btn-success,.btn-primary{box-shadow:var(--g-hi),0 6px 16px rgba(13,110,253,.18)}
.btn-success{box-shadow:var(--g-hi),0 6px 16px rgba(25,135,84,.22)}
.alert{border-radius:16px;border-color:var(--g-edge);box-shadow:var(--g-hi)}
.badge{border-radius:999px}

/* Lesbarkeit auf Milchglas: Bootstrap-Grautöne und blasse Textfarben abdunkeln (>= 4,5:1) */
.text-muted,.form-label.text-muted,small.text-muted{color:var(--g-text-muted)!important}
.text-info{color:#087990!important}
.text-warning{color:#8a6400!important}
.text-success{color:#157347!important}
.text-primary{color:#0b5ed7!important}

/* Kopfleiste (ab Tablet-Breite mitscrollend): einziger Ort mit Weichzeichner im Fluss */
.kopfleiste{border:1px solid transparent;border-radius:22px;
  background:linear-gradient(var(--g-bar),var(--g-bar)) padding-box,var(--g-line) border-box;box-shadow:var(--g-hi),var(--g-shadow)}
@media (min-width:768px){
  .kopfleiste{top:.6rem;margin:0 0 1.5rem!important;padding:.8rem 1.1rem;
    -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)}
}
@media (max-width:767.98px){.kopfleiste{margin:0 0 1rem!important;padding:.8rem 1rem}}

/* Erfassungs-Sheet auf dem Handy: Glas über unscharfem Hintergrund, Griff wie bei iOS */
@media (max-width:991.98px){
  .sheet-spalte .card{background:linear-gradient(var(--g-fill-strong),var(--g-fill-strong)) padding-box,var(--g-line) border-box;
    border-radius:26px 26px 0 0;-webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7)}
  .sheet-spalte .card::before{content:"";display:block;width:42px;height:5px;border-radius:999px;background:rgba(90,100,120,.45);margin:.55rem auto 0}
  .sheet-scrim{background:rgba(20,30,60,.28)}
  .fab{background:rgba(25,135,84,.80);border:1px solid rgba(255,255,255,.55);color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 28px rgba(25,135,84,.35);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
}

/* Ausweichvarianten */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kopfleiste{background:var(--g-solid)}.sheet-spalte .card{background:var(--g-solid)}}
@media (prefers-reduced-transparency:reduce){
  :root{--g-fill:#fff;--g-fill-strong:#fff;--g-bar:#fff;--g-chip:#fff}
  .kopfleiste,.sheet-spalte .card,.btn,.fab{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body::before{opacity:.3}}
@media (prefers-contrast:more){
  :root{--g-fill:#fff;--g-fill-strong:#fff;--g-bar:#fff;--g-chip:#fff}
  .card,.kopfleiste{border-color:#000;background:#fff}body::before{display:none}
  .kopfleiste,.sheet-spalte .card,.btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media print{body::before{display:none}.card,.kopfleiste{background:#fff!important;box-shadow:none;border:1px solid #999}}