:root {
  --bg: #0B1020;
  --card: #151C35;
  --card2: #1A2342;
  --accent: #8B5CF6;
  --highlight: #38BDF8;
  --text: #E5E7EB;
  --muted: #9CA3AF;
  --input-bg: #0F172A;
  --input-border: #334155;
  --overlay-bg: #1E293B;
  --overlay-white: rgba(255,255,255,0.1);
  --overlay-white-soft: rgba(255,255,255,0.06);
  --overlay-white-med: rgba(255,255,255,0.08);
  --overlay-white-strong: rgba(255,255,255,0.25);
  --overlay-white-hover: rgba(255,255,255,0.5);
  --divider: rgba(55,65,81,0.5);
  --divider-soft: rgba(55,65,81,0.4);
  --divider-strong: rgba(55,65,81,0.9);
  --pill-bg: rgba(15,23,42,0.9);
  --shadow-color: rgba(0,0,0,0.4);
  --footer-muted: #5b6472;
  --tone-violet-text: #C4B5FD;
  --tone-blue-text: #93C9E8;
  --tone-green-text: #86EFAC;
  --tone-amber-text: #FBBF24;
  --tone-cyan-text: #7DD3FC;
}

[data-theme="light"] {
  --bg: #EEF1F7;
  --card: #FFFFFF;
  --card2: #F5F7FC;
  --accent: #7C3AED;
  --highlight: #0270A8;
  --text: #1E2433;
  --muted: #6B7280;
  --input-bg: #FFFFFF;
  --input-border: #D7DEEA;
  --overlay-bg: #FFFFFF;
  --overlay-white: rgba(15,23,42,0.14);
  --overlay-white-soft: rgba(15,23,42,0.08);
  --overlay-white-med: rgba(15,23,42,0.11);
  --overlay-white-strong: rgba(15,23,42,0.36);
  --overlay-white-hover: rgba(15,23,42,0.63);
  --divider: rgba(15,23,42,0.1);
  --divider-soft: rgba(15,23,42,0.08);
  --divider-strong: rgba(15,23,42,0.19);
  --pill-bg: #FFFFFF;
  --shadow-color: rgba(30,36,51,0.14);
  --footer-muted: #8A93A6;
  --tone-violet-text: #6D28D9;
  --tone-blue-text: #0369A1;
  --tone-green-text: #15803D;
  --tone-amber-text: #B45309;
  --tone-cyan-text: #0E7490;
}

* {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body { height: 100%; }

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  min-height: 100svh;
  font-size: 16px;
}

.app {
  width: 100%;
  max-width: 480px;
  min-height: 100svh;
  background: transparent;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app::-webkit-scrollbar { display: none; }

.app-top {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  background: var(--bg);
  padding: calc(0px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
}

.app-scroll {
  flex: 1 1 auto;
  padding: 4px calc(8px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}

.app-header { position: relative; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.app-header-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-flex; align-items: center; }
.app-logo-img { height: 66px; width: auto; vertical-align: middle; flex-shrink: 0; }

.help-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s ease;
}
.help-btn:hover { color: var(--highlight); }
.help-btn svg { display: block; }

.version-switch { position: relative; flex-shrink: 0; }
.version-switch summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--card2);
  border: 1px solid var(--input-border);
  padding: 7px 11px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.version-switch summary::-webkit-details-marker { display: none; }
.version-switch summary::after { content: "▾"; font-size: 9px; color: var(--muted); }
.version-switch[open] summary { border-color: var(--accent); color: var(--highlight); }
.version-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--overlay-bg);
  border: 1px solid rgba(139,92,246,0.4);
  border-radius: 12px;
  padding: 6px;
  min-width: 170px;
  box-shadow: 0 8px 20px var(--shadow-color);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.version-menu a {
  color: var(--text);
  font-size: 13.5px;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
}
.version-menu a:hover { background: rgba(139,92,246,0.15); }
.version-menu a.active { color: var(--highlight); font-weight: 600; }

