/* Brewlog Kombi – Handy (Grundlage Version 1) mit Glas-Akzentfarbe (Blau statt Türkis), Glas-Schrift und Glas-Tanks.
   Farbtausch Türkis → Glas-Blau am 03.11.2026 (Werte aus /app.css: --handlung, --handlung-verlauf). */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;   /* Kombi: Schrift wie Glas */
  --r-xl: 26px; --r-lg: 20px; --r-md: 15px; --r-sm: 11px;
  --gut: 16px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
.light {
  --bg: #F2F2F7; --bg2: #E7EBEE;
  --card: rgba(255,255,255,.86); --card-solid: #fff; --card2: rgba(17,24,32,.04);
  --line: rgba(17,24,32,.065); --line2: rgba(17,24,32,.11); --fill: rgba(17,24,32,.05);
  --ink: #101317; --ink2: #5E6670; --ink3: #9AA2AB;
  --accent: #0A76A6; --accent2: #16A7D2; --accent-tint: rgba(22,167,210,.11); --on-accent: #fff;
  --red: #E5352A; --orange: #E88300; --green: #1F9E4E; --blue: #2B97D0; --gold: #C98A1B;
  --red-tint: rgba(229,53,42,.09); --orange-tint: rgba(232,131,0,.11); --green-tint: rgba(31,158,78,.11); --blue-tint: rgba(43,151,208,.11);
  --red-ink: #C42B21; --orange-ink: #A85F00; --green-ink: #17803E;
  --shadow: 0 0 0 .5px rgba(17,24,32,.05), 0 1px 2px rgba(17,24,32,.04), 0 8px 28px -6px rgba(17,24,32,.08);
  --shadow-lg: 0 0 0 .5px rgba(17,24,32,.06), 0 2px 4px rgba(17,24,32,.04), 0 30px 70px -20px rgba(17,40,50,.28);
  --bar: rgba(255,255,255,.78); --side: rgba(255,255,255,.6);
  --glow: radial-gradient(55% 45% at 100% -5%, rgba(22,167,210,.13), transparent 62%), radial-gradient(45% 40% at 30% 105%, rgba(240,173,53,.08), transparent 62%), linear-gradient(180deg, #F5F5F9, #EEEFF3);
  color-scheme: light;
}
.dark {
  --bg: #040607; --bg2: #0B0F11;
  --card: rgba(255,255,255,.055); --card-solid: #12171A; --card2: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.075); --line2: rgba(255,255,255,.13); --fill: rgba(255,255,255,.07);
  --ink: #F5F6F7; --ink2: rgba(235,240,245,.62); --ink3: rgba(235,240,245,.36);
  --accent: #4FCBEA; --accent2: #8ADBF0; --accent-tint: rgba(79,203,234,.15); --on-accent: #032433;
  --red: #FF4D42; --orange: #FFA21A; --green: #34D46A; --blue: #68CFFF; --gold: #E9B44C;
  --red-tint: rgba(255,77,66,.15); --orange-tint: rgba(255,162,26,.14); --green-tint: rgba(52,212,106,.13); --blue-tint: rgba(104,207,255,.12);
  --red-ink: #FF8A80; --orange-ink: #FFC060; --green-ink: #6EE69A;
  --shadow: inset 0 0 0 .5px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -10px rgba(0,0,0,.6);
  --shadow-lg: inset 0 0 0 .5px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.07), 0 30px 70px -20px rgba(0,0,0,.8);
  --bar: rgba(14,18,20,.74); --side: rgba(14,18,20,.6);
  --glow: radial-gradient(110% 46% at -10% -4%, rgba(22,167,210,.30), transparent 62%), radial-gradient(80% 40% at 108% 20%, rgba(240,173,53,.13), transparent 64%), radial-gradient(90% 40% at 50% 100%, rgba(22,167,210,.08), transparent 70%), #040607;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { font-family: var(--font); color: var(--ink); background: var(--glow); background-attachment: fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; letter-spacing: -.005em; font-size: 15px; line-height: 1.35; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; text-decoration: none; }
.ic { width: 20px; height: 20px; flex: none; display: block; }
.num, .bignum { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.unit { font-weight: 500; color: var(--ink2); letter-spacing: 0; margin-left: 3px; }
b { font-weight: 650; }
.muted { color: var(--ink2); }
.faint { color: var(--ink3); }
.red-t { color: var(--red); } .ok-t { color: var(--green); } .warn-t { color: var(--orange); } .acc-t { color: var(--accent); }

/* ------------------------------------------------------------------ Rahmen */
.app { min-height: 100vh; }
.app.mit-seite { display: grid; grid-template-columns: 256px 1fr; height: 100vh; }
.app.mit-seite .view { height: 100vh; overflow-y: auto; padding: 22px 32px 40px; }
.app.mit-leiste .view { padding: calc(var(--safe-t) + 6px) var(--gut) calc(110px + var(--safe-b)); max-width: 680px; margin: 0 auto; }
.app.nur .view { min-height: 100vh; }

.side { display: flex; flex-direction: column; padding: 18px 14px 14px; background: var(--side); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: inset -.5px 0 0 var(--line2); height: 100vh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.side .brewery { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card-solid); box-shadow: var(--shadow); width: 100%; text-align: left; }
.side .brewery b { display: block; font-size: 14px; }
.side .brewery span span { font-size: 12px; color: var(--ink2); font-weight: 500; }
.side .brewery > span { flex: 1; min-width: 0; }
.side .brewery .ic { width: 16px; height: 16px; color: var(--ink3); stroke-width: 2.2; }
.side .add { margin-top: 12px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #fff; font-size: 15px; font-weight: 650; width: 100%;
  background: linear-gradient(150deg, #16A7D2, #0A79B3); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -10px rgba(10,121,179,.8); }
.side .add .ic { width: 19px; height: 19px; stroke-width: 2.4; }
.side .search { margin-top: 10px; height: 38px; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--fill); color: var(--ink3); font-size: 14px; font-weight: 500; width: 100%; }
.side .search .ic { width: 17px; height: 17px; }
.side kbd { margin-left: auto; font: 600 11.5px var(--font); color: var(--ink3); background: var(--card-solid); border-radius: 6px; padding: 2px 6px; box-shadow: 0 0 0 .5px var(--line2); }
.nav { margin-top: 14px; display: grid; gap: 2px; }
.nav a { height: 36px; border-radius: 11px; display: flex; align-items: center; gap: 11px; padding: 0 10px; font-size: 14.5px; font-weight: 550; }
.nav a .ic { width: 20px; height: 20px; color: var(--ink2); }
.nav a:hover { background: var(--fill); }
.nav a.on { background: var(--accent-tint); color: var(--accent); font-weight: 650; }
.nav a.on .ic { color: var(--accent); stroke-width: 2; }
.nav a em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink3); }
.nav a em.o, .nav a em.warn:not(:empty), .nav a em.red:not(:empty) { color: #fff; background: var(--orange); min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; padding: 0 6px; }
.nav a em.red:not(:empty) { background: var(--red); }
.nav a em.r { color: #fff; background: var(--red); min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; padding: 0 6px; }
.grp-l { margin: 16px 10px 2px; font-size: 11.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; }
.side .foot { margin-top: auto; padding-top: 14px; display: grid; gap: 6px; }
.side .st { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 550; color: var(--ink2); padding: 2px 8px; }
.side .st .ic { width: 17px; height: 17px; color: var(--green); }
.side .st.warn .ic { color: var(--orange); } .side .st.bad .ic { color: var(--red); } .side .st.bad { color: var(--red-ink); }
.side .me { margin-top: 4px; display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; box-shadow: inset 0 .5px 0 var(--line2); }
.av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(145deg, #1FB4DC, #0A4A6B); flex: none; }
.side .me b { font-size: 13.5px; display: block; }
.side .me span span { font-size: 12px; color: var(--ink2); }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(76px + var(--safe-b)); padding: 7px 10px var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); align-items: start;
  background: var(--bar); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 .5px 0 var(--line2); z-index: 20; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--ink3); padding-top: 2px; }
.tab .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.tab.on { color: var(--accent); }
.tab.on .ic { stroke-width: 2; }
.plus { width: 58px; height: 58px; border-radius: 50%; margin-top: -16px; justify-self: center; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #16A7D2, #0A79B3); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 5px var(--bg), 0 14px 26px -8px rgba(10,121,179,.6); }
.plus .ic { width: 28px; height: 28px; stroke-width: 2.4; }

/* ------------------------------------------------------------------ Kopf */
.phead { padding-top: 6px; }
.ph-bar { height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brew-pill { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 6px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); font-size: 15px; font-weight: 600; min-width: 0; max-width: 72%; }
.brew-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brew-pill .ic { width: 15px; height: 15px; color: var(--ink3); stroke-width: 2.2; }
.brew-pill .mark { flex: none; }
.head-r { display: flex; gap: 10px; align-items: center; }
.round { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); flex: none; }
.round .ic { width: 21px; height: 21px; }
.round.sm { width: 34px; height: 34px; } .round.sm .ic { width: 18px; height: 18px; }
.round.xs { width: 30px; height: 30px; box-shadow: none; background: var(--fill); } .round.xs .ic { width: 16px; height: 16px; }
.avatar { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow); }
.ptitle { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 12px 4px 16px; }
.phead.sub .ptitle { margin-top: 8px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: .03em; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.phead.sub h1 { font-size: 28px; }
.vsub { font-size: 14px; color: var(--ink2); margin-top: 4px; font-weight: 500; display: block; line-height: 1.5; }
.vsub > .chip, .vsub > .beerdot { vertical-align: middle; margin-right: 2px; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.syncpill { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink2); padding-bottom: 5px; white-space: nowrap; cursor: pointer; }
.syncpill .ic { width: 18px; height: 18px; color: var(--green); }
.syncpill.warn { color: var(--orange-ink); } .syncpill.warn .ic { color: var(--orange); }
.syncpill.bad { color: var(--red-ink); } .syncpill.bad .ic { color: var(--red); }
.vhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.vh-r { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.backlink { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.backlink .ic { width: 17px; height: 17px; stroke-width: 2.3; }

/* ------------------------------------------------------------------ Karten und Raster */
.card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); }
.light .card { background: rgba(255,255,255,.88); }
.pad { padding: 18px; }
.cap { font-size: 13px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; gap: 7px; }
.cap .ic { width: 17px; height: 17px; }
.cap-r { margin-left: auto; }
.bignum { font-size: 38px; font-weight: 650; line-height: 1; display: inline-flex; align-items: baseline; }
.bignum .unit { font-size: 17px; }
.bignum.xl { font-size: 48px; } .bignum.xl .unit { font-size: 21px; }
.bignum.m { font-size: 28px; } .bignum.m .unit { font-size: 14px; }
.bignum.s { font-size: 22px; } .bignum.s .unit { font-size: 12.5px; }
.grid { display: grid; gap: 14px; }
.breit .g2 { grid-template-columns: 1fr 1fr; }
.breit .g3 { grid-template-columns: repeat(3, 1fr); }
.breit .g4 { grid-template-columns: repeat(4, 1fr); }
.breit .g21 { grid-template-columns: 2fr 1fr; }
.breit .g31 { grid-template-columns: 3fr 1fr; }
.breit .g12 { grid-template-columns: 1fr 2fr; }
.schmal .grid.duo { grid-template-columns: 1fr 1fr; gap: 12px; }
.span2 { grid-column: span 2; } .schmal .span2 { grid-column: auto; }
.page > * + * { margin-top: 14px; }
.page > .sec { margin-top: 26px; }
.page > .sec:first-child { margin-top: 4px; }
.sec { display: flex; align-items: center; justify-content: space-between; margin: 26px 4px 10px; gap: 10px; }
.sec h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.breit .sec h2 { font-size: 19px; }
.sec .n, .n { font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-tint); min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0 6px; letter-spacing: 0; }
.n.red { color: #fff; background: var(--red); }
.more { font-size: 15px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.more .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 9px; border-radius: 13px; font-size: 12.5px; font-weight: 600; background: var(--fill); color: var(--ink2); white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; }
.chip.acc { background: var(--accent-tint); color: var(--accent); }
.chip.red { background: var(--red-tint); color: var(--red-ink); }
.chip.warn { background: var(--orange-tint); color: var(--orange-ink); }
.chip.ok { background: var(--green-tint); color: var(--green-ink); }
.chip.blue { background: var(--blue-tint); color: var(--blue); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--ink3); }
.dot.ok { background: var(--green); } .dot.warn { background: var(--orange); } .dot.red { background: var(--red); } .dot.acc { background: var(--accent); }