.app-footer {
  text-align: center;
  color: var(--footer-muted);
  font-size: 12px;
  margin-top: 18px;
  padding-top: 18px;
  letter-spacing: 0.03em;
}

.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 12px;
  opacity: 0.55;
}
.scroll-hint svg {
  animation: scrollNudge 1.6s ease-in-out infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.mode-switch {
  position: relative;
  display: flex;
  gap: 10px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 10px;
}

.mode-slider { display: none; }

.mode-btn {
  position: relative;
  z-index: 2;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 0;
  font-size: 17px;
  border-radius: 14px;
  border: 1px solid var(--divider-strong);
  background: var(--pill-bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mode-btn.active { background: rgba(139,92,246,0.25); color: var(--text); font-weight: 600; border-color: var(--accent); }
@media (hover: hover) {
  .mode-btn:hover { border-color: var(--accent); color: var(--text); }
  .mode-btn.active:hover { background: rgba(139,92,246,0.35); }
}
.mode-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

.section-card {
  background: var(--card);
  border-radius: 16px;
  padding: 12px 11px;
  margin-bottom: 4px;
}
.section-title { font-size: 18px; margin-bottom: 6px; color: var(--muted); }

.slider-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
  position: relative;
}

.slider-label {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.label-text { flex: 1; }
.slider-value { font-size: 17px; font-weight: 600; color: var(--highlight); white-space: nowrap; }

.info-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s ease;
}
.info-icon:hover { color: var(--highlight); }
.info-icon svg { display: block; }

.info-bubble {
  position: absolute;
  right: 10px;
  top: 36px;
  background: var(--overlay-bg);
  border: 1px solid rgba(139,92,246,0.4);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--text);
  max-width: 260px;
  box-shadow: 0 8px 20px var(--shadow-color);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 30;
  pointer-events: none;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  white-space: pre-line;
}
.info-bubble.show { opacity: 1; }

/* Custom slider (visual track/segments/thumb driven by JS, real input underneath) */
.custom-slider {
  position: relative;
  height: 36px;
}

.custom-slider-track {
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 5px;
  background: var(--overlay-white);
  overflow: hidden;
}

.custom-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 5px;
  width: 0%;
}
.fill-purple .custom-slider-fill { background: var(--accent); }
.fill-blue .custom-slider-fill { background: var(--highlight); }
.fill-gradient .custom-slider-fill {
  background: linear-gradient(90deg,#22C55E,#38BDF8,#8B5CF6);
  background-size: 500px 100%;
  background-position: left center;
  background-repeat: no-repeat;
}

.custom-slider-segments {
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 10px;
  display: flex;
  pointer-events: none;
}
.custom-slider-segments > div {
  flex: 1;
  border-right: 2px solid var(--card2);
}
.custom-slider-segments > div:last-child { border-right: none; }

.custom-slider-thumb {
  position: absolute;
  top: 3px;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.custom-slider-thumb::before {
  /* vergrößert die Trefferfläche zum Ziehen (min. Touch-Target), ohne die Optik zu ändern */
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
}
.custom-slider-thumb:active { cursor: grabbing; }
.thumb-purple { border: 3px solid var(--accent); }
.thumb-blue { border: 3px solid var(--highlight); }
.thumb-gradient { border: 3px solid var(--text); }

.custom-slider-input {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 48px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.custom-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
}
.custom-slider-input::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: none;
}

.slider-endpoints {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.pill-select { display: flex; gap: 10px; margin-top: 8px; }
.pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 0;
  border-radius: 14px;
  font-size: 17px;
  text-align: center;
  background: var(--pill-bg);
  border: 1px solid var(--divider-strong);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pill.active { background: rgba(139,92,246,0.25); color: var(--text); border-color: var(--accent); }

@media (hover: hover) {
  .pill:hover { border-color: var(--accent); color: var(--text); }
  .pill.active:hover { background: rgba(139,92,246,0.35); }
}

.salt-select .salt-icon-sm { width: 13px; height: 13px; opacity: 0.75; }
.salt-select .salt-icon-md { width: 17px; height: 17px; opacity: 0.9; }
.salt-select .salt-icon-lg { width: 21px; height: 21px; opacity: 1; }

#boostSelect.pill-select { flex-wrap: wrap; }
#boostSelect .pill {
  flex: 1 1 28%;
  font-size: 14.5px;
  padding: 13px 4px;
  line-height: 1.3;
  gap: 6px;
}
#boostSelect .pill .pill-icon { width: 15px; height: 15px; flex-shrink: 0; }
.pill-label-stack { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.experimental-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; margin-top: 1px; }

/* Carousel: recipe card + fuel strategy card */
.card-carousel {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 14px;
  transition: height .25s ease;
}
.card-carousel::-webkit-scrollbar { display: none; }

.card-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.result-card { background: var(--card); border-radius: 16px; padding: 20px; }

.result-header-line-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}
.result-header-line { font-size: 18px; font-weight: 600; color: var(--highlight); }
.kcal-inline { font-size: 14px; color: var(--muted); }

.result-section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--divider-soft);
}
.result-section-label:first-of-type { padding-top: 0; border-top: none; }

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.result-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 999px;
  position: relative;
  width: max-content;
  flex-shrink: 0;
  white-space: nowrap;
}
.result-pill span { white-space: nowrap; }
.result-pill b { font-weight: 700; white-space: nowrap; }
.result-pill.clickable-pill { cursor: pointer; }
.sugar-pill { background: rgba(139,92,246,0.15); color: var(--tone-violet-text); }
.additive-pill { background: rgba(56,189,248,0.15); color: var(--tone-blue-text); }
.water-pill { background: rgba(34,197,94,0.15); color: var(--tone-green-text); }
.result-pill .info-icon { width: 19px; height: 19px; color: inherit; opacity: 0.7; }
.result-pill .info-icon svg { width: 15px; height: 15px; }
.result-pill .info-bubble { top: 40px; right: auto; left: 0; }

.pill-icon { width: 17px; height: 17px; flex-shrink: 0; color: inherit; opacity: 0.85; }

.concentration-note {
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(251, 191, 36, 0.1);
  color: var(--tone-amber-text);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.concentration-note.tone-green {
  background: rgba(34,197,94,0.1);
  color: var(--tone-green-text);
  border: 1px solid rgba(34,197,94,0.3);
}

/* Fuel strategy card */
.strategy-duration { font-size: 34px; font-weight: 700; color: var(--highlight); margin-bottom: 4px; }
.strategy-subtext { font-size: 14px; color: var(--muted); margin-bottom: 18px; }

.strategy-segments {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}
.strategy-segments > div {
  flex: 1;
  height: 18px;
  border-radius: 4px;
  background: var(--accent);
}

.strategy-caption { font-size: 12px; color: var(--muted); margin-bottom: 18px; }

.strategy-stats { display: flex; gap: 10px; }
.strategy-stat { flex: 1; background: var(--card2); border-radius: 14px; padding: 14px; }
.strategy-stat-value { font-size: 22px; font-weight: 700; }
.strategy-stat-label { font-size: 12px; color: var(--muted); }

.strategy-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; }

.rate-bar {
  position: relative;
  height: 34px;
  margin-bottom: 8px;
}
.rate-bar::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 5px;
  background: var(--overlay-white-med);
}
.rate-bar-zone {
  position: absolute;
  top: 13px;
  height: 10px;
  border-radius: 5px;
  background: rgba(34,197,94,0.35);
}
.rate-bar-marker {
  position: absolute;
  top: 4px;
  width: 5px;
  height: 28px;
  border-radius: 3px;
  background: var(--highlight);
}
.rate-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 18px;
}
.rate-bar-labels-mid { color: var(--tone-green-text); }

.swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  opacity: 0.55;
  cursor: pointer;
}
@media (hover: hover) {
  .swipe-hint:hover { opacity: 0.85; }
}
.swipe-hint svg {
  animation: swipeNudge 1.8s ease-in-out infinite;
}
@keyframes swipeNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.boost-weight-wrap {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.25);
}
.boost-weight-wrap.show { display: flex; }
.boost-weight-label { font-size: 13px; color: var(--muted); flex: 1; line-height: 1.35; }
.boost-weight-field {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 0 4px 0 12px;
  transition: border-color .15s ease;
}
.boost-weight-field:focus-within { border-color: var(--accent); }
.boost-weight-input {
  width: 44px;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  caret-color: var(--highlight);
}
.boost-weight-input:focus,
.boost-weight-input:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}
.boost-weight-input::-webkit-outer-spin-button,
.boost-weight-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.boost-weight-unit { font-size: 13px; color: var(--muted); padding-right: 8px; }

.boost-recommendation {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(34,197,94,0.1);
  color: var(--tone-green-text);
  border: 1px solid rgba(34,197,94,0.3);
  display: none;
}

.boost-hint { font-size: 12px; color: var(--muted); margin: 10px 2px 0; line-height: 1.5; }

.pill-select .pill.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.caffeine-line {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card2);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.caffeine-line b { color: var(--text); }
.caffeine-line .pill-icon { width: 16px; height: 16px; flex-shrink: 0; }

.khmode-toggle {
  margin-top: 8px;
  margin-bottom: 4px;
}
.khmode-toggle .mode-btn {
  font-size: 14.5px;
  padding: 13px 6px;
  line-height: 1.3;
  gap: 6px;
}
.khmode-toggle .mode-btn-icon {
  width: 15px;
  height: 15px;
}

.khmode-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.flask-count-note {
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(56,189,248,0.1);
  color: var(--tone-cyan-text);
  border: 1px solid rgba(56,189,248,0.3);
}

.recipe-label-row { display: flex; align-items: center; justify-content: space-between; }
.card-reset-wrap {
  margin-top: 18px;
}
.reset-btn {
  width: 100%;
  height: auto;
  padding: 9px 0;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.reset-btn svg { flex-shrink: 0; }
@media (hover: hover) {
  .reset-btn:hover { border-color: var(--accent); color: var(--highlight); background: rgba(139,92,246,0.08); }
}
.reset-btn:active { transform: scale(0.98); }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--overlay-white-strong);
  cursor: pointer;
  transition: background .15s ease;
}
@media (hover: hover) {
  .dot:hover { background: var(--overlay-white-hover); }
}
  cursor: pointer;
}
.dot.active { background: var(--highlight); }

/* Kombi mode */
.kombi-container-block { margin-bottom: 4px; }