/* Listen */
.list { border-radius: var(--r-xl); padding: 4px 0; }
.list.card { padding: 4px 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 13px; position: relative; width: 100%; text-align: left; min-height: 56px; }
a.row:hover, button.row:hover { background: var(--fill); }
.list .row:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.list .row:last-child { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.row + .row::before { content: ""; position: absolute; left: 61px; right: 0; top: 0; height: .5px; background: var(--line2); }
.ri { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.ri .ic { width: 19px; height: 19px; }
.ri.o { background: var(--orange-tint); color: var(--orange); }
.ri.r { background: var(--red-tint); color: var(--red); }
.ri.i { background: var(--fill); color: var(--ink2); }
.ri.a { background: var(--accent-tint); color: var(--accent); }
.ri.g { background: var(--green-tint); color: var(--green); }
.ri.b { background: var(--blue-tint); color: var(--blue); }
.ri.v { background: transparent; width: 30px; }
.row .mid { flex: 1; min-width: 0; display: block; }
.row .mid b { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 13px; color: var(--ink2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; display: block; }
.row .r { text-align: right; font-size: 13px; color: var(--ink2); font-weight: 600; white-space: nowrap; }
.row .r small { display: block; color: var(--ink3); font-size: 12px; }
.row > .chev { width: 15px; height: 15px; color: var(--ink3); stroke-width: 2.3; }
.row.dim .mid b { color: var(--ink3); }
.row.del .mid b { text-decoration: line-through; color: var(--ink3); }
.row .tick { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line2); display: grid; place-items: center; color: transparent; }
.row .tick.on { background: var(--accent); color: #fff; box-shadow: none; }
.row .tick .ic { width: 14px; height: 14px; stroke-width: 3; }
.daylabel { font-size: 13px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; margin: 22px 6px 8px; }

/* Schlüssel/Wert */
.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: .5px solid var(--line2); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--ink2); font-size: 14px; font-weight: 500; }
.kv dd { font-size: 14.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.breit .kv.two { grid-template-columns: 1fr 1fr; column-gap: 28px; }

/* Tabelle (breit) */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: .5px solid var(--line2); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: .5px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr[data-go] { cursor: pointer; }
.tbl tr[data-go]:hover td { background: var(--fill); }
.tbl .r { text-align: right; } .tbl .c { text-align: center; }
.tbl td.b { font-weight: 650; }
.tblwrap { overflow-x: auto; border-radius: var(--r-xl); }

/* Knöpfe */
.btn { height: 44px; padding: 0 16px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; font-weight: 650; background: var(--card-solid); box-shadow: var(--shadow); white-space: nowrap; }
.btn .ic { width: 18px; height: 18px; }
.btn.pri { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 22px -12px rgba(10,121,179,.9); }
.light .btn.pri { background: linear-gradient(150deg, #16A7D2, #0A79B3); color: #fff; }
.btn.ghost { background: var(--fill); box-shadow: none; }
.btn.danger { background: var(--red); color: #fff; box-shadow: 0 10px 22px -12px rgba(229,53,42,.9); }
.btn.dangerlite { background: var(--red-tint); color: var(--red-ink); box-shadow: none; }
.btn.big { height: 54px; font-size: 17px; border-radius: 16px; }
.btn.wide { width: 100%; }
.btn.sm { height: 36px; font-size: 14px; padding: 0 12px; border-radius: 12px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lnk { color: var(--accent); font-weight: 650; }
.qa { display: flex; gap: 8px; flex-wrap: wrap; }
.qa .btn { height: 38px; border-radius: 19px; font-size: 14px; padding: 0 14px 0 11px; }
.qa .btn .ic { color: var(--accent); }
.qa .btn.pri .ic { color: inherit; }

/* Aktions-Kacheln (große Ziele) */
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.breit .acts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.act { border-radius: 20px; padding: 13px 12px 12px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; text-align: left; background: var(--card); box-shadow: var(--shadow); }
.act .ai { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.act .ai .ic { width: 19px; height: 19px; }
.act b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.act small { display: block; font-size: 12px; color: var(--ink2); font-weight: 500; margin-top: 2px; }
.act.pri { background: linear-gradient(150deg, #1FB4DC 0%, #0E8CC8 55%, #0A6894 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px -14px rgba(22,167,210,.7); }
.act.pri .ai { background: rgba(255,255,255,.2); color: #fff; }
.act.pri small { color: rgba(255,255,255,.78); }
.act.red .ai { background: var(--red-tint); color: var(--red); }
.act:disabled { opacity: .45; }

/* Hinweise */
.note { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 14px; font-size: 14px; font-weight: 500; line-height: 1.35; }
.note .ic { width: 19px; height: 19px; margin-top: 0; }
.note > span { flex: 1; }
.note.info { background: var(--accent-tint); color: var(--ink); } .note.info .ic { color: var(--accent); }
.note.warn { background: var(--orange-tint); } .note.warn .ic { color: var(--orange); }
.note.bad { background: var(--red-tint); } .note.bad .ic { color: var(--red); }
.note.ok { background: var(--green-tint); } .note.ok .ic { color: var(--green); }
.note .lnk { white-space: nowrap; }
.page > .note { margin-bottom: 2px; }
.empty { display: grid; place-items: center; text-align: center; gap: 6px; padding: 36px 20px; color: var(--ink2); }
.empty .ic { width: 34px; height: 34px; color: var(--ink3); margin-bottom: 4px; }
.empty b { font-size: 16px; color: var(--ink); }
.empty span { font-size: 14px; max-width: 420px; }
.empty.small { padding: 18px; }
.loading { display: grid; place-items: center; padding: 70px 0; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line2); border-top-color: var(--accent); display: inline-block; animation: spin .8s linear infinite; vertical-align: middle; }
.btn .spin { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.errbox { padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.errbox > .ic { width: 26px; height: 26px; color: var(--red); }

/* ------------------------------------------------------------------ Tanks */
.vessel { display: block; width: 100%; height: auto; overflow: visible; }
.ring { display: block; flex: none; }
.badge { position: absolute; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; z-index: 2; }
.badge .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.badge.red { background: var(--red); box-shadow: 0 0 0 3px var(--card-solid), 0 4px 12px rgba(229,53,42,.45); }
.badge.ok { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--card-solid), 0 4px 12px rgba(22,167,210,.45); }
.light .badge.ok { color: #fff; }
.badge.warn { background: var(--orange); box-shadow: 0 0 0 3px var(--card-solid), 0 4px 12px rgba(232,131,0,.4); }
.badge.plan { background: var(--card-solid); color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 4.5px var(--card-solid); }
@keyframes rise { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-38px); opacity: 0; } }
.bub { animation: rise 4.2s linear infinite; transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) { .bub { animation: none; } }

.keller { padding: 18px 16px 6px; position: relative; overflow: hidden; }
.keller::before { content: ""; position: absolute; inset: auto -40px -60px -40px; height: 220px; background: radial-gradient(60% 60% at 50% 40%, rgba(240,173,53,.16), transparent 70%); pointer-events: none; }
.k-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; }
.k-sub { font-size: 14px; color: var(--ink2); margin-top: 6px; font-weight: 500; }
.legend { display: grid; gap: 7px; }
.legend > span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink2); justify-content: flex-end; white-space: nowrap; }
.legend b { color: var(--ink); }
.legend .ic { width: 16px; height: 16px; }
.legend .dash { width: 11px; height: 15px; border-radius: 4px 4px 5px 5px; border: 1.5px dashed var(--ink3); display: inline-block; }
.breit .legend { display: flex; gap: 6px; }
.breit .legend > span { height: 30px; padding: 0 11px 0 9px; border-radius: 15px; background: var(--fill); font-size: 12.5px; }
.strip { display: flex; align-items: flex-end; justify-content: space-between; margin: 16px 0 14px; position: relative; }
.strip .grp { display: flex; gap: 4px; align-items: flex-end; }
.strip .sep { width: 1px; align-self: stretch; margin: 44px 0 6px; background: var(--line2); }
.tv { width: 32px; display: flex; flex-direction: column; align-items: center; position: relative; }
.tv .code { font-size: 10.5px; font-weight: 700; color: var(--ink2); margin-bottom: 5px; white-space: nowrap; }
.tv.free .code { color: var(--ink3); }
.tv .bslot { height: 22px; width: 100%; position: relative; margin-bottom: 4px; }
.tv .badge { top: 0; width: 20px; height: 20px; }
.tv .badge .ic { width: 11.5px; height: 11.5px; }
.tv .vbox { width: 100%; }
.tv .vbox .vessel { -webkit-box-reflect: below -2px linear-gradient(transparent 74%, rgba(255,255,255,.16)); }
/* breit: großes Kellerbild mit Zahl je Tank */
.tanks-xl { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 16px; position: relative; }
.tanks-xl .tg { display: flex; gap: 6px; }
.tanks-xl .tsep { width: 1px; align-self: stretch; background: var(--line2); margin: 60px 4px 70px; }
.tc { width: 84px; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 16px; padding: 4px 0 6px; }
a.tc:hover { background: var(--fill); }
.tc .code { font-size: 14px; font-weight: 700; }
.tc.free .code { color: var(--ink3); }
.tc .bslot { height: 26px; width: 100%; position: relative; margin: 4px 0 2px; }
.tc .badge { top: 1px; }
.tc .vbox { width: 52px; }
.tc .big { margin-top: 12px; font-size: 22px; font-weight: 650; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.tc .big .unit { font-size: 12.5px; margin-left: 2px; font-weight: 600; }
.tc .beer { font-size: 12px; font-weight: 600; color: var(--ink2); margin-top: 5px; line-height: 1.25; height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc .meta { font-size: 11.5px; font-weight: 600; color: var(--ink3); margin-top: 4px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tc .meta .ring { color: var(--ink2); }
.tc.free .big { color: var(--ink3); font-weight: 600; font-size: 17px; padding: 3px 0 2px; }
.tc .big.planned { color: var(--accent); }
.tc .meta.ok { color: var(--accent); } .tc .meta.red { color: var(--red); } .tc .meta.warn { color: var(--orange-ink); }

/* Tank-Karten (Liste) */
.tcards { display: grid; gap: 12px; }
.breit .tcards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tcard { display: flex; gap: 14px; padding: 14px 16px 14px 12px; align-items: stretch; }
.tcard .tv2 { width: 54px; flex: none; position: relative; }
.tcard .tv2 .badge { top: -6px; left: auto; right: -10px; transform: none; }
.tcard .tci { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tcard .tct { display: flex; align-items: center; gap: 8px; }
.tcard .tct b { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.tcard .tcb { font-size: 14px; font-weight: 600; color: var(--ink2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .tcn { display: flex; gap: 16px; margin-top: auto; padding-top: 10px; align-items: flex-end; }
.tcard .tcn div span { display: block; font-size: 11.5px; color: var(--ink3); font-weight: 600; margin-top: 2px; }
.tcard.free .tct b { color: var(--ink2); }

/* Gärverlauf */
.chartbox { position: relative; }
.gline { width: 100%; height: auto; display: block; touch-action: pan-y; }
.gline .grid { stroke: var(--line2); stroke-width: 1; }
.gline .ax { font-size: 11px; fill: var(--ink3); font-weight: 600; font-family: var(--font); }
.gline .axu { font-weight: 750; font-size: 11.5px; }
.gline .grid.null { stroke: var(--ink3); stroke-opacity: .55; }
.gline .mark { stroke: var(--ink3); stroke-dasharray: 3 4; stroke-width: 1.2; }
.gline .mark.acc { stroke: var(--accent); }
.gline .mk { font-size: 10.5px; fill: var(--ink2); font-weight: 700; font-family: var(--font); }
.gline .cursor { stroke: var(--ink2); stroke-width: 1; }
.ctip { position: absolute; top: 4px; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--card-solid); box-shadow: var(--shadow-lg); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; min-width: 150px; z-index: 3; }
.ctip.on { opacity: 1; }
.ctip b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.ctip div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink2); font-weight: 500; }
.ctip div span:last-child { color: var(--ink); font-weight: 650; }
.legend2 { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.legend2 i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.spark { display: block; overflow: visible; }
.gbars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; align-items: end; height: calc(var(--h) + 18px); }
.gb { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; position: relative; }
.gb i { display: block; border-radius: 4px; background: rgba(22,167,210,.24); }
.gb.on i { background: linear-gradient(180deg, #16A7D2, #0A79B3); }
.gb i.no { background: var(--fill); }
.gb u { display: block; border-radius: 3px; background: rgba(232,131,0,.45); margin-top: 2px; }
.gb span { font-size: 10px; font-weight: 600; color: var(--ink3); text-align: center; margin-top: 5px; height: 13px; }

/* Fortschrittsbalken */
.bar { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; position: relative; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #8ADBF0, #16A7D2); }
.bar.warn > i { background: var(--orange); } .bar.red > i { background: var(--red); }
.bar > u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--orange); }

/* ------------------------------------------------------------------ Blätter (Eingaben, Auswahl, Rückfragen) */
#sheets { position: relative; z-index: 50; }
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.38); opacity: 0; transition: opacity .22s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet { position: relative; width: 100%; max-height: calc(100vh - var(--safe-t) - 18px); display: flex; flex-direction: column; background: var(--card-solid); border-radius: 26px 26px 0 0; box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.9,.25,1); }
.dark .sheet { background: #13181B; }
.sheet-wrap.in .sheet { transform: translateY(0); }
.sheet-wrap.in .sheet-bg { opacity: 1; }
.sheet-wrap.out .sheet { transform: translateY(100%); }
.sheet-wrap.out .sheet-bg { opacity: 0; }
.sheet-wrap.gross .sheet { height: calc(100vh - var(--safe-t) - 18px); }
.breit .sheet-wrap { align-items: center; padding: 30px; }
.breit .sheet { max-width: 640px; border-radius: 26px; max-height: calc(100vh - 60px); transform: translateY(18px) scale(.98); opacity: 0; transition: transform .22s, opacity .22s; }
.breit .sheet-wrap.gross .sheet { height: auto; max-width: 720px; min-height: 420px; }
.breit .sheet-wrap.klein .sheet { max-width: 460px; }
.breit .sheet-wrap.mittel .sheet { max-width: 560px; }
.breit .sheet-wrap.weit .sheet { max-width: 980px; }
.breit .sheet-wrap.in .sheet { transform: none; opacity: 1; }
.breit .sheet-wrap.out .sheet { transform: translateY(18px) scale(.98); opacity: 0; }
.sh-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px 18px; position: relative; }
.sh-head .grab { position: absolute; top: 6px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line2); }
.breit .sh-head .grab { display: none; }
.sh-t { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 6px; }
.sh-t h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sh-sub { font-size: 13.5px; color: var(--ink2); font-weight: 500; margin-top: 1px; }
.sh-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); flex: none; }
.sh-ic .ic { width: 22px; height: 22px; }
.sh-ic.red { background: var(--red-tint); color: var(--red); }
.sh-ic .vessel { width: 22px; }
.sh-body { padding: 6px 18px 18px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.sh-body > * + * { margin-top: 12px; }
.sh-foot { display: flex; gap: 10px; padding: 12px 18px calc(14px + var(--safe-b)); box-shadow: inset 0 .5px 0 var(--line2); }
.sh-foot.leer { display: none; }
.sh-foot .btn { flex: 1; }
.sh-foot .btn.pri { flex: 1.6; }
.confirm-text { font-size: 15px; line-height: 1.45; color: var(--ink); }
.confirm-text p + p { margin-top: 8px; }
.searchbox { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 13px; background: var(--fill); margin-bottom: 10px; }
.searchbox input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; }
.searchbox .ic { width: 18px; height: 18px; color: var(--ink3); }
.picker .list { padding: 0; }
.picker .row { border-radius: 14px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 18px; background: var(--card2); text-align: center; }
.ptile:hover { background: var(--fill); }
.ptile.dis { opacity: .4; }
.tt-v { width: 34px; display: block; }
.tt-t b { display: block; font-size: 15px; font-weight: 700; }
.tt-t span { display: block; font-size: 12px; color: var(--ink2); font-weight: 600; margin-top: 1px; line-height: 1.2; }

/* Formular */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.fgrid > * { grid-column: 1 / -1; }
.fgrid > .half { grid-column: auto; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl { font-size: 13.5px; font-weight: 650; color: var(--ink2); }
.fu { color: var(--ink3); font-weight: 600; }
.req { color: var(--red); }
.fin { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: 14px; background: var(--fill); box-shadow: inset 0 0 0 1px transparent; }
.fin:focus-within { box-shadow: inset 0 0 0 2px var(--accent); background: var(--card-solid); }
.fin input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; font-weight: 600; height: 100%; }
.field.num .fin input { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fu2 { font-size: 14px; font-weight: 600; color: var(--ink3); }
.fnow { height: 32px; padding: 0 11px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); font-size: 13.5px; font-weight: 700; }
.flast { align-self: flex-start; height: 26px; padding: 0 9px; border-radius: 13px; background: var(--fill); color: var(--ink2); font-size: 12.5px; font-weight: 600; }
.flast:hover { color: var(--accent); }
textarea { width: 100%; border: 0; outline: 0; border-radius: 14px; background: var(--fill); padding: 12px 14px; font-size: 16px; resize: vertical; min-height: 80px; }
textarea:focus { box-shadow: inset 0 0 0 2px var(--accent); background: var(--card-solid); }
.fh { font-size: 12.5px; color: var(--ink3); font-weight: 500; }
.fe { font-size: 12.5px; color: var(--red-ink); font-weight: 600; }
.fw { font-size: 12.5px; color: var(--orange-ink); font-weight: 600; }
.has-err .fin, .has-err .fsel { box-shadow: inset 0 0 0 2px var(--red); }
.has-warn .fin { box-shadow: inset 0 0 0 2px var(--orange); }
.fsel { height: 52px; padding: 0 14px; border-radius: 14px; background: var(--fill); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 600; width: 100%; text-align: left; }
.fsel > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsel .ph { color: var(--ink3); font-weight: 500; }
.fsel .ic { width: 16px; height: 16px; color: var(--ink3); }
.fhead { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }
.fhead .ic { width: 16px; height: 16px; }
.fmore { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 650; font-size: 14.5px; padding: 6px 2px; }
.fmore .ic { width: 16px; height: 16px; stroke-width: 2.3; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fill); overflow-x: auto; }
.seg button { flex: 1; min-height: 40px; padding: 0 12px; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.seg button .ic { width: 17px; height: 17px; }
.seg button.on { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dark .seg button.on { background: rgba(255,255,255,.16); }
.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { flex: 1 1 auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tiles.tanks { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.tile2 { min-height: 64px; border-radius: 16px; padding: 12px; background: var(--fill); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; box-shadow: inset 0 0 0 1.5px transparent; }
.tile2 .ti2 { color: var(--accent); }
.tile2 b { font-size: 15px; font-weight: 700; }
.tile2 small { font-size: 12px; color: var(--ink2); font-weight: 500; }
.tile2.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-tint); }
.tiles.tanks .tile2 { align-items: center; text-align: center; }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .sw { width: 51px; height: 31px; border-radius: 16px; background: var(--line2); position: relative; flex: none; transition: background .15s; }
.switch .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .sw { background: var(--green); }
.switch input:checked + .sw::after { transform: translateX(20px); }
.swl { font-size: 15px; font-weight: 600; }
.swl small { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.flist .lrow { border-radius: 16px; background: var(--card2); padding: 10px 12px 12px; }
.flist .lrow + .lrow { margin-top: 10px; }
.lrow-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.lrow-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lrow-b > * { grid-column: 1 / -1; }
.lrow-b > .half { grid-column: auto; }
.addrow { margin-top: 10px; width: 100%; }
.warns { display: grid; gap: 8px; }

/* Beleg */
.beleg > * + * { margin-top: 14px; }
.bh { display: flex; gap: 14px; align-items: center; padding: 6px 2px; }
.bh-v { width: 36px; flex: none; }
.bh-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; flex: none; }
.bh-t { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.bh-s { font-size: 14px; color: var(--ink2); font-weight: 500; margin-top: 2px; }
.brows { border-radius: 18px; background: var(--card2); padding: 4px 14px; }
.br { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: .5px solid var(--line2); }
.br:last-child { border-bottom: 0; }
.br .bl { color: var(--ink2); font-size: 14.5px; font-weight: 500; }
.br .bv { font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.br.big .bv { font-size: 24px; letter-spacing: -.02em; }
.br .bv small { display: block; font-size: 12px; color: var(--ink3); font-weight: 600; margin-top: 2px; }
.br.warn .bv { color: var(--orange-ink); }
.who { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 13.5px; font-weight: 600; }
.who .ic { width: 17px; height: 17px; }
.lotprev { border-radius: 16px; background: var(--card2); padding: 10px 14px; }
.lotprev .lp { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.lotprev .lp + .lp { border-top: .5px solid var(--line2); }
.lotprev .lp b { font-weight: 650; }
.lotprev .lp small { display: block; color: var(--ink2); font-size: 12.5px; }

/* ------------------------------------------------------------------ Meldung unten */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(92px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 80; pointer-events: none; }
.breit #toasts { bottom: 26px; left: 256px; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 14px; border-radius: 18px; background: #1C2124; color: #fff; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); font-size: 14.5px; font-weight: 600; max-width: min(92vw, 520px); transform: translateY(12px); opacity: 0; transition: transform .2s, opacity .2s; }
.light .toast { background: #1C2124; }
.toast.in { transform: none; opacity: 1; }
.toast .ti .ic { width: 20px; height: 20px; color: #6EE7A0; }
.toast.err .ti .ic { color: #FF8A80; } .toast.info .ti .ic { color: #FFC060; }
.toast .tm { flex: 1; padding: 4px 0; }
.toast .tu { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.toast .tu .ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ Anmeldung (ohne Rahmen) */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 30px var(--gut); }
.gate-box { width: 100%; max-width: 420px; }
.gate-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.gate-logo h1 { font-size: 30px; }
.gate-logo p { color: var(--ink2); font-weight: 500; }
.gate .card { padding: 20px; }
.gate .card > * + * { margin-top: 12px; }
.gate-links { display: grid; gap: 4px; margin-top: 18px; text-align: center; }
.gate-links a, .gate-links button { color: var(--accent); font-weight: 650; padding: 8px; }

/* Druck */
.print-only { display: none; }
@media print {
  body { background: #fff !important; color: #000; }
  .side, .tabbar, .vhead .vh-r, .phead .ph-bar, .noprint, #toasts, #sheets { display: none !important; }
  .app.mit-seite { display: block; height: auto; }
  .app.mit-seite .view, .app.mit-leiste .view { height: auto; overflow: visible; padding: 0; max-width: none; }
  .card { box-shadow: none !important; background: #fff !important; border: .5pt solid #bbb; break-inside: avoid; }
  .print-only { display: block; }
}

/* Hilfsklassen */
.flex { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.hide { display: none !important; }
.nowrap { white-space: nowrap; }
.small { font-size: 13px; }
.center { text-align: center; }
.schmal .only-wide { display: none !important; }
.breit .only-narrow { display: none !important; }

/* ------------------------------------------------------------------ Heute */
.tile { border-radius: 24px; padding: 14px 15px 15px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; position: relative; overflow: hidden; gap: 10px; }
.tile .ib { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.tile .ib .ic { width: 20px; height: 20px; }
.tile h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.tile p { font-size: 13px; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile p.lbl { margin: 0 0 1px; font-weight: 600; }
.t-accent { background: linear-gradient(150deg, #1FB4DC 0%, #0E8CC8 55%, #0A6894 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px -14px rgba(22,167,210,.7); }
.t-accent .ib { background: rgba(255,255,255,.2); }
.t-accent p { color: rgba(255,255,255,.8); }
.t-accent::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); }
.t-glass { background: var(--card); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.light .t-glass { background: rgba(255,255,255,.88); }
.t-glass .ib { background: var(--accent-tint); color: var(--accent); }
.t-glass p { color: var(--ink2); }
.when { position: absolute; right: 12px; top: 14px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-tint); padding: 4px 9px; border-radius: 10px; }
.task { display: flex; align-items: center; gap: 12px; padding: 13px 13px 13px 12px; border-radius: 24px; }
.task + .task { margin-top: 10px; }
.task .tvm { width: 34px; flex: none; }
.task .mid { flex: 1; min-width: 0; }
.task h4 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 1px 0; }
.task .s { font-size: 13.5px; color: var(--ink2); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task .s.top { color: var(--accent); font-weight: 700; font-size: 12.5px; }
.amt { text-align: right; margin-right: 2px; }
.amt b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.amt b .unit { font-size: 13px; font-weight: 600; }
.amt > span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink2); font-weight: 600; white-space: nowrap; }
.go { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; box-shadow: 0 10px 20px -8px rgba(79,203,234,.8); }
.light .go { color: #fff; }
.go .ic { width: 22px; height: 22px; stroke-width: 2.3; }
.alarm { background: linear-gradient(180deg, var(--red-tint), rgba(229,53,42,.05)); box-shadow: inset 0 0 0 .5px rgba(229,53,42,.3); border-radius: 22px; padding: 15px 15px 14px; display: block; }
.dark .alarm { background: linear-gradient(180deg, rgba(255,77,66,.16), rgba(255,77,66,.07)); }
.al-top { display: flex; gap: 12px; align-items: flex-start; }
.al-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 8px 18px -6px rgba(229,53,42,.7); }
.al-ic .ic { width: 20px; height: 20px; stroke-width: 2.1; }
.alarm h4 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; }
.alarm .s { font-size: 13px; color: var(--ink2); margin-top: 3px; font-weight: 500; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.1fr; align-items: center; gap: 4px; margin: 13px 0 11px; padding: 10px 8px; border-radius: 14px; background: var(--card-solid); }
.dark .flow { background: rgba(0,0,0,.22); }
.flow .stt { text-align: center; }
.flow .stt b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.flow .stt span { font-size: 11px; color: var(--ink2); font-weight: 600; }
.flow > .ic { width: 14px; height: 14px; color: var(--ink3); stroke-width: 2.3; }
.flow .hot b { color: var(--red); }
.btn-red { width: 100%; height: 42px; border-radius: 13px; background: var(--red-tint); color: var(--red-ink); font-size: 14.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; }
.btn-red .ic { width: 18px; height: 18px; }
.hb { padding: 18px 16px 12px; display: flex; flex-direction: column; min-width: 0; }
.hb h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hb .alarm { margin-top: 12px; padding: 13px; }
.hb .alarm h4 { font-size: 14.5px; }
.hb .flow .stt b { font-size: 18px; }
.hb .rows { margin-top: 8px; }
.hb .row { padding: 8px 4px; min-height: 48px; border-radius: 12px; }
.hb .row + .row::before { left: 50px; }
.hb .row .ri { width: 32px; height: 32px; border-radius: 10px; }
.hb .row .ri .ic { width: 17px; height: 17px; }
.hb .row .mid b { font-size: 13.5px; }
.hb .row .s { font-size: 12px; }
.keller.xl { padding: 20px 24px 14px; }
.keller.xl::before { background: radial-gradient(55% 60% at 45% 55%, rgba(240,173,53,.10), transparent 70%); }
.kpi { padding: 15px 18px 14px; display: flex; flex-direction: column; min-height: 156px; }
.kpi:hover, .box a.plan:hover { filter: brightness(.985); }
.kfoot { margin-top: auto; padding-top: 10px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair div { padding: 8px 11px; border-radius: 12px; background: var(--fill); }
.pair b { display: block; font-size: 17px; letter-spacing: -.02em; }
.pair span { font-size: 11.5px; color: var(--ink2); font-weight: 600; }
.okline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--green); margin-top: 7px; }
.okline .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.gl { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--ink2); margin-top: 7px; }
.box { padding: 14px 18px 10px; min-width: 0; }
.box h2 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.box .list { padding: 0; }
.box .row { padding: 7px 2px; min-height: 48px; }
a.plan, .plan { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: var(--fill); }
.date { width: 50px; height: 54px; border-radius: 13px; background: var(--card-solid); box-shadow: var(--shadow); display: grid; place-content: center; text-align: center; flex: none; }
.date span { font-size: 10.5px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .03em; }
.date b { font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan .mid { flex: 1; min-width: 0; }
.plan h4 { font-size: 15px; font-weight: 700; }
.plan .s { font-size: 12.5px; color: var(--ink2); font-weight: 500; margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.plan .s .ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; stroke-width: 2.4; }
.plan .s span { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.plan .chev { width: 16px; height: 16px; color: var(--ink3); }
button.ghost:not(.btn) { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 0 12px; height: 40px; width: 100%; border-radius: 13px; box-shadow: inset 0 0 0 1.2px var(--line2); color: var(--ink2); font-size: 13.5px; font-weight: 600; }
button.ghost:not(.btn) .ic { width: 17px; height: 17px; color: var(--accent); stroke-width: 2.2; }
button.ghost:not(.btn) em { margin-left: auto; font-style: normal; color: var(--ink3); font-size: 12.5px; }
.hint { padding: 14px 16px; }
.hint + .hint { margin-top: 10px; }
.hint-h { display: flex; gap: 12px; align-items: center; }
.hint-h b { font-size: 16px; display: block; }
.hint-h .s { font-size: 13px; color: var(--ink2); display: block; }
.hint-t { font-size: 14px; color: var(--ink2); margin: 10px 0; line-height: 1.4; }
.hint .list { margin: 6px -14px 10px; }
.beerdot { display: inline-block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 2px 3px rgba(255,255,255,.35); vertical-align: middle; flex: none; }
.ri.v { display: grid; place-items: center; }

/* Tank */
.tankhero { display: flex; gap: 22px; padding: 20px; align-items: center; }
.th-v { width: 96px; flex: none; }
.breit .th-v { width: 120px; }
.th-i { flex: 1; min-width: 0; }
.th-beer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 18px; }
.th-beer b { font-weight: 700; letter-spacing: -.015em; }
.th-big { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.th-big .muted { font-size: 14px; font-weight: 500; }
.th-og { font-size: 13.5px; color: var(--ink2); font-weight: 600; margin-top: 8px; }
.note.todo { align-items: center; }
.note.todo .btn { flex: none; }
.knums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.kn { display: flex; flex-direction: column; gap: 3px; }
.kn .kl { font-size: 13px; font-weight: 600; color: var(--ink2); }
.kn .kt { font-size: 12px; font-weight: 500; color: var(--ink3); }
.col { display: flex; flex-direction: column; min-width: 0; }
.col.gap > * + * { margin-top: 14px; }
.col.gap > .sec { margin-top: 22px; }
.col.gap > .sec:first-child { margin-top: 0; }
.spk .spark { flex: none; }
.keller .cap { display: inline-flex; }
.keller .cap .capchev { width: 14px; height: 14px; color: var(--ink3); stroke-width: 2.4; margin-left: -2px; }

/* Erfassen-Menü, Suche, Scannen */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.breit .menu-grid { grid-template-columns: 1fr 1fr 1fr; }
.mtile { display: flex; flex-direction: column; gap: 10px; padding: 14px 13px; min-height: 108px; border-radius: 20px; background: var(--card2); text-align: left; }
.mtile:hover { background: var(--fill); }
.mtile .ai { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.mtile .ai .ic { width: 20px; height: 20px; }
.mtile b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.mtile small { display: block; font-size: 12px; color: var(--ink2); font-weight: 500; margin-top: 2px; line-height: 1.3; }
.mtile:first-child { background: linear-gradient(150deg, #1FB4DC, #0A79B3); color: #fff; }
.mtile:first-child .ai { background: rgba(255,255,255,.2); color: #fff; }
.mtile:first-child small { color: rgba(255,255,255,.8); }
.sres .list { padding: 0; }
.srow { display: flex; align-items: center; gap: 8px; }
.srow > .row { flex: 1; min-width: 0; border-radius: 14px; }
.srow .btn { flex: none; }
.camwrap { position: relative; border-radius: 20px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.camwrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camframe { position: absolute; inset: 18% 22%; border-radius: 18px; box-shadow: 0 0 0 2000px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.9); }
.sh-ic .vessel { width: auto; height: 34px; }
.bh-v { width: auto; flex: none; }
.bh-v .vessel { width: auto; height: 76px; }

/* ================================================================== Ergänzungen: Lager, Rückverfolgung, Mehr, Stammdaten, Konto, Anleitung, Brautag-Teile */
.hide { display: none !important; }
.mt4 { margin-top: 4px; }
.h2 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; display: block; }
.h3 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.btn.xs { height: 30px; font-size: 13px; padding: 0 9px; border-radius: 10px; gap: 5px; box-shadow: none; }
.btn.xs .ic { width: 15px; height: 15px; }
.btn.xs.ghost { background: var(--fill); }
.ri.big { width: 48px; height: 48px; border-radius: 15px; } .ri.big .ic { width: 24px; height: 24px; }
.ri.sm { width: 28px; height: 28px; border-radius: 9px; } .ri.sm .ic { width: 15px; height: 15px; }
.row.faded, tr.faded, tr.inactive { opacity: .55; }
.card.pad.warn .bignum, .kpi2.warn .bignum { color: var(--orange); }
.card.pad.bad .bignum, .kpi2.bad .bignum { color: var(--red); }
a.card.pad:hover, a.kpi2:hover { filter: brightness(.985); }

/* Filterzeile, Unternavigation */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select { height: 40px; border-radius: 12px; border: 0; padding: 0 30px 0 12px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; box-shadow: var(--shadow); font-size: 14.5px; font-weight: 600; -webkit-appearance: none; appearance: none; max-width: 100%; }
.filters .searchbox { margin: 0; flex: 1 1 220px; }
.filters .chip { height: 36px; border-radius: 18px; padding: 0 13px; font-size: 13.5px; background: var(--card); box-shadow: var(--shadow); }
.filters .chip.acc { background: var(--accent-tint); box-shadow: none; }
.searchbox.sm { height: 40px; margin-bottom: 0; }
.searchbox.sm input { font-size: 15px; }
.lagerflt .seg { flex: 1 1 100%; }
.seg a { flex: 1; min-height: 40px; padding: 0 12px; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.seg a.on { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg small { font-size: 12px; color: var(--ink3); font-weight: 700; }
.seg.tabs { overflow-x: auto; scrollbar-width: none; }
.seg.tabs button { flex: 1 0 auto; }
.subnav { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: -2px -2px 0; }
.subnav::-webkit-scrollbar, .seg.tabs::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 19px; background: var(--card); box-shadow: var(--shadow); font-size: 14px; font-weight: 650; color: var(--ink2); }
.subnav a .ic { width: 17px; height: 17px; }
.subnav a.on { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 18px -10px rgba(10,121,179,.9); }
.subnav em { font-style: normal; font-size: 11.5px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 10px; display: inline-grid; place-items: center; padding: 0 5px; background: var(--orange); color: #fff; }

/* Lager: Bestand, Gebinde als Bild, Mindestbestand */
.stocktbl tr.grp td { background: var(--card2); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); padding: 8px 12px; }
.stocktbl tr.grp td .ic { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.packs { display: inline-flex; align-items: flex-end; gap: 2px; flex-wrap: wrap; vertical-align: middle; }
svg.pk { width: 11px; height: 14px; }
svg.pk path { fill: var(--gold); }
svg.pk.open path { fill-opacity: .3; stroke: var(--gold); stroke-width: 1.3; }
.packs em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink2); margin-left: 3px; }
.packline { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.packline small { font-size: 12px; color: var(--ink3); font-weight: 600; }
.stockrow .r b { display: block; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.stockrow .mid b { white-space: normal; }
.minbar { display: block; width: 100%; max-width: 150px; height: 6px; border-radius: 3px; background: var(--fill); position: relative; overflow: visible; }
.minbar i { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.minbar.low i { background: var(--orange); }
.minbar::after { content: ""; position: absolute; left: 50%; top: -3px; width: 2px; height: 12px; border-radius: 1px; background: var(--ink3); }
.sparkwide svg { width: 100%; height: auto; display: block; }
.knums.k3 { grid-template-columns: repeat(3, 1fr); }
.breit .knums.k4 { grid-template-columns: repeat(4, 1fr); }
.acts.two { grid-template-columns: 1fr 1fr; }
.act .ai.red, .act.red .ai { background: var(--red-tint); color: var(--red); }
.lotbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--green-tint); }
.lotbar i { display: block; height: 100%; }
.lotbar i.used { background: var(--accent); } .lotbar i.booked { background: var(--orange); }
.legend2 i.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.used { background: var(--accent); } .dot.booked { background: var(--orange); } .dot.rest { background: var(--green); } .dot.out { background: rgba(232,131,0,.6); }
.lothero.bad { box-shadow: inset 0 0 0 1.5px var(--red-tint), var(--shadow); }
.chk { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-weight: 550; }
.chk .ic { width: 20px; height: 20px; stroke-width: 2.4; }
.chk.ok .ic { color: var(--green); }
.chk.bad { color: var(--red-ink); } .chk.bad .ic { color: var(--red); }
.issues { display: grid; gap: 14px; }
.issue.erledigt { opacity: .9; }
.issue p { line-height: 1.45; }
.lotlines { display: grid; gap: 6px; }
.lotline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 13px; background: var(--fill); font-size: 14px; }
.lotline .mid { flex: 1; min-width: 0; }
.lotline .s { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 1px; }
.yearnav { display: flex; align-items: center; gap: 14px; }
.yearnav b { font-size: 20px; letter-spacing: -.02em; }
.yeastcard .gen { text-align: center; line-height: 1; }
.yeastcard .gen b { display: block; font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -.04em; }
.yeastcard .gen small { font-size: 11px; font-weight: 700; color: var(--ink3); text-transform: uppercase; }
.yeastcard.gone, .yeastcard.used { opacity: .62; }
.wehero .h3 { display: block; }

/* Silo als Bild */
.silo-top { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.silo-svg { width: 112px; height: auto; display: block; }
.silo-wall { fill: none; stroke: var(--ink3); stroke-width: 1.7; stroke-linejoin: round; }
.silo-roof { fill: var(--fill); stroke: var(--ink3); stroke-width: 1.7; }
.silo-leg { stroke: var(--ink3); stroke-width: 3; stroke-linecap: round; }
.silocard .layers { border-top: .5px solid var(--line2); padding-top: 4px; }
.silocard.inactive { opacity: .6; }
.expl summary, .forgot summary, .tlist summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: 8px; list-style: none; }
.expl summary::-webkit-details-marker, .forgot summary::-webkit-details-marker, .tlist summary::-webkit-details-marker { display: none; }
.expl summary .ic { color: var(--accent); }
.expl p, .expl ol { margin-top: 10px; line-height: 1.5; }
.expl ol { padding-left: 20px; }

/* Mehr, Verlauf, Eintrag, Datenprüfung */
.mehrme, .mehrme2 { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.mehrme .mid { flex: 1; min-width: 0; }
.mehrme .mid b { display: block; font-size: 18px; }
.mehrme .mid .s { display: block; font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.mehrme > .chev { width: 16px; height: 16px; color: var(--ink3); }
.av.big { width: 54px; height: 54px; font-size: 19px; }
.pruef { display: flex; align-items: center; gap: 14px; }
.pruef .pr-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.pruef .pr-ic .ic { width: 26px; height: 26px; }
.pruef.ok .pr-ic { background: var(--green-tint); color: var(--green); }
.pruef.bad .pr-ic { background: var(--red-tint); color: var(--red); }
.pruef b { font-size: 18px; display: block; }
.pruef .s { font-size: 13px; color: var(--ink2); }
.vers .ver { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: .5px solid var(--line2); }
.vers .ver:last-child { border-bottom: 0; }
.vers .ver .mid { flex: 1; min-width: 0; }
.vers .ver .s { display: block; font-size: 13px; color: var(--ink2); }
.vdot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--ink3); }
.vdot.neu { background: var(--green); } .vdot.geaendert { background: var(--orange); } .vdot.geloescht { background: var(--red); } .vdot.wiederhergestellt { background: var(--blue); }
.brow2 { padding: 8px 0; border-bottom: .5px solid var(--line2); }
.brow2:last-child { border-bottom: 0; }

/* Rückverfolgung */
.tstart-t b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.02em; margin-top: 4px; }
.tstart-t span { display: block; color: var(--ink2); font-weight: 500; margin-top: 2px; }
.tsum { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-weight: 600; }
.tsum small { color: var(--ink2); font-weight: 500; }
.tsum-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); flex: none; }
.tsum-ic .ic { width: 16px; height: 16px; }
.tstages { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 14px 16px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); }
.tstages > div { text-align: center; flex: 1; }
.tstages b { display: block; font-size: 26px; font-weight: 750; letter-spacing: -.03em; }
.tstages span { font-size: 11.5px; font-weight: 650; color: var(--ink2); }
.tstages > .ic { width: 15px; height: 15px; color: var(--ink3); }
.tflow { display: grid; gap: 14px; }
.breit .tflow { grid-template-columns: repeat(4, 1fr); align-items: start; }
.tcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tcol-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); padding: 0 4px; }
.tcol-h .ic { width: 16px; height: 16px; }
.tcol-h em { font-style: normal; margin-left: auto; font-size: 12px; color: var(--accent); background: var(--accent-tint); border-radius: 10px; padding: 1px 7px; }
.tnode { display: block; padding: 11px 13px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); font-size: 13px; color: var(--ink2); }
.tnode:hover { filter: brightness(.985); }
.tnode b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.tnode b small { font-size: 11.5px; color: var(--ink3); font-weight: 650; }
.tnode span { display: block; margin-top: 2px; line-height: 1.35; }
.tnode.start { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.tnode.bad { background: var(--red-tint); }
.tmore { font-size: 12.5px; color: var(--ink3); font-weight: 600; padding: 4px 6px; }
.tlist summary { padding: 14px 16px; justify-content: space-between; }
.tlist .list { border-top: .5px solid var(--line2); }
tr.sum td { font-weight: 750; background: var(--card2); }
.row-link { display: block; padding: 0; }
.mini { display: block; padding: 8px 0; border-bottom: .5px solid var(--line2); font-size: 14px; }
.mini:last-child { border-bottom: 0; }
.mini span { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 1px; }
.drillnote .h3 { display: block; margin: 4px 0 2px; }
.printhead { margin-bottom: 14px; }
.printhead h1 { font-size: 24px; }

/* Stammdaten, Einstellungen, Aufkleber */
.beerprev { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--fill); }
.beerprev b { display: block; font-size: 16px; }
.beerprev small { color: var(--ink2); font-weight: 600; }
.glass { width: 40px; height: 58px; flex: none; color: var(--ink); }
.tiles.tankkinds .tile2 { align-items: center; text-align: center; }
.tk-v { display: block; height: 58px; margin: 0 auto 4px; }
.tk-v .vessel { height: 58px; width: auto; }
.cf-sec .daylabel { margin-top: 16px; }
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sticker { background: #fff; color: #111; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow); text-align: center; }
.sticker .qr svg { width: 168px; height: 168px; display: block; }
.sticker .st-t b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: #111; }
.sticker .st-t span { display: block; font-size: 14px; font-weight: 600; color: #444; }
.sticker .st-t small { display: block; font-size: 11.5px; color: #888; margin-top: 4px; }

/* Konto, Team, Abo */
.codebox { text-align: center; }
.qrbig { display: inline-block; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.qrbig svg { width: 200px; height: 200px; display: block; }
.bigcode { font-size: 34px; font-weight: 800; letter-spacing: .08em; margin: 14px 0 6px; }
.row.member { flex-wrap: wrap; row-gap: 8px; }
.member .av { width: 36px; height: 36px; }
.mbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.schmal .member .mbtns { width: 100%; padding-left: 48px; }
.member .seg { padding: 3px; }
.member .seg button { min-height: 32px; font-size: 13px; padding: 0 10px; }
.abohero { display: block; }
.abohero .flex { gap: 16px; align-items: center; }
.abohero.ok { box-shadow: inset 0 0 0 1.5px var(--green-tint), var(--shadow); }
.abohero.bad { box-shadow: inset 0 0 0 1.5px var(--red-tint), var(--shadow); }
.aboring { position: relative; width: 64px; height: 64px; color: var(--accent); flex: none; }
.aboring svg { width: 64px; height: 64px; }
.aboring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--ink); }
.checks { list-style: none; display: grid; gap: 7px; }
.checks li { display: flex; align-items: center; gap: 9px; font-weight: 550; }
.checks .ic { color: var(--green); width: 18px; height: 18px; stroke-width: 2.6; }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product { border-radius: 18px; padding: 14px; background: var(--card-solid); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; position: relative; }
.product b { font-size: 15px; }
.product .price { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; }
.product small { color: var(--ink2); font-weight: 600; }
.product em { font-style: normal; position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 750; color: var(--accent); background: var(--accent-tint); padding: 3px 8px; border-radius: 10px; }
.product.best { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.danger-card { box-shadow: inset 0 0 0 1.5px var(--red-tint), var(--shadow); }
.danger-list .row .mid b { color: var(--red-ink); }
.gate .card h2 { font-size: 22px; letter-spacing: -.02em; }
.gate .field { margin-top: 12px; }
.gate .fin input { width: 100%; }
.gate form.known .newacc { display: none; }
.forgot { margin-top: 14px; }
.forgot summary { color: var(--accent); justify-content: center; }
.forgot p { margin-top: 8px; color: var(--ink2); }
.forgot .btn { margin-top: 10px; }
.center { text-align: center; }
.legal h3 { font-size: 16px; margin-top: 18px; }
.legal h3:first-child { margin-top: 0; }
.legal p { margin-top: 6px; line-height: 1.55; color: var(--ink2); }

/* Anleitung */
.toc { display: grid; gap: 2px; }
.breit .toc { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.toc a { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; font-weight: 600; }
.toc a:hover { background: var(--fill); }
.toc a b { width: 24px; color: var(--accent); }
.kapitel h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: -.02em; }
.kapitel h2 .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 15px; flex: none; }
.kapitel p { margin-top: 10px; line-height: 1.55; }
.kapitel ul { margin-top: 10px; padding-left: 20px; line-height: 1.6; }
.kapitel .tbl { margin-top: 10px; }
.checklist { list-style: none; padding: 0 !important; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.checklist .ic { width: 18px; height: 18px; }
.checklist .ok .ic { color: var(--green); } .checklist .bad .ic { color: var(--red); }

/* Brautag-Ablauf: Erinnerung, Schritte, Hopfen */
.timer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
.tm-w { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; }
.tm-i { font-size: 13px; color: var(--ink2); font-weight: 550; margin-top: 2px; }
.tm-r { text-align: right; }
.tm-c { font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
.timer.bald { background: var(--orange-tint); }
.timer.jetzt { background: var(--red-tint); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--red-tint), var(--shadow); } }
.steps { padding: 4px 0; }
.bstep { display: flex; align-items: center; gap: 12px; padding: 10px 14px; position: relative; }
.bstep + .bstep::before { content: ""; position: absolute; left: 60px; right: 0; top: 0; height: .5px; background: var(--line2); }
.bstep.cur { background: var(--accent-tint); }
.bs-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--fill); color: var(--ink2); }
.bs-dot i { font-style: normal; font-size: 13px; font-weight: 750; }
.bs-dot .ic { width: 17px; height: 17px; stroke-width: 2.4; }
.bstep.done .bs-dot { background: var(--green); color: #fff; }
.bstep.planned .bs-dot, .bstep.booked .bs-dot { background: var(--orange-tint); color: var(--orange); }
.bstep.cur .bs-dot { background: var(--accent); color: var(--on-accent); }
.bstep.skip { opacity: .55; }
.bs-main { flex: 1; min-width: 0; text-align: left; padding: 2px 0; }
.bs-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15.5px; font-weight: 650; }
.bs-s { display: block; font-size: 13px; color: var(--ink2); margin-top: 1px; }
.hopb { padding: 11px 13px; border-radius: 14px; background: var(--fill); margin-top: 8px; }
.hopb .small { margin-top: 2px; }

/* Sude: Kalender, Plan, Mengenbilanz, Blatt */
.cal { padding: 14px; }
.calh, .calg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calh > * { font-size: 11px; font-weight: 750; text-transform: uppercase; color: var(--ink3); text-align: center; padding-bottom: 4px; }
.cd { min-height: 62px; border-radius: 11px; background: var(--fill); padding: 4px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cd.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cd.past { opacity: .5; }
.cdn { font-size: 12px; font-weight: 750; color: var(--ink2); padding-left: 2px; }
.cb { display: block; font-size: 11px; font-weight: 750; color: #fff; background: var(--beer, var(--accent)); border-radius: 6px; padding: 2px 5px; text-shadow: 0 1px 2px rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan2 { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.plan2 .date { width: 46px; text-align: center; flex: none; }
.plan2 .date span { display: block; font-size: 11px; font-weight: 750; text-transform: uppercase; color: var(--accent); }
.plan2 .date b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.balbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--fill); gap: 2px; }
.balbar i { display: block; height: 100%; }
.balbar .pk, .bal i.pk { background: var(--accent); }
.balbar .ls, .bal i.ls { background: var(--orange); }
.balbar .rs, .bal i.rs { background: var(--green); }
.balbar .rs.sw, .bal i.rs.sw { background: var(--ink3); }
.bal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; }
.bal > div { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.bal i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line2); }
.bal span { color: var(--ink2); font-weight: 550; }
.bal b { margin-left: auto; }
.segs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.segs > .ic { width: 14px; height: 14px; color: var(--ink3); }
.stepc { display: block; padding: 16px 18px; }
.ychain { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ychain b { display: block; }
.ychain small { display: block; font-size: 12.5px; color: var(--ink2); }
.ylink { padding-left: 10px; color: var(--ink3); }
.ylink .ic { width: 16px; height: 16px; }
.blatt .bsec + .bsec { margin-top: 16px; }
.bsec-h { font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.zrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: .5px solid var(--line2); font-size: 14px; }
.zrow:last-child { border-bottom: 0; }
/* Runde 2: Zutaten-Spalte – Name über der Beschreibung, Menge rechts ohne Umbruch (Prozent darunter) */
.zrow > span:first-child { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.zrow > span:first-child b { display: block; overflow: hidden; text-overflow: ellipsis; }
.zrow > span:first-child small { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.35; }
.zrow > .r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; }
.zrow > .r small { font-size: 12px; font-weight: 500; color: var(--ink2); }
.col:not(.gap) { gap: 14px; }
.col:not(.gap) > .sec { margin-top: 12px; margin-bottom: -4px; }

@media print {
  .stickers { grid-template-columns: repeat(3, 1fr); gap: 8mm; }
  .sticker { box-shadow: none; border: .5pt dashed #999; break-inside: avoid; }
  .tnode, .tstages { box-shadow: none; border: .5pt solid #ccc; }
  .toc, .backlink { display: none !important; }
  body:has(.printhead) .vhead, body:has(.printhead) .phead { display: none !important; }
  .kapitel { break-inside: avoid; }
}

/* Feinschliff nach den ersten Fotos */
:where(a.card) { display: block; }
.schmal .cb { font-size: 9.5px; padding: 1px 3px; letter-spacing: -.02em; }
.plan2 .mid { flex: 1; min-width: 0; }
.plan2 .mid b, .plan2 .mid .s { display: block; }
.plan2 .mid .s { font-size: 13px; color: var(--ink2); margin-top: 2px; font-weight: 500; }
.plan2 .mid .s.ok-t { color: var(--green); } .plan2 .mid .s.warn-t { color: var(--orange); }
.plan2 .s .ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.plan2 > .chev { width: 15px; height: 15px; color: var(--ink3); }
.schmal .seg.tabs { flex-wrap: wrap; overflow: visible; }
.schmal .seg.tabs button { flex: 1 1 auto; min-height: 36px; font-size: 13.5px; padding: 0 10px; }
.bal b { white-space: nowrap; }
.schmal .bal { grid-template-columns: 1fr; }
.wrapb .row .mid b { white-space: normal; }
.product em { position: static; align-self: flex-start; order: -1; margin-bottom: 6px; }
.schmal .katseg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.schmal .katseg::-webkit-scrollbar { display: none; }
.schmal .katseg button { flex: none; }
.srow { display: flex; align-items: center; gap: 6px; }
.srow > .row { flex: 1; min-width: 0; }
.tbl td .btn.xs { vertical-align: middle; }
.tbl td .btn.xs + .btn.xs { margin-left: 6px; }
td.nowrap, .tbl td.nowrap { white-space: nowrap; }

/* ================================================================== Rezepte: Liste, Rezeptblatt, Bearbeiten, Druck (A4) */
.rz-search { margin-bottom: 0; }
.rz-list .row { align-items: flex-start; }
.rz-list .row .ri { margin-top: 2px; }
.rz-list .row > .chev { align-self: center; }
.rz-row .mid b { white-space: normal; }
.rz-row .s.rz-kurz { display: flex; flex-wrap: wrap; gap: 1px 10px; white-space: nowrap; color: var(--ink2); font-weight: 650; font-size: 13px; margin-top: 4px; }
.rz-row .s.rz-fd { color: var(--ink3); font-size: 12.5px; margin-top: 2px; }
.rz-tbl .rz-nm { display: inline-flex; align-items: center; gap: 9px; }
.rz-nodot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line2); flex: none; }
.rz-tbl td { white-space: nowrap; }
.rz-tbl td.b { white-space: normal; }
.rz-none { text-align: center; }
/* Kopf des Rezepts */
.vsub .rz-menge { display: block; font-size: 19px; font-weight: 650; color: var(--ink); letter-spacing: -.015em; margin-top: 2px; }
.vsub .rz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.vsub .rz-kopf b { font-weight: 650; color: var(--ink); }
.vsub .rz-kopf .chip { height: 27px; }
.vsub .rz-kopf .chip .beerdot { margin-right: 1px; }
.vsub .rz-fass { display: block; font-size: 13px; color: var(--ink3); margin-top: 6px; line-height: 1.4; }
a.rz-bier:hover { filter: brightness(.96); }
/* Rezeptblatt */
.rz-grid { align-items: start; }
.breit .rz-grid { grid-template-columns: 1.25fr 1fr; }
.rz-kz { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.schmal .rz-kz { grid-template-columns: 1fr 1fr; }
.rz-kz .kl .beerdot { vertical-align: -1px; }
.rz-card .cap-r { color: var(--ink); }
.rz-total { display: inline-flex; align-items: baseline; gap: 8px; }
.rz-total .kl { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.rz-davon { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); margin: 12px 0 0; }
.rz-malt { display: grid; grid-template-columns: 78px minmax(0, 1fr) 96px 54px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: .5px solid var(--line2); font-size: 14.5px; }
.rz-malt:last-child { border-bottom: 0; padding-bottom: 2px; }
.rz-malt b { text-align: right; font-weight: 650; white-space: nowrap; }
.rz-malt .nm { font-weight: 550; overflow-wrap: anywhere; }
.rz-malt .pc { text-align: right; font-weight: 650; color: var(--ink2); white-space: nowrap; }
.rz-bar { display: block; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.rz-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #8ADBF0, #16A7D2); }
.schmal .rz-malt { grid-template-columns: 74px minmax(0, 1fr) 50px; grid-template-areas: "kg nm pc" ". br br"; row-gap: 6px; }
.schmal .rz-malt b { grid-area: kg; } .schmal .rz-malt .nm { grid-area: nm; } .schmal .rz-malt .pc { grid-area: pc; } .schmal .rz-malt .rz-bar { grid-area: br; height: 4px; }
.rz-grp .bsec-h { margin: 14px 0 0; }
.rz-add { display: grid; grid-template-columns: 54px 86px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: .5px solid var(--line2); font-size: 14.5px; }
.rz-grp .rz-add:last-child { border-bottom: 0; }
.rz-add .tm { color: var(--ink2); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.rz-add .am { text-align: right; white-space: nowrap; font-weight: 650; }
.rz-add .nm { font-weight: 550; overflow-wrap: anywhere; }
.rz-add .nm small { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 500; margin-top: 2px; }
.rz-add .ib { text-align: right; font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.schmal .rz-add { grid-template-columns: 50px 72px minmax(0, 1fr); grid-template-areas: "tm am nm" ". . ib"; row-gap: 2px; }
.schmal .rz-add .tm { grid-area: tm; } .schmal .rz-add .am { grid-area: am; } .schmal .rz-add .nm { grid-area: nm; } .schmal .rz-add .ib { grid-area: ib; text-align: left; font-size: 12.5px; }
.schmal .rz-add .ib:empty { display: none; }
.rz-calc { color: var(--ink3); font-weight: 500; }
.rz-gt { margin-top: 10px; }
.rz-gt th, .rz-gt td { padding: 9px 8px; }
.rz-gt th:first-child, .rz-gt td:first-child { padding-left: 2px; }
.rz-gt th:last-child, .rz-gt td:last-child { padding-right: 2px; }
.rz-gt td:first-child { font-weight: 600; color: var(--ink2); }
.rz-gt td.r { font-weight: 650; font-size: 15px; }
.rz-note { margin-top: 12px; }
.rz-note p { white-space: pre-wrap; line-height: 1.5; font-size: 14.5px; margin-top: 4px; }
.rz-alt .ic, .note.bad .ic { flex: none; }
.rz-topbtns { margin-top: 10px !important; }
.schmal .rz-topbtns .btn { flex: 1 1 100%; }
/* Fassungen */
.rz-vers .row { align-items: flex-start; }
.rz-vers .row > .chev { align-self: center; }
.rz-vers .row .mid b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; }
.rz-vers .row .mid b .chip { height: 22px; font-size: 12px; }
.rz-vers .s.cn { white-space: normal; color: var(--ink); font-weight: 500; margin-top: 4px; line-height: 1.35; }
.rz-vers .s.cn.faint { color: var(--ink3); }
.rz-vers .row.on { background: var(--orange-tint); }
.rz-vers .row:only-child { border-radius: var(--r-xl); }
.page > .rz-acts { margin-top: 22px; }
.ri.rz-no { font-size: 15px; font-weight: 750; }
/* Einstieg „Rezept“ (Sud-Seite, Brautag) */
.rz-zeile .row .s { white-space: normal; }
/* Papierkorb */
.rz-binrow { flex-wrap: wrap; row-gap: 8px; }
.rz-binmain { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; }
.rz-binbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.schmal .rz-binbtns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.schmal .rz-binbtns .btn { height: auto; min-height: 38px; padding: 6px 8px; gap: 5px; font-size: 13.5px; white-space: normal; text-align: center; line-height: 1.15; }
.schmal .rz-binbtns .btn .ic { width: 16px; height: 16px; }
.rz-bin .row + .row::before { left: 61px; }
/* Bearbeiten */
.breit .sheet-wrap.rz-form .sheet { max-width: 1120px; }
.rz-ed { display: grid; gap: 8px; }
.rz-ed .fin.sm { height: 44px; padding: 0 10px; border-radius: 12px; gap: 6px; min-width: 0; }
.rz-ed .fin.sm input { font-size: 16px; font-weight: 600; min-width: 0; }
.rz-ed .fin.sm .fu2 { font-size: 13px; white-space: nowrap; }
.rz-ed .fin.rz-err { box-shadow: inset 0 0 0 2px var(--red); }
.rz-sel { height: 44px; width: 100%; min-width: 0; border: 0; border-radius: 12px; padding: 0 26px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); -webkit-appearance: none; appearance: none;
  background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; text-overflow: ellipsis; }
.rz-sel:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.dark .rz-sel option { background: #13181B; }
.rz-ed-h { display: none; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; padding: 0 2px; }
.rz-ed-h .r { text-align: right; }
.rz-ed-r { display: grid; gap: 6px; align-items: center; }
.rz-ed-b { display: flex; gap: 4px; justify-content: flex-end; }
.rz-ed-b .round.xs:disabled { opacity: .28; }
.rz-lab { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink2); }
.rz-lab b { color: var(--ink3); }
.rz-m { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "lb b" "kg nm"; padding: 8px 10px 10px; border-radius: 16px; background: var(--card2); }
.rz-m .rz-lab { grid-area: lb; } .rz-m .rz-kg { grid-area: kg; } .rz-m .rz-nm { grid-area: nm; } .rz-m .rz-ed-b { grid-area: b; }
.breit .rz-ed-h.rz-m { display: grid; grid-template-columns: 130px minmax(0, 1fr) 70px 104px; }
.breit .rz-ed-r.rz-m { grid-template-columns: 130px minmax(0, 1fr) 70px 104px; grid-template-areas: "kg nm lb b"; padding: 0; background: none; border-radius: 0; }
.breit .rz-m .rz-lab { justify-content: flex-end; font-size: 14px; }
.breit .rz-m .rz-lab b { display: none; }
.rz-z { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "st st b" "am un mi" "nm nm nm" "al ib nt"; padding: 8px 10px 10px; border-radius: 16px; background: var(--card2); }
.rz-z .rz-st { grid-area: st; } .rz-z .rz-mi { grid-area: mi; } .rz-z .rz-am { grid-area: am; } .rz-z .rz-un { grid-area: un; } .rz-z .rz-nm { grid-area: nm; }
.rz-z .rz-al { grid-area: al; } .rz-z .rz-ib { grid-area: ib; } .rz-z .rz-nt { grid-area: nt; } .rz-z .rz-ed-b { grid-area: b; }
@media (min-width: 1240px) {
  .breit .rz-ed-h.rz-z { display: grid; }
  .breit .rz-z { grid-template-columns: 172px 84px 88px 64px minmax(140px, 1fr) 92px 92px 140px 104px; grid-template-areas: "st mi am un nm al ib nt b"; padding: 0; background: none; border-radius: 0; }
}
.rz-ed-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 4px 0; font-size: 14px; font-weight: 600; color: var(--ink2); }
.rz-ed-sum b { font-size: 19px; color: var(--ink); letter-spacing: -.02em; }
.breit .rz-ed-sum { padding-right: 112px; }
.rz-ed .addrow { margin-top: 2px; }
.rz-gte { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); gap: 6px 8px; align-items: center; }
.rz-gte .h { font-size: 11.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; padding-left: 2px; }
.rz-gte .l { font-size: 14px; font-weight: 650; color: var(--ink2); }
.schmal .rz-gte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schmal .rz-gte .e0 { display: none; }
.schmal .rz-gte .l { grid-column: 1 / -1; margin-top: 6px; }
/* Druck: sauberes A4-Blatt, schwarz auf weiß – auch wenn die App gerade dunkel ist */
.rz-print { display: none; }
@page rezept { size: A4; margin: 13mm 15mm 12mm; }
@media print {
  html:has(.rz-print), body:has(.rz-print) { background: #fff !important; }
  body:has(.rz-print), body:has(.rz-print) .app { min-height: 0 !important; }
  body:has(.rz-print) .vhead, body:has(.rz-print) .phead, body:has(.rz-print) #view > :not(.page), body:has(.rz-print) .page > :not(.rz-print) { display: none !important; }
  .page > .rz-print { display: block; margin: 0; }
  .rz-print { page: rezept; color: #000; font: 9.6pt/1.32 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rz-print b { font-weight: 700; }
  .rp-top { display: flex; justify-content: space-between; gap: 10mm; font-size: 8.5pt; color: #444; padding-bottom: 2mm; border-bottom: .8pt solid #000; }
  .rp-h1 { font-size: 19pt; font-weight: 750; letter-spacing: -.01em; line-height: 1.15; margin-top: 3.5mm; color: #000; }
  .rp-menge { font-size: 12.5pt; font-weight: 650; margin-top: .8mm; }
  .rp-meta { font-size: 9.2pt; color: #222; margin-top: 1.2mm; }
  .rp-fass { color: #555; font-size: 8.5pt; }
  .rp-kz { width: 100%; border-collapse: collapse; margin-top: 3.5mm; table-layout: fixed; break-inside: avoid; }
  .rp-kz td { border: .6pt solid #000; padding: 1.4mm 2.2mm; vertical-align: top; }
  .rp-kz b { display: block; font-size: 12pt; white-space: nowrap; }
  .rp-kz span { display: block; font-size: 7.8pt; color: #444; margin-top: .4mm; }
  .rp-sec { margin-top: 4mm; }
  .rp-t tr, .rp-cols { break-inside: avoid; }
  .rp-sec h2 { break-after: avoid; display: flex; justify-content: space-between; align-items: baseline; font-size: 8.5pt; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; border-bottom: .8pt solid #000; padding-bottom: 1mm; margin-bottom: 1mm; color: #000; }
  .rp-sec h2 .rp-r { text-transform: none; letter-spacing: 0; font-size: 9.5pt; font-weight: 500; }
  .rp-t { width: 100%; border-collapse: collapse; }
  .rp-t td, .rp-t th { padding: .75mm 2mm .75mm 0; border-bottom: .3pt solid #bbb; vertical-align: top; text-align: left; }
  .rp-t th { font-size: 7.8pt; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .05em; }
  .rp-t .r { text-align: right; }
  .rp-t td.r { white-space: nowrap; }
  .rp-t tr:last-child td { border-bottom: 0; }
  .rp-kv td:first-child { width: 38%; color: #333; }
  .rp-kv td:last-child { font-weight: 600; }
  .rp-t .w-kg { width: 22mm; font-weight: 700; padding-right: 4mm; }
  .rp-t .w-pc { width: 16mm; }
  .rp-t .w-min { width: 13mm; color: #333; }
  .rp-t .w-ibu { width: 34mm; }
  .rp-t .rz-calc { color: #555; }
  .rp-g td { font-weight: 700; font-size: 8.5pt; padding-top: 1.6mm; border-bottom: .3pt solid #888; }
  .rp-g { break-after: avoid; }
  .rp-det { color: #333; }
  .rp-gt { margin-top: 1mm; }
  .rp-gt td:first-child { width: 38%; color: #333; }
  .rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; }
  .rp-note { margin-top: 1.5mm; white-space: pre-wrap; }
}

/* ================================================================== Kombi (03.11.2026): Glas-Stücke im Handy (H1–H6) */
/* H5 Kopfzeile: Start = Brauerei-Name · Suche · Profil, sonst Seitentitel · Suche · Profil */
.brew-name { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 650; min-width: 0; max-width: 70%; height: 40px; letter-spacing: -.01em; }
.brew-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brew-name .ic { width: 16px; height: 16px; color: var(--ink2); stroke-width: 2.2; }
.phead.start .ptitle { margin-top: 8px; }
.phead.kombi .ph-bar { justify-content: flex-start; height: auto; min-height: 50px; }
.ph-titel { flex: 1; min-width: 0; font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.phead.sub .ph-titel { font-size: 22px; padding-left: 2px; }
.phead.kombi .ptitle { margin: 2px 4px 14px; align-items: center; min-height: 0; }
.phead.kombi .ptitle:has(> div:empty) { margin: 0 4px 10px; }
.phead.kombi .vsub { margin-top: 0; }
@media print { .phead.kombi .ph-bar { display: flex !important; } .phead .head-r, .phead .round { display: none !important; } }
.such-zeile { display: flex; gap: 10px; align-items: flex-start; }
.such-zeile .searchbox { flex: 1; }
.such-zeile .round { width: 44px; height: 44px; box-shadow: none; background: var(--fill); }

/* Glastanks (Regeln aus /app.css von Glas, für GL.tank) */
.glastank { position: absolute; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%), linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%), linear-gradient(180deg, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.glastank.mini { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, #000 86%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, #000 86%, transparent 96%); }
.glastank canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.gt-zeiger { position: absolute; height: var(--d); margin-top: calc(var(--d) / -2); background: #18181A; border-radius: 2px; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2, .8, 0, 1); }
.gt-nabe { position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); background: #18181A; border-radius: 50%; }
.mini-box { position: relative; overflow: visible; flex: none; }
.saum { position: absolute; border-radius: 50%; pointer-events: none; }
.saum.lagune { background: radial-gradient(closest-side, rgba(22, 178, 222, .85), rgba(31, 194, 232, .42) 42%, rgba(31, 194, 232, 0)); filter: blur(1px); }
.saum.abweichung { background: radial-gradient(closest-side, rgba(255, 141, 40, .8), rgba(255, 141, 40, .38) 42%, rgba(255, 141, 40, 0)); filter: blur(1px); }
.saum.alarm { background: radial-gradient(closest-side, rgba(255, 56, 60, .8), rgba(255, 56, 60, .36) 42%, rgba(255, 56, 60, 0)); filter: blur(1px); }
.saum.alarm.puls { animation: alarmpuls 2s ease-in-out infinite; }
@keyframes alarmpuls { 50% { opacity: .45; } }
.saum.an { animation: lichtan 1s cubic-bezier(.2, .8, 0, 1) both; }
@keyframes lichtan { 0% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
.glasgefaess { display: block; position: relative; }
.glasgefaess > svg { visibility: hidden; }
.glasgefaess .glastank { z-index: 1; }

/* H1 Start: wischbare Tankreihe (rastet je Tank ein) mit Glastanks */
.keller .reihe-rahmen { margin: 14px -16px 0; position: relative; }
.keller .reihe { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 16px; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.keller .reihe::-webkit-scrollbar { display: none; }
.keller .reihe .grp { flex: none; display: flex; flex-direction: column; }
.keller .reihe .grp + .grp { margin-left: 10px; padding-left: 10px; box-shadow: inset .5px 0 0 var(--line2); }
.keller .reihe .grp-l { font-size: 11.5px; font-weight: 650; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; height: 18px; padding-left: 4px; position: sticky; left: 0; }
.keller .reihe .grp-l b { color: var(--ink2); font-weight: 700; }
.keller .reihe .grp-t { display: flex; }
.keller .reihe .tv { width: 64px; flex: none; scroll-snap-align: start; padding-top: 6px; }
.keller .reihe .tv .code { font-size: 12px; margin-bottom: 4px; }
.keller .reihe .tbox { width: 64px; height: 118px; display: block; position: relative; }
.keller .reihe .tbox .glasgefaess { position: absolute; inset: 0; }
.keller .reihe .tbox .glasgefaess > svg { display: none; }
.keller .reihe .tz { font-size: 12.5px; font-weight: 650; margin-top: 4px; white-space: nowrap; letter-spacing: -.01em; }
.keller .reihe .tz small { font-size: 10.5px; font-weight: 600; color: var(--ink2); margin-left: 2px; }
.keller .reihe .tz.leer { color: var(--ink3); font-weight: 600; }
.keller .reihe-fuss { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 10px; font-size: 13px; color: var(--ink2); font-weight: 500; }
.keller .reihe-fuss a { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 650; }
.keller .reihe-fuss a .ic { width: 15px; height: 15px; stroke-width: 2.4; }

/* Fehler aus Version 1 behoben: Tankkarten liefen am Handy rechts aus dem Bild (Raster ohne Mindestbreite 0) */
.tcards { grid-template-columns: minmax(0, 1fr); }
.tcard .tcn > div { white-space: nowrap; }
/* Fehler aus Version 1: die Regel für die kleine Beschriftung traf auch die Zahl selbst (Zahl grau, Einheit darunter) */
.tcard .tcn div > .bignum { display: inline-flex; font-size: 19px; color: var(--ink); margin: 0; font-weight: 650; }
.tcard .tcn div > .bignum .unit { display: inline; font-size: 12px; color: var(--ink2); margin: 0 0 0 2px; font-weight: 500; }

/* H2 Tank-Seite wie Glas: Bühne mit großem Glastank, Werte an Linien, Zustand groß; Blatt mit großem Messen-Knopf */
.schmal .tankseite { margin: 0 calc(-1 * var(--gut)); }
.tb-buehne { position: relative; height: 520px; overflow: hidden; margin-top: calc(-6px - var(--safe-t)); padding-top: var(--safe-t);
  background: radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #FAFAFC 0%, #F3F4F7 52%, #E9EAEE 79%, #EDEEF2 88%, var(--bg) 100%); }
.dark .tb-buehne { background: radial-gradient(110% 60% at 50% 0%, #1C1C20 0%, rgba(28, 28, 32, 0) 62%), linear-gradient(180deg, #121214 0%, #0A0A0B 70%, var(--bg) 100%); }
.tb-nav { position: absolute; z-index: 10; top: calc(var(--safe-t) + 8px); left: var(--gut); right: var(--gut); display: flex; align-items: center; gap: 10px; }
.tb-nav .tb-titel { flex: 1; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -.015em; padding-left: 50px; white-space: nowrap; }
.tb-nav .tb-titel .chip { vertical-align: 3px; }
.tb-satz { position: absolute; z-index: 6; left: 20px; right: 20px; top: calc(var(--safe-t) + 404px); }
.tb-zustand { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.025em; }
.tb-zeile { margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--ink2); font-weight: 500; }
.tb-buehne .wert-linie { position: absolute; z-index: 5; height: 1px; background: #A1A1A6; }
.dark .tb-buehne .wert-linie { background: #636366; }
.tb-buehne .wert-anker { position: absolute; z-index: 6; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 4px; background: var(--card-solid); box-shadow: 0 0 0 1.5px #8E8E93; }
.tb-buehne .wert-text { position: absolute; z-index: 6; }
.tb-buehne .wert-text b { display: block; font-size: 26px; line-height: 30px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.tb-buehne .wert-text b em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--ink2); margin-left: 3px; letter-spacing: 0; }
.tb-buehne .wert-text span { display: block; font-size: 12.5px; line-height: 16px; color: var(--ink2); font-weight: 500; white-space: nowrap; }
.tb-buehne .wert-text.links { text-align: right; }
.tb-blatt { position: relative; z-index: 8; margin-top: -26px; background: var(--card-solid); border-radius: 30px 30px 0 0; padding: 22px var(--gut) 30px; box-shadow: 0 -6px 30px rgba(0, 0, 0, .06); min-height: 300px; }
.dark .tb-blatt { box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .1), 0 -6px 30px rgba(0, 0, 0, .5); }
.tb-blatt .griff { position: absolute; top: 7px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line2); }
.tb-messen { width: 100%; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 650; color: #fff;
  background: #1D1D1F; box-shadow: inset 0 0 12px -6px rgba(255, 255, 255, .75), 0 1px 2px rgba(0, 0, 0, .2), 0 4px 12px rgba(0, 0, 0, .12); }
.dark .tb-messen { background: #F5F5F7; color: #1D1D1F; }
.tb-messen .ic { width: 24px; height: 24px; stroke-width: 2.1; }
.tb-messen small { font-size: 15px; font-weight: 500; opacity: .85; }
.tb-messen small::before { content: '·'; margin-right: 8px; }
.tb-messen.faellig, .dark .tb-messen.faellig { background: linear-gradient(180deg, #16A7D2 0%, #0A79B3 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 12px -6px rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .16), 0 10px 22px -10px rgba(10, 121, 179, .75); }
.tb-messen:disabled { opacity: .4; }
.tb-aufgabe { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--accent-tint); color: var(--accent); font-weight: 600; font-size: 14.5px; }
.tb-aufgabe span { flex: 1; min-width: 0; }
.tb-aufgabe .btn { flex: none; }
.tb-knoepfe { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tb-k { height: 56px; border-radius: 28px; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: 16.5px; font-weight: 600; background: var(--fill); min-width: 0; }
.tb-k span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-k .ic { width: 22px; height: 22px; color: var(--ink2); }
.tb-k.an { background: var(--accent-tint); color: var(--accent); }
.tb-k.an .ic { color: var(--accent); }
.tb-k:disabled { opacity: .4; }
.tb-blatt .sec { margin-top: 26px; }
.tb-werte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tb-werte .w { background: var(--fill); border-radius: 18px; padding: 12px 14px; min-width: 0; }
.tb-werte .w small { display: block; font-size: 13px; color: var(--ink2); font-weight: 500; }
.tb-werte .w b { display: block; font-size: 26px; line-height: 32px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.tb-werte .w b em { font-style: normal; font-size: 15px; color: var(--ink2); margin-left: 3px; font-weight: 500; letter-spacing: 0; }
.tb-werte .w span { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-diagramm { background: var(--fill); border-radius: 20px; padding: 12px 8px 10px; }
.tb-blatt .card.flach { box-shadow: inset 0 0 0 .5px var(--line2); background: transparent; }

/* H3 Gärverlauf: Ereignisse als nummerierte Zeichen, Namen als Liste darunter – nie Text auf Text */
.gline .mkb { cursor: pointer; }
.gline .mkb circle { fill: var(--card-solid); stroke: var(--ink3); stroke-width: 1.4; }
.gline .mkb text { font: 700 9.5px var(--font); fill: var(--ink2); }
.gline .mkb.acc circle { stroke: var(--accent); }
.gline .mkb.acc text { fill: var(--accent); }
.mk-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.mk-liste li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 550; color: var(--ink2); padding: 2px 4px; border-radius: 8px; }
.mk-liste li.an { background: var(--accent-tint); color: var(--ink); }
.mk-nr { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 700; box-shadow: inset 0 0 0 1.4px var(--ink3); color: var(--ink2); }
.mk-nr.acc { box-shadow: inset 0 0 0 1.4px var(--accent); color: var(--accent); }

/* H4 Lager-Übersicht wie Glas: Vorratsglas, Name + Menge groß, Gebinde als Text, „als Nächstes“, Reichweiten-Balken */
.lg-bereiche { margin-bottom: 14px; }
.lg-bereiche .row .r { font-size: 14px; color: var(--ink2); font-weight: 550; }
.lg-liste .lg-roh { align-items: center; padding-top: 12px; padding-bottom: 12px; }
.lg-glas { width: 40px; height: 44px; flex: none; display: grid; place-items: center; }
.lg-glas .objekt { width: 44px; height: 44px; object-fit: contain; display: block; }
.lg-glas .objekt.fehlt { visibility: hidden; }
.lg-roh .mid { min-width: 0; }
.lg-roh .mid > span { display: block; }
.lg-z1 { display: flex !important; align-items: baseline; gap: 10px; }
.lg-z1 b { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-menge { flex: none; font-size: 18px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-menge em { font-style: normal; font-size: 13px; color: var(--ink2); margin-left: 3px; font-weight: 500; letter-spacing: 0; }
.lg-roh .s.lg-klein { font-size: 12.5px; color: var(--ink3); }
.lg-z4 { display: flex !important; align-items: center; gap: 10px; margin-top: 7px; }
.lg-z4 small { font-size: 12px; color: var(--ink2); white-space: nowrap; font-weight: 500; }
.lg-z4 small.warn-t { color: var(--orange-ink); font-weight: 650; }
.lg-balken { position: relative; display: block; flex: 1; height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.dark .lg-balken { background: rgba(255, 255, 255, .12); }
.lg-balken i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--ink3); }
.lg-balken.warn i { background: var(--orange); }
.lg-erklaer { margin: 18px 4px 10px; line-height: 1.45; }

/* H6 Brauerei löschen: fünf Schritte, danach roter Hinweis mit „Löschen abbrechen“ */
.loesch-hinweis { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; padding: 10px 10px 10px 13px; border-radius: 16px; background: var(--red); color: #fff; box-shadow: 0 10px 24px -12px rgba(229, 53, 42, .7); }
.loesch-hinweis .ic { width: 20px; height: 20px; flex: none; }
.loesch-hinweis span { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.3; opacity: .95; }
.loesch-hinweis b { display: block; font-size: 15px; font-weight: 700; opacity: 1; }
.loesch-hinweis .btn { flex: none; background: #fff; color: var(--red-ink); font-weight: 700; }
.bl-schritte { display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.bl-schritte i { width: 22px; height: 4px; border-radius: 2px; background: var(--fill); }
.bl-schritte i.fertig { background: var(--red); opacity: .45; }
.bl-schritte i.an { background: var(--red); }
.bl-schritte span { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.bl-h { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 10px; }
.bl-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.bl-zahl { background: var(--fill); border-radius: 14px; padding: 10px 8px; text-align: center; min-width: 0; }
.bl-zahl b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.bl-zahl span { display: block; font-size: 11px; color: var(--ink2); font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-loeschen .note { margin-top: 8px; }
.bl-loeschen .btn.wide { width: 100%; justify-content: center; margin-top: 12px; }
.bl-feld { width: 100%; height: 50px; margin-top: 12px; border-radius: 14px; border: 0; padding: 0 14px; font-size: 17px; background: var(--fill); outline: none; box-shadow: inset 0 0 0 1.5px transparent; }
.bl-feld:focus { box-shadow: inset 0 0 0 1.5px var(--red); }
.bl-letzt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 12px; border-radius: 18px; background: var(--red-tint); }
.bl-letzt .ic { width: 30px; height: 30px; color: var(--red); margin-bottom: 4px; }
.bl-letzt b { font-size: 18px; }
.bl-letzt span { font-size: 13px; color: var(--ink2); font-weight: 500; }
.bl-loeschen .bl-rot { height: 54px; font-size: 17px; margin-top: 16px; background: var(--red); color: #fff; }
.loesch-hinweis { flex-wrap: wrap; }
.loesch-hinweis span { flex: 1 1 200px; }
.loesch-hinweis .btn { flex: 1 1 100%; height: 38px; }
.keller .reihe .grp-l { align-self: flex-start; left: 0; z-index: 2; background: var(--card-solid); border-radius: 6px; padding: 0 6px 0 4px; }
/* Fehler aus Version 1 behoben: Tank-Verlauf am Handy zu breit (Kurven mit fester Breite im Zweier-Raster) */
.schmal .grid.g3.duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.spk { min-width: 0; overflow: hidden; }
.spk .between { gap: 8px; }
.spk .spark { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 150px; height: auto; }

/* ================================================================== Kombi Laptop (L1–L12, 03.11.2026)
   Grundlage: Computer-Ansicht von Version 1 (Aufbau, Daten), Optik wie Glas. Alles nur in der breiten Ansicht (html.breit) –
   das Handy bleibt unverändert. Glas-Palette: neutral grau/weiß, Hauptknopf schwarz, Blau nur für fällig/Link, Rot Alarm, Orange Warnung. */
html.breit.light { --bg: #F2F2F7; --bg2: #EBEBF0; --card: #FFFFFF; --card-solid: #FFFFFF; --card2: #F7F7FA; --ink: #1D1D1F; --ink2: #6E6E73; --ink3: #8E8E93;
  --line: #E5E5EA; --line2: #D8D8DE; --fill: #F2F2F7; --accent-tint: rgba(10,121,179,.09);
  --shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.03);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.14); --glow: #F2F2F7; --bar: rgba(242,242,247,.86); --side: #F2F2F7;
  --haupt: #1D1D1F; --haupt-text: #FFFFFF; }
html.breit.dark { --bg: #000000; --bg2: #0B0B0C; --card: #1C1C1E; --card-solid: #1C1C1E; --card2: #2C2C2E; --ink: #F5F5F7; --ink2: #98989D; --ink3: #636366;
  --line: #38383A; --line2: #48484A; --fill: #2C2C2E; --accent-tint: rgba(79,203,234,.12);
  --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 18px rgba(0,0,0,.35); --shadow-lg: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.6);
  --glow: #000; --bar: rgba(0,0,0,.8); --side: #000; --haupt: #F5F5F7; --haupt-text: #1D1D1F; }
html.breit body { font-size: 14px; background: var(--bg); }

/* L2 Rahmen: Kopfleiste + Seitenleiste */
.breit .app.kombi-rahmen { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); height: 100vh; }
.breit .kleiste { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 0 18px 0 16px; background: var(--bg); position: relative; z-index: 5; }
.breit .kl-marke { display: flex; align-items: center; gap: 9px; width: 196px; font-size: 16px; letter-spacing: -.01em; }
.breit .kl-marke .mark { width: 28px; height: 28px; }
.breit .kl-brauerei { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; max-width: 260px; }
.breit .kl-brauerei span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breit .kl-brauerei .ic { width: 15px; height: 15px; color: var(--ink2); stroke-width: 2.2; }
.breit .kl-suche { flex: 1; max-width: 560px; margin: 0 auto; height: 36px; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink3); font-size: 13.5px; }
.breit .kl-suche .ic { width: 16px; height: 16px; }
.breit .kl-suche span { flex: 1; text-align: left; }
.breit kbd { font: 600 11px var(--font); color: var(--ink3); background: var(--fill); border-radius: 5px; padding: 2px 6px; }
.breit .kl-r { display: flex; align-items: center; gap: 12px; }
.breit .kl-r .st { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink2); }
.breit .kl-r .st .ic { width: 17px; height: 17px; color: var(--green); }
.breit .kl-r .st.warn .ic { color: var(--orange); } .breit .kl-r .st.bad .ic { color: var(--red); } .breit .kl-r .st.bad { color: var(--red-ink); }
.breit .kl-rund { width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; position: relative; background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--line); }
.breit .kl-rund .ic { width: 17px; height: 17px; }
.breit .kl-rund em { position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--red); color: #fff; font: 700 10.5px var(--font); display: grid; place-items: center; padding: 0 4px; font-style: normal; }
.breit .kl-ich { width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: var(--haupt); color: var(--haupt-text); font-size: 12px; font-weight: 700; }
.breit .kombi-rahmen .side { grid-row: 2; padding: 6px 10px 14px; background: var(--bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; height: auto; overflow-y: auto; }
.breit .kombi-rahmen .side .add { margin: 0 0 10px; height: 34px; border-radius: 10px; background: var(--haupt); color: var(--haupt-text); box-shadow: 0 1px 2px rgba(0,0,0,.2); font-size: 13.5px; font-weight: 600; justify-content: flex-start; padding: 0 10px; gap: 7px; }
.breit .kombi-rahmen .side .add .ic { width: 16px; height: 16px; stroke-width: 2.3; }
/* 05.11.: viele Tanks im Keller-Abschnitt → Seitenleiste scrollt, nichts darin wird zusammengedrückt (vorher wurde „Erfassen“ flach) */
.breit .kombi-rahmen .side > * { flex-shrink: 0; }
.breit .kombi-rahmen .side .add span { flex: 1; text-align: left; }
.breit .kombi-rahmen .side .add kbd { background: rgba(255,255,255,.16); color: inherit; opacity: .8; }
.breit.dark .kombi-rahmen .side .add kbd { background: rgba(0,0,0,.1); }
.breit .kombi-rahmen .nav { margin-top: 2px; gap: 1px; }
.breit .kombi-rahmen .nav a { height: 32px; border-radius: 8px; gap: 10px; padding: 0 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.breit .kombi-rahmen .nav a .ic { width: 17px; height: 17px; color: var(--ink2); }
.breit .kombi-rahmen .nav a:hover { background: rgba(0,0,0,.035); }
.breit.dark .kombi-rahmen .nav a:hover { background: rgba(255,255,255,.05); }
.breit .kombi-rahmen .nav a.on { background: var(--card-solid); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08); }
.breit .kombi-rahmen .nav a.on .ic { color: var(--accent); stroke-width: 1.9; }
.breit .kombi-rahmen .nav a em { font-size: 11.5px; color: var(--ink3); }
.breit .kombi-rahmen .nav a em.red:not(:empty), .breit .kombi-rahmen .nav a em.warn:not(:empty) { min-width: 18px; height: 18px; border-radius: 9px; font-size: 11px; }
.breit .kombi-rahmen .nav a em.warn:not(:empty) { background: var(--orange-tint); color: var(--orange-ink); }
.breit .kombi-rahmen .nav a em.red:not(:empty) { background: var(--red-tint); color: var(--red-ink); }
.breit .kombi-rahmen .grp-l { margin: 16px 8px 4px; font-size: 12px; font-weight: 600; color: var(--ink3); text-transform: none; letter-spacing: 0; }
.breit .kl-tanks { display: grid; gap: 1px; }
.breit .kl-tanks a { display: grid; grid-template-columns: 42px 1fr 40px; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; font-weight: 600; }
.breit .kl-tanks a.frei { color: var(--ink3); font-weight: 500; }
.breit .kl-tanks a.on { background: var(--card-solid); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.breit .kl-tanks a:hover { background: rgba(0,0,0,.035); }
.breit .kl-tanks .bal { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.breit .kl-tanks .bal i { display: block; height: 100%; border-radius: 2px; }
.breit .kl-tanks .hl { text-align: right; font-weight: 500; color: var(--ink2); font-size: 12px; }
.breit .kombi-rahmen .side .foot { margin-top: 14px; padding-top: 10px; box-shadow: inset 0 .5px 0 var(--line2); }
.breit .kombi-rahmen .side .st { font-size: 12.5px; padding: 2px 8px; }
.breit .kombi-rahmen .view { grid-row: 2; height: auto; overflow-y: auto; padding: 18px 32px 48px; background: var(--card2); border-top-left-radius: 14px; box-shadow: inset .5px .5px 0 var(--line); }
.breit.light .kombi-rahmen .view { background: #F7F7FA; }
.breit.dark .kombi-rahmen .view { background: #0B0B0C; }
.breit #toasts { left: 232px; }

/* L12 Breite: große Bildschirme nutzen, gleichmäßige Ränder, höchstens so breit, dass Zeilen lesbar bleiben */
.breit .kombi-rahmen .view > * { max-width: 1640px; margin-left: auto; margin-right: auto; }

/* L1 Gewicht: eine Stufe kleiner, ruhiger */
.breit .vhead { margin-bottom: 16px; align-items: flex-end; }
.breit .vhead h1 { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.breit .eyebrow { font-size: 12px; letter-spacing: .02em; text-transform: none; font-weight: 500; }
.breit .vsub { font-size: 13px; }
.breit .backlink { font-size: 13px; }
.breit .card { border-radius: 18px; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid); }
.breit .pad { padding: 16px 18px; }
.breit .cap { font-size: 13px; font-weight: 600; color: var(--ink); }
.breit .cap .ic { width: 15px; height: 15px; color: var(--ink2); }
.breit .sec h2 { font-size: 17px; }
.breit .sec { margin: 22px 2px 8px; }
.breit .bignum { font-size: 28px; font-weight: 650; }
.breit .bignum .unit { font-size: 14px; }
.breit .bignum.xl { font-size: 34px; } .breit .bignum.xl .unit { font-size: 16px; }
.breit .bignum.m { font-size: 22px; } .breit .bignum.m .unit { font-size: 12.5px; }
.breit .bignum.s { font-size: 17px; } .breit .bignum.s .unit { font-size: 11.5px; }
.breit .btn { height: 34px; padding: 0 13px; border-radius: 17px; font-size: 13.5px; font-weight: 600; box-shadow: none; background: var(--fill); }
.breit .btn .ic { width: 16px; height: 16px; }
.breit .btn.pri, .breit.light .btn.pri { background: var(--haupt); color: var(--haupt-text); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.breit .btn.sm { height: 30px; font-size: 13px; padding: 0 11px; border-radius: 15px; }
.breit .btn.big { height: 42px; font-size: 15px; border-radius: 21px; }
.breit .btn.danger { box-shadow: none; }
.breit .qa .btn { height: 32px; border-radius: 16px; font-size: 13px; padding: 0 12px 0 10px; background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--line); }
.breit .qa .btn .ic { color: var(--ink2); }
.breit .qa .btn.pri { background: var(--haupt); color: var(--haupt-text); box-shadow: none; }
.breit .qa .btn.pri .ic { color: inherit; }
.breit .ri, .breit .ri.a, .breit .ri.i, .breit .ri.g, .breit .ri.b { background: var(--fill); color: var(--ink2); width: 32px; height: 32px; border-radius: 9px; }
.breit .ri.o { background: var(--orange-tint); color: var(--orange); } .breit .ri.r { background: var(--red-tint); color: var(--red); }
.breit .ri.v { background: transparent; }
.breit .ri .ic { width: 17px; height: 17px; }
.breit .row { min-height: 50px; padding: 9px 14px 9px 12px; }
.breit .row .mid b { font-size: 14px; }
.breit .row .s { font-size: 12.5px; }
.breit .row + .row::before { left: 56px; background: var(--line); }
.breit .chip { height: 22px; font-size: 12px; padding: 0 8px; border-radius: 11px; }
.breit .sec .n, .breit .n { background: var(--fill); color: var(--ink2); }
.breit .seg { border-radius: 10px; padding: 3px; }
.breit .seg button, .breit .seg a { min-height: 30px; border-radius: 8px; font-size: 13px; }
.breit .subnav a { height: 32px; font-size: 13px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); background: var(--card-solid); }
.breit .subnav a.on { background: var(--haupt); color: var(--haupt-text); box-shadow: none; }
.breit .tbl { font-size: 13.5px; }
.breit .tbl th { font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink2); }
.breit .tbl td { padding: 9px 12px; }
.breit .tblwrap { border-radius: 18px; }
.breit .gbars .gb i { background: var(--line2); }
.breit .gbars .gb.on i { background: var(--ink); }
.breit .note.info { background: var(--fill); }
.breit .note.info .ic { color: var(--ink2); }
.breit .avatar, .breit .av { background: var(--haupt); color: var(--haupt-text); box-shadow: none; }
/* Statusabzeichen über Tanks: kleiner Punkt statt bunter Kreise */
.breit .tc .badge, .breit .tcard .tv2 .badge { width: 9px; height: 9px; box-shadow: 0 0 0 2.5px var(--card-solid); }
.breit .tc .badge .ic, .breit .tcard .tv2 .badge .ic { display: none; }
.breit .tc .badge { top: 9px; }
.breit .badge.warn, .breit .badge.ok { background: var(--accent); }
.breit .badge.plan { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 2.5px var(--card-solid); }
.breit .tc .bslot .badge, .breit .tcard .tv2 .badge { width: 9px !important; height: 9px !important; min-width: 0; padding: 0; }
.breit .tc .meta.warn { color: var(--accent); }
.okline.warn-t { color: var(--orange-ink); }
.breit .kl-marke .kl-zeichen { width: 28px; height: 28px; border-radius: 8px; background: var(--haupt); color: var(--haupt-text); display: grid; place-items: center; }
.breit .kl-marke .kl-zeichen .sym { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* L4 Tank-Seite am Laptop: links großer Glastank (steht beim Scrollen), rechts alle Daten von Version 1 */
.breit .tbw { display: grid; grid-template-columns: minmax(360px, 36%) minmax(0, 1fr); gap: 16px; align-items: start; }
.breit .tbw-links { position: sticky; top: 0; }
.breit .tb-buehne.weit { height: calc(100vh - 56px - 130px); min-height: 560px; max-height: 860px; margin: 0; padding: 0; border-radius: 18px; box-shadow: var(--shadow); }
.breit.light .tb-buehne.weit { background: radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #FAFAFC 0%, #F3F4F7 55%, #E9EAEE 80%, #F1F1F5 100%); }
.breit.dark .tb-buehne.weit { background: radial-gradient(110% 60% at 50% 0%, #1C1C20 0%, rgba(28,28,32,0) 62%), linear-gradient(180deg, #121214 0%, #0A0A0B 75%, #111113 100%); }
.breit .tb-buehne.weit .tb-satz { top: auto; bottom: 22px; left: 24px; right: 24px; }
.breit .tb-buehne.weit .tb-zustand { font-size: 26px; line-height: 32px; }
.breit .tb-buehne.weit .tb-zeile { font-size: 13.5px; }
.breit .tb-buehne.weit .wert-text b { font-size: 24px; line-height: 28px; }
.breit .tbw-rechts { display: grid; gap: 14px; min-width: 0; }
.breit .tbw-rechts > .grid { gap: 14px; align-items: start; }
.breit .tbw-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.breit .btn.faellig { background: linear-gradient(180deg, #16A7D2 0%, #0A79B3 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(10,121,179,.8); }
.breit .btn.faellig small { font-size: 12px; font-weight: 500; opacity: .85; margin-left: 2px; }
.breit .btn.an { background: var(--accent-tint); color: var(--accent); }
.breit .note.faellig { background: var(--accent-tint); color: var(--ink); align-items: center; }
.breit .note.faellig .ic { color: var(--accent); }
.breit .tbw-hinweise { display: grid; gap: 8px; }
.breit .tbw-hinweise .note { align-items: center; }
.breit .tb-werte.weit { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.breit .tb-werte .w { background: var(--fill); }
.breit .list-card { padding: 16px 4px 4px; }
.breit .list-card > .cap { padding: 0 14px 8px; }
.breit .list-card > .note { margin: 0 12px 8px; }
.breit .list-card.voll { grid-column: 1 / -1; }
.breit .lnk.small, .breit .more { font-size: 13px; }
.breit .tbw-rechts { grid-template-columns: minmax(0, 1fr); }
.breit .tbw-rechts > .grid.g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.breit .note .btn:not(.faellig) { background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--line); }
.breit .chartbox .gline { max-height: 340px; }

/* L7 Lager am Laptop wie Glas */
.breit .reiter { display: flex; gap: 4px; margin: -4px 0 0; }
.breit .reiter a { height: 32px; padding: 0 13px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink2); }
.breit .reiter a:hover { color: var(--ink); }
.breit .reiter a.on { background: var(--card-solid); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08); }
.breit .reiter em { font-style: normal; min-width: 18px; height: 18px; border-radius: 9px; background: var(--orange-tint); color: var(--orange-ink); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 5px; }
.breit .lg-zus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 0; }
.breit .lg-kz { padding: 2px 20px; display: block; min-width: 0; }
.breit .lg-kz + .lg-kz { box-shadow: inset 1px 0 0 var(--line); }
.breit .lg-kz small { display: block; font-size: 13px; color: var(--ink2); font-weight: 500; }
.breit .lg-kz b { display: block; font-size: 26px; font-weight: 650; letter-spacing: -.02em; margin-top: 4px; }
.breit .lg-kz b em { font-style: normal; font-size: 14px; color: var(--ink2); margin-left: 3px; font-weight: 500; }
.breit .lg-kz span { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breit .lg-tabelle { padding: 14px 16px 6px; }
.breit .lg-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.breit .lg-pillen button { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 600; background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--line); }
.breit .lg-pillen button small { color: var(--ink3); font-weight: 600; margin-left: 3px; }
.breit .lg-pillen button.on { background: var(--haupt); color: var(--haupt-text); box-shadow: none; }
.breit .lg-pillen button.on small { color: inherit; opacity: .7; }
.breit .lg-filter-r { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 12px 0 8px; }
.breit .lg-filter-r .searchbox { width: 280px; }
.breit .lg-tbl th { background: var(--fill); }
.breit .lg-tbl th:first-child { border-top-left-radius: 10px; } .breit .lg-tbl th:last-child { border-top-right-radius: 10px; }
.breit .lg-tbl tr.grp td { background: var(--card2); font-weight: 600; font-size: 13px; padding: 6px 12px; }
.breit .lg-grp-glas { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin-right: 8px; }
.breit .lg-grp-glas .objekt { width: 24px; height: 24px; object-fit: contain; }
.breit .lg-tbl td b { font-weight: 600; }
.breit .lg-reich { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.breit .lg-reich .lg-balken { width: 72px; flex: none; }
.breit .lg-reich span:last-child { white-space: nowrap; }

/* L2 Zähler unten in der Seitenleiste (wie Glas) */
.breit .kl-zaehler { display: grid; gap: 2px; margin-top: 14px; padding-top: 10px; box-shadow: inset 0 .5px 0 var(--line2); }
.breit .kl-zaehler a { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 6px; height: 26px; padding: 0 8px; font-size: 12.5px; color: var(--ink2); border-radius: 7px; }
.breit .kl-zaehler a:hover { background: rgba(0,0,0,.035); }
.breit .kl-zaehler b { color: var(--ink); font-weight: 600; }
.breit .kl-zaehler .p { width: 7px; height: 7px; border-radius: 4px; }
.breit .kl-zaehler .ic { width: 14px; height: 14px; color: var(--ink2); }
.breit .lg-tbl tr.grp td { text-transform: none; letter-spacing: 0; color: var(--ink); }
.breit .switch.sm .swl { font-size: 13px; font-weight: 500; }

/* L9 Auswertungen: Gebinde mit Glasobjekten */
.breit .ausw-gebinde { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.breit .ausw-gebinde .ag { background: var(--fill); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.breit .ag-obj { display: block; height: 56px; margin-bottom: 6px; }
.breit .ag-obj .objekt { height: 56px; width: auto; object-fit: contain; }
.breit .ausw-gebinde b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.breit .ausw-gebinde span:last-child { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 2px; }
/* L1: Phasen-Abzeichen am Laptop neutral (Farbe nur für Status) */
.breit .tbl .chip.warn:has(> .ic), .breit .tbl .chip.blue, .breit .tbl .chip.acc { background: var(--fill); color: var(--ink2); }
/* Drucken am Laptop: Kopfleiste und Seitenleiste weg, Inhalt über die ganze Seite */
@media print {
  .kleiste, .kombi-rahmen .side, .loesch-hinweis { display: none !important; }
  .app.kombi-rahmen { display: block !important; height: auto !important; }
  .kombi-rahmen .view { height: auto !important; overflow: visible !important; padding: 0 !important; background: #fff !important; box-shadow: none !important; }
  .kombi-rahmen .view > * { max-width: none !important; }
  .tbw { display: block !important; } .tbw-links { display: none !important; }
}

/* ================================================================== Feinschliff 1 (03.11.2026) – gilt überall (Handy + Laptop, hell + dunkel) */
/* Statuspunkt: klein, gefüllt, einfarbig, direkt links vor dem Tanknamen, mittig zur Zeile */
.sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; vertical-align: middle; margin: -2px 5px 0 0; }
.sdot.red { background: var(--red); }
.sdot.acc { background: var(--accent); }
.sdot.grau { background: var(--ink3); }
.tv .code, .tc .code { display: inline-flex; align-items: center; justify-content: center; }
.tv .code .sdot, .tc .code .sdot { margin: 0 4px 0 0; }
.tcard .tct b { display: inline-flex; align-items: center; }
.tcard .tct b .sdot { width: 8px; height: 8px; margin: 0 7px 0 0; }
.tc .vbox { margin-top: 10px; }
.keller .reihe .tv { padding-top: 6px; }
.keller .reihe .tv .code { margin-bottom: 8px; }
/* Karten-Raster passt in jede Breite: Werte brechen um statt überzustehen */
.tcards { grid-template-columns: minmax(0, 1fr); }
.breit .tcards { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.tcard { min-width: 0; }
.tcard .tcn { flex-wrap: wrap; gap: 8px 14px; }
.tcard .tcn > div { min-width: 0; }
.breit .tcard .tcn > div > .bignum { font-size: 17px; }
.breit .vhead { flex-wrap: wrap; }
.breit .vh-r { flex-wrap: wrap; }
.breit .vhead > .vh-l { min-width: 0; }
/* Sudhausausbeute je Bier: Verlauf über den freien Platz der Zeile, Prozent rechts daneben */
.sha-zeile { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 70px; align-items: center; gap: 16px; }
.sha-zeile .sha-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sha-zeile .sha-kurve svg { display: block; width: 100%; height: auto; max-height: 34px; }
.sha-zeile .sha-p { text-align: right; }
.schmal .sha-zeile { grid-template-columns: minmax(0, 1fr) 90px 56px; gap: 10px; }
/* Raster dürfen nie breiter werden als ihr Platz (Spalten mit Mindestbreite 0) */
.breit .g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.breit .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.breit .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.breit .g21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.breit .g31 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.breit .g12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid > * { min-width: 0; }
/* schmale Laptop-Fenster: nichts darf überstehen */
.breit .legend { flex-wrap: wrap; justify-content: flex-end; }
.breit .kv dd, .breit .kv > div > * { min-width: 0; overflow-wrap: anywhere; }
.breit .lg-tbl th { white-space: normal; }
.breit .lg-reich { min-width: 0; }
.breit .lg-tabelle { overflow-x: auto; }
.breit .list-card > .cap { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 1180px) {
  .breit .g31, .breit .g21 { grid-template-columns: minmax(0, 1fr); }
  .breit .tbw-rechts > .grid.g2 { grid-template-columns: minmax(0, 1fr); }
  .breit .tbw { grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); }
  .breit .lg-reich .lg-balken { width: 44px; }
  .breit .lg-zus { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 1180px) {
  .breit .lg-tbl td, .breit .lg-tbl th { padding: 8px 6px; font-size: 12.5px; }
  .breit .lg-tbl td.small, .breit .lg-tbl td .faint { overflow-wrap: anywhere; }
  .breit .lg-tabelle { padding: 12px 10px 6px; }
}
.knums { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.knums.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.breit .knums.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kn { min-width: 0; }
.kn .kl { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1400px) { .breit .g31.row1 { grid-template-columns: minmax(0, 1fr); } }
/* Kellerreihe auf dem Laptop-Start (05.11.): jeder Tank behält seine Breite wie in Version 1. Passen nicht alle hinein,
   lässt sich die Reihe seitlich wischen (Touchpad) oder mit den Pfeilen links/rechts weiterblättern. */
.breit .txl-rahmen { position: relative; margin-top: 16px; }
.breit .tanks-xl { margin-top: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; gap: 0; }
.breit .tanks-xl::-webkit-scrollbar { display: none; }
.breit .tanks-xl .tg { flex: none; gap: 4px; }
.breit .tanks-xl .tc { flex: 0 1 84px; width: 84px; min-width: 80px; scroll-snap-align: start; overflow-x: clip; }
.breit .tanks-xl .tc .meta { white-space: normal; justify-content: center; text-align: center; line-height: 1.2; }
.breit .tanks-xl .tsep { flex: none; }
.breit .txl-rahmen.rand-l .tanks-xl { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px); mask-image: linear-gradient(to right, transparent 0, #000 56px); }
.breit .txl-rahmen.rand-r .tanks-xl { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 56px); mask-image: linear-gradient(to left, transparent 0, #000 56px); }
.breit .txl-rahmen.rand-l.rand-r .tanks-xl { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.breit .txl-pfeil { position: absolute; top: 112px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--card-solid); color: var(--ink); border: .5px solid var(--line2); box-shadow: 0 2px 10px rgba(0,0,0,.14); cursor: pointer; }
.breit .txl-pfeil[hidden] { display: none; }
.breit .txl-pfeil .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.breit .txl-pfeil.l { left: -6px; } .breit .txl-pfeil.r { right: -6px; }
.breit .txl-pfeil:hover { background: var(--bg2, var(--card-solid)); }

/* ================================================================== Runde 2 (Feedback Vater, 03.11.2026) */
/* V4 Grüne Akzente – sparsam: „Endgültig bestätigen“, Erfassen/Plus, Erledigt-Zeichen. Ton: Tannengrün (Juri kann wechseln). */
.light, html.breit.light { --gruen: #1E5B3E; --gruen-2: #2A7350; --gruen-text: #FFFFFF; --gruen-zeichen: #1E7A4E; --gruen-tint: rgba(30,91,62,.10); }
.dark, html.breit.dark { --gruen: #2F8A5E; --gruen-2: #3A9C6C; --gruen-text: #FFFFFF; --gruen-zeichen: #4CB585; --gruen-tint: rgba(76,181,133,.15); }
.btn.gruen, .light .btn.gruen, .breit .btn.pri.gruen, .breit.light .btn.pri.gruen { background: var(--gruen); color: var(--gruen-text); box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); }
.btn.gruen:hover { background: var(--gruen-2); }
.btn.pri.danger { background: var(--red); color: #fff; box-shadow: none; }
.plus { background: var(--gruen); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 5px var(--bg), 0 14px 26px -10px rgba(20,70,45,.55); }
.side .add, .breit .kombi-rahmen .side .add { background: var(--gruen); color: var(--gruen-text); }
.breit .kombi-rahmen .side .add kbd { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.bstep.done .bs-dot { background: var(--gruen-zeichen); color: #fff; }
.side .st .ic, .breit .kl-r .st .ic, .syncpill .ic, .syncpill.ok .ic { color: var(--gruen-zeichen); }
.syncpill.warn .ic { color: var(--orange); } .syncpill.bad .ic { color: var(--red); }
.zeichen-ok { color: var(--gruen-zeichen); }
/* V3 Noch mal prüfen */
.nochmal { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--fill); }
.nochmal .ic { width: 20px; height: 20px; color: var(--ink2); margin-top: 1px; }
.nochmal b { display: block; font-size: 16px; }
.nochmal span { display: block; font-size: 13px; color: var(--ink2); margin-top: 2px; }
/* V6 gelber Textmarker (nur Ausschlagwürze, Stammwürze, Sudhausausbeute) */
.light, html.breit.light { --marker: rgba(255, 213, 0, .55); }
.dark, html.breit.dark { --marker: rgba(255, 200, 0, .32); }
mark.gelb { color: inherit; background: linear-gradient(176deg, transparent 8%, var(--marker) 9%, var(--marker) 90%, transparent 92%); padding: 0 .22em; margin: 0 -.05em; border-radius: .25em .1em .3em .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gelbzeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gelbzeile > div { display: flex; flex-direction: column-reverse; gap: 4px; min-width: 0; }
.gelbzeile .gz-l { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.gelbzeile .gz-v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.gelbzeile .gz-v small { font-size: 14px; font-weight: 600; color: var(--ink2); margin-left: 3px; }
.breit .gelbzeile .gz-v { font-size: 30px; }
/* V8 rechnerisch leerer Tank */
.tb-leer { display: grid; gap: 10px; margin-bottom: 14px; }
.tb-leer-k { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-leer-k .btn { flex: 1; justify-content: center; }
/* V9 Formel sichtbar · V9b Bittere-Rechner */
.formel { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 13px; line-height: 1.45; }
.formel .fx { font-weight: 700; font-size: 14px; letter-spacing: -.005em; }
.formel .fx i { font-style: normal; font-weight: 500; color: var(--ink2); font-size: 12px; }
.formel .fz { display: grid; gap: 3px; margin-top: 6px; }
.formel .fz-r small { display: block; font-size: 11.5px; color: var(--ink3); font-weight: 600; margin-top: 3px; }
.formel .fz-sum { border-top: .5px solid var(--line2); padding-top: 4px; margin-top: 2px; }
.formel .fv { margin-top: 6px; color: var(--orange-ink); font-size: 12.5px; }
.formel .fe2 { margin-top: 7px; color: var(--ink2); font-size: 12.5px; }
.formel .fe2 .lnk { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.formel .fe2 .lnk .ic { width: 15px; height: 15px; }
.rechner .rr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.rechner .rr-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.rechner .rr-f.voll, .rechner .rr-hint { grid-column: 1 / -1; }
.rechner .rr-f select, .rechner .rr-in { height: 44px; border-radius: 12px; background: var(--fill); border: 0; padding: 0 12px; font-size: 17px; font-weight: 600; color: var(--ink); display: flex; align-items: center; }
.rechner .rr-in input { flex: 1; min-width: 0; border: 0; background: none; font-size: 17px; font-weight: 650; outline: none; }
.rechner .rr-in em { font-style: normal; color: var(--ink2); font-size: 13px; }
.rechner .rr-big { font-size: 44px; font-weight: 750; letter-spacing: -.03em; }
.rechner .rr-big .unit { font-size: 18px; }
/* V12 Reinigung (CIP) am Tank · V13 Sudhaus */
.rg-karte { padding: 14px 16px; border-radius: 16px; background: var(--card-solid); box-shadow: var(--shadow); margin-bottom: 12px; }
.rg-karte .rg-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
.rg-karte .rg-kopf .ic { width: 20px; height: 20px; }
.rg-karte .rg-wann { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; }
.rg-karte .rg-wer { font-size: 15px; font-weight: 600; margin-top: 2px; }
.rg-karte .rg-mittel { font-size: 13.5px; color: var(--ink2); margin-top: 6px; line-height: 1.4; }
.rg-karte .rg-notiz { font-size: 13px; color: var(--ink2); margin-top: 6px; font-style: italic; }
.rg-karte.alt .rg-wann { color: var(--ink2); font-size: 20px; }
.rg-zeile { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; padding: 4px 0; }
.rg-zeile .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.rg-zeile small { display: block; color: var(--ink2); font-size: 12.5px; }
.rg-sud { display: grid; gap: 4px; }
.rg-rv { display: inline-flex; gap: 5px; align-items: center; color: var(--ink2); }
.rg-rv .ic { width: 14px; height: 14px; color: var(--gruen-zeichen); }
.ks-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 2px 0 14px; }
.ks-seg a { text-align: center; padding: 8px 0; border-radius: 9px; font-weight: 650; font-size: 14.5px; color: var(--ink2); }
.ks-seg a.on { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sh-teil .sh-wann { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin-top: 10px; }
.sh-teil .sh-extra { display: flex; gap: 6px; align-items: center; color: var(--ink2); }
.sh-teil .sh-extra .ic { width: 16px; height: 16px; }
.chip.ok { background: var(--gruen-tint); color: var(--gruen-zeichen); }
.btn.gruen-knopf, .breit .btn.pri.gruen-knopf { background: var(--gruen); color: var(--gruen-text); }
.btn.wide { width: 100%; justify-content: center; }
/* Runde 2: lange Schalter-Texte (z. B. „PfaDuKo gereinigt (Pfannendunstkondensator)“) brechen um statt das Blatt zu verbreitern */
.field.bool .switch { min-width: 0; }
.field.bool .swl { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.sh-body, .fgrid { min-width: 0; }
.fmore { white-space: normal; text-align: left; min-width: 0; }
.fsel { min-width: 0; }
.fsel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgrid > * { min-width: 0; }
.sh-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.breit .sh-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app.mit-leiste .sh-raster { grid-template-columns: minmax(0, 1fr); }
.sh-teil > .between { flex-wrap: wrap; gap: 6px; }
.sh-teil .sh-extra span { min-width: 0; }
.rechner .rr-f select { width: 100%; min-width: 0; }
.rechner .rr-f, .rechner .rr-in { min-width: 0; }