.counter-card {
  background: var(--card2);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
}
.counter-card .counter-controls,
.counter-card .counter-volume-body { cursor: default; }
.counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.counter-label-wrap { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.counter-label { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; gap: 9px; font-size: 17px; font-weight: 700; }
.counter-label .pill-icon { width: 19px; height: 19px; }
.counter-sub-toggle {
  cursor: pointer;
  width: max-content;
}
.counter-name { color: var(--text); }
.counter-vol { color: var(--highlight); font-weight: 700; }
.counter-chevron { transition: transform .15s ease; opacity: 0.7; flex-shrink: 0; }
.counter-sub-toggle.open .counter-vol,
.counter-sub-toggle.open .counter-name { color: var(--highlight); }
.counter-sub-toggle.open .counter-chevron { transform: rotate(90deg); opacity: 1; }
.counter-controls { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.counter-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.15);
  color: var(--highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
@media (hover: hover) {
  .counter-btn:hover { border-color: var(--accent); }
}
.counter-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.counter-value { font-size: 20px; font-weight: 700; min-width: 28px; text-align: center; }

.counter-volume-body {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--divider-soft);
}
.counter-volume-body.open { display: block; }
.counter-volume-body .slider-label { margin-bottom: 10px; }

.combi-hint { font-size: 13px; color: var(--muted); margin: 10px 2px 4px; line-height: 1.55; }

.kombi-summary { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.kombi-summary b { color: var(--text); }

.mini-card {
  background: var(--card2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
.mini-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 10px;
}
.mini-card-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.mini-card-title .pill-icon { width: 19px; height: 19px; }
.mini-card-stats { font-size: 15px; color: var(--muted); text-align: right; flex: 1; min-width: 0; }
.mini-card-stats b { color: var(--text); font-weight: 600; }
.mini-card-stats .dur { color: var(--tone-green-text); font-weight: 600; }
.mini-card-chevron { color: var(--muted); flex-shrink: 0; display: flex; transition: transform .15s ease; }
.mini-card.expanded .mini-card-chevron { transform: rotate(90deg); }
.mini-card-body { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--divider-soft); }
.mini-card.expanded .mini-card-body { display: block; }

.mini-strategy-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 16px 0 10px; }
.mini-strategy-segments { display: flex; gap: 4px; margin-bottom: 12px; }
.mini-strategy-segments > div { flex: 1; height: 14px; border-radius: 3px; background: var(--accent); }
.mini-strategy-stats { display: flex; gap: 8px; }
.mini-strategy-stat { flex: 1; background: var(--overlay-white-soft); border: 1px solid var(--overlay-white-soft); border-radius: 10px; padding: 12px 13px; }
.mini-strategy-stat-value { font-size: 20px; font-weight: 700; }
.mini-strategy-stat-label { font-size: 14px; color: var(--muted); }

.mini-rate-bar { position: relative; height: 10px; border-radius: 5px; background: var(--overlay-white-med); margin-bottom: 8px; overflow: hidden; }
.mini-rate-bar-zone { position: absolute; top: 0; bottom: 0; background: rgba(134,239,172,0.25); }
.mini-rate-bar-marker { position: absolute; top: -2px; bottom: -2px; width: 3px; border-radius: 2px; background: var(--highlight); }
.mini-rate-bar-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 12px; }

.quick-btn {
  display: flex;
  width: fit-content;
  margin: 8px auto 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.4);
  background: rgba(251,191,36,0.15);
  color: var(--tone-amber-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) {
  .quick-btn:hover { background: rgba(251,191,36,0.25); }
}

/* On screens wider als ein Handy bekommt die App etwas Luft zum Fensterrand,
   aber ohne eigene Box-Optik (kein Schatten/Rand) – bleibt auf echten mobilen
   Geräten (unter 481px) ohnehin randlos. */
@media (min-width: 481px) {
  body { padding: 16px; }
  .app {
    min-height: calc(100svh - 32px);
  }
}

.theme-toggle-wrap { display: flex; justify-content: center; margin-top: 10px; }
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
}
.theme-toggle-icon { flex-shrink: 0; transition: opacity .2s ease, color .2s ease; opacity: 0.4; }
.theme-toggle-icon.icon-moon { opacity: 1; }
[data-theme="light"] .theme-toggle-icon.icon-sun { opacity: 1; color: var(--tone-amber-text); }
[data-theme="light"] .theme-toggle-icon.icon-moon { opacity: 0.4; }
.theme-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--input-border);
  transition: background .2s ease, border-color .2s ease;
  flex-shrink: 0;
}
.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--highlight);
  transform: translateX(16px);
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .2s ease;
}
[data-theme="light"] .theme-toggle-thumb { transform: translateX(0); background: var(--accent); }
@media (hover: hover) {
  .theme-toggle:hover .theme-toggle-track { border-color: var(--accent); }
